feat: kanban-style drag feedback with a real drop gap

The old feedback was a card faded to 0.4 opacity and a 3px line above the
target. The fade read as "disabled" rather than "held", and a thin line is
a weak signal for where something lands.

The dragged card lifts now: full opacity, accent border, raised shadow, a
small scale and tilt. Cards it passes slide by the space it vacated, which
opens a real gap at the destination. The gap can't disagree with where the
card lands, because it is where the card lands.

Also fixes something found while building it. targetIndexFor measured live
rects, but those rows carry the shift transforms the drag applies, so the
midpoints used to pick the target moved as a result of picking it and the
choice oscillated. Slot geometry is captured once at drag start, relative
to the list so scrolling mid-drag is fine.

The displacement rule moves to src/lib/drag.js with tests. Its up/down
boundaries are where off-by-ones live.

src/lib/drag.js

@@ -0,0 +1,20 @@
+/**
+ * How far a row should slide, in pixels, while another row is being dragged
+ * over the list.
+ *
+ * A lifted card vacates exactly its own height plus one gap, so every row it
+ * passes travels by that same amount — `shift` — and everything else stays
+ * put. The result is a real gap at the destination, which doubles as the drop
+ * indicator and is therefore always accurate.
+ *
+ * Negative moves a row up the list, positive moves it down.
+ */
+export function displacement(index, fromIndex, toIndex, shift) {
+  if (fromIndex === null || toIndex === null) return 0
+  if (index === fromIndex) return 0
+
+  if (fromIndex < toIndex && index > fromIndex && index <= toIndex) return -shift
+  if (fromIndex > toIndex && index >= toIndex && index < fromIndex) return shift
+
+  return 0
+}

src/lib/drag.test.js

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest'
+import { displacement } from './drag.js'
+
+const SHIFT = 70
+
+describe('displacement', () => {
+  it('is zero when nothing is being dragged', () => {
+    expect(displacement(2, null, null, SHIFT)).toBe(0)
+  })
+
+  it('is zero for the dragged row itself', () => {
+    expect(displacement(1, 1, 3, SHIFT)).toBe(0)
+  })
+
+  it('is zero when the row would not move', () => {
+    expect(displacement(2, 2, 2, SHIFT)).toBe(0)
+  })
+
+  describe('dragging downward', () => {
+    // Row 0 heading to slot 2: rows 1 and 2 slide up into the vacated space,
+    // row 3 stays put.
+    it('slides passed rows up', () => {
+      expect(displacement(1, 0, 2, SHIFT)).toBe(-SHIFT)
+      expect(displacement(2, 0, 2, SHIFT)).toBe(-SHIFT)
+    })
+
+    it('leaves rows beyond the destination alone', () => {
+      expect(displacement(3, 0, 2, SHIFT)).toBe(0)
+    })
+
+    it('leaves rows above the origin alone', () => {
+      expect(displacement(0, 1, 3, SHIFT)).toBe(0)
+    })
+
+    it('includes the destination row itself', () => {
+      expect(displacement(3, 0, 3, SHIFT)).toBe(-SHIFT)
+    })
+  })
+
+  describe('dragging upward', () => {
+    // Row 3 heading to slot 1: rows 1 and 2 slide down.
+    it('slides passed rows down', () => {
+      expect(displacement(1, 3, 1, SHIFT)).toBe(SHIFT)
+      expect(displacement(2, 3, 1, SHIFT)).toBe(SHIFT)
+    })
+
+    it('leaves rows above the destination alone', () => {
+      expect(displacement(0, 3, 1, SHIFT)).toBe(0)
+    })
+
+    it('leaves rows below the origin alone', () => {
+      expect(displacement(4, 3, 1, SHIFT)).toBe(0)
+    })
+
+    it('includes the destination row itself', () => {
+      expect(displacement(0, 2, 0, SHIFT)).toBe(SHIFT)
+    })
+  })
+
+  it('moves exactly one row for a single-step drag', () => {
+    expect(displacement(1, 0, 1, SHIFT)).toBe(-SHIFT)
+    expect(displacement(2, 0, 1, SHIFT)).toBe(0)
+  })
+
+  it('displaces every row between the ends of a full-list drag', () => {
+    const shifts = [0, 1, 2, 3, 4].map(i => displacement(i, 0, 4, SHIFT))
+    expect(shifts).toEqual([0, -SHIFT, -SHIFT, -SHIFT, -SHIFT])
+  })
+})