@alepha/ui 0.18.1 → 0.18.3

package/dist/core/index.js

@@ -1,14 +1,14 @@
 import { $atom, $context, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
-import { AlephaReactForm, FormValidationError, useForm, useFormState } from "alepha/react/form";
-import { $head, AlephaReactHead } from "alepha/react/head";
+import { AlephaReactForm, FormValidationError, useFieldValue, useForm, useFormState } from "alepha/react/form";
+import { $head, AlephaReactHead, BrowserHeadProvider } from "alepha/react/head";
 import { AlephaReactI18n, useI18n } from "alepha/react/i18n";
 import { $cookie } from "alepha/server/cookies";
+import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, ColorInput, ColorSchemeScript, ColorSwatch, 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, SimpleGrid, Slider, Switch, Table, Tabs, TagsInput, Text as Text$1, TextInput, Textarea, Tooltip, Tree, UnstyledButton, getTreeExpandedState, useMantineColorScheme, useMantineTheme, useTree } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
-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 { IconAlertTriangle, IconArrowDown, IconArrowLeft, IconArrowUp, IconArrowsSort, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClipboard, IconClock, IconColorPicker, IconColumns, IconCopy, IconDotsVertical, 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";
@@ -32,7 +32,7 @@ const alephaSidebarAtom = $atom({
 		closed: true,
 		collapsed: false,
 		expandedWidth: 300,
-		collapsedWidth: 78
+		collapsedWidth: 72
 	}
 });
 
@@ -44,6 +44,20 @@ const alephaThemeAtom = $atom({
 	default: { index: 0 }
 });
 
+//#endregion
+//#region ../../src/core/atoms/alephaThemeOverridesAtom.ts
+const alephaThemeOverridesAtom = $atom({
+	name: "alepha.ui.themeOverrides",
+	schema: t.object({
+		primaryColor: t.optional(t.text()),
+		radius: t.optional(t.text()),
+		fontFamily: t.optional(t.text()),
+		fontSize: t.optional(t.text()),
+		scale: t.optional(t.text())
+	}),
+	default: {}
+});
+
 //#endregion
 //#region ../../src/core/atoms/themes/default.ts
 const defaultTheme = {
@@ -51,6 +65,161 @@ const defaultTheme = {
 	description: "Default Alepha Theme"
 };
 
+//#endregion
+//#region ../../src/core/atoms/themes/editorial.ts
+/**
+* Editorial theme.
+*
+* Serif typography, high contrast black and white, thin borders, generous whitespace.
+* Newspaper/magazine aesthetic — elegant restraint.
+*/
+const editorialTheme = {
+	name: "Editorial",
+	description: "Serif typography with newspaper elegance",
+	defaultColorScheme: "light",
+	head: { link: [
+		{
+			rel: "preconnect",
+			href: "https://fonts.googleapis.com"
+		},
+		{
+			rel: "preconnect",
+			href: "https://fonts.gstatic.com",
+			crossorigin: ""
+		},
+		{
+			rel: "stylesheet",
+			href: "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap"
+		}
+	] },
+	primaryColor: "ink",
+	primaryShade: {
+		light: 7,
+		dark: 3
+	},
+	autoContrast: true,
+	fontFamily: "\"Source Serif 4\", \"Georgia\", \"Times New Roman\", serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "\"Playfair Display\", \"Georgia\", \"Times New Roman\", serif",
+		fontWeight: "700",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2.5rem",
+				lineHeight: "1.15"
+			},
+			h2: {
+				fontSize: "1.75rem",
+				lineHeight: "1.2"
+			},
+			h3: {
+				fontSize: "1.375rem",
+				lineHeight: "1.3"
+			},
+			h4: {
+				fontSize: "1.125rem",
+				lineHeight: "1.4"
+			},
+			h5: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "sm",
+	radius: {
+		xs: "2px",
+		sm: "3px",
+		md: "4px",
+		lg: "6px",
+		xl: "8px"
+	},
+	shadows: {
+		xs: "0 1px 2px rgba(0, 0, 0, 0.06)",
+		sm: "0 1px 3px rgba(0, 0, 0, 0.08)",
+		md: "0 2px 6px rgba(0, 0, 0, 0.08)",
+		lg: "0 4px 12px rgba(0, 0, 0, 0.1)",
+		xl: "0 8px 24px rgba(0, 0, 0, 0.1)"
+	},
+	colors: {
+		ink: [
+			"#f5f3f0",
+			"#e8e4de",
+			"#d4cec5",
+			"#b5ad9f",
+			"#8c8272",
+			"#6b6050",
+			"#4a4035",
+			"#332b22",
+			"#1f1812",
+			"#0d0a07"
+		],
+		burgundy: [
+			"#faf0f0",
+			"#f0d4d4",
+			"#e0adad",
+			"#cc8585",
+			"#b35e5e",
+			"#944545",
+			"#763636",
+			"#5a2828",
+			"#3d1b1b",
+			"#220f0f"
+		],
+		gray: [
+			"#faf9f7",
+			"#f0eee9",
+			"#e0dcd5",
+			"#c8c2b8",
+			"#a8a194",
+			"#8a8273",
+			"#6b6456",
+			"#504a3f",
+			"#36322b",
+			"#1e1b17"
+		],
+		dark: [
+			"#d5d2cd",
+			"#aba59c",
+			"#817a6e",
+			"#5e584e",
+			"#46413a",
+			"#36322c",
+			"#2a2721",
+			"#201d19",
+			"#171411",
+			"#0d0b09"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: { letterSpacing: "0.02em" } }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Paper: Paper.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Card: Card.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		TextInput: TextInput.extend({ styles: { input: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Badge: Badge.extend({
+			defaultProps: {
+				fw: 600,
+				variant: "outline"
+			},
+			styles: { root: {
+				fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+				letterSpacing: "0.04em",
+				textTransform: "uppercase",
+				fontSize: "0.65rem"
+			} }
+		})
+	}
+};
+
 //#endregion
 //#region ../../src/core/atoms/themes/midnight.ts
 const midnightTheme = {
@@ -166,41 +335,793 @@ const midnightTheme = {
 	}
 };
 
+//#endregion
+//#region ../../src/core/atoms/themes/monochrome.ts
+/**
+* Monochrome theme.
+*
+* Pure black and white. No color. Bold typography does all the heavy lifting.
+* A design-school statement piece — minimalist color, maximalist type.
+*/
+const monochromeTheme = {
+	name: "Monochrome",
+	description: "Pure black and white — zero color, maximum typography",
+	primaryColor: "mono",
+	primaryShade: {
+		light: 8,
+		dark: 1
+	},
+	autoContrast: true,
+	fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+		fontWeight: "800",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2.25rem",
+				lineHeight: "1.15"
+			},
+			h2: {
+				fontSize: "1.625rem",
+				lineHeight: "1.25"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.35"
+			},
+			h4: {
+				fontSize: "1.0625rem",
+				lineHeight: "1.45"
+			},
+			h5: {
+				fontSize: "0.9375rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.8125rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "0",
+	radius: {
+		xs: "0",
+		sm: "0",
+		md: "0",
+		lg: "0",
+		xl: "2px"
+	},
+	shadows: {
+		xs: "0 1px 2px rgba(0, 0, 0, 0.08)",
+		sm: "0 1px 4px rgba(0, 0, 0, 0.1)",
+		md: "0 2px 8px rgba(0, 0, 0, 0.12)",
+		lg: "0 4px 16px rgba(0, 0, 0, 0.14)",
+		xl: "0 8px 32px rgba(0, 0, 0, 0.16)"
+	},
+	colors: {
+		mono: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		gray: [
+			"#f5f5f5",
+			"#e5e5e5",
+			"#cccccc",
+			"#b0b0b0",
+			"#909090",
+			"#707070",
+			"#555555",
+			"#3a3a3a",
+			"#252525",
+			"#121212"
+		],
+		blue: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		green: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		red: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		dark: [
+			"#d0d0d0",
+			"#a0a0a0",
+			"#707070",
+			"#505050",
+			"#383838",
+			"#282828",
+			"#1c1c1c",
+			"#141414",
+			"#0a0a0a",
+			"#000000"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 700 },
+			styles: { root: {
+				border: "2px solid currentColor",
+				letterSpacing: "0.03em",
+				textTransform: "uppercase",
+				fontSize: "0.8125rem"
+			} }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { border: "2px solid currentColor" } } }),
+		Paper: Paper.extend({ styles: { root: { border: "2px solid var(--mantine-color-default-border)" } } }),
+		Card: Card.extend({ styles: { root: { border: "2px solid var(--mantine-color-default-border)" } } }),
+		TextInput: TextInput.extend({ styles: { input: { border: "2px solid var(--mantine-color-default-border)" } } }),
+		Badge: Badge.extend({
+			defaultProps: {
+				fw: 700,
+				variant: "outline"
+			},
+			styles: { root: {
+				textTransform: "uppercase",
+				letterSpacing: "0.06em",
+				fontSize: "0.65rem",
+				border: "2px solid currentColor"
+			} }
+		})
+	}
+};
+
+//#endregion
+//#region ../../src/core/atoms/themes/rosePine.ts
+/**
+* Rosé Pine theme.
+*
+* Muted pinks, golds, and subtle greens on warm dark backgrounds.
+* Cozy, low-contrast, easy on the eyes.
+* Based on the Rosé Pine color philosophy.
+*/
+const rosePineTheme = {
+	name: "Rosé Pine",
+	description: "Muted pinks and golds on warm dark backgrounds",
+	defaultColorScheme: "dark",
+	primaryColor: "rose",
+	primaryShade: {
+		light: 5,
+		dark: 4
+	},
+	autoContrast: true,
+	fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+		fontWeight: "600",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2rem",
+				lineHeight: "1.25"
+			},
+			h2: {
+				fontSize: "1.5rem",
+				lineHeight: "1.3"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h5: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.75rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "md",
+	radius: {
+		xs: "4px",
+		sm: "6px",
+		md: "8px",
+		lg: "12px",
+		xl: "16px"
+	},
+	shadows: {
+		xs: "0 1px 3px rgba(0, 0, 0, 0.2)",
+		sm: "0 2px 6px rgba(0, 0, 0, 0.2)",
+		md: "0 4px 12px rgba(0, 0, 0, 0.25)",
+		lg: "0 8px 24px rgba(0, 0, 0, 0.3)",
+		xl: "0 12px 36px rgba(0, 0, 0, 0.35)"
+	},
+	colors: {
+		rose: [
+			"#faf0f4",
+			"#f2d8e3",
+			"#eabdd0",
+			"#e0a0bb",
+			"#d4849f",
+			"#c4748f",
+			"#b06282",
+			"#9a5275",
+			"#7a3f5e",
+			"#5c2e47"
+		],
+		gold: [
+			"#fdf8ec",
+			"#f8ecc8",
+			"#f2dda0",
+			"#eacb72",
+			"#e0b94d",
+			"#c9a33e",
+			"#a98830",
+			"#866b24",
+			"#634f1a",
+			"#403310"
+		],
+		pine: [
+			"#ecf5f0",
+			"#d0e6da",
+			"#add4be",
+			"#86c0a0",
+			"#62ac84",
+			"#4e9670",
+			"#3e7a5a",
+			"#2f5e44",
+			"#20412f",
+			"#12251b"
+		],
+		foam: [
+			"#edf6f7",
+			"#d2e9eb",
+			"#b0d9dd",
+			"#8bc6cc",
+			"#6ab3bb",
+			"#569da5",
+			"#438088",
+			"#33636a",
+			"#23454a",
+			"#14292c"
+		],
+		red: [
+			"#f9eef0",
+			"#efd3d8",
+			"#e3b2bb",
+			"#d68e9b",
+			"#c86c7c",
+			"#b25566",
+			"#944454",
+			"#733442",
+			"#52252f",
+			"#33161d"
+		],
+		gray: [
+			"#f4f0f2",
+			"#e4dde1",
+			"#cec5cb",
+			"#b5aab2",
+			"#9a8e96",
+			"#7e737a",
+			"#635a60",
+			"#4a4248",
+			"#332d31",
+			"#1e1a1c"
+		],
+		dark: [
+			"#e0d8e0",
+			"#b0a6b2",
+			"#817786",
+			"#615768",
+			"#4a3f54",
+			"#3a3044",
+			"#2a2436",
+			"#211e2e",
+			"#1a1724",
+			"#110f1a"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 500 },
+			styles: { root: { transition: "background-color 0.15s ease, opacity 0.15s ease" } }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { transition: "background-color 0.15s ease, opacity 0.15s ease" } } }),
+		Paper: Paper.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "1px solid var(--mantine-color-default-border)" } }
+		}),
+		Card: Card.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "1px solid var(--mantine-color-default-border)" } }
+		}),
+		TextInput: TextInput.extend({ styles: { input: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Badge: Badge.extend({ defaultProps: { fw: 500 } })
+	}
+};
+
+//#endregion
+//#region ../../src/core/atoms/themes/softBrutalism.ts
+/**
+* Soft Brutalism theme.
+*
+* Pastel pop palette with solid offset shadows, rounded corners, and bold borders.
+* A friendlier take on neubrutalism — playful but production-ready.
+*/
+const softBrutalismTheme = {
+	name: "Soft Brutalism",
+	description: "Pastel pop with bold borders and offset shadows",
+	head: { link: [
+		{
+			rel: "preconnect",
+			href: "https://fonts.googleapis.com"
+		},
+		{
+			rel: "preconnect",
+			href: "https://fonts.gstatic.com",
+			crossorigin: ""
+		},
+		{
+			rel: "stylesheet",
+			href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
+		}
+	] },
+	primaryColor: "lavender",
+	primaryShade: {
+		light: 5,
+		dark: 7
+	},
+	autoContrast: true,
+	cursorType: "pointer",
+	fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+		fontWeight: "700",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2rem",
+				lineHeight: "1.25"
+			},
+			h2: {
+				fontSize: "1.5rem",
+				lineHeight: "1.3"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h5: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.75rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "md",
+	radius: {
+		xs: "6px",
+		sm: "8px",
+		md: "12px",
+		lg: "16px",
+		xl: "24px"
+	},
+	shadows: {
+		xs: "2px 2px 0 0 rgba(100, 80, 140, 0.15)",
+		sm: "3px 3px 0 0 rgba(100, 80, 140, 0.2)",
+		md: "4px 4px 0 0 rgba(100, 80, 140, 0.2)",
+		lg: "6px 6px 0 0 rgba(100, 80, 140, 0.25)",
+		xl: "8px 8px 0 0 rgba(100, 80, 140, 0.3)"
+	},
+	colors: {
+		lavender: [
+			"#f3f0fa",
+			"#e4dcf4",
+			"#d1c4e9",
+			"#b4a7d6",
+			"#9a8bc4",
+			"#7f6cb0",
+			"#6a549e",
+			"#543f87",
+			"#3d2d6b",
+			"#2a1d52"
+		],
+		peach: [
+			"#fef3ec",
+			"#fce4d0",
+			"#f9d0ae",
+			"#f4b886",
+			"#f4a261",
+			"#e68a42",
+			"#c67234",
+			"#a35a28",
+			"#6b3a1a",
+			"#4a2710"
+		],
+		mint: [
+			"#ecfaf0",
+			"#d4f2dc",
+			"#b3e8c2",
+			"#8edba4",
+			"#81c995",
+			"#5ab874",
+			"#42a05c",
+			"#2e8548",
+			"#1a5c2e",
+			"#0f3f1e"
+		],
+		coral: [
+			"#fef0ef",
+			"#fcd9d7",
+			"#f8b8b4",
+			"#f29490",
+			"#e97171",
+			"#d65454",
+			"#b83e3e",
+			"#962d2d",
+			"#6b1f1f",
+			"#4a1414"
+		],
+		gray: [
+			"#faf8f6",
+			"#f0ece8",
+			"#ddd7d0",
+			"#c4bbb2",
+			"#a89e95",
+			"#8c8279",
+			"#6e655d",
+			"#524b44",
+			"#3a342f",
+			"#24211e"
+		],
+		dark: [
+			"#d4d0dc",
+			"#a9a2b5",
+			"#7e7690",
+			"#5c546e",
+			"#443c56",
+			"#342d45",
+			"#2a2339",
+			"#1e1a2e",
+			"#161224",
+			"#0f0c1a"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: {
+				border: "2px solid currentColor",
+				boxShadow: "3px 3px 0 0 rgba(100, 80, 140, 0.2)",
+				transition: "box-shadow 0.15s ease, transform 0.15s ease"
+			} }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: {
+			border: "2px solid currentColor",
+			boxShadow: "2px 2px 0 0 rgba(100, 80, 140, 0.15)"
+		} } }),
+		Paper: Paper.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "2px solid var(--mantine-color-default-border)" } }
+		}),
+		Card: Card.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "2px solid var(--mantine-color-default-border)" } }
+		}),
+		TextInput: TextInput.extend({ styles: { input: {
+			border: "2px solid var(--mantine-color-default-border)",
+			transition: "box-shadow 0.15s ease, border-color 0.15s ease"
+		} } }),
+		Badge: Badge.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: { border: "2px solid currentColor" } }
+		})
+	}
+};
+
+//#endregion
+//#region ../../src/core/atoms/themes/terminal.ts
+/**
+* Terminal theme.
+*
+* Monospace everything, green-on-black, zero radius.
+* CRT/hacker aesthetic for developer tools and dashboards.
+*/
+const terminalTheme = {
+	name: "Terminal",
+	description: "Green phosphor on black — monospace hacker aesthetic",
+	defaultColorScheme: "dark",
+	primaryColor: "terminal",
+	primaryShade: {
+		light: 5,
+		dark: 4
+	},
+	autoContrast: true,
+	fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+		fontWeight: "700",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "1.75rem",
+				lineHeight: "1.3"
+			},
+			h2: {
+				fontSize: "1.375rem",
+				lineHeight: "1.35"
+			},
+			h3: {
+				fontSize: "1.125rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h5: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.75rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "0",
+	radius: {
+		xs: "0",
+		sm: "0",
+		md: "0",
+		lg: "2px",
+		xl: "4px"
+	},
+	shadows: {
+		xs: "none",
+		sm: "none",
+		md: "0 0 8px rgba(0, 255, 65, 0.08)",
+		lg: "0 0 16px rgba(0, 255, 65, 0.1)",
+		xl: "0 0 24px rgba(0, 255, 65, 0.12)"
+	},
+	colors: {
+		terminal: [
+			"#e6fff0",
+			"#b3ffd1",
+			"#80ffb3",
+			"#4dff94",
+			"#00ff41",
+			"#00d636",
+			"#00ad2b",
+			"#008521",
+			"#005c17",
+			"#00330d"
+		],
+		amber: [
+			"#fff8e6",
+			"#ffecb3",
+			"#ffe080",
+			"#ffd54d",
+			"#ffca28",
+			"#d4a520",
+			"#aa8418",
+			"#806310",
+			"#554208",
+			"#2b2104"
+		],
+		red: [
+			"#ffe6e6",
+			"#ffb3b3",
+			"#ff8080",
+			"#ff4d4d",
+			"#ff1a1a",
+			"#d41515",
+			"#aa1010",
+			"#800c0c",
+			"#550808",
+			"#2b0404"
+		],
+		gray: [
+			"#e8eaed",
+			"#c8cdd3",
+			"#a4aab3",
+			"#808892",
+			"#5f6872",
+			"#474f58",
+			"#363c44",
+			"#282d33",
+			"#1c2026",
+			"#12151a"
+		],
+		dark: [
+			"#c9cdd2",
+			"#8b9198",
+			"#5c636b",
+			"#3d444c",
+			"#2b3138",
+			"#1e242b",
+			"#151a20",
+			"#0e1216",
+			"#080c0f",
+			"#020303"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: {
+				border: "1px solid currentColor",
+				textTransform: "uppercase",
+				letterSpacing: "0.05em",
+				fontSize: "0.8125rem"
+			} }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { border: "1px solid currentColor" } } }),
+		Paper: Paper.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Card: Card.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		TextInput: TextInput.extend({ styles: { input: {
+			border: "1px solid var(--mantine-color-default-border)",
+			fontFamily: "inherit"
+		} } }),
+		Badge: Badge.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: {
+				border: "1px solid currentColor",
+				textTransform: "uppercase",
+				letterSpacing: "0.05em"
+			} }
+		})
+	}
+};
+
 //#endregion
 //#region ../../src/core/atoms/alephaThemeListAtom.ts
 const alephaThemeListAtom = $atom({
 	name: "alepha.ui.themeList",
 	schema: t.array(t.json()),
-	default: [defaultTheme, midnightTheme]
+	default: [
+		defaultTheme,
+		midnightTheme,
+		softBrutalismTheme,
+		terminalTheme,
+		editorialTheme,
+		rosePineTheme,
+		monochromeTheme
+	]
 });
 
 //#endregion
 //#region ../../src/core/providers/ThemeProvider.ts
