react-native-inapp-inspector 1.1.35 → 2.0.0

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

@@ -59,7 +59,8 @@ const i18n_1 = require("../../i18n");
 const NetworkIcons_1 = require("../NetworkIcons");
 const SettingsPanel = () => {
     const { t } = (0, i18n_1.useTranslation)();
-    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = (0, InspectorContext_1.useInspector)();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = (0, InspectorContext_1.useInspector)();
+    const autoRamProfile = (0, settingsStore_1.calculateRamBasedLimits)(deviceFreeRamMb);
     const isPersistent = (0, settingsStore_1.isPersistentStorageAvailable)();
     // Safe Area & Status Bar Padding for All Device Form Factors
     const statusBarHeight = react_native_1.Platform.OS === 'android' ? react_native_1.StatusBar.currentHeight || 24 : 44;
@@ -702,9 +703,204 @@ const SettingsPanel = () => {
                     </react_native_1.View>);
                 })}
               </react_native_1.View>
-            </react_native_1.View>) : (
-            /* UI Preferences Subtab */
-            <react_native_1.View style={{ gap: 14 }}>
+
+              {/* Section 3.5: RAM-Based Auto Limits */}
+              <react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 14,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                    padding: 14,
+                    gap: 12,
+                }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    lineHeight: 14,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    letterSpacing: 0.8,
+                }}>
+                  RAM-Based Auto Limits
+                </react_native_1.Text>
+
+                {/* Auto RAM Limit Toggle */}
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }}>
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 10,
+                    flex: 1,
+                }}>
+                    <react_native_1.View style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
+                    backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple} size={15}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13.5,
+                    lineHeight: 18,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                        Auto-Calculate Limits from Device RAM
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    lineHeight: 15,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                        Automatically set API, Logs, Analytics & Crash limits based on available memory
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle auto RAM limit calculation" accessibilityState={{ checked: isAutoRamLimitEnabled }} onPress={() => setIsAutoRamLimitEnabled(prev => !prev)} style={{
+                    width: 42,
+                    height: 24,
+                    borderRadius: 12,
+                    backgroundColor: isAutoRamLimitEnabled
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayBorderSecondary,
+                    padding: 2,
+                    justifyContent: 'center',
+                    alignItems: isAutoRamLimitEnabled ? 'flex-end' : 'flex-start',
+                }}>
+                    <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 10,
+                    backgroundColor: AppColors_1.AppColors.white,
+                    shadowColor: AppColors_1.AppColors.black,
+                    shadowOpacity: 0.18,
+                    shadowRadius: 2,
+                    shadowOffset: { width: 0, height: 1 },
+                }}/>
+                  </TouchableScale_1.default>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+
+                {/* Device Free RAM Display */}
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                  <react_native_1.View style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
+                    backgroundColor: isAutoRamLimitEnabled
+                        ? `${AppColors_1.AppColors.purple}14`
+                        : AppColors_1.AppColors.grayBackground,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <NetworkIcons_1.SignalIcon color={isAutoRamLimitEnabled ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak} size={15}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13.5,
+                    lineHeight: 18,
+                    color: isAutoRamLimitEnabled
+                        ? AppColors_1.AppColors.primaryBlack
+                        : AppColors_1.AppColors.grayText,
+                }}>
+                      Detected Free RAM
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    lineHeight: 15,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                      {deviceFreeRamMb} MB available
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.View style={{
+                    paddingHorizontal: 10,
+                    paddingVertical: 5,
+                    borderRadius: 8,
+                    backgroundColor: isAutoRamLimitEnabled
+                        ? `${AppColors_1.AppColors.purple}12`
+                        : AppColors_1.AppColors.grayBackground,
+                    borderWidth: 1,
+                    borderColor: isAutoRamLimitEnabled
+                        ? `${AppColors_1.AppColors.purple}26`
+                        : AppColors_1.AppColors.dividerColor,
+                }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 12,
+                    lineHeight: 15,
+                    color: isAutoRamLimitEnabled
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayText,
+                }}>
+                      {deviceFreeRamMb} MB
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                {/* Current Auto-Calculated Limits Preview */}
+                {isAutoRamLimitEnabled && (<react_native_1.View style={{ marginTop: 8, paddingTop: 8, borderTopWidth: 1, borderTopColor: AppColors_1.AppColors.dividerColor, gap: 6 }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11.5,
+                        lineHeight: 15,
+                        color: AppColors_1.AppColors.purple,
+                    }}>
+                      Auto Profile: {autoRamProfile.profileName}
+                    </react_native_1.Text>
+                    <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+                      {[
+                        { label: 'APIs', value: autoRamProfile.maxNetworkLogs, color: AppColors_1.AppColors.blue500 },
+                        { label: 'Logs', value: autoRamProfile.maxConsoleLogs, color: AppColors_1.AppColors.sky500 },
+                        { label: 'Analytics', value: autoRamProfile.maxAnalyticsEvents, color: AppColors_1.AppColors.purple },
+                        { label: 'Crash', value: autoRamProfile.maxCrashRecords, color: AppColors_1.AppColors.errorColor },
+                    ].map(item => (<react_native_1.View key={item.label} style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                            paddingHorizontal: 8,
+                            paddingVertical: 4,
+                            borderRadius: 6,
+                            backgroundColor: `${item.color}14`,
+                            borderWidth: 1,
+                            borderColor: `${item.color}33`,
+                        }}>
+                          <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10.5,
+                            lineHeight: 14,
+                            color: item.color,
+                        }}>
+                            {item.label}
+                          </react_native_1.Text>
+                          <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10.5,
+                            lineHeight: 14,
+                            color: item.color,
+                        }}>
+                            {item.value}
+                          </react_native_1.Text>
+                        </react_native_1.View>))}
+                    </react_native_1.View>
+                  </react_native_1.View>)}
+              </react_native_1.View>
+            </react_native_1.View>) : (<react_native_1.View style={{ gap: 14 }}>
               {/* Section 1: Appearance */}
               <react_native_1.View style={{
                     backgroundColor: AppColors_1.AppColors.primaryLight,
@@ -1459,83 +1655,128 @@ const SettingsPanel = () => {
         setSettingsPage('main');
     };
     // Helper: settings row with icon + label + optional description
-    const renderSettingRow = (opts) => (<react_native_1.View style={{
-            paddingVertical: 12,
-            borderBottomWidth: opts.isLast ? 0 : 1,
-            borderBottomColor: AppColors_1.AppColors.dividerColor,
-        }}>
-      <TouchableScale_1.default disabled={!opts.onPress} onPress={opts.onPress} style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 12,
-        }}>
-        <react_native_1.View style={{
-            width: 36,
-            height: 36,
-            borderRadius: 10,
-            backgroundColor: AppColors_1.AppColors.purpleShade50,
-            borderWidth: 1,
-            borderColor: `${AppColors_1.AppColors.purple}2E`,
-            alignItems: 'center',
-            justifyContent: 'center',
-        }}>
-          {opts.icon}
-        </react_native_1.View>
-        <react_native_1.View style={{ flex: 1 }}>
-          <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 14,
-            lineHeight: 18,
-            color: AppColors_1.AppColors.primaryBlack,
-        }}>
-            {opts.label}
-          </react_native_1.Text>
-          {opts.description ? (<react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors_1.AppColors.grayText,
-                marginTop: 1,
+    const renderSettingRow = (opts) => {
+        return (<react_native_1.View style={{
+                paddingVertical: 12,
+                borderBottomWidth: opts.isLast ? 0 : 1,
+                borderBottomColor: AppColors_1.AppColors.dividerColor,
             }}>
-              {opts.description}
-            </react_native_1.Text>) : null}
-        </react_native_1.View>
-        {opts.right || null}
-      </TouchableScale_1.default>
-      {opts.picker && (<react_native_1.View style={{
+        <TouchableScale_1.default disabled={!opts.onPress} onPress={opts.onPress} style={{
                 flexDirection: 'row',
-                backgroundColor: AppColors_1.AppColors.grayBackground,
-                borderRadius: 8,
-                padding: 2.5,
-                marginTop: 10,
+                alignItems: 'center',
+                gap: 12,
+            }}>
+          <react_native_1.View style={{
+                width: 36,
+                height: 36,
+                borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
                 borderWidth: 1,
-                borderColor: AppColors_1.AppColors.dividerColor,
+                borderColor: `${AppColors_1.AppColors.purple}2E`,
+                alignItems: 'center',
+                justifyContent: 'center',
             }}>
-          {opts.picker.options.map(opt => {
-                const isActive = opts.picker.selectedValue === opt;
-                return (<TouchableScale_1.default key={String(opt)} onPress={() => opts.picker.onSelect(opt)} style={{
-                        flex: 1,
-                        paddingVertical: 6,
-                        alignItems: 'center',
-                        borderRadius: 6,
-                        backgroundColor: isActive
-                            ? AppColors_1.AppColors.purple
-                            : 'transparent',
-                    }}>
-                <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 11,
-                        lineHeight: 14,
-                        color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
+            {opts.icon}
+          </react_native_1.View>
+          <react_native_1.View style={{ flex: 1 }}>
+            <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 14,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+              {opts.label}
+            </react_native_1.Text>
+            {opts.description ? (<react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    lineHeight: 15,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                {opts.description}
+              </react_native_1.Text>) : null}
+          </react_native_1.View>
+          {opts.right || null}
+        </TouchableScale_1.default>
+        {opts.numericInput && (<react_native_1.View style={{ marginTop: 10, gap: 6 }}>
+            <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                    paddingHorizontal: 12,
+                    paddingVertical: 4,
+                }}>
+              <react_native_1.TextInput style={{
+                    flex: 1,
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 14,
+                    lineHeight: 18,
+                    color: AppColors_1.AppColors.primaryBlack,
+                    paddingVertical: 6,
+                }} value={String(opts.numericInput.value || '')} onChangeText={text => {
+                    const num = parseInt(text.replace(/[^0-9]/g, ''), 10);
+                    if (!isNaN(num)) {
+                        const clamped = Math.max(opts.numericInput?.min ?? 1, Math.min(opts.numericInput?.max ?? 10000, num));
+                        opts.numericInput?.onChange(clamped);
+                    }
+                }} keyboardType={opts.numericInput.keyboardType ?? 'number-pad'} placeholder={opts.numericInput.placeholder} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} maxLength={6} selectTextOnFocus/>
+              <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.purple,
+                    marginLeft: 6,
+                }}>
+                MAX
+              </react_native_1.Text>
+            </react_native_1.View>
+            {opts.numericInput.min !== undefined || opts.numericInput.max !== undefined ? (<react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 10,
+                        lineHeight: 13,
+                        color: AppColors_1.AppColors.grayTextWeak,
                     }}>
-                  {opts.picker.formatLabel
-                        ? opts.picker.formatLabel(opt)
-                        : opt}
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-            })}
-        </react_native_1.View>)}
-    </react_native_1.View>);
+                Range: {opts.numericInput.min ?? 1} - {opts.numericInput.max ?? '∞'}
+              </react_native_1.Text>) : null}
+          </react_native_1.View>)}
+        {opts.picker && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    padding: 2.5,
+                    marginTop: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                }}>
+            {opts.picker.options.map(opt => {
+                    const isActive = opts.picker.selectedValue === opt;
+                    return (<TouchableScale_1.default key={String(opt)} onPress={() => opts.picker.onSelect(opt)} style={{
+                            flex: 1,
+                            paddingVertical: 6,
+                            alignItems: 'center',
+                            borderRadius: 6,
+                            backgroundColor: isActive
+                                ? AppColors_1.AppColors.purple
+                                : 'transparent',
+                        }}>
+                  <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11,
+                            lineHeight: 14,
+                            color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
+                        }}>
+                    {opts.picker.formatLabel
+                            ? opts.picker.formatLabel(opt)
+                            : opt}
+                  </react_native_1.Text>
+                </TouchableScale_1.default>);
+                })}
+          </react_native_1.View>)}
+      </react_native_1.View>);
+    };
     let content = null;
     let title = '';
     let icon = null;
