@alepha/ui 0.18.0 → 0.18.2

package/dist/auth/{core-niW0sFLv.js → core-DyfeVr5c.js}

@@ -1,10 +1,10 @@
 import { $atom, $context, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
 import { AlephaReactForm, FormValidationError, useForm, useFormState } from "alepha/react/form";
-import { $head, AlephaReactHead } from "alepha/react/head";
+import { $head, AlephaReactHead, BrowserHeadProvider } from "alepha/react/head";
 import { AlephaReactI18n, useI18n } from "alepha/react/i18n";
 import { $cookie } from "alepha/server/cookies";
+import { ActionIcon, Anchor, Autocomplete, Badge, Button, Card, ColorInput, ColorSchemeScript, Container, Divider, Fieldset, FileInput, Flex, Grid, Image, Input, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Paper, PasswordInput, Popover, SegmentedControl, Select, Slider, Switch, TagsInput, Text, TextInput, Textarea, Tooltip, UnstyledButton, useMantineTheme } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
-import { ActionIcon, Anchor, Autocomplete, Badge, Button, Card, ColorInput, ColorSchemeScript, Container, Divider, Fieldset, FileInput, Flex, Grid, Image, Input, Loader, MantineProvider, Menu, MultiSelect, NumberInput, PasswordInput, Popover, SegmentedControl, Select, Slider, Switch, TagsInput, Text, TextInput, Textarea, ThemeIcon, Tooltip, UnstyledButton, useMantineTheme } from "@mantine/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Notifications, notifications } from "@mantine/notifications";
@@ -32,7 +32,7 @@ const alephaSidebarAtom = $atom({
 		closed: true,
 		collapsed: false,
 		expandedWidth: 300,
-		collapsedWidth: 78
+		collapsedWidth: 72
 	}
 });
 
@@ -44,6 +44,20 @@ const alephaThemeAtom = $atom({
 	default: { index: 0 }
 });
 
