react-native-inapp-inspector 2.4.2 → 2.5.0

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

@@ -1,14 +1,14 @@
-import H,{useMemo as ne}from"react";import{Alert as we,Animated as se,Linking as Qe,Platform as de,Pressable as Se,StatusBar as Je,Text as C,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 P from"../TouchableScale";import Ze from"../AppHeaderLogo";import i from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as D}from"../../styles/AppFonts";import{METHOD_COLORS as et}from"../../constants";import{LIB_VERSION as ce}from"../../constants";import{getStatusColor as ge,getAppName as tt,formatTime as it,formatTimeShort as rt,getSize as xe,getAppVersionAndBuild as ot}from"../../helpers";import{triggerNativeHaptic as j}from"../../native/NativeInspector";import{ScreenCapture as W}from"../../capture";import{showToast as O}from"../../helpers/toast";import{UpdateAvailableModal as St}from"./UpdateAvailableModal";import{MediaPreviewModal as Tt}from"./MediaPreviewModal";import{WhiteBackNavigation as Ct,TrashIcon as Vt,SettingsIcon as Dt,CloseWhite as Rt,ChevronDownIcon as It,ClockIcon as Z,SizeIcon as $t,AppleIcon as Mt,AndroidIcon as Ht,NpmIcon as At,ResetIcon as Bt,BoltIcon as Pt,InfoCircleIcon as Ot,CameraIcon as Lt,VideoCameraIcon as Et}from"../NetworkIcons";import{useTranslation as Wt}from"../../i18n";const Ft=H.memo(()=>{const{t:V}=Wt(),{modalHeightPercent:ee,appIcon:Ce,selected:I,setSelected:ze,selectedEvent:M,setSelectedEvent:Ve,selectedLog:A,setSelectedLog:De,selectedReduxSlice:F,setSelectedReduxSlice:Re,selectedReduxAction:_,setSelectedReduxAction:Ie,reduxState:ke,reduxLastActionMap:$e,updateAvailable:te,latestNpmVersion:Me,clearAnim:he,activePulseAnim:He,unreadPulseAnim:Ae,runClearAllWithAnimation:ve,settingsPage:L,setSettingsPage:ie,isAboutOpen:re,setIsAboutOpen:ue,resetToDefaults:Be,closeModal:pe,minimizeInspector:Pe,detailTitle:Oe,activeTab:k,environment:me,selectedCrash:$,setSelectedCrash:Le,selectedPush:R,setSelectedPush:Ee,refreshMediaCount:U}=Ye(),{width:G}=Ke(),e=G<360,q=G<400,[We,oe]=H.useState(!1),[Fe]=H.useState(()=>ot().formatted),[v,Q]=H.useState(!1),[Ue,ae]=H.useState(0),E=H.useRef(null);H.useEffect(()=>{W.isRecording().then(T=>{Q(T)}).catch(()=>{})},[]),H.useEffect(()=>(v?(ae(0),E.current=setInterval(()=>{ae(T=>T+1)},1e3)):(E.current&&(clearInterval(E.current),E.current=null),ae(0)),()=>{E.current&&clearInterval(E.current)}),[v]);const[fe,N]=H.useState(null),Ne=H.useCallback(async()=>{try{j("light");const T=await W.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(T){j("success");const z={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(z),U?.().catch(()=>{}),O(V("header.screenshotCaptured"))}else O(V("header.screenshotFailed"))}catch{O(V("header.screenshotError"))}},[U,V]),je=H.useCallback(async()=>{try{if(v){j("medium");const T=await W.stopRecording();if(Q(!1),T){j("success");const z={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(z),U?.().catch(()=>{}),O(V("header.recordingSaved",{duration:(T.durationMs/1e3).toFixed(1)}))}}else j("medium"),await W.startRecording({fps:24,audioSource:"none"})?(Q(!0),O(V("header.recordingStarted"))):O(V("header.recordingStartFailed"))}catch{O(V("header.recordingError")),Q(!1)}},[v,V]),_e=T=>{const z=Math.floor(T/60),le=T%60;return`${z.toString().padStart(2,"0")}:${le.toString().padStart(2,"0")}`},J=ne(()=>{const T=(me||(__DEV__?"DEV":"PROD")).trim(),z=T.toUpperCase();return z==="DEV"||z.includes("DEV")||z==="LOCAL"?{label:T,bg:`${t.emerald500}40`,border:`${t.emerald400}8C`,text:t.mintGreenBorder}:z==="UAT"||z==="QA"||z==="TEST"?{label:T,bg:`${t.amber500}47`,border:`${t.amber400}99`,text:t.amberWarmBorder}:z==="PREPROD"||z==="STAGE"||z==="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}},[me]),K=k==="apis"&&I!=null||k==="analytics"&&M!=null||k==="logs"&&A!=null||k==="redux"&&(F!=null||_!=null)||k==="crash"&&$!=null||k==="push"&&R!=null,X=L!==null,Y=K||X||re,Ge=ne(()=>{switch(L){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"}},[L]),be=ne(()=>de.OS==="ios"?ee>=98?G>=390?50:44:0:de.OS==="android"&&ee>=98?Je.currentHeight||24:0,[ee,G]),B=e?28:q?30:32,qe=e?48:q?52:56;return<>
-      <S style={[i.headerGradient,{minHeight:(e?62:66)+be}]}>
+import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as Ye,Platform as de,Pressable as Se,StatusBar as Ze,Text as C,TouchableOpacity as Te,useWindowDimensions as et,View as S}from"react-native";import St from"react-native-linear-gradient";import{useInspector as Tt}from"./InspectorContext";import _ from"../TouchableScale";import{BrandCircleIcon as Ct}from"../BrandCircleIcon";import i from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as D}from"../../styles/AppFonts";import{METHOD_COLORS as xt}from"../../constants";import{LIB_VERSION as ce}from"../../constants";import{getStatusColor as ue,formatTime as zt,formatTimeShort as Ce,getSize as xe,formatByteSize as Vt,getAppVersionAndBuild as Dt,showToast as H}from"../../helpers";import{triggerNativeHaptic as A}from"../../native/NativeInspector";import{ScreenCapture as E}from"../../capture";import{UpdateAvailableModal as Rt}from"./UpdateAvailableModal";import{MediaPreviewModal as It}from"./MediaPreviewModal";import{LanguageSelectorModal as Mt}from"./LanguageSelectorModal";import{WhiteBackNavigation as $t,SettingsIcon as Bt,CloseWhite as Lt,ChevronDownIcon as Ve,ClockIcon as G,SizeIcon as De,AppleIcon as Ht,AndroidIcon as At,NpmIcon as Ot,ResetIcon as Pt,BoltIcon as Et,EyeIcon as Wt}from"../NetworkIcons";import{useTranslation as Ft,SUPPORTED_LANGUAGES as ke,getLanguage as Ut}from"../../i18n";const Nt=$.memo(()=>{const{t:I,language:ge}=Ft(),{modalHeightPercent:ee,appIcon:_t,selected:R,setSelected:Re,selectedEvent:B,setSelectedEvent:Ie,selectedLog:L,setSelectedLog:Me,selectedReduxSlice:W,setSelectedReduxSlice:$e,selectedReduxAction:q,setSelectedReduxAction:Be,reduxState:Le,reduxLastActionMap:ve,updateAvailable:te,latestNpmVersion:He,clearAnim:jt,activePulseAnim:Ae,unreadPulseAnim:Oe,runClearAllWithAnimation:Gt,settingsPage:O,setSettingsPage:ie,isAboutOpen:re,setIsAboutOpen:Pe,resetToDefaults:Ee,closeModal:he,minimizeInspector:We,detailTitle:Fe,activeTab:V,environment:pe,selectedCrash:M,setSelectedCrash:Ue,selectedPush:k,setSelectedPush:Ne,selectedSocket:z,setSelectedSocket:_e,refreshMediaCount:F,peekMode:oe,setPeekMode:je}=Tt(),{width:Q}=et(),e=Q<360,U=Q<400,[Ge,ae]=$.useState(!1),[qe,me]=$.useState(!1),[Qe]=$.useState(()=>Dt().formatted),fe=Z(()=>{const T=ge||Ut();return ke.find(x=>x.code===T)||ke[0]},[ge]),[J,K]=$.useState(!1),[qt,le]=$.useState(0),P=$.useRef(null);$.useEffect(()=>{E.isRecording().then(T=>{K(T)}).catch(()=>{})},[]),$.useEffect(()=>(J?(le(0),P.current=setInterval(()=>{le(T=>T+1)},1e3)):(P.current&&(clearInterval(P.current),P.current=null),le(0)),()=>{P.current&&clearInterval(P.current)}),[J]);const[be,N]=$.useState(null),Qt=$.useCallback(async()=>{try{A("light");const T=await E.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(T){A("success");const x={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(x),F?.().catch(()=>{}),H(I("header.screenshotCaptured"))}else H(I("header.screenshotFailed"))}catch{H(I("header.screenshotError"))}},[F,I]),Jt=$.useCallback(async()=>{try{if(J){A("medium");const T=await E.stopRecording();if(K(!1),T){A("success");const x={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(x),F?.().catch(()=>{}),H(I("header.recordingSaved",{duration:(T.durationMs/1e3).toFixed(1)}))}}else A("medium"),await E.startRecording({fps:24,audioSource:"none"})?(K(!0),H(I("header.recordingStarted"))):H(I("header.recordingStartFailed"))}catch{H(I("header.recordingError")),K(!1)}},[J,I]),Kt=T=>{const x=Math.floor(T/60),se=T%60;return`${x.toString().padStart(2,"0")}:${se.toString().padStart(2,"0")}`},Xt=Z(()=>{const T=(pe||(__DEV__?"DEV":"PROD")).trim(),x=T.toUpperCase();return x==="DEV"||x.includes("DEV")||x==="LOCAL"?{label:T,bg:`${t.emerald500}40`,border:`${t.emerald400}8C`,text:t.mintGreenBorder}:x==="UAT"||x==="QA"||x==="TEST"?{label:T,bg:`${t.amber500}47`,border:`${t.amber400}99`,text:t.amberWarmBorder}:x==="PREPROD"||x==="STAGE"||x==="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}},[pe]),X=V==="apis"&&R!=null||V==="analytics"&&B!=null||V==="logs"&&L!=null||V==="redux"&&(W!=null||q!=null)||V==="crash"&&M!=null||V==="push"&&k!=null||V==="socket"&&z!=null,Y=O!==null,ne=X||Y||re,Je=Z(()=>{switch(O){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"}},[O]),ye=Z(()=>de.OS==="ios"?ee>=98?Q>=390?50:44:0:de.OS==="android"&&ee>=98?Ze.currentHeight||24:0,[ee,Q]),v=e?25:U?26.5:27,Yt=e?36:U?38:40;return<>
+      <S style={[i.headerGradient,{minHeight:(e?44:48)+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:be,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:K?void 0:1,flexShrink:K?0:1,minWidth:0}}>
-              {Y&&<P onPress={()=>{if(re){ue(!1);return}if(X){ie(L==="main"?null:"main");return}ze(null),Ve(null),De(null),Re(null),Ie(null),Le(null),Ee(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`}}>
+        <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:ye,width:"100%"}}>
+          <S style={[i.header,{width:"100%",justifyContent:"space-between",paddingHorizontal:e?10:12,paddingVertical:5.5,minHeight:e?44:48}]}>
+            <S style={{flexDirection:"row",alignItems:"center",gap:e?7:8,flex:X?void 0:1,flexShrink:X?0:1,minWidth:0}}>
+              {ne&&<_ onPress={()=>{if(re){Pe(!1);return}if(Y){ie(O==="main"?null:"main");return}Re(null),Ie(null),Me(null),$e(null),Be(null),Ue(null),Ne(null),_e(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`}}/>
-                  <Ct/>
-                </P>}
+                  <$t/>
+                </_>}
 
               {re?<S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
                   <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
@@ -24,139 +24,148 @@ import H,{useMemo as ne}from"react";import{Alert as we,Animated as se,Linking as
                   <C style={{fontFamily:D.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>:X?<S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
+                </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}>
-                      {Ge}
+                      {Je}
                     </C>
-                    {L==="main"&&<S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
+                    {O==="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{ce}
                         </C>
                       </S>}
                   </S>
                   <C style={{fontFamily:D.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:1}}numberOfLines={1}>
-                    {L==="main"?"Manage modules and preferences":"Configure module parameters"}
+                    {O==="main"?"Manage modules and preferences":"Configure module parameters"}
                   </C>
-                </S>:Y?null:<S style={{flexDirection:"row",alignItems:"center",gap:e?10:12,flex:1,minWidth:0,marginRight:4}}>
-                  <Ze size={qe}customIcon={Ce}/>
-                  <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">
-                        {tt()}
-                      </C>
-                      <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>
-                      {te&&<Se hitSlop={10}onPress={()=>oe(!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}}>
-                          <se.View style={{width:5,height:5,borderRadius:2.5,backgroundColor:t.white,opacity:He,transform:[{scale:Ae}]}}/>
-                          {!e&&<C style={{fontFamily:D.interBold,fontSize:8.5,lineHeight:11,color:t.white,letterSpacing:.3}}>
-                              UPDATE
-                            </C>}
-                          <Pt size={e?8:9}color={t.white}/>
-                        </Se>}
-                    </S>
+                </S>:ne?null:<S style={{flexDirection:"row",alignItems:"center",gap:e?8:10,flex:1,minWidth:0,marginRight:4}}>
+                  <Ct size={e?44:U?46:48}/>
+                  <S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
+                    
+                    <C style={[i.headerTitle,{fontFamily:D.interBold,fontWeight:"700",fontSize:e?13:U?13.5:14.5,lineHeight:e?17:U?18:19.5,color:t.white,letterSpacing:-.2,paddingBottom:0}]}numberOfLines={1}ellipsizeMode="tail">
+                      react-native-inapp-inspector
+                    </C>
 
                     
-                    <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}}>
-                        {de.OS==="ios"?<Mt color={`${t.white}E6`}size={e?9.5:10.5}/>:<Ht 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">
-                          {Fe}
+                    <S style={{flexDirection:"row",alignItems:"center",gap:4.5,minWidth:0,marginTop:1.5}}>
+                      
+                      <_ onPress={()=>{A("light"),me(!0)}}hitSlop={6}accessible={!0}accessibilityRole="button"accessibilityLabel={I("settings.general.selectLanguage","Select Language")}style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}24`,borderRadius:5,paddingHorizontal:5.5,paddingVertical:2,gap:3.5,borderWidth:1,borderColor:`${t.white}38`,flexShrink:0}}>
+                        <C style={{fontSize:9,lineHeight:11}}>
+                          {fe?.flag||"\u{1F310}"}
+                        </C>
+                        <C style={{fontFamily:D.interBold,fontSize:8.5,lineHeight:11,color:t.white,letterSpacing:.2}}numberOfLines={1}>
+                          {fe?.code?.toUpperCase()||"EN"}
+                        </C>
+                        <Ve size={6.5}color={`${t.white}CC`}/>
+                      </_>
+
+                      
+                      <S style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}1F`,borderRadius:5,paddingHorizontal:5.5,paddingVertical:2,gap:3.5,borderWidth:1,borderColor:`${t.white}2E`,flexShrink:1,minWidth:0}}>
+                        {de.OS==="ios"?<Ht color={`${t.white}E6`}size={9}/>:<At color={`${t.white}E6`}size={9}/>}
+                        <C style={{fontFamily:D.interMedium,fontSize:8.5,lineHeight:11,color:`${t.white}EB`,letterSpacing:.1}}numberOfLines={1}ellipsizeMode="tail">
+                          {Qe}
                         </C>
                       </S>
 
-                      <Se onPress={()=>{te?oe(!0):Qe.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}}>
-                        <At 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}>
+                      
+                      <Se onPress={()=>{te?ae(!0):Ye.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{})}}style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}1F`,borderRadius:5,paddingHorizontal:6,paddingVertical:2,gap:3.5,borderWidth:1,borderColor:`${t.white}2E`,flexShrink:0}}>
+                        <Ot size={9}color={t.npmRedLight}/>
+                        <C style={{fontFamily:D.interMedium,fontSize:8.5,lineHeight:11,color:`${t.white}EB`,letterSpacing:.1}}>
                           v{ce}
                         </C>
-                        {te&&<C style={{fontFamily:D.interBold,fontSize:8.5,color:t.warningAmber}}>
+                        {te&&<C style={{fontFamily:D.interBold,fontSize:8,color:t.warningAmber}}>
                             ●
                           </C>}
                       </Se>
+
+                      
+                      {te&&<Se hitSlop={10}onPress={()=>ae(!0)}style={{flexDirection:"row",alignItems:"center",backgroundColor:t.warningAmber,borderRadius:5,paddingHorizontal:4.5,paddingVertical:1.5,gap:3,shadowColor:t.warningAmber,shadowOffset:{width:0,height:1.5},shadowOpacity:.35,shadowRadius:3,elevation:3,flexShrink:0}}>
+                          <Xe.View style={{width:4.5,height:4.5,borderRadius:2.25,backgroundColor:t.white,opacity:Ae,transform:[{scale:Oe}]}}/>
+                          {!e&&<C style={{fontFamily:D.interBold,fontSize:8,lineHeight:10,color:t.white,letterSpacing:.3}}>
+                              UPDATE
+                            </C>}
+                          <Et size={e?7.5:8.5}color={t.white}/>
+                        </Se>}
                     </S>
                   </S>
                 </S>}
             </S>
 
-            {K&&<S style={[i.headerCenter,{paddingHorizontal:e?2:6}]}>
-                {k==="apis"&&I!=null?<S style={i.headerDetailCenter}>
+            {X&&<S style={[i.headerCenter,{paddingHorizontal:e?2:6}]}>
+                {V==="apis"&&R!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
-                      <S style={[i.headerMethodBadge,{backgroundColor:et[I.method]??t.grayText,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                      <S style={[i.headerMethodBadge,{backgroundColor:xt[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">
-                        {Oe}
+                        {Fe}
                       </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:`${ge(I.status)}26`,borderWidth:1,borderColor:`${ge(I.status)}55`}}>
-                        <S style={[i.headerStatusDot,{backgroundColor:ge(I.status),width:e?6:7,height:e?6:7}]}/>
+                      <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${ue(R.status)}26`,borderWidth:1,borderColor:`${ue(R.status)}55`}}>
+                        <S style={[i.headerStatusDot,{backgroundColor:ue(R.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"}
+                          {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`}}>
-                        <Z color={t.white}size={e?10:11}/>
+                        <G 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`}}>
-                          <$t color={t.white}size={e?10:11}/>
+                      {R.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}/>
                           <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                            {xe(I.response)}
+                            {xe(R.response)}
                           </C>
                         </S>}
                     </S>
-                  </S>:k==="analytics"&&M!=null?<S style={i.headerDetailCenter}>
+                  </S>:V==="analytics"&&B!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
-                      <S style={[i.headerMethodBadge,{backgroundColor:M.source==="firebase"?`${t.firebaseOrange}4D`:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                      <S style={[i.headerMethodBadge,{backgroundColor:B.source==="firebase"?`${t.firebaseOrange}4D`:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
                         <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
-                          {M.source==="firebase"?"FB":"MAN"}
+                          {B.source==="firebase"?"FB":"MAN"}
                         </C>
                       </S>
                       <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        #{M.id!=null?M.id+1:1}{" "}
-                        {M.name}
+                        #{B.id!=null?B.id+1:1}{" "}
+                        {B.name}
                       </C>
                     </S>
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
-                      <S style={[i.headerStatusDot,{backgroundColor:M.source==="firebase"?t.firebaseOrange:t.purple,width:e?6:7,height:e?6:7}]}/>
+                      <S style={[i.headerStatusDot,{backgroundColor:B.source==="firebase"?t.firebaseOrange:t.purple,width:e?6:7,height:e?6:7}]}/>
                       <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                        {Object.keys(M.params).length} param
-                        {Object.keys(M.params).length!==1?"s":""}
+                        {Object.keys(B.params).length} param
+                        {Object.keys(B.params).length!==1?"s":""}
                         {" \xB7 "}
-                        {M.source}
+                        {B.source}
                       </C>
                     </S>
-                  </S>:k==="logs"&&A!=null?<S style={i.headerDetailCenter}>
+                  </S>:V==="logs"&&L!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
-                      <S style={[i.headerMethodBadge,{backgroundColor:A.type==="error"?`${t.errorColor}4D`:A.type==="warn"?`${t.lightOrange}4D`:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                      <S style={[i.headerMethodBadge,{backgroundColor:L.type==="error"?`${t.errorColor}4D`:L.type==="warn"?`${t.lightOrange}4D`:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
                         <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
-                          {A.type.toUpperCase()}
+                          {L.type.toUpperCase()}
                         </C>
                       </S>
                       <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        #{A.id!=null?A.id+1:1}{" "}
+                        #{L.id!=null?L.id+1:1}{" "}
                         console.
-                        {A.sourceMethod||A.type||"log"}
+                        {L.sourceMethod||L.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`}}>
-                        <Z color={t.white}size={e?10:11}/>
+                        <G color={t.white}size={e?10:11}/>
                         <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                          {it(A.timestamp)}
+                          {zt(L.timestamp)}
                         </C>
                       </S>
                     </S>
-                  </S>:k==="redux"&&F!=null?(()=>{const T=ke?.[F],z=T&&typeof T=="object"?Object.keys(T).length:typeof T<"u"?1:0,le=xe(T),ye=$e[F];return<S style={i.headerDetailCenter}>
+                  </S>:V==="redux"&&W!=null?(()=>{const T=Le?.[W],x=T&&typeof T=="object"?Object.keys(T).length:typeof T<"u"?1:0,se=xe(T),we=ve[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}]}>
@@ -164,7 +173,7 @@ import H,{useMemo as ne}from"react";import{Alert as we,Animated as se,Linking as
                             </C>
                           </S>
                           <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                            {F}
+                            {W}
                           </C>
                         </S>
                         <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
@@ -176,27 +185,27 @@ import H,{useMemo as ne}from"react";import{Alert as we,Animated as se,Linking as
                             •
                           </C>
                           <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                            {z} keys
+                            {x} keys
                           </C>
                           <C style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                             •
                           </C>
                           <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                            {le}
+                            {se}
                           </C>
-                          {ye?.timestamp&&<>
+                          {we?.timestamp&&<>
                               <C style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                                 •
                               </C>
                               <S style={{flexDirection:"row",alignItems:"center",gap:3}}>
-                                <Z color={t.white}size={e?9:10}/>
+                                <G color={t.white}size={e?9:10}/>
                                 <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                                  {ye.timestamp}
+                                  {we.timestamp}
                                 </C>
                               </S>
                             </>}
                         </S>
-                      </S>})():k==="redux"&&_!=null?<S style={i.headerDetailCenter}>
+                      </S>})():V==="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}]}>
                         <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
@@ -204,134 +213,135 @@ import H,{useMemo as ne}from"react";import{Alert as we,Animated as se,Linking as
                         </C>
                       </S>
                       <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        {_.type}
+                        {q.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}]}>
-                        {_.timestamp||"Dispatched"}
+                        {q.timestamp||"Dispatched"}
                       </C>
                     </S>
-                  </S>:k==="crash"&&$!=null?<S style={i.headerDetailCenter}>
+                  </S>:V==="crash"&&M!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
-                      <S style={[i.headerMethodBadge,{backgroundColor:$.isFatal?t.red600:t.amber600,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
+                      <S style={[i.headerMethodBadge,{backgroundColor:M.isFatal?t.red600:t.amber600,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
                         <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
-                          {$.isFatal?"FATAL":$.type.toUpperCase()}
+                          {M.isFatal?"FATAL":M.type.toUpperCase()}
                         </C>
                       </S>
                       <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        {$.name||$.message}
+                        {M.name||M.message}
                       </C>
                     </S>
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
-                      <S style={[i.headerStatusDot,{backgroundColor:$.isFatal?t.red600:t.amber500,width:e?6:7,height:e?6:7}]}/>
+                      <S style={[i.headerStatusDot,{backgroundColor:M.isFatal?t.red600:t.amber500,width:e?6:7,height:e?6:7}]}/>
                       <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                        {$.timeStr||new Date($.timestamp).toLocaleTimeString()}
+                        {M.timeStr||new Date(M.timestamp).toLocaleTimeString()}
                       </C>
-                      {$.deviceInfo?.platform&&<>
+                      {M.deviceInfo?.platform&&<>
                           <C style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                             •
                           </C>
                           <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                            {$.deviceInfo.platform.toUpperCase()}
+                            {M.deviceInfo.platform.toUpperCase()}
                           </C>
                         </>}
                     </S>
-                  </S>:k==="push"&&R!=null?<S style={i.headerDetailCenter}>
+                  </S>:V==="push"&&k!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
                       <S style={[i.headerMethodBadge,{backgroundColor:t.brandPurple,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
                         <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
-                          {(R.source||"PUSH").toUpperCase()}
+                          {(k.source||"PUSH").toUpperCase()}
                         </C>
                       </S>
                       <C style={[i.headerDetailTitle,{fontSize:e?13:14.5,flex:1,minWidth:0}]}numberOfLines={1}ellipsizeMode="tail">
-                        {R.title||R.body||"Push Notification"}
+                        {k.title||k.body||"Push Notification"}
                       </C>
                     </S>
                     <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:`${R.appState==="foreground"?t.greenColor:R.appState==="background"?t.amber500:t.brandPurple}26`,borderWidth:1,borderColor:`${R.appState==="foreground"?t.greenColor:R.appState==="background"?t.amber500:t.brandPurple}55`}}>
-                        <S style={[i.headerStatusDot,{backgroundColor:R.appState==="foreground"?t.greenColor:R.appState==="background"?t.amber500:t.brandPurple,width:e?6:7,height:e?6:7}]}/>
+                      <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2,borderRadius:20,backgroundColor:`${k.appState==="foreground"?t.greenColor:k.appState==="background"?t.amber500:t.brandPurple}26`,borderWidth:1,borderColor:`${k.appState==="foreground"?t.greenColor:k.appState==="background"?t.amber500:t.brandPurple}55`}}>
+                        <S style={[i.headerStatusDot,{backgroundColor:k.appState==="foreground"?t.greenColor:k.appState==="background"?t.amber500:t.brandPurple,width:e?6:7,height:e?6:7}]}/>
                         <C style={[i.headerSubTitle,{fontFamily:D.interBold,fontSize:e?9.5:10.5}]}>
-                          {R.appState?R.appState.toUpperCase():"DELIVERED"}
+                          {k.appState?k.appState.toUpperCase():"DELIVERED"}
                         </C>
                       </S>
                       <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2,borderRadius:20,backgroundColor:`${t.white}29`}}>
-                        <Z color={t.white}size={e?9.5:10.5}/>
+                        <G color={t.white}size={e?9.5:10.5}/>
                         <C style={[i.headerSubTitle,{fontSize:e?9.5:10.5}]}>
-                          {rt(R.timestamp)}
+                          {Ce(k.timestamp)}
+                        </C>
+                      </S>
+                    </S>
+                  </S>:V==="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}]}>
+                        <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
+                          {z.client==="socket.io"||z.url.includes("/socket.io")?"SIO":z.url.startsWith("wss://")?"WSS":"WS"}
+                        </C>
+                      </S>
+                      <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
+                        {z.url}
+                      </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:`${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}]}/>
+                        <C style={[i.headerSubTitle,{fontFamily:D.interBold,fontSize:e?10:11}]}>
+                          {(z.status||"open").toUpperCase()}
+                        </C>
+                      </S>
+                      <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${t.white}29`}}>
+                        <G color={t.white}size={e?10:11}/>
+                        <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                          {z.duration!=null?`${z.duration}ms`:Ce(z.startTime)}
+                        </C>
+                      </S>
+                      <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}/>
+                        <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                          {z.frames?.length||0} frames · {Vt((z.totalBytesSent||0)+(z.totalBytesReceived||0))}
                         </C>
                       </S>
                     </S>
                   </S>:null}
               </S>}
 
-            <S style={[i.headerRight,{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",flexShrink:0,gap:e?4:6}]}>
+            <S style={[i.headerRight,{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",flexShrink:0,gap:e?4:5}]}>
               
-              <Te onPress={Pe||pe}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={V("common.minimize","Minimize")}style={[i.closeButtonSquare,{width:B,height:B,borderRadius:e?6:7,backgroundColor:"rgba(56, 189, 248, 0.22)",borderColor:"rgba(125, 211, 252, 0.40)",borderWidth:1}]}>
-                <It size={e?14:16}color={t.white}/>
-              </Te>
+              {Y?<_ 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:Ee}])}}hitSlop={15}style={[i.closeButtonSquare,{width:v,height:v,borderRadius:e?6:7,backgroundColor:"rgba(245, 158, 11, 0.26)",borderColor:"rgba(252, 211, 77, 0.45)",borderWidth:1}]}>
+                  <Pt color={t.white}size={e?12:14}/>
+                </_>:ne?null:<>
+                  
+                  <_ accessible={!0}accessibilityRole="button"accessibilityLabel={oe?"Disable peek-through":"Enable peek-through"}onPress={()=>{A("light"),je(T=>!T)}}hitSlop={15}style={[i.closeButtonSquare,{width:v,height:v,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}/>
+                  </_>
 
-              
-              {X?<P onPress={()=>{we.alert("Reset All Settings","This restores all module visibility and UI preferences to defaults. Continue?",[{text:"Cancel",style:"cancel"},{text:"Reset",style:"destructive",onPress:Be}])}}hitSlop={15}style={[i.closeButtonSquare,{width:B,height:B,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}/>
-                </P>:Y?null:<P accessible={!0}accessibilityRole="button"accessibilityLabel="Settings"onPress={()=>ie("main")}hitSlop={15}style={[i.closeButtonSquare,{width:B,height:B,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}/>
-                </P>}
+                  
+                  <_ accessible={!0}accessibilityRole="button"accessibilityLabel="Settings"onPress={()=>ie("main")}hitSlop={15}style={[i.closeButtonSquare,{width:v,height:v,borderRadius:e?6:7,backgroundColor:"rgba(168, 85, 247, 0.28)",borderColor:"rgba(216, 180, 254, 0.45)",borderWidth:1}]}>
+                    <Bt color={t.white}size={e?12:14}/>
+                  </_>
+                </>}
 
               
-              <Te onPress={pe}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={V("common.close","Close")}style={[i.closeButtonSquare,{width:B,height:B,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 onPress={We||he}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={I("common.minimize","Minimize")}style={[i.closeButtonSquare,{width:v,height:v,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>
-            </S>
-          </S>
-
-          
-          {!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}}>
-              
-              <P onPress={Ne}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`}}>
-                <Lt 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}}>
-                  {V("header.photo")}
-                </C>
-              </P>
 
               
-              <P onPress={je}style={{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:v?`${t.red500}33`:`${t.white}24`,paddingHorizontal:e?9:11,paddingVertical:e?5:6,borderRadius:7,borderWidth:1,borderColor:v?t.red500:`${t.white}33`}}>
-                {v?<se.View style={{width:6,height:6,borderRadius:3,backgroundColor:t.red500}}/>:<Et size={e?12:13}color={t.white}/>}
-                <C style={{fontFamily:D.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:v?t.red300:t.white}}>
-                  {v?`${V("header.rec")} ${_e(Ue)}`:V("header.record")}
-                </C>
-              </P>
+              <Te onPress={he}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={I("common.close","Close")}style={[i.closeButtonSquare,{width:v,height:v,borderRadius:e?6:7,backgroundColor:"rgba(244, 63, 94, 0.28)",borderColor:"rgba(251, 113, 133, 0.48)",borderWidth:1}]}>
+                <Lt size={e?12:14}/>
+              </Te>
             </S>
-
-            <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
-              
-                <P accessible={!0}accessibilityRole="button"accessibilityLabel={V("common.clearAll")}onPress={()=>{we.alert(V("header.clearEverythingTitle"),V("header.clearEverythingMessage"),[{text:V("common.cancel"),style:"cancel"},{text:V("common.clearAll"),onPress:ve,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`}}>
-                  <se.View style={{transform:[{rotate:he.interpolate({inputRange:[0,1],outputRange:["0deg","-25deg"]})},{scale:he.interpolate({inputRange:[0,.5,1],outputRange:[1,1.25,1]})}]}}>
-                    <Vt color={t.white}size={e?12:13}/>
-                  </se.View>
-                  <C style={{fontFamily:D.interSemiBold,fontSize:e?10.5:11.5,lineHeight:e?13:14,color:t.white}}>
-                    {V("common.clearAll")}
-                  </C>
-                </P>
-
-                
-                <P accessible={!0}accessibilityRole="button"accessibilityLabel={V("header.about")}onPress={()=>{ue(!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`}}>
-                  <Ot 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}}>
-                    {V("header.about")}
-                  </C>
-                </P>
-              </S>
-            </S>}
+          </S>
         </S>
       </S>
 
       
-      <St visible={We}latestVersion={Me}onClose={()=>oe(!1)}/>
+      <Rt visible={Ge}latestVersion={He}onClose={()=>ae(!1)}/>
+
+      
+      <Mt visible={qe}onClose={()=>me(!1)}/>
 
       
-      <Tt item={fe}visible={!!fe}onClose={()=>N(null)}onDelete={async T=>{await W.deleteMedia(T.uri),U?.().catch(()=>{}),N(null)}}onConvertToGif={async T=>{const z=await W.convertToGif(T.uri,{fps:12,width:480});z&&(U?.().catch(()=>{}),N({id:`anim_${z.timestamp}.gif`,type:"gif",format:"gif",uri:z.uri,filename:z.uri.split("/").pop()||`anim_${z.timestamp}.gif`,sizeBytes:z.sizeBytes,timestamp:z.timestamp,durationMs:z.durationMs}))}}/>
-    </>});export default Ft;
+      <It item={be}visible={!!be}onClose={()=>N(null)}onDelete={async T=>{await E.deleteMedia(T.uri),F?.().catch(()=>{}),N(null)}}onConvertToGif={async T=>{const x=await E.convertToGif(T.uri,{fps:12,width:480});x&&(F?.().catch(()=>{}),N({id:`anim_${x.timestamp}.gif`,type:"gif",format:"gif",uri:x.uri,filename:x.uri.split("/").pop()||`anim_${x.timestamp}.gif`,sizeBytes:x.sizeBytes,timestamp:x.timestamp,durationMs:x.durationMs}))}}/>
+    </>});export default Nt;

package/dist/esm/components/Inspector/LanguageSelectorModal.d.ts

@@ -12,4 +12,4 @@ interface LanguageSelectorModalProps {
     onClose: () => void;
 }
 export declare const LanguageSelectorModal: React.MemoExoticComponent<({ visible, onClose }: LanguageSelectorModalProps) => React.JSX.Element>;
-export {};
+export default LanguageSelectorModal;