@alepha/ui 0.18.1 → 0.18.3

package/dist/demo/{core-RCUw1Q-a.js → core-DFgB3yU4.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, Divider, Drawer, Fieldset, FileInput, Flex, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, SimpleGrid, Slider, Switch, Table, TagsInput, Text, 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, Divider, Drawer, Fieldset, FileInput, Flex, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Switch, Table, TagsInput, Text, TextInput, Textarea, ThemeIcon, Tooltip, Tree, UnstyledButton, getTreeExpandedState, useMantineColorScheme, useMantineTheme, useTree } from "@mantine/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, Fragment as Fragment$1, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Notifications, notifications } from "@mantine/notifications";
-import { IconAlertTriangle, IconArrowDown, IconArrowLeft, IconArrowUp, IconArrowsSort, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClipboard, IconClock, IconColorPicker, IconColumns, IconCopy, IconDownload, IconFile, IconFilter, IconGripVertical, IconHash, IconInfoCircle, IconInfoTriangle, IconKey, IconLanguage, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconPlus, IconRefresh, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconTrash, IconX } from "@tabler/icons-react";
+import { 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, { w: ui.sizes.icon.sm })),
+		onClick: item.onClick,
+		color: item.color,
+		...menuItemProps,
+		children: item.label
+	}, index);
+};
 
 //#endregion
 //#region ../../src/core/components/buttons/BurgerButton.tsx
