@alepha/ui 0.11.6 → 0.11.7

package/dist/index.js

@@ -1,16 +1,17 @@
-import { i as ToastService, n as Omnibar_default, r as useToast, t as AlephaMantineProvider_default } from "./AlephaMantineProvider-Be0DAazb.js";
-import { $module, TypeBoxError, t } from "@alepha/core";
+import { i as ToastService, n as Omnibar_default, r as useToast, t as AlephaMantineProvider_default } from "./AlephaMantineProvider-CzMrw7V3.js";
+import { $module, Alepha, TypeBoxError, t } from "@alepha/core";
 import { AlephaReactForm, useForm, useFormState } from "@alepha/react-form";
 import { AlephaReactHead } from "@alepha/react-head";
 import { AlephaReactI18n, useI18n } from "@alepha/react-i18n";
 import { $page, NestedView, useAction, useActive, useEvents, useInject, useRouter, useStore } from "@alepha/react";
+import { ActionIcon, AppShell, Autocomplete, Badge, Box, Burger, Button, Collapse, ColorInput, CopyButton, Divider, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import { ActionIcon, AppShell, Autocomplete, Badge, Burger, Button, Code, ColorInput, Divider, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClock, IconColorPicker, IconCopy, IconFile, IconFilter, IconHash, IconInfoTriangle, IconKey, IconLanguage, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconX } from "@tabler/icons-react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { IconAt, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClock, IconColorPicker, IconFile, IconFilter, IconHash, IconKey, IconLanguage, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft, IconX } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { spotlight } from "@mantine/spotlight";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
+import { parseQueryString } from "@alepha/postgres";
 import { DateTimeProvider } from "@alepha/datetime";
 import { useDebouncedCallback } from "@mantine/hooks";
 
@@ -18,9 +19,297 @@ import { useDebouncedCallback } from "@mantine/hooks";
 var RootRouter = class {
 	root = $page({
 		path: "/",
-		lazy: () => import("./AlephaMantineProvider-Ba88lMeq.js")
+		lazy: () => import("./AlephaMantineProvider-B4TwQ4tY.js")
+	});
+};
+
+//#endregion
+//#region src/components/data/JsonViewer.tsx
+const getSizeConfig = (size = "sm") => {
+	const configs = {
+		xs: {
+			text: "xs",
+			icon: 12,
+			indent: 16,
+			gap: 2
+		},
+		sm: {
+			text: "sm",
+			icon: 14,
+			indent: 20,
+			gap: 4
+		},
+		md: {
+			text: "md",
+			icon: 16,
+			indent: 24,
+			gap: 6
+		},
+		lg: {
+			text: "lg",
+			icon: 18,
+			indent: 28,
+			gap: 8
+		},
+		xl: {
+			text: "xl",
+			icon: 20,
+			indent: 32,
+			gap: 10
+		}
+	};
+	return configs[size] || configs.sm;
+};
+const JsonNode = ({ name, value, depth, maxDepth, isLast = false, isArrayItem = false, size = "sm" }) => {
+	const [expanded, setExpanded] = useState(depth < 2);
+	const sizeConfig = getSizeConfig(size);
+	const getValueType = (val) => {
+		if (val === null) return "null";
+		if (val === void 0) return "undefined";
+		if (Array.isArray(val)) return "array";
+		return typeof val;
+	};
+	const valueType = getValueType(value);
+	const renderPrimitive = (val) => {
+		switch (getValueType(val)) {
+			case "string": return /* @__PURE__ */ jsxs(Text$1, {
+				component: "span",
+				c: "teal",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: [
+					"\"",
+					val,
+					"\""
+				]
+			});
+			case "number": return /* @__PURE__ */ jsx(Text$1, {
+				component: "span",
+				c: "blue",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: val
+			});
+			case "boolean": return /* @__PURE__ */ jsx(Text$1, {
+				component: "span",
+				c: "violet",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: String(val)
+			});
+			case "null": return /* @__PURE__ */ jsx(Text$1, {
+				component: "span",
+				c: "dimmed",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: "null"
+			});
+			case "undefined": return /* @__PURE__ */ jsx(Text$1, {
+				component: "span",
+				c: "dimmed",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: "undefined"
+			});
+			default: return /* @__PURE__ */ jsx(Text$1, {
+				component: "span",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { whiteSpace: "nowrap" },
+				children: String(val)
+			});
+		}
+	};
+	const renderKey = () => {
+		if (!name) return null;
+		return /* @__PURE__ */ jsxs(Text$1, {
+			component: "span",
+			c: "cyan",
+			ff: "monospace",
+			fw: 500,
+			size: sizeConfig.text,
+			children: [isArrayItem ? `[${name}]` : `"${name}"`, ":"]
+		});
+	};
+	if (valueType === "object" || valueType === "array") {
+		const isObject = valueType === "object";
+		const entries = isObject ? Object.entries(value) : value.map((v, i) => [i, v]);
+		const isEmpty = entries.length === 0;
+		const canExpand = depth < maxDepth && !isEmpty;
+		const preview = isObject ? "{...}" : "[...]";
+		const brackets = isObject ? ["{", "}"] : ["[", "]"];
+		return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Box, {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: sizeConfig.gap,
+				minWidth: "max-content"
+			},
+			children: [
+				canExpand && /* @__PURE__ */ jsx(ActionIcon, {
+					size: "xs",
+					variant: "transparent",
+					c: "dimmed",
+					onClick: () => setExpanded(!expanded),
+					style: {
+						cursor: "pointer",
+						flexShrink: 0
+					},
+					children: expanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: sizeConfig.icon }) : /* @__PURE__ */ jsx(IconChevronRight, { size: sizeConfig.icon })
+				}),
+				!canExpand && /* @__PURE__ */ jsx(Box, {
+					w: sizeConfig.icon + 6,
+					style: { flexShrink: 0 }
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					style: { flexShrink: 0 },
+					children: renderKey()
+				}),
+				" ",
+				/* @__PURE__ */ jsx(Text$1, {
+					component: "span",
+					c: "dimmed",
+					ff: "monospace",
+					size: sizeConfig.text,
+					style: { flexShrink: 0 },
+					children: brackets[0]
+				}),
+				!expanded && !isEmpty && /* @__PURE__ */ jsx(Text$1, {
+					component: "span",
+					c: "dimmed",
+					ff: "monospace",
+					fs: "italic",
+					size: sizeConfig.text,
+					style: { flexShrink: 0 },
+					children: preview
+				}),
+				(isEmpty || !expanded) && /* @__PURE__ */ jsx(Text$1, {
+					component: "span",
+					c: "dimmed",
+					ff: "monospace",
+					size: sizeConfig.text,
+					style: { flexShrink: 0 },
+					children: brackets[1]
+				}),
+				!isEmpty && !expanded && /* @__PURE__ */ jsxs(Text$1, {
+					component: "span",
+					c: "dimmed",
+					size: sizeConfig.text,
+					style: { flexShrink: 0 },
+					children: [
+						entries.length,
+						" ",
+						entries.length === 1 ? "item" : "items"
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsxs(Collapse, {
+			in: expanded && canExpand,
+			children: [/* @__PURE__ */ jsx(Box, {
+				pl: sizeConfig.indent,
+				style: {
+					borderLeft: "1px solid var(--mantine-color-default-border)",
+					marginLeft: Math.floor((sizeConfig.icon + 6) / 2)
+				},
+				children: entries.map(([key, val], index) => /* @__PURE__ */ jsx(JsonNode, {
+					name: String(key),
+					value: val,
+					depth: depth + 1,
+					maxDepth,
+					isLast: index === entries.length - 1,
+					isArrayItem: !isObject,
+					size
+				}, String(key)))
+			}), /* @__PURE__ */ jsxs(Box, {
+				style: {
+					display: "flex",
+					minWidth: "max-content"
+				},
+				children: [/* @__PURE__ */ jsx(Box, {
+					w: sizeConfig.icon + 6,
+					style: { flexShrink: 0 }
+				}), /* @__PURE__ */ jsx(Text$1, {
+					c: "dimmed",
+					ff: "monospace",
+					size: sizeConfig.text,
+					style: { flexShrink: 0 },
+					children: brackets[1]
+				})]
+			})]
+		})] });
+	}
+	return /* @__PURE__ */ jsxs(Box, {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: sizeConfig.gap,
+			minWidth: "max-content"
+		},
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				w: sizeConfig.icon + 6,
+				style: { flexShrink: 0 }
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				style: { flexShrink: 0 },
+				children: renderKey()
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				style: { flexShrink: 0 },
+				children: renderPrimitive(value)
+			}),
+			!isLast && /* @__PURE__ */ jsx(Text$1, {
+				component: "span",
+				c: "dimmed",
+				ff: "monospace",
+				size: sizeConfig.text,
+				style: { flexShrink: 0 },
+				children: ","
+			})
+		]
+	});
+};
+const JsonViewer = ({ data, defaultExpanded = true, maxDepth = 10, copyable = true, size = "sm" }) => {
+	const copyIconSize = getSizeConfig(size).icon + 2;
+	return /* @__PURE__ */ jsxs(Box, {
+		pos: "relative",
+		w: "100%",
+		children: [copyable && /* @__PURE__ */ jsx(Box, {
+			pos: "absolute",
+			top: 0,
+			right: 0,
+			style: { zIndex: 1 },
+			children: /* @__PURE__ */ jsx(CopyButton, {
+				value: JSON.stringify(data, null, 2),
+				children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, {
+					label: copied ? "Copied" : "Copy JSON",
+					children: /* @__PURE__ */ jsx(ActionIcon, {
+						color: copied ? "teal" : "gray",
+						variant: "subtle",
+						onClick: copy,
+						size,
+						children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: copyIconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: copyIconSize })
+					})
+				})
+			})
+		}), /* @__PURE__ */ jsx(Box, {
+			pt: copyable ? 30 : 0,
+			style: { overflowX: "auto" },
+			children: /* @__PURE__ */ jsx(JsonNode, {
+				value: data,
+				depth: 0,
+				maxDepth,
+				size
+			})
+		})]
 	});
 };
