react-native-inapp-inspector 2.5.10 → 2.5.12

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

@@ -1,330 +1,338 @@
-import B,{useMemo as Z}from"react";import{Alert as _e,Linking as qe,Platform as le,Pressable as Qe,StatusBar as Je,Text as C,TouchableOpacity as Se,useWindowDimensions as Ke,View as S}from"react-native";import Xe from"react-native-linear-gradient";import{useInspector as Ye}from"./InspectorContext";import G 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 ne}from"../../constants";import{getStatusColor as se,formatTime as tt,formatTimeShort as Te,getSize as Ce,formatByteSize as it,getAppVersionAndBuild as rt,showToast as v}from"../../helpers";import{triggerNativeHaptic as P}from"../../native/NativeInspector";import{ScreenCapture as E,generateCaptureId as de}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,EyeIcon as Lt}from"../NetworkIcons";import{useTranslation as Ht,SUPPORTED_LANGUAGES as ke,getLanguage as Ot}from"../../i18n";const vt=B.memo(()=>{const{t:R,language:ce}=Ht(),{modalHeightPercent:ee,appIcon:Pt,selected:k,setSelected:Ie,selectedEvent:$,setSelectedEvent:Re,selectedLog:L,setSelectedLog:Me,selectedReduxSlice:F,setSelectedReduxSlice:$e,selectedReduxAction:q,setSelectedReduxAction:Be,reduxState:Le,reduxLastActionMap:He,clearAnim:At,runClearAllWithAnimation:Wt,settingsPage:A,setSettingsPage:te,isAboutOpen:ie,setIsAboutOpen:Oe,resetToDefaults:ve,closeModal:ue,minimizeInspector:Pe,detailTitle:Ae,activeTab:V,environment:ge,selectedCrash:M,setSelectedCrash:We,selectedPush:D,setSelectedPush:Ee,selectedSocket:z,setSelectedSocket:Fe,refreshMediaCount:U,peekMode:re,setPeekMode:Ue,previewMediaItem:he,setPreviewMediaItem:N}=Ye(),{width:Q}=Ke(),e=Q<360,j=Q<400,[Et,Ft]=B.useState(!1),[Ne,pe]=B.useState(!1),[je]=B.useState(()=>rt().formatted),me=Z(()=>{const T=ce||Ot();return ke.find(x=>x.code===T)||ke[0]},[ce]),[J,K]=B.useState(!1),[Ut,oe]=B.useState(0),W=B.useRef(null);B.useEffect(()=>{E.isRecording().then(T=>{K(T)}).catch(()=>{})},[]),B.useEffect(()=>(J?(oe(0),W.current=setInterval(()=>{oe(T=>T+1)},1e3)):(W.current&&(clearInterval(W.current),W.current=null),oe(0)),()=>{W.current&&clearInterval(W.current)}),[J]);const Nt=B.useCallback(async()=>{try{P("light");const T=await E.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(T){P("success");const x=de("screenshot",T.format||"png"),O={id:x,type:"image",format:T.format,uri:T.uri,filename:T.uri.split("/").pop()||x,sizeBytes:T.sizeBytes,timestamp:T.timestamp,width:T.width,height:T.height};N(O),U?.().catch(()=>{}),v(R("header.screenshotCaptured"))}else v(R("header.screenshotFailed"))}catch{v(R("header.screenshotError"))}},[U,R]),jt=B.useCallback(async()=>{try{if(J){P("medium");const T=await E.stopRecording();if(K(!1),T){P("success");const x=de("video",T.format),O={id:x,type:T.format==="gif"?"gif":"video",format:T.format,uri:T.uri,filename:T.uri.split("/").pop()||x,sizeBytes:T.sizeBytes,timestamp:T.timestamp,durationMs:T.durationMs,width:T.width,height:T.height,hasAudio:T.hasAudio};N(O),U?.().catch(()=>{}),v(R("header.recordingSaved",{duration:(T.durationMs/1e3).toFixed(1)}))}}else P("medium"),await E.startRecording({fps:24,audioSource:"none"})?(K(!0),v(R("header.recordingStarted"))):v(R("header.recordingStartFailed"))}catch{v(R("header.recordingError")),K(!1)}},[J,R]),Gt=T=>{const x=Math.floor(T/60),O=T%60;return`${x.toString().padStart(2,"0")}:${O.toString().padStart(2,"0")}`},_t=Z(()=>{const T=(ge||(__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}},[ge]),X=V==="apis"&&k!=null||V==="analytics"&&$!=null||V==="logs"&&L!=null||V==="redux"&&(F!=null||q!=null)||V==="crash"&&M!=null||V==="push"&&D!=null||V==="socket"&&z!=null,Y=A!==null,ae=X||Y||ie,Ge=Z(()=>{switch(A){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"}},[A]),fe=Z(()=>le.OS==="ios"?ee>=98?Q>=390?50:44:0:le.OS==="android"&&ee>=98?Je.currentHeight||24:0,[ee,Q]),H=e?25:j?26.5:27,qt=e?36:j?38:40;return<>
-      <S style={[i.headerGradient,{minHeight:(e?44:48)+fe}]}>
+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 E 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 F,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:D,language:ue}=vt(),{modalHeightPercent:te,appIcon:Pt,selected:R,setSelected:Ie,selectedEvent:B,setSelectedEvent:Me,selectedLog:W,setSelectedLog:$e,selectedReduxSlice:U,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:k,setSelectedPush:Ee,selectedSocket:z,setSelectedSocket:Fe,refreshMediaCount:N,peekMode:oe,setPeekMode:Ue,previewMediaItem:me,setPreviewMediaItem:j}=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),A=L.useRef(null);L.useEffect(()=>{F.isRecording().then(w=>{X(w)}).catch(()=>{})},[]),L.useEffect(()=>(K?(le(0),A.current=setInterval(()=>{le(w=>w+1)},1e3)):(A.current&&(clearInterval(A.current),A.current=null),le(0)),()=>{A.current&&clearInterval(A.current)}),[K]);const jt=L.useCallback(async()=>{try{H("light");const w=await F.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};j(v),N?.().catch(()=>{}),O(D("header.screenshotCaptured"))}else O(D("header.screenshotFailed"))}catch{O(D("header.screenshotError"))}},[N,D]),Gt=L.useCallback(async()=>{try{if(K){H("medium");const w=await F.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};j(v),N?.().catch(()=>{}),O(D("header.recordingSaved",{duration:(w.durationMs/1e3).toFixed(1)}))}}else H("medium"),await F.startRecording({fps:24,audioSource:"none"})?(X(!0),O(D("header.recordingStarted"))):O(D("header.recordingStartFailed"))}catch{O(D("header.recordingError")),X(!1)}},[K,D]),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"&&(U!=null||Q!=null)||V==="crash"&&M!=null||V==="push"&&k!=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}]}>
         
         <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:fe,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}}>
