react-native-grab 0.0.2 → 0.0.4

package/dist/cjs/react-native/index.js

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ElementInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const getDevServer_1 = __importDefault(require("react-native/Libraries/Core/Devtools/getDevServer"));
+const get_dev_server_1 = require("./get-dev-server");
 const react_native_screens_1 = require("react-native-screens");
 const copy_payload_1 = require("./copy-payload");
 const dom_traversal_1 = require("./dom-traversal");
@@ -17,26 +14,19 @@ const SETTLE_MS = 80;
 const MOVEMENT_EPSILON_PX = 8;
 const MAX_STACK_LINES = 3;
 const MAX_PREVIEW_TEXT = 120;
-const INSPECTOR_COPY_ENDPOINT = '/__react-native-grab/copy';
+const INSPECTOR_COPY_ENDPOINT = "/__react-native-grab/copy";
 const FAB_SIZE = 56;
 const FAB_SCREEN_PADDING = 8;
 const FAB_DEFAULT_RIGHT_OFFSET = 20;
 const FAB_DEFAULT_BOTTOM_OFFSET = 32;
 const getMetroBaseUrl = () => {
-    const devServer = (0, getDevServer_1.default)();
+    const devServer = (0, get_dev_server_1.getDevServer)();
     if (!devServer?.url)
         return null;
-    return devServer.url.replace(/\/$/, '');
+    return devServer.url.replace(/\/$/, "");
 };
