react-native-tree-multi-select 3.0.0-beta.1 → 3.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tree-multi-select",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "description": "A super-fast, customizable tree view component for React Native with multi-selection, checkboxes, and search filtering capabilities.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/DragOverlay.tsx

@@ -13,6 +13,7 @@ import { defaultIndentationMultiplier } from "../constants/treeView.constants";
 
 interface DragOverlayProps<ID> extends TreeItemCustomizations<ID> {
     overlayY: Animated.Value;
+    overlayX: Animated.Value;
     node: __FlattenedTreeNode__<ID>;
     level: number;
     dragDropCustomizations?: DragDropCustomizations<ID>;
@@ -21,6 +22,7 @@ interface DragOverlayProps<ID> extends TreeItemCustomizations<ID> {
 function _DragOverlay<ID>(props: DragOverlayProps<ID>) {
     const {
         overlayY,
+        overlayX,
         node,
         level,
         indentationMultiplier = defaultIndentationMultiplier,
@@ -47,7 +49,7 @@ function _DragOverlay<ID>(props: DragOverlayProps<ID>) {
                     ...(overlayStyleProps.elevation != null && { elevation: overlayStyleProps.elevation }),
                 },
                 overlayStyleProps?.style,
-                { transform: [{ translateY: overlayY }] },
+                { transform: [{ translateX: overlayX }, { translateY: overlayY }] },
             ]}
         >
             {CustomOverlay ? (

package/src/components/NodeList.tsx

@@ -114,13 +114,18 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         updateInnerMostChildrenIds(updatedInnerMostChildrenIds);
     }, [filteredTree, updateInnerMostChildrenIds]);
 
+    const effectiveIndentationMultiplier = indentationMultiplier ?? defaultIndentationMultiplier;
+
     // --- Drag and drop ---
     const {
         panResponder,
         overlayY,
+        overlayX,
         isDragging,
         draggedNode,
+        effectiveDropLevel,
         handleNodeTouchStart,
+        handleNodeTouchEnd,
         cancelLongPressTimer,
         scrollOffsetRef,
     } = useDragDrop<ID>({
@@ -137,6 +142,7 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         measuredItemHeightRef,
         dragOverlayOffset,
         autoExpandDelay,
+        indentationMultiplier: effectiveIndentationMultiplier,
     });
 
     // Combined onScroll handler
@@ -150,8 +156,6 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         treeFlashListProps?.onScroll?.(event as any);
     }, [scrollOffsetRef, cancelLongPressTimer, treeFlashListProps]);
 
-    const effectiveIndentationMultiplier = indentationMultiplier ?? defaultIndentationMultiplier;
-
     const nodeRenderer = React.useCallback((
         { item, index }: { item: __FlattenedTreeNode__<ID>; index: number; }
     ) => {
@@ -174,7 +178,7 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
                 dragEnabled={dragEnabled}
                 isDragging={isDragging}
                 onNodeTouchStart={dragEnabled ? handleNodeTouchStart : undefined}
-                onNodeTouchEnd={dragEnabled ? cancelLongPressTimer : undefined}
+                onNodeTouchEnd={dragEnabled ? handleNodeTouchEnd : undefined}
                 onItemLayout={dragEnabled ? handleItemLayout : undefined}
                 dragDropCustomizations={dragDropCustomizations}
             />
@@ -190,8 +194,8 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         dragEnabled,
         isDragging,
         handleNodeTouchStart,
+        handleNodeTouchEnd,
         dragDropCustomizations,
-        cancelLongPressTimer,
         handleItemLayout,
     ]);
 