-              {ae&&<G onPress={()=>{if(ie){Oe(!1);return}if(Y){te(A==="main"?null:"main");return}Ie(null),Re(null),Me(null),$e(null),Be(null),We(null),Ee(null),Fe(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`}}/>
+        <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={{flexDirection:"row",alignItems:"center",gap:e?6:8,flex:Y?void 0:1,flexShrink:Y?0:1,minWidth:0}}>
+              {ae&&<E 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}}>
+                  <S style={{position:"absolute",width:e?38:42,height:e?38:42,borderRadius:21,backgroundColor:`${t.white}1A`}}/>
                   <Vt/>
-                </G>}
+                </E>}
 
-              {ie?<S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
+              {re?<S style={{gap:2.5,flex:1,minWidth:0,marginRight:6,justifyContent:"center"}}>
                   <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                    <C style={{fontFamily:I.interBold,fontSize:e?15:16.5,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
+                    <T style={{fontFamily:I.interBold,fontSize:e?14.5:16,lineHeight:e?18:20,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
                       About & Specs
-                    </C>
+                    </T>
                     <S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
-                      <C style={{fontFamily:I.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
-                        v{ne}
-                      </C>
+                      <T style={{fontFamily:I.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
+                        v{se}
+                      </T>
                     </S>
                   </S>
-                  <C style={{fontFamily:I.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:1}}numberOfLines={1}>
+                  <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">
                     Package info, runtime specs & diagnostic payload
-                  </C>
-                </S>:Y?<S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
+                  </T>
+                </S>:Z?<S style={{gap:2.5,flex:1,minWidth:0,marginRight:6,justifyContent:"center"}}>
                   <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                    <C style={{fontFamily:I.interBold,fontSize:e?15:16.5,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
+                    <T style={{fontFamily:I.interBold,fontSize:e?14.5:16,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
                       {Ge}
-                    </C>
-                    {A==="main"&&<S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
-                        <C style={{fontFamily:I.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
-                          v{ne}
-                        </C>
+                    </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}}>
+                          v{se}
+                        </T>
                       </S>}
                   </S>
-                  <C style={{fontFamily:I.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:1}}numberOfLines={1}>
-                    {A==="main"?"Manage modules and preferences":"Configure module parameters"}
-                  </C>
-                </S>:ae?null:<S style={{flexDirection:"row",alignItems:"center",gap:e?8:10,flex:1,minWidth:0,marginRight:4}}>
-                  <Ze size={e?44:j?46:48}/>
+                  <T style={{fontFamily:I.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"}}>
                     
-                    <C style={[i.headerTitle,{fontFamily:I.interBold,fontWeight:"700",fontSize:e?13:j?13.5:14.5,lineHeight:e?17:j?18:19.5,color:t.white,letterSpacing:-.2,paddingBottom:0}]}numberOfLines={1}ellipsizeMode="tail">
+                    <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
-                    </C>
+                    </T>
 
                     
-                    <S style={{flexDirection:"row",alignItems:"center",gap:4.5,minWidth:0,marginTop:1.5}}>
+                    <S style={{flexDirection:"row",alignItems:"center",gap:4,minWidth:0,marginTop:2,flexWrap:"nowrap",overflow:"hidden"}}>
                       
-                      <G onPress={()=>{P("light"),pe(!0)}}hitSlop={6}accessible={!0}accessibilityRole="button"accessibilityLabel={R("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}}>
-                        <Ct code={me?.code||"en"}size={9.5}borderRadius={2}/>
-                        <C style={{fontFamily:I.interBold,fontSize:8.5,lineHeight:11,color:t.white,letterSpacing:.2}}numberOfLines={1}>
-                          {me?.code?.toUpperCase()||"EN"}
-                        </C>
-                        <Ve size={6.5}color={`${t.white}CC`}/>
-                      </G>
+                      <E onPress={()=>{H("light"),fe(!0)}}hitSlop={6}accessible={!0}accessibilityRole="button"accessibilityLabel={D("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}>
+                          {be?.code?.toUpperCase()||"EN"}
+                        </T>
+                        <Ve size={6}color={`${t.white}CC`}/>
+                      </E>
 
                       
-                      <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}}>
-                        {le.OS==="ios"?<Rt color={`${t.white}E6`}size={9}/>:<Mt color={`${t.white}E6`}size={9}/>}
-                        <C style={{fontFamily:I.interMedium,fontSize:8.5,lineHeight:11,color:`${t.white}EB`,letterSpacing:.1}}numberOfLines={1}ellipsizeMode="tail">
+                      <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">
                           {je}
-                        </C>
+                        </T>
                       </S>
 
                       
-                      <Qe onPress={()=>{qe.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}}>
-                        <$t size={9}color={t.npmRedLight}/>
-                        <C style={{fontFamily:I.interMedium,fontSize:8.5,lineHeight:11,color:`${t.white}EB`,letterSpacing:.1}}>
-                          v{ne}
-                        </C>
+                      <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}}>
+                          v{se}
+                        </T>
                       </Qe>
                     </S>
                   </S>
                 </S>}
             </S>
 
-            {X&&<S style={[i.headerCenter,{paddingHorizontal:e?2:6}]}>
-                {V==="apis"&&k!=null?<S style={i.headerDetailCenter}>
+            {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}>
                     <S style={i.headerDetailRow}>
-                      <S style={[i.headerMethodBadge,{backgroundColor:et[k.method]??t.grayText,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
-                        <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
-                          {k.method}
-                        </C>
+                      <S style={[i.headerMethodBadge,{backgroundColor:et[R.method]??t.grayText,paddingHorizontal:e?5:6,paddingVertical:e?2:3,flexShrink:0}]}>
+                        <T style={[i.headerMethodText,{fontSize:e?9:10}]}>
+                          {R.method}
+                        </T>
                       </S>
-                      <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        {Ae}
-                      </C>
+                      <T style={[i.headerDetailTitle,{fontSize:e?13:14.5,flex:1,minWidth:0,flexShrink:1}]}numberOfLines={1}ellipsizeMode="middle">
+                        {Pe}
+                      </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:`${se(k.status)}26`,borderWidth:1,borderColor:`${se(k.status)}55`}}>
-                        <S style={[i.headerStatusDot,{backgroundColor:se(k.status),width:e?6:7,height:e?6:7}]}/>
-                        <C style={[i.headerSubTitle,{fontFamily:I.interBold,fontSize:e?10:11}]}>
-                          {k.status===0?"Failed":k.status??"Pending"}
-                        </C>
+                      <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"}
+                        </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}/>
-                        <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                          {k.duration!=null?`${k.duration}ms`:"\u2014"}
-                        </C>
+                        <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                          {R.duration!=null?`${R.duration}ms`:"\u2014"}
+                        </T>
                       </S>
-                      {k.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`}}>
                           <De color={t.white}size={e?10:11}/>
-                          <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                            {Ce(k.response)}
-                          </C>
+                          <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                            {ze(R.response)}
+                          </T>
                         </S>}
                     </S>
-                  </S>:V==="analytics"&&$!=null?<S style={i.headerDetailCenter}>
+                  </S>:V==="analytics"&&B!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
-                      <S style={[i.headerMethodBadge,{backgroundColor:$.source==="firebase"?`${t.firebaseOrange}4D`:`${t.purple}4D`,paddingHorizontal:e?5:6,paddingVertical:e?2:3}]}>
-                        <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
-                          {$.source==="firebase"?"FB":"MAN"}
-                        </C>
+                      <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}]}>
+                          {B.source==="firebase"?"FB":"MAN"}
+                        </T>
                       </S>
