react-native-inapp-inspector 2.3.24 → 2.4.0

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

@@ -1,151 +1,153 @@
-import J,{useCallback as de,useMemo as Q,useRef as Oe}from"react";import{FlatList as Ne,Platform as De,Pressable as Ee,ScrollView as He,Text as I,TextInput as Ae,View as S}from"react-native";import{useInspector as Me}from"./InspectorContext";import D from"../TouchableScale";import Se from"../AnimatedEntrance";import We from"../DomainHeader";import $e from"../LogCard";import Ge from"../EmptyState";import Qe from"../EndOfListFooter";import _e from"./NetworkFilterModal";import w from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{METHOD_COLORS as we}from"../../constants";import{useTranslation as Ue}from"../../i18n";import{SearchIcon as Ke,ClearIcon as Xe,TrashIcon as Je,SortArrowIcon as Ye,FilterIcon as Ce,CircleCheckIcon as Ze,CircleXIcon as So,LayersIcon as Co,HeaderPauseIcon as To,ClockIcon as Te,RequestIcon as Io,ResponseIcon as Fo,AtomIcon as Ro}from"../NetworkIcons";const Bo=J.memo(()=>{const{groupedData:Y,search:L,setSearch:q,searchScope:Vo,setSearchScope:xe,isRegexSearch:Po,setIsRegexSearch:Lo,isCaseSensitive:Oo,setIsCaseSensitive:vo,quickFilter:_,setQuickFilter:U,handleDelete:ke,selectedLogs:W,sortOrder:j,setSortOrder:$,statusFilters:T,setStatusFilters:H,methodFilters:x,setMethodFilters:A,availableMethods:No,filteredLogs:M,logs:P,toggleSectionFilter:Z,toggleSectionCollapse:ee,minStart:oe,totalRange:te,newLogIds:re,toggleSelect:le,setSelected:se,isNetworkPaused:K,setIsNetworkPaused:Ie}=Me(),{t:ae}=Ue(),Fe=Oe(null),[Re,X]=J.useState(!1),[ie,ne]=J.useState(!1),Be=Q(()=>({statusCodes:T.size>0?new Set(T):new Set(["all"]),methods:x.size>0?new Set(x):new Set(["all"]),latency:"all",protocol:"all",sortBy:j==="newest"?"time_desc":"time_asc"}),[T,x,j]),Ve=de(o=>{o.statusCodes.has("all")||o.statusCodes.size===0?H(new Set):H(new Set(o.statusCodes)),o.methods.has("all")||o.methods.size===0?A(new Set):A(new Set([...o.methods].map(C=>C))),o.sortBy==="time_asc"?$("oldest"):$("newest")},[H,A,$]),O=Q(()=>{let o=0,C=0,b=0,z=0,F=0,G=0;return P.forEach(V=>{const E=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null||!isNaN(E)&&E>=400?o++:!isNaN(E)&&E>=200&&E<400&&C++,(V.duration||0)>=500&&b++;const R=(V.method||"").toUpperCase();R==="POST"&&z++,R==="GET"&&F++;const N=(V.url||"").toLowerCase(),ce=(V.client||"").toLowerCase();(N.includes("graphql")||ce.includes("graphql")||ce.includes("apollo"))&&G++}),{all:P.length,errors:o,success:C,slow:b,post:z,get:F,graphql:G}},[P]),Pe=Q(()=>[{id:"all",label:"All",count:O.all,color:e.purple},{id:"errors",label:"Errors",count:O.errors,color:e.errorColor},{id:"success",label:"2xx OK",count:O.success,color:e.greenColor},{id:"slow",label:"Slow >500ms",count:O.slow,color:e.warningIconGold},{id:"POST",label:"POST",count:O.post,color:we.POST||"#3B82F6"},{id:"GET",label:"GET",count:O.get,color:we.GET||"#10B981"},{id:"graphql",label:"GraphQL",count:O.graphql,color:"#E10098"}],[O]),v=Q(()=>{if(!P||P.length===0)return null;let o=0,C=0,b=0,z=0;const F=[];P.forEach(R=>{if(R.status!=null){C++;const N=typeof R.status=="number"?R.status:parseInt(String(R.status),10);isNaN(N)||N>=200&&N<400&&o++}typeof R.duration=="number"&&R.duration>0&&(F.push(R.duration),b+=R.duration)}),F.sort((R,N)=>R-N);const G=F.length>0?Math.round(b/F.length):0,V=F.length>0?F[Math.floor(F.length*.95)]:0;return{successRate:C>0?Math.round(o/C*100):100,avgDuration:G,p95:V,totalCount:P.length}},[P]),Le=de(({item:o,index:C})=>{if(o.type==="header")return<Se index={C}distance={8}>
-            <We pageName={o.pageName}color={o.color}stats={o.stats}activeFilters={o.activeFilters}onToggleFilter={Z}isCollapsed={o.isCollapsed}onToggleCollapse={ee}isFirst={o.isFirst}timestamp={o.timestamp}/>
-          </Se>;const{log:b,isLast:z,color:F}=o;return<Se index={C}distance={8}style={[w.treeNodeRow,z&&w.treeNodeRowLast]}>
-          <S style={w.treeLines}>
-            <S style={[w.modernTreeLine,{borderColor:F},z&&w.modernTreeLineLast]}/>
-            {!z&&<S style={[w.modernTreeBranch,{borderColor:F}]}/>}
-          </S>
-          <S style={w.treeCardWrapper}>
-            <$e item={b}isSelected={W.has(b.id)}onToggleSelect={le}onPress={()=>{se(b)}}timelineMinStart={oe}timelineTotalRange={te}isNew={re.has(b.id)}searchStr={L}/>
-          </S>
-        </Se>},[oe,te,re,W,le,L,Z,ee,se]);return<S style={{flex:1}}>
-      <S style={{marginTop:6}}>
-            
-            {v!=null&&v.totalCount>0&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:10,paddingVertical:5.5,marginHorizontal:12,marginBottom:6,borderWidth:1,borderColor:e.dividerColor}}>
-                
-                <S style={{flexDirection:"row",alignItems:"center",gap:4.5}}>
-                  <S style={{width:6,height:6,borderRadius:3,backgroundColor:v.successRate>=95?e.greenColor:v.successRate>=80?e.amber500:e.errorColor}}/>
-                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.primaryBlack}}>
-                    {v.successRate}%
-                  </I>
-                  <I style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
-                    {ae("network.successRate")}
-                  </I>
-                </S>
-
-                <S style={{width:1,height:11,backgroundColor:e.dividerColor}}/>
-
-                
-                <S style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                  <Te color={e.purple}size={10}/>
-                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.purple}}>
-                    {v.avgDuration}ms
-                  </I>
-                  <I style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
-                    {ae("network.avgLatency")}
-                  </I>
-                </S>
+import X,{useCallback as de,useMemo as J,useRef as Oe}from"react";import{FlatList as $e,Platform as qe,Pressable as Ne,ScrollView as He,Text as R,TextInput as Ae,View as C}from"react-native";import{useInspector as De}from"./InspectorContext";import O from"../TouchableScale";import Ce from"../AnimatedEntrance";import Me from"../DomainHeader";import Ee from"../LogCard";import We from"../EmptyState";import Ge from"../EndOfListFooter";import Qe from"./NetworkFilterModal";import b from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{METHOD_COLORS as Se}from"../../constants";import{useTranslation as _e}from"../../i18n";import{SearchIcon as Ue,ClearIcon as Ke,TrashIcon as Xe,SortArrowIcon as Je,FilterIcon as Te,ChevronIcon as Ye,CheckIcon as Ze,CircleCheckIcon as Co,CircleXIcon as So,LayersIcon as To,ClockIcon as Vo,RequestIcon as Io,ResponseIcon as Ro,AtomIcon as Fo}from"../NetworkIcons";const Lo=X.memo(()=>{const{groupedData:Y,loadMoreSection:Z,search:F,setSearch:M,setSearchScope:xe,quickFilter:G,setQuickFilter:j,handleDelete:Ve,selectedLogs:E,sortOrder:Q,setSortOrder:v,statusFilters:x,setStatusFilters:q,methodFilters:V,setMethodFilters:N,filteredLogs:$,logs:H,toggleSectionFilter:ee,toggleSectionCollapse:oe,minStart:te,totalRange:re,newLogIds:le,toggleSelect:ie,setSelected:se}=De(),{t:_}=_e(),Ie=Oe(null),[Re,U]=X.useState(!1),[ae,ne]=X.useState(!1),ke=J(()=>({statusCodes:x.size>0?new Set(x):new Set(["all"]),methods:V.size>0?new Set(V):new Set(["all"]),latency:"all",protocol:"all",sortBy:Q==="newest"?"time_desc":"time_asc"}),[x,V,Q]),Fe=de(o=>{o.statusCodes.has("all")||o.statusCodes.size===0?q(new Set):q(new Set(o.statusCodes)),o.methods.has("all")||o.methods.size===0?N(new Set):N(new Set([...o.methods].map(z=>z))),o.sortBy==="time_asc"?v("oldest"):v("newest")},[q,N,v]),L=J(()=>{let o=0,z=0,T=0,I=0,A=0,W=0;return H.forEach(S=>{const P=typeof S.status=="number"?S.status:parseInt(String(S.status),10);S.status===0||S.status==null||!isNaN(P)&&P>=400?o++:!isNaN(P)&&P>=200&&P<400&&z++,(S.duration||0)>=500&&T++;const B=(S.method||"").toUpperCase();B==="POST"&&I++,B==="GET"&&A++;const K=(S.url||"").toLowerCase(),D=(S.client||"").toLowerCase();(K.includes("graphql")||D.includes("graphql")||D.includes("apollo"))&&W++}),{all:H.length,errors:o,success:z,slow:T,post:I,get:A,graphql:W}},[H]),Le=J(()=>[{id:"all",label:"All",count:L.all,color:e.purple},{id:"errors",label:"Errors",count:L.errors,color:e.errorColor},{id:"success",label:"2xx OK",count:L.success,color:e.greenColor},{id:"slow",label:"Slow >500ms",count:L.slow,color:e.warningIconGold},{id:"POST",label:"POST",count:L.post,color:Se.POST||"#3B82F6"},{id:"GET",label:"GET",count:L.get,color:Se.GET||"#10B981"},{id:"graphql",label:"GraphQL",count:L.graphql,color:e.graphqlPink}],[L]),Be=de(({item:o,index:z})=>{if(o.type==="header")return<Ce index={z}distance={8}>
+            <Me pageName={o.pageName}color={o.color}stats={o.stats}activeFilters={o.activeFilters}onToggleFilter={ee}isCollapsed={o.isCollapsed}onToggleCollapse={oe}isFirst={o.isFirst}timestamp={o.timestamp}/>
+          </Ce>;if(o.type==="loadMore"){const{pageName:W,color:S,remainingCount:P,totalCount:B,loadedCount:K,loadMoreStep:D,hasMore:Pe}=o;return<C style={[b.treeNodeRow,b.treeNodeRowLast]}>
+            <C style={b.treeLines}>
+              <C style={[b.modernTreeLine,{borderColor:S},b.modernTreeLineLast]}/>
+            </C>
+            <C style={b.treeCardWrapper}>
+              {Pe?<O onPress={()=>Z(W,50)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${S}14`,borderWidth:1.5,borderColor:`${S}40`,shadowColor:S,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
+                  <C style={{flexDirection:"row",alignItems:"center",gap:8}}>
+                    <C style={{width:22,height:22,borderRadius:11,backgroundColor:S,alignItems:"center",justifyContent:"center",shadowColor:S,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
+                      <Ye color={e.white}size={9}direction="down"/>
+                    </C>
+                    <C>
+                      <R style={{fontFamily:k.interBold,fontSize:12,color:S}}>
+                        {_("footer.loadMoreRequests",{count:D,defaultValue:`Load ${D} More Requests`})}
+                      </R>
+                      <R style={{fontFamily:k.interRegular,fontSize:9.5,color:e.grayTextWeak,marginTop:1}}>
+                        Showing {K} of {B} requests
+                      </R>
+                    </C>
+                  </C>
 
-                <S style={{width:1,height:11,backgroundColor:e.dividerColor}}/>
-
-                
-                <S style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.primaryBlack}}>
-                    {v.p95}ms
-                  </I>
-                  <I style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
-                    P95
-                  </I>
-                </S>
-              </S>}
+                  <C style={{flexDirection:"row",alignItems:"center",backgroundColor:`${S}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${S}40`,gap:3}}>
+                    <R style={{fontFamily:k.interBold,fontSize:10.5,color:S}}>
+                      +{P}
+                    </R>
+                    <R style={{fontFamily:k.interRegular,fontSize:9,color:S}}>
+                      more
+                    </R>
+                  </C>
+                </O>:<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${S}0A`,borderWidth:1,borderColor:`${S}25`}}>
+                  <C style={{flexDirection:"row",alignItems:"center",gap:7}}>
+                    <C style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${S}25`,alignItems:"center",justifyContent:"center"}}>
+                      <Ze color={S}size={8}/>
+                    </C>
+                    <R style={{fontFamily:k.interMedium,fontSize:11,color:e.grayTextStrong}}>
+                      {_("footer.allLoaded",{count:B,defaultValue:`All ${B} requests loaded`})}
+                    </R>
+                  </C>
 
+                  <C style={{backgroundColor:`${S}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
+                    <R style={{fontFamily:k.interBold,fontSize:9.5,color:S}}>
+                      {B}/{B}
+                    </R>
+                  </C>
+                </C>}
+            </C>
+          </C>}const{log:T,isLast:I,color:A}=o;return<Ce index={z}distance={8}style={[b.treeNodeRow,I&&b.treeNodeRowLast]}>
+          <C style={b.treeLines}>
+            <C style={[b.modernTreeLine,{borderColor:A},I&&b.modernTreeLineLast]}/>
+            {!I&&<C style={[b.modernTreeBranch,{borderColor:A}]}/>}
+          </C>
+          <C style={b.treeCardWrapper}>
+            <Ee item={T}isSelected={E.has(T.id)}onToggleSelect={ie}onPress={()=>{se(T)}}timelineMinStart={te}timelineTotalRange={re}isNew={le.has(T.id)}searchStr={F}/>
+          </C>
+        </Ce>},[te,re,le,E,ie,F,ee,oe,Z,se,_]);return<C style={{flex:1}}>
+      <C style={{marginTop:6}}>
             
-            <S style={w.toolbarRow}>
-              <S style={[w.searchContainer,ie&&{borderColor:e.purple,borderWidth:1.5}]}>
-                <Ke color={ie?e.purple:e.grayTextWeak}size={15}/>
-                <Ae placeholder="Search URL, status, method, headers, body..."placeholderTextColor={e.grayTextWeak}value={L}onChangeText={q}onFocus={()=>ne(!0)}onBlur={()=>ne(!1)}style={w.searchInput}autoCorrect={!1}autoCapitalize="none"/>
-
-                {L.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                    <S style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
-                      <I style={{color:e.purple,fontSize:9.5,fontFamily:B.interBold}}>
-                        {M.length}
-                      </I>
-                    </S>
-                    <Ee onPress={()=>q("")}hitSlop={10}style={w.clearBtn}>
-                      <Xe color={e.grayTextWeak}size={13}/>
-                    </Ee>
-                  </S>}
-              </S>
+            <C style={b.toolbarRow}>
+              <C style={[b.searchContainer,ae&&{borderColor:e.purple,borderWidth:1.5}]}>
+                <Ue color={ae?e.purple:e.grayTextWeak}size={15}/>
+                <Ae placeholder="Search URL, status, method, headers, body..."placeholderTextColor={e.grayTextWeak}value={F}onChangeText={M}onFocus={()=>ne(!0)}onBlur={()=>ne(!1)}style={b.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
-              <S style={w.toolbarRight}>
-                <D style={[w.toolbarBtn,K&&{borderColor:`${e.darkOrange}50`,backgroundColor:`${e.darkOrange}18`}]}onPress={()=>Ie(o=>!o)}hitSlop={6}>
-                  <To isPaused={K}color={K?e.darkOrange:e.grayTextStrong}size={16}/>
-                </D>
+                {F.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                    <C style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                      <R style={{color:e.purple,fontSize:9.5,fontFamily:k.interBold}}>
+                        {$.length}
+                      </R>
+                    </C>
+                    <Ne onPress={()=>M("")}hitSlop={10}style={b.clearBtn}>
+                      <Ke color={e.grayTextWeak}size={13}/>
+                    </Ne>
+                  </C>}
+              </C>
 
-                <D style={[w.toolbarBtn,{borderColor:`${e.errorColor}38`,backgroundColor:`${e.errorColor}0F`}]}onPress={ke}hitSlop={6}>
-                  <Je color={e.errorColor}size={15}/>
-                  {W.size>0&&<S style={w.trashBadge}>
-                      <I style={w.trashBadgeText}>
-                        {W.size}
-                      </I>
-                    </S>}
-                </D>
+              <C style={b.toolbarRight}>
+                <O style={[b.toolbarBtn,{borderColor:`${e.errorColor}38`,backgroundColor:`${e.errorColor}0F`}]}onPress={Ve}hitSlop={6}>
+                  <Xe color={e.errorColor}size={15}/>
+                  {E.size>0&&<C style={b.trashBadge}>
+                      <R style={b.trashBadgeText}>
+                        {E.size}
+                      </R>
+                    </C>}
+                </O>
 
-                <D style={w.toolbarBtn}onPress={()=>$(o=>o==="newest"?"oldest":"newest")}hitSlop={10}>
-                  <Ye direction={j==="newest"?"down":"up"}color={e.grayTextStrong}size={18}/>
-                </D>
+                <O style={b.toolbarBtn}onPress={()=>v(o=>o==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <Je direction={Q==="newest"?"down":"up"}color={e.grayTextStrong}size={18}/>
+                </O>
 
-                <D style={[w.toolbarBtn,(T.size>0||x.size>0)&&{borderColor:e.purple,backgroundColor:`${e.purple}15`}]}onPress={()=>X(!0)}hitSlop={6}>
-                  <Ce color={T.size>0||x.size>0?e.purple:e.grayTextStrong}size={16}/>
-                  {(T.size>0||x.size>0)&&<S style={w.activeFilterDot}/>}
-                </D>
-              </S>
-            </S>
+                <O style={[b.toolbarBtn,(x.size>0||V.size>0)&&{borderColor:e.purple,backgroundColor:`${e.purple}15`}]}onPress={()=>U(!0)}hitSlop={6}>
+                  <Te color={x.size>0||V.size>0?e.purple:e.grayTextStrong}size={16}/>
+                  {(x.size>0||V.size>0)&&<C style={b.activeFilterDot}/>}
+                </O>
+              </C>
+            </C>
 
             
-            <S style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
+            <C style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
               <He horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-                {Pe.map(o=>{const C=_===o.id,b=o.color||e.purple,z=C?e.white:b;return<D key={o.id}onPress={()=>{U(C?"all":o.id)}}>
-                      <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:C?b:`${b}12`,borderWidth:1,borderColor:C?b:`${b}30`,gap:5}}>
-                        {o.id==="all"&&<Co size={11}color={z}/>}
-                        {o.id==="errors"&&<So size={11}color={z}/>}
-                        {o.id==="success"&&<Ze size={11}color={z}/>}
-                        {o.id==="slow"&&<Te size={11}color={z}/>}
-                        {o.id==="POST"&&<Io size={11}color={z}/>}
-                        {o.id==="GET"&&<Fo size={11}color={z}/>}
-                        {o.id==="graphql"&&<Ro size={11}color={z}/>}
-                        <I style={{fontFamily:B.interBold,fontSize:10.5,color:C?e.white:e.primaryBlack}}>
+                {Le.map(o=>{const z=G===o.id,T=o.color||e.purple,I=z?e.white:T;return<O key={o.id}onPress={()=>{j(z?"all":o.id)}}>
+                      <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:z?T:`${T}12`,borderWidth:1,borderColor:z?T:`${T}30`,gap:5}}>
+                        {o.id==="all"&&<To size={11}color={I}/>}
+                        {o.id==="errors"&&<So size={11}color={I}/>}
+                        {o.id==="success"&&<Co size={11}color={I}/>}
+                        {o.id==="slow"&&<Vo size={11}color={I}/>}
+                        {o.id==="POST"&&<Io size={11}color={I}/>}
+                        {o.id==="GET"&&<Ro size={11}color={I}/>}
+                        {o.id==="graphql"&&<Fo size={11}color={I}/>}
+                        <R style={{fontFamily:k.interBold,fontSize:10.5,color:z?e.white:e.primaryBlack}}>
                           {o.label}
-                        </I>
-                        <S style={{backgroundColor:C?"rgba(255,255,255,0.25)":`${b}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
-                          <I style={{fontFamily:B.interBold,fontSize:9,color:C?e.white:b}}>
+                        </R>
+                        <C style={{backgroundColor:z?"rgba(255,255,255,0.25)":`${T}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
+                          <R style={{fontFamily:k.interBold,fontSize:9,color:z?e.white:T}}>
                             {o.count}
-                          </I>
-                        </S>
-                      </S>
-                    </D>})}
+                          </R>
+                        </C>
+                      </C>
+                    </O>})}
               </He>
 
-              <D onPress={()=>X(!0)}style={{flexShrink:0}}>
-                <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:T.size>0||x.size>0?`${e.purple}20`:e.grayBackground,borderWidth:1,borderColor:T.size>0||x.size>0?e.purple:e.grayBorderSecondary,gap:5,shadowColor:e.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
-                  <Ce size={11}color={T.size>0||x.size>0?e.purple:e.grayText}/>
-                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:T.size>0||x.size>0?e.purple:e.grayText}}>
+              <O onPress={()=>U(!0)}style={{flexShrink:0}}>
+                <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:x.size>0||V.size>0?`${e.purple}20`:e.grayBackground,borderWidth:1,borderColor:x.size>0||V.size>0?e.purple:e.grayBorderSecondary,gap:5,shadowColor:e.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
+                  <Te size={11}color={x.size>0||V.size>0?e.purple:e.grayText}/>
+                  <R style={{fontFamily:k.interBold,fontSize:10.5,color:x.size>0||V.size>0?e.purple:e.grayText}}>
                     More Filters
