react-native-inapp-inspector 2.3.20 → 2.3.22

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

@@ -1,176 +1,162 @@
-import B,{useMemo as de}from"react";import{Alert as ke,Animated as Z,Linking as at,Platform as ce,Pressable as He,StatusBar as nt,Text as C,TouchableOpacity as Ae,useWindowDimensions as st,View as S}from"react-native";import St from"react-native-linear-gradient";import{useInspector as Tt}from"./InspectorContext";import O from"../TouchableScale";import Ct from"../AppHeaderLogo";import i from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as D}from"../../styles/AppFonts";import{METHOD_COLORS as Vt}from"../../constants";import{LIB_VERSION as ee}from"../../constants";import{getStatusColor as he,getAppName as Rt,formatTime as Dt,getSize as Be,getAppVersionAndBuild as It}from"../../helpers";import{triggerNativeHaptic as G}from"../../native/NativeInspector";import{ScreenCapture as E}from"../../capture";import{showToast as L}from"../../helpers/toast";import{UpdateAvailableModal as $t}from"./UpdateAvailableModal";import{MediaPreviewModal as Ht}from"./MediaPreviewModal";import{WhiteBackNavigation as At,TrashIcon as Bt,SettingsIcon as Mt,CloseWhite as Ot,ChevronDownIcon as Lt,ClockIcon as Se,SizeIcon as Pt,AppleIcon as Ft,AndroidIcon as Et,NpmIcon as Wt,ResetIcon as _t,BoltIcon as Nt,InfoCircleIcon as Ut,CameraIcon as Me,VideoCameraIcon as Oe}from"../NetworkIcons";import{useTranslation as Gt}from"../../i18n";const qt=B.memo(()=>{const{t:R}=Gt(),{modalHeightPercent:te,appIcon:Le,selected:I,setSelected:Pe,selectedEvent:v,setSelectedEvent:Fe,selectedLog:M,setSelectedLog:Ee,selectedReduxSlice:W,setSelectedReduxSlice:We,selectedReduxAction:q,setSelectedReduxAction:je,reduxState:_e,reduxLastActionMap:Ne,showHeaderInfo:Qt,setShowHeaderInfo:Jt,updateAvailable:ie,latestNpmVersion:Ue,clearAnim:Te,activePulseAnim:Ge,unreadPulseAnim:qe,runClearAllWithAnimation:Qe,settingsPage:P,setSettingsPage:re,isFeedbackOpen:oe,setIsFeedbackOpen:Je,isAboutOpen:le,setIsAboutOpen:xe,resetToDefaults:Ke,closeModal:ze,minimizeInspector:Xe,detailTitle:Ye,activeTab:A,environment:Ce,visible:Kt,selectedCrash:$,setSelectedCrash:Ze,refreshMediaCount:j}=Tt(),{width:_}=st(),e=_<360,Q=_<400,Xt=_>=600,[et,ae]=B.useState(!1),[tt,Yt]=B.useState(()=>It().formatted),[k,J]=B.useState(!1),[it,ne]=B.useState(0),F=B.useRef(null);B.useEffect(()=>{E.isRecording().then(T=>{J(T)}).catch(()=>{})},[]),B.useEffect(()=>(k?(ne(0),F.current=setInterval(()=>{ne(T=>T+1)},1e3)):(F.current&&(clearInterval(F.current),F.current=null),ne(0)),()=>{F.current&&clearInterval(F.current)}),[k]);const[Ve,N]=B.useState(null),Re=B.useCallback(async()=>{try{G("light");const T=await E.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(T){G("success");const V={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};N(V),j?.().catch(()=>{}),L(R("header.screenshotCaptured"))}else L(R("header.screenshotFailed"))}catch{L(R("header.screenshotError"))}},[j,R]),De=B.useCallback(async()=>{try{if(k){G("medium");const T=await E.stopRecording();if(J(!1),T){G("success");const V={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};N(V),j?.().catch(()=>{}),L(R("header.recordingSaved",{duration:(T.durationMs/1e3).toFixed(1)}))}}else G("medium"),await E.startRecording({fps:24,audioSource:"none"})?(J(!0),L(R("header.recordingStarted"))):L(R("header.recordingStartFailed"))}catch{L(R("header.recordingError")),J(!1)}},[k,R]),rt=T=>{const V=Math.floor(T/60),se=T%60;return`${V.toString().padStart(2,"0")}:${se.toString().padStart(2,"0")}`},K=de(()=>{const T=(Ce||(__DEV__?"DEV":"PROD")).trim(),V=T.toUpperCase();return V==="DEV"||V.includes("DEV")||V==="LOCAL"?{label:T,bg:`${t.emerald500}40`,border:`${t.emerald400}8C`,text:t.mintGreenBorder}:V==="UAT"||V==="QA"||V==="TEST"?{label:T,bg:`${t.amber500}47`,border:`${t.amber400}99`,text:t.amberWarmBorder}:V==="PREPROD"||V==="STAGE"||V==="STAGING"?{label:T,bg:`${t.purple500}47`,border:`${t.purple400}99`,text:t.violetSoftBorder}:{label:T,bg:`${t.rose500}40`,border:`${t.roseBorder}8C`,text:t.errorBorder}},[Ce]),X=A==="apis"&&I!=null||A==="analytics"&&v!=null||A==="logs"&&M!=null||A==="redux"&&(W!=null||q!=null)||A==="crash"&&$!=null,Y=P!==null,U=X||Y||oe||le,ot=de(()=>{switch(P){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"}},[P]),Ie=de(()=>ce.OS==="ios"?te>=98?_>=390?50:44:0:ce.OS==="android"&&te>=98?nt.currentHeight||24:0,[te,_]),H=e?28:Q?30:32,lt=e?42:Q?46:50;return<>
-      <S style={[i.headerGradient,{minHeight:(e?58:62)+Ie}]}>
+import v,{useMemo as ne}from"react";import{Alert as Re,Animated as le,Linking as rt,Platform as se,Pressable as $e,StatusBar as ot,Text as C,TouchableOpacity as Ae,useWindowDimensions as at,View as S}from"react-native";import St from"react-native-linear-gradient";import{useInspector as Tt}from"./InspectorContext";import O from"../TouchableScale";import Ct from"../AppHeaderLogo";import i from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as I}from"../../styles/AppFonts";import{METHOD_COLORS as Vt}from"../../constants";import{LIB_VERSION as de}from"../../constants";import{getStatusColor as ce,getAppName as Dt,formatTime as It,getSize as ve,getAppVersionAndBuild as Rt}from"../../helpers";import{triggerNativeHaptic as U}from"../../native/NativeInspector";import{ScreenCapture as F}from"../../capture";import{showToast as L}from"../../helpers/toast";import{UpdateAvailableModal as $t}from"./UpdateAvailableModal";import{MediaPreviewModal as At}from"./MediaPreviewModal";import{WhiteBackNavigation as Ht,TrashIcon as Mt,SettingsIcon as Bt,CloseWhite as Ot,ChevronDownIcon as Lt,ClockIcon as Se,SizeIcon as Pt,AppleIcon as Et,AndroidIcon as Ft,NpmIcon as Wt,ResetIcon as _t,BoltIcon as Nt,InfoCircleIcon as Ut,CameraIcon as Gt,VideoCameraIcon as Qt}from"../NetworkIcons";import{useTranslation as Jt}from"../../i18n";const Kt=v.memo(()=>{const{t:D}=Jt(),{modalHeightPercent:Z,appIcon:He,selected:R,setSelected:Me,selectedEvent:k,setSelectedEvent:Be,selectedLog:H,setSelectedLog:Oe,selectedReduxSlice:W,setSelectedReduxSlice:Le,selectedReduxAction:G,setSelectedReduxAction:Pe,reduxState:Ee,reduxLastActionMap:Fe,showHeaderInfo:Xt,setShowHeaderInfo:Yt,updateAvailable:ee,latestNpmVersion:We,clearAnim:Te,activePulseAnim:je,unreadPulseAnim:_e,runClearAllWithAnimation:Ne,settingsPage:P,setSettingsPage:te,isAboutOpen:ie,setIsAboutOpen:xe,resetToDefaults:Ue,closeModal:ze,minimizeInspector:Ge,detailTitle:qe,activeTab:A,environment:Ce,visible:Zt,selectedCrash:$,setSelectedCrash:Qe,refreshMediaCount:j}=Tt(),{width:_}=at(),e=_<360,q=_<400,ei=_>=600,[Je,re]=v.useState(!1),[Ke,ti]=v.useState(()=>Rt().formatted),[M,Q]=v.useState(!1),[Xe,oe]=v.useState(0),E=v.useRef(null);v.useEffect(()=>{F.isRecording().then(T=>{Q(T)}).catch(()=>{})},[]),v.useEffect(()=>(M?(oe(0),E.current=setInterval(()=>{oe(T=>T+1)},1e3)):(E.current&&(clearInterval(E.current),E.current=null),oe(0)),()=>{E.current&&clearInterval(E.current)}),[M]);const[Ve,N]=v.useState(null),Ye=v.useCallback(async()=>{try{U("light");const T=await F.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(T){U("success");const V={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};N(V),j?.().catch(()=>{}),L(D("header.screenshotCaptured"))}else L(D("header.screenshotFailed"))}catch{L(D("header.screenshotError"))}},[j,D]),Ze=v.useCallback(async()=>{try{if(M){U("medium");const T=await F.stopRecording();if(Q(!1),T){U("success");const V={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};N(V),j?.().catch(()=>{}),L(D("header.recordingSaved",{duration:(T.durationMs/1e3).toFixed(1)}))}}else U("medium"),await F.startRecording({fps:24,audioSource:"none"})?(Q(!0),L(D("header.recordingStarted"))):L(D("header.recordingStartFailed"))}catch{L(D("header.recordingError")),Q(!1)}},[M,D]),et=T=>{const V=Math.floor(T/60),ae=T%60;return`${V.toString().padStart(2,"0")}:${ae.toString().padStart(2,"0")}`},J=ne(()=>{const T=(Ce||(__DEV__?"DEV":"PROD")).trim(),V=T.toUpperCase();return V==="DEV"||V.includes("DEV")||V==="LOCAL"?{label:T,bg:`${t.emerald500}40`,border:`${t.emerald400}8C`,text:t.mintGreenBorder}:V==="UAT"||V==="QA"||V==="TEST"?{label:T,bg:`${t.amber500}47`,border:`${t.amber400}99`,text:t.amberWarmBorder}:V==="PREPROD"||V==="STAGE"||V==="STAGING"?{label:T,bg:`${t.purple500}47`,border:`${t.purple400}99`,text:t.violetSoftBorder}:{label:T,bg:`${t.rose500}40`,border:`${t.roseBorder}8C`,text:t.errorBorder}},[Ce]),K=A==="apis"&&R!=null||A==="analytics"&&k!=null||A==="logs"&&H!=null||A==="redux"&&(W!=null||G!=null)||A==="crash"&&$!=null,X=P!==null,Y=K||X||ie,tt=ne(()=>{switch(P){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"}},[P]),De=ne(()=>se.OS==="ios"?Z>=98?_>=390?50:44:0:se.OS==="android"&&Z>=98?ot.currentHeight||24:0,[Z,_]),B=e?28:q?30:32,it=e?42:q?46:50;return<>
+      <S style={[i.headerGradient,{minHeight:(e?58:62)+De}]}>
         
         <St 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:Ie,width:"100%"}}>
+        <S style={{paddingTop:De,width:"100%"}}>
           <S style={[i.header,{width:"100%",justifyContent:"space-between",paddingHorizontal:e?12:16,paddingVertical:e?8:10,minHeight:e?52:56}]}>
-            <S style={{flexDirection:"row",alignItems:"center",gap:e?8:10,flex:X?void 0:1,flexShrink:X?0:1,minWidth:0}}>
-              {U&&<O onPress={()=>{if(le){xe(!1);return}if(oe){Je(!1);return}if(Y){re(P==="main"?null:"main");return}Pe(null),Fe(null),Ee(null),We(null),je(null),Ze(null)}}hitSlop={15}style={{width:e?32:36,height:e?32:36,borderRadius:e?16:18,alignItems:"center",justifyContent:"center",backgroundColor:`${t.white}2E`,borderWidth:1,borderColor:`${t.white}4D`}}>
+            <S style={{flexDirection:"row",alignItems:"center",gap:e?8:10,flex:K?void 0:1,flexShrink:K?0:1,minWidth:0}}>
+              {Y&&<O onPress={()=>{if(ie){xe(!1);return}if(X){te(P==="main"?null:"main");return}Me(null),Be(null),Oe(null),Le(null),Pe(null),Qe(null)}}hitSlop={15}style={{width:e?32:36,height:e?32:36,borderRadius:e?16:18,alignItems:"center",justifyContent:"center",backgroundColor:`${t.white}2E`,borderWidth:1,borderColor:`${t.white}4D`}}>
                   <S style={{position:"absolute",width:e?40:44,height:e?40:44,borderRadius:22,backgroundColor:`${t.white}1A`}}/>
-                  <At/>
+                  <Ht/>
                 </O>}
 
-              {le?<S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
+              {ie?<S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
                   <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                    <C style={{fontFamily:D.interBold,fontSize:e?15:16.5,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
+                    <C style={{fontFamily:I.interBold,fontSize:e?15:16.5,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
                       About & Specs
                     </C>
                     <S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
-                      <C style={{fontFamily:D.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
-                        v{ee}
+                      <C style={{fontFamily:I.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
+                        v{de}
                       </C>
                     </S>
                   </S>
-                  <C style={{fontFamily:D.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:1}}numberOfLines={1}>
+                  <C style={{fontFamily:I.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:1}}numberOfLines={1}>
                     Package info, runtime specs & diagnostic payload
                   </C>
-                </S>:oe?<S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
+                </S>:X?<S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
                   <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                    <C style={{fontFamily:D.interBold,fontSize:e?15:16.5,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
-                      Support & Feedback
-                    </C>
-                    <S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
-                      <C style={{fontFamily:D.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
-                        v{ee}
-                      </C>
-                    </S>
-                  </S>
-                  <C style={{fontFamily:D.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:1}}numberOfLines={1}>
-                    Direct line to maintainers & developers
-                  </C>
-                </S>:Y?<S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
-                  <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                    <C style={{fontFamily:D.interBold,fontSize:e?15:16.5,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
-                      {ot}
+                    <C style={{fontFamily:I.interBold,fontSize:e?15:16.5,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
+                      {tt}
                     </C>
                     {P==="main"&&<S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
-                        <C style={{fontFamily:D.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
-                          v{ee}
+                        <C style={{fontFamily:I.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
+                          v{de}
                         </C>
                       </S>}
                   </S>
-                  <C style={{fontFamily:D.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:1}}numberOfLines={1}>
+                  <C style={{fontFamily:I.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:1}}numberOfLines={1}>
                     {P==="main"?"Manage modules and preferences":"Configure module parameters"}
                   </C>
-                </S>:U?null:<S style={{flexDirection:"row",alignItems:"center",gap:e?10:12,flex:1,minWidth:0,marginRight:4}}>
-                  <Ct size={lt}customIcon={Le}/>
+                </S>:Y?null:<S style={{flexDirection:"row",alignItems:"center",gap:e?10:12,flex:1,minWidth:0,marginRight:4}}>
+                  <Ct size={it}customIcon={He}/>
                   <S style={{gap:4,flex:1,minWidth:0,justifyContent:"center"}}>
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?6:7,minWidth:0}}>
-                      <C style={[i.headerTitle,{fontSize:e?15:Q?16:17,lineHeight:e?20:Q?22:23,flexShrink:1,paddingBottom:0}]}numberOfLines={1}ellipsizeMode="tail">
-                        {Rt()}
+                      <C style={[i.headerTitle,{fontSize:e?15:q?16:17,lineHeight:e?20:q?22:23,flexShrink:1,paddingBottom:0}]}numberOfLines={1}ellipsizeMode="tail">
+                        {Dt()}
                       </C>
-                      <S style={[i.envBadge,{backgroundColor:K.bg,borderColor:K.border,flexShrink:0,paddingHorizontal:e?6:7,paddingVertical:2.5,borderRadius:6,marginBottom:0}]}>
-                        <C style={[i.envBadgeText,{color:K.text,fontSize:e?9:10,lineHeight:13}]}>
-                          {K.label}
+                      <S style={[i.envBadge,{backgroundColor:J.bg,borderColor:J.border,flexShrink:0,paddingHorizontal:e?6:7,paddingVertical:2.5,borderRadius:6,marginBottom:0}]}>
+                        <C style={[i.envBadgeText,{color:J.text,fontSize:e?9:10,lineHeight:13}]}>
+                          {J.label}
                         </C>
                       </S>
-                      {ie&&<He hitSlop={10}onPress={()=>ae(!0)}style={{flexDirection:"row",alignItems:"center",backgroundColor:t.warningAmber,borderRadius:6,paddingHorizontal:e?5:6.5,paddingVertical:2.5,gap:3.5,shadowColor:t.warningAmber,shadowOffset:{width:0,height:1.5},shadowOpacity:.35,shadowRadius:3,elevation:3,flexShrink:0}}>
-                          <Z.View style={{width:5,height:5,borderRadius:2.5,backgroundColor:t.white,opacity:Ge,transform:[{scale:qe}]}}/>
-                          {!e&&<C style={{fontFamily:D.interBold,fontSize:8.5,lineHeight:11,color:t.white,letterSpacing:.3}}>
+                      {ee&&<$e hitSlop={10}onPress={()=>re(!0)}style={{flexDirection:"row",alignItems:"center",backgroundColor:t.warningAmber,borderRadius:6,paddingHorizontal:e?5:6.5,paddingVertical:2.5,gap:3.5,shadowColor:t.warningAmber,shadowOffset:{width:0,height:1.5},shadowOpacity:.35,shadowRadius:3,elevation:3,flexShrink:0}}>
+                          <le.View style={{width:5,height:5,borderRadius:2.5,backgroundColor:t.white,opacity:je,transform:[{scale:_e}]}}/>
+                          {!e&&<C style={{fontFamily:I.interBold,fontSize:8.5,lineHeight:11,color:t.white,letterSpacing:.3}}>
                               UPDATE
                             </C>}
                           <Nt size={e?8:9}color={t.white}/>
-                        </He>}
+                        </$e>}
                     </S>
 
                     
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?5:6,minWidth:0,marginTop:2}}>
                       <S style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}1F`,borderRadius:6,paddingHorizontal:e?6:7,paddingVertical:3,gap:4,borderWidth:1,borderColor:`${t.white}2E`,flexShrink:1,minWidth:0}}>
-                        {ce.OS==="ios"?<Ft color={`${t.white}E6`}size={e?9.5:10.5}/>:<Et color={`${t.white}E6`}size={e?9.5:10.5}/>}
-                        <C style={{fontFamily:D.interMedium,fontSize:e?9:10,lineHeight:13,color:`${t.white}EB`,letterSpacing:.1}}numberOfLines={1}ellipsizeMode="tail">
-                          {tt}
+                        {se.OS==="ios"?<Et color={`${t.white}E6`}size={e?9.5:10.5}/>:<Ft color={`${t.white}E6`}size={e?9.5:10.5}/>}
+                        <C style={{fontFamily:I.interMedium,fontSize:e?9:10,lineHeight:13,color:`${t.white}EB`,letterSpacing:.1}}numberOfLines={1}ellipsizeMode="tail">
+                          {Ke}
                         </C>
                       </S>
 
-                      <He onPress={()=>{ie?ae(!0):at.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{})}}style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}1F`,borderRadius:6,paddingHorizontal:e?6:7,paddingVertical:3,gap:4,borderWidth:1,borderColor:`${t.white}2E`,flexShrink:0}}>
+                      <$e onPress={()=>{ee?re(!0):rt.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{})}}style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}1F`,borderRadius:6,paddingHorizontal:e?6:7,paddingVertical:3,gap:4,borderWidth:1,borderColor:`${t.white}2E`,flexShrink:0}}>
                         <Wt size={e?9.5:10.5}color={t.npmRedLight}/>
-                        <C style={{fontFamily:D.interMedium,fontSize:e?9:10,lineHeight:13,color:`${t.white}EB`,letterSpacing:.1}}numberOfLines={1}>
-                          v{ee}
+                        <C style={{fontFamily:I.interMedium,fontSize:e?9:10,lineHeight:13,color:`${t.white}EB`,letterSpacing:.1}}numberOfLines={1}>
+                          v{de}
                         </C>
-                        {ie&&<C style={{fontFamily:D.interBold,fontSize:8.5,color:t.warningAmber}}>
+                        {ee&&<C style={{fontFamily:I.interBold,fontSize:8.5,color:t.warningAmber}}>
                             ●
                           </C>}
-                      </He>
+                      </$e>
                     </S>
                   </S>
                 </S>}
             </S>
 
-            {X&&<S style={[i.headerCenter,{paddingHorizontal:e?2:6}]}>
-                {A==="apis"&&I!=null?<S style={i.headerDetailCenter}>
+            {K&&<S style={[i.headerCenter,{paddingHorizontal:e?2:6}]}>
+                {A==="apis"&&R!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
-                      <S style={[i.headerMethodBadge,{backgroundColor:Vt[I.method]??t.grayText,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                      <S style={[i.headerMethodBadge,{backgroundColor:Vt[R.method]??t.grayText,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
                         <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
-                          {I.method}
+                          {R.method}
                         </C>
                       </S>
                       <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        {Ye}
+                        {qe}
                       </C>
                     </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:`${he(I.status)}26`,borderWidth:1,borderColor:`${he(I.status)}55`}}>
-                        <S style={[i.headerStatusDot,{backgroundColor:he(I.status),width:e?6:7,height:e?6:7}]}/>
-                        <C style={[i.headerSubTitle,{fontFamily:D.interBold,fontSize:e?10:11}]}>
-                          {I.status===0?"Failed":I.status??"Pending"}
+                      <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${ce(R.status)}26`,borderWidth:1,borderColor:`${ce(R.status)}55`}}>
+                        <S style={[i.headerStatusDot,{backgroundColor:ce(R.status),width:e?6:7,height:e?6:7}]}/>
+                        <C style={[i.headerSubTitle,{fontFamily:I.interBold,fontSize:e?10:11}]}>
+                          {R.status===0?"Failed":R.status??"Pending"}
                         </C>
                       </S>
                       <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${t.white}29`}}>
                         <Se color={t.white}size={e?10:11}/>
                         <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                          {I.duration!=null?`${I.duration}ms`:"\u2014"}
+                          {R.duration!=null?`${R.duration}ms`:"\u2014"}
                         </C>
                       </S>
-                      {I.response!=null&&<S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${t.white}29`}}>
+                      {R.response!=null&&<S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${t.white}29`}}>
                           <Pt color={t.white}size={e?10:11}/>
                           <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                            {Be(I.response)}
+                            {ve(R.response)}
                           </C>
                         </S>}
                     </S>
-                  </S>:A==="analytics"&&v!=null?<S style={i.headerDetailCenter}>
+                  </S>:A==="analytics"&&k!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
-                      <S style={[i.headerMethodBadge,{backgroundColor:v.source==="firebase"?`${t.firebaseOrange}4D`:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                      <S style={[i.headerMethodBadge,{backgroundColor:k.source==="firebase"?`${t.firebaseOrange}4D`:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
                         <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
-                          {v.source==="firebase"?"FB":"MAN"}
+                          {k.source==="firebase"?"FB":"MAN"}
                         </C>
                       </S>
                       <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        #{v.id!=null?v.id+1:1}{" "}
-                        {v.name}
+                        #{k.id!=null?k.id+1:1}{" "}
+                        {k.name}
                       </C>
                     </S>
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
-                      <S style={[i.headerStatusDot,{backgroundColor:v.source==="firebase"?t.firebaseOrange:t.purple,width:e?6:7,height:e?6:7}]}/>
+                      <S style={[i.headerStatusDot,{backgroundColor:k.source==="firebase"?t.firebaseOrange:t.purple,width:e?6:7,height:e?6:7}]}/>
                       <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                        {Object.keys(v.params).length} param
-                        {Object.keys(v.params).length!==1?"s":""}
+                        {Object.keys(k.params).length} param
+                        {Object.keys(k.params).length!==1?"s":""}
                         {" \xB7 "}
-                        {v.source}
+                        {k.source}
                       </C>
                     </S>
-                  </S>:A==="logs"&&M!=null?<S style={i.headerDetailCenter}>
+                  </S>:A==="logs"&&H!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
-                      <S style={[i.headerMethodBadge,{backgroundColor:M.type==="error"?`${t.errorColor}4D`:M.type==="warn"?`${t.lightOrange}4D`:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                      <S style={[i.headerMethodBadge,{backgroundColor:H.type==="error"?`${t.errorColor}4D`:H.type==="warn"?`${t.lightOrange}4D`:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
                         <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
-                          {M.type.toUpperCase()}
+                          {H.type.toUpperCase()}
                         </C>
                       </S>
                       <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        #{M.id!=null?M.id+1:1}{" "}
+                        #{H.id!=null?H.id+1:1}{" "}
                         console.
-                        {M.sourceMethod||M.type||"log"}
+                        {H.sourceMethod||H.type||"log"}
                       </C>
                     </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:`${t.white}29`}}>
                         <Se color={t.white}size={e?10:11}/>
                         <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                          {Dt(M.timestamp)}
+                          {It(H.timestamp)}
                         </C>
                       </S>
                     </S>
-                  </S>:A==="redux"&&W!=null?(()=>{const T=_e?.[W],V=T&&typeof T=="object"?Object.keys(T).length:typeof T<"u"?1:0,se=Be(T),$e=Ne[W];return<S style={i.headerDetailCenter}>
+                  </S>:A==="redux"&&W!=null?(()=>{const T=Ee?.[W],V=T&&typeof T=="object"?Object.keys(T).length:typeof T<"u"?1:0,ae=ve(T),Ie=Fe[W];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}]}>
                             <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
@@ -196,21 +182,21 @@ import B,{useMemo as de}from"react";import{Alert as ke,Animated as Z,Linking as
                             •
                           </C>
                           <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                            {se}
+                            {ae}
                           </C>
-                          {$e?.timestamp&&<>
+                          {Ie?.timestamp&&<>
                               <C style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                                 •
                               </C>
                               <S style={{flexDirection:"row",alignItems:"center",gap:3}}>
                                 <Se color={t.white}size={e?9:10}/>
                                 <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                                  {$e.timestamp}
+                                  {Ie.timestamp}
                                 </C>
                               </S>
                             </>}
                         </S>
-                      </S>})():A==="redux"&&q!=null?<S style={i.headerDetailCenter}>
+                      </S>})():A==="redux"&&G!=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}]}>
                         <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
@@ -218,13 +204,13 @@ import B,{useMemo as de}from"react";import{Alert as ke,Animated as Z,Linking as
                         </C>
                       </S>
                       <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        {q.type}
+                        {G.type}
                       </C>
                     </S>
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
                       <S style={[i.headerStatusDot,{backgroundColor:t.purple,width:e?6:7,height:e?6:7}]}/>
                       <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                        {q.timestamp||"Dispatched"}
+                        {G.timestamp||"Dispatched"}
                       </C>
                     </S>
                   </S>:A==="crash"&&$!=null?<S style={i.headerDetailCenter}>
@@ -256,75 +242,63 @@ import B,{useMemo as de}from"react";import{Alert as ke,Animated as Z,Linking as
               </S>}
 
             <S style={[i.headerRight,{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",flexShrink:0,gap:e?4:5}]}>
-              
-              {U&&<>
-                  
-                  <O accessible={!0}accessibilityRole="button"accessibilityLabel={R("header.photo","Photo")}onPress={Re}hitSlop={10}style={[i.closeButtonSquare,{width:H,height:H,borderRadius:e?6:7}]}>
-                    <Me size={e?12:13}color={t.white}/>
-                  </O>
-
-                  
-                  <O accessible={!0}accessibilityRole="button"accessibilityLabel={R("header.record","Record")}onPress={De}hitSlop={10}style={[i.closeButtonSquare,{width:H,height:H,borderRadius:e?6:7,backgroundColor:k?`${t.red500}40`:`${t.white}24`,borderColor:k?t.red500:`${t.white}33`}]}>
-                    {k?<Z.View style={{width:6,height:6,borderRadius:3,backgroundColor:t.red500}}/>:<Oe size={e?12:13}color={t.white}/>}
-                  </O>
-                </>}
 
-              {Y&&<O onPress={()=>{ke.alert("Reset All Settings","This restores all module visibility and UI preferences to defaults. Continue?",[{text:"Cancel",style:"cancel"},{text:"Reset",style:"destructive",onPress:Ke}])}}hitSlop={15}style={[i.closeButtonSquare,{width:H,height:H,borderRadius:e?6:7}]}>
+              {X&&<O onPress={()=>{Re.alert("Reset All Settings","This restores all module visibility and UI preferences to defaults. Continue?",[{text:"Cancel",style:"cancel"},{text:"Reset",style:"destructive",onPress:Ue}])}}hitSlop={15}style={[i.closeButtonSquare,{width:B,height:B,borderRadius:e?6:7}]}>
                   <_t color={t.white}size={e?12:14}/>
                 </O>}
 
-              {!U&&<O accessible={!0}accessibilityRole="button"accessibilityLabel="Settings"onPress={()=>re("main")}hitSlop={15}style={[i.closeButtonSquare,{width:H,height:H,borderRadius:e?6:7}]}>
-                  <Mt color={t.white}size={e?12:14}/>
+              {!Y&&<O accessible={!0}accessibilityRole="button"accessibilityLabel="Settings"onPress={()=>te("main")}hitSlop={15}style={[i.closeButtonSquare,{width:B,height:B,borderRadius:e?6:7}]}>
+                  <Bt color={t.white}size={e?12:14}/>
                 </O>}
 
               
-              <Ae onPress={Xe||ze}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.6}accessibilityRole="button"accessibilityLabel={R("common.minimize","Minimize")}style={[i.closeButtonSquare,{width:H,height:H,borderRadius:e?6:7}]}>
+              <Ae onPress={Ge||ze}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.6}accessibilityRole="button"accessibilityLabel={D("common.minimize","Minimize")}style={[i.closeButtonSquare,{width:B,height:B,borderRadius:e?6:7}]}>
                 <Lt size={e?14:16}color={t.white}/>
               </Ae>
 
               
-              <Ae onPress={ze}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.6}accessibilityRole="button"accessibilityLabel={R("common.close","Close")}style={[i.closeButtonSquare,{width:H,height:H,borderRadius:e?6:7}]}>
+              <Ae onPress={ze}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.6}accessibilityRole="button"accessibilityLabel={D("common.close","Close")}style={[i.closeButtonSquare,{width:B,height:B,borderRadius:e?6:7}]}>
                 <Ot size={e?12:14}/>
               </Ae>
             </S>
           </S>
 
           
-          {!U&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:e?10:14,paddingBottom:e?8:10,paddingTop:2,gap:6}}>
+          {!Y&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:e?10:14,paddingBottom:e?8:10,paddingTop:2,gap:6}}>
             <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
               
-              <O onPress={Re}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${t.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:`${t.white}33`}}>
-                <Me size={e?12:13}color={t.white}/>
-                <C style={{fontFamily:D.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:t.white}}>
-                  {R("header.photo")}
+              <O onPress={Ye}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${t.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:`${t.white}33`}}>
+                <Gt size={e?12:13}color={t.white}/>
+                <C style={{fontFamily:I.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:t.white}}>
+                  {D("header.photo")}
                 </C>
               </O>
 
               
-              <O onPress={De}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:k?`${t.red500}33`:`${t.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:k?t.red500:`${t.white}33`}}>
-                {k?<Z.View style={{width:6,height:6,borderRadius:3,backgroundColor:t.red500}}/>:<Oe size={e?12:13}color={t.white}/>}
-                <C style={{fontFamily:D.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:k?t.red300:t.white}}>
-                  {k?`${R("header.rec")} ${rt(it)}`:R("header.record")}
+              <O onPress={Ze}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:M?`${t.red500}33`:`${t.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:M?t.red500:`${t.white}33`}}>
+                {M?<le.View style={{width:6,height:6,borderRadius:3,backgroundColor:t.red500}}/>:<Qt size={e?12:13}color={t.white}/>}
+                <C style={{fontFamily:I.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:M?t.red300:t.white}}>
+                  {M?`${D("header.rec")} ${et(Xe)}`:D("header.record")}
                 </C>
               </O>
             </S>
 
             <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
               
-                <O accessible={!0}accessibilityRole="button"accessibilityLabel={R("common.clearAll")}onPress={()=>{ke.alert(R("header.clearEverythingTitle"),R("header.clearEverythingMessage"),[{text:R("common.cancel"),style:"cancel"},{text:R("common.clearAll"),onPress:Qe,style:"destructive"}])}}hitSlop={10}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${t.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:`${t.white}33`}}>
-                  <Z.View style={{transform:[{rotate:Te.interpolate({inputRange:[0,1],outputRange:["0deg","-25deg"]})},{scale:Te.interpolate({inputRange:[0,.5,1],outputRange:[1,1.25,1]})}]}}>
-                    <Bt color={t.white}size={e?12:13}/>
-                  </Z.View>
-                  <C style={{fontFamily:D.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:t.white}}>
-                    {R("common.clearAll")}
+                <O accessible={!0}accessibilityRole="button"accessibilityLabel={D("common.clearAll")}onPress={()=>{Re.alert(D("header.clearEverythingTitle"),D("header.clearEverythingMessage"),[{text:D("common.cancel"),style:"cancel"},{text:D("common.clearAll"),onPress:Ne,style:"destructive"}])}}hitSlop={10}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${t.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:`${t.white}33`}}>
+                  <le.View style={{transform:[{rotate:Te.interpolate({inputRange:[0,1],outputRange:["0deg","-25deg"]})},{scale:Te.interpolate({inputRange:[0,.5,1],outputRange:[1,1.25,1]})}]}}>
+                    <Mt color={t.white}size={e?12:13}/>
+                  </le.View>
+                  <C style={{fontFamily:I.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:t.white}}>
+                    {D("common.clearAll")}
                   </C>
                 </O>
 
                 
-                <O accessible={!0}accessibilityRole="button"accessibilityLabel={R("header.about")}onPress={()=>{xe(!0)}}hitSlop={10}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${t.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:`${t.white}33`}}>
+                <O accessible={!0}accessibilityRole="button"accessibilityLabel={D("header.about")}onPress={()=>{xe(!0)}}hitSlop={10}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${t.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:`${t.white}33`}}>
                   <Ut color={t.white}size={e?12:13}/>
-                  <C style={{fontFamily:D.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:t.white}}>
-                    {R("header.about")}
+                  <C style={{fontFamily:I.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:t.white}}>
+                    {D("header.about")}
                   </C>
                 </O>
               </S>
@@ -333,8 +307,8 @@ import B,{useMemo as de}from"react";import{Alert as ke,Animated as Z,Linking as
       </S>
 
       
-      <$t visible={et}latestVersion={Ue}onClose={()=>ae(!1)}/>
+      <$t visible={Je}latestVersion={We}onClose={()=>re(!1)}/>
 
       
-      <Ht item={Ve}visible={!!Ve}onClose={()=>N(null)}onDelete={async T=>{await E.deleteMedia(T.uri),j?.().catch(()=>{}),N(null)}}onConvertToGif={async T=>{const V=await E.convertToGif(T.uri,{fps:12,width:480});V&&(j?.().catch(()=>{}),N({id:`anim_${V.timestamp}.gif`,type:"gif",format:"gif",uri:V.uri,filename:V.uri.split("/").pop()||`anim_${V.timestamp}.gif`,sizeBytes:V.sizeBytes,timestamp:V.timestamp,durationMs:V.durationMs}))}}/>
-    </>});export default qt;
+      <At item={Ve}visible={!!Ve}onClose={()=>N(null)}onDelete={async T=>{await F.deleteMedia(T.uri),j?.().catch(()=>{}),N(null)}}onConvertToGif={async T=>{const V=await F.convertToGif(T.uri,{fps:12,width:480});V&&(j?.().catch(()=>{}),N({id:`anim_${V.timestamp}.gif`,type:"gif",format:"gif",uri:V.uri,filename:V.uri.split("/").pop()||`anim_${V.timestamp}.gif`,sizeBytes:V.sizeBytes,timestamp:V.timestamp,durationMs:V.durationMs}))}}/>
+    </>});export default Kt;