@alepha/ui 0.18.1 → 0.18.2

package/dist/core/index.js

@@ -1,14 +1,14 @@
 import { $atom, $context, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
 import { AlephaReactForm, FormValidationError, useForm, useFormState } from "alepha/react/form";
-import { $head, AlephaReactHead } from "alepha/react/head";
+import { $head, AlephaReactHead, BrowserHeadProvider } from "alepha/react/head";
 import { AlephaReactI18n, useI18n } from "alepha/react/i18n";
 import { $cookie } from "alepha/server/cookies";
+import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, ColorInput, ColorSchemeScript, ColorSwatch, Container as Container$1, CopyButton, Divider, Drawer, Fieldset, FileInput, Flex as Flex$1, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, SimpleGrid, Slider, Switch, Table, Tabs, TagsInput, Text as Text$1, TextInput, Textarea, Tooltip, Tree, UnstyledButton, getTreeExpandedState, useMantineColorScheme, useMantineTheme, useTree } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
-import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, ColorInput, ColorSchemeScript, Container as Container$1, CopyButton, Divider, Drawer, Fieldset, FileInput, Flex as Flex$1, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Switch, Table, Tabs, TagsInput, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, Tree, UnstyledButton, getTreeExpandedState, useMantineColorScheme, useMantineTheme, useTree } from "@mantine/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, Fragment as Fragment$1, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Notifications, notifications } from "@mantine/notifications";
-import { IconAlertTriangle, IconArrowDown, IconArrowLeft, IconArrowUp, IconArrowsSort, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClipboard, IconClock, IconColorPicker, IconColumns, IconCopy, IconDownload, IconFile, IconFilter, IconGripVertical, IconHash, IconInfoCircle, IconInfoTriangle, IconKey, IconLanguage, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconPlus, IconRefresh, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconTrash, IconX } from "@tabler/icons-react";
+import { IconAlertTriangle, IconArrowDown, IconArrowLeft, IconArrowUp, IconArrowsSort, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClipboard, IconClock, IconColorPicker, IconColumns, IconCopy, IconDotsVertical, IconDownload, IconFile, IconFilter, IconGripVertical, IconHash, IconInfoCircle, IconInfoTriangle, IconKey, IconLanguage, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconPlus, IconRefresh, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconTrash, IconX } from "@tabler/icons-react";
 import { $page, Link, NestedView, useActive, useRouter, useRouterState } from "alepha/react/router";
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
 import { ClientOnly, useAction, useAlepha, useEvents, useInject, useStore } from "alepha/react";
@@ -32,7 +32,7 @@ const alephaSidebarAtom = $atom({
 		closed: true,
 		collapsed: false,
 		expandedWidth: 300,
-		collapsedWidth: 78
+		collapsedWidth: 72
 	}
 });
 
@@ -44,6 +44,20 @@ const alephaThemeAtom = $atom({
 	default: { index: 0 }
 });
 
