@snapgridjs/react 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -1,385 +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_collision = require("@dnd-kit/collision");
-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/dnd/entity.ts
-/**
-* The DOM element of a dnd-kit entity (a draggable, droppable, or drag source).
-* dnd-kit's abstract types don't expose `element`, but the DOM layer snapgrid
-* runs on always sets it — this centralizes that one assumption (and the cast)
-* in a single place instead of scattering it across the drag code.
-*/
-function domElement(entity) {
-	return entity?.element ?? null;
-}
-//#endregion
-//#region src/dnd/collision.ts
-/**
-* Marker attribute set on every grid container element. Used by {@link gridDepth}
-* to measure how deeply a grid is nested, purely from the DOM.
-*/
-const SNAPGRID_GRID_ATTR = "data-snapgrid-grid";
-const GRID_COLLISION_PRIORITY = 10;
-/**
-* How deeply `el`'s grid is nested: the number of ancestor grid containers above
-* it. A top-level grid is 0; a grid rendered inside another grid's tile is 1; and
-* so on. DOM containment is the ground truth, so this is correct regardless of the
-* React tree shape or how priorities are assigned elsewhere.
-*/
-function gridDepth(el) {
-	let depth = 0;
-	let node = el?.parentElement ?? null;
-	while (node) {
-		if (node.hasAttribute("data-snapgrid-grid")) depth++;
-		node = node.parentElement;
-	}
-	return depth;
-}
-/**
-* Collision detector for grid droppables. Runs dnd-kit's default detector, then —
-* when nested grid rects overlap (the pointer is over both an inner grid and its
-* outer one) — ranks the **innermost** grid highest by boosting priority with the
-* grid's nesting depth. Without this, overlapping grids tie on priority and the
-* winner is arbitrary. For non-nested grids depth is 0, so priority is unchanged.
-*/
-const gridCollisionDetector = (input) => {
-	const collision = (0, _dnd_kit_collision.defaultCollisionDetection)(input);
-	if (!collision) return null;
-	return {
-		...collision,
-		priority: GRID_COLLISION_PRIORITY + gridDepth(domElement(input.droppable))
-	};
-};
-//#endregion
-//#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) {
@@ -392,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 = domElement(event.operation.source)?.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
 	})], []);
@@ -684,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,
@@ -694,7 +111,10 @@ function useGridController(opts) {
 		isItemDraggable,
 		isItemResizable,
 		resizeHandlesFor,
-		setContainerElement
+		compactor,
+		dragConfig: opts.dragConfig,
+		dropConfig: opts.dropConfig,
+		callbacks
 	});
 	return controller;
 }
@@ -714,25 +134,26 @@ 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 = domElement(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;
+			if (source.data?.snapGridDrop != null) return true;
+			return opts.accept?.(source) ?? false;
 		},
