react-native-inapp-inspector 2.5.9 → 2.5.11

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

@@ -0,0 +1,268 @@
+import{useCallback as O,useEffect as ce,useMemo as G,useState as v}from"react";import{Platform as de,ScrollView as _,StyleSheet as N,Text as T,TextInput as F,TouchableOpacity as R,View as C}from"react-native";import{announceA11y as ge,calculateContrastRatio as ue,evaluateTouchTarget as ye,getA11yState as be,getA11ySuiteInstance as me,subscribeA11yState as Te,syncA11yTelemetry as J,WCAG_RULES as pe}from"../../customHooks/a11yAdapter";import{copyToClipboard as Ce}from"../../helpers";import{showToast as L}from"../../helpers/toast";import{useTranslation as xe}from"../../i18n";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as f}from"../../styles/AppFonts";import{AccessibilityIcon as P,ChevronIcon as Se,CopyIcon as Be,SearchIcon as Ae,SignalIcon as U,TerminalIcon as Fe}from"../NetworkIcons";import K from"../TouchableScale";export const A11yTab=()=>{const{t:Re}=xe(),[h,D]=v("status"),[S,j]=v(be()),[k,Q]=v("Accessibility announcement test"),[V,X]=v("#FFFFFF"),[H,Y]=v("#4F46E5"),[E,Z]=v("44"),[M,ee]=v("44"),[I,te]=v(""),[w,re]=v("ALL"),[$,ke]=v("ALL"),[oe,ae]=v({});ce(()=>(J(),Te(x=>{j(x)})),[]);const le=O(async()=>{const x=await J();j(x),L(`A11y Telemetry Updated (VoiceOver/TalkBack: ${x.isScreenReaderEnabled?"Active":"Inactive"})`)},[]),ie=O(()=>{if(!k.trim()){L("Please enter text to announce");return}ge(k)?L(`Announced: "${k}"`):L("Dispatched via AccessibilityInfo fallback")},[k]),B=G(()=>ue(V,H),[V,H]),W=G(()=>{const x=parseFloat(E)||0,A=parseFloat(M)||0;return ye(x,A)},[E,M]),ne=G(()=>pe.filter(x=>{if(w!=="ALL"&&x.level!==w||$!=="ALL"&&x.principle!==$)return!1;if(I.trim()){const A=I.toLowerCase();return x.id.toLowerCase().includes(A)||x.title.toLowerCase().includes(A)||x.description.toLowerCase().includes(A)||x.mobileRecommendation.toLowerCase().includes(A)}return!0}),[I,w,$]),se=O(x=>{ae(A=>({...A,[x]:!A[x]}))},[]),z=!!me();return<C style={e.container}>
+      
+      <C style={e.subTabBar}>
+        <R style={[e.subTabItem,h==="status"&&e.subTabItemActive]}onPress={()=>D("status")}activeOpacity={.7}>
+          <U size={14}color={h==="status"?t.brandPurple:t.grayTextWeak}/>
+          <T style={[e.subTabText,h==="status"&&e.subTabTextActive]}>
+            Status & Telemetry
+          </T>
+        </R>
+
+        <R style={[e.subTabItem,h==="tools"&&e.subTabItemActive]}onPress={()=>D("tools")}activeOpacity={.7}>
+          <Fe size={14}color={h==="tools"?t.brandPurple:t.grayTextWeak}/>
+          <T style={[e.subTabText,h==="tools"&&e.subTabTextActive]}>
+            A11y Tools
+          </T>
+        </R>
+
+        <R style={[e.subTabItem,h==="wcag"&&e.subTabItemActive]}onPress={()=>D("wcag")}activeOpacity={.7}>
+          <P size={14}color={h==="wcag"?t.brandPurple:t.grayTextWeak}/>
+          <T style={[e.subTabText,h==="wcag"&&e.subTabTextActive]}>
+            WCAG 2.2 Standards
+          </T>
+        </R>
+      </C>
+
+      <_ style={e.scrollContent}contentContainerStyle={e.scrollContainer}showsVerticalScrollIndicator={!1}>
+        
+        {h==="status"&&<C>
+            
+            <C style={[e.bannerCard,{backgroundColor:z?`${t.greenColor}14`:`${t.brandPurple}14`,borderColor:z?`${t.greenColor}33`:`${t.brandPurple}33`}]}>
+              <C style={{flexDirection:"row",alignItems:"center",gap:8}}>
+                <P size={20}color={z?t.greenColor:t.brandPurple}/>
+                <C style={{flex:1}}>
+                  <T style={e.bannerTitle}>
+                    {z?"react-native-a11y-suite Active":"react-native-inapp-inspector A11y Engine"}
+                  </T>
+                  <T style={e.bannerSubtitle}>
+                    {z?"Connected to native TurboModules for enhanced assistive telemetry.":"Running in zero-config mode with native AccessibilityInfo bridge."}
+                  </T>
+                </C>
+              </C>
+            </C>
+
+            
+            <C style={e.metricsGrid}>
+              <C style={e.metricCard}>
+                <T style={e.metricLabel}>Screen Reader</T>
+                <C style={e.badgeRow}>
+                  <C style={[e.statusDot,{backgroundColor:S.isScreenReaderEnabled?t.greenColor:t.grayTextWeak}]}/>
+                  <T style={[e.metricValue,{color:S.isScreenReaderEnabled?t.greenColor:t.grayTextStrong}]}>
+                    {S.isScreenReaderEnabled?de.OS==="ios"?"VoiceOver ON":"TalkBack ON":"Inactive"}
+                  </T>
+                </C>
+              </C>
+
+              <C style={e.metricCard}>
+                <T style={e.metricLabel}>Font Scale Multiplier</T>
+                <T style={[e.metricValue,{color:t.brandPurple}]}>
+                  {S.fontScale}x
+                </T>
+                <T style={e.metricSub}>
+                  {S.fontScale>=1.5?"Accessibility Size":S.fontScale>1?"Large Scale":"Default (1.0x)"}
+                </T>
+              </C>
+
+              <C style={e.metricCard}>
+                <T style={e.metricLabel}>Reduced Motion</T>
+                <T style={[e.metricValue,{color:S.isReduceMotionEnabled?t.lightOrange:t.grayTextStrong}]}>
+                  {S.isReduceMotionEnabled?"Enabled (No Anim)":"Disabled"}
+                </T>
+              </C>
+
+              <C style={e.metricCard}>
+                <T style={e.metricLabel}>Bold Text</T>
+                <T style={[e.metricValue,{color:S.isBoldTextEnabled?t.skyBlue:t.grayTextStrong}]}>
+                  {S.isBoldTextEnabled?"Enabled":"Default"}
+                </T>
+              </C>
+
+              <C style={e.metricCard}>
+                <T style={e.metricLabel}>High Contrast</T>
+                <T style={[e.metricValue,{color:S.isHighContrastEnabled?t.brandPurple:t.grayTextStrong}]}>
+                  {S.isHighContrastEnabled?"Enabled":"Default"}
+                </T>
+              </C>
+
+              <C style={e.metricCard}>
+                <T style={e.metricLabel}>Invert Colors</T>
+                <T style={[e.metricValue,{color:S.isInvertColorsEnabled?t.lightOrange:t.grayTextStrong}]}>
+                  {S.isInvertColorsEnabled?"Enabled":"Default"}
+                </T>
+              </C>
+            </C>
+
+            
+            <K style={e.actionButton}onPress={le}>
+              <U size={16}color={t.white}/>
+              <T style={e.actionButtonText}>Sync Accessibility Telemetry</T>
+            </K>
+          </C>}
+
+        
+        {h==="tools"&&<C>
+            
+            <C style={e.toolCard}>
+              <C style={e.toolHeader}>
+                <P size={18}color={t.brandPurple}/>
+                <T style={e.toolTitle}>Live Speech & Announcement Tester</T>
+              </C>
+              <T style={e.toolDesc}>
+                Dispatches announcements directly to active assistive technologies
+                (VoiceOver on iOS, TalkBack on Android).
+              </T>
+
+              <F style={e.input}value={k}onChangeText={Q}placeholder="Enter message to announce..."placeholderTextColor={t.grayTextWeak}/>
+
+              <K style={[e.actionButton,{marginTop:10}]}onPress={ie}>
+                <T style={e.actionButtonText}>📢 Dispatch Announcement</T>
+              </K>
+            </C>
+
+            
+            <C style={e.toolCard}>
+              <C style={e.toolHeader}>
+                <P size={18}color={t.skyBlue}/>
+                <T style={e.toolTitle}>WCAG 2.2 Color Contrast Checker</T>
+              </C>
+              <T style={e.toolDesc}>
+                Calculates relative luminance and contrast ratio between foreground text
+                and background surfaces.
+              </T>
+
+              <C style={{flexDirection:"row",gap:10,marginTop:10}}>
+                <C style={{flex:1}}>
+                  <T style={e.inputLabel}>Text Hex</T>
+                  <F style={e.input}value={V}onChangeText={X}placeholder="#FFFFFF"placeholderTextColor={t.grayTextWeak}autoCapitalize="characters"/>
+                </C>
+                <C style={{flex:1}}>
+                  <T style={e.inputLabel}>Background Hex</T>
+                  <F style={e.input}value={H}onChangeText={Y}placeholder="#4F46E5"placeholderTextColor={t.grayTextWeak}autoCapitalize="characters"/>
+                </C>
+              </C>
+
+              
+              <C style={[e.contrastPreviewBox,{backgroundColor:B.bgHex||"#4F46E5"}]}>
+                <T style={[e.contrastPreviewText,{color:B.fgHex||"#FFFFFF"}]}>
+                  Sample Text Preview
+                </T>
+              </C>
+
+              
+              <C style={e.ratioRow}>
+                <T style={e.ratioValue}>{B.ratio}:1</T>
+                <C style={e.badgeContainer}>
+                  <C style={[e.complianceBadge,B.aaNormal?e.badgePass:e.badgeFail]}>
+                    <T style={[e.badgeText,B.aaNormal?e.textPass:e.textFail]}>
+                      AA (4.5:1) {B.aaNormal?"\u2713":"\u2717"}
+                    </T>
+                  </C>
+                  <C style={[e.complianceBadge,B.aaLarge?e.badgePass:e.badgeFail]}>
+                    <T style={[e.badgeText,B.aaLarge?e.textPass:e.textFail]}>
+                      AA Large (3:1) {B.aaLarge?"\u2713":"\u2717"}
+                    </T>
+                  </C>
+                  <C style={[e.complianceBadge,B.aaaNormal?e.badgePass:e.badgeFail]}>
+                    <T style={[e.badgeText,B.aaaNormal?e.textPass:e.textFail]}>
+                      AAA (7:1) {B.aaaNormal?"\u2713":"\u2717"}
+                    </T>
+                  </C>
+                </C>
+              </C>
+            </C>
+
+            
+            <C style={e.toolCard}>
+              <C style={e.toolHeader}>
+                <P size={18}color={t.greenColor}/>
+                <T style={e.toolTitle}>Touch Target Evaluator (WCAG 2.5.5/2.5.8)</T>
+              </C>
+              <T style={e.toolDesc}>
+                Validates interactive component dimensions against Apple HIG (44pt) and
+                Android Material (48dp) minimums.
+              </T>
+
+              <C style={{flexDirection:"row",gap:10,marginTop:10}}>
+                <C style={{flex:1}}>
+                  <T style={e.inputLabel}>Width (dp/pt)</T>
+                  <F style={e.input}value={E}onChangeText={Z}keyboardType="numeric"/>
+                </C>
+                <C style={{flex:1}}>
+                  <T style={e.inputLabel}>Height (dp/pt)</T>
+                  <F style={e.input}value={M}onChangeText={ee}keyboardType="numeric"/>
+                </C>
+              </C>
+
+              <C style={e.targetResultsRow}>
+                <C style={e.targetStatusBox}>
+                  <T style={e.targetPlatformLabel}>iOS HIG (44x44pt)</T>
+                  <T style={[e.targetStatusValue,{color:W.iosMinMet?t.greenColor:t.errorColor}]}>
+                    {W.iosMinMet?"\u2713 Compliant":"\u2717 Too Small"}
+                  </T>
+                </C>
+                <C style={e.targetStatusBox}>
+                  <T style={e.targetPlatformLabel}>Android Material (48x48dp)</T>
+                  <T style={[e.targetStatusValue,{color:W.androidMinMet?t.greenColor:t.errorColor}]}>
+                    {W.androidMinMet?"\u2713 Compliant":"\u2717 Too Small"}
+                  </T>
+                </C>
+              </C>
+            </C>
+          </C>}
+
+        
+        {h==="wcag"&&<C>
+            
+            <C style={e.searchBar}>
+              <Ae size={16}color={t.grayTextWeak}/>
+              <F style={e.searchInput}value={I}onChangeText={te}placeholder="Search WCAG 2.2 rules..."placeholderTextColor={t.grayTextWeak}/>
+            </C>
+
+            
+            <_ horizontal showsHorizontalScrollIndicator={!1}style={{marginBottom:12}}>
+              {["ALL","A","AA","AAA"].map(x=><R key={x}style={[e.filterChip,w===x&&e.filterChipActive]}onPress={()=>re(x)}>
+                  <T style={[e.filterChipText,w===x&&e.filterChipTextActive]}>
+                    Level {x}
+                  </T>
+                </R>)}
+            </_>
+
+            
+            {ne.map(x=>{const A=!!oe[x.id];return<C key={x.id}style={e.ruleCard}>
+                  <R style={e.ruleCardHeader}onPress={()=>se(x.id)}activeOpacity={.7}>
+                    <C style={{flex:1}}>
+                      <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                        <T style={e.ruleId}>{x.id}</T>
+                        <C style={[e.levelBadge,{backgroundColor:x.level==="AAA"?`${t.brandPurple}22`:x.level==="AA"?`${t.skyBlue}22`:`${t.greenColor}22`}]}>
+                          <T style={[e.levelBadgeText,{color:x.level==="AAA"?t.brandPurple:x.level==="AA"?t.skyBlue:t.greenColor}]}>
+                            Level {x.level}
+                          </T>
+                        </C>
+                        <T style={e.principleTag}>{x.principle}</T>
+                      </C>
+                      <T style={e.ruleTitle}>{x.title}</T>
+                    </C>
+                    <Se direction={A?"up":"down"}size={16}color={t.grayTextWeak}/>
+                  </R>
+
+                  {A&&<C style={e.ruleBody}>
+                      <T style={e.ruleDescLabel}>Criterion Definition:</T>
+                      <T style={e.ruleDesc}>{x.description}</T>
+
+                      <T style={[e.ruleDescLabel,{marginTop:8}]}>
+                        Mobile / React Native Recommendation:
+                      </T>
+                      <T style={e.ruleRec}>{x.mobileRecommendation}</T>
+
+                      <R style={e.copyRuleBtn}onPress={()=>{Ce(`WCAG ${x.id} ${x.title} (Level ${x.level}):
+${x.description}
+
+Mobile: ${x.mobileRecommendation}`),L(`Copied WCAG ${x.id} rule guidance`)}}>
+                        <Be size={14}color={t.brandPurple}/>
+                        <T style={e.copyRuleBtnText}>Copy Rule Guidance</T>
+                      </R>
+                    </C>}
+                </C>})}
+          </C>}
+      </_>
+    </C>};const e=N.create({container:{flex:1,backgroundColor:t.grayBackground},subTabBar:{flexDirection:"row",backgroundColor:t.graySurface,borderBottomWidth:N.hairlineWidth,borderBottomColor:t.grayBorderSecondary,paddingHorizontal:8,paddingVertical:4,gap:4},subTabItem:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:8,borderRadius:8,gap:6},subTabItemActive:{backgroundColor:`${t.brandPurple}1F`},subTabText:{fontFamily:f.interMedium,fontSize:12,color:t.grayTextWeak},subTabTextActive:{color:t.brandPurple,fontFamily:f.interBold},scrollContent:{flex:1},scrollContainer:{padding:14,paddingBottom:40},bannerCard:{borderRadius:10,borderWidth:1,padding:12,marginBottom:14},bannerTitle:{fontFamily:f.interBold,fontSize:13,color:t.grayTextStrong},bannerSubtitle:{fontFamily:f.interRegular,fontSize:11,color:t.grayTextWeak,marginTop:2},metricsGrid:{flexDirection:"row",flexWrap:"wrap",gap:10,marginBottom:14},metricCard:{flexBasis:"48%",flexGrow:1,backgroundColor:t.primaryLight,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,padding:12},metricLabel:{fontFamily:f.interMedium,fontSize:11,color:t.grayTextWeak,marginBottom:4},metricValue:{fontFamily:f.interBold,fontSize:14,color:t.grayTextStrong},metricSub:{fontFamily:f.interRegular,fontSize:10,color:t.grayTextWeak,marginTop:2},badgeRow:{flexDirection:"row",alignItems:"center",gap:6},statusDot:{width:8,height:8,borderRadius:4},actionButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:t.brandPurple,paddingVertical:12,borderRadius:8,gap:8},actionButtonText:{fontFamily:f.interBold,fontSize:13,color:t.white},toolCard:{backgroundColor:t.primaryLight,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,padding:14,marginBottom:14},toolHeader:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:4},toolTitle:{fontFamily:f.interBold,fontSize:13,color:t.grayTextStrong},toolDesc:{fontFamily:f.interRegular,fontSize:11,color:t.grayTextWeak,marginBottom:8},inputLabel:{fontFamily:f.interMedium,fontSize:11,color:t.grayTextWeak,marginBottom:4},input:{backgroundColor:t.graySurface,borderWidth:1,borderColor:t.grayBorderSecondary,borderRadius:8,paddingHorizontal:12,paddingVertical:8,fontFamily:f.interRegular,fontSize:13,color:t.grayTextStrong},contrastPreviewBox:{marginTop:12,borderRadius:8,padding:16,alignItems:"center",justifyContent:"center"},contrastPreviewText:{fontFamily:f.interBold,fontSize:15},ratioRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:12},ratioValue:{fontFamily:f.interBold,fontSize:18,color:t.grayTextStrong},badgeContainer:{flexDirection:"row",gap:6},complianceBadge:{paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1},badgePass:{backgroundColor:`${t.greenColor}1A`,borderColor:`${t.greenColor}33`},badgeFail:{backgroundColor:`${t.errorColor}1A`,borderColor:`${t.errorColor}33`},badgeText:{fontFamily:f.interBold,fontSize:10},textPass:{color:t.greenColor},textFail:{color:t.errorColor},targetResultsRow:{flexDirection:"row",gap:10,marginTop:12},targetStatusBox:{flex:1,backgroundColor:t.graySurface,padding:10,borderRadius:8,borderWidth:1,borderColor:t.grayBorderSecondary,alignItems:"center"},targetPlatformLabel:{fontFamily:f.interMedium,fontSize:10,color:t.grayTextWeak},targetStatusValue:{fontFamily:f.interBold,fontSize:12,marginTop:4},searchBar:{flexDirection:"row",alignItems:"center",backgroundColor:t.primaryLight,borderRadius:8,borderWidth:1,borderColor:t.grayBorderSecondary,paddingHorizontal:10,paddingVertical:6,gap:6,marginBottom:10},searchInput:{flex:1,fontFamily:f.interRegular,fontSize:12,color:t.grayTextStrong,padding:0},filterChip:{paddingHorizontal:10,paddingVertical:5,borderRadius:6,backgroundColor:t.graySurface,borderWidth:1,borderColor:t.grayBorderSecondary,marginRight:6},filterChipActive:{backgroundColor:t.brandPurple,borderColor:t.brandPurple},filterChipText:{fontFamily:f.interMedium,fontSize:11,color:t.grayTextWeak},filterChipTextActive:{color:t.white,fontFamily:f.interBold},ruleCard:{backgroundColor:t.primaryLight,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,padding:12,marginBottom:10},ruleCardHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},ruleId:{fontFamily:f.interBold,fontSize:11,color:t.brandPurple},levelBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},levelBadgeText:{fontFamily:f.interBold,fontSize:9},principleTag:{fontFamily:f.interRegular,fontSize:10,color:t.grayTextWeak},ruleTitle:{fontFamily:f.interBold,fontSize:13,color:t.grayTextStrong,marginTop:4},ruleBody:{marginTop:10,paddingTop:10,borderTopWidth:N.hairlineWidth,borderTopColor:t.grayBorderSecondary},ruleDescLabel:{fontFamily:f.interBold,fontSize:10,color:t.grayTextWeak,textTransform:"uppercase"},ruleDesc:{fontFamily:f.interRegular,fontSize:12,color:t.grayTextStrong,marginTop:2,lineHeight:16},ruleRec:{fontFamily:f.interMedium,fontSize:12,color:t.brandPurple,marginTop:2,lineHeight:16},copyRuleBtn:{flexDirection:"row",alignItems:"center",gap:6,marginTop:10,alignSelf:"flex-start",paddingVertical:4,paddingHorizontal:8,borderRadius:6,backgroundColor:`${t.brandPurple}14`},copyRuleBtnText:{fontFamily:f.interBold,fontSize:11,color:t.brandPurple}});

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

