@ctrl-ui/react 0.9.5 → 0.9.6

package/dist/blocks/coding-agent.d.ts

@@ -1,6 +1,6 @@
-import { ChatLayout } from "../chat-layout.js";
 import { SidebarProviderProps } from "../ui/sidebar-provider.js";
 import "../ui/sidebar.js";
+import { ChatLayout } from "../chat-layout.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/blocks/coding-agent.d.ts
 export type CodingAgentNavigationItem = {

package/dist/blocks/design-canvas-data.d.ts

@@ -1,6 +1,6 @@
 //#region src/blocks/design-canvas-data.d.ts
 export type DesignCanvasLayerKind = "frame" | "rectangle" | "ellipse" | "text";
-export type DesignCanvasTool = "move" | DesignCanvasLayerKind;
+export type DesignCanvasTool = "move" | "hand" | DesignCanvasLayerKind;
 export type DesignCanvasFill = {
   color: string;
   opacity: number;

package/dist/blocks/design-canvas.d.ts

@@ -1,5 +1,6 @@
 import { DesignCanvasFill, DesignCanvasLayer, DesignCanvasLayerKind, DesignCanvasTool } from "./design-canvas-data.js";
-import { InfiniteCanvasTransform } from "../ui/infinite-canvas.js";
+import { InfiniteCanvasTransform } from "../lib/infinite-canvas-camera.js";
+import "../ui/infinite-canvas.js";
 import { ComponentProps } from "react";
 //#region src/blocks/design-canvas.d.ts
 export type DesignCanvasBlockProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> & {

package/dist/blocks/design-canvas.js

@@ -7,12 +7,12 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/
 import { Drawer, DrawerContent, DrawerTitle } from "../ui/drawer.js";
 import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
 import { DesignCanvasInspector } from "./design-canvas-inspector.js";
+import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.js";
 import { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem } from "../ui/infinite-canvas.js";
 import { ResizableFloatingPanel } from "../ui/resizable.js";
-import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.js";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CircleIcon, FrameIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
+import { CircleIcon, FrameIcon, HandIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
 //#region src/blocks/design-canvas.tsx
 const TOOLS = [
 	{
@@ -21,6 +21,12 @@ const TOOLS = [
 		shortcut: "V",
 		icon: /* @__PURE__ */ jsx(MousePointer2Icon, {})
 	},
+	{
+		tool: "hand",
+		label: "Hand",
+		shortcut: "H",
+		icon: /* @__PURE__ */ jsx(HandIcon, {})
+	},
 	{
 		tool: "frame",
 		label: "Frame",
@@ -99,6 +105,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 	const currentLayers = layers ?? internalLayers;
 	const currentSelectedLayerId = selectedLayerId === void 0 ? internalSelectedLayerId : selectedLayerId;
 	const selectedLayer = currentLayers.find((layer) => layer.id === currentSelectedLayerId);
+	const drawingKind = tool === "move" || tool === "hand" ? null : tool;
 	function changeLayers(next) {
 		if (layers === void 0) setInternalLayers(next);
 		onLayersChange?.(next);
@@ -139,7 +146,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 	}
 	function beginDrawOrDeselect(event) {
 		if (event.defaultPrevented || event.target !== event.currentTarget) return;
-		if (tool === "move") {
+		if (!drawingKind) {
 			selectLayer(null);
 			return;
 		}
@@ -148,7 +155,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 		event.currentTarget.setPointerCapture(event.pointerId);
 		const point = worldPointAt(event);
 		setDraft({
-			kind: tool,
+			kind: drawingKind,
 			pointerId: event.pointerId,
 			start: point,
 			end: point,
@@ -200,7 +207,7 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 			setDraft(null);
 			setTool("move");
 			selectLayer(null);
-		} else if (event.key === "Enter" && tool !== "move" && event.target === event.currentTarget) addLayerAtViewportCenter(tool, event.currentTarget);
+		} else if (event.key === "Enter" && drawingKind && event.target === event.currentTarget) addLayerAtViewportCenter(drawingKind, event.currentTarget);
 		else if (!selectedLayer || !editLayerWithKey(selectedLayer, event)) return;
 		event.preventDefault();
 	}
@@ -226,7 +233,8 @@ function DesignCanvasBlock({ layers, defaultLayers = [], onLayersChange, selecte
 					transformRef.current = next;
 				},
 				"data-tool": tool,
-				className: cn("size-full", tool !== "move" && "cursor-crosshair"),
+				panOnDrag: tool === "hand" ? "anywhere" : "background",
+				className: cn("size-full", drawingKind && "cursor-crosshair"),
 				style: {
 					"--cui-infinite-canvas-radius": "0px",
 					"--cui-infinite-canvas-border-color": "transparent",
@@ -452,8 +460,7 @@ function DesignCanvasToolbarButton({ label, hint, pressed, children, ...props })
 			...props,
 			"aria-label": label,
 			iconOnly: true,
-			"aria-pressed": pressed,
-			"data-pressed": pressed ? "" : void 0
+			"aria-pressed": pressed
 		}),
 		children
 	}), /* @__PURE__ */ jsx(TooltipContent, { children: hint })] });

package/dist/chat-message.js

@@ -224,6 +224,7 @@ function ChatMessageEditable({ value, onSave, onSaveError, editorLabel = "Edit m
 		children: [
 			/* @__PURE__ */ jsxs(ChatMessageContent, {
 				"data-editable": "",
+				"data-focus-ring": "within",
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						"data-control-ui": "chat-message",
@@ -268,47 +269,40 @@ function ChatMessageEditable({ value, onSave, onSaveError, editorLabel = "Edit m
 					})
 				]
 			}),
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx("div", {
 				"data-control-ui": "chat-message",
 				"data-control-family": "chat-message",
-				"data-slot": "edit-toolbars",
-				children: [/* @__PURE__ */ jsx("div", {
-					"data-control-ui": "chat-message",
-					"data-control-family": "chat-message",
-					"data-slot": "edit-toolbar",
-					"data-active": !editing ? "" : void 0,
-					inert: editing,
-					"aria-hidden": editing,
-					children: /* @__PURE__ */ jsx(ActionBar, {
-						align: message.isEndAligned ? "end" : "start",
-						copyValue: value,
-						onEdit: startEditing,
-						children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionBarCopy, {}), /* @__PURE__ */ jsx(ActionBarEdit, {})] })
-					})
-				}), /* @__PURE__ */ jsx("div", {
-					"data-control-ui": "chat-message",
-					"data-control-family": "chat-message",
-					"data-slot": "edit-toolbar",
-					"data-active": editing ? "" : void 0,
-					inert: !editing,
-					"aria-hidden": !editing,
-					children: /* @__PURE__ */ jsxs(ActionBar, {
-						align: message.isEndAligned ? "end" : "start",
-						label: "Edit actions",
-						"aria-busy": saving,
-						children: [/* @__PURE__ */ jsx(ActionBarItem, {
-							type: "button",
-							disabled: saving || !draft.trim(),
-							onClick: () => void save(),
-							children: saveLabel
-						}), /* @__PURE__ */ jsx(ActionBarItem, {
-							type: "button",
-							disabled: saving,
-							onClick: cancelEditing,
-							children: cancelLabel
-						})]
-					})
-				})]
+				"data-slot": "read-actions",
+				children: /* @__PURE__ */ jsx(ActionBar, {
+					align: message.isEndAligned ? "end" : "start",
+					copyValue: value,
+					onEdit: startEditing,
+					children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionBarCopy, {}), /* @__PURE__ */ jsx(ActionBarEdit, {})] })
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-control-ui": "chat-message",
+				"data-control-family": "chat-message",
+				"data-slot": "edit-actions",
+				children: /* @__PURE__ */ jsxs(ActionBar, {
+					align: message.isEndAligned ? "end" : "start",
+					label: "Edit actions",
+					"aria-busy": saving,
+					style: { "--cui-action-bar-hidden-opacity": "1" },
+					children: [/* @__PURE__ */ jsx(ActionBarItem, {
+						type: "button",
+						variant: "surface",
+						disabled: saving,
+						onClick: cancelEditing,
+						children: cancelLabel
+					}), /* @__PURE__ */ jsx(ActionBarItem, {
+						type: "button",
+						variant: "solid",
+						disabled: saving || !draft.trim(),
+						onClick: () => void save(),
+						children: saveLabel
+					})]
+				})
 			}),
 			/* @__PURE__ */ jsx(LiveStatus, { message: saving ? savingLabel : "" }),
 			/* @__PURE__ */ jsx("span", {

package/dist/knob-contracts/infinite-canvas-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/infinite-canvas-knobs.d.ts
-export declare const infiniteCanvasKnobs: readonly ["--cui-infinite-canvas-radius", "--cui-infinite-canvas-background", "--cui-infinite-canvas-grid-dot-color", "--cui-infinite-canvas-border-color", "--cui-infinite-canvas-padding", "--cui-infinite-canvas-controls-item-radius", "--cui-infinite-canvas-controls-padding", "--cui-infinite-canvas-controls-radius", "--cui-infinite-canvas-controls-background", "--cui-infinite-canvas-controls-border-color", "--cui-infinite-canvas-controls-shadow"];
+export declare const infiniteCanvasKnobs: readonly ["--cui-infinite-canvas-radius", "--cui-infinite-canvas-background", "--cui-infinite-canvas-grid-dot-color", "--cui-infinite-canvas-border-color", "--cui-infinite-canvas-padding"];
 export type InfiniteCanvasKnobStyle = Partial<Record<(typeof infiniteCanvasKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/infinite-canvas-knobs.js

@@ -4,13 +4,7 @@ const infiniteCanvasKnobs = [
 	"--cui-infinite-canvas-background",
 	"--cui-infinite-canvas-grid-dot-color",
 	"--cui-infinite-canvas-border-color",
-	"--cui-infinite-canvas-padding",
-	"--cui-infinite-canvas-controls-item-radius",
-	"--cui-infinite-canvas-controls-padding",
-	"--cui-infinite-canvas-controls-radius",
-	"--cui-infinite-canvas-controls-background",
-	"--cui-infinite-canvas-controls-border-color",
-	"--cui-infinite-canvas-controls-shadow"
+	"--cui-infinite-canvas-padding"
 ];
 //#endregion
 export { infiniteCanvasKnobs };

package/dist/knob-contracts/swap-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/swap-knobs.d.ts
+export declare const swapKnobs: readonly ["--cui-swap-animation-duration", "--cui-swap-easing", "--cui-swap-label-inset", "--cui-swap-icon-scale"];
+export type SwapKnobStyle = Partial<Record<(typeof swapKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/swap-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/swap-knobs.ts
+const swapKnobs = [
+	"--cui-swap-animation-duration",
+	"--cui-swap-easing",
+	"--cui-swap-label-inset",
+	"--cui-swap-icon-scale"
+];
+//#endregion
+export { swapKnobs };

package/dist/knob-contracts/timeline-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/timeline-knobs.d.ts
-export declare const timelineKnobs: readonly ["--cui-timeline-indicator-background", "--cui-timeline-indicator-foreground", "--cui-timeline-running-foreground", "--cui-timeline-success-foreground", "--cui-timeline-error-foreground", "--cui-timeline-separator-background", "--cui-timeline-title-foreground"];
+export declare const timelineKnobs: readonly ["--cui-timeline-indicator-background", "--cui-timeline-indicator-foreground", "--cui-timeline-running-foreground", "--cui-timeline-waiting-foreground", "--cui-timeline-success-foreground", "--cui-timeline-error-foreground", "--cui-timeline-separator-background", "--cui-timeline-title-foreground"];
 export type TimelineKnobStyle = Partial<Record<(typeof timelineKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/timeline-knobs.js

@@ -3,6 +3,7 @@ const timelineKnobs = [
 	"--cui-timeline-indicator-background",
 	"--cui-timeline-indicator-foreground",
 	"--cui-timeline-running-foreground",
+	"--cui-timeline-waiting-foreground",
 	"--cui-timeline-success-foreground",
 	"--cui-timeline-error-foreground",
 	"--cui-timeline-separator-background",

package/dist/knob-contracts/tool-approval-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/tool-approval-knobs.d.ts
+export declare const toolApprovalKnobs: readonly ["--cui-tool-approval-background", "--cui-tool-approval-foreground", "--cui-tool-approval-border-color", "--cui-tool-approval-border-width", "--cui-tool-approval-radius", "--cui-tool-approval-shadow", "--cui-tool-approval-padding", "--cui-tool-approval-body-background", "--cui-tool-approval-body-border-color", "--cui-tool-approval-body-border-width", "--cui-tool-approval-body-radius", "--cui-tool-approval-body-shadow", "--cui-tool-approval-body-padding", "--cui-tool-approval-body-gap", "--cui-tool-approval-footer-border-color", "--cui-tool-approval-footer-border-width", "--cui-tool-approval-footer-padding", "--cui-tool-approval-footer-gap", "--cui-tool-approval-preview-background", "--cui-tool-approval-preview-border-color", "--cui-tool-approval-preview-border-width", "--cui-tool-approval-preview-radius", "--cui-tool-approval-preview-padding", "--cui-tool-approval-preview-gap", "--cui-tool-approval-label-foreground", "--cui-tool-approval-description-foreground", "--cui-tool-approval-status-foreground"];
+export type ToolApprovalKnobStyle = Partial<Record<(typeof toolApprovalKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/tool-approval-knobs.js

@@ -0,0 +1,32 @@
+//#region src/knob-contracts/tool-approval-knobs.ts
+const toolApprovalKnobs = [
+	"--cui-tool-approval-background",
+	"--cui-tool-approval-foreground",
+	"--cui-tool-approval-border-color",
+	"--cui-tool-approval-border-width",
+	"--cui-tool-approval-radius",
+	"--cui-tool-approval-shadow",
+	"--cui-tool-approval-padding",
+	"--cui-tool-approval-body-background",
+	"--cui-tool-approval-body-border-color",
+	"--cui-tool-approval-body-border-width",
+	"--cui-tool-approval-body-radius",
+	"--cui-tool-approval-body-shadow",
+	"--cui-tool-approval-body-padding",
+	"--cui-tool-approval-body-gap",
+	"--cui-tool-approval-footer-border-color",
+	"--cui-tool-approval-footer-border-width",
+	"--cui-tool-approval-footer-padding",
+	"--cui-tool-approval-footer-gap",
+	"--cui-tool-approval-preview-background",
+	"--cui-tool-approval-preview-border-color",
+	"--cui-tool-approval-preview-border-width",
+	"--cui-tool-approval-preview-radius",
+	"--cui-tool-approval-preview-padding",
+	"--cui-tool-approval-preview-gap",
+	"--cui-tool-approval-label-foreground",
+	"--cui-tool-approval-description-foreground",
+	"--cui-tool-approval-status-foreground"
+];
+//#endregion
+export { toolApprovalKnobs };

package/dist/lib/infinite-canvas-camera-store.d.ts

@@ -0,0 +1,65 @@
+import { InfiniteCanvasBounds, InfiniteCanvasPoint, InfiniteCanvasTransform } from "./infinite-canvas-camera.js";
+//#region src/lib/infinite-canvas-camera-store.d.ts
+export type InfiniteCanvasMoveReason = "pointer" | "pinch" | "wheel" | "keyboard" | "control" | "reveal";
+export type InfiniteCanvasMoveDetails = {
+  reason: InfiniteCanvasMoveReason;
+};
+export type InfiniteCanvasMoveOptions = {
+  reason?: InfiniteCanvasMoveReason;
+};
+export type InfiniteCanvasZoomOptions = InfiniteCanvasMoveOptions & {
+  origin?: InfiniteCanvasPoint;
+};
+export type InfiniteCanvasRevealOptions = InfiniteCanvasMoveOptions & {
+  padding?: number;
+  area?: InfiniteCanvasBounds;
+};
+export type InfiniteCanvasFitOptions = InfiniteCanvasRevealOptions & {
+  maxScale?: number;
+};
+export type InfiniteCanvasTransformUpdate = InfiniteCanvasTransform | ((current: InfiniteCanvasTransform) => InfiniteCanvasTransform);
+export type InfiniteCanvasClientPoint = {
+  clientX: number;
+  clientY: number;
+};
+export type InfiniteCanvasCamera = {
+  getTransform: () => InfiniteCanvasTransform;
+  setTransform: (update: InfiniteCanvasTransformUpdate, options?: InfiniteCanvasMoveOptions) => void;
+  zoomBy: (factor: number, options?: InfiniteCanvasZoomOptions) => void;
+  zoomTo: (scale: number, options?: InfiniteCanvasZoomOptions) => void;
+  reset: (options?: InfiniteCanvasMoveOptions) => void;
+  fit: (options?: InfiniteCanvasFitOptions) => void;
+  fitBounds: (bounds: InfiniteCanvasBounds, options?: InfiniteCanvasFitOptions) => void;
+  revealBounds: (bounds: InfiniteCanvasBounds, options?: InfiniteCanvasRevealOptions) => void;
+  toWorldPoint: (point: InfiniteCanvasClientPoint) => InfiniteCanvasPoint;
+  subscribe: (listener: () => void) => () => void;
+};
+export type InfiniteCanvasCameraOptions = {
+  minScale: number;
+  maxScale: number;
+  defaultTransform: InfiniteCanvasTransform;
+  controlled: boolean;
+  onTransformChange?: (transform: InfiniteCanvasTransform, details: InfiniteCanvasMoveDetails) => void;
+};
+export type InfiniteCanvasCameraStore = InfiniteCanvasCamera & {
+  camera: InfiniteCanvasCamera;
+  configure: (options: InfiniteCanvasCameraOptions) => void;
+  attachRoot: (element: HTMLElement | null) => void;
+  attachContent: (element: HTMLElement | null) => void;
+  contentElement: () => HTMLElement | null;
+  getCommittedTransform: () => InfiniteCanvasTransform;
+  limitScale: (scale: number) => number;
+  move: (next: InfiniteCanvasTransform, reason: InfiniteCanvasMoveReason, eased?: boolean) => void;
+  moveNow: (next: InfiniteCanvasTransform, reason: InfiniteCanvasMoveReason) => void;
+  adopt: (next: InfiniteCanvasTransform) => void;
+  revealElement: (element: Element) => void;
+  toLocalPoint: (point: InfiniteCanvasClientPoint) => InfiniteCanvasPoint;
+  dispose: () => void;
+};
+export declare function infiniteCanvasTransformCss({ x, y, scale }: InfiniteCanvasTransform): string;
+export declare function infiniteCanvasGridStyle({ x, y, scale }: InfiniteCanvasTransform): {
+  backgroundPosition: string;
+  backgroundSize: string;
+};
+export declare function createInfiniteCanvasCamera(initial: InfiniteCanvasTransform, initialOptions: InfiniteCanvasCameraOptions): InfiniteCanvasCameraStore;
+//#endregion

package/dist/lib/infinite-canvas-camera-store.js

@@ -0,0 +1,233 @@
+import "./canvas-grid.js";
+import { boundedTransform, clampScale, fitTransform, revealOffset, sameTransform, toWorldPoint, unionBounds, zoomAroundPoint } from "./infinite-canvas-camera.js";
+//#region src/lib/infinite-canvas-camera-store.ts
+const EASED_BY_REASON = {
+	pointer: false,
+	pinch: false,
+	wheel: false,
+	keyboard: true,
+	control: true,
+	reveal: false
+};
+const CAMERA_IDLE_MS = 240;
+const DEFAULT_FIT_PADDING_PX = 48;
+const DEFAULT_FIT_MAX_SCALE = 1;
+const DEFAULT_REVEAL_PADDING_PX = 24;
+const MIN_GRID_SPACING_PX = 12;
+function infiniteCanvasTransformCss({ x, y, scale }) {
+	return `translate(${x}px, ${y}px) scale(${scale})`;
+}
+function infiniteCanvasGridStyle({ x, y, scale }) {
+	let spacing = 24 * scale;
+	while (spacing < MIN_GRID_SPACING_PX) spacing *= 2;
+	return {
+		backgroundPosition: `${x}px ${y}px`,
+		backgroundSize: `${spacing}px ${spacing}px`
+	};
+}
+function createInfiniteCanvasCamera(initial, initialOptions) {
+	let options = initialOptions;
+	let latest = initial;
+	let committed = initial;
+	let pending = null;
+	let lastEmitted = null;
+	let frame = 0;
+	let idleTimer;
+	let root = null;
+	let content = null;
+	const listeners = /* @__PURE__ */ new Set();
+	function writeTransform() {
+		if (content) {
+			content.style.transform = infiniteCanvasTransformCss(committed);
+			content.dataset.scale = String(committed.scale);
+		}
+		if (root) Object.assign(root.style, infiniteCanvasGridStyle(committed));
+	}
+	function markMotion(eased) {
+		const element = root;
+		if (!element) return;
+		element.toggleAttribute("data-moving", true);
+		if (eased) element.setAttribute("data-easing", "true");
+		else element.removeAttribute("data-easing");
+		clearTimeout(idleTimer);
+		idleTimer = setTimeout(() => element.removeAttribute("data-moving"), CAMERA_IDLE_MS);
+	}
+	function commit(next, eased) {
+		committed = next;
+		markMotion(eased);
+		writeTransform();
+		for (const listener of listeners) listener();
+	}
+	function flush() {
+		frame = 0;
+		if (!pending) return;
+		const { reason, eased } = pending;
+		pending = null;
+		lastEmitted = {
+			transform: latest,
+			eased
+		};
+		if (!options.controlled) commit(latest, eased);
+		options.onTransformChange?.(latest, { reason });
+	}
+	function flushNow() {
+		if (!frame) return;
+		cancelAnimationFrame(frame);
+		flush();
+	}
+	function move(next, reason, eased = EASED_BY_REASON[reason]) {
+		const bounded = boundedTransform(next, options.minScale, options.maxScale);
+		if (!bounded || sameTransform(bounded, latest)) return;
+		latest = bounded;
+		pending = {
+			reason,
+			eased
+		};
+		frame ||= requestAnimationFrame(flush);
+	}
+	function viewportArea() {
+		return {
+			x: 0,
+			y: 0,
+			width: root?.clientWidth ?? 0,
+			height: root?.clientHeight ?? 0
+		};
+	}
+	function toLocalPoint(point) {
+		const bounds = root?.getBoundingClientRect();
+		return {
+			x: point.clientX - (bounds?.left ?? 0),
+			y: point.clientY - (bounds?.top ?? 0)
+		};
+	}
+	function contentBounds() {
+		if (!content) return null;
+		const origin = content.getBoundingClientRect();
+		const renderedScale = new DOMMatrixReadOnly(getComputedStyle(content).transform).a || committed.scale;
+		const rects = [];
+		for (const child of content.children) for (const element of [child, ...child.children]) {
+			const bounds = element.getBoundingClientRect();
+			if (bounds.width === 0 && bounds.height === 0) continue;
+			rects.push({
+				x: (bounds.left - origin.left) / renderedScale,
+				y: (bounds.top - origin.top) / renderedScale,
+				width: bounds.width / renderedScale,
+				height: bounds.height / renderedScale
+			});
+		}
+		return unionBounds(rects);
+	}
+	function revealScreenBounds(screenBounds, revealOptions) {
+		const offset = revealOffset(screenBounds, revealOptions.area ?? viewportArea(), revealOptions.padding ?? DEFAULT_REVEAL_PADDING_PX);
+		if (offset.x === 0 && offset.y === 0) return;
+		move({
+			...latest,
+			x: latest.x + offset.x,
+			y: latest.y + offset.y
+		}, revealOptions.reason ?? "control");
+	}
+	function zoomTo(scale, zoomOptions = {}) {
+		const area = viewportArea();
+		const origin = zoomOptions.origin ?? {
+			x: area.width / 2,
+			y: area.height / 2
+		};
+		move(zoomAroundPoint(latest, clampScale(scale, options.minScale, options.maxScale), origin), zoomOptions.reason ?? "control");
+	}
+	function fitBounds(bounds, fitOptions = {}) {
+		const limits = {
+			padding: fitOptions.padding ?? DEFAULT_FIT_PADDING_PX,
+			minScale: options.minScale,
+			maxScale: Math.min(fitOptions.maxScale ?? DEFAULT_FIT_MAX_SCALE, options.maxScale)
+		};
+		move(fitTransform(bounds, fitOptions.area ?? viewportArea(), limits), fitOptions.reason ?? "control");
+	}
+	const camera = {
+		getTransform: () => latest,
+		setTransform(update, moveOptions = {}) {
+			move(typeof update === "function" ? update(latest) : update, moveOptions.reason ?? "control");
+		},
+		zoomTo,
+		zoomBy(factor, zoomOptions = {}) {
+			zoomTo(latest.scale * factor, zoomOptions);
+		},
+		reset(moveOptions = {}) {
+			move(options.defaultTransform, moveOptions.reason ?? "control");
+		},
+		fitBounds,
+		fit(fitOptions = {}) {
+			const bounds = contentBounds();
+			if (bounds) fitBounds(bounds, fitOptions);
+			else move(options.defaultTransform, fitOptions.reason ?? "control");
+		},
+		revealBounds(bounds, revealOptions = {}) {
+			revealScreenBounds({
+				x: latest.x + bounds.x * latest.scale,
+				y: latest.y + bounds.y * latest.scale,
+				width: bounds.width * latest.scale,
+				height: bounds.height * latest.scale
+			}, revealOptions);
+		},
+		toWorldPoint: (point) => toWorldPoint(latest, toLocalPoint(point)),
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+	return {
+		...camera,
+		camera,
+		configure(next) {
+			options = next;
+		},
+		attachRoot(element) {
+			root = element;
+			writeTransform();
+		},
+		attachContent(element) {
+			content = element;
+			writeTransform();
+		},
+		contentElement: () => content,
+		getCommittedTransform: () => committed,
+		limitScale: (scale) => clampScale(scale, options.minScale, options.maxScale),
+		move,
+		moveNow(next, reason) {
+			move(next, reason, false);
+			flushNow();
+		},
+		adopt(next) {
+			const bounded = boundedTransform(next, options.minScale, options.maxScale);
+			if (!bounded) return;
+			const echo = lastEmitted && sameTransform(bounded, lastEmitted.transform) ? lastEmitted : null;
+			if (!echo) {
+				cancelAnimationFrame(frame);
+				frame = 0;
+				pending = null;
+			}
+			if (!pending) latest = bounded;
+			if (!sameTransform(bounded, committed)) commit(bounded, echo?.eased ?? false);
+		},
+		revealElement(element) {
+			const bounds = element.getBoundingClientRect();
+			revealScreenBounds({
+				...toLocalPoint({
+					clientX: bounds.left,
+					clientY: bounds.top
+				}),
+				width: bounds.width,
+				height: bounds.height
+			}, { reason: "reveal" });
+			flushNow();
+		},
+		toLocalPoint,
+		dispose() {
+			flushNow();
+			clearTimeout(idleTimer);
+		}
+	};
+}
+//#endregion
+export { createInfiniteCanvasCamera, infiniteCanvasGridStyle, infiniteCanvasTransformCss };

package/dist/lib/infinite-canvas-camera.d.ts

@@ -0,0 +1,33 @@
+//#region src/lib/infinite-canvas-camera.d.ts
+export type InfiniteCanvasTransform = {
+  x: number;
+  y: number;
+  scale: number;
+};
+export type InfiniteCanvasPoint = {
+  x: number;
+  y: number;
+};
+export type InfiniteCanvasBounds = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+export type CanvasWheelInput = Pick<WheelEvent, "deltaMode" | "deltaX" | "deltaY" | "shiftKey">;
+export declare function clampScale(scale: number, minScale: number, maxScale: number): number;
+export declare function sameTransform(left: InfiniteCanvasTransform, right: InfiniteCanvasTransform): boolean;
+export declare function boundedTransform(next: InfiniteCanvasTransform, minScale: number, maxScale: number): InfiniteCanvasTransform | null;
+export declare function toWorldPoint(transform: InfiniteCanvasTransform, point: InfiniteCanvasPoint): InfiniteCanvasPoint;
+export declare function zoomAroundPoint(transform: InfiniteCanvasTransform, nextScale: number, point: InfiniteCanvasPoint): InfiniteCanvasTransform;
+export declare function pinchTransform(start: InfiniteCanvasTransform, startMidpoint: InfiniteCanvasPoint, midpoint: InfiniteCanvasPoint, nextScale: number): InfiniteCanvasTransform;
+export declare function wheelDeltaMultiplier(deltaMode: number, pageHeight: number): number;
+export declare function wheelDeltaPixels(event: CanvasWheelInput, pageHeight: number): InfiniteCanvasPoint;
+export declare function unionBounds(bounds: readonly InfiniteCanvasBounds[]): InfiniteCanvasBounds | null;
+export declare function fitTransform(bounds: InfiniteCanvasBounds, area: InfiniteCanvasBounds, limits: {
+  padding: number;
+  minScale: number;
+  maxScale: number;
+}): InfiniteCanvasTransform;
+export declare function revealOffset(screenBounds: InfiniteCanvasBounds, area: InfiniteCanvasBounds, padding: number): InfiniteCanvasPoint;
+//#endregion