Blame for client/src/treedrag.js

const STYLE_ID = 'tree-drag-styles'
const ROW_SELECTOR = '[data-td-row]'
const INTERACTIVE_SELECTOR = 'button, input, select, textarea, [contenteditable]'
const MOUSE_SLOP = 4
const TOUCH_DELAY = 350
const HOVER_EXPAND_DELAY = 600

function installStyles() {
  if (document.getElementById(STYLE_ID)) return
  const style = document.createElement('style')
  style.id = STYLE_ID
  style.textContent = `
    body.td-dragging, body.td-dragging * { cursor: grabbing !important; }
    body.td-dragging { user-select: none; -webkit-user-select: none; }
    .td-drag-source { opacity: .38 !important; }
    .td-drag-ghost {
      position: fixed; z-index: 2147483647; pointer-events: none;
      display: flex; align-items: center; gap: 8px;
      max-width: min(320px, calc(100vw - 24px)); overflow: hidden;
      padding: 6px 10px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
      border-radius: 6px; background: var(--bg, Canvas); color: var(--fg, CanvasText);
      box-shadow: 0 5px 18px color-mix(in srgb, currentColor 16%, transparent);
      font: 13px/1.25 system-ui, -apple-system, sans-serif; white-space: nowrap;
      text-overflow: ellipsis; opacity: .94; transform: translate(10px, 10px);
    }
    .td-drag-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .td-drag-count {
      flex: none; padding: 1px 6px; border-radius: 999px;
      background: color-mix(in srgb, currentColor 10%, transparent);
      font-size: 11px; font-weight: 600;
    }
    .td-drop-line {
      position: fixed; z-index: 2147483646; height: 2px; pointer-events: none;
      border-radius: 2px; background: currentColor; color: var(--accent, currentColor);
      box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
    }
    .td-drop-line::before {
      content: ''; position: absolute; left: -3px; top: -2px; width: 6px; height: 6px;
      border: 1.5px solid currentColor; border-radius: 50%; background: var(--bg, Canvas);
    }
    .td-drop-into { outline: 1px solid color-mix(in srgb, currentColor 28%, transparent); outline-offset: -1px; }
  `
  document.head.appendChild(style)
}

function numberAttr(row, name, fallback = 0) {
  const value = Number(row.dataset[name])
  return Number.isFinite(value) ? value : fallback
}

/**
 * Add pointer-driven tree reordering to a container.
 *
 * @param {HTMLElement} container
 * @param {{
 *   onMove: (move: {keys: string[], parentKey: string, index: number}) => void,
 *   onHoverExpand?: (key: string) => void
 * }} handlers
 * @returns {() => void}
 */