-                  </I>
-                  {(T.size>0||x.size>0)&&<S style={{backgroundColor:e.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
-                      <I style={{fontFamily:B.interBold,fontSize:8.5,color:e.white}}>
-                        {T.size+x.size}
-                      </I>
-                    </S>}
-                </S>
-              </D>
-            </S>
+                  </R>
+                  {(x.size>0||V.size>0)&&<C style={{backgroundColor:e.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
+                      <R style={{fontFamily:k.interBold,fontSize:8.5,color:e.white}}>
+                        {x.size+V.size}
+                      </R>
+                    </C>}
+                </C>
+              </O>
+            </C>
 
             
-            {(_!=="all"||L.trim().length>0||T.size>0||x.size>0||M.length!==P.length)&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:12,marginBottom:8,paddingHorizontal:10,paddingVertical:5.5,backgroundColor:`${e.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${e.purple}25`}}>
-                <I style={{fontFamily:B.interMedium,fontSize:10.5,color:e.purple}}>
-                  Showing {M.length} of {P.length} requests
-                </I>
-                <D onPress={()=>{q(""),U("all"),H(new Set),A(new Set)}}>
-                  <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.errorColor}}>
+            {(G!=="all"||F.trim().length>0||x.size>0||V.size>0||$.length!==H.length)&&<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:12,marginBottom:8,paddingHorizontal:10,paddingVertical:5.5,backgroundColor:`${e.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${e.purple}25`}}>
+                <R style={{fontFamily:k.interMedium,fontSize:10.5,color:e.purple}}>
+                  Showing {$.length} of {H.length} requests
+                </R>
+                <O onPress={()=>{M(""),j("all"),q(new Set),N(new Set)}}>
+                  <R style={{fontFamily:k.interBold,fontSize:10.5,color:e.errorColor}}>
                     Clear All Filters
