react-native-inapp-inspector 2.3.25 → 2.4.0

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

@@ -1,78 +1,80 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(l,t,a,s){s===void 0&&(s=a);var n=Object.getOwnPropertyDescriptor(t,a);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(l,s,n)}):(function(l,t,a,s){s===void 0&&(s=a),l[s]=t[a]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(l,t){Object.defineProperty(l,"default",{enumerable:!0,value:t})}):function(l,t){l.default=t}),__importStar=this&&this.__importStar||(function(){var l=function(t){return l=Object.getOwnPropertyNames||function(a){var s=[];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(s[s.length]=n);return s},l(t)};return function(t){if(t&&t.__esModule)return t;var a={};if(t!=null)for(var s=l(t),n=0;n<s.length;n++)s[n]!=="default"&&__createBinding(a,t,s[n]);return __setModuleDefault(a,t),a}})(),__importDefault=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};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:l,search:t,setSearch:a,searchScope:s,setSearchScope:n,isRegexSearch:Y,setIsRegexSearch:Z,isCaseSensitive:ee,setIsCaseSensitive:te,quickFilter:v,setQuickFilter:x,handleDelete:H,selectedLogs:b,sortOrder:V,setSortOrder:A,statusFilters:c,setStatusFilters:S,methodFilters:p,setMethodFilters:m,availableMethods:oe,filteredLogs:h,logs:g,toggleSectionFilter:k,toggleSectionCollapse:R,minStart:B,totalRange:O,newLogIds:P,toggleSelect:q,setSelected:M,isNetworkPaused:F,setIsNetworkPaused:W}=(0,InspectorContext_1.useInspector)(),{t:L}=(0,i18n_1.useTranslation)(),$=(0,react_1.useRef)(null),[T,j]=react_1.default.useState(100),G=(0,react_1.useMemo)(()=>{let e=0;const o=[];for(const r of l)r.type==="header"?o.push(r):r.type==="log"&&e<T&&(o.push(r),e++);return o},[l,T]),[Q,I]=react_1.default.useState(!1),[D,N]=react_1.default.useState(!1),K=(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:V==="newest"?"time_desc":"time_asc"}),[c,p,V]),U=(0,react_1.useCallback)(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?S(new Set):S(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?m(new Set):m(new Set([...e.methods].map(o=>o))),e.sortBy==="time_asc"?A("oldest"):A("newest")},[S,m,A]),C=(0,react_1.useMemo)(()=>{let e=0,o=0,r=0,i=0,u=0,z=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&&o++,(f.duration||0)>=500&&r++;const d=(f.method||"").toUpperCase();d==="POST"&&i++,d==="GET"&&u++;const y=(f.url||"").toLowerCase(),E=(f.client||"").toLowerCase();(y.includes("graphql")||E.includes("graphql")||E.includes("apollo"))&&z++}),{all:g.length,errors:e,success:o,slow:r,post:i,get:u,graphql:z}},[g]),X=(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:AppColors_1.AppColors.graphqlPink}],[C]),_=(0,react_1.useMemo)(()=>{if(!g||g.length===0)return null;let e=0,o=0,r=0,i=0;const u=[];g.forEach(d=>{if(d.status!=null){o++;const y=typeof d.status=="number"?d.status:parseInt(String(d.status),10);isNaN(y)||y>=200&&y<400&&e++}typeof d.duration=="number"&&d.duration>0&&(u.push(d.duration),r+=d.duration)}),u.sort((d,y)=>d-y);const z=u.length>0?Math.round(r/u.length):0,f=u.length>0?u[Math.floor(u.length*.95)]:0;return{successRate:o>0?Math.round(e/o*100):100,avgDuration:z,p95:f,totalCount:g.length}},[g]),J=(0,react_1.useCallback)(({item:e,index:o})=>{if(e.type==="header")return<AnimatedEntrance_1.default index={o}distance={8}>
-            <DomainHeader_1.default pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={k}isCollapsed={e.isCollapsed}onToggleCollapse={R}isFirst={e.isFirst}timestamp={e.timestamp}/>
-          </AnimatedEntrance_1.default>;const{log:r,isLast:i,color:u}=e;return<AnimatedEntrance_1.default index={o}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={r}isSelected={b.has(r.id)}onToggleSelect={q}onPress={()=>{M(r)}}timelineMinStart={B}timelineTotalRange={O}isNew={P.has(r.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>},[B,O,P,b,q,t,k,R,M]);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}}>
-                    {L("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}}>
-                    {L("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,D&&{borderColor:AppColors_1.AppColors.purple,borderWidth:1.5}]}>
-                <NetworkIcons_1.SearchIcon color={D?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={a}onFocus={()=>N(!0)}onBlur={()=>N(!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}}>
-                        {h.length}
+                        {w.length}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Pressable onPress={()=>a("")}hitSlop={10}style={styles_1.default.clearBtn}>
+                    <react_native_1.Pressable onPress={()=>l("")}hitSlop={10}style={styles_1.default.clearBtn}>
                       <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak}size={13}/>
                     </react_native_1.Pressable>
                   </react_native_1.View>}
               </react_native_1.View>
 
               <react_native_1.View style={styles_1.default.toolbarRight}>
-                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,F&&{borderColor:`${AppColors_1.AppColors.darkOrange}50`,backgroundColor:`${AppColors_1.AppColors.darkOrange}18`}]}onPress={()=>W(e=>!e)}hitSlop={6}>
-                  <NetworkIcons_1.HeaderPauseIcon isPaused={F}color={F?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={H}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}/>
                   {b.size>0&&<react_native_1.View style={styles_1.default.trashBadge}>
                       <react_native_1.Text style={styles_1.default.trashBadgeText}>
@@ -81,13 +83,13 @@
                     </react_native_1.View>}
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default style={styles_1.default.toolbarBtn}onPress={()=>A(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
-                  <NetworkIcons_1.SortArrowIcon direction={V==="newest"?"down":"up"}color={AppColors_1.AppColors.grayTextStrong}size={18}/>
+                <TouchableScale_1.default style={styles_1.default.toolbarBtn}onPress={()=>m(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <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={()=>I(!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}}>
-                {X.map(e=>{const o=v===e.id,r=e.color||AppColors_1.AppColors.purple,i=o?AppColors_1.AppColors.white:r;return<TouchableScale_1.default key={e.id}onPress={()=>{x(o?"all":e.id)}}>
-                      <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:o?r:`${r}12`,borderWidth:1,borderColor:o?r:`${r}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:o?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:o?"rgba(255,255,255,0.25)":`${r}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
-                          <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9,color:o?AppColors_1.AppColors.white:r}}>
+                        <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={()=>I(!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>
 
             
-            {(v!=="all"||t.trim().length>0||c.size>0||p.size>0||h.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 {h.length} of {g.length} requests
+                  Showing {w.length} of {h.length} requests
                 </react_native_1.Text>
-                <TouchableScale_1.default onPress={()=>{a(""),x("all"),S(new Set),m(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={$}data={G}keyExtractor={e=>e?.id?.toString()}renderItem={J}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={react_native_1.Platform.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<EmptyState_1.default isSearch={t.length>0||c.size>0||p.size>0||v!=="all"}searchQuery={t}customTitle={t.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{a(""),S(new Set),m(new Set),x("all"),n("all")}}/>}ListFooterComponent={l.length>0?<EndOfListFooter_1.default count={Math.min(T,h.length)}totalCount={h.length}label="requests"hasMore={h.length>T}onLoadMore={()=>j(e=>e+10)}/>:null}contentContainerStyle={[styles_1.default.listContent,h.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={Q}onClose={()=>I(!1)}filters={K}onApply={U}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/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;

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

@@ -0,0 +1,190 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(o,e,t,r){r===void 0&&(r=t);var a=Object.getOwnPropertyDescriptor(e,t);(!a||("get"in a?!e.__esModule:a.writable||a.configurable))&&(a={enumerable:!0,get:function(){return e[t]}}),Object.defineProperty(o,r,a)}):(function(o,e,t,r){r===void 0&&(r=t),o[r]=e[t]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(o,e){Object.defineProperty(o,"default",{enumerable:!0,value:e})}):function(o,e){o.default=e}),__importStar=this&&this.__importStar||(function(){var o=function(e){return o=Object.getOwnPropertyNames||function(t){var r=[];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(r[r.length]=a);return r},o(e)};return function(e){if(e&&e.__esModule)return e;var t={};if(e!=null)for(var r=o(e),a=0;a<r.length;a++)r[a]!=="default"&&__createBinding(t,e,r[a]);return __setModuleDefault(t,e),t}})(),__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"),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),helpers_1=require("../../helpers"),shareFormatter_1=require("../../helpers/shareFormatter"),ShareButton_1=__importDefault(require("../ShareButton")),CopyButton_1=__importDefault(require("../CopyButton")),JsonViewer_1=__importDefault(require("../JsonViewer")),SegmentedTabs_1=__importDefault(require("../SegmentedTabs")),NetworkIcons_1=require("../NetworkIcons"),PushDetail=react_1.default.memo(function({item:e}){const[t,r]=(0,react_1.useState)("preview"),a=(0,react_1.useMemo)(()=>e?(0,helpers_1.formatDateTime)(e.timestamp):"",[e]);if(!e)return null;const n=async()=>{await(0,shareFormatter_1.sharePushReport)(e)},p=[{key:"preview",label:"Preview",themeColor:AppColors_1.AppColors.brandPurple,icon:l=><NetworkIcons_1.EyeIcon size={12}color={l?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>},{key:"payload",label:"Custom Payload",themeColor:AppColors_1.AppColors.violet600,icon:l=><NetworkIcons_1.LayersIcon size={12}color={l?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>},{key:"headers",label:"Delivery Metadata",themeColor:AppColors_1.AppColors.teal600,icon:l=><NetworkIcons_1.MetadataIcon size={12}color={l?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>},{key:"raw",label:"Raw Payload",themeColor:AppColors_1.AppColors.sky600,icon:l=><NetworkIcons_1.RawJsonIcon size={12}color={l?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}/>}],s=(e.source||"PUSH").toUpperCase(),c=(e.appState||"STATE").toUpperCase(),d=!!(e.data?.deepLink||e.data?.openDirectUrl||e.data?._od||e.customDomainAttributes?.openDirectUrl),u=e.data?.deepLink||e.data?.openDirectUrl||e.data?._od||e.customDomainAttributes?.openDirectUrl||"";return<react_native_1.View style={{flex:1}}>
+      
+      <react_native_1.View style={{paddingHorizontal:8,paddingTop:4}}>
+        <react_native_1.View style={styles_1.default.detailInfoBar}>
+          
+          <react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:6,paddingBottom:8,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor}}>
+            <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5,flexWrap:"wrap",flex:1}}>
+              
+              <react_native_1.View style={[styles_1.default.methodBadge,{backgroundColor:AppColors_1.AppColors.brandPurple,paddingHorizontal:8,paddingVertical:3.5,borderRadius:6,flexDirection:"row",alignItems:"center",gap:4}]}>
+                <NetworkIcons_1.CloudPushIcon size={10}color={AppColors_1.AppColors.white}/>
+                <react_native_1.Text style={[styles_1.default.methodBadgeText,{color:AppColors_1.AppColors.white,fontSize:10.5,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+                  {s}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={[styles_1.default.chip,{backgroundColor:e.appState==="foreground"?`${AppColors_1.AppColors.greenColor}18`:`${AppColors_1.AppColors.amber600}18`,borderColor:e.appState==="foreground"?`${AppColors_1.AppColors.greenColor}40`:`${AppColors_1.AppColors.amber600}40`,paddingHorizontal:6,paddingVertical:3,borderRadius:6}]}>
+                <react_native_1.Text style={[styles_1.default.chipText,{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:e.appState==="foreground"?AppColors_1.AppColors.greenColor:AppColors_1.AppColors.amber700}]}>
+                  {c}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              {e.action&&<react_native_1.View style={[styles_1.default.chip,{backgroundColor:`${AppColors_1.AppColors.purple}14`,borderColor:`${AppColors_1.AppColors.purple}30`,paddingHorizontal:6,paddingVertical:3,borderRadius:6}]}>
+                  <react_native_1.Text style={[styles_1.default.chipText,{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.purple}]}>
+                    {e.action.toUpperCase()}
+                  </react_native_1.Text>
+                </react_native_1.View>}
+
+              
+              <react_native_1.View style={[styles_1.default.chip,{backgroundColor:`${AppColors_1.AppColors.brandPurple}10`,borderColor:`${AppColors_1.AppColors.brandPurple}25`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.brandPurple}size={10}/>
+                <react_native_1.Text style={[styles_1.default.chipText,{color:AppColors_1.AppColors.brandPurple,fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5}]}>
+                  {a}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          
+          <react_native_1.View style={{backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,padding:10,marginTop:8,gap:8}}>
+            
+            <react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"nowrap",gap:6}}>
+              <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1,minWidth:0}}>
+                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.4,textTransform:"uppercase"}}numberOfLines={1}>
+                  {e.domain?e.domain.toUpperCase():"NOTIFICATION PAYLOAD"}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0}}>
+                <ShareButton_1.default onShare={n}/>
+                <CopyButton_1.default value={typeof e.rawPayload=="object"?JSON.stringify(e.rawPayload,null,2):JSON.stringify(e.data,null,2)}label="JSON"iconType="copy"/>
+                <CopyButton_1.default value={e.id||""}label="ID"iconType="copy"/>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={{gap:2}}>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12.5,color:AppColors_1.AppColors.primaryBlack,lineHeight:18}}numberOfLines={2}selectable>
+                {e.title||"(No Title)"}
+              </react_native_1.Text>
+              {e.body?<react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11.5,color:AppColors_1.AppColors.grayText,lineHeight:16}}numberOfLines={2}selectable>
+                  {e.body}
+                </react_native_1.Text>:null}
+              {d?<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4,marginTop:2}}>
+                  <react_native_1.Text style={{fontSize:10,fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.brandPurple}}>
+                    🔗 LINK:
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{fontSize:10.5,fontFamily:AppFonts_1.AppFonts.interRegular,color:AppColors_1.AppColors.sky600}}numberOfLines={1}>
+                    {u}
+                  </react_native_1.Text>
+                </react_native_1.View>:null}
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      <react_native_1.View style={{paddingHorizontal:8,paddingVertical:6}}>
+        <SegmentedTabs_1.default tabs={p}activeKey={t}onChange={l=>r(l)}scrollable={!0}/>
+      </react_native_1.View>
+
+      
+      <react_native_1.View style={{flex:1,paddingHorizontal:8,paddingBottom:10}}>
+        {t==="preview"&&<react_native_1.ScrollView contentContainerStyle={detailStyles.scrollContent}>
+            
+            <react_native_1.View style={detailStyles.mockupCard}>
+              <react_native_1.View style={detailStyles.mockupHeader}>
+                <react_native_1.View style={detailStyles.mockupAppIcon}>
+                  <NetworkIcons_1.BellIcon size={12}color={AppColors_1.AppColors.white}/>
+                </react_native_1.View>
+                <react_native_1.Text style={detailStyles.mockupAppName}>
+                  {e.domain||"App Notification"}
+                </react_native_1.Text>
+                <react_native_1.Text style={detailStyles.mockupTime}>• now</react_native_1.Text>
+              </react_native_1.View>
+
+              
+              {e.imageUrl?<react_native_1.Image source={{uri:e.imageUrl}}style={detailStyles.mockupImage}resizeMode="cover"/>:null}
+
+              
+              <react_native_1.View style={{gap:2}}>
+                <react_native_1.Text style={detailStyles.mockupTitle}numberOfLines={2}>
+                  {e.title||"(No Title)"}
+                </react_native_1.Text>
+                {e.subtitle?<react_native_1.Text style={detailStyles.mockupSubtitle}numberOfLines={1}>
+                    {e.subtitle}
+                  </react_native_1.Text>:null}
+                <react_native_1.Text style={detailStyles.mockupBody}>
+                  {e.body||"(No message body provided in notification payload)"}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={detailStyles.mockupFooterTags}>
+                {e.channelId?<react_native_1.View style={detailStyles.tagPill}>
+                    <react_native_1.Text style={detailStyles.tagPillText}>Channel: {e.channelId}</react_native_1.Text>
+                  </react_native_1.View>:null}
+                {e.sound?<react_native_1.View style={detailStyles.tagPill}>
+                    <react_native_1.Text style={detailStyles.tagPillText}>🔊 {e.sound}</react_native_1.Text>
+                  </react_native_1.View>:null}
+                {e.badge!=null?<react_native_1.View style={detailStyles.tagPill}>
+                    <react_native_1.Text style={detailStyles.tagPillText}>Badge: {e.badge}</react_native_1.Text>
+                  </react_native_1.View>:null}
+                {e.priority?<react_native_1.View style={detailStyles.tagPill}>
+                    <react_native_1.Text style={detailStyles.tagPillText}>⚡ {e.priority}</react_native_1.Text>
+                  </react_native_1.View>:null}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            {e.customDomainAttributes&&Object.keys(e.customDomainAttributes).length>0&&<react_native_1.View style={detailStyles.sectionCard}>
+                <react_native_1.Text style={detailStyles.sectionTitle}>🏢 Domain Specific Fields</react_native_1.Text>
+                {Object.entries(e.customDomainAttributes).map(([l,i])=><react_native_1.View key={l}style={detailStyles.keyValRow}>
+                    <react_native_1.Text style={detailStyles.keyText}>{l}:</react_native_1.Text>
+                    <react_native_1.Text style={detailStyles.valText}numberOfLines={2}>
+                      {typeof i=="object"?JSON.stringify(i):String(i)}
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+              </react_native_1.View>}
+          </react_native_1.ScrollView>}
+
+        {t==="payload"&&<JsonViewer_1.default data={e.data&&Object.keys(e.data).length>0?e.data:{message:"No custom key-value data found in payload"}}fullHeight={!0}/>}
+
+        {t==="headers"&&<react_native_1.ScrollView contentContainerStyle={detailStyles.scrollContent}>
+            <react_native_1.View style={detailStyles.sectionCard}>
+              <react_native_1.Text style={detailStyles.sectionTitle}>⚙️ Delivery & Message Metadata</react_native_1.Text>
+              <react_native_1.View style={detailStyles.keyValRow}>
+                <react_native_1.Text style={detailStyles.keyText}>Message ID:</react_native_1.Text>
+                <react_native_1.Text style={detailStyles.valText}selectable>{e.id||"N/A"}</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={detailStyles.keyValRow}>
+                <react_native_1.Text style={detailStyles.keyText}>Source / Domain:</react_native_1.Text>
+                <react_native_1.Text style={detailStyles.valText}>{e.domain||e.source||"N/A"}</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={detailStyles.keyValRow}>
+                <react_native_1.Text style={detailStyles.keyText}>App State:</react_native_1.Text>
+                <react_native_1.Text style={detailStyles.valText}>{e.appState}</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={detailStyles.keyValRow}>
+                <react_native_1.Text style={detailStyles.keyText}>Action Type:</react_native_1.Text>
+                <react_native_1.Text style={detailStyles.valText}>{e.action}</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={detailStyles.keyValRow}>
+                <react_native_1.Text style={detailStyles.keyText}>Timestamp:</react_native_1.Text>
+                <react_native_1.Text style={detailStyles.valText}>{a}</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={detailStyles.keyValRow}>
+                <react_native_1.Text style={detailStyles.keyText}>Channel ID:</react_native_1.Text>
+                <react_native_1.Text style={detailStyles.valText}>{e.channelId||"default"}</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={detailStyles.keyValRow}>
+                <react_native_1.Text style={detailStyles.keyText}>Sound:</react_native_1.Text>
+                <react_native_1.Text style={detailStyles.valText}>{e.sound||"default"}</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={detailStyles.keyValRow}>
+                <react_native_1.Text style={detailStyles.keyText}>Badge Count:</react_native_1.Text>
+                <react_native_1.Text style={detailStyles.valText}>{e.badge!=null?e.badge:"None"}</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={detailStyles.keyValRow}>
+                <react_native_1.Text style={detailStyles.keyText}>Collapse Key:</react_native_1.Text>
+                <react_native_1.Text style={detailStyles.valText}>{e.collapseKey||"None"}</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.ScrollView>}
+
+        {t==="raw"&&<JsonViewer_1.default data={e.rawPayload||e}fullHeight={!0}/>}
+      </react_native_1.View>
+    </react_native_1.View>}),detailStyles=react_native_1.StyleSheet.create({container:{flex:1,backgroundColor:AppColors_1.AppColors.white},headerBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,backgroundColor:AppColors_1.AppColors.white},headerLeft:{flexDirection:"row",alignItems:"center",gap:8,flex:1},backBtn:{width:32,height:32,borderRadius:8,backgroundColor:AppColors_1.AppColors.grayBackground,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},titleWrap:{flex:1,gap:2},badgeRow:{flexDirection:"row",alignItems:"center",gap:5},sourceBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${AppColors_1.AppColors.brandPurple}14`,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:`${AppColors_1.AppColors.brandPurple}30`},sourceBadgeText:{fontSize:9,fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.brandPurple},stateBadge:{backgroundColor:`${AppColors_1.AppColors.greenColor}14`,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:`${AppColors_1.AppColors.greenColor}30`},stateBadgeText:{fontSize:9,fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.greenColor},headerTitle:{fontSize:13,fontFamily:AppFonts_1.AppFonts.interSemiBold,color:AppColors_1.AppColors.primaryBlack},headerActions:{flexDirection:"row",alignItems:"center",gap:6},tabsContainer:{paddingHorizontal:10,paddingVertical:6,backgroundColor:AppColors_1.AppColors.grayBackground,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor},bodyContainer:{flex:1},scrollContent:{padding:12,gap:12},mockupCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:14,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,padding:14,gap:8,shadowColor:"#000",shadowOpacity:.05,shadowOffset:{width:0,height:2},shadowRadius:6,elevation:2},mockupHeader:{flexDirection:"row",alignItems:"center",gap:6},mockupAppIcon:{width:20,height:20,borderRadius:5,backgroundColor:AppColors_1.AppColors.brandPurple,alignItems:"center",justifyContent:"center"},mockupAppName:{fontSize:11,fontFamily:AppFonts_1.AppFonts.interSemiBold,color:AppColors_1.AppColors.primaryBlack,textTransform:"uppercase"},mockupTime:{fontSize:10,fontFamily:AppFonts_1.AppFonts.interRegular,color:AppColors_1.AppColors.grayTextWeak},mockupImage:{width:"100%",height:140,borderRadius:8,marginVertical:4},mockupTitle:{fontSize:14,fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.primaryBlack},mockupSubtitle:{fontSize:12,fontFamily:AppFonts_1.AppFonts.interMedium,color:AppColors_1.AppColors.grayText},mockupBody:{fontSize:12.5,fontFamily:AppFonts_1.AppFonts.interRegular,color:AppColors_1.AppColors.grayText,lineHeight:18},mockupFooterTags:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:6,marginTop:6,paddingTop:8,borderTopWidth:1,borderTopColor:AppColors_1.AppColors.dividerColor},tagPill:{backgroundColor:AppColors_1.AppColors.grayBackground,paddingHorizontal:6,paddingVertical:3,borderRadius:4,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},tagPillText:{fontSize:10,fontFamily:AppFonts_1.AppFonts.interMedium,color:AppColors_1.AppColors.grayText},sectionCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:12,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,padding:12,gap:8},sectionTitle:{fontSize:12,fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.primaryBlack,marginBottom:4},keyValRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:3,borderBottomWidth:.5,borderBottomColor:`${AppColors_1.AppColors.dividerColor}40`,gap:8},keyText:{fontSize:11,fontFamily:AppFonts_1.AppFonts.interMedium,color:AppColors_1.AppColors.grayTextWeak},valText:{fontSize:11,fontFamily:AppFonts_1.AppFonts.interSemiBold,color:AppColors_1.AppColors.primaryBlack,textAlign:"right",flexShrink:1}});PushDetail.displayName="PushDetail",exports.default=PushDetail;