dnd-manager 1.2.0 → 1.3.0

package/dist/index.mjs

@@ -1,21 +1,142 @@
+//#region src/auto-scroll.ts
+const SCROLLABLE_OVERFLOW = /^(auto|scroll|overlay)$/;
+/** Whether `element` may scroll on an axis: its overflow allows it and its content overflows. */
+function scrollsOn(element, style, axis) {
+	return axis === "y" ? SCROLLABLE_OVERFLOW.test(style.overflowY) && element.scrollHeight > element.clientHeight : SCROLLABLE_OVERFLOW.test(style.overflowX) && element.scrollWidth > element.clientWidth;
+}
+/** The step on one axis: toward the edge the pointer is near, if the scroller can still go there. */
+function stepOn(pointer, start, end, zone, speed, canGoBack, canGoForward) {
+	if (pointer < start + zone && canGoBack) return -speed;
+	if (pointer > end - zone && canGoForward) return speed;
+	return 0;
+}
+/**
+* Scrolls one step toward the edge the pointer is near: the closest scroll container around
+* `hit` (the element under the pointer) that can still scroll that way, or else the window.
+* Returns whether anything scrolled, so the caller keeps going while the pointer rests there.
+*/
+function autoScrollStep(pos, hit, { threshold, speed }) {
+	if (speed <= 0 || threshold <= 0) return false;
+	for (let element = hit; element; element = element.parentElement) {
+		if (element === document.body || element === document.documentElement) break;
+		const style = getComputedStyle(element);
+		const scrollsX = scrollsOn(element, style, "x");
+		const scrollsY = scrollsOn(element, style, "y");
+		if (!scrollsX && !scrollsY) continue;
+		const rect = element.getBoundingClientRect();
+		const left = scrollsX ? stepOn(pos.x, rect.left, rect.right, Math.min(threshold, rect.width / 4), speed, element.scrollLeft > 0, element.scrollLeft + element.clientWidth < element.scrollWidth - 1) : 0;
+		const top = scrollsY ? stepOn(pos.y, rect.top, rect.bottom, Math.min(threshold, rect.height / 4), speed, element.scrollTop > 0, element.scrollTop + element.clientHeight < element.scrollHeight - 1) : 0;
+		if (left !== 0 || top !== 0) {
+			element.scrollBy({
+				left,
+				top,
+				behavior: "instant"
+			});
+			return true;
+		}
+	}
+	const left = stepOn(pos.x, 0, window.innerWidth, threshold, speed, true, true);
+	const top = stepOn(pos.y, 0, window.innerHeight, threshold, speed, true, true);
+	if (left === 0 && top === 0) return false;
+	const before = [window.scrollX, window.scrollY];
+	window.scrollBy({
+		left,
+		top,
+		behavior: "instant"
+	});
+	return window.scrollX !== before[0] || window.scrollY !== before[1];
+}
+//#endregion
 //#region src/drag-drop-manager.ts
