react-native-inapp-inspector 2.5.11 → 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,11 +22,11 @@ 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}}>
-                    <T style={{fontFamily:I.interBold,fontSize:e?14.5:16,lineHeight:e?18:20,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
+                    <T style={{fontFamily:I.interBold,fontSize:e?14.5:16,lineHeight:e?19:21,color:t.white,letterSpacing:-.2}}numberOfLines={1}>
                       {Ge}
                     </T>
                     {P==="main"&&<S style={{backgroundColor:`${t.white}26`,paddingHorizontal:e?5:6,paddingVertical:2,borderRadius:8,borderWidth:1,borderColor:`${t.white}20`}}>
@@ -35,27 +35,27 @@ import L,{useMemo as ee}from"react";import{Alert as qe,Linking as _e,Platform as
                         </T>
                       </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">
+                  <T style={{fontFamily:I.interRegular,fontSize:e?10:11,lineHeight:e?14:15,color:`${t.white}CC`,marginTop:2}}numberOfLines={1}ellipsizeMode="tail">
                     {P==="main"?"Manage modules and preferences":"Configure module parameters"}
                   </T>
                 </S>:ae?null:<S style={{flexDirection:"row",alignItems:"center",gap:e?7:8.5,flex:1,minWidth:0,marginRight:6}}>
                   <Ze size={e?38:G?40:42}/>
-                  <S style={{gap:2,flex:1,minWidth:0,justifyContent:"center"}}>
+                  <S style={{gap:3,flex:1,minWidth:0,justifyContent:"center"}}>
                     
-                    <T style={[i.headerTitle,{fontFamily:I.interBold,fontWeight:"700",fontSize:e?12.5:G?13:14,lineHeight:e?16:G?17:18,color:t.white,letterSpacing:-.2,paddingBottom:0}]}numberOfLines={1}ellipsizeMode="tail">
+                    <T style={[i.headerTitle,{fontFamily:I.interBold,fontWeight:"700",fontSize:e?12.5:G?13:14,lineHeight:e?17:G?18:19,color:t.white,letterSpacing:-.2,paddingBottom:0}]}numberOfLines={1}ellipsizeMode="tail">
                       react-native-inapp-inspector
                     </T>
 
                     
-                    <S style={{flexDirection:"row",alignItems:"center",gap:3.5,minWidth:0,marginTop:1,flexWrap:"nowrap",overflow:"hidden"}}>
+                    <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(99, 102, 241, 0.28)",borderColor:"rgba(165, 180, 252, 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;

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

@@ -1,5 +1,5 @@
-import se,{useEffect as P,useRef as L}from"react";import{Animated as o,Modal as Se,Platform as q,Pressable as Be,StatusBar as Ce,StyleSheet as T,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 H 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:Y,selectedEvent:W,selectedLog:U,selectedReduxSlice:j,selectedReduxAction:J,selectedCrash:_,selectedPush:F,setSelectedPush:K,selectedSocket:z,setSelectedSocket:Q,settingsPage:N,isAboutOpen:R,setIsAboutOpen:X,isSupportOpen:D,setIsSupportOpen:Z,activeTab:e,isReady:ee,enabled:oe,isDismissed:te,hasNavigationContext:re,setNavState:ae,confirmModal:v,setConfirmModal:ie,peekMode:le,peekOpacity:$}=Ve(),G=e==="apis"&&Y!=null||e==="analytics"&&W!=null||e==="logs"&&U!=null||e==="redux"&&(j!=null||J!=null)||e==="crash"&&_!=null||e==="push"&&F!=null||e==="socket"&&z!=null,x=L(new o.Value(0)).current;P(()=>{N!==null&&(x.setValue(0),o.spring(x,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[N!==null]);const E=L(new o.Value(0)).current;P(()=>{R&&(E.setValue(0),o.spring(E,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[R]);const A=L(new o.Value(0)).current;return P(()=>{D&&(A.setValue(0),o.spring(A,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[D]),<>
-      {(q.OS==="ios"||q.OS==="android")&&oe&&!te&&!I&&<Ne/>}
+import se,{useEffect as A,useRef as L}from"react";import{Animated as o,Modal as Se,Platform as q,Pressable as Be,StatusBar as Ce,StyleSheet as T,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 Pe from"./NetworkDetail";import Ae from"./LogDetail";import Le from"./ConsoleTab";import{PerformanceTab as Ie}from"./PerformanceTab";import Oe from"./AnalyticsTab";import Fe from"../AnalyticsDetail";import We from"./ReduxTab";import Ge from"./ReduxDetail";import He from"./CrashTab";import Ye from"./CrashDetail";import Ue from"./PushTab";import _e from"./PushDetail";import $e from"./SocketTab";import Je from"./SocketDetail";import Ke from"./DeviceInfoTab";import Qe from"./StorageTab";import Xe from"./DebuggingTab";import{MediaGalleryTab as Ze}from"./MediaGalleryTab";import So from"./SettingsPanel";import Bo from"./AboutModal";import{SupportPage as Co}from"./SupportPage";import{ConfirmationModal as Vo}from"./ConfirmationModal";import{FloatingCaptureWidget as Mo}from"./FloatingCaptureWidget";import No from"./NpmUpdateToast";import Ro from"./NpmStarPrompt";import Do from"../Toast";import H from"../../styles";import{AppColors as C}from"../../styles/AppColors";import To from"./NavigationTracker";import{isLocalDebugEnvironment as Eo}from"../../helpers";const xo=()=>{const{visible:I,modalAnimationType:V,closeModal:M,modalHeightPercent:O,selected:Y,selectedEvent:F,selectedLog:U,selectedReduxSlice:j,selectedReduxAction:J,selectedCrash:_,selectedPush:W,setSelectedPush:K,selectedSocket:z,setSelectedSocket:Q,settingsPage:v,isAboutOpen:R,setIsAboutOpen:X,isSupportOpen:D,setIsSupportOpen:Z,activeTab:e,isReady:ee,enabled:oe,isDismissed:re,hasNavigationContext:te,setNavState:ae,confirmModal:N,setConfirmModal:ie,peekMode:le,peekOpacity:$}=Ve(),G=e==="apis"&&Y!=null||e==="analytics"&&F!=null||e==="logs"&&U!=null||e==="redux"&&(j!=null||J!=null)||e==="crash"&&_!=null||e==="push"&&W!=null||e==="socket"&&z!=null,E=L(new o.Value(0)).current;A(()=>{v!==null&&(E.setValue(0),o.spring(E,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[v!==null]);const x=L(new o.Value(0)).current;A(()=>{R&&(x.setValue(0),o.spring(x,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[R]);const P=L(new o.Value(0)).current;return A(()=>{D&&(P.setValue(0),o.spring(P,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[D]),<>
+      {(q.OS==="ios"||q.OS==="android")&&oe&&!re&&!I&&<Ne/>}
       <Se visible={I}animationType={V}transparent statusBarTranslucent={!0}onRequestClose={M}>
         <Me onClose={M}>
           <B style={[H.modalBackdrop,{zIndex:999999,elevation:999999}]}>
@@ -8,11 +8,11 @@ import se,{useEffect as P,useRef as L}from"react";import{Animated as o,Modal as
               <Ce translucent backgroundColor="transparent"barStyle="light-content"/>
 
               <Re/>
-              {!G&&N===null&&!R&&!D&&<De/>}
+              {!G&&v===null&&!R&&!D&&<De/>}
 
               <B style={{flex:1,overflow:"hidden",backgroundColor:C.grayBackground}}>
                 
-                <B style={{flex:1}}pointerEvents={G||N!==null||R||D?"none":"auto"}>
+                <B style={{flex:1}}pointerEvents={G||v!==null||R||D?"none":"auto"}>
                   <Te/>
                   {ee?<B style={{flex:1}}>
                       {e==="apis"&&<S moduleName="Network API Monitor">
@@ -21,134 +21,137 @@ import se,{useEffect as P,useRef as L}from"react";import{Animated as o,Modal as
                       {e==="logs"&&<S moduleName="Console Logs Monitor">
                           <Le/>
                         </S>}
-                      {e==="analytics"&&<S moduleName="Analytics Event Tracker">
+                      {e==="perf"&&<S moduleName="Performance & FPS Profiler">
                           <Ie/>
                         </S>}
+                      {e==="analytics"&&<S moduleName="Analytics Event Tracker">
+                          <Oe/>
+                        </S>}
                       {e==="redux"&&<S moduleName="Redux State Inspector">
                           <We/>
                         </S>}
                       {e==="crash"&&<S moduleName="Crash Reporter">
-                          <Ge/>
+                          <He/>
                         </S>}
                       {e==="push"&&<S moduleName="Push Notifications">
-                          <Ye/>
+                          <Ue/>
                         </S>}
                       {e==="socket"&&<S moduleName="WebSocket & Socket.IO">
-                          <_e/>
+                          <$e/>
                         </S>}
                       {e==="device"&&<S moduleName="Device Diagnostics">
-                          <Je/>
+                          <Ke/>
                         </S>}
                       {e==="storage"&&<S moduleName="Storage Inspector">
-                          <Ke/>
+                          <Qe/>
                         </S>}
                       {e==="media"&&<S moduleName="Media Gallery">
-                          <Xe/>
+                          <Ze/>
                         </S>}
-                      {q.OS==="android"&&To()&&e==="debugging"&&<S moduleName="Debugging Utilities">
-                            <Qe/>
+                      {q.OS==="android"&&Eo()&&e==="debugging"&&<S moduleName="Debugging Utilities">
+                            <Xe/>
                           </S>}
-                    </B>:<Eo/>}
+                    </B>:<Po/>}
                 </B>
 
                 
                 {G&&<B style={[T.absoluteFill,{backgroundColor:C.contentBg,zIndex:10}]}>
                     {e==="apis"&&Y!=null&&<S moduleName="Network Request Details">
-                        <Ae/>
+                        <Pe/>
                       </S>}
-                    {e==="analytics"&&W!=null&&<S moduleName="Analytics Event Details">
-                        <Oe event={W}/>
+                    {e==="analytics"&&F!=null&&<S moduleName="Analytics Event Details">
+                        <Fe event={F}/>
                       </S>}
                     {e==="logs"&&U!=null&&<S moduleName="Console Log Details">
-                        <Pe/>
+                        <Ae/>
                       </S>}
                     {e==="redux"&&<S moduleName="Redux Action & State Details">
-                        <Fe/>
+                        <Ge/>
                       </S>}
                     {e==="crash"&&_!=null&&<S moduleName="Crash Log Details">
-                        <He/>
+                        <Ye/>
                       </S>}
-                    {e==="push"&&F!=null&&<S moduleName="Push Notification Details">
-                        <Ue item={F}onClose={()=>K(null)}/>
+                    {e==="push"&&W!=null&&<S moduleName="Push Notification Details">
+                        <_e item={W}onClose={()=>K(null)}/>
                       </S>}
                     {e==="socket"&&z!=null&&<S moduleName="WebSocket & Socket.IO Details">
-                        <$e item={z}onClose={()=>Q(null)}/>
+                        <Je item={z}onClose={()=>Q(null)}/>
                       </S>}
                   </B>}
 
                 
-                {N!==null&&<o.View style={[T.absoluteFill,{backgroundColor:C.grayBackground,opacity:x,transform:[{translateY:x.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                {v!==null&&<o.View style={[T.absoluteFill,{backgroundColor:C.grayBackground,opacity:E,transform:[{translateY:E.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
                     <S moduleName="Settings Panel">
-                      <Ze/>
+                      <So/>
                     </S>
                   </o.View>}
 
                 
-                {R&&<o.View style={[T.absoluteFill,{backgroundColor:C.primaryLight,opacity:E,transform:[{translateY:E.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                {R&&<o.View style={[T.absoluteFill,{backgroundColor:C.primaryLight,opacity:x,transform:[{translateY:x.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
                     <S moduleName="About & Diagnostics">
-                      <So onClose={()=>X(!1)}/>
+                      <Bo onClose={()=>X(!1)}/>
                     </S>
                   </o.View>}
 
                 
-                {D&&<o.View style={[T.absoluteFill,{backgroundColor:C.primaryLight,opacity:A,transform:[{translateY:A.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                {D&&<o.View style={[T.absoluteFill,{backgroundColor:C.primaryLight,opacity:P,transform:[{translateY:P.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
                     <S moduleName="Support & Community">
-                      <Bo onClose={()=>Z(!1)}/>
+                      <Co onClose={()=>Z(!1)}/>
                     </S>
                   </o.View>}
               </B>
 
               
-              <Ro/>
+              <Do/>
 
               
-              <Mo/>
+              <No/>
 
               
-              <No/>
+              <Ro/>
 
               
-              <Vo/>
+              <Mo/>
 
               
-              <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}))}/>
+              <Vo visible={N.visible}title={N.title}message={N.message}confirmText={N.confirmText}cancelText={N.cancelText}isDestructive={!0}icon="trash"onConfirm={N.onConfirm}onCancel={()=>ie(ne=>({...ne,visible:!1}))}/>
             </B>
           </B>
         </Me>
-      {re&&<Do onStateChange={ae}/>}
+      {te&&<To onStateChange={ae}/>}
     </Se>
-    </>},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}>
+    </>},Po=se.memo(function(){const V=L(new o.Value(.35)).current;return A(()=>{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={k.container}>
       
-      <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 style={k.toolbarSkeleton}>
+        <o.View style={[k.searchBarSkeleton,{opacity:V}]}/>
+        <B style={k.actionButtonsRow}>
+          <o.View style={[k.iconButtonSkeleton,{opacity:V}]}/>
+          <o.View style={[k.iconButtonSkeleton,{opacity:V}]}/>
         </B>
       </B>
 
       
-      <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 style={k.chipStripSkeleton}>
+        <o.View style={[k.chipSkeleton,{width:48,opacity:V}]}/>
+        <o.View style={[k.chipSkeleton,{width:68,opacity:V}]}/>
+        <o.View style={[k.chipSkeleton,{width:76,opacity:V}]}/>
+        <o.View style={[k.chipSkeleton,{width:58,opacity:V}]}/>
       </B>
 
       
-      {[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}/>
+      {[0,1,2,3].map(M=><o.View key={`skeleton_card_${M}`}style={[k.cardSkeleton,{opacity:V}]}>
+          <B style={k.cardTopRow}>
+            <B style={k.badgeGroup}>
+              <B style={k.statusBadgeSkeleton}/>
+              <B style={k.methodBadgeSkeleton}/>
             </B>
-            <B style={t.timeSkeleton}/>
+            <B style={k.timeSkeleton}/>
           </B>
-          <B style={t.urlLineLong}/>
-          <B style={t.urlLineShort}/>
-          <B style={t.cardBottomRow}>
-            <B style={t.metaPillSkeleton}/>
-            <B style={t.metaPillSkeleton}/>
+          <B style={k.urlLineLong}/>
+          <B style={k.urlLineShort}/>
+          <B style={k.cardBottomRow}>
+            <B style={k.metaPillSkeleton}/>
+            <B style={k.metaPillSkeleton}/>
           </B>
         </o.View>)}
-    </B>}),t=T.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;
+    </B>}),k=T.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;