@@ -1556,10 +1797,12 @@ const SettingsPanel = () => {
                 icon: <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={16}/>,
                 label: t('settings.apis.maxRequestLogs'),
                 description: t('settings.apis.maxRequestLogsDescription'),
-                picker: {
-                    options: [50, 100, 200, 500],
-                    selectedValue: maxNetworkLogs,
-                    onSelect: setMaxNetworkLogs,
+                numericInput: {
+                    value: maxNetworkLogs,
+                    onChange: setMaxNetworkLogs,
+                    min: 10,
+                    max: 5000,
+                    placeholder: 'Enter max requests (10-5000)',
                 },
                 isLast: true,
             })}
@@ -1620,10 +1863,12 @@ const SettingsPanel = () => {
                 icon: <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
                 label: t('settings.logs.maxConsoleLogs'),
                 description: t('settings.logs.maxConsoleLogsDescription'),
-                picker: {
-                    options: [100, 200, 500, 1000],
-                    selectedValue: maxConsoleLogs,
-                    onSelect: setMaxConsoleLogs,
+                numericInput: {
+                    value: maxConsoleLogs,
+                    onChange: setMaxConsoleLogs,
+                    min: 10,
+                    max: 10000,
+                    placeholder: 'Enter max logs (10-10000)',
                 },
             })}
           <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
