react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,4068 +1,726 @@
-import React, { useMemo, useState, useEffect, useRef } from 'react';
-import { Alert, Animated, DevSettings, Dimensions, Linking, PixelRatio, Platform, ScrollView, StatusBar, StyleSheet, Text, TextInput, View, } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-import { animateNextLayout, useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
-import Slider from '../Slider';
-import { toggleGlobalTheme } from '../../styles';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { isPersistentStorageAvailable, calculateRamBasedLimits, } from '../../helpers/settingsStore';
-import { clearNetworkLogs } from '../../customHooks/networkLogger';
-import { clearConsoleLogs } from '../../customHooks/consoleLogger';
-import { clearAnalyticsEvents } from '../../customHooks/analyticsLogger';
-import { clearCrashRecords } from '../../customHooks/crashHandler';
-import { clearCachedBundleAnalysis } from '../../customHooks/bundleAnalyzer';
-import { clearPerformanceEvents } from '../../customHooks/performanceTracker';
-import { isReduxConnected } from '../../customHooks/reduxLogger';
-import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
-import { useTranslation } from '../../i18n';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, GitHubIcon, InfoCircleIcon, CopyIcon, FilmIcon, ScreencastIcon, CameraIcon, VideoCameraIcon, MicrophoneIcon, GifIcon, ImageIcon, } from '../NetworkIcons';
-import { ScreenCapture } from '../../capture';
-import { LIB_VERSION } from '../../constants';
-import { copyToClipboard, isLocalDebugEnvironment, getAppName, getBundleIdentifier, getAppVersionAndBuild, } from '../../helpers';
-import { showToast } from '../../helpers/toast';
-import { pruneAllLogs } from '../../helpers/memoryManager';
-const SettingsPanel = () => {
-    const { t } = useTranslation();
-    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, } = useInspector();
-    const [stagedHeight, setStagedHeight] = useState(modalHeightPercent);
-    useEffect(() => {
-        setStagedHeight(modalHeightPercent);
-    }, [modalHeightPercent]);
-    const autoRamProfile = calculateRamBasedLimits(deviceFreeRamMb);
-    const isPersistent = isPersistentStorageAvailable();
-    const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight || 24 : 44;
-    const headerTopPadding = modalHeightPercent >= 95 ? statusBarHeight : 0;
-    const allModules = useMemo(() => [
-        {
-            id: 1,
-            key: 'apis',
-            label: 'APIs (Network)',
-            category: 'core',
-            icon: 'apis',
-            desc: 'HTTP/HTTPS requests, GraphQL, Axios & WebSocket inspector',
-        },
-        {
-            id: 2,
-            key: 'logs',
-            label: 'Console Logs',
-            category: 'core',
-            icon: 'logs',
-            desc: 'Terminal console logs, warnings, errors & stack traces',
-        },
-        {
-            id: 3,
-            key: 'analytics',
-            label: 'Analytics Logger',
-            category: 'telemetry',
-            icon: 'analytics',
-            desc: 'Firebase & custom analytics events, user properties & params',
-        },
-        {
-            id: 4,
-            key: 'redux',
-            label: 'Redux Inspector',
-            category: 'telemetry',
-            icon: 'redux',
-            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',
-            icon: 'device',
-            desc: 'Hardware specs, IP address, screen metrics, UDID & runtime stats',
-        },
-        {
-            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',
-            icon: 'debugging',
-            desc: 'QR Code bridge for direct Debug APK download & Metro live-reload sync',
-        },
-        {
-            id: 11,
-            key: 'media',
-            label: 'Screencast',
-            category: 'diagnostic',
-            icon: 'media',
-            desc: 'Screenshots, video recordings, audio narration & animated GIFs',
-        },
-    ].filter(m => m.key === 'debugging'
-        ? Platform.OS === 'android' && isLocalDebugEnvironment()
-        : true), []);
-    const [stagedTabVisibility, setStagedTabVisibility] = useState(() => ({
-        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),
-        media: Boolean(tabVisibility?.media ?? true),
-    }));
-    useEffect(() => {
-        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),
-            media: Boolean(tabVisibility?.media ?? true),
-        });
-    }, [tabVisibility]);
-    const hasUnsavedChanges = useMemo(() => {
-        return allModules.some(m => Boolean(stagedTabVisibility[m.key]) !==
-            Boolean(tabVisibility?.[m.key]));
-    }, [stagedTabVisibility, tabVisibility, allModules]);
-    const stagedActiveCount = allModules.filter(m => m.key === 'apis' || Boolean(stagedTabVisibility[m.key])).length;
-    const handleSaveChanges = () => {
-        if (!hasUnsavedChanges)
-            return;
-        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),
-                        media: Boolean(tabVisibility?.media ?? true),
-                    });
-                },
-            },
-            {
-                text: 'Save & Reload',
-                style: 'default',
-                onPress: () => {
-                    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__ && DevSettings && DevSettings.reload) {
-                            DevSettings.reload();
-                        }
-                    }, 350);
-                },
-            },
-        ]);
-    };
-    const [isDefaultTabDropdownOpen, setIsDefaultTabDropdownOpen] = useState(false);
-    const goBackToMain = () => {
-        animateNextLayout();
-        setSettingsPage('main');
-    };
-    const renderSettingRow = (opts) => {
-        return (<View style={{
-                paddingVertical: 12,
-                borderBottomWidth: opts.isLast ? 0 : 1,
-                borderBottomColor: AppColors.dividerColor,
-            }}>
-        <TouchableScale disabled={!opts.onPress} onPress={opts.onPress} style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 12,
-            }}>
-          <View style={{
-                width: 36,
-                height: 36,
-                borderRadius: 10,
-                backgroundColor: AppColors.purpleShade50,
-                borderWidth: 1,
-                borderColor: `${AppColors.purple}2E`,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-            {opts.icon}
-          </View>
-          <View style={{ flex: 1 }}>
-            <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 14,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-              {opts.label}
-            </Text>
-            {opts.description ? (<Text style={{
-                    fontFamily: AppFonts.interRegular,
-                    fontSize: 11,
-                    lineHeight: 15,
-                    color: AppColors.grayText,
-                    marginTop: 1,
-                }}>
-                {opts.description}
-              </Text>) : null}
-          </View>
-          {opts.right || null}
-        </TouchableScale>
-        {opts.numericInput && (<View style={{ marginTop: 10, gap: 6 }}>
-            <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    backgroundColor: AppColors.grayBackground,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: AppColors.dividerColor,
-                    paddingHorizontal: 12,
-                    paddingVertical: 4,
-                }}>
-              <TextInput style={{
-                    flex: 1,
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 14,
-                    lineHeight: 18,
-                    color: AppColors.primaryBlack,
-                    paddingVertical: 6,
-                }} value={String(opts.numericInput.value || '')} onChangeText={text => {
-                    const num = parseInt(text.replace(/[^0-9]/g, ''), 10);
-                    if (!isNaN(num)) {
-                        const clamped = Math.max(opts.numericInput?.min ?? 1, Math.min(opts.numericInput?.max ?? 10000, num));
-                        opts.numericInput?.onChange(clamped);
-                    }
-                }} keyboardType={opts.numericInput.keyboardType ?? 'number-pad'} placeholder={opts.numericInput.placeholder} placeholderTextColor={AppColors.grayTextWeak} maxLength={6} selectTextOnFocus/>
-              <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 11,
-                    color: AppColors.purple,
-                    marginLeft: 6,
-                }}>
+import{useMemo as er,useState as $e,useEffect as Me,useRef as lo}from"react";import{Alert as W,Animated as Ee,DevSettings as Oe,Platform as je,ScrollView as A,StatusBar as ao,StyleSheet as rr,Text as S,TextInput as Co,View as C}from"react-native";import So,{Path as Cr}from"react-native-svg";import{animateNextLayout as Q,useInspector as To}from"./InspectorContext";import H from"../TouchableScale";import Vo from"../Slider";import{toggleGlobalTheme as Bo}from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{isPersistentStorageAvailable as zo,calculateRamBasedLimits as Ro}from"../../helpers/settingsStore";import{clearNetworkLogs as vo}from"../../customHooks/networkLogger";import{clearConsoleLogs as Ho}from"../../customHooks/consoleLogger";import{clearAnalyticsEvents as Do}from"../../customHooks/analyticsLogger";import{clearCrashRecords as Lo}from"../../customHooks/crashHandler";import{clearCachedBundleAnalysis as Io}from"../../customHooks/bundleAnalyzer";import{clearPerformanceEvents as Fo}from"../../customHooks/performanceTracker";import{isReduxConnected as Wo}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as Ao}from"../../customHooks/analyticsLogger";import{useTranslation as Po}from"../../i18n";import{SignalIcon as Z,TerminalIcon as Ne,AnalyticsIcon as Ge,SettingsIcon as $o,SunIcon as Mo,MoonIcon as Eo,ScreenIcon as Sr,MotionIcon as Oo,LayersIcon as Ce,EyeIcon as Tr,CheckIcon as N,TrashIcon as P,PackageIcon as Se,ReduxIcon as Ue,PerformanceIcon as Je,CrashIcon as Vr,ShieldAlertIcon as Br,ForwardChevronIcon as No,ChevronDownIcon as Go,BrainIcon as Rr,SmartphoneIcon as Uo,DatabaseIcon as Jo,QrCodeIcon as _o,FilmIcon as Ko,ScreencastIcon as Qo,CameraIcon as Hr,VideoCameraIcon as Xo,MicrophoneIcon as Yo,GifIcon as Zo,ImageIcon as Ct}from"../NetworkIcons";import{ScreenCapture as xt}from"../../capture";import{isLocalDebugEnvironment as kt}from"../../helpers";import{showToast as Dr}from"../../helpers/toast";import{pruneAllLogs as St}from"../../helpers/memoryManager";const Tt=()=>{const{t:x}=Po(),{settingsPage:F,setSettingsPage:Te,settingsActiveSubTab:G,setSettingsActiveSubTab:Lr,tabVisibility:T,toggleTabVisibility:Ir,defaultTab:U,setDefaultTab:Fr,isDark:J,setIsDark:Wr,modalHeightPercent:_,setModalHeightPercent:Ar,modalAnimationType:Pr,setModalAnimationType:$r,showDuplicateLogs:Ve,setShowDuplicateLogs:Mr,showUpdateToast:Be,setShowUpdateToast:Er,showConsoleLevels:Or,setShowConsoleLevels:jr,resetToDefaults:Vt,closeModal:Nr,storage:Bt,logs:ze,consoleLogs:Re,analyticsEvents:ve,reduxState:He,maxNetworkLogs:De,setMaxNetworkLogs:Gr,maxConsoleLogs:Le,setMaxConsoleLogs:Ur,maxAnalyticsEventsLimit:_e,setMaxAnalyticsEventsLimit:qr,isAutoRamLimitEnabled:R,setIsAutoRamLimitEnabled:Jr,deviceFreeRamMb:Ie,reduxAutoRefresh:Fe,setReduxAutoRefreshState:_r,reduxExpandDepth:Ke,setReduxExpandDepth:Kr,switchActiveTab:zt,setSelected:Qr,setSelectedEvent:Xr,setReduxState:Yr,crashRecords:We,maxCrashLogs:Qe,setMaxCrashLogs:Zr,updateAvailable:Rt,latestNpmVersion:vt}=To(),[X,Xe]=$e(_);Me(()=>{Xe(_)},[_]);const K=Ro(Ie),Ht=zo(),eo=je.OS==="android"?ao.currentHeight||24:44,Dt=_>=95?eo:0,L=er(()=>[{id:1,key:"apis",label:"APIs (Network)",category:"core",icon:"apis",desc:"HTTP/HTTPS requests, GraphQL, Axios & WebSocket inspector"},{id:2,key:"logs",label:"Console Logs",category:"core",icon:"logs",desc:"Terminal console logs, warnings, errors & stack traces"},{id:3,key:"analytics",label:"Analytics Logger",category:"telemetry",icon:"analytics",desc:"Firebase & custom analytics events, user properties & params"},{id:4,key:"redux",label:"Redux Inspector",category:"telemetry",icon:"redux",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",icon:"device",desc:"Hardware specs, IP address, screen metrics, UDID & runtime stats"},{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",icon:"debugging",desc:"QR Code bridge for direct Debug APK download & Metro live-reload sync"},{id:11,key:"media",label:"Screencast",category:"diagnostic",icon:"media",desc:"Screenshots, video recordings, audio narration & animated GIFs"}].filter(r=>r.key==="debugging"?je.OS==="android"&&kt():!0),[]),[M,Ae]=$e(()=>({apis:!0,logs:!!T?.logs,analytics:!!T?.analytics,redux:!!T?.redux,storage:!!T?.storage,device:!!T?.device,crash:!!T?.crash,bundle:!!T?.bundle,performance:!!T?.performance,debugging:!!T?.debugging,media:!!(T?.media??!0)}));Me(()=>{Ae({apis:!0,logs:!!T?.logs,analytics:!!T?.analytics,redux:!!T?.redux,storage:!!T?.storage,device:!!T?.device,crash:!!T?.crash,bundle:!!T?.bundle,performance:!!T?.performance,debugging:!!T?.debugging,media:!!(T?.media??!0)})},[T]);const q=er(()=>L.some(r=>!!M[r.key]!=!!T?.[r.key]),[M,T,L]),ro=L.filter(r=>r.key==="apis"||!!M[r.key]).length,oo=()=>{q&&W.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:()=>{Ae({apis:!0,logs:!!T?.logs,analytics:!!T?.analytics,redux:!!T?.redux,storage:!!T?.storage,device:!!T?.device,crash:!!T?.crash,bundle:!!T?.bundle,performance:!!T?.performance,debugging:!!T?.debugging,media:!!(T?.media??!0)})}},{text:"Save & Reload",style:"default",onPress:()=>{Q(),L.forEach(r=>{if(r.key!=="apis"){const V=!!M[r.key],D=!!T?.[r.key];V!==D&&Ir(r.key)}}),Nr(),setTimeout(()=>{__DEV__&&Oe&&Oe.reload&&Oe.reload()},350)}}])},[Pe,Ye]=$e(!1),Lt=()=>{Q(),Te("main")},z=r=><C style={{paddingVertical:12,borderBottomWidth:r.isLast?0:1,borderBottomColor:e.dividerColor}}>
+        <H disabled={!r.onPress}onPress={r.onPress}style={{flexDirection:"row",alignItems:"center",gap:12}}>
+          <C style={{width:36,height:36,borderRadius:10,backgroundColor:e.purpleShade50,borderWidth:1,borderColor:`${e.purple}2E`,alignItems:"center",justifyContent:"center"}}>
+            {r.icon}
+          </C>
+          <C style={{flex:1}}>
+            <S style={{fontFamily:k.interBold,fontSize:14,lineHeight:18,color:e.primaryBlack}}>
+              {r.label}
+            </S>
+            {r.description?<S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
+                {r.description}
+              </S>:null}
+          </C>
+          {r.right||null}
+        </H>
+        {r.numericInput&&<C style={{marginTop:10,gap:6}}>
+            <C style={{flexDirection:"row",alignItems:"center",backgroundColor:e.grayBackground,borderRadius:8,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:12,paddingVertical:4}}>
+              <Co style={{flex:1,fontFamily:k.interMedium,fontSize:14,lineHeight:18,color:e.primaryBlack,paddingVertical:6}}value={String(r.numericInput.value||"")}onChangeText={V=>{const D=parseInt(V.replace(/[^0-9]/g,""),10);if(!isNaN(D)){const v=Math.max(r.numericInput?.min??1,Math.min(r.numericInput?.max??1e4,D));r.numericInput?.onChange(v)}}}keyboardType={r.numericInput.keyboardType??"number-pad"}placeholder={r.numericInput.placeholder}placeholderTextColor={e.grayTextWeak}maxLength={6}selectTextOnFocus/>
+              <S style={{fontFamily:k.interBold,fontSize:11,color:e.purple,marginLeft:6}}>
                 MAX
-              </Text>
-            </View>
-            {opts.numericInput.min !== undefined ||
-                    opts.numericInput.max !== undefined ? (<Text style={{
-                        fontFamily: AppFonts.interRegular,
-                        fontSize: 10,
-                        lineHeight: 13,
-                        color: AppColors.grayTextWeak,
-                    }}>
-                Range: {opts.numericInput.min ?? 1} -{' '}
-                {opts.numericInput.max ?? '∞'}
-              </Text>) : null}
-          </View>)}
-        {opts.picker && (<View style={{
-                    flexDirection: 'row',
-                    backgroundColor: AppColors.grayBackground,
-                    borderRadius: 8,
-                    padding: 2.5,
-                    marginTop: 10,
-                    borderWidth: 1,
-                    borderColor: AppColors.dividerColor,
-                }}>
-            {opts.picker.options.map(opt => {
-                    const isActive = opts.picker.selectedValue === opt;
-                    return (<TouchableScale key={String(opt)} onPress={() => opts.picker.onSelect(opt)} style={{
-                            flex: 1,
-                            paddingVertical: 6,
-                            alignItems: 'center',
-                            borderRadius: 6,
-                            backgroundColor: isActive
-                                ? AppColors.purple
-                                : 'transparent',
-                        }}>
-                  <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 11,
-                            lineHeight: 14,
-                            color: isActive ? AppColors.white : AppColors.grayText,
-                        }}>
-                    {opts.picker.formatLabel
-                            ? opts.picker.formatLabel(opt)
-                            : opt}
-                  </Text>
-                </TouchableScale>);
-                })}
-          </View>)}
-      </View>);
-    };
-    const renderMainSettingsContent = () => (<View style={{
-            flex: 1,
-            backgroundColor: AppColors.grayBackground,
-        }}>
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 14 }} showsVerticalScrollIndicator={false}>
+              </S>
+            </C>
+            {r.numericInput.min!==void 0||r.numericInput.max!==void 0?<S style={{fontFamily:k.interRegular,fontSize:10,lineHeight:13,color:e.grayTextWeak}}>
+                Range: {r.numericInput.min??1} -{" "}
+                {r.numericInput.max??"\u221E"}
+              </S>:null}
+          </C>}
+        {r.picker&&<C style={{flexDirection:"row",backgroundColor:e.grayBackground,borderRadius:8,padding:2.5,marginTop:10,borderWidth:1,borderColor:e.dividerColor}}>
+            {r.picker.options.map(V=>{const D=r.picker.selectedValue===V;return<H key={String(V)}onPress={()=>r.picker.onSelect(V)}style={{flex:1,paddingVertical:6,alignItems:"center",borderRadius:6,backgroundColor:D?e.purple:"transparent"}}>
+                  <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:D?e.white:e.grayText}}>
+                    {r.picker.formatLabel?r.picker.formatLabel(V):V}
+                  </S>
+                </H>})}
+          </C>}
+      </C>,to=()=><C style={{flex:1,backgroundColor:e.grayBackground}}>
+      <A style={{flex:1}}contentContainerStyle={{padding:16,paddingBottom:100,gap:14}}showsVerticalScrollIndicator={!1}>
         
         
-        <View style={{
-            backgroundColor: AppColors.primaryLight,
-            borderRadius: 13,
-            paddingVertical: 4,
-            paddingHorizontal: 4,
-            borderWidth: 1,
-            borderColor: AppColors.grayBorderSecondary,
-            shadowColor: AppColors.black,
-            shadowOpacity: 0.04,
-            shadowRadius: 4,
-            shadowOffset: { width: 0, height: 2 },
-        }}>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 6,
-            paddingHorizontal: 2,
-        }}>
-            {[
-            {
-                key: 'module',
-                label: t('settings.modulesAndTools', 'Modules & Tools'),
-                Icon: LayersIcon,
-                badge: `${allModules.filter(m => stagedTabVisibility?.[m.key] ||
-                    m.key === 'apis').length}/${allModules.length}`,
-            },
-            {
-                key: 'ui',
-                label: t('settings.uiPreferences', 'UI Preferences'),
-                Icon: ScreenIcon,
-            },
-            {
-                key: 'limits',
-                label: t('settings.ramLimits', 'RAM & Limits'),
-                Icon: BrainIcon,
-            },
-            {
-                key: 'capture',
-                label: t('settings.screenVideoCapture', 'Screen & Video Capture'),
-                Icon: CameraIcon,
-            },
-            {
-                key: 'about',
-                label: t('settings.aboutAndSpecs', 'About & Specs'),
-                Icon: InfoCircleIcon,
-            },
-        ].map(tab => {
-            const isActive = settingsActiveSubTab === tab.key;
-            const IconComp = tab.Icon;
-            return (<TouchableScale key={tab.key} accessible={true} accessibilityRole="tab" accessibilityLabel={tab.label} accessibilityState={{ selected: isActive }} onPress={() => {
-                    animateNextLayout();
-                    setSettingsActiveSubTab(tab.key);
-                }} style={{
-                    paddingVertical: 8,
-                    paddingHorizontal: 14,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    gap: 6,
-                    borderRadius: 9,
-                    backgroundColor: isActive
-                        ? AppColors.purple
-                        : 'transparent',
-                }}>
-                  <IconComp color={isActive ? AppColors.white : AppColors.grayText} size={13}/>
-                  <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 12.5,
-                    lineHeight: 16,
-                    color: isActive ? AppColors.white : AppColors.grayText,
-                }}>
-                    {tab.label}
-                  </Text>
-                  {tab.badge && (<View style={{
-                        backgroundColor: isActive
-                            ? 'rgba(255,255,255,0.25)'
-                            : `${AppColors.purple}18`,
-                        paddingHorizontal: 5.5,
-                        paddingVertical: 1,
-                        borderRadius: 10,
-                    }}>
-                      <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 9.5,
-                        color: isActive ? AppColors.white : AppColors.purple,
-                    }}>
-                        {tab.badge}
-                      </Text>
-                    </View>)}
-                </TouchableScale>);
-        })}
-          </ScrollView>
-        </View>
-
-        {settingsActiveSubTab === 'module' && (<View style={{ gap: 12 }}>
+        <C style={{backgroundColor:e.primaryLight,borderRadius:13,paddingVertical:4,paddingHorizontal:4,borderWidth:1,borderColor:e.grayBorderSecondary,shadowColor:e.black,shadowOpacity:.04,shadowRadius:4,shadowOffset:{width:0,height:2}}}>
+          <A horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:2}}>
+            {[{key:"module",label:x("settings.modulesAndTools","Modules & Tools"),Icon:Ce,badge:`${L.filter(r=>M?.[r.key]||r.key==="apis").length}/${L.length}`},{key:"ui",label:x("settings.uiPreferences","UI Preferences"),Icon:Sr},{key:"limits",label:x("settings.ramLimits","RAM & Limits"),Icon:Rr},{key:"capture",label:x("settings.screenVideoCapture","Screen & Video Capture"),Icon:Hr}].map(r=>{const V=G===r.key,D=r.Icon;return<H key={r.key}accessible={!0}accessibilityRole="tab"accessibilityLabel={r.label}accessibilityState={{selected:V}}onPress={()=>{Q(),Lr(r.key)}}style={{paddingVertical:8,paddingHorizontal:14,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,borderRadius:9,backgroundColor:V?e.purple:"transparent"}}>
+                  <D color={V?e.white:e.grayText}size={13}/>
+                  <S style={{fontFamily:k.interBold,fontSize:12.5,lineHeight:16,color:V?e.white:e.grayText}}>
+                    {r.label}
+                  </S>
+                  {r.badge&&<C style={{backgroundColor:V?"rgba(255,255,255,0.25)":`${e.purple}18`,paddingHorizontal:5.5,paddingVertical:1,borderRadius:10}}>
+                      <S style={{fontFamily:k.interBold,fontSize:9.5,color:V?e.white:e.purple}}>
+                        {r.badge}
+                      </S>
+                    </C>}
+                </H>})}
+          </A>
+        </C>
+
+        {G==="module"&&<C style={{gap:12}}>
             
-            <View style={{ gap: 10 }}>
-              {allModules.map(moduleItem => {
-                const isReduxAvail = isReduxConnected();
-                const isAnalyticsAvail = isAnalyticsConnected();
-                const isUnavailable = (moduleItem.key === 'redux' && !isReduxAvail) ||
-                    (moduleItem.key === 'analytics' && !isAnalyticsAvail);
-                const isLocked = moduleItem.key === 'apis' || isUnavailable;
-                const isChecked = moduleItem.key === 'apis' ||
-                    (Boolean(stagedTabVisibility?.[moduleItem.key]) &&
-                        !isUnavailable);
-                const liveStats = moduleItem.key === 'apis'
-                    ? `${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}`
-                                            : '';
-                return (<View key={moduleItem.key} style={{
-                        backgroundColor: AppColors.primaryLight,
-                        borderRadius: 14,
-                        borderWidth: 1.5,
-                        borderColor: isChecked
-                            ? `${AppColors.purple}38`
-                            : AppColors.grayBorderSecondary,
-                        padding: 14,
-                        gap: 10,
-                        shadowColor: AppColors.black,
-                        shadowOpacity: isChecked ? 0.04 : 0.02,
-                        shadowRadius: 5,
-                        shadowOffset: { width: 0, height: 2 },
-                    }}>
+            <C style={{gap:10}}>
+              {L.map(r=>{const V=Wo(),D=Ao(),v=r.key==="redux"&&!V||r.key==="analytics"&&!D,I=r.key==="apis"||v,B=r.key==="apis"||!!M?.[r.key]&&!v,io=r.key==="apis"?`${ze.length} requests \u2022 Limit: ${De}`:r.key==="logs"?`${Re.length} logs \u2022 Limit: ${Le}`:r.key==="performance"?"60 FPS Target \u2022 Memory Telemetry":r.key==="bundle"?"Metro Packager \u2022 Dependency Map":r.key==="crash"?`${We?.length||0} crashes recorded \u2022 Crash Guard`:r.key==="analytics"?`${ve.length} events logged`:r.key==="redux"?`${Object.keys(He||{}).length} slices \u2022 Depth: ${Ke}`:"";return<C key={r.key}style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1.5,borderColor:B?`${e.purple}38`:e.grayBorderSecondary,padding:14,gap:10,shadowColor:e.black,shadowOpacity:B?.04:.02,shadowRadius:5,shadowOffset:{width:0,height:2}}}>
                     
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'flex-start',
-                        gap: 10,
-                    }}>
+                    <C style={{flexDirection:"row",alignItems:"flex-start",gap:10}}>
                       
-                      <TouchableScale accessible={true} accessibilityRole="checkbox" accessibilityLabel={`Select ${moduleItem.label}`} accessibilityState={{
-                        checked: isChecked,
-                        disabled: isLocked,
-                    }} disabled={isLocked} onPress={() => {
-                        if (isLocked)
-                            return;
-                        setStagedTabVisibility(prev => ({
-                            ...prev,
-                            [moduleItem.key]: !prev[moduleItem.key],
-                        }));
-                    }} hitSlop={8} style={{
-                        width: 22,
-                        height: 22,
-                        borderRadius: 6,
-                        borderWidth: isChecked ? 0 : 1.8,
-                        borderColor: isLocked
-                            ? AppColors.dividerColor
-                            : AppColors.grayBorderSecondary,
-                        backgroundColor: moduleItem.key === 'apis'
-                            ? `${AppColors.blue500}22`
-                            : isChecked
-                                ? AppColors.purple
-                                : AppColors.grayBackground,
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        marginTop: 7,
-                        shadowColor: isChecked
-                            ? AppColors.purple
-                            : 'transparent',
-                        shadowOpacity: isChecked ? 0.25 : 0,
-                        shadowRadius: 2,
-                        elevation: isChecked ? 2 : 0,
-                    }}>
-                        {moduleItem.key === 'apis' ? (<CheckIcon size={12} color={AppColors.blue500}/>) : isChecked ? (<CheckIcon size={12} color={AppColors.white}/>) : isLocked ? (<Svg width={10} height={10} viewBox="0 0 24 24" fill="none">
-                            <Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
-                            <Path d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" fill={AppColors.grayText}/>
-                          </Svg>) : null}
-                      </TouchableScale>
+                      <H accessible={!0}accessibilityRole="checkbox"accessibilityLabel={`Select ${r.label}`}accessibilityState={{checked:B,disabled:I}}disabled={I}onPress={()=>{I||Ae(Ze=>({...Ze,[r.key]:!Ze[r.key]}))}}hitSlop={8}style={{width:22,height:22,borderRadius:6,borderWidth:B?0:1.8,borderColor:I?e.dividerColor:e.grayBorderSecondary,backgroundColor:r.key==="apis"?`${e.blue500}22`:B?e.purple:e.grayBackground,alignItems:"center",justifyContent:"center",marginTop:7,shadowColor:B?e.purple:"transparent",shadowOpacity:B?.25:0,shadowRadius:2,elevation:B?2:0}}>
+                        {r.key==="apis"?<N size={12}color={e.blue500}/>:B?<N size={12}color={e.white}/>:I?<So width={10}height={10}viewBox="0 0 24 24"fill="none">
+                            <Cr d="M7 10V7a5 5 0 0 1 10 0v3"stroke={e.grayText}strokeWidth="2.2"strokeLinecap="round"/>
+                            <Cr d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z"fill={e.grayText}/>
+                          </So>:null}
+                      </H>
 
                       
-                      <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`${moduleItem.label} settings`} disabled={isUnavailable} onPress={() => {
-                        animateNextLayout();
-                        setSettingsPage(moduleItem.key);
-                    }} style={{
-                        flex: 1,
-                        flexDirection: 'row',
-                        alignItems: 'flex-start',
-                        gap: 10,
-                    }}>
+                      <H accessible={!0}accessibilityRole="button"accessibilityLabel={`${r.label} settings`}disabled={v}onPress={()=>{Q(),Te(r.key)}}style={{flex:1,flexDirection:"row",alignItems:"flex-start",gap:10}}>
                         
-                        <View style={{
-                        width: 36,
-                        height: 36,
-                        borderRadius: 10,
-                        backgroundColor: isLocked
-                            ? `${AppColors.grayBorderSecondary}4D`
-                            : isChecked
-                                ? `${AppColors.purple}14`
-                                : AppColors.grayBackground,
-                        borderWidth: 1,
-                        borderColor: isLocked
-                            ? AppColors.dividerColor
-                            : isChecked
-                                ? `${AppColors.purple}33`
-                                : AppColors.grayBorderSecondary,
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        marginTop: 1,
-                    }}>
-                          {moduleItem.icon === 'apis' && (<SignalIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'logs' && (<TerminalIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'performance' && (<PerformanceIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'bundle' && (<PackageIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'crash' && (<CrashIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'analytics' && (<AnalyticsIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'redux' && (<ReduxIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'device' && (<SmartphoneIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'storage' && (<DatabaseIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'debugging' && (<QrCodeIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                          {moduleItem.icon === 'media' && (<ScreencastIcon color={isChecked
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak} size={16}/>)}
-                        </View>
+                        <C style={{width:36,height:36,borderRadius:10,backgroundColor:I?`${e.grayBorderSecondary}4D`:B?`${e.purple}14`:e.grayBackground,borderWidth:1,borderColor:I?e.dividerColor:B?`${e.purple}33`:e.grayBorderSecondary,alignItems:"center",justifyContent:"center",marginTop:1}}>
+                          {r.icon==="apis"&&<Z color={B?e.purple:e.grayTextWeak}size={16}/>}
+                          {r.icon==="logs"&&<Ne color={B?e.purple:e.grayTextWeak}size={16}/>}
+                          {r.icon==="performance"&&<Je color={B?e.purple:e.grayTextWeak}size={16}/>}
+                          {r.icon==="bundle"&&<Se color={B?e.purple:e.grayTextWeak}size={16}/>}
+                          {r.icon==="crash"&&<Vr color={B?e.purple:e.grayTextWeak}size={16}/>}
+                          {r.icon==="analytics"&&<Ge color={B?e.purple:e.grayTextWeak}size={16}/>}
+                          {r.icon==="redux"&&<Ue color={B?e.purple:e.grayTextWeak}size={16}/>}
+                          {r.icon==="device"&&<Uo color={B?e.purple:e.grayTextWeak}size={16}/>}
+                          {r.icon==="storage"&&<Jo color={B?e.purple:e.grayTextWeak}size={16}/>}
+                          {r.icon==="debugging"&&<_o color={B?e.purple:e.grayTextWeak}size={16}/>}
+                          {r.icon==="media"&&<Qo color={B?e.purple:e.grayTextWeak}size={16}/>}
+                        </C>
 
                         
-                        <View style={{ flex: 1, gap: 2 }}>
-                          <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                        flexWrap: 'wrap',
-                    }}>
-                            <View style={{
-                        minWidth: 22,
-                        height: 22,
-                        paddingHorizontal: 5,
-                        borderRadius: 11,
-                        backgroundColor: isChecked
-                            ? `${AppColors.purple}1C`
-                            : `${AppColors.grayBorderSecondary}80`,
-                        borderWidth: 1,
-                        borderColor: isChecked
-                            ? `${AppColors.purple}44`
-                            : AppColors.grayBorderSecondary,
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}>
-                              <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10,
-                        lineHeight: 13,
-                        color: isChecked
-                            ? AppColors.purple
-                            : AppColors.grayText,
-                    }}>
-                                #{moduleItem.id}
-                              </Text>
-                            </View>
-                            <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 14,
-                        lineHeight: 18,
-                        color: isLocked
-                            ? AppColors.grayText
-                            : AppColors.primaryBlack,
-                    }}>
-                              {moduleItem.label}
-                            </Text>
+                        <C style={{flex:1,gap:2}}>
+                          <C style={{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"}}>
+                            <C style={{minWidth:22,height:22,paddingHorizontal:5,borderRadius:11,backgroundColor:B?`${e.purple}1C`:`${e.grayBorderSecondary}80`,borderWidth:1,borderColor:B?`${e.purple}44`:e.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
+                              <S style={{fontFamily:k.interBold,fontSize:10,lineHeight:13,color:B?e.purple:e.grayText}}>
+                                #{r.id}
+                              </S>
+                            </C>
+                            <S style={{fontFamily:k.interBold,fontSize:14,lineHeight:18,color:I?e.grayText:e.primaryBlack}}>
+                              {r.label}
+                            </S>
 
                             
-                            {moduleItem.key === defaultTab &&
-                        !isUnavailable && (<View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            backgroundColor: `${AppColors.purple}14`,
-                            borderRadius: 12,
-                            paddingHorizontal: 5,
-                            paddingVertical: 1.5,
-                            borderWidth: 1,
-                            borderColor: `${AppColors.purple}2E`,
-                            gap: 3,
-                        }}>
-                                  <View style={{
-                            width: 4,
-                            height: 4,
-                            borderRadius: 2,
-                            backgroundColor: AppColors.purple,
-                        }}/>
-                                  <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 8,
-                            lineHeight: 11,
-                            color: AppColors.purple,
-                            letterSpacing: 0.4,
-                        }}>
-                                    {t('settings.defaultBadge')}
-                                  </Text>
-                                </View>)}
+                            {r.key===U&&!v&&<C style={{flexDirection:"row",alignItems:"center",backgroundColor:`${e.purple}14`,borderRadius:12,paddingHorizontal:5,paddingVertical:1.5,borderWidth:1,borderColor:`${e.purple}2E`,gap:3}}>
+                                  <C style={{width:4,height:4,borderRadius:2,backgroundColor:e.purple}}/>
+                                  <S style={{fontFamily:k.interBold,fontSize:8,lineHeight:11,color:e.purple,letterSpacing:.4}}>
+                                    {x("settings.defaultBadge")}
+                                  </S>
+                                </C>}
 
                             
-                            {moduleItem.key === 'apis' ? (<View style={{
-                            backgroundColor: `${AppColors.blue500}14`,
-                            borderRadius: 4,
-                            paddingHorizontal: 5,
-                            paddingVertical: 1.5,
-                            borderWidth: 1,
-                            borderColor: `${AppColors.blue500}33`,
-                        }}>
-                                <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 8,
-                            lineHeight: 11,
-                            color: AppColors.blue500,
-                            letterSpacing: 0.3,
-                        }}>
-                                  {t('settings.coreBadge')}
-                                </Text>
-                              </View>) : isUnavailable ? (<View style={{
-                            backgroundColor: `${AppColors.amber500}18`,
-                            borderRadius: 4,
-                            paddingHorizontal: 5,
-                            paddingVertical: 1.5,
-                            borderWidth: 1,
-                            borderColor: `${AppColors.amber500}35`,
-                        }}>
-                                <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 8,
-                            lineHeight: 11,
-                            color: AppColors.amber700,
-                            letterSpacing: 0.3,
-                        }}>
-                                  {moduleItem.key === 'redux'
-                            ? t('settings.notConnectedBadge')
-                            : t('settings.notDetectedBadge')}
-                                </Text>
-                              </View>) : isChecked ? (<View style={{
-                            backgroundColor: `${AppColors.liveGreen}18`,
-                            borderRadius: 4,
-                            paddingHorizontal: 5,
-                            paddingVertical: 1.5,
-                            borderWidth: 1,
-                            borderColor: `${AppColors.liveGreen}38`,
-                        }}>
-                                <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 8,
-                            lineHeight: 11,
-                            color: AppColors.green700,
-                            letterSpacing: 0.3,
-                        }}>
-                                  {t('settings.activeBadge')}
-                                </Text>
-                              </View>) : (<View style={{
-                            backgroundColor: `${AppColors.grayTextWeak}18`,
-                            borderRadius: 4,
-                            paddingHorizontal: 5,
-                            paddingVertical: 1.5,
-                            borderWidth: 1,
-                            borderColor: `${AppColors.grayTextWeak}2E`,
-                        }}>
-                                <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 8,
-                            lineHeight: 11,
-                            color: AppColors.grayTextWeak,
-                            letterSpacing: 0.3,
-                        }}>
-                                  {t('settings.dormantBadge')}
-                                </Text>
-                              </View>)}
-                          </View>
-
-                          <Text style={{
-                        fontFamily: AppFonts.interRegular,
-                        fontSize: 11,
-                        color: AppColors.grayText,
-                        lineHeight: 15,
-                        marginTop: 1,
-                    }}>
-                            {moduleItem.desc}
-                          </Text>
-                        </View>
-                      </TouchableScale>
-                    </View>
+                            {r.key==="apis"?<C style={{backgroundColor:`${e.blue500}14`,borderRadius:4,paddingHorizontal:5,paddingVertical:1.5,borderWidth:1,borderColor:`${e.blue500}33`}}>
+                                <S style={{fontFamily:k.interBold,fontSize:8,lineHeight:11,color:e.blue500,letterSpacing:.3}}>
+                                  {x("settings.coreBadge")}
+                                </S>
+                              </C>:v?<C style={{backgroundColor:`${e.amber500}18`,borderRadius:4,paddingHorizontal:5,paddingVertical:1.5,borderWidth:1,borderColor:`${e.amber500}35`}}>
+                                <S style={{fontFamily:k.interBold,fontSize:8,lineHeight:11,color:e.amber700,letterSpacing:.3}}>
+                                  {r.key==="redux"?x("settings.notConnectedBadge"):x("settings.notDetectedBadge")}
+                                </S>
+                              </C>:B?<C style={{backgroundColor:`${e.liveGreen}18`,borderRadius:4,paddingHorizontal:5,paddingVertical:1.5,borderWidth:1,borderColor:`${e.liveGreen}38`}}>
+                                <S style={{fontFamily:k.interBold,fontSize:8,lineHeight:11,color:e.green700,letterSpacing:.3}}>
+                                  {x("settings.activeBadge")}
+                                </S>
+                              </C>:<C style={{backgroundColor:`${e.grayTextWeak}18`,borderRadius:4,paddingHorizontal:5,paddingVertical:1.5,borderWidth:1,borderColor:`${e.grayTextWeak}2E`}}>
+                                <S style={{fontFamily:k.interBold,fontSize:8,lineHeight:11,color:e.grayTextWeak,letterSpacing:.3}}>
+                                  {x("settings.dormantBadge")}
+                                </S>
+                              </C>}
+                          </C>
+
+                          <S style={{fontFamily:k.interRegular,fontSize:11,color:e.grayText,lineHeight:15,marginTop:1}}>
+                            {r.desc}
+                          </S>
+                        </C>
+                      </H>
+                    </C>
 
                     
-                    {!isUnavailable && (<View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            paddingTop: 8,
-                            borderTopWidth: 1,
-                            borderTopColor: AppColors.dividerColor,
-                        }}>
+                    {!v&&<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingTop:8,borderTopWidth:1,borderTopColor:e.dividerColor}}>
                         