-const ElementInspector = () => {
-    if (react_native_1.Platform.OS === 'web') {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)(ElementInspectorImpl, {});
-};
-exports.ElementInspector = ElementInspector;
 const getInitialFabPosition = () => {
-    const { width, height } = react_native_1.Dimensions.get('window');
+    const { width, height } = react_native_1.Dimensions.get("window");
     return {
         x: Math.max(FAB_SCREEN_PADDING, width - FAB_DEFAULT_RIGHT_OFFSET - FAB_SIZE),
         y: Math.max(FAB_SCREEN_PADDING, height - FAB_DEFAULT_BOTTOM_OFFSET - FAB_SIZE),
@@ -50,74 +40,227 @@ const clampFabPosition = (x, y, windowWidth, windowHeight) => {
         y: Math.min(Math.max(y, FAB_SCREEN_PADDING), maxY),
     };
 };
-const ElementInspectorImpl = () => {
-    const { width: windowWidth, height: windowHeight } = (0, react_native_1.useWindowDimensions)();
-    const statusBarOffset = react_native_1.Platform.OS === 'android' ? (react_native_1.StatusBar.currentHeight ?? 0) : 0;
-    const [state, setState] = (0, react_1.useState)({ status: 'idle' });
-    const [highlightRect, setHighlightRect] = (0, react_1.useState)(null);
-    const [toastVisible, setToastVisible] = (0, react_1.useState)(false);
-    const [selectionPillVisible, setSelectionPillVisible] = (0, react_1.useState)(() => (0, settings_1.getInspectorSettings)().selectionPillVisible);
-    const isClosingRef = (0, react_1.useRef)(false);
-    const anchorRef = (0, react_1.useRef)(null);
-    const inspectorRootRef = (0, react_1.useRef)(null);
-    const overlayRef = (0, react_1.useRef)(null);
-    const selectedHitTargetRef = (0, react_1.useRef)(null);
-    const lastQueryPositionRef = (0, react_1.useRef)(null);
-    const movePositionRef = (0, react_1.useRef)({ x: 0, y: 0 });
-    const settleTimeoutRef = (0, react_1.useRef)(null);
-    const stateRef = (0, react_1.useRef)(state);
-    stateRef.current = state;
-    const selectingHintAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const toastAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const fabAppearAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
-    const fabPressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
-    const fabPosition = (0, react_1.useRef)(new react_native_1.Animated.ValueXY(getInitialFabPosition())).current;
-    const fabPositionRef = (0, react_1.useRef)(getInitialFabPosition());
-    const fabDragStartOffsetRef = (0, react_1.useRef)({ x: 0, y: 0 });
-    const windowSizeRef = (0, react_1.useRef)({ width: windowWidth, height: windowHeight });
-    windowSizeRef.current = { width: windowWidth, height: windowHeight };
-    const skipRefs = [inspectorRootRef, overlayRef];
-    const idle = state.status === 'idle';
-    const selecting = state.status === 'selecting';
-    const overlayVisible = state.status !== 'idle';
-    const activeHighlightRect = state.status === 'copying' ? state.selectedRect : highlightRect;
-    const startSelecting = () => {
-        selectedHitTargetRef.current = null;
-        setState({ status: 'selecting' });
-    };
-    const performQuery = (x, y, offset) => {
-        const appY = y - statusBarOffset;
-        const hitTarget = (0, dom_traversal_1.findHitTargetAtPoint)(anchorRef, skipRefs, x, appY, react_native_1.Platform.OS === 'ios'
+const useLatestRef = (value) => {
+    const ref = (0, react_1.useRef)(value);
+    ref.current = value;
+    return ref;
+};
+const useTraversalSelectionSession = ({ anchorRef, inspectorRootRef, overlayRef, statusBarOffset, setHighlightRect, }) => {
+    const traversalSessionRef = (0, react_1.useRef)(null);
+    const skipRefsRef = (0, react_1.useRef)([inspectorRootRef, overlayRef]);
+    const stopSession = (0, react_1.useCallback)(() => {
+        traversalSessionRef.current?.stop();
+        traversalSessionRef.current = null;
+    }, []);
+    const startSession = (0, react_1.useCallback)(() => {
+        const skipPredicate = react_native_1.Platform.OS === "ios"
             ? (node) => {
                 const inspectorRootNode = inspectorRootRef.current;
                 if (!inspectorRootNode)
                     return false;
                 return node === inspectorRootNode.parentElement;
             }
-            : undefined, offset);
+            : undefined;
+        stopSession();
+        traversalSessionRef.current = (0, dom_traversal_1.startSession)({
+            anchorRef,
+            skipRefs: skipRefsRef.current,
+            offset: statusBarOffset,
+            skipPredicate,
+        });
+        setHighlightRect(null);
+    }, [anchorRef, inspectorRootRef, setHighlightRect, statusBarOffset, stopSession]);
+    const queryAtPoint = (0, react_1.useCallback)((x, y) => {
+        const session = traversalSessionRef.current;
+        if (!session) {
+            setHighlightRect(null);
+            return null;
+        }
+        const hitTarget = session.move({
+            x,
+            y: y - statusBarOffset,
+        });
         setHighlightRect(hitTarget?.rect ?? null);
         return hitTarget;
+    }, [setHighlightRect, statusBarOffset]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            stopSession();
+        };
+    }, [stopSession]);
+    return {
+        startSession,
+        queryAtPoint,
+        stopSession,
     };
-    const performQueryRef = (0, react_1.useRef)(performQuery);
-    performQueryRef.current = performQuery;
-    const closeOverlayImmediately = () => {
+};
+const useSelectionGesture = ({ isSelecting, queryAtPoint, onHitTarget, onCancel, }) => {
+    const isSelectingRef = useLatestRef(isSelecting);
+    const queryAtPointRef = useLatestRef(queryAtPoint);
+    const onHitTargetRef = useLatestRef(onHitTarget);
+    const onCancelRef = useLatestRef(onCancel);
+    const settleTimeoutRef = (0, react_1.useRef)(null);
+    const lastQueryPositionRef = (0, react_1.useRef)(null);
+    const movePositionRef = (0, react_1.useRef)({ x: 0, y: 0 });
+    const clearSettleTimeout = (0, react_1.useCallback)(() => {
         if (settleTimeoutRef.current != null) {
             clearTimeout(settleTimeoutRef.current);
             settleTimeoutRef.current = null;
         }
-        selectedHitTargetRef.current = null;
+    }, []);
+    const resetGestureState = (0, react_1.useCallback)(() => {
+        clearSettleTimeout();
         lastQueryPositionRef.current = null;
-        setState({ status: 'idle' });
-        setHighlightRect(null);
+    }, [clearSettleTimeout]);
+    const panResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (evt) => {
+            if (!isSelectingRef.current)
+                return;
+            const x = evt.nativeEvent.locationX;
+            const y = evt.nativeEvent.locationY;
+            queryAtPointRef.current(x, y);
+            lastQueryPositionRef.current = { x, y };
+        },
+        onPanResponderMove: (evt) => {
+            if (!isSelectingRef.current)
+                return;
+            movePositionRef.current = {
+                x: evt.nativeEvent.locationX,
+                y: evt.nativeEvent.locationY,
+            };
+            clearSettleTimeout();
+            settleTimeoutRef.current = setTimeout(() => {
+                settleTimeoutRef.current = null;
+                if (!isSelectingRef.current)
+                    return;
+                const pos = movePositionRef.current;
+                const last = lastQueryPositionRef.current;
+                const distance = last ? Math.hypot(pos.x - last.x, pos.y - last.y) : Infinity;
+                if (distance < MOVEMENT_EPSILON_PX)
+                    return;
+                lastQueryPositionRef.current = pos;
+                queryAtPointRef.current(pos.x, pos.y);
+            }, SETTLE_MS);
+        },
+        onPanResponderRelease: (evt) => {
+            if (!isSelectingRef.current)
+                return;
+            const hitTarget = queryAtPointRef.current(evt.nativeEvent.locationX, evt.nativeEvent.locationY);
+            if (!hitTarget) {
+                onCancelRef.current();
+                return;
+            }
+            onHitTargetRef.current(hitTarget);
+        },
+        onPanResponderTerminate: () => {
+            if (isSelectingRef.current) {
+                onCancelRef.current();
+            }
+        },
+    })).current;
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clearSettleTimeout();
+        };
+    }, [clearSettleTimeout]);
+    return {
+        panHandlers: panResponder.panHandlers,
+        resetGestureState,
     };
