@snapgridjs/react 0.3.0 → 0.5.0

package/dist/index.mjs

@@ -1,334 +1,26 @@
-import { DragDropProvider, DragOverlay, useDragDropManager, useDragDropMonitor, useDraggable, useDraggable as useDraggable$1, useDroppable, useDroppable as useDroppable$1, useInstance } from "@dnd-kit/react";
-import { beginDrag, beginReceive, beginResize, bottom, calcGridColWidth, calcGridItemPosition, calcXY, commitLayout, defaultGridConfig, dragResize, dragTo, findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, horizontalCompactor, noCompactor, nudge, removeItemWithCompactor, toPositionParams, verticalCompactor, verticalCompactor as verticalCompactor$1 } from "@snapgridjs/core";
+import { DragDropProvider, DragOverlay, useDragDropManager, useDraggable, useDraggable as useDraggable$1, useDroppable, useDroppable as useDroppable$1, useInstance } from "@dnd-kit/react";
+import { bottom, calcGridItemPosition, defaultGridConfig, findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, horizontalCompactor, noCompactor, toPositionParams, verticalCompactor, verticalCompactor as verticalCompactor$1 } from "@snapgridjs/core";
+import { GridController, NO_FEEDBACK, RESIZE_HANDLE_ATTR, SNAPGRID_GRID_ATTR, SnapToGrid, attachEngine, buildItemSensors, domElement, getController, gridCollisionDetector, registerController } from "@snapgridjs/dnd";
 import { Children, createContext, isValidElement, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { Modifier } from "@dnd-kit/abstract";
-import { Feedback, Feedback as Feedback$1, KeyboardSensor, KeyboardSensor as KeyboardSensor$1, PointerActivationConstraints, PointerSensor, PointerSensor as PointerSensor$1 } from "@dnd-kit/dom";
+import { Feedback, Feedback as Feedback$1, KeyboardSensor, PointerSensor } from "@dnd-kit/dom";
 import { isKeyboardEvent } from "@dnd-kit/dom/utilities";
 import { useSortable } from "@dnd-kit/react/sortable";
 import { Fragment, jsx, jsxs } from "react/jsx-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/controller/registry.ts
-/**
-* 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
-* tile's top-left (not the cursor) maps to the cell, so a received tile's
-* placeholder aligns with the floating overlay instead of jumping its corner to
-* the cursor. External drops pass `{ x: 0, y: 0 }` (no meaningful grab point).
-*/
-function receiveCell(pointer, gridRect, grabOffset, w, h, pp) {
-	return 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) {
-		if (s.kind === "resize") return "cancel-resize";
-		if (s.ownsItem) return "cancel-move";
-		return "noop";
-	}
-	if (s.kind === "resize") return "commit-resize";
-	if (s.ownsItem && s.hasData) {
-		if (s.dest === s.myId && s.kind === "move") return "commit-in-grid";
-		if (s.dest) return "remove-source";
-		return "revert";
-	}
-	if (s.dest === s.myId && s.kind === "move") return s.hasData ? "commit-dest" : "external-drop";
-	return "noop";
-}
-//#endregion
-//#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 Modifier {
-	apply({ transform }) {
-		const opts = this.options;
-		if (!opts?.isEnabled()) return transform;
-		const pp = opts.getPositionParams();
-		const colStep = 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. */
-const RESIZE_HANDLE_ATTR = "data-snapgrid-resize-handle";
-const NO_FEEDBACK = [Feedback$1.configure({ feedback: "none" })];
-/**
-* Whether a pointer-down on `target` should NOT start an item move. Pure and
-* exported for testing. Honors three rules, in order:
-*  - never start a move from a resize handle;
-*  - never start from a region matching `dragConfig.cancel`;
-*  - if `dragConfig.handle` is set, only start from within it.
-*/
-function shouldPreventItemDrag(target, cfg) {
-	if (!(target instanceof Element)) return false;
-	if (target.closest(`[data-snapgrid-resize-handle]`)) return true;
-	if (cfg?.cancel && target.closest(cfg.cancel)) return true;
-	if (cfg?.handle && !target.closest(cfg.handle)) return true;
-	return false;
-}
-/**
-* Sensors for item (move) draggables, built from the drag config: a distance
-* activation threshold (so clicks don't start drags) plus handle/cancel/resize
-* gating, with the keyboard sensor kept for accessibility.
-*/
-function buildItemSensors(threshold, getDragConfig) {
-	return [PointerSensor$1.configure({
-		activationConstraints: () => threshold > 0 ? [new PointerActivationConstraints.Distance({ value: threshold })] : void 0,
-		preventActivation: (event) => shouldPreventItemDrag(event.target, getDragConfig())
-	}), KeyboardSensor$1];
-}
-//#endregion
 //#region src/hooks/useGridController.ts
 const DEFAULT_HANDLES = ["se"];
 function itemGateOpen(flag, isStatic) {
 	return isStatic ? flag === true : flag ?? true;
 }
 /**
-* 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
+* The grid's React seam: owns the {@link GridController} (an observable render
+* bridge), publishes per-grid config to it each render, registers it for id →
+* controller resolution, and attaches the manager-wide {@link SnapGridEngine}.
+*
+* The drag/resize *orchestration* lives in the engine (one per manager), not
+* here — this hook only wires the React-specific parts: the controller, the item
+* sensors/modifiers descriptors, the draggable/resizable gates, and the config
+* the engine reads. Created by {@link useGridContainer}; items resolve the same
+* controller by their `group` (= this grid's id). Consumes the ambient
 * `DragDropProvider` — it does not mint one.
 */
 function useGridController(opts) {
@@ -348,261 +40,17 @@ function useGridController(opts) {
 	optsRef.current = opts;
 	const ppRef = useRef(positionParams);
 	ppRef.current = positionParams;
-	const gridRef = useRef(gridConfig);
-	gridRef.current = gridConfig;
-	const compactorRef = useRef(compactor);
-	compactorRef.current = compactor;
-	const containerIdRef = useRef(containerId);
-	containerIdRef.current = containerId;
-	const managerRef = useRef(manager);
-	managerRef.current = manager;
-	const sessionRef = useRef(null);
-	const containerElRef = useRef(null);
-	const keyboardRef = useRef(false);
-	const dropSpecRef = useRef(null);
-	const dropCounterRef = useRef(0);
 	registerController(manager, containerId, controller);
 	useEffect(() => registerController(manager, containerId, controller), [
 		manager,
 		containerId,
 		controller
 	]);
-	const committedById = useMemo(() => new Map(opts.layout.map((it) => [it.i, it])), [opts.layout]);
-	const committedByIdRef = useRef(committedById);
-	committedByIdRef.current = committedById;
-	const setSessionBoth = useCallback((next) => {
-		sessionRef.current = next;
-		controller.setSession(next);
-	}, [controller]);
-	const setKeyboard = useCallback((value) => {
-		keyboardRef.current = value;
-		controller.setKeyboard(value);
-	}, [controller]);
-	const setContainerElement = useCallback((element) => {
-		containerElRef.current = element;
-	}, []);
-	/**
-	* 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 = useCallback((target) => target?.id === containerIdRef.current, []);
-	/** Map a client-space pointer to a grid cell within THIS grid (see {@link receiveCell}). */
-	const cellFromPointer = useCallback((p, item) => {
-		const el = containerElRef.current;
-		if (!el) return null;
-		return receiveCell(p, el.getBoundingClientRect(), getGrabOffset(managerRef.current), item.w, item.h, ppRef.current);
-	}, []);
-	const ctx = useCallback(() => ({
-		positionParams: ppRef.current,
-		compactor: compactorRef.current,
-		cols: gridRef.current.cols
-	}), []);
-	const handleDragStart = useCallback((event) => {
-		setKeyboard(false);
-		const data = dragData(event);
-		if (!data) {
-			const spec = externalDropSpec(event.operation.source, optsRef.current.dropConfig);
-			if (spec) {
-				dropCounterRef.current += 1;
-				dropSpecRef.current = {
-					i: spec.i ?? `${containerIdRef.current}-dropped-${dropCounterRef.current}`,
-					w: spec.w,
-					h: spec.h
-				};
-			} else dropSpecRef.current = null;
-			return;
-		}
-		dropSpecRef.current = null;
-		const layout = optsRef.current.layout;
-		const item = layout.find((it) => it.i === data.itemId);
-		const p = event.operation.position.current;
-		const pointer = {
-			x: p.x,
-			y: p.y
-		};
-		if (data.kind === "resize") {
-			if (!item) return;
-			setSessionBoth(beginResize(layout, {
-				item,
-				rect: calcGridItemPosition(ppRef.current, item.x, item.y, item.w, item.h),
-				pointer
-			}, data.handle));
-			optsRef.current.onResizeStart?.(layout, item, item, item, event.operation.activatorEvent, null);
-			return;
-		}
-		if (item) {
-			setKeyboard(event.operation.activatorEvent instanceof KeyboardEvent);
-			const rect = calcGridItemPosition(ppRef.current, item.x, item.y, item.w, item.h);
-			setSessionBoth(beginDrag(layout, {
-				item,
-				left: rect.left,
-				top: rect.top,
-				pointer
-			}));
-			const cr = (event.operation.source?.element)?.getBoundingClientRect();
-			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, setKeyboard]);
-	const handleDragMove = useCallback((event) => {
-		if (keyboardRef.current) return;
-		const p = event.operation.position.current;
-		const pointer = {
-			x: p.x,
-			y: p.y
-		};
-		const current = sessionRef.current;
-		if (current?.kind === "resize") {
-			const next = dragResize(current, pointer, ctx());
-			setSessionBoth(next);
-			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(target)) {
-				const foreign = {
-					i: spec.i,
-					x: 0,
-					y: 0,
-					w: spec.w,
-					h: spec.h
-				};
-				const committed = optsRef.current.layout;
-				const cell = cellFromPointer(pointer, foreign) ?? {
-					x: 0,
-					y: 0
-				};
-				setSessionBoth(beginReceive(committed, foreign, cell.x, cell.y, pointer, ctx()));
-			} else if (sessionRef.current) setSessionBoth(null);
-			return;
-		}
-		if (data.kind !== "move") return;
-		const here = overMe(target);
-		if (committedByIdRef.current.has(data.itemId)) {
-			const source = current?.kind === "move" ? current : null;
-			if (!source) return;
-			let next;
-			if (here) next = dragTo(source, pointer, ctx());
-			else next = {
-				...source,
-				preview: source.committed,
-				placeholder: null
-			};
-			setSessionBoth(next);
-			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 = optsRef.current.layout;
-			const cell = cellFromPointer(pointer, foreign) ?? {
-				x: 0,
-				y: 0
-			};
-			setSessionBoth(beginReceive(committed, foreign, cell.x, cell.y, pointer, ctx()));
-		} else if (sessionRef.current) setSessionBoth(null);
-	}, [
-		setSessionBoth,
-		overMe,
-		cellFromPointer,
-		ctx
-	]);
-	const handleDragEnd = useCallback((event) => {
-		const current = sessionRef.current;
-		const data = dragData(event);
-		const myId = containerIdRef.current;
-		const dest = dropDestination({
-			keyboard: keyboardRef.current,
-			targetId: event.operation.target?.id,
-			myId
-		});
-		const ownsItem = data ? committedByIdRef.current.has(data.itemId) : false;
-		setGrabOffset(managerRef.current, null);
-		const native = event.nativeEvent ?? null;
-		const o = optsRef.current;
-		const action = classifyDrop({
-			kind: current?.kind ?? null,
-			canceled: event.canceled,
-			ownsItem,
-			hasData: !!data,
-			dest,
-			myId
-		});
-		switch (action) {
-			case "cancel-resize":
-				o.onResizeStop?.(o.layout, current?.anchor.item ?? null, null, null, native, null);
-				break;
-			case "cancel-move":
-				o.onDragStop?.(o.layout, current?.anchor.item ?? null, null, null, native, null);
-				break;
-			case "commit-resize":
-				if (current) {
-					o.onLayoutChange?.(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) o.onLayoutChange?.(commitLayout(current));
-				else if (action === "remove-source" && data) {
-					const { compactor: c, cols } = ctx();
-					o.onLayoutChange?.(removeItemWithCompactor(o.layout, data.itemId, {
-						compactor: c,
-						cols
-					}));
-				}
-				o.onDragStop?.(current?.preview ?? o.layout, current?.anchor.item ?? null, current?.placeholder ?? null, current?.placeholder ?? null, native, null);
-				break;
-			case "commit-dest":
-				if (current) o.onLayoutChange?.(commitLayout(current));
-				break;
-			case "external-drop":
-				if (current) {
-					const committed = commitLayout(current);
-					const dropped = committed.find((it) => it.i === current.activeId);
-					if (dropped) o.onDrop?.(committed, dropped, native);
-				}
-				break;
-		}
-		dropSpecRef.current = null;
-		setKeyboard(false);
-		setSessionBoth(null);
-	}, [
-		setSessionBoth,
-		setKeyboard,
-		ctx
-	]);
 	useEffect(() => {
-		const onKeyDown = (e) => {
-			if (!keyboardRef.current) return;
-			const session = sessionRef.current;
-			if (!session || session.kind !== "move") return;
-			const step = arrowStep(e.key);
-			if (!step) return;
-			e.preventDefault();
-			e.stopImmediatePropagation();
-			setSessionBoth(nudge(session, step[0], step[1], ctx()));
-		};
-		window.addEventListener("keydown", onKeyDown, true);
-		return () => window.removeEventListener("keydown", onKeyDown, true);
-	}, [ctx, setSessionBoth]);
-	useDragDropMonitor(useMemo(() => ({
-		onDragStart: handleDragStart,
-		onDragMove: handleDragMove,
-		onDragEnd: handleDragEnd
-	}), [
-		handleDragStart,
-		handleDragMove,
-		handleDragEnd
-	]));
+		if (!manager) return;
+		return attachEngine(manager);
+	}, [manager]);
+	const committedById = useMemo(() => new Map(opts.layout.map((it) => [it.i, it])), [opts.layout]);
 	const dragThreshold = opts.dragConfig?.threshold ?? 3;
 	const itemSensors = useMemo(() => buildItemSensors(dragThreshold, () => optsRef.current.dragConfig), [dragThreshold]);
 	const itemModifiers = useMemo(() => [SnapToGrid.configure({
@@ -633,6 +81,25 @@ function useGridController(opts) {
 	]);
 	const defaultHandles = opts.resizeConfig?.handles;
 	const resizeHandlesFor = useCallback((id) => committedById.get(id)?.resizeHandles ?? defaultHandles ?? DEFAULT_HANDLES, [committedById, defaultHandles]);
+	const callbacks = useMemo(() => ({
+		onDragStart: opts.onDragStart,
+		onDrag: opts.onDrag,
+		onDragStop: opts.onDragStop,
+		onResizeStart: opts.onResizeStart,
+		onResize: opts.onResize,
+		onResizeStop: opts.onResizeStop,
+		onLayoutChange: opts.onLayoutChange,
+		onDrop: opts.onDrop
+	}), [
+		opts.onDragStart,
+		opts.onDrag,
+		opts.onDragStop,
+		opts.onResizeStart,
+		opts.onResize,
+		opts.onResizeStop,
+		opts.onLayoutChange,
+		opts.onDrop
+	]);
 	controller.setConfig({
 		positionParams,
 		gridConfig,
@@ -643,13 +110,15 @@ function useGridController(opts) {
 		isItemDraggable,
 		isItemResizable,
 		resizeHandlesFor,
-		setContainerElement
+		compactor,
+		dragConfig: opts.dragConfig,
+		dropConfig: opts.dropConfig,
+		callbacks
 	});
 	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];
@@ -664,20 +133,25 @@ function containerHeight(rows, grid) {
 */
 function useGridContainer(opts) {
 	const controller = useGridController(opts);
-	const { width, autoSize, gridConfig, setContainerElement } = controller.config;
+	const { width, autoSize, gridConfig } = controller.config;
+	const gridElRef = useRef(null);
 	const { ref, isDropTarget } = useDroppable$1({
 		id: controller.id,
 		type: "grid",
 		accept: (source) => {
+			const srcEl = domElement(source);
+			if (srcEl && gridElRef.current && srcEl.contains(gridElRef.current)) return false;
 			if (source.type === "grid-item") return true;
 			return source.data?.snapGridDrop != null;
 		},
-		collisionPriority: GRID_COLLISION_PRIORITY
+		collisionDetector: gridCollisionDetector
 	});
 	const setRef = useCallback((element) => {
 		ref(element);
-		setContainerElement(element);
-	}, [ref, setContainerElement]);
+		controller.element = element;
+		gridElRef.current = element;
+		if (element) element.setAttribute(SNAPGRID_GRID_ATTR, "");
+	}, [ref, controller]);
 	const renderedLayout = useSyncExternalStore(controller.subscribe, controller.renderedSnapshot, controller.renderedSnapshot);
 	return {
 		containerProps: {
@@ -744,8 +218,13 @@ function useGridItem(id, group) {
 	const data = useMemo(() => ({ snapGrid: {
 		kind: "move",
 		itemId: id,
-		item
-	} }), [id, item]);
+		item,
+		group
+	} }), [
+		id,
+		item,
+		group
+	]);
 	const { ref: sortableRef, handleRef, isDragging } = useSortable({
 		id,
 		index: controller.itemIndex(id),
@@ -863,7 +342,8 @@ function useGridResizeHandle(itemId, handle, group) {
 		data: { snapGrid: {
 			kind: "resize",
 			itemId,
-			handle
+			handle,
+			group
 		} }
 	});
 	const { isResizing } = useSyncExternalStore(controller.subscribe, () => controller.resizeSnapshot(itemId), () => controller.resizeSnapshot(itemId));