react-native-inapp-inspector 2.3.25 → 2.4.0

package/dist/esm/components/AnalyticsDetail.js

@@ -1,4 +1,4 @@
-import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView as Te,StyleSheet as Ve,Text as B,TextInput as Be,View as C}from"react-native";import G from"./CopyButton";import Y from"./JsonViewer";import Se from"./SegmentedTabs";import Q from"./HighlightText";import Ie from"./AnimatedEntrance";import{AppFonts as S}from"../styles/AppFonts";import{AppColors as e}from"../styles/AppColors";import{getSize as ze,formatDateTime as Pe}from"../helpers";import{getEventCategory as Re}from"../helpers/gaAnalyticsRegistry";import{useTranslation as We}from"../i18n";import{SparkleIcon as X,ClockIcon as De,SearchIcon as He,ClearIcon as Fe,LayersIcon as Ne,CartIcon as Oe,GlobeIcon as Ae,BoltIcon as Ee,PinIcon as Ke,MoneyIcon as Le,PrettyIcon as Me,TableIcon as Z,DocIcon as $e,PackageIcon as _e}from"./NetworkIcons";const Je=({event:T})=>{const{t:P}=We(),[O,ee]=q("overview"),[R,v]=q(""),k=z(()=>T.params??{},[T.params]),F=z(()=>T.userProperties??{},[T.userProperties]),N=z(()=>Object.keys(k),[k]),W=z(()=>Object.keys(F),[F]),M=z(()=>Re(T.name,k),[T.name,k]),A=z(()=>({name:T.name,timestamp:T.timestamp,source:T.source,...T.screenName?{screenName:T.screenName}:{},...T.screenClass?{screenClass:T.screenClass}:{},...T.userId?{userId:T.userId}:{},...T.sessionId?{sessionId:T.sessionId}:{},...T.trackingId?{trackingId:T.trackingId}:{},params:k,...W.length>0?{userProperties:F}:{}}),[T,k,W.length,F]),E=z(()=>{const V=k.value??k.price,I=k.currency??"USD";return V!=null&&!isNaN(Number(V))?{amount:Number(V).toFixed(2),currency:String(I).toUpperCase()}:null},[k]),$=z(()=>Array.isArray(k.items)?k.items.length:null,[k.items]),_=z(()=>T.screenName||k.firebase_screen||k.screen_name||k.page_title||T.screenClass||k.firebase_screen_class,[T.screenName,T.screenClass,k]),J=z(()=>{const V=Object.entries(k);if(!R.trim())return V;const I=R.toLowerCase();return V.filter(([K,D])=>{const L=typeof D=="object"?JSON.stringify(D):String(D);return K.toLowerCase().includes(I)||L.toLowerCase().includes(I)})},[k,R]),H=z(()=>{switch(M){case"ecommerce":return{label:P("analytics.ecommerceCategory"),color:e.amber700,bg:e.amber100,border:e.amber200,icon:V=><Oe color={V}size={11}/>};case"page_view":return{label:P("analytics.screensCategory"),color:e.sky600,bg:e.sky100,border:e.sky400,icon:V=><Ae color={V}size={11}/>};case"system":return{label:P("analytics.systemCategory"),color:e.purple,bg:e.purple100,border:e.purple200,icon:V=><Ee color={V}size={11}/>};default:return{label:P("analytics.customCategory"),color:e.brandPurple,bg:e.purple100,border:e.purple200,icon:V=><X color={V}size={11}/>}}},[M,P]),re=[{key:"overview",label:`${P("analytics.overviewTab")} (${N.length})`,icon:V=><Z color={V?e.white:e.grayText}size={12}/>},{key:"json",label:"JSON Payload",icon:V=><Me color={V?e.white:e.grayText}size={12}/>}];return<Te style={r.scroll}contentContainerStyle={r.content}showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never"automaticallyAdjustContentInsets={!1}>
+import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView as Te,StyleSheet as Ve,Text as B,TextInput as Be,View as C}from"react-native";import G from"./CopyButton";import Se from"./ShareButton";import Y from"./JsonViewer";import Ie from"./SegmentedTabs";import Q from"./HighlightText";import Pe from"./AnimatedEntrance";import{AppFonts as S}from"../styles/AppFonts";import{AppColors as e}from"../styles/AppColors";import{getSize as Re,formatDateTime as De}from"../helpers";import{shareAnalyticsReport as We}from"../helpers/shareFormatter";import{getEventCategory as He}from"../helpers/gaAnalyticsRegistry";import{useTranslation as Fe}from"../i18n";import{SparkleIcon as X,ClockIcon as Ne,SearchIcon as Ae,ClearIcon as Oe,LayersIcon as Ee,CartIcon as Ke,GlobeIcon as Le,BoltIcon as Me,PinIcon as $e,MoneyIcon as _e,PrettyIcon as Je,TableIcon as Z,DocIcon as Ue,PackageIcon as Ge}from"./NetworkIcons";const Ye=({event:T})=>{const{t:P}=Fe(),[A,ee]=q("overview"),[R,v]=q(""),k=z(()=>T.params??{},[T.params]),F=z(()=>T.userProperties??{},[T.userProperties]),N=z(()=>Object.keys(k),[k]),D=z(()=>Object.keys(F),[F]),M=z(()=>He(T.name,k),[T.name,k]),O=z(()=>({name:T.name,timestamp:T.timestamp,source:T.source,...T.screenName?{screenName:T.screenName}:{},...T.screenClass?{screenClass:T.screenClass}:{},...T.userId?{userId:T.userId}:{},...T.sessionId?{sessionId:T.sessionId}:{},...T.trackingId?{trackingId:T.trackingId}:{},params:k,...D.length>0?{userProperties:F}:{}}),[T,k,D.length,F]),E=z(()=>{const V=k.value??k.price,I=k.currency??"USD";return V!=null&&!isNaN(Number(V))?{amount:Number(V).toFixed(2),currency:String(I).toUpperCase()}:null},[k]),$=z(()=>Array.isArray(k.items)?k.items.length:null,[k.items]),_=z(()=>T.screenName||k.firebase_screen||k.screen_name||k.page_title||T.screenClass||k.firebase_screen_class,[T.screenName,T.screenClass,k]),J=z(()=>{const V=Object.entries(k);if(!R.trim())return V;const I=R.toLowerCase();return V.filter(([K,W])=>{const L=typeof W=="object"?JSON.stringify(W):String(W);return K.toLowerCase().includes(I)||L.toLowerCase().includes(I)})},[k,R]),H=z(()=>{switch(M){case"ecommerce":return{label:P("analytics.ecommerceCategory"),color:e.amber700,bg:e.amber100,border:e.amber200,icon:V=><Ke color={V}size={11}/>};case"page_view":return{label:P("analytics.screensCategory"),color:e.sky600,bg:e.sky100,border:e.sky400,icon:V=><Le color={V}size={11}/>};case"system":return{label:P("analytics.systemCategory"),color:e.purple,bg:e.purple100,border:e.purple200,icon:V=><Me color={V}size={11}/>};default:return{label:P("analytics.customCategory"),color:e.brandPurple,bg:e.purple100,border:e.purple200,icon:V=><X color={V}size={11}/>}}},[M,P]),re=[{key:"overview",label:`${P("analytics.overviewTab")} (${N.length})`,icon:V=><Z color={V?e.white:e.grayText}size={12}/>},{key:"json",label:"JSON Payload",icon:V=><Je color={V?e.white:e.grayText}size={12}/>}];return<Te style={r.scroll}contentContainerStyle={r.content}showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never"automaticallyAdjustContentInsets={!1}>
       
       
       <C style={r.heroCard}>
@@ -30,7 +30,10 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
           </C>
 
           
-          <G value={JSON.stringify(A,null,2)}label={P("analytics.eventDetails")}/>
+          <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+            <Se onShare={()=>We(T)}/>
+            <G value={JSON.stringify(O,null,2)}label={P("analytics.eventDetails")}/>
+          </C>
         </C>
 
         
@@ -43,14 +46,14 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
         
         <C style={r.metaRow}>
           <C style={r.timePill}>
-            <De color={e.purple}size={11}/>
+            <Ne color={e.purple}size={11}/>
             <B style={r.timeText}>
-              {Pe(T.timestamp)}
+              {De(T.timestamp)}
             </B>
           </C>
 
           {_&&<C style={r.screenPill}>
-              <Ke color={e.sky600}size={11}/>
+              <$e color={e.sky600}size={11}/>
               <B style={r.screenText}numberOfLines={1}>
                 {String(_)}
               </B>
@@ -64,25 +67,25 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
             <B style={r.metricValue}>{N.length}</B>
           </C>
 
-          {W.length>0&&<C style={r.metricPill}>
+          {D.length>0&&<C style={r.metricPill}>
               <B style={r.metricLabel}>User Props:</B>
-              <B style={r.metricValue}>{W.length}</B>
+              <B style={r.metricValue}>{D.length}</B>
             </C>}
 
           <C style={r.metricPill}>
             <B style={r.metricLabel}>Size:</B>
-            <B style={r.metricValue}>{ze(A)}</B>
+            <B style={r.metricValue}>{Re(O)}</B>
           </C>
 
           {E&&<C style={r.revenuePill}>
-              <Le color={e.emerald600}size={11}/>
+              <_e color={e.emerald600}size={11}/>
               <B style={r.revenueValue}>
                 ${E.amount} {E.currency}
               </B>
             </C>}
 
           {$!==null&&<C style={r.itemsPill}>
-              <_e size={12}color={e.blue700}/>
+              <Ge size={12}color={e.blue700}/>
               <B style={r.itemsValue}>
                 {$} items
               </B>
@@ -92,15 +95,15 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
 
       
       <C style={r.tabsWrap}>
-        <Se tabs={re}activeKey={O}onChange={V=>ee(V)}/>
+        <Ie tabs={re}activeKey={A}onChange={V=>ee(V)}/>
       </C>
 
       
-      {O==="overview"&&<C style={r.tabContent}>
+      {A==="overview"&&<C style={r.tabContent}>
           
           {(T.userId||T.sessionId||T.trackingId)&&<C style={r.sectionCard}>
               <C style={r.sectionHeader}>
-                <Ne color={e.purple}size={12}/>
+                <Ee color={e.purple}size={12}/>
                 <B style={r.sectionTitle}>SESSION & IDENTITY</B>
               </C>
               <C style={r.sectionBody}>
@@ -135,15 +138,15 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
 
             
             {N.length>4&&<C style={r.searchBar}>
-                <He color={e.grayTextWeak}size={13}/>
+                <Ae color={e.grayTextWeak}size={13}/>
                 <Be placeholder="Filter parameters by key or value..."placeholderTextColor={e.grayTextWeak}value={R}onChangeText={v}style={r.searchInput}autoCorrect={!1}autoCapitalize="none"/>
                 {R.length>0&&<Ce onPress={()=>v("")}hitSlop={8}>
-                    <Fe color={e.grayTextWeak}size={13}/>
+                    <Oe color={e.grayTextWeak}size={13}/>
                   </Ce>}
               </C>}
 
             {N.length===0?<C style={r.emptyParamsBox}>
-                <$e color={e.grayTextWeak}size={16}/>
+                <Ue color={e.grayTextWeak}size={16}/>
                 <B style={r.emptyParamsText}>
                   No custom parameters recorded for this event.
                 </B>
@@ -152,7 +155,7 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
                   No parameters matching "{R}"
                 </B>
               </C>:<C style={r.paramList}>
-                {J.map(([V,I],K)=>{const D=typeof I=="object"&&I!==null,L=Array.isArray(I);let j=typeof I;I===null?j="null":L?j=`array [${I.length}]`:D&&(j="object");const U=D?JSON.stringify(I,null,2):String(I),te=V==="value"||V==="price"||V==="currency"||V==="screen_name"||V==="item_id"||V==="item_name";return<Ie key={V}index={K}distance={4}>
+                {J.map(([V,I],K)=>{const W=typeof I=="object"&&I!==null,L=Array.isArray(I);let j=typeof I;I===null?j="null":L?j=`array [${I.length}]`:W&&(j="object");const U=W?JSON.stringify(I,null,2):String(I),te=V==="value"||V==="price"||V==="currency"||V==="screen_name"||V==="item_id"||V==="item_name";return<Pe key={V}index={K}distance={4}>
                       <C style={r.paramCard}>
                         
                         <C style={r.paramCardHeader}>
@@ -170,23 +173,23 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
 
                         
                         <C style={r.paramValBox}>
-                          {D?<Y data={I}search={R}hideTabs wrap/>:<Q text={U}search={R}style={r.paramValText}highlightStyle={r.highlight}selectable/>}
+                          {W?<Y data={I}search={R}hideTabs wrap/>:<Q text={U}search={R}style={r.paramValText}highlightStyle={r.highlight}selectable/>}
                         </C>
                       </C>
-                    </Ie>})}
+                    </Pe>})}
               </C>}
           </C>
 
           
-          {W.length>0&&<C style={r.sectionCard}>
+          {D.length>0&&<C style={r.sectionCard}>
               <C style={r.sectionHeader}>
                 <X color={e.purple}size={12}/>
                 <B style={r.sectionTitle}>
-                  USER PROPERTIES SNAPSHOT ({W.length})
+                  USER PROPERTIES SNAPSHOT ({D.length})
                 </B>
               </C>
               <C style={r.sectionBody}>
-                {W.map(V=><C key={V}style={r.kvRow}>
+                {D.map(V=><C key={V}style={r.kvRow}>
                     <B style={r.kvKey}>{V}:</B>
                     <B style={r.kvVal}selectable>
                       {String(F[V])}
@@ -197,7 +200,7 @@ import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView
         </C>}
 
       
-      {O==="json"&&<C style={r.jsonContainer}>
-          <Y data={A}defaultExpandDepth={2}fullHeight/>
+      {A==="json"&&<C style={r.jsonContainer}>
+          <Y data={O}defaultExpandDepth={2}fullHeight/>
         </C>}
-    </Te>},r=Ve.create({scroll:{flex:1,backgroundColor:e.grayBackground},content:{paddingTop:12,paddingBottom:40,paddingHorizontal:12},heroCard:{backgroundColor:e.white,borderRadius:12,padding:14,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:4,elevation:2,marginBottom:12},heroTopRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:10},idBadge:{paddingHorizontal:6,paddingVertical:2.5,borderRadius:5,backgroundColor:`${e.slate500}12`,borderWidth:1,borderColor:`${e.slate500}22`},idBadgeText:{fontFamily:S.interBold,fontSize:10,color:e.grayTextWeak,letterSpacing:.2},sourceBadge:{flexDirection:"row",alignItems:"center",gap:4.5,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1},sourceDot:{width:6,height:6,borderRadius:3},sourceBadgeText:{fontFamily:S.interBold,fontSize:9.5,letterSpacing:.4},catBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1},catBadgeText:{fontFamily:S.interBold,fontSize:9.5,letterSpacing:.3},titleRow:{marginBottom:8},eventTitle:{fontFamily:S.interBold,fontSize:16,color:e.primaryBlack,lineHeight:22},metaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",marginBottom:10},timePill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${e.purple}14`,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:`${e.purple}2E`},timeText:{fontFamily:S.interMedium,fontSize:10.5,color:e.purple},screenPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${e.sky500}14`,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:`${e.sky500}2E`,maxWidth:220},screenText:{fontFamily:S.interMedium,fontSize:10.5,color:e.sky600},metricsBar:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",paddingTop:8,borderTopWidth:1,borderTopColor:e.dividerColor},metricPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.grayBackground,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.dividerColor},metricLabel:{fontFamily:S.interMedium,fontSize:10.5,color:e.grayTextWeak},metricValue:{fontFamily:S.interBold,fontSize:10.5,color:e.primaryBlack},revenuePill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.emeraldBg,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.emeraldBorder},revenueValue:{fontFamily:S.interBold,fontSize:10.5,color:e.greenSuccessDark},itemsPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.blueTintBg,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.sky100},itemsValue:{fontFamily:S.interBold,fontSize:10.5,color:e.blue700},tabsWrap:{marginBottom:12},tabContent:{gap:12},sectionCard:{backgroundColor:e.white,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:4,elevation:2},sectionHeader:{flexDirection:"row",alignItems:"center",gap:6,marginBottom:10,paddingBottom:6,borderBottomWidth:1,borderBottomColor:e.dividerColor},sectionHeaderBetween:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:10,paddingBottom:6,borderBottomWidth:1,borderBottomColor:e.dividerColor},sectionTitle:{fontFamily:S.interBold,fontSize:11,color:e.slate700,letterSpacing:.4},sectionSubtitle:{fontFamily:S.interMedium,fontSize:10,color:e.grayTextWeak},sectionBody:{gap:6},kvRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:3},kvKey:{fontFamily:S.interMedium,fontSize:11,color:e.grayTextWeak},kvVal:{fontFamily:S.interBold,fontSize:11,color:e.primaryBlack},searchBar:{flexDirection:"row",alignItems:"center",backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:8,paddingVertical:5,borderWidth:1,borderColor:e.dividerColor,marginBottom:10,gap:6},searchInput:{flex:1,fontFamily:S.interRegular,fontSize:11,color:e.primaryBlack,paddingVertical:0},emptyParamsBox:{alignItems:"center",justifyContent:"center",paddingVertical:20,gap:6},emptyParamsText:{fontFamily:S.interMedium,fontSize:11,color:e.grayTextWeak},paramList:{gap:8},paramCard:{backgroundColor:e.grayBackground,borderRadius:8,padding:9,borderWidth:1,borderColor:e.dividerColor},paramCardHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4},paramKeyText:{fontFamily:S.interBold,fontSize:11.5,color:e.primaryBlack},paramKeyHighlighted:{color:e.brandPurple},typeBadge:{backgroundColor:e.slate200,paddingHorizontal:5,paddingVertical:1.5,borderRadius:3},typeBadgeText:{fontFamily:S.interBold,fontSize:8.5,color:e.slate700,letterSpacing:.3},paramValBox:{marginTop:2},paramValText:{fontFamily:S.interRegular,fontSize:11,color:e.slate700,lineHeight:16},jsonContainer:{borderRadius:12,borderWidth:1,borderColor:e.dividerColor,overflow:"hidden",backgroundColor:e.white,minHeight:300},highlight:{backgroundColor:e.yellow200,color:e.yellow800,fontFamily:S.interBold}});export default Je;
+    </Te>},r=Ve.create({scroll:{flex:1,backgroundColor:e.grayBackground},content:{paddingTop:12,paddingBottom:40,paddingHorizontal:12},heroCard:{backgroundColor:e.white,borderRadius:12,padding:14,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:4,elevation:2,marginBottom:12},heroTopRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:10},idBadge:{paddingHorizontal:6,paddingVertical:2.5,borderRadius:5,backgroundColor:`${e.slate500}12`,borderWidth:1,borderColor:`${e.slate500}22`},idBadgeText:{fontFamily:S.interBold,fontSize:10,color:e.grayTextWeak,letterSpacing:.2},sourceBadge:{flexDirection:"row",alignItems:"center",gap:4.5,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1},sourceDot:{width:6,height:6,borderRadius:3},sourceBadgeText:{fontFamily:S.interBold,fontSize:9.5,letterSpacing:.4},catBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1},catBadgeText:{fontFamily:S.interBold,fontSize:9.5,letterSpacing:.3},titleRow:{marginBottom:8},eventTitle:{fontFamily:S.interBold,fontSize:16,color:e.primaryBlack,lineHeight:22},metaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",marginBottom:10},timePill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${e.purple}14`,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:`${e.purple}2E`},timeText:{fontFamily:S.interMedium,fontSize:10.5,color:e.purple},screenPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${e.sky500}14`,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:`${e.sky500}2E`,maxWidth:220},screenText:{fontFamily:S.interMedium,fontSize:10.5,color:e.sky600},metricsBar:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",paddingTop:8,borderTopWidth:1,borderTopColor:e.dividerColor},metricPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.grayBackground,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.dividerColor},metricLabel:{fontFamily:S.interMedium,fontSize:10.5,color:e.grayTextWeak},metricValue:{fontFamily:S.interBold,fontSize:10.5,color:e.primaryBlack},revenuePill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.emeraldBg,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.emeraldBorder},revenueValue:{fontFamily:S.interBold,fontSize:10.5,color:e.greenSuccessDark},itemsPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.blueTintBg,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.sky100},itemsValue:{fontFamily:S.interBold,fontSize:10.5,color:e.blue700},tabsWrap:{marginBottom:12},tabContent:{gap:12},sectionCard:{backgroundColor:e.white,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:4,elevation:2},sectionHeader:{flexDirection:"row",alignItems:"center",gap:6,marginBottom:10,paddingBottom:6,borderBottomWidth:1,borderBottomColor:e.dividerColor},sectionHeaderBetween:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:10,paddingBottom:6,borderBottomWidth:1,borderBottomColor:e.dividerColor},sectionTitle:{fontFamily:S.interBold,fontSize:11,color:e.slate700,letterSpacing:.4},sectionSubtitle:{fontFamily:S.interMedium,fontSize:10,color:e.grayTextWeak},sectionBody:{gap:6},kvRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:3},kvKey:{fontFamily:S.interMedium,fontSize:11,color:e.grayTextWeak},kvVal:{fontFamily:S.interBold,fontSize:11,color:e.primaryBlack},searchBar:{flexDirection:"row",alignItems:"center",backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:8,paddingVertical:5,borderWidth:1,borderColor:e.dividerColor,marginBottom:10,gap:6},searchInput:{flex:1,fontFamily:S.interRegular,fontSize:11,color:e.primaryBlack,paddingVertical:0},emptyParamsBox:{alignItems:"center",justifyContent:"center",paddingVertical:20,gap:6},emptyParamsText:{fontFamily:S.interMedium,fontSize:11,color:e.grayTextWeak},paramList:{gap:8},paramCard:{backgroundColor:e.grayBackground,borderRadius:8,padding:9,borderWidth:1,borderColor:e.dividerColor},paramCardHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4},paramKeyText:{fontFamily:S.interBold,fontSize:11.5,color:e.primaryBlack},paramKeyHighlighted:{color:e.brandPurple},typeBadge:{backgroundColor:e.slate200,paddingHorizontal:5,paddingVertical:1.5,borderRadius:3},typeBadgeText:{fontFamily:S.interBold,fontSize:8.5,color:e.slate700,letterSpacing:.3},paramValBox:{marginTop:2},paramValText:{fontFamily:S.interRegular,fontSize:11,color:e.slate700,lineHeight:16},jsonContainer:{borderRadius:12,borderWidth:1,borderColor:e.dividerColor,overflow:"hidden",backgroundColor:e.white,minHeight:300},highlight:{backgroundColor:e.yellow200,color:e.yellow800,fontFamily:S.interBold}});export default Ye;

