react-native-inapp-inspector 2.3.15 → 2.3.16

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

@@ -62,7 +62,7 @@ const toast_1 = require("../../helpers/toast");
 const memoryManager_1 = require("../../helpers/memoryManager");
 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, showUpdateToast, setShowUpdateToast, 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, updateAvailable, latestNpmVersion, } = (0, InspectorContext_1.useInspector)();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, closeModal, 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, updateAvailable, latestNpmVersion, } = (0, InspectorContext_1.useInspector)();
     const [stagedHeight, setStagedHeight] = (0, react_1.useState)(modalHeightPercent);
     (0, react_1.useEffect)(() => {
         setStagedHeight(modalHeightPercent);
@@ -73,6 +73,7 @@ const SettingsPanel = () => {
     const headerTopPadding = modalHeightPercent >= 95 ? statusBarHeight : 0;
     const allModules = (0, react_1.useMemo)(() => [
         {
+            id: 1,
             key: 'apis',
             label: 'APIs (Network)',
             category: 'core',
@@ -80,6 +81,7 @@ const SettingsPanel = () => {
             desc: 'HTTP/HTTPS requests, GraphQL, Axios & WebSocket inspector',
         },
         {
+            id: 2,
             key: 'logs',
             label: 'Console Logs',
             category: 'core',
@@ -87,27 +89,7 @@ const SettingsPanel = () => {
             desc: 'Terminal console logs, warnings, errors & stack traces',
         },
         {
-            key: 'performance',
-            label: 'Performance Tracker',
-            category: 'diagnostic',
-            icon: 'performance',
-            desc: '60 FPS monitor, Hermes memory telemetry & re-render profiler',
-        },
-        {
-            key: 'bundle',
-            label: 'Bundle Analyzer',
-            category: 'diagnostic',
-            icon: 'bundle',
-            desc: 'Metro packager dependencies, source maps & asset breakdown',
-        },
-        {
-            key: 'crash',
-            label: 'Crash Protection',
-            category: 'diagnostic',
-            icon: 'crash',
-            desc: 'Runtime exception guard, breadcrumbs & memory snapshot',
-        },
-        {
+            id: 3,
             key: 'analytics',
             label: 'Analytics Logger',
             category: 'telemetry',
@@ -115,6 +97,7 @@ const SettingsPanel = () => {
             desc: 'Firebase & custom analytics events, user properties & params',
         },
         {
+            id: 4,
             key: 'redux',
             label: 'Redux Inspector',
             category: 'telemetry',
@@ -122,6 +105,15 @@ const SettingsPanel = () => {
             desc: 'Store state diffing, action history & reducer timeline',
         },
         {
+            id: 5,
+            key: 'storage',
+            label: 'Storage Inspector',
+            category: 'telemetry',
+            icon: 'storage',
+            desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
+        },
+        {
+            id: 6,
             key: 'device',
             label: 'Device Info',
             category: 'diagnostic',
@@ -129,13 +121,31 @@ const SettingsPanel = () => {
             desc: 'Hardware specs, IP address, screen metrics, UDID & runtime stats',
         },
         {
-            key: 'storage',
-            label: 'Storage Inspector',
-            category: 'telemetry',
-            icon: 'storage',
-            desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
+            id: 7,
+            key: 'crash',
+            label: 'Crash Protection',
+            category: 'diagnostic',
+            icon: 'crash',
+            desc: 'Runtime exception guard, breadcrumbs & memory snapshot',
+        },
+        {
+            id: 8,
+            key: 'bundle',
+            label: 'Bundle Analyzer',
+            category: 'diagnostic',
+            icon: 'bundle',
+            desc: 'Metro packager dependencies, source maps & asset breakdown',
+        },
+        {
+            id: 9,
+            key: 'performance',
+            label: 'Performance & Tracker',
+            category: 'diagnostic',
+            icon: 'performance',
+            desc: '60 FPS monitor, Hermes memory telemetry & re-render profiler',
         },
         {
+            id: 10,
             key: 'debugging',
             label: 'Multi-Device Debugging',
             category: 'diagnostic',
@@ -150,11 +160,11 @@ const SettingsPanel = () => {
         logs: Boolean(tabVisibility?.logs),
         analytics: Boolean(tabVisibility?.analytics),
         redux: Boolean(tabVisibility?.redux),
+        storage: Boolean(tabVisibility?.storage),
+        device: Boolean(tabVisibility?.device),
+        crash: Boolean(tabVisibility?.crash),
         bundle: Boolean(tabVisibility?.bundle),
         performance: Boolean(tabVisibility?.performance),
-        crash: Boolean(tabVisibility?.crash),
-        device: Boolean(tabVisibility?.device),
-        storage: Boolean(tabVisibility?.storage),
         debugging: Boolean(tabVisibility?.debugging),
     }));
     (0, react_1.useEffect)(() => {
@@ -163,11 +173,11 @@ const SettingsPanel = () => {
             logs: Boolean(tabVisibility?.logs),
             analytics: Boolean(tabVisibility?.analytics),
             redux: Boolean(tabVisibility?.redux),
+            storage: Boolean(tabVisibility?.storage),
+            device: Boolean(tabVisibility?.device),
+            crash: Boolean(tabVisibility?.crash),
             bundle: Boolean(tabVisibility?.bundle),
             performance: Boolean(tabVisibility?.performance),
-            crash: Boolean(tabVisibility?.crash),
-            device: Boolean(tabVisibility?.device),
-            storage: Boolean(tabVisibility?.storage),
             debugging: Boolean(tabVisibility?.debugging),
         });
     }, [tabVisibility]);
@@ -177,17 +187,50 @@ const SettingsPanel = () => {
     }, [stagedTabVisibility, tabVisibility, allModules]);
     const stagedActiveCount = allModules.filter(m => m.key === 'apis' || Boolean(stagedTabVisibility[m.key])).length;
     const handleSaveChanges = () => {
-        (0, InspectorContext_1.animateNextLayout)();
-        allModules.forEach(m => {
-            if (m.key !== 'apis') {
-                const isStagedOn = Boolean(stagedTabVisibility[m.key]);
-                const isCurrentOn = Boolean(tabVisibility?.[m.key]);
-                if (isStagedOn !== isCurrentOn) {
-                    toggleTabVisibility(m.key);
-                }
-            }
-        });
-        react_native_1.Alert.alert(t('settings.settingsSaved'), t('settings.settingsSavedDesc'));
+        if (!hasUnsavedChanges)
+            return;
+        react_native_1.Alert.alert('Apply Changes & Reload', 'Are you sure you want to save module changes? The inspector will close and reload the app to apply the new configuration.', [
+            {
+                text: 'Cancel',
+                style: 'cancel',
+                onPress: () => {
+                    setStagedTabVisibility({
+                        apis: true,
+                        logs: Boolean(tabVisibility?.logs),
+                        analytics: Boolean(tabVisibility?.analytics),
+                        redux: Boolean(tabVisibility?.redux),
+                        storage: Boolean(tabVisibility?.storage),
+                        device: Boolean(tabVisibility?.device),
+                        crash: Boolean(tabVisibility?.crash),
+                        bundle: Boolean(tabVisibility?.bundle),
+                        performance: Boolean(tabVisibility?.performance),
+                        debugging: Boolean(tabVisibility?.debugging),
+                    });
+                },
+            },
+            {
+                text: 'Save & Reload',
+                style: 'default',
+                onPress: () => {
+                    (0, InspectorContext_1.animateNextLayout)();
+                    allModules.forEach(m => {
+                        if (m.key !== 'apis') {
+                            const isStagedOn = Boolean(stagedTabVisibility[m.key]);
+                            const isCurrentOn = Boolean(tabVisibility?.[m.key]);
+                            if (isStagedOn !== isCurrentOn) {
+                                toggleTabVisibility(m.key);
+                            }
+                        }
+                    });
+                    closeModal();
+                    setTimeout(() => {
+                        if (__DEV__ && react_native_1.DevSettings && react_native_1.DevSettings.reload) {
+                            react_native_1.DevSettings.reload();
+                        }
+                    }, 350);
+                },
+            },
+        ]);
     };
     const [isDefaultTabDropdownOpen, setIsDefaultTabDropdownOpen] = (0, react_1.useState)(false);
     const goBackToMain = () => {
@@ -360,6 +403,11 @@ const SettingsPanel = () => {
                 label: t('settings.ramLimits', 'RAM & Limits'),
                 Icon: NetworkIcons_1.BrainIcon,
             },
+            {
+                key: 'about',
+                label: t('settings.aboutAndSpecs', 'About & Specs'),
+                Icon: NetworkIcons_1.InfoCircleIcon,
+            },
         ].map(tab => {
             const isActive = settingsActiveSubTab === tab.key;
             const IconComp = tab.Icon;
@@ -569,6 +617,32 @@ const SettingsPanel = () => {
                         gap: 6,
                         flexWrap: 'wrap',
                     }}>
+                            <react_native_1.View style={{
+                        minWidth: 22,
+                        height: 22,
+                        paddingHorizontal: 5,
+                        borderRadius: 11,
+                        backgroundColor: isChecked
+                            ? `${AppColors_1.AppColors.purple}1C`
+                            : `${AppColors_1.AppColors.grayBorderSecondary}80`,
+                        borderWidth: 1,
+                        borderColor: isChecked
+                            ? `${AppColors_1.AppColors.purple}44`
+                            : AppColors_1.AppColors.grayBorderSecondary,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                              <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10,
+                        lineHeight: 13,
+                        color: isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayText,
+                    }}>
+                                #{moduleItem.id}
+                              </react_native_1.Text>
+                            </react_native_1.View>
                             <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 14,
@@ -1120,8 +1194,9 @@ const SettingsPanel = () => {
                 lineHeight: 18,
                 color: AppColors_1.AppColors.primaryBlack,
             }}>
-                      {allModules.find(m => m.key === defaultTab)?.label ||
-                'APIs (Network)'}
+                      {allModules.find(m => m.key === defaultTab)
+                ? `#${allModules.find(m => m.key === defaultTab)?.id} ${allModules.find(m => m.key === defaultTab)?.label}`
+                : '#1 APIs (Network)'}
                     </react_native_1.Text>
                     <react_native_1.View style={{
                 backgroundColor: `${AppColors_1.AppColors.purple}14`,
@@ -1205,7 +1280,7 @@ const SettingsPanel = () => {
                                 ? AppColors_1.AppColors.purple
                                 : AppColors_1.AppColors.primaryBlack,
                         }}>
-                                {tab.label}
+                                #{tab.id} {tab.label}
                               </react_native_1.Text>
                             </react_native_1.View>
                             {isActive && (<NetworkIcons_1.CheckIcon size={14} color={AppColors_1.AppColors.purple}/>)}
@@ -1303,132 +1378,6 @@ const SettingsPanel = () => {
                 </TouchableScale_1.default>
               </react_native_1.View>
             </react_native_1.View>
-
-            
-            <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,
-            }}>
-                PACKAGE VERSION & UPDATES
-              </react_native_1.Text>
-
-              <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,
-                marginRight: 8,
-            }}>
-                  <react_native_1.View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: '#CB383715',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                    <NetworkIcons_1.NpmIcon color="#CB3837" size={16}/>
-                  </react_native_1.View>
-                  <react_native_1.View style={{ flex: 1 }}>
-                    <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-            }}>
-                      <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors_1.AppColors.primaryBlack,
-            }}>
-                        v{constants_1.LIB_VERSION}
-                      </react_native_1.Text>
-                      {updateAvailable ? (<react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3,
-                    backgroundColor: '#F59E0B20',
-                    paddingHorizontal: 6,
-                    paddingVertical: 1.5,
-                    borderRadius: 5,
-                    borderWidth: 1,
-                    borderColor: '#F59E0B60',
-                }}>
-                          <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: '#D97706',
-                }}>
-                            v{latestNpmVersion} Available
-                          </react_native_1.Text>
-                          <NetworkIcons_1.BoltIcon size={9} color="#D97706"/>
-                        </react_native_1.View>) : (<react_native_1.View style={{
-                    backgroundColor: `${AppColors_1.AppColors.emerald500}20`,
-                    paddingHorizontal: 6,
-                    paddingVertical: 1.5,
-                    borderRadius: 5,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.emerald500}50`,
-                }}>
-                          <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors_1.AppColors.emerald600,
-                }}>
-                            Up to date
-                          </react_native_1.Text>
-                        </react_native_1.View>)}
-                    </react_native_1.View>
-                    <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors_1.AppColors.grayText,
-                marginTop: 1,
-            }}>
-                      {updateAvailable
-                ? `A newer version (v${latestNpmVersion}) is available on npm registry.`
-                : 'You are running the latest version from npm registry.'}
-                    </react_native_1.Text>
-                  </react_native_1.View>
-                </react_native_1.View>
-
-                {updateAvailable && (<TouchableScale_1.default onPress={() => {
-                    (0, helpers_1.copyToClipboard)('npm install react-native-inapp-inspector@latest', 'Install Command');
-                    (0, toast_1.showToast)('Copied npm install command!');
-                }} style={{
-                    backgroundColor: AppColors_1.AppColors.purple,
-                    paddingVertical: 6,
-                    paddingHorizontal: 10,
-                    borderRadius: 8,
-                }}>
-                    <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11,
-                    color: AppColors_1.AppColors.white,
-                }}>
-                      Copy Upgrade
-                    </react_native_1.Text>
-                  </TouchableScale_1.default>)}
-              </react_native_1.View>
-            </react_native_1.View>
           </react_native_1.View>)}
 
         {settingsActiveSubTab === 'limits' && (<react_native_1.View style={{ gap: 14 }}>
@@ -1804,6 +1753,919 @@ const SettingsPanel = () => {
               </react_native_1.View>
             </react_native_1.View>
           </react_native_1.View>)}
+        {settingsActiveSubTab === 'about' && (<react_native_1.View style={{ gap: 14 }}>
+            
+            <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 16,
+                gap: 12,
+            }}>
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 12,
+                flex: 1,
+            }}>
+                  <react_native_1.View style={{
+                width: 44,
+                height: 44,
+                borderRadius: 12,
+                backgroundColor: `${AppColors_1.AppColors.purple}1A`,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.purple}33`,
+            }}>
+                    <NetworkIcons_1.PackageIcon color={AppColors_1.AppColors.purple} size={22}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                flexWrap: 'wrap',
+            }}>
+                      <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 15,
+                lineHeight: 20,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                        In-App Inspector
+                      </react_native_1.Text>
+                      <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.purple}18`,
+                paddingHorizontal: 7,
+                paddingVertical: 2,
+                borderRadius: 6,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.purple}33`,
+            }}>
+                        <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10,
+                color: AppColors_1.AppColors.purple,
+            }}>
+                          v{constants_1.LIB_VERSION}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      {updateAvailable ? (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: '#F59E0B20',
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                    borderRadius: 6,
+                    borderWidth: 1,
+                    borderColor: '#F59E0B60',
+                }}>
+                          <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: '#D97706',
+                }}>
+                            v{latestNpmVersion} Available
+                          </react_native_1.Text>
+                          <NetworkIcons_1.BoltIcon size={9} color="#D97706"/>
+                        </react_native_1.View>) : (<react_native_1.View style={{
+                    backgroundColor: `${AppColors_1.AppColors.emerald500}20`,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                    borderRadius: 6,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.emerald500}50`,
+                }}>
+                          <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: AppColors_1.AppColors.emerald600,
+                }}>
+                            Up to date
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
+                    </react_native_1.View>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 2,
+            }}>
+                      react-native-inapp-inspector
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </react_native_1.View>
+
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11.5,
+                lineHeight: 16,
+                color: AppColors_1.AppColors.grayText,
+            }}>
+                High-performance in-app debugging, network logging, console inspection, performance profiling, storage viewer & telemetry diagnostics for React Native.
+              </react_native_1.Text>
+
+              {updateAvailable && (<TouchableScale_1.default onPress={() => {
+                    (0, helpers_1.copyToClipboard)('npm install react-native-inapp-inspector@latest', 'Install Command');
+                    (0, toast_1.showToast)('Copied npm upgrade command!');
+                }} style={{
+                    backgroundColor: AppColors_1.AppColors.purple,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    borderRadius: 8,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 6,
+                }}>
+                  <NetworkIcons_1.BoltIcon size={12} color={AppColors_1.AppColors.white}/>
+                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 12,
+                    color: AppColors_1.AppColors.white,
+                }}>
+                    Copy Upgrade Command (v{latestNpmVersion})
+                  </react_native_1.Text>
+                </TouchableScale_1.default>)}
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={{
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                gap: 8,
+            }}>
+              <TouchableScale_1.default onPress={() => {
+                react_native_1.Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector').catch(() => { });
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: `${AppColors_1.AppColors.purple}0F`,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.purple}30`,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <NetworkIcons_1.GitHubIcon color={AppColors_1.AppColors.purple} size={18}/>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                    ⭐ Star on GitHub
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors_1.AppColors.grayText,
+            }}>
+                    Support open source
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </TouchableScale_1.default>
+
+              <TouchableScale_1.default onPress={() => {
+                react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <NetworkIcons_1.NpmIcon color="#CB3837" size={18}/>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                    NPM Registry
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors_1.AppColors.grayText,
+            }}>
+                    Package repository
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </TouchableScale_1.default>
+
+              <TouchableScale_1.default onPress={() => {
+                react_native_1.Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector#readme').catch(() => { });
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <react_native_1.Text style={{ fontSize: 16 }}>📖</react_native_1.Text>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                    Documentation
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors_1.AppColors.grayText,
+            }}>
+                    Setup & API guide
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </TouchableScale_1.default>
+
+              <TouchableScale_1.default onPress={() => {
+                react_native_1.Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector/issues').catch(() => { });
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <react_native_1.Text style={{ fontSize: 16 }}>🐞</react_native_1.Text>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                    Report Issue
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors_1.AppColors.grayText,
+            }}>
+                    Bugs & feature requests
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </TouchableScale_1.default>
+
+              <TouchableScale_1.default onPress={() => {
+                react_native_1.Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector/releases').catch(() => { });
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <react_native_1.Text style={{ fontSize: 16 }}>🏷️</react_native_1.Text>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                    Release Notes
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors_1.AppColors.grayText,
+            }}>
+                    Version changelog
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </TouchableScale_1.default>
+
+              <TouchableScale_1.default onPress={() => {
+                const win = react_native_1.Dimensions.get('window');
+                const scr = react_native_1.Dimensions.get('screen');
+                const rnVer = react_native_1.Platform.constants?.reactNativeVersion;
+                const specsPayload = {
+                    package: {
+                        name: 'react-native-inapp-inspector',
+                        version: `v${constants_1.LIB_VERSION}`,
+                        latestNpmVersion: latestNpmVersion ? `v${latestNpmVersion}` : 'Checking...',
+                        license: 'MIT',
+                        repository: 'https://github.com/vengatmacuser/react-native-inapp-inspector',
+                    },
+                    hostApp: {
+                        name: (0, helpers_1.getAppName)(),
+                        bundleId: (0, helpers_1.getBundleIdentifier)(),
+                        versionAndBuild: (0, helpers_1.getAppVersionAndBuild)().formatted,
+                        buildVariant: __DEV__ ? 'Development (Debug)' : 'Production (Release)',
+                        metroConnected: (0, helpers_1.isLocalDebugEnvironment)(),
+                    },
+                    runtime: {
+                        reactNativeVersion: rnVer ? `${rnVer.major}.${rnVer.minor}.${rnVer.patch}` : '0.74+',
+                        reactVersion: react_1.default.version,
+                        jsEngine: Boolean(global?.HermesInternal) ? 'Hermes' : 'JavaScriptCore (JSC)',
+                        architecture: Boolean(global?.nativeFabricUIManager) ? 'Fabric (New Architecture)' : 'Paper (Legacy Bridge)',
+                        turboModules: Boolean(global?.__turboModuleProxy || global?.TurboModuleRegistry),
+                    },
+                    device: {
+                        platform: react_native_1.Platform.OS,
+                        osVersion: react_native_1.Platform.Version,
+                        deviceModel: react_native_1.Platform.constants?.Model || 'Unknown Device',
+                        windowDimensions: `${Math.round(win.width)}x${Math.round(win.height)} pt`,
+                        screenDimensions: `${Math.round(scr.width)}x${Math.round(scr.height)} pt`,
+                        pixelRatio: react_native_1.PixelRatio.get(),
+                        fontScale: react_native_1.PixelRatio.getFontScale(),
+                        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'Unknown',
+                        locale: Intl.DateTimeFormat().resolvedOptions().locale || 'en',
+                    },
+                    storageAndCapabilities: {
+                        storageEngine: (0, settingsStore_1.isPersistentStorageAvailable)() ? 'MMKV (Fast Native Storage)' : 'In-Memory State',
+                        hasNativeModule: Boolean(global?.NativeInspectorModule || global?.__IN_APP_INSPECTOR_NATIVE__),
+                        reduxConnected: (0, reduxLogger_1.isReduxConnected)(),
+                        analyticsConnected: (0, analyticsLogger_2.isAnalyticsConnected)(),
+                    },
+                };
+                (0, helpers_1.copyToClipboard)(JSON.stringify(specsPayload, null, 2), 'Diagnostic Specifications');
+                (0, toast_1.showToast)('Copied full diagnostic specs to clipboard!');
+            }} style={{
+                flex: 1,
+                minWidth: '47%',
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                paddingVertical: 10,
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.purple} size={16}/>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                    Copy Specs JSON
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 9.5,
+                color: AppColors_1.AppColors.grayText,
+            }}>
+                    Diagnostics payload
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </TouchableScale_1.default>
+            </react_native_1.View>
+
+            
+            <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,
+            }}>
+                PACKAGE VERSION & UPGRADES
+              </react_native_1.Text>
+
+              <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,
+                marginRight: 8,
+            }}>
+                  <react_native_1.View style={{
+                width: 34,
+                height: 34,
+                borderRadius: 9,
+                backgroundColor: '#CB383715',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                    <NetworkIcons_1.NpmIcon color="#CB3837" size={17}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+            }}>
+                      <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 14,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                        v{constants_1.LIB_VERSION}
+                      </react_native_1.Text>
+                      {updateAvailable ? (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: '#F59E0B20',
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                    borderRadius: 5,
+                    borderWidth: 1,
+                    borderColor: '#F59E0B60',
+                }}>
+                          <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: '#D97706',
+                }}>
+                            v{latestNpmVersion} Available
+                          </react_native_1.Text>
+                          <NetworkIcons_1.BoltIcon size={9} color="#D97706"/>
+                        </react_native_1.View>) : (<react_native_1.View style={{
+                    backgroundColor: `${AppColors_1.AppColors.emerald500}20`,
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                    borderRadius: 5,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.emerald500}50`,
+                }}>
+                          <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: AppColors_1.AppColors.emerald600,
+                }}>
+                            Up to date
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
+                    </react_native_1.View>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                      {updateAvailable
+                ? `A newer release (v${latestNpmVersion}) is available on npm registry.`
+                : 'You are running the latest version from npm registry.'}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                <TouchableScale_1.default onPress={() => {
+                (0, helpers_1.copyToClipboard)('npm install react-native-inapp-inspector@latest', 'Install Command');
+                (0, toast_1.showToast)('Copied npm install command!');
+            }} style={{
+                backgroundColor: updateAvailable ? AppColors_1.AppColors.purple : `${AppColors_1.AppColors.purple}18`,
+                paddingVertical: 7,
+                paddingHorizontal: 11,
+                borderRadius: 8,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 5,
+            }}>
+                  <NetworkIcons_1.CopyIcon color={updateAvailable ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={12}/>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                color: updateAvailable ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple,
+            }}>
+                    {updateAvailable ? 'Copy Upgrade' : 'Copy Install'}
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 10,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                HOST APPLICATION & BUILD
+              </react_native_1.Text>
+
+              <react_native_1.View style={{ gap: 8 }}>
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Application Name
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {(0, helpers_1.getAppName)()}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Bundle ID / Package
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11, color: AppColors_1.AppColors.primaryBlack }}>
+                    {(0, helpers_1.getBundleIdentifier)()}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Version & Build Number
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {(0, helpers_1.getAppVersionAndBuild)().formatted}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Build Variant
+                  </react_native_1.Text>
+                  <react_native_1.View style={{
+                backgroundColor: __DEV__ ? `${AppColors_1.AppColors.amber500}20` : `${AppColors_1.AppColors.emerald500}20`,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+                borderRadius: 5,
+                borderWidth: 1,
+                borderColor: __DEV__ ? `${AppColors_1.AppColors.amber500}50` : `${AppColors_1.AppColors.emerald500}50`,
+            }}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10,
+                color: __DEV__ ? AppColors_1.AppColors.amber500 : AppColors_1.AppColors.emerald600,
+            }}>
+                      {__DEV__ ? 'Development (Debug)' : 'Production (Release)'}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Metro Bundler Connection
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: (0, helpers_1.isLocalDebugEnvironment)() ? AppColors_1.AppColors.emerald600 : AppColors_1.AppColors.grayText,
+            }}>
+                    {(0, helpers_1.isLocalDebugEnvironment)() ? 'Connected (Hot Reload Active)' : 'Offline / Standalone'}
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 10,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                FRAMEWORK & RUNTIME ENGINE
+              </react_native_1.Text>
+
+              <react_native_1.View style={{ gap: 8 }}>
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    React Native Version
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    v{(react_native_1.Platform.constants?.reactNativeVersion?.major != null)
+                ? `${react_native_1.Platform.constants.reactNativeVersion.major}.${react_native_1.Platform.constants.reactNativeVersion.minor}.${react_native_1.Platform.constants.reactNativeVersion.patch}`
+                : '0.74+'}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    React Core Version
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    v{react_1.default.version}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    JavaScript Engine
+                  </react_native_1.Text>
+                  <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.purple}15`,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+                borderRadius: 5,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.purple}40`,
+            }}>
+                    <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10.5, color: AppColors_1.AppColors.purple }}>
+                      {Boolean(global?.HermesInternal) ? 'Hermes Engine (Active)' : 'JavaScriptCore (JSC)'}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Rendering Architecture
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {Boolean(global?.nativeFabricUIManager) ? 'Fabric (New Architecture)' : 'Paper (Legacy Bridge)'}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    TurboModules Support
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {Boolean(global?.__turboModuleProxy || global?.TurboModuleRegistry)
+                ? 'Enabled (C++ JSI)'
+                : 'Standard Bridge'}
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 10,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                DEVICE & DISPLAY METRICS
+              </react_native_1.Text>
+
+              <react_native_1.View style={{ gap: 8 }}>
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Operating System
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {react_native_1.Platform.OS === 'ios' ? 'Apple iOS' : react_native_1.Platform.OS === 'android' ? 'Google Android' : react_native_1.Platform.OS}{' '}
+                    {react_native_1.Platform.Version}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Device Hardware Model
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {react_native_1.Platform.constants?.Model ||
+                (react_native_1.Platform.OS === 'ios' ? 'Apple Device' : 'Android Device')}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Window Viewport (Points)
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {Math.round(react_native_1.Dimensions.get('window').width)} × {Math.round(react_native_1.Dimensions.get('window').height)} pt
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Native Physical Resolution
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {Math.round(react_native_1.Dimensions.get('screen').width * react_native_1.PixelRatio.get())} × {Math.round(react_native_1.Dimensions.get('screen').height * react_native_1.PixelRatio.get())} px
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Pixel Density & Font Scale
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {react_native_1.PixelRatio.get().toFixed(1)}x ({react_native_1.PixelRatio.get() >= 3 ? '@3x' : react_native_1.PixelRatio.get() >= 2 ? '@2x' : '@1x'}) • Font: {react_native_1.PixelRatio.getFontScale().toFixed(2)}x
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Timezone & Locale
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    {Intl.DateTimeFormat().resolvedOptions().timeZone || 'System'} ({Intl.DateTimeFormat().resolvedOptions().locale || 'en'})
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 10,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                INSPECTOR STORAGE & CAPABILITIES
+              </react_native_1.Text>
+
+              <react_native_1.View style={{ gap: 8 }}>
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Storage Persistence Engine
+                  </react_native_1.Text>
+                  <react_native_1.View style={{
+                backgroundColor: (0, settingsStore_1.isPersistentStorageAvailable)() ? `${AppColors_1.AppColors.emerald500}18` : `${AppColors_1.AppColors.amber500}18`,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+                borderRadius: 5,
+                borderWidth: 1,
+                borderColor: (0, settingsStore_1.isPersistentStorageAvailable)() ? `${AppColors_1.AppColors.emerald500}50` : `${AppColors_1.AppColors.amber500}50`,
+            }}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10.5,
+                color: (0, settingsStore_1.isPersistentStorageAvailable)() ? AppColors_1.AppColors.emerald600 : AppColors_1.AppColors.amber500,
+            }}>
+                      {(0, settingsStore_1.isPersistentStorageAvailable)() ? 'MMKV Fast Native Storage' : 'In-Memory State'}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Native Module Status
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: Boolean(global?.NativeInspectorModule) ? AppColors_1.AppColors.emerald600 : AppColors_1.AppColors.grayText,
+            }}>
+                    {Boolean(global?.NativeInspectorModule) ? 'Linked & Active' : 'JavaScript Only'}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Network Logger Interceptor
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.emerald600 }}>
+                    Active (XMLHttpRequest & Fetch Hooked)
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Redux & Analytics Watchers
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                    Redux: {(0, reduxLogger_1.isReduxConnected)() ? 'Connected' : 'Listening'} • Analytics: {(0, analyticsLogger_2.isAnalyticsConnected)() ? 'Connected' : 'Listening'}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Crash & Exception Boundary
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.emerald600 }}>
+                    Global JS Exception Handler Active
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                    Memory Management
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.emerald600 }}>
+                    Dynamic Auto RAM Tiering Active
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 14,
+                gap: 8,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                LICENSE & CREDITS
+              </react_native_1.Text>
+
+              <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                  License
+                </react_native_1.Text>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.emerald600 }}>
+                  MIT Permissive Open Source
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                  Created & Maintained By
+                </react_native_1.Text>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 11.5, color: AppColors_1.AppColors.primaryBlack }}>
+                  Vengateswaran
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11.5, color: AppColors_1.AppColors.grayText }}>
+                  Repository
+                </react_native_1.Text>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 11, color: AppColors_1.AppColors.purple }}>
+                  github.com/vengatmacuser/react-native-inapp-inspector
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>)}
         <react_native_1.View style={{ height: 48 }}/>
       </react_native_1.ScrollView>