react-native-inapp-inspector 2.3.24 → 2.3.25

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

@@ -1,14 +1,14 @@
-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}]}/>}
+import U,{useCallback as ue,useMemo as A,useRef as Ee}from"react";import{FlatList as He,Platform as qe,Pressable as Ae,ScrollView as We,Text as I,TextInput as $e,View as S}from"react-native";import{useInspector as Ge}from"./InspectorContext";import M from"../TouchableScale";import Se from"../AnimatedEntrance";import Qe from"../DomainHeader";import _e from"../LogCard";import Ue from"../EmptyState";import Ke from"../EndOfListFooter";import Xe from"./NetworkFilterModal";import b from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{METHOD_COLORS as Ce}from"../../constants";import{useTranslation as Je}from"../../i18n";import{SearchIcon as Ye,ClearIcon as Ze,TrashIcon as St,SortArrowIcon as Ct,FilterIcon as Te,CircleCheckIcon as Tt,CircleXIcon as It,LayersIcon as Ft,HeaderPauseIcon as Rt,ClockIcon as Ie,RequestIcon as Bt,ResponseIcon as Vt,AtomIcon as Pt}from"../NetworkIcons";const Lt=U.memo(()=>{const{groupedData:j,search:L,setSearch:W,searchScope:Dt,setSearchScope:Fe,isRegexSearch:Ot,setIsRegexSearch:vt,isCaseSensitive:Nt,setIsCaseSensitive:Mt,quickFilter:K,setQuickFilter:X,handleDelete:Re,selectedLogs:$,sortOrder:J,setSortOrder:G,statusFilters:T,setStatusFilters:H,methodFilters:x,setMethodFilters:q,availableMethods:Et,filteredLogs:O,logs:P,toggleSectionFilter:ee,toggleSectionCollapse:te,minStart:oe,totalRange:re,newLogIds:le,toggleSelect:se,setSelected:ae,isNetworkPaused:Y,setIsNetworkPaused:Be}=Ge(),{t:ie}=Je(),Ve=Ee(null),[Q,Pe]=U.useState(100),Le=A(()=>{let t=0;const C=[];for(const w of j)w.type==="header"?C.push(w):w.type==="log"&&t<Q&&(C.push(w),t++);return C},[j,Q]),[De,Z]=U.useState(!1),[ne,ce]=U.useState(!1),Oe=A(()=>({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=ue(t=>{t.statusCodes.has("all")||t.statusCodes.size===0?H(new Set):H(new Set(t.statusCodes)),t.methods.has("all")||t.methods.size===0?q(new Set):q(new Set([...t.methods].map(C=>C))),t.sortBy==="time_asc"?G("oldest"):G("newest")},[H,q,G]),D=A(()=>{let t=0,C=0,w=0,z=0,F=0,_=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?t++:!isNaN(E)&&E>=200&&E<400&&C++,(V.duration||0)>=500&&w++;const R=(V.method||"").toUpperCase();R==="POST"&&z++,R==="GET"&&F++;const N=(V.url||"").toLowerCase(),de=(V.client||"").toLowerCase();(N.includes("graphql")||de.includes("graphql")||de.includes("apollo"))&&_++}),{all:P.length,errors:t,success:C,slow:w,post:z,get:F,graphql:_}},[P]),Ne=A(()=>[{id:"all",label:"All",count:D.all,color:e.purple},{id:"errors",label:"Errors",count:D.errors,color:e.errorColor},{id:"success",label:"2xx OK",count:D.success,color:e.greenColor},{id:"slow",label:"Slow >500ms",count:D.slow,color:e.warningIconGold},{id:"POST",label:"POST",count:D.post,color:Ce.POST||"#3B82F6"},{id:"GET",label:"GET",count:D.get,color:Ce.GET||"#10B981"},{id:"graphql",label:"GraphQL",count:D.graphql,color:e.graphqlPink}],[D]),v=A(()=>{if(!P||P.length===0)return null;let t=0,C=0,w=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&&t++}typeof R.duration=="number"&&R.duration>0&&(F.push(R.duration),w+=R.duration)}),F.sort((R,N)=>R-N);const _=F.length>0?Math.round(w/F.length):0,V=F.length>0?F[Math.floor(F.length*.95)]:0;return{successRate:C>0?Math.round(t/C*100):100,avgDuration:_,p95:V,totalCount:P.length}},[P]),Me=ue(({item:t,index:C})=>{if(t.type==="header")return<Se index={C}distance={8}>
+            <Qe pageName={t.pageName}color={t.color}stats={t.stats}activeFilters={t.activeFilters}onToggleFilter={ee}isCollapsed={t.isCollapsed}onToggleCollapse={te}isFirst={t.isFirst}timestamp={t.timestamp}/>
+          </Se>;const{log:w,isLast:z,color:F}=t;return<Se index={C}distance={8}style={[b.treeNodeRow,z&&b.treeNodeRowLast]}>
+          <S style={b.treeLines}>
+            <S style={[b.modernTreeLine,{borderColor:F},z&&b.modernTreeLineLast]}/>
+            {!z&&<S style={[b.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 style={b.treeCardWrapper}>
+            <_e item={w}isSelected={$.has(w.id)}onToggleSelect={se}onPress={()=>{ae(w)}}timelineMinStart={oe}timelineTotalRange={re}isNew={le.has(w.id)}searchStr={L}/>
           </S>
-        </Se>},[oe,te,re,W,le,L,Z,ee,se]);return<S style={{flex:1}}>
+        </Se>},[oe,re,le,$,se,L,ee,te,ae]);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}}>
@@ -19,7 +19,7 @@ import J,{useCallback as de,useMemo as Q,useRef as Oe}from"react";import{FlatLis
                     {v.successRate}%
                   </I>
                   <I style={{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak}}>
-                    {ae("network.successRate")}
+                    {ie("network.successRate")}
                   </I>
                 </S>
 
@@ -27,12 +27,12 @@ import J,{useCallback as de,useMemo as Q,useRef as Oe}from"react";import{FlatLis
 
                 
                 <S style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                  <Te color={e.purple}size={10}/>
+                  <Ie 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")}
+                    {ie("network.avgLatency")}
                   </I>
                 </S>
 
@@ -50,75 +50,75 @@ import J,{useCallback as de,useMemo as Q,useRef as Oe}from"react";import{FlatLis
               </S>}
 
             
-            <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"/>
+            <S style={b.toolbarRow}>
+              <S style={[b.searchContainer,ne&&{borderColor:e.purple,borderWidth:1.5}]}>
+                <Ye color={ne?e.purple:e.grayTextWeak}size={15}/>
+                <$e placeholder="Search URL, status, method, headers, body..."placeholderTextColor={e.grayTextWeak}value={L}onChangeText={W}onFocus={()=>ce(!0)}onBlur={()=>ce(!1)}style={b.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}
+                        {O.length}
                       </I>
                     </S>
-                    <Ee onPress={()=>q("")}hitSlop={10}style={w.clearBtn}>
-                      <Xe color={e.grayTextWeak}size={13}/>
-                    </Ee>
+                    <Ae onPress={()=>W("")}hitSlop={10}style={b.clearBtn}>
+                      <Ze color={e.grayTextWeak}size={13}/>
+                    </Ae>
                   </S>}
               </S>
 
-              <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>
+              <S style={b.toolbarRight}>
+                <M style={[b.toolbarBtn,Y&&{borderColor:`${e.darkOrange}50`,backgroundColor:`${e.darkOrange}18`}]}onPress={()=>Be(t=>!t)}hitSlop={6}>
+                  <Rt isPaused={Y}color={Y?e.darkOrange:e.grayTextStrong}size={16}/>
+                </M>
 
-                <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}
+                <M style={[b.toolbarBtn,{borderColor:`${e.errorColor}38`,backgroundColor:`${e.errorColor}0F`}]}onPress={Re}hitSlop={6}>
+                  <St color={e.errorColor}size={15}/>
+                  {$.size>0&&<S style={b.trashBadge}>
+                      <I style={b.trashBadgeText}>
+                        {$.size}
                       </I>
                     </S>}
