@alepha/ui 0.18.1 → 0.18.3

package/dist/auth/{core-niW0sFLv.js → core-D5jIAVF2.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 { AlephaReactForm, FormValidationError, useFieldValue, useForm, useFormState } from "alepha/react/form";
+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
 	} }
 };
@@ -592,51 +1548,13 @@ function isComponentType(param) {
 
 //#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" || props.variant === "outline") restProps.color ??= "gray";
+	if (props.variant === "minimal") {}
+	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 +1569,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";
@@ -677,6 +1596,7 @@ const ActionButton = (_props) => {
 			children: /* @__PURE__ */ jsx(ActionButton, {
 				px: "xs",
 				...rest,
+				"aria-label": typeof children === "string" ? children : void 0,
 				tooltip,
 				menu,
 				children: leftSection
@@ -833,7 +1753,7 @@ const ActionClickButton = ({ preventDefault, ...props }) => {
 * Action for navigation with active state support.
 */
 const ActionNavigationButton = (props) => {
-	const { active: options, classNameActive, variantActive, propsActive, routerGoOptions, onClick: propsOnClick, anchor, ...buttonProps } = props;
+	const { active: options, classNameActive, variantActive, propsActive, routerGoOptions, onClick: propsOnClick, anchorProps: buttonAnchorProps, anchor, ...buttonProps } = props;
 	const router = useRouter();
 	const { isPending, isActive } = useActive(options ? {
 		href: props.href,
@@ -847,11 +1767,11 @@ const ActionNavigationButton = (props) => {
 	};
 	const className = buttonProps.className || "";
 	if (isActive && options !== false && classNameActive) buttonProps.className = `${className} ${classNameActive}`.trim();
-	if (props.anchorProps || anchor) return /* @__PURE__ */ jsx(Anchor, {
+	if (buttonAnchorProps || anchor) return /* @__PURE__ */ jsx(Anchor, {
 		component: "a",
 		...anchorProps,
 		...buttonProps,
-		...props.anchorProps,
+		...buttonAnchorProps,
 		onClick: combinedOnClick,
 		children: props.children
 	});
@@ -874,11 +1794,43 @@ const ActionHrefButton = (props) => {
 		children: props.children
 	});
 };
+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 ?? (item.active ? /* @__PURE__ */ jsx(IconCheck, { size: ui.sizes.icon.sm }) : /* @__PURE__ */ jsx(Flex, { w: ui.sizes.icon.sm })),
+		onClick: item.onClick,
+		color: item.color,
+		...menuItemProps,
+		children: item.label
+	}, index);
+};
 
 //#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, overflow, ...rest } = props;
 	if (fill) rest.flex ??= 1;
 	if (col) rest.direction ??= "column";
 	if (center) {
@@ -887,6 +1839,21 @@ 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();
+	if (overflow) rest.className = `${rest.className ?? ""} overflow-auto`.trim();
 	return /* @__PURE__ */ jsx(Flex, {
 		ref,
 		...rest
@@ -904,6 +1871,15 @@ const Container$1 = forwardRef((props, ref) => {
 });
 Container$1.displayName = "Container";
 
+//#endregion
+//#region ../../src/core/helpers/renderIcon.tsx
+const renderIcon = (icon, size) => {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: size ?? ui.sizes.icon.md });
+	return icon;
+};
+
 //#endregion
 //#region ../../src/core/components/Text.tsx
 const INTENT_COLORS = {
@@ -920,7 +1896,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";
@@ -938,7 +1914,7 @@ Text$1.displayName = "Text";
 const parseInput = (props, form) => {
 	const disabled = false;
 	const id = props.input.props.id;
-	const label = props.title ?? ("title" in props.input.schema && typeof props.input.schema.title === "string" ? props.input.schema.title : void 0) ?? prettyName(props.input.path);
+	const label = props.label ?? ("title" in props.input.schema && typeof props.input.schema.title === "string" ? props.input.schema.title : void 0) ?? prettyName(props.input.path);
 	const description = props.description ?? ("description" in props.input.schema && typeof props.input.schema.description === "string" ? props.input.schema.description : void 0);
 	const error = form.error && form.error instanceof TypeBoxError ? form.error.value.message : void 0;
 	const icon = !props.icon ? getDefaultIcon({
@@ -946,17 +1922,20 @@ const parseInput = (props, form) => {
 		format: props.input.schema && "format" in props.input.schema && typeof props.input.schema.format === "string" ? props.input.schema.format : void 0,
 		name: props.input.props.name,
 		isEnum: props.input.schema && "enum" in props.input.schema && Boolean(props.input.schema.enum),
-		isArray: props.input.schema && "type" in props.input.schema && props.input.schema.type === "array"
-	}) : isValidElement(props.icon) ? props.icon : createElement(props.icon, { size: ui.sizes.icon.md });
+		isArray: props.input.schema && "type" in props.input.schema && props.input.schema.type === "array",
+		size: props.size
+	}) : isValidElement(props.icon) ? props.icon : createElement(props.icon, { size: ui.sizes.icon.sm });
 	const format = props.input.schema && "format" in props.input.schema && typeof props.input.schema.format === "string" ? props.input.schema.format : void 0;
 	const required = props.input.required;
 	const schema = props.input.schema;
+	const testId = props.input.props?.["data-testid"];
 	const inputProps = {
 		label,
 		description,
 		error,
 		required,
-		disabled
+		disabled,
+		...testId ? { "data-testid": testId } : {}
 	};
 	if ("minLength" in schema && typeof schema.minLength === "number") inputProps.minLength = schema.minLength;
 	if ("maxLength" in schema && typeof schema.maxLength === "number") inputProps.maxLength = schema.maxLength;
@@ -981,8 +1960,8 @@ const useArrayItems = (input) => {
 	const alepha = useAlepha();
 	const keyCounter = useRef(0);
 	const [items, setItemsState] = useState(() => {
-		const defaultValue = input?.props?.defaultValue;
-		if (Array.isArray(defaultValue)) return defaultValue.map((value) => ({
+		const initial = input?.initialValue;
+		if (Array.isArray(initial)) return initial.map((value) => ({
 			key: keyCounter.current++,
 			value
 		}));
@@ -1008,22 +1987,9 @@ const useArrayItems = (input) => {
 		if (!input?.form) return;
 		const formId = input.form.id;
 		const fieldPath = input.path;
-		const listeners = [alepha.events.on("form:reset", (event) => {
-			if (event.id === formId) {
-				const defaultValue = input.props?.defaultValue;
-				keyCounter.current = 0;
-				if (Array.isArray(defaultValue)) setItemsState(defaultValue.map((value) => ({
-					key: keyCounter.current++,
-					value
-				})));
-				else setItemsState([]);
-			}
-		}), alepha.events.on("form:change", (event) => {
+		return alepha.events.on("form:change", (event) => {
 			if (event.id === formId && event.path === fieldPath) syncFromFormValue(event.value);
-		})];
-		return () => {
-			for (const unsub of listeners) unsub();
-		};
+		});
 	}, [
 		alepha,
 		input,
@@ -1048,10 +2014,10 @@ const createArrayItemInput = (parentInput, itemSchema, index, _itemKey, value, o
 		path: `${parentInput.path}/${index}`,
 		required: false,
 		form: parentInput.form,
+		initialValue: value,
 		props: {
 			id: `${parentInput.props.id}-${index}`,
-			name: `${parentInput.props.name}[${index}]`,
-			defaultValue: value
+			name: `${parentInput.props.name}[${index}]`
 		},
 		set: onValueChange
 	};
@@ -1066,10 +2032,10 @@ const createArrayItemFieldInput = (parentInput, itemSchema, fieldName, index, _i
 		path: `${parentInput.path}/${index}/${fieldName}`,
 		required: itemSchema.required?.includes(fieldName) ?? false,
 		form: parentInput.form,
+		initialValue: itemValue?.[fieldName],
 		props: {
 			id: `${parentInput.props.id}-${index}-${fieldName}`,
-			name: `${parentInput.props.name}[${index}].${fieldName}`,
-			defaultValue: itemValue?.[fieldName]
+			name: `${parentInput.props.name}[${index}].${fieldName}`
 		},
 		set: (value) => onFieldChange(fieldName, value)
 	};
@@ -1287,7 +2253,9 @@ const ControlArray = (props) => {
 * Automatically detects date formats from schema and renders appropriate picker.
 */
 const ControlDate = (props) => {
-	const { inputProps, id, icon, format } = parseInput(props, useFormState(props.input));
+	const form = useFormState(props.input);
+	const [value, setValue] = useFieldValue(props.input);
+	const { inputProps, id, icon, format } = parseInput(props, form);
 	if (!props.input?.props) return null;
 	if (props.datetime || format === "date-time") {
 		const dateTimePickerProps = typeof props.datetime === "object" ? props.datetime : {};
@@ -1295,10 +2263,8 @@ const ControlDate = (props) => {
 			...inputProps,
 			id,
 			leftSection: icon,
-			defaultValue: props.input.props.defaultValue ? new Date(props.input.props.defaultValue) : void 0,
-			onChange: (value) => {
-				props.input.set(value ? new Date(value).toISOString() : void 0);
-			},
+			value: value ? new Date(value) : null,
+			onChange: (val) => setValue(val ? new Date(val).toISOString() : void 0),
 			...dateTimePickerProps
 		});
 	}
@@ -1308,10 +2274,8 @@ const ControlDate = (props) => {
 			...inputProps,
 			id,
 			leftSection: icon,
-			defaultValue: props.input.props.defaultValue ? new Date(props.input.props.defaultValue) : void 0,
-			onChange: (value) => {
-				props.input.set(value ? new Date(value).toISOString().slice(0, 10) : void 0);
-			},
+			value: value ? new Date(value) : null,
+			onChange: (val) => setValue(val ? new Date(val).toISOString().slice(0, 10) : void 0),
 			...dateInputProps
 		});
 	}
@@ -1321,10 +2285,8 @@ const ControlDate = (props) => {
 			...inputProps,
 			id,
 			leftSection: icon,
-			defaultValue: props.input.props.defaultValue,
-			onChange: (event) => {
-				props.input.set(event.currentTarget.value);
-			},
+			value: value ?? "",
+			onChange: (event) => setValue(event.currentTarget.value),
 			...timeInputProps
 		});
 	}
@@ -1337,14 +2299,10 @@ const ControlDate = (props) => {
 *
 */
 const ControlNumber = (props) => {
-	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
-	const ref = useRef(null);
-	const [value, setValue] = useState(props.input.props.defaultValue);
-	useEvents({ "form:reset": (event) => {
-		if (event.id === props.input?.form.id && ref.current) setValue(props.input.props.defaultValue);
-	} }, [props.input]);
+	const form = useFormState(props.input);
+	const [value, setValue] = useFieldValue(props.input);
+	const { inputProps, id, icon } = parseInput(props, form);
 	if (!props.input?.props) return null;
-	const { type, ...inputPropsWithoutType } = props.input.props;
 	if (props.sliderProps) {
 		const min = props.sliderProps.min ?? inputProps.minimum ?? 0;
 		const max = props.sliderProps.max ?? inputProps.maximum ?? 100;
@@ -1357,34 +2315,25 @@ const ControlNumber = (props) => {
 				},
 				children: /* @__PURE__ */ jsx(Slider, {
 					...inputProps,
-					ref,
 					id,
-					...inputPropsWithoutType,
 					...props.sliderProps,
-					value,
+					value: value ?? 0,
 					min,
 					max,
 					label: () => value,
-					onChange: (val) => {
-						setValue(val);
-						props.input.set(val);
-					}
+					onChange: (val) => setValue(val)
 				})
 			})
 		});
 	}
 	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);
+			setValue(val !== null ? Number(val) : void 0);
 		}
 	});
 };
@@ -1467,92 +2416,9 @@ const ControlObject = (props) => {
 };
 
 //#endregion
-//#region ../../src/core/form/components/ControlQueryBuilder.tsx
-/**
-* Query builder with text input and help popover.
-* Generates query strings for parseQueryString syntax.
-*/
-const ControlQueryBuilder = ({ schema, value = "", onChange, placeholder = "Enter query or click for assistance...", ...textInputProps }) => {
-	const [helpOpened, setHelpOpened] = useState(false);
-	const [textValue, setTextValue] = useState(value);
-	const inputRef = useRef(null);
-	const fields = schema ? extractSchemaFields(schema) : [];
-	const [error, setError] = useState(null);
-	const isValid = (value) => {
-		try {
-			parseQueryString(value.trim());
-		} catch (e) {
-			setError(e.message);
-			return false;
-		}
-		setError(null);
-		return true;
-	};
-	const handleTextChange = (newValue) => {
-		setTextValue(newValue);
-		if (isValid(newValue)) onChange?.(newValue);
-	};
-	const handleClear = () => {
-		setTextValue("");
-		onChange?.("");
-		isValid("");
-	};
-	const handleInsert = (text) => {
-		const newValue = textValue ? `${textValue}${text} ` : `${text} `;
-		setTextValue(newValue);
-		if (isValid(newValue)) onChange?.(newValue);
-		setTimeout(() => {
-			inputRef.current?.focus();
-			const length = inputRef.current?.value.length || 0;
-			inputRef.current?.setSelectionRange(length, length);
-		}, 0);
-	};
-	useEvents({ "form:change": (event) => {
-		if (event.id === inputRef.current?.form?.id) {
-			if (event.path === textInputProps["data-path"]) setTextValue(event.value ?? "");
-		}
-	} }, []);
-	return /* @__PURE__ */ jsxs(Popover, {
-		width: 800,
-		position: "bottom-start",
-		shadow: "md",
-		opened: helpOpened,
-		onChange: setHelpOpened,
-		closeOnClickOutside: true,
-		closeOnEscape: true,
-		transitionProps: {
-			transition: "fade-up",
-			duration: 200,
-			timingFunction: "ease"
-		},
-		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(TextInput, {
-			ref: inputRef,
-			placeholder,
-			value: textValue,
-			onChange: (e) => handleTextChange(e.currentTarget.value),
-			onFocus: () => setHelpOpened(true),
-			leftSection: error ? /* @__PURE__ */ jsx(IconInfoTriangle, { size: 16 }) : /* @__PURE__ */ jsx(IconFilter, { size: 16 }),
-			rightSection: textValue && /* @__PURE__ */ jsx(ActionIcon, {
-				size: "sm",
-				variant: "subtle",
-				color: "gray",
-				onClick: handleClear,
-				children: /* @__PURE__ */ jsx(IconX, { size: 14 })
-			}),
-			...textInputProps
-		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
-			bg: "transparent",
-			p: "xs",
-			bd: `1px solid ${ui.colors.border}`,
-			style: { backdropFilter: "blur(20px)" },
-			children: /* @__PURE__ */ jsx(QueryHelp, {
-				fields,
-				onInsert: handleInsert
-			})
-		})]
-	});
-};
-function QueryHelp({ fields, onInsert }) {
+//#region ../../src/core/form/components/ControlQueryBuilderHelp.tsx
+const ControlQueryBuilderHelp = (props) => {
+	const { fields, onInsert } = props;
 	return /* @__PURE__ */ jsxs(Flex, {
 		gap: "md",
 		align: "flex-start",
@@ -1715,111 +2581,314 @@ function QueryHelp({ fields, onInsert }) {
 			})
 		]
 	});
-}
+};
+
+//#endregion
+//#region ../../src/core/form/components/ControlQueryBuilder.tsx
+/**
+* Query builder with text input and help popover.
+* Generates query strings for parseQueryString syntax.
+*/
+const ControlQueryBuilder = (props) => {
+	const { schema, value = "", onChange, placeholder = "Enter query or click for assistance...", ...textInputProps } = props;
+	const [helpOpened, setHelpOpened] = useState(false);
+	const [textValue, setTextValue] = useState(value);
+	const inputRef = useRef(null);
+	const fields = schema ? extractSchemaFields(schema) : [];
+	const [error, setError] = useState(null);
+	const isValid = (value) => {
+		try {
+			parseQueryString(value.trim());
+		} catch (e) {
+			setError(e.message);
+			return false;
+		}
+		setError(null);
+		return true;
+	};
+	const handleTextChange = (newValue) => {
+		setTextValue(newValue);
+		if (isValid(newValue)) onChange?.(newValue);
+	};
+	const handleClear = () => {
+		setTextValue("");
+		onChange?.("");
+		isValid("");
+	};
+	const handleInsert = (text) => {
+		const newValue = textValue ? `${textValue}${text} ` : `${text} `;
+		setTextValue(newValue);
+		if (isValid(newValue)) onChange?.(newValue);
+		setTimeout(() => {
+			inputRef.current?.focus();
+			const length = inputRef.current?.value.length || 0;
+			inputRef.current?.setSelectionRange(length, length);
+		}, 0);
+	};
+	useEvents({ "form:change": (event) => {
+		if (event.id === inputRef.current?.form?.id) {
+			if (event.path === textInputProps["data-path"]) setTextValue(event.value ?? "");
+		}
+	} }, []);
+	return /* @__PURE__ */ jsxs(Popover, {
+		width: 800,
+		position: "bottom-start",
+		shadow: "md",
+		opened: helpOpened,
+		onChange: setHelpOpened,
+		closeOnClickOutside: true,
+		closeOnEscape: true,
+		transitionProps: {
+			transition: "fade-up",
+			duration: 200,
+			timingFunction: "ease"
+		},
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(TextInput, {
+			ref: inputRef,
+			placeholder,
+			value: textValue,
+			onChange: (e) => handleTextChange(e.currentTarget.value),
+			onFocus: () => setHelpOpened(true),
+			leftSection: error ? /* @__PURE__ */ jsx(IconInfoTriangle, { size: 16 }) : /* @__PURE__ */ jsx(IconFilter, { size: 16 }),
+			rightSection: textValue && /* @__PURE__ */ jsx(ActionIcon, {
+				size: "sm",
+				variant: "subtle",
+				color: "gray",
+				onClick: handleClear,
+				children: /* @__PURE__ */ jsx(IconX, { size: 14 })
+			}),
+			...textInputProps
+		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
+			bg: "transparent",
+			p: "xs",
+			bd: `1px solid ${ui.colors.border}`,
+			style: { backdropFilter: "blur(20px)" },
+			children: /* @__PURE__ */ jsx(ControlQueryBuilderHelp, {
+				fields,
+				onInsert: handleInsert
+			})
+		})]
+	});
+};
 
 //#endregion
 //#region ../../src/core/form/components/ControlSelect.tsx
 /**
-* ControlSelect component for handling Select, MultiSelect, and TagsInput.
+* ControlSelect component for handling Select, MultiSelect, Autocomplete, and TagsInput.
 *
 * Features:
 * - Basic Select with enum support
 * - MultiSelect for array of enums
-* - TagsInput for array of strings (no enum)
-* - Future: Lazy loading
-* - Future: Searchable/filterable options
-* - Future: Custom option rendering
+* - Autocomplete for creatable single values
+* - TagsInput for creatable array values
+* - Async lazy loading with auto short/long mode detection
+* - Short mode: client-side filtering with cached data
+* - Long mode: debounced server search
 *
 * Automatically detects enum values and array types from schema.
 */
 const ControlSelect = (props) => {
-	const { inputProps, id, icon } = parseInput(props, useFormState(props.input));
+	const form = useFormState(props.input);
+	const [value, setValue] = useFieldValue(props.input);
+	const { inputProps, id, icon } = parseInput(props, form);
 	const isArray = props.input.schema && "type" in props.input.schema && props.input.schema.type === "array";
-	let itemsEnum;
-	if (isArray && "items" in props.input.schema && props.input.schema.items) {
-		const items = props.input.schema.items;
-		if ("enum" in items && Array.isArray(items.enum)) itemsEnum = items.enum;
-	}
+	const isNumeric = props.input.schema && "type" in props.input.schema && (props.input.schema.type === "integer" || props.input.schema.type === "number");
+	const isBoolean = props.input.schema && "type" in props.input.schema && props.input.schema.type === "boolean";
 	const enumValues = props.input.schema && "enum" in props.input.schema && Array.isArray(props.input.schema.enum) ? props.input.schema.enum : [];
-	const [data, setData] = useState([]);
+	const { data: asyncData, loading, mode, search } = useAsyncLoader(props.loader, props.loaderThreshold ?? 100, props.loaderDebounce ?? 300, props.input.initialValue);
+	const [staticData, setStaticData] = useState([]);
+	const enumKey = JSON.stringify(enumValues);
 	useEffect(() => {
-		if (!props.input?.props) return;
-		if (props.loader) props.loader().then(setData);
-		else setData(enumValues);
-	}, [props.input, props.loader]);
+		if (!props.input?.props || props.loader) return;
+		if (isBoolean && enumValues.length === 0) setStaticData([{
+			value: "true",
+			label: "True"
+		}, {
+			value: "false",
+			label: "False"
+		}]);
+		else setStaticData(enumValues);
+	}, [
+		props.input,
+		props.loader,
+		enumKey,
+		isBoolean
+	]);
+	const data = props.loader ? asyncData : staticData;
 	if (!props.input?.props) return null;
