react-native-inapp-inspector 2.3.5 → 2.3.7

package/dist/commonjs/types/enums.js

@@ -1,7 +1,4 @@
 "use strict";
-// ─── Enums & Constants ─────────────────────────────────────────────────────────
-// Universal TypeScript Enum Objects and Type Aliases.
-// Allows both enum-style access (e.g. ActiveTab.Apis) and string literals ('apis').
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BreadcrumbType = exports.CrashFilterType = exports.CrashDetailSubTab = exports.CrashExportFormat = exports.CrashType = exports.PerformanceSubTab = exports.BundleSubTab = exports.DiffResultType = exports.StackFrameType = exports.GAEventCategory = exports.AnalyticsEventSource = exports.ConsoleLogType = exports.LogFilter = exports.SettingsSubTab = exports.SettingsPage = exports.ModalAnimationType = exports.LocalFilter = exports.SortOrder = exports.StatusFilter = exports.Method = exports.ActiveTab = void 0;
 exports.ActiveTab = {

package/dist/commonjs/types/interfaces.d.ts

@@ -55,7 +55,6 @@ export interface ConsoleLog {
     errorStack?: string;
     rawArgs?: any[];
     sourceMethod?: 'log' | 'info' | 'warn' | 'error';
-    /** #9 — number of consecutive identical logs collapsed into this entry. */
     duplicateCount?: number;
 }
 export interface AnalyticsEvent {
@@ -101,9 +100,7 @@ export interface NetworkLog {
     response?: unknown;
     requestHeaders?: Record<string, string>;
     responseHeaders?: Record<string, string>;
-    /** #9 — number of consecutive identical requests collapsed into this entry. */
     duplicateCount?: number;
-    /** Client identifier: axios, fetch, xhr, apollo, etc. */
     client?: 'axios' | 'fetch' | 'xhr' | 'apollo' | 'graphql' | string;
     caller?: string;
     routeInfo?: RouteInfo;
@@ -154,9 +151,12 @@ export interface PersistedSettings {
     reduxExpandDepth?: number;
     showDuplicateLogs?: boolean;
     showUpdateToast?: boolean;
+    telemetryClientId?: string;
+    telemetryLastPing?: number;
 }
 export interface NetworkInspectorProps {
     enabled?: boolean;
+    telemetry?: boolean;
     storage?: InspectorStorage;
     navigationRef?: any;
     appIcon?: any;

package/dist/esm/analytics.d.ts

@@ -1,7 +1,3 @@
-/**
- * Sub-module entry point: react-native-inapp-inspector/analytics
- * Clean tree-shaking & isolated Firebase/custom Analytics logger.
- */
 export { setupAnalyticsLogger, autoSetupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clearAnalyticsEvents, getAnalyticsEvents, isAnalyticsConnected, isFirebaseAnalyticsPatched, setAnalyticsModuleEnabled, getAnalyticsModuleEnabled, getCurrentUserProperties, getCurrentUserId, getDefaultEventParameters, getCollectionEnabled, setMaxAnalyticsLogsLimit, getMaxAnalyticsLogsLimit, pruneAnalyticsLogs, } from './customHooks/analyticsLogger';
 export { getEventCategory, registerGAPlugin, type GAPlugin, } from './helpers/gaAnalyticsRegistry';
 export type { AnalyticsEvent, AnalyticsEventSource, GAEventCategory, } from './types';

package/dist/esm/analytics.js

@@ -1,6 +1,2 @@
-/**
- * Sub-module entry point: react-native-inapp-inspector/analytics
- * Clean tree-shaking & isolated Firebase/custom Analytics logger.
- */
 export { setupAnalyticsLogger, autoSetupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clearAnalyticsEvents, getAnalyticsEvents, isAnalyticsConnected, isFirebaseAnalyticsPatched, setAnalyticsModuleEnabled, getAnalyticsModuleEnabled, getCurrentUserProperties, getCurrentUserId, getDefaultEventParameters, getCollectionEnabled, setMaxAnalyticsLogsLimit, getMaxAnalyticsLogsLimit, pruneAnalyticsLogs, } from './customHooks/analyticsLogger';
 export { getEventCategory, registerGAPlugin, } from './helpers/gaAnalyticsRegistry';

package/dist/esm/bundle.d.ts

@@ -1,6 +1,2 @@
-/**
- * Sub-module entry point: react-native-inapp-inspector/bundle
- * Clean tree-shaking & isolated JS bundle size analyzer.
- */
 export { analyzeHostAppBundle, parseBundleSource, getInitialBundleAnalysis, getCachedBundleAnalysis, clearCachedBundleAnalysis, setBundleModuleEnabled, getBundleModuleEnabled, getHostScriptURL, trackRuntimeModuleExecution, trackRuntimeDefine, type HostBundleAnalysisResult, type HostBundleFileItem, type HostBundlePackageItem, type HostBinaryComponentItem, type FileTypeCategory, } from './customHooks/bundleAnalyzer';
 export { BundleSubTab, } from './types';

package/dist/esm/bundle.js

@@ -1,6 +1,2 @@
-/**
- * Sub-module entry point: react-native-inapp-inspector/bundle
- * Clean tree-shaking & isolated JS bundle size analyzer.
- */
 export { analyzeHostAppBundle, parseBundleSource, getInitialBundleAnalysis, getCachedBundleAnalysis, clearCachedBundleAnalysis, setBundleModuleEnabled, getBundleModuleEnabled, getHostScriptURL, trackRuntimeModuleExecution, trackRuntimeDefine, } from './customHooks/bundleAnalyzer';
 export { BundleSubTab, } from './types';

package/dist/esm/components/AnalyticsDetail.js

@@ -1,12 +1,10 @@
 import React, { useState, useMemo } from 'react';
 import { Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
-// Components
 import CopyButton from './CopyButton';
 import JsonViewer from './JsonViewer';
 import SegmentedTabs from './SegmentedTabs';
 import HighlightText from './HighlightText';
 import AnimatedEntrance from './AnimatedEntrance';
-// Helpers & Icons
 import { AppFonts } from '../styles/AppFonts';
 import { AppColors } from '../styles/AppColors';
 import { getSize, formatDateTime } from '../helpers';
@@ -22,7 +20,6 @@ const AnalyticsDetail = ({ event, }) => {
     const paramKeys = useMemo(() => Object.keys(params), [params]);
     const userPropKeys = useMemo(() => Object.keys(userProperties), [userProperties]);
     const category = useMemo(() => getEventCategory(event.name, params), [event.name, params]);
-    // Combined full JSON payload
     const fullJsonData = useMemo(() => ({
         name: event.name,
         timestamp: event.timestamp,
@@ -35,7 +32,6 @@ const AnalyticsDetail = ({ event, }) => {
         params,
         ...(userPropKeys.length > 0 ? { userProperties } : {}),
     }), [event, params, userPropKeys.length, userProperties]);
-    // E-commerce revenue calculation
     const revenueInfo = useMemo(() => {
         const val = params.value ?? params.price;
         const currency = params.currency ?? 'USD';
@@ -47,14 +43,12 @@ const AnalyticsDetail = ({ event, }) => {
         }
         return null;
     }, [params]);
-    // Items count if an items array exists
     const itemsCount = useMemo(() => {
         if (Array.isArray(params.items)) {
             return params.items.length;
         }
         return null;
     }, [params.items]);
-    // Screen Context
     const screenContext = useMemo(() => {
         return (event.screenName ||
             params.firebase_screen ||
@@ -63,7 +57,6 @@ const AnalyticsDetail = ({ event, }) => {
             event.screenClass ||
             params.firebase_screen_class);
     }, [event.screenName, event.screenClass, params]);
-    // Filtered parameter entries
     const filteredParamEntries = useMemo(() => {
         const entries = Object.entries(params);
         if (!paramSearch.trim())
@@ -74,7 +67,6 @@ const AnalyticsDetail = ({ event, }) => {
             return k.toLowerCase().includes(q) || valStr.toLowerCase().includes(q);
         });
     }, [params, paramSearch]);
-    // Category Theme Meta
     const catMeta = useMemo(() => {
         switch (category) {
             case 'ecommerce':
@@ -130,12 +122,12 @@ const AnalyticsDetail = ({ event, }) => {
     ];
     return (<ScrollView style={detailStyles.scroll} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
       
-      {/* ── 1. Hero Event Header Card ────────────────────────────────────── */}
+      
       <View style={detailStyles.heroCard}>
-        {/* Top Badges Row */}
+        
         <View style={detailStyles.heroTopRow}>
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap', flex: 1 }}>
-            {/* Source Badge */}
+            
             <View style={[
             detailStyles.sourceBadge,
             event.source === 'firebase'
@@ -162,7 +154,7 @@ const AnalyticsDetail = ({ event, }) => {
               </Text>
             </View>
 
-            {/* Category Badge */}
+            
             <View style={[
             detailStyles.catBadge,
             { backgroundColor: catMeta.bg, borderColor: catMeta.border },
@@ -174,18 +166,18 @@ const AnalyticsDetail = ({ event, }) => {
             </View>
           </View>
 
-          {/* Copy Full Event JSON Button */}
+          
           <CopyButton value={JSON.stringify(fullJsonData, null, 2)} label={t('analytics.eventDetails')}/>
         </View>
 
-        {/* Event Name Heading */}
+        
         <View style={detailStyles.titleRow}>
           <Text style={detailStyles.eventTitle} selectable numberOfLines={2}>
             {event.name}
           </Text>
         </View>
 
-        {/* Sub Details Row: Timestamp & Screen Location */}
+        
         <View style={detailStyles.metaRow}>
           <View style={detailStyles.timePill}>
             <ClockIcon color={AppColors.purple} size={11}/>
@@ -202,7 +194,7 @@ const AnalyticsDetail = ({ event, }) => {
             </View>)}
         </View>
 
-        {/* ── 2. Metric Pills Summary ──────────────────────────────────────── */}
+        
         <View style={detailStyles.metricsBar}>
           <View style={detailStyles.metricPill}>
             <Text style={detailStyles.metricLabel}>Params:</Text>
@@ -235,14 +227,14 @@ const AnalyticsDetail = ({ event, }) => {
         </View>
       </View>
 
-      {/* ── 3. View Switcher Tabs (Overview, Tree, Raw) ───────────────────── */}
+      
       <View style={detailStyles.tabsWrap}>
         <SegmentedTabs tabs={viewTabs} activeKey={activeViewTab} onChange={key => setActiveViewTab(key)}/>
       </View>
 
-      {/* ── 4. Main Tab Body Content ───────────────────────────────────────── */}
+      
       {activeViewTab === 'overview' && (<View style={detailStyles.tabContent}>
-          {/* Metadata Card (Session, User ID, Client ID) */}
+          
           {(event.userId || event.sessionId || event.trackingId) && (<View style={detailStyles.sectionCard}>
               <View style={detailStyles.sectionHeader}>
                 <LayersIcon color={AppColors.purple} size={12}/>
@@ -264,7 +256,7 @@ const AnalyticsDetail = ({ event, }) => {
               </View>
             </View>)}
 
-          {/* Parameters Table Section */}
+          
           <View style={detailStyles.sectionCard}>
             <View style={detailStyles.sectionHeaderBetween}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -278,7 +270,7 @@ const AnalyticsDetail = ({ event, }) => {
               </Text>
             </View>
 
-            {/* Search filter within parameters (if > 4 params) */}
+            
             {paramKeys.length > 4 && (<View style={detailStyles.searchBar}>
                 <SearchIcon color={AppColors.grayTextWeak} size={13}/>
                 <TextInput placeholder="Filter parameters by key or value..." placeholderTextColor={AppColors.grayTextWeak} value={paramSearch} onChangeText={setParamSearch} style={detailStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
@@ -308,7 +300,6 @@ const AnalyticsDetail = ({ event, }) => {
                     else if (isObject)
                         typeStr = 'object';
                     const valString = isObject ? JSON.stringify(val, null, 2) : String(val);
-                    // Highlight standard GA4 ecom/screen keys
                     const isKeyHighlighted = key === 'value' ||
                         key === 'price' ||
                         key === 'currency' ||
@@ -317,7 +308,7 @@ const AnalyticsDetail = ({ event, }) => {
                         key === 'item_name';
                     return (<AnimatedEntrance key={key} index={pIdx} distance={4}>
                       <View style={detailStyles.paramCard}>
-                        {/* Param Top Row: Key + Type + Copy */}
+                        
                         <View style={detailStyles.paramCardHeader}>
                           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0 }}>
                             <HighlightText text={key} search={paramSearch} style={[
@@ -334,7 +325,7 @@ const AnalyticsDetail = ({ event, }) => {
                           <CopyButton value={valString} label={key}/>
                         </View>
 
-                        {/* Param Value Display */}
+                        
                         <View style={detailStyles.paramValBox}>
                           {isObject ? (<JsonViewer data={val} search={paramSearch} hideTabs wrap/>) : (<HighlightText text={valString} search={paramSearch} style={detailStyles.paramValText} highlightStyle={detailStyles.highlight} selectable/>)}
                         </View>
@@ -344,7 +335,7 @@ const AnalyticsDetail = ({ event, }) => {
               </View>)}
           </View>
 
-          {/* User Properties Section (if any) */}
+          
           {userPropKeys.length > 0 && (<View style={detailStyles.sectionCard}>
               <View style={detailStyles.sectionHeader}>
                 <SparkleIcon color={AppColors.purple} size={12}/>
@@ -363,12 +354,12 @@ const AnalyticsDetail = ({ event, }) => {
             </View>)}
         </View>)}
 
-      {/* ── JSON Tree View ────────────────────────────────────────────────── */}
+      
       {activeViewTab === 'tree' && (<View style={detailStyles.jsonContainer}>
           <JsonViewer data={fullJsonData} defaultExpandDepth={1} mode="pretty" fullHeight/>
         </View>)}
 
-      {/* ── Raw Payload View ──────────────────────────────────────────────── */}
+      
       {activeViewTab === 'raw' && (<View style={detailStyles.jsonContainer}>
           <JsonViewer data={fullJsonData} mode="raw" fullHeight/>
         </View>)}

package/dist/esm/components/AnalyticsEventCard.js

@@ -7,7 +7,6 @@ import { useTranslation } from '../i18n';
 import HighlightText from './HighlightText';
 import TouchableScale from './TouchableScale';
 import { CartIcon, MoneyIcon, GlobeIcon, BoltIcon, SparkleIcon, ClockIcon, } from './NetworkIcons';
-// ─── Component ────────────────────────────────────────────────────────────────
 const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
     const { t } = useTranslation();
     const color = getEventColor(event.name);
@@ -17,7 +16,6 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
         : 0;
     const catKey = getEventCategory(event.name);
     const tagColors = getCategoryColors(catKey);
-    // Flash animation for newly logged events
     const flashOpacity = useRef(new Animated.Value(isNew ? 1 : 0)).current;
     useEffect(() => {
         if (isNew) {
@@ -37,7 +35,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
                 ? t('analytics.systemCategory')
                 : t('analytics.customCategory');
     return (<View style={cardStyles.container}>
-      {/* ── Gap Indicator ─────────────────────────────────────────────────── */}
+      
       {showGap && (<View style={cardStyles.gapContainer}>
           <View style={cardStyles.gapLine}/>
           <Text style={[cardStyles.gapText, { color: AppColors.grayTextWeak }]}>
@@ -46,7 +44,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
           <View style={cardStyles.gapLine}/>
         </View>)}
 
-      {/* ── Main Card ─────────────────────────────────────────────────────── */}
+      
       <TouchableScale onPress={onPress} style={[
             cardStyles.modernCard,
             {
@@ -65,10 +63,10 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             },
         ]}/>
 
-        {/* Top Row: Icon Badge, Event Name, Category Badge & Timestamp */}
+        
         <View style={cardStyles.cardHeader}>
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 7, flex: 1 }}>
-            {/* Category Icon Badge */}
+            
             <View style={[
             cardStyles.iconBadge,
             { backgroundColor: tagColors.bg, borderColor: tagColors.border },
@@ -76,10 +74,10 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
               {catKey === 'ecommerce' ? (<CartIcon color={tagColors.text} size={12}/>) : catKey === 'page_view' ? (<GlobeIcon color={tagColors.text} size={12}/>) : catKey === 'system' ? (<BoltIcon color={tagColors.text} size={12}/>) : (<SparkleIcon color={tagColors.text} size={12}/>)}
             </View>
 
-            {/* Event Name */}
+            
             <HighlightText text={event.name} search={searchStr} style={[cardStyles.eventName, { color: AppColors.primaryBlack }]} highlightStyle={cardStyles.highlight} numberOfLines={1}/>
 
-            {/* Category Pill Tag */}
+            
             <View style={[
             cardStyles.categoryBadge,
             { backgroundColor: tagColors.bg, borderColor: tagColors.border },
@@ -89,7 +87,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
               </Text>
             </View>
 
-            {/* Duplicate Multiplier */}
+            
             {event.count !== undefined && event.count > 0 ? (<View style={[
                 cardStyles.duplicateBadge,
                 event.count === 1 && {
@@ -106,7 +104,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
               </View>) : null}
           </View>
 
-          {/* Timestamp */}
+          
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
             <ClockIcon color={AppColors.grayTextWeak} size={10}/>
             <Text style={[cardStyles.timestamp, { color: AppColors.grayTextWeak }]}>
@@ -115,7 +113,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
           </View>
         </View>
 
-        {/* Bottom Row: Metadata Chips (Screen, Params, Value) */}
+        
         <View style={cardStyles.cardBody}>
           <View style={cardStyles.chipsRow}>
             {(() => {
@@ -230,7 +228,6 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
       </TouchableScale>
     </View>);
 });
-// ─── Styles ───────────────────────────────────────────────────────────────────
 const cardStyles = StyleSheet.create({
     container: {
         paddingHorizontal: 10,

package/dist/esm/components/AnalyticsGraph.js

@@ -7,10 +7,8 @@ const BAR_HEIGHT = 24;
 const PADDING_Y = 12;
 const AnalyticsGraph = ({ event, accentColor }) => {
     const params = event.params || {};
-    // 1. Check for E-commerce items array
     const itemsArray = Array.isArray(params.items) ? params.items : null;
     const filteredItems = itemsArray?.filter((item) => typeof item.price === 'number') || [];
-    // 2. Discover root-level numeric fields (exclude ids)
     const rootNumericKeys = [];
     Object.entries(params).forEach(([k, v]) => {
         if (typeof v === 'number' &&
@@ -19,7 +17,6 @@ const AnalyticsGraph = ({ event, accentColor }) => {
             rootNumericKeys.push({ key: k, value: v });
         }
     });
-    // 3. Discover dates (YYYY-MM-DD format commonly used in booking/flights)
     const dateKeys = [];
     Object.entries(params).forEach(([k, v]) => {
         if (typeof v === 'string' &&
@@ -31,7 +28,6 @@ const AnalyticsGraph = ({ event, accentColor }) => {
             }
         }
     });
-    // 4. Calculate parameter types
     const paramTypes = { string: 0, number: 0, boolean: 0, object: 0 };
     const strings = [];
     Object.entries(params).forEach(([k, v]) => {
@@ -53,7 +49,7 @@ const AnalyticsGraph = ({ event, accentColor }) => {
     const typeData = [
         { label: 'Strings', value: paramTypes.string, color: AppColors.purple },
         { label: 'Numbers', value: paramTypes.number, color: AppColors.skyBlue },
-        { label: 'Booleans', value: paramTypes.boolean, color: AppColors.amber500 }, // Amber
+        { label: 'Booleans', value: paramTypes.boolean, color: AppColors.amber500 },
         { label: 'Objects', value: paramTypes.object, color: AppColors.greenColor },
     ].filter(d => d.value > 0);
     strings.sort((a, b) => b.value - a.value);
@@ -63,8 +59,8 @@ const AnalyticsGraph = ({ event, accentColor }) => {
     const hasDatesChart = dateKeys.length > 0;
     const hasStringsChart = topStrings.length > 0;
     const hasTypeData = typeData.length > 0;
-    const screenWidth = Dimensions.get('window').width - 60; // Padding adjustments
-    const rightMargin = 40; // Space for labels at the end of the bar
+    const screenWidth = Dimensions.get('window').width - 60;
+    const rightMargin = 40;
     const maxBarWidth = screenWidth - rightMargin;
     return (<View style={graphStyles.container}>
       <Text style={graphStyles.headerTitle}>Data Visualization</Text>
@@ -98,7 +94,6 @@ const AnalyticsGraph = ({ event, accentColor }) => {
         </View>)}
     </View>);
 };
-// --- Donut Chart Helpers ---
 const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
     const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
     return {
@@ -183,7 +178,7 @@ const GaugeChart = ({ data, accentColor, }) => {
         }}>
       {data.map(d => {
             const fillPct = Math.min(Math.abs(d.value) / maxVal, 1);
-            const strokeDashoffset = Math.max(circumference - fillPct * circumference, 0.001); // avoid exact 0
+            const strokeDashoffset = Math.max(circumference - fillPct * circumference, 0.001);
             return (<View key={d.label} style={{ alignItems: 'center', width: 70 }}>
             <Svg width="60" height="60" viewBox="0 0 60 60">
               <Circle cx="30" cy="30" r={radius} stroke={AppColors.grayBorderSecondary} strokeWidth={stroke} fill="none"/>
@@ -259,7 +254,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                     shadowOffset: { width: 0, height: 2 },
                     elevation: 2,
                 }}>
-              {/* Calendar Header with Accent Color */}
+              
               <View style={{
                     backgroundColor: accentColor,
                     height: 18,
@@ -276,7 +271,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                   {monthText} {yearText}
                 </Text>
               </View>
-              {/* Calendar Body */}
+              
               <View style={{
                     flex: 1,
                     justifyContent: 'center',
@@ -321,18 +316,18 @@ const BarChart = ({ data, accentColor, maxBarWidth, isGradient = false, }) => {
             const y = i * (BAR_HEIGHT + PADDING_Y);
             const barWidth = Math.max((d.value / maxVal) * maxBarWidth, 2);
             return (<React.Fragment key={d.label}>
-              {/* Label above bar */}
+              
               <SvgText x={0} y={y + 12} fill={AppColors.grayTextStrong} fontSize="11" fontFamily={AppFonts.interMedium}>
                 {d.label}
               </SvgText>
 
-              {/* Background trace line */}
+              
               <Line x1={0} y1={y + 24} x2={maxBarWidth} y2={y + 24} stroke={AppColors.grayBorderSecondary} strokeDasharray="4"/>
 
-              {/* The actual Bar */}
+              
               <Rect x={0} y={y + 16} width={barWidth} height={14} fill={isGradient ? 'url(#barGrad)' : accentColor} rx={4} opacity={0.85}/>
 
-              {/* Value Text at the end of the bar */}
+              
               <SvgText x={barWidth + 6} y={y + 26} fill={AppColors.primaryBlack} fontSize="11" fontFamily={AppFonts.interBold}>
                 {d.value}
               </SvgText>

package/dist/esm/components/AppHeaderLogo.js

@@ -3,7 +3,6 @@ import { Image, Platform, StyleSheet, View, } from 'react-native';
 import BrandSquareIcon from './BrandSquareIcon';
 export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
     const [loadError, setLoadError] = useState(false);
-    // 1. If customIcon is explicitly provided, render it directly edge-to-edge
     if (customIcon) {
         if (React.isValidElement(customIcon)) {
             const clonedIcon = React.cloneElement(customIcon, {
@@ -33,7 +32,6 @@ export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
         <Image source={customIcon} style={logoStyles.image} resizeMode="cover"/>
       </View>);
     }
-    // 2. Dynamically query installed native app icon (AppIcon on iOS, ic_launcher on Android)
     if (!loadError && Platform.OS !== 'web') {
         const nativeSource = Platform.select({
             ios: { uri: 'AppIcon' },
@@ -51,7 +49,6 @@ export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
         <Image source={nativeSource} style={logoStyles.image} resizeMode="cover" onError={() => setLoadError(true)}/>
       </View>);
     }
-    // 3. Fallback: Inspector's Signature Owl Brand Logo
     return (<View style={[
             logoStyles.svgContainer,
             {

package/dist/esm/components/BrandCircleIcon.js

@@ -59,18 +59,18 @@ export const BrandCircleIcon = ({ size = 56 }) => {
       <Circle cx="128" cy="128" r="121.4" fill="none" stroke="url(#edge)" strokeOpacity={0.7} strokeWidth={1.4}/>
       <Circle cx="128" cy="128" r="100" fill="url(#halo)"/>
       <G transform="translate(128 132) scale(1.05) translate(-128 -134)">
-        {/* wing 1 */}
+        
         <Path d="M74 124 C58 154 60 190 86 204 C79 176 77 148 88 126 Z" fill="url(#wing)" stroke="url(#beam)" strokeWidth={2.5} strokeOpacity={0.45}/>
-        {/* wing 2 */}
+        
         <Path d="M182 124 C198 154 196 190 170 204 C177 176 179 148 168 126 Z" fill="url(#wing)" stroke="url(#beam)" strokeWidth={2.5} strokeOpacity={0.45}/>
-        {/* body */}
+        
         <Path d="M62 150 C58 104 70 70 90 58 L98 42 L116 62 Q128 57 140 62 L158 42 L166 58 C186 70 198 104 194 150 C198 180 184 204 152 212 C140 216 116 216 104 212 C72 204 58 180 62 150 Z" fill="url(#owlbody)" stroke="url(#beam)" strokeWidth={4} strokeLinejoin="round"/>
         
-        {/* inner-ear shadows */}
+        
         <Path d="M99 48 L114 62 L104 63 L98 55 Z" fill="#080F22" opacity={0.5}/>
         <Path d="M157 48 L142 62 L152 63 L158 55 Z" fill="#080F22" opacity={0.5}/>
 
-        {/* wing feather lines */}
+        
         <G stroke="#22325A" strokeWidth={2.2} fill="none" strokeLinecap="round" opacity={0.75}>
           <Path d="M80 138 q-5 26 3 50"/>
           <Path d="M90 134 q-4 26 3 48"/>
@@ -78,10 +78,10 @@ export const BrandCircleIcon = ({ size = 56 }) => {
           <Path d="M166 134 q4 26 -3 48"/>
         </G>
 
-        {/* belly plate */}
+        
         <Path d="M128 126 C151 126 164 148 162 174 C160 198 146 212 128 212 C110 212 96 198 94 174 C92 148 105 126 128 126 Z" fill="url(#belly)"/>
 
-        {/* belly feather scallops */}
+        
         <G stroke="#3E588C" strokeWidth={2.3} fill="none" strokeLinecap="round" opacity={0.4}>
           <Path d="M110 154 Q118 162 126 154"/>
           <Path d="M126 154 Q134 162 142 154"/>
@@ -92,7 +92,7 @@ export const BrandCircleIcon = ({ size = 56 }) => {
           <Path d="M128 190 Q136 198 144 190"/>
         </G>
 
-        {/* developer chest screen + code emblem */}
+        
         <Rect x={107} y={161} width={42} height={32} rx={9} fill="#0C1426" stroke="url(#beam)" strokeWidth={2} strokeOpacity={0.7}/>
         <G stroke="#8FD0EC" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill="none">
           <Path d="M122 170 L115 177 L122 184"/>
@@ -100,27 +100,27 @@ export const BrandCircleIcon = ({ size = 56 }) => {
           <Path d="M130 168 L126 186"/>
         </G>
 
-        {/* facial disc */}
+        
         <Path d="M128 92 C148 70 186 78 186 108 C186 134 160 152 128 152 C96 152 70 134 70 108 C70 78 108 70 128 92 Z" fill="url(#faceplate)" stroke="#52709E" strokeWidth={2.6} strokeOpacity={0.7}/>
-        {/* facial-disc centre ridge */}
+        
         <Path d="M128 96 L128 120" stroke="#52709E" strokeWidth={2} strokeLinecap="round" strokeOpacity={0.45}/>
 
-        {/* feet */}
+        
         <G stroke="url(#beak)" strokeWidth={5} strokeLinecap="round" fill="none">
           <Path d="M111 209 L105 224 M111 209 L111 226 M111 209 L117 224"/>
           <Path d="M145 209 L139 224 M145 209 L145 226 M145 209 L151 224"/>
         </G>
 
-        {/* normal eye: big cute yellow iris, dark pupil, sparkles */}
+        
         <Circle cx={153} cy={107} r={17} fill="url(#iris)" stroke="#1A1205" strokeWidth={2.2}/>
         <Circle cx={153} cy={108} r={8.2} fill="#0A0E18"/>
         <Circle cx={156.2} cy={104} r={3.1} fill="#ffffff" opacity={0.95}/>
         <Circle cx={149.6} cy={111} r={1.6} fill="#ffffff" opacity={0.7}/>
 
-        {/* beak */}
+        
         <Path d="M123.5 123 Q128 121 132.5 123 Q131 132 128 134.5 Q125 132 123.5 123 Z" fill="url(#beak)"/>
 
-        {/* magnifier held to the big (debug) eye */}
+        
         <Circle cx={95} cy={103} r={20} fill="url(#iris)" stroke="#1A1205" strokeWidth={2.6}/>
         <Circle cx={95} cy={104} r={10} fill="#0A0E18"/>
         <Circle cx={98.6} cy={100} r={3.4} fill="#ffffff" opacity={0.95}/>
@@ -131,7 +131,7 @@ export const BrandCircleIcon = ({ size = 56 }) => {
         <Line x1={75} y1={123} x2={54} y2={147} stroke="url(#beam)" strokeWidth={8.5} strokeLinecap="round"/>
         <Circle cx={95} cy={103} r={28} fill="none" stroke="url(#beam)" strokeWidth={7}/>
 
-        {/* rosy cheeks */}
+        
         <Ellipse cx={83} cy={127} rx={9} ry={6} fill="url(#blush)"/>
         <Ellipse cx={167} cy={122} rx={9} ry={6} fill="url(#blush)"/>
       </G>