@@ -1740,6 +1985,13 @@ const SettingsPanel = () => {
                 icon: <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.purple} size={16}/>,
                 label: t('settings.analytics.maxAnalyticsEvents'),
                 description: t('settings.analytics.maxAnalyticsEventsDescription', { count: analyticsEvents.length }),
+                numericInput: {
+                    value: maxAnalyticsEventsLimit,
+                    onChange: setMaxAnalyticsEventsLimit,
+                    min: 10,
+                    max: 5000,
+                    placeholder: 'Enter max events (10-5000)',
+                },
                 isLast: true,
             })}
         </react_native_1.View>
@@ -1886,10 +2138,12 @@ const SettingsPanel = () => {
                 icon: <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={16}/>,
                 label: t('settings.crash.maxCrashLogs'),
                 description: t('settings.crash.maxCrashLogsDesc'),
-                picker: {
-                    options: [25, 50, 100, 200],
-                    selectedValue: maxCrashLogs || 100,
-                    onSelect: val => setMaxCrashLogs(val),
+                numericInput: {
+                    value: maxCrashLogs,
+                    onChange: setMaxCrashLogs,
+                    min: 5,
+                    max: 500,
+                    placeholder: 'Enter max crashes (5-500)',
                 },
             })}
           <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
-const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NetworkIcons_1 = require("../NetworkIcons");
 const reduxLogger_1 = require("../../customHooks/reduxLogger");
 const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