@@ -1,4 +1,4 @@
-import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,Text as C,View as T}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as I}from"../../styles/AppFonts";import S from"../TouchableScale";import{useInspector as N}from"./InspectorContext";import{t as V}from"../../i18n";import{LIB_VERSION as $}from"../../constants/version";import _ from"../AppHeaderLogo";import{getAppName as O,getBundleIdentifier as E,getAppVersionAndBuild as M,copyToClipboard as H,showToast as A}from"../../helpers";import{GitHubIcon as U,NpmIcon as G,BoltIcon as W,StarIcon as Q,BookOpenIcon as Z,BugIcon as J,TagIcon as K,WifiIcon as X,TerminalIcon as Y,AnalyticsIcon as Te,DatabaseIcon as Ce,CameraIcon as Ve,CrashIcon as Ie,ExternalLinkIcon as R,CopyIcon as Se}from"../NetworkIcons";export const AboutModal=({onClose:Be})=>{const{updateAvailable:z,latestNpmVersion:D}=N();return<T style={e.container}>
+import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,Text as C,View as T}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as I}from"../../styles/AppFonts";import S from"../TouchableScale";import{useInspector as N}from"./InspectorContext";import{t as V}from"../../i18n";import{LIB_VERSION as $}from"../../constants/version";import _ from"../AppHeaderLogo";import{getAppName as O,getBundleIdentifier as E,getAppVersionAndBuild as M,copyToClipboard as H,showToast as A}from"../../helpers";import{DeveloperSponsorCard as U}from"./DeveloperSponsorCard";import{GitHubIcon as G,NpmIcon as Q,BoltIcon as W,StarIcon as Z,BookOpenIcon as J,BugIcon as K,TagIcon as X,WifiIcon as Y,TerminalIcon as Te,AnalyticsIcon as Ce,DatabaseIcon as Ve,CameraIcon as Ie,CrashIcon as Se,ExternalLinkIcon as R,CopyIcon as Be}from"../NetworkIcons";export const AboutModal=({onClose:ve})=>{const{updateAvailable:z,latestNpmVersion:D}=N();return<T style={e.container}>
       <L style={e.scrollView}contentContainerStyle={e.scrollContent}showsVerticalScrollIndicator={!1}>
         
         <T style={e.heroCard}>
@@ -40,6 +40,9 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
         </T>
 
         
+        <U/>
+
+        
         <T style={e.sectionCard}>
           <C style={e.sectionHeader}>{V("about.appInformation","APP INFORMATION")}</C>
 
@@ -87,7 +90,7 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
           <T style={e.featuresList}>
             <T style={e.featureItem}>
               <T style={[e.featureIconBox,{backgroundColor:`${t.brandPurple}15`}]}>
-                <X color={t.brandPurple}size={18}/>
+                <Y color={t.brandPurple}size={18}/>
               </T>
               <T style={e.featureTextBox}>
                 <C style={e.featureTitle}>{V("about.featureNetwork","Network Traffic Monitor")}</C>
@@ -99,7 +102,7 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
 
             <T style={e.featureItem}>
               <T style={[e.featureIconBox,{backgroundColor:`${t.blue500}15`}]}>
-                <Y color={t.blue500}size={18}/>
+                <Te color={t.blue500}size={18}/>
               </T>
               <T style={e.featureTextBox}>
                 <C style={e.featureTitle}>{V("about.featureConsole","Console Logger")}</C>
@@ -111,7 +114,7 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
 
             <T style={e.featureItem}>
               <T style={[e.featureIconBox,{backgroundColor:`${t.firebaseOrange}15`}]}>
-                <Te color={t.firebaseOrange}size={18}/>
+                <Ce color={t.firebaseOrange}size={18}/>
               </T>
               <T style={e.featureTextBox}>
                 <C style={e.featureTitle}>{V("about.featureAnalytics","Analytics Telemetry")}</C>
@@ -123,7 +126,7 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
 
             <T style={e.featureItem}>
               <T style={[e.featureIconBox,{backgroundColor:`${t.violet600}15`}]}>
-                <Ce color={t.violet600}size={18}/>
+                <Ve color={t.violet600}size={18}/>
               </T>
               <T style={e.featureTextBox}>
                 <C style={e.featureTitle}>{V("about.featureRedux","Redux State & Actions")}</C>
@@ -135,7 +138,7 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
 
             <T style={e.featureItem}>
               <T style={[e.featureIconBox,{backgroundColor:`${t.teal600}15`}]}>
-                <Ve color={t.teal600}size={18}/>
+                <Ie color={t.teal600}size={18}/>
               </T>
               <T style={e.featureTextBox}>
                 <C style={e.featureTitle}>{V("about.featureCapture","Screen & Video Capture")}</C>
@@ -147,7 +150,7 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
 
             <T style={e.featureItem}>
               <T style={[e.featureIconBox,{backgroundColor:`${t.emerald600}15`}]}>
-                <Ie color={t.emerald600}size={18}/>
+                <Se color={t.emerald600}size={18}/>
               </T>
               <T style={e.featureTextBox}>
                 <C style={e.featureTitle}>
@@ -164,10 +167,10 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
         
         <T style={e.gridContainer}>
           <S onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector").catch(()=>{})}}style={[e.gridCard,{backgroundColor:`${t.brandPurple}0F`,borderColor:`${t.brandPurple}30`}]}>
-            <U color={t.brandPurple}size={18}/>
+            <G color={t.brandPurple}size={18}/>
             <T style={{flex:1}}>
               <T style={{flexDirection:"row",alignItems:"center",gap:5}}>
-                <Q color={t.amber500}size={13}/>
+                <Z color={t.amber500}size={13}/>
                 <C style={e.gridCardTitle}>{V("about.github","GitHub")}</C>
               </T>
               <C style={e.gridCardSub}>{V("about.githubSub","Star & source code")}</C>
@@ -176,7 +179,7 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
           </S>
 
           <S onPress={()=>{B.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{})}}style={e.gridCard}>