@@ -905,11 +1857,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, {
@@ -928,7 +1880,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),
@@ -947,8 +1899,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"
@@ -985,6 +1936,261 @@ 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, {
+		direction: "column",
+		gap: "lg",
+		children: [
+			/* @__PURE__ */ jsxs(Flex, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text, {
+					fw: 500,
+					size: "sm",
+					children: "Primary Color"
+				}), /* @__PURE__ */ jsx(SimpleGrid, {
+					cols: 6,
+					spacing: "xs",
+					children: MANTINE_COLORS.map((color) => /* @__PURE__ */ jsx(Flex, {
+						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, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text, {
+					fw: 500,
+					size: "sm",
+					children: "Border Radius"
+				}), /* @__PURE__ */ jsx(Flex, {
+					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, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text, {
+					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, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text, {
+					fw: 500,
+					size: "sm",
+					children: "Font Size"
+				}), /* @__PURE__ */ jsx(Flex, {
+					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, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text, {
+					fw: 500,
+					size: "sm",
+					children: "Scale"
+				}), /* @__PURE__ */ jsx(Flex, {
+					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, {
+				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: "default",
+		icon: IconPalette,
+		menu: { items },
+		...actionProps
+	});
+};
+
 //#endregion
 //#region ../../src/core/components/buttons/ToggleSidebarButton.tsx
 const ToggleSidebarButton = (props) => {
@@ -992,8 +2198,7 @@ const ToggleSidebarButton = (props) => {
 	return /* @__PURE__ */ jsx(ActionButton, {
 		icon: sidebar.collapsed ? IconLayoutSidebarRightCollapse : IconLayoutSidebarLeftCollapse,
 		visibleFrom: "md",
-		variant: "subtle",
-		size: "md",
+		variant: "default",
 		onClick: () => {
 			setSidebar({
 				...sidebar,
@@ -1011,7 +2216,7 @@ const ToggleSidebarButton = (props) => {
 //#endregion
 //#region ../../src/core/components/Flex.tsx
 const Flex$1 = 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) {
@@ -1020,6 +2225,21 @@ const Flex$1 = 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, {
 		ref,
 		...rest
@@ -1043,6 +2263,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$1, { w: 16 }, index);
@@ -1156,7 +2377,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 = [];
@@ -1211,11 +2433,175 @@ const Container$1 = forwardRef((props, ref) => {
 });
 Container$1.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$1 = forwardRef((props, ref) => {
+	const { intent, bold, italic, light, muted, small, uppercase, capitalize, center, monospace, title, ...rest } = props;
+	if (intent) rest.c ??= INTENT_COLORS[intent];
+	if (bold) rest.fw ??= 700;
+	if (light) rest.fw ??= 300;
+	if (italic) rest.fs ??= "italic";
+	if (muted) rest.c ??= "dimmed";
+	if (small) rest.size ??= "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, {
+		ref,
+		...rest
+	});
+});
+Text$1.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$1, {
+		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$1, {
+		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$1, {
+				w: "100%",
+				align: "center",
+				gap: "sm",
+				children: [renderIcon(props.item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Flex$1, {
+					direction: "column",
+					children: /* @__PURE__ */ jsx(Flex$1, { children: props.item.label })
+				})]
+			}),
+			rightSection: props.item.children ? /* @__PURE__ */ jsx(Flex$1, { 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$1, {
+			direction: "column",
+			"data-parent-level": props.level,
+			gap: 2,
+			py: 2,
+			children: [/* @__PURE__ */ jsx(Flex$1, { style: {
+				position: "absolute",
+				width: 1,
+				background: "linear-gradient(to bottom, transparent, var(--mantine-color-default-border), transparent)",
+				top: 48,
+				left: 20 + 32 * 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$1, {
 			h: 1,
@@ -1233,6 +2619,9 @@ const Sidebar = (props) => {
 			if (item.type === "divider") return divider(key, item.fill, collapsed);
 			if (item.type === "search") return /* @__PURE__ */ jsx(Flex$1, {
 				mb: "xs",
+				w: "100%",
+				justify: "center",
+				pos: "relative",
 				children: /* @__PURE__ */ jsx(OmnibarButton, { collapsed })
 			}, key);
 			if (item.type === "toggle") return /* @__PURE__ */ jsx(ToggleSidebarButton, {}, key);
@@ -1240,7 +2629,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$1, {
 					mt: "md",
 					align: "center",
@@ -1263,13 +2652,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);
 	};
@@ -1290,7 +2679,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$1, {
 		flex: 1,
@@ -1332,117 +2721,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$1, {
-		direction: "column",
-		ps: level === 0 ? 0 : 32,
-		pos: "relative",
-		children: [/* @__PURE__ */ jsx(ActionButton, {
-			w: "100%",
-			justify: "space-between",
-			href: props.item.href,
-			target: props.item.target,
-			size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
-			bd: 0,
-			fw: "normal",
-			variant: "default",
-			propsActive: {
-				variant: "outline",
-				fw: "bold"
-			},
-			radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
-			onClick: handleItemClick,
-			leftSection: /* @__PURE__ */ jsxs(Flex$1, {
-				w: "100%",
-				align: "center",
-				gap: "sm",
-				children: [renderIcon(item.icon, ui.sizes.icon.sm), /* @__PURE__ */ jsx(Flex$1, {
-					direction: "column",
-					children: /* @__PURE__ */ jsx(Flex$1, { children: item.label })
-				})]
-			}),
-			rightSection: item.children ? /* @__PURE__ */ jsx(Flex$1, { children: isOpen ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }) }) : props.item.rightSection,
-			...props.item.actionProps
-		}), item.children && isOpen && /* @__PURE__ */ jsxs(Flex$1, {
-			direction: "column",
-			"data-parent-level": level,
-			children: [/* @__PURE__ */ jsx(Flex$1, { style: {
-				position: "absolute",
-				width: 1,
-				background: "linear-gradient(to bottom, transparent, var(--mantine-color-default-border), transparent)",
-				top: 48,
-				left: 20 + 32 * level,
-				bottom: 16
-			} }), item.children.filter((child) => !child.can || child.can()).map((child, index) => /* @__PURE__ */ jsx(SidebarItem, {
-				item: child,
-				level: level + 1,
-				onItemClick: props.onItemClick,
-				theme: props.theme
-			}, index))]
-		})]
-	});
-};
-const SidebarCollapsedItem = (props) => {
-	const { item, level } = props;
-	const router = useRouter();
-	const handleItemClick = () => {
-		props.onItemClick?.(item);
-		item.onClick?.();
-	};
-	const hasChildren = item.children && item.children.length > 0;
-	const menu = hasChildren ? {
-		on: "hover",
-		position: "right",
-		items: item.children.filter((child) => !child.can || child.can()).map((child) => ({
-			label: child.label,
-			icon: renderIcon(child.icon, ui.sizes.icon.sm),
-			href: child.href,
-			active: child.href ? router.isActive(child.href, { startWith: child.activeStartsWith }) : void 0
-		}))
-	} : void 0;
-	return /* @__PURE__ */ jsx(ActionButton, {
-		size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
-		variant: "subtle",
-		variantActive: "default",
-		tooltip: hasChildren ? void 0 : {
-			label: item.label,
-			position: "right"
-		},
-		radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
-		onClick: hasChildren ? void 0 : handleItemClick,
-		icon: renderIcon(item.icon, ui.sizes.icon.sm) ?? /* @__PURE__ */ jsx(IconSquareRounded, { size: ui.sizes.icon.sm }),
-		href: hasChildren ? void 0 : props.item.href,
-		target: hasChildren ? void 0 : props.item.target,
-		menu,
-		...props.item.actionProps
-	});
-};
 
 //#endregion
 //#region ../../src/core/components/layout/DashboardShell.tsx
@@ -1483,13 +2761,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,
@@ -1504,73 +2785,49 @@ const DashboardShell = (props) => {
 				})
 			}),
 			hasSidebar && /* @__PURE__ */ jsxs(AppShell.Navbar, {
-				className: "alepha-sidebar-navbar",
 				...props.appShellNavbarProps,
 				children: [
 					props.navbarHeader ? /* @__PURE__ */ jsx(Flex$1, {
 						style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
 						h: headerHeight,
-						children: props.navbarHeader
+						children: props.navbarHeader({ collapsed })
 					}) : null,
 					/* @__PURE__ */ jsx(Sidebar, {
 						...props.sidebarProps ?? {},
 						collapsed
-					}),
-					props.navbarFooter ? /* @__PURE__ */ jsx(Flex$1, {
-						style: { borderTop: "1px solid var(--mantine-color-default-border)" },
-						h: footerHeight,
-						children: props.navbarFooter
-					}) : null
-				]
-			}),
-			/* @__PURE__ */ jsx(AppShell.Main, {
-				pos: "relative",
-				...props.appShellMainProps,
-				children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
-			}),
-			footerElement && /* @__PURE__ */ jsx(AppShell.Footer, {
-				...props.appShellFooterProps,
-				children: footerElement
-			})
-		]
-	});
-};
-
-//#endregion
-//#region ../../src/core/components/Text.tsx
-const INTENT_COLORS = {
-	primary: "blue",
-	info: "cyan",
-	success: "green",
-	warning: "yellow",
-	danger: "red"
-};
-const Text$1 = forwardRef((props, ref) => {
-	const { intent, bold, italic, light, muted, small, uppercase, capitalize, center, monospace, title, ...rest } = props;
-	if (intent) rest.c ??= INTENT_COLORS[intent];
-	if (bold) rest.fw ??= 700;
-	if (light) rest.fw ??= 300;
-	if (italic) rest.fs ??= "italic";
-	if (muted) rest.c ??= "dimmed";
-	if (small) rest.size ??= "sm";
-	if (uppercase) rest.tt ??= "uppercase";
-	if (capitalize) rest.tt ??= "capitalize";
-	if (center) rest.ta ??= "center";
-	if (monospace) rest.ff ??= "monospace";
-	if (title) rest.size ??= "xl";
-	return /* @__PURE__ */ jsx(Text, {
-		ref,
-		...rest
+					}),
+					props.navbarFooter ? /* @__PURE__ */ jsx(Flex$1, {
+						style: { borderTop: "1px solid var(--mantine-color-default-border)" },
+						h: footerHeight,
+						children: props.navbarFooter
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx(AppShell.Main, {
+				display: "flex",
+				bg: "var(--alepha-ground)",
+				pos: "relative",
+				h: props.fill ? "100%" : "inherit",
+				...props.appShellMainProps,
+				children: props.container ? /* @__PURE__ */ jsx(Container$1, {
+					...typeof props.container === "boolean" ? {} : props.container,
+					children: mainContent
+				}) : mainContent
+			}),
+			footerElement && /* @__PURE__ */ jsx(AppShell.Footer, {
+				...props.appShellFooterProps,
+				children: footerElement
+			})
+		]
 	});
-});
-Text$1.displayName = "Text";
+};
 
 //#endregion
 //#region ../../src/core/form/utils/parseInput.ts
 const parseInput = (props, form) => {
 	const disabled = false;
 	const id = props.input.props.id;
-	const label = props.title ?? ("title" in props.input.schema && typeof props.input.schema.title === "string" ? props.input.schema.title : void 0) ?? prettyName(props.input.path);
+	const 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({
@@ -1578,17 +2835,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;
@@ -1613,8 +2873,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
 		}));
@@ -1640,22 +2900,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,
@@ -1680,10 +2927,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
 	};
@@ -1698,10 +2945,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)
 	};
@@ -1919,7 +3166,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 : {};
@@ -1927,10 +3176,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
 		});
 	}
@@ -1940,10 +3187,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
 		});
 	}
@@ -1953,10 +3198,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
 		});
 	}
