react-native-inapp-inspector 2.4.1 → 2.5.0

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

@@ -0,0 +1,172 @@
+import oe,{useState as M,useMemo as q}from"react";import{Modal as Ce,View as C,Text as B,TextInput as Se,ScrollView as J,StyleSheet as v,TouchableWithoutFeedback as Y,Platform as O,Dimensions as Te,DevSettings as G}from"react-native";import E from"react-native-linear-gradient";import V from"../TouchableScale";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as x}from"../../styles/AppFonts";import{GlobeIcon as Be,CheckIcon as Re,CloseWhite as U,SearchIcon as Ie,ResetIcon as Ve}from"../NetworkIcons";import{useTranslation as Le,SUPPORTED_LANGUAGES as Q,setLanguage as Fe,getLanguage as Ae}from"../../i18n";import{loadSettings as Pe,saveSettings as We}from"../../helpers/settingsStore";import{triggerNativeHaptic as N}from"../../native/NativeInspector";import{showToast as Ne}from"../../helpers/toast";export const COUNTRY_OPTIONS=[{id:"all",name:"All",flag:"\u{1F310}",badge:"25"},{id:"in",name:"India",flag:"\u{1F1EE}\u{1F1F3}",badge:"9",langCodes:["hi","ta","te","kn","ml","bn","mr","gu","pa"]},{id:"us",name:"United States",flag:"\u{1F1FA}\u{1F1F8}",badge:"2",langCodes:["en","es"]},{id:"gb",name:"United Kingdom",flag:"\u{1F1EC}\u{1F1E7}",badge:"1",langCodes:["en"]},{id:"de",name:"Germany",flag:"\u{1F1E9}\u{1F1EA}",badge:"1",langCodes:["de"]},{id:"jp",name:"Japan",flag:"\u{1F1EF}\u{1F1F5}",badge:"1",langCodes:["ja"]},{id:"ca",name:"Canada",flag:"\u{1F1E8}\u{1F1E6}",badge:"2",langCodes:["en","fr"]},{id:"global",name:"Global / Europe & Asia",flag:"\u{1F30D}",badge:"11",langCodes:["it","id","tr","vi","nl","pl","pt","ru","ar","zh","ko"]}];const _={en:"English (Default)",es:"Spanish",fr:"French",de:"German",zh:"Chinese (Simplified)",ja:"Japanese",ko:"Korean",pt:"Portuguese",ru:"Russian",hi:"Hindi",ta:"Tamil",te:"Telugu",kn:"Kannada",ml:"Malayalam",bn:"Bengali",mr:"Marathi",gu:"Gujarati",pa:"Punjabi",ar:"Arabic",it:"Italian",id:"Indonesian",tr:"Turkish",vi:"Vietnamese",nl:"Dutch",pl:"Polish"};export const LanguageSelectorModal=oe.memo(({visible:X,onClose:P})=>{const{t:k}=Le(),[L,j]=M(""),[F,Z]=M("all"),[R,D]=M(null),W=Ae(),A=e.primaryLight!==e.white,$=q(()=>COUNTRY_OPTIONS.find(o=>o.id===F)||COUNTRY_OPTIONS[0],[F]),K=q(()=>Q.filter(o=>{if(F!=="all"&&$?.langCodes&&!$.langCodes.includes(o.code))return!1;if(!L.trim())return!0;const T=L.trim().toLowerCase(),I=_[o.code]?.toLowerCase()||"";return o.name.toLowerCase().includes(T)||o.nativeName.toLowerCase().includes(T)||o.code.toLowerCase().includes(T)||I.includes(T)}),[L,F,$]),ee=(o,T,I)=>{o!==W&&(N("light"),D({code:o,flag:T,nativeName:I}))},te=async()=>{if(!R)return;N("medium"),Fe(R.code);try{const I=await Pe();await We({...I,language:R.code})}catch{}const{flag:o,nativeName:T}=R;D(null),P(),j(""),Ne(`\u{1F504} ${o} ${T}`),__DEV__&&G&&G.reload&&G.reload()},H=()=>{N("light"),D(null)};return<Ce visible={X}transparent={!0}animationType="slide"statusBarTranslucent={!0}onRequestClose={P}>
+      <C style={t.overlay}>
+        
+        <Y onPress={P}accessible={!0}accessibilityRole="button"accessibilityLabel="Close bottom sheet">
+          <C style={t.backdrop}/>
+        </Y>
+
+        
+        <C style={[t.bottomSheet,{backgroundColor:A?e.npmDark:e.white}]}>
+          
+          <C style={t.handleBarWrap}>
+            <C style={[t.handleBar,{backgroundColor:A?"rgba(255,255,255,0.25)":"rgba(0,0,0,0.18)"}]}/>
+          </C>
+
+          
+          <C style={t.header}>
+            <C style={t.headerTitleRow}>
+              <E colors={[e.indigo600,e.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={t.globeIconWrap}>
+                <Be size={17}color={e.white}/>
+              </E>
+              <C>
+                <C style={t.titleRow}>
+                  <B style={t.titleText}>
+                    {k("settings.general.selectLanguage","Select Language")}
+                  </B>
+                  <C style={t.countBadge}>
+                    <B style={t.countBadgeText}>25</B>
+                  </C>
+                </C>
+                <B style={t.subTitleText}>
+                  {k("settings.general.languageDescription","Choose preferred display language")}
+                </B>
+              </C>
+            </C>
+            <V onPress={P}hitSlop={12}accessible={!0}accessibilityRole="button"accessibilityLabel="Close language selector"style={[t.closeBtn,{backgroundColor:A?"rgba(255, 255, 255, 0.16)":"rgba(0, 0, 0, 0.08)",borderColor:A?"rgba(255, 255, 255, 0.30)":"rgba(0, 0, 0, 0.18)"}]}>
+              <U size={14}color={A?e.white:"#0F172A"}/>
+            </V>
+          </C>
+
+          
+          <C style={t.searchContainer}>
+            <Ie color={e.grayTextWeak}size={15}/>
+            <Se value={L}onChangeText={j}placeholder={k("common.search","Search language, country or code...")}placeholderTextColor={e.grayTextWeak}style={t.searchInput}autoCapitalize="none"autoCorrect={!1}clearButtonMode="never"/>
+            {L.length>0&&<V onPress={()=>j("")}hitSlop={8}style={t.searchClearBtn}>
+                <U size={11}color={e.grayText}/>
+              </V>}
+          </C>
+
+          
+          <C style={t.countryScrollWrap}>
+            <J horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={t.countryScrollContent}>
+              {COUNTRY_OPTIONS.map(o=>{const T=o.id===F;return<V key={o.id}onPress={()=>{N("light"),Z(o.id)}}style={[t.countryChip,T&&t.countryChipActive]}>
+                    <B style={t.countryChipFlag}>{o.flag}</B>
+                    <B style={[t.countryChipText,T&&t.countryChipTextActive]}>
+                      {o.name}
+                    </B>
+                    {o.badge&&<C style={[t.countryChipBadge,T&&t.countryChipBadgeActive]}>
+                        <B style={[t.countryChipBadgeText,T&&t.countryChipBadgeTextActive]}>
+                          {o.badge}
+                        </B>
+                      </C>}
+                  </V>})}
+            </J>
+          </C>
+
+          
+          <J style={t.scrollList}contentContainerStyle={t.scrollContent}showsVerticalScrollIndicator={!0}keyboardShouldPersistTaps="handled">
+            {K.length===0?<C style={t.emptyStateWrap}>
+                <B style={t.emptyStateText}>
+                  {k("common.noMatches","No languages match your search")}
+                </B>
+              </C>:K.map(o=>{const T=o.code===W,I=_[o.code]||o.name;return<V key={o.code}onPress={()=>ee(o.code,o.flag,o.nativeName)}style={[t.langRow,T&&t.langRowSelected]}>
+                    
+                    {T&&<C style={t.activeAccentBar}/>}
+
+                    <C style={t.langRowLeft}>
+                      <C style={[t.flagContainer,T&&t.flagContainerSelected]}>
+                        <B style={t.langFlag}>{o.flag}</B>
+                      </C>
+                      <C style={t.langTextCol}>
+                        <C style={t.langTitleRow}>
+                          <B style={[t.langNativeName,T&&t.langNativeNameSelected]}>
+                            {o.nativeName}
+                          </B>
+                          <C style={[t.codePill,T&&t.codePillSelected]}>
+                            <B style={[t.codePillText,T&&t.codePillTextSelected]}>
+                              {o.code.toUpperCase()}
+                            </B>
+                          </C>
+                        </C>
+                        <B style={[t.langEnglishName,T&&t.langEnglishNameSelected]}>
+                          {I}
+                        </B>
+                      </C>
+                    </C>
+
+                    {T?<E colors={[e.indigo600,e.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={t.checkIconWrap}>
+                        <Re size={12}color={e.white}/>
+                      </E>:<C style={t.uncheckPlaceholder}/>}
+                  </V>})}
+          </J>
+        </C>
+
+        
+        {R!=null&&<C style={[v.absoluteFill,S.overlay]}>
+            <Y onPress={H}>
+              <C style={S.backdrop}/>
+            </Y>
+            <C style={S.card}>
+              
+              <V onPress={H}hitSlop={8}style={S.cornerCloseBtn}>
+                <U size={11}color={e.grayTextWeak}/>
+              </V>
+
+              
+              <C style={S.iconBadge}>
+                <B style={S.iconFlag}>{R.flag}</B>
+              </C>
+
+              
+              <B style={S.title}>
+                {k("language.confirmTitle","Change Language?")}
+              </B>
+              <B style={S.message}>
+                {k("language.confirmMessage",`Switch to ${R.nativeName} (${_[R.code]||R.nativeName})? The inspector will reload to apply the new language.`)}
+              </B>
+
+              
+              <C style={S.switchPreview}>
+                <C style={S.switchItem}>
+                  <B style={S.switchLabel}>
+                    {k("language.current","Current")}
+                  </B>
+                  <B style={S.switchValue}>
+                    {Q.find(o=>o.code===W)?.flag||"\u{1F310}"}{" "}
+                    {W.toUpperCase()}
+                  </B>
+                </C>
+                <C style={S.switchArrow}>
+                  <B style={S.switchArrowText}>→</B>
+                </C>
+                <C style={S.switchItem}>
+                  <B style={[S.switchLabel,{color:e.indigo600}]}>
+                    {k("language.new","New")}
+                  </B>
+                  <B style={[S.switchValue,{color:e.indigo600,fontFamily:x.interBold}]}>
+                    {R.flag} {R.code.toUpperCase()}
+                  </B>
+                </C>
+              </C>
+
+              
+              <C style={S.buttonRow}>
+                <V accessible={!0}accessibilityRole="button"accessibilityLabel={k("common.cancel","Cancel")}onPress={H}style={S.cancelBtn}>
+                  <B style={S.cancelBtnText}>
+                    {k("common.cancel","Cancel")}
+                  </B>
+                </V>
+
+                <V accessible={!0}accessibilityRole="button"accessibilityLabel={k("language.confirmApply","Apply & Reload")}onPress={te}style={S.confirmBtn}>
+                  <E colors={[e.indigo600,e.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={S.confirmBtnGradient}>
+                    <Ve size={13}color={e.white}/>
+                    <B style={S.confirmBtnText}>
+                      {k("language.confirmApply","Apply & Reload")}
+                    </B>
+                  </E>
+                </V>
+              </C>
+            </C>
+          </C>}
+      </C>
+    </Ce>});const t=v.create({overlay:{flex:1,backgroundColor:"rgba(10, 15, 30, 0.60)",justifyContent:"flex-end"},backdrop:{...v.absoluteFillObject},bottomSheet:{width:"100%",height:Math.min(Math.max(Te.get("window").height*.74,520),620),borderTopLeftRadius:26,borderTopRightRadius:26,paddingTop:8,paddingBottom:O.OS==="ios"?28:16,shadowColor:e.black,shadowOpacity:.28,shadowRadius:20,shadowOffset:{width:0,height:-6},elevation:16},handleBarWrap:{alignItems:"center",paddingVertical:5},handleBar:{width:36,height:4,borderRadius:2},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:10,borderBottomWidth:v.hairlineWidth,borderBottomColor:e.grayBorderSecondary},headerTitleRow:{flexDirection:"row",alignItems:"center",gap:10},globeIconWrap:{width:34,height:34,borderRadius:10,alignItems:"center",justifyContent:"center",shadowColor:e.indigo600,shadowOffset:{width:0,height:2},shadowOpacity:.25,shadowRadius:4,elevation:3},titleRow:{flexDirection:"row",alignItems:"center",gap:6},titleText:{fontFamily:x.interBold,fontSize:15.5,color:e.primaryBlack,letterSpacing:-.2},countBadge:{backgroundColor:`${e.indigo600}18`,paddingHorizontal:6,paddingVertical:1,borderRadius:10},countBadgeText:{fontFamily:x.interBold,fontSize:10,color:e.indigo600},subTitleText:{fontFamily:x.interRegular,fontSize:11,color:e.grayText,marginTop:1},closeBtn:{width:30,height:30,borderRadius:15,backgroundColor:`${e.black}0D`,borderWidth:1,borderColor:`${e.black}1A`,alignItems:"center",justifyContent:"center"},searchContainer:{flexDirection:"row",alignItems:"center",marginHorizontal:14,marginTop:10,marginBottom:6,paddingHorizontal:10,height:40,borderRadius:12,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary,gap:8},searchInput:{flex:1,height:"100%",fontSize:12.5,fontFamily:x.interMedium,color:e.primaryBlack,paddingVertical:0},searchClearBtn:{width:20,height:20,borderRadius:10,backgroundColor:`${e.grayText}22`,alignItems:"center",justifyContent:"center"},countryScrollWrap:{borderBottomWidth:v.hairlineWidth,borderBottomColor:e.grayBorderSecondary,paddingVertical:7},countryScrollContent:{paddingHorizontal:14,gap:6,flexDirection:"row",alignItems:"center"},countryChip:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:6,borderRadius:20,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary,gap:5},countryChipActive:{backgroundColor:`${e.brandPurple}14`,borderColor:`${e.brandPurple}55`},countryChipFlag:{fontSize:13},countryChipText:{fontFamily:x.interMedium,fontSize:11.5,color:e.primaryBlack},countryChipTextActive:{fontFamily:x.interBold,color:e.brandPurple},countryChipBadge:{paddingHorizontal:5.5,paddingVertical:1,borderRadius:8,backgroundColor:`${e.black}0A`},countryChipBadgeActive:{backgroundColor:`${e.brandPurple}22`},countryChipBadgeText:{fontFamily:x.interSemiBold,fontSize:9.5,color:e.grayText},countryChipBadgeTextActive:{color:e.brandPurple,fontFamily:x.interBold},scrollList:{flex:1},scrollContent:{paddingBottom:16},emptyStateWrap:{padding:36,alignItems:"center",justifyContent:"center"},emptyStateText:{fontFamily:x.interMedium,fontSize:13,color:e.grayText},langRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:11,borderBottomWidth:v.hairlineWidth,borderBottomColor:e.grayBorderSecondary,position:"relative"},langRowSelected:{backgroundColor:`${e.indigo600}0C`},activeAccentBar:{position:"absolute",left:0,top:4,bottom:4,width:3.5,borderTopRightRadius:3,borderBottomRightRadius:3,backgroundColor:e.indigo600},langRowLeft:{flexDirection:"row",alignItems:"center",gap:12,flex:1},flagContainer:{width:36,height:36,borderRadius:10,backgroundColor:e.grayBackground,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:e.grayBorderSecondary},flagContainerSelected:{borderColor:`${e.indigo600}44`,backgroundColor:`${e.indigo600}14`},langFlag:{fontSize:19},langTextCol:{flex:1},langTitleRow:{flexDirection:"row",alignItems:"center",gap:6},langNativeName:{fontFamily:x.interSemiBold,fontSize:14,color:e.primaryBlack},langNativeNameSelected:{fontFamily:x.interBold,color:e.indigo600},codePill:{backgroundColor:`${e.black}0A`,paddingHorizontal:5,paddingVertical:1,borderRadius:4},codePillSelected:{backgroundColor:`${e.indigo600}18`},codePillText:{fontSize:9.5,fontFamily:x.interBold,color:e.grayText,letterSpacing:.4},codePillTextSelected:{color:e.indigo600},langEnglishName:{fontFamily:x.interRegular,fontSize:11.5,color:e.grayText,marginTop:1.5},langEnglishNameSelected:{color:e.indigo600,fontFamily:x.interMedium},checkIconWrap:{width:24,height:24,borderRadius:12,alignItems:"center",justifyContent:"center",shadowColor:e.indigo600,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:3,elevation:3},uncheckPlaceholder:{width:24,height:24}}),S=v.create({overlay:{flex:1,backgroundColor:"rgba(10, 15, 30, 0.72)",justifyContent:"center",alignItems:"center",paddingHorizontal:24,zIndex:999999,elevation:999},backdrop:{...v.absoluteFillObject},card:{width:"100%",maxWidth:340,backgroundColor:e.white,borderRadius:22,paddingTop:24,paddingBottom:18,paddingHorizontal:20,alignItems:"center",borderWidth:1,borderColor:`${e.white}CC`,...O.select({ios:{shadowColor:e.indigo600,shadowOffset:{width:0,height:12},shadowOpacity:.28,shadowRadius:24},android:{elevation:12}})},cornerCloseBtn:{position:"absolute",top:14,right:14,width:28,height:28,borderRadius:14,backgroundColor:e.graySurface,alignItems:"center",justifyContent:"center"},iconBadge:{width:58,height:58,borderRadius:29,borderWidth:1.5,borderColor:`${e.indigo600}33`,backgroundColor:`${e.indigo600}14`,alignItems:"center",justifyContent:"center",marginBottom:14},iconFlag:{fontSize:28},title:{fontFamily:x.interBold,fontSize:17,color:e.slate900,textAlign:"center",marginBottom:8,letterSpacing:-.2},message:{fontFamily:x.interRegular,fontSize:13,color:e.grayTextWeak,textAlign:"center",lineHeight:19,paddingHorizontal:4,marginBottom:16},switchPreview:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:10,marginBottom:20,paddingVertical:10,paddingHorizontal:16,borderRadius:12,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary,width:"100%"},switchItem:{alignItems:"center",gap:3,flex:1},switchLabel:{fontFamily:x.interMedium,fontSize:10,color:e.grayText,textTransform:"uppercase",letterSpacing:.5},switchValue:{fontFamily:x.interSemiBold,fontSize:14,color:e.primaryBlack},switchArrow:{width:24,height:24,borderRadius:12,backgroundColor:`${e.indigo600}18`,alignItems:"center",justifyContent:"center"},switchArrowText:{fontFamily:x.interBold,fontSize:14,color:e.indigo600},buttonRow:{flexDirection:"row",alignItems:"center",gap:10,width:"100%"},cancelBtn:{flex:1,height:44,borderRadius:12,backgroundColor:e.graySurface,borderWidth:1,borderColor:e.grayBorderSecondary,alignItems:"center",justifyContent:"center"},cancelBtnText:{fontFamily:x.interSemiBold,fontSize:14,color:e.grayText},confirmBtn:{flex:1.15,height:44,borderRadius:12,overflow:"hidden",...O.select({ios:{shadowColor:e.indigo600,shadowOffset:{width:0,height:4},shadowOpacity:.35,shadowRadius:8},android:{elevation:4}})},confirmBtnGradient:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,borderRadius:12},confirmBtnText:{fontFamily:x.interBold,fontSize:13.5,color:e.white,letterSpacing:.2}});export default LanguageSelectorModal;

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

@@ -1,134 +1,154 @@
-import Q,{useEffect as L,useRef as I}from"react";import{Animated as w,Modal as X,Platform as O,Pressable as Z,StatusBar as Se,StyleSheet as E,View as S}from"react-native";import{useInspector as we}from"./InspectorContext";import Be from"../ErrorBoundary";import B from"../ModuleErrorBoundary";import Ce from"./FabLauncher";import Ve from"./InspectorHeader";import Re from"./TabBar";import Ne from"./NetworkTab";import De from"./NetworkDetail";import Me from"./LogDetail";import Ee from"./ConsoleTab";import Te from"./AnalyticsTab";import Ae from"../AnalyticsDetail";import Pe from"./ReduxTab";import Le from"./ReduxDetail";import Ie from"./CrashTab";import Oe from"./CrashDetail";import Fe from"./PushTab";import Ge from"./PushDetail";import We from"./DeviceInfoTab";import He from"./StorageTab";import Ue from"./DebuggingTab";import{MediaGalleryTab as Ye}from"./MediaGalleryTab";import _e from"./SettingsPanel";import $e from"./AboutModal";import Je from"./NpmUpdateToast";import Ke from"./NpmStarPrompt";import Qe from"../Toast";import F from"../../styles";import{AppColors as C}from"../../styles/AppColors";import Xe from"./NavigationTracker";import{isLocalDebugEnvironment as Ze}from"../../helpers";const eo=()=>{const{visible:T,modalAnimationType:V,closeModal:R,modalHeightPercent:x,selected:G,selectedEvent:A,selectedLog:W,selectedReduxSlice:z,selectedReduxAction:U,selectedCrash:q,selectedPush:P,setSelectedPush:Y,settingsPage:N,isAboutOpen:D,setIsAboutOpen:_,activeTab:e,isReady:$,enabled:j,hasNavigationContext:J,setNavState:K}=we(),H=e==="apis"&&G!=null||e==="analytics"&&A!=null||e==="logs"&&W!=null||e==="redux"&&(z!=null||U!=null)||e==="crash"&&q!=null||e==="push"&&P!=null,M=I(new w.Value(0)).current;L(()=>{N!==null&&(M.setValue(0),w.spring(M,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[N!==null]);const v=I(new w.Value(0)).current;return L(()=>{D&&(v.setValue(0),w.spring(v,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[D]),<>
-      {(O.OS==="ios"||O.OS==="android")&&j&&!T&&<Ce/>}
-      <X visible={T}animationType={V}transparent statusBarTranslucent={!0}onRequestClose={R}>
-        <Be onClose={R}>
-          <S style={F.modalBackdrop}>
-            <Z style={F.modalBackdropPressable}onPress={R}/>
-            <S style={[F.modalContentCard,{height:`${x}%`,borderTopLeftRadius:x>=100?0:20,borderTopRightRadius:x>=100?0:20}]}>
-              <Se translucent backgroundColor="transparent"barStyle="light-content"/>
+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}]}>
+              <Ce translucent backgroundColor="transparent"barStyle="light-content"/>
 
-              <Ve/>
+              <Re/>
+              <De/>
 
-              <S style={{flex:1}}>
+              <B style={{flex:1,overflow:"hidden",backgroundColor:k.grayBackground}}>
                 
-                <S style={{flex:1}}pointerEvents={H||N!==null||D?"none":"auto"}>
-                  <Re/>
-                  {$?<S style={{flex:1}}>
-                      {e==="apis"&&<B moduleName="Network API Monitor">
-                          <Ne/>
-                        </B>}
-                      {e==="logs"&&<B moduleName="Console Logs Monitor">
+                <B style={{flex:1}}pointerEvents={U||N!==null||R||D?"none":"auto"}>
+                  <Te/>
+                  {X?<B style={{flex:1}}>
+                      {e==="apis"&&<S moduleName="Network API Monitor">
                           <Ee/>
-                        </B>}
-                      {e==="analytics"&&<B moduleName="Analytics Event Tracker">
-                          <Te/>
-                        </B>}
-                      {e==="redux"&&<B moduleName="Redux State Inspector">
-                          <Pe/>
-                        </B>}
-                      {e==="crash"&&<B moduleName="Crash Reporter">
+                        </S>}
+                      {e==="logs"&&<S moduleName="Console Logs Monitor">
+                          <Le/>
+                        </S>}
+                      {e==="analytics"&&<S moduleName="Analytics Event Tracker">
                           <Ie/>
-                        </B>}
-                      {e==="push"&&<B moduleName="Push Notifications">
-                          <Fe/>
-                        </B>}
-                      {e==="device"&&<B moduleName="Device Diagnostics">
+                        </S>}
+                      {e==="redux"&&<S moduleName="Redux State Inspector">
                           <We/>
-                        </B>}
-                      {e==="storage"&&<B moduleName="Storage Inspector">
-                          <He/>
-                        </B>}
-                      {e==="media"&&<B moduleName="Media Gallery">
+                        </S>}
+                      {e==="crash"&&<S moduleName="Crash Reporter">
+                          <Ge/>
+                        </S>}
+                      {e==="push"&&<S moduleName="Push Notifications">
                           <Ye/>
-                        </B>}
-                      {O.OS==="android"&&Ze()&&e==="debugging"&&<B moduleName="Debugging Utilities">
-                            <Ue/>
-                          </B>}
-                    </S>:<So/>}
-                </S>
+                        </S>}
+                      {e==="socket"&&<S moduleName="WebSocket & Socket.IO">
+                          <_e/>
+                        </S>}
+                      {e==="device"&&<S moduleName="Device Diagnostics">
+                          <Je/>
+                        </S>}
+                      {e==="storage"&&<S moduleName="Storage Inspector">
+                          <Ke/>
+                        </S>}
+                      {e==="media"&&<S moduleName="Media Gallery">
+                          <Xe/>
+                        </S>}
+                      {z.OS==="android"&&To()&&e==="debugging"&&<S moduleName="Debugging Utilities">
+                            <Qe/>
+                          </S>}
+                    </B>:<Eo/>}
+                </B>
 
                 
-                {H&&<S style={[E.absoluteFill,{backgroundColor:C.contentBg,zIndex:10}]}>
-                    {e==="apis"&&G!=null&&<B moduleName="Network Request Details">
-                        <De/>
-                      </B>}
-                    {e==="analytics"&&A!=null&&<B moduleName="Analytics Event Details">
-                        <Ae event={A}/>
-                      </B>}
-                    {e==="logs"&&W!=null&&<B moduleName="Console Log Details">
-                        <Me/>
-                      </B>}
-                    {e==="redux"&&<B moduleName="Redux Action & State Details">
-                        <Le/>
-                      </B>}
-                    {e==="crash"&&q!=null&&<B moduleName="Crash Log Details">
-                        <Oe/>
-                      </B>}
-                    {e==="push"&&P!=null&&<B moduleName="Push Notification Details">
-                        <Ge item={P}onClose={()=>Y(null)}/>
-                      </B>}
-                  </S>}
+                {U&&<B style={[v.absoluteFill,{backgroundColor:k.contentBg,zIndex:10}]}>
+                    {e==="apis"&&q!=null&&<S moduleName="Network Request Details">
+                        <Ae/>
+                      </S>}
+                    {e==="analytics"&&O!=null&&<S moduleName="Analytics Event Details">
+                        <Oe event={O}/>
+                      </S>}
+                    {e==="logs"&&H!=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">
+                        <He/>
+                      </S>}
+                    {e==="push"&&W!=null&&<S moduleName="Push Notification Details">
+                        <Ue item={W}onClose={()=>j(null)}/>
+                      </S>}
+                    {e==="socket"&&F!=null&&<S moduleName="WebSocket & Socket.IO Details">
+                        <$e item={F}onClose={()=>J(null)}/>
+                      </S>}
+                  </B>}
 
                 
-                {N!==null&&<w.View style={[E.absoluteFill,{backgroundColor:C.grayBackground,opacity:M,transform:[{translateY:M.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
-                    <B moduleName="Settings Panel">
-                      <_e/>
-                    </B>
-                  </w.View>}
+                {N!==null&&<o.View style={[v.absoluteFill,{backgroundColor:k.grayBackground,opacity:T,transform:[{translateY:T.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <S moduleName="Settings Panel">
+                      <Ze/>
+                    </S>
+                  </o.View>}
 
                 
-                {D&&<w.View style={[E.absoluteFill,{backgroundColor:C.primaryLight,opacity:v,transform:[{translateY:v.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
-                    <B moduleName="About & Diagnostics">
-                      <$e onClose={()=>_(!1)}/>
-                    </B>
-                  </w.View>}
-              </S>
+                {R&&<o.View style={[v.absoluteFill,{backgroundColor:k.primaryLight,opacity:x,transform:[{translateY:x.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <S moduleName="About & Diagnostics">
+                      <So onClose={()=>K(!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]})}]}]}>
+                    <S moduleName="Support & Community">
+                      <Bo onClose={()=>Q(!1)}/>
+                    </S>
+                  </o.View>}
+              </B>
+
+              
+              <Ro/>
+
+              
+              <Mo/>
 
               
-              <Qe/>
+              <No/>
 
               
-              <Je/>
+              <Vo/>
 
               
-              <Ke/>
-            </S>
-          </S>
-        </Be>
-      {J&&<Xe onStateChange={K}/>}
-    </X>
-    </>},So=Q.memo(function(){const V=I(new w.Value(.35)).current;return L(()=>{const R=w.loop(w.sequence([w.timing(V,{toValue:.85,duration:750,useNativeDriver:!1}),w.timing(V,{toValue:.35,duration:750,useNativeDriver:!1})]));return R.start(),()=>R.stop()},[V]),<S style={o.container}>
+              <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}))}/>
+            </B>
+          </B>
+        </Me>
+      {oe&&<Do onStateChange={re}/>}
+    </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}>
       
-      <S style={o.toolbarSkeleton}>
-        <w.View style={[o.searchBarSkeleton,{opacity:V}]}/>
-        <S style={o.actionButtonsRow}>
-          <w.View style={[o.iconButtonSkeleton,{opacity:V}]}/>
-          <w.View style={[o.iconButtonSkeleton,{opacity:V}]}/>
-        </S>
-      </S>
+      <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>
+      </B>
 
       
-      <S style={o.chipStripSkeleton}>
-        <w.View style={[o.chipSkeleton,{width:48,opacity:V}]}/>
-        <w.View style={[o.chipSkeleton,{width:68,opacity:V}]}/>
-        <w.View style={[o.chipSkeleton,{width:76,opacity:V}]}/>
-        <w.View style={[o.chipSkeleton,{width:58,opacity:V}]}/>
-      </S>
+      <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>
 
       
-      {[0,1,2,3].map(R=><w.View key={`skeleton_card_${R}`}style={[o.cardSkeleton,{opacity:V}]}>
-          <S style={o.cardTopRow}>
-            <S style={o.badgeGroup}>
-              <S style={o.statusBadgeSkeleton}/>
-              <S style={o.methodBadgeSkeleton}/>
-            </S>
-            <S style={o.timeSkeleton}/>
-          </S>
-          <S style={o.urlLineLong}/>
-          <S style={o.urlLineShort}/>
-          <S style={o.cardBottomRow}>
-            <S style={o.metaPillSkeleton}/>
-            <S style={o.metaPillSkeleton}/>
-          </S>
-        </w.View>)}
-    </S>}),o=E.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 eo;
+      {[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}/>
+            </B>
+            <B style={r.timeSkeleton}/>
+          </B>
+          <B style={r.urlLineLong}/>
+          <B style={r.urlLineShort}/>
+          <B style={r.cardBottomRow}>
+            <B style={r.metaPillSkeleton}/>
+            <B style={r.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;