react-native-inapp-inspector 2.3.5 → 2.3.7

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}/>

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

@@ -28,7 +28,6 @@ const StorageEntryCard = React.memo(function StorageEntryCard({ entry, isExpande
             ? `${entry.byteSize} B`
             : `${(entry.byteSize / 1024).toFixed(1)} KB`;
     }, [entry.byteSize]);
-    // Lazy compute displayed value to avoid layout thrashing on large JSON strings
     const displayValue = useMemo(() => {
         if (!isExpanded) {
             if (entry.value.length > 250) {
@@ -48,7 +47,7 @@ const StorageEntryCard = React.memo(function StorageEntryCard({ entry, isExpande
         return entry.value;
     }, [isExpanded, entry.value, entry.type, entry.parsedValue]);
     return (<View style={styles.entryCard}>
-      {/* Entry Header: Key name, Type Badge, Size, Actions */}
+      
       <View style={styles.entryHeader}>
         <View style={{ flex: 1, marginRight: 8 }}>
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
@@ -67,7 +66,7 @@ const StorageEntryCard = React.memo(function StorageEntryCard({ entry, isExpande
           </View>
         </View>
 
-        {/* Actions: Copy, Edit, Delete */}
+        
         <View style={styles.entryActions}>
           <TouchableScale hitSlop={6} onPress={() => onCopy(entry)} style={styles.entryActionBtn}>
             <CopyIcon size={12} color={AppColors.grayText}/>
@@ -83,7 +82,7 @@ const StorageEntryCard = React.memo(function StorageEntryCard({ entry, isExpande
         </View>
       </View>
 
-      {/* Entry Value Preview / Viewer */}
+      
       <TouchableScale onPress={() => onToggleExpand(entry.key)} style={styles.valuePreviewBox}>
         <Text style={styles.valuePreviewText} numberOfLines={isExpanded ? undefined : 3} selectable={isExpanded}>
           {displayValue}
@@ -102,7 +101,6 @@ export const StorageTab = React.memo(() => {
     const [isLoading, setIsLoading] = useState(true);
     const [search, setSearch] = useState('');
     const [expandedKeys, setExpandedKeys] = useState({});
-    // Modal State for Create / Edit
     const [modalVisible, setModalVisible] = useState(false);
     const [modalMode, setModalMode] = useState('create');
     const [editKeyName, setEditKeyName] = useState('');
@@ -110,7 +108,6 @@ export const StorageTab = React.memo(() => {
     const [editType, setEditType] = useState('string');
     const [jsonError, setJsonError] = useState(null);
     const mmkvInstanceIds = useMemo(() => getRegisteredMMKVInstanceIds(), []);
-    // Fetch entries
     const loadEntries = useCallback(async () => {
         setIsLoading(true);
         try {
@@ -129,11 +126,9 @@ export const StorageTab = React.memo(() => {
         const unsubscribe = subscribeToStorageChanges(loadEntries);
         return unsubscribe;
     }, [loadEntries]);
-    // Toggle JSON accordion
     const toggleExpand = (key) => {
         setExpandedKeys(prev => ({ ...prev, [key]: !prev[key] }));
     };
-    // Open Create Modal
     const handleOpenCreate = () => {
         setModalMode('create');
         setEditKeyName('');
@@ -142,7 +137,6 @@ export const StorageTab = React.memo(() => {
         setJsonError(null);
         setModalVisible(true);
     };
-    // Open Edit Modal
     const handleOpenEdit = (entry) => {
         setModalMode('edit');
         setEditKeyName(entry.key);
@@ -151,7 +145,6 @@ export const StorageTab = React.memo(() => {
         setJsonError(null);
         setModalVisible(true);
     };
-    // Delete single key
     const handleDeleteKey = (key) => {
         Alert.alert('Delete Storage Key', `Are you sure you want to permanently delete "${key}" from ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'}?`, [
             { text: 'Cancel', style: 'cancel' },
@@ -171,7 +164,6 @@ export const StorageTab = React.memo(() => {
             },
         ]);
     };
-    // Clear all keys
     const handleClearAll = () => {
         Alert.alert('Wipe All Storage Keys', `Are you sure you want to clear all ${entries.length} keys in ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'}? This cannot be undone.`, [
             { text: 'Cancel', style: 'cancel' },
@@ -188,7 +180,6 @@ export const StorageTab = React.memo(() => {
             },
         ]);
     };
-    // Save Modal (Create / Update)
     const handleSaveModal = async () => {
         if (!editKeyName.trim()) {
             showToast('Key name cannot be empty');
@@ -197,7 +188,6 @@ export const StorageTab = React.memo(() => {
         let finalVal = editValue;
         if (editType === 'json') {
             try {
-                // Validate JSON
                 const parsed = JSON.parse(editValue);
                 finalVal = JSON.stringify(parsed);
             }
@@ -222,7 +212,6 @@ export const StorageTab = React.memo(() => {
             showToast('Error saving storage key');
         }
     };
-    // Format / Beautify JSON in modal
     const handleBeautifyJson = () => {
         try {
             const parsed = JSON.parse(editValue);
@@ -235,7 +224,6 @@ export const StorageTab = React.memo(() => {
             setJsonError('Cannot format: invalid JSON syntax');
         }
     };
-    // Filter entries
     const filteredEntries = useMemo(() => {
         if (!search.trim())
             return entries;
@@ -261,7 +249,7 @@ export const StorageTab = React.memo(() => {
         ? isAsyncStorageConnected()
         : isMMKVConnected();
     return (<View style={styles.container}>
-      {/* ── Driver Sub-Tabs ── */}
+      
       <View style={styles.driverTabsWrapper}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.driverTabsContainer}>
           <TouchableScale onPress={() => setActiveDriver('asyncStorage')} style={[
@@ -300,7 +288,7 @@ export const StorageTab = React.memo(() => {
               </View>)}
           </TouchableScale>
 
-          {/* MMKV Named Instance Dropdown/Pills */}
+          
           {activeDriver === 'mmkv' && mmkvInstanceIds.length > 1 && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, marginLeft: 6 }}>
               {mmkvInstanceIds.map(id => (<TouchableScale key={id} onPress={() => setActiveMMKVId(id)} style={[
                     styles.instancePill,
@@ -317,7 +305,7 @@ export const StorageTab = React.memo(() => {
         </ScrollView>
       </View>
 
-      {/* ── Search & Actions Bar ── */}
+      
       <View style={styles.actionBar}>
         <View style={styles.searchBar}>
           <SearchIcon size={14} color={AppColors.grayTextWeak}/>
@@ -343,7 +331,7 @@ export const StorageTab = React.memo(() => {
             </View>)}
         </View>
 
-        {/* Action Buttons: Add Key & Refresh */}
+        
         <TouchableScale onPress={handleOpenCreate} style={styles.addKeyBtn} hitSlop={6}>
           <PlusIcon size={13} color={AppColors.white}/>
           <Text style={styles.addKeyBtnText}>Add</Text>
@@ -358,7 +346,7 @@ export const StorageTab = React.memo(() => {
           </TouchableScale>)}
       </View>
 
-      {/* ── Stats Strip ── */}
+      
       <View style={styles.statsStrip}>
         <Text style={styles.statsText}>
           {filteredEntries.length} of {entries.length} Keys • {formattedTotalSize}
@@ -368,7 +356,7 @@ export const StorageTab = React.memo(() => {
         </Text>
       </View>
 
-      {/* ── Storage Entries List ── */}
+      
       {isLoading ? (<View style={styles.loadingContainer}>
           <ActivityIndicator size="small" color={AppColors.purple}/>
           <Text style={styles.loadingText}>Loading storage entries...</Text>
@@ -386,7 +374,7 @@ export const StorageTab = React.memo(() => {
               </Text>
             </View>} ListFooterComponent={<View style={{ height: 60 }}/>}/>)}
 
-      {/* ── Create / Edit Key Modal ── */}
+      
       <Modal visible={modalVisible} transparent animationType="fade" onRequestClose={() => setModalVisible(false)}>
         <View style={styles.modalOverlay}>
           <View style={styles.modalCard}>
@@ -399,7 +387,7 @@ export const StorageTab = React.memo(() => {
               </TouchableScale>
             </View>
 
-            {/* Key Name Input */}
+            
             <View style={styles.inputGroup}>
               <Text style={styles.inputLabel}>KEY NAME</Text>
               <TextInput value={editKeyName} onChangeText={setEditKeyName} placeholder="e.g. user_session, auth_token" placeholderTextColor={AppColors.grayTextWeak} editable={modalMode === 'create'} style={[
@@ -408,7 +396,7 @@ export const StorageTab = React.memo(() => {
         ]} autoCapitalize="none"/>
             </View>
 
-            {/* Type Selector Strip */}
+            
             <View style={styles.inputGroup}>
               <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
                 <Text style={styles.inputLabel}>VALUE TYPE</Text>
@@ -437,7 +425,7 @@ export const StorageTab = React.memo(() => {
               </View>
             </View>
 
-            {/* Value Input */}
+            
             <View style={styles.inputGroup}>
               <Text style={styles.inputLabel}>VALUE CONTENT</Text>
               <TextInput value={editValue} onChangeText={v => {
@@ -454,7 +442,7 @@ export const StorageTab = React.memo(() => {
               {jsonError && (<Text style={styles.errorText}>⚠️ {jsonError}</Text>)}
             </View>
 
-            {/* Modal Actions */}
+            
             <View style={styles.modalActions}>
               <TouchableScale onPress={() => setModalVisible(false)} style={styles.cancelBtn}>
                 <Text style={styles.cancelBtnText}>Cancel</Text>

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

@@ -6,7 +6,6 @@ import { NpmIcon } from '../NetworkIcons';
 import { LIB_VERSION } from '../../constants';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
-// ─── Crisp SVG Icons ─────────────────────────────────────────────────────────
 const CopySvg = ({ size = 14, color = '#64748B' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     <Path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
@@ -90,12 +89,12 @@ export const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
                 transform: [{ scale: scaleAnim }],
             },
         ]}>
-          {/* Top-Right Dismiss Button */}
+          
           <TouchableOpacity style={styles.topCloseButton} onPress={handleClose} hitSlop={10} activeOpacity={0.7}>
             <CloseSvg size={13} color="#64748B"/>
           </TouchableOpacity>
 
-          {/* Header section with brand square icon & sparkle */}
+          
           <View style={styles.headerSection}>
             <View style={styles.iconHaloRing}>
               <BrandSquareIcon size={52}/>
@@ -110,7 +109,7 @@ export const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
             </Text>
           </View>
 
-          {/* Version Comparison Card */}
+          
           <View style={styles.versionComparisonCard}>
             <View style={styles.versionColumn}>
               <Text style={styles.versionLabel}>INSTALLED</Text>
@@ -132,7 +131,7 @@ export const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
             </View>
           </View>
 
-          {/* Quick Install Snippet Box */}
+          
           <View style={styles.codeSnippetBox}>
             <View style={styles.codeSnippetHeader}>
               <Text style={styles.codeSnippetLabel}>UPGRADE COMMAND</Text>
@@ -152,7 +151,7 @@ export const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
             </TouchableOpacity>
           </View>
 
-          {/* Action Buttons */}
+          
           <View style={styles.buttonRow}>
             <TouchableOpacity style={styles.secondaryButton} onPress={handleClose} activeOpacity={0.7}>
               <Text style={styles.secondaryButtonText}>Later</Text>