react-native-inapp-inspector 2.5.12 → 2.5.13

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

@@ -1,54 +1,54 @@
-import{useCallback as te,useEffect as W,useRef as v,useState as j}from"react";import{Animated as n,Dimensions as Be,PanResponder as ze,Platform as N,StyleSheet as re,Text as $,View as S}from"react-native";import Se from"react-native-linear-gradient";import{useInspector as Le}from"./InspectorContext";import X from"../TouchableScale";import{GripVerticalIcon as Ae,ScreenshotCaptureIcon as Ee,ScreenRecordIcon as Oe}from"../NetworkIcons";import{ScreenCapture as T,generateCaptureId as Y}from"../../capture";import{triggerNativeHaptic as F}from"../../native/NativeInspector";import{showToast as x}from"../../helpers/toast";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as ve}from"../../styles/AppFonts";import{useTranslation as Ge}from"../../i18n";import{MediaPreviewModal as We}from"./MediaPreviewModal";export const FloatingCaptureWidget=()=>{const{refreshMediaCount:I,captureFps:H,captureScale:U,captureBitrate:z,captureMaxDurationSeconds:_,captureAudioMode:J,captureWidgetEnabled:xe,activeTab:Ie,settingsPage:Re,peekMode:je,previewMediaItem:L,setPreviewMediaItem:M,isUpdatePopupVisible:Ce}=Le(),{t:s}=Ge(),[V,k]=j(!1),[Te,A]=j(!1),[Me,E]=j(0),R=v(null),P=v(new n.Value(1)).current,B=v(new n.Value(0)).current,a=v(new n.ValueXY({x:0,y:0})).current,C=v({x:0,y:0});W(()=>{const e=a.x.addListener(o=>C.current.x=o.value),t=a.y.addListener(o=>C.current.y=o.value);return()=>{a.x.removeListener(e),a.y.removeListener(t)}},[a]);const D=v(!1),Ve=v(ze.create({onStartShouldSetPanResponder:()=>!0,onStartShouldSetPanResponderCapture:()=>!1,onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>2||Math.abs(t.dy)>2,onMoveShouldSetPanResponderCapture:(e,t)=>Math.abs(t.dx)>4||Math.abs(t.dy)>4,onPanResponderGrant:()=>{D.current=!0,a.setOffset({x:C.current.x,y:C.current.y}),a.setValue({x:0,y:0})},onPanResponderMove:n.event([null,{dx:a.x,dy:a.y}],{useNativeDriver:!1}),onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderRelease:()=>{a.flattenOffset(),setTimeout(()=>{D.current=!1},100);const{width:e,height:t}=Be.get("window"),o=e/2-20,Q=-o,Z=20,ee=-(t-140),O=C.current.x,G=C.current.y;if(O<Q||O>o||G<ee||G>Z){const De=Math.min(Math.max(O,Q),o),Fe=Math.min(Math.max(G,ee),Z);n.spring(a,{toValue:{x:De,y:Fe},friction:7,tension:50,useNativeDriver:!1}).start()}},onPanResponderTerminate:()=>{a.flattenOffset(),D.current=!1}})).current;W(()=>{T.isRecording().then(e=>{k(e)}).catch(()=>{})},[]),W(()=>{let e=null;return V?(E(0),R.current=setInterval(()=>{E(t=>t+1)},1e3),e=n.loop(n.sequence([n.timing(P,{toValue:1.15,duration:500,useNativeDriver:!0}),n.timing(P,{toValue:1,duration:500,useNativeDriver:!0})])),e.start()):(R.current&&(clearInterval(R.current),R.current=null),E(0),P.setValue(1)),()=>{R.current&&clearInterval(R.current),e&&e.stop()}},[V,P]);const ke=te(async()=>{if(!D.current)try{F("light"),A(!0),await new Promise(t=>setTimeout(t,60));const e=await T.takeScreenshot({format:"png",quality:.9,hideInspector:!1});if(A(!1),n.sequence([n.timing(B,{toValue:.65,duration:70,useNativeDriver:!0}),n.timing(B,{toValue:0,duration:200,useNativeDriver:!0})]).start(),e){F("success");const t=Y("screenshot",e.format||"png"),o={id:t,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};M(o),I?.().catch(()=>{}),x(s("header.screenshotCaptured","Screenshot captured"))}else x(s("header.screenshotFailed","Failed to capture screenshot"))}catch{A(!1),x(s("header.screenshotError","Error capturing screenshot"))}},[I,B,s]),K=te(async()=>{if(!D.current)try{if(V){F("medium");const e=await T.stopRecording();if(k(!1),e){F("success");const t=Y("video",e.format),o={id:t,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio,thumbnailUri:e.thumbnailUri};M(o),I?.().catch(()=>{}),x(s("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else F("medium"),k(!0),await T.startRecording({fps:H,scale:U,audioSource:J,bitrate:z>0?z:void 0,maxDurationSeconds:_})?x(s("header.recordingStarted","Recording started")):(k(!1),x(s("header.recordingStartFailed","Failed to start recording")))}catch{x(s("header.recordingError","Error during screen recording")),k(!1)}},[V,H,U,z,_,J,I,s]),Pe=e=>{const t=Math.floor(e/60),o=e%60;return`${t<10?"0":""}${t}:${o<10?"0":""}${o}`};return!xe||Ie==="media"||Re==="media"||Ce?null:<>
+import{useCallback as Z,useEffect as G,useRef as v,useState as W}from"react";import{Animated as n,Dimensions as Fe,PanResponder as Be,Platform as j,StyleSheet as ee,Text as N,View as S}from"react-native";import Se from"react-native-linear-gradient";import{useInspector as ze}from"./InspectorContext";import $ from"../TouchableScale";import{GripVerticalIcon as Le,ScreenshotCaptureIcon as Ae,ScreenRecordIcon as Ee}from"../NetworkIcons";import{ScreenCapture as T,generateCaptureId as q}from"../../capture";import{triggerNativeHaptic as D}from"../../native/NativeInspector";import{showToast as x}from"../../helpers/toast";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as be}from"../../styles/AppFonts";import{useTranslation as Oe}from"../../i18n";import{MediaPreviewModal as Ge}from"./MediaPreviewModal";export const FloatingCaptureWidget=()=>{const{refreshMediaCount:b,captureFps:X,captureScale:Y,captureBitrate:B,captureMaxDurationSeconds:H,captureAudioMode:U,captureWidgetEnabled:ve,activeTab:xe,settingsPage:Ie,peekMode:We,previewMediaItem:z,setPreviewMediaItem:I,isUpdatePopupVisible:Re}=ze(),{t:s}=Oe(),[M,V]=W(!1),[Ce,L]=W(!1),[Te,A]=W(0),R=v(null),k=v(new n.Value(1)).current,F=v(new n.Value(0)).current,a=v(new n.ValueXY({x:0,y:0})).current,C=v({x:0,y:0});G(()=>{const e=a.x.addListener(o=>C.current.x=o.value),t=a.y.addListener(o=>C.current.y=o.value);return()=>{a.x.removeListener(e),a.y.removeListener(t)}},[a]);const P=v(!1),Me=v(Be.create({onStartShouldSetPanResponder:()=>!0,onStartShouldSetPanResponderCapture:()=>!1,onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>2||Math.abs(t.dy)>2,onMoveShouldSetPanResponderCapture:(e,t)=>Math.abs(t.dx)>4||Math.abs(t.dy)>4,onPanResponderGrant:()=>{P.current=!0,a.setOffset({x:C.current.x,y:C.current.y}),a.setValue({x:0,y:0})},onPanResponderMove:n.event([null,{dx:a.x,dy:a.y}],{useNativeDriver:!1}),onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderRelease:()=>{a.flattenOffset(),setTimeout(()=>{P.current=!1},100);const{width:e,height:t}=Fe.get("window"),o=e/2-20,J=-o,K=20,Q=-(t-140),E=C.current.x,O=C.current.y;if(E<J||E>o||O<Q||O>K){const Pe=Math.min(Math.max(E,J),o),De=Math.min(Math.max(O,Q),K);n.spring(a,{toValue:{x:Pe,y:De},friction:7,tension:50,useNativeDriver:!1}).start()}},onPanResponderTerminate:()=>{a.flattenOffset(),P.current=!1}})).current;G(()=>{T.isRecording().then(e=>{V(e)}).catch(()=>{})},[]),G(()=>{let e=null;return M?(A(0),R.current=setInterval(()=>{A(t=>t+1)},1e3),e=n.loop(n.sequence([n.timing(k,{toValue:1.15,duration:500,useNativeDriver:!0}),n.timing(k,{toValue:1,duration:500,useNativeDriver:!0})])),e.start()):(R.current&&(clearInterval(R.current),R.current=null),A(0),k.setValue(1)),()=>{R.current&&clearInterval(R.current),e&&e.stop()}},[M,k]);const Ve=Z(async()=>{if(!P.current)try{D("light"),L(!0),await new Promise(t=>setTimeout(t,60));const e=await T.takeScreenshot({format:"png",quality:.9,hideInspector:!1});if(L(!1),n.sequence([n.timing(F,{toValue:.65,duration:70,useNativeDriver:!0}),n.timing(F,{toValue:0,duration:200,useNativeDriver:!0})]).start(),e){D("success");const t=q("screenshot",e.format||"png"),o={id:t,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};I(o),b?.().catch(()=>{}),x(s("header.screenshotCaptured","Screenshot captured"))}else x(s("header.screenshotFailed","Failed to capture screenshot"))}catch{L(!1),x(s("header.screenshotError","Error capturing screenshot"))}},[b,F,s]),_=Z(async()=>{if(!P.current)try{if(M){D("medium");const e=await T.stopRecording();if(V(!1),e){D("success");const t=q("video",e.format),o={id:t,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio,thumbnailUri:e.thumbnailUri};I(o),b?.().catch(()=>{}),x(s("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else D("medium"),V(!0),await T.startRecording({fps:X,scale:Y,audioSource:U,bitrate:B>0?B:void 0,maxDurationSeconds:H})?x(s("header.recordingStarted","Recording started")):(V(!1),x(s("header.recordingStartFailed","Failed to start recording")))}catch{x(s("header.recordingError","Error during screen recording")),V(!1)}},[M,X,Y,B,H,U,b,s]),ke=e=>{const t=Math.floor(e/60),o=e%60;return`${t<10?"0":""}${t}:${o<10?"0":""}${o}`};return!ve||xe==="media"||Ie==="media"||Re?null:<>
       
-      <n.View pointerEvents="none"style={[r.flashOverlay,{opacity:B}]}/>
+      <n.View pointerEvents="none"style={[r.flashOverlay,{opacity:F}]}/>
 
-      {!Te&&!L&&<n.View{...Ve.panHandlers}style={[r.container,{transform:a.getTranslateTransform()}]}>
+      {!Ce&&!z&&<n.View{...Me.panHandlers}style={[r.container,{transform:a.getTranslateTransform()}]}>
           
-          {V?<S style={r.recordingShadowWrapper}>
-              <X onPress={K}style={r.recordingPillWrapper}>
+          {M?<S style={r.recordingShadowWrapper}>
+              <$ onPress={_}style={r.recordingPillWrapper}>
                 <Se colors={[i.rose600,i.rose700]}start={{x:0,y:0}}end={{x:1,y:0}}style={r.recordingPill}>
-                  <n.View style={[r.recordingDot,{transform:[{scale:P}]}]}/>
-                  <$ style={r.recordingText}>
-                    REC {Pe(Me)}
-                  </$>
+                  <n.View style={[r.recordingDot,{transform:[{scale:k}]}]}/>
+                  <N style={r.recordingText}>
+                    REC {ke(Te)}
+                  </N>
                   <S style={r.stopIconBadge}>
                     <S style={r.stopIconSquare}/>
                   </S>
                 </Se>
-              </X>
+              </$>
             </S>:<S style={r.dockShadowWrapper}>
               <Se colors={[i.navy900,i.navy800,i.navy900]}start={{x:0,y:0}}end={{x:1,y:0}}style={r.dockBar}>
                 
-                <X onPress={ke}style={r.menuItemBtn}accessible={!0}accessibilityLabel="Take Screenshot">
+                <$ onPress={Ve}style={r.menuItemBtn}accessible={!0}accessibilityLabel="Take Screenshot">
                   <S style={[r.menuItemIconCircle,{backgroundColor:`${i.sky400}38`}]}>
-                    <Ee size={14}color={i.sky400}/>
+                    <Ae size={14}color={i.sky400}/>
                   </S>
-                  <$ style={r.menuItemText}>
+                  <N style={r.menuItemText}>
                     {s("header.screenshot","Screenshot")}
-                  </$>
-                </X>
+                  </N>
+                </$>
 
                 
                 <S style={r.dockDivider}/>
 
                 
-                <X onPress={K}style={r.menuItemBtn}accessible={!0}accessibilityLabel={s("header.recordScreen","Record Screen")}>
+                <$ onPress={_}style={r.menuItemBtn}accessible={!0}accessibilityLabel={s("header.recordScreen","Record Screen")}>
                   <S style={[r.menuItemIconCircle,{backgroundColor:`${i.rose500}3D`}]}>
-                    <Oe size={14}color={i.rose400}/>
+                    <Ee size={14}color={i.rose400}/>
                   </S>
-                  <$ style={r.menuItemText}>
+                  <N style={r.menuItemText}>
                     {s("header.record","Record")}
-                  </$>
-                </X>
+                  </N>
+                </$>
 
                 
                 <S style={r.dragGripArea}>
-                  <Ae size={14}color="rgba(255, 255, 255, 0.55)"/>
+                  <Le size={14}color="rgba(255, 255, 255, 0.55)"/>
                 </S>
               </Se>
             </S>}
         </n.View>}
 
       
-      <We item={L}visible={!!L}onClose={()=>M(null)}onDelete={async e=>{await T.deleteMedia(e.uri),I?.().catch(()=>{}),M(null)}}onConvertToGif={async e=>{const t=await T.convertToGif(e.uri,{fps:12,width:480});if(t){I?.().catch(()=>{});const o=Y("anim","gif");M({id:o,type:"gif",format:"gif",uri:t.uri,filename:t.uri.split("/").pop()||o,sizeBytes:t.sizeBytes,timestamp:t.timestamp,durationMs:t.durationMs})}}}/>
-    </>};const r=re.create({flashOverlay:{...re.absoluteFillObject,backgroundColor:i.white,zIndex:999999},container:{position:"absolute",bottom:N.OS==="ios"?22:16,alignSelf:"center",alignItems:"center",justifyContent:"center",zIndex:999999,elevation:999999},dockShadowWrapper:{borderRadius:24,backgroundColor:"#0D1120",...N.select({ios:{shadowColor:i.black,shadowOffset:{width:0,height:6},shadowOpacity:.45,shadowRadius:14},android:{elevation:16}})},dockBar:{flexDirection:"row",alignItems:"center",borderRadius:24,overflow:"hidden"},dragGripArea:{paddingLeft:6,paddingRight:12,paddingVertical:10,alignItems:"center",justifyContent:"center"},dockDivider:{width:1,height:18,backgroundColor:"rgba(255, 255, 255, 0.14)"},menuItemBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:7,paddingVertical:8.5,paddingHorizontal:12},menuItemIconCircle:{width:24,height:24,borderRadius:12,alignItems:"center",justifyContent:"center"},menuItemText:{fontFamily:ve.interSemiBold,fontSize:12,color:i.white,letterSpacing:.1},recordingShadowWrapper:{borderRadius:22,alignItems:"center",justifyContent:"center",...N.select({ios:{shadowColor:"#E11D48",shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:12},android:{elevation:14}})},recordingPillWrapper:{borderRadius:22,overflow:"hidden"},recordingPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:8,height:38,paddingHorizontal:14,borderRadius:22,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.45)"},recordingDot:{width:8,height:8,borderRadius:4,backgroundColor:"#FFFFFF"},recordingText:{fontFamily:ve.interBold,fontSize:12,color:i.white,letterSpacing:.4},stopIconBadge:{width:18,height:18,borderRadius:9,backgroundColor:"rgba(255, 255, 255, 0.28)",alignItems:"center",justifyContent:"center",marginLeft:3},stopIconSquare:{width:6,height:6,borderRadius:1.5,backgroundColor:i.white}});export default FloatingCaptureWidget;
+      <Ge item={z}visible={!!z}onClose={()=>I(null)}onDelete={async e=>{await T.deleteMedia(e.uri),b?.().catch(()=>{}),I(null)}}onConvertToGif={async e=>{const t=await T.convertToGif(e.uri,{fps:12,width:480});if(t){b?.().catch(()=>{});const o=q("anim","gif");I({id:o,type:"gif",format:"gif",uri:t.uri,filename:t.uri.split("/").pop()||o,sizeBytes:t.sizeBytes,timestamp:t.timestamp,durationMs:t.durationMs})}}}onSave={e=>{I(e),b?.().catch(()=>{})}}/>
+    </>};const r=ee.create({flashOverlay:{...ee.absoluteFillObject,backgroundColor:i.white,zIndex:999999},container:{position:"absolute",bottom:j.OS==="ios"?22:16,alignSelf:"center",alignItems:"center",justifyContent:"center",zIndex:999999,elevation:999999},dockShadowWrapper:{borderRadius:24,backgroundColor:"#0D1120",...j.select({ios:{shadowColor:i.black,shadowOffset:{width:0,height:6},shadowOpacity:.45,shadowRadius:14},android:{elevation:16}})},dockBar:{flexDirection:"row",alignItems:"center",borderRadius:24,overflow:"hidden"},dragGripArea:{paddingLeft:6,paddingRight:12,paddingVertical:10,alignItems:"center",justifyContent:"center"},dockDivider:{width:1,height:18,backgroundColor:"rgba(255, 255, 255, 0.14)"},menuItemBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:7,paddingVertical:8.5,paddingHorizontal:12},menuItemIconCircle:{width:24,height:24,borderRadius:12,alignItems:"center",justifyContent:"center"},menuItemText:{fontFamily:be.interSemiBold,fontSize:12,color:i.white,letterSpacing:.1},recordingShadowWrapper:{borderRadius:22,alignItems:"center",justifyContent:"center",...j.select({ios:{shadowColor:"#E11D48",shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:12},android:{elevation:14}})},recordingPillWrapper:{borderRadius:22,overflow:"hidden"},recordingPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:8,height:38,paddingHorizontal:14,borderRadius:22,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.45)"},recordingDot:{width:8,height:8,borderRadius:4,backgroundColor:"#FFFFFF"},recordingText:{fontFamily:be.interBold,fontSize:12,color:i.white,letterSpacing:.4},stopIconBadge:{width:18,height:18,borderRadius:9,backgroundColor:"rgba(255, 255, 255, 0.28)",alignItems:"center",justifyContent:"center",marginLeft:3},stopIconSquare:{width:6,height:6,borderRadius:1.5,backgroundColor:i.white}});export default FloatingCaptureWidget;

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

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