-                </D>
+                </M>
 
-                <D style={w.toolbarBtn}onPress={()=>$(o=>o==="newest"?"oldest":"newest")}hitSlop={10}>
-                  <Ye direction={j==="newest"?"down":"up"}color={e.grayTextStrong}size={18}/>
-                </D>
+                <M style={b.toolbarBtn}onPress={()=>G(t=>t==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <Ct direction={J==="newest"?"down":"up"}color={e.grayTextStrong}size={18}/>
+                </M>
 
-                <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>
+                <M style={[b.toolbarBtn,(T.size>0||x.size>0)&&{borderColor:e.purple,backgroundColor:`${e.purple}15`}]}onPress={()=>Z(!0)}hitSlop={6}>
+                  <Te color={T.size>0||x.size>0?e.purple:e.grayTextStrong}size={16}/>
+                  {(T.size>0||x.size>0)&&<S style={b.activeFilterDot}/>}
+                </M>
               </S>
             </S>
 
             
             <S 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}/>}
+              <We horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+                {Ne.map(t=>{const C=K===t.id,w=t.color||e.purple,z=C?e.white:w;return<M key={t.id}onPress={()=>{X(C?"all":t.id)}}>
+                      <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:C?w:`${w}12`,borderWidth:1,borderColor:C?w:`${w}30`,gap:5}}>
+                        {t.id==="all"&&<Ft size={11}color={z}/>}
+                        {t.id==="errors"&&<It size={11}color={z}/>}
+                        {t.id==="success"&&<Tt size={11}color={z}/>}
+                        {t.id==="slow"&&<Ie size={11}color={z}/>}
+                        {t.id==="POST"&&<Bt size={11}color={z}/>}
+                        {t.id==="GET"&&<Vt size={11}color={z}/>}
+                        {t.id==="graphql"&&<Pt size={11}color={z}/>}
                         <I style={{fontFamily:B.interBold,fontSize:10.5,color:C?e.white:e.primaryBlack}}>
-                          {o.label}
+                          {t.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}}>
-                            {o.count}
+                        <S style={{backgroundColor:C?"rgba(255,255,255,0.25)":`${w}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
+                          <I style={{fontFamily:B.interBold,fontSize:9,color:C?e.white:w}}>
+                            {t.count}
                           </I>
                         </S>
                       </S>
-                    </D>})}
-              </He>
+                    </M>})}
+              </We>
 
-              <D onPress={()=>X(!0)}style={{flexShrink:0}}>
+              <M onPress={()=>Z(!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}/>
+                  <Te 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}}>
                     More Filters
                   </I>
@@ -128,24 +128,24 @@ import J,{useCallback as de,useMemo as Q,useRef as Oe}from"react";import{FlatLis
                       </I>
                     </S>}
                 </S>
-              </D>
+              </M>
             </S>
 
             
-            {(_!=="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`}}>
+            {(K!=="all"||L.trim().length>0||T.size>0||x.size>0||O.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
+                  Showing {O.length} of {P.length} requests
                 </I>
-                <D onPress={()=>{q(""),U("all"),H(new Set),A(new Set)}}>
+                <M onPress={()=>{W(""),X("all"),H(new Set),q(new Set)}}>
                   <I style={{fontFamily:B.interBold,fontSize:10.5,color:e.errorColor}}>
                     Clear All Filters
                   </I>
-                </D>
+                </M>
               </S>}
           </S>
 
-        <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"/>
+        <He ref={Ve}data={Le}keyExtractor={t=>t?.id?.toString()}renderItem={Me}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={qe.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ue isSearch={L.length>0||T.size>0||x.size>0||K!=="all"}searchQuery={L}customTitle={L.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{W(""),H(new Set),q(new Set),X("all"),Fe("all")}}/>}ListFooterComponent={j.length>0?<Ke count={Math.min(Q,O.length)}totalCount={O.length}label="requests"hasMore={O.length>Q}onLoadMore={()=>Pe(t=>t+10)}/>:null}contentContainerStyle={[b.listContent,O.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <_e visible={Re}onClose={()=>X(!1)}filters={Be}onApply={Ve}searchQuery={L}/>
-    </S>});export default Bo;
+      <Xe visible={De}onClose={()=>Z(!1)}filters={Oe}onApply={ve}searchQuery={L}/>
+    </S>});export default Lt;

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;