-            <G color={t.npmRed}size={18}/>
+            <Q color={t.npmRed}size={18}/>
             <T style={{flex:1}}>
               <C style={e.gridCardTitle}>{V("about.npmRegistry","NPM Registry")}</C>
               <C style={e.gridCardSub}>{V("about.npmRegistrySub","Package updates")}</C>
@@ -185,7 +188,7 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
           </S>
 
           <S onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector#readme").catch(()=>{})}}style={e.gridCard}>
-            <Z color={t.brandPurple}size={18}/>
+            <J color={t.brandPurple}size={18}/>
             <T style={{flex:1}}>
               <C style={e.gridCardTitle}>{V("about.documentation","Documentation")}</C>
               <C style={e.gridCardSub}>{V("about.documentationSub","Integration guide")}</C>
@@ -194,7 +197,7 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
           </S>
 
           <S onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector/issues").catch(()=>{})}}style={e.gridCard}>
-            <J color={t.errorColor}size={18}/>
+            <K color={t.errorColor}size={18}/>
             <T style={{flex:1}}>
               <C style={e.gridCardTitle}>{V("about.reportIssue","Report Issue")}</C>
               <C style={e.gridCardSub}>{V("about.reportIssueSub","Help & support")}</C>
@@ -203,7 +206,7 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
           </S>
 
           <S onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector/releases").catch(()=>{})}}style={e.gridCard}>
