react-native-inapp-inspector 2.3.24 → 2.4.0

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

@@ -1,64 +1,70 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(o,t,l,s){s===void 0&&(s=l);var n=Object.getOwnPropertyDescriptor(t,l);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[l]}}),Object.defineProperty(o,s,n)}):(function(o,t,l,s){s===void 0&&(s=l),o[s]=t[l]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(o,t){Object.defineProperty(o,"default",{enumerable:!0,value:t})}):function(o,t){o.default=t}),__importStar=this&&this.__importStar||(function(){var o=function(t){return o=Object.getOwnPropertyNames||function(l){var s=[];for(var n in l)Object.prototype.hasOwnProperty.call(l,n)&&(s[s.length]=n);return s},o(t)};return function(t){if(t&&t.__esModule)return t;var l={};if(t!=null)for(var s=o(t),n=0;n<s.length;n++)s[n]!=="default"&&__createBinding(l,t,s[n]);return __setModuleDefault(l,t),l}})(),__importDefault=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),DomainHeader_1=__importDefault(require("../DomainHeader")),LogCard_1=__importDefault(require("../LogCard")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),NetworkFilterModal_1=__importDefault(require("./NetworkFilterModal")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),constants_1=require("../../constants"),i18n_1=require("../../i18n"),NetworkIcons_1=require("../NetworkIcons"),NetworkTab=react_1.default.memo(()=>{const{groupedData:o,search:t,setSearch:l,searchScope:s,setSearchScope:n,isRegexSearch:U,setIsRegexSearch:X,isCaseSensitive:J,setIsCaseSensitive:Y,quickFilter:z,setQuickFilter:v,handleDelete:E,selectedLogs:A,sortOrder:x,setSortOrder:m,statusFilters:c,setStatusFilters:y,methodFilters:p,setMethodFilters:S,availableMethods:Z,filteredLogs:b,logs:g,toggleSectionFilter:I,toggleSectionCollapse:k,minStart:R,totalRange:B,newLogIds:O,toggleSelect:P,setSelected:q,isNetworkPaused:V,setIsNetworkPaused:H}=(0,InspectorContext_1.useInspector)(),{t:D}=(0,i18n_1.useTranslation)(),W=(0,react_1.useRef)(null),[$,F]=react_1.default.useState(!1),[L,M]=react_1.default.useState(!1),j=(0,react_1.useMemo)(()=>({statusCodes:c.size>0?new Set(c):new Set(["all"]),methods:p.size>0?new Set(p):new Set(["all"]),latency:"all",protocol:"all",sortBy:x==="newest"?"time_desc":"time_asc"}),[c,p,x]),G=(0,react_1.useCallback)(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?y(new Set):y(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?S(new Set):S(new Set([...e.methods].map(r=>r))),e.sortBy==="time_asc"?m("oldest"):m("newest")},[y,S,m]),C=(0,react_1.useMemo)(()=>{let e=0,r=0,a=0,i=0,u=0,T=0;return g.forEach(f=>{const w=typeof f.status=="number"?f.status:parseInt(String(f.status),10);f.status===0||f.status==null||!isNaN(w)&&w>=400?e++:!isNaN(w)&&w>=200&&w<400&&r++,(f.duration||0)>=500&&a++;const d=(f.method||"").toUpperCase();d==="POST"&&i++,d==="GET"&&u++;const h=(f.url||"").toLowerCase(),N=(f.client||"").toLowerCase();(h.includes("graphql")||N.includes("graphql")||N.includes("apollo"))&&T++}),{all:g.length,errors:e,success:r,slow:a,post:i,get:u,graphql:T}},[g]),Q=(0,react_1.useMemo)(()=>[{id:"all",label:"All",count:C.all,color:AppColors_1.AppColors.purple},{id:"errors",label:"Errors",count:C.errors,color:AppColors_1.AppColors.errorColor},{id:"success",label:"2xx OK",count:C.success,color:AppColors_1.AppColors.greenColor},{id:"slow",label:"Slow >500ms",count:C.slow,color:AppColors_1.AppColors.warningIconGold},{id:"POST",label:"POST",count:C.post,color:constants_1.METHOD_COLORS.POST||"#3B82F6"},{id:"GET",label:"GET",count:C.get,color:constants_1.METHOD_COLORS.GET||"#10B981"},{id:"graphql",label:"GraphQL",count:C.graphql,color:"#E10098"}],[C]),_=(0,react_1.useMemo)(()=>{if(!g||g.length===0)return null;let e=0,r=0,a=0,i=0;const u=[];g.forEach(d=>{if(d.status!=null){r++;const h=typeof d.status=="number"?d.status:parseInt(String(d.status),10);isNaN(h)||h>=200&&h<400&&e++}typeof d.duration=="number"&&d.duration>0&&(u.push(d.duration),a+=d.duration)}),u.sort((d,h)=>d-h);const T=u.length>0?Math.round(a/u.length):0,f=u.length>0?u[Math.floor(u.length*.95)]:0;return{successRate:r>0?Math.round(e/r*100):100,avgDuration:T,p95:f,totalCount:g.length}},[g]),K=(0,react_1.useCallback)(({item:e,index:r})=>{if(e.type==="header")return<AnimatedEntrance_1.default index={r}distance={8}>
-            <DomainHeader_1.default pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={I}isCollapsed={e.isCollapsed}onToggleCollapse={k}isFirst={e.isFirst}timestamp={e.timestamp}/>
-          </AnimatedEntrance_1.default>;const{log:a,isLast:i,color:u}=e;return<AnimatedEntrance_1.default index={r}distance={8}style={[styles_1.default.treeNodeRow,i&&styles_1.default.treeNodeRowLast]}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(a,r,o,l){l===void 0&&(l=o);var i=Object.getOwnPropertyDescriptor(r,o);(!i||("get"in i?!r.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return r[o]}}),Object.defineProperty(a,l,i)}):(function(a,r,o,l){l===void 0&&(l=o),a[l]=r[o]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(a,r){Object.defineProperty(a,"default",{enumerable:!0,value:r})}):function(a,r){a.default=r}),__importStar=this&&this.__importStar||(function(){var a=function(r){return a=Object.getOwnPropertyNames||function(o){var l=[];for(var i in o)Object.prototype.hasOwnProperty.call(o,i)&&(l[l.length]=i);return l},a(r)};return function(r){if(r&&r.__esModule)return r;var o={};if(r!=null)for(var l=a(r),i=0;i<l.length;i++)l[i]!=="default"&&__createBinding(o,r,l[i]);return __setModuleDefault(o,r),o}})(),__importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),DomainHeader_1=__importDefault(require("../DomainHeader")),LogCard_1=__importDefault(require("../LogCard")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),NetworkFilterModal_1=__importDefault(require("./NetworkFilterModal")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),constants_1=require("../../constants"),i18n_1=require("../../i18n"),NetworkIcons_1=require("../NetworkIcons"),NetworkTab=react_1.default.memo(()=>{const{groupedData:a,loadMoreSection:r,search:o,setSearch:l,setSearchScope:i,quickFilter:A,setQuickFilter:V,handleDelete:D,selectedLogs:b,sortOrder:z,setSortOrder:m,statusFilters:c,setStatusFilters:C,methodFilters:d,setMethodFilters:_,filteredLogs:w,logs:h,toggleSectionFilter:I,toggleSectionCollapse:R,minStart:O,totalRange:q,newLogIds:k,toggleSelect:L,setSelected:B}=(0,InspectorContext_1.useInspector)(),{t:v}=(0,i18n_1.useTranslation)(),N=(0,react_1.useRef)(null),[$,x]=react_1.default.useState(!1),[P,M]=react_1.default.useState(!1),E=(0,react_1.useMemo)(()=>({statusCodes:c.size>0?new Set(c):new Set(["all"]),methods:d.size>0?new Set(d):new Set(["all"]),latency:"all",protocol:"all",sortBy:z==="newest"?"time_desc":"time_asc"}),[c,d,z]),H=(0,react_1.useCallback)(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?C(new Set):C(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?_(new Set):_(new Set([...e.methods].map(n=>n))),e.sortBy==="time_asc"?m("oldest"):m("newest")},[C,_,m]),p=(0,react_1.useMemo)(()=>{let e=0,n=0,s=0,u=0,y=0,T=0;return h.forEach(t=>{const g=typeof t.status=="number"?t.status:parseInt(String(t.status),10);t.status===0||t.status==null||!isNaN(g)&&g>=400?e++:!isNaN(g)&&g>=200&&g<400&&n++,(t.duration||0)>=500&&s++;const f=(t.method||"").toUpperCase();f==="POST"&&u++,f==="GET"&&y++;const F=(t.url||"").toLowerCase(),S=(t.client||"").toLowerCase();(F.includes("graphql")||S.includes("graphql")||S.includes("apollo"))&&T++}),{all:h.length,errors:e,success:n,slow:s,post:u,get:y,graphql:T}},[h]),j=(0,react_1.useMemo)(()=>[{id:"all",label:"All",count:p.all,color:AppColors_1.AppColors.purple},{id:"errors",label:"Errors",count:p.errors,color:AppColors_1.AppColors.errorColor},{id:"success",label:"2xx OK",count:p.success,color:AppColors_1.AppColors.greenColor},{id:"slow",label:"Slow >500ms",count:p.slow,color:AppColors_1.AppColors.warningIconGold},{id:"POST",label:"POST",count:p.post,color:constants_1.METHOD_COLORS.POST||"#3B82F6"},{id:"GET",label:"GET",count:p.get,color:constants_1.METHOD_COLORS.GET||"#10B981"},{id:"graphql",label:"GraphQL",count:p.graphql,color:AppColors_1.AppColors.graphqlPink}],[p]),W=(0,react_1.useCallback)(({item:e,index:n})=>{if(e.type==="header")return<AnimatedEntrance_1.default index={n}distance={8}>
+            <DomainHeader_1.default pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={I}isCollapsed={e.isCollapsed}onToggleCollapse={R}isFirst={e.isFirst}timestamp={e.timestamp}/>
+          </AnimatedEntrance_1.default>;if(e.type==="loadMore"){const{pageName:T,color:t,remainingCount:g,totalCount:f,loadedCount:F,loadMoreStep:S,hasMore:G}=e;return<react_native_1.View style={[styles_1.default.treeNodeRow,styles_1.default.treeNodeRowLast]}>
+            <react_native_1.View style={styles_1.default.treeLines}>
+              <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:t},styles_1.default.modernTreeLineLast]}/>
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.treeCardWrapper}>
+              {G?<TouchableScale_1.default onPress={()=>r(T,50)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${t}14`,borderWidth:1.5,borderColor:`${t}40`,shadowColor:t,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
+                  <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:8}}>
+                    <react_native_1.View style={{width:22,height:22,borderRadius:11,backgroundColor:t,alignItems:"center",justifyContent:"center",shadowColor:t,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
+                      <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white}size={9}direction="down"/>
+                    </react_native_1.View>
+                    <react_native_1.View>
+                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:t}}>
+                        {v("footer.loadMoreRequests",{count:S,defaultValue:`Load ${S} More Requests`})}
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,marginTop:1}}>
+                        Showing {F} of {f} requests
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  <react_native_1.View style={{flexDirection:"row",alignItems:"center",backgroundColor:`${t}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${t}40`,gap:3}}>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:t}}>
+                      +{g}
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9,color:t}}>
+                      more
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </TouchableScale_1.default>:<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${t}0A`,borderWidth:1,borderColor:`${t}25`}}>
+                  <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:7}}>
+                    <react_native_1.View style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${t}25`,alignItems:"center",justifyContent:"center"}}>
+                      <NetworkIcons_1.CheckIcon color={t}size={8}/>
+                    </react_native_1.View>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.grayTextStrong}}>
+                      {v("footer.allLoaded",{count:f,defaultValue:`All ${f} requests loaded`})}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+
+                  <react_native_1.View style={{backgroundColor:`${t}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6}}>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:t}}>
+                      {f}/{f}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>}
+            </react_native_1.View>
+          </react_native_1.View>}const{log:s,isLast:u,color:y}=e;return<AnimatedEntrance_1.default index={n}distance={8}style={[styles_1.default.treeNodeRow,u&&styles_1.default.treeNodeRowLast]}>
           <react_native_1.View style={styles_1.default.treeLines}>
