@alepha/ui 0.17.2 → 0.18.1

package/dist/demo/core-RCUw1Q-a.js

@@ -0,0 +1,4217 @@
+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, Divider, Drawer, Fieldset, FileInput, Flex, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Switch, Table, TagsInput, Text, TextInput, Textarea, ThemeIcon, Tooltip, Tree, UnstyledButton, getTreeExpandedState, useMantineColorScheme, useMantineTheme, useTree } 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/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/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/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/Heading.tsx
+const Heading = (props) => {
+	return /* @__PURE__ */ jsx("h1", { children: "Heading" });
+};
+
+//#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/json/components/JsonViewer.tsx
+const SIZE_CONFIG = {
+	xs: {
+		icon: 14,
+		levelOffset: 16
+	},
+	sm: {
+		icon: 16,
+		levelOffset: 20
+	},
+	md: {
+		icon: 18,
+		levelOffset: 24
+	},
+	lg: {
+		icon: 20,
+		levelOffset: 28
+	},
+	xl: {
+		icon: 22,
+		levelOffset: 32
+	}
+};
+const STYLES = {
+	root: { fontFamily: "var(--mantine-font-family-monospace)" },
+	chevron: {
+		flexShrink: 0,
+		color: "var(--mantine-color-dimmed)"
+	},
+	key: {
+		color: "var(--mantine-color-cyan-text)",
+		fontWeight: 500
+	},
+	colon: { color: "var(--mantine-color-dimmed)" },
+	string: { color: "var(--mantine-color-teal-text)" },
+	number: { color: "var(--mantine-color-blue-text)" },
+	boolean: { color: "var(--mantine-color-violet-text)" },
+	null: {
+		color: "var(--mantine-color-dimmed)",
+		fontStyle: "italic"
+	},
+	preview: { color: "var(--mantine-color-dimmed)" }
+};
+const getValueType = (val) => {
+	if (val === null) return "null";
+	if (val === void 0) return "undefined";
+	if (Array.isArray(val)) return "array";
+	return typeof val;
+};
+function buildTreeNodes(data, path = [], key, isArrayItem = false, maxDepth = 10) {
+	const currentPath = key !== void 0 ? [...path, key] : path;
+	const nodeId = currentPath.length > 0 ? currentPath.join(".") : "root";
+	if (currentPath.length > maxDepth) return {
+		value: nodeId,
+		label: key ?? "",
+		nodeValue: data,
+		nodeKey: key,
+		path: currentPath,
+		isArrayItem
+	};
+	const type = getValueType(data);
+	if (type === "object" || type === "array") {
+		const children = (type === "array" ? data.map((v, i) => [String(i), v]) : Object.entries(data)).map(([k, v]) => buildTreeNodes(v, currentPath, k, type === "array", maxDepth)).filter((n) => n !== null);
+		return {
+			value: nodeId,
+			label: key ?? "",
+			nodeValue: data,
+			nodeKey: key,
+			path: currentPath,
+			isArrayItem,
+			children: children.length > 0 ? children : void 0
+		};
+	}
+	return {
+		value: nodeId,
+		label: key ?? "",
+		nodeValue: data,
+		nodeKey: key,
+		path: currentPath,
+		isArrayItem
+	};
+}
+function getExpandedIds(nodes, targetDepth, currentDepth = 0) {
+	if (currentDepth >= targetDepth) return [];
+	const ids = [];
+	for (const node of nodes) if (node.children) {
+		ids.push(node.value);
+		ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));
+	}
+	return ids;
+}
+const CopyButton = ({ value, iconSize }) => {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = useCallback((e) => {
+		e.stopPropagation();
+		navigator.clipboard.writeText(value);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1500);
+	}, [value]);
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		size: iconSize + 4,
+		variant: "transparent",
+		c: copied ? "green" : "dimmed",
+		onClick: handleCopy,
+		className: "alepha-json-viewer-copy",
+		children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: iconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: iconSize })
+	});
+};
+const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, showQuotes, showCopyButton, renderValue }) => {
+	const { nodeValue, nodeKey, path, isArrayItem, isRoot } = node;
+	const type = getValueType(nodeValue);
+	const isExpandable = type === "object" || type === "array";
+	const getPreview = () => {
+		if (!isExpandable) return null;
+		const count = (type === "array" ? nodeValue : Object.keys(nodeValue)).length;
+		const label = type === "array" ? "item" : "key";
+		if (!expanded) return /* @__PURE__ */ jsx(Text, {
+			fs: "italic",
+			component: "span",
+			size,
+			style: STYLES.preview,
+			children: count === 0 ? type === "array" ? "[]" : "{}" : type === "array" ? `[ ${count} ${count === 1 ? label : `${label}s`} ]` : `{ ${count} ${count === 1 ? label : `${label}s`} }`
+		});
+		return null;
+	};
+	const getCopyValue = () => isExpandable ? JSON.stringify(nodeValue, null, 2) : String(nodeValue ?? "");
+	return /* @__PURE__ */ jsxs(Flex, {
+		gap: 6,
+		wrap: "nowrap",
+		...elementProps,
+		className: `alepha-json-viewer-row ${elementProps.className || ""}`,
+		children: [
+			hasChildren ? expanded ? /* @__PURE__ */ jsx(IconChevronDown, {
+				size: config.icon,
+				style: STYLES.chevron
+			}) : /* @__PURE__ */ jsx(IconChevronRight, {
+				size: config.icon,
+				style: STYLES.chevron
+			}) : /* @__PURE__ */ jsx("span", { style: {
+				width: config.icon,
+				flexShrink: 0
+			} }),
+			nodeKey !== void 0 && !isArrayItem && /* @__PURE__ */ jsxs(Text, {
+				component: "span",
+				size,
+				children: [/* @__PURE__ */ jsx("span", {
+					style: STYLES.key,
+					children: showQuotes ? `"${nodeKey}"` : nodeKey
+				}), /* @__PURE__ */ jsx("span", {
+					style: STYLES.colon,
+					children: ":"
+				})]
+			}),
+			nodeKey !== void 0 && isArrayItem && /* @__PURE__ */ jsxs(Text, {
+				component: "span",
+				size,
+				children: [/* @__PURE__ */ jsx("span", {
+					style: STYLES.key,
+					children: nodeKey
+				}), /* @__PURE__ */ jsx("span", {
+					style: STYLES.colon,
+					children: ":"
+				})]
+			}),
+			hasChildren ? getPreview() : isExpandable ? type === "array" ? /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				style: STYLES.preview,
+				children: "[]"
+			}) : /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				style: STYLES.preview,
+				children: "{}"
+			}) : renderValue(nodeValue, nodeKey, path),
+			showCopyButton && /* @__PURE__ */ jsx(CopyButton, {
+				value: getCopyValue(),
+				iconSize: config.icon
+			})
+		]
+	});
+};
+const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm", showQuotes = false, showCopyButton = true, formatValue }) => {
+	const config = SIZE_CONFIG[size] || SIZE_CONFIG.sm;
+	const treeData = useMemo(() => {
+		const type = getValueType(data);
+		if (type === "object" || type === "array") {
+			const children = (type === "array" ? data.map((v, i) => [String(i), v]) : Object.entries(data)).map(([k, v]) => buildTreeNodes(v, [], k, type === "array", maxDepth)).filter((n) => n !== null);
+			return [{
+				value: "root",
+				label: "",
+				nodeValue: data,
+				nodeKey: void 0,
+				path: [],
+				isArrayItem: false,
+				isRoot: true,
+				children: children.length > 0 ? children : void 0
+			}];
+		}
+		const node = buildTreeNodes(data, [], void 0, false, maxDepth);
+		return node ? [node] : [];
+	}, [data, maxDepth]);
+	const tree = useTree({ initialExpandedState: useMemo(() => {
+		if (defaultExpandedDepth === 0) return {};
+		if (defaultExpandedDepth === Infinity) return getTreeExpandedState(treeData, "*");
+		return getTreeExpandedState(treeData, getExpandedIds(treeData, defaultExpandedDepth + 1));
+	}, [treeData, defaultExpandedDepth]) });
+	const renderValue = useCallback((val, key, path) => {
+		const custom = formatValue?.(key, val, path);
+		if (custom !== void 0) return /* @__PURE__ */ jsx(Text, {
+			component: "span",
+			size,
+			style: STYLES.string,
+			className: "alepha-json-viewer-value",
+			title: String(val),
+			children: custom
+		});
+		const type = getValueType(val);
+		switch (type) {
+			case "string": return /* @__PURE__ */ jsxs(Text, {
+				style: STYLES.string,
+				component: "span",
+				size,
+				className: "alepha-json-viewer-value",
+				title: val,
+				children: [
+					"\"",
+					val,
+					"\""
+				]
+			});
+			case "number": return /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				style: STYLES.number,
+				children: val
+			});
+			case "boolean": return /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				style: STYLES.boolean,
+				children: String(val)
+			});
+			case "null":
+			case "undefined": return /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				style: STYLES.null,
+				children: type
+			});
+			default: return /* @__PURE__ */ jsx(Text, {
+				component: "span",
+				size,
+				children: String(val)
+			});
+		}
+	}, [
+		formatValue,
+		showQuotes,
+		size
+	]);
+	const renderNode = useCallback(({ node, expanded, hasChildren, elementProps }) => {
+		return /* @__PURE__ */ jsx(RowNode, {
+			node,
+			expanded,
+			hasChildren,
+			elementProps,
+			size,
+			config,
+			showQuotes,
+			showCopyButton,
+			renderValue
+		});
+	}, [
+		config,
+		renderValue,
+		showCopyButton,
+		showQuotes,
+		size
+	]);
+	if (treeData.length === 0) return /* @__PURE__ */ jsx(Text, {
+		size,
+		style: STYLES.null,
+		children: data === null ? "null" : data === void 0 ? "undefined" : "{}"
+	});
+	return /* @__PURE__ */ jsx(Tree, {
+		data: treeData,
+		tree,
+		levelOffset: config.levelOffset,
+		expandOnClick: true,
+		renderNode,
+		styles: { root: STYLES.root }
+	});
+};
+
+//#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 { AlephaMantineProvider as _, useDialog as a, Text$1 as c, Breadcrumb as d, Heading as f, ui as g, ActionButton as h, JsonViewer as i, DashboardShell as l, ToggleSidebarButton as m, capitalize as n, TypeForm as o, Flex$1 as p, DataTable as r, Control as s, AlephaUI as t, Sidebar as u, useToast as v };
+//# sourceMappingURL=core-RCUw1Q-a.js.map