-                        <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 6,
-                            flex: 1,
-                        }}>
-                          <View style={{
-                            width: 6,
-                            height: 6,
-                            borderRadius: 3,
-                            backgroundColor: isChecked
-                                ? AppColors.liveGreen
-                                : AppColors.grayTextWeak,
-                        }}/>
-                          <Text style={{
-                            fontFamily: AppFonts.interMedium,
-                            fontSize: 11,
-                            color: AppColors.grayText,
-                            lineHeight: 14,
-                        }}>
-                            {liveStats}
-                          </Text>
-                        </View>
+                        <C style={{flexDirection:"row",alignItems:"center",gap:6,flex:1}}>
+                          <C style={{width:6,height:6,borderRadius:3,backgroundColor:B?e.liveGreen:e.grayTextWeak}}/>
+                          <S style={{fontFamily:k.interMedium,fontSize:11,color:e.grayText,lineHeight:14}}>
+                            {io}
+                          </S>
+                        </C>
 
                         
-                        <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Configure ${moduleItem.label} settings`} onPress={() => {
-                            animateNextLayout();
-                            setSettingsPage(moduleItem.key);
-                        }} style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 5,
-                            backgroundColor: `${AppColors.purple}12`,
-                            paddingHorizontal: 10,
-                            paddingVertical: 5,
-                            borderRadius: 8,
-                            borderWidth: 1,
-                            borderColor: `${AppColors.purple}26`,
-                        }}>
-                          <SettingsIcon color={AppColors.purple} size={11}/>
-                          <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 11,
-                            lineHeight: 14,
-                            color: AppColors.purple,
-                        }}>
-                            {t('settings.configure')}
-                          </Text>
-                          <ForwardChevronIcon color={AppColors.purple} size={9}/>
-                        </TouchableScale>
-                      </View>)}
-                  </View>);
-            })}
-            </View>
-          </View>)}
-
-        {settingsActiveSubTab === 'ui' && (<View style={{ gap: 14 }}>
+                        <H accessible={!0}accessibilityRole="button"accessibilityLabel={`Configure ${r.label} settings`}onPress={()=>{Q(),Te(r.key)}}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${e.purple}12`,paddingHorizontal:10,paddingVertical:5,borderRadius:8,borderWidth:1,borderColor:`${e.purple}26`}}>
+                          <$o color={e.purple}size={11}/>
+                          <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.purple}}>
+                            {x("settings.configure")}
+                          </S>
+                          <No color={e.purple}size={9}/>
+                        </H>
+                      </C>}
+                  </C>})}
+            </C>
+          </C>}
+
+        {G==="ui"&&<C style={{gap:14}}>
             
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 14,
-                gap: 12,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                {t('settings.appearanceTheme')}
-              </Text>
-
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }}>
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-                flex: 1,
-            }}>
-                  <View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                    {isDark ? (<SunIcon color={AppColors.purple} size={15}/>) : (<MoonIcon color={AppColors.purple} size={15}/>)}
-                  </View>
-                  <View style={{ flex: 1 }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                      {t('settings.general.darkMode')}
-                    </Text>
-                    <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                      {t('settings.general.darkModeDescription')}
-                    </Text>
-                  </View>
-                </View>
-
-                <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Dark Theme" accessibilityState={{ checked: isDark }} onPress={() => {
-                const newTheme = !isDark;
-                setIsDark(newTheme);
-                toggleGlobalTheme(newTheme);
-            }} style={{
-                width: 42,
-                height: 24,
-                borderRadius: 12,
-                backgroundColor: isDark
-                    ? AppColors.purple
-                    : AppColors.grayBorderSecondary,
-                padding: 2,
-                justifyContent: 'center',
-                alignItems: isDark ? 'flex-end' : 'flex-start',
-            }}>
-                  <View style={{
-                width: 20,
-                height: 20,
-                borderRadius: 10,
-                backgroundColor: AppColors.white,
-                shadowColor: AppColors.black,
-                shadowOpacity: 0.18,
-                shadowRadius: 2,
-                shadowOffset: { width: 0, height: 1 },
-            }}/>
-                </TouchableScale>
-              </View>
-            </View>
+            <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,overflow:"hidden",padding:14,gap:12}}>
+              <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.grayTextWeak,letterSpacing:.8}}>
+                {x("settings.appearanceTheme")}
+              </S>
+
+              <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
+                <C style={{flexDirection:"row",alignItems:"center",gap:10,flex:1}}>
+                  <C style={{width:32,height:32,borderRadius:8,backgroundColor:e.purpleShade50,alignItems:"center",justifyContent:"center"}}>
+                    {J?<Mo color={e.purple}size={15}/>:<Eo color={e.purple}size={15}/>}
+                  </C>
+                  <C style={{flex:1}}>
+                    <S style={{fontFamily:k.interBold,fontSize:13.5,lineHeight:18,color:e.primaryBlack}}>
+                      {x("settings.general.darkMode")}
+                    </S>
+                    <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
+                      {x("settings.general.darkModeDescription")}
+                    </S>
+                  </C>
+                </C>
+
+                <H accessible={!0}accessibilityRole="switch"accessibilityLabel="Toggle Dark Theme"accessibilityState={{checked:J}}onPress={()=>{const r=!J;Wr(r),Bo(r)}}style={{width:42,height:24,borderRadius:12,backgroundColor:J?e.purple:e.grayBorderSecondary,padding:2,justifyContent:"center",alignItems:J?"flex-end":"flex-start"}}>
+                  <C style={{width:20,height:20,borderRadius:10,backgroundColor:e.white,shadowColor:e.black,shadowOpacity:.18,shadowRadius:2,shadowOffset:{width:0,height:1}}}/>
+                </H>
+              </C>
+            </C>
 
             
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 14,
-                gap: 14,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                {t('settings.windowLayout')}
-              </Text>
+            <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,overflow:"hidden",padding:14,gap:14}}>
+              <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.grayTextWeak,letterSpacing:.8}}>
+                {x("settings.windowLayout")}
+              </S>
 
               
-              <View style={{ gap: 8 }}>
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: 10,
-            }}>
-                  <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-                flex: 1,
-            }}>
-                    <View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                      <ScreenIcon color={AppColors.purple} size={15}/>
-                    </View>
-                    <View style={{ flex: 1 }}>
-                      <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                        {t('settings.general.modalHeight')}
-                      </Text>
-                      <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                        {t('settings.general.modalHeightDescription')}
-                      </Text>
-                    </View>
-                  </View>
-
-                  {stagedHeight !== modalHeightPercent && (<TouchableScale onPress={() => {
-                    setModalHeightPercent(stagedHeight);
-                }} style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 5,
-                    backgroundColor: AppColors.purple,
-                    paddingHorizontal: 10,
-                    paddingVertical: 5,
-                    borderRadius: 7,
-                    shadowColor: AppColors.purple,
-                    shadowOffset: { width: 0, height: 1 },
-                    shadowOpacity: 0.28,
-                    shadowRadius: 2,
-                    elevation: 2,
-                }}>
-                      <CheckIcon size={11} color={AppColors.white}/>
-                      <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 11,
-                    color: AppColors.white,
-                }}>
-                        Save ({stagedHeight}%)
-                      </Text>
-                    </TouchableScale>)}
-                </View>
-
-                <View style={{ marginTop: 6 }}>
-                  <Slider value={stagedHeight} onValueChange={setStagedHeight} min={50} max={90} step={5} quickPresets={[50, 60, 70, 80, 90]} formatLabel={val => `${Math.round(val)}%`}/>
-                </View>
-              </View>
-
-              <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
+              <C style={{gap:8}}>
+                <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:10}}>
+                  <C style={{flexDirection:"row",alignItems:"center",gap:10,flex:1}}>
+                    <C style={{width:32,height:32,borderRadius:8,backgroundColor:e.purpleShade50,alignItems:"center",justifyContent:"center"}}>
+                      <Sr color={e.purple}size={15}/>
+                    </C>
+                    <C style={{flex:1}}>
+                      <S style={{fontFamily:k.interBold,fontSize:13.5,lineHeight:18,color:e.primaryBlack}}>
+                        {x("settings.general.modalHeight")}
+                      </S>
+                      <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
+                        {x("settings.general.modalHeightDescription")}
+                      </S>
+                    </C>
+                  </C>
+
+                  {X!==_&&<H onPress={()=>{Ar(X)}}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:e.purple,paddingHorizontal:10,paddingVertical:5,borderRadius:7,shadowColor:e.purple,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2,elevation:2}}>
+                      <N size={11}color={e.white}/>
+                      <S style={{fontFamily:k.interBold,fontSize:11,color:e.white}}>
+                        Save ({X}%)
+                      </S>
+                    </H>}
+                </C>
+
+                <C style={{marginTop:6}}>
+                  <Vo value={X}onValueChange={Xe}min={50}max={90}step={5}quickPresets={[50,60,70,80,90]}formatLabel={r=>`${Math.round(r)}%`}/>
+                </C>
+              </C>
+
+              <C style={{height:1,backgroundColor:e.dividerColor}}/>
 
               
-              <View style={{ gap: 8 }}>
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-            }}>
-                  <View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                    <MotionIcon color={AppColors.purple} size={15}/>
-                  </View>
-                  <View style={{ flex: 1 }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                      {t('settings.general.modalAnimation')}
-                    </Text>
-                    <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                      {t('settings.general.modalAnimationDescription')}
-                    </Text>
-                  </View>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                backgroundColor: AppColors.grayBackground,
-                borderRadius: 10,
-                padding: 3,
-                borderWidth: 1,
-                borderColor: AppColors.dividerColor,
-            }}>
-                  {[
-                { key: 'slide', label: 'Slide Up' },
-                { key: 'fade', label: 'Fade' },
-                { key: 'none', label: 'None' },
-            ].map(opt => {
-                const isActive = modalAnimationType === opt.key;
-                return (<TouchableScale key={opt.key} accessible={true} accessibilityRole="button" accessibilityLabel={`Set transition animation to ${opt.label}`} accessibilityState={{ selected: isActive }} onPress={() => setModalAnimationType(opt.key)} style={{
-                        flex: 1,
-                        paddingVertical: 7,
-                        alignItems: 'center',
-                        borderRadius: 8,
-                        backgroundColor: isActive
-                            ? AppColors.purple
-                            : 'transparent',
-                    }}>
-                        <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11.5,
-                        lineHeight: 15,
-                        color: isActive
-                            ? AppColors.white
-                            : AppColors.grayText,
-                    }}>
-                          {opt.label}
-                        </Text>
-                      </TouchableScale>);
-            })}
-                </View>
-              </View>
-            </View>
+              <C style={{gap:8}}>
+                <C style={{flexDirection:"row",alignItems:"center",gap:10}}>
+                  <C style={{width:32,height:32,borderRadius:8,backgroundColor:e.purpleShade50,alignItems:"center",justifyContent:"center"}}>
+                    <Oo color={e.purple}size={15}/>
+                  </C>
+                  <C style={{flex:1}}>
+                    <S style={{fontFamily:k.interBold,fontSize:13.5,lineHeight:18,color:e.primaryBlack}}>
+                      {x("settings.general.modalAnimation")}
+                    </S>
+                    <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
+                      {x("settings.general.modalAnimationDescription")}
+                    </S>
+                  </C>
+                </C>
+
+                <C style={{flexDirection:"row",backgroundColor:e.grayBackground,borderRadius:10,padding:3,borderWidth:1,borderColor:e.dividerColor}}>
+                  {[{key:"slide",label:"Slide Up"},{key:"fade",label:"Fade"},{key:"none",label:"None"}].map(r=>{const V=Pr===r.key;return<H key={r.key}accessible={!0}accessibilityRole="button"accessibilityLabel={`Set transition animation to ${r.label}`}accessibilityState={{selected:V}}onPress={()=>$r(r.key)}style={{flex:1,paddingVertical:7,alignItems:"center",borderRadius:8,backgroundColor:V?e.purple:"transparent"}}>
+                        <S style={{fontFamily:k.interBold,fontSize:11.5,lineHeight:15,color:V?e.white:e.grayText}}>
+                          {r.label}
+                        </S>
+                      </H>})}
+                </C>
+              </C>
+            </C>
 
             
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 14,
-                gap: 12,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                {t('settings.startupDefault')}
-              </Text>
-
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-            }}>
-                <View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                  <LayersIcon color={AppColors.purple} size={15}/>
-                </View>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                    {t('settings.general.defaultOpeningTab')}
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                    {t('settings.general.defaultOpeningTabDesc')}
-                  </Text>
-                </View>
-              </View>
+            <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,overflow:"hidden",padding:14,gap:12}}>
+              <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.grayTextWeak,letterSpacing:.8}}>
+                {x("settings.startupDefault")}
+              </S>
+
+              <C style={{flexDirection:"row",alignItems:"center",gap:10}}>
+                <C style={{width:32,height:32,borderRadius:8,backgroundColor:e.purpleShade50,alignItems:"center",justifyContent:"center"}}>
+                  <Ce color={e.purple}size={15}/>
+                </C>
+                <C style={{flex:1}}>
+                  <S style={{fontFamily:k.interBold,fontSize:13.5,lineHeight:18,color:e.primaryBlack}}>
+                    {x("settings.general.defaultOpeningTab")}
+                  </S>
+                  <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
+                    {x("settings.general.defaultOpeningTabDesc")}
+                  </S>
+                </C>
+              </C>
 
               
-              <View style={{ marginTop: 6, gap: 6 }}>
-                <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Default opening tab: ${allModules.find(m => m.key === defaultTab)?.label || 'APIs'}`} onPress={() => setIsDefaultTabDropdownOpen(prev => !prev)} style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                backgroundColor: AppColors.grayBackground,
-                borderRadius: 10,
-                borderWidth: 1.5,
-                borderColor: isDefaultTabDropdownOpen
-                    ? AppColors.purple
-                    : AppColors.grayBorderSecondary,
-                paddingHorizontal: 14,
-                paddingVertical: 11,
-            }}>
-                  <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-                flex: 1,
-            }}>
-                    <View style={{
-                width: 8,
-                height: 8,
-                borderRadius: 4,
-                backgroundColor: AppColors.purple,
-            }}/>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                      {allModules.find(m => m.key === defaultTab)
-                ? `#${allModules.find(m => m.key === defaultTab)?.id} ${allModules.find(m => m.key === defaultTab)?.label}`
-                : '#1 APIs (Network)'}
-                    </Text>
-                    <View style={{
-                backgroundColor: `${AppColors.purple}14`,
-                paddingHorizontal: 6,
-                paddingVertical: 1.5,
-                borderRadius: 6,
-            }}>
-                      <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 8.5,
-                color: AppColors.purple,
-            }}>
+              <C style={{marginTop:6,gap:6}}>
+                <H accessible={!0}accessibilityRole="button"accessibilityLabel={`Default opening tab: ${L.find(r=>r.key===U)?.label||"APIs"}`}onPress={()=>Ye(r=>!r)}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:e.grayBackground,borderRadius:10,borderWidth:1.5,borderColor:Pe?e.purple:e.grayBorderSecondary,paddingHorizontal:14,paddingVertical:11}}>
+                  <C style={{flexDirection:"row",alignItems:"center",gap:10,flex:1}}>
+                    <C style={{width:8,height:8,borderRadius:4,backgroundColor:e.purple}}/>
+                    <S style={{fontFamily:k.interBold,fontSize:13.5,lineHeight:18,color:e.primaryBlack}}>
+                      {L.find(r=>r.key===U)?`#${L.find(r=>r.key===U)?.id} ${L.find(r=>r.key===U)?.label}`:"#1 APIs (Network)"}
+                    </S>
+                    <C style={{backgroundColor:`${e.purple}14`,paddingHorizontal:6,paddingVertical:1.5,borderRadius:6}}>
+                      <S style={{fontFamily:k.interBold,fontSize:8.5,color:e.purple}}>
                         DEFAULT