+var JsonViewer_default = JsonViewer;
 
 //#endregion
 //#region src/components/dialogs/AlertDialog.tsx
@@ -100,6 +389,16 @@ const PromptDialog = ({ options, onSubmit }) => {
 };
 var PromptDialog_default = PromptDialog;
 
+//#endregion
+//#region src/constants/ui.ts
+const ui = { colors: {
+	transparent: "transparent",
+	background: "var(--alepha-background)",
+	surface: "var(--alepha-surface)",
+	elevated: "var(--alepha-elevated)",
+	border: "var(--alepha-border)"
+} };
+
 //#endregion
 //#region src/services/DialogService.tsx
 var DialogService = class {
@@ -194,7 +493,24 @@ var DialogService = class {
 	/**
 	* Show a JSON editor/viewer dialog
 	*/
-	json(data, options) {}
+	json(data, options) {
+		this.open({
+			size: "lg",
+			title: options?.title || "Json Viewer",
+			...options,
+			content: /* @__PURE__ */ jsx(Flex$1, {
+				bdrs: "md",
+				w: "100%",
+				flex: 1,
+				p: "sm",
+				bg: ui.colors.surface,
+				children: /* @__PURE__ */ jsx(JsonViewer_default, {
+					size: "xs",
+					data
+				})
+			})
+		});
+	}
 	/**
 	* Show a form dialog for structured input
 	*/
@@ -255,7 +571,7 @@ const ActionButton = (_props) => {
 		variant: "subtle",
 		..._props
 	};
-	const { tooltip, menu, icon,...restProps } = props;
+	const { tooltip, menu, icon, ...restProps } = props;
 	if (props.icon) {
 		const icon$1 = /* @__PURE__ */ jsx(ThemeIcon, {
 			w: 24,
@@ -275,7 +591,7 @@ const ActionButton = (_props) => {
 		restProps.p ??= "xs";
 	}
 	if (props.textVisibleFrom) {
-		const { children, textVisibleFrom, leftSection,...rest } = restProps;
+		const { children, textVisibleFrom, leftSection, ...rest } = restProps;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex$1, {
 			w: "100%",
 			visibleFrom: textVisibleFrom,
@@ -375,7 +691,7 @@ var ActionButton_default = ActionButton;
 * Action button that submits a form with loading and disabled state handling.
 */
 const ActionSubmitButton = (props) => {
-	const { form,...buttonProps } = props;
+	const { form, ...buttonProps } = props;
 	const state = useFormState(form);
 	return /* @__PURE__ */ jsx(Button, {
 		...buttonProps,
@@ -386,7 +702,7 @@ const ActionSubmitButton = (props) => {
 	});
 };
 const ActionResetButton = (props) => {
-	const { form,...buttonProps } = props;
+	const { form, ...buttonProps } = props;
 	const state = useFormState(form);
 	return /* @__PURE__ */ jsx(Button, {
 		...buttonProps,
@@ -413,7 +729,7 @@ const ActionResetButton = (props) => {
 * ```
 */
 const ActionHookButton = (props) => {
-	const { action,...buttonProps } = props;
+	const { action, ...buttonProps } = props;
 	return /* @__PURE__ */ jsx(Button, {
 		...buttonProps,
 		disabled: action.loading || props.disabled,
@@ -448,7 +764,7 @@ const ActionClickButton = (props) => {
 * Action for navigation with active state support.
 */
 const ActionNavigationButton = (props) => {
-	const { active: options, classNameActive, variantActive, routerGoOptions,...buttonProps } = props;
+	const { active: options, classNameActive, variantActive, routerGoOptions, ...buttonProps } = props;
 	const router = useRouter();
 	const { isPending, isActive } = useActive(options ? {
 		href: props.href,
@@ -467,7 +783,7 @@ const ActionNavigationButton = (props) => {
 	});
 };
 const ActionHrefButton = (props) => {
-	const { active: options, classNameActive, variantActive, routerGoOptions, target,...buttonProps } = props;
+	const { active: options, classNameActive, variantActive, routerGoOptions, target, ...buttonProps } = props;
 	return /* @__PURE__ */ jsx(Button, {
 		component: "a",
 		target,
@@ -742,7 +1058,7 @@ const ControlNumber = (props) => {
 		if (event.id === props.input?.form.id && ref.current) setValue(props.input.props.defaultValue);
 	} }, [props.input]);
 	if (!props.input?.props) return null;
-	const { type,...inputPropsWithoutType } = props.input.props;
+	const { type, ...inputPropsWithoutType } = props.input.props;
 	if (props.sliderProps) return /* @__PURE__ */ jsx(Input.Wrapper, {
 		...inputProps,
 		children: /* @__PURE__ */ jsx("div", {
@@ -797,7 +1113,7 @@ function extractSchemaFields(schema, prefix = "") {
 		const fieldSchema = value;
 		const path = prefix ? `${prefix}.${key}` : key;
 		const format = "format" in fieldSchema ? fieldSchema.format : void 0;
-		let displayType = "type" in fieldSchema ? fieldSchema.type : "unknown";
+		let displayType = "type" in fieldSchema ? fieldSchema.type : "object";
 		if (format === "date-time") displayType = "datetime";
 		else if (format === "date") displayType = "date";
 		else if (format === "time") displayType = "time";
@@ -809,7 +1125,10 @@ function extractSchemaFields(schema, prefix = "") {
 			format,
 			description: "description" in fieldSchema ? fieldSchema.description : void 0
 		};
-		if ("enum" in fieldSchema && fieldSchema.enum) field.enum = fieldSchema.enum;
+		if ("enum" in fieldSchema && fieldSchema.enum) {
+			field.enum = fieldSchema.enum;
+			field.type = "enum";
+		}
 		if ("type" in fieldSchema && fieldSchema.type === "object" && "properties" in fieldSchema && typeof fieldSchema.properties === "object") field.nested = extractSchemaFields(fieldSchema.properties, path);
 		fields.push(field);
 		if (field.nested) fields.push(...field.nested);
@@ -917,27 +1236,46 @@ const OPERATOR_INFO = {
 * Query builder with text input and help popover.
 * Generates query strings for parseQueryString syntax.
 */
-const ControlQueryBuilder = ({ schema, value = "", onChange, placeholder = "Enter query or click help for assistance...",...textInputProps }) => {
+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$1) => {
+		try {
+			parseQueryString(value$1.trim());
+		} catch (e) {
+			setError(e.message);
+			return false;
+		}
+		setError(null);
+		return true;
+	};
 	const handleTextChange = (newValue) => {
 		setTextValue(newValue);
-		onChange?.(newValue);
+		if (isValid(newValue)) onChange?.(newValue);
 	};
 	const handleClear = () => {
 		setTextValue("");
 		onChange?.("");
+		isValid("");
 	};
 	const handleInsert = (text) => {
 		const newValue = textValue ? `${textValue}${text} ` : `${text} `;
 		setTextValue(newValue);
-		onChange?.(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",
@@ -946,10 +1284,8 @@ const ControlQueryBuilder = ({ schema, value = "", onChange, placeholder = "Ente
 		onChange: setHelpOpened,
 		closeOnClickOutside: true,
 		closeOnEscape: true,
-		withArrow: true,
-		arrowSize: 14,
 		transitionProps: {
-			transition: "fade-down",
+			transition: "fade-up",
 			duration: 200,
 			timingFunction: "ease"
 		},
@@ -959,7 +1295,7 @@ const ControlQueryBuilder = ({ schema, value = "", onChange, placeholder = "Ente
 			value: textValue,
 			onChange: (e) => handleTextChange(e.currentTarget.value),
 			onFocus: () => setHelpOpened(true),
-			leftSection: /* @__PURE__ */ jsx(IconFilter, { size: 16 }),
+			leftSection: error ? /* @__PURE__ */ jsx(IconInfoTriangle, { size: 16 }) : /* @__PURE__ */ jsx(IconFilter, { size: 16 }),
 			rightSection: textValue && /* @__PURE__ */ jsx(ActionIcon, {
 				size: "sm",
 				variant: "subtle",
@@ -968,10 +1304,16 @@ const ControlQueryBuilder = ({ schema, value = "", onChange, placeholder = "Ente
 				children: /* @__PURE__ */ jsx(IconX, { size: 14 })
 			}),
 			...textInputProps
-		}) }), /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsx(QueryHelp, {
-			fields,
-			onInsert: handleInsert
-		}) })]
+		}) }), /* @__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 }) {
@@ -979,6 +1321,9 @@ function QueryHelp({ fields, onInsert }) {
 		gap: "md",
 		align: "flex-start",
 		wrap: "nowrap",
+		bg: ui.colors.surface,
+		p: "sm",
+		bdrs: "sm",
 		children: [
 			/* @__PURE__ */ jsxs(Stack, {
 				gap: "md",
@@ -995,12 +1340,13 @@ function QueryHelp({ fields, onInsert }) {
 							children: Object.entries(OPERATOR_INFO).map(([key, info]) => /* @__PURE__ */ jsxs(Group, {
 								gap: "xs",
 								wrap: "nowrap",
-								children: [/* @__PURE__ */ jsx(Code, {
-									style: {
-										minWidth: 35,
-										textAlign: "center",
-										cursor: "pointer"
-									},
+								children: [/* @__PURE__ */ jsx(ActionButton_default, {
+									px: "xs",
+									size: "xs",
+									h: 24,
+									variant: "default",
+									justify: "center",
+									miw: 48,
 									onClick: () => onInsert(info.symbol),
 									children: info.symbol
 								}), /* @__PURE__ */ jsx(Text$1, {
@@ -1024,12 +1370,13 @@ function QueryHelp({ fields, onInsert }) {
 							children: [/* @__PURE__ */ jsxs(Group, {
 								gap: "xs",
 								wrap: "nowrap",
-								children: [/* @__PURE__ */ jsx(Code, {
-									style: {
-										minWidth: 35,
-										textAlign: "center",
-										cursor: "pointer"
-									},
+								children: [/* @__PURE__ */ jsx(ActionButton_default, {
+									px: "xs",
+									size: "xs",
+									h: 24,
+									variant: "default",
+									justify: "center",
+									miw: 48,
 									onClick: () => onInsert("&"),
 									children: "&"
 								}), /* @__PURE__ */ jsx(Text$1, {
@@ -1040,12 +1387,13 @@ function QueryHelp({ fields, onInsert }) {
 							}), /* @__PURE__ */ jsxs(Group, {
 								gap: "xs",
 								wrap: "nowrap",
-								children: [/* @__PURE__ */ jsx(Code, {
-									style: {
-										minWidth: 35,
-										textAlign: "center",
-										cursor: "pointer"
-									},
+								children: [/* @__PURE__ */ jsx(ActionButton_default, {
+									px: "xs",
+									size: "xs",
+									h: 24,
+									variant: "default",
+									justify: "center",
+									miw: 48,
 									onClick: () => onInsert("|"),
 									children: "|"
 								}), /* @__PURE__ */ jsx(Text$1, {
@@ -1059,33 +1407,39 @@ function QueryHelp({ fields, onInsert }) {
 				]
 			}),
 			fields.length > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }),
-			fields.length > 0 && /* @__PURE__ */ jsxs(Stack, {
+			fields.length > 0 && /* @__PURE__ */ jsxs(Flex$1, {
+				direction: "column",
 				gap: "xs",
 				style: { flex: 2 },
 				children: [/* @__PURE__ */ jsx(Text$1, {
 					size: "sm",
 					fw: 600,
 					children: "Fields"
-				}), /* @__PURE__ */ jsx(Stack, {
+				}), /* @__PURE__ */ jsx(Flex$1, {
+					direction: "column",
 					gap: 4,
 					style: {
 						maxHeight: 300,
 						overflowY: "auto"
 					},
-					children: fields.map((field) => /* @__PURE__ */ jsxs(Group, {
+					children: fields.map((field) => /* @__PURE__ */ jsxs(Flex$1, {
 						gap: "xs",
 						wrap: "nowrap",
 						align: "flex-start",
 						children: [
-							/* @__PURE__ */ jsx(Code, {
-								style: {
-									minWidth: 120,
-									cursor: "pointer"
-								},
+							/* @__PURE__ */ jsx(ActionButton_default, {
+								px: "xs",
+								size: "xs",
+								h: 24,
+								variant: "default",
+								justify: "end",
+								miw: 120,
 								onClick: () => onInsert(field.path),
 								children: field.path
 							}),
-							/* @__PURE__ */ jsxs(Stack, {
+							/* @__PURE__ */ jsxs(Flex$1, {
+								mt: 3,
+								direction: "column",
 								gap: 2,
 								style: {
 									flex: 1,
@@ -1097,15 +1451,12 @@ function QueryHelp({ fields, onInsert }) {
 									lineClamp: 1,
 									children: field.description || field.type
 								}), field.enum && /* @__PURE__ */ jsx(Group, {
-									gap: 4,
+									gap: 0,
 									wrap: "wrap",
-									children: field.enum.map((enumValue) => /* @__PURE__ */ jsx(Code, {
-										style: {
-											cursor: "pointer",
-											fontStyle: "italic",
-											fontSize: "0.75rem"
-										},
-										c: "blue",
+									children: field.enum.map((enumValue) => /* @__PURE__ */ jsx(ActionButton_default, {
+										px: "xs",
+										size: "xs",
+										h: 24,
 										onClick: () => onInsert(enumValue),
 										children: enumValue
 									}, enumValue))
@@ -1161,18 +1512,15 @@ const ControlSelect = (props) => {
 		const segmentedControlProps = typeof props.segmented === "object" ? props.segmented : {};
 		return /* @__PURE__ */ jsx(Input.Wrapper, {
 			...inputProps,
-			children: /* @__PURE__ */ jsx(Flex$1, {
-				mt: "calc(var(--mantine-spacing-xs) / 2)",
-				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$1, { 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)
+			}) })
 		});
 	}
 	if (props.autocomplete) {
@@ -1260,15 +1608,14 @@ const Control = (_props) => {
 		..._props,
 		...schema.$control
 	};
-	if (props.query) return /* @__PURE__ */ jsx(Input.Wrapper, {
+	if (props.query) return /* @__PURE__ */ jsx(ControlQueryBuilder_default, {
+		...props.input.props,
 		...inputProps,
-		children: /* @__PURE__ */ jsx(ControlQueryBuilder_default, {
-			schema: props.query,
-			value: props.input.props.value,
-			onChange: (value) => {
-				props.input.set(value);
-			}
-		})
+		schema: props.query,
+		value: props.input.props.value,
+		onChange: (value) => {
+			props.input.set(value);
+		}
 	});
 	if (props.custom) {
 		const Custom = props.custom;
@@ -1482,16 +1829,6 @@ const TypeForm = (props) => {
 };
 var TypeForm_default = TypeForm;
 
-//#endregion
-//#region src/constants/ui.ts
-const ui = { colors: {
-	transparent: "transparent",
-	background: "var(--alepha-background)",
-	surface: "var(--alepha-surface)",
-	elevated: "var(--alepha-elevated)",
-	border: "var(--alepha-border)"
-} };
-
 //#endregion
 //#region src/components/buttons/BurgerButton.tsx
 const BurgerButton = (props) => {
@@ -1848,11 +2185,11 @@ var AdminShell_default = AdminShell;
 //#region src/components/table/DataTable.tsx
 const DataTable = (props) => {
 	const [items, setItems] = useState(typeof props.items === "function" ? { content: [] } : props.items);
-	const defaultSize = props.infinityScroll ? 50 : props.defaultSize || 10;
+	const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
 	const [page, setPage] = useState(1);
 	const [size, setSize] = useState(String(defaultSize));
-	const [isLoadingMore, setIsLoadingMore] = useState(false);
 	const [currentPage, setCurrentPage] = useState(0);
+	const alepha = useInject(Alepha);
 	const form = useForm({
 		schema: t.object({
 			...props.filters ? props.filters.properties : {},
@@ -1862,14 +2199,13 @@ const DataTable = (props) => {
 		}),
 		handler: async (values, args) => {
 			if (typeof props.items === "function") {
-				const response = await props.items(values);
+				const response = await props.items(values, { items: items.content });
 				if (props.infinityScroll && values.page > 0) setItems((prev) => ({
 					...response,
 					content: [...prev.content, ...response.content]
 				}));
 				else setItems(response);
 				setCurrentPage(values.page);
-				setIsLoadingMore(false);
 			}
 		},
 		onReset: async () => {
@@ -1888,15 +2224,13 @@ const DataTable = (props) => {
 				form.input.page.set(0);
 				return;
 			}
+			props.onFilterChange?.(key, value, form);
 		}
-	}, []);
-	useDebouncedCallback(() => form.submit(), { delay: 1e3 });
+	}, [items]);
+	useDebouncedCallback(() => form.submit(), { delay: 800 });
 	const dt = useInject(DateTimeProvider);
 	useEffect(() => {
-		if (props.submitOnInit) {
-			console.log("submitting");
-			form.submit();
-		}
+		if (props.submitOnInit) form.submit();
 		if (props.submitEvery) {
 			const it = dt.createInterval(() => {
 				form.submit();
@@ -1910,39 +2244,46 @@ const DataTable = (props) => {
 	useEffect(() => {
 		if (!props.infinityScroll || typeof props.items !== "function") return;
 		const handleScroll = () => {
-			if (isLoadingMore) return;
+			if (form.submitting) return;
 			const scrollTop = window.scrollY;
 			const windowHeight = window.innerHeight;
 			const docHeight = document.documentElement.scrollHeight;
-			if (scrollTop + windowHeight >= docHeight - 200) {
+			if (scrollTop + windowHeight >= docHeight - 300) {
 				const totalPages = items.page?.totalPages ?? 1;
-				if (currentPage + 1 < totalPages) {
-					setIsLoadingMore(true);
-					form.input.page.set(currentPage + 1);
-				}
+				if (currentPage + 1 < totalPages) form.input.page.set(currentPage + 1);
 			}
 		};
 		window.addEventListener("scroll", handleScroll);
 		return () => window.removeEventListener("scroll", handleScroll);
 	}, [
 		props.infinityScroll,
-		isLoadingMore,
+		form.submitting,
 		items.page?.totalPages,
 		currentPage,
 		form
 	]);
-	const head = Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Th, { children: /* @__PURE__ */ jsx(ActionButton_default, {
-		justify: "space-between",
-		radius: 0,
-		fullWidth: true,
-		size: "xs",
-		children: col.label
-	}) }, key));
+	const head = Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Th, {
+		style: { ...col.fit ? {
+			width: "1%",
+			whiteSpace: "nowrap"
+		} : {} },
+		children: /* @__PURE__ */ jsx(ActionButton_default, {
+			justify: "space-between",
+			radius: 0,
+			fullWidth: true,
+			size: "xs",
+			children: col.label
+		})
+	}, key));
 	const rows = items.content.map((item, index) => {
 		const trProps = props.tableTrProps ? props.tableTrProps(item) : {};
 		return /* @__PURE__ */ jsx(Table.Tr, {
 			...trProps,
-			children: Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Td, { children: col.value(item, index) }, key))
+			children: Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Td, { children: col.value(item, {
+				index,
+				form,
+				alepha
+			}) }, key))
 		}, JSON.stringify(item));
 	});
 	const schema = t.omit(form.options.schema, [
@@ -1955,19 +2296,23 @@ const DataTable = (props) => {
 		gap: "sm",
 		flex: 1,
 		children: [
-			/* @__PURE__ */ jsx(Paper, {
-				withBorder: true,
-				p: "sm",
-				children: props.filters ? /* @__PURE__ */ jsx(TypeForm_default, {
-					form,
-					schema
-				}) : null
-			}),
-			/* @__PURE__ */ jsxs(Table, {
-				striped: true,
-				stripedColor: "",
-				...props.tableProps,
-				children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsx(Table.Tr, { children: head }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: rows })]
+			props.filters ? /* @__PURE__ */ jsx(TypeForm_default, {
+				...props.typeFormProps,
+				form,
+				schema
+			}) : null,
+			/* @__PURE__ */ jsx(Flex$1, {
+				flex: 1,
+				className: "overflow-auto",
+				children: /* @__PURE__ */ jsxs(Table, {
+					striped: true,
+					withRowBorders: true,
+					withColumnBorders: true,
+					withTableBorder: true,
+					stripedColor: "",
+					...props.tableProps,
+					children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsx(Table.Tr, { children: head }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: rows })]
+				})
 			}),
 			!props.infinityScroll && /* @__PURE__ */ jsxs(Flex$1, {
 				justify: "space-between",
@@ -2052,5 +2397,5 @@ const AlephaUI = $module({
 });
 
 //#endregion
-export { ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlDate_default as ControlDate, ControlQueryBuilder_default as ControlQueryBuilder, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, ICON_SIZES, OPERATOR_INFO, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ToastService, TypeForm_default as TypeForm, capitalize, extractSchemaFields, getDefaultIcon, getOperatorsForField, prettyName, ui, useDialog, useToast };
+export { ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlDate_default as ControlDate, ControlQueryBuilder_default as ControlQueryBuilder, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, ICON_SIZES, JsonViewer_default as JsonViewer, OPERATOR_INFO, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ToastService, TypeForm_default as TypeForm, capitalize, extractSchemaFields, getDefaultIcon, getOperatorsForField, prettyName, ui, useDialog, useToast };
 //# sourceMappingURL=index.js.map