@dxos/react-ui-canvas 0.10.0 → 0.11.1

package/dist/lib/index.mjs

@@ -0,0 +1,1312 @@
+import { createContext, forwardRef, useContext, useEffect, useId, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { mx } from "@dxos/ui-theme";
+import { easeSinOut, interpolate, interpolateObject, transition } from "d3";
+import { applyToPoints, compose, identity, inverse, scale, translate } from "transformation-matrix";
+import { raise } from "@dxos/debug";
+import { bind, bindAll } from "bind-event-listener";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { RegistryContext } from "@effect-atom/atom-react";
+import { Atom } from "@effect-atom/atom";
+import { useForwardedRef } from "@dxos/react-ui";
+import * as Schema from "effect/Schema";
+//#region src/hooks/projection.tsx
+var defaultOrigin = {
+	x: 0,
+	y: 0
+};
+var ProjectionMapper = class {
+	_bounds = {
+		width: 0,
+		height: 0
+	};
+	_scale = 1;
+	_offset = defaultOrigin;
+	_toScreen = identity();
+	_toModel = identity();
+	constructor(bounds, scale, offset) {
+		if (bounds && scale && offset) this.update(bounds, scale, offset);
+	}
+	update(bounds, scale$1, offset) {
+		this._bounds = bounds;
+		this._scale = scale$1;
+		this._offset = offset;
+		this._toScreen = compose(translate(this._offset.x, this._offset.y), scale(this._scale));
+		this._toModel = inverse(this._toScreen);
+		return this;
+	}
+	get bounds() {
+		return this._bounds;
+	}
+	get scale() {
+		return this._scale;
+	}
+	get offset() {
+		return this._offset;
+	}
+	toScreen(points) {
+		return applyToPoints(this._toScreen, points);
+	}
+	toModel(points) {
+		return applyToPoints(this._toModel, points);
+	}
+};
+/**
+* Maintain position while zooming.
+*/
+var getZoomTransform = ({ scale, offset, pos, newScale }) => {
+	return {
+		scale: newScale,
+		offset: {
+			x: pos.x - (pos.x - offset.x) * (newScale / scale),
+			y: pos.y - (pos.y - offset.y) * (newScale / scale)
+		}
+	};
+};
+/**
+* Zoom while keeping the specified position in place.
+*/
+var zoomInPlace = (setTransform, pos, offset, current, next, delay = 200) => {
+	const is = interpolate(current, next);
+	transition().ease(easeSinOut).duration(delay).tween("zoom", () => (t) => {
+		setTransform(getZoomTransform({
+			scale: current,
+			newScale: is(t),
+			offset,
+			pos
+		}));
+	});
+};
+var noop = () => {};
+/**
+* Zoom to new scale and position.
+*/
+var zoomTo = (setTransform, current, next, delay = 200, cb = noop) => {
+	const is = interpolateObject({
+		scale: current.scale,
+		...current.offset
+	}, {
+		scale: next.scale,
+		...next.offset
+	});
+	transition().ease(easeSinOut).duration(delay).tween("zoom", () => (t) => {
+		const { scale, x, y } = is(t);
+		setTransform({
+			scale,
+			offset: {
+				x,
+				y
+			}
+		});
+	}).on("end", cb);
+};
+//#endregion
+//#region src/hooks/useCanvasContext.ts
+/**
+* @internal
+*/
+var CanvasContext = createContext(null);
+var useCanvasContext = () => {
+	return useContext(CanvasContext) ?? raise(/* @__PURE__ */ new Error("Missing CanvasContext"));
+};
+//#endregion
+//#region src/hooks/useDrag.tsx
+/**
+* Handle drag events to update the transform state (offset).
+*/
+var useDrag = (_options = {}) => {
+	const { root, setProjection } = useCanvasContext();
+	const state = useRef({
+		panning: false,
+		x: 0,
+		y: 0
+	});
+	useEffect(() => {
+		if (!root) return;
+		return bind(root, {
+			type: "pointerdown",
+			listener: (ev) => {
+				if (ev.button !== 0) return;
+				if (ev.defaultPrevented) return;
+				if (ev.target !== root || ev.shiftKey) return;
+				ev.preventDefault();
+				root.setPointerCapture(ev.pointerId);
+				state.current = {
+					panning: true,
+					x: ev.clientX,
+					y: ev.clientY
+				};
+				const moveUnbind = bind(root, {
+					type: "pointermove",
+					listener: (ev) => {
+						if (!state.current.panning) return;
+						const dx = ev.clientX - state.current.x;
+						const dy = ev.clientY - state.current.y;
+						state.current.x = ev.clientX;
+						state.current.y = ev.clientY;
+						setProjection((prev) => ({
+							...prev,
+							offset: {
+								x: prev.offset.x + dx,
+								y: prev.offset.y + dy
+							}
+						}));
+					}
+				});
+				const upUnbind = bind(root, {
+					type: "pointerup",
+					listener: (ev) => {
+						state.current.panning = false;
+						root.releasePointerCapture(ev.pointerId);
+						moveUnbind();
+						upUnbind();
+					}
+				});
+			}
+		});
+	}, [root]);
+};
+//#endregion
+//#region src/util/svg-path.ts
+/** https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths */
+var createPath = (points, join = false) => {
+	return [
+		"M",
+		points.map(({ x, y }) => `${x},${y}`).join(" L "),
+		join ? "Z" : ""
+	].join(" ");
+};
+//#endregion
+//#region src/util/svg.tsx
+/**
+* https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+* NOTE: Leave space around shape for line width.
+*/
+var Markers = ({ id = "dx-marker", classNames }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Arrow, {
+			id: `${id}-arrow-start`,
+			dir: "start",
+			classNames
+		}),
+		/* @__PURE__ */ jsx(Arrow, {
+			id: `${id}-arrow-end`,
+			dir: "end",
+			classNames
+		}),
+		/* @__PURE__ */ jsx(Arrow, {
+			id: `${id}-triangle-start`,
+			dir: "start",
+			closed: true,
+			classNames
+		}),
+		/* @__PURE__ */ jsx(Arrow, {
+			id: `${id}-triangle-end`,
+			dir: "end",
+			closed: true,
+			classNames
+		}),
+		/* @__PURE__ */ jsx(Marker, {
+			id: `${id}-circle`,
+			pos: {
+				x: 8,
+				y: 8
+			},
+			size: {
+				width: 16,
+				height: 16
+			},
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: 8,
+				cy: 8,
+				r: 5,
+				stroke: "context-stroke",
+				className: mx(classNames)
+			})
+		})
+	] });
+};
+/**
+* https://www.w3.org/TR/SVG2/painting.html#Markers
+*/
+var Marker = ({ id, className, children, pos: { x: refX, y: refY }, size: { width: markerWidth, height: markerHeight }, fill, ...rest }) => /* @__PURE__ */ jsx("marker", {
+	id,
+	className,
+	refX,
+	refY,
+	markerWidth,
+	markerHeight,
+	markerUnits: "strokeWidth",
+	orient: "auto",
+	...rest,
+	children
+});
+var Arrow = ({ classNames, id, size = 16, dir = "end", closed = false }) => /* @__PURE__ */ jsx(Marker, {
+	id,
+	size: {
+		width: size,
+		height: size
+	},
+	pos: dir === "end" ? {
+		x: size,
+		y: size / 2
+	} : {
+		x: 0,
+		y: size / 2
+	},
+	children: /* @__PURE__ */ jsx("path", {
+		fill: closed ? void 0 : "none",
+		stroke: "context-stroke",
+		className: mx(classNames),
+		d: createPath(dir === "end" ? [
+			{
+				x: 1,
+				y: 1
+			},
+			{
+				x: size,
+				y: size / 2
+			},
+			{
+				x: 1,
+				y: size - 1
+			}
+		] : [
+			{
+				x: size - 1,
+				y: 1
+			},
+			{
+				x: 0,
+				y: size / 2
+			},
+			{
+				x: size - 1,
+				y: size - 1
+			}
+		], closed)
+	})
+});
+var GridPattern = ({ classNames, id, size, offset }) => /* @__PURE__ */ jsx("pattern", {
+	id,
+	x: (size / 2 + offset.x) % size,
+	y: (size / 2 + offset.y) % size,
+	width: size,
+	height: size,
+	patternUnits: "userSpaceOnUse",
+	children: /* @__PURE__ */ jsxs("g", {
+		className: mx(classNames),
+		children: [/* @__PURE__ */ jsx("line", {
+			x1: 0,
+			y1: size / 2,
+			x2: size,
+			y2: size / 2
+		}), /* @__PURE__ */ jsx("line", {
+			x1: size / 2,
+			y1: 0,
+			x2: size / 2,
+			y2: size
+		})]
+	})
+});
+//#endregion
+//#region src/util/util.ts
+var logged = false;
+/**
+* Get the relative point of the cursor.
+* NOTE: ev.offset returns the position relative to the target.
+*/
+var getRelativePoint = (el, ev) => {
+	const rect = el.getBoundingClientRect();
+	return {
+		x: ev.clientX - rect.x,
+		y: ev.clientY - rect.top
+	};
+};
+/**
+*
+*/
+var testId = (id, inspect = false) => {
+	if (inspect) {
+		if (!logged) {
+			console.log("Open storybook in expanded window;\nthen run INSPECT()");
+			logged = true;
+		}
+		window.INSPECT = () => {
+			const el = document.querySelector(`[data-test-id="${id}"]`);
+			window.inspect(el);
+			console.log(el);
+		};
+	}
+	return { [DATA_TEST_ID]: id };
+};
+var inspectElement = (el) => {
+	window.INSPECT = () => {
+		window.inspect(el);
+		window.element = el;
+		console.log("Open storybook in expanded window;\nthen run INSPECT()");
+		console.log(el);
+	};
+};
+var DATA_TEST_ID = "data-test-id";
+//#endregion
+//#region src/hooks/useWheel.tsx
+var defaultOptions = { zoom: true };
+/**
+* Handle wheel events to update the transform state (zoom and offset).
+*/
+var useWheel = (options = defaultOptions) => {
+	const { root, setProjection } = useCanvasContext();
+	useEffect(() => {
+		if (!root) return;
+		return bindAll(root, [{
+			type: "wheel",
+			options: {
+				capture: true,
+				passive: false
+			},
+			listener: (ev) => {
+				const zooming = isWheelZooming(ev);
+				ev.preventDefault();
+				if (zooming && !options.zoom) return;
+				if (ev.ctrlKey) {
+					if (!root) return;
+					setProjection(({ scale, offset }) => {
+						const pos = getRelativePoint(root, ev);
+						return getZoomTransform({
+							scale,
+							offset,
+							newScale: scale * Math.exp(-ev.deltaY * .01),
+							pos
+						});
+					});
+				} else setProjection(({ scale, offset: { x, y } }) => {
+					return {
+						scale,
+						offset: {
+							x: x - ev.deltaX,
+							y: y - ev.deltaY
+						}
+					};
+				});
+			}
+		}]);
+	}, [root]);
+};
+var isWheelZooming = (ev) => {
+	if (ev.ctrlKey || ev.metaKey) return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;
+	return false;
+};
+//#endregion
+//#region src/components/Canvas/Canvas.tsx
+/**
+* Root canvas component.
+* Manages CSS projection.
+*/
+var Canvas = forwardRef(({ children, classNames, scale: scaleProp = 1, offset: offsetProp = defaultOrigin, ...props }, forwardedRef) => {
+	const { ref, width = 0, height = 0 } = useResizeDetector();
+	const [ready, setReady] = useState(false);
+	const [{ scale, offset }, setProjection] = useState({
+		scale: scaleProp,
+		offset: offsetProp
+	});
+	useEffect(() => {
+		if (width && height && offset === defaultOrigin) setProjection({
+			scale,
+			offset: {
+				x: width / 2,
+				y: height / 2
+			}
+		});
+	}, [
+		width,
+		height,
+		scale,
+		offset
+	]);
+	const projection = useMemo(() => new ProjectionMapper(), []);
+	useEffect(() => {
+		projection.update({
+			width,
+			height
+		}, scale, offset);
+		if (offset !== defaultOrigin) setReady(true);
+	}, [
+		projection,
+		scale,
+		offset,
+		width,
+		height
+	]);
+	const styles = useMemo(() => {
+		return {
+			transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+			visibility: width && height ? "visible" : "hidden"
+		};
+	}, [scale, offset]);
+	useImperativeHandle(forwardedRef, () => {
+		return { setProjection: async (projection) => {
+			setProjection(projection);
+		} };
+	}, [ref]);
+	return /* @__PURE__ */ jsx(CanvasContext.Provider, {
+		value: {
+			root: ref.current,
+			ready,
+			width,
+			height,
+			scale,
+			offset,
+			styles,
+			projection,
+			setProjection
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className: mx("absolute inset-0 overflow-hidden", classNames),
+			ref,
+			children: ready ? children : null
+		})
+	});
+});
+//#endregion
+//#region src/components/CellGrid/state/viewport.ts
+var cellKey = (col, row) => `${col},${row}`;
+var cellWidth = (viewport) => viewport.baseCellWidth * viewport.zoomX;
+/**
+* Convert a cell's world coordinates to screen-space pixel rectangle (relative to canvas origin).
+*/
+var worldToScreen = (viewport, headers, coord) => {
+	const w = cellWidth(viewport);
+	return {
+		x: headers.left + coord.col * w - viewport.scrollX,
+		y: headers.top + coord.row * viewport.cellHeight - viewport.scrollY,
+		w: (coord.length ?? 1) * w,
+		h: viewport.cellHeight
+	};
+};
+/**
+* Convert screen-space pixels (relative to canvas origin) to fractional cell coordinates.
+*/
+var screenToWorld = (viewport, headers, point) => {
+	const w = cellWidth(viewport);
+	return {
+		col: (point.x - headers.left + viewport.scrollX) / w,
+		row: (point.y - headers.top + viewport.scrollY) / viewport.cellHeight
+	};
+};
+var hitTestCell = (viewport, headers, point) => {
+	if (point.x < headers.left || point.y < headers.top) return null;
+	const { col, row } = screenToWorld(viewport, headers, point);
+	if (col < 0 || row < 0) return null;
+	return {
+		col: Math.floor(col),
+		row: Math.floor(row)
+	};
+};
+/**
+* Compute the inclusive range of cell coordinates intersecting the visible content rect.
+*/
+var visibleCellRange = (viewport, headers, size) => {
+	const w = cellWidth(viewport);
+	const innerW = Math.max(0, size.width - headers.left);
+	const innerH = Math.max(0, size.height - headers.top);
+	return {
+		minCol: Math.max(0, Math.floor(viewport.scrollX / w)),
+		maxCol: Math.floor((viewport.scrollX + innerW) / w),
+		minRow: Math.max(0, Math.floor(viewport.scrollY / viewport.cellHeight)),
+		maxRow: Math.floor((viewport.scrollY + innerH) / viewport.cellHeight)
+	};
+};
+/**
+* Iterate sparse cell map, yielding only cells whose horizontal extent intersects visible cols and whose row is visible.
+*/
+var visibleCells = function* (cells, range) {
+	for (const cell of cells.values()) {
+		if (cell.row < range.minRow || cell.row > range.maxRow) continue;
+		const start = cell.col;
+		if (cell.col + cell.length - 1 < range.minCol || start > range.maxCol) continue;
+		yield cell;
+	}
+};
+//#endregion
+//#region src/components/CellGrid/headers/Ruler.tsx
+/**
+* Frozen top ruler. Ticks reflect the current viewport scroll and zoom.
+*/
+var Ruler = ({ viewport, headers, width, majorEvery = 4, classNames }) => {
+	const safeMajorEvery = Math.max(1, Math.floor(majorEvery));
+	const ticks = useMemo(() => {
+		const w = cellWidth(viewport);
+		if (w < 1 || width <= headers.left) return [];
+		const innerWidth = width - headers.left;
+		const startCol = Math.floor(viewport.scrollX / w);
+		const endCol = Math.ceil((viewport.scrollX + innerWidth) / w);
+		const result = [];
+		for (let col = startCol; col <= endCol; col++) result.push({
+			col,
+			x: headers.left + col * w - viewport.scrollX,
+			major: col % safeMajorEvery === 0
+		});
+		return result;
+	}, [
+		viewport,
+		headers.left,
+		width,
+		safeMajorEvery
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("absolute top-0 left-0 right-0 border-b border-neutral-200 dark:border-neutral-700 bg-base-surface select-none overflow-hidden", classNames),
+		style: { height: headers.top },
+		children: ticks.map(({ col, x, major }) => /* @__PURE__ */ jsx("div", {
+			className: mx("absolute top-0 bottom-0 text-[10px] text-neutral-500 dark:text-neutral-400", major ? "border-l border-neutral-400 dark:border-neutral-500" : "border-l border-neutral-200 dark:border-neutral-700"),
+			style: { transform: `translateX(${x}px)` },
+			children: major ? /* @__PURE__ */ jsx("span", {
+				className: "absolute left-1 top-0",
+				children: col
+			}) : null
+		}, col))
+	});
+};
+//#endregion
+//#region src/components/CellGrid/headers/TrackHeader.tsx
+/**
+* Frozen left column listing row labels. Translates vertically in sync with viewport scroll.
+*
+* Row dividers and alternating shading intentionally MATCH the canvas — opaque borders
+* and opaque alternating fills make the labels look out of phase with the cell area
+* even when the y-positions align. We mirror the canvas's transparent-overlay model
+* here so the frozen column reads as a direct continuation of the grid.
+*/
+var TrackHeader = ({ viewport, headers, rows, height, classNames }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("absolute left-0 border-r border-neutral-200 dark:border-neutral-700 select-none overflow-hidden", classNames),
+		style: {
+			top: headers.top,
+			width: headers.left,
+			height: Math.max(0, height - headers.top)
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: { transform: `translateY(${-viewport.scrollY}px)` },
+			children: rows.map((row, index) => /* @__PURE__ */ jsx("div", {
+				className: "flex items-center px-2 text-xs text-neutral-700 dark:text-neutral-300",
+				style: {
+					height: viewport.cellHeight,
+					backgroundColor: index % 2 === 0 ? "transparent" : "rgba(128, 128, 128, 0.08)",
+					boxShadow: "inset 0 -1px 0 rgba(128, 128, 128, 0.25)"
+				},
+				children: row.label ?? row.id
+			}, row.id))
+		})
+	});
+};
+//#endregion
+//#region src/components/CellGrid/input/pointer.ts
+/**
+* Attach pointer handlers to an element. Returns an unsubscribe.
+*/
+var attachPointerHandlers = (element, { registry, atoms, headers, handlers }) => {
+	let drag = null;
+	const local = (event) => {
+		const rect = element.getBoundingClientRect();
+		return {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+	};
+	const tryCapture = (pointerId) => {
+		try {
+			element.setPointerCapture(pointerId);
+		} catch {}
+	};
+	const onPointerDown = (event) => {
+		if (event.button === 1 || event.button === 0 && event.altKey) {
+			drag = {
+				kind: "pan",
+				lastX: event.clientX,
+				lastY: event.clientY
+			};
+			tryCapture(event.pointerId);
+			event.preventDefault();
+			return;
+		}
+		if (event.button !== 0) return;
+		const coord = hitTestCell(registry.get(atoms.viewport), headers, local(event));
+		if (!coord) return;
+		const tool = registry.get(atoms.tool);
+		tryCapture(event.pointerId);
+		switch (tool) {
+			case "toggle":
+			case "resize": {
+				const cells = registry.get(atoms.cells);
+				const key = cellKey(coord.col, coord.row);
+				const mode = cells.has(key) ? "unset" : "set";
+				handlers.onCellToggle?.(coord, mode);
+				drag = {
+					kind: "toggle",
+					mode,
+					touched: /* @__PURE__ */ new Set([key])
+				};
+				break;
+			}
+			case "edit":
+				drag = {
+					kind: "draw",
+					startCoord: coord,
+					endCoord: coord
+				};
+				handlers.onDrawUpdate?.(coord, coord);
+				break;
+			case "delete": {
+				const key = cellKey(coord.col, coord.row);
+				handlers.onCellToggle?.(coord, "unset");
+				drag = {
+					kind: "toggle",
+					mode: "unset",
+					touched: /* @__PURE__ */ new Set([key])
+				};
+				break;
+			}
+			case "select":
+				drag = {
+					kind: "select",
+					origin: coord
+				};
+				registry.set(atoms.selection, { range: {
+					col0: coord.col,
+					row0: coord.row,
+					col1: coord.col,
+					row1: coord.row
+				} });
+				break;
+		}
+	};
+	const onPointerMove = (event) => {
+		if (!drag) return;
+		if (drag.kind === "pan") {
+			const dx = event.clientX - drag.lastX;
+			const dy = event.clientY - drag.lastY;
+			drag.lastX = event.clientX;
+			drag.lastY = event.clientY;
+			registry.update(atoms.viewport, (current) => ({
+				...current,
+				scrollX: Math.max(0, current.scrollX - dx),
+				scrollY: Math.max(0, current.scrollY - dy)
+			}));
+			return;
+		}
+		const coord = hitTestCell(registry.get(atoms.viewport), headers, local(event));
+		if (!coord) return;
+		if (drag.kind === "toggle") {
+			const key = cellKey(coord.col, coord.row);
+			if (!drag.touched.has(key)) {
+				drag.touched.add(key);
+				handlers.onCellToggle?.(coord, drag.mode);
+			}
+		} else if (drag.kind === "draw") {
+			const constrainedCol = coord.col;
+			if (constrainedCol !== drag.endCoord.col) {
+				drag.endCoord = {
+					col: constrainedCol,
+					row: drag.startCoord.row
+				};
+				handlers.onDrawUpdate?.(drag.startCoord, drag.endCoord);
+			}
+		} else if (drag.kind === "select") registry.set(atoms.selection, { range: {
+			col0: drag.origin.col,
+			row0: drag.origin.row,
+			col1: coord.col,
+			row1: coord.row
+		} });
+	};
+	const releaseCapture = (event) => {
+		if (element.hasPointerCapture(event.pointerId)) element.releasePointerCapture(event.pointerId);
+	};
+	const onPointerUp = (event) => {
+		if (!drag) return;
+		if (drag.kind === "draw") handlers.onDrawCommit?.(drag.startCoord, drag.endCoord);
+		else if (drag.kind === "select") {
+			const range = registry.get(atoms.selection).range;
+			if (range) handlers.onSelectionCommit?.(range);
+		}
+		drag = null;
+		releaseCapture(event);
+	};
+	const onPointerCancel = (event) => {
+		drag = null;
+		releaseCapture(event);
+	};
+	element.addEventListener("pointerdown", onPointerDown);
+	element.addEventListener("pointermove", onPointerMove);
+	element.addEventListener("pointerup", onPointerUp);
+	element.addEventListener("pointercancel", onPointerCancel);
+	return () => {
+		element.removeEventListener("pointerdown", onPointerDown);
+		element.removeEventListener("pointermove", onPointerMove);
+		element.removeEventListener("pointerup", onPointerUp);
+		element.removeEventListener("pointercancel", onPointerCancel);
+	};
+};
+/**
+* Utility for consumers: toggle, set, or unset membership of a cell in the cells atom.
+*/
+var toggleCell = (registry, atoms, coord, factory, mode = "toggle") => {
+	registry.update(atoms.cells, (current) => {
+		const next = new Map(current);
+		const key = cellKey(coord.col, coord.row);
+		const exists = next.has(key);
+		if (mode === "set" || mode === "toggle" && !exists) next.set(key, factory(coord));
+		else if (mode === "unset" || mode === "toggle" && exists) next.delete(key);
+		return next;
+	});
+};
+//#endregion
+//#region src/components/CellGrid/input/wheel.ts
+var MIN_ZOOM = .25;
+var MAX_ZOOM = 8;
+/**
+* Attach wheel handlers. Vertical wheel scrolls y; shift+wheel scrolls x;
+* cmd/ctrl+wheel zooms x around the cursor.
+*/
+var attachWheelHandlers = (element, { registry, atoms, headers }) => {
+	const onWheel = (event) => {
+		if (event.ctrlKey || event.metaKey) {
+			event.preventDefault();
+			const rect = element.getBoundingClientRect();
+			const x = event.clientX - rect.left;
+			const factor = Math.exp(-event.deltaY / 200);
+			registry.update(atoms.viewport, (current) => {
+				const nextZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, current.zoomX * factor));
+				if (nextZoom === current.zoomX) return current;
+				const w = cellWidth(current);
+				const worldX = (x - headers.left + current.scrollX) / w;
+				const nextW = current.baseCellWidth * nextZoom;
+				const nextScrollX = Math.max(0, worldX * nextW - (x - headers.left));
+				return {
+					...current,
+					zoomX: nextZoom,
+					scrollX: nextScrollX
+				};
+			});
+			return;
+		}
+		const dx = event.shiftKey ? event.deltaY : event.deltaX;
+		const dy = event.shiftKey ? 0 : event.deltaY;
+		const current = registry.get(atoms.viewport);
+		const nextScrollX = Math.max(0, current.scrollX + dx);
+		const nextScrollY = Math.max(0, current.scrollY + dy);
+		if (nextScrollX === current.scrollX && nextScrollY === current.scrollY) return;
+		event.preventDefault();
+		registry.set(atoms.viewport, {
+			...current,
+			scrollX: nextScrollX,
+			scrollY: nextScrollY
+		});
+	};
+	element.addEventListener("wheel", onWheel, { passive: false });
+	return () => element.removeEventListener("wheel", onWheel);
+};
+//#endregion
+//#region src/components/CellGrid/render/overlay-layer.ts
+var drawOverlay = ({ ctx, size, viewport, headers, selection, playhead, style }) => {
+	ctx.clearRect(0, 0, size.width, size.height);
+	ctx.save();
+	ctx.beginPath();
+	ctx.rect(headers.left, headers.top, size.width - headers.left, size.height - headers.top);
+	ctx.clip();
+	if (selection.range) {
+		const { col0, row0, col1, row1 } = selection.range;
+		const minCol = Math.min(col0, col1);
+		const maxCol = Math.max(col0, col1);
+		const minRow = Math.min(row0, row1);
+		const maxRow = Math.max(row0, row1);
+		const tl = worldToScreen(viewport, headers, {
+			col: minCol,
+			row: minRow
+		});
+		const br = worldToScreen(viewport, headers, {
+			col: maxCol + 1,
+			row: maxRow + 1
+		});
+		ctx.fillStyle = style.selectionFill;
+		ctx.fillRect(tl.x, tl.y, br.x - tl.x, br.y - tl.y);
+		ctx.strokeStyle = style.selectionStroke;
+		ctx.setLineDash([4, 3]);
+		ctx.lineWidth = 1;
+		ctx.strokeRect(tl.x + .5, tl.y + .5, br.x - tl.x - 1, br.y - tl.y - 1);
+		ctx.setLineDash([]);
+	}
+	if (playhead !== null) {
+		const w = cellWidth(viewport);
+		const x = headers.left + playhead * w - viewport.scrollX;
+		if (x >= headers.left && x <= size.width) {
+			ctx.strokeStyle = style.playhead;
+			ctx.lineWidth = 2;
+			ctx.beginPath();
+			ctx.moveTo(x, headers.top);
+			ctx.lineTo(x, size.height);
+			ctx.stroke();
+		}
+	}
+	ctx.restore();
+};
+//#endregion
+//#region src/components/CellGrid/render/static-layer.ts
+/**
+* Paint the static layer: background, gridlines, alternating row bands, and cells.
+* Pure with respect to its inputs (writes only to the supplied ctx).
+*/
+var drawCells = ({ ctx, size, viewport, headers, rows, cells, renderCell, style }) => {
+	ctx.clearRect(0, 0, size.width, size.height);
+	if (style.background) {
+		ctx.fillStyle = style.background;
+		ctx.fillRect(0, 0, size.width, size.height);
+	}
+	const range = visibleCellRange(viewport, headers, size);
+	const w = cellWidth(viewport);
+	const h = viewport.cellHeight;
+	if (style.rowBand) {
+		ctx.fillStyle = style.rowBand;
+		for (let row = range.minRow; row <= Math.min(range.maxRow, rows.length - 1); row++) {
+			if (row % 2 === 0) continue;
+			const y = headers.top + row * h - viewport.scrollY;
+			ctx.fillRect(headers.left, y, size.width - headers.left, h);
+		}
+	}
+	ctx.strokeStyle = style.gridLine;
+	ctx.lineWidth = 1;
+	ctx.beginPath();
+	for (let col = range.minCol; col <= range.maxCol + 1; col++) {
+		const x = Math.floor(headers.left + col * w - viewport.scrollX) + .5;
+		if (x < headers.left) continue;
+		ctx.moveTo(x, headers.top);
+		ctx.lineTo(x, size.height);
+	}
+	for (let row = range.minRow; row <= Math.min(range.maxRow + 1, rows.length); row++) {
+		const y = Math.floor(headers.top + row * h - viewport.scrollY) + .5;
+		if (y < headers.top) continue;
+		ctx.moveTo(headers.left, y);
+		ctx.lineTo(size.width, y);
+	}
+	ctx.stroke();
+	ctx.save();
+	ctx.beginPath();
+	ctx.rect(headers.left, headers.top, size.width - headers.left, size.height - headers.top);
+	ctx.clip();
+	for (const cell of visibleCells(cells, range)) {
+		if (cell.row >= rows.length) continue;
+		renderCell({
+			ctx,
+			...worldToScreen(viewport, headers, cell),
+			cell
+		});
+	}
+	ctx.restore();
+};
+//#endregion
+//#region src/components/CellGrid/CellGrid.tsx
+var defaultHeaders = {
+	left: 80,
+	top: 24
+};
+var defaultStaticStyle = {
+	gridLine: "rgba(128,128,128,0.25)",
+	rowBand: "rgba(128,128,128,0.06)"
+};
+var defaultOverlayStyle = {
+	playhead: "rgb(220, 38, 38)",
+	selectionFill: "rgba(59, 130, 246, 0.15)",
+	selectionStroke: "rgb(59, 130, 246)"
+};
+var setupCanvas = (canvas, width, height) => {
+	const dpr = window.devicePixelRatio || 1;
+	canvas.width = Math.max(1, Math.floor(width * dpr));
+	canvas.height = Math.max(1, Math.floor(height * dpr));
+	canvas.style.width = `${width}px`;
+	canvas.style.height = `${height}px`;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) return null;
+	ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+	return ctx;
+};
+/**
+* Canvas-based 2D grid where cells contain pluggable shapes. Suitable for music sequencers,
+* time-series data viz, and similar workloads at ~1k visible cells per viewport.
+*/
+var CellGrid = ({ atoms, rows, renderCell, headers: headersProp, staticStyle: staticStyleProp, overlayStyle: overlayStyleProp, classNames, onCellToggle, onSelectionCommit, onDrawUpdate, onDrawCommit }) => {
+	const registry = useContext(RegistryContext);
+	const headers = useMemo(() => {
+		if (headersProp === false) return {
+			left: 0,
+			top: 0
+		};
+		return {
+			...defaultHeaders,
+			...headersProp ?? {}
+		};
+	}, [headersProp]);
+	const staticStyle = useMemo(() => ({
+		...defaultStaticStyle,
+		...staticStyleProp ?? {}
+	}), [staticStyleProp]);
+	const overlayStyle = useMemo(() => ({
+		...defaultOverlayStyle,
+		...overlayStyleProp ?? {}
+	}), [overlayStyleProp]);
+	const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();
+	const staticCanvasRef = useRef(null);
+	const overlayCanvasRef = useRef(null);
+	const overlayInputRef = useRef(null);
+	const [staticCtx, setStaticCtx] = useState(null);
+	const [overlayCtx, setOverlayCtx] = useState(null);
+	const [viewportState, setViewportState] = useState(() => registry.get(atoms.viewport));
+	useEffect(() => {
+		if (!width || !height) return;
+		if (staticCanvasRef.current) {
+			const ctx = setupCanvas(staticCanvasRef.current, width, height);
+			setStaticCtx(ctx);
+		}
+		if (overlayCanvasRef.current) {
+			const ctx = setupCanvas(overlayCanvasRef.current, width, height);
+			setOverlayCtx(ctx);
+		}
+	}, [width, height]);
+	useEffect(() => registry.subscribe(atoms.viewport, (next) => setViewportState(next)), [registry, atoms.viewport]);
+	useEffect(() => {
+		if (!staticCtx || !width || !height) return;
+		let raf = null;
+		const schedule = () => {
+			if (raf !== null) return;
+			raf = requestAnimationFrame(() => {
+				raf = null;
+				drawCells({
+					ctx: staticCtx,
+					size: {
+						width,
+						height
+					},
+					viewport: registry.get(atoms.viewport),
+					headers,
+					rows,
+					cells: registry.get(atoms.cells),
+					renderCell,
+					style: staticStyle
+				});
+			});
+		};
+		schedule();
+		const unsubCells = registry.subscribe(atoms.cells, schedule);
+		const unsubViewport = registry.subscribe(atoms.viewport, schedule);
+		return () => {
+			if (raf !== null) cancelAnimationFrame(raf);
+			unsubCells();
+			unsubViewport();
+		};
+	}, [
+		staticCtx,
+		width,
+		height,
+		registry,
+		atoms.cells,
+		atoms.viewport,
+		headers,
+		rows,
+		renderCell,
+		staticStyle
+	]);
+	useEffect(() => {
+		if (!overlayCtx || !width || !height) return;
+		let raf = null;
+		let stopped = false;
+		const paint = () => {
+			drawOverlay({
+				ctx: overlayCtx,
+				size: {
+					width,
+					height
+				},
+				viewport: registry.get(atoms.viewport),
+				headers,
+				selection: registry.get(atoms.selection),
+				playhead: registry.get(atoms.playhead),
+				style: overlayStyle
+			});
+		};
+		const isAnimating = () => registry.get(atoms.playhead) !== null;
+		const loop = () => {
+			if (stopped) return;
+			paint();
+			if (isAnimating()) raf = requestAnimationFrame(loop);
+			else raf = null;
+		};
+		const kick = () => {
+			paint();
+			if (raf === null && isAnimating()) raf = requestAnimationFrame(loop);
+		};
+		kick();
+		const unsubSelection = registry.subscribe(atoms.selection, () => paint());
+		const unsubPlayhead = registry.subscribe(atoms.playhead, kick);
+		const unsubViewport = registry.subscribe(atoms.viewport, () => paint());
+		return () => {
+			stopped = true;
+			if (raf !== null) cancelAnimationFrame(raf);
+			unsubSelection();
+			unsubPlayhead();
+			unsubViewport();
+		};
+	}, [
+		overlayCtx,
+		width,
+		height,
+		registry,
+		atoms.selection,
+		atoms.playhead,
+		atoms.viewport,
+		headers,
+		overlayStyle
+	]);
+	const callbacksRef = useRef({
+		onCellToggle,
+		onSelectionCommit,
+		onDrawUpdate,
+		onDrawCommit
+	});
+	callbacksRef.current = {
+		onCellToggle,
+		onSelectionCommit,
+		onDrawUpdate,
+		onDrawCommit
+	};
+	useEffect(() => {
+		const element = overlayInputRef.current;
+		if (!element) return;
+		const detachPointer = attachPointerHandlers(element, {
+			registry,
+			atoms,
+			headers,
+			handlers: {
+				onCellToggle: (coord, mode) => callbacksRef.current.onCellToggle?.(coord, mode),
+				onSelectionCommit: (range) => callbacksRef.current.onSelectionCommit?.(range),
+				onDrawUpdate: (start, end) => callbacksRef.current.onDrawUpdate?.(start, end),
+				onDrawCommit: (start, end) => callbacksRef.current.onDrawCommit?.(start, end)
+			}
+		});
+		const detachWheel = attachWheelHandlers(element, {
+			registry,
+			atoms,
+			headers
+		});
+		return () => {
+			detachPointer();
+			detachWheel();
+		};
+	}, [
+		registry,
+		atoms,
+		headers
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: mx("relative w-full h-full overflow-hidden dx-base-surface", classNames),
+		children: [
+			/* @__PURE__ */ jsx("canvas", {
+				ref: staticCanvasRef,
+				className: "absolute inset-0 pointer-events-none",
+				style: {
+					top: -1,
+					left: -1
+				}
+			}),
+			/* @__PURE__ */ jsx("canvas", {
+				ref: overlayCanvasRef,
+				className: "absolute inset-0 pointer-events-none",
+				style: {
+					top: -1,
+					left: -1
+				}
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: overlayInputRef,
+				className: "absolute inset-0 touch-none",
+				style: {
+					paddingLeft: headers.left,
+					paddingTop: headers.top
+				}
+			}),
+			headers.top > 0 && /* @__PURE__ */ jsx(Ruler, {
+				viewport: viewportState,
+				headers,
+				width
+			}),
+			headers.left > 0 && /* @__PURE__ */ jsx(TrackHeader, {
+				viewport: viewportState,
+				headers,
+				rows,
+				height
+			}),
+			headers.top > 0 && headers.left > 0 && /* @__PURE__ */ jsx("div", {
+				className: "absolute top-0 left-0 border-b border-r border-neutral-200 dark:border-neutral-700 bg-base-surface",
+				style: {
+					width: headers.left,
+					height: headers.top
+				}
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/CellGrid/state/atoms.ts
+var defaultViewport = (options = {}) => ({
+	scrollX: 0,
+	scrollY: 0,
+	baseCellWidth: options.cellWidth ?? 24,
+	cellHeight: options.cellHeight ?? 24,
+	zoomX: 1
+});
+/**
+* Create a fresh set of atoms backing a CellGrid instance. Consumers may pass any of these as props
+* or substitute their own (e.g., a cells atom backed by ECHO).
+*
+* Atoms are marked keepAlive so they preserve state across transient unsubscribe windows (e.g. React
+* Strict Mode mount-unmount-remount). Consumers are responsible for the atoms' lifetime.
+*/
+var createCellGridAtoms = (options = {}) => ({
+	cells: Atom.keepAlive(Atom.make(/* @__PURE__ */ new Map())),
+	viewport: Atom.keepAlive(Atom.make(defaultViewport(options))),
+	selection: Atom.keepAlive(Atom.make({ range: null })),
+	playhead: Atom.keepAlive(Atom.make(null)),
+	tool: Atom.keepAlive(Atom.make("toggle"))
+});
+//#endregion
+//#region src/components/FPS.tsx
+var SEC = 1e3;
+var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
+	const [{ fps, max, len }, dispatch] = useReducer((state) => {
+		const currentTime = Date.now();
+		if (currentTime > state.prevTime + SEC) {
+			const nextFPS = [...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0), Math.max(1, Math.round(state.frames * SEC / (currentTime - state.prevTime)))];
+			return {
+				max: Math.max(state.max, ...nextFPS),
+				len: Math.min(state.len + nextFPS.length, width),
+				fps: [...state.fps, ...nextFPS].slice(-width),
+				frames: 1,
+				prevTime: currentTime
+			};
+		} else return {
+			...state,
+			frames: state.frames + 1
+		};
+	}, {
+		max: 0,
+		len: 0,
+		fps: [],
+		frames: 0,
+		prevTime: Date.now()
+	});
+	const requestRef = useRef(null);
+	const tick = () => {
+		dispatch();
+		requestRef.current = requestAnimationFrame(tick);
+	};
+	useEffect(() => {
+		requestRef.current = requestAnimationFrame(tick);
+		return () => {
+			if (requestRef.current) cancelAnimationFrame(requestRef.current);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		style: { width: width + 6 },
+		className: mx("relative flex flex-col p-0.5", "bg-base-surface text-xs text-subdued font-thin pointer-events-none border border-separator", classNames),
+		children: [/* @__PURE__ */ jsxs("div", { children: [fps[len - 1], " FPS"] }), /* @__PURE__ */ jsx("div", {
+			className: "w-full relative",
+			style: { height },
+			children: fps.map((frame, i) => /* @__PURE__ */ jsx("div", {
+				className: bar,
+				style: {
+					position: "absolute",
+					bottom: 0,
+					right: `${len - 1 - i}px`,
+					height: `${height * frame / max}px`,
+					width: 1
+				}
+			}, `fps-${i}`))
+		})]
+	});
+};
+//#endregion
+//#region src/components/Grid/Grid.tsx
+var gridRatios = [
+	1 / 4,
+	1,
+	4,
+	16
+];
+var defaultGridSize = 16;
+var defaultOffset = {
+	x: 0,
+	y: 0
+};
+var createId = (parent, grid) => `dx-canvas-grid-${parent}-${grid}`;
+var Grid = (props) => {
+	const { scale, offset } = useCanvasContext();
+	return /* @__PURE__ */ jsx(GridComponent, {
+		...props,
+		scale,
+		offset
+	});
+};
+var GridComponent = forwardRef(({ size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames }, forwardedRef) => {
+	const svgRef = useForwardedRef(forwardedRef);
+	const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
+	const instanceId = useId();
+	const grids = useMemo(() => gridRatios.map((ratio) => ({
+		id: ratio,
+		size: ratio * gridSize * scale
+	})).filter(({ size }) => size >= gridSize && size <= 128), [gridSize, scale]);
+	return /* @__PURE__ */ jsxs("svg", {
+		...testId("dx-canvas-grid"),
+		ref: svgRef,
+		className: mx("dx-fullscreen w-full h-full pointer-events-none touch-none select-none", "stroke-neutral-500", classNames),
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: grids.map(({ id, size }) => /* @__PURE__ */ jsx(GridPattern, {
+				id: createId(instanceId, id),
+				offset,
+				size
+			}, id)) }),
+			showAxes && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("line", {
+				x1: 0,
+				y1: offset.y,
+				x2: width,
+				y2: offset.y,
+				className: "stroke-neutral-500 opacity-40"
+			}), /* @__PURE__ */ jsx("line", {
+				x1: offset.x,
+				y1: 0,
+				x2: offset.x,
+				y2: height,
+				className: "stroke-neutral-500 opacity-40"
+			})] }),
+			/* @__PURE__ */ jsx("g", { children: grids.map(({ id }, i) => /* @__PURE__ */ jsx("rect", {
+				opacity: .1 + i * .05,
+				fill: `url(#${createId(instanceId, id)})`,
+				width: "100%",
+				height: "100%"
+			}, id)) })
+		]
+	});
+});
+//#endregion
+//#region src/types.ts
+var Point = Schema.Struct({
+	x: Schema.Number,
+	y: Schema.Number
+});
+var Dimension = Schema.Struct({
+	width: Schema.Number,
+	height: Schema.Number
+});
+var Rect = Schema.extend(Point, Dimension);
+//#endregion
+export { Arrow, Canvas, CanvasContext, CellGrid, DATA_TEST_ID, Dimension, FPS, Grid, GridComponent, GridPattern, Marker, Markers, Point, ProjectionMapper, Rect, Ruler, TrackHeader, attachPointerHandlers, attachWheelHandlers, cellKey, cellWidth, createCellGridAtoms, createPath, defaultOrigin, defaultViewport, drawCells, drawOverlay, getRelativePoint, getZoomTransform, hitTestCell, inspectElement, screenToWorld, testId, toggleCell, useCanvasContext, useDrag, useWheel, visibleCellRange, visibleCells, worldToScreen, zoomInPlace, zoomTo };
+
+//# sourceMappingURL=index.mjs.map