react-native-inapp-inspector 2.0.0 → 2.0.2

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

@@ -89,6 +89,8 @@ const ConsoleTab = react_1.default.memo(() => {
         </react_native_1.Text>);
         }
     }, [visibleConsoleLogs.length, filteredConsoleLogs.length, logFilters]);
+    const [isSearchFocused, setIsSearchFocused] = react_1.default.useState(false);
+    const QUICK_TAG_SUGGESTIONS = (0, react_1.useMemo)(() => ['[AXIOS]', '[API]', '[REDUX]', '[ANALYTICS]', '[AUTH]', '[WARN]', '[ERROR]'], []);
     return (<react_native_1.View style={{ flex: 1 }}>
       <react_native_1.View style={{
             backgroundColor: AppColors_1.AppColors.white,
@@ -100,12 +102,38 @@ const ConsoleTab = react_1.default.memo(() => {
             styles_1.default.toolbarRow,
             { marginTop: 12, marginBottom: 8 },
         ]}>
-          <react_native_1.View style={styles_1.default.searchContainer}>
-            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
-            <react_native_1.TextInput placeholder={t('console.searchPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {logSearch.length > 0 && (<react_native_1.Pressable onPress={() => setLogSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
-                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-              </react_native_1.Pressable>)}
+          <react_native_1.View style={[
+            styles_1.default.searchContainer,
+            isSearchFocused && {
+                borderColor: AppColors_1.AppColors.purple,
+                borderWidth: 1.5,
+            },
+        ]}>
+            <NetworkIcons_1.SearchIcon color={isSearchFocused ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak} size={16}/>
+            <react_native_1.TextInput placeholder={t('console.searchPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {logSearch.length > 0 && (<react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+            }}>
+                <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.purple}20`,
+                borderRadius: 10,
+                paddingHorizontal: 6,
+                paddingVertical: 2,
+            }}>
+                  <react_native_1.Text style={{
+                color: AppColors_1.AppColors.purple,
+                fontSize: 10,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+            }}>
+                    {filteredConsoleLogs.length}
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Pressable onPress={() => setLogSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+                  <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                </react_native_1.Pressable>
+              </react_native_1.View>)}
           </react_native_1.View>
 
           <react_native_1.View style={styles_1.default.toolbarRight}>
@@ -135,6 +163,49 @@ const ConsoleTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
+        {/* Quick Tag Search Suggestions Bar */}
+        {(isSearchFocused || logSearch.length > 0) && (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 6, maxHeight: 30 }} contentContainerStyle={{
+                paddingHorizontal: 16,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+            }}>
+            {QUICK_TAG_SUGGESTIONS.map(tag => {
+                const isSelected = logSearch.includes(tag);
+                return (<TouchableScale_1.default key={tag} onPress={() => {
+                        if (isSelected) {
+                            setLogSearch(prev => prev.replace(tag, '').trim());
+                        }
+                        else {
+                            setLogSearch(prev => prev ? `${prev} ${tag}`.trim() : tag);
+                        }
+                    }}>
+                  <react_native_1.View style={{
+                        paddingHorizontal: 8,
+                        paddingVertical: 3,
+                        borderRadius: 6,
+                        backgroundColor: isSelected
+                            ? AppColors_1.AppColors.purple
+                            : `${AppColors_1.AppColors.purple}14`,
+                        borderWidth: 1,
+                        borderColor: isSelected
+                            ? AppColors_1.AppColors.purple
+                            : `${AppColors_1.AppColors.purple}30`,
+                    }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10,
+                        color: isSelected
+                            ? AppColors_1.AppColors.white
+                            : AppColors_1.AppColors.purple,
+                    }}>
+                      {tag}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </TouchableScale_1.default>);
+            })}
+          </react_native_1.ScrollView>)}
+
         <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
             paddingHorizontal: 16,
             paddingBottom: 4,
@@ -153,7 +224,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.indigo600Alt : AppColors_1.AppColors.indigo50,
                         borderColor: active ? AppColors_1.AppColors.indigo600 : AppColors_1.AppColors.indigo400,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.indigo600Alt,
@@ -166,21 +239,9 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
-                }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo400,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
+                    gap: 6,
                 }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.indigo600Alt} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.LayersIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt}/>
+                    <NetworkIcons_1.LayersIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
@@ -215,7 +276,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.teal600 : AppColors_1.AppColors.teal100,
                         borderColor: active ? AppColors_1.AppColors.teal600 : AppColors_1.AppColors.teal400,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.teal600,
@@ -228,21 +291,9 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
+                    gap: 6,
                 }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.teal400,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.teal600} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.UserIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.teal600}/>
+                    <NetworkIcons_1.UserIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.teal600}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
@@ -277,7 +328,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.sky600 : AppColors_1.AppColors.sky100,
                         borderColor: active ? AppColors_1.AppColors.blue700 : AppColors_1.AppColors.sky400,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.sky600,
@@ -290,21 +343,9 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
+                    gap: 6,
                 }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky400,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.sky600} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.InfoCircleIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600}/>
+                    <NetworkIcons_1.InfoCircleIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
@@ -339,7 +380,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.amber600 : AppColors_1.AppColors.amber100,
                         borderColor: active ? AppColors_1.AppColors.amber700 : AppColors_1.AppColors.amber200,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.amber600,
@@ -352,21 +395,9 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
-                }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber500,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
+                    gap: 6,
                 }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.amber600} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.WarningTriangleIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700}/>
+                    <NetworkIcons_1.WarningTriangleIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
@@ -401,7 +432,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.red500 : AppColors_1.AppColors.red100,
                         borderColor: active ? AppColors_1.AppColors.red600 : AppColors_1.AppColors.errorBorder,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.red500,
@@ -414,21 +447,9 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
-                }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.red500,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
+                    gap: 6,
                 }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.red500} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.ErrorCircleIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.red500}/>
+                    <NetworkIcons_1.ErrorCircleIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.red500}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
@@ -463,7 +484,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.violet600 : AppColors_1.AppColors.purple100,
                         borderColor: active ? AppColors_1.AppColors.purple700 : AppColors_1.AppColors.purple200,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.violet600,
@@ -476,29 +499,17 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
-                }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple400,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
+                    gap: 6,
                 }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.violet600} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.AnalyticsIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple}/>
+                    <NetworkIcons_1.AnalyticsIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.violet600}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
-                        color: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple,
+                        color: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.purpleText,
                         fontFamily: AppFonts_1.AppFonts.interBold,
                     },
                 ]}>
-                      {t('tabs.analytics', 'Analytics')} ({logCounts.analytics})
+                      {t('console.analytics', 'Analytics')} ({logCounts.analytics})
                     </react_native_1.Text>
                   </react_native_1.View>
                 </react_native_1.View>

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

@@ -695,10 +695,11 @@ const localStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.grayTextWeak,
     },
     emptyContainer: {
+        flexGrow: 1,
         alignItems: 'center',
         justifyContent: 'center',
         padding: 32,
-        marginTop: 40,
+        paddingBottom: 80,
     },
     emptyIconCircle: {
         width: 72,

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

@@ -50,7 +50,7 @@ const constants_2 = require("../../constants");
 const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.memo(() => {
-    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, activeTab, environment, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.useInspector)();
+    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.useInspector)();
     const envConfig = (0, react_1.useMemo)(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -91,9 +91,30 @@ const InspectorHeader = react_1.default.memo(() => {
         (activeTab === 'logs' && selectedLog != null) ||
         (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
-    const isAnySelected = isDetailView;
+    const isSettingsView = settingsPage !== null;
+    const isAnySelected = isDetailView || isSettingsView;
+    const settingsModuleTitle = (0, react_1.useMemo)(() => {
+        switch (settingsPage) {
+            case 'apis':
+                return 'APIs (Network)';
+            case 'logs':
+                return 'Console Logs';
+            case 'performance':
+                return 'Performance Tracker';
+            case 'bundle':
+                return 'Bundle Analyzer';
+            case 'crash':
+                return 'Crash Protection';
+            case 'analytics':
+                return 'Analytics Logger';
+            case 'redux':
+                return 'Redux Inspector';
+            default:
+                return 'Settings & Modules';
+        }
+    }, [settingsPage]);
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
-    return (<react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} style={styles_1.default.headerGradient}>
+    return (<react_native_linear_gradient_1.default colors={['#4F46E5', '#7C3AED']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles_1.default.headerGradient}>
       <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
         <react_native_1.View style={styles_1.default.header}>
           <react_native_1.View style={[
@@ -101,12 +122,21 @@ const InspectorHeader = react_1.default.memo(() => {
             {
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 12,
+                gap: 8,
                 flex: !isDetailView ? 1 : 0,
                 minWidth: 0,
             },
         ]}>
             <TouchableScale_1.default onPress={() => {
+            if (isSettingsView) {
+                if (settingsPage === 'main') {
+                    setSettingsPage(null);
+                }
+                else {
+                    setSettingsPage('main');
+                }
+                return;
+            }
             requestAnimationFrame(() => {
                 setSelected(null);
                 setSelectedEvent(null);
@@ -139,7 +169,43 @@ const InspectorHeader = react_1.default.memo(() => {
               <NetworkIcons_1.WhiteBackNavigation />
             </TouchableScale_1.default>
 
-            {!isAnySelected ? (<react_native_1.View style={{
+            {isSettingsView ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 16,
+                color: AppColors_1.AppColors.white,
+                letterSpacing: -0.2,
+            }} numberOfLines={1}>
+                    {settingsModuleTitle}
+                  </react_native_1.Text>
+                  {settingsPage === 'main' && (<react_native_1.View style={{
+                    backgroundColor: `${AppColors_1.AppColors.white}26`,
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.white}20`,
+                }}>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: AppColors_1.AppColors.white,
+                }}>
+                        v{constants_2.LIB_VERSION}
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
+                </react_native_1.View>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 10.5,
+                color: `${AppColors_1.AppColors.white}CC`,
+            }} numberOfLines={1}>
+                  {settingsPage === 'main'
+                ? 'Manage modules and preferences'
+                : 'Configure module parameters'}
+                </react_native_1.Text>
+              </react_native_1.View>) : !isAnySelected ? (<react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 8,
@@ -147,7 +213,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 minWidth: 0,
                 marginRight: 6,
             }}>