@@ -1969,14 +3212,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;
@@ -1989,34 +3228,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);
 		}
 	});
 };
@@ -2099,92 +3329,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, {
 		gap: "md",
 		align: "flex-start",
@@ -2347,110 +3494,313 @@ 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, { 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, {
+				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,
+		...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,
-		...props.input.props,
-		...selectProps
-	});
+		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
@@ -2481,6 +3831,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 = {
@@ -2488,12 +3839,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) {
@@ -2504,9 +3854,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);
 					}
 				})
 			})
@@ -2517,7 +3867,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
 		});
@@ -2528,18 +3878,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
@@ -2552,9 +3902,7 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			onChange: (file) => {
-				props.input.set(file);
-			},
+			onChange: (file) => setValue(file),
 			...fileInputProps
 		});
 	}
@@ -2565,17 +3913,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
@@ -2589,16 +3938,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"
 			}, {
@@ -2608,7 +3957,7 @@ const Control = (_props) => {
 		};
 		return /* @__PURE__ */ jsx(ControlSelect, {
 			size: props.size,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			icon,
 			...opts
@@ -2621,7 +3970,8 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			...props.input.props,
+			value: value ?? "",
+			onChange: (ev) => setValue(ev.target.value),
 			...passwordInputProps
 		});
 	}