-                      <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        #{$.id!=null?$.id+1:1}{" "}
-                        {$.name}
-                      </C>
+                      <T style={[i.headerDetailTitle,{fontSize:e?13:14.5,flex:1,minWidth:0,flexShrink:1}]}numberOfLines={1}ellipsizeMode="middle">
+                        #{B.id!=null?B.id+1:1}{" "}
+                        {B.name}
+                      </T>
                     </S>
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
-                      <S style={[i.headerStatusDot,{backgroundColor:$.source==="firebase"?t.firebaseOrange:t.purple,width:e?6:7,height:e?6:7}]}/>
-                      <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                        {Object.keys($.params).length} param
-                        {Object.keys($.params).length!==1?"s":""}
+                      <S style={[i.headerStatusDot,{backgroundColor:B.source==="firebase"?t.firebaseOrange:t.purple,width:e?6:7,height:e?6:7}]}/>
+                      <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                        {Object.keys(B.params).length} param
+                        {Object.keys(B.params).length!==1?"s":""}
                         {" \xB7 "}
-                        {$.source}
-                      </C>
+                        {B.source}
+                      </T>
                     </S>
-                  </S>:V==="logs"&&L!=null?<S style={i.headerDetailCenter}>
+                  </S>:V==="logs"&&W!=null?<S style={i.headerDetailCenter}>
                     <S style={i.headerDetailRow}>
