react-native-inapp-inspector 2.5.12 → 2.5.13

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

@@ -1,6 +1,6 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(a,i,n,o){o===void 0&&(o=n);var s=Object.getOwnPropertyDescriptor(i,n);(!s||("get"in s?!i.__esModule:s.writable||s.configurable))&&(s={enumerable:!0,get:function(){return i[n]}}),Object.defineProperty(a,o,s)}):(function(a,i,n,o){o===void 0&&(o=n),a[o]=i[n]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(a,i){Object.defineProperty(a,"default",{enumerable:!0,value:i})}):function(a,i){a.default=i}),__importStar=this&&this.__importStar||(function(){var a=function(i){return a=Object.getOwnPropertyNames||function(n){var o=[];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(o[o.length]=s);return o},a(i)};return function(i){if(i&&i.__esModule)return i;var n={};if(i!=null)for(var o=a(i),s=0;s<o.length;s++)o[s]!=="default"&&__createBinding(n,i,o[s]);return __setModuleDefault(n,i),n}})(),__importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),helpers_1=require("../../helpers"),NetworkIcons_1=require("../NetworkIcons"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnalyticsFilterModal=({visible:a,onClose:i})=>{const{analyticsEvents:n,analyticsSearch:o,analyticsFilters:s,setAnalyticsFilters:v}=(0,InspectorContext_1.useInspector)(),[e,c]=(0,react_1.useState)(()=>({...s,categories:new Set(s.categories),screens:new Set(s.screens),sources:new Set(s.sources||["all"]),userTypes:new Set(s.userTypes||["all"])}));(0,react_1.useEffect)(()=>{a&&c({...s,categories:new Set(s.categories),screens:new Set(s.screens),sources:new Set(s.sources||["all"]),userTypes:new Set(s.userTypes||["all"])})},[a,s]);const y=(0,react_1.useMemo)(()=>{const t=new Set;for(const l of n){const r=l.screenName||l.params?.firebase_screen||l.params?.screen_name||l.params?.firebase_screen_class||l.screenClass;r&&typeof r=="string"&&r.trim()!==""&&t.add(r.trim())}return Array.from(t)},[n]),u=t=>{c(l=>{const r=new Set(l.categories);return t==="all"?{...l,categories:new Set(["all"])}:(r.delete("all"),r.has(t)?(r.delete(t),r.size===0&&r.add("all")):r.add(t),{...l,categories:r})})},C=t=>{c(l=>{const r=new Set(l.screens);return r.has(t)?r.delete(t):r.add(t),{...l,screens:r}})},_=t=>{c(l=>{const r=new Set(l.sources);return t==="all"?{...l,sources:new Set(["all"])}:(r.delete("all"),r.has(t)?(r.delete(t),r.size===0&&r.add("all")):r.add(t),{...l,sources:r})})},T=t=>{c(l=>{const r=new Set(l.userTypes);return t==="all"?{...l,userTypes:new Set(["all"])}:(r.delete("all"),r.has(t)?(r.delete(t),r.size===0&&r.add("all")):r.add(t),{...l,userTypes:r})})},p=t=>{c(l=>({...l,[t]:!l[t]}))},A=t=>{c(l=>({...l,timeWindow:t}))},m=t=>{c(l=>({...l,payloadComplexity:t}))},d=t=>{c(l=>({...l,sortBy:t}))},g=()=>{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"})},b=()=>{v({...e,categories:new Set(e.categories),screens:new Set(e.screens),sources:new Set(e.sources),userTypes:new Set(e.userTypes)}),i()},f=()=>{c({...s,categories:new Set(s.categories),screens:new Set(s.screens),sources:new Set(s.sources||["all"]),userTypes:new Set(s.userTypes||["all"])}),i()},S=(0,react_1.useMemo)(()=>{let t=n;if(o){const l=o.toLowerCase();t=t.filter(r=>r.name.toLowerCase().includes(l)||JSON.stringify(r.params||{}).toLowerCase().includes(l)||(r.screenName??"").toLowerCase().includes(l)||(r.pageTitle??"").toLowerCase().includes(l))}if(e.categories.size>0&&!e.categories.has("all")&&(t=t.filter(l=>{const r=(0,helpers_1.getEventCategory)(l.name);return e.categories.has(r)})),e.timeWindow!=="all"){const l=Date.now(),r=e.timeWindow==="1m"?l-60*1e3:e.timeWindow==="5m"?l-300*1e3:e.timeWindow==="15m"?l-900*1e3:l-3600*1e3;t=t.filter(P=>P.timestamp>=r)}if(e.sources.size>0&&!e.sources.has("all")&&(t=t.filter(l=>e.sources.has(l.source||"manual"))),e.userTypes.size>0&&!e.userTypes.has("all")&&(t=t.filter(l=>{const r=!!(l.userId&&l.userId.trim()!=="");return!!(e.userTypes.has("identified")&&r||e.userTypes.has("anonymous")&&!r)})),e.payloadComplexity!=="all"&&(t=t.filter(l=>{const r=l.params?Object.keys(l.params).length:0;return e.payloadComplexity==="none"?r===0:e.payloadComplexity==="simple"?r>=1&&r<=5:e.payloadComplexity==="heavy"?r>5:!0})),e.onlyConversions){const l=["purchase","item_purchase","ecommerce_purchase","sign_up","login","lead","generate_lead","tutorial_complete","add_payment_info","begin_checkout"];t=t.filter(r=>l.some(P=>r.name.toLowerCase().includes(P)))}return e.screens.size>0&&(t=t.filter(l=>{const r=l.screenName||l.params?.firebase_screen||l.params?.screen_name||l.params?.firebase_screen_class||l.screenClass||"";return e.screens.has(r)})),e.hasRevenue&&(t=t.filter(l=>{const r=l.params?.value??l.params?.price;return r!=null&&Number(r)>0})),e.hasItems&&(t=t.filter(l=>Array.isArray(l.params?.items)&&l.params.items.length>0)),e.hasUserProps&&(t=t.filter(l=>l.userProperties&&Object.keys(l.userProperties).length>0)),e.hasParams&&(t=t.filter(l=>l.params&&Object.keys(l.params).length>0)),t.length},[n,o,e]),h=e.categories.has("all")||e.categories.size===0,w=e.sources.has("all")||e.sources.size===0,x=e.userTypes.has("all")||e.userTypes.size===0;return<react_native_1.Modal visible={a}transparent animationType="fade"onRequestClose={f}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(a,i,n,o){o===void 0&&(o=n);var s=Object.getOwnPropertyDescriptor(i,n);(!s||("get"in s?!i.__esModule:s.writable||s.configurable))&&(s={enumerable:!0,get:function(){return i[n]}}),Object.defineProperty(a,o,s)}):(function(a,i,n,o){o===void 0&&(o=n),a[o]=i[n]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(a,i){Object.defineProperty(a,"default",{enumerable:!0,value:i})}):function(a,i){a.default=i}),__importStar=this&&this.__importStar||(function(){var a=function(i){return a=Object.getOwnPropertyNames||function(n){var o=[];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(o[o.length]=s);return o},a(i)};return function(i){if(i&&i.__esModule)return i;var n={};if(i!=null)for(var o=a(i),s=0;s<o.length;s++)o[s]!=="default"&&__createBinding(n,i,o[s]);return __setModuleDefault(n,i),n}})(),__importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),i18n_1=require("../../i18n"),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),helpers_1=require("../../helpers"),NetworkIcons_1=require("../NetworkIcons"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnalyticsFilterModal=({visible:a,onClose:i})=>{const{analyticsEvents:n,analyticsSearch:o,analyticsFilters:s,setAnalyticsFilters:x}=(0,InspectorContext_1.useInspector)(),[e,c]=(0,react_1.useState)(()=>({...s,categories:new Set(s.categories),screens:new Set(s.screens),sources:new Set(s.sources||["all"]),userTypes:new Set(s.userTypes||["all"])}));(0,react_1.useEffect)(()=>{a&&c({...s,categories:new Set(s.categories),screens:new Set(s.screens),sources:new Set(s.sources||["all"]),userTypes:new Set(s.userTypes||["all"])})},[a,s]);const f=(0,react_1.useMemo)(()=>{const t=new Set;for(const l of n){const r=l.screenName||l.params?.firebase_screen||l.params?.screen_name||l.params?.firebase_screen_class||l.screenClass;r&&typeof r=="string"&&r.trim()!==""&&t.add(r.trim())}return Array.from(t)},[n]),u=t=>{c(l=>{const r=new Set(l.categories);return t==="all"?{...l,categories:new Set(["all"])}:(r.delete("all"),r.has(t)?(r.delete(t),r.size===0&&r.add("all")):r.add(t),{...l,categories:r})})},m=t=>{c(l=>{const r=new Set(l.screens);return r.has(t)?r.delete(t):r.add(t),{...l,screens:r}})},_=t=>{c(l=>{const r=new Set(l.sources);return t==="all"?{...l,sources:new Set(["all"])}:(r.delete("all"),r.has(t)?(r.delete(t),r.size===0&&r.add("all")):r.add(t),{...l,sources:r})})},T=t=>{c(l=>{const r=new Set(l.userTypes);return t==="all"?{...l,userTypes:new Set(["all"])}:(r.delete("all"),r.has(t)?(r.delete(t),r.size===0&&r.add("all")):r.add(t),{...l,userTypes:r})})},p=t=>{c(l=>({...l,[t]:!l[t]}))},A=t=>{c(l=>({...l,timeWindow:t}))},C=t=>{c(l=>({...l,payloadComplexity:t}))},y=t=>{c(l=>({...l,sortBy:t}))},g=()=>{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"})},b=()=>{x({...e,categories:new Set(e.categories),screens:new Set(e.screens),sources:new Set(e.sources),userTypes:new Set(e.userTypes)}),i()},d=()=>{c({...s,categories:new Set(s.categories),screens:new Set(s.screens),sources:new Set(s.sources||["all"]),userTypes:new Set(s.userTypes||["all"])}),i()},S=(0,react_1.useMemo)(()=>{let t=n;if(o){const l=o.toLowerCase();t=t.filter(r=>r.name.toLowerCase().includes(l)||JSON.stringify(r.params||{}).toLowerCase().includes(l)||(r.screenName??"").toLowerCase().includes(l)||(r.pageTitle??"").toLowerCase().includes(l))}if(e.categories.size>0&&!e.categories.has("all")&&(t=t.filter(l=>{const r=(0,helpers_1.getEventCategory)(l.name);return e.categories.has(r)})),e.timeWindow!=="all"){const l=Date.now(),r=e.timeWindow==="1m"?l-60*1e3:e.timeWindow==="5m"?l-300*1e3:e.timeWindow==="15m"?l-900*1e3:l-3600*1e3;t=t.filter(P=>P.timestamp>=r)}if(e.sources.size>0&&!e.sources.has("all")&&(t=t.filter(l=>e.sources.has(l.source||"manual"))),e.userTypes.size>0&&!e.userTypes.has("all")&&(t=t.filter(l=>{const r=!!(l.userId&&l.userId.trim()!=="");return!!(e.userTypes.has("identified")&&r||e.userTypes.has("anonymous")&&!r)})),e.payloadComplexity!=="all"&&(t=t.filter(l=>{const r=l.params?Object.keys(l.params).length:0;return e.payloadComplexity==="none"?r===0:e.payloadComplexity==="simple"?r>=1&&r<=5:e.payloadComplexity==="heavy"?r>5:!0})),e.onlyConversions){const l=["purchase","item_purchase","ecommerce_purchase","sign_up","login","lead","generate_lead","tutorial_complete","add_payment_info","begin_checkout"];t=t.filter(r=>l.some(P=>r.name.toLowerCase().includes(P)))}return e.screens.size>0&&(t=t.filter(l=>{const r=l.screenName||l.params?.firebase_screen||l.params?.screen_name||l.params?.firebase_screen_class||l.screenClass||"";return e.screens.has(r)})),e.hasRevenue&&(t=t.filter(l=>{const r=l.params?.value??l.params?.price;return r!=null&&Number(r)>0})),e.hasItems&&(t=t.filter(l=>Array.isArray(l.params?.items)&&l.params.items.length>0)),e.hasUserProps&&(t=t.filter(l=>l.userProperties&&Object.keys(l.userProperties).length>0)),e.hasParams&&(t=t.filter(l=>l.params&&Object.keys(l.params).length>0)),t.length},[n,o,e]),h=e.categories.has("all")||e.categories.size===0,w=e.sources.has("all")||e.sources.size===0,v=e.userTypes.has("all")||e.userTypes.size===0;return<react_native_1.Modal visible={a}transparent animationType="fade"onRequestClose={d}>
       <react_native_1.View style={styles.backdrop}>
