yaak/src-web/lib/dnd.ts

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';
  }
}