rn-studio 0.1.0 → 0.2.0

package/dist/components/InspectorPanel.js

@@ -39,71 +39,42 @@ const react_native_1 = require("react-native");
 const StudioProvider_1 = require("../StudioProvider");
 const StyleEditor_1 = require("./StyleEditor");
 const ComponentTree_1 = require("./ComponentTree");
-// Reanimated is a declared peer dependency. We attempt to use it for
-// the spring-based slide, falling back to the stock Animated API so the
-// overlay remains functional in environments where reanimated is not
-// yet configured.
-let Reanimated = null;
-let useSharedValue = null;
-let useAnimatedStyle = null;
-let withSpring = null;
-let withTiming = null;
-try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const r = require('react-native-reanimated');
-    Reanimated = r.default;
-    useSharedValue = r.useSharedValue;
-    useAnimatedStyle = r.useAnimatedStyle;
-    withSpring = r.withSpring;
-    withTiming = r.withTiming;
-}
-catch { }
-const { height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
-const PANEL_HEIGHT = SCREEN_HEIGHT * 0.6;
+const SCREEN_HEIGHT = react_native_1.Dimensions.get('window').height;
+const PANEL_HEIGHT = Math.round(SCREEN_HEIGHT * 0.6);
 /**
  * InspectorPanel
  *
  * Bottom sheet shown when a component is selected. Three tabs:
- * Styles | Tree | Props. Slides up with a spring animation.
+ * Styles | Tree | Props. Slides up with a spring animation powered
+ * by the stock `Animated` API — no reanimated dependency, so there's
+ * no worklets babel plugin requirement on the consumer side.
  */
 const InspectorPanel = () => {
     const { selectedComponent, clearSelection } = (0, StudioProvider_1.useStudio)();
     const [tab, setTab] = (0, react_1.useState)('styles');
+    const translateY = (0, react_1.useRef)(new react_native_1.Animated.Value(PANEL_HEIGHT)).current;
     const visible = !!selectedComponent;
-    if (Reanimated && useSharedValue) {
-        return (react_1.default.createElement(ReanimatedPanel, { visible: visible, onDismiss: clearSelection, tab: tab, setTab: setTab }));
-    }
-    // Fallback: render plainly when reanimated is unavailable.
-    if (!visible)
-        return null;
-    return (react_1.default.createElement(react_native_1.View, { style: [styles.panel, { transform: [{ translateY: 0 }] }] },
-        react_1.default.createElement(PanelChrome, { tab: tab, setTab: setTab, onDismiss: clearSelection }),
-        tab === 'styles' && react_1.default.createElement(StyleEditor_1.StyleEditor, null),
-        tab === 'tree' && react_1.default.createElement(ComponentTree_1.ComponentTree, null),
-        tab === 'props' && react_1.default.createElement(PropsView, null)));
-};
-exports.InspectorPanel = InspectorPanel;
-const ReanimatedPanel = ({ visible, onDismiss, tab, setTab }) => {
-    const translateY = useSharedValue(PANEL_HEIGHT);
     (0, react_1.useEffect)(() => {
-        translateY.value = visible
-            ? withSpring(0, { damping: 20, stiffness: 200 })
-            : withTiming(PANEL_HEIGHT, { duration: 220 });
+        react_native_1.Animated.spring(translateY, {
+            toValue: visible ? 0 : PANEL_HEIGHT,
+            useNativeDriver: true,
+            damping: 20,
+            stiffness: 200,
+            mass: 1,
+        }).start();
     }, [visible, translateY]);
-    const animStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: translateY.value }],
-    }));
-    if (!visible)
+    if (!selectedComponent)
         return null;
