react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,1233 +1,314 @@
-"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 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
-const InspectorContext_1 = require("./InspectorContext");
-const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const AppHeaderLogo_1 = __importDefault(require("../AppHeaderLogo"));
-const styles_1 = __importDefault(require("../../styles"));
-const AppColors_1 = require("../../styles/AppColors");
-const AppFonts_1 = require("../../styles/AppFonts");
-const constants_1 = require("../../constants");
-const constants_2 = require("../../constants");
-const helpers_1 = require("../../helpers");
-const NativeInspector_1 = require("../../native/NativeInspector");
-const capture_1 = require("../../capture");
-const toast_1 = require("../../helpers/toast");
-const UpdateAvailableModal_1 = require("./UpdateAvailableModal");
-const MediaPreviewModal_1 = require("./MediaPreviewModal");
-const NetworkIcons_1 = require("../NetworkIcons");
-const i18n_1 = require("../../i18n");
-const InspectorHeader = react_1.default.memo(() => {
-    const { t } = (0, i18n_1.useTranslation)();
-    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, setSettingsActiveSubTab, isFeedbackOpen, setIsFeedbackOpen, resetToDefaults, closeModal, minimizeInspector, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, refreshMediaCount, } = (0, InspectorContext_1.useInspector)();
-    const { width: windowWidth } = (0, react_native_1.useWindowDimensions)();
-    const isNarrow = windowWidth < 360;
-    const isCompact = windowWidth < 400;
-    const isTablet = windowWidth >= 600;
-    const [showUpdateModal, setShowUpdateModal] = react_1.default.useState(false);
-    const [appVersionString, setAppVersionString] = react_1.default.useState(() => {
-        return (0, helpers_1.getAppVersionAndBuild)().formatted;
-    });
-    const [isRecording, setIsRecording] = react_1.default.useState(false);
-    const [recordingSeconds, setRecordingSeconds] = react_1.default.useState(0);
-    const recordingTimerRef = react_1.default.useRef(null);
-    react_1.default.useEffect(() => {
-        capture_1.ScreenCapture.isRecording()
-            .then(active => {
-            setIsRecording(active);
-        })
-            .catch(() => { });
-    }, []);
-    react_1.default.useEffect(() => {
-        if (isRecording) {
-            setRecordingSeconds(0);
-            recordingTimerRef.current = setInterval(() => {
-                setRecordingSeconds(s => s + 1);
-            }, 1000);
-        }
-        else {
-            if (recordingTimerRef.current) {
-                clearInterval(recordingTimerRef.current);
-                recordingTimerRef.current = null;
-            }
-            setRecordingSeconds(0);
-        }
-        return () => {
-            if (recordingTimerRef.current) {
-                clearInterval(recordingTimerRef.current);
-            }
-        };
-    }, [isRecording]);
-    const [previewMediaItem, setPreviewMediaItem] = react_1.default.useState(null);
-    const handleTakeScreenshot = react_1.default.useCallback(async () => {
-        try {
-            (0, NativeInspector_1.triggerNativeHaptic)('light');
-            const result = await capture_1.ScreenCapture.takeScreenshot({
-                format: 'png',
-                quality: 0.9,
-                hideInspector: true,
-            });
-            if (result) {
-                (0, NativeInspector_1.triggerNativeHaptic)('success');
-                const newItem = {
-                    id: `screenshot_${result.timestamp}.png`,
-                    type: 'image',
-                    format: result.format,
-                    uri: result.uri,
-                    filename: result.uri.split('/').pop() || `screenshot_${result.timestamp}.png`,
-                    sizeBytes: result.sizeBytes,
-                    timestamp: result.timestamp,
-                    width: result.width,
-                    height: result.height,
-                };
-                setPreviewMediaItem(newItem);
-                refreshMediaCount?.().catch(() => { });
-                (0, toast_1.showToast)(t('header.screenshotCaptured'));
-            }
-            else {
-                (0, toast_1.showToast)(t('header.screenshotFailed'));
-            }
-        }
-        catch {
-            (0, toast_1.showToast)(t('header.screenshotError'));
-        }
-    }, [refreshMediaCount, t]);
-    const handleToggleVideoRecording = react_1.default.useCallback(async () => {
-        try {
-            if (isRecording) {
-                (0, NativeInspector_1.triggerNativeHaptic)('medium');
-                const result = await capture_1.ScreenCapture.stopRecording();
-                setIsRecording(false);
-                if (result) {
-                    (0, NativeInspector_1.triggerNativeHaptic)('success');
-                    const newItem = {
-                        id: `video_${result.timestamp}.${result.format}`,
-                        type: result.format === 'gif' ? 'gif' : 'video',
-                        format: result.format,
-                        uri: result.uri,
-                        filename: result.uri.split('/').pop() ||
-                            `video_${result.timestamp}.${result.format}`,
-                        sizeBytes: result.sizeBytes,
-                        timestamp: result.timestamp,
-                        durationMs: result.durationMs,
-                        width: result.width,
-                        height: result.height,
-                        hasAudio: result.hasAudio,
-                    };
-                    setPreviewMediaItem(newItem);
-                    refreshMediaCount?.().catch(() => { });
-                    (0, toast_1.showToast)(t('header.recordingSaved', {
-                        duration: (result.durationMs / 1000).toFixed(1),
-                    }));
-                }
-            }
-            else {
-                (0, NativeInspector_1.triggerNativeHaptic)('medium');
-                const started = await capture_1.ScreenCapture.startRecording({
-                    fps: 24,
-                    audioSource: 'none',
-                });
-                if (started) {
-                    setIsRecording(true);
-                    (0, toast_1.showToast)(t('header.recordingStarted'));
-                }
-                else {
-                    (0, toast_1.showToast)(t('header.recordingStartFailed'));
-                }
-            }
-        }
-        catch {
-            (0, toast_1.showToast)(t('header.recordingError'));
-            setIsRecording(false);
-        }
-    }, [isRecording, t]);
-    const formatTimer = (totalSeconds) => {
-        const mins = Math.floor(totalSeconds / 60);
-        const secs = totalSeconds % 60;
-        return `${mins.toString().padStart(2, '0')}:${secs
-            .toString()
-            .padStart(2, '0')}`;
-    };
-    const envConfig = (0, react_1.useMemo)(() => {
-        const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
-        const clean = rawEnv.toUpperCase();
-        if (clean === 'DEV' || clean.includes('DEV') || clean === 'LOCAL') {
-            return {
-                label: rawEnv,
-                bg: `${AppColors_1.AppColors.emerald500}40`,
-                border: `${AppColors_1.AppColors.emerald400}8C`,
-                text: AppColors_1.AppColors.mintGreenBorder,
-            };
-        }
-        if (clean === 'UAT' || clean === 'QA' || clean === 'TEST') {
-            return {
-                label: rawEnv,
-                bg: `${AppColors_1.AppColors.amber500}47`,
-                border: `${AppColors_1.AppColors.amber400}99`,
-                text: AppColors_1.AppColors.amberWarmBorder,
-            };
-        }
-        if (clean === 'PREPROD' || clean === 'STAGE' || clean === 'STAGING') {
-            return {
-                label: rawEnv,
-                bg: `${AppColors_1.AppColors.purple500}47`,
-                border: `${AppColors_1.AppColors.purple400}99`,
-                text: AppColors_1.AppColors.violetSoftBorder,
-            };
-        }
-        return {
-            label: rawEnv,
-            bg: `${AppColors_1.AppColors.rose500}40`,
-            border: `${AppColors_1.AppColors.roseBorder}8C`,
-            text: AppColors_1.AppColors.errorBorder,
-        };
-    }, [environment]);
-    const isDetailView = (activeTab === 'apis' && selected != null) ||
-        (activeTab === 'analytics' && selectedEvent != null) ||
-        (activeTab === 'logs' && selectedLog != null) ||
-        (activeTab === 'redux' &&
-            (selectedReduxSlice != null || selectedReduxAction != null)) ||
-        (activeTab === 'crash' && selectedCrash != null);
-    const isSettingsView = settingsPage !== null;
-    const isAnySelected = isDetailView || isSettingsView || isFeedbackOpen;
-    const settingsModuleTitle = (0, react_1.useMemo)(() => {
-        switch (settingsPage) {
-            case 'apis':
-                return 'APIs (Network)';
-            case 'logs':
-                return 'Console Logs';
-            case 'performance':
-                return 'Performance Tracker';
-            case 'bundle':
-                return 'Bundle Analyzer';
-            case 'crash':
-                return 'Crash Protection';
-            case 'analytics':
-                return 'Analytics Logger';
-            case 'redux':
-                return 'Redux Inspector';
-            default:
-                return 'Settings & Modules';
-        }
-    }, [settingsPage]);
-    const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
-    const buttonSize = isNarrow ? 28 : isCompact ? 30 : 32;
-    const logoSize = isNarrow ? 36 : isCompact ? 40 : 44;
-    return (<>
-      <react_native_1.View style={[
-            styles_1.default.headerGradient,
-            {
-                minHeight: (isNarrow ? 48 : 52) + headerTopPadding,
-            },
-        ]}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(i,o,n,r){r===void 0&&(r=n);var l=Object.getOwnPropertyDescriptor(o,n);(!l||("get"in l?!o.__esModule:l.writable||l.configurable))&&(l={enumerable:!0,get:function(){return o[n]}}),Object.defineProperty(i,r,l)}):(function(i,o,n,r){r===void 0&&(r=n),i[r]=o[n]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(i,o){Object.defineProperty(i,"default",{enumerable:!0,value:o})}):function(i,o){i.default=o}),__importStar=this&&this.__importStar||(function(){var i=function(o){return i=Object.getOwnPropertyNames||function(n){var r=[];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(r[r.length]=l);return r},i(o)};return function(o){if(o&&o.__esModule)return o;var n={};if(o!=null)for(var r=i(o),l=0;l<r.length;l++)r[l]!=="default"&&__createBinding(n,o,r[l]);return __setModuleDefault(n,o),n}})(),__importDefault=this&&this.__importDefault||function(i){return i&&i.__esModule?i:{default:i}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_linear_gradient_1=__importDefault(require("react-native-linear-gradient")),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AppHeaderLogo_1=__importDefault(require("../AppHeaderLogo")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),constants_1=require("../../constants"),constants_2=require("../../constants"),helpers_1=require("../../helpers"),NativeInspector_1=require("../../native/NativeInspector"),capture_1=require("../../capture"),toast_1=require("../../helpers/toast"),UpdateAvailableModal_1=require("./UpdateAvailableModal"),MediaPreviewModal_1=require("./MediaPreviewModal"),NetworkIcons_1=require("../NetworkIcons"),i18n_1=require("../../i18n"),InspectorHeader=react_1.default.memo(()=>{const{t:i}=(0,i18n_1.useTranslation)(),{modalHeightPercent:o,appIcon:n,selected:r,setSelected:l,selectedEvent:d,setSelectedEvent:L,selectedLog:p,setSelectedLog:E,selectedReduxSlice:w,setSelectedReduxSlice:q,selectedReduxAction:b,setSelectedReduxAction:W,reduxState:N,reduxLastActionMap:j,showHeaderInfo:se,setShowHeaderInfo:de,updateAvailable:V,latestNpmVersion:U,clearAnim:$,activePulseAnim:G,unreadPulseAnim:K,runClearAllWithAnimation:Q,settingsPage:f,setSettingsPage:z,isAboutOpen:I,setIsAboutOpen:H,resetToDefaults:J,closeModal:O,minimizeInspector:X,detailTitle:Y,activeTab:c,environment:B,visible:ce,selectedCrash:s,setSelectedCrash:Z,refreshMediaCount:_}=(0,InspectorContext_1.useInspector)(),{width:m}=(0,react_native_1.useWindowDimensions)(),e=m<360,C=m<400,pe=m>=600,[ee,D]=react_1.default.useState(!1),[te,ue]=react_1.default.useState(()=>(0,helpers_1.getAppVersionAndBuild)().formatted),[u,T]=react_1.default.useState(!1),[ie,R]=react_1.default.useState(0),g=react_1.default.useRef(null);react_1.default.useEffect(()=>{capture_1.ScreenCapture.isRecording().then(t=>{T(t)}).catch(()=>{})},[]),react_1.default.useEffect(()=>(u?(R(0),g.current=setInterval(()=>{R(t=>t+1)},1e3)):(g.current&&(clearInterval(g.current),g.current=null),R(0)),()=>{g.current&&clearInterval(g.current)}),[u]);const[k,y]=react_1.default.useState(null),re=react_1.default.useCallback(async()=>{try{(0,NativeInspector_1.triggerNativeHaptic)("light");const t=await capture_1.ScreenCapture.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(t){(0,NativeInspector_1.triggerNativeHaptic)("success");const a={id:`screenshot_${t.timestamp}.png`,type:"image",format:t.format,uri:t.uri,filename:t.uri.split("/").pop()||`screenshot_${t.timestamp}.png`,sizeBytes:t.sizeBytes,timestamp:t.timestamp,width:t.width,height:t.height};y(a),_?.().catch(()=>{}),(0,toast_1.showToast)(i("header.screenshotCaptured"))}else(0,toast_1.showToast)(i("header.screenshotFailed"))}catch{(0,toast_1.showToast)(i("header.screenshotError"))}},[_,i]),ae=react_1.default.useCallback(async()=>{try{if(u){(0,NativeInspector_1.triggerNativeHaptic)("medium");const t=await capture_1.ScreenCapture.stopRecording();if(T(!1),t){(0,NativeInspector_1.triggerNativeHaptic)("success");const a={id:`video_${t.timestamp}.${t.format}`,type:t.format==="gif"?"gif":"video",format:t.format,uri:t.uri,filename:t.uri.split("/").pop()||`video_${t.timestamp}.${t.format}`,sizeBytes:t.sizeBytes,timestamp:t.timestamp,durationMs:t.durationMs,width:t.width,height:t.height,hasAudio:t.hasAudio};y(a),_?.().catch(()=>{}),(0,toast_1.showToast)(i("header.recordingSaved",{duration:(t.durationMs/1e3).toFixed(1)}))}}else(0,NativeInspector_1.triggerNativeHaptic)("medium"),await capture_1.ScreenCapture.startRecording({fps:24,audioSource:"none"})?(T(!0),(0,toast_1.showToast)(i("header.recordingStarted"))):(0,toast_1.showToast)(i("header.recordingStartFailed"))}catch{(0,toast_1.showToast)(i("header.recordingError")),T(!1)}},[u,i]),oe=t=>{const a=Math.floor(t/60),M=t%60;return`${a.toString().padStart(2,"0")}:${M.toString().padStart(2,"0")}`},v=(0,react_1.useMemo)(()=>{const t=(B||(__DEV__?"DEV":"PROD")).trim(),a=t.toUpperCase();return a==="DEV"||a.includes("DEV")||a==="LOCAL"?{label:t,bg:`${AppColors_1.AppColors.emerald500}40`,border:`${AppColors_1.AppColors.emerald400}8C`,text:AppColors_1.AppColors.mintGreenBorder}:a==="UAT"||a==="QA"||a==="TEST"?{label:t,bg:`${AppColors_1.AppColors.amber500}47`,border:`${AppColors_1.AppColors.amber400}99`,text:AppColors_1.AppColors.amberWarmBorder}:a==="PREPROD"||a==="STAGE"||a==="STAGING"?{label:t,bg:`${AppColors_1.AppColors.purple500}47`,border:`${AppColors_1.AppColors.purple400}99`,text:AppColors_1.AppColors.violetSoftBorder}:{label:t,bg:`${AppColors_1.AppColors.rose500}40`,border:`${AppColors_1.AppColors.roseBorder}8C`,text:AppColors_1.AppColors.errorBorder}},[B]),S=c==="apis"&&r!=null||c==="analytics"&&d!=null||c==="logs"&&p!=null||c==="redux"&&(w!=null||b!=null)||c==="crash"&&s!=null,x=f!==null,A=S||x||I,le=(0,react_1.useMemo)(()=>{switch(f){case"apis":return"APIs (Network)";case"logs":return"Console Logs";case"performance":return"Performance Tracker";case"bundle":return"Bundle Analyzer";case"crash":return"Crash Protection";case"analytics":return"Analytics Logger";case"redux":return"Redux Inspector";default:return"Settings & Modules"}},[f]),P=(0,react_1.useMemo)(()=>react_native_1.Platform.OS==="ios"?o>=98?m>=390?50:44:0:react_native_1.Platform.OS==="android"&&o>=98?react_native_1.StatusBar.currentHeight||24:0,[o,m]),h=e?28:C?30:32,ne=e?42:C?46:50;return<>
+      <react_native_1.View style={[styles_1.default.headerGradient,{minHeight:(e?58:62)+P}]}>
         
-        <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.indigo600, AppColors_1.AppColors.violet600]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            borderTopLeftRadius: 20,
-            borderTopRightRadius: 20,
-        }} pointerEvents="none"/>
-        <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
-          <react_native_1.View style={[
-            styles_1.default.header,
-            {
-                width: '100%',
-                justifyContent: 'space-between',
-                paddingHorizontal: isNarrow ? 10 : 14,
-                paddingVertical: isNarrow ? 6 : 8,
-                minHeight: isNarrow ? 48 : 52,
-            },
-        ]}>
-            <react_native_1.View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: isNarrow ? 6 : 8,
-            flex: isDetailView ? undefined : 1,
-            flexShrink: isDetailView ? 0 : 1,
-            minWidth: 0,
-        }}>
-              {isAnySelected && (<TouchableScale_1.default onPress={() => {
-                if (isFeedbackOpen) {
-                    setIsFeedbackOpen(false);
-                    return;
-                }
-                if (isSettingsView) {
-                    if (settingsPage === 'main') {
-                        setSettingsPage(null);
-                    }
-                    else {
-                        setSettingsPage('main');
-                    }
-                    return;
-                }
-                setSelected(null);
-                setSelectedEvent(null);
-                setSelectedLog(null);
-                setSelectedReduxSlice(null);
-                setSelectedReduxAction(null);
-                setSelectedCrash(null);
-            }} hitSlop={15} style={{
-                width: isNarrow ? 32 : 36,
-                height: isNarrow ? 32 : 36,
-                borderRadius: isNarrow ? 16 : 18,
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: `${AppColors_1.AppColors.white}2E`,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}4D`,
-            }}>
-                  <react_native_1.View style={{
-                position: 'absolute',
-                width: isNarrow ? 40 : 44,
-                height: isNarrow ? 40 : 44,
-                borderRadius: 22,
-                backgroundColor: `${AppColors_1.AppColors.white}1A`,
-            }}/>
-                  <NetworkIcons_1.WhiteBackNavigation />
-                </TouchableScale_1.default>)}
+        <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.indigo600,AppColors_1.AppColors.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={{position:"absolute",top:0,left:0,right:0,bottom:0,borderTopLeftRadius:20,borderTopRightRadius:20}}pointerEvents="none"/>
+        <react_native_1.View style={{paddingTop:P,width:"100%"}}>
+          <react_native_1.View style={[styles_1.default.header,{width:"100%",justifyContent:"space-between",paddingHorizontal:e?12:16,paddingVertical:e?8:10,minHeight:e?52:56}]}>
+            <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:e?8:10,flex:S?void 0:1,flexShrink:S?0:1,minWidth:0}}>
+              {A&&<TouchableScale_1.default onPress={()=>{if(I){H(!1);return}if(x){z(f==="main"?null:"main");return}l(null),L(null),E(null),q(null),W(null),Z(null)}}hitSlop={15}style={{width:e?32:36,height:e?32:36,borderRadius:e?16:18,alignItems:"center",justifyContent:"center",backgroundColor:`${AppColors_1.AppColors.white}2E`,borderWidth:1,borderColor:`${AppColors_1.AppColors.white}4D`}}>
+                  <react_native_1.View style={{position:"absolute",width:e?40:44,height:e?40:44,borderRadius:22,backgroundColor:`${AppColors_1.AppColors.white}1A`}}/>
+                  <NetworkIcons_1.WhiteBackNavigation/>
+                </TouchableScale_1.default>}
 
-              {isFeedbackOpen ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
-                  <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-            }}>
-                    <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: isNarrow ? 14 : 16,
-                color: AppColors_1.AppColors.white,
-                letterSpacing: -0.2,
-            }} numberOfLines={1}>
-                      Support & Feedback
+              {I?<react_native_1.View style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
+                  <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:e?15:16.5,lineHeight:e?19:21,color:AppColors_1.AppColors.white,letterSpacing:-.2}}numberOfLines={1}>
+                      About & Specs
                     </react_native_1.Text>
-                    <react_native_1.View style={{
-                backgroundColor: `${AppColors_1.AppColors.white}26`,
-                paddingHorizontal: isNarrow ? 4 : 6,
-                paddingVertical: 1.5,
-                borderRadius: 10,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}20`,
-            }}>
-                      <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: isNarrow ? 8 : 9,
-                color: AppColors_1.AppColors.white,
-            }}>
+                    <react_native_1.View style={{backgroundColor:`${AppColors_1.AppColors.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.white}20`}}>
+                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:AppColors_1.AppColors.white}}>
                         v{constants_2.LIB_VERSION}
                       </react_native_1.Text>
                     </react_native_1.View>
                   </react_native_1.View>