-                  </I>
-                </D>
-              </S>}
-          </S>
+                  </R>
+                </O>
+              </C>}
+          </C>
 
-        <Ne ref={Fe}data={Y}keyExtractor={o=>o?.id?.toString()}renderItem={Le}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={De.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ge isSearch={L.length>0||T.size>0||x.size>0||_!=="all"}searchQuery={L}customTitle={L.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{q(""),H(new Set),A(new Set),U("all"),xe("all")}}/>}ListFooterComponent={Y.length>0?<Qe count={M.length}label="requests"/>:null}contentContainerStyle={[w.listContent,M.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+        <$e ref={Ie}data={Y}keyExtractor={o=>o?.id?.toString()}renderItem={Be}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={qe.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<We isSearch={F.length>0||x.size>0||V.size>0||G!=="all"}searchQuery={F}customTitle={F.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{M(""),q(new Set),N(new Set),j("all"),xe("all")}}/>}ListFooterComponent={Y.length>0?<Ge count={$.length}totalCount={$.length}label="requests"/>:null}contentContainerStyle={[b.listContent,$.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <_e visible={Re}onClose={()=>X(!1)}filters={Be}onApply={Ve}searchQuery={L}/>
-    </S>});export default Bo;
+      <Qe visible={Re}onClose={()=>U(!1)}filters={ke}onApply={Fe}searchQuery={F}/>
+    </C>});export default Lo;

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