-var DragDropManager = class {
-	container;
-	config;
-	draggableKinds;
-	droppableKinds;
-	callbacks;
-	state = {
+/**
+* Framework-agnostic Drag and Drop Manager
+*
+* A data-driven drag-and-drop utility that works with React and vanilla JS.
+* Uses data attributes and direct DOM manipulation for optimal performance.
+*
+* @template TItem - The type of data associated with draggable items
+* @template TPosition - The type representing position/coordinates (e.g., {x, y}, {box, cell}, etc.)
+*/
+/**
+* Presses a manager took: with nested containers the inner manager hears the `pointerdown` first
+* and takes it, and the outer ones leave it alone.
+*/
+const claimedPresses = /* @__PURE__ */ new WeakSet();
+/** The pointer events of a press that a detached source still receives (see handlePointerDown). */
+const SOURCE_POINTER_EVENTS = [
+	"pointermove",
+	"pointerup",
+	"pointercancel"
+];
+/** Moves the boolean attribute `name` from `from` to `to`, and returns `to`. */
+function moveMark(name, from, to) {
+	if (from === to) return to;
+	from?.removeAttribute(name);
+	to?.setAttribute(name, "true");
+	return to;
+}
+function idleState() {
+	return {
 		startPosition: null,
 		sourceElement: null,
 		sourcePosition: null,
 		sourceItem: null,
 		activePointerId: null,
+		input: null,
 		isDragging: false,
-		lastHoveredElement: null
+		lastHoveredElement: null,
+		lastInvalidElement: null,
+		lastDropResult: null
 	};
+}
+const centerOf = (rect) => ({
+	x: rect.left + rect.width / 2,
+	y: rect.top + rect.height / 2
+});
+const ARROWS = {
+	ArrowLeft: {
+		axis: "x",
+		sign: -1
+	},
+	ArrowRight: {
+		axis: "x",
+		sign: 1
+	},
+	ArrowUp: {
+		axis: "y",
+		sign: -1
+	},
+	ArrowDown: {
+		axis: "y",
+		sign: 1
+	}
+};
+const isActionKey = (e) => (e.key === " " || e.key === "Enter") && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
+var DragDropManager = class {
+	container;
+	config;
+	draggableKinds;
+	droppableKinds;
+	callbacks;
+	state = idleState();
 	rafId = null;
 	lastPointerPos = null;
+	/**
+	* Set while a drag holds the pointer down: the browser follows the release with a native
+	* `click` (on the source element under pointer capture), which must not activate it.
+	*/
+	suppressClickOnRelease = false;
+	releaseClickBlocker = null;
+	/** The pending `dragDelay` of the current press. */
+	delayTimer = null;
+	activePointerType = "";
+	/** The droppable a keyboard drag points at. */
+	keyboardTarget = null;
+	/**
+	* The key that picked up or dropped: its `keyup` would activate a focused button (Space clicks
+	* on keyup), so it is swallowed.
+	*/
+	swallowKeyUp = null;
 	boundHandlers;
 	constructor(containerRef, config, callbacks) {
 		if (typeof containerRef === "string") {
@@ -28,13 +149,18 @@ var DragDropManager = class {
 		} else this.container = containerRef;
 		this.config = {
 			dragThreshold: config.dragThreshold ?? 10,
+			dragDelay: config.dragDelay ?? 0,
+			dragDelayTolerance: config.dragDelayTolerance ?? 5,
 			clickThreshold: config.clickThreshold ?? 10,
 			scrollThreshold: config.scrollThreshold ?? 100,
 			scrollSpeed: config.scrollSpeed ?? 10,
 			cancelOnEscape: config.cancelOnEscape ?? true,
 			cancelOnPointerLeave: config.cancelOnPointerLeave ?? true,
 			draggableKind: config.draggableKind,
-			droppableKind: config.droppableKind
+			droppableKind: config.droppableKind,
+			dropScope: config.dropScope ?? "document",
+			keyboard: config.keyboard ?? false,
+			focusOnPress: config.focusOnPress ?? false
 		};
 		this.draggableKinds = this.normalizeKindList(this.config.draggableKind);
 		this.droppableKinds = this.normalizeKindList(this.config.droppableKind);
@@ -45,44 +171,87 @@ var DragDropManager = class {
 			pointerUp: this.handlePointerUp.bind(this),
 			pointerCancel: this.handlePointerCancel.bind(this),
 			keyDown: this.handleKeyDown.bind(this),
-			mouseOut: this.handleMouseOut.bind(this)
+			mouseOut: this.handleMouseOut.bind(this),
+			touchMove: this.handleTouchMove.bind(this),
+			detachedSourcePointer: this.handleDetachedSourcePointer.bind(this),
+			contextMenu: this.handleContextMenu.bind(this),
+			preventDefault: (e) => e.preventDefault(),
+			pickUpKey: this.handlePickUpKey.bind(this),
+			keyboardDragKey: this.handleKeyboardDragKey.bind(this),
+			keyUp: this.handleKeyUp.bind(this),
+			focusOut: this.handleFocusOut.bind(this)
 		};
 		this.attachListeners();
 	}
 	attachListeners() {
 		this.container.addEventListener("pointerdown", this.boundHandlers.pointerDown);
-		this.container.addEventListener("pointermove", this.boundHandlers.pointerMove);
 		this.container.addEventListener("pointerup", this.boundHandlers.pointerUp);
 		this.container.addEventListener("pointercancel", this.boundHandlers.pointerCancel);
 		window.addEventListener("pointerup", this.boundHandlers.pointerUp);
 		window.addEventListener("pointercancel", this.boundHandlers.pointerCancel);
 		window.addEventListener("keydown", this.boundHandlers.keyDown);
 		window.addEventListener("mouseout", this.boundHandlers.mouseOut);
+		this.container.addEventListener("touchmove", this.boundHandlers.touchMove, { passive: false });
+		if (this.config.keyboard) {
+			this.container.addEventListener("keydown", this.boundHandlers.pickUpKey);
+			window.addEventListener("keydown", this.boundHandlers.keyboardDragKey, true);
+			window.addEventListener("keyup", this.boundHandlers.keyUp, true);
+			window.addEventListener("focusout", this.boundHandlers.focusOut, true);
+		}
+	}
+	/**
+	* The source position and item of the draggable `match`, if it may be dragged: it has a
+	* position, is not `data-empty`, `canDrag` allows it and it has item data.
+	*/
+	resolveSource(match) {
+		const position = this.callbacks.getItemPosition(match.element, match.kind);
+		if (!position) return null;
+		if (match.element.dataset.empty !== void 0) return null;
+		if (this.callbacks.canDrag && !this.callbacks.canDrag(match.element, position)) return null;
+		const item = this.callbacks.getItemData?.(match.element, position) ?? null;
+		if (!item) return null;
+		return {
+			position,
+			item
+		};
 	}
 	handlePointerDown(e) {
 		if (this.state.startPosition) return;
-		const target = e.target;
-		const draggableMatch = this.findElementByKinds(target, this.draggableKinds);
+		if (e.button !== 0 || e.pointerType === "touch" && !e.isPrimary) return;
+		if (claimedPresses.has(e)) return;
+		const draggableMatch = this.findElementByKinds(e.target, this.draggableKinds);
 		if (!draggableMatch) return;
-		const { element: draggableElement, kind: sourceKind } = draggableMatch;
-		const position = this.callbacks.getItemPosition(draggableElement, sourceKind);
-		if (!position) return;
-		if (draggableElement.dataset.empty !== void 0) return;
-		if (this.callbacks.canDrag && !this.callbacks.canDrag(draggableElement, position)) return;
-		const item = this.callbacks.getItemData?.(draggableElement, position) ?? null;
-		if (!item) return;
-		e.preventDefault();
+		const source = this.resolveSource(draggableMatch);
+		if (!source) return;
+		const draggableElement = draggableMatch.element;
+		claimedPresses.add(e);
+		if (!this.config.focusOnPress) e.preventDefault();
+		window.addEventListener("selectstart", this.boundHandlers.preventDefault, true);
+		window.addEventListener("dragstart", this.boundHandlers.preventDefault, true);
 		this.state.startPosition = {
 			x: e.clientX,
 			y: e.clientY
 		};
 		this.state.sourceElement = draggableElement;
-		this.state.sourcePosition = position;
-		this.state.sourceItem = item;
+		this.state.sourcePosition = source.position;
+		this.state.sourceItem = source.item;
+		this.state.input = "pointer";
 		this.state.activePointerId = this.getPointerId(e);
+		this.activePointerType = e.pointerType ?? "";
+		this.lastPointerPos = this.state.startPosition;
 		if (this.state.activePointerId !== null && typeof draggableElement.setPointerCapture === "function") try {
 			draggableElement.setPointerCapture(this.state.activePointerId);
 		} catch {}
+		window.addEventListener("pointermove", this.boundHandlers.pointerMove);
+		draggableElement.addEventListener("touchmove", this.boundHandlers.touchMove, { passive: false });
+		for (const type of SOURCE_POINTER_EVENTS) draggableElement.addEventListener(type, this.boundHandlers.detachedSourcePointer);
+		window.addEventListener("contextmenu", this.boundHandlers.contextMenu);
+		const delay = this.delayFor(this.activePointerType);
+		if (delay > 0) this.delayTimer = setTimeout(() => {
+			this.delayTimer = null;
+			this.startDrag();
+			this.scheduleFrame();
+		}, delay);
 	}
 	handlePointerMove(e) {
 		if (!this.isActivePointer(e)) return;
@@ -91,36 +260,82 @@ var DragDropManager = class {
 			y: e.clientY
 		};
 		if (this.state.startPosition && !this.state.isDragging) {
-			if (this.getDistance(this.state.startPosition, currentPos) >= this.config.dragThreshold) {
-				this.state.isDragging = true;
-				if (this.state.sourceElement && this.state.sourcePosition && this.state.sourceItem) {
-					this.state.sourceElement.setAttribute("data-dragging", "true");
-					this.callbacks.onDragStart?.(this.state.sourceElement, this.state.sourcePosition, this.state.sourceItem);
-				}
+			const distance = this.getDistance(this.state.startPosition, currentPos);
+			if (this.delayTimer !== null) {
+				if (distance > this.config.dragDelayTolerance) this.cleanup();
+				else this.lastPointerPos = currentPos;
+				return;
 			}
+			if (distance >= this.config.dragThreshold) this.startDrag();
 			return;
 		}
 		if (!this.state.isDragging) return;
 		this.lastPointerPos = currentPos;
-		if (this.rafId === null) this.rafId = requestAnimationFrame(() => {
+		this.scheduleFrame();
+	}
+	startDrag() {
+		this.state.isDragging = true;
+		this.suppressClickOnRelease = this.state.input === "pointer";
+		if (this.state.sourceElement && this.state.sourcePosition && this.state.sourceItem) {
+			this.state.sourceElement.setAttribute("data-dragging", "true");
+			this.callbacks.onDragStart?.(this.state.sourceElement, this.state.sourcePosition, this.state.sourceItem);
+		}
+	}
+	/** The `dragDelay` for a pointer type (`''` from a constructed event counts as a mouse). */
+	delayFor(pointerType) {
+		const { dragDelay } = this.config;
+		if (typeof dragDelay === "number") return dragDelay;
+		return dragDelay[pointerType === "touch" || pointerType === "pen" ? pointerType : "mouse"] ?? 0;
+	}
+	/**
+	* Once a touch press is a drag, the finger moves the item, not the page: a browser that starts
+	* panning would cancel the pointer. Before that, touches stay the browser's.
+	*/
+	handleTouchMove(e) {
+		if (this.state.isDragging && e.cancelable) e.preventDefault();
+	}
+	/**
+	* The press's pointer events, heard on the source itself. While it is in the DOM they also reach
+	* the window's listeners, which handle them; once it is detached only these hear them.
+	*/
+	handleDetachedSourcePointer(e) {
+		if (this.state.sourceElement?.isConnected !== false) return;
+		if (e.type === "pointermove") this.handlePointerMove(e);
+		else if (e.type === "pointerup") this.handlePointerUp(e);
+		else this.handlePointerCancel();
+	}
+	/** A long press opens no context menu (Android, iOS) while it is a drag or about to be one. */
+	handleContextMenu(e) {
+		const pendingTouch = this.delayTimer !== null && this.activePointerType === "touch";
+		if (this.state.isDragging || pendingTouch) e.preventDefault();
+	}
+	scheduleFrame() {
+		if (this.rafId !== null) return;
+		this.rafId = requestAnimationFrame(() => {
 			this.rafId = null;
-			if (!this.lastPointerPos) return;
-			const pos = this.lastPointerPos;
-			const elementUnderCursor = document.elementFromPoint(pos.x, pos.y);
-			const droppableElement = this.findElementByKinds(elementUnderCursor, this.droppableKinds)?.element ?? null;
-			if (droppableElement !== this.state.lastHoveredElement) {
-				if (this.state.lastHoveredElement) this.state.lastHoveredElement.removeAttribute("data-hovered");
-				if (droppableElement) {
-					droppableElement.setAttribute("data-hovered", "true");
-					this.state.lastHoveredElement = droppableElement;
-				} else this.state.lastHoveredElement = null;
-			}
-			this.handleAutoScroll(pos);
-			this.callbacks.onDragMove?.(pos, this.state.lastHoveredElement);
+			this.runFrame();
+		});
+	}
+	/** One drag frame: hover feedback, auto-scroll and `onDragMove` at the latest pointer position. */
+	runFrame() {
+		const pos = this.lastPointerPos;
+		if (!pos || !this.state.isDragging) return;
+		const elementUnderCursor = document.elementFromPoint(pos.x, pos.y);
+		this.markTarget(this.findDroppable(elementUnderCursor));
+		const scrolled = autoScrollStep(pos, elementUnderCursor, {
+			threshold: this.config.scrollThreshold,
+			speed: this.config.scrollSpeed
 		});
+		this.callbacks.onDragMove?.(pos, this.state.lastHoveredElement);
+		if (scrolled) this.scheduleFrame();
 	}
 	handlePointerUp(e) {
+		if (this.state.input === "keyboard") return;
 		if (!this.isActivePointer(e)) return;
+		if (this.suppressClickOnRelease) {
+			this.suppressClickOnRelease = false;
+			this.blockNextClick();
+		}
 		if (this.state.startPosition && !this.state.isDragging) {
 			const currentPos = {
 				x: e.clientX,
@@ -135,15 +350,24 @@ var DragDropManager = class {
 			return;
 		}
 		const target = document.elementFromPoint(e.clientX, e.clientY);
-		const droppableMatch = this.findElementByKinds(target, this.droppableKinds);
-		const droppableElement = droppableMatch?.element ?? null;
-		if (droppableElement && droppableMatch) {
-			const targetPosition = this.callbacks.getItemPosition(droppableElement, droppableMatch.kind);
-			if (targetPosition) this.callbacks.onDrop?.(this.state.sourcePosition, targetPosition, this.state.sourceItem);
+		const droppableMatch = this.findDroppable(target);
+		if ((droppableMatch?.element ?? null) && droppableMatch) {
+			const targetPosition = this.acceptedPosition(droppableMatch);
+			if (targetPosition) {
+				const result = {
+					sourcePosition: this.state.sourcePosition,
+					targetPosition,
+					sourceItem: this.state.sourceItem
+				};
+				this.state.lastDropResult = result;
+				this.callbacks.onDrop?.(result.sourcePosition, result.targetPosition, result.sourceItem);
+			}
 		}
 		this.cleanup();
 	}
 	handlePointerCancel() {
+		if (this.state.input === "keyboard") return;
+		this.suppressClickOnRelease = false;
 		this.cleanup();
 	}
 	handleKeyDown(e) {
@@ -153,44 +377,162 @@ var DragDropManager = class {
 		this.cleanup();
 	}
 	handleMouseOut(e) {
-		if (!this.config.cancelOnPointerLeave) return;
-		if (!this.state.startPosition) return;
 		if (e.relatedTarget !== null) return;
+		this.suppressClickOnRelease = false;
+		if (!this.config.cancelOnPointerLeave) return;
+		if (this.state.input !== "pointer") return;
+		this.cleanup();
+	}
+	/** Space or Enter on a focused draggable picks it up (`keyboard: true`). */
+	handlePickUpKey(e) {
+		if (this.state.startPosition || e.repeat || !isActionKey(e) || claimedPresses.has(e)) return;
+		const match = this.findElementByKinds(e.target, this.draggableKinds);
+		if (!match) return;
+		const source = this.resolveSource(match);
+		if (!source) return;
+		claimedPresses.add(e);
+		e.preventDefault();
+		this.swallowKeyUp = e.key;
+		this.state.startPosition = centerOf(match.element.getBoundingClientRect());
+		this.state.sourceElement = match.element;
+		this.state.sourcePosition = source.position;
+		this.state.sourceItem = source.item;
+		this.state.input = "keyboard";
+		this.startDrag();
+		this.pointKeyboardAt(this.findDroppable(match.element));
+	}
+	/** The keys of a keyboard drag, ahead of anything else on the page. */
+	handleKeyboardDragKey(e) {
+		if (this.state.input !== "keyboard") {
+			if (!e.repeat) this.swallowKeyUp = null;
+			return;
+		}
+		const arrow = ARROWS[e.key];
+		if (arrow) this.pointKeyboardAt(this.nearestDroppable(arrow.axis, arrow.sign) ?? this.keyboardTarget);
+		else if (isActionKey(e)) {
+			this.swallowKeyUp = e.key;
+			if (!e.repeat) this.dropWithKeyboard();
+		} else if (e.key === "Escape") this.cleanup();
+		else return;
+		e.preventDefault();
+		e.stopPropagation();
+	}
+	handleKeyUp(e) {
+		if (this.swallowKeyUp === null || e.key !== this.swallowKeyUp) return;
+		this.swallowKeyUp = null;
+		e.preventDefault();
+		e.stopPropagation();
+	}
+	/** Focus leaving the source (Tab, a click elsewhere) cancels a keyboard drag. */
+	handleFocusOut(e) {
+		const source = this.state.sourceElement;
+		if (this.state.input !== "keyboard" || !source) return;
+		if (!source.contains(e.target)) return;
+		if (source.contains(e.relatedTarget)) return;
+		this.cleanup();
+	}
+	/** Makes `match` the keyboard drag's target: marked, scrolled into view, sent to `onDragMove`. */
+	pointKeyboardAt(match) {
+		this.keyboardTarget = match;
+		this.markTarget(match);
+		if (!match) return;
+		match.element.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+		this.callbacks.onDragMove?.(centerOf(match.element.getBoundingClientRect()), this.state.lastHoveredElement);
+	}
+	/**
+	* The droppable nearest the current target (or the source) in a direction: its center lies that
+	* way, and it is closest along the axis, with distance across the axis counting double, so the
+	* next cell in the same row or column wins over a diagonal one.
+	*/
+	nearestDroppable(axis, sign) {
+		const from = this.keyboardTarget?.element ?? this.state.sourceElement;
+		if (!from) return null;
+		const origin = centerOf(from.getBoundingClientRect());
+		const root = this.config.dropScope === "container" ? this.container : document;
+		let best = null;
+		let bestScore = Infinity;
+		for (const element of root.querySelectorAll("[data-kind]")) {
+			const kind = element.dataset.kind;
+			if (!kind || element === from || !this.droppableKinds.includes(kind)) continue;
+			const rect = element.getBoundingClientRect();
+			if (rect.width === 0 && rect.height === 0) continue;
+			const center = centerOf(rect);
+			const along = (axis === "x" ? center.x - origin.x : center.y - origin.y) * sign;
+			const across = Math.abs(axis === "x" ? center.y - origin.y : center.x - origin.x);
+			if (along < 1) continue;
+			const score = along + across * 2;
+			if (score < bestScore) {
+				best = {
+					element,
+					kind
+				};
+				bestScore = score;
+			}
+		}
+		return best;
+	}
+	/** Drops a keyboard drag on its target, unless there is none or `canDrop` rejects it. */
+	dropWithKeyboard() {
+		const target = this.keyboardTarget;
+		const targetPosition = target && this.acceptedPosition(target);
+		const { sourcePosition, sourceItem } = this.state;
+		if (!targetPosition || sourcePosition === null || sourceItem === null) return;
+		this.state.lastDropResult = {
+			sourcePosition,
+			targetPosition,
+			sourceItem
+		};
+		this.callbacks.onDrop?.(sourcePosition, targetPosition, sourceItem);
 		this.cleanup();
 	}
-	handleAutoScroll(pos) {
-		const { scrollThreshold, scrollSpeed } = this.config;
-		const viewportWidth = window.innerWidth;
-		const viewportHeight = window.innerHeight;
-		let scrollX = 0;
-		let scrollY = 0;
-		if (pos.x < scrollThreshold) scrollX = -scrollSpeed;
-		else if (pos.x > viewportWidth - scrollThreshold) scrollX = scrollSpeed;
-		if (pos.y < scrollThreshold) scrollY = -scrollSpeed;
-		else if (pos.y > viewportHeight - scrollThreshold) scrollY = scrollSpeed;
-		if (scrollX !== 0 || scrollY !== 0) window.scrollBy(scrollX, scrollY);
+	/**
+	* Swallows the `click` the browser dispatches right after the release that ended a drag, in the
+	* same task; a timeout lets the blocker go when no click comes.
+	*/
+	blockNextClick() {
+		this.releaseClickBlocker?.();
+		const block = (event) => {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			release();
+		};
+		const release = () => {
+			window.removeEventListener("click", block, true);
+			clearTimeout(timer);
+			if (this.releaseClickBlocker === release) this.releaseClickBlocker = null;
+		};
+		window.addEventListener("click", block, true);
+		const timer = setTimeout(release, 0);
+		this.releaseClickBlocker = release;
 	}
 	cleanup() {
+		window.removeEventListener("pointermove", this.boundHandlers.pointerMove);
+		this.state.sourceElement?.removeEventListener("touchmove", this.boundHandlers.touchMove);
+		for (const type of SOURCE_POINTER_EVENTS) this.state.sourceElement?.removeEventListener(type, this.boundHandlers.detachedSourcePointer);
+		window.removeEventListener("contextmenu", this.boundHandlers.contextMenu);
+		window.removeEventListener("selectstart", this.boundHandlers.preventDefault, true);
+		window.removeEventListener("dragstart", this.boundHandlers.preventDefault, true);
+		if (this.delayTimer !== null) {
+			clearTimeout(this.delayTimer);
+			this.delayTimer = null;
+		}
+		this.activePointerType = "";
 		if (this.state.sourceElement && this.state.activePointerId !== null && typeof this.state.sourceElement.hasPointerCapture === "function" && typeof this.state.sourceElement.releasePointerCapture === "function" && this.state.sourceElement.hasPointerCapture(this.state.activePointerId)) try {
 			this.state.sourceElement.releasePointerCapture(this.state.activePointerId);
 		} catch {}
 		if (this.state.sourceElement) this.state.sourceElement.removeAttribute("data-dragging");
-		if (this.state.lastHoveredElement) this.state.lastHoveredElement.removeAttribute("data-hovered");
+		this.markTarget(null);
 		if (this.rafId !== null) {
 			cancelAnimationFrame(this.rafId);
 			this.rafId = null;
 		}
-		if (this.state.isDragging) this.callbacks.onDragEnd?.();
-		this.state = {
-			startPosition: null,
-			sourceElement: null,
-			sourcePosition: null,
-			sourceItem: null,
-			activePointerId: null,
-			isDragging: false,
-			lastHoveredElement: null
-		};
+		if (this.state.isDragging) this.callbacks.onDragEnd?.(this.state.lastDropResult);
+		this.state = idleState();
 		this.lastPointerPos = null;
+		this.keyboardTarget = null;
 	}
 	getPointerId(e) {
 		return typeof e.pointerId === "number" ? e.pointerId : null;
@@ -201,8 +543,31 @@ var DragDropManager = class {
 		return pointerId === null || pointerId === this.state.activePointerId;
 	}
 	normalizeKindList(kinds) {
-		const values = Array.isArray(kinds) ? kinds : [kinds];
-		return [...new Set(values.map((value) => value.trim()).filter(Boolean))];
+		return [...new Set((Array.isArray(kinds) ? kinds : [kinds]).map((value) => value.trim()).filter(Boolean))];
+	}
+	/** The target position of the droppable `match` if the current source may drop there. */
+	acceptedPosition(match) {
+		const { sourcePosition, sourceItem } = this.state;
+		const targetPosition = this.callbacks.getItemPosition(match.element, match.kind);
+		if (targetPosition === null || sourcePosition === null || sourceItem === null) return null;
+		if (this.callbacks.canDrop && !this.callbacks.canDrop(sourcePosition, targetPosition, sourceItem)) return null;
+		return targetPosition;
+	}
+	/**
+	* Marks the droppable under the pointer: `data-hovered` when it would receive a drop (also the
+	* source itself, for "drag over itself" styling), `data-drop-invalid` when `canDrop` rejects it.
+	* Without `canDrop` every droppable is marked hovered.
+	*/
+	markTarget(match) {
+		const accepted = match && (!this.callbacks.canDrop || this.acceptedPosition(match) !== null) ? match.element : null;
+		const rejected = match && !accepted ? match.element : null;
+		this.state.lastHoveredElement = moveMark("data-hovered", this.state.lastHoveredElement, accepted);
+		this.state.lastInvalidElement = moveMark("data-drop-invalid", this.state.lastInvalidElement, rejected);
+	}
+	/** The droppable around `element` (the one under the pointer), within `dropScope`. */
+	findDroppable(element) {
+		if (this.config.dropScope === "container" && !(element && this.container.contains(element))) return null;
+		return this.findElementByKinds(element, this.droppableKinds);
 	}
 	/**
 	* Find closest ancestor element with a `data-kind` matching any expected kind.
@@ -242,20 +607,43 @@ var DragDropManager = class {
 	*/
 	destroy() {
 		this.cleanup();
+		this.suppressClickOnRelease = false;
+		this.releaseClickBlocker?.();
 		this.container.removeEventListener("pointerdown", this.boundHandlers.pointerDown);
-		this.container.removeEventListener("pointermove", this.boundHandlers.pointerMove);
 		this.container.removeEventListener("pointerup", this.boundHandlers.pointerUp);
 		this.container.removeEventListener("pointercancel", this.boundHandlers.pointerCancel);
+		this.container.removeEventListener("touchmove", this.boundHandlers.touchMove);
 		window.removeEventListener("pointerup", this.boundHandlers.pointerUp);
 		window.removeEventListener("pointercancel", this.boundHandlers.pointerCancel);
 		window.removeEventListener("keydown", this.boundHandlers.keyDown);
 		window.removeEventListener("mouseout", this.boundHandlers.mouseOut);
+		if (this.config.keyboard) {
+			this.container.removeEventListener("keydown", this.boundHandlers.pickUpKey);
+			window.removeEventListener("keydown", this.boundHandlers.keyboardDragKey, true);
+			window.removeEventListener("keyup", this.boundHandlers.keyUp, true);
+			window.removeEventListener("focusout", this.boundHandlers.focusOut, true);
+		}
 	}
 };
-
 //#endregion
 //#region src/drag-preview-controller.ts
 const OFFSCREEN_TRANSFORM = "translate(-9999px, -9999px)";
+/**
+* Attributes of the source (and its descendants) that belong to its place in the page or to the
+* drag, not to its look: a clone keeping them would duplicate ids, join radio groups, count as a
+* draggable or droppable, and match `[data-dragging]` placeholder styles.
+*/
+const SOURCE_ONLY_ATTRIBUTES = [
+	"id",
+	"name",
+	"data-kind",
+	"data-dragging",
+	"data-hovered",
+	"data-drop-invalid"
+];
+function stripSourceAttributes(clone) {
+	for (const element of [clone, ...clone.querySelectorAll("*")]) for (const name of SOURCE_ONLY_ATTRIBUTES) element.removeAttribute(name);
+}
 function normalizeClassNames(className) {
 	if (!className) return [];
 	return Array.isArray(className) ? className : [className];
@@ -279,7 +667,10 @@ var DragPreviewController = class {
 		const clone = element.cloneNode(true);
 		const computed = window.getComputedStyle(element);
 		const appendTo = this.options.appendTo ?? document.body;
+		stripSourceAttributes(clone);
+		clone.setAttribute("inert", "");
 		clone.setAttribute("aria-hidden", "true");
+		clone.setAttribute("data-drag-preview", "");
 		clone.style.position = "fixed";
 		clone.style.left = "0";
 		clone.style.top = "0";
@@ -315,7 +706,7 @@ var DragPreviewController = class {
 		this.stop();
 	}
 };
-
 //#endregion
 export { DragDropManager, DragPreviewController };
+
 //# sourceMappingURL=index.mjs.map