react-native-inapp-inspector 2.3.24 → 2.4.0

package/dist/esm/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/esm/components/Inspector/PushCard.js

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

package/dist/esm/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/esm/components/Inspector/PushDetail.js

@@ -0,0 +1,190 @@
+import j,{useMemo as M,useState as J}from"react";import{Image as K,ScrollView as P,StyleSheet as E,Text as T,View as C}from"react-native";import B from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as V}from"../../styles/AppFonts";import{formatDateTime as _}from"../../helpers";import{sharePushReport as Y}from"../../helpers/shareFormatter";import G from"../ShareButton";import R from"../CopyButton";import F from"../JsonViewer";import Q from"../SegmentedTabs";import{BellIcon as X,ClockIcon as Z,CloudPushIcon as Te,EyeIcon as Ce,LayersIcon as Ve,MetadataIcon as Se,RawJsonIcon as Be}from"../NetworkIcons";const A=j.memo(function({item:o}){const[z,N]=J("preview"),D=M(()=>o?_(o.timestamp):"",[o]);if(!o)return null;const W=async()=>{await Y(o)},H=[{key:"preview",label:"Preview",themeColor:e.brandPurple,icon:S=><Ce size={12}color={S?e.white:e.grayText}/>},{key:"payload",label:"Custom Payload",themeColor:e.violet600,icon:S=><Ve size={12}color={S?e.white:e.grayText}/>},{key:"headers",label:"Delivery Metadata",themeColor:e.teal600,icon:S=><Se size={12}color={S?e.white:e.grayText}/>},{key:"raw",label:"Raw Payload",themeColor:e.sky600,icon:S=><Be size={12}color={S?e.white:e.grayText}/>}],O=(o.source||"PUSH").toUpperCase(),L=(o.appState||"STATE").toUpperCase(),$=!!(o.data?.deepLink||o.data?.openDirectUrl||o.data?._od||o.customDomainAttributes?.openDirectUrl),U=o.data?.deepLink||o.data?.openDirectUrl||o.data?._od||o.customDomainAttributes?.openDirectUrl||"";return<C style={{flex:1}}>
+      
+      <C style={{paddingHorizontal:8,paddingTop:4}}>
+        <C style={B.detailInfoBar}>
+          
+          <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:6,paddingBottom:8,borderBottomWidth:1,borderBottomColor:e.dividerColor}}>
+            <C style={{flexDirection:"row",alignItems:"center",gap:5,flexWrap:"wrap",flex:1}}>
+              
+              <C style={[B.methodBadge,{backgroundColor:e.brandPurple,paddingHorizontal:8,paddingVertical:3.5,borderRadius:6,flexDirection:"row",alignItems:"center",gap:4}]}>
+                <Te size={10}color={e.white}/>
+                <T style={[B.methodBadgeText,{color:e.white,fontSize:10.5,fontFamily:V.interBold}]}>
+                  {O}
+                </T>
+              </C>
+
+              
+              <C style={[B.chip,{backgroundColor:o.appState==="foreground"?`${e.greenColor}18`:`${e.amber600}18`,borderColor:o.appState==="foreground"?`${e.greenColor}40`:`${e.amber600}40`,paddingHorizontal:6,paddingVertical:3,borderRadius:6}]}>
+                <T style={[B.chipText,{fontFamily:V.interBold,fontSize:9.5,color:o.appState==="foreground"?e.greenColor:e.amber700}]}>
+                  {L}
+                </T>
+              </C>
+
+              
+              {o.action&&<C style={[B.chip,{backgroundColor:`${e.purple}14`,borderColor:`${e.purple}30`,paddingHorizontal:6,paddingVertical:3,borderRadius:6}]}>
+                  <T style={[B.chipText,{fontFamily:V.interBold,fontSize:9.5,color:e.purple}]}>
+                    {o.action.toUpperCase()}
+                  </T>
+                </C>}
+
+              
+              <C style={[B.chip,{backgroundColor:`${e.brandPurple}10`,borderColor:`${e.brandPurple}25`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
+                <Z color={e.brandPurple}size={10}/>
+                <T style={[B.chipText,{color:e.brandPurple,fontFamily:V.interBold,fontSize:10.5}]}>
+                  {D}
+                </T>
+              </C>
+            </C>
+          </C>
+
+          
+          <C style={{backgroundColor:e.grayBackground,borderRadius:10,borderWidth:1,borderColor:e.dividerColor,padding:10,marginTop:8,gap:8}}>
+            
+            <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"nowrap",gap:6}}>
+              <C style={{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1,minWidth:0}}>
+                <T style={{fontFamily:V.interBold,fontSize:10,color:e.grayTextWeak,letterSpacing:.4,textTransform:"uppercase"}}numberOfLines={1}>
+                  {o.domain?o.domain.toUpperCase():"NOTIFICATION PAYLOAD"}
+                </T>
+              </C>
+
+              
+              <C style={{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0}}>
+                <G onShare={W}/>
+                <R value={typeof o.rawPayload=="object"?JSON.stringify(o.rawPayload,null,2):JSON.stringify(o.data,null,2)}label="JSON"iconType="copy"/>
+                <R value={o.id||""}label="ID"iconType="copy"/>
+              </C>
+            </C>
+
+            
+            <C style={{gap:2}}>
+              <T style={{fontFamily:V.interBold,fontSize:12.5,color:e.primaryBlack,lineHeight:18}}numberOfLines={2}selectable>
+                {o.title||"(No Title)"}
+              </T>
+              {o.body?<T style={{fontFamily:V.interRegular,fontSize:11.5,color:e.grayText,lineHeight:16}}numberOfLines={2}selectable>
+                  {o.body}
+                </T>:null}
+              {$?<C style={{flexDirection:"row",alignItems:"center",gap:4,marginTop:2}}>
+                  <T style={{fontSize:10,fontFamily:V.interBold,color:e.brandPurple}}>
+                    🔗 LINK:
+                  </T>
+                  <T style={{fontSize:10.5,fontFamily:V.interRegular,color:e.sky600}}numberOfLines={1}>
+                    {U}
+                  </T>
+                </C>:null}
+            </C>
+          </C>
+        </C>
+      </C>
+
+      
+      <C style={{paddingHorizontal:8,paddingVertical:6}}>
+        <Q tabs={H}activeKey={z}onChange={S=>N(S)}scrollable={!0}/>
+      </C>
+
+      
+      <C style={{flex:1,paddingHorizontal:8,paddingBottom:10}}>
+        {z==="preview"&&<P contentContainerStyle={t.scrollContent}>
+            
+            <C style={t.mockupCard}>
+              <C style={t.mockupHeader}>
+                <C style={t.mockupAppIcon}>
+                  <X size={12}color={e.white}/>
+                </C>
+                <T style={t.mockupAppName}>
+                  {o.domain||"App Notification"}
+                </T>
+                <T style={t.mockupTime}>• now</T>
+              </C>
+
+              
+              {o.imageUrl?<K source={{uri:o.imageUrl}}style={t.mockupImage}resizeMode="cover"/>:null}
+
+              
+              <C style={{gap:2}}>
+                <T style={t.mockupTitle}numberOfLines={2}>
+                  {o.title||"(No Title)"}
+                </T>
+                {o.subtitle?<T style={t.mockupSubtitle}numberOfLines={1}>
+                    {o.subtitle}
+                  </T>:null}
+                <T style={t.mockupBody}>
+                  {o.body||"(No message body provided in notification payload)"}
+                </T>
+              </C>
+
+              
+              <C style={t.mockupFooterTags}>
+                {o.channelId?<C style={t.tagPill}>
+                    <T style={t.tagPillText}>Channel: {o.channelId}</T>
+                  </C>:null}
+                {o.sound?<C style={t.tagPill}>
+                    <T style={t.tagPillText}>🔊 {o.sound}</T>
+                  </C>:null}
+                {o.badge!=null?<C style={t.tagPill}>
+                    <T style={t.tagPillText}>Badge: {o.badge}</T>
+                  </C>:null}
+                {o.priority?<C style={t.tagPill}>
+                    <T style={t.tagPillText}>⚡ {o.priority}</T>
+                  </C>:null}
+              </C>
+            </C>
+
+            
+            {o.customDomainAttributes&&Object.keys(o.customDomainAttributes).length>0&&<C style={t.sectionCard}>
+                <T style={t.sectionTitle}>🏢 Domain Specific Fields</T>
+                {Object.entries(o.customDomainAttributes).map(([S,I])=><C key={S}style={t.keyValRow}>
+                    <T style={t.keyText}>{S}:</T>
+                    <T style={t.valText}numberOfLines={2}>
+                      {typeof I=="object"?JSON.stringify(I):String(I)}
+                    </T>
+                  </C>)}
+              </C>}
+          </P>}
+
+        {z==="payload"&&<F data={o.data&&Object.keys(o.data).length>0?o.data:{message:"No custom key-value data found in payload"}}fullHeight={!0}/>}
+
+        {z==="headers"&&<P contentContainerStyle={t.scrollContent}>
+            <C style={t.sectionCard}>
+              <T style={t.sectionTitle}>⚙️ Delivery & Message Metadata</T>
+              <C style={t.keyValRow}>
+                <T style={t.keyText}>Message ID:</T>
+                <T style={t.valText}selectable>{o.id||"N/A"}</T>
+              </C>
+              <C style={t.keyValRow}>
+                <T style={t.keyText}>Source / Domain:</T>
+                <T style={t.valText}>{o.domain||o.source||"N/A"}</T>
+              </C>
+              <C style={t.keyValRow}>
+                <T style={t.keyText}>App State:</T>
+                <T style={t.valText}>{o.appState}</T>
+              </C>
+              <C style={t.keyValRow}>
+                <T style={t.keyText}>Action Type:</T>
+                <T style={t.valText}>{o.action}</T>
+              </C>
+              <C style={t.keyValRow}>
+                <T style={t.keyText}>Timestamp:</T>
+                <T style={t.valText}>{D}</T>
+              </C>
+              <C style={t.keyValRow}>
+                <T style={t.keyText}>Channel ID:</T>
+                <T style={t.valText}>{o.channelId||"default"}</T>
+              </C>
+              <C style={t.keyValRow}>
+                <T style={t.keyText}>Sound:</T>
+                <T style={t.valText}>{o.sound||"default"}</T>
+              </C>
+              <C style={t.keyValRow}>
+                <T style={t.keyText}>Badge Count:</T>
+                <T style={t.valText}>{o.badge!=null?o.badge:"None"}</T>
+              </C>
+              <C style={t.keyValRow}>
+                <T style={t.keyText}>Collapse Key:</T>
+                <T style={t.valText}>{o.collapseKey||"None"}</T>
+              </C>
+            </C>
+          </P>}
+
+        {z==="raw"&&<F data={o.rawPayload||o}fullHeight={!0}/>}
+      </C>
+    </C>}),t=E.create({container:{flex:1,backgroundColor:e.white},headerBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:e.dividerColor,backgroundColor:e.white},headerLeft:{flexDirection:"row",alignItems:"center",gap:8,flex:1},backBtn:{width:32,height:32,borderRadius:8,backgroundColor:e.grayBackground,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:e.dividerColor},titleWrap:{flex:1,gap:2},badgeRow:{flexDirection:"row",alignItems:"center",gap:5},sourceBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.brandPurple}14`,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:`${e.brandPurple}30`},sourceBadgeText:{fontSize:9,fontFamily:V.interBold,color:e.brandPurple},stateBadge:{backgroundColor:`${e.greenColor}14`,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:`${e.greenColor}30`},stateBadgeText:{fontSize:9,fontFamily:V.interBold,color:e.greenColor},headerTitle:{fontSize:13,fontFamily:V.interSemiBold,color:e.primaryBlack},headerActions:{flexDirection:"row",alignItems:"center",gap:6},tabsContainer:{paddingHorizontal:10,paddingVertical:6,backgroundColor:e.grayBackground,borderBottomWidth:1,borderBottomColor:e.dividerColor},bodyContainer:{flex:1},scrollContent:{padding:12,gap:12},mockupCard:{backgroundColor:e.white,borderRadius:14,borderWidth:1,borderColor:e.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:e.brandPurple,alignItems:"center",justifyContent:"center"},mockupAppName:{fontSize:11,fontFamily:V.interSemiBold,color:e.primaryBlack,textTransform:"uppercase"},mockupTime:{fontSize:10,fontFamily:V.interRegular,color:e.grayTextWeak},mockupImage:{width:"100%",height:140,borderRadius:8,marginVertical:4},mockupTitle:{fontSize:14,fontFamily:V.interBold,color:e.primaryBlack},mockupSubtitle:{fontSize:12,fontFamily:V.interMedium,color:e.grayText},mockupBody:{fontSize:12.5,fontFamily:V.interRegular,color:e.grayText,lineHeight:18},mockupFooterTags:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:6,marginTop:6,paddingTop:8,borderTopWidth:1,borderTopColor:e.dividerColor},tagPill:{backgroundColor:e.grayBackground,paddingHorizontal:6,paddingVertical:3,borderRadius:4,borderWidth:1,borderColor:e.dividerColor},tagPillText:{fontSize:10,fontFamily:V.interMedium,color:e.grayText},sectionCard:{backgroundColor:e.white,borderRadius:12,borderWidth:1,borderColor:e.dividerColor,padding:12,gap:8},sectionTitle:{fontSize:12,fontFamily:V.interBold,color:e.primaryBlack,marginBottom:4},keyValRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:3,borderBottomWidth:.5,borderBottomColor:`${e.dividerColor}40`,gap:8},keyText:{fontSize:11,fontFamily:V.interMedium,color:e.grayTextWeak},valText:{fontSize:11,fontFamily:V.interSemiBold,color:e.primaryBlack,textAlign:"right",flexShrink:1}});A.displayName="PushDetail";export default A;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PushTab: React.MemoExoticComponent<() => React.JSX.Element>;
+export default PushTab;

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

@@ -0,0 +1,45 @@
+import J,{useCallback as R,useMemo as H,useRef as X,useState as Y}from"react";import{FlatList as Z,Platform as M,Pressable as Co,ScrollView as So,StyleSheet as Po,Text as To,TextInput as Io,View as C}from"react-native";import{useInspector as zo}from"./InspectorContext";import Bo from"./PushCard";import V from"../TouchableScale";import Ro from"../AnimatedEntrance";import Vo from"../EmptyState";import Eo from"../EndOfListFooter";import S from"../../styles";import{AppColors as r}from"../../styles/AppColors";import{AppFonts as N}from"../../styles/AppFonts";import{ClearIcon as Fo,SearchIcon as Lo,TrashIcon as Ao,BellIcon as Wo,SunIcon as Oo,MoonIcon as $o,ExternalLinkIcon as Ho,CloudPushIcon as Mo,BoltIcon as No}from"../NetworkIcons";const Q=J.memo(()=>{const{pushRecords:w,filteredPushRecords:I,pushSearch:t,setPushSearch:z,pushQuickFilter:T,setPushQuickFilter:E,setSelectedPush:F,clearAllPushLogs:j,simulatePush:L}=zo(),_=X(null),[A,q]=Y(0),W=["salesforce","fcm","apns","deeplink","rich_media"],D=R(()=>{const o=W[A%W.length];L(o),q(e=>e+1)},[A,L]),v=H(()=>{let o=0,e=0,x=0;const P={};return w.forEach(B=>{const O=(B.appState||"").toLowerCase();O==="foreground"&&o++,O==="background"&&e++,B.action==="opened"&&x++;const $=(B.source||"other").toLowerCase();P[$]=(P[$]||0)+1}),{all:w.length,foreground:o,background:e,opened:x,sources:P}},[w]),K=H(()=>{const o=[{id:"all",label:"All",color:r.purple,icon:e=><Wo size={12}color={e}/>},{id:"foreground",label:"Foreground",color:r.greenColor,icon:e=><Oo size={12}color={e}/>},{id:"background",label:"Background",color:r.darkOrange,icon:e=><$o size={12}color={e}/>},{id:"opened",label:"Opened",color:r.brandPurple,icon:e=><Ho size={12}color={e}/>}];return Object.entries(v.sources).forEach(([e,x])=>{x>0&&e!=="all"&&o.push({id:`source:${e}`,label:e.toUpperCase(),color:e==="salesforce"?r.sky600:r.brandPurple,icon:P=><Mo size={12}color={P}/>})}),o},[v]),U=R(({item:o,index:e})=><Ro index={e}distance={8}>
+        <Bo item={o}searchStr={t}onPress={()=>F(o)}/>
+      </Ro>,[t,F]),G=R(o=>o.id||`push_${o.timestamp}`,[]);return<C style={{flex:1}}>
+      
+      <C style={{marginTop:6}}>
+        <C style={S.toolbarRow}>
+          <C style={[S.searchContainer,{flex:1,marginRight:8,height:38}]}>
+            <C style={S.searchIcon}>
+              <Lo color={r.grayTextWeak}size={15}/>
+            </C>
+            <Io style={[S.searchInput,{paddingVertical:0}]}placeholder="Search notifications..."placeholderTextColor={r.grayTextWeak}value={t}onChangeText={z}autoCapitalize="none"autoCorrect={!1}returnKeyType="search"clearButtonMode="while-editing"/>
+            {t.length>0&&M.OS==="android"&&<C style={{position:"absolute",right:8,top:0,bottom:0,justifyContent:"center"}}>
+                <Co onPress={()=>z("")}hitSlop={10}style={S.clearBtn}>
+                  <Fo color={r.grayTextWeak}size={13}/>
+                </Co>
+              </C>}
+          </C>
+
+          <C style={S.toolbarRight}>
+            <V style={[S.toolbarBtn,{backgroundColor:`${r.brandPurple}14`,borderColor:`${r.brandPurple}30`}]}onPress={D}hitSlop={6}accessibilityRole="button"accessibilityLabel="Simulate incoming push notification">
+              <No color={r.brandPurple}size={15}/>
+            </V>
+
+            {w.length>0&&<V style={[S.toolbarBtn,{borderColor:`${r.errorColor}38`,backgroundColor:`${r.errorColor}0F`}]}onPress={j}hitSlop={6}accessibilityRole="button"accessibilityLabel="Clear all push notification history">
+                <Ao color={r.errorColor}size={15}/>
+              </V>}
+          </C>
+        </C>
+      </C>
+
+      
+      <C style={k.carouselWrapper}>
+        <So horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={k.carouselContent}>
+          {K.map(o=>{const e=T===o.id;return<V key={o.id}onPress={()=>E(o.id)}style={[k.filterPill,e&&{backgroundColor:o.color,borderColor:o.color}]}>
+                {o.icon?o.icon(e?r.white:o.color):null}
+                <To style={[k.filterPillText,e&&{color:r.white}]}>
+                  {o.label}
+                </To>
+              </V>})}
+        </So>
+      </C>
+
+      
+      <Z ref={_}data={I}renderItem={U}keyExtractor={G}contentContainerStyle={k.listContent}initialNumToRender={15}maxToRenderPerBatch={20}windowSize={11}removeClippedSubviews={M.OS==="android"}ListEmptyComponent={<Vo isSearch={!!(t||T!=="all")}searchQuery={t}customTitle={t||T!=="all"?"No matching push notifications":"No push notifications captured yet"}customSub={t||T!=="all"?"Try adjusting your search query or filter chips.":"Incoming or opened push payloads from any domain (Salesforce, FCM, APNs, etc.) will appear here automatically."}onClearSearch={()=>{z(""),E("all")}}showReload={!1}/>}ListFooterComponent={I.length>0?<Eo totalCount={I.length}label="End of push notification history"/>:null}/>
+    </C>}),k=Po.create({carouselWrapper:{paddingVertical:6,borderBottomWidth:1,borderBottomColor:r.dividerColor,backgroundColor:r.white},carouselContent:{paddingHorizontal:8,gap:6,flexDirection:"row",alignItems:"center"},filterPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:9,paddingVertical:4.5,borderRadius:20,backgroundColor:r.grayBackground,borderWidth:1,borderColor:r.dividerColor},filterPillText:{fontSize:11,fontFamily:N.interMedium,color:r.primaryBlack},countBadge:{paddingHorizontal:5,paddingVertical:1,borderRadius:10},countBadgeText:{fontSize:9.5,fontFamily:N.interBold},listContent:{padding:8,paddingBottom:24}});Q.displayName="PushTab";export default Q;