react-native-inapp-inspector 2.5.12 → 2.5.14

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

@@ -1,155 +1,162 @@
-import G,{useCallback as ue,useMemo as M,useRef as qe}from"react";import{FlatList as We,Pressable as Ge,ScrollView as _e,Text as I,TextInput as Qe,View as C}from"react-native";import{useInspector as Ue}from"./InspectorContext";import N from"../TouchableScale";import Ie from"../AnimatedEntrance";import Ke from"../DomainHeader";import Xe from"../LogCard";import Je from"../EmptyState";import Ye from"../EndOfListFooter";import Ze from"./NetworkFilterModal";import S from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{METHOD_COLORS as Ve}from"../../constants";import{isUrlHidden as eo}from"../../helpers";import{useTranslation as oo}from"../../i18n";import{SearchIcon as Co,ClearIcon as So,TrashIcon as To,SortArrowIcon as Io,FilterIcon as Vo,ChevronIcon as Fo,CheckIcon as Ro,CircleCheckIcon as Lo,CircleXIcon as Bo,LayersIcon as Fe,ClockIcon as Po,RequestIcon as Eo,ResponseIcon as $o,AtomIcon as Do}from"../NetworkIcons";const Mo=G.memo(()=>{const{groupedData:_,loadMoreSection:ge,search:R,setSearch:j,setSearchScope:pe,quickFilter:Q,setQuickFilter:se,handleDelete:Re,isGroupByPageEnabled:F,setIsGroupByPageEnabled:Le,selectedLogs:U,sortOrder:Be,setSortOrder:K,statusFilters:L,setStatusFilters:q,methodFilters:B,setMethodFilters:v,latencyFilter:O,setLatencyFilter:X,protocolFilter:A,setProtocolFilter:J,networkSortBy:H,setNetworkSortBy:Y,filteredLogs:E,logs:Z,hiddenUrlPatterns:ee,toggleSectionFilter:me,toggleSectionCollapse:he,minStart:ye,totalRange:fe,newLogIds:we,toggleSelect:Ce,setSelected:Se,maxNetworkLogs:ne}=Ue(),{t:oe}=oo(),Pe=qe(null),[Ee,be]=G.useState(!1),[Te,ze]=G.useState(!1),[te,xe]=G.useState(ne||50);G.useEffect(()=>{xe(ne||50)},[R,Q,ne]);const de=M(()=>F?_:_.slice(0,te),[F,_,te]),$e=ue(e=>e?.id?String(e.id):"",[]),$=M(()=>L.size>0&&!L.has("all")||B.size>0&&!B.has("all")||O!=="all"||A!=="all"||H!=="time_desc",[L,B,O,A,H]),De=M(()=>{let e=0;return L.size>0&&!L.has("all")&&(e+=L.size),B.size>0&&!B.has("all")&&(e+=B.size),O!=="all"&&e++,A!=="all"&&e++,H!=="time_desc"&&e++,e},[L,B,O,A,H]),Me=M(()=>({statusCodes:L.size>0?new Set(L):new Set(["all"]),methods:B.size>0?new Set(B):new Set(["all"]),latency:O,protocol:A,sortBy:H}),[L,B,O,A,H]),Ne=ue(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?q(new Set):q(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?v(new Set):v(new Set([...e.methods].map(T=>T))),X(e.latency||"all"),J(e.protocol||"all"),Y(e.sortBy||"time_desc"),e.sortBy==="time_asc"?K("oldest"):K("newest")},[q,v,X,J,Y,K]),re=M(()=>!ee||ee.length===0?Z:Z.filter(e=>!eo(e.url,ee)),[Z,ee]),P=M(()=>{let e=0,T=0,z=0,x=0,W=0,le=0;return re.forEach(V=>{const b=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null||!isNaN(b)&&b>=400?e++:!isNaN(b)&&b>=200&&b<400&&T++,(V.duration||0)>=500&&z++;const ie=(V.method||"").toUpperCase();ie==="POST"&&x++,ie==="GET"&&W++;const D=(V.url||"").toLowerCase(),ae=(V.client||"").toLowerCase();(D.includes("graphql")||ae.includes("graphql")||ae.includes("apollo"))&&le++}),{all:re.length,errors:e,success:T,slow:z,post:x,get:W,graphql:le}},[re]),Oe=M(()=>[{id:"all",label:"All",count:P.all,color:o.purple},{id:"errors",label:"Errors",count:P.errors,color:o.errorColor},{id:"success",label:"2xx OK",count:P.success,color:o.greenColor},{id:"slow",label:"Slow >500ms",count:P.slow,color:o.warningIconGold},{id:"POST",label:"POST",count:P.post,color:Ve.POST||o.blue500},{id:"GET",label:"GET",count:P.get,color:Ve.GET||o.emerald500},{id:"graphql",label:"GraphQL",count:P.graphql,color:o.graphqlPink}],[P]),Ae=ue(({item:e,index:T})=>{if(e.type==="header")return<Ie index={T}distance={8}>
-            <Ke pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={me}isCollapsed={e.isCollapsed}onToggleCollapse={he}isFirst={e.isFirst}timestamp={e.timestamp}/>
-          </Ie>;if(e.type==="loadMore"){const{pageName:V,color:b,remainingCount:ie,totalCount:D,loadedCount:ae,loadMoreStep:ce,hasMore:He}=e;return<C style={[S.treeNodeRow,S.treeNodeRowLast]}>
-            <C style={S.treeLines}>
-              <C style={[S.modernTreeLine,{borderColor:b},S.modernTreeLineLast]}/>
-            </C>
-            <C style={S.treeCardWrapper}>
-              {He?<N onPress={()=>ge(V,ce||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${b}14`,borderWidth:1.5,borderColor:`${b}40`,shadowColor:b,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
-                  <C style={{flexDirection:"row",alignItems:"center",gap:8}}>
-                    <C style={{width:22,height:22,borderRadius:11,backgroundColor:b,alignItems:"center",justifyContent:"center",shadowColor:b,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
-                      <Fo color={o.white}size={9}direction="down"/>
-                    </C>
-                    <C>
-                      <I style={{fontFamily:k.interBold,fontSize:12,color:b}}>
-                        {oe("footer.loadMoreRequests",{count:ce,defaultValue:`Load ${ce} More Requests`})}
-                      </I>
-                      <I style={{fontFamily:k.interRegular,fontSize:9.5,color:o.grayTextWeak,marginTop:1}}>
-                        Showing {ae} of {D} requests
-                      </I>
-                    </C>
-                  </C>
+import q,{useCallback as ne,useMemo as D,useRef as We}from"react";import{FlatList as _e,Pressable as Qe,ScrollView as Ue,Text as V,TextInput as Ke,View as S}from"react-native";import{useInspector as Xe}from"./InspectorContext";import $ from"../TouchableScale";import Fe from"../AnimatedEntrance";import Je from"../DomainHeader";import Ye from"../LogCard";import Ze from"../EmptyState";import So from"../EndOfListFooter";import Co from"./NetworkFilterModal";import To from"./NetworkExportModal";import b from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{METHOD_COLORS as Le}from"../../constants";import{isUrlHidden as xo}from"../../helpers";import{useTranslation as zo}from"../../i18n";import{SearchIcon as Vo,ClearIcon as Io,TrashIcon as Fo,SortArrowIcon as Lo,FilterIcon as Ro,ChevronIcon as Bo,CheckIcon as Po,CircleCheckIcon as Eo,CircleXIcon as $o,LayersIcon as Re,ClockIcon as Mo,RequestIcon as Ao,ResponseIcon as Do,AtomIcon as No,ExportIcon as Oo}from"../NetworkIcons";const vo=q.memo(()=>{const{groupedData:K,loadMoreSection:pe,search:I,setSearch:X,setSearchScope:ge,quickFilter:J,setQuickFilter:de,handleDelete:Be,isGroupByPageEnabled:G,setIsGroupByPageEnabled:Pe,selectedLogs:Y,sortOrder:Ee,setSortOrder:Z,statusFilters:F,setStatusFilters:W,methodFilters:L,setMethodFilters:_,latencyFilter:N,setLatencyFilter:ee,protocolFilter:O,setProtocolFilter:oe,networkSortBy:v,setNetworkSortBy:te,filteredLogs:R,logs:re,hiddenUrlPatterns:le,toggleSectionFilter:he,toggleSectionCollapse:me,minStart:fe,totalRange:ye,newLogIds:we,toggleSelect:Se,setSelected:Ce,maxNetworkLogs:ce}=Xe(),{t:j}=zo(),be=We(null),[$e,Te]=q.useState(!1),[Me,xe]=q.useState(!1),[ze,Ve]=q.useState(!1),[ie,ke]=q.useState(ce||50),ae=!!(I&&I.trim().length>0),B=G&&!ae;q.useEffect(()=>{ke(ce||50),ae&&be.current?.scrollToOffset({offset:0,animated:!1})},[I,J,ce,ae]);const Ae=D(()=>B?K:K.slice(0,ie),[B,K,ie]),De=ne(e=>e?.id?String(e.id):"",[]),M=D(()=>F.size>0&&!F.has("all")||L.size>0&&!L.has("all")||N!=="all"||O!=="all"||v!=="time_desc",[F,L,N,O,v]),Ne=D(()=>{let e=0;return F.size>0&&!F.has("all")&&(e+=F.size),L.size>0&&!L.has("all")&&(e+=L.size),N!=="all"&&e++,O!=="all"&&e++,v!=="time_desc"&&e++,e},[F,L,N,O,v]),Oe=D(()=>({statusCodes:F.size>0?new Set(F):new Set(["all"]),methods:L.size>0?new Set(L):new Set(["all"]),latency:N,protocol:O,sortBy:v}),[F,L,N,O,v]),ve=ne(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?W(new Set):W(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?_(new Set):_(new Set([...e.methods].map(T=>T))),ee(e.latency||"all"),oe(e.protocol||"all"),te(e.sortBy||"time_desc"),e.sortBy==="time_asc"?Z("oldest"):Z("newest")},[W,_,ee,oe,te,Z]),Q=D(()=>!le||le.length===0?re:re.filter(e=>!xo(e.url,le)),[re,le]),P=D(()=>{let e=0,T=0,x=0,z=0,U=0,se=0;return Q.forEach(C=>{const A=typeof C.status=="number"?C.status:parseInt(String(C.status),10);C.status===0||C.status==null||!isNaN(A)&&A>=400?e++:!isNaN(A)&&A>=200&&A<400&&T++,(C.duration||0)>=500&&x++;const E=(C.method||"").toUpperCase();E==="POST"&&z++,E==="GET"&&U++;const ue=(C.url||"").toLowerCase(),H=(C.client||"").toLowerCase();(ue.includes("graphql")||H.includes("graphql")||H.includes("apollo"))&&se++}),{all:Q.length,errors:e,success:T,slow:x,post:z,get:U,graphql:se}},[Q]),He=D(()=>[{id:"all",label:"All",count:P.all,color:o.purple},{id:"errors",label:"Errors",count:P.errors,color:o.errorColor},{id:"success",label:"2xx OK",count:P.success,color:o.greenColor},{id:"slow",label:"Slow >500ms",count:P.slow,color:o.warningIconGold},{id:"POST",label:"POST",count:P.post,color:Le.POST||o.blue500},{id:"GET",label:"GET",count:P.get,color:Le.GET||o.emerald500},{id:"graphql",label:"GraphQL",count:P.graphql,color:o.graphqlPink}],[P]),Ie=ne(e=>{e&&Ce(e)},[Ce]),qe=ne(({item:e,index:T})=>{if(e.type==="header")return<Fe index={T}distance={8}>
+            <Je pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={he}isCollapsed={e.isCollapsed}onToggleCollapse={me}isFirst={e.isFirst}timestamp={e.timestamp}/>
+          </Fe>;if(e.type==="loadMore"){const{pageName:se,color:C,remainingCount:A,totalCount:E,loadedCount:ue,loadMoreStep:H,hasMore:Ge}=e;return<S style={[b.treeNodeRow,b.treeNodeRowLast]}>
+            <S style={b.treeLines}>
+              <S style={[b.modernTreeLine,{borderColor:C},b.modernTreeLineLast]}/>
+            </S>
+            <S style={b.treeCardWrapper}>
+              {Ge?<$ onPress={()=>pe(se,H||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${C}14`,borderWidth:1.5,borderColor:`${C}40`,shadowColor:C,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
+                  <S style={{flexDirection:"row",alignItems:"center",gap:8}}>
+                    <S style={{width:22,height:22,borderRadius:11,backgroundColor:C,alignItems:"center",justifyContent:"center",shadowColor:C,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
+                      <Bo color={o.white}size={9}direction="down"/>
+                    </S>
+                    <S>
+                      <V style={{fontFamily:k.interBold,fontSize:12,color:C}}>
+                        {j("footer.loadMoreRequests",{count:H,defaultValue:`Load ${H} More Requests`})}
+                      </V>
+                      <V style={{fontFamily:k.interRegular,fontSize:9.5,color:o.grayTextWeak,marginTop:1}}>
+                        Showing {ue} of {E} requests
+                      </V>
+                    </S>
+                  </S>
 
-                  <C style={{flexDirection:"row",alignItems:"center",backgroundColor:`${b}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${b}40`,gap:3}}>
-                    <I style={{fontFamily:k.interBold,fontSize:10.5,color:b}}>
-                      +{ie}
-                    </I>
-                    <I style={{fontFamily:k.interRegular,fontSize:9,color:b}}>
+                  <S style={{flexDirection:"row",alignItems:"center",backgroundColor:`${C}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${C}40`,gap:3}}>
+                    <V style={{fontFamily:k.interBold,fontSize:10.5,color:C}}>
+                      +{A}
+                    </V>
+                    <V style={{fontFamily:k.interRegular,fontSize:9,color:C}}>
                       more
-                    </I>
-                  </C>
-                </N>:<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${b}0A`,borderWidth:1,borderColor:`${b}25`}}>
-                  <C style={{flexDirection:"row",alignItems:"center",gap:7}}>
-                    <C style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${b}25`,alignItems:"center",justifyContent:"center"}}>
-                      <Ro color={b}size={8}/>
-                    </C>
-                    <I style={{fontFamily:k.interMedium,fontSize:11,color:o.grayTextStrong}}>
-                      {oe("footer.allLoaded",{count:D,defaultValue:`All ${D} requests loaded`})}
-                    </I>
-                  </C>
+                    </V>
+                  </S>
+                </$>:<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${C}0A`,borderWidth:1,borderColor:`${C}25`}}>
+                  <S style={{flexDirection:"row",alignItems:"center",gap:7}}>
+                    <S style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${C}25`,alignItems:"center",justifyContent:"center"}}>
+                      <Po color={C}size={8}/>
+                    </S>
+                    <V style={{fontFamily:k.interMedium,fontSize:11,color:o.grayTextStrong}}>
+                      {j("footer.allLoaded",{count:E,defaultValue:`All ${E} requests loaded`})}
+                    </V>
+                  </S>
 
-                  <C style={{backgroundColor:`${b}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
-                    <I style={{fontFamily:k.interBold,fontSize:9.5,color:b}}>
-                      {D}/{D}
-                    </I>
-                  </C>
-                </C>}
-            </C>
-          </C>}const{log:z,isLast:x,color:W}=e,le=de.slice(0,T).filter(V=>!V.type).length;return<Ie index={T}distance={8}style={F?[S.treeNodeRow,x&&S.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
-          {F&&<C style={S.treeLines}>
-              <C style={[S.modernTreeLine,{borderColor:W},x&&S.modernTreeLineLast]}/>
-              {!x&&<C style={[S.modernTreeBranch,{borderColor:W}]}/>}
-            </C>}
-          <C style={F?S.treeCardWrapper:{flex:1}}>
-            <Xe testID={`inspector.network.item.${le}`}item={z}isSelected={U.has(z.id)}onToggleSelect={Ce}onPress={()=>{Se(z)}}timelineMinStart={ye}timelineTotalRange={fe}isNew={we.has(z.id)}searchStr={R}/>
-          </C>
-        </Ie>},[de,F,ye,fe,we,U,Ce,R,me,he,ge,Se,oe]);return<C style={{flex:1}}>
-      <C style={{marginTop:6}}>
+                  <S style={{backgroundColor:`${C}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
+                    <V style={{fontFamily:k.interBold,fontSize:9.5,color:C}}>
+                      {E}/{E}
+                    </V>
+                  </S>
+                </S>}
+            </S>
+          </S>}const{log:x,isLast:z,color:U}=e;return<Fe index={T}distance={8}style={B?[b.treeNodeRow,z&&b.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
+          {B&&<S style={b.treeLines}>
+              <S style={[b.modernTreeLine,{borderColor:U},z&&b.modernTreeLineLast]}/>
+              {!z&&<S style={[b.modernTreeBranch,{borderColor:U}]}/>}
+            </S>}
+          <S style={B?b.treeCardWrapper:{flex:1}}>
+            <Ye testID={`inspector.network.item.${x.id}`}item={x}isSelected={Y.has(x.id)}onToggleSelect={Se}onPress={Ie}timelineMinStart={fe}timelineTotalRange={ye}isNew={we.has(x.id)}searchStr={I}/>
+          </S>
+        </Fe>},[B,fe,ye,we,Y,Se,Ie,I,he,me,pe,j]);return<S style={{flex:1}}>
+      <S style={{marginTop:6}}>
             
-            <C style={S.toolbarRow}>
-              <C style={[S.searchContainer,Te&&{borderColor:o.purple,borderWidth:1.5}]}>
-                <Co color={Te?o.purple:o.grayTextWeak}size={15}/>
-                <Qe placeholder="Search URL, status, method, headers, body..."placeholderTextColor={o.grayTextWeak}value={R}onChangeText={j}onFocus={()=>ze(!0)}onBlur={()=>ze(!1)}style={S.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            <S style={b.toolbarRow}>
+              <S style={[b.searchContainer,ze&&{borderColor:o.purple,borderWidth:1.5}]}>
+                <Vo color={ze?o.purple:o.grayTextWeak}size={15}/>
+                <Ke placeholder={j("network.searchPlaceholder","Search APIs...")}placeholderTextColor={o.grayTextWeak}value={I}onChangeText={X}onFocus={()=>Ve(!0)}onBlur={()=>Ve(!1)}style={b.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
-                {R.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                    <C style={{backgroundColor:`${o.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
-                      <I style={{color:o.purple,fontSize:9.5,fontFamily:k.interBold}}>
-                        {E.length}
-                      </I>
-                    </C>
-                    <Ge onPress={()=>j("")}hitSlop={10}style={S.clearBtn}>
-                      <So color={o.grayTextWeak}size={13}/>
-                    </Ge>
-                  </C>}
-              </C>
+                {I.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                    <S style={{backgroundColor:`${o.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                      <V style={{color:o.purple,fontSize:9.5,fontFamily:k.interBold}}>
+                        {R.length}
+                      </V>
+                    </S>
+                    <Qe onPress={()=>X("")}hitSlop={10}style={b.clearBtn}>
+                      <Io color={o.grayTextWeak}size={13}/>
+                    </Qe>
+                  </S>}
+              </S>
 
-              <C style={S.toolbarRight}>
-                <N style={[S.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={Re}hitSlop={6}>
-                  <To color={o.errorColor}size={15}/>
-                  {U.size>0&&<C style={S.trashBadge}>
-                      <I style={S.trashBadgeText}>
-                        {U.size}
-                      </I>
-                    </C>}
-                </N>
+              <S style={b.toolbarRight}>
+                <$ style={[b.toolbarBtn,{borderColor:`${o.purple}38`,backgroundColor:`${o.purple}0F`}]}onPress={()=>xe(!0)}hitSlop={6}testID="inspector.network.exportBtn">
+                  <Oo color={o.purple}size={15}/>
+                </$>
 
-                <N style={[S.toolbarBtn,F&&{borderColor:o.purple,backgroundColor:`${o.purple}15`}]}onPress={()=>Le(e=>!e)}hitSlop={6}accessibilityLabel={F?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
-                  <Fe color={F?o.purple:o.grayTextStrong}size={16}/>
-                  {F&&<C style={S.activeFilterDot}/>}
-                </N>
+                <$ style={[b.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={Be}hitSlop={6}>
+                  <Fo color={o.errorColor}size={15}/>
+                  {Y.size>0&&<S style={b.trashBadge}>
+                      <V style={b.trashBadgeText}>
+                        {Y.size}
+                      </V>
+                    </S>}
+                </$>
 
-                <N style={S.toolbarBtn}onPress={()=>K(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
-                  <Io direction={Be==="newest"?"down":"up"}color={o.grayTextStrong}size={18}/>
-                </N>
-              </C>
-            </C>
+                <$ style={[b.toolbarBtn,G&&{borderColor:o.purple,backgroundColor:`${o.purple}15`}]}onPress={()=>Pe(e=>!e)}hitSlop={6}accessibilityLabel={ae?"Page Accordion Grouping Preserved (Temporarily in List View for Search Results)":G?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
+                  <Re color={G?o.purple:o.grayTextStrong}size={16}/>
+                  {G&&<S style={b.activeFilterDot}/>}
+                </$>
+
+                <$ style={b.toolbarBtn}onPress={()=>Z(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <Lo direction={Ee==="newest"?"down":"up"}color={o.grayTextStrong}size={18}/>
+                </$>
+              </S>
+            </S>
 
             
-            <C style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
-              <_e horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-                {Oe.map(e=>{const T=Q===e.id,z=e.color||o.purple,x=T?o.white:z;return<N testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{se(T?"all":e.id)}}>
-                      <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:T?z:`${z}12`,borderWidth:1,borderColor:T?z:`${z}30`,gap:5}}>
-                        {e.id==="all"&&<Fe size={11}color={x}/>}
-                        {e.id==="errors"&&<Bo size={11}color={x}/>}
-                        {e.id==="success"&&<Lo size={11}color={x}/>}
-                        {e.id==="slow"&&<Po size={11}color={x}/>}
-                        {e.id==="POST"&&<Eo size={11}color={x}/>}
-                        {e.id==="GET"&&<$o size={11}color={x}/>}
-                        {e.id==="graphql"&&<Do size={11}color={x}/>}
-                        <I style={{fontFamily:k.interBold,fontSize:10.5,color:T?o.white:o.primaryBlack}}>
+            <S style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
+              <Ue horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+                {He.map(e=>{const T=J===e.id,x=e.color||o.purple,z=T?o.white:x;return<$ testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{de(T?"all":e.id)}}>
+                      <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:T?x:`${x}12`,borderWidth:1,borderColor:T?x:`${x}30`,gap:5}}>
+                        {e.id==="all"&&<Re size={11}color={z}/>}
+                        {e.id==="errors"&&<$o size={11}color={z}/>}
+                        {e.id==="success"&&<Eo size={11}color={z}/>}
+                        {e.id==="slow"&&<Mo size={11}color={z}/>}
+                        {e.id==="POST"&&<Ao size={11}color={z}/>}
+                        {e.id==="GET"&&<Do size={11}color={z}/>}
+                        {e.id==="graphql"&&<No size={11}color={z}/>}
+                        <V style={{fontFamily:k.interBold,fontSize:10.5,color:T?o.white:o.primaryBlack}}>
                           {e.label}
-                        </I>
-                        <C style={{backgroundColor:T?"rgba(255,255,255,0.25)":`${z}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
-                          <I style={{fontFamily:k.interBold,fontSize:9,color:T?o.white:z}}>
+                        </V>
+                        <S style={{backgroundColor:T?"rgba(255,255,255,0.25)":`${x}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
+                          <V style={{fontFamily:k.interBold,fontSize:9,color:T?o.white:x}}>
                             {e.count}
-                          </I>
-                        </C>
-                      </C>
-                    </N>})}
-              </_e>
+                          </V>
+                        </S>
+                      </S>
+                    </$>})}
+              </Ue>
 
-              <N onPress={()=>be(!0)}style={{flexShrink:0}}>
-                <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:$?`${o.purple}20`:o.grayBackground,borderWidth:1,borderColor:$?o.purple:o.grayBorderSecondary,gap:5,shadowColor:o.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
-                  <Vo size={11}color={$?o.purple:o.grayText}/>
-                  <I style={{fontFamily:k.interBold,fontSize:10.5,color:$?o.purple:o.grayText}}>
-                    {oe("network.moreFilters","More Filters")}
-                  </I>
-                  {$&&<C style={{backgroundColor:o.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
-                      <I style={{fontFamily:k.interBold,fontSize:8.5,color:o.white}}>
-                        {De}
-                      </I>
-                    </C>}
-                </C>
-              </N>
-            </C>
+              <$ onPress={()=>Te(!0)}style={{flexShrink:0}}>
+                <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:M?`${o.purple}20`:o.grayBackground,borderWidth:1,borderColor:M?o.purple:o.grayBorderSecondary,gap:5,shadowColor:o.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
+                  <Ro size={11}color={M?o.purple:o.grayText}/>
+                  <V style={{fontFamily:k.interBold,fontSize:10.5,color:M?o.purple:o.grayText}}>
+                    {j("network.moreFilters","More Filters")}
+                  </V>
+                  {M&&<S style={{backgroundColor:o.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
+                      <V style={{fontFamily:k.interBold,fontSize:8.5,color:o.white}}>
+                        {Ne}
+                      </V>
+                    </S>}
+                </S>
+              </$>
+            </S>
 
             
-            {(Q!=="all"||R.trim().length>0||$||E.length!==Z.length)&&<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${o.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${o.purple}25`}}>
-                <I style={{fontFamily:k.interMedium,fontSize:10.5,color:o.purple}}>
-                  Showing {E.length} of {re.length} requests
-                </I>
-                <N onPress={()=>{j(""),se("all"),q(new Set),v(new Set),X("all"),J("all"),Y("time_desc"),pe("all")}}>
-                  <I style={{fontFamily:k.interBold,fontSize:10.5,color:o.errorColor}}>
+            {(J!=="all"||I.trim().length>0||M||R.length!==re.length)&&<S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${o.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${o.purple}25`}}>
+                <V style={{fontFamily:k.interMedium,fontSize:10.5,color:o.purple}}>
+                  Showing {R.length} of {Q.length} requests
+                </V>
+                <$ onPress={()=>{X(""),de("all"),W(new Set),_(new Set),ee("all"),oe("all"),te("time_desc"),ge("all")}}>
+                  <V style={{fontFamily:k.interBold,fontSize:10.5,color:o.errorColor}}>
                     Clear All Filters
-                  </I>
-                </N>
-              </C>}
-          </C>
+                  </V>
+                </$>
+              </S>}
+          </S>
+
+        <_e ref={be}data={Ae}keyExtractor={De}renderItem={qe}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Ze isSearch={I.length>0||M||J!=="all"}searchQuery={I}customTitle={I.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{X(""),W(new Set),_(new Set),ee("all"),oe("all"),te("time_desc"),de("all"),ge("all")}}/>}ListFooterComponent={K.length>0?<S style={{paddingBottom:24}}>
+              <So count={B?R.length:Math.min(ie,R.length)}totalCount={R.length}label="requests"hasMore={!B&&R.length>ie}loadMoreStep={30}onLoadMore={()=>ke(e=>e+30)}/>
+            </S>:null}style={{flex:1}}contentContainerStyle={[b.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
-        <We ref={Pe}data={de}keyExtractor={$e}renderItem={Ae}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Je isSearch={R.length>0||$||Q!=="all"}searchQuery={R}customTitle={R.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{j(""),q(new Set),v(new Set),X("all"),J("all"),Y("time_desc"),se("all"),pe("all")}}/>}ListFooterComponent={_.length>0?<C style={{paddingBottom:24}}>
-              <Ye count={F?E.length:Math.min(te,E.length)}totalCount={E.length}label="requests"hasMore={!F&&E.length>te}loadMoreStep={30}onLoadMore={()=>xe(e=>e+30)}/>
-            </C>:null}style={{flex:1}}contentContainerStyle={[S.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+      
+      <Co visible={$e}onClose={()=>Te(!1)}filters={Oe}onApply={ve}searchQuery={I}/>
 
       
-      <Ze visible={Ee}onClose={()=>be(!1)}filters={Me}onApply={Ne}searchQuery={R}/>
-    </C>});export default Mo;
+      <To visible={Me}onClose={()=>xe(!1)}filteredLogs={R}allLogs={Q}/>
+    </S>});export default vo;

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

@@ -1,78 +1,77 @@
-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}/>
+import{useEffect as J,useRef as L,useState as Q}from"react";import{Animated as r,Linking as M,Modal as X,Platform as R,StyleSheet as F,Text as T,TouchableOpacity as _,View as S}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as C}from"../../styles/AppFonts";import N from"../TouchableScale";import{t as x}from"../../i18n";import{loadSettings as B,saveSettings as k}from"../../helpers/settingsStore";import{trackTelemetryEvent as V}from"../../helpers/telemetry";import{StarIcon as E,CloseWhite as Z,CheckIcon as St,GitHubIcon as Tt,NpmIcon as Ct}from"../NetworkIcons";const Bt=7200*60*1e3,kt="https://github.com/vengatmacuser/react-native-inapp-inspector",It="https://www.npmjs.com/package/react-native-inapp-inspector";export const NpmStarPrompt=()=>{const[j,H]=Q(!1),A=L(new r.Value(200)).current,O=L(new r.Value(0)).current,D=L(new r.Value(1)).current;J(()=>{let o=!0;async function Y(){try{const I=await B();if(I.starPromptActioned)return;const z=Date.now(),q=I.starPromptFirstSeen||z;I.starPromptFirstSeen||await k({...I,starPromptFirstSeen:z});const K=I.starPromptLastShown||q;z-K>=Bt&&Math.random()<.65&&o&&setTimeout(()=>{o&&G()},1800)}catch{}}return Y(),()=>{o=!1}},[]);const G=async()=>{H(!0);try{const o=await B();await k({...o,starPromptLastShown:Date.now()}),V("npm_star_prompt_shown",{trigger:"5_day_interval",platform:R.OS})}catch{}r.parallel([r.spring(A,{toValue:0,friction:8,tension:50,useNativeDriver:!0}),r.timing(O,{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()},P=o=>{r.parallel([r.timing(O,{toValue:0,duration:180,useNativeDriver:!0}),r.timing(A,{toValue:200,duration:180,useNativeDriver:!0})]).start(()=>{H(!1),o&&o()})},W=async()=>{try{const o=await B();await k({...o,starPromptActioned:!0}),V("npm_star_prompt_action",{action:"starred",platform:R.OS})}catch{}P(()=>{M.openURL(kt).catch(()=>{M.openURL(It).catch(()=>{})})})},U=async()=>{try{const o=await B();await k({...o,starPromptActioned:!0}),V("npm_star_prompt_action",{action:"already_starred",platform:R.OS})}catch{}P()},v=async()=>{try{const o=await B();await k({...o,starPromptLastShown:Date.now()}),V("npm_star_prompt_action",{action:"remind_later",platform:R.OS})}catch{}P()},$=async()=>{try{const o=await B();await k({...o,starPromptActioned:!0}),V("npm_star_prompt_action",{action:"dont_ask_again",platform:R.OS})}catch{}P()};return j?<X transparent visible={j}animationType="none"onRequestClose={v}>
+      <r.View style={[e.backdrop,{opacity:O}]}>
+        <_ style={F.absoluteFill}activeOpacity={1}onPress={v}/>
 
-        <r.View style={[e.cardContainer,{transform:[{translateY:_}]}]}>
+        <r.View style={[e.cardContainer,{transform:[{translateY:A}]}]}>
           
           <S style={e.headerIconWrapper}>
-            <r.View style={[e.iconGlow,{transform:[{scale:O}]}]}/>
+            <r.View style={[e.iconGlow,{transform:[{scale:D}]}]}/>
             <S style={e.iconCircle}>
-              <M size={26}color={t.amber500}/>
+              <E size={26}color={t.amber500}/>
             </S>
           </S>
 
           
-          <P onPress={v}hitSlop={{top:10,bottom:10,left:10,right:10}}style={e.closeBtn}>
-            <X size={12}color={t.grayText}/>
-          </P>
+          <_ onPress={v}hitSlop={{top:10,bottom:10,left:10,right:10}}style={e.closeBtn}>
+            <Z size={12}color={t.grayText}/>
+          </_>
 
           
           <S style={e.pillBadge}>
-            <T style={e.pillBadgeText}>SUPPORT OPEN SOURCE</T>
+            <T style={e.pillBadgeText}>{x("support.supportOpenSource","SUPPORT OPEN SOURCE")}</T>
           </S>
 
           
-          <T style={e.title}>Enjoying In-App Inspector?</T>
+          <T style={e.title}>{x("support.enjoyingTitle","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!
+            {x("support.enjoyingSubtitle","If this debugging tool saves you time, please consider giving us a star on GitHub & npm. Your support helps us build more features!")}
           </T>
 
           
           <S style={e.metricsBar}>
             <S style={e.metricItem}>
-              <St size={13}color={t.grayText}/>
-              <T style={e.metricText}>GitHub Star</T>
+              <Tt size={13}color={t.grayText}/>
+              <T style={e.metricText}>{x("support.githubStar","GitHub Star")}</T>
             </S>
             <S style={e.metricDot}/>
             <S style={e.metricItem}>
-              <Tt size={13}color={t.npmRed}/>
-              <T style={e.metricText}>npm Package</T>
+              <Ct size={13}color={t.npmRed}/>
+              <T style={e.metricText}>{x("support.npmPackage","npm Package")}</T>
             </S>
             <S style={e.metricDot}/>
             <S style={e.metricItem}>
-              <T style={e.metricText}>100% Free</T>
+              <T style={e.metricText}>{x("support.free100","100% Free")}</T>
             </S>
           </S>
 
           
-          <E accessible={!0}accessibilityRole="button"accessibilityLabel="Star on GitHub"onPress={G}style={e.primaryButton}>
+          <N accessible={!0}accessibilityRole="button"accessibilityLabel="Star on GitHub"onPress={W}style={e.primaryButton}>
             <S style={e.primaryButtonContent}>
-              <M size={16}color={t.white}/>
-              <T style={e.primaryButtonText}>Star on GitHub & npm</T>
+              <E size={16}color={t.white}/>
+              <T style={e.primaryButtonText}>{x("support.starOnGithubNpm","Star on GitHub & npm")}</T>
             </S>
-          </E>
+          </N>
 
           
-          <E accessible={!0}accessibilityRole="button"accessibilityLabel="I already starred"onPress={W}style={e.secondaryButton}>
+          <N accessible={!0}accessibilityRole="button"accessibilityLabel="I already starred"onPress={U}style={e.secondaryButton}>
             <S style={e.secondaryButtonContent}>
-              <Z size={13}color={t.purple}/>
-              <T style={e.secondaryButtonText}>I Already Starred</T>
+              <St size={13}color={t.purple}/>
+              <T style={e.secondaryButtonText}>{x("support.alreadyStarred","I Already Starred")}</T>
             </S>
-          </E>
+          </N>
 
           
           <S style={e.footerRow}>
-            <P onPress={v}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-              <T style={e.footerLinkText}>Remind Me Later</T>
-            </P>
+            <_ onPress={v}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+              <T style={e.footerLinkText}>{x("support.remindMeLater","Remind Me Later")}</T>
+            </_>
 
             <S style={e.footerSeparator}/>
 
-            <P onPress={U}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-              <T style={e.footerLinkTextMuted}>Don't Ask Again</T>
-            </P>
+            <_ onPress={$}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+              <T style={e.footerLinkTextMuted}>{x("support.dontAskAgain","Don't Ask Again")}</T>
+            </_>
           </S>
         </r.View>
       </r.View>
-    </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;
+    </X>: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:C.interBold,fontSize:9.5,color:t.purple,letterSpacing:.6},title:{fontFamily:C.interBold,fontSize:18,lineHeight:23,color:t.primaryBlack,textAlign:"center",marginBottom:6},description:{fontFamily:C.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:C.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:C.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:C.interBold,fontSize:13,color:t.purple},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:12},footerLinkText:{fontFamily:C.interMedium,fontSize:11.5,color:t.grayText},footerSeparator:{width:1,height:12,backgroundColor:t.dividerColor},footerLinkTextMuted:{fontFamily:C.interRegular,fontSize:11.5,color:t.grayTextWeak}});export default NpmStarPrompt;