@rebasepro/ui 0.23.0 → 0.24.0

package/dist/index.es.js

@@ -3093,7 +3093,7 @@ var BooleanSwitch = React.forwardRef(function BooleanSwitch({ value, allowIndete
 			else onValueChange?.(null);
 			else onValueChange?.(!value);
 		},
-		className: cls(SWITCH_GEOMETRY[size].track, "outline-none outline-hidden rounded-full relative shadow-sm", disabled ? value ? "bg-primary/40 ring-1 ring-transparent" : "bg-surface-field ring-1 ring-hairline" : value ? "bg-primary ring-1 ring-primary" : "bg-surface-active ring-1 ring-hairline-strong", className),
+		className: cls(SWITCH_GEOMETRY[size].track, "outline-none outline-hidden rounded-full relative shadow-sm", disabled ? value ? "bg-primary/40 ring-1 ring-transparent" : "bg-surface-field ring-1 ring-hairline" : value ? "bg-primary ring-1 ring-primary" : "bg-surface-active ring-1 ring-hairline-strong", "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-surface-card", className),
 		...props,
 		children: [allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", "bg-surface-400", SWITCH_GEOMETRY[size].bar, SWITCH_GEOMETRY[size].barX) }, "knob"), !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-300 dark:bg-surface-600" : value ? "bg-white shadow" : "bg-surface-500 dark:bg-surface-400", SWITCH_GEOMETRY[size].knob, value ? SWITCH_GEOMETRY[size].on : SWITCH_GEOMETRY[size].off) }, "knob")]
 	});
