react-native-inapp-inspector 1.1.28 → 1.1.29

package/dist/esm/components/LogCard.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, View, Pressable, Text, StyleSheet } from 'react-native';
+import { Alert, Animated, Linking, View, Pressable, Text, StyleSheet, } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { AppColors } from '../styles/AppColors';
 import { METHOD_COLORS } from '../constants';
-import { getStatusColor, getDurationColor, getPath, getBaseUrl, formatDateTime, getSize, } from '../helpers';
+import { getStatusColor, getDurationColor, formatDateTime, getSize, } from '../helpers';
 import { CalendarIcon, ClockIcon, SizeIcon } from './NetworkIcons';
 import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
@@ -13,6 +13,27 @@ import { useTranslation } from '../i18n';
 const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, }) {
     const { t } = useTranslation();
     const methodColor = METHOD_COLORS[item.method] ?? METHOD_COLORS.ALL;
+    const handleOpenUrl = (e) => {
+        e?.stopPropagation?.();
+        Alert.alert(t('common.openInBrowser') || 'Open in Browser', `${t('common.openInBrowserPrompt') || 'Are you sure you want to open this URL in your external browser?'}\n\n${item.url}`, [
+            { text: t('common.cancel') || 'Cancel', style: 'cancel' },
+            {
+                text: t('common.open') || 'Open',
+                onPress: () => {
+                    Linking.canOpenURL(item.url)
+                        .then(supported => {
+                        if (supported) {
+                            Linking.openURL(item.url);
+                        }
+                        else {
+                            Linking.openURL(item.url).catch(() => { });
+                        }
+                    })
+                        .catch(() => { });
+                },
+            },
+        ]);
+    };
     const isFailed = item.status === 0 || (item.status != null && item.status >= 400);
     const isLoading = item.status == null;
     const statusColor = getStatusColor(item.status);
@@ -38,10 +59,6 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             }).start();
         }
     }, [isNew]);
-    const path = getPath(item.url);
-    const baseUrl = getBaseUrl(item.url) || item.url;
-    const slug = path && path !== '/' ? path : item.url;
-    const showSlug = slug !== baseUrl && slug !== item.url;
     const triggeredAt = formatDateTime(item.startTime);
     const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
     return (<TouchableScale onPress={onPress} style={[
@@ -52,7 +69,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             },
         ]}>
       <View style={styles.cardBody}>
-        {/* Row 1: Header (Checkbox, Serial, Method Badge, Base URL / Host with HTTPS, Status Pill) */}
+        {/* Row 1: Header (Checkbox, Serial, Method Badge, Client Tag, Status Pill) */}
         <View style={styles.cardHeaderRow}>
           <View style={styles.cardHeaderLeft}>
             <Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
@@ -112,7 +129,82 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                 </Text>
               </View>)}
 