-            <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:u},i&&styles_1.default.modernTreeLineLast]}/>
-            {!i&&<react_native_1.View style={[styles_1.default.modernTreeBranch,{borderColor:u}]}/>}
+            <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:y},u&&styles_1.default.modernTreeLineLast]}/>
+            {!u&&<react_native_1.View style={[styles_1.default.modernTreeBranch,{borderColor:y}]}/>}
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.treeCardWrapper}>
-            <LogCard_1.default item={a}isSelected={A.has(a.id)}onToggleSelect={P}onPress={()=>{q(a)}}timelineMinStart={R}timelineTotalRange={B}isNew={O.has(a.id)}searchStr={t}/>
+            <LogCard_1.default item={s}isSelected={b.has(s.id)}onToggleSelect={L}onPress={()=>{B(s)}}timelineMinStart={O}timelineTotalRange={q}isNew={k.has(s.id)}searchStr={o}/>
           </react_native_1.View>
-        </AnimatedEntrance_1.default>},[R,B,O,A,P,t,I,k,q]);return<react_native_1.View style={{flex:1}}>
+        </AnimatedEntrance_1.default>},[O,q,k,b,L,o,I,R,r,B,v]);return<react_native_1.View style={{flex:1}}>
       <react_native_1.View style={{marginTop:6}}>
             
-            {_!=null&&_.totalCount>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:8,paddingHorizontal:10,paddingVertical:5.5,marginHorizontal:12,marginBottom:6,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor}}>
-                
-                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4.5}}>
-                  <react_native_1.View style={{width:6,height:6,borderRadius:3,backgroundColor:_.successRate>=95?AppColors_1.AppColors.greenColor:_.successRate>=80?AppColors_1.AppColors.amber500:AppColors_1.AppColors.errorColor}}/>
-                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.primaryBlack}}>
-                    {_.successRate}%
-                  </react_native_1.Text>
-                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak}}>
-                    {D("network.successRate")}
-                  </react_native_1.Text>
-                </react_native_1.View>
-
-                <react_native_1.View style={{width:1,height:11,backgroundColor:AppColors_1.AppColors.dividerColor}}/>
-
-                
-                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                  <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.purple}size={10}/>
-                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.purple}}>
-                    {_.avgDuration}ms
-                  </react_native_1.Text>
-                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak}}>
-                    {D("network.avgLatency")}
-                  </react_native_1.Text>
-                </react_native_1.View>
-
-                <react_native_1.View style={{width:1,height:11,backgroundColor:AppColors_1.AppColors.dividerColor}}/>
-
-                
-                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.primaryBlack}}>
-                    {_.p95}ms
-                  </react_native_1.Text>
-                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak}}>
-                    P95
-                  </react_native_1.Text>
-                </react_native_1.View>
-              </react_native_1.View>}
-
-            
             <react_native_1.View style={styles_1.default.toolbarRow}>
