react-native-inapp-inspector 2.3.4 → 2.3.6

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

@@ -60,9 +60,7 @@ const getOriginBadge = (originType) => {
 const ReduxTab = React.memo(() => {
     const { t } = useTranslation();
     const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, setSelectedReduxSlice, } = useInspector();
-    // Sort mode: 'latest' (newest updated first) vs 'alpha' (A-Z)
     const [sortMode, setSortMode] = useState('latest');
-    // Pause / Live Auto-Refresh State
     const [isReduxPaused, setIsReduxPaused] = useState(!getReduxAutoRefresh());
     const handleTogglePause = useCallback(() => {
         setIsReduxPaused(prev => {
@@ -71,15 +69,12 @@ const ReduxTab = React.memo(() => {
             return next;
         });
     }, []);
-    // Total state size calculation
     const totalStateSize = useMemo(() => {
         return getSize(reduxState);
     }, [reduxState]);
-    // Fetch full action history for timeline counts
     const allActions = useMemo(() => {
         return getActionHistory();
     }, [reduxLastActionMap]);
-    // Compute slice items with exact timestamps & rich details
     const sliceItems = useMemo(() => {
         if (!reduxState || typeof reduxState !== 'object')
             return [];
@@ -102,7 +97,6 @@ const ReduxTab = React.memo(() => {
                 keysCount = 1;
                 typeLabel = typeof sliceVal;
             }
-            // Determine state status
             let status = 'live';
             let statusMessage;
             if (isObject) {
@@ -127,7 +121,6 @@ const ReduxTab = React.memo(() => {
             }
             const lastActionRaw = reduxLastActionMap[key];
             const updatedAt = lastActionRaw?.updatedAt || 0;
-            // Count actions affecting this slice in timeline
             const timelineCount = allActions.filter(action => {
                 if (!action.affectedSlices || action.affectedSlices.length === 0)
                     return true;
@@ -173,7 +166,6 @@ const ReduxTab = React.memo(() => {
             };
         });
     }, [reduxState, reduxLastActionMap, allActions]);
-    // Filter & Sort slices: by default, the most recently updated item is at the FIRST position
     const filteredSlices = useMemo(() => {
         let list = sliceItems;
         if (reduxSearch && reduxSearch.trim().length > 0) {
@@ -194,7 +186,6 @@ const ReduxTab = React.memo(() => {
         }
         return [...list].sort((a, b) => {
             if (sortMode === 'latest') {
-                // Most recently updated item first
                 if (b.updatedAt !== a.updatedAt) {
                     return b.updatedAt - a.updatedAt;
                 }
@@ -220,7 +211,7 @@ const ReduxTab = React.memo(() => {
                 reduxTabStyles.card,
                 isRecentlyUpdated && reduxTabStyles.cardRecentlyUpdated,
             ]}>
-            {/* Top row: Badge + Slice Name + Status + Timestamp + Chevron */}
+            
             <View style={reduxTabStyles.cardHeader}>
               <View style={reduxTabStyles.sliceBadge}>
                 <Text style={reduxTabStyles.sliceBadgeText}>SLICE</Text>
@@ -228,7 +219,7 @@ const ReduxTab = React.memo(() => {
 
               <HighlightText text={item.name} search={reduxSearch} style={reduxTabStyles.sliceName} highlightStyle={reduxTabStyles.highlight}/>
 
-              {/* Status Badge */}
+              
               {item.status === 'loading' ? (<View style={reduxTabStyles.loadingPill}>
                   <LoadingSpinnerIcon color={AppColors.amber800Warm} size={10}/>
                   <Text style={reduxTabStyles.loadingPillText}>Loading</Text>
@@ -252,7 +243,7 @@ const ReduxTab = React.memo(() => {
               <ForwardChevronIcon color={AppColors.grayTextWeak} size={13}/>
             </View>
 
-            {/* Middle row: Stats pills */}
+            
             <View style={reduxTabStyles.statsRow}>
               <View style={reduxTabStyles.pill}>
                 <LayersIcon color={AppColors.grayTextWeak} size={11}/>
@@ -268,13 +259,13 @@ const ReduxTab = React.memo(() => {
                 </View>)}
             </View>
 
-            {/* Bottom row: Last Dispatched Action with Origin & Trigger Line */}
+            
             {item.lastAction && (<View style={reduxTabStyles.lastActionRow}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
                   <BoltIcon color={AppColors.brandPurple} size={12}/>
                   <Text style={reduxTabStyles.lastActionLabel}>{t('redux.last', 'Last')}:</Text>
 
-                  {/* Origin Badge */}
+                  
                   {item.lastAction.originType && (() => {
                     const origin = getOriginBadge(item.lastAction.originType);
                     return (<View style={{
@@ -302,7 +293,7 @@ const ReduxTab = React.memo(() => {
 
                   <HighlightText text={item.lastAction.type} search={reduxSearch} style={reduxTabStyles.lastActionValue} highlightStyle={reduxTabStyles.highlight} numberOfLines={1}/>
 
-                  {/* Triggered from file preview */}
+                  
                   {item.lastAction.callerFile && (<Pressable onPress={() => openInVSCode(item.lastAction.callerFile, item.lastAction.callerLine, item.lastAction.callerCol)} hitSlop={6} style={{
                         flexDirection: 'row',
                         alignItems: 'center',
@@ -344,7 +335,7 @@ const ReduxTab = React.memo(() => {
       </View>);
     }
     return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
-      {/* ─── Top Stats Overview Card ─── */}
+      
       <View style={reduxTabStyles.overviewCard}>
         <View style={reduxTabStyles.statCol}>
           <Text style={reduxTabStyles.statHeading}>ACTIVE SLICES</Text>
@@ -390,7 +381,7 @@ const ReduxTab = React.memo(() => {
         </View>
       </View>
 
-      {/* ─── Search & Sort Bar ─── */}
+      
       <View style={reduxTabStyles.toolbarContainer}>
         <View style={reduxTabStyles.searchRow}>
           <View style={styles.searchContainer}>
@@ -417,7 +408,7 @@ const ReduxTab = React.memo(() => {
               </View>)}
           </View>
 
-          {/* Pause / Resume Live Updates Button */}
+          
           <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={isReduxPaused
             ? 'Resume live Redux updates'
             : 'Pause live Redux updates'} accessibilityHint="Toggles automatic recording of Redux state updates" style={[
@@ -432,7 +423,7 @@ const ReduxTab = React.memo(() => {
             : AppColors.grayTextStrong} size={16}/>
           </TouchableOpacity>
 
-          {/* Sort Button */}
+          
           <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={`Sort order: ${sortMode === 'latest'
             ? 'Recently updated first'
             : 'Alphabetical A to Z'}`} accessibilityHint="Switches sorting between recently updated and alphabetical" style={[
@@ -461,7 +452,7 @@ const ReduxTab = React.memo(() => {
         </View>
       </View>
 
-      {/* ─── FlatList of Slices ─── */}
+      
       <FlatList data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
             reduxTabStyles.listContent,
             filteredSlices.length === 0 && { flexGrow: 1 },

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

@@ -31,7 +31,6 @@ const SettingsPanel = () => {
     }, [modalHeightPercent]);
     const autoRamProfile = calculateRamBasedLimits(deviceFreeRamMb);
     const isPersistent = isPersistentStorageAvailable();
-    // Safe Area & Status Bar Padding for All Device Form Factors
     const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight || 24 : 44;
     const headerTopPadding = modalHeightPercent >= 95 ? statusBarHeight : 0;
     const allModules = [
@@ -99,7 +98,6 @@ const SettingsPanel = () => {
             desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
         },
     ];
-    // Staged selection state for checkboxes before clicking "Save Changes"
     const [stagedTabVisibility, setStagedTabVisibility] = useState(() => ({
         apis: true,
         logs: Boolean(tabVisibility?.logs),
@@ -111,7 +109,6 @@ const SettingsPanel = () => {
         device: Boolean(tabVisibility?.device),
         storage: Boolean(tabVisibility?.storage),
     }));
-    // Synchronize staged state with tabVisibility when tabVisibility updates
     useEffect(() => {
         setStagedTabVisibility({
             apis: true,
@@ -148,7 +145,6 @@ const SettingsPanel = () => {
         animateNextLayout();
         setSettingsPage('main');
     };
-    // Helper: settings row with icon + label + optional description
     const renderSettingRow = (opts) => {
         return (<View style={{
                 paddingVertical: 12,
@@ -278,7 +274,7 @@ const SettingsPanel = () => {
             backgroundColor: AppColors.grayBackground,
         }}>
       <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 14 }} showsVerticalScrollIndicator={false}>
-        {/* Segmented Top Navigation Sub-Tabs */}
+        
         <View style={{
             flexDirection: 'row',
             backgroundColor: AppColors.primaryLight,
@@ -383,7 +379,7 @@ const SettingsPanel = () => {
         </View>
 
         {settingsActiveSubTab === 'module' && (<View style={{ gap: 12 }}>
-            {/* Individual Module Cards with Left Checkboxes */}
+            
             <View style={{ gap: 10 }}>
               {allModules.map(moduleItem => {
                 const isReduxAvail = isReduxConnected();
@@ -423,13 +419,13 @@ const SettingsPanel = () => {
                         shadowRadius: 5,
                         shadowOffset: { width: 0, height: 2 },
                     }}>
-                    {/* Top Row: [Checkbox] -> [Icon Tile] -> [Title & Subtitle] */}
+                    
                     <View style={{
                         flexDirection: 'row',
                         alignItems: 'flex-start',
                         gap: 10,
                     }}>
-                      {/* 1. Checkbox on the Left */}
+                      
                       <TouchableScale accessible={true} accessibilityRole="checkbox" accessibilityLabel={`Select ${moduleItem.label}`} accessibilityState={{
                         checked: isChecked,
                         disabled: isLocked,
@@ -469,7 +465,7 @@ const SettingsPanel = () => {
                           </Svg>) : null}
                       </TouchableScale>
 
-                      {/* 2. Middle Tap Zone: Icon + Title & Desc */}
+                      
                       <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`${moduleItem.label} settings`} disabled={isUnavailable} onPress={() => {
                         animateNextLayout();
                         setSettingsPage(moduleItem.key);
@@ -479,7 +475,7 @@ const SettingsPanel = () => {
                         alignItems: 'flex-start',
                         gap: 10,
                     }}>
-                        {/* Icon Tile */}
+                        
                         <View style={{
                         width: 36,
                         height: 36,
@@ -528,7 +524,7 @@ const SettingsPanel = () => {
                             : AppColors.grayTextWeak} size={16}/>)}
                         </View>
 
-                        {/* Titles & Status Pill */}
+                        
                         <View style={{ flex: 1, gap: 2 }}>
                           <View style={{
                         flexDirection: 'row',
@@ -547,7 +543,7 @@ const SettingsPanel = () => {
                               {moduleItem.label}
                             </Text>
 
-                            {/* Default Startup Tab Badge */}
+                            
                             {moduleItem.key === defaultTab &&
                         !isUnavailable && (<View style={{
                             flexDirection: 'row',
@@ -577,7 +573,7 @@ const SettingsPanel = () => {
                                   </Text>
                                 </View>)}
 
-                            {/* Status Pill */}
+                            
                             {moduleItem.key === 'apis' ? (<View style={{
                             backgroundColor: `${AppColors.blue500}14`,
                             borderRadius: 4,
@@ -664,7 +660,7 @@ const SettingsPanel = () => {
                       </TouchableScale>
                     </View>
 
-                    {/* Card Footer: Live Stats + Configure Button */}
+                    
                     {!isUnavailable && (<View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -673,7 +669,7 @@ const SettingsPanel = () => {
                             borderTopWidth: 1,
                             borderTopColor: AppColors.dividerColor,
                         }}>
-                        {/* Live Info Pill */}
+                        
                         <View style={{
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -698,7 +694,7 @@ const SettingsPanel = () => {
                           </Text>
                         </View>
 
-                        {/* Sleek Configure Button */}
+                        
                         <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Configure ${moduleItem.label} settings`} onPress={() => {
                             animateNextLayout();
                             setSettingsPage(moduleItem.key);
@@ -731,7 +727,7 @@ const SettingsPanel = () => {
           </View>)}
 
         {settingsActiveSubTab === 'ui' && (<View style={{ gap: 14 }}>
-            {/* Section 1: Appearance */}
+            
             <View style={{
                 backgroundColor: AppColors.primaryLight,
                 borderRadius: 14,
@@ -822,7 +818,7 @@ const SettingsPanel = () => {
               </View>
             </View>
 
-            {/* Section 2: Window & Layout */}
+            
             <View style={{
                 backgroundColor: AppColors.primaryLight,
                 borderRadius: 14,
@@ -842,7 +838,7 @@ const SettingsPanel = () => {
                 {t('settings.windowLayout')}
               </Text>
 
-              {/* Modal Height */}
+              
               <View style={{ gap: 8 }}>
                 <View style={{
                 flexDirection: 'row',
@@ -921,7 +917,7 @@ const SettingsPanel = () => {
 
               <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
 
-              {/* Modal Animation */}
+              
               <View style={{ gap: 8 }}>
                 <View style={{
                 flexDirection: 'row',
@@ -998,7 +994,7 @@ const SettingsPanel = () => {
               </View>
             </View>
 
-            {/* Section 3: Default Startup Tab */}
+            
             <View style={{
                 backgroundColor: AppColors.primaryLight,
                 borderRadius: 14,
@@ -1054,7 +1050,7 @@ const SettingsPanel = () => {
                 </View>
               </View>
 
-              {/* Sleek Interactive Dropdown Picker */}
+              
               <View style={{ marginTop: 6, gap: 6 }}>
                 <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel={`Default opening tab: ${allModules.find(m => m.key === defaultTab)?.label || 'APIs'}`} onPress={() => setIsDefaultTabDropdownOpen(prev => !prev)} style={{
                 flexDirection: 'row',
@@ -1115,7 +1111,7 @@ const SettingsPanel = () => {
                   </View>
                 </TouchableScale>
 
-                {/* Dropdown Options List */}
+                
                 {isDefaultTabDropdownOpen && (<View style={{
                     backgroundColor: AppColors.primaryLight,
                     borderRadius: 10,
@@ -1182,7 +1178,7 @@ const SettingsPanel = () => {
               </View>
             </View>
 
-            {/* Section 4: Notifications & Toasts */}
+            
             <View style={{
                 backgroundColor: AppColors.primaryLight,
                 borderRadius: 14,
@@ -1271,7 +1267,7 @@ const SettingsPanel = () => {
               </View>
             </View>
 
-            {/* Section 5: NPM Package & Updates */}
+            
             <View style={{
                 backgroundColor: AppColors.primaryLight,
                 borderRadius: 14,
@@ -1399,7 +1395,7 @@ const SettingsPanel = () => {
           </View>)}
 
         {settingsActiveSubTab === 'limits' && (<View style={{ gap: 14 }}>
-            {/* Section 1: Device RAM & Auto Profile */}
+            
             <View style={{
                 backgroundColor: AppColors.primaryLight,
                 borderRadius: 14,
@@ -1419,7 +1415,7 @@ const SettingsPanel = () => {
                 DEVICE MEMORY & AUTO PROFILES
               </Text>
 
-              {/* Auto RAM Limit Toggle */}
+              
               <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -1490,7 +1486,7 @@ const SettingsPanel = () => {
 
               <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
 
-              {/* Device Free RAM Display */}
+              
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
                 <View style={{
                 width: 32,
@@ -1552,7 +1548,7 @@ const SettingsPanel = () => {
                 </View>
               </View>
 
-              {/* Profile Overview */}
+              
               <View style={{
                 marginTop: 4,
                 paddingTop: 8,
@@ -1655,7 +1651,7 @@ const SettingsPanel = () => {
               </View>
             </View>
 
-            {/* Section 2: Memory-Safe OS Pruning Shield */}
+            
             <View style={{
                 backgroundColor: AppColors.primaryLight,
                 borderRadius: 14,
@@ -1723,7 +1719,7 @@ const SettingsPanel = () => {
 
               <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
 
-              {/* Instant Prune Button */}
+              
               <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -1774,7 +1770,7 @@ const SettingsPanel = () => {
         <View style={{ height: 48 }}/>
       </ScrollView>
 
-      {/* Bottom Sticky Action Bar for Save Changes */}
+      
       {settingsActiveSubTab === 'module' && (<View style={{
                 paddingHorizontal: 16,
                 paddingTop: 12,
@@ -1996,7 +1992,7 @@ const SettingsPanel = () => {
             })}
         </View>
 
-        {/* Log Deduplication Card */}
+        
         <View style={{
                 backgroundColor: AppColors.primaryLight,
                 borderRadius: 14,
@@ -2016,7 +2012,7 @@ const SettingsPanel = () => {
             {t('settings.logFiltersDeduplication')}
           </Text>
 
-          {/* Show Duplicate Logs */}
+          
           <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -2555,7 +2551,7 @@ const SettingsPanel = () => {
             flex: 1,
             backgroundColor: AppColors.grayBackground,
         }}>
-      {/* ─── Persistent Main Settings (Retains 100% scroll position) ─── */}
+      
       <View style={[
             StyleSheet.absoluteFill,
             settingsPage !== 'main' && { pointerEvents: 'none' },
@@ -2563,7 +2559,7 @@ const SettingsPanel = () => {
         {renderMainSettingsContent()}
       </View>
 
-      {/* ─── Sub-module Settings Overlay (Smooth Animated Slide) ─── */}
+      
       {settingsPage !== 'main' && (<Animated.View style={[
                 StyleSheet.absoluteFill,
                 {

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

@@ -20,7 +20,7 @@ export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ car
         return () => animation.stop();
     }, [shimmerAnim]);
     return (<View style={skeletonStyles.container}>
-      {/* ─── Search & Scope Toolbar Skeleton ─── */}
+      
       <View style={skeletonStyles.toolbarSkeleton}>
         <Animated.View style={[
             skeletonStyles.searchBarSkeleton,
@@ -32,7 +32,7 @@ export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ car
         </View>
       </View>
 
-      {/* ─── Quick Filter Chips Skeleton Strip ─── */}
+      
       <View style={skeletonStyles.chipStripSkeleton}>
         <Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
         <Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
@@ -40,9 +40,9 @@ export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ car
         <Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
       </View>
 
-      {/* ─── List Cards Skeleton ─── */}
+      
       {Array.from({ length: cardCount }).map((_, i) => (<Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
-          {/* Top row: Status pill + Method + Time */}
+          
           <View style={skeletonStyles.cardTopRow}>
             <View style={skeletonStyles.badgeGroup}>
               <View style={skeletonStyles.statusBadgeSkeleton}/>
@@ -51,11 +51,11 @@ export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ car
             <View style={skeletonStyles.timeSkeleton}/>
           </View>
 
-          {/* Middle row: URL lines */}
+          
           <View style={skeletonStyles.urlLineLong}/>
           <View style={skeletonStyles.urlLineShort}/>
 
-          {/* Bottom row: Latency & Size */}
+          
           <View style={skeletonStyles.cardBottomRow}>
             <View style={skeletonStyles.metaPillSkeleton}/>
             <View style={skeletonStyles.metaPillSkeleton}/>