@alepha/ui 0.18.0 → 0.18.2

package/dist/admin/{core-2xoLiT0o.js → core-BVO_TQxb.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, CopyButton, 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, Tabs, TagsInput, Text, TextInput, Textarea, Tooltip, UnstyledButton, useMantineColorScheme, useMantineTheme } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
-import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, ColorInput, ColorSchemeScript, Container, CopyButton, Divider, Drawer, Fieldset, FileInput, Flex, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Switch, Table, Tabs, TagsInput, Text, TextInput, Textarea, ThemeIcon, Tooltip, UnstyledButton, useMantineColorScheme, useMantineTheme } 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, { 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, {
+		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: "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,
@@ -1127,7 +2313,7 @@ const StatCards = ({ items }) => /* @__PURE__ */ jsx(Flex, {
 //#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, ...rest } = props;
 	if (fill) rest.flex ??= 1;
 	if (col) rest.direction ??= "column";
 	if (center) {
@@ -1136,6 +2322,20 @@ 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();
 	return /* @__PURE__ */ jsx(Flex, {
 		ref,
 		...rest
@@ -1153,6 +2353,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);
@@ -1343,6 +2544,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);
@@ -1350,7 +2554,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",
@@ -1400,7 +2604,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,
@@ -1482,10 +2686,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$1, {
@@ -1502,6 +2703,8 @@ const SidebarItem = (props) => {
 		}), item.children && isOpen && /* @__PURE__ */ jsxs(Flex$1, {
 			direction: "column",
 			"data-parent-level": level,
+			gap: 2,
+			py: 2,
 			children: [/* @__PURE__ */ jsx(Flex$1, { style: {
 				position: "absolute",
 				width: 1,
@@ -1529,28 +2732,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$1, {
+		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
+		})
 	});
 };
 
@@ -1596,6 +2812,7 @@ const DashboardShell = (props) => {
 	return /* @__PURE__ */ jsxs(AppShell, {
 		layout: "alt",
 		w: "100%",
+		h: "100vh",
 		flex: 1,
 		header: hasAppBar ? { height: hHeight } : void 0,
 		navbar: hasSidebar ? {
@@ -1614,13 +2831,12 @@ 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 ?? {},
@@ -1634,6 +2850,8 @@ const DashboardShell = (props) => {
 				]
 			}),
 			/* @__PURE__ */ jsx(AppShell.Main, {
+				display: "flex",
+				bg: "var(--alepha-ground)",
 				pos: "relative",
 				...props.appShellMainProps,
 				children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
@@ -1662,7 +2880,7 @@ const Text$1 = 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";
@@ -2922,23 +4140,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/table/interfaces/types.ts
 const DEFAULT_MAX_VISIBLE_COLUMNS = 8;
@@ -2959,8 +4160,9 @@ const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) =>
 	return /* @__PURE__ */ jsx(Flex, {
 		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,
@@ -2981,48 +4183,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, {
+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$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: true,
+				total: totalPages,
+				value: page,
+				onChange: onPageChange
+			}) })]
+		})]
 	});
 };
 
@@ -3244,7 +4460,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();
@@ -3281,11 +4497,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: [
@@ -3340,8 +4555,8 @@ 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,
@@ -3593,7 +4808,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, {
@@ -3616,13 +4831,15 @@ 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 }),
@@ -3664,7 +4881,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",
@@ -3687,32 +4904,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, {
-								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, {
@@ -3730,13 +4955,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,
@@ -3750,71 +4981,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, {
-				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, {
-								c: "dimmed",
-								size: "sm",
-								children: form.submitting ? "Loading…" : "No results"
-							})
-						}) })]
-					})]
+			})]
+		}), /* @__PURE__ */ jsxs(Flex$1, {
+			col: true,
+			rounded: true,
+			bordered: true,
+			elevated: true,
+			shadowed: "xs",
+			children: [
+				/* @__PURE__ */ jsx(Flex$1, {
+					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$1, {
+									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)
-			})
-		]
+			]
+		})]
 	});
 };
 
@@ -4027,5 +5268,5 @@ const AlephaUI = $module({
 });
 
 //#endregion
-export { ActionButton as _, TypeForm as a, useToast as b, DashboardShell as c, StatCards as d, DetailList as f, ClipboardButton as g, LanguageButton as h, useDialog as i, Breadcrumb as l, ThemeButton as m, capitalize as n, Control as o, ToggleSidebarButton as p, DataTable as r, Text$1 as s, AlephaUI as t, Flex$1 as u, ui as v, AlephaMantineProvider as y };
-//# sourceMappingURL=core-2xoLiT0o.js.map
+export { ActionButton as _, Control as a, useToast as b, Breadcrumb as c, DetailList as d, ToggleSidebarButton as f, ClipboardButton as g, LanguageButton as h, TypeForm as i, Flex$1 as l, useDialog as m, capitalize as n, Text$1 as o, ThemeButton as p, DataTable as r, DashboardShell as s, AlephaUI as t, StatCards as u, ui as v, alephaSidebarAtom as x, AlephaMantineProvider as y };
+//# sourceMappingURL=core-BVO_TQxb.js.map