react-native-inapp-inspector 2.5.0 → 2.5.2

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

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

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

@@ -1,14 +1,14 @@
-import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as Ye,Platform as de,Pressable as Se,StatusBar as Ze,Text as C,TouchableOpacity as Te,useWindowDimensions as et,View as S}from"react-native";import St from"react-native-linear-gradient";import{useInspector as Tt}from"./InspectorContext";import _ from"../TouchableScale";import{BrandCircleIcon as Ct}from"../BrandCircleIcon";import i from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as D}from"../../styles/AppFonts";import{METHOD_COLORS as xt}from"../../constants";import{LIB_VERSION as ce}from"../../constants";import{getStatusColor as ue,formatTime as zt,formatTimeShort as Ce,getSize as xe,formatByteSize as Vt,getAppVersionAndBuild as Dt,showToast as H}from"../../helpers";import{triggerNativeHaptic as A}from"../../native/NativeInspector";import{ScreenCapture as E}from"../../capture";import{UpdateAvailableModal as Rt}from"./UpdateAvailableModal";import{MediaPreviewModal as It}from"./MediaPreviewModal";import{LanguageSelectorModal as Mt}from"./LanguageSelectorModal";import{WhiteBackNavigation as $t,SettingsIcon as Bt,CloseWhite as Lt,ChevronDownIcon as Ve,ClockIcon as G,SizeIcon as De,AppleIcon as Ht,AndroidIcon as At,NpmIcon as Ot,ResetIcon as Pt,BoltIcon as Et,EyeIcon as Wt}from"../NetworkIcons";import{useTranslation as Ft,SUPPORTED_LANGUAGES as ke,getLanguage as Ut}from"../../i18n";const Nt=$.memo(()=>{const{t:I,language:ge}=Ft(),{modalHeightPercent:ee,appIcon:_t,selected:R,setSelected:Re,selectedEvent:B,setSelectedEvent:Ie,selectedLog:L,setSelectedLog:Me,selectedReduxSlice:W,setSelectedReduxSlice:$e,selectedReduxAction:q,setSelectedReduxAction:Be,reduxState:Le,reduxLastActionMap:ve,updateAvailable:te,latestNpmVersion:He,clearAnim:jt,activePulseAnim:Ae,unreadPulseAnim:Oe,runClearAllWithAnimation:Gt,settingsPage:O,setSettingsPage:ie,isAboutOpen:re,setIsAboutOpen:Pe,resetToDefaults:Ee,closeModal:he,minimizeInspector:We,detailTitle:Fe,activeTab:V,environment:pe,selectedCrash:M,setSelectedCrash:Ue,selectedPush:k,setSelectedPush:Ne,selectedSocket:z,setSelectedSocket:_e,refreshMediaCount:F,peekMode:oe,setPeekMode:je}=Tt(),{width:Q}=et(),e=Q<360,U=Q<400,[Ge,ae]=$.useState(!1),[qe,me]=$.useState(!1),[Qe]=$.useState(()=>Dt().formatted),fe=Z(()=>{const T=ge||Ut();return ke.find(x=>x.code===T)||ke[0]},[ge]),[J,K]=$.useState(!1),[qt,le]=$.useState(0),P=$.useRef(null);$.useEffect(()=>{E.isRecording().then(T=>{K(T)}).catch(()=>{})},[]),$.useEffect(()=>(J?(le(0),P.current=setInterval(()=>{le(T=>T+1)},1e3)):(P.current&&(clearInterval(P.current),P.current=null),le(0)),()=>{P.current&&clearInterval(P.current)}),[J]);const[be,N]=$.useState(null),Qt=$.useCallback(async()=>{try{A("light");const T=await E.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(T){A("success");const x={id:`screenshot_${T.timestamp}.png`,type:"image",format:T.format,uri:T.uri,filename:T.uri.split("/").pop()||`screenshot_${T.timestamp}.png`,sizeBytes:T.sizeBytes,timestamp:T.timestamp,width:T.width,height:T.height};N(x),F?.().catch(()=>{}),H(I("header.screenshotCaptured"))}else H(I("header.screenshotFailed"))}catch{H(I("header.screenshotError"))}},[F,I]),Jt=$.useCallback(async()=>{try{if(J){A("medium");const T=await E.stopRecording();if(K(!1),T){A("success");const x={id:`video_${T.timestamp}.${T.format}`,type:T.format==="gif"?"gif":"video",format:T.format,uri:T.uri,filename:T.uri.split("/").pop()||`video_${T.timestamp}.${T.format}`,sizeBytes:T.sizeBytes,timestamp:T.timestamp,durationMs:T.durationMs,width:T.width,height:T.height,hasAudio:T.hasAudio};N(x),F?.().catch(()=>{}),H(I("header.recordingSaved",{duration:(T.durationMs/1e3).toFixed(1)}))}}else A("medium"),await E.startRecording({fps:24,audioSource:"none"})?(K(!0),H(I("header.recordingStarted"))):H(I("header.recordingStartFailed"))}catch{H(I("header.recordingError")),K(!1)}},[J,I]),Kt=T=>{const x=Math.floor(T/60),se=T%60;return`${x.toString().padStart(2,"0")}:${se.toString().padStart(2,"0")}`},Xt=Z(()=>{const T=(pe||(__DEV__?"DEV":"PROD")).trim(),x=T.toUpperCase();return x==="DEV"||x.includes("DEV")||x==="LOCAL"?{label:T,bg:`${t.emerald500}40`,border:`${t.emerald400}8C`,text:t.mintGreenBorder}:x==="UAT"||x==="QA"||x==="TEST"?{label:T,bg:`${t.amber500}47`,border:`${t.amber400}99`,text:t.amberWarmBorder}:x==="PREPROD"||x==="STAGE"||x==="STAGING"?{label:T,bg:`${t.purple500}47`,border:`${t.purple400}99`,text:t.violetSoftBorder}:{label:T,bg:`${t.rose500}40`,border:`${t.roseBorder}8C`,text:t.errorBorder}},[pe]),X=V==="apis"&&R!=null||V==="analytics"&&B!=null||V==="logs"&&L!=null||V==="redux"&&(W!=null||q!=null)||V==="crash"&&M!=null||V==="push"&&k!=null||V==="socket"&&z!=null,Y=O!==null,ne=X||Y||re,Je=Z(()=>{switch(O){case"apis":return"APIs (Network)";case"logs":return"Console Logs";case"crash":return"Crash Protection";case"analytics":return"Analytics Logger";case"redux":return"Redux Inspector";case"media":return"Screencast (Media)";case"push":return"Push Notifications";default:return"Settings & Modules"}},[O]),ye=Z(()=>de.OS==="ios"?ee>=98?Q>=390?50:44:0:de.OS==="android"&&ee>=98?Ze.currentHeight||24:0,[ee,Q]),v=e?25:U?26.5:27,Yt=e?36:U?38:40;return<>
+import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as Ye,Platform as se,Pressable as Se,StatusBar as Ze,Text as C,TouchableOpacity as Te,useWindowDimensions as et,View as S}from"react-native";import St from"react-native-linear-gradient";import{useInspector as Tt}from"./InspectorContext";import G from"../TouchableScale";import{BrandCircleIcon as Ct}from"../BrandCircleIcon";import i from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as D}from"../../styles/AppFonts";import{METHOD_COLORS as xt}from"../../constants";import{LIB_VERSION as de}from"../../constants";import{getStatusColor as ce,formatTime as zt,formatTimeShort as Ce,getSize as xe,formatByteSize as Vt,getAppVersionAndBuild as Dt,showToast as A}from"../../helpers";import{triggerNativeHaptic as O}from"../../native/NativeInspector";import{ScreenCapture as W,generateCaptureId as ue}from"../../capture";import{UpdateAvailableModal as Rt}from"./UpdateAvailableModal";import{MediaPreviewModal as It}from"./MediaPreviewModal";import{LanguageSelectorModal as Mt}from"./LanguageSelectorModal";import{WhiteBackNavigation as $t,SettingsIcon as Bt,CloseWhite as Lt,ChevronDownIcon as Ve,ClockIcon as _,SizeIcon as De,AppleIcon as Ht,AndroidIcon as At,NpmIcon as Ot,ResetIcon as Pt,BoltIcon as Et,EyeIcon as Wt}from"../NetworkIcons";import{useTranslation as Ft,SUPPORTED_LANGUAGES as ke,getLanguage as Ut}from"../../i18n";const Nt=$.memo(()=>{const{t:I,language:ge}=Ft(),{modalHeightPercent:ee,appIcon:jt,selected:R,setSelected:Re,selectedEvent:B,setSelectedEvent:Ie,selectedLog:L,setSelectedLog:Me,selectedReduxSlice:F,setSelectedReduxSlice:$e,selectedReduxAction:q,setSelectedReduxAction:Be,reduxState:Le,reduxLastActionMap:ve,updateAvailable:te,latestNpmVersion:He,clearAnim:Gt,activePulseAnim:Ae,unreadPulseAnim:Oe,runClearAllWithAnimation:_t,settingsPage:P,setSettingsPage:ie,isAboutOpen:re,setIsAboutOpen:Pe,resetToDefaults:Ee,closeModal:he,minimizeInspector:We,detailTitle:Fe,activeTab:V,environment:pe,selectedCrash:M,setSelectedCrash:Ue,selectedPush:k,setSelectedPush:Ne,selectedSocket:z,setSelectedSocket:je,refreshMediaCount:U,peekMode:oe,setPeekMode:Ge,previewMediaItem:me,setPreviewMediaItem:N}=Tt(),{width:Q}=et(),e=Q<360,j=Q<400,[_e,ae]=$.useState(!1),[qt,Qt]=$.useState(!1),[qe,fe]=$.useState(!1),[Qe]=$.useState(()=>Dt().formatted),be=Z(()=>{const T=ge||Ut();return ke.find(x=>x.code===T)||ke[0]},[ge]),[J,K]=$.useState(!1),[Jt,le]=$.useState(0),E=$.useRef(null);$.useEffect(()=>{W.isRecording().then(T=>{K(T)}).catch(()=>{})},[]),$.useEffect(()=>(J?(le(0),E.current=setInterval(()=>{le(T=>T+1)},1e3)):(E.current&&(clearInterval(E.current),E.current=null),le(0)),()=>{E.current&&clearInterval(E.current)}),[J]);const Kt=$.useCallback(async()=>{try{O("light");const T=await W.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(T){O("success");const x=ue("screenshot",T.format||"png"),H={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(H),U?.().catch(()=>{}),A(I("header.screenshotCaptured"))}else A(I("header.screenshotFailed"))}catch{A(I("header.screenshotError"))}},[U,I]),Xt=$.useCallback(async()=>{try{if(J){O("medium");const T=await W.stopRecording();if(K(!1),T){O("success");const x=ue("video",T.format),H={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(H),U?.().catch(()=>{}),A(I("header.recordingSaved",{duration:(T.durationMs/1e3).toFixed(1)}))}}else O("medium"),await W.startRecording({fps:24,audioSource:"none"})?(K(!0),A(I("header.recordingStarted"))):A(I("header.recordingStartFailed"))}catch{A(I("header.recordingError")),K(!1)}},[J,I]),Yt=T=>{const x=Math.floor(T/60),H=T%60;return`${x.toString().padStart(2,"0")}:${H.toString().padStart(2,"0")}`},Zt=Z(()=>{const T=(pe||(__DEV__?"DEV":"PROD")).trim(),x=T.toUpperCase();return x==="DEV"||x.includes("DEV")||x==="LOCAL"?{label:T,bg:`${t.emerald500}40`,border:`${t.emerald400}8C`,text:t.mintGreenBorder}:x==="UAT"||x==="QA"||x==="TEST"?{label:T,bg:`${t.amber500}47`,border:`${t.amber400}99`,text:t.amberWarmBorder}:x==="PREPROD"||x==="STAGE"||x==="STAGING"?{label:T,bg:`${t.purple500}47`,border:`${t.purple400}99`,text:t.violetSoftBorder}:{label:T,bg:`${t.rose500}40`,border:`${t.roseBorder}8C`,text:t.errorBorder}},[pe]),X=V==="apis"&&R!=null||V==="analytics"&&B!=null||V==="logs"&&L!=null||V==="redux"&&(F!=null||q!=null)||V==="crash"&&M!=null||V==="push"&&k!=null||V==="socket"&&z!=null,Y=P!==null,ne=X||Y||re,Je=Z(()=>{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=Z(()=>se.OS==="ios"?ee>=98?Q>=390?50:44:0:se.OS==="android"&&ee>=98?Ze.currentHeight||24:0,[ee,Q]),v=e?25:j?26.5:27,ei=e?36:j?38:40;return<>
       <S style={[i.headerGradient,{minHeight:(e?44:48)+ye}]}>
         
         <St colors={[t.indigo600,t.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={{position:"absolute",top:0,left:0,right:0,bottom:0,borderTopLeftRadius:20,borderTopRightRadius:20}}pointerEvents="none"/>
         <S style={{paddingTop:ye,width:"100%"}}>
           <S style={[i.header,{width:"100%",justifyContent:"space-between",paddingHorizontal:e?10:12,paddingVertical:5.5,minHeight:e?44:48}]}>
             <S style={{flexDirection:"row",alignItems:"center",gap:e?7:8,flex:X?void 0:1,flexShrink:X?0:1,minWidth:0}}>
-              {ne&&<_ onPress={()=>{if(re){Pe(!1);return}if(Y){ie(O==="main"?null:"main");return}Re(null),Ie(null),Me(null),$e(null),Be(null),Ue(null),Ne(null),_e(null)}}hitSlop={15}style={{width:e?32:36,height:e?32:36,borderRadius:e?16:18,alignItems:"center",justifyContent:"center",backgroundColor:`${t.white}2E`,borderWidth:1,borderColor:`${t.white}4D`}}>
+              {ne&&<G onPress={()=>{if(re){Pe(!1);return}if(Y){ie(P==="main"?null:"main");return}Re(null),Ie(null),Me(null),$e(null),Be(null),Ue(null),Ne(null),je(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`}}/>
                   <$t/>
-                </_>}
+                </G>}
 
               {re?<S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
                   <S style={{flexDirection:"row",alignItems:"center",gap:6}}>
@@ -17,7 +17,7 @@ import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as
                     </C>
                     <S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
                       <C style={{fontFamily:D.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
-                        v{ce}
+                        v{de}
                       </C>
                     </S>
                   </S>
@@ -29,39 +29,39 @@ import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as
                     <C style={{fontFamily:D.interBold,fontSize:e?15:16.5,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
                       {Je}
                     </C>
-                    {O==="main"&&<S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
+                    {P==="main"&&<S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
                         <C style={{fontFamily:D.interBold,fontSize:e?8.5:9.5,lineHeight:12,color:t.white}}>
-                          v{ce}
+                          v{de}
                         </C>
                       </S>}
                   </S>
                   <C style={{fontFamily:D.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:1}}numberOfLines={1}>
-                    {O==="main"?"Manage modules and preferences":"Configure module parameters"}
+                    {P==="main"?"Manage modules and preferences":"Configure module parameters"}
                   </C>
                 </S>:ne?null:<S style={{flexDirection:"row",alignItems:"center",gap:e?8:10,flex:1,minWidth:0,marginRight:4}}>
-                  <Ct size={e?44:U?46:48}/>
+                  <Ct size={e?44:j?46:48}/>
                   <S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
                     
-                    <C style={[i.headerTitle,{fontFamily:D.interBold,fontWeight:"700",fontSize:e?13:U?13.5:14.5,lineHeight:e?17:U?18:19.5,color:t.white,letterSpacing:-.2,paddingBottom:0}]}numberOfLines={1}ellipsizeMode="tail">
+                    <C style={[i.headerTitle,{fontFamily:D.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">
                       react-native-inapp-inspector
                     </C>
 
                     
                     <S style={{flexDirection:"row",alignItems:"center",gap:4.5,minWidth:0,marginTop:1.5}}>
                       
-                      <_ onPress={()=>{A("light"),me(!0)}}hitSlop={6}accessible={!0}accessibilityRole="button"accessibilityLabel={I("settings.general.selectLanguage","Select Language")}style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}24`,borderRadius:5,paddingHorizontal:5.5,paddingVertical:2,gap:3.5,borderWidth:1,borderColor:`${t.white}38`,flexShrink:0}}>
+                      <G onPress={()=>{O("light"),fe(!0)}}hitSlop={6}accessible={!0}accessibilityRole="button"accessibilityLabel={I("settings.general.selectLanguage","Select Language")}style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}24`,borderRadius:5,paddingHorizontal:5.5,paddingVertical:2,gap:3.5,borderWidth:1,borderColor:`${t.white}38`,flexShrink:0}}>
                         <C style={{fontSize:9,lineHeight:11}}>
-                          {fe?.flag||"\u{1F310}"}
+                          {be?.flag||"\u{1F310}"}
                         </C>
                         <C style={{fontFamily:D.interBold,fontSize:8.5,lineHeight:11,color:t.white,letterSpacing:.2}}numberOfLines={1}>
-                          {fe?.code?.toUpperCase()||"EN"}
+                          {be?.code?.toUpperCase()||"EN"}
                         </C>
                         <Ve size={6.5}color={`${t.white}CC`}/>
-                      </_>
+                      </G>
 
                       
                       <S style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}1F`,borderRadius:5,paddingHorizontal:5.5,paddingVertical:2,gap:3.5,borderWidth:1,borderColor:`${t.white}2E`,flexShrink:1,minWidth:0}}>
-                        {de.OS==="ios"?<Ht color={`${t.white}E6`}size={9}/>:<At color={`${t.white}E6`}size={9}/>}
+                        {se.OS==="ios"?<Ht color={`${t.white}E6`}size={9}/>:<At color={`${t.white}E6`}size={9}/>}
                         <C style={{fontFamily:D.interMedium,fontSize:8.5,lineHeight:11,color:`${t.white}EB`,letterSpacing:.1}}numberOfLines={1}ellipsizeMode="tail">
                           {Qe}
                         </C>
@@ -71,7 +71,7 @@ import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as
                       <Se onPress={()=>{te?ae(!0):Ye.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{})}}style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t.white}1F`,borderRadius:5,paddingHorizontal:6,paddingVertical:2,gap:3.5,borderWidth:1,borderColor:`${t.white}2E`,flexShrink:0}}>
                         <Ot size={9}color={t.npmRedLight}/>
                         <C style={{fontFamily:D.interMedium,fontSize:8.5,lineHeight:11,color:`${t.white}EB`,letterSpacing:.1}}>
-                          v{ce}
+                          v{de}
                         </C>
                         {te&&<C style={{fontFamily:D.interBold,fontSize:8,color:t.warningAmber}}>
                             ●
@@ -104,14 +104,14 @@ import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as
                       </C>
                     </S>
                     <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
-                      <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${ue(R.status)}26`,borderWidth:1,borderColor:`${ue(R.status)}55`}}>
-                        <S style={[i.headerStatusDot,{backgroundColor:ue(R.status),width:e?6:7,height:e?6:7}]}/>
+                      <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${ce(R.status)}26`,borderWidth:1,borderColor:`${ce(R.status)}55`}}>
+                        <S style={[i.headerStatusDot,{backgroundColor:ce(R.status),width:e?6:7,height:e?6:7}]}/>
                         <C style={[i.headerSubTitle,{fontFamily:D.interBold,fontSize:e?10:11}]}>
                           {R.status===0?"Failed":R.status??"Pending"}
                         </C>
                       </S>
                       <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${t.white}29`}}>
-                        <G color={t.white}size={e?10:11}/>
+                        <_ color={t.white}size={e?10:11}/>
                         <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
                           {R.duration!=null?`${R.duration}ms`:"\u2014"}
                         </C>
@@ -159,13 +159,13 @@ import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as
                     </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`}}>
-                        <G color={t.white}size={e?10:11}/>
+                        <_ color={t.white}size={e?10:11}/>
                         <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
                           {zt(L.timestamp)}
                         </C>
                       </S>
                     </S>
-                  </S>:V==="redux"&&W!=null?(()=>{const T=Le?.[W],x=T&&typeof T=="object"?Object.keys(T).length:typeof T<"u"?1:0,se=xe(T),we=ve[W];return<S style={i.headerDetailCenter}>
+                  </S>:V==="redux"&&F!=null?(()=>{const T=Le?.[F],x=T&&typeof T=="object"?Object.keys(T).length:typeof T<"u"?1:0,H=xe(T),we=ve[F];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}]}>
@@ -173,7 +173,7 @@ import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as
                             </C>
                           </S>
                           <C style={[i.headerDetailTitle,{fontSize:e?13.5:15}]}numberOfLines={1}ellipsizeMode="middle">
-                            {W}
+                            {F}
                           </C>
                         </S>
                         <S style={{flexDirection:"row",alignItems:"center",gap:e?4:6,marginTop:3,paddingVertical:1}}>
@@ -191,14 +191,14 @@ import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as
                             •
                           </C>
                           <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
-                            {se}
+                            {H}
                           </C>
                           {we?.timestamp&&<>
                               <C style={[i.headerSubTitle,{opacity:.6,fontSize:e?10:11}]}>
                                 •
                               </C>
                               <S style={{flexDirection:"row",alignItems:"center",gap:3}}>
-                                <G color={t.white}size={e?9:10}/>
+                                <_ color={t.white}size={e?9:10}/>
                                 <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
                                   {we.timestamp}
                                 </C>
@@ -266,7 +266,7 @@ import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as
                         </C>
                       </S>
                       <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2,borderRadius:20,backgroundColor:`${t.white}29`}}>
-                        <G color={t.white}size={e?9.5:10.5}/>
+                        <_ color={t.white}size={e?9.5:10.5}/>
                         <C style={[i.headerSubTitle,{fontSize:e?9.5:10.5}]}>
                           {Ce(k.timestamp)}
                         </C>
@@ -291,7 +291,7 @@ import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as
                         </C>
                       </S>
                       <S style={{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:e?6:8,paddingVertical:2.5,borderRadius:20,backgroundColor:`${t.white}29`}}>
-                        <G color={t.white}size={e?10:11}/>
+                        <_ color={t.white}size={e?10:11}/>
                         <C style={[i.headerSubTitle,{fontSize:e?10:11}]}>
                           {z.duration!=null?`${z.duration}ms`:Ce(z.startTime)}
                         </C>
@@ -308,18 +308,18 @@ import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as
 
             <S style={[i.headerRight,{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",flexShrink:0,gap:e?4:5}]}>
               
-              {Y?<_ onPress={()=>{Ke.alert("Reset All Settings","This restores all module visibility and UI preferences to defaults. Continue?",[{text:"Cancel",style:"cancel"},{text:"Reset",style:"destructive",onPress:Ee}])}}hitSlop={15}style={[i.closeButtonSquare,{width:v,height:v,borderRadius:e?6:7,backgroundColor:"rgba(245, 158, 11, 0.26)",borderColor:"rgba(252, 211, 77, 0.45)",borderWidth:1}]}>
+              {Y?<G onPress={()=>{Ke.alert("Reset All Settings","This restores all module visibility and UI preferences to defaults. Continue?",[{text:"Cancel",style:"cancel"},{text:"Reset",style:"destructive",onPress:Ee}])}}hitSlop={15}style={[i.closeButtonSquare,{width:v,height:v,borderRadius:e?6:7,backgroundColor:"rgba(245, 158, 11, 0.26)",borderColor:"rgba(252, 211, 77, 0.45)",borderWidth:1}]}>
                   <Pt color={t.white}size={e?12:14}/>
-                </_>:ne?null:<>
+                </G>:ne?null:<>
                   
-                  <_ accessible={!0}accessibilityRole="button"accessibilityLabel={oe?"Disable peek-through":"Enable peek-through"}onPress={()=>{A("light"),je(T=>!T)}}hitSlop={15}style={[i.closeButtonSquare,{width:v,height:v,borderRadius:e?6:7,backgroundColor:oe?"rgba(6, 182, 212, 0.38)":"rgba(6, 182, 212, 0.18)",borderColor:oe?"rgba(103, 232, 249, 0.65)":"rgba(103, 232, 249, 0.35)",borderWidth:1}]}>
+                  <G accessible={!0}accessibilityRole="button"accessibilityLabel={oe?"Disable peek-through":"Enable peek-through"}onPress={()=>{O("light"),Ge(T=>!T)}}hitSlop={15}style={[i.closeButtonSquare,{width:v,height:v,borderRadius:e?6:7,backgroundColor:oe?"rgba(6, 182, 212, 0.38)":"rgba(6, 182, 212, 0.18)",borderColor:oe?"rgba(103, 232, 249, 0.65)":"rgba(103, 232, 249, 0.35)",borderWidth:1}]}>
                     <Wt color={t.white}size={e?12:14}/>
-                  </_>
+                  </G>
 
                   
-                  <_ accessible={!0}accessibilityRole="button"accessibilityLabel="Settings"onPress={()=>ie("main")}hitSlop={15}style={[i.closeButtonSquare,{width:v,height:v,borderRadius:e?6:7,backgroundColor:"rgba(168, 85, 247, 0.28)",borderColor:"rgba(216, 180, 254, 0.45)",borderWidth:1}]}>
+                  <G accessible={!0}accessibilityRole="button"accessibilityLabel="Settings"onPress={()=>ie("main")}hitSlop={15}style={[i.closeButtonSquare,{width:v,height:v,borderRadius:e?6:7,backgroundColor:"rgba(168, 85, 247, 0.28)",borderColor:"rgba(216, 180, 254, 0.45)",borderWidth:1}]}>
                     <Bt color={t.white}size={e?12:14}/>
-                  </_>
+                  </G>
                 </>}
 
               
@@ -337,11 +337,11 @@ import $,{useMemo as Z}from"react";import{Alert as Ke,Animated as Xe,Linking as
       </S>
 
       
-      <Rt visible={Ge}latestVersion={He}onClose={()=>ae(!1)}/>
+      <Rt visible={_e}latestVersion={He}onClose={()=>ae(!1)}/>
 
       
-      <Mt visible={qe}onClose={()=>me(!1)}/>
+      <Mt visible={qe}onClose={()=>fe(!1)}/>
 
       
-      <It item={be}visible={!!be}onClose={()=>N(null)}onDelete={async T=>{await E.deleteMedia(T.uri),F?.().catch(()=>{}),N(null)}}onConvertToGif={async T=>{const x=await E.convertToGif(T.uri,{fps:12,width:480});x&&(F?.().catch(()=>{}),N({id:`anim_${x.timestamp}.gif`,type:"gif",format:"gif",uri:x.uri,filename:x.uri.split("/").pop()||`anim_${x.timestamp}.gif`,sizeBytes:x.sizeBytes,timestamp:x.timestamp,durationMs:x.durationMs}))}}/>
+      <It item={me}visible={!!me}onClose={()=>N(null)}onDelete={async T=>{await W.deleteMedia(T.uri),U?.().catch(()=>{}),N(null)}}onConvertToGif={async T=>{const x=await W.convertToGif(T.uri,{fps:12,width:480});if(x){U?.().catch(()=>{});const H=ue("anim","gif");N({id:H,type:"gif",format:"gif",uri:x.uri,filename:x.uri.split("/").pop()||H,sizeBytes:x.sizeBytes,timestamp:x.timestamp,durationMs:x.durationMs})}}}/>
     </>});export default Nt;

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

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