+const NativeInspector_1 = require("../../native/NativeInspector");
 const TabBar = react_1.default.memo(() => {
     const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = (0, InspectorContext_1.useInspector)();
     const isReduxAvail = (0, reduxLogger_1.isReduxConnected)();
@@ -85,7 +85,10 @@ const TabBar = react_1.default.memo(() => {
                 consoleLogs.length > lastReadLogsCount;
             const hasUnreadCrashes = activeTab !== 'crash' &&
                 (crashRecords?.length || 0) > (lastReadCrashesCount || 0);
-            return (<TouchableScale_1.default key={tab.key} onPress={() => switchActiveTab(tab.key)} style={[
+            return (<react_native_1.TouchableOpacity key={tab.key} activeOpacity={0.7} onPress={() => {
+                    switchActiveTab(tab.key);
+                    (0, NativeInspector_1.triggerNativeHaptic)('light');
+                }} style={[
                     styles_1.default.contentTabButton,
                     isActive && styles_1.default.contentTabButtonActive,
                 ]}>
@@ -121,7 +124,7 @@ const TabBar = react_1.default.memo(() => {
                         transform: [{ scale: unreadPulseAnim }],
                     }}/>)}
                 </react_native_1.View>
-              </TouchableScale_1.default>);
+              </react_native_1.TouchableOpacity>);
         })}
       </react_native_1.ScrollView>
     </react_native_1.View>);

package/dist/commonjs/components/NetworkIcons.d.ts

@@ -124,3 +124,4 @@ export declare const SmartphoneIcon: ({ color, size }: IconProps) => React.JSX.E
 export declare const AlertTriangleIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const BugIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const TagIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const NpmIcon: ({ color, size }: IconProps) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 exports.DiagnosticsIcon = exports.StackTraceIcon = exports.LayoutIcon = exports.ChipIcon = exports.SkullIcon = exports.ShieldAlertIcon = exports.CrashIcon = exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
-exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
+exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -855,3 +855,8 @@ const TagIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => (
     <react_native_svg_1.Circle cx="7.5" cy="7.5" r="1.5" fill={color}/>
   </react_native_svg_1.default>);
 exports.TagIcon = TagIcon;