-    const AnimatedView = Reanimated.View;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_native_1.TouchableOpacity, { activeOpacity: 1, onPress: onDismiss, style: styles.backdrop }),
-        react_1.default.createElement(AnimatedView, { style: [styles.panel, animStyle] },
-            react_1.default.createElement(PanelChrome, { tab: tab, setTab: setTab, onDismiss: onDismiss }),
-            tab === 'styles' && react_1.default.createElement(StyleEditor_1.StyleEditor, null),
-            tab === 'tree' && react_1.default.createElement(ComponentTree_1.ComponentTree, null),
-            tab === 'props' && react_1.default.createElement(PropsView, null))));
+        react_1.default.createElement(react_native_1.TouchableOpacity, { activeOpacity: 1, onPress: clearSelection, style: styles.backdrop }),
+        react_1.default.createElement(react_native_1.Animated.View, { style: [styles.panel, { transform: [{ translateY }] }] },
+            react_1.default.createElement(PanelChrome, { tab: tab, setTab: setTab, onDismiss: clearSelection }),
+            react_1.default.createElement(react_native_1.View, { style: styles.tabBody },
+                tab === 'styles' && react_1.default.createElement(StyleEditor_1.StyleEditor, null),
+                tab === 'tree' && react_1.default.createElement(ComponentTree_1.ComponentTree, null),
+                tab === 'props' && react_1.default.createElement(PropsView, null)))));
 };
+exports.InspectorPanel = InspectorPanel;
 const PanelChrome = ({ tab, setTab, onDismiss }) => {
     const { selectedComponent } = (0, StudioProvider_1.useStudio)();
     return (react_1.default.createElement(react_native_1.View, null,
@@ -118,22 +89,24 @@ const PanelChrome = ({ tab, setTab, onDismiss }) => {
             react_1.default.createElement(TabButton, { label: "Tree", active: tab === 'tree', onPress: () => setTab('tree') }),
             react_1.default.createElement(TabButton, { label: "Props", active: tab === 'props', onPress: () => setTab('props') }))));
 };