-                      <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}]}>
-                          {L.type.toUpperCase()}
-                        </C>
+                      <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}]}>
+                          {W.type.toUpperCase()}
+                        </T>
                       </S>
-                      <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        #{L.id!=null?L.id+1:1}{" "}
+                      <T style={[i.headerDetailTitle,{fontSize:e?13:14.5,flex:1,minWidth:0,flexShrink:1}]}numberOfLines={1}ellipsizeMode="middle">
+                        #{W.id!=null?W.id+1:1}{" "}
                         console.
-                        {L.sourceMethod||L.type||"log"}
-                      </C>
+                        {W.sourceMethod||W.type||"log"}
+                      </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:`${t.white}29`}}>
                         <_ color={t.white}size={e?10:11}/>
-                        <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                          {tt(L.timestamp)}
-                        </C>
+                        <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                          {tt(W.timestamp)}
+                        </T>
                       </S>
                     </S>
-                  </S>:V==="redux"&&F!=null?(()=>{const T=Le?.[F],x=T&&typeof T=="object"?Object.keys(T).length:typeof T<"u"?1:0,O=Ce(T),be=He[F];return<S style={i.headerDetailCenter}>
+                  </S>:V==="redux"&&U!=null?(()=>{const w=We?.[U],C=w&&typeof w=="object"?Object.keys(w).length:typeof w<"u"?1:0,v=ze(w),Se=ve[U];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}]}>
+                          <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}]}>
                               SLICE
