@multiplatform.one/components 6.0.4 → 6.3.0

package/dist/esm/views/TreeView.native.js

@@ -1,54 +1,211 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { componentColors } from "../componentColors.native.js";
+import { EmptyState } from "../layouts/page.native.js";
 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.native.js";
 import { useHotkey } from "@tanstack/react-hotkeys";
-import React, { useCallback, useId, useMemo, useRef, useState } from "react";
-import { ListItem, Text, View, YStack } from "tamagui";
+import React, { 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.native.js";
+import { applyTreeMove, describeTreeCancel, describeTreeDragState, flattenDndRows, indicatorForTarget, resolveTreeDrop, subtreeIds, treeDropTargetForY, treeKeyboardLift, treeKeyboardMove } from "./treeViewDnd.native.js";
+import { diffVisibleRows, flattenVisibleIds, isEmptyDiff } from "./treeViewMotion.native.js";
+var ENTER_RISE_PX = -4;
+var DRAG_THRESHOLD_PX = 4;
+var TOUCH_LONG_PRESS_MS = 200;
+var AUTO_SCROLL_EDGE_PX = 48;
+var AUTO_SCROLL_MAX_SPEED = 16;
+var LIFT_SHADOW = {
+  shadowColor: "#000",
+  shadowOffset: {
+    width: 0,
+    height: 10
+  },
+  shadowOpacity: 0.15,
+  shadowRadius: 20
+};
+function collectBranchIds(items) {
+  var into = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : /* @__PURE__ */new Set();
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = items[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var node = _step.value;
+      var _ref;
+      var _node_children;
+      if (((_ref = (_node_children = node.children) === null || _node_children === void 0 ? void 0 : _node_children.length) !== null && _ref !== void 0 ? _ref : 0) > 0) {
+        into.add(node.id);
+        collectBranchIds(node.children, into);
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  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(param) {
   var {
     nodes,
-    renderNode = function (node) {
-      return 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
   } = param;
-  var _ref, _ref1, _ref2, _ref3, _ref4;
+  var _knobProps_space, _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _overlayNode_icon;
+  var _overlayNode_children, _dragUi_indicator, _dragUi_ghost, _dragUi_ghost1;
   var {
-    knobProps
+    t
+  } = useTranslation();
+  var emptyMessage = emptyMessageProp !== null && emptyMessageProp !== void 0 ? emptyMessageProp : t("No items found");
+  var {
+    knobProps,
+    control
   } = useResolvedKnobs();
+  var onAccentLabel = useReadableTextOn("$accentBackground");
+  var transition = knobProps.transition;
+  var compressed = display === "compressed";
   var sz = knobProps.sizeToken;
-  var estimateSize = estimateSizeProp !== null && estimateSizeProp !== void 0 ? estimateSizeProp : sz === "$3" ? 30 : sz === "$5" ? 44 : 36;
+  var estimateSize = estimateSizeProp !== null && estimateSizeProp !== void 0 ? estimateSizeProp : compressed ? sz === "$5" ? 32 : 28 : sz === "$3" ? 30 : sz === "$5" ? 40 : 36;
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
-  var expandIconSize = sz === "$3" ? 16 : sz === "$5" ? 24 : 20;
+  var expandIconSize = compressed ? 14 : sz === "$3" ? 16 : sz === "$5" ? 20 : 18;
+  var nodeIconSize = compressed ? 14 : 18;
+  var caretSize = compressed ? 12 : 14;
+  var isRTL = useDirection() === "rtl";
+  var CollapsedCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
+  var expandedCaretRotation = isRTL ? "-90deg" : "90deg";
+  var indentStep = compressed ? 12 : 16;
+  var labelFontSize = compressed ? 12 : 14;
+  var rowPad = (_knobProps_space = (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]) !== null && _knobProps_space !== void 0 ? _knobProps_space : compressed ? {
+    y: 4,
+    x: 6
+  } : {
+    y: 6,
+    x: 8
+  };
+  var rowPadY = rowPad.y;
+  var rowPadX = rowPad.x;
   var treeId = useId();
   var containerRef = useRef(null);
   var flashListRef = useRef(null);
   var [focusedIndex, setFocusedIndex] = useState(-1);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+  var handleContainerFocus = useCallback(function () {
+    if (!wasKeyboardFocus()) return;
+    setFocusedIndex(function (prev) {
+      return prev < 0 ? 0 : prev;
+    });
+  }, []);
   var [expandedIds, setExpandedIds] = useState(function () {
-    return new Set(defaultExpandedIds !== null && defaultExpandedIds !== void 0 ? defaultExpandedIds : []);
+    if (defaultExpandedIds) return new Set(defaultExpandedIds);
+    if (expandByDefault) return collectBranchIds(nodes);
+    return /* @__PURE__ */new Set();
   });
+  var [motion, setMotion] = useState(null);
+  var rowHeights = useRef(/* @__PURE__ */new Map());
+  var getRowHeight = useCallback(function (id) {
+    var _rowHeights_current_get;
+    return (_rowHeights_current_get = rowHeights.current.get(id)) !== null && _rowHeights_current_get !== void 0 ? _rowHeights_current_get : estimateSize;
+  }, [estimateSize]);
   var toggleNode = useCallback(function (node) {
-    setExpandedIds(function (prev) {
-      var next = new Set(prev);
-      if (next.has(node.id)) {
-        next.delete(node.id);
-      } else {
-        next.add(node.id);
-      }
-      return next;
-    });
+    var next = new Set(expandedIds);
+    if (next.has(node.id)) {
+      next.delete(node.id);
+    } else {
+      next.add(node.id);
+    }
+    if (transition) {
+      var diff = diffVisibleRows(flattenVisibleIds(nodes, expandedIds), flattenVisibleIds(nodes, next), getRowHeight);
+      setMotion(isEmptyDiff(diff) ? null : {
+        phase: "armed",
+        ...diff
+      });
+    } else {
+      setMotion(null);
+    }
+    setExpandedIds(next);
     onNodeToggle === null || onNodeToggle === void 0 ? void 0 : onNodeToggle(node);
-  }, [onNodeToggle]);
+  }, [expandedIds, nodes, transition, getRowHeight, onNodeToggle]);
+  useLayoutEffect(function () {
+    if ((motion === null || motion === void 0 ? void 0 : motion.phase) !== "armed") return;
+    var raf = requestAnimationFrame(function () {
+      setMotion(function (m) {
+        return m && m.phase === "armed" ? {
+          ...m,
+          phase: "play"
+        } : m;
+      });
+    });
+    return function () {
+      return cancelAnimationFrame(raf);
+    };
+  }, [motion]);
   var flatNodes = useMemo(function () {
     var result = [];
     var walk = function walk1(items, depth) {
@@ -58,9 +215,9 @@ function TreeView(param) {
       try {
         for (var _iterator = items[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
           var node = _step.value;
-          var _ref5;
+          var _ref13;
           var _node_children;
-          var hasChildren = ((_ref5 = (_node_children = node.children) === null || _node_children === void 0 ? void 0 : _node_children.length) !== null && _ref5 !== void 0 ? _ref5 : 0) > 0;
+          var hasChildren = ((_ref13 = (_node_children = node.children) === null || _node_children === void 0 ? void 0 : _node_children.length) !== null && _ref13 !== void 0 ? _ref13 : 0) > 0;
           var isExpanded = expandedIds.has(node.id);
           result.push({
             node,
@@ -100,10 +257,451 @@ function TreeView(param) {
       });
     }
   }, [flatNodes.length]);
+  var canReorder = Boolean(onNodeMove);
+  var [dragUi, setDragUi] = useState(null);
+  var [settle, setSettle] = useState(null);
+  var [announcement, setAnnouncement] = useState("");
+  var [dragScrollY, setDragScrollY] = useState(0);
+  var dragUiRef = useRef(null);
+  dragUiRef.current = dragUi;
+  var scrollOffsetRef = useRef(0);
+  var pointerPosRef = useRef({
+    x: 0,
+    y: 0
+  });
+  var grabOffsetRef = useRef({
+    x: 0,
+    y: 0
+  });
+  var suppressClickRef = useRef(false);
+  var sessionCleanupRef = useRef(null);
+  var autoScrollRafRef = useRef(null);
+  var pendingMoveFlipRef = useRef(null);
+  useEffect(function () {
+    return function () {
+      var _sessionCleanupRef_current;
+      return (_sessionCleanupRef_current = sessionCleanupRef.current) === null || _sessionCleanupRef_current === void 0 ? void 0 : _sessionCleanupRef_current.call(sessionCleanupRef);
+    };
+  }, []);
+  var dndRows = useMemo(function () {
+    return flattenDndRows(nodes, expandedIds);
+  }, [nodes, expandedIds]);
+  var topOfFlatIndex = useCallback(function (flatIndex) {
+    var top = 0;
+    for (var i = 0; i < flatIndex && i < flatNodes.length; i++) {
+      top += getRowHeight(flatNodes[i].node.id);
+    }
+    return top;
+  }, [flatNodes, getRowHeight]);
+  var announce = useCallback(function (a) {
+    var _a_parent;
+    var parent = (_a_parent = a.parent) !== null && _a_parent !== void 0 ? _a_parent : t("top level");
+    var 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]);
+  var hitTest = useCallback(function (clientY, ui) {
+    var _containerRef_current_getBoundingClientRect, _containerRef_current;
+    var rect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : (_containerRef_current_getBoundingClientRect = _containerRef_current.getBoundingClientRect) === null || _containerRef_current_getBoundingClientRect === void 0 ? void 0 : _containerRef_current_getBoundingClientRect.call(_containerRef_current);
+    if (!rect) return null;
+    return treeDropTargetForY({
+      localY: clientY - rect.top + scrollOffsetRef.current,
+      rows: dndRows,
+      getHeight: getRowHeight,
+      session: ui.session,
+      draggedSubtree: ui.subtree
+    });
+  }, [dndRows, getRowHeight]);
+  var stopAutoScroll = useCallback(function () {
+    if (autoScrollRafRef.current !== null) cancelAnimationFrame(autoScrollRafRef.current);
+    autoScrollRafRef.current = null;
+  }, []);
+  var startAutoScroll = useCallback(function () {
+    stopAutoScroll();
+    var tick = function tick1() {
+      var _containerRef_current_getBoundingClientRect, _containerRef_current;
+      var ui = dragUiRef.current;
+      if (!ui || ui.mode !== "pointer") {
+        autoScrollRafRef.current = null;
+        return;
+      }
+      var rect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : (_containerRef_current_getBoundingClientRect = _containerRef_current.getBoundingClientRect) === null || _containerRef_current_getBoundingClientRect === void 0 ? void 0 : _containerRef_current_getBoundingClientRect.call(_containerRef_current);
+      if (rect) {
+        var 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) {
+          var max = Math.max(0, topOfFlatIndex(flatNodes.length) - rect.height);
+          var next = Math.min(max, Math.max(0, scrollOffsetRef.current + vy));
+          if (next !== scrollOffsetRef.current) {
+            var _flashListRef_current;
+            scrollOffsetRef.current = next;
+            (_flashListRef_current = flashListRef.current) === null || _flashListRef_current === void 0 ? void 0 : _flashListRef_current.scrollToOffset({
+              offset: next,
+              animated: false
+            });
+            setDragScrollY(next);
+            var hit = hitTest(pointerPosRef.current.y, ui);
+            if (hit) {
+              setDragUi(function (prev) {
+                return 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]);
+  var endDrag = useCallback(function (commit) {
+    var _sessionCleanupRef_current;
+    var ui = dragUiRef.current;
+    if (!ui) return;
+    stopAutoScroll();
+    (_sessionCleanupRef_current = sessionCleanupRef.current) === null || _sessionCleanupRef_current === void 0 ? void 0 : _sessionCleanupRef_current.call(sessionCleanupRef);
+    sessionCleanupRef.current = null;
+    var resolved = resolveTreeDrop(ui.session);
+    var canCommit = commit && resolved.commit && Boolean(onNodeMove);
+    var dest = null;
+    var expectedIds = null;
+    if (canCommit) {
+      var _dndRows_find;
+      var nextNodes = applyTreeMove(nodes, ui.session.nodeId, resolved.to);
+      expectedIds = flattenVisibleIds(nextNodes, expandedIds);
+      var destFlat = expectedIds.indexOf(ui.session.nodeId);
+      var parentRow = resolved.to.parentId === null ? null : (_dndRows_find = dndRows.find(function (r) {
+        return r.id === resolved.to.parentId;
+      })) !== null && _dndRows_find !== void 0 ? _dndRows_find : null;
+      var top = 0;
+      if (destFlat >= 0) {
+        for (var 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 {
+      var originFlat = flatNodes.findIndex(function (f) {
+        return 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 === null || onNodeMove === void 0 ? void 0 : 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(function () {
+    var pending = pendingMoveFlipRef.current;
+    if (!pending) return;
+    var currentIds = flatNodes.map(function (f) {
+      return f.node.id;
+    });
+    var same = function same2(a, b) {
+      return a.length === b.length && a.every(function (v, i) {
+        return v === b[i];
+      });
+    };
+    if (same(currentIds, pending.prevIds)) return;
+    pendingMoveFlipRef.current = null;
+    if (!same(currentIds, pending.expectedIds)) return;
+    var diff = diffVisibleRows(pending.prevIds, pending.expectedIds, getRowHeight);
+    if (!isEmptyDiff(diff)) setMotion({
+      phase: "armed",
+      ...diff
+    });
+  }, [flatNodes, getRowHeight]);
+  useEffect(function () {
+    var _containerRef_current_querySelector, _containerRef_current;
+    if (!settle) return;
+    var el = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : (_containerRef_current_querySelector = _containerRef_current.querySelector) === null || _containerRef_current_querySelector === void 0 ? void 0 : _containerRef_current_querySelector.call(_containerRef_current, "[data-treeview-overlay]");
+    if (!el || typeof requestAnimationFrame === "undefined") {
+      setSettle(null);
+      return;
+    }
+    var last = null;
+    var stableFrames = 0;
+    var raf = 0;
+    var check = function check1() {
+      var 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 function () {
+      return cancelAnimationFrame(raf);
+    };
+  }, [settle]);
+  var beginPointerDrag = useCallback(function (flat, rowEl, clientX, clientY) {
+    var container = containerRef.current;
+    if (!(container === null || container === void 0 ? void 0 : container.getBoundingClientRect)) return false;
+    var session = treeKeyboardLift(nodes, flat.node.id);
+    if (!session) return false;
+    var rowRect = rowEl.getBoundingClientRect();
+    var containerRect = container.getBoundingClientRect();
+    grabOffsetRef.current = {
+      x: clientX - rowRect.left,
+      y: clientY - rowRect.top
+    };
+    pointerPosRef.current = {
+      x: clientX,
+      y: clientY
+    };
+    var 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]);
+  var handleDragHandlePointerDown = useCallback(function (flat, e) {
+    var _ref13, _e_pointerType;
+    var _sessionCleanupRef_current, _e_stopPropagation, _handleEl_closest;
+    if (!canReorder || typeof window === "undefined") return;
+    if (e.button !== void 0 && e.button !== 0) return;
+    if (dragUiRef.current) return;
+    (_sessionCleanupRef_current = sessionCleanupRef.current) === null || _sessionCleanupRef_current === void 0 ? void 0 : _sessionCleanupRef_current.call(sessionCleanupRef);
+    (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+    var handleEl = e.currentTarget;
+    var rowEl = (_ref13 = (_handleEl_closest = handleEl.closest) === null || _handleEl_closest === void 0 ? void 0 : _handleEl_closest.call(handleEl, "[data-treeview-row]")) !== null && _ref13 !== void 0 ? _ref13 : handleEl;
+    var startX = e.clientX;
+    var startY = e.clientY;
+    var pointerType = (_e_pointerType = e.pointerType) !== null && _e_pointerType !== void 0 ? _e_pointerType : "mouse";
+    var lifted = false;
+    var longPressTimer = null;
+    var prevUserSelect = "";
+    var prevCursor = "";
+    var lift = function lift2(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";
+    };
+    var teardown = function teardown2() {
+      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(function () {
+          suppressClickRef.current = false;
+        }, 0);
+      }
+    };
+    var onMove = function onMove2(me) {
+      var _ref14, _ref15;
+      var _containerRef_current_getBoundingClientRect, _containerRef_current;
+      pointerPosRef.current = {
+        x: me.clientX,
+        y: me.clientY
+      };
+      if (!lifted) {
+        var 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;
+      }
+      var containerRect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : (_containerRef_current_getBoundingClientRect = _containerRef_current.getBoundingClientRect) === null || _containerRef_current_getBoundingClientRect === void 0 ? void 0 : _containerRef_current_getBoundingClientRect.call(_containerRef_current);
+      var ghost = {
+        x: me.clientX - ((_ref14 = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _ref14 !== void 0 ? _ref14 : 0) - grabOffsetRef.current.x,
+        y: me.clientY - ((_ref15 = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _ref15 !== void 0 ? _ref15 : 0) - grabOffsetRef.current.y
+      };
+      var ui = dragUiRef.current;
+      if (!ui) return;
+      var hit = hitTest(me.clientY, ui);
+      setDragUi(function (prev) {
+        return prev ? {
+          ...prev,
+          ghost,
+          ...(hit && {
+            session: {
+              ...prev.session,
+              target: hit.target
+            },
+            indicator: hit.indicator
+          })
+        } : prev;
+      });
+    };
+    var onUp = function onUp2() {
+      var wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(true);
+    };
+    var onCancel = function onCancel2() {
+      var wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(false);
+    };
+    var onKey = function onKey2(ke) {
+      if (ke.key !== "Escape") return;
+      ke.stopPropagation();
+      var wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(false);
+    };
+    var onTouchMove = function onTouchMove2(te) {
+      if (lifted) te.preventDefault();
+    };
+    var onContextMenu = function onContextMenu2(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 = function () {
+      var wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(false);
+    };
+    if (pointerType !== "mouse") {
+      longPressTimer = setTimeout(function () {
+        longPressTimer = null;
+        var p = pointerPosRef.current;
+        lift(p.x || startX, p.y || startY);
+      }, TOUCH_LONG_PRESS_MS);
+      pointerPosRef.current = {
+        x: startX,
+        y: startY
+      };
+    }
+  }, [beginPointerDrag, canReorder, endDrag, hitTest]);
+  var liftFocusedNode = useCallback(function () {
+    if (!canReorder || dragUiRef.current) return false;
+    var flat = flatNodes[focusedIndex];
+    if (!flat) return false;
+    var session = treeKeyboardLift(nodes, flat.node.id);
+    if (!session) return false;
+    var 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]);
+  var moveKeyboardDrag = useCallback(function (direction) {
+    var ui = dragUiRef.current;
+    if (!ui || ui.mode !== "keyboard") return false;
+    var next = treeKeyboardMove(ui.session, nodes, direction);
+    if (next === ui.session) return true;
+    var indicator = indicatorForTarget(dndRows, next, next.target);
+    var 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]);
   var hotkeyOpts = {
     target: containerRef
   };
   useHotkey((_ref = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.next) !== null && _ref !== void 0 ? _ref : "ArrowDown", function () {
+    if (moveKeyboardDrag("down")) return;
     setFocusedIndex(function (prev) {
       var next = prev < 0 ? 0 : Math.min(prev + 1, flatNodes.length - 1);
       scrollToIndex(next);
@@ -111,6 +709,7 @@ function TreeView(param) {
     });
   }, hotkeyOpts);
   useHotkey((_ref1 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.prev) !== null && _ref1 !== void 0 ? _ref1 : "ArrowUp", function () {
+    if (moveKeyboardDrag("up")) return;
     setFocusedIndex(function (prev) {
       var next = prev < 0 ? flatNodes.length - 1 : Math.max(prev - 1, 0);
       scrollToIndex(next);
@@ -118,6 +717,7 @@ function TreeView(param) {
     });
   }, hotkeyOpts);
   useHotkey((_ref2 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.expand) !== null && _ref2 !== void 0 ? _ref2 : "ArrowRight", function () {
+    if (moveKeyboardDrag("right")) return;
     if (focusedIndex >= 0 && focusedIndex < flatNodes.length) {
       var {
         node,
@@ -130,6 +730,7 @@ function TreeView(param) {
     }
   }, hotkeyOpts);
   useHotkey((_ref3 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.collapse) !== null && _ref3 !== void 0 ? _ref3 : "ArrowLeft", function () {
+    if (moveKeyboardDrag("left")) return;
     if (focusedIndex >= 0 && focusedIndex < flatNodes.length) {
       var {
         node,
@@ -141,50 +742,114 @@ function TreeView(param) {
       }
     }
   }, hotkeyOpts);
-  useHotkey((_ref4 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.select) !== null && _ref4 !== void 0 ? _ref4 : "Enter", function () {
+  useHotkey((_ref4 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.toggle) !== null && _ref4 !== void 0 ? _ref4 : "Space", function () {
+    var _dragUiRef_current;
+    if (((_dragUiRef_current = dragUiRef.current) === null || _dragUiRef_current === void 0 ? void 0 : _dragUiRef_current.mode) === "keyboard") {
+      endDrag(true);
+      return;
+    }
+    if (canReorder) {
+      liftFocusedNode();
+      return;
+    }
+    if (focusedIndex >= 0 && focusedIndex < flatNodes.length) {
+      var {
+        node,
+        hasChildren
+      } = flatNodes[focusedIndex];
+      if (hasChildren) {
+        toggleNode(node);
+      }
+    }
+  }, hotkeyOpts);
+  useHotkey((_ref5 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.select) !== null && _ref5 !== void 0 ? _ref5 : "Enter", function () {
+    var _dragUiRef_current;
+    if (((_dragUiRef_current = dragUiRef.current) === null || _dragUiRef_current === void 0 ? void 0 : _dragUiRef_current.mode) === "keyboard") {
+      endDrag(true);
+      return;
+    }
     if (focusedIndex >= 0 && focusedIndex < flatNodes.length) {
       onNodeSelect === null || onNodeSelect === void 0 ? void 0 : onNodeSelect(flatNodes[focusedIndex].node);
     }
   }, hotkeyOpts);
+  useHotkey("Escape", function () {
+    var _dragUiRef_current;
+    if (((_dragUiRef_current = dragUiRef.current) === null || _dragUiRef_current === void 0 ? void 0 : _dragUiRef_current.mode) === "keyboard") endDrag(false);
+  }, hotkeyOpts);
+  useHotkey((_ref6 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.first) !== null && _ref6 !== void 0 ? _ref6 : "Home", function () {
+    if (flatNodes.length > 0) {
+      setFocusedIndex(0);
+      scrollToIndex(0);
+    }
+  }, hotkeyOpts);
+  useHotkey((_ref7 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.last) !== null && _ref7 !== void 0 ? _ref7 : "End", function () {
+    if (flatNodes.length > 0) {
+      var 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
     });
   }
   var effectiveFocused = focusedIndex >= flatNodes.length ? -1 : focusedIndex;
+  var resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : typeof stackProps["aria-label"] === "string" ? stackProps["aria-label"] : void 0;
+  var overlayNode = (dragUi === null || dragUi === void 0 ? void 0 : dragUi.mode) === "pointer" ? dragUi.node : settle === null || settle === void 0 ? void 0 : settle.node;
+  var overlayHasChildren = ((_ref8 = overlayNode === null || overlayNode === void 0 ? void 0 : (_overlayNode_children = overlayNode.children) === null || _overlayNode_children === void 0 ? void 0 : _overlayNode_children.length) !== null && _ref8 !== void 0 ? _ref8 : 0) > 0;
+  var 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: function keyExtractor(item) {
           return item.node.id;
         },
-        extraData: effectiveFocused,
+        extraData: {
+          focused: effectiveFocused,
+          selectedId,
+          expandedIds,
+          motion,
+          dragUi,
+          settle
+        },
+        ...(canReorder && {
+          onScroll: function onScroll(e) {
+            var _e_nativeEvent_contentOffset, _e_nativeEvent;
+            var y = e === null || e === void 0 ? void 0 : (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : (_e_nativeEvent_contentOffset = _e_nativeEvent.contentOffset) === null || _e_nativeEvent_contentOffset === void 0 ? void 0 : _e_nativeEvent_contentOffset.y;
+            if (typeof y === "number") {
+              scrollOffsetRef.current = y;
+              if (dragUiRef.current) setDragScrollY(y);
+            }
+          },
+          scrollEventThrottle: 16
+        }),
         renderItem: function renderItem(param2) {
           var {
             item,
             index
           } = param2;
-          var _ref5;
-          var _this;
+          var _ref13, _ref14, _ref22;
+          var _dragUi_indicator2;
           var {
             node,
             depth,
@@ -192,72 +857,228 @@ function TreeView(param) {
             isExpanded
           } = item;
           var isFocused = effectiveFocused === index;
-          return /* @__PURE__ */_jsx(ListItem, {
+          var isSelected = selectedId !== void 0 && selectedId === node.id;
+          var leadingIcon = hasChildren && isExpanded && node.iconWhenExpanded ? node.iconWhenExpanded : node.icon ? node.icon : defaultNodeIcon(hasChildren, isExpanded, nodeIconSize);
+          var labelContent = renderNode ? renderNode(node, depth) : /* @__PURE__ */_jsx(Text, {
+            fontSize: labelFontSize,
+            color: isSelected && onAccentLabel ? onAccentLabel : "$color",
+            numberOfLines: 1,
+            flexShrink: 1,
+            children: node.label
+          });
+          var armed = (motion === null || motion === void 0 ? void 0 : motion.phase) === "armed";
+          var entering = (_ref13 = motion === null || motion === void 0 ? void 0 : motion.entering.has(node.id)) !== null && _ref13 !== void 0 ? _ref13 : false;
+          var delta = (_ref14 = motion === null || motion === void 0 ? void 0 : motion.deltas.get(node.id)) !== null && _ref14 !== void 0 ? _ref14 : 0;
+          var rowY = armed ? entering ? ENTER_RISE_PX : delta : 0;
+          var inDraggedSubtree = (_ref22 = dragUi === null || dragUi === void 0 ? void 0 : dragUi.subtree.has(node.id)) !== null && _ref22 !== void 0 ? _ref22 : false;
+          var isSettleHidden = (settle === null || settle === void 0 ? void 0 : settle.hideId) === node.id;
+          var isDropParent = (dragUi === null || dragUi === void 0 ? void 0 : (_dragUi_indicator2 = dragUi.indicator) === null || _dragUi_indicator2 === void 0 ? void 0 : _dragUi_indicator2.kind) === "into" && dragUi.indicator.parentId === node.id;
+          var rowOpacity = isSettleHidden ? 0 : armed && entering ? 0 : inDraggedSubtree ? 0.4 : 1;
+          var 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: function onPress() {
-                  return 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 ? (_ref5 = (_this = {
-              backgroundColor: componentColors.surface.background
-            }) === null || _this === void 0 ? void 0 : _this.backgroundColor) !== null && _ref5 !== void 0 ? _ref5 : 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: function onLayout(e) {
+              var _e_nativeEvent_layout, _e_nativeEvent;
+              var h = e === null || e === void 0 ? void 0 : (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : (_e_nativeEvent_layout = _e_nativeEvent.layout) === null || _e_nativeEvent_layout === void 0 ? void 0 : _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",
+            // Row hover/press come from the knob state recipes (A-STATE);
+            // selection tint stays sticky underneath them.
             hoverStyle: {
-              backgroundColor: componentColors.interactive.background
+              ...control.hoverKnobProps,
+              ...(isSelected && {
+                backgroundColor: "$accentBackground"
+              })
             },
             pressStyle: {
-              backgroundColor: componentColors.interactive.hover
+              ...control.pressKnobProps,
+              ...(isSelected && {
+                backgroundColor: "$accentBackground"
+              })
             },
-            ...knobProps.borderRadius,
-            cursor: "pointer",
+            // Focus ring (Axiom 12): ≥2px, non-removable — also visible on
+            // selected rows; inset so the virtualized viewport can't clip it.
+            outlineWidth: isFocused ? 2 : 0,
+            outlineStyle: "solid",
+            outlineColor: "$outlineColor",
+            outlineOffset: -2,
             onPress: function onPress() {
-              return onNodeSelect === null || onNodeSelect === void 0 ? void 0 : onNodeSelect(node);
-            }
-          });
+              if (suppressClickRef.current) return;
+              setFocusedIndex(index);
+              if (hasChildren) toggleNode(node);
+              onNodeSelect === null || onNodeSelect === void 0 ? void 0 : onNodeSelect(node);
+            },
+            children: [showExpansionArrows ? hasChildren ? /* @__PURE__ */_jsx(View, {
+              width: expandIconSize,
+              height: expandIconSize,
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none",
+              // Indicator only — the row is the toggle target. One
+              // caret that rotates (transform, knob tween) instead of
+              // an icon swap, so the state change is continuous.
+              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: function onPress(e) {
+                var _e_stopPropagation;
+                return e === null || e === void 0 ? void 0 : (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+              },
+              onPointerDown: function onPointerDown(e) {
+                return handleDragHandlePointerDown(item, e);
+              },
+              children: /* @__PURE__ */_jsx(DotsSixVerticalIcon, {
+                size: caretSize,
+                weight: "bold"
+              })
+            }) : null]
+          },
+          // Remount when a recycled cell switches nodes so state fills
+          // and the caret never tween across two different rows.
+          node.id);
         }
-      })
+      }), (dragUi === null || dragUi === void 0 ? void 0 : (_dragUi_indicator = dragUi.indicator) === null || _dragUi_indicator === void 0 ? void 0 : _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"
+        })
+      }),
+      /* Ghost overlay: clone of the dragged row outside the virtualized
+      list. Pointer mode tracks 1:1 with no tween; the drop/cancel
+      settle leap tweens with the animation knob (LC-42). */
+      overlayNode !== void 0 && /* @__PURE__ */_jsx(View, {
+        "data-treeview-overlay": "true",
+        "data-treeview-overlay-phase": dragUi ? "pointer" : "settling",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        x: (_ref9 = (dragUi === null || dragUi === void 0 ? void 0 : dragUi.mode) === "pointer" ? (_dragUi_ghost = dragUi.ghost) === null || _dragUi_ghost === void 0 ? void 0 : _dragUi_ghost.x : settle === null || settle === void 0 ? void 0 : settle.to.x) !== null && _ref9 !== void 0 ? _ref9 : 0,
+        y: (_ref10 = (dragUi === null || dragUi === void 0 ? void 0 : dragUi.mode) === "pointer" ? (_dragUi_ghost1 = dragUi.ghost) === null || _dragUi_ghost1 === void 0 ? void 0 : _dragUi_ghost1.y : settle === null || settle === void 0 ? void 0 : settle.to.y) !== null && _ref10 !== void 0 ? _ref10 : 0,
+        width: (_ref11 = dragUi === null || dragUi === void 0 ? void 0 : dragUi.width) !== null && _ref11 !== void 0 ? _ref11 : settle === null || settle === void 0 ? void 0 : settle.width,
+        height: (_ref12 = dragUi === null || dragUi === void 0 ? void 0 : dragUi.height) !== null && _ref12 !== void 0 ? _ref12 : settle === null || settle === void 0 ? void 0 : 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 = overlayNode.icon) !== null && _overlayNode_icon !== void 0 ? _overlayNode_icon : defaultNodeIcon(overlayHasChildren, false, nodeIconSize)
+          }), /* @__PURE__ */_jsx(Text, {
+            fontSize: labelFontSize,
+            color: "$color",
+            numberOfLines: 1,
+            flexShrink: 1,
+            children: overlayNode.label
+          })]
+        })
+      }), /* Screen-reader drag announcements (WAI-ARIA drag pattern, LC-43). */
+      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
+        })
+      })]
     })
   });
 }