react-native-inapp-inspector 2.0.5 → 2.0.7

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

@@ -62,7 +62,7 @@ const helpers_1 = require("../../helpers");
 const toast_1 = require("../../helpers/toast");
 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, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, isPerformanceHudEnabled, setIsPerformanceHudEnabled, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, updateAvailable, latestNpmVersion, openWalkthrough, deviceInfo, auditReport, storageEntries, } = (0, InspectorContext_1.useInspector)();
     const [stagedHeight, setStagedHeight] = (0, react_1.useState)(modalHeightPercent);
     const [telemetryConsent, setTelemetryConsentState] = (0, react_1.useState)(true);
     (0, react_1.useEffect)(() => {
@@ -101,6 +101,27 @@ const SettingsPanel = () => {
             icon: 'logs',
             desc: 'Terminal console logs, warnings, errors & stack traces',
         },
+        {
+            key: 'storage',
+            label: 'Storage (AsyncStorage)',
+            category: 'core',
+            icon: 'storage',
+            desc: 'Browse, edit, create and delete local key-value storage & JSON',
+        },
+        {
+            key: 'device',
+            label: 'Device & System Info',
+            category: 'diagnostic',
+            icon: 'device',
+            desc: 'Hermes runtime, Fabric New Arch, screen metrics & build info',
+        },
+        {
+            key: 'audit',
+            label: 'Code Quality & Package Audit',
+            category: 'diagnostic',
+            icon: 'audit',
+            desc: 'Audit dependencies, peer conflicts, TS schema errors & React Native anti-patterns',
+        },
         {
             key: 'performance',
             label: 'Performance Tracker',
@@ -143,6 +164,9 @@ const SettingsPanel = () => {
         logs: Boolean(tabVisibility?.logs),
         analytics: Boolean(tabVisibility?.analytics),
         redux: Boolean(tabVisibility?.redux),
+        storage: Boolean(tabVisibility?.storage),
+        device: Boolean(tabVisibility?.device),
+        audit: Boolean(tabVisibility?.audit),
         bundle: Boolean(tabVisibility?.bundle),
         performance: Boolean(tabVisibility?.performance),
         crash: Boolean(tabVisibility?.crash),
@@ -154,6 +178,9 @@ const SettingsPanel = () => {
             logs: Boolean(tabVisibility?.logs),
             analytics: Boolean(tabVisibility?.analytics),
             redux: Boolean(tabVisibility?.redux),
+            storage: Boolean(tabVisibility?.storage),
+            device: Boolean(tabVisibility?.device),
+            audit: Boolean(tabVisibility?.audit),
             bundle: Boolean(tabVisibility?.bundle),
             performance: Boolean(tabVisibility?.performance),
             crash: Boolean(tabVisibility?.crash),
@@ -325,16 +352,17 @@ const SettingsPanel = () => {
             shadowRadius: 4,
             shadowOffset: { width: 0, height: 2 },
         }}>
+          {/* Tab 1: Modules & Tabs */}
           <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.modulesAndTools')} accessibilityState={{ selected: settingsActiveSubTab === 'module' }} onPress={() => {
             (0, InspectorContext_1.animateNextLayout)();
             setSettingsActiveSubTab('module');
         }} style={{
             flex: 1,
-            paddingVertical: 9,
+            paddingVertical: 8,
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: 6,
+            gap: 5,
             borderRadius: 9,
             backgroundColor: settingsActiveSubTab === 'module'
                 ? AppColors_1.AppColors.purple
@@ -342,11 +370,11 @@ const SettingsPanel = () => {
         }}>
             <NetworkIcons_1.LayersIcon color={settingsActiveSubTab === 'module'
             ? AppColors_1.AppColors.white
-            : AppColors_1.AppColors.grayText} size={13}/>
+            : AppColors_1.AppColors.grayText} size={12.5}/>
             <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 12.5,
-            lineHeight: 16,
+            fontSize: 11.5,
+            lineHeight: 15,
             color: settingsActiveSubTab === 'module'
                 ? AppColors_1.AppColors.white
                 : AppColors_1.AppColors.grayText,
@@ -355,16 +383,48 @@ const SettingsPanel = () => {
             </react_native_1.Text>
           </TouchableScale_1.default>
 
+          {/* Tab 2: RAM & Limits */}
+          <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.ramLimits')} accessibilityState={{ selected: settingsActiveSubTab === 'limits' }} onPress={() => {
+            (0, InspectorContext_1.animateNextLayout)();
+            setSettingsActiveSubTab('limits');
+        }} style={{
+            flex: 1,
+            paddingVertical: 8,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 5,
+            borderRadius: 9,
+            backgroundColor: settingsActiveSubTab === 'limits'
+                ? AppColors_1.AppColors.purple
+                : 'transparent',
+        }}>
+            <NetworkIcons_1.CpuIcon color={settingsActiveSubTab === 'limits'
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.grayText} size={12.5}/>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 11.5,
+            lineHeight: 15,
+            color: settingsActiveSubTab === 'limits'
+                ? AppColors_1.AppColors.white
+                : AppColors_1.AppColors.grayText,
+        }}>
+              {t('settings.ramLimits')}
+            </react_native_1.Text>
+          </TouchableScale_1.default>
+
+          {/* Tab 3: UI & Appearance */}
           <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.uiPreferences')} accessibilityState={{ selected: settingsActiveSubTab === 'ui' }} onPress={() => {
             (0, InspectorContext_1.animateNextLayout)();
             setSettingsActiveSubTab('ui');
         }} style={{
             flex: 1,
-            paddingVertical: 9,
+            paddingVertical: 8,
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: 6,
+            gap: 5,
             borderRadius: 9,
             backgroundColor: settingsActiveSubTab === 'ui'
                 ? AppColors_1.AppColors.purple
@@ -372,11 +432,11 @@ const SettingsPanel = () => {
         }}>
             <NetworkIcons_1.ScreenIcon color={settingsActiveSubTab === 'ui'
             ? AppColors_1.AppColors.white
-            : AppColors_1.AppColors.grayText} size={13}/>
+            : AppColors_1.AppColors.grayText} size={12.5}/>
             <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 12.5,