-                            </C>
+                            </T>
                           </S>
-                          <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                            {F}
-                          </C>
+                          <T style={[i.headerDetailTitle,{fontSize:e?13:14.5,flex:1,minWidth:0,flexShrink:1}]}numberOfLines={1}ellipsizeMode="middle">
+                            {U}
+                          </T>
                         </S>
                         <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
                           <S style={[i.headerStatusDot,{backgroundColor:t.liveGreen,width:e?6:7,height:e?6:7}]}/>
-                          <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                          <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
                             Live
-                          </C>
-                          <C style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
+                          </T>
+                          <T style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                             •
-                          </C>
-                          <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                            {x} keys
-                          </C>
-                          <C style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
+                          </T>
+                          <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                            {C} keys
+                          </T>
+                          <T style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                             •
-                          </C>
-                          <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                            {O}
-                          </C>
-                          {be?.timestamp&&<>
-                              <C style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
+                          </T>
+                          <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                            {v}
+                          </T>
+                          {Se?.timestamp&&<>
+                              <T style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                                 •
-                              </C>
+                              </T>
                               <S style={{flexDirection:"row",alignItems:"center",gap:3}}>
                                 <_ color={t.white}size={e?9:10}/>
-                                <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                                  {be.timestamp}
-                                </C>
+                                <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                                  {Se.timestamp}
+                                </T>
                               </S>
                             </>}
                         </S>
-                      </S>})():V==="redux"&&q!=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}]}>
+                      <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}]}>
                           ACTION
-                        </C>
+                        </T>
                       </S>
-                      <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                        {q.type}
-                      </C>
+                      <T style={[i.headerDetailTitle,{fontSize:e?13:14.5,flex:1,minWidth:0,flexShrink:1}]}numberOfLines={1}ellipsizeMode="middle">
+                        {Q.type}
+                      </T>
                     </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"}
-                      </C>
+                      <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                        {Q.timestamp||"Dispatched"}
+                      </T>
                     </S>
                   </S>:V==="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}]}>
-                        <C style={[i.headerMethodText,{fontSize:e?9:10}]}>
+                      <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}]}>
                           {M.isFatal?"FATAL":M.type.toUpperCase()}
-                        </C>
+                        </T>
                       </S>
-                      <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
+                      <T style={[i.headerDetailTitle,{fontSize:e?13:14.5,flex:1,minWidth:0,flexShrink:1}]}numberOfLines={1}ellipsizeMode="middle">
                         {M.name||M.message}
-                      </C>
+                      </T>
                     </S>
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
                       <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}]}>
+                      <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
                         {M.timeStr||new Date(M.timestamp).toLocaleTimeString()}