-            <K color={t.successGreen}size={18}/>
+            <X color={t.successGreen}size={18}/>
             <T style={{flex:1}}>
               <C style={e.gridCardTitle}>{V("about.releaseNotes","Release Notes")}</C>
               <C style={e.gridCardSub}>{V("about.releaseNotesSub","What's new")}</C>
@@ -212,7 +215,7 @@ import"react";import{Platform as P,Linking as B,ScrollView as L,StyleSheet as F,
           </S>
 
           <S onPress={()=>{H("npm install react-native-inapp-inspector","NPM Command"),A(V("about.copiedInstallCommand","Copied package install command!"))}}style={e.gridCard}>
-            <Se color={t.brandPurple}size={16}/>
+            <Be color={t.brandPurple}size={16}/>
             <T style={{flex:1}}>
               <C style={e.gridCardTitle}>{V("about.copyInstall","Copy Install")}</C>
               <C style={e.gridCardSub}>{V("about.copyInstallSub","npm / yarn command")}</C>

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ConsoleLog } from '../../types';
+export interface ConsoleExportModalProps {
+    visible: boolean;
+    onClose: () => void;
+    filteredLogs: ConsoleLog[];
+    allLogs: ConsoleLog[];
+}
+export declare const ConsoleExportModal: React.FC<ConsoleExportModalProps>;
+export default ConsoleExportModal;