-                      </Text>
-                    </View>
-                  </View>
+                      </S>
+                    </C>
+                  </C>
 
-                  <View style={{
-                transform: [
-                    { rotate: isDefaultTabDropdownOpen ? '180deg' : '0deg' },
-                ],
-            }}>
-                    <ChevronDownIcon color={AppColors.grayText} size={15}/>
-                  </View>
-                </TouchableScale>
+                  <C style={{transform:[{rotate:Pe?"180deg":"0deg"}]}}>
+                    <Go color={e.grayText}size={15}/>
+                  </C>
+                </H>
 
                 
-                {isDefaultTabDropdownOpen && (<View style={{
-                    backgroundColor: AppColors.primaryLight,
-                    borderRadius: 10,
-                    borderWidth: 1,
-                    borderColor: AppColors.grayBorderSecondary,
-                    overflow: 'hidden',
-                    shadowColor: AppColors.black,
-                    shadowOpacity: 0.08,
-                    shadowRadius: 6,
-                    shadowOffset: { width: 0, height: 3 },
-                    elevation: 4,
-                }}>
-                    {allModules
-                    .filter(tab => tab.key === 'apis' ||
-                    stagedTabVisibility?.[tab.key] ||
-                    tabVisibility?.[tab.key])
-                    .map((tab, idx, arr) => {
-                    const isActive = defaultTab === tab.key;
-                    const isLast = idx === arr.length - 1;
-                    return (<TouchableScale key={tab.key} accessible={true} accessibilityRole="button" accessibilityLabel={`Select ${tab.label} as default tab`} onPress={() => {
-                            setDefaultTab(tab.key);
-                            setIsDefaultTabDropdownOpen(false);
-                        }} style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            paddingHorizontal: 14,
-                            paddingVertical: 11,
-                            backgroundColor: isActive
-                                ? `${AppColors.purple}0F`
-                                : 'transparent',
-                            borderBottomWidth: isLast ? 0 : 1,
-                            borderBottomColor: AppColors.dividerColor,
-                        }}>
-                            <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 10,
-                        }}>
-                              <View style={{
-                            width: 6,
-                            height: 6,
-                            borderRadius: 3,
-                            backgroundColor: isActive
-                                ? AppColors.purple
-                                : AppColors.grayTextWeak,
-                        }}/>
-                              <Text style={{
-                            fontFamily: isActive
-                                ? AppFonts.interBold
-                                : AppFonts.interMedium,
-                            fontSize: 13,
-                            color: isActive
-                                ? AppColors.purple
-                                : AppColors.primaryBlack,
-                        }}>
-                                #{tab.id} {tab.label}
-                              </Text>
-                            </View>
-                            {isActive && (<CheckIcon size={14} color={AppColors.purple}/>)}
-                          </TouchableScale>);
-                })}
-                  </View>)}
-              </View>
-            </View>
+                {Pe&&<C style={{backgroundColor:e.primaryLight,borderRadius:10,borderWidth:1,borderColor:e.grayBorderSecondary,overflow:"hidden",shadowColor:e.black,shadowOpacity:.08,shadowRadius:6,shadowOffset:{width:0,height:3},elevation:4}}>
+                    {L.filter(r=>r.key==="apis"||M?.[r.key]||T?.[r.key]).map((r,V,D)=>{const v=U===r.key,I=V===D.length-1;return<H key={r.key}accessible={!0}accessibilityRole="button"accessibilityLabel={`Select ${r.label} as default tab`}onPress={()=>{Fr(r.key),Ye(!1)}}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:14,paddingVertical:11,backgroundColor:v?`${e.purple}0F`:"transparent",borderBottomWidth:I?0:1,borderBottomColor:e.dividerColor}}>
+                            <C style={{flexDirection:"row",alignItems:"center",gap:10}}>
+                              <C style={{width:6,height:6,borderRadius:3,backgroundColor:v?e.purple:e.grayTextWeak}}/>
+                              <S style={{fontFamily:v?k.interBold:k.interMedium,fontSize:13,color:v?e.purple:e.primaryBlack}}>
+                                #{r.id} {r.label}
+                              </S>
+                            </C>
+                            {v&&<N size={14}color={e.purple}/>}
+                          </H>})}
+                  </C>}
+              </C>
+            </C>
 
             
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 14,
-                gap: 12,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
+            <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,overflow:"hidden",padding:14,gap:12}}>
+              <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.grayTextWeak,letterSpacing:.8}}>
                 NOTIFICATIONS & TOASTS
