@alepha/ui 0.13.2 → 0.13.4

package/dist/core/index.js

@@ -1,9 +1,10 @@
 import { AlephaReactForm, FormValidationError, useForm, useFormState } from "@alepha/react/form";
-import { AlephaReactHead } from "@alepha/react/head";
+import { $head, AlephaReactHead } from "@alepha/react/head";
 import { AlephaReactI18n, useI18n } from "@alepha/react/i18n";
-import { $module, Alepha, TypeBoxError, t } from "alepha";
+import { $atom, $inject, $module, Alepha, TypeBoxError, t } from "alepha";
+import { $cookie } from "alepha/server/cookies";
 import { $page, NestedView, useAction, useActive, useEvents, useInject, useRouter, useStore } from "@alepha/react";
-import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Box, Burger, Button, Collapse, ColorInput, ColorSchemeScript, CopyButton, Divider, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
+import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Box, Burger, Button, Card, Collapse, ColorInput, ColorSchemeScript, CopyButton, Divider, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
 import { Notifications, notifications } from "@mantine/notifications";
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
@@ -16,6 +17,949 @@ import { parseQueryString } from "alepha/orm";
 import { useDebouncedCallback } from "@mantine/hooks";
 import { DateTimeProvider } from "alepha/datetime";
 
+//#region src/core/themes/aurora.ts
+const auroraTheme = {
+	id: "aurora",
+	label: "Aurora",
+	description: "Vibrant, playful with gradients and hover effects",
+	primaryColor: "violet",
+	primaryShade: {
+		light: 5,
+		dark: 4
+	},
+	fontFamily: "\"Nunito\", \"Poppins\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
+	fontFamilyMonospace: "\"Fira Code\", \"JetBrains Mono\", ui-monospace, Consolas, monospace",
+	headings: {
+		fontFamily: "\"Nunito\", \"Poppins\", -apple-system, BlinkMacSystemFont, sans-serif",
+		fontWeight: "700",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2.25rem",
+				lineHeight: "1.3"
+			},
+			h2: {
+				fontSize: "1.75rem",
+				lineHeight: "1.35"
+			},
+			h3: {
+				fontSize: "1.375rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1.125rem",
+				lineHeight: "1.45"
+			},
+			h5: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	fontSizes: {
+		xs: "0.8rem",
+		sm: "0.9rem",
+		md: "1rem",
+		lg: "1.125rem",
+		xl: "1.3rem"
+	},
+	lineHeights: {
+		xs: "1.5",
+		sm: "1.55",
+		md: "1.6",
+		lg: "1.65",
+		xl: "1.7"
+	},
+	radius: {
+		xs: "6px",
+		sm: "8px",
+		md: "12px",
+		lg: "16px",
+		xl: "24px"
+	},
+	defaultRadius: "md",
+	shadows: {
+		xs: "0 2px 4px rgba(139, 92, 246, 0.08)",
+		sm: "0 4px 8px rgba(139, 92, 246, 0.1)",
+		md: "0 8px 16px rgba(139, 92, 246, 0.12)",
+		lg: "0 16px 32px rgba(139, 92, 246, 0.15)",
+		xl: "0 24px 48px rgba(139, 92, 246, 0.18)"
+	},
+	defaultGradient: {
+		from: "violet",
+		to: "pink",
+		deg: 135
+	},
+	colors: {
+		dark: [
+			"#d4d0dc",
+			"#a8a3b3",
+			"#7c7689",
+			"#5c5568",
+			"#454050",
+			"#302c38",
+			"#252129",
+			"#1e1b24",
+			"#16141a",
+			"#0d0c10"
+		],
+		gray: [
+			"#faf9fb",
+			"#f3f1f5",
+			"#e8e5ed",
+			"#d4d0dc",
+			"#a8a3b3",
+			"#7c7689",
+			"#5c5568",
+			"#454050",
+			"#302c38",
+			"#1e1b24"
+		],
+		violet: [
+			"#f5f3ff",
+			"#ede9fe",
+			"#ddd6fe",
+			"#c4b5fd",
+			"#a78bfa",
+			"#8b5cf6",
+			"#7c3aed",
+			"#6d28d9",
+			"#5b21b6",
+			"#4c1d95"
+		],
+		pink: [
+			"#fdf2f8",
+			"#fce7f3",
+			"#fbcfe8",
+			"#f9a8d4",
+			"#f472b6",
+			"#ec4899",
+			"#db2777",
+			"#be185d",
+			"#9d174d",
+			"#831843"
+		]
+	}
+};
+
+//#endregion
+//#region src/core/themes/crystal.ts
+const crystalTheme = {
+	id: "crystal",
+	label: "Crystal",
+	description: "Glass-morphism with backdrop blur effects",
+	primaryColor: "blue",
+	primaryShade: {
+		light: 5,
+		dark: 4
+	},
+	fontFamily: "\"SF Pro Display\", \"Helvetica Neue\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
+	fontFamilyMonospace: "\"SF Mono\", \"Fira Code\", ui-monospace, Menlo, Consolas, monospace",
+	headings: {
+		fontFamily: "\"SF Pro Display\", \"Helvetica Neue\", -apple-system, BlinkMacSystemFont, 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.35"
+			},
+			h4: {
+				fontSize: "1.0625rem",
+				lineHeight: "1.4"
+			},
+			h5: {
+				fontSize: "0.9375rem",
+				lineHeight: "1.45"
+			},
+			h6: {
+				fontSize: "0.8125rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	fontSizes: {
+		xs: "0.75rem",
+		sm: "0.8125rem",
+		md: "0.9375rem",
+		lg: "1.0625rem",
+		xl: "1.25rem"
+	},
+	lineHeights: {
+		xs: "1.45",
+		sm: "1.5",
+		md: "1.55",
+		lg: "1.6",
+		xl: "1.65"
+	},
+	radius: {
+		xs: "4px",
+		sm: "8px",
+		md: "10px",
+		lg: "14px",
+		xl: "20px"
+	},
+	defaultRadius: "md",
+	shadows: {
+		xs: "0 2px 8px rgba(59, 130, 246, 0.04)",
+		sm: "0 4px 12px rgba(59, 130, 246, 0.06)",
+		md: "0 8px 20px rgba(59, 130, 246, 0.08)",
+		lg: "0 16px 32px rgba(59, 130, 246, 0.1)",
+		xl: "0 24px 48px rgba(59, 130, 246, 0.12)"
+	},
+	defaultGradient: {
+		from: "cyan",
+		to: "blue",
+		deg: 135
+	},
+	colors: {
+		dark: [
+			"#cbd5e1",
+			"#94a3b8",
+			"#64748b",
+			"#475569",
+			"#334155",
+			"#1e293b",
+			"#0f172a",
+			"#0c1322",
+			"#080e1a",
+			"#040711"
+		],
+		gray: [
+			"#f8fafc",
+			"#f1f5f9",
+			"#e2e8f0",
+			"#cbd5e1",
+			"#94a3b8",
+			"#64748b",
+			"#475569",
+			"#334155",
+			"#1e293b",
+			"#0f172a"
+		],
+		blue: [
+			"#f0f9ff",
+			"#e0f2fe",
+			"#bae6fd",
+			"#7dd3fc",
+			"#38bdf8",
+			"#0ea5e9",
+			"#0284c7",
+			"#0369a1",
+			"#075985",
+			"#0c4a6e"
+		],
+		cyan: [
+			"#ecfeff",
+			"#cffafe",
+			"#a5f3fc",
+			"#67e8f9",
+			"#22d3ee",
+			"#06b6d4",
+			"#0891b2",
+			"#0e7490",
+			"#155e75",
+			"#164e63"
+		]
+	}
+};
+
+//#endregion
+//#region src/core/themes/default.ts
+const defaultTheme = {
+	id: "default",
+	label: "Default",
+	description: "Mantine defaults with no customization"
+};
+
+//#endregion
+//#region src/core/themes/ember.ts
+const emberTheme = {
+	id: "ember",
+	label: "Ember",
+	description: "Warm, cozy with stone tints",
+	primaryColor: "orange",
+	primaryShade: {
+		light: 5,
+		dark: 4
+	},
+	fontFamily: "\"Source Sans Pro\", \"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+	fontFamilyMonospace: "\"Source Code Pro\", \"Fira Code\", ui-monospace, Menlo, Consolas, monospace",
+	headings: {
+		fontFamily: "\"Source Sans Pro\", \"Open Sans\", -apple-system, BlinkMacSystemFont, sans-serif",
+		fontWeight: "600",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2rem",
+				lineHeight: "1.3"
+			},
+			h2: {
+				fontSize: "1.5rem",
+				lineHeight: "1.35"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1.125rem",
+				lineHeight: "1.45"
+			},
+			h5: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	fontSizes: {
+		xs: "0.75rem",
+		sm: "0.875rem",
+		md: "1rem",
+		lg: "1.125rem",
+		xl: "1.25rem"
+	},
+	lineHeights: {
+		xs: "1.5",
+		sm: "1.55",
+		md: "1.65",
+		lg: "1.7",
+		xl: "1.75"
+	},
+	radius: {
+		xs: "4px",
+		sm: "6px",
+		md: "8px",
+		lg: "12px",
+		xl: "16px"
+	},
+	defaultRadius: "md",
+	shadows: {
+		xs: "0 1px 3px rgba(194, 65, 12, 0.06)",
+		sm: "0 2px 6px rgba(194, 65, 12, 0.08)",
+		md: "0 4px 12px rgba(194, 65, 12, 0.1)",
+		lg: "0 8px 24px rgba(194, 65, 12, 0.12)",
+		xl: "0 16px 40px rgba(194, 65, 12, 0.14)"
+	},
+	defaultGradient: {
+		from: "orange",
+		to: "yellow",
+		deg: 180
+	},
+	colors: {
+		dark: [
+			"#d6d3d1",
+			"#a8a29e",
+			"#78716c",
+			"#57534e",
+			"#44403c",
+			"#292524",
+			"#1c1917",
+			"#171412",
+			"#120f0d",
+			"#0c0a09"
+		],
+		gray: [
+			"#fafaf9",
+			"#f5f5f4",
+			"#e7e5e4",
+			"#d6d3d1",
+			"#a8a29e",
+			"#78716c",
+			"#57534e",
+			"#44403c",
+			"#292524",
+			"#1c1917"
+		],
+		orange: [
+			"#fff7ed",
+			"#ffedd5",
+			"#fed7aa",
+			"#fdba74",
+			"#fb923c",
+			"#f97316",
+			"#ea580c",
+			"#c2410c",
+			"#9a3412",
+			"#7c2d12"
+		],
+		yellow: [
+			"#fffbeb",
+			"#fef3c7",
+			"#fde68a",
+			"#fcd34d",
+			"#fbbf24",
+			"#f59e0b",
+			"#d97706",
+			"#b45309",
+			"#92400e",
+			"#78350f"
+		]
+	}
+};
+
+//#endregion
+//#region src/core/themes/midnight.ts
+const midnightTheme = {
+	id: "midnight",
+	label: "Midnight",
+	description: "Clean, developer-focused design",
+	primaryColor: "gray",
+	primaryShade: {
+		light: 7,
+		dark: 8
+	},
+	fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
+	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"
+			}
+		}
+	},
+	radius: {
+		xs: "3px",
+		sm: "6px",
+		md: "6px",
+		lg: "8px",
+		xl: "12px"
+	},
+	defaultRadius: "sm",
+	colors: {
+		dark: [
+			"#d0d7de",
+			"#8b949e",
+			"#6e7681",
+			"#484f58",
+			"#30363d",
+			"#21262d",
+			"#161b22",
+			"#151b23",
+			"#0d1117",
+			"#010409"
+		],
+		gray: [
+			"#f6f8fa",
+			"#eaeef2",
+			"#d0d7de",
+			"#afb8c1",
+			"#8c959f",
+			"#6e7781",
+			"#57606a",
+			"#424a53",
+			"#32383f",
+			"#24292f"
+		],
+		blue: [
+			"#ddf4ff",
+			"#b6e3ff",
+			"#80ccff",
+			"#54aeff",
+			"#218bff",
+			"#0969da",
+			"#0550ae",
+			"#033d8b",
+			"#0a3069",
+			"#002155"
+		],
+		green: [
+			"#dafbe1",
+			"#aceebb",
+			"#6fdd8b",
+			"#4ac26b",
+			"#2da44e",
+			"#1a7f37",
+			"#116329",
+			"#044f1e",
+			"#003d16",
+			"#002d11"
+		],
+		red: [
+			"#ffebe9",
+			"#ffcecb",
+			"#ffaba8",
+			"#ff8182",
+			"#fa4549",
+			"#cf222e",
+			"#a40e26",
+			"#82071e",
+			"#660018",
+			"#4c0014"
+		]
+	}
+};
+
+//#endregion
+//#region src/core/themes/remoraid.ts
+const remoraidTheme = {
+	id: "remoraid",
+	label: "Remoraid",
+	description: "Soft, nature-inspired with green tones",
+	colors: {
+		dark: [
+			"#fafcff",
+			"#cad5e8",
+			"#8697b5",
+			"#4c5d7d",
+			"#222833",
+			"#222938",
+			"#0b0f14",
+			"#0b0f14",
+			"#030405",
+			"#000000"
+		],
+		gray: [
+			"#e3e7f1",
+			"#d8ddeb",
+			"#ced4e5",
+			"#c3cadf",
+			"#b8c1d9",
+			"#b8c1d9",
+			"#7b8cb8",
+			"#4b5c8b",
+			"#2a334d",
+			"#090b10"
+		],
+		blue: [
+			"#ddf4ff",
+			"#b6e3ff",
+			"#80ccff",
+			"#54aeff",
+			"#218bff",
+			"#0969da",
+			"#0550ae",
+			"#033d8b",
+			"#0a3069",
+			"#002155"
+		],
+		green: [
+			"#dafbe1",
+			"#aceebb",
+			"#6fdd8b",
+			"#4ac26b",
+			"#2da44e",
+			"#1a7f37",
+			"#116329",
+			"#044f1e",
+			"#003d16",
+			"#002d11"
+		],
+		yellow: [
+			"#fff8c5",
+			"#fae17d",
+			"#eac54f",
+			"#d4a72c",
+			"#bf8700",
+			"#9a6700",
+			"#7d4e00",
+			"#633c01",
+			"#4d2d00",
+			"#3b2300"
+		],
+		orange: [
+			"#fff1e5",
+			"#ffd8b5",
+			"#ffb77c",
+			"#fb8f44",
+			"#e16f24",
+			"#bc4c00",
+			"#953800",
+			"#762c00",
+			"#5c2200",
+			"#471700"
+		],
+		red: [
+			"#fff5f5",
+			"#ffe3e3",
+			"#ffc9c9",
+			"#ffa8a8",
+			"#ff8787",
+			"#ff6b6b",
+			"#fa5252",
+			"#f03e3e",
+			"#e03131",
+			"#c92a2a"
+		],
+		pink: [
+			"#fff0f6",
+			"#ffdeeb",
+			"#fcc2d7",
+			"#faa2c1",
+			"#f783ac",
+			"#f06595",
+			"#e64980",
+			"#d6336c",
+			"#c2255c",
+			"#a61e4d"
+		],
+		grape: [
+			"#f8f0fc",
+			"#f3d9fa",
+			"#eebefa",
+			"#e599f7",
+			"#da77f2",
+			"#cc5de8",
+			"#be4bdb",
+			"#ae3ec9",
+			"#9c36b5",
+			"#862e9c"
+		],
+		violet: [
+			"#f3f0ff",
+			"#e5dbff",
+			"#d0bfff",
+			"#b197fc",
+			"#9775fa",
+			"#845ef7",
+			"#7950f2",
+			"#7048e8",
+			"#6741d9",
+			"#5f3dc4"
+		],
+		indigo: [
+			"#edf2ff",
+			"#dbe4ff",
+			"#bac8ff",
+			"#91a7ff",
+			"#748ffc",
+			"#5c7cfa",
+			"#4c6ef5",
+			"#4263eb",
+			"#3b5bdb",
+			"#364fc7"
+		],
+		cyan: [
+			"#e3fafc",
+			"#c5f6fa",
+			"#99e9f2",
+			"#66d9e8",
+			"#3bc9db",
+			"#22b8cf",
+			"#15aabf",
+			"#1098ad",
+			"#0c8599",
+			"#0b7285"
+		],
+		teal: [
+			"#e6fcf5",
+			"#c3fae8",
+			"#96f2d7",
+			"#63e6be",
+			"#38d9a9",
+			"#20c997",
+			"#12b886",
+			"#0ca678",
+			"#099268",
+			"#087f5b"
+		],
+		lime: [
+			"#f4fce3",
+			"#e9fac8",
+			"#d8f5a2",
+			"#c0eb75",
+			"#a9e34b",
+			"#94d82d",
+			"#82c91e",
+			"#74b816",
+			"#66a80f",
+			"#5c940d"
+		],
+		Remoraid: [
+			"#dcf2de",
+			"#c7eccc",
+			"#b2e6b9",
+			"#9de1a6",
+			"#88db93",
+			"#88db93",
+			"#5fc26d",
+			"#479454",
+			"#296133",
+			"#19361d"
+		]
+	},
+	primaryColor: "Remoraid",
+	primaryShade: {
+		light: 6,
+		dark: 7
+	},
+	white: "#ffffff",
+	black: "#24292f",
+	autoContrast: true,
+	luminanceThreshold: .3,
+	fontFamily: "Open Sans",
+	fontFamilyMonospace: "Roboto Mono",
+	headings: {
+		fontFamily: "Open Sans",
+		fontWeight: "500",
+		sizes: {
+			h1: {
+				fontSize: "3.125rem",
+				lineHeight: "1.3",
+				fontWeight: "700"
+			},
+			h2: {
+				fontSize: "1.625rem",
+				lineHeight: "1.35",
+				fontWeight: "0"
+			},
+			h3: {
+				fontSize: "1.375rem",
+				lineHeight: "1.4",
+				fontWeight: "0"
+			},
+			h4: {
+				fontSize: "1.125rem",
+				lineHeight: "1.45",
+				fontWeight: "0"
+			},
+			h5: {
+				fontSize: "1rem",
+				lineHeight: "1.5",
+				fontWeight: "0"
+			},
+			h6: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5",
+				fontWeight: "0"
+			}
+		}
+	},
+	scale: 1,
+	radius: {
+		xs: "0.325rem",
+		sm: "0.75rem",
+		md: "0.7rem",
+		lg: "1.2rem",
+		xl: "2.4rem"
+	},
+	spacing: {
+		xs: "0.525rem",
+		sm: "0.65rem",
+		md: "0.9rem",
+		lg: "1.35rem",
+		xl: "2.2rem"
+	},
+	defaultRadius: "md",
+	breakpoints: {
+		xs: "36em",
+		sm: "48em",
+		md: "62em",
+		lg: "75em",
+		xl: "88em"
+	},
+	fontSmoothing: true,
+	respectReducedMotion: false,
+	focusRing: "auto",
+	cursorType: "default",
+	components: {
+		Input: {
+			defaultProps: {
+				variant: "default",
+				radius: "xl"
+			},
+			styles: {}
+		},
+		Card: {
+			defaultProps: { withBorder: true },
+			styles: {}
+		}
+	}
+};
+
+//#endregion
+//#region src/core/themes/slate.ts
+const slateTheme = {
+	id: "slate",
+	label: "Slate",
+	description: "Professional, minimal zinc palette",
+	primaryColor: "dark",
+	primaryShade: {
+		light: 9,
+		dark: 7
+	},
+	fontFamily: "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+	fontFamilyMonospace: "\"JetBrains Mono\", \"Fira Code\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+	headings: {
+		fontFamily: "\"Inter\", -apple-system, BlinkMacSystemFont, sans-serif",
+		fontWeight: "600",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2rem",
+				lineHeight: "1.2"
+			},
+			h2: {
+				fontSize: "1.5rem",
+				lineHeight: "1.25"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.3"
+			},
+			h4: {
+				fontSize: "1rem",
+				lineHeight: "1.4"
+			},
+			h5: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.75rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	fontSizes: {
+		xs: "0.75rem",
+		sm: "0.875rem",
+		md: "0.875rem",
+		lg: "1rem",
+		xl: "1.125rem"
+	},
+	lineHeights: {
+		xs: "1.4",
+		sm: "1.45",
+		md: "1.5",
+		lg: "1.55",
+		xl: "1.6"
+	},
+	radius: {
+		xs: "0.125rem",
+		sm: "0.25rem",
+		md: "0.375rem",
+		lg: "0.5rem",
+		xl: "0.75rem"
+	},
+	defaultRadius: "md",
+	shadows: {
+		xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+		sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+		md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+		lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+		xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+	},
+	colors: {
+		dark: [
+			"#f4f4f5",
+			"#a1a1aa",
+			"#71717a",
+			"#52525b",
+			"#3f3f46",
+			"#27272a",
+			"#18181b",
+			"#0f0f10",
+			"#09090b",
+			"#000000"
+		],
+		gray: [
+			"#fafafa",
+			"#f4f4f5",
+			"#e4e4e7",
+			"#d4d4d8",
+			"#a1a1aa",
+			"#71717a",
+			"#52525b",
+			"#3f3f46",
+			"#27272a",
+			"#18181b"
+		]
+	}
+};
+
+//#endregion
+//#region src/core/providers/ThemeProvider.ts
+const mantineThemeAtom = $atom({
+	name: "alepha.ui.theme",
+	schema: t.object({ id: t.string() }),
+	default: { id: "default" }
+});
+var ThemeProvider = class {
+	alepha = $inject(Alepha);
+	themeCookie = $cookie(mantineThemeAtom);
+	themes = [
+		defaultTheme,
+		remoraidTheme,
+		midnightTheme,
+		slateTheme,
+		auroraTheme,
+		emberTheme,
+		crystalTheme
+	];
+	themeHead = $head(() => {
+		return { htmlAttributes: { "data-theme": this.getTheme().id } };
+	});
+	setTheme(theme) {
+		this.themeCookie.set(theme);
+		this.alepha.store.set(mantineThemeAtom, theme);
+		if (typeof document === "undefined") return;
+		document.documentElement.removeAttribute("data-theme");
+		if (theme.id !== "default") document.documentElement.setAttribute("data-theme", theme.id);
+	}
+	getTheme() {
+		try {
+			return this.themeCookie.get() ?? this.alepha.store.get(mantineThemeAtom) ?? mantineThemeAtom.options.default;
+		} catch {
+			return this.alepha.store.get(mantineThemeAtom) ?? mantineThemeAtom.options.default;
+		}
+	}
+};
+
+//#endregion
+//#region src/core/hooks/useTheme.ts
+const useTheme = () => {
+	useStore(mantineThemeAtom);
+	const themeService = useInject(ThemeProvider);
+	const currentTheme = themeService.getTheme();
+	const fullTheme = themeService.themes.find((t$1) => t$1.id === currentTheme.id) ?? themeService.themes[0];
+	const applyTheme = (theme) => {
+		themeService.setTheme({ id: theme.id });
+	};
+	return [fullTheme, applyTheme];
+};
+
+//#endregion
 //#region src/core/services/ToastService.tsx
 var ToastService = class {
 	raw = notifications;
@@ -81,13 +1025,312 @@ var ToastService = class {
 *
 * @example
 * ```tsx
-* const toast = useToast();
-* toast.success({ message: "Operation completed successfully!" });
-* toast.error({ title: "Error", message: "Something went wrong" });
+* const toast = useToast();
+* toast.success({ message: "Operation completed successfully!" });
+* toast.error({ title: "Error", message: "Something went wrong" });
+* ```
+*/
+const useToast = () => {
+	return useInject(ToastService);
+};
+
+//#endregion
+//#region src/core/constants/ui.ts
+const ui = {
+	colors: {
+		transparent: "transparent",
+		background: "var(--alepha-background)",
+		surface: "var(--alepha-surface)",
+		elevated: "var(--alepha-elevated)",
+		border: "var(--alepha-border)"
+	},
+	sizes: { icon: {
+		xs: 12,
+		sm: 16,
+		md: 20,
+		lg: 24,
+		xl: 32
+	} }
+};
+
+//#endregion
+//#region src/core/components/buttons/ActionButton.tsx
+const ActionMenuItem = (props) => {
+	const { item, index } = props;
+	const router = useRouter();
+	const action = useAction({ handler: async (e) => {
+		await item.onClick?.();
+	} }, [item.onClick]);
+	if (item.type === "divider") return /* @__PURE__ */ jsx(Menu.Divider, {}, index);
+	if (item.type === "label") return /* @__PURE__ */ jsx(Menu.Label, { children: item.label }, index);
+	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsxs(Menu, {
+		trigger: "hover",
+		position: "right-start",
+		offset: 2,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Menu.Item, {
+			leftSection: item.icon,
+			rightSection: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }),
+			children: item.label
+		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: item.children.map((child, childIndex) => /* @__PURE__ */ jsx(ActionMenuItem, {
+			item: child,
+			index: childIndex
+		}, childIndex)) })]
+	}, index);
+	const menuItemProps = {};
+	if (props.item.onClick) menuItemProps.onClick = action.run;
+	else if (props.item.href) Object.assign(menuItemProps, router.anchor(props.item.href));
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		leftSection: item.icon,
+		onClick: item.onClick,
+		color: item.color,
+		rightSection: item.active ? /* @__PURE__ */ jsx(ThemeIcon, {
+			size: "xs",
+			variant: "transparent",
+			children: /* @__PURE__ */ jsx(IconCheck, {})
+		}) : void 0,
+		...menuItemProps,
+		children: item.label
+	}, index);
+};
+const ActionButton = (_props) => {
+	const props = {
+		variant: "subtle",
+		..._props
+	};
+	const { tooltip, menu, icon, ...restProps } = props;
+	restProps.color ??= "gray";
+	restProps.c ??= "var(--mantine-color-text)";
+	if (props.icon) {
+		const icon$1 = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: ui.sizes.icon.md }) : /* @__PURE__ */ jsx(ThemeIcon, {
+			w: 24,
+			variant: "transparent",
+			size: "sm",
+			c: "var(--mantine-color-text)",
+			...props.themeIconProps,
+			children: props.icon
+		});
+		if (!props.children) {
+			restProps.children = Children.only(icon$1);
+			restProps.px ??= "xs";
+		} else restProps.leftSection = icon$1;
+	}
+	if (props.leftSection && !props.children) restProps.px ??= "xs";
+	if (props.textVisibleFrom) {
+		const { children, textVisibleFrom, leftSection, ...rest } = restProps;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex$1, {
+			w: "100%",
+			visibleFrom: textVisibleFrom,
+			children: /* @__PURE__ */ jsx(ActionButton, {
+				flex: 1,
+				...rest,
+				leftSection,
+				tooltip,
+				menu,
+				children
+			})
+		}), /* @__PURE__ */ jsx(Flex$1, {
+			w: "100%",
+			hiddenFrom: textVisibleFrom,
+			children: /* @__PURE__ */ jsx(ActionButton, {
+				px: "xs",
+				...rest,
+				tooltip,
+				menu,
+				children: leftSection
+			})
+		})] });
+	}
+	const renderAction = () => {
+		if ("href" in restProps && restProps.href) {
+			if (restProps.href.startsWith("http") || restProps.target) return /* @__PURE__ */ jsx(ActionHrefButton, {
+				...restProps,
+				href: restProps.href,
+				children: restProps.children
+			});
+			return /* @__PURE__ */ jsx(ActionNavigationButton, {
+				...restProps,
+				href: restProps.href,
+				children: restProps.children
+			});
+		}
+		delete restProps.classNameActive;
+		delete restProps.variantActive;
+		if ("action" in restProps && restProps.action) return /* @__PURE__ */ jsx(ActionHookButton, {
+			...restProps,
+			action: restProps.action,
+			children: restProps.children
+		});
+		if ("onClick" in restProps && restProps.onClick) return /* @__PURE__ */ jsx(ActionClickButton, {
+			...restProps,
+			onClick: restProps.onClick,
+			children: restProps.children
+		});
+		if ("form" in restProps && restProps.form) {
+			if (restProps.type === "reset") return /* @__PURE__ */ jsx(ActionResetButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+			return /* @__PURE__ */ jsx(ActionSubmitButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+		}
+		return /* @__PURE__ */ jsx(Button, {
+			...restProps,
+			children: restProps.children
+		});
+	};
+	let actionElement = renderAction();
+	if (menu) actionElement = /* @__PURE__ */ jsxs(Menu, {
+		position: menu.position || "bottom-start",
+		width: menu.width || 200,
+		shadow: menu.shadow || "md",
+		trigger: menu.on === "hover" ? "hover" : "click",
+		...menu.menuProps,
+		children: [/* @__PURE__ */ jsx(Menu.Target, {
+			...menu.targetProps,
+			children: actionElement
+		}), /* @__PURE__ */ jsx(Menu.Dropdown, { children: menu.items.map((item, index) => /* @__PURE__ */ jsx(ActionMenuItem, {
+			item,
+			index
+		}, index)) })]
+	});
+	if (tooltip) {
+		const defaultTooltipProps = { openDelay: 1e3 };
+		return /* @__PURE__ */ jsx(Tooltip, { ...typeof tooltip === "string" ? {
+			...defaultTooltipProps,
+			label: tooltip,
+			children: actionElement
+		} : {
+			...defaultTooltipProps,
+			...tooltip,
+			children: actionElement
+		} });
+	}
+	return actionElement;
+};
+var ActionButton_default = ActionButton;
+/**
+* Action button that submits a form with loading and disabled state handling.
+*/
+const ActionSubmitButton = (props) => {
+	const { form, ...buttonProps } = props;
+	const state = useFormState(form);
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		loading: state.loading,
+		disabled: state.loading,
+		type: "submit",
+		children: props.children
+	});
+};
+const ActionResetButton = (props) => {
+	const { form, ...buttonProps } = props;
+	const state = useFormState(form);
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		disabled: state.loading,
+		type: "reset",
+		children: props.children
+	});
+};
+/**
+* Action button that integrates with useAction hook return value.
+* Automatically handles loading state and executes the action on click.
+*
+* @example
+* ```tsx
+* const saveAction = useAction({
+*   handler: async (data) => {
+*     await api.save(data);
+*   }
+* }, []);
+*
+* <ActionButton action={saveAction}>
+*   Save
+* </ActionButton>
+* ```
+*/
+const ActionHookButton = (props) => {
+	const { action, ...buttonProps } = props;
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		disabled: action.loading || props.disabled,
+		loading: action.loading,
+		onClick: () => action.run(),
+		children: props.children
+	});
+};
+/**
+* Basic action button that handles click events with loading and error handling.
+*
+* @example
+* ```tsx
+* <ActionButton onClick={() => api.doSomething()}>
+*   Do Something
+* </ActionButton>
 * ```
 */
