Function useResizer

src/hooks/useResizer.ts:50–275

(options: UseResizerOptions)

 * @returns Handlers and state for resize interactions
 */
export function useResizer(options: UseResizerOptions): UseResizerResult {
  const {
    direction,
    sizes,
    minSizes,
    maxSizes,
    snapPoints = [],
    snapTolerance = 10,
    step,
    onResizeStart,
    onResize,
    onResizeEnd,
  } = options;

  const [isDragging, setIsDragging] = useState(false);
  const [currentSizes, setCurrentSizes] = useState(sizes);

  const dragStateRef = useRef<{
    dividerIndex: number;
    startPosition: number;
    startSizes: number[];
    pointerId: number;
    pointerType: 'mouse' | 'touch' | 'pen';
    element: HTMLElement | null;
  } | null>(null);

  const rafRef = useRef<number | null>(null);
  const mountedRef = useRef(true);
  const lastPositionRef = useRef<{ x: number; y: number } | null>(null);

  // Use refs to avoid stale closures in event handlers
  const currentSizesRef = useRef(currentSizes);
  currentSizesRef.current = currentSizes;

  const onResizeEndRef = useRef(onResizeEnd);
  onResizeEndRef.current = onResizeEnd;

  // Sync sizes from props when not dragging (React 19 compatible)
  const sizesRef = useRef(sizes);
  useEffect(() => {
    if (
      !isDragging &&
      JSON.stringify(sizes) !== JSON.stringify(sizesRef.current)
    ) {
      sizesRef.current = sizes;
      setCurrentSizes(sizes);
    }
  }, [sizes, isDragging]);

  // Track mounted state for RAF cleanup
  useEffect(() => {
    mountedRef.current = true;
    return () => {
      mountedRef.current = false;
      if (rafRef.current) {
        cancelAnimationFrame(rafRef.current);
        rafRef.current = null;
      }