-                      </C>
+                      </T>
                       {M.deviceInfo?.platform&&<>
-                          <C style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
+                          <T style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                             •
-                          </C>
-                          <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                          </T>
+                          <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
                             {M.deviceInfo.platform.toUpperCase()}
-                          </C>
+                          </T>
                         </>}
                     </S>
-                  </S>:V==="push"&&D!=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}]}>
-                          {(D.source||"PUSH").toUpperCase()}
-                        </C>
+                      <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}]}>
+                          {(k.source||"PUSH").toUpperCase()}
+                        </T>
                       </S>
-                      <C style={[i.headerDetailTitle,{fontSize:e?13:14.5,flex:1,minWidth:0}]}numberOfLines={1}ellipsizeMode="tail">
-                        {D.title||D.body||"Push Notification"}
-                      </C>
+                      <T style={[i.headerDetailTitle,{fontSize:e?13:14.5,flex:1,minWidth:0,flexShrink:1}]}numberOfLines={1}ellipsizeMode="tail">
+                        {k.title||k.body||"Push Notification"}
+                      </T>
                     </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:`${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}]}/>
-                        <C style={[i.headerSubTitle,{fontFamily:I.interBold,fontSize:e?9.5:10.5}]}>
-                          {D.appState?D.appState.toUpperCase():"DELIVERED"}
-                        </C>
+                      <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}]}/>
+                        <T style={[i.headerSubTitle,{fontFamily:I.interBold,fontSize:e?9.5:10.5}]}>
+                          {k.appState?k.appState.toUpperCase():"DELIVERED"}
+                        </T>
                       </S>
                       <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2,borderRadius:20,backgroundColor:`${t.white}29`}}>
                         <_ color={t.white}size={e?9.5:10.5}/>
-                        <C style={[i.headerSubTitle,{fontSize:e?9.5:10.5}]}>
-                          {Te(D.timestamp)}
-                        </C>
+                        <T style={[i.headerSubTitle,{fontSize:e?9.5:10.5}]}>
+                          {Ce(k.timestamp)}
+                        </T>
                       </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}]}>
+                      <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}]}>
                           {z.client==="socket.io"||z.url.includes("/socket.io")?"SIO":z.url.startsWith("wss://")?"WSS":"WS"}
-                        </C>
+                        </T>
                       </S>
-                      <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
+                      <T style={[i.headerDetailTitle,{fontSize:e?13:14.5,flex:1,minWidth:0,flexShrink:1}]}numberOfLines={1}ellipsizeMode="middle">
                         {z.url}
-                      </C>
+                      </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:`${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:I.interBold,fontSize:e?10:11}]}>
+                        <T style={[i.headerSubTitle,{fontFamily:I.interBold,fontSize:e?10:11}]}>
                           {(z.status||"open").toUpperCase()}
-                        </C>
+                        </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}/>
-                        <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                          {z.duration!=null?`${z.duration}ms`:Te(z.startTime)}
-                        </C>
+                        <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
+                          {z.duration!=null?`${z.duration}ms`:Ce(z.startTime)}
+                        </T>
                       </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}]}>
+                        <T style={[i.headerSubTitle,{fontSize:e?10:11}]}>
                           {z.frames?.length||0} frames · {it((z.totalBytesSent||0)+(z.totalBytesReceived||0))}
-                        </C>
+                        </T>
                       </S>
                     </S>
                   </S>:null}
               </S>}
 