-                  <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interRegular,
-                fontSize: isNarrow ? 9.5 : 10.5,
-                color: `${AppColors_1.AppColors.white}CC`,
-            }} numberOfLines={1}>
-                    Direct line to maintainers & developers
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${AppColors_1.AppColors.white}CC`,marginTop:1}}numberOfLines={1}>
+                    Package info, runtime specs & diagnostic payload
                   </react_native_1.Text>
-                </react_native_1.View>) : isSettingsView ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
-                  <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-            }}>
-                    <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: isNarrow ? 14 : 16,
-                color: AppColors_1.AppColors.white,
-                letterSpacing: -0.2,
-            }} numberOfLines={1}>
-                      {settingsModuleTitle}
+                </react_native_1.View>:x?<react_native_1.View style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
+                  <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:e?15:16.5,lineHeight:e?19:21,color:AppColors_1.AppColors.white,letterSpacing:-.2}}numberOfLines={1}>
+                      {le}
                     </react_native_1.Text>
-                    {settingsPage === 'main' && (<react_native_1.View style={{
-                    backgroundColor: `${AppColors_1.AppColors.white}26`,
-                    paddingHorizontal: isNarrow ? 4 : 6,
-                    paddingVertical: 1.5,
-                    borderRadius: 10,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.white}20`,
-                }}>
-                        <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: isNarrow ? 8 : 9,
-                    color: AppColors_1.AppColors.white,
-                }}>
+                    {f==="main"&&<react_native_1.View style={{backgroundColor:`${AppColors_1.AppColors.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.white}20`}}>
+                        <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:AppColors_1.AppColors.white}}>
                           v{constants_2.LIB_VERSION}
                         </react_native_1.Text>
