@snapgridjs/react 0.3.0 → 0.5.0

package/dist/index.cjs

@@ -1,335 +1,27 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let _dnd_kit_react = require("@dnd-kit/react");
 let _snapgridjs_core = require("@snapgridjs/core");
+let _snapgridjs_dnd = require("@snapgridjs/dnd");
 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");
-//#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 (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) {
-		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 _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. */
-const RESIZE_HANDLE_ATTR = "data-snapgrid-resize-handle";
-const NO_FEEDBACK = [_dnd_kit_dom.Feedback.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 [_dnd_kit_dom.PointerSensor.configure({
-		activationConstraints: () => threshold > 0 ? [new _dnd_kit_dom.PointerActivationConstraints.Distance({ value: threshold })] : void 0,
-		preventActivation: (event) => shouldPreventItemDrag(event.target, getDragConfig())
-	}), _dnd_kit_dom.KeyboardSensor];
-}
-//#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) {
@@ -342,271 +34,27 @@ function useGridController(opts) {
 	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));
+	const controller = (0, _dnd_kit_react.useInstance)((m) => new _snapgridjs_dnd.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);
-	gridRef.current = gridConfig;
-	const compactorRef = (0, react.useRef)(compactor);
-	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);
-	registerController(manager, containerId, controller);
-	(0, react.useEffect)(() => registerController(manager, containerId, controller), [
+	(0, _snapgridjs_dnd.registerController)(manager, containerId, controller);
+	(0, react.useEffect)(() => (0, _snapgridjs_dnd.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;
-		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 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)((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(), getGrabOffset(managerRef.current), item.w, item.h, ppRef.current);
-	}, []);
-	const ctx = (0, react.useCallback)(() => ({
-		positionParams: ppRef.current,
-		compactor: compactorRef.current,
-		cols: gridRef.current.cols
-	}), []);
-	const handleDragStart = (0, react.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((0, _snapgridjs_core.beginResize)(layout, {
-				item,
-				rect: (0, _snapgridjs_core.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 = (0, _snapgridjs_core.calcGridItemPosition)(ppRef.current, item.x, item.y, item.w, item.h);
-			setSessionBoth((0, _snapgridjs_core.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 = (0, react.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 = (0, _snapgridjs_core.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((0, _snapgridjs_core.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 = (0, _snapgridjs_core.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((0, _snapgridjs_core.beginReceive)(committed, foreign, cell.x, cell.y, pointer, ctx()));
-		} else if (sessionRef.current) setSessionBoth(null);
-	}, [
-		setSessionBoth,
-		overMe,
-		cellFromPointer,
-		ctx
-	]);
-	const handleDragEnd = (0, react.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?.((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) o.onLayoutChange?.((0, _snapgridjs_core.commitLayout)(current));
-				else if (action === "remove-source" && data) {
-					const { compactor: c, cols } = ctx();
-					o.onLayoutChange?.((0, _snapgridjs_core.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?.((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) o.onDrop?.(committed, dropped, native);
-				}
-				break;
-		}
-		dropSpecRef.current = null;
-		setKeyboard(false);
-		setSessionBoth(null);
-	}, [
-		setSessionBoth,
-		setKeyboard,
-		ctx
-	]);
 	(0, react.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((0, _snapgridjs_core.nudge)(session, step[0], step[1], ctx()));
-		};
-		window.addEventListener("keydown", onKeyDown, true);
-		return () => window.removeEventListener("keydown", onKeyDown, true);
-	}, [ctx, setSessionBoth]);
-	(0, _dnd_kit_react.useDragDropMonitor)((0, react.useMemo)(() => ({
-		onDragStart: handleDragStart,
-		onDragMove: handleDragMove,
-		onDragEnd: handleDragEnd
-	}), [
-		handleDragStart,
-		handleDragMove,
-		handleDragEnd
-	]));
+		if (!manager) return;
+		return (0, _snapgridjs_dnd.attachEngine)(manager);
+	}, [manager]);
+	const committedById = (0, react.useMemo)(() => new Map(opts.layout.map((it) => [it.i, it])), [opts.layout]);
 	const dragThreshold = opts.dragConfig?.threshold ?? 3;
-	const itemSensors = (0, react.useMemo)(() => buildItemSensors(dragThreshold, () => optsRef.current.dragConfig), [dragThreshold]);
-	const itemModifiers = (0, react.useMemo)(() => [SnapToGrid.configure({
+	const itemSensors = (0, react.useMemo)(() => (0, _snapgridjs_dnd.buildItemSensors)(dragThreshold, () => optsRef.current.dragConfig), [dragThreshold]);
+	const itemModifiers = (0, react.useMemo)(() => [_snapgridjs_dnd.SnapToGrid.configure({
 		getPositionParams: () => ppRef.current,
 		isEnabled: () => optsRef.current.dragConfig?.snapToGrid ?? false
 	})], []);
@@ -634,6 +82,25 @@ function useGridController(opts) {
 	]);
 	const defaultHandles = opts.resizeConfig?.handles;
 	const resizeHandlesFor = (0, react.useCallback)((id) => committedById.get(id)?.resizeHandles ?? defaultHandles ?? DEFAULT_HANDLES, [committedById, defaultHandles]);
+	const callbacks = (0, react.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,
@@ -644,13 +111,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];
@@ -665,20 +134,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 = (0, react.useRef)(null);
 	const { ref, isDropTarget } = (0, _dnd_kit_react.useDroppable)({
 		id: controller.id,
 		type: "grid",
 		accept: (source) => {
+			const srcEl = (0, _snapgridjs_dnd.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: _snapgridjs_dnd.gridCollisionDetector
 	});
 	const setRef = (0, react.useCallback)((element) => {
 		ref(element);
-		setContainerElement(element);
-	}, [ref, setContainerElement]);
+		controller.element = element;
+		gridElRef.current = element;
+		if (element) element.setAttribute(_snapgridjs_dnd.SNAPGRID_GRID_ATTR, "");
+	}, [ref, controller]);
 	const renderedLayout = (0, react.useSyncExternalStore)(controller.subscribe, controller.renderedSnapshot, controller.renderedSnapshot);
 	return {
 		containerProps: {
@@ -707,7 +181,7 @@ const REFLOW_TRANSITION = `transform 150ms ${REFLOW_EASING}, width 150ms ${REFLO
 * grid / `DragDropProvider`.
 */
 function useResolveController(group) {
-	const controller = getController((0, _dnd_kit_react.useDragDropManager)(), group);
+	const controller = (0, _snapgridjs_dnd.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;
 }
@@ -745,8 +219,13 @@ function useGridItem(id, group) {
 	const data = (0, react.useMemo)(() => ({ snapGrid: {
 		kind: "move",
 		itemId: id,
-		item
-	} }), [id, item]);
+		item,
+		group
+	} }), [
+		id,
+		item,
+		group
+	]);
 	const { ref: sortableRef, handleRef, isDragging } = (0, _dnd_kit_react_sortable.useSortable)({
 		id,
 		index: controller.itemIndex(id),
@@ -860,17 +339,18 @@ function useGridResizeHandle(itemId, handle, group) {
 	const { ref } = (0, _dnd_kit_react.useDraggable)({
 		id: `${itemId}::resize::${handle}`,
 		disabled: !controller.config?.isItemResizable(itemId),
-		plugins: NO_FEEDBACK,
+		plugins: _snapgridjs_dnd.NO_FEEDBACK,
 		data: { snapGrid: {
 			kind: "resize",
 			itemId,
-			handle
+			handle,
+			group
 		} }
 	});
 	const { isResizing } = (0, react.useSyncExternalStore)(controller.subscribe, () => controller.resizeSnapshot(itemId), () => controller.resizeSnapshot(itemId));
 	return {
 		ref,
-		handleProps: { [RESIZE_HANDLE_ATTR]: true },
+		handleProps: { [_snapgridjs_dnd.RESIZE_HANDLE_ATTR]: true },
 		isResizing
 	};
 }