-        <react_native_1.Pressable style={react_native_1.StyleSheet.absoluteFill}onPress={f}/>
+        <react_native_1.Pressable style={react_native_1.StyleSheet.absoluteFill}onPress={d}/>
 
         <react_native_1.View style={styles.modalCard}>
           
@@ -10,19 +10,19 @@
                 <NetworkIcons_1.FilterIcon color={AppColors_1.AppColors.brandPurple}size={15}/>
               </react_native_1.View>
               <react_native_1.View>
-                <react_native_1.Text style={styles.headerTitle}>Analytics Filters</react_native_1.Text>
+                <react_native_1.Text style={styles.headerTitle}>{(0,i18n_1.t)("analytics.filtersTitle","Analytics Filters")}</react_native_1.Text>
                 <react_native_1.Text style={styles.headerSubtitle}>
-                  GA4 Telemetry Dimensions & Metrics
+                  {(0,i18n_1.t)("analytics.filtersSubtitle","GA4 Telemetry Dimensions & Metrics")}
                 </react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
 
             <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:8}}>
               <react_native_1.TouchableOpacity onPress={g}hitSlop={8}style={styles.resetBtn}>
-                <react_native_1.Text style={styles.resetBtnText}>Reset All</react_native_1.Text>
+                <react_native_1.Text style={styles.resetBtnText}>{(0,i18n_1.t)("common.resetAll","Reset All")}</react_native_1.Text>
               </react_native_1.TouchableOpacity>
 