-              </Text>
-
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }}>
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-                flex: 1,
-                marginRight: 10,
-            }}>
-                  <View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                    <PackageIcon color={AppColors.purple} size={15}/>
-                  </View>
-                  <View style={{ flex: 1 }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
+              </S>
+
+              <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
+                <C style={{flexDirection:"row",alignItems:"center",gap:10,flex:1,marginRight:10}}>
+                  <C style={{width:32,height:32,borderRadius:8,backgroundColor:e.purpleShade50,alignItems:"center",justifyContent:"center"}}>
+                    <Se color={e.purple}size={15}/>
+                  </C>
+                  <C style={{flex:1}}>
+                    <S style={{fontFamily:k.interBold,fontSize:13.5,lineHeight:18,color:e.primaryBlack}}>
                       NPM Update Toast
-                    </Text>
-                    <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
+                    </S>
+                    <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
                       Show a floating toast banner with countdown progress when
                       a newer release is published on npm.
-                    </Text>
-                  </View>
-                </View>
-
-                <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle NPM Update Toast" accessibilityState={{ checked: showUpdateToast }} onPress={() => setShowUpdateToast(prev => !prev)} style={{
-                width: 42,
-                height: 24,
-                borderRadius: 12,
-                backgroundColor: showUpdateToast
-                    ? AppColors.purple
-                    : AppColors.grayBorderSecondary,
-                padding: 2,
-                justifyContent: 'center',
-                alignItems: showUpdateToast ? 'flex-end' : 'flex-start',
-            }}>
-                  <View style={{
-                width: 20,
-                height: 20,
-                borderRadius: 10,
-                backgroundColor: AppColors.white,
-                shadowColor: AppColors.black,
-                shadowOpacity: 0.18,
-                shadowRadius: 2,
-                shadowOffset: { width: 0, height: 1 },
-            }}/>
-                </TouchableScale>
-              </View>
-            </View>
-          </View>)}
-
-        {settingsActiveSubTab === 'limits' && (<View style={{ gap: 14 }}>
+                    </S>
+                  </C>
+                </C>
+
+                <H accessible={!0}accessibilityRole="switch"accessibilityLabel="Toggle NPM Update Toast"accessibilityState={{checked:Be}}onPress={()=>Er(r=>!r)}style={{width:42,height:24,borderRadius:12,backgroundColor:Be?e.purple:e.grayBorderSecondary,padding:2,justifyContent:"center",alignItems:Be?"flex-end":"flex-start"}}>
+                  <C style={{width:20,height:20,borderRadius:10,backgroundColor:e.white,shadowColor:e.black,shadowOpacity:.18,shadowRadius:2,shadowOffset:{width:0,height:1}}}/>
+                </H>
+              </C>
+            </C>
+          </C>}
+
+        {G==="limits"&&<C style={{gap:14}}>
             
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 14,
-                gap: 12,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
+            <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,overflow:"hidden",padding:14,gap:12}}>
+              <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.grayTextWeak,letterSpacing:.8}}>
                 DEVICE MEMORY & AUTO PROFILES
-              </Text>
+              </S>
 
               
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }}>
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-                flex: 1,
-            }}>
-                  <View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                    <BrainIcon color={AppColors.purple} size={16}/>
-                  </View>
-                  <View style={{ flex: 1 }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
+              <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
+                <C style={{flexDirection:"row",alignItems:"center",gap:10,flex:1}}>
+                  <C style={{width:32,height:32,borderRadius:8,backgroundColor:e.purpleShade50,alignItems:"center",justifyContent:"center"}}>
+                    <Rr color={e.purple}size={16}/>
+                  </C>
+                  <C style={{flex:1}}>
+                    <S style={{fontFamily:k.interBold,fontSize:13.5,lineHeight:18,color:e.primaryBlack}}>
                       Auto-Calculate Limits from RAM
-                    </Text>
-                    <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
+                    </S>
+                    <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
                       Dynamically sets log limits according to available device
                       memory
-                    </Text>
-                  </View>
-                </View>
+                    </S>
+                  </C>
+                </C>
 
-                <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle auto RAM limit calculation" accessibilityState={{ checked: isAutoRamLimitEnabled }} onPress={() => setIsAutoRamLimitEnabled(prev => !prev)} style={{
-                width: 42,
-                height: 24,
-                borderRadius: 12,
-                backgroundColor: isAutoRamLimitEnabled
-                    ? AppColors.purple
-                    : AppColors.grayBorderSecondary,
-                padding: 2,
-                justifyContent: 'center',
-                alignItems: isAutoRamLimitEnabled
-                    ? 'flex-end'
-                    : 'flex-start',
-            }}>
-                  <View style={{
-                width: 20,
-                height: 20,
-                borderRadius: 10,
-                backgroundColor: AppColors.white,
-                shadowColor: AppColors.black,
-                shadowOpacity: 0.18,
-                shadowRadius: 2,
-                shadowOffset: { width: 0, height: 1 },
-            }}/>
-                </TouchableScale>
-              </View>
+                <H accessible={!0}accessibilityRole="switch"accessibilityLabel="Toggle auto RAM limit calculation"accessibilityState={{checked:R}}onPress={()=>Jr(r=>!r)}style={{width:42,height:24,borderRadius:12,backgroundColor:R?e.purple:e.grayBorderSecondary,padding:2,justifyContent:"center",alignItems:R?"flex-end":"flex-start"}}>
+                  <C style={{width:20,height:20,borderRadius:10,backgroundColor:e.white,shadowColor:e.black,shadowOpacity:.18,shadowRadius:2,shadowOffset:{width:0,height:1}}}/>
+                </H>
+              </C>
 
