react-native-grab 0.0.2 → 0.0.4

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

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useRef, useState } from 'react';
-import { Animated, DevSettings, Dimensions, PanResponder, Platform, Pressable, StatusBar, StyleSheet, Text, useWindowDimensions, View, } from 'react-native';
-import getDevServer from 'react-native/Libraries/Core/Devtools/getDevServer';
-import { FullWindowOverlay } from 'react-native-screens';
-import { buildInspectorCopyPayload } from './copy-payload';
-import { findHitTargetAtPoint } from './dom-traversal';
-import { requestInspectorSelection, subscribeInspectorSelectionRequest } from './selection-trigger';
-import { getInspectorSettings, initializeInspectorSettings, subscribeInspectorSettings, updateInspectorSettings, } from './settings';
+import { Fragment, useCallback, useEffect, useRef, useState, } from "react";
+import { Animated, DevSettings, Dimensions, PanResponder, Platform, Pressable, StatusBar, StyleSheet, Text, useWindowDimensions, View, } from "react-native";
+import { getDevServer } from "./get-dev-server";
+import { FullWindowOverlay } from "react-native-screens";
+import { buildInspectorCopyPayload } from "./copy-payload";
+import { startSession as startTraversalSession, } from "./dom-traversal";
+import { requestInspectorSelection, subscribeInspectorSelectionRequest } from "./selection-trigger";
+import { getInspectorSettings, initializeInspectorSettings, subscribeInspectorSettings, updateInspectorSettings, } from "./settings";
 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;
@@ -20,16 +20,10 @@ const getMetroBaseUrl = () => {
     const devServer = getDevServer();
     if (!devServer?.url)
         return null;
-    return devServer.url.replace(/\/$/, '');
-};
-export const ElementInspector = () => {
-    if (Platform.OS === 'web') {
-        return null;
-    }
-    return _jsx(ElementInspectorImpl, {});
+    return devServer.url.replace(/\/$/, "");
 };
 const getInitialFabPosition = () => {
-    const { width, height } = Dimensions.get('window');
+    const { width, height } = 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),
@@ -43,74 +37,227 @@ const clampFabPosition = (x, y, windowWidth, windowHeight) => {
         y: Math.min(Math.max(y, FAB_SCREEN_PADDING), maxY),
     };
 };
-const ElementInspectorImpl = () => {
-    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
-    const statusBarOffset = Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 0;
-    const [state, setState] = useState({ status: 'idle' });
-    const [highlightRect, setHighlightRect] = useState(null);
-    const [toastVisible, setToastVisible] = useState(false);
-    const [selectionPillVisible, setSelectionPillVisible] = useState(() => getInspectorSettings().selectionPillVisible);
-    const isClosingRef = useRef(false);
-    const anchorRef = useRef(null);
-    const inspectorRootRef = useRef(null);
-    const overlayRef = useRef(null);
-    const selectedHitTargetRef = useRef(null);
-    const lastQueryPositionRef = useRef(null);
-    const movePositionRef = useRef({ x: 0, y: 0 });
-    const settleTimeoutRef = useRef(null);
-    const stateRef = useRef(state);
-    stateRef.current = state;
-    const selectingHintAnim = useRef(new Animated.Value(0)).current;
-    const toastAnim = useRef(new Animated.Value(0)).current;
-    const fabAppearAnim = useRef(new Animated.Value(1)).current;
-    const fabPressAnim = useRef(new Animated.Value(1)).current;
-    const fabPosition = useRef(new Animated.ValueXY(getInitialFabPosition())).current;
-    const fabPositionRef = useRef(getInitialFabPosition());
-    const fabDragStartOffsetRef = useRef({ x: 0, y: 0 });
-    const windowSizeRef = 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 = findHitTargetAtPoint(anchorRef, skipRefs, x, appY, Platform.OS === 'ios'
+const useLatestRef = (value) => {
+    const ref = useRef(value);
+    ref.current = value;
+    return ref;
+};
+const useTraversalSelectionSession = ({ anchorRef, inspectorRootRef, overlayRef, statusBarOffset, setHighlightRect, }) => {
+    const traversalSessionRef = useRef(null);
+    const skipRefsRef = useRef([inspectorRootRef, overlayRef]);
+    const stopSession = useCallback(() => {
+        traversalSessionRef.current?.stop();
+        traversalSessionRef.current = null;
+    }, []);
+    const startSession = useCallback(() => {
+        const skipPredicate = Platform.OS === "ios"
             ? (node) => {
                 const inspectorRootNode = inspectorRootRef.current;
                 if (!inspectorRootNode)
                     return false;
                 return node === inspectorRootNode.parentElement;
             }
-            : undefined, offset);
+            : undefined;
+        stopSession();
+        traversalSessionRef.current = startTraversalSession({
+            anchorRef,
+            skipRefs: skipRefsRef.current,
+            offset: statusBarOffset,
+            skipPredicate,
+        });
+        setHighlightRect(null);
+    }, [anchorRef, inspectorRootRef, setHighlightRect, statusBarOffset, stopSession]);
+    const queryAtPoint = 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]);
+    useEffect(() => {
+        return () => {
+            stopSession();
+        };
+    }, [stopSession]);
+    return {
+        startSession,
+        queryAtPoint,
+        stopSession,
     };
