react-native-inapp-inspector 2.5.13 → 2.5.14

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

@@ -1,57 +1,57 @@
-import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as ne,Pressable as Qe,StatusBar as Je,Text as T,TouchableOpacity as Te,useWindowDimensions as Ke,View as S}from"react-native";import Xe from"react-native-linear-gradient";import{useInspector as Ye}from"./InspectorContext";import U from"../TouchableScale";import{BrandCircleIcon as Ze}from"../BrandCircleIcon";import i from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as I}from"../../styles/AppFonts";import{METHOD_COLORS as et}from"../../constants";import{LIB_VERSION as se}from"../../constants";import{getStatusColor as de,formatTime as tt,formatTimeShort as Ce,getSize as ze,formatByteSize as it,getAppVersionAndBuild as rt,showToast as O}from"../../helpers";import{triggerNativeHaptic as H}from"../../native/NativeInspector";import{ScreenCapture as N,generateCaptureId as ce}from"../../capture";import{MediaPreviewModal as St}from"./MediaPreviewModal";import{LanguageSelectorModal as Tt}from"./LanguageSelectorModal";import Ct from"../CountryFlag";import{WhiteBackNavigation as Vt,SettingsIcon as Dt,CloseWhite as Rt,ChevronDownIcon as Ve,ClockIcon as _,SizeIcon as De,AppleIcon as It,AndroidIcon as Mt,NpmIcon as $t,ResetIcon as Bt,InfoCircleIcon as Lt,EyeIcon as Wt}from"../NetworkIcons";import{useTranslation as vt,SUPPORTED_LANGUAGES as Re,getLanguage as Ht}from"../../i18n";const Ot=L.memo(()=>{const{t:k,language:ue}=vt(),{modalHeightPercent:te,appIcon:Pt,selected:R,setSelected:Ie,selectedEvent:B,setSelectedEvent:Me,selectedLog:W,setSelectedLog:$e,selectedReduxSlice:j,setSelectedReduxSlice:Be,selectedReduxAction:Q,setSelectedReduxAction:Le,reduxState:We,reduxLastActionMap:ve,clearAnim:At,runClearAllWithAnimation:Et,settingsPage:P,setSettingsPage:ie,isAboutOpen:re,setIsAboutOpen:he,resetToDefaults:He,closeModal:ge,minimizeInspector:Oe,detailTitle:Pe,activeTab:V,environment:pe,selectedCrash:M,setSelectedCrash:Ae,selectedPush:D,setSelectedPush:Ee,selectedSocket:z,setSelectedSocket:Fe,refreshMediaCount:A,peekMode:oe,setPeekMode:Ue,previewMediaItem:me,setPreviewMediaItem:E}=Ye(),{width:J}=Ke(),e=J<360,G=J<400,[Ft,Ut]=L.useState(!1),[Ne,fe]=L.useState(!1),[je]=L.useState(()=>rt().formatted),be=ee(()=>{const w=ue||Ht();return Re.find(C=>C.code===w)||Re[0]},[ue]),[K,X]=L.useState(!1),[Nt,le]=L.useState(0),F=L.useRef(null);L.useEffect(()=>{N.isRecording().then(w=>{X(w)}).catch(()=>{})},[]),L.useEffect(()=>(K?(le(0),F.current=setInterval(()=>{le(w=>w+1)},1e3)):(F.current&&(clearInterval(F.current),F.current=null),le(0)),()=>{F.current&&clearInterval(F.current)}),[K]);const jt=L.useCallback(async()=>{try{H("light");const w=await N.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(w){H("success");const C=ce("screenshot",w.format||"png"),v={id:C,type:"image",format:w.format,uri:w.uri,filename:w.uri.split("/").pop()||C,sizeBytes:w.sizeBytes,timestamp:w.timestamp,width:w.width,height:w.height};E(v),A?.().catch(()=>{}),O(k("header.screenshotCaptured"))}else O(k("header.screenshotFailed"))}catch{O(k("header.screenshotError"))}},[A,k]),Gt=L.useCallback(async()=>{try{if(K){H("medium");const w=await N.stopRecording();if(X(!1),w){H("success");const C=ce("video",w.format),v={id:C,type:w.format==="gif"?"gif":"video",format:w.format,uri:w.uri,filename:w.uri.split("/").pop()||C,sizeBytes:w.sizeBytes,timestamp:w.timestamp,durationMs:w.durationMs,width:w.width,height:w.height,hasAudio:w.hasAudio};E(v),A?.().catch(()=>{}),O(k("header.recordingSaved",{duration:(w.durationMs/1e3).toFixed(1)}))}}else H("medium"),await N.startRecording({fps:24,audioSource:"none"})?(X(!0),O(k("header.recordingStarted"))):O(k("header.recordingStartFailed"))}catch{O(k("header.recordingError")),X(!1)}},[K,k]),qt=w=>{const C=Math.floor(w/60),v=w%60;return`${C.toString().padStart(2,"0")}:${v.toString().padStart(2,"0")}`},_t=ee(()=>{const w=(pe||(__DEV__?"DEV":"PROD")).trim(),C=w.toUpperCase();return C==="DEV"||C.includes("DEV")||C==="LOCAL"?{label:w,bg:`${t.emerald500}40`,border:`${t.emerald400}8C`,text:t.mintGreenBorder}:C==="UAT"||C==="QA"||C==="TEST"?{label:w,bg:`${t.amber500}47`,border:`${t.amber400}99`,text:t.amberWarmBorder}:C==="PREPROD"||C==="STAGE"||C==="STAGING"?{label:w,bg:`${t.purple500}47`,border:`${t.purple400}99`,text:t.violetSoftBorder}:{label:w,bg:`${t.rose500}40`,border:`${t.roseBorder}8C`,text:t.errorBorder}},[pe]),Y=V==="apis"&&R!=null||V==="analytics"&&B!=null||V==="logs"&&W!=null||V==="redux"&&(j!=null||Q!=null)||V==="crash"&&M!=null||V==="push"&&D!=null||V==="socket"&&z!=null,Z=P!==null,ae=Y||Z||re,Ge=ee(()=>{switch(P){case"apis":return"APIs (Network)";case"logs":return"Console Logs";case"crash":return"Crash Protection";case"analytics":return"Analytics Logger";case"redux":return"Redux Inspector";case"media":return"Screencast (Media)";case"push":return"Push Notifications";default:return"Settings & Modules"}},[P]),ye=ee(()=>ne.OS==="ios"?te>=98?J>=390?50:44:0:ne.OS==="android"&&te>=98?Je.currentHeight||24:0,[te,J]),$=e?24:G?25.5:26,Qt=e?36:G?38:40;return<>
-      <S style={[i.headerGradient,{minHeight:(e?44:48)+ye}]}>
+import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as ne,Pressable as Qe,StatusBar as Je,Text as T,TouchableOpacity as Te,useWindowDimensions as Ke,View as S}from"react-native";import Xe from"react-native-linear-gradient";import{useInspector as Ye}from"./InspectorContext";import U from"../TouchableScale";import{BrandCircleIcon as Ze}from"../BrandCircleIcon";import i from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as R}from"../../styles/AppFonts";import{METHOD_COLORS as et}from"../../constants";import{LIB_VERSION as se}from"../../constants";import{getStatusColor as de,formatTime as tt,formatTimeShort as Ce,getSize as ze,formatByteSize as it,getAppVersionAndBuild as rt,showToast as O}from"../../helpers";import{triggerNativeHaptic as H}from"../../native/NativeInspector";import{ScreenCapture as N,generateCaptureId as ce}from"../../capture";import{MediaPreviewModal as St}from"./MediaPreviewModal";import{LanguageSelectorModal as Tt}from"./LanguageSelectorModal";import Ct from"../CountryFlag";import{WhiteBackNavigation as Vt,SettingsIcon as Dt,CloseWhite as It,ChevronDownIcon as Ve,ClockIcon as _,SizeIcon as De,AppleIcon as Rt,AndroidIcon as Mt,NpmIcon as $t,ResetIcon as Bt,InfoCircleIcon as Lt,EyeIcon as Wt}from"../NetworkIcons";import{useTranslation as vt,SUPPORTED_LANGUAGES as Ie,getLanguage as Ht}from"../../i18n";const Ot=L.memo(()=>{const{t:V,language:ue}=vt(),{modalHeightPercent:te,appIcon:Pt,selected:I,setSelected:Re,selectedEvent:B,setSelectedEvent:Me,selectedLog:W,setSelectedLog:$e,selectedReduxSlice:j,setSelectedReduxSlice:Be,selectedReduxAction:Q,setSelectedReduxAction:Le,reduxState:We,reduxLastActionMap:ve,clearAnim:At,runClearAllWithAnimation:Et,settingsPage:P,setSettingsPage:ie,isAboutOpen:re,setIsAboutOpen:he,resetToDefaults:He,closeModal:ge,minimizeInspector:Oe,detailTitle:Pe,activeTab:k,environment:pe,selectedCrash:M,setSelectedCrash:Ae,selectedPush:D,setSelectedPush:Ee,selectedSocket:z,setSelectedSocket:Fe,refreshMediaCount:A,peekMode:oe,setPeekMode:Ue,previewMediaItem:me,setPreviewMediaItem:E}=Ye(),{width:J}=Ke(),e=J<360,G=J<400,[Ft,Ut]=L.useState(!1),[Ne,fe]=L.useState(!1),[je]=L.useState(()=>rt().formatted),be=ee(()=>{const w=ue||Ht();return Ie.find(C=>C.code===w)||Ie[0]},[ue]),[K,X]=L.useState(!1),[Nt,le]=L.useState(0),F=L.useRef(null);L.useEffect(()=>{N.isRecording().then(w=>{X(w)}).catch(()=>{})},[]),L.useEffect(()=>(K?(le(0),F.current=setInterval(()=>{le(w=>w+1)},1e3)):(F.current&&(clearInterval(F.current),F.current=null),le(0)),()=>{F.current&&clearInterval(F.current)}),[K]);const jt=L.useCallback(async()=>{try{H("light");const w=await N.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(w){H("success");const C=ce("screenshot",w.format||"png"),v={id:C,type:"image",format:w.format,uri:w.uri,filename:w.uri.split("/").pop()||C,sizeBytes:w.sizeBytes,timestamp:w.timestamp,width:w.width,height:w.height};E(v),A?.().catch(()=>{}),O(V("header.screenshotCaptured"))}else O(V("header.screenshotFailed"))}catch{O(V("header.screenshotError"))}},[A,V]),Gt=L.useCallback(async()=>{try{if(K){H("medium");const w=await N.stopRecording();if(X(!1),w){H("success");const C=ce("video",w.format),v={id:C,type:w.format==="gif"?"gif":"video",format:w.format,uri:w.uri,filename:w.uri.split("/").pop()||C,sizeBytes:w.sizeBytes,timestamp:w.timestamp,durationMs:w.durationMs,width:w.width,height:w.height,hasAudio:w.hasAudio};E(v),A?.().catch(()=>{}),O(V("header.recordingSaved",{duration:(w.durationMs/1e3).toFixed(1)}))}}else H("medium"),await N.startRecording({fps:24,audioSource:"none"})?(X(!0),O(V("header.recordingStarted"))):O(V("header.recordingStartFailed"))}catch{O(V("header.recordingError")),X(!1)}},[K,V]),qt=w=>{const C=Math.floor(w/60),v=w%60;return`${C.toString().padStart(2,"0")}:${v.toString().padStart(2,"0")}`},_t=ee(()=>{const w=(pe||(__DEV__?"DEV":"PROD")).trim(),C=w.toUpperCase();return C==="DEV"||C.includes("DEV")||C==="LOCAL"?{label:w,bg:`${t.emerald500}40`,border:`${t.emerald400}8C`,text:t.mintGreenBorder}:C==="UAT"||C==="QA"||C==="TEST"?{label:w,bg:`${t.amber500}47`,border:`${t.amber400}99`,text:t.amberWarmBorder}:C==="PREPROD"||C==="STAGE"||C==="STAGING"?{label:w,bg:`${t.purple500}47`,border:`${t.purple400}99`,text:t.violetSoftBorder}:{label:w,bg:`${t.rose500}40`,border:`${t.roseBorder}8C`,text:t.errorBorder}},[pe]),Y=k==="apis"&&I!=null||k==="analytics"&&B!=null||k==="logs"&&W!=null||k==="redux"&&(j!=null||Q!=null)||k==="crash"&&M!=null||k==="push"&&D!=null||k==="socket"&&z!=null,Z=P!==null,ae=Y||Z||re,Ge=ee(()=>{switch(P){case"apis":return"APIs (Network)";case"logs":return"Console Logs";case"crash":return"Crash Protection";case"analytics":return"Analytics Logger";case"redux":return"Redux Inspector";case"media":return"Screencast (Media)";case"push":return"Push Notifications";default:return"Settings & Modules"}},[P]),ye=ee(()=>ne.OS==="ios"?te>=98?J>=390?50:44:0:ne.OS==="android"&&te>=98?Je.currentHeight||24:0,[te,J]),$=e?28:G?30:32,Qt=e?36:G?38:40;return<>
+      <S style={[i.headerGradient,{minHeight:(e?50:54)+ye}]}>
         
         <Xe colors={[t.indigo600,t.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"/>
         <S style={{paddingTop:ye,width:"100%"}}>
-          <S style={[i.header,{width:"100%",justifyContent:"space-between",paddingHorizontal:e?8:10,paddingVertical:5,minHeight:e?44:48}]}>
+          <S style={[i.header,{width:"100%",justifyContent:"space-between",paddingHorizontal:e?8:10,paddingVertical:7,minHeight:e?50:54}]}>
             <S style={{flexDirection:"row",alignItems:"center",gap:e?6:8,flex:Y?void 0:1,flexShrink:Y?0:1,minWidth:0}}>
-              {ae&&<U onPress={()=>{if(re){he(!1);return}if(Z){ie(P==="main"?null:"main");return}Ie(null),Me(null),$e(null),Be(null),Le(null),Ae(null),Ee(null),Fe(null)}}hitSlop={15}style={{width:e?30:34,height:e?30:34,borderRadius:e?15:17,alignItems:"center",justifyContent:"center",backgroundColor:`${t.white}2E`,borderWidth:1,borderColor:`${t.white}4D`,flexShrink:0}}>
+              {ae&&<U onPress={()=>{if(re){he(!1);return}if(Z){ie(P==="main"?null:"main");return}Re(null),Me(null),$e(null),Be(null),Le(null),Ae(null),Ee(null),Fe(null)}}hitSlop={15}style={{width:e?30:34,height:e?30:34,borderRadius:e?15:17,alignItems:"center",justifyContent:"center",backgroundColor:`${t.white}2E`,borderWidth:1,borderColor:`${t.white}4D`,flexShrink:0}}>
                   <S style={{position:"absolute",width:e?38:42,height:e?38:42,borderRadius:21,backgroundColor:`${t.white}1A`}}/>
                   <Vt/>
                 </U>}
 
               {re?<S style={{gap:2.5,flex:1,minWidth:0,marginRight:6,justifyContent:"center"}}>
                   <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                    <T style={{fontFamily:I.interBold,fontSize:e?14.5:16,lineHeight:e?18:20,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
+                    <T style={{fontFamily:R.interBold,fontSize:e?14.5:16,lineHeight:e?18:20,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
                       About & Specs
                     </T>
                     <S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
-                      <T style={{fontFamily:I.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
+                      <T style={{fontFamily:R.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
                         v{se}
                       </T>
                     </S>
                   </S>
-                  <T style={{fontFamily:I.interRegular,fontSize:e?10:11,lineHeight:e?13.5:14.5,color:`${t.white}CC`,marginTop:.5}}numberOfLines={1}ellipsizeMode="tail">
-                    {k("common.aboutSpecsSubtitle","Package info, runtime specs & diagnostic payload")}
+                  <T style={{fontFamily:R.interRegular,fontSize:e?10:11,lineHeight:e?13.5:14.5,color:`${t.white}CC`,marginTop:.5}}numberOfLines={1}ellipsizeMode="tail">
+                    {V("common.aboutSpecsSubtitle","Package info, runtime specs & diagnostic payload")}
                   </T>
                 </S>:Z?<S style={{gap:2.5,flex:1,minWidth:0,marginRight:6,justifyContent:"center"}}>
                   <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                    <T style={{fontFamily:I.interBold,fontSize:e?14.5:16,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
+                    <T style={{fontFamily:R.interBold,fontSize:e?14.5:16,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
                       {Ge}
                     </T>
                     {P==="main"&&<S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
-                        <T style={{fontFamily:I.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
+                        <T style={{fontFamily:R.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
                           v{se}
                         </T>
                       </S>}
                   </S>
-                  <T style={{fontFamily:I.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:2}}numberOfLines={1}ellipsizeMode="tail">
+                  <T style={{fontFamily:R.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:2}}numberOfLines={1}ellipsizeMode="tail">
                     {P==="main"?"Manage modules and preferences":"Configure module parameters"}
                   </T>
                 </S>:ae?null:<S style={{flexDirection:"row",alignItems:"center",gap:e?7:8.5,flex:1,minWidth:0,marginRight:6}}>
                   <Ze size={e?38:G?40:42}/>
                   <S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
                     
-                    <T style={[i.headerTitle,{fontFamily:I.interBold,fontWeight:"700",fontSize:e?12.5:G?13:14,lineHeight:e?17:G?18:19,color:t.white,letterSpacing:-.2,paddingBottom:0}]}numberOfLines={1}ellipsizeMode="tail">
-                      react-native-inapp-inspector
+                    <T style={[i.headerTitle,{fontFamily:R.interBold,fontWeight:"700",fontSize:e?14:G?15:15.5,lineHeight:e?18:G?19:20,color:t.white,letterSpacing:-.2,paddingBottom:0}]}numberOfLines={1}ellipsizeMode="tail">
+                      {V("header.title","In-App Inspector")}
                     </T>
 
                     
                     <S style={{flexDirection:"row",alignItems:"center",gap:4,minWidth:0,marginTop:2,flexWrap:"nowrap",overflow:"hidden"}}>
                       
-                      <U onPress={()=>{H("light"),fe(!0)}}hitSlop={6}accessible={!0}accessibilityRole="button"accessibilityLabel={k("settings.general.selectLanguage","Select Language")}style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}24`,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${t.white}38`,flexShrink:0}}>
+                      <U onPress={()=>{H("light"),fe(!0)}}hitSlop={6}accessible={!0}accessibilityRole="button"accessibilityLabel={V("settings.general.selectLanguage","Select Language")}style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}24`,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${t.white}38`,flexShrink:0}}>
                         <Ct code={be?.code||"en"}size={9}borderRadius={2}/>
-                        <T style={{fontFamily:I.interBold,fontSize:8,lineHeight:10.5,color:t.white,letterSpacing:.2}}numberOfLines={1}>
+                        <T style={{fontFamily:R.interBold,fontSize:8,lineHeight:10.5,color:t.white,letterSpacing:.2}}numberOfLines={1}>
                           {be?.code?.toUpperCase()||"EN"}
                         </T>
                         <Ve size={6}color={`${t.white}CC`}/>
@@ -59,8 +59,8 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
 
                       
                       <S style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}1F`,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${t.white}2E`,flexShrink:1,minWidth:0}}>
-                        {ne.OS==="ios"?<It color={`${t.white}E6`}size={8.5}/>:<Mt color={`${t.white}E6`}size={8.5}/>}
-                        <T style={{fontFamily:I.interMedium,fontSize:8,lineHeight:10.5,color:`${t.white}EB`,letterSpacing:.1}}numberOfLines={1}ellipsizeMode="tail">
+                        {ne.OS==="ios"?<Rt color={`${t.white}E6`}size={8.5}/>:<Mt color={`${t.white}E6`}size={8.5}/>}
+                        <T style={{fontFamily:R.interMedium,fontSize:8,lineHeight:10.5,color:`${t.white}EB`,letterSpacing:.1}}numberOfLines={1}ellipsizeMode="tail">
                           {je}
                         </T>
                       </S>
@@ -68,7 +68,7 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                       
                       <Qe onPress={()=>{_e.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{})}}style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}1F`,borderRadius:5,paddingHorizontal:5.5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${t.white}2E`,flexShrink:0}}>
                         <$t size={8.5}color={t.npmRedLight}/>
-                        <T style={{fontFamily:I.interMedium,fontSize:8,lineHeight:10.5,color:`${t.white}EB`,letterSpacing:.1}}>
+                        <T style={{fontFamily:R.interMedium,fontSize:8,lineHeight:10.5,color:`${t.white}EB`,letterSpacing:.1}}>
                           v{se}
                         </T>
                       </Qe>
@@ -78,11 +78,11 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
             </S>
 
             {Y&&<S style={[i.headerCenter,{flex:1,minWidth:0,flexShrink:1,paddingHorizontal:e?3:6,overflow:"hidden"}]}>
-                {V==="apis"&&R!=null?<S style={i.headerDetailCenter}>
+                {k==="apis"&&I!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
-                      <S style={[i.headerMethodBadge,{backgroundColor:et[R.method]??t.grayText,paddingHorizontal:e?5:6,paddingVertical:e?2:3,flexShrink:0}]}>
+                      <S style={[i.headerMethodBadge,{backgroundColor:et[I.method]??t.grayText,paddingHorizontal:e?5:6,paddingVertical:e?2:3,flexShrink:0}]}>
                         <T style={[i.headerMethodText,{fontSize:e?9:10}]}>
-                          {R.method}
+                          {I.method}
                         </T>
                       </S>
                       <T style={[i.headerDetailTitle,{fontSize:e?13:14.5,flex:1,minWidth:0,flexShrink:1}]}numberOfLines={1}ellipsizeMode="middle">
@@ -90,26 +90,26 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                       </T>
                     </S>
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
-                      <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${de(R.status)}26`,borderWidth:1,borderColor:`${de(R.status)}55`}}>
-                        <S style={[i.headerStatusDot,{backgroundColor:de(R.status),width:e?6:7,height:e?6:7}]}/>
-                        <T style={[i.headerSubTitle,{fontFamily:I.interBold,fontSize:e?10:11}]}>
-                          {R.status===0?"Failed":R.status??"Pending"}
+                      <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${de(I.status)}26`,borderWidth:1,borderColor:`${de(I.status)}55`}}>
+                        <S style={[i.headerStatusDot,{backgroundColor:de(I.status),width:e?6:7,height:e?6:7}]}/>
+                        <T style={[i.headerSubTitle,{fontFamily:R.interBold,fontSize:e?10:11}]}>
+                          {I.status===0?"Failed":I.status??"Pending"}
                         </T>
                       </S>
                       <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${t.white}29`}}>
                         <_ color={t.white}size={e?10:11}/>
                         <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                          {R.duration!=null?`${R.duration}ms`:"\u2014"}
+                          {I.duration!=null?`${I.duration}ms`:"\u2014"}
                         </T>
                       </S>
-                      {R.response!=null&&<S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${t.white}29`}}>
+                      {I.response!=null&&<S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${t.white}29`}}>
                           <De color={t.white}size={e?10:11}/>
                           <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                            {ze(R.response)}
+                            {ze(I.response)}
                           </T>
                         </S>}
                     </S>
-                  </S>:V==="analytics"&&B!=null?<S style={i.headerDetailCenter}>
+                  </S>:k==="analytics"&&B!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
                       <S style={[i.headerMethodBadge,{backgroundColor:B.source==="firebase"?`${t.firebaseOrange}4D`:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3,flexShrink:0}]}>
                         <T style={[i.headerMethodText,{fontSize:e?9:10}]}>
@@ -130,7 +130,7 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                         {B.source}
                       </T>
                     </S>
-                  </S>:V==="logs"&&W!=null?<S style={i.headerDetailCenter}>
+                  </S>:k==="logs"&&W!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
                       <S style={[i.headerMethodBadge,{backgroundColor:W.type==="error"?`${t.errorColor}4D`:W.type==="warn"?`${t.lightOrange}4D`:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3,flexShrink:0}]}>
                         <T style={[i.headerMethodText,{fontSize:e?9:10}]}>
@@ -151,7 +151,7 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                         </T>
                       </S>
                     </S>
-                  </S>:V==="redux"&&j!=null?(()=>{const w=We?.[j],C=w&&typeof w=="object"?Object.keys(w).length:typeof w<"u"?1:0,v=ze(w),Se=ve[j];return<S style={i.headerDetailCenter}>
+                  </S>:k==="redux"&&j!=null?(()=>{const w=We?.[j],C=w&&typeof w=="object"?Object.keys(w).length:typeof w<"u"?1:0,v=ze(w),Se=ve[j];return<S style={i.headerDetailCenter}>
                         <S style={i.headerDetailRow}>
                           <S style={[i.headerMethodBadge,{backgroundColor:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3,flexShrink:0}]}>
                             <T style={[i.headerMethodText,{fontSize:e?9:10}]}>
@@ -191,7 +191,7 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                               </S>
                             </>}
                         </S>
-                      </S>})():V==="redux"&&Q!=null?<S style={i.headerDetailCenter}>
+                      </S>})():k==="redux"&&Q!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
                       <S style={[i.headerMethodBadge,{backgroundColor:`${t.brandPurple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3,flexShrink:0}]}>
                         <T style={[i.headerMethodText,{fontSize:e?9:10}]}>
@@ -208,7 +208,7 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                         {Q.timestamp||"Dispatched"}
                       </T>
                     </S>
-                  </S>:V==="crash"&&M!=null?<S style={i.headerDetailCenter}>
+                  </S>:k==="crash"&&M!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
                       <S style={[i.headerMethodBadge,{backgroundColor:M.isFatal?t.red600:t.amber600,paddingHorizontal:e?5:6,paddingVertical:e?2:3,flexShrink:0}]}>
                         <T style={[i.headerMethodText,{fontSize:e?9:10}]}>
@@ -233,7 +233,7 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                           </T>
                         </>}
                     </S>
-                  </S>:V==="push"&&D!=null?<S style={i.headerDetailCenter}>
+                  </S>:k==="push"&&D!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
                       <S style={[i.headerMethodBadge,{backgroundColor:t.brandPurple,paddingHorizontal:e?5:6,paddingVertical:e?2:3,flexShrink:0}]}>
                         <T style={[i.headerMethodText,{fontSize:e?9:10}]}>
@@ -247,7 +247,7 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1,maxWidth:"100%"}}>
                       <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2,borderRadius:20,backgroundColor:`${D.appState==="foreground"?t.greenColor:D.appState==="background"?t.amber500:t.brandPurple}26`,borderWidth:1,borderColor:`${D.appState==="foreground"?t.greenColor:D.appState==="background"?t.amber500:t.brandPurple}55`}}>
                         <S style={[i.headerStatusDot,{backgroundColor:D.appState==="foreground"?t.greenColor:D.appState==="background"?t.amber500:t.brandPurple,width:e?6:7,height:e?6:7}]}/>
-                        <T style={[i.headerSubTitle,{fontFamily:I.interBold,fontSize:e?9.5:10.5}]}>
+                        <T style={[i.headerSubTitle,{fontFamily:R.interBold,fontSize:e?9.5:10.5}]}>
                           {D.appState?D.appState.toUpperCase():"DELIVERED"}
                         </T>
                       </S>
@@ -258,7 +258,7 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                         </T>
                       </S>
                     </S>
-                  </S>:V==="socket"&&z!=null?<S style={i.headerDetailCenter}>
+                  </S>:k==="socket"&&z!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
                       <S style={[i.headerMethodBadge,{backgroundColor:z.client==="socket.io"||z.url.includes("/socket.io")?t.violet600:z.url.startsWith("wss://")?t.emerald600:t.blue600,paddingHorizontal:e?5:6,paddingVertical:e?2:3,flexShrink:0}]}>
                         <T style={[i.headerMethodText,{fontSize:e?9:10}]}>
@@ -272,7 +272,7 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
                       <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${z.status==="open"?t.greenColor:z.status==="connecting"?t.amber600:z.status==="error"?t.errorColor:t.slate500}26`,borderWidth:1,borderColor:`${z.status==="open"?t.greenColor:z.status==="connecting"?t.amber600:z.status==="error"?t.errorColor:t.slate500}55`}}>
                         <S style={[i.headerStatusDot,{backgroundColor:z.status==="open"?t.greenColor:z.status==="connecting"?t.amber600:z.status==="error"?t.errorColor:t.slate500,width:e?6:7,height:e?6:7}]}/>
-                        <T style={[i.headerSubTitle,{fontFamily:I.interBold,fontSize:e?10:11}]}>
+                        <T style={[i.headerSubTitle,{fontFamily:R.interBold,fontSize:e?10:11}]}>
                           {(z.status||"open").toUpperCase()}
                         </T>
                       </S>
@@ -292,38 +292,38 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                   </S>:null}
               </S>}
 
-            <S style={[i.headerRight,{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",flexShrink:0,marginLeft:6,gap:e?3.5:4.5}]}>
+            <S style={[i.headerRight,{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",flexShrink:0,marginLeft:6,gap:e?6:7.5}]}>
               
               {Z?<>
                   
-                  <U accessible={!0}accessibilityRole="button"accessibilityLabel={k("about.heroTitle","About & Specs")}onPress={()=>{H("light"),he(!0)}}hitSlop={15}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?6:7,backgroundColor:"rgba(255, 255, 255, 0.22)",borderColor:"rgba(255, 255, 255, 0.45)",borderWidth:1}]}>
-                    <Lt color={t.white}size={e?13:15}/>
+                  <U accessible={!0}accessibilityRole="button"accessibilityLabel={V("about.heroTitle","About & Specs")}onPress={()=>{H("light"),he(!0)}}hitSlop={{top:8,bottom:8,left:2,right:2}}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?7:8,backgroundColor:"rgba(255, 255, 255, 0.22)",borderColor:"rgba(255, 255, 255, 0.45)",borderWidth:1}]}>
+                    <Lt color={t.white}size={e?14:16}/>
                   </U>
 
                   
-                  <U onPress={()=>{qe.alert("Reset All Settings","This restores all module visibility and UI preferences to defaults. Continue?",[{text:"Cancel",style:"cancel"},{text:"Reset",style:"destructive",onPress:He}])}}hitSlop={15}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?6:7,backgroundColor:"rgba(245, 158, 11, 0.26)",borderColor:"rgba(252, 211, 77, 0.45)",borderWidth:1}]}>
-                    <Bt color={t.white}size={e?12:14}/>
+                  <U onPress={()=>{qe.alert("Reset All Settings","This restores all module visibility and UI preferences to defaults. Continue?",[{text:"Cancel",style:"cancel"},{text:"Reset",style:"destructive",onPress:He}])}}hitSlop={{top:8,bottom:8,left:2,right:2}}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?7:8,backgroundColor:"rgba(245, 158, 11, 0.26)",borderColor:"rgba(252, 211, 77, 0.45)",borderWidth:1}]}>
+                    <Bt color={t.white}size={e?13:15}/>
                   </U>
                 </>:ae?null:<>
                   
-                  <U accessible={!0}accessibilityRole="button"accessibilityLabel={oe?"Disable peek-through":"Enable peek-through"}onPress={()=>{H("light"),Ue(w=>!w)}}hitSlop={15}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?6:7,backgroundColor:oe?"rgba(6, 182, 212, 0.38)":"rgba(6, 182, 212, 0.18)",borderColor:oe?"rgba(103, 232, 249, 0.65)":"rgba(103, 232, 249, 0.35)",borderWidth:1}]}>
-                    <Wt color={t.white}size={e?12:14}/>
+                  <U accessible={!0}accessibilityRole="button"accessibilityLabel={oe?"Disable peek-through":"Enable peek-through"}onPress={()=>{H("light"),Ue(w=>!w)}}hitSlop={{top:8,bottom:8,left:2,right:2}}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?7:8,backgroundColor:oe?"rgba(6, 182, 212, 0.38)":"rgba(6, 182, 212, 0.18)",borderColor:oe?"rgba(103, 232, 249, 0.65)":"rgba(103, 232, 249, 0.35)",borderWidth:1}]}>
+                    <Wt color={t.white}size={e?13:15}/>
                   </U>
 
                   
-                  <U accessible={!0}accessibilityRole="button"accessibilityLabel="Settings"onPress={()=>ie("main")}hitSlop={15}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?6:7,backgroundColor:"rgba(168, 85, 247, 0.28)",borderColor:"rgba(216, 180, 254, 0.45)",borderWidth:1}]}>
-                    <Dt color={t.white}size={e?12:14}/>
+                  <U accessible={!0}accessibilityRole="button"accessibilityLabel="Settings"onPress={()=>ie("main")}hitSlop={{top:8,bottom:8,left:2,right:2}}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?7:8,backgroundColor:"rgba(168, 85, 247, 0.28)",borderColor:"rgba(216, 180, 254, 0.45)",borderWidth:1}]}>
+                    <Dt color={t.white}size={e?13:15}/>
                   </U>
                 </>}
 
               
-              <Te testID="inspector.header.minimizeBtn"onPress={Oe||ge}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={k("common.minimize","Minimize")}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?6:7,backgroundColor:"rgba(56, 189, 248, 0.22)",borderColor:"rgba(125, 211, 252, 0.40)",borderWidth:1}]}>
-                <Ve size={e?14:16}color={t.white}/>
+              <Te testID="inspector.header.minimizeBtn"onPress={Oe||ge}hitSlop={{top:8,bottom:8,left:2,right:2}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={V("common.minimize","Minimize")}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?7:8,backgroundColor:"rgba(56, 189, 248, 0.22)",borderColor:"rgba(125, 211, 252, 0.40)",borderWidth:1}]}>
+                <Ve size={e?15:17}color={t.white}/>
               </Te>
 
               
-              <Te testID="inspector.header.closeBtn"onPress={ge}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={k("common.close","Close")}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?6:7,backgroundColor:"rgba(244, 63, 94, 0.28)",borderColor:"rgba(251, 113, 133, 0.48)",borderWidth:1}]}>
-                <Rt size={e?12:14}/>
+              <Te testID="inspector.header.closeBtn"onPress={ge}hitSlop={{top:8,bottom:8,left:2,right:2}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={V("common.close","Close")}style={[i.closeButtonSquare,{width:$,height:$,borderRadius:e?7:8,backgroundColor:"rgba(244, 63, 94, 0.28)",borderColor:"rgba(251, 113, 133, 0.48)",borderWidth:1}]}>
+                <It size={e?13:15}/>
               </Te>
             </S>
           </S>

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

@@ -1,157 +1,120 @@
-import se,{useEffect as A,useRef as L}from"react";import{Animated as o,Modal as Se,Platform as q,Pressable as Be,StatusBar as Ce,StyleSheet as T,View as B}from"react-native";import{useInspector as Ve}from"./InspectorContext";import Me from"../ErrorBoundary";import S from"../ModuleErrorBoundary";import Ne from"./FabLauncher";import Re from"./InspectorHeader";import{SecondaryTelemetryStrip as De}from"./SecondaryTelemetryStrip";import Te from"./TabBar";import Ee from"./NetworkTab";import Pe from"./NetworkDetail";import Ae from"./LogDetail";import Le from"./ConsoleTab";import{PerformanceTab as Ie}from"./PerformanceTab";import Oe from"./AnalyticsTab";import Fe from"../AnalyticsDetail";import We from"./ReduxTab";import Ge from"./ReduxDetail";import He from"./CrashTab";import Ye from"./CrashDetail";import Ue from"./PushTab";import _e from"./PushDetail";import $e from"./SocketTab";import Je from"./SocketDetail";import Ke from"./DeviceInfoTab";import Qe from"./StorageTab";import Xe from"./DebuggingTab";import{MediaGalleryTab as Ze}from"./MediaGalleryTab";import So from"./SettingsPanel";import Bo from"./AboutModal";import{SupportPage as Co}from"./SupportPage";import{ConfirmationModal as Vo}from"./ConfirmationModal";import{FloatingCaptureWidget as Mo}from"./FloatingCaptureWidget";import No from"./NpmUpdateToast";import Ro from"./NpmStarPrompt";import Do from"../Toast";import H from"../../styles";import{AppColors as C}from"../../styles/AppColors";import To from"./NavigationTracker";import{isLocalDebugEnvironment as Eo}from"../../helpers";const xo=()=>{const{visible:I,modalAnimationType:V,closeModal:M,modalHeightPercent:O,selected:Y,selectedEvent:F,selectedLog:U,selectedReduxSlice:j,selectedReduxAction:J,selectedCrash:_,selectedPush:W,setSelectedPush:K,selectedSocket:z,setSelectedSocket:Q,settingsPage:v,isAboutOpen:R,setIsAboutOpen:X,isSupportOpen:D,setIsSupportOpen:Z,activeTab:e,isReady:ee,enabled:oe,isDismissed:re,hasNavigationContext:te,setNavState:ae,confirmModal:N,setConfirmModal:ie,peekMode:le,peekOpacity:$}=Ve(),G=e==="apis"&&Y!=null||e==="analytics"&&F!=null||e==="logs"&&U!=null||e==="redux"&&(j!=null||J!=null)||e==="crash"&&_!=null||e==="push"&&W!=null||e==="socket"&&z!=null,E=L(new o.Value(0)).current;A(()=>{v!==null&&(E.setValue(0),o.spring(E,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[v!==null]);const x=L(new o.Value(0)).current;A(()=>{R&&(x.setValue(0),o.spring(x,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[R]);const P=L(new o.Value(0)).current;return A(()=>{D&&(P.setValue(0),o.spring(P,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[D]),<>
-      {(q.OS==="ios"||q.OS==="android")&&oe&&!re&&!I&&<Ne/>}
-      <Se visible={I}animationType={V}transparent statusBarTranslucent={!0}onRequestClose={M}>
-        <Me onClose={M}>
-          <B style={[H.modalBackdrop,{zIndex:999999,elevation:999999}]}>
-            <Be style={H.modalBackdropPressable}onPress={M}/>
-            <B style={[H.modalContentCard,{height:`${O}%`,borderTopLeftRadius:O>=100?0:20,borderTopRightRadius:O>=100?0:20,opacity:le?Math.max(.05,Math.min(1,typeof $=="number"?$:.3)):1,zIndex:9999999,elevation:999999}]}>
-              <Ce translucent backgroundColor="transparent"barStyle="light-content"/>
+import{useEffect as O,useRef as F}from"react";import{Animated as N,Modal as Me,Platform as U,Pressable as Ne,StatusBar as Se,StyleSheet as w,View as B}from"react-native";import{useInspector as he}from"./InspectorContext";import Be from"../ErrorBoundary";import M from"../ModuleErrorBoundary";import Ce from"./FabLauncher";import Ee from"./InspectorHeader";import{SecondaryTelemetryStrip as Te}from"./SecondaryTelemetryStrip";import De from"./TabBar";import Ve from"./NetworkTab";import Pe from"./NetworkDetail";import Re from"./LogDetail";import Ae from"./ConsoleTab";import{PerformanceTab as Ie}from"./PerformanceTab";import Le from"./AnalyticsTab";import Oe from"../AnalyticsDetail";import Fe from"./ReduxTab";import He from"./ReduxDetail";import We from"./CrashTab";import Ye from"./CrashDetail";import Ge from"./PushTab";import Ue from"./PushDetail";import $e from"./SocketTab";import Je from"./SocketDetail";import Ke from"./DeviceInfoTab";import Qe from"./StorageTab";import{MediaGalleryTab as Xe}from"./MediaGalleryTab";import Ze from"./SettingsPanel";import _e from"./AboutModal";import{SupportPage as Mo}from"./SupportPage";import{ConfirmationModal as No}from"./ConfirmationModal";import{FloatingCaptureWidget as So}from"./FloatingCaptureWidget";import Bo from"./SkeletonPlaceholder";import Co from"./NpmUpdateToast";import Eo from"./NpmStarPrompt";import To from"../Toast";import z from"../../styles";import{AppColors as v}from"../../styles/AppColors";import Do from"./NavigationTracker";const Vo=()=>{const{visible:H,modalAnimationType:$,closeModal:x,modalHeightPercent:P,selected:W,selectedEvent:R,selectedLog:Y,selectedReduxSlice:j,selectedReduxAction:J,selectedCrash:q,selectedPush:A,setSelectedPush:K,selectedSocket:I,setSelectedSocket:Q,settingsPage:C,isAboutOpen:k,setIsAboutOpen:X,isSupportOpen:E,setIsSupportOpen:Z,activeTab:e,isReady:_,enabled:ee,isDismissed:oe,hasNavigationContext:re,setNavState:te,confirmModal:S,setConfirmModal:ae,peekMode:le,peekOpacity:G}=he(),L=e==="apis"&&W!=null||e==="analytics"&&R!=null||e==="logs"&&Y!=null||e==="redux"&&(j!=null||J!=null)||e==="crash"&&q!=null||e==="push"&&A!=null||e==="socket"&&I!=null,T=F(new N.Value(0)).current;O(()=>{C!==null&&(T.setValue(0),N.spring(T,{toValue:1,friction:8,tension:65,useNativeDriver:!0}).start())},[C!==null]);const D=F(new N.Value(0)).current;O(()=>{k&&(D.setValue(0),N.spring(D,{toValue:1,friction:8,tension:65,useNativeDriver:!0}).start())},[k]);const V=F(new N.Value(0)).current;return O(()=>{E&&(V.setValue(0),N.spring(V,{toValue:1,friction:8,tension:65,useNativeDriver:!0}).start())},[E]),<>
+      {(U.OS==="ios"||U.OS==="android")&&ee&&!oe&&!H&&<Ce/>}
+      <Me visible={H}animationType={$}transparent statusBarTranslucent={!0}onRequestClose={x}>
+        <Be onClose={x}>
+          <B style={[z.modalBackdrop,{zIndex:999999,elevation:999999}]}>
+            <Ne style={z.modalBackdropPressable}onPress={x}accessible={!0}accessibilityRole="button"accessibilityLabel="Dismiss Inspector"accessibilityHint="Double tap to dismiss the inspector modal"/>
+            <B accessible={!1}accessibilityViewIsModal={!0}style={[z.modalContentCard,{height:`${P}%`,borderTopLeftRadius:P>=100?0:20,borderTopRightRadius:P>=100?0:20,opacity:le?Math.max(.05,Math.min(1,typeof G=="number"?G:.3)):1,zIndex:9999999,elevation:999999}]}>
+              <Se translucent backgroundColor="transparent"barStyle="light-content"/>
 
-              <Re/>
-              {!G&&v===null&&!R&&!D&&<De/>}
+              <Ee/>
+              {!L&&C===null&&!k&&!E&&<Te/>}
 
-              <B style={{flex:1,overflow:"hidden",backgroundColor:C.grayBackground}}>
+              <B style={{flex:1,overflow:"hidden",backgroundColor:v.grayBackground}}>
                 
-                <B style={{flex:1}}pointerEvents={G||v!==null||R||D?"none":"auto"}>
-                  <Te/>
-                  {ee?<B style={{flex:1}}>
-                      {e==="apis"&&<S moduleName="Network API Monitor">
-                          <Ee/>
-                        </S>}
-                      {e==="logs"&&<S moduleName="Console Logs Monitor">
-                          <Le/>
-                        </S>}
-                      {e==="perf"&&<S moduleName="Performance & FPS Profiler">
+                <B style={{flex:1}}pointerEvents={L||C!==null||k||E?"none":"auto"}>
+                  <De/>
+                  {_?<B style={{flex:1}}>
+                      {e==="apis"&&<M moduleName="Network API Monitor">
+                          <Ve/>
+                        </M>}
+                      {e==="logs"&&<M moduleName="Console Logs Monitor">
+                          <Ae/>
+                        </M>}
+                      {e==="perf"&&<M moduleName="Performance & FPS Profiler">
                           <Ie/>
-                        </S>}
-                      {e==="analytics"&&<S moduleName="Analytics Event Tracker">
-                          <Oe/>
-                        </S>}
-                      {e==="redux"&&<S moduleName="Redux State Inspector">
+                        </M>}
+                      {e==="analytics"&&<M moduleName="Analytics Event Tracker">
+                          <Le/>
+                        </M>}
+                      {e==="redux"&&<M moduleName="Redux State Inspector">
+                          <Fe/>
+                        </M>}
+                      {e==="crash"&&<M moduleName="Crash Reporter">
                           <We/>
-                        </S>}
-                      {e==="crash"&&<S moduleName="Crash Reporter">
-                          <He/>
-                        </S>}
-                      {e==="push"&&<S moduleName="Push Notifications">
-                          <Ue/>
-                        </S>}
-                      {e==="socket"&&<S moduleName="WebSocket & Socket.IO">
+                        </M>}
+                      {e==="push"&&<M moduleName="Push Notifications">
+                          <Ge/>
+                        </M>}
+                      {e==="socket"&&<M moduleName="WebSocket & Socket.IO">
                           <$e/>
-                        </S>}
-                      {e==="device"&&<S moduleName="Device Diagnostics">
+                        </M>}
+                      {e==="device"&&<M moduleName="Device Diagnostics">
                           <Ke/>
-                        </S>}
-                      {e==="storage"&&<S moduleName="Storage Inspector">
+                        </M>}
+                      {e==="storage"&&<M moduleName="Storage Inspector">
                           <Qe/>
-                        </S>}
-                      {e==="media"&&<S moduleName="Media Gallery">
-                          <Ze/>
-                        </S>}
-                      {q.OS==="android"&&Eo()&&e==="debugging"&&<S moduleName="Debugging Utilities">
-                            <Xe/>
-                          </S>}
-                    </B>:<Po/>}
+                        </M>}
+                      {e==="media"&&<M moduleName="Media Gallery">
+                          <Xe/>
+                        </M>}
+                    </B>:<Bo tab={e}/>}
                 </B>
 
                 
-                {G&&<B style={[T.absoluteFill,{backgroundColor:C.contentBg,zIndex:10}]}>
-                    {e==="apis"&&Y!=null&&<S moduleName="Network Request Details">
+                {L&&<B style={[w.absoluteFill,{backgroundColor:v.contentBg,zIndex:10}]}>
+                    {e==="apis"&&W!=null&&<M moduleName="Network Request Details">
                         <Pe/>
-                      </S>}
-                    {e==="analytics"&&F!=null&&<S moduleName="Analytics Event Details">
-                        <Fe event={F}/>
-                      </S>}
-                    {e==="logs"&&U!=null&&<S moduleName="Console Log Details">
-                        <Ae/>
-                      </S>}
-                    {e==="redux"&&<S moduleName="Redux Action & State Details">
-                        <Ge/>
-                      </S>}
-                    {e==="crash"&&_!=null&&<S moduleName="Crash Log Details">
+                      </M>}
+                    {e==="analytics"&&R!=null&&<M moduleName="Analytics Event Details">
+                        <Oe event={R}/>
+                      </M>}
+                    {e==="logs"&&Y!=null&&<M moduleName="Console Log Details">
+                        <Re/>
+                      </M>}
+                    {e==="redux"&&<M moduleName="Redux Action & State Details">
+                        <He/>
+                      </M>}
+                    {e==="crash"&&q!=null&&<M moduleName="Crash Log Details">
                         <Ye/>
-                      </S>}
-                    {e==="push"&&W!=null&&<S moduleName="Push Notification Details">
-                        <_e item={W}onClose={()=>K(null)}/>
-                      </S>}
-                    {e==="socket"&&z!=null&&<S moduleName="WebSocket & Socket.IO Details">
-                        <Je item={z}onClose={()=>Q(null)}/>
-                      </S>}
+                      </M>}
+                    {e==="push"&&A!=null&&<M moduleName="Push Notification Details">
+                        <Ue item={A}onClose={()=>K(null)}/>
+                      </M>}
+                    {e==="socket"&&I!=null&&<M moduleName="WebSocket & Socket.IO Details">
+                        <Je item={I}onClose={()=>Q(null)}/>
+                      </M>}
                   </B>}
 
                 
-                {v!==null&&<o.View style={[T.absoluteFill,{backgroundColor:C.grayBackground,opacity:E,transform:[{translateY:E.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
-                    <S moduleName="Settings Panel">
-                      <So/>
-                    </S>
-                  </o.View>}
+                {C!==null&&<N.View style={[w.absoluteFill,{backgroundColor:v.grayBackground,opacity:T,transform:[{translateY:T.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <M moduleName="Settings Panel">
+                      <Ze/>
+                    </M>
+                  </N.View>}
 
                 
-                {R&&<o.View style={[T.absoluteFill,{backgroundColor:C.primaryLight,opacity:x,transform:[{translateY:x.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
-                    <S moduleName="About & Diagnostics">
-                      <Bo onClose={()=>X(!1)}/>
-                    </S>
-                  </o.View>}
+                {k&&<N.View style={[w.absoluteFill,{backgroundColor:v.primaryLight,opacity:D,transform:[{translateY:D.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <M moduleName="About & Diagnostics">
+                      <_e onClose={()=>X(!1)}/>
+                    </M>
+                  </N.View>}
 
                 
-                {D&&<o.View style={[T.absoluteFill,{backgroundColor:C.primaryLight,opacity:P,transform:[{translateY:P.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
-                    <S moduleName="Support & Community">
-                      <Co onClose={()=>Z(!1)}/>
-                    </S>
-                  </o.View>}
+                {E&&<N.View style={[w.absoluteFill,{backgroundColor:v.primaryLight,opacity:V,transform:[{translateY:V.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <M moduleName="Support & Community">
+                      <Mo onClose={()=>Z(!1)}/>
+                    </M>
+                  </N.View>}
               </B>
 
               
-              <Do/>
+              <To/>
 
               
-              <No/>
+              <Co/>
 
               
-              <Ro/>
+              <Eo/>
 
               
-              <Mo/>
+              <So/>
 
               
-              <Vo visible={N.visible}title={N.title}message={N.message}confirmText={N.confirmText}cancelText={N.cancelText}isDestructive={!0}icon="trash"onConfirm={N.onConfirm}onCancel={()=>ie(ne=>({...ne,visible:!1}))}/>
+              <No visible={S.visible}title={S.title}message={S.message}confirmText={S.confirmText}cancelText={S.cancelText}isDestructive={!0}icon="trash"onConfirm={S.onConfirm}onCancel={()=>ae(ie=>({...ie,visible:!1}))}/>
             </B>
           </B>
-        </Me>
-      {te&&<To onStateChange={ae}/>}
-    </Se>
-    </>},Po=se.memo(function(){const V=L(new o.Value(.35)).current;return A(()=>{const M=o.loop(o.sequence([o.timing(V,{toValue:.85,duration:750,useNativeDriver:!1}),o.timing(V,{toValue:.35,duration:750,useNativeDriver:!1})]));return M.start(),()=>M.stop()},[V]),<B style={k.container}>
-      
-      <B style={k.toolbarSkeleton}>
-        <o.View style={[k.searchBarSkeleton,{opacity:V}]}/>
-        <B style={k.actionButtonsRow}>
-          <o.View style={[k.iconButtonSkeleton,{opacity:V}]}/>
-          <o.View style={[k.iconButtonSkeleton,{opacity:V}]}/>
-        </B>
-      </B>
-
-      
-      <B style={k.chipStripSkeleton}>
-        <o.View style={[k.chipSkeleton,{width:48,opacity:V}]}/>
-        <o.View style={[k.chipSkeleton,{width:68,opacity:V}]}/>
-        <o.View style={[k.chipSkeleton,{width:76,opacity:V}]}/>
-        <o.View style={[k.chipSkeleton,{width:58,opacity:V}]}/>
-      </B>
-
-      
-      {[0,1,2,3].map(M=><o.View key={`skeleton_card_${M}`}style={[k.cardSkeleton,{opacity:V}]}>
-          <B style={k.cardTopRow}>
-            <B style={k.badgeGroup}>
-              <B style={k.statusBadgeSkeleton}/>
-              <B style={k.methodBadgeSkeleton}/>
-            </B>
-            <B style={k.timeSkeleton}/>
-          </B>
-          <B style={k.urlLineLong}/>
-          <B style={k.urlLineShort}/>
-          <B style={k.cardBottomRow}>
-            <B style={k.metaPillSkeleton}/>
-            <B style={k.metaPillSkeleton}/>
-          </B>
-        </o.View>)}
-    </B>}),k=T.create({container:{flex:1,paddingHorizontal:12,paddingTop:8},toolbarSkeleton:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},searchBarSkeleton:{flex:1,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},cardSkeleton:{backgroundColor:C.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:C.dividerColor},cardTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8},badgeGroup:{flexDirection:"row",alignItems:"center",gap:6},statusBadgeSkeleton:{width:38,height:18,borderRadius:4,backgroundColor:C.graySurface},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:C.graySurface},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:C.graySurface},urlLineLong:{height:13,borderRadius:4,backgroundColor:C.graySurface,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:C.graySurface,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:C.graySurface}});export default xo;
+        </Be>
+      {re&&<Do onStateChange={te}/>}
+    </Me>
+    </>};export default Vo;