@alepha/ui 0.13.6 → 0.13.7

package/dist/core/index.js

@@ -1,426 +1,43 @@
 import { AlephaReactForm, FormValidationError, useForm, useFormState } from "@alepha/react/form";
 import { $head, AlephaReactHead } from "@alepha/react/head";
 import { AlephaReactI18n, useI18n } from "@alepha/react/i18n";
-import { $atom, $inject, $module, Alepha, TypeBoxError, t } from "alepha";
+import { $atom, $inject, $module, Alepha, AlephaError, 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, 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 { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Box, Burger, Button, Card, Checkbox, Collapse, ColorInput, ColorSchemeScript, CopyButton, Divider, Fieldset, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, UnstyledButton, useComputedColorScheme, useMantineColorScheme, useMantineTheme } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
 import { Notifications, notifications } from "@mantine/notifications";
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
-import { IconAlertTriangle, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClock, IconColorPicker, IconCopy, IconFile, IconFilter, IconHash, IconInfoCircle, IconInfoTriangle, IconKey, IconLanguage, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconX } from "@tabler/icons-react";
+import { IconAlertTriangle, IconArrowDown, IconArrowUp, IconArrowsSort, IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClock, IconColorPicker, IconColumns, IconCopy, 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Spotlight, spotlight } from "@mantine/spotlight";
 import { Children, createElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ui as ui$1 } from "@alepha/ui";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
 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"
-		]
-	}
-};
+//#region ../../src/core/atoms/alephaThemeAtom.ts
+const alephaThemeAtom = $atom({
+	name: "alepha.ui.theme",
+	schema: t.object({ index: t.integer() }),
+	default: { index: 0 }
+});
 
 //#endregion
-//#region ../../src/core/themes/default.ts
+//#region ../../src/core/atoms/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"
-		]
-	}
+	name: "Default",
+	description: "Default Alepha Theme"
 };
 
 //#endregion
-//#region ../../src/core/themes/midnight.ts
+//#region ../../src/core/atoms/themes/midnight.ts
 const midnightTheme = {
-	id: "midnight",
-	label: "Midnight",
+	name: "Midnight",
 	description: "Clean, developer-focused design",
-	primaryColor: "gray",
+	primaryColor: "pink",
 	primaryShade: {
 		light: 7,
 		dark: 8
@@ -531,432 +148,69 @@ const midnightTheme = {
 };
 
 //#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"
-		]
-	}
-};
+//#region ../../src/core/atoms/alephaThemeListAtom.ts
+const alephaThemeListAtom = $atom({
+	name: "alepha.ui.themeList",
+	schema: t.array(t.json()),
+	default: [defaultTheme, midnightTheme]
+});
 
 //#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 } };
+	cookie = $cookie({
+		name: "theme",
+		schema: alephaThemeAtom.schema,
+		ttl: [1, "year"]
+	});
+	head = $head(() => {
+		const theme = this.getTheme();
+		if (!theme || !theme.name) return {};
+		return { htmlAttributes: { "data-theme": theme.name } };
 	});
-	setTheme(theme) {
-		this.themeCookie.set(theme);
-		this.alepha.store.set(mantineThemeAtom, theme);
+	setTheme(index) {
+		const newTheme = this.alepha.store.get(alephaThemeListAtom)[index];
+		if (!newTheme) 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 (theme.id !== "default") document.documentElement.setAttribute("data-theme", theme.id);
+		if (newTheme.name) document.documentElement.setAttribute("data-theme", newTheme.name);
 	}
 	getTheme() {
+		const index = this.getThemeIndex();
+		const list = this.alepha.store.get(alephaThemeListAtom);
+		return list[index] || list[0] || defaultTheme;
+	}
+	getThemeIndex() {
 		try {
-			return this.themeCookie.get() ?? this.alepha.store.get(mantineThemeAtom) ?? mantineThemeAtom.options.default;
+			return this.cookie.get()?.index ?? this.alepha.store.get(alephaThemeAtom)?.index ?? 0;
 		} catch {
-			return this.alepha.store.get(mantineThemeAtom) ?? mantineThemeAtom.options.default;
+			return this.alepha.store.get(alephaThemeAtom)?.index ?? 0;
 		}
 	}
 };
 
 //#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 });
+/**
+* Hook to get and set the current theme.
+*
+* Returns a tuple with the current theme and a function to set the theme.
+*
+* ```tsx
+* const [theme, setTheme] = useTheme();
+* ```
+*/
+const useTheme = () => {
+	useStore(alephaThemeAtom);
+	const themeProvider = useInject(ThemeProvider);
+	const theme = themeProvider.getTheme();
+	const setTheme = (theme$1) => {
+		themeProvider.setTheme(theme$1.index);
 	};
-	return [fullTheme, applyTheme];
+	return [theme, setTheme];
 };
 
 //#endregion
@@ -1054,282 +308,18 @@ const ui = {
 };
 
 //#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 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
-	});
-};
+//#region ../../src/core/helpers/isComponentType.ts
 function isComponentType(param) {
 	if (isValidElement(param)) return false;
 	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
 }
+
+//#endregion
+//#region ../../src/core/helpers/renderIcon.tsx
 const renderIcon = (icon) => {
 	if (!icon) return null;
 	if (isValidElement(icon)) return icon;
-	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: ui.sizes.icon.md });
+	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: ui$1.sizes.icon.md });
 	return icon;
 };
 
@@ -1386,11 +376,13 @@ const AlephaMantineProvider = (props) => {
 			});
 		}
 	}, []);
+	const defaultColorScheme = props.mantine?.defaultColorScheme ?? theme.defaultColorScheme;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
-		defaultColorScheme: props.mantine?.defaultColorScheme,
+		defaultColorScheme,
 		...props.colorSchemeScript
 	}), /* @__PURE__ */ jsxs(MantineProvider, {
 		...props.mantine,
+		defaultColorScheme,
 		theme: {
 			...theme,
 			...props.mantine?.theme
@@ -1400,7 +392,7 @@ const AlephaMantineProvider = (props) => {
 			/* @__PURE__ */ jsx(NavigationProgress, { ...props.navigationProgress }),
 			/* @__PURE__ */ jsxs(ModalsProvider, {
 				...props.modals,
-				children: [/* @__PURE__ */ jsx(Omnibar_default, { ...props.omnibar }), props.children ?? /* @__PURE__ */ jsx(NestedView, {})]
+				children: [props.omnibar !== false && /* @__PURE__ */ jsx(Omnibar_default, { ...props.omnibar }), props.children ?? /* @__PURE__ */ jsx(NestedView, {})]
 			})
 		]
 	})] });
@@ -1416,6 +408,146 @@ var RootRouter = class {
 	});
 };
 
+//#endregion
+//#region ../../src/core/components/data/ErrorViewer.tsx
+const getSizeConfig$1 = (size = "sm") => {
+	const configs = {
+		xs: {
+			text: "xs",
+			icon: 12,
+			gap: 2
+		},
+		sm: {
+			text: "sm",
+			icon: 14,
+			gap: 4
+		},
+		md: {
+			text: "md",
+			icon: 16,
+			gap: 6
+		},
+		lg: {
+			text: "lg",
+			icon: 18,
+			gap: 8
+		},
+		xl: {
+			text: "xl",
+			icon: 20,
+			gap: 10
+		}
+	};
+	return configs[size] || configs.sm;
+};
+const parseStackTrace = (stack) => {
+	return stack.split("\n").map((line) => line.trim()).filter((line) => line.length > 0);
+};
+const ErrorViewer = ({ error, showStack = true, copyable = true, size = "sm" }) => {
+	const [stackExpanded, setStackExpanded] = useState(false);
+	const sizeConfig = getSizeConfig$1(size);
+	const copyIconSize = sizeConfig.icon + 2;
+	const isError = error instanceof Error;
+	const errorName = isError ? error.name : "Error";
+	const errorMessage = isError ? error.message : String(error);
+	const errorStack = isError ? error.stack : void 0;
+	const stackLines = errorStack ? parseStackTrace(errorStack) : [];
+	const getCopyContent = () => {
+		if (isError) return `${errorName}: ${errorMessage}${errorStack ? `\n\n${errorStack}` : ""}`;
+		return String(error);
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		pos: "relative",
+		w: "100%",
+		children: [copyable && /* @__PURE__ */ jsx(Box, {
+			pos: "absolute",
+			top: 0,
+			right: 0,
+			style: { zIndex: 1 },
+			children: /* @__PURE__ */ jsx(CopyButton, {
+				value: getCopyContent(),
+				children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, {
+					label: copied ? "Copied" : "Copy Error",
+					children: /* @__PURE__ */ jsx(ActionIcon, {
+						color: copied ? "teal" : "gray",
+						variant: "subtle",
+						onClick: copy,
+						size,
+						children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: copyIconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: copyIconSize })
+					})
+				})
+			})
+		}), /* @__PURE__ */ jsxs(Box, {
+			pt: copyable ? 30 : 0,
+			children: [/* @__PURE__ */ jsxs(Box, {
+				style: {
+					display: "flex",
+					alignItems: "flex-start",
+					gap: sizeConfig.gap
+				},
+				children: [/* @__PURE__ */ jsxs(Text$1, {
+					component: "span",
+					c: "red",
+					ff: "monospace",
+					fw: 600,
+					size: sizeConfig.text,
+					children: [errorName, ":"]
+				}), /* @__PURE__ */ jsx(Text$1, {
+					component: "span",
+					ff: "monospace",
+					size: sizeConfig.text,
+					style: { wordBreak: "break-word" },
+					children: errorMessage
+				})]
+			}), showStack && stackLines.length > 1 && /* @__PURE__ */ jsxs(Box, {
+				mt: "sm",
+				children: [/* @__PURE__ */ jsxs(Box, {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: sizeConfig.gap,
+						cursor: "pointer"
+					},
+					onClick: () => setStackExpanded(!stackExpanded),
+					children: [/* @__PURE__ */ jsx(ActionIcon, {
+						size: "xs",
+						variant: "transparent",
+						c: "dimmed",
+						children: stackExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: sizeConfig.icon }) : /* @__PURE__ */ jsx(IconChevronRight, { size: sizeConfig.icon })
+					}), /* @__PURE__ */ jsxs(Text$1, {
+						c: "dimmed",
+						size: sizeConfig.text,
+						fw: 500,
+						children: [
+							"Stack Trace (",
+							stackLines.length - 1,
+							" frames)"
+						]
+					})]
+				}), /* @__PURE__ */ jsx(Collapse, {
+					in: stackExpanded,
+					children: /* @__PURE__ */ jsx(Box, {
+						mt: "xs",
+						pl: "md",
+						style: { borderLeft: "1px solid var(--mantine-color-default-border)" },
+						children: stackLines.slice(1).map((line, index) => /* @__PURE__ */ jsx(Text$1, {
+							ff: "monospace",
+							size: "xs",
+							c: "dimmed",
+							style: {
+								whiteSpace: "pre-wrap",
+								wordBreak: "break-all"
+							},
+							children: line
+						}, index))
+					})
+				})]
+			})]
+		})]
+	});
+};
+var ErrorViewer_default = ErrorViewer;
+
 //#endregion
 //#region ../../src/core/components/data/JsonViewer.tsx
 const getSizeConfig = (size = "sm") => {
@@ -1424,36 +556,41 @@ const getSizeConfig = (size = "sm") => {
 			text: "xs",
 			icon: 12,
 			indent: 16,
-			gap: 2
+			gap: 4,
+			iconWidth: 18
 		},
 		sm: {
 			text: "sm",
 			icon: 14,
 			indent: 20,
-			gap: 4
+			gap: 6,
+			iconWidth: 20
 		},
 		md: {
 			text: "md",
 			icon: 16,
 			indent: 24,
-			gap: 6
+			gap: 8,
+			iconWidth: 22
 		},
 		lg: {
 			text: "lg",
 			icon: 18,
 			indent: 28,
-			gap: 8
+			gap: 10,
+			iconWidth: 24
 		},
 		xl: {
 			text: "xl",
 			icon: 20,
 			indent: 32,
-			gap: 10
+			gap: 12,
+			iconWidth: 26
 		}
 	};
 	return configs[size] || configs.sm;
 };