-                      </react_native_1.View>)}
+                      </react_native_1.View>}
                   </react_native_1.View>
-                  <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interRegular,
-                fontSize: isNarrow ? 9.5 : 10.5,
-                color: `${AppColors_1.AppColors.white}CC`,
-            }} numberOfLines={1}>
-                    {settingsPage === 'main'
-                ? 'Manage modules and preferences'
-                : 'Configure module parameters'}
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${AppColors_1.AppColors.white}CC`,marginTop:1}}numberOfLines={1}>
+                    {f==="main"?"Manage modules and preferences":"Configure module parameters"}
                   </react_native_1.Text>
-                </react_native_1.View>) : !isAnySelected ? (<react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: isNarrow ? 6 : 8,
-                flex: 1,
-                minWidth: 0,
-                marginRight: 4,
-            }}>
-                  <AppHeaderLogo_1.default size={logoSize} customIcon={appIcon}/>
-                  <react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
-                    <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: isNarrow ? 4 : 6,
-                minWidth: 0,
-            }}>
-                      <react_native_1.Text style={[
-                styles_1.default.headerTitle,
-                {
-                    fontSize: isNarrow ? 13.5 : isCompact ? 14.5 : 15.5,
-                    flexShrink: 1,
-                    paddingBottom: 0,
-                },
-            ]} numberOfLines={1} ellipsizeMode="tail">
-                        {(0, helpers_1.getAppName)()}
+                </react_native_1.View>:A?null:<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:e?10:12,flex:1,minWidth:0,marginRight:4}}>
+                  <AppHeaderLogo_1.default size={ne}customIcon={n}/>
+                  <react_native_1.View style={{gap:4,flex:1,minWidth:0,justifyContent:"center"}}>
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:e?6:7,minWidth:0}}>
+                      <react_native_1.Text style={[styles_1.default.headerTitle,{fontSize:e?15:C?16:17,lineHeight:e?20:C?22:23,flexShrink:1,paddingBottom:0}]}numberOfLines={1}ellipsizeMode="tail">
+                        {(0,helpers_1.getAppName)()}
                       </react_native_1.Text>
-                      <react_native_1.View style={[
-                styles_1.default.envBadge,
-                {
-                    backgroundColor: envConfig.bg,
-                    borderColor: envConfig.border,
-                    flexShrink: 0,
-                    paddingHorizontal: isNarrow ? 4.5 : 6,
-                    paddingVertical: 1.5,
-                    marginBottom: 0,
-                },
-            ]}>
-                        <react_native_1.Text style={[
-                styles_1.default.envBadgeText,
-                {
-                    color: envConfig.text,
-                    fontSize: isNarrow ? 8.5 : 9.5,
-                },
-            ]}>
-                          {envConfig.label}
+                      <react_native_1.View style={[styles_1.default.envBadge,{backgroundColor:v.bg,borderColor:v.border,flexShrink:0,paddingHorizontal:e?6:7,paddingVertical:2.5,borderRadius:6,marginBottom:0}]}>
+                        <react_native_1.Text style={[styles_1.default.envBadgeText,{color:v.text,fontSize:e?9:10,lineHeight:13}]}>
+                          {v.label}
                         </react_native_1.Text>
                       </react_native_1.View>
-                      {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => setShowUpdateModal(true)} style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    backgroundColor: AppColors_1.AppColors.warningAmber,
-                    borderRadius: 5,
-                    paddingHorizontal: isNarrow ? 4 : 5.5,
-                    paddingVertical: 1.5,
-                    gap: 3,
-                    shadowColor: AppColors_1.AppColors.warningAmber,
-                    shadowOffset: { width: 0, height: 1.5 },
-                    shadowOpacity: 0.35,
-                    shadowRadius: 3,
-                    elevation: 3,
-                    flexShrink: 0,
-                }}>
-                          <react_native_1.Animated.View style={{
-                    width: 5,
-                    height: 5,
-                    borderRadius: 2.5,
-                    backgroundColor: AppColors_1.AppColors.white,
-                    opacity: activePulseAnim,
-                    transform: [{ scale: unreadPulseAnim }],
-                }}/>
-                          {!isNarrow && (<react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 8.5,
-                        color: AppColors_1.AppColors.white,
-                        letterSpacing: 0.3,
-                    }}>
+                      {V&&<react_native_1.Pressable hitSlop={10}onPress={()=>D(!0)}style={{flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.warningAmber,borderRadius:6,paddingHorizontal:e?5:6.5,paddingVertical:2.5,gap:3.5,shadowColor:AppColors_1.AppColors.warningAmber,shadowOffset:{width:0,height:1.5},shadowOpacity:.35,shadowRadius:3,elevation:3,flexShrink:0}}>
+                          <react_native_1.Animated.View style={{width:5,height:5,borderRadius:2.5,backgroundColor:AppColors_1.AppColors.white,opacity:G,transform:[{scale:K}]}}/>
+                          {!e&&<react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,lineHeight:11,color:AppColors_1.AppColors.white,letterSpacing:.3}}>
                               UPDATE
-                            </react_native_1.Text>)}
-                          <NetworkIcons_1.BoltIcon size={isNarrow ? 8 : 9} color={AppColors_1.AppColors.white}/>
-                        </react_native_1.Pressable>)}
+                            </react_native_1.Text>}
+                          <NetworkIcons_1.BoltIcon size={e?8:9}color={AppColors_1.AppColors.white}/>
+                        </react_native_1.Pressable>}
                     </react_native_1.View>
 
                     
-                    <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: isNarrow ? 4 : 5,
-                minWidth: 0,
-            }}>
-                      <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                backgroundColor: `${AppColors_1.AppColors.white}1F`,
-                borderRadius: 5,
-                paddingHorizontal: isNarrow ? 4.5 : 6,
-                paddingVertical: 2,
-                gap: 3.5,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}2E`,
-                flexShrink: 1,
-                minWidth: 0,
-            }}>
-                        {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color={`${AppColors_1.AppColors.white}E6`} size={isNarrow ? 9 : 10}/>) : (<NetworkIcons_1.AndroidIcon color={`${AppColors_1.AppColors.white}E6`} size={isNarrow ? 9 : 10}/>)}
-                        <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interMedium,
-                fontSize: isNarrow ? 8.5 : 9.5,
-                color: `${AppColors_1.AppColors.white}EB`,
-                letterSpacing: 0.1,
-            }} numberOfLines={1} ellipsizeMode="tail">
-                          {appVersionString}
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:e?5:6,minWidth:0,marginTop:2}}>
+                      <react_native_1.View style={{flexDirection:"row",alignItems:"center",backgroundColor:`${AppColors_1.AppColors.white}1F`,borderRadius:6,paddingHorizontal:e?6:7,paddingVertical:3,gap:4,borderWidth:1,borderColor:`${AppColors_1.AppColors.white}2E`,flexShrink:1,minWidth:0}}>
+                        {react_native_1.Platform.OS==="ios"?<NetworkIcons_1.AppleIcon color={`${AppColors_1.AppColors.white}E6`}size={e?9.5:10.5}/>:<NetworkIcons_1.AndroidIcon color={`${AppColors_1.AppColors.white}E6`}size={e?9.5:10.5}/>}
+                        <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:e?9:10,lineHeight:13,color:`${AppColors_1.AppColors.white}EB`,letterSpacing:.1}}numberOfLines={1}ellipsizeMode="tail">
+                          {te}
                         </react_native_1.Text>
                       </react_native_1.View>
 