@@ -2632,14 +3982,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,
@@ -2654,7 +4005,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, {
@@ -2663,14 +4014,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
 	});
 };
 
@@ -2719,6 +4065,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);
@@ -2781,10 +4128,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"
 						})]
@@ -2804,33 +4153,27 @@ const TypeForm = (props) => {
 };
 
 //#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,
@@ -2879,77 +4222,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 = ({ 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, {
+		if (!props.expanded) return /* @__PURE__ */ jsx(Text, {
 			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`} }`
 		});
@@ -2959,25 +4246,25 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 	return /* @__PURE__ */ jsxs(Flex, {
 		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, {
 				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: ":"
@@ -2985,7 +4272,7 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 			}),
 			nodeKey !== void 0 && isArrayItem && /* @__PURE__ */ jsxs(Text, {
 				component: "span",
-				size,
+				size: props.size,
 				children: [/* @__PURE__ */ jsx("span", {
 					style: STYLES.key,
 					children: nodeKey
@@ -2994,25 +4281,29 @@ const RowNode = ({ node, expanded, hasChildren, elementProps, size, config, show
 					children: ":"
 				})]
 			}),
-			hasChildren ? getPreview() : isExpandable ? type === "array" ? /* @__PURE__ */ jsx(Text, {
+			props.hasChildren ? getPreview() : isExpandable ? type === "array" ? /* @__PURE__ */ jsx(Text, {
 				component: "span",
-				size,
+				size: props.size,
 				style: STYLES.preview,
 				children: "[]"
 			}) : /* @__PURE__ */ jsx(Text, {
 				component: "span",
-				size,
+				size: props.size,
 				style: STYLES.preview,
 				children: "{}"
-			}) : renderValue(nodeValue, nodeKey, path),
-			showCopyButton && /* @__PURE__ */ jsx(CopyButton, {
+			}) : 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);
@@ -3092,7 +4383,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,
@@ -3124,6 +4415,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/table/interfaces/types.ts
@@ -3131,7 +4470,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;
@@ -3142,13 +4482,14 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 		return t.object(visibleProps);
 	}, [schema, filterVisibility]);
 	if (!visibleSchema) return null;
-	return /* @__PURE__ */ jsx(Flex, {
-		w: "100%",
+	return /* @__PURE__ */ jsx(Flex$1, {
+		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,
@@ -3159,7 +4500,7 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 				sm: 2,
 				md: 3,
 				lg: 4,
-				xl: 6
+				xl: 5
 			}
 		})
 	});
@@ -3167,48 +4508,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, {
+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$1, {
 		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, { 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$1, {
+			align: "center",
+			children: /* @__PURE__ */ jsx(Text$1, {
+				size: "xs",
+				c: "dimmed",
+				children: totalElements != null ? `Showing ${from} - ${to} of ${totalElements}` : `Showing ${from} - ${to}`
+			})
+		}), /* @__PURE__ */ jsxs(Flex$1, {
+			align: "center",
+			gap: "md",
+			children: [/* @__PURE__ */ jsx(Flex$1, { 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, { 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$1, { children: /* @__PURE__ */ jsx(Pagination, {
+				size: "sm",
+				withEdges: hasTotal,
+				withPages: hasTotal,
+				total: hasTotal ? totalPages : isLast !== false ? page : page + 1,
+				value: page,
+				onChange: onPageChange
+			}) })]
+		})]
 	});
 };
 
@@ -3255,7 +4612,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, {
@@ -3285,12 +4642,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"
 						})]
@@ -3356,7 +4713,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, {
@@ -3386,12 +4743,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"
 						})]
@@ -3430,7 +4787,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();
@@ -3467,11 +4824,10 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 		};
 		await action.onClick(ctx);
 	};