-              <react_native_1.View style={[styles_1.default.searchContainer,L&&{borderColor:AppColors_1.AppColors.purple,borderWidth:1.5}]}>
-                <NetworkIcons_1.SearchIcon color={L?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextWeak}size={15}/>
-                <react_native_1.TextInput placeholder="Search URL, status, method, headers, body..."placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={t}onChangeText={l}onFocus={()=>M(!0)}onBlur={()=>M(!1)}style={styles_1.default.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              <react_native_1.View style={[styles_1.default.searchContainer,P&&{borderColor:AppColors_1.AppColors.purple,borderWidth:1.5}]}>
+                <NetworkIcons_1.SearchIcon color={P?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextWeak}size={15}/>
+                <react_native_1.TextInput placeholder="Search URL, status, method, headers, body..."placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={o}onChangeText={l}onFocus={()=>M(!0)}onBlur={()=>M(!1)}style={styles_1.default.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
-                {t.length>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                {o.length>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
                     <react_native_1.View style={{backgroundColor:`${AppColors_1.AppColors.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
                       <react_native_1.Text style={{color:AppColors_1.AppColors.purple,fontSize:9.5,fontFamily:AppFonts_1.AppFonts.interBold}}>
-                        {b.length}
+                        {w.length}
                       </react_native_1.Text>
                     </react_native_1.View>
                     <react_native_1.Pressable onPress={()=>l("")}hitSlop={10}style={styles_1.default.clearBtn}>
@@ -68,26 +74,22 @@
               </react_native_1.View>
 
               <react_native_1.View style={styles_1.default.toolbarRight}>
-                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,V&&{borderColor:`${AppColors_1.AppColors.darkOrange}50`,backgroundColor:`${AppColors_1.AppColors.darkOrange}18`}]}onPress={()=>H(e=>!e)}hitSlop={6}>
-                  <NetworkIcons_1.HeaderPauseIcon isPaused={V}color={V?AppColors_1.AppColors.darkOrange:AppColors_1.AppColors.grayTextStrong}size={16}/>
-                </TouchableScale_1.default>
-
-                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.errorColor}38`,backgroundColor:`${AppColors_1.AppColors.errorColor}0F`}]}onPress={E}hitSlop={6}>
+                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.errorColor}38`,backgroundColor:`${AppColors_1.AppColors.errorColor}0F`}]}onPress={D}hitSlop={6}>
                   <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor}size={15}/>
-                  {A.size>0&&<react_native_1.View style={styles_1.default.trashBadge}>
+                  {b.size>0&&<react_native_1.View style={styles_1.default.trashBadge}>
                       <react_native_1.Text style={styles_1.default.trashBadgeText}>
-                        {A.size}
+                        {b.size}
                       </react_native_1.Text>
                     </react_native_1.View>}
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default style={styles_1.default.toolbarBtn}onPress={()=>m(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
-                  <NetworkIcons_1.SortArrowIcon direction={x==="newest"?"down":"up"}color={AppColors_1.AppColors.grayTextStrong}size={18}/>
+                  <NetworkIcons_1.SortArrowIcon direction={z==="newest"?"down":"up"}color={AppColors_1.AppColors.grayTextStrong}size={18}/>
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,(c.size>0||p.size>0)&&{borderColor:AppColors_1.AppColors.purple,backgroundColor:`${AppColors_1.AppColors.purple}15`}]}onPress={()=>F(!0)}hitSlop={6}>
-                  <NetworkIcons_1.FilterIcon color={c.size>0||p.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextStrong}size={16}/>
-                  {(c.size>0||p.size>0)&&<react_native_1.View style={styles_1.default.activeFilterDot}/>}
+                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,(c.size>0||d.size>0)&&{borderColor:AppColors_1.AppColors.purple,backgroundColor:`${AppColors_1.AppColors.purple}15`}]}onPress={()=>x(!0)}hitSlop={6}>
+                  <NetworkIcons_1.FilterIcon color={c.size>0||d.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextStrong}size={16}/>
+                  {(c.size>0||d.size>0)&&<react_native_1.View style={styles_1.default.activeFilterDot}/>}
                 </TouchableScale_1.default>
               </react_native_1.View>
             </react_native_1.View>
@@ -95,20 +97,20 @@
             
             <react_native_1.View style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
               <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-                {Q.map(e=>{const r=z===e.id,a=e.color||AppColors_1.AppColors.purple,i=r?AppColors_1.AppColors.white:a;return<TouchableScale_1.default key={e.id}onPress={()=>{v(r?"all":e.id)}}>
-                      <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:r?a:`${a}12`,borderWidth:1,borderColor:r?a:`${a}30`,gap:5}}>
-                        {e.id==="all"&&<NetworkIcons_1.LayersIcon size={11}color={i}/>}
-                        {e.id==="errors"&&<NetworkIcons_1.CircleXIcon size={11}color={i}/>}
-                        {e.id==="success"&&<NetworkIcons_1.CircleCheckIcon size={11}color={i}/>}
-                        {e.id==="slow"&&<NetworkIcons_1.ClockIcon size={11}color={i}/>}
-                        {e.id==="POST"&&<NetworkIcons_1.RequestIcon size={11}color={i}/>}
-                        {e.id==="GET"&&<NetworkIcons_1.ResponseIcon size={11}color={i}/>}
-                        {e.id==="graphql"&&<NetworkIcons_1.AtomIcon size={11}color={i}/>}
-                        <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:r?AppColors_1.AppColors.white:AppColors_1.AppColors.primaryBlack}}>
+                {j.map(e=>{const n=A===e.id,s=e.color||AppColors_1.AppColors.purple,u=n?AppColors_1.AppColors.white:s;return<TouchableScale_1.default key={e.id}onPress={()=>{V(n?"all":e.id)}}>
+                      <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:n?s:`${s}12`,borderWidth:1,borderColor:n?s:`${s}30`,gap:5}}>
+                        {e.id==="all"&&<NetworkIcons_1.LayersIcon size={11}color={u}/>}
+                        {e.id==="errors"&&<NetworkIcons_1.CircleXIcon size={11}color={u}/>}
+                        {e.id==="success"&&<NetworkIcons_1.CircleCheckIcon size={11}color={u}/>}
+                        {e.id==="slow"&&<NetworkIcons_1.ClockIcon size={11}color={u}/>}
+                        {e.id==="POST"&&<NetworkIcons_1.RequestIcon size={11}color={u}/>}
+                        {e.id==="GET"&&<NetworkIcons_1.ResponseIcon size={11}color={u}/>}
+                        {e.id==="graphql"&&<NetworkIcons_1.AtomIcon size={11}color={u}/>}
+                        <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:n?AppColors_1.AppColors.white:AppColors_1.AppColors.primaryBlack}}>
                           {e.label}
                         </react_native_1.Text>
-                        <react_native_1.View style={{backgroundColor:r?"rgba(255,255,255,0.25)":`${a}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
-                          <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9,color:r?AppColors_1.AppColors.white:a}}>
+                        <react_native_1.View style={{backgroundColor:n?"rgba(255,255,255,0.25)":`${s}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
+                          <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9,color:n?AppColors_1.AppColors.white:s}}>
                             {e.count}
                           </react_native_1.Text>
                         </react_native_1.View>
@@ -116,15 +118,15 @@
                     </TouchableScale_1.default>})}
               </react_native_1.ScrollView>
 
-              <TouchableScale_1.default onPress={()=>F(!0)}style={{flexShrink:0}}>
-                <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:c.size>0||p.size>0?`${AppColors_1.AppColors.purple}20`:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:c.size>0||p.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayBorderSecondary,gap:5,shadowColor:AppColors_1.AppColors.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
-                  <NetworkIcons_1.FilterIcon size={11}color={c.size>0||p.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayText}/>
-                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:c.size>0||p.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayText}}>
+              <TouchableScale_1.default onPress={()=>x(!0)}style={{flexShrink:0}}>
+                <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:c.size>0||d.size>0?`${AppColors_1.AppColors.purple}20`:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:c.size>0||d.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayBorderSecondary,gap:5,shadowColor:AppColors_1.AppColors.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
+                  <NetworkIcons_1.FilterIcon size={11}color={c.size>0||d.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayText}/>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:c.size>0||d.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayText}}>
                     More Filters
                   </react_native_1.Text>
-                  {(c.size>0||p.size>0)&&<react_native_1.View style={{backgroundColor:AppColors_1.AppColors.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
+                  {(c.size>0||d.size>0)&&<react_native_1.View style={{backgroundColor:AppColors_1.AppColors.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
                       <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,color:AppColors_1.AppColors.white}}>
-                        {c.size+p.size}
+                        {c.size+d.size}
                       </react_native_1.Text>
                     </react_native_1.View>}
                 </react_native_1.View>
@@ -132,11 +134,11 @@
             </react_native_1.View>
 
             
-            {(z!=="all"||t.trim().length>0||c.size>0||p.size>0||b.length!==g.length)&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:12,marginBottom:8,paddingHorizontal:10,paddingVertical:5.5,backgroundColor:`${AppColors_1.AppColors.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}25`}}>
+            {(A!=="all"||o.trim().length>0||c.size>0||d.size>0||w.length!==h.length)&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:12,marginBottom:8,paddingHorizontal:10,paddingVertical:5.5,backgroundColor:`${AppColors_1.AppColors.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}25`}}>
                 <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.purple}}>
-                  Showing {b.length} of {g.length} requests
+                  Showing {w.length} of {h.length} requests
                 </react_native_1.Text>
-                <TouchableScale_1.default onPress={()=>{l(""),v("all"),y(new Set),S(new Set)}}>
+                <TouchableScale_1.default onPress={()=>{l(""),V("all"),C(new Set),_(new Set)}}>
                   <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.errorColor}}>
                     Clear All Filters
                   </react_native_1.Text>
@@ -144,8 +146,8 @@
               </react_native_1.View>}
           </react_native_1.View>
 
-        <react_native_1.FlatList ref={W}data={o}keyExtractor={e=>e?.id?.toString()}renderItem={K}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={react_native_1.Platform.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<EmptyState_1.default isSearch={t.length>0||c.size>0||p.size>0||z!=="all"}searchQuery={t}customTitle={t.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{l(""),y(new Set),S(new Set),v("all"),n("all")}}/>}ListFooterComponent={o.length>0?<EndOfListFooter_1.default count={b.length}label="requests"/>:null}contentContainerStyle={[styles_1.default.listContent,b.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+        <react_native_1.FlatList ref={N}data={a}keyExtractor={e=>e?.id?.toString()}renderItem={W}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={react_native_1.Platform.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<EmptyState_1.default isSearch={o.length>0||c.size>0||d.size>0||A!=="all"}searchQuery={o}customTitle={o.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{l(""),C(new Set),_(new Set),V("all"),i("all")}}/>}ListFooterComponent={a.length>0?<EndOfListFooter_1.default count={w.length}totalCount={w.length}label="requests"/>:null}contentContainerStyle={[styles_1.default.listContent,w.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <NetworkFilterModal_1.default visible={$}onClose={()=>F(!1)}filters={j}onApply={G}searchQuery={t}/>
+      <NetworkFilterModal_1.default visible={$}onClose={()=>x(!1)}filters={E}onApply={H}searchQuery={o}/>
     </react_native_1.View>});exports.default=NetworkTab;

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

@@ -7,7 +7,7 @@
           <react_native_1.View style={styles.headerIconWrapper}>
             <react_native_1.Animated.View style={[styles.iconGlow,{transform:[{scale:o}]}]}/>
             <react_native_1.View style={styles.iconCircle}>
-              <NetworkIcons_1.StarIcon size={26}color="#F59E0B"/>
+              <NetworkIcons_1.StarIcon size={26}color={AppColors_1.AppColors.amber500}/>
             </react_native_1.View>
           </react_native_1.View>
 
@@ -36,7 +36,7 @@
             </react_native_1.View>
             <react_native_1.View style={styles.metricDot}/>
             <react_native_1.View style={styles.metricItem}>
-              <NetworkIcons_1.NpmIcon size={13}color="#CB3837"/>
+              <NetworkIcons_1.NpmIcon size={13}color={AppColors_1.AppColors.npmRed}/>
               <react_native_1.Text style={styles.metricText}>npm Package</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={styles.metricDot}/>
@@ -75,4 +75,4 @@
           </react_native_1.View>
         </react_native_1.Animated.View>
       </react_native_1.Animated.View>
-    </react_native_1.Modal>:null};exports.NpmStarPrompt=NpmStarPrompt;const styles=react_native_1.StyleSheet.create({backdrop:{...react_native_1.StyleSheet.absoluteFillObject,backgroundColor:"rgba(15, 23, 42, 0.65)",justifyContent:"center",alignItems:"center",paddingHorizontal:20,zIndex:99999},cardContainer:{width:"100%",maxWidth:380,backgroundColor:AppColors_1.AppColors.white,borderRadius:22,padding:22,alignItems:"center",shadowColor:AppColors_1.AppColors.black,shadowOffset:{width:0,height:8},shadowOpacity:.22,shadowRadius:20,elevation:12,borderWidth:1.5,borderColor:`${AppColors_1.AppColors.purple}25`},headerIconWrapper:{position:"relative",alignItems:"center",justifyContent:"center",marginBottom:12},iconGlow:{position:"absolute",width:68,height:68,borderRadius:34,backgroundColor:"#F59E0B22"},iconCircle:{width:54,height:54,borderRadius:27,backgroundColor:"#FEF3C7",borderWidth:2,borderColor:"#FDE68A",alignItems:"center",justifyContent:"center"},closeBtn:{position:"absolute",top:14,right:14,width:28,height:28,borderRadius:14,backgroundColor:AppColors_1.AppColors.grayBackground,alignItems:"center",justifyContent:"center"},pillBadge:{backgroundColor:`${AppColors_1.AppColors.purple}14`,paddingHorizontal:9,paddingVertical:3,borderRadius:10,marginBottom:8},pillBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.purple,letterSpacing:.6},title:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:18,lineHeight:23,color:AppColors_1.AppColors.primaryBlack,textAlign:"center",marginBottom:6},description:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12.5,lineHeight:18,color:AppColors_1.AppColors.grayText,textAlign:"center",marginBottom:14,paddingHorizontal:8},metricsBar:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:AppColors_1.AppColors.grayBackground,paddingVertical:7,paddingHorizontal:14,borderRadius:10,marginBottom:16,gap:8},metricItem:{flexDirection:"row",alignItems:"center",gap:4},metricText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.primaryBlack},metricDot:{width:3.5,height:3.5,borderRadius:2,backgroundColor:AppColors_1.AppColors.dividerColor},primaryButton:{width:"100%",backgroundColor:AppColors_1.AppColors.purple,borderRadius:12,paddingVertical:12,alignItems:"center",justifyContent:"center",marginBottom:8,shadowColor:AppColors_1.AppColors.purple,shadowOffset:{width:0,height:4},shadowOpacity:.3,shadowRadius:8,elevation:4},primaryButtonContent:{flexDirection:"row",alignItems:"center",gap:7},primaryButtonText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:14,color:AppColors_1.AppColors.white},secondaryButton:{width:"100%",backgroundColor:`${AppColors_1.AppColors.purple}10`,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}30`,borderRadius:12,paddingVertical:10,alignItems:"center",justifyContent:"center",marginBottom:14},secondaryButtonContent:{flexDirection:"row",alignItems:"center",gap:6},secondaryButtonText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.purple},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:12},footerLinkText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11.5,color:AppColors_1.AppColors.grayText},footerSeparator:{width:1,height:12,backgroundColor:AppColors_1.AppColors.dividerColor},footerLinkTextMuted:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11.5,color:AppColors_1.AppColors.grayTextWeak}});exports.default=exports.NpmStarPrompt;
+    </react_native_1.Modal>:null};exports.NpmStarPrompt=NpmStarPrompt;const styles=react_native_1.StyleSheet.create({backdrop:{...react_native_1.StyleSheet.absoluteFillObject,backgroundColor:"rgba(15, 23, 42, 0.65)",justifyContent:"center",alignItems:"center",paddingHorizontal:20,zIndex:99999},cardContainer:{width:"100%",maxWidth:380,backgroundColor:AppColors_1.AppColors.white,borderRadius:22,padding:22,alignItems:"center",shadowColor:AppColors_1.AppColors.black,shadowOffset:{width:0,height:8},shadowOpacity:.22,shadowRadius:20,elevation:12,borderWidth:1.5,borderColor:`${AppColors_1.AppColors.purple}25`},headerIconWrapper:{position:"relative",alignItems:"center",justifyContent:"center",marginBottom:12},iconGlow:{position:"absolute",width:68,height:68,borderRadius:34,backgroundColor:`${AppColors_1.AppColors.amber500}22`},iconCircle:{width:54,height:54,borderRadius:27,backgroundColor:AppColors_1.AppColors.amber100,borderWidth:2,borderColor:AppColors_1.AppColors.amber200,alignItems:"center",justifyContent:"center"},closeBtn:{position:"absolute",top:14,right:14,width:28,height:28,borderRadius:14,backgroundColor:AppColors_1.AppColors.grayBackground,alignItems:"center",justifyContent:"center"},pillBadge:{backgroundColor:`${AppColors_1.AppColors.purple}14`,paddingHorizontal:9,paddingVertical:3,borderRadius:10,marginBottom:8},pillBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.purple,letterSpacing:.6},title:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:18,lineHeight:23,color:AppColors_1.AppColors.primaryBlack,textAlign:"center",marginBottom:6},description:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12.5,lineHeight:18,color:AppColors_1.AppColors.grayText,textAlign:"center",marginBottom:14,paddingHorizontal:8},metricsBar:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:AppColors_1.AppColors.grayBackground,paddingVertical:7,paddingHorizontal:14,borderRadius:10,marginBottom:16,gap:8},metricItem:{flexDirection:"row",alignItems:"center",gap:4},metricText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.primaryBlack},metricDot:{width:3.5,height:3.5,borderRadius:2,backgroundColor:AppColors_1.AppColors.dividerColor},primaryButton:{width:"100%",backgroundColor:AppColors_1.AppColors.purple,borderRadius:12,paddingVertical:12,alignItems:"center",justifyContent:"center",marginBottom:8,shadowColor:AppColors_1.AppColors.purple,shadowOffset:{width:0,height:4},shadowOpacity:.3,shadowRadius:8,elevation:4},primaryButtonContent:{flexDirection:"row",alignItems:"center",gap:7},primaryButtonText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:14,color:AppColors_1.AppColors.white},secondaryButton:{width:"100%",backgroundColor:`${AppColors_1.AppColors.purple}10`,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}30`,borderRadius:12,paddingVertical:10,alignItems:"center",justifyContent:"center",marginBottom:14},secondaryButtonContent:{flexDirection:"row",alignItems:"center",gap:6},secondaryButtonText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.purple},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:12},footerLinkText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11.5,color:AppColors_1.AppColors.grayText},footerSeparator:{width:1,height:12,backgroundColor:AppColors_1.AppColors.dividerColor},footerLinkTextMuted:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11.5,color:AppColors_1.AppColors.grayTextWeak}});exports.default=exports.NpmStarPrompt;

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

@@ -1,56 +1,55 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,e,i,o){o===void 0&&(o=i);var n=Object.getOwnPropertyDescriptor(e,i);(!n||("get"in n?!e.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return e[i]}}),Object.defineProperty(t,o,n)}):(function(t,e,i,o){o===void 0&&(o=i),t[o]=e[i]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),__importStar=this&&this.__importStar||(function(){var t=function(e){return t=Object.getOwnPropertyNames||function(i){var o=[];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(o[o.length]=n);return o},t(e)};return function(e){if(e&&e.__esModule)return e;var i={};if(e!=null)for(var o=t(e),n=0;n<o.length;n++)o[n]!=="default"&&__createBinding(i,e,o[n]);return __setModuleDefault(i,e),i}})();Object.defineProperty(exports,"__esModule",{value:!0}),exports.NpmUpdateToast=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),InspectorContext_1=require("./InspectorContext"),constants_1=require("../../constants"),NetworkIcons_1=require("../NetworkIcons"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),AppFonts_1=require("../../styles/AppFonts"),CloseSvg=({size:t=13,color:e="#94A3B8"})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,e,o,r){r===void 0&&(r=o);var i=Object.getOwnPropertyDescriptor(e,o);(!i||("get"in i?!e.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return e[o]}}),Object.defineProperty(t,r,i)}):(function(t,e,o,r){r===void 0&&(r=o),t[r]=e[o]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),__importStar=this&&this.__importStar||(function(){var t=function(e){return t=Object.getOwnPropertyNames||function(o){var r=[];for(var i in o)Object.prototype.hasOwnProperty.call(o,i)&&(r[r.length]=i);return r},t(e)};return function(e){if(e&&e.__esModule)return e;var o={};if(e!=null)for(var r=t(e),i=0;i<r.length;i++)r[i]!=="default"&&__createBinding(o,e,r[i]);return __setModuleDefault(o,e),o}})();Object.defineProperty(exports,"__esModule",{value:!0}),exports.NpmUpdateToast=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),InspectorContext_1=require("./InspectorContext"),constants_1=require("../../constants"),NetworkIcons_1=require("../NetworkIcons"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),i18n_1=require("../../i18n"),CloseSvg=({size:t=13,color:e=AppColors_1.AppColors.slate400})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
     <react_native_svg_1.Path d="M18 6L6 18M6 6l12 12"stroke={e}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
-  </react_native_svg_1.default>,CopySvg=({size:t=11,color:e="#94A3B8"})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
+  </react_native_svg_1.default>,CopySvg=({size:t=11,color:e=AppColors_1.AppColors.slate400})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
     <react_native_svg_1.Path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <react_native_svg_1.Path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-  </react_native_svg_1.default>,CheckSvg=({size:t=11,color:e="#10B981"})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
+  </react_native_svg_1.default>,CheckSvg=({size:t=11,color:e=AppColors_1.AppColors.greenColor})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
     <react_native_svg_1.Path d="M20 6L9 17l-5-5"stroke={e}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
-  </react_native_svg_1.default>,ExternalLinkSvg=({size:t=11,color:e="#FFFFFF"})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
+  </react_native_svg_1.default>,ExternalLinkSvg=({size:t=11,color:e=AppColors_1.AppColors.white})=><react_native_svg_1.default width={t}height={t}viewBox="0 0 24 24"fill="none">
     <react_native_svg_1.Path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <react_native_svg_1.Path d="M15 3h6v6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <react_native_svg_1.Path d="M10 14L21 3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-  </react_native_svg_1.default>,TOAST_TIMEOUT_MS=7e3,NpmUpdateToast=()=>{const{updateAvailable:t,latestNpmVersion:e,showUpdateToast:i}=(0,InspectorContext_1.useInspector)(),[o,n]=(0,react_1.useState)(!1),[h,u]=(0,react_1.useState)(!1),[r,p]=(0,react_1.useState)(!1),a=(0,react_1.useRef)(new react_native_1.Animated.Value(60)).current,s=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,l=(0,react_1.useRef)(new react_native_1.Animated.Value(1)).current,c=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>(i&&t&&e&&!o&&(u(!0),react_native_1.Animated.parallel([react_native_1.Animated.spring(a,{toValue:0,friction:8,tension:40,useNativeDriver:!0}),react_native_1.Animated.timing(s,{toValue:1,duration:250,useNativeDriver:!0})]).start(),l.setValue(1),react_native_1.Animated.timing(l,{toValue:0,duration:TOAST_TIMEOUT_MS,useNativeDriver:!1}).start(),c.current=setTimeout(()=>{d()},TOAST_TIMEOUT_MS)),()=>{c.current&&clearTimeout(c.current)}),[i,t,e,o]);const d=()=>{react_native_1.Animated.parallel([react_native_1.Animated.timing(s,{toValue:0,duration:180,useNativeDriver:!0}),react_native_1.Animated.timing(a,{toValue:60,duration:180,useNativeDriver:!0})]).start(()=>{u(!1),n(!0)})},f=()=>{(0,helpers_1.copyToClipboard)("npm install react-native-inapp-inspector@latest","Install Command"),p(!0),(0,toast_1.showToast)("Copied npm install command!"),setTimeout(()=>{p(!1)},2e3)},_=()=>{react_native_1.Linking.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{}),d()};if(typeof __DEV__>"u"||!__DEV__||!i||!h||!t||!e)return null;const v=l.interpolate({inputRange:[0,1],outputRange:["0%","100%"]});return<react_native_1.Animated.View style={[styles.container,{opacity:s,transform:[{translateY:a}]}]}>
+  </react_native_svg_1.default>,TOAST_TIMEOUT_MS=7e3,NpmUpdateToast=()=>{const{t}=(0,i18n_1.useTranslation)(),{updateAvailable:e,latestNpmVersion:o,showUpdateToast:r}=(0,InspectorContext_1.useInspector)(),[i,h]=(0,react_1.useState)(!1),[f,d]=(0,react_1.useState)(!1),[n,u]=(0,react_1.useState)(!1),a=(0,react_1.useRef)(new react_native_1.Animated.Value(60)).current,s=(0,react_1.useRef)(new react_native_1.Animated.Value(0)).current,l=(0,react_1.useRef)(new react_native_1.Animated.Value(1)).current,c=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>(r&&e&&o&&!i&&(d(!0),react_native_1.Animated.parallel([react_native_1.Animated.spring(a,{toValue:0,friction:8,tension:40,useNativeDriver:!0}),react_native_1.Animated.timing(s,{toValue:1,duration:250,useNativeDriver:!0})]).start(),l.setValue(1),react_native_1.Animated.timing(l,{toValue:0,duration:TOAST_TIMEOUT_MS,useNativeDriver:!1}).start(),c.current=setTimeout(()=>{p()},TOAST_TIMEOUT_MS)),()=>{c.current&&clearTimeout(c.current)}),[r,e,o,i]);const p=()=>{react_native_1.Animated.parallel([react_native_1.Animated.timing(s,{toValue:0,duration:180,useNativeDriver:!0}),react_native_1.Animated.timing(a,{toValue:60,duration:180,useNativeDriver:!0})]).start(()=>{d(!1),h(!0)})},v=()=>{(0,helpers_1.copyToClipboard)("npm install react-native-inapp-inspector@latest","Install Command"),u(!0),(0,toast_1.showToast)("Copied npm install command!"),setTimeout(()=>{u(!1)},2e3)},g=()=>{react_native_1.Linking.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{}),p()};if(typeof __DEV__>"u"||!__DEV__||!r||!f||!e||!o)return null;const _=l.interpolate({inputRange:[0,1],outputRange:["0%","100%"]});return<react_native_1.Animated.View style={[styles.container,{opacity:s,transform:[{translateY:a}]}]}>
       <react_native_1.View style={styles.contentRow}>
         
         <react_native_1.View style={styles.npmIconContainer}>
-          <NetworkIcons_1.NpmIcon size={15}color="#CB3837"/>
+          <NetworkIcons_1.NpmIcon size={15}color={AppColors_1.AppColors.npmRed}/>
         </react_native_1.View>
 
-        
         <react_native_1.View style={styles.textContainer}>
           <react_native_1.View style={styles.titleRow}>
-            <react_native_1.Text style={styles.titleText}>Update Available</react_native_1.Text>
+            <react_native_1.Text style={styles.titleText}>{t("header.newVersionAvailable","Update Available")}</react_native_1.Text>
             <react_native_1.View style={styles.versionPill}>
-              <react_native_1.Text style={styles.versionPillText}>v{e}</react_native_1.Text>
+              <react_native_1.Text style={styles.versionPillText}>v{o}</react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
-          <react_native_1.Text style={styles.subtitleText}numberOfLines={1}>
-            Installed: v{constants_1.LIB_VERSION} • New version is ready
+          <react_native_1.Text style={styles.subtitleText}>
+            {t("header.updateAvailable",{latestVersion:o,currentVersion:constants_1.LIB_VERSION,defaultValue:`react-native-inapp-inspector v${o} is available on NPM.`})}
           </react_native_1.Text>
         </react_native_1.View>
 
         
-        <react_native_1.TouchableOpacity style={styles.copyButton}onPress={f}hitSlop={6}activeOpacity={.75}>
-          {r?<CheckSvg size={11}color="#10B981"/>:<CopySvg size={11}color="#94A3B8"/>}
-          <react_native_1.Text style={[styles.copyButtonText,r&&{color:"#10B981"}]}>
-            {r?"Copied":"Copy"}
+        <react_native_1.TouchableOpacity style={styles.copyButton}onPress={v}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}>
+          {n?<CheckSvg size={11}color={AppColors_1.AppColors.greenColor}/>:<CopySvg size={11}color={AppColors_1.AppColors.slate400}/>}
+          <react_native_1.Text style={[styles.copyButtonText,n&&{color:AppColors_1.AppColors.greenColor}]}>
+            {n?t("common.copied","Copied"):t("header.copyCommand","Copy")}
           </react_native_1.Text>
         </react_native_1.TouchableOpacity>
 
         
-        <react_native_1.TouchableOpacity style={styles.actionButton}onPress={_}activeOpacity={.8}>
-          <react_native_1.Text style={styles.actionButtonText}>View</react_native_1.Text>
-          <ExternalLinkSvg size={10}color="#FFFFFF"/>
+        <react_native_1.TouchableOpacity style={styles.actionButton}onPress={g}activeOpacity={.8}hitSlop={{top:8,bottom:8,left:4,right:4}}>
+          <react_native_1.Text style={styles.actionButtonText}>{t("header.viewNpm","View")}</react_native_1.Text>
+          <ExternalLinkSvg size={10}color={AppColors_1.AppColors.white}/>
         </react_native_1.TouchableOpacity>
 
         
-        <react_native_1.TouchableOpacity style={styles.closeButton}onPress={d}hitSlop={8}activeOpacity={.7}>
-          <CloseSvg size={12}color="#94A3B8"/>
+        <react_native_1.TouchableOpacity style={styles.closeButton}onPress={p}activeOpacity={.7}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+          <CloseSvg size={12}color={AppColors_1.AppColors.slate400}/>
         </react_native_1.TouchableOpacity>
       </react_native_1.View>
 
       
       <react_native_1.View style={styles.progressBarTrack}>
-        <react_native_1.Animated.View style={[styles.progressBarFill,{width:v}]}/>
+        <react_native_1.Animated.View style={[styles.progressBarFill,{width:_}]}/>
       </react_native_1.View>
-    </react_native_1.Animated.View>};exports.NpmUpdateToast=NpmUpdateToast;const fontStack={fontFamily:AppFonts_1.AppFonts.interRegular},styles=react_native_1.StyleSheet.create({container:{position:"absolute",bottom:24,left:14,right:14,backgroundColor:"#0F172A",borderRadius:16,borderWidth:1,borderColor:"#334155",shadowColor:"#000000",shadowOffset:{width:0,height:12},shadowOpacity:.4,shadowRadius:24,elevation:24,overflow:"hidden",zIndex:99999},contentRow:{flexDirection:"row",alignItems:"center",paddingVertical:11,paddingHorizontal:12,gap:8},npmIconContainer:{width:32,height:32,borderRadius:9,backgroundColor:"#FFFFFF",justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:"#E2E8F0",flexShrink:0,shadowColor:"#000000",shadowOffset:{width:0,height:1},shadowOpacity:.15,shadowRadius:2,elevation:2},textContainer:{flex:1,minWidth:0},titleRow:{flexDirection:"row",alignItems:"center",gap:5},titleText:{fontSize:12.5,fontWeight:"700",color:"#F8FAFC",letterSpacing:-.2,...fontStack},versionPill:{backgroundColor:"#7C3AED33",paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5,borderWidth:1,borderColor:"#8B5CF680"},versionPillText:{fontSize:10,fontWeight:"700",color:"#C4B5FD",...fontStack},subtitleText:{fontSize:10.5,color:"#94A3B8",marginTop:1,...fontStack},copyButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:"#1E293B",paddingVertical:5.5,paddingHorizontal:8,borderRadius:7,borderWidth:1,borderColor:"#334155",flexShrink:0},copyButtonText:{fontSize:10.5,fontWeight:"600",color:"#94A3B8",...fontStack},actionButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:"#7C3AED",paddingVertical:5.5,paddingHorizontal:9,borderRadius:7,flexShrink:0,shadowColor:"#7C3AED",shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:4,elevation:3},actionButtonText:{fontSize:11,fontWeight:"700",color:"#FFFFFF",...fontStack},closeButton:{width:22,height:22,borderRadius:11,backgroundColor:"#1E293B",justifyContent:"center",alignItems:"center",flexShrink:0},progressBarTrack:{height:2.5,width:"100%",backgroundColor:"#1E293B"},progressBarFill:{height:"100%",backgroundColor:"#8B5CF6"}});exports.default=exports.NpmUpdateToast;
+    </react_native_1.Animated.View>};exports.NpmUpdateToast=NpmUpdateToast;const fontStack={fontFamily:AppFonts_1.AppFonts.interRegular},styles=react_native_1.StyleSheet.create({container:{position:"absolute",bottom:24,left:14,right:14,backgroundColor:AppColors_1.AppColors.slate900,borderRadius:16,borderWidth:1,borderColor:AppColors_1.AppColors.slate700,shadowColor:AppColors_1.AppColors.black,shadowOffset:{width:0,height:12},shadowOpacity:.4,shadowRadius:24,elevation:24,overflow:"hidden",zIndex:99999},contentRow:{flexDirection:"row",alignItems:"center",paddingVertical:11,paddingHorizontal:12,gap:8},npmIconContainer:{width:32,height:32,borderRadius:9,backgroundColor:AppColors_1.AppColors.white,justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:AppColors_1.AppColors.slate200,flexShrink:0,shadowColor:AppColors_1.AppColors.black,shadowOffset:{width:0,height:1},shadowOpacity:.15,shadowRadius:2,elevation:2},textContainer:{flex:1,minWidth:0},titleRow:{flexDirection:"row",alignItems:"center",gap:5},titleText:{fontSize:12.5,fontWeight:"700",color:AppColors_1.AppColors.slate50,letterSpacing:-.2,...fontStack},versionPill:{backgroundColor:`${AppColors_1.AppColors.offerPurple}33`,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5,borderWidth:1,borderColor:`${AppColors_1.AppColors.violet500}80`},versionPillText:{fontSize:10,fontWeight:"700",color:AppColors_1.AppColors.purpleLightMuted,...fontStack},subtitleText:{fontSize:10.5,color:AppColors_1.AppColors.slate400,marginTop:1,...fontStack},copyButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:AppColors_1.AppColors.slate800,paddingVertical:5.5,paddingHorizontal:8,borderRadius:7,borderWidth:1,borderColor:AppColors_1.AppColors.slate700,flexShrink:0},copyButtonText:{fontSize:10.5,fontWeight:"600",color:AppColors_1.AppColors.slate400,...fontStack},actionButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:AppColors_1.AppColors.offerPurple,paddingVertical:5.5,paddingHorizontal:9,borderRadius:7,flexShrink:0,shadowColor:AppColors_1.AppColors.offerPurple,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:4,elevation:3},actionButtonText:{fontSize:11,fontWeight:"700",color:AppColors_1.AppColors.white,...fontStack},closeButton:{width:22,height:22,borderRadius:11,backgroundColor:AppColors_1.AppColors.slate800,justifyContent:"center",alignItems:"center",flexShrink:0},progressBarTrack:{height:2.5,width:"100%",backgroundColor:AppColors_1.AppColors.slate800},progressBarFill:{height:"100%",backgroundColor:AppColors_1.AppColors.violet500}});exports.default=exports.NpmUpdateToast;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PushCardProps } from '../../types';
+declare const PushCard: React.NamedExoticComponent<PushCardProps>;
+export default PushCard;

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

@@ -0,0 +1,89 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(r,e,l,t){t===void 0&&(t=l);var o=Object.getOwnPropertyDescriptor(e,l);(!o||("get"in o?!e.__esModule:o.writable||o.configurable))&&(o={enumerable:!0,get:function(){return e[l]}}),Object.defineProperty(r,t,o)}):(function(r,e,l,t){t===void 0&&(t=l),r[t]=e[l]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(r,e){Object.defineProperty(r,"default",{enumerable:!0,value:e})}):function(r,e){r.default=e}),__importStar=this&&this.__importStar||(function(){var r=function(e){return r=Object.getOwnPropertyNames||function(l){var t=[];for(var o in l)Object.prototype.hasOwnProperty.call(l,o)&&(t[t.length]=o);return t},r(e)};return function(e){if(e&&e.__esModule)return e;var l={};if(e!=null)for(var t=r(e),o=0;o<t.length;o++)t[o]!=="default"&&__createBinding(l,e,t[o]);return __setModuleDefault(l,e),l}})(),__importDefault=this&&this.__importDefault||function(r){return r&&r.__esModule?r:{default:r}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),helpers_1=require("../../helpers"),NetworkIcons_1=require("../NetworkIcons"),HighlightText_1=__importDefault(require("../HighlightText")),TouchableScale_1=__importDefault(require("../TouchableScale")),getSourceColors=r=>{const e=(r||"").toLowerCase();return e.includes("salesforce")||e==="sfmc"?{badgeColor:AppColors_1.AppColors.sky600,border:AppColors_1.AppColors.sky600,cardBg:`${AppColors_1.AppColors.sky600}04`,label:"SALESFORCE"}:e.includes("fcm")||e.includes("firebase")?{badgeColor:AppColors_1.AppColors.firebaseOrange,border:AppColors_1.AppColors.firebaseOrange,cardBg:`${AppColors_1.AppColors.firebaseOrange}04`,label:"FCM"}:e.includes("apns")||e.includes("apple")?{badgeColor:AppColors_1.AppColors.slate700,border:AppColors_1.AppColors.slate700,cardBg:`${AppColors_1.AppColors.slate700}04`,label:"APNS"}:e.includes("expo")?{badgeColor:AppColors_1.AppColors.brandPurple,border:AppColors_1.AppColors.brandPurple,cardBg:`${AppColors_1.AppColors.brandPurple}04`,label:"EXPO"}:e.includes("notifee")?{badgeColor:AppColors_1.AppColors.pink500,border:AppColors_1.AppColors.pink500,cardBg:`${AppColors_1.AppColors.pink500}04`,label:"NOTIFEE"}:e.includes("onesignal")?{badgeColor:AppColors_1.AppColors.errorColor,border:AppColors_1.AppColors.errorColor,cardBg:`${AppColors_1.AppColors.errorColor}04`,label:"ONESIGNAL"}:{badgeColor:AppColors_1.AppColors.purple,border:AppColors_1.AppColors.purple,cardBg:`${AppColors_1.AppColors.purple}04`,label:(r||"PUSH").toUpperCase()}},getAppStatePill=(r,e)=>{if(e==="opened")return{label:"OPENED",text:AppColors_1.AppColors.brandPurple,bg:`${AppColors_1.AppColors.brandPurple}14`,border:`${AppColors_1.AppColors.brandPurple}30`,Icon:NetworkIcons_1.ExternalLinkIcon};const l=(r||"").toLowerCase();return l==="foreground"?{label:"FOREGROUND",text:AppColors_1.AppColors.greenColor,bg:`${AppColors_1.AppColors.greenColor}14`,border:`${AppColors_1.AppColors.greenColor}30`,Icon:NetworkIcons_1.SunIcon}:l==="background"?{label:"BACKGROUND",text:AppColors_1.AppColors.amber600,bg:`${AppColors_1.AppColors.amber600}14`,border:`${AppColors_1.AppColors.amber600}30`,Icon:NetworkIcons_1.MoonIcon}:{label:(r||"RECEIVED").toUpperCase(),text:AppColors_1.AppColors.grayTextWeak,bg:`${AppColors_1.AppColors.grayTextWeak}14`,border:`${AppColors_1.AppColors.grayTextWeak}30`,Icon:NetworkIcons_1.CloudPushIcon}},PushCard=react_1.default.memo(function({item:e,onPress:l,searchStr:t=""}){const o=(0,react_1.useMemo)(()=>getSourceColors(e.source),[e.source]),a=(0,react_1.useMemo)(()=>getAppStatePill(e.appState,e.action),[e.appState,e.action]),i=(0,react_1.useMemo)(()=>e.data?Object.keys(e.data).length:0,[e.data]),n=(0,react_1.useMemo)(()=>!!(e.data?.deepLink||e.data?.openDirectUrl||e.data?._od||e.customDomainAttributes?.openDirectUrl),[e.data,e.customDomainAttributes]),C=a.Icon;return<TouchableScale_1.default onPress={l}style={[styles.card,{borderLeftWidth:3.5,borderLeftColor:o.border,backgroundColor:o.cardBg}]}accessibilityRole="button"accessibilityLabel={`Push Notification: ${e.title||"Notification"}`}>
+      <react_native_1.View style={styles.cardBody}>
+        
+        <react_native_1.View style={styles.cardHeaderRow}>
+          <react_native_1.View style={styles.cardHeaderLeft}>
+            <react_native_1.Text style={styles.serialNumber}>
+              #{e.id?e.id.replace(/^push_/,"").slice(-4):"1"}
+            </react_native_1.Text>
+
+            
+            <react_native_1.View style={[styles.methodBadge,{backgroundColor:o.badgeColor}]}>
+              <react_native_1.Text style={styles.methodBadgeText}>{o.label}</react_native_1.Text>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={[styles.chip,{backgroundColor:`${o.badgeColor}12`,borderColor:`${o.badgeColor}2E`}]}>
+              <react_native_1.Text style={[styles.chipText,{color:o.badgeColor}]}numberOfLines={1}>
+                push.{(e.source||"remote").toLowerCase()}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            
+            {i>0&&<react_native_1.View style={[styles.chip,{backgroundColor:`${AppColors_1.AppColors.teal600}14`,borderColor:`${AppColors_1.AppColors.teal600}33`}]}>
+                <react_native_1.Text style={[styles.chipText,{color:AppColors_1.AppColors.teal600}]}>
+                  Payload{`{${i}}`}
+                </react_native_1.Text>
+              </react_native_1.View>}
+
+            
+            {n&&<react_native_1.View style={[styles.chip,{backgroundColor:`${AppColors_1.AppColors.brandPurple}14`,borderColor:`${AppColors_1.AppColors.brandPurple}33`}]}>
+                <react_native_1.Text style={[styles.chipText,{color:AppColors_1.AppColors.brandPurple}]}>
+                  🔗 Link
+                </react_native_1.Text>
+              </react_native_1.View>}
+          </react_native_1.View>
+
+          
+          <react_native_1.View style={styles.cardHeaderRight}>
+            <react_native_1.View style={[styles.statusPill,{backgroundColor:a.bg,borderColor:a.border}]}>
+              <C color={a.text}size={9.5}/>
+              <react_native_1.Text style={[styles.statusPillText,{color:a.text}]}>
+                {a.label}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <NetworkIcons_1.ForwardChevronIcon color={AppColors_1.AppColors.grayTextWeak}size={13}/>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={styles.messageBox}>
+          <HighlightText_1.default text={e.title||"(No Title)"}searchWords={t?[t]:[]}numberOfLines={1}style={styles.messageTitle}highlightStyle={styles.highlight}/>
+          <HighlightText_1.default text={e.body||"(No message body)"}searchWords={t?[t]:[]}numberOfLines={2}style={styles.messageBody}highlightStyle={styles.highlight}/>
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={styles.cardFooterRow}>
+          <react_native_1.View style={styles.footerLeft}>
+            <react_native_1.View style={styles.cardDateRow}>
+              <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.slate400}size={10}/>
+              <react_native_1.Text style={styles.cardDateText}numberOfLines={1}>
+                {(0,helpers_1.formatTime)(e.timestamp)}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            {e.channelId?<react_native_1.View style={styles.callerChip}>
+                <NetworkIcons_1.BellIcon color={AppColors_1.AppColors.skySoftText}size={8.5}/>
+                <react_native_1.Text style={styles.callerChipText}numberOfLines={1}ellipsizeMode="middle">
+                  {e.channelId}
+                </react_native_1.Text>
+              </react_native_1.View>:null}
+
+            {e.customDomainAttributes?.journeyName?<react_native_1.View style={[styles.callerChip,{backgroundColor:`${AppColors_1.AppColors.brandPurple}14`,borderColor:`${AppColors_1.AppColors.brandPurple}30`}]}>
+                <react_native_1.Text style={[styles.callerChipText,{color:AppColors_1.AppColors.brandPurple}]}numberOfLines={1}ellipsizeMode="middle">
+                  {e.customDomainAttributes.journeyName}
+                </react_native_1.Text>
+              </react_native_1.View>:null}
+          </react_native_1.View>
+
+          <react_native_1.View style={styles.footerRight}>
+            {i>0&&<react_native_1.View style={styles.metaStatChip}>
+                <NetworkIcons_1.KeyIcon color={AppColors_1.AppColors.purple}size={8.5}/>
+                <react_native_1.Text style={styles.metaStatText}>
+                  {i} {i===1?"key":"keys"}
+                </react_native_1.Text>
+              </react_native_1.View>}
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+    </TouchableScale_1.default>}),styles=react_native_1.StyleSheet.create({card:{height:140,alignSelf:"stretch",borderRadius:10,overflow:"hidden",borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,shadowColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.grayTextWeak,fontSize:10},methodBadge:{paddingHorizontal:7,paddingVertical:2.5,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,lineHeight:12,letterSpacing:.5,color:AppColors_1.AppColors.white},chip:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},chipText:{fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.interBold,fontSize:10,lineHeight:13},messageBox:{backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:7,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,paddingHorizontal:10,paddingVertical:6,height:68,minHeight:68,maxHeight:68,justifyContent:"center",gap:2,overflow:"hidden"},messageTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:AppColors_1.AppColors.primaryBlack,lineHeight:16},messageBody:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11,color:AppColors_1.AppColors.grayText,lineHeight:15},highlight:{backgroundColor:AppColors_1.AppColors.yellowHighlight,color:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interRegular,fontSize:10,lineHeight:13,color:AppColors_1.AppColors.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:AppColors_1.AppColors.skySoftBg,borderColor:AppColors_1.AppColors.skySoftBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,flexShrink:1,minWidth:0},callerChipText:{color:AppColors_1.AppColors.skySoftText,fontSize:9,lineHeight:12,fontFamily:AppFonts_1.AppFonts.interBold},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${AppColors_1.AppColors.purple}14`,borderColor:`${AppColors_1.AppColors.purple}2B`,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},metaStatText:{color:AppColors_1.AppColors.purple,fontSize:9,lineHeight:12,fontFamily:AppFonts_1.AppFonts.interBold}});PushCard.displayName="PushCard",exports.default=PushCard;

package/dist/commonjs/components/Inspector/PushDetail.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PushDetailProps } from '../../types';
+declare const PushDetail: React.NamedExoticComponent<PushDetailProps>;
+export default PushDetail;