-                      <react_native_1.Pressable onPress={() => {
-                if (updateAvailable) {
-                    setShowUpdateModal(true);
-                }
-                else {
-                    react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
-                }
-            }} style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                backgroundColor: `${AppColors_1.AppColors.white}1F`,
-                borderRadius: 5,
-                paddingHorizontal: isNarrow ? 4.5 : 6,
-                paddingVertical: 2,
-                gap: 3.5,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}2E`,
-                flexShrink: 0,
-            }}>
-                        <NetworkIcons_1.NpmIcon size={isNarrow ? 9 : 10} color={AppColors_1.AppColors.npmRedLight}/>
-                        <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interMedium,
-                fontSize: isNarrow ? 8.5 : 9.5,
-                color: `${AppColors_1.AppColors.white}EB`,
-                letterSpacing: 0.1,
-            }} numberOfLines={1}>
+                      <react_native_1.Pressable onPress={()=>{V?D(!0):react_native_1.Linking.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{})}}style={{flexDirection:"row",alignItems:"center",backgroundColor:`${AppColors_1.AppColors.white}1F`,borderRadius:6,paddingHorizontal:e?6:7,paddingVertical:3,gap:4,borderWidth:1,borderColor:`${AppColors_1.AppColors.white}2E`,flexShrink:0}}>
+                        <NetworkIcons_1.NpmIcon size={e?9.5:10.5}color={AppColors_1.AppColors.npmRedLight}/>
+                        <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:e?9:10,lineHeight:13,color:`${AppColors_1.AppColors.white}EB`,letterSpacing:.1}}numberOfLines={1}>
                           v{constants_2.LIB_VERSION}
                         </react_native_1.Text>
-                        {updateAvailable && (<react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 8.5,
-                    color: AppColors_1.AppColors.warningAmber,
-                }}>
+                        {V&&<react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,color:AppColors_1.AppColors.warningAmber}}>
                             ●
-                          </react_native_1.Text>)}
+                          </react_native_1.Text>}
                       </react_native_1.Pressable>
                     </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.View>) : null}
+                </react_native_1.View>}
             </react_native_1.View>
 
-            {isDetailView && (<react_native_1.View style={[
-                styles_1.default.headerCenter,
-                { paddingHorizontal: isNarrow ? 2 : 6 },
-            ]}>
-                {activeTab === 'apis' && selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+            {S&&<react_native_1.View style={[styles_1.default.headerCenter,{paddingHorizontal:e?2:6}]}>
+                {c==="apis"&&r!=null?<react_native_1.View style={styles_1.default.headerDetailCenter}>
                     <react_native_1.View style={styles_1.default.headerDetailRow}>
-                      <react_native_1.View style={[
-                    styles_1.default.headerMethodBadge,
-                    {
-                        backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
-                            AppColors_1.AppColors.grayText,
-                        paddingHorizontal: isNarrow ? 5 : 6,
-                        paddingVertical: isNarrow ? 2 : 3,
-                    },
-                ]}>
-                        <react_native_1.Text style={[
-                    styles_1.default.headerMethodText,
-                    { fontSize: isNarrow ? 9 : 10 },
-                ]}>
-                          {selected.method}
+                      <react_native_1.View style={[styles_1.default.headerMethodBadge,{backgroundColor:constants_1.METHOD_COLORS[r.method]??AppColors_1.AppColors.grayText,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                        <react_native_1.Text style={[styles_1.default.headerMethodText,{fontSize:e?9:10}]}>
+                          {r.method}
                         </react_native_1.Text>
                       </react_native_1.View>
-                      <react_native_1.Text style={[
-                    styles_1.default.headerDetailTitle,
-                    { fontSize: isNarrow ? 13.5 : 15 },
-                ]} numberOfLines={1} ellipsizeMode="middle">
-                        {detailTitle}
+                      <react_native_1.Text style={[styles_1.default.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
+                        {Y}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: isNarrow ? 4 : 6,
-                    marginTop: 3,
-                    paddingVertical: 1,
-                }}>
-                      <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: isNarrow ? 6 : 8,
-                    paddingVertical: 2.5,
-                    borderRadius: 20,
-                    backgroundColor: `${(0, helpers_1.getStatusColor)(selected.status)}26`,
-                    borderWidth: 1,
-                    borderColor: `${(0, helpers_1.getStatusColor)(selected.status)}55`,
-                }}>
-                        <react_native_1.View style={[
-                    styles_1.default.headerStatusDot,
-                    {
-                        backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
-                        width: isNarrow ? 6 : 7,
-                        height: isNarrow ? 6 : 7,
-                    },
-                ]}/>
-                        <react_native_1.Text style={[
-                    styles_1.default.headerSubTitle,
-                    {
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: isNarrow ? 10 : 11,
-                    },
-                ]}>
-                          {selected.status === 0
-                    ? 'Failed'
-                    : selected.status ?? 'Pending'}
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
+                      <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${(0,helpers_1.getStatusColor)(r.status)}26`,borderWidth:1,borderColor:`${(0,helpers_1.getStatusColor)(r.status)}55`}}>
+                        <react_native_1.View style={[styles_1.default.headerStatusDot,{backgroundColor:(0,helpers_1.getStatusColor)(r.status),width:e?6:7,height:e?6:7}]}/>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:e?10:11}]}>
+                          {r.status===0?"Failed":r.status??"Pending"}
                         </react_native_1.Text>
                       </react_native_1.View>
