@pyreon/dnd 0.11.0

package/src/use-drag-monitor.ts

@@ -0,0 +1,67 @@
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+import { onCleanup, signal } from "@pyreon/reactivity"
+import type { DragData } from "./types"
+
+export interface UseDragMonitorOptions {
+  /** Called on any drag start in the page. */
+  onDragStart?: (data: DragData) => void
+  /** Called on any drop in the page. */
+  onDrop?: (sourceData: DragData, targetData: DragData) => void
+  /** Filter which drags to monitor. */
+  canMonitor?: (data: DragData) => boolean
+}
+
+export interface UseDragMonitorResult {
+  /** Whether any element is currently being dragged. */
+  isDragging: () => boolean
+  /** Data of the currently dragging element (null if not dragging). */
+  dragData: () => DragData | null
+}
+
+/**
+ * Monitor all drag operations on the page.
+ * Useful for global drag indicators, analytics, or coordination between
+ * multiple drag-and-drop areas.
+ *
+ * @example
+ * ```tsx
+ * const { isDragging, dragData } = useDragMonitor({
+ *   canMonitor: (data) => data.type === "card",
+ *   onDrop: (source, target) => logDrop(source, target),
+ * })
+ *
+ * <Show when={isDragging()}>
+ *   <div class="global-drag-overlay">
+ *     Dragging: {() => dragData()?.name}
+ *   </div>
+ * </Show>
+ * ```
+ */
+export function useDragMonitor(options?: UseDragMonitorOptions): UseDragMonitorResult {
+  const isDragging = signal(false)
+  const dragData = signal<DragData | null>(null)
+
+  const canMonitorFn = options?.canMonitor
+    ? ({ source }: { source: { data: Record<string, unknown> } }) =>
+        options.canMonitor?.(source.data as DragData) ?? true
+    : null
+
+  const cleanup = monitorForElements({
+    ...(canMonitorFn ? { canMonitor: canMonitorFn } : {}),
+    onDragStart: ({ source }) => {
+      isDragging.set(true)
+      dragData.set(source.data as DragData)
+      options?.onDragStart?.(source.data as DragData)
+    },
+    onDrop: ({ source, location }) => {
+      isDragging.set(false)
+      dragData.set(null)
+      const targetData = location.current.dropTargets[0]?.data ?? {}
+      options?.onDrop?.(source.data as DragData, targetData as DragData)
+    },
+  })
+
+  onCleanup(cleanup)
+
+  return { isDragging, dragData }
+}

package/src/use-draggable.ts

@@ -0,0 +1,66 @@
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+import { onCleanup, signal } from "@pyreon/reactivity"
+import type { DragData, UseDraggableOptions, UseDraggableResult } from "./types"
+
+/**
+ * Make an element draggable with signal-driven state.
+ *
+ * @example
+ * ```tsx
+ * let cardEl: HTMLElement | null = null
+ *
+ * const { isDragging } = useDraggable({
+ *   element: () => cardEl,
+ *   data: { id: card.id, type: "card" },
+ * })
+ *
+ * <div ref={(el) => cardEl = el} class={isDragging() ? "opacity-50" : ""}>
+ *   {card.title}
+ * </div>
+ * ```
+ */
+export function useDraggable<T extends DragData = DragData>(
+  options: UseDraggableOptions<T>,
+): UseDraggableResult {
+  const isDragging = signal(false)
+  let cleanup: (() => void) | undefined
+
+  function setup() {
+    if (cleanup) cleanup()
+
+    const el = options.element()
+    if (!el) return
+
+    const resolveData = () =>
+      typeof options.data === "function" ? (options.data as () => T)() : options.data
+
+    const handle = options.handle?.()
+    cleanup = draggable({
+      element: el,
+      ...(handle ? { dragHandle: handle } : {}),
+      getInitialData: resolveData,
+      canDrag: () => {
+        const disabled = options.disabled
+        if (typeof disabled === "function") return !disabled()
+        return !disabled
+      },
+      onDragStart: () => {
+        isDragging.set(true)
+        options.onDragStart?.()
+      },
+      onDrop: () => {
+        isDragging.set(false)
+        options.onDragEnd?.()
+      },
+    })
+  }
+
+  // Defer setup to next microtask so refs are populated
+  queueMicrotask(setup)
+
+  onCleanup(() => {
+    if (cleanup) cleanup()
+  })
+
+  return { isDragging }
+}

package/src/use-droppable.ts