-	if (props.segmented) {
-		const segmentedControlProps = typeof props.segmented === "object" ? props.segmented : {};
+	/**
+	* Coerce value for numeric schemas — Select values are always strings.
+	*/
+	const coerceValue = (val) => {
+		if (val == null) return val;
+		if (isNumeric) return Number(val);
+		if (isBoolean) return val === "true";
+		return val;
+	};
+	if (props.segmentedProps) {
+		const segmentedControlProps = typeof props.segmentedProps === "object" ? props.segmentedProps : {};
+		const segmentedData = segmentedControlProps.data ?? data.slice(0, 10);
 		return /* @__PURE__ */ jsx(Input.Wrapper, {
 			...inputProps,
-			children: /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(SegmentedControl, {
-				disabled: inputProps.disabled,
-				defaultValue: String(props.input.props.defaultValue),
-				...segmentedControlProps,
-				onChange: (value) => {
-					props.input.set(value);
-				},
-				data: data.slice(0, 10)
-			}) })
+			children: /* @__PURE__ */ jsx(Flex, {
+				my: "calc(var(--mantine-spacing-xs) / 2)",
+				children: /* @__PURE__ */ jsx(SegmentedControl, {
+					disabled: inputProps.disabled,
+					value: value != null ? String(value) : "",
+					...segmentedControlProps,
+					onChange: (val) => {
+						setValue(coerceValue(val));
+					},
+					data: segmentedData
+				})
+			})
 		});
 	}