-                      <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: isNarrow ? 6 : 8,
-                    paddingVertical: 2.5,
-                    borderRadius: 20,
-                    backgroundColor: `${AppColors_1.AppColors.white}29`,
-                }}>
-                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
-                        <react_native_1.Text style={[
-                    styles_1.default.headerSubTitle,
-                    { fontSize: isNarrow ? 10 : 11 },
-                ]}>
-                          {selected.duration != null
-                    ? `${selected.duration}ms`
-                    : '—'}
+                      <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${AppColors_1.AppColors.white}29`}}>
+                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white}size={e?10:11}/>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontSize:e?10:11}]}>
+                          {r.duration!=null?`${r.duration}ms`:"\u2014"}
                         </react_native_1.Text>
                       </react_native_1.View>
-                      {selected.response != null && (<react_native_1.View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4,
-                        paddingHorizontal: isNarrow ? 6 : 8,
-                        paddingVertical: 2.5,
-                        borderRadius: 20,
-                        backgroundColor: `${AppColors_1.AppColors.white}29`,
-                    }}>
-                          <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
-                          <react_native_1.Text style={[
-                        styles_1.default.headerSubTitle,
-                        { fontSize: isNarrow ? 10 : 11 },
-                    ]}>
-                            {(0, helpers_1.getSize)(selected.response)}
+                      {r.response!=null&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${AppColors_1.AppColors.white}29`}}>
+                          <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.white}size={e?10:11}/>
+                          <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontSize:e?10:11}]}>
+                            {(0,helpers_1.getSize)(r.response)}
                           </react_native_1.Text>
-                        </react_native_1.View>)}
+                        </react_native_1.View>}
                     </react_native_1.View>
-                  </react_native_1.View>) : activeTab === 'analytics' && selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  </react_native_1.View>:c==="analytics"&&d!=null?<react_native_1.View style={styles_1.default.headerDetailCenter}>
                     <react_native_1.View style={styles_1.default.headerDetailRow}>