-const JsonNode = ({ name, value, depth, maxDepth, isLast = false, isArrayItem = false, size = "sm" }) => {
+const JsonNode = ({ name, value, depth, maxDepth, isLast = false, isArrayItem = false, size = "sm", iconWidth }) => {
 	const [expanded, setExpanded] = useState(depth < 2);
 	const sizeConfig = getSizeConfig(size);
 	const getValueType = (val) => {
@@ -1464,13 +601,16 @@ const JsonNode = ({ name, value, depth, maxDepth, isLast = false, isArrayItem =
 	};
 	const valueType = getValueType(value);
 	const renderPrimitive = (val) => {
-		switch (getValueType(val)) {
+		const type = getValueType(val);
+		const textProps = {
+			component: "span",
+			ff: "monospace",
+			size: sizeConfig.text
+		};
+		switch (type) {
 			case "string": return /* @__PURE__ */ jsxs(Text$1, {
-				component: "span",
+				...textProps,
 				c: "teal",
-				ff: "monospace",
-				size: sizeConfig.text,
-				style: { whiteSpace: "nowrap" },
 				children: [
 					"\"",
 					val,
@@ -1478,57 +618,49 @@ const JsonNode = ({ name, value, depth, maxDepth, isLast = false, isArrayItem =
 				]
 			});
 			case "number": return /* @__PURE__ */ jsx(Text$1, {
-				component: "span",
+				...textProps,
 				c: "blue",
-				ff: "monospace",
-				size: sizeConfig.text,
-				style: { whiteSpace: "nowrap" },
 				children: val
 			});
 			case "boolean": return /* @__PURE__ */ jsx(Text$1, {
-				component: "span",
+				...textProps,
 				c: "violet",
-				ff: "monospace",
-				size: sizeConfig.text,
-				style: { whiteSpace: "nowrap" },
 				children: String(val)
 			});
 			case "null": return /* @__PURE__ */ jsx(Text$1, {
-				component: "span",
+				...textProps,
 				c: "dimmed",
-				ff: "monospace",
-				size: sizeConfig.text,
-				style: { whiteSpace: "nowrap" },
 				children: "null"
 			});
 			case "undefined": return /* @__PURE__ */ jsx(Text$1, {
-				component: "span",
+				...textProps,
 				c: "dimmed",
-				ff: "monospace",
-				size: sizeConfig.text,
-				style: { whiteSpace: "nowrap" },
 				children: "undefined"
 			});
 			default: return /* @__PURE__ */ jsx(Text$1, {
-				component: "span",
-				ff: "monospace",
-				size: sizeConfig.text,
-				style: { whiteSpace: "nowrap" },
+				...textProps,
 				children: String(val)
 			});
 		}
 	};
 	const renderKey = () => {
-		if (!name) return null;
-		return /* @__PURE__ */ jsxs(Text$1, {
+		if (name === void 0) return null;
+		return /* @__PURE__ */ jsx(Text$1, {
 			component: "span",
 			c: "cyan",
 			ff: "monospace",
 			fw: 500,
 			size: sizeConfig.text,
-			children: [isArrayItem ? `[${name}]` : `"${name}"`, ":"]
+			children: isArrayItem ? `[${name}]` : `"${name}"`
 		});
 	};
+	const comma = !isLast && /* @__PURE__ */ jsx(Text$1, {
+		component: "span",
+		c: "dimmed",
+		ff: "monospace",
+		size: sizeConfig.text,
+		children: ","
+	});
 	if (valueType === "object" || valueType === "array") {
 		const isObject = valueType === "object";
 		const entries = isObject ? Object.entries(value) : value.map((v, i) => [i, v]);
@@ -1538,77 +670,79 @@ const JsonNode = ({ name, value, depth, maxDepth, isLast = false, isArrayItem =
 		const brackets = isObject ? ["{", "}"] : ["[", "]"];
 		return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Box, {
 			style: {
-				display: "flex",
-				alignItems: "center",
-				gap: sizeConfig.gap,
-				minWidth: "max-content"
+				display: "grid",
+				gridTemplateColumns: `${iconWidth}px auto`,
+				alignItems: "center"
 			},
-			children: [
-				canExpand && /* @__PURE__ */ jsx(ActionIcon, {
+			children: [/* @__PURE__ */ jsx(Box, {
+				style: {
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center"
+				},
+				children: canExpand && /* @__PURE__ */ jsx(ActionIcon, {
 					size: "xs",
 					variant: "transparent",
 					c: "dimmed",
 					onClick: () => setExpanded(!expanded),
-					style: {
-						cursor: "pointer",
-						flexShrink: 0
-					},
+					style: { cursor: "pointer" },
 					children: expanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: sizeConfig.icon }) : /* @__PURE__ */ jsx(IconChevronRight, { size: sizeConfig.icon })
-				}),
-				!canExpand && /* @__PURE__ */ jsx(Box, {
-					w: sizeConfig.icon + 6,
-					style: { flexShrink: 0 }
-				}),
-				/* @__PURE__ */ jsx(Box, {
-					style: { flexShrink: 0 },
-					children: renderKey()
-				}),
-				" ",
-				/* @__PURE__ */ jsx(Text$1, {
-					component: "span",
-					c: "dimmed",
-					ff: "monospace",
-					size: sizeConfig.text,
-					style: { flexShrink: 0 },
-					children: brackets[0]
-				}),
-				!expanded && !isEmpty && /* @__PURE__ */ jsx(Text$1, {
-					component: "span",
-					c: "dimmed",
-					ff: "monospace",
-					fs: "italic",
-					size: sizeConfig.text,
-					style: { flexShrink: 0 },
-					children: preview
-				}),
-				(isEmpty || !expanded) && /* @__PURE__ */ jsx(Text$1, {
-					component: "span",
-					c: "dimmed",
-					ff: "monospace",
-					size: sizeConfig.text,
-					style: { flexShrink: 0 },
-					children: brackets[1]
-				}),
-				!isEmpty && !expanded && /* @__PURE__ */ jsxs(Text$1, {
-					component: "span",
-					c: "dimmed",
-					size: sizeConfig.text,
-					style: { flexShrink: 0 },
-					children: [
-						entries.length,
-						" ",
-						entries.length === 1 ? "item" : "items"
-					]
 				})
-			]
+			}), /* @__PURE__ */ jsxs(Box, {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: sizeConfig.gap
+				},
+				children: [
+					renderKey(),
+					name !== void 0 && /* @__PURE__ */ jsx(Text$1, {
+						component: "span",
+						c: "dimmed",
+						ff: "monospace",
+						size: sizeConfig.text,
+						children: ":"
+					}),
+					/* @__PURE__ */ jsx(Text$1, {
+						component: "span",
+						c: "dimmed",
+						ff: "monospace",
+						size: sizeConfig.text,
+						children: brackets[0]
+					}),
+					!expanded && !isEmpty && /* @__PURE__ */ jsx(Text$1, {
+						component: "span",
+						c: "dimmed",
+						ff: "monospace",
+						fs: "italic",
+						size: sizeConfig.text,
+						children: preview
+					}),
+					(isEmpty || !expanded) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text$1, {
+						component: "span",
+						c: "dimmed",
+						ff: "monospace",
+						size: sizeConfig.text,
+						children: brackets[1]
+					}), comma] }),
+					!isEmpty && !expanded && /* @__PURE__ */ jsxs(Text$1, {
+						component: "span",
+						c: "dimmed",
+						size: sizeConfig.text,
+						children: [
+							entries.length,
+							" ",
+							entries.length === 1 ? "item" : "items"
+						]
+					})
+				]
+			})]
 		}), /* @__PURE__ */ jsxs(Collapse, {
 			in: expanded && canExpand,
 			children: [/* @__PURE__ */ jsx(Box, {
 				pl: sizeConfig.indent,
-				style: {
-					borderLeft: "1px solid var(--mantine-color-default-border)",
-					marginLeft: Math.floor((sizeConfig.icon + 6) / 2)
-				},
+				ml: iconWidth / 2,
+				style: { borderLeft: "1px solid var(--mantine-color-default-border)" },
 				children: entries.map(([key, val], index) => /* @__PURE__ */ jsx(JsonNode, {
 					name: String(key),
 					value: val,
@@ -1616,59 +750,59 @@ const JsonNode = ({ name, value, depth, maxDepth, isLast = false, isArrayItem =
 					maxDepth,
 					isLast: index === entries.length - 1,
 					isArrayItem: !isObject,
-					size
+					size,
+					iconWidth
 				}, String(key)))
 			}), /* @__PURE__ */ jsxs(Box, {
 				style: {
-					display: "flex",
-					minWidth: "max-content"
+					display: "grid",
+					gridTemplateColumns: `${iconWidth}px auto`
 				},
-				children: [/* @__PURE__ */ jsx(Box, {
-					w: sizeConfig.icon + 6,
-					style: { flexShrink: 0 }
-				}), /* @__PURE__ */ jsx(Text$1, {
-					c: "dimmed",
-					ff: "monospace",
-					size: sizeConfig.text,
-					style: { flexShrink: 0 },
-					children: brackets[1]
+				children: [/* @__PURE__ */ jsx(Box, {}), /* @__PURE__ */ jsxs(Box, {
+					style: {
+						display: "flex",
+						gap: sizeConfig.gap
+					},
+					children: [/* @__PURE__ */ jsx(Text$1, {
+						c: "dimmed",
+						ff: "monospace",
+						size: sizeConfig.text,
+						children: brackets[1]
+					}), comma]
 				})]
 			})]
 		})] });
 	}
 	return /* @__PURE__ */ jsxs(Box, {
 		style: {
-			display: "flex",
-			alignItems: "center",
-			gap: sizeConfig.gap,
-			minWidth: "max-content"
+			display: "grid",
+			gridTemplateColumns: `${iconWidth}px auto`,
+			alignItems: "center"
 		},
-		children: [
-			/* @__PURE__ */ jsx(Box, {
-				w: sizeConfig.icon + 6,
-				style: { flexShrink: 0 }
-			}),
-			/* @__PURE__ */ jsx(Box, {
-				style: { flexShrink: 0 },
-				children: renderKey()
-			}),
-			/* @__PURE__ */ jsx(Box, {
-				style: { flexShrink: 0 },
-				children: renderPrimitive(value)
-			}),
-			!isLast && /* @__PURE__ */ jsx(Text$1, {
-				component: "span",
-				c: "dimmed",
-				ff: "monospace",
-				size: sizeConfig.text,
-				style: { flexShrink: 0 },
-				children: ","
-			})
-		]
+		children: [/* @__PURE__ */ jsx(Box, {}), /* @__PURE__ */ jsxs(Box, {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: sizeConfig.gap
+			},
+			children: [
+				renderKey(),
+				name !== void 0 && /* @__PURE__ */ jsx(Text$1, {
+					component: "span",
+					c: "dimmed",
+					ff: "monospace",
+					size: sizeConfig.text,
+					children: ":"
+				}),
+				renderPrimitive(value),
+				comma
+			]
+		})]
 	});
 };
 const JsonViewer = ({ data, defaultExpanded = true, maxDepth = 10, copyable = true, size = "sm" }) => {
-	const copyIconSize = getSizeConfig(size).icon + 2;
+	const sizeConfig = getSizeConfig(size);
+	const copyIconSize = sizeConfig.icon + 2;
 	return /* @__PURE__ */ jsxs(Box, {
 		pos: "relative",
 		w: "100%",
@@ -1697,7 +831,8 @@ const JsonViewer = ({ data, defaultExpanded = true, maxDepth = 10, copyable = tr
 				value: data,
 				depth: 0,
 				maxDepth,
-				size
+				size,
+				iconWidth: sizeConfig.iconWidth
 			})
 		})]
 	});
@@ -1894,20 +1029,333 @@ var DialogService = class {
 			})
 		});
 	}