-                <AppHeaderLogo_1.default size={38} customIcon={appIcon}/>
+                <AppHeaderLogo_1.default size={30} customIcon={appIcon}/>
                 <react_native_1.View style={{ gap: 2.5, flex: 1, minWidth: 0 }}>
                   <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
                     <react_native_1.Text style={[styles_1.default.headerTitle, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
@@ -227,22 +293,26 @@ const InspectorHeader = react_1.default.memo(() => {
                     </react_native_1.View>
 
                     <react_native_1.Pressable onPress={() => react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { })} style={{
-                backgroundColor: '#CB383726',
-                borderRadius: 4,
-                paddingHorizontal: 5,
-                paddingVertical: 1.5,
-                borderWidth: 1,
-                borderColor: '#CB383780',
+                backgroundColor: '#FFFFFF',
+                borderRadius: 5,
+                paddingHorizontal: 6,
+                paddingVertical: 2,
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 3.5,
+                gap: 4,
                 flexShrink: 0,
+                shadowColor: '#000000',
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.15,
+                shadowRadius: 2,
+                elevation: 2,
             }}>
-                      <NetworkIcons_1.NpmIcon size={11} color="#FF6B6B"/>
+                      <NetworkIcons_1.NpmIcon size={11} color="#CB3837"/>
                       <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 9,
-                color: '#FF6B6B',
+                fontSize: 9.5,
+                color: '#CB3837',
+                letterSpacing: 0.2,
             }} numberOfLines={1}>
                         v{constants_2.LIB_VERSION}
                       </react_native_1.Text>
@@ -532,6 +602,19 @@ const InspectorHeader = react_1.default.memo(() => {
                 gap: 8,
             },
         ]}>
