react-native-inapp-inspector 2.0.4 → 2.0.6

package/dist/commonjs/components/Inspector/NetworkTab.js

@@ -127,11 +127,105 @@ const FilterChip = react_1.default.memo(({ label, color, Icon, badge, active, on
     </TouchableScale_1.default>);
 });
 const NetworkTab = react_1.default.memo(() => {
-    const { groupedData, search, setSearch, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = (0, InspectorContext_1.useInspector)();
+    const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = (0, InspectorContext_1.useInspector)();
     const { t } = (0, i18n_1.useTranslation)();
     const filtersAccordion = (0, useAccordion_1.default)(false, 300, 260);
     const apisListRef = (0, react_1.useRef)(null);
     const [isSearchFocused, setIsSearchFocused] = react_1.default.useState(false);
+    const quickCounts = (0, react_1.useMemo)(() => {
+        let errorCount = 0;
+        let successCount = 0;
+        let slowCount = 0;
+        let postCount = 0;
+        let getCount = 0;
+        let gqlCount = 0;
+        logs.forEach(l => {
+            const s = typeof l.status === 'number'
+                ? l.status
+                : parseInt(String(l.status), 10);
+            if (l.status === 0 || l.status == null || (!isNaN(s) && s >= 400)) {
+                errorCount++;
+            }
+            else if (!isNaN(s) && s >= 200 && s < 400) {
+                successCount++;
+            }
+            if ((l.duration || 0) >= 500) {
+                slowCount++;
+            }
+            const m = (l.method || '').toUpperCase();
+            if (m === 'POST')
+                postCount++;
+            if (m === 'GET')
+                getCount++;
+            const u = (l.url || '').toLowerCase();
+            const c = (l.client || '').toLowerCase();
+            if (u.includes('graphql') ||
+                c.includes('graphql') ||
+                c.includes('apollo')) {
+                gqlCount++;
+            }
+        });
+        return {
+            all: logs.length,
+            errors: errorCount,
+            success: successCount,
+            slow: slowCount,
+            post: postCount,
+            get: getCount,
+            graphql: gqlCount,
+        };
+    }, [logs]);
+    const QUICK_CHIPS = (0, react_1.useMemo)(() => [
+        {
+            id: 'all',
+            label: 'All',
+            count: quickCounts.all,
+            color: AppColors_1.AppColors.purple,
+        },
+        {
+            id: 'errors',
+            label: 'Errors',
+            count: quickCounts.errors,
+            color: AppColors_1.AppColors.errorColor,
+        },
+        {
+            id: 'success',
+            label: '2xx OK',
+            count: quickCounts.success,
+            color: AppColors_1.AppColors.greenColor,
+        },
+        {
+            id: 'slow',
+            label: 'Slow >500ms',
+            count: quickCounts.slow,
+            color: AppColors_1.AppColors.warningIconGold,
+        },
+        {
+            id: 'POST',
+            label: 'POST',
+            count: quickCounts.post,
+            color: constants_1.METHOD_COLORS.POST || '#3B82F6',
+        },
+        {
+            id: 'GET',
+            label: 'GET',
+            count: quickCounts.get,
+            color: constants_1.METHOD_COLORS.GET || '#10B981',
+        },
+        {
+            id: 'graphql',
+            label: 'GraphQL',
+            count: quickCounts.graphql,
+            color: '#E10098',
+        },
+    ], [quickCounts]);
+    const SEARCH_SCOPES = [
+        { id: 'all', label: 'All' },
+        { id: 'url', label: 'URL / Path' },
+        { id: 'reqBody', label: 'Payload' },
+        { id: 'resBody', label: 'Response' },
+        { id: 'headers', label: 'Headers' },
+    ];
     const QUICK_API_QUERY_TAGS = (0, react_1.useMemo)(() => [
         { label: '⚠️ Failed', query: 'is:error' },
         { label: '🐢 Slow >1s', query: 'slow:>1s' },
@@ -277,6 +371,7 @@ const NetworkTab = react_1.default.memo(() => {
                 </react_native_1.View>
               </react_native_1.View>)}
 
+            {/* Toolbar Row with Search & Actions */}
             <react_native_1.View style={styles_1.default.toolbarRow}>
               <react_native_1.View style={[
                 styles_1.default.searchContainer,
@@ -285,8 +380,65 @@ const NetworkTab = react_1.default.memo(() => {
                     borderWidth: 1.5,
                 },
             ]}>
-                <NetworkIcons_1.SearchIcon color={isSearchFocused ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak} size={16}/>
+                <NetworkIcons_1.SearchIcon color={isSearchFocused
+                ? AppColors_1.AppColors.purple
+                : AppColors_1.AppColors.grayTextWeak} size={15}/>
                 <react_native_1.TextInput placeholder="Search url, body, is:error, slow:>1s..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+
+                {/* Match Case (Aa) & Regex (.*) Quick Toggles */}
+                <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3,
+                marginRight: 2,
+            }}>
+                  <react_native_1.Pressable hitSlop={8} onPress={() => setIsCaseSensitive(prev => !prev)} style={{
+                paddingHorizontal: 4.5,
+                paddingVertical: 2,
+                borderRadius: 4,
+                backgroundColor: isCaseSensitive
+                    ? AppColors_1.AppColors.purple
+                    : 'transparent',
+                borderWidth: 1,
+                borderColor: isCaseSensitive
+                    ? AppColors_1.AppColors.purple
+                    : `${AppColors_1.AppColors.grayBorderSecondary}`,
+            }}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 9.5,
+                color: isCaseSensitive
+                    ? AppColors_1.AppColors.white
+                    : AppColors_1.AppColors.grayTextWeak,
+            }}>
+                      Aa
+                    </react_native_1.Text>
+                  </react_native_1.Pressable>
+
+                  <react_native_1.Pressable hitSlop={8} onPress={() => setIsRegexSearch(prev => !prev)} style={{
+                paddingHorizontal: 4.5,
+                paddingVertical: 2,
+                borderRadius: 4,
+                backgroundColor: isRegexSearch
+                    ? AppColors_1.AppColors.purple
+                    : 'transparent',
+                borderWidth: 1,
+                borderColor: isRegexSearch
+                    ? AppColors_1.AppColors.purple
+                    : `${AppColors_1.AppColors.grayBorderSecondary}`,
+            }}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 9.5,
+                color: isRegexSearch
+                    ? AppColors_1.AppColors.white
+                    : AppColors_1.AppColors.grayTextWeak,
+            }}>
+                      .*
+                    </react_native_1.Text>
+                  </react_native_1.Pressable>
+                </react_native_1.View>
+
                 {search.length > 0 && (<react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -295,19 +447,19 @@ const NetworkTab = react_1.default.memo(() => {
                     <react_native_1.View style={{
                     backgroundColor: `${AppColors_1.AppColors.purple}20`,
                     borderRadius: 10,
-                    paddingHorizontal: 6,
-                    paddingVertical: 2,
+                    paddingHorizontal: 5,
+                    paddingVertical: 1.5,
                 }}>
                       <react_native_1.Text style={{
                     color: AppColors_1.AppColors.purple,
-                    fontSize: 10,
+                    fontSize: 9.5,
                     fontFamily: AppFonts_1.AppFonts.interBold,
                 }}>
                         {filteredLogs.length}
                       </react_native_1.Text>
                     </react_native_1.View>
                     <react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
-                      <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                      <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>
                     </react_native_1.Pressable>
                   </react_native_1.View>)}
               </react_native_1.View>
@@ -356,12 +508,124 @@ const NetworkTab = react_1.default.memo(() => {
               </react_native_1.View>
             </react_native_1.View>
 
+            {/* Quick Filter Horizontal Chips Bar with Live Counts */}
+            <react_native_1.View style={{ marginBottom: 8 }}>
+              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+            }}>
+                {QUICK_CHIPS.map(chip => {
+                const isActive = quickFilter === chip.id;
+                const chipColor = chip.color || AppColors_1.AppColors.purple;
+                return (<TouchableScale_1.default key={chip.id} onPress={() => {
+                        setQuickFilter(isActive ? 'all' : chip.id);
+                    }}>
+                      <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        paddingHorizontal: 9,
+                        paddingVertical: 4.5,
+                        borderRadius: 8,
+                        backgroundColor: isActive
+                            ? chipColor
+                            : `${chipColor}12`,
+                        borderWidth: 1,
+                        borderColor: isActive
+                            ? chipColor
+                            : `${chipColor}30`,
+                        gap: 5,
+                    }}>
+                        <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10.5,
+                        color: isActive
+                            ? AppColors_1.AppColors.white
+                            : AppColors_1.AppColors.primaryBlack,
+                    }}>
+                          {chip.label}
+                        </react_native_1.Text>
+                        <react_native_1.View style={{
+                        backgroundColor: isActive
+                            ? 'rgba(255,255,255,0.25)'
+                            : `${chipColor}20`,
+                        paddingHorizontal: 5,
+                        paddingVertical: 1,
+                        borderRadius: 8,
+                    }}>
+                          <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 9,
+                        color: isActive ? AppColors_1.AppColors.white : chipColor,
+                    }}>
+                            {chip.count}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                      </react_native_1.View>
+                    </TouchableScale_1.default>);
+            })}
+              </react_native_1.ScrollView>
+            </react_native_1.View>
+
+            {/* Search Scope Selector Bar (Visible on search or focus) */}
+            {(isSearchFocused || search.length > 0) && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingHorizontal: 12,
+                    marginBottom: 6,
+                    gap: 6,
+                }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    textTransform: 'uppercase',
+                    letterSpacing: 0.5,
+                }}>
+                  Scope:
+                </react_native_1.Text>
+                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                  {SEARCH_SCOPES.map(s => {
+                    const isSelected = searchScope === s.id;
+                    return (<TouchableScale_1.default key={s.id} onPress={() => setSearchScope(s.id)}>
+                        <react_native_1.View style={{
+                            paddingHorizontal: 7,
+                            paddingVertical: 2.5,
+                            borderRadius: 5,
+                            backgroundColor: isSelected
+                                ? AppColors_1.AppColors.purple
+                                : `${AppColors_1.AppColors.grayBorderSecondary}40`,
+                            borderWidth: 1,
+                            borderColor: isSelected
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayBorderSecondary,
+                        }}>
+                          <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 9.5,
+                            color: isSelected
+                                ? AppColors_1.AppColors.white
+                                : AppColors_1.AppColors.grayText,
+                        }}>
+                            {s.label}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                      </TouchableScale_1.default>);
+                })}
+                </react_native_1.ScrollView>
+              </react_native_1.View>)}
+
             {/* Advanced Search Quick Query Suggestions Bar */}