-const useToast = () => {
-	return useInject(ToastService);
+const ActionClickButton = (props) => {
+	const action = useAction({ handler: async (e) => {
+		await props.onClick(e);
+	} }, [props.onClick]);
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		disabled: action.loading || props.disabled,
+		loading: action.loading,
+		onClick: action.run,
+		children: props.children
+	});
+};
+/**
+* Action for navigation with active state support.
+*/
+const ActionNavigationButton = (props) => {
+	const { active: options, classNameActive, variantActive, routerGoOptions, ...buttonProps } = props;
+	const router = useRouter();
+	const { isPending, isActive } = useActive(options ? {
+		href: props.href,
+		...options
+	} : { href: props.href });
+	const anchorProps = router.anchor(props.href, routerGoOptions);
+	const className = buttonProps.className || "";
+	if (isActive && options !== false && classNameActive) buttonProps.className = `${className} ${classNameActive}`.trim();
+	if (props.anchorProps) return /* @__PURE__ */ jsx(Anchor, {
+		component: "a",
+		...anchorProps,
+		...props.anchorProps,
+		children: props.children
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		component: "a",
+		loading: isPending,
+		...buttonProps,
+		...anchorProps,
+		variant: isActive && options !== false ? variantActive ?? "filled" : buttonProps.variant ?? "subtle",
+		children: props.children
+	});
+};
+const ActionHrefButton = (props) => {
+	const { active: options, classNameActive, variantActive, routerGoOptions, target, ...buttonProps } = props;
+	return /* @__PURE__ */ jsx(Button, {
+		component: "a",
+		target,
+		...buttonProps,
+		children: props.children
+	});
+};
+function isComponentType(param) {
+	if (isValidElement(param)) return false;
+	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
+}
+const renderIcon = (icon) => {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: ui.sizes.icon.md });
+	return icon;
 };
 
 //#endregion
