@alepha/ui 0.17.2 → 0.18.1

package/dist/core/index.js

@@ -3,18 +3,17 @@ import { AlephaReactForm, FormValidationError, useForm, useFormState } from "ale
 import { $head, AlephaReactHead } from "alepha/react/head";
 import { AlephaReactI18n, useI18n } from "alepha/react/i18n";
 import { $cookie } from "alepha/server/cookies";
-import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, Collapse, ColorInput, ColorSchemeScript, Container, CopyButton, Divider, Drawer, Fieldset, FileInput, Flex, Flex as Flex$1, Grid, Image, Input, Kbd, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, UnstyledButton, useMantineColorScheme, useMantineTheme } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
-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 { Children, Fragment, createElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, ColorInput, ColorSchemeScript, Container as Container$1, CopyButton, Divider, Drawer, Fieldset, FileInput, Flex as Flex$1, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Switch, Table, Tabs, TagsInput, Text as Text$1, 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 { ui as ui$1 } from "@alepha/ui";
 import { useOs } from "@mantine/hooks";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
 import { parseQueryString } from "alepha/orm";
@@ -24,24 +23,16 @@ import { DateTimeProvider } from "alepha/datetime";
 const alephaSidebarAtom = $atom({
 	name: "alepha.ui.sidebar",
 	schema: t.object({
-		opened: t.boolean(),
+		closed: t.boolean(),
 		collapsed: t.boolean(),
-		width: t.number(),
-		defaultWidth: t.number(),
-		collapsedWidth: t.number(),
-		maxWidth: t.number(),
-		collapseThreshold: t.number(),
-		hoverDelay: t.number()
+		expandedWidth: t.number(),
+		collapsedWidth: t.number()
 	}),
 	default: {
-		opened: false,
+		closed: true,
 		collapsed: false,
-		width: 300,
-		defaultWidth: 300,
-		collapsedWidth: 78,
-		maxWidth: 500,
-		collapseThreshold: 240,
-		hoverDelay: 300
+		expandedWidth: 300,
+		collapsedWidth: 78
 	}
 });
 
@@ -220,148 +211,9 @@ var ThemeProvider = class {
 	}
 };
 
-//#endregion
-//#region ../../src/core/components/data/ErrorViewer.tsx
-const getSizeConfig = (size = "sm") => {
-	const configs = {
-		xs: {
-			text: "xs",
-			icon: 12,
-			gap: 2
-		},
-		sm: {
-			text: "sm",
-			icon: 14,
-			gap: 4
-		},
-		md: {
-			text: "md",
-			icon: 16,
-			gap: 6
-		},
-		lg: {
-			text: "lg",
-			icon: 18,
-			gap: 8
-		},
-		xl: {
-			text: "xl",
-			icon: 20,
-			gap: 10
-		}
-	};
-	return configs[size] || configs.sm;
-};
-const parseStackTrace = (stack) => {
-	return stack.split("\n").map((line) => line.trim()).filter((line) => line.length > 0);
-};
-const ErrorViewer = ({ error, showStack = true, copyable = true, size = "sm" }) => {
-	const [stackExpanded, setStackExpanded] = useState(false);
-	const sizeConfig = getSizeConfig(size);
-	const copyIconSize = sizeConfig.icon + 2;
-	const isError = error instanceof Error;
-	const errorName = isError ? error.name : "Error";
-	const errorMessage = isError ? error.message : String(error);
-	const errorStack = isError ? error.stack : void 0;
-	const stackLines = errorStack ? parseStackTrace(errorStack) : [];
-	const getCopyContent = () => {
-		if (isError) return `${errorName}: ${errorMessage}${errorStack ? `\n\n${errorStack}` : ""}`;
-		return String(error);
-	};
-	return /* @__PURE__ */ jsxs(Flex$1, {
-		pos: "relative",
-		w: "100%",
-		children: [copyable && /* @__PURE__ */ jsx(Flex$1, {
-			pos: "absolute",
-			top: 0,
-			right: 0,
-			style: { zIndex: 1 },
-			children: /* @__PURE__ */ jsx(CopyButton, {
-				value: getCopyContent(),
-				children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, {
-					label: copied ? "Copied" : "Copy Error",
-					children: /* @__PURE__ */ jsx(ActionIcon, {
-						color: copied ? "teal" : "gray",
-						variant: "subtle",
-						onClick: copy,
-						size,
-						children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: copyIconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: copyIconSize })
-					})
-				})
-			})
-		}), /* @__PURE__ */ jsxs(Flex$1, {
-			pt: copyable ? 30 : 0,
-			children: [/* @__PURE__ */ jsxs(Flex$1, {
-				style: {
-					display: "flex",
-					alignItems: "flex-start",
-					gap: sizeConfig.gap
-				},
-				children: [/* @__PURE__ */ jsxs(Text$1, {
-					component: "span",
-					c: "red",
-					ff: "monospace",
-					fw: 600,
-					size: sizeConfig.text,
-					children: [errorName, ":"]
-				}), /* @__PURE__ */ jsx(Text$1, {
-					component: "span",
-					ff: "monospace",
-					size: sizeConfig.text,
-					style: { wordBreak: "break-word" },
-					children: errorMessage
-				})]
-			}), showStack && stackLines.length > 1 && /* @__PURE__ */ jsxs(Flex$1, {
-				mt: "sm",
-				children: [/* @__PURE__ */ jsxs(Flex$1, {
-					style: {
-						display: "flex",
-						alignItems: "center",
-						gap: sizeConfig.gap,
-						cursor: "pointer"
-					},
-					onClick: () => setStackExpanded(!stackExpanded),
-					children: [/* @__PURE__ */ jsx(ActionIcon, {
-						size: "xs",
-						variant: "transparent",
-						c: "dimmed",
-						children: stackExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: sizeConfig.icon }) : /* @__PURE__ */ jsx(IconChevronRight, { size: sizeConfig.icon })
-					}), /* @__PURE__ */ jsxs(Text$1, {
-						c: "dimmed",
-						size: sizeConfig.text,
-						fw: 500,
-						children: [
-							"Stack Trace (",
-							stackLines.length - 1,
-							" frames)"
-						]
-					})]
-				}), /* @__PURE__ */ jsx(Collapse, {
-					in: stackExpanded,
-					children: /* @__PURE__ */ jsx(Flex$1, {
-						mt: "xs",
-						pl: "md",
-						style: { borderLeft: "1px solid var(--mantine-color-default-border)" },
-						children: stackLines.slice(1).map((line, index) => /* @__PURE__ */ jsx(Text$1, {
-							ff: "monospace",
-							size: "xs",
-							c: "dimmed",
-							style: {
-								whiteSpace: "pre-wrap",
-								wordBreak: "break-all"
-							},
-							children: line
-						}, index))
-					})
-				})]
-			})]
-		})]
-	});
-};
-
 //#endregion
 //#region ../../src/core/components/dialogs/AlertDialog.tsx
