@multiplatform.one/components 6.1.0 → 6.3.0

package/dist/esm/views/TreeView.mjs

@@ -1,48 +1,177 @@
 import { componentColors } from "../componentColors.mjs";
+import { EmptyState } from "../layouts/page.mjs";
 import { FlashList } from "@shopify/flash-list";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { CaretDownIcon, CaretRightIcon, FileIcon, FolderIcon, FolderOpenIcon } from "@phosphor-icons/react";
+import { MIN_PRESS_TARGET, ensureKeyboardModalityTracking, pressTargetHitSlop, useReadableTextOn, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
+import { CaretLeftIcon, CaretRightIcon, DotsSixVerticalIcon, FileIcon, FolderIcon, FolderOpenIcon } from "@phosphor-icons/react";
+import { useDirection } from "../hooks/useDirection.mjs";
 import { useHotkey } from "@tanstack/react-hotkeys";
-import { useCallback, useId, useMemo, useRef, useState } from "react";
-import { ListItem, Text, View, YStack } from "tamagui";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Text, View, XStack, YStack } from "tamagui";
+import { autoScrollVelocity } from "./kanbanDnd.mjs";
+import { applyTreeMove, describeTreeCancel, describeTreeDragState, flattenDndRows, indicatorForTarget, resolveTreeDrop, subtreeIds, treeDropTargetForY, treeKeyboardLift, treeKeyboardMove } from "./treeViewDnd.mjs";
+import { diffVisibleRows, flattenVisibleIds, isEmptyDiff } from "./treeViewMotion.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+const ENTER_RISE_PX = -4;
+const DRAG_THRESHOLD_PX = 4;
+const TOUCH_LONG_PRESS_MS = 200;
+const AUTO_SCROLL_EDGE_PX = 48;
+const AUTO_SCROLL_MAX_SPEED = 16;
+const LIFT_SHADOW = {
+  shadowColor: "#000",
+  shadowOffset: {
+    width: 0,
+    height: 10
+  },
+  shadowOpacity: 0.15,
+  shadowRadius: 20
+};
+function collectBranchIds(items, into = /* @__PURE__ */new Set()) {
+  for (const node of items) {
+    if ((node.children?.length ?? 0) > 0) {
+      into.add(node.id);
+      collectBranchIds(node.children, into);
+    }
+  }
+  return into;
+}
+function defaultNodeIcon(hasChildren, isExpanded, iconSize) {
+  if (hasChildren) {
+    return isExpanded ? /* @__PURE__ */jsx(FolderOpenIcon, {
+      size: iconSize,
+      weight: "duotone"
+    }) : /* @__PURE__ */jsx(FolderIcon, {
+      size: iconSize,
+      weight: "duotone"
+    });
+  }
+  return /* @__PURE__ */jsx(FileIcon, {
+    size: iconSize,
+    weight: "duotone"
+  });
+}
 function TreeView({
   nodes,
-  renderNode = node => node.label,
+  renderNode,
   onNodeToggle,
   onNodeSelect,
+  onNodeMove,
   estimateSize: estimateSizeProp,
   overscan = 10,
   height: heightProp,
-  emptyMessage = "No items found",
+  emptyMessage: emptyMessageProp,
   defaultExpandedIds,
+  expandByDefault = false,
+  display = "default",
+  showExpansionArrows = true,
+  selectedId,
+  ariaLabel,
   hotkeys: hotkeyOverrides,
   ...stackProps
 }) {
   const {
-    knobProps
+    t
+  } = useTranslation();
+  const emptyMessage = emptyMessageProp ?? t("No items found");
+  const {
+    knobProps,
+    control
   } = useResolvedKnobs();
+  const onAccentLabel = useReadableTextOn("$accentBackground");
+  const transition = knobProps.transition;
+  const compressed = display === "compressed";
   const sz = knobProps.sizeToken;
-  const estimateSize = estimateSizeProp ?? (sz === "$3" ? 30 : sz === "$5" ? 44 : 36);
+  const estimateSize = estimateSizeProp ?? (compressed ? sz === "$5" ? 32 : 28 : sz === "$3" ? 30 : sz === "$5" ? 40 : 36);
   const height = heightProp ?? (sz === "$3" ? 320 : sz === "$5" ? 480 : 400);
-  const expandIconSize = sz === "$3" ? 16 : sz === "$5" ? 24 : 20;
+  const expandIconSize = compressed ? 14 : sz === "$3" ? 16 : sz === "$5" ? 20 : 18;
+  const nodeIconSize = compressed ? 14 : 18;
+  const caretSize = compressed ? 12 : 14;
+  const isRTL = useDirection() === "rtl";
+  const CollapsedCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
+  const expandedCaretRotation = isRTL ? "-90deg" : "90deg";
+  const indentStep = compressed ? 12 : 16;
+  const labelFontSize = compressed ? 12 : 14;
+  const rowPad = (compressed ? {
+    small: {
+      y: 3,
+      x: 4
+    },
+    medium: {
+      y: 4,
+      x: 6
+    },
+    large: {
+      y: 6,
+      x: 10
+    }
+  } : {
+    small: {
+      y: 4,
+      x: 6
+    },
+    medium: {
+      y: 6,
+      x: 8
+    },
+    large: {
+      y: 10,
+      x: 13
+    }
+  })[knobProps.space] ?? (compressed ? {
+    y: 4,
+    x: 6
+  } : {
+    y: 6,
+    x: 8
+  });
+  const rowPadY = rowPad.y;
+  const rowPadX = rowPad.x;
   const treeId = useId();
   const containerRef = useRef(null);
   const flashListRef = useRef(null);
   const [focusedIndex, setFocusedIndex] = useState(-1);
-  const [expandedIds, setExpandedIds] = useState(() => new Set(defaultExpandedIds ?? []));
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+  const handleContainerFocus = useCallback(() => {
+    if (!wasKeyboardFocus()) return;
+    setFocusedIndex(prev => prev < 0 ? 0 : prev);
+  }, []);
+  const [expandedIds, setExpandedIds] = useState(() => {
+    if (defaultExpandedIds) return new Set(defaultExpandedIds);
+    if (expandByDefault) return collectBranchIds(nodes);
+    return /* @__PURE__ */new Set();
+  });
+  const [motion, setMotion] = useState(null);
+  const rowHeights = useRef(/* @__PURE__ */new Map());
+  const getRowHeight = useCallback(id => rowHeights.current.get(id) ?? estimateSize, [estimateSize]);
   const toggleNode = useCallback(node => {
-    setExpandedIds(prev => {
-      const next = new Set(prev);
-      if (next.has(node.id)) {
-        next.delete(node.id);
-      } else {
-        next.add(node.id);
-      }
-      return next;
-    });
+    const next = new Set(expandedIds);
+    if (next.has(node.id)) {
+      next.delete(node.id);
+    } else {
+      next.add(node.id);
+    }
+    if (transition) {
+      const diff = diffVisibleRows(flattenVisibleIds(nodes, expandedIds), flattenVisibleIds(nodes, next), getRowHeight);
+      setMotion(isEmptyDiff(diff) ? null : {
+        phase: "armed",
+        ...diff
+      });
+    } else {
+      setMotion(null);
+    }
+    setExpandedIds(next);
     onNodeToggle?.(node);
-  }, [onNodeToggle]);
+  }, [expandedIds, nodes, transition, getRowHeight, onNodeToggle]);
+  useLayoutEffect(() => {
+    if (motion?.phase !== "armed") return;
+    const raf = requestAnimationFrame(() => {
+      setMotion(m => m && m.phase === "armed" ? {
+        ...m,
+        phase: "play"
+      } : m);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [motion]);
   const flatNodes = useMemo(() => {
     const result = [];
     const walk = (items, depth) => {
@@ -72,10 +201,417 @@ function TreeView({
       });
     }
   }, [flatNodes.length]);
+  const canReorder = Boolean(onNodeMove);
+  const [dragUi, setDragUi] = useState(null);
+  const [settle, setSettle] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const [dragScrollY, setDragScrollY] = useState(0);
+  const dragUiRef = useRef(null);
+  dragUiRef.current = dragUi;
+  const scrollOffsetRef = useRef(0);
+  const pointerPosRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const grabOffsetRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const suppressClickRef = useRef(false);
+  const sessionCleanupRef = useRef(null);
+  const autoScrollRafRef = useRef(null);
+  const pendingMoveFlipRef = useRef(null);
+  useEffect(() => () => sessionCleanupRef.current?.(), []);
+  const dndRows = useMemo(() => flattenDndRows(nodes, expandedIds), [nodes, expandedIds]);
+  const topOfFlatIndex = useCallback(flatIndex => {
+    let top = 0;
+    for (let i = 0; i < flatIndex && i < flatNodes.length; i++) {
+      top += getRowHeight(flatNodes[i].node.id);
+    }
+    return top;
+  }, [flatNodes, getRowHeight]);
+  const announce = useCallback(a => {
+    const parent = a.parent ?? t("top level");
+    const text = a.type === "lift" ? t("Lifted {{node}} in {{parent}}, position {{position}} of {{count}}. Use arrow keys to move, space to drop, escape to cancel.", {
+      ...a,
+      parent
+    }) : a.type === "move" ? t("Moved {{node}} to {{parent}}, position {{position}} of {{count}}.", {
+      ...a,
+      parent
+    }) : a.type === "drop" ? t("Dropped {{node}} in {{parent}}, position {{position}} of {{count}}.", {
+      ...a,
+      parent
+    }) : t("Movement cancelled. {{node}} returned to {{parent}}.", {
+      ...a,
+      parent
+    });
+    setAnnouncement(text);
+  }, [t]);
+  const hitTest = useCallback((clientY, ui) => {
+    const rect = containerRef.current?.getBoundingClientRect?.();
+    if (!rect) return null;
+    return treeDropTargetForY({
+      localY: clientY - rect.top + scrollOffsetRef.current,
+      rows: dndRows,
+      getHeight: getRowHeight,
+      session: ui.session,
+      draggedSubtree: ui.subtree
+    });
+  }, [dndRows, getRowHeight]);
+  const stopAutoScroll = useCallback(() => {
+    if (autoScrollRafRef.current !== null) cancelAnimationFrame(autoScrollRafRef.current);
+    autoScrollRafRef.current = null;
+  }, []);
+  const startAutoScroll = useCallback(() => {
+    stopAutoScroll();
+    const tick = () => {
+      const ui = dragUiRef.current;
+      if (!ui || ui.mode !== "pointer") {
+        autoScrollRafRef.current = null;
+        return;
+      }
+      const rect = containerRef.current?.getBoundingClientRect?.();
+      if (rect) {
+        const vy = autoScrollVelocity({
+          pos: pointerPosRef.current.y,
+          start: rect.top,
+          end: rect.bottom,
+          edge: AUTO_SCROLL_EDGE_PX,
+          maxSpeed: AUTO_SCROLL_MAX_SPEED
+        });
+        if (vy !== 0) {
+          const max = Math.max(0, topOfFlatIndex(flatNodes.length) - rect.height);
+          const next = Math.min(max, Math.max(0, scrollOffsetRef.current + vy));
+          if (next !== scrollOffsetRef.current) {
+            scrollOffsetRef.current = next;
+            flashListRef.current?.scrollToOffset({
+              offset: next,
+              animated: false
+            });
+            setDragScrollY(next);
+            const hit = hitTest(pointerPosRef.current.y, ui);
+            if (hit) {
+              setDragUi(prev => prev ? {
+                ...prev,
+                session: {
+                  ...prev.session,
+                  target: hit.target
+                },
+                indicator: hit.indicator
+              } : prev);
+            }
+          }
+        }
+      }
+      autoScrollRafRef.current = requestAnimationFrame(tick);
+    };
+    autoScrollRafRef.current = requestAnimationFrame(tick);
+  }, [flatNodes.length, hitTest, stopAutoScroll, topOfFlatIndex]);
+  const endDrag = useCallback(commit => {
+    const ui = dragUiRef.current;
+    if (!ui) return;
+    stopAutoScroll();
+    sessionCleanupRef.current?.();
+    sessionCleanupRef.current = null;
+    const resolved = resolveTreeDrop(ui.session);
+    const canCommit = commit && resolved.commit && Boolean(onNodeMove);
+    let dest = null;
+    let expectedIds = null;
+    if (canCommit) {
+      const nextNodes = applyTreeMove(nodes, ui.session.nodeId, resolved.to);
+      expectedIds = flattenVisibleIds(nextNodes, expandedIds);
+      const destFlat = expectedIds.indexOf(ui.session.nodeId);
+      const parentRow = resolved.to.parentId === null ? null : dndRows.find(r => r.id === resolved.to.parentId) ?? null;
+      let top = 0;
+      if (destFlat >= 0) {
+        for (let i = 0; i < destFlat; i++) top += getRowHeight(expectedIds[i]);
+      } else if (parentRow) {
+        top = topOfFlatIndex(dndRows.indexOf(parentRow));
+      }
+      dest = {
+        x: ui.homeX,
+        y: top - scrollOffsetRef.current
+      };
+    } else {
+      const originFlat = flatNodes.findIndex(f => f.node.id === ui.session.nodeId);
+      dest = {
+        x: ui.homeX,
+        y: (originFlat >= 0 ? topOfFlatIndex(originFlat) : 0) - scrollOffsetRef.current
+      };
+    }
+    setDragUi(null);
+    dragUiRef.current = null;
+    if (ui.mode === "pointer" && dest) {
+      setSettle({
+        node: ui.node,
+        width: ui.width,
+        height: ui.height,
+        to: dest,
+        hideId: canCommit ? ui.session.nodeId : void 0
+      });
+    }
+    if (canCommit && expectedIds) {
+      if (transition) {
+        pendingMoveFlipRef.current = {
+          prevIds: flattenVisibleIds(nodes, expandedIds),
+          expectedIds
+        };
+      }
+      announce(describeTreeDragState("drop", ui.session, nodes, ui.node.label));
+      onNodeMove?.(ui.session.nodeId, resolved.to);
+    } else {
+      announce(describeTreeCancel(ui.session, nodes, ui.node.label));
+    }
+  }, [announce, dndRows, expandedIds, flatNodes, getRowHeight, nodes, onNodeMove, stopAutoScroll, topOfFlatIndex, transition]);
+  useLayoutEffect(() => {
+    const pending = pendingMoveFlipRef.current;
+    if (!pending) return;
+    const currentIds = flatNodes.map(f => f.node.id);
+    const same = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+    if (same(currentIds, pending.prevIds)) return;
+    pendingMoveFlipRef.current = null;
+    if (!same(currentIds, pending.expectedIds)) return;
+    const diff = diffVisibleRows(pending.prevIds, pending.expectedIds, getRowHeight);
+    if (!isEmptyDiff(diff)) setMotion({
+      phase: "armed",
+      ...diff
+    });
+  }, [flatNodes, getRowHeight]);
+  useEffect(() => {
+    if (!settle) return;
+    const el = containerRef.current?.querySelector?.("[data-treeview-overlay]");
+    if (!el || typeof requestAnimationFrame === "undefined") {
+      setSettle(null);
+      return;
+    }
+    let last = null;
+    let stableFrames = 0;
+    let raf = 0;
+    const check = () => {
+      const current = getComputedStyle(el).transform;
+      if (current === last) stableFrames += 1;else {
+        stableFrames = 0;
+        last = current;
+      }
+      if (stableFrames >= 3) {
+        setSettle(null);
+        return;
+      }
+      raf = requestAnimationFrame(check);
+    };
+    raf = requestAnimationFrame(check);
+    return () => cancelAnimationFrame(raf);
+  }, [settle]);
+  const beginPointerDrag = useCallback((flat, rowEl, clientX, clientY) => {
+    const container = containerRef.current;
+    if (!container?.getBoundingClientRect) return false;
+    const session = treeKeyboardLift(nodes, flat.node.id);
+    if (!session) return false;
+    const rowRect = rowEl.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    grabOffsetRef.current = {
+      x: clientX - rowRect.left,
+      y: clientY - rowRect.top
+    };
+    pointerPosRef.current = {
+      x: clientX,
+      y: clientY
+    };
+    const ui = {
+      mode: "pointer",
+      node: flat.node,
+      session,
+      subtree: subtreeIds(nodes, flat.node.id),
+      sourceDepth: flat.depth,
+      homeX: rowRect.left - containerRect.left,
+      width: rowRect.width,
+      height: rowRect.height,
+      indicator: null,
+      ghost: {
+        x: rowRect.left - containerRect.left,
+        y: rowRect.top - containerRect.top
+      }
+    };
+    setSettle(null);
+    setDragScrollY(scrollOffsetRef.current);
+    setDragUi(ui);
+    dragUiRef.current = ui;
+    announce(describeTreeDragState("lift", session, nodes, flat.node.label));
+    startAutoScroll();
+    return true;
+  }, [announce, nodes, startAutoScroll]);
+  const handleDragHandlePointerDown = useCallback((flat, e) => {
+    if (!canReorder || typeof window === "undefined") return;
+    if (e.button !== void 0 && e.button !== 0) return;
+    if (dragUiRef.current) return;
+    sessionCleanupRef.current?.();
+    e.stopPropagation?.();
+    const handleEl = e.currentTarget;
+    const rowEl = handleEl.closest?.("[data-treeview-row]") ?? handleEl;
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const pointerType = e.pointerType ?? "mouse";
+    let lifted = false;
+    let longPressTimer = null;
+    let prevUserSelect = "";
+    let prevCursor = "";
+    const lift = (x, y) => {
+      if (lifted) return;
+      lifted = beginPointerDrag(flat, rowEl, x, y);
+      if (!lifted) return;
+      prevUserSelect = document.body.style.userSelect;
+      document.body.style.userSelect = "none";
+      prevCursor = document.documentElement.style.cursor;
+      document.documentElement.style.cursor = "grabbing";
+    };
+    const teardown = () => {
+      if (longPressTimer !== null) clearTimeout(longPressTimer);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onCancel);
+      window.removeEventListener("keydown", onKey, true);
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("contextmenu", onContextMenu, true);
+      sessionCleanupRef.current = null;
+      if (lifted) {
+        document.body.style.userSelect = prevUserSelect;
+        document.documentElement.style.cursor = prevCursor;
+        suppressClickRef.current = true;
+        setTimeout(() => {
+          suppressClickRef.current = false;
+        }, 0);
+      }
+    };
+    const onMove = me => {
+      pointerPosRef.current = {
+        x: me.clientX,
+        y: me.clientY
+      };
+      if (!lifted) {
+        const travelled = Math.hypot(me.clientX - startX, me.clientY - startY);
+        if (pointerType === "mouse") {
+          if (travelled >= DRAG_THRESHOLD_PX) lift(me.clientX, me.clientY);
+        } else if (travelled >= DRAG_THRESHOLD_PX) {
+          teardown();
+        }
+        if (!lifted) return;
+      }
+      const containerRect = containerRef.current?.getBoundingClientRect?.();
+      const ghost = {
+        x: me.clientX - (containerRect?.left ?? 0) - grabOffsetRef.current.x,
+        y: me.clientY - (containerRect?.top ?? 0) - grabOffsetRef.current.y
+      };
+      const ui = dragUiRef.current;
+      if (!ui) return;
+      const hit = hitTest(me.clientY, ui);
+      setDragUi(prev => prev ? {
+        ...prev,
+        ghost,
+        ...(hit && {
+          session: {
+            ...prev.session,
+            target: hit.target
+          },
+          indicator: hit.indicator
+        })
+      } : prev);
+    };
+    const onUp = () => {
+      const wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(true);
+    };
+    const onCancel = () => {
+      const wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(false);
+    };
+    const onKey = ke => {
+      if (ke.key !== "Escape") return;
+      ke.stopPropagation();
+      const wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(false);
+    };
+    const onTouchMove = te => {
+      if (lifted) te.preventDefault();
+    };
+    const onContextMenu = ce => {
+      if (lifted || longPressTimer !== null) ce.preventDefault();
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    window.addEventListener("keydown", onKey, true);
+    window.addEventListener("touchmove", onTouchMove, {
+      passive: false
+    });
+    window.addEventListener("contextmenu", onContextMenu, true);
+    sessionCleanupRef.current = () => {
+      const wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(false);
+    };
+    if (pointerType !== "mouse") {
+      longPressTimer = setTimeout(() => {
+        longPressTimer = null;
+        const p = pointerPosRef.current;
+        lift(p.x || startX, p.y || startY);
+      }, TOUCH_LONG_PRESS_MS);
+      pointerPosRef.current = {
+        x: startX,
+        y: startY
+      };
+    }
+  }, [beginPointerDrag, canReorder, endDrag, hitTest]);
+  const liftFocusedNode = useCallback(() => {
+    if (!canReorder || dragUiRef.current) return false;
+    const flat = flatNodes[focusedIndex];
+    if (!flat) return false;
+    const session = treeKeyboardLift(nodes, flat.node.id);
+    if (!session) return false;
+    const ui = {
+      mode: "keyboard",
+      node: flat.node,
+      session,
+      subtree: subtreeIds(nodes, flat.node.id),
+      sourceDepth: flat.depth,
+      homeX: 0,
+      width: 0,
+      height: getRowHeight(flat.node.id),
+      indicator: indicatorForTarget(dndRows, session, session.target)
+    };
+    setSettle(null);
+    setDragScrollY(scrollOffsetRef.current);
+    setDragUi(ui);
+    dragUiRef.current = ui;
+    announce(describeTreeDragState("lift", session, nodes, flat.node.label));
+    return true;
+  }, [announce, canReorder, dndRows, flatNodes, focusedIndex, getRowHeight, nodes]);
+  const moveKeyboardDrag = useCallback(direction => {
+    const ui = dragUiRef.current;
+    if (!ui || ui.mode !== "keyboard") return false;
+    const next = treeKeyboardMove(ui.session, nodes, direction);
+    if (next === ui.session) return true;
+    const indicator = indicatorForTarget(dndRows, next, next.target);
+    const updated = {
+      ...ui,
+      session: next,
+      indicator
+    };
+    setDragUi(updated);
+    dragUiRef.current = updated;
+    if (indicator.kind === "line" && flatNodes.length > 0) {
+      scrollToIndex(Math.min(indicator.flatIndex, flatNodes.length - 1));
+    }
+    announce(describeTreeDragState("move", next, nodes, ui.node.label));
+    return true;
+  }, [announce, dndRows, flatNodes.length, nodes, scrollToIndex]);
   const hotkeyOpts = {
     target: containerRef
   };
   useHotkey(hotkeyOverrides?.next ?? "ArrowDown", () => {
+    if (moveKeyboardDrag("down")) return;
     setFocusedIndex(prev => {
       const next = prev < 0 ? 0 : Math.min(prev + 1, flatNodes.length - 1);
       scrollToIndex(next);
@@ -83,6 +619,7 @@ function TreeView({
     });
   }, hotkeyOpts);
   useHotkey(hotkeyOverrides?.prev ?? "ArrowUp", () => {
+    if (moveKeyboardDrag("up")) return;
     setFocusedIndex(prev => {
       const next = prev < 0 ? flatNodes.length - 1 : Math.max(prev - 1, 0);
       scrollToIndex(next);
@@ -90,6 +627,7 @@ function TreeView({
     });
   }, hotkeyOpts);
   useHotkey(hotkeyOverrides?.expand ?? "ArrowRight", () => {
+    if (moveKeyboardDrag("right")) return;
     if (focusedIndex >= 0 && focusedIndex < flatNodes.length) {
       const {
         node,
@@ -102,6 +640,7 @@ function TreeView({
     }
   }, hotkeyOpts);
   useHotkey(hotkeyOverrides?.collapse ?? "ArrowLeft", () => {
+    if (moveKeyboardDrag("left")) return;
     if (focusedIndex >= 0 && focusedIndex < flatNodes.length) {
       const {
         node,
@@ -113,41 +652,101 @@ function TreeView({
       }
     }
   }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.toggle ?? "Space", () => {
+    if (dragUiRef.current?.mode === "keyboard") {
+      endDrag(true);
+      return;
+    }
+    if (canReorder) {
+      liftFocusedNode();
+      return;
+    }
+    if (focusedIndex >= 0 && focusedIndex < flatNodes.length) {
+      const {
+        node,
+        hasChildren
+      } = flatNodes[focusedIndex];
+      if (hasChildren) {
+        toggleNode(node);
+      }
+    }
+  }, hotkeyOpts);
   useHotkey(hotkeyOverrides?.select ?? "Enter", () => {
+    if (dragUiRef.current?.mode === "keyboard") {
+      endDrag(true);
+      return;
+    }
     if (focusedIndex >= 0 && focusedIndex < flatNodes.length) {
       onNodeSelect?.(flatNodes[focusedIndex].node);
     }
   }, hotkeyOpts);
+  useHotkey("Escape", () => {
+    if (dragUiRef.current?.mode === "keyboard") endDrag(false);
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.first ?? "Home", () => {
+    if (flatNodes.length > 0) {
+      setFocusedIndex(0);
+      scrollToIndex(0);
+    }
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.last ?? "End", () => {
+    if (flatNodes.length > 0) {
+      const last = flatNodes.length - 1;
+      setFocusedIndex(last);
+      scrollToIndex(last);
+    }
+  }, hotkeyOpts);
   if (nodes.length === 0) {
-    return /* @__PURE__ */jsx(YStack, {
-      ...knobProps.panelPadding,
-      alignItems: "center",
-      ...stackProps,
-      children: /* @__PURE__ */jsx(Text, {
-        color: componentColors.text.muted,
-        children: emptyMessage
-      })
+    return /* @__PURE__ */jsx(EmptyState, {
+      compact: true,
+      title: emptyMessage,
+      ...stackProps
     });
   }
   const effectiveFocused = focusedIndex >= flatNodes.length ? -1 : focusedIndex;
+  const resolvedAriaLabel = ariaLabel ?? (typeof stackProps["aria-label"] === "string" ? stackProps["aria-label"] : void 0);
+  const overlayNode = dragUi?.mode === "pointer" ? dragUi.node : settle?.node;
+  const overlayHasChildren = (overlayNode?.children?.length ?? 0) > 0;
+  const handleOutset = Math.max(0, (MIN_PRESS_TARGET - estimateSize) / 2);
   return /* @__PURE__ */jsx(YStack, {
     ...knobProps.borderRadius,
+    overflow: "hidden",
     ...stackProps,
-    children: /* @__PURE__ */jsx(View, {
+    children: /* @__PURE__ */jsxs(View, {
       ref: containerRef,
       role: "tree",
+      "aria-label": resolvedAriaLabel,
       "aria-activedescendant": effectiveFocused >= 0 ? `${treeId}-node-${effectiveFocused}` : void 0,
       tabIndex: 0,
       outlineWidth: 0,
+      onFocus: handleContainerFocus,
+      position: "relative",
       style: {
         height
       },
-      children: /* @__PURE__ */jsx(FlashList, {
+      children: [/* @__PURE__ */jsx(FlashList, {
         ref: flashListRef,
         data: flatNodes,
         drawDistance: overscan * estimateSize,
         keyExtractor: item => item.node.id,
-        extraData: effectiveFocused,
+        extraData: {
+          focused: effectiveFocused,
+          selectedId,
+          expandedIds,
+          motion,
+          dragUi,
+          settle
+        },
+        ...(canReorder && {
+          onScroll: e => {
+            const y = e?.nativeEvent?.contentOffset?.y;
+            if (typeof y === "number") {
+              scrollOffsetRef.current = y;
+              if (dragUiRef.current) setDragScrollY(y);
+            }
+          },
+          scrollEventThrottle: 16
+        }),
         renderItem: ({
           item,
           index
@@ -159,68 +758,219 @@ function TreeView({
             isExpanded
           } = item;
           const isFocused = effectiveFocused === index;
-          return /* @__PURE__ */jsx(ListItem, {
+          const isSelected = selectedId !== void 0 && selectedId === node.id;
+          const leadingIcon = hasChildren && isExpanded && node.iconWhenExpanded ? node.iconWhenExpanded : node.icon ? node.icon : defaultNodeIcon(hasChildren, isExpanded, nodeIconSize);
+          const labelContent = renderNode ? renderNode(node, depth) : /* @__PURE__ */jsx(Text, {
+            fontSize: labelFontSize,
+            color: isSelected && onAccentLabel ? onAccentLabel : "$color",
+            numberOfLines: 1,
+            flexShrink: 1,
+            children: node.label
+          });
+          const armed = motion?.phase === "armed";
+          const entering = motion?.entering.has(node.id) ?? false;
+          const delta = motion?.deltas.get(node.id) ?? 0;
+          const rowY = armed ? entering ? ENTER_RISE_PX : delta : 0;
+          const inDraggedSubtree = dragUi?.subtree.has(node.id) ?? false;
+          const isSettleHidden = settle?.hideId === node.id;
+          const isDropParent = dragUi?.indicator?.kind === "into" && dragUi.indicator.parentId === node.id;
+          const rowOpacity = isSettleHidden ? 0 : armed && entering ? 0 : inDraggedSubtree ? 0.4 : 1;
+          const rowTransition = armed && (entering || delta !== 0) ? "none" : transition;
+          return /* @__PURE__ */jsxs(XStack, {
             id: `${treeId}-node-${index}`,
+            ...{
+              "data-treeview-row": node.id
+            },
+            ...(isDropParent && {
+              "data-treeview-drop-parent": "true"
+            }),
             role: "treeitem",
             "aria-expanded": hasChildren ? isExpanded : void 0,
-            "aria-selected": isFocused,
+            "aria-selected": isSelected,
             "aria-level": depth + 1,
-            size: knobProps.sizeToken,
-            paddingLeft: `$${Math.max(depth * 4, 1)}`,
-            icon: hasChildren ? /* @__PURE__ */jsxs(View, {
-              flexDirection: "row",
-              alignItems: "center",
-              gap: "$1",
-              children: [/* @__PURE__ */jsx(View, {
-                onPress: () => toggleNode(node),
-                width: expandIconSize,
-                height: expandIconSize,
-                alignItems: "center",
-                justifyContent: "center",
-                cursor: "pointer",
-                children: isExpanded ? /* @__PURE__ */jsx(CaretDownIcon, {
-                  size: 14,
-                  weight: "bold"
-                }) : /* @__PURE__ */jsx(CaretRightIcon, {
-                  size: 14,
-                  weight: "bold"
-                })
-              }), isExpanded ? /* @__PURE__ */jsx(FolderOpenIcon, {
-                size: 18,
-                weight: "duotone"
-              }) : /* @__PURE__ */jsx(FolderIcon, {
-                size: 18,
-                weight: "duotone"
-              })]
-            }) : /* @__PURE__ */jsxs(View, {
-              flexDirection: "row",
-              alignItems: "center",
-              gap: "$1",
-              children: [/* @__PURE__ */jsx(View, {
-                style: {
-                  width: expandIconSize
-                }
-              }), /* @__PURE__ */jsx(FileIcon, {
-                size: 18,
-                weight: "duotone"
-              })]
-            }),
-            title: renderNode(node, depth),
-            backgroundColor: isFocused ? "$accentBackground" : index % 2 === 1 ? {
-              backgroundColor: componentColors.surface.background
-            }?.backgroundColor ?? componentColors.surface.background : "transparent",
+            alignItems: "center",
+            minHeight: estimateSize,
+            paddingVertical: rowPadY,
+            paddingInlineEnd: rowPadX,
+            paddingInlineStart: rowPadX + depth * indentStep,
+            gap: "$2",
+            cursor: "pointer",
+            y: rowY,
+            opacity: rowOpacity,
+            transition: rowTransition,
+            onLayout: e => {
+              const h = e?.nativeEvent?.layout?.height;
+              if (typeof h === "number" && h > 0) rowHeights.current.set(node.id, h);
+            },
+            backgroundColor:
+            // Nest-into parent highlight wins while a drag is active
+            // (LC-42 drop-target affordance).
+            isDropParent ? componentColors.interactive.background : isSelected ? "$accentBackground" : isFocused ? componentColors.interactive.background : "transparent",
             hoverStyle: {
-              backgroundColor: componentColors.interactive.background
+              ...control.hoverKnobProps,
+              ...(isSelected && {
+                backgroundColor: "$accentBackground"
+              })
             },
             pressStyle: {
-              backgroundColor: componentColors.interactive.hover
+              ...control.pressKnobProps,
+              ...(isSelected && {
+                backgroundColor: "$accentBackground"
+              })
             },
-            ...knobProps.borderRadius,
-            cursor: "pointer",
-            onPress: () => onNodeSelect?.(node)
-          });
+            outlineWidth: isFocused ? 2 : 0,
+            outlineStyle: "solid",
+            outlineColor: "$outlineColor",
+            outlineOffset: -2,
+            onPress: () => {
+              if (suppressClickRef.current) return;
+              setFocusedIndex(index);
+              if (hasChildren) toggleNode(node);
+              onNodeSelect?.(node);
+            },
+            children: [showExpansionArrows ? hasChildren ? /* @__PURE__ */jsx(View, {
+              width: expandIconSize,
+              height: expandIconSize,
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none",
+              rotate: isExpanded ? expandedCaretRotation : "0deg",
+              transition,
+              children: /* @__PURE__ */jsx(CollapsedCaretIcon, {
+                size: caretSize,
+                weight: "bold"
+              })
+            }) : /* @__PURE__ */jsx(View, {
+              width: expandIconSize,
+              height: expandIconSize
+            }) : null, /* @__PURE__ */jsx(View, {
+              width: nodeIconSize + 2,
+              height: nodeIconSize + 2,
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              children: leadingIcon
+            }), /* @__PURE__ */jsx(View, {
+              flex: 1,
+              minWidth: 0,
+              justifyContent: "center",
+              children: labelContent
+            }), canReorder ? /* @__PURE__ */jsx(View, {
+              ...{
+                "data-treeview-handle": node.id
+              },
+              role: "button",
+              "aria-label": t("Drag {{label}} to reorder", {
+                label: node.label
+              }),
+              tabIndex: -1,
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              minWidth: MIN_PRESS_TARGET,
+              minHeight: MIN_PRESS_TARGET,
+              marginVertical: -handleOutset,
+              hitSlop: pressTargetHitSlop(caretSize),
+              cursor: "grab",
+              opacity: 0.45,
+              transition,
+              hoverStyle: {
+                opacity: 1
+              },
+              onPress: e => e?.stopPropagation?.(),
+              ...{
+                onPointerDown: e => handleDragHandlePointerDown(item, e)
+              },
+              children: /* @__PURE__ */jsx(DotsSixVerticalIcon, {
+                size: caretSize,
+                weight: "bold"
+              })
+            }) : null]
+          }, node.id);
         }
-      })
+      }), dragUi?.indicator?.kind === "line" && /* @__PURE__ */jsx(XStack, {
+        ...{
+          "data-treeview-drop-indicator": "line"
+        },
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        y: topOfFlatIndex(dragUi.indicator.flatIndex) - dragScrollY - 1,
+        height: 2,
+        paddingInlineStart: rowPadX + dragUi.indicator.depth * indentStep,
+        paddingInlineEnd: rowPadX,
+        pointerEvents: "none",
+        zIndex: 999,
+        transition: dragUi.mode === "keyboard" ? transition : "none",
+        children: /* @__PURE__ */jsx(View, {
+          flex: 1,
+          height: 2,
+          borderRadius: 1,
+          backgroundColor: "$accentBackground"
+        })
+      }), overlayNode !== void 0 && /* @__PURE__ */jsx(View, {
+        ...{
+          "data-treeview-overlay": "true",
+          "data-treeview-overlay-phase": dragUi ? "pointer" : "settling"
+        },
+        position: "absolute",
+        top: 0,
+        left: 0,
+        x: (dragUi?.mode === "pointer" ? dragUi.ghost?.x : settle?.to.x) ?? 0,
+        y: (dragUi?.mode === "pointer" ? dragUi.ghost?.y : settle?.to.y) ?? 0,
+        width: dragUi?.width ?? settle?.width,
+        height: dragUi?.height ?? settle?.height,
+        pointerEvents: "none",
+        zIndex: 1e3,
+        transition: dragUi ? "none" : transition,
+        children: /* @__PURE__ */jsxs(XStack, {
+          alignItems: "center",
+          height: "100%",
+          paddingHorizontal: rowPadX,
+          gap: "$2",
+          ...knobProps.borderRadius,
+          backgroundColor: "$background",
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          overflow: "hidden",
+          transition,
+          enterStyle: {
+            scale: 1
+          },
+          scale: dragUi ? 1.03 : 1,
+          ...(dragUi ? LIFT_SHADOW : void 0),
+          children: [/* @__PURE__ */jsx(View, {
+            width: nodeIconSize + 2,
+            height: nodeIconSize + 2,
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            children: overlayNode.icon ?? defaultNodeIcon(overlayHasChildren, false, nodeIconSize)
+          }), /* @__PURE__ */jsx(Text, {
+            fontSize: labelFontSize,
+            color: "$color",
+            numberOfLines: 1,
+            flexShrink: 1,
+            children: overlayNode.label
+          })]
+        })
+      }), canReorder && /* @__PURE__ */jsx(View, {
+        "aria-live": "assertive",
+        "aria-atomic": true,
+        ...{
+          "data-treeview-announcer": "true"
+        },
+        position: "absolute",
+        width: 1,
+        height: 1,
+        overflow: "hidden",
+        opacity: 0,
+        pointerEvents: "none",
+        children: /* @__PURE__ */jsx(Text, {
+          children: announcement
+        })
+      })]
     })
   });
 }