react-native-inapp-inspector 1.1.13 → 1.1.15

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

@@ -0,0 +1,1476 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+const InspectorContext_1 = require("./InspectorContext");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const styles_1 = __importStar(require("../../styles"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const constants_1 = require("../../constants");
+const settingsStore_1 = require("../../helpers/settingsStore");
+const networkLogger_1 = require("../../customHooks/networkLogger");
+const consoleLogger_1 = require("../../customHooks/consoleLogger");
+const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
+const NetworkIcons_1 = require("../NetworkIcons");
+const SettingsPanel = () => {
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, } = (0, InspectorContext_1.useInspector)();
+    const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
+    if (settingsPage === 'main') {
+        const settingsTabs = [
+            { key: 'apis', label: 'APIs', icon: 'apis' },
+            { key: 'logs', label: 'Logs', icon: 'logs' },
+            { key: 'analytics', label: 'Analytics', icon: 'analytics' },
+            { key: 'redux', label: 'Redux', icon: 'redux' },
+        ];
+        return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
+        {/* Settings Header with back button */}
+        <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
+          <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
+            <react_native_1.View style={[styles_1.default.header, { paddingHorizontal: 16, gap: 12 }]}>
+            <TouchableScale_1.default onPress={() => {
+                (0, InspectorContext_1.animateNextLayout)();
+                setSettingsPage(null);
+                switchActiveTab('apis');
+            }} hitSlop={12} style={{
+                padding: 8,
+                borderRadius: 10,
+                backgroundColor: `${AppColors_1.AppColors.white}26`,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.white}14`,
+            }}>
+              <NetworkIcons_1.WhiteBackNavigation color={AppColors_1.AppColors.white} size={16}/>
+            </TouchableScale_1.default>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 17,
+                color: AppColors_1.AppColors.white,
+            }}>
+                Settings
+              </react_native_1.Text>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                color: `${AppColors_1.AppColors.white}BF`,
+                marginTop: 1,
+            }}>
+                Manage modules and preferences
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.white}26`,
+                paddingHorizontal: 8,
+                paddingVertical: 4,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.white}1A`,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10.5,
+                color: AppColors_1.AppColors.white,
+            }}>
+                v{constants_1.LIB_VERSION}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_linear_gradient_1.default>
+
+        <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
+          {/* Sub Tabs */}
+          <react_native_1.View style={{
+                flexDirection: 'row',
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 10,
+                padding: 3,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                marginBottom: 4,
+            }}>
+            <react_native_1.TouchableOpacity onPress={() => {
+                (0, InspectorContext_1.animateNextLayout)();
+                setSettingsActiveSubTab('module');
+            }} style={{
+                flex: 1,
+                paddingVertical: 8,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 8,
+                backgroundColor: settingsActiveSubTab === 'module'
+                    ? AppColors_1.AppColors.purple
+                    : 'transparent',
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 12,
+                color: settingsActiveSubTab === 'module'
+                    ? AppColors_1.AppColors.white
+                    : AppColors_1.AppColors.grayText,
+            }}>
+                Module
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.TouchableOpacity onPress={() => {
+                (0, InspectorContext_1.animateNextLayout)();
+                setSettingsActiveSubTab('ui');
+            }} style={{
+                flex: 1,
+                paddingVertical: 8,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: 8,
+                backgroundColor: settingsActiveSubTab === 'ui'
+                    ? AppColors_1.AppColors.purple
+                    : 'transparent',
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 12,
+                color: settingsActiveSubTab === 'ui'
+                    ? AppColors_1.AppColors.white
+                    : AppColors_1.AppColors.grayText,
+            }}>
+                UI Preferences
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+
+          {settingsActiveSubTab === 'module' ? (
+            /* Tab list */
+            <react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                }}>
+              {/* Table Header */}
+              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingVertical: 8,
+                    paddingHorizontal: 14,
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderBottomWidth: 1,
+                    borderBottomColor: AppColors_1.AppColors.dividerColor,
+                    gap: 12,
+                }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    letterSpacing: 0.6,
+                    flex: 1,
+                }}>
+                  MODULE
+                </react_native_1.Text>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    letterSpacing: 0.6,
+                    width: 90,
+                    textAlign: 'right',
+                    paddingRight: 4,
+                }}>
+                  VISIBILITY
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              {settingsTabs.map((tab, idx) => {
+                    const isVisible = tab.key === 'apis' || tabVisibility?.[tab.key];
+                    const isLast = idx === settingsTabs.length - 1;
+                    const isLocked = tab.key === 'apis';
+                    return (<react_native_1.View key={tab.key} style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            paddingVertical: 10,
+                            paddingHorizontal: 14,
+                            borderBottomWidth: isLast ? 0 : 1,
+                            borderBottomColor: AppColors_1.AppColors.dividerColor,
+                            gap: 12,
+                        }}>
+                    {/* Icon + Label — fills remaining space */}
+                    <react_native_1.View style={{
+                            flex: 1,
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 8,
+                        }}>
+                      {/* Small icon tile */}
+                      <react_native_1.View style={{
+                            width: 20,
+                            height: 20,
+                            borderRadius: 6,
+                            backgroundColor: isLocked
+                                ? AppColors_1.AppColors.grayBorderSecondary
+                                : AppColors_1.AppColors.purpleShade50,
+                            borderWidth: 1,
+                            borderColor: isLocked
+                                ? AppColors_1.AppColors.dividerColor
+                                : `${AppColors_1.AppColors.purple}33`,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}>
+                        {tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isLocked
+                                ? AppColors_1.AppColors.grayTextWeak
+                                : AppColors_1.AppColors.purple} size={11}/>)}
+                        {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isLocked
+                                ? AppColors_1.AppColors.grayTextWeak
+                                : AppColors_1.AppColors.purple} size={11}/>)}
+                        {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isLocked
+                                ? AppColors_1.AppColors.grayTextWeak
+                                : AppColors_1.AppColors.purple} size={11}/>)}
+                        {tab.icon === 'redux' && (<NetworkIcons_1.TerminalIcon color={isLocked
+                                ? AppColors_1.AppColors.grayTextWeak
+                                : AppColors_1.AppColors.purple} size={11}/>)}
+                      </react_native_1.View>
+                      {/* Label + Required badge */}
+                      <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 13,
+                            color: isLocked
+                                ? AppColors_1.AppColors.grayText
+                                : AppColors_1.AppColors.primaryBlack,
+                        }}>
+                        {tab.label}
+                      </react_native_1.Text>
+                      {/* #6 — badge marks the configured default tab */}
+                      {tab.key === defaultTab && (<react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                backgroundColor: `${AppColors_1.AppColors.purple}14`,
+                                borderRadius: 20,
+                                paddingHorizontal: 6,
+                                paddingVertical: 2,
+                                borderWidth: 1,
+                                borderColor: `${AppColors_1.AppColors.purple}2E`,
+                                gap: 3,
+                            }}>
+                          <react_native_1.View style={{
+                                width: 4,
+                                height: 4,
+                                borderRadius: 2,
+                                backgroundColor: AppColors_1.AppColors.purple,
+                                opacity: 0.7,
+                            }}/>
+                          <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 8.5,
+                                color: AppColors_1.AppColors.purple,
+                                letterSpacing: 0.4,
+                            }}>
+                            DEFAULT
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
+
+                      {/* Settings gear icon next to label */}
+                      <TouchableScale_1.default onPress={() => {
+                            (0, InspectorContext_1.animateNextLayout)();
+                            setSettingsPage(tab.key);
+                        }} hitSlop={8} style={{
+                            marginLeft: 4,
+                            padding: 4,
+                            borderRadius: 6,
+                            backgroundColor: AppColors_1.AppColors.purpleShade50,
+                            borderWidth: 1,
+                            borderColor: `${AppColors_1.AppColors.purple}26`,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}>
+                        <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.purple} size={10}/>
+                      </TouchableScale_1.default>
+                    </react_native_1.View>
+
+                    {/* Visibility Switch in VISIBILITY column */}
+                    <react_native_1.View style={{
+                            width: 90,
+                            alignItems: 'flex-end',
+                            justifyContent: 'center',
+                        }}>
+                      <TouchableScale_1.default disabled={isLocked} onPress={() => toggleTabVisibility(tab.key)} style={{
+                            width: 38,
+                            height: 22,
+                            borderRadius: 11,
+                            backgroundColor: isLocked
+                                ? AppColors_1.AppColors.grayBackground
+                                : isVisible
+                                    ? AppColors_1.AppColors.purple
+                                    : AppColors_1.AppColors.grayBorderSecondary,
+                            borderWidth: isLocked ? 1.5 : 0,
+                            borderColor: isLocked
+                                ? AppColors_1.AppColors.grayBorderSecondary
+                                : 'transparent',
+                            borderStyle: isLocked ? 'dashed' : 'solid',
+                            padding: 2,
+                            justifyContent: 'center',
+                            alignItems: isVisible ? 'flex-end' : 'flex-start',
+                            opacity: isLocked ? 0.9 : 1,
+                        }}>
+                        <react_native_1.View style={{
+                            width: 18,
+                            height: 18,
+                            borderRadius: 9,
+                            backgroundColor: isLocked
+                                ? AppColors_1.AppColors.grayBorderSecondary
+                                : AppColors_1.AppColors.white,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            shadowColor: AppColors_1.AppColors.black,
+                            shadowOpacity: isLocked ? 0 : 0.15,
+                            shadowRadius: 1.5,
+                            shadowOffset: { width: 0, height: 1 },
+                        }}>
+                          {isLocked && (<react_native_svg_1.default width={10} height={10} viewBox="0 0 24 24" fill="none">
+                              <react_native_svg_1.Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors_1.AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
+                              <react_native_svg_1.Path d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" fill={AppColors_1.AppColors.grayText}/>
+                            </react_native_svg_1.default>)}
+                        </react_native_1.View>
+                      </TouchableScale_1.default>
+                      {isLocked && (<react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 8,
+                                color: AppColors_1.AppColors.grayTextWeak,
+                                letterSpacing: 0.4,
+                                marginTop: 3,
+                            }}>
+                          REQUIRED
+                        </react_native_1.Text>)}
+                    </react_native_1.View>
+                  </react_native_1.View>);
+                })}
+            </react_native_1.View>) : (
+            /* UI Preferences Section */
+            <react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                }}>
+              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                    gap: 12,
+                }}>
+                {/* Icon + Label */}
+                <react_native_1.View style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                  <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.purple}33`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    {isDark ? (<NetworkIcons_1.SunIcon color={AppColors_1.AppColors.purple} size={11}/>) : (<NetworkIcons_1.MoonIcon color={AppColors_1.AppColors.purple} size={11}/>)}
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                      Dark Theme
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                {/* Toggle Switch */}
+                <TouchableScale_1.default onPress={() => {
+                    const newTheme = !isDark;
+                    setIsDark(newTheme);
+                    (0, styles_1.toggleGlobalTheme)(newTheme);
+                }} style={{
+                    width: 38,
+                    height: 22,
+                    borderRadius: 11,
+                    backgroundColor: isDark
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayBorderSecondary,
+                    padding: 2,
+                    justifyContent: 'center',
+                    alignItems: isDark ? 'flex-end' : 'flex-start',
+                }}>
+                  <react_native_1.View style={{
+                    width: 18,
+                    height: 18,
+                    borderRadius: 9,
+                    backgroundColor: AppColors_1.AppColors.white,
+                    shadowColor: AppColors_1.AppColors.black,
+                    shadowOpacity: 0.15,
+                    shadowRadius: 1.5,
+                    shadowOffset: { width: 0, height: 1 },
+                }}/>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+
+              {/* Divider */}
+              <react_native_1.View style={{
+                    height: 1,
+                    backgroundColor: AppColors_1.AppColors.dividerColor,
+                }}/>
+
+              {/* Modal Height */}
+              <react_native_1.View style={{
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                }}>
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                  <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.purple}33`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <NetworkIcons_1.ScreenIcon color={AppColors_1.AppColors.purple} size={11}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                      Modal Height
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                      Height of the inspector panel relative to the screen
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                {/* Segmented picker */}
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    padding: 2.5,
+                    marginTop: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                }}>
+                  {[50, 70, 90, 100].map(opt => {
+                    const isActive = modalHeightPercent === opt;
+                    return (<TouchableScale_1.default key={opt} onPress={() => setModalHeightPercent(opt)} style={{
+                            flex: 1,
+                            paddingVertical: 6,
+                            alignItems: 'center',
+                            borderRadius: 6,
+                            backgroundColor: isActive
+                                ? AppColors_1.AppColors.purple
+                                : 'transparent',
+                        }}>
+                        <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11,
+                            color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
+                        }}>
+                          {opt}%
+                        </react_native_1.Text>
+                      </TouchableScale_1.default>);
+                })}
+                </react_native_1.View>
+              </react_native_1.View>
+
+              {/* Divider */}
+              <react_native_1.View style={{
+                    height: 1,
+                    backgroundColor: AppColors_1.AppColors.dividerColor,
+                }}/>
+
+              {/* Modal Animation */}
+              <react_native_1.View style={{
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                }}>
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                  <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.purple}33`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <NetworkIcons_1.MotionIcon color={AppColors_1.AppColors.purple} size={11}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                      Modal Animation
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                      How the inspector panel enters and exits the screen
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                {/* Segmented picker */}
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    padding: 2.5,
+                    marginTop: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                }}>
+                  {([
+                    { key: 'slide', label: 'Slide Up' },
+                    { key: 'fade', label: 'Fade' },
+                    { key: 'none', label: 'None' },
+                ]).map(opt => {
+                    const isActive = modalAnimationType === opt.key;
+                    return (<TouchableScale_1.default key={opt.key} onPress={() => setModalAnimationType(opt.key)} style={{
+                            flex: 1,
+                            paddingVertical: 6,
+                            alignItems: 'center',
+                            borderRadius: 6,
+                            backgroundColor: isActive
+                                ? AppColors_1.AppColors.purple
+                                : 'transparent',
+                        }}>
+                        <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11,
+                            color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
+                        }}>
+                          {opt.label}
+                        </react_native_1.Text>
+                      </TouchableScale_1.default>);
+                })}
+                </react_native_1.View>
+              </react_native_1.View>
+
+              {/* Divider */}
+              <react_native_1.View style={{
+                    height: 1,
+                    backgroundColor: AppColors_1.AppColors.dividerColor,
+                }}/>
+
+              {/* #6 — Default Tab */}
+              <react_native_1.View style={{
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                }}>
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                  <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.purple}33`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={11}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                      Default Tab
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                      Tab shown when the inspector opens
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                {/* Grid of Default Tab Cards */}
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    gap: 8,
+                    marginTop: 12,
+                }}>
+                  {settingsTabs
+                    .filter(tab => tab.key === 'apis' || tabVisibility?.[tab.key])
+                    .map(tab => {
+                    const isActive = defaultTab === tab.key;
+                    return (<TouchableScale_1.default key={tab.key} onPress={() => setDefaultTab(tab.key)} style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 8,
+                            paddingVertical: 10,
+                            paddingHorizontal: 12,
+                            borderRadius: 10,
+                            borderWidth: 1.5,
+                            borderColor: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayBorderSecondary,
+                            backgroundColor: isActive ? `${AppColors_1.AppColors.purple}0F` : AppColors_1.AppColors.primaryLight,
+                            minWidth: '47%',
+                            flex: 1,
+                        }}>
+                          <react_native_1.View style={{
+                            width: 22,
+                            height: 22,
+                            borderRadius: 6,
+                            backgroundColor: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.purpleShade50,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}>
+                            {tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
+                            {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
+                            {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
+                            {tab.icon === 'redux' && (<NetworkIcons_1.TerminalIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
+                          </react_native_1.View>
+                          <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 13,
+                            color: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.primaryBlack,
+                            flex: 1,
+                        }}>
+                              {tab.label}
+                          </react_native_1.Text>
+                          {isActive && (<react_native_1.View style={{
+                                width: 14,
+                                height: 14,
+                                borderRadius: 7,
+                                backgroundColor: AppColors_1.AppColors.purple,
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }}>
+                              <NetworkIcons_1.CheckIcon size={8} color={AppColors_1.AppColors.white}/>
+                            </react_native_1.View>)}
+                        </TouchableScale_1.default>);
+                })}
+                </react_native_1.View>
+              </react_native_1.View>
+
+              {/* Divider */}
+              <react_native_1.View style={{
+                    height: 1,
+                    backgroundColor: AppColors_1.AppColors.dividerColor,
+                }}/>
+
+              {/* #9 — Show Duplicate Logs */}
+              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                    gap: 12,
+                }}>
+                <react_native_1.View style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                  <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.purple}33`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <NetworkIcons_1.EyeIcon color={AppColors_1.AppColors.purple} size={11}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                      Show Duplicate Logs
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                      Off: repeated identical entries collapse into one row
+                      with a ×N count
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                {/* Toggle Switch */}
+                <TouchableScale_1.default onPress={() => setShowDuplicateLogs(prev => !prev)} style={{
+                    width: 38,
+                    height: 22,
+                    borderRadius: 11,
+                    backgroundColor: showDuplicateLogs
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayBorderSecondary,
+                    padding: 2,
+                    justifyContent: 'center',
+                    alignItems: showDuplicateLogs ? 'flex-end' : 'flex-start',
+                }}>
+                  <react_native_1.View style={{
+                    width: 18,
+                    height: 18,
+                    borderRadius: 9,
+                    backgroundColor: AppColors_1.AppColors.white,
+                    shadowColor: AppColors_1.AppColors.black,
+                    shadowOpacity: 0.15,
+                    shadowRadius: 1.5,
+                    shadowOffset: { width: 0, height: 1 },
+                }}/>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+
+              {/* Divider */}
+              <react_native_1.View style={{
+                    height: 1,
+                    backgroundColor: AppColors_1.AppColors.dividerColor,
+                }}/>
+
+              {/* Logs Console Levels */}
+              <react_native_1.View style={{
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                }}>
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                  <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.purple}33`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={11}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                      Logs Console Levels
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                      Toggle which log levels are visible in the Logs tab
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    gap: 8,
+                    marginTop: 10,
+                }}>
+                  {([
+                    { key: 'info', label: 'Info', color: AppColors_1.AppColors.blue500 },
+                    { key: 'warn', label: 'Warning', color: AppColors_1.AppColors.amber500 },
+                    { key: 'error', label: 'Error', color: AppColors_1.AppColors.errorColor },
+                ]).map(level => {
+                    const isActive = showConsoleLevels[level.key];
+                    return (<TouchableScale_1.default key={level.key} onPress={() => setShowConsoleLevels(prev => ({
+                            ...prev,
+                            [level.key]: !prev[level.key],
+                        }))} style={{
+                            flex: 1,
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            gap: 6,
+                            paddingVertical: 8,
+                            borderRadius: 8,
+                            borderWidth: 1.5,
+                            borderColor: isActive ? level.color : AppColors_1.AppColors.grayBorderSecondary,
+                            backgroundColor: isActive ? `${level.color}0D` : AppColors_1.AppColors.primaryLight,
+                        }}>
+                        <react_native_1.View style={{
+                            width: 8,
+                            height: 8,
+                            borderRadius: 4,
+                            backgroundColor: isActive ? level.color : AppColors_1.AppColors.grayBorderSecondary,
+                        }}/>
+                        <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11,
+                            color: isActive ? level.color : AppColors_1.AppColors.grayText,
+                        }}>
+                          {level.label}
+                        </react_native_1.Text>
+                      </TouchableScale_1.default>);
+                })}
+                </react_native_1.View>
+              </react_native_1.View>
+
+              {/* Divider */}
+              <react_native_1.View style={{
+                    height: 1,
+                    backgroundColor: AppColors_1.AppColors.dividerColor,
+                }}/>
+
+              {/* Reset Settings */}
+              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingVertical: 12,
+                    paddingHorizontal: 14,
+                    gap: 12,
+                }}>
+                <react_native_1.View style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                }}>
+                  <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 6,
+                    backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={11}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                      Reset Settings
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                      Wipe custom configurations and load package defaults
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                <TouchableScale_1.default onPress={resetToDefaults} style={{
+                    paddingHorizontal: 10,
+                    paddingVertical: 5,
+                    borderRadius: 7,
+                    backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                }}>
+                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.errorColor,
+                }}>
+                    Reset
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>)}
+
+
+          {/* Storage Status */}
+          <react_native_1.View style={{
+                backgroundColor: (0, settingsStore_1.isPersistentStorageAvailable)()
+                    ? `${AppColors_1.AppColors.liveGreen}14`
+                    : `${AppColors_1.AppColors.amber600}14`,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: (0, settingsStore_1.isPersistentStorageAvailable)()
+                    ? `${AppColors_1.AppColors.liveGreen}33`
+                    : `${AppColors_1.AppColors.amber600}33`,
+                padding: 12,
+                marginTop: 16,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+            }}>
+            <react_native_1.View style={{
+                width: 8,
+                height: 8,
+                borderRadius: 4,
+                backgroundColor: (0, settingsStore_1.isPersistentStorageAvailable)() ? AppColors_1.AppColors.green500 : AppColors_1.AppColors.amber600,
+            }}/>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 12,
+                color: (0, settingsStore_1.isPersistentStorageAvailable)() ? AppColors_1.AppColors.green700 : AppColors_1.AppColors.amber800,
+            }}>
+                {(0, settingsStore_1.isPersistentStorageAvailable)()
+                ? `Storage: Persistent (${storage ? 'Custom' : 'iOS Settings'})`
+                : 'Storage: Temporary (In-Memory)'}
+              </react_native_1.Text>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 10.5,
+                color: (0, settingsStore_1.isPersistentStorageAvailable)() ? AppColors_1.AppColors.green800 : AppColors_1.AppColors.amber800,
+                marginTop: 2,
+                opacity: 0.8,
+            }}>
+                {(0, settingsStore_1.isPersistentStorageAvailable)()
+                ? 'Your settings are saved across app restarts.'
+                : 'Settings reset when closed. To persist settings, pass a storage object to <NetworkInspector storage={...} />.'}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.ScrollView>
+      </react_native_1.View>);
+    }
+    const goBackToMain = () => {
+        (0, InspectorContext_1.animateNextLayout)();
+        setSettingsPage('main');
+    };
+    // Helper: settings row with icon + label + optional description
+    const renderSettingRow = (opts) => (<react_native_1.View style={{
+            paddingVertical: 12,
+            borderBottomWidth: opts.isLast ? 0 : 1,
+            borderBottomColor: AppColors_1.AppColors.dividerColor,
+        }}>
+      <TouchableScale_1.default disabled={!opts.onPress} onPress={opts.onPress} style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+        }}>
+        <react_native_1.View style={{
+            width: 36,
+            height: 36,
+            borderRadius: 10,
+            backgroundColor: AppColors_1.AppColors.purpleShade50,
+            borderWidth: 1,
+            borderColor: `${AppColors_1.AppColors.purple}2E`,
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}>
+          {opts.icon}
+        </react_native_1.View>
+        <react_native_1.View style={{ flex: 1 }}>
+          <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 14,
+            color: AppColors_1.AppColors.primaryBlack,
+        }}>
+            {opts.label}
+          </react_native_1.Text>
+          {opts.description ? (<react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+              {opts.description}
+            </react_native_1.Text>) : null}
+        </react_native_1.View>
+        {opts.right || null}
+      </TouchableScale_1.default>
+      {opts.picker && (<react_native_1.View style={{
+                flexDirection: 'row',
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                borderRadius: 8,
+                padding: 2.5,
+                marginTop: 10,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.dividerColor,
+            }}>
+          {opts.picker.options.map(opt => {
+                const isActive = opts.picker.selectedValue === opt;
+                return (<TouchableScale_1.default key={String(opt)} onPress={() => opts.picker.onSelect(opt)} style={{
+                        flex: 1,
+                        paddingVertical: 6,
+                        alignItems: 'center',
+                        borderRadius: 6,
+                        backgroundColor: isActive
+                            ? AppColors_1.AppColors.purple
+                            : 'transparent',
+                    }}>
+                <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
+                    }}>
+                  {opts.picker.formatLabel
+                        ? opts.picker.formatLabel(opt)
+                        : opt}
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+            })}
+        </react_native_1.View>)}
+    </react_native_1.View>);
+    let content = null;
+    let title = '';
+    let icon = null;
+    let rightInfo = '';
+    if (settingsPage === 'apis') {
+        title = 'APIs Settings';
+        icon = <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.white} size={16}/>;
+        rightInfo = `Total: ${logs.length}`;
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                gap: 4,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Max Request Logs',
+                description: 'How many network requests to keep in memory',
+                picker: {
+                    options: [50, 100, 200, 500],
+                    selectedValue: maxNetworkLogs,
+                    onSelect: setMaxNetworkLogs,
+                },
+                isLast: true,
+            })}
+        </react_native_1.View>
+
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 16,
+                marginTop: 12,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear Network Logs',
+                description: `${logs.length} requests stored`,
+                isLast: true,
+                onPress: () => {
+                    (0, networkLogger_1.clearNetworkLogs)();
+                    setSelected(null);
+                    react_native_1.Alert.alert('Success', 'Network logs cleared.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                  Clear
+                </react_native_1.Text>
+              </react_native_1.View>),
+            })}
+        </react_native_1.View>
+      </react_native_1.ScrollView>);
+    }
+    else if (settingsPage === 'logs') {
+        title = 'Logs Settings';
+        icon = <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.white} size={16}/>;
+        rightInfo = `Total: ${consoleLogs.length}`;
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                gap: 4,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Max Console Logs',
+                description: 'How many console messages to retain',
+                picker: {
+                    options: [100, 200, 500, 1000],
+                    selectedValue: maxConsoleLogs,
+                    onSelect: setMaxConsoleLogs,
+                },
+            })}
+          <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+          <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13,
+                color: AppColors_1.AppColors.primaryBlack,
+                paddingTop: 4,
+            }}>
+            Log Levels
+          </react_native_1.Text>
+          {['info', 'warn', 'error'].map(level => {
+                const isLvlActive = showConsoleLevels?.[level];
+                const levelColor = level === 'error'
+                    ? AppColors_1.AppColors.errorColor
+                    : level === 'warn'
+                        ? AppColors_1.AppColors.warningIconGold
+                        : AppColors_1.AppColors.skyBlue;
+                return renderSettingRow({
+                    icon: (<react_native_1.View style={{
+                            width: 10,
+                            height: 10,
+                            borderRadius: 5,
+                            backgroundColor: levelColor,
+                        }}/>),
+                    label: `Show ${level.charAt(0).toUpperCase() + level.slice(1)} logs`,
+                    description: level === 'info'
+                        ? 'Informational messages'
+                        : level === 'warn'
+                            ? 'Warning messages'
+                            : 'Error messages',
+                    isLast: level === 'error',
+                    onPress: () => setShowConsoleLevels(prev => ({
+                        ...prev,
+                        [level]: !prev[level],
+                    })),
+                    right: (<react_native_1.View style={{
+                            width: 22,
+                            height: 22,
+                            borderRadius: 6,
+                            borderWidth: 2,
+                            borderColor: isLvlActive
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayTextWeak,
+                            backgroundColor: isLvlActive
+                                ? `${AppColors_1.AppColors.purple}1A`
+                                : 'transparent',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}>
+                  {isLvlActive && (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>)}
+                </react_native_1.View>),
+                });
+            })}
+        </react_native_1.View>
+
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 16,
+                marginTop: 12,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear Console Logs',
+                description: `${consoleLogs.length} logs stored`,
+                isLast: true,
+                onPress: () => {
+                    (0, consoleLogger_1.clearConsoleLogs)();
+                    react_native_1.Alert.alert('Success', 'Console logs cleared.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                  Clear
+                </react_native_1.Text>
+              </react_native_1.View>),
+            })}
+        </react_native_1.View>
+      </react_native_1.ScrollView>);
+    }
+    else if (settingsPage === 'analytics') {
+        title = 'Analytics Settings';
+        icon = <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.white} size={16}/>;
+        rightInfo = `Events: ${analyticsEvents.length}`;
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                gap: 4,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Events Captured',
+                description: `${analyticsEvents.length} analytics events stored`,
+                isLast: true,
+            })}
+        </react_native_1.View>
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 16,
+                marginTop: 12,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear Analytics History',
+                description: 'Remove all captured events',
+                isLast: true,
+                onPress: () => {
+                    (0, analyticsLogger_1.clearAnalyticsEvents)();
+                    setSelectedEvent(null);
+                    react_native_1.Alert.alert('Success', 'Analytics events cleared.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                  Clear
+                </react_native_1.Text>
+              </react_native_1.View>),
+            })}
+        </react_native_1.View>
+      </react_native_1.ScrollView>);
+    }
+    else if (settingsPage === 'redux') {
+        title = 'Redux Settings';
+        icon = <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.white} size={16}/>;
+        rightInfo = `Reducers: ${Object.keys(reduxState || {}).length}`;
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                gap: 4,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Auto-refresh Store',
+                description: 'Automatically capture Redux store state updates',
+                onPress: () => setReduxAutoRefreshState(prev => !prev),
+                right: (<react_native_1.View style={{
+                        width: 22,
+                        height: 22,
+                        borderRadius: 6,
+                        borderWidth: 2,
+                        borderColor: reduxAutoRefresh
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak,
+                        backgroundColor: reduxAutoRefresh
+                            ? `${AppColors_1.AppColors.purple}1A`
+                            : 'transparent',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                {reduxAutoRefresh && (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>)}
+              </react_native_1.View>),
+            })}
+          <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: 'Default JSON Expand Depth',
+                description: 'Initial depth of Redux state tree to auto-expand',
+                picker: {
+                    options: [1, 2, 3, 5],
+                    selectedValue: reduxExpandDepth,
+                    onSelect: setReduxExpandDepth,
+                },
+                isLast: true,
+            })}
+        </react_native_1.View>
+
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 16,
+                marginTop: 12,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear Redux State',
+                description: reduxState
+                    ? 'Reset state snapshot in inspector'
+                    : 'No store snapshot stored',
+                isLast: true,
+                onPress: () => {
+                    setReduxState(null);
+                    react_native_1.Alert.alert('Success', 'Redux state snapshot cleared.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                  Clear
+                </react_native_1.Text>
+              </react_native_1.View>),
+            })}
+        </react_native_1.View>
+      </react_native_1.ScrollView>);
+    }
+    return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
+      <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
+        <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
+          <react_native_1.View style={[styles_1.default.header, { paddingHorizontal: 16, gap: 12 }]}>
+          <TouchableScale_1.default onPress={goBackToMain} hitSlop={12} style={{
+            padding: 8,
+            borderRadius: 10,
+            backgroundColor: `${AppColors_1.AppColors.white}26`,
+            borderWidth: 1,
+            borderColor: `${AppColors_1.AppColors.white}14`,
+        }}>
+            <NetworkIcons_1.WhiteBackNavigation color={AppColors_1.AppColors.white} size={16}/>
+          </TouchableScale_1.default>
+          {icon && (<react_native_1.View style={{
+                width: 30,
+                height: 30,
+                borderRadius: 8,
+                backgroundColor: `${AppColors_1.AppColors.white}26`,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+              {icon}
+            </react_native_1.View>)}
+          <react_native_1.View style={{ flex: 1 }}>
+            <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 17,
+            color: AppColors_1.AppColors.white,
+        }}>
+              {title}
+            </react_native_1.Text>
+          </react_native_1.View>
+          {rightInfo ? (<react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.white}26`,
+                paddingHorizontal: 8,
+                paddingVertical: 4,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.white}1A`,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                color: AppColors_1.AppColors.white,
+            }}>
+                {rightInfo}
+              </react_native_1.Text>
+            </react_native_1.View>) : null}
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_linear_gradient_1.default>
+      {content}
+    </react_native_1.View>);
+};
+exports.default = SettingsPanel;