-const TabButton = ({ label, active, onPress, }) => (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.tab, active && styles.tabActive], onPress: onPress },
+const TabButton = ({ label, active, onPress }) => (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.tab, active && styles.tabActive], onPress: onPress },
     react_1.default.createElement(react_native_1.Text, { style: [styles.tabText, active && styles.tabTextActive] }, label)));
 const PropsView = () => {
     const { selectedComponent } = (0, StudioProvider_1.useStudio)();
-    if (!selectedComponent) {
-        return (react_1.default.createElement(react_native_1.View, { style: styles.empty },
-            react_1.default.createElement(react_native_1.Text, { style: styles.emptyText }, "No component selected")));
-    }
-    const entries = Object.entries(selectedComponent.props).filter(([k]) => k !== 'style' && k !== 'children' && k !== '__rnStudioSource');
+    if (!selectedComponent)
+        return null;
+    const entries = Object.entries(selectedComponent.props || {}).filter(([k]) => k !== 'style' &&
+        k !== 'children' &&
+        k !== '__rnStudioSource' &&
+        k !== '__source' &&
+        k !== '__self');
     if (!entries.length) {
         return (react_1.default.createElement(react_native_1.View, { style: styles.empty },
             react_1.default.createElement(react_native_1.Text, { style: styles.emptyText }, "No inspectable props")));
     }
-    return (react_1.default.createElement(react_native_1.View, { style: { padding: 16 } }, entries.map(([k, v]) => (react_1.default.createElement(react_native_1.View, { key: k, style: styles.propRow },
+    return (react_1.default.createElement(react_native_1.ScrollView, { style: { flex: 1 }, contentContainerStyle: { padding: 16, paddingBottom: 40 }, showsVerticalScrollIndicator: true }, entries.map(([k, v]) => (react_1.default.createElement(react_native_1.View, { key: k, style: styles.propRow },
         react_1.default.createElement(react_native_1.Text, { style: styles.propKey }, k),
-        react_1.default.createElement(react_native_1.Text, { style: styles.propValue, numberOfLines: 2 }, safeStringify(v)))))));
+        react_1.default.createElement(react_native_1.Text, { style: styles.propValue, numberOfLines: 4 }, safeStringify(v)))))));
 };
 function safeStringify(v) {
     if (v === null)
@@ -175,6 +148,7 @@ const styles = react_native_1.StyleSheet.create({
         shadowOpacity: 0.4,
         shadowRadius: 12,
     },
+    tabBody: { flex: 1, minHeight: 0 },
     handleWrap: { alignItems: 'center', paddingTop: 8 },
     handle: {
         width: 40,
@@ -189,36 +163,13 @@ const styles = react_native_1.StyleSheet.create({
         paddingHorizontal: 16,
         paddingVertical: 12,
     },
-    title: {
-        color: '#fff',
-        fontSize: 16,
-        fontWeight: '700',
-    },
-    close: {
-        color: '#888',
-        fontSize: 18,
-    },
-    tabs: {
-        flexDirection: 'row',
-        backgroundColor: '#1a1a1a',
-    },
-    tab: {
-        flex: 1,
-        paddingVertical: 12,
-        alignItems: 'center',
-    },
-    tabActive: {
-        borderBottomWidth: 2,
-        borderBottomColor: '#C6F135',
-    },
-    tabText: {
-        color: '#888',
-        fontSize: 13,
-        fontWeight: '600',
-    },
-    tabTextActive: {
-        color: '#C6F135',
-    },
+    title: { color: '#fff', fontSize: 16, fontWeight: '700' },
+    close: { color: '#888', fontSize: 18 },
+    tabs: { flexDirection: 'row', backgroundColor: '#1a1a1a' },
+    tab: { flex: 1, paddingVertical: 12, alignItems: 'center' },
+    tabActive: { borderBottomWidth: 2, borderBottomColor: '#7C9BFF' },
+    tabText: { color: '#888', fontSize: 13, fontWeight: '600' },
+    tabTextActive: { color: '#7C9BFF' },
     empty: { padding: 32, alignItems: 'center' },
     emptyText: { color: '#888', fontSize: 13 },
     propRow: {
@@ -226,17 +177,7 @@ const styles = react_native_1.StyleSheet.create({
         borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
         borderBottomColor: '#222',
     },
-    propKey: {
-        color: '#C6F135',
-        fontSize: 12,
-        fontFamily: 'Menlo',
-        fontWeight: '600',
-    },
-    propValue: {
-        color: '#ddd',
-        fontSize: 12,
-        fontFamily: 'Menlo',
-        marginTop: 2,
-    },
+    propKey: { color: '#7C9BFF', fontSize: 12, fontWeight: '600' },
+    propValue: { color: '#ddd', fontSize: 12, marginTop: 2 },
 });
 //# sourceMappingURL=InspectorPanel.js.map

package/dist/components/InspectorPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"InspectorPanel.js","sourceRoot":"","sources":["../../src/components/InspectorPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"InspectorPanel.js","sourceRoot":"","sources":["../../src/components/InspectorPanel.tsx"],"names":[],"mappings":"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"}

package/dist/components/SelectionOverlay.d.ts

@@ -3,13 +3,11 @@ import React from 'react';
  * SelectionOverlay
  *
  * Full-screen overlay that dims the app when selection mode is active
- * and draws a lime-green highlight box around the selected component.
- *
- * Touch resolution strategy: the overlay captures the touch, then asks
- * the UIManager which native view is under the touch point via
- * `findSubviewIn`. From that view ref we walk the fiber tree upwards
- * (see fiberWalker.ts) to find the nearest component with
- * `__rnStudioSource` metadata.
+ * and draws an accent-colored highlight box around the selected
+ * component. Touches are routed via `getInspectorDataForViewAtPoint`
+ * against the app root view (provided by StudioProvider via
+ * `appRootRef`). The nearest user-code fiber is then resolved by
+ * walking the fiber `.return` chain.
  */
 export declare const SelectionOverlay: React.FC;
 //# sourceMappingURL=SelectionOverlay.d.ts.map

package/dist/components/SelectionOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionOverlay.d.ts","sourceRoot":"","sources":["../../src/components/SelectionOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAa3D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAqHpC,CAAC"}
+{"version":3,"file":"SelectionOverlay.d.ts","sourceRoot":"","sources":["../../src/components/SelectionOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA6M3D;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAmHpC,CAAC"}

package/dist/components/SelectionOverlay.js

@@ -37,116 +37,258 @@ exports.SelectionOverlay = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const StudioProvider_1 = require("../StudioProvider");
-const fiberWalker_1 = require("../utils/fiberWalker");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// React Native's built-in inspector data API. Uses the React DevTools
+// hook under the hood and works on both the Fabric and legacy
+// architectures. We import it lazily so consumers that somehow run
+// this file in production don't trip on the dev-only module path.
+let getInspectorDataForViewAtPoint = null;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const mod = require('react-native/src/private/devsupport/devmenu/elementinspector/getInspectorDataForViewAtPoint');
+    getInspectorDataForViewAtPoint = (mod && (mod.default || mod)) || null;
+}
+catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('[rn-studio] Unable to load getInspectorDataForViewAtPoint:', e && e.message);
+}
+function triggerHaptic(type) {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const Haptic = require('react-native-haptic-feedback').default;
+        Haptic.trigger(type, {
+            enableVibrateFallback: false,
+            ignoreAndroidSystemSettings: false,
+        });
+    }
+    catch { }
+}
+function inferStyleType(key, value) {
+    if (typeof value === 'number')
+        return 'number';
+    if (typeof value === 'boolean')
+        return 'boolean';
+    if (typeof value === 'string') {
+        if (/color/i.test(key) ||
+            /^#[0-9a-f]{3,8}$/i.test(value) ||
+            /^rgba?\(/i.test(value) ||
+            /^hsla?\(/i.test(value)) {
+            return 'color';
+        }
+        return 'string';
+    }
+    return 'string';
+}
+function extractStyles(rawStyle) {
+    const flat = (react_native_1.StyleSheet.flatten(rawStyle) || {});
+    const out = [];
+    for (const key of Object.keys(flat)) {
+        const value = flat[key];
+        if (value == null)
+            continue;
+        if (typeof value === 'object')
+            continue; // skip nested (shadowOffset etc.)
+        out.push({ key, value, type: inferStyleType(key, value) });
+    }
+    return out;
+}
+/**
+ * Excludes known library paths so the AST engine only ever rewrites
+ * files in the user's project.
+ */
+function isUserCodePath(file) {
+    if (!file || typeof file !== 'string')
+        return false;
+    if (file.indexOf('/node_modules/') !== -1)
+        return false;
+    if (file.indexOf('react-native/Libraries/') !== -1)
+        return false;
+    if (file.indexOf('react-native/src/') !== -1)
+        return false;
+    if (file === 'unknown' || file === '<anonymous>')
+        return false;
+    return true;
+}
+function sourceFromProps(p, fallbackName) {
+    if (!p)
+        return null;
+    if (p.__rnStudioSource && p.__rnStudioSource.file) {
+        return {
+            file: p.__rnStudioSource.file,
+            line: p.__rnStudioSource.line,
+            column: p.__rnStudioSource.column || 0,
+            componentName: p.__rnStudioSource.componentName || fallbackName || 'Component',
+        };
+    }
+    if (p.__source && p.__source.fileName) {
+        return {
+            file: p.__source.fileName,
+            line: p.__source.lineNumber,
+            column: p.__source.columnNumber || 0,
+            componentName: fallbackName || 'Component',
+        };
+    }
+    return null;
+}
+/**
+ * Walks a fiber's `.return` chain, reading each fiber's own
+ * memoizedProps for a source location. This is the correct strategy
+ * because `getInspectorDataForViewAtPoint`'s `hierarchy` items all
+ * share the deepest host's props, which is useless for mapping back
+ * to user JSX.
+ */
+function walkFiberForUserSource(fiber) {
+    let current = fiber;
+    let libraryFallback = null;
+    let safety = 0;
+    while (current && safety < 200) {
+        safety++;
+        const p = current.memoizedProps;
+        if (p && typeof p === 'object') {
+            const src = sourceFromProps(p, (current.type && (current.type.displayName || current.type.name)) ||
+                null);
+            if (src) {
+                const resolved = {
+                    source: src,
+                    props: p,
+                    componentName: src.componentName,
+                };
+                if (isUserCodePath(src.file))
+                    return resolved;
+                if (!libraryFallback)
+                    libraryFallback = resolved;
+            }
+        }
+        current = current.return;
+    }
+    return libraryFallback;
+}
+/**
+ * Resolve the nearest user-code JSX source location from the data
+ * returned by `getInspectorDataForViewAtPoint`.
+ */
+function resolveSourceFromViewData(viewData) {
+    if (!viewData)
+        return null;
+    if (viewData.closestInstance) {
+        const found = walkFiberForUserSource(viewData.closestInstance);
+        if (found && isUserCodePath(found.source.file))
+            return found;
+        if (found) {
+            // eslint-disable-next-line no-console
+            console.warn('[rn-studio] fiber walk only found library source:', found.source.file);
+        }
+    }
+    const topSrc = sourceFromProps(viewData.props, null);
+    if (topSrc && isUserCodePath(topSrc.file)) {
+        return {
+            source: topSrc,
+            props: (viewData.props || {}),
+            componentName: topSrc.componentName,
+        };
+    }
+    // eslint-disable-next-line no-console
+    console.warn('[rn-studio] no user-code source found; closestInstance?', !!viewData.closestInstance, 'topLevelSrc=', topSrc && topSrc.file);
+    return null;
+}
 /**
  * SelectionOverlay
  *
  * Full-screen overlay that dims the app when selection mode is active
- * and draws a lime-green highlight box around the selected component.
- *
- * Touch resolution strategy: the overlay captures the touch, then asks
- * the UIManager which native view is under the touch point via
- * `findSubviewIn`. From that view ref we walk the fiber tree upwards
- * (see fiberWalker.ts) to find the nearest component with
- * `__rnStudioSource` metadata.
+ * and draws an accent-colored highlight box around the selected
+ * component. Touches are routed via `getInspectorDataForViewAtPoint`
+ * against the app root view (provided by StudioProvider via
+ * `appRootRef`). The nearest user-code fiber is then resolved by
+ * walking the fiber `.return` chain.
  */
 const SelectionOverlay = () => {
     const { isActive, isSelecting, selectedComponent, selectComponent } = (0, StudioProvider_1.useStudio)();
-    const rootRef = (0, react_1.useRef)(null);
     const [highlight, setHighlight] = (0, react_1.useState)(null);
     const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const borderOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     (0, react_1.useEffect)(() => {
         react_native_1.Animated.timing(opacity, {
-            toValue: isActive ? 1 : 0,
+            toValue: isActive ? 0.3 : 0,
             duration: 200,
             useNativeDriver: true,
         }).start();
     }, [isActive, opacity]);
     (0, react_1.useEffect)(() => {
-        if (selectedComponent) {
-            react_native_1.Animated.timing(borderOpacity, {
-                toValue: 1,
-                duration: 150,
-                useNativeDriver: true,
-            }).start();
-        }
-        else {
-            borderOpacity.setValue(0);
-        }
-    }, [selectedComponent, borderOpacity]);
+        if (!selectedComponent)
+            setHighlight(null);
+    }, [selectedComponent]);
     const handleTouch = (evt) => {
         if (!isSelecting)
-            return false;
+            return;
         const { pageX, pageY } = evt.nativeEvent;
-        const rootHandle = (0, react_native_1.findNodeHandle)(rootRef.current);
-        if (!rootHandle)
-            return true;
-        // findSubviewIn gives us the native view at a point. Then we climb
-        // the fiber tree to locate the nearest source-annotated owner.
+        const appRoot = StudioProvider_1.appRootRef && StudioProvider_1.appRootRef.current;
+        if (!getInspectorDataForViewAtPoint || !appRoot) {
+            // eslint-disable-next-line no-console
+            console.warn('[rn-studio] inspector API or app root ref not available', {
+                hasAPI: !!getInspectorDataForViewAtPoint,
+                hasRoot: !!appRoot,
+            });
+            return;
+        }
         try {
-            react_native_1.UIManager.findSubviewIn(rootHandle, [pageX, pageY, 1, 1], (_nativeX, _nativeY, _w, _h, tag) => {
-                if (!tag)
-                    return;
-                const fiber = (0, fiberWalker_1.fiberFromRef)({ stateNode: { _nativeTag: tag } });
-                // Most RN versions expose the fiber via private keys on the
-                // underlying view component instance; the walker defensively
-                // searches for them. If no fiber is found we still draw a
-                // placeholder highlight at the touch location.
-                let owner = null;
-                if (fiber)
-                    owner = (0, fiberWalker_1.findSourceOwner)(fiber);
-                if (owner) {
-                    const node = (0, fiberWalker_1.buildComponentNode)(owner.fiber, owner.source);
-                    selectComponent(node);
+            getInspectorDataForViewAtPoint(appRoot, pageX, pageY, (viewData) => {
+                if (!viewData)
+                    return false;
+                const resolved = resolveSourceFromViewData(viewData);
+                if (!resolved) {
+                    if (viewData.frame) {
+                        setHighlight({
+                            x: viewData.frame.left,
+                            y: viewData.frame.top,
+                            width: viewData.frame.width,
+                            height: viewData.frame.height,
+                        });
+                    }
+                    return true;
+                }
+                const nodeStyles = extractStyles(resolved.props.style);
+                const node = {
+                    id: `${resolved.source.file}:${resolved.source.line}:${resolved.source.column}`,
+                    componentName: resolved.componentName,
+                    source: resolved.source,
+                    props: resolved.props,
+                    styles: nodeStyles,
+                    children: [],
+                };
+                if (viewData.frame) {
+                    setHighlight({
+                        x: viewData.frame.left,
+                        y: viewData.frame.top,
+                        width: viewData.frame.width,
+                        height: viewData.frame.height,
+                    });
                 }
-                // Draw highlight at touch point (approximate). A production
-                // implementation would call measureInWindow on the resolved
-                // native component for a pixel-perfect box.
-                setHighlight({
-                    x: pageX - 30,
-                    y: pageY - 30,
-                    width: 60,
-                    height: 60,
-                });
+                selectComponent(node);
+                triggerHaptic('impactMedium');
+                return true;
             });
         }
-        catch {
-            // UIManager.findSubviewIn is not available on every platform; in
-            // that case we still acknowledge the touch so the user gets
-            // feedback.
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.warn('[rn-studio] hit-test error:', err && err.message);
         }
-        triggerHaptic('impactMedium');
-        return true;
     };
     if (!isActive)
         return null;
-    const { width, height } = react_native_1.Dimensions.get('window');
-    return (react_1.default.createElement(react_native_1.View, { ref: rootRef, pointerEvents: isSelecting ? 'box-only' : 'none', style: react_native_1.StyleSheet.absoluteFill, onStartShouldSetResponder: () => isSelecting, onResponderGrant: handleTouch },
+    return (react_1.default.createElement(react_native_1.View, { pointerEvents: isSelecting ? 'box-only' : 'none', style: react_native_1.StyleSheet.absoluteFill, onStartShouldSetResponder: () => isSelecting, onResponderGrant: handleTouch },
         react_1.default.createElement(react_native_1.Animated.View, { pointerEvents: "none", style: [
                 react_native_1.StyleSheet.absoluteFill,
-                { backgroundColor: 'rgba(0,0,0,0.3)', opacity },
+                { backgroundColor: '#000', opacity },
             ] }),
-        highlight && (react_1.default.createElement(react_native_1.Animated.View, { pointerEvents: "none", style: {
+        highlight && (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: {
                 position: 'absolute',
                 left: highlight.x,
                 top: highlight.y,
                 width: highlight.width,
                 height: highlight.height,
                 borderWidth: 2,
-                borderColor: '#C6F135',
+                borderColor: '#7C9BFF',
                 borderRadius: 4,
-                opacity: borderOpacity,
-            } })),
-        react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: { position: 'absolute', width, height } })));
+            } }))));
 };
 exports.SelectionOverlay = SelectionOverlay;
-function triggerHaptic(type) {
-    try {
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        const Haptic = require('react-native-haptic-feedback').default;
-        Haptic.trigger(type, { enableVibrateFallback: false, ignoreAndroidSystemSettings: false });
-    }
-    catch { }
-}
 //# sourceMappingURL=SelectionOverlay.js.map