-const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
+const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
 	mb: "md",
 	children: options.message
 }), /* @__PURE__ */ jsx(Flex$1, {
@@ -374,7 +226,7 @@ const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment$1, {
 
 //#endregion
 //#region ../../src/core/components/dialogs/ConfirmDialog.tsx
-const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
+const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
 	mb: "md",
 	children: options.message
 }), /* @__PURE__ */ jsxs(Flex$1, {
@@ -404,7 +256,7 @@ const PromptDialog = ({ options, onSubmit }) => {
 	const handleKeyDown = (event) => {
 		if (event.key === "Enter") handleSubmit();
 	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		options?.message && /* @__PURE__ */ jsx(Text$1, {
 			mb: "md",
 			children: options.message
@@ -434,25 +286,6 @@ const PromptDialog = ({ options, onSubmit }) => {
 	] });
 };
 
-//#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/services/DialogService.tsx
 var DialogService = class {
@@ -544,42 +377,6 @@ var DialogService = class {
 		if (modalId) modals.close(modalId);
 		else modals.closeAll();
 	}
-	/**
-	* Show an error viewer dialog
-	*/
-	error(error, options) {
-		this.open({
-			size: "lg",
-			title: options?.title || "Error",
-			...options,
-			content: /* @__PURE__ */ jsx(Flex$1, {
-				bdrs: "md",
-				w: "100%",
-				flex: 1,
-				p: "sm",
-				bg: ui.colors.surface,
-				children: /* @__PURE__ */ jsx(ErrorViewer, {
-					size: "xs",
-					error,
-					showStack: options?.showStack ?? true
-				})
-			})
-		});
-	}
-	/**
-	* Show a form dialog for structured input
-	*/
-	form(options) {
-		return Promise.resolve(null);
-	}
-	/**
-	* Show a loading/progress dialog with optional progress percentage
-	*/
-	loading(options) {}
-	/**
-	* Show an image viewer/gallery dialog
-	*/
-	image(src, options) {}
 };
 
 //#endregion
@@ -641,6 +438,21 @@ var ToastService = class {
 	}
 };
 
+//#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
 /**
@@ -678,22 +490,6 @@ const useToast = () => {
 	return useInject(ToastService);
 };
 
-//#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/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$1.sizes.icon.md });
-	return icon;
-};
-
 //#endregion
 //#region ../../src/core/components/layout/Omnibar.tsx
 const Omnibar = (props) => {
@@ -727,7 +523,7 @@ const Omnibar = (props) => {
 };
 
 //#endregion
-//#region ../../src/core/components/layout/AlephaMantineProvider.tsx
+//#region ../../src/core/components/AlephaMantineProvider.tsx
 const AlephaMantineProvider = (props) => {
 	const toast = useToast();
 	const [theme] = useTheme();
@@ -747,14 +543,13 @@ const AlephaMantineProvider = (props) => {
 		}
 	}, []);
 	const defaultColorScheme = props.mantine?.defaultColorScheme ?? theme.defaultColorScheme;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
 		defaultColorScheme,
 		...props.colorSchemeScript
 	}), /* @__PURE__ */ jsxs(MantineProvider, {
 		...props.mantine,
 		defaultColorScheme,
 		theme: {
-			cursorType: "pointer",
 			...theme,
 			...props.mantine?.theme
 		},
@@ -770,20 +565,31 @@ const AlephaMantineProvider = (props) => {
 };
 
 //#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
-	});
+//#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) => {
@@ -854,7 +660,7 @@ const ActionButton = (_props) => {
 	if (props.leftSection && !props.children) restProps.px ??= "xs";
 	if (props.textVisibleFrom) {
 		const { children, textVisibleFrom, leftSection, ...rest } = restProps;
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Flex$1, {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex$1, {
 			w: "100%",
 			visibleFrom: textVisibleFrom,
 			children: /* @__PURE__ */ jsx(ActionButton, {
@@ -892,6 +698,7 @@ const ActionButton = (_props) => {
 		}
 		delete restProps.classNameActive;
 		delete restProps.variantActive;
+		delete restProps.propsActive;
 		if ("action" in restProps && restProps.action) return /* @__PURE__ */ jsx(ActionHookButton, {
 			...restProps,
 			action: restProps.action,
@@ -1026,22 +833,24 @@ const ActionClickButton = ({ preventDefault, ...props }) => {
 * Action for navigation with active state support.
 */
 const ActionNavigationButton = (props) => {
-	const { active: options, classNameActive, variantActive, routerGoOptions, onClick: propsOnClick, ...buttonProps } = 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) return /* @__PURE__ */ jsx(Anchor, {
+	if (props.anchorProps || anchor) return /* @__PURE__ */ jsx(Anchor, {
 		component: "a",
 		...anchorProps,
+		...buttonProps,
 		...props.anchorProps,
 		onClick: combinedOnClick,
 		children: props.children
@@ -1057,7 +866,7 @@ const ActionNavigationButton = (props) => {
 	});
 };
 const ActionHrefButton = (props) => {
-	const { active: options, classNameActive, variantActive, routerGoOptions, target, ...buttonProps } = props;
+	const { active: options, classNameActive, variantActive, propsActive, routerGoOptions, target, ...buttonProps } = props;
 	return /* @__PURE__ */ jsx(Button, {
 		component: "a",
 		target,
@@ -1071,12 +880,12 @@ const ActionHrefButton = (props) => {
 const BurgerButton = (props) => {
 	const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
 	return /* @__PURE__ */ jsx(Burger, {
-		opened: sidebar.opened,
+		opened: !sidebar.closed,
 		onClick: () => setSidebar({
 			...sidebar,
-			opened: !sidebar.opened
+			closed: !sidebar.closed
 		}),
-		hiddenFrom: "sm",
+		hiddenFrom: "md",
 		size: "sm",
 		...props
 	});
@@ -1124,7 +933,7 @@ const DarkModeButton = (props) => {
 		variant: props.variant ?? "subtle",
 		size,
 		"aria-label": "Toggle color scheme",
-		icon: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconSun, {
+		icon: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconSun, {
 			size: iconSize,
 			className: "alepha-light-hidden"
 		}), /* @__PURE__ */ jsx(IconMoon, {
@@ -1140,7 +949,7 @@ const DarkModeButton = (props) => {
 const LanguageButton = (props) => {
 	const i18n = useI18n();
 	return /* @__PURE__ */ jsx(ActionButton, {
-		variant: "default",
+		variant: "subtle",
 		icon: IconLanguage,
 		menu: { items: i18n.languages.map((lang) => ({
 			label: i18n.tr(lang),
@@ -1220,15 +1029,13 @@ const ToggleSidebarButton = (props) => {
 	const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
 	return /* @__PURE__ */ jsx(ActionButton, {
 		icon: sidebar.collapsed ? IconLayoutSidebarRightCollapse : IconLayoutSidebarLeftCollapse,
-		visibleFrom: "sm",
+		visibleFrom: "md",
 		variant: "subtle",
 		size: "md",
 		onClick: () => {
-			const expanding = sidebar.collapsed;
 			setSidebar({
 				...sidebar,
-				collapsed: !sidebar.collapsed,
-				width: expanding ? sidebar.defaultWidth : sidebar.width
+				collapsed: !sidebar.collapsed
 			});
 		},
 		tooltip: {
@@ -1240,190 +1047,837 @@ const ToggleSidebarButton = (props) => {
 };
 
 //#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 });
-};
+//#region ../../src/core/components/data/DetailDrawer.tsx
+const DetailDrawer = ({ opened, onClose, title, subtitle, status, actions, tabs, children, loading, size = "xl", defaultTab }) => /* @__PURE__ */ jsxs(Drawer, {
+	opened,
+	onClose,
+	position: "right",
+	size,
+	withCloseButton: false,
+	padding: 0,
+	children: [/* @__PURE__ */ jsxs(Flex$1, {
+		p: "md",
+		justify: "space-between",
+		align: "flex-start",
+		style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
+		children: [/* @__PURE__ */ jsxs(Flex$1, {
+			direction: "column",
+			gap: 2,
+			style: {
+				minWidth: 0,
+				flex: 1
+			},
+			children: [/* @__PURE__ */ jsxs(Flex$1, {
+				gap: "xs",
+				align: "center",
+				children: [status && /* @__PURE__ */ jsx(Flex$1, {
+					w: 8,
+					h: 8,
+					style: {
+						borderRadius: "50%",
+						backgroundColor: status.active ? "var(--mantine-color-green-6)" : "var(--mantine-color-red-6)",
+						flexShrink: 0
+					}
+				}), /* @__PURE__ */ jsx(Text$1, {
+					size: "lg",
+					fw: 600,
+					truncate: true,
+					children: title
+				})]
+			}), subtitle && /* @__PURE__ */ jsx(Text$1, {
+				size: "sm",
+				c: "dimmed",
+				truncate: true,
+				children: subtitle
+			})]
+		}), /* @__PURE__ */ jsxs(Flex$1, {
+			gap: "xs",
+			align: "center",
+			style: { flexShrink: 0 },
+			children: [actions && actions.length > 0 && /* @__PURE__ */ jsx(ActionButton, {
+				variant: "default",
+				size: "xs",
+				menu: {
+					items: actions,
+					position: "bottom-end",
+					width: 200
+				},
+				children: "Actions"
+			}), /* @__PURE__ */ jsx(ActionButton, {
+				variant: "subtle",
+				size: "xs",
+				c: "dimmed",
+				onClick: onClose,
+				children: "Close"
+			})]
+		})]
+	}), loading ? /* @__PURE__ */ jsx(Flex$1, {
+		flex: 1,
+		justify: "center",
+		align: "center",
+		py: "xl",
+		children: /* @__PURE__ */ jsx(Loader, {})
+	}) : tabs && tabs.length > 0 ? /* @__PURE__ */ jsxs(Tabs, {
+		defaultValue: defaultTab || tabs[0].value,
+		children: [/* @__PURE__ */ jsx(Tabs.List, {
+			px: "md",
+			children: tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Tab, {
+				value: tab.value,
+				leftSection: tab.icon ? /* @__PURE__ */ jsx(tab.icon, { size: 14 }) : void 0,
+				children: tab.label
+			}, tab.value))
+		}), tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Panel, {
+			value: tab.value,
+			p: "md",
+			children: tab.content
+		}, tab.value))]
+	}) : /* @__PURE__ */ jsx(Flex$1, {
+		direction: "column",
+		p: "md",
+		children
+	})]
+});
 
 //#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);
+//#region ../../src/core/components/data/DetailList.tsx
+const DetailList = ({ items, columns = 1 }) => {
+	return /* @__PURE__ */ jsx(Grid, {
+		gutter: "xs",
+		children: items.filter((item) => !item.hidden).map((item) => /* @__PURE__ */ jsx(Grid.Col, {
+			span: 12 / columns,
+			children: /* @__PURE__ */ jsxs(Flex$1, {
+				py: 6,
+				justify: "space-between",
+				align: "center",
+				style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					size: "xs",
+					c: "dimmed",
+					style: { flexShrink: 0 },
+					children: item.label
+				}), /* @__PURE__ */ jsxs(Flex$1, {
+					gap: 4,
+					align: "center",
+					style: { minWidth: 0 },
+					children: [typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsx(Text$1, {
+						size: "sm",
+						fw: 500,
+						truncate: true,
+						children: item.value || "—"
+					}) : item.value ?? /* @__PURE__ */ jsx(Text$1, {
+						size: "sm",
+						c: "dimmed",
+						children: "—"
+					}), item.copyable && /* @__PURE__ */ jsx(ClipboardButton, {
+						value: item.copyable,
+						size: "xs",
+						variant: "subtle",
+						c: "dimmed"
+					})]
+				})]
+			})
+		}, item.label))
+	});
 };
-/**
-* 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/components/data/StatCards.tsx
+const StatCards = ({ items }) => /* @__PURE__ */ jsx(Flex$1, {
+	gap: "sm",
+	wrap: "wrap",
+	children: items.map((item) => {
+		(item.icon && typeof item.icon === "function" ? item.icon : null) ? ui.sizes.icon.md : item.icon;
+		return /* @__PURE__ */ jsx(Paper, {
+			p: "md",
+			radius: "md",
+			withBorder: true,
+			style: {
+				flex: "1 1 0",
+				minWidth: 120
+			},
+			children: /* @__PURE__ */ jsx(Flex$1, {
+				gap: "sm",
+				align: "center",
+				children: /* @__PURE__ */ jsxs(Flex$1, {
+					direction: "column",
+					children: [/* @__PURE__ */ jsx(Text$1, {
+						size: "xl",
+						fw: 700,
+						lh: 1,
+						children: item.value
+					}), /* @__PURE__ */ jsx(Text$1, {
+						size: "xs",
+						c: "dimmed",
+						children: item.label
+					})]
+				})
+			})
+		}, item.label);
+	})
+});
+
+//#endregion
+//#region ../../src/core/components/Flex.tsx
+const Flex = 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$1, {
+		ref,
+		...rest
+	});
+});
+Flex.displayName = "Flex";
+
+//#endregion
+//#region ../../src/core/components/Heading.tsx
+const Heading = (props) => {
+	return /* @__PURE__ */ jsx("h1", { children: "Heading" });
 };
 
 //#endregion
-//#region ../../src/core/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
+//#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, { 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;
 	};
-	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
+	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, {
+			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, { 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, {
+		h: "100%",
+		align: "center",
+		px: props.container ? 0 : "md",
+		justify: "space-between",
+		...props.flexProps,
+		children: [
+			/* @__PURE__ */ jsx(Flex, {
+				flex: 1,
+				children: leftItems.map((item, index) => /* @__PURE__ */ jsx(Flex, {
+					ml: index === 0 ? 0 : "md",
+					align: "center",
+					children: renderItem(item, index)
+				}, index))
+			}),
+			/* @__PURE__ */ jsx(Flex, { children: centerItems.map((item, index) => /* @__PURE__ */ jsx(Flex, {
+				mx: "md",
+				align: "center",
+				children: renderItem(item, index)
+			}, index)) }),
+			/* @__PURE__ */ jsx(Flex, {
+				flex: 1,
+				align: "center",
+				justify: "end",
+				children: rightItems.map((item, index) => /* @__PURE__ */ jsx(Flex, {
+					ml: index === 0 ? 0 : "md",
+					align: "center",
+					children: renderItem(item, index)
+				}, index))
+			})
+		]
+	});
+	if (props.container) return /* @__PURE__ */ jsx(Container$1, {
+		h: "100%",
+		...typeof props.container === "boolean" ? {} : props.container,
+		children: content
+	});
+	return content;
 };
 
 //#endregion
-//#region ../../src/core/components/form/ControlArray.tsx
+//#region ../../src/core/components/layout/Breadcrumb.tsx
 /**
-* Custom hook to sync array items with form state.
-* Uses form events as the source of truth, eliminating dual-state issues.
+* 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 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 Breadcrumb = ({ home = "Home", separator, size = "sm", ...groupProps }) => {
+	const state = useRouterState();
+	const router = useRouter();
+	const crumbs = [];
+	if (home !== false) crumbs.push({
+		label: home,
+		href: "/"
 	});
-	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
-			}));
+	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
 		});
-	}, []);
-	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++, [])
-	};
-};
+	}
+	if (crumbs.length === 0) return null;
+	const sep = separator ?? /* @__PURE__ */ jsx(IconChevronRight, {
+		size: 12,
+		color: "#9ca3af"
+	});
+	return /* @__PURE__ */ jsx(Flex, {
+		gap: "sm",
+		...groupProps,
+		children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs(Flex, {
+			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, {
+				size,
+				fw: 500,
+				children: crumb.label
+			})]
+		}, crumb.href))
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/layout/Container.tsx
+const Container = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(Container$1, {
+		ref,
+		...props
+	});
+});
+Container.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, {
+			h: 1,
+			bg: "var(--mantine-color-default-border)",
+			my: "xs",
+			mx: fill ? "calc(-1 * var(--mantine-spacing-md))" : collapsed ? 0 : "sm"
+		}, key);
+	};
+	const renderNode = (item, key, collapsed) => {
+		if ("type" in item) {
+			if (item.type === "spacer") {
+				if (collapsed) return null;
+				return /* @__PURE__ */ jsx(Flex, { h: 16 }, key);
+			}
+			if (item.type === "divider") return divider(key, item.fill, collapsed);
+			if (item.type === "search") return /* @__PURE__ */ jsx(Flex, {
+				mb: "xs",
+				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, {
+					mt: "md",
+					align: "center",
+					gap: "xs",
+					children: [renderIcon(item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Text, {
+						size: "xs",
+						c: "dimmed",
+						tt: "uppercase",
+						fw: "bold",
+						children: item.label
+					})]
+				}), item.children?.map((child, index) => renderNode(child, `s${key}-${index}`, collapsed))] }, key);
+			}
+		}
+		if ("element" in item) return /* @__PURE__ */ jsx(Fragment$1, { children: item.element }, key);
+		if (item.can && !item.can()) return null;
+		if (item.children && item.children.length > 0) {
+			if (!item.children.some((child) => !child.can || child.can())) return null;
+		}
+		if (collapsed) return /* @__PURE__ */ jsx(SidebarCollapsedItem, {
+			item,
+			level: 0,
+			onItemClick,
+			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, {
+		flex: 1,
+		py: padding,
+		direction: "column",
+		...props.flexProps,
+		children: [
+			/* @__PURE__ */ jsx(Flex, {
+				gap,
+				px: padding,
+				direction: "column",
+				children: menu.filter((it) => it.position === "top").map((item, index) => renderNode(item, index, collapsed))
+			}),
+			/* @__PURE__ */ jsx(Flex, {
+				gap,
+				px: padding,
+				direction: "column",
+				flex: 1,
+				children: menu.filter((it) => !it.position).map((item, index) => renderNode(item, index, collapsed))
+			}),
+			/* @__PURE__ */ jsx(Flex, {
+				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, {
+		flex: 1,
+		direction: "column",
+		visibleFrom: "md",
+		children: renderSidebar(true)
+	}), /* @__PURE__ */ jsx(Flex, {
+		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, {
+		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, {
+				w: "100%",
+				align: "center",
+				gap: "sm",
+				children: [renderIcon(item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Flex, {
+					direction: "column",
+					children: /* @__PURE__ */ jsx(Flex, { children: item.label })
+				})]
+			}),
+			rightSection: item.children ? /* @__PURE__ */ jsx(Flex, { children: isOpen ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }) }) : props.item.rightSection,
+			...props.item.actionProps
+		}), item.children && isOpen && /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			"data-parent-level": level,
+			children: [/* @__PURE__ */ jsx(Flex, { style: {
+				position: "absolute",
+				width: 1,
+				background: "linear-gradient(to bottom, transparent, var(--mantine-color-default-border), transparent)",
+				top: 48,
+				left: 20 + 32 * level,
+				bottom: 16
+			} }), item.children.filter((child) => !child.can || child.can()).map((child, index) => /* @__PURE__ */ jsx(SidebarItem, {
+				item: child,
+				level: level + 1,
+				onItemClick: props.onItemClick,
+				theme: props.theme
+			}, index))]
+		})]
+	});
+};
+const SidebarCollapsedItem = (props) => {
+	const { item, level } = props;
+	const router = useRouter();
+	const handleItemClick = () => {
+		props.onItemClick?.(item);
+		item.onClick?.();
+	};
+	const hasChildren = item.children && item.children.length > 0;
+	const menu = hasChildren ? {
+		on: "hover",
+		position: "right",
+		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, { 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, {
+						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, {
+						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 = 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$1, {
+		ref,
+		...rest
+	});
+});
+Text.displayName = "Text";
+
+//#endregion
+//#region ../../src/core/form/utils/parseInput.ts
+const parseInput = (props, form) => {
+	const disabled = false;
+	const id = props.input.props.id;
+	const label = props.title ?? ("title" in props.input.schema && typeof props.input.schema.title === "string" ? props.input.schema.title : void 0) ?? prettyName(props.input.path);
+	const 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.
@@ -1661,7 +2115,7 @@ const ControlArray = (props) => {
 };
 
 //#endregion
-//#region ../../src/core/components/form/ControlDate.tsx
+//#region ../../src/core/form/components/ControlDate.tsx
 /**
 * ControlDate component for handling date, datetime, and time inputs.
 *
@@ -1718,7 +2172,7 @@ const ControlDate = (props) => {
 };
 
 //#endregion
-//#region ../../src/core/components/form/ControlNumber.tsx
+//#region ../../src/core/form/components/ControlNumber.tsx
 /**
 *
 */
@@ -1776,7 +2230,7 @@ const ControlNumber = (props) => {
 };
 
 //#endregion
-//#region ../../src/core/components/form/ControlObject.tsx
+//#region ../../src/core/form/components/ControlObject.tsx
 /**
 * ControlObject component for editing nested object schemas.
 *
@@ -1853,125 +2307,7 @@ const ControlObject = (props) => {
 };
 
 //#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 suggested operators based on field type
-*/
-function getOperatorsForField(field) {
-	const allOperators = ["=", "!="];
-	if (field.enum) return [...allOperators, "in"];
-	switch (field.type) {
-		case "string":
-		case "text": return [...allOperators, "null"];
-		case "number":
-		case "integer": return [
-			...allOperators,
-			">",
-			">=",
-			"<",
-			"<="
-		];
-		case "boolean": return allOperators;
-		case "datetime":
-		case "date": return [
-			...allOperators,
-			">",
-			">=",
-			"<",
-			"<="
-		];
-		default: return [...allOperators, "null"];
-	}
-}
-/**
-* 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/components/form/ControlQueryBuilder.tsx
+//#region ../../src/core/form/components/ControlQueryBuilder.tsx
 /**
 * Query builder with text input and help popover.
 * Generates query strings for parseQueryString syntax.
@@ -2222,7 +2558,7 @@ function QueryHelp({ fields, onInsert }) {
 }
 
 //#endregion
-//#region ../../src/core/components/form/ControlSelect.tsx
+//#region ../../src/core/form/components/ControlSelect.tsx
 /**
 * ControlSelect component for handling Select, MultiSelect, and TagsInput.
 *
@@ -2318,6 +2654,7 @@ const ControlSelect = (props) => {
 		size: props.size,
 		id,
 		leftSection: icon,
+		rightSection: null,
 		data,
 		...props.input.props,
 		...selectProps
@@ -2325,7 +2662,7 @@ const ControlSelect = (props) => {
 };
 
 //#endregion
-//#region ../../src/core/components/form/Control.tsx
+//#region ../../src/core/form/components/Control.tsx
 /**
 * Generic form control that renders the appropriate input based on the schema and props.
 *
@@ -2445,27 +2782,46 @@ const Control = (_props) => {
 		if (props.segmented) opts.segmented ??= {};
 		return /* @__PURE__ */ jsx(ControlSelect, {
 			size: props.size,
-			input: props.input,
+			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.input.schema && "type" in props.input.schema && props.input.schema.type === "boolean") {
-		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
-		});
-	}
 	if (props.password || props.input.props.name?.includes("password")) {
 		const passwordInputProps = typeof props.password === "object" ? props.password : {};
 		return /* @__PURE__ */ jsx(PasswordInput, {
@@ -2505,788 +2861,539 @@ const Control = (_props) => {
 			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/components/form/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$1, { 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$1, {
-		direction: "column",
-		gap: "sm",
-		flex: fill ? 1 : void 0,
-		...props.flexProps,
-		children: [/* @__PURE__ */ jsx(Flex$1, {
-			direction: "column",
-			gap: "sm",
-			flex: 1,
-			children: renderFields()
-		}), !skipSubmitButton && /* @__PURE__ */ jsx(Card, {
-			w: "100%",
-			withBorder: true,
-			children: /* @__PURE__ */ jsxs(Flex$1, {
-				gap: "sm",
-				flex: 1,
-				children: [
-					/* @__PURE__ */ jsx(Flex$1, {}),
-					/* @__PURE__ */ jsx(Flex$1, { flex: 1 }),
-					/* @__PURE__ */ jsxs(Flex$1, {
-						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$1, {
-		component: "form",
-		flex: fill ? 1 : void 0,
-		...form.props,
-		...props.flexProps,
-		children: content
-	});
-};
-
-//#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))
-			})
+			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"
 		]
 	});
-	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
+//#region ../../src/core/form/components/TypeForm.tsx
 /**
-* Automatic breadcrumb component that reads the current route hierarchy
-* from the Alepha router's layer stack.
+* 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.
 *
-* Pages should define a `label` in their `$page()` options for best results.
-* Falls back to the page name converted to Title Case.
+* 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 Breadcrumb = ({ home = "Home", separator, size = "xs", ...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: 4,
-		...groupProps,
-		children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs(Flex$1, {
-			gap: 4,
-			children: [i > 0 && sep, i < crumbs.length - 1 ? /* @__PURE__ */ jsx(Anchor, {
-				component: Link,
-				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/Sidebar.tsx
-const Sidebar = (props) => {
-	const router = useRouter();
-	const { onItemClick } = props;
-	const divider = (key, fill) => {
-		return /* @__PURE__ */ jsx(Flex$1, {
-			h: 1,
-			bg: "var(--mantine-color-default-border)",
-			my: "xs",
-			mx: fill ? "calc(-1 * var(--mantine-spacing-md))" : props.collapsed ? 0 : "sm"
-		}, key);
-	};
-	const renderNode = (item, key) => {
-		if ("type" in item) {
-			if (item.type === "spacer") {
-				if (props.collapsed) return null;
-				return /* @__PURE__ */ jsx(Flex$1, { h: 16 }, key);
-			}
-			if (item.type === "divider") return divider(key, item.fill);
-			if (item.type === "search") return /* @__PURE__ */ jsx(Flex$1, {
-				mb: "xs",
-				children: /* @__PURE__ */ jsx(OmnibarButton, { collapsed: props.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 (props.collapsed) return /* @__PURE__ */ jsxs(Fragment, { children: [divider(`${key}-d`), item.children?.map((child, index) => renderNode(child, `s${key}-${index}`))] }, key);
-				return /* @__PURE__ */ jsxs(Fragment, { 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}`))] }, key);
-			}
-		}
-		if ("element" in item) return /* @__PURE__ */ jsx(Fragment, { 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 (props.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 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 padding = "md";
-	const gap = props.items ? props.gap ?? 4 : "xs";
-	const menu = useMemo(() => getSidebarNodes(), [props.items, props.autoPopulateMenu]);
-	return /* @__PURE__ */ jsxs(Flex$1, {
-		flex: 1,
-		py: padding,
-		direction: "column",
-		className: "alepha-sidebar-scroll",
-		...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))
-			}),
-			/* @__PURE__ */ jsx(Flex$1, {
-				gap,
-				px: padding,
-				direction: "column",
-				flex: 1,
-				className: "alepha-sidebar-scroll",
-				children: menu.filter((it) => !it.position).map((item, index) => renderNode(item, index))
-			}),
-			/* @__PURE__ */ jsx(Flex$1, {
-				gap,
-				px: padding,
-				direction: "column",
-				children: menu.filter((it) => it.position === "bottom").map((item, index) => renderNode(item, index))
-			})
-		]
-	});
-};
-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?.();
-		}
+	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);
+		}) });
 	};
-	return /* @__PURE__ */ jsxs(Flex$1, {
+	const content = /* @__PURE__ */ jsxs(Flex$1, {
 		direction: "column",
-		ps: level === 0 ? 0 : 32,
-		pos: "relative",
-		children: [/* @__PURE__ */ jsx(ActionButton, {
+		gap: "sm",
+		flex: fill ? 1 : void 0,
+		...props.flexProps,
+		children: [/* @__PURE__ */ jsx(Flex$1, {
+			direction: "column",
+			gap: "sm",
+			flex: 1,
+			children: renderFields()
+		}), !skipSubmitButton && /* @__PURE__ */ jsx(Card, {
 			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"),
-			tooltip: item.description ? {
-				label: item.description,
-				position: "right"
-			} : void 0,
-			color: "gray",
-			variant: "subtle",
-			variantActive: "default",
-			radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
-			onClick: handleItemClick,
-			leftSection: /* @__PURE__ */ jsxs(Flex$1, {
-				w: "100%",
-				align: "center",
+			withBorder: true,
+			children: /* @__PURE__ */ jsxs(Flex$1, {
 				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))]
+				flex: 1,
+				children: [
+					/* @__PURE__ */ jsx(Flex$1, {}),
+					/* @__PURE__ */ jsx(Flex$1, { flex: 1 }),
+					/* @__PURE__ */ jsxs(Flex$1, {
+						gap: "sm",
+						children: [/* @__PURE__ */ jsx(ActionButton, {
+							variant: "subtle",
+							type: "reset",
+							children: "Reset"
+						}), /* @__PURE__ */ jsx(ActionButton, {
+							intent: "primary",
+							form,
+							...submitButtonProps,
+							children: submitButtonProps?.children ?? "Submit"
+						})]
+					})
+				]
+			})
 		})]
 	});
-};
-const SidebarCollapsedItem = (props) => {
-	const { item, level } = props;
-	const handleItemClick = () => {
-		props.onItemClick?.(item);
-		item.onClick?.();
-	};
-	return /* @__PURE__ */ jsx(ActionButton, {
-		size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
-		variant: "subtle",
-		variantActive: "default",
-		tooltip: {
-			label: item.label,
-			position: "right"
-		},
-		radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
-		onClick: handleItemClick,
-		icon: renderIcon(item.icon, ui.sizes.icon.sm) ?? /* @__PURE__ */ jsx(IconSquareRounded, { size: ui.sizes.icon.sm }),
-		href: props.item.href,
-		target: props.item.target,
-		...props.item.actionProps
+	if (skipFormElement) return content;
+	return /* @__PURE__ */ jsx(Flex$1, {
+		component: "form",
+		flex: fill ? 1 : void 0,
+		...form.props,
+		...props.flexProps,
+		children: content
 	});
 };
 
 //#endregion
-//#region ../../src/core/components/layout/DashboardShell.tsx
-const DashboardShell = (props) => {
-	const router = useRouter();
-	const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
-	const { opened } = sidebar;
-	const collapsed = props.sidebarProps?.collapsed !== void 0 ? props.sidebarProps.collapsed : sidebar.collapsed;
-	const [isResizing, setIsResizing] = useState(false);
-	const [isHovering, setIsHovering] = useState(false);
-	const [collapseEffect, setCollapseEffect] = useState({
-		offset: 0,
-		opacity: 1
-	});
-	const resizeRef = useRef(null);
-	const { collapsedWidth, collapseThreshold, maxWidth, hoverDelay, defaultWidth } = sidebar;
-	const handleResizeStart = useCallback((e) => {
-		if (!props.sidebarResizable) return;
-		e.preventDefault();
-		if (collapsed) {
-			setSidebar({
-				...sidebar,
-				collapsed: false,
-				width: defaultWidth
-			});
-			setIsResizing(true);
-			resizeRef.current = {
-				startX: e.clientX,
-				startWidth: defaultWidth
-			};
-		} else {
-			setIsResizing(true);
-			resizeRef.current = {
-				startX: e.clientX,
-				startWidth: sidebar.width
-			};
-		}
-	}, [
-		props.sidebarResizable,
-		collapsed,
-		sidebar,
-		setSidebar,
-		defaultWidth
-	]);
-	useEffect(() => {
-		if (!isResizing) return;
-		const handleMouseMove = (e) => {
-			if (!resizeRef.current) return;
-			const delta = e.clientX - resizeRef.current.startX;
-			const rawWidth = resizeRef.current.startWidth + delta;
-			const newWidth = Math.min(Math.max(rawWidth, collapsedWidth), maxWidth);
-			if (rawWidth < collapseThreshold) {
-				const progress = Math.max(0, (collapseThreshold - rawWidth) / collapseThreshold);
-				setCollapseEffect({
-					offset: -progress * collapsedWidth,
-					opacity: 1 - progress * .7
-				});
-				setSidebar({
-					...sidebar,
-					width: collapseThreshold,
-					collapsed: false
-				});
-			} else {
-				setCollapseEffect({
-					offset: 0,
-					opacity: 1
-				});
-				setSidebar({
-					...sidebar,
-					width: newWidth,
-					collapsed: false
-				});
-			}
-		};
-		const handleMouseUp = () => {
-			if (collapseEffect.offset < 0) setSidebar({
-				...sidebar,
-				collapsed: true
-			});
-			setCollapseEffect({
-				offset: 0,
-				opacity: 1
-			});
-			setIsResizing(false);
-			resizeRef.current = null;
-		};
-		document.addEventListener("mousemove", handleMouseMove);
-		document.addEventListener("mouseup", handleMouseUp);
-		return () => {
-			document.removeEventListener("mousemove", handleMouseMove);
-			document.removeEventListener("mouseup", handleMouseUp);
+//#region ../../src/core/form/factories/dialogForm.tsx
+/**
+* Creates dialog options for a form dialog.
+*
+* @param form - The form model to render.
+* @param options - Additional dialog and TypeForm options.
+*/
+const dialogForm = (form, options) => ({
+	size: "lg",
+	title: options?.title || "Form",
+	...options,
+	content: /* @__PURE__ */ jsx(TypeForm, {
+		form,
+		skipSubmitButton: false,
+		...options?.typeFormProps
+	})
+});
+
+//#endregion
+//#region ../../src/core/helpers/renderIcon.tsx
+const renderIcon = (icon, size) => {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: size ?? ui.sizes.icon.md });
+	return icon;
+};
+
+//#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
 		};
-	}, [
-		isResizing,
-		sidebar,
-		setSidebar,
-		collapsedWidth,
-		maxWidth,
-		collapseThreshold,
-		collapseEffect.offset
-	]);
-	const hoverTimeoutRef = useRef(null);
-	const expandOnHover = props.sidebarProps?.expandOnHover !== false;
-	const handleNavbarMouseEnter = useCallback(() => {
-		if (collapsed && expandOnHover) hoverTimeoutRef.current = setTimeout(() => {
-			setIsHovering(true);
-		}, hoverDelay);
-	}, [
-		collapsed,
-		expandOnHover,
-		hoverDelay
-	]);
-	const handleNavbarMouseLeave = useCallback(() => {
-		if (hoverTimeoutRef.current) {
-			clearTimeout(hoverTimeoutRef.current);
-			hoverTimeoutRef.current = null;
-		}
-		setIsHovering(false);
-	}, []);
-	useEffect(() => {
-		if (collapsed) {
-			setIsHovering(false);
-			if (hoverTimeoutRef.current) {
-				clearTimeout(hoverTimeoutRef.current);
-				hoverTimeoutRef.current = null;
-			}
-		}
-	}, [collapsed]);
-	const shouldShowSidebar = () => {
-		if (props.noSidebarWhen?.paths) {
-			for (const path of props.noSidebarWhen.paths) if (router.isActive(path, { startWith: true })) return false;
-		}
-		return true;
+	}
+	return {
+		value: nodeId,
+		label: key ?? "",
+		nodeValue: data,
+		nodeKey: key,
+		path: currentPath,
+		isArrayItem
 	};
-	const [showSidebar, setShowSidebar] = useState(shouldShowSidebar());
-	useEvents({
-		"react:transition:end": () => {
-			setShowSidebar(shouldShowSidebar());
-		},
-		"react:transition:begin": () => {
-			setSidebar({
-				...sidebar,
-				opened: false
-			});
-		}
-	}, [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;
-	const hHeight = props.headerHeight ?? 60;
-	const fHeight = props.footerHeight ?? 24;
-	const headerHeight = hasAppBar ? hHeight : 0;
-	const footerHeight = props.footer ? fHeight : 0;
-	const expandedWidth = Math.max(sidebar.width, collapsedWidth);
-	const isExpandedByHover = collapsed && isHovering;
-	const effectiveCollapsed = collapsed && !isHovering;
-	const handleSidebarItemClick = useCallback((item) => {
-		if (isExpandedByHover) setIsHovering(false);
-		props.sidebarProps?.onItemClick?.(item);
-	}, [isExpandedByHover, props.sidebarProps?.onItemClick]);
-	const hoverWidth = Math.max(defaultWidth, collapsedWidth);
-	const canResize = props.sidebarResizable && !collapsed;
-	return /* @__PURE__ */ jsxs(AppShell, {
-		layout: props.layout,
-		w: "100%",
-		flex: 1,
-		header: hasAppBar ? { height: hHeight } : void 0,
-		navbar: hasSidebar ? {
-			width: effectiveCollapsed || isExpandedByHover ? { base: collapsedWidth } : { base: expandedWidth },
-			breakpoint: "sm",
-			collapsed: { mobile: !opened }
-		} : void 0,
-		footer: props.footer ? { height: fHeight } : void 0,
-		...props.appShellProps,
+}
+function getExpandedIds(nodes, targetDepth, currentDepth = 0) {
+	if (currentDepth >= targetDepth) return [];
+	const ids = [];
+	for (const node of nodes) if (node.children) {
+		ids.push(node.value);
+		ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));
+	}
+	return ids;
+}
+const CopyButton$1 = ({ value, iconSize }) => {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = useCallback((e) => {
+		e.stopPropagation();
+		navigator.clipboard.writeText(value);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1500);
+	}, [value]);
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		size: iconSize + 4,
+		variant: "transparent",
+		c: copied ? "green" : "dimmed",
+		onClick: handleCopy,
+		className: "alepha-json-viewer-copy",
+		children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: iconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: iconSize })
+	});
+};
+const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, showQuotes, showCopyButton, renderValue }) => {
+	const { nodeValue, nodeKey, path, isArrayItem, isRoot } = node;
+	const type = getValueType(nodeValue);
+	const isExpandable = type === "object" || type === "array";
+	const getPreview = () => {
+		if (!isExpandable) return null;
+		const count = (type === "array" ? nodeValue : Object.keys(nodeValue)).length;
+		const label = type === "array" ? "item" : "key";
+		if (!expanded) return /* @__PURE__ */ jsx(Text$1, {
+			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$1, {
+		gap: 6,
+		wrap: "nowrap",
+		...elementProps,
+		className: `alepha-json-viewer-row ${elementProps.className || ""}`,
 		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",
-				"data-resizing": isResizing,
-				"data-hover-expanded": isExpandedByHover,
-				onMouseEnter: handleNavbarMouseEnter,
-				onMouseLeave: handleNavbarMouseLeave,
-				style: {
-					transform: collapseEffect.offset ? `translateX(${collapseEffect.offset}px)` : void 0,
-					opacity: collapseEffect.opacity,
-					...isExpandedByHover && {
-						width: hoverWidth,
-						zIndex: 200,
-						boxShadow: "var(--mantine-shadow-xl)"
-					}
-				},
-				...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: effectiveCollapsed,
-						onItemClick: handleSidebarItemClick
-					}),
-					props.navbarFooter ? /* @__PURE__ */ jsx(Flex$1, {
-						style: { borderTop: "1px solid var(--mantine-color-default-border)" },
-						h: footerHeight,
-						children: props.navbarFooter
-					}) : null,
-					(canResize || isExpandedByHover) && /* @__PURE__ */ jsx(Flex$1, {
-						pos: "absolute",
-						right: -6,
-						top: 0,
-						bottom: 0,
-						w: 12,
-						style: {
-							cursor: "col-resize",
-							userSelect: "none"
-						},
-						onMouseDown: handleResizeStart
-					})
-				]
+			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$1, {
+				component: "span",
+				size,
+				children: [/* @__PURE__ */ jsx("span", {
+					style: STYLES.key,
+					children: showQuotes ? `"${nodeKey}"` : nodeKey
+				}), /* @__PURE__ */ jsx("span", {
+					style: STYLES.colon,
+					children: ":"
+				})]
 			}),
-			/* @__PURE__ */ jsx(AppShell.Main, {
-				className: "alepha-sidebar-main",
-				"data-resizing": isResizing,
-				...props.appShellMainProps,
-				children: props.container ? /* @__PURE__ */ jsx(Container, {
-					w: "100%",
-					flex: 1,
-					display: "flex",
-					style: { flexDirection: "column" },
-					...typeof props.container === "boolean" ? {} : props.container,
-					children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
-				}) : props.children ?? /* @__PURE__ */ jsx(NestedView, {})
+			nodeKey !== void 0 && isArrayItem && /* @__PURE__ */ jsxs(Text$1, {
+				component: "span",
+				size,
+				children: [/* @__PURE__ */ jsx("span", {
+					style: STYLES.key,
+					children: nodeKey
+				}), /* @__PURE__ */ jsx("span", {
+					style: STYLES.colon,
+					children: ":"
+				})]
 			}),
-			props.footer && /* @__PURE__ */ jsx(AppShell.Footer, {
-				...props.appShellFooterProps,
-				children: props.footer
+			hasChildren ? getPreview() : isExpandable ? type === "array" ? /* @__PURE__ */ jsx(Text$1, {
+				component: "span",
+				size,
+				style: STYLES.preview,
+				children: "[]"
+			}) : /* @__PURE__ */ jsx(Text$1, {
+				component: "span",
+				size,
+				style: STYLES.preview,
+				children: "{}"
+			}) : renderValue(nodeValue, nodeKey, path),
+			showCopyButton && /* @__PURE__ */ jsx(CopyButton$1, {
+				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$1, {
+			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$1, {
+				style: STYLES.string,
+				component: "span",
+				size,
+				className: "alepha-json-viewer-value",
+				title: val,
+				children: [
+					"\"",
+					val,
+					"\""
+				]
+			});
+			case "number": return /* @__PURE__ */ jsx(Text$1, {
+				component: "span",
+				size,
+				style: STYLES.number,
+				children: val
+			});
+			case "boolean": return /* @__PURE__ */ jsx(Text$1, {
+				component: "span",
+				size,
+				style: STYLES.boolean,
+				children: String(val)
+			});
+			case "null":
+			case "undefined": return /* @__PURE__ */ jsx(Text$1, {
+				component: "span",
+				size,
+				style: STYLES.null,
+				children: type
+			});
+			default: return /* @__PURE__ */ jsx(Text$1, {
+				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$1, {
+		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/json/factories/dialogJson.tsx
+/**
+* Creates dialog options for a JSON viewer dialog.
+*
+* @param data - The JSON data to display.
+* @param options - Additional dialog options.
+*/
+const dialogJson = (data, options) => ({
+	size: "lg",
+	title: options?.title || "Json Viewer",
+	...options,
+	content: /* @__PURE__ */ jsx(Flex$1, {
+		bdrs: "md",
+		w: "100%",
+		flex: 1,
+		p: "sm",
+		bg: ui.colors.surface,
+		children: /* @__PURE__ */ jsx(JsonViewer, {
+			size: "xs",
+			data
+		})
+	})
+});
+
+//#endregion
+//#region ../../src/core/primitives/$ui.ts
+/**
+* Convenience function to configure and inject the UiRouter.
+*/
+const $ui = (options = {}) => {
+	const { alepha } = $context();
+	if (options.themes) alepha.store.set(alephaThemeListAtom, options.themes);
+	return alepha.inject(UiRouter);
+};
 
 //#endregion
-//#region ../../src/core/components/table/DataTableFilters.tsx
+//#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);
@@ -3322,7 +3429,7 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 };
 
 //#endregion
-//#region ../../src/core/components/table/DataTablePagination.tsx
+//#region ../../src/core/table/components/DataTablePagination.tsx
 const DataTablePagination = ({ page, size, totalPages, onPageChange, onSizeChange }) => {
 	return /* @__PURE__ */ jsxs(Flex$1, {
 		align: "center",
@@ -3369,11 +3476,7 @@ const DataTablePagination = ({ page, size, totalPages, onPageChange, onSizeChang
 };
 
 //#endregion
-//#region ../../src/core/components/table/types.ts
-const DEFAULT_MAX_VISIBLE_COLUMNS = 8;
-
-//#endregion
-//#region ../../src/core/components/table/ColumnPicker.tsx
+//#region ../../src/core/table/components/ColumnPicker.tsx
 const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 	const [opened, setOpened] = useState(false);
 	const columnEntries = Object.entries(columns);
@@ -3474,7 +3577,7 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 };
 
 //#endregion
-//#region ../../src/core/components/table/FilterPicker.tsx
+//#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;
@@ -3575,7 +3678,7 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 };
 
 //#endregion
-//#region ../../src/core/components/table/DataTableToolbar.tsx
+//#region ../../src/core/table/components/DataTableToolbar.tsx
 const escapeCsvField = (value) => {
 	if (value.includes(",") || value.includes("\"") || value.includes("\n")) return `"${value.replace(/"/g, "\"\"")}"`;
 	return value;
@@ -3658,7 +3761,7 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 							onClick: exportClipboard
 						}] }
 					}),
-					hasSelection && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsx(Divider, {
 							orientation: "vertical",
 							mx: "xs"
@@ -3703,7 +3806,7 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 };
 
 //#endregion
-//#region ../../src/core/components/table/useTableSelection.ts
+//#region ../../src/core/table/components/useTableSelection.ts
 const useTableSelection = (items, getItemKey, enabled) => {
 	const [selectedKeys, setSelectedKeys] = useState(/* @__PURE__ */ new Set());
 	const selectedItems = useMemo(() => {
@@ -3766,7 +3869,7 @@ const useTableSelection = (items, getItemKey, enabled) => {
 };
 
 //#endregion
-//#region ../../src/core/components/table/DataTable.tsx
+//#region ../../src/core/table/components/DataTable.tsx
 /**
 * Parse the sort string to get direction for a specific field.
 * Alepha convention: 'field' = ASC, '-field' = DESC
@@ -4165,29 +4268,206 @@ const DataTable = (props) => {
 };
 
 //#endregion
-//#region ../../src/core/hooks/useDialog.ts
+//#region ../../src/core/utils/extractSchemaFields.ts
 /**
-* Use this hook to access the Dialog Service for showing various dialog types.
+* 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 suggested operators based on field type
+*/
+function getOperatorsForField(field) {
+	const allOperators = ["=", "!="];
+	if (field.enum) return [...allOperators, "in"];
+	switch (field.type) {
+		case "string":
+		case "text": return [...allOperators, "null"];
+		case "number":
+		case "integer": return [
+			...allOperators,
+			">",
+			">=",
+			"<",
+			"<="
+		];
+		case "boolean": return allOperators;
+		case "datetime":
+		case "date": return [
+			...allOperators,
+			">",
+			">=",
+			"<",
+			"<="
+		];
+		default: return [...allOperators, "null"];
+	}
+}
+/**
+* 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
-* ```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:" });
-* ```
+* capitalize("hello") // "Hello"
 */
-const useDialog = () => {
-	return useInject(DialogService);
+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
 /**
-* | Stability | Since | Runtime |
-* |-----------|-------|---------|
-* | 2 - beta | 0.12.0 | node, bun, workerd, browser|
-*
 * Core UI components based on Mantine UI v8.
 *
 * **Features:**
@@ -4223,15 +4503,7 @@ const AlephaUI = $module({
 		alepha.with(ToastService);
 	}
 });
-/**
-* Convenience function to configure and inject the UiRouter.
-*/
-const $ui = (options = {}) => {
-	const { alepha } = $context();
-	if (options.themes) alepha.store.set(alephaThemeListAtom, options.themes);
-	return alepha.inject(UiRouter);
-};
 
 //#endregion
-export { $ui, ActionButton, DashboardShell as AdminShell, DashboardShell, AlephaMantineProvider, AlephaUI, AlertDialog, AppBar, Breadcrumb, BurgerButton, ClipboardButton, ConfirmDialog, Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlQueryBuilder, ControlSelect, DarkModeButton, DataTable, DialogService, Flex, LanguageButton, OPERATOR_INFO, Omnibar, OmnibarButton, PromptDialog, Sidebar, Text, ThemeButton, ThemeProvider, ToastService, ToggleSidebarButton, TypeForm, UiRouter, alephaSidebarAtom, alephaThemeAtom, alephaThemeListAtom, capitalize, defaultTheme, extractSchemaFields, getDefaultIcon, getOperatorsForField, midnightTheme, prettyName, toTitleCase, ui, useDialog, useToast };
+export { $ui, ActionButton, DashboardShell as AdminShell, DashboardShell, AlephaMantineProvider, AlephaUI, AlertDialog, AppBar, Breadcrumb as Breadcrumbs, BurgerButton, ClipboardButton, ConfirmDialog, Container, Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlQueryBuilder, ControlSelect, DarkModeButton, DataTable, DetailDrawer, DetailList, DialogService, Flex, Heading, JsonViewer, LanguageButton, OPERATOR_INFO, Omnibar, OmnibarButton, PromptDialog, Sidebar, ToggleSidebarButton as SidebarCollapseButton, StatCards, Text, ThemeButton, ThemeProvider, ToastService, TypeForm, UiRouter, alephaSidebarAtom, alephaThemeAtom, alephaThemeListAtom, capitalize, defaultTheme, dialogForm, dialogJson, extractSchemaFields, getDefaultIcon, getOperatorsForField, isComponentType, midnightTheme, prettyName, renderIcon, toTitleCase, ui, useDialog, useTheme, useToast };
 //# sourceMappingURL=index.js.map