react-native-inapp-inspector 2.4.1 → 2.5.0

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

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

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

@@ -9,7 +9,7 @@ import{useState as N,useEffect as G,useRef as R}from"react";import{Animated as r
     <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}]}]}>
+  </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(t("about.copiedInstallCommand","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}>
         
         <T style={o.npmIconContainer}>

package/dist/esm/components/Inspector/PushCard.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import type { PushCardProps } from '../../types';
-declare const PushCard: React.NamedExoticComponent<PushCardProps>;
-export default PushCard;
+declare function PushCard({ item, onPress, searchStr, }: PushCardProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof PushCard>;
+export default _default;

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

@@ -1,4 +1,4 @@
-import O,{useMemo as $}from"react";import{StyleSheet as F,Text as T,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{formatTime as W}from"../../helpers";import{BellIcon as N,ClockIcon as E,ForwardChevronIcon as A,KeyIcon as U,SunIcon as M,MoonIcon as G,ExternalLinkIcon as K,CloudPushIcon as _}from"../NetworkIcons";import D from"../HighlightText";import X from"../TouchableScale";const q=B=>{const r=(B||"").toLowerCase();return r.includes("salesforce")||r==="sfmc"?{badgeColor:e.sky600,border:e.sky600,cardBg:`${e.sky600}04`,label:"SALESFORCE"}:r.includes("fcm")||r.includes("firebase")?{badgeColor:e.firebaseOrange,border:e.firebaseOrange,cardBg:`${e.firebaseOrange}04`,label:"FCM"}:r.includes("apns")||r.includes("apple")?{badgeColor:e.slate700,border:e.slate700,cardBg:`${e.slate700}04`,label:"APNS"}:r.includes("expo")?{badgeColor:e.brandPurple,border:e.brandPurple,cardBg:`${e.brandPurple}04`,label:"EXPO"}:r.includes("notifee")?{badgeColor:e.pink500,border:e.pink500,cardBg:`${e.pink500}04`,label:"NOTIFEE"}:r.includes("onesignal")?{badgeColor:e.errorColor,border:e.errorColor,cardBg:`${e.errorColor}04`,label:"ONESIGNAL"}:{badgeColor:e.purple,border:e.purple,cardBg:`${e.purple}04`,label:(B||"PUSH").toUpperCase()}},J=(B,r)=>{if(r==="opened")return{label:"OPENED",text:e.brandPurple,bg:`${e.brandPurple}14`,border:`${e.brandPurple}30`,Icon:K};const P=(B||"").toLowerCase();return P==="foreground"?{label:"FOREGROUND",text:e.greenColor,bg:`${e.greenColor}14`,border:`${e.greenColor}30`,Icon:M}:P==="background"?{label:"BACKGROUND",text:e.amber600,bg:`${e.amber600}14`,border:`${e.amber600}30`,Icon:G}:{label:(B||"RECEIVED").toUpperCase(),text:e.grayTextWeak,bg:`${e.grayTextWeak}14`,border:`${e.grayTextWeak}30`,Icon:_}},V=O.memo(function({item:r,onPress:P,searchStr:R=""}){const S=$(()=>q(r.source),[r.source]),H=$(()=>J(r.appState,r.action),[r.appState,r.action]),I=$(()=>r.data?Object.keys(r.data).length:0,[r.data]),z=$(()=>!!(r.data?.deepLink||r.data?.openDirectUrl||r.data?._od||r.customDomainAttributes?.openDirectUrl),[r.data,r.customDomainAttributes]),L=H.Icon;return<X onPress={P}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:S.border,backgroundColor:S.cardBg}]}accessibilityRole="button"accessibilityLabel={`Push Notification: ${r.title||"Notification"}`}>
+import O,{useMemo as R}from"react";import{StyleSheet as F,Text as T,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{useTranslation as W}from"../../i18n";import{formatTime as E}from"../../helpers";import{BellIcon as N,ClockIcon as A,ForwardChevronIcon as U,SunIcon as v,MoonIcon as M,CloudPushIcon as G,LinkChainIcon as K,ExternalLinkIcon as _,KeyIcon as X}from"../NetworkIcons";import $ from"../HighlightText";import J from"../TouchableScale";const Q=r=>{const t=(r||"").toLowerCase();return t.includes("salesforce")||t==="sfmc"?{badgeColor:e.sky600,border:e.sky600,cardBg:`${e.sky600}04`,label:"SALESFORCE"}:t.includes("fcm")||t.includes("firebase")?{badgeColor:e.firebaseOrange,border:e.firebaseOrange,cardBg:`${e.firebaseOrange}04`,label:"FCM"}:t.includes("apns")||t.includes("apple")?{badgeColor:e.slate700,border:e.slate700,cardBg:`${e.slate700}04`,label:"APNS"}:t.includes("expo")?{badgeColor:e.brandPurple,border:e.brandPurple,cardBg:`${e.brandPurple}04`,label:"EXPO"}:t.includes("notifee")?{badgeColor:e.pink500,border:e.pink500,cardBg:`${e.pink500}04`,label:"NOTIFEE"}:t.includes("onesignal")?{badgeColor:e.errorColor,border:e.errorColor,cardBg:`${e.errorColor}04`,label:"ONESIGNAL"}:{badgeColor:e.purple,border:e.purple,cardBg:`${e.purple}04`,label:(r||"PUSH").toUpperCase()}},Y=(r,t)=>{if(t==="opened")return{label:"OPENED",text:e.brandPurple,bg:`${e.brandPurple}14`,border:`${e.brandPurple}30`,Icon:_};const B=(r||"").toLowerCase();return B==="foreground"?{label:"FOREGROUND",text:e.greenColor,bg:`${e.greenColor}14`,border:`${e.greenColor}30`,Icon:v}:B==="background"?{label:"BACKGROUND",text:e.amber600,bg:`${e.amber600}14`,border:`${e.amber600}30`,Icon:M}:{label:(r||"RECEIVED").toUpperCase(),text:e.grayTextWeak,bg:`${e.grayTextWeak}14`,border:`${e.grayTextWeak}30`,Icon:G}};function Z({item:r,onPress:t,searchStr:B=""}){const{t:D}=W(),I=R(()=>Q(r.source),[r.source]),P=R(()=>Y(r.appState,r.action),[r.appState,r.action]),H=R(()=>r.data?Object.keys(r.data).length:0,[r.data]),V=R(()=>!!(r.data?.deepLink||r.data?.openDirectUrl||r.data?._od||r.customDomainAttributes?.openDirectUrl),[r.data,r.customDomainAttributes]),L=P.Icon;return<J onPress={t}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:I.border,backgroundColor:I.cardBg}]}accessibilityRole="button"accessibilityLabel={`Push Notification: ${r.title||"Notification"}`}>
       <C style={o.cardBody}>
         
         <C style={o.cardHeaderRow}>
@@ -8,57 +8,58 @@ import O,{useMemo as $}from"react";import{StyleSheet as F,Text as T,View as C}fr
             </T>
 
             
-            <C style={[o.methodBadge,{backgroundColor:S.badgeColor}]}>
-              <T style={o.methodBadgeText}>{S.label}</T>
+            <C style={[o.methodBadge,{backgroundColor:I.badgeColor}]}>
+              <T style={o.methodBadgeText}>{I.label}</T>
             </C>
 
             
-            <C style={[o.chip,{backgroundColor:`${S.badgeColor}12`,borderColor:`${S.badgeColor}2E`}]}>
-              <T style={[o.chipText,{color:S.badgeColor}]}numberOfLines={1}>
+            <C style={[o.chip,{backgroundColor:`${I.badgeColor}12`,borderColor:`${I.badgeColor}2E`}]}>
+              <T style={[o.chipText,{color:I.badgeColor}]}numberOfLines={1}>
                 push.{(r.source||"remote").toLowerCase()}
               </T>
             </C>
 
             
-            {I>0&&<C style={[o.chip,{backgroundColor:`${e.teal600}14`,borderColor:`${e.teal600}33`}]}>
+            {H>0&&<C style={[o.chip,{backgroundColor:`${e.teal600}14`,borderColor:`${e.teal600}33`}]}>
                 <T style={[o.chipText,{color:e.teal600}]}>
-                  Payload{`{${I}}`}
+                  Payload{`{${H}}`}
                 </T>
               </C>}
 
             
-            {z&&<C style={[o.chip,{backgroundColor:`${e.brandPurple}14`,borderColor:`${e.brandPurple}33`}]}>
+            {V&&<C style={[o.chip,{backgroundColor:`${e.brandPurple}14`,borderColor:`${e.brandPurple}33`,flexDirection:"row",alignItems:"center",gap:3}]}>
+                <K size={10}color={e.brandPurple}/>
                 <T style={[o.chipText,{color:e.brandPurple}]}>
-                  🔗 Link
+                  {D("push.link","Link")}
                 </T>
               </C>}
           </C>
 
           
           <C style={o.cardHeaderRight}>
-            <C style={[o.statusPill,{backgroundColor:H.bg,borderColor:H.border}]}>
-              <L color={H.text}size={9.5}/>
-              <T style={[o.statusPillText,{color:H.text}]}>
-                {H.label}
+            <C style={[o.statusPill,{backgroundColor:P.bg,borderColor:P.border}]}>
+              <L color={P.text}size={9.5}/>
+              <T style={[o.statusPillText,{color:P.text}]}>
+                {P.label}
               </T>
             </C>
-            <A color={e.grayTextWeak}size={13}/>
+            <U color={e.grayTextWeak}size={13}/>
           </C>
         </C>
 
         
         <C style={o.messageBox}>
-          <D text={r.title||"(No Title)"}searchWords={R?[R]:[]}numberOfLines={1}style={o.messageTitle}highlightStyle={o.highlight}/>
-          <D text={r.body||"(No message body)"}searchWords={R?[R]:[]}numberOfLines={2}style={o.messageBody}highlightStyle={o.highlight}/>
+          <$ text={r.title||"(No Title)"}searchWords={B?[B]:[]}numberOfLines={1}style={o.messageTitle}highlightStyle={o.highlight}/>
+          <$ text={r.body||"(No message body)"}searchWords={B?[B]:[]}numberOfLines={2}style={o.messageBody}highlightStyle={o.highlight}/>
         </C>
 
         
         <C style={o.cardFooterRow}>
           <C style={o.footerLeft}>
             <C style={o.cardDateRow}>
-              <E color={e.slate400}size={10}/>
+              <A color={e.slate400}size={10}/>
               <T style={o.cardDateText}numberOfLines={1}>
-                {W(r.timestamp)}
+                {E(r.timestamp)}
               </T>
             </C>
 
@@ -77,13 +78,13 @@ import O,{useMemo as $}from"react";import{StyleSheet as F,Text as T,View as C}fr
           </C>
 
           <C style={o.footerRight}>
-            {I>0&&<C style={o.metaStatChip}>
-                <U color={e.purple}size={8.5}/>
+            {H>0&&<C style={o.metaStatChip}>
+                <X color={e.purple}size={8.5}/>
                 <T style={o.metaStatText}>
-                  {I} {I===1?"key":"keys"}
+                  {H} {H===1?"key":"keys"}
                 </T>
               </C>}
           </C>
         </C>
       </C>
-    </X>}),o=F.create({card:{height:140,alignSelf:"stretch",borderRadius:10,overflow:"hidden",borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString,marginBottom:6},cardBody:{height:"100%",paddingHorizontal:12,paddingTop:10,paddingBottom:8,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,marginRight:8,gap:6,minWidth:0,overflow:"hidden"},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},serialNumber:{fontFamily:k.interBold,color:e.grayTextWeak,fontSize:10},methodBadge:{paddingHorizontal:7,paddingVertical:2.5,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:k.interBold,fontSize:9.5,lineHeight:12,letterSpacing:.5,color:e.white},chip:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},chipText:{fontFamily:k.interBold,fontSize:9,lineHeight:12},statusPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:2.5,borderRadius:6,borderWidth:1,flexShrink:0},statusPillText:{fontFamily:k.interBold,fontSize:10,lineHeight:13},messageBox:{backgroundColor:e.grayBackground,borderRadius:7,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:10,paddingVertical:6,height:68,minHeight:68,maxHeight:68,justifyContent:"center",gap:2,overflow:"hidden"},messageTitle:{fontFamily:k.interBold,fontSize:12,color:e.primaryBlack,lineHeight:16},messageBody:{fontFamily:k.interRegular,fontSize:11,color:e.grayText,lineHeight:15},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:6,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0},cardDateRow:{flexDirection:"row",alignItems:"center",gap:3.5},cardDateText:{fontFamily:k.interRegular,fontSize:10,lineHeight:13,color:e.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.skySoftBg,borderColor:e.skySoftBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,flexShrink:1,minWidth:0},callerChipText:{color:e.skySoftText,fontSize:9,lineHeight:12,fontFamily:k.interBold},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.purple}14`,borderColor:`${e.purple}2B`,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},metaStatText:{color:e.purple,fontSize:9,lineHeight:12,fontFamily:k.interBold}});V.displayName="PushCard";export default V;
+    </J>}const o=F.create({card:{height:140,alignSelf:"stretch",borderRadius:10,overflow:"hidden",borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString,marginBottom:6},cardBody:{height:"100%",paddingHorizontal:8,paddingTop:8,paddingBottom:6,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,marginRight:4,gap:4.5,minWidth:0,overflow:"hidden"},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},serialNumber:{fontFamily:S.interBold,color:e.grayTextWeak,fontSize:10},methodBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:S.interBold,fontSize:9.5,lineHeight:12,letterSpacing:.5,color:e.white},chip:{paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:S.interBold,fontSize:9,lineHeight:12},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,flexShrink:0},statusPillText:{fontFamily:S.interBold,fontSize:9.5,lineHeight:12},messageBox:{backgroundColor:e.grayBackground,borderRadius:7,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:7,paddingVertical:5,height:68,minHeight:68,maxHeight:68,justifyContent:"center",gap:2,overflow:"hidden"},messageTitle:{fontFamily:S.interBold,fontSize:12,color:e.primaryBlack,lineHeight:16},messageBody:{fontFamily:S.interRegular,fontSize:11,color:e.grayText,lineHeight:15},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:4},footerLeft:{flexDirection:"row",alignItems:"center",gap:4.5,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},cardDateRow:{flexDirection:"row",alignItems:"center",gap:3.5},cardDateText:{fontFamily:S.interRegular,fontSize:10,lineHeight:13,color:e.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.skySoftBg,borderColor:e.skySoftBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,flexShrink:1,minWidth:0},callerChipText:{color:e.skySoftText,fontSize:9,lineHeight:12,fontFamily:S.interBold},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.purple}14`,borderColor:`${e.purple}2B`,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},metaStatText:{color:e.purple,fontSize:9,lineHeight:12,fontFamily:S.interBold}});function ee(r,t){return r.item===t.item&&r.searchStr===t.searchStr&&r.onPress===t.onPress}export default O.memo(Z,ee);