-		collisionDetector: gridCollisionDetector
+		collisionDetector: _snapgridjs_dnd.gridCollisionDetector
 	});
 	const setRef = (0, react.useCallback)((element) => {
 		ref(element);
-		setContainerElement(element);
+		controller.element = element;
 		gridElRef.current = element;
-		if (element) element.setAttribute(SNAPGRID_GRID_ATTR, "");
-	}, [ref, setContainerElement]);
+		if (element) element.setAttribute(_snapgridjs_dnd.SNAPGRID_GRID_ATTR, "");
+	}, [ref, controller]);
 	const renderedLayout = (0, react.useSyncExternalStore)(controller.subscribe, controller.renderedSnapshot, controller.renderedSnapshot);
 	return {
 		containerProps: {
@@ -751,6 +172,7 @@ function useGridContainer(opts) {
 }
 const REFLOW_EASING = "ease";
 const REFLOW_TRANSITION = `transform 150ms ${REFLOW_EASING}, width 150ms ${REFLOW_EASING}, height 150ms ${REFLOW_EASING}`;
+const TILE_TRANSITION = `width 150ms ${REFLOW_EASING}, height 150ms ${REFLOW_EASING}`;
 //#endregion
 //#region src/hooks/useResolveController.ts
 /**
@@ -761,7 +183,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;
 }
@@ -771,6 +193,7 @@ const ITEM_FEEDBACK = [_dnd_kit_dom.Feedback.configure({
 	feedback: (_source, manager) => (0, _dnd_kit_dom_utilities.isKeyboardEvent)(manager.dragOperation.activatorEvent) ? "none" : "default",
 	dropAnimation: null
 })];
+const tileNeverTarget = () => null;
 /**
 * Headless hook for a single grid tile. The tile is a real `useSortable` (a
 * draggable + droppable carrying `group`/`index`/`type`/`accept`), so it
@@ -781,10 +204,18 @@ const ITEM_FEEDBACK = [_dnd_kit_dom.Feedback.configure({
 * 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.
+* the active tile renders at its committed origin and dnd-kit's float follows the
+* pointer from there, while reflow is animated on the compositor via the Web
+* Animations API (a FLIP) — both so it stays smooth in Safari, where the float's
+* popover top-layer repaint would jank a CSS-transition reflow.
+*
+* Tiles are positioned with `left`/`top` (not `transform`). dnd-kit's self-float
+* measures the source element's rect ignoring transforms and re-applies its current
+* transform each frame; a transform-positioned tile leans on that, but the
+* compensation is lost the instant the dragged element is swapped for a foreign one
+* mid-drag (grid → sortable interop — the tile becomes a flow card), which would
+* make the float jump by the tile's grid offset. Plain left/top has nothing to lose
+* on the swap, matching how dnd-kit's own flow-positioned sortables hand off cleanly.
 */
 function useGridItem(id, group) {
 	const controller = useResolveController(group);
@@ -799,14 +230,20 @@ 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),
 		group,
 		type: "grid-item",
 		accept: "grid-item",
+		collisionDetector: tileNeverTarget,
 		disabled: !config.isItemDraggable(id),
 		sensors: config.itemSensors,
 		modifiers: config.itemModifiers,
@@ -826,6 +263,7 @@ function useGridItem(id, group) {
 	const posTop = pos?.top;
 	const prev = (0, react.useRef)(null);
 	const reflowAnim = (0, react.useRef)(null);
+	const settleAnchor = (0, react.useRef)(null);
 	(0, react.useLayoutEffect)(() => {
 		const cur = posLeft != null && posTop != null ? {
 			left: posLeft,
@@ -834,17 +272,31 @@ function useGridItem(id, group) {
 		const before = prev.current;
 		prev.current = cur;
 		const el = elRef.current;
-		if (!el || !cur || !before || active || justDropped || !dragging) return;
+		if (!el || !cur) return;
+		if (active) {
+			settleAnchor.current = cur;
+			reflowAnim.current?.cancel();
+			return;
+		}
+		if (dragging) settleAnchor.current = null;
+		else if (settleAnchor.current) {
+			const a = settleAnchor.current;
+			reflowAnim.current?.cancel();
+			if (cur.left !== a.left || cur.top !== a.top) settleAnchor.current = null;
+			return;
+		}
+		if (!before || justDropped) return;
 		if (before.left === cur.left && before.top === cur.top) return;
+		if (typeof el.animate !== "function") 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;
+			fromX = before.left + m.m41;
+			fromY = before.top + m.m42;
 		}
 		reflowAnim.current?.cancel();
-		reflowAnim.current = el.animate([{ transform: `translate(${fromX}px, ${fromY}px)` }, { transform: `translate(${cur.left}px, ${cur.top}px)` }], {
+		reflowAnim.current = el.animate([{ transform: `translate(${fromX - cur.left}px, ${fromY - cur.top}px)` }, { transform: "translate(0px, 0px)" }], {
 			duration: 150,
 			easing: REFLOW_EASING
 		});
@@ -861,12 +313,11 @@ function useGridItem(id, group) {
 		handleRef,
 		style: pos ? {
 			position: "absolute",
-			left: 0,
-			top: 0,
+			left: pos.left,
+			top: pos.top,
 			width: pos.width,
 			height: pos.height,
-			transform: `translate(${pos.left}px, ${pos.top}px)`,
-			transition: active || justDropped || dragging ? "none" : REFLOW_TRANSITION,
+			transition: justDropped || dragging ? "none" : TILE_TRANSITION,
 			touchAction: "none"
 		} : {
 			position: "absolute",
@@ -914,17 +365,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
 	};
 }
@@ -1263,6 +715,12 @@ Object.defineProperty(exports, "PointerSensor", {
 });
 exports.ResponsiveGridLayout = ResponsiveGridLayout;
 exports.SnapGridGroup = SnapGridGroup;
+Object.defineProperty(exports, "defaultGridConfig", {
+	enumerable: true,
+	get: function() {
+		return _snapgridjs_core.defaultGridConfig;
+	}
+});
 Object.defineProperty(exports, "getCompactor", {
 	enumerable: true,
 	get: function() {
@@ -1275,12 +733,36 @@ Object.defineProperty(exports, "horizontalCompactor", {
 		return _snapgridjs_core.horizontalCompactor;
 	}
 });
+Object.defineProperty(exports, "insertItemWithCompactor", {
+	enumerable: true,
+	get: function() {
+		return _snapgridjs_core.insertItemWithCompactor;
+	}
+});
 Object.defineProperty(exports, "noCompactor", {
 	enumerable: true,
 	get: function() {
 		return _snapgridjs_core.noCompactor;
 	}
 });
+Object.defineProperty(exports, "removeItemWithCompactor", {
+	enumerable: true,
+	get: function() {
+		return _snapgridjs_core.removeItemWithCompactor;
+	}
+});
+Object.defineProperty(exports, "snapMove", {
+	enumerable: true,
+	get: function() {
+		return _snapgridjs_dnd.snapMove;
+	}
+});
+Object.defineProperty(exports, "toPositionParams", {
+	enumerable: true,
+	get: function() {
+		return _snapgridjs_core.toPositionParams;
+	}
+});
 exports.useContainerWidth = useContainerWidth;
 Object.defineProperty(exports, "useDraggable", {
 	enumerable: true,