@alepha/ui 0.17.2 → 0.18.1

package/dist/admin/core-2xoLiT0o.js

@@ -0,0 +1,4031 @@
+import { $atom, $context, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
+import { AlephaReactForm, FormValidationError, useForm, useFormState } from "alepha/react/form";
+import { $head, AlephaReactHead } from "alepha/react/head";
+import { AlephaReactI18n, useI18n } from "alepha/react/i18n";
+import { $cookie } from "alepha/server/cookies";
+import { ModalsProvider, modals } from "@mantine/modals";
+import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, ColorInput, ColorSchemeScript, Container, CopyButton, Divider, Drawer, Fieldset, FileInput, Flex, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Switch, Table, Tabs, TagsInput, Text, TextInput, Textarea, ThemeIcon, Tooltip, UnstyledButton, useMantineColorScheme, useMantineTheme } from "@mantine/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, Fragment as Fragment$1, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Notifications, notifications } from "@mantine/notifications";
+import { IconAlertTriangle, IconArrowDown, IconArrowLeft, IconArrowUp, IconArrowsSort, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClipboard, IconClock, IconColorPicker, IconColumns, IconCopy, IconDownload, IconFile, IconFilter, IconGripVertical, IconHash, IconInfoCircle, IconInfoTriangle, IconKey, IconLanguage, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconPlus, IconRefresh, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconTrash, IconX } from "@tabler/icons-react";
+import { $page, Link, NestedView, useActive, useRouter, useRouterState } from "alepha/react/router";
+import { NavigationProgress, nprogress } from "@mantine/nprogress";
+import { ClientOnly, useAction, useAlepha, useEvents, useInject, useStore } from "alepha/react";
+import { Spotlight, spotlight } from "@mantine/spotlight";
+import { currentUserAtom } from "alepha/security";
+import { 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",
+	schema: t.object({
+		closed: t.boolean(),
+		collapsed: t.boolean(),
+		expandedWidth: t.number(),
+		collapsedWidth: t.number()
+	}),
+	default: {
+		closed: true,
+		collapsed: false,
+		expandedWidth: 300,
+		collapsedWidth: 78
+	}
+});
+
+//#endregion
+//#region ../../src/core/atoms/alephaThemeAtom.ts
+const alephaThemeAtom = $atom({
+	name: "alepha.ui.theme",
+	schema: t.object({ index: t.integer() }),
+	default: { index: 0 }
+});
+
+//#endregion
+//#region ../../src/core/atoms/themes/default.ts
+const defaultTheme = {
+	name: "Default",
+	description: "Default Alepha Theme"
+};
+
+//#endregion
+//#region ../../src/core/atoms/themes/midnight.ts
+const midnightTheme = {
+	name: "Midnight",
+	description: "Clean, developer-focused design",
+	primaryColor: "pink",
+	primaryShade: {
+		light: 7,
+		dark: 8
+	},
+	fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+		fontWeight: "600",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2rem",
+				lineHeight: "1.25"
+			},
+			h2: {
+				fontSize: "1.5rem",
+				lineHeight: "1.3"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h5: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.75rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	radius: {
+		xs: "3px",
+		sm: "6px",
+		md: "6px",
+		lg: "8px",
+		xl: "12px"
+	},
+	defaultRadius: "sm",
+	colors: {
+		dark: [
+			"#d0d7de",
+			"#8b949e",
+			"#6e7681",
+			"#484f58",
+			"#30363d",
+			"#21262d",
+			"#161b22",
+			"#151b23",
+			"#0d1117",
+			"#010409"
+		],
+		gray: [
+			"#f6f8fa",
+			"#eaeef2",
+			"#d0d7de",
+			"#afb8c1",
+			"#8c959f",
+			"#6e7781",
+			"#57606a",
+			"#424a53",
+			"#32383f",
+			"#24292f"
+		],
+		blue: [
+			"#ddf4ff",
+			"#b6e3ff",
+			"#80ccff",
+			"#54aeff",
+			"#218bff",
+			"#0969da",
+			"#0550ae",
+			"#033d8b",
+			"#0a3069",
+			"#002155"
+		],
+		green: [
+			"#dafbe1",
+			"#aceebb",
+			"#6fdd8b",
+			"#4ac26b",
+			"#2da44e",
+			"#1a7f37",
+			"#116329",
+			"#044f1e",
+			"#003d16",
+			"#002d11"
+		],
+		red: [
+			"#ffebe9",
+			"#ffcecb",
+			"#ffaba8",
+			"#ff8182",
+			"#fa4549",
+			"#cf222e",
+			"#a40e26",
+			"#82071e",
+			"#660018",
+			"#4c0014"
+		]
+	}
+};
+
+//#endregion
+//#region ../../src/core/atoms/alephaThemeListAtom.ts
+const alephaThemeListAtom = $atom({
+	name: "alepha.ui.themeList",
+	schema: t.array(t.json()),
+	default: [defaultTheme, midnightTheme]
+});
+
+//#endregion
+//#region ../../src/core/providers/ThemeProvider.ts
+var ThemeProvider = class {
+	alepha = $inject(Alepha);
+	cookie = $cookie({
+		name: "theme",
+		schema: alephaThemeAtom.schema,
+		ttl: [1, "year"]
+	});
+	head = $head(() => {
+		const theme = this.getTheme();
+		if (!theme || !theme.name) return {};
+		return { htmlAttributes: { "data-theme": theme.name } };
+	});
+	setTheme(index) {
+		const newTheme = this.alepha.store.get(alephaThemeListAtom)[index];
+		if (!newTheme) throw new AlephaError(`Theme with index ${index} not found`);
+		this.cookie.set({ index });
+		this.alepha.store.set(alephaThemeAtom, { index });
+		if (typeof document === "undefined") return;
+		document.documentElement.removeAttribute("data-theme");
+		if (newTheme.name) document.documentElement.setAttribute("data-theme", newTheme.name);
+	}
+	getTheme() {
+		const index = this.getThemeIndex();
+		const list = this.alepha.store.get(alephaThemeListAtom);
+		return list[index] || list[0] || defaultTheme;
+	}
+	getThemeIndex() {
+		try {
+			return this.cookie.get()?.index ?? this.alepha.store.get(alephaThemeAtom)?.index ?? 0;
+		} catch {
+			return this.alepha.store.get(alephaThemeAtom)?.index ?? 0;
+		}
+	}
+};
+
+//#endregion
+//#region ../../src/core/components/dialogs/AlertDialog.tsx
+const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text, {
+	mb: "md",
+	children: options.message
+}), /* @__PURE__ */ jsx(Flex, {
+	justify: "flex-end",
+	children: /* @__PURE__ */ jsx(Button, {
+		onClick: onClose,
+		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, {
+	mb: "md",
+	children: options.message
+}), /* @__PURE__ */ jsxs(Flex, {
+	justify: "flex-end",
+	children: [/* @__PURE__ */ jsx(Button, {
+		variant: "subtle",
+		onClick: () => onConfirm(false),
+		children: options?.cancelLabel || "Cancel"
+	}), /* @__PURE__ */ jsx(Button, {
+		color: options?.confirmColor || "blue",
+		onClick: () => onConfirm(true),
+		children: options?.confirmLabel || "Confirm"
+	})]
+})] });
+
+//#endregion
+//#region ../../src/core/components/dialogs/PromptDialog.tsx
+const PromptDialog = ({ options, onSubmit }) => {
+	const [value, setValue] = useState(options?.defaultValue || "");
+	const inputRef = useRef(null);
+	useEffect(() => {
+		inputRef.current?.focus();
+	}, []);
+	const handleSubmit = () => {
+		if (!options?.required || value.trim()) onSubmit(value);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter") handleSubmit();
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		options?.message && /* @__PURE__ */ jsx(Text, {
+			mb: "md",
+			children: options.message
+		}),
+		/* @__PURE__ */ jsx(TextInput, {
+			ref: inputRef,
+			label: options?.label,
+			placeholder: options?.placeholder,
+			value,
+			onChange: (event) => setValue(event.currentTarget.value),
+			onKeyDown: handleKeyDown,
+			required: options?.required,
+			mb: "md"
+		}),
+		/* @__PURE__ */ jsxs(Flex, {
+			justify: "flex-end",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "subtle",
+				onClick: () => onSubmit(null),
+				children: options?.cancelLabel || "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				onClick: handleSubmit,
+				disabled: options?.required && !value.trim(),
+				children: options?.submitLabel || "OK"
+			})]
+		})
+	] });
+};
+
+//#endregion
+//#region ../../src/core/services/DialogService.tsx
+var DialogService = class {
+	options = { default: {
+		centered: true,
+		withCloseButton: true,
+		size: "md",
+		overlayProps: {
+			backgroundOpacity: .55,
+			blur: 3
+		},
+		transitionProps: {
+			transition: "pop",
+			duration: 200
+		}
+	} };
+	/**
+	* Show an alert dialog with a message
+	*/
+	alert(options) {
+		return new Promise((resolve) => {
+			const modalId = this.open({
+				...options,
+				title: options?.title || "Alert",
+				content: /* @__PURE__ */ jsx(AlertDialog, {
+					options,
+					onClose: () => {
+						this.close(modalId);
+						resolve();
+					}
+				})
+			});
+		});
+	}
+	/**
+	* Show a confirmation dialog that returns a promise
+	*/
+	confirm(options) {
+		return new Promise((resolve) => {
+			const modalId = this.open({
+				...options,
+				title: options?.title || "Confirm",
+				closeOnClickOutside: false,
+				closeOnEscape: false,
+				content: /* @__PURE__ */ jsx(ConfirmDialog, {
+					options,
+					onConfirm: (confirmed) => {
+						this.close(modalId);
+						resolve(confirmed);
+					}
+				})
+			});
+		});
+	}
+	/**
+	* Show a prompt dialog to get user input
+	*/
+	prompt(options) {
+		return new Promise((resolve) => {
+			const modalId = this.open({
+				...options,
+				title: options?.title || "Input",
+				closeOnClickOutside: false,
+				closeOnEscape: false,
+				content: /* @__PURE__ */ jsx(PromptDialog, {
+					options,
+					onSubmit: (value) => {
+						this.close(modalId);
+						resolve(value);
+					}
+				})
+			});
+		});
+	}
+	/**
+	* Open a custom dialog with provided content
+	*/
+	open(options) {
+		return modals.open({
+			...this.options.default,
+			...options,
+			children: options?.content || options?.message
+		});
+	}
+	/**
+	* Close the currently open dialog or a specific dialog by ID
+	*/
+	close(modalId) {
+		if (modalId) modals.close(modalId);
+		else modals.closeAll();
+	}
+};
+
+//#endregion
+//#region ../../src/core/services/ToastService.tsx
+var ToastService = class {
+	raw = notifications;
+	options = { default: {
+		radius: "md",
+		withBorder: true,
+		withCloseButton: true,
+		autoClose: 5e3,
+		position: "top-center"
+	} };
+	show(options) {
+		notifications.show({
+			...this.options.default,
+			...options
+		});
+	}
+	info(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "blue",
+			icon: /* @__PURE__ */ jsx(IconInfoCircle, { size: 20 }),
+			title: "Info",
+			message: "Information notification",
+			...options
+		});
+	}
+	success(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "green",
+			icon: /* @__PURE__ */ jsx(IconCheck, { size: 16 }),
+			title: "Success",
+			message: "Operation completed successfully",
+			...options
+		});
+	}
+	warning(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "yellow",
+			icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 20 }),
+			title: "Warning",
+			message: "Please review this warning",
+			...options
+		});
+	}
+	danger(options) {
+		if (typeof options === "string") options = { message: options };
+		this.show({
+			color: "red",
+			icon: /* @__PURE__ */ jsx(IconX, { size: 20 }),
+			title: "Error",
+			message: "An error occurred",
+			...options
+		});
+	}
+};
+
+//#endregion
+//#region ../../src/core/UiRouter.ts
+/**
+* UI Router defining the root page with AlephaMantineProvider.
+*
+* - Use UiRouter when you need Alepha's Mantine-based UI components and theming.
+* - Prefer to use $ui() for convenience. (Custom Factory of UiRouter)
+*/
+var UiRouter = class {
+	root = $page({
+		path: "/",
+		component: AlephaMantineProvider
+	});
+};
+
+//#endregion
+//#region ../../src/core/hooks/useTheme.ts
+/**
+* Hook to get and set the current theme.
+*
+* Returns a tuple with the current theme and a function to set the theme.
+*
+* ```tsx
+* const [theme, setTheme] = useTheme();
+* ```
+*/
+const useTheme = () => {
+	useStore(alephaThemeAtom);
+	const themeProvider = useInject(ThemeProvider);
+	const theme = themeProvider.getTheme();
+	const setTheme = (theme) => {
+		themeProvider.setTheme(theme.index);
+	};
+	return [theme, setTheme];
+};
+
+//#endregion
+//#region ../../src/core/hooks/useToast.ts
+/**
+* Use this hook to access the Toast Service for showing notifications.
+*
+* @example
+* ```tsx
+* const toast = useToast();
+* toast.success({ message: "Operation completed successfully!" });
+* toast.error({ title: "Error", message: "Something went wrong" });
+* ```
+*/
+const useToast = () => {
+	return useInject(ToastService);
+};
+
+//#endregion
+//#region ../../src/core/components/layout/Omnibar.tsx
+const Omnibar = (props) => {
+	const shortcut = props.shortcut ?? "mod+K";
+	const searchPlaceholder = props.searchPlaceholder ?? "Search...";
+	const nothingFound = props.nothingFound ?? "Nothing found...";
+	const router = useRouter();
+	const [user] = useStore(currentUserAtom);
+	return /* @__PURE__ */ jsx(Spotlight, {
+		actions: useMemo(() => router.concretePages.filter((page) => {
+			if (page.can && !page.can()) return false;
+			return true;
+		}).map((page) => ({
+			id: page.name,
+			label: page.label ?? page.name,
+			description: page.description,
+			onClick: () => {
+				if (page.staticName) return router.push(page.staticName, { params: page.params });
+				return router.push(page.name);
+			},
+			leftSection: renderIcon(page.icon)
+		})), [user]),
+		shortcut,
+		limit: 10,
+		searchProps: {
+			leftSection: /* @__PURE__ */ jsx(IconSearch, { size: ui.sizes.icon.md }),
+			placeholder: searchPlaceholder
+		},
+		nothingFound
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/AlephaMantineProvider.tsx
+const AlephaMantineProvider = (props) => {
+	const toast = useToast();
+	const [theme] = useTheme();
+	useEvents({
+		"react:transition:begin": () => {
+			nprogress.start();
+		},
+		"react:transition:end": () => {
+			nprogress.complete();
+		},
+		"react:action:error": ({ error, type }) => {
+			if (type === "transition" || error instanceof FormValidationError || error instanceof TypeBoxError) return;
+			toast.danger({
+				title: error.name || "Error",
+				message: error.message ?? "An error occurred while processing your action."
+			});
+		}
+	}, []);
+	const defaultColorScheme = props.mantine?.defaultColorScheme ?? theme.defaultColorScheme;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
+		defaultColorScheme,
+		...props.colorSchemeScript
+	}), /* @__PURE__ */ jsxs(MantineProvider, {
+		...props.mantine,
+		defaultColorScheme,
+		theme: {
+			...theme,
+			...props.mantine?.theme
+		},
+		children: [
+			/* @__PURE__ */ jsx(Notifications, { ...props.notifications }),
+			/* @__PURE__ */ jsx(NavigationProgress, { ...props.navigationProgress }),
+			/* @__PURE__ */ jsxs(ModalsProvider, {
+				...props.modals,
+				children: [props.omnibar !== false && /* @__PURE__ */ jsx(Omnibar, { ...props.omnibar }), props.children ?? /* @__PURE__ */ jsx(NestedView, {})]
+			})
+		]
+	})] });
+};
+
+//#endregion
+//#region ../../src/core/constants/ui.ts
+const ui = {
+	colors: {
+		transparent: "transparent",
+		background: "var(--alepha-background)",
+		surface: "var(--alepha-surface)",
+		elevated: "var(--alepha-elevated)",
+		border: "var(--alepha-border)"
+	},
+	sizes: { icon: {
+		xs: 14,
+		sm: 16,
+		md: 20,
+		lg: 24,
+		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,
+		onClick: item.onClick,
+		color: item.color,
+		rightSection: item.active ? /* @__PURE__ */ jsx(ThemeIcon, {
+			size: "xs",
+			variant: "transparent",
+			children: /* @__PURE__ */ jsx(IconCheck, {})
+		}) : void 0,
+		...menuItemProps,
+		children: item.label
+	}, index);
+};
+const ActionButton = (_props) => {
+	const theme = useMantineTheme();
+	const props = { ..._props };
+	const { tooltip, menu, icon, ...restProps } = props;
+	if (props.variant === "subtle" || props.variant === "outline") restProps.color ??= "gray";
+	if (props.intent) {
+		if (props.intent === "none") restProps.color ??= "gray";
+		else if (props.intent === "primary") restProps.color ??= theme.primaryColor;
+		else if (props.intent === "success") {
+			restProps.c ??= "white";
+			restProps.color ??= "green";
+		} else if (props.intent === "danger") {
+			restProps.c ??= "white";
+			restProps.color ??= "red";
+		} else if (props.intent === "warning") restProps.color ??= "yellow";
+		else if (props.intent === "info") {
+			restProps.c ??= "white";
+			restProps.color ??= "blue";
+		}
+	}
+	if (props.icon) {
+		const sizes = ui.sizes.icon;
+		const icon = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: sizes[props.size || "md"] }) : /* @__PURE__ */ jsx("span", { children: props.icon });
+		if (!props.children) {
+			restProps.children = Children.only(icon);
+			restProps.px ??= "xs";
+		} else restProps.leftSection = icon;
+	}
+	if (props.leftSection && !props.children) restProps.px ??= "xs";
+	if (props.textVisibleFrom) {
+		const { children, textVisibleFrom, leftSection, ...rest } = restProps;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex, {
+			w: "100%",
+			visibleFrom: textVisibleFrom,
+			children: /* @__PURE__ */ jsx(ActionButton, {
+				flex: 1,
+				...rest,
+				leftSection,
+				tooltip,
+				menu,
+				children
+			})
+		}), /* @__PURE__ */ jsx(Flex, {
+			w: "100%",
+			hiddenFrom: textVisibleFrom,
+			children: /* @__PURE__ */ jsx(ActionButton, {
+				px: "xs",
+				...rest,
+				tooltip,
+				menu,
+				children: leftSection
+			})
+		})] });
+	}
+	const renderAction = () => {
+		if ("href" in restProps && restProps.href) {
+			if (restProps.href.startsWith("http") || restProps.target) return /* @__PURE__ */ jsx(ActionHrefButton, {
+				...restProps,
+				href: restProps.href,
+				children: restProps.children
+			});
+			return /* @__PURE__ */ jsx(ActionNavigationButton, {
+				...restProps,
+				href: restProps.href,
+				children: restProps.children
+			});
+		}
+		delete restProps.classNameActive;
+		delete restProps.variantActive;
+		delete restProps.propsActive;
+		if ("action" in restProps && restProps.action) return /* @__PURE__ */ jsx(ActionHookButton, {
+			...restProps,
+			action: restProps.action,
+			children: restProps.children
+		});
+		if ("onClick" in restProps && restProps.onClick) return /* @__PURE__ */ jsx(ActionClickButton, {
+			...restProps,
+			onClick: restProps.onClick,
+			children: restProps.children
+		});
+		if ("form" in restProps && restProps.form) {
+			if (restProps.type === "reset") return /* @__PURE__ */ jsx(ActionResetButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+			return /* @__PURE__ */ jsx(ActionSubmitButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+		}
+		return /* @__PURE__ */ jsx(Button, {
+			...restProps,
+			children: restProps.children
+		});
+	};
+	let actionElement = renderAction();
+	if (menu) actionElement = /* @__PURE__ */ jsxs(Menu, {
+		position: menu.position || "bottom-start",
+		width: menu.width || 200,
+		shadow: menu.shadow || "md",
+		trigger: menu.on === "hover" ? "hover" : "click",
+		...menu.menuProps,
+		children: [/* @__PURE__ */ jsx(Menu.Target, {
+			...menu.targetProps,
+			children: actionElement
+		}), /* @__PURE__ */ jsx(Menu.Dropdown, { children: menu.items.map((item, index) => /* @__PURE__ */ jsx(ActionMenuItem, {
+			item,
+			index
+		}, index)) })]
+	});
+	if (tooltip) {
+		const defaultTooltipProps = { openDelay: 1e3 };
+		return /* @__PURE__ */ jsx(Tooltip, { ...typeof tooltip === "string" || typeof tooltip === "number" ? {
+			...defaultTooltipProps,
+			label: tooltip,
+			children: actionElement
+		} : {
+			...defaultTooltipProps,
+			...tooltip,
+			children: actionElement
+		} });
+	}
+	return actionElement;
+};
+/**
+* Action button that submits a form with loading and disabled state handling.
+*/
+const ActionSubmitButton = (props) => {
+	const { form, ...buttonProps } = props;
+	const state = useFormState(form);
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		loading: state.loading,
+		disabled: state.loading,
+		type: "submit",
+		children: props.children
+	});
+};
+const ActionResetButton = (props) => {
+	const { form, ...buttonProps } = props;
+	const state = useFormState(form);
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		disabled: state.loading,
+		type: "reset",
+		children: props.children
+	});
+};
+/**
+* Action button that integrates with useAction hook return value.
+* Automatically handles loading state and executes the action on click.
+*
+* @example
+* ```tsx
+* const saveAction = useAction({
+*   handler: async (data) => {
+*     await api.save(data);
+*   }
+* }, []);
+*
+* <ActionButton action={saveAction}>
+*   Save
+* </ActionButton>
+* ```
+*/
+const ActionHookButton = (props) => {
+	const { action, ...buttonProps } = props;
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		disabled: action.loading || props.disabled,
+		loading: action.loading,
+		onClick: () => action.run(),
+		children: props.children
+	});
+};
+/**
+* Basic action button that handles click events with loading and error handling.
+*
+* @example
+* ```tsx
+* <ActionButton onClick={() => api.doSomething()}>
+*   Do Something
+* </ActionButton>
+* ```
+*/
+const ActionClickButton = ({ preventDefault, ...props }) => {
+	const action = useAction({ handler: async (e) => {
+		if (preventDefault) e.preventDefault();
+		await props.onClick(e);
+	} }, [props.onClick, preventDefault]);
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		disabled: action.loading || props.disabled,
+		loading: action.loading,
+		onClick: action.run,
+		children: props.children
+	});
+};
+/**
+* Action for navigation with active state support.
+*/
+const ActionNavigationButton = (props) => {
+	const { active: options, classNameActive, variantActive, propsActive, routerGoOptions, onClick: propsOnClick, anchor, ...buttonProps } = props;
+	const router = useRouter();
+	const { isPending, isActive } = useActive(options ? {
+		href: props.href,
+		...options
+	} : { href: props.href });
+	const anchorProps = router.anchor(props.href, routerGoOptions);
+	if (propsActive && isActive) Object.assign(buttonProps, propsActive);
+	const combinedOnClick = (e) => {
+		propsOnClick?.(e);
+		anchorProps.onClick?.(e);
+	};
+	const className = buttonProps.className || "";
+	if (isActive && options !== false && classNameActive) buttonProps.className = `${className} ${classNameActive}`.trim();
+	if (props.anchorProps || anchor) return /* @__PURE__ */ jsx(Anchor, {
+		component: "a",
+		...anchorProps,
+		...buttonProps,
+		...props.anchorProps,
+		onClick: combinedOnClick,
+		children: props.children
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		component: "a",
+		loading: isPending,
+		...buttonProps,
+		...anchorProps,
+		onClick: combinedOnClick,
+		variant: isActive && options !== false ? variantActive ?? "filled" : buttonProps.variant ?? "subtle",
+		children: props.children
+	});
+};
+const ActionHrefButton = (props) => {
+	const { active: options, classNameActive, variantActive, propsActive, routerGoOptions, target, ...buttonProps } = props;
+	return /* @__PURE__ */ jsx(Button, {
+		component: "a",
+		target,
+		...buttonProps,
+		children: props.children
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/buttons/BurgerButton.tsx
+const BurgerButton = (props) => {
+	const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
+	return /* @__PURE__ */ jsx(Burger, {
+		opened: !sidebar.closed,
+		onClick: () => setSidebar({
+			...sidebar,
+			closed: !sidebar.closed
+		}),
+		hiddenFrom: "md",
+		size: "sm",
+		...props
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/buttons/ClipboardButton.tsx
+const ClipboardButton = (props) => {
+	const { value, timeout = 2e3, copyLabel = "Copy", copiedLabel = "Copied", children, ...buttonProps } = props;
+	return /* @__PURE__ */ jsx(CopyButton, {
+		value,
+		timeout,
+		children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, {
+			label: copied ? copiedLabel : copyLabel,
+			openDelay: 500,
+			children: /* @__PURE__ */ jsx(ActionButton, {
+				color: copied ? "teal" : void 0,
+				onClick: copy,
+				icon: copied ? IconCheck : IconCopy,
+				...buttonProps,
+				children
+			})
+		})
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/buttons/DarkModeButton.tsx
+/**
+* SSR-safe dark mode toggle button.
+*
+* Uses CSS-based icon switching to avoid hydration mismatches.
+* Both icons are rendered, CSS hides the wrong one based on
+* `data-mantine-color-scheme` attribute.
+*/
+const DarkModeButton = (props) => {
+	const { setColorScheme } = useMantineColorScheme();
+	const toggleColorScheme = () => {
+		setColorScheme((document.documentElement.getAttribute("data-mantine-color-scheme") ?? "light") === "dark" ? "light" : "dark");
+	};
+	const size = props.size ?? "md";
+	const iconSize = ui.sizes.icon[size] ?? ui.sizes.icon.md;
+	return /* @__PURE__ */ jsx(ActionButton, {
+		onClick: toggleColorScheme,
+		variant: props.variant ?? "subtle",
+		size,
+		"aria-label": "Toggle color scheme",
+		icon: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconSun, {
+			size: iconSize,
+			className: "alepha-light-hidden"
+		}), /* @__PURE__ */ jsx(IconMoon, {
+			size: iconSize,
+			className: "alepha-dark-hidden"
+		})] }),
+		...props
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/buttons/LanguageButton.tsx
+const LanguageButton = (props) => {
+	const i18n = useI18n();
+	return /* @__PURE__ */ jsx(ActionButton, {
+		variant: "subtle",
+		icon: IconLanguage,
+		menu: { items: i18n.languages.map((lang) => ({
+			label: i18n.tr(lang),
+			onClick: () => i18n.setLang(lang),
+			active: i18n.lang === lang
+		})) },
+		...props
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/buttons/OmnibarButton.tsx
+const OmnibarButton = (props) => {
+	const os = useOs();
+	const shortcut = os === "macos" || os === "ios" ? "⌘" : "Ctrl";
+	if (props.collapsed) return /* @__PURE__ */ jsx(ActionButton, {
+		variant: "subtle",
+		onClick: spotlight.open,
+		radius: "md",
+		icon: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
+		tooltip: {
+			label: "Search",
+			position: "right"
+		},
+		...props.actionProps
+	});
+	return /* @__PURE__ */ jsx(ActionButton, {
+		variant: "default",
+		onClick: spotlight.open,
+		justify: "space-between",
+		rightSection: /* @__PURE__ */ jsxs(Kbd, {
+			visibleFrom: "sm",
+			size: "sm",
+			children: [/* @__PURE__ */ jsx(ClientOnly, { children: shortcut }), "+K"]
+		}),
+		radius: "md",
+		...props.actionProps,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			gap: "xs",
+			children: [/* @__PURE__ */ jsx(IconSearch, {
+				size: 16,
+				color: "gray"
+			}), /* @__PURE__ */ jsx(Flex, {
+				visibleFrom: "sm",
+				miw: 192,
+				children: /* @__PURE__ */ jsx(Text, {
+					size: "xs",
+					c: "dimmed",
+					children: "Search..."
+				})
+			})]
+		})
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/buttons/ThemeButton.tsx
+const ThemeButton = (props) => {
+	const [theme, setTheme] = useTheme();
+	const themeList = useStore(alephaThemeListAtom)[0];
+	return /* @__PURE__ */ jsx(ActionButton, {
+		variant: "subtle",
+		icon: IconPalette,
+		menu: { items: themeList.map((it, index) => ({
+			label: it.name,
+			onClick: () => setTheme({ index }),
+			active: theme.name === it.name
+		})) },
+		...props
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/buttons/ToggleSidebarButton.tsx
+const ToggleSidebarButton = (props) => {
+	const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
+	return /* @__PURE__ */ jsx(ActionButton, {
+		icon: sidebar.collapsed ? IconLayoutSidebarRightCollapse : IconLayoutSidebarLeftCollapse,
+		visibleFrom: "md",
+		variant: "subtle",
+		size: "md",
+		onClick: () => {
+			setSidebar({
+				...sidebar,
+				collapsed: !sidebar.collapsed
+			});
+		},
+		tooltip: {
+			position: "right",
+			label: sidebar.collapsed ? "Show sidebar" : "Hide sidebar"
+		},
+		...props
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/data/DetailList.tsx
+const DetailList = ({ items, columns = 1 }) => {
+	return /* @__PURE__ */ jsx(Grid, {
+		gutter: "xs",
+		children: items.filter((item) => !item.hidden).map((item) => /* @__PURE__ */ jsx(Grid.Col, {
+			span: 12 / columns,
+			children: /* @__PURE__ */ jsxs(Flex, {
+				py: 6,
+				justify: "space-between",
+				align: "center",
+				style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "xs",
+					c: "dimmed",
+					style: { flexShrink: 0 },
+					children: item.label
+				}), /* @__PURE__ */ jsxs(Flex, {
+					gap: 4,
+					align: "center",
+					style: { minWidth: 0 },
+					children: [typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						fw: 500,
+						truncate: true,
+						children: item.value || "—"
+					}) : item.value ?? /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						c: "dimmed",
+						children: "—"
+					}), item.copyable && /* @__PURE__ */ jsx(ClipboardButton, {
+						value: item.copyable,
+						size: "xs",
+						variant: "subtle",
+						c: "dimmed"
+					})]
+				})]
+			})
+		}, item.label))
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/data/StatCards.tsx
+const StatCards = ({ items }) => /* @__PURE__ */ jsx(Flex, {
+	gap: "sm",
+	wrap: "wrap",
+	children: items.map((item) => {
+		(item.icon && typeof item.icon === "function" ? item.icon : null) ? ui.sizes.icon.md : item.icon;
+		return /* @__PURE__ */ jsx(Paper, {
+			p: "md",
+			radius: "md",
+			withBorder: true,
+			style: {
+				flex: "1 1 0",
+				minWidth: 120
+			},
+			children: /* @__PURE__ */ jsx(Flex, {
+				gap: "sm",
+				align: "center",
+				children: /* @__PURE__ */ jsxs(Flex, {
+					direction: "column",
+					children: [/* @__PURE__ */ jsx(Text, {
+						size: "xl",
+						fw: 700,
+						lh: 1,
+						children: item.value
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						children: item.label
+					})]
+				})
+			})
+		}, item.label);
+	})
+});
+
+//#endregion
+//#region ../../src/core/components/Flex.tsx
+const Flex$1 = forwardRef((props, ref) => {
+	const { fill, center, centerX, centerY, col, ...rest } = props;
+	if (fill) rest.flex ??= 1;
+	if (col) rest.direction ??= "column";
+	if (center) {
+		rest.align ??= "center";
+		rest.justify ??= "center";
+	}
+	if (centerX) rest.justify ??= "center";
+	if (centerY) rest.align ??= "center";
+	return /* @__PURE__ */ jsx(Flex, {
+		ref,
+		...rest
+	});
+});
+Flex$1.displayName = "Flex";
+
+//#endregion
+//#region ../../src/core/components/layout/AppBar.tsx
+const AppBar = (props) => {
+	const { items = [] } = props;
+	const router = useRouter();
+	const renderItem = (item, index) => {
+		if (item.can && !item.can()) return null;
+		if ("type" in item) {
+			if (item.type === "burger") return /* @__PURE__ */ jsx(BurgerButton, {}, index);
+			if (item.type === "dark") return /* @__PURE__ */ jsx(DarkModeButton, { ...item.props }, index);
+			if (item.type === "search") return /* @__PURE__ */ jsx(OmnibarButton, { ...item.props }, index);
+			if (item.type === "lang") return /* @__PURE__ */ jsx(LanguageButton, { ...item.props }, index);
+			if (item.type === "spacer") return /* @__PURE__ */ jsx(Flex$1, { w: 16 }, index);
+			if (item.type === "divider") return /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }, index);
+			if (item.type === "logo") return renderLogo(item, index);
+			if (item.type === "back") return renderBack(item, index);
+		}
+		if ("element" in item) return item.element;
+		return null;
+	};
+	const renderLogo = (item, index) => {
+		const { src, text, icon, href, height = 32, width, fontWeight = 700, fontSize = "lg" } = item.props ?? {};
+		const logoContent = src ? /* @__PURE__ */ jsx(Image, {
+			src,
+			h: height,
+			w: width,
+			fit: "contain"
+		}) : icon ? typeof icon === "function" ? /* @__PURE__ */ jsx(icon, {}) : icon : text ? /* @__PURE__ */ jsx(Text$1, {
+			fw: fontWeight,
+			size: fontSize,
+			children: text
+		}) : null;
+		if (href) return /* @__PURE__ */ jsx(Anchor, {
+			component: Link,
+			href,
+			underline: "never",
+			c: "inherit",
+			children: logoContent
+		}, index);
+		return /* @__PURE__ */ jsx(Flex$1, { children: logoContent }, index);
+	};
+	const renderBack = (item, index) => {
+		const { label = "Back", iconOnly = true, href, icon } = item.props ?? {};
+		const renderIcon = () => {
+			if (!icon) return /* @__PURE__ */ jsx(IconArrowLeft, { size: 18 });
+			if (typeof icon === "function") return /* @__PURE__ */ jsx(icon, { size: 18 });
+			return icon;
+		};
+		const iconElement = renderIcon();
+		const handleClick = () => {
+			if (href) router.push(href);
+			else router.back();
+		};
+		if (iconOnly) return /* @__PURE__ */ jsx(ActionButton, {
+			icon: iconElement,
+			variant: "subtle",
+			color: "gray",
+			onClick: handleClick,
+			tooltip: {
+				label,
+				position: "bottom"
+			}
+		}, index);
+		return /* @__PURE__ */ jsx(ActionButton, {
+			leftSection: iconElement,
+			variant: "subtle",
+			color: "gray",
+			onClick: handleClick,
+			children: label
+		}, index);
+	};
+	const leftItems = items.filter((item) => item.position === "left");
+	const centerItems = items.filter((item) => item.position === "center");
+	const rightItems = items.filter((item) => item.position === "right");
+	const content = /* @__PURE__ */ jsxs(Flex$1, {
+		h: "100%",
+		align: "center",
+		px: props.container ? 0 : "md",
+		justify: "space-between",
+		...props.flexProps,
+		children: [
+			/* @__PURE__ */ jsx(Flex$1, {
+				flex: 1,
+				children: leftItems.map((item, index) => /* @__PURE__ */ jsx(Flex$1, {
+					ml: index === 0 ? 0 : "md",
+					align: "center",
+					children: renderItem(item, index)
+				}, index))
+			}),
+			/* @__PURE__ */ jsx(Flex$1, { children: centerItems.map((item, index) => /* @__PURE__ */ jsx(Flex$1, {
+				mx: "md",
+				align: "center",
+				children: renderItem(item, index)
+			}, index)) }),
+			/* @__PURE__ */ jsx(Flex$1, {
+				flex: 1,
+				align: "center",
+				justify: "end",
+				children: rightItems.map((item, index) => /* @__PURE__ */ jsx(Flex$1, {
+					ml: index === 0 ? 0 : "md",
+					align: "center",
+					children: renderItem(item, index)
+				}, index))
+			})
+		]
+	});
+	if (props.container) return /* @__PURE__ */ jsx(Container, {
+		h: "100%",
+		...typeof props.container === "boolean" ? {} : props.container,
+		children: content
+	});
+	return content;
+};
+
+//#endregion
+//#region ../../src/core/components/layout/Breadcrumb.tsx
+/**
+* Automatic breadcrumb component that reads the current route hierarchy
+* from the Alepha router's layer stack.
+*
+* Pages should define a `label` in their `$page()` options for best results.
+* Falls back to the page name converted to Title Case.
+*/
+const Breadcrumb = ({ home = "Home", separator, size = "sm", ...groupProps }) => {
+	const state = useRouterState();
+	const router = useRouter();
+	const crumbs = [];
+	if (home !== false) crumbs.push({
+		label: home,
+		href: "/"
+	});
+	for (let i = 1; i < state.layers.length; i++) {
+		const layer = state.layers[i];
+		const route = layer.route;
+		if (route?.path === "/" || route?.path === "") continue;
+		const label = route?.label ?? toTitleCase(layer.name);
+		const href = router.path(layer.name);
+		crumbs.push({
+			label,
+			href
+		});
+	}
+	if (crumbs.length === 0) return null;
+	const sep = separator ?? /* @__PURE__ */ jsx(IconChevronRight, {
+		size: 12,
+		color: "#9ca3af"
+	});
+	return /* @__PURE__ */ jsx(Flex$1, {
+		gap: "sm",
+		...groupProps,
+		children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs(Flex$1, {
+			align: "center",
+			gap: "sm",
+			children: [i > 0 && sep, i < crumbs.length - 1 ? /* @__PURE__ */ jsx(ActionButton, {
+				anchor: true,
+				href: crumb.href,
+				size,
+				c: "dimmed",
+				children: crumb.label
+			}) : /* @__PURE__ */ jsx(Text$1, {
+				size,
+				fw: 500,
+				children: crumb.label
+			})]
+		}, crumb.href))
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/layout/Container.tsx
+const Container$1 = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(Container, {
+		ref,
+		...props
+	});
+});
+Container$1.displayName = "Container";
+
+//#endregion
+//#region ../../src/core/components/layout/Sidebar.tsx
+const Sidebar = (props) => {
+	const router = useRouter();
+	const { onItemClick } = props;
+	const divider = (key, fill, collapsed) => {
+		return /* @__PURE__ */ jsx(Flex$1, {
+			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$1, { h: 16 }, key);
+			}
+			if (item.type === "divider") return divider(key, item.fill, collapsed);
+			if (item.type === "search") return /* @__PURE__ */ jsx(Flex$1, {
+				mb: "xs",
+				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__ */ jsxs(Fragment$1, { children: [divider(`${key}-d`, void 0, collapsed), item.children?.map((child, index) => renderNode(child, `s${key}-${index}`, collapsed))] }, key);
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Flex$1, {
+					mt: "md",
+					align: "center",
+					gap: "xs",
+					children: [renderIcon(item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Text$1, {
+						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,
+			theme: props.theme ?? {}
+		}, key);
+		return /* @__PURE__ */ jsx(SidebarItem, {
+			item,
+			level: 0,
+			onItemClick,
+			theme: props.theme ?? {}
+		}, key);
+	};
+	const getSidebarNodes = () => {
+		if (props.items) return props.items;
+		if (props.autoPopulateMenu) {
+			const items = router.concretePages.filter((page) => !page.can || page.can()).map((page) => ({
+				label: page.label ?? page.name,
+				icon: renderIcon(page.icon),
+				href: router.path(page.name)
+			}));
+			if (typeof props.autoPopulateMenu === "object" && props.autoPopulateMenu.startsWith) {
+				const startsWith = props.autoPopulateMenu.startsWith;
+				return items.filter((item) => item.href?.startsWith(startsWith));
+			}
+			return items;
+		}
+		return [];
+	};
+	const padding = "md";
+	const gap = props.items ? props.gap ?? 4 : "xs";
+	const menu = useMemo(() => getSidebarNodes(), [props.items, props.autoPopulateMenu]);
+	const renderSidebar = (collapsed) => /* @__PURE__ */ jsxs(Flex$1, {
+		flex: 1,
+		py: padding,
+		direction: "column",
+		...props.flexProps,
+		children: [
+			/* @__PURE__ */ jsx(Flex$1, {
+				gap,
+				px: padding,
+				direction: "column",
+				children: menu.filter((it) => it.position === "top").map((item, index) => renderNode(item, index, collapsed))
+			}),
+			/* @__PURE__ */ jsx(Flex$1, {
+				gap,
+				px: padding,
+				direction: "column",
+				flex: 1,
+				children: menu.filter((it) => !it.position).map((item, index) => renderNode(item, index, collapsed))
+			}),
+			/* @__PURE__ */ jsx(Flex$1, {
+				gap,
+				px: padding,
+				direction: "column",
+				children: menu.filter((it) => it.position === "bottom").map((item, index) => renderNode(item, index, collapsed))
+			})
+		]
+	});
+	if (props.collapsed) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex$1, {
+		flex: 1,
+		direction: "column",
+		visibleFrom: "md",
+		children: renderSidebar(true)
+	}), /* @__PURE__ */ jsx(Flex$1, {
+		flex: 1,
+		direction: "column",
+		hiddenFrom: "md",
+		children: renderSidebar(false)
+	})] });
+	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$1, {
+		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",
+				fw: "bold"
+			},
+			radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
+			onClick: handleItemClick,
+			leftSection: /* @__PURE__ */ jsxs(Flex$1, {
+				w: "100%",
+				align: "center",
+				gap: "sm",
+				children: [renderIcon(item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Flex$1, {
+					direction: "column",
+					children: /* @__PURE__ */ jsx(Flex$1, { children: item.label })
+				})]
+			}),
+			rightSection: item.children ? /* @__PURE__ */ jsx(Flex$1, { children: isOpen ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }) }) : props.item.rightSection,
+			...props.item.actionProps
+		}), item.children && isOpen && /* @__PURE__ */ jsxs(Flex$1, {
+			direction: "column",
+			"data-parent-level": level,
+			children: [/* @__PURE__ */ jsx(Flex$1, { 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",
+		items: 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(ActionButton, {
+		size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
+		variant: "subtle",
+		variantActive: "default",
+		tooltip: hasChildren ? void 0 : {
+			label: item.label,
+			position: "right"
+		},
+		radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
+		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) => {
+	const router = useRouter();
+	const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
+	const collapsed = props.sidebarProps?.collapsed !== void 0 ? props.sidebarProps.collapsed : sidebar.collapsed;
+	const { collapsedWidth, expandedWidth } = sidebar;
+	const shouldShowSidebar = () => {
+		if (props.noSidebarWhen?.paths) {
+			for (const path of props.noSidebarWhen.paths) if (router.isActive(path, { startWith: true })) return false;
+		}
+		return true;
+	};
+	const [showSidebar, setShowSidebar] = useState(shouldShowSidebar());
+	useEvents({
+		"react:transition:end": () => {
+			setShowSidebar(shouldShowSidebar());
+		},
+		"react:transition:begin": () => {
+			setSidebar({
+				...sidebar,
+				closed: true
+			});
+		}
+	}, [sidebar]);
+	const defaultAppBarItems = [{
+		position: "left",
+		type: "burger"
+	}];
+	const appBarProps = { ...props.appBarProps };
+	appBarProps.container ??= props.container;
+	const hasSidebar = showSidebar && props.sidebarProps !== void 0;
+	const hasAppBar = props.appBarProps || props.header;
+	let footerElement = props.footer;
+	if (props.footerHeight) footerElement ??= /* @__PURE__ */ jsx(Flex$1, { h: props.footerHeight });
+	const hHeight = props.headerHeight ?? 60;
+	const fHeight = props.footerHeight ?? 24;
+	const headerHeight = hasAppBar ? hHeight : 0;
+	const footerHeight = footerElement ? fHeight : 0;
+	return /* @__PURE__ */ jsxs(AppShell, {
+		layout: "alt",
+		w: "100%",
+		flex: 1,
+		header: hasAppBar ? { height: hHeight } : void 0,
+		navbar: hasSidebar ? {
+			width: { base: collapsed ? collapsedWidth : expandedWidth },
+			breakpoint: "md",
+			collapsed: { mobile: sidebar.closed }
+		} : void 0,
+		footer: footerElement ? { height: fHeight } : void 0,
+		...props.appShellProps,
+		children: [
+			hasAppBar && /* @__PURE__ */ jsx(AppShell.Header, {
+				...props.appShellHeaderProps,
+				children: props.header ?? /* @__PURE__ */ jsx(AppBar, {
+					items: defaultAppBarItems,
+					...appBarProps
+				})
+			}),
+			hasSidebar && /* @__PURE__ */ jsxs(AppShell.Navbar, {
+				className: "alepha-sidebar-navbar",
+				...props.appShellNavbarProps,
+				children: [
+					props.navbarHeader ? /* @__PURE__ */ jsx(Flex$1, {
+						style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
+						h: headerHeight,
+						children: props.navbarHeader
+					}) : null,
+					/* @__PURE__ */ jsx(Sidebar, {
+						...props.sidebarProps ?? {},
+						collapsed
+					}),
+					props.navbarFooter ? /* @__PURE__ */ jsx(Flex$1, {
+						style: { borderTop: "1px solid var(--mantine-color-default-border)" },
+						h: footerHeight,
+						children: props.navbarFooter
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx(AppShell.Main, {
+				pos: "relative",
+				...props.appShellMainProps,
+				children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
+			}),
+			footerElement && /* @__PURE__ */ jsx(AppShell.Footer, {
+				...props.appShellFooterProps,
+				children: footerElement
+			})
+		]
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/Text.tsx
+const INTENT_COLORS = {
+	primary: "blue",
+	info: "cyan",
+	success: "green",
+	warning: "yellow",
+	danger: "red"
+};
+const Text$1 = 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 ??= "sm";
+	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, {
+		ref,
+		...rest
+	});
+});
+Text$1.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 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({
+		type: props.input.schema && "type" in props.input.schema ? String(props.input.schema.type) : void 0,
+		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 });
+	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 inputProps = {
+		label,
+		description,
+		error,
+		required,
+		disabled
+	};
+	if ("minLength" in schema && typeof schema.minLength === "number") inputProps.minLength = schema.minLength;
+	if ("maxLength" in schema && typeof schema.maxLength === "number") inputProps.maxLength = schema.maxLength;
+	if ("minimum" in schema && typeof schema.minimum === "number") inputProps.minimum = schema.minimum;
+	if ("maximum" in schema && typeof schema.maximum === "number") inputProps.maximum = schema.maximum;
+	return {
+		id,
+		icon,
+		format,
+		schema: props.input.schema,
+		inputProps
+	};
+};
+
+//#endregion
+//#region ../../src/core/form/components/ControlArray.tsx
+/**
+* Custom hook to sync array items with form state.
+* Uses form events as the source of truth, eliminating dual-state issues.
+*/
+const useArrayItems = (input) => {
+	const alepha = useAlepha();
+	const keyCounter = useRef(0);
+	const [items, setItemsState] = useState(() => {
+		const defaultValue = input?.props?.defaultValue;
+		if (Array.isArray(defaultValue)) return defaultValue.map((value) => ({
+			key: keyCounter.current++,
+			value
+		}));
+		return [];
+	});
+	const syncFromFormValue = useCallback((formValue) => {
+		if (!Array.isArray(formValue)) {
+			setItemsState([]);
+			return;
+		}
+		setItemsState((prevItems) => {
+			if (prevItems.length === formValue.length) {
+				if (prevItems.every((item, i) => item.value === formValue[i])) return prevItems;
+			}
+			keyCounter.current = 0;
+			return formValue.map((value) => ({
+				key: keyCounter.current++,
+				value
+			}));
+		});
+	}, []);
+	useEffect(() => {
+		if (!input?.form) return;
+		const formId = input.form.id;
+		const fieldPath = input.path;
+		const listeners = [alepha.events.on("form:reset", (event) => {
+			if (event.id === formId) {
+				const defaultValue = input.props?.defaultValue;
+				keyCounter.current = 0;
+				if (Array.isArray(defaultValue)) setItemsState(defaultValue.map((value) => ({
+					key: keyCounter.current++,
+					value
+				})));
+				else setItemsState([]);
+			}
+		}), alepha.events.on("form:change", (event) => {
+			if (event.id === formId && event.path === fieldPath) syncFromFormValue(event.value);
+		})];
+		return () => {
+			for (const unsub of listeners) unsub();
+		};
+	}, [
+		alepha,
+		input,
+		syncFromFormValue
+	]);
+	return {
+		items,
+		setItems: useCallback((newItems) => {
+			setItemsState(newItems);
+			input?.set(newItems.map((item) => item.value));
+		}, [input]),
+		nextKey: useCallback(() => keyCounter.current++, [])
+	};
+};
+/**
+* Creates a proper InputField for an array item that integrates with the form system.
+* Uses array index for test IDs to ensure predictable, testable element identifiers.
+*/
+const createArrayItemInput = (parentInput, itemSchema, index, _itemKey, value, onValueChange) => {
+	return {
+		schema: itemSchema,
+		path: `${parentInput.path}/${index}`,
+		required: false,
+		form: parentInput.form,
+		props: {
+			id: `${parentInput.props.id}-${index}`,
+			name: `${parentInput.props.name}[${index}]`,
+			defaultValue: value
+		},
+		set: onValueChange
+	};
+};
+/**
+* Creates a proper InputField for a nested object field within an array item.
+* Uses array index for test IDs to ensure predictable, testable element identifiers.
+*/
+const createArrayItemFieldInput = (parentInput, itemSchema, fieldName, index, _itemKey, itemValue, onFieldChange) => {
+	return {
+		schema: itemSchema.properties[fieldName],
+		path: `${parentInput.path}/${index}/${fieldName}`,
+		required: itemSchema.required?.includes(fieldName) ?? false,
+		form: parentInput.form,
+		props: {
+			id: `${parentInput.props.id}-${index}-${fieldName}`,
+			name: `${parentInput.props.name}[${index}].${fieldName}`,
+			defaultValue: itemValue?.[fieldName]
+		},
+		set: (value) => onFieldChange(fieldName, value)
+	};
+};
+/**
+* ControlArray component for editing arrays of schema items.
+*
+* Features:
+* - Dynamic add/remove of items
+* - Supports arrays of objects with nested fields
+* - Supports arrays of primitives
+* - Grid layout for object items
+* - Min/max constraints
+* - Syncs with form state (handles external updates and resets)
+*
+* @example
+* ```tsx
+* // For a schema like:
+* // t.object({
+* //   contacts: t.array(t.object({
+* //     name: t.text(),
+* //     email: t.text({ format: "email" }),
+* //   }))
+* // })
+*
+* <ControlArray
+*   input={form.input.contacts}
+*   columns={2}
+*   addLabel="Add contact"
+*   controlProps={{
+*     email: { text: { placeholder: "email@example.com" } }
+*   }}
+* />
+* ```
+*/
+const ControlArray = (props) => {
+	const { inputProps } = parseInput(props, {});
+	const { items, setItems, nextKey } = useArrayItems(props.input);
+	if (!props.input?.props) return null;
+	const schema = props.input.schema;
+	if (!schema || !("items" in schema)) return null;
+	const itemSchema = schema.items;
+	const isObjectItem = itemSchema && "properties" in itemSchema;
+	const { min = 0, max = Number.POSITIVE_INFINITY, columns = 1 } = props;
+	const handleAdd = () => {
+		if (items.length >= max) return;
+		let newValue;
+		if (isObjectItem) {
+			newValue = {};
+			const objSchema = itemSchema;
+			for (const [key, propSchema] of Object.entries(objSchema.properties)) if ("default" in propSchema) newValue[key] = propSchema.default;
+		} else newValue = "";
+		setItems([...items, {
+			key: nextKey(),
+			value: newValue
+		}]);
+	};
+	const handleRemove = (index) => {
+		if (items.length <= min) return;
+		setItems(items.filter((_, i) => i !== index));
+	};
+	const handleItemChange = (index, value) => {
+		const newItems = [...items];
+		newItems[index] = {
+			...newItems[index],
+			value
+		};
+		setItems(newItems);
+	};
+	const handleFieldChange = (index, field, value) => {
+		const newItems = [...items];
+		newItems[index] = {
+			...newItems[index],
+			value: {
+				...newItems[index].value,
+				[field]: value
+			}
+		};
+		setItems(newItems);
+	};
+	const colSpan = 12 / columns;
+	const objectItemSchema = isObjectItem ? itemSchema : null;
+	const fieldNames = objectItemSchema ? Object.keys(objectItemSchema.properties) : [];
+	const renderItems = () => /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		gap: "sm",
+		children: [items.map((item, index) => /* @__PURE__ */ jsxs(Flex, {
+			gap: "sm",
+			align: "flex-start",
+			p: "xs",
+			bg: ui.colors.surface,
+			style: { borderRadius: "var(--mantine-radius-sm)" },
+			children: [
+				props.sortable && /* @__PURE__ */ jsx(ActionIcon, {
+					variant: "subtle",
+					color: "gray",
+					style: { cursor: "grab" },
+					children: /* @__PURE__ */ jsx(IconGripVertical, { size: 16 })
+				}),
+				objectItemSchema ? /* @__PURE__ */ jsx(Grid, {
+					style: { flex: 1 },
+					gutter: "sm",
+					children: fieldNames.map((fieldName) => {
+						const fieldControlProps = props.controlProps?.[fieldName] ?? {};
+						const fieldInput = createArrayItemFieldInput(props.input, objectItemSchema, fieldName, index, item.key, item.value, (field, value) => handleFieldChange(index, field, value));
+						return /* @__PURE__ */ jsx(Grid.Col, {
+							span: colSpan,
+							children: /* @__PURE__ */ jsx(Control, {
+								input: fieldInput,
+								...fieldControlProps
+							})
+						}, fieldName);
+					})
+				}) : /* @__PURE__ */ jsx(Flex, {
+					style: { flex: 1 },
+					children: /* @__PURE__ */ jsx(Control, {
+						input: createArrayItemInput(props.input, itemSchema, index, item.key, item.value, (value) => handleItemChange(index, value)),
+						...props.itemControlProps
+					})
+				}),
+				/* @__PURE__ */ jsx(ActionIcon, {
+					variant: "subtle",
+					color: "red",
+					onClick: () => handleRemove(index),
+					disabled: items.length <= min,
+					children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+				})
+			]
+		}, item.key)), /* @__PURE__ */ jsxs(UnstyledButton, {
+			onClick: handleAdd,
+			disabled: items.length >= max,
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				gap: 6,
+				padding: "8px 12px",
+				borderRadius: "var(--mantine-radius-sm)",
+				border: "1px dashed var(--mantine-color-dimmed)",
+				color: "var(--mantine-color-dimmed)",
+				fontSize: "var(--mantine-font-size-sm)",
+				cursor: items.length >= max ? "not-allowed" : "pointer",
+				opacity: items.length >= max ? .5 : 1,
+				transition: "all 150ms ease"
+			},
+			onMouseEnter: (e) => {
+				if (items.length < max) {
+					e.currentTarget.style.borderColor = "var(--mantine-color-blue-filled)";
+					e.currentTarget.style.color = "var(--mantine-color-blue-filled)";
+					e.currentTarget.style.background = "var(--mantine-color-blue-light)";
+				}
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.borderColor = "var(--mantine-color-dimmed)";
+				e.currentTarget.style.color = "var(--mantine-color-dimmed)";
+				e.currentTarget.style.background = "transparent";
+			},
+			children: [/* @__PURE__ */ jsx(IconPlus, { size: 14 }), props.addLabel ?? "Add"]
+		})]
+	});
+	if (props.variant === "plain") return /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		gap: "xs",
+		children: [
+			inputProps.label && /* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				fw: 500,
+				children: inputProps.label
+			}),
+			inputProps.description && /* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				c: "dimmed",
+				children: inputProps.description
+			}),
+			renderItems(),
+			inputProps.error && /* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				c: "red",
+				children: inputProps.error
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Fieldset, {
+		legend: inputProps.label,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			gap: "xs",
+			children: [
+				inputProps.description && /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					c: "dimmed",
+					children: inputProps.description
+				}),
+				renderItems(),
+				inputProps.error && /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					c: "red",
+					children: inputProps.error
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+//#region ../../src/core/form/components/ControlDate.tsx
+/**
+* ControlDate component for handling date, datetime, and time inputs.
+*
+* Features:
+* - DateInput for date format
+* - DateTimePicker for date-time format
+* - TimeInput for time format
+*
+* Automatically detects date formats from schema and renders appropriate picker.
+*/
+const ControlDate = (props) => {
+	const { inputProps, id, icon, format } = parseInput(props, useFormState(props.input));
+	if (!props.input?.props) return null;
+	if (props.datetime || format === "date-time") {
+		const dateTimePickerProps = typeof props.datetime === "object" ? props.datetime : {};
+		return /* @__PURE__ */ jsx(DateTimePicker, {
+			...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);
+			},
+			...dateTimePickerProps
+		});
+	}
+	if (props.date || format === "date") {
+		const dateInputProps = typeof props.date === "object" ? props.date : {};
+		return /* @__PURE__ */ jsx(DateInput, {
+			...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);
+			},
+			...dateInputProps
+		});
+	}
+	if (props.time || format === "time") {
+		const timeInputProps = typeof props.time === "object" ? props.time : {};
+		return /* @__PURE__ */ jsx(TimeInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			defaultValue: props.input.props.defaultValue,
+			onChange: (event) => {
+				props.input.set(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]);
+	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;
+		return /* @__PURE__ */ jsx(Input.Wrapper, {
+			...inputProps,
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					height: 32,
+					padding: 8
+				},
+				children: /* @__PURE__ */ jsx(Slider, {
+					...inputProps,
+					ref,
+					id,
+					...inputPropsWithoutType,
+					...props.sliderProps,
+					value,
+					min,
+					max,
+					label: () => value,
+					onChange: (val) => {
+						setValue(val);
+						props.input.set(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);
+		}
+	});
+};
+
+//#endregion
+//#region ../../src/core/form/components/ControlObject.tsx
+/**
+* ControlObject component for editing nested object schemas.
+*
+* Features:
+* - Renders all properties of an object schema
+* - Supports grid layout with configurable columns
+* - Per-field customization via controlProps
+* - Recursive support for deeply nested objects
+*
+* The form system provides nested InputFields under the `.items` property.
+* For example: form.input.address.items.street
+*
+* @example
+* ```tsx
+* // For a schema like:
+* // t.object({
+* //   address: t.object({
+* //     street: t.text(),
+* //     city: t.text(),
+* //     zip: t.text(),
+* //   })
+* // })
+*
+* <ControlObject
+*   input={form.input.address}
+*   columns={2}
+*   controlProps={{
+*     zip: { text: { maxLength: 10 } }
+*   }}
+* />
+* ```
+*/
+const ControlObject = (props) => {
+	const { inputProps } = parseInput(props, {});
+	if (!props.input?.props) return null;
+	const schema = props.input.schema;
+	if (!schema?.properties) return null;
+	const fieldNames = Object.keys(schema.properties);
+	const colSpan = 12 / (props.columns ?? 1);
+	const nestedItems = props.input.items;
+	const renderFields = () => /* @__PURE__ */ jsx(Grid, { children: fieldNames.map((fieldName) => {
+		const fieldControlProps = props.controlProps?.[fieldName] ?? {};
+		const field = nestedItems?.[fieldName];
+		if (!field) return null;
+		return /* @__PURE__ */ jsx(Grid.Col, {
+			span: colSpan,
+			children: /* @__PURE__ */ jsx(Control, {
+				input: field,
+				...fieldControlProps
+			})
+		}, fieldName);
+	}) });
+	if (props.variant === "plain") return renderFields();
+	return /* @__PURE__ */ jsx(Fieldset, {
+		legend: inputProps.label,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			gap: "xs",
+			children: [
+				inputProps.description && /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					c: "dimmed",
+					children: inputProps.description
+				}),
+				renderFields(),
+				inputProps.error && /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					c: "red",
+					children: inputProps.error
+				})
+			]
+		})
+	});
+};
+
+//#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 }) {
+	return /* @__PURE__ */ jsxs(Flex, {
+		gap: "md",
+		align: "flex-start",
+		wrap: "nowrap",
+		bg: ui.colors.surface,
+		p: "sm",
+		bdrs: "sm",
+		children: [
+			/* @__PURE__ */ jsxs(Flex, {
+				direction: "column",
+				gap: "md",
+				style: { flex: 1 },
+				children: [
+					/* @__PURE__ */ jsxs(Flex, {
+						direction: "column",
+						gap: "xs",
+						children: [/* @__PURE__ */ jsx(Text, {
+							size: "sm",
+							fw: 600,
+							children: "Operators"
+						}), /* @__PURE__ */ jsx(Flex, {
+							direction: "column",
+							gap: 4,
+							children: Object.entries(OPERATOR_INFO).map(([key, info]) => /* @__PURE__ */ jsxs(Flex, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: [/* @__PURE__ */ jsx(ActionButton, {
+									px: "xs",
+									size: "xs",
+									h: 24,
+									variant: "default",
+									justify: "center",
+									miw: 48,
+									onClick: () => onInsert(info.symbol),
+									children: info.symbol
+								}), /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									style: { flex: 1 },
+									children: info.label
+								})]
+							}, key))
+						})]
+					}),
+					/* @__PURE__ */ jsx(Divider, {}),
+					/* @__PURE__ */ jsxs(Flex, {
+						direction: "column",
+						gap: "xs",
+						children: [/* @__PURE__ */ jsx(Text, {
+							size: "sm",
+							fw: 600,
+							children: "Logic"
+						}), /* @__PURE__ */ jsxs(Flex, {
+							direction: "column",
+							gap: 4,
+							children: [/* @__PURE__ */ jsxs(Flex, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: [/* @__PURE__ */ jsx(ActionButton, {
+									px: "xs",
+									size: "xs",
+									h: 24,
+									variant: "default",
+									justify: "center",
+									miw: 48,
+									onClick: () => onInsert("&"),
+									children: "&"
+								}), /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									children: "AND"
+								})]
+							}), /* @__PURE__ */ jsxs(Flex, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: [/* @__PURE__ */ jsx(ActionButton, {
+									px: "xs",
+									size: "xs",
+									h: 24,
+									variant: "default",
+									justify: "center",
+									miw: 48,
+									onClick: () => onInsert("|"),
+									children: "|"
+								}), /* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									children: "OR"
+								})]
+							})]
+						})]
+					})
+				]
+			}),
+			fields.length > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }),
+			fields.length > 0 && /* @__PURE__ */ jsxs(Flex, {
+				direction: "column",
+				gap: "xs",
+				style: { flex: 2 },
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					fw: 600,
+					children: "Fields"
+				}), /* @__PURE__ */ jsx(Flex, {
+					direction: "column",
+					gap: 4,
+					style: {
+						maxHeight: 300,
+						overflowY: "auto"
+					},
+					children: fields.map((field) => /* @__PURE__ */ jsxs(Flex, {
+						gap: "xs",
+						wrap: "nowrap",
+						align: "flex-start",
+						children: [
+							/* @__PURE__ */ jsx(ActionButton, {
+								px: "xs",
+								size: "xs",
+								h: 24,
+								variant: "default",
+								justify: "end",
+								miw: 120,
+								onClick: () => onInsert(field.path),
+								children: field.path
+							}),
+							/* @__PURE__ */ jsxs(Flex, {
+								mt: 3,
+								direction: "column",
+								gap: 2,
+								style: {
+									flex: 1,
+									minWidth: 0
+								},
+								children: [/* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									lineClamp: 1,
+									children: field.description || field.type
+								}), field.enum && /* @__PURE__ */ jsx(Flex, {
+									gap: 0,
+									wrap: "wrap",
+									children: field.enum.map((enumValue) => /* @__PURE__ */ jsx(ActionButton, {
+										px: "xs",
+										size: "xs",
+										h: 24,
+										onClick: () => onInsert(enumValue),
+										children: enumValue
+									}, enumValue))
+								})]
+							}),
+							/* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								variant: "light",
+								style: { flexShrink: 0 },
+								children: field.type
+							})
+						]
+					}, field.path))
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region ../../src/core/form/components/ControlSelect.tsx
+/**
+* ControlSelect component for handling Select, MultiSelect, 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
+*
+* Automatically detects enum values and array types from schema.
+*/
+const ControlSelect = (props) => {
+	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
+	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 enumValues = props.input.schema && "enum" in props.input.schema && Array.isArray(props.input.schema.enum) ? props.input.schema.enum : [];
+	const [data, setData] = useState([]);
+	useEffect(() => {
+		if (!props.input?.props) return;
+		if (props.loader) props.loader().then(setData);
+		else setData(enumValues);
+	}, [props.input, props.loader]);
+	if (!props.input?.props) return null;
+	if (props.segmented) {
+		const segmentedControlProps = typeof props.segmented === "object" ? props.segmented : {};
+		return /* @__PURE__ */ jsx(Input.Wrapper, {
+			...inputProps,
+			children: /* @__PURE__ */ jsx(Flex, { 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)
+			}) })
+		});
+	}
+	if (props.autocomplete) {
+		const autocompleteProps = typeof props.autocomplete === "object" ? props.autocomplete : {};
+		return /* @__PURE__ */ jsx(Autocomplete, {
+			...inputProps,
+			size: props.size,
+			id,
+			leftSection: icon,
+			data,
+			...props.input.props,
+			...autocompleteProps
+		});
+	}
+	if (isArray && !itemsEnum || props.tags) {
+		const tagsInputProps = typeof props.tags === "object" ? props.tags : {};
+		return /* @__PURE__ */ jsx(TagsInput, {
+			...inputProps,
+			size: props.size,
+			id,
+			leftSection: icon,
+			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
+			onChange: (value) => {
+				props.input.set(value);
+			},
+			...tagsInputProps
+		});
+	}
+	if (isArray && itemsEnum || props.multi) {
+		const data = itemsEnum?.map((value) => ({
+			value,
+			label: value
+		})) || [];
+		const multiSelectProps = typeof props.multi === "object" ? props.multi : {};
+		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);
+			},
+			...multiSelectProps
+		});
+	}
+	const selectProps = typeof props.select === "object" ? props.select : {};
+	return /* @__PURE__ */ jsx(Select, {
+		...inputProps,
+		size: props.size,
+		id,
+		leftSection: icon,
+		rightSection: null,
+		data,
+		...props.input.props,
+		...selectProps
+	});
+};
+
+//#endregion
+//#region ../../src/core/form/components/Control.tsx
+/**
+* Generic form control that renders the appropriate input based on the schema and props.
+*
+* Supports:
+* - TextInput (with format detection: email, url, tel)
+* - Textarea
+* - NumberInput (for number/integer types)
+* - FileInput
+* - ColorInput (for color format)
+* - Select (for enum types)
+* - Autocomplete
+* - PasswordInput
+* - Switch (for boolean types)
+* - SegmentedControl (for enum types)
+* - DateInput (for date format)
+* - DateTimePicker (for date-time format)
+* - TimeInput (for time format)
+* - QueryBuilder (for building type-safe queries with autocomplete)
+* - ControlObject (for nested object schemas)
+* - ControlArray (for arrays of objects)
+* - Custom component
+*
+* Automatically handles labels, descriptions, error messages, required state, and default icons.
+*/
+const Control = (_props) => {
+	const form = useFormState(_props.input, ["error"]);
+	if (!_props.input?.props) return null;
+	const { inputProps, id, icon, format, schema } = parseInput(_props, form);
+	const props = {
+		..._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);
+		}
+	});
+	if (props.custom) {
+		const Custom = props.custom;
+		return /* @__PURE__ */ jsx(Input.Wrapper, {
+			...inputProps,
+			children: /* @__PURE__ */ jsx(Flex, {
+				flex: 1,
+				mt: "calc(var(--mantine-spacing-xs) / 2)",
+				children: /* @__PURE__ */ jsx(Custom, {
+					defaultValue: props.input.props.defaultValue,
+					onChange: (value) => {
+						props.input.set(value);
+					}
+				})
+			})
+		});
+	}
+	const isObject = props.input.schema && "type" in props.input.schema && props.input.schema.type === "object" && "properties" in props.input.schema;
+	if (props.object || isObject) {
+		const controlObjectProps = typeof props.object === "object" ? props.object : {};
+		return /* @__PURE__ */ jsx(ControlObject, {
+			input: props.input,
+			title: props.title,
+			description: props.description,
+			...controlObjectProps
+		});
+	}
+	const isArray = props.input.schema && "type" in props.input.schema && props.input.schema.type === "array";
+	const isArrayOfObjects = isArray && "items" in props.input.schema && props.input.schema.items && typeof props.input.schema.items === "object" && "properties" in props.input.schema.items;
+	if (props.array || isArrayOfObjects) {
+		const controlArrayProps = typeof props.array === "object" ? props.array : {};
+		return /* @__PURE__ */ jsx(ControlArray, {
+			input: props.input,
+			title: props.title,
+			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")) {
+		const controlNumberProps = typeof props.number === "object" ? props.number : {};
+		if (props.slider) controlNumberProps.sliderProps ??= {};
+		return /* @__PURE__ */ jsx(ControlNumber, {
+			size: props.size,
+			input: props.input,
+			title: props.title,
+			description: props.description,
+			icon,
+			...controlNumberProps
+		});
+	}
+	if (props.file) {
+		const fileInputProps = typeof props.file === "object" ? props.file : {};
+		return /* @__PURE__ */ jsx(FileInput, {
+			...inputProps,
+			size: props.size,
+			id,
+			leftSection: icon,
+			onChange: (file) => {
+				props.input.set(file);
+			},
+			...fileInputProps
+		});
+	}
+	if (props.color || format === "color") {
+		const colorInputProps = typeof props.color === "object" ? props.color : {};
+		return /* @__PURE__ */ jsx(ColorInput, {
+			...inputProps,
+			size: props.size,
+			id,
+			leftSection: icon,
+			...props.input.props,
+			...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 ??= {};
+		return /* @__PURE__ */ jsx(ControlSelect, {
+			size: props.size,
+			input: props.input,
+			title: props.title,
+			description: props.description,
+			icon,
+			...opts
+		});
+	}
+	if (props.input.schema && "type" in props.input.schema && props.input.schema.type === "boolean") {
+		if (props.switch) {
+			const switchProps = typeof props.switch === "object" ? props.switch : {};
+			return /* @__PURE__ */ jsx(Switch, {
+				...inputProps,
+				size: props.size,
+				id,
+				color: "blue",
+				defaultChecked: props.input.props.defaultValue,
+				onChange: (event) => {
+					props.input.set(event.currentTarget.checked);
+				},
+				...switchProps
+			});
+		}
+		const opts = {
+			input: props.input,
+			select: { data: [{
+				value: "true",
+				label: "Yes"
+			}, {
+				value: "false",
+				label: "No"
+			}] }
+		};
+		return /* @__PURE__ */ jsx(ControlSelect, {
+			size: props.size,
+			title: props.title,
+			description: props.description,
+			icon,
+			...opts
+		});
+	}
+	if (props.password || props.input.props.name?.includes("password")) {
+		const passwordInputProps = typeof props.password === "object" ? props.password : {};
+		return /* @__PURE__ */ jsx(PasswordInput, {
+			...inputProps,
+			size: props.size,
+			id,
+			leftSection: icon,
+			...props.input.props,
+			...passwordInputProps
+		});
+	}
+	if (props.area) {
+		const textAreaProps = typeof props.area === "object" ? props.area : {};
+		return /* @__PURE__ */ jsx(Textarea, {
+			...inputProps,
+			size: props.size,
+			id,
+			leftSection: icon,
+			...props.input.props,
+			...textAreaProps
+		});
+	}
+	if (props.date || props.datetime || props.time || format === "date" || format === "date-time" || format === "time") return /* @__PURE__ */ jsx(ControlDate, {
+		size: props.size,
+		input: props.input,
+		title: props.title,
+		description: props.description,
+		icon,
+		date: props.date,
+		datetime: props.datetime,
+		time: props.time
+	});
+	const textInputProps = typeof props.text === "object" ? props.text : {};
+	const getInputType = () => {
+		switch (format) {
+			case "email": return "email";
+			case "url":
+			case "uri": return "url";
+			case "tel":
+			case "phone": return "tel";
+			default: return;
+		}
+	};
+	return /* @__PURE__ */ jsx(TextInput, {
+		...inputProps,
+		size: props.size,
+		id,
+		leftSection: icon,
+		type: getInputType(),
+		...props.input.props,
+		...textInputProps,
+		inputWrapperOrder: [
+			"label",
+			"input",
+			"description",
+			"error"
+		]
+	});
+};
+
+//#endregion
+//#region ../../src/core/form/components/TypeForm.tsx
+/**
+* TypeForm component that automatically renders all form inputs based on schema.
+* Uses the Control component to render individual fields and Mantine Grid for responsive layout.
+*
+* Supports all field types including:
+* - Primitive types (string, number, boolean, etc.)
+* - Enum types (rendered as Select)
+* - Arrays of primitives (rendered as MultiSelect/TagsInput)
+* - Arrays of objects (rendered as ControlArray)
+* - Nested objects (rendered as ControlObject)
+*
+* @example
+* ```tsx
+* import { t } from "alepha";
+* import { useForm } from "alepha/react/form";
+* import { TypeForm } from "@alepha/ui";
+*
+* const form = useForm({
+*   schema: t.object({
+*     username: t.text(),
+*     email: t.text(),
+*     age: t.integer(),
+*     subscribe: t.boolean(),
+*     address: t.object({
+*       street: t.text(),
+*       city: t.text(),
+*     }),
+*     tags: t.array(t.text()),
+*     contacts: t.array(t.object({
+*       name: t.text(),
+*       email: t.text(),
+*     })),
+*   }),
+*   handler: (values) => {
+*     console.log(values);
+*   },
+* });
+*
+* return <TypeForm form={form} columns={2} />;
+* ```
+*/
+const TypeForm = (props) => {
+	const { form, columns = 3, children, controlProps, fieldControlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps, fill = true, size } = props;
+	const schema = props.schema || form.options.schema;
+	if (!schema?.properties) return null;
+	const supportedFields = Object.keys(schema.properties);
+	const colSpan = typeof columns === "number" ? {
+		xs: 12,
+		sm: 6,
+		lg: 12 / columns
+	} : {
+		base: columns.base ? 12 / columns.base : void 0,
+		xs: columns.xs ? 12 / columns.xs : 12,
+		sm: columns.sm ? 12 / columns.sm : 6,
+		md: columns.md ? 12 / columns.md : void 0,
+		lg: columns.lg ? 12 / columns.lg : 4,
+		xl: columns.xl ? 12 / columns.xl : void 0
+	};
+	const renderFields = () => {
+		if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(form.input) });
+		return /* @__PURE__ */ jsx(Grid, { children: supportedFields.map((fieldName) => {
+			const field = form.input[fieldName];
+			const fieldSchema = schema.properties[fieldName];
+			if (!field || !fieldSchema) return null;
+			const isObject = fieldSchema && "type" in fieldSchema && fieldSchema.type === "object";
+			const isArrayOfObjects = fieldSchema && "type" in fieldSchema && fieldSchema.type === "array" && "items" in fieldSchema && fieldSchema.items && "properties" in fieldSchema.items;
+			const span = isObject || isArrayOfObjects ? 12 : colSpan;
+			const mergedControlProps = {
+				...controlProps,
+				...fieldControlProps?.[fieldName]
+			};
+			if (size) mergedControlProps.size = size;
+			return /* @__PURE__ */ jsx(Grid.Col, {
+				span,
+				children: /* @__PURE__ */ jsx(Control, {
+					input: field,
+					...mergedControlProps
+				})
+			}, fieldName);
+		}) });
+	};
+	const content = /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		gap: "sm",
+		flex: fill ? 1 : void 0,
+		...props.flexProps,
+		children: [/* @__PURE__ */ jsx(Flex, {
+			direction: "column",
+			gap: "sm",
+			flex: 1,
+			children: renderFields()
+		}), !skipSubmitButton && /* @__PURE__ */ jsx(Card, {
+			w: "100%",
+			withBorder: true,
+			children: /* @__PURE__ */ jsxs(Flex, {
+				gap: "sm",
+				flex: 1,
+				children: [
+					/* @__PURE__ */ jsx(Flex, {}),
+					/* @__PURE__ */ jsx(Flex, { flex: 1 }),
+					/* @__PURE__ */ jsxs(Flex, {
+						gap: "sm",
+						children: [/* @__PURE__ */ jsx(ActionButton, {
+							variant: "subtle",
+							type: "reset",
+							children: "Reset"
+						}), /* @__PURE__ */ jsx(ActionButton, {
+							intent: "primary",
+							form,
+							...submitButtonProps,
+							children: submitButtonProps?.children ?? "Submit"
+						})]
+					})
+				]
+			})
+		})]
+	});
+	if (skipFormElement) return content;
+	return /* @__PURE__ */ jsx(Flex, {
+		component: "form",
+		flex: fill ? 1 : void 0,
+		...form.props,
+		...props.flexProps,
+		children: content
+	});
+};
+
+//#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;
+};
+
+//#endregion
+//#region ../../src/core/hooks/useDialog.ts
+/**
+* Use this hook to access the Dialog Service for showing various dialog types.
+*
+* @example
+* ```tsx
+* const dialog = useDialog();
+* await dialog.alert({ title: "Alert", message: "This is an alert message" });
+* const confirmed = await dialog.confirm({ title: "Confirm", message: "Are you sure?" });
+* const input = await dialog.prompt({ title: "Input", message: "Enter your name:" });
+* ```
+*/
+const useDialog = () => {
+	return useInject(DialogService);
+};
+
+//#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 visibleSchema = useMemo(() => {
+		const visibleKeys = Object.keys(schema.properties).filter((key) => filterVisibility[key] !== false);
+		if (visibleKeys.length === 0) return null;
+		const visibleProps = visibleKeys.reduce((acc, key) => {
+			acc[key] = schema.properties[key];
+			return acc;
+		}, {});
+		return t.object(visibleProps);
+	}, [schema, filterVisibility]);
+	if (!visibleSchema) return null;
+	return /* @__PURE__ */ jsx(Flex, {
+		w: "100%",
+		p: "xs",
+		bg: ui.colors.surface,
+		style: { borderBottom: "1px solid var(--alepha-border)" },
+		children: /* @__PURE__ */ jsx(TypeForm, {
+			size: "xs",
+			...typeFormProps,
+			skipSubmitButton: true,
+			fill: true,
+			form,
+			schema: visibleSchema,
+			columns: {
+				base: 1,
+				sm: 2,
+				md: 3,
+				lg: 4,
+				xl: 6
+			}
+		})
+	});
+};
+
+//#endregion
+//#region ../../src/core/table/components/DataTablePagination.tsx
+const DataTablePagination = ({ page, size, totalPages, onPageChange, onSizeChange }) => {
+	return /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		justify: "end",
+		gap: "md",
+		p: "xs",
+		style: { borderTop: "1px solid var(--alepha-border)" },
+		children: [/* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Select, {
+			w: 96,
+			variant: "default",
+			value: size,
+			onChange: (value) => {
+				if (value) onSizeChange(Number(value));
+			},
+			data: [
+				{
+					value: "5",
+					label: "5"
+				},
+				{
+					value: "10",
+					label: "10"
+				},
+				{
+					value: "25",
+					label: "25"
+				},
+				{
+					value: "50",
+					label: "50"
+				},
+				{
+					value: "100",
+					label: "100"
+				}
+			]
+		}) }), /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Pagination, {
+			withEdges: true,
+			total: totalPages,
+			value: page,
+			onChange: onPageChange
+		}) })]
+	});
+};
+
+//#endregion
+//#region ../../src/core/table/components/ColumnPicker.tsx
+const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
+	const [opened, setOpened] = useState(false);
+	const columnEntries = Object.entries(columns);
+	const handleShowAll = () => {
+		onVisibilityChange(columnEntries.reduce((acc, [key]) => ({
+			...acc,
+			[key]: true
+		}), {}));
+	};
+	const handleDefault = () => {
+		let count = 0;
+		onVisibilityChange(columnEntries.reduce((acc, [key, col]) => {
+			if (col.defaultHidden) acc[key] = false;
+			else if (count < DEFAULT_MAX_VISIBLE_COLUMNS) {
+				acc[key] = true;
+				count++;
+			} else acc[key] = false;
+			return acc;
+		}, {}));
+	};
+	const handleToggle = (key, checked) => {
+		onVisibilityChange({
+			...visibility,
+			[key]: checked
+		});
+	};
+	const visibleCount = columnEntries.filter(([key]) => visibility[key] !== false).length;
+	return /* @__PURE__ */ jsxs(Popover, {
+		width: 280,
+		position: "bottom-start",
+		shadow: "md",
+		opened,
+		onChange: setOpened,
+		closeOnClickOutside: true,
+		closeOnEscape: true,
+		transitionProps: {
+			transition: "fade-up",
+			duration: 200,
+			timingFunction: "ease"
+		},
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ActionButton, {
+			variant: "subtle",
+			icon: IconColumns,
+			onClick: () => setOpened((o) => !o)
+		}) }) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+			bg: "transparent",
+			p: "xs",
+			bd: `1px solid ${ui.colors.border}`,
+			style: { backdropFilter: "blur(20px)" },
+			children: /* @__PURE__ */ jsxs(Flex, {
+				direction: "column",
+				gap: "xs",
+				bg: ui.colors.surface,
+				p: "sm",
+				bdrs: "sm",
+				children: [/* @__PURE__ */ jsxs(Flex, {
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsxs(Text, {
+						size: "sm",
+						fw: 500,
+						children: [
+							"Columns (",
+							visibleCount,
+							"/",
+							columnEntries.length,
+							")"
+						]
+					}), /* @__PURE__ */ jsxs(Flex, {
+						gap: 4,
+						children: [/* @__PURE__ */ jsx(ActionButton, {
+							size: "compact-xs",
+							variant: "subtle",
+							onClick: handleShowAll,
+							children: "All"
+						}), /* @__PURE__ */ jsx(ActionButton, {
+							size: "compact-xs",
+							variant: "subtle",
+							onClick: handleDefault,
+							children: "Default"
+						})]
+					})]
+				}), /* @__PURE__ */ jsx(ScrollArea.Autosize, {
+					mah: 300,
+					children: /* @__PURE__ */ jsx(Flex, {
+						direction: "column",
+						gap: 4,
+						children: columnEntries.map(([key, col]) => /* @__PURE__ */ jsx(Checkbox, {
+							label: col.label || key,
+							checked: visibility[key] !== false,
+							onChange: (e) => handleToggle(key, e.currentTarget.checked),
+							size: "sm"
+						}, key))
+					})
+				})]
+			})
+		})]
+	});
+};
+
+//#endregion
+//#region ../../src/core/table/components/FilterPicker.tsx
+const getFieldLabel = (schema, key) => {
+	const prop = schema.properties[key];
+	if (prop && typeof prop === "object" && "title" in prop && prop.title) return prop.title;
+	return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+};
+const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
+	const [opened, setOpened] = useState(false);
+	const filterKeys = Object.keys(schema.properties);
+	const handleShowAll = () => {
+		onVisibilityChange(filterKeys.reduce((acc, key) => ({
+			...acc,
+			[key]: true
+		}), {}));
+	};
+	const handleHideAll = () => {
+		onVisibilityChange(filterKeys.reduce((acc, key) => ({
+			...acc,
+			[key]: false
+		}), {}));
+	};
+	const handleToggle = (key, checked) => {
+		onVisibilityChange({
+			...visibility,
+			[key]: checked
+		});
+	};
+	const visibleCount = filterKeys.filter((key) => visibility[key]).length;
+	return /* @__PURE__ */ jsxs(Popover, {
+		width: 280,
+		position: "bottom-start",
+		shadow: "md",
+		opened,
+		onChange: setOpened,
+		closeOnClickOutside: true,
+		closeOnEscape: true,
+		transitionProps: {
+			transition: "fade-up",
+			duration: 200,
+			timingFunction: "ease"
+		},
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ActionButton, {
+			variant: "subtle",
+			icon: IconFilter,
+			onClick: () => setOpened((o) => !o)
+		}) }) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+			bg: "transparent",
+			p: "xs",
+			bd: `1px solid ${ui.colors.border}`,
+			style: { backdropFilter: "blur(20px)" },
+			children: /* @__PURE__ */ jsxs(Flex, {
+				direction: "column",
+				gap: "xs",
+				bg: ui.colors.surface,
+				p: "sm",
+				bdrs: "sm",
+				children: [/* @__PURE__ */ jsxs(Flex, {
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsxs(Text, {
+						size: "sm",
+						fw: 500,
+						children: [
+							"Filters (",
+							visibleCount,
+							"/",
+							filterKeys.length,
+							")"
+						]
+					}), /* @__PURE__ */ jsxs(Flex, {
+						gap: 4,
+						children: [/* @__PURE__ */ jsx(ActionButton, {
+							size: "compact-xs",
+							variant: "subtle",
+							onClick: handleShowAll,
+							children: "All"
+						}), /* @__PURE__ */ jsx(ActionButton, {
+							size: "compact-xs",
+							variant: "subtle",
+							onClick: handleHideAll,
+							children: "None"
+						})]
+					})]
+				}), /* @__PURE__ */ jsx(ScrollArea.Autosize, {
+					mah: 300,
+					children: /* @__PURE__ */ jsx(Flex, {
+						direction: "column",
+						gap: 4,
+						children: filterKeys.map((key) => /* @__PURE__ */ jsx(Checkbox, {
+							label: getFieldLabel(schema, key),
+							checked: visibility[key] === true,
+							onChange: (e) => handleToggle(key, e.currentTarget.checked),
+							size: "sm"
+						}, key))
+					})
+				})]
+			})
+		})]
+	});
+};
+
+//#endregion
+//#region ../../src/core/table/components/DataTableToolbar.tsx
+const escapeCsvField = (value) => {
+	if (value.includes(",") || value.includes("\"") || value.includes("\n")) return `"${value.replace(/"/g, "\"\"")}"`;
+	return value;
+};
+const extractText = (node) => {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(extractText).join("");
+	if (typeof node === "object" && "props" in node) return extractText(node.props.children);
+	return "";
+};
+const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility, onColumnVisibilityChange, onFilterVisibilityChange, actions, onRefresh, items, withExport, selectedItems = [], checkboxActions, onClearSelection }) => {
+	const hasSelection = selectedItems.length > 0;
+	const exportableColumns = useCallback(() => {
+		return Object.entries(columns).filter(([key, col]) => !col.actions && columnVisibility[key] !== false);
+	}, [columns, columnVisibility]);
+	const buildRows = useCallback(() => {
+		const cols = exportableColumns();
+		return items.map((item) => cols.map(([_key, col]) => {
+			if (!col.value) return "";
+			return extractText(col.value(item, {}));
+		}));
+	}, [items, exportableColumns]);
+	const buildCsv = useCallback(() => {
+		const header = exportableColumns().map(([_key, col]) => escapeCsvField(col.label));
+		const rows = buildRows().map((row) => row.map(escapeCsvField));
+		return [header.join(","), ...rows.map((r) => r.join(","))].join("\n");
+	}, [exportableColumns, buildRows]);
+	const exportCsv = useCallback(() => {
+		const csv = buildCsv();
+		const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = "export.csv";
+		a.click();
+		URL.revokeObjectURL(url);
+	}, [buildCsv]);
+	const exportClipboard = useCallback(async () => {
+		const header = exportableColumns().map(([_key, col]) => col.label);
+		const rows = buildRows();
+		const text = [header.join("	"), ...rows.map((r) => r.join("	"))].join("\n");
+		await navigator.clipboard.writeText(text);
+	}, [exportableColumns, buildRows]);
+	const handleCheckboxAction = async (action) => {
+		const ctx = {
+			selectedItems,
+			clearSelection: onClearSelection || (() => {})
+		};
+		await action.onClick(ctx);
+	};
+	return /* @__PURE__ */ jsxs(Flex, {
+		p: "xs",
+		style: { borderBottom: "1px solid var(--alepha-border)" },
+		children: [
+			/* @__PURE__ */ jsxs(Flex, {
+				gap: 4,
+				align: "center",
+				children: [
+					filters && /* @__PURE__ */ jsx(FilterPicker, {
+						schema: filters,
+						visibility: filterVisibility,
+						onVisibilityChange: onFilterVisibilityChange
+					}),
+					/* @__PURE__ */ jsx(ColumnPicker, {
+						columns,
+						visibility: columnVisibility,
+						onVisibilityChange: onColumnVisibilityChange
+					}),
+					withExport && /* @__PURE__ */ jsx(ActionButton, {
+						variant: "subtle",
+						icon: IconDownload,
+						menu: { items: [{
+							label: "Export as CSV",
+							icon: /* @__PURE__ */ jsx(IconDownload, { size: 14 }),
+							onClick: exportCsv
+						}, {
+							label: "Copy to clipboard",
+							icon: /* @__PURE__ */ jsx(IconClipboard, { size: 14 }),
+							onClick: exportClipboard
+						}] }
+					}),
+					hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(Divider, {
+							orientation: "vertical",
+							mx: "xs"
+						}),
+						/* @__PURE__ */ jsxs(Badge, {
+							variant: "light",
+							size: "lg",
+							children: [selectedItems.length, " selected"]
+						}),
+						/* @__PURE__ */ jsx(ActionButton, {
+							variant: "subtle",
+							size: "compact-sm",
+							icon: IconX,
+							onClick: onClearSelection,
+							children: "Clear"
+						}),
+						checkboxActions?.map((action, index) => /* @__PURE__ */ jsx(ActionButton, {
+							variant: "light",
+							size: "compact-sm",
+							intent: action.intent,
+							icon: action.icon && isComponentType(action.icon) ? action.icon : void 0,
+							onClick: () => handleCheckboxAction(action),
+							children: action.label
+						}, index))
+					] })
+				]
+			}),
+			/* @__PURE__ */ jsx(Flex, { flex: 1 }),
+			/* @__PURE__ */ jsxs(Flex, {
+				gap: "xs",
+				children: [actions?.map((props, index) => !isValidElement(props) ? /* @__PURE__ */ jsx(ActionButton, {
+					...props,
+					children: props.label
+				}, index) : props), /* @__PURE__ */ jsx(ActionButton, {
+					variant: "subtle",
+					icon: IconRefresh,
+					onClick: onRefresh
+				})]
+			})
+		]
+	});
+};
+
+//#endregion
+//#region ../../src/core/table/components/useTableSelection.ts
+const useTableSelection = (items, getItemKey, enabled) => {
+	const [selectedKeys, setSelectedKeys] = useState(/* @__PURE__ */ new Set());
+	const selectedItems = useMemo(() => {
+		if (!enabled) return [];
+		return items.filter((item) => selectedKeys.has(getItemKey(item)));
+	}, [
+		items,
+		selectedKeys,
+		getItemKey,
+		enabled
+	]);
+	const allSelected = useMemo(() => {
+		if (items.length === 0) return false;
+		return items.every((item) => selectedKeys.has(getItemKey(item)));
+	}, [
+		items,
+		selectedKeys,
+		getItemKey
+	]);
+	return {
+		selectedItems,
+		allSelected,
+		someSelected: useMemo(() => {
+			if (items.length === 0) return false;
+			const count = items.filter((item) => selectedKeys.has(getItemKey(item))).length;
+			return count > 0 && count < items.length;
+		}, [
+			items,
+			selectedKeys,
+			getItemKey
+		]),
+		toggleItem: useCallback((item) => {
+			const key = getItemKey(item);
+			setSelectedKeys((prev) => {
+				const next = new Set(prev);
+				if (next.has(key)) next.delete(key);
+				else next.add(key);
+				return next;
+			});
+		}, [getItemKey]),
+		toggleAll: useCallback(() => {
+			if (allSelected) setSelectedKeys((prev) => {
+				const next = new Set(prev);
+				for (const item of items) next.delete(getItemKey(item));
+				return next;
+			});
+			else setSelectedKeys((prev) => {
+				const next = new Set(prev);
+				for (const item of items) next.add(getItemKey(item));
+				return next;
+			});
+		}, [
+			allSelected,
+			items,
+			getItemKey
+		]),
+		clear: useCallback(() => setSelectedKeys(/* @__PURE__ */ new Set()), []),
+		isSelected: useCallback((item) => selectedKeys.has(getItemKey(item)), [selectedKeys, getItemKey])
+	};
+};
+
+//#endregion
+//#region ../../src/core/table/components/DataTable.tsx
+/**
+* Parse the sort string to get direction for a specific field.
+* Alepha convention: 'field' = ASC, '-field' = DESC
+*/
+const getSortDirection = (sortString, field) => {
+	if (!sortString) return null;
+	const parts = sortString.split(",").map((s) => s.trim());
+	for (const part of parts) {
+		if (part === field) return "asc";
+		if (part === `-${field}`) return "desc";
+	}
+	return null;
+};
+/**
+* Toggle sort for a field in the sort string.
+* Cycles: null -> asc -> desc -> null
+*/
+const toggleSort = (sortString, field) => {
+	const current = getSortDirection(sortString, field);
+	const parts = (sortString || "").split(",").map((s) => s.trim()).filter((s) => s && s !== field && s !== `-${field}`);
+	if (current === null) parts.unshift(field);
+	else if (current === "asc") parts.unshift(`-${field}`);
+	return parts.length > 0 ? parts.join(",") : void 0;
+};
+const toAriaSort = (dir) => {
+	if (dir === "asc") return "ascending";
+	if (dir === "desc") return "descending";
+	return "none";
+};
+const FIT_STYLE = {
+	width: 1,
+	whiteSpace: "nowrap"
+};
+const DataTable = (props) => {
+	const [items, setItems] = useState(typeof props.items === "function" ? { content: [] } : props.items);
+	const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
+	const [page, setPage] = useState(1);
+	const [size, setSize] = useState(String(defaultSize));
+	const [currentPage, setCurrentPage] = useState(0);
+	const alepha = useInject(Alepha);
+	const sentinelRef = 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) {
+				acc[key] = true;
+				visibleCount++;
+			} else acc[key] = false;
+			return acc;
+		}, {});
+	});
+	const [filterVisibility, setFilterVisibility] = useState(() => {
+		if (!props.filters?.properties) return {};
+		const defaults = new Set(props.defaultFilters ?? []);
+		return Object.keys(props.filters.properties).reduce((acc, key) => ({
+			...acc,
+			[key]: defaults.has(key)
+		}), {});
+	});
+	const visibleColumns = useMemo(() => {
+		return Object.entries(props.columns).filter(([key]) => columnVisibility[key] !== false);
+	}, [props.columns, columnVisibility]);
+	const [sortString, setSortString] = useState(void 0);
+	const handleSortClick = (columnKey, sortKey) => {
+		const newSort = toggleSort(sortString, sortKey || columnKey);
+		setSortString(newSort);
+		form.input.sort.set(newSort);
+		form.input.page.set(0);
+	};
+	const getItemKey = useCallback((item) => {
+		if (props.getItemKey) return props.getItemKey(item);
+		if ("id" in item) return String(item.id);
+		return JSON.stringify(item);
+	}, [props.getItemKey]);
+	const selection = useTableSelection(items.content, getItemKey, props.withCheckbox ?? false);
+	const panelConfig = useMemo(() => {
+		if (!props.panel) return null;
+		if (typeof props.panel === "function") return {
+			render: props.panel,
+			can: void 0
+		};
+		return props.panel;
+	}, [props.panel]);
+	const [drawerItem, setDrawerItem] = useState(null);
+	const drawerConfig = useMemo(() => {
+		if (!props.drawer) return null;
+		if (typeof props.drawer === "function") return {
+			render: props.drawer,
+			can: void 0,
+			props: void 0
+		};
+		return props.drawer;
+	}, [props.drawer]);
+	const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
+	const toggleExpand = useCallback((key) => {
+		setExpandedKeys((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	}, []);
+	const form = useForm({
+		schema: t.object({
+			...props.filters ? props.filters.properties : {},
+			page: t.number({ default: 0 }),
+			size: t.number({ default: defaultSize }),
+			sort: t.optional(t.string())
+		}),
+		handler: async (values) => {
+			if (typeof props.items === "function") {
+				const response = await props.items(values, { items: items.content });
+				if (props.infinityScroll && values.page > 0) setItems((prev) => ({
+					...response,
+					content: [...prev.content, ...response.content]
+				}));
+				else setItems(response);
+				setCurrentPage(values.page);
+			}
+		},
+		onReset: async () => {
+			setPage(1);
+			setSize(String(defaultSize));
+			await form.submit();
+		},
+		onChange: async (key, value) => {
+			if (key === "page") {
+				setPage(value + 1);
+				await form.submit();
+				return;
+			}
+			if (key === "size") {
+				setSize(String(value));
+				form.input.page.set(0);
+				return;
+			}
+			props.onFilterChange?.(key, value, form);
+		}
+	}, [items]);
+	const dt = useInject(DateTimeProvider);
+	useEffect(() => {
+		if (props.submitOnInit) form.submit();
+		if (props.submitEvery) {
+			const it = dt.createInterval(() => {
+				form.submit();
+			}, props.submitEvery);
+			return () => dt.clearInterval(it);
+		}
+	}, []);
+	useEffect(() => {
+		if (typeof props.items !== "function") setItems(props.items);
+	}, [props.items]);
+	useEffect(() => {
+		if (!props.infinityScroll || typeof props.items !== "function") return;
+		const sentinel = sentinelRef.current;
+		if (!sentinel) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (!entries[0].isIntersecting || form.submitting) return;
+			const totalPages = items.page?.totalPages ?? 1;
+			if (currentPage + 1 < totalPages) form.input.page.set(currentPage + 1);
+		}, { rootMargin: "300px" });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		props.infinityScroll,
+		form.submitting,
+		items.page?.totalPages,
+		currentPage,
+		form
+	]);
+	const totalColumns = visibleColumns.length + (panelConfig ? 1 : 0) + (props.withCheckbox ? 1 : 0);
+	const checkboxHeader = props.withCheckbox ? /* @__PURE__ */ jsx(Table.Th, {
+		style: { width: 40 },
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			checked: selection.allSelected,
+			indeterminate: selection.someSelected,
+			onChange: selection.toggleAll,
+			"aria-label": "Select all"
+		})
+	}) : null;
+	const head = visibleColumns.map(([key, col]) => {
+		const sortField = col.sortKey || key;
+		const sortDir = col.sortable ? getSortDirection(sortString, sortField) : null;
+		return /* @__PURE__ */ jsx(Table.Th, {
+			onClick: col.sortable ? () => handleSortClick(key, col.sortKey) : void 0,
+			"aria-sort": col.sortable ? toAriaSort(sortDir) : void 0,
+			style: {
+				...col.fit ? FIT_STYLE : {},
+				...col.sortable ? {
+					cursor: "pointer",
+					userSelect: "none"
+				} : {}
+			},
+			children: /* @__PURE__ */ jsxs(Flex, {
+				align: "center",
+				gap: 4,
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "xs",
+					children: col.label
+				}), 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 })
+					]
+				})]
+			})
+		}, key);
+	});
+	const rows = items.content.flatMap((item, index) => {
+		const trProps = props.tableTrProps ? props.tableTrProps(item) : {};
+		const itemKey = getItemKey(item);
+		const isSelected = selection.isSelected(item);
+		const showPanel = panelConfig && (panelConfig.can ? panelConfig.can(item) : true);
+		const isExpanded = expandedKeys.has(itemKey);
+		const canOpenDrawer = drawerConfig && (drawerConfig.can ? drawerConfig.can(item) : true);
+		const elements = [/* @__PURE__ */ jsxs(Table.Tr, {
+			...trProps,
+			style: {
+				...canOpenDrawer ? { cursor: "pointer" } : {},
+				...trProps.style ?? {}
+			},
+			onClick: (e) => {
+				if (canOpenDrawer) setDrawerItem(item);
+				trProps.onClick?.(e);
+			},
+			children: [
+				panelConfig && /* @__PURE__ */ jsx(Table.Td, {
+					style: {
+						width: 36,
+						textAlign: "center"
+					},
+					py: 2,
+					px: 0,
+					children: showPanel && /* @__PURE__ */ jsx(UnstyledButton, {
+						onClick: (e) => {
+							e.stopPropagation();
+							toggleExpand(itemKey);
+						},
+						style: { display: "inline-flex" },
+						children: /* @__PURE__ */ jsx(Flex, {
+							c: "dimmed",
+							align: "center",
+							justify: "center",
+							children: isExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: ui.sizes.icon.sm }) : /* @__PURE__ */ jsx(IconChevronRight, { size: ui.sizes.icon.sm })
+						})
+					})
+				}),
+				props.withCheckbox && /* @__PURE__ */ jsx(Table.Td, {
+					style: { width: 40 },
+					onClick: (e) => e.stopPropagation(),
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: isSelected,
+						onChange: () => selection.toggleItem(item),
+						"aria-label": "Select row"
+					})
+				}),
+				visibleColumns.map(([key, col]) => {
+					const ctx = {
+						index,
+						form,
+						alepha
+					};
+					if (col.actions) {
+						const rowActions = col.actions(item, ctx).filter((a) => a.visible !== false);
+						return /* @__PURE__ */ jsx(Table.Td, {
+							py: 2,
+							px: 4,
+							style: col.fit ? FIT_STYLE : void 0,
+							onClick: (e) => e.stopPropagation(),
+							children: /* @__PURE__ */ jsx(Flex, {
+								gap: 4,
+								children: rowActions.map(({ visible: _, ...actionProps }, i) => /* @__PURE__ */ jsx(ActionButton, {
+									variant: "subtle",
+									size: "xs",
+									preventDefault: true,
+									h: 20,
+									...actionProps
+								}, i))
+							})
+						}, key);
+					}
+					return /* @__PURE__ */ jsx(Table.Td, {
+						py: 2,
+						px: 4,
+						style: col.fit ? FIT_STYLE : void 0,
+						children: col.value?.(item, ctx)
+					}, key);
+				})
+			]
+		}, itemKey)];
+		if (panelConfig && showPanel && isExpanded) elements.push(/* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+			colSpan: totalColumns,
+			p: 0,
+			children: panelConfig.render(item)
+		}) }, `${itemKey}-panel`));
+		return elements;
+	});
+	const filterSchema = useMemo(() => {
+		if (!props.filters) return null;
+		return t.omit(form.options.schema, [
+			"page",
+			"size",
+			"sort"
+		]);
+	}, [props.filters, form.options.schema]);
+	return /* @__PURE__ */ jsxs(Flex, {
+		flex: 1,
+		p: 0,
+		bdrs: "sm",
+		direction: "column",
+		children: [
+			/* @__PURE__ */ jsx(DataTableToolbar, {
+				columns: props.columns,
+				filters: props.filters,
+				columnVisibility,
+				filterVisibility,
+				onColumnVisibilityChange: setColumnVisibility,
+				onFilterVisibilityChange: setFilterVisibility,
+				actions: props.actions,
+				onRefresh: () => form.submit(),
+				items: items.content,
+				withExport: props.withExport,
+				selectedItems: selection.selectedItems,
+				checkboxActions: props.checkboxActions,
+				onClearSelection: selection.clear
+			}),
+			filterSchema && props.filters && /* @__PURE__ */ jsx(DataTableFilters, {
+				schema: filterSchema,
+				form,
+				typeFormProps: props.typeFormProps,
+				filterVisibility
+			}),
+			/* @__PURE__ */ jsx(Flex, {
+				className: "overflow-auto",
+				children: /* @__PURE__ */ jsxs(Table, {
+					"aria-label": "Data table",
+					withColumnBorders: true,
+					withRowBorders: true,
+					...props.tableProps,
+					children: [/* @__PURE__ */ jsx(Table.Thead, {
+						style: {
+							position: "sticky",
+							top: 0,
+							zIndex: 1,
+							backgroundColor: "var(--mantine-color-body)"
+						},
+						children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+							panelConfig && /* @__PURE__ */ jsx(Table.Th, { style: { width: 36 } }),
+							checkboxHeader,
+							head
+						] })
+					}), /* @__PURE__ */ jsxs(Table.Tbody, {
+						style: {
+							opacity: form.submitting ? .5 : 1,
+							transition: "opacity 150ms ease"
+						},
+						children: [rows, items.content.length === 0 && /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+							colSpan: totalColumns || 1,
+							py: "xl",
+							style: { textAlign: "center" },
+							children: /* @__PURE__ */ jsx(Text, {
+								c: "dimmed",
+								size: "sm",
+								children: form.submitting ? "Loading…" : "No results"
+							})
+						}) })]
+					})]
+				})
+			}),
+			props.infinityScroll && /* @__PURE__ */ jsx("div", { ref: sentinelRef }),
+			!props.infinityScroll && /* @__PURE__ */ jsx(DataTablePagination, {
+				page,
+				size,
+				totalPages: items.page?.totalPages ?? 1,
+				onPageChange: (value) => {
+					form.input.page.set(value - 1);
+				},
+				onSizeChange: (value) => {
+					form.input.size.set(value);
+				}
+			}),
+			drawerConfig && /* @__PURE__ */ jsx(Drawer, {
+				opened: drawerItem !== null,
+				onClose: () => setDrawerItem(null),
+				position: "right",
+				size: "xl",
+				...drawerConfig.props,
+				children: drawerItem && drawerConfig.render(drawerItem)
+			})
+		]
+	});
+};
+
+//#endregion
+//#region ../../src/core/utils/extractSchemaFields.ts
+/**
+* Extract field information from a TypeBox schema for query building.
+* Supports nested objects and provides field metadata for autocomplete.
+*/
+function extractSchemaFields(schema, prefix = "") {
+	const fields = [];
+	if (!schema || typeof schema !== "object") return fields;
+	const properties = "properties" in schema ? schema.properties : schema;
+	if (!properties || typeof properties !== "object") return fields;
+	for (const [key, value] of Object.entries(properties)) {
+		if (typeof value !== "object" || value === null) continue;
+		const fieldSchema = value;
+		const path = prefix ? `${prefix}.${key}` : key;
+		const format = "format" in fieldSchema ? fieldSchema.format : void 0;
+		let displayType = "type" in fieldSchema ? fieldSchema.type : "object";
+		if (format === "date-time") displayType = "datetime";
+		else if (format === "date") displayType = "date";
+		else if (format === "time") displayType = "time";
+		else if (format === "duration") displayType = "duration";
+		const field = {
+			name: key,
+			path,
+			type: displayType,
+			format,
+			description: "description" in fieldSchema ? fieldSchema.description : void 0
+		};
+		if ("enum" in fieldSchema && fieldSchema.enum) {
+			field.enum = fieldSchema.enum;
+			field.type = "enum";
+		}
+		if ("type" in fieldSchema && fieldSchema.type === "object" && "properties" in fieldSchema && typeof fieldSchema.properties === "object") field.nested = extractSchemaFields(fieldSchema.properties, path);
+		fields.push(field);
+		if (field.nested) fields.push(...field.nested);
+	}
+	return fields;
+}
+/**
+* Get operator symbol and description
+*/
+const OPERATOR_INFO = {
+	eq: {
+		symbol: "=",
+		label: "equals",
+		example: "name=John"
+	},
+	ne: {
+		symbol: "!=",
+		label: "not equals",
+		example: "status!=archived"
+	},
+	gt: {
+		symbol: ">",
+		label: "greater than",
+		example: "age>18"
+	},
+	gte: {
+		symbol: ">=",
+		label: "greater or equal",
+		example: "age>=18"
+	},
+	lt: {
+		symbol: "<",
+		label: "less than",
+		example: "age<65"
+	},
+	lte: {
+		symbol: "<=",
+		label: "less or equal",
+		example: "age<=65"
+	},
+	null: {
+		symbol: "=null",
+		label: "is null",
+		example: "deletedAt=null"
+	},
+	notNull: {
+		symbol: "!=null",
+		label: "is not null",
+		example: "email!=null"
+	},
+	in: {
+		symbol: "[...]",
+		label: "in array",
+		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];
+	if (format) switch (format) {
+		case "email": return /* @__PURE__ */ jsx(IconMail, { size: iconSize });
+		case "url":
+		case "uri": return /* @__PURE__ */ jsx(IconLink, { size: iconSize });
+		case "tel":
+		case "phone": return /* @__PURE__ */ jsx(IconPhone, { size: iconSize });
+		case "date": return /* @__PURE__ */ jsx(IconCalendar, { size: iconSize });
+		case "date-time": return /* @__PURE__ */ jsx(IconCalendar, { size: iconSize });
+		case "time": return /* @__PURE__ */ jsx(IconClock, { size: iconSize });
+		case "color": return /* @__PURE__ */ jsx(IconColorPicker, { size: iconSize });
+		case "uuid": return /* @__PURE__ */ jsx(IconKey, { size: iconSize });
+	}
+	if (name) {
+		const nameLower = name.toLowerCase();
+		if (nameLower.includes("password") || nameLower.includes("secret")) return /* @__PURE__ */ jsx(IconKey, { size: iconSize });
+		if (nameLower.includes("email") || nameLower.includes("mail")) return /* @__PURE__ */ jsx(IconMail, { size: iconSize });
+		if (nameLower.includes("url") || nameLower.includes("link")) return /* @__PURE__ */ jsx(IconLink, { size: iconSize });
+		if (nameLower.includes("phone") || nameLower.includes("tel")) return /* @__PURE__ */ jsx(IconPhone, { size: iconSize });
+		if (nameLower.includes("color")) return /* @__PURE__ */ jsx(IconPalette, { size: iconSize });
+		if (nameLower.includes("file") || nameLower.includes("upload")) return /* @__PURE__ */ jsx(IconFile, { size: iconSize });
+		if (nameLower.includes("date")) return /* @__PURE__ */ jsx(IconCalendar, { size: iconSize });
+		if (nameLower.includes("time")) return /* @__PURE__ */ jsx(IconClock, { size: iconSize });
+	}
+	if (isEnum || isArray) return /* @__PURE__ */ jsx(IconSelector, { size: iconSize });
+	if (type) switch (type) {
+		case "boolean": return /* @__PURE__ */ jsx(IconToggleLeft, { size: iconSize });
+		case "number":
+		case "integer": return /* @__PURE__ */ jsx(IconHash, { size: iconSize });
+		case "array": return /* @__PURE__ */ jsx(IconList, { size: iconSize });
+		case "string": return /* @__PURE__ */ jsx(IconLetterCase, { size: iconSize });
+	}
+	return /* @__PURE__ */ jsx(IconAt, { size: iconSize });
+};
+
+//#endregion
+//#region ../../src/core/utils/string.ts
+/**
+* Capitalizes the first letter of a string.
+*
+* @example
+* capitalize("hello") // "Hello"
+*/
+const capitalize = (str) => {
+	return str.charAt(0).toUpperCase() + str.slice(1);
+};
+/**
+* Converts camelCase or snake_case to Title Case with spaces.
+*
+* @example
+* toTitleCase("userName") // "User Name"
+* toTitleCase("first_name") // "First Name"
+* toTitleCase("email") // "Email"
+*/
+const toTitleCase = (str) => {
+	return str.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+};
+/**
+* Converts a path or identifier string into a pretty display name.
+* For paths like "/contacts/0/name", extracts just the field name "Name".
+* Handles camelCase and snake_case conversion to Title Case.
+*
+* @example
+* prettyName("/userName") // "User Name"
+* prettyName("/contacts/0/email") // "Email"
+* prettyName("/address/streetName") // "Street Name"
+* prettyName("first_name") // "First Name"
+*/
+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
+/**
+* Core UI components based on Mantine UI v8.
+*
+* **Features:**
+* - Mantine integration with theme support
+* - ActionButton, BurgerButton, ClipboardButton, DarkModeButton, LanguageButton, ThemeButton
+* - AlertDialog, ConfirmDialog, PromptDialog
+* - Form controls: Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlSelect, ControlQueryBuilder
+* - TypeForm for automatic form generation from TypeBox schemas
+* - DashboardShell layout component
+* - AppBar with configurable elements
+* - Sidebar navigation with sections and menu items
+* - Omnibar for command palette / search
+* - DataTable with filtering, sorting, pagination
+* - Toast notifications
+* - Theme system with dark mode
+*
+* @module alepha.ui
+*/
+const AlephaUI = $module({
+	name: "alepha.ui",
+	services: [
+		DialogService,
+		ToastService,
+		ThemeProvider,
+		UiRouter
+	],
+	register: (alepha) => {
+		alepha.with(AlephaReactI18n);
+		alepha.with(AlephaReactHead);
+		alepha.with(AlephaReactForm);
+		alepha.with(ThemeProvider);
+		alepha.with(DialogService);
+		alepha.with(ToastService);
+	}
+});
+
+//#endregion
+export { ActionButton as _, TypeForm as a, useToast as b, DashboardShell as c, StatCards as d, DetailList as f, ClipboardButton as g, LanguageButton as h, useDialog as i, Breadcrumb as l, ThemeButton as m, capitalize as n, Control as o, ToggleSidebarButton as p, DataTable as r, Text$1 as s, AlephaUI as t, Flex$1 as u, ui as v, AlephaMantineProvider as y };
+//# sourceMappingURL=core-2xoLiT0o.js.map