-              <react_native_1.TouchableOpacity onPress={f}hitSlop={10}style={styles.closeBtn}>
+              <react_native_1.TouchableOpacity onPress={d}hitSlop={10}style={styles.closeBtn}>
                 <NetworkIcons_1.CloseWhite/>
               </react_native_1.TouchableOpacity>
             </react_native_1.View>
@@ -34,7 +34,7 @@
             <react_native_1.View style={styles.section}>
               <react_native_1.View style={styles.sectionHeaderRow}>
                 <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak}size={12}/>
-                <react_native_1.Text style={styles.sectionTitle}>TIME HORIZON</react_native_1.Text>
+                <react_native_1.Text style={styles.sectionTitle}>{(0,i18n_1.t)("analytics.timeHorizon","TIME HORIZON")}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={styles.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(t=><TouchableScale_1.default key={t.key}onPress={()=>A(t.key)}style={[styles.filterPill,e.timeWindow===t.key&&styles.filterPillActive]}>
@@ -49,41 +49,41 @@
             <react_native_1.View style={styles.section}>
               <react_native_1.View style={styles.sectionHeaderRow}>
                 <NetworkIcons_1.TargetGoalIcon color={AppColors_1.AppColors.grayTextWeak}size={12}/>
-                <react_native_1.Text style={styles.sectionTitle}>EVENT CATEGORIES</react_native_1.Text>
+                <react_native_1.Text style={styles.sectionTitle}>{(0,i18n_1.t)("analytics.eventCategories","EVENT CATEGORIES")}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={styles.chipsWrap}>
                 <TouchableScale_1.default onPress={()=>u("all")}style={[styles.filterPill,h&&styles.filterPillActive]}>
                   {h&&<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.white}size={12}/>}
                   <react_native_1.Text style={[styles.filterPillText,h&&styles.filterPillTextActive]}>
-                    All Categories
+                    {(0,i18n_1.t)("analytics.allCategories","All Categories")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>u("ecommerce")}style={[styles.filterPill,e.categories.has("ecommerce")&&styles.filterPillActive]}>
                   <NetworkIcons_1.CartIcon color={e.categories.has("ecommerce")?AppColors_1.AppColors.white:AppColors_1.AppColors.amber700}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.categories.has("ecommerce")&&styles.filterPillTextActive]}>