-                      <react_native_1.View style={[
-                    styles_1.default.headerMethodBadge,
-                    {
-                        backgroundColor: selectedEvent.source === 'firebase'
-                            ? `${AppColors_1.AppColors.firebaseOrange}4D`
-                            : `${AppColors_1.AppColors.purple}4D`,
-                        paddingHorizontal: isNarrow ? 5 : 6,
-                        paddingVertical: isNarrow ? 2 : 3,
-                    },
-                ]}>
-                        <react_native_1.Text style={[
-                    styles_1.default.headerMethodText,
-                    { fontSize: isNarrow ? 9 : 10 },
-                ]}>
-                          {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
+                      <react_native_1.View style={[styles_1.default.headerMethodBadge,{backgroundColor:d.source==="firebase"?`${AppColors_1.AppColors.firebaseOrange}4D`:`${AppColors_1.AppColors.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                        <react_native_1.Text style={[styles_1.default.headerMethodText,{fontSize:e?9:10}]}>
+                          {d.source==="firebase"?"FB":"MAN"}
                         </react_native_1.Text>
                       </react_native_1.View>
-                      <react_native_1.Text style={[
-                    styles_1.default.headerDetailTitle,
-                    { fontSize: isNarrow ? 13.5 : 15 },
-                ]} numberOfLines={1} ellipsizeMode="middle">
-                        {selectedEvent.name}
+                      <react_native_1.Text style={[styles_1.default.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
+                        #{d.id!=null?d.id+1:1}{" "}
+                        {d.name}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: isNarrow ? 4 : 6,
-                    marginTop: 3,
-                    paddingVertical: 1,
-                }}>
-                      <react_native_1.View style={[
-                    styles_1.default.headerStatusDot,
-                    {
-                        backgroundColor: selectedEvent.source === 'firebase'
-                            ? AppColors_1.AppColors.firebaseOrange
-                            : AppColors_1.AppColors.purple,
-                        width: isNarrow ? 6 : 7,
-                        height: isNarrow ? 6 : 7,
-                    },
-                ]}/>
-                      <react_native_1.Text style={[
-                    styles_1.default.headerSubTitle,
-                    { fontSize: isNarrow ? 10 : 11 },
-                ]}>
-                        {Object.keys(selectedEvent.params).length} param
-                        {Object.keys(selectedEvent.params).length !== 1
-                    ? 's'
-                    : ''}
-                        {' · '}
-                        {selectedEvent.source}
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
+                      <react_native_1.View style={[styles_1.default.headerStatusDot,{backgroundColor:d.source==="firebase"?AppColors_1.AppColors.firebaseOrange:AppColors_1.AppColors.purple,width:e?6:7,height:e?6:7}]}/>
+                      <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontSize:e?10:11}]}>
+                        {Object.keys(d.params).length} param
+                        {Object.keys(d.params).length!==1?"s":""}
+                        {" \xB7 "}
+                        {d.source}
                       </react_native_1.Text>
                     </react_native_1.View>
-                  </react_native_1.View>) : activeTab === 'logs' && selectedLog != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  </react_native_1.View>:c==="logs"&&p!=null?<react_native_1.View style={styles_1.default.headerDetailCenter}>
                     <react_native_1.View style={styles_1.default.headerDetailRow}>
-                      <react_native_1.View style={[
-                    styles_1.default.headerMethodBadge,
-                    {
-                        backgroundColor: selectedLog.type === 'error'
-                            ? `${AppColors_1.AppColors.errorColor}4D`
-                            : selectedLog.type === 'warn'
-                                ? `${AppColors_1.AppColors.lightOrange}4D`
-                                : `${AppColors_1.AppColors.purple}4D`,
-                        paddingHorizontal: isNarrow ? 5 : 6,
-                        paddingVertical: isNarrow ? 2 : 3,
-                    },
-                ]}>
-                        <react_native_1.Text style={[
-                    styles_1.default.headerMethodText,
-                    { fontSize: isNarrow ? 9 : 10 },
-                ]}>
-                          {selectedLog.type.toUpperCase()}
+                      <react_native_1.View style={[styles_1.default.headerMethodBadge,{backgroundColor:p.type==="error"?`${AppColors_1.AppColors.errorColor}4D`:p.type==="warn"?`${AppColors_1.AppColors.lightOrange}4D`:`${AppColors_1.AppColors.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                        <react_native_1.Text style={[styles_1.default.headerMethodText,{fontSize:e?9:10}]}>
+                          {p.type.toUpperCase()}
                         </react_native_1.Text>
                       </react_native_1.View>
-                      <react_native_1.Text style={[
-                    styles_1.default.headerDetailTitle,
-                    { fontSize: isNarrow ? 13.5 : 15 },
-                ]} numberOfLines={1} ellipsizeMode="middle">
+                      <react_native_1.Text style={[styles_1.default.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
+                        #{p.id!=null?p.id+1:1}{" "}
                         console.
-                        {selectedLog.sourceMethod || selectedLog.type || 'log'}
+                        {p.sourceMethod||p.type||"log"}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: isNarrow ? 4 : 6,
-                    marginTop: 3,
-                    paddingVertical: 1,
-                }}>
-                      <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: isNarrow ? 6 : 8,
-                    paddingVertical: 2.5,
-                    borderRadius: 20,
-                    backgroundColor: `${AppColors_1.AppColors.white}29`,
-                }}>
-                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
-                        <react_native_1.Text style={[
-                    styles_1.default.headerSubTitle,
-                    { fontSize: isNarrow ? 10 : 11 },
-                ]}>
-                          {(0, helpers_1.formatTime)(selectedLog.timestamp)}
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
+                      <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${AppColors_1.AppColors.white}29`}}>
+                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white}size={e?10:11}/>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontSize:e?10:11}]}>
+                          {(0,helpers_1.formatTime)(p.timestamp)}
                         </react_native_1.Text>
                       </react_native_1.View>
                     </react_native_1.View>
-                  </react_native_1.View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
-                const sliceData = reduxState?.[selectedReduxSlice];
-                const keyCount = sliceData && typeof sliceData === 'object'
-                    ? Object.keys(sliceData).length
-                    : typeof sliceData !== 'undefined'
-                        ? 1
-                        : 0;
-                const sliceSize = (0, helpers_1.getSize)(sliceData);
-                const lastAction = reduxLastActionMap[selectedReduxSlice];
-                return (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  </react_native_1.View>:c==="redux"&&w!=null?(()=>{const t=N?.[w],a=t&&typeof t=="object"?Object.keys(t).length:typeof t<"u"?1:0,M=(0,helpers_1.getSize)(t),F=j[w];return<react_native_1.View style={styles_1.default.headerDetailCenter}>
                         <react_native_1.View style={styles_1.default.headerDetailRow}>
-                          <react_native_1.View style={[
-                        styles_1.default.headerMethodBadge,
-                        {
-                            backgroundColor: `${AppColors_1.AppColors.purple}4D`,
-                            paddingHorizontal: isNarrow ? 5 : 6,
-                            paddingVertical: isNarrow ? 2 : 3,
-                        },
-                    ]}>
-                            <react_native_1.Text style={[
-                        styles_1.default.headerMethodText,
-                        { fontSize: isNarrow ? 9 : 10 },
-                    ]}>
+                          <react_native_1.View style={[styles_1.default.headerMethodBadge,{backgroundColor:`${AppColors_1.AppColors.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                            <react_native_1.Text style={[styles_1.default.headerMethodText,{fontSize:e?9:10}]}>
                               SLICE
                             </react_native_1.Text>
                           </react_native_1.View>
-                          <react_native_1.Text style={[
-                        styles_1.default.headerDetailTitle,
-                        { fontSize: isNarrow ? 13.5 : 15 },
-                    ]} numberOfLines={1} ellipsizeMode="middle">
-                            {selectedReduxSlice}
+                          <react_native_1.Text style={[styles_1.default.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
+                            {w}
                           </react_native_1.Text>
                         </react_native_1.View>
-                        <react_native_1.View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: isNarrow ? 4 : 6,
-                        marginTop: 3,
-                        paddingVertical: 1,
-                    }}>
-                          <react_native_1.View style={[
-                        styles_1.default.headerStatusDot,
-                        {
-                            backgroundColor: AppColors_1.AppColors.liveGreen,
-                            width: isNarrow ? 6 : 7,
-                            height: isNarrow ? 6 : 7,
-                        },
-                    ]}/>
-                          <react_native_1.Text style={[
-                        styles_1.default.headerSubTitle,
-                        { fontSize: isNarrow ? 10 : 11 },
-                    ]}>
+                        <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
+                          <react_native_1.View style={[styles_1.default.headerStatusDot,{backgroundColor:AppColors_1.AppColors.liveGreen,width:e?6:7,height:e?6:7}]}/>
+                          <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontSize:e?10:11}]}>
                             Live
                           </react_native_1.Text>
-                          <react_native_1.Text style={[
-                        styles_1.default.headerSubTitle,
-                        { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
-                    ]}>
+                          <react_native_1.Text style={[styles_1.default.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                             •
                           </react_native_1.Text>
-                          <react_native_1.Text style={[
-                        styles_1.default.headerSubTitle,
-                        { fontSize: isNarrow ? 10 : 11 },
-                    ]}>
-                            {keyCount} keys
+                          <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontSize:e?10:11}]}>
+                            {a} keys
                           </react_native_1.Text>
-                          <react_native_1.Text style={[
-                        styles_1.default.headerSubTitle,
-                        { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
-                    ]}>
+                          <react_native_1.Text style={[styles_1.default.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                             •
                           </react_native_1.Text>
-                          <react_native_1.Text style={[
-                        styles_1.default.headerSubTitle,
-                        { fontSize: isNarrow ? 10 : 11 },
-                    ]}>
-                            {sliceSize}
+                          <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontSize:e?10:11}]}>
+                            {M}
                           </react_native_1.Text>
-                          {lastAction?.timestamp && (<>
-                              <react_native_1.Text style={[
-                            styles_1.default.headerSubTitle,
-                            { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
-                        ]}>
+                          {F?.timestamp&&<>
+                              <react_native_1.Text style={[styles_1.default.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                                 •
                               </react_native_1.Text>
-                              <react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 3,
-                        }}>
-                                <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 9 : 10}/>
-                                <react_native_1.Text style={[
-                            styles_1.default.headerSubTitle,
-                            { fontSize: isNarrow ? 10 : 11 },
-                        ]}>
-                                  {lastAction.timestamp}
+                              <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:3}}>
+                                <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white}size={e?9:10}/>
+                                <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontSize:e?10:11}]}>
+                                  {F.timestamp}
                                 </react_native_1.Text>
                               </react_native_1.View>
-                            </>)}
+                            </>}
                         </react_native_1.View>
-                      </react_native_1.View>);
-            })()) : activeTab === 'redux' && selectedReduxAction != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                      </react_native_1.View>})():c==="redux"&&b!=null?<react_native_1.View style={styles_1.default.headerDetailCenter}>
                     <react_native_1.View style={styles_1.default.headerDetailRow}>
