import type { DragMoveEvent } from '@dnd-kit/core'; export function computeSideForDragMove( id: string, e: DragMoveEvent, orientation: 'vertical' | 'horizontal' = 'vertical', ): 'before' | 'after' | null { if (e.over == null || e.over.id !== id) { return null; } if (e.active.rect.current.initial == null) return null; const overRect = e.over.rect; if (orientation === 'horizontal') { // For horizontal layouts (tabs side-by-side), use left/right logic const activeLeft = e.active.rect.current.translated?.left ?? e.active.rect.current.initial.left + e.delta.x; const pointerX = activeLeft + e.active.rect.current.initial.width / 2; const hoverLeft = overRect.left; const hoverRight = overRect.right; const hoverMiddleX = hoverLeft + (hoverRight - hoverLeft) / 2; return pointerX < hoverMiddleX ? 'before' : 'after'; // 'before' = left, 'after' = right } else { // For vertical layouts, use top/bottom logic const activeTop = e.active.rect.current.translated?.top ?? e.active.rect.current.initial.top + e.delta.y; const pointerY = activeTop + e.active.rect.current.initial.height / 2; const hoverTop = overRect.top; const hoverBottom = overRect.bottom; const hoverMiddleY = (hoverBottom - hoverTop) / 2; const hoverClientY = pointerY - hoverTop; return hoverClientY < hoverMiddleY ? 'before' : 'after'; } }