+//#endregion
+//#region ../../src/core/atoms/alephaThemeOverridesAtom.ts
+const alephaThemeOverridesAtom = $atom({
+	name: "alepha.ui.themeOverrides",
+	schema: t.object({
+		primaryColor: t.optional(t.text()),
+		radius: t.optional(t.text()),
+		fontFamily: t.optional(t.text()),
+		fontSize: t.optional(t.text()),
+		scale: t.optional(t.text())
+	}),
+	default: {}
+});
+
 //#endregion
 //#region ../../src/core/atoms/themes/default.ts
 const defaultTheme = {
@@ -51,6 +65,161 @@ const defaultTheme = {
 	description: "Default Alepha Theme"
 };
 
+//#endregion
+//#region ../../src/core/atoms/themes/editorial.ts
+/**
+* Editorial theme.
+*
+* Serif typography, high contrast black and white, thin borders, generous whitespace.
+* Newspaper/magazine aesthetic — elegant restraint.
+*/
+const editorialTheme = {
+	name: "Editorial",
+	description: "Serif typography with newspaper elegance",
+	defaultColorScheme: "light",
+	head: { link: [
+		{
+			rel: "preconnect",
+			href: "https://fonts.googleapis.com"
+		},
+		{
+			rel: "preconnect",
+			href: "https://fonts.gstatic.com",
+			crossorigin: ""
+		},
+		{
+			rel: "stylesheet",
+			href: "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap"
+		}
+	] },
+	primaryColor: "ink",
+	primaryShade: {
+		light: 7,
+		dark: 3
+	},
+	autoContrast: true,
+	fontFamily: "\"Source Serif 4\", \"Georgia\", \"Times New Roman\", serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "\"Playfair Display\", \"Georgia\", \"Times New Roman\", serif",
+		fontWeight: "700",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2.5rem",
+				lineHeight: "1.15"
+			},
+			h2: {
+				fontSize: "1.75rem",
+				lineHeight: "1.2"
+			},
+			h3: {
+				fontSize: "1.375rem",
+				lineHeight: "1.3"
+			},
+			h4: {
+				fontSize: "1.125rem",
+				lineHeight: "1.4"
+			},
+			h5: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "sm",
+	radius: {
+		xs: "2px",
+		sm: "3px",
+		md: "4px",
+		lg: "6px",
+		xl: "8px"
+	},
+	shadows: {
+		xs: "0 1px 2px rgba(0, 0, 0, 0.06)",
+		sm: "0 1px 3px rgba(0, 0, 0, 0.08)",
+		md: "0 2px 6px rgba(0, 0, 0, 0.08)",
+		lg: "0 4px 12px rgba(0, 0, 0, 0.1)",
+		xl: "0 8px 24px rgba(0, 0, 0, 0.1)"
+	},
+	colors: {
+		ink: [
+			"#f5f3f0",
+			"#e8e4de",
+			"#d4cec5",
+			"#b5ad9f",
+			"#8c8272",
+			"#6b6050",
+			"#4a4035",
+			"#332b22",
+			"#1f1812",
+			"#0d0a07"
+		],
+		burgundy: [
+			"#faf0f0",
+			"#f0d4d4",
+			"#e0adad",
+			"#cc8585",
+			"#b35e5e",
+			"#944545",
+			"#763636",
+			"#5a2828",
+			"#3d1b1b",
+			"#220f0f"
+		],
+		gray: [
+			"#faf9f7",
+			"#f0eee9",
+			"#e0dcd5",
+			"#c8c2b8",
+			"#a8a194",
+			"#8a8273",
+			"#6b6456",
+			"#504a3f",
+			"#36322b",
+			"#1e1b17"
+		],
+		dark: [
+			"#d5d2cd",
+			"#aba59c",
+			"#817a6e",
+			"#5e584e",
+			"#46413a",
+			"#36322c",
+			"#2a2721",
+			"#201d19",
+			"#171411",
+			"#0d0b09"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: { letterSpacing: "0.02em" } }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Paper: Paper.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Card: Card.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		TextInput: TextInput.extend({ styles: { input: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Badge: Badge.extend({
+			defaultProps: {
+				fw: 600,
+				variant: "outline"
+			},
+			styles: { root: {
+				fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+				letterSpacing: "0.04em",
+				textTransform: "uppercase",
+				fontSize: "0.65rem"
+			} }
+		})
+	}
+};
+
 //#endregion
 //#region ../../src/core/atoms/themes/midnight.ts
 const midnightTheme = {
@@ -166,41 +335,793 @@ const midnightTheme = {
 	}
 };
 
+//#endregion
+//#region ../../src/core/atoms/themes/monochrome.ts
+/**
+* Monochrome theme.
+*
+* Pure black and white. No color. Bold typography does all the heavy lifting.
+* A design-school statement piece — minimalist color, maximalist type.
+*/
+const monochromeTheme = {
+	name: "Monochrome",
+	description: "Pure black and white — zero color, maximum typography",
+	primaryColor: "mono",
+	primaryShade: {
+		light: 8,
+		dark: 1
+	},
+	autoContrast: true,
+	fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+		fontWeight: "800",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2.25rem",
+				lineHeight: "1.15"
+			},
+			h2: {
+				fontSize: "1.625rem",
+				lineHeight: "1.25"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.35"
+			},
+			h4: {
+				fontSize: "1.0625rem",
+				lineHeight: "1.45"
+			},
+			h5: {
+				fontSize: "0.9375rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.8125rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "0",
+	radius: {
+		xs: "0",
+		sm: "0",
+		md: "0",
+		lg: "0",
+		xl: "2px"
+	},
+	shadows: {
+		xs: "0 1px 2px rgba(0, 0, 0, 0.08)",
+		sm: "0 1px 4px rgba(0, 0, 0, 0.1)",
+		md: "0 2px 8px rgba(0, 0, 0, 0.12)",
+		lg: "0 4px 16px rgba(0, 0, 0, 0.14)",
+		xl: "0 8px 32px rgba(0, 0, 0, 0.16)"
+	},
+	colors: {
+		mono: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		gray: [
+			"#f5f5f5",
+			"#e5e5e5",
+			"#cccccc",
+			"#b0b0b0",
+			"#909090",
+			"#707070",
+			"#555555",
+			"#3a3a3a",
+			"#252525",
+			"#121212"
+		],
+		blue: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		green: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		red: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		dark: [
+			"#d0d0d0",
+			"#a0a0a0",
+			"#707070",
+			"#505050",
+			"#383838",
+			"#282828",
+			"#1c1c1c",
+			"#141414",
+			"#0a0a0a",
+			"#000000"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 700 },
+			styles: { root: {
+				border: "2px solid currentColor",
+				letterSpacing: "0.03em",
+				textTransform: "uppercase",
+				fontSize: "0.8125rem"
+			} }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { border: "2px solid currentColor" } } }),
+		Paper: Paper.extend({ styles: { root: { border: "2px solid var(--mantine-color-default-border)" } } }),
+		Card: Card.extend({ styles: { root: { border: "2px solid var(--mantine-color-default-border)" } } }),
+		TextInput: TextInput.extend({ styles: { input: { border: "2px solid var(--mantine-color-default-border)" } } }),
+		Badge: Badge.extend({
+			defaultProps: {
+				fw: 700,
+				variant: "outline"
+			},
+			styles: { root: {
+				textTransform: "uppercase",
+				letterSpacing: "0.06em",
+				fontSize: "0.65rem",
+				border: "2px solid currentColor"
+			} }
+		})
+	}
+};
+
+//#endregion
+//#region ../../src/core/atoms/themes/rosePine.ts
+/**
+* Rosé Pine theme.
+*
+* Muted pinks, golds, and subtle greens on warm dark backgrounds.
+* Cozy, low-contrast, easy on the eyes.
+* Based on the Rosé Pine color philosophy.
+*/
+const rosePineTheme = {
+	name: "Rosé Pine",
+	description: "Muted pinks and golds on warm dark backgrounds",
+	defaultColorScheme: "dark",
+	primaryColor: "rose",
+	primaryShade: {
+		light: 5,
+		dark: 4
+	},
+	autoContrast: true,
+	fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+		fontWeight: "600",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2rem",
+				lineHeight: "1.25"
+			},
+			h2: {
+				fontSize: "1.5rem",
+				lineHeight: "1.3"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h5: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.75rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "md",
+	radius: {
+		xs: "4px",
+		sm: "6px",
+		md: "8px",
+		lg: "12px",
+		xl: "16px"
+	},
+	shadows: {
+		xs: "0 1px 3px rgba(0, 0, 0, 0.2)",
+		sm: "0 2px 6px rgba(0, 0, 0, 0.2)",
+		md: "0 4px 12px rgba(0, 0, 0, 0.25)",
+		lg: "0 8px 24px rgba(0, 0, 0, 0.3)",
+		xl: "0 12px 36px rgba(0, 0, 0, 0.35)"
+	},
+	colors: {
+		rose: [
+			"#faf0f4",
+			"#f2d8e3",
+			"#eabdd0",
+			"#e0a0bb",
+			"#d4849f",
+			"#c4748f",
+			"#b06282",
+			"#9a5275",
+			"#7a3f5e",
+			"#5c2e47"
+		],
+		gold: [
+			"#fdf8ec",
+			"#f8ecc8",
+			"#f2dda0",
+			"#eacb72",
+			"#e0b94d",
+			"#c9a33e",
+			"#a98830",
+			"#866b24",
+			"#634f1a",
+			"#403310"
+		],
+		pine: [
+			"#ecf5f0",
+			"#d0e6da",
+			"#add4be",
+			"#86c0a0",
+			"#62ac84",
+			"#4e9670",
+			"#3e7a5a",
+			"#2f5e44",
+			"#20412f",
+			"#12251b"
+		],
+		foam: [
+			"#edf6f7",
+			"#d2e9eb",
+			"#b0d9dd",
+			"#8bc6cc",
+			"#6ab3bb",
+			"#569da5",
+			"#438088",
+			"#33636a",
+			"#23454a",
+			"#14292c"
+		],
+		red: [
+			"#f9eef0",
+			"#efd3d8",
+			"#e3b2bb",
+			"#d68e9b",
+			"#c86c7c",
+			"#b25566",
+			"#944454",
+			"#733442",
+			"#52252f",
+			"#33161d"
+		],
+		gray: [
+			"#f4f0f2",
+			"#e4dde1",
+			"#cec5cb",
+			"#b5aab2",
+			"#9a8e96",
+			"#7e737a",
+			"#635a60",
+			"#4a4248",
+			"#332d31",
+			"#1e1a1c"
+		],
+		dark: [
+			"#e0d8e0",
+			"#b0a6b2",
+			"#817786",
+			"#615768",
+			"#4a3f54",
+			"#3a3044",
+			"#2a2436",
+			"#211e2e",
+			"#1a1724",
+			"#110f1a"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 500 },
+			styles: { root: { transition: "background-color 0.15s ease, opacity 0.15s ease" } }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { transition: "background-color 0.15s ease, opacity 0.15s ease" } } }),
+		Paper: Paper.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "1px solid var(--mantine-color-default-border)" } }
+		}),
+		Card: Card.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "1px solid var(--mantine-color-default-border)" } }
+		}),
+		TextInput: TextInput.extend({ styles: { input: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Badge: Badge.extend({ defaultProps: { fw: 500 } })
+	}
+};
+
+//#endregion
+//#region ../../src/core/atoms/themes/softBrutalism.ts
+/**
+* Soft Brutalism theme.
+*
+* Pastel pop palette with solid offset shadows, rounded corners, and bold borders.
+* A friendlier take on neubrutalism — playful but production-ready.
+*/
+const softBrutalismTheme = {
+	name: "Soft Brutalism",
+	description: "Pastel pop with bold borders and offset shadows",
+	head: { link: [
+		{
+			rel: "preconnect",
+			href: "https://fonts.googleapis.com"
+		},
+		{
+			rel: "preconnect",
+			href: "https://fonts.gstatic.com",
+			crossorigin: ""
+		},
+		{
+			rel: "stylesheet",
+			href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
+		}
+	] },
+	primaryColor: "lavender",
+	primaryShade: {
+		light: 5,
+		dark: 7
+	},
+	autoContrast: true,
+	cursorType: "pointer",
+	fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+		fontWeight: "700",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2rem",
+				lineHeight: "1.25"
+			},
+			h2: {
+				fontSize: "1.5rem",
+				lineHeight: "1.3"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h5: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.75rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "md",
+	radius: {
+		xs: "6px",
+		sm: "8px",
+		md: "12px",
+		lg: "16px",
+		xl: "24px"
+	},
+	shadows: {
+		xs: "2px 2px 0 0 rgba(100, 80, 140, 0.15)",
+		sm: "3px 3px 0 0 rgba(100, 80, 140, 0.2)",
+		md: "4px 4px 0 0 rgba(100, 80, 140, 0.2)",
+		lg: "6px 6px 0 0 rgba(100, 80, 140, 0.25)",
+		xl: "8px 8px 0 0 rgba(100, 80, 140, 0.3)"
+	},
+	colors: {
+		lavender: [
+			"#f3f0fa",
+			"#e4dcf4",
+			"#d1c4e9",
+			"#b4a7d6",
+			"#9a8bc4",
+			"#7f6cb0",
+			"#6a549e",
+			"#543f87",
+			"#3d2d6b",
+			"#2a1d52"
+		],
+		peach: [
+			"#fef3ec",
+			"#fce4d0",
+			"#f9d0ae",
+			"#f4b886",
+			"#f4a261",
+			"#e68a42",
+			"#c67234",
+			"#a35a28",
+			"#6b3a1a",
+			"#4a2710"
+		],
+		mint: [
+			"#ecfaf0",
+			"#d4f2dc",
+			"#b3e8c2",
+			"#8edba4",
+			"#81c995",
+			"#5ab874",
+			"#42a05c",
+			"#2e8548",
+			"#1a5c2e",
+			"#0f3f1e"
+		],
+		coral: [
+			"#fef0ef",
+			"#fcd9d7",
+			"#f8b8b4",
+			"#f29490",
+			"#e97171",
+			"#d65454",
+			"#b83e3e",
+			"#962d2d",
+			"#6b1f1f",
+			"#4a1414"
+		],
+		gray: [
+			"#faf8f6",
+			"#f0ece8",
+			"#ddd7d0",
+			"#c4bbb2",
+			"#a89e95",
+			"#8c8279",
+			"#6e655d",
+			"#524b44",
+			"#3a342f",
+			"#24211e"
+		],
+		dark: [
+			"#d4d0dc",
+			"#a9a2b5",
+			"#7e7690",
+			"#5c546e",
+			"#443c56",
+			"#342d45",
+			"#2a2339",
+			"#1e1a2e",
+			"#161224",
+			"#0f0c1a"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: {
+				border: "2px solid currentColor",
+				boxShadow: "3px 3px 0 0 rgba(100, 80, 140, 0.2)",
+				transition: "box-shadow 0.15s ease, transform 0.15s ease"
+			} }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: {
+			border: "2px solid currentColor",
+			boxShadow: "2px 2px 0 0 rgba(100, 80, 140, 0.15)"
+		} } }),
+		Paper: Paper.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "2px solid var(--mantine-color-default-border)" } }
+		}),
+		Card: Card.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "2px solid var(--mantine-color-default-border)" } }
+		}),
+		TextInput: TextInput.extend({ styles: { input: {
+			border: "2px solid var(--mantine-color-default-border)",
+			transition: "box-shadow 0.15s ease, border-color 0.15s ease"
+		} } }),
+		Badge: Badge.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: { border: "2px solid currentColor" } }
+		})
+	}
+};
+
+//#endregion
+//#region ../../src/core/atoms/themes/terminal.ts
+/**
+* Terminal theme.
+*
+* Monospace everything, green-on-black, zero radius.
+* CRT/hacker aesthetic for developer tools and dashboards.
+*/
+const terminalTheme = {
+	name: "Terminal",
+	description: "Green phosphor on black — monospace hacker aesthetic",
+	defaultColorScheme: "dark",
+	primaryColor: "terminal",
+	primaryShade: {
+		light: 5,
+		dark: 4
+	},
+	autoContrast: true,
+	fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+		fontWeight: "700",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "1.75rem",
+				lineHeight: "1.3"
+			},
+			h2: {
+				fontSize: "1.375rem",
+				lineHeight: "1.35"
+			},
+			h3: {
+				fontSize: "1.125rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h5: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.75rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "0",
+	radius: {
+		xs: "0",
+		sm: "0",
+		md: "0",
+		lg: "2px",
+		xl: "4px"
+	},
+	shadows: {
+		xs: "none",
+		sm: "none",
+		md: "0 0 8px rgba(0, 255, 65, 0.08)",
+		lg: "0 0 16px rgba(0, 255, 65, 0.1)",
+		xl: "0 0 24px rgba(0, 255, 65, 0.12)"
+	},
+	colors: {
+		terminal: [
+			"#e6fff0",
+			"#b3ffd1",
+			"#80ffb3",
+			"#4dff94",
+			"#00ff41",
+			"#00d636",
+			"#00ad2b",
+			"#008521",
+			"#005c17",
+			"#00330d"
+		],
+		amber: [
+			"#fff8e6",
+			"#ffecb3",
+			"#ffe080",
+			"#ffd54d",
+			"#ffca28",
+			"#d4a520",
+			"#aa8418",
+			"#806310",
+			"#554208",
+			"#2b2104"
+		],
+		red: [
+			"#ffe6e6",
+			"#ffb3b3",
+			"#ff8080",
+			"#ff4d4d",
+			"#ff1a1a",
+			"#d41515",
+			"#aa1010",
+			"#800c0c",
+			"#550808",
+			"#2b0404"
+		],
+		gray: [
+			"#e8eaed",
+			"#c8cdd3",
+			"#a4aab3",
+			"#808892",
+			"#5f6872",
+			"#474f58",
+			"#363c44",
+			"#282d33",
+			"#1c2026",
+			"#12151a"
+		],
+		dark: [
+			"#c9cdd2",
+			"#8b9198",
+			"#5c636b",
+			"#3d444c",
+			"#2b3138",
+			"#1e242b",
+			"#151a20",
+			"#0e1216",
+			"#080c0f",
+			"#020303"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: {
+				border: "1px solid currentColor",
+				textTransform: "uppercase",
+				letterSpacing: "0.05em",
+				fontSize: "0.8125rem"
+			} }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { border: "1px solid currentColor" } } }),
+		Paper: Paper.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Card: Card.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		TextInput: TextInput.extend({ styles: { input: {
+			border: "1px solid var(--mantine-color-default-border)",
+			fontFamily: "inherit"
+		} } }),
+		Badge: Badge.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: {
+				border: "1px solid currentColor",
+				textTransform: "uppercase",
+				letterSpacing: "0.05em"
+			} }
+		})
+	}
+};
+
 //#endregion
 //#region ../../src/core/atoms/alephaThemeListAtom.ts
 const alephaThemeListAtom = $atom({
 	name: "alepha.ui.themeList",
 	schema: t.array(t.json()),
-	default: [defaultTheme, midnightTheme]
+	default: [
+		defaultTheme,
+		midnightTheme,
+		softBrutalismTheme,
+		terminalTheme,
+		editorialTheme,
+		rosePineTheme,
+		monochromeTheme
+	]
 });
 
 //#endregion
 //#region ../../src/core/providers/ThemeProvider.ts