@@ -237,8 +241,9 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
                     {isDragging && draggedNode && (
                         <DragOverlay<ID>
                             overlayY={overlayY}
+                            overlayX={overlayX}
                             node={draggedNode}
-                            level={draggedNode.level ?? 0}
+                            level={effectiveDropLevel}
                             indentationMultiplier={effectiveIndentationMultiplier}
                             CheckboxComponent={CheckboxComponent}
                             ExpandCollapseIconComponent={ExpandCollapseIconComponent}
@@ -306,6 +311,7 @@ function _Node<ID>(props: NodeProps<ID>) {
         isDragInvalid,
         isDropTarget,
         nodeDropPosition,
+        nodeDropLevel,
     } = useTreeViewStore<ID>(storeId)(useShallow(
         state => ({
             isExpanded: state.expanded.has(node.id),
@@ -317,18 +323,30 @@ function _Node<ID>(props: NodeProps<ID>) {
             isDragInvalid: state.invalidDragTargetIds.has(node.id),
             isDropTarget: state.dropTargetNodeId === node.id,
             nodeDropPosition: state.dropTargetNodeId === node.id ? state.dropPosition : null,
+            nodeDropLevel: state.dropTargetNodeId === node.id ? state.dropLevel : null,
         })
     ));
 
+    // Track when this node was dragged so we can swallow the onPress/onCheck
+    // that fires when the user lifts their finger after a long-press-initiated drag.
+    // The flag is set during render (synchronous) and cleared on the next touch start.
+    const wasDraggedRef = React.useRef(false);
+    if (isDraggingGlobal && isBeingDragged) {
+        wasDraggedRef.current = true;
+    }
+
     const _onToggleExpand = React.useCallback(() => {
+        if (wasDraggedRef.current) return;
         handleToggleExpand(storeId, node.id);
     }, [storeId, node.id]);
 
     const _onCheck = React.useCallback(() => {
+        if (wasDraggedRef.current) return;
         toggleCheckboxes(storeId, [node.id]);
     }, [storeId, node.id]);
 
     const handleTouchStart = React.useCallback((e: any) => {
+        wasDraggedRef.current = false;
         if (!onNodeTouchStart) return;
         const { pageY, locationY } = e.nativeEvent;
         onNodeTouchStart(node.id, pageY, locationY, nodeIndex);
@@ -355,10 +373,11 @@ function _Node<ID>(props: NodeProps<ID>) {
     } : undefined;
 
     const CustomDropIndicator = dragDropCustomizations?.CustomDropIndicatorComponent;
+    const indicatorLevel = nodeDropLevel ?? level;
     const dropIndicator = isDropTarget && nodeDropPosition ? (
         CustomDropIndicator
-            ? <CustomDropIndicator position={nodeDropPosition} />
-            : <NodeDropIndicator position={nodeDropPosition} styleProps={dragDropCustomizations?.dropIndicatorStyleProps} />
+            ? <CustomDropIndicator position={nodeDropPosition} level={indicatorLevel} indentationMultiplier={indentationMultiplier} />
+            : <NodeDropIndicator position={nodeDropPosition} level={indicatorLevel} indentationMultiplier={indentationMultiplier} styleProps={dragDropCustomizations?.dropIndicatorStyleProps} />
     ) : null;
 
     if (!CustomNodeRowComponent) {
@@ -371,6 +390,7 @@ function _Node<ID>(props: NodeProps<ID>) {
                     styles.nodeCheckboxAndArrowRow,
                     { paddingStart: level * indentationMultiplier },
                     { opacity: nodeOpacity },
+                    dropIndicator ? styles.nodeOverflowVisible : undefined,
                 ]}>
                 {dropIndicator}
                 <CheckboxComponent
@@ -398,7 +418,10 @@ function _Node<ID>(props: NodeProps<ID>) {
             <View
                 {...touchHandlers}
                 onLayout={onItemLayout ? handleLayout : undefined}
-                style={{ opacity: nodeOpacity }}
+                style={[
+                    { opacity: nodeOpacity },
+                    dropIndicator ? styles.nodeOverflowVisible : undefined,
+                ]}
             >
                 {dropIndicator}
                 <CustomNodeRowComponent
@@ -417,8 +440,10 @@ function _Node<ID>(props: NodeProps<ID>) {
     }
 };
 
-function NodeDropIndicator({ position, styleProps }: {
+function NodeDropIndicator({ position, level, indentationMultiplier, styleProps }: {
     position: DropPosition;
+    level: number;
+    indentationMultiplier: number;
     styleProps?: DropIndicatorStyleProps;
 }) {
     const lineColor = styleProps?.lineColor ?? "#0078FF";
@@ -427,6 +452,10 @@ function NodeDropIndicator({ position, styleProps }: {
     const highlightColor = styleProps?.highlightColor ?? "rgba(0, 120, 255, 0.15)";
     const highlightBorderColor = styleProps?.highlightBorderColor ?? "rgba(0, 120, 255, 0.5)";
 
+    // Indent the line to match the node's nesting level so users can
+    // visually distinguish drops at different tree depths.
+    const leftOffset = level * indentationMultiplier;
+
     if (position === "inside") {
         return (
             <View
@@ -434,6 +463,7 @@ function NodeDropIndicator({ position, styleProps }: {
                 style={[
                     styles.dropHighlight,
                     {
+                        left: leftOffset,
                         backgroundColor: highlightColor,
                         borderColor: highlightBorderColor,
                     },
@@ -442,26 +472,25 @@ function NodeDropIndicator({ position, styleProps }: {
         );
     }
 
+    // Ensure the circle isn't clipped at shallow indent levels
+    const safeLeftOffset = Math.max(leftOffset, circleSize / 2);
+
     return (
         <View
             pointerEvents="none"
             style={[
                 styles.dropLineContainer,
-                { height: lineThickness },
+                { height: lineThickness, left: safeLeftOffset },
                 position === "above" ? styles.dropLineTop : styles.dropLineBottom,
             ]}
         >
-            <View style={[
-                styles.dropLineCircle,
-                {
-                    width: circleSize,
-                    height: circleSize,
-                    borderRadius: circleSize / 2,
-                    backgroundColor: lineColor,
-                    marginLeft: -(circleSize / 2),
-                    marginTop: -(circleSize / 2 - lineThickness / 2),
-                },
-            ]} />
+            <View style={{
+                width: circleSize,
+                height: circleSize,
+                borderRadius: circleSize / 2,
+                backgroundColor: lineColor,
+                marginLeft: -(circleSize / 2),
+            }} />
             <View style={[
                 styles.dropLine,
                 {
@@ -510,6 +539,7 @@ const styles = StyleSheet.create({
         alignItems: "center",
         height: 3,
         zIndex: 10,
+        overflow: "visible",
     },
     dropLineTop: {
         top: 0,
@@ -517,17 +547,12 @@ const styles = StyleSheet.create({
     dropLineBottom: {
         bottom: 0,
     },
-    dropLineCircle: {
-        width: 10,
-        height: 10,
-        borderRadius: 5,
-        backgroundColor: "#0078FF",
-        marginLeft: -5,
-        marginTop: -4,
-    },
     dropLine: {
         flex: 1,
         height: 3,
         backgroundColor: "#0078FF",
     },
+    nodeOverflowVisible: {
+        overflow: "visible",
+    },
 });

package/src/hooks/useDragDrop.ts

@@ -26,20 +26,25 @@ interface UseDragDropParams<ID> {
     measuredItemHeightRef: React.MutableRefObject<number>;
     dragOverlayOffset: number;
     autoExpandDelay: number;
+    /** Pixels per nesting level, used for magnetic overlay shift. */
+    indentationMultiplier: number;
 }
 
 interface UseDragDropReturn<ID> {
     panResponder: PanResponderInstance;
     overlayY: Animated.Value;
+    overlayX: Animated.Value;
     isDragging: boolean;
     draggedNode: __FlattenedTreeNode__<ID> | null;
     dropTarget: DropTarget<ID> | null;
+    effectiveDropLevel: number;
     handleNodeTouchStart: (
         nodeId: ID,
         pageY: number,
         locationY: number,
         nodeIndex: number,
     ) => void;
+    handleNodeTouchEnd: () => void;
     cancelLongPressTimer: () => void;
     scrollOffsetRef: React.MutableRefObject<number>;
     headerOffsetRef: React.MutableRefObject<number>;
@@ -62,6 +67,7 @@ export function useDragDrop<ID>(
         measuredItemHeightRef,
         dragOverlayOffset,
         autoExpandDelay,
+        indentationMultiplier,
     } = params;
 
     // --- Refs for mutable state (no stale closures in PanResponder) ---
@@ -72,6 +78,7 @@ export function useDragDrop<ID>(
 
     const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+    const containerPageXRef = useRef(0);
     const containerPageYRef = useRef(0);
     const containerHeightRef = useRef(0);
     const grabOffsetYRef = useRef(0);
@@ -80,6 +87,8 @@ export function useDragDrop<ID>(
     const itemHeightRef = useRef(36);
 
     const overlayY = useRef(new Animated.Value(0)).current;
+    const overlayX = useRef(new Animated.Value(0)).current;
+    const prevEffectiveLevelRef = useRef<number | null>(null);
 
     const autoScrollRAFRef = useRef<number | null>(null);
     const autoScrollSpeedRef = useRef(0);
@@ -94,6 +103,9 @@ export function useDragDrop<ID>(
     // Track which nodes were auto-expanded during this drag (to collapse on drag end)
     const autoExpandedDuringDragRef = useRef<Set<ID>>(new Set());
 
+    // Tracks whether the PanResponder has captured the current gesture
+    const panResponderActiveRef = useRef(false);
+
     // Previous drop target for hysteresis (prevents flicker between "below N" / "above N+1")
     const prevDropTargetRef = useRef<{ targetIndex: number; position: "above" | "below" | "inside" } | null>(null);
 
@@ -109,6 +121,7 @@ export function useDragDrop<ID>(
     const [isDragging, setIsDragging] = useState(false);
     const [draggedNode, setDraggedNode] = useState<__FlattenedTreeNode__<ID> | null>(null);
     const [dropTarget, setDropTarget] = useState<DropTarget<ID> | null>(null);
+    const [effectiveDropLevel, setEffectiveDropLevel] = useState(0);
 
     // Ref mirror of dropTarget — avoids nesting Zustand updates inside React state updaters
     const dropTargetRef = useRef<DropTarget<ID> | null>(null);
@@ -152,7 +165,8 @@ export function useDragDrop<ID>(
             const container = containerRef.current;
             if (!container) return;
 
-            container.measureInWindow((_x, y, _w, h) => {
+            container.measureInWindow((x, y, _w, h) => {
+                containerPageXRef.current = x;
                 containerPageYRef.current = y;
                 containerHeightRef.current = h;
 
@@ -212,11 +226,16 @@ export function useDragDrop<ID>(
                 const overlayLocalY = fingerLocalY - locationY + dragOverlayOffset * itemHeightRef.current;
                 overlayY.setValue(overlayLocalY);
 
+                // Reset magnetic overlay
+                overlayX.setValue(0);
+                prevEffectiveLevelRef.current = node.level ?? 0;
+
                 // Set React state
                 isDraggingRef.current = true;
                 autoExpandedDuringDragRef.current.clear();
                 setIsDragging(true);
                 setDraggedNode(node);
+                setEffectiveDropLevel(node.level ?? 0);
                 setDropTarget(null);
 
                 // Start auto-scroll loop
@@ -314,7 +333,7 @@ export function useDragDrop<ID>(
 
     // --- Calculate drop target ---
     const calculateDropTarget = useCallback(
-        (fingerPageY: number) => {
+        (fingerPageY: number, fingerPageX: number) => {
             const nodes = flattenedNodesRef.current;
             if (nodes.length === 0) return;
 
@@ -338,17 +357,120 @@ export function useDragDrop<ID>(
             const positionInItem =
                 (adjustedContentY - clampedIndex * iH) / iH;
             let position: "above" | "below" | "inside";
-            if (positionInItem < 0.3) {
+            if (positionInItem < 0.15) {
                 position = "above";
-            } else if (positionInItem > 0.7) {
+            } else if (positionInItem > 0.85) {
                 position = "below";
             } else {
                 position = "inside";
             }
 
+            // --- Horizontal control at level cliffs ---
+            // At the boundary between nodes at different depths, the user's
+            // horizontal finger position decides the drop level:
+            //   finger RIGHT of threshold → stay at deep level (inside parent)
+            //   finger LEFT of threshold → switch to shallow level (outside parent)
+            // The threshold uses a generous buffer so dragging slightly left is enough.
+            const fingerLocalX = fingerPageX - containerPageXRef.current;
+            // logicalTargetId/logicalPosition: when the visual indicator node differs
+            // from the actual moveTreeNode target (e.g., ancestor at a shallower level).
+            let logicalTargetId: ID | null = null;
+            let logicalPosition: "above" | "below" | "inside" | null = null;
+            let visualDropLevel: number | null = null;
+
+            if (position === "below" || position === "inside") {
+                const currentLevel = targetNode.level ?? 0;
+                let isCliff = false;
+                let shallowLevel = 0;
+
+                if (clampedIndex < nodes.length - 1) {
+                    const nextNode = nodes[clampedIndex + 1];
+                    const nextLevel = nextNode?.level ?? 0;
+                    if (nextNode && nextLevel < currentLevel) {
+                        isCliff = true;
+                        shallowLevel = nextLevel;
+                    }
+                } else if (currentLevel > 0) {
+                    // Last item in the list — treat as cliff to root level
+                    isCliff = true;
+                    shallowLevel = 0;
+                }
+
+                if (isCliff) {
+                    // Generous threshold: midpoint of the two levels + 2× indent buffer
+                    const threshold =
+                        ((currentLevel + shallowLevel) / 2) * indentationMultiplier
+                        + indentationMultiplier * 2;
+
+                    if (fingerLocalX < threshold) {
+                        // User wants the shallow level
+                        if (clampedIndex < nodes.length - 1) {
+                            // Non-last item: switch to "above" on the next (shallower) node
+                            const nextNode = nodes[clampedIndex + 1]!;
+                            clampedIndex = clampedIndex + 1;
+                            targetNode = nextNode;
+                            position = "above";
+                        } else {
+                            // Last item: find ancestor at shallow level, target it with "below"
+                            const { childToParentMap } = getTreeViewStore<ID>(storeId).getState();
+                            let ancestorId = targetNode.id;
+                            let walkLevel = currentLevel;
+                            while (walkLevel > shallowLevel) {
+                                const parentId = childToParentMap.get(ancestorId);
+                                if (parentId === undefined) break;
+                                ancestorId = parentId;
+                                walkLevel--;
+                            }
+                            // Visual stays on the last item; logical goes to ancestor
+                            logicalTargetId = ancestorId;
+                            logicalPosition = "below";
+                            visualDropLevel = shallowLevel;
+                        }
+                    }
+                }
+            }
+            if (position === "above" && clampedIndex > 0) {
+                const prevNode = nodes[clampedIndex - 1];
+                const prevLevel = prevNode?.level ?? 0;
+                const currentLevel = targetNode.level ?? 0;
+                if (prevNode && prevLevel > currentLevel) {
+                    // Level cliff above — same generous threshold
+                    const threshold =
+                        ((prevLevel + currentLevel) / 2) * indentationMultiplier
+                        + indentationMultiplier * 2;
+
+                    if (fingerLocalX >= threshold) {
+                        clampedIndex = clampedIndex - 1;
+                        targetNode = prevNode;
+                        position = "below";
+                    }
+                }
+            }
+
+            // --- 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".
+            if (position === "below") {
+                const expandedSet = getTreeViewStore<ID>(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)) {
+                    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" ---
-            // These two positions represent the same visual gap between nodes.
-            // Keep the previous one to avoid the indicator jumping between nodes.
+            // Only applies to same-level boundaries. Level cliffs are handled
+            // by horizontal control above, so they pass through without forced resolution.
             const prev = prevDropTargetRef.current;
             if (prev) {
                 const sameGap =
@@ -357,8 +479,17 @@ export function useDragDrop<ID>(
                     (prev.position === "above" && position === "below" &&
                         clampedIndex === prev.targetIndex - 1);
                 if (sameGap) {
-                    // Keep previous target — they're at the same visual gap
-                    return;
+                    const upperIdx = Math.min(prev.targetIndex, clampedIndex);
+                    const lowerIdx = Math.max(prev.targetIndex, clampedIndex);
+                    const upperLevel = nodes[upperIdx]?.level ?? 0;
+                    const lowerLevel = nodes[lowerIdx]?.level ?? 0;
+
+                    if (upperLevel === lowerLevel) {
+                        // Same level — pure visual hysteresis, keep previous
+                        return;
+                    }
+                    // Level cliff — horizontal control already resolved this,
+                    // let the result pass through.
                 }
             }
             prevDropTargetRef.current = { targetIndex: clampedIndex, position };
@@ -393,6 +524,40 @@ export function useDragDrop<ID>(
                 }
             }
 
+            // --- Magnetic overlay: update the effective level so the overlay
+            //     renders its content at the correct indentation natively.
+            //     A brief translateX spring provides a smooth transition. ---
+            const draggedLevel = draggedNodeRef.current?.level ?? 0;
+            // When a logical target overrides the visual (e.g. ancestor at last-item cliff),
+            // 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) * indentationMultiplier
+                    );
+                    Animated.spring(overlayX, {
+                        toValue: 0,
+                        useNativeDriver: true,
+                        speed: 40,
+                        bounciness: 4,
+                    }).start();
+                }
+            }
+
             const newTarget: DropTarget<ID> = {
                 targetNodeId: targetNode.id,
                 targetIndex: clampedIndex,
@@ -404,13 +569,23 @@ export function useDragDrop<ID>(
 
             // Update the store so each Node can render its own indicator
             if (isValid) {
-                store.getState().updateDropTarget(targetNode.id, position);
+                store.getState().updateDropTarget(targetNode.id, position, visualDropLevel);
             } else {
                 store.getState().updateDropTarget(null, null);
             }
 
             // Keep ref in sync (used by handleDragEnd to avoid setState-during-render)
-            dropTargetRef.current = newTarget;
+            // 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) {
+                dropTargetRef.current = {
+                    ...newTarget,
+                    targetNodeId: logicalTargetId,
+                    position: logicalPosition,
+                };
+            } else {
+                dropTargetRef.current = newTarget;
+            }
 
             setDropTarget((prevTarget) => {
                 if (
@@ -424,12 +599,12 @@ export function useDragDrop<ID>(
                 return newTarget;
             });
         },
-        [storeId, autoExpandDelay, cancelAutoExpandTimer]
+        [storeId, autoExpandDelay, cancelAutoExpandTimer, indentationMultiplier, overlayX]
     );
 
     // --- Handle drag end ---
     const handleDragEnd = useCallback(
-        (fingerPageY?: number) => {
+        (fingerPageY?: number, fingerPageX?: number) => {
             stopAutoScroll();
             cancelLongPressTimer();
             cancelAutoExpandTimer();
@@ -438,9 +613,9 @@ export function useDragDrop<ID>(
             if (!isDraggingRef.current) return;
             isDraggingRef.current = false;
 
-            // Recalculate drop target at final position if we have a pageY
+            // Recalculate drop target at final position if we have coords
             if (fingerPageY !== undefined) {
-                calculateDropTarget(fingerPageY);
+                calculateDropTarget(fingerPageY, fingerPageX ?? 0);
             }
 
             // Cancel any auto-expand timer that calculateDropTarget may have just started.
@@ -547,6 +722,8 @@ export function useDragDrop<ID>(
             store2.getState().updateDropTarget(null, null);
 
             // Reset all refs
+            overlayX.setValue(0);
+            prevEffectiveLevelRef.current = null;
             dropTargetRef.current = null;
             draggedNodeRef.current = null;
             draggedNodeIdRef.current = null;
@@ -567,6 +744,16 @@ export function useDragDrop<ID>(
         ]
     );
 
+    // --- 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();
+        if (isDraggingRef.current && !panResponderActiveRef.current) {
+            handleDragEnd();
+        }
+    }, [cancelLongPressTimer, handleDragEnd]);
+
     // --- PanResponder ---
     const panResponder = useRef(
         PanResponder.create({
@@ -578,7 +765,7 @@ export function useDragDrop<ID>(
                 isDraggingRef.current,
 
             onPanResponderGrant: () => {
-                // Touch captured successfully
+                panResponderActiveRef.current = true;
             },
 
             onPanResponderMove: (evt) => {
@@ -593,8 +780,8 @@ export function useDragDrop<ID>(
                     fingerLocalY - grabOffsetYRef.current + dragOverlayOffset * itemHeightRef.current;
                 overlayY.setValue(overlayLocalY);
 
-                // Calculate drop target
-                calculateDropTarget(fingerPageY);
+                // 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 =
@@ -604,10 +791,12 @@ export function useDragDrop<ID>(
             },
 
             onPanResponderRelease: (evt) => {
-                handleDragEnd(evt.nativeEvent.pageY);
+                panResponderActiveRef.current = false;
+                handleDragEnd(evt.nativeEvent.pageY, evt.nativeEvent.pageX);
             },
 
             onPanResponderTerminate: () => {
+                panResponderActiveRef.current = false;
                 handleDragEnd();
             },
         })
@@ -632,10 +821,13 @@ export function useDragDrop<ID>(
     return {
         panResponder,
         overlayY,
+        overlayX,
         isDragging,
         draggedNode,
         dropTarget,
+        effectiveDropLevel,
         handleNodeTouchStart,
+        handleNodeTouchEnd,
         cancelLongPressTimer,
         scrollOffsetRef,
         headerOffsetRef,