-                    Ecommerce
+                    {(0,i18n_1.t)("analytics.ecommerce","Ecommerce")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>u("page_view")}style={[styles.filterPill,e.categories.has("page_view")&&styles.filterPillActive]}>
                   <NetworkIcons_1.GlobeIcon color={e.categories.has("page_view")?AppColors_1.AppColors.white:AppColors_1.AppColors.sky600}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.categories.has("page_view")&&styles.filterPillTextActive]}>
-                    Screens & Pages
+                    {(0,i18n_1.t)("analytics.screensAndPages","Screens & Pages")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>u("system")}style={[styles.filterPill,e.categories.has("system")&&styles.filterPillActive]}>
                   <NetworkIcons_1.BoltIcon color={e.categories.has("system")?AppColors_1.AppColors.white:AppColors_1.AppColors.purple}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.categories.has("system")&&styles.filterPillTextActive]}>
-                    System & Lifecycle
+                    {(0,i18n_1.t)("analytics.systemAndLifecycle","System & Lifecycle")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>u("custom")}style={[styles.filterPill,e.categories.has("custom")&&styles.filterPillActive]}>
                   <NetworkIcons_1.SparkleIcon color={e.categories.has("custom")?AppColors_1.AppColors.white:AppColors_1.AppColors.brandPurple}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.categories.has("custom")&&styles.filterPillTextActive]}>
-                    Custom Events
+                    {(0,i18n_1.t)("analytics.customEvents","Custom Events")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
               </react_native_1.View>
@@ -93,50 +93,48 @@
             <react_native_1.View style={styles.section}>
               <react_native_1.View style={styles.sectionHeaderRow}>
                 <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.grayTextWeak}size={12}/>
-                <react_native_1.Text style={styles.sectionTitle}>
-                  MONETIZATION & ATTRIBUTES
-                </react_native_1.Text>
+                <react_native_1.Text style={styles.sectionTitle}>{(0,i18n_1.t)("analytics.monetizationAttributes","MONETIZATION & ATTRIBUTES")}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={styles.chipsWrap}>
                 <TouchableScale_1.default onPress={()=>p("onlyConversions")}style={[styles.filterPill,e.onlyConversions&&styles.filterPillActive]}>
                   <NetworkIcons_1.TargetGoalIcon color={e.onlyConversions?AppColors_1.AppColors.white:AppColors_1.AppColors.brandPurple}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.onlyConversions&&styles.filterPillTextActive]}>