-var ThemeProvider = class {
+var ThemeProvider = class ThemeProvider {
 	alepha = $inject(Alepha);
 	cookie = $cookie({
 		name: "theme",
 		schema: alephaThemeAtom.schema,
 		ttl: [1, "year"]
 	});
+	overridesCookie = $cookie({
+		name: "themeOverrides",
+		schema: alephaThemeOverridesAtom.schema,
+		ttl: [1, "year"]
+	});
 	head = $head(() => {
 		const theme = this.getTheme();
 		if (!theme || !theme.name) return {};
-		return { htmlAttributes: { "data-theme": theme.name } };
+		return {
+			htmlAttributes: { "data-theme": this.slugify(theme.name) },
+			...theme.head
+		};
 	});
 	setTheme(index) {
-		const newTheme = this.alepha.store.get(alephaThemeListAtom)[index];
-		if (!newTheme) throw new AlephaError(`Theme with index ${index} not found`);
+		if (!this.alepha.store.get(alephaThemeListAtom)[index]) throw new AlephaError(`Theme with index ${index} not found`);
 		this.cookie.set({ index });
 		this.alepha.store.set(alephaThemeAtom, { index });
-		if (typeof document === "undefined") return;
-		document.documentElement.removeAttribute("data-theme");
-		if (newTheme.name) document.documentElement.setAttribute("data-theme", newTheme.name);
+		if (!this.alepha.isBrowser()) return;
+		this.alepha.inject(BrowserHeadProvider).refreshGlobalHead();
 	}
+	slugify(name) {
+		return name.toLowerCase().replace(/\s+/g, "-");
+	}
+	static FONT_SIZE_MULTIPLIERS = {
+		xs: .85,
+		sm: .925,
+		md: 1,
+		lg: 1.1,
+		xl: 1.25
+	};
+	static SCALE_VALUES = {
+		xs: .85,
+		sm: .925,
+		md: 1,
+		lg: 1.1,
+		xl: 1.25
+	};
+	static DEFAULT_FONT_SIZES = {
+		xs: "0.75rem",
+		sm: "0.875rem",
+		md: "1rem",
+		lg: "1.125rem",
+		xl: "1.25rem"
+	};
 	getTheme() {
 		const index = this.getThemeIndex();
 		const list = this.alepha.store.get(alephaThemeListAtom);
-		return list[index] || list[0] || defaultTheme;
+		const base = list[index] || list[0] || defaultTheme;
+		const overrides = this.getThemeOverrides();
+		if (!overrides.primaryColor && !overrides.radius && !overrides.fontFamily && !overrides.fontSize && !overrides.scale) return base;
+		const merged = {
+			...base,
+			...overrides.primaryColor && { primaryColor: overrides.primaryColor },
+			...overrides.radius && { defaultRadius: overrides.radius },
+			...overrides.fontFamily && { fontFamily: overrides.fontFamily },
+			...overrides.scale && overrides.scale !== "md" && { scale: ThemeProvider.SCALE_VALUES[overrides.scale] ?? 1 }
+		};
+		if (overrides.fontSize && overrides.fontSize !== "md") {
+			const multiplier = ThemeProvider.FONT_SIZE_MULTIPLIERS[overrides.fontSize] ?? 1;
+			const baseSizes = base.fontSizes ?? ThemeProvider.DEFAULT_FONT_SIZES;
+			merged.fontSizes = Object.fromEntries(Object.entries(baseSizes).map(([key, val]) => [key, `${(Number.parseFloat(String(val)) * multiplier).toFixed(4)}rem`]));
+		}
+		return merged;
+	}
+	setThemeOverrides(overrides) {
+		this.overridesCookie.set(overrides);
+		this.alepha.store.set(alephaThemeOverridesAtom, overrides);
+		if (!this.alepha.isBrowser()) return;
+		this.alepha.inject(BrowserHeadProvider).refreshGlobalHead();
+	}
+	getThemeOverrides() {
+		try {
+			return this.overridesCookie.get() ?? this.alepha.store.get(alephaThemeOverridesAtom) ?? {};
+		} catch {
+			return this.alepha.store.get(alephaThemeOverridesAtom) ?? {};
+		}
+	}
+	resetThemeOverrides() {
+		this.setThemeOverrides({});
 	}
 	getThemeIndex() {
 		try {
@@ -307,14 +1228,21 @@ var DialogService = class {
 	*/
 	alert(options) {
 		return new Promise((resolve) => {
+			let resolved = false;
+			const done = () => {
+				if (resolved) return;
+				resolved = true;
+				resolve();
+			};
 			const modalId = this.open({
 				...options,
 				title: options?.title || "Alert",
+				onClose: done,
 				content: /* @__PURE__ */ jsx(AlertDialog, {
 					options,
 					onClose: () => {
 						this.close(modalId);
-						resolve();
+						done();
 					}
 				})
 			});
@@ -325,16 +1253,23 @@ var DialogService = class {
 	*/
 	confirm(options) {
 		return new Promise((resolve) => {
+			let resolved = false;
+			const done = (confirmed) => {
+				if (resolved) return;
+				resolved = true;
+				resolve(confirmed);
+			};
 			const modalId = this.open({
 				...options,
 				title: options?.title || "Confirm",
 				closeOnClickOutside: false,
 				closeOnEscape: false,
+				onClose: () => done(false),
 				content: /* @__PURE__ */ jsx(ConfirmDialog, {
 					options,
 					onConfirm: (confirmed) => {
 						this.close(modalId);
-						resolve(confirmed);
+						done(confirmed);
 					}
 				})
 			});
@@ -345,16 +1280,23 @@ var DialogService = class {
 	*/
 	prompt(options) {
 		return new Promise((resolve) => {
+			let resolved = false;
+			const done = (value) => {
+				if (resolved) return;
+				resolved = true;
+				resolve(value);
+			};
 			const modalId = this.open({
 				...options,
 				title: options?.title || "Input",
 				closeOnClickOutside: false,
 				closeOnEscape: false,
+				onClose: () => done(null),
 				content: /* @__PURE__ */ jsx(PromptDialog, {
 					options,
 					onSubmit: (value) => {
 						this.close(modalId);
-						resolve(value);
+						done(value);
 					}
 				})
 			});
@@ -458,20 +1400,34 @@ var UiRouter = class {
 /**
 * Hook to get and set the current theme.
 *
-* Returns a tuple with the current theme and a function to set the theme.
+* Returns a tuple with the current theme, a function to set the theme,
+* and expert mode controls for fine-grained customization.
 *
 * ```tsx
-* const [theme, setTheme] = useTheme();
+* const [theme, setTheme, expert] = useTheme();
 * ```
 */
 const useTheme = () => {
 	useStore(alephaThemeAtom);
+	useStore(alephaThemeOverridesAtom);
 	const themeProvider = useInject(ThemeProvider);
 	const theme = themeProvider.getTheme();
 	const setTheme = (theme) => {
 		themeProvider.setTheme(theme.index);
 	};
-	return [theme, setTheme];
+	return [
+		theme,
+		setTheme,
+		{
+			overrides: themeProvider.getThemeOverrides(),
+			setOverrides: (overrides) => {
+				themeProvider.setThemeOverrides(overrides);
+			},
+			resetOverrides: () => {
+				themeProvider.resetThemeOverrides();
+			}
+		}
+	];
 };
 
 //#endregion
@@ -569,16 +1525,16 @@ const AlephaMantineProvider = (props) => {
 const ui = {
 	colors: {
 		transparent: "transparent",
-		background: "var(--alepha-background)",
+		background: "var(--alepha-ground)",
 		surface: "var(--alepha-surface)",
 		elevated: "var(--alepha-elevated)",
 		border: "var(--alepha-border)"
 	},
 	sizes: { icon: {
-		xs: 14,
-		sm: 16,
-		md: 20,
-		lg: 24,
+		xs: 16,
+		sm: 20,
+		md: 24,
+		lg: 28,
 		xl: 32
 	} }
 };
@@ -617,14 +1573,9 @@ const ActionMenuItem = (props) => {
 	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,
+		leftSection: item.icon ?? (item.active ? /* @__PURE__ */ jsx(IconCheck, { size: ui.sizes.icon.sm }) : /* @__PURE__ */ jsx(Flex$1, { w: ui.sizes.icon.sm })),
 		onClick: item.onClick,
 		color: item.color,
-		rightSection: item.active ? /* @__PURE__ */ jsx(ThemeIcon, {
-			size: "xs",
-			variant: "transparent",
-			children: /* @__PURE__ */ jsx(IconCheck, {})
-		}) : void 0,
 		...menuItemProps,
 		children: item.label
 	}, index);
@@ -632,11 +1583,9 @@ const ActionMenuItem = (props) => {
 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";
+	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 +1600,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";
@@ -926,11 +1876,11 @@ const DarkModeButton = (props) => {
 	const toggleColorScheme = () => {
 		setColorScheme((document.documentElement.getAttribute("data-mantine-color-scheme") ?? "light") === "dark" ? "light" : "dark");
 	};
-	const size = props.size ?? "md";
-	const iconSize = ui.sizes.icon[size] ?? ui.sizes.icon.md;
+	const size = props.size ?? "sm";
+	const iconSize = ui.sizes.icon[size] ?? ui.sizes.icon.sm;
 	return /* @__PURE__ */ jsx(ActionButton, {
 		onClick: toggleColorScheme,
-		variant: props.variant ?? "subtle",
+		variant: props.variant ?? "default",
 		size,
 		"aria-label": "Toggle color scheme",
 		icon: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconSun, {
@@ -949,7 +1899,7 @@ const DarkModeButton = (props) => {
 const LanguageButton = (props) => {
 	const i18n = useI18n();
 	return /* @__PURE__ */ jsx(ActionButton, {
-		variant: "subtle",
+		variant: "default",
 		icon: IconLanguage,
 		menu: { items: i18n.languages.map((lang) => ({
 			label: i18n.tr(lang),
@@ -968,8 +1918,7 @@ const OmnibarButton = (props) => {
 	if (props.collapsed) return /* @__PURE__ */ jsx(ActionButton, {
 		variant: "subtle",
 		onClick: spotlight.open,
-		radius: "md",
-		icon: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
+		icon: IconSearch,
 		tooltip: {
 			label: "Search",
 			position: "right"
@@ -1006,20 +1955,258 @@ const OmnibarButton = (props) => {
 	});
 };
 
+//#endregion
+//#region ../../src/core/hooks/useDialog.ts
+/**
+* Use this hook to access the Dialog Service for showing various dialog types.
+*
+* @example
+* ```tsx
+* const dialog = useDialog();
+* await dialog.alert({ title: "Alert", message: "This is an alert message" });
+* const confirmed = await dialog.confirm({ title: "Confirm", message: "Are you sure?" });
+* const input = await dialog.prompt({ title: "Input", message: "Enter your name:" });
+* ```
+*/
+const useDialog = () => {
+	return useInject(DialogService);
+};
+
+//#endregion
+//#region ../../src/core/components/buttons/ThemeExpertModal.tsx
+const MANTINE_COLORS = [
+	"red",
+	"pink",
+	"grape",
+	"violet",
+	"indigo",
+	"blue",
+	"cyan",
+	"teal",
+	"green",
+	"lime",
+	"yellow",
+	"orange"
+];
+const RADIUS_OPTIONS = [
+	{
+		label: "xs",
+		value: "xs"
+	},
+	{
+		label: "sm",
+		value: "sm"
+	},
+	{
+		label: "md",
+		value: "md"
+	},
+	{
+		label: "lg",
+		value: "lg"
+	},
+	{
+		label: "xl",
+		value: "xl"
+	}
+];
+const SIZE_OPTIONS = [
+	{
+		label: "xs",
+		value: "xs"
+	},
+	{
+		label: "sm",
+		value: "sm"
+	},
+	{
+		label: "md",
+		value: "md"
+	},
+	{
+		label: "lg",
+		value: "lg"
+	},
+	{
+		label: "xl",
+		value: "xl"
+	}
+];
+const FONT_OPTIONS = [
+	{
+		label: "System",
+		value: ""
+	},
+	{
+		label: "Inter",
+		value: "Inter, sans-serif"
+	},
+	{
+		label: "Mono",
+		value: "ui-monospace, SFMono-Regular, Menlo, monospace"
+	},
+	{
+		label: "Serif",
+		value: "Georgia, 'Times New Roman', serif"
+	}
+];
+const ThemeExpertModal = () => {
+	const [, , expert] = useTheme();
+	const dialog = useDialog();
+	const mantineTheme = useMantineTheme();
+	const { overrides, setOverrides } = expert;
+	const currentColor = overrides.primaryColor || mantineTheme.primaryColor;
+	const currentRadius = overrides.radius || mantineTheme.defaultRadius || "md";
+	const currentFont = overrides.fontFamily || "";
+	const currentFontSize = overrides.fontSize || "md";
+	const currentScale = overrides.scale || "md";
+	const updateOverrides = (patch) => {
+		setOverrides({
+			...overrides,
+			...patch
+		});
+	};
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		direction: "column",
+		gap: "lg",
+		children: [
+			/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					fw: 500,
+					size: "sm",
+					children: "Primary Color"
+				}), /* @__PURE__ */ jsx(SimpleGrid, {
+					cols: 6,
+					spacing: "xs",
+					children: MANTINE_COLORS.map((color) => /* @__PURE__ */ jsx(Flex$1, {
+						justify: "center",
+						children: /* @__PURE__ */ jsx(ColorSwatch, {
+							color: mantineTheme.colors[color]?.[6] ?? color,
+							onClick: () => updateOverrides({ primaryColor: color }),
+							style: { cursor: "pointer" },
+							size: 32,
+							children: currentColor === color && /* @__PURE__ */ jsx(IconCheck, {
+								size: 14,
+								color: "white"
+							})
+						})
+					}, color))
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					fw: 500,
+					size: "sm",
+					children: "Border Radius"
+				}), /* @__PURE__ */ jsx(Flex$1, {
+					gap: "xs",
+					children: RADIUS_OPTIONS.map((opt) => /* @__PURE__ */ jsx(ActionButton, {
+						variant: String(currentRadius) === opt.value ? "filled" : "default",
+						size: "xs",
+						flex: 1,
+						onClick: () => updateOverrides({ radius: opt.value }),
+						children: opt.label
+					}, opt.value))
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					fw: 500,
+					size: "sm",
+					children: "Font Family"
+				}), /* @__PURE__ */ jsx(Select, {
+					data: FONT_OPTIONS,
+					value: currentFont,
+					onChange: (value) => updateOverrides({ fontFamily: value ?? "" }),
+					allowDeselect: false
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					fw: 500,
+					size: "sm",
+					children: "Font Size"
+				}), /* @__PURE__ */ jsx(Flex$1, {
+					gap: "xs",
+					children: SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(ActionButton, {
+						variant: currentFontSize === opt.value ? "filled" : "default",
+						size: "xs",
+						flex: 1,
+						onClick: () => updateOverrides({ fontSize: opt.value }),
+						children: opt.label
+					}, opt.value))
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					fw: 500,
+					size: "sm",
+					children: "Scale"
+				}), /* @__PURE__ */ jsx(Flex$1, {
+					gap: "xs",
+					children: SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(ActionButton, {
+						variant: currentScale === opt.value ? "filled" : "default",
+						size: "xs",
+						flex: 1,
+						onClick: () => updateOverrides({ scale: opt.value }),
+						children: opt.label
+					}, opt.value))
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				justify: "space-between",
+				children: [/* @__PURE__ */ jsx(ActionButton, {
+					variant: "subtle",
+					color: "red",
+					onClick: () => expert.resetOverrides(),
+					children: "Reset"
+				}), /* @__PURE__ */ jsx(ActionButton, {
+					variant: "default",
+					px: "xl",
+					onClick: () => dialog.close(),
+					children: "OK"
+				})]
+			})
+		]
+	});
+};
+
 //#endregion
 //#region ../../src/core/components/buttons/ThemeButton.tsx
 const ThemeButton = (props) => {
+	const { expert, ...actionProps } = props;
 	const [theme, setTheme] = useTheme();
 	const themeList = useStore(alephaThemeListAtom)[0];
+	const dialog = useDialog();
+	const items = themeList.map((it, index) => ({
+		label: it.name,
+		onClick: () => setTheme({ index }),
+		active: theme.name === it.name
+	}));
+	if (expert) items.push({ type: "divider" }, {
+		label: "Customize...",
+		onClick: () => {
+			dialog.open({
+				title: "Customize Theme",
+				content: /* @__PURE__ */ jsx(ThemeExpertModal, {})
+			});
+		}
+	});
 	return /* @__PURE__ */ jsx(ActionButton, {
-		variant: "subtle",
+		variant: "default",
 		icon: IconPalette,
-		menu: { items: themeList.map((it, index) => ({
-			label: it.name,
-			onClick: () => setTheme({ index }),
-			active: theme.name === it.name
-		})) },
-		...props
+		menu: { items },
+		...actionProps
 	});
 };
 
@@ -1030,8 +2217,7 @@ const ToggleSidebarButton = (props) => {
 	return /* @__PURE__ */ jsx(ActionButton, {
 		icon: sidebar.collapsed ? IconLayoutSidebarRightCollapse : IconLayoutSidebarLeftCollapse,
 		visibleFrom: "md",
-		variant: "subtle",
-		size: "md",
+		variant: "default",
 		onClick: () => {
 			setSidebar({
 				...sidebar,
@@ -1219,7 +2405,7 @@ const StatCards = ({ items }) => /* @__PURE__ */ jsx(Flex$1, {
 //#endregion
 //#region ../../src/core/components/Flex.tsx
 const Flex = forwardRef((props, ref) => {
-	const { fill, center, centerX, centerY, col, ...rest } = props;
+	const { fill, center, centerX, centerY, col, ground, surface, elevated, rounded, bordered, borderedTop, borderedBottom, shadowed, ...rest } = props;
 	if (fill) rest.flex ??= 1;
 	if (col) rest.direction ??= "column";
 	if (center) {
@@ -1228,6 +2414,20 @@ const Flex = forwardRef((props, ref) => {
 	}
 	if (centerX) rest.justify ??= "center";
 	if (centerY) rest.align ??= "center";
+	if (ground) rest.bg = "var(--alepha-ground)";
+	else if (surface) rest.bg = "var(--alepha-surface)";
+	else if (elevated) rest.bg = "var(--alepha-elevated)";
+	if (rounded) rest.bdrs = rounded === true ? "md" : rounded;
+	if (bordered) rest.bd = "1px solid var(--alepha-border)";
+	if (borderedTop) rest.style = {
+		borderTop: "1px solid var(--alepha-border)",
+		...rest.style ?? {}
+	};
+	if (borderedBottom) rest.style = {
+		borderBottom: "1px solid var(--alepha-border)",
+		...rest.style ?? {}
+	};
+	if (shadowed) rest.className = `${rest.className ?? ""} shadow-${shadowed === true ? "md" : shadowed}`.trim();
 	return /* @__PURE__ */ jsx(Flex$1, {
 		ref,
 		...rest
@@ -1251,6 +2451,7 @@ const AppBar = (props) => {
 		if ("type" in item) {
 			if (item.type === "burger") return /* @__PURE__ */ jsx(BurgerButton, {}, index);
 			if (item.type === "dark") return /* @__PURE__ */ jsx(DarkModeButton, { ...item.props }, index);
+			if (item.type === "theme") return /* @__PURE__ */ jsx(ThemeButton, { ...item.props }, index);
 			if (item.type === "search") return /* @__PURE__ */ jsx(OmnibarButton, { ...item.props }, index);
 			if (item.type === "lang") return /* @__PURE__ */ jsx(LanguageButton, { ...item.props }, index);
 			if (item.type === "spacer") return /* @__PURE__ */ jsx(Flex, { w: 16 }, index);
@@ -1441,6 +2642,9 @@ const Sidebar = (props) => {
 			if (item.type === "divider") return divider(key, item.fill, collapsed);
 			if (item.type === "search") return /* @__PURE__ */ jsx(Flex, {
 				mb: "xs",
+				w: "100%",
+				justify: "center",
+				pos: "relative",
 				children: /* @__PURE__ */ jsx(OmnibarButton, { collapsed })
 			}, key);
 			if (item.type === "toggle") return /* @__PURE__ */ jsx(ToggleSidebarButton, {}, key);
@@ -1448,7 +2652,7 @@ const Sidebar = (props) => {
 				if (item.children && item.children.length > 0) {
 					if (!item.children.some((child) => !("can" in child) || !child.can || child.can())) return null;
 				}
-				if (collapsed) return /* @__PURE__ */ jsxs(Fragment$1, { children: [divider(`${key}-d`, void 0, collapsed), item.children?.map((child, index) => renderNode(child, `s${key}-${index}`, collapsed))] }, key);
+				if (collapsed) return /* @__PURE__ */ jsx(Fragment$1, { children: item.children?.map((child, index) => renderNode(child, `s${key}-${index}`, collapsed)) }, key);
 				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Flex, {
 					mt: "md",
 					align: "center",
@@ -1498,7 +2702,7 @@ const Sidebar = (props) => {
 		return [];
 	};
 	const padding = "md";
-	const gap = props.items ? props.gap ?? 4 : "xs";
+	const gap = props.items ? props.gap ?? 8 : "xs";
 	const menu = useMemo(() => getSidebarNodes(), [props.items, props.autoPopulateMenu]);
 	const renderSidebar = (collapsed) => /* @__PURE__ */ jsxs(Flex, {
 		flex: 1,
@@ -1580,10 +2784,7 @@ const SidebarItem = (props) => {
 			bd: 0,
 			fw: "normal",
 			variant: "default",
-			propsActive: {
-				variant: "outline",
-				fw: "bold"
-			},
+			propsActive: { variant: "outline" },
 			radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
 			onClick: handleItemClick,
 			leftSection: /* @__PURE__ */ jsxs(Flex, {
@@ -1600,6 +2801,8 @@ const SidebarItem = (props) => {
 		}), item.children && isOpen && /* @__PURE__ */ jsxs(Flex, {
 			direction: "column",
 			"data-parent-level": level,
+			gap: 2,
+			py: 2,
 			children: [/* @__PURE__ */ jsx(Flex, { style: {
 				position: "absolute",
 				width: 1,
@@ -1627,28 +2830,41 @@ const SidebarCollapsedItem = (props) => {
 	const menu = hasChildren ? {
 		on: "hover",
 		position: "right",
-		items: item.children.filter((child) => !child.can || child.can()).map((child) => ({
+		menuProps: {
+			arrowPosition: "center",
+			arrowSize: 10,
+			withArrow: true
+		},
+		items: [{
+			type: "label",
+			label: item.label
+		}, ...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
+	return /* @__PURE__ */ jsx(Flex, {
+		w: "100%",
+		justify: "center",
+		pos: "relative",
+		children: /* @__PURE__ */ jsx(ActionButton, {
+			size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
+			bd: 0,
+			variant: "default",
+			propsActive: { variant: "outline" },
+			tooltip: hasChildren ? void 0 : {
+				label: item.label,
+				position: "right"
+			},
+			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
+		})
 	});
 };
 
@@ -1694,6 +2910,7 @@ const DashboardShell = (props) => {
 	return /* @__PURE__ */ jsxs(AppShell, {
 		layout: "alt",
 		w: "100%",
+		h: "100vh",
 		flex: 1,
 		header: hasAppBar ? { height: hHeight } : void 0,
 		navbar: hasSidebar ? {
@@ -1712,13 +2929,12 @@ const DashboardShell = (props) => {
 				})
 			}),
 			hasSidebar && /* @__PURE__ */ jsxs(AppShell.Navbar, {
-				className: "alepha-sidebar-navbar",
 				...props.appShellNavbarProps,
 				children: [
 					props.navbarHeader ? /* @__PURE__ */ jsx(Flex, {
 						style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
 						h: headerHeight,
-						children: props.navbarHeader
+						children: props.navbarHeader({ collapsed })
 					}) : null,
 					/* @__PURE__ */ jsx(Sidebar, {
 						...props.sidebarProps ?? {},
@@ -1732,6 +2948,8 @@ const DashboardShell = (props) => {
 				]
 			}),
 			/* @__PURE__ */ jsx(AppShell.Main, {
+				display: "flex",
+				bg: "var(--alepha-ground)",
 				pos: "relative",
 				...props.appShellMainProps,
 				children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
@@ -1760,7 +2978,7 @@ const Text = forwardRef((props, ref) => {
 	if (light) rest.fw ??= 300;
 	if (italic) rest.fs ??= "italic";
 	if (muted) rest.c ??= "dimmed";
-	if (small) rest.size ??= "sm";
+	if (small) rest.size ??= "xs";
 	if (uppercase) rest.tt ??= "uppercase";
 	if (capitalize) rest.tt ??= "capitalize";
 	if (center) rest.ta ??= "center";
@@ -3039,23 +4257,6 @@ const renderIcon = (icon, size) => {
 	return icon;
 };
 
-//#endregion
-//#region ../../src/core/hooks/useDialog.ts
-/**
-* Use this hook to access the Dialog Service for showing various dialog types.
-*
-* @example
-* ```tsx
-* const dialog = useDialog();
-* await dialog.alert({ title: "Alert", message: "This is an alert message" });
-* const confirmed = await dialog.confirm({ title: "Confirm", message: "Are you sure?" });
-* const input = await dialog.prompt({ title: "Input", message: "Enter your name:" });
-* ```
-*/
-const useDialog = () => {
-	return useInject(DialogService);
-};
-
 //#endregion
 //#region ../../src/core/json/components/JsonViewer.tsx
 const SIZE_CONFIG = {
@@ -3408,8 +4609,9 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 	return /* @__PURE__ */ jsx(Flex$1, {
 		w: "100%",
 		p: "xs",
+		m: "xs",
+		bdrs: "md",
 		bg: ui.colors.surface,
-		style: { borderBottom: "1px solid var(--alepha-border)" },
 		children: /* @__PURE__ */ jsx(TypeForm, {
 			size: "xs",
 			...typeFormProps,
@@ -3430,48 +4632,62 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 
 //#endregion
 //#region ../../src/core/table/components/DataTablePagination.tsx
-const DataTablePagination = ({ page, size, totalPages, onPageChange, onSizeChange }) => {
-	return /* @__PURE__ */ jsxs(Flex$1, {
+const DataTablePagination = ({ page, size, totalPages, totalElements, offset, numberOfElements, onPageChange, onSizeChange }) => {
+	const from = numberOfElements > 0 ? offset + 1 : 0;
+	const to = offset + numberOfElements;
+	return /* @__PURE__ */ jsxs(Flex, {
 		align: "center",
-		justify: "end",
+		justify: "space-between",
 		gap: "md",
-		p: "xs",
+		px: "xs",
+		py: 4,
 		style: { borderTop: "1px solid var(--alepha-border)" },
-		children: [/* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(Select, {
-			w: 96,
-			variant: "default",
-			value: size,
-			onChange: (value) => {
-				if (value) onSizeChange(Number(value));
-			},
-			data: [
-				{
-					value: "5",
-					label: "5"
-				},
-				{
-					value: "10",
-					label: "10"
-				},
-				{
-					value: "25",
-					label: "25"
-				},
-				{
-					value: "50",
-					label: "50"
+		children: [/* @__PURE__ */ jsx(Flex, {
+			align: "center",
+			children: /* @__PURE__ */ jsx(Text, {
+				size: "xs",
+				c: "dimmed",
+				children: totalElements != null ? `Showing ${from} - ${to} of ${totalElements}` : `Showing ${from} - ${to}`
+			})
+		}), /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			gap: "md",
+			children: [/* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Select, {
+				color: "gray",
+				c: "gray",
+				size: "xs",
+				w: 96,
+				variant: "default",
+				value: size,
+				onChange: (value) => {
+					if (value) onSizeChange(Number(value));
 				},
-				{
-					value: "100",
-					label: "100"
-				}
-			]
-		}) }), /* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(Pagination, {
-			withEdges: true,
-			total: totalPages,
-			value: page,
-			onChange: onPageChange
-		}) })]
+				data: [
+					{
+						value: "10",
+						label: "10"
+					},
+					{
+						value: "25",
+						label: "25"
+					},
+					{
+						value: "50",
+						label: "50"
+					},
+					{
+						value: "100",
+						label: "100"
+					}
+				]
+			}) }), /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Pagination, {
+				size: "sm",
+				withEdges: true,
+				total: totalPages,
+				value: page,
+				onChange: onPageChange
+			}) })]
+		})]
 	});
 };
 
@@ -3693,7 +4909,7 @@ const extractText = (node) => {
 const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility, onColumnVisibilityChange, onFilterVisibilityChange, actions, onRefresh, items, withExport, selectedItems = [], checkboxActions, onClearSelection }) => {
 	const hasSelection = selectedItems.length > 0;
 	const exportableColumns = useCallback(() => {
-		return Object.entries(columns).filter(([key, col]) => !col.actions && columnVisibility[key] !== false);
+		return Object.entries(columns).filter(([key]) => columnVisibility[key] !== false);
 	}, [columns, columnVisibility]);
 	const buildRows = useCallback(() => {
 		const cols = exportableColumns();
@@ -3730,11 +4946,10 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 		};
 		await action.onClick(ctx);
 	};
-	return /* @__PURE__ */ jsxs(Flex$1, {
+	return /* @__PURE__ */ jsxs(Flex, {
 		p: "xs",
-		style: { borderBottom: "1px solid var(--alepha-border)" },
 		children: [
-			/* @__PURE__ */ jsxs(Flex$1, {
+			/* @__PURE__ */ jsxs(Flex, {
 				gap: 4,
 				align: "center",
 				children: [
@@ -3789,8 +5004,8 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 					] })
 				]
 			}),
-			/* @__PURE__ */ jsx(Flex$1, { flex: 1 }),
-			/* @__PURE__ */ jsxs(Flex$1, {
+			/* @__PURE__ */ jsx(Flex, { flex: 1 }),
+			/* @__PURE__ */ jsxs(Flex, {
 				gap: "xs",
 				children: [actions?.map((props, index) => !isValidElement(props) ? /* @__PURE__ */ jsx(ActionButton, {
 					...props,
@@ -4042,7 +5257,7 @@ const DataTable = (props) => {
 		currentPage,
 		form
 	]);
-	const totalColumns = visibleColumns.length + (panelConfig ? 1 : 0) + (props.withCheckbox ? 1 : 0);
+	const totalColumns = visibleColumns.length + (panelConfig ? 1 : 0) + (props.withCheckbox ? 1 : 0) + (props.rowActions ? 1 : 0);
 	const checkboxHeader = props.withCheckbox ? /* @__PURE__ */ jsx(Table.Th, {
 		style: { width: 40 },
 		children: /* @__PURE__ */ jsx(Checkbox, {
@@ -4065,13 +5280,15 @@ const DataTable = (props) => {
 					userSelect: "none"
 				} : {}
 			},
-			children: /* @__PURE__ */ jsxs(Flex$1, {
+			children: /* @__PURE__ */ jsxs(Flex, {
 				align: "center",
 				gap: 4,
-				children: [/* @__PURE__ */ jsx(Text$1, {
+				children: [/* @__PURE__ */ jsx(Text, {
+					bold: true,
+					muted: true,
 					size: "xs",
 					children: col.label
-				}), col.sortable && /* @__PURE__ */ jsxs(Flex$1, {
+				}), col.sortable && /* @__PURE__ */ jsxs(Flex, {
 					c: "dimmed",
 					children: [
 						sortDir === "asc" && /* @__PURE__ */ jsx(IconArrowUp, { size: ui.sizes.icon.sm }),
@@ -4113,7 +5330,7 @@ const DataTable = (props) => {
 							toggleExpand(itemKey);
 						},
 						style: { display: "inline-flex" },
-						children: /* @__PURE__ */ jsx(Flex$1, {
+						children: /* @__PURE__ */ jsx(Flex, {
 							c: "dimmed",
 							align: "center",
 							justify: "center",
@@ -4136,32 +5353,40 @@ const DataTable = (props) => {
 						form,
 						alepha
 					};
-					if (col.actions) {
-						const rowActions = col.actions(item, ctx).filter((a) => a.visible !== false);
-						return /* @__PURE__ */ jsx(Table.Td, {
-							py: 2,
-							px: 4,
-							style: col.fit ? FIT_STYLE : void 0,
-							onClick: (e) => e.stopPropagation(),
-							children: /* @__PURE__ */ jsx(Flex$1, {
-								gap: 4,
-								children: rowActions.map(({ visible: _, ...actionProps }, i) => /* @__PURE__ */ jsx(ActionButton, {
-									variant: "subtle",
-									size: "xs",
-									preventDefault: true,
-									h: 20,
-									...actionProps
-								}, i))
-							})
-						}, key);
-					}
 					return /* @__PURE__ */ jsx(Table.Td, {
-						py: 2,
-						px: 4,
 						style: col.fit ? FIT_STYLE : void 0,
 						children: col.value?.(item, ctx)
 					}, 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: "subtle",
+							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,
+									color: action.color
+								};
+							}) }
+						})
+					});
+				})()
 			]
 		}, itemKey)];
 		if (panelConfig && showPanel && isExpanded) elements.push(/* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
@@ -4179,13 +5404,19 @@ const DataTable = (props) => {
 			"sort"
 		]);
 	}, [props.filters, form.options.schema]);
-	return /* @__PURE__ */ jsxs(Flex$1, {
+	return /* @__PURE__ */ jsxs(Flex, {
+		gap: "xs",
 		flex: 1,
 		p: 0,
-		bdrs: "sm",
 		direction: "column",
-		children: [
-			/* @__PURE__ */ jsx(DataTableToolbar, {
+		style: { overflow: "hidden" },
+		children: [/* @__PURE__ */ jsxs(Flex, {
+			rounded: true,
+			bordered: true,
+			elevated: true,
+			shadowed: "xs",
+			col: true,
+			children: [/* @__PURE__ */ jsx(DataTableToolbar, {
 				columns: props.columns,
 				filters: props.filters,
 				columnVisibility,
@@ -4199,71 +5430,81 @@ const DataTable = (props) => {
 				selectedItems: selection.selectedItems,
 				checkboxActions: props.checkboxActions,
 				onClearSelection: selection.clear
-			}),
-			filterSchema && props.filters && /* @__PURE__ */ jsx(DataTableFilters, {
+			}), filterSchema && props.filters && /* @__PURE__ */ jsx(DataTableFilters, {
 				schema: filterSchema,
 				form,
 				typeFormProps: props.typeFormProps,
 				filterVisibility
-			}),
-			/* @__PURE__ */ jsx(Flex$1, {
-				className: "overflow-auto",
-				children: /* @__PURE__ */ jsxs(Table, {
-					"aria-label": "Data table",
-					withColumnBorders: true,
-					withRowBorders: true,
-					...props.tableProps,
-					children: [/* @__PURE__ */ jsx(Table.Thead, {
-						style: {
-							position: "sticky",
-							top: 0,
-							zIndex: 1,
-							backgroundColor: "var(--mantine-color-body)"
-						},
-						children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
-							panelConfig && /* @__PURE__ */ jsx(Table.Th, { style: { width: 36 } }),
-							checkboxHeader,
-							head
-						] })
-					}), /* @__PURE__ */ jsxs(Table.Tbody, {
-						style: {
-							opacity: form.submitting ? .5 : 1,
-							transition: "opacity 150ms ease"
-						},
-						children: [rows, items.content.length === 0 && /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
-							colSpan: totalColumns || 1,
-							py: "xl",
-							style: { textAlign: "center" },
-							children: /* @__PURE__ */ jsx(Text$1, {
-								c: "dimmed",
-								size: "sm",
-								children: form.submitting ? "Loading…" : "No results"
-							})
-						}) })]
-					})]
+			})]
+		}), /* @__PURE__ */ jsxs(Flex, {
+			col: true,
+			rounded: true,
+			bordered: true,
+			elevated: true,
+			shadowed: "xs",
+			children: [
+				/* @__PURE__ */ jsx(Flex, {
+					className: "overflow-auto",
+					children: /* @__PURE__ */ jsxs(Table, {
+						"aria-label": "Data table",
+						withRowBorders: true,
+						highlightOnHover: true,
+						...props.tableProps,
+						children: [/* @__PURE__ */ jsx(Table.Thead, {
+							style: {
+								position: "sticky",
+								top: 0,
+								zIndex: 1
+							},
+							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__ */ jsxs(Table.Tbody, {
+							style: {
+								opacity: form.submitting ? .5 : 1,
+								transition: "opacity 150ms ease"
+							},
+							children: [rows, items.content.length === 0 && /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+								colSpan: totalColumns || 1,
+								py: "xl",
+								style: { textAlign: "center" },
+								children: /* @__PURE__ */ jsx(Text, {
+									c: "dimmed",
+									size: "sm",
+									children: form.submitting ? "Loading…" : "No results"
+								})
+							}) })]
+						})]
+					})
+				}),
+				props.infinityScroll && /* @__PURE__ */ jsx("div", { ref: sentinelRef }),
+				!props.infinityScroll && /* @__PURE__ */ jsx(DataTablePagination, {
+					page,
+					size,
+					totalPages: items.page?.totalPages ?? 1,
+					totalElements: items.page?.totalElements,
+					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)
-			})
-		]
+			]
+		})]
 	});
 };
 
@@ -4505,5 +5746,5 @@ const AlephaUI = $module({
 });
 
 //#endregion
-export { $ui, ActionButton, DashboardShell as AdminShell, DashboardShell, AlephaMantineProvider, AlephaUI, AlertDialog, AppBar, Breadcrumb as Breadcrumbs, BurgerButton, ClipboardButton, ConfirmDialog, Container, Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlQueryBuilder, ControlSelect, DarkModeButton, DataTable, DetailDrawer, DetailList, DialogService, Flex, Heading, JsonViewer, LanguageButton, OPERATOR_INFO, Omnibar, OmnibarButton, PromptDialog, Sidebar, ToggleSidebarButton as SidebarCollapseButton, StatCards, Text, ThemeButton, ThemeProvider, ToastService, TypeForm, UiRouter, alephaSidebarAtom, alephaThemeAtom, alephaThemeListAtom, capitalize, defaultTheme, dialogForm, dialogJson, extractSchemaFields, getDefaultIcon, getOperatorsForField, isComponentType, midnightTheme, prettyName, renderIcon, toTitleCase, ui, useDialog, useTheme, useToast };
+export { $ui, ActionButton, DashboardShell as AdminShell, DashboardShell, AlephaMantineProvider, AlephaUI, AlertDialog, AppBar, Breadcrumb as Breadcrumbs, BurgerButton, ClipboardButton, ConfirmDialog, Container, Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlQueryBuilder, ControlSelect, DarkModeButton, DataTable, DetailDrawer, DetailList, DialogService, Flex, Heading, JsonViewer, LanguageButton, OPERATOR_INFO, Omnibar, OmnibarButton, PromptDialog, Sidebar, ToggleSidebarButton as SidebarCollapseButton, StatCards, Text, ThemeButton, ThemeProvider, ToastService, TypeForm, UiRouter, alephaSidebarAtom, alephaThemeAtom, alephaThemeListAtom, alephaThemeOverridesAtom, capitalize, defaultTheme, dialogForm, dialogJson, extractSchemaFields, getDefaultIcon, getOperatorsForField, isComponentType, midnightTheme, prettyName, renderIcon, toTitleCase, ui, useDialog, useTheme, useToast };
 //# sourceMappingURL=index.js.map