-	return /* @__PURE__ */ jsxs(Flex, {
+	return /* @__PURE__ */ jsxs(Flex$1, {
 		p: "xs",
-		style: { borderBottom: "1px solid var(--alepha-border)" },
 		children: [
-			/* @__PURE__ */ jsxs(Flex, {
+			/* @__PURE__ */ jsxs(Flex$1, {
 				gap: 4,
 				align: "center",
 				children: [
@@ -3486,7 +4842,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",
@@ -3509,7 +4865,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,
@@ -3526,14 +4882,14 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 					] })
 				]
 			}),
-			/* @__PURE__ */ jsx(Flex, { flex: 1 }),
-			/* @__PURE__ */ jsxs(Flex, {
+			/* @__PURE__ */ jsx(Flex$1, { flex: 1 }),
+			/* @__PURE__ */ jsxs(Flex$1, {
 				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
 				})]
@@ -3642,12 +4998,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;
@@ -3720,13 +5080,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 () => {
@@ -3746,9 +5107,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) {
@@ -3779,7 +5154,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, {
@@ -3802,18 +5177,20 @@ const DataTable = (props) => {
 					userSelect: "none"
 				} : {}
 			},
-			children: /* @__PURE__ */ jsxs(Flex, {
+			children: /* @__PURE__ */ jsxs(Flex$1, {
 				align: "center",
 				gap: 4,
-				children: [/* @__PURE__ */ jsx(Text, {
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					bold: true,
+					muted: true,
 					size: "xs",
 					children: col.label
-				}), col.sortable && /* @__PURE__ */ jsxs(Flex, {
+				}), col.sortable && /* @__PURE__ */ jsxs(Flex$1, {
 					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 })
 					]
 				})]
 			})
@@ -3850,7 +5227,7 @@ const DataTable = (props) => {
 							toggleExpand(itemKey);
 						},
 						style: { display: "inline-flex" },
-						children: /* @__PURE__ */ jsx(Flex, {
+						children: /* @__PURE__ */ jsx(Flex$1, {
 							c: "dimmed",
 							align: "center",
 							justify: "center",
@@ -3873,32 +5250,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, {
-								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, {
@@ -3916,13 +5310,19 @@ const DataTable = (props) => {
 			"sort"
 		]);
 	}, [props.filters, form.options.schema]);
-	return /* @__PURE__ */ jsxs(Flex, {
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		gap: "xs",
 		flex: 1,
 		p: 0,
-		bdrs: "sm",
 		direction: "column",
-		children: [
-			/* @__PURE__ */ jsx(DataTableToolbar, {
+		style: { overflow: "hidden" },
+		children: [/* @__PURE__ */ jsxs(Flex$1, {
+			rounded: true,
+			bordered: true,
+			elevated: true,
+			shadowed: "xs",
+			col: true,
+			children: [/* @__PURE__ */ jsx(DataTableToolbar, {
 				columns: props.columns,
 				filters: props.filters,
 				columnVisibility,
@@ -3936,71 +5336,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, {
-				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$1, {
+			col: true,
+			rounded: true,
+			bordered: true,
+			elevated: true,
+			shadowed: "xs",
+			flex: 1,
+			style: { minHeight: 0 },
+			children: [
+				/* @__PURE__ */ jsx(Flex$1, {
+					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$1, {
+								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, {
-								c: "dimmed",
-								size: "sm",
-								children: form.submitting ? "Loading…" : "No results"
+							children: /* @__PURE__ */ jsx(Flex$1, {
+								justify: "center",
+								children: /* @__PURE__ */ jsx(Text$1, {
+									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)
-			})
-		]
+			]
+		})]
 	});
 };
 
@@ -4099,8 +5525,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":
@@ -4213,5 +5639,5 @@ const AlephaUI = $module({
 });
 
 //#endregion
-export { AlephaMantineProvider as _, useDialog as a, Text$1 as c, Breadcrumb as d, Heading as f, ui as g, ActionButton as h, JsonViewer as i, DashboardShell as l, ToggleSidebarButton as m, capitalize as n, TypeForm as o, Flex$1 as p, DataTable as r, Control as s, AlephaUI as t, Sidebar as u, useToast as v };
-//# sourceMappingURL=core-RCUw1Q-a.js.map
+export { AlephaMantineProvider as _, TypeForm as a, Sidebar as c, Heading as d, Flex$1 as f, ui as g, ActionButton as h, JsonViewer as i, Text$1 as l, useDialog as m, capitalize as n, Control as o, ToggleSidebarButton as p, DataTable as r, DashboardShell as s, AlephaUI as t, Breadcrumb as u, useToast as v };
+//# sourceMappingURL=core-DFgB3yU4.js.map