-              <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
+              <C style={{height:1,backgroundColor:e.dividerColor}}/>
 
               
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-                <View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: isAutoRamLimitEnabled
-                    ? `${AppColors.purple}14`
-                    : AppColors.grayBackground,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                  <SignalIcon color={isAutoRamLimitEnabled
-                ? AppColors.purple
-                : AppColors.grayTextWeak} size={15}/>
-                </View>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: isAutoRamLimitEnabled
-                    ? AppColors.primaryBlack
-                    : AppColors.grayText,
-            }}>
+              <C style={{flexDirection:"row",alignItems:"center",gap:10}}>
+                <C style={{width:32,height:32,borderRadius:8,backgroundColor:R?`${e.purple}14`:e.grayBackground,alignItems:"center",justifyContent:"center"}}>
+                  <Z color={R?e.purple:e.grayTextWeak}size={15}/>
+                </C>
+                <C style={{flex:1}}>
+                  <S style={{fontFamily:k.interBold,fontSize:13.5,lineHeight:18,color:R?e.primaryBlack:e.grayText}}>
                     Detected Available RAM
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                    {deviceFreeRamMb} MB available on device
-                  </Text>
-                </View>
-                <View style={{
-                paddingHorizontal: 10,
-                paddingVertical: 5,
-                borderRadius: 8,
-                backgroundColor: isAutoRamLimitEnabled
-                    ? `${AppColors.purple}12`
-                    : AppColors.grayBackground,
-                borderWidth: 1,
-                borderColor: isAutoRamLimitEnabled
-                    ? `${AppColors.purple}26`
-                    : AppColors.dividerColor,
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 12,
-                lineHeight: 15,
-                color: isAutoRamLimitEnabled
-                    ? AppColors.purple
-                    : AppColors.grayText,
-            }}>
-                    {deviceFreeRamMb} MB
-                  </Text>
-                </View>
-              </View>
+                  </S>
+                  <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
+                    {Ie} MB available on device
+                  </S>
+                </C>
+                <C style={{paddingHorizontal:10,paddingVertical:5,borderRadius:8,backgroundColor:R?`${e.purple}12`:e.grayBackground,borderWidth:1,borderColor:R?`${e.purple}26`:e.dividerColor}}>
+                  <S style={{fontFamily:k.interBold,fontSize:12,lineHeight:15,color:R?e.purple:e.grayText}}>
+                    {Ie} MB
+                  </S>
+                </C>
+              </C>
 
               
-              <View style={{
-                marginTop: 4,
-                paddingTop: 8,
-                borderTopWidth: 1,
-                borderTopColor: AppColors.dividerColor,
-                gap: 6,
-            }}>
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                lineHeight: 15,
-                color: AppColors.purple,
-            }}>
-                    Profile: {autoRamProfile.profileName}
-                  </Text>
-                  <View style={{
-                backgroundColor: isAutoRamLimitEnabled
-                    ? `${AppColors.emerald500}18`
-                    : `${AppColors.purple}18`,
-                paddingHorizontal: 7,
-                paddingVertical: 2.5,
-                borderRadius: 4,
-            }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 9.5,
-                color: isAutoRamLimitEnabled
-                    ? AppColors.emerald500
-                    : AppColors.purple,
-            }}>
-                      {isAutoRamLimitEnabled ? 'AUTO-TUNED' : 'MANUAL'}
-                    </Text>
-                  </View>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                gap: 8,
-                marginTop: 4,
-            }}>
-                  {[
-                {
-                    label: 'APIs',
-                    value: isAutoRamLimitEnabled
-                        ? autoRamProfile.maxNetworkLogs
-                        : maxNetworkLogs,
-                    color: AppColors.blue500,
-                },
-                {
-                    label: 'Logs',
-                    value: isAutoRamLimitEnabled
-                        ? autoRamProfile.maxConsoleLogs
-                        : maxConsoleLogs,
-                    color: AppColors.sky500,
-                },
-                {
-                    label: 'Analytics',
-                    value: isAutoRamLimitEnabled
-                        ? autoRamProfile.maxAnalyticsEvents
-                        : maxAnalyticsEventsLimit,
-                    color: AppColors.purple,
-                },
-                {
-                    label: 'Crash',
-                    value: isAutoRamLimitEnabled
-                        ? autoRamProfile.maxCrashRecords
-                        : maxCrashLogs,
-                    color: AppColors.errorColor,
-                },
-            ].map(item => (<View key={item.label} style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: 8,
-                    paddingVertical: 4,
-                    borderRadius: 6,
-                    backgroundColor: `${item.color}14`,
-                    borderWidth: 1,
-                    borderColor: `${item.color}33`,
-                }}>
-                      <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10.5,
-                    lineHeight: 14,
-                    color: item.color,
-                }}>
-                        {item.label}:
-                      </Text>
-                      <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10.5,
-                    lineHeight: 14,
-                    color: item.color,
-                }}>
-                        {item.value} max
-                      </Text>
-                    </View>))}
-                </View>
-              </View>
-            </View>
+              <C style={{marginTop:4,paddingTop:8,borderTopWidth:1,borderTopColor:e.dividerColor,gap:6}}>
+                <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
+                  <S style={{fontFamily:k.interBold,fontSize:11.5,lineHeight:15,color:e.purple}}>
+                    Profile: {K.profileName}
+                  </S>
+                  <C style={{backgroundColor:R?`${e.emerald500}18`:`${e.purple}18`,paddingHorizontal:7,paddingVertical:2.5,borderRadius:4}}>
+                    <S style={{fontFamily:k.interBold,fontSize:9.5,color:R?e.emerald500:e.purple}}>
+                      {R?"AUTO-TUNED":"MANUAL"}
+                    </S>
+                  </C>
+                </C>
+
+                <C style={{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:4}}>
+                  {[{label:"APIs",value:R?K.maxNetworkLogs:De,color:e.blue500},{label:"Logs",value:R?K.maxConsoleLogs:Le,color:e.sky500},{label:"Analytics",value:R?K.maxAnalyticsEvents:_e,color:e.purple},{label:"Crash",value:R?K.maxCrashRecords:Qe,color:e.errorColor}].map(r=><C key={r.label}style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${r.color}14`,borderWidth:1,borderColor:`${r.color}33`}}>
+                      <S style={{fontFamily:k.interBold,fontSize:10.5,lineHeight:14,color:r.color}}>
+                        {r.label}:
+                      </S>
+                      <S style={{fontFamily:k.interBold,fontSize:10.5,lineHeight:14,color:r.color}}>
+                        {r.value} max
+                      </S>
+                    </C>)}
+                </C>
+              </C>
+            </C>
 
             
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 14,
-                gap: 12,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
+            <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,overflow:"hidden",padding:14,gap:12}}>
+              <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.grayTextWeak,letterSpacing:.8}}>
                 LOW MEMORY PRESSURE PROTECTION
-              </Text>
-
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-                <View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: `${AppColors.emerald500}14`,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                  <ShieldAlertIcon color={AppColors.emerald500} size={15}/>
-                </View>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
+              </S>
+
+              <C style={{flexDirection:"row",alignItems:"center",gap:10}}>
+                <C style={{width:32,height:32,borderRadius:8,backgroundColor:`${e.emerald500}14`,alignItems:"center",justifyContent:"center"}}>
+                  <Br color={e.emerald500}size={15}/>
+                </C>
+                <C style={{flex:1}}>
+                  <S style={{fontFamily:k.interBold,fontSize:13.5,lineHeight:18,color:e.primaryBlack}}>
                     OS Memory Warning Guard
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
+                  </S>
+                  <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
                     Automatically prunes in-memory buffers by 50% when the OS
                     signals low memory
-                  </Text>
-                </View>
-                <View style={{
-                paddingHorizontal: 8,
-                paddingVertical: 3,
-                borderRadius: 6,
-                backgroundColor: `${AppColors.emerald500}18`,
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 10,
-                color: AppColors.emerald500,
-            }}>
+                  </S>
+                </C>
+                <C style={{paddingHorizontal:8,paddingVertical:3,borderRadius:6,backgroundColor:`${e.emerald500}18`}}>
+                  <S style={{fontFamily:k.interBold,fontSize:10,color:e.emerald500}}>
                     ACTIVE
-                  </Text>
-                </View>
-              </View>
+                  </S>
+                </C>
+              </C>
 
-              <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
+              <C style={{height:1,backgroundColor:e.dividerColor}}/>
 
               
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: 10,
-            }}>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13,
-                color: AppColors.primaryBlack,
-            }}>
+              <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:10}}>
+                <C style={{flex:1}}>
+                  <S style={{fontFamily:k.interBold,fontSize:13,color:e.primaryBlack}}>
                     Manual Memory Cleanup
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
+                  </S>
+                  <S style={{fontFamily:k.interRegular,fontSize:11,color:e.grayText,marginTop:1}}>
                     Prune older entries across all log stores and free RAM
-                  </Text>
-                </View>
-                <TouchableScale onPress={() => {
-                const summary = pruneAllLogs('manual', 0.5);
-                showToast(`Pruned ${summary.totalPruned} items from memory`);
-            }} style={{
-                backgroundColor: AppColors.purple,
-                paddingHorizontal: 12,
-                paddingVertical: 8,
-                borderRadius: 8,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 5,
-            }}>
-                  <TrashIcon size={13} color={AppColors.white}/>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.white,
-            }}>
+                  </S>
+                </C>
+                <H onPress={()=>{const r=St("manual",.5);Dr(`Pruned ${r.totalPruned} items from memory`)}}style={{backgroundColor:e.purple,paddingHorizontal:12,paddingVertical:8,borderRadius:8,flexDirection:"row",alignItems:"center",gap:5}}>
+                  <P size={13}color={e.white}/>
+                  <S style={{fontFamily:k.interBold,fontSize:11.5,color:e.white}}>
                     Prune Now
-                  </Text>
-                </TouchableScale>
-              </View>
-            </View>
-          </View>)}
-        {settingsActiveSubTab === 'capture' && (<View style={{ gap: 12 }}>
+                  </S>
+                </H>
+              </C>
+            </C>
+          </C>}
+        {G==="capture"&&<C style={{gap:12}}>
             
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                padding: 16,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                gap: 12,
-            }}>
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-                <View style={{
-                width: 36,
-                height: 36,
-                borderRadius: 10,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                  <CameraIcon color={AppColors.purple} size={16}/>
-                </View>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 14,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                    {t('settings.media.screenshotCardTitle', 'Screenshot Capture Settings')}
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                    {t('settings.media.screenshotCardDesc', 'Image encoding format, compression quality and overlay auto-hide')}
-                  </Text>
-                </View>
-              </View>
-
-              {renderSettingRow({
-                icon: <ImageIcon color={AppColors.purple} size={16}/>,
-                label: t('settings.media.imageFormat', 'Image Format'),
-                description: t('settings.media.imageFormatDesc', 'Export formats (PNG lossless, JPEG lossy, WebP)'),
-                right: (<View style={{ flexDirection: 'row', gap: 4 }}>
-                    {['PNG', 'JPEG', 'WEBP'].map(fmt => (<View key={fmt} style={{
-                            paddingHorizontal: 8,
-                            paddingVertical: 4,
-                            borderRadius: 6,
-                            backgroundColor: fmt === 'PNG'
-                                ? AppColors.purple
-                                : `${AppColors.purple}1A`,
-                        }}>
-                        <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 10,
-                            color: fmt === 'PNG'
-                                ? AppColors.white
-                                : AppColors.purple,
-                        }}>
-                          {fmt}
-                        </Text>
-                      </View>))}
-                  </View>),
-            })}
-
-              {renderSettingRow({
-                icon: <EyeIcon color={AppColors.purple} size={16}/>,
-                label: t('settings.media.autoHide', 'Auto-Hide Inspector During Capture'),
-                description: t('settings.media.autoHideDesc', 'Temporarily hides the inspector overlay during screen capture'),
-                isLast: true,
-                right: (<View style={{
-                        paddingHorizontal: 8,
-                        paddingVertical: 4,
-                        borderRadius: 6,
-                        backgroundColor: `${AppColors.emerald500}26`,
-                    }}>
-                    <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10,
-                        color: AppColors.emerald500,
-                    }}>
-                      {t('settings.media.enabled', 'ON')}
-                    </Text>
-                  </View>),
-            })}
-            </View>
+            <C style={{backgroundColor:e.primaryLight,padding:16,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,gap:12}}>
+              <C style={{flexDirection:"row",alignItems:"center",gap:10}}>
+                <C style={{width:36,height:36,borderRadius:10,backgroundColor:e.purpleShade50,alignItems:"center",justifyContent:"center"}}>
+                  <Hr color={e.purple}size={16}/>
+                </C>
+                <C style={{flex:1}}>
+                  <S style={{fontFamily:k.interBold,fontSize:14,lineHeight:18,color:e.primaryBlack}}>
+                    {x("settings.media.screenshotCardTitle","Screenshot Capture Settings")}
+                  </S>
+                  <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
+                    {x("settings.media.screenshotCardDesc","Image encoding format, compression quality and overlay auto-hide")}
+                  </S>
+                </C>
+              </C>
+
+              {z({icon:<Ct color={e.purple}size={16}/>,label:x("settings.media.imageFormat","Image Format"),description:x("settings.media.imageFormatDesc","Export formats (PNG lossless, JPEG lossy, WebP)"),right:<C style={{flexDirection:"row",gap:4}}>
+                    {["PNG","JPEG","WEBP"].map(r=><C key={r}style={{paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:r==="PNG"?e.purple:`${e.purple}1A`}}>
+                        <S style={{fontFamily:k.interBold,fontSize:10,color:r==="PNG"?e.white:e.purple}}>
+                          {r}
+                        </S>
+                      </C>)}
+                  </C>})}
+
+              {z({icon:<Tr color={e.purple}size={16}/>,label:x("settings.media.autoHide","Auto-Hide Inspector During Capture"),description:x("settings.media.autoHideDesc","Temporarily hides the inspector overlay during screen capture"),isLast:!0,right:<C style={{paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.emerald500}26`}}>
+                    <S style={{fontFamily:k.interBold,fontSize:10,color:e.emerald500}}>
+                      {x("settings.media.enabled","ON")}
+                    </S>
+                  </C>})}
+            </C>
 
             
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                padding: 16,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                gap: 12,
-            }}>
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-                <View style={{
-                width: 36,
-                height: 36,
-                borderRadius: 10,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                  <VideoCameraIcon color={AppColors.purple} size={16}/>
-                </View>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 14,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                    {t('settings.media.videoCardTitle', 'Video Recording & GIF Conversion')}
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                    {t('settings.media.videoCardDesc', 'ReplayKit hardware encoding, frame capture fallback and GIF generation')}
-                  </Text>
-                </View>
-              </View>
-
-              {renderSettingRow({
-                icon: <MicrophoneIcon color={AppColors.purple} size={16}/>,
-                label: t('settings.media.audioMode', 'Audio Source'),
-                description: t('settings.media.audioModeDesc', 'Record video with muted, app audio, or microphone commentary'),
-                right: (<View style={{ flexDirection: 'row', gap: 4 }}>
-                    {['Muted', 'App', 'Mic'].map((aud, i) => (<View key={aud} style={{
-                            paddingHorizontal: 7,
-                            paddingVertical: 4,
-                            borderRadius: 6,
-                            backgroundColor: i === 0
-                                ? AppColors.purple
-                                : `${AppColors.purple}1A`,
-                        }}>
-                        <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 10,
-                            color: i === 0 ? AppColors.white : AppColors.purple,
-                        }}>
-                          {aud}
-                        </Text>
-                      </View>))}
-                  </View>),
-            })}
-
-              {renderSettingRow({
-                icon: <FilmIcon color={AppColors.purple} size={16}/>,
-                label: t('settings.media.frameRate', 'Recording Frame Rate (FPS)'),
-                description: t('settings.media.frameRateDesc', 'Target video smoothness: 15, 24, 30, or 60 FPS'),
-                right: (<View style={{ flexDirection: 'row', gap: 4 }}>
-                    {['15', '24', '30', '60'].map(fps => (<View key={fps} style={{
-                            paddingHorizontal: 6,
-                            paddingVertical: 4,
-                            borderRadius: 6,
-                            backgroundColor: fps === '24'
-                                ? AppColors.purple
-                                : `${AppColors.purple}1A`,
-                        }}>
-                        <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 10,
-                            color: fps === '24' ? AppColors.white : AppColors.purple,
-                        }}>
-                          {fps}fps
-                        </Text>
-                      </View>))}
-                  </View>),
-            })}
-
-              {renderSettingRow({
-                icon: <GifIcon color={AppColors.purple} size={16}/>,
-                label: t('settings.media.gifAutoOpt', 'Auto GIF Optimization'),
-                description: t('settings.media.gifAutoOptDesc', 'Automatic palette reduction and frame skip for lightweight animated GIFs'),
-                isLast: true,
-                right: (<View style={{
-                        paddingHorizontal: 8,
-                        paddingVertical: 4,
-                        borderRadius: 6,
-                        backgroundColor: `${AppColors.emerald500}26`,
-                    }}>
-                    <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10,
-                        color: AppColors.emerald500,
-                    }}>
+            <C style={{backgroundColor:e.primaryLight,padding:16,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,gap:12}}>
+              <C style={{flexDirection:"row",alignItems:"center",gap:10}}>
+                <C style={{width:36,height:36,borderRadius:10,backgroundColor:e.purpleShade50,alignItems:"center",justifyContent:"center"}}>
+                  <Xo color={e.purple}size={16}/>
+                </C>
+                <C style={{flex:1}}>
+                  <S style={{fontFamily:k.interBold,fontSize:14,lineHeight:18,color:e.primaryBlack}}>
+                    {x("settings.media.videoCardTitle","Video Recording & GIF Conversion")}
+                  </S>
+                  <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
+                    {x("settings.media.videoCardDesc","ReplayKit hardware encoding, frame capture fallback and GIF generation")}
+                  </S>
+                </C>
+              </C>
+
+              {z({icon:<Yo color={e.purple}size={16}/>,label:x("settings.media.audioMode","Audio Source"),description:x("settings.media.audioModeDesc","Record video with muted, app audio, or microphone commentary"),right:<C style={{flexDirection:"row",gap:4}}>
+                    {["Muted","App","Mic"].map((r,V)=><C key={r}style={{paddingHorizontal:7,paddingVertical:4,borderRadius:6,backgroundColor:V===0?e.purple:`${e.purple}1A`}}>
+                        <S style={{fontFamily:k.interBold,fontSize:10,color:V===0?e.white:e.purple}}>
+                          {r}
+                        </S>
+                      </C>)}
+                  </C>})}
+
+              {z({icon:<Ko color={e.purple}size={16}/>,label:x("settings.media.frameRate","Recording Frame Rate (FPS)"),description:x("settings.media.frameRateDesc","Target video smoothness: 15, 24, 30, or 60 FPS"),right:<C style={{flexDirection:"row",gap:4}}>
+                    {["15","24","30","60"].map(r=><C key={r}style={{paddingHorizontal:6,paddingVertical:4,borderRadius:6,backgroundColor:r==="24"?e.purple:`${e.purple}1A`}}>
+                        <S style={{fontFamily:k.interBold,fontSize:10,color:r==="24"?e.white:e.purple}}>
+                          {r}fps
+                        </S>
+                      </C>)}
+                  </C>})}
+
+              {z({icon:<Zo color={e.purple}size={16}/>,label:x("settings.media.gifAutoOpt","Auto GIF Optimization"),description:x("settings.media.gifAutoOptDesc","Automatic palette reduction and frame skip for lightweight animated GIFs"),isLast:!0,right:<C style={{paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.emerald500}26`}}>
+                    <S style={{fontFamily:k.interBold,fontSize:10,color:e.emerald500}}>
                       ON
-                    </Text>
-                  </View>),
-            })}
-            </View>
+                    </S>
+                  </C>})}
+            </C>
 
             
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 16,
-            }}>
-              {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: t('settings.media.purgeAll', 'Purge Captured Media Cache'),
-                description: t('settings.media.purgeAllDesc', 'Delete all local screenshots, screen recordings and converted GIFs'),
-                isLast: true,
-                onPress: () => {
-                    Alert.alert(t('settings.media.purgeConfirmTitle', 'Purge Media Storage?'), t('settings.media.purgeConfirmMessage', 'This will permanently delete all captured screenshots and videos from disk.'), [
-                        { text: t('common.cancel', 'Cancel'), style: 'cancel' },
-                        {
-                            text: t('settings.media.purgeCacheBtn', 'Purge All'),
-                            style: 'destructive',
-                            onPress: async () => {
-                                await ScreenCapture.clearAllMedia();
-                                showToast(t('settings.media.purgedSuccess', 'Media cache cleared successfully'));
-                            },
-                        },
-                    ]);
-                },
-                right: (<View style={{
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderRadius: 8,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                    <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        lineHeight: 14,
-                        color: AppColors.errorColor,
-                    }}>
-                      {t('settings.media.purgeCacheBtn', 'Purge All')}
-                    </Text>
-                  </View>),
-            })}
-            </View>
-          </View>)}
-        {settingsActiveSubTab === 'about' && (<View style={{ gap: 14 }}>
-            
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 16,
-                gap: 12,
-            }}>
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }}>
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 12,
-                flex: 1,
-            }}>
-                  <View style={{
-                width: 44,
-                height: 44,
-                borderRadius: 12,
-                backgroundColor: `${AppColors.purple}1A`,
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderWidth: 1,
-                borderColor: `${AppColors.purple}33`,
-            }}>
-                    <PackageIcon color={AppColors.purple} size={22}/>
-                  </View>
-                  <View style={{ flex: 1 }}>
-                    <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-                flexWrap: 'wrap',
-            }}>
-                      <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 15,
-                lineHeight: 20,
-                color: AppColors.primaryBlack,
-            }}>
-                        In-App Inspector
-                      </Text>
-                      <View style={{
-                backgroundColor: `${AppColors.purple}18`,
-                paddingHorizontal: 7,
-                paddingVertical: 2,
-                borderRadius: 6,
-                borderWidth: 1,
-                borderColor: `${AppColors.purple}33`,
-            }}>
-                        <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 10,
-                color: AppColors.purple,
-            }}>
-                          v{LIB_VERSION}
-                        </Text>
-                      </View>
-                      {updateAvailable ? (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3,
-                    backgroundColor: '#F59E0B20',
-                    paddingHorizontal: 6,
-                    paddingVertical: 2,
-                    borderRadius: 6,
-                    borderWidth: 1,
-                    borderColor: '#F59E0B60',
-                }}>
-                          <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: '#D97706',
-                }}>
-                            v{latestNpmVersion} Available
-                          </Text>
-                          <BoltIcon size={9} color="#D97706"/>
-                        </View>) : (<View style={{
-                    backgroundColor: `${AppColors.emerald500}20`,
-                    paddingHorizontal: 6,
-                    paddingVertical: 2,
-                    borderRadius: 6,
-                    borderWidth: 1,
-                    borderColor: `${AppColors.emerald500}50`,
-                }}>
-                          <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors.emerald600,
-                }}>
-                            Up to date
-                          </Text>
-                        </View>)}
-                    </View>
-                    <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 2,
-            }}>
-                      react-native-inapp-inspector
-                    </Text>
-                  </View>
-                </View>
-              </View>
-
-              <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                lineHeight: 16,
-                color: AppColors.grayText,
-            }}>
-                High-performance in-app debugging, network logging, console
-                inspection, performance profiling, storage viewer & telemetry
-                diagnostics for React Native.
-              </Text>
-
-              {updateAvailable && (<TouchableScale onPress={() => {
-                    copyToClipboard('npm install react-native-inapp-inspector@latest', 'Install Command');
-                    showToast('Copied npm upgrade command!');
-                }} style={{
-                    backgroundColor: AppColors.purple,
-                    paddingVertical: 8,
-                    paddingHorizontal: 12,
-                    borderRadius: 8,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    gap: 6,
-                }}>
-                  <BoltIcon size={12} color={AppColors.white}/>
-                  <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 12,
-                    color: AppColors.white,
-                }}>
-                    Copy Upgrade Command (v{latestNpmVersion})
-                  </Text>
-                </TouchableScale>)}
-            </View>
-
-            
-            <View style={{
-                flexDirection: 'row',
-                flexWrap: 'wrap',
-                gap: 8,
-            }}>
-              <TouchableScale onPress={() => {
-                Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector').catch(() => { });
-            }} style={{
-                flex: 1,
-                minWidth: '47%',
-                backgroundColor: `${AppColors.purple}0F`,
-                borderRadius: 12,
-                borderWidth: 1,
-                borderColor: `${AppColors.purple}30`,
-                paddingVertical: 10,
-                paddingHorizontal: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-            }}>
-                <GitHubIcon color={AppColors.purple} size={18}/>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    ⭐ Star on GitHub
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 9.5,
-                color: AppColors.grayText,
-            }}>
-                    Support open source
-                  </Text>
-                </View>
-              </TouchableScale>
-
-              <TouchableScale onPress={() => {
-                Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
-            }} style={{
-                flex: 1,
-                minWidth: '47%',
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 12,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                paddingVertical: 10,
-                paddingHorizontal: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-            }}>
-                <NpmIcon color="#CB3837" size={18}/>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    NPM Registry
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 9.5,
-                color: AppColors.grayText,
-            }}>
-                    Package repository
-                  </Text>
-                </View>
-              </TouchableScale>
-
-              <TouchableScale onPress={() => {
-                Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector#readme').catch(() => { });
-            }} style={{
-                flex: 1,
-                minWidth: '47%',
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 12,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                paddingVertical: 10,
-                paddingHorizontal: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-            }}>
-                <Text style={{ fontSize: 16 }}>📖</Text>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    Documentation
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 9.5,
-                color: AppColors.grayText,
-            }}>
-                    Setup & API guide
-                  </Text>
-                </View>
-              </TouchableScale>
-
-              <TouchableScale onPress={() => {
-                Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector/issues').catch(() => { });
-            }} style={{
-                flex: 1,
-                minWidth: '47%',
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 12,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                paddingVertical: 10,
-                paddingHorizontal: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-            }}>
-                <Text style={{ fontSize: 16 }}>🐞</Text>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    Report Issue
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 9.5,
-                color: AppColors.grayText,
-            }}>
-                    Bugs & feature requests
-                  </Text>
-                </View>
-              </TouchableScale>
-
-              <TouchableScale onPress={() => {
-                Linking.openURL('https://github.com/vengatmacuser/react-native-inapp-inspector/releases').catch(() => { });
-            }} style={{
-                flex: 1,
-                minWidth: '47%',
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 12,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                paddingVertical: 10,
-                paddingHorizontal: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-            }}>
-                <Text style={{ fontSize: 16 }}>🏷️</Text>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    Release Notes
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 9.5,
-                color: AppColors.grayText,
-            }}>
-                    Version changelog
-                  </Text>
-                </View>
-              </TouchableScale>
-
-              <TouchableScale onPress={() => {
-                const win = Dimensions.get('window');
-                const scr = Dimensions.get('screen');
-                const rnVer = Platform.constants?.reactNativeVersion;
-                const specsPayload = {
-                    package: {
-                        name: 'react-native-inapp-inspector',
-                        version: `v${LIB_VERSION}`,
-                        latestNpmVersion: latestNpmVersion
-                            ? `v${latestNpmVersion}`
-                            : 'Checking...',
-                        license: 'MIT',
-                        repository: 'https://github.com/vengatmacuser/react-native-inapp-inspector',
-                    },
-                    hostApp: {
-                        name: getAppName(),
-                        bundleId: getBundleIdentifier(),
-                        versionAndBuild: getAppVersionAndBuild().formatted,
-                        buildVariant: __DEV__
-                            ? 'Development (Debug)'
-                            : 'Production (Release)',
-                        metroConnected: isLocalDebugEnvironment(),
-                    },
-                    runtime: {
-                        reactNativeVersion: rnVer
-                            ? `${rnVer.major}.${rnVer.minor}.${rnVer.patch}`
-                            : '0.74+',
-                        reactVersion: React.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: Platform.OS,
-                        osVersion: Platform.Version,
-                        deviceModel: 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: PixelRatio.get(),
-                        fontScale: PixelRatio.getFontScale(),
-                        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone ||
-                            'Unknown',
-                        locale: Intl.DateTimeFormat().resolvedOptions().locale || 'en',
-                    },
-                    storageAndCapabilities: {
-                        storageEngine: isPersistentStorageAvailable()
-                            ? 'MMKV (Fast Native Storage)'
-                            : 'In-Memory State',
-                        hasNativeModule: Boolean(global?.NativeInspectorModule ||
-                            global?.__IN_APP_INSPECTOR_NATIVE__),
-                        reduxConnected: isReduxConnected(),
-                        analyticsConnected: isAnalyticsConnected(),
-                    },
-                };
-                copyToClipboard(JSON.stringify(specsPayload, null, 2), 'Diagnostic Specifications');
-                showToast('Copied full diagnostic specs to clipboard!');
-            }} style={{
-                flex: 1,
-                minWidth: '47%',
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 12,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                paddingVertical: 10,
-                paddingHorizontal: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 8,
-            }}>
-                <CopyIcon color={AppColors.purple} size={16}/>
-                <View style={{ flex: 1 }}>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    Copy Specs JSON
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 9.5,
-                color: AppColors.grayText,
-            }}>
-                    Diagnostics payload
-                  </Text>
-                </View>
-              </TouchableScale>
-            </View>
-
-            
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 14,
-                gap: 12,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                PACKAGE VERSION & UPGRADES
-              </Text>
-
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }}>
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-                flex: 1,
-                marginRight: 8,
-            }}>
-                  <View style={{
-                width: 34,
-                height: 34,
-                borderRadius: 9,
-                backgroundColor: '#CB383715',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                    <NpmIcon color="#CB3837" size={17}/>
-                  </View>
-                  <View style={{ flex: 1 }}>
-                    <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-            }}>
-                      <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 14,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                        v{LIB_VERSION}
-                      </Text>
-                      {updateAvailable ? (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3,
-                    backgroundColor: '#F59E0B20',
-                    paddingHorizontal: 6,
-                    paddingVertical: 1.5,
-                    borderRadius: 5,
-                    borderWidth: 1,
-                    borderColor: '#F59E0B60',
-                }}>
-                          <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: '#D97706',
-                }}>
-                            v{latestNpmVersion} Available
-                          </Text>
-                          <BoltIcon size={9} color="#D97706"/>
-                        </View>) : (<View style={{
-                    backgroundColor: `${AppColors.emerald500}20`,
-                    paddingHorizontal: 6,
-                    paddingVertical: 1.5,
-                    borderRadius: 5,
-                    borderWidth: 1,
-                    borderColor: `${AppColors.emerald500}50`,
-                }}>
-                          <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors.emerald600,
-                }}>
-                            Up to date
-                          </Text>
-                        </View>)}
-                    </View>
-                    <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                      {updateAvailable
-                ? `A newer release (v${latestNpmVersion}) is available on npm registry.`
-                : 'You are running the latest version from npm registry.'}
-                    </Text>
-                  </View>
-                </View>
-
-                <TouchableScale onPress={() => {
-                copyToClipboard('npm install react-native-inapp-inspector@latest', 'Install Command');
-                showToast('Copied npm install command!');
-            }} style={{
-                backgroundColor: updateAvailable
-                    ? AppColors.purple
-                    : `${AppColors.purple}18`,
-                paddingVertical: 7,
-                paddingHorizontal: 11,
-                borderRadius: 8,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 5,
-            }}>
-                  <CopyIcon color={updateAvailable ? AppColors.white : AppColors.purple} size={12}/>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                color: updateAvailable
-                    ? AppColors.white
-                    : AppColors.purple,
-            }}>
-                    {updateAvailable ? 'Copy Upgrade' : 'Copy Install'}
-                  </Text>
-                </TouchableScale>
-              </View>
-            </View>
-
-            
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 14,
-                gap: 10,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                HOST APPLICATION & BUILD
-              </Text>
-
-              <View style={{ gap: 8 }}>
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Application Name
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    {getAppName()}
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Bundle ID / Package
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                color: AppColors.primaryBlack,
-            }}>
-                    {getBundleIdentifier()}
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Version & Build Number
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    {getAppVersionAndBuild().formatted}
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Build Variant
-                  </Text>
-                  <View style={{
-                backgroundColor: __DEV__
-                    ? `${AppColors.amber500}20`
-                    : `${AppColors.emerald500}20`,
-                paddingHorizontal: 6,
-                paddingVertical: 1.5,
-                borderRadius: 5,
-                borderWidth: 1,
-                borderColor: __DEV__
-                    ? `${AppColors.amber500}50`
-                    : `${AppColors.emerald500}50`,
-            }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 10,
-                color: __DEV__
-                    ? AppColors.amber500
-                    : AppColors.emerald600,
-            }}>
-                      {__DEV__ ? 'Development (Debug)' : 'Production (Release)'}
-                    </Text>
-                  </View>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Metro Bundler Connection
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: isLocalDebugEnvironment()
-                    ? AppColors.emerald600
-                    : AppColors.grayText,
-            }}>
-                    {isLocalDebugEnvironment()
-                ? 'Connected (Hot Reload Active)'
-                : 'Offline / Standalone'}
-                  </Text>
-                </View>
-              </View>
-            </View>
-
-            
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 14,
-                gap: 10,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                FRAMEWORK & RUNTIME ENGINE
-              </Text>
-
-              <View style={{ gap: 8 }}>
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    React Native Version
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    v
-                    {Platform.constants?.reactNativeVersion?.major !=
-                null
-                ? `${Platform.constants.reactNativeVersion.major}.${Platform.constants.reactNativeVersion.minor}.${Platform.constants.reactNativeVersion.patch}`
-                : '0.74+'}
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    React Core Version
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    v{React.version}
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    JavaScript Engine
-                  </Text>
-                  <View style={{
-                backgroundColor: `${AppColors.purple}15`,
-                paddingHorizontal: 6,
-                paddingVertical: 1.5,
-                borderRadius: 5,
-                borderWidth: 1,
-                borderColor: `${AppColors.purple}40`,
-            }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 10.5,
-                color: AppColors.purple,
-            }}>
-                      {Boolean(global?.HermesInternal)
-                ? 'Hermes Engine (Active)'
-                : 'JavaScriptCore (JSC)'}
-                    </Text>
-                  </View>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Rendering Architecture
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    {Boolean(global?.nativeFabricUIManager)
-                ? 'Fabric (New Architecture)'
-                : 'Paper (Legacy Bridge)'}
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    TurboModules Support
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    {Boolean(global?.__turboModuleProxy ||
-                global?.TurboModuleRegistry)
-                ? 'Enabled (C++ JSI)'
-                : 'Standard Bridge'}
-                  </Text>
-                </View>
-              </View>
-            </View>
-
-            
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 14,
-                gap: 10,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                DEVICE & DISPLAY METRICS
-              </Text>
-
-              <View style={{ gap: 8 }}>
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Operating System
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    {Platform.OS === 'ios'
-                ? 'Apple iOS'
-                : Platform.OS === 'android'
-                    ? 'Google Android'
-                    : Platform.OS}{' '}
-                    {Platform.Version}
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Device Hardware Model
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    {Platform.constants?.Model ||
-                (Platform.OS === 'ios'
-                    ? 'Apple Device'
-                    : 'Android Device')}
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Window Viewport (Points)
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    {Math.round(Dimensions.get('window').width)} ×{' '}
-                    {Math.round(Dimensions.get('window').height)} pt
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Native Physical Resolution
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    {Math.round(Dimensions.get('screen').width * PixelRatio.get())}{' '}
-                    ×{' '}
-                    {Math.round(Dimensions.get('screen').height * PixelRatio.get())}{' '}
-                    px
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Pixel Density & Font Scale
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    {PixelRatio.get().toFixed(1)}x (
-                    {PixelRatio.get() >= 3
-                ? '@3x'
-                : PixelRatio.get() >= 2
-                    ? '@2x'
-                    : '@1x'}
-                    ) • Font: {PixelRatio.getFontScale().toFixed(2)}x
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Timezone & Locale
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    {Intl.DateTimeFormat().resolvedOptions().timeZone ||
-                'System'}{' '}
-                    ({Intl.DateTimeFormat().resolvedOptions().locale || 'en'})
-                  </Text>
-                </View>
-              </View>
-            </View>
-
-            
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 14,
-                gap: 10,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                INSPECTOR STORAGE & CAPABILITIES
-              </Text>
-
-              <View style={{ gap: 8 }}>
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Storage Persistence Engine
-                  </Text>
-                  <View style={{
-                backgroundColor: isPersistentStorageAvailable()
-                    ? `${AppColors.emerald500}18`
-                    : `${AppColors.amber500}18`,
-                paddingHorizontal: 6,
-                paddingVertical: 1.5,
-                borderRadius: 5,
-                borderWidth: 1,
-                borderColor: isPersistentStorageAvailable()
-                    ? `${AppColors.emerald500}50`
-                    : `${AppColors.amber500}50`,
-            }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 10.5,
-                color: isPersistentStorageAvailable()
-                    ? AppColors.emerald600
-                    : AppColors.amber500,
-            }}>
-                      {isPersistentStorageAvailable()
-                ? 'MMKV Fast Native Storage'
-                : 'In-Memory State'}
-                    </Text>
-                  </View>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Native Module Status
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: Boolean(global?.NativeInspectorModule)
-                    ? AppColors.emerald600
-                    : AppColors.grayText,
-            }}>
-                    {Boolean(global?.NativeInspectorModule)
-                ? 'Linked & Active'
-                : 'JavaScript Only'}
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Network Logger Interceptor
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.emerald600,
-            }}>
-                    Active (XMLHttpRequest & Fetch Hooked)
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Redux & Analytics Watchers
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                    Redux: {isReduxConnected() ? 'Connected' : 'Listening'} •
-                    Analytics:{' '}
-                    {isAnalyticsConnected() ? 'Connected' : 'Listening'}
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Crash & Exception Boundary
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.emerald600,
-            }}>
-                    Global JS Exception Handler Active
-                  </Text>
-                </View>
-
-                <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                  <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                    Memory Management
-                  </Text>
-                  <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.emerald600,
-            }}>
-                    Dynamic Auto RAM Tiering Active
-                  </Text>
-                </View>
-              </View>
-            </View>
-
-            
-            <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 14,
-                gap: 8,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-                LICENSE & CREDITS
-              </Text>
-
-              <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                  License
-                </Text>
-                <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.emerald600,
-            }}>
-                  MIT Permissive Open Source
-                </Text>
-              </View>
-
-              <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                  Created & Maintained By
-                </Text>
-                <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }}>
-                  Vengateswaran
-                </Text>
-              </View>
-
-              <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-                <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.grayText,
-            }}>
-                  Repository
-                </Text>
-                <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                color: AppColors.purple,
-            }}>
-                  github.com/vengatmacuser/react-native-inapp-inspector
-                </Text>
-              </View>
-            </View>
-          </View>)}
-        <View style={{ height: 48 }}/>
-      </ScrollView>
+            <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,padding:16}}>
+              {z({icon:<P color={e.errorColor}size={16}/>,label:x("settings.media.purgeAll","Purge Captured Media Cache"),description:x("settings.media.purgeAllDesc","Delete all local screenshots, screen recordings and converted GIFs"),isLast:!0,onPress:()=>{W.alert(x("settings.media.purgeConfirmTitle","Purge Media Storage?"),x("settings.media.purgeConfirmMessage","This will permanently delete all captured screenshots and videos from disk."),[{text:x("common.cancel","Cancel"),style:"cancel"},{text:x("settings.media.purgeCacheBtn","Purge All"),style:"destructive",onPress:async()=>{await xt.clearAllMedia(),Dr(x("settings.media.purgedSuccess","Media cache cleared successfully"))}}])},right:<C style={{paddingHorizontal:12,paddingVertical:6,borderRadius:8,backgroundColor:`${e.errorColor}14`,borderWidth:1,borderColor:`${e.errorColor}33`}}>
+                    <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.errorColor}}>
+                      {x("settings.media.purgeCacheBtn","Purge All")}
+                    </S>
+                  </C>})}
+            </C>
+          </C>}
+        <C style={{height:48}}/>
+      </A>
 
       
-      {settingsActiveSubTab === 'module' && (<View style={{
-                paddingHorizontal: 16,
-                paddingTop: 12,
-                paddingBottom: Platform.OS === 'ios' ? 36 : 24,
-                backgroundColor: AppColors.primaryLight,
-                borderTopWidth: 1,
-                borderTopColor: AppColors.dividerColor,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 12,
-                shadowColor: AppColors.black,
-                shadowOpacity: 0.08,
-                shadowRadius: 8,
-                shadowOffset: { width: 0, height: -3 },
-                elevation: 8,
-            }}>
-          <View style={{ flex: 1 }}>
-            <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13,
-                lineHeight: 17,
-                color: AppColors.primaryBlack,
-            }}>
-              {stagedActiveCount} of {allModules.length} Modules Active
-            </Text>
-            <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: hasUnsavedChanges
-                    ? AppColors.purple
-                    : AppColors.grayText,
-                marginTop: 1,
-            }}>
-              {hasUnsavedChanges
-                ? t('settings.unsavedPending')
-                : t('settings.allSynchronized')}
-            </Text>
-          </View>
-
-          <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Save Changes" onPress={handleSaveChanges} style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-                backgroundColor: hasUnsavedChanges
-                    ? AppColors.purple
-                    : `${AppColors.purple}22`,
-                paddingHorizontal: 18,
-                paddingVertical: 10,
-                borderRadius: 10,
-            }}>
-            <CheckIcon size={14} color={hasUnsavedChanges ? AppColors.white : AppColors.purple}/>
-            <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13,
-                lineHeight: 17,
-                color: hasUnsavedChanges ? AppColors.white : AppColors.purple,
-            }}>
-              {t('settings.saveChanges')}
-            </Text>
-          </TouchableScale>
-        </View>)}
-    </View>);
-    let content = null;
-    let title = '';
-    let icon = null;
-    let rightInfo = '';
-    if (settingsPage === 'apis') {
-        title = t('settings.apis.title');
-        icon = <SignalIcon color={AppColors.white} size={16}/>;
-        rightInfo = t('settings.apis.total', { count: logs.length });
-        content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                padding: 16,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-            }}>
-          {renderSettingRow({
-                icon: <SignalIcon color={AppColors.purple} size={16}/>,
-                label: t('settings.apis.maxRequestLogs'),
-                description: t('settings.apis.maxRequestLogsDescription'),
-                numericInput: {
-                    value: maxNetworkLogs,
-                    onChange: setMaxNetworkLogs,
-                    min: 10,
-                    max: 100,
-                    placeholder: 'Enter max requests (10-100)',
-                },
-                isLast: true,
-            })}
-        </View>
-
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 16,
-            }}>
-          {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: t('settings.apis.clearNetworkLogs'),
-                description: t('settings.apis.clearNetworkLogsDescription', {
-                    count: logs.length,
-                }),
-                isLast: true,
-                onPress: () => {
-                    clearNetworkLogs();
-                    setSelected(null);
-                    Alert.alert(t('common.success'), t('settings.apis.networkLogsCleared'));
-                },
-                right: (<View style={{
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderRadius: 8,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        lineHeight: 14,
-                        color: AppColors.errorColor,
-                    }}>
-                  {t('common.clear')}
-                </Text>
-              </View>),
-            })}
-        </View>
-        <View style={{ height: 48 }}/>
-      </ScrollView>);
-    }
-    else if (settingsPage === 'logs') {
-        title = t('settings.logs.title');
-        icon = <TerminalIcon color={AppColors.white} size={16}/>;
-        rightInfo = t('settings.logs.total', { count: consoleLogs.length });
-        content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                padding: 16,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                gap: 4,
-            }}>
-          {renderSettingRow({
-                icon: <TerminalIcon color={AppColors.purple} size={16}/>,
-                label: t('settings.logs.maxConsoleLogs'),
-                description: t('settings.logs.maxConsoleLogsDescription'),
-                numericInput: {
-                    value: maxConsoleLogs,
-                    onChange: setMaxConsoleLogs,
-                    min: 10,
-                    max: 100,
-                    placeholder: 'Enter max logs (10-100)',
-                },
-            })}
-          <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
-          <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13,
-                lineHeight: 17,
-                color: AppColors.primaryBlack,
-                paddingTop: 6,
-            }}>
-            {t('settings.logs.logLevels')}
-          </Text>
-          {['info', 'warn', 'error'].map(level => {
-                const isLvlActive = showConsoleLevels?.[level];
-                const levelColor = level === 'error'
-                    ? AppColors.errorColor
-                    : level === 'warn'
-                        ? AppColors.warningIconGold
-                        : AppColors.skyBlue;
-                const label = level === 'info'
-                    ? t('settings.logs.showInfo')
-                    : level === 'warn'
-                        ? t('settings.logs.showWarn')
-                        : t('settings.logs.showError');
-                const desc = level === 'info'
-                    ? t('settings.logs.showInfoDesc')
-                    : level === 'warn'
-                        ? t('settings.logs.showWarnDesc')
-                        : t('settings.logs.showErrorDesc');
-                return renderSettingRow({
-                    icon: (<View style={{
-                            width: 12,
-                            height: 12,
-                            borderRadius: 6,
-                            backgroundColor: levelColor,
-                        }}/>),
-                    label,
-                    description: desc,
-                    isLast: level === 'error',
-                    onPress: () => setShowConsoleLevels(prev => ({
-                        ...prev,
-                        [level]: !prev[level],
-                    })),
-                    right: (<View style={{
-                            width: 22,
-                            height: 22,
-                            borderRadius: 6,
-                            borderWidth: 2,
-                            borderColor: isLvlActive
-                                ? AppColors.purple
-                                : AppColors.grayTextWeak,
-                            backgroundColor: isLvlActive
-                                ? `${AppColors.purple}1A`
-                                : 'transparent',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}>
-                  {isLvlActive && (<CheckIcon size={12} color={AppColors.purple}/>)}
-                </View>),
-                });
-            })}
-        </View>
+      {G==="module"&&<C style={{paddingHorizontal:16,paddingTop:12,paddingBottom:je.OS==="ios"?36:24,backgroundColor:e.primaryLight,borderTopWidth:1,borderTopColor:e.dividerColor,flexDirection:"row",alignItems:"center",gap:12,shadowColor:e.black,shadowOpacity:.08,shadowRadius:8,shadowOffset:{width:0,height:-3},elevation:8}}>
+          <C style={{flex:1}}>
+            <S style={{fontFamily:k.interBold,fontSize:13,lineHeight:17,color:e.primaryBlack}}>
+              {ro} of {L.length} Modules Active
+            </S>
+            <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:q?e.purple:e.grayText,marginTop:1}}>
+              {x(q?"settings.unsavedPending":"settings.allSynchronized")}
+            </S>
+          </C>
+
+          <H accessible={!0}accessibilityRole="button"accessibilityLabel="Save Changes"onPress={oo}style={{flexDirection:"row",alignItems:"center",gap:6,backgroundColor:q?e.purple:`${e.purple}22`,paddingHorizontal:18,paddingVertical:10,borderRadius:10}}>
+            <N size={14}color={q?e.white:e.purple}/>
+            <S style={{fontFamily:k.interBold,fontSize:13,lineHeight:17,color:q?e.white:e.purple}}>
+              {x("settings.saveChanges")}
+            </S>
+          </H>
+        </C>}
+    </C>;let $=null,E="",O=null,j="";F==="apis"?(E=x("settings.apis.title"),O=<Z color={e.white}size={16}/>,j=x("settings.apis.total",{count:ze.length}),$=<A style={{flex:1}}contentContainerStyle={{padding:16,paddingBottom:100,gap:12}}>
+        <C style={{backgroundColor:e.primaryLight,padding:16,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary}}>
+          {z({icon:<Z color={e.purple}size={16}/>,label:x("settings.apis.maxRequestLogs"),description:x("settings.apis.maxRequestLogsDescription"),numericInput:{value:De,onChange:Gr,min:10,max:100,placeholder:"Enter max requests (10-100)"},isLast:!0})}
+        </C>
+
+        <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,padding:16}}>
+          {z({icon:<P color={e.errorColor}size={16}/>,label:x("settings.apis.clearNetworkLogs"),description:x("settings.apis.clearNetworkLogsDescription",{count:ze.length}),isLast:!0,onPress:()=>{vo(),Qr(null),W.alert(x("common.success"),x("settings.apis.networkLogsCleared"))},right:<C style={{paddingHorizontal:12,paddingVertical:6,borderRadius:8,backgroundColor:`${e.errorColor}14`,borderWidth:1,borderColor:`${e.errorColor}33`}}>
+                <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.errorColor}}>
+                  {x("common.clear")}
+                </S>
+              </C>})}
+        </C>
+        <C style={{height:48}}/>
+      </A>):F==="logs"?(E=x("settings.logs.title"),O=<Ne color={e.white}size={16}/>,j=x("settings.logs.total",{count:Re.length}),$=<A style={{flex:1}}contentContainerStyle={{padding:16,paddingBottom:100,gap:12}}>
+        <C style={{backgroundColor:e.primaryLight,padding:16,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,gap:4}}>
+          {z({icon:<Ne color={e.purple}size={16}/>,label:x("settings.logs.maxConsoleLogs"),description:x("settings.logs.maxConsoleLogsDescription"),numericInput:{value:Le,onChange:Ur,min:10,max:100,placeholder:"Enter max logs (10-100)"}})}
+          <C style={{height:1,backgroundColor:e.dividerColor}}/>
+          <S style={{fontFamily:k.interBold,fontSize:13,lineHeight:17,color:e.primaryBlack,paddingTop:6}}>
+            {x("settings.logs.logLevels")}
+          </S>
+          {["info","warn","error"].map(r=>{const V=Or?.[r],D=r==="error"?e.errorColor:r==="warn"?e.warningIconGold:e.skyBlue,v=x(r==="info"?"settings.logs.showInfo":r==="warn"?"settings.logs.showWarn":"settings.logs.showError"),I=x(r==="info"?"settings.logs.showInfoDesc":r==="warn"?"settings.logs.showWarnDesc":"settings.logs.showErrorDesc");return z({icon:<C style={{width:12,height:12,borderRadius:6,backgroundColor:D}}/>,label:v,description:I,isLast:r==="error",onPress:()=>jr(B=>({...B,[r]:!B[r]})),right:<C style={{width:22,height:22,borderRadius:6,borderWidth:2,borderColor:V?e.purple:e.grayTextWeak,backgroundColor:V?`${e.purple}1A`:"transparent",alignItems:"center",justifyContent:"center"}}>
+                  {V&&<N size={12}color={e.purple}/>}
+                </C>})})}
+        </C>
 
         
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                overflow: 'hidden',
-                padding: 16,
-                gap: 14,
-            }}>
-          <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                lineHeight: 14,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.8,
-            }}>
-            {t('settings.logFiltersDeduplication')}
-          </Text>
+        <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,overflow:"hidden",padding:16,gap:14}}>
+          <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.grayTextWeak,letterSpacing:.8}}>
+            {x("settings.logFiltersDeduplication")}
+          </S>
 
           
-          <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }}>
-            <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-                flex: 1,
-            }}>
-              <View style={{
-                width: 32,
-                height: 32,
-                borderRadius: 8,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                <EyeIcon color={AppColors.purple} size={15}/>
-              </View>
-              <View style={{ flex: 1 }}>
-                <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 13.5,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                  {t('settings.general.duplicateLogs')}
-                </Text>
-                <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                  {t('settings.general.duplicateLogsDescription')}
-                </Text>
-              </View>
-            </View>
-
-            <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle show duplicate logs" accessibilityState={{ checked: showDuplicateLogs }} onPress={() => setShowDuplicateLogs(prev => !prev)} style={{
-                width: 42,
-                height: 24,
-                borderRadius: 12,
-                backgroundColor: showDuplicateLogs
-                    ? AppColors.purple
-                    : AppColors.grayBorderSecondary,
-                padding: 2,
-                justifyContent: 'center',
-                alignItems: showDuplicateLogs ? 'flex-end' : 'flex-start',
-            }}>
-              <View style={{
-                width: 20,
-                height: 20,
-                borderRadius: 10,
-                backgroundColor: AppColors.white,
-                shadowColor: AppColors.black,
-                shadowOpacity: 0.18,
-                shadowRadius: 2,
-                shadowOffset: { width: 0, height: 1 },
-            }}/>
-            </TouchableScale>
-          </View>
-        </View>
-
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 16,
-            }}>
-          {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: t('settings.logs.clearConsoleLogs'),
-                description: t('settings.logs.clearConsoleLogsDescription', {
-                    count: consoleLogs.length,
-                }),
-                isLast: true,
-                onPress: () => {
-                    clearConsoleLogs();
-                    Alert.alert(t('common.success'), t('settings.logs.consoleLogsCleared'));
-                },
-                right: (<View style={{
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderRadius: 8,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        lineHeight: 14,
-                        color: AppColors.errorColor,
-                    }}>
-                  {t('common.clear')}
-                </Text>
-              </View>),
-            })}
-        </View>
-        <View style={{ height: 48 }}/>
-      </ScrollView>);
-    }
-    else if (settingsPage === 'analytics') {
-        title = t('settings.analytics.title');
-        icon = <AnalyticsIcon color={AppColors.white} size={16}/>;
-        rightInfo = t('settings.analytics.total', { count: analyticsEvents.length });
-        content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                padding: 16,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-            }}>
-          {renderSettingRow({
-                icon: <AnalyticsIcon color={AppColors.purple} size={16}/>,
-                label: t('settings.analytics.maxAnalyticsEvents'),
-                description: t('settings.analytics.maxAnalyticsEventsDescription', {
-                    count: analyticsEvents.length,
-                }),
-                numericInput: {
-                    value: maxAnalyticsEventsLimit,
-                    onChange: setMaxAnalyticsEventsLimit,
-                    min: 10,
-                    max: 75,
-                    placeholder: 'Enter max events (10-75)',
-                },
-                isLast: true,
-            })}
-        </View>
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 16,
-            }}>
-          {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: t('settings.analytics.clearAnalyticsEvents'),
-                description: t('settings.analytics.clearAnalyticsEventsDescription'),
-                isLast: true,
-                onPress: () => {
-                    clearAnalyticsEvents();
-                    setSelectedEvent(null);
-                    Alert.alert(t('common.success'), t('settings.analytics.analyticsEventsCleared'));
-                },
-                right: (<View style={{
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderRadius: 8,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        lineHeight: 14,
-                        color: AppColors.errorColor,
-                    }}>
-                  {t('common.clear')}
-                </Text>
-              </View>),
-            })}
-        </View>
-        <View style={{ height: 48 }}/>
-      </ScrollView>);
-    }
-    else if (settingsPage === 'redux') {
-        title = t('settings.redux.title');
-        icon = <ReduxIcon color={AppColors.white} size={16}/>;
-        rightInfo = t('settings.redux.reducers', {
-            count: Object.keys(reduxState || {}).length,
-        });
-        content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                padding: 16,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                gap: 4,
-            }}>
-          {renderSettingRow({
-                icon: <ReduxIcon color={AppColors.purple} size={16}/>,
-                label: t('settings.redux.autoRefresh'),
-                description: t('settings.redux.autoRefreshDescription'),
-                onPress: () => setReduxAutoRefreshState(prev => !prev),
-                right: (<View style={{
-                        width: 22,
-                        height: 22,
-                        borderRadius: 6,
-                        borderWidth: 2,
-                        borderColor: reduxAutoRefresh
-                            ? AppColors.purple
-                            : AppColors.grayTextWeak,
-                        backgroundColor: reduxAutoRefresh
-                            ? `${AppColors.purple}1A`
-                            : 'transparent',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}>
-                {reduxAutoRefresh && (<CheckIcon size={12} color={AppColors.purple}/>)}
-              </View>),
-            })}
-          <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
-          {renderSettingRow({
-                icon: <LayersIcon color={AppColors.purple} size={16}/>,
-                label: t('settings.redux.defaultJsonExpandDepth'),
-                description: t('settings.redux.defaultJsonExpandDepthDescription'),
-                picker: {
-                    options: [1, 2, 3, 5],
-                    selectedValue: reduxExpandDepth,
-                    onSelect: setReduxExpandDepth,
-                },
-                isLast: true,
-            })}
-        </View>
-
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 16,
-            }}>
-          {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: t('settings.redux.clearReduxState'),
-                description: reduxState
-                    ? t('settings.redux.clearReduxStateDescription')
-                    : t('settings.redux.clearReduxStateEmpty'),
-                isLast: true,
-                onPress: () => {
-                    setReduxState(null);
-                    Alert.alert(t('common.success'), t('settings.redux.reduxStateCleared'));
-                },
-                right: (<View style={{
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderRadius: 8,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        lineHeight: 14,
-                        color: AppColors.errorColor,
-                    }}>
-                  {t('common.clear')}
-                </Text>
-              </View>),
-            })}
-        </View>
-        <View style={{ height: 48 }}/>
-      </ScrollView>);
-    }
-    else if (settingsPage === 'crash') {
-        title = t('settings.crash.title');
-        icon = <CrashIcon color={AppColors.white} size={16}/>;
-        rightInfo = `Total: ${crashRecords?.length || 0}`;
-        content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                padding: 16,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                gap: 4,
-            }}>
-          {renderSettingRow({
-                icon: <LayersIcon color={AppColors.purple} size={16}/>,
-                label: t('settings.crash.maxCrashLogs'),
-                description: t('settings.crash.maxCrashLogsDesc'),
-                numericInput: {
-                    value: maxCrashLogs,
-                    onChange: setMaxCrashLogs,
-                    min: 5,
-                    max: 50,
-                    placeholder: 'Enter max crashes (5-50)',
-                },
-            })}
-          <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
-          {renderSettingRow({
-                icon: <ShieldAlertIcon color={AppColors.greenColor} size={16}/>,
-                label: t('settings.crash.globalGuard'),
-                description: t('settings.crash.globalGuardDesc'),
-                isLast: true,
-                right: (<View style={{
-                        paddingHorizontal: 8,
-                        paddingVertical: 4,
-                        borderRadius: 6,
-                        backgroundColor: `${AppColors.greenColor}1F`,
-                    }}>
-                <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10,
-                        lineHeight: 13,
-                        color: AppColors.greenColor,
-                    }}>
-                  {t('settings.protectedBadge')}
-                </Text>
-              </View>),
-            })}
-        </View>
-
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 16,
-            }}>
-          {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: t('settings.crash.clearHistory'),
-                description: t('settings.crash.clearHistoryDesc', {
-                    count: crashRecords?.length || 0,
-                }),
-                isLast: true,
-                onPress: () => {
-                    clearCrashRecords();
-                    Alert.alert(t('common.success'), t('settings.crash.historyCleared'));
-                },
-                right: (<View style={{
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderRadius: 8,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        lineHeight: 14,
-                        color: AppColors.errorColor,
-                    }}>
-                  {t('common.clear')}
-                </Text>
-              </View>),
-            })}
-        </View>
-        <View style={{ height: 48 }}/>
-      </ScrollView>);
-    }
-    else if (settingsPage === 'bundle') {
-        title = t('settings.bundle.title');
-        icon = <PackageIcon color={AppColors.white} size={16}/>;
-        rightInfo = 'Metro';
-        content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                padding: 16,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                gap: 8,
-            }}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-            <View style={{
-                width: 36,
-                height: 36,
-                borderRadius: 10,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-              <PackageIcon color={AppColors.purple} size={16}/>
-            </View>
-            <View style={{ flex: 1 }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 14,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                {t('settings.bundle.sourceBundler')}
-              </Text>
-              <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                {t('settings.bundle.sourceBundlerDesc')}
-              </Text>
-            </View>
-          </View>
-        </View>
-
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 16,
-            }}>
-          {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: t('settings.bundle.clearCache'),
-                description: t('settings.bundle.clearCacheDesc'),
-                isLast: true,
-                onPress: () => {
-                    clearCachedBundleAnalysis();
-                    Alert.alert(t('common.success'), t('settings.bundle.cacheCleared'));
-                },
-                right: (<View style={{
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderRadius: 8,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        lineHeight: 14,
-                        color: AppColors.errorColor,
-                    }}>
-                  {t('common.clear')}
-                </Text>
-              </View>),
-            })}
-        </View>
-        <View style={{ height: 48 }}/>
-      </ScrollView>);
-    }
-    else if (settingsPage === 'performance') {
-        title = t('settings.performance.title');
-        icon = <PerformanceIcon color={AppColors.white} size={16}/>;
-        rightInfo = '60 FPS Target';
-        content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 12 }}>
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                padding: 16,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                gap: 8,
-            }}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-            <View style={{
-                width: 36,
-                height: 36,
-                borderRadius: 10,
-                backgroundColor: AppColors.purpleShade50,
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-              <PerformanceIcon color={AppColors.purple} size={16}/>
-            </View>
-            <View style={{ flex: 1 }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 14,
-                lineHeight: 18,
-                color: AppColors.primaryBlack,
-            }}>
-                {t('settings.performance.frameMeasurement')}
-              </Text>
-              <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
-            }}>
-                {t('settings.performance.frameMeasurementDesc')}
-              </Text>
-            </View>
-          </View>
-        </View>
-
-        <View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 14,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 16,
-            }}>
-          {renderSettingRow({
-                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
-                label: t('settings.performance.clearEvents'),
-                description: t('settings.performance.clearEventsDesc'),
-                isLast: true,
-                onPress: () => {
-                    clearPerformanceEvents();
-                    Alert.alert(t('common.success'), t('settings.performance.eventsCleared'));
-                },
-                right: (<View style={{
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderRadius: 8,
-                        backgroundColor: `${AppColors.errorColor}14`,
-                        borderWidth: 1,
-                        borderColor: `${AppColors.errorColor}33`,
-                    }}>
-                <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        lineHeight: 14,
-                        color: AppColors.errorColor,
-                    }}>
-                  {t('common.clear')}
-                </Text>
-              </View>),
-            })}
-        </View>
-        <View style={{ height: 48 }}/>
-      </ScrollView>);
-    }
-    const subPageAnim = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        if (settingsPage !== 'main') {
-            subPageAnim.setValue(0);
-            Animated.spring(subPageAnim, {
-                toValue: 1,
-                friction: 8,
-                tension: 65,
-                useNativeDriver: true,
-            }).start();
-        }
-    }, [settingsPage]);
-    return (<View style={{
-            flex: 1,
-            backgroundColor: AppColors.grayBackground,
-        }}>
+          <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
+            <C style={{flexDirection:"row",alignItems:"center",gap:10,flex:1}}>
+              <C style={{width:32,height:32,borderRadius:8,backgroundColor:e.purpleShade50,alignItems:"center",justifyContent:"center"}}>
+                <Tr color={e.purple}size={15}/>
+              </C>
+              <C style={{flex:1}}>
+                <S style={{fontFamily:k.interBold,fontSize:13.5,lineHeight:18,color:e.primaryBlack}}>
+                  {x("settings.general.duplicateLogs")}
+                </S>
+                <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
+                  {x("settings.general.duplicateLogsDescription")}
+                </S>
+              </C>
+            </C>
+
+            <H accessible={!0}accessibilityRole="switch"accessibilityLabel="Toggle show duplicate logs"accessibilityState={{checked:Ve}}onPress={()=>Mr(r=>!r)}style={{width:42,height:24,borderRadius:12,backgroundColor:Ve?e.purple:e.grayBorderSecondary,padding:2,justifyContent:"center",alignItems:Ve?"flex-end":"flex-start"}}>
+              <C style={{width:20,height:20,borderRadius:10,backgroundColor:e.white,shadowColor:e.black,shadowOpacity:.18,shadowRadius:2,shadowOffset:{width:0,height:1}}}/>
+            </H>
+          </C>
+        </C>
+
+        <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,padding:16}}>
+          {z({icon:<P color={e.errorColor}size={16}/>,label:x("settings.logs.clearConsoleLogs"),description:x("settings.logs.clearConsoleLogsDescription",{count:Re.length}),isLast:!0,onPress:()=>{Ho(),W.alert(x("common.success"),x("settings.logs.consoleLogsCleared"))},right:<C style={{paddingHorizontal:12,paddingVertical:6,borderRadius:8,backgroundColor:`${e.errorColor}14`,borderWidth:1,borderColor:`${e.errorColor}33`}}>
+                <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.errorColor}}>
+                  {x("common.clear")}
+                </S>
+              </C>})}
+        </C>
+        <C style={{height:48}}/>
+      </A>):F==="analytics"?(E=x("settings.analytics.title"),O=<Ge color={e.white}size={16}/>,j=x("settings.analytics.total",{count:ve.length}),$=<A style={{flex:1}}contentContainerStyle={{padding:16,paddingBottom:100,gap:12}}>
+        <C style={{backgroundColor:e.primaryLight,padding:16,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary}}>
+          {z({icon:<Ge color={e.purple}size={16}/>,label:x("settings.analytics.maxAnalyticsEvents"),description:x("settings.analytics.maxAnalyticsEventsDescription",{count:ve.length}),numericInput:{value:_e,onChange:qr,min:10,max:75,placeholder:"Enter max events (10-75)"},isLast:!0})}
+        </C>
+        <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,padding:16}}>
+          {z({icon:<P color={e.errorColor}size={16}/>,label:x("settings.analytics.clearAnalyticsEvents"),description:x("settings.analytics.clearAnalyticsEventsDescription"),isLast:!0,onPress:()=>{Do(),Xr(null),W.alert(x("common.success"),x("settings.analytics.analyticsEventsCleared"))},right:<C style={{paddingHorizontal:12,paddingVertical:6,borderRadius:8,backgroundColor:`${e.errorColor}14`,borderWidth:1,borderColor:`${e.errorColor}33`}}>
+                <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.errorColor}}>
+                  {x("common.clear")}
+                </S>
+              </C>})}
+        </C>
+        <C style={{height:48}}/>
+      </A>):F==="redux"?(E=x("settings.redux.title"),O=<Ue color={e.white}size={16}/>,j=x("settings.redux.reducers",{count:Object.keys(He||{}).length}),$=<A style={{flex:1}}contentContainerStyle={{padding:16,paddingBottom:100,gap:12}}>
+        <C style={{backgroundColor:e.primaryLight,padding:16,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,gap:4}}>
+          {z({icon:<Ue color={e.purple}size={16}/>,label:x("settings.redux.autoRefresh"),description:x("settings.redux.autoRefreshDescription"),onPress:()=>_r(r=>!r),right:<C style={{width:22,height:22,borderRadius:6,borderWidth:2,borderColor:Fe?e.purple:e.grayTextWeak,backgroundColor:Fe?`${e.purple}1A`:"transparent",alignItems:"center",justifyContent:"center"}}>
+                {Fe&&<N size={12}color={e.purple}/>}
+              </C>})}
+          <C style={{height:1,backgroundColor:e.dividerColor}}/>
+          {z({icon:<Ce color={e.purple}size={16}/>,label:x("settings.redux.defaultJsonExpandDepth"),description:x("settings.redux.defaultJsonExpandDepthDescription"),picker:{options:[1,2,3,5],selectedValue:Ke,onSelect:Kr},isLast:!0})}
+        </C>
+
+        <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,padding:16}}>
+          {z({icon:<P color={e.errorColor}size={16}/>,label:x("settings.redux.clearReduxState"),description:x(He?"settings.redux.clearReduxStateDescription":"settings.redux.clearReduxStateEmpty"),isLast:!0,onPress:()=>{Yr(null),W.alert(x("common.success"),x("settings.redux.reduxStateCleared"))},right:<C style={{paddingHorizontal:12,paddingVertical:6,borderRadius:8,backgroundColor:`${e.errorColor}14`,borderWidth:1,borderColor:`${e.errorColor}33`}}>
+                <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.errorColor}}>
+                  {x("common.clear")}
+                </S>
+              </C>})}
+        </C>
+        <C style={{height:48}}/>
+      </A>):F==="crash"?(E=x("settings.crash.title"),O=<Vr color={e.white}size={16}/>,j=`Total: ${We?.length||0}`,$=<A style={{flex:1}}contentContainerStyle={{padding:16,paddingBottom:100,gap:12}}>
+        <C style={{backgroundColor:e.primaryLight,padding:16,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,gap:4}}>
+          {z({icon:<Ce color={e.purple}size={16}/>,label:x("settings.crash.maxCrashLogs"),description:x("settings.crash.maxCrashLogsDesc"),numericInput:{value:Qe,onChange:Zr,min:5,max:50,placeholder:"Enter max crashes (5-50)"}})}
+          <C style={{height:1,backgroundColor:e.dividerColor}}/>
+          {z({icon:<Br color={e.greenColor}size={16}/>,label:x("settings.crash.globalGuard"),description:x("settings.crash.globalGuardDesc"),isLast:!0,right:<C style={{paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.greenColor}1F`}}>
+                <S style={{fontFamily:k.interBold,fontSize:10,lineHeight:13,color:e.greenColor}}>
+                  {x("settings.protectedBadge")}
+                </S>
+              </C>})}
+        </C>
+
+        <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,padding:16}}>
+          {z({icon:<P color={e.errorColor}size={16}/>,label:x("settings.crash.clearHistory"),description:x("settings.crash.clearHistoryDesc",{count:We?.length||0}),isLast:!0,onPress:()=>{Lo(),W.alert(x("common.success"),x("settings.crash.historyCleared"))},right:<C style={{paddingHorizontal:12,paddingVertical:6,borderRadius:8,backgroundColor:`${e.errorColor}14`,borderWidth:1,borderColor:`${e.errorColor}33`}}>
+                <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.errorColor}}>
+                  {x("common.clear")}
+                </S>
+              </C>})}
+        </C>
+        <C style={{height:48}}/>
+      </A>):F==="bundle"?(E=x("settings.bundle.title"),O=<Se color={e.white}size={16}/>,j="Metro",$=<A style={{flex:1}}contentContainerStyle={{padding:16,paddingBottom:100,gap:12}}>
+        <C style={{backgroundColor:e.primaryLight,padding:16,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,gap:8}}>
+          <C style={{flexDirection:"row",alignItems:"center",gap:10}}>
+            <C style={{width:36,height:36,borderRadius:10,backgroundColor:e.purpleShade50,alignItems:"center",justifyContent:"center"}}>
+              <Se color={e.purple}size={16}/>
+            </C>
+            <C style={{flex:1}}>
+              <S style={{fontFamily:k.interBold,fontSize:14,lineHeight:18,color:e.primaryBlack}}>
+                {x("settings.bundle.sourceBundler")}
+              </S>
+              <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
+                {x("settings.bundle.sourceBundlerDesc")}
+              </S>
+            </C>
+          </C>
+        </C>
+
+        <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,padding:16}}>
+          {z({icon:<P color={e.errorColor}size={16}/>,label:x("settings.bundle.clearCache"),description:x("settings.bundle.clearCacheDesc"),isLast:!0,onPress:()=>{Io(),W.alert(x("common.success"),x("settings.bundle.cacheCleared"))},right:<C style={{paddingHorizontal:12,paddingVertical:6,borderRadius:8,backgroundColor:`${e.errorColor}14`,borderWidth:1,borderColor:`${e.errorColor}33`}}>
+                <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.errorColor}}>
+                  {x("common.clear")}
+                </S>
+              </C>})}
+        </C>
+        <C style={{height:48}}/>
+      </A>):F==="performance"&&(E=x("settings.performance.title"),O=<Je color={e.white}size={16}/>,j="60 FPS Target",$=<A style={{flex:1}}contentContainerStyle={{padding:16,paddingBottom:100,gap:12}}>
+        <C style={{backgroundColor:e.primaryLight,padding:16,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,gap:8}}>
+          <C style={{flexDirection:"row",alignItems:"center",gap:10}}>
+            <C style={{width:36,height:36,borderRadius:10,backgroundColor:e.purpleShade50,alignItems:"center",justifyContent:"center"}}>
+              <Je color={e.purple}size={16}/>
+            </C>
+            <C style={{flex:1}}>
+              <S style={{fontFamily:k.interBold,fontSize:14,lineHeight:18,color:e.primaryBlack}}>
+                {x("settings.performance.frameMeasurement")}
+              </S>
+              <S style={{fontFamily:k.interRegular,fontSize:11,lineHeight:15,color:e.grayText,marginTop:1}}>
+                {x("settings.performance.frameMeasurementDesc")}
+              </S>
+            </C>
+          </C>
+        </C>
+
+        <C style={{backgroundColor:e.primaryLight,borderRadius:14,borderWidth:1,borderColor:e.grayBorderSecondary,padding:16}}>
+          {z({icon:<P color={e.errorColor}size={16}/>,label:x("settings.performance.clearEvents"),description:x("settings.performance.clearEventsDesc"),isLast:!0,onPress:()=>{Fo(),W.alert(x("common.success"),x("settings.performance.eventsCleared"))},right:<C style={{paddingHorizontal:12,paddingVertical:6,borderRadius:8,backgroundColor:`${e.errorColor}14`,borderWidth:1,borderColor:`${e.errorColor}33`}}>
+                <S style={{fontFamily:k.interBold,fontSize:11,lineHeight:14,color:e.errorColor}}>
+                  {x("common.clear")}
+                </S>
+              </C>})}
+        </C>
+        <C style={{height:48}}/>
+      </A>);const Y=lo(new Ee.Value(0)).current;return Me(()=>{F!=="main"&&(Y.setValue(0),Ee.spring(Y,{toValue:1,friction:8,tension:65,useNativeDriver:!0}).start())},[F]),<C style={{flex:1,backgroundColor:e.grayBackground}}>
       
-      <View style={[
-            StyleSheet.absoluteFill,
-            settingsPage !== 'main' && { pointerEvents: 'none' },
-        ]}>
-        {renderMainSettingsContent()}
-      </View>
+      <C style={[rr.absoluteFill,F!=="main"&&{pointerEvents:"none"}]}>
+        {to()}
+      </C>
 
       
-      {settingsPage !== 'main' && (<Animated.View style={[
-                StyleSheet.absoluteFill,
-                {
-                    backgroundColor: AppColors.grayBackground,
-                    opacity: subPageAnim,
-                    transform: [
-                        {
-                            translateX: subPageAnim.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [30, 0],
-                            }),
-                        },
-                    ],
-                },
-            ]}>
-          {content}
-        </Animated.View>)}
-    </View>);
-};
-export default SettingsPanel;
+      {F!=="main"&&<Ee.View style={[rr.absoluteFill,{backgroundColor:e.grayBackground,opacity:Y,transform:[{translateX:Y.interpolate({inputRange:[0,1],outputRange:[30,0]})}]}]}>
+          {$}
+        </Ee.View>}
+    </C>};export default Tt;