+//#endregion
+//#region ../../src/core/atoms/alephaThemeOverridesAtom.ts
+const alephaThemeOverridesAtom = $atom({
+	name: "alepha.ui.themeOverrides",
+	schema: t.object({
+		primaryColor: t.optional(t.text()),
+		radius: t.optional(t.text()),
+		fontFamily: t.optional(t.text()),
+		fontSize: t.optional(t.text()),
+		scale: t.optional(t.text())
+	}),
+	default: {}
+});
+
 //#endregion
 //#region ../../src/core/atoms/themes/default.ts
 const defaultTheme = {
@@ -51,6 +65,161 @@ const defaultTheme = {
 	description: "Default Alepha Theme"
 };
 
+//#endregion
+//#region ../../src/core/atoms/themes/editorial.ts
+/**
+* Editorial theme.
+*
+* Serif typography, high contrast black and white, thin borders, generous whitespace.
+* Newspaper/magazine aesthetic — elegant restraint.
+*/
+const editorialTheme = {
+	name: "Editorial",
+	description: "Serif typography with newspaper elegance",
+	defaultColorScheme: "light",
+	head: { link: [
+		{
+			rel: "preconnect",
+			href: "https://fonts.googleapis.com"
+		},
+		{
+			rel: "preconnect",
+			href: "https://fonts.gstatic.com",
+			crossorigin: ""
+		},
+		{
+			rel: "stylesheet",
+			href: "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap"
+		}
+	] },
+	primaryColor: "ink",
+	primaryShade: {
+		light: 7,
+		dark: 3
+	},
+	autoContrast: true,
+	fontFamily: "\"Source Serif 4\", \"Georgia\", \"Times New Roman\", serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "\"Playfair Display\", \"Georgia\", \"Times New Roman\", serif",
+		fontWeight: "700",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2.5rem",
+				lineHeight: "1.15"
+			},
+			h2: {
+				fontSize: "1.75rem",
+				lineHeight: "1.2"
+			},
+			h3: {
+				fontSize: "1.375rem",
+				lineHeight: "1.3"
+			},
+			h4: {
+				fontSize: "1.125rem",
+				lineHeight: "1.4"
+			},
+			h5: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "sm",
+	radius: {
+		xs: "2px",
+		sm: "3px",
+		md: "4px",
+		lg: "6px",
+		xl: "8px"
+	},
+	shadows: {
+		xs: "0 1px 2px rgba(0, 0, 0, 0.06)",
+		sm: "0 1px 3px rgba(0, 0, 0, 0.08)",
+		md: "0 2px 6px rgba(0, 0, 0, 0.08)",
+		lg: "0 4px 12px rgba(0, 0, 0, 0.1)",
+		xl: "0 8px 24px rgba(0, 0, 0, 0.1)"
+	},
+	colors: {
+		ink: [
+			"#f5f3f0",
+			"#e8e4de",
+			"#d4cec5",
+			"#b5ad9f",
+			"#8c8272",
+			"#6b6050",
+			"#4a4035",
+			"#332b22",
+			"#1f1812",
+			"#0d0a07"
+		],
+		burgundy: [
+			"#faf0f0",
+			"#f0d4d4",
+			"#e0adad",
+			"#cc8585",
+			"#b35e5e",
+			"#944545",
+			"#763636",
+			"#5a2828",
+			"#3d1b1b",
+			"#220f0f"
+		],
+		gray: [
+			"#faf9f7",
+			"#f0eee9",
+			"#e0dcd5",
+			"#c8c2b8",
+			"#a8a194",
+			"#8a8273",
+			"#6b6456",
+			"#504a3f",
+			"#36322b",
+			"#1e1b17"
+		],
+		dark: [
+			"#d5d2cd",
+			"#aba59c",
+			"#817a6e",
+			"#5e584e",
+			"#46413a",
+			"#36322c",
+			"#2a2721",
+			"#201d19",
+			"#171411",
+			"#0d0b09"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: { letterSpacing: "0.02em" } }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Paper: Paper.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Card: Card.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		TextInput: TextInput.extend({ styles: { input: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Badge: Badge.extend({
+			defaultProps: {
+				fw: 600,
+				variant: "outline"
+			},
+			styles: { root: {
+				fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+				letterSpacing: "0.04em",
+				textTransform: "uppercase",
+				fontSize: "0.65rem"
+			} }
+		})
+	}
+};
+
 //#endregion
 //#region ../../src/core/atoms/themes/midnight.ts
 const midnightTheme = {
@@ -166,41 +335,793 @@ const midnightTheme = {
 	}
 };
 
+//#endregion
+//#region ../../src/core/atoms/themes/monochrome.ts
+/**
+* Monochrome theme.
+*
+* Pure black and white. No color. Bold typography does all the heavy lifting.
+* A design-school statement piece — minimalist color, maximalist type.
+*/
+const monochromeTheme = {
+	name: "Monochrome",
+	description: "Pure black and white — zero color, maximum typography",
+	primaryColor: "mono",
+	primaryShade: {
+		light: 8,
+		dark: 1
+	},
+	autoContrast: true,
+	fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+		fontWeight: "800",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2.25rem",
+				lineHeight: "1.15"
+			},
+			h2: {
+				fontSize: "1.625rem",
+				lineHeight: "1.25"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.35"
+			},
+			h4: {
+				fontSize: "1.0625rem",
+				lineHeight: "1.45"
+			},
+			h5: {
+				fontSize: "0.9375rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.8125rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "0",
+	radius: {
+		xs: "0",
+		sm: "0",
+		md: "0",
+		lg: "0",
+		xl: "2px"
+	},
+	shadows: {
+		xs: "0 1px 2px rgba(0, 0, 0, 0.08)",
+		sm: "0 1px 4px rgba(0, 0, 0, 0.1)",
+		md: "0 2px 8px rgba(0, 0, 0, 0.12)",
+		lg: "0 4px 16px rgba(0, 0, 0, 0.14)",
+		xl: "0 8px 32px rgba(0, 0, 0, 0.16)"
+	},
+	colors: {
+		mono: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		gray: [
+			"#f5f5f5",
+			"#e5e5e5",
+			"#cccccc",
+			"#b0b0b0",
+			"#909090",
+			"#707070",
+			"#555555",
+			"#3a3a3a",
+			"#252525",
+			"#121212"
+		],
+		blue: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		green: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		red: [
+			"#f5f5f5",
+			"#e0e0e0",
+			"#c0c0c0",
+			"#a0a0a0",
+			"#808080",
+			"#606060",
+			"#404040",
+			"#282828",
+			"#141414",
+			"#000000"
+		],
+		dark: [
+			"#d0d0d0",
+			"#a0a0a0",
+			"#707070",
+			"#505050",
+			"#383838",
+			"#282828",
+			"#1c1c1c",
+			"#141414",
+			"#0a0a0a",
+			"#000000"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 700 },
+			styles: { root: {
+				border: "2px solid currentColor",
+				letterSpacing: "0.03em",
+				textTransform: "uppercase",
+				fontSize: "0.8125rem"
+			} }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { border: "2px solid currentColor" } } }),
+		Paper: Paper.extend({ styles: { root: { border: "2px solid var(--mantine-color-default-border)" } } }),
+		Card: Card.extend({ styles: { root: { border: "2px solid var(--mantine-color-default-border)" } } }),
+		TextInput: TextInput.extend({ styles: { input: { border: "2px solid var(--mantine-color-default-border)" } } }),
+		Badge: Badge.extend({
+			defaultProps: {
+				fw: 700,
+				variant: "outline"
+			},
+			styles: { root: {
+				textTransform: "uppercase",
+				letterSpacing: "0.06em",
+				fontSize: "0.65rem",
+				border: "2px solid currentColor"
+			} }
+		})
+	}
+};
+
+//#endregion
+//#region ../../src/core/atoms/themes/rosePine.ts
+/**
+* Rosé Pine theme.
+*
+* Muted pinks, golds, and subtle greens on warm dark backgrounds.
+* Cozy, low-contrast, easy on the eyes.
+* Based on the Rosé Pine color philosophy.
+*/
+const rosePineTheme = {
+	name: "Rosé Pine",
+	description: "Muted pinks and golds on warm dark backgrounds",
+	defaultColorScheme: "dark",
+	primaryColor: "rose",
+	primaryShade: {
+		light: 5,
+		dark: 4
+	},
+	autoContrast: true,
+	fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+		fontWeight: "600",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2rem",
+				lineHeight: "1.25"
+			},
+			h2: {
+				fontSize: "1.5rem",
+				lineHeight: "1.3"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h5: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.75rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "md",
+	radius: {
+		xs: "4px",
+		sm: "6px",
+		md: "8px",
+		lg: "12px",
+		xl: "16px"
+	},
+	shadows: {
+		xs: "0 1px 3px rgba(0, 0, 0, 0.2)",
+		sm: "0 2px 6px rgba(0, 0, 0, 0.2)",
+		md: "0 4px 12px rgba(0, 0, 0, 0.25)",
+		lg: "0 8px 24px rgba(0, 0, 0, 0.3)",
+		xl: "0 12px 36px rgba(0, 0, 0, 0.35)"
+	},
+	colors: {
+		rose: [
+			"#faf0f4",
+			"#f2d8e3",
+			"#eabdd0",
+			"#e0a0bb",
+			"#d4849f",
+			"#c4748f",
+			"#b06282",
+			"#9a5275",
+			"#7a3f5e",
+			"#5c2e47"
+		],
+		gold: [
+			"#fdf8ec",
+			"#f8ecc8",
+			"#f2dda0",
+			"#eacb72",
+			"#e0b94d",
+			"#c9a33e",
+			"#a98830",
+			"#866b24",
+			"#634f1a",
+			"#403310"
+		],
+		pine: [
+			"#ecf5f0",
+			"#d0e6da",
+			"#add4be",
+			"#86c0a0",
+			"#62ac84",
+			"#4e9670",
+			"#3e7a5a",
+			"#2f5e44",
+			"#20412f",
+			"#12251b"
+		],
+		foam: [
+			"#edf6f7",
+			"#d2e9eb",
+			"#b0d9dd",
+			"#8bc6cc",
+			"#6ab3bb",
+			"#569da5",
+			"#438088",
+			"#33636a",
+			"#23454a",
+			"#14292c"
+		],
+		red: [
+			"#f9eef0",
+			"#efd3d8",
+			"#e3b2bb",
+			"#d68e9b",
+			"#c86c7c",
+			"#b25566",
+			"#944454",
+			"#733442",
+			"#52252f",
+			"#33161d"
+		],
+		gray: [
+			"#f4f0f2",
+			"#e4dde1",
+			"#cec5cb",
+			"#b5aab2",
+			"#9a8e96",
+			"#7e737a",
+			"#635a60",
+			"#4a4248",
+			"#332d31",
+			"#1e1a1c"
+		],
+		dark: [
+			"#e0d8e0",
+			"#b0a6b2",
+			"#817786",
+			"#615768",
+			"#4a3f54",
+			"#3a3044",
+			"#2a2436",
+			"#211e2e",
+			"#1a1724",
+			"#110f1a"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 500 },
+			styles: { root: { transition: "background-color 0.15s ease, opacity 0.15s ease" } }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { transition: "background-color 0.15s ease, opacity 0.15s ease" } } }),
+		Paper: Paper.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "1px solid var(--mantine-color-default-border)" } }
+		}),
+		Card: Card.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "1px solid var(--mantine-color-default-border)" } }
+		}),
+		TextInput: TextInput.extend({ styles: { input: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Badge: Badge.extend({ defaultProps: { fw: 500 } })
+	}
+};
+
+//#endregion
+//#region ../../src/core/atoms/themes/softBrutalism.ts
+/**
+* Soft Brutalism theme.
+*
+* Pastel pop palette with solid offset shadows, rounded corners, and bold borders.
+* A friendlier take on neubrutalism — playful but production-ready.
+*/
+const softBrutalismTheme = {
+	name: "Soft Brutalism",
+	description: "Pastel pop with bold borders and offset shadows",
+	head: { link: [
+		{
+			rel: "preconnect",
+			href: "https://fonts.googleapis.com"
+		},
+		{
+			rel: "preconnect",
+			href: "https://fonts.gstatic.com",
+			crossorigin: ""
+		},
+		{
+			rel: "stylesheet",
+			href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
+		}
+	] },
+	primaryColor: "lavender",
+	primaryShade: {
+		light: 5,
+		dark: 7
+	},
+	autoContrast: true,
+	cursorType: "pointer",
+	fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+		fontWeight: "700",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "2rem",
+				lineHeight: "1.25"
+			},
+			h2: {
+				fontSize: "1.5rem",
+				lineHeight: "1.3"
+			},
+			h3: {
+				fontSize: "1.25rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h5: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.75rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "md",
+	radius: {
+		xs: "6px",
+		sm: "8px",
+		md: "12px",
+		lg: "16px",
+		xl: "24px"
+	},
+	shadows: {
+		xs: "2px 2px 0 0 rgba(100, 80, 140, 0.15)",
+		sm: "3px 3px 0 0 rgba(100, 80, 140, 0.2)",
+		md: "4px 4px 0 0 rgba(100, 80, 140, 0.2)",
+		lg: "6px 6px 0 0 rgba(100, 80, 140, 0.25)",
+		xl: "8px 8px 0 0 rgba(100, 80, 140, 0.3)"
+	},
+	colors: {
+		lavender: [
+			"#f3f0fa",
+			"#e4dcf4",
+			"#d1c4e9",
+			"#b4a7d6",
+			"#9a8bc4",
+			"#7f6cb0",
+			"#6a549e",
+			"#543f87",
+			"#3d2d6b",
+			"#2a1d52"
+		],
+		peach: [
+			"#fef3ec",
+			"#fce4d0",
+			"#f9d0ae",
+			"#f4b886",
+			"#f4a261",
+			"#e68a42",
+			"#c67234",
+			"#a35a28",
+			"#6b3a1a",
+			"#4a2710"
+		],
+		mint: [
+			"#ecfaf0",
+			"#d4f2dc",
+			"#b3e8c2",
+			"#8edba4",
+			"#81c995",
+			"#5ab874",
+			"#42a05c",
+			"#2e8548",
+			"#1a5c2e",
+			"#0f3f1e"
+		],
+		coral: [
+			"#fef0ef",
+			"#fcd9d7",
+			"#f8b8b4",
+			"#f29490",
+			"#e97171",
+			"#d65454",
+			"#b83e3e",
+			"#962d2d",
+			"#6b1f1f",
+			"#4a1414"
+		],
+		gray: [
+			"#faf8f6",
+			"#f0ece8",
+			"#ddd7d0",
+			"#c4bbb2",
+			"#a89e95",
+			"#8c8279",
+			"#6e655d",
+			"#524b44",
+			"#3a342f",
+			"#24211e"
+		],
+		dark: [
+			"#d4d0dc",
+			"#a9a2b5",
+			"#7e7690",
+			"#5c546e",
+			"#443c56",
+			"#342d45",
+			"#2a2339",
+			"#1e1a2e",
+			"#161224",
+			"#0f0c1a"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: {
+				border: "2px solid currentColor",
+				boxShadow: "3px 3px 0 0 rgba(100, 80, 140, 0.2)",
+				transition: "box-shadow 0.15s ease, transform 0.15s ease"
+			} }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: {
+			border: "2px solid currentColor",
+			boxShadow: "2px 2px 0 0 rgba(100, 80, 140, 0.15)"
+		} } }),
+		Paper: Paper.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "2px solid var(--mantine-color-default-border)" } }
+		}),
+		Card: Card.extend({
+			defaultProps: { shadow: "sm" },
+			styles: { root: { border: "2px solid var(--mantine-color-default-border)" } }
+		}),
+		TextInput: TextInput.extend({ styles: { input: {
+			border: "2px solid var(--mantine-color-default-border)",
+			transition: "box-shadow 0.15s ease, border-color 0.15s ease"
+		} } }),
+		Badge: Badge.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: { border: "2px solid currentColor" } }
+		})
+	}
+};
+
+//#endregion
+//#region ../../src/core/atoms/themes/terminal.ts
+/**
+* Terminal theme.
+*
+* Monospace everything, green-on-black, zero radius.
+* CRT/hacker aesthetic for developer tools and dashboards.
+*/
+const terminalTheme = {
+	name: "Terminal",
+	description: "Green phosphor on black — monospace hacker aesthetic",
+	defaultColorScheme: "dark",
+	primaryColor: "terminal",
+	primaryShade: {
+		light: 5,
+		dark: 4
+	},
+	autoContrast: true,
+	fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	fontFamilyMonospace: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+	headings: {
+		fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+		fontWeight: "700",
+		textWrap: "wrap",
+		sizes: {
+			h1: {
+				fontSize: "1.75rem",
+				lineHeight: "1.3"
+			},
+			h2: {
+				fontSize: "1.375rem",
+				lineHeight: "1.35"
+			},
+			h3: {
+				fontSize: "1.125rem",
+				lineHeight: "1.4"
+			},
+			h4: {
+				fontSize: "1rem",
+				lineHeight: "1.5"
+			},
+			h5: {
+				fontSize: "0.875rem",
+				lineHeight: "1.5"
+			},
+			h6: {
+				fontSize: "0.75rem",
+				lineHeight: "1.5"
+			}
+		}
+	},
+	defaultRadius: "0",
+	radius: {
+		xs: "0",
+		sm: "0",
+		md: "0",
+		lg: "2px",
+		xl: "4px"
+	},
+	shadows: {
+		xs: "none",
+		sm: "none",
+		md: "0 0 8px rgba(0, 255, 65, 0.08)",
+		lg: "0 0 16px rgba(0, 255, 65, 0.1)",
+		xl: "0 0 24px rgba(0, 255, 65, 0.12)"
+	},
+	colors: {
+		terminal: [
+			"#e6fff0",
+			"#b3ffd1",
+			"#80ffb3",
+			"#4dff94",
+			"#00ff41",
+			"#00d636",
+			"#00ad2b",
+			"#008521",
+			"#005c17",
+			"#00330d"
+		],
+		amber: [
+			"#fff8e6",
+			"#ffecb3",
+			"#ffe080",
+			"#ffd54d",
+			"#ffca28",
+			"#d4a520",
+			"#aa8418",
+			"#806310",
+			"#554208",
+			"#2b2104"
+		],
+		red: [
+			"#ffe6e6",
+			"#ffb3b3",
+			"#ff8080",
+			"#ff4d4d",
+			"#ff1a1a",
+			"#d41515",
+			"#aa1010",
+			"#800c0c",
+			"#550808",
+			"#2b0404"
+		],
+		gray: [
+			"#e8eaed",
+			"#c8cdd3",
+			"#a4aab3",
+			"#808892",
+			"#5f6872",
+			"#474f58",
+			"#363c44",
+			"#282d33",
+			"#1c2026",
+			"#12151a"
+		],
+		dark: [
+			"#c9cdd2",
+			"#8b9198",
+			"#5c636b",
+			"#3d444c",
+			"#2b3138",
+			"#1e242b",
+			"#151a20",
+			"#0e1216",
+			"#080c0f",
+			"#020303"
+		]
+	},
+	components: {
+		Button: Button.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: {
+				border: "1px solid currentColor",
+				textTransform: "uppercase",
+				letterSpacing: "0.05em",
+				fontSize: "0.8125rem"
+			} }
+		}),
+		ActionIcon: ActionIcon.extend({ styles: { root: { border: "1px solid currentColor" } } }),
+		Paper: Paper.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		Card: Card.extend({ styles: { root: { border: "1px solid var(--mantine-color-default-border)" } } }),
+		TextInput: TextInput.extend({ styles: { input: {
+			border: "1px solid var(--mantine-color-default-border)",
+			fontFamily: "inherit"
+		} } }),
+		Badge: Badge.extend({
+			defaultProps: { fw: 600 },
+			styles: { root: {
+				border: "1px solid currentColor",
+				textTransform: "uppercase",
+				letterSpacing: "0.05em"
+			} }
+		})
+	}
+};
+
 //#endregion
 //#region ../../src/core/atoms/alephaThemeListAtom.ts
 const alephaThemeListAtom = $atom({
 	name: "alepha.ui.themeList",
 	schema: t.array(t.json()),
-	default: [defaultTheme, midnightTheme]
+	default: [
+		defaultTheme,
+		midnightTheme,
+		softBrutalismTheme,
+		terminalTheme,
+		editorialTheme,
+		rosePineTheme,
+		monochromeTheme
+	]
 });
 
 //#endregion
 //#region ../../src/core/providers/ThemeProvider.ts
