@alepha/ui 0.17.2 → 0.18.1

package/dist/auth/core-niW0sFLv.js

@@ -0,0 +1,2264 @@
+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, Autocomplete, Badge, Button, Card, ColorInput, ColorSchemeScript, Container, Divider, Fieldset, FileInput, Flex, Grid, Image, Input, Loader, MantineProvider, Menu, MultiSelect, NumberInput, PasswordInput, Popover, SegmentedControl, Select, Slider, Switch, TagsInput, Text, TextInput, Textarea, ThemeIcon, Tooltip, UnstyledButton, useMantineTheme } from "@mantine/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Notifications, notifications } from "@mantine/notifications";
+import { IconAlertTriangle, IconAt, IconCalendar, IconCheck, IconChevronRight, IconClock, IconColorPicker, IconFile, IconFilter, IconGripVertical, IconHash, IconInfoCircle, IconInfoTriangle, IconKey, IconLetterCase, IconLink, IconList, IconMail, IconPalette, IconPhone, IconPlus, IconSearch, IconSelector, IconToggleLeft, IconTrash, IconX } from "@tabler/icons-react";
+import { $page, NestedView, useActive, useRouter, useRouterState } from "alepha/react/router";
+import { NavigationProgress, nprogress } from "@mantine/nprogress";
+import { useAction, useAlepha, useEvents, useInject, useStore } from "alepha/react";
+import { Spotlight } from "@mantine/spotlight";
+import { currentUserAtom } from "alepha/security";
+import "@mantine/hooks";
+import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
+import { parseQueryString } from "alepha/orm";
+import "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/Flex.tsx
+const Flex$1 = forwardRef((props, ref) => {
+	const { fill, center, centerX, centerY, col, ...rest } = props;
+	if (fill) rest.flex ??= 1;
+	if (col) rest.direction ??= "column";
+	if (center) {
+		rest.align ??= "center";
+		rest.justify ??= "center";
+	}
+	if (centerX) rest.justify ??= "center";
+	if (centerY) rest.align ??= "center";
+	return /* @__PURE__ */ jsx(Flex, {
+		ref,
+		...rest
+	});
+});
+Flex$1.displayName = "Flex";
+
+//#endregion
+//#region ../../src/core/components/layout/Container.tsx
+const Container$1 = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(Container, {
+		ref,
+		...props
+	});
+});
+Container$1.displayName = "Container";
+
+//#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/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/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 { ui as a, ActionButton as i, capitalize as n, AlephaMantineProvider as o, Control as r, AlephaUI as t };
+//# sourceMappingURL=core-niW0sFLv.js.map