oxios 1.10.1

Oxios Agent OS — Agent Operating System powered by oxi-sdk
import { useCallback, useRef } from 'react'

interface ResizeHandleProps {
  width: number
  onResize: (width: number) => void
}

export function ResizeHandle({ onResize }: ResizeHandleProps) {
  const isDragging = useRef(false)

  const handleMouseDown = useCallback(
    (e: React.MouseEvent) => {
      e.preventDefault()
      isDragging.current = true
      document.body.style.cursor = 'col-resize'
      document.body.style.userSelect = 'none'

      const handleMouseMove = (e: MouseEvent) => {
        if (!isDragging.current) return
        onResize(e.clientX)
      }

      const handleMouseUp = () => {
        isDragging.current = false
        document.body.style.cursor = ''
        document.body.style.userSelect = ''
        document.removeEventListener('mousemove', handleMouseMove)
        document.removeEventListener('mouseup', handleMouseUp)
      }

      document.addEventListener('mousemove', handleMouseMove)
      document.addEventListener('mouseup', handleMouseUp)
    },
    [onResize],
  )

  // B6: hidden on touch/mobile devices — resize is a desktop interaction
  return (
    <div
      className="h-1 cursor-col-resize hover:bg-primary/20 active:bg-primary/40 transition-colors hidden lg:block"
      onMouseDown={handleMouseDown}
    />
  )
}