-    const closeOverlay = () => {
+};
+const useFabController = (windowWidth, windowHeight) => {
+    const initialFabPosition = (0, react_1.useRef)(getInitialFabPosition()).current;
+    const fabAppearAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const fabPressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const fabPosition = (0, react_1.useRef)(new react_native_1.Animated.ValueXY(initialFabPosition)).current;
+    const fabPositionRef = (0, react_1.useRef)(initialFabPosition);
+    const fabDragStartOffsetRef = (0, react_1.useRef)({ x: 0, y: 0 });
+    const windowSizeRef = (0, react_1.useRef)({ width: windowWidth, height: windowHeight });
+    windowSizeRef.current = { width: windowWidth, height: windowHeight };
+    const animateFabPress = (0, react_1.useCallback)((toValue) => {
+        react_native_1.Animated.spring(fabPressAnim, {
+            toValue,
+            useNativeDriver: true,
+            tension: 220,
+            friction: 16,
+        }).start();
+    }, [fabPressAnim]);
+    const fabPanResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => false,
+        onMoveShouldSetPanResponder: (_evt, gestureState) => Math.abs(gestureState.dx) > 2 || Math.abs(gestureState.dy) > 2,
+        onPanResponderGrant: (_evt, gestureState) => {
+            fabDragStartOffsetRef.current = {
+                x: fabPositionRef.current.x - gestureState.x0,
+                y: fabPositionRef.current.y - gestureState.y0,
+            };
+        },
+        onPanResponderMove: (_evt, gestureState) => {
+            const { width, height } = windowSizeRef.current;
+            const nextPosition = clampFabPosition(gestureState.moveX + fabDragStartOffsetRef.current.x, gestureState.moveY + fabDragStartOffsetRef.current.y, width, height);
+            fabPositionRef.current = nextPosition;
+            fabPosition.setValue(nextPosition);
+        },
+        onPanResponderTerminationRequest: () => true,
+        onPanResponderTerminate: () => {
+            fabPressAnim.setValue(1);
+        },
+        onPanResponderRelease: () => {
+            fabPressAnim.setValue(1);
+        },
+    })).current;
+    (0, react_1.useEffect)(() => {
+        const nextPosition = clampFabPosition(fabPositionRef.current.x, fabPositionRef.current.y, windowWidth, windowHeight);
+        fabPositionRef.current = nextPosition;
+        fabPosition.setValue(nextPosition);
+    }, [fabPosition, windowHeight, windowWidth]);
+    return {
+        animateFabPress,
+        fabAppearAnim,
+        fabPanHandlers: fabPanResponder.panHandlers,
+        fabPosition,
+        fabPressAnim,
+    };
+};
+const ElementInspector = () => {
+    const { width: windowWidth, height: windowHeight } = (0, react_native_1.useWindowDimensions)();
+    const statusBarOffset = react_native_1.Platform.OS === "android" ? (react_native_1.StatusBar.currentHeight ?? 0) : 0;
+    const [state, setState] = (0, react_1.useState)({ status: "idle" });
+    const [highlightRect, setHighlightRect] = (0, react_1.useState)(null);
+    const [toastVisible, setToastVisible] = (0, react_1.useState)(false);
+    const [selectionPillVisible, setSelectionPillVisible] = (0, react_1.useState)(() => (0, settings_1.getInspectorSettings)().selectionPillVisible);
+    const isClosingRef = (0, react_1.useRef)(false);
+    const anchorRef = (0, react_1.useRef)(null);
+    const inspectorRootRef = (0, react_1.useRef)(null);
+    const overlayRef = (0, react_1.useRef)(null);
+    const selectingHintAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const toastAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const idle = state.status === "idle";
+    const selecting = state.status === "selecting";
+    const overlayVisible = state.status !== "idle";
+    const activeHighlightRect = state.status === "copying" ? state.selectedRect : highlightRect;
+    const { animateFabPress, fabAppearAnim, fabPanHandlers, fabPosition, fabPressAnim } = useFabController(windowWidth, windowHeight);
+    const { queryAtPoint, startSession, stopSession } = useTraversalSelectionSession({
+        anchorRef,
+        inspectorRootRef,
+        overlayRef,
+        statusBarOffset,
+        setHighlightRect,
+    });
+    const closeOverlayImmediately = (0, react_1.useCallback)(() => {
+        stopSession();
+        setState({ status: "idle" });
+        setHighlightRect(null);
+    }, [stopSession]);
+    const closeOverlay = (0, react_1.useCallback)(() => {
         if (isClosingRef.current)
             return;
         isClosingRef.current = true;
         closeOverlayImmediately();
         isClosingRef.current = false;
-    };
-    const showCopiedToast = () => {
+    }, [closeOverlayImmediately]);
+    const showCopiedToast = (0, react_1.useCallback)(() => {
         setToastVisible(true);
         toastAnim.setValue(0);
         react_native_1.Animated.sequence([
@@ -133,15 +276,15 @@ const ElementInspectorImpl = () => {
                 useNativeDriver: true,
             }),
         ]).start(() => setToastVisible(false));
-    };
-    const copyFeedbackToHostClipboard = async (text) => {
+    }, [toastAnim]);
+    const copyFeedbackToHostClipboard = (0, react_1.useCallback)(async (text) => {
         const baseUrl = getMetroBaseUrl();
         if (!baseUrl)
             return false;
         try {
             const response = await fetch(`${baseUrl}${INSPECTOR_COPY_ENDPOINT}`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({ text }),
             });
             return response.ok;
@@ -149,7 +292,33 @@ const ElementInspectorImpl = () => {
         catch {
             return false;
         }
-    };
+    }, []);
+    const handleSelectionHit = (0, react_1.useCallback)((hitTarget) => {
+        setState({ status: "copying", selectedRect: hitTarget.rect });
+        void (async () => {
+            const clipboardText = await (0, copy_payload_1.buildInspectorCopyPayload)(hitTarget, {
+                maxStackLines: MAX_STACK_LINES,
+                maxPreviewText: MAX_PREVIEW_TEXT,
+                pathRootHint: null,
+            });
+            const copied = await copyFeedbackToHostClipboard(clipboardText);
+            if (copied) {
+                showCopiedToast();
+            }
+            closeOverlay();
+        })();
+    }, [closeOverlay, copyFeedbackToHostClipboard, showCopiedToast]);
+    const { panHandlers: selectionPanHandlers, resetGestureState } = useSelectionGesture({
+        isSelecting: selecting,
+        queryAtPoint,
+        onHitTarget: handleSelectionHit,
+        onCancel: closeOverlay,
+    });
+    const startSelecting = (0, react_1.useCallback)(() => {
+        resetGestureState();
+        startSession();
+        setState({ status: "selecting" });
+    }, [resetGestureState, startSession]);
     (0, react_1.useEffect)(() => {
         return (0, settings_1.subscribeInspectorSettings)(() => {
             setSelectionPillVisible((0, settings_1.getInspectorSettings)().selectionPillVisible);
@@ -157,15 +326,14 @@ const ElementInspectorImpl = () => {
     }, []);
     (0, react_1.useEffect)(() => {
         return (0, selection_trigger_1.subscribeInspectorSelectionRequest)(() => {
-            setHighlightRect(null);
             startSelecting();
         });
-    }, []);
+    }, [startSelecting]);
     (0, react_1.useEffect)(() => {
         void (0, settings_1.initializeInspectorSettings)();
     }, []);
     (0, react_1.useEffect)(() => {
-        react_native_1.DevSettings.addMenuItem('Toggle React Native Grab', () => {
+        react_native_1.DevSettings.addMenuItem("Toggle React Native Grab", () => {
             void (async () => {
                 await (0, settings_1.initializeInspectorSettings)();
                 const current = (0, settings_1.getInspectorSettings)().selectionPillVisible;
@@ -173,104 +341,11 @@ const ElementInspectorImpl = () => {
                 await (0, settings_1.updateInspectorSettings)({ selectionPillVisible: !current });
             })();
         });
-        react_native_1.DevSettings.addMenuItem('Start React Native Grab Selection', () => {
-            console.log('[InspectorFeedback] Start selection menu item pressed');
+        react_native_1.DevSettings.addMenuItem("Start React Native Grab Selection", () => {
+            console.log("[InspectorFeedback] Start selection menu item pressed");
             (0, selection_trigger_1.requestInspectorSelection)();
         });
     }, []);
-    (0, react_1.useEffect)(() => {
-        const nextPosition = clampFabPosition(fabPositionRef.current.x, fabPositionRef.current.y, windowWidth, windowHeight);
-        fabPositionRef.current = nextPosition;
-        fabPosition.setValue(nextPosition);
-    }, [fabPosition, windowHeight, windowWidth]);
-    const panResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: (evt) => {
-            if (stateRef.current.status !== 'selecting')
-                return;
-            const x = evt.nativeEvent.locationX;
-            const y = evt.nativeEvent.locationY;
-            performQueryRef.current(x, y, statusBarOffset);
-            lastQueryPositionRef.current = { x, y };
-        },
-        onPanResponderMove: (evt) => {
-            if (stateRef.current.status !== 'selecting')
-                return;
-            const x = evt.nativeEvent.locationX;
-            const y = evt.nativeEvent.locationY;
-            movePositionRef.current = { x, y };
-            if (settleTimeoutRef.current != null) {
-                clearTimeout(settleTimeoutRef.current);
-                settleTimeoutRef.current = null;
-            }
-            settleTimeoutRef.current = setTimeout(() => {
-                settleTimeoutRef.current = null;
-                if (stateRef.current.status !== 'selecting')
-                    return;
-                const pos = movePositionRef.current;
-                const last = lastQueryPositionRef.current;
-                const distance = last
-                    ? Math.hypot(pos.x - last.x, pos.y - last.y)
-                    : Infinity;
-                if (distance < MOVEMENT_EPSILON_PX)
-                    return;
-                lastQueryPositionRef.current = pos;
-                performQueryRef.current(pos.x, pos.y, statusBarOffset);
-            }, SETTLE_MS);
-        },
-        onPanResponderRelease: (evt) => {
-            if (stateRef.current.status !== 'selecting')
-                return;
-            const hitTarget = performQueryRef.current(evt.nativeEvent.locationX, evt.nativeEvent.locationY, statusBarOffset);
-            if (!hitTarget) {
-                closeOverlay();
-                return;
-            }
-            selectedHitTargetRef.current = hitTarget;
-            setState({ status: 'copying', selectedRect: hitTarget.rect });
-            void (async () => {
-                const clipboardText = await (0, copy_payload_1.buildInspectorCopyPayload)(hitTarget, {
-                    maxStackLines: MAX_STACK_LINES,
-                    maxPreviewText: MAX_PREVIEW_TEXT,
-                    pathRootHint: null,
-                });
-                const copied = await copyFeedbackToHostClipboard(clipboardText);
-                if (copied) {
-                    showCopiedToast();
-                }
-                closeOverlay();
-            })();
-        },
-        onPanResponderTerminate: () => {
-            if (stateRef.current.status === 'selecting') {
-                closeOverlay();
-            }
-        },
-    })).current;
-    const fabPanResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
-        onStartShouldSetPanResponder: () => false,
-        onMoveShouldSetPanResponder: (_evt, gestureState) => Math.abs(gestureState.dx) > 2 || Math.abs(gestureState.dy) > 2,
-        onPanResponderGrant: (_evt, gestureState) => {
-            fabDragStartOffsetRef.current = {
-                x: fabPositionRef.current.x - gestureState.x0,
-                y: fabPositionRef.current.y - gestureState.y0,
-            };
-        },
-        onPanResponderMove: (_evt, gestureState) => {
-            const { width, height } = windowSizeRef.current;
-            const nextPosition = clampFabPosition(gestureState.moveX + fabDragStartOffsetRef.current.x, gestureState.moveY + fabDragStartOffsetRef.current.y, width, height);
-            fabPositionRef.current = nextPosition;
-            fabPosition.setValue(nextPosition);
-        },
-        onPanResponderTerminationRequest: () => true,
-        onPanResponderTerminate: () => {
-            fabPressAnim.setValue(1);
-        },
-        onPanResponderRelease: () => {
-            fabPressAnim.setValue(1);
-        },
-    })).current;
     (0, react_1.useEffect)(() => {
         if (!selecting) {
             selectingHintAnim.stopAnimation();
@@ -299,76 +374,87 @@ const ElementInspectorImpl = () => {
             useNativeDriver: true,
         }).start();
     }, [fabAppearAnim, idle]);