-                      <react_native_1.View style={[
-                    styles_1.default.headerMethodBadge,
-                    {
-                        backgroundColor: `${AppColors_1.AppColors.brandPurple}4D`,
-                        paddingHorizontal: isNarrow ? 5 : 6,
-                        paddingVertical: isNarrow ? 2 : 3,
-                    },
-                ]}>
-                        <react_native_1.Text style={[
-                    styles_1.default.headerMethodText,
-                    { fontSize: isNarrow ? 9 : 10 },
-                ]}>
+                      <react_native_1.View style={[styles_1.default.headerMethodBadge,{backgroundColor:`${AppColors_1.AppColors.brandPurple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                        <react_native_1.Text style={[styles_1.default.headerMethodText,{fontSize:e?9:10}]}>
                           ACTION
                         </react_native_1.Text>
                       </react_native_1.View>
-                      <react_native_1.Text style={[
-                    styles_1.default.headerDetailTitle,
-                    { fontSize: isNarrow ? 13.5 : 15 },
-                ]} numberOfLines={1} ellipsizeMode="middle">
-                        {selectedReduxAction.type}
+                      <react_native_1.Text style={[styles_1.default.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
+                        {b.type}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: isNarrow ? 4 : 6,
-                    marginTop: 3,
-                    paddingVertical: 1,
-                }}>
-                      <react_native_1.View style={[
-                    styles_1.default.headerStatusDot,
-                    {
-                        backgroundColor: AppColors_1.AppColors.purple,
-                        width: isNarrow ? 6 : 7,
-                        height: isNarrow ? 6 : 7,
-                    },
-                ]}/>
-                      <react_native_1.Text style={[
-                    styles_1.default.headerSubTitle,
-                    { fontSize: isNarrow ? 10 : 11 },
-                ]}>
-                        {selectedReduxAction.timestamp || 'Dispatched'}
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
+                      <react_native_1.View style={[styles_1.default.headerStatusDot,{backgroundColor:AppColors_1.AppColors.purple,width:e?6:7,height:e?6:7}]}/>
+                      <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontSize:e?10:11}]}>
+                        {b.timestamp||"Dispatched"}
                       </react_native_1.Text>
                     </react_native_1.View>
-                  </react_native_1.View>) : activeTab === 'crash' && selectedCrash != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  </react_native_1.View>:c==="crash"&&s!=null?<react_native_1.View style={styles_1.default.headerDetailCenter}>
                     <react_native_1.View style={styles_1.default.headerDetailRow}>
-                      <react_native_1.View style={[
-                    styles_1.default.headerMethodBadge,
-                    {
-                        backgroundColor: selectedCrash.isFatal
-                            ? AppColors_1.AppColors.red600
-                            : AppColors_1.AppColors.amber600,
-                        paddingHorizontal: isNarrow ? 5 : 6,
-                        paddingVertical: isNarrow ? 2 : 3,
-                    },
-                ]}>
-                        <react_native_1.Text style={[
-                    styles_1.default.headerMethodText,
-                    { fontSize: isNarrow ? 9 : 10 },
-                ]}>
-                          {selectedCrash.isFatal
-                    ? 'FATAL'
-                    : selectedCrash.type.toUpperCase()}
+                      <react_native_1.View style={[styles_1.default.headerMethodBadge,{backgroundColor:s.isFatal?AppColors_1.AppColors.red600:AppColors_1.AppColors.amber600,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                        <react_native_1.Text style={[styles_1.default.headerMethodText,{fontSize:e?9:10}]}>
+                          {s.isFatal?"FATAL":s.type.toUpperCase()}
                         </react_native_1.Text>
                       </react_native_1.View>
-                      <react_native_1.Text style={[
-                    styles_1.default.headerDetailTitle,
-                    { fontSize: isNarrow ? 13.5 : 15 },
-                ]} numberOfLines={1} ellipsizeMode="middle">
-                        {selectedCrash.name || selectedCrash.message}
+                      <react_native_1.Text style={[styles_1.default.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
+                        {s.name||s.message}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: isNarrow ? 4 : 6,
-                    marginTop: 3,
-                    paddingVertical: 1,
-                }}>
-                      <react_native_1.View style={[
-                    styles_1.default.headerStatusDot,
-                    {
-                        backgroundColor: selectedCrash.isFatal
-                            ? AppColors_1.AppColors.red600
-                            : AppColors_1.AppColors.amber500,
-                        width: isNarrow ? 6 : 7,
-                        height: isNarrow ? 6 : 7,
-                    },
-                ]}/>
-                      <react_native_1.Text style={[
-                    styles_1.default.headerSubTitle,
-                    { fontSize: isNarrow ? 10 : 11 },
-                ]}>
-                        {selectedCrash.timeStr ||
-                    new Date(selectedCrash.timestamp).toLocaleTimeString()}
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
+                      <react_native_1.View style={[styles_1.default.headerStatusDot,{backgroundColor:s.isFatal?AppColors_1.AppColors.red600:AppColors_1.AppColors.amber500,width:e?6:7,height:e?6:7}]}/>
+                      <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontSize:e?10:11}]}>
+                        {s.timeStr||new Date(s.timestamp).toLocaleTimeString()}
                       </react_native_1.Text>
-                      {selectedCrash.deviceInfo?.platform && (<>
-                          <react_native_1.Text style={[
-                        styles_1.default.headerSubTitle,
-                        { opacity: 0.6, fontSize: isNarrow ? 10 : 11 },
-                    ]}>
+                      {s.deviceInfo?.platform&&<>
+                          <react_native_1.Text style={[styles_1.default.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                             •
                           </react_native_1.Text>
-                          <react_native_1.Text style={[
-                        styles_1.default.headerSubTitle,
-                        { fontSize: isNarrow ? 10 : 11 },
-                    ]}>
-                            {selectedCrash.deviceInfo.platform.toUpperCase()}
+                          <react_native_1.Text style={[styles_1.default.headerSubTitle,{fontSize:e?10:11}]}>
+                            {s.deviceInfo.platform.toUpperCase()}
                           </react_native_1.Text>
-                        </>)}
+                        </>}
                     </react_native_1.View>
-                  </react_native_1.View>) : null}
-              </react_native_1.View>)}
+                  </react_native_1.View>:null}
+              </react_native_1.View>}
 
-            <react_native_1.View style={[
-            styles_1.default.headerRight,
-            {
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                flexShrink: 0,
-                gap: isNarrow ? 5 : 7,
-            },
-        ]}>
-              {isSettingsView && (<TouchableScale_1.default onPress={() => {
-                react_native_1.Alert.alert('Reset All Settings', 'This restores all module visibility and UI preferences to defaults. Continue?', [
-                    { text: 'Cancel', style: 'cancel' },
-                    {
-                        text: 'Reset',
-                        style: 'destructive',
-                        onPress: resetToDefaults,
-                    },
-                ]);
-            }} hitSlop={15} style={[
-                styles_1.default.closeButtonSquare,
-                {
-                    width: buttonSize,
-                    height: buttonSize,
-                    borderRadius: isNarrow ? 6 : 7,
-                },
-            ]}>
-                  <NetworkIcons_1.ResetIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
-                </TouchableScale_1.default>)}
+            <react_native_1.View style={[styles_1.default.headerRight,{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",flexShrink:0,gap:e?4:5}]}>
 
-              {!isAnySelected && (<TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Settings" onPress={() => setSettingsPage('main')} hitSlop={15} style={[
-                styles_1.default.closeButtonSquare,
-                {
-                    width: buttonSize,
-                    height: buttonSize,
-                    borderRadius: isNarrow ? 6 : 7,
-                },
-            ]}>
-                  <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
-                </TouchableScale_1.default>)}
+              {x&&<TouchableScale_1.default onPress={()=>{react_native_1.Alert.alert("Reset All Settings","This restores all module visibility and UI preferences to defaults. Continue?",[{text:"Cancel",style:"cancel"},{text:"Reset",style:"destructive",onPress:J}])}}hitSlop={15}style={[styles_1.default.closeButtonSquare,{width:h,height:h,borderRadius:e?6:7}]}>
+                  <NetworkIcons_1.ResetIcon color={AppColors_1.AppColors.white}size={e?12:14}/>
+                </TouchableScale_1.default>}
+
+              {!A&&<TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel="Settings"onPress={()=>z("main")}hitSlop={15}style={[styles_1.default.closeButtonSquare,{width:h,height:h,borderRadius:e?6:7}]}>
+                  <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white}size={e?12:14}/>
+                </TouchableScale_1.default>}
 
               
-              <react_native_1.TouchableOpacity onPress={minimizeInspector || closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} accessibilityRole="button" accessibilityLabel={t('common.minimize', 'Minimize')} style={[
-            styles_1.default.closeButtonSquare,
-            {
-                width: buttonSize,
-                height: buttonSize,
-                borderRadius: isNarrow ? 6 : 7,
-            },
-        ]}>
-                <NetworkIcons_1.ChevronDownIcon size={isNarrow ? 14 : 16} color={AppColors_1.AppColors.white}/>
+              <react_native_1.TouchableOpacity onPress={X||O}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.6}accessibilityRole="button"accessibilityLabel={i("common.minimize","Minimize")}style={[styles_1.default.closeButtonSquare,{width:h,height:h,borderRadius:e?6:7}]}>
+                <NetworkIcons_1.ChevronDownIcon size={e?14:16}color={AppColors_1.AppColors.white}/>
               </react_native_1.TouchableOpacity>
 
               
-              <react_native_1.TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} accessibilityRole="button" accessibilityLabel={t('common.close', 'Close')} style={[
-            styles_1.default.closeButtonSquare,
-            {
-                width: buttonSize,
-                height: buttonSize,
-                borderRadius: isNarrow ? 6 : 7,
-            },
-        ]}>
-                <NetworkIcons_1.CloseWhite size={isNarrow ? 12 : 14}/>
+              <react_native_1.TouchableOpacity onPress={O}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.6}accessibilityRole="button"accessibilityLabel={i("common.close","Close")}style={[styles_1.default.closeButtonSquare,{width:h,height:h,borderRadius:e?6:7}]}>
+                <NetworkIcons_1.CloseWhite size={e?12:14}/>
               </react_native_1.TouchableOpacity>
             </react_native_1.View>
           </react_native_1.View>
 
           
-          {!isAnySelected && (<react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                paddingHorizontal: isNarrow ? 8 : 12,
-                paddingBottom: isNarrow ? 6 : 8,
-                paddingTop: 0,
-                gap: 6,
-            }}>
-              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                
-                <TouchableScale_1.default onPress={handleTakeScreenshot} style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 4.5,
-                backgroundColor: `${AppColors_1.AppColors.white}24`,
-                paddingHorizontal: isNarrow ? 8 : 10,
-                paddingVertical: isNarrow ? 4 : 5,
-                borderRadius: 6,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}33`,
-            }}>
-                  <NetworkIcons_1.CameraIcon size={isNarrow ? 12 : 13} color={AppColors_1.AppColors.white}/>
-                  <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interSemiBold,
-                fontSize: isNarrow ? 10 : 11,
-                color: AppColors_1.AppColors.white,
-            }}>
-                    {t('header.photo')}
-                  </react_native_1.Text>
-                </TouchableScale_1.default>
+          {!A&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:e?10:14,paddingBottom:e?8:10,paddingTop:2,gap:6}}>
+            <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              
+              <TouchableScale_1.default onPress={re}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${AppColors_1.AppColors.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:`${AppColors_1.AppColors.white}33`}}>
+                <NetworkIcons_1.CameraIcon size={e?12:13}color={AppColors_1.AppColors.white}/>
+                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:AppColors_1.AppColors.white}}>
+                  {i("header.photo")}
+                </react_native_1.Text>
+              </TouchableScale_1.default>
 