-var ThemeProvider = class {
+var ThemeProvider = class ThemeProvider {
 	alepha = $inject(Alepha);
 	cookie = $cookie({
 		name: "theme",
 		schema: alephaThemeAtom.schema,
 		ttl: [1, "year"]
 	});
+	overridesCookie = $cookie({
+		name: "themeOverrides",
+		schema: alephaThemeOverridesAtom.schema,
+		ttl: [1, "year"]
+	});
 	head = $head(() => {
 		const theme = this.getTheme();
 		if (!theme || !theme.name) return {};
-		return { htmlAttributes: { "data-theme": theme.name } };
+		return {
+			htmlAttributes: { "data-theme": this.slugify(theme.name) },
+			...theme.head
+		};
 	});
 	setTheme(index) {
-		const newTheme = this.alepha.store.get(alephaThemeListAtom)[index];
-		if (!newTheme) throw new AlephaError(`Theme with index ${index} not found`);
+		if (!this.alepha.store.get(alephaThemeListAtom)[index]) throw new AlephaError(`Theme with index ${index} not found`);
 		this.cookie.set({ index });
 		this.alepha.store.set(alephaThemeAtom, { index });
-		if (typeof document === "undefined") return;
-		document.documentElement.removeAttribute("data-theme");
-		if (newTheme.name) document.documentElement.setAttribute("data-theme", newTheme.name);
+		if (!this.alepha.isBrowser()) return;
+		this.alepha.inject(BrowserHeadProvider).refreshGlobalHead();
+	}
+	slugify(name) {
+		return name.toLowerCase().replace(/\s+/g, "-");
 	}
+	static FONT_SIZE_MULTIPLIERS = {
+		xs: .85,
+		sm: .925,
+		md: 1,
+		lg: 1.1,
+		xl: 1.25
+	};
+	static SCALE_VALUES = {
+		xs: .85,
+		sm: .925,
+		md: 1,
+		lg: 1.1,
+		xl: 1.25
+	};
+	static DEFAULT_FONT_SIZES = {
+		xs: "0.75rem",
+		sm: "0.875rem",
+		md: "1rem",
+		lg: "1.125rem",
+		xl: "1.25rem"
+	};
 	getTheme() {
 		const index = this.getThemeIndex();
 		const list = this.alepha.store.get(alephaThemeListAtom);
-		return list[index] || list[0] || defaultTheme;
+		const base = list[index] || list[0] || defaultTheme;
+		const overrides = this.getThemeOverrides();
+		if (!overrides.primaryColor && !overrides.radius && !overrides.fontFamily && !overrides.fontSize && !overrides.scale) return base;
+		const merged = {
+			...base,
+			...overrides.primaryColor && { primaryColor: overrides.primaryColor },
+			...overrides.radius && { defaultRadius: overrides.radius },
+			...overrides.fontFamily && { fontFamily: overrides.fontFamily },
+			...overrides.scale && overrides.scale !== "md" && { scale: ThemeProvider.SCALE_VALUES[overrides.scale] ?? 1 }
+		};
+		if (overrides.fontSize && overrides.fontSize !== "md") {
+			const multiplier = ThemeProvider.FONT_SIZE_MULTIPLIERS[overrides.fontSize] ?? 1;
+			const baseSizes = base.fontSizes ?? ThemeProvider.DEFAULT_FONT_SIZES;
+			merged.fontSizes = Object.fromEntries(Object.entries(baseSizes).map(([key, val]) => [key, `${(Number.parseFloat(String(val)) * multiplier).toFixed(4)}rem`]));
+		}
+		return merged;
+	}
+	setThemeOverrides(overrides) {
+		this.overridesCookie.set(overrides);
+		this.alepha.store.set(alephaThemeOverridesAtom, overrides);
+		if (!this.alepha.isBrowser()) return;
+		this.alepha.inject(BrowserHeadProvider).refreshGlobalHead();
+	}
+	getThemeOverrides() {
+		try {
+			return this.overridesCookie.get() ?? this.alepha.store.get(alephaThemeOverridesAtom) ?? {};
+		} catch {
+			return this.alepha.store.get(alephaThemeOverridesAtom) ?? {};
+		}
+	}
+	resetThemeOverrides() {
+		this.setThemeOverrides({});
 	}
 	getThemeIndex() {
 		try {
@@ -307,14 +1228,21 @@ var DialogService = class {
 	*/
 	alert(options) {
 		return new Promise((resolve) => {
+			let resolved = false;
+			const done = () => {
+				if (resolved) return;
+				resolved = true;
+				resolve();
+			};
 			const modalId = this.open({
 				...options,
 				title: options?.title || "Alert",
+				onClose: done,
 				content: /* @__PURE__ */ jsx(AlertDialog, {
 					options,
 					onClose: () => {
 						this.close(modalId);
-						resolve();
+						done();
 					}
 				})
 			});
@@ -325,16 +1253,23 @@ var DialogService = class {
 	*/
 	confirm(options) {
 		return new Promise((resolve) => {
+			let resolved = false;
+			const done = (confirmed) => {
+				if (resolved) return;
+				resolved = true;
+				resolve(confirmed);
+			};
 			const modalId = this.open({
 				...options,
 				title: options?.title || "Confirm",
 				closeOnClickOutside: false,
 				closeOnEscape: false,
+				onClose: () => done(false),
 				content: /* @__PURE__ */ jsx(ConfirmDialog, {
 					options,
 					onConfirm: (confirmed) => {
 						this.close(modalId);
-						resolve(confirmed);
+						done(confirmed);
 					}
 				})
 			});
@@ -345,16 +1280,23 @@ var DialogService = class {
 	*/
 	prompt(options) {
 		return new Promise((resolve) => {
+			let resolved = false;
+			const done = (value) => {
+				if (resolved) return;
+				resolved = true;
+				resolve(value);
+			};
 			const modalId = this.open({
 				...options,
 				title: options?.title || "Input",
 				closeOnClickOutside: false,
 				closeOnEscape: false,
+				onClose: () => done(null),
 				content: /* @__PURE__ */ jsx(PromptDialog, {
 					options,
 					onSubmit: (value) => {
 						this.close(modalId);
-						resolve(value);
+						done(value);
 					}
 				})
 			});
@@ -458,20 +1400,34 @@ var UiRouter = class {
 /**
 * Hook to get and set the current theme.
 *
-* Returns a tuple with the current theme and a function to set the theme.
+* Returns a tuple with the current theme, a function to set the theme,
+* and expert mode controls for fine-grained customization.
 *
 * ```tsx
-* const [theme, setTheme] = useTheme();
+* const [theme, setTheme, expert] = useTheme();
 * ```
 */
 const useTheme = () => {
 	useStore(alephaThemeAtom);
+	useStore(alephaThemeOverridesAtom);
 	const themeProvider = useInject(ThemeProvider);
 	const theme = themeProvider.getTheme();
 	const setTheme = (theme) => {
 		themeProvider.setTheme(theme.index);
 	};
-	return [theme, setTheme];
+	return [
+		theme,
+		setTheme,
+		{
+			overrides: themeProvider.getThemeOverrides(),
+			setOverrides: (overrides) => {
+				themeProvider.setThemeOverrides(overrides);
+			},
+			resetOverrides: () => {
+				themeProvider.resetThemeOverrides();
+			}
+		}
+	];
 };
 
 //#endregion
@@ -569,16 +1525,16 @@ const AlephaMantineProvider = (props) => {
 const ui = {
 	colors: {
 		transparent: "transparent",
-		background: "var(--alepha-background)",
+		background: "var(--alepha-ground)",
 		surface: "var(--alepha-surface)",
 		elevated: "var(--alepha-elevated)",
 		border: "var(--alepha-border)"
 	},
 	sizes: { icon: {
-		xs: 14,
-		sm: 16,
-		md: 20,
-		lg: 24,
+		xs: 16,
+		sm: 20,
+		md: 24,
+		lg: 28,
 		xl: 32
 	} }
 };
@@ -592,51 +1548,13 @@ function isComponentType(param) {
 
 //#endregion
 //#region ../../src/core/components/buttons/ActionButton.tsx
-const ActionMenuItem = (props) => {
-	const { item, index } = props;
-	const router = useRouter();
-	const action = useAction({ handler: async (e) => {
-		await item.onClick?.();
-	} }, [item.onClick]);
-	if (item.type === "divider") return /* @__PURE__ */ jsx(Menu.Divider, {}, index);
-	if (item.type === "label") return /* @__PURE__ */ jsx(Menu.Label, { children: item.label }, index);
-	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsxs(Menu, {
-		trigger: "hover",
-		position: "right-start",
-		offset: 2,
-		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Menu.Item, {
-			leftSection: item.icon,
-			rightSection: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }),
-			children: item.label
-		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: item.children.map((child, childIndex) => /* @__PURE__ */ jsx(ActionMenuItem, {
-			item: child,
-			index: childIndex
-		}, childIndex)) })]
-	}, index);
-	const menuItemProps = {};
-	if (props.item.onClick) menuItemProps.onClick = action.run;
-	else if (props.item.href) Object.assign(menuItemProps, router.anchor(props.item.href));
-	return /* @__PURE__ */ jsx(Menu.Item, {
-		leftSection: item.icon,
-		onClick: item.onClick,
-		color: item.color,
-		rightSection: item.active ? /* @__PURE__ */ jsx(ThemeIcon, {
-			size: "xs",
-			variant: "transparent",
-			children: /* @__PURE__ */ jsx(IconCheck, {})
-		}) : void 0,
-		...menuItemProps,
-		children: item.label
-	}, index);
-};
 const ActionButton = (_props) => {
 	const theme = useMantineTheme();
 	const props = { ..._props };
-	const { tooltip, menu, icon, ...restProps } = props;
-	if (props.variant === "subtle" || props.variant === "outline") restProps.color ??= "gray";
+	if (props.variant === "minimal") {}
+	const { tooltip, menu, icon, iconSize, ...restProps } = props;
 	if (props.intent) {
-		if (props.intent === "none") restProps.color ??= "gray";
-		else if (props.intent === "primary") restProps.color ??= theme.primaryColor;
+		if (props.intent === "primary") restProps.color ??= theme.primaryColor;
 		else if (props.intent === "success") {
 			restProps.c ??= "white";
 			restProps.color ??= "green";
@@ -651,10 +1569,11 @@ const ActionButton = (_props) => {
 	}
 	if (props.icon) {
 		const sizes = ui.sizes.icon;
-		const icon = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: sizes[props.size || "md"] }) : /* @__PURE__ */ jsx("span", { children: props.icon });
+		const iconSize = props.iconSize ?? sizes[props.size || "sm"];
+		const icon = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: iconSize }) : /* @__PURE__ */ jsx("span", { children: props.icon });
 		if (!props.children) {
 			restProps.children = Children.only(icon);
-			restProps.px ??= "xs";
+			restProps.p ??= 8;
 		} else restProps.leftSection = icon;
 	}
 	if (props.leftSection && !props.children) restProps.px ??= "xs";
@@ -677,6 +1596,7 @@ const ActionButton = (_props) => {
 			children: /* @__PURE__ */ jsx(ActionButton, {
 				px: "xs",
 				...rest,
+				"aria-label": typeof children === "string" ? children : void 0,
 				tooltip,
 				menu,
 				children: leftSection
@@ -833,7 +1753,7 @@ const ActionClickButton = ({ preventDefault, ...props }) => {
 * Action for navigation with active state support.
 */
 const ActionNavigationButton = (props) => {
-	const { active: options, classNameActive, variantActive, propsActive, routerGoOptions, onClick: propsOnClick, anchor, ...buttonProps } = props;
+	const { active: options, classNameActive, variantActive, propsActive, routerGoOptions, onClick: propsOnClick, anchorProps: buttonAnchorProps, anchor, ...buttonProps } = props;
 	const router = useRouter();
 	const { isPending, isActive } = useActive(options ? {
 		href: props.href,
@@ -847,11 +1767,11 @@ const ActionNavigationButton = (props) => {
 	};
 	const className = buttonProps.className || "";
 	if (isActive && options !== false && classNameActive) buttonProps.className = `${className} ${classNameActive}`.trim();
-	if (props.anchorProps || anchor) return /* @__PURE__ */ jsx(Anchor, {
+	if (buttonAnchorProps || anchor) return /* @__PURE__ */ jsx(Anchor, {
 		component: "a",
 		...anchorProps,
 		...buttonProps,
-		...props.anchorProps,
+		...buttonAnchorProps,
 		onClick: combinedOnClick,
 		children: props.children
 	});
@@ -874,6 +1794,38 @@ const ActionHrefButton = (props) => {
 		children: props.children
 	});
 };
+const ActionMenuItem = (props) => {
+	const { item, index } = props;
+	const router = useRouter();
+	const action = useAction({ handler: async (e) => {
+		await item.onClick?.();
+	} }, [item.onClick]);
+	if (item.type === "divider") return /* @__PURE__ */ jsx(Menu.Divider, {}, index);
+	if (item.type === "label") return /* @__PURE__ */ jsx(Menu.Label, { children: item.label }, index);
+	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsxs(Menu, {
+		trigger: "hover",
+		position: "right-start",
+		offset: 2,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Menu.Item, {
+			leftSection: item.icon,
+			rightSection: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }),
+			children: item.label
+		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: item.children.map((child, childIndex) => /* @__PURE__ */ jsx(ActionMenuItem, {
+			item: child,
+			index: childIndex
+		}, childIndex)) })]
+	}, index);
+	const menuItemProps = {};
+	if (props.item.onClick) menuItemProps.onClick = action.run;
+	else if (props.item.href) Object.assign(menuItemProps, router.anchor(props.item.href));
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		leftSection: item.icon ?? (item.active ? /* @__PURE__ */ jsx(IconCheck, { size: ui.sizes.icon.sm }) : /* @__PURE__ */ jsx(Flex$1, { w: ui.sizes.icon.sm })),
+		onClick: item.onClick,
+		color: item.color,
+		...menuItemProps,
+		children: item.label
+	}, index);
+};
 
 //#endregion
 //#region ../../src/core/components/buttons/BurgerButton.tsx
@@ -926,11 +1878,11 @@ const DarkModeButton = (props) => {
 	const toggleColorScheme = () => {
 		setColorScheme((document.documentElement.getAttribute("data-mantine-color-scheme") ?? "light") === "dark" ? "light" : "dark");
 	};
-	const size = props.size ?? "md";
-	const iconSize = ui.sizes.icon[size] ?? ui.sizes.icon.md;
+	const size = props.size ?? "sm";
+	const iconSize = ui.sizes.icon[size] ?? ui.sizes.icon.sm;
 	return /* @__PURE__ */ jsx(ActionButton, {
 		onClick: toggleColorScheme,
-		variant: props.variant ?? "subtle",
+		variant: props.variant ?? "default",
 		size,
 		"aria-label": "Toggle color scheme",
 		icon: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconSun, {
@@ -949,7 +1901,7 @@ const DarkModeButton = (props) => {
 const LanguageButton = (props) => {
 	const i18n = useI18n();
 	return /* @__PURE__ */ jsx(ActionButton, {
-		variant: "subtle",
+		variant: "default",
 		icon: IconLanguage,
 		menu: { items: i18n.languages.map((lang) => ({
 			label: i18n.tr(lang),
@@ -968,8 +1920,7 @@ const OmnibarButton = (props) => {
 	if (props.collapsed) return /* @__PURE__ */ jsx(ActionButton, {
 		variant: "subtle",
 		onClick: spotlight.open,
-		radius: "md",
-		icon: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
+		icon: IconSearch,
 		tooltip: {
 			label: "Search",
 			position: "right"
@@ -1006,20 +1957,258 @@ const OmnibarButton = (props) => {
 	});
 };
 
+//#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/components/buttons/ThemeExpertModal.tsx
+const MANTINE_COLORS = [
+	"red",
+	"pink",
+	"grape",
+	"violet",
+	"indigo",
+	"blue",
+	"cyan",
+	"teal",
+	"green",
+	"lime",
+	"yellow",
+	"orange"
+];
+const RADIUS_OPTIONS = [
+	{
+		label: "xs",
+		value: "xs"
+	},
+	{
+		label: "sm",
+		value: "sm"
+	},
+	{
+		label: "md",
+		value: "md"
+	},
+	{
+		label: "lg",
+		value: "lg"
+	},
+	{
+		label: "xl",
+		value: "xl"
+	}
+];
+const SIZE_OPTIONS = [
+	{
+		label: "xs",
+		value: "xs"
+	},
+	{
+		label: "sm",
+		value: "sm"
+	},
+	{
+		label: "md",
+		value: "md"
+	},
+	{
+		label: "lg",
+		value: "lg"
+	},
+	{
+		label: "xl",
+		value: "xl"
+	}
+];
+const FONT_OPTIONS = [
+	{
+		label: "System",
+		value: ""
+	},
+	{
+		label: "Inter",
+		value: "Inter, sans-serif"
+	},
+	{
+		label: "Mono",
+		value: "ui-monospace, SFMono-Regular, Menlo, monospace"
+	},
+	{
+		label: "Serif",
+		value: "Georgia, 'Times New Roman', serif"
+	}
+];
+const ThemeExpertModal = () => {
+	const [, , expert] = useTheme();
+	const dialog = useDialog();
+	const mantineTheme = useMantineTheme();
+	const { overrides, setOverrides } = expert;
+	const currentColor = overrides.primaryColor || mantineTheme.primaryColor;
+	const currentRadius = overrides.radius || mantineTheme.defaultRadius || "md";
+	const currentFont = overrides.fontFamily || "";
+	const currentFontSize = overrides.fontSize || "md";
+	const currentScale = overrides.scale || "md";
+	const updateOverrides = (patch) => {
+		setOverrides({
+			...overrides,
+			...patch
+		});
+	};
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		direction: "column",
+		gap: "lg",
+		children: [
+			/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					fw: 500,
+					size: "sm",
+					children: "Primary Color"
+				}), /* @__PURE__ */ jsx(SimpleGrid, {
+					cols: 6,
+					spacing: "xs",
+					children: MANTINE_COLORS.map((color) => /* @__PURE__ */ jsx(Flex$1, {
+						justify: "center",
+						children: /* @__PURE__ */ jsx(ColorSwatch, {
+							color: mantineTheme.colors[color]?.[6] ?? color,
+							onClick: () => updateOverrides({ primaryColor: color }),
+							style: { cursor: "pointer" },
+							size: 32,
+							children: currentColor === color && /* @__PURE__ */ jsx(IconCheck, {
+								size: 14,
+								color: "white"
+							})
+						})
+					}, color))
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					fw: 500,
+					size: "sm",
+					children: "Border Radius"
+				}), /* @__PURE__ */ jsx(Flex$1, {
+					gap: "xs",
+					children: RADIUS_OPTIONS.map((opt) => /* @__PURE__ */ jsx(ActionButton, {
+						variant: String(currentRadius) === opt.value ? "filled" : "default",
+						size: "xs",
+						flex: 1,
+						onClick: () => updateOverrides({ radius: opt.value }),
+						children: opt.label
+					}, opt.value))
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					fw: 500,
+					size: "sm",
+					children: "Font Family"
+				}), /* @__PURE__ */ jsx(Select, {
+					data: FONT_OPTIONS,
+					value: currentFont,
+					onChange: (value) => updateOverrides({ fontFamily: value ?? "" }),
+					allowDeselect: false
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					fw: 500,
+					size: "sm",
+					children: "Font Size"
+				}), /* @__PURE__ */ jsx(Flex$1, {
+					gap: "xs",
+					children: SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(ActionButton, {
+						variant: currentFontSize === opt.value ? "filled" : "default",
+						size: "xs",
+						flex: 1,
+						onClick: () => updateOverrides({ fontSize: opt.value }),
+						children: opt.label
+					}, opt.value))
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					fw: 500,
+					size: "sm",
+					children: "Scale"
+				}), /* @__PURE__ */ jsx(Flex$1, {
+					gap: "xs",
+					children: SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(ActionButton, {
+						variant: currentScale === opt.value ? "filled" : "default",
+						size: "xs",
+						flex: 1,
+						onClick: () => updateOverrides({ scale: opt.value }),
+						children: opt.label
+					}, opt.value))
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				justify: "space-between",
+				children: [/* @__PURE__ */ jsx(ActionButton, {
+					variant: "subtle",
+					color: "red",
+					onClick: () => expert.resetOverrides(),
+					children: "Reset"
+				}), /* @__PURE__ */ jsx(ActionButton, {
+					variant: "default",
+					px: "xl",
+					onClick: () => dialog.close(),
+					children: "OK"
+				})]
+			})
+		]
+	});
+};
+
 //#endregion
 //#region ../../src/core/components/buttons/ThemeButton.tsx
 const ThemeButton = (props) => {
+	const { expert, ...actionProps } = props;
 	const [theme, setTheme] = useTheme();
 	const themeList = useStore(alephaThemeListAtom)[0];
+	const dialog = useDialog();
+	const items = themeList.map((it, index) => ({
+		label: it.name,
+		onClick: () => setTheme({ index }),
+		active: theme.name === it.name
+	}));
+	if (expert) items.push({ type: "divider" }, {
+		label: "Customize...",
+		onClick: () => {
+			dialog.open({
+				title: "Customize Theme",
+				content: /* @__PURE__ */ jsx(ThemeExpertModal, {})
+			});
+		}
+	});
 	return /* @__PURE__ */ jsx(ActionButton, {
-		variant: "subtle",
+		variant: "default",
 		icon: IconPalette,
-		menu: { items: themeList.map((it, index) => ({
-			label: it.name,
-			onClick: () => setTheme({ index }),
-			active: theme.name === it.name
-		})) },
-		...props
+		menu: { items },
+		...actionProps
 	});
 };
 
@@ -1030,8 +2219,7 @@ const ToggleSidebarButton = (props) => {
 	return /* @__PURE__ */ jsx(ActionButton, {
 		icon: sidebar.collapsed ? IconLayoutSidebarRightCollapse : IconLayoutSidebarLeftCollapse,
 		visibleFrom: "md",
-		variant: "subtle",
-		size: "md",
+		variant: "default",
 		onClick: () => {
 			setSidebar({
 				...sidebar,
@@ -1048,99 +2236,103 @@ const ToggleSidebarButton = (props) => {
 
 //#endregion
 //#region ../../src/core/components/data/DetailDrawer.tsx
-const DetailDrawer = ({ opened, onClose, title, subtitle, status, actions, tabs, children, loading, size = "xl", defaultTab }) => /* @__PURE__ */ jsxs(Drawer, {
-	opened,
-	onClose,
-	position: "right",
-	size,
-	withCloseButton: false,
-	padding: 0,
-	children: [/* @__PURE__ */ jsxs(Flex$1, {
-		p: "md",
-		justify: "space-between",
-		align: "flex-start",
-		style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
+const DetailDrawer = (props) => {
+	const { opened, onClose, title, subtitle, status, actions, tabs, children, loading, size = "xl", defaultTab } = props;
+	return /* @__PURE__ */ jsxs(Drawer, {
+		opened,
+		onClose,
+		position: "right",
+		size,
+		withCloseButton: false,
+		padding: 0,
 		children: [/* @__PURE__ */ jsxs(Flex$1, {
-			direction: "column",
-			gap: 2,
-			style: {
-				minWidth: 0,
-				flex: 1
-			},
+			p: "md",
+			justify: "space-between",
+			align: "flex-start",
+			style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
 			children: [/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: 2,
+				style: {
+					minWidth: 0,
+					flex: 1
+				},
+				children: [/* @__PURE__ */ jsxs(Flex$1, {
+					gap: "xs",
+					align: "center",
+					children: [status && /* @__PURE__ */ jsx(Flex$1, {
+						w: 8,
+						h: 8,
+						style: {
+							borderRadius: "50%",
+							backgroundColor: status.active ? "var(--mantine-color-green-6)" : "var(--mantine-color-red-6)",
+							flexShrink: 0
+						}
+					}), /* @__PURE__ */ jsx(Text$1, {
+						size: "lg",
+						fw: 600,
+						truncate: true,
+						children: title
+					})]
+				}), subtitle && /* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					c: "dimmed",
+					truncate: true,
+					children: subtitle
+				})]
+			}), /* @__PURE__ */ jsxs(Flex$1, {
 				gap: "xs",
 				align: "center",
-				children: [status && /* @__PURE__ */ jsx(Flex$1, {
-					w: 8,
-					h: 8,
-					style: {
-						borderRadius: "50%",
-						backgroundColor: status.active ? "var(--mantine-color-green-6)" : "var(--mantine-color-red-6)",
-						flexShrink: 0
-					}
-				}), /* @__PURE__ */ jsx(Text$1, {
-					size: "lg",
-					fw: 600,
-					truncate: true,
-					children: title
+				style: { flexShrink: 0 },
+				children: [actions && actions.length > 0 && /* @__PURE__ */ jsx(ActionButton, {
+					variant: "default",
+					size: "xs",
+					menu: {
+						items: actions,
+						position: "bottom-end",
+						width: 200
+					},
+					children: "Actions"
+				}), /* @__PURE__ */ jsx(ActionButton, {
+					variant: "subtle",
+					size: "xs",
+					c: "dimmed",
+					onClick: onClose,
+					children: "Close"
 				})]
-			}), subtitle && /* @__PURE__ */ jsx(Text$1, {
-				size: "sm",
-				c: "dimmed",
-				truncate: true,
-				children: subtitle
 			})]
-		}), /* @__PURE__ */ jsxs(Flex$1, {
-			gap: "xs",
+		}), loading ? /* @__PURE__ */ jsx(Flex$1, {
+			flex: 1,
+			justify: "center",
 			align: "center",
-			style: { flexShrink: 0 },
-			children: [actions && actions.length > 0 && /* @__PURE__ */ jsx(ActionButton, {
-				variant: "default",
-				size: "xs",
-				menu: {
-					items: actions,
-					position: "bottom-end",
-					width: 200
-				},
-				children: "Actions"
-			}), /* @__PURE__ */ jsx(ActionButton, {
-				variant: "subtle",
-				size: "xs",
-				c: "dimmed",
-				onClick: onClose,
-				children: "Close"
-			})]
-		})]
-	}), loading ? /* @__PURE__ */ jsx(Flex$1, {
-		flex: 1,
-		justify: "center",
-		align: "center",
-		py: "xl",
-		children: /* @__PURE__ */ jsx(Loader, {})
-	}) : tabs && tabs.length > 0 ? /* @__PURE__ */ jsxs(Tabs, {
-		defaultValue: defaultTab || tabs[0].value,
-		children: [/* @__PURE__ */ jsx(Tabs.List, {
-			px: "md",
-			children: tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Tab, {
+			py: "xl",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		}) : tabs && tabs.length > 0 ? /* @__PURE__ */ jsxs(Tabs, {
+			defaultValue: defaultTab || tabs[0].value,
+			children: [/* @__PURE__ */ jsx(Tabs.List, {
+				px: "md",
+				children: tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Tab, {
+					value: tab.value,
+					leftSection: tab.icon ? /* @__PURE__ */ jsx(tab.icon, { size: 14 }) : void 0,
+					children: tab.label
+				}, tab.value))
+			}), tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Panel, {
 				value: tab.value,
-				leftSection: tab.icon ? /* @__PURE__ */ jsx(tab.icon, { size: 14 }) : void 0,
-				children: tab.label
-			}, tab.value))
-		}), tabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Panel, {
-			value: tab.value,
+				p: "md",
+				children: tab.content
+			}, tab.value))]
+		}) : /* @__PURE__ */ jsx(Flex$1, {
+			direction: "column",
 			p: "md",
-			children: tab.content
-		}, tab.value))]
-	}) : /* @__PURE__ */ jsx(Flex$1, {
-		direction: "column",
-		p: "md",
-		children
-	})]
-});
+			children
+		})]
+	});
+};
 
 //#endregion
 //#region ../../src/core/components/data/DetailList.tsx
-const DetailList = ({ items, columns = 1 }) => {
+const DetailList = (props) => {
+	const { items, columns = 1 } = props;
 	return /* @__PURE__ */ jsx(Grid, {
 		gutter: "xs",
 		children: items.filter((item) => !item.hidden).map((item) => /* @__PURE__ */ jsx(Grid.Col, {
@@ -1219,7 +2411,7 @@ const StatCards = ({ items }) => /* @__PURE__ */ jsx(Flex$1, {
 //#endregion
 //#region ../../src/core/components/Flex.tsx
 const Flex = forwardRef((props, ref) => {
-	const { fill, center, centerX, centerY, col, ...rest } = props;
+	const { fill, center, centerX, centerY, col, ground, surface, elevated, rounded, bordered, borderedTop, borderedBottom, shadowed, overflow, ...rest } = props;
 	if (fill) rest.flex ??= 1;
 	if (col) rest.direction ??= "column";
 	if (center) {
@@ -1228,6 +2420,21 @@ const Flex = forwardRef((props, ref) => {
 	}
 	if (centerX) rest.justify ??= "center";
 	if (centerY) rest.align ??= "center";
+	if (ground) rest.bg = "var(--alepha-ground)";
+	else if (surface) rest.bg = "var(--alepha-surface)";
+	else if (elevated) rest.bg = "var(--alepha-elevated)";
+	if (rounded) rest.bdrs = rounded === true ? "md" : rounded;
+	if (bordered) rest.bd = "1px solid var(--alepha-border)";
+	if (borderedTop) rest.style = {
+		borderTop: "1px solid var(--alepha-border)",
+		...rest.style ?? {}
+	};
+	if (borderedBottom) rest.style = {
+		borderBottom: "1px solid var(--alepha-border)",
+		...rest.style ?? {}
+	};
+	if (shadowed) rest.className = `${rest.className ?? ""} shadow-${shadowed === true ? "md" : shadowed}`.trim();
+	if (overflow) rest.className = `${rest.className ?? ""} overflow-auto`.trim();
 	return /* @__PURE__ */ jsx(Flex$1, {
 		ref,
 		...rest
@@ -1251,6 +2458,7 @@ const AppBar = (props) => {
 		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 === "theme") return /* @__PURE__ */ jsx(ThemeButton, { ...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);
@@ -1364,7 +2572,8 @@ const AppBar = (props) => {
 * Pages should define a `label` in their `$page()` options for best results.
 * Falls back to the page name converted to Title Case.
 */
-const Breadcrumb = ({ home = "Home", separator, size = "sm", ...groupProps }) => {
+const Breadcrumb = (props) => {
+	const { home = "Home", separator, size = "sm", ...groupProps } = props;
 	const state = useRouterState();
 	const router = useRouter();
 	const crumbs = [];
@@ -1419,11 +2628,175 @@ const Container = forwardRef((props, ref) => {
 });
 Container.displayName = "Container";
 
+//#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/components/Text.tsx
+const INTENT_COLORS = {
+	primary: "blue",
+	info: "cyan",
+	success: "green",
+	warning: "yellow",
+	danger: "red"
+};
+const Text = forwardRef((props, ref) => {
+	const { intent, bold, italic, light, muted, small, uppercase, capitalize, center, monospace, title, ...rest } = props;
+	if (intent) rest.c ??= INTENT_COLORS[intent];
+	if (bold) rest.fw ??= 700;
+	if (light) rest.fw ??= 300;
+	if (italic) rest.fs ??= "italic";
+	if (muted) rest.c ??= "dimmed";
+	if (small) rest.size ??= "xs";
+	if (uppercase) rest.tt ??= "uppercase";
+	if (capitalize) rest.tt ??= "capitalize";
+	if (center) rest.ta ??= "center";
+	if (monospace) rest.ff ??= "monospace";
+	if (title) rest.size ??= "xl";
+	return /* @__PURE__ */ jsx(Text$1, {
+		ref,
+		...rest
+	});
+});
+Text.displayName = "Text";
+
+//#endregion
+//#region ../../src/core/components/layout/SidebarCollapsedItem.tsx
+const SidebarCollapsedItem = (props) => {
+	const router = useRouter();
+	const handleItemClick = () => {
+		props.onItemClick?.(props.item);
+		props.item.onClick?.();
+	};
+	const hasChildren = props.item.children && props.item.children.length > 0;
+	const menu = hasChildren ? {
+		on: "hover",
+		position: "right",
+		menuProps: {
+			arrowPosition: "center",
+			arrowSize: 10,
+			withArrow: true
+		},
+		items: [{
+			type: "label",
+			label: props.item.label
+		}, ...props.item.children.filter((child) => !child.can || child.can()).map((child) => ({
+			label: child.label,
+			icon: renderIcon(child.icon, ui.sizes.icon.sm),
+			href: child.href,
+			active: child.href ? router.isActive(child.href, { startWith: child.activeStartsWith }) : void 0
+		}))]
+	} : void 0;
+	return /* @__PURE__ */ jsx(Flex, {
+		w: "100%",
+		justify: "center",
+		pos: "relative",
+		children: /* @__PURE__ */ jsx(ActionButton, {
+			size: props.item.theme?.size ?? props.theme.button?.size ?? (props.level === 0 ? "sm" : "xs"),
+			bd: 0,
+			variant: "default",
+			propsActive: { variant: "outline" },
+			tooltip: hasChildren ? void 0 : {
+				label: props.item.label,
+				position: "right"
+			},
+			onClick: hasChildren ? void 0 : handleItemClick,
+			icon: renderIcon(props.item.icon, ui.sizes.icon.sm) ?? /* @__PURE__ */ jsx(IconSquareRounded, { size: ui.sizes.icon.sm }),
+			href: hasChildren ? void 0 : props.item.href,
+			target: hasChildren ? void 0 : props.item.target,
+			menu,
+			...props.item.actionProps
+		})
+	});
+};
+
+//#endregion
+//#region ../../src/core/components/layout/SidebarItem.tsx
+const SidebarItem = (props) => {
+	const maxLevel = 2;
+	const router = useRouter();
+	const isActive = useCallback((item) => {
+		if (!item.children) return false;
+		for (const child of item.children) {
+			if (child.href) {
+				if (router.isActive(child.href)) return true;
+			}
+			if (isActive(child)) return true;
+		}
+		return false;
+	}, []);
+	const [isOpen, setIsOpen] = useState(isActive(props.item));
+	useEvents({ "react:transition:end": () => {
+		if (isActive(props.item)) setIsOpen(true);
+	} }, []);
+	if (props.level > maxLevel) return null;
+	const handleItemClick = (e) => {
+		if (!props.item.target) e.preventDefault();
+		if (props.item.children && props.item.children.length > 0) setIsOpen(!isOpen);
+		else {
+			props.onItemClick?.(props.item);
+			props.item.onClick?.();
+		}
+	};
+	return /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		ps: props.level === 0 ? 0 : 32,
+		pos: "relative",
+		children: [/* @__PURE__ */ jsx(ActionButton, {
+			w: "100%",
+			justify: "space-between",
+			href: props.item.href,
+			target: props.item.target,
+			size: props.item.theme?.size ?? props.theme.button?.size ?? (props.level === 0 ? "sm" : "xs"),
+			bd: 0,
+			fw: "normal",
+			variant: "default",
+			propsActive: { variant: "outline" },
+			radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
+			onClick: handleItemClick,
+			leftSection: /* @__PURE__ */ jsxs(Flex, {
+				w: "100%",
+				align: "center",
+				gap: "sm",
+				children: [renderIcon(props.item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Flex, {
+					direction: "column",
+					children: /* @__PURE__ */ jsx(Flex, { children: props.item.label })
+				})]
+			}),
+			rightSection: props.item.children ? /* @__PURE__ */ jsx(Flex, { children: isOpen ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }) }) : props.item.rightSection,
+			...props.item.actionProps
+		}), props.item.children && isOpen && /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			"data-parent-level": props.level,
+			gap: 2,
+			py: 2,
+			children: [/* @__PURE__ */ jsx(Flex, { style: {
+				position: "absolute",
+				width: 1,
+				background: "linear-gradient(to bottom, transparent, var(--mantine-color-default-border), transparent)",
+				top: 48,
+				left: 20 + 32 * props.level,
+				bottom: 16
+			} }), props.item.children.filter((child) => !child.can || child.can()).map((child, index) => /* @__PURE__ */ jsx(SidebarItem, {
+				item: child,
+				level: props.level + 1,
+				onItemClick: props.onItemClick,
+				theme: props.theme
+			}, index))]
+		})]
+	});
+};
+
 //#endregion
 //#region ../../src/core/components/layout/Sidebar.tsx
 const Sidebar = (props) => {
 	const router = useRouter();
-	const { onItemClick } = props;
 	const divider = (key, fill, collapsed) => {
 		return /* @__PURE__ */ jsx(Flex, {
 			h: 1,
@@ -1441,6 +2814,9 @@ const Sidebar = (props) => {
 			if (item.type === "divider") return divider(key, item.fill, collapsed);
 			if (item.type === "search") return /* @__PURE__ */ jsx(Flex, {
 				mb: "xs",
+				w: "100%",
+				justify: "center",
+				pos: "relative",
 				children: /* @__PURE__ */ jsx(OmnibarButton, { collapsed })
 			}, key);
 			if (item.type === "toggle") return /* @__PURE__ */ jsx(ToggleSidebarButton, {}, key);
@@ -1448,7 +2824,7 @@ const Sidebar = (props) => {
 				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);
+				if (collapsed) return /* @__PURE__ */ jsx(Fragment$1, { children: item.children?.map((child, index) => renderNode(child, `s${key}-${index}`, collapsed)) }, key);
 				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Flex, {
 					mt: "md",
 					align: "center",
@@ -1471,13 +2847,13 @@ const Sidebar = (props) => {
 		if (collapsed) return /* @__PURE__ */ jsx(SidebarCollapsedItem, {
 			item,
 			level: 0,
-			onItemClick,
+			onItemClick: props.onItemClick,
 			theme: props.theme ?? {}
 		}, key);
 		return /* @__PURE__ */ jsx(SidebarItem, {
 			item,
 			level: 0,
-			onItemClick,
+			onItemClick: props.onItemClick,
 			theme: props.theme ?? {}
 		}, key);
 	};
@@ -1498,7 +2874,7 @@ const Sidebar = (props) => {
 		return [];
 	};
 	const padding = "md";
-	const gap = props.items ? props.gap ?? 4 : "xs";
+	const gap = props.items ? props.gap ?? 8 : "xs";
 	const menu = useMemo(() => getSidebarNodes(), [props.items, props.autoPopulateMenu]);
 	const renderSidebar = (collapsed) => /* @__PURE__ */ jsxs(Flex, {
 		flex: 1,
@@ -1540,117 +2916,6 @@ const Sidebar = (props) => {
 	})] });
 	return renderSidebar(false);
 };
-const SidebarItem = (props) => {
-	const { item, level } = props;
-	const maxLevel = 2;
-	const router = useRouter();
-	const isActive = useCallback((item) => {
-		if (!item.children) return false;
-		for (const child of item.children) {
-			if (child.href) {
-				if (router.isActive(child.href)) return true;
-			}
-			if (isActive(child)) return true;
-		}
-		return false;
-	}, []);
-	const [isOpen, setIsOpen] = useState(isActive(item));
-	useEvents({ "react:transition:end": () => {
-		if (isActive(item)) setIsOpen(true);
-	} }, []);
-	if (level > maxLevel) return null;
-	const handleItemClick = (e) => {
-		if (!props.item.target) e.preventDefault();
-		if (item.children && item.children.length > 0) setIsOpen(!isOpen);
-		else {
-			props.onItemClick?.(item);
-			item.onClick?.();
-		}
-	};
-	return /* @__PURE__ */ jsxs(Flex, {
-		direction: "column",
-		ps: level === 0 ? 0 : 32,
-		pos: "relative",
-		children: [/* @__PURE__ */ jsx(ActionButton, {
-			w: "100%",
-			justify: "space-between",
-			href: props.item.href,
-			target: props.item.target,
-			size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
-			bd: 0,
-			fw: "normal",
-			variant: "default",
-			propsActive: {
-				variant: "outline",
-				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
@@ -1691,13 +2956,16 @@ const DashboardShell = (props) => {
 	const fHeight = props.footerHeight ?? 24;
 	const headerHeight = hasAppBar ? hHeight : 0;
 	const footerHeight = footerElement ? fHeight : 0;
+	const navbarWidth = collapsed ? collapsedWidth : expandedWidth;
+	const mainContent = props.children ?? /* @__PURE__ */ jsx(NestedView, {});
 	return /* @__PURE__ */ jsxs(AppShell, {
 		layout: "alt",
 		w: "100%",
+		h: "100vh",
 		flex: 1,
 		header: hasAppBar ? { height: hHeight } : void 0,
 		navbar: hasSidebar ? {
-			width: { base: collapsed ? collapsedWidth : expandedWidth },
+			width: { base: navbarWidth },
 			breakpoint: "md",
 			collapsed: { mobile: sidebar.closed }
 		} : void 0,
@@ -1712,13 +2980,12 @@ const DashboardShell = (props) => {
 				})
 			}),
 			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
+						children: props.navbarHeader({ collapsed })
 					}) : null,
 					/* @__PURE__ */ jsx(Sidebar, {
 						...props.sidebarProps ?? {},
@@ -1732,53 +2999,30 @@ const DashboardShell = (props) => {
 				]
 			}),
 			/* @__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
+				display: "flex",
+				bg: "var(--alepha-ground)",
+				pos: "relative",
+				h: props.fill ? "100%" : "inherit",
+				...props.appShellMainProps,
+				children: props.container ? /* @__PURE__ */ jsx(Container, {
+					...typeof props.container === "boolean" ? {} : props.container,
+					children: mainContent
+				}) : mainContent
+			}),
+			footerElement && /* @__PURE__ */ jsx(AppShell.Footer, {
+				...props.appShellFooterProps,
+				children: footerElement
+			})
+		]
 	});
-});
-Text.displayName = "Text";
+};
 
 //#endregion
 //#region ../../src/core/form/utils/parseInput.ts
 const parseInput = (props, form) => {
 	const disabled = false;
 	const id = props.input.props.id;
-	const label = props.title ?? ("title" in props.input.schema && typeof props.input.schema.title === "string" ? props.input.schema.title : void 0) ?? prettyName(props.input.path);
+	const label = props.label ?? ("title" in props.input.schema && typeof props.input.schema.title === "string" ? props.input.schema.title : void 0) ?? prettyName(props.input.path);
 	const description = props.description ?? ("description" in props.input.schema && typeof props.input.schema.description === "string" ? props.input.schema.description : void 0);
 	const error = form.error && form.error instanceof TypeBoxError ? form.error.value.message : void 0;
 	const icon = !props.icon ? getDefaultIcon({
@@ -1786,17 +3030,20 @@ const parseInput = (props, form) => {
 		format: props.input.schema && "format" in props.input.schema && typeof props.input.schema.format === "string" ? props.input.schema.format : void 0,
 		name: props.input.props.name,
 		isEnum: props.input.schema && "enum" in props.input.schema && Boolean(props.input.schema.enum),
-		isArray: props.input.schema && "type" in props.input.schema && props.input.schema.type === "array"
-	}) : isValidElement(props.icon) ? props.icon : createElement(props.icon, { size: ui.sizes.icon.md });
+		isArray: props.input.schema && "type" in props.input.schema && props.input.schema.type === "array",
+		size: props.size
+	}) : isValidElement(props.icon) ? props.icon : createElement(props.icon, { size: ui.sizes.icon.sm });
 	const format = props.input.schema && "format" in props.input.schema && typeof props.input.schema.format === "string" ? props.input.schema.format : void 0;
 	const required = props.input.required;
 	const schema = props.input.schema;
+	const testId = props.input.props?.["data-testid"];
 	const inputProps = {
 		label,
 		description,
 		error,
 		required,
-		disabled
+		disabled,
+		...testId ? { "data-testid": testId } : {}
 	};
 	if ("minLength" in schema && typeof schema.minLength === "number") inputProps.minLength = schema.minLength;
 	if ("maxLength" in schema && typeof schema.maxLength === "number") inputProps.maxLength = schema.maxLength;
@@ -1821,8 +3068,8 @@ const useArrayItems = (input) => {
 	const alepha = useAlepha();
 	const keyCounter = useRef(0);
 	const [items, setItemsState] = useState(() => {
-		const defaultValue = input?.props?.defaultValue;
-		if (Array.isArray(defaultValue)) return defaultValue.map((value) => ({
+		const initial = input?.initialValue;
+		if (Array.isArray(initial)) return initial.map((value) => ({
 			key: keyCounter.current++,
 			value
 		}));
@@ -1848,22 +3095,9 @@ const useArrayItems = (input) => {
 		if (!input?.form) return;
 		const formId = input.form.id;
 		const fieldPath = input.path;
-		const listeners = [alepha.events.on("form:reset", (event) => {
-			if (event.id === formId) {
-				const defaultValue = input.props?.defaultValue;
-				keyCounter.current = 0;
-				if (Array.isArray(defaultValue)) setItemsState(defaultValue.map((value) => ({
-					key: keyCounter.current++,
-					value
-				})));
-				else setItemsState([]);
-			}
-		}), alepha.events.on("form:change", (event) => {
+		return alepha.events.on("form:change", (event) => {
 			if (event.id === formId && event.path === fieldPath) syncFromFormValue(event.value);
-		})];
-		return () => {
-			for (const unsub of listeners) unsub();
-		};
+		});
 	}, [
 		alepha,
 		input,
@@ -1888,10 +3122,10 @@ const createArrayItemInput = (parentInput, itemSchema, index, _itemKey, value, o
 		path: `${parentInput.path}/${index}`,
 		required: false,
 		form: parentInput.form,
+		initialValue: value,
 		props: {
 			id: `${parentInput.props.id}-${index}`,
-			name: `${parentInput.props.name}[${index}]`,
-			defaultValue: value
+			name: `${parentInput.props.name}[${index}]`
 		},
 		set: onValueChange
 	};
@@ -1906,10 +3140,10 @@ const createArrayItemFieldInput = (parentInput, itemSchema, fieldName, index, _i
 		path: `${parentInput.path}/${index}/${fieldName}`,
 		required: itemSchema.required?.includes(fieldName) ?? false,
 		form: parentInput.form,
+		initialValue: itemValue?.[fieldName],
 		props: {
 			id: `${parentInput.props.id}-${index}-${fieldName}`,
-			name: `${parentInput.props.name}[${index}].${fieldName}`,
-			defaultValue: itemValue?.[fieldName]
+			name: `${parentInput.props.name}[${index}].${fieldName}`
 		},
 		set: (value) => onFieldChange(fieldName, value)
 	};
@@ -2127,7 +3361,9 @@ const ControlArray = (props) => {
 * Automatically detects date formats from schema and renders appropriate picker.
 */
 const ControlDate = (props) => {
-	const { inputProps, id, icon, format } = parseInput(props, useFormState(props.input));
+	const form = useFormState(props.input);
+	const [value, setValue] = useFieldValue(props.input);
+	const { inputProps, id, icon, format } = parseInput(props, form);
 	if (!props.input?.props) return null;
 	if (props.datetime || format === "date-time") {
 		const dateTimePickerProps = typeof props.datetime === "object" ? props.datetime : {};
@@ -2135,10 +3371,8 @@ const ControlDate = (props) => {
 			...inputProps,
 			id,
 			leftSection: icon,
-			defaultValue: props.input.props.defaultValue ? new Date(props.input.props.defaultValue) : void 0,
-			onChange: (value) => {
-				props.input.set(value ? new Date(value).toISOString() : void 0);
-			},
+			value: value ? new Date(value) : null,
+			onChange: (val) => setValue(val ? new Date(val).toISOString() : void 0),
 			...dateTimePickerProps
 		});
 	}
@@ -2148,10 +3382,8 @@ const ControlDate = (props) => {
 			...inputProps,
 			id,
 			leftSection: icon,
-			defaultValue: props.input.props.defaultValue ? new Date(props.input.props.defaultValue) : void 0,
-			onChange: (value) => {
-				props.input.set(value ? new Date(value).toISOString().slice(0, 10) : void 0);
-			},
+			value: value ? new Date(value) : null,
+			onChange: (val) => setValue(val ? new Date(val).toISOString().slice(0, 10) : void 0),
 			...dateInputProps
 		});
 	}
@@ -2161,10 +3393,8 @@ const ControlDate = (props) => {
 			...inputProps,
 			id,
 			leftSection: icon,
-			defaultValue: props.input.props.defaultValue,
-			onChange: (event) => {
-				props.input.set(event.currentTarget.value);
-			},
+			value: value ?? "",
+			onChange: (event) => setValue(event.currentTarget.value),
 			...timeInputProps
 		});
 	}
@@ -2177,14 +3407,10 @@ const ControlDate = (props) => {
 *
 */
 const ControlNumber = (props) => {
-	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
-	const ref = useRef(null);
-	const [value, setValue] = useState(props.input.props.defaultValue);
-	useEvents({ "form:reset": (event) => {
-		if (event.id === props.input?.form.id && ref.current) setValue(props.input.props.defaultValue);
-	} }, [props.input]);
+	const form = useFormState(props.input);
+	const [value, setValue] = useFieldValue(props.input);
+	const { inputProps, id, icon } = parseInput(props, form);
 	if (!props.input?.props) return null;
-	const { type, ...inputPropsWithoutType } = props.input.props;
 	if (props.sliderProps) {
 		const min = props.sliderProps.min ?? inputProps.minimum ?? 0;
 		const max = props.sliderProps.max ?? inputProps.maximum ?? 100;
@@ -2197,34 +3423,25 @@ const ControlNumber = (props) => {
 				},
 				children: /* @__PURE__ */ jsx(Slider, {
 					...inputProps,
-					ref,
 					id,
-					...inputPropsWithoutType,
 					...props.sliderProps,
-					value,
+					value: value ?? 0,
 					min,
 					max,
 					label: () => value,
-					onChange: (val) => {
-						setValue(val);
-						props.input.set(val);
-					}
+					onChange: (val) => setValue(val)
 				})
 			})
 		});
 	}
 	return /* @__PURE__ */ jsx(NumberInput, {
 		...inputProps,
-		ref,
 		id,
 		leftSection: icon,
-		...inputPropsWithoutType,
 		...props.numberInputProps,
 		value: value ?? "",
 		onChange: (val) => {
-			const newValue = val !== null ? Number(val) : void 0;
-			setValue(newValue);
-			props.input.set(newValue);
+			setValue(val !== null ? Number(val) : void 0);
 		}
 	});
 };
@@ -2307,92 +3524,9 @@ const ControlObject = (props) => {
 };
 
 //#endregion
-//#region ../../src/core/form/components/ControlQueryBuilder.tsx
-/**
-* Query builder with text input and help popover.
-* Generates query strings for parseQueryString syntax.
-*/
-const ControlQueryBuilder = ({ schema, value = "", onChange, placeholder = "Enter query or click for assistance...", ...textInputProps }) => {
-	const [helpOpened, setHelpOpened] = useState(false);
-	const [textValue, setTextValue] = useState(value);
-	const inputRef = useRef(null);
-	const fields = schema ? extractSchemaFields(schema) : [];
-	const [error, setError] = useState(null);
-	const isValid = (value) => {
-		try {
-			parseQueryString(value.trim());
-		} catch (e) {
-			setError(e.message);
-			return false;
-		}
-		setError(null);
-		return true;
-	};
-	const handleTextChange = (newValue) => {
-		setTextValue(newValue);
-		if (isValid(newValue)) onChange?.(newValue);
-	};
-	const handleClear = () => {
-		setTextValue("");
-		onChange?.("");
-		isValid("");
-	};
-	const handleInsert = (text) => {
-		const newValue = textValue ? `${textValue}${text} ` : `${text} `;
-		setTextValue(newValue);
-		if (isValid(newValue)) onChange?.(newValue);
-		setTimeout(() => {
-			inputRef.current?.focus();
-			const length = inputRef.current?.value.length || 0;
-			inputRef.current?.setSelectionRange(length, length);
-		}, 0);
-	};
-	useEvents({ "form:change": (event) => {
-		if (event.id === inputRef.current?.form?.id) {
-			if (event.path === textInputProps["data-path"]) setTextValue(event.value ?? "");
-		}
-	} }, []);
-	return /* @__PURE__ */ jsxs(Popover, {
-		width: 800,
-		position: "bottom-start",
-		shadow: "md",
-		opened: helpOpened,
-		onChange: setHelpOpened,
-		closeOnClickOutside: true,
-		closeOnEscape: true,
-		transitionProps: {
-			transition: "fade-up",
-			duration: 200,
-			timingFunction: "ease"
-		},
-		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(TextInput, {
-			ref: inputRef,
-			placeholder,
-			value: textValue,
-			onChange: (e) => handleTextChange(e.currentTarget.value),
-			onFocus: () => setHelpOpened(true),
-			leftSection: error ? /* @__PURE__ */ jsx(IconInfoTriangle, { size: 16 }) : /* @__PURE__ */ jsx(IconFilter, { size: 16 }),
-			rightSection: textValue && /* @__PURE__ */ jsx(ActionIcon, {
-				size: "sm",
-				variant: "subtle",
-				color: "gray",
-				onClick: handleClear,
-				children: /* @__PURE__ */ jsx(IconX, { size: 14 })
-			}),
-			...textInputProps
-		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
-			bg: "transparent",
-			p: "xs",
-			bd: `1px solid ${ui.colors.border}`,
-			style: { backdropFilter: "blur(20px)" },
-			children: /* @__PURE__ */ jsx(QueryHelp, {
-				fields,
-				onInsert: handleInsert
-			})
-		})]
-	});
-};
-function QueryHelp({ fields, onInsert }) {
+//#region ../../src/core/form/components/ControlQueryBuilderHelp.tsx
+const ControlQueryBuilderHelp = (props) => {
+	const { fields, onInsert } = props;
 	return /* @__PURE__ */ jsxs(Flex$1, {
 		gap: "md",
 		align: "flex-start",
@@ -2555,111 +3689,314 @@ function QueryHelp({ fields, onInsert }) {
 			})
 		]
 	});
-}
+};
+
+//#endregion
+//#region ../../src/core/form/components/ControlQueryBuilder.tsx
+/**
+* Query builder with text input and help popover.
+* Generates query strings for parseQueryString syntax.
+*/
+const ControlQueryBuilder = (props) => {
+	const { schema, value = "", onChange, placeholder = "Enter query or click for assistance...", ...textInputProps } = props;
+	const [helpOpened, setHelpOpened] = useState(false);
+	const [textValue, setTextValue] = useState(value);
+	const inputRef = useRef(null);
+	const fields = schema ? extractSchemaFields(schema) : [];
+	const [error, setError] = useState(null);
+	const isValid = (value) => {
+		try {
+			parseQueryString(value.trim());
+		} catch (e) {
+			setError(e.message);
+			return false;
+		}
+		setError(null);
+		return true;
+	};
+	const handleTextChange = (newValue) => {
+		setTextValue(newValue);
+		if (isValid(newValue)) onChange?.(newValue);
+	};
+	const handleClear = () => {
+		setTextValue("");
+		onChange?.("");
+		isValid("");
+	};
+	const handleInsert = (text) => {
+		const newValue = textValue ? `${textValue}${text} ` : `${text} `;
+		setTextValue(newValue);
+		if (isValid(newValue)) onChange?.(newValue);
+		setTimeout(() => {
+			inputRef.current?.focus();
+			const length = inputRef.current?.value.length || 0;
+			inputRef.current?.setSelectionRange(length, length);
+		}, 0);
+	};
+	useEvents({ "form:change": (event) => {
+		if (event.id === inputRef.current?.form?.id) {
+			if (event.path === textInputProps["data-path"]) setTextValue(event.value ?? "");
+		}
+	} }, []);
+	return /* @__PURE__ */ jsxs(Popover, {
+		width: 800,
+		position: "bottom-start",
+		shadow: "md",
+		opened: helpOpened,
+		onChange: setHelpOpened,
+		closeOnClickOutside: true,
+		closeOnEscape: true,
+		transitionProps: {
+			transition: "fade-up",
+			duration: 200,
+			timingFunction: "ease"
+		},
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(TextInput, {
+			ref: inputRef,
+			placeholder,
+			value: textValue,
+			onChange: (e) => handleTextChange(e.currentTarget.value),
+			onFocus: () => setHelpOpened(true),
+			leftSection: error ? /* @__PURE__ */ jsx(IconInfoTriangle, { size: 16 }) : /* @__PURE__ */ jsx(IconFilter, { size: 16 }),
+			rightSection: textValue && /* @__PURE__ */ jsx(ActionIcon, {
+				size: "sm",
+				variant: "subtle",
+				color: "gray",
+				onClick: handleClear,
+				children: /* @__PURE__ */ jsx(IconX, { size: 14 })
+			}),
+			...textInputProps
+		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+			bg: "transparent",
+			p: "xs",
+			bd: `1px solid ${ui.colors.border}`,
+			style: { backdropFilter: "blur(20px)" },
+			children: /* @__PURE__ */ jsx(ControlQueryBuilderHelp, {
+				fields,
+				onInsert: handleInsert
+			})
+		})]
+	});
+};
 
 //#endregion
 //#region ../../src/core/form/components/ControlSelect.tsx
 /**
-* ControlSelect component for handling Select, MultiSelect, and TagsInput.
+* ControlSelect component for handling Select, MultiSelect, Autocomplete, and TagsInput.
 *
 * Features:
 * - Basic Select with enum support
 * - MultiSelect for array of enums
-* - TagsInput for array of strings (no enum)
-* - Future: Lazy loading
-* - Future: Searchable/filterable options
-* - Future: Custom option rendering
+* - Autocomplete for creatable single values
+* - TagsInput for creatable array values
+* - Async lazy loading with auto short/long mode detection
+* - Short mode: client-side filtering with cached data
+* - Long mode: debounced server search
 *
 * Automatically detects enum values and array types from schema.
 */
 const ControlSelect = (props) => {
-	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
+	const form = useFormState(props.input);
+	const [value, setValue] = useFieldValue(props.input);
+	const { inputProps, id, icon } = parseInput(props, form);
 	const isArray = props.input.schema && "type" in props.input.schema && props.input.schema.type === "array";
-	let itemsEnum;
-	if (isArray && "items" in props.input.schema && props.input.schema.items) {
-		const items = props.input.schema.items;
-		if ("enum" in items && Array.isArray(items.enum)) itemsEnum = items.enum;
-	}
+	const isNumeric = props.input.schema && "type" in props.input.schema && (props.input.schema.type === "integer" || props.input.schema.type === "number");
+	const isBoolean = props.input.schema && "type" in props.input.schema && props.input.schema.type === "boolean";
 	const enumValues = props.input.schema && "enum" in props.input.schema && Array.isArray(props.input.schema.enum) ? props.input.schema.enum : [];
-	const [data, setData] = useState([]);
+	const { data: asyncData, loading, mode, search } = useAsyncLoader(props.loader, props.loaderThreshold ?? 100, props.loaderDebounce ?? 300, props.input.initialValue);
+	const [staticData, setStaticData] = useState([]);
+	const enumKey = JSON.stringify(enumValues);
 	useEffect(() => {
-		if (!props.input?.props) return;
-		if (props.loader) props.loader().then(setData);
-		else setData(enumValues);
-	}, [props.input, props.loader]);
+		if (!props.input?.props || props.loader) return;
+		if (isBoolean && enumValues.length === 0) setStaticData([{
+			value: "true",
+			label: "True"
+		}, {
+			value: "false",
+			label: "False"
+		}]);
+		else setStaticData(enumValues);
+	}, [
+		props.input,
+		props.loader,
+		enumKey,
+		isBoolean
+	]);
+	const data = props.loader ? asyncData : staticData;
 	if (!props.input?.props) return null;
-	if (props.segmented) {
-		const segmentedControlProps = typeof props.segmented === "object" ? props.segmented : {};
+	/**
+	* Coerce value for numeric schemas — Select values are always strings.
+	*/
+	const coerceValue = (val) => {
+		if (val == null) return val;
+		if (isNumeric) return Number(val);
+		if (isBoolean) return val === "true";
+		return val;
+	};
+	if (props.segmentedProps) {
+		const segmentedControlProps = typeof props.segmentedProps === "object" ? props.segmentedProps : {};
+		const segmentedData = segmentedControlProps.data ?? data.slice(0, 10);
 		return /* @__PURE__ */ jsx(Input.Wrapper, {
 			...inputProps,
-			children: /* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(SegmentedControl, {
-				disabled: inputProps.disabled,
-				defaultValue: String(props.input.props.defaultValue),
-				...segmentedControlProps,
-				onChange: (value) => {
-					props.input.set(value);
-				},
-				data: data.slice(0, 10)
-			}) })
+			children: /* @__PURE__ */ jsx(Flex$1, {
+				my: "calc(var(--mantine-spacing-xs) / 2)",
+				children: /* @__PURE__ */ jsx(SegmentedControl, {
+					disabled: inputProps.disabled,
+					value: value != null ? String(value) : "",
+					...segmentedControlProps,
+					onChange: (val) => {
+						setValue(coerceValue(val));
+					},
+					data: segmentedData
+				})
+			})
 		});
 	}
-	if (props.autocomplete) {
-		const autocompleteProps = typeof props.autocomplete === "object" ? props.autocomplete : {};
-		return /* @__PURE__ */ jsx(Autocomplete, {
+	const sharedProps = {
+		size: props.size,
+		id,
+		leftSection: loading ? /* @__PURE__ */ jsx(Loader, {
+			color: "gray",
+			size: 10
+		}) : icon,
+		data
+	};
+	const selectableProps = {
+		...sharedProps,
+		searchable: true,
+		rightSection: /* @__PURE__ */ jsx("span", {})
+	};
+	const longModeProps = mode === "long" ? {
+		filter: ({ options }) => options,
+		onSearchChange: search.run
+	} : {};
+	if (props.creatable && (isArray || props.tagsInputProps)) {
+		const tagsInputExtraProps = props.tagsInputProps ?? {};
+		return /* @__PURE__ */ jsx(TagsInput, {
 			...inputProps,
-			size: props.size,
-			id,
-			leftSection: icon,
-			data,
-			...props.input.props,
-			...autocompleteProps
+			...sharedProps,
+			...longModeProps,
+			value: Array.isArray(value) ? value : [],
+			onChange: (val) => {
+				setValue(val);
+			},
+			...tagsInputExtraProps
 		});
 	}
-	if (isArray && !itemsEnum || props.tags) {
-		const tagsInputProps = typeof props.tags === "object" ? props.tags : {};
-		return /* @__PURE__ */ jsx(TagsInput, {
+	if (props.creatable) {
+		const autocompleteExtraProps = props.autocompleteProps ?? {};
+		return /* @__PURE__ */ jsx(Autocomplete, {
 			...inputProps,
-			size: props.size,
-			id,
-			leftSection: icon,
-			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
-			onChange: (value) => {
-				props.input.set(value);
+			...sharedProps,
+			...longModeProps,
+			value: value != null ? String(value) : "",
+			onChange: (val) => {
+				setValue(coerceValue(val));
 			},
-			...tagsInputProps
+			...autocompleteExtraProps
 		});
 	}
-	if (isArray && itemsEnum || props.multi) {
-		const data = itemsEnum?.map((value) => ({
-			value,
-			label: value
-		})) || [];
-		const multiSelectProps = typeof props.multi === "object" ? props.multi : {};
+	if (isArray || props.multiSelectProps) {
+		const multiSelectExtraProps = typeof props.multiSelectProps === "object" ? props.multiSelectProps : {};
 		return /* @__PURE__ */ jsx(MultiSelect, {
 			...inputProps,
-			size: props.size,
-			id,
-			leftSection: icon,
-			data,
-			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
-			onChange: (value) => {
-				props.input.set(value);
+			...selectableProps,
+			...longModeProps,
+			value: Array.isArray(value) ? value : [],
+			onChange: (val) => {
+				setValue(val);
 			},
-			...multiSelectProps
+			...multiSelectExtraProps
 		});
 	}
-	const selectProps = typeof props.select === "object" ? props.select : {};
+	const selectExtraProps = typeof props.selectProps === "object" ? props.selectProps : {};
+	if (mode === "static") return /* @__PURE__ */ jsx(Select, {
+		...inputProps,
+		...selectableProps,
+		value: value != null ? String(value) : null,
+		onChange: (val) => {
+			setValue(coerceValue(val));
+		},
+		...selectExtraProps
+	});
 	return /* @__PURE__ */ jsx(Select, {
 		...inputProps,
-		size: props.size,
-		id,
-		leftSection: icon,
-		rightSection: null,
-		data,
-		...props.input.props,
-		...selectProps
+		...selectableProps,
+		...longModeProps,
+		value: value != null ? String(value) : null,
+		onChange: (val) => {
+			setValue(coerceValue(val));
+		},
+		...selectExtraProps
 	});
 };
+/**
+* Hook for async select data loading with auto short/long mode detection.
+*/
+const useAsyncLoader = (loader, threshold, debounceMs, defaultValue) => {
+	const [data, setData] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [mode, setMode] = useState("static");
+	const cache = useRef(/* @__PURE__ */ new Map());
+	useAction({
+		name: "select:loader:init",
+		runOnInit: true,
+		handler: async () => {
+			if (!loader) {
+				setMode("static");
+				return;
+			}
+			setLoading(true);
+			try {
+				const result = await loader("");
+				const isShort = result.length <= threshold;
+				setMode(isShort ? "short" : "long");
+				cache.current.set("", result);
+				setData(result);
+				if (!isShort && defaultValue != null && String(defaultValue) !== "") {
+					const resolved = await loader("", [String(defaultValue)]);
+					if (resolved.length > 0) setData((prev) => {
+						const existing = new Set(prev.map((d) => typeof d === "string" ? d : d.value));
+						const newItems = resolved.filter((r) => {
+							const val = typeof r === "string" ? r : r.value;
+							return !existing.has(val);
+						});
+						return [...prev, ...newItems];
+					});
+				}
+			} finally {
+				setLoading(false);
+			}
+		}
+	}, [loader, threshold]);
+	return {
+		data,
+		loading,
+		mode,
+		search: useAction({
+			debounce: debounceMs,
+			handler: async (text) => {
+				if (!loader || mode !== "long") return;
+				if (cache.current.has(text)) {
+					setData(cache.current.get(text));
+					return;
+				}
+				setLoading(true);
+				try {
+					const result = await loader(text);
+					cache.current.set(text, result);
+					setData(result);
+				} finally {
+					setLoading(false);
+				}
+			}
+		}, [
+			loader,
+			mode,
+			debounceMs
+		])
+	};
+};
 
 //#endregion
 //#region ../../src/core/form/components/Control.tsx
@@ -2689,6 +4026,7 @@ const ControlSelect = (props) => {
 */
 const Control = (_props) => {
 	const form = useFormState(_props.input, ["error"]);
+	const [value, setValue] = useFieldValue(_props.input);
 	if (!_props.input?.props) return null;
 	const { inputProps, id, icon, format, schema } = parseInput(_props, form);
 	const props = {
@@ -2696,12 +4034,11 @@ const Control = (_props) => {
 		...schema.$control
 	};
 	if (props.query) return /* @__PURE__ */ jsx(ControlQueryBuilder, {
-		...props.input.props,
 		...inputProps,
 		schema: props.query,
-		value: props.input.props.value,
-		onChange: (value) => {
-			props.input.set(value);
+		value,
+		onChange: (val) => {
+			setValue(val);
 		}
 	});
 	if (props.custom) {
@@ -2712,9 +4049,9 @@ const Control = (_props) => {
 				flex: 1,
 				mt: "calc(var(--mantine-spacing-xs) / 2)",
 				children: /* @__PURE__ */ jsx(Custom, {
-					defaultValue: props.input.props.defaultValue,
-					onChange: (value) => {
-						props.input.set(value);
+					value,
+					onChange: (val) => {
+						setValue(val);
 					}
 				})
 			})
@@ -2725,7 +4062,7 @@ const Control = (_props) => {
 		const controlObjectProps = typeof props.object === "object" ? props.object : {};
 		return /* @__PURE__ */ jsx(ControlObject, {
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			...controlObjectProps
 		});
@@ -2736,18 +4073,18 @@ const Control = (_props) => {
 		const controlArrayProps = typeof props.array === "object" ? props.array : {};
 		return /* @__PURE__ */ jsx(ControlArray, {
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			...controlArrayProps
 		});
 	}
-	if (props.number || props.input.schema && "type" in props.input.schema && (props.input.schema.type === "number" || props.input.schema.type === "integer")) {
+	if (props.number || !props.select && props.input.schema && "type" in props.input.schema && (props.input.schema.type === "number" || props.input.schema.type === "integer")) {
 		const controlNumberProps = typeof props.number === "object" ? props.number : {};
 		if (props.slider) controlNumberProps.sliderProps ??= {};
 		return /* @__PURE__ */ jsx(ControlNumber, {
 			size: props.size,
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			icon,
 			...controlNumberProps
@@ -2760,9 +4097,7 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			onChange: (file) => {
-				props.input.set(file);
-			},
+			onChange: (file) => setValue(file),
 			...fileInputProps
 		});
 	}
@@ -2773,17 +4108,18 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			...props.input.props,
+			value: value ?? "",
+			onChange: (val) => setValue(val),
 			...colorInputProps
 		});
 	}
 	if (props.input.schema && "enum" in props.input.schema && props.input.schema.enum || isArray && !isArrayOfObjects || props.select) {
 		const opts = typeof props.select === "object" ? props.select : {};
-		if (props.segmented) opts.segmented ??= {};
+		if (props.segmented) opts.segmentedProps ??= {};
 		return /* @__PURE__ */ jsx(ControlSelect, {
 			size: props.size,
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			icon,
 			...opts
@@ -2797,16 +4133,16 @@ const Control = (_props) => {
 				size: props.size,
 				id,
 				color: "blue",
-				defaultChecked: props.input.props.defaultValue,
+				checked: Boolean(value),
 				onChange: (event) => {
-					props.input.set(event.currentTarget.checked);
+					setValue(event.currentTarget.checked);
 				},
 				...switchProps
 			});
 		}
 		const opts = {
 			input: props.input,
-			select: { data: [{
+			selectProps: { data: [{
 				value: "true",
 				label: "Yes"
 			}, {
@@ -2816,7 +4152,7 @@ const Control = (_props) => {
 		};
 		return /* @__PURE__ */ jsx(ControlSelect, {
 			size: props.size,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			icon,
 			...opts
@@ -2829,7 +4165,8 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			...props.input.props,
+			value: value ?? "",
+			onChange: (ev) => setValue(ev.target.value),
 			...passwordInputProps
 		});
 	}
@@ -2840,14 +4177,15 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			...props.input.props,
+			value: value ?? "",
+			onChange: (ev) => setValue(ev.target.value),
 			...textAreaProps
 		});
 	}
 	if (props.date || props.datetime || props.time || format === "date" || format === "date-time" || format === "time") return /* @__PURE__ */ jsx(ControlDate, {
 		size: props.size,
 		input: props.input,
-		title: props.title,
+		label: props.label,
 		description: props.description,
 		icon,
 		date: props.date,
@@ -2862,7 +4200,7 @@ const Control = (_props) => {
 			case "uri": return "url";
 			case "tel":
 			case "phone": return "tel";
-			default: return;
+			default: return props.input.props.type ?? "text";
 		}
 	};
 	return /* @__PURE__ */ jsx(TextInput, {
@@ -2871,14 +4209,9 @@ const Control = (_props) => {
 		id,
 		leftSection: icon,
 		type: getInputType(),
-		...props.input.props,
-		...textInputProps,
-		inputWrapperOrder: [
-			"label",
-			"input",
-			"description",
-			"error"
-		]
+		value: value ?? "",
+		onChange: (ev) => setValue(ev.target.value),
+		...textInputProps
 	});
 };
 
@@ -2927,6 +4260,7 @@ const Control = (_props) => {
 */
 const TypeForm = (props) => {
 	const { form, columns = 3, children, controlProps, fieldControlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps, fill = true, size } = props;
+	const { dirty } = useFormState(form, ["dirty"]);
 	const schema = props.schema || form.options.schema;
 	if (!schema?.properties) return null;
 	const supportedFields = Object.keys(schema.properties);
@@ -2989,10 +4323,12 @@ const TypeForm = (props) => {
 						children: [/* @__PURE__ */ jsx(ActionButton, {
 							variant: "subtle",
 							type: "reset",
+							disabled: !dirty,
 							children: "Reset"
 						}), /* @__PURE__ */ jsx(ActionButton, {
 							intent: "primary",
 							form,
+							disabled: !dirty,
 							...submitButtonProps,
 							children: submitButtonProps?.children ?? "Submit"
 						})]
@@ -3031,33 +4367,27 @@ const dialogForm = (form, options) => ({
 });
 
 //#endregion
-//#region ../../src/core/helpers/renderIcon.tsx
-const renderIcon = (icon, size) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: size ?? ui.sizes.icon.md });
-	return icon;
-};
-
-//#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);
+//#region ../../src/core/json/components/JsonViewerCopyButton.tsx
+const JsonViewerCopyButton = (props) => {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = useCallback((e) => {
+		e.stopPropagation();
+		navigator.clipboard.writeText(props.value);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1500);
+	}, [props.value]);
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		size: props.iconSize + 4,
+		variant: "transparent",
+		c: copied ? "green" : "dimmed",
+		onClick: handleCopy,
+		className: "alepha-json-viewer-copy",
+		children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: props.iconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: props.iconSize })
+	});
 };
 
 //#endregion
-//#region ../../src/core/json/components/JsonViewer.tsx
+//#region ../../src/core/json/components/JsonViewerShared.ts
 const SIZE_CONFIG = {
 	xs: {
 		icon: 14,
@@ -3106,77 +4436,21 @@ const getValueType = (val) => {
 	if (Array.isArray(val)) return "array";
 	return typeof val;
 };
-function buildTreeNodes(data, path = [], key, isArrayItem = false, maxDepth = 10) {
-	const currentPath = key !== void 0 ? [...path, key] : path;
-	const nodeId = currentPath.length > 0 ? currentPath.join(".") : "root";
-	if (currentPath.length > maxDepth) return {
-		value: nodeId,
-		label: key ?? "",
-		nodeValue: data,
-		nodeKey: key,
-		path: currentPath,
-		isArrayItem
-	};
-	const type = getValueType(data);
-	if (type === "object" || type === "array") {
-		const children = (type === "array" ? data.map((v, i) => [String(i), v]) : Object.entries(data)).map(([k, v]) => buildTreeNodes(v, currentPath, k, type === "array", maxDepth)).filter((n) => n !== null);
-		return {
-			value: nodeId,
-			label: key ?? "",
-			nodeValue: data,
-			nodeKey: key,
-			path: currentPath,
-			isArrayItem,
-			children: children.length > 0 ? children : void 0
-		};
-	}
-	return {
-		value: nodeId,
-		label: key ?? "",
-		nodeValue: data,
-		nodeKey: key,
-		path: currentPath,
-		isArrayItem
-	};
-}
-function getExpandedIds(nodes, targetDepth, currentDepth = 0) {
-	if (currentDepth >= targetDepth) return [];
-	const ids = [];
-	for (const node of nodes) if (node.children) {
-		ids.push(node.value);
-		ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));
-	}
-	return ids;
-}
-const CopyButton$1 = ({ value, iconSize }) => {
-	const [copied, setCopied] = useState(false);
-	const handleCopy = useCallback((e) => {
-		e.stopPropagation();
-		navigator.clipboard.writeText(value);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 1500);
-	}, [value]);
-	return /* @__PURE__ */ jsx(ActionIcon, {
-		size: iconSize + 4,
-		variant: "transparent",
-		c: copied ? "green" : "dimmed",
-		onClick: handleCopy,
-		className: "alepha-json-viewer-copy",
-		children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: iconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: iconSize })
-	});
-};
-const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, showQuotes, showCopyButton, renderValue }) => {
-	const { nodeValue, nodeKey, path, isArrayItem, isRoot } = node;
+
+//#endregion
+//#region ../../src/core/json/components/JsonViewerRowNode.tsx
+const JsonViewerRowNode = (props) => {
+	const { nodeValue, nodeKey, path, isArrayItem } = props.node;
 	const type = getValueType(nodeValue);
 	const isExpandable = type === "object" || type === "array";
 	const getPreview = () => {
 		if (!isExpandable) return null;
 		const count = (type === "array" ? nodeValue : Object.keys(nodeValue)).length;
 		const label = type === "array" ? "item" : "key";
-		if (!expanded) return /* @__PURE__ */ jsx(Text$1, {
+		if (!props.expanded) return /* @__PURE__ */ jsx(Text$1, {
 			fs: "italic",
 			component: "span",
-			size,
+			size: props.size,
 			style: STYLES.preview,
 			children: count === 0 ? type === "array" ? "[]" : "{}" : type === "array" ? `[ ${count} ${count === 1 ? label : `${label}s`} ]` : `{ ${count} ${count === 1 ? label : `${label}s`} }`
 		});
@@ -3186,25 +4460,25 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 	return /* @__PURE__ */ jsxs(Flex$1, {
 		gap: 6,
 		wrap: "nowrap",
-		...elementProps,
-		className: `alepha-json-viewer-row ${elementProps.className || ""}`,
+		...props.elementProps,
+		className: `alepha-json-viewer-row ${props.elementProps.className || ""}`,
 		children: [
-			hasChildren ? expanded ? /* @__PURE__ */ jsx(IconChevronDown, {
-				size: config.icon,
+			props.hasChildren ? props.expanded ? /* @__PURE__ */ jsx(IconChevronDown, {
+				size: props.config.icon,
 				style: STYLES.chevron
 			}) : /* @__PURE__ */ jsx(IconChevronRight, {
-				size: config.icon,
+				size: props.config.icon,
 				style: STYLES.chevron
 			}) : /* @__PURE__ */ jsx("span", { style: {
-				width: config.icon,
+				width: props.config.icon,
 				flexShrink: 0
 			} }),
 			nodeKey !== void 0 && !isArrayItem && /* @__PURE__ */ jsxs(Text$1, {
 				component: "span",
-				size,
+				size: props.size,
 				children: [/* @__PURE__ */ jsx("span", {
 					style: STYLES.key,
-					children: showQuotes ? `"${nodeKey}"` : nodeKey
+					children: props.showQuotes ? `"${nodeKey}"` : nodeKey
 				}), /* @__PURE__ */ jsx("span", {
 					style: STYLES.colon,
 					children: ":"
@@ -3212,7 +4486,7 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 			}),
 			nodeKey !== void 0 && isArrayItem && /* @__PURE__ */ jsxs(Text$1, {
 				component: "span",
-				size,
+				size: props.size,
 				children: [/* @__PURE__ */ jsx("span", {
 					style: STYLES.key,
 					children: nodeKey
@@ -3221,25 +4495,29 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 					children: ":"
 				})]
 			}),
-			hasChildren ? getPreview() : isExpandable ? type === "array" ? /* @__PURE__ */ jsx(Text$1, {
+			props.hasChildren ? getPreview() : isExpandable ? type === "array" ? /* @__PURE__ */ jsx(Text$1, {
 				component: "span",
-				size,
+				size: props.size,
 				style: STYLES.preview,
 				children: "[]"
 			}) : /* @__PURE__ */ jsx(Text$1, {
 				component: "span",
-				size,
+				size: props.size,
 				style: STYLES.preview,
 				children: "{}"
-			}) : renderValue(nodeValue, nodeKey, path),
-			showCopyButton && /* @__PURE__ */ jsx(CopyButton$1, {
+			}) : props.renderValue(nodeValue, nodeKey, path),
+			props.showCopyButton && /* @__PURE__ */ jsx(JsonViewerCopyButton, {
 				value: getCopyValue(),
-				iconSize: config.icon
+				iconSize: props.config.icon
 			})
 		]
 	});
 };
-const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm", showQuotes = false, showCopyButton = true, formatValue }) => {
+
+//#endregion
+//#region ../../src/core/json/components/JsonViewer.tsx
+const JsonViewer = (props) => {
+	const { data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm", showQuotes = false, showCopyButton = true, formatValue } = props;
 	const config = SIZE_CONFIG[size] || SIZE_CONFIG.sm;
 	const treeData = useMemo(() => {
 		const type = getValueType(data);
@@ -3319,7 +4597,7 @@ const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm"
 		size
 	]);
 	const renderNode = useCallback(({ node, expanded, hasChildren, elementProps }) => {
-		return /* @__PURE__ */ jsx(RowNode, {
+		return /* @__PURE__ */ jsx(JsonViewerRowNode, {
 			node,
 			expanded,
 			hasChildren,
@@ -3351,6 +4629,54 @@ const JsonViewer = ({ data, defaultExpandedDepth = 2, maxDepth = 10, size = "sm"
 		styles: { root: STYLES.root }
 	});
 };
+/**
+* Convert JSON to tree data structure.
+*/
+const buildTreeNodes = (data, path = [], key, isArrayItem = false, maxDepth = 10) => {
+	const currentPath = key !== void 0 ? [...path, key] : path;
+	const nodeId = currentPath.length > 0 ? currentPath.join(".") : "root";
+	if (currentPath.length > maxDepth) return {
+		value: nodeId,
+		label: key ?? "",
+		nodeValue: data,
+		nodeKey: key,
+		path: currentPath,
+		isArrayItem
+	};
+	const type = getValueType(data);
+	if (type === "object" || type === "array") {
+		const children = (type === "array" ? data.map((v, i) => [String(i), v]) : Object.entries(data)).map(([k, v]) => buildTreeNodes(v, currentPath, k, type === "array", maxDepth)).filter((n) => n !== null);
+		return {
+			value: nodeId,
+			label: key ?? "",
+			nodeValue: data,
+			nodeKey: key,
+			path: currentPath,
+			isArrayItem,
+			children: children.length > 0 ? children : void 0
+		};
+	}
+	return {
+		value: nodeId,
+		label: key ?? "",
+		nodeValue: data,
+		nodeKey: key,
+		path: currentPath,
+		isArrayItem
+	};
+};
+/**
+* Get all expandable node IDs up to a certain depth.
+*/
+const getExpandedIds = (nodes, targetDepth, currentDepth = 0) => {
+	if (currentDepth >= targetDepth) return [];
+	const ids = [];
+	for (const node of nodes) if (node.children) {
+		ids.push(node.value);
+		ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));
+	}
+	return ids;
+};
 
 //#endregion
 //#region ../../src/core/json/factories/dialogJson.tsx
@@ -3394,7 +4720,8 @@ const DEFAULT_MAX_VISIBLE_COLUMNS = 8;
 
 //#endregion
 //#region ../../src/core/table/components/DataTableFilters.tsx
-const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) => {
+const DataTableFilters = (props) => {
+	const { schema, form, typeFormProps, filterVisibility } = props;
 	const visibleSchema = useMemo(() => {
 		const visibleKeys = Object.keys(schema.properties).filter((key) => filterVisibility[key] !== false);
 		if (visibleKeys.length === 0) return null;
@@ -3405,13 +4732,14 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 		return t.object(visibleProps);
 	}, [schema, filterVisibility]);
 	if (!visibleSchema) return null;
-	return /* @__PURE__ */ jsx(Flex$1, {
-		w: "100%",
+	return /* @__PURE__ */ jsx(Flex, {
+		surface: true,
+		flex: 1,
+		mt: -4,
 		p: "xs",
-		bg: ui.colors.surface,
-		style: { borderBottom: "1px solid var(--alepha-border)" },
+		m: "xs",
+		bdrs: "md",
 		children: /* @__PURE__ */ jsx(TypeForm, {
-			size: "xs",
 			...typeFormProps,
 			skipSubmitButton: true,
 			fill: true,
@@ -3422,7 +4750,7 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 				sm: 2,
 				md: 3,
 				lg: 4,
-				xl: 6
+				xl: 5
 			}
 		})
 	});
@@ -3430,48 +4758,64 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 
 //#endregion
 //#region ../../src/core/table/components/DataTablePagination.tsx
-const DataTablePagination = ({ page, size, totalPages, onPageChange, onSizeChange }) => {
-	return /* @__PURE__ */ jsxs(Flex$1, {
+const DataTablePagination = ({ page, size, totalPages, totalElements, isFirst, isLast, offset, numberOfElements, onPageChange, onSizeChange }) => {
+	const from = numberOfElements > 0 ? offset + 1 : 0;
+	const to = offset + numberOfElements;
+	const hasTotal = totalPages != null;
+	return /* @__PURE__ */ jsxs(Flex, {
 		align: "center",
-		justify: "end",
+		justify: "space-between",
 		gap: "md",
-		p: "xs",
+		px: "xs",
+		py: 4,
 		style: { borderTop: "1px solid var(--alepha-border)" },
-		children: [/* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(Select, {
-			w: 96,
-			variant: "default",
-			value: size,
-			onChange: (value) => {
-				if (value) onSizeChange(Number(value));
-			},
-			data: [
-				{
-					value: "5",
-					label: "5"
-				},
-				{
-					value: "10",
-					label: "10"
-				},
-				{
-					value: "25",
-					label: "25"
-				},
-				{
-					value: "50",
-					label: "50"
+		children: [/* @__PURE__ */ jsx(Flex, {
+			align: "center",
+			children: /* @__PURE__ */ jsx(Text, {
+				size: "xs",
+				c: "dimmed",
+				children: totalElements != null ? `Showing ${from} - ${to} of ${totalElements}` : `Showing ${from} - ${to}`
+			})
+		}), /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			gap: "md",
+			children: [/* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Select, {
+				color: "gray",
+				c: "gray",
+				size: "xs",
+				w: 96,
+				variant: "default",
+				value: size,
+				onChange: (value) => {
+					if (value) onSizeChange(Number(value));
 				},
-				{
-					value: "100",
-					label: "100"
-				}
-			]
-		}) }), /* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(Pagination, {
-			withEdges: true,
-			total: totalPages,
-			value: page,
-			onChange: onPageChange
-		}) })]
+				data: [
+					{
+						value: "10",
+						label: "10"
+					},
+					{
+						value: "25",
+						label: "25"
+					},
+					{
+						value: "50",
+						label: "50"
+					},
+					{
+						value: "100",
+						label: "100"
+					}
+				]
+			}) }), /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Pagination, {
+				size: "sm",
+				withEdges: hasTotal,
+				withPages: hasTotal,
+				total: hasTotal ? totalPages : isLast !== false ? page : page + 1,
+				value: page,
+				onChange: onPageChange
+			}) })]
+		})]
 	});
 };
 
@@ -3518,7 +4862,7 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 			timingFunction: "ease"
 		},
 		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ActionButton, {
-			variant: "subtle",
+			variant: "minimal",
 			icon: IconColumns,
 			onClick: () => setOpened((o) => !o)
 		}) }) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
@@ -3548,12 +4892,12 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 						gap: 4,
 						children: [/* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
-							variant: "subtle",
+							variant: "minimal",
 							onClick: handleShowAll,
 							children: "All"
 						}), /* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
-							variant: "subtle",
+							variant: "minimal",
 							onClick: handleDefault,
 							children: "Default"
 						})]
@@ -3619,7 +4963,7 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 			timingFunction: "ease"
 		},
 		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ActionButton, {
-			variant: "subtle",
+			variant: "minimal",
 			icon: IconFilter,
 			onClick: () => setOpened((o) => !o)
 		}) }) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
@@ -3649,12 +4993,12 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 						gap: 4,
 						children: [/* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
-							variant: "subtle",
+							variant: "minimal",
 							onClick: handleShowAll,
 							children: "All"
 						}), /* @__PURE__ */ jsx(ActionButton, {
 							size: "compact-xs",
-							variant: "subtle",
+							variant: "minimal",
 							onClick: handleHideAll,
 							children: "None"
 						})]
@@ -3693,7 +5037,7 @@ const extractText = (node) => {
 const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility, onColumnVisibilityChange, onFilterVisibilityChange, actions, onRefresh, items, withExport, selectedItems = [], checkboxActions, onClearSelection }) => {
 	const hasSelection = selectedItems.length > 0;
 	const exportableColumns = useCallback(() => {
-		return Object.entries(columns).filter(([key, col]) => !col.actions && columnVisibility[key] !== false);
+		return Object.entries(columns).filter(([key]) => columnVisibility[key] !== false);
 	}, [columns, columnVisibility]);
 	const buildRows = useCallback(() => {
 		const cols = exportableColumns();
@@ -3730,11 +5074,10 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 		};
 		await action.onClick(ctx);
 	};
-	return /* @__PURE__ */ jsxs(Flex$1, {
+	return /* @__PURE__ */ jsxs(Flex, {
 		p: "xs",
-		style: { borderBottom: "1px solid var(--alepha-border)" },
 		children: [
-			/* @__PURE__ */ jsxs(Flex$1, {
+			/* @__PURE__ */ jsxs(Flex, {
 				gap: 4,
 				align: "center",
 				children: [
@@ -3749,7 +5092,7 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 						onVisibilityChange: onColumnVisibilityChange
 					}),
 					withExport && /* @__PURE__ */ jsx(ActionButton, {
-						variant: "subtle",
+						variant: "minimal",
 						icon: IconDownload,
 						menu: { items: [{
 							label: "Export as CSV",
@@ -3772,7 +5115,7 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 							children: [selectedItems.length, " selected"]
 						}),
 						/* @__PURE__ */ jsx(ActionButton, {
-							variant: "subtle",
+							variant: "minimal",
 							size: "compact-sm",
 							icon: IconX,
 							onClick: onClearSelection,
@@ -3789,14 +5132,14 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 					] })
 				]
 			}),
-			/* @__PURE__ */ jsx(Flex$1, { flex: 1 }),
-			/* @__PURE__ */ jsxs(Flex$1, {
+			/* @__PURE__ */ jsx(Flex, { flex: 1 }),
+			/* @__PURE__ */ jsxs(Flex, {
 				gap: "xs",
 				children: [actions?.map((props, index) => !isValidElement(props) ? /* @__PURE__ */ jsx(ActionButton, {
 					...props,
 					children: props.label
 				}, index) : props), /* @__PURE__ */ jsx(ActionButton, {
-					variant: "subtle",
+					variant: "minimal",
 					icon: IconRefresh,
 					onClick: onRefresh
 				})]
@@ -3905,12 +5248,16 @@ const FIT_STYLE = {
 };
 const DataTable = (props) => {
 	const [items, setItems] = useState(typeof props.items === "function" ? { content: [] } : props.items);
-	const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
+	const itemsRef = useRef(items);
+	const [loaded, setLoaded] = useState(typeof props.items !== "function" || !props.submitOnInit);
+	const defaultSize = props.defaultSize || (props.infinityScroll ? 100 : 10);
 	const [page, setPage] = useState(1);
 	const [size, setSize] = useState(String(defaultSize));
 	const [currentPage, setCurrentPage] = useState(0);
 	const alepha = useInject(Alepha);
+	itemsRef.current = items;
 	const sentinelRef = useRef(null);
+	const debounceRef = useRef(null);
 	const [columnVisibility, setColumnVisibility] = useState(() => {
 		const entries = Object.entries(props.columns);
 		let visibleCount = 0;
@@ -3983,13 +5330,14 @@ const DataTable = (props) => {
 		}),
 		handler: async (values) => {
 			if (typeof props.items === "function") {
-				const response = await props.items(values, { items: items.content });
+				const response = await props.items(values, { items: itemsRef.current.content });
 				if (props.infinityScroll && values.page > 0) setItems((prev) => ({
 					...response,
 					content: [...prev.content, ...response.content]
 				}));
 				else setItems(response);
 				setCurrentPage(values.page);
+				if (!loaded) setLoaded(true);
 			}
 		},
 		onReset: async () => {
@@ -4009,9 +5357,23 @@ const DataTable = (props) => {
 				return;
 			}
 			props.onFilterChange?.(key, value, form);
+			if (props.skipSubmitOnChange) return;
+			form.input.page.set(0);
+			const delay = props.debounce ?? 300;
+			if (delay > 0) {
+				if (debounceRef.current) clearTimeout(debounceRef.current);
+				debounceRef.current = setTimeout(() => {
+					form.submit();
+				}, delay);
+			} else await form.submit();
 		}
-	}, [items]);
+	}, []);
 	const dt = useInject(DateTimeProvider);
+	useEffect(() => {
+		return () => {
+			if (debounceRef.current) clearTimeout(debounceRef.current);
+		};
+	}, []);
 	useEffect(() => {
 		if (props.submitOnInit) form.submit();
 		if (props.submitEvery) {
@@ -4042,7 +5404,7 @@ const DataTable = (props) => {
 		currentPage,
 		form
 	]);
-	const totalColumns = visibleColumns.length + (panelConfig ? 1 : 0) + (props.withCheckbox ? 1 : 0);
+	const totalColumns = visibleColumns.length + (panelConfig ? 1 : 0) + (props.withCheckbox ? 1 : 0) + (props.rowActions ? 1 : 0);
 	const checkboxHeader = props.withCheckbox ? /* @__PURE__ */ jsx(Table.Th, {
 		style: { width: 40 },
 		children: /* @__PURE__ */ jsx(Checkbox, {
@@ -4065,18 +5427,20 @@ const DataTable = (props) => {
 					userSelect: "none"
 				} : {}
 			},
-			children: /* @__PURE__ */ jsxs(Flex$1, {
+			children: /* @__PURE__ */ jsxs(Flex, {
 				align: "center",
 				gap: 4,
-				children: [/* @__PURE__ */ jsx(Text$1, {
+				children: [/* @__PURE__ */ jsx(Text, {
+					bold: true,
+					muted: true,
 					size: "xs",
 					children: col.label
-				}), col.sortable && /* @__PURE__ */ jsxs(Flex$1, {
+				}), col.sortable && /* @__PURE__ */ jsxs(Flex, {
 					c: "dimmed",
 					children: [
-						sortDir === "asc" && /* @__PURE__ */ jsx(IconArrowUp, { size: ui.sizes.icon.sm }),
-						sortDir === "desc" && /* @__PURE__ */ jsx(IconArrowDown, { size: ui.sizes.icon.sm }),
-						sortDir === null && /* @__PURE__ */ jsx(IconArrowsSort, { size: ui.sizes.icon.sm })
+						sortDir === "asc" && /* @__PURE__ */ jsx(IconArrowUp, { size: ui.sizes.icon.xs }),
+						sortDir === "desc" && /* @__PURE__ */ jsx(IconArrowDown, { size: ui.sizes.icon.xs }),
+						sortDir === null && /* @__PURE__ */ jsx(IconArrowsSort, { size: ui.sizes.icon.xs })
 					]
 				})]
 			})
@@ -4113,7 +5477,7 @@ const DataTable = (props) => {
 							toggleExpand(itemKey);
 						},
 						style: { display: "inline-flex" },
-						children: /* @__PURE__ */ jsx(Flex$1, {
+						children: /* @__PURE__ */ jsx(Flex, {
 							c: "dimmed",
 							align: "center",
 							justify: "center",
@@ -4136,32 +5500,49 @@ const DataTable = (props) => {
 						form,
 						alepha
 					};
-					if (col.actions) {
-						const rowActions = col.actions(item, ctx).filter((a) => a.visible !== false);
-						return /* @__PURE__ */ jsx(Table.Td, {
-							py: 2,
-							px: 4,
-							style: col.fit ? FIT_STYLE : void 0,
-							onClick: (e) => e.stopPropagation(),
-							children: /* @__PURE__ */ jsx(Flex$1, {
-								gap: 4,
-								children: rowActions.map(({ visible: _, ...actionProps }, i) => /* @__PURE__ */ jsx(ActionButton, {
-									variant: "subtle",
-									size: "xs",
-									preventDefault: true,
-									h: 20,
-									...actionProps
-								}, i))
-							})
-						}, key);
-					}
+					const content = col.value?.(item, ctx);
 					return /* @__PURE__ */ jsx(Table.Td, {
-						py: 2,
-						px: 4,
 						style: col.fit ? FIT_STYLE : void 0,
-						children: col.value?.(item, ctx)
+						children: col.action ? /* @__PURE__ */ jsx(ActionButton, {
+							td: "inherit",
+							unstyled: true,
+							...col.action(item),
+							children: content
+						}) : content
 					}, key);
-				})
+				}),
+				props.rowActions && (() => {
+					const ctx = {
+						index,
+						form,
+						alepha
+					};
+					const actions = props.rowActions(item, ctx).filter((a) => a.visible !== false);
+					if (actions.length === 0) return /* @__PURE__ */ jsx(Table.Td, { style: FIT_STYLE });
+					return /* @__PURE__ */ jsx(Table.Td, {
+						py: 2,
+						px: 4,
+						style: FIT_STYLE,
+						onClick: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ jsx(ActionButton, {
+							variant: "minimal",
+							size: "xs",
+							icon: IconDotsVertical,
+							menu: { items: actions.map((action) => {
+								const Icon = action.icon;
+								return {
+									label: action.label ?? (typeof action.tooltip === "string" ? action.tooltip : void 0),
+									icon: Icon && isComponentType(Icon) ? /* @__PURE__ */ jsx(Icon, { size: 14 }) : Icon,
+									onClick: action.onClick ? async () => {
+										await action.onClick();
+										if (!action.skipRefresh) await form.submit();
+									} : void 0,
+									color: action.color
+								};
+							}) }
+						})
+					});
+				})()
 			]
 		}, itemKey)];
 		if (panelConfig && showPanel && isExpanded) elements.push(/* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
@@ -4179,13 +5560,19 @@ const DataTable = (props) => {
 			"sort"
 		]);
 	}, [props.filters, form.options.schema]);
-	return /* @__PURE__ */ jsxs(Flex$1, {
+	return /* @__PURE__ */ jsxs(Flex, {
+		gap: "xs",
 		flex: 1,
 		p: 0,
-		bdrs: "sm",
 		direction: "column",
-		children: [
-			/* @__PURE__ */ jsx(DataTableToolbar, {
+		style: { overflow: "hidden" },
+		children: [/* @__PURE__ */ jsxs(Flex, {
+			rounded: true,
+			bordered: true,
+			elevated: true,
+			shadowed: "xs",
+			col: true,
+			children: [/* @__PURE__ */ jsx(DataTableToolbar, {
 				columns: props.columns,
 				filters: props.filters,
 				columnVisibility,
@@ -4199,71 +5586,97 @@ const DataTable = (props) => {
 				selectedItems: selection.selectedItems,
 				checkboxActions: props.checkboxActions,
 				onClearSelection: selection.clear
-			}),
-			filterSchema && props.filters && /* @__PURE__ */ jsx(DataTableFilters, {
+			}), filterSchema && props.filters && /* @__PURE__ */ jsx(DataTableFilters, {
 				schema: filterSchema,
 				form,
 				typeFormProps: props.typeFormProps,
 				filterVisibility
-			}),
-			/* @__PURE__ */ jsx(Flex$1, {
-				className: "overflow-auto",
-				children: /* @__PURE__ */ jsxs(Table, {
-					"aria-label": "Data table",
-					withColumnBorders: true,
-					withRowBorders: true,
-					...props.tableProps,
-					children: [/* @__PURE__ */ jsx(Table.Thead, {
-						style: {
-							position: "sticky",
-							top: 0,
-							zIndex: 1,
-							backgroundColor: "var(--mantine-color-body)"
-						},
-						children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
-							panelConfig && /* @__PURE__ */ jsx(Table.Th, { style: { width: 36 } }),
-							checkboxHeader,
-							head
-						] })
-					}), /* @__PURE__ */ jsxs(Table.Tbody, {
-						style: {
-							opacity: form.submitting ? .5 : 1,
-							transition: "opacity 150ms ease"
-						},
-						children: [rows, items.content.length === 0 && /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+			})]
+		}), /* @__PURE__ */ jsxs(Flex, {
+			col: true,
+			rounded: true,
+			bordered: true,
+			elevated: true,
+			shadowed: "xs",
+			flex: 1,
+			style: { minHeight: 0 },
+			children: [
+				/* @__PURE__ */ jsx(Flex, {
+					className: "overflow-auto",
+					flex: 1,
+					style: { minHeight: 0 },
+					col: true,
+					children: /* @__PURE__ */ jsxs(Table, {
+						"aria-label": "Data table",
+						withRowBorders: true,
+						highlightOnHover: true,
+						...props.tableProps,
+						children: [/* @__PURE__ */ jsx(Table.Thead, {
+							bdrs: "md",
+							style: {
+								position: "sticky",
+								top: 0,
+								zIndex: 1,
+								backgroundColor: "var(--alepha-elevated)"
+							},
+							children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+								panelConfig && /* @__PURE__ */ jsx(Table.Th, { style: { width: 36 } }),
+								checkboxHeader,
+								head,
+								props.rowActions && /* @__PURE__ */ jsx(Table.Th, { style: FIT_STYLE })
+							] })
+						}), /* @__PURE__ */ jsx(Table.Tbody, { children: !loaded || form.submitting ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+							colSpan: totalColumns || 1,
+							py: "sm",
+							children: /* @__PURE__ */ jsx(Flex, {
+								justify: "center",
+								p: "md",
+								children: /* @__PURE__ */ jsx(Loader, {
+									size: "sm",
+									type: "dots"
+								})
+							})
+						}) }) : rows.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
 							colSpan: totalColumns || 1,
 							py: "xl",
-							style: { textAlign: "center" },
-							children: /* @__PURE__ */ jsx(Text$1, {
-								c: "dimmed",
-								size: "sm",
-								children: form.submitting ? "Loading…" : "No results"
+							children: /* @__PURE__ */ jsx(Flex, {
+								justify: "center",
+								children: /* @__PURE__ */ jsx(Text, {
+									c: "dimmed",
+									size: "sm",
+									children: props.emptyLabel ?? "No results"
+								})
 							})
-						}) })]
-					})]
+						}) }) : rows })]
+					})
+				}),
+				props.infinityScroll && /* @__PURE__ */ jsx("div", { ref: sentinelRef }),
+				!props.infinityScroll && /* @__PURE__ */ jsx(DataTablePagination, {
+					page,
+					size,
+					totalPages: items.page?.totalPages,
+					totalElements: items.page?.totalElements,
+					isFirst: items.page?.isFirst,
+					isLast: items.page?.isLast,
+					offset: items.page?.offset ?? 0,
+					numberOfElements: items.content.length,
+					onPageChange: (value) => {
+						form.input.page.set(value - 1);
+					},
+					onSizeChange: (value) => {
+						form.input.size.set(value);
+					}
+				}),
+				drawerConfig && /* @__PURE__ */ jsx(Drawer, {
+					opened: drawerItem !== null,
+					onClose: () => setDrawerItem(null),
+					position: "right",
+					size: "xl",
+					...drawerConfig.props,
+					children: drawerItem && drawerConfig.render(drawerItem)
 				})
-			}),
-			props.infinityScroll && /* @__PURE__ */ jsx("div", { ref: sentinelRef }),
-			!props.infinityScroll && /* @__PURE__ */ jsx(DataTablePagination, {
-				page,
-				size,
-				totalPages: items.page?.totalPages ?? 1,
-				onPageChange: (value) => {
-					form.input.page.set(value - 1);
-				},
-				onSizeChange: (value) => {
-					form.input.size.set(value);
-				}
-			}),
-			drawerConfig && /* @__PURE__ */ jsx(Drawer, {
-				opened: drawerItem !== null,
-				onClose: () => setDrawerItem(null),
-				position: "right",
-				size: "xl",
-				...drawerConfig.props,
-				children: drawerItem && drawerConfig.render(drawerItem)
-			})
-		]
+			]
+		})]
 	});
 };
 
@@ -4391,8 +5804,8 @@ const OPERATOR_INFO = {
 * Get the default icon for an input based on its type, format, or name.
 */
 const getDefaultIcon = (params) => {
-	const { type, format, name, isEnum, isArray, size = "sm" } = params;
-	const iconSize = ui.sizes.icon[size];
+	const { type, format, name, isEnum, isArray, size = "xs" } = params;
+	const iconSize = ui.sizes.icon[size] - 4;
 	if (format) switch (format) {
 		case "email": return /* @__PURE__ */ jsx(IconMail, { size: iconSize });
 		case "url":
@@ -4505,5 +5918,5 @@ const AlephaUI = $module({
 });
 
 //#endregion
-export { $ui, ActionButton, DashboardShell as AdminShell, DashboardShell, AlephaMantineProvider, AlephaUI, AlertDialog, AppBar, Breadcrumb as Breadcrumbs, BurgerButton, ClipboardButton, ConfirmDialog, Container, Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlQueryBuilder, ControlSelect, DarkModeButton, DataTable, DetailDrawer, DetailList, DialogService, Flex, Heading, JsonViewer, LanguageButton, OPERATOR_INFO, Omnibar, OmnibarButton, PromptDialog, Sidebar, ToggleSidebarButton as SidebarCollapseButton, StatCards, Text, ThemeButton, ThemeProvider, ToastService, TypeForm, UiRouter, alephaSidebarAtom, alephaThemeAtom, alephaThemeListAtom, capitalize, defaultTheme, dialogForm, dialogJson, extractSchemaFields, getDefaultIcon, getOperatorsForField, isComponentType, midnightTheme, prettyName, renderIcon, toTitleCase, ui, useDialog, useTheme, useToast };
+export { $ui, ActionButton, DashboardShell as AdminShell, DashboardShell, AlephaMantineProvider, AlephaUI, AlertDialog, AppBar, Breadcrumb as Breadcrumbs, BurgerButton, ClipboardButton, ConfirmDialog, Container, Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlQueryBuilder, ControlSelect, DarkModeButton, DataTable, DetailDrawer, DetailList, DialogService, Flex, Heading, JsonViewer, LanguageButton, OPERATOR_INFO, Omnibar, OmnibarButton, PromptDialog, Sidebar, ToggleSidebarButton as SidebarCollapseButton, SidebarCollapsedItem, SidebarItem, StatCards, Text, ThemeButton, ThemeProvider, ToastService, TypeForm, UiRouter, alephaSidebarAtom, alephaThemeAtom, alephaThemeListAtom, alephaThemeOverridesAtom, capitalize, defaultTheme, dialogForm, dialogJson, extractSchemaFields, getDefaultIcon, getOperatorsForField, isComponentType, midnightTheme, prettyName, renderIcon, toTitleCase, ui, useDialog, useTheme, useToast };
 //# sourceMappingURL=index.js.map