-            {(isSearchFocused || search.length > 0) && (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 6, maxHeight: 30 }} contentContainerStyle={{
+            {(isSearchFocused || search.length > 0) && (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 8, maxHeight: 28 }} contentContainerStyle={{
                     paddingHorizontal: 12,
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 6,
+                    gap: 5,
                 }}>
                 {QUICK_API_QUERY_TAGS.map(item => {
                     const isSelected = search.includes(item.query);
@@ -374,9 +638,9 @@ const NetworkTab = react_1.default.memo(() => {
                             }
                         }}>
                       <react_native_1.View style={{
-                            paddingHorizontal: 8,
-                            paddingVertical: 3.5,
-                            borderRadius: 6,
+                            paddingHorizontal: 7,
+                            paddingVertical: 2.5,
+                            borderRadius: 5,
                             backgroundColor: isSelected
                                 ? AppColors_1.AppColors.purple
                                 : `${AppColors_1.AppColors.purple}14`,
@@ -387,7 +651,7 @@ const NetworkTab = react_1.default.memo(() => {
                         }}>
                         <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 10,
+                            fontSize: 9.5,
                             color: isSelected
                                 ? AppColors_1.AppColors.white
                                 : AppColors_1.AppColors.purple,
@@ -399,6 +663,47 @@ const NetworkTab = react_1.default.memo(() => {
                 })}
               </react_native_1.ScrollView>)}
 
+            {/* Active Filter Helper Status Bar */}
+            {(quickFilter !== 'all' ||
+                search.trim().length > 0 ||
+                statusFilters.size > 0 ||
+                methodFilters.size > 0 ||
+                filteredLogs.length !== logs.length) && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginHorizontal: 12,
+                    marginBottom: 8,
+                    paddingHorizontal: 10,
+                    paddingVertical: 5.5,
+                    backgroundColor: `${AppColors_1.AppColors.purple}10`,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.purple}25`,
+                }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 10.5,
+                    color: AppColors_1.AppColors.purple,
+                }}>
+                  Showing {filteredLogs.length} of {logs.length} requests
+                </react_native_1.Text>
+                <TouchableScale_1.default onPress={() => {
+                    setSearch('');
+                    setQuickFilter('all');
+                    setStatusFilters(new Set());
+                    setMethodFilters(new Set());
+                }}>
+                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: AppColors_1.AppColors.errorColor,
+                }}>
+                    Clear All Filters
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>)}
+
             <react_native_1.Animated.View style={[
                 filtersAccordion.bodyStyle,
                 { overflow: 'hidden' },

package/dist/commonjs/components/Inspector/NpmUpdateToast.js

@@ -40,20 +40,30 @@ const react_native_svg_1 = __importStar(require("react-native-svg"));
 const InspectorContext_1 = require("./InspectorContext");
 const constants_1 = require("../../constants");
 const NetworkIcons_1 = require("../NetworkIcons");
+const helpers_1 = require("../../helpers");
+const toast_1 = require("../../helpers/toast");
 const CloseSvg = ({ size = 13, color = '#94A3B8' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
   </react_native_svg_1.default>);
-const ExternalLinkSvg = ({ size = 12, color = '#FFFFFF' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+const CopySvg = ({ size = 11, color = '#94A3B8' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const CheckSvg = ({ size = 11, color = '#10B981' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M20 6L9 17l-5-5" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const ExternalLinkSvg = ({ size = 11, color = '#FFFFFF' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     <react_native_svg_1.Path d="M15 3h6v6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     <react_native_svg_1.Path d="M10 14L21 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </react_native_svg_1.default>);
-const TOAST_TIMEOUT_MS = 6500;
+const TOAST_TIMEOUT_MS = 7000;
 const NpmUpdateToast = () => {
     const { updateAvailable, latestNpmVersion, showUpdateToast } = (0, InspectorContext_1.useInspector)();
     const [dismissed, setDismissed] = (0, react_1.useState)(false);
     const [visible, setVisible] = (0, react_1.useState)(false);
-    const translateYAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(50)).current;
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const translateYAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(60)).current;
     const opacityAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const progressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     const timerRef = (0, react_1.useRef)(null);
@@ -96,12 +106,12 @@ const NpmUpdateToast = () => {
         react_native_1.Animated.parallel([
             react_native_1.Animated.timing(opacityAnim, {
                 toValue: 0,
-                duration: 200,
+                duration: 180,
                 useNativeDriver: true,
             }),
             react_native_1.Animated.timing(translateYAnim, {
-                toValue: 50,
-                duration: 200,
+                toValue: 60,
+                duration: 180,
                 useNativeDriver: true,
             }),
         ]).start(() => {
@@ -109,6 +119,14 @@ const NpmUpdateToast = () => {
             setDismissed(true);
         });
     };
+    const handleCopyCommand = () => {
+        (0, helpers_1.copyToClipboard)('npm install react-native-inapp-inspector@latest', 'Install Command');
+        setCopied(true);
+        (0, toast_1.showToast)('Copied npm install command!');
+        setTimeout(() => {
+            setCopied(false);
+        }, 2000);
+    };
     const handleOpenNpm = () => {
         react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
         handleDismiss();
@@ -129,7 +147,7 @@ const NpmUpdateToast = () => {
       <react_native_1.View style={styles.contentRow}>
         {/* Left NPM Badge Icon */}
         <react_native_1.View style={styles.npmIconContainer}>
-          <NetworkIcons_1.NpmIcon size={14} color="#CB3837"/>
+          <NetworkIcons_1.NpmIcon size={15} color="#CB3837"/>
         </react_native_1.View>
 
         {/* Text Details */}
@@ -145,6 +163,14 @@ const NpmUpdateToast = () => {
           </react_native_1.Text>
         </react_native_1.View>
 
+        {/* Copy command quick button */}
+        <react_native_1.TouchableOpacity style={styles.copyButton} onPress={handleCopyCommand} hitSlop={6} activeOpacity={0.75}>
+          {copied ? <CheckSvg size={11} color="#10B981"/> : <CopySvg size={11} color="#94A3B8"/>}
+          <react_native_1.Text style={[styles.copyButtonText, copied && { color: '#10B981' }]}>
+            {copied ? 'Copied' : 'Copy'}
+          </react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+
         {/* Action Button: View */}
         <react_native_1.TouchableOpacity style={styles.actionButton} onPress={handleOpenNpm} activeOpacity={0.8}>
           <react_native_1.Text style={styles.actionButtonText}>View</react_native_1.Text>
@@ -177,37 +203,42 @@ const styles = react_native_1.StyleSheet.create({
     container: {
         position: 'absolute',
         bottom: 24,
-        left: 16,
-        right: 16,
+        left: 14,
+        right: 14,
         backgroundColor: '#0F172A',
         borderRadius: 16,
         borderWidth: 1,
         borderColor: '#334155',
         shadowColor: '#000000',
-        shadowOffset: { width: 0, height: 10 },
-        shadowOpacity: 0.35,
-        shadowRadius: 20,
-        elevation: 20,
+        shadowOffset: { width: 0, height: 12 },
+        shadowOpacity: 0.4,
+        shadowRadius: 24,
+        elevation: 24,
         overflow: 'hidden',
         zIndex: 99999,
     },
     contentRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 14,
-        gap: 10,
+        paddingVertical: 11,
+        paddingHorizontal: 12,
+        gap: 8,
     },
     npmIconContainer: {
         width: 32,
         height: 32,
-        borderRadius: 10,
+        borderRadius: 9,
         backgroundColor: '#FFFFFF',
         justifyContent: 'center',
         alignItems: 'center',
         borderWidth: 1,
-        borderColor: '#CBD5E1',
+        borderColor: '#E2E8F0',
         flexShrink: 0,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.15,
+        shadowRadius: 2,
+        elevation: 2,
     },
     textContainer: {
         flex: 1,
@@ -216,73 +247,91 @@ const styles = react_native_1.StyleSheet.create({
     titleRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 6,
+        gap: 5,
     },
     titleText: {
-        fontSize: 13,
+        fontSize: 12.5,
         fontWeight: '700',
         color: '#F8FAFC',
         letterSpacing: -0.2,
         ...fontStack,
     },
     versionPill: {
-        backgroundColor: '#7C3AED26',
-        paddingHorizontal: 6,
+        backgroundColor: '#7C3AED33',
+        paddingHorizontal: 5.5,
         paddingVertical: 1.5,
-        borderRadius: 6,
+        borderRadius: 5,
         borderWidth: 1,
-        borderColor: '#7C3AED59',
+        borderColor: '#8B5CF680',
     },
     versionPillText: {
-        fontSize: 10.5,
+        fontSize: 10,
         fontWeight: '700',
-        color: '#A78BFA',
+        color: '#C4B5FD',
         ...fontStack,
     },
     subtitleText: {
-        fontSize: 11,
+        fontSize: 10.5,
+        color: '#94A3B8',
+        marginTop: 1,
+        ...fontStack,
+    },
+    copyButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3.5,
+        backgroundColor: '#1E293B',
+        paddingVertical: 5.5,
+        paddingHorizontal: 8,
+        borderRadius: 7,
+        borderWidth: 1,
+        borderColor: '#334155',
+        flexShrink: 0,
+    },
+    copyButtonText: {
+        fontSize: 10.5,
+        fontWeight: '600',
         color: '#94A3B8',
-        marginTop: 1.5,
         ...fontStack,
     },
     actionButton: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 4,
+        gap: 3.5,
         backgroundColor: '#7C3AED',
-        paddingVertical: 6,
-        paddingHorizontal: 10,
-        borderRadius: 8,
+        paddingVertical: 5.5,
+        paddingHorizontal: 9,
+        borderRadius: 7,
         flexShrink: 0,
         shadowColor: '#7C3AED',
         shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.3,
+        shadowOpacity: 0.35,
         shadowRadius: 4,
         elevation: 3,
     },
     actionButtonText: {
-        fontSize: 11.5,
+        fontSize: 11,
         fontWeight: '700',
         color: '#FFFFFF',
         ...fontStack,
     },
     closeButton: {
-        width: 24,
-        height: 24,
-        borderRadius: 12,
+        width: 22,
+        height: 22,
+        borderRadius: 11,
         backgroundColor: '#1E293B',
         justifyContent: 'center',
         alignItems: 'center',
         flexShrink: 0,
     },
     progressBarTrack: {
-        height: 3,
+        height: 2.5,
         width: '100%',
         backgroundColor: '#1E293B',
     },
     progressBarFill: {
         height: '100%',
-        backgroundColor: '#7C3AED',
+        backgroundColor: '#8B5CF6',
     },
 });
 exports.default = exports.NpmUpdateToast;

package/dist/commonjs/components/Inspector/PerformanceHud.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface PerformanceHudProps {
+    visible: boolean;
+    onPress: () => void;
+}
+export declare const PerformanceHud: React.FC<PerformanceHudProps>;
+export default PerformanceHud;