-                    Conversion Events Only
+                    {(0,i18n_1.t)("analytics.conversionEventsOnly","Conversion Events Only")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>p("hasRevenue")}style={[styles.filterPill,e.hasRevenue&&styles.filterPillActive]}>
                   <NetworkIcons_1.MoneyIcon color={e.hasRevenue?AppColors_1.AppColors.white:AppColors_1.AppColors.emerald600}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.hasRevenue&&styles.filterPillTextActive]}>
-                    With Revenue (Value &gt; 0)
+                    {(0,i18n_1.t)("analytics.withRevenue","With Revenue (Value > 0)")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>p("hasItems")}style={[styles.filterPill,e.hasItems&&styles.filterPillActive]}>
                   <NetworkIcons_1.PackageBoxIcon color={e.hasItems?AppColors_1.AppColors.white:AppColors_1.AppColors.amber700}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.hasItems&&styles.filterPillTextActive]}>
-                    With Items Payload
+                    {(0,i18n_1.t)("analytics.withItemsPayload","With Items Payload")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>p("hasUserProps")}style={[styles.filterPill,e.hasUserProps&&styles.filterPillActive]}>
                   <NetworkIcons_1.SparkleIcon color={e.hasUserProps?AppColors_1.AppColors.white:AppColors_1.AppColors.brandPurple}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.hasUserProps&&styles.filterPillTextActive]}>
-                    With User Properties
+                    {(0,i18n_1.t)("analytics.withUserProperties","With User Properties")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>p("hasParams")}style={[styles.filterPill,e.hasParams&&styles.filterPillActive]}>
                   <NetworkIcons_1.CodeBracketsIcon color={e.hasParams?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.hasParams&&styles.filterPillTextActive]}>
-                    With Custom Params
+                    {(0,i18n_1.t)("analytics.withCustomParams","With Custom Params")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>p("onlyDuplicates")}style={[styles.filterPill,e.onlyDuplicates&&styles.filterPillActive]}>
                   <NetworkIcons_1.RepeatIcon color={e.onlyDuplicates?AppColors_1.AppColors.white:AppColors_1.AppColors.rose600}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.onlyDuplicates&&styles.filterPillTextActive]}>
-                    Frequent Only (&gt; 1×)
+                    {(0,i18n_1.t)("analytics.frequentOnly","Frequent Only (> 1\xD7)")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
               </react_native_1.View>
@@ -146,27 +144,27 @@
             <react_native_1.View style={styles.section}>
               <react_native_1.View style={styles.sectionHeaderRow}>
                 <NetworkIcons_1.UserIcon color={AppColors_1.AppColors.grayTextWeak}size={12}/>
-                <react_native_1.Text style={styles.sectionTitle}>USER IDENTIFICATION</react_native_1.Text>
+                <react_native_1.Text style={styles.sectionTitle}>{(0,i18n_1.t)("analytics.userIdentification","USER IDENTIFICATION")}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={styles.chipsWrap}>
-                <TouchableScale_1.default onPress={()=>T("all")}style={[styles.filterPill,x&&styles.filterPillActive]}>
-                  {x&&<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.white}size={12}/>}
-                  <react_native_1.Text style={[styles.filterPillText,x&&styles.filterPillTextActive]}>
-                    All Users
+                <TouchableScale_1.default onPress={()=>T("all")}style={[styles.filterPill,v&&styles.filterPillActive]}>
+                  {v&&<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.white}size={12}/>}
+                  <react_native_1.Text style={[styles.filterPillText,v&&styles.filterPillTextActive]}>
+                    {(0,i18n_1.t)("analytics.allUsers","All Users")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>T("identified")}style={[styles.filterPill,e.userTypes.has("identified")&&styles.filterPillActive]}>
                   <NetworkIcons_1.UserCheckIcon color={e.userTypes.has("identified")?AppColors_1.AppColors.white:AppColors_1.AppColors.greenColor}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.userTypes.has("identified")&&styles.filterPillTextActive]}>
-                    Identified (User ID)
+                    {(0,i18n_1.t)("analytics.identifiedUser","Identified (User ID)")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>T("anonymous")}style={[styles.filterPill,e.userTypes.has("anonymous")&&styles.filterPillActive]}>
                   <NetworkIcons_1.UserIcon color={e.userTypes.has("anonymous")?AppColors_1.AppColors.white:AppColors_1.AppColors.grayTextWeak}size={13}/>
                   <react_native_1.Text style={[styles.filterPillText,e.userTypes.has("anonymous")&&styles.filterPillTextActive]}>