-	/**
-	* 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) {}
+	/**
+	* Show an error viewer dialog
+	*/
+	error(error, options) {
+		this.open({
+			size: "lg",
+			title: options?.title || "Error",
+			...options,
+			content: /* @__PURE__ */ jsx(Flex$1, {
+				bdrs: "md",
+				w: "100%",
+				flex: 1,
+				p: "sm",
+				bg: ui.colors.surface,
+				children: /* @__PURE__ */ jsx(ErrorViewer_default, {
+					size: "xs",
+					error,
+					showStack: options?.showStack ?? true
+				})
+			})
+		});
+	}
+	/**
+	* 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 theme = useMantineTheme();
+	const props = { ..._props };
+	const { tooltip, menu, icon, ...restProps } = props;
+	if (props.variant === "subtle") {
+		restProps.c ??= "var(--mantine-color-text)";
+		restProps.color ??= "gray";
+	}
+	if (props.intent) {
+		if (props.intent === "none") {
+			restProps.c ??= "var(--mantine-color-text)";
+			restProps.color ??= "gray";
+		} else if (props.intent === "primary") {
+			restProps.c ??= "white";
+			restProps.color ??= theme.primaryColor;
+		} else if (props.intent === "success") {
+			restProps.c ??= "white";
+			restProps.color ??= "green";
+		} else if (props.intent === "danger") {
+			restProps.c ??= "white";
+			restProps.color ??= "red";
+		} else if (props.intent === "warning") {
+			restProps.c ??= "var(--mantine-color-text)";
+			restProps.color ??= "yellow";
+		} else if (props.intent === "info") {
+			restProps.c ??= "white";
+			restProps.color ??= "blue";
+		}
+	}
+	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" || typeof tooltip === "number" ? {
+			...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
+	});
 };
 
 //#endregion
@@ -1988,7 +1436,6 @@ const DarkModeButton = (props) => {
 		size: props.size ?? "sm",
 		"aria-label": "Toggle color scheme",
 		px: "xs",
-		c: colorScheme !== "default" ? void 0 : "transparent",
 		fullWidth: props.fullWidth ?? false,
 		icon: colorScheme === "dark" ? IconSun : colorScheme === "light" ? IconMoon : IconSun,
 		...props.actionProps
@@ -2051,14 +1498,14 @@ var OmnibarButton_default = OmnibarButton;
 //#region ../../src/core/components/buttons/ThemeButton.tsx
 const ThemeButton = (props) => {
 	const [theme, setTheme] = useTheme();
-	const themes = useInject(ThemeProvider).themes;
+	const themeList = useStore(alephaThemeListAtom)[0];
 	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
+		menu: { items: themeList.map((it, index) => ({
+			label: it.name,
+			onClick: () => setTheme({ index }),
+			active: theme.name === it.name
 		})) },
 		...props.actionProps
 	});
@@ -2168,6 +1615,256 @@ const parseInput = (props, form) => {
 	};
 };
 
+//#endregion
+//#region ../../src/core/components/form/ControlArray.tsx
+/**
+* ControlArray component for editing arrays of schema items.
+*
+* Features:
+* - Dynamic add/remove of items
+* - Supports arrays of objects with nested fields
+* - Supports arrays of primitives
+* - Grid layout for object items
+* - Min/max constraints
+*
+* @example
+* ```tsx
+* // For a schema like:
+* // t.object({
+* //   contacts: t.array(t.object({
+* //     name: t.text(),
+* //     email: t.text({ format: "email" }),
+* //   }))
+* // })
+*
+* <ControlArray
+*   input={form.input.contacts}
+*   columns={2}
+*   addLabel="Add contact"
+*   controlProps={{
+*     email: { text: { placeholder: "email@example.com" } }
+*   }}
+* />
+* ```
+*/
+const ControlArray = (props) => {
+	const { inputProps } = parseInput(props, {});
+	const idCounter = useRef(0);
+	const [items, setItems] = useState(() => {
+		const defaultValue = props.input?.props?.defaultValue;
+		if (Array.isArray(defaultValue)) return defaultValue.map((value) => ({
+			key: idCounter.current++,
+			value
+		}));
+		return [];
+	});
+	useEvents({ "form:reset": (event) => {
+		if (event.id === props.input?.form?.id) {
+			const defaultValue = props.input?.props?.defaultValue;
+			if (Array.isArray(defaultValue)) {
+				idCounter.current = 0;
+				setItems(defaultValue.map((value) => ({
+					key: idCounter.current++,
+					value
+				})));
+			} else setItems([]);
+		}
+	} }, [props.input]);
+	if (!props.input?.props) return null;
+	const schema = props.input.schema;
+	if (!schema || !("items" in schema)) return null;
+	const itemSchema = schema.items;
+	const isObjectItem = itemSchema && "properties" in itemSchema;
+	const { min = 0, max = Number.POSITIVE_INFINITY, columns = 1 } = props;
+	const updateFormValue = (newItems) => {
+		props.input.set(newItems.map((item) => item.value));
+	};
+	const handleAdd = () => {
+		if (items.length >= max) return;
+		let newValue;
+		if (isObjectItem) {
+			newValue = {};
+			const objSchema = itemSchema;
+			for (const [key, propSchema] of Object.entries(objSchema.properties)) if ("default" in propSchema) newValue[key] = propSchema.default;
+		} else newValue = "";
+		const newItems = [...items, {
+			key: idCounter.current++,
+			value: newValue
+		}];
+		setItems(newItems);
+		updateFormValue(newItems);
+	};
+	const handleRemove = (index) => {
+		if (items.length <= min) return;
+		const newItems = items.filter((_, i) => i !== index);
+		setItems(newItems);
+		updateFormValue(newItems);
+	};
+	const handleItemChange = (index, value) => {
+		const newItems = [...items];
+		newItems[index] = {
+			...newItems[index],
+			value
+		};
+		setItems(newItems);
+		updateFormValue(newItems);
+	};
+	const handleFieldChange = (index, field, value) => {
+		const newItems = [...items];
+		newItems[index] = {
+			...newItems[index],
+			value: {
+				...newItems[index].value,
+				[field]: value
+			}
+		};
+		setItems(newItems);
+		updateFormValue(newItems);
+	};
+	const colSpan = 12 / columns;
+	const fieldNames = isObjectItem ? Object.keys(itemSchema.properties) : [];
+	const renderItems = () => /* @__PURE__ */ jsxs(Stack, {
+		gap: "sm",
+		children: [items.map((item, index) => /* @__PURE__ */ jsxs(Flex$1, {
+			gap: "sm",
+			align: "flex-start",
+			p: "xs",
+			bg: ui.colors.surface,
+			style: { borderRadius: "var(--mantine-radius-sm)" },
+			children: [
+				props.sortable && /* @__PURE__ */ jsx(ActionIcon, {
+					variant: "subtle",
+					color: "gray",
+					style: { cursor: "grab" },
+					children: /* @__PURE__ */ jsx(IconGripVertical, { size: 16 })
+				}),
+				isObjectItem ? /* @__PURE__ */ jsx(Grid, {
+					style: { flex: 1 },
+					gutter: "sm",
+					children: fieldNames.map((fieldName) => {
+						const fieldSchema = itemSchema.properties[fieldName];
+						const fieldControlProps = props.controlProps?.[fieldName] ?? {};
+						const virtualInput = {
+							schema: fieldSchema,
+							props: {
+								id: `${props.input.props.id}-${item.key}-${fieldName}`,
+								name: `${props.input.props.name}[${index}].${fieldName}`,
+								defaultValue: item.value?.[fieldName]
+							},
+							path: `${props.input.path}/${index}/${fieldName}`,
+							required: itemSchema.required?.includes(fieldName) ?? false,
+							form: props.input.form,
+							set: (value) => handleFieldChange(index, fieldName, value)
+						};
+						return /* @__PURE__ */ jsx(Grid.Col, {
+							span: colSpan,
+							children: /* @__PURE__ */ jsx(Control_default, {
+								input: virtualInput,
+								...fieldControlProps
+							})
+						}, fieldName);
+					})
+				}) : /* @__PURE__ */ jsx(Flex$1, {
+					style: { flex: 1 },
+					children: /* @__PURE__ */ jsx(Control_default, {
+						input: {
+							schema: itemSchema,
+							props: {
+								id: `${props.input.props.id}-${item.key}`,
+								name: `${props.input.props.name}[${index}]`,
+								defaultValue: item.value
+							},
+							path: `${props.input.path}/${index}`,
+							required: false,
+							form: props.input.form,
+							set: (value) => handleItemChange(index, value)
+						},
+						...props.itemControlProps
+					})
+				}),
+				/* @__PURE__ */ jsx(ActionIcon, {
+					variant: "subtle",
+					color: "red",
+					onClick: () => handleRemove(index),
+					disabled: items.length <= min,
+					children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+				})
+			]
+		}, item.key)), /* @__PURE__ */ jsxs(UnstyledButton, {
+			onClick: handleAdd,
+			disabled: items.length >= max,
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				gap: 6,
+				padding: "8px 12px",
+				borderRadius: "var(--mantine-radius-sm)",
+				border: "1px dashed var(--mantine-color-dimmed)",
+				color: "var(--mantine-color-dimmed)",
+				fontSize: "var(--mantine-font-size-sm)",
+				cursor: items.length >= max ? "not-allowed" : "pointer",
+				opacity: items.length >= max ? .5 : 1,
+				transition: "all 150ms ease"
+			},
+			onMouseEnter: (e) => {
+				if (items.length < max) {
+					e.currentTarget.style.borderColor = "var(--mantine-color-blue-filled)";
+					e.currentTarget.style.color = "var(--mantine-color-blue-filled)";
+					e.currentTarget.style.background = "var(--mantine-color-blue-light)";
+				}
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.borderColor = "var(--mantine-color-dimmed)";
+				e.currentTarget.style.color = "var(--mantine-color-dimmed)";
+				e.currentTarget.style.background = "transparent";
+			},
+			children: [/* @__PURE__ */ jsx(IconPlus, { size: 14 }), props.addLabel ?? "Add"]
+		})]
+	});
+	if (props.variant === "plain") return /* @__PURE__ */ jsxs(Stack, {
+		gap: "xs",
+		children: [
+			inputProps.label && /* @__PURE__ */ jsx(Text$1, {
+				size: "sm",
+				fw: 500,
+				children: inputProps.label
+			}),
+			inputProps.description && /* @__PURE__ */ jsx(Text$1, {
+				size: "sm",
+				c: "dimmed",
+				children: inputProps.description
+			}),
+			renderItems(),
+			inputProps.error && /* @__PURE__ */ jsx(Text$1, {
+				size: "sm",
+				c: "red",
+				children: inputProps.error
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Fieldset, {
+		legend: inputProps.label,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [
+				inputProps.description && /* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					c: "dimmed",
+					children: inputProps.description
+				}),
+				renderItems(),
+				inputProps.error && /* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					c: "red",
+					children: inputProps.error
+				})
+			]
+		})
+	});
+};
+var ControlArray_default = ControlArray;
+
 //#endregion
 //#region ../../src/core/components/form/ControlDate.tsx
 /**
@@ -2261,22 +1958,99 @@ const ControlNumber = (props) => {
 			})
 		})
 	});
-	return /* @__PURE__ */ jsx(NumberInput, {
-		...inputProps,
-		ref,
-		id,
-		leftSection: icon,
-		...inputPropsWithoutType,
-		...props.numberInputProps,
-		value: value ?? "",
-		onChange: (val) => {
-			const newValue = val !== null ? Number(val) : void 0;
-			setValue(newValue);
-			props.input.set(newValue);
-		}
-	});
+	return /* @__PURE__ */ jsx(NumberInput, {
+		...inputProps,
+		ref,
+		id,
+		leftSection: icon,
+		...inputPropsWithoutType,
+		...props.numberInputProps,
+		value: value ?? "",
+		onChange: (val) => {
+			const newValue = val !== null ? Number(val) : void 0;
+			setValue(newValue);
+			props.input.set(newValue);
+		}
+	});
+};
+var ControlNumber_default = ControlNumber;
+
+//#endregion
+//#region ../../src/core/components/form/ControlObject.tsx
+/**
+* ControlObject component for editing nested object schemas.
+*
+* Features:
+* - Renders all properties of an object schema
+* - Supports grid layout with configurable columns
+* - Per-field customization via controlProps
+* - Recursive support for deeply nested objects
+*
+* The form system provides nested InputFields under the `.items` property.
+* For example: form.input.address.items.street
+*
+* @example
+* ```tsx
+* // For a schema like:
+* // t.object({
+* //   address: t.object({
+* //     street: t.text(),
+* //     city: t.text(),
+* //     zip: t.text(),
+* //   })
+* // })
+*
+* <ControlObject
+*   input={form.input.address}
+*   columns={2}
+*   controlProps={{
+*     zip: { text: { maxLength: 10 } }
+*   }}
+* />
+* ```
+*/
+const ControlObject = (props) => {
+	const { inputProps } = parseInput(props, {});
+	if (!props.input?.props) return null;
+	const schema = props.input.schema;
+	if (!schema?.properties) return null;
+	const fieldNames = Object.keys(schema.properties);
+	const colSpan = 12 / (props.columns ?? 1);
+	const nestedItems = props.input.items;
+	const renderFields = () => /* @__PURE__ */ jsx(Grid, { children: fieldNames.map((fieldName) => {
+		const fieldControlProps = props.controlProps?.[fieldName] ?? {};
+		const field = nestedItems?.[fieldName];
+		if (!field) return null;
+		return /* @__PURE__ */ jsx(Grid.Col, {
+			span: colSpan,
+			children: /* @__PURE__ */ jsx(Control_default, {
+				input: field,
+				...fieldControlProps
+			})
+		}, fieldName);
+	}) });
+	if (props.variant === "plain") return renderFields();
+	return /* @__PURE__ */ jsx(Fieldset, {
+		legend: inputProps.label,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [
+				inputProps.description && /* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					c: "dimmed",
+					children: inputProps.description
+				}),
+				renderFields(),
+				inputProps.error && /* @__PURE__ */ jsx(Text$1, {
+					size: "sm",
+					c: "red",
+					children: inputProps.error
+				})
+			]
+		})
+	});
 };
-var ControlNumber_default = ControlNumber;
+var ControlObject_default = ControlObject;
 
 //#endregion
 //#region ../../src/core/utils/extractSchemaFields.ts
@@ -2763,13 +2537,16 @@ var ControlSelect_default = ControlSelect;
 * - DateTimePicker (for date-time format)
 * - TimeInput (for time format)
 * - QueryBuilder (for building type-safe queries with autocomplete)
+* - ControlObject (for nested object schemas)
+* - ControlArray (for arrays of objects)
 * - Custom component
 *
 * Automatically handles labels, descriptions, error messages, required state, and default icons.
 */
 const Control = (_props) => {
-	const { inputProps, id, icon, format, schema } = parseInput(_props, useFormState(_props.input, ["error"]));
+	const form = useFormState(_props.input, ["error"]);
 	if (!_props.input?.props) return null;
+	const { inputProps, id, icon, format, schema } = parseInput(_props, form);
 	const props = {
 		..._props,
 		...schema.$control
@@ -2799,6 +2576,27 @@ const Control = (_props) => {
 			})
 		});
 	}
+	const isObject = props.input.schema && "type" in props.input.schema && props.input.schema.type === "object" && "properties" in props.input.schema;
+	if (props.object || isObject) {
+		const controlObjectProps = typeof props.object === "object" ? props.object : {};
+		return /* @__PURE__ */ jsx(ControlObject_default, {
+			input: props.input,
+			title: props.title,
+			description: props.description,
+			...controlObjectProps
+		});
+	}
+	const isArray = props.input.schema && "type" in props.input.schema && props.input.schema.type === "array";
+	const isArrayOfObjects = isArray && "items" in props.input.schema && props.input.schema.items && typeof props.input.schema.items === "object" && "properties" in props.input.schema.items;
+	if (props.array || isArrayOfObjects) {
+		const controlArrayProps = typeof props.array === "object" ? props.array : {};
+		return /* @__PURE__ */ jsx(ControlArray_default, {
+			input: props.input,
+			title: props.title,
+			description: props.description,
+			...controlArrayProps
+		});
+	}
 	if (props.number || props.input.schema && "type" in props.input.schema && (props.input.schema.type === "number" || props.input.schema.type === "integer")) {
 		const controlNumberProps = typeof props.number === "object" ? props.number : {};
 		return /* @__PURE__ */ jsx(ControlNumber_default, {
@@ -2831,9 +2629,7 @@ const Control = (_props) => {
 			...colorInputProps
 		});
 	}
-	const isEnum = props.input.schema && "enum" in props.input.schema && props.input.schema.enum;
-	const isArray = props.input.schema && "type" in props.input.schema && props.input.schema.type === "array";
-	if (isEnum || isArray || props.select) {
+	if (props.input.schema && "enum" in props.input.schema && props.input.schema.enum || isArray && !isArrayOfObjects || props.select) {
 		const opts = typeof props.select === "object" ? props.select : {};
 		return /* @__PURE__ */ jsx(ControlSelect_default, {
 			input: props.input,
@@ -2843,15 +2639,41 @@ const Control = (_props) => {
 			...opts
 		});
 	}
-	if (props.input.schema && "type" in props.input.schema && props.input.schema.type === "boolean" || props.switch) {
-		const switchProps = typeof props.switch === "object" ? props.switch : {};
-		return /* @__PURE__ */ jsx(Switch, {
-			...inputProps,
-			id,
-			color: "blue",
-			defaultChecked: props.input.props.defaultValue,
-			...props.input.props,
-			...switchProps
+	if (props.input.schema && "type" in props.input.schema && props.input.schema.type === "boolean") {
+		if (props.switch) {
+			const switchProps = typeof props.switch === "object" ? props.switch : {};
+			return /* @__PURE__ */ jsx(Switch, {
+				...inputProps,
+				id,
+				color: "blue",
+				defaultChecked: props.input.props.defaultValue,
+				...props.input.props,
+				...switchProps
+			});
+		}
+		const selectProps = {
+			loader: async () => [
+				{
+					value: "true",
+					label: "Yes"
+				},
+				{
+					value: "false",
+					label: "No"
+				},
+				{
+					value: "",
+					label: ""
+				}
+			],
+			...props.input.props
+		};
+		return /* @__PURE__ */ jsx(ControlSelect_default, {
+			input: props.input,
+			title: props.title,
+			description: props.description,
+			icon,
+			...selectProps
 		});
 	}
 	if (props.password || props.input.props.name?.includes("password")) {
@@ -2917,6 +2739,13 @@ var Control_default = Control;
 * TypeForm component that automatically renders all form inputs based on schema.
 * Uses the Control component to render individual fields and Mantine Grid for responsive layout.
 *
+* Supports all field types including:
+* - Primitive types (string, number, boolean, etc.)
+* - Enum types (rendered as Select)
+* - Arrays of primitives (rendered as MultiSelect/TagsInput)
+* - Arrays of objects (rendered as ControlArray)
+* - Nested objects (rendered as ControlObject)
+*
 * @example
 * ```tsx
 * import { t } from "alepha";
@@ -2929,6 +2758,15 @@ var Control_default = Control;
 *     email: t.text(),
 *     age: t.integer(),
 *     subscribe: t.boolean(),
+*     address: t.object({
+*       street: t.text(),
+*       city: t.text(),
+*     }),
+*     tags: t.array(t.text()),
+*     contacts: t.array(t.object({
+*       name: t.text(),
+*       email: t.text(),
+*     })),
 *   }),
 *   handler: (values) => {
 *     console.log(values);
@@ -2939,19 +2777,10 @@ var Control_default = Control;
 * ```
 */
 const TypeForm = (props) => {
-	const { form, columns = 3, children, controlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps } = props;
+	const { form, columns = 3, children, controlProps, fieldControlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps } = props;
 	const schema = props.schema || form.options.schema;
 	if (!schema?.properties) return null;
-	const supportedFields = Object.keys(schema.properties).filter((fieldName) => {
-		const field = form.input[fieldName];
-		if (!field || typeof field !== "object" || !("schema" in field)) return false;
-		const schema$1 = field.schema;
-		if ("type" in schema$1) {
-			if (schema$1.type === "object") return false;
-		}
-		if ("properties" in schema$1 && schema$1.properties) return false;
-		return true;
-	});
+	const supportedFields = Object.keys(schema.properties);
 	const colSpan = typeof columns === "number" ? {
 		xs: 12,
 		sm: 6,
@@ -2968,12 +2797,20 @@ const TypeForm = (props) => {
 		if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(form.input) });
 		return /* @__PURE__ */ jsx(Grid, { children: supportedFields.map((fieldName) => {
 			const field = form.input[fieldName];
-			if (!field || typeof field !== "object" || !("schema" in field)) return null;
+			const fieldSchema = schema.properties[fieldName];
+			if (!field || !fieldSchema) return null;
+			const isObject = fieldSchema && "type" in fieldSchema && fieldSchema.type === "object";
+			const isArrayOfObjects = fieldSchema && "type" in fieldSchema && fieldSchema.type === "array" && "items" in fieldSchema && fieldSchema.items && "properties" in fieldSchema.items;
+			const span = isObject || isArrayOfObjects ? 12 : colSpan;
+			const mergedControlProps = {
+				...controlProps,
+				...fieldControlProps?.[fieldName]
+			};
 			return /* @__PURE__ */ jsx(Grid.Col, {
-				span: colSpan,
+				span,
 				children: /* @__PURE__ */ jsx(Control_default, {
 					input: field,
-					...controlProps
+					...mergedControlProps
 				})
 			}, fieldName);
 		}) });
@@ -2981,21 +2818,45 @@ const TypeForm = (props) => {
 	const content = /* @__PURE__ */ jsxs(Flex$1, {
 		direction: "column",
 		gap: "sm",
-		children: [renderFields(), !skipSubmitButton && /* @__PURE__ */ jsxs(Flex$1, {
+		flex: props.fill ? 1 : void 0,
+		...props.flexProps,
+		children: [/* @__PURE__ */ jsx(Flex$1, {
+			direction: "column",
 			gap: "sm",
-			children: [/* @__PURE__ */ jsx(ActionButton_default, {
-				form,
-				...submitButtonProps,
-				children: submitButtonProps?.children ?? "Submit"
-			}), /* @__PURE__ */ jsx(ActionButton_default, {
-				type: "reset",
-				children: "Reset"
-			})]
+			flex: 1,
+			children: renderFields()
+		}), !skipSubmitButton && /* @__PURE__ */ jsx(Card, {
+			w: "100%",
+			withBorder: true,
+			children: /* @__PURE__ */ jsxs(Flex$1, {
+				gap: "sm",
+				flex: 1,
+				children: [
+					/* @__PURE__ */ jsx(Flex$1, {}),
+					/* @__PURE__ */ jsx(Flex$1, { flex: 1 }),
+					/* @__PURE__ */ jsxs(Flex$1, {
+						gap: "sm",
+						children: [/* @__PURE__ */ jsx(ActionButton_default, {
+							variant: "subtle",
+							type: "reset",
+							children: "Reset"
+						}), /* @__PURE__ */ jsx(ActionButton_default, {
+							intent: "primary",
+							form,
+							...submitButtonProps,
+							children: submitButtonProps?.children ?? "Submit"
+						})]
+					})
+				]
+			})
 		})]
 	});
 	if (skipFormElement) return content;
-	return /* @__PURE__ */ jsx("form", {
+	return /* @__PURE__ */ jsx(Flex$1, {
+		component: "form",
+		flex: props.fill ? 1 : void 0,
 		...form.props,
+		...props.flexProps,
 		children: content
 	});
 };
@@ -3055,6 +2916,23 @@ const AppBar = (props) => {
 };
 var AppBar_default = AppBar;
 
+//#endregion
+//#region ../../src/core/components/buttons/ToggleSidebarButton.tsx
+const ToggleSidebarButton = () => {
+	const [collapsed, setCollapsed] = useStore("alepha.ui.sidebar.collapsed");
+	return /* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(ActionButton_default, {
+		icon: collapsed ? /* @__PURE__ */ jsx(IconLayoutSidebarRightCollapse, {}) : /* @__PURE__ */ jsx(IconLayoutSidebarLeftCollapse, {}),
+		variant: "subtle",
+		size: "md",
+		onClick: () => setCollapsed(!collapsed),
+		tooltip: {
+			position: "right",
+			label: collapsed ? "Show sidebar" : "Hide sidebar"
+		}
+	}) });
+};
+var ToggleSidebarButton_default = ToggleSidebarButton;
+
 //#endregion
 //#region ../../src/core/components/layout/Sidebar.tsx
 const Sidebar = (props) => {
@@ -3070,6 +2948,7 @@ const Sidebar = (props) => {
 				mx: "sm"
 			}, key);
 			if (item.type === "search") return /* @__PURE__ */ jsx(OmnibarButton_default, { collapsed: props.collapsed }, key);
+			if (item.type === "toggle") return /* @__PURE__ */ jsx(ToggleSidebarButton_default, {}, key);
 			if (item.type === "section") {
 				if (props.collapsed) return;
 				return /* @__PURE__ */ jsxs(Flex$1, {
@@ -3102,14 +2981,25 @@ const Sidebar = (props) => {
 			theme: props.theme ?? {}
 		}, key);
 	};
+	const getSidebarNodes = () => {
+		if (props.menu) return props.menu;
+		if (props.autoPopulateMenu) {
+			const items = router.concretePages.map((page) => ({
+				label: page.label ?? page.name,
+				description: page.description?.slice(0, 32),
+				icon: renderIcon(page.icon),
+				href: router.path(page.name)
+			}));
+			if (typeof props.autoPopulateMenu === "object" && props.autoPopulateMenu.startsWith) {
+				const startsWith = props.autoPopulateMenu.startsWith;
+				return items.filter((item) => item.href?.startsWith(startsWith));
+			}
+		}
+		return [];
+	};
 	const padding = "md";
-	const gap = props.gap;
-	const menu = props.menu ?? router.concretePages.map((page) => ({
-		label: page.label ?? page.name,
-		description: page.description,
-		icon: renderIcon(page.icon),
-		href: router.path(page.name)
-	}));
+	const gap = props.menu ? props.gap : "xs";
+	const menu = useMemo(() => getSidebarNodes(), []);
 	return /* @__PURE__ */ jsxs(Flex$1, {
 		flex: 1,
 		py: padding,
@@ -3177,6 +3067,8 @@ const SidebarItem = (props) => {
 			href: props.item.href,
 			target: props.item.target,
 			size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
+			c: "var(--mantine-color-text)",
+			color: "gray",
 			variant: "subtle",
 			variantActive: "default",
 			radius: props.item.theme?.radius ?? props.theme.button?.radius ?? "md",
@@ -3290,11 +3182,15 @@ const AdminShell = (props) => {
 		type: "burger"
 	}];
 	const hasSidebar = showSidebar && props.sidebarProps !== void 0;
+	const hasAppBar = hasSidebar || props.appBarProps || props.header;
+	const headerHeight = hasAppBar ? 60 : 0;
+	const footerHeight = props.footer ? 24 : 0;
+	const sidebarWidth = hasSidebar ? collapsed ? 78 : 300 : 0;
 	return /* @__PURE__ */ jsxs(AppShell, {
 		w: "100%",
 		flex: 1,
 		padding: "md",
-		header: hasSidebar || props.appBarProps || props.header ? { height: 60 } : void 0,
+		header: hasAppBar ? { height: 60 } : void 0,
 		navbar: hasSidebar ? {
 			width: collapsed ? { base: 78 } : { base: 300 },
 			breakpoint: "sm",
@@ -3320,8 +3216,13 @@ const AdminShell = (props) => {
 				})
 			}),
 			/* @__PURE__ */ jsx(AppShell.Main, {
+				pl: sidebarWidth,
+				pt: headerHeight,
+				pb: footerHeight,
+				pr: 0,
 				display: "flex",
 				flex: 1,
+				style: { flexDirection: "column" },
 				...props.appShellMainProps,
 				children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
 			}),
@@ -3335,8 +3236,377 @@ const AdminShell = (props) => {
 };
 var AdminShell_default = AdminShell;
 
+//#endregion
+//#region ../../src/core/components/table/DataTableFilters.tsx
+const DataTableFilters = ({ schema, form, typeFormProps, filterVisibility }) => {
+	const visibleSchema = useMemo(() => {
+		const visibleKeys = Object.keys(schema.properties).filter((key) => filterVisibility[key] !== false);
+		if (visibleKeys.length === 0) return null;
+		const visibleProps = visibleKeys.reduce((acc, key) => {
+			acc[key] = schema.properties[key];
+			return acc;
+		}, {});
+		return t.object(visibleProps);
+	}, [schema, filterVisibility]);
+	if (!visibleSchema) return null;
+	return /* @__PURE__ */ jsx(Flex$1, {
+		w: "100%",
+		p: "xs",
+		bg: ui.colors.surface,
+		style: { borderBottom: "1px solid var(--alepha-border)" },
+		children: /* @__PURE__ */ jsx(TypeForm_default, {
+			...typeFormProps,
+			skipSubmitButton: true,
+			fill: true,
+			form,
+			schema: visibleSchema
+		})
+	});
+};
+var DataTableFilters_default = DataTableFilters;
+
+//#endregion
+//#region ../../src/core/components/table/DataTablePagination.tsx
+const DataTablePagination = ({ page, size, totalPages, onPageChange, onSizeChange }) => {
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		align: "center",
+		justify: "end",
+		gap: "md",
+		p: "xs",
+		style: { borderTop: "1px solid var(--alepha-border)" },
+		children: [/* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(Select, {
+			w: 96,
+			variant: "default",
+			value: size,
+			onChange: (value) => {
+				if (value) onSizeChange(Number(value));
+			},
+			data: [
+				{
+					value: "5",
+					label: "5"
+				},
+				{
+					value: "10",
+					label: "10"
+				},
+				{
+					value: "25",
+					label: "25"
+				},
+				{
+					value: "50",
+					label: "50"
+				},
+				{
+					value: "100",
+					label: "100"
+				}
+			]
+		}) }), /* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(Pagination, {
+			withEdges: true,
+			total: totalPages,
+			value: page,
+			onChange: onPageChange
+		}) })]
+	});
+};
+var DataTablePagination_default = DataTablePagination;
+
+//#endregion
+//#region ../../src/core/components/table/ColumnPicker.tsx
+const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
+	const [opened, setOpened] = useState(false);
+	const columnEntries = Object.entries(columns);
+	const handleShowAll = () => {
+		onVisibilityChange(columnEntries.reduce((acc, [key]) => ({
+			...acc,
+			[key]: true
+		}), {}));
+	};
+	const handleHideAll = () => {
+		onVisibilityChange(columnEntries.reduce((acc, [key]) => ({
+			...acc,
+			[key]: false
+		}), {}));
+	};
+	const handleToggle = (key, checked) => {
+		onVisibilityChange({
+			...visibility,
+			[key]: checked
+		});
+	};
+	const visibleCount = columnEntries.filter(([key]) => visibility[key] !== false).length;
+	return /* @__PURE__ */ jsxs(Popover, {
+		width: 280,
+		position: "bottom-start",
+		shadow: "md",
+		opened,
+		onChange: setOpened,
+		closeOnClickOutside: true,
+		closeOnEscape: true,
+		transitionProps: {
+			transition: "fade-up",
+			duration: 200,
+			timingFunction: "ease"
+		},
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionButton_default, {
+			variant: "subtle",
+			icon: IconColumns
+		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+			bg: "transparent",
+			p: "xs",
+			bd: `1px solid ${ui.colors.border}`,
+			style: { backdropFilter: "blur(20px)" },
+			children: /* @__PURE__ */ jsxs(Stack, {
+				gap: "xs",
+				bg: ui.colors.surface,
+				p: "sm",
+				bdrs: "sm",
+				children: [/* @__PURE__ */ jsxs(Group, {
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsxs(Text$1, {
+						size: "sm",
+						fw: 500,
+						children: [
+							"Columns (",
+							visibleCount,
+							"/",
+							columnEntries.length,
+							")"
+						]
+					}), /* @__PURE__ */ jsxs(Group, {
+						gap: 4,
+						children: [/* @__PURE__ */ jsx(Button, {
+							size: "compact-xs",
+							variant: "subtle",
+							onClick: handleShowAll,
+							children: "All"
+						}), /* @__PURE__ */ jsx(Button, {
+							size: "compact-xs",
+							variant: "subtle",
+							onClick: handleHideAll,
+							children: "None"
+						})]
+					})]
+				}), /* @__PURE__ */ jsx(ScrollArea.Autosize, {
+					mah: 300,
+					children: /* @__PURE__ */ jsx(Stack, {
+						gap: 4,
+						children: columnEntries.map(([key, col]) => /* @__PURE__ */ jsx(Checkbox, {
+							label: col.label,
+							checked: visibility[key] !== false,
+							onChange: (e) => handleToggle(key, e.currentTarget.checked),
+							size: "sm"
+						}, key))
+					})
+				})]
+			})
+		})]
+	});
+};
+var ColumnPicker_default = ColumnPicker;
+
+//#endregion
+//#region ../../src/core/components/table/FilterPicker.tsx
+const getFieldLabel = (schema, key) => {
+	const prop = schema.properties[key];
+	if (prop && typeof prop === "object" && "title" in prop && prop.title) return prop.title;
+	return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+};
+const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
+	const [opened, setOpened] = useState(false);
+	const filterKeys = Object.keys(schema.properties);
+	const handleShowAll = () => {
+		onVisibilityChange(filterKeys.reduce((acc, key) => ({
+			...acc,
+			[key]: true
+		}), {}));
+	};
+	const handleHideAll = () => {
+		onVisibilityChange(filterKeys.reduce((acc, key) => ({
+			...acc,
+			[key]: false
+		}), {}));
+	};
+	const handleToggle = (key, checked) => {
+		onVisibilityChange({
+			...visibility,
+			[key]: checked
+		});
+	};
+	const visibleCount = filterKeys.filter((key) => visibility[key] !== false).length;
+	return /* @__PURE__ */ jsxs(Popover, {
+		width: 280,
+		position: "bottom-start",
+		shadow: "md",
+		opened,
+		onChange: setOpened,
+		closeOnClickOutside: true,
+		closeOnEscape: true,
+		transitionProps: {
+			transition: "fade-up",
+			duration: 200,
+			timingFunction: "ease"
+		},
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionButton_default, {
+			variant: "subtle",
+			icon: IconFilter
+		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+			bg: "transparent",
+			p: "xs",
+			bd: `1px solid ${ui.colors.border}`,
+			style: { backdropFilter: "blur(20px)" },
+			children: /* @__PURE__ */ jsxs(Stack, {
+				gap: "xs",
+				bg: ui.colors.surface,
+				p: "sm",
+				bdrs: "sm",
+				children: [/* @__PURE__ */ jsxs(Group, {
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsxs(Text$1, {
+						size: "sm",
+						fw: 500,
+						children: [
+							"Filters (",
+							visibleCount,
+							"/",
+							filterKeys.length,
+							")"
+						]
+					}), /* @__PURE__ */ jsxs(Group, {
+						gap: 4,
+						children: [/* @__PURE__ */ jsx(Button, {
+							size: "compact-xs",
+							variant: "subtle",
+							onClick: handleShowAll,
+							children: "All"
+						}), /* @__PURE__ */ jsx(Button, {
+							size: "compact-xs",
+							variant: "subtle",
+							onClick: handleHideAll,
+							children: "None"
+						})]
+					})]
+				}), /* @__PURE__ */ jsx(ScrollArea.Autosize, {
+					mah: 300,
+					children: /* @__PURE__ */ jsx(Stack, {
+						gap: 4,
+						children: filterKeys.map((key) => /* @__PURE__ */ jsx(Checkbox, {
+							label: getFieldLabel(schema, key),
+							checked: visibility[key] !== false,
+							onChange: (e) => handleToggle(key, e.currentTarget.checked),
+							size: "sm"
+						}, key))
+					})
+				})]
+			})
+		})]
+	});
+};
+var FilterPicker_default = FilterPicker;
+
+//#endregion
+//#region ../../src/core/components/table/DataTableToolbar.tsx
+const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility, onColumnVisibilityChange, onFilterVisibilityChange, actions, onRefresh, selectedItems = [], checkboxActions, onClearSelection }) => {
+	const hasSelection = selectedItems.length > 0;
+	const handleCheckboxAction = async (action) => {
+		const ctx = {
+			selectedItems,
+			clearSelection: onClearSelection || (() => {})
+		};
+		await action.onClick(ctx);
+	};
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		p: "xs",
+		style: { borderBottom: "1px solid var(--alepha-border)" },
+		children: [
+			/* @__PURE__ */ jsxs(Flex$1, {
+				gap: 4,
+				align: "center",
+				children: [
+					filters && /* @__PURE__ */ jsx(FilterPicker_default, {
+						schema: filters,
+						visibility: filterVisibility,
+						onVisibilityChange: onFilterVisibilityChange
+					}),
+					/* @__PURE__ */ jsx(ColumnPicker_default, {
+						columns,
+						visibility: columnVisibility,
+						onVisibilityChange: onColumnVisibilityChange
+					}),
+					hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(Divider, {
+							orientation: "vertical",
+							mx: "xs"
+						}),
+						/* @__PURE__ */ jsxs(Badge, {
+							variant: "light",
+							size: "lg",
+							children: [selectedItems.length, " selected"]
+						}),
+						/* @__PURE__ */ jsx(ActionButton_default, {
+							variant: "subtle",
+							size: "compact-sm",
+							icon: IconX,
+							onClick: onClearSelection,
+							children: "Clear"
+						}),
+						checkboxActions?.map((action, index) => /* @__PURE__ */ jsx(ActionButton_default, {
+							variant: "light",
+							size: "compact-sm",
+							intent: action.intent,
+							icon: action.icon && isComponentType(action.icon) ? action.icon : void 0,
+							onClick: () => handleCheckboxAction(action),
+							children: action.label
+						}, index))
+					] })
+				]
+			}),
+			/* @__PURE__ */ jsx(Flex$1, { flex: 1 }),
+			/* @__PURE__ */ jsxs(Flex$1, {
+				gap: "xs",
+				children: [actions?.map((props, index) => !isValidElement(props) ? /* @__PURE__ */ jsx(ActionButton_default, {
+					...props,
+					children: props.label
+				}, index) : props), /* @__PURE__ */ jsx(ActionButton_default, {
+					icon: IconRefresh,
+					onClick: onRefresh,
+					children: "Refresh"
+				})]
+			})
+		]
+	});
+};
+var DataTableToolbar_default = DataTableToolbar;
+
 //#endregion
 //#region ../../src/core/components/table/DataTable.tsx
+const DEFAULT_VISIBLE_COLUMN_COUNT = 10;
+/**
+* Parse the sort string to get direction for a specific field.
+* Alepha convention: 'field' = ASC, '-field' = DESC
+*/
+const getSortDirection = (sortString, field) => {
+	if (!sortString) return null;
+	const parts = sortString.split(",").map((s) => s.trim());
+	for (const part of parts) {
+		if (part === field) return "asc";
+		if (part === `-${field}`) return "desc";
+	}
+	return null;
+};
+/**
+* Toggle sort for a field in the sort string.
+* Cycles: null -> asc -> desc -> null
+*/
+const toggleSort = (sortString, field) => {
+	const current = getSortDirection(sortString, field);
+	const parts = (sortString || "").split(",").map((s) => s.trim()).filter((s) => s && s !== field && s !== `-${field}`);
+	if (current === null) parts.unshift(field);
+	else if (current === "asc") parts.unshift(`-${field}`);
+	return parts.length > 0 ? parts.join(",") : void 0;
+};
 const DataTable = (props) => {
 	const [items, setItems] = useState(typeof props.items === "function" ? { content: [] } : props.items);
 	const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
@@ -3344,6 +3614,100 @@ const DataTable = (props) => {
 	const [size, setSize] = useState(String(defaultSize));
 	const [currentPage, setCurrentPage] = useState(0);
 	const alepha = useInject(Alepha);
+	const [columnVisibility, setColumnVisibility] = useState(() => {
+		if (props.defaultColumnVisibility) return props.defaultColumnVisibility;
+		const columnKeys = Object.keys(props.columns);
+		const maxVisible = props.defaultVisibleColumnCount ?? DEFAULT_VISIBLE_COLUMN_COUNT;
+		return columnKeys.reduce((acc, key, index) => ({
+			...acc,
+			[key]: index < maxVisible
+		}), {});
+	});
+	const [filterVisibility, setFilterVisibility] = useState(() => {
+		if (props.defaultFilterVisibility) return props.defaultFilterVisibility;
+		if (!props.filters?.properties) return {};
+		return Object.keys(props.filters.properties).reduce((acc, key) => ({
+			...acc,
+			[key]: true
+		}), {});
+	});
+	const handleColumnVisibilityChange = (visibility) => {
+		setColumnVisibility(visibility);
+		props.onColumnVisibilityChange?.(visibility);
+	};
+	const handleFilterVisibilityChange = (visibility) => {
+		setFilterVisibility(visibility);
+		props.onFilterVisibilityChange?.(visibility);
+	};
+	const visibleColumns = useMemo(() => {
+		return Object.entries(props.columns).filter(([key]) => columnVisibility[key] !== false);
+	}, [props.columns, columnVisibility]);
+	const [sortString, setSortString] = useState(void 0);
+	const handleSortClick = (columnKey, sortKey) => {
+		const newSort = toggleSort(sortString, sortKey || columnKey);
+		setSortString(newSort);
+		form.input.sort.set(newSort);
+		form.input.page.set(0);
+	};
+	const [selectedKeys, setSelectedKeys] = useState(/* @__PURE__ */ new Set());
+	const getItemKey = useCallback((item) => {
+		if (props.getItemKey) return props.getItemKey(item);
+		return JSON.stringify(item);
+	}, [props.getItemKey]);
+	const selectedItems = useMemo(() => {
+		if (!props.withCheckbox) return [];
+		return items.content.filter((item) => selectedKeys.has(getItemKey(item)));
+	}, [
+		items.content,
+		selectedKeys,
+		getItemKey,
+		props.withCheckbox
+	]);
+	const allSelected = useMemo(() => {
+		if (items.content.length === 0) return false;
+		return items.content.every((item) => selectedKeys.has(getItemKey(item)));
+	}, [
+		items.content,
+		selectedKeys,
+		getItemKey
+	]);
+	const someSelected = useMemo(() => {
+		if (items.content.length === 0) return false;
+		const selectedCount = items.content.filter((item) => selectedKeys.has(getItemKey(item))).length;
+		return selectedCount > 0 && selectedCount < items.content.length;
+	}, [
+		items.content,
+		selectedKeys,
+		getItemKey
+	]);
+	const toggleItemSelection = useCallback((item) => {
+		const key = getItemKey(item);
+		setSelectedKeys((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	}, [getItemKey]);
+	const toggleAllSelection = useCallback(() => {
+		if (allSelected) setSelectedKeys((prev) => {
+			const next = new Set(prev);
+			for (const item of items.content) next.delete(getItemKey(item));
+			return next;
+		});
+		else setSelectedKeys((prev) => {
+			const next = new Set(prev);
+			for (const item of items.content) next.add(getItemKey(item));
+			return next;
+		});
+	}, [
+		allSelected,
+		items.content,
+		getItemKey
+	]);
+	const clearSelection = useCallback(() => {
+		setSelectedKeys(/* @__PURE__ */ new Set());
+	}, []);
 	const form = useForm({
 		schema: t.object({
 			...props.filters ? props.filters.properties : {},
@@ -3351,7 +3715,7 @@ const DataTable = (props) => {
 			size: t.number({ default: defaultSize }),
 			sort: t.optional(t.string())
 		}),
-		handler: async (values, args) => {
+		handler: async (values) => {
 			if (typeof props.items === "function") {
 				const response = await props.items(values, { items: items.content });
 				if (props.infinityScroll && values.page > 0) setItems((prev) => ({
@@ -3416,100 +3780,118 @@ const DataTable = (props) => {
 		currentPage,
 		form
 	]);
-	const head = Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Th, {
-		style: { ...col.fit ? {
-			width: "1%",
-			whiteSpace: "nowrap"
-		} : {} },
-		children: /* @__PURE__ */ jsx(ActionButton_default, {
-			justify: "space-between",
-			radius: 0,
-			fullWidth: true,
-			size: "xs",
-			children: col.label
+	const checkboxHeader = props.withCheckbox ? /* @__PURE__ */ jsx(Table.Th, {
+		style: { width: 40 },
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			checked: allSelected,
+			indeterminate: someSelected,
+			onChange: toggleAllSelection,
+			"aria-label": "Select all"
 		})
-	}, key));
+	}) : null;
+	const head = visibleColumns.map(([key, col]) => {
+		const sortField = col.sortKey || key;
+		const sortDir = col.sortable ? getSortDirection(sortString, sortField) : null;
+		const headerContent = /* @__PURE__ */ jsxs(Flex$1, {
+			align: "center",
+			gap: 4,
+			children: [/* @__PURE__ */ jsx(Text$1, {
+				size: "xs",
+				children: col.label
+			}), col.sortable && /* @__PURE__ */ jsxs(Flex$1, {
+				c: "dimmed",
+				children: [
+					sortDir === "asc" && /* @__PURE__ */ jsx(IconArrowUp, { size: ui.sizes.icon.sm }),
+					sortDir === "desc" && /* @__PURE__ */ jsx(IconArrowDown, { size: ui.sizes.icon.sm }),
+					sortDir === null && /* @__PURE__ */ jsx(IconArrowsSort, { size: ui.sizes.icon.sm })
+				]
+			})]
+		});
+		return /* @__PURE__ */ jsx(Table.Th, {
+			style: {
+				...col.fit ? {} : {},
+				...col.sortable ? { cursor: "pointer" } : {}
+			},
+			children: col.sortable ? /* @__PURE__ */ jsx(UnstyledButton, {
+				onClick: () => handleSortClick(key, col.sortKey),
+				children: headerContent
+			}) : headerContent
+		}, key);
+	});
 	const rows = items.content.map((item, index) => {
 		const trProps = props.tableTrProps ? props.tableTrProps(item) : {};
-		return /* @__PURE__ */ jsx(Table.Tr, {
+		const itemKey = getItemKey(item);
+		const isSelected = selectedKeys.has(itemKey);
+		return /* @__PURE__ */ jsxs(Table.Tr, {
 			...trProps,
-			children: Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Td, { children: col.value(item, {
+			children: [props.withCheckbox && /* @__PURE__ */ jsx(Table.Td, {
+				style: { width: 40 },
+				children: /* @__PURE__ */ jsx(Checkbox, {
+					checked: isSelected,
+					onChange: () => toggleItemSelection(item),
+					"aria-label": "Select row"
+				})
+			}), visibleColumns.map(([key, col]) => /* @__PURE__ */ jsx(Table.Td, { children: col.value(item, {
 				index,
 				form,
 				alepha
-			}) }, key))
-		}, JSON.stringify(item));
+			}) }, key))]
+		}, itemKey);
 	});
-	const schema = t.omit(form.options.schema, [
-		"page",
-		"size",
-		"sort"
-	]);
+	const filterSchema = useMemo(() => {
+		if (!props.filters) return null;
+		return t.omit(form.options.schema, [
+			"page",
+			"size",
+			"sort"
+		]);
+	}, [props.filters, form.options.schema]);
 	return /* @__PURE__ */ jsxs(Flex$1, {
-		direction: "column",
-		gap: "sm",
 		flex: 1,
+		p: 0,
+		bg: "var(--alepha-elevated)",
+		bdrs: "sm",
+		bd: "1px solid var(--alepha-border)",
+		direction: "column",
 		children: [
-			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(DataTableToolbar_default, {
+				columns: props.columns,
+				filters: props.filters,
+				columnVisibility,
+				filterVisibility,
+				onColumnVisibilityChange: handleColumnVisibilityChange,
+				onFilterVisibilityChange: handleFilterVisibilityChange,
+				actions: props.actions,
+				onRefresh: () => form.submit(),
+				selectedItems,
+				checkboxActions: props.checkboxActions,
+				onClearSelection: clearSelection
+			}),
+			filterSchema && props.filters && /* @__PURE__ */ jsx(DataTableFilters_default, {
+				schema: filterSchema,
+				form,
+				typeFormProps: props.typeFormProps,
+				filterVisibility
+			}),
 			/* @__PURE__ */ jsx(Flex$1, {
 				className: "overflow-auto",
 				children: /* @__PURE__ */ jsxs(Table, {
-					striped: true,
-					withRowBorders: true,
 					withColumnBorders: true,
-					withTableBorder: true,
-					stripedColor: "",
+					withRowBorders: true,
 					...props.tableProps,
-					children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsx(Table.Tr, { children: head }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: rows })]
+					children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [checkboxHeader, head] }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: rows })]
 				})
 			}),
-			!props.infinityScroll && /* @__PURE__ */ jsxs(Flex$1, {
-				justify: "space-between",
-				align: "center",
-				children: [/* @__PURE__ */ jsx(Pagination, {
-					withEdges: true,
-					total: items.page?.totalPages ?? 1,
-					value: page,
-					onChange: (value) => {
-						form.input.page.set(value - 1);
-					}
-				}), /* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(Select, {
-					value: size,
-					onChange: (value) => {
-						form.input.size.set(Number(value));
-					},
-					data: [
-						{
-							value: "5",
-							label: "5"
-						},
-						{
-							value: "10",
-							label: "10"
-						},
-						{
-							value: "25",
-							label: "25"
-						},
-						{
-							value: "50",
-							label: "50"
-						},
-						{
-							value: "100",
-							label: "100"
-						}
-					]
-				}) })]
+			!props.infinityScroll && /* @__PURE__ */ jsx(DataTablePagination_default, {
+				page,
+				size,
+				totalPages: items.page?.totalPages ?? 1,
+				onPageChange: (value) => {
+					form.input.page.set(value - 1);
+				},
+				onSizeChange: (value) => {
+					form.input.size.set(value);
+				}
 			})
 		]
 	});
@@ -3559,5 +3941,5 @@ const AlephaUI = $module({
 });
 
 //#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, ThemeButton_default as ThemeButton, ThemeProvider, ToastService, TypeForm_default as TypeForm, capitalize, extractSchemaFields, getDefaultIcon, getOperatorsForField, mantineThemeAtom, 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, ControlArray_default as ControlArray, ControlDate_default as ControlDate, ControlNumber_default as ControlNumber, ControlObject_default as ControlObject, 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, alephaThemeAtom, alephaThemeListAtom, capitalize, defaultTheme, extractSchemaFields, getDefaultIcon, getOperatorsForField, midnightTheme, prettyName, ui, useDialog, useToast };
 //# sourceMappingURL=index.js.map