@@ -1,78 +1,78 @@
-import{useEffect as J,useRef as O,useState as Q}from"react";import{Animated as r,Linking as H,Modal as X,Platform as I,StyleSheet as z,Text as C,TouchableOpacity as P,View as S}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as T}from"../../styles/AppFonts";import M from"../TouchableScale";import{loadSettings as x,saveSettings as B}from"../../helpers/settingsStore";import{trackTelemetryEvent as V}from"../../helpers/telemetry";import{StarIcon as N,CloseWhite as Z,CheckIcon as St,GitHubIcon as Ct,NpmIcon as Tt}from"../NetworkIcons";const xt=7200*60*1e3,Bt="https://github.com/vengatmacuser/react-native-inapp-inspector",kt="https://www.npmjs.com/package/react-native-inapp-inspector";export const NpmStarPrompt=()=>{const[L,E]=Q(!1),_=O(new r.Value(200)).current,A=O(new r.Value(0)).current,D=O(new r.Value(1)).current;J(()=>{let o=!0;async function Y(){try{const k=await x();if(k.starPromptActioned)return;const F=Date.now(),q=k.starPromptFirstSeen||F;k.starPromptFirstSeen||await B({...k,starPromptFirstSeen:F});const K=k.starPromptLastShown||q;F-K>=xt&&Math.random()<.65&&o&&setTimeout(()=>{o&&G()},1800)}catch{}}return Y(),()=>{o=!1}},[]);const G=async()=>{E(!0);try{const o=await x();await B({...o,starPromptLastShown:Date.now()}),V("npm_star_prompt_shown",{trigger:"5_day_interval",platform:I.OS})}catch{}r.parallel([r.spring(_,{toValue:0,friction:8,tension:50,useNativeDriver:!0}),r.timing(A,{toValue:1,duration:250,useNativeDriver:!0})]).start(),r.loop(r.sequence([r.timing(D,{toValue:1.15,duration:900,useNativeDriver:!0}),r.timing(D,{toValue:1,duration:900,useNativeDriver:!0})])).start()},R=o=>{r.parallel([r.timing(A,{toValue:0,duration:180,useNativeDriver:!0}),r.timing(_,{toValue:200,duration:180,useNativeDriver:!0})]).start(()=>{E(!1),o&&o()})},W=async()=>{try{const o=await x();await B({...o,starPromptActioned:!0}),V("npm_star_prompt_action",{action:"starred",platform:I.OS})}catch{}R(()=>{H.openURL(Bt).catch(()=>{H.openURL(kt).catch(()=>{})})})},U=async()=>{try{const o=await x();await B({...o,starPromptActioned:!0}),V("npm_star_prompt_action",{action:"already_starred",platform:I.OS})}catch{}R()},v=async()=>{try{const o=await x();await B({...o,starPromptLastShown:Date.now()}),V("npm_star_prompt_action",{action:"remind_later",platform:I.OS})}catch{}R()},$=async()=>{try{const o=await x();await B({...o,starPromptActioned:!0}),V("npm_star_prompt_action",{action:"dont_ask_again",platform:I.OS})}catch{}R()};return L?<X transparent visible={L}animationType="none"onRequestClose={v}>
-      <r.View style={[t.backdrop,{opacity:A}]}>
-        <P style={z.absoluteFill}activeOpacity={1}onPress={v}/>
+import{useEffect as K,useRef as z,useState as J}from"react";import{Animated as r,Linking as j,Modal as Q,Platform as I,StyleSheet as F,Text as T,TouchableOpacity as P,View as S}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as x}from"../../styles/AppFonts";import E from"../TouchableScale";import{loadSettings as C,saveSettings as B}from"../../helpers/settingsStore";import{trackTelemetryEvent as R}from"../../helpers/telemetry";import{StarIcon as M,CloseWhite as X,CheckIcon as Z,GitHubIcon as St,NpmIcon as Tt}from"../NetworkIcons";const xt=7200*60*1e3,Ct="https://github.com/vengatmacuser/react-native-inapp-inspector",Bt="https://www.npmjs.com/package/react-native-inapp-inspector";export const NpmStarPrompt=()=>{const[L,H]=J(!1),_=z(new r.Value(200)).current,A=z(new r.Value(0)).current,O=z(new r.Value(1)).current;K(()=>{let o=!0;async function $(){try{const k=await C();if(k.starPromptActioned)return;const D=Date.now(),Y=k.starPromptFirstSeen||D;k.starPromptFirstSeen||await B({...k,starPromptFirstSeen:D});const q=k.starPromptLastShown||Y;D-q>=xt&&Math.random()<.65&&o&&setTimeout(()=>{o&&N()},1800)}catch{}}return $(),()=>{o=!1}},[]);const N=async()=>{H(!0);try{const o=await C();await B({...o,starPromptLastShown:Date.now()}),R("npm_star_prompt_shown",{trigger:"5_day_interval",platform:I.OS})}catch{}r.parallel([r.spring(_,{toValue:0,friction:8,tension:50,useNativeDriver:!0}),r.timing(A,{toValue:1,duration:250,useNativeDriver:!0})]).start(),r.loop(r.sequence([r.timing(O,{toValue:1.15,duration:900,useNativeDriver:!0}),r.timing(O,{toValue:1,duration:900,useNativeDriver:!0})])).start()},V=o=>{r.parallel([r.timing(A,{toValue:0,duration:180,useNativeDriver:!0}),r.timing(_,{toValue:200,duration:180,useNativeDriver:!0})]).start(()=>{H(!1),o&&o()})},G=async()=>{try{const o=await C();await B({...o,starPromptActioned:!0}),R("npm_star_prompt_action",{action:"starred",platform:I.OS})}catch{}V(()=>{j.openURL(Ct).catch(()=>{j.openURL(Bt).catch(()=>{})})})},W=async()=>{try{const o=await C();await B({...o,starPromptActioned:!0}),R("npm_star_prompt_action",{action:"already_starred",platform:I.OS})}catch{}V()},v=async()=>{try{const o=await C();await B({...o,starPromptLastShown:Date.now()}),R("npm_star_prompt_action",{action:"remind_later",platform:I.OS})}catch{}V()},U=async()=>{try{const o=await C();await B({...o,starPromptActioned:!0}),R("npm_star_prompt_action",{action:"dont_ask_again",platform:I.OS})}catch{}V()};return L?<Q transparent visible={L}animationType="none"onRequestClose={v}>
+      <r.View style={[e.backdrop,{opacity:A}]}>
+        <P style={F.absoluteFill}activeOpacity={1}onPress={v}/>
 
-        <r.View style={[t.cardContainer,{transform:[{translateY:_}]}]}>
+        <r.View style={[e.cardContainer,{transform:[{translateY:_}]}]}>
           
-          <S style={t.headerIconWrapper}>
-            <r.View style={[t.iconGlow,{transform:[{scale:D}]}]}/>
-            <S style={t.iconCircle}>
-              <N size={26}color="#F59E0B"/>
+          <S style={e.headerIconWrapper}>
+            <r.View style={[e.iconGlow,{transform:[{scale:O}]}]}/>
+            <S style={e.iconCircle}>
+              <M size={26}color={t.amber500}/>
             </S>
           </S>
 
           
-          <P onPress={v}hitSlop={{top:10,bottom:10,left:10,right:10}}style={t.closeBtn}>
-            <Z size={12}color={e.grayText}/>
+          <P onPress={v}hitSlop={{top:10,bottom:10,left:10,right:10}}style={e.closeBtn}>
+            <X size={12}color={t.grayText}/>
           </P>
 
           
-          <S style={t.pillBadge}>
-            <C style={t.pillBadgeText}>SUPPORT OPEN SOURCE</C>
+          <S style={e.pillBadge}>
+            <T style={e.pillBadgeText}>SUPPORT OPEN SOURCE</T>
           </S>
 
           
-          <C style={t.title}>Enjoying In-App Inspector?</C>
-          <C style={t.description}>
+          <T style={e.title}>Enjoying In-App Inspector?</T>
+          <T style={e.description}>
             If this debugging tool saves you time, please consider giving us a
             star on GitHub & npm. Your support helps us build more features!
-          </C>
+          </T>
 
           
-          <S style={t.metricsBar}>
-            <S style={t.metricItem}>
-              <Ct size={13}color={e.grayText}/>
-              <C style={t.metricText}>GitHub Star</C>
+          <S style={e.metricsBar}>
+            <S style={e.metricItem}>
+              <St size={13}color={t.grayText}/>
+              <T style={e.metricText}>GitHub Star</T>
             </S>
-            <S style={t.metricDot}/>
-            <S style={t.metricItem}>
-              <Tt size={13}color="#CB3837"/>
-              <C style={t.metricText}>npm Package</C>
+            <S style={e.metricDot}/>
+            <S style={e.metricItem}>
+              <Tt size={13}color={t.npmRed}/>
+              <T style={e.metricText}>npm Package</T>
             </S>
-            <S style={t.metricDot}/>
-            <S style={t.metricItem}>
-              <C style={t.metricText}>100% Free</C>
+            <S style={e.metricDot}/>
+            <S style={e.metricItem}>
+              <T style={e.metricText}>100% Free</T>
             </S>
           </S>
 
           
-          <M accessible={!0}accessibilityRole="button"accessibilityLabel="Star on GitHub"onPress={W}style={t.primaryButton}>
-            <S style={t.primaryButtonContent}>
-              <N size={16}color={e.white}/>
-              <C style={t.primaryButtonText}>Star on GitHub & npm</C>
+          <E accessible={!0}accessibilityRole="button"accessibilityLabel="Star on GitHub"onPress={G}style={e.primaryButton}>
+            <S style={e.primaryButtonContent}>
+              <M size={16}color={t.white}/>
+              <T style={e.primaryButtonText}>Star on GitHub & npm</T>
             </S>
-          </M>
+          </E>
 
           
-          <M accessible={!0}accessibilityRole="button"accessibilityLabel="I already starred"onPress={U}style={t.secondaryButton}>
-            <S style={t.secondaryButtonContent}>
-              <St size={13}color={e.purple}/>
-              <C style={t.secondaryButtonText}>I Already Starred</C>
+          <E accessible={!0}accessibilityRole="button"accessibilityLabel="I already starred"onPress={W}style={e.secondaryButton}>
+            <S style={e.secondaryButtonContent}>
+              <Z size={13}color={t.purple}/>
+              <T style={e.secondaryButtonText}>I Already Starred</T>
             </S>
-          </M>
+          </E>
 
           
-          <S style={t.footerRow}>
+          <S style={e.footerRow}>
             <P onPress={v}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-              <C style={t.footerLinkText}>Remind Me Later</C>
+              <T style={e.footerLinkText}>Remind Me Later</T>
             </P>
 
-            <S style={t.footerSeparator}/>
+            <S style={e.footerSeparator}/>
 
-            <P onPress={$}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-              <C style={t.footerLinkTextMuted}>Don't Ask Again</C>
+            <P onPress={U}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+              <T style={e.footerLinkTextMuted}>Don't Ask Again</T>
             </P>
           </S>
         </r.View>
       </r.View>
-    </X>:null};const t=z.create({backdrop:{...z.absoluteFillObject,backgroundColor:"rgba(15, 23, 42, 0.65)",justifyContent:"center",alignItems:"center",paddingHorizontal:20,zIndex:99999},cardContainer:{width:"100%",maxWidth:380,backgroundColor:e.white,borderRadius:22,padding:22,alignItems:"center",shadowColor:e.black,shadowOffset:{width:0,height:8},shadowOpacity:.22,shadowRadius:20,elevation:12,borderWidth:1.5,borderColor:`${e.purple}25`},headerIconWrapper:{position:"relative",alignItems:"center",justifyContent:"center",marginBottom:12},iconGlow:{position:"absolute",width:68,height:68,borderRadius:34,backgroundColor:"#F59E0B22"},iconCircle:{width:54,height:54,borderRadius:27,backgroundColor:"#FEF3C7",borderWidth:2,borderColor:"#FDE68A",alignItems:"center",justifyContent:"center"},closeBtn:{position:"absolute",top:14,right:14,width:28,height:28,borderRadius:14,backgroundColor:e.grayBackground,alignItems:"center",justifyContent:"center"},pillBadge:{backgroundColor:`${e.purple}14`,paddingHorizontal:9,paddingVertical:3,borderRadius:10,marginBottom:8},pillBadgeText:{fontFamily:T.interBold,fontSize:9.5,color:e.purple,letterSpacing:.6},title:{fontFamily:T.interBold,fontSize:18,lineHeight:23,color:e.primaryBlack,textAlign:"center",marginBottom:6},description:{fontFamily:T.interRegular,fontSize:12.5,lineHeight:18,color:e.grayText,textAlign:"center",marginBottom:14,paddingHorizontal:8},metricsBar:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:e.grayBackground,paddingVertical:7,paddingHorizontal:14,borderRadius:10,marginBottom:16,gap:8},metricItem:{flexDirection:"row",alignItems:"center",gap:4},metricText:{fontFamily:T.interMedium,fontSize:11,color:e.primaryBlack},metricDot:{width:3.5,height:3.5,borderRadius:2,backgroundColor:e.dividerColor},primaryButton:{width:"100%",backgroundColor:e.purple,borderRadius:12,paddingVertical:12,alignItems:"center",justifyContent:"center",marginBottom:8,shadowColor:e.purple,shadowOffset:{width:0,height:4},shadowOpacity:.3,shadowRadius:8,elevation:4},primaryButtonContent:{flexDirection:"row",alignItems:"center",gap:7},primaryButtonText:{fontFamily:T.interBold,fontSize:14,color:e.white},secondaryButton:{width:"100%",backgroundColor:`${e.purple}10`,borderWidth:1,borderColor:`${e.purple}30`,borderRadius:12,paddingVertical:10,alignItems:"center",justifyContent:"center",marginBottom:14},secondaryButtonContent:{flexDirection:"row",alignItems:"center",gap:6},secondaryButtonText:{fontFamily:T.interBold,fontSize:13,color:e.purple},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:12},footerLinkText:{fontFamily:T.interMedium,fontSize:11.5,color:e.grayText},footerSeparator:{width:1,height:12,backgroundColor:e.dividerColor},footerLinkTextMuted:{fontFamily:T.interRegular,fontSize:11.5,color:e.grayTextWeak}});export default NpmStarPrompt;
+    </Q>:null};const e=F.create({backdrop:{...F.absoluteFillObject,backgroundColor:"rgba(15, 23, 42, 0.65)",justifyContent:"center",alignItems:"center",paddingHorizontal:20,zIndex:99999},cardContainer:{width:"100%",maxWidth:380,backgroundColor:t.white,borderRadius:22,padding:22,alignItems:"center",shadowColor:t.black,shadowOffset:{width:0,height:8},shadowOpacity:.22,shadowRadius:20,elevation:12,borderWidth:1.5,borderColor:`${t.purple}25`},headerIconWrapper:{position:"relative",alignItems:"center",justifyContent:"center",marginBottom:12},iconGlow:{position:"absolute",width:68,height:68,borderRadius:34,backgroundColor:`${t.amber500}22`},iconCircle:{width:54,height:54,borderRadius:27,backgroundColor:t.amber100,borderWidth:2,borderColor:t.amber200,alignItems:"center",justifyContent:"center"},closeBtn:{position:"absolute",top:14,right:14,width:28,height:28,borderRadius:14,backgroundColor:t.grayBackground,alignItems:"center",justifyContent:"center"},pillBadge:{backgroundColor:`${t.purple}14`,paddingHorizontal:9,paddingVertical:3,borderRadius:10,marginBottom:8},pillBadgeText:{fontFamily:x.interBold,fontSize:9.5,color:t.purple,letterSpacing:.6},title:{fontFamily:x.interBold,fontSize:18,lineHeight:23,color:t.primaryBlack,textAlign:"center",marginBottom:6},description:{fontFamily:x.interRegular,fontSize:12.5,lineHeight:18,color:t.grayText,textAlign:"center",marginBottom:14,paddingHorizontal:8},metricsBar:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:t.grayBackground,paddingVertical:7,paddingHorizontal:14,borderRadius:10,marginBottom:16,gap:8},metricItem:{flexDirection:"row",alignItems:"center",gap:4},metricText:{fontFamily:x.interMedium,fontSize:11,color:t.primaryBlack},metricDot:{width:3.5,height:3.5,borderRadius:2,backgroundColor:t.dividerColor},primaryButton:{width:"100%",backgroundColor:t.purple,borderRadius:12,paddingVertical:12,alignItems:"center",justifyContent:"center",marginBottom:8,shadowColor:t.purple,shadowOffset:{width:0,height:4},shadowOpacity:.3,shadowRadius:8,elevation:4},primaryButtonContent:{flexDirection:"row",alignItems:"center",gap:7},primaryButtonText:{fontFamily:x.interBold,fontSize:14,color:t.white},secondaryButton:{width:"100%",backgroundColor:`${t.purple}10`,borderWidth:1,borderColor:`${t.purple}30`,borderRadius:12,paddingVertical:10,alignItems:"center",justifyContent:"center",marginBottom:14},secondaryButtonContent:{flexDirection:"row",alignItems:"center",gap:6},secondaryButtonText:{fontFamily:x.interBold,fontSize:13,color:t.purple},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:12},footerLinkText:{fontFamily:x.interMedium,fontSize:11.5,color:t.grayText},footerSeparator:{width:1,height:12,backgroundColor:t.dividerColor},footerLinkTextMuted:{fontFamily:x.interRegular,fontSize:11.5,color:t.grayTextWeak}});export default NpmStarPrompt;

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

