@alepha/ui 0.11.5 → 0.11.7

package/dist/index.js

@@ -1,25 +1,316 @@
-import { i as ToastService, n as Omnibar_default, r as useToast, t as AlephaMantineProvider_default } from "./AlephaMantineProvider-Be0DAazb.js";
-import { $module, TypeBoxError } from "@alepha/core";
-import { AlephaReactForm, useFormState } from "@alepha/react-form";
+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 { AppShell, Autocomplete, Burger, Button, ColorInput, Divider, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, Menu, MultiSelect, NumberInput, PasswordInput, SegmentedControl, Select, 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, IconHash, IconKey, IconLanguage, IconLetterCase, IconLink, IconList, IconMail, IconMoon, IconPalette, IconPhone, IconSearch, IconSelector, IconSquareRounded, IconSun, IconToggleLeft } 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";
 
 //#region src/RootRouter.ts
 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
 const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
@@ -98,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 {
@@ -192,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
 	*/
@@ -253,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,
@@ -273,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,
@@ -299,7 +617,7 @@ const ActionButton = (_props) => {
 	}
 	const renderAction = () => {
 		if ("href" in restProps && restProps.href) {
-			if (restProps.href.startsWith("http")) return /* @__PURE__ */ jsx(ActionHrefButton, {
+			if (restProps.href.startsWith("http") || restProps.target) return /* @__PURE__ */ jsx(ActionHrefButton, {
 				...restProps,
 				href: restProps.href,
 				children: restProps.children
@@ -322,11 +640,18 @@ const ActionButton = (_props) => {
 			onClick: restProps.onClick,
 			children: restProps.children
 		});
-		if ("form" in restProps && restProps.form) return /* @__PURE__ */ jsx(ActionSubmitButton, {
-			...restProps,
-			form: restProps.form,
-			children: restProps.children
-		});
+		if ("form" in restProps && restProps.form) {
+			if (restProps.type === "reset") return /* @__PURE__ */ jsx(ActionResetButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+			return /* @__PURE__ */ jsx(ActionSubmitButton, {
+				...restProps,
+				form: restProps.form,
+				children: restProps.children
+			});
+		}
 		return /* @__PURE__ */ jsx(Button, {
 			...restProps,
 			children: restProps.children
@@ -347,13 +672,18 @@ const ActionButton = (_props) => {
 			index
 		}, index)) })]
 	});
-	if (tooltip) return /* @__PURE__ */ jsx(Tooltip, { ...typeof tooltip === "string" ? {
-		label: tooltip,
-		children: actionElement
-	} : {
-		...tooltip,
-		children: actionElement
-	} });
+	if (tooltip) {
+		const defaultTooltipProps = { openDelay: 1e3 };
+		return /* @__PURE__ */ jsx(Tooltip, { ...typeof tooltip === "string" ? {
+			...defaultTooltipProps,
+			label: tooltip,
+			children: actionElement
+		} : {
+			...defaultTooltipProps,
+			...tooltip,
+			children: actionElement
+		} });
+	}
 	return actionElement;
 };
 var ActionButton_default = ActionButton;
@@ -361,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,
@@ -371,6 +701,16 @@ const ActionSubmitButton = (props) => {
 		children: props.children
 	});
 };
