Drag-to-Reorder List

1"use client";
2 
3import { useEffect, useLayoutEffect, useRef, useState } from "react";
4import { MotionConfig, animate, motion, useReducedMotion, type MotionValue, motionValue } from "motion/react";
5 
6// Drag-to-reorder list with FLIP.
7//
8// Three motion systems working together without fighting, all driven through
9// motion/react's motion values:
10//
11//   1. The dragged card follows the pointer RAW - its y motion value is
12//      `jump()`ed straight from the pointermove handler (no easing: any easing
13//      between hand and card reads as lag; no React render on the hot path).
14//   2. Siblings glide out of the way: as the dragged card crosses slot
15//      boundaries each displaced sibling's y is `animate()`d exactly one slot -
16//      retargetable, so reversing mid-glide just works.
17//   3. The drop is a FLIP: capture First rects before the commit, let React
18//      reflow, then Invert each card back to its old screen pixels and
19//      `animate()` it home. Nothing jumps.
20//
21// Plus rubber-banding past the ends (4:1 damped), pointer capture, multi-touch
22// protection, and a full keyboard path (grip → Space grabs → arrows move →
23// Escape cancels) narrated to screen readers. Requires the lab-theme tokens.
24// Fully Tailwind, no CSS files.
25 
26const DRAG_THRESHOLD = 4;
27const EASE = [0.22, 1, 0.36, 1] as const;
28const MOVE = { duration: 0.2, ease: EASE } as const;
29const LIFT = { duration: 0.16, ease: EASE } as const;
30 
31export interface ReorderItem {
32  id: string;
33  label: string;
34  meta?: string;
35}
36 
37export interface ReorderState {
38  order: string[];
39  dragging: string | null;
40  from: number | null;
41  to: number | null;
42  grabbed: boolean;
43  lastMove: { label: string; from: number; to: number } | null;
44}
45 
46interface DragData {
47  row: HTMLLIElement;
48  pointerId: number;
49  index: number;
50  startY: number;
51  active: boolean;
52  slot: number;
53  to: number;
54  rows?: HTMLLIElement[];
55}
56 
57export default function DragReorderList({
58  items: controlledItems,
59  defaultItems = DEFAULT_ITEMS,
60  onReorder,
61  flip = true,
62  inspect = false,
63  onStateChange,
64}: {
65  /** Controlled item order; pair with onReorder. Omit for uncontrolled. */
66  items?: ReorderItem[];
67  defaultItems?: ReorderItem[];
68  onReorder?: (items: ReorderItem[]) => void;
69  /** false = hard snap, no glides/FLIP. */
70  flip?: boolean;
71  inspect?: boolean;
72  onStateChange?: (state: ReorderState) => void;
73}) {
74  const [uncontrolled, setUncontrolled] = useState(controlledItems ?? defaultItems);
75// … truncated