dnd-manager 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Javi Aguilar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,769 @@
+# dnd-manager
+
+Simple, performant, and data-driven Drag-and-Drop library for vanilla JS, and compatible with any framework.
+
+This document provides practical examples of using `DragDropManager` in both vanilla
+JavaScript and React applications.
+
+## Table of Contents
+
+1. [Vanilla JavaScript Example](#vanilla-javascript-example)
+2. [React Example](#react-example)
+
+---
+
+## Vanilla JavaScript Example
+
+This example creates a draggable grid with cells that can be reordered. Clicking a cell logs its
+data to the console, and dragging shows a preview element following the cursor.
+
+**HTML:**
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vanilla JS DragDrop Grid</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 20px;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        background: #f9fafb;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, 120px);
+        gap: 8px;
+        padding: 20px;
+      }
+
+      .cell {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        border-radius: 8px;
+        padding: 20px;
+        min-height: 80px;
+        transition:
+          transform 0.2s,
+          opacity 0.2s,
+          box-shadow 0.2s;
+        user-select: none;
+        touch-action: none;
+      }
+
+      .cell:not([data-empty]) {
+        color: white;
+        cursor: grab;
+      }
+
+      .cell[data-empty] {
+        background: #f3f4f6;
+        border: 2px dashed #d1d5db;
+      }
+
+      /* Dragging states */
+      .cell[data-dragging='true'] {
+        opacity: 0.4;
+        cursor: grabbing !important;
+      }
+
+      .cell[data-hovered='true'] {
+        transform: scale(1.05);
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
+      }
+
+      /* Drag preview */
+      #drag-preview {
+        position: fixed;
+        pointer-events: none;
+        z-index: 9999;
+        opacity: 0;
+        transform: translate(-50%, -50%);
+        transition: opacity 0.2s;
+        padding: 20px;
+        border-radius: 8px;
+        color: white;
+        font-weight: 600;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Vanilla JS Drag & Drop Grid</h1>
+    <p>Drag cells to reorder, click to log to console</p>
+
+    <div id="grid-container" class="grid">
+      <!-- Row 0 -->
+      <div
+        class="cell"
+        data-kind="cell"
+        data-row="0"
+        data-col="0"
+        data-item-id="1"
+        data-name="Item 1"
+        style="background: #ef4444"
+      >
+        Item 1
+      </div>
+      <div
+        class="cell"
+        data-kind="cell"
+        data-row="0"
+        data-col="1"
+        data-item-id="2"
+        data-name="Item 2"
+        style="background: #3b82f6"
+      >
+        Item 2
+      </div>
+      <div
+        class="cell"
+        data-kind="cell"
+        data-row="0"
+        data-col="2"
+        data-item-id="3"
+        data-name="Item 3"
+        style="background: #10b981"
+      >
+        Item 3
+      </div>
+
+      <!-- Row 1 -->
+      <div
+        class="cell"
+        data-kind="cell"
+        data-row="1"
+        data-col="0"
+        data-item-id="4"
+        data-name="Item 4"
+        style="background: #f59e0b"
+      >
+        Item 4
+      </div>
+      <div class="cell" data-kind="cell" data-row="1" data-col="1" data-empty></div>
+      <div
+        class="cell"
+        data-kind="cell"
+        data-row="1"
+        data-col="2"
+        data-item-id="5"
+        data-name="Item 5"
+        style="background: #8b5cf6"
+      >
+        Item 5
+      </div>
+
+      <!-- Row 2 -->
+      <div
+        class="cell"
+        data-kind="cell"
+        data-row="2"
+        data-col="0"
+        data-item-id="6"
+        data-name="Item 6"
+        style="background: #ec4899"
+      >
+        Item 6
+      </div>
+      <div
+        class="cell"
+        data-kind="cell"
+        data-row="2"
+        data-col="1"
+        data-item-id="7"
+        data-name="Item 7"
+        style="background: #14b8a6"
+      >
+        Item 7
+      </div>
+      <div class="cell" data-kind="cell" data-row="2" data-col="2" data-empty></div>
+    </div>
+
+    <!-- Drag preview element -->
+    <div id="drag-preview"></div>
+
+    <script type="module" src="./app.ts"></script>
+  </body>
+</html>
+```
+
+**TypeScript (app.ts):**
+
+```typescript
+import { DragDropManager, type DragDropCallbacks } from './drag-drop-manager'
+
+// Types
+type GridItem = {
+  id: string
+  name: string
+  color: string
+}
+
+type GridPosition = {
+  row: number
+  col: number
+}
+
+// Initialize
+function initDragDropGrid(): void {
+  const container = document.getElementById('grid-container')
+  const preview = document.getElementById('drag-preview')
+
+  if (!container || !preview) return
+
+  // 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
+      if (row === undefined || col === undefined) return null
+
+      return {
+        row: parseInt(row, 10),
+        col: parseInt(col, 10),
+      }
+    },
+
+    getItemData: (element, position) => {
+      const itemId = element.dataset.itemId
+      const name = element.dataset.name
+      const color = element.style.background
+
+      if (!itemId || !name || !color) return null
+
+      return {
+        id: itemId,
+        name: name,
+        color: color,
+      }
+    },
+
+    onDragStart: (element, position, item) => {
+      console.log('🚀 Drag started:', item)
+
+      // Copy element dimensions and styles to preview
+      const rect = element.getBoundingClientRect()
+      preview.textContent = item.name
+      preview.style.background = item.color
+      preview.style.width = `${rect.width}px`
+      preview.style.height = `${rect.height}px`
+      preview.style.opacity = '0.9'
+    },
+
+    onDragMove: (pos, hoveredElement) => {
+      // Update preview position
+      preview.style.left = `${pos.x}px`
+      preview.style.top = `${pos.y}px`
+    },
+
+    onDrop: (sourcePos, targetPos, sourceItem) => {
+      console.log('📦 Dropped:', {
+        from: sourcePos,
+        to: targetPos,
+        item: sourceItem,
+      })
+
+      // Get source and target elements
+      const sourceElement = container.querySelector(
+        `[data-row="${sourcePos.row}"][data-col="${sourcePos.col}"]`,
+      ) as HTMLElement
+      const targetElement = container.querySelector(
+        `[data-row="${targetPos.row}"][data-col="${targetPos.col}"]`,
+      ) as HTMLElement
+
+      if (!sourceElement || !targetElement) return
+
+      // Swap element contents and data attributes
+      const tempContent = sourceElement.innerHTML
+      const tempId = sourceElement.dataset.itemId
+      const tempName = sourceElement.dataset.name
+      const tempColor = sourceElement.style.background
+      const tempEmpty = sourceElement.dataset.empty
+
+      // Update source with target data
+      sourceElement.innerHTML = targetElement.innerHTML
+      sourceElement.dataset.itemId = targetElement.dataset.itemId || ''
+      sourceElement.dataset.name = targetElement.dataset.name || ''
+      sourceElement.style.background = targetElement.style.background
+      if (targetElement.dataset.empty !== undefined) {
+        sourceElement.dataset.empty = ''
+      } else {
+        delete sourceElement.dataset.empty
+      }
+
+      // Update target with source data
+      targetElement.innerHTML = tempContent
+      targetElement.dataset.itemId = tempId || ''
+      targetElement.dataset.name = tempName || ''
+      targetElement.style.background = tempColor
+      if (tempEmpty !== undefined) {
+        targetElement.dataset.empty = ''
+      } else {
+        delete targetElement.dataset.empty
+      }
+    },
+
+    onDragEnd: () => {
+      // Hide preview
+      preview.style.opacity = '0'
+    },
+
+    onClick: (element, position) => {
+      const itemId = element.dataset.itemId
+      const name = element.dataset.name
+      const color = element.style.background
+
+      if (itemId && name) {
+        console.log('👆 Clicked:', { id: itemId, name, color })
+      }
+    },
+  }
+
+  // Create DragDropManager instance
+  const dragDropManager = new DragDropManager<GridItem, GridPosition>(
+    container,
+    {
+      draggableKind: 'cell',
+      droppableKind: 'cell',
+      dragThreshold: 10,
+      clickThreshold: 10,
+      scrollThreshold: 100,
+      scrollSpeed: 10,
+    },
+    callbacks,
+  )
+
+  // Cleanup on page unload
+  window.addEventListener('beforeunload', () => {
+    dragDropManager.destroy()
+  })
+}
+
+// Start when DOM is ready
+document.addEventListener('DOMContentLoaded', initDragDropGrid)
+```
+
+---
+
+## React Example
+
+This example shows the same draggable grid implemented as a React component with TypeScript.
+
+```typescript
+import { useEffect, useRef, useState } from 'react'
+import { DragDropManager, type DragDropCallbacks } from './drag-drop-manager'
+
+// Types
+type GridItem = {
+  id: string
+  name: string
+  color: string
+}
+
+type GridPosition = {
+  row: number
+  col: number
+}
+
+// Initial data
+const INITIAL_DATA: (GridItem | null)[][] = [
+  [
+    { id: '1', name: 'Item 1', color: '#ef4444' },
+    { id: '2', name: 'Item 2', color: '#3b82f6' },
+    { id: '3', name: 'Item 3', color: '#10b981' },
+  ],
+  [
+    { id: '4', name: 'Item 4', color: '#f59e0b' },
+    null,
+    { id: '5', name: 'Item 5', color: '#8b5cf6' },
+  ],
+  [
+    { id: '6', name: 'Item 6', color: '#ec4899' },
+    { id: '7', name: 'Item 7', color: '#14b8a6' },
+    null,
+  ],
+]
+
+// Cell component
+type CellProps = {
+  item: GridItem | null
+  row: number
+  col: number
+} & React.ComponentProps<'div'>
+
+function GridCell({ item, row, col, ...props }: CellProps) {
+  if (item) {
+    return (
+      <div
+        data-kind="cell"
+        data-row={row}
+        data-col={col}
+        data-item-id={item.id}
+        className="grid-cell grid-cell--filled"
+        style={{
+          background: item.color,
+        }}
+        {...props}
+      >
+        {item.name}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-kind="cell"
+      data-row={row}
+      data-col={col}
+      data-empty="true"
+      className="grid-cell grid-cell--empty"
+      {...props}
+    />
+  )
+}
+
+// Drag preview component
+type DragPreviewProps = {
+  item: GridItem | null
+  position: { x: number; y: number } | null
+  width?: number
+  height?: number
+}
+
+function DragPreview({ item, position, width, height }: DragPreviewProps) {
+  if (!item || !position) return null
+
+  return (
+    <div
+      className="drag-preview"
+      style={{
+        left: position.x,
+        top: position.y,
+        background: item.color,
+        width: width ? `${width}px` : undefined,
+        height: height ? `${height}px` : undefined,
+      }}
+    >
+      {item.name}
+    </div>
+  )
+}
+
+// Main component
+export function DraggableGrid() {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [gridData, setGridData] = useState<(GridItem | null)[][]>(INITIAL_DATA)
+  const [dragPreview, setDragPreview] = useState<{
+    item: GridItem | null
+    position: { x: number; y: number } | null
+    width?: number
+    height?: number
+  }>({ item: null, position: null })
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    // 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
+        if (row === undefined || col === undefined) return null
+
+        return {
+          row: parseInt(row, 10),
+          col: parseInt(col, 10),
+        }
+      },
+
+      getItemData: (element, position) => {
+        return gridData[position.row][position.col]
+      },
+
+      onDragStart: (element, position, item) => {
+        console.log('🚀 Drag started:', item)
+
+        // Store element dimensions for preview
+        const rect = element.getBoundingClientRect()
+        setDragPreview({
+          item,
+          position: null,
+          width: rect.width,
+          height: rect.height,
+        })
+      },
+
+      onDragMove: (pos, hoveredElement) => {
+        setDragPreview((prev) => ({
+          ...prev,
+          position: pos,
+        }))
+      },
+
+      onDrop: (sourcePos, targetPos, sourceItem) => {
+        console.log('📦 Dropped:', {
+          from: sourcePos,
+          to: targetPos,
+          item: sourceItem,
+        })
+
+        // Swap items
+        setGridData((prevData) => {
+          const newData = prevData.map((row) => [...row])
+          const targetItem = newData[targetPos.row][targetPos.col]
+          newData[targetPos.row][targetPos.col] = sourceItem
+          newData[sourcePos.row][sourcePos.col] = targetItem
+          return newData
+        })
+      },
+
+      onDragEnd: () => {
+        setDragPreview({ item: null, position: null, width: undefined, height: undefined })
+      },
+
+      onClick: (element, position) => {
+        const item = gridData[position.row][position.col]
+        if (item) {
+          console.log('👆 Clicked:', item)
+        }
+      },
+    }
+
+    // Create manager
+    const manager = new DragDropManager<GridItem, GridPosition>(
+      containerRef,
+      {
+        draggableKind: 'cell',
+        droppableKind: 'cell',
+        dragThreshold: 10,
+        clickThreshold: 10,
+        scrollThreshold: 100,
+        scrollSpeed: 10,
+      },
+      callbacks,
+    )
+
+    // Cleanup
+    return () => {
+      manager.destroy()
+    }
+  }, [gridData])
+
+  return (
+    <div className="draggable-grid-container">
+      <h1>React Drag & Drop Grid</h1>
+      <p>Drag cells to reorder, click to log to console</p>
+
+      <div ref={containerRef} className="grid">
+        {gridData.map((row, rowIndex) =>
+          row.map((item, colIndex) => (
+            <GridCell key={`${rowIndex}-${colIndex}`} item={item} row={rowIndex} col={colIndex} />
+          )),
+        )}
+      </div>
+
+      <DragPreview
+        item={dragPreview.item}
+        position={dragPreview.position}
+        width={dragPreview.width}
+        height={dragPreview.height}
+      />
+    </div>
+  )
+}
+```
+
+**CSS (Tailwind or plain CSS):**
+
+```css
+/* Container */
+.draggable-grid-container {
+  padding: 20px;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+
+/* Grid */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 120px);
+  gap: 8px;
+  padding: 20px;
+}
+
+/* Grid cells */
+.grid-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  border-radius: 8px;
+  transition:
+    transform 0.2s,
+    opacity 0.2s,
+    box-shadow 0.2s;
+  user-select: none;
+  touch-action: none;
+}
+
+.grid-cell--filled {
+  padding: 20px;
+  color: white;
+  cursor: grab;
+  min-height: 80px;
+}
+
+.grid-cell--empty {
+  background: #f3f4f6;
+  border: 2px dashed #d1d5db;
+  min-height: 80px;
+}
+
+/* Dragging state */
+.grid-cell[data-dragging='true'] {
+  opacity: 0.4;
+  cursor: grabbing !important;
+}
+
+/* Hover state */
+.grid-cell[data-hovered='true'] {
+  transform: scale(1.05);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
+}
+
+/* Drag preview */
+.drag-preview {
+  position: fixed;
+  pointer-events: none;
+  z-index: 9999;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+  border-radius: 8px;
+  color: white;
+  font-weight: 600;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+  opacity: 0.9;
+}
+```
+
+**With Tailwind CSS:**
+
+```typescript
+// Update cell component to use Tailwind classes
+function GridCell({ item, row, col, ...props }: CellProps) {
+  if (item) {
+    return (
+      <div
+        data-kind="cell"
+        data-row={row}
+        data-col={col}
+        data-item-id={item.id}
+        className="flex items-center justify-center p-5 rounded-lg cursor-grab
+                   font-semibold text-white transition-all duration-200
+                   data-[dragging=true]:opacity-40 data-[dragging=true]:cursor-grabbing
+                   data-[hovered=true]:scale-105 data-[hovered=true]:ring-4
+                   data-[hovered=true]:ring-blue-500/50"
+        style={{ background: item.color }}
+        {...props}
+      >
+        {item.name}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-kind="cell"
+      data-row={row}
+      data-col={col}
+      data-empty="true"
+      className="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg min-h-[80px]"
+      {...props}
+    />
+  )
+}
+
+// Drag preview with Tailwind
+function DragPreview({ item, position, width, height }: DragPreviewProps) {
+  if (!item || !position) return null
+
+  return (
+    <div
+      className="fixed pointer-events-none z-[9999] -translate-x-1/2 -translate-y-1/2
+                 p-5 rounded-lg text-white font-semibold shadow-2xl opacity-90"
+      style={{
+        left: position.x,
+        top: position.y,
+        background: item.color,
+        width: width ? `${width}px` : undefined,
+        height: height ? `${height}px` : undefined,
+      }}
+    >
+      {item.name}
+    </div>
+  )
+}
+```
+
+---
+
+## Covered Features
+
+### Both Examples Include:
+
+1. **Grid Layout** - 3x3 grid with draggable cells
+2. **Click Detection** - Logs item data to console on click
+3. **Drag Preview** - Visual feedback following cursor during drag, matching original element size
+4. **Swap Behavior** - Items swap positions on drop
+5. **Empty Cells** - Non-draggable placeholder cells
+6. **Visual Feedback** - Opacity changes, hover states, and scaling
+7. **TypeScript Types** - Full type safety with generics
+
+### DragDropManager Features Used:
+
+- `canDrag` - Prevents dragging empty cells
+- `getItemPosition` - Extracts grid coordinates from data attributes
+- `getItemData` - Retrieves item data from grid state
+- `onDragStart` - Shows preview and updates source appearance
+  - Uses `getBoundingClientRect()` to copy element dimensions to preview
+- `onDragMove` - Updates preview position in real-time
+- `onDrop` - Swaps items and updates state
+- `onDragEnd` - Hides preview
+- `onClick` - Handles click/tap events
+
+### Configuration:
+
+- `dragThreshold: 10` - Prevents accidental drags
+- `clickThreshold: 10` - Distinguishes clicks from drags
+- `scrollThreshold: 100` - Auto-scroll near viewport edges
+- `scrollSpeed: 10` - Smooth scroll speed
+
+---
+
+## Notes
+
+- **Performance**: The manager uses `requestAnimationFrame` for smooth updates at 60fps
+- **Mobile-Friendly**: Uses pointer events which work with touch, mouse, and pen
+- **Accessibility**: Uses data attributes that don't interfere with screen readers
+- **React Integration**: Manager is created in `useEffect` with proper cleanup
+- **State Management**: React example uses `useState` to trigger re-renders after drops

package/dist/index.d.mts

@@ -0,0 +1,131 @@
+//#region src/drag-drop-manager.d.ts
+/**
+ * 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.)
+ */
+type DragDropConfig = {
+  /**
+   * Minimum distance in pixels the pointer must move before a drag operation starts.
+   * Prevents accidental drags from small movements and allows normal scrolling on mobile.
+   * Checked during `pointermove` before drag has started.
+   * @default 10
+   * @example
+   * dragThreshold: 15  // Harder to start drag (better for mobile scroll)
+   */
+  dragThreshold?: number;
+  /**
+   * Maximum distance in pixels between pointerdown and pointerup to treat as a click/tap.
+   * Used to distinguish intentional clicks from cancelled drag attempts.
+   * Only checked on `pointerup` if drag never started.
+   * @default 10
+   * @example
+   * clickThreshold: 5   // Stricter click detection
+   * clickThreshold: 15  // More forgiving for mobile taps
+   */
+  clickThreshold?: number;
+  /**
+   * Distance in pixels from viewport edge that triggers auto-scrolling during drag.
+   * When dragging near screen edges, the window automatically scrolls.
+   * @default 100
+   * @example
+   * scrollThreshold: 50   // Start scrolling closer to edges
+   * scrollThreshold: 150  // Larger safe zone before scrolling
+   */
+  scrollThreshold?: number;
+  /**
+   * Scroll speed in pixels per animation frame during auto-scroll.
+   * Higher values = faster scrolling when dragging near viewport edges.
+   * @default 10
+   * @example
+   * scrollSpeed: 5   // Slower, smoother scroll
+   * scrollSpeed: 20  // Faster scroll
+   */
+  scrollSpeed?: number;
+  /**
+   * The `data-kind` attribute value for draggable elements.
+   * Elements with this attribute can be picked up and dragged.
+   * @example
+   * draggableKind: 'cell'       // <div data-kind="cell">
+   * draggableKind: 'card'       // <div data-kind="card">
+   * draggableKind: 'list-item'  // <div data-kind="list-item">
+   */
+  draggableKind: string;
+  /**
+   * The `data-kind` attribute value for droppable target elements.
+   * Elements with this attribute can receive dropped items.
+   * Often the same as `draggableKind` for reorderable lists.
+   * @example
+   * droppableKind: 'cell'   // Can drop on cells
+   * droppableKind: 'zone'   // Can drop on zones
+   */
+  droppableKind: string;
+};
+type PointerPosition = {
+  x: number;
+  y: number;
+};
+type DragDropCallbacks<TItem, TPosition> = {
+  /** Called when determining if an element can be dragged */canDrag?: (element: HTMLElement, position: TPosition) => boolean; /** Called when drag starts (after threshold is met) */
+  onDragStart?: (element: HTMLElement, position: TPosition, item: TItem) => void; /** Called continuously during drag */
+  onDragMove?: (pos: PointerPosition, hoveredElement: HTMLElement | null) => void; /** Called when item is dropped on a valid target */
+  onDrop?: (sourcePosition: TPosition, targetPosition: TPosition, sourceItem: TItem) => void; /** Called when drag ends (regardless of success) */
+  onDragEnd?: () => void; /** Called on simple click/tap (no drag) */
+  onClick?: (element: HTMLElement, position: TPosition) => void; /** Called to extract item data from an element */
+  getItemData?: (element: HTMLElement, position: TPosition) => TItem | null; /** Called to get the custom position/coordinates of an element */
+  getItemPosition: (element: HTMLElement, kind: string) => TPosition | null;
+};
+type DragState<TItem, TPosition> = {
+  startPosition: PointerPosition | null;
+  sourceElement: HTMLElement | null;
+  sourcePosition: TPosition | null;
+  sourceItem: TItem | null;
+  isDragging: boolean;
+  lastHoveredElement: HTMLElement | null;
+};
+declare class DragDropManager<TItem = unknown, TPosition = unknown> {
+  private container;
+  private config;
+  private callbacks;
+  private state;
+  private rafId;
+  private lastPointerPos;
+  private boundHandlers;
+  constructor(containerRef: {
+    current: HTMLElement | null;
+  } | string | HTMLElement, config: DragDropConfig, callbacks: DragDropCallbacks<TItem, TPosition>);
+  private attachListeners;
+  private handlePointerDown;
+  private handlePointerMove;
+  private handlePointerUp;
+  private handlePointerCancel;
+  private handleAutoScroll;
+  private cleanup;
+  /**
+   * Find closest ancestor element with matching data-kind attribute
+   */
+  private findElementByKind;
+  /**
+   * Calculate distance between two points
+   */
+  private getDistance;
+  /**
+   * Get current drag state (read-only)
+   */
+  getState(): Readonly<DragState<TItem, TPosition>>;
+  /**
+   * Check if currently dragging
+   */
+  isDragging(): boolean;
+  /**
+   * Cleanup and remove event listeners
+   */
+  destroy(): void;
+}
+//#endregion
+export { type DragDropCallbacks, type DragDropConfig, DragDropManager, type PointerPosition };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,200 @@
+//#region src/drag-drop-manager.ts
+var DragDropManager = class {
+	container;
+	config;
+	callbacks;
+	state = {
+		startPosition: null,
+		sourceElement: null,
+		sourcePosition: null,
+		sourceItem: null,
+		isDragging: false,
+		lastHoveredElement: null
+	};
+	rafId = null;
+	lastPointerPos = null;
+	boundHandlers;
+	constructor(containerRef, config, callbacks) {
+		if (typeof containerRef === "string") {
+			const element = document.querySelector(containerRef);
+			if (!element) throw new Error(`DragDropManager: Could not find element with selector "${containerRef}"`);
+			this.container = element;
+		} else if (typeof containerRef === "object" && "current" in containerRef) {
+			if (!containerRef.current) throw new Error("DragDropManager: Ref.current is null");
+			this.container = containerRef.current;
+		} else this.container = containerRef;
+		this.config = {
+			dragThreshold: config.dragThreshold ?? 10,
+			clickThreshold: config.clickThreshold ?? 10,
+			scrollThreshold: config.scrollThreshold ?? 100,
+			scrollSpeed: config.scrollSpeed ?? 10,
+			draggableKind: config.draggableKind,
+			droppableKind: 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)
+		};
+		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);
+	}
+	handlePointerDown(e) {
+		const target = e.target;
+		const draggableElement = this.findElementByKind(target, this.config.draggableKind);
+		if (!draggableElement) return;
+		const position = this.callbacks.getItemPosition(draggableElement, this.config.draggableKind);
+		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();
+		this.state.startPosition = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		this.state.sourceElement = draggableElement;
+		this.state.sourcePosition = position;
+		this.state.sourceItem = item;
+	}
+	handlePointerMove(e) {
+		const currentPos = {
+			x: e.clientX,
+			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);
+				}
+			}
+			return;
+		}
+		if (!this.state.isDragging) return;
+		this.lastPointerPos = currentPos;
+		if (this.rafId === null) 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.findElementByKind(elementUnderCursor, this.config.droppableKind);
+			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);
+		});
+	}
+	handlePointerUp(e) {
+		if (this.state.startPosition && !this.state.isDragging) {
+			const currentPos = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			if (this.getDistance(this.state.startPosition, currentPos) < this.config.clickThreshold && this.state.sourceElement && this.state.sourcePosition) this.callbacks.onClick?.(this.state.sourceElement, this.state.sourcePosition);
+			this.cleanup();
+			return;
+		}
+		if (!this.state.isDragging || !this.state.sourcePosition || !this.state.sourceItem) {
+			this.cleanup();
+			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);
+			if (targetPosition) this.callbacks.onDrop?.(this.state.sourcePosition, targetPosition, this.state.sourceItem);
+		}
+		this.cleanup();
+	}
+	handlePointerCancel() {
+		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);
+	}
+	cleanup() {
+		if (this.state.sourceElement) this.state.sourceElement.removeAttribute("data-dragging");
+		if (this.state.lastHoveredElement) this.state.lastHoveredElement.removeAttribute("data-hovered");
+		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,
+			isDragging: false,
+			lastHoveredElement: null
+		};
+		this.lastPointerPos = null;
+	}
+	/**
+	* Find closest ancestor element with matching data-kind attribute
+	*/
+	findElementByKind(element, kind) {
+		let current = element;
+		while (current && current !== this.container) {
+			if (current.dataset.kind === kind) return current;
+			current = current.parentElement;
+		}
+		return null;
+	}
+	/**
+	* Calculate distance between two points
+	*/
+	getDistance(p1, p2) {
+		return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+	}
+	/**
+	* Get current drag state (read-only)
+	*/
+	getState() {
+		return { ...this.state };
+	}
+	/**
+	* Check if currently dragging
+	*/
+	isDragging() {
+		return this.state.isDragging;
+	}
+	/**
+	* Cleanup and remove event listeners
+	*/
+	destroy() {
+		this.cleanup();
+		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);
+	}
+};
+
+//#endregion
+export { DragDropManager };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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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"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "dnd-manager",
+  "version": "1.0.0",
+  "homepage": "https://itsjavi.com/dnd-manager",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/itsjavi/dnd-manager.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "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",
+    "publint": "^0.3.17",
+    "sort-package-json": "^3.6.1",
+    "tsdown": "^0.20.3",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  }
+}