@@ -1,56 +1,55 @@
-import{useState as E,useEffect as J,useRef as V}from"react";import{Animated as i,Linking as K,StyleSheet as Q,Text as B,TouchableOpacity as N,View as F}from"react-native";import S,{Path as C}from"react-native-svg";import{useInspector as X}from"./InspectorContext";import{LIB_VERSION as Z}from"../../constants";import{NpmIcon as $}from"../NetworkIcons";import{copyToClipboard as tt}from"../../helpers";import{showToast as et}from"../../helpers/toast";import{AppFonts as ot}from"../../styles/AppFonts";const Ct=({size:e=13,color:o="#94A3B8"})=><S width={e}height={e}viewBox="0 0 24 24"fill="none">
-    <C d="M18 6L6 18M6 6l12 12"stroke={o}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
-  </S>,Ft=({size:e=11,color:o="#94A3B8"})=><S width={e}height={e}viewBox="0 0 24 24"fill="none">
-    <C d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z"stroke={o}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-    <C d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"stroke={o}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-  </S>,Bt=({size:e=11,color:o="#10B981"})=><S width={e}height={e}viewBox="0 0 24 24"fill="none">
-    <C d="M20 6L9 17l-5-5"stroke={o}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
-  </S>,Tt=({size:e=11,color:o="#FFFFFF"})=><S width={e}height={e}viewBox="0 0 24 24"fill="none">
-    <C d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"stroke={o}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-    <C d="M15 3h6v6"stroke={o}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-    <C d="M10 14L21 3"stroke={o}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-  </S>,P=7e3;export const NpmUpdateToast=()=>{const{updateAvailable:e,latestNpmVersion:o,showUpdateToast:L}=X(),[_,H]=E(!1),[U,j]=E(!1),[R,M]=E(!1),A=V(new i.Value(60)).current,O=V(new i.Value(0)).current,D=V(new i.Value(1)).current,W=V(null);J(()=>(L&&e&&o&&!_&&(j(!0),i.parallel([i.spring(A,{toValue:0,friction:8,tension:40,useNativeDriver:!0}),i.timing(O,{toValue:1,duration:250,useNativeDriver:!0})]).start(),D.setValue(1),i.timing(D,{toValue:0,duration:P,useNativeDriver:!1}).start(),W.current=setTimeout(()=>{I()},P)),()=>{W.current&&clearTimeout(W.current)}),[L,e,o,_]);const I=()=>{i.parallel([i.timing(O,{toValue:0,duration:180,useNativeDriver:!0}),i.timing(A,{toValue:60,duration:180,useNativeDriver:!0})]).start(()=>{j(!1),H(!0)})},Y=()=>{tt("npm install react-native-inapp-inspector@latest","Install Command"),M(!0),et("Copied npm install command!"),setTimeout(()=>{M(!1)},2e3)},q=()=>{K.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{}),I()};if(typeof __DEV__>"u"||!__DEV__||!L||!U||!e||!o)return null;const G=D.interpolate({inputRange:[0,1],outputRange:["0%","100%"]});return<i.View style={[t.container,{opacity:O,transform:[{translateY:A}]}]}>
-      <F style={t.contentRow}>
+import{useState as N,useEffect as G,useRef as R}from"react";import{Animated as r,Linking as J,StyleSheet as K,Text as S,TouchableOpacity as P,View as T}from"react-native";import B,{Path as C}from"react-native-svg";import{useInspector as Q}from"./InspectorContext";import{LIB_VERSION as X}from"../../constants";import{NpmIcon as Z}from"../NetworkIcons";import{copyToClipboard as ee}from"../../helpers";import{showToast as te}from"../../helpers/toast";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as oe}from"../../styles/AppFonts";import{useTranslation as ie}from"../../i18n";const Ce=({size:t=13,color:i=e.slate400})=><B width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <C d="M18 6L6 18M6 6l12 12"stroke={i}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
+  </B>,Ve=({size:t=11,color:i=e.slate400})=><B width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <C d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z"stroke={i}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <C d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"stroke={i}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </B>,Te=({size:t=11,color:i=e.greenColor})=><B width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <C d="M20 6L9 17l-5-5"stroke={i}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
+  </B>,Se=({size:t=11,color:i=e.white})=><B width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <C d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"stroke={i}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <C d="M15 3h6v6"stroke={i}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <C d="M10 14L21 3"stroke={i}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </B>,H=7e3;export const NpmUpdateToast=()=>{const{t}=ie(),{updateAvailable:i,latestNpmVersion:V,showUpdateToast:O}=Q(),[_,U]=N(!1),[F,j]=N(!1),[W,E]=N(!1),I=R(new r.Value(60)).current,D=R(new r.Value(0)).current,z=R(new r.Value(1)).current,A=R(null);G(()=>(O&&i&&V&&!_&&(j(!0),r.parallel([r.spring(I,{toValue:0,friction:8,tension:40,useNativeDriver:!0}),r.timing(D,{toValue:1,duration:250,useNativeDriver:!0})]).start(),z.setValue(1),r.timing(z,{toValue:0,duration:H,useNativeDriver:!1}).start(),A.current=setTimeout(()=>{M()},H)),()=>{A.current&&clearTimeout(A.current)}),[O,i,V,_]);const M=()=>{r.parallel([r.timing(D,{toValue:0,duration:180,useNativeDriver:!0}),r.timing(I,{toValue:60,duration:180,useNativeDriver:!0})]).start(()=>{j(!1),U(!0)})},$=()=>{ee("npm install react-native-inapp-inspector@latest","Install Command"),E(!0),te("Copied npm install command!"),setTimeout(()=>{E(!1)},2e3)},Y=()=>{J.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{}),M()};if(typeof __DEV__>"u"||!__DEV__||!O||!F||!i||!V)return null;const q=z.interpolate({inputRange:[0,1],outputRange:["0%","100%"]});return<r.View style={[o.container,{opacity:D,transform:[{translateY:I}]}]}>
+      <T style={o.contentRow}>
         