-    const performQueryRef = 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 = useRef(null);
+    const lastQueryPositionRef = useRef(null);
+    const movePositionRef = useRef({ x: 0, y: 0 });
+    const clearSettleTimeout = useCallback(() => {
         if (settleTimeoutRef.current != null) {
             clearTimeout(settleTimeoutRef.current);
             settleTimeoutRef.current = null;
         }
-        selectedHitTargetRef.current = null;
+    }, []);
+    const resetGestureState = useCallback(() => {
+        clearSettleTimeout();
         lastQueryPositionRef.current = null;
-        setState({ status: 'idle' });
-        setHighlightRect(null);
+    }, [clearSettleTimeout]);
+    const panResponder = useRef(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;
+    useEffect(() => {
+        return () => {
+            clearSettleTimeout();
+        };
+    }, [clearSettleTimeout]);
+    return {
+        panHandlers: panResponder.panHandlers,
+        resetGestureState,
+    };
+};
+const useFabController = (windowWidth, windowHeight) => {
+    const initialFabPosition = useRef(getInitialFabPosition()).current;
+    const fabAppearAnim = useRef(new Animated.Value(1)).current;
+    const fabPressAnim = useRef(new Animated.Value(1)).current;
+    const fabPosition = useRef(new Animated.ValueXY(initialFabPosition)).current;
+    const fabPositionRef = useRef(initialFabPosition);
+    const fabDragStartOffsetRef = useRef({ x: 0, y: 0 });
+    const windowSizeRef = useRef({ width: windowWidth, height: windowHeight });
+    windowSizeRef.current = { width: windowWidth, height: windowHeight };
+    const animateFabPress = useCallback((toValue) => {
+        Animated.spring(fabPressAnim, {
+            toValue,
+            useNativeDriver: true,
+            tension: 220,
+            friction: 16,
+        }).start();
+    }, [fabPressAnim]);
+    const fabPanResponder = useRef(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;
+    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 closeOverlay = () => {
+};
+export const ElementInspector = () => {
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const statusBarOffset = Platform.OS === "android" ? (StatusBar.currentHeight ?? 0) : 0;
+    const [state, setState] = useState({ status: "idle" });
+    const [highlightRect, setHighlightRect] = useState(null);
+    const [toastVisible, setToastVisible] = useState(false);
+    const [selectionPillVisible, setSelectionPillVisible] = useState(() => getInspectorSettings().selectionPillVisible);
+    const isClosingRef = useRef(false);
+    const anchorRef = useRef(null);
+    const inspectorRootRef = useRef(null);
+    const overlayRef = useRef(null);
+    const selectingHintAnim = useRef(new Animated.Value(0)).current;
+    const toastAnim = useRef(new 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 = useCallback(() => {
+        stopSession();
+        setState({ status: "idle" });
+        setHighlightRect(null);
+    }, [stopSession]);
+    const closeOverlay = useCallback(() => {
         if (isClosingRef.current)
             return;
         isClosingRef.current = true;
         closeOverlayImmediately();
         isClosingRef.current = false;
-    };
-    const showCopiedToast = () => {
+    }, [closeOverlayImmediately]);
+    const showCopiedToast = useCallback(() => {
         setToastVisible(true);
         toastAnim.setValue(0);
         Animated.sequence([
@@ -126,15 +273,15 @@ const ElementInspectorImpl = () => {
                 useNativeDriver: true,
             }),
         ]).start(() => setToastVisible(false));
-    };
-    const copyFeedbackToHostClipboard = async (text) => {
+    }, [toastAnim]);
+    const copyFeedbackToHostClipboard = 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;
@@ -142,7 +289,33 @@ const ElementInspectorImpl = () => {
         catch {
             return false;
         }
-    };
+    }, []);
+    const handleSelectionHit = useCallback((hitTarget) => {
+        setState({ status: "copying", selectedRect: hitTarget.rect });
+        void (async () => {
+            const clipboardText = await 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 = useCallback(() => {
+        resetGestureState();
+        startSession();
+        setState({ status: "selecting" });
+    }, [resetGestureState, startSession]);
     useEffect(() => {
         return subscribeInspectorSettings(() => {
             setSelectionPillVisible(getInspectorSettings().selectionPillVisible);
@@ -150,15 +323,14 @@ const ElementInspectorImpl = () => {
     }, []);
     useEffect(() => {
         return subscribeInspectorSelectionRequest(() => {
-            setHighlightRect(null);
             startSelecting();
         });
-    }, []);
+    }, [startSelecting]);
     useEffect(() => {
         void initializeInspectorSettings();
     }, []);
     useEffect(() => {
-        DevSettings.addMenuItem('Toggle React Native Grab', () => {
+        DevSettings.addMenuItem("Toggle React Native Grab", () => {
             void (async () => {
                 await initializeInspectorSettings();
                 const current = getInspectorSettings().selectionPillVisible;
@@ -166,104 +338,11 @@ const ElementInspectorImpl = () => {
                 await updateInspectorSettings({ selectionPillVisible: !current });
             })();
         });
-        DevSettings.addMenuItem('Start React Native Grab Selection', () => {
-            console.log('[InspectorFeedback] Start selection menu item pressed');
+        DevSettings.addMenuItem("Start React Native Grab Selection", () => {
+            console.log("[InspectorFeedback] Start selection menu item pressed");
             requestInspectorSelection();
         });
     }, []);
-    useEffect(() => {
-        const nextPosition = clampFabPosition(fabPositionRef.current.x, fabPositionRef.current.y, windowWidth, windowHeight);
-        fabPositionRef.current = nextPosition;
-        fabPosition.setValue(nextPosition);
-    }, [fabPosition, windowHeight, windowWidth]);
-    const panResponder = useRef(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 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 = useRef(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;
     useEffect(() => {
         if (!selecting) {
             selectingHintAnim.stopAnimation();
@@ -292,76 +371,86 @@ const ElementInspectorImpl = () => {
             useNativeDriver: true,
         }).start();
     }, [fabAppearAnim, idle]);
-    return (_jsx(InspectorRootContainer, { children: _jsxs(View, { ref: inspectorRootRef, style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: [_jsx(View, { ref: anchorRef, style: [StyleSheet.absoluteFill, styles.anchor], pointerEvents: "none" }), idle && selectionPillVisible && (_jsx(Animated.View, { ...fabPanResponder.panHandlers, style: [
-                        styles.fab,
-                        {
-                            opacity: fabAppearAnim,
-                            transform: [
-                                { translateX: fabPosition.x },
-                                {
-                                    translateY: Animated.add(fabPosition.y, fabAppearAnim.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [8, 0],
-                                    })),
-                                },
-                                { scale: fabPressAnim },
-                            ],
-                        },
-                    ], children: _jsx(Pressable, { style: styles.fabInner, onPress: startSelecting, onPressIn: () => {
-                            Animated.spring(fabPressAnim, {
-                                toValue: 0.96,
-                                useNativeDriver: true,
-                                tension: 220,
-                                friction: 16,
-                            }).start();
-                        }, onPressOut: () => {
-                            Animated.spring(fabPressAnim, {
-                                toValue: 1,
-                                useNativeDriver: true,
-                                tension: 220,
-                                friction: 16,
-                            }).start();
-                        }, children: _jsx(Text, { style: styles.fabIcon, allowFontScaling: false, children: "\u2316" }) }) })), overlayVisible && (_jsxs(View, { ref: overlayRef, style: styles.overlay, ...(selecting ? panResponder.panHandlers : {}), children: [activeHighlightRect && (_jsx(View, { pointerEvents: "none", style: [
-                                styles.highlight,
-                                {
-                                    left: activeHighlightRect.x,
-                                    top: activeHighlightRect.y + statusBarOffset,
-                                    width: activeHighlightRect.width,
-                                    height: activeHighlightRect.height,
-                                },
-                            ] })), selecting && (_jsx(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: _jsx(Text, { style: styles.selectionHintText, children: "Drag or tap to find a source" }) }))] })), toastVisible && (_jsx(Animated.View, { pointerEvents: "none", style: [
-                        styles.toast,
-                        {
-                            opacity: toastAnim,
-                            transform: [
-                                {
-                                    translateY: toastAnim.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [-8, 0],
-                                    }),
-                                },
-                            ],
-                        },
-                    ], children: _jsx(Text, { style: styles.toastText, children: "Source location copied" }) }))] }) }));
+    useEffect(() => {
+        return () => {
+            resetGestureState();
+            stopSession();
+        };
+    }, [resetGestureState, stopSession]);
+    return (_jsx(InspectorRootContainer, { children: _jsxs(View, { ref: inspectorRootRef, style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: [_jsx(View, { ref: anchorRef, style: [StyleSheet.absoluteFill, styles.anchor], pointerEvents: "none" }), _jsx(SelectionFab, { visible: idle && selectionPillVisible, onPress: startSelecting, onPressIn: () => animateFabPress(0.96), onPressOut: () => animateFabPress(1), panHandlers: fabPanHandlers, fabAppearAnim: fabAppearAnim, fabPosition: fabPosition, fabPressAnim: fabPressAnim }), _jsx(SelectionOverlay, { visible: overlayVisible, selecting: selecting, overlayRef: overlayRef, panHandlers: selectionPanHandlers, highlightRect: activeHighlightRect, statusBarOffset: statusBarOffset, selectingHintAnim: selectingHintAnim }), _jsx(CopiedToast, { visible: toastVisible, toastAnim: toastAnim })] }) }));
+};
+const SelectionFab = ({ visible, onPress, onPressIn, onPressOut, panHandlers, fabAppearAnim, fabPosition, fabPressAnim, }) => {
+    if (!visible) {
+        return null;
+    }
+    return (_jsx(Animated.View, { ...panHandlers, style: [
+            styles.fab,
+            {
+                opacity: fabAppearAnim,
+                transform: [
+                    { translateX: fabPosition.x },
+                    {
+                        translateY: Animated.add(fabPosition.y, fabAppearAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [8, 0],
+                        })),
+                    },
+                    { scale: fabPressAnim },
+                ],
+            },
+        ], children: _jsx(Pressable, { style: styles.fabInner, onPress: onPress, onPressIn: onPressIn, onPressOut: onPressOut, children: _jsx(Text, { style: styles.fabIcon, allowFontScaling: false, children: "\u2316" }) }) }));
+};
+const SelectionOverlay = ({ visible, selecting, overlayRef, panHandlers, highlightRect, statusBarOffset, selectingHintAnim, }) => {
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(View, { ref: overlayRef, style: styles.overlay, ...(selecting ? panHandlers : {}), children: [highlightRect && (_jsx(View, { pointerEvents: "none", style: [
+                    styles.highlight,
+                    {
+                        left: highlightRect.x,
+                        top: highlightRect.y + statusBarOffset,
+                        width: highlightRect.width,
+                        height: highlightRect.height,
+                    },
+                ] })), selecting && (_jsx(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: _jsx(Text, { style: styles.selectionHintText, children: "Drag or tap to find a source" }) }))] }));
+};
+const CopiedToast = ({ visible, toastAnim }) => {
+    if (!visible) {
+        return null;
+    }
+    return (_jsx(Animated.View, { pointerEvents: "none", style: [
+            styles.toast,
+            {
+                opacity: toastAnim,
+                transform: [
+                    {
+                        translateY: toastAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [-8, 0],
+                        }),
+                    },
+                ],
+            },
+        ], children: _jsx(Text, { style: styles.toastText, children: "Source location copied" }) }));
 };
 const InspectorRootContainer = ({ children }) => {
-    if (Platform.OS === 'ios') {
+    if (Platform.OS === "ios") {
         return _jsx(FullWindowOverlay, { children: children });
     }
     return _jsx(Fragment, { children: children });
@@ -371,75 +460,75 @@ const styles = 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: {
         ...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