-            <HighlightText text={baseUrl || item.url} search={searchStr} style={styles.cardHostText} highlightStyle={styles.highlight} numberOfLines={1} ellipsizeMode="tail"/>
+            {/* Protocol / HTTPS Badge */}
+            <View style={[
+            styles.chip,
+            {
+                backgroundColor: item.url.toLowerCase().startsWith('https')
+                    ? '#ECFDF5'
+                    : '#FFFBEB',
+                borderColor: item.url.toLowerCase().startsWith('https')
+                    ? '#A7F3D0'
+                    : '#FDE68A',
+                paddingHorizontal: 4,
+                paddingVertical: 1,
+                borderRadius: 4,
+            },
+        ]}>
+              <Text style={[
+            styles.chipText,
+            {
+                fontFamily: AppFonts.interBold,
+                fontSize: 8,
+                color: item.url.toLowerCase().startsWith('https')
+                    ? '#059669'
+                    : '#D97706',
+            },
+        ]}>
+                {item.url.toLowerCase().startsWith('https') ? 'HTTPS' : 'HTTP'}
+              </Text>
+            </View>
+
+            {/* GraphQL Indicator */}
+            {(item.url.toLowerCase().includes('graphql') ||
+            item.client === 'apollo' ||
+            item.client === 'graphql') && (<View style={[
+                styles.chip,
+                {
+                    backgroundColor: '#FDF2F8',
+                    borderColor: '#FBCFE8',
+                    paddingHorizontal: 4,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                },
+            ]}>
+                <Text style={[
+                styles.chipText,
+                {
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 8,
+                    color: '#DB2777',
+                },
+            ]}>
+                  GQL
+                </Text>
+              </View>)}
+
+            {/* In-Line Duration / Latency Pill */}
+            {item.duration != null && !isFailed && (<View style={[
+                styles.chip,
+                {
+                    backgroundColor: `${durationColor}12`,
+                    borderColor: `${durationColor}2E`,
+                    paddingHorizontal: 4.5,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                },
+            ]}>
+                <Text style={[
+                styles.chipText,
+                {
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: durationColor,
+                },
+            ]}>
+                  {item.duration}ms
+                </Text>
+              </View>)}
           </View>
 
           <View style={[
@@ -149,12 +241,12 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
           </View>
         </View>
 
-        {/* Row 2: Full URL Capsule Container */}
+        {/* Row 2: Full URL Capsule Container (Clickable with link prompt) */}
         <View style={styles.cardSlugBox}>
-          <View style={styles.slugLeft}>
-            <Text style={styles.slugTag}>URL</Text>
-            <HighlightText text={item.url} search={searchStr} style={styles.slugText} highlightStyle={styles.highlight} numberOfLines={2} ellipsizeMode="middle"/>
-          </View>
+          <Pressable onPress={handleOpenUrl} style={styles.slugLeft} hitSlop={6}>
+            <Text style={styles.slugTag}>URL ↗</Text>
+            <HighlightText text={item.url} search={searchStr} style={[styles.slugText, { color: AppColors.skyBlue, textDecorationLine: 'underline' }]} highlightStyle={styles.highlight} numberOfLines={2} ellipsizeMode="middle"/>
+          </Pressable>
 
           <View style={styles.slugRight}>
             {isJson && (<View style={[

package/dist/esm/components/Toast.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Toast: React.MemoExoticComponent<() => React.JSX.Element>;
+export default Toast;

package/dist/esm/components/Toast.js

@@ -0,0 +1,117 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Animated, StyleSheet, Text, View, Platform } from 'react-native';
+import { subscribeToast } from '../helpers/toast';
+import { CheckIcon } from './NetworkIcons';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+const Toast = React.memo(() => {
+    const [toastMessage, setToastMessage] = useState(null);
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+    const translateYAnim = useRef(new Animated.Value(20)).current;
+    const hideTimerRef = useRef(null);
+    useEffect(() => {
+        const unsubscribe = subscribeToast((message) => {
+            if (hideTimerRef.current) {
+                clearTimeout(hideTimerRef.current);
+            }
+            setToastMessage(message);
+            Animated.parallel([
+                Animated.timing(opacityAnim, {
+                    toValue: 1,
+                    duration: 180,
+                    useNativeDriver: true,
+                }),
+                Animated.spring(translateYAnim, {
+                    toValue: 0,
+                    tension: 80,
+                    friction: 8,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+            hideTimerRef.current = setTimeout(() => {
+                Animated.parallel([
+                    Animated.timing(opacityAnim, {
+                        toValue: 0,
+                        duration: 200,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(translateYAnim, {
+                        toValue: 20,
+                        duration: 200,
+                        useNativeDriver: true,
+                    }),
+                ]).start(() => {
+                    setToastMessage(null);
+                });
+            }, 2000);
+        });
+        return () => {
+            unsubscribe();
+            if (hideTimerRef.current) {
+                clearTimeout(hideTimerRef.current);
+            }
+        };
+    }, [opacityAnim, translateYAnim]);
+    if (!toastMessage) {
+        return null;
+    }
+    return (<Animated.View pointerEvents="none" style={[
+            styles.toastContainer,
+            {
+                opacity: opacityAnim,
+                transform: [{ translateY: translateYAnim }],
+            },
+        ]}>
+      <View style={styles.toastCard}>
+        <View style={styles.iconCircle}>
+          <CheckIcon color={AppColors.white} size={11}/>
+        </View>
+        <Text style={styles.toastText} numberOfLines={2}>
+          {toastMessage}
+        </Text>
+      </View>
+    </Animated.View>);
+});
+const styles = StyleSheet.create({
+    toastContainer: {
+        position: 'absolute',
+        bottom: Platform.OS === 'ios' ? 44 : 28,
+        left: 20,
+        right: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 999999,
+    },
+    toastCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#0F172AEE', // dark slate glass
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderRadius: 24,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 6 },
+        shadowOpacity: 0.28,
+        shadowRadius: 10,
+        elevation: 8,
+        borderWidth: 1,
+        borderColor: '#33415588',
+        maxWidth: '90%',
+        gap: 9,
+    },
+    iconCircle: {
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        backgroundColor: AppColors.greenColor,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    toastText: {
+        color: AppColors.white,
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        letterSpacing: -0.1,
+    },
+});
+export default Toast;

package/dist/esm/components/TouchableScale.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 declare const TouchableScale: React.NamedExoticComponent<{
     onPress?: () => void;
+    onLongPress?: () => void;
     style?: any;
     children?: React.ReactNode;
     hitSlop?: any;

package/dist/esm/components/TouchableScale.js

@@ -1,8 +1,8 @@
 import React, { useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Platform } from 'react-native';
-const TouchableScale = React.memo(function TouchableScale({ onPress, style, children, hitSlop, disabled, }) {
+const TouchableScale = React.memo(function TouchableScale({ onPress, onLongPress, style, children, hitSlop, disabled, }) {
     if (Platform.OS === 'android') {
-        return (<Pressable disabled={disabled} onPress={onPress} hitSlop={hitSlop} style={({ pressed }) => [
+        return (<Pressable disabled={disabled} onPress={onPress} onLongPress={onLongPress} hitSlop={hitSlop} style={({ pressed }) => [
                 style,
                 { opacity: pressed ? 0.75 : 1 },
             ]}>
@@ -38,7 +38,7 @@ const TouchableScale = React.memo(function TouchableScale({ onPress, style, chil
         flexShrink: flattenedStyle.flexShrink,
         gap: flattenedStyle.gap,
     };
-    return (<Pressable disabled={disabled} style={style} onPressIn={() => animatePress(true)} onPressOut={() => animatePress(false)} onPress={onPress} hitSlop={hitSlop}>
+    return (<Pressable disabled={disabled} style={style} onPressIn={() => animatePress(true)} onPressOut={() => animatePress(false)} onPress={onPress} onLongPress={onLongPress} hitSlop={hitSlop}>
       <Animated.View style={[{ opacity, transform: [{ scale }] }, layoutStyle]}>
         {children}
       </Animated.View>

package/dist/esm/components/TreeNode.js

@@ -8,7 +8,7 @@ import { ChevronIcon, DocIcon } from './NetworkIcons';
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
 const TreeNode = React.memo(function TreeNode({ data, name, level = 0, search, forceOpen, defaultExpandDepth, }) {
-    const [localOpen, setLocalOpen] = useState(forceOpen || level < (defaultExpandDepth ?? 1));
+    const [localOpen, setLocalOpen] = useState(forceOpen || (defaultExpandDepth !== undefined ? level < defaultExpandDepth : false));
     const open = localOpen;
     const isObject = typeof data === 'object' && data !== null;
     const isArray = Array.isArray(data);

package/dist/esm/constants/index.js

@@ -9,12 +9,12 @@ export const STATUS_FILTERS = [
     'Failed',
 ];
 export const METHOD_COLORS = {
-    ALL: AppColors.grayText,
-    GET: AppColors.purple,
-    POST: AppColors.greenColor,
-    PUT: AppColors.lightOrange,
-    PATCH: AppColors.offerPurple,
-    DELETE: AppColors.errorColor,
+    ALL: '#64748B', // Slate
+    GET: '#059669', // Emerald
+    POST: '#2563EB', // Royal Blue
+    PUT: '#D97706', // Amber Gold
+    PATCH: '#7C3AED', // Rich Violet
+    DELETE: '#DC2626', // Crimson Red
 };
 export const DOMAIN_COLORS = AppColors.domainColors;
 export const DURATION_FAST_MS = 200;

package/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.28";
+export declare const LIB_VERSION = "1.1.29";

package/dist/esm/constants/version.js

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '1.1.28';
+export const LIB_VERSION = '1.1.29';

package/dist/esm/helpers/index.d.ts

@@ -1,6 +1,7 @@
 import { NetworkLog, RouteInfo, DiffResult, JsonContent, StackFrameType } from '../types';
 export declare const getDomainColor: (domain: string) => string;
 export declare const formatDateTime: (timestamp: number) => string;
+export declare const formatTimestamp: (timestamp: number) => string;
 export declare const getStatusColor: (status: number | null) => string;
 export declare const getDurationColor: (duration: number | null) => string;
 export declare const getSize: (data: unknown) => string;
@@ -44,6 +45,7 @@ export interface ParsedStackFrame {
     frameType: StackFrameType | 'app' | 'dependency' | 'runtime' | 'native';
     isUserCode: boolean;
     isRuntimeNoise: boolean;
+    rawFilePath?: string;
     lineNumber?: string;
     columnNumber?: string;
     isOrigin?: boolean;
@@ -51,6 +53,8 @@ export interface ParsedStackFrame {
 }
 /** Parses a stack trace line to extract function name, file name, extension (.tsx/.jsx/.ts), line, and column numbers */
 export declare const parseStackLine: (rawLine: string, isOrigin?: boolean) => ParsedStackFrame;
+/** Opens a file and line number directly in VS Code */
+export declare const openInVSCode: (filePath: string, lineNumber?: string | number, columnNumber?: string | number) => void;
 export declare const ANALYTICS_EVENT_PALETTE: string[];
 export declare const getEventColor: (name: string) => string;
 export { getEventCategory, registerGAPlugin, type GAEventCategory, type GAPlugin, } from './gaAnalyticsRegistry';

package/dist/esm/helpers/index.js

@@ -1,4 +1,6 @@
-import { Clipboard, Platform, ToastAndroid, Alert, NativeModules, Linking, TurboModuleRegistry, } from 'react-native';
+import { Platform, ToastAndroid, Alert, NativeModules, Linking, } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { showToast } from './toast';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 // Constants
@@ -23,6 +25,19 @@ export const formatDateTime = (timestamp) => {
     const seconds = pad(date.getSeconds());
     return `${day}/${month}/${year}  ${hours}:${minutes}:${seconds}`;
 };
+export const formatTimestamp = (timestamp) => {
+    try {
+        const date = new Date(timestamp);
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        const seconds = date.getSeconds().toString().padStart(2, '0');
+        const ms = date.getMilliseconds().toString().padStart(3, '0');
+        return `${hours}:${minutes}:${seconds}.${ms}`;
+    }
+    catch {
+        return '—';
+    }
+};
 export const getStatusColor = (status) => {
     if (!status || status === 0)
         return AppColors.errorColor;
@@ -52,104 +67,43 @@ export const getSize = (data) => {
         return '—';
     }
 };
-// Safely detect and load clipboard natively without static require() calls that Metro fails on
-const getClipboardModule = () => {
-    // 1. Check our built-in native module (NetworkInspectorModule)
-    try {
-        const tmReg = TurboModuleRegistry || globalThis.__turboModuleProxy;
-        const inspectorMod = NativeModules?.NetworkInspectorModule ||
-            (tmReg?.get ? tmReg.get('NetworkInspectorModule') : null);
-        if (inspectorMod && typeof inspectorMod.copyToClipboard === 'function') {
-            return {
-                setString: (str) => inspectorMod.copyToClipboard(str),
-                setStringAsync: (str) => inspectorMod.copyToClipboard(str),
-            };
-        }
+export const copyToClipboard = (value, label) => {
+    const resolved = typeof value === 'function' ? value() : value;
+    let textToCopy = '';
+    if (typeof resolved === 'string') {
+        textToCopy = resolved;
     }
-    catch { }
-    // 2. Check TurboModuleRegistry (TurboModules / New Architecture)
-    try {
-        const tmReg = TurboModuleRegistry || globalThis.__turboModuleProxy;
-        if (tmReg?.get) {
-            const tm = tmReg.get('RNCClipboard') ||
-                tmReg.get('NativeClipboard') ||
-                tmReg.get('ExpoClipboard');
-            if (tm &&
-                (typeof tm.setString === 'function' ||
-                    typeof tm.setStringAsync === 'function')) {
-                return tm;
-            }
+    else {
+        try {
+            textToCopy = JSON.stringify(resolved, null, 2);
+        }
+        catch {
+            textToCopy = String(resolved);
         }
     }
-    catch { }
-    // 3. Check legacy NativeModules table (Bridge / Old Architecture)
+    // Use @react-native-clipboard/clipboard npm package
     try {
-        if (NativeModules?.RNCClipboard &&
-            typeof NativeModules.RNCClipboard.setString === 'function') {
-            return NativeModules.RNCClipboard;
-        }
-        if (NativeModules?.ExpoClipboard &&
-            typeof NativeModules.ExpoClipboard.setStringAsync === 'function') {
-            return NativeModules.ExpoClipboard;
+        if (typeof Clipboard?.setString === 'function') {
+            Clipboard.setString(textToCopy);
         }
-        if (NativeModules?.Clipboard &&
-            typeof NativeModules.Clipboard.setString === 'function') {
-            return NativeModules.Clipboard;
+        else if (typeof Clipboard?.default?.setString === 'function') {
+            Clipboard.default.setString(textToCopy);
         }
     }
-    catch { }
-    // 4. Check legacy React Native core Clipboard
-    try {
-        if (Clipboard && typeof Clipboard.setString === 'function') {
-            return Clipboard;
+    catch (err) {
+        if (__DEV__) {
+            console.warn('[NetworkInspector] Clipboard.setString failed:', err);
         }
     }
-    catch { }
-    return null;
-};
-export const copyToClipboard = (value, label) => {
-    const resolved = typeof value === 'function' ? value() : value;
-    const text = typeof resolved === 'string' ? resolved : JSON.stringify(resolved, null, 2);
-    const textToCopy = text ?? '';
-    let copied = false;
+    // Trigger floating in-app bottom toast notification
     try {
-        const cb = getClipboardModule();
-        if (cb) {
-            if (typeof cb.setStringAsync === 'function') {
-                cb.setStringAsync(textToCopy);
-                copied = true;
-            }
-            else if (typeof cb.setString === 'function') {
-                cb.setString(textToCopy);
-                copied = true;
-            }
-        }
+        showToast(label ? `${label} copied to clipboard` : 'Copied to clipboard');
     }
     catch { }
-    // Built-in native module direct invocation
-    if (!copied) {
-        try {
-            const inspectorMod = NativeModules?.NetworkInspectorModule;
-            if (inspectorMod && typeof inspectorMod.copyToClipboard === 'function') {
-                inspectorMod.copyToClipboard(textToCopy);
-                copied = true;
-            }
-        }
-        catch { }
-    }
-    if (!copied) {
-        try {
-            if (typeof navigator !== 'undefined' && navigator?.clipboard?.writeText) {
-                navigator.clipboard.writeText(textToCopy);
-                copied = true;
-            }
-        }
-        catch { }
-    }
-    // Visual toast feedback on Android if ToastAndroid exists
+    // Native Android Toast fallback
     try {
         if (Platform.OS === 'android' && ToastAndroid?.show) {
-            ToastAndroid.show(`${label} copied`, ToastAndroid.SHORT);
+            ToastAndroid.show(label ? `${label} copied to clipboard` : 'Copied to clipboard', ToastAndroid.SHORT);
         }
     }
     catch { }
@@ -535,11 +489,16 @@ export const parseStackLine = (rawLine, isOrigin = false) => {
         (functionName === 'next' && isNative);
     const isDependency = cleanPath.includes('node_modules') ||
         cleanPath.includes('react-native/Libraries') ||
-        (cleanPath.includes('react-native-inapp-inspector') && !cleanPath.includes('/example/'));
+        (cleanPath.includes('react-native-inapp-inspector') &&
+            !cleanPath.includes('/example/'));
     const isUserCode = !isNative &&
         !isInternalBytecode &&
         !isDependency &&
-        (fileExt === 'tsx' || fileExt === 'jsx' || fileExt === 'ts' || fileExt === 'js' || !fileName.includes('.bundle'));
+        (fileExt === 'tsx' ||
+            fileExt === 'jsx' ||
+            fileExt === 'ts' ||
+            fileExt === 'js' ||
+            !fileName.includes('.bundle'));
     const frameType = isUserCode
         ? 'app'
         : isDependency
@@ -547,7 +506,10 @@ export const parseStackLine = (rawLine, isOrigin = false) => {
             : isNative
                 ? 'native'
                 : 'runtime';
-    const isRuntimeNoise = isInternalBytecode || isNative || functionName === 'asyncGeneratorStep' || functionName === '_next';
+    const isRuntimeNoise = isInternalBytecode ||
+        isNative ||
+        functionName === 'asyncGeneratorStep' ||
+        functionName === '_next';
     // Format clean relative project path
     let relativePath = cleanPath;
     if (relativePath.includes('/example/')) {
@@ -567,6 +529,7 @@ export const parseStackLine = (rawLine, isOrigin = false) => {
         functionName,
         fileName,
         fullPath: relativePath,
+        rawFilePath: fullPath,
         fileExt,
         frameType,
         isUserCode,
@@ -577,6 +540,30 @@ export const parseStackLine = (rawLine, isOrigin = false) => {
         copyableLocation,
     };
 };
+/** Opens a file and line number directly in VS Code */
+export const openInVSCode = (filePath, lineNumber, columnNumber) => {
+    const line = lineNumber ? `:${lineNumber}` : '';
+    const col = columnNumber ? `:${columnNumber}` : '';
+    const cleanPath = filePath.replace(/^file:\/\//, '');
+    const vscodeUrl = `vscode://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+    Linking.canOpenURL(vscodeUrl)
+        .then(supported => {
+        if (supported) {
+            Linking.openURL(vscodeUrl);
+        }
+        else {
+            Linking.openURL(vscodeUrl).catch(() => {
+                const insidersUrl = `vscode-insiders://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+                Linking.openURL(insidersUrl).catch(() => {
+                    Alert.alert('Open in VS Code', `Target location:\n${cleanPath}${line}${col}\n\nPlease ensure VS Code is installed.`, [{ text: 'OK' }]);
+                });
+            });
+        }
+    })
+        .catch(() => {
+        Linking.openURL(vscodeUrl).catch(() => { });
+    });
+};
 // ─── Analytics Helpers ────────────────────────────────────────────────────────
 export const ANALYTICS_EVENT_PALETTE = [
     AppColors.googleBlue,
@@ -631,7 +618,11 @@ export const getCategoryColors = (category) => {
 export const getRuntimeDiagnostics = () => {
     const isHermes = typeof global.HermesInternal !== 'undefined';
     const isV8 = typeof global._v8runtime !== 'undefined';
-    const engineType = isHermes ? 'hermes' : isV8 ? 'v8' : 'jsc';
+    const engineType = isHermes
+        ? 'hermes'
+        : isV8
+            ? 'v8'
+            : 'jsc';
     const isFabric = typeof global.nativeFabricUIManager !== 'undefined' ||
         Boolean(global.__turboModuleProxy);
     const archType = isFabric ? 'fabric' : 'paper';
@@ -641,11 +632,14 @@ export const getRuntimeDiagnostics = () => {
         const hermesStats = global.HermesInternal?.getInstrumentedStats?.();
         if (hermesStats?.js_heap_size) {
             usedHeapMb = Number((hermesStats.js_heap_size / (1024 * 1024)).toFixed(1));
-            totalAllocMb = Number(((hermesStats.js_allocated_bytes || hermesStats.js_heap_size * 1.6) / (1024 * 1024)).toFixed(1));
+            totalAllocMb = Number(((hermesStats.js_allocated_bytes || hermesStats.js_heap_size * 1.6) /
+                (1024 * 1024)).toFixed(1));
         }
         else if (global.performance?.memory?.usedJSHeapSize) {
-            usedHeapMb = Number((global.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1));
-            totalAllocMb = Number((global.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1));
+            usedHeapMb = Number((global.performance.memory.usedJSHeapSize /
+                (1024 * 1024)).toFixed(1));
+            totalAllocMb = Number((global.performance.memory.totalJSHeapSize /
+                (1024 * 1024)).toFixed(1));
         }
     }
     catch { }

package/dist/esm/helpers/toast.d.ts

@@ -0,0 +1,4 @@
+type ToastListener = (message: string) => void;
+export declare const showToast: (message: string) => void;
+export declare const subscribeToast: (listener: ToastListener) => () => void;
+export {};

package/dist/esm/helpers/toast.js

@@ -0,0 +1,15 @@
+const listeners = new Set();
+export const showToast = (message) => {
+    listeners.forEach(fn => {
+        try {
+            fn(message);
+        }
+        catch { }
+    });
+};
+export const subscribeToast = (listener) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};

package/dist/esm/i18n/locales/en.json

@@ -15,7 +15,10 @@
         "expandAll": "Expand All",
         "viewOnNpm": "View on NPM",
         "later": "Later",
-        "source": "SOURCE"
+        "source": "SOURCE",
+        "open": "Open",
+        "openInBrowser": "Open in Browser",
+        "openInBrowserPrompt": "Are you sure you want to open this URL in your external browser?"
     },
     "header": {
         "updateAvailableTitle": "Update Available",