+const ActionResetButton = (props) => {
+	const { form, ...buttonProps } = props;
+	const state = useFormState(form);
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		disabled: state.loading,
+		type: "reset",
+		children: props.children
+	});
+};
 /**
 * Action button that integrates with useAction hook return value.
 * Automatically handles loading state and executes the action on click.
@@ -389,7 +729,7 @@ const ActionSubmitButton = (props) => {
 * ```
 */
 const ActionHookButton = (props) => {
-	const { action,...buttonProps } = props;
+	const { action, ...buttonProps } = props;
 	return /* @__PURE__ */ jsx(Button, {
 		...buttonProps,
 		disabled: action.loading || props.disabled,
@@ -424,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,
@@ -443,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,
@@ -705,6 +1045,438 @@ const ControlDate = (props) => {
 };
 var ControlDate_default = ControlDate;
 
+//#endregion
+//#region src/components/form/ControlNumber.tsx
+/**
+*
+*/
+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]);
+	if (!props.input?.props) return null;
+	const { type, ...inputPropsWithoutType } = props.input.props;
+	if (props.sliderProps) return /* @__PURE__ */ jsx(Input.Wrapper, {
+		...inputProps,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				height: 32,
+				padding: 8
+			},
+			children: /* @__PURE__ */ jsx(Slider, {
+				...inputProps,
+				ref,
+				id,
+				...inputPropsWithoutType,
+				...props.sliderProps,
+				value,
+				onChange: (val) => {
+					setValue(val);
+					props.input.set(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);
+		}
+	});
+};
+var ControlNumber_default = ControlNumber;
+
+//#endregion
+//#region src/utils/extractSchemaFields.ts
+/**
+* Extract field information from a TypeBox schema for query building.
+* Supports nested objects and provides field metadata for autocomplete.
+*/
+function extractSchemaFields(schema, prefix = "") {
+	const fields = [];
+	if (!schema || typeof schema !== "object") return fields;
+	const properties = "properties" in schema ? schema.properties : schema;
+	if (!properties || typeof properties !== "object") return fields;
+	for (const [key, value] of Object.entries(properties)) {
+		if (typeof value !== "object" || value === null) continue;
+		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 : "object";
+		if (format === "date-time") displayType = "datetime";
+		else if (format === "date") displayType = "date";
+		else if (format === "time") displayType = "time";
+		else if (format === "duration") displayType = "duration";
+		const field = {
+			name: key,
+			path,
+			type: displayType,
+			format,
+			description: "description" in fieldSchema ? fieldSchema.description : void 0
+		};
+		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);
+	}
+	return fields;
+}
+/**
+* Get suggested operators based on field type
+*/
+function getOperatorsForField(field) {
+	const allOperators = ["=", "!="];
+	if (field.enum) return [...allOperators, "in"];
+	switch (field.type) {
+		case "string":
+		case "text": return [
+			...allOperators,
+			"~",
+			"~*",
+			"null"
+		];
+		case "number":
+		case "integer": return [
+			...allOperators,
+			">",
+			">=",
+			"<",
+			"<="
+		];
+		case "boolean": return allOperators;
+		case "datetime":
+		case "date": return [
+			...allOperators,
+			">",
+			">=",
+			"<",
+			"<="
+		];
+		default: return [...allOperators, "null"];
+	}
+}
+/**
+* Get operator symbol and description
+*/
+const OPERATOR_INFO = {
+	eq: {
+		symbol: "=",
+		label: "equals",
+		example: "name=John"
+	},
+	ne: {
+		symbol: "!=",
+		label: "not equals",
+		example: "status!=archived"
+	},
+	gt: {
+		symbol: ">",
+		label: "greater than",
+		example: "age>18"
+	},
+	gte: {
+		symbol: ">=",
+		label: "greater or equal",
+		example: "age>=18"
+	},
+	lt: {
+		symbol: "<",
+		label: "less than",
+		example: "age<65"
+	},
+	lte: {
+		symbol: "<=",
+		label: "less or equal",
+		example: "age<=65"
+	},
+	like: {
+		symbol: "~",
+		label: "like (case-sensitive)",
+		example: "name~John"
+	},
+	ilike: {
+		symbol: "~*",
+		label: "like (case-insensitive)",
+		example: "name~*john"
+	},
+	null: {
+		symbol: "=null",
+		label: "is null",
+		example: "deletedAt=null"
+	},
+	notNull: {
+		symbol: "!=null",
+		label: "is not null",
+		example: "email!=null"
+	},
+	in: {
+		symbol: "[...]",
+		label: "in array",
+		example: "status=[active,pending]"
+	}
+};
+
+//#endregion
+//#region src/components/form/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$1) => {
+		try {
+			parseQueryString(value$1.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 }) {
+	return /* @__PURE__ */ jsxs(Group, {
+		gap: "md",
+		align: "flex-start",
+		wrap: "nowrap",
+		bg: ui.colors.surface,
+		p: "sm",
+		bdrs: "sm",
+		children: [
+			/* @__PURE__ */ jsxs(Stack, {
+				gap: "md",
+				style: { flex: 1 },
+				children: [
+					/* @__PURE__ */ jsxs(Stack, {
+						gap: "xs",
+						children: [/* @__PURE__ */ jsx(Text$1, {
+							size: "sm",
+							fw: 600,
+							children: "Operators"
+						}), /* @__PURE__ */ jsx(Stack, {
+							gap: 4,
+							children: Object.entries(OPERATOR_INFO).map(([key, info]) => /* @__PURE__ */ jsxs(Group, {
+								gap: "xs",
+								wrap: "nowrap",
+								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, {
+									size: "xs",
+									c: "dimmed",
+									style: { flex: 1 },
+									children: info.label
+								})]
+							}, key))
+						})]
+					}),
+					/* @__PURE__ */ jsx(Divider, {}),
+					/* @__PURE__ */ jsxs(Stack, {
+						gap: "xs",
+						children: [/* @__PURE__ */ jsx(Text$1, {
+							size: "sm",
+							fw: 600,
+							children: "Logic"
+						}), /* @__PURE__ */ jsxs(Stack, {
+							gap: 4,
+							children: [/* @__PURE__ */ jsxs(Group, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: [/* @__PURE__ */ jsx(ActionButton_default, {
+									px: "xs",
+									size: "xs",
+									h: 24,
+									variant: "default",
+									justify: "center",
+									miw: 48,
+									onClick: () => onInsert("&"),
+									children: "&"
+								}), /* @__PURE__ */ jsx(Text$1, {
+									size: "xs",
+									c: "dimmed",
+									children: "AND"
+								})]
+							}), /* @__PURE__ */ jsxs(Group, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: [/* @__PURE__ */ jsx(ActionButton_default, {
+									px: "xs",
+									size: "xs",
+									h: 24,
+									variant: "default",
+									justify: "center",
+									miw: 48,
+									onClick: () => onInsert("|"),
+									children: "|"
+								}), /* @__PURE__ */ jsx(Text$1, {
+									size: "xs",
+									c: "dimmed",
+									children: "OR"
+								})]
+							})]
+						})]
+					})
+				]
+			}),
+			fields.length > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }),
+			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(Flex$1, {
+					direction: "column",
+					gap: 4,
+					style: {
+						maxHeight: 300,
+						overflowY: "auto"
+					},
+					children: fields.map((field) => /* @__PURE__ */ jsxs(Flex$1, {
+						gap: "xs",
+						wrap: "nowrap",
+						align: "flex-start",
+						children: [
+							/* @__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(Flex$1, {
+								mt: 3,
+								direction: "column",
+								gap: 2,
+								style: {
+									flex: 1,
+									minWidth: 0
+								},
+								children: [/* @__PURE__ */ jsx(Text$1, {
+									size: "xs",
+									c: "dimmed",
+									lineClamp: 1,
+									children: field.description || field.type
+								}), field.enum && /* @__PURE__ */ jsx(Group, {
+									gap: 0,
+									wrap: "wrap",
+									children: field.enum.map((enumValue) => /* @__PURE__ */ jsx(ActionButton_default, {
+										px: "xs",
+										size: "xs",
+										h: 24,
+										onClick: () => onInsert(enumValue),
+										children: enumValue
+									}, enumValue))
+								})]
+							}),
+							/* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								variant: "light",
+								style: { flexShrink: 0 },
+								children: field.type
+							})
+						]
+					}, field.path))
+				})]
+			})
+		]
+	});
+}
+var ControlQueryBuilder_default = ControlQueryBuilder;
+
 //#endregion
 //#region src/components/form/ControlSelect.tsx
 /**
@@ -740,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) {
@@ -827,6 +1596,7 @@ var ControlSelect_default = ControlSelect;
 * - DateInput (for date format)
 * - DateTimePicker (for date-time format)
 * - TimeInput (for time format)
+* - QueryBuilder (for building type-safe queries with autocomplete)
 * - Custom component
 *
 * Automatically handles labels, descriptions, error messages, required state, and default icons.
@@ -838,6 +1608,15 @@ const Control = (_props) => {
 		..._props,
 		...schema.$control
 	};
+	if (props.query) return /* @__PURE__ */ jsx(ControlQueryBuilder_default, {
+		...props.input.props,
+		...inputProps,
+		schema: props.query,
+		value: props.input.props.value,
+		onChange: (value) => {
+			props.input.set(value);
+		}
+	});
 	if (props.custom) {
 		const Custom = props.custom;
 		return /* @__PURE__ */ jsx(Input.Wrapper, {
@@ -855,14 +1634,13 @@ const Control = (_props) => {
 		});
 	}
 	if (props.number || props.input.schema && "type" in props.input.schema && (props.input.schema.type === "number" || props.input.schema.type === "integer")) {
-		const numberInputProps = typeof props.number === "object" ? props.number : {};
-		const { type,...inputPropsWithoutType } = props.input.props;
-		return /* @__PURE__ */ jsx(NumberInput, {
-			...inputProps,
-			id,
-			leftSection: icon,
-			...inputPropsWithoutType,
-			...numberInputProps
+		const controlNumberProps = typeof props.number === "object" ? props.number : {};
+		return /* @__PURE__ */ jsx(ControlNumber_default, {
+			input: props.input,
+			title: props.title,
+			description: props.description,
+			icon,
+			...controlNumberProps
 		});
 	}
 	if (props.file) {
@@ -990,15 +1768,16 @@ var Control_default = Control;
 */
 const TypeForm = (props) => {
 	const { form, columns = 3, children, controlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps } = props;
-	if (!form.options?.schema?.properties) return null;
-	const supportedFields = Object.keys(form.options.schema.properties).filter((fieldName) => {
+	const schema = props.schema || form.options.schema;
+	if (!schema?.properties) return null;
+	const supportedFields = Object.keys(schema.properties).filter((fieldName) => {
 		const field = form.input[fieldName];
 		if (!field || typeof field !== "object" || !("schema" in field)) return false;
-		const schema = field.schema;
-		if ("type" in schema) {
-			if (schema.type === "object") return false;
+		const schema$1 = field.schema;
+		if ("type" in schema$1) {
+			if (schema$1.type === "object") return false;
 		}
-		if ("properties" in schema && schema.properties) return false;
+		if ("properties" in schema$1 && schema$1.properties) return false;
 		return true;
 	});
 	const colSpan = typeof columns === "number" ? {
@@ -1030,14 +1809,17 @@ const TypeForm = (props) => {
 	const content = /* @__PURE__ */ jsxs(Flex$1, {
 		direction: "column",
 		gap: "sm",
-		children: [renderFields(), !skipSubmitButton && /* @__PURE__ */ jsxs(Flex$1, { children: [/* @__PURE__ */ jsx(ActionButton_default, {
-			form,
-			...submitButtonProps,
-			children: submitButtonProps?.children ?? "Submit"
-		}), /* @__PURE__ */ jsx("button", {
-			type: "reset",
-			children: "Reset"
-		})] })]
+		children: [renderFields(), !skipSubmitButton && /* @__PURE__ */ jsxs(Flex$1, {
+			gap: "sm",
+			children: [/* @__PURE__ */ jsx(ActionButton_default, {
+				form,
+				...submitButtonProps,
+				children: submitButtonProps?.children ?? "Submit"
+			}), /* @__PURE__ */ jsx(ActionButton_default, {
+				type: "reset",
+				children: "Reset"
+			})]
+		})]
 	});
 	if (skipFormElement) return content;
 	return /* @__PURE__ */ jsx("form", {
@@ -1047,15 +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)"
-} };
-
 //#endregion
 //#region src/components/buttons/BurgerButton.tsx
 const BurgerButton = (props) => {
@@ -1159,16 +1932,24 @@ const Sidebar = (props) => {
 			if (item.type === "search") return /* @__PURE__ */ jsx(OmnibarButton_default, { collapsed: props.collapsed }, key);
 			if (item.type === "section") {
 				if (props.collapsed) return;
-				return /* @__PURE__ */ jsx(Text$1, {
-					size: "xs",
-					c: "dimmed",
+				return /* @__PURE__ */ jsxs(Flex$1, {
 					mt: "md",
 					mb: "xs",
-					mx: "sm",
-					tt: "uppercase",
-					fw: "bold",
-					children: item.label
-				}, key);
+					align: "center",
+					gap: "xs",
+					children: [/* @__PURE__ */ jsx(ThemeIcon, {
+						c: "dimmed",
+						size: "xs",
+						variant: "transparent",
+						children: item.icon
+					}), /* @__PURE__ */ jsx(Text$1, {
+						size: "xs",
+						c: "dimmed",
+						tt: "uppercase",
+						fw: "bold",
+						children: item.label
+					}, key)]
+				});
 			}
 		}
 		if ("element" in item) return /* @__PURE__ */ jsx(Flex$1, { children: item.element }, key);
@@ -1243,7 +2024,7 @@ const SidebarItem = (props) => {
 	} }, []);
 	if (level > maxLevel) return null;
 	const handleItemClick = (e) => {
-		e.preventDefault();
+		if (!props.item.target) e.preventDefault();
 		if (item.children && item.children.length > 0) setIsOpen(!isOpen);
 		else {
 			props.onItemClick?.(item);
@@ -1258,6 +2039,7 @@ const SidebarItem = (props) => {
 			w: "100%",
 			justify: "space-between",
 			href: props.item.href,
+			target: props.item.target,
 			variant: "subtle",
 			size: props.item.theme?.size ?? props.theme.button?.size ?? (level === 0 ? "sm" : "xs"),
 			variantActive: "default",
@@ -1316,7 +2098,7 @@ const SidebarCollapsedItem = (props) => {
 	}, []);
 	const [isOpen, setIsOpen] = useState(isActive(item));
 	const handleItemClick = (e) => {
-		e.preventDefault();
+		if (!props.item.target) e.preventDefault();
 		if (item.children && item.children.length > 0) setIsOpen(!isOpen);
 		else {
 			props.onItemClick?.(item);
@@ -1331,6 +2113,7 @@ const SidebarCollapsedItem = (props) => {
 		onClick: handleItemClick,
 		icon: item.icon ?? /* @__PURE__ */ jsx(IconSquareRounded, {}),
 		href: props.item.href,
+		target: props.item.target,
 		menu: item.children ? {
 			position: "right",
 			on: "hover",
@@ -1401,27 +2184,176 @@ var AdminShell_default = AdminShell;
 //#endregion
 //#region src/components/table/DataTable.tsx
 const DataTable = (props) => {
-	const [items, setItems] = useState(typeof props.items === "function" ? [] : props.items);
+	const [items, setItems] = useState(typeof props.items === "function" ? { content: [] } : props.items);
+	const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
+	const [page, setPage] = useState(1);
+	const [size, setSize] = useState(String(defaultSize));
+	const [currentPage, setCurrentPage] = useState(0);
+	const alepha = useInject(Alepha);
+	const form = useForm({
+		schema: t.object({
+			...props.filters ? props.filters.properties : {},
+			page: t.number({ default: 0 }),
+			size: t.number({ default: defaultSize }),
+			sort: t.optional(t.string())
+		}),
+		handler: async (values, args) => {
+			if (typeof props.items === "function") {
+				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);
+			}
+		},
+		onReset: async () => {
+			setPage(1);
+			setSize("10");
+			await form.submit();
+		},
+		onChange: async (key, value) => {
+			if (key === "page") {
+				setPage(value + 1);
+				await form.submit();
+				return;
+			}
+			if (key === "size") {
+				setSize(String(value));
+				form.input.page.set(0);
+				return;
+			}
+			props.onFilterChange?.(key, value, form);
+		}
+	}, [items]);
+	useDebouncedCallback(() => form.submit(), { delay: 800 });
+	const dt = useInject(DateTimeProvider);
+	useEffect(() => {
+		if (props.submitOnInit) form.submit();
+		if (props.submitEvery) {
+			const it = dt.createInterval(() => {
+				form.submit();
+			}, props.submitEvery);
+			return () => dt.clearInterval(it);
+		}
+	}, []);
 	useEffect(() => {
 		if (typeof props.items !== "function") setItems(props.items);
 	}, [props.items]);
-	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 rows = items.map((item, index) => {
+	useEffect(() => {
+		if (!props.infinityScroll || typeof props.items !== "function") return;
+		const handleScroll = () => {
+			if (form.submitting) return;
+			const scrollTop = window.scrollY;
+			const windowHeight = window.innerHeight;
+			const docHeight = document.documentElement.scrollHeight;
+			if (scrollTop + windowHeight >= docHeight - 300) {
+				const totalPages = items.page?.totalPages ?? 1;
+				if (currentPage + 1 < totalPages) form.input.page.set(currentPage + 1);
+			}
+		};
+		window.addEventListener("scroll", handleScroll);
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, [
+		props.infinityScroll,
+		form.submitting,
+		items.page?.totalPages,
+		currentPage,
+		form
+	]);
+	const head = Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Th, {
+		style: { ...col.fit ? {
+			width: "1%",
+			whiteSpace: "nowrap"
+		} : {} },
+		children: /* @__PURE__ */ jsx(ActionButton_default, {
+			justify: "space-between",
+			radius: 0,
+			fullWidth: true,
+			size: "xs",
+			children: col.label
+		})
+	}, 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) }, key))
+			children: Object.entries(props.columns).map(([key, col]) => /* @__PURE__ */ jsx(Table.Td, { children: col.value(item, {
+				index,
+				form,
+				alepha
+			}) }, key))
 		}, JSON.stringify(item));
 	});
-	return /* @__PURE__ */ jsxs(Table, {
-		...props.tableProps,
-		children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsx(Table.Tr, { children: head }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: rows })]
+	const schema = t.omit(form.options.schema, [
+		"page",
+		"size",
+		"sort"
+	]);
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		direction: "column",
+		gap: "sm",
+		flex: 1,
+		children: [
+			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",
+				align: "center",
+				children: [/* @__PURE__ */ jsx(Pagination, {
+					withEdges: true,
+					total: items.page?.totalPages ?? 1,
+					value: page,
+					onChange: (value) => {
+						form.input.page.set(value - 1);
+					}
+				}), /* @__PURE__ */ jsx(Flex$1, { children: /* @__PURE__ */ jsx(Select, {
+					value: size,
+					onChange: (value) => {
+						form.input.size.set(Number(value));
+					},
+					data: [
+						{
+							value: "5",
+							label: "5"
+						},
+						{
+							value: "10",
+							label: "10"
+						},
+						{
+							value: "25",
+							label: "25"
+						},
+						{
+							value: "50",
+							label: "50"
+						},
+						{
+							value: "100",
+							label: "100"
+						}
+					]
+				}) })]
+			})
+		]
 	});
 };
 var DataTable_default = DataTable;
@@ -1465,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, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, ICON_SIZES, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ToastService, TypeForm_default as TypeForm, capitalize, getDefaultIcon, 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