dnd-manager 1.0.0 → 1.2.0

package/README.md

@@ -1,14 +1,99 @@
 # dnd-manager
 
-Simple, performant, and data-driven Drag-and-Drop library for vanilla JS, and compatible with any framework.
+Simple, performant, and data-driven Drag-and-Drop library for vanilla JS, compatible with any
+framework, and designed for developers who want full control over drag-and-drop UX without being
+locked into specific component patterns or opinionated libraries.
 
-This document provides practical examples of using `DragDropManager` in both vanilla
-JavaScript and React applications.
+This document provides practical examples of using the library in both vanilla JavaScript and React
+applications.
 
 ## Table of Contents
 
-1. [Vanilla JavaScript Example](#vanilla-javascript-example)
-2. [React Example](#react-example)
+1. [Installation](#installation)
+2. [Clone Preview Helper](#clone-preview-helper)
+3. [Vanilla JavaScript Example](#vanilla-javascript-example)
+4. [React Example](#react-example)
+
+---
+
+## Installation
+
+```bash
+pnpm add dnd-manager
+```
+
+Or with npm/yarn:
+
+```bash
+npm install dnd-manager
+yarn add dnd-manager
+```
+
+---
+
+## Clone Preview Helper
+
+Use `new DragPreviewController()` to get a clone of the dragged element that follows the cursor with
+`position: fixed`, `pointer-events: none`, and transform-based movement.
+
+```typescript
+import {
+  DragPreviewController,
+  DragDropManager,
+  type DragDropCallbacks,
+  type PointerPosition,
+} from 'dnd-manager'
+
+type Item = { index: number }
+type Position = { index: number }
+
+const preview = new DragPreviewController({
+  zIndex: 9999,
+  opacity: 0.95,
+  className: 'drop-shadow-xl',
+})
+
+const callbacks: DragDropCallbacks<Item, Position> = {
+  getItemPosition: (element) => {
+    const raw = element.dataset.index
+    if (!raw) return null
+    const index = Number.parseInt(raw, 10)
+    return Number.isFinite(index) ? { index } : null
+  },
+
+  getItemData: (_element, pos) => ({ index: pos.index }),
+
+  onDragStart: (element) => {
+    preview.startFromElement(element)
+  },
+
+  onDragMove: (pos: PointerPosition) => {
+    preview.moveToPointer(pos)
+  },
+
+  onDragEnd: () => {
+    preview.stop()
+  },
+}
+
+const manager = new DragDropManager<Item, Position>(
+  '#container',
+  {
+    draggableKind: 'ITEM',
+    droppableKind: 'ITEM',
+  },
+  callbacks,
+)
+
+// Important cleanup for unmount/page teardown.
+function cleanup() {
+  preview.destroy()
+  manager.destroy()
+}
+```
+
+This helper uses the clone-in-`document.body` pattern to avoid drift in scrolled containers and
+keeps cursor tracking smooth via transform updates.
 
 ---
 
@@ -199,7 +284,7 @@ data to the console, and dragging shows a preview element following the cursor.
 **TypeScript (app.ts):**
 
 ```typescript
-import { DragDropManager, type DragDropCallbacks } from './drag-drop-manager'
+import { DragDropManager, type DragDropCallbacks } from 'dnd-manager'
 
 // Types
 type GridItem = {
@@ -222,11 +307,6 @@ function initDragDropGrid(): void {
 
   // Setup DragDropManager callbacks
   const callbacks: DragDropCallbacks<GridItem, GridPosition> = {
-    canDrag: (element, position) => {
-      // Can only drag non-empty cells
-      return element.dataset.empty === undefined
-    },
-
     getItemPosition: (element, kind) => {
       const row = element.dataset.row
       const col = element.dataset.col
@@ -343,6 +423,8 @@ function initDragDropGrid(): void {
       clickThreshold: 10,
       scrollThreshold: 100,
       scrollSpeed: 10,
+      cancelOnEscape: true,
+      cancelOnPointerLeave: true,
     },
     callbacks,
   )
@@ -365,7 +447,7 @@ This example shows the same draggable grid implemented as a React component with
 
 ```typescript
 import { useEffect, useRef, useState } from 'react'
-import { DragDropManager, type DragDropCallbacks } from './drag-drop-manager'
+import { DragDropManager, type DragDropCallbacks } from 'dnd-manager'
 
 // Types
 type GridItem = {
@@ -479,10 +561,6 @@ export function DraggableGrid() {
 
     // Setup callbacks
     const callbacks: DragDropCallbacks<GridItem, GridPosition> = {
-      canDrag: (element, position) => {
-        return element.dataset.empty === undefined
-      },
-
       getItemPosition: (element, kind) => {
         const row = element.dataset.row
         const col = element.dataset.col
@@ -557,6 +635,8 @@ export function DraggableGrid() {
         clickThreshold: 10,
         scrollThreshold: 100,
         scrollSpeed: 10,
+        cancelOnEscape: true,
+        cancelOnPointerLeave: true,
       },
       callbacks,
     )
@@ -741,7 +821,7 @@ function DragPreview({ item, position, width, height }: DragPreviewProps) {
 
 ### DragDropManager Features Used:
 
-- `canDrag` - Prevents dragging empty cells
+- `data-empty` convention - Elements with `data-empty` are automatically treated as non-draggable
 - `getItemPosition` - Extracts grid coordinates from data attributes
 - `getItemData` - Retrieves item data from grid state
 - `onDragStart` - Shows preview and updates source appearance
@@ -753,10 +833,14 @@ function DragPreview({ item, position, width, height }: DragPreviewProps) {
 
 ### Configuration:
 
+- `draggableKind` / `droppableKind` - Accept `string` or `string[]` to match one or many kinds. Each
+  element should still expose a single `data-kind` value.
 - `dragThreshold: 10` - Prevents accidental drags
 - `clickThreshold: 10` - Distinguishes clicks from drags
 - `scrollThreshold: 100` - Auto-scroll near viewport edges
 - `scrollSpeed: 10` - Smooth scroll speed
+- `cancelOnEscape: true` - Cancels active drag when Escape is pressed
+- `cancelOnPointerLeave: true` - Cancels active drag if pointer leaves the window
 
 ---
 

package/dist/index.d.mts

@@ -47,23 +47,40 @@ type DragDropConfig = {
    */
   scrollSpeed?: number;
   /**
-   * The `data-kind` attribute value for draggable elements.
-   * Elements with this attribute can be picked up and dragged.
+   * Cancel the current drag operation when Escape is pressed.
+   * Useful for explicit keyboard cancellation.
+   * @default true
+   */
+  cancelOnEscape?: boolean;
+  /**
+   * Cancel the current drag operation when the pointer leaves the browser window.
+   * Prevents "stuck dragging" when pointerup happens outside the app/window.
+   * @default true
+   */
+  cancelOnPointerLeave?: boolean;
+  /**
+   * The `data-kind` value(s) for draggable elements.
+   * Can be a single kind or multiple kinds.
+   * Each draggable element should still expose a single `data-kind` value.
    * @example
    * draggableKind: 'cell'       // <div data-kind="cell">
+   * draggableKind: ['quest', 'bounty'] // <div data-kind="quest">
    * draggableKind: 'card'       // <div data-kind="card">
    * draggableKind: 'list-item'  // <div data-kind="list-item">
    */
-  draggableKind: string;
+  draggableKind: string | string[];
   /**
-   * The `data-kind` attribute value for droppable target elements.
-   * Elements with this attribute can receive dropped items.
+   * The `data-kind` value(s) for droppable target elements.
+   * Can be a single kind or multiple kinds.
+   * Elements with matching kinds can receive dropped items.
+   * Each droppable element should still expose a single `data-kind` value.
    * Often the same as `draggableKind` for reorderable lists.
    * @example
    * droppableKind: 'cell'   // Can drop on cells
+   * droppableKind: ['quest', 'bounty'] // Can drop on either kind
    * droppableKind: 'zone'   // Can drop on zones
    */
-  droppableKind: string;
+  droppableKind: string | string[];
 };
 type PointerPosition = {
   x: number;
@@ -84,12 +101,15 @@ type DragState<TItem, TPosition> = {
   sourceElement: HTMLElement | null;
   sourcePosition: TPosition | null;
   sourceItem: TItem | null;
+  activePointerId: number | null;
   isDragging: boolean;
   lastHoveredElement: HTMLElement | null;
 };
 declare class DragDropManager<TItem = unknown, TPosition = unknown> {
   private container;
   private config;
+  private draggableKinds;
+  private droppableKinds;
   private callbacks;
   private state;
   private rafId;
@@ -103,12 +123,17 @@ declare class DragDropManager<TItem = unknown, TPosition = unknown> {
   private handlePointerMove;
   private handlePointerUp;
   private handlePointerCancel;
+  private handleKeyDown;
+  private handleMouseOut;
   private handleAutoScroll;
   private cleanup;
+  private getPointerId;
+  private isActivePointer;
+  private normalizeKindList;
   /**
-   * Find closest ancestor element with matching data-kind attribute
+   * Find closest ancestor element with a `data-kind` matching any expected kind.
    */
-  private findElementByKind;
+  private findElementByKinds;
   /**
    * Calculate distance between two points
    */
@@ -127,5 +152,24 @@ declare class DragDropManager<TItem = unknown, TPosition = unknown> {
   destroy(): void;
 }
 //#endregion
-export { type DragDropCallbacks, type DragDropConfig, DragDropManager, type PointerPosition };
+//#region src/drag-preview-controller.d.ts
+type DragPreviewControllerOptions = {
+  zIndex?: number;
+  opacity?: number;
+  centerOnCursor?: boolean;
+  className?: string | string[];
+  copyComputedStyles?: string[];
+  appendTo?: HTMLElement;
+};
+declare class DragPreviewController {
+  private options;
+  private previewElement;
+  constructor(options?: DragPreviewControllerOptions);
+  startFromElement(element: HTMLElement): void;
+  moveToPointer(pos: PointerPosition): void;
+  stop(): void;
+  destroy(): void;
+}
+//#endregion
+export { type DragDropCallbacks, type DragDropConfig, DragDropManager, DragPreviewController, type DragPreviewControllerOptions, type PointerPosition };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -2,12 +2,15 @@
 var DragDropManager = class {
 	container;
 	config;
+	draggableKinds;
+	droppableKinds;
 	callbacks;
 	state = {
 		startPosition: null,
 		sourceElement: null,
 		sourcePosition: null,
 		sourceItem: null,
+		activePointerId: null,
 		isDragging: false,
 		lastHoveredElement: null
 	};
@@ -28,15 +31,21 @@ var DragDropManager = class {
 			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
 		};
+		this.draggableKinds = this.normalizeKindList(this.config.draggableKind);
+		this.droppableKinds = this.normalizeKindList(this.config.droppableKind);
 		this.callbacks = callbacks;
 		this.boundHandlers = {
 			pointerDown: this.handlePointerDown.bind(this),
 			pointerMove: this.handlePointerMove.bind(this),
 			pointerUp: this.handlePointerUp.bind(this),
-			pointerCancel: this.handlePointerCancel.bind(this)
+			pointerCancel: this.handlePointerCancel.bind(this),
+			keyDown: this.handleKeyDown.bind(this),
+			mouseOut: this.handleMouseOut.bind(this)
 		};
 		this.attachListeners();
 	}
@@ -45,12 +54,18 @@ var DragDropManager = class {
 		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);
 	}
 	handlePointerDown(e) {
+		if (this.state.startPosition) return;
 		const target = e.target;
-		const draggableElement = this.findElementByKind(target, this.config.draggableKind);
-		if (!draggableElement) return;
-		const position = this.callbacks.getItemPosition(draggableElement, this.config.draggableKind);
+		const draggableMatch = this.findElementByKinds(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;
@@ -64,8 +79,13 @@ var DragDropManager = class {
 		this.state.sourceElement = draggableElement;
 		this.state.sourcePosition = position;
 		this.state.sourceItem = item;
+		this.state.activePointerId = this.getPointerId(e);
+		if (this.state.activePointerId !== null && typeof draggableElement.setPointerCapture === "function") try {
+			draggableElement.setPointerCapture(this.state.activePointerId);
+		} catch {}
 	}
 	handlePointerMove(e) {
+		if (!this.isActivePointer(e)) return;
 		const currentPos = {
 			x: e.clientX,
 			y: e.clientY
@@ -87,7 +107,7 @@ var DragDropManager = class {
 			if (!this.lastPointerPos) return;
 			const pos = this.lastPointerPos;
 			const elementUnderCursor = document.elementFromPoint(pos.x, pos.y);
-			const droppableElement = this.findElementByKind(elementUnderCursor, this.config.droppableKind);
+			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) {
@@ -100,6 +120,7 @@ var DragDropManager = class {
 		});
 	}
 	handlePointerUp(e) {
+		if (!this.isActivePointer(e)) return;
 		if (this.state.startPosition && !this.state.isDragging) {
 			const currentPos = {
 				x: e.clientX,
@@ -114,9 +135,10 @@ var DragDropManager = class {
 			return;
 		}
 		const target = document.elementFromPoint(e.clientX, e.clientY);
-		const droppableElement = this.findElementByKind(target, this.config.droppableKind);
-		if (droppableElement) {
-			const targetPosition = this.callbacks.getItemPosition(droppableElement, this.config.droppableKind);
+		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);
 		}
 		this.cleanup();
@@ -124,6 +146,18 @@ var DragDropManager = class {
 	handlePointerCancel() {
 		this.cleanup();
 	}
+	handleKeyDown(e) {
+		if (!this.config.cancelOnEscape) return;
+		if (e.key !== "Escape") return;
+		if (!this.state.startPosition) return;
+		this.cleanup();
+	}
+	handleMouseOut(e) {
+		if (!this.config.cancelOnPointerLeave) return;
+		if (!this.state.startPosition) return;
+		if (e.relatedTarget !== null) return;
+		this.cleanup();
+	}
 	handleAutoScroll(pos) {
 		const { scrollThreshold, scrollSpeed } = this.config;
 		const viewportWidth = window.innerWidth;
@@ -137,6 +171,9 @@ var DragDropManager = class {
 		if (scrollX !== 0 || scrollY !== 0) window.scrollBy(scrollX, scrollY);
 	}
 	cleanup() {
+		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");
 		if (this.rafId !== null) {
@@ -149,18 +186,35 @@ var DragDropManager = class {
 			sourceElement: null,
 			sourcePosition: null,
 			sourceItem: null,
+			activePointerId: null,
 			isDragging: false,
 			lastHoveredElement: null
 		};
 		this.lastPointerPos = null;
 	}
+	getPointerId(e) {
+		return typeof e.pointerId === "number" ? e.pointerId : null;
+	}
+	isActivePointer(e) {
+		if (this.state.activePointerId === null) return true;
+		const pointerId = this.getPointerId(e);
+		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))];
+	}
 	/**
-	* Find closest ancestor element with matching data-kind attribute
+	* Find closest ancestor element with a `data-kind` matching any expected kind.
 	*/
-	findElementByKind(element, kind) {
+	findElementByKinds(element, kinds) {
 		let current = element;
 		while (current && current !== this.container) {
-			if (current.dataset.kind === kind) return current;
+			const elementKind = current.dataset.kind;
+			if (elementKind && kinds.includes(elementKind)) return {
+				element: current,
+				kind: elementKind
+			};
 			current = current.parentElement;
 		}
 		return null;
@@ -192,9 +246,76 @@ var DragDropManager = class {
 		this.container.removeEventListener("pointermove", this.boundHandlers.pointerMove);
 		this.container.removeEventListener("pointerup", this.boundHandlers.pointerUp);
 		this.container.removeEventListener("pointercancel", this.boundHandlers.pointerCancel);
+		window.removeEventListener("pointerup", this.boundHandlers.pointerUp);
+		window.removeEventListener("pointercancel", this.boundHandlers.pointerCancel);
+		window.removeEventListener("keydown", this.boundHandlers.keyDown);
+		window.removeEventListener("mouseout", this.boundHandlers.mouseOut);
+	}
+};
+
+//#endregion
+//#region src/drag-preview-controller.ts
+const OFFSCREEN_TRANSFORM = "translate(-9999px, -9999px)";
+function normalizeClassNames(className) {
+	if (!className) return [];
+	return Array.isArray(className) ? className : [className];
+}
+var DragPreviewController = class {
+	options;
+	previewElement = null;
+	constructor(options = {}) {
+		this.options = {
+			zIndex: options.zIndex ?? 9999,
+			opacity: options.opacity ?? .95,
+			centerOnCursor: options.centerOnCursor ?? true,
+			className: options.className,
+			copyComputedStyles: options.copyComputedStyles,
+			appendTo: options.appendTo
+		};
+	}
+	startFromElement(element) {
+		this.stop();
+		const rect = element.getBoundingClientRect();
+		const clone = element.cloneNode(true);
+		const computed = window.getComputedStyle(element);
+		const appendTo = this.options.appendTo ?? document.body;
+		clone.setAttribute("aria-hidden", "true");
+		clone.style.position = "fixed";
+		clone.style.left = "0";
+		clone.style.top = "0";
+		clone.style.width = `${rect.width}px`;
+		clone.style.height = `${rect.height}px`;
+		clone.style.pointerEvents = "none";
+		clone.style.zIndex = String(this.options.zIndex);
+		clone.style.opacity = String(this.options.opacity);
+		clone.style.transform = OFFSCREEN_TRANSFORM;
+		clone.style.transition = "none";
+		clone.style.cursor = "grabbing";
+		clone.style.margin = "0";
+		clone.style.boxSizing = "border-box";
+		clone.style.background = computed.backgroundColor;
+		for (const classToken of normalizeClassNames(this.options.className)) clone.classList.add(classToken);
+		if (this.options.copyComputedStyles && this.options.copyComputedStyles.length > 0) for (const propertyName of this.options.copyComputedStyles) clone.style.setProperty(propertyName, computed.getPropertyValue(propertyName));
+		appendTo.appendChild(clone);
+		this.previewElement = clone;
+	}
+	moveToPointer(pos) {
+		if (!this.previewElement) return;
+		if (this.options.centerOnCursor) {
+			this.previewElement.style.transform = `translate(${pos.x}px, ${pos.y}px) translate(-50%, -50%)`;
+			return;
+		}
+		this.previewElement.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+	}
+	stop() {
+		this.previewElement?.remove();
+		this.previewElement = null;
+	}
+	destroy() {
+		this.stop();
 	}
 };
 
 //#endregion
-export { DragDropManager };
+export { DragDropManager, DragPreviewController };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/drag-drop-manager.ts"],"sourcesContent":["/**\n * Framework-agnostic Drag and Drop Manager\n *\n * A data-driven drag-and-drop utility that works with React and vanilla JS.\n * Uses data attributes and direct DOM manipulation for optimal performance.\n *\n * @template TItem - The type of data associated with draggable items\n * @template TPosition - The type representing position/coordinates (e.g., {x, y}, {box, cell}, etc.)\n */\n\nexport type DragDropConfig = {\n  /**\n   * Minimum distance in pixels the pointer must move before a drag operation starts.\n   * Prevents accidental drags from small movements and allows normal scrolling on mobile.\n   * Checked during `pointermove` before drag has started.\n   * @default 10\n   * @example\n   * dragThreshold: 15  // Harder to start drag (better for mobile scroll)\n   */\n  dragThreshold?: number\n\n  /**\n   * Maximum distance in pixels between pointerdown and pointerup to treat as a click/tap.\n   * Used to distinguish intentional clicks from cancelled drag attempts.\n   * Only checked on `pointerup` if drag never started.\n   * @default 10\n   * @example\n   * clickThreshold: 5   // Stricter click detection\n   * clickThreshold: 15  // More forgiving for mobile taps\n   */\n  clickThreshold?: number\n\n  /**\n   * Distance in pixels from viewport edge that triggers auto-scrolling during drag.\n   * When dragging near screen edges, the window automatically scrolls.\n   * @default 100\n   * @example\n   * scrollThreshold: 50   // Start scrolling closer to edges\n   * scrollThreshold: 150  // Larger safe zone before scrolling\n   */\n  scrollThreshold?: number\n\n  /**\n   * Scroll speed in pixels per animation frame during auto-scroll.\n   * Higher values = faster scrolling when dragging near viewport edges.\n   * @default 10\n   * @example\n   * scrollSpeed: 5   // Slower, smoother scroll\n   * scrollSpeed: 20  // Faster scroll\n   */\n  scrollSpeed?: number\n\n  /**\n   * The `data-kind` attribute value for draggable elements.\n   * Elements with this attribute can be picked up and dragged.\n   * @example\n   * draggableKind: 'cell'       // <div data-kind=\"cell\">\n   * draggableKind: 'card'       // <div data-kind=\"card\">\n   * draggableKind: 'list-item'  // <div data-kind=\"list-item\">\n   */\n  draggableKind: string\n\n  /**\n   * The `data-kind` attribute value for droppable target elements.\n   * Elements with this attribute can receive dropped items.\n   * Often the same as `draggableKind` for reorderable lists.\n   * @example\n   * droppableKind: 'cell'   // Can drop on cells\n   * droppableKind: 'zone'   // Can drop on zones\n   */\n  droppableKind: string\n}\n\nexport type PointerPosition = {\n  x: number\n  y: number\n}\n\nexport type DragDropCallbacks<TItem, TPosition> = {\n  /** Called when determining if an element can be dragged */\n  canDrag?: (element: HTMLElement, position: TPosition) => boolean\n  /** Called when drag starts (after threshold is met) */\n  onDragStart?: (element: HTMLElement, position: TPosition, item: TItem) => void\n  /** Called continuously during drag */\n  onDragMove?: (pos: PointerPosition, hoveredElement: HTMLElement | null) => void\n  /** Called when item is dropped on a valid target */\n  onDrop?: (sourcePosition: TPosition, targetPosition: TPosition, sourceItem: TItem) => void\n  /** Called when drag ends (regardless of success) */\n  onDragEnd?: () => void\n  /** Called on simple click/tap (no drag) */\n  onClick?: (element: HTMLElement, position: TPosition) => void\n  /** Called to extract item data from an element */\n  getItemData?: (element: HTMLElement, position: TPosition) => TItem | null\n  /** Called to get the custom position/coordinates of an element */\n  getItemPosition: (element: HTMLElement, kind: string) => TPosition | null\n}\n\ntype DragState<TItem, TPosition> = {\n  startPosition: PointerPosition | null\n  sourceElement: HTMLElement | null\n  sourcePosition: TPosition | null\n  sourceItem: TItem | null\n  isDragging: boolean\n  lastHoveredElement: HTMLElement | null\n}\n\nexport class DragDropManager<TItem = unknown, TPosition = unknown> {\n  private container: HTMLElement\n  private config: Required<DragDropConfig>\n  private callbacks: DragDropCallbacks<TItem, TPosition>\n  private state: DragState<TItem, TPosition> = {\n    startPosition: null,\n    sourceElement: null,\n    sourcePosition: null,\n    sourceItem: null,\n    isDragging: false,\n    lastHoveredElement: null,\n  }\n  private rafId: number | null = null\n  private lastPointerPos: PointerPosition | null = null\n  private boundHandlers: {\n    pointerDown: (e: PointerEvent) => void\n    pointerMove: (e: PointerEvent) => void\n    pointerUp: (e: PointerEvent) => void\n    pointerCancel: (e: PointerEvent) => void\n  }\n\n  constructor(\n    containerRef: { current: HTMLElement | null } | string | HTMLElement,\n    config: DragDropConfig,\n    callbacks: DragDropCallbacks<TItem, TPosition>,\n  ) {\n    // Resolve container element\n    if (typeof containerRef === 'string') {\n      const element = document.querySelector<HTMLElement>(containerRef)\n      if (!element) {\n        throw new Error(`DragDropManager: Could not find element with selector \"${containerRef}\"`)\n      }\n      this.container = element\n    } else if (typeof containerRef === 'object' && 'current' in containerRef) {\n      if (!containerRef.current) {\n        throw new Error('DragDropManager: Ref.current is null')\n      }\n      this.container = containerRef.current\n    } else {\n      this.container = containerRef as HTMLElement\n    }\n\n    this.config = {\n      dragThreshold: config.dragThreshold ?? 10,\n      clickThreshold: config.clickThreshold ?? 10,\n      scrollThreshold: config.scrollThreshold ?? 100,\n      scrollSpeed: config.scrollSpeed ?? 10,\n      draggableKind: config.draggableKind,\n      droppableKind: config.droppableKind,\n    }\n\n    this.callbacks = callbacks\n\n    // Bind handlers to preserve context\n    this.boundHandlers = {\n      pointerDown: this.handlePointerDown.bind(this),\n      pointerMove: this.handlePointerMove.bind(this),\n      pointerUp: this.handlePointerUp.bind(this),\n      pointerCancel: this.handlePointerCancel.bind(this),\n    }\n\n    this.attachListeners()\n  }\n\n  private attachListeners(): void {\n    this.container.addEventListener('pointerdown', this.boundHandlers.pointerDown)\n    this.container.addEventListener('pointermove', this.boundHandlers.pointerMove)\n    this.container.addEventListener('pointerup', this.boundHandlers.pointerUp)\n    this.container.addEventListener('pointercancel', this.boundHandlers.pointerCancel)\n  }\n\n  private handlePointerDown(e: PointerEvent): void {\n    const target = e.target as HTMLElement\n    const draggableElement = this.findElementByKind(target, this.config.draggableKind)\n\n    if (!draggableElement) return\n\n    const position = this.callbacks.getItemPosition(draggableElement, this.config.draggableKind)\n    if (!position) return\n\n    // Check if element is empty (convention: data-empty=\"any-value\")\n    const isEmpty = draggableElement.dataset.empty !== undefined\n    if (isEmpty) return\n\n    // Check canDrag callback\n    if (this.callbacks.canDrag && !this.callbacks.canDrag(draggableElement, position)) {\n      return\n    }\n\n    // Get item data\n    const item = this.callbacks.getItemData?.(draggableElement, position) ?? null\n    if (!item) return\n\n    // Prevent text selection during potential drag\n    e.preventDefault()\n\n    // Store start position and element info\n    this.state.startPosition = { x: e.clientX, y: e.clientY }\n    this.state.sourceElement = draggableElement\n    this.state.sourcePosition = position\n    this.state.sourceItem = item\n  }\n\n  private handlePointerMove(e: PointerEvent): void {\n    const currentPos: PointerPosition = { x: e.clientX, y: e.clientY }\n\n    // Check if we should start dragging (threshold not yet met)\n    if (this.state.startPosition && !this.state.isDragging) {\n      const distance = this.getDistance(this.state.startPosition, currentPos)\n\n      if (distance >= this.config.dragThreshold) {\n        // Start drag\n        this.state.isDragging = true\n\n        if (this.state.sourceElement && this.state.sourcePosition && this.state.sourceItem) {\n          // Set data-dragging attribute on source\n          this.state.sourceElement.setAttribute('data-dragging', 'true')\n\n          // Notify drag start\n          this.callbacks.onDragStart?.(\n            this.state.sourceElement,\n            this.state.sourcePosition,\n            this.state.sourceItem,\n          )\n        }\n      }\n      return\n    }\n\n    if (!this.state.isDragging) return\n\n    // Store latest position for RAF\n    this.lastPointerPos = currentPos\n\n    // Throttle updates to 60fps using RAF\n    if (this.rafId === null) {\n      this.rafId = requestAnimationFrame(() => {\n        this.rafId = null\n        if (!this.lastPointerPos) return\n\n        const pos = this.lastPointerPos\n\n        // Find hovered droppable element\n        const elementUnderCursor = document.elementFromPoint(pos.x, pos.y) as HTMLElement\n        const droppableElement = this.findElementByKind(\n          elementUnderCursor,\n          this.config.droppableKind,\n        )\n\n        // Update hover feedback\n        if (droppableElement !== this.state.lastHoveredElement) {\n          // Remove hover from previous element\n          if (this.state.lastHoveredElement) {\n            this.state.lastHoveredElement.removeAttribute('data-hovered')\n          }\n\n          // Add hover to current element (including the source element).\n          // This enables \"drag over itself\" states (e.g. combined data-dragging + data-hovered styling).\n          if (droppableElement) {\n            droppableElement.setAttribute('data-hovered', 'true')\n            this.state.lastHoveredElement = droppableElement\n          } else {\n            this.state.lastHoveredElement = null\n          }\n        }\n\n        // Auto-scroll\n        this.handleAutoScroll(pos)\n\n        // Notify drag move\n        this.callbacks.onDragMove?.(pos, this.state.lastHoveredElement)\n      })\n    }\n  }\n\n  private handlePointerUp(e: PointerEvent): void {\n    // Handle click/tap if we never started dragging\n    if (this.state.startPosition && !this.state.isDragging) {\n      const currentPos = { x: e.clientX, y: e.clientY }\n      const distance = this.getDistance(this.state.startPosition, currentPos)\n\n      // If distance is very small, treat as click\n      if (\n        distance < this.config.clickThreshold &&\n        this.state.sourceElement &&\n        this.state.sourcePosition\n      ) {\n        this.callbacks.onClick?.(this.state.sourceElement, this.state.sourcePosition)\n      }\n\n      this.cleanup()\n      return\n    }\n\n    if (!this.state.isDragging || !this.state.sourcePosition || !this.state.sourceItem) {\n      this.cleanup()\n      return\n    }\n\n    // Find drop target\n    const target = document.elementFromPoint(e.clientX, e.clientY) as HTMLElement\n    const droppableElement = this.findElementByKind(target, this.config.droppableKind)\n\n    if (droppableElement) {\n      const targetPosition = this.callbacks.getItemPosition(\n        droppableElement,\n        this.config.droppableKind,\n      )\n\n      if (targetPosition) {\n        // Notify drop\n        this.callbacks.onDrop?.(this.state.sourcePosition, targetPosition, this.state.sourceItem)\n      }\n    }\n\n    this.cleanup()\n  }\n\n  private handlePointerCancel(): void {\n    this.cleanup()\n  }\n\n  private handleAutoScroll(pos: PointerPosition): void {\n    const { scrollThreshold, scrollSpeed } = this.config\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n\n    let scrollX = 0\n    let scrollY = 0\n\n    // Check horizontal scroll\n    if (pos.x < scrollThreshold) {\n      scrollX = -scrollSpeed\n    } else if (pos.x > viewportWidth - scrollThreshold) {\n      scrollX = scrollSpeed\n    }\n\n    // Check vertical scroll\n    if (pos.y < scrollThreshold) {\n      scrollY = -scrollSpeed\n    } else if (pos.y > viewportHeight - scrollThreshold) {\n      scrollY = scrollSpeed\n    }\n\n    if (scrollX !== 0 || scrollY !== 0) {\n      window.scrollBy(scrollX, scrollY)\n    }\n  }\n\n  private cleanup(): void {\n    // Remove data-dragging attribute\n    if (this.state.sourceElement) {\n      this.state.sourceElement.removeAttribute('data-dragging')\n    }\n\n    // Remove hover attribute\n    if (this.state.lastHoveredElement) {\n      this.state.lastHoveredElement.removeAttribute('data-hovered')\n    }\n\n    // Cancel RAF\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId)\n      this.rafId = null\n    }\n\n    // Notify drag end\n    if (this.state.isDragging) {\n      this.callbacks.onDragEnd?.()\n    }\n\n    // Reset state\n    this.state = {\n      startPosition: null,\n      sourceElement: null,\n      sourcePosition: null,\n      sourceItem: null,\n      isDragging: false,\n      lastHoveredElement: null,\n    }\n    this.lastPointerPos = null\n  }\n\n  /**\n   * Find closest ancestor element with matching data-kind attribute\n   */\n  private findElementByKind(element: HTMLElement | null, kind: string): HTMLElement | null {\n    let current = element\n    while (current && current !== this.container) {\n      if (current.dataset.kind === kind) {\n        return current\n      }\n      current = current.parentElement\n    }\n    return null\n  }\n\n  /**\n   * Calculate distance between two points\n   */\n  private getDistance(p1: PointerPosition, p2: PointerPosition): number {\n    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2))\n  }\n\n  /**\n   * Get current drag state (read-only)\n   */\n  public getState(): Readonly<DragState<TItem, TPosition>> {\n    return { ...this.state }\n  }\n\n  /**\n   * Check if currently dragging\n   */\n  public isDragging(): boolean {\n    return this.state.isDragging\n  }\n\n  /**\n   * Cleanup and remove event listeners\n   */\n  public destroy(): void {\n    this.cleanup()\n    this.container.removeEventListener('pointerdown', this.boundHandlers.pointerDown)\n    this.container.removeEventListener('pointermove', this.boundHandlers.pointerMove)\n    this.container.removeEventListener('pointerup', this.boundHandlers.pointerUp)\n    this.container.removeEventListener('pointercancel', this.boundHandlers.pointerCancel)\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/drag-drop-manager.ts","../src/drag-preview-controller.ts"],"sourcesContent":["/**\n * Framework-agnostic Drag and Drop Manager\n *\n * A data-driven drag-and-drop utility that works with React and vanilla JS.\n * Uses data attributes and direct DOM manipulation for optimal performance.\n *\n * @template TItem - The type of data associated with draggable items\n * @template TPosition - The type representing position/coordinates (e.g., {x, y}, {box, cell}, etc.)\n */\n\nexport type DragDropConfig = {\n  /**\n   * Minimum distance in pixels the pointer must move before a drag operation starts.\n   * Prevents accidental drags from small movements and allows normal scrolling on mobile.\n   * Checked during `pointermove` before drag has started.\n   * @default 10\n   * @example\n   * dragThreshold: 15  // Harder to start drag (better for mobile scroll)\n   */\n  dragThreshold?: number\n\n  /**\n   * Maximum distance in pixels between pointerdown and pointerup to treat as a click/tap.\n   * Used to distinguish intentional clicks from cancelled drag attempts.\n   * Only checked on `pointerup` if drag never started.\n   * @default 10\n   * @example\n   * clickThreshold: 5   // Stricter click detection\n   * clickThreshold: 15  // More forgiving for mobile taps\n   */\n  clickThreshold?: number\n\n  /**\n   * Distance in pixels from viewport edge that triggers auto-scrolling during drag.\n   * When dragging near screen edges, the window automatically scrolls.\n   * @default 100\n   * @example\n   * scrollThreshold: 50   // Start scrolling closer to edges\n   * scrollThreshold: 150  // Larger safe zone before scrolling\n   */\n  scrollThreshold?: number\n\n  /**\n   * Scroll speed in pixels per animation frame during auto-scroll.\n   * Higher values = faster scrolling when dragging near viewport edges.\n   * @default 10\n   * @example\n   * scrollSpeed: 5   // Slower, smoother scroll\n   * scrollSpeed: 20  // Faster scroll\n   */\n  scrollSpeed?: number\n\n  /**\n   * Cancel the current drag operation when Escape is pressed.\n   * Useful for explicit keyboard cancellation.\n   * @default true\n   */\n  cancelOnEscape?: boolean\n\n  /**\n   * Cancel the current drag operation when the pointer leaves the browser window.\n   * Prevents \"stuck dragging\" when pointerup happens outside the app/window.\n   * @default true\n   */\n  cancelOnPointerLeave?: boolean\n\n  /**\n   * The `data-kind` value(s) for draggable elements.\n   * Can be a single kind or multiple kinds.\n   * Each draggable element should still expose a single `data-kind` value.\n   * @example\n   * draggableKind: 'cell'       // <div data-kind=\"cell\">\n   * draggableKind: ['quest', 'bounty'] // <div data-kind=\"quest\">\n   * draggableKind: 'card'       // <div data-kind=\"card\">\n   * draggableKind: 'list-item'  // <div data-kind=\"list-item\">\n   */\n  draggableKind: string | string[]\n\n  /**\n   * The `data-kind` value(s) for droppable target elements.\n   * Can be a single kind or multiple kinds.\n   * Elements with matching kinds can receive dropped items.\n   * Each droppable element should still expose a single `data-kind` value.\n   * Often the same as `draggableKind` for reorderable lists.\n   * @example\n   * droppableKind: 'cell'   // Can drop on cells\n   * droppableKind: ['quest', 'bounty'] // Can drop on either kind\n   * droppableKind: 'zone'   // Can drop on zones\n   */\n  droppableKind: string | string[]\n}\n\nexport type PointerPosition = {\n  x: number\n  y: number\n}\n\nexport type DragDropCallbacks<TItem, TPosition> = {\n  /** Called when determining if an element can be dragged */\n  canDrag?: (element: HTMLElement, position: TPosition) => boolean\n  /** Called when drag starts (after threshold is met) */\n  onDragStart?: (element: HTMLElement, position: TPosition, item: TItem) => void\n  /** Called continuously during drag */\n  onDragMove?: (pos: PointerPosition, hoveredElement: HTMLElement | null) => void\n  /** Called when item is dropped on a valid target */\n  onDrop?: (sourcePosition: TPosition, targetPosition: TPosition, sourceItem: TItem) => void\n  /** Called when drag ends (regardless of success) */\n  onDragEnd?: () => void\n  /** Called on simple click/tap (no drag) */\n  onClick?: (element: HTMLElement, position: TPosition) => void\n  /** Called to extract item data from an element */\n  getItemData?: (element: HTMLElement, position: TPosition) => TItem | null\n  /** Called to get the custom position/coordinates of an element */\n  getItemPosition: (element: HTMLElement, kind: string) => TPosition | null\n}\n\ntype DragState<TItem, TPosition> = {\n  startPosition: PointerPosition | null\n  sourceElement: HTMLElement | null\n  sourcePosition: TPosition | null\n  sourceItem: TItem | null\n  activePointerId: number | null\n  isDragging: boolean\n  lastHoveredElement: HTMLElement | null\n}\n\nexport class DragDropManager<TItem = unknown, TPosition = unknown> {\n  private container: HTMLElement\n  private config: Required<DragDropConfig>\n  private draggableKinds: string[]\n  private droppableKinds: string[]\n  private callbacks: DragDropCallbacks<TItem, TPosition>\n  private state: DragState<TItem, TPosition> = {\n    startPosition: null,\n    sourceElement: null,\n    sourcePosition: null,\n    sourceItem: null,\n    activePointerId: null,\n    isDragging: false,\n    lastHoveredElement: null,\n  }\n  private rafId: number | null = null\n  private lastPointerPos: PointerPosition | null = null\n  private boundHandlers: {\n    pointerDown: (e: PointerEvent) => void\n    pointerMove: (e: PointerEvent) => void\n    pointerUp: (e: PointerEvent) => void\n    pointerCancel: (e: PointerEvent) => void\n    keyDown: (e: KeyboardEvent) => void\n    mouseOut: (e: MouseEvent) => void\n  }\n\n  constructor(\n    containerRef: { current: HTMLElement | null } | string | HTMLElement,\n    config: DragDropConfig,\n    callbacks: DragDropCallbacks<TItem, TPosition>,\n  ) {\n    // Resolve container element\n    if (typeof containerRef === 'string') {\n      const element = document.querySelector<HTMLElement>(containerRef)\n      if (!element) {\n        throw new Error(`DragDropManager: Could not find element with selector \"${containerRef}\"`)\n      }\n      this.container = element\n    } else if (typeof containerRef === 'object' && 'current' in containerRef) {\n      if (!containerRef.current) {\n        throw new Error('DragDropManager: Ref.current is null')\n      }\n      this.container = containerRef.current\n    } else {\n      this.container = containerRef as HTMLElement\n    }\n\n    this.config = {\n      dragThreshold: config.dragThreshold ?? 10,\n      clickThreshold: config.clickThreshold ?? 10,\n      scrollThreshold: config.scrollThreshold ?? 100,\n      scrollSpeed: config.scrollSpeed ?? 10,\n      cancelOnEscape: config.cancelOnEscape ?? true,\n      cancelOnPointerLeave: config.cancelOnPointerLeave ?? true,\n      draggableKind: config.draggableKind,\n      droppableKind: config.droppableKind,\n    }\n    this.draggableKinds = this.normalizeKindList(this.config.draggableKind)\n    this.droppableKinds = this.normalizeKindList(this.config.droppableKind)\n\n    this.callbacks = callbacks\n\n    // Bind handlers to preserve context\n    this.boundHandlers = {\n      pointerDown: this.handlePointerDown.bind(this),\n      pointerMove: this.handlePointerMove.bind(this),\n      pointerUp: this.handlePointerUp.bind(this),\n      pointerCancel: this.handlePointerCancel.bind(this),\n      keyDown: this.handleKeyDown.bind(this),\n      mouseOut: this.handleMouseOut.bind(this),\n    }\n\n    this.attachListeners()\n  }\n\n  private attachListeners(): void {\n    this.container.addEventListener('pointerdown', this.boundHandlers.pointerDown)\n    this.container.addEventListener('pointermove', this.boundHandlers.pointerMove)\n    this.container.addEventListener('pointerup', this.boundHandlers.pointerUp)\n    this.container.addEventListener('pointercancel', this.boundHandlers.pointerCancel)\n    window.addEventListener('pointerup', this.boundHandlers.pointerUp)\n    window.addEventListener('pointercancel', this.boundHandlers.pointerCancel)\n    window.addEventListener('keydown', this.boundHandlers.keyDown)\n    window.addEventListener('mouseout', this.boundHandlers.mouseOut)\n  }\n\n  private handlePointerDown(e: PointerEvent): void {\n    if (this.state.startPosition) return\n\n    const target = e.target as HTMLElement\n    const draggableMatch = this.findElementByKinds(target, this.draggableKinds)\n\n    if (!draggableMatch) return\n\n    const { element: draggableElement, kind: sourceKind } = draggableMatch\n\n    const position = this.callbacks.getItemPosition(draggableElement, sourceKind)\n    if (!position) return\n\n    // Check if element is empty (convention: data-empty=\"any-value\")\n    const isEmpty = draggableElement.dataset.empty !== undefined\n    if (isEmpty) return\n\n    // Check canDrag callback\n    if (this.callbacks.canDrag && !this.callbacks.canDrag(draggableElement, position)) {\n      return\n    }\n\n    // Get item data\n    const item = this.callbacks.getItemData?.(draggableElement, position) ?? null\n    if (!item) return\n\n    // Prevent text selection during potential drag\n    e.preventDefault()\n\n    // Store start position and element info\n    this.state.startPosition = { x: e.clientX, y: e.clientY }\n    this.state.sourceElement = draggableElement\n    this.state.sourcePosition = position\n    this.state.sourceItem = item\n    this.state.activePointerId = this.getPointerId(e)\n\n    // Capture pointer events outside container boundaries when supported.\n    if (\n      this.state.activePointerId !== null &&\n      typeof draggableElement.setPointerCapture === 'function'\n    ) {\n      try {\n        draggableElement.setPointerCapture(this.state.activePointerId)\n      } catch {\n        // Ignore unsupported/inactive-pointer capture errors.\n      }\n    }\n  }\n\n  private handlePointerMove(e: PointerEvent): void {\n    if (!this.isActivePointer(e)) return\n\n    const currentPos: PointerPosition = { x: e.clientX, y: e.clientY }\n\n    // Check if we should start dragging (threshold not yet met)\n    if (this.state.startPosition && !this.state.isDragging) {\n      const distance = this.getDistance(this.state.startPosition, currentPos)\n\n      if (distance >= this.config.dragThreshold) {\n        // Start drag\n        this.state.isDragging = true\n\n        if (this.state.sourceElement && this.state.sourcePosition && this.state.sourceItem) {\n          // Set data-dragging attribute on source\n          this.state.sourceElement.setAttribute('data-dragging', 'true')\n\n          // Notify drag start\n          this.callbacks.onDragStart?.(\n            this.state.sourceElement,\n            this.state.sourcePosition,\n            this.state.sourceItem,\n          )\n        }\n      }\n      return\n    }\n\n    if (!this.state.isDragging) return\n\n    // Store latest position for RAF\n    this.lastPointerPos = currentPos\n\n    // Throttle updates to 60fps using RAF\n    if (this.rafId === null) {\n      this.rafId = requestAnimationFrame(() => {\n        this.rafId = null\n        if (!this.lastPointerPos) return\n\n        const pos = this.lastPointerPos\n\n        // Find hovered droppable element\n        const elementUnderCursor = document.elementFromPoint(pos.x, pos.y) as HTMLElement\n        const droppableMatch = this.findElementByKinds(elementUnderCursor, this.droppableKinds)\n        const droppableElement = droppableMatch?.element ?? null\n\n        // Update hover feedback\n        if (droppableElement !== this.state.lastHoveredElement) {\n          // Remove hover from previous element\n          if (this.state.lastHoveredElement) {\n            this.state.lastHoveredElement.removeAttribute('data-hovered')\n          }\n\n          // Add hover to current element (including the source element).\n          // This enables \"drag over itself\" states (e.g. combined data-dragging + data-hovered styling).\n          if (droppableElement) {\n            droppableElement.setAttribute('data-hovered', 'true')\n            this.state.lastHoveredElement = droppableElement\n          } else {\n            this.state.lastHoveredElement = null\n          }\n        }\n\n        // Auto-scroll\n        this.handleAutoScroll(pos)\n\n        // Notify drag move\n        this.callbacks.onDragMove?.(pos, this.state.lastHoveredElement)\n      })\n    }\n  }\n\n  private handlePointerUp(e: PointerEvent): void {\n    if (!this.isActivePointer(e)) return\n\n    // Handle click/tap if we never started dragging\n    if (this.state.startPosition && !this.state.isDragging) {\n      const currentPos = { x: e.clientX, y: e.clientY }\n      const distance = this.getDistance(this.state.startPosition, currentPos)\n\n      // If distance is very small, treat as click\n      if (\n        distance < this.config.clickThreshold &&\n        this.state.sourceElement &&\n        this.state.sourcePosition\n      ) {\n        this.callbacks.onClick?.(this.state.sourceElement, this.state.sourcePosition)\n      }\n\n      this.cleanup()\n      return\n    }\n\n    if (!this.state.isDragging || !this.state.sourcePosition || !this.state.sourceItem) {\n      this.cleanup()\n      return\n    }\n\n    // Find drop target\n    const target = document.elementFromPoint(e.clientX, e.clientY) as HTMLElement\n    const droppableMatch = this.findElementByKinds(target, this.droppableKinds)\n    const droppableElement = droppableMatch?.element ?? null\n\n    if (droppableElement && droppableMatch) {\n      const targetPosition = this.callbacks.getItemPosition(droppableElement, droppableMatch.kind)\n\n      if (targetPosition) {\n        // Notify drop\n        this.callbacks.onDrop?.(this.state.sourcePosition, targetPosition, this.state.sourceItem)\n      }\n    }\n\n    this.cleanup()\n  }\n\n  private handlePointerCancel(): void {\n    this.cleanup()\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (!this.config.cancelOnEscape) return\n    if (e.key !== 'Escape') return\n    if (!this.state.startPosition) return\n    this.cleanup()\n  }\n\n  private handleMouseOut(e: MouseEvent): void {\n    if (!this.config.cancelOnPointerLeave) return\n    if (!this.state.startPosition) return\n    if (e.relatedTarget !== null) return\n    this.cleanup()\n  }\n\n  private handleAutoScroll(pos: PointerPosition): void {\n    const { scrollThreshold, scrollSpeed } = this.config\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n\n    let scrollX = 0\n    let scrollY = 0\n\n    // Check horizontal scroll\n    if (pos.x < scrollThreshold) {\n      scrollX = -scrollSpeed\n    } else if (pos.x > viewportWidth - scrollThreshold) {\n      scrollX = scrollSpeed\n    }\n\n    // Check vertical scroll\n    if (pos.y < scrollThreshold) {\n      scrollY = -scrollSpeed\n    } else if (pos.y > viewportHeight - scrollThreshold) {\n      scrollY = scrollSpeed\n    }\n\n    if (scrollX !== 0 || scrollY !== 0) {\n      window.scrollBy(scrollX, scrollY)\n    }\n  }\n\n  private cleanup(): void {\n    // Release pointer capture if we own it.\n    if (\n      this.state.sourceElement &&\n      this.state.activePointerId !== null &&\n      typeof this.state.sourceElement.hasPointerCapture === 'function' &&\n      typeof this.state.sourceElement.releasePointerCapture === 'function' &&\n      this.state.sourceElement.hasPointerCapture(this.state.activePointerId)\n    ) {\n      try {\n        this.state.sourceElement.releasePointerCapture(this.state.activePointerId)\n      } catch {\n        // Ignore release errors for inactive pointer.\n      }\n    }\n\n    // Remove data-dragging attribute\n    if (this.state.sourceElement) {\n      this.state.sourceElement.removeAttribute('data-dragging')\n    }\n\n    // Remove hover attribute\n    if (this.state.lastHoveredElement) {\n      this.state.lastHoveredElement.removeAttribute('data-hovered')\n    }\n\n    // Cancel RAF\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId)\n      this.rafId = null\n    }\n\n    // Notify drag end\n    if (this.state.isDragging) {\n      this.callbacks.onDragEnd?.()\n    }\n\n    // Reset state\n    this.state = {\n      startPosition: null,\n      sourceElement: null,\n      sourcePosition: null,\n      sourceItem: null,\n      activePointerId: null,\n      isDragging: false,\n      lastHoveredElement: null,\n    }\n    this.lastPointerPos = null\n  }\n\n  private getPointerId(e: PointerEvent): number | null {\n    return typeof e.pointerId === 'number' ? e.pointerId : null\n  }\n\n  private isActivePointer(e: PointerEvent): boolean {\n    if (this.state.activePointerId === null) {\n      return true\n    }\n    const pointerId = this.getPointerId(e)\n    return pointerId === null || pointerId === this.state.activePointerId\n  }\n\n  private normalizeKindList(kinds: string | string[]): string[] {\n    const values = Array.isArray(kinds) ? kinds : [kinds]\n    return [...new Set(values.map((value) => value.trim()).filter(Boolean))]\n  }\n\n  /**\n   * Find closest ancestor element with a `data-kind` matching any expected kind.\n   */\n  private findElementByKinds(\n    element: HTMLElement | null,\n    kinds: string[],\n  ): { element: HTMLElement; kind: string } | null {\n    let current = element\n    while (current && current !== this.container) {\n      const elementKind = current.dataset.kind\n      if (elementKind && kinds.includes(elementKind)) {\n        return { element: current, kind: elementKind }\n      }\n      current = current.parentElement\n    }\n    return null\n  }\n\n  /**\n   * Calculate distance between two points\n   */\n  private getDistance(p1: PointerPosition, p2: PointerPosition): number {\n    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2))\n  }\n\n  /**\n   * Get current drag state (read-only)\n   */\n  public getState(): Readonly<DragState<TItem, TPosition>> {\n    return { ...this.state }\n  }\n\n  /**\n   * Check if currently dragging\n   */\n  public isDragging(): boolean {\n    return this.state.isDragging\n  }\n\n  /**\n   * Cleanup and remove event listeners\n   */\n  public destroy(): void {\n    this.cleanup()\n    this.container.removeEventListener('pointerdown', this.boundHandlers.pointerDown)\n    this.container.removeEventListener('pointermove', this.boundHandlers.pointerMove)\n    this.container.removeEventListener('pointerup', this.boundHandlers.pointerUp)\n    this.container.removeEventListener('pointercancel', this.boundHandlers.pointerCancel)\n    window.removeEventListener('pointerup', this.boundHandlers.pointerUp)\n    window.removeEventListener('pointercancel', this.boundHandlers.pointerCancel)\n    window.removeEventListener('keydown', this.boundHandlers.keyDown)\n    window.removeEventListener('mouseout', this.boundHandlers.mouseOut)\n  }\n}\n","import type { PointerPosition } from './drag-drop-manager'\n\nexport type DragPreviewControllerOptions = {\n  zIndex?: number\n  opacity?: number\n  centerOnCursor?: boolean\n  className?: string | string[]\n  copyComputedStyles?: string[]\n  appendTo?: HTMLElement\n}\n\nconst OFFSCREEN_TRANSFORM = 'translate(-9999px, -9999px)'\n\nfunction normalizeClassNames(className: string | string[] | undefined): string[] {\n  if (!className) return []\n  return Array.isArray(className) ? className : [className]\n}\n\nexport class DragPreviewController {\n  private options: Required<\n    Pick<DragPreviewControllerOptions, 'zIndex' | 'opacity' | 'centerOnCursor'>\n  > &\n    Omit<DragPreviewControllerOptions, 'zIndex' | 'opacity' | 'centerOnCursor'>\n  private previewElement: HTMLElement | null = null\n\n  constructor(options: DragPreviewControllerOptions = {}) {\n    this.options = {\n      zIndex: options.zIndex ?? 9999,\n      opacity: options.opacity ?? 0.95,\n      centerOnCursor: options.centerOnCursor ?? true,\n      className: options.className,\n      copyComputedStyles: options.copyComputedStyles,\n      appendTo: options.appendTo,\n    }\n  }\n\n  public startFromElement(element: HTMLElement): void {\n    this.stop()\n    const rect = element.getBoundingClientRect()\n    const clone = element.cloneNode(true) as HTMLElement\n    const computed = window.getComputedStyle(element)\n    const appendTo = this.options.appendTo ?? document.body\n\n    clone.setAttribute('aria-hidden', 'true')\n    clone.style.position = 'fixed'\n    clone.style.left = '0'\n    clone.style.top = '0'\n    clone.style.width = `${rect.width}px`\n    clone.style.height = `${rect.height}px`\n    clone.style.pointerEvents = 'none'\n    clone.style.zIndex = String(this.options.zIndex)\n    clone.style.opacity = String(this.options.opacity)\n    clone.style.transform = OFFSCREEN_TRANSFORM\n    clone.style.transition = 'none'\n    clone.style.cursor = 'grabbing'\n    clone.style.margin = '0'\n    clone.style.boxSizing = 'border-box'\n    clone.style.background = computed.backgroundColor\n\n    for (const classToken of normalizeClassNames(this.options.className)) {\n      clone.classList.add(classToken)\n    }\n\n    if (this.options.copyComputedStyles && this.options.copyComputedStyles.length > 0) {\n      for (const propertyName of this.options.copyComputedStyles) {\n        clone.style.setProperty(propertyName, computed.getPropertyValue(propertyName))\n      }\n    }\n\n    appendTo.appendChild(clone)\n    this.previewElement = clone\n  }\n\n  public moveToPointer(pos: PointerPosition): void {\n    if (!this.previewElement) return\n    if (this.options.centerOnCursor) {\n      this.previewElement.style.transform = `translate(${pos.x}px, ${pos.y}px) translate(-50%, -50%)`\n      return\n    }\n    this.previewElement.style.transform = `translate(${pos.x}px, ${pos.y}px)`\n  }\n\n  public stop(): void {\n    this.previewElement?.remove()\n    this.previewElement = null\n  }\n\n  public destroy(): void {\n    this.stop()\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,41 +1,50 @@
 {
   "name": "dnd-manager",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "homepage": "https://itsjavi.com/dnd-manager",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/itsjavi/dnd-manager.git"
   },
-  "license": "MIT",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
       "require": "./dist/index.mjs"
     }
   },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts",
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "tsdown src/index.ts --dts --sourcemap --format esm --clean",
-    "format": "pnpx sort-package-json && pnpm exec prettier --cache --write .",
-    "prepublishOnly": "pnpm typecheck && pnpm build && publint",
-    "test": "vitest --run",
-    "test:watch": "vitest --watch",
-    "typecheck": "tsc --noEmit"
-  },
   "devDependencies": {
-    "prettier": "^3.8.1",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^28.1.0",
+    "oxfmt": "^0.35.0",
     "publint": "^0.3.17",
-    "sort-package-json": "^3.6.1",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "dev": "pnpm --filter dnd-manager-demo dev",
+    "build": "tsdown src/index.ts --dts --sourcemap --format esm --clean",
+    "build:watch": "pnpm build --watch",
+    "build:demo": "pnpm --filter dnd-manager-demo build",
+    "build:all": "pnpm build && pnpm build:demo",
+    "format": "oxfmt --write .",
+    "format:check": "oxfmt --check .",
+    "test": "vitest --run",
+    "test:coverage": "pnpm build && vitest --run --coverage",
+    "test:e2e": "pnpm build && vitest --project e2e",
+    "test:unit": "vitest --project unit",
+    "test:watch": "vitest --watch",
+    "typecheck": "tsc --noEmit"
   }
-}
+}