+            {isSettingsView && (<TouchableScale_1.default onPress={() => {
+                react_native_1.Alert.alert('Reset All Settings', 'This restores all module visibility and UI preferences to defaults. Continue?', [
+                    { text: 'Cancel', style: 'cancel' },
+                    {
+                        text: 'Reset',
+                        style: 'destructive',
+                        onPress: resetToDefaults,
+                    },
+                ]);
+            }} hitSlop={15} style={styles_1.default.closeButtonSquare}>
+                <NetworkIcons_1.ResetIcon color={AppColors_1.AppColors.white} size={14}/>
+              </TouchableScale_1.default>)}
+
             {!isAnySelected && (<TouchableScale_1.default onPress={() => {
                 react_native_1.Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics, Redux timeline and Crash history. Continue?', [
                     { text: 'Cancel', style: 'cancel' },
@@ -558,16 +641,16 @@ const InspectorHeader = react_1.default.memo(() => {
                     },
                 ],
             }}>
-                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={16}/>
+                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={14}/>
                 </react_native_1.Animated.View>
               </TouchableScale_1.default>)}
 
             {!isAnySelected && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={styles_1.default.closeButtonSquare}>
-                <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={16}/>
+                <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={14}/>
               </TouchableScale_1.default>)}
 
             <TouchableScale_1.default onPress={closeModal} hitSlop={15} style={styles_1.default.closeButtonSquare}>
-              <NetworkIcons_1.CloseWhite size={16}/>
+              <NetworkIcons_1.CloseWhite size={14}/>
             </TouchableScale_1.default>
           </react_native_1.View>
         </react_native_1.View>