react-native-inapp-inspector 2.5.12 → 2.5.13

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

@@ -1,43 +1,43 @@
-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}>
+import{useEffect as Ae,useMemo as Y,useState as ke}from"react";import{Modal as Ie,Pressable as Be,ScrollView as Ve,StyleSheet as Z,Text as T,TouchableOpacity as R,View as P}from"react-native";import{useInspector as Re}from"./InspectorContext";import{t as w}from"../../i18n";import{AppColors as l}from"../../styles/AppColors";import{AppFonts as A}from"../../styles/AppFonts";import{getEventCategory as We}from"../../helpers";import{FilterIcon as Oe,CloseWhite as _e,CheckIcon as L,CartIcon as Ee,GlobeIcon as De,BoltIcon as J,SparkleIcon as K,MoneyIcon as M,ClockIcon as G,HourglassIcon as Fe,FlameIcon as Ue,PinIcon as X,RepeatIcon as He,TargetGoalIcon as Q,UserIcon as Te,UserCheckIcon as Ne,PackageBoxIcon as Le,CodeBracketsIcon as Pe}from"../NetworkIcons";import S from"../TouchableScale";const Me=({visible:W,onClose:$})=>{const{analyticsEvents:z,analyticsSearch:O,analyticsFilters:v,setAnalyticsFilters:we}=Re(),[t,C]=ke(()=>({...v,categories:new Set(v.categories),screens:new Set(v.screens),sources:new Set(v.sources||["all"]),userTypes:new Set(v.userTypes||["all"])}));Ae(()=>{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 _=Y(()=>{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})})},ge=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]}))},xe=s=>{C(i=>({...i,timeWindow:s}))},be=s=>{C(i=>({...i,payloadComplexity:s}))},B=s=>{C(i=>({...i,sortBy:s}))},Se=()=>{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"})},ve=()=>{we({...t,categories:new Set(t.categories),screens:new Set(t.screens),sources:new Set(t.sources),userTypes:new Set(t.userTypes)}),$()},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"])}),$()},Ce=Y(()=>{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=We(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,O,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<Ie visible={W}transparent animationType="fade"onRequestClose={V}>
       <P style={e.backdrop}>
-        <Ae style={Y.absoluteFill}onPress={V}/>
+        <Be style={Z.absoluteFill}onPress={V}/>
 
         <P style={e.modalCard}>
           
           <P style={e.header}>
             <P style={{flexDirection:"row",alignItems:"center",gap:8}}>
               <P style={e.headerIconBox}>
-                <Ve color={l.brandPurple}size={15}/>
+                <Oe color={l.brandPurple}size={15}/>
               </P>
               <P>
-                <T style={e.headerTitle}>Analytics Filters</T>
+                <T style={e.headerTitle}>{w("analytics.filtersTitle","Analytics Filters")}</T>
                 <T style={e.headerSubtitle}>
-                  GA4 Telemetry Dimensions & Metrics
+                  {w("analytics.filtersSubtitle","GA4 Telemetry Dimensions & Metrics")}
                 </T>
               </P>
             </P>
 
             <P style={{flexDirection:"row",alignItems:"center",gap:8}}>
-              <R onPress={ge}hitSlop={8}style={e.resetBtn}>
-                <T style={e.resetBtnText}>Reset All</T>
+              <R onPress={Se}hitSlop={8}style={e.resetBtn}>
+                <T style={e.resetBtnText}>{w("common.resetAll","Reset All")}</T>
               </R>
 
               <R onPress={V}hitSlop={10}style={e.closeBtn}>
-                <Re/>
+                <_e/>
               </R>
             </P>
           </P>
 
           
-          <Ie style={{maxHeight:460}}contentContainerStyle={e.scrollContent}showsVerticalScrollIndicator={!0}>
+          <Ve style={{maxHeight:460}}contentContainerStyle={e.scrollContent}showsVerticalScrollIndicator={!0}>
             
             <P style={e.section}>
               <P style={e.sectionHeaderRow}>
-                <$ color={l.grayTextWeak}size={12}/>
-                <T style={e.sectionTitle}>TIME HORIZON</T>
+                <G color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>{w("analytics.timeHorizon","TIME HORIZON")}</T>
               </P>
               <P style={e.chipsWrap}>
-                {[{key:"all",label:"All Time"},{key:"1m",label:"Last 1 min"},{key:"5m",label:"Last 5 mins"},{key:"15m",label:"Last 15 mins"},{key:"1h",label:"Last 1 hour"}].map(s=><S key={s.key}onPress={()=>Pe(s.key)}style={[e.filterPill,t.timeWindow===s.key&&e.filterPillActive]}>
+                {[{key:"all",label:"All Time"},{key:"1m",label:"Last 1 min"},{key:"5m",label:"Last 5 mins"},{key:"15m",label:"Last 15 mins"},{key:"1h",label:"Last 1 hour"}].map(s=><S key={s.key}onPress={()=>xe(s.key)}style={[e.filterPill,t.timeWindow===s.key&&e.filterPillActive]}>
                     <T style={[e.filterPillText,t.timeWindow===s.key&&e.filterPillTextActive]}>
                       {s.label}
                     </T>
@@ -48,42 +48,42 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
             
             <P style={e.section}>
               <P style={e.sectionHeaderRow}>
-                <X color={l.grayTextWeak}size={12}/>
-                <T style={e.sectionTitle}>EVENT CATEGORIES</T>
+                <Q color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>{w("analytics.eventCategories","EVENT CATEGORIES")}</T>
               </P>
               <P style={e.chipsWrap}>
                 <S onPress={()=>I("all")}style={[e.filterPill,F&&e.filterPillActive]}>
                   {F&&<L color={l.white}size={12}/>}
                   <T style={[e.filterPillText,F&&e.filterPillTextActive]}>
-                    All Categories
+                    {w("analytics.allCategories","All Categories")}
                   </T>
                 </S>
 
                 <S onPress={()=>I("ecommerce")}style={[e.filterPill,t.categories.has("ecommerce")&&e.filterPillActive]}>
-                  <We color={t.categories.has("ecommerce")?l.white:l.amber700}size={13}/>
+                  <Ee color={t.categories.has("ecommerce")?l.white:l.amber700}size={13}/>
                   <T style={[e.filterPillText,t.categories.has("ecommerce")&&e.filterPillTextActive]}>
-                    Ecommerce
+                    {w("analytics.ecommerce","Ecommerce")}
                   </T>
                 </S>
 
                 <S onPress={()=>I("page_view")}style={[e.filterPill,t.categories.has("page_view")&&e.filterPillActive]}>
-                  <Oe color={t.categories.has("page_view")?l.white:l.sky600}size={13}/>
+                  <De 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
+                    {w("analytics.screensAndPages","Screens & Pages")}
                   </T>
                 </S>
 
                 <S onPress={()=>I("system")}style={[e.filterPill,t.categories.has("system")&&e.filterPillActive]}>
-                  <Z color={t.categories.has("system")?l.white:l.purple}size={13}/>
+                  <J color={t.categories.has("system")?l.white:l.purple}size={13}/>
                   <T style={[e.filterPillText,t.categories.has("system")&&e.filterPillTextActive]}>
-                    System & Lifecycle
+                    {w("analytics.systemAndLifecycle","System & Lifecycle")}
                   </T>
                 </S>
 
                 <S onPress={()=>I("custom")}style={[e.filterPill,t.categories.has("custom")&&e.filterPillActive]}>
-                  <J color={t.categories.has("custom")?l.white:l.brandPurple}size={13}/>
+                  <K color={t.categories.has("custom")?l.white:l.brandPurple}size={13}/>
                   <T style={[e.filterPillText,t.categories.has("custom")&&e.filterPillTextActive]}>
-                    Custom Events
+                    {w("analytics.customEvents","Custom Events")}
                   </T>
                 </S>
               </P>
@@ -93,50 +93,48 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
             <P style={e.section}>
               <P style={e.sectionHeaderRow}>
                 <M color={l.grayTextWeak}size={12}/>
-                <T style={e.sectionTitle}>
-                  MONETIZATION & ATTRIBUTES
-                </T>
+                <T style={e.sectionTitle}>{w("analytics.monetizationAttributes","MONETIZATION & ATTRIBUTES")}</T>
               </P>
               <P style={e.chipsWrap}>
                 <S onPress={()=>k("onlyConversions")}style={[e.filterPill,t.onlyConversions&&e.filterPillActive]}>
-                  <X color={t.onlyConversions?l.white:l.brandPurple}size={13}/>
+                  <Q color={t.onlyConversions?l.white:l.brandPurple}size={13}/>
                   <T style={[e.filterPillText,t.onlyConversions&&e.filterPillTextActive]}>
-                    Conversion Events Only
+                    {w("analytics.conversionEventsOnly","Conversion Events Only")}
                   </T>
                 </S>
 
                 <S onPress={()=>k("hasRevenue")}style={[e.filterPill,t.hasRevenue&&e.filterPillActive]}>
                   <M color={t.hasRevenue?l.white:l.emerald600}size={13}/>
                   <T style={[e.filterPillText,t.hasRevenue&&e.filterPillTextActive]}>
-                    With Revenue (Value &gt; 0)
+                    {w("analytics.withRevenue","With Revenue (Value > 0)")}
                   </T>
                 </S>
 
                 <S onPress={()=>k("hasItems")}style={[e.filterPill,t.hasItems&&e.filterPillActive]}>
-                  <He color={t.hasItems?l.white:l.amber700}size={13}/>
+                  <Le color={t.hasItems?l.white:l.amber700}size={13}/>
                   <T style={[e.filterPillText,t.hasItems&&e.filterPillTextActive]}>
-                    With Items Payload
+                    {w("analytics.withItemsPayload","With Items Payload")}
                   </T>
                 </S>
 
                 <S onPress={()=>k("hasUserProps")}style={[e.filterPill,t.hasUserProps&&e.filterPillActive]}>
-                  <J color={t.hasUserProps?l.white:l.brandPurple}size={13}/>
+                  <K color={t.hasUserProps?l.white:l.brandPurple}size={13}/>
                   <T style={[e.filterPillText,t.hasUserProps&&e.filterPillTextActive]}>
-                    With User Properties
+                    {w("analytics.withUserProperties","With User Properties")}
                   </T>
                 </S>
 
                 <S onPress={()=>k("hasParams")}style={[e.filterPill,t.hasParams&&e.filterPillActive]}>
-                  <Te color={t.hasParams?l.white:l.grayText}size={13}/>
+                  <Pe color={t.hasParams?l.white:l.grayText}size={13}/>
                   <T style={[e.filterPillText,t.hasParams&&e.filterPillTextActive]}>
-                    With Custom Params
+                    {w("analytics.withCustomParams","With Custom Params")}
                   </T>
                 </S>
 
                 <S onPress={()=>k("onlyDuplicates")}style={[e.filterPill,t.onlyDuplicates&&e.filterPillActive]}>
-                  <De color={t.onlyDuplicates?l.white:l.rose600}size={13}/>
+                  <He color={t.onlyDuplicates?l.white:l.rose600}size={13}/>
                   <T style={[e.filterPillText,t.onlyDuplicates&&e.filterPillTextActive]}>
-                    Frequent Only (&gt; 1×)
+                    {w("analytics.frequentOnly","Frequent Only (> 1\xD7)")}
                   </T>
                 </S>
               </P>
@@ -145,28 +143,28 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
             
             <P style={e.section}>
               <P style={e.sectionHeaderRow}>
-                <Q color={l.grayTextWeak}size={12}/>
-                <T style={e.sectionTitle}>USER IDENTIFICATION</T>
+                <Te color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>{w("analytics.userIdentification","USER IDENTIFICATION")}</T>
               </P>
               <P style={e.chipsWrap}>
-                <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
+                <S onPress={()=>D("all")}style={[e.filterPill,H&&e.filterPillActive]}>
+                  {H&&<L color={l.white}size={12}/>}
+                  <T style={[e.filterPillText,H&&e.filterPillTextActive]}>
+                    {w("analytics.allUsers","All Users")}
                   </T>
                 </S>
 
                 <S onPress={()=>D("identified")}style={[e.filterPill,t.userTypes.has("identified")&&e.filterPillActive]}>
-                  <Fe color={t.userTypes.has("identified")?l.white:l.greenColor}size={13}/>
+                  <Ne color={t.userTypes.has("identified")?l.white:l.greenColor}size={13}/>
                   <T style={[e.filterPillText,t.userTypes.has("identified")&&e.filterPillTextActive]}>
-                    Identified (User ID)
+                    {w("analytics.identifiedUser","Identified (User ID)")}
                   </T>
                 </S>
 
                 <S onPress={()=>D("anonymous")}style={[e.filterPill,t.userTypes.has("anonymous")&&e.filterPillActive]}>
-                  <Q color={t.userTypes.has("anonymous")?l.white:l.grayTextWeak}size={13}/>
+                  <Te color={t.userTypes.has("anonymous")?l.white:l.grayTextWeak}size={13}/>
                   <T style={[e.filterPillText,t.userTypes.has("anonymous")&&e.filterPillTextActive]}>
-                    Anonymous
+                    {w("analytics.anonymousUser","Anonymous")}
                   </T>
                 </S>
               </P>
@@ -175,26 +173,26 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
             
             <P style={e.section}>
               <P style={e.sectionHeaderRow}>
-                <Z color={l.grayTextWeak}size={12}/>
-                <T style={e.sectionTitle}>EVENT SOURCE</T>
+                <J color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>{w("analytics.eventSource","EVENT SOURCE")}</T>
               </P>
               <P style={e.chipsWrap}>
-                <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
+                <S onPress={()=>E("all")}style={[e.filterPill,U&&e.filterPillActive]}>
+                  {U&&<L color={l.white}size={12}/>}
+                  <T style={[e.filterPillText,U&&e.filterPillTextActive]}>
+                    {w("analytics.allSources","All Sources")}
                   </T>
                 </S>
 
                 <S onPress={()=>E("firebase")}style={[e.filterPill,t.sources.has("firebase")&&e.filterPillActive]}>
                   <T style={[e.filterPillText,t.sources.has("firebase")&&e.filterPillTextActive]}>
-                    Firebase / GA SDK
+                    {w("analytics.firebaseGaSdk","Firebase / GA SDK")}
                   </T>
                 </S>
 
                 <S onPress={()=>E("manual")}style={[e.filterPill,t.sources.has("manual")&&e.filterPillActive]}>
                   <T style={[e.filterPillText,t.sources.has("manual")&&e.filterPillTextActive]}>
-                    In-App Logger
+                    {w("analytics.inAppLogger","In-App Logger")}
                   </T>
                 </S>
               </P>
@@ -203,11 +201,11 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
             
             <P style={e.section}>
               <P style={e.sectionHeaderRow}>
-                <Te color={l.grayTextWeak}size={12}/>
-                <T style={e.sectionTitle}>PAYLOAD COMPLEXITY</T>
+                <Pe color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>{w("analytics.payloadComplexity","PAYLOAD COMPLEXITY")}</T>
               </P>
               <P style={e.chipsWrap}>
-                {[{key:"all",label:"All Payloads"},{key:"none",label:"0 Params"},{key:"simple",label:"1 - 5 Params"},{key:"heavy",label:"> 5 Params"}].map(s=><S key={s.key}onPress={()=>we(s.key)}style={[e.filterPill,t.payloadComplexity===s.key&&e.filterPillActive]}>
+                {[{key:"all",label:"All Payloads"},{key:"none",label:"0 Params"},{key:"simple",label:"1 - 5 Params"},{key:"heavy",label:"> 5 Params"}].map(s=><S key={s.key}onPress={()=>be(s.key)}style={[e.filterPill,t.payloadComplexity===s.key&&e.filterPillActive]}>
                     <T style={[e.filterPillText,t.payloadComplexity===s.key&&e.filterPillTextActive]}>
                       {s.label}
                     </T>
@@ -218,14 +216,14 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
             
             {_.length>0&&<P style={e.section}>
                 <P style={e.sectionHeaderRow}>
-                  <K color={l.grayTextWeak}size={12}/>
+                  <X color={l.grayTextWeak}size={12}/>
                   <T style={e.sectionTitle}>
                     DISCOVERED SCREENS ({_.length})
                   </T>
                 </P>
                 <P style={e.chipsWrap}>
-                  {_.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}/>
+                  {_.map(s=>{const i=t.screens.has(s);return<S key={s}onPress={()=>ge(s)}style={[e.filterPill,i&&e.filterPillActive]}>
+                        <X color={i?l.white:l.amber700}size={12}/>
                         <T style={[e.filterPillText,i&&e.filterPillTextActive]}>
                           {s}
                         </T>
@@ -236,53 +234,53 @@ import{useEffect as Se,useMemo as q,useState as ve}from"react";import{Modal as C
             
             <P style={e.section}>
               <P style={e.sectionHeaderRow}>
-                <$ color={l.grayTextWeak}size={12}/>
-                <T style={e.sectionTitle}>SORT ORDER</T>
+                <G color={l.grayTextWeak}size={12}/>
+                <T style={e.sectionTitle}>{w("analytics.sortOrder","SORT ORDER")}</T>
               </P>
               <P style={e.chipsWrap}>
                 <S onPress={()=>B("time_desc")}style={[e.filterPill,t.sortBy==="time_desc"&&e.filterPillActive]}>
-                  <$ color={t.sortBy==="time_desc"?l.white:l.grayText}size={12}/>
+                  <G color={t.sortBy==="time_desc"?l.white:l.grayText}size={12}/>
                   <T style={[e.filterPillText,t.sortBy==="time_desc"&&e.filterPillTextActive]}>
-                    Newest First (Default)
+                    {w("analytics.newestFirstDefault","Newest First (Default)")}
                   </T>
                 </S>
 
                 <S onPress={()=>B("time_asc")}style={[e.filterPill,t.sortBy==="time_asc"&&e.filterPillActive]}>
-                  <_e color={t.sortBy==="time_asc"?l.white:l.grayText}size={12}/>
+                  <Fe color={t.sortBy==="time_asc"?l.white:l.grayText}size={12}/>
                   <T style={[e.filterPillText,t.sortBy==="time_asc"&&e.filterPillTextActive]}>
-                    Oldest First
+                    {w("analytics.oldestFirst","Oldest First")}
                   </T>
                 </S>
 
                 <S onPress={()=>B("revenue_desc")}style={[e.filterPill,t.sortBy==="revenue_desc"&&e.filterPillActive]}>
                   <M color={t.sortBy==="revenue_desc"?l.white:l.emerald600}size={12}/>
                   <T style={[e.filterPillText,t.sortBy==="revenue_desc"&&e.filterPillTextActive]}>
-                    Highest Revenue
+                    {w("analytics.highestRevenue","Highest Revenue")}
                   </T>
                 </S>
 
                 <S onPress={()=>B("count_desc")}style={[e.filterPill,t.sortBy==="count_desc"&&e.filterPillActive]}>
-                  <Ee color={t.sortBy==="count_desc"?l.white:l.darkOrange}size={12}/>
+                  <Ue color={t.sortBy==="count_desc"?l.white:l.darkOrange}size={12}/>
                   <T style={[e.filterPillText,t.sortBy==="count_desc"&&e.filterPillTextActive]}>
-                    Most Frequent
+                    {w("analytics.mostFrequent","Most Frequent")}
                   </T>
                 </S>
               </P>
             </P>
-          </Ie>
+          </Ve>
 
           
           <P style={e.footer}>
             <R onPress={V}style={e.discardBtn}activeOpacity={.8}>
-              <T style={e.discardBtnText}>Discard</T>
+              <T style={e.discardBtnText}>{w("common.discard","Discard")}</T>
             </R>
 
-            <R onPress={xe}style={e.applyBtn}activeOpacity={.85}>
+            <R onPress={ve}style={e.applyBtn}activeOpacity={.85}>
               <T style={e.applyBtnText}>
-                Apply ({be} Events)
+                Apply ({Ce} Events)
               </T>
             </R>
           </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 Ne;
+    </Ie>},e=Z.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 Me;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BoxModelMetrics } from '../../types';
+interface BoxModelVisualizerProps {
+    boxModel: BoxModelMetrics;
+    compact?: boolean;
+}
+export declare const BoxModelVisualizer: React.FC<BoxModelVisualizerProps>;
+export {};

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

@@ -0,0 +1,76 @@
+import"react";import{StyleSheet as I,Text as B,View as T}from"react-native";import{AppColors as C}from"../../styles/AppColors";import{AppFonts as h}from"../../styles/AppFonts";export const BoxModelVisualizer=({boxModel:v,compact:z=!1})=>{const{margin:w,border:R,padding:F,content:S}=v;return<T style={e.container}>
+      
+      <T style={e.marginBox}>
+        <T style={e.labelRow}>
+          <B style={e.boxLabelMargin}>MARGIN</B>
+        </T>
+        <B style={e.valueTop}>{w.top}</B>
+
+        <T style={e.middleRow}>
+          <B style={e.valueLeft}>{w.left}</B>
+
+          
+          <T style={e.borderBox}>
+            <T style={e.labelRow}>
+              <B style={e.boxLabelBorder}>BORDER</B>
+            </T>
+            <B style={e.valueTop}>{R.top}</B>
+
+            <T style={e.middleRow}>
+              <B style={e.valueLeft}>{R.left}</B>
+
+              
+              <T style={e.paddingBox}>
+                <T style={e.labelRow}>
+                  <B style={e.boxLabelPadding}>PADDING</B>
+                </T>
+                <B style={e.valueTop}>{F.top}</B>
+
+                <T style={e.middleRow}>
+                  <B style={e.valueLeft}>{F.left}</B>
+
+                  
+                  <T style={e.contentBox}>
+                    <B style={e.contentDimensions}>
+                      {S.width} × {S.height}
+                    </B>
+                  </T>
+
+                  <B style={e.valueRight}>{F.right}</B>
+                </T>
+
+                <B style={e.valueBottom}>{F.bottom}</B>
+              </T>
+
+              <B style={e.valueRight}>{R.right}</B>
+            </T>
+
+            <B style={e.valueBottom}>{R.bottom}</B>
+          </T>
+
+          <B style={e.valueRight}>{w.right}</B>
+        </T>
+
+        <B style={e.valueBottom}>{w.bottom}</B>
+      </T>
+
+      
+      {!z&&<T style={e.legendContainer}>
+          <T style={e.legendItem}>
+            <T style={[e.legendSwatch,{backgroundColor:"#F59E0B2B",borderColor:"#F59E0B"}]}/>
+            <B style={e.legendText}>Margin</B>
+          </T>
+          <T style={e.legendItem}>
+            <T style={[e.legendSwatch,{backgroundColor:"#FDE0473D",borderColor:"#EAB308"}]}/>
+            <B style={e.legendText}>Border</B>
+          </T>
+          <T style={e.legendItem}>
+            <T style={[e.legendSwatch,{backgroundColor:"#10B9812B",borderColor:"#10B981"}]}/>
+            <B style={e.legendText}>Padding</B>
+          </T>
+          <T style={e.legendItem}>
+            <T style={[e.legendSwatch,{backgroundColor:"#4F46E52B",borderColor:"#4F46E5"}]}/>
+            <B style={e.legendText}>Content</B>
+          </T>
+        </T>}
+    </T>};const e=I.create({container:{alignItems:"center",marginVertical:8},marginBox:{width:"100%",backgroundColor:"#F59E0B1A",borderWidth:1,borderColor:"#F59E0B66",borderRadius:8,padding:6,alignItems:"center"},borderBox:{flex:1,backgroundColor:"#FDE04724",borderWidth:1,borderColor:"#EAB30877",borderRadius:6,padding:6,alignItems:"center",marginHorizontal:4},paddingBox:{flex:1,backgroundColor:"#10B9811A",borderWidth:1,borderColor:"#10B98166",borderRadius:4,padding:6,alignItems:"center",marginHorizontal:4},contentBox:{flex:1,backgroundColor:"#4F46E524",borderWidth:1,borderColor:"#4F46E577",borderRadius:3,paddingVertical:12,paddingHorizontal:8,alignItems:"center",justifyContent:"center",marginHorizontal:4,minHeight:40},labelRow:{position:"absolute",top:3,left:6},boxLabelMargin:{fontSize:9,fontFamily:h.medium,color:"#D97706",letterSpacing:.5},boxLabelBorder:{fontSize:9,fontFamily:h.medium,color:"#CA8A04",letterSpacing:.5},boxLabelPadding:{fontSize:9,fontFamily:h.medium,color:"#059669",letterSpacing:.5},middleRow:{flexDirection:"row",alignItems:"center",width:"100%",marginVertical:2},valueTop:{fontSize:11,fontFamily:h.semiBold,color:C.grayText,marginBottom:2},valueBottom:{fontSize:11,fontFamily:h.semiBold,color:C.grayText,marginTop:2},valueLeft:{fontSize:11,fontFamily:h.semiBold,color:C.grayText,marginRight:2},valueRight:{fontSize:11,fontFamily:h.semiBold,color:C.grayText,marginLeft:2},contentDimensions:{fontSize:12,fontFamily:h.bold,color:C.brandPurple},legendContainer:{flexDirection:"row",justifyContent:"center",gap:16,marginTop:12},legendItem:{flexDirection:"row",alignItems:"center",gap:6},legendSwatch:{width:12,height:12,borderRadius:3,borderWidth:1},legendText:{fontSize:11,fontFamily:h.medium,color:C.grayTextWeak}});