const isDragging = ref(false)

const onMouseMove = (e: MouseEvent, initialPos: number, initialSize: number): void => {

// Read once per drag: `getComputedStyle` on every pointer move forces a style recalc.

const getRootFontSize = () => opts.value.unit === 'rem' ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize) : 1

const resize = (clientX: number, initialPos: number, initialSize: number, rootFontSize: number): void => {

if (!el.value || !opts.value.resizable) {

return

}

// In RTL mode, we need to invert the delta calculation

let delta: number

if (isRtl) {

// In RTL mode, invert the logic

delta = opts.value.side === 'left' ? initialPos - e.clientX : e.clientX - initialPos

delta = opts.value.side === 'left' ? initialPos - clientX : clientX - initialPos

} else {

// Original LTR logic

delta = opts.value.side === 'left' ? e.clientX - initialPos : initialPos - e.clientX

delta = opts.value.side === 'left' ? clientX - initialPos : initialPos - clientX

}

const newSize = initialSize + delta

let newValue: number

if (opts.value.unit === 'rem') {

// Convert pixels to rem

const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize)

newValue = newSize / rootFontSize

} else if (opts.value.unit === 'px') {

// Use pixel value directly

const initialX = e.clientX

const initialWidth = elWidth

const rootFontSize = getRootFontSize()

isDragging.value = true

const handleMouseMove = (e: MouseEvent) => {

onMouseMove(e, initialX, initialWidth)

resize(e.clientX, initialX, initialWidth, rootFontSize)

}

const handleMouseUp = () => {

document.addEventListener('mouseup', handleMouseUp)

}

const onTouchMove = (e: TouchEvent, initialPos: number, initialSize: number): void => {

if (!el.value || !opts.value.resizable || !e.touches[0]) {

return

}

const parentSize = el.value.parentElement?.offsetWidth || 1

const isRtl = dir.value === 'rtl'

// In RTL mode, we need to invert the delta calculation

let delta: number

if (isRtl) {

// In RTL mode, invert the logic

delta = opts.value.side === 'left' ? initialPos - e.touches[0].clientX : e.touches[0].clientX - initialPos

} else {

// Original LTR logic

delta = opts.value.side === 'left' ? e.touches[0].clientX - initialPos : initialPos - e.touches[0].clientX

}

const newSize = initialSize + delta

// Calculate size based on the selected unit

let newValue: number

if (opts.value.unit === 'rem') {

// Convert pixels to rem

const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize)

newValue = newSize / rootFontSize

} else if (opts.value.unit === 'px') {

// Use pixel value directly

newValue = newSize

} else {

// Default percentage calculation

newValue = (newSize / parentSize) * 100

}

// Auto collapse when dragging near collapsedSize

if (opts.value.collapsible && newValue < (opts.value.collapsedSize + 4)) {

collapse(true)

return

} else if (isCollapsed.value) {

collapse(false)

}

size.value = Math.min(opts.value.maxSize, Math.max(opts.value.minSize, newValue))

}

const onTouchStart = (e: TouchEvent) => {

if (!el.value || !opts.value.resizable || !e.touches[0]) {

return

const initialX = e.touches[0].clientX

const initialWidth = elWidth

const rootFontSize = getRootFontSize()

isDragging.value = true

const handleTouchMove = (e: TouchEvent) => {

onTouchMove(e, initialX, initialWidth)

if (e.touches[0]) {

resize(e.touches[0].clientX, initialX, initialWidth, rootFontSize)

}

}

const handleTouchEnd = () => {