react-native-inapp-inspector 2.3.23 → 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;

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

@@ -1,4 +1,4 @@
-import Ze,{useState as E,useMemo as Ve,useEffect as _e}from"react";import{Alert as ze,Platform as et,Pressable as U,ScrollView as Z,StyleSheet as tt,Text as C,TextInput as Tt,ToastAndroid as Oe,TouchableOpacity as Ne,View as T}from"react-native";import{useTranslation as ht}from"../../i18n";import{useInspector as wt}from"./InspectorContext";import Me from"../SegmentedTabs";import K from"../JsonViewer";import He from"../DiffViewer";import Ee from"../CopyButton";import Ct from"../TouchableScale";import St from"../HighlightText";import Bt from"../AnimatedEntrance";import{getActionHistory as Vt}from"../../customHooks/reduxLogger";import{getSize as q,openInVSCode as _,parseStackLine as je}from"../../helpers";import{getCustomStorage as $e}from"../../helpers/settingsStore";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{TerminalIcon as It,SearchIcon as Pt,ClearIcon as Wt,ClockIcon as Ie,LayersIcon as Je,TrashIcon as Ge,ForwardChevronIcon as Rt,LiveStateIcon as Ue,TimelineIcon as Te,StorageIcon as Ce,MetadataIcon as Ft,BoltIcon as Pe,AtomIcon as Dt,ScreenIcon as At,ListenerIcon as Lt,DocIcon as We,ExternalLinkIcon as Se,CodeBracketsIcon as Ot}from"../NetworkIcons";const Ke=z=>{switch(z){case"saga":return{label:"SAGA",renderIcon:(A,D=9)=><Pe color={A}size={D}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(A,D=9)=><Dt color={A}size={D}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(A,D=9)=><At color={A}size={D}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(A,D=9)=><Lt color={A}size={D}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(A,D=9)=><Pe color={A}size={D}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Nt=Ze.memo(()=>{const{t:z}=ht(),{reduxState:A,reduxLastActionMap:D,selectedReduxSlice:W,selectedReduxAction:V,setSelectedReduxSlice:Mt}=wt(),[F,Re]=E(""),[O,ve]=E("live"),[Q,qe]=E("payload"),[Fe,De]=E("pretty"),[Qe,Xe]=E(null),[J,G]=E(!1),[X,N]=E(null),ke=Ve(()=>Vt(),[D]),j=Ve(()=>W?ke.filter(B=>!B.affectedSlices||B.affectedSlices.length===0?!0:B.affectedSlices.includes(W)):ke,[ke,W]),Ae=Ve(()=>{if(!F.trim())return j;const B=F.toLowerCase();return j.filter(R=>R.type.toLowerCase().includes(B)||R.callerFile&&R.callerFile.toLowerCase().includes(B)||R.payload&&JSON.stringify(R.payload).toLowerCase().includes(B))},[j,F]);_e(()=>{if(!W)return;async function B(){try{const R=$e();if(!R){G(!1),N(null);return}let v=await R.getItem(`persist:${W}`);if(v){try{N(JSON.parse(v))}catch{N(v)}G(!0);return}let I=await R.getItem("persist:root");if(I){const S=JSON.parse(I);if(S&&S[W]!==void 0){const P=S[W];try{N(typeof P=="string"?JSON.parse(P):P)}catch{N(P)}G(!0);return}}}catch{}G(!1),N(null)}B()},[W]);const Le=()=>{W&&ze.alert("Clear Persisted State",`Are you sure you want to delete persisted storage for slice "${W}"?`,[{text:"Cancel",style:"cancel"},{text:"Delete",style:"destructive",onPress:async()=>{try{const B=$e();if(!B)return;typeof B.removeItem=="function"?await B.removeItem(`persist:${W}`):await B.setItem(`persist:${W}`,""),G(!1),N(null),ve("live"),et.OS==="android"?Oe.show("Persisted state cleared",Oe.SHORT):ze.alert("Cleared","Persisted state has been cleared.")}catch{ze.alert("Error","Failed to clear persisted state.")}}}])};if(W!=null){const B=A?.[W],R=B&&typeof B=="object"?Object.keys(B).length:typeof B<"u"?1:0,v=D[W],I=[{key:"live",label:z("redux.liveState","Live State"),icon:S=><Ue color={S?e.white:e.grayText}size={12}/>},{key:"timeline",label:`${z("redux.timeline","Timeline")} (${j.length})`,icon:S=><Te color={S?e.white:e.grayText}size={12}/>},{key:"persisted",label:J?z("redux.persisted","Persisted"):z("redux.storage","Storage"),icon:S=><Ce color={S?e.white:e.grayText}size={12}/>},{key:"metadata",label:z("redux.metadata","Metadata"),icon:S=><Ft color={S?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
+import Ze,{useState as E,useMemo as Ve,useEffect as _e}from"react";import{Alert as ze,Platform as et,Pressable as U,ScrollView as Z,StyleSheet as tt,Text as C,TextInput as Tt,ToastAndroid as Oe,TouchableOpacity as Ne,View as T}from"react-native";import{useTranslation as ht}from"../../i18n";import{useInspector as wt}from"./InspectorContext";import Me from"../SegmentedTabs";import K from"../JsonViewer";import He from"../DiffViewer";import Ee from"../CopyButton";import Ct from"../TouchableScale";import St from"../HighlightText";import Bt from"../AnimatedEntrance";import{getActionHistory as Vt}from"../../customHooks/reduxLogger";import{getSize as q,openInVSCode as _,parseStackLine as je}from"../../helpers";import{getCustomStorage as $e}from"../../helpers/settingsStore";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{TerminalIcon as It,SearchIcon as Pt,ClearIcon as Wt,ClockIcon as Ie,LayersIcon as Je,TrashIcon as Ge,ForwardChevronIcon as Rt,LiveStateIcon as Ue,TimelineIcon as Te,StorageIcon as Ce,MetadataIcon as Ft,BoltIcon as Pe,AtomIcon as Dt,ScreenIcon as At,ListenerIcon as Lt,DocIcon as We,ExternalLinkIcon as Se,CodeBracketsIcon as Ot}from"../NetworkIcons";const Ke=z=>{switch(z){case"saga":return{label:"SAGA",renderIcon:(A,D=9)=><Pe color={A}size={D}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(A,D=9)=><Dt color={A}size={D}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(A,D=9)=><At color={A}size={D}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(A,D=9)=><Lt color={A}size={D}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(A,D=9)=><Pe color={A}size={D}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Nt=Ze.memo(()=>{const{t:z}=ht(),{reduxState:A,reduxLastActionMap:D,selectedReduxSlice:W,selectedReduxAction:V,setSelectedReduxSlice:Mt}=wt(),[F,Re]=E(""),[O,ve]=E("live"),[Q,qe]=E("payload"),[Fe,De]=E("raw"),[Qe,Xe]=E(null),[J,G]=E(!1),[X,N]=E(null),ke=Ve(()=>Vt(),[D]),j=Ve(()=>W?ke.filter(B=>!B.affectedSlices||B.affectedSlices.length===0?!0:B.affectedSlices.includes(W)):ke,[ke,W]),Ae=Ve(()=>{if(!F.trim())return j;const B=F.toLowerCase();return j.filter(R=>R.type.toLowerCase().includes(B)||R.callerFile&&R.callerFile.toLowerCase().includes(B)||R.payload&&JSON.stringify(R.payload).toLowerCase().includes(B))},[j,F]);_e(()=>{if(!W)return;async function B(){try{const R=$e();if(!R){G(!1),N(null);return}let v=await R.getItem(`persist:${W}`);if(v){try{N(JSON.parse(v))}catch{N(v)}G(!0);return}let I=await R.getItem("persist:root");if(I){const S=JSON.parse(I);if(S&&S[W]!==void 0){const P=S[W];try{N(typeof P=="string"?JSON.parse(P):P)}catch{N(P)}G(!0);return}}}catch{}G(!1),N(null)}B()},[W]);const Le=()=>{W&&ze.alert("Clear Persisted State",`Are you sure you want to delete persisted storage for slice "${W}"?`,[{text:"Cancel",style:"cancel"},{text:"Delete",style:"destructive",onPress:async()=>{try{const B=$e();if(!B)return;typeof B.removeItem=="function"?await B.removeItem(`persist:${W}`):await B.setItem(`persist:${W}`,""),G(!1),N(null),ve("live"),et.OS==="android"?Oe.show("Persisted state cleared",Oe.SHORT):ze.alert("Cleared","Persisted state has been cleared.")}catch{ze.alert("Error","Failed to clear persisted state.")}}}])};if(W!=null){const B=A?.[W],R=B&&typeof B=="object"?Object.keys(B).length:typeof B<"u"?1:0,v=D[W],I=[{key:"live",label:z("redux.liveState","Live State"),icon:S=><Ue color={S?e.white:e.grayText}size={12}/>},{key:"timeline",label:`${z("redux.timeline","Timeline")} (${j.length})`,icon:S=><Te color={S?e.white:e.grayText}size={12}/>},{key:"persisted",label:J?z("redux.persisted","Persisted"):z("redux.storage","Storage"),icon:S=><Ce color={S?e.white:e.grayText}size={12}/>},{key:"metadata",label:z("redux.metadata","Metadata"),icon:S=><Ft color={S?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
         
         <T style={t.infoBar}>
           <T style={t.infoTopRow}>