@@ -0,0 +1,67 @@
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+import { onCleanup, signal } from "@pyreon/reactivity"
+import type { DragData, UseDroppableOptions, UseDroppableResult } from "./types"
+
+/**
+ * Make an element a drop target with signal-driven state.
+ *
+ * @example
+ * ```tsx
+ * let zoneEl: HTMLElement | null = null
+ *
+ * const { isOver } = useDroppable({
+ *   element: () => zoneEl,
+ *   onDrop: (data) => handleDrop(data),
+ *   canDrop: (data) => data.type === "card",
+ * })
+ *
+ * <div ref={(el) => zoneEl = el} class={isOver() ? "bg-blue-50" : ""}>
+ *   Drop here
+ * </div>
+ * ```
+ */
+export function useDroppable<T extends DragData = DragData>(
+  options: UseDroppableOptions<T>,
+): UseDroppableResult {
+  const isOver = signal(false)
+  let cleanup: (() => void) | undefined
+
+  function setup() {
+    if (cleanup) cleanup()
+
+    const el = options.element()
+    if (!el) return
+
+    cleanup = dropTargetForElements({
+      element: el,
+      getData: () => {
+        if (!options.data) return {}
+        return typeof options.data === "function" ? (options.data as () => T)() : options.data
+      },
+      canDrop: ({ source }) => {
+        if (!options.canDrop) return true
+        return options.canDrop(source.data as DragData)
+      },
+      onDragEnter: ({ source }) => {
+        isOver.set(true)
+        options.onDragEnter?.(source.data as DragData)
+      },
+      onDragLeave: () => {
+        isOver.set(false)
+        options.onDragLeave?.()
+      },
+      onDrop: ({ source }) => {
+        isOver.set(false)
+        options.onDrop?.(source.data as DragData)
+      },
+    })
+  }
+
+  queueMicrotask(setup)
+
+  onCleanup(() => {
+    if (cleanup) cleanup()
+  })
+
+  return { isOver }
+}

package/src/use-file-drop.ts

@@ -0,0 +1,131 @@
+import {
+  dropTargetForExternal,
+  monitorForExternal,
+} from "@atlaskit/pragmatic-drag-and-drop/external/adapter"
+import { containsFiles, getFiles } from "@atlaskit/pragmatic-drag-and-drop/external/file"
+import { onCleanup, signal } from "@pyreon/reactivity"
+
+export interface UseFileDropOptions {
+  /** Element getter for the drop zone. */
+  element: () => HTMLElement | null
+  /** Called when files are dropped. */
+  onDrop: (files: File[]) => void
+  /** Filter accepted file types (e.g. ["image/*", ".pdf"]). */
+  accept?: string[]
+  /** Maximum number of files. */
+  maxFiles?: number
+  /** Whether drop is disabled. */
+  disabled?: boolean | (() => boolean)
+}
+
+export interface UseFileDropResult {
+  /** Whether files are being dragged over the drop zone. */
+  isOver: () => boolean
+  /** Whether files are being dragged anywhere on the page. */
+  isDraggingFiles: () => boolean
+}
+
+/**
+ * File drop zone with signal-driven state.
+ * Uses the native file drag events via pragmatic-drag-and-drop.
+ *
+ * @example
+ * ```tsx
+ * let dropZone: HTMLElement | null = null
+ *
+ * const { isOver, isDraggingFiles } = useFileDrop({
+ *   element: () => dropZone,
+ *   accept: ["image/*", ".pdf"],
+ *   maxFiles: 5,
+ *   onDrop: (files) => upload(files),
+ * })
+ *
+ * <div
+ *   ref={(el) => dropZone = el}
+ *   class={isOver() ? "drop-active" : isDraggingFiles() ? "drop-ready" : ""}
+ * >
+ *   Drop files here
+ * </div>
+ * ```
+ */
+export function useFileDrop(options: UseFileDropOptions): UseFileDropResult {
+  const isOver = signal(false)
+  const isDraggingFiles = signal(false)
+  let cleanup: (() => void) | undefined
+
+  function matchesAccept(file: File, accept: string[]): boolean {
+    return accept.some((pattern) => {
+      if (pattern.startsWith(".")) {
+        return file.name.toLowerCase().endsWith(pattern.toLowerCase())
+      }
+      if (pattern.endsWith("/*")) {
+        return file.type.startsWith(pattern.slice(0, -1))
+      }
+      return file.type === pattern
+    })
+  }
+
+  function setup() {
+    if (cleanup) cleanup()
+
+    const el = options.element()
+    if (!el) return
+
+    const cleanups: (() => void)[] = []
+
+    // Monitor for file drags anywhere on the page
+    cleanups.push(
+      monitorForExternal({
+        canMonitor: ({ source }) => containsFiles({ source }),
+        onDragStart: () => isDraggingFiles.set(true),
+        onDrop: () => isDraggingFiles.set(false),
+      }),
+    )
+
+    // Drop target on the specific element
+    cleanups.push(
+      dropTargetForExternal({
+        element: el,
+        canDrop: ({ source }) => {
+          const disabled = options.disabled
+          if (typeof disabled === "function" ? disabled() : disabled) return false
+          return containsFiles({ source })
+        },
+        onDragEnter: () => isOver.set(true),
+        onDragLeave: () => isOver.set(false),
+        onDrop: ({ source }) => {
+          isOver.set(false)
+          isDraggingFiles.set(false)
+
+          let files = getFiles({ source })
+
+          // Filter by accept
+          if (options.accept && options.accept.length > 0) {
+            files = files.filter((f) => matchesAccept(f, options.accept as string[]))
+          }
+
+          // Limit count
+          if (options.maxFiles && files.length > options.maxFiles) {
+            files = files.slice(0, options.maxFiles)
+          }
+
+          if (files.length > 0) {
+            options.onDrop(files)
+          }
+        },
+      }),
+    )
+
+    cleanup = () => {
+      for (const fn of cleanups) fn()
+    }
+  }
+
+  queueMicrotask(setup)
+
+  onCleanup(() => {
+    if (cleanup) cleanup()
+  })
+
+  return { isOver, isDraggingFiles }
+}

