@nexxtmove/ui 1.36.0 → 1.38.0

package/src/components/molecules/Tree/Tree.vue

@@ -2,6 +2,7 @@
 import {
   computed,
   nextTick,
+  onBeforeUnmount,
   onMounted,
   ref,
   useId,
@@ -12,6 +13,17 @@ import {
 } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import NexxtIcon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
+import {
+  ghostSlot,
+  hitTest,
+  isNoOp,
+  resolveDrop,
+  samePlace,
+  type DropLayout,
+  type RestSlot,
+  type TreeDrop,
+  type TreeRow as Row,
+} from './tree-drop'
 
 export interface NexxtTreeNode {
   /** Unique within the tree; this is what `selected` and `collapsed` hold. */
@@ -20,6 +32,19 @@ export interface NexxtTreeNode {
   icon?: NexxtIconName
   /** A node with children gets a chevron and can be folded. */
   children?: NexxtTreeNode[]
+  /** Whether this node accepts drops when it currently has no children. */
+  canHaveChildren?: boolean
+  /** Whether this node can be dragged when the tree's `draggable` prop is enabled. */
+  draggable?: boolean
+}
+
+export interface NexxtTreeMove {
+  /** The node being moved. */
+  id: string
+  /** The node that will contain the moved node, or `null` for the tree root. */
+  parentId: string | null
+  /** The zero-based position in the target parent's children. */
+  index: number
 }
 
 export interface NexxtTreeProps {
@@ -27,6 +52,17 @@ export interface NexxtTreeProps {
   nodes: NexxtTreeNode[]
   /** Accessible name for the tree, e.g. the heading above it. */
   label: string
+  /** Enables native drag-and-drop for rows and emits the intended new position. */
+  draggable?: boolean
+  /**
+   * Decides per spot whether the dragged node may land there, on top of the built-in rules (no
+   * drop into its own subtree, only into nodes that can have children). Gets the same shape as
+   * the `move` payload. A refused spot shows no ghost row and drops nothing, like letting go
+   * outside the tree. It runs on every `dragover` — which the browser keeps firing while the
+   * pointer rests — and on every touch move, so keep it cheap and pure: the same spot must always
+   * get the same answer.
+   */
+  canDrop?: (target: NexxtTreeMove) => boolean
 }
 
 export type NexxtTreeSlots = {
@@ -34,20 +70,11 @@ export type NexxtTreeSlots = {
   'node-actions'?(props: { node: NexxtTreeNode; tabindex: 0 | -1 }): unknown
 }
 
-interface Row {
-  node: NexxtTreeNode
-  depth: number
-  parentId: string | null
-  expandable: boolean
-  expanded: boolean
-  position: number
-  setSize: number
-}
-
 defineOptions({ name: 'NexxtTree' })
 
 const props = defineProps<NexxtTreeProps>()
 const slots = defineSlots<NexxtTreeSlots>()
+const emit = defineEmits<{ move: [move: NexxtTreeMove] }>()
 
 const selected = defineModel<string | null>('selected', { default: null })
 /** Ids of the nodes whose children are hidden. Tracking the collapsed ones makes "everything open" the default. */
@@ -65,6 +92,7 @@ const rows = computed(() => {
   const walk = (nodes: NexxtTreeNode[], depth: number, parentId: string | null) => {
     nodes.forEach((node, index) => {
       const expandable = !!node.children?.length
+      const canHaveChildren = node.canHaveChildren ?? !!node.children
       const expanded = expandable && !collapsed.value.includes(node.id)
 
       result.push({
@@ -72,6 +100,8 @@ const rows = computed(() => {
         depth,
         parentId,
         expandable,
+        canHaveChildren,
+        draggable: props.draggable === true && node.draggable !== false,
         expanded,
         position: index + 1,
         setSize: nodes.length,
@@ -86,6 +116,408 @@ const rows = computed(() => {
   return result
 })
 
+const draggingId = ref<string | null>(null)
+/**
+ * The id behind the drag's looks: dimming the source and turning off hover. For a native drag it
+ * lags `draggingId` by a task, as the browser takes its drag image after `dragstart`, and that
+ * image should show the row at full strength.
+ */
+const dragVisualId = ref<string | null>(null)
+const activeDrop = ref<TreeDrop | null>(null)
+const pointerDrag = ref<{
+  id: string
+  pointerId: number
+  startX: number
+  startY: number
+  element: HTMLElement
+  /** Ended by Escape while the finger is still down: the rest of the gesture is ignored. */
+  cancelled: boolean
+} | null>(null)
+/**
+ * Swallows the click a touch drag can end in, so letting go does not also select the row. A new
+ * `pointerdown` clears it: a gesture that ends without a click must not cost the next real one.
+ */
+let suppressClick = false
+
+const sourceRow = computed(() => rows.value.find((row) => row.node.id === draggingId.value))
+
+/**
+ * Only a different spot is written: one that lands the node in the same place, picked through
+ * another row, would still re-render the rows and restart every move that is under way.
+ */
+const setDrop = (next: TreeDrop | null) => {
+  if (!samePlace(activeDrop.value, next)) activeDrop.value = next
+}
+
+/** Rows that are leaving are out of the flow — `absolute` marks them — and take no space. */
+const isLeaving = (element: Element) => element.classList.contains('absolute')
+
+/**
+ * Where the rows land without the ghost row, from the layout rather than from what is on screen:
+ * `offsetTop` ignores the transform of a row that is still sliding.
+ */
+const measureLayout = (): DropLayout => {
+  const container = root.value?.querySelector('[data-tree-id]')?.parentElement
+  const elements = Array.from(container?.children ?? []).filter(
+    (element): element is HTMLElement => element instanceof HTMLElement && !isLeaving(element),
+  )
+  const slots: RestSlot[] = []
+  let ghost: DropLayout['ghost'] = null
+
+  elements.forEach((element, index) => {
+    const top = element.offsetTop
+    const next = elements[index + 1]
+    const gap = parseFloat(getComputedStyle(element).marginBottom) || 0
+    const bottom = next ? next.offsetTop : top + element.offsetHeight + gap
+
+    if ('treeGhost' in element.dataset) {
+      ghost = { top, bottom }
+
+      return
+    }
+
+    const shift = ghost ? ghost.bottom - ghost.top : 0
+    slots.push({
+      id: element.dataset.treeId!,
+      top: top - shift,
+      height: element.offsetHeight,
+      bottom: bottom - shift,
+    })
+  })
+
+  return { slots, ghost }
+}
+
+const isInsideTree = (clientX: number, clientY: number) => {
+  const rect = root.value?.getBoundingClientRect()
+
+  return (
+    !!rect &&
+    clientX >= rect.left &&
+    clientX < rect.right &&
+    clientY >= rect.top &&
+    clientY < rect.bottom
+  )
+}
+
+/**
+ * The spot is only ever cleared by leaving the tree, by hovering the dragged rows, or by a spot
+ * that is refused or already the node's own. The ghost row and the gaps keep the spot it has.
+ */
+const updateDropAt = (clientX: number, clientY: number) => {
+  const source = sourceRow.value
+  if (!source || !isInsideTree(clientX, clientY)) {
+    setDrop(null)
+
+    return
+  }
+
+  const hit = hitTest(measureLayout(), clientY - root.value!.getBoundingClientRect().top)
+  if (hit.kind === 'keep') return
+
+  const row = rows.value.find((candidate) => candidate.node.id === hit.id)
+  const drop = row ? resolveDrop(row, hit.ratio, source.node) : null
+
+  setDrop(drop && !isNoOp(drop, source) && isAllowed(source, drop) ? drop : null)
+}
+
+const isAllowed = (source: Row, drop: TreeDrop) =>
+  props.canDrop?.({ id: source.node.id, parentId: drop.parentId, index: drop.index }) ?? true
+
+/** The ghost row's spot among the rows; `null` while there is none. */
+const ghost = computed(() => {
+  const source = sourceRow.value
+  const slot = source ? ghostSlot(rows.value, props.nodes, activeDrop.value) : null
+
+  return source && slot ? { ...slot, node: source.node } : null
+})
+
+/** A drop inside a collapsed group gets no ghost row: the group row marks itself instead. */
+const collapsedTargetId = computed(() => {
+  const parentId = activeDrop.value?.parentId
+  if (!parentId || ghost.value) return null
+
+  const parent = rows.value.find((row) => row.node.id === parentId)
+
+  return parent?.expandable && !parent.expanded ? parentId : null
+})
+
+/** A symbol, so the ghost row's key can never be a node id. */
+const GHOST_KEY = Symbol('ghost')
+
+/** The rows with the ghost row in between. */
+type Item =
+  | { key: string; ghost: false; row: Row }
+  | { key: symbol; ghost: true; depth: number; node: NexxtTreeNode }
+
+const items = computed(() => {
+  const list: Item[] = rows.value.map((row) => ({ key: row.node.id, ghost: false, row }))
+
+  if (ghost.value) {
+    const { at, depth, node } = ghost.value
+    list.splice(at, 0, { key: GHOST_KEY, ghost: true, depth, node })
+  }
+
+  return list
+})
+
+/** The dragged row and its visible subtree, dimmed on their old spot for as long as the drag lasts. */
+const dimmedIds = computed(() => {
+  const at = rows.value.findIndex((row) => row.node.id === dragVisualId.value)
+  const source = rows.value[at]
+  if (!source) return new Set<string>()
+
+  const ids = new Set([source.node.id])
+  for (let index = at + 1; rows.value[index] && rows.value[index]!.depth > source.depth; index++) {
+    ids.add(rows.value[index]!.node.id)
+  }
+
+  return ids
+})
+
+/**
+ * A collapsed group as drop target takes on the ghost row's surface, as there is no ghost row
+ * under it. The dashed outline is what sets both apart from the selection, which is blue-50 too.
+ */
+const GHOST_SURFACE =
+  'bg-cornflower-blue-50 outline-1 -outline-offset-1 outline-cornflower-blue-600 outline-dashed'
+
+/** Rows do not respond to hover during a drag: the pointer is carrying a row, not pointing. */
+const rowClasses = (row: Row) => {
+  const id = row.node.id
+  const isSelected = selected.value === id
+
+  return [
+    row.draggable ? 'cursor-grab touch-none active:cursor-grabbing' : 'cursor-pointer',
+    isSelected ? 'text-cornflower-blue-600' : 'text-gray-800',
+    !isSelected && !dragVisualId.value && 'hover:bg-gray-100',
+    dimmedIds.value.has(id) && 'opacity-40',
+    collapsedTargetId.value === id && GHOST_SURFACE,
+  ]
+}
+
+/**
+ * The row that was just dropped. It lands where the ghost row was, so it should not fly over the
+ * other labels from its old spot as the `move` transition would have it.
+ */
+let landing: { id: string; parentId: string | null; position: number } | null = null
+
+const onDocumentDragOver = (event: DragEvent) => {
+  if (!root.value?.contains(event.target as Node | null)) setDrop(null)
+}
+
+/**
+ * Escape belongs to the drag while one is under way, so a dialog around the tree does not close
+ * along with it. Caught on `window` in the capture phase, ahead of any listener on the page. A
+ * native drag ends itself on Escape (with a `dragend` and no `drop`); a touch drag is ended here,
+ * and the finger that is still down is ignored until it lifts.
+ */
+const onWindowKeydown = (event: KeyboardEvent) => {
+  if (event.key !== 'Escape' || !draggingId.value) return
+
+  event.preventDefault()
+  event.stopImmediatePropagation()
+
+  const pointer = pointerDrag.value
+  if (!pointer) return
+
+  pointer.element.releasePointerCapture?.(pointer.pointerId)
+  pointer.cancelled = true
+  endDrag()
+}
+
+const startDrag = (id: string) => {
+  draggingId.value = id
+  landing = null
+  setDrop(null)
+  window.addEventListener('keydown', onWindowKeydown, true)
+  document.addEventListener('dragover', onDocumentDragOver)
+}
+
+const endDrag = () => {
+  draggingId.value = null
+  dragVisualId.value = null
+  setDrop(null)
+  window.removeEventListener('keydown', onWindowKeydown, true)
+  document.removeEventListener('dragover', onDocumentDragOver)
+}
+
+const land = (source: Row, drop: TreeDrop) => {
+  landing = { id: source.node.id, parentId: source.parentId, position: source.position }
+  emit('move', { id: source.node.id, parentId: drop.parentId, index: drop.index })
+}
+
+const isTouchPointer = (event: PointerEvent) =>
+  event.pointerType === 'touch' || event.pointerType === 'pen'
+
+/** Whether `target` sits in a row's `node-actions`, where a press is meant for the action. */
+const isInActions = (target: EventTarget | null) =>
+  target instanceof Element && !!target.closest('[data-tree-actions]')
+
+/**
+ * Whether the last press started in the actions. A mouse drag reports the row as its target, not
+ * the button it started on, so `dragstart` cannot tell by itself.
+ */
+let pressedInActions = false
+
+const onPointerDown = (event: PointerEvent, row: Row) => {
+  suppressClick = false
+  pressedInActions = isInActions(event.target)
+  if (!row.draggable || !isTouchPointer(event) || pressedInActions) return
+
+  const element = event.currentTarget as HTMLElement
+  pointerDrag.value = {
+    id: row.node.id,
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    startY: event.clientY,
+    element,
+    cancelled: false,
+  }
+  element.setPointerCapture?.(event.pointerId)
+}
+
+const onPointerMove = (event: PointerEvent) => {
+  const pointer = pointerDrag.value
+  if (!pointer || pointer.cancelled || pointer.pointerId !== event.pointerId) return
+
+  if (!draggingId.value) {
+    const distance = Math.hypot(event.clientX - pointer.startX, event.clientY - pointer.startY)
+    if (distance < 8) return
+
+    // no drag image to wait for: the finger covers the row
+    startDrag(pointer.id)
+    dragVisualId.value = pointer.id
+  }
+
+  event.preventDefault()
+  updateDropAt(event.clientX, event.clientY)
+}
+
+/**
+ * Lifting the finger can still fire a click on the row, which should not select it; a
+ * `pointercancel` never does, so it leaves the next click alone.
+ */
+const finishPointerDrag = (event: PointerEvent, cancelled = false) => {
+  const pointer = pointerDrag.value
+  if (!pointer || pointer.pointerId !== event.pointerId) return
+
+  if (pointer.cancelled) {
+    suppressClick = !cancelled
+  } else if (draggingId.value === pointer.id) {
+    event.preventDefault()
+
+    const source = sourceRow.value
+    const drop = activeDrop.value
+    suppressClick = !cancelled
+    endDrag()
+
+    if (!cancelled && source && drop) land(source, drop)
+  }
+
+  pointerDrag.value = null
+}
+
+const onPointerUp = (event: PointerEvent) => finishPointerDrag(event)
+const onPointerCancel = (event: PointerEvent) => finishPointerDrag(event, true)
+
+/**
+ * Only the row itself drags. A press in the actions does not, nor does anything in it that the
+ * browser drags on its own, such as a link or an image: then the target is not the row.
+ */
+const onDragStart = (event: DragEvent, row: Row) => {
+  if (!row.draggable) return
+
+  if (pressedInActions || event.target !== event.currentTarget) {
+    event.preventDefault()
+
+    return
+  }
+
+  startDrag(row.node.id)
+  // After the browser has taken the drag image, which should show the row at full strength
+  setTimeout(() => {
+    if (draggingId.value === row.node.id) dragVisualId.value = row.node.id
+  })
+
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', row.node.id)
+  }
+}
+
+/** Also what Escape and a drop outside the tree end in: the browser fires no `drop` for those. */
+const onDragEnd = () => endDrag()
+
+const onDragOver = (event: DragEvent) => {
+  if (!draggingId.value) return
+
+  updateDropAt(event.clientX, event.clientY)
+  if (!activeDrop.value) {
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'none'
+
+    return
+  }
+
+  event.preventDefault()
+  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+}
+
+/** Leaving the tree, not a row: going from a row to a gap or the ghost row keeps the spot. */
+const onDragLeave = (event: DragEvent) => {
+  const into = event.relatedTarget as Node | null
+  const leftTree = into ? !root.value?.contains(into) : !isInsideTree(event.clientX, event.clientY)
+
+  if (leftTree) setDrop(null)
+}
+
+const onDrop = (event: DragEvent) => {
+  if (!draggingId.value) return
+  event.preventDefault()
+
+  const source = sourceRow.value
+  const drop = activeDrop.value
+  endDrag()
+
+  if (source && drop) land(source, drop)
+}
+
+// The dropped row lands on the ghost row's spot, but the group still slides it there from its
+// old one. Ending that move right after it was set up — before anything is painted — puts it in
+// place at once, while the rows that close the gap behind it keep sliding.
+watch(
+  rows,
+  async (current) => {
+    const target = landing
+    if (!target) return
+
+    const row = current.find((item) => item.node.id === target.id)
+    if (row && row.parentId === target.parentId && row.position === target.position) return
+
+    landing = null
+    await nextTick()
+    rowElement(target.id)?.dispatchEvent(
+      new TransitionEvent('transitionend', { propertyName: 'transform' }),
+    )
+  },
+  { flush: 'post' },
+)
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onWindowKeydown, true)
+  document.removeEventListener('dragover', onDocumentDragOver)
+})
+
+const onRowClick = (id: string) => {
+  if (suppressClick) {
+    suppressClick = false
+
+    return
+  }
+
+  selected.value = id
+}
+
 // A row is only highlighted while it is actually on screen; collapsing its parent fades the
 // highlight out rather than dropping it, so reopening slides it back from the same spot
 const selectionVisible = computed(
@@ -146,8 +578,13 @@ const jumpTo = async (reposition: () => Promise<void>) => {
   motion.value = previous
 }
 
-// Rows above the selection can appear or disappear, so every row change is a reposition too
-watch([selected, rows], ([id], [previousId]) => {
+/** Where the ghost row is, as a value: a spot picked again through another row leaves it equal. */
+const ghostPlace = computed(() => (ghost.value ? `${ghost.value.at}:${ghost.value.depth}` : null))
+
+// Rows above the selection can appear or disappear, so every row change is a reposition too. So
+// is the ghost row: it pushes the rows below it aside without being one of them, and the resize
+// it causes would otherwise jump the highlight straight to its end position.
+watch([selected, rows, ghostPlace], ([id], [previousId]) => {
   motion.value = id === previousId ? 'move' : 'select'
   updateHighlight()
 })
@@ -184,10 +621,32 @@ const ENTER_TRANSITION = 'transform 200ms var(--ease-in-out-strong), opacity 80m
 /** Ids of the rows that are still unfolding; `focusNode` holds its scroll until they have landed. */
 const unfolding = new Set<string>()
 
+/**
+ * The ghost row's surface is there at once; only its label comes up, on the same timing as an
+ * unfolding row's, so it reads once the rows below have all but made room.
+ */
+const GHOST_ENTER_TRANSITION = 'opacity 80ms linear 120ms'
+
+const ghostContent = (element: HTMLElement) =>
+  'treeGhost' in element.dataset
+    ? element.querySelector<HTMLElement>('[data-tree-ghost-content]')
+    : null
+
 const onEnter = (element: Element) => {
   const row = element as HTMLElement
   if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
 
+  const content = ghostContent(row)
+  if (content) {
+    content.style.transition = 'none'
+    content.style.opacity = '0'
+    content.getBoundingClientRect()
+    content.style.transition = GHOST_ENTER_TRANSITION
+    content.style.opacity = ''
+
+    return
+  }
+
   unfolding.add(row.dataset.treeId!)
 
   const parent = rowElement(
@@ -215,6 +674,13 @@ let scrollOnLanding: string | null = null
 const onEnterDone = (element: Element) => {
   const row = element as HTMLElement
 
+  const content = ghostContent(row)
+  if (content) {
+    content.style.transition = ''
+
+    return
+  }
+
   row.style.transition = ''
   row.style.pointerEvents = ''
   unfolding.delete(row.dataset.treeId!)
@@ -381,7 +847,20 @@ defineExpose({ focusNode })
 </script>
 
 <template>
-  <div ref="root" role="tree" :aria-label="label" class="relative isolate" @keydown="onKeydown">
+  <div
+    ref="root"
+    role="tree"
+    :aria-label="label"
+    class="relative isolate"
+    @keydown="onKeydown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerCancel"
+    @dragenter="onDragOver"
+    @dragover="onDragOver"
+    @dragleave="onDragLeave"
+    @drop="onDrop"
+  >
     <!-- One highlight for the whole tree: selecting another row slides it instead of
          repainting two backgrounds. Behind the rows, so their hover still reads. -->
     <div
@@ -407,69 +886,91 @@ defineExpose({ focusNode })
       @after-enter="onEnterDone"
       @enter-cancelled="onEnterDone"
     >
-      <!-- Every row keeps `small-normal`: switching the selected one to semibold widened its
-           label, which made the text jump. Colour carries the selection instead. -->
-      <div
-        v-for="row in rows"
-        :key="row.node.id"
-        role="treeitem"
-        :aria-level="row.depth + 1"
-        :aria-posinset="row.position"
-        :aria-setsize="row.setSize"
-        :aria-selected="selected === row.node.id"
-        :aria-expanded="row.expandable ? row.expanded : undefined"
-        :tabindex="tabindexOf(row.node.id)"
-        :aria-labelledby="labelId(row.node.id)"
-        :data-tree-id="row.node.id"
-        class="group mb-0.5 flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-2 small-normal transition-colors duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
-        :class="
-          selected === row.node.id ? 'text-cornflower-blue-600' : 'text-gray-800 hover:bg-gray-100'
-        "
-        :style="{ paddingLeft: `${row.depth * INDENT + 4}px` }"
-        @click="selected = row.node.id"
-        @focus="focusedId = row.node.id"
-      >
-        <!-- Out of the tab order: the arrow keys expand and collapse for keyboard users. A click
-             does not focus it either, as focus inside `aria-hidden` is blocked; see
-             `onChevronClick` for where the focus goes instead. Stays grey on the selected row:
-             the chevron is a control, not part of the label. -->
-        <button
-          v-if="row.expandable"
-          type="button"
-          tabindex="-1"
-          aria-hidden="true"
-          class="flex size-5 shrink-0 cursor-pointer items-center justify-center text-gray-400 transition-colors duration-150 group-hover:text-gray-600 hover:text-gray-600 motion-reduce:transition-none"
-          @mousedown.prevent
-          @click.stop="onChevronClick(row.node.id)"
+      <template v-for="item in items" :key="item.key">
+        <!-- The drop indicator: where the dragged node lands, at the depth it lands on. Out of
+             the accessibility tree and without `data-tree-id`, so it is no row to the keyboard,
+             the tab stop or the highlight. One element for the whole drag, that changes spots. -->
+        <div v-if="item.ghost" aria-hidden="true" class="mb-0.5" data-tree-ghost>
+          <div
+            class="flex rounded-md bg-cornflower-blue-50 py-1 pr-2 pl-1 small-normal text-gray-700 outline-1 -outline-offset-1 outline-cornflower-blue-600 transition-[margin-left] duration-200 ease-in-out-strong outline-dashed motion-reduce:transition-none"
+            :style="{ marginLeft: `${item.depth * INDENT}px` }"
+          >
+            <span data-tree-ghost-content class="flex min-w-0 items-center gap-1.5">
+              <span class="size-5 shrink-0" />
+              <NexxtIcon v-if="item.node.icon" :name="item.node.icon" class="shrink-0" />
+              <span class="truncate">{{ item.node.label }}</span>
+            </span>
+          </div>
+        </div>
+
+        <!-- Every row keeps `small-normal`: switching the selected one to semibold widened its
+             label, which made the text jump. Colour carries the selection instead. -->
+        <div
+          v-else
+          role="treeitem"
+          :aria-level="item.row.depth + 1"
+          :aria-posinset="item.row.position"
+          :aria-setsize="item.row.setSize"
+          :aria-selected="selected === item.row.node.id"
+          :aria-expanded="item.row.expandable ? item.row.expanded : undefined"
+          :tabindex="tabindexOf(item.row.node.id)"
+          :aria-labelledby="labelId(item.row.node.id)"
+          :data-tree-id="item.row.node.id"
+          :data-tree-drop="collapsedTargetId === item.row.node.id ? 'inside' : undefined"
+          :draggable="item.row.draggable"
+          class="group mb-0.5 flex items-center gap-1.5 rounded-md py-1 pr-2 small-normal transition-[color,background-color,outline-color,opacity] duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
+          :class="rowClasses(item.row)"
+          :style="{ paddingLeft: `${item.row.depth * INDENT + 4}px` }"
+          @click="onRowClick(item.row.node.id)"
+          @focus="focusedId = item.row.node.id"
+          @pointerdown="onPointerDown($event, item.row)"
+          @dragstart="onDragStart($event, item.row)"
+          @dragend="onDragEnd"
         >
+          <!-- Out of the tab order: the arrow keys expand and collapse for keyboard users. A click
+               does not focus it either, as focus inside `aria-hidden` is blocked; see
+               `onChevronClick` for where the focus goes instead. Stays grey on the selected row:
+               the chevron is a control, not part of the label. -->
+          <button
+            v-if="item.row.expandable"
+            type="button"
+            tabindex="-1"
+            aria-hidden="true"
+            class="flex size-5 shrink-0 cursor-pointer items-center justify-center text-gray-400 transition-colors duration-150 motion-reduce:transition-none"
+            :class="!dragVisualId && 'group-hover:text-gray-600 hover:text-gray-600'"
+            @mousedown.prevent
+            @click.stop="onChevronClick(item.row.node.id)"
+          >
+            <NexxtIcon
+              name="chevron-down"
+              class="extra-small-normal transition-transform duration-150 ease-out motion-reduce:transition-none"
+              :class="!item.row.expanded && '-rotate-90'"
+            />
+          </button>
+          <span v-else class="size-5 shrink-0" />
+
           <NexxtIcon
-            name="chevron-down"
-            class="extra-small-normal transition-transform duration-150 ease-out motion-reduce:transition-none"
-            :class="!row.expanded && '-rotate-90'"
+            v-if="item.row.node.icon"
+            :name="item.row.node.icon"
+            class="shrink-0 transition-colors duration-150 motion-reduce:transition-none"
+            :class="selected === item.row.node.id ? 'text-cornflower-blue-600' : 'text-gray-600'"
           />
-        </button>
-        <span v-else class="size-5 shrink-0" />
-
-        <NexxtIcon
-          v-if="row.node.icon"
-          :name="row.node.icon"
-          class="shrink-0 transition-colors duration-150 motion-reduce:transition-none"
-          :class="selected === row.node.id ? 'text-cornflower-blue-600' : 'text-gray-600'"
-        />
-        <span :id="labelId(row.node.id)" class="truncate">{{ row.node.label }}</span>
-
-        <!-- Revealed by opacity rather than removed, so the row keeps its layout while it
-             appears. Pulled into the row's padding so a 24px button leaves the row at 28px.
-             Stopping here keeps the row's click and the tree's keys away from the actions. -->
-        <div
-          v-if="slots['node-actions']"
-          class="-my-0.5 ml-auto flex shrink-0 items-center opacity-0 transition-opacity duration-150 ease-out group-focus-within:opacity-100 group-hover:opacity-100 motion-reduce:transition-none pointer-coarse:opacity-100"
-          @click.stop
-          @keydown.stop
-        >
-          <NodeActions :node="row.node" :tabindex="tabindexOf(row.node.id)" />
+          <span :id="labelId(item.row.node.id)" class="truncate">{{ item.row.node.label }}</span>
+
+          <!-- Revealed by opacity rather than removed, so the row keeps its layout while it
+               appears. Pulled into the row's padding so a 24px button leaves the row at 28px.
+               Stopping here keeps the row's click and the tree's keys away from the actions. -->
+          <div
+            v-if="slots['node-actions']"
+            data-tree-actions
+            class="-my-0.5 ml-auto flex shrink-0 items-center opacity-0 transition-opacity duration-150 ease-out group-focus-within:opacity-100 group-hover:opacity-100 motion-reduce:transition-none pointer-coarse:opacity-100"
+            @click.stop
+            @keydown.stop
+          >
+            <NodeActions :node="item.row.node" :tabindex="tabindexOf(item.row.node.id)" />
+          </div>
         </div>
-      </div>
+      </template>
     </TransitionGroup>
   </div>
 </template>