@@ -97,8 +1340,12 @@ const Omnibar = (props) => {
 	const searchPlaceholder = props.searchPlaceholder ?? "Search...";
 	const nothingFound = props.nothingFound ?? "Nothing found...";
 	const router = useRouter();
+	const [user] = useStore("alepha.server.request.user");
 	return /* @__PURE__ */ jsx(Spotlight, {
-		actions: useMemo(() => router.concretePages.map((page) => ({
+		actions: useMemo(() => router.concretePages.filter((page) => {
+			if (page.can && !page.can()) return false;
+			return true;
+		}).map((page) => ({
 			id: page.name,
 			label: page.label ?? page.name,
 			description: page.description,
@@ -106,12 +1353,12 @@ const Omnibar = (props) => {
 				if (page.staticName) return router.go(page.staticName, { params: page.params });
 				return router.go(page.name);
 			},
-			leftSection: page.icon
-		})), []),
+			leftSection: renderIcon(page.icon)
+		})), [user]),
 		shortcut,
 		limit: 10,
 		searchProps: {
-			leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 20 }),
+			leftSection: /* @__PURE__ */ jsx(IconSearch, { size: ui.sizes.icon.md }),
 			placeholder: searchPlaceholder
 		},
 		nothingFound
@@ -123,6 +1370,7 @@ var Omnibar_default = Omnibar;
 //#region src/core/components/layout/AlephaMantineProvider.tsx
 const AlephaMantineProvider = (props) => {
 	const toast = useToast();
+	const [theme] = useTheme();
 	useEvents({
 		"react:transition:begin": () => {
 			nprogress.start();
@@ -143,7 +1391,10 @@ const AlephaMantineProvider = (props) => {
 		...props.colorSchemeScript
 	}), /* @__PURE__ */ jsxs(MantineProvider, {
 		...props.mantine,
-		theme: { ...props.mantine?.theme },
+		theme: {
+			...theme,
+			...props.mantine?.theme
+		},
 		children: [
 			/* @__PURE__ */ jsx(Notifications, { ...props.notifications }),
 			/* @__PURE__ */ jsx(NavigationProgress, { ...props.navigationProgress }),
@@ -531,25 +1782,6 @@ const PromptDialog = ({ options, onSubmit }) => {
 };
 var PromptDialog_default = PromptDialog;
 
-//#endregion
-//#region src/core/constants/ui.ts
-const ui = {
-	colors: {
-		transparent: "transparent",
-		background: "var(--alepha-background)",
-		surface: "var(--alepha-surface)",
-		elevated: "var(--alepha-elevated)",
-		border: "var(--alepha-border)"
-	},
-	sizes: { icon: {
-		xs: 12,
-		sm: 16,
-		md: 20,
-		lg: 24,
-		xl: 32
-	} }
-};
-
 //#endregion
 //#region src/core/services/DialogService.tsx
 var DialogService = class {
@@ -603,360 +1835,79 @@ var DialogService = class {
 				})
 			});
 		});
-	}
-	/**
-	* Show a prompt dialog to get user input
-	*/
-	prompt(options) {
-		return new Promise((resolve) => {
-			const modalId = this.open({
-				...options,
-				title: options?.title || "Input",
-				closeOnClickOutside: false,
-				closeOnEscape: false,
-				content: /* @__PURE__ */ jsx(PromptDialog_default, {
-					options,
-					onSubmit: (value) => {
-						this.close(modalId);
-						resolve(value);
-					}
-				})
-			});
-		});
-	}
-	/**
-	* Open a custom dialog with provided content
-	*/
-	open(options) {
-		return modals.open({
-			...this.options.default,
-			...options,
-			children: options?.content || options?.message
-		});
-	}
-	/**
-	* Close the currently open dialog or a specific dialog by ID
-	*/
-	close(modalId) {
-		if (modalId) modals.close(modalId);
-		else modals.closeAll();
-	}
-	/**
-	* Show a JSON editor/viewer dialog
-	*/
-	json(data, options) {
-		this.open({
-			size: "lg",
-			title: options?.title || "Json Viewer",
-			...options,
-			content: /* @__PURE__ */ jsx(Flex$1, {
-				bdrs: "md",
-				w: "100%",
-				flex: 1,
-				p: "sm",
-				bg: ui.colors.surface,
-				children: /* @__PURE__ */ jsx(JsonViewer_default, {
-					size: "xs",
-					data
-				})
-			})
-		});
-	}
-	/**
-	* Show a form dialog for structured input
-	*/
-	form(options) {
-		return Promise.resolve(null);
-	}
-	/**
-	* Show a loading/progress dialog with optional progress percentage
-	*/
-	loading(options) {}
-	/**
-	* Show an image viewer/gallery dialog
-	*/
-	image(src, options) {}
-};
-
-//#endregion
-//#region src/core/components/buttons/ActionButton.tsx
-const ActionMenuItem = (props) => {
-	const { item, index } = props;
-	const router = useRouter();
-	const action = useAction({ handler: async (e) => {
-		await item.onClick?.();
-	} }, [item.onClick]);
-	if (item.type === "divider") return /* @__PURE__ */ jsx(Menu.Divider, {}, index);
-	if (item.type === "label") return /* @__PURE__ */ jsx(Menu.Label, { children: item.label }, index);
-	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsxs(Menu, {
-		trigger: "hover",
-		position: "right-start",
-		offset: 2,
-		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Menu.Item, {
-			leftSection: item.icon,
-			rightSection: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }),
-			children: item.label
-		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: item.children.map((child, childIndex) => /* @__PURE__ */ jsx(ActionMenuItem, {
-			item: child,
-			index: childIndex
-		}, childIndex)) })]
-	}, index);
-	const menuItemProps = {};
-	if (props.item.onClick) menuItemProps.onClick = action.run;
-	else if (props.item.href) Object.assign(menuItemProps, router.anchor(props.item.href));
-	return /* @__PURE__ */ jsx(Menu.Item, {
-		leftSection: item.icon,
-		onClick: item.onClick,
-		color: item.color,
-		rightSection: item.active ? /* @__PURE__ */ jsx(ThemeIcon, {
-			size: "xs",
-			variant: "transparent",
-			children: /* @__PURE__ */ jsx(IconCheck, {})
-		}) : void 0,
-		...menuItemProps,
-		children: item.label
-	}, index);
-};
-const ActionButton = (_props) => {
-	const props = {
-		variant: "default",
-		..._props
-	};
-	const { tooltip, menu, icon, ...restProps } = props;
-	if (props.icon) {
-		const icon$1 = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: ui.sizes.icon.md }) : /* @__PURE__ */ jsx(ThemeIcon, {
-			w: 24,
-			variant: "transparent",
-			size: "sm",
-			c: "var(--mantine-color-text)",
-			...props.themeIconProps,
-			children: props.icon
-		});
-		if (!props.children) {
-			restProps.children = Children.only(icon$1);
-			restProps.p ??= "xs";
-		} else restProps.leftSection = icon$1;
-	}
-	if (props.leftSection && !props.children) {
-		restProps.className ??= "mantine-Action-iconOnly";
-		restProps.p ??= "xs";
-	}
-	if (props.textVisibleFrom) {
-		const { children, textVisibleFrom, leftSection, ...rest } = restProps;
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex$1, {
-			w: "100%",
-			visibleFrom: textVisibleFrom,
-			children: /* @__PURE__ */ jsx(ActionButton, {
-				flex: 1,
-				...rest,
-				leftSection,
-				tooltip,
-				menu,
-				children
-			})
-		}), /* @__PURE__ */ jsx(Flex$1, {
-			w: "100%",
-			hiddenFrom: textVisibleFrom,
-			children: /* @__PURE__ */ jsx(ActionButton, {
-				px: "xs",
-				...rest,
-				tooltip,
-				menu,
-				children: leftSection
-			})
-		})] });
-	}
-	const renderAction = () => {
-		if ("href" in restProps && restProps.href) {
-			if (restProps.href.startsWith("http") || restProps.target) return /* @__PURE__ */ jsx(ActionHrefButton, {
-				...restProps,
-				href: restProps.href,
-				children: restProps.children
-			});
-			return /* @__PURE__ */ jsx(ActionNavigationButton, {
-				...restProps,
-				href: restProps.href,
-				children: restProps.children
+	}
+	/**
+	* Show a prompt dialog to get user input
+	*/
+	prompt(options) {
+		return new Promise((resolve) => {
+			const modalId = this.open({
+				...options,
+				title: options?.title || "Input",
+				closeOnClickOutside: false,
+				closeOnEscape: false,
+				content: /* @__PURE__ */ jsx(PromptDialog_default, {
+					options,
+					onSubmit: (value) => {
+						this.close(modalId);
+						resolve(value);
+					}
+				})
 			});
-		}
-		delete restProps.classNameActive;
-		delete restProps.variantActive;
-		if ("action" in restProps && restProps.action) return /* @__PURE__ */ jsx(ActionHookButton, {
-			...restProps,
-			action: restProps.action,
-			children: restProps.children
 		});
-		if ("onClick" in restProps && restProps.onClick) return /* @__PURE__ */ jsx(ActionClickButton, {
-			...restProps,
-			onClick: restProps.onClick,
-			children: restProps.children
+	}
+	/**
+	* Open a custom dialog with provided content
+	*/
+	open(options) {
+		return modals.open({
+			...this.options.default,
+			...options,
+			children: options?.content || options?.message
 		});
-		if ("form" in restProps && restProps.form) {
-			if (restProps.type === "reset") return /* @__PURE__ */ jsx(ActionResetButton, {
-				...restProps,
-				form: restProps.form,
-				children: restProps.children
-			});
-			return /* @__PURE__ */ jsx(ActionSubmitButton, {
-				...restProps,
-				form: restProps.form,
-				children: restProps.children
-			});
-		}
-		return /* @__PURE__ */ jsx(Button, {
-			...restProps,
-			children: restProps.children
+	}
+	/**
+	* Close the currently open dialog or a specific dialog by ID
+	*/
+	close(modalId) {
+		if (modalId) modals.close(modalId);
+		else modals.closeAll();
+	}
+	/**
+	* Show a JSON editor/viewer dialog
+	*/
+	json(data, options) {
+		this.open({
+			size: "lg",
+			title: options?.title || "Json Viewer",
+			...options,
+			content: /* @__PURE__ */ jsx(Flex$1, {
+				bdrs: "md",
+				w: "100%",
+				flex: 1,
+				p: "sm",
+				bg: ui.colors.surface,
+				children: /* @__PURE__ */ jsx(JsonViewer_default, {
+					size: "xs",
+					data
+				})
+			})
 		});
-	};
-	let actionElement = renderAction();
-	if (menu) actionElement = /* @__PURE__ */ jsxs(Menu, {
-		position: menu.position || "bottom-start",
-		width: menu.width || 200,
-		shadow: menu.shadow || "md",
-		trigger: menu.on === "hover" ? "hover" : "click",
-		...menu.menuProps,
-		children: [/* @__PURE__ */ jsx(Menu.Target, {
-			...menu.targetProps,
-			children: actionElement
-		}), /* @__PURE__ */ jsx(Menu.Dropdown, { children: menu.items.map((item, index) => /* @__PURE__ */ jsx(ActionMenuItem, {
-			item,
-			index
-		}, index)) })]
-	});
-	if (tooltip) {
-		const defaultTooltipProps = { openDelay: 1e3 };
-		return /* @__PURE__ */ jsx(Tooltip, { ...typeof tooltip === "string" ? {
-			...defaultTooltipProps,
-			label: tooltip,
-			children: actionElement
-		} : {
-			...defaultTooltipProps,
-			...tooltip,
-			children: actionElement
-		} });
 	}
-	return actionElement;
-};
-var ActionButton_default = ActionButton;
-/**
-* Action button that submits a form with loading and disabled state handling.
-*/
-const ActionSubmitButton = (props) => {
-	const { form, ...buttonProps } = props;
-	const state = useFormState(form);
-	return /* @__PURE__ */ jsx(Button, {
-		...buttonProps,
-		loading: state.loading,
-		disabled: state.loading,
-		type: "submit",
-		children: props.children
-	});
-};
-const ActionResetButton = (props) => {
-	const { form, ...buttonProps } = props;
-	const state = useFormState(form);
-	return /* @__PURE__ */ jsx(Button, {
-		...buttonProps,
-		disabled: state.loading,
-		type: "reset",
-		children: props.children
-	});
-};
-/**
-* Action button that integrates with useAction hook return value.
-* Automatically handles loading state and executes the action on click.
-*
-* @example
-* ```tsx
-* const saveAction = useAction({
-*   handler: async (data) => {
-*     await api.save(data);
-*   }
-* }, []);
-*
-* <ActionButton action={saveAction}>
-*   Save
-* </ActionButton>
-* ```
-*/
-const ActionHookButton = (props) => {
-	const { action, ...buttonProps } = props;
-	return /* @__PURE__ */ jsx(Button, {
-		...buttonProps,
-		disabled: action.loading || props.disabled,
-		loading: action.loading,
-		onClick: () => action.run(),
-		children: props.children
-	});
-};
-/**
-* Basic action button that handles click events with loading and error handling.
-*
-* @example
-* ```tsx
-* <ActionButton onClick={() => api.doSomething()}>
-*   Do Something
-* </ActionButton>
-* ```
-*/
-const ActionClickButton = (props) => {
-	const action = useAction({ handler: async (e) => {
-		await props.onClick(e);
-	} }, [props.onClick]);
-	return /* @__PURE__ */ jsx(Button, {
-		...props,
-		disabled: action.loading || props.disabled,
-		loading: action.loading,
-		onClick: action.run,
-		children: props.children
-	});
-};
-/**
-* Action for navigation with active state support.
-*/
-const ActionNavigationButton = (props) => {
-	const { active: options, classNameActive, variantActive, routerGoOptions, ...buttonProps } = props;
-	const router = useRouter();
-	const { isPending, isActive } = useActive(options ? {
-		href: props.href,
-		...options
-	} : { href: props.href });
-	const anchorProps = router.anchor(props.href, routerGoOptions);
-	const className = buttonProps.className || "";
-	if (isActive && options !== false && classNameActive) buttonProps.className = `${className} ${classNameActive}`.trim();
-	if (props.anchorProps) return /* @__PURE__ */ jsx(Anchor, {
-		component: "a",
-		...anchorProps,
-		...props.anchorProps,
-		children: props.children
-	});
-	return /* @__PURE__ */ jsx(Button, {
-		component: "a",
-		loading: isPending,
-		...buttonProps,
-		...anchorProps,
-		variant: isActive && options !== false ? variantActive ?? "filled" : buttonProps.variant ?? "subtle",
-		children: props.children
-	});
-};
-const ActionHrefButton = (props) => {
-	const { active: options, classNameActive, variantActive, routerGoOptions, target, ...buttonProps } = props;
-	return /* @__PURE__ */ jsx(Button, {
-		component: "a",
-		target,
-		...buttonProps,
-		children: props.children
-	});
-};
-function isComponentType(param) {
-	if (isValidElement(param)) return false;
-	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
-}
-const renderIcon = (icon) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: ui.sizes.icon.md });
-	return icon;
+	/**
+	* Show a form dialog for structured input
+	*/
+	form(options) {
+		return Promise.resolve(null);
+	}
+	/**
+	* Show a loading/progress dialog with optional progress percentage
+	*/
+	loading(options) {}
+	/**
+	* Show an image viewer/gallery dialog
+	*/
+	image(src, options) {}
 };
 
 //#endregion
@@ -1033,7 +1984,7 @@ const DarkModeButton = (props) => {
 	});
 	return /* @__PURE__ */ jsx(ActionButton_default, {
 		onClick: toggleColorScheme,
-		variant: props.variant ?? "default",
+		variant: props.variant ?? "subtle",
 		size: props.size ?? "sm",
 		"aria-label": "Toggle color scheme",
 		px: "xs",
@@ -1096,6 +2047,24 @@ const OmnibarButton = (props) => {
 };
 var OmnibarButton_default = OmnibarButton;
 
+//#endregion
+//#region src/core/components/buttons/ThemeButton.tsx
+const ThemeButton = (props) => {
+	const [theme, setTheme] = useTheme();
+	const themes = useInject(ThemeProvider).themes;
+	return /* @__PURE__ */ jsx(ActionButton_default, {
+		variant: "subtle",
+		icon: IconPalette,
+		menu: { items: themes.map((it) => ({
+			label: it.label,
+			onClick: () => setTheme(it),
+			active: theme.id === it.id
+		})) },
+		...props.actionProps
+	});
+};
+var ThemeButton_default = ThemeButton;
+
 //#endregion
 //#region src/core/utils/icons.tsx
 /**
@@ -2119,6 +3088,7 @@ const Sidebar = (props) => {
 			}
 		}
 		if ("element" in item) return /* @__PURE__ */ jsx(Flex$1, { children: item.element }, key);
+		if (item.can && !item.can()) return null;
 		if (props.collapsed) return /* @__PURE__ */ jsx(SidebarCollapsedItem, {
 			item,
 			level: 0,
@@ -2207,7 +3177,6 @@ const SidebarItem = (props) => {
 			href: props.item.href,
 			target: props.item.target,
 			size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
-			color: "var(--alepha-text)",
 			variant: "subtle",
 			variantActive: "default",
 			radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
@@ -2237,7 +3206,7 @@ const SidebarItem = (props) => {
 				top: 48,
 				left: 20 + 32 * level,
 				bottom: 16
-			} }), item.children.map((child, index) => /* @__PURE__ */ jsx(SidebarItem, {
+			} }), item.children.filter((child) => !child.can || child.can()).map((child, index) => /* @__PURE__ */ jsx(SidebarItem, {
 				item: child,
 				level: level + 1,
 				onItemClick: props.onItemClick,
@@ -2270,9 +3239,12 @@ const SidebarCollapsedItem = (props) => {
 	};
 	return /* @__PURE__ */ jsx(ActionButton_default, {
 		size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
-		color: "var(--alepha-text)",
 		variant: "subtle",
 		variantActive: "default",
+		tooltip: item.children ? void 0 : {
+			label: item.label,
+			position: "right"
+		},
 		radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
 		onClick: handleItemClick,
 		icon: renderIcon(item.icon) ?? /* @__PURE__ */ jsx(IconSquareRounded, {}),
@@ -2281,11 +3253,11 @@ const SidebarCollapsedItem = (props) => {
 		menu: item.children ? {
 			position: "right",
 			on: "hover",
-			items: item.children.map((child) => ({
+			items: item.children.filter((child) => !child.can || child.can()).map((child) => ({
 				label: child.label,
 				href: child.href,
 				icon: renderIcon(child.icon),
-				children: child.children
+				children: child.children?.filter((c) => !c.can || c.can())
 			}))
 		} : void 0,
 		...props.item.actionProps
@@ -2319,14 +3291,16 @@ const AdminShell = (props) => {
 	}];
 	const hasSidebar = showSidebar && props.sidebarProps !== void 0;
 	return /* @__PURE__ */ jsxs(AppShell, {
+		w: "100%",
+		flex: 1,
 		padding: "md",
 		header: hasSidebar || props.appBarProps || props.header ? { height: 60 } : void 0,
 		navbar: hasSidebar ? {
-			width: collapsed ? { base: 72 } : { base: 300 },
+			width: collapsed ? { base: 78 } : { base: 300 },
 			breakpoint: "sm",
 			collapsed: { mobile: !opened }
 		} : void 0,
-		footer: props.footer ? { height: 60 } : void 0,
+		footer: props.footer ? { height: 24 } : void 0,
 		...props.appShellProps,
 		children: [
 			/* @__PURE__ */ jsx(AppShell.Header, {
@@ -2476,10 +3450,15 @@ const DataTable = (props) => {
 		gap: "sm",
 		flex: 1,
 		children: [
-			props.filters ? /* @__PURE__ */ jsx(TypeForm_default, {
-				...props.typeFormProps,
-				form,
-				schema
+			props.filters ? /* @__PURE__ */ jsx(Card, {
+				withBorder: true,
+				p: "lg",
+				bg: ui.colors.elevated,
+				children: /* @__PURE__ */ jsx(TypeForm_default, {
+					...props.typeFormProps,
+					form,
+					schema
+				})
 			}) : null,
 			/* @__PURE__ */ jsx(Flex$1, {
 				className: "overflow-auto",
@@ -2566,17 +3545,19 @@ const AlephaUI = $module({
 	services: [
 		DialogService,
 		ToastService,
+		ThemeProvider,
 		RootRouter
 	],
 	register: (alepha) => {
 		alepha.with(AlephaReactI18n);
 		alepha.with(AlephaReactHead);
 		alepha.with(AlephaReactForm);
+		alepha.with(ThemeProvider);
 		alepha.with(DialogService);
 		alepha.with(ToastService);
 	}
 });
 
 //#endregion
-export { ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, BurgerButton_default as BurgerButton, ClipboardButton_default as ClipboardButton, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlDate_default as ControlDate, ControlQueryBuilder_default as ControlQueryBuilder, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, JsonViewer_default as JsonViewer, LanguageButton_default as LanguageButton, OPERATOR_INFO, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ToastService, TypeForm_default as TypeForm, capitalize, extractSchemaFields, getDefaultIcon, getOperatorsForField, prettyName, ui, useDialog, useToast };
+export { ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, BurgerButton_default as BurgerButton, ClipboardButton_default as ClipboardButton, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlDate_default as ControlDate, ControlQueryBuilder_default as ControlQueryBuilder, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, JsonViewer_default as JsonViewer, LanguageButton_default as LanguageButton, OPERATOR_INFO, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ThemeButton_default as ThemeButton, ThemeProvider, ToastService, TypeForm_default as TypeForm, capitalize, extractSchemaFields, getDefaultIcon, getOperatorsForField, mantineThemeAtom, prettyName, ui, useDialog, useToast };
 //# sourceMappingURL=index.js.map