package/src/use-sortable.ts

@@ -0,0 +1,224 @@
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element"
+import {
+  attachClosestEdge,
+  type Edge,
+  extractClosestEdge,
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"
+import { onCleanup, signal } from "@pyreon/reactivity"
+import type { DropEdge, UseSortableOptions, UseSortableResult } from "./types"
+
+const SORT_KEY = "__pyreon_sortable_key"
+const SORT_ID = "__pyreon_sortable_id"
+
+let _sortableCounter = 0
+
+/**
+ * Sortable list with signal-driven state, auto-scroll, and edge detection.
+ *
+ * Features:
+ * - Keyed drag items matching `<For by={...}>` pattern
+ * - Auto-scroll when dragging near container edges
+ * - Closest-edge detection (drop above/below or left/right)
+ * - Axis constraint (vertical/horizontal)
+ * - Keyboard reordering (Alt+Arrow keys)
+ *
+ * @example
+ * ```tsx
+ * const items = signal([
+ *   { id: "1", name: "Alice" },
+ *   { id: "2", name: "Bob" },
+ *   { id: "3", name: "Charlie" },
+ * ])
+ *
+ * const { containerRef, itemRef, activeId, overId, overEdge } = useSortable({
+ *   items,
+ *   by: (item) => item.id,
+ *   onReorder: (newItems) => items.set(newItems),
+ * })
+ *
+ * <ul ref={containerRef}>
+ *   <For each={items()} by={item => item.id}>
+ *     {(item) => (
+ *       <li
+ *         ref={itemRef(item.id)}
+ *         class={activeId() === item.id ? "dragging" : ""}
+ *         style={overId() === item.id ? `border-${overEdge()}: 2px solid blue` : ""}
+ *       >
+ *         {item.name}
+ *       </li>
+ *     )}
+ *   </For>
+ * </ul>
+ * ```
+ */
+export function useSortable<T>(options: UseSortableOptions<T>): UseSortableResult {
+  const sortableId = `sortable-${++_sortableCounter}`
+  const activeId = signal<string | number | null>(null)
+  const overId = signal<string | number | null>(null)
+  const overEdge = signal<DropEdge | null>(null)
+  const axis = options.axis ?? "vertical"
+
+  const cleanups: (() => void)[] = []
+
+  /** Perform the reorder based on current active/over/edge state. */
+  function performReorder() {
+    const dragId = activeId.peek()
+    const dropId = overId.peek()
+    const edge = overEdge.peek()
+    if (dragId == null || dropId == null || dragId === dropId) return
+
+    const currentItems = options.items()
+    const dragIndex = currentItems.findIndex((item) => options.by(item) === dragId)
+    const dropIndex = currentItems.findIndex((item) => options.by(item) === dropId)
+    if (dragIndex === -1 || dropIndex === -1) return
+
+    const reordered = [...currentItems]
+    const [moved] = reordered.splice(dragIndex, 1)
+    if (!moved) return
+
+    // Determine insert position based on closest edge
+    const rawInsert =
+      edge === "bottom" || edge === "right"
+        ? dropIndex >= dragIndex
+          ? dropIndex
+          : dropIndex + 1
+        : dropIndex <= dragIndex
+          ? dropIndex
+          : dropIndex - 1
+    const insertAt = Math.max(0, Math.min(rawInsert, reordered.length))
+
+    reordered.splice(insertAt, 0, moved)
+    options.onReorder(reordered)
+  }
+
+  function containerRef(el: HTMLElement) {
+    // Auto-scroll when dragging near container edges
+    cleanups.push(
+      autoScrollForElements({
+        element: el,
+        canScroll: ({ source }) => source.data[SORT_ID] === sortableId,
+      }),
+    )
+
+    // Container is a drop target for reorder finalization
+    cleanups.push(
+      dropTargetForElements({
+        element: el,
+        getData: () => ({ [SORT_ID]: sortableId }),
+        canDrop: ({ source }) => source.data[SORT_ID] === sortableId,
+        onDrop: () => {
+          performReorder()
+          activeId.set(null)
+          overId.set(null)
+          overEdge.set(null)
+        },
+      }),
+    )
+
+    // Keyboard reordering: Alt+Arrow keys
+    const keyHandler = (e: KeyboardEvent) => {
+      if (!e.altKey) return
+
+      const isUp = axis === "vertical" ? e.key === "ArrowUp" : e.key === "ArrowLeft"
+      const isDown = axis === "vertical" ? e.key === "ArrowDown" : e.key === "ArrowRight"
+      if (!isUp && !isDown) return
+
+      const focused = document.activeElement as HTMLElement | null
+      if (!focused || !el.contains(focused)) return
+
+      const focusedKey = focused.dataset.pyreonSortKey
+      if (!focusedKey) return
+
+      e.preventDefault()
+
+      const currentItems = options.items()
+      const currentIndex = currentItems.findIndex((item) => String(options.by(item)) === focusedKey)
+      if (currentIndex === -1) return
+
+      const targetIndex = isUp ? currentIndex - 1 : currentIndex + 1
+      if (targetIndex < 0 || targetIndex >= currentItems.length) return
+
+      const reordered = [...currentItems]
+      const temp = reordered[currentIndex]
+      reordered[currentIndex] = reordered[targetIndex] as T
+      reordered[targetIndex] = temp as T
+      options.onReorder(reordered)
+
+      // Restore focus after DOM update
+      requestAnimationFrame(() => {
+        const items = el.querySelectorAll("[data-pyreon-sort-key]")
+        for (const item of items) {
+          if ((item as HTMLElement).dataset.pyreonSortKey === focusedKey) {
+            ;(item as HTMLElement).focus()
+            break
+          }
+        }
+      })
+    }
+
+    el.addEventListener("keydown", keyHandler)
+    cleanups.push(() => el.removeEventListener("keydown", keyHandler))
+  }
+
+  function itemRef(key: string | number): (el: HTMLElement) => void {
+    return (el: HTMLElement) => {
+      el.dataset.pyreonSortKey = String(key)
+      if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "0")
+      el.setAttribute("role", "listitem")
+      el.setAttribute("aria-roledescription", "sortable item")
+
+      const allowedEdges: Edge[] = axis === "vertical" ? ["top", "bottom"] : ["left", "right"]
+
+      const cleanup = combine(
+        draggable({
+          element: el,
+          getInitialData: () => ({
+            [SORT_KEY]: key,
+            [SORT_ID]: sortableId,
+          }),
+          onDragStart: () => activeId.set(key),
+          onDrop: () => {
+            queueMicrotask(() => {
+              activeId.set(null)
+              overId.set(null)
+              overEdge.set(null)
+            })
+          },
+        }),
+        dropTargetForElements({
+          element: el,
+          getData: ({ input, element }) =>
+            attachClosestEdge(
+              { [SORT_KEY]: key, [SORT_ID]: sortableId },
+              { input, element, allowedEdges },
+            ),
+          canDrop: ({ source }) => source.data[SORT_ID] === sortableId,
+          onDragEnter: ({ self }) => {
+            overId.set(key)
+            overEdge.set(extractClosestEdge(self.data) as DropEdge | null)
+          },
+          onDrag: ({ self }) => {
+            overEdge.set(extractClosestEdge(self.data) as DropEdge | null)
+          },
+          onDragLeave: () => {
+            if (overId.peek() === key) {
+              overId.set(null)
+              overEdge.set(null)
+            }
+          },
+        }),
+      )
+
+      cleanups.push(cleanup)
+    }
+  }
+
+  onCleanup(() => {
+    for (const cleanup of cleanups) cleanup()
+    cleanups.length = 0
+  })
+
+  return { containerRef, itemRef, activeId, overId, overEdge }
+}