+const NpmIcon = ({ color = '#CB3837', size = 14 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 256 256" fill="none">
+    <react_native_svg_1.Rect width="256" height="256" rx="32" fill={color}/>
+    <react_native_svg_1.Path d="M48 48h160v160h-32V96h-32v112H48V48z" fill="#FFFFFF"/>
+  </react_native_svg_1.default>);
+exports.NpmIcon = NpmIcon;

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

@@ -7,6 +7,7 @@ export interface TouchableScaleProps extends PressableProps {
     children?: React.ReactNode;
     hitSlop?: any;
     disabled?: boolean;
+    enableHaptics?: boolean;
 }
 declare const TouchableScale: React.NamedExoticComponent<TouchableScaleProps>;
 export default TouchableScale;

package/dist/commonjs/components/TouchableScale.js

@@ -35,48 +35,46 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const TouchableScale = react_1.default.memo(function TouchableScale({ onPress, onLongPress, style, children, hitSlop, disabled, accessible, accessibilityRole, accessibilityLabel, accessibilityHint, accessibilityState, accessibilityValue, ...rest }) {
-    if (react_native_1.Platform.OS === 'android') {
-        return (<react_native_1.Pressable accessible={accessible} accessibilityRole={accessibilityRole} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} accessibilityState={accessibilityState} accessibilityValue={accessibilityValue} disabled={disabled} onPress={onPress} onLongPress={onLongPress} hitSlop={hitSlop} style={({ pressed }) => [
-                style,
-                { opacity: pressed ? 0.75 : 1 },
-            ]} {...rest}>
-        {children}
-      </react_native_1.Pressable>);
-    }
+const NativeInspector_1 = require("../native/NativeInspector");
+const AnimatedPressable = react_native_1.Animated.createAnimatedComponent(react_native_1.Pressable);
+const TouchableScale = react_1.default.memo(function TouchableScale({ onPress, onLongPress, style, children, hitSlop, disabled, enableHaptics = true, accessible, accessibilityRole, accessibilityLabel, accessibilityHint, accessibilityState, accessibilityValue, ...rest }) {
     const scale = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
-    const animatePress = (pressed) => {
+    const handlePressIn = () => {
+        if (disabled)
+            return;
+        if (enableHaptics) {
+            (0, NativeInspector_1.triggerNativeHaptic)('light');
+        }
         react_native_1.Animated.parallel([
-            react_native_1.Animated.spring(scale, {
-                toValue: pressed ? 0.94 : 1,
-                friction: 6,
-                tension: 120,
+            react_native_1.Animated.timing(scale, {
+                toValue: 0.94,
+                duration: 50,
                 useNativeDriver: true,
             }),
             react_native_1.Animated.timing(opacity, {
-                toValue: pressed ? 0.86 : 1,
-                duration: pressed ? 90 : 140,
+                toValue: 0.85,
+                duration: 50,
                 useNativeDriver: true,
             }),
         ]).start();
     };
-    const flattenedStyle = react_native_1.StyleSheet.flatten(style) || {};
-    const layoutStyle = {
-        flex: flattenedStyle.flex,
-        flexDirection: flattenedStyle.flexDirection,
-        alignItems: flattenedStyle.alignItems,
-        justifyContent: flattenedStyle.justifyContent,
-        flexWrap: flattenedStyle.flexWrap,
-        alignSelf: flattenedStyle.alignSelf,
-        flexGrow: flattenedStyle.flexGrow,
-        flexShrink: flattenedStyle.flexShrink,
-        gap: flattenedStyle.gap,
+    const handlePressOut = () => {
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(scale, {
+                toValue: 1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(opacity, {
+                toValue: 1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+        ]).start();
     };
-    return (<react_native_1.Pressable accessible={accessible} accessibilityRole={accessibilityRole} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} accessibilityState={accessibilityState} accessibilityValue={accessibilityValue} disabled={disabled} style={style} onPressIn={() => animatePress(true)} onPressOut={() => animatePress(false)} onPress={onPress} onLongPress={onLongPress} hitSlop={hitSlop} {...rest}>
-      <react_native_1.Animated.View style={[{ opacity, transform: [{ scale }] }, layoutStyle]}>
-        {children}
-      </react_native_1.Animated.View>
-    </react_native_1.Pressable>);
+    return (<AnimatedPressable accessible={accessible} accessibilityRole={accessibilityRole} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} accessibilityState={accessibilityState} accessibilityValue={accessibilityValue} disabled={disabled} style={[style, { opacity, transform: [{ scale }] }]} onPressIn={handlePressIn} onPressOut={handlePressOut} onPress={onPress} onLongPress={onLongPress} hitSlop={hitSlop} {...rest}>
+      {children}
+    </AnimatedPressable>);
 });
 exports.default = TouchableScale;

package/dist/commonjs/constants/index.d.ts

@@ -1,6 +1,5 @@
 import { Method } from '../types';
-import { StatusFilter } from '../types';
-export declare const STATUS_FILTERS: StatusFilter[];
+export declare const STATUS_FILTERS: string[];
 export declare const METHOD_COLORS: Record<Method, string>;
 export declare const DOMAIN_COLORS: string[];
 export declare const DURATION_FAST_MS = 200;