-                    Anonymous
+                    {(0,i18n_1.t)("analytics.anonymousUser","Anonymous")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
               </react_native_1.View>
@@ -176,25 +174,25 @@
             <react_native_1.View style={styles.section}>
               <react_native_1.View style={styles.sectionHeaderRow}>
                 <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.grayTextWeak}size={12}/>
-                <react_native_1.Text style={styles.sectionTitle}>EVENT SOURCE</react_native_1.Text>
+                <react_native_1.Text style={styles.sectionTitle}>{(0,i18n_1.t)("analytics.eventSource","EVENT SOURCE")}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={styles.chipsWrap}>
                 <TouchableScale_1.default onPress={()=>_("all")}style={[styles.filterPill,w&&styles.filterPillActive]}>
                   {w&&<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.white}size={12}/>}
                   <react_native_1.Text style={[styles.filterPillText,w&&styles.filterPillTextActive]}>
-                    All Sources
+                    {(0,i18n_1.t)("analytics.allSources","All Sources")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>_("firebase")}style={[styles.filterPill,e.sources.has("firebase")&&styles.filterPillActive]}>
                   <react_native_1.Text style={[styles.filterPillText,e.sources.has("firebase")&&styles.filterPillTextActive]}>
-                    Firebase / GA SDK
+                    {(0,i18n_1.t)("analytics.firebaseGaSdk","Firebase / GA SDK")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default onPress={()=>_("manual")}style={[styles.filterPill,e.sources.has("manual")&&styles.filterPillActive]}>
                   <react_native_1.Text style={[styles.filterPillText,e.sources.has("manual")&&styles.filterPillTextActive]}>
-                    In-App Logger
+                    {(0,i18n_1.t)("analytics.inAppLogger","In-App Logger")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
               </react_native_1.View>
@@ -204,10 +202,10 @@
             <react_native_1.View style={styles.section}>
               <react_native_1.View style={styles.sectionHeaderRow}>
                 <NetworkIcons_1.CodeBracketsIcon color={AppColors_1.AppColors.grayTextWeak}size={12}/>
-                <react_native_1.Text style={styles.sectionTitle}>PAYLOAD COMPLEXITY</react_native_1.Text>
+                <react_native_1.Text style={styles.sectionTitle}>{(0,i18n_1.t)("analytics.payloadComplexity","PAYLOAD COMPLEXITY")}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={styles.chipsWrap}>
-                {[{key:"all",label:"All Payloads"},{key:"none",label:"0 Params"},{key:"simple",label:"1 - 5 Params"},{key:"heavy",label:"> 5 Params"}].map(t=><TouchableScale_1.default key={t.key}onPress={()=>m(t.key)}style={[styles.filterPill,e.payloadComplexity===t.key&&styles.filterPillActive]}>
+                {[{key:"all",label:"All Payloads"},{key:"none",label:"0 Params"},{key:"simple",label:"1 - 5 Params"},{key:"heavy",label:"> 5 Params"}].map(t=><TouchableScale_1.default key={t.key}onPress={()=>C(t.key)}style={[styles.filterPill,e.payloadComplexity===t.key&&styles.filterPillActive]}>
                     <react_native_1.Text style={[styles.filterPillText,e.payloadComplexity===t.key&&styles.filterPillTextActive]}>
                       {t.label}
                     </react_native_1.Text>
@@ -216,15 +214,15 @@
             </react_native_1.View>
 
             
-            {y.length>0&&<react_native_1.View style={styles.section}>
+            {f.length>0&&<react_native_1.View style={styles.section}>
                 <react_native_1.View style={styles.sectionHeaderRow}>
                   <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.grayTextWeak}size={12}/>
                   <react_native_1.Text style={styles.sectionTitle}>
-                    DISCOVERED SCREENS ({y.length})
+                    DISCOVERED SCREENS ({f.length})
                   </react_native_1.Text>
                 </react_native_1.View>
                 <react_native_1.View style={styles.chipsWrap}>
-                  {y.map(t=>{const l=e.screens.has(t);return<TouchableScale_1.default key={t}onPress={()=>C(t)}style={[styles.filterPill,l&&styles.filterPillActive]}>
+                  {f.map(t=>{const l=e.screens.has(t);return<TouchableScale_1.default key={t}onPress={()=>m(t)}style={[styles.filterPill,l&&styles.filterPillActive]}>
                         <NetworkIcons_1.PinIcon color={l?AppColors_1.AppColors.white:AppColors_1.AppColors.amber700}size={12}/>
                         <react_native_1.Text style={[styles.filterPillText,l&&styles.filterPillTextActive]}>
                           {t}
@@ -237,34 +235,34 @@
             <react_native_1.View style={styles.section}>
               <react_native_1.View style={styles.sectionHeaderRow}>
                 <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak}size={12}/>
-                <react_native_1.Text style={styles.sectionTitle}>SORT ORDER</react_native_1.Text>
+                <react_native_1.Text style={styles.sectionTitle}>{(0,i18n_1.t)("analytics.sortOrder","SORT ORDER")}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={styles.chipsWrap}>
-                <TouchableScale_1.default onPress={()=>d("time_desc")}style={[styles.filterPill,e.sortBy==="time_desc"&&styles.filterPillActive]}>
+                <TouchableScale_1.default onPress={()=>y("time_desc")}style={[styles.filterPill,e.sortBy==="time_desc"&&styles.filterPillActive]}>
                   <NetworkIcons_1.ClockIcon color={e.sortBy==="time_desc"?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}size={12}/>
                   <react_native_1.Text style={[styles.filterPillText,e.sortBy==="time_desc"&&styles.filterPillTextActive]}>
-                    Newest First (Default)
+                    {(0,i18n_1.t)("analytics.newestFirstDefault","Newest First (Default)")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default onPress={()=>d("time_asc")}style={[styles.filterPill,e.sortBy==="time_asc"&&styles.filterPillActive]}>
+                <TouchableScale_1.default onPress={()=>y("time_asc")}style={[styles.filterPill,e.sortBy==="time_asc"&&styles.filterPillActive]}>
                   <NetworkIcons_1.HourglassIcon color={e.sortBy==="time_asc"?AppColors_1.AppColors.white:AppColors_1.AppColors.grayText}size={12}/>
                   <react_native_1.Text style={[styles.filterPillText,e.sortBy==="time_asc"&&styles.filterPillTextActive]}>
-                    Oldest First
+                    {(0,i18n_1.t)("analytics.oldestFirst","Oldest First")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default onPress={()=>d("revenue_desc")}style={[styles.filterPill,e.sortBy==="revenue_desc"&&styles.filterPillActive]}>
+                <TouchableScale_1.default onPress={()=>y("revenue_desc")}style={[styles.filterPill,e.sortBy==="revenue_desc"&&styles.filterPillActive]}>
                   <NetworkIcons_1.MoneyIcon color={e.sortBy==="revenue_desc"?AppColors_1.AppColors.white:AppColors_1.AppColors.emerald600}size={12}/>
                   <react_native_1.Text style={[styles.filterPillText,e.sortBy==="revenue_desc"&&styles.filterPillTextActive]}>
-                    Highest Revenue
+                    {(0,i18n_1.t)("analytics.highestRevenue","Highest Revenue")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default onPress={()=>d("count_desc")}style={[styles.filterPill,e.sortBy==="count_desc"&&styles.filterPillActive]}>
+                <TouchableScale_1.default onPress={()=>y("count_desc")}style={[styles.filterPill,e.sortBy==="count_desc"&&styles.filterPillActive]}>
                   <NetworkIcons_1.FlameIcon color={e.sortBy==="count_desc"?AppColors_1.AppColors.white:AppColors_1.AppColors.darkOrange}size={12}/>
                   <react_native_1.Text style={[styles.filterPillText,e.sortBy==="count_desc"&&styles.filterPillTextActive]}>
-                    Most Frequent
+                    {(0,i18n_1.t)("analytics.mostFrequent","Most Frequent")}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
               </react_native_1.View>
@@ -273,8 +271,8 @@
 
           
           <react_native_1.View style={styles.footer}>
-            <react_native_1.TouchableOpacity onPress={f}style={styles.discardBtn}activeOpacity={.8}>
-              <react_native_1.Text style={styles.discardBtnText}>Discard</react_native_1.Text>
+            <react_native_1.TouchableOpacity onPress={d}style={styles.discardBtn}activeOpacity={.8}>
+              <react_native_1.Text style={styles.discardBtnText}>{(0,i18n_1.t)("common.discard","Discard")}</react_native_1.Text>
             </react_native_1.TouchableOpacity>
 
             <react_native_1.TouchableOpacity onPress={b}style={styles.applyBtn}activeOpacity={.85}>

package/dist/commonjs/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/commonjs/components/Inspector/BoxModelVisualizer.js

@@ -0,0 +1,76 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.BoxModelVisualizer=void 0;const react_1=__importDefault(require("react")),react_native_1=require("react-native"),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),BoxModelVisualizer=({boxModel:e,compact:a=!1})=>{const{margin:t,border:o,padding:i,content:r}=e;return<react_native_1.View style={visualizerStyles.container}>
+      
+      <react_native_1.View style={visualizerStyles.marginBox}>
+        <react_native_1.View style={visualizerStyles.labelRow}>
+          <react_native_1.Text style={visualizerStyles.boxLabelMargin}>MARGIN</react_native_1.Text>
+        </react_native_1.View>
+        <react_native_1.Text style={visualizerStyles.valueTop}>{t.top}</react_native_1.Text>
+
+        <react_native_1.View style={visualizerStyles.middleRow}>
+          <react_native_1.Text style={visualizerStyles.valueLeft}>{t.left}</react_native_1.Text>
+
+          
+          <react_native_1.View style={visualizerStyles.borderBox}>
+            <react_native_1.View style={visualizerStyles.labelRow}>
+              <react_native_1.Text style={visualizerStyles.boxLabelBorder}>BORDER</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={visualizerStyles.valueTop}>{o.top}</react_native_1.Text>
+
+            <react_native_1.View style={visualizerStyles.middleRow}>
+              <react_native_1.Text style={visualizerStyles.valueLeft}>{o.left}</react_native_1.Text>
+
+              
+              <react_native_1.View style={visualizerStyles.paddingBox}>
+                <react_native_1.View style={visualizerStyles.labelRow}>
+                  <react_native_1.Text style={visualizerStyles.boxLabelPadding}>PADDING</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Text style={visualizerStyles.valueTop}>{i.top}</react_native_1.Text>
+
+                <react_native_1.View style={visualizerStyles.middleRow}>
+                  <react_native_1.Text style={visualizerStyles.valueLeft}>{i.left}</react_native_1.Text>
+
+                  
+                  <react_native_1.View style={visualizerStyles.contentBox}>
+                    <react_native_1.Text style={visualizerStyles.contentDimensions}>
+                      {r.width} × {r.height}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+
+                  <react_native_1.Text style={visualizerStyles.valueRight}>{i.right}</react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.Text style={visualizerStyles.valueBottom}>{i.bottom}</react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.Text style={visualizerStyles.valueRight}>{o.right}</react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.Text style={visualizerStyles.valueBottom}>{o.bottom}</react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.Text style={visualizerStyles.valueRight}>{t.right}</react_native_1.Text>
+        </react_native_1.View>
+
+        <react_native_1.Text style={visualizerStyles.valueBottom}>{t.bottom}</react_native_1.Text>
+      </react_native_1.View>
+
+      
+      {!a&&<react_native_1.View style={visualizerStyles.legendContainer}>
+          <react_native_1.View style={visualizerStyles.legendItem}>
+            <react_native_1.View style={[visualizerStyles.legendSwatch,{backgroundColor:"#F59E0B2B",borderColor:"#F59E0B"}]}/>
+            <react_native_1.Text style={visualizerStyles.legendText}>Margin</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={visualizerStyles.legendItem}>
+            <react_native_1.View style={[visualizerStyles.legendSwatch,{backgroundColor:"#FDE0473D",borderColor:"#EAB308"}]}/>
+            <react_native_1.Text style={visualizerStyles.legendText}>Border</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={visualizerStyles.legendItem}>
+            <react_native_1.View style={[visualizerStyles.legendSwatch,{backgroundColor:"#10B9812B",borderColor:"#10B981"}]}/>
+            <react_native_1.Text style={visualizerStyles.legendText}>Padding</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={visualizerStyles.legendItem}>
+            <react_native_1.View style={[visualizerStyles.legendSwatch,{backgroundColor:"#4F46E52B",borderColor:"#4F46E5"}]}/>
+            <react_native_1.Text style={visualizerStyles.legendText}>Content</react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>}
+    </react_native_1.View>};exports.BoxModelVisualizer=BoxModelVisualizer;const visualizerStyles=react_native_1.StyleSheet.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:AppFonts_1.AppFonts.medium,color:"#D97706",letterSpacing:.5},boxLabelBorder:{fontSize:9,fontFamily:AppFonts_1.AppFonts.medium,color:"#CA8A04",letterSpacing:.5},boxLabelPadding:{fontSize:9,fontFamily:AppFonts_1.AppFonts.medium,color:"#059669",letterSpacing:.5},middleRow:{flexDirection:"row",alignItems:"center",width:"100%",marginVertical:2},valueTop:{fontSize:11,fontFamily:AppFonts_1.AppFonts.semiBold,color:AppColors_1.AppColors.grayText,marginBottom:2},valueBottom:{fontSize:11,fontFamily:AppFonts_1.AppFonts.semiBold,color:AppColors_1.AppColors.grayText,marginTop:2},valueLeft:{fontSize:11,fontFamily:AppFonts_1.AppFonts.semiBold,color:AppColors_1.AppColors.grayText,marginRight:2},valueRight:{fontSize:11,fontFamily:AppFonts_1.AppFonts.semiBold,color:AppColors_1.AppColors.grayText,marginLeft:2},contentDimensions:{fontSize:12,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.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:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.grayTextWeak}});