drag-to-reorder

Wrap items in DndContext and SortableContext, use useSortable per item, and reorder state with arrayMove inside onDragEnd. Configure MouseSensor with a distance constraint and TouchSensor with a delay so clicks, taps, and scrolling still work.

Use rectSortingStrategy for any layout that wraps onto multiple rows or contains variable-width items. horizontalListSortingStrategy assumes a single row, so dragging across rows causes overlap instead of reflow.

CSS.Transform.toString emits scaleX/scaleY, and the sorting strategy applies a non-1 scale to the lifted item so it stretches to the neighbor's width. Switch to CSS.Translate.toString, which applies translation only and preserves the item's own size.

Use a separate TouchSensor with an activation constraint like delay: 200 and tolerance: 6 so long-press drags while taps and swipes still work. Also add touch-action: none (Tailwind touch-none) to the draggable element so the browser does not hijack the gesture for scrolling.

Live-reordering in onDragOver with variable-size items causes an oscillating A-B state loop that triggers the error. Reorder only once in onDragEnd instead, and avoid pairing live reorder with an empty DragOverlay.