-            lineHeight: 16,
+            fontSize: 11.5,
+            lineHeight: 15,
             color: settingsActiveSubTab === 'ui'
                 ? AppColors_1.AppColors.white
                 : AppColors_1.AppColors.grayText,
@@ -386,7 +446,7 @@ const SettingsPanel = () => {
           </TouchableScale_1.default>
         </react_native_1.View>
 
-        {settingsActiveSubTab === 'module' ? (<react_native_1.View style={{ gap: 12 }}>
+        {settingsActiveSubTab === 'module' && (<react_native_1.View style={{ gap: 12 }}>
             {/* Individual Module Cards with Left Checkboxes */}
             <react_native_1.View style={{ gap: 10 }}>
               {allModules.map(moduleItem => {
@@ -402,17 +462,23 @@ const SettingsPanel = () => {
                     ? `${logs.length} requests • Limit: ${maxNetworkLogs}`
                     : moduleItem.key === 'logs'
                         ? `${consoleLogs.length} logs • Limit: ${maxConsoleLogs}`
-                        : moduleItem.key === 'performance'
-                            ? '60 FPS Target • Memory Telemetry'
-                            : moduleItem.key === 'bundle'
-                                ? 'Metro Packager • Dependency Map'
-                                : moduleItem.key === 'crash'
-                                    ? `${crashRecords?.length || 0} crashes recorded • Crash Guard`
-                                    : moduleItem.key === 'analytics'
-                                        ? `${analyticsEvents.length} events logged`
-                                        : moduleItem.key === 'redux'
-                                            ? `${Object.keys(reduxState || {}).length} slices • Depth: ${reduxExpandDepth}`
-                                            : '';
+                        : moduleItem.key === 'storage'
+                            ? `${storageEntries?.length || 0} keys • AsyncStorage/MMKV`
+                            : moduleItem.key === 'device'
+                                ? `${deviceInfo?.platform ? deviceInfo.platform.toUpperCase() : 'Device'} • Hermes ${deviceInfo?.isHermes ? 'Enabled' : 'Off'}`
+                                : moduleItem.key === 'audit'
+                                    ? `${auditReport?.score != null ? `${auditReport.score}/100 Score • Quality Audit` : 'Package & Health Audit'}`
+                                    : moduleItem.key === 'performance'
+                                        ? '60 FPS Target • Memory Telemetry'
+                                        : moduleItem.key === 'bundle'
+                                            ? 'Metro Packager • Dependency Map'
+                                            : moduleItem.key === 'crash'
+                                                ? `${crashRecords?.length || 0} crashes recorded • Crash Guard`
+                                                : moduleItem.key === 'analytics'
+                                                    ? `${analyticsEvents.length} events logged`
+                                                    : moduleItem.key === 'redux'
+                                                        ? `${Object.keys(reduxState || {}).length} slices • Depth: ${reduxExpandDepth}`
+                                                        : '';
                 return (<react_native_1.View key={moduleItem.key} style={{
                         backgroundColor: AppColors_1.AppColors.primaryLight,
                         borderRadius: 14,
@@ -521,6 +587,15 @@ const SettingsPanel = () => {
                           {moduleItem.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'device' && (<NetworkIcons_1.DevicePhoneIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'audit' && (<NetworkIcons_1.ShieldCheckIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
                           {moduleItem.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
@@ -672,29 +747,29 @@ const SettingsPanel = () => {
                             borderTopColor: AppColors_1.AppColors.dividerColor,
                         }}>
                         {/* Live Info Pill */}
-                        <react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 6,
-                            flex: 1,
-                        }}>
-                          <react_native_1.View style={{
-                            width: 6,
-                            height: 6,
-                            borderRadius: 3,
-                            backgroundColor: isChecked
-                                ? AppColors_1.AppColors.liveGreen
-                                : AppColors_1.AppColors.grayTextWeak,
-                        }}/>
-                          <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interMedium,
-                            fontSize: 11,
-                            color: AppColors_1.AppColors.grayText,
-                            lineHeight: 14,
-                        }}>
-                            {liveStats}
-                          </react_native_1.Text>
-                        </react_native_1.View>
+                        {Boolean(liveStats) ? (<react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 6,
+                                flex: 1,
+                            }}>
+                            <react_native_1.View style={{
+                                width: 6,
+                                height: 6,
+                                borderRadius: 3,
+                                backgroundColor: isChecked
+                                    ? AppColors_1.AppColors.liveGreen
+                                    : AppColors_1.AppColors.grayTextWeak,
+                            }}/>
+                            <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interMedium,
+                                fontSize: 11,
+                                color: AppColors_1.AppColors.grayText,
+                                lineHeight: 14,
+                            }}>
+                              {liveStats}
+                            </react_native_1.Text>
+                          </react_native_1.View>) : (<react_native_1.View style={{ flex: 1 }}/>)}
 
                         {/* Sleek Configure Button */}
                         <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Configure ${moduleItem.label} settings`} onPress={() => {
@@ -726,8 +801,11 @@ const SettingsPanel = () => {
                   </react_native_1.View>);
             })}
             </react_native_1.View>
+          </react_native_1.View>)}
 
-            {/* Section 3.5: RAM-Based Auto Limits */}
+        {/* ─── TAB 2: RAM & RESOURCE LIMITS ──────────────────────────────────── */}
+        {settingsActiveSubTab === 'limits' && (<react_native_1.View style={{ gap: 14 }}>
+            {/* Section 1: RAM-Based Auto Limits */}
             <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 borderRadius: 14,
@@ -744,7 +822,7 @@ const SettingsPanel = () => {
                 color: AppColors_1.AppColors.grayTextWeak,
                 letterSpacing: 0.8,
             }}>
-                RAM-Based Auto Limits
+                RAM-BASED AUTO TUNING
               </react_native_1.Text>
 
               {/* Auto RAM Limit Toggle */}
@@ -949,8 +1027,329 @@ const SettingsPanel = () => {
                       </react_native_1.View>))}
                   </react_native_1.View>
                 </react_native_1.View>)}
+
+              <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+
+              {/* Floating Mini Performance HUD Toggle */}
+              {renderSettingRow({
+                icon: <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Show Mini Performance HUD Overlay',
+                description: 'Floating on-screen real-time FPS and Memory/Heap widget',
+                right: (<TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle mini performance HUD overlay" accessibilityState={{ checked: isPerformanceHudEnabled }} onPress={() => setIsPerformanceHudEnabled(prev => !prev)} style={{
+                        width: 42,
+                        height: 24,
+                        borderRadius: 12,
+                        backgroundColor: isPerformanceHudEnabled
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayBorderSecondary,
+                        padding: 2,
+                        justifyContent: 'center',
+                        alignItems: isPerformanceHudEnabled
+                            ? '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>),
+                isLast: true,
+            })}
+            </react_native_1.View>
+
+            {/* Section 2: Fine-Tuned Resource 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,
+            }}>
+                MANUAL RESOURCE THRESHOLDS
+              </react_native_1.Text>
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Max Network / API Logs',
+                description: 'Maximum in-memory API requests tracked before rotation',
+                numericInput: {
+                    value: maxNetworkLogs,
+                    onChange: setMaxNetworkLogs,
+                    min: 10,
+                    max: 100,
+                    placeholder: '10 - 100',
+                },
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Max Console Logs',
+                description: 'Maximum log entries kept across info/warn/error streams',
+                numericInput: {
+                    value: maxConsoleLogs,
+                    onChange: setMaxConsoleLogs,
+                    min: 20,
+                    max: 300,
+                    placeholder: '20 - 300',
+                },
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Max Analytics Events',
+                description: 'Capacity for captured analytics payloads & telemetry pings',
+                numericInput: {
+                    value: maxAnalyticsEventsLimit,
+                    onChange: setMaxAnalyticsEventsLimit,
+                    min: 20,
+                    max: 200,
+                    placeholder: '20 - 200',
+                },
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.CrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Max Crash Records',
+                description: 'Stored fatal exceptions and crash diagnostics logs',
+                numericInput: {
+                    value: maxCrashLogs,
+                    onChange: setMaxCrashLogs,
+                    min: 5,
+                    max: 50,
+                    placeholder: '5 - 50',
+                },
+                isLast: true,
+            })}
+            </react_native_1.View>
+
+            {/* Section 3: Storage & Cache Cleansing */}
+            <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,
+            }}>
+                STORAGE & CACHE CLEANSING
+              </react_native_1.Text>
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear All Network Logs',
+                description: `${logs.length} requests in memory`,
+                onPress: () => {
+                    (0, networkLogger_1.clearNetworkLogs)();
+                    setSelected(null);
+                    react_native_1.Alert.alert(t('common.success'), 'Network logs cleared successfully.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                      Clear ({logs.length})
+                    </react_native_1.Text>
+                  </react_native_1.View>),
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear All Console Logs',
+                description: `${consoleLogs.length} logs in memory`,
+                onPress: () => {
+                    (0, consoleLogger_1.clearConsoleLogs)();
+                    react_native_1.Alert.alert(t('common.success'), 'Console logs cleared successfully.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                      Clear ({consoleLogs.length})
+                    </react_native_1.Text>
+                  </react_native_1.View>),
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear Analytics Events',
+                description: `${analyticsEvents.length} events recorded`,
+                onPress: () => {
+                    (0, analyticsLogger_1.clearAnalyticsEvents)();
+                    setSelectedEvent(null);
+                    react_native_1.Alert.alert(t('common.success'), 'Analytics events cleared successfully.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                      Clear ({analyticsEvents.length})
+                    </react_native_1.Text>
+                  </react_native_1.View>),
+            })}
+
+              {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear Crash Logs',
+                description: `${crashRecords.length} crash dumps recorded`,
+                onPress: () => {
+                    (0, crashHandler_1.clearCrashRecords)();
+                    react_native_1.Alert.alert(t('common.success'), 'Crash records cleared successfully.');
+                },
+                isLast: true,
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                      Clear ({crashRecords.length})
+                    </react_native_1.Text>
+                  </react_native_1.View>),
+            })}
             </react_native_1.View>
-          </react_native_1.View>) : (<react_native_1.View style={{ gap: 14 }}>
+          </react_native_1.View>)}
+
+        {/* ─── TAB 3: UI & APPEARANCE ────────────────────────────────────────── */}
+        {settingsActiveSubTab === 'ui' && (<react_native_1.View style={{ gap: 14 }}>
+            {/* Section 0: Interactive Walkthrough Tour */}
+            <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,
+            }}>
+                ONBOARDING & GUIDE
+              </react_native_1.Text>
+
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 10,
+            }}>
+                <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+            }}>
+                  <react_native_1.View style={{
+                width: 34,
+                height: 34,
+                borderRadius: 9,
+                backgroundColor: `${AppColors_1.AppColors.purple}16`,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                    <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={16}/>
+                  </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,
+            }}>
+                      First-Time Walkthrough
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.grayTextWeak,
+                marginTop: 1,
+                lineHeight: 16,
+            }}>
+                      Explore features, gestures & developer tools
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                <TouchableScale_1.default style={{
+                backgroundColor: `${AppColors_1.AppColors.purple}14`,
+                borderColor: `${AppColors_1.AppColors.purple}30`,
+                borderWidth: 1,
+                paddingHorizontal: 12,
+                paddingVertical: 7,
+                borderRadius: 8,
+            }} onPress={openWalkthrough} hitSlop={8}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 12,
+                color: AppColors_1.AppColors.purple,
+            }}>
+                    Start Tour →
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+
             {/* Section 1: Appearance */}
             <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,

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

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