-            <S style={[i.headerRight,{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",flexShrink:0,gap:e?4:5}]}>
+            <S style={[i.headerRight,{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",flexShrink:0,marginLeft:6,gap:e?3.5:4.5}]}>
               
-              {Y?<G onPress={()=>{_e.alert("Reset All Settings","This restores all module visibility and UI preferences to defaults. Continue?",[{text:"Cancel",style:"cancel"},{text:"Reset",style:"destructive",onPress:ve}])}}hitSlop={15}style={[i.closeButtonSquare,{width:H,height:H,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}/>
-                </G>:ae?null:<>
+              {Z?<>
                   
-                  <G accessible={!0}accessibilityRole="button"accessibilityLabel={re?"Disable peek-through":"Enable peek-through"}onPress={()=>{P("light"),Ue(T=>!T)}}hitSlop={15}style={[i.closeButtonSquare,{width:H,height:H,borderRadius:e?6:7,backgroundColor:re?"rgba(6, 182, 212, 0.38)":"rgba(6, 182, 212, 0.18)",borderColor:re?"rgba(103, 232, 249, 0.65)":"rgba(103, 232, 249, 0.35)",borderWidth:1}]}>
-                    <Lt color={t.white}size={e?12:14}/>
-                  </G>
+                  <E accessible={!0}accessibilityRole="button"accessibilityLabel={D("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}/>
+                  </E>
 
                   
-                  <G accessible={!0}accessibilityRole="button"accessibilityLabel="Settings"onPress={()=>te("main")}hitSlop={15}style={[i.closeButtonSquare,{width:H,height:H,borderRadius:e?6:7,backgroundColor:"rgba(168, 85, 247, 0.28)",borderColor:"rgba(216, 180, 254, 0.45)",borderWidth:1}]}>
+                  <E 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}/>
+                  </E>
+                </>:ae?null:<>
+                  
+                  <E 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}/>
+                  </E>
+
+                  
+                  <E 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}/>
-                  </G>
+                  </E>
                 </>}
 
               
-              <Se testID="inspector.header.minimizeBtn"onPress={Pe||ue}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={R("common.minimize","Minimize")}style={[i.closeButtonSquare,{width:H,height:H,borderRadius:e?6:7,backgroundColor:"rgba(56, 189, 248, 0.22)",borderColor:"rgba(125, 211, 252, 0.40)",borderWidth:1}]}>
+              <Te testID="inspector.header.minimizeBtn"onPress={Oe||ge}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={D("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}/>
-              </Se>
+              </Te>
 
               
-              <Se testID="inspector.header.closeBtn"onPress={ue}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={R("common.close","Close")}style={[i.closeButtonSquare,{width:H,height:H,borderRadius:e?6:7,backgroundColor:"rgba(244, 63, 94, 0.28)",borderColor:"rgba(251, 113, 133, 0.48)",borderWidth:1}]}>
-                <It size={e?12:14}/>
-              </Se>
+              <Te testID="inspector.header.closeBtn"onPress={ge}hitSlop={{top:12,bottom:12,left:12,right:12}}activeOpacity={.7}accessibilityRole="button"accessibilityLabel={D("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>
             </S>
           </S>
         </S>
       </S>
 
       
-      <Tt visible={Ne}onClose={()=>pe(!1)}/>
+      <Tt visible={Ne}onClose={()=>fe(!1)}/>
 
       
-      <St item={he}visible={!!he}onClose={()=>N(null)}onDelete={async T=>{await E.deleteMedia(T.uri),U?.().catch(()=>{}),N(null)}}onConvertToGif={async T=>{const x=await E.convertToGif(T.uri,{fps:12,width:480});if(x){U?.().catch(()=>{});const O=de("anim","gif");N({id:O,type:"gif",format:"gif",uri:x.uri,filename:x.uri.split("/").pop()||O,sizeBytes:x.sizeBytes,timestamp:x.timestamp,durationMs:x.durationMs})}}}/>
-    </>});export default vt;
+      <St item={me}visible={!!me}onClose={()=>j(null)}onDelete={async w=>{await F.deleteMedia(w.uri),N?.().catch(()=>{}),j(null)}}onConvertToGif={async w=>{const C=await F.convertToGif(w.uri,{fps:12,width:480});if(C){N?.().catch(()=>{});const v=ce("anim","gif");j({id:v,type:"gif",format:"gif",uri:C.uri,filename:C.uri.split("/").pop()||v,sizeBytes:C.sizeBytes,timestamp:C.timestamp,durationMs:C.durationMs})}}}/>
+    </>});export default Ot;