-    return ((0, jsx_runtime_1.jsx)(InspectorRootContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: inspectorRootRef, style: react_native_1.StyleSheet.absoluteFill, pointerEvents: "box-none", children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { ref: anchorRef, style: [react_native_1.StyleSheet.absoluteFill, styles.anchor], pointerEvents: "none" }), idle && selectionPillVisible && ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ...fabPanResponder.panHandlers, style: [
-                        styles.fab,
-                        {
-                            opacity: fabAppearAnim,
-                            transform: [
-                                { translateX: fabPosition.x },
-                                {
-                                    translateY: react_native_1.Animated.add(fabPosition.y, fabAppearAnim.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [8, 0],
-                                    })),
-                                },
-                                { scale: fabPressAnim },
-                            ],
-                        },
-                    ], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.fabInner, onPress: startSelecting, onPressIn: () => {
-                            react_native_1.Animated.spring(fabPressAnim, {
-                                toValue: 0.96,
-                                useNativeDriver: true,
-                                tension: 220,
-                                friction: 16,
-                            }).start();
-                        }, onPressOut: () => {
-                            react_native_1.Animated.spring(fabPressAnim, {
-                                toValue: 1,
-                                useNativeDriver: true,
-                                tension: 220,
-                                friction: 16,
-                            }).start();
-                        }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fabIcon, allowFontScaling: false, children: "\u2316" }) }) })), overlayVisible && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: overlayRef, style: styles.overlay, ...(selecting ? panResponder.panHandlers : {}), children: [activeHighlightRect && ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: [
-                                styles.highlight,
-                                {
-                                    left: activeHighlightRect.x,
-                                    top: activeHighlightRect.y + statusBarOffset,
-                                    width: activeHighlightRect.width,
-                                    height: activeHighlightRect.height,
-                                },
-                            ] })), selecting && ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: [
-                                styles.selectionHint,
-                                {
-                                    opacity: selectingHintAnim.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [0.76, 1],
-                                    }),
-                                    transform: [
-                                        {
-                                            translateY: selectingHintAnim.interpolate({
-                                                inputRange: [0, 1],
-                                                outputRange: [0, -2],
-                                            }),
-                                        },
-                                    ],
-                                },
-                            ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.selectionHintText, children: "Drag or tap to find a source" }) }))] })), toastVisible && ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: [
-                        styles.toast,
-                        {
-                            opacity: toastAnim,
-                            transform: [
-                                {
-                                    translateY: toastAnim.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [-8, 0],
-                                    }),
-                                },
-                            ],
-                        },
-                    ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.toastText, children: "Source location copied" }) }))] }) }));
+    (0, react_1.useEffect)(() => {
+        return () => {
+            resetGestureState();
+            stopSession();
+        };
+    }, [resetGestureState, stopSession]);
+    return ((0, jsx_runtime_1.jsx)(InspectorRootContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: inspectorRootRef, style: react_native_1.StyleSheet.absoluteFill, pointerEvents: "box-none", children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { ref: anchorRef, style: [react_native_1.StyleSheet.absoluteFill, styles.anchor], pointerEvents: "none" }), (0, jsx_runtime_1.jsx)(SelectionFab, { visible: idle && selectionPillVisible, onPress: startSelecting, onPressIn: () => animateFabPress(0.96), onPressOut: () => animateFabPress(1), panHandlers: fabPanHandlers, fabAppearAnim: fabAppearAnim, fabPosition: fabPosition, fabPressAnim: fabPressAnim }), (0, jsx_runtime_1.jsx)(SelectionOverlay, { visible: overlayVisible, selecting: selecting, overlayRef: overlayRef, panHandlers: selectionPanHandlers, highlightRect: activeHighlightRect, statusBarOffset: statusBarOffset, selectingHintAnim: selectingHintAnim }), (0, jsx_runtime_1.jsx)(CopiedToast, { visible: toastVisible, toastAnim: toastAnim })] }) }));
+};
+exports.ElementInspector = ElementInspector;
+const SelectionFab = ({ visible, onPress, onPressIn, onPressOut, panHandlers, fabAppearAnim, fabPosition, fabPressAnim, }) => {
+    if (!visible) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ...panHandlers, style: [
+            styles.fab,
+            {
+                opacity: fabAppearAnim,
+                transform: [
+                    { translateX: fabPosition.x },
+                    {
+                        translateY: react_native_1.Animated.add(fabPosition.y, fabAppearAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [8, 0],
+                        })),
+                    },
+                    { scale: fabPressAnim },
+                ],
+            },
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.fabInner, onPress: onPress, onPressIn: onPressIn, onPressOut: onPressOut, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fabIcon, allowFontScaling: false, children: "\u2316" }) }) }));
+};
+const SelectionOverlay = ({ visible, selecting, overlayRef, panHandlers, highlightRect, statusBarOffset, selectingHintAnim, }) => {
+    if (!visible) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: overlayRef, style: styles.overlay, ...(selecting ? panHandlers : {}), children: [highlightRect && ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: [
+                    styles.highlight,
+                    {
+                        left: highlightRect.x,
+                        top: highlightRect.y + statusBarOffset,
+                        width: highlightRect.width,
+                        height: highlightRect.height,
+                    },
+                ] })), selecting && ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: [
+                    styles.selectionHint,
+                    {
+                        opacity: selectingHintAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [0.76, 1],
+                        }),
+                        transform: [
+                            {
+                                translateY: selectingHintAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [0, -2],
+                                }),
+                            },
+                        ],
+                    },
+                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.selectionHintText, children: "Drag or tap to find a source" }) }))] }));
+};
+const CopiedToast = ({ visible, toastAnim }) => {
+    if (!visible) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: [
+            styles.toast,
+            {
+                opacity: toastAnim,
+                transform: [
+                    {
+                        translateY: toastAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [-8, 0],
+                        }),
+                    },
+                ],
+            },
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.toastText, children: "Source location copied" }) }));
 };
 const InspectorRootContainer = ({ children }) => {
-    if (react_native_1.Platform.OS === 'ios') {
+    if (react_native_1.Platform.OS === "ios") {
         return (0, jsx_runtime_1.jsx)(react_native_screens_1.FullWindowOverlay, { children: children });
     }
     return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: children });