-	if (props.autocomplete) {
-		const autocompleteProps = typeof props.autocomplete === "object" ? props.autocomplete : {};
-		return /* @__PURE__ */ jsx(Autocomplete, {
+	const sharedProps = {
+		size: props.size,
+		id,
+		leftSection: loading ? /* @__PURE__ */ jsx(Loader, {
+			color: "gray",
+			size: 10
+		}) : icon,
+		data
+	};
+	const selectableProps = {
+		...sharedProps,
+		searchable: true,
+		rightSection: /* @__PURE__ */ jsx("span", {})
+	};
+	const longModeProps = mode === "long" ? {
+		filter: ({ options }) => options,
+		onSearchChange: search.run
+	} : {};
+	if (props.creatable && (isArray || props.tagsInputProps)) {
+		const tagsInputExtraProps = props.tagsInputProps ?? {};
+		return /* @__PURE__ */ jsx(TagsInput, {
 			...inputProps,
-			size: props.size,
-			id,
-			leftSection: icon,
-			data,
-			...props.input.props,
-			...autocompleteProps
+			...sharedProps,
+			...longModeProps,
+			value: Array.isArray(value) ? value : [],
+			onChange: (val) => {
+				setValue(val);
+			},
+			...tagsInputExtraProps
 		});
 	}
-	if (isArray && !itemsEnum || props.tags) {
-		const tagsInputProps = typeof props.tags === "object" ? props.tags : {};
-		return /* @__PURE__ */ jsx(TagsInput, {
+	if (props.creatable) {
+		const autocompleteExtraProps = props.autocompleteProps ?? {};
+		return /* @__PURE__ */ jsx(Autocomplete, {
 			...inputProps,
-			size: props.size,
-			id,
-			leftSection: icon,
-			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
-			onChange: (value) => {
-				props.input.set(value);
+			...sharedProps,
+			...longModeProps,
+			value: value != null ? String(value) : "",
+			onChange: (val) => {
+				setValue(coerceValue(val));
 			},
-			...tagsInputProps
+			...autocompleteExtraProps
 		});
 	}
-	if (isArray && itemsEnum || props.multi) {
-		const data = itemsEnum?.map((value) => ({
-			value,
-			label: value
-		})) || [];
-		const multiSelectProps = typeof props.multi === "object" ? props.multi : {};
+	if (isArray || props.multiSelectProps) {
+		const multiSelectExtraProps = typeof props.multiSelectProps === "object" ? props.multiSelectProps : {};
 		return /* @__PURE__ */ jsx(MultiSelect, {
 			...inputProps,
-			size: props.size,
-			id,
-			leftSection: icon,
-			data,
-			defaultValue: Array.isArray(props.input.props.defaultValue) ? props.input.props.defaultValue : [],
-			onChange: (value) => {
-				props.input.set(value);
+			...selectableProps,
+			...longModeProps,
+			value: Array.isArray(value) ? value : [],
+			onChange: (val) => {
+				setValue(val);
 			},
-			...multiSelectProps
+			...multiSelectExtraProps
 		});
 	}
-	const selectProps = typeof props.select === "object" ? props.select : {};
+	const selectExtraProps = typeof props.selectProps === "object" ? props.selectProps : {};
+	if (mode === "static") return /* @__PURE__ */ jsx(Select, {
+		...inputProps,
+		...selectableProps,
+		value: value != null ? String(value) : null,
+		onChange: (val) => {
+			setValue(coerceValue(val));
+		},
+		...selectExtraProps
+	});
 	return /* @__PURE__ */ jsx(Select, {
 		...inputProps,
-		size: props.size,
-		id,
-		leftSection: icon,
-		rightSection: null,
-		data,
-		...props.input.props,
-		...selectProps
+		...selectableProps,
+		...longModeProps,
+		value: value != null ? String(value) : null,
+		onChange: (val) => {
+			setValue(coerceValue(val));
+		},
+		...selectExtraProps
 	});
 };
+/**
+* Hook for async select data loading with auto short/long mode detection.
+*/
+const useAsyncLoader = (loader, threshold, debounceMs, defaultValue) => {
+	const [data, setData] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [mode, setMode] = useState("static");
+	const cache = useRef(/* @__PURE__ */ new Map());
+	useAction({
+		name: "select:loader:init",
+		runOnInit: true,
+		handler: async () => {
+			if (!loader) {
+				setMode("static");
+				return;
+			}
+			setLoading(true);
+			try {
+				const result = await loader("");
+				const isShort = result.length <= threshold;
+				setMode(isShort ? "short" : "long");
+				cache.current.set("", result);
+				setData(result);
+				if (!isShort && defaultValue != null && String(defaultValue) !== "") {
+					const resolved = await loader("", [String(defaultValue)]);
+					if (resolved.length > 0) setData((prev) => {
+						const existing = new Set(prev.map((d) => typeof d === "string" ? d : d.value));
+						const newItems = resolved.filter((r) => {
+							const val = typeof r === "string" ? r : r.value;
+							return !existing.has(val);
+						});
+						return [...prev, ...newItems];
+					});
+				}
+			} finally {
+				setLoading(false);
+			}
+		}
+	}, [loader, threshold]);
+	return {
+		data,
+		loading,
+		mode,
+		search: useAction({
+			debounce: debounceMs,
+			handler: async (text) => {
+				if (!loader || mode !== "long") return;
+				if (cache.current.has(text)) {
+					setData(cache.current.get(text));
+					return;
+				}
+				setLoading(true);
+				try {
+					const result = await loader(text);
+					cache.current.set(text, result);
+					setData(result);
+				} finally {
+					setLoading(false);
+				}
+			}
+		}, [
+			loader,
+			mode,
+			debounceMs
+		])
+	};
+};
 
 //#endregion
 //#region ../../src/core/form/components/Control.tsx
@@ -1849,6 +2918,7 @@ const ControlSelect = (props) => {
 */
 const Control = (_props) => {
 	const form = useFormState(_props.input, ["error"]);
+	const [value, setValue] = useFieldValue(_props.input);
 	if (!_props.input?.props) return null;
 	const { inputProps, id, icon, format, schema } = parseInput(_props, form);
 	const props = {
@@ -1856,12 +2926,11 @@ const Control = (_props) => {
 		...schema.$control
 	};
 	if (props.query) return /* @__PURE__ */ jsx(ControlQueryBuilder, {
-		...props.input.props,
 		...inputProps,
 		schema: props.query,
-		value: props.input.props.value,
-		onChange: (value) => {
-			props.input.set(value);
+		value,
+		onChange: (val) => {
+			setValue(val);
 		}
 	});
 	if (props.custom) {
@@ -1872,9 +2941,9 @@ const Control = (_props) => {
 				flex: 1,
 				mt: "calc(var(--mantine-spacing-xs) / 2)",
 				children: /* @__PURE__ */ jsx(Custom, {
-					defaultValue: props.input.props.defaultValue,
-					onChange: (value) => {
-						props.input.set(value);
+					value,
+					onChange: (val) => {
+						setValue(val);
 					}
 				})
 			})
@@ -1885,7 +2954,7 @@ const Control = (_props) => {
 		const controlObjectProps = typeof props.object === "object" ? props.object : {};
 		return /* @__PURE__ */ jsx(ControlObject, {
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			...controlObjectProps
 		});
@@ -1896,18 +2965,18 @@ const Control = (_props) => {
 		const controlArrayProps = typeof props.array === "object" ? props.array : {};
 		return /* @__PURE__ */ jsx(ControlArray, {
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			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")) {
+	if (props.number || !props.select && 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 : {};
 		if (props.slider) controlNumberProps.sliderProps ??= {};
 		return /* @__PURE__ */ jsx(ControlNumber, {
 			size: props.size,
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			icon,
 			...controlNumberProps
@@ -1920,9 +2989,7 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			onChange: (file) => {
-				props.input.set(file);
-			},
+			onChange: (file) => setValue(file),
 			...fileInputProps
 		});
 	}
@@ -1933,17 +3000,18 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			...props.input.props,
+			value: value ?? "",
+			onChange: (val) => setValue(val),
 			...colorInputProps
 		});
 	}
 	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 : {};
-		if (props.segmented) opts.segmented ??= {};
+		if (props.segmented) opts.segmentedProps ??= {};
 		return /* @__PURE__ */ jsx(ControlSelect, {
 			size: props.size,
 			input: props.input,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			icon,
 			...opts
@@ -1957,16 +3025,16 @@ const Control = (_props) => {
 				size: props.size,
 				id,
 				color: "blue",
-				defaultChecked: props.input.props.defaultValue,
+				checked: Boolean(value),
 				onChange: (event) => {
-					props.input.set(event.currentTarget.checked);
+					setValue(event.currentTarget.checked);
 				},
 				...switchProps
 			});
 		}
 		const opts = {
 			input: props.input,
-			select: { data: [{
+			selectProps: { data: [{
 				value: "true",
 				label: "Yes"
 			}, {
@@ -1976,7 +3044,7 @@ const Control = (_props) => {
 		};
 		return /* @__PURE__ */ jsx(ControlSelect, {
 			size: props.size,
-			title: props.title,
+			label: props.label,
 			description: props.description,
 			icon,
 			...opts
@@ -1989,7 +3057,8 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			...props.input.props,
+			value: value ?? "",
+			onChange: (ev) => setValue(ev.target.value),
 			...passwordInputProps
 		});
 	}
@@ -2000,14 +3069,15 @@ const Control = (_props) => {
 			size: props.size,
 			id,
 			leftSection: icon,
-			...props.input.props,
+			value: value ?? "",
+			onChange: (ev) => setValue(ev.target.value),
 			...textAreaProps
 		});
 	}
 	if (props.date || props.datetime || props.time || format === "date" || format === "date-time" || format === "time") return /* @__PURE__ */ jsx(ControlDate, {
 		size: props.size,
 		input: props.input,
-		title: props.title,
+		label: props.label,
 		description: props.description,
 		icon,
 		date: props.date,
@@ -2022,7 +3092,7 @@ const Control = (_props) => {
 			case "uri": return "url";
 			case "tel":
 			case "phone": return "tel";
-			default: return;
+			default: return props.input.props.type ?? "text";
 		}
 	};
 	return /* @__PURE__ */ jsx(TextInput, {
@@ -2031,26 +3101,12 @@ const Control = (_props) => {
 		id,
 		leftSection: icon,
 		type: getInputType(),
-		...props.input.props,
-		...textInputProps,
-		inputWrapperOrder: [
-			"label",
-			"input",
-			"description",
-			"error"
-		]
+		value: value ?? "",
+		onChange: (ev) => setValue(ev.target.value),
+		...textInputProps
 	});
 };
 
-//#endregion
-//#region ../../src/core/helpers/renderIcon.tsx
-const renderIcon = (icon, size) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: size ?? ui.sizes.icon.md });
-	return icon;
-};
-
 //#endregion
 //#region ../../src/core/utils/extractSchemaFields.ts
 /**
@@ -2146,8 +3202,8 @@ const OPERATOR_INFO = {
 * Get the default icon for an input based on its type, format, or name.
 */
 const getDefaultIcon = (params) => {
-	const { type, format, name, isEnum, isArray, size = "sm" } = params;
-	const iconSize = ui.sizes.icon[size];
+	const { type, format, name, isEnum, isArray, size = "xs" } = params;
+	const iconSize = ui.sizes.icon[size] - 4;
 	if (format) switch (format) {
 		case "email": return /* @__PURE__ */ jsx(IconMail, { size: iconSize });
 		case "url":
@@ -2261,4 +3317,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-D5jIAVF2.js.map