@ctrl-ui/react 0.8.6 → 0.8.7

package/dist/ui/combobox.js

@@ -1,9 +1,10 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
+import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
-import { emitComboboxValueChange } from "./combobox-disabled-selection.js";
+import { shouldAcceptComboboxValueChange } from "./combobox-disabled-selection.js";
 import { createContext, use, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
@@ -21,8 +22,8 @@ function Combobox({ children, onValueChange, autoHighlight = true, ...props }) {
 		children: /* @__PURE__ */ jsx(Combobox$1.Root, {
 			autoHighlight,
 			...props,
-			onValueChange: onValueChange ? (value) => {
-				if (!Array.isArray(value)) emitComboboxValueChange(value, disabledValues, onValueChange);
+			onValueChange: onValueChange ? (value, eventDetails) => {
+				if (shouldAcceptComboboxValueChange(value, disabledValues, props.multiple)) onValueChange(value, eventDetails);
 			} : void 0,
 			children
 		})
@@ -76,7 +77,7 @@ function ComboboxInput({ size = "md", className, ...props }) {
 		}), /* @__PURE__ */ jsx(ComboboxTrigger, { className: "absolute right-1.5 top-1/2 -translate-y-1/2" })]
 	});
 }
-function ComboboxContent({ className, children, sideOffset = 6, ...props }) {
+function ComboboxContent({ className, children, sideOffset = 6, anchor, ...props }) {
 	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
 		"data-control-ui": "combobox",
@@ -88,6 +89,7 @@ function ComboboxContent({ className, children, sideOffset = 6, ...props }) {
 		side: "bottom",
 		align: "start",
 		sideOffset,
+		anchor,
 		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
 			"data-control-ui": "combobox",
@@ -103,15 +105,21 @@ function ComboboxContent({ className, children, sideOffset = 6, ...props }) {
 	}) });
 }
 function ComboboxList({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(Combobox$1.List, {
-		"data-control-ui": "combobox",
-		"data-popup-kind": "combobox",
-		"data-slot": "list",
-		"data-control-family": "popup",
-		"data-popup-part": "list-content",
-		className: cn("max-h-[min(18rem,var(--available-height))] overflow-y-auto overscroll-contain", className),
-		...props,
-		children
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		className: "w-full",
+		viewportClassName: "overscroll-contain",
+		maxHeight: "min(18rem, var(--available-height))",
+		lockAxis: "x",
+		children: /* @__PURE__ */ jsx(Combobox$1.List, {
+			"data-control-ui": "combobox",
+			"data-popup-kind": "combobox",
+			"data-slot": "list",
+			"data-control-family": "popup",
+			"data-popup-part": "list-content",
+			className,
+			...props,
+			children
+		})
 	});
 }
 function ComboboxEmpty({ className, children, ...props }) {
@@ -145,6 +153,10 @@ function ComboboxItem({ className, children, disabled, value, ...props }) {
 		className: cn(popupItemStructureClasses, className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "combobox",
+			"data-control-family": "popup",
+			"data-popup-kind": "combobox",
+			"data-slot": "item-text",
 			className: "flex min-w-0 flex-1 items-center truncate",
 			children
 		}), /* @__PURE__ */ jsx("span", {

package/dist/ui/command.js

@@ -4,6 +4,7 @@ import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
+import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Command as Command$1, useCommandState } from "cmdk";
 //#region src/ui/command.tsx
@@ -104,7 +105,14 @@ function CommandListSurface({ hasResults, ...props }) {
 }
 function CommandList({ className, children, ...props }) {
 	const hasResults = useCommandState((state) => state.filtered.count > 0);
+	const search = useCommandState((state) => state.search);
+	const viewportRef = useRef(null);
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => viewportRef.current?.scrollTo({ top: 0 }));
+		return () => cancelAnimationFrame(frame);
+	}, [search]);
 	return /* @__PURE__ */ jsx(ScrollArea, {
+		viewportRef,
 		maxHeight: "min(360px, var(--available-height, 360px))",
 		className: "min-h-0 w-full",
 		children: /* @__PURE__ */ jsx(Command$1.List, {
@@ -166,7 +174,7 @@ function CommandGroup({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "command",
 		"data-slot": "group",
-		className: cn("p-[var(--popover-padding)]", className),
+		className,
 		...props
 	});
 }

package/dist/ui/context-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/dialog.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute, skinAdornment } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/dockable-panel.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
+import { ScrollArea } from "./scroll-area.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
+import { Drawer, DrawerBody, DrawerContent } from "./drawer.js";
 import { clampDockablePanelPosition, dockablePanelSideAt, oppositeDockablePanelSide } from "./dockable-panel-geometry.js";
-import { Drawer, DrawerContent } from "./drawer.js";
 import { createContext, use, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/dockable-panel.tsx
@@ -128,14 +129,16 @@ function DockablePanel({ open: openProp, defaultOpen = true, onOpenChange, place
 			children: /* @__PURE__ */ jsx(DrawerContent, {
 				"data-dockable-panel-root": "",
 				"data-placement": placement,
-				padding: "none",
 				variant: "floating",
 				surface: "card",
 				"aria-label": ariaLabel,
 				className: cn("max-h-[min(82vh,42rem)] gap-0 overflow-hidden", className),
 				style,
 				...props,
-				children
+				children: /* @__PURE__ */ jsx(DrawerBody, {
+					padding: "none",
+					children
+				})
 			})
 		})
 	});
@@ -303,13 +306,18 @@ function DockablePanelClose({ className, children, "aria-label": ariaLabel = "Cl
 	});
 }
 function DockablePanelContent({ padding = "default", className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "dockable-panel",
-		"data-control-family": "dockable-panel",
-		"data-slot": "content",
-		"data-padding": padding,
-		className: cn("min-h-0 flex-1 overflow-y-auto", className),
-		...props
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		className: "flex min-h-0 flex-1 flex-col",
+		viewportClassName: "min-h-0 flex-1",
+		lockAxis: "x",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "dockable-panel",
+			"data-control-family": "dockable-panel",
+			"data-slot": "content",
+			"data-padding": padding,
+			className,
+			...props
+		})
 	});
 }
 function DockablePanelDropZone({ side, active, style }) {

package/dist/ui/drawer.d.ts

@@ -4,8 +4,8 @@ import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
 //#region src/ui/drawer.d.ts
 export declare const drawerSides: readonly ["bottom", "top", "right", "left"];
 export type DrawerSide = (typeof drawerSides)[number];
-export declare const drawerContentPaddings: readonly ["default", "none"];
-export type DrawerContentPadding = (typeof drawerContentPaddings)[number];
+export declare const drawerBodyPaddings: readonly ["default", "none"];
+export type DrawerBodyPadding = (typeof drawerBodyPaddings)[number];
 export declare const drawerContentSurfaces: readonly ["background", "card"];
 export type DrawerContentSurface = (typeof drawerContentSurfaces)[number];
 export declare const drawerContentVariants: readonly ["edge", "floating"];
@@ -19,9 +19,8 @@ export declare function DrawerTrigger({ className, ...props }: ComponentProps<ty
 export declare function DrawerClose({ className, ...props }: ComponentProps<typeof Drawer$1.Close> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-export declare function DrawerContent({ className, children, side, padding, surface, variant, style, ...props }: Omit<ComponentProps<typeof Drawer$1.Popup>, "style"> & {
+export declare function DrawerContent({ className, children, side, surface, variant, style, ...props }: Omit<ComponentProps<typeof Drawer$1.Popup>, "style"> & {
   side?: DrawerSide;
-  padding?: DrawerContentPadding;
   surface?: DrawerContentSurface;
   variant?: DrawerContentVariant;
   style?: CSSProperties & PopupKnobStyle;
@@ -29,6 +28,10 @@ export declare function DrawerContent({ className, children, side, padding, surf
 export declare function DrawerHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
+export declare function DrawerBody({ className, padding, ...props }: Omit<ComponentProps<typeof Drawer$1.Content>, "style"> & {
+  padding?: DrawerBodyPadding;
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
 export declare function DrawerFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;

package/dist/ui/drawer.js

@@ -1,7 +1,8 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
+import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
 //#region src/ui/drawer.tsx
@@ -11,7 +12,7 @@ const drawerSides = [
 	"right",
 	"left"
 ];
-const drawerContentPaddings = ["default", "none"];
+const drawerBodyPaddings = ["default", "none"];
 const drawerContentSurfaces = ["background", "card"];
 const drawerContentVariants = ["edge", "floating"];
 const swipeFor = {
@@ -58,11 +59,16 @@ const placement = {
 		}
 	}
 };
+const DrawerModalContext = createContext(true);
 function Drawer(props) {
-	const { side = "bottom", swipeDirection, ...rest } = props;
-	return /* @__PURE__ */ jsx(Drawer$1.Root, {
-		swipeDirection: swipeDirection ?? swipeFor[side],
-		...rest
+	const { side = "bottom", swipeDirection, modal = true, ...rest } = props;
+	return /* @__PURE__ */ jsx(DrawerModalContext, {
+		value: modal === true,
+		children: /* @__PURE__ */ jsx(Drawer$1.Root, {
+			swipeDirection: swipeDirection ?? swipeFor[side],
+			modal,
+			...rest
+		})
 	});
 }
 function DrawerTrigger({ className, ...props }) {
@@ -83,11 +89,15 @@ function DrawerClose({ className, ...props }) {
 		...props
 	});
 }
-function DrawerContent({ className, children, side = "bottom", padding = "default", surface = "background", variant = "edge", style, ...props }) {
+function DrawerContent({ className, children, side = "bottom", surface = "background", variant = "edge", style, ...props }) {
 	const skin = useSkin();
+	const modal = useContext(DrawerModalContext);
 	const place = placement[variant][side];
 	const grabbable = side === "bottom" || side === "top";
-	const backdropStyle = style ? { "--cui-popup-backdrop-background": style["--cui-popup-backdrop-background"] } : void 0;
+	const backdropStyle = style ? {
+		"--cui-popup-backdrop-background": style["--cui-popup-backdrop-background"],
+		"--cui-popup-backdrop-blur": style["--cui-popup-backdrop-blur"]
+	} : void 0;
 	return /* @__PURE__ */ jsxs(Drawer$1.Portal, { children: [/* @__PURE__ */ jsx(Drawer$1.Backdrop, {
 		"data-control-ui": "drawer",
 		"data-control-family": "popup",
@@ -96,7 +106,7 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 		"data-slot": "backdrop",
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: "fixed inset-0 z-(--z-overlay)",
+		className: cn("fixed inset-0 z-(--z-overlay)", !modal && "pointer-events-none"),
 		style: backdropStyle
 	}), /* @__PURE__ */ jsx(Drawer$1.Viewport, {
 		"data-control-ui": "drawer",
@@ -107,7 +117,7 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 		"data-variant": variant,
 		"data-skin": skin.id,
 		"data-effects": controlEffectsAttribute(skin.effects),
-		className: cn("fixed inset-0 z-(--z-modal) flex", place.viewport),
+		className: cn("fixed inset-0 z-(--z-modal) flex", place.viewport, !modal && "pointer-events-none"),
 		children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
 			"data-control-ui": "drawer",
 			"data-control-family": "popup",
@@ -116,10 +126,9 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 			"data-slot": "content",
 			"data-side": side,
 			"data-surface": "modal",
-			"data-padding": padding,
 			"data-surface-variant": surface,
 			"data-variant": variant,
-			className: cn("flex flex-col", place.popup, className),
+			className: cn("flex flex-col", place.popup, !modal && "pointer-events-auto", className),
 			style,
 			...props,
 			children: [grabbable ? /* @__PURE__ */ jsx("div", {
@@ -128,14 +137,7 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 				"data-popup-kind": "drawer",
 				"data-slot": "handle",
 				className: "shrink-0"
-			}) : null, /* @__PURE__ */ jsx(Drawer$1.Content, {
-				"data-control-ui": "drawer",
-				"data-control-family": "popup",
-				"data-popup-kind": "drawer",
-				"data-slot": "scroll",
-				className: "flex min-h-0 flex-1 flex-col overflow-y-auto",
-				children
-			})]
+			}) : null, children]
 		})
 	})] });
 }
@@ -145,7 +147,18 @@ function DrawerHeader({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "drawer",
 		"data-slot": "header",
-		className: cn("flex flex-col", className),
+		className: cn("flex shrink-0 flex-col", className),
+		...props
+	});
+}
+function DrawerBody({ className, padding = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Content, {
+		"data-control-ui": "drawer",
+		"data-control-family": "popup",
+		"data-popup-kind": "drawer",
+		"data-slot": "body",
+		"data-padding": padding,
+		className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto", className),
 		...props
 	});
 }
@@ -155,7 +168,7 @@ function DrawerFooter({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "drawer",
 		"data-slot": "footer",
-		className: cn("mt-auto flex flex-col", className),
+		className: cn("mt-auto flex shrink-0 flex-col sm:flex-row sm:justify-end", className),
 		...props
 	});
 }
@@ -180,4 +193,4 @@ function DrawerDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, drawerContentPaddings, drawerContentSurfaces, drawerContentVariants, drawerSides };
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, drawerBodyPaddings, drawerContentSurfaces, drawerContentVariants, drawerSides };

package/dist/ui/dropdown-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/dropzone.d.ts

@@ -11,6 +11,8 @@ export type DropzoneProps = Omit<ComponentProps<"div">, "defaultValue" | "onChan
   onValueChange?: (value: readonly File[], details: DropzoneValueChangeDetails) => void;
   policy?: DropzonePolicy;
   disabled?: boolean;
+  drag?: boolean;
+  paste?: boolean;
   getFilesFromEvent?: DropzoneGetFilesFromEvent;
   onDrop?: (details: DropzoneDropDetails) => void;
   onError?: (error: Error) => void;
@@ -52,7 +54,7 @@ export type DropzoneRemoveProps = ComponentProps<typeof Button> & {
 };
 export type DropzoneClearProps = ComponentProps<typeof Button>;
 export declare function useDropzoneContext(): DropzoneContextValue;
-export declare function Dropzone({ value, defaultValue, onValueChange, policy, disabled, getFilesFromEvent, onDrop, onError, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
+export declare function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
 export declare function DropzoneArea({ className, ...props }: DropzoneAreaProps): import("react").JSX.Element;
 export declare function DropzoneInput({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneInputProps): import("react").JSX.Element;
 export declare function DropzoneTrigger({ className, children, onClick, disabled, ...props }: DropzoneTriggerProps): import("react").JSX.Element;

package/dist/ui/dropzone.js

@@ -24,7 +24,7 @@ function useDropzoneContext() {
 	if (!context) throw new Error("Dropzone parts must be used inside Dropzone.");
 	return context;
 }
-function Dropzone({ value, defaultValue, onValueChange, policy, disabled, getFilesFromEvent, onDrop, onError, className, children, ...props }) {
+function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, className, children, ...props }) {
 	const [globalOverlayCount, setGlobalOverlayCount] = useState(0);
 	const [registerGlobalOverlay] = useState(() => () => {
 		let registered = true;
@@ -41,6 +41,8 @@ function Dropzone({ value, defaultValue, onValueChange, policy, disabled, getFil
 		onValueChange,
 		policy,
 		disabled,
+		drag,
+		paste,
 		getFilesFromEvent,
 		onDrop,
 		onError,

package/dist/ui/field.js

@@ -2,9 +2,9 @@
 import { cn } from "../lib/cn.js";
 import { Separator } from "./separator.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
 import { Field as Field$1 } from "@base-ui/react/field";
 import { Fieldset } from "@base-ui/react/fieldset";
+import { cva } from "class-variance-authority";
 //#region src/ui/field.tsx
 const fieldVariants = cva("group/field flex w-full", {
 	variants: { orientation: {

package/dist/ui/hover-card.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";

package/dist/ui/infinite-canvas.d.ts

@@ -22,6 +22,16 @@ export type InfiniteCanvasProps = Omit<ComponentProps<"section">, "onChange" | "
 export type InfiniteCanvasContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
+export type InfiniteCanvasPoint = {
+  x: number;
+  y: number;
+};
+export type InfiniteCanvasItemProps = Omit<ComponentProps<"div">, "style"> & {
+  x: number;
+  y: number;
+  onPositionChange?: (position: InfiniteCanvasPoint) => void;
+  style?: CSSProperties & InfiniteCanvasKnobStyle;
+};
 export type InfiniteCanvasControlsProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
@@ -35,5 +45,6 @@ type InfiniteCanvasContextValue = {
 export declare function useInfiniteCanvas(): InfiniteCanvasContextValue;
 export declare function InfiniteCanvas({ transform: controlledTransform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
 export declare function InfiniteCanvasContent({ className, style, ...props }: InfiniteCanvasContentProps): import("react").JSX.Element;
+export declare function InfiniteCanvasItem({ x, y, onPositionChange, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }: InfiniteCanvasItemProps): import("react").JSX.Element;
 export declare function InfiniteCanvasControls({ className, ...props }: InfiniteCanvasControlsProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/infinite-canvas.js

@@ -14,6 +14,9 @@ const DEFAULT_MIN_SCALE = .35;
 const DEFAULT_MAX_SCALE = 2.5;
 const KEYBOARD_PAN_STEP = 32;
 const GRID_SIZE = 24;
+const WHEEL_ZOOM_SPEED = .004;
+const MAX_WHEEL_ZOOM_DELTA = 50;
+const NOTCHED_WHEEL_DELTA = 40;
 const KEYBOARD_PAN_DIRECTIONS = {
 	ArrowLeft: {
 		x: -1,
@@ -45,10 +48,13 @@ function zoomAroundPoint(transform, nextScale, point) {
 		scale: nextScale
 	};
 }
+function wheelDeltaMultiplier(event, viewportHeight) {
+	if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) return 16;
+	if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) return viewportHeight;
+	return 1;
+}
 function panFromWheel(transform, event, viewportHeight) {
-	let deltaMultiplier = 1;
-	if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) deltaMultiplier = 16;
-	else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) deltaMultiplier = viewportHeight;
+	const deltaMultiplier = wheelDeltaMultiplier(event, viewportHeight);
 	const horizontalDelta = event.shiftKey && event.deltaX === 0 ? event.deltaY : event.deltaX;
 	const verticalDelta = event.shiftKey && event.deltaX === 0 ? 0 : event.deltaY;
 	return {
@@ -67,6 +73,7 @@ function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEF
 	const maxScale = Math.max(minScale, maxScaleProp);
 	const [uncontrolledTransform, setUncontrolledTransform] = useState(defaultTransform);
 	const [panning, setPanning] = useState(false);
+	const [easing, setEasing] = useState(false);
 	const panRef = useRef(null);
 	const rootRef = useRef(null);
 	const transform = controlledTransform ?? uncontrolledTransform;
@@ -74,7 +81,8 @@ function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEF
 	useEffect(() => {
 		transformRef.current = transform;
 	}, [transform]);
-	function commitTransform(next, reason) {
+	function commitTransform(next, reason, eased = reason === "control" || reason === "keyboard") {
+		setEasing(eased);
 		const bounded = {
 			...next,
 			scale: clampScale(next.scale, minScale, maxScale)
@@ -152,7 +160,11 @@ function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEF
 				x: event.clientX - bounds.left,
 				y: event.clientY - bounds.top
 			};
-			commitTransform(zoomAroundPoint(currentTransform, clampScale(currentTransform.scale * Math.exp(-event.deltaY * .004), minScale, maxScale), point), "wheel");
+			const zoomDelta = event.deltaY * wheelDeltaMultiplier(event, root.clientHeight);
+			const boundedZoomDelta = Math.min(Math.max(zoomDelta, -50), MAX_WHEEL_ZOOM_DELTA);
+			const nextScale = clampScale(currentTransform.scale * Math.exp(-boundedZoomDelta * WHEEL_ZOOM_SPEED), minScale, maxScale);
+			const notchedWheel = Math.abs(zoomDelta) >= NOTCHED_WHEEL_DELTA;
+			commitTransform(zoomAroundPoint(currentTransform, nextScale, point), "wheel", notchedWheel);
 			return;
 		}
 		commitTransform(panFromWheel(currentTransform, event, root.clientHeight), "wheel");
@@ -203,6 +215,7 @@ function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEF
 			"data-control-family": "infinite-canvas",
 			"data-slot": "root",
 			"data-panning": panning || void 0,
+			"data-easing": easing || void 0,
 			"aria-label": ariaLabel,
 			role: "application",
 			"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0",
@@ -233,6 +246,68 @@ function InfiniteCanvasContent({ className, style, ...props }) {
 		}
 	});
 }
+function InfiniteCanvasItem({ x, y, onPositionChange, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }) {
+	const { transform } = useInfiniteCanvas();
+	const dragRef = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	function beginDrag(event) {
+		onPointerDown?.(event);
+		if (event.defaultPrevented || !onPositionChange || !event.isPrimary || event.button !== 0) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		dragRef.current = {
+			pointerId: event.pointerId,
+			startPointer: {
+				x: event.clientX,
+				y: event.clientY
+			},
+			startPosition: {
+				x,
+				y
+			}
+		};
+		setDragging(true);
+	}
+	function updateDrag(event) {
+		onPointerMove?.(event);
+		const drag = dragRef.current;
+		if (event.defaultPrevented || !drag || drag.pointerId !== event.pointerId) return;
+		onPositionChange?.({
+			x: drag.startPosition.x + (event.clientX - drag.startPointer.x) / transform.scale,
+			y: drag.startPosition.y + (event.clientY - drag.startPointer.y) / transform.scale
+		});
+	}
+	function finishDrag(event) {
+		if (dragRef.current?.pointerId !== event.pointerId) return;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		dragRef.current = null;
+		setDragging(false);
+	}
+	function endDrag(event) {
+		onPointerUp?.(event);
+		finishDrag(event);
+	}
+	function cancelDrag(event) {
+		onPointerCancel?.(event);
+		finishDrag(event);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "infinite-canvas",
+		"data-control-family": "infinite-canvas",
+		"data-slot": "item",
+		"data-dragging": dragging || void 0,
+		className: cn("absolute", onPositionChange && "cursor-grab touch-none data-dragging:cursor-grabbing", className),
+		style: {
+			...style,
+			left: x,
+			top: y
+		},
+		onPointerDown: beginDrag,
+		onPointerMove: updateDrag,
+		onPointerUp: endDrag,
+		onPointerCancel: cancelDrag
+	});
+}
 function InfiniteCanvasControls({ className, ...props }) {
 	const canvas = useInfiniteCanvas();
 	const percentage = Math.round(canvas.transform.scale * 100);
@@ -240,7 +315,7 @@ function InfiniteCanvasControls({ className, ...props }) {
 		"data-control-ui": "infinite-canvas",
 		"data-control-family": "infinite-canvas",
 		"data-slot": "controls",
-		className: cn("absolute right-3 bottom-3 z-40 flex items-center", className),
+		className: cn("absolute z-40 flex items-center", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(Button, {
@@ -276,4 +351,4 @@ function InfiniteCanvasControls({ className, ...props }) {
 	});
 }
 //#endregion
-export { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, useInfiniteCanvas };
+export { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem, useInfiniteCanvas };

package/dist/ui/input-group.d.ts

@@ -12,7 +12,8 @@ export type InputGroupProps = Omit<ComponentProps<"div">, "style"> & {
 export type InputGroupAddonProps = ComponentProps<"span"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-export declare function InputGroup({ size, className, render, children, ...props }: InputGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function useIsInsideInputGroup(): boolean;
+export declare function InputGroup({ size, className, render, children, ...props }: InputGroupProps): import("react").JSX.Element;
 export declare function InputGroupAddon({ className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
 export declare function InputGroupInput({ className, ...props }: ComponentProps<"input"> & {
   style?: CSSProperties & FieldKnobStyle;

package/dist/ui/input-group.js

@@ -1,11 +1,16 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useRender } from "@base-ui/react/use-render";
+import { createContext, use } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/input-group.tsx
+const InputGroupSurfaceContext = createContext(false);
+function useIsInsideInputGroup() {
+	return use(InputGroupSurfaceContext);
+}
 function InputGroup({ size = "md", className, render, children, ...props }) {
 	const classes = cn("flex min-w-0 w-full items-center overflow-hidden", className);
-	return useRender({
+	const group = useRender({
 		defaultTagName: "div",
 		render,
 		props: {
@@ -19,6 +24,10 @@ function InputGroup({ size = "md", className, render, children, ...props }) {
 			children
 		}
 	});
+	return /* @__PURE__ */ jsx(InputGroupSurfaceContext, {
+		value: true,
+		children: group
+	});
 }
 function InputGroupAddon({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
@@ -41,4 +50,4 @@ function InputGroupInput({ className, ...props }) {
 	});
 }
 //#endregion
-export { InputGroup, InputGroupAddon, InputGroupInput };
+export { InputGroup, InputGroupAddon, InputGroupInput, useIsInsideInputGroup };