@@ -378,75 +464,75 @@ const styles = react_native_1.StyleSheet.create({
         opacity: 0,
     },
     fab: {
-        position: 'absolute',
+        position: "absolute",
         left: 0,
         top: 0,
         zIndex: 9999,
         width: FAB_SIZE,
         height: FAB_SIZE,
         borderRadius: 9999,
-        backgroundColor: 'rgba(14,20,26,0.98)',
+        backgroundColor: "rgba(14,20,26,0.98)",
         borderWidth: 1,
-        borderColor: 'rgba(255,255,255,0.14)',
+        borderColor: "rgba(255,255,255,0.14)",
         elevation: 4,
-        shadowColor: '#000',
+        shadowColor: "#000",
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.28,
         shadowRadius: 6,
     },
     fabInner: {
         flex: 1,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: '100%',
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        height: "100%",
     },
     fabIcon: {
-        color: '#F5F7FA',
+        color: "#F5F7FA",
         fontSize: 28,
-        fontWeight: '500',
+        fontWeight: "500",
     },
     overlay: {
         ...react_native_1.StyleSheet.absoluteFillObject,
-        backgroundColor: 'rgba(0,0,0,0.015)',
+        backgroundColor: "rgba(0,0,0,0.015)",
     },
     selectionHint: {
-        position: 'absolute',
+        position: "absolute",
         top: 56,
-        alignSelf: 'center',
-        backgroundColor: 'rgba(14,20,26,0.9)',
+        alignSelf: "center",
+        backgroundColor: "rgba(14,20,26,0.9)",
         borderRadius: 18,
         paddingHorizontal: 14,
         paddingVertical: 8,
         borderWidth: 1,
-        borderColor: 'rgba(255,255,255,0.14)',
+        borderColor: "rgba(255,255,255,0.14)",
     },
     selectionHintText: {
-        color: '#F5F7FA',
+        color: "#F5F7FA",
         fontSize: 13,
-        fontWeight: '600',
+        fontWeight: "600",
     },
     highlight: {
-        position: 'absolute',
+        position: "absolute",
         borderWidth: 2,
-        borderColor: '#1264A3',
-        backgroundColor: 'rgba(18,100,163,0.16)',
+        borderColor: "#1264A3",
+        backgroundColor: "rgba(18,100,163,0.16)",
     },
     toast: {
-        position: 'absolute',
+        position: "absolute",
         top: 52,
         left: 16,
         right: 16,
-        alignItems: 'center',
+        alignItems: "center",
         paddingVertical: 10,
         borderRadius: 10,
-        backgroundColor: 'rgba(18,100,163,0.96)',
+        backgroundColor: "rgba(18,100,163,0.96)",
     },
     toastText: {
-        color: '#fff',
+        color: "#fff",
         fontSize: 14,
-        fontWeight: '700',
+        fontWeight: "700",
     },
 });
 //# sourceMappingURL=index.js.map