@@ -3104,7 +3104,7 @@ var BooleanSwitch = React.forwardRef(function BooleanSwitch({ value, allowIndete
 * Simple boolean switch.
 *
 */
-var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position = "end", size = "medium", invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth = true, inputClassName, ...props }) {
+var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position = "end", size = "medium", invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth = true, inputClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
 	const ref = React.useRef(null);
 	const refInput = React.useRef(null);
 	const switchLabelId = React.useId();
@@ -3112,18 +3112,13 @@ var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position =
 	const onFocus = () => setFocused(true);
 	const onBlur = () => setFocused(false);
 	React.useEffect(() => {
-		if (autoFocus) {}
+		if (autoFocus) refInput.current?.focus();
 	}, []);
 	const focus = document.activeElement === refInput?.current || document.activeElement === ref?.current;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		onFocus,
 		onBlur,
-		role: "switch",
-		"aria-checked": props.allowIndeterminate && (value === null || value === void 0) ? "mixed" : !!value,
-		"aria-disabled": disabled || void 0,
-		"aria-labelledby": label ? switchLabelId : void 0,
-		tabIndex: -1,
 		className: cls(!invisible && "bg-surface-field border border-hairline", !invisible && (disabled ? "bg-surface-field/60" : "transition-colors duration-150 hover:bg-surface-field-hover"), disabled ? "cursor-default" : "cursor-pointer", "rounded-lg max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", controlHeightMixin[size], size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className),
 		onClick: disabled ? void 0 : (e) => {
 			if (props.allowIndeterminate) {
@@ -3137,7 +3132,9 @@ var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position =
 			value,
 			ref: refInput,
 			size,
-			className: cls(invisible && focus ? focusedClasses : "", inputClassName),
+			"aria-labelledby": ariaLabelledBy ?? (label ? switchLabelId : void 0),
+			"aria-label": ariaLabel,
+			className: cls(invisible ? focus ? focusedClasses : "" : focusedDisabled, inputClassName),
 			disabled,
 			...props
 		}), /* @__PURE__ */ jsx("div", {
@@ -3154,9 +3151,9 @@ var ButtonInner = React.memo(React.forwardRef(({ children, className, variant =
 	const buttonClasses = cls({
 		"w-full": fullWidth,
 		"w-fit": !fullWidth,
-		"border border-primary bg-primary focus:ring-primary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "primary" && !disabled,
-		"border border-secondary bg-secondary focus:ring-secondary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "secondary" && !disabled,
-		"border border-red-600 bg-red-600 hover:bg-red-700 focus:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+		"border border-primary bg-primary focus-visible:ring-white/90 text-white hover:text-white hover:brightness-105": variant === "filled" && color === "primary" && !disabled,
+		"border border-secondary bg-secondary focus-visible:ring-white/90 text-white hover:text-white hover:brightness-105": variant === "filled" && color === "secondary" && !disabled,
+		"border border-red-600 bg-red-600 hover:bg-red-700 focus-visible:ring-white/90 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
 		"border border-hairline-strong bg-surface-raised hover:bg-surface-raised-hover text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
 		"border border-transparent bg-surface-raised hover:bg-surface-raised-hover text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
 		"border border-transparent text-primary hover:text-primary hover:bg-surface-hover": variant === "text" && color === "primary" && !disabled,
@@ -3736,12 +3733,74 @@ function Chip({ children, colorScheme, error, outlined, variant = "tinted", onCl
 	});
 }
 //#endregion
+//#region src/components/IconButton.tsx
+var buttonClasses = "hover:scale-[1.04] active:scale-95 transition-transform";
+var baseClasses = "inline-flex items-center justify-center text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150 [&>svg]:shrink-0";
+var colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-accent-300";
+var sizeClasses$1 = {
+	medium: "w-10 !h-10 min-w-10 min-h-10 p-2",
+	small: "w-8 !h-8 min-w-8 min-h-8 p-2",
+	smallest: "w-7 !h-7 min-w-7 min-h-7 p-2",
+	large: "w-12 !h-12 min-w-12 min-h-12 p-2"
+};
+var shapeClasses = {
+	circular: "rounded-full",
+	square: "rounded-md"
+};
+/** Icon size used when the caller doesn't set one on the child. */
+var defaultIconSize = {
+	smallest: 16,
+	small: 18,
+	medium: 20,
+	large: 24
+};
+var IconButtonInner = ({ children, className, size = "medium", variant = "ghost", shape = "circular", disabled, toggled, component, onClick, ...props }, ref) => {
+	const bgClasses = variant === "ghost" ? "bg-transparent hover:bg-surface-hover" : "bg-surface-raised hover:bg-surface-raised-hover";
+	const Component = component || "button";
+	const isNativeButton = Component === "button";
+	const sizedChildren = React.Children.map(children, (child) => {
+		if (!React.isValidElement(child)) return child;
+		if (child.props.size !== void 0) return child;
+		return React.cloneElement(child, { size: defaultIconSize[size] });
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		type: isNativeButton ? "button" : void 0,
+		role: isNativeButton ? void 0 : "button",
+		ref,
+		disabled: isNativeButton ? disabled : void 0,
+		"aria-disabled": disabled || void 0,
+		tabIndex: disabled ? -1 : void 0,
+		onClick: disabled ? void 0 : onClick,
+		...props,
+		className: cls(disabled ? "opacity-50 pointer-events-none" : "cursor-pointer", toggled ? "outline outline-2 outline-primary" : "", "text-inherit dark:text-inherit", colorClasses$1, bgClasses, baseClasses, buttonClasses, shapeClasses[shape], sizeClasses$1[size], className),
+		children: sizedChildren
+	});
+};
+var IconButton = React.forwardRef(IconButtonInner);
+//#endregion
 //#region src/components/Tooltip.tsx
+/**
+* A Radix tooltip only describes its trigger (`aria-describedby`, and only
+* while open); it never names it. Wrapped around an icon-only button with no
+* name of its own, the title was the one word that said what the button does,
+* and a screen reader announced "button". So a string title names an
+* icon-only button (no text, no `aria-label`/`aria-labelledby`) it wraps.
+*/
+function nameFromTitle(children, title) {
+	if (typeof title !== "string" || !React.isValidElement(children)) return children;
+	const type = children.type;
+	if (type !== IconButton && type !== "button" && type !== "a") return children;
+	const props = children.props;
+	if (props["aria-label"] || props["aria-labelledby"]) return children;
+	if (React.Children.toArray(props.children).some((child) => typeof child === "string" || typeof child === "number")) return children;
+	return React.cloneElement(children, { "aria-label": title });
+}
 var Tooltip = ({ open, defaultOpen, side = "bottom", delayDuration = 200, sideOffset, align, onOpenChange, title, tooltipClassName, tooltipStyle, children, asChild = false, container, className, style }) => {
 	useInjectStyles("Tooltip", styles$2);
 	const contextContainer = usePortalContainer();
 	const finalContainer = container ?? contextContainer ?? void 0;
 	if (!title) return /* @__PURE__ */ jsx(Fragment, { children });
+	children = nameFromTitle(children, title);
 	const trigger = asChild ? /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
 		asChild: true,
 		children
@@ -3921,51 +3980,6 @@ function ColorPicker({ value, onChange, size = "medium", allowClear = true, disa
 	});
 }
 //#endregion
-//#region src/components/IconButton.tsx
-var buttonClasses = "hover:scale-[1.04] active:scale-95 transition-transform";
-var baseClasses = "inline-flex items-center justify-center text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150 [&>svg]:shrink-0";
-var colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-accent-300";
-var sizeClasses$1 = {
-	medium: "w-10 !h-10 min-w-10 min-h-10 p-2",
-	small: "w-8 !h-8 min-w-8 min-h-8 p-2",
-	smallest: "w-7 !h-7 min-w-7 min-h-7 p-2",
-	large: "w-12 !h-12 min-w-12 min-h-12 p-2"
-};
-var shapeClasses = {
-	circular: "rounded-full",
-	square: "rounded-md"
-};
-/** Icon size used when the caller doesn't set one on the child. */
-var defaultIconSize = {
-	smallest: 16,
-	small: 18,
-	medium: 20,
-	large: 24
-};
-var IconButtonInner = ({ children, className, size = "medium", variant = "ghost", shape = "circular", disabled, toggled, component, onClick, ...props }, ref) => {
-	const bgClasses = variant === "ghost" ? "bg-transparent hover:bg-surface-hover" : "bg-surface-raised hover:bg-surface-raised-hover";
-	const Component = component || "button";
-	const isNativeButton = Component === "button";
-	const sizedChildren = React.Children.map(children, (child) => {
-		if (!React.isValidElement(child)) return child;
-		if (child.props.size !== void 0) return child;
-		return React.cloneElement(child, { size: defaultIconSize[size] });
-	});
-	return /* @__PURE__ */ jsx(Component, {
-		type: isNativeButton ? "button" : void 0,
-		role: isNativeButton ? void 0 : "button",
-		ref,
-		disabled: isNativeButton ? disabled : void 0,
-		"aria-disabled": disabled || void 0,
-		tabIndex: disabled ? -1 : void 0,
-		onClick: disabled ? void 0 : onClick,
-		...props,
-		className: cls(disabled ? "opacity-50 pointer-events-none" : "cursor-pointer", toggled ? "outline outline-2 outline-primary" : "", "text-inherit dark:text-inherit", colorClasses$1, bgClasses, baseClasses, buttonClasses, shapeClasses[shape], sizeClasses$1[size], className),
-		children: sizedChildren
-	});
-};
-var IconButton = React.forwardRef(IconButtonInner);
-//#endregion
 //#region src/components/InputLabel.tsx
 var defaultClasses = {
 	root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-ellipsis max-w-full",
@@ -4003,6 +4017,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 	useInjectStyles("DateTimeField", inputStyles);
 	const handleClear = (e) => {
 		e.preventDefault();
+		if (disabled) return;
 		setInternalValue("");
 		setIsTyping(false);
 		onChange?.(null);
@@ -4144,15 +4159,21 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 				}),
 				pickerButton && /* @__PURE__ */ jsx(IconButton, {
 					size: adornmentSize,
+					"aria-label": "Open calendar",
+					disabled,
 					onClick: (e) => {
 						e.stopPropagation();
-						inputRef.current?.showPicker();
+						try {
+							inputRef.current?.showPicker();
+						} catch {}
 					},
 					className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-surface-accent-500!",
 					children: /* @__PURE__ */ jsx(CalendarIcon$1, {})
 				}),
 				clearable && value && /* @__PURE__ */ jsx(IconButton, {
 					size: adornmentSize,
+					"aria-label": "Clear date",
+					disabled,
 					onClick: handleClear,
 					className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ",
 					children: /* @__PURE__ */ jsx(XIcon$1, {})
@@ -4247,6 +4268,82 @@ function useRestoreInterruptedFocus(container) {
 	}, [container]);
 }
 //#endregion
+//#region src/hooks/useModalFocus.ts
+function currentFocus() {
+	if (typeof document === "undefined") return null;
+	const active = document.activeElement;
+	if (!(active instanceof HTMLElement) || active === document.body) return null;
+	const layer = active.closest("[role=menu], [role=listbox]");
+	if (layer instanceof HTMLElement && layer.id && layer !== active) {
+		const trigger = Array.from(document.querySelectorAll("[aria-controls]")).find((el) => el.getAttribute("aria-controls") === layer.id);
+		if (trigger instanceof HTMLElement && !layer.contains(trigger)) return trigger;
+	}
+	return active;
+}
+/**
+* Where focus goes when a kit modal (`Dialog`, `Sheet`) opens and closes.
+*
+* Both used to cancel Radix's open-focus and do nothing else, so focus stayed
+* on the trigger behind the modal — which Radix had just hidden from assistive
+* technology with `aria-hidden`. A screen reader announced nothing, and Enter
+* pressed again fired the trigger a second time underneath the open modal.
+*
+* On open, focus moves into the modal: to `initialFocus` when the caller names
+* an element, otherwise to the modal's own container (it carries
+* `tabIndex=-1`). The container rather than the first field, because the first
+* field on a phone raises the keyboard over a form the user has not started,
+* and because the container is what a screen reader announces by its title.
+* The first Tab then lands on the first control.
+*
+* On close, focus goes back to whatever had it when the modal opened. Radix
+* only returns it to a `Dialog.Trigger`, and the kit's modals are controlled —
+* there is no trigger — so focus used to fall to `<body>` and the next Tab
+* started from the top of the page.
+*
+* The origin is read while rendering the open edge, not from the open-focus
+* event: a field with `autoFocus` inside the modal has taken focus by the time
+* any effect runs, and Radix then skips the event altogether. When the origin
+* is an item in a menu, the menu's trigger is recorded instead: the item is
+* gone a moment later, and the menu does not take focus back to its trigger
+* once the modal has it.
+*
+* Internal to the kit's modals — not exported.
+*/
+function useModalFocus({ open, initialFocus, focusContainer = true, onOpenAutoFocus, onCloseAutoFocus }) {
+	const [origin, setOrigin] = useState(() => open ? currentFocus() : null);
+	const [wasOpen, setWasOpen] = useState(open);
+	if (open !== wasOpen) {
+		setWasOpen(open);
+		if (open) setOrigin(currentFocus());
+	}
+	return {
+		onOpenAutoFocus: useCallback((event) => {
+			onOpenAutoFocus?.(event);
+			if (event.defaultPrevented) return;
+			const target = initialFocus?.current;
+			if (target) {
+				event.preventDefault();
+				target.focus({ preventScroll: true });
+				return;
+			}
+			if (!focusContainer) return;
+			event.preventDefault();
+			const container = event.currentTarget;
+			if (container instanceof HTMLElement) container.focus({ preventScroll: true });
+		}, [
+			initialFocus,
+			focusContainer,
+			onOpenAutoFocus
+		]),
+		onCloseAutoFocus: useCallback((event) => {
+			onCloseAutoFocus?.(event);
+			if (event.defaultPrevented) return;
+			event.preventDefault();
+			if (origin?.isConnected) origin.focus({ preventScroll: true });
+		}, [origin, onCloseAutoFocus])
+	};
+}
+//#endregion
 //#region src/components/Dialog.tsx
 var widthClasses = {
 	xs: "max-w-xs w-xs",
@@ -4262,11 +4359,20 @@ var widthClasses = {
 	"7xl": "max-w-7xl w-7xl",
 	full: "max-w-full w-full"
 };
-var Dialog = ({ open, onOpenChange, children, className, containerClassName, fullWidth = true, fullHeight, fullScreen, scrollable = true, maxWidth = "lg", modal = true, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, disableInitialFocus = true, portalContainer, "aria-describedby": ariaDescribedby }) => {
+var Dialog = ({ open, onOpenChange, children, className, containerClassName, fullWidth = true, fullHeight, fullScreen, scrollable = true, maxWidth = "lg", modal = true, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, dismissOnBackdrop = false, initialFocus, disableInitialFocus = true, portalContainer, "aria-describedby": ariaDescribedby }) => {
 	const [displayed, setDisplayed] = useState(false);
 	const [popupHost, setPopupHost] = useState(null);
 	const [contentEl, setContentEl] = useState(null);
 	useRestoreInterruptedFocus(contentEl);
+	const [overlayEl, setOverlayEl] = useState(null);
+	const [layerEl, setLayerEl] = useState(null);
+	const focus = useModalFocus({
+		open: Boolean(open),
+		initialFocus,
+		focusContainer: disableInitialFocus,
+		onOpenAutoFocus,
+		onCloseAutoFocus
+	});
 	const contextContainer = usePortalContainer();
 	const finalContainer = portalContainer ?? contextContainer ?? void 0;
 	useEffect(() => {
@@ -4287,23 +4393,29 @@ var Dialog = ({ open, onOpenChange, children, className, containerClassName, ful
 		children: /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
 			container: finalContainer,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cls("fixed inset-0 z-50", containerClassName),
+				ref: setLayerEl,
+				className: cls("fixed inset-0 z-50 flex justify-center items-center", containerClassName),
 				children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
-					className: cls("fixed inset-0 transition-opacity ease-in-out duration-200 bg-black/50 dark:bg-black/60 backdrop-blur-sm", displayed && open ? "opacity-100" : "opacity-0", "z-50 fixed top-0 left-0 w-full h-full flex justify-center items-center"),
+					ref: setOverlayEl,
+					className: cls("fixed inset-0 transition-opacity ease-in-out duration-200 bg-black/50 dark:bg-black/60 backdrop-blur-sm", displayed && open ? "opacity-100" : "opacity-0", "z-50 fixed top-0 left-0 w-full h-full"),
 					style: { pointerEvents: displayed ? "auto" : "none" }
 				}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 					ref: setContentEl,
 					onEscapeKeyDown,
-					onOpenAutoFocus: (e) => {
-						if (disableInitialFocus) e.preventDefault();
-						onOpenAutoFocus?.(e);
+					onOpenAutoFocus: focus.onOpenAutoFocus,
+					onCloseAutoFocus: focus.onCloseAutoFocus,
+					onPointerDownOutside: (e) => {
+						onPointerDownOutside?.(e);
+						if (e.defaultPrevented) return;
+						const target = e.target;
+						if (!dismissOnBackdrop || !(target === overlayEl || target === layerEl)) e.preventDefault();
 					},
-					onPointerDownOutside,
+					onFocusOutside: (e) => e.preventDefault(),
 					onInteractOutside,
 					"aria-describedby": ariaDescribedby,
-					className: cls("relative h-full outline-none flex justify-center items-center z-60 opacity-100 transition-all duration-200 ease-in-out"),
+					className: cls("relative z-60 outline-none", focusedDisabled, fullWidth && !fullScreen ? "w-11/12" : void 0, fullHeight && !fullScreen ? "h-[90vh]" : void 0, fullScreen ? "h-screen w-screen" : void 0, maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0),
 					children: [/* @__PURE__ */ jsx("div", {
-						className: cls(paperMixin, "rounded-2xl", "z-60", "relative", "overflow-hidden", "outline-none focus:outline-none", fullWidth && !fullScreen ? "w-11/12" : void 0, fullHeight && !fullScreen ? "h-full" : void 0, "text-text-primary dark:text-text-primary-dark", "justify-center items-center", fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg", "ease-in-out duration-200", scrollable && "overflow-y-auto", displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]", maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0, className),
+						className: cls(paperMixin, "rounded-2xl", "z-60", "relative", "w-full", "overflow-hidden", "outline-none focus:outline-none", fullHeight || fullScreen ? "h-full" : void 0, "text-text-primary dark:text-text-primary-dark", "justify-center items-center", fullScreen ? void 0 : "max-h-[90vh] shadow-lg", "ease-in-out duration-200", scrollable && "overflow-y-auto", displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]", className),
 						children: /* @__PURE__ */ jsx(PortalContainerProvider, {
 							container: popupHost,
 							children
@@ -4409,6 +4521,12 @@ function ExpandablePanel({ title, children, invisible = false, expanded, onExpan
 				role: "button",
 				tabIndex: 0,
 				"aria-expanded": open,
+				onKeyDown: (event) => {
+					if (event.target !== event.currentTarget) return;
+					if (event.key !== "Enter" && event.key !== " ") return;
+					event.preventDefault();
+					event.currentTarget.click();
+				},
 				children: [title, /* @__PURE__ */ jsx(ChevronDownIcon$1, { className: cls("transition", open ? "rotate-180" : "") })]
 			})
 		}), /* @__PURE__ */ jsx(Collapsible.Content, {
@@ -4517,12 +4635,11 @@ var Label = React$1.forwardRef(({ className, border, onClick, ...props }, ref) =
 Label.displayName = LabelPrimitive.Root.displayName;
 //#endregion
 //#region src/components/LoadingButton.tsx
-function LoadingButton({ children, loading, disabled, onClick, startIcon, ...props }) {
+function LoadingButton({ children, loading, startIcon, ...props }) {
+	const buttonProps = props;
 	return /* @__PURE__ */ jsxs(Button, {
-		disabled: loading || disabled,
-		onClick,
-		component: props.component,
-		...props,
+		...buttonProps,
+		disabled: loading || buttonProps.disabled,
 		children: [
 			loading && /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }),
 			!loading && startIcon,
@@ -4787,7 +4904,7 @@ function MultiSelectTrigger({ anchorRef, children }) {
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { virtualRef: anchorRef }), children] });
 }
-var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onValueChange, invisible, chevron = true, anchorRef, disabled, placeholder, modalPopover = true, includeClear = true, includeSelectAll = true, useChips = true, className, inputClassName, inputRef, children, renderValues, open, onOpenChange, portalContainer, "aria-label": ariaLabel }, ref) => {
+var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onValueChange, invisible, chevron = true, anchorRef, triggerContent, disabled, placeholder, modalPopover = true, includeClear = true, includeSelectAll = true, useChips = true, className, inputClassName, inputRef, children, renderValues, open, onOpenChange, portalContainer, "aria-label": ariaLabel }, ref) => {
 	const [isMounted, setIsMounted] = useState(false);
 	const [isPopoverOpen, setIsPopoverOpen] = useState(open ?? false);
 	const [selectedValues, setSelectedValues] = useState(value ?? []);
@@ -4860,6 +4977,7 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 		fieldValue: selectedValues,
 		onItemClick
 	}), [selectedValues, onItemClick]);
+	const bare = triggerContent !== void 0;
 	return /* @__PURE__ */ jsxs(MultiSelectContext.Provider, {
 		value: contextValue,
 		children: [typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, {
@@ -4876,7 +4994,7 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 					disabled,
 					"aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
 					onClick: handleTogglePopover,
-					className: cls(invisible ? {
+					className: bare ? cls("relative flex items-center w-full text-start select-none outline-none focus:outline-none focus-visible:outline-none", className, inputClassName) : cls(invisible ? {
 						smallest: "min-h-[28px]",
 						small: "min-h-[32px]",
 						medium: "min-h-[40px]",
@@ -4893,8 +5011,8 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 					}, {
 						"px-2": size === "small" || size === "smallest",
 						"px-4": size === "medium" || size === "large"
-					}, "select-none rounded-lg text-sm", "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : invisible ? "" : fieldBackgroundHoverMixin, "relative flex items-center", className, inputClassName),
-					children: selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", {
+					}, "select-none rounded-lg text-sm", "outline-none focus:outline-none focus-visible:outline-none", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : invisible ? "" : fieldBackgroundHoverMixin, "relative flex items-center", className, inputClassName),
+					children: bare ? triggerContent : selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", {
 						className: "flex justify-between items-center w-full",
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex flex-wrap items-center gap-1.5 text-start",
@@ -5211,7 +5329,7 @@ function SearchBar({ onClick, onTextSearch, placeholder = "Search", expandable =
 }
 //#endregion
 //#region src/components/Select.tsx
-var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenChange, value, onChange, onValueChange, className, inputClassName, viewportClassName, placeholder, renderValue, label, size = "large", error, disabled, padding = true, position = "item-aligned", endAdornment, invisible, chevron = true, children, dataType = "string", portalContainer: manualContainer, "aria-label": ariaLabel, ...props }, ref) => {
+var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenChange, value, onChange, onValueChange, className, inputClassName, viewportClassName, placeholder, renderValue, label, size = "large", error, disabled, padding = true, position = "item-aligned", endAdornment, invisible, chevron = true, triggerContent, children, dataType = "string", portalContainer: manualContainer, "aria-label": ariaLabel, ...props }, ref) => {
 	const [openInternal, setOpenInternal] = useState(open ?? false);
 	useEffect(() => {
 		setOpenInternal(open ?? false);
@@ -5263,6 +5381,17 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 		stringValue,
 		value
 	]);
+	const bare = triggerContent !== void 0;
+	const bareContent = bare ? /* @__PURE__ */ jsx("div", {
+		className: "flex w-full",
+		children: triggerContent
+	}) : void 0;
+	const controlHeight = {
+		"min-h-[28px]": size === "smallest",
+		"min-h-[32px]": size === "small",
+		"min-h-[40px]": size === "medium",
+		"min-h-[48px]": size === "large"
+	};
 	return /* @__PURE__ */ jsxs(SelectPrimitive.Root, {
 		name,
 		value: stringValue,
@@ -5280,11 +5409,7 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 				children: label
 			}) : label,
 			/* @__PURE__ */ jsxs("div", {
-				className: cls("select-none rounded-lg text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : invisible ? "" : fieldBackgroundHoverMixin, "relative flex items-center", className, {
-					"min-h-[28px]": size === "smallest",
-					"min-h-[32px]": size === "small",
-					"min-h-[40px]": size === "medium",
-					"min-h-[48px]": size === "large",
+				className: cls("select-none", !bare && "rounded-lg text-sm", !bare && (invisible ? "bg-transparent" : "bg-surface-field border border-hairline"), !bare && (disabled ? "bg-surface-field/60" : invisible ? "" : "transition-colors duration-150 hover:bg-surface-field-hover"), "relative flex items-center", className, !bare && controlHeight, {
 					"w-fit": !fullWidth,
 					"w-full": fullWidth
 				}),
@@ -5295,36 +5420,33 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 					type: "button",
 					"aria-label": ariaLabel ?? (typeof label === "string" ? label : typeof renderValue === "string" ? renderValue : "Select an option"),
 					"aria-invalid": error || void 0,
-					className: cls("h-full", padding ? {
+					className: cls("h-full", padding && !bare ? {
 						"px-4": size === "large",
 						"px-3": size === "medium",
 						"px-2": size === "small" || size === "smallest"
-					} : "", "outline-hidden focus:outline-hidden", "outline-none focus:outline-none", "select-none rounded-lg text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
-						"min-h-[28px]": size === "smallest",
-						"min-h-[32px]": size === "small",
-						"min-h-[40px]": size === "medium",
-						"min-h-[48px]": size === "large",
+					} : "", "outline-hidden focus:outline-hidden", "outline-none focus:outline-none", "select-none", !bare && [
+						"rounded-lg text-sm",
+						error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
+						error ? "border border-red-500 dark:border-red-600" : "",
+						disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
+						controlHeight
+					], "relative flex flex-row items-center", {
 						"w-full": fullWidth,
 						"w-fit": !fullWidth
 					}, inputClassName),
 					children: [/* @__PURE__ */ jsx("div", {
 						ref,
-						className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
-							"min-h-[28px]": size === "smallest",
-							"min-h-[32px]": size === "small",
-							"min-h-[40px]": size === "medium",
-							"min-h-[48px]": size === "large"
-						}),
+						className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", !bare && controlHeight),
 						children: /* @__PURE__ */ jsx(SelectPrimitive.Value, {
 							onClick: (e) => {
 								e.preventDefault();
 								e.stopPropagation();
 							},
-							placeholder: emptyItemDisplay ?? placeholder,
+							placeholder: bareContent ?? emptyItemDisplay ?? placeholder,
 							className: "w-full",
-							children: hasValue && value !== void 0 && renderValue ? renderValue(value) : displayChildren || placeholder
+							children: bareContent ?? (hasValue && value !== void 0 && renderValue ? renderValue(value) : displayChildren || placeholder)
 						})
-					}), chevron && /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
+					}), chevron && !bare && /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 						asChild: true,
 						children: /* @__PURE__ */ jsx(ChevronDownIcon$1, {
 							size: size === "large" ? iconSize.medium : iconSize.small,
@@ -5426,10 +5548,16 @@ var Slider = React$1.forwardRef(({ className, size = "regular", ...props }, ref)
 Slider.displayName = "Slider";
 //#endregion
 //#region src/components/Sheet.tsx
-var Sheet = ({ children, side = "right", title, modal = true, includeBackgroundOverlay = true, open, onOpenChange, onPointerDownOutside, onInteractOutside, transparent, className, style, overlayClassName, overlayZIndex = "z-50", overlayStyle, portalContainer, ...props }) => {
+var Sheet = ({ children, side = "right", title, modal = true, includeBackgroundOverlay = true, open, onOpenChange, onPointerDownOutside, onInteractOutside, initialFocus, onOpenAutoFocus, onCloseAutoFocus, transparent, className, style, overlayClassName, overlayZIndex = "z-50", overlayStyle, portalContainer, ...props }) => {
 	const [displayed, setDisplayed] = useState(false);
 	const [contentEl, setContentEl] = useState(null);
 	useRestoreInterruptedFocus(contentEl);
+	const focus = useModalFocus({
+		open,
+		initialFocus,
+		onOpenAutoFocus,
+		onCloseAutoFocus
+	});
 	const contextContainer = usePortalContainer();
 	const finalContainer = portalContainer ?? contextContainer ?? void 0;
 	useEffect(() => {
@@ -5462,7 +5590,8 @@ var Sheet = ({ children, side = "right", title, modal = true, includeBackgroundO
 			}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 				...props,
 				ref: setContentEl,
-				onOpenAutoFocus: (event) => event.preventDefault(),
+				onOpenAutoFocus: focus.onOpenAutoFocus,
+				onCloseAutoFocus: focus.onCloseAutoFocus,
 				onPointerDownOutside,
 				onInteractOutside,
 				className: cls("outline-none", borderClass[side], defaultBorderMixin, "text-surface-accent-900 dark:text-white", "fixed transform z-50 transition-[transform,opacity] ease-in-out", !displayed ? "duration-150" : "duration-100", "outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0", transparent ? "" : "shadow-md bg-surface-card", side === "top" || side === "bottom" ? "w-full" : "h-full", side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0", displayed && open ? "opacity-100" : "opacity-50", !displayed || !open ? transformValue[side] : "", className),
@@ -6023,42 +6152,48 @@ Badge.displayName = "Badge";
 //#endregion
 //#region src/components/DebouncedTextField.tsx
 function DebouncedTextField(props) {
-	const [internalValue, setInternalValue] = useState(props.value ?? "");
-	const lastSentValueRef = useRef(props.value ?? "");
+	const { value, onChange, name, onKeyDown, onBlur } = props;
+	const [internalValue, setInternalValue] = useState(value ?? "");
+	const lastSentValueRef = useRef(value ?? "");
 	const timerRef = useRef(void 0);
 	useEffect(() => {
-		const externalValue = props.value ?? "";
+		const externalValue = value ?? "";
 		if (externalValue !== lastSentValueRef.current) {
 			setInternalValue(externalValue);
 			lastSentValueRef.current = externalValue;
 		}
-	}, [props.value]);
+	}, [value]);
+	const pendingFlushRef = useRef(void 0);
 	useEffect(() => {
 		return () => {
-			if (timerRef.current) clearTimeout(timerRef.current);
+			if (timerRef.current) {
+				clearTimeout(timerRef.current);
+				timerRef.current = void 0;
+				pendingFlushRef.current?.();
+			}
 		};
 	}, []);
-	const flushChange = useCallback((value, event) => {
+	const flushChange = useCallback((next, event) => {
 		if (timerRef.current) {
 			clearTimeout(timerRef.current);
 			timerRef.current = void 0;
 		}
-		if (value !== props.value && props.onChange) {
-			lastSentValueRef.current = value;
+		if (next !== value && onChange) {
+			lastSentValueRef.current = next;
 			const e = {
 				...event,
 				target: {
 					...event?.target,
-					value,
-					name: props.name
+					value: next,
+					name
 				}
 			};
-			props.onChange(e);
+			onChange(e);
 		}
 	}, [
-		props.value,
-		props.onChange,
-		props.name
+		value,
+		onChange,
+		name
 	]);
 	const internalOnChange = useCallback((event) => {
 		const newValue = event.target.value;
@@ -6071,21 +6206,31 @@ function DebouncedTextField(props) {
 				name: event?.target?.name
 			}
 		};
+		pendingFlushRef.current = () => flushChange(newValue, eventCopy);
 		timerRef.current = setTimeout(() => {
 			flushChange(newValue, eventCopy);
 		}, 150);
 	}, [flushChange]);
+	const internalOnKeyDown = useCallback((event) => {
+		if (event.key === "Enter" && timerRef.current) flushChange(internalValue);
+		onKeyDown?.(event);
+	}, [
+		internalValue,
+		flushChange,
+		onKeyDown
+	]);
 	const internalOnBlur = useCallback((event) => {
 		flushChange(internalValue, event);
-		props.onBlur?.(event);
+		onBlur?.(event);
 	}, [
 		internalValue,
 		flushChange,
-		props.onBlur
+		onBlur
 	]);
 	return /* @__PURE__ */ jsx(TextField, {
 		...props,
 		onChange: internalOnChange,
+		onKeyDown: internalOnKeyDown,
 		onBlur: internalOnBlur,
 		value: internalValue
 	});
@@ -7104,14 +7249,11 @@ function VirtualTableNumberInput(props) {
 		if (inputRef.current && focused) inputRef.current.focus({ preventScroll: true });
 	}, [focused, inputRef]);
 	const regexp = /^-?[0-9]+[,.]?[0-9]*$/;
-	return /* @__PURE__ */ jsx(TextField, {
-		inputRef,
-		invisible: true,
+	return /* @__PURE__ */ jsx("input", {
+		ref: inputRef,
 		disabled,
-		size: "small",
-		className: "w-full",
-		inputClassName: cls("p-0 m-0 bg-transparent border-none outline-hidden font-normal leading-normal text-unset", focusedDisabled),
-		inputStyle: { textAlign: align },
+		className: cls("w-full p-0 m-0 bg-transparent border-none outline-none font-mono tabular-nums", focusedDisabled),
+		style: { textAlign: align },
 		value: internalValue ?? "",
 		onChange: (evt) => {
 			const newValue = evt.target.value.replace(",", ".");
@@ -7276,6 +7418,76 @@ function VirtualTableSelect(props) {
 	});
 }
 //#endregion
+//#region src/views/useScrollParentRestoration.ts
+/**
+* The nearest ancestor that scrolls vertically. The list and card views do not
+* scroll themselves: the page around them does, so that is the element whose
+* offset is worth keeping.
+*/
+function getScrollParent(element) {
+	if (!element) return null;
+	let parent = element.parentElement;
+	while (parent) {
+		const overflowY = window.getComputedStyle(parent).overflowY;
+		if (overflowY === "auto" || overflowY === "scroll") return parent;
+		parent = parent.parentElement;
+	}
+	return document.documentElement;
+}
+/**
+* Report the scroll parent's offset through `onScroll`, and put it back at
+* `initialScroll` once there are rows to scroll over.
+*
+* Opening a record full screen unmounts the collection view, so coming back
+* mounts a fresh one. The caller keeps the offset (and the rows it was over)
+* outside the component; this is what hands it over and applies it again.
+*/
+function useScrollParentRestoration({ containerRef, initialScroll, onScroll, dataLength }) {
+	const restoreTo = useRef(initialScroll);
+	useEffect(() => {
+		const target = restoreTo.current;
+		if (!containerRef.current || !target || dataLength === 0) return;
+		const scrollEl = getScrollParent(containerRef.current);
+		if (!scrollEl) return;
+		let attempts = 0;
+		const maxAttempts = 5;
+		let rafId = null;
+		const tryRestore = () => {
+			rafId = null;
+			if (scrollEl.scrollHeight >= target || attempts >= maxAttempts) {
+				scrollEl.scrollTop = target;
+				restoreTo.current = void 0;
+			} else {
+				attempts++;
+				rafId = requestAnimationFrame(tryRestore);
+			}
+		};
+		rafId = requestAnimationFrame(tryRestore);
+		return () => {
+			if (rafId !== null) cancelAnimationFrame(rafId);
+		};
+	}, [containerRef, dataLength]);
+	const lastScrollOffset = useRef(0);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el || !onScroll) return;
+		const scrollEl = getScrollParent(el);
+		if (!scrollEl) return;
+		const handleScroll = () => {
+			const currentOffset = scrollEl.scrollTop;
+			const direction = currentOffset > lastScrollOffset.current ? "forward" : "backward";
+			lastScrollOffset.current = currentOffset;
+			onScroll({
+				scrollDirection: direction,
+				scrollOffset: currentOffset,
+				scrollUpdateWasRequested: false
+			});
+		};
+		scrollEl.addEventListener("scroll", handleScroll, { passive: true });
+		return () => scrollEl.removeEventListener("scroll", handleScroll);
+	}, [containerRef, onScroll]);
+}
+//#endregion
 //#region src/views/ListView.tsx
 function getEstimatedRowHeight(size) {
 	switch (size) {
@@ -7289,16 +7501,7 @@ function getEstimatedRowHeight(size) {
 }
 var OVERSCAN_COUNT = 8;
 var LOAD_MORE_THRESHOLD = 400;
-function getScrollParent$1(element) {
-	let parent = element?.parentElement ?? null;
-	while (parent) {
-		const style = getComputedStyle(parent);
-		if (style.overflowY === "auto" || style.overflowY === "scroll" || style.overflow === "auto" || style.overflow === "scroll") return parent;
-		parent = parent.parentElement;
-	}
-	return document.documentElement;
-}
-function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoadingError, itemCount, setItemCount, pageSize = 50, paginationEnabled = true, onItemClick, selectedIds, highlightedIds, selectionEnabled = true, onSelectionChange, emptyComponent, size = "m", selectedEntityId, header, renderRow }) {
+function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoadingError, itemCount, setItemCount, pageSize = 50, paginationEnabled = true, onItemClick, selectedIds, highlightedIds, selectionEnabled = true, onSelectionChange, emptyComponent, onScroll, initialScroll, size = "m", selectedEntityId, header, renderRow }) {
 	const containerRef = useRef(null);
 	const rowsRef = useRef(null);
 	const isLoadingMore = useRef(false);
@@ -7330,7 +7533,7 @@ function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 	useEffect(() => {
 		const el = containerRef.current;
 		if (!el) return;
-		const scrollEl = getScrollParent$1(el);
+		const scrollEl = getScrollParent(el);
 		if (!scrollEl) return;
 		let rafId = null;
 		const update = () => {
@@ -7345,19 +7548,25 @@ function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 				setItemCount?.((ic ?? ps) + ps);
 			}
 		};
-		const onScroll = () => {
+		const onScrollEvent = () => {
 			if (rafId === null) rafId = requestAnimationFrame(update);
 		};
-		scrollEl.addEventListener("scroll", onScroll, { passive: true });
+		scrollEl.addEventListener("scroll", onScrollEvent, { passive: true });
 		const ro = new ResizeObserver(() => update());
 		ro.observe(scrollEl);
 		update();
 		return () => {
-			scrollEl.removeEventListener("scroll", onScroll);
+			scrollEl.removeEventListener("scroll", onScrollEvent);
 			ro.disconnect();
 			if (rafId !== null) cancelAnimationFrame(rafId);
 		};
 	}, [setItemCount]);
+	useScrollParentRestoration({
+		containerRef,
+		initialScroll,
+		onScroll,
+		dataLength: data.length
+	});
 	const totalHeight = data.length * estimatedRowHeight;
 	const startIndex = Math.max(0, Math.floor(effectiveScrollTop / estimatedRowHeight) - OVERSCAN_COUNT);
 	const endIndex = Math.min(data.length, Math.ceil((effectiveScrollTop + viewportHeight) / estimatedRowHeight) + OVERSCAN_COUNT);
@@ -7484,19 +7693,8 @@ function getGridColumnsClass(size) {
 		default: return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
 	}
 }
-function getScrollParent(element) {
-	if (!element) return null;
-	let parent = element.parentElement;
-	while (parent) {
-		const overflowY = window.getComputedStyle(parent).overflowY;
-		if (overflowY === "auto" || overflowY === "scroll") return parent;
-		parent = parent.parentElement;
-	}
-	return document.documentElement;
-}
 function CardView({ data, dataLoading = false, noMoreToLoad = false, dataLoadingError, itemCount, setItemCount, pageSize = 50, paginationEnabled = true, onItemClick, selectedIds, highlightedIds, selectionEnabled = true, onSelectionChange, onScroll, initialScroll, size = "m", renderCard, emptyComponent }) {
 	const containerRef = useRef(null);
-	const hasRestoredScroll = useRef(false);
 	const isLoadingMore = useRef(false);
 	const paginationStateRef = useRef({
 		paginationEnabled,
@@ -7547,42 +7745,12 @@ function CardView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 			if (rafId !== null) cancelAnimationFrame(rafId);
 		};
 	}, [setItemCount]);
-	useEffect(() => {
-		if (!containerRef.current || !initialScroll || hasRestoredScroll.current || data.length === 0) return;
-		const scrollEl = getScrollParent(containerRef.current);
-		if (!scrollEl) return;
-		let attempts = 0;
-		const maxAttempts = 5;
-		const tryRestore = () => {
-			if (scrollEl.scrollHeight >= initialScroll || attempts >= maxAttempts) {
-				scrollEl.scrollTop = initialScroll;
-				hasRestoredScroll.current = true;
-			} else {
-				attempts++;
-				requestAnimationFrame(tryRestore);
-			}
-		};
-		requestAnimationFrame(tryRestore);
-	}, [initialScroll, data.length]);
-	const lastScrollOffset = useRef(0);
-	useEffect(() => {
-		const el = containerRef.current;
-		if (!el || !onScroll) return;
-		const scrollEl = getScrollParent(el);
-		if (!scrollEl) return;
-		const handleScroll = () => {
-			const currentOffset = scrollEl.scrollTop;
-			const direction = currentOffset > lastScrollOffset.current ? "forward" : "backward";
-			lastScrollOffset.current = currentOffset;
-			onScroll({
-				scrollDirection: direction,
-				scrollOffset: currentOffset,
-				scrollUpdateWasRequested: false
-			});
-		};
-		scrollEl.addEventListener("scroll", handleScroll, { passive: true });
-		return () => scrollEl.removeEventListener("scroll", handleScroll);
-	}, [onScroll]);
+	useScrollParentRestoration({
+		containerRef,
+		initialScroll,
+		onScroll,
+		dataLength: data.length
+	});
 	const getItemId = useCallback((item) => {
 		if (item && typeof item === "object" && "id" in item) {
 			const id = item.id;
@@ -9357,6 +9525,40 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
 	});
 }
 //#endregion
-export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, CONTROL_HEIGHT, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionView, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, LucideIconByName, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftCloseIcon, PanelLeftIcon, PanelLeftOpenIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, accentTextMixin, cardClickableMixin, cardMixin, cardSelectedMixin, cls, codeSurfaceMixin, colorClassesMapping, controlHeightMixin, controlPaddingMixin, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, getLoadedLucideIcons, iconKeys, iconSize, isChunkLoadError, lazyChunk, loadChunk, loadLucideIcons, lucideIcons, paperMixin, resolveLucideIcon, surfaceActiveMixin, surfaceHoverMixin, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useIsDarkMode, useLucideIcons, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
+//#region src/util/keys.ts
+/**
+* Whether a key event has already been handled by something above you — the
+* one question every global key handler (a `keydown` listener on `window` or
+* `document`) must ask before acting.
+*
+* The rule: **a handler that acts on a key calls `event.preventDefault()`;
+* a global handler that finds the event already handled does nothing.** Every
+* kit overlay follows it for free — `Dialog`, `Sheet`, `Popover`, `Menu`,
+* `Select`, `MultiSelect`, `Tooltip` are Radix layers, and a Radix layer calls
+* `preventDefault()` on the Escape it consumes to close itself. So Escape
+* pressed in an open dropdown closes the dropdown, and the record panel's
+* Escape handler underneath sees it handled and leaves the record open.
+*
+* Two conditions make it hold:
+*
+*  - **Listen in the bubble phase.** A Radix layer listens on `document` in
+*    the capture phase, so it has run before any bubble listener — on the
+*    target, on `document` or on `window` — whatever order they were added in.
+*    A capture listener added before the layer opened runs *before* it and
+*    cannot see its claim. Only a layer of your own, one that sits above
+*    everything else while it is open, belongs in the capture phase, and it
+*    must call `preventDefault()` when it acts.
+*  - **Do not ask the DOM instead.** `document.querySelector('[role="dialog"]')`
+*    misses every layer that is not a dialog (a menu is `role="menu"`, a select
+*    list `role="listbox"`), and the list of roles is never finished.
+*
+* An IME composition counts as handled too: Escape while composing Japanese or
+* Chinese text cancels the composition, and must not close a panel.
+*/
+function isKeyHandled(event) {
+	return event.defaultPrevented || event.isComposing;
+}
+//#endregion
+export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, CONTROL_HEIGHT, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionView, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, LucideIconByName, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftCloseIcon, PanelLeftIcon, PanelLeftOpenIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, accentTextMixin, cardClickableMixin, cardMixin, cardSelectedMixin, cls, codeSurfaceMixin, colorClassesMapping, controlHeightMixin, controlPaddingMixin, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, getLoadedLucideIcons, iconKeys, iconSize, isChunkLoadError, isKeyHandled, lazyChunk, loadChunk, loadLucideIcons, lucideIcons, paperMixin, resolveLucideIcon, surfaceActiveMixin, surfaceHoverMixin, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useIsDarkMode, useLucideIcons, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
 
 //# sourceMappingURL=index.es.js.map