export function attachTreeDrag(container, { onMove, onHoverExpand } = {}) {
  if (!(container instanceof Element)) throw new TypeError('attachTreeDrag requires an Element container')
  installStyles()

  let pending = null
  let drag = null
  let touchTimer = null
  let hoverTimer = null
  let hoverKey = null
  let suppressClick = false
  let suppressTimer = null
  let scrollFrame = null
  let scrollSpeed = 0

  const directRow = target => {
    const row = target instanceof Element ? target.closest(ROW_SELECTOR) : null
    return row && container.contains(row) ? row : null
  }

  const readRows = () => [...container.querySelectorAll(ROW_SELECTOR)].map((el, order) => ({
    el,
    order,
    key: el.dataset.key || '',
    parentKey: el.dataset.parent || '',
    index: numberAttr(el, 'index'),
    depth: numberAttr(el, 'depth'),
    selected: el.dataset.selected === '1',
  }))

  const clearTouchTimer = () => {
    clearTimeout(touchTimer)
    touchTimer = null
  }

  const clearHover = () => {
    clearTimeout(hoverTimer)
    hoverTimer = null
    hoverKey = null
  }

  const clearDropVisual = () => {
    drag?.intoRow?.classList.remove('td-drop-into')
    if (drag) drag.intoRow = null
    drag?.indicator?.remove()
    if (drag) drag.indicator = null
  }

  const refreshRows = () => {
    if (!drag) return []
    for (const el of drag.sourceElements) el.classList.remove('td-drag-source')
    drag.sourceElements.clear()

    const rows = readRows()
    drag.sourceKeys = new Set(drag.keys)
    for (const key of drag.keys) {
      const rootAt = rows.findIndex(row => row.key === key)
      if (rootAt < 0) continue
      const rootDepth = rows[rootAt].depth
      for (let i = rootAt + 1; i < rows.length && rows[i].depth > rootDepth; i++) {
        drag.sourceKeys.add(rows[i].key)
      }
    }
    for (const row of rows) {
      if (!drag.sourceKeys.has(row.key)) continue
      row.el.classList.add('td-drag-source')
      drag.sourceElements.add(row.el)
    }
    return rows
  }

  const stopAutoScroll = () => {
    scrollSpeed = 0
    cancelAnimationFrame(scrollFrame)
    scrollFrame = null
  }

  const cleanupDrag = () => {
    clearTouchTimer()
    clearHover()
    stopAutoScroll()
    clearDropVisual()
    if (drag) {
      const finished = drag
      drag = null
      for (const el of finished.sourceElements) el.classList.remove('td-drag-source')
      finished.ghost.remove()
      if (container.hasPointerCapture?.(finished.pointerId)) container.releasePointerCapture(finished.pointerId)
    }
    document.body.classList.remove('td-dragging')
    pending = null
  }

  const cancel = () => cleanupDrag()

  const beginDrag = event => {
    if (!pending || drag) return
    const rows = readRows()
    const source = rows.find(row => row.el === pending.row)
    if (!source) return cancel()

    const selected = source.selected ? rows.filter(row => row.selected) : []
    const roots = selected.length >= 2 ? selected : [source]

    clearTouchTimer()
    const ghost = document.createElement('div')
    ghost.className = 'td-drag-ghost'
    const label = document.createElement('span')
    label.className = 'td-drag-label'
    label.textContent = pending.row.getAttribute('aria-label') || pending.row.textContent.trim()
    ghost.appendChild(label)
    if (roots.length > 1) {
      const count = document.createElement('span')
      count.className = 'td-drag-count'
      count.textContent = `${roots.length} items`
      ghost.appendChild(count)
    }
    document.body.appendChild(ghost)
    document.body.classList.add('td-dragging')

    drag = {
      pointerId: pending.pointerId,
      keys: roots.map(row => row.key),
      roots: roots.map(row => ({ key: row.key, parentKey: row.parentKey, index: row.index })),
      ghost,
      indicator: null,
      intoRow: null,
      candidate: null,
      sourceKeys: new Set(),
      sourceElements: new Set(),
      expandedKeys: new Set(),
      x: event.clientX,
      y: event.clientY,
    }
    container.setPointerCapture?.(pending.pointerId)
    refreshRows()
    moveGhost(event.clientX, event.clientY)
    updateDrop(event.clientX, event.clientY)
  }

  const moveGhost = (x, y) => {
    if (!drag) return
    drag.ghost.style.left = `${x}px`
    drag.ghost.style.top = `${y}px`
  }

  const subtreeEnd = (rows, row) => {
    let end = row
    for (let i = row.order + 1; i < rows.length && rows[i].depth > row.depth; i++) end = rows[i]
    return end
  }

  const childCount = (rows, parentKey) => rows.filter(row => row.parentKey === parentKey).length

  const isLastSibling = (rows, row) => {
    const peers = rows.filter(item => item.parentKey === row.parentKey && !drag.sourceKeys.has(item.key))
    return peers.at(-1)?.key === row.key
  }

  const indentSize = rows => {
    const samples = []
    for (const row of rows) {
      const parent = rows.find(item => item.key === row.parentKey)
      if (!parent) continue
      const delta = row.el.getBoundingClientRect().left - parent.el.getBoundingClientRect().left
      if (delta > 4 && delta < 80) samples.push(delta)
    }
    return samples.length ? samples.sort((a, b) => a - b)[Math.floor(samples.length / 2)] : 18
  }

  const afterCandidate = (rows, hovered, pointerX) => {
    let anchor = hovered
    const indent = indentSize(rows)

    // At the end of a branch, moving left promotes the insertion point one
    // ancestor at a time. Only climb through last-child links: otherwise the
    // drop still belongs before the next sibling in the current branch.
    while (anchor.parentKey && isLastSibling(rows, anchor)) {
      const parent = rows.find(row => row.key === anchor.parentKey)
      if (!parent || pointerX >= anchor.el.getBoundingClientRect().left - indent * 0.45) break
      anchor = parent
    }

    const end = subtreeEnd(rows, anchor)
    return {
      parentKey: anchor.parentKey,
      rawIndex: anchor.index + 1,
      depth: anchor.depth,
      lineTop: end.el.getBoundingClientRect().bottom,
      lineLeft: anchor.el.getBoundingClientRect().left,
      intoRow: null,
    }
  }

  const showCandidate = (candidate, containerRect) => {
    clearDropVisual()
    if (!drag || !candidate) return
    drag.candidate = candidate
    if (candidate.intoRow) {
      candidate.intoRow.classList.add('td-drop-into')
      drag.intoRow = candidate.intoRow
      return
    }
    const line = document.createElement('div')
    line.className = 'td-drop-line'
    const left = Math.max(containerRect.left + 4, candidate.lineLeft)
    line.style.left = `${left}px`
    line.style.top = `${candidate.lineTop - 1}px`
    line.style.width = `${Math.max(16, containerRect.right - left - 5)}px`
    document.body.appendChild(line)
    drag.indicator = line
  }

  const armHoverExpand = row => {
    if (!drag || row.el.dataset.collapsed !== '1' || drag.expandedKeys.has(row.key)) return clearHover()
    if (hoverKey === row.key && hoverTimer) return
    clearHover()
    hoverKey = row.key
    hoverTimer = setTimeout(() => {
      if (!drag || hoverKey !== row.key) return
      drag.expandedKeys.add(row.key)
      hoverTimer = null
      hoverKey = null
      if (typeof onHoverExpand === 'function') onHoverExpand(row.key)
      requestAnimationFrame(() => {
        if (!drag) return
        refreshRows()
        updateDrop(drag.x, drag.y)
      })
    }, HOVER_EXPAND_DELAY)
  }

  const updateDrop = (x, y) => {
    if (!drag) return
    drag.x = x
    drag.y = y
    const rows = refreshRows()
    const containerRect = container.getBoundingClientRect()
    const hit = document.elementFromPoint(x, y)
    const hitEl = directRow(hit)
    // A leftward "after" drop can sit in the indentation before the row, so
    // fall back to the row occupying this vertical band when elementFromPoint
    // lands on an ancestor wrapper instead of the row itself.
    const hovered = hitEl
      ? rows.find(row => row.el === hitEl)
      : x >= containerRect.left && x <= containerRect.right
        ? rows.find(row => {
            const rect = row.el.getBoundingClientRect()
            return y >= rect.top && y <= rect.bottom
          })
        : null

    if (!hovered || drag.sourceKeys.has(hovered.key)) {
      drag.candidate = null
      clearHover()
      clearDropVisual()
      return
    }

    armHoverExpand(hovered)
    const rect = hovered.el.getBoundingClientRect()
    const ratio = rect.height ? (y - rect.top) / rect.height : 0.5
    let candidate

    if (ratio < 0.3) {
      candidate = {
        parentKey: hovered.parentKey,
        rawIndex: hovered.index,
        depth: hovered.depth,
        lineTop: rect.top,
        lineLeft: rect.left,
        intoRow: null,
      }
    } else if (ratio > 0.7 || hovered.el.dataset.nest === '0') {
      candidate = afterCandidate(rows, hovered, x)
    } else {
      candidate = {
        parentKey: hovered.key,
        // Keep this in pre-removal coordinates, like before/after candidates.
        // pointerUp subtracts every moved direct child to produce the API's
        // post-removal index.
        rawIndex: childCount(rows, hovered.key),
        depth: hovered.depth + 1,
        intoRow: hovered.el,
      }
    }

    if (drag.sourceKeys.has(candidate.parentKey)) {
      drag.candidate = null
      clearDropVisual()
      return
    }
    showCandidate(candidate, containerRect)
  }

  const updateAutoScroll = y => {
    if (!drag) return
    const rect = container.getBoundingClientRect()
    const edge = Math.min(48, Math.max(24, rect.height * 0.12))
    if (y < rect.top + edge) scrollSpeed = -Math.max(2, ((rect.top + edge - y) / edge) * 12)
    else if (y > rect.bottom - edge) scrollSpeed = Math.max(2, ((y - (rect.bottom - edge)) / edge) * 12)
    else scrollSpeed = 0

    if (!scrollSpeed || scrollFrame) return
    const tick = () => {
      scrollFrame = null
      if (!drag || !scrollSpeed) return
      const before = container.scrollTop
      container.scrollTop += scrollSpeed
      if (container.scrollTop !== before) updateDrop(drag.x, drag.y)
      scrollFrame = requestAnimationFrame(tick)
    }
    scrollFrame = requestAnimationFrame(tick)
  }

  const pointerDown = event => {
    if (pending || drag || (event.pointerType === 'mouse' && event.button !== 0)) return
    // controls inside a row (trash, caret) must not arm a drag — except ones
    // that opt back in with data-td-drag (a row whose label IS a button)
    const control = event.target instanceof Element && event.target.closest(INTERACTIVE_SELECTOR)
    if (control && control.dataset.tdDrag == null) return
    const row = directRow(event.target)
    if (!row) return
    pending = {
      row,
      pointerId: event.pointerId,
      pointerType: event.pointerType,
      x: event.clientX,
      y: event.clientY,
    }
    if (event.pointerType === 'touch') {
      touchTimer = setTimeout(() => {
        if (pending) beginDrag({ clientX: pending.x, clientY: pending.y })
      }, TOUCH_DELAY)
    }
  }

  const pointerMove = event => {
    if (drag) {
      if (event.pointerId !== drag.pointerId) return
      event.preventDefault()
      moveGhost(event.clientX, event.clientY)
      updateDrop(event.clientX, event.clientY)
      updateAutoScroll(event.clientY)
      return
    }
    if (!pending || event.pointerId !== pending.pointerId) return
    const distance = Math.hypot(event.clientX - pending.x, event.clientY - pending.y)
    if (pending.pointerType === 'touch') {
      // A finger that moves before the long press is scrolling, not dragging.
      if (distance > MOUSE_SLOP) {
        clearTouchTimer()
        pending = null
      }
    } else if (distance >= MOUSE_SLOP) {
      beginDrag(event)
      event.preventDefault()
    }
  }

  const pointerUp = event => {
    if (!drag) {
      if (pending?.pointerId === event.pointerId) {
        clearTouchTimer()
        pending = null
      }
      return
    }
    if (event.pointerId !== drag.pointerId) return
    event.preventDefault()
    const { keys, roots, candidate } = drag
    let move = null
    if (candidate) {
      const removedBefore = roots.filter(root =>
        root.parentKey === candidate.parentKey && root.index < candidate.rawIndex
      ).length
      const index = Math.max(0, candidate.rawIndex - removedBefore)
      const only = roots[0]
      if (roots.length > 1 || candidate.parentKey !== only.parentKey || index !== only.index) {
        move = { keys, parentKey: candidate.parentKey, index }
      }
    }
    suppressClick = true
    clearTimeout(suppressTimer)
    suppressTimer = setTimeout(() => { suppressClick = false }, 0)
    cleanupDrag()
    if (move && typeof onMove === 'function') onMove(move)
  }

  const pointerCancel = event => {
    if (drag?.pointerId === event.pointerId || pending?.pointerId === event.pointerId) cancel()
  }

  const keyDown = event => {
    if (event.key !== 'Escape' || (!pending && !drag)) return
    event.preventDefault()
    cancel()
  }

  const click = event => {
    if (!suppressClick) return
    suppressClick = false
    event.preventDefault()
    event.stopImmediatePropagation()
  }

  const nativeDragStart = event => {
    if (directRow(event.target)) event.preventDefault()
  }

  // Browsers may turn a touch pointer into a scroll after the long press and
  // issue pointercancel. Suppress that native scroll only once our drag is
  // active; ordinary pre-drag swipes remain native container scrolling.
  const touchMove = event => {
    if (drag) event.preventDefault()
  }

  container.addEventListener('pointerdown', pointerDown)
  container.addEventListener('pointermove', pointerMove, { passive: false })
  container.addEventListener('pointerup', pointerUp)
  container.addEventListener('pointercancel', pointerCancel)
  container.addEventListener('lostpointercapture', pointerCancel)
  container.addEventListener('click', click, true)
  container.addEventListener('dragstart', nativeDragStart)
  container.addEventListener('touchmove', touchMove, { passive: false })
  document.addEventListener('keydown', keyDown)

  return () => {
    cleanupDrag()
    clearTimeout(suppressTimer)
    container.removeEventListener('pointerdown', pointerDown)
    container.removeEventListener('pointermove', pointerMove)
    container.removeEventListener('pointerup', pointerUp)
    container.removeEventListener('pointercancel', pointerCancel)
    container.removeEventListener('lostpointercapture', pointerCancel)
    container.removeEventListener('click', click, true)
    container.removeEventListener('dragstart', nativeDragStart)
    container.removeEventListener('touchmove', touchMove)
    document.removeEventListener('keydown', keyDown)
  }
}