@snapgridjs/react 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -2,24 +2,222 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _dnd_kit_react = require("@dnd-kit/react");
 let _snapgridjs_core = require("@snapgridjs/core");
 let react = require("react");
+let _dnd_kit_abstract = require("@dnd-kit/abstract");
 let _dnd_kit_dom = require("@dnd-kit/dom");
+let _dnd_kit_dom_utilities = require("@dnd-kit/dom/utilities");
+let _dnd_kit_react_sortable = require("@dnd-kit/react/sortable");
 let react_jsx_runtime = require("react/jsx-runtime");
-let react_dom = require("react-dom");
-//#region src/context.ts
-const GridContext = (0, react.createContext)(null);
-/** Read the grid runtime; throws if used outside a `SnapGridProvider`. */
-function useGridRuntime() {
-	const runtime = (0, react.useContext)(GridContext);
-	if (!runtime) throw new Error("snapgrid: hooks and components must be rendered inside a <SnapGridProvider> (or <GridLayout>).");
-	return runtime;
+//#region src/controller/GridController.ts
+function sameItem(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	return a.i === b.i && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
 }
+/**
+* Live per-grid drag/resize state as a plain observable: the provider writes
+* (`setSession`/`setKeyboard`/`setCommitted`), hooks subscribe to just their own
+* slice via `useSyncExternalStore`. Value-cached snapshots mean a drag re-renders
+* only the tiles whose slice changed, not the whole subtree (the old
+* context-value model re-rendered every tile every frame).
+*/
+var GridController = class {
+	id;
+	#committed;
+	#session = null;
+	#keyboard = false;
+	#listeners = /* @__PURE__ */ new Set();
+	config = null;
+	#itemCache = /* @__PURE__ */ new Map();
+	#resizeCache = /* @__PURE__ */ new Map();
+	#placeholderCache = null;
+	#renderedMap = null;
+	#renderedMapSource = null;
+	#indexById = /* @__PURE__ */ new Map();
+	#nextIndex = 0;
+	/** The dnd-kit manager this grid is registered with (set by useInstance). */
+	manager;
+	constructor(id, committed = [], manager) {
+		this.id = id;
+		this.#committed = committed;
+		this.manager = manager;
+	}
+	/** Replace the per-grid config (called by the container host during render). */
+	setConfig(config) {
+		this.config = config;
+	}
+	/**
+	* Re-point this grid's id. The container host syncs it (during render, before
+	* the droppable/group read it) when the controlled `id` prop changes, so the
+	* returned `group`, the droppable id, and the registry key never drift apart.
+	*/
+	setId(id) {
+		this.id = id;
+	}
+	register = () => {};
+	subscribe = (listener) => {
+		this.#listeners.add(listener);
+		return () => {
+			this.#listeners.delete(listener);
+		};
+	};
+	#emit() {
+		for (const listener of this.#listeners) listener();
+	}
+	/** The layout currently shown: the drag preview while dragging, else committed. */
+	#rendered() {
+		return this.#session ? this.#session.preview : this.#committed;
+	}
+	#renderedById() {
+		const rendered = this.#rendered();
+		if (this.#renderedMapSource !== rendered) {
+			this.#renderedMap = new Map(rendered.map((it) => [it.i, it]));
+			this.#renderedMapSource = rendered;
+		}
+		return this.#renderedMap;
+	}
+	/**
+	* Sync the committed layout from the controlled `layout` prop. Called during
+	* the provider's render, so it must NOT notify — emitting here would update
+	* subscribed GridItems mid-render (a React "setState while rendering" error).
+	* No notify is needed: a `layout` prop change already re-renders the whole
+	* provider subtree, so every GridItem re-reads its snapshot on that pass.
+	*/
+	setCommitted(layout) {
+		if (this.#committed === layout) return;
+		this.#committed = layout;
+		const present = new Set(layout.map((it) => it.i));
+		for (const id of this.#indexById.keys()) if (!present.has(id)) this.#indexById.delete(id);
+		for (const id of this.#itemCache.keys()) if (!present.has(id)) this.#itemCache.delete(id);
+		for (const id of this.#resizeCache.keys()) if (!present.has(id)) this.#resizeCache.delete(id);
+	}
+	setSession(next) {
+		this.#session = next;
+		this.#emit();
+	}
+	getSession() {
+		return this.#session;
+	}
+	/** Record whether the active drag is keyboard-driven (drives `hidden`). */
+	setKeyboard(value) {
+		if (this.#keyboard === value) return;
+		this.#keyboard = value;
+		this.#emit();
+	}
+	itemSnapshot = (id) => {
+		const item = this.#renderedById().get(id);
+		const isDragging = this.#session?.activeId === id;
+		const hidden = isDragging && this.#session?.kind === "move" && !this.#keyboard;
+		const prev = this.#itemCache.get(id);
+		if (prev && prev.isDragging === isDragging && prev.hidden === hidden && sameItem(prev.item, item)) return prev;
+		const snap = {
+			item,
+			isDragging,
+			hidden
+		};
+		this.#itemCache.set(id, snap);
+		return snap;
+	};
+	placeholderSnapshot = () => {
+		const next = this.#session?.placeholder ?? null;
+		if (sameItem(this.#placeholderCache ?? void 0, next ?? void 0)) return this.#placeholderCache;
+		this.#placeholderCache = next;
+		return next;
+	};
+	resizeSnapshot = (itemId) => {
+		const isResizing = this.#session?.kind === "resize" && this.#session.activeId === itemId;
+		const prev = this.#resizeCache.get(itemId);
+		if (prev && prev.isResizing === isResizing) return prev;
+		const snap = { isResizing };
+		this.#resizeCache.set(itemId, snap);
+		return snap;
+	};
+	renderedSnapshot = () => this.#rendered();
+	/** A stable index for `id` (see {@link GridController.#indexById}). */
+	itemIndex(id) {
+		let i = this.#indexById.get(id);
+		if (i === void 0) {
+			i = this.#nextIndex++;
+			this.#indexById.set(id, i);
+		}
+		return i;
+	}
+};
 //#endregion
-//#region src/dragFlow.ts
+//#region src/controller/registry.ts
 /**
-* Pure decision helpers for the drag interaction, extracted from
-* {@link SnapGridProvider} so the tricky bits — grab-offset cell mapping and the
-* cross-grid drop lifecycle — are unit-testable without a DOM or dnd-kit.
+* Resolves a grid's {@link GridController} by its id, scoped to the dnd-kit
+* manager the grid is registered with. A container registers its controller
+* here (during render, so child items resolve it on their first render); items
+* look it up by their `group` (= the grid id). Replaces the old geometry
+* `GridRegistry` — which grid the pointer is over now comes from the collision
+* target, so the registry's only job is id → controller resolution.
+*
+* Keyed by manager so two apps (or two providers) never collide, and grids in
+* one provider share a map (the cross-grid seam).
 */
+const byManager = /* @__PURE__ */ new WeakMap();
+const noManager = /* @__PURE__ */ new Map();
+function mapFor(manager) {
+	if (!manager) return noManager;
+	let map = byManager.get(manager);
+	if (!map) {
+		map = /* @__PURE__ */ new Map();
+		byManager.set(manager, map);
+	}
+	return map;
+}
+/** Register a controller under `id` for `manager`. Returns an unregister fn. */
+function registerController(manager, id, controller) {
+	const map = mapFor(manager);
+	map.set(id, controller);
+	return () => {
+		if (map.get(id) === controller) map.delete(id);
+	};
+}
+/** The controller registered under `id` for `manager`, or undefined. */
+function getController(manager, id) {
+	return mapFor(manager).get(id);
+}
+const grabOffsets = /* @__PURE__ */ new WeakMap();
+const noManagerGrab = { current: null };
+function setGrabOffset(manager, offset) {
+	if (!manager) {
+		noManagerGrab.current = offset;
+		return;
+	}
+	if (offset) grabOffsets.set(manager, offset);
+	else grabOffsets.delete(manager);
+}
+function getGrabOffset(manager) {
+	return (manager ? grabOffsets.get(manager) : noManagerGrab.current) ?? {
+		x: 0,
+		y: 0
+	};
+}
+//#endregion
+//#region src/dnd/dragFlow.ts
+/**
+* Pure decision helpers for the drag interaction so the tricky bits — grab-offset
+* cell mapping, the cross-grid drop lifecycle, and external-drop acceptance — are
+* unit-testable without a DOM or dnd-kit.
+*/
+/** Read snapgrid's payload off a dnd-kit drag source. */
+function dragData(event) {
+	return (event.operation.source?.data)?.snapGrid;
+}
+/** Size/id spec for an external (non-grid) draggable the grid may accept, or null. */
+function externalDropSpec(source, dropConfig) {
+	if (!dropConfig?.enabled || !source) return null;
+	const data = source.data;
+	if (data?.snapGrid) return null;
+	if (dropConfig.accept && !dropConfig.accept(source)) return null;
+	const spec = data?.snapGridDrop;
+	return {
+		i: spec?.i,
+		w: spec?.w ?? dropConfig.defaultItem?.w ?? 1,
+		h: spec?.h ?? dropConfig.defaultItem?.h ?? 1
+	};
+}
 /**
 * Map a client-space pointer to a grid cell, accounting for where *within* the
 * dragged tile the pointer grabbed it. Subtracting the grab offset means the
@@ -30,6 +228,29 @@ function useGridRuntime() {
 function receiveCell(pointer, gridRect, grabOffset, w, h, pp) {
 	return (0, _snapgridjs_core.calcXY)(pp, pointer.y - grabOffset.y - gridRect.top, pointer.x - grabOffset.x - gridRect.left, w, h);
 }
+/**
+* Map a keyboard event key to a one-cell grid step while a keyboard drag is
+* active, or null for keys snapgrid doesn't own — Enter/Space (drop) and Escape
+* (cancel) fall through to dnd-kit's KeyboardSensor.
+*/
+function arrowStep(key) {
+	switch (key) {
+		case "ArrowLeft": return [-1, 0];
+		case "ArrowRight": return [1, 0];
+		case "ArrowUp": return [0, -1];
+		case "ArrowDown": return [0, 1];
+		default: return null;
+	}
+}
+/**
+* Which grid a drop commits to, as fed to {@link classifyDrop} as `dest`. A
+* keyboard drag has no pointer, so it can only ever land in its own grid; a
+* pointer drag lands in whichever grid the collision observer resolved (or none).
+*/
+function dropDestination(opts) {
+	if (opts.keyboard) return opts.myId;
+	return opts.targetId != null ? String(opts.targetId) : null;
+}
 /** Pure classification of a drag end. See {@link DropAction}. */
 function classifyDrop(s) {
 	if (s.canceled) {
@@ -47,37 +268,27 @@ function classifyDrop(s) {
 	return "noop";
 }
 //#endregion
-//#region src/grouping.ts
-function createGridRegistry() {
-	const grids = /* @__PURE__ */ new Map();
-	let grabOffset = null;
-	return {
-		register(id, getRect) {
-			grids.set(id, getRect);
-			return () => {
-				if (grids.get(id) === getRect) grids.delete(id);
-			};
-		},
-		gridAt(point) {
-			for (const [id, getRect] of grids) {
-				const r = getRect();
-				if (r && point.x >= r.left && point.x <= r.right && point.y >= r.top && point.y <= r.bottom) return id;
-			}
-			return null;
-		},
-		setGrabOffset(offset) {
-			grabOffset = offset;
-		},
-		getGrabOffset() {
-			return grabOffset ?? {
-				x: 0,
-				y: 0
-			};
-		}
-	};
-}
-/** Non-null when grids are wrapped in a `<SnapGridGroup>` (shared cross-grid registry). */
-const SnapGridGroupContext = (0, react.createContext)(null);
+//#region src/dnd/snapToGrid.ts
+/**
+* Quantizes the dragged item's transform to whole grid cells, so the floating
+* <DragOverlay> clone jumps cell-to-cell in lockstep with the (always-snapped)
+* placeholder instead of tracking the pointer smoothly. Applied on the item
+* draggable; a no-op unless `dragConfig.snapToGrid` is set.
+*/
+var SnapToGrid = class extends _dnd_kit_abstract.Modifier {
+	apply({ transform }) {
+		const opts = this.options;
+		if (!opts?.isEnabled()) return transform;
+		const pp = opts.getPositionParams();
+		const colStep = (0, _snapgridjs_core.calcGridColWidth)(pp) + pp.margin[0];
+		const rowStep = pp.rowHeight + pp.margin[1];
+		if (colStep <= 0 || rowStep <= 0) return transform;
+		return {
+			x: Math.round(transform.x / colStep) * colStep,
+			y: Math.round(transform.y / rowStep) * rowStep
+		};
+	}
+};
 //#endregion
 //#region src/hooks/dndShared.ts
 /** Marker attribute placed on resize-handle elements. */
@@ -109,52 +320,33 @@ function buildItemSensors(threshold, getDragConfig) {
 	}), _dnd_kit_dom.KeyboardSensor];
 }
 //#endregion
-//#region src/SnapGridProvider.tsx
+//#region src/hooks/useGridController.ts
 const DEFAULT_HANDLES = ["se"];
-/** Read snapgrid's payload off a dnd-kit drag source. */
-function dragData(event) {
-	return (event.operation.source?.data)?.snapGrid;
-}
-/** Size/id spec for an external (non-grid) draggable the grid may accept, or null. */
-function externalDropSpec(source, dropConfig) {
-	if (!dropConfig?.enabled || !source) return null;
-	const data = source.data;
-	if (data?.snapGrid) return null;
-	if (dropConfig.accept && !dropConfig.accept(source)) return null;
-	const spec = data?.snapGridDrop;
-	return {
-		i: spec?.i,
-		w: spec?.w ?? dropConfig.defaultItem?.w ?? 1,
-		h: spec?.h ?? dropConfig.defaultItem?.h ?? 1
-	};
+function itemGateOpen(flag, isStatic) {
+	return isStatic ? flag === true : flag ?? true;
 }
 /**
-* Headless provider for a grid. Standalone grids get their own isolated dnd-kit
-* provider; grids inside a {@link SnapGridGroup} share that group's provider and
-* registry so tiles can be dragged between them. Owns this grid's drag/resize
-* session; the consumer owns all markup/styling.
+* The grid's brain: owns the {@link GridController}, runs the dnd-kit drag/resize
+* monitor for this grid, and writes per-grid config to the controller each render.
+* Created by {@link useGridContainer}; items resolve the same controller by their
+* `group` (= this grid's id) from the per-manager registry. Consumes the ambient
+* `DragDropProvider` — it does not mint one.
 */
-function SnapGridProvider(props) {
-	const groupRegistry = (0, react.useContext)(SnapGridGroupContext);
-	const runtime = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnapGridRuntime, {
-		groupRegistry,
-		...props
-	});
-	return groupRegistry ? runtime : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_react.DragDropProvider, { children: runtime });
-}
-function SnapGridRuntime(props) {
+function useGridController(opts) {
 	const autoId = (0, react.useId)();
-	const containerId = props.id ?? autoId;
+	const containerId = opts.id ?? autoId;
 	const gridConfig = (0, react.useMemo)(() => ({
 		..._snapgridjs_core.defaultGridConfig,
-		...props.gridConfig
-	}), [props.gridConfig]);
-	const positionParams = (0, react.useMemo)(() => (0, _snapgridjs_core.toPositionParams)(gridConfig, props.width), [gridConfig, props.width]);
-	const compactor = props.compactor ?? _snapgridjs_core.verticalCompactor;
-	const [session, setSession] = (0, react.useState)(null);
-	const [overlay, setOverlay] = (0, react.useState)(null);
-	const propsRef = (0, react.useRef)(props);
-	propsRef.current = props;
+		...opts.gridConfig
+	}), [opts.gridConfig]);
+	const positionParams = (0, react.useMemo)(() => (0, _snapgridjs_core.toPositionParams)(gridConfig, opts.width), [gridConfig, opts.width]);
+	const compactor = opts.compactor ?? _snapgridjs_core.verticalCompactor;
+	const manager = (0, _dnd_kit_react.useDragDropManager)();
+	const controller = (0, _dnd_kit_react.useInstance)((m) => new GridController(containerId, opts.layout, m ?? void 0));
+	controller.setCommitted(opts.layout);
+	if (controller.id !== containerId) controller.setId(containerId);
+	const optsRef = (0, react.useRef)(opts);
+	optsRef.current = opts;
 	const ppRef = (0, react.useRef)(positionParams);
 	ppRef.current = positionParams;
 	const gridRef = (0, react.useRef)(gridConfig);
@@ -163,39 +355,44 @@ function SnapGridRuntime(props) {
 	compactorRef.current = compactor;
 	const containerIdRef = (0, react.useRef)(containerId);
 	containerIdRef.current = containerId;
+	const managerRef = (0, react.useRef)(manager);
+	managerRef.current = manager;
 	const sessionRef = (0, react.useRef)(null);
 	const containerElRef = (0, react.useRef)(null);
 	const keyboardRef = (0, react.useRef)(false);
 	const dropSpecRef = (0, react.useRef)(null);
 	const dropCounterRef = (0, react.useRef)(0);
-	const localRegistryRef = (0, react.useRef)(null);
-	if (!localRegistryRef.current) localRegistryRef.current = createGridRegistry();
-	const registry = props.groupRegistry ?? localRegistryRef.current;
-	const registryRef = (0, react.useRef)(registry);
-	registryRef.current = registry;
-	(0, react.useEffect)(() => registry.register(containerId, () => containerElRef.current?.getBoundingClientRect() ?? null), [registry, containerId]);
-	const committedById = (0, react.useMemo)(() => new Map(props.layout.map((it) => [it.i, it])), [props.layout]);
+	registerController(manager, containerId, controller);
+	(0, react.useEffect)(() => registerController(manager, containerId, controller), [
+		manager,
+		containerId,
+		controller
+	]);
+	const committedById = (0, react.useMemo)(() => new Map(opts.layout.map((it) => [it.i, it])), [opts.layout]);
 	const committedByIdRef = (0, react.useRef)(committedById);
 	committedByIdRef.current = committedById;
 	const setSessionBoth = (0, react.useCallback)((next) => {
 		sessionRef.current = next;
-		setSession(next);
-	}, []);
+		controller.setSession(next);
+	}, [controller]);
+	const setKeyboard = (0, react.useCallback)((value) => {
+		keyboardRef.current = value;
+		controller.setKeyboard(value);
+	}, [controller]);
 	const setContainerElement = (0, react.useCallback)((element) => {
 		containerElRef.current = element;
 	}, []);
 	/**
-	* Is THIS grid the one under `p` (client coords)? Resolved through the
-	* registry (not a self-only rect test) so the move-phase preview and the
-	* drop-phase commit — which both go through `gridAt` — always agree on which
-	* grid wins when grids overlap (`gridAt` returns a single first match).
+	* Is THIS grid the drop target dnd-kit's collision observer resolved? Both the
+	* move-phase preview and the drop-phase commit read `operation.target`, so they
+	* always agree on which grid wins (one oracle), including when grids overlap.
 	*/
-	const overMe = (0, react.useCallback)((p) => registryRef.current.gridAt(p) === containerIdRef.current, []);
+	const overMe = (0, react.useCallback)((target) => target?.id === containerIdRef.current, []);
 	/** Map a client-space pointer to a grid cell within THIS grid (see {@link receiveCell}). */
 	const cellFromPointer = (0, react.useCallback)((p, item) => {
 		const el = containerElRef.current;
 		if (!el) return null;
-		return receiveCell(p, el.getBoundingClientRect(), registryRef.current.getGrabOffset(), item.w, item.h, ppRef.current);
+		return receiveCell(p, el.getBoundingClientRect(), getGrabOffset(managerRef.current), item.w, item.h, ppRef.current);
 	}, []);
 	const ctx = (0, react.useCallback)(() => ({
 		positionParams: ppRef.current,
@@ -203,10 +400,10 @@ function SnapGridRuntime(props) {
 		cols: gridRef.current.cols
 	}), []);
 	const handleDragStart = (0, react.useCallback)((event) => {
-		keyboardRef.current = false;
+		setKeyboard(false);
 		const data = dragData(event);
 		if (!data) {
-			const spec = externalDropSpec(event.operation.source, propsRef.current.dropConfig);
+			const spec = externalDropSpec(event.operation.source, optsRef.current.dropConfig);
 			if (spec) {
 				dropCounterRef.current += 1;
 				dropSpecRef.current = {
@@ -218,7 +415,7 @@ function SnapGridRuntime(props) {
 			return;
 		}
 		dropSpecRef.current = null;
-		const layout = propsRef.current.layout;
+		const layout = optsRef.current.layout;
 		const item = layout.find((it) => it.i === data.itemId);
 		const p = event.operation.position.current;
 		const pointer = {
@@ -232,11 +429,11 @@ function SnapGridRuntime(props) {
 				rect: (0, _snapgridjs_core.calcGridItemPosition)(ppRef.current, item.x, item.y, item.w, item.h),
 				pointer
 			}, data.handle));
-			propsRef.current.onResizeStart?.(layout, item, item, item, event.operation.activatorEvent, null);
+			optsRef.current.onResizeStart?.(layout, item, item, item, event.operation.activatorEvent, null);
 			return;
 		}
 		if (item) {
-			keyboardRef.current = event.operation.activatorEvent instanceof KeyboardEvent;
+			setKeyboard(event.operation.activatorEvent instanceof KeyboardEvent);
 			const rect = (0, _snapgridjs_core.calcGridItemPosition)(ppRef.current, item.x, item.y, item.w, item.h);
 			setSessionBoth((0, _snapgridjs_core.beginDrag)(layout, {
 				item,
@@ -245,22 +442,13 @@ function SnapGridRuntime(props) {
 				pointer
 			}));
 			const cr = (event.operation.source?.element)?.getBoundingClientRect();
-			if (cr) {
-				registryRef.current.setGrabOffset({
-					x: pointer.x - cr.left,
-					y: pointer.y - cr.top
-				});
-				setOverlay({
-					item,
-					left: cr.left,
-					top: cr.top,
-					width: cr.width,
-					height: cr.height
-				});
-			}
-			propsRef.current.onDragStart?.(layout, item, item, item, event.operation.activatorEvent, null);
+			if (cr) setGrabOffset(managerRef.current, {
+				x: pointer.x - cr.left,
+				y: pointer.y - cr.top
+			});
+			optsRef.current.onDragStart?.(layout, item, item, item, event.operation.activatorEvent, null);
 		}
-	}, [setSessionBoth]);
+	}, [setSessionBoth, setKeyboard]);
 	const handleDragMove = (0, react.useCallback)((event) => {
 		if (keyboardRef.current) return;
 		const p = event.operation.position.current;
@@ -272,13 +460,14 @@ function SnapGridRuntime(props) {
 		if (current?.kind === "resize") {
 			const next = (0, _snapgridjs_core.dragResize)(current, pointer, ctx());
 			setSessionBoth(next);
-			propsRef.current.onResize?.(next.preview, next.anchor.item, next.placeholder, next.placeholder, event.operation.activatorEvent, null);
+			optsRef.current.onResize?.(next.preview, next.anchor.item, next.placeholder, next.placeholder, event.operation.activatorEvent, null);
 			return;
 		}
+		const target = event.operation.target;
 		const data = dragData(event);
 		if (!data) {
 			const spec = dropSpecRef.current;
-			if (spec && overMe(pointer)) {
+			if (spec && overMe(target)) {
 				const foreign = {
 					i: spec.i,
 					x: 0,
@@ -286,7 +475,7 @@ function SnapGridRuntime(props) {
 					w: spec.w,
 					h: spec.h
 				};
-				const committed = propsRef.current.layout;
+				const committed = optsRef.current.layout;
 				const cell = cellFromPointer(pointer, foreign) ?? {
 					x: 0,
 					y: 0
@@ -296,7 +485,7 @@ function SnapGridRuntime(props) {
 			return;
 		}
 		if (data.kind !== "move") return;
-		const here = overMe(pointer);
+		const here = overMe(target);
 		if (committedByIdRef.current.has(data.itemId)) {
 			const source = current?.kind === "move" ? current : null;
 			if (!source) return;
@@ -308,28 +497,12 @@ function SnapGridRuntime(props) {
 				placeholder: null
 			};
 			setSessionBoth(next);
-			const grab = registryRef.current.getGrabOffset();
-			let oLeft = pointer.x - grab.x;
-			let oTop = pointer.y - grab.y;
-			if (propsRef.current.dragConfig?.snapToGrid && here && next.placeholder) {
-				const rect = containerElRef.current?.getBoundingClientRect();
-				if (rect) {
-					const cell = (0, _snapgridjs_core.calcGridItemPosition)(ppRef.current, next.placeholder.x, next.placeholder.y, next.placeholder.w, next.placeholder.h);
-					oLeft = rect.left + cell.left;
-					oTop = rect.top + cell.top;
-				}
-			}
-			setOverlay((o) => o ? {
-				...o,
-				left: oLeft,
-				top: oTop
-			} : o);
-			propsRef.current.onDrag?.(next.preview, next.anchor.item, next.placeholder, next.placeholder, event.operation.activatorEvent, null);
+			optsRef.current.onDrag?.(next.preview, next.anchor.item, next.placeholder, next.placeholder, event.operation.activatorEvent, null);
 			return;
 		}
 		if (here) {
 			const foreign = data.item;
-			const committed = propsRef.current.layout;
+			const committed = optsRef.current.layout;
 			const cell = cellFromPointer(pointer, foreign) ?? {
 				x: 0,
 				y: 0
@@ -345,17 +518,16 @@ function SnapGridRuntime(props) {
 	const handleDragEnd = (0, react.useCallback)((event) => {
 		const current = sessionRef.current;
 		const data = dragData(event);
-		const p = event.operation.position.current;
 		const myId = containerIdRef.current;
-		const dest = keyboardRef.current ? myId : registryRef.current.gridAt({
-			x: p.x,
-			y: p.y
+		const dest = dropDestination({
+			keyboard: keyboardRef.current,
+			targetId: event.operation.target?.id,
+			myId
 		});
 		const ownsItem = data ? committedByIdRef.current.has(data.itemId) : false;
-		setOverlay(null);
-		registryRef.current.setGrabOffset(null);
+		setGrabOffset(managerRef.current, null);
 		const native = event.nativeEvent ?? null;
-		const p2 = propsRef.current;
+		const o = optsRef.current;
 		const action = classifyDrop({
 			kind: current?.kind ?? null,
 			canceled: event.canceled,
@@ -366,74 +538,59 @@ function SnapGridRuntime(props) {
 		});
 		switch (action) {
 			case "cancel-resize":
-				p2.onResizeStop?.(p2.layout, current?.anchor.item ?? null, null, null, native, null);
+				o.onResizeStop?.(o.layout, current?.anchor.item ?? null, null, null, native, null);
 				break;
 			case "cancel-move":
-				p2.onDragStop?.(p2.layout, current?.anchor.item ?? null, null, null, native, null);
+				o.onDragStop?.(o.layout, current?.anchor.item ?? null, null, null, native, null);
 				break;
 			case "commit-resize":
 				if (current) {
-					p2.onLayoutChange?.((0, _snapgridjs_core.commitLayout)(current));
-					p2.onResizeStop?.(current.preview, current.anchor.item, current.placeholder, current.placeholder, native, null);
+					o.onLayoutChange?.((0, _snapgridjs_core.commitLayout)(current));
+					o.onResizeStop?.(current.preview, current.anchor.item, current.placeholder, current.placeholder, native, null);
 				}
 				break;
 			case "commit-in-grid":
 			case "remove-source":
 			case "revert":
-				if (action === "commit-in-grid" && current) p2.onLayoutChange?.((0, _snapgridjs_core.commitLayout)(current));
+				if (action === "commit-in-grid" && current) o.onLayoutChange?.((0, _snapgridjs_core.commitLayout)(current));
 				else if (action === "remove-source" && data) {
 					const { compactor: c, cols } = ctx();
-					p2.onLayoutChange?.((0, _snapgridjs_core.removeItemWithCompactor)(p2.layout, data.itemId, {
+					o.onLayoutChange?.((0, _snapgridjs_core.removeItemWithCompactor)(o.layout, data.itemId, {
 						compactor: c,
 						cols
 					}));
 				}
-				p2.onDragStop?.(current?.preview ?? p2.layout, current?.anchor.item ?? null, current?.placeholder ?? null, current?.placeholder ?? null, native, null);
+				o.onDragStop?.(current?.preview ?? o.layout, current?.anchor.item ?? null, current?.placeholder ?? null, current?.placeholder ?? null, native, null);
 				break;
 			case "commit-dest":
-				if (current) p2.onLayoutChange?.((0, _snapgridjs_core.commitLayout)(current));
+				if (current) o.onLayoutChange?.((0, _snapgridjs_core.commitLayout)(current));
 				break;
 			case "external-drop":
 				if (current) {
 					const committed = (0, _snapgridjs_core.commitLayout)(current);
 					const dropped = committed.find((it) => it.i === current.activeId);
-					if (dropped) p2.onDrop?.(committed, dropped, native);
+					if (dropped) o.onDrop?.(committed, dropped, native);
 				}
 				break;
 		}
 		dropSpecRef.current = null;
-		keyboardRef.current = false;
+		setKeyboard(false);
 		setSessionBoth(null);
-	}, [setSessionBoth, ctx]);
+	}, [
+		setSessionBoth,
+		setKeyboard,
+		ctx
+	]);
 	(0, react.useEffect)(() => {
-		const STEP = {
-			ArrowLeft: [-1, 0],
-			ArrowRight: [1, 0],
-			ArrowUp: [0, -1],
-			ArrowDown: [0, 1]
-		};
 		const onKeyDown = (e) => {
 			if (!keyboardRef.current) return;
 			const session = sessionRef.current;
 			if (!session || session.kind !== "move") return;
-			const step = STEP[e.key];
+			const step = arrowStep(e.key);
 			if (!step) return;
 			e.preventDefault();
 			e.stopImmediatePropagation();
-			const next = (0, _snapgridjs_core.nudge)(session, step[0], step[1], ctx());
-			setSessionBoth(next);
-			const cell = next.placeholder;
-			const rect = containerElRef.current?.getBoundingClientRect();
-			if (cell && rect) {
-				const pos = (0, _snapgridjs_core.calcGridItemPosition)(ppRef.current, cell.x, cell.y, cell.w, cell.h);
-				setOverlay((o) => o ? {
-					...o,
-					left: rect.left + pos.left,
-					top: rect.top + pos.top,
-					width: pos.width,
-					height: pos.height
-				} : o);
-			}
+			setSessionBoth((0, _snapgridjs_core.nudge)(session, step[0], step[1], ctx()));
 		};
 		window.addEventListener("keydown", onKeyDown, true);
 		return () => window.removeEventListener("keydown", onKeyDown, true);
@@ -447,89 +604,53 @@ function SnapGridRuntime(props) {
 		handleDragMove,
 		handleDragEnd
 	]));
-	const dragThreshold = props.dragConfig?.threshold ?? 3;
-	const itemSensors = (0, react.useMemo)(() => buildItemSensors(dragThreshold, () => propsRef.current.dragConfig), [dragThreshold]);
-	const renderedLayout = session ? session.preview : props.layout;
-	const itemsById = (0, react.useMemo)(() => new Map(renderedLayout.map((it) => [it.i, it])), [renderedLayout]);
-	const gridDraggable = props.isDraggable ?? true;
-	const dragEnabled = props.dragConfig?.enabled ?? true;
+	const dragThreshold = opts.dragConfig?.threshold ?? 3;
+	const itemSensors = (0, react.useMemo)(() => buildItemSensors(dragThreshold, () => optsRef.current.dragConfig), [dragThreshold]);
+	const itemModifiers = (0, react.useMemo)(() => [SnapToGrid.configure({
+		getPositionParams: () => ppRef.current,
+		isEnabled: () => optsRef.current.dragConfig?.snapToGrid ?? false
+	})], []);
+	const gridDraggable = opts.isDraggable ?? true;
+	const dragEnabled = opts.dragConfig?.enabled ?? true;
 	const isItemDraggable = (0, react.useCallback)((id) => {
 		const it = committedById.get(id);
 		if (!it) return false;
-		return gridDraggable && dragEnabled && (it.isDraggable ?? true) && !it.static;
+		return gridDraggable && dragEnabled && itemGateOpen(it.isDraggable, it.static);
 	}, [
 		committedById,
 		gridDraggable,
 		dragEnabled
 	]);
-	const gridResizable = props.isResizable ?? true;
-	const resizeEnabled = props.resizeConfig?.enabled ?? true;
+	const gridResizable = opts.isResizable ?? true;
+	const resizeEnabled = opts.resizeConfig?.enabled ?? true;
 	const isItemResizable = (0, react.useCallback)((id) => {
 		const it = committedById.get(id);
 		if (!it) return false;
-		return gridResizable && resizeEnabled && (it.isResizable ?? true) && !it.static;
+		return gridResizable && resizeEnabled && itemGateOpen(it.isResizable, it.static);
 	}, [
 		committedById,
 		gridResizable,
 		resizeEnabled
 	]);
-	const defaultHandles = props.resizeConfig?.handles;
+	const defaultHandles = opts.resizeConfig?.handles;
 	const resizeHandlesFor = (0, react.useCallback)((id) => committedById.get(id)?.resizeHandles ?? defaultHandles ?? DEFAULT_HANDLES, [committedById, defaultHandles]);
-	const runtime = (0, react.useMemo)(() => ({
-		containerId,
-		width: props.width,
-		autoSize: props.autoSize ?? true,
-		gridConfig,
+	controller.setConfig({
 		positionParams,
-		renderedLayout,
-		itemsById,
-		session,
-		isItemDraggable,
-		isItemResizable,
-		resizeHandlesFor,
-		itemSensors,
-		setContainerElement,
-		overlay
-	}), [
-		containerId,
-		props.width,
-		props.autoSize,
 		gridConfig,
-		positionParams,
-		renderedLayout,
-		itemsById,
-		session,
+		width: opts.width,
+		autoSize: opts.autoSize ?? true,
+		itemSensors,
+		itemModifiers,
 		isItemDraggable,
 		isItemResizable,
 		resizeHandlesFor,
-		itemSensors,
-		setContainerElement,
-		overlay
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridContext.Provider, {
-		value: runtime,
-		children: props.children
+		setContainerElement
 	});
-}
-//#endregion
-//#region src/SnapGridGroup.tsx
-/**
-* Wrap multiple grids to let tiles be dragged **between** them. Provides one
-* shared dnd-kit `DragDropProvider` and a registry so each grid can tell which
-* grid the pointer is over.
-*
-* Item ids must be unique across all grids in a group (they share one manager).
-*/
-function SnapGridGroup({ children }) {
-	const registryRef = (0, react.useRef)(null);
-	if (!registryRef.current) registryRef.current = createGridRegistry();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_react.DragDropProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnapGridGroupContext.Provider, {
-		value: registryRef.current,
-		children
-	}) });
+	return controller;
 }
 //#endregion
 //#region src/hooks/useGridContainer.ts
+const GRID_COLLISION_PRIORITY = 10;
 /** Total container height in pixels for the given number of occupied rows. */
 function containerHeight(rows, grid) {
 	const padY = (grid.containerPadding ?? grid.margin)[1];
@@ -537,81 +658,166 @@ function containerHeight(rows, grid) {
 	return padY * 2 + rows * grid.rowHeight + (rows - 1) * grid.margin[1];
 }
 /**
-* Headless hook for the grid container. Registers the droppable surface (the
-* seam for cross-grid drops) and returns props (ref + sizing style) to spread
-* onto your own container element.
+* The grid host: creates this grid's controller + drag monitor (see
+* {@link useGridController}), registers the droppable surface, and returns props
+* to spread onto your own container element. Render `useGridItem` tiles inside,
+* passing `group` (this grid's id) so they resolve this controller.
 */
-function useGridContainer() {
-	const rt = useGridRuntime();
+function useGridContainer(opts) {
+	const controller = useGridController(opts);
+	const { width, autoSize, gridConfig, setContainerElement } = controller.config;
 	const { ref, isDropTarget } = (0, _dnd_kit_react.useDroppable)({
-		id: rt.containerId,
+		id: controller.id,
 		type: "grid",
-		accept: "grid-item"
+		accept: (source) => {
+			if (source.type === "grid-item") return true;
+			return source.data?.snapGridDrop != null;
+		},
+		collisionPriority: GRID_COLLISION_PRIORITY
 	});
-	const setContainerElement = rt.setContainerElement;
 	const setRef = (0, react.useCallback)((element) => {
 		ref(element);
 		setContainerElement(element);
 	}, [ref, setContainerElement]);
-	const height = rt.autoSize ? containerHeight((0, _snapgridjs_core.bottom)(rt.renderedLayout), rt.gridConfig) : void 0;
+	const renderedLayout = (0, react.useSyncExternalStore)(controller.subscribe, controller.renderedSnapshot, controller.renderedSnapshot);
 	return {
 		containerProps: {
 			ref: setRef,
 			style: {
 				position: "relative",
-				width: rt.width,
-				height
+				width,
+				height: autoSize ? containerHeight((0, _snapgridjs_core.bottom)(renderedLayout), gridConfig) : void 0
 			},
 			"data-drop-target": isDropTarget || void 0
 		},
-		isDropTarget
+		isDropTarget,
+		group: controller.id,
+		controller
 	};
 }
+const REFLOW_EASING = "ease";
+const REFLOW_TRANSITION = `transform 150ms ${REFLOW_EASING}, width 150ms ${REFLOW_EASING}, height 150ms ${REFLOW_EASING}`;
+//#endregion
+//#region src/hooks/useResolveController.ts
+/**
+* Resolve a grid's controller by its `group` (= the grid's id), scoped to the
+* ambient dnd-kit manager. Items declare `group` (mirroring useSortable); the
+* container registered the controller under that id. Throws a helpful error if
+* unresolved — almost always a missing `group` or a tile rendered outside any
+* grid / `DragDropProvider`.
+*/
+function useResolveController(group) {
+	const controller = getController((0, _dnd_kit_react.useDragDropManager)(), group);
+	if (!controller) throw new Error(`snapgrid: no grid found for group "${group}". A grid item must pass the group returned by its grid's useGridContainer, and render inside a <DragDropProvider> (or use <GridLayout>, which wires this for you).`);
+	return controller;
+}
 //#endregion
 //#region src/hooks/useGridItem.ts
-const REFLOW_TRANSITION = "transform 150ms ease, width 150ms ease, height 150ms ease";
+const ITEM_FEEDBACK = [_dnd_kit_dom.Feedback.configure({
+	feedback: (_source, manager) => (0, _dnd_kit_dom_utilities.isKeyboardEvent)(manager.dragOperation.activatorEvent) ? "none" : "default",
+	dropAnimation: null
+})];
 /**
-* Headless hook for a single grid item. Returns a ref, a positioning `style`,
-* and drag state — spread them onto whatever element you render. You own the
-* tag, className, content, and any cosmetic styling.
+* Headless hook for a single grid tile. The tile is a real `useSortable` (a
+* draggable + droppable carrying `group`/`index`/`type`/`accept`), so it
+* interoperates with the dnd-kit sortable ecosystem, yet it is positioned by RGL
+* via the {@link GridController}. `group` is the owning grid's id (from its
+* {@link useGridContainer}), mirroring `useSortable`'s `group`. Spread the returned
+* `ref`, optional `handleRef`, positioning `style`, and drag state onto whatever
+* element you render — you own the tag, className, content, and cosmetic styling.
+*
+* The dragged tile floats itself via dnd-kit's default feedback (no `<DragOverlay>`):
+* the active tile renders at its committed origin so the float offset composes, and
+* reflow is animated on the compositor via the Web Animations API — both so it stays
+* smooth in Safari, where the float's popover top-layer repaint would jank a
+* CSS-transition reflow.
 */
-function useGridItem(id) {
-	const rt = useGridRuntime();
-	const item = rt.itemsById.get(id);
-	const { ref, isDragging } = (0, _dnd_kit_react.useDraggable)({
+function useGridItem(id, group) {
+	const controller = useResolveController(group);
+	const snap = (0, react.useSyncExternalStore)(controller.subscribe, () => controller.itemSnapshot(id), () => controller.itemSnapshot(id));
+	const item = snap.item;
+	const active = snap.isDragging;
+	const hidden = snap.hidden;
+	const config = controller.config;
+	const wasActive = (0, react.useRef)(false);
+	const justDropped = wasActive.current && !active;
+	wasActive.current = active;
+	const data = (0, react.useMemo)(() => ({ snapGrid: {
+		kind: "move",
+		itemId: id,
+		item
+	} }), [id, item]);
+	const { ref: sortableRef, handleRef, isDragging } = (0, _dnd_kit_react_sortable.useSortable)({
 		id,
+		index: controller.itemIndex(id),
+		group,
 		type: "grid-item",
-		disabled: !rt.isItemDraggable(id),
-		sensors: rt.itemSensors,
-		plugins: NO_FEEDBACK,
-		data: { snapGrid: {
-			kind: "move",
-			itemId: id,
-			item
-		} }
+		accept: "grid-item",
+		disabled: !config.isItemDraggable(id),
+		sensors: config.itemSensors,
+		modifiers: config.itemModifiers,
+		plugins: (defaults) => [...defaults, ...ITEM_FEEDBACK],
+		data
 	});
-	const active = rt.session?.activeId === id;
-	let style = {
-		position: "absolute",
-		touchAction: "none"
-	};
-	if (item) {
-		const pos = (0, _snapgridjs_core.calcGridItemPosition)(rt.positionParams, item.x, item.y, item.w, item.h);
-		style = {
+	const elRef = (0, react.useRef)(null);
+	const setRef = (0, react.useCallback)((element) => {
+		sortableRef(element);
+		elRef.current = element;
+	}, [sortableRef]);
+	const session = controller.getSession();
+	const dragging = session != null;
+	const posItem = item ? active && hidden ? session?.anchor.item ?? item : item : void 0;
+	const pos = posItem ? (0, _snapgridjs_core.calcGridItemPosition)(config.positionParams, posItem.x, posItem.y, posItem.w, posItem.h) : void 0;
+	const posLeft = pos?.left;
+	const posTop = pos?.top;
+	const prev = (0, react.useRef)(null);
+	const reflowAnim = (0, react.useRef)(null);
+	(0, react.useLayoutEffect)(() => {
+		const cur = posLeft != null && posTop != null ? {
+			left: posLeft,
+			top: posTop
+		} : null;
+		const before = prev.current;
+		prev.current = cur;
+		const el = elRef.current;
+		if (!el || !cur || !before || active || justDropped || !dragging) return;
+		if (before.left === cur.left && before.top === cur.top) return;
+		let fromX = before.left;
+		let fromY = before.top;
+		if (reflowAnim.current?.playState === "running") {
+			const m = new DOMMatrix(getComputedStyle(el).transform);
+			fromX = m.m41;
+			fromY = m.m42;
+		}
+		reflowAnim.current?.cancel();
+		reflowAnim.current = el.animate([{ transform: `translate(${fromX}px, ${fromY}px)` }, { transform: `translate(${cur.left}px, ${cur.top}px)` }], {
+			duration: 150,
+			easing: REFLOW_EASING
+		});
+	}, [
+		posLeft,
+		posTop,
+		active,
+		justDropped,
+		dragging
+	]);
+	(0, react.useEffect)(() => () => reflowAnim.current?.cancel(), []);
+	return {
+		ref: setRef,
+		handleRef,
+		style: pos ? {
 			position: "absolute",
 			left: 0,
 			top: 0,
 			width: pos.width,
 			height: pos.height,
 			transform: `translate(${pos.left}px, ${pos.top}px)`,
-			visibility: active ? "hidden" : void 0,
-			transition: active ? "none" : REFLOW_TRANSITION,
+			transition: active || justDropped || dragging ? "none" : REFLOW_TRANSITION,
 			touchAction: "none"
-		};
-	}
-	return {
-		ref,
-		style,
+		} : {
+			position: "absolute",
+			touchAction: "none"
+		},
 		isDragging,
 		item
 	};
@@ -620,13 +826,14 @@ function useGridItem(id) {
 //#region src/hooks/useGridPlaceholder.ts
 /**
 * Headless hook returning where the drag placeholder should be rendered, or
-* `null` when no drag is in progress. You render the element however you like.
+* `null` when no drag is in progress. `group` is the owning grid's id (from its
+* {@link useGridContainer}). You render the element however you like.
 */
-function useGridPlaceholder() {
-	const rt = useGridRuntime();
-	const placeholder = rt.session?.placeholder;
+function useGridPlaceholder(group) {
+	const controller = useResolveController(group);
+	const placeholder = (0, react.useSyncExternalStore)(controller.subscribe, controller.placeholderSnapshot, controller.placeholderSnapshot);
 	if (!placeholder) return null;
-	const pos = (0, _snapgridjs_core.calcGridItemPosition)(rt.positionParams, placeholder.x, placeholder.y, placeholder.w, placeholder.h);
+	const pos = (0, _snapgridjs_core.calcGridItemPosition)(controller.config.positionParams, placeholder.x, placeholder.y, placeholder.w, placeholder.h);
 	return {
 		item: placeholder,
 		style: {
@@ -644,14 +851,15 @@ function useGridPlaceholder() {
 //#region src/hooks/useGridResizeHandle.ts
 /**
 * Headless hook for a single resize handle. Model a handle as its own draggable;
-* dragging it resizes the item from the given edge/corner. Position and style
-* the handle however you like — spread `ref` and `handleProps` onto it.
+* dragging it resizes the item from the given edge/corner. `group` is the owning
+* grid's id (from its {@link useGridContainer}). Spread `ref` and `handleProps`
+* onto the handle element you position/style.
 */
-function useGridResizeHandle(itemId, handle) {
-	const rt = useGridRuntime();
+function useGridResizeHandle(itemId, handle, group) {
+	const controller = useResolveController(group);
 	const { ref } = (0, _dnd_kit_react.useDraggable)({
 		id: `${itemId}::resize::${handle}`,
-		disabled: !rt.isItemResizable(itemId),
+		disabled: !controller.config?.isItemResizable(itemId),
 		plugins: NO_FEEDBACK,
 		data: { snapGrid: {
 			kind: "resize",
@@ -659,7 +867,7 @@ function useGridResizeHandle(itemId, handle) {
 			handle
 		} }
 	});
-	const isResizing = rt.session?.kind === "resize" && rt.session.activeId === itemId;
+	const { isResizing } = (0, react.useSyncExternalStore)(controller.subscribe, () => controller.resizeSnapshot(itemId), () => controller.resizeSnapshot(itemId));
 	return {
 		ref,
 		handleProps: { [RESIZE_HANDLE_ATTR]: true },
@@ -667,30 +875,6 @@ function useGridResizeHandle(itemId, handle) {
 	};
 }
 //#endregion
-//#region src/hooks/useGridDragOverlay.ts
-/**
-* Headless hook for the floating drag preview. Returns `null` unless this grid
-* is the source of an in-progress drag. Render the returned `item` with `style`
-* in a portal at `document.body` so it can float across grids unclipped (see
-* {@link GridDragOverlay} for the convenience component).
-*/
-function useGridDragOverlay() {
-	const o = useGridRuntime().overlay;
-	if (!o) return null;
-	return {
-		item: o.item,
-		style: {
-			position: "fixed",
-			left: o.left,
-			top: o.top,
-			width: o.width,
-			height: o.height,
-			pointerEvents: "none",
-			zIndex: 1e3
-		}
-	};
-}
-//#endregion
 //#region src/hooks/useResponsiveLayout.ts
 /** react-grid-layout's default breakpoints (px) and column counts. */
 const DEFAULT_BREAKPOINTS = {
@@ -757,26 +941,7 @@ function useResponsiveLayout(options) {
 	};
 }
 //#endregion
-//#region src/GridDragOverlay.tsx
-/**
-* Renders the floating drag preview in a portal at `document.body` — so it
-* follows the pointer across grids without being clipped by any container.
-* Renders nothing when this grid isn't the drag source.
-*/
-function GridDragOverlay({ children, className, style }) {
-	const overlay = useGridDragOverlay();
-	if (typeof document === "undefined" || !overlay) return null;
-	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: className ? `snapgrid-overlay ${className}` : "snapgrid-overlay",
-		style: style ? {
-			...overlay.style,
-			...style
-		} : overlay.style,
-		children: children(overlay.item)
-	}), document.body);
-}
-//#endregion
-//#region src/GridItem.tsx
+//#region src/components/GridItem.tsx
 const HANDLE_CURSOR = {
 	n: "ns-resize",
 	s: "ns-resize",
@@ -805,8 +970,8 @@ function handleStyle(handle) {
 	if (handle === "e" || handle === "w") s.top = `calc(50% - ${SIDE / 2}px)`;
 	return s;
 }
-function DefaultResizeHandle({ itemId, handle }) {
-	const { ref, handleProps } = useGridResizeHandle(itemId, handle);
+function DefaultResizeHandle({ itemId, handle, group }) {
+	const { ref, handleProps } = useGridResizeHandle(itemId, handle, group);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		ref,
 		...handleProps,
@@ -817,12 +982,19 @@ function DefaultResizeHandle({ itemId, handle }) {
 /**
 * Convenience wrapper over {@link useGridItem}: an absolutely-positioned `<div>`
 * with stable hooks (`.snapgrid-item`, `data-grid-id`, `data-dragging`) and the
-* configured resize handles. For full control, use the hooks directly.
+* configured resize handles. `group` is the owning grid's id. For full control,
+* use the hooks directly.
+*
+* Memoized so re-rendering the surface (e.g. its auto-height tracking the drag)
+* doesn't re-render every tile — a tile re-renders only when its own slice
+* changes (via useGridItem's subscription). Keeps a drag's React work scoped to
+* the moved tile (see renderScope.test).
 */
-function GridItem({ id, children, className, style }) {
-	const rt = useGridRuntime();
-	const { ref, style: positionStyle, isDragging } = useGridItem(id);
-	const handles = rt.isItemResizable(id) ? rt.resizeHandlesFor(id) : [];
+function GridItemImpl({ id, group, children, className, style }) {
+	const controller = useResolveController(group);
+	const { ref, style: positionStyle, isDragging } = useGridItem(id, group);
+	const config = controller.config;
+	const handles = config?.isItemResizable(id) ? config.resizeHandlesFor(id) : [];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref,
 		"data-grid-id": id,
@@ -834,27 +1006,29 @@ function GridItem({ id, children, className, style }) {
 		} : positionStyle,
 		children: [children, handles.map((handle) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultResizeHandle, {
 			itemId: id,
-			handle
+			handle,
+			group
 		}, handle))]
 	});
 }
+const GridItem = (0, react.memo)(GridItemImpl);
 //#endregion
-//#region src/GridPlaceholder.tsx
+//#region src/components/GridPlaceholder.tsx
 const DEFAULT_LOOK = {
 	background: "rgba(99, 102, 241, 0.2)",
 	border: "1px dashed rgba(99, 102, 241, 0.6)",
 	borderRadius: 4,
 	boxSizing: "border-box",
 	zIndex: 2,
-	transition: "transform 150ms ease, width 150ms ease, height 150ms ease"
+	transition: REFLOW_TRANSITION
 };
 /**
 * Convenience placeholder rendered from {@link useGridPlaceholder}. Renders
 * nothing when no drag is active. For a custom placeholder, call the hook
 * directly and render your own element with the returned `style`.
 */
-function GridPlaceholder({ className, style }) {
-	const placeholder = useGridPlaceholder();
+function GridPlaceholder({ group, className, style }) {
+	const placeholder = useGridPlaceholder(group);
 	if (!placeholder) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"aria-hidden": "true",
@@ -867,18 +1041,15 @@ function GridPlaceholder({ className, style }) {
 	});
 }
 //#endregion
-//#region src/GridLayout.tsx
+//#region src/components/GridLayout.tsx
+const InProvider = (0, react.createContext)(false);
 /** Strip the namespacing prefix React applies to keys inside `Children.map`. */
 function keyToId(key) {
 	return key.startsWith(".$") ? key.slice(2) : key;
 }
 /** The default surface: positioned container + mapped items + placeholder. */
-function GridSurface({ className, style, children }) {
-	const { containerProps } = useGridContainer();
-	const childById = /* @__PURE__ */ new Map();
-	react.Children.forEach(children, (child) => {
-		if ((0, react.isValidElement)(child) && child.key != null) childById.set(keyToId(String(child.key)), child);
-	});
+function GridSurface({ className, style, children, ...opts }) {
+	const { containerProps, group } = useGridContainer(opts);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...containerProps,
 		className: className ? `snapgrid ${className}` : "snapgrid",
@@ -886,38 +1057,50 @@ function GridSurface({ className, style, children }) {
 			...containerProps.style,
 			...style
 		} : containerProps.style,
-		children: [
-			react.Children.map(children, (child) => {
-				if (!(0, react.isValidElement)(child) || child.key == null) return child;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridItem, {
-					id: keyToId(String(child.key)),
-					children: child
-				}, child.key);
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridPlaceholder, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridDragOverlay, { children: (item) => childById.get(item.i) ?? null })
-		]
+		children: [react.Children.map(children, (child) => {
+			if (!(0, react.isValidElement)(child) || child.key == null) return child;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridItem, {
+				id: keyToId(String(child.key)),
+				group,
+				children: child
+			}, child.key);
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridPlaceholder, { group })]
 	});
 }
 /**
 * Drop-in grid component: a controlled, react-grid-layout v2-compatible layout
-* backed by dnd-kit. A thin shell over {@link SnapGridProvider} and the headless
+* backed by dnd-kit. A thin shell over {@link useGridContainer} and the headless
 * hooks — children are keyed by their layout item's `i`. For full control over
-* markup/styling, use the provider + hooks directly.
+* markup/styling, use the hooks directly.
+*
+* Supplies the dnd-kit `DragDropProvider` for the turnkey case so consumers
+* don't manage one. Nest multiple `GridLayout`s and they share one provider
+* (the seam for cross-grid drags); a consumer's own provider is also honored.
 */
 function GridLayout(props) {
-	const { className, style, children, ...providerProps } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnapGridProvider, {
-		...providerProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridSurface, {
-			className,
-			style,
-			children
-		})
-	});
+	const inProvider = (0, react.useContext)(InProvider);
+	const surface = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridSurface, { ...props });
+	if (inProvider) return surface;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_react.DragDropProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InProvider.Provider, {
+		value: true,
+		children: surface
+	}) });
+}
+/**
+* Share one dnd-kit `DragDropProvider` across several sibling grids so tiles can
+* be dragged between them. (Nested `GridLayout`s already share a provider; this
+* is for siblings.) A thin wrapper over `DragDropProvider` — the cross-grid seam
+* is the shared manager + collision target.
+*/
+function SnapGridGroup({ children }) {
+	if ((0, react.useContext)(InProvider)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_react.DragDropProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InProvider.Provider, {
+		value: true,
+		children
+	}) });
 }
 //#endregion
-//#region src/ResponsiveGridLayout.tsx
+//#region src/components/ResponsiveGridLayout.tsx
 /**
 * A responsive grid: switches column count and layout by breakpoint as `width`
 * changes, generating a breakpoint's layout from the nearest one when absent.
@@ -997,13 +1180,18 @@ function useContainerWidth(options = {}) {
 //#endregion
 exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
 exports.DEFAULT_BREAKPOINT_COLS = DEFAULT_BREAKPOINT_COLS;
+Object.defineProperty(exports, "DragOverlay", {
+	enumerable: true,
+	get: function() {
+		return _dnd_kit_react.DragOverlay;
+	}
+});
 Object.defineProperty(exports, "Feedback", {
 	enumerable: true,
 	get: function() {
 		return _dnd_kit_dom.Feedback;
 	}
 });
-exports.GridDragOverlay = GridDragOverlay;
 exports.GridItem = GridItem;
 exports.GridLayout = GridLayout;
 exports.GridPlaceholder = GridPlaceholder;
@@ -1021,7 +1209,6 @@ Object.defineProperty(exports, "PointerSensor", {
 });
 exports.ResponsiveGridLayout = ResponsiveGridLayout;
 exports.SnapGridGroup = SnapGridGroup;
-exports.SnapGridProvider = SnapGridProvider;
 Object.defineProperty(exports, "getCompactor", {
 	enumerable: true,
 	get: function() {
@@ -1054,7 +1241,6 @@ Object.defineProperty(exports, "useDroppable", {
 	}
 });
 exports.useGridContainer = useGridContainer;
-exports.useGridDragOverlay = useGridDragOverlay;
 exports.useGridItem = useGridItem;
 exports.useGridPlaceholder = useGridPlaceholder;
 exports.useGridResizeHandle = useGridResizeHandle;