-        <F style={t.npmIconContainer}>
-          <$ size={15}color="#CB3837"/>
-        </F>
+        <T style={o.npmIconContainer}>
+          <Z size={15}color={e.npmRed}/>
+        </T>
 
-        
-        <F style={t.textContainer}>
-          <F style={t.titleRow}>
-            <B style={t.titleText}>Update Available</B>
-            <F style={t.versionPill}>
-              <B style={t.versionPillText}>v{o}</B>
-            </F>
-          </F>
-          <B style={t.subtitleText}numberOfLines={1}>
-            Installed: v{Z} • New version is ready
-          </B>
-        </F>
+        <T style={o.textContainer}>
+          <T style={o.titleRow}>
+            <S style={o.titleText}>{t("header.newVersionAvailable","Update Available")}</S>
+            <T style={o.versionPill}>
+              <S style={o.versionPillText}>v{V}</S>
+            </T>
+          </T>
+          <S style={o.subtitleText}>
+            {t("header.updateAvailable",{latestVersion:V,currentVersion:X,defaultValue:`react-native-inapp-inspector v${V} is available on NPM.`})}
+          </S>
+        </T>
 
         
-        <N style={t.copyButton}onPress={Y}hitSlop={6}activeOpacity={.75}>
-          {R?<Bt size={11}color="#10B981"/>:<Ft size={11}color="#94A3B8"/>}
-          <B style={[t.copyButtonText,R&&{color:"#10B981"}]}>
-            {R?"Copied":"Copy"}
-          </B>
-        </N>
+        <P style={o.copyButton}onPress={$}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}>
+          {W?<Te size={11}color={e.greenColor}/>:<Ve size={11}color={e.slate400}/>}
+          <S style={[o.copyButtonText,W&&{color:e.greenColor}]}>
+            {W?t("common.copied","Copied"):t("header.copyCommand","Copy")}
+          </S>
+        </P>
 
         
-        <N style={t.actionButton}onPress={q}activeOpacity={.8}>
-          <B style={t.actionButtonText}>View</B>
-          <Tt size={10}color="#FFFFFF"/>
-        </N>
+        <P style={o.actionButton}onPress={Y}activeOpacity={.8}hitSlop={{top:8,bottom:8,left:4,right:4}}>
+          <S style={o.actionButtonText}>{t("header.viewNpm","View")}</S>
+          <Se size={10}color={e.white}/>
+        </P>
 
         
-        <N style={t.closeButton}onPress={I}hitSlop={8}activeOpacity={.7}>
-          <Ct size={12}color="#94A3B8"/>
-        </N>
-      </F>
+        <P style={o.closeButton}onPress={M}activeOpacity={.7}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+          <Ce size={12}color={e.slate400}/>
+        </P>
+      </T>
 
       
-      <F style={t.progressBarTrack}>
-        <i.View style={[t.progressBarFill,{width:G}]}/>
-      </F>
-    </i.View>};const T={fontFamily:ot.interRegular},t=Q.create({container:{position:"absolute",bottom:24,left:14,right:14,backgroundColor:"#0F172A",borderRadius:16,borderWidth:1,borderColor:"#334155",shadowColor:"#000000",shadowOffset:{width:0,height:12},shadowOpacity:.4,shadowRadius:24,elevation:24,overflow:"hidden",zIndex:99999},contentRow:{flexDirection:"row",alignItems:"center",paddingVertical:11,paddingHorizontal:12,gap:8},npmIconContainer:{width:32,height:32,borderRadius:9,backgroundColor:"#FFFFFF",justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:"#E2E8F0",flexShrink:0,shadowColor:"#000000",shadowOffset:{width:0,height:1},shadowOpacity:.15,shadowRadius:2,elevation:2},textContainer:{flex:1,minWidth:0},titleRow:{flexDirection:"row",alignItems:"center",gap:5},titleText:{fontSize:12.5,fontWeight:"700",color:"#F8FAFC",letterSpacing:-.2,...T},versionPill:{backgroundColor:"#7C3AED33",paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5,borderWidth:1,borderColor:"#8B5CF680"},versionPillText:{fontSize:10,fontWeight:"700",color:"#C4B5FD",...T},subtitleText:{fontSize:10.5,color:"#94A3B8",marginTop:1,...T},copyButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:"#1E293B",paddingVertical:5.5,paddingHorizontal:8,borderRadius:7,borderWidth:1,borderColor:"#334155",flexShrink:0},copyButtonText:{fontSize:10.5,fontWeight:"600",color:"#94A3B8",...T},actionButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:"#7C3AED",paddingVertical:5.5,paddingHorizontal:9,borderRadius:7,flexShrink:0,shadowColor:"#7C3AED",shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:4,elevation:3},actionButtonText:{fontSize:11,fontWeight:"700",color:"#FFFFFF",...T},closeButton:{width:22,height:22,borderRadius:11,backgroundColor:"#1E293B",justifyContent:"center",alignItems:"center",flexShrink:0},progressBarTrack:{height:2.5,width:"100%",backgroundColor:"#1E293B"},progressBarFill:{height:"100%",backgroundColor:"#8B5CF6"}});export default NpmUpdateToast;
+      <T style={o.progressBarTrack}>
+        <r.View style={[o.progressBarFill,{width:q}]}/>
+      </T>
+    </r.View>};const L={fontFamily:oe.interRegular},o=K.create({container:{position:"absolute",bottom:24,left:14,right:14,backgroundColor:e.slate900,borderRadius:16,borderWidth:1,borderColor:e.slate700,shadowColor:e.black,shadowOffset:{width:0,height:12},shadowOpacity:.4,shadowRadius:24,elevation:24,overflow:"hidden",zIndex:99999},contentRow:{flexDirection:"row",alignItems:"center",paddingVertical:11,paddingHorizontal:12,gap:8},npmIconContainer:{width:32,height:32,borderRadius:9,backgroundColor:e.white,justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:e.slate200,flexShrink:0,shadowColor:e.black,shadowOffset:{width:0,height:1},shadowOpacity:.15,shadowRadius:2,elevation:2},textContainer:{flex:1,minWidth:0},titleRow:{flexDirection:"row",alignItems:"center",gap:5},titleText:{fontSize:12.5,fontWeight:"700",color:e.slate50,letterSpacing:-.2,...L},versionPill:{backgroundColor:`${e.offerPurple}33`,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5,borderWidth:1,borderColor:`${e.violet500}80`},versionPillText:{fontSize:10,fontWeight:"700",color:e.purpleLightMuted,...L},subtitleText:{fontSize:10.5,color:e.slate400,marginTop:1,...L},copyButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:e.slate800,paddingVertical:5.5,paddingHorizontal:8,borderRadius:7,borderWidth:1,borderColor:e.slate700,flexShrink:0},copyButtonText:{fontSize:10.5,fontWeight:"600",color:e.slate400,...L},actionButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:e.offerPurple,paddingVertical:5.5,paddingHorizontal:9,borderRadius:7,flexShrink:0,shadowColor:e.offerPurple,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:4,elevation:3},actionButtonText:{fontSize:11,fontWeight:"700",color:e.white,...L},closeButton:{width:22,height:22,borderRadius:11,backgroundColor:e.slate800,justifyContent:"center",alignItems:"center",flexShrink:0},progressBarTrack:{height:2.5,width:"100%",backgroundColor:e.slate800},progressBarFill:{height:"100%",backgroundColor:e.violet500}});export default NpmUpdateToast;