@ctrl-ui/react 0.9.4 → 0.9.6

package/dist/ui/infinite-canvas.js

@@ -1,10 +1,13 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
-import "../lib/canvas-grid.js";
-import { createContext, use, useEffect, useEffectEvent, useRef, useState } from "react";
+import { createInfiniteCanvasCamera, infiniteCanvasGridStyle, infiniteCanvasTransformCss } from "../lib/infinite-canvas-camera-store.js";
+import { ARROW_KEY_DIRECTIONS, INFINITE_CANVAS_KEY_SHORTCUTS, attachInfiniteCanvasNavigation, keyboardStep, runInfiniteCanvasKeyCommand } from "../lib/infinite-canvas-navigation.js";
+import { Toolbar, ToolbarButton, ToolbarSeparator } from "./toolbar.js";
+import { createContext, use, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { MinusIcon, PlusIcon } from "lucide-react";
+import { GripVerticalIcon, MaximizeIcon, MinusIcon, PlusIcon } from "lucide-react";
 //#region src/ui/infinite-canvas.tsx
 const DEFAULT_TRANSFORM = {
 	x: 0,
@@ -13,386 +16,322 @@ const DEFAULT_TRANSFORM = {
 };
 const DEFAULT_MIN_SCALE = .35;
 const DEFAULT_MAX_SCALE = 2.5;
-const KEYBOARD_PAN_STEP = 32;
-const WHEEL_ZOOM_SPEED = .004;
-const MAX_WHEEL_ZOOM_DELTA = 50;
-const CANVAS_KEY_SHORTCUTS = "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0";
-const NOTCHED_WHEEL_DELTA = 40;
-const KEYBOARD_PAN_DIRECTIONS = {
-	ArrowLeft: {
-		x: -1,
-		y: 0
-	},
-	ArrowRight: {
-		x: 1,
-		y: 0
-	},
-	ArrowUp: {
-		x: 0,
-		y: -1
-	},
-	ArrowDown: {
-		x: 0,
-		y: 1
-	}
-};
-const KEYBOARD_ZOOM_FACTORS = {
-	"+": 1.15,
-	"=": 1.15,
-	"-": 1 / 1.15
-};
-function keyboardPanStep(shiftKey) {
-	return shiftKey ? 96 : KEYBOARD_PAN_STEP;
-}
+const CONTROL_ZOOM_FACTOR = 1.2;
+const ITEM_KEY_SHORTCUTS = "ArrowLeft ArrowRight ArrowUp ArrowDown";
 const InfiniteCanvasContext = createContext(null);
-function clampScale(scale, minScale, maxScale) {
-	return Math.min(Math.max(scale, minScale), maxScale);
-}
-function zoomAroundPoint(transform, nextScale, point) {
-	const worldX = (point.x - transform.x) / transform.scale;
-	const worldY = (point.y - transform.y) / transform.scale;
-	return {
-		x: point.x - worldX * nextScale,
-		y: point.y - worldY * nextScale,
-		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) {
-	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 {
-		x: transform.x - horizontalDelta * deltaMultiplier,
-		y: transform.y - verticalDelta * deltaMultiplier,
-		scale: transform.scale
-	};
+const InfiniteCanvasStoreContext = createContext(null);
+const InfiniteCanvasItemContext = createContext(null);
+function selectScale(transform) {
+	return transform.scale;
 }
 function useInfiniteCanvas() {
 	const context = use(InfiniteCanvasContext);
 	if (!context) throw new Error("useInfiniteCanvas must be used within InfiniteCanvas");
 	return context;
 }
-function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEFAULT_TRANSFORM, onTransformChange, minScale: minScaleProp = DEFAULT_MIN_SCALE, maxScale: maxScaleProp = DEFAULT_MAX_SCALE, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel = "Infinite canvas", "aria-keyshortcuts": ariaKeyShortcuts, ...props }) {
+function useInfiniteCanvasStore() {
+	const context = use(InfiniteCanvasStoreContext);
+	if (!context) throw new Error("InfiniteCanvas parts must be used within InfiniteCanvas");
+	return context;
+}
+function useInfiniteCanvasTransform(select) {
+	const { store, initialTransform } = useInfiniteCanvasStore();
+	return useSyncExternalStore(store.subscribe, () => select ? select(store.getCommittedTransform()) : store.getCommittedTransform(), () => select ? select(initialTransform) : initialTransform);
+}
+function InfiniteCanvas({ transform, defaultTransform = DEFAULT_TRANSFORM, onTransformChange, minScale: minScaleProp = DEFAULT_MIN_SCALE, maxScale: maxScaleProp = DEFAULT_MAX_SCALE, panOnDrag = "background", keyboardNavigation = true, ref, className, children, style, onPointerDown, onWheel, onKeyDown, "aria-label": ariaLabel = "Infinite canvas", "aria-keyshortcuts": ariaKeyShortcuts, ...props }) {
 	const minScale = minScaleProp > 0 ? minScaleProp : DEFAULT_MIN_SCALE;
 	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 cameraOptions = {
+		minScale,
+		maxScale,
+		defaultTransform,
+		controlled: transform !== void 0,
+		onTransformChange
+	};
+	const [initialTransform] = useState(() => transform ?? defaultTransform);
+	const [store] = useState(() => createInfiniteCanvasCamera(initialTransform, cameraOptions));
 	const rootRef = useRef(null);
-	const transform = controlledTransform ?? uncontrolledTransform;
-	const transformRef = useRef(transform);
-	useEffect(() => {
-		transformRef.current = transform;
-	}, [transform]);
-	function commitTransform(next, reason, eased = reason === "control" || reason === "keyboard") {
-		setEasing(eased);
-		const bounded = {
-			...next,
-			scale: clampScale(next.scale, minScale, maxScale)
-		};
-		transformRef.current = bounded;
-		if (controlledTransform === void 0) setUncontrolledTransform(bounded);
-		onTransformChange?.(bounded, { reason });
-	}
-	function zoomBy(factor, reason) {
-		const currentTransform = transformRef.current;
-		const nextScale = clampScale(currentTransform.scale * factor, minScale, maxScale);
-		const root = rootRef.current;
-		commitTransform(zoomAroundPoint(currentTransform, nextScale, root ? {
-			x: root.clientWidth / 2,
-			y: root.clientHeight / 2
-		} : {
-			x: 0,
-			y: 0
-		}), reason);
-	}
-	function reset(reason) {
-		commitTransform(defaultTransform, reason);
-	}
-	function beginPan(event) {
-		onPointerDown?.(event);
-		if (event.defaultPrevented || event.target !== event.currentTarget || !event.isPrimary || event.button !== 0) return;
-		event.preventDefault();
-		event.currentTarget.setPointerCapture(event.pointerId);
-		panRef.current = {
-			pointerId: event.pointerId,
-			startPointer: {
-				x: event.clientX,
-				y: event.clientY
-			},
-			startTransform: transformRef.current
+	const navigationRef = useRef(null);
+	const navigationOptionsRef = useRef({
+		panOnDrag,
+		onWheel
+	});
+	const controlledX = transform?.x;
+	const controlledY = transform?.y;
+	const controlledScale = transform?.scale;
+	useLayoutEffect(() => {
+		store.configure(cameraOptions);
+		navigationOptionsRef.current = {
+			panOnDrag,
+			onWheel
 		};
-		setPanning(true);
-	}
-	function updatePan(event) {
-		onPointerMove?.(event);
-		if (event.defaultPrevented) return;
-		const pan = panRef.current;
-		if (!pan || pan.pointerId !== event.pointerId) return;
-		commitTransform({
-			x: pan.startTransform.x + event.clientX - pan.startPointer.x,
-			y: pan.startTransform.y + event.clientY - pan.startPointer.y,
-			scale: pan.startTransform.scale
-		}, "pointer");
-	}
-	function finishPan(event) {
-		const pan = panRef.current;
-		if (!pan || pan.pointerId !== event.pointerId) return;
-		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
-		panRef.current = null;
-		setPanning(false);
-	}
-	function endPan(event) {
-		onPointerUp?.(event);
-		if (!event.defaultPrevented) finishPan(event);
-	}
-	function cancelPan(event) {
-		onPointerCancel?.(event);
-		if (!event.defaultPrevented) finishPan(event);
-	}
-	const handleWheel = useEffectEvent((event) => {
-		onWheel?.(event);
-		if (event.defaultPrevented) return;
-		const root = rootRef.current;
-		if (!root) return;
-		event.preventDefault();
-		const currentTransform = transformRef.current;
-		if (event.ctrlKey || event.metaKey) {
-			const bounds = root.getBoundingClientRect();
-			const point = {
-				x: event.clientX - bounds.left,
-				y: event.clientY - bounds.top
-			};
-			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");
+		navigationRef.current?.syncPanReady();
 	});
+	useLayoutEffect(() => {
+		if (controlledX === void 0 || controlledY === void 0 || controlledScale === void 0) return;
+		store.adopt({
+			x: controlledX,
+			y: controlledY,
+			scale: controlledScale
+		});
+	}, [
+		store,
+		controlledX,
+		controlledY,
+		controlledScale
+	]);
 	useEffect(() => {
 		const root = rootRef.current;
 		if (!root) return;
-		const listener = (event) => handleWheel(event);
-		root.addEventListener("wheel", listener, { passive: false });
-		return () => root.removeEventListener("wheel", listener);
-	}, []);
-	function applyKeyboardCommand(key, shiftKey) {
-		const direction = KEYBOARD_PAN_DIRECTIONS[key];
-		if (direction) {
-			const currentTransform = transformRef.current;
-			const panStep = keyboardPanStep(shiftKey);
-			commitTransform({
-				...currentTransform,
-				x: currentTransform.x + direction.x * panStep,
-				y: currentTransform.y + direction.y * panStep
-			}, "keyboard");
-			return true;
-		}
-		const zoomFactor = KEYBOARD_ZOOM_FACTORS[key];
-		if (zoomFactor) {
-			zoomBy(zoomFactor, "keyboard");
-			return true;
-		}
-		if (key !== "0") return false;
-		reset("keyboard");
-		return true;
+		store.attachRoot(root);
+		const navigation = attachInfiniteCanvasNavigation(root, store, () => navigationOptionsRef.current);
+		navigationRef.current = navigation;
+		return () => {
+			navigation.detach();
+			navigationRef.current = null;
+			store.dispose();
+			store.attachRoot(null);
+		};
+	}, [store]);
+	const context = useMemo(() => ({
+		...store.camera,
+		minScale,
+		maxScale
+	}), [
+		store,
+		minScale,
+		maxScale
+	]);
+	const storeContext = useMemo(() => ({
+		store,
+		initialTransform
+	}), [store, initialTransform]);
+	function beginBackgroundPan(event) {
+		onPointerDown?.(event);
+		navigationRef.current?.beginBackgroundPan(event.nativeEvent);
 	}
-	function moveWithKeyboard(event) {
+	function navigateWithKeyboard(event) {
 		onKeyDown?.(event);
-		if (event.defaultPrevented || event.target !== event.currentTarget) return;
+		if (!keyboardNavigation || event.defaultPrevented || event.target !== event.currentTarget) return;
 		if (event.ctrlKey || event.metaKey || event.altKey) return;
-		if (applyKeyboardCommand(event.key, event.shiftKey)) event.preventDefault();
+		if (runInfiniteCanvasKeyCommand(store, event.key, event.shiftKey)) event.preventDefault();
 	}
-	const context = {
-		transform,
-		minScale,
-		maxScale,
-		reset,
-		zoomBy
-	};
-	const canvasStyle = {
-		...style,
-		backgroundPosition: `${transform.x}px ${transform.y}px`,
-		backgroundSize: `${24 * transform.scale}px ${24 * transform.scale}px`
-	};
-	return /* @__PURE__ */ jsx(InfiniteCanvasContext.Provider, {
-		value: context,
-		children: /* @__PURE__ */ jsx("section", {
-			ref: rootRef,
+	const keyShortcuts = [keyboardNavigation ? INFINITE_CANVAS_KEY_SHORTCUTS : "", ariaKeyShortcuts].filter(Boolean).join(" ");
+	const root = useRender({
+		defaultTagName: "section",
+		ref: [ref ?? null, rootRef],
+		props: {
+			tabIndex: 0,
 			...props,
 			"data-control-ui": "infinite-canvas",
 			"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": ariaKeyShortcuts ? `${CANVAS_KEY_SHORTCUTS} ${ariaKeyShortcuts}` : CANVAS_KEY_SHORTCUTS,
-			tabIndex: 0,
-			className: cn("relative isolate overflow-hidden overscroll-contain touch-none select-none data-panning:cursor-grabbing", className),
-			style: canvasStyle,
-			onPointerDown: beginPan,
-			onPointerMove: updatePan,
-			onPointerUp: endPan,
-			onPointerCancel: cancelPan,
-			onKeyDown: moveWithKeyboard,
+			"aria-keyshortcuts": keyShortcuts || void 0,
+			className: cn("relative isolate overflow-hidden overscroll-none touch-none data-panning:select-none", className),
+			style: {
+				...style,
+				...infiniteCanvasGridStyle(initialTransform)
+			},
+			onPointerDown: beginBackgroundPan,
+			onKeyDown: navigateWithKeyboard,
 			children
+		}
+	});
+	return /* @__PURE__ */ jsx(InfiniteCanvasStoreContext.Provider, {
+		value: storeContext,
+		children: /* @__PURE__ */ jsx(InfiniteCanvasContext.Provider, {
+			value: context,
+			children: root
 		})
 	});
 }
 function InfiniteCanvasContent({ className, style, ...props }) {
-	const { transform } = useInfiniteCanvas();
+	const { store, initialTransform } = useInfiniteCanvasStore();
 	return /* @__PURE__ */ jsx("div", {
+		ref: store.attachContent,
 		...props,
 		"data-control-ui": "infinite-canvas",
 		"data-control-family": "infinite-canvas",
 		"data-slot": "content",
-		"data-scale": transform.scale,
-		className: cn("pointer-events-none absolute top-0 left-0 h-0 w-0 transform-gpu will-change-transform [&>*]:pointer-events-auto", className),
+		"data-scale": initialTransform.scale,
+		className: cn("absolute top-0 left-0 h-0 w-0", className),
 		style: {
 			...style,
-			transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale(${transform.scale})`
+			transform: infiniteCanvasTransformCss(initialTransform)
 		}
 	});
 }
-function InfiniteCanvasItem({ x, y, onPositionChange, movableItemLabel = "Movable item", className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, ...props }) {
-	const { transform } = useInfiniteCanvas();
+function useInfiniteCanvasItemDrag(position, onPositionChange, handlers) {
+	const canvas = 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);
-	}
-	function moveWithKeyboard(event) {
-		onKeyDown?.(event);
-		if (event.defaultPrevented || !onPositionChange || event.target !== event.currentTarget) return;
-		if (event.ctrlKey || event.metaKey || event.altKey) return;
-		const direction = KEYBOARD_PAN_DIRECTIONS[event.key];
-		if (!direction) return;
-		event.preventDefault();
-		const step = keyboardPanStep(event.shiftKey) / transform.scale;
-		onPositionChange({
-			x: x + direction.x * step,
-			y: y + direction.y * step
-		});
-	}
-	return /* @__PURE__ */ jsx("div", {
-		...onPositionChange ? {
-			role: "group",
-			"aria-roledescription": movableItemLabel,
-			"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown",
-			tabIndex: 0,
-			onPointerDown: beginDrag,
-			onPointerMove: updateDrag,
-			onPointerUp: endDrag,
-			onPointerCancel: cancelDrag,
-			onKeyDown: moveWithKeyboard
-		} : {
-			onPointerDown,
-			onPointerMove,
-			onPointerUp,
-			onPointerCancel,
-			onKeyDown
-		},
+	return {
+		dragging,
+		dragHandlers: {
+			onPointerDown(event) {
+				handlers.onPointerDown?.(event);
+				if (event.defaultPrevented || !onPositionChange || !event.isPrimary || event.button !== 0) return;
+				event.currentTarget.setPointerCapture(event.pointerId);
+				dragRef.current = {
+					pointerId: event.pointerId,
+					startWorld: canvas.toWorldPoint(event),
+					startPosition: position
+				};
+				setDragging(true);
+			},
+			onPointerMove(event) {
+				handlers.onPointerMove?.(event);
+				const drag = dragRef.current;
+				if (event.defaultPrevented || drag?.pointerId !== event.pointerId) return;
+				const world = canvas.toWorldPoint(event);
+				onPositionChange?.({
+					x: drag.startPosition.x + world.x - drag.startWorld.x,
+					y: drag.startPosition.y + world.y - drag.startWorld.y
+				});
+			},
+			onPointerUp(event) {
+				handlers.onPointerUp?.(event);
+				finishDrag(event);
+			},
+			onPointerCancel(event) {
+				handlers.onPointerCancel?.(event);
+				finishDrag(event);
+			},
+			onLostPointerCapture(event) {
+				handlers.onLostPointerCapture?.(event);
+				finishDrag(event);
+			},
+			onKeyDown(event) {
+				handlers.onKeyDown?.(event);
+				if (event.defaultPrevented || !onPositionChange || event.target !== event.currentTarget) return;
+				if (event.ctrlKey || event.metaKey || event.altKey) return;
+				const direction = ARROW_KEY_DIRECTIONS[event.key];
+				if (!direction) return;
+				event.preventDefault();
+				const step = keyboardStep(event.shiftKey) / canvas.getTransform().scale;
+				onPositionChange({
+					x: position.x + direction.x * step,
+					y: position.y + direction.y * step
+				});
+			}
+		}
+	};
+}
+function InfiniteCanvasItem({ x, y, onPositionChange, movableItemLabel = "Movable item", className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, ...props }) {
+	const position = useMemo(() => ({
+		x,
+		y
+	}), [x, y]);
+	const { dragging, dragHandlers } = useInfiniteCanvasItemDrag(position, onPositionChange, {
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel,
+		onLostPointerCapture,
+		onKeyDown
+	});
+	const movable = onPositionChange ? {
+		role: "group",
+		"aria-roledescription": movableItemLabel,
+		"aria-keyshortcuts": ITEM_KEY_SHORTCUTS,
+		tabIndex: 0
+	} : null;
+	return /* @__PURE__ */ jsx(InfiniteCanvasItemContext.Provider, {
+		value: position,
+		children: /* @__PURE__ */ jsx("div", {
+			...movable,
+			...props,
+			...dragHandlers,
+			"data-control-ui": "infinite-canvas",
+			"data-control-family": "infinite-canvas",
+			"data-slot": "item",
+			"data-dragging": dragging || void 0,
+			className: cn("absolute", onPositionChange && "touch-none select-none", className),
+			style: {
+				...style,
+				left: x,
+				top: y
+			}
+		})
+	});
+}
+function InfiniteCanvasItemHandle({ onPositionChange, className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, "aria-label": ariaLabel = "Move item", ...props }) {
+	const position = use(InfiniteCanvasItemContext);
+	if (!position) throw new Error("InfiniteCanvasItemHandle must be used within InfiniteCanvasItem");
+	const { dragging, dragHandlers } = useInfiniteCanvasItemDrag(position, onPositionChange, {
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel,
+		onLostPointerCapture,
+		onKeyDown
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "xs",
+		iconOnly: true,
+		"aria-label": ariaLabel,
+		"aria-keyshortcuts": ITEM_KEY_SHORTCUTS,
 		...props,
-		"data-control-ui": "infinite-canvas",
-		"data-control-family": "infinite-canvas",
-		"data-slot": "item",
+		...dragHandlers,
 		"data-dragging": dragging || void 0,
-		className: cn("absolute", onPositionChange && "cursor-grab touch-none data-dragging:cursor-grabbing", className),
-		style: {
-			...style,
-			left: x,
-			top: y
-		}
+		className: cn("touch-none", className),
+		children: children ?? /* @__PURE__ */ jsx(GripVerticalIcon, {})
 	});
 }
 function InfiniteCanvasControls({ className, ...props }) {
 	const canvas = useInfiniteCanvas();
-	const percentage = Math.round(canvas.transform.scale * 100);
-	return /* @__PURE__ */ jsxs("div", {
+	const scale = useInfiniteCanvasTransform(selectScale);
+	const percentage = Math.round(scale * 100);
+	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "infinite-canvas",
 		"data-control-family": "infinite-canvas",
 		"data-slot": "controls",
-		className: cn("absolute z-40 flex items-center", className),
+		className: cn("absolute z-40", className),
 		...props,
-		children: [
-			/* @__PURE__ */ jsx(Button, {
-				type: "button",
-				size: "sm",
-				variant: "ghost",
-				iconOnly: true,
-				disabled: canvas.transform.scale <= canvas.minScale,
-				"aria-label": "Zoom out",
-				onClick: () => canvas.zoomBy(1 / 1.2, "control"),
-				children: /* @__PURE__ */ jsx(MinusIcon, {})
-			}),
-			/* @__PURE__ */ jsxs(Button, {
-				type: "button",
-				size: "sm",
-				variant: "ghost",
-				className: "tabular-nums",
-				"aria-label": `Reset canvas zoom, currently ${percentage}%`,
-				onClick: () => canvas.reset("control"),
-				children: [percentage, "%"]
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				type: "button",
-				size: "sm",
-				variant: "ghost",
-				iconOnly: true,
-				disabled: canvas.transform.scale >= canvas.maxScale,
-				"aria-label": "Zoom in",
-				onClick: () => canvas.zoomBy(1.2, "control"),
-				children: /* @__PURE__ */ jsx(PlusIcon, {})
-			})
-		]
+		children: /* @__PURE__ */ jsxs(Toolbar, {
+			variant: "floating",
+			"aria-label": "Canvas view",
+			children: [
+				/* @__PURE__ */ jsx(ToolbarButton, {
+					iconOnly: true,
+					disabled: scale <= canvas.minScale,
+					"aria-label": "Zoom out",
+					onClick: () => canvas.zoomBy(1 / CONTROL_ZOOM_FACTOR),
+					children: /* @__PURE__ */ jsx(MinusIcon, {})
+				}),
+				/* @__PURE__ */ jsxs(ToolbarButton, {
+					className: "tabular-nums",
+					"aria-label": `Reset canvas zoom, currently ${percentage}%`,
+					onClick: () => canvas.reset(),
+					children: [percentage, "%"]
+				}),
+				/* @__PURE__ */ jsx(ToolbarButton, {
+					iconOnly: true,
+					disabled: scale >= canvas.maxScale,
+					"aria-label": "Zoom in",
+					onClick: () => canvas.zoomBy(CONTROL_ZOOM_FACTOR),
+					children: /* @__PURE__ */ jsx(PlusIcon, {})
+				}),
+				/* @__PURE__ */ jsx(ToolbarSeparator, {}),
+				/* @__PURE__ */ jsx(ToolbarButton, {
+					iconOnly: true,
+					"aria-label": "Fit view",
+					onClick: () => canvas.fit(),
+					children: /* @__PURE__ */ jsx(MaximizeIcon, {})
+				})
+			]
+		})
 	});
 }
 //#endregion
-export { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem, useInfiniteCanvas };
+export { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem, InfiniteCanvasItemHandle, useInfiniteCanvas, useInfiniteCanvasTransform };

package/dist/ui/rich-tooltip.d.ts

@@ -48,8 +48,9 @@ export type RichTooltipContentProps = Omit<ComponentProps<typeof Popover.Popup>,
   collisionPadding?: ComponentProps<typeof Popover.Positioner>["collisionPadding"];
   arrow?: boolean;
   scrollAnchorIntoView?: boolean;
+  container?: ComponentProps<typeof Popover.Portal>["container"];
 };
-export declare function RichTooltipContent({ className, children, side, align, sideOffset, anchor, collisionPadding, arrow, scrollAnchorIntoView, ...props }: RichTooltipContentProps): import("react").JSX.Element;
+export declare function RichTooltipContent({ className, children, side, align, sideOffset, anchor, collisionPadding, arrow, scrollAnchorIntoView, container, ...props }: RichTooltipContentProps): import("react").JSX.Element;
 export declare function RichTooltipMedia({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;