package/dist/esm/components/AppHeaderLogo.js

@@ -1,7 +1,5 @@
-import b from"react";import{Image as R,StyleSheet as S,View as C}from"react-native";import V from"./BrandSquareIcon";import{AppColors as t}from"../styles/AppColors";export const AppHeaderLogo=({size:e=46,customIcon:o})=>{const r=Math.round(e*.23);if(o){if(b.isValidElement(o)){const p=b.cloneElement(o,{size:e,width:e,height:e});return<C style={[i.container,{width:e,height:e,borderRadius:r}]}>
-          {p}
-        </C>}return<C style={[i.imageContainer,{width:e,height:e,borderRadius:r}]}>
-        <R source={o}style={[i.image,{borderRadius:r-2}]}resizeMode="cover"/>
-      </C>}return<C style={[i.container,{width:e,height:e,borderRadius:r}]}>
-      <V size={e}/>
-    </C>};const i=S.create({container:{overflow:"hidden",alignItems:"center",justifyContent:"center",borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.55)",backgroundColor:t.white,shadowColor:t.shadowColorString,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:5,elevation:4},imageContainer:{overflow:"hidden",backgroundColor:t.white,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.55)",alignItems:"center",justifyContent:"center",shadowColor:t.shadowColorString,shadowOffset:{width:0,height:2},shadowOpacity:.3,shadowRadius:4,elevation:3},image:{width:"100%",height:"100%"}});export default AppHeaderLogo;
+import o from"react";import{Image as R,StyleSheet as V,View as C}from"react-native";import S from"./BrandCircleIcon";export const AppHeaderLogo=({size:e=52,customIcon:t})=>{const r=Math.round(e*.23);if(t){if(o.isValidElement(t)){const b=o.cloneElement(t,{size:e,width:e,height:e});return<C style={[n.container,{width:e,height:e,borderRadius:r}]}>
+          {b}
+        </C>}return<C style={[n.imageContainer,{width:e,height:e,borderRadius:r}]}>
+        <R source={t}style={[n.image,{borderRadius:r}]}resizeMode="cover"/>
+      </C>}return<S size={e}/>};const n=V.create({container:{overflow:"hidden",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"},imageContainer:{overflow:"hidden",backgroundColor:"transparent",alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});export default AppHeaderLogo;

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

@@ -1,4 +1,4 @@
-import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as Ce,Pressable as Ae,ScrollView as Ie,StyleSheet as Y,Text as T,TouchableOpacity as R,View as P}from"react-native";import{useInspector as ze}from"./InspectorContext";import{AppColors as l}from"../../styles/AppColors";import{AppFonts as A}from"../../styles/AppFonts";import{getEventCategory as Be}from"../../helpers";import{FilterIcon as Ve,CloseWhite as Re,CheckIcon as L,CartIcon as We,GlobeIcon as _e,BoltIcon as Z,SparkleIcon as J,MoneyIcon as M,ClockIcon as $,HourglassIcon as Oe,FlameIcon as Ee,PinIcon as K,RepeatIcon as De,TargetGoalIcon as X,UserIcon as Q,UserCheckIcon as Fe,PackageBoxIcon as Ue,CodeBracketsIcon as Te}from"../NetworkIcons";import S from"../TouchableScale";const Je={categories:new Set(["all"]),screens:new Set,sources:new Set(["all"]),userTypes:new Set(["all"]),timeWindow:"all",payloadComplexity:"all",hasRevenue:!1,hasItems:!1,hasUserProps:!1,hasParams:!1,onlyDuplicates:!1,onlyConversions:!1,sortBy:"time_desc"},He=({visible:W,onClose:G})=>{const{analyticsEvents:z,analyticsSearch:_,analyticsFilters:v,setAnalyticsFilters:pe}=ze(),[t,C]=ve(()=>({...v,categories:new Set(v.categories),screens:new Set(v.screens),sources:new Set(v.sources||["all"]),userTypes:new Set(v.userTypes||["all"])}));Se(()=>{W&&C({...v,categories:new Set(v.categories),screens:new Set(v.screens),sources:new Set(v.sources||["all"]),userTypes:new Set(v.userTypes||["all"])})},[W,v]);const O=q(()=>{const s=new Set;for(const i of z){const r=i.screenName||i.params?.firebase_screen||i.params?.screen_name||i.params?.firebase_screen_class||i.screenClass;r&&typeof r=="string"&&r.trim()!==""&&s.add(r.trim())}return Array.from(s)},[z]),I=s=>{C(i=>{const r=new Set(i.categories);return s==="all"?{...i,categories:new Set(["all"])}:(r.delete("all"),r.has(s)?(r.delete(s),r.size===0&&r.add("all")):r.add(s),{...i,categories:r})})},me=s=>{C(i=>{const r=new Set(i.screens);return r.has(s)?r.delete(s):r.add(s),{...i,screens:r}})},E=s=>{C(i=>{const r=new Set(i.sources);return s==="all"?{...i,sources:new Set(["all"])}:(r.delete("all"),r.has(s)?(r.delete(s),r.size===0&&r.add("all")):r.add(s),{...i,sources:r})})},D=s=>{C(i=>{const r=new Set(i.userTypes);return s==="all"?{...i,userTypes:new Set(["all"])}:(r.delete("all"),r.has(s)?(r.delete(s),r.size===0&&r.add("all")):r.add(s),{...i,userTypes:r})})},k=s=>{C(i=>({...i,[s]:!i[s]}))},Pe=s=>{C(i=>({...i,timeWindow:s}))},we=s=>{C(i=>({...i,payloadComplexity:s}))},B=s=>{C(i=>({...i,sortBy:s}))},ge=()=>{C({categories:new Set(["all"]),screens:new Set,sources:new Set(["all"]),userTypes:new Set(["all"]),timeWindow:"all",payloadComplexity:"all",hasRevenue:!1,hasItems:!1,hasUserProps:!1,hasParams:!1,onlyDuplicates:!1,onlyConversions:!1,sortBy:"time_desc"})},xe=()=>{pe({...t,categories:new Set(t.categories),screens:new Set(t.screens),sources:new Set(t.sources),userTypes:new Set(t.userTypes)}),G()},V=()=>{C({...v,categories:new Set(v.categories),screens:new Set(v.screens),sources:new Set(v.sources||["all"]),userTypes:new Set(v.userTypes||["all"])}),G()},be=q(()=>{let s=z;if(_){const i=_.toLowerCase();s=s.filter(r=>r.name.toLowerCase().includes(i)||JSON.stringify(r.params||{}).toLowerCase().includes(i)||(r.screenName??"").toLowerCase().includes(i)||(r.pageTitle??"").toLowerCase().includes(i))}if(t.categories.size>0&&!t.categories.has("all")&&(s=s.filter(i=>{const r=Be(i.name);return t.categories.has(r)})),t.timeWindow!=="all"){const i=Date.now(),r=t.timeWindow==="1m"?i-60*1e3:t.timeWindow==="5m"?i-300*1e3:t.timeWindow==="15m"?i-900*1e3:i-3600*1e3;s=s.filter(N=>N.timestamp>=r)}if(t.sources.size>0&&!t.sources.has("all")&&(s=s.filter(i=>t.sources.has(i.source||"manual"))),t.userTypes.size>0&&!t.userTypes.has("all")&&(s=s.filter(i=>{const r=!!(i.userId&&i.userId.trim()!=="");return!!(t.userTypes.has("identified")&&r||t.userTypes.has("anonymous")&&!r)})),t.payloadComplexity!=="all"&&(s=s.filter(i=>{const r=i.params?Object.keys(i.params).length:0;return t.payloadComplexity==="none"?r===0:t.payloadComplexity==="simple"?r>=1&&r<=5:t.payloadComplexity==="heavy"?r>5:!0})),t.onlyConversions){const i=["purchase","item_purchase","ecommerce_purchase","sign_up","login","lead","generate_lead","tutorial_complete","add_payment_info","begin_checkout"];s=s.filter(r=>i.some(N=>r.name.toLowerCase().includes(N)))}return t.screens.size>0&&(s=s.filter(i=>{const r=i.screenName||i.params?.firebase_screen||i.params?.screen_name||i.params?.firebase_screen_class||i.screenClass||"";return t.screens.has(r)})),t.hasRevenue&&(s=s.filter(i=>{const r=i.params?.value??i.params?.price;return r!=null&&Number(r)>0})),t.hasItems&&(s=s.filter(i=>Array.isArray(i.params?.items)&&i.params.items.length>0)),t.hasUserProps&&(s=s.filter(i=>i.userProperties&&Object.keys(i.userProperties).length>0)),t.hasParams&&(s=s.filter(i=>i.params&&Object.keys(i.params).length>0)),s.length},[z,_,t]),F=t.categories.has("all")||t.categories.size===0,U=t.sources.has("all")||t.sources.size===0,H=t.userTypes.has("all")||t.userTypes.size===0;return<Ce visible={W}transparent animationType="fade"onRequestClose={V}>
+import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as Ce,Pressable as Ae,ScrollView as Ie,StyleSheet as Y,Text as T,TouchableOpacity as R,View as P}from"react-native";import{useInspector as ze}from"./InspectorContext";import{AppColors as l}from"../../styles/AppColors";import{AppFonts as A}from"../../styles/AppFonts";import{getEventCategory as Be}from"../../helpers";import{FilterIcon as Ve,CloseWhite as Re,CheckIcon as L,CartIcon as We,GlobeIcon as Oe,BoltIcon as Z,SparkleIcon as J,MoneyIcon as M,ClockIcon as $,HourglassIcon as _e,FlameIcon as Ee,PinIcon as K,RepeatIcon as De,TargetGoalIcon as X,UserIcon as Q,UserCheckIcon as Fe,PackageBoxIcon as He,CodeBracketsIcon as Te}from"../NetworkIcons";import S from"../TouchableScale";const Ne=({visible:W,onClose:G})=>{const{analyticsEvents:z,analyticsSearch:O,analyticsFilters:v,setAnalyticsFilters:pe}=ze(),[t,C]=ve(()=>({...v,categories:new Set(v.categories),screens:new Set(v.screens),sources:new Set(v.sources||["all"]),userTypes:new Set(v.userTypes||["all"])}));Se(()=>{W&&C({...v,categories:new Set(v.categories),screens:new Set(v.screens),sources:new Set(v.sources||["all"]),userTypes:new Set(v.userTypes||["all"])})},[W,v]);const _=q(()=>{const s=new Set;for(const i of z){const r=i.screenName||i.params?.firebase_screen||i.params?.screen_name||i.params?.firebase_screen_class||i.screenClass;r&&typeof r=="string"&&r.trim()!==""&&s.add(r.trim())}return Array.from(s)},[z]),I=s=>{C(i=>{const r=new Set(i.categories);return s==="all"?{...i,categories:new Set(["all"])}:(r.delete("all"),r.has(s)?(r.delete(s),r.size===0&&r.add("all")):r.add(s),{...i,categories:r})})},me=s=>{C(i=>{const r=new Set(i.screens);return r.has(s)?r.delete(s):r.add(s),{...i,screens:r}})},E=s=>{C(i=>{const r=new Set(i.sources);return s==="all"?{...i,sources:new Set(["all"])}:(r.delete("all"),r.has(s)?(r.delete(s),r.size===0&&r.add("all")):r.add(s),{...i,sources:r})})},D=s=>{C(i=>{const r=new Set(i.userTypes);return s==="all"?{...i,userTypes:new Set(["all"])}:(r.delete("all"),r.has(s)?(r.delete(s),r.size===0&&r.add("all")):r.add(s),{...i,userTypes:r})})},k=s=>{C(i=>({...i,[s]:!i[s]}))},Pe=s=>{C(i=>({...i,timeWindow:s}))},we=s=>{C(i=>({...i,payloadComplexity:s}))},B=s=>{C(i=>({...i,sortBy:s}))},ge=()=>{C({categories:new Set(["all"]),screens:new Set,sources:new Set(["all"]),userTypes:new Set(["all"]),timeWindow:"all",payloadComplexity:"all",hasRevenue:!1,hasItems:!1,hasUserProps:!1,hasParams:!1,onlyDuplicates:!1,onlyConversions:!1,sortBy:"time_desc"})},xe=()=>{pe({...t,categories:new Set(t.categories),screens:new Set(t.screens),sources:new Set(t.sources),userTypes:new Set(t.userTypes)}),G()},V=()=>{C({...v,categories:new Set(v.categories),screens:new Set(v.screens),sources:new Set(v.sources||["all"]),userTypes:new Set(v.userTypes||["all"])}),G()},be=q(()=>{let s=z;if(O){const i=O.toLowerCase();s=s.filter(r=>r.name.toLowerCase().includes(i)||JSON.stringify(r.params||{}).toLowerCase().includes(i)||(r.screenName??"").toLowerCase().includes(i)||(r.pageTitle??"").toLowerCase().includes(i))}if(t.categories.size>0&&!t.categories.has("all")&&(s=s.filter(i=>{const r=Be(i.name);return t.categories.has(r)})),t.timeWindow!=="all"){const i=Date.now(),r=t.timeWindow==="1m"?i-60*1e3:t.timeWindow==="5m"?i-300*1e3:t.timeWindow==="15m"?i-900*1e3:i-3600*1e3;s=s.filter(U=>U.timestamp>=r)}if(t.sources.size>0&&!t.sources.has("all")&&(s=s.filter(i=>t.sources.has(i.source||"manual"))),t.userTypes.size>0&&!t.userTypes.has("all")&&(s=s.filter(i=>{const r=!!(i.userId&&i.userId.trim()!=="");return!!(t.userTypes.has("identified")&&r||t.userTypes.has("anonymous")&&!r)})),t.payloadComplexity!=="all"&&(s=s.filter(i=>{const r=i.params?Object.keys(i.params).length:0;return t.payloadComplexity==="none"?r===0:t.payloadComplexity==="simple"?r>=1&&r<=5:t.payloadComplexity==="heavy"?r>5:!0})),t.onlyConversions){const i=["purchase","item_purchase","ecommerce_purchase","sign_up","login","lead","generate_lead","tutorial_complete","add_payment_info","begin_checkout"];s=s.filter(r=>i.some(U=>r.name.toLowerCase().includes(U)))}return t.screens.size>0&&(s=s.filter(i=>{const r=i.screenName||i.params?.firebase_screen||i.params?.screen_name||i.params?.firebase_screen_class||i.screenClass||"";return t.screens.has(r)})),t.hasRevenue&&(s=s.filter(i=>{const r=i.params?.value??i.params?.price;return r!=null&&Number(r)>0})),t.hasItems&&(s=s.filter(i=>Array.isArray(i.params?.items)&&i.params.items.length>0)),t.hasUserProps&&(s=s.filter(i=>i.userProperties&&Object.keys(i.userProperties).length>0)),t.hasParams&&(s=s.filter(i=>i.params&&Object.keys(i.params).length>0)),s.length},[z,O,t]),F=t.categories.has("all")||t.categories.size===0,H=t.sources.has("all")||t.sources.size===0,N=t.userTypes.has("all")||t.userTypes.size===0;return<Ce visible={W}transparent animationType="fade"onRequestClose={V}>
       <P style={e.backdrop}>
         <Ae style={Y.absoluteFill}onPress={V}/>
 
@@ -67,7 +67,7 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
                 </S>
 
                 <S onPress={()=>I("page_view")}style={[e.filterPill,t.categories.has("page_view")&&e.filterPillActive]}>
-                  <_e color={t.categories.has("page_view")?l.white:l.sky600}size={13}/>
+                  <Oe color={t.categories.has("page_view")?l.white:l.sky600}size={13}/>
                   <T style={[e.filterPillText,t.categories.has("page_view")&&e.filterPillTextActive]}>
                     Screens & Pages
                   </T>
@@ -113,7 +113,7 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
                 </S>
 
                 <S onPress={()=>k("hasItems")}style={[e.filterPill,t.hasItems&&e.filterPillActive]}>
-                  <Ue color={t.hasItems?l.white:l.amber700}size={13}/>
+                  <He color={t.hasItems?l.white:l.amber700}size={13}/>
                   <T style={[e.filterPillText,t.hasItems&&e.filterPillTextActive]}>
                     With Items Payload
                   </T>
@@ -149,9 +149,9 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
                 <T style={e.sectionTitle}>USER IDENTIFICATION</T>
               </P>
               <P style={e.chipsWrap}>
-                <S onPress={()=>D("all")}style={[e.filterPill,H&&e.filterPillActive]}>
-                  {H&&<L color={l.white}size={12}/>}
-                  <T style={[e.filterPillText,H&&e.filterPillTextActive]}>
+                <S onPress={()=>D("all")}style={[e.filterPill,N&&e.filterPillActive]}>
+                  {N&&<L color={l.white}size={12}/>}
+                  <T style={[e.filterPillText,N&&e.filterPillTextActive]}>
                     All Users
                   </T>
                 </S>
@@ -179,9 +179,9 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
                 <T style={e.sectionTitle}>EVENT SOURCE</T>
               </P>
               <P style={e.chipsWrap}>
-                <S onPress={()=>E("all")}style={[e.filterPill,U&&e.filterPillActive]}>
-                  {U&&<L color={l.white}size={12}/>}
-                  <T style={[e.filterPillText,U&&e.filterPillTextActive]}>
+                <S onPress={()=>E("all")}style={[e.filterPill,H&&e.filterPillActive]}>
+                  {H&&<L color={l.white}size={12}/>}
+                  <T style={[e.filterPillText,H&&e.filterPillTextActive]}>
                     All Sources
                   </T>
                 </S>
@@ -216,15 +216,15 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
             </P>
 
             
-            {O.length>0&&<P style={e.section}>
+            {_.length>0&&<P style={e.section}>
                 <P style={e.sectionHeaderRow}>
                   <K color={l.grayTextWeak}size={12}/>
                   <T style={e.sectionTitle}>
-                    DISCOVERED SCREENS ({O.length})
+                    DISCOVERED SCREENS ({_.length})
                   </T>
                 </P>
                 <P style={e.chipsWrap}>
-                  {O.map(s=>{const i=t.screens.has(s);return<S key={s}onPress={()=>me(s)}style={[e.filterPill,i&&e.filterPillActive]}>
+                  {_.map(s=>{const i=t.screens.has(s);return<S key={s}onPress={()=>me(s)}style={[e.filterPill,i&&e.filterPillActive]}>
                         <K color={i?l.white:l.amber700}size={12}/>
                         <T style={[e.filterPillText,i&&e.filterPillTextActive]}>
                           {s}
@@ -248,7 +248,7 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
                 </S>
 
                 <S onPress={()=>B("time_asc")}style={[e.filterPill,t.sortBy==="time_asc"&&e.filterPillActive]}>
-                  <Oe color={t.sortBy==="time_asc"?l.white:l.grayText}size={12}/>
+                  <_e color={t.sortBy==="time_asc"?l.white:l.grayText}size={12}/>
                   <T style={[e.filterPillText,t.sortBy==="time_asc"&&e.filterPillTextActive]}>
                     Oldest First
                   </T>
@@ -285,4 +285,4 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
           </P>
         </P>
       </P>
-    </Ce>},e=Y.create({backdrop:{flex:1,backgroundColor:`${l.primaryBlack}85`,justifyContent:"center",alignItems:"center",padding:16},modalCard:{width:"100%",maxWidth:440,backgroundColor:l.white,borderRadius:14,borderWidth:1,borderColor:l.dividerColor,shadowColor:l.black,shadowOpacity:.18,shadowRadius:12,shadowOffset:{width:0,height:4},elevation:8,overflow:"hidden"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:14,paddingVertical:12,borderBottomWidth:1,borderBottomColor:l.dividerColor,backgroundColor:`${l.brandPurple}08`},headerIconBox:{width:28,height:28,borderRadius:7,backgroundColor:`${l.brandPurple}18`,alignItems:"center",justifyContent:"center"},headerTitle:{fontFamily:A.interBold,fontSize:13.5,color:l.primaryBlack},headerSubtitle:{fontFamily:A.interMedium,fontSize:10,color:l.grayTextWeak},resetBtn:{paddingHorizontal:8,paddingVertical:4,borderRadius:5,backgroundColor:`${l.darkOrange}14`,borderWidth:1,borderColor:`${l.darkOrange}30`},resetBtnText:{fontFamily:A.interBold,fontSize:10,color:l.darkOrange},closeBtn:{width:24,height:24,borderRadius:12,backgroundColor:`${l.primaryBlack}18`,alignItems:"center",justifyContent:"center"},scrollContent:{padding:14,gap:14},section:{gap:7},sectionHeaderRow:{flexDirection:"row",alignItems:"center",gap:5},sectionTitle:{fontFamily:A.interBold,fontSize:9.5,color:l.grayTextWeak,letterSpacing:.5},chipsWrap:{flexDirection:"row",flexWrap:"wrap",gap:6.5},filterPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:9,paddingVertical:5.5,borderRadius:7,backgroundColor:l.grayBackground,borderWidth:1,borderColor:l.dividerColor},filterPillActive:{backgroundColor:l.brandPurple,borderColor:l.brandPurple,shadowColor:l.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:3,elevation:2},filterPillText:{fontFamily:A.interMedium,fontSize:11,color:l.primaryBlack},filterPillTextActive:{color:l.white,fontFamily:A.interBold},footer:{flexDirection:"row",alignItems:"center",gap:10,paddingHorizontal:14,paddingVertical:12,borderTopWidth:1,borderTopColor:l.dividerColor,backgroundColor:l.grayBackground},discardBtn:{flex:1,paddingVertical:9.5,borderRadius:8,borderWidth:1,borderColor:l.dividerColor,backgroundColor:l.white,alignItems:"center",justifyContent:"center"},discardBtnText:{fontFamily:A.interBold,fontSize:12.5,color:l.grayTextStrong},applyBtn:{flex:2,backgroundColor:l.brandPurple,paddingVertical:9.5,borderRadius:8,alignItems:"center",justifyContent:"center",shadowColor:l.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:3,elevation:2},applyBtnText:{fontFamily:A.interBold,fontSize:12.5,color:l.white}});export default He;
+    </Ce>},e=Y.create({backdrop:{flex:1,backgroundColor:`${l.primaryBlack}85`,justifyContent:"center",alignItems:"center",padding:16},modalCard:{width:"100%",maxWidth:440,backgroundColor:l.white,borderRadius:14,borderWidth:1,borderColor:l.dividerColor,shadowColor:l.black,shadowOpacity:.18,shadowRadius:12,shadowOffset:{width:0,height:4},elevation:8,overflow:"hidden"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:14,paddingVertical:12,borderBottomWidth:1,borderBottomColor:l.dividerColor,backgroundColor:`${l.brandPurple}08`},headerIconBox:{width:28,height:28,borderRadius:7,backgroundColor:`${l.brandPurple}18`,alignItems:"center",justifyContent:"center"},headerTitle:{fontFamily:A.interBold,fontSize:13.5,color:l.primaryBlack},headerSubtitle:{fontFamily:A.interMedium,fontSize:10,color:l.grayTextWeak},resetBtn:{paddingHorizontal:8,paddingVertical:4,borderRadius:5,backgroundColor:`${l.darkOrange}14`,borderWidth:1,borderColor:`${l.darkOrange}30`},resetBtnText:{fontFamily:A.interBold,fontSize:10,color:l.darkOrange},closeBtn:{width:24,height:24,borderRadius:12,backgroundColor:`${l.primaryBlack}18`,alignItems:"center",justifyContent:"center"},scrollContent:{padding:14,gap:14},section:{gap:7},sectionHeaderRow:{flexDirection:"row",alignItems:"center",gap:5},sectionTitle:{fontFamily:A.interBold,fontSize:9.5,color:l.grayTextWeak,letterSpacing:.5},chipsWrap:{flexDirection:"row",flexWrap:"wrap",gap:6.5},filterPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:9,paddingVertical:5.5,borderRadius:7,backgroundColor:l.grayBackground,borderWidth:1,borderColor:l.dividerColor},filterPillActive:{backgroundColor:l.brandPurple,borderColor:l.brandPurple,shadowColor:l.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:3,elevation:2},filterPillText:{fontFamily:A.interMedium,fontSize:11,color:l.primaryBlack},filterPillTextActive:{color:l.white,fontFamily:A.interBold},footer:{flexDirection:"row",alignItems:"center",gap:10,paddingHorizontal:14,paddingVertical:12,borderTopWidth:1,borderTopColor:l.dividerColor,backgroundColor:l.grayBackground},discardBtn:{flex:1,paddingVertical:9.5,borderRadius:8,borderWidth:1,borderColor:l.dividerColor,backgroundColor:l.white,alignItems:"center",justifyContent:"center"},discardBtnText:{fontFamily:A.interBold,fontSize:12.5,color:l.grayTextStrong},applyBtn:{flex:2,backgroundColor:l.brandPurple,paddingVertical:9.5,borderRadius:8,alignItems:"center",justifyContent:"center",shadowColor:l.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:3,elevation:2},applyBtnText:{fontFamily:A.interBold,fontSize:12.5,color:l.white}});export default Ne;

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

@@ -1,64 +1,60 @@
-import me,{useCallback as L,useState as X,useMemo as Y,useRef as pe}from"react";import{FlatList as Ce,Platform as Se,Pressable as Ie,ScrollView as Te,Text as _,TextInput as Pe,TouchableOpacity as $,View as C}from"react-native";import{animateNextLayout as Ae,useInspector as ze}from"./InspectorContext";import Fe from"../AnalyticsEventCard";import Le from"./AnalyticsFilterModal";import Re from"../EndOfListFooter";import Ve from"../EmptyState";import w from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as H}from"../../styles/AppFonts";import{useTranslation as Be}from"../../i18n";import Ee from"../TouchableScale";import{getEventCategory as Oe}from"../../helpers";import{LayersIcon as Ne,SearchIcon as Me,ClearIcon as _e,TrashIcon as $e,HeaderPauseIcon as He,FilterIcon as De,CartIcon as We,GlobeIcon as Ge,BoltIcon as je,SparkleIcon as Je}from"../NetworkIcons";const Qe=me.memo(()=>{const{t:D}=Be(),{analyticsEvents:W,filteredAnalyticsEvents:a,analyticsSearch:S,setAnalyticsSearch:R,analyticsFilters:V,setAnalyticsFilters:G,handleDelete:Z,selectedEvent:ee,setSelectedEvent:j,newEventIds:J,logRouteMapRef:Q,isAnalyticsLayoutReady:te,setIsAnalyticsLayoutReady:oe,isAnalyticsPaused:B,setIsAnalyticsPaused:re,isAnalyticsFilterApplied:E}=ze(),ae=pe(null),[le,q]=X(!1),[K,ne]=X(100),O=Y(()=>a.slice(0,K),[a,K]),v=Y(()=>{let e=0,r=0,o=0,I=0;for(const z of W){const A=Oe(z.name),T=z.count||1;A==="ecommerce"?e+=T:A==="page_view"?r+=T:A==="system"?o+=T:I+=T}const P=e+r+o+I;return{ecommerce:e,page_view:r,system:o,custom:I,totalCount:P}},[W]),se=L(e=>{Ae(),G(r=>{if(e==="all")return{...r,categories:new Set(["all"])};const o=new Set(r.categories);if(o.has("all"))o.delete("all"),o.add(e);else if(o.has(e))o.delete(e),o.size===0&&o.add("all");else if(o.add(e),o.has("ecommerce")&&o.has("page_view")&&o.has("system")&&o.has("custom"))return{...r,categories:new Set(["all"])};return{...r,categories:o}})},[G]),ie=L((e,r)=>e?.id?.toString()??r.toString(),[]),ce=L(({item:e,index:r})=>{const o=a[r+1],I=a[r-1],P=o?e.timestamp-o.timestamp:void 0,z=Math.floor(e.timestamp/6e4),A=I?Math.floor(I.timestamp/6e4):-1,T=r===0||z!==A;return<Fe event={e}onPress={()=>{j(e)}}isNew={J.has(e.id)}searchStr={S}isFirst={r===0}isLast={r===a.length-1}msSincePrev={P}showTimestamp={T}computedScreenName={(()=>{if(!e)return"";const F=e.screenName||e.screenClass||e.pageTitle||e.pageLocation||e.params?.firebase_screen||e.params?.screen_name||e.params?.firebase_screen_class||e.params?.screen_class;let N=typeof F=="string"?F:F?JSON.stringify(F):"";const M=Q.current.get(e.id+1e6);if(!N&&M&&M.path!=="Navigators"){const U=M.path.split(" \u2794 ");N=U[U.length-1]}return N})()}/>},[a,S,J,j,Q]),de=L((e,r)=>({length:86,offset:86*r,index:r}),[]);return<>
+import de,{useCallback as R,useState as U,useMemo as X,useRef as me}from"react";import{FlatList as Ce,Platform as we,Pressable as Se,ScrollView as Ie,Text as O,TextInput as Te,TouchableOpacity as Y,View as C}from"react-native";import{animateNextLayout as ve,useInspector as xe}from"./InspectorContext";import Ae from"../AnalyticsEventCard";import Fe from"./AnalyticsFilterModal";import Le from"../EndOfListFooter";import Pe from"../EmptyState";import I from"../../styles";import{AppColors as r}from"../../styles/AppColors";import{AppFonts as $}from"../../styles/AppFonts";import{useTranslation as Re}from"../../i18n";import Ve from"../TouchableScale";import{getEventCategory as Be}from"../../helpers";import{LayersIcon as Ee,SearchIcon as Ne,ClearIcon as Me,TrashIcon as _e,FilterIcon as Oe,CartIcon as $e,GlobeIcon as De,BoltIcon as He,SparkleIcon as We}from"../NetworkIcons";const Ge=de.memo(()=>{const{t:D}=Re(),{analyticsEvents:H,filteredAnalyticsEvents:a,analyticsSearch:w,setAnalyticsSearch:V,analyticsFilters:B,setAnalyticsFilters:W,handleDelete:Z,selectedEvent:ee,setSelectedEvent:G,newEventIds:j,logRouteMapRef:J,isAnalyticsLayoutReady:te,setIsAnalyticsLayoutReady:oe,isAnalyticsFilterApplied:E}=xe(),re=me(null),[ae,Q]=U(!1),[q,le]=U(100),N=X(()=>a.slice(0,q),[a,q]),v=X(()=>{let e=0,o=0,t=0,S=0;for(const L of H){const F=Be(L.name),T=L.count||1;F==="ecommerce"?e+=T:F==="page_view"?o+=T:F==="system"?t+=T:S+=T}const A=e+o+t+S;return{ecommerce:e,page_view:o,system:t,custom:S,totalCount:A}},[H]),ne=R(e=>{ve(),W(o=>{if(e==="all")return{...o,categories:new Set(["all"])};const t=new Set(o.categories);if(t.has("all"))t.delete("all"),t.add(e);else if(t.has(e))t.delete(e),t.size===0&&t.add("all");else if(t.add(e),t.has("ecommerce")&&t.has("page_view")&&t.has("system")&&t.has("custom"))return{...o,categories:new Set(["all"])};return{...o,categories:t}})},[W]),se=R((e,o)=>e?.id?.toString()??o.toString(),[]),ie=R(({item:e,index:o})=>{const t=a[o+1],S=a[o-1],A=t?e.timestamp-t.timestamp:void 0,L=Math.floor(e.timestamp/6e4),F=S?Math.floor(S.timestamp/6e4):-1,T=o===0||L!==F;return<Ae event={e}onPress={()=>{G(e)}}isNew={j.has(e.id)}searchStr={w}isFirst={o===0}isLast={o===a.length-1}msSincePrev={A}showTimestamp={T}computedScreenName={(()=>{if(!e)return"";const P=e.screenName||e.screenClass||e.pageTitle||e.pageLocation||e.params?.firebase_screen||e.params?.screen_name||e.params?.firebase_screen_class||e.params?.screen_class;let M=typeof P=="string"?P:P?JSON.stringify(P):"";const _=J.current.get(e.id+1e6);if(!M&&_&&_.path!=="Navigators"){const K=_.path.split(" \u2794 ");M=K[K.length-1]}return M})()}/>},[a,w,j,G,J]),ce=R((e,o)=>({length:86,offset:86*o,index:o}),[]);return<>
       
-      {ee==null&&<C style={{backgroundColor:t.white,borderBottomWidth:1,borderBottomColor:t.dividerColor,paddingBottom:6}}>
-          <C style={[w.toolbarRow,{marginTop:12,marginBottom:8}]}>
-            <C style={w.searchContainer}>
-              <Me color={t.grayTextWeak}size={16}/>
-              <Pe placeholder={D("analytics.searchPlaceholder","Search events...")}placeholderTextColor={t.grayTextWeak}value={S}onChangeText={R}style={w.searchInput}autoCorrect={!1}autoCapitalize="none"/>
-              {S.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                  <C style={{backgroundColor:`${t.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
-                    <_ style={{color:t.purple,fontSize:9.5,fontFamily:H.interBold}}>
+      {ee==null&&<C style={{backgroundColor:r.white,borderBottomWidth:1,borderBottomColor:r.dividerColor,paddingBottom:6}}>
+          <C style={[I.toolbarRow,{marginTop:12,marginBottom:8}]}>
+            <C style={I.searchContainer}>
+              <Ne color={r.grayTextWeak}size={16}/>
+              <Te placeholder={D("analytics.searchPlaceholder","Search events...")}placeholderTextColor={r.grayTextWeak}value={w}onChangeText={V}style={I.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              {w.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                  <C style={{backgroundColor:`${r.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                    <O style={{color:r.purple,fontSize:9.5,fontFamily:$.interBold}}>
                       {a.length}
-                    </_>
+                    </O>
                   </C>
-                  <Ie onPress={()=>R("")}hitSlop={10}style={w.clearBtn}>
-                    <_e color={t.grayTextWeak}size={13}/>
-                  </Ie>
+                  <Se onPress={()=>V("")}hitSlop={10}style={I.clearBtn}>
+                    <Me color={r.grayTextWeak}size={13}/>
+                  </Se>
                 </C>}
             </C>
-            <C style={w.toolbarRight}>
-              <$ style={[w.toolbarBtn,B&&{borderColor:`${t.darkOrange}50`,backgroundColor:`${t.darkOrange}18`}]}onPress={()=>re(e=>!e)}hitSlop={6}>
-                <He isPaused={B}color={B?t.darkOrange:t.grayTextStrong}size={16}/>
-              </$>
-
+            <C style={I.toolbarRight}>
               
-              <$ style={[w.toolbarBtn,E&&{borderColor:`${t.brandPurple}60`,backgroundColor:`${t.brandPurple}15`}]}onPress={()=>q(!0)}hitSlop={6}>
-                <De color={E?t.brandPurple:t.grayTextStrong}size={15}/>
-                {E&&<C style={{position:"absolute",top:2,right:2,width:7,height:7,borderRadius:3.5,backgroundColor:t.darkOrange,borderWidth:1,borderColor:t.white}}/>}
-              </$>
+              <Y style={[I.toolbarBtn,E&&{borderColor:`${r.brandPurple}60`,backgroundColor:`${r.brandPurple}15`}]}onPress={()=>Q(!0)}hitSlop={6}>
+                <Oe color={E?r.brandPurple:r.grayTextStrong}size={15}/>
+                {E&&<C style={{position:"absolute",top:2,right:2,width:7,height:7,borderRadius:3.5,backgroundColor:r.darkOrange,borderWidth:1,borderColor:r.white}}/>}
+              </Y>
 
-              <$ style={[w.toolbarBtn,{borderColor:`${t.errorColor}38`,backgroundColor:`${t.errorColor}0F`}]}onPress={Z}hitSlop={6}>
-                <$e color={t.errorColor}size={15}/>
-              </$>
+              <Y style={[I.toolbarBtn,{borderColor:`${r.errorColor}38`,backgroundColor:`${r.errorColor}0F`}]}onPress={Z}hitSlop={6}>
+                <_e color={r.errorColor}size={15}/>
+              </Y>
             </C>
           </C>
 
           
           <C style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
-            <Te horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-              {[{id:"all",label:D("common.all","All"),count:v.totalCount,color:t.purple,Icon:Ne},{id:"ecommerce",label:"Ecommerce",count:v.ecommerce,color:t.amber600,Icon:We},{id:"page_view",label:"Screens",count:v.page_view,color:t.sky600,Icon:Ge},{id:"system",label:"System",count:v.system,color:t.violet600,Icon:je},{id:"custom",label:"Custom",count:v.custom,color:t.teal600,Icon:Je}].map(e=>{const r=e.id==="all"?V.categories.has("all"):!V.categories.has("all")&&V.categories.has(e.id),o=e.color||t.purple,I=r?t.white:o,P=e.Icon;return<Ee key={e.id}onPress={()=>se(e.id)}>
-                    <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:r?o:`${o}12`,borderWidth:1,borderColor:r?o:`${o}30`,gap:5}}>
-                      <P size={11}color={I}/>
-                      <_ style={{fontFamily:H.interBold,fontSize:10.5,color:r?t.white:t.primaryBlack}}>
+            <Ie horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+              {[{id:"all",label:D("common.all","All"),count:v.totalCount,color:r.purple,Icon:Ee},{id:"ecommerce",label:"Ecommerce",count:v.ecommerce,color:r.amber600,Icon:$e},{id:"page_view",label:"Screens",count:v.page_view,color:r.sky600,Icon:De},{id:"system",label:"System",count:v.system,color:r.violet600,Icon:He},{id:"custom",label:"Custom",count:v.custom,color:r.teal600,Icon:We}].map(e=>{const o=e.id==="all"?B.categories.has("all"):!B.categories.has("all")&&B.categories.has(e.id),t=e.color||r.purple,S=o?r.white:t,A=e.Icon;return<Ve key={e.id}onPress={()=>ne(e.id)}>
+                    <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:o?t:`${t}12`,borderWidth:1,borderColor:o?t:`${t}30`,gap:5}}>
+                      <A size={11}color={S}/>
+                      <O style={{fontFamily:$.interBold,fontSize:10.5,color:o?r.white:r.primaryBlack}}>
                         {e.label}
-                      </_>
-                      <C style={{backgroundColor:r?"rgba(255,255,255,0.25)":`${o}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8,alignItems:"center",justifyContent:"center"}}>
-                        <_ style={{fontFamily:H.interBold,fontSize:9.5,color:r?t.white:o}}>
+                      </O>
+                      <C style={{backgroundColor:o?"rgba(255,255,255,0.25)":`${t}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8,alignItems:"center",justifyContent:"center"}}>
+                        <O style={{fontFamily:$.interBold,fontSize:9.5,color:o?r.white:t}}>
                           {e.count}
-                        </_>
+                        </O>
                       </C>
                     </C>
-                  </Ee>})}
-            </Te>
+                  </Ve>})}
+            </Ie>
           </C>
         </C>}
 
       
-      <Le visible={le}onClose={()=>q(!1)}/>
+      <Fe visible={ae}onClose={()=>Q(!1)}/>
 
       <C style={{flex:1}}onLayout={()=>oe(!0)}>
         {te?<>
-            <Ce ref={ae}data={O}keyExtractor={ie}renderItem={ce}getItemLayout={de}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={Se.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ve isSearch={S.length>0}searchQuery={S}customTitle={S.length>0?"No matching analytics events":"No analytics events yet"}customSub={S.length>0?`No events matched "${S}"`:"Call setupAnalyticsLogger(analytics()) at app start."}onClearSearch={()=>R("")}/>}ListFooterComponent={a.length>0?<Re count={O.length}totalCount={a.length}label="events"hasMore={O.length<a.length}onLoadMore={()=>ne(e=>e+10)}/>:null}contentContainerStyle={[w.listContent,a.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+            <Ce ref={re}data={N}keyExtractor={se}renderItem={ie}getItemLayout={ce}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={we.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Pe isSearch={w.length>0}searchQuery={w}customTitle={w.length>0?"No matching analytics events":"No analytics events yet"}customSub={w.length>0?`No events matched "${w}"`:"Call setupAnalyticsLogger(analytics()) at app start."}onClearSearch={()=>V("")}/>}ListFooterComponent={a.length>0?<Le count={N.length}totalCount={a.length}label="events"hasMore={N.length<a.length}onLoadMore={()=>le(e=>e+10)}/>:null}contentContainerStyle={[I.listContent,a.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
           </>:null}
       </C>
-    </>});export default Qe;
+    </>});export default Ge;