-                
-                <TouchableScale_1.default onPress={handleToggleVideoRecording} style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 4.5,
-                backgroundColor: isRecording
-                    ? `${AppColors_1.AppColors.red500}33`
-                    : `${AppColors_1.AppColors.white}24`,
-                paddingHorizontal: isNarrow ? 8 : 10,
-                paddingVertical: isNarrow ? 4 : 5,
-                borderRadius: 6,
-                borderWidth: 1,
-                borderColor: isRecording
-                    ? AppColors_1.AppColors.red500
-                    : `${AppColors_1.AppColors.white}33`,
-            }}>
-                  {isRecording ? (<react_native_1.Animated.View style={{
-                    width: 6,
-                    height: 6,
-                    borderRadius: 3,
-                    backgroundColor: AppColors_1.AppColors.red500,
-                }}/>) : (<NetworkIcons_1.VideoCameraIcon size={isNarrow ? 12 : 13} color={AppColors_1.AppColors.white}/>)}
-                  <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interSemiBold,
-                fontSize: isNarrow ? 10 : 11,
-                color: isRecording ? AppColors_1.AppColors.red300 : AppColors_1.AppColors.white,
-            }}>
-                    {isRecording
-                ? `${t('header.rec')} ${formatTimer(recordingSeconds)}`
-                : t('header.record')}
-                  </react_native_1.Text>
-                </TouchableScale_1.default>
-              </react_native_1.View>
+              
+              <TouchableScale_1.default onPress={ae}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:u?`${AppColors_1.AppColors.red500}33`:`${AppColors_1.AppColors.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:u?AppColors_1.AppColors.red500:`${AppColors_1.AppColors.white}33`}}>
+                {u?<react_native_1.Animated.View style={{width:6,height:6,borderRadius:3,backgroundColor:AppColors_1.AppColors.red500}}/>:<NetworkIcons_1.VideoCameraIcon size={e?12:13}color={AppColors_1.AppColors.white}/>}
+                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:u?AppColors_1.AppColors.red300:AppColors_1.AppColors.white}}>
+                  {u?`${i("header.rec")} ${oe(ie)}`:i("header.record")}
+                </react_native_1.Text>
+              </TouchableScale_1.default>
+            </react_native_1.View>
 
-              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                
-                <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={t('common.clearAll')} onPress={() => {
-                react_native_1.Alert.alert(t('header.clearEverythingTitle'), t('header.clearEverythingMessage'), [
-                    { text: t('common.cancel'), style: 'cancel' },
-                    {
-                        text: t('common.clearAll'),
-                        onPress: runClearAllWithAnimation,
-                        style: 'destructive',
-                    },
-                ]);
-            }} hitSlop={10} style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 4.5,
-                backgroundColor: `${AppColors_1.AppColors.white}24`,
-                paddingHorizontal: isNarrow ? 8 : 10,
-                paddingVertical: isNarrow ? 4 : 5,
-                borderRadius: 6,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}33`,
-            }}>
-                  <react_native_1.Animated.View style={{
-                transform: [
-                    {
-                        rotate: clearAnim.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: ['0deg', '-25deg'],
-                        }),
-                    },
-                    {
-                        scale: clearAnim.interpolate({
-                            inputRange: [0, 0.5, 1],
-                            outputRange: [1, 1.25, 1],
-                        }),
-                    },
-                ],
-            }}>
-                    <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 13}/>
+            <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              
+                <TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={i("common.clearAll")}onPress={()=>{react_native_1.Alert.alert(i("header.clearEverythingTitle"),i("header.clearEverythingMessage"),[{text:i("common.cancel"),style:"cancel"},{text:i("common.clearAll"),onPress:Q,style:"destructive"}])}}hitSlop={10}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${AppColors_1.AppColors.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:`${AppColors_1.AppColors.white}33`}}>
+                  <react_native_1.Animated.View style={{transform:[{rotate:$.interpolate({inputRange:[0,1],outputRange:["0deg","-25deg"]})},{scale:$.interpolate({inputRange:[0,.5,1],outputRange:[1,1.25,1]})}]}}>
+                    <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white}size={e?12:13}/>
                   </react_native_1.Animated.View>
-                  <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interSemiBold,
-                fontSize: isNarrow ? 10 : 11,
-                color: AppColors_1.AppColors.white,
-            }}>
-                    {t('common.clearAll')}
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:AppColors_1.AppColors.white}}>
+                    {i("common.clearAll")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 
-                <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={t('header.about')} onPress={() => {
-                setSettingsActiveSubTab('about');
-                setSettingsPage('main');
-            }} hitSlop={10} style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 4.5,
-                backgroundColor: `${AppColors_1.AppColors.white}24`,
-                paddingHorizontal: isNarrow ? 8 : 10,
-                paddingVertical: isNarrow ? 4 : 5,
-                borderRadius: 6,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}33`,
-            }}>
-                  <NetworkIcons_1.InfoCircleIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 13}/>
-                  <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interSemiBold,
-                fontSize: isNarrow ? 10 : 11,
-                color: AppColors_1.AppColors.white,
-            }}>
-                    {t('header.about')}
+                <TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={i("header.about")}onPress={()=>{H(!0)}}hitSlop={10}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${AppColors_1.AppColors.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:`${AppColors_1.AppColors.white}33`}}>
+                  <NetworkIcons_1.InfoCircleIcon color={AppColors_1.AppColors.white}size={e?12:13}/>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:AppColors_1.AppColors.white}}>
+                    {i("header.about")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
               </react_native_1.View>
-            </react_native_1.View>)}
+            </react_native_1.View>}
         </react_native_1.View>
       </react_native_1.View>
 
       
-      <UpdateAvailableModal_1.UpdateAvailableModal visible={showUpdateModal} latestVersion={latestNpmVersion} onClose={() => setShowUpdateModal(false)}/>
+      <UpdateAvailableModal_1.UpdateAvailableModal visible={ee}latestVersion={U}onClose={()=>D(!1)}/>
 
       
-      <MediaPreviewModal_1.MediaPreviewModal item={previewMediaItem} visible={!!previewMediaItem} onClose={() => setPreviewMediaItem(null)} onDelete={async (item) => {
-            await capture_1.ScreenCapture.deleteMedia(item.uri);
-            refreshMediaCount?.().catch(() => { });
-            setPreviewMediaItem(null);
-        }} onConvertToGif={async (item) => {
-            const gif = await capture_1.ScreenCapture.convertToGif(item.uri, {
-                fps: 12,
-                width: 480,
-            });
-            if (gif) {
-                refreshMediaCount?.().catch(() => { });
-                setPreviewMediaItem({
-                    id: `anim_${gif.timestamp}.gif`,
-                    type: 'gif',
-                    format: 'gif',
-                    uri: gif.uri,
-                    filename: gif.uri.split('/').pop() || `anim_${gif.timestamp}.gif`,
-                    sizeBytes: gif.sizeBytes,
-                    timestamp: gif.timestamp,
-                    durationMs: gif.durationMs,
-                });
-            }
-        }}/>
-    </>);
-});
-exports.default = InspectorHeader;
+      <MediaPreviewModal_1.MediaPreviewModal item={k}visible={!!k}onClose={()=>y(null)}onDelete={async t=>{await capture_1.ScreenCapture.deleteMedia(t.uri),_?.().catch(()=>{}),y(null)}}onConvertToGif={async t=>{const a=await capture_1.ScreenCapture.convertToGif(t.uri,{fps:12,width:480});a&&(_?.().catch(()=>{}),y({id:`anim_${a.timestamp}.gif`,type:"gif",format:"gif",uri:a.uri,filename:a.uri.split("/").pop()||`anim_${a.timestamp}.gif`,sizeBytes:a.sizeBytes,timestamp:a.timestamp,durationMs:a.durationMs}))}}/>
+    </>});exports.default=InspectorHeader;