-var ThemeProvider = class {
+var ThemeProvider = class ThemeProvider {
 	alepha = $inject(Alepha);
 	cookie = $cookie({
 		name: "theme",
 		schema: alephaThemeAtom.schema,
 		ttl: [1, "year"]
 	});
+	overridesCookie = $cookie({
+		name: "themeOverrides",
+		schema: alephaThemeOverridesAtom.schema,
+		ttl: [1, "year"]
+	});
 	head = $head(() => {
 		const theme = this.getTheme();
 		if (!theme || !theme.name) return {};
-		return { htmlAttributes: { "data-theme": theme.name } };
+		return {
+			htmlAttributes: { "data-theme": this.slugify(theme.name) },
+			...theme.head
+		};
 	});
 	setTheme(index) {
-		const newTheme = this.alepha.store.get(alephaThemeListAtom)[index];
-		if (!newTheme) throw new AlephaError(`Theme with index ${index} not found`);
+		if (!this.alepha.store.get(alephaThemeListAtom)[index]) throw new AlephaError(`Theme with index ${index} not found`);
 		this.cookie.set({ index });
 		this.alepha.store.set(alephaThemeAtom, { index });
-		if (typeof document === "undefined") return;
-		document.documentElement.removeAttribute("data-theme");
-		if (newTheme.name) document.documentElement.setAttribute("data-theme", newTheme.name);
+		if (!this.alepha.isBrowser()) return;
+		this.alepha.inject(BrowserHeadProvider).refreshGlobalHead();
+	}
+	slugify(name) {
+		return name.toLowerCase().replace(/\s+/g, "-");
 	}
+	static FONT_SIZE_MULTIPLIERS = {
+		xs: .85,
+		sm: .925,
+		md: 1,
+		lg: 1.1,
+		xl: 1.25
+	};
+	static SCALE_VALUES = {
+		xs: .85,
+		sm: .925,
+		md: 1,
+		lg: 1.1,
+		xl: 1.25
+	};
+	static DEFAULT_FONT_SIZES = {
+		xs: "0.75rem",
+		sm: "0.875rem",
+		md: "1rem",
+		lg: "1.125rem",
+		xl: "1.25rem"
+	};
 	getTheme() {
 		const index = this.getThemeIndex();
 		const list = this.alepha.store.get(alephaThemeListAtom);
-		return list[index] || list[0] || defaultTheme;
+		const base = list[index] || list[0] || defaultTheme;
+		const overrides = this.getThemeOverrides();
+		if (!overrides.primaryColor && !overrides.radius && !overrides.fontFamily && !overrides.fontSize && !overrides.scale) return base;
+		const merged = {
+			...base,
+			...overrides.primaryColor && { primaryColor: overrides.primaryColor },
+			...overrides.radius && { defaultRadius: overrides.radius },
+			...overrides.fontFamily && { fontFamily: overrides.fontFamily },
+			...overrides.scale && overrides.scale !== "md" && { scale: ThemeProvider.SCALE_VALUES[overrides.scale] ?? 1 }
+		};
+		if (overrides.fontSize && overrides.fontSize !== "md") {
+			const multiplier = ThemeProvider.FONT_SIZE_MULTIPLIERS[overrides.fontSize] ?? 1;
+			const baseSizes = base.fontSizes ?? ThemeProvider.DEFAULT_FONT_SIZES;
+			merged.fontSizes = Object.fromEntries(Object.entries(baseSizes).map(([key, val]) => [key, `${(Number.parseFloat(String(val)) * multiplier).toFixed(4)}rem`]));
+		}
+		return merged;
+	}
+	setThemeOverrides(overrides) {
+		this.overridesCookie.set(overrides);
+		this.alepha.store.set(alephaThemeOverridesAtom, overrides);
+		if (!this.alepha.isBrowser()) return;
+		this.alepha.inject(BrowserHeadProvider).refreshGlobalHead();
+	}
+	getThemeOverrides() {
+		try {
+			return this.overridesCookie.get() ?? this.alepha.store.get(alephaThemeOverridesAtom) ?? {};
+		} catch {
+			return this.alepha.store.get(alephaThemeOverridesAtom) ?? {};
+		}
+	}
+	resetThemeOverrides() {
+		this.setThemeOverrides({});
 	}
 	getThemeIndex() {
 		try {
@@ -307,14 +1228,21 @@ var DialogService = class {
 	*/
 	alert(options) {
 		return new Promise((resolve) => {
+			let resolved = false;
+			const done = () => {
+				if (resolved) return;
+				resolved = true;
+				resolve();
+			};
 			const modalId = this.open({
 				...options,
 				title: options?.title || "Alert",
+				onClose: done,
 				content: /* @__PURE__ */ jsx(AlertDialog, {
 					options,
 					onClose: () => {
 						this.close(modalId);
-						resolve();
+						done();
 					}
 				})
 			});
@@ -325,16 +1253,23 @@ var DialogService = class {
 	*/
 	confirm(options) {
 		return new Promise((resolve) => {
+			let resolved = false;
+			const done = (confirmed) => {
+				if (resolved) return;
+				resolved = true;
+				resolve(confirmed);
+			};
 			const modalId = this.open({
 				...options,
 				title: options?.title || "Confirm",
 				closeOnClickOutside: false,
 				closeOnEscape: false,
+				onClose: () => done(false),
 				content: /* @__PURE__ */ jsx(ConfirmDialog, {
 					options,
 					onConfirm: (confirmed) => {
 						this.close(modalId);
-						resolve(confirmed);
+						done(confirmed);
 					}
 				})
 			});
@@ -345,16 +1280,23 @@ var DialogService = class {
 	*/
 	prompt(options) {
 		return new Promise((resolve) => {
+			let resolved = false;
+			const done = (value) => {
+				if (resolved) return;
+				resolved = true;
+				resolve(value);
+			};
 			const modalId = this.open({
 				...options,
 				title: options?.title || "Input",
 				closeOnClickOutside: false,
 				closeOnEscape: false,
+				onClose: () => done(null),
 				content: /* @__PURE__ */ jsx(PromptDialog, {
 					options,
 					onSubmit: (value) => {
 						this.close(modalId);
-						resolve(value);
+						done(value);
 					}
 				})
 			});
@@ -458,20 +1400,34 @@ var UiRouter = class {
 /**
 * Hook to get and set the current theme.
 *
-* Returns a tuple with the current theme and a function to set the theme.
+* Returns a tuple with the current theme, a function to set the theme,
+* and expert mode controls for fine-grained customization.
 *
 * ```tsx
-* const [theme, setTheme] = useTheme();
+* const [theme, setTheme, expert] = useTheme();
 * ```
 */
 const useTheme = () => {
 	useStore(alephaThemeAtom);
+	useStore(alephaThemeOverridesAtom);
 	const themeProvider = useInject(ThemeProvider);
 	const theme = themeProvider.getTheme();
 	const setTheme = (theme) => {
 		themeProvider.setTheme(theme.index);
 	};
-	return [theme, setTheme];
+	return [
+		theme,
+		setTheme,
+		{
+			overrides: themeProvider.getThemeOverrides(),
+			setOverrides: (overrides) => {
+				themeProvider.setThemeOverrides(overrides);
+			},
+			resetOverrides: () => {
+				themeProvider.resetThemeOverrides();
+			}
+		}
+	];
 };
 
 //#endregion
@@ -569,16 +1525,16 @@ const AlephaMantineProvider = (props) => {
 const ui = {
 	colors: {
 		transparent: "transparent",
-		background: "var(--alepha-background)",
+		background: "var(--alepha-ground)",
 		surface: "var(--alepha-surface)",
 		elevated: "var(--alepha-elevated)",
 		border: "var(--alepha-border)"
 	},
 	sizes: { icon: {
-		xs: 14,
-		sm: 16,
-		md: 20,
-		lg: 24,
+		xs: 16,
+		sm: 20,
+		md: 24,
+		lg: 28,
 		xl: 32
 	} }
 };
@@ -617,14 +1573,9 @@ const ActionMenuItem = (props) => {
 	if (props.item.onClick) menuItemProps.onClick = action.run;
 	else if (props.item.href) Object.assign(menuItemProps, router.anchor(props.item.href));
 	return /* @__PURE__ */ jsx(Menu.Item, {
-		leftSection: item.icon,
+		leftSection: item.icon ?? (item.active ? /* @__PURE__ */ jsx(IconCheck, { size: ui.sizes.icon.sm }) : /* @__PURE__ */ jsx(Flex, { w: ui.sizes.icon.sm })),
 		onClick: item.onClick,
 		color: item.color,
-		rightSection: item.active ? /* @__PURE__ */ jsx(ThemeIcon, {
-			size: "xs",
-			variant: "transparent",
-			children: /* @__PURE__ */ jsx(IconCheck, {})
-		}) : void 0,
 		...menuItemProps,
 		children: item.label
 	}, index);
@@ -632,11 +1583,9 @@ const ActionMenuItem = (props) => {
 const ActionButton = (_props) => {
 	const theme = useMantineTheme();
 	const props = { ..._props };
-	const { tooltip, menu, icon, ...restProps } = props;
-	if (props.variant === "subtle" || props.variant === "outline") restProps.color ??= "gray";
+	const { tooltip, menu, icon, iconSize, ...restProps } = props;
 	if (props.intent) {
-		if (props.intent === "none") restProps.color ??= "gray";
-		else if (props.intent === "primary") restProps.color ??= theme.primaryColor;
+		if (props.intent === "primary") restProps.color ??= theme.primaryColor;
 		else if (props.intent === "success") {
 			restProps.c ??= "white";
 			restProps.color ??= "green";
@@ -651,10 +1600,11 @@ const ActionButton = (_props) => {
 	}
 	if (props.icon) {
 		const sizes = ui.sizes.icon;
-		const icon = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: sizes[props.size || "md"] }) : /* @__PURE__ */ jsx("span", { children: props.icon });
+		const iconSize = props.iconSize ?? sizes[props.size || "sm"];
+		const icon = isComponentType(props.icon) ? /* @__PURE__ */ jsx(props.icon, { size: iconSize }) : /* @__PURE__ */ jsx("span", { children: props.icon });
 		if (!props.children) {
 			restProps.children = Children.only(icon);
-			restProps.px ??= "xs";
+			restProps.p ??= 8;
 		} else restProps.leftSection = icon;
 	}
 	if (props.leftSection && !props.children) restProps.px ??= "xs";
@@ -878,7 +1828,7 @@ const ActionHrefButton = (props) => {
 //#endregion
 //#region ../../src/core/components/Flex.tsx
 const Flex$1 = forwardRef((props, ref) => {
-	const { fill, center, centerX, centerY, col, ...rest } = props;
+	const { fill, center, centerX, centerY, col, ground, surface, elevated, rounded, bordered, borderedTop, borderedBottom, shadowed, ...rest } = props;
 	if (fill) rest.flex ??= 1;
 	if (col) rest.direction ??= "column";
 	if (center) {
@@ -887,6 +1837,20 @@ const Flex$1 = forwardRef((props, ref) => {
 	}
 	if (centerX) rest.justify ??= "center";
 	if (centerY) rest.align ??= "center";
+	if (ground) rest.bg = "var(--alepha-ground)";
+	else if (surface) rest.bg = "var(--alepha-surface)";
+	else if (elevated) rest.bg = "var(--alepha-elevated)";
+	if (rounded) rest.bdrs = rounded === true ? "md" : rounded;
+	if (bordered) rest.bd = "1px solid var(--alepha-border)";
+	if (borderedTop) rest.style = {
+		borderTop: "1px solid var(--alepha-border)",
+		...rest.style ?? {}
+	};
+	if (borderedBottom) rest.style = {
+		borderBottom: "1px solid var(--alepha-border)",
+		...rest.style ?? {}
+	};
+	if (shadowed) rest.className = `${rest.className ?? ""} shadow-${shadowed === true ? "md" : shadowed}`.trim();
 	return /* @__PURE__ */ jsx(Flex, {
 		ref,
 		...rest
@@ -920,7 +1884,7 @@ const Text$1 = forwardRef((props, ref) => {
 	if (light) rest.fw ??= 300;
 	if (italic) rest.fs ??= "italic";
 	if (muted) rest.c ??= "dimmed";
-	if (small) rest.size ??= "sm";
+	if (small) rest.size ??= "xs";
 	if (uppercase) rest.tt ??= "uppercase";
 	if (capitalize) rest.tt ??= "capitalize";
 	if (center) rest.ta ??= "center";
@@ -2261,4 +3225,4 @@ const AlephaUI = $module({
 
 //#endregion
 export { ui as a, ActionButton as i, capitalize as n, AlephaMantineProvider as o, Control as r, AlephaUI as t };
-//# sourceMappingURL=core-niW0sFLv.js.map
+//# sourceMappingURL=core-DyfeVr5c.js.map