react-native-inapp-inspector 2.5.12 → 2.5.13

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