react-native-tree-multi-select 3.0.0-beta.4 → 3.0.0-beta.6

package/lib/module/hooks/useDragDrop.js

@@ -1,11 +1,36 @@
 "use strict";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Animated, PanResponder } from "react-native";
+import { AccessibilityInfo, Animated, PanResponder, Platform } from "react-native";
 import { getTreeViewStore } from "../store/treeView.store.js";
-import { collapseNodes, expandNodes, handleToggleExpand, initializeNodeMaps, recalculateCheckedStates } from "../helpers/index.js";
-import { moveTreeNode } from "../helpers/moveTreeNode.helper.js";
-import { listHeaderFooterPadding } from "../constants/treeView.constants.js";
+import { collapseNodes, expandNodes, getSubtreeDepthFromMap, handleToggleExpand } from "../helpers/index.js";
+import { applyMoveToStore, findNodePosition, findNodePositionFromMaps, moveTreeNode } from "../helpers/moveTreeNode.helper.js";
+import { scrollMovedNodeIntoView } from "./useScrollToNode.js";
+import { defaultItemHeight } from "../constants/treeView.constants.js";
+
+// Android reports touch `locationY` slightly differently from iOS, which makes the
+// drag overlay sit ~2 item-heights closer to the finger. This empirical correction
+// (in item-height units, added to dragOverlayOffset) compensates for that. Consumers
+// can override it per-instance via DragAndDropOptions.overlayYCorrection.
+const DEFAULT_OVERLAY_Y_CORRECTION = Platform.OS === "android" ? -2 : 0;
+
+// Auto-scroll speed at the very edge in px/SECOND, before the proximity ramp
+// and the consumer's `autoScrollSpeed` multiplier are applied. Time-based (not
+// px/frame) so 60Hz and 120Hz displays scroll at the same real-world speed.
+const MAX_AUTO_SCROLL_SPEED = 1200;
+// During auto-scroll, recompute the drop target at most this often. Every scroll
+// frame moves rows under the finger, but recomputing per frame costs store
+// writes + node re-renders on the JS thread (stuttering the scroll itself), and
+// ~10 indicator updates/sec reads calmer than 60 anyway.
+const AUTO_SCROLL_RECALC_INTERVAL_MS = 100;
+// How long (ms) a candidate drop level must hold before the overlay springs to
+// its indentation. Prevents the indent from chasing every row the finger merely
+// passes through while dragging vertically.
+const LEVEL_SETTLE_MS = 120;
+// How far (fraction of row height) the active zone's boundaries extend outward
+// while the finger stays on the same row. Finger tremor at a zone edge would
+// otherwise flip above/inside/below (and the overlay indent) every few frames.
+const ZONE_STICKINESS = 0.08;
 export function useDragDrop(params) {
   const {
     storeId,
@@ -19,39 +44,60 @@ export function useDragDrop(params) {
     longPressDuration,
     autoScrollThreshold,
     autoScrollSpeed,
-    internalDataRef,
     measuredItemHeightRef,
+    contentHeightRef,
+    itemHeightsRef,
     dragOverlayOffset,
+    overlayYCorrection,
     autoExpandDelay,
+    autoExpand = true,
+    magneticSnap = true,
     indentationMultiplier,
     canDrop: canDropCallback,
     maxDepth,
     canNodeHaveChildren,
-    canDrag
+    canDrag,
+    scrollToNodeHandlerRef,
+    autoScrollToDroppedNode
   } = params;
 
   // --- Refs for mutable state (no stale closures in PanResponder) ---
   const isDraggingRef = useRef(false);
   const draggedNodeRef = useRef(null);
-  const draggedNodeIdRef = useRef(null);
-  const draggedNodeIndexRef = useRef(-1);
+  // Whether the dragged node was expanded before drag start force-collapsed it,
+  // so a cancelled drag can restore the expansion (a cancel must not mutate state).
+  const wasDraggedNodeExpandedRef = useRef(false);
   const longPressTimerRef = useRef(null);
   const containerPageXRef = useRef(0);
   const containerPageYRef = useRef(0);
+  const containerWidthRef = useRef(0);
   const containerHeightRef = useRef(0);
   const grabOffsetYRef = useRef(0);
   const scrollOffsetRef = useRef(0);
   const headerOffsetRef = useRef(0);
-  const itemHeightRef = useRef(36);
+  const itemHeightRef = useRef(defaultItemHeight);
   const overlayY = useRef(new Animated.Value(0)).current;
   const overlayX = useRef(new Animated.Value(0)).current;
   const prevEffectiveLevelRef = useRef(null);
+  // Settle-debounce for the overlay indent: candidate level + the timer that
+  // springs the overlay to it once it has held for LEVEL_SETTLE_MS.
+  const pendingLevelRef = useRef(null);
+  const levelSettleTimerRef = useRef(null);
   const autoScrollRAFRef = useRef(null);
   const autoScrollSpeedRef = useRef(0);
 
-  // Delta-based auto-scroll: avoids unreliable containerPageY
-  const initialFingerPageYRef = useRef(0);
-  const initialFingerContainerYRef = useRef(0);
+  // Last known finger position, so the auto-scroll loop can recompute the drop
+  // target for a stationary finger while rows scroll underneath it.
+  const lastFingerPageYRef = useRef(0);
+  const lastFingerPageXRef = useRef(0);
+  // calculateDropTarget is defined below startAutoScrollLoop; the RAF loop reads
+  // it through this ref to avoid a use-before-declaration in the dep array.
+  const calculateDropTargetRef = useRef(() => {});
+
+  // Caches the "every current row is measured" gate so calculateDropTarget
+  // doesn't scan the full flattened list on every pan frame. Invalidated when
+  // the flattened list identity or the measured-heights count changes.
+  const allHeightsMeasuredRef = useRef(null);
 
   // Auto-expand timer for hovering over collapsed nodes
   const autoExpandTimerRef = useRef(null);
@@ -62,8 +108,16 @@ export function useDragDrop(params) {
   // Tracks whether the PanResponder has captured the current gesture
   const panResponderActiveRef = useRef(false);
 
+  // True between the long-press firing and the async measureInWindow callback
+  // resolving. Lets a finger-lift in that window abort the pending drag so the
+  // node is never left "lifted" with no finger down.
+  const pendingDragRef = useRef(false);
+
   // Previous drop target for hysteresis (prevents flicker between "below N" / "above N+1")
   const prevDropTargetRef = useRef(null);
+  // Flattened-list identity seen by the last calculateDropTarget call; when it
+  // changes mid-drag the index-based hysteresis state above is invalidated.
+  const lastCalcNodesRef = useRef(null);
 
   // Depth of the dragged subtree (computed once at drag start, used for maxDepth check)
   const draggedSubtreeDepthRef = useRef(0);
@@ -89,32 +143,49 @@ export function useDragDrop(params) {
   // Keep config values current for PanResponder closures
   const dragOverlayOffsetRef = useRef(dragOverlayOffset);
   dragOverlayOffsetRef.current = dragOverlayOffset;
+  const overlayYCorrectionRef = useRef(overlayYCorrection ?? DEFAULT_OVERLAY_Y_CORRECTION);
+  overlayYCorrectionRef.current = overlayYCorrection ?? DEFAULT_OVERLAY_Y_CORRECTION;
   const autoScrollThresholdRef = useRef(autoScrollThreshold);
   autoScrollThresholdRef.current = autoScrollThreshold;
   const autoScrollSpeedParamRef = useRef(autoScrollSpeed);
   autoScrollSpeedParamRef.current = autoScrollSpeed;
   const autoExpandDelayRef = useRef(autoExpandDelay);
   autoExpandDelayRef.current = autoExpandDelay;
+  const autoExpandRef = useRef(autoExpand);
+  autoExpandRef.current = autoExpand;
+  const magneticSnapRef = useRef(magneticSnap);
+  magneticSnapRef.current = magneticSnap;
   const indentationMultiplierRef = useRef(indentationMultiplier);
   indentationMultiplierRef.current = indentationMultiplier;
   const maxDepthRef = useRef(maxDepth);
   maxDepthRef.current = maxDepth;
 
-  // --- React state (triggers re-renders only at drag start/end + indicator changes) ---
+  // --- React state (triggers re-renders only at drag start/end + level changes) ---
   const [isDragging, setIsDragging] = useState(false);
   const [draggedNode, setDraggedNode] = useState(null);
-  const [dropTarget, setDropTarget] = useState(null);
-  const [effectiveDropLevel, setEffectiveDropLevel] = useState(0);
 
-  // Ref mirror of dropTarget - avoids nesting Zustand updates inside React state updaters
+  // The current drop target lives only in a ref (read by handleDragEnd at commit
+  // time). It is deliberately NOT React state: calculateDropTarget runs every pan
+  // frame, so a per-frame setState would re-render the whole list for nothing -
+  // the per-node drop indicator is driven by the store fields (dropTargetNodeId /
+  // dropPosition / dropLevel), which are throttled via lastStoreDropTargetRef.
   const dropTargetRef = useRef(null);
 
+  // Last value written to the store's drop target. Guards the per-frame Zustand
+  // write so updateDropTarget only fires when the indicator actually changes
+  // (otherwise every mounted Node's selector would re-run on every pan frame).
+  const lastStoreDropTargetRef = useRef(null);
+
   // --- Long press timer ---
   const cancelLongPressTimer = useCallback(() => {
     if (longPressTimerRef.current) {
       clearTimeout(longPressTimerRef.current);
       longPressTimerRef.current = null;
     }
+    // Also abort a drag still awaiting its async measureInWindow callback. This
+    // makes scrolling (which cancels the long-press) during that window abort the
+    // drag cleanly, instead of letting it start later with stale finger coords.
+    pendingDragRef.current = false;
   }, []);
 
   // --- Get all descendant IDs of a node ---
@@ -140,27 +211,41 @@ export function useDragDrop(params) {
 
   // --- Get the maximum depth of a subtree (0 for leaf nodes) ---
   const getSubtreeDepth = useCallback(nodeId => {
-    const store = getTreeViewStore(storeId);
     const {
       nodeMap
-    } = store.getState();
-    const node = nodeMap.get(nodeId);
-    if (!node?.children?.length) return 0;
-    let max = 0;
-    for (const child of node.children) {
-      max = Math.max(max, 1 + getSubtreeDepth(child.id));
-    }
-    return max;
+    } = getTreeViewStore(storeId).getState();
+    return getSubtreeDepthFromMap(nodeMap, nodeId);
   }, [storeId]);
 
+  // --- Overlay Y for a container-local finger Y (grab point + offsets) ---
+  const computeOverlayLocalY = useCallback(fingerLocalY => fingerLocalY - grabOffsetYRef.current + (dragOverlayOffsetRef.current + overlayYCorrectionRef.current) * itemHeightRef.current, []);
+
+  // --- Level-cliff horizontal control: is the finger left of the threshold
+  //     that selects the shallower level? (30% into the visible content area
+  //     of a row indented at `level`.) ---
+  const fingerLeftOfLevelThreshold = useCallback((level, fingerLocalX) => {
+    const itemLeftEdge = level * indentationMultiplierRef.current;
+    const threshold = itemLeftEdge + (containerWidthRef.current - itemLeftEdge) * 0.3;
+    return fingerLocalX < threshold;
+  }, []);
+
   // --- Initiate drag ---
   const initiateDrag = useCallback((nodeId, pageY, locationY, nodeIndex) => {
     if (!dragEnabled) return;
+    // Never start a second drag on top of one already running or pending
+    // (e.g. a competing long-press from a second finger).
+    if (isDraggingRef.current || pendingDragRef.current) return;
     const container = containerRef.current;
     if (!container) return;
-    container.measureInWindow((x, y, _w, h) => {
+    pendingDragRef.current = true;
+    container.measureInWindow((x, y, w, h) => {
+      // Finger lifted (or drag cancelled) before the measurement resolved -
+      // abort so we don't strand a drag with no finger down.
+      if (!pendingDragRef.current) return;
+      pendingDragRef.current = false;
       containerPageXRef.current = x;
       containerPageYRef.current = y;
+      containerWidthRef.current = w;
       containerHeightRef.current = h;
 
       // Find the node in flattened list
@@ -168,25 +253,25 @@ export function useDragDrop(params) {
       const node = nodes[nodeIndex];
       if (!node) return;
 
-      // Collapse node if expanded
+      // Collapse node if expanded (restored if the drag is cancelled)
       const store = getTreeViewStore(storeId);
       const {
         expanded
       } = store.getState();
+      wasDraggedNodeExpandedRef.current = false;
       if (expanded.has(nodeId) && node.children?.length) {
         handleToggleExpand(storeId, nodeId);
+        wasDraggedNodeExpandedRef.current = true;
       }
 
       // Store grab metadata
       grabOffsetYRef.current = locationY;
       draggedNodeRef.current = node;
-      draggedNodeIdRef.current = nodeId;
-      draggedNodeIndexRef.current = nodeIndex;
       draggedSubtreeDepthRef.current = getSubtreeDepth(nodeId);
 
       // Use measured item height if available, fall back to default
       const measured = measuredItemHeightRef.current;
-      itemHeightRef.current = measured > 0 ? measured : 36;
+      itemHeightRef.current = measured > 0 ? measured : defaultItemHeight;
 
       // Calculate headerOffset dynamically:
       // fingerLocalY = pageY - containerPageY
@@ -194,13 +279,7 @@ export function useDragDrop(params) {
       // So: headerOffset = fingerLocalY + scrollOffset - grabOffsetY - nodeIndex * itemHeight
       const fingerLocalY = pageY - containerPageYRef.current;
       headerOffsetRef.current = fingerLocalY + scrollOffsetRef.current - locationY - nodeIndex * itemHeightRef.current;
-
-      // Delta-based auto-scroll: compute finger's position in the container
-      // from the node's known index (avoids unreliable containerPageY).
-      const iH = itemHeightRef.current;
-      const listHeaderHeight = listHeaderFooterPadding * 2;
-      initialFingerPageYRef.current = pageY;
-      initialFingerContainerYRef.current = listHeaderHeight + nodeIndex * iH - scrollOffsetRef.current + locationY;
+      lastFingerPageYRef.current = pageY;
 
       // Compute invalid targets (self + descendants)
       const descendants = getDescendantIds(nodeId);
@@ -211,26 +290,27 @@ export function useDragDrop(params) {
       store.getState().updateInvalidDragTargetIds(descendants);
 
       // Set overlay initial position (with configurable offset)
-      const overlayLocalY = fingerLocalY - locationY + dragOverlayOffsetRef.current * itemHeightRef.current;
-      overlayY.setValue(overlayLocalY);
+      overlayY.setValue(computeOverlayLocalY(fingerLocalY));
 
       // Reset magnetic overlay
       overlayX.setValue(0);
       prevEffectiveLevelRef.current = node.level ?? 0;
+      cancelLevelSettleTimer();
 
       // Set React state
       isDraggingRef.current = true;
       autoExpandedDuringDragRef.current.clear();
       setIsDragging(true);
       setDraggedNode(node);
-      setEffectiveDropLevel(node.level ?? 0);
-      setDropTarget(null);
 
       // Notify consumer that drag has started
       onDragStartRef.current?.({
         draggedNodeId: nodeId
       });
 
+      // Announce for screen readers (no-op when no assistive tech is active).
+      AccessibilityInfo.announceForAccessibility?.(`Picked up ${node.name}`);
+
       // Start auto-scroll loop
       startAutoScrollLoop();
     });
@@ -241,6 +321,15 @@ export function useDragDrop(params) {
   // --- Handle node touch start (long press detection) ---
   const handleNodeTouchStart = useCallback((nodeId, pageY, locationY, nodeIndex) => {
     if (!dragEnabled) return;
+    // Ignore touches that land while a drag is already running or pending.
+    // Without this, a second finger on another row could arm a competing
+    // long-press that overwrites the in-flight drag's state.
+    if (isDraggingRef.current || pendingDragRef.current) return;
+
+    // Drag is disabled while a search filter is active: drop targets are
+    // computed against the filtered list but the move applies to the full
+    // tree, so a drop could land next to siblings hidden by the filter.
+    if (getTreeViewStore(storeId).getState().searchText) return;
 
     // Check if this node can be dragged
     if (canDragRef.current) {
@@ -256,24 +345,63 @@ export function useDragDrop(params) {
       longPressTimerRef.current = null;
       initiateDrag(nodeId, pageY, locationY, nodeIndex);
     }, longPressDuration);
-  }, [dragEnabled, longPressDuration, cancelLongPressTimer, initiateDrag]);
+  }, [dragEnabled, storeId, longPressDuration, cancelLongPressTimer, initiateDrag]);
 
   // --- Auto-scroll ---
   const startAutoScrollLoop = useCallback(() => {
-    const loop = () => {
+    // Idempotent: cancel any loop already in flight so a re-entry can never
+    // orphan a RAF handle (which would run a second, untracked scroll loop).
+    if (autoScrollRAFRef.current !== null) {
+      cancelAnimationFrame(autoScrollRAFRef.current);
+      autoScrollRAFRef.current = null;
+    }
+    // Time-based stepping: RAF cadence varies with display refresh rate, so
+    // distance is derived from elapsed time, not frame count.
+    let lastTs = null;
+    let lastRecalcTs = 0;
+    const loop = ts => {
       if (!isDraggingRef.current) return;
-      if (autoScrollSpeedRef.current !== 0) {
-        const newOffset = Math.max(0, scrollOffsetRef.current + autoScrollSpeedRef.current);
-        scrollOffsetRef.current = newOffset;
-        flashListRef.current?.scrollToOffset?.({
-          offset: newOffset,
-          animated: false
-        });
+
+      // Jest's RAF mock invokes the callback without a timestamp.
+      const now = typeof ts === "number" ? ts : Date.now();
+      // First frame establishes the baseline; cap dt so a long hiccup
+      // (background frame drop) can't produce one huge scroll jump.
+      const dtMs = lastTs === null ? 0 : Math.min(now - lastTs, 64);
+      lastTs = now;
+      if (autoScrollSpeedRef.current !== 0 && dtMs > 0) {
+        // Clamp to the scrollable range so dragging at the bottom edge can't
+        // grow the offset past the end (which would corrupt drop-index math).
+        // Leave the upper bound open until the content height is measured.
+        const contentH = contentHeightRef.current;
+        const maxOffset = contentH > 0 ? Math.max(0, contentH - containerHeightRef.current) : Number.POSITIVE_INFINITY;
+        const newOffset = Math.min(maxOffset, Math.max(0, scrollOffsetRef.current + autoScrollSpeedRef.current * dtMs / 1000));
+
+        // Pinned at a boundary: nothing moved, so skip the scroll command
+        // and the drop-target recompute entirely.
+        if (newOffset !== scrollOffsetRef.current) {
+          // The RAF loop is the sole writer of scrollOffsetRef during a
+          // drag (NodeList's onScroll stands down) - the accumulated value
+          // is the commanded position and the native list converges to it.
+          scrollOffsetRef.current = newOffset;
+          flashListRef.current?.scrollToOffset?.({
+            offset: newOffset,
+            animated: false
+          });
+
+          // Rows are moving under a (possibly stationary) finger; recompute
+          // the drop target so the indicator tracks the auto-scroll instead
+          // of staying frozen on the last row the finger moved over.
+          // Time-throttled - see AUTO_SCROLL_RECALC_INTERVAL_MS.
+          if (now - lastRecalcTs >= AUTO_SCROLL_RECALC_INTERVAL_MS) {
+            lastRecalcTs = now;
+            calculateDropTargetRef.current(lastFingerPageYRef.current, lastFingerPageXRef.current);
+          }
+        }
       }
       autoScrollRAFRef.current = requestAnimationFrame(loop);
     };
     autoScrollRAFRef.current = requestAnimationFrame(loop);
-  }, [flashListRef]);
+  }, [flashListRef, contentHeightRef]);
   const stopAutoScroll = useCallback(() => {
     if (autoScrollRAFRef.current !== null) {
       cancelAnimationFrame(autoScrollRAFRef.current);
@@ -283,16 +411,21 @@ export function useDragDrop(params) {
   }, []);
   const updateAutoScroll = useCallback(fingerInContainer => {
     const threshold = autoScrollThresholdRef.current;
-    const maxSpeed = 8 * autoScrollSpeedParamRef.current;
+    // px/second; the RAF loop converts to distance via elapsed time.
+    const maxSpeed = MAX_AUTO_SCROLL_SPEED * autoScrollSpeedParamRef.current;
     const containerH = containerHeightRef.current;
+
+    // Ease the proximity ramp (sqrt) so speed builds up fast even for a
+    // shallow entry into the threshold zone - the screen edge often stops
+    // the finger before it reaches the very edge of the list.
     if (fingerInContainer < threshold) {
       // Scroll up
       const ratio = 1 - Math.max(0, fingerInContainer) / threshold;
-      autoScrollSpeedRef.current = -maxSpeed * ratio;
+      autoScrollSpeedRef.current = -maxSpeed * Math.sqrt(ratio);
     } else if (fingerInContainer > containerH - threshold) {
       // Scroll down
       const ratio = 1 - Math.max(0, containerH - fingerInContainer) / threshold;
-      autoScrollSpeedRef.current = maxSpeed * ratio;
+      autoScrollSpeedRef.current = maxSpeed * Math.sqrt(ratio);
     } else {
       autoScrollSpeedRef.current = 0;
     }
@@ -307,25 +440,121 @@ export function useDragDrop(params) {
     autoExpandTargetRef.current = null;
   }, []);
 
+  // --- Cancel the overlay-indent settle timer + its pending level ---
+  const cancelLevelSettleTimer = useCallback(() => {
+    if (levelSettleTimerRef.current) {
+      clearTimeout(levelSettleTimerRef.current);
+      levelSettleTimerRef.current = null;
+    }
+    pendingLevelRef.current = null;
+  }, []);
+
+  // --- Clear the store's drag fields (shared by drag end and unmount) ---
+  const resetDragStoreState = useCallback(() => {
+    const state = getTreeViewStore(storeId).getState();
+    state.updateDraggedNodeId(null);
+    state.updateInvalidDragTargetIds(new Set());
+    state.updateDropTarget(null, null);
+  }, [storeId]);
+
   // --- Calculate drop target ---
   const calculateDropTarget = useCallback((fingerPageY, fingerPageX) => {
     const nodes = flattenedNodesRef.current;
     if (nodes.length === 0) return;
+
+    // The flattened list changed mid-drag (e.g. auto-expand inserted the
+    // hovered parent's children). Index-based hysteresis/stickiness state
+    // refers to rows of the OLD list - drop it so it can't stick the zone
+    // or gap decision to whatever row now happens to hold that index. The
+    // measured-heights gate cache is keyed to the old list too.
+    if (lastCalcNodesRef.current !== nodes) {
+      lastCalcNodesRef.current = nodes;
+      prevDropTargetRef.current = null;
+      allHeightsMeasuredRef.current = null;
+    }
+
+    // Single store snapshot per frame (the store can't change within this
+    // synchronous pass) - avoids re-reading getState() several times.
+    const {
+      childToParentMap,
+      expanded,
+      invalidDragTargetIds,
+      draggedNodeId,
+      nodeMap,
+      updateDropTarget
+    } = getTreeViewStore(storeId).getState();
     const fingerLocalY = fingerPageY - containerPageYRef.current;
     const fingerContentY = fingerLocalY + scrollOffsetRef.current;
     const adjustedContentY = fingerContentY - headerOffsetRef.current;
     const iH = itemHeightRef.current;
-    const rawIndex = Math.floor(adjustedContentY / iH);
-    let clampedIndex = Math.max(0, Math.min(rawIndex, nodes.length - 1));
+
+    // Resolve which row the finger is over. Uniform math (O(1)) is used
+    // unless every CURRENT row has been measured (small, fully-rendered
+    // lists), in which case a cumulative walk supports variable row heights.
+    // The gate checks per-node-id coverage (not map size) so stale heights
+    // left by a previous, longer list can never satisfy it. FlashList
+    // virtualization can't measure off-screen rows, so large lists fall back
+    // to the uniform estimate.
+    const heights = itemHeightsRef.current;
+    // The full-list scan is cached per measured count (and invalidated on
+    // list-identity change above) so it doesn't run on every pan frame.
+    const cachedGate = allHeightsMeasuredRef.current;
+    let allMeasured;
+    if (cachedGate && cachedGate.size === heights.size) {
+      allMeasured = cachedGate.value;
+    } else {
+      allMeasured = nodes.every(n => heights.has(n.id));
+      allHeightsMeasuredRef.current = {
+        size: heights.size,
+        value: allMeasured
+      };
+    }
+    let clampedIndex;
+    let itemTop;
+    let itemHeight;
+    if (allMeasured) {
+      let top = 0;
+      let idx = 0;
+      while (idx < nodes.length - 1) {
+        const h = heights.get(nodes[idx].id) ?? iH;
+        if (adjustedContentY < top + h) break;
+        top += h;
+        idx++;
+      }
+      clampedIndex = idx;
+      itemTop = top;
+      itemHeight = heights.get(nodes[idx].id) ?? iH;
+    } else {
+      const rawIndex = Math.floor(adjustedContentY / iH);
+      clampedIndex = Math.max(0, Math.min(rawIndex, nodes.length - 1));
+      itemTop = clampedIndex * iH;
+      itemHeight = iH;
+    }
     let targetNode = nodes[clampedIndex];
     if (!targetNode) return;
 
-    // Determine zone within item
-    const positionInItem = (adjustedContentY - clampedIndex * iH) / iH;
+    // Determine zone within item. Sticky zones: while a zone is active for
+    // this same row, its boundaries shift outward so natural finger tremor
+    // at a zone edge can't flip the position (and with it the indicator
+    // and the overlay's indent) back and forth every few frames.
+    const positionInItem = (adjustedContentY - itemTop) / itemHeight;
+    let aboveBound = 0.25;
+    let belowBound = 0.75;
+    const prevZone = prevDropTargetRef.current;
+    if (prevZone && prevZone.targetIndex === clampedIndex) {
+      if (prevZone.position === "above") {
+        aboveBound += ZONE_STICKINESS;
+      } else if (prevZone.position === "below") {
+        belowBound -= ZONE_STICKINESS;
+      } else {
+        aboveBound -= ZONE_STICKINESS;
+        belowBound += ZONE_STICKINESS;
+      }
+    }
     let position;
-    if (positionInItem < 0.15) {
+    if (positionInItem < aboveBound) {
       position = "above";
-    } else if (positionInItem > 0.85) {
+    } else if (positionInItem > belowBound) {
       position = "below";
     } else {
       position = "inside";
@@ -363,7 +592,7 @@ export function useDragDrop(params) {
     let logicalTargetId = null;
     let logicalPosition = null;
     let visualDropLevel = null;
-    if (position === "below" || position === "inside") {
+    if (position === "below") {
       const currentLevel = targetNode.level ?? 0;
       let isCliff = false;
       let shallowLevel = 0;
@@ -380,10 +609,7 @@ export function useDragDrop(params) {
         shallowLevel = 0;
       }
       if (isCliff) {
-        // Generous threshold: midpoint of the two levels + 2× indent buffer
-        const indent = indentationMultiplierRef.current;
-        const threshold = (currentLevel + shallowLevel) / 2 * indent + indent * 2;
-        if (fingerLocalX < threshold) {
+        if (fingerLeftOfLevelThreshold(currentLevel, fingerLocalX)) {
           // User wants the shallow level
           if (clampedIndex < nodes.length - 1) {
             // Non-last item: switch to "above" on the next (shallower) node
@@ -393,9 +619,6 @@ export function useDragDrop(params) {
             position = "above";
           } else {
             // Last item: find ancestor at shallow level, target it with "below"
-            const {
-              childToParentMap
-            } = getTreeViewStore(storeId).getState();
             let ancestorId = targetNode.id;
             let walkLevel = currentLevel;
             while (walkLevel > shallowLevel) {
@@ -417,10 +640,7 @@ export function useDragDrop(params) {
       const prevLevel = prevNode?.level ?? 0;
       const currentLevel = targetNode.level ?? 0;
       if (prevNode && prevLevel > currentLevel) {
-        // Level cliff above - same generous threshold
-        const indent = indentationMultiplierRef.current;
-        const threshold = (prevLevel + currentLevel) / 2 * indent + indent * 2;
-        if (fingerLocalX >= threshold) {
+        if (!fingerLeftOfLevelThreshold(prevLevel, fingerLocalX)) {
           clampedIndex = clampedIndex - 1;
           targetNode = prevNode;
           position = "below";
@@ -428,26 +648,14 @@ export function useDragDrop(params) {
       }
     }
 
-    // --- Suppress "below" when it's redundant or confusing ---
-    // After horizontal control, any remaining "below" that isn't at a
-    // cliff is redundant with "above" on the next node → show "inside".
-    // Only convert to "inside" if inside drops are allowed for this target.
+    // --- Suppress "below" when it's semantically confusing ---
+    // For expanded parents, "below" visually sits at the parent/child
+    // junction but semantically inserts as a sibling after the entire
+    // subtree. Convert to "inside" which is clearer.
     if (position === "below" && canDropInsideTarget) {
-      const expandedSet = getTreeViewStore(storeId).getState().expanded;
-
-      // (a) Expanded parent: "below" visually sits at the parent/child junction
-      // but semantically inserts as a sibling after the entire subtree.
-      if (targetNode.children?.length && expandedSet.has(targetNode.id)) {
+      if (targetNode.children?.length && expanded.has(targetNode.id)) {
         position = "inside";
       }
-      // (b) No level cliff below: convert to "inside" so the highlight
-      // covers the full bottom of the node.
-      else if (clampedIndex < nodes.length - 1) {
-        const nextNode = nodes[clampedIndex + 1];
-        if (nextNode && (nextNode.level ?? 0) >= (targetNode.level ?? 0)) {
-          position = "inside";
-        }
-      }
     }
 
     // --- Hysteresis: prevent flicker between "below N" and "above N+1" ---
@@ -473,27 +681,29 @@ export function useDragDrop(params) {
       targetIndex: clampedIndex,
       position
     };
-    const indicatorTop = fingerLocalY - grabOffsetYRef.current;
 
-    // Validity check
-    const store = getTreeViewStore(storeId);
-    const {
-      invalidDragTargetIds,
-      draggedNodeId,
-      expanded
-    } = store.getState();
+    // Validity check (store snapshot taken once at the top of this frame).
+    // The actual move uses the LOGICAL target when a cliff override is active
+    // (the visual indicator stays on targetNode). Validate canDrop / maxDepth /
+    // invalid-target against this effective target so consumer rules can't be
+    // bypassed by the visual/logical split at level cliffs.
+    const effectiveTargetId = logicalTargetId ?? targetNode.id;
+    const effectivePosition = logicalPosition ?? position;
+    const effectiveTargetNode = logicalTargetId !== null ? nodeMap.get(effectiveTargetId) ?? targetNode : targetNode;
 
     // maxDepth check for above/below (sibling) positions
     let maxDepthValid = true;
-    if (maxDepthRef.current !== undefined && (position === "above" || position === "below")) {
-      const targetLevel = targetNode.level ?? 0;
+    if (maxDepthRef.current !== undefined && (effectivePosition === "above" || effectivePosition === "below")) {
+      // At a cliff the sibling lands at visualDropLevel; otherwise the
+      // effective target's own level.
+      const targetLevel = visualDropLevel ?? effectiveTargetNode.level ?? 0;
       const deepest = targetLevel + draggedSubtreeDepthRef.current;
       if (deepest > maxDepthRef.current) maxDepthValid = false;
     }
-    const isValid = targetNode.id !== draggedNodeId && !invalidDragTargetIds.has(targetNode.id) && maxDepthValid && (!canDropRef.current || canDropRef.current(draggedNodeRef.current, targetNode, position));
+    const isValid = effectiveTargetId !== draggedNodeId && !invalidDragTargetIds.has(effectiveTargetId) && maxDepthValid && (!canDropRef.current || canDropRef.current(draggedNodeRef.current, effectiveTargetNode, effectivePosition));
 
     // --- Auto-expand: if hovering "inside" a collapsed expandable node ---
-    if (isValid && position === "inside" && targetNode.children?.length && !expanded.has(targetNode.id)) {
+    if (autoExpandRef.current && isValid && position === "inside" && targetNode.children?.length && !expanded.has(targetNode.id)) {
       if (autoExpandTargetRef.current !== targetNode.id) {
         // New hover target - start timer
         cancelAutoExpandTimer();
@@ -501,7 +711,7 @@ export function useDragDrop(params) {
         autoExpandTimerRef.current = setTimeout(() => {
           autoExpandTimerRef.current = null;
           // Expand the node and track it
-          handleToggleExpand(storeId, targetNode.id);
+          expandNodes(storeId, [targetNode.id]);
           autoExpandedDuringDragRef.current.add(targetNode.id);
         }, autoExpandDelayRef.current);
       }
@@ -520,41 +730,79 @@ export function useDragDrop(params) {
     // the effective level comes from the visual drop level, not the target node.
     const effectiveLevel = isValid ? visualDropLevel !== null ? visualDropLevel // "below" ancestor → sibling at that level
     : position === "inside" ? (targetNode.level ?? 0) + 1 : targetNode.level ?? 0 : draggedLevel;
-    if (effectiveLevel !== prevEffectiveLevelRef.current) {
-      const prevLevel = prevEffectiveLevelRef.current ?? effectiveLevel;
-      prevEffectiveLevelRef.current = effectiveLevel;
-      setEffectiveDropLevel(effectiveLevel);
-
-      // The level prop change snaps the content to the correct indent.
-      // Counteract that visual jump with an initial translateX offset,
-      // then spring to 0 for a smooth "magnetic snap" transition.
-      if (prevLevel !== effectiveLevel) {
-        overlayX.setValue((prevLevel - effectiveLevel) * indentationMultiplierRef.current);
+    // The overlay's content keeps the dragged node's original indentation
+    // for the whole drag (no re-render); the indent shift is expressed
+    // purely as a translateX toward the effective level. Springs retarget
+    // mid-flight, so rapid level changes glide instead of jumping - the
+    // old scheme (re-render padding + counteracting spring-to-0) split the
+    // move across React and the native driver and flickered when the two
+    // landed on different frames.
+    // A new level must additionally hold for LEVEL_SETTLE_MS before the
+    // overlay moves, so the indent doesn't chase every row the finger
+    // merely passes through.
+    const applyLevel = nextLevel => {
+      prevEffectiveLevelRef.current = nextLevel;
+      const targetX = (nextLevel - (draggedNodeRef.current?.level ?? 0)) * indentationMultiplierRef.current;
+      if (magneticSnapRef.current) {
         Animated.spring(overlayX, {
-          toValue: 0,
+          toValue: targetX,
           useNativeDriver: true,
           speed: 40,
           bounciness: 4
         }).start();
+      } else {
+        overlayX.setValue(targetX);
       }
+    };
+    if (autoScrollSpeedRef.current !== 0) {
+      // Auto-scroll is streaming rows of arbitrary depth under a
+      // stationary finger; chasing their levels would dart the overlay
+      // sideways and back. Hold the current indent (and drop any pending
+      // shift) until the scroll settles - the drop indicator itself
+      // keeps tracking via the store.
+      cancelLevelSettleTimer();
+    } else if (effectiveLevel === prevEffectiveLevelRef.current) {
+      // Back at the settled level - drop any pending level the finger
+      // only transited through.
+      cancelLevelSettleTimer();
+    } else if (pendingLevelRef.current !== effectiveLevel) {
+      // New candidate level - (re)start the settle timer.
+      cancelLevelSettleTimer();
+      pendingLevelRef.current = effectiveLevel;
+      levelSettleTimerRef.current = setTimeout(() => {
+        levelSettleTimerRef.current = null;
+        const settled = pendingLevelRef.current;
+        pendingLevelRef.current = null;
+        if (settled !== null && isDraggingRef.current) applyLevel(settled);
+      }, LEVEL_SETTLE_MS);
     }
     const newTarget = {
       targetNodeId: targetNode.id,
       targetIndex: clampedIndex,
       position,
-      isValid,
-      targetLevel: targetNode.level ?? 0,
-      indicatorTop
+      isValid
     };
 
-    // Update the store so each Node can render its own indicator
-    if (isValid) {
-      store.getState().updateDropTarget(targetNode.id, position, visualDropLevel);
-    } else {
-      store.getState().updateDropTarget(null, null);
+    // Update the store so each Node can render its own indicator.
+    // The indicator always tracks the VISUAL target/position (what the user
+    // sees), even when the actual move target is a logical ancestor.
+    // Guard the write so it only fires when the indicator actually changes -
+    // calculateDropTarget runs every pan frame and each store write re-runs
+    // every mounted Node's selector.
+    const nextDropNodeId = isValid ? targetNode.id : null;
+    const nextDropPosition = isValid ? position : null;
+    const nextDropLevel = isValid ? visualDropLevel : null;
+    const lastStore = lastStoreDropTargetRef.current;
+    if (!lastStore || lastStore.nodeId !== nextDropNodeId || lastStore.position !== nextDropPosition || lastStore.level !== nextDropLevel) {
+      updateDropTarget(nextDropNodeId, nextDropPosition, nextDropLevel);
+      lastStoreDropTargetRef.current = {
+        nodeId: nextDropNodeId,
+        position: nextDropPosition,
+        level: nextDropLevel
+      };
     }
 
-    // Keep ref in sync (used by handleDragEnd to avoid setState-during-render)
+    // Keep the commit ref in sync (read by handleDragEnd).
     // When a logical target exists (e.g. ancestor at a cliff), use it
     // for the actual move while the visual indicator stays on the current node.
     if (logicalTargetId !== null && logicalPosition !== null) {
@@ -566,24 +814,22 @@ export function useDragDrop(params) {
     } else {
       dropTargetRef.current = newTarget;
     }
-    setDropTarget(prevTarget => {
-      if (prevTarget?.targetNodeId === newTarget.targetNodeId && prevTarget?.position === newTarget.position && prevTarget?.isValid === newTarget.isValid && prevTarget?.indicatorTop === newTarget.indicatorTop) {
-        return prevTarget;
-      }
-      return newTarget;
-    });
-  }, [storeId, cancelAutoExpandTimer, overlayX]);
+  }, [storeId, cancelAutoExpandTimer, cancelLevelSettleTimer, fingerLeftOfLevelThreshold, overlayX, itemHeightsRef]);
+  calculateDropTargetRef.current = calculateDropTarget;
 
   // --- Handle drag end ---
-  const handleDragEnd = useCallback((fingerPageY, fingerPageX) => {
+  const handleDragEnd = useCallback((fingerPageY, fingerPageX, cancel = false) => {
     stopAutoScroll();
     cancelLongPressTimer();
     cancelAutoExpandTimer();
-    prevDropTargetRef.current = null;
     if (!isDraggingRef.current) return;
     isDraggingRef.current = false;
 
-    // Recalculate drop target at final position if we have coords
+    // Recalculate drop target at final position if we have coords. Hysteresis
+    // (prevDropTargetRef) is intentionally NOT cleared first, so this final
+    // commit frame resolves to the same target the user last saw the indicator
+    // on (clearing it here would let the release snap to the other side of an
+    // ambiguous same-level boundary). It is reset in the ref-cleanup below.
     if (fingerPageY !== undefined) {
       calculateDropTarget(fingerPageY, fingerPageX ?? 0);
     }
@@ -592,90 +838,99 @@ export function useDragDrop(params) {
     // Without this, the timer fires after drag ends and toggles the target back to collapsed.
     cancelAutoExpandTimer();
 
-    // Read current drop target from ref via a small delay to ensure
-    // the last setDropTarget has been processed
-    // We use the current dropTarget state via a callback
-    // Read drop target from ref (avoids nesting Zustand updates inside React state updaters)
+    // Read the final drop target from the ref (the per-frame calculation
+    // keeps it current; there is no React state to wait on).
     const currentTarget = dropTargetRef.current;
-    const droppedNodeId = draggedNodeIdRef.current;
-    if (currentTarget?.isValid && droppedNodeId !== null) {
-      const store = getTreeViewStore(storeId);
-      const currentData = store.getState().initialTreeViewData;
-      const newData = moveTreeNode(currentData, droppedNodeId, currentTarget.targetNodeId, currentTarget.position);
-
-      // Update store directly (preserves checked/expanded)
-      store.getState().updateInitialTreeViewData(newData);
-      initializeNodeMaps(storeId, newData);
-
-      // Recalculate checked/indeterminate states for all parents
-      // since the tree structure changed
-      recalculateCheckedStates(storeId);
-
-      // If dropped "inside" a node, expand it so the dropped node is visible
-      if (currentTarget.position === "inside") {
-        expandNodes(storeId, [currentTarget.targetNodeId]);
-      }
-
-      // Expand ancestors of the dropped node so it's visible
-      expandNodes(storeId, [droppedNodeId], true);
-
-      // Set internal data ref to prevent useDeepCompareEffect
-      // from reinitializing
-      internalDataRef.current = newData;
-
-      // Notify consumer
+    const droppedNodeId = draggedNodeRef.current?.id ?? null;
+    const store = getTreeViewStore(storeId);
+    const {
+      initialTreeViewData: currentData,
+      nodeMap,
+      childToParentMap
+    } = store.getState();
+    // Capture the node's position before the move for the MoveResult delta
+    // (the maps still describe the pre-move tree here).
+    const prevPosition = droppedNodeId !== null ? findNodePositionFromMaps(currentData, nodeMap, childToParentMap, droppedNodeId) : null;
+    // Compute the move up front so an invalid move (moveTreeNode returns the
+    // same reference) or a positional no-op (node re-dropped where it already
+    // sits) is treated as a cancel rather than a spurious onDragEnd.
+    const newData = !cancel && currentTarget?.isValid && droppedNodeId !== null ? moveTreeNode(currentData, droppedNodeId, currentTarget.targetNodeId, currentTarget.position) : currentData;
+    const newPosition = newData !== currentData && droppedNodeId !== null ? findNodePosition(newData, droppedNodeId) : null;
+    const isNoOpMove = newPosition !== null && prevPosition !== null && newPosition.parentId === prevPosition.parentId && newPosition.index === prevPosition.index;
+    if (!cancel && currentTarget?.isValid && droppedNodeId !== null && newData !== currentData && !isNoOpMove) {
+      // Commit the move to the store (preserves checked/expanded;
+      // shared with the programmatic moveNode path).
+      applyMoveToStore(storeId, newData, droppedNodeId, currentTarget.targetNodeId, currentTarget.position);
+
+      // Notify the consumer with a lightweight move delta. The reordered
+      // tree lives in the store; TreeView's wrapped onDragEnd captures it
+      // for the reinit-skip, and consumers can read it via getTreeData().
       onDragEndRef.current?.({
         draggedNodeId: droppedNodeId,
         targetNodeId: currentTarget.targetNodeId,
         position: currentTarget.position,
-        newTreeData: newData
+        previousParentId: prevPosition?.parentId ?? null,
+        previousIndex: prevPosition?.index ?? -1,
+        newParentId: newPosition?.parentId ?? null,
+        newIndex: newPosition?.index ?? -1
       });
 
-      // Scroll to the dropped node after React processes the expansion,
-      // but only if it's outside the visible viewport.  An animated
-      // scroll would consume the user's next touch (RN stops the
-      // animation on tap), so we skip when the node is already visible.
-      setTimeout(() => {
-        const nodes = flattenedNodesRef.current;
-        const idx = nodes.findIndex(n => n.id === droppedNodeId);
-        if (idx < 0) return;
-        const itemH = itemHeightRef.current;
-        const scrollTop = scrollOffsetRef.current;
-        const containerH = containerHeightRef.current;
-        const estimatedTop = idx * itemH;
-        const estimatedBottom = estimatedTop + itemH;
-
-        // Already in view → no scroll needed
-        if (estimatedTop >= scrollTop && estimatedBottom <= scrollTop + containerH) {
-          return;
+      // Announce the result for screen readers (no-op without assistive tech).
+      AccessibilityInfo.announceForAccessibility?.(`Moved ${draggedNodeRef.current?.name ?? "node"}`);
+
+      // Auto-scroll to the dropped node unless disabled by the user.
+      const scrollOpts = autoScrollToDroppedNode;
+      const scrollEnabled = scrollOpts === undefined || scrollOpts === true || typeof scrollOpts === "object" && scrollOpts.enabled !== false;
+      if (scrollEnabled) {
+        // The drop lands under the finger, so the node is almost always
+        // already on-screen; scrolling anyway would yank the list (worst
+        // when dropping near the very bottom, where centering the node
+        // scrolls the list back up). Estimate where the dropped row ends
+        // up in the post-move flattened list and only scroll when it
+        // actually sits outside the viewport.
+        const preMoveNodes = flattenedNodesRef.current;
+        const draggedIdx = preMoveNodes.findIndex(n => n.id === droppedNodeId);
+        const iH = itemHeightRef.current;
+        let finalIndex = currentTarget.targetIndex;
+        // "below"/"inside" both land the node right after the target row.
+        if (currentTarget.position !== "above") finalIndex += 1;
+        // Removing the dragged row from above the target shifts rows up one.
+        if (draggedIdx !== -1 && draggedIdx < currentTarget.targetIndex) {
+          finalIndex -= 1;
         }
-        flashListRef.current?.scrollToIndex?.({
-          index: idx,
-          animated: true,
-          viewPosition: 0.5
-        });
-      }, 100);
+        const rowTop = headerOffsetRef.current + finalIndex * iH - scrollOffsetRef.current;
+        const isOnScreen = rowTop >= 0 && rowTop + iH <= containerHeightRef.current;
+        if (!isOnScreen) {
+          scrollMovedNodeIntoView(scrollToNodeHandlerRef, droppedNodeId, scrollOpts);
+        }
+      }
     } else if (droppedNodeId !== null) {
-      // Drag ended without a valid drop — notify consumer
+      // Drag ended without a valid drop - a cancel must not mutate state,
+      // so restore the expansion that drag start force-collapsed.
+      if (wasDraggedNodeExpandedRef.current) {
+        expandNodes(storeId, [droppedNodeId]);
+      }
       onDragCancelRef.current?.({
         draggedNodeId: droppedNodeId
       });
+      AccessibilityInfo.announceForAccessibility?.(`Cancelled moving ${draggedNodeRef.current?.name ?? "node"}`);
     }
 
     // Collapse auto-expanded nodes that aren't ancestors of the drop target
     if (autoExpandedDuringDragRef.current.size > 0) {
-      const store3 = getTreeViewStore(storeId);
+      // Re-read: the maps were rebuilt if a move committed above.
       const {
-        childToParentMap
-      } = store3.getState();
+        childToParentMap: postMoveParentMap
+      } = store.getState();
 
-      // Collect ancestors of the drop target (keep these expanded)
+      // Collect ancestors of the drop target (keep these expanded).
+      // On cancel, retain none so every auto-expanded node collapses back.
       const ancestorIds = new Set();
-      if (currentTarget?.isValid) {
+      if (!cancel && currentTarget?.isValid) {
         let walkId = currentTarget.targetNodeId;
         while (walkId !== undefined) {
           ancestorIds.add(walkId);
-          walkId = childToParentMap.get(walkId);
+          walkId = postMoveParentMap.get(walkId);
         }
       }
 
@@ -693,29 +948,38 @@ export function useDragDrop(params) {
     }
 
     // Clear drag state
-    const store2 = getTreeViewStore(storeId);
-    store2.getState().updateDraggedNodeId(null);
-    store2.getState().updateInvalidDragTargetIds(new Set());
-    store2.getState().updateDropTarget(null, null);
+    resetDragStoreState();
 
     // Reset all refs
     overlayX.setValue(0);
     prevEffectiveLevelRef.current = null;
+    cancelLevelSettleTimer();
+    prevDropTargetRef.current = null;
     dropTargetRef.current = null;
+    lastStoreDropTargetRef.current = null;
     draggedNodeRef.current = null;
-    draggedNodeIdRef.current = null;
-    draggedNodeIndexRef.current = -1;
-    setDropTarget(null);
+    wasDraggedNodeExpandedRef.current = false;
     setIsDragging(false);
     setDraggedNode(null);
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [storeId, stopAutoScroll, cancelLongPressTimer, cancelAutoExpandTimer, calculateDropTarget, internalDataRef]);
+  [storeId, stopAutoScroll, cancelLongPressTimer, cancelAutoExpandTimer, calculateDropTarget]);
+
+  // --- onScroll for the host list (see UseDragDropReturn.handleScroll) ---
+  const handleScroll = useCallback(event => {
+    if (!isDraggingRef.current) {
+      scrollOffsetRef.current = event.nativeEvent.contentOffset.y;
+    }
+    // Scrolling means this touch isn't a long-press
+    cancelLongPressTimer();
+  }, [cancelLongPressTimer]);
 
   // --- Handle node touch end ---
   // If the PanResponder never captured the gesture (no movement after long
   // press fired), end the drag here so the node doesn't stay "lifted".
   const handleNodeTouchEnd = useCallback(() => {
+    // cancelLongPressTimer also aborts any drag still awaiting its
+    // measureInWindow callback (clears pendingDragRef).
     cancelLongPressTimer();
     if (isDraggingRef.current && !panResponderActiveRef.current) {
       handleDragEnd();
@@ -731,21 +995,25 @@ export function useDragDrop(params) {
     onPanResponderGrant: () => {
       panResponderActiveRef.current = true;
     },
+    // While a drag is active, refuse to hand the gesture to an ancestor
+    // responder (e.g. a parent ScrollView or swipe navigator) so a slight
+    // horizontal drift can't terminate the drag mid-flight.
+    onPanResponderTerminationRequest: () => !isDraggingRef.current,
     onPanResponderMove: evt => {
       if (!isDraggingRef.current) return;
       const fingerPageY = evt.nativeEvent.pageY;
+      lastFingerPageYRef.current = fingerPageY;
+      lastFingerPageXRef.current = evt.nativeEvent.pageX;
       const fingerLocalY = fingerPageY - containerPageYRef.current;
 
       // Update overlay position (with configurable offset)
-      const overlayLocalY = fingerLocalY - grabOffsetYRef.current + dragOverlayOffsetRef.current * itemHeightRef.current;
-      overlayY.setValue(overlayLocalY);
+      overlayY.setValue(computeOverlayLocalY(fingerLocalY));
 
       // Calculate drop target (horizontal position used at level cliffs)
       calculateDropTarget(fingerPageY, evt.nativeEvent.pageX);
 
-      // Auto-scroll at edges - use delta-based position relative to container
-      const fingerInContainer = initialFingerContainerYRef.current + (fingerPageY - initialFingerPageYRef.current);
-      updateAutoScroll(fingerInContainer);
+      // Auto-scroll at edges, from the finger's container-local position
+      updateAutoScroll(fingerLocalY);
     },
     onPanResponderRelease: evt => {
       panResponderActiveRef.current = false;
@@ -753,7 +1021,9 @@ export function useDragDrop(params) {
     },
     onPanResponderTerminate: () => {
       panResponderActiveRef.current = false;
-      handleDragEnd();
+      // A terminate (parent scroll steals the gesture, app backgrounds, etc.)
+      // cancels the drop rather than committing at the last hovered target.
+      handleDragEnd(undefined, undefined, true);
     }
   })).current;
 
@@ -762,29 +1032,29 @@ export function useDragDrop(params) {
     return () => {
       cancelLongPressTimer();
       cancelAutoExpandTimer();
+      cancelLevelSettleTimer();
       stopAutoScroll();
+      pendingDragRef.current = false;
+      lastStoreDropTargetRef.current = null;
       if (isDraggingRef.current) {
         isDraggingRef.current = false;
-        const store = getTreeViewStore(storeId);
-        store.getState().updateDraggedNodeId(null);
-        store.getState().updateInvalidDragTargetIds(new Set());
-        store.getState().updateDropTarget(null, null);
+        resetDragStoreState();
       }
     };
-  }, [storeId, cancelLongPressTimer, cancelAutoExpandTimer, stopAutoScroll]);
+  }, [cancelLongPressTimer, cancelAutoExpandTimer, cancelLevelSettleTimer, stopAutoScroll, resetDragStoreState]);
   return {
     panResponder,
     overlayY,
     overlayX,
     isDragging,
     draggedNode,
-    dropTarget,
-    effectiveDropLevel,
     handleNodeTouchStart,
     handleNodeTouchEnd,
     cancelLongPressTimer,
+    handleScroll,
     scrollOffsetRef,
-    headerOffsetRef
+    headerOffsetRef,
+    containerHeightRef
   };
 }
 //# sourceMappingURL=useDragDrop.js.map