react-native-inapp-inspector 2.5.10 → 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/DeveloperSponsorCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface DeveloperSponsorCardProps {
+    publisherId?: string;
+    customEndpoint?: string;
+    containerStyle?: object;
+    compact?: boolean;
+}
+export declare const DeveloperSponsorCard: React.FC<DeveloperSponsorCardProps>;
+export default DeveloperSponsorCard;

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

@@ -0,0 +1,52 @@
+import{useEffect as O,useState as H}from"react";import{Image as L,Linking as P,Pressable as W,StyleSheet as N,Text as S,View as T}from"react-native";import $ from"../TouchableScale";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as C}from"../../styles/AppFonts";import{fetchDeveloperSponsor as j,trackSponsorImpression as A,handleSponsorClick as M}from"../../helpers/sponsorService";import{SparklesIcon as E,ExternalLinkIcon as I,GlobeIcon as U,ShieldCheckIcon as G}from"../NetworkIcons";export const DeveloperSponsorCard=({publisherId:B,customEndpoint:v,containerStyle:D,compact:R=!1})=>{const[o,F]=H(null);if(O(()=>{let V=!0;return j(B,v).then(k=>{V&&k&&(F(k),A(k))}),()=>{V=!1}},[B,v]),!o)return null;const r=o.accentColor||t.indigo600;return<$ onPress={()=>M(o)}style={[e.cardContainer,{borderColor:`${r}40`},D]}>
+      
+      <T style={[e.glowBackground,{backgroundColor:`${r}0A`}]}/>
+
+      
+      <T style={e.headerRow}>
+        <T style={e.badgeRow}>
+          <T style={[e.sponsorBadge,{backgroundColor:`${r}1F`,borderColor:`${r}44`}]}>
+            <E size={10}color={r}/>
+            <S style={[e.sponsorBadgeText,{color:r}]}>
+              {o.badgeText||"SPONSORED"}
+            </S>
+          </T>
+          {o.sponsorName?<S style={e.sponsorNameText}>· {o.sponsorName}</S>:null}
+        </T>
+
+        <T style={e.verifiedRow}>
+          {o.type==="ethicalads"?<W hitSlop={8}onPress={()=>P.openURL("https://www.ethicalads.io/?ref=react-native-inapp-inspector").catch(()=>{})}style={{flexDirection:"row",alignItems:"center",gap:3.5}}>
+              <S style={e.verifiedText}>Ad by EthicalAds</S>
+              <I size={10}color={t.grayTextWeak}/>
+            </W>:<>
+              <G size={11}color={t.emerald500}/>
+              <S style={e.verifiedText}>Verified Dev Tool</S>
+              <I size={11}color={t.grayTextWeak}/>
+            </>}
+        </T>
+      </T>
+
+      
+      <T style={e.contentRow}>
+        {o.logoUrl?<L source={{uri:o.logoUrl}}style={e.logoImage}resizeMode="contain"/>:<T style={[e.iconPlaceholder,{backgroundColor:`${r}18`}]}>
+            <U size={18}color={r}/>
+          </T>}
+
+        <T style={e.textColumn}>
+          <S style={[e.headlineText,R&&{fontSize:12.5,lineHeight:16}]}numberOfLines={R?1:2}>
+            {o.title}
+          </S>
+          {o.description&&!R?<S style={e.descText}numberOfLines={2}>
+              {o.description}
+            </S>:null}
+        </T>
+      </T>
+
+      
+      <T style={e.footerRow}>
+        <T style={[e.ctaButton,{backgroundColor:r,shadowColor:r}]}>
+          <S style={e.ctaButtonText}>{o.ctaText||"Learn More"}</S>
+          <I size={11}color={t.white}/>
+        </T>
+      </T>
+    </$>};const e=N.create({cardContainer:{backgroundColor:t.primaryLight,borderRadius:14,padding:13,borderWidth:1.2,position:"relative",overflow:"hidden",shadowColor:t.shadowColorString,shadowOffset:{width:0,height:2},shadowOpacity:.06,shadowRadius:8,elevation:2,gap:10},glowBackground:{position:"absolute",top:0,left:0,right:0,bottom:0},headerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},badgeRow:{flexDirection:"row",alignItems:"center",gap:6},sponsorBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:2.5,borderRadius:6,borderWidth:1},sponsorBadgeText:{fontFamily:C.interBold,fontSize:9,lineHeight:12,letterSpacing:.6},sponsorNameText:{fontFamily:C.interSemiBold,fontSize:11,color:t.grayTextWeak},verifiedRow:{flexDirection:"row",alignItems:"center",gap:3.5},verifiedText:{fontFamily:C.interMedium,fontSize:9.5,color:t.grayTextWeak},contentRow:{flexDirection:"row",alignItems:"center",gap:10},logoImage:{width:38,height:38,borderRadius:8},iconPlaceholder:{width:38,height:38,borderRadius:8,alignItems:"center",justifyContent:"center"},textColumn:{flex:1,gap:2},headlineText:{fontFamily:C.interBold,fontSize:13.5,lineHeight:18,color:t.primaryBlack,letterSpacing:-.2},descText:{fontFamily:C.interRegular,fontSize:11,lineHeight:15,color:t.grayTextWeak},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",marginTop:2},ctaButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:5,paddingHorizontal:12,paddingVertical:6.5,borderRadius:8,shadowOffset:{width:0,height:2},shadowOpacity:.25,shadowRadius:4,elevation:2},ctaButtonText:{fontFamily:C.interBold,fontSize:11.5,lineHeight:15,color:t.white}});export default DeveloperSponsorCard;

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

@@ -1,54 +1,54 @@
-import{useCallback as Z,useEffect as G,useRef as b,useState as j}from"react";import{Animated as n,Dimensions as De,PanResponder as Fe,Platform as N,StyleSheet as ee,Text as W,View as S}from"react-native";import Se from"react-native-linear-gradient";import{useInspector as Be}from"./InspectorContext";import $ from"../TouchableScale";import{GripVerticalIcon as Le,ScreenshotCaptureIcon as Ae,ScreenRecordIcon as Oe}from"../NetworkIcons";import{ScreenCapture as C,generateCaptureId as q}from"../../capture";import{triggerNativeHaptic as D}from"../../native/NativeInspector";import{showToast as v}from"../../helpers/toast";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as be}from"../../styles/AppFonts";import{useTranslation as Ee}from"../../i18n";import{MediaPreviewModal as Ge}from"./MediaPreviewModal";export const FloatingCaptureWidget=()=>{const{refreshMediaCount:x,captureFps:X,captureScale:Y,captureBitrate:B,captureMaxDurationSeconds:H,captureAudioMode:U,activeTab:ve,settingsPage:xe,peekMode:je,previewMediaItem:z,setPreviewMediaItem:T,isUpdatePopupVisible:Ie}=Be(),{t:s}=Ee(),[M,V]=j(!1),[Re,L]=j(!1),[Ce,A]=j(0),I=b(null),k=b(new n.Value(1)).current,F=b(new n.Value(0)).current,a=b(new n.ValueXY({x:0,y:0})).current,R=b({x:0,y:0});G(()=>{const e=a.x.addListener(o=>R.current.x=o.value),t=a.y.addListener(o=>R.current.y=o.value);return()=>{a.x.removeListener(e),a.y.removeListener(t)}},[a]);const P=b(!1),Te=b(Fe.create({onStartShouldSetPanResponder:()=>!0,onStartShouldSetPanResponderCapture:()=>!1,onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>2||Math.abs(t.dy)>2,onMoveShouldSetPanResponderCapture:(e,t)=>Math.abs(t.dx)>4||Math.abs(t.dy)>4,onPanResponderGrant:()=>{P.current=!0,a.setOffset({x:R.current.x,y:R.current.y}),a.setValue({x:0,y:0})},onPanResponderMove:n.event([null,{dx:a.x,dy:a.y}],{useNativeDriver:!1}),onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderRelease:()=>{a.flattenOffset(),setTimeout(()=>{P.current=!1},100);const{width:e,height:t}=De.get("window"),o=e/2-20,J=-o,K=20,Q=-(t-140),O=R.current.x,E=R.current.y;if(O<J||O>o||E<Q||E>K){const ke=Math.min(Math.max(O,J),o),Pe=Math.min(Math.max(E,Q),K);n.spring(a,{toValue:{x:ke,y:Pe},friction:7,tension:50,useNativeDriver:!1}).start()}},onPanResponderTerminate:()=>{a.flattenOffset(),P.current=!1}})).current;G(()=>{C.isRecording().then(e=>{V(e)}).catch(()=>{})},[]),G(()=>{let e=null;return M?(A(0),I.current=setInterval(()=>{A(t=>t+1)},1e3),e=n.loop(n.sequence([n.timing(k,{toValue:1.15,duration:500,useNativeDriver:!0}),n.timing(k,{toValue:1,duration:500,useNativeDriver:!0})])),e.start()):(I.current&&(clearInterval(I.current),I.current=null),A(0),k.setValue(1)),()=>{I.current&&clearInterval(I.current),e&&e.stop()}},[M,k]);const Me=Z(async()=>{if(!P.current)try{D("light"),L(!0),await new Promise(t=>setTimeout(t,60));const e=await C.takeScreenshot({format:"png",quality:.9,hideInspector:!1});if(L(!1),n.sequence([n.timing(F,{toValue:.65,duration:70,useNativeDriver:!0}),n.timing(F,{toValue:0,duration:200,useNativeDriver:!0})]).start(),e){D("success");const t=q("screenshot",e.format||"png"),o={id:t,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};T(o),x?.().catch(()=>{}),v(s("header.screenshotCaptured","Screenshot captured"))}else v(s("header.screenshotFailed","Failed to capture screenshot"))}catch{L(!1),v(s("header.screenshotError","Error capturing screenshot"))}},[x,F,s]),_=Z(async()=>{if(!P.current)try{if(M){D("medium");const e=await C.stopRecording();if(V(!1),e){D("success");const t=q("video",e.format),o={id:t,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio,thumbnailUri:e.thumbnailUri};T(o),x?.().catch(()=>{}),v(s("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else D("medium"),V(!0),await C.startRecording({fps:X,scale:Y,audioSource:U,bitrate:B>0?B:void 0,maxDurationSeconds:H})?v(s("header.recordingStarted","Recording started")):(V(!1),v(s("header.recordingStartFailed","Failed to start recording")))}catch{v(s("header.recordingError","Error during screen recording")),V(!1)}},[M,X,Y,B,H,U,x,s]),Ve=e=>{const t=Math.floor(e/60),o=e%60;return`${t<10?"0":""}${t}:${o<10?"0":""}${o}`};return ve==="media"||xe==="media"||Ie?null:<>
+import{useCallback as te,useEffect as W,useRef as v,useState as j}from"react";import{Animated as n,Dimensions as Be,PanResponder as ze,Platform as N,StyleSheet as re,Text as $,View as S}from"react-native";import Se from"react-native-linear-gradient";import{useInspector as Le}from"./InspectorContext";import X from"../TouchableScale";import{GripVerticalIcon as Ae,ScreenshotCaptureIcon as Ee,ScreenRecordIcon as Oe}from"../NetworkIcons";import{ScreenCapture as T,generateCaptureId as Y}from"../../capture";import{triggerNativeHaptic as F}from"../../native/NativeInspector";import{showToast as x}from"../../helpers/toast";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as ve}from"../../styles/AppFonts";import{useTranslation as Ge}from"../../i18n";import{MediaPreviewModal as We}from"./MediaPreviewModal";export const FloatingCaptureWidget=()=>{const{refreshMediaCount:I,captureFps:H,captureScale:U,captureBitrate:z,captureMaxDurationSeconds:_,captureAudioMode:J,captureWidgetEnabled:xe,activeTab:Ie,settingsPage:Re,peekMode:je,previewMediaItem:L,setPreviewMediaItem:M,isUpdatePopupVisible:Ce}=Le(),{t:s}=Ge(),[V,k]=j(!1),[Te,A]=j(!1),[Me,E]=j(0),R=v(null),P=v(new n.Value(1)).current,B=v(new n.Value(0)).current,a=v(new n.ValueXY({x:0,y:0})).current,C=v({x:0,y:0});W(()=>{const e=a.x.addListener(o=>C.current.x=o.value),t=a.y.addListener(o=>C.current.y=o.value);return()=>{a.x.removeListener(e),a.y.removeListener(t)}},[a]);const D=v(!1),Ve=v(ze.create({onStartShouldSetPanResponder:()=>!0,onStartShouldSetPanResponderCapture:()=>!1,onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>2||Math.abs(t.dy)>2,onMoveShouldSetPanResponderCapture:(e,t)=>Math.abs(t.dx)>4||Math.abs(t.dy)>4,onPanResponderGrant:()=>{D.current=!0,a.setOffset({x:C.current.x,y:C.current.y}),a.setValue({x:0,y:0})},onPanResponderMove:n.event([null,{dx:a.x,dy:a.y}],{useNativeDriver:!1}),onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderRelease:()=>{a.flattenOffset(),setTimeout(()=>{D.current=!1},100);const{width:e,height:t}=Be.get("window"),o=e/2-20,Q=-o,Z=20,ee=-(t-140),O=C.current.x,G=C.current.y;if(O<Q||O>o||G<ee||G>Z){const De=Math.min(Math.max(O,Q),o),Fe=Math.min(Math.max(G,ee),Z);n.spring(a,{toValue:{x:De,y:Fe},friction:7,tension:50,useNativeDriver:!1}).start()}},onPanResponderTerminate:()=>{a.flattenOffset(),D.current=!1}})).current;W(()=>{T.isRecording().then(e=>{k(e)}).catch(()=>{})},[]),W(()=>{let e=null;return V?(E(0),R.current=setInterval(()=>{E(t=>t+1)},1e3),e=n.loop(n.sequence([n.timing(P,{toValue:1.15,duration:500,useNativeDriver:!0}),n.timing(P,{toValue:1,duration:500,useNativeDriver:!0})])),e.start()):(R.current&&(clearInterval(R.current),R.current=null),E(0),P.setValue(1)),()=>{R.current&&clearInterval(R.current),e&&e.stop()}},[V,P]);const ke=te(async()=>{if(!D.current)try{F("light"),A(!0),await new Promise(t=>setTimeout(t,60));const e=await T.takeScreenshot({format:"png",quality:.9,hideInspector:!1});if(A(!1),n.sequence([n.timing(B,{toValue:.65,duration:70,useNativeDriver:!0}),n.timing(B,{toValue:0,duration:200,useNativeDriver:!0})]).start(),e){F("success");const t=Y("screenshot",e.format||"png"),o={id:t,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};M(o),I?.().catch(()=>{}),x(s("header.screenshotCaptured","Screenshot captured"))}else x(s("header.screenshotFailed","Failed to capture screenshot"))}catch{A(!1),x(s("header.screenshotError","Error capturing screenshot"))}},[I,B,s]),K=te(async()=>{if(!D.current)try{if(V){F("medium");const e=await T.stopRecording();if(k(!1),e){F("success");const t=Y("video",e.format),o={id:t,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||t,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio,thumbnailUri:e.thumbnailUri};M(o),I?.().catch(()=>{}),x(s("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else F("medium"),k(!0),await T.startRecording({fps:H,scale:U,audioSource:J,bitrate:z>0?z:void 0,maxDurationSeconds:_})?x(s("header.recordingStarted","Recording started")):(k(!1),x(s("header.recordingStartFailed","Failed to start recording")))}catch{x(s("header.recordingError","Error during screen recording")),k(!1)}},[V,H,U,z,_,J,I,s]),Pe=e=>{const t=Math.floor(e/60),o=e%60;return`${t<10?"0":""}${t}:${o<10?"0":""}${o}`};return!xe||Ie==="media"||Re==="media"||Ce?null:<>
       
-      <n.View pointerEvents="none"style={[r.flashOverlay,{opacity:F}]}/>
+      <n.View pointerEvents="none"style={[r.flashOverlay,{opacity:B}]}/>
 
-      {!Re&&!z&&<n.View{...Te.panHandlers}style={[r.container,{transform:a.getTranslateTransform()}]}>
+      {!Te&&!L&&<n.View{...Ve.panHandlers}style={[r.container,{transform:a.getTranslateTransform()}]}>
           
-          {M?<S style={r.recordingShadowWrapper}>
-              <$ onPress={_}style={r.recordingPillWrapper}>
+          {V?<S style={r.recordingShadowWrapper}>
+              <X onPress={K}style={r.recordingPillWrapper}>
                 <Se colors={[i.rose600,i.rose700]}start={{x:0,y:0}}end={{x:1,y:0}}style={r.recordingPill}>
-                  <n.View style={[r.recordingDot,{transform:[{scale:k}]}]}/>
-                  <W style={r.recordingText}>
-                    REC {Ve(Ce)}
-                  </W>
+                  <n.View style={[r.recordingDot,{transform:[{scale:P}]}]}/>
+                  <$ style={r.recordingText}>
+                    REC {Pe(Me)}
+                  </$>
                   <S style={r.stopIconBadge}>
                     <S style={r.stopIconSquare}/>
                   </S>
                 </Se>
-              </$>
+              </X>
             </S>:<S style={r.dockShadowWrapper}>
               <Se colors={[i.navy900,i.navy800,i.navy900]}start={{x:0,y:0}}end={{x:1,y:0}}style={r.dockBar}>
                 
-                <$ onPress={Me}style={r.menuItemBtn}accessible={!0}accessibilityLabel="Take Screenshot">
+                <X onPress={ke}style={r.menuItemBtn}accessible={!0}accessibilityLabel="Take Screenshot">
                   <S style={[r.menuItemIconCircle,{backgroundColor:`${i.sky400}38`}]}>
-                    <Ae size={14}color={i.sky400}/>
+                    <Ee size={14}color={i.sky400}/>
                   </S>
-                  <W style={r.menuItemText}>
+                  <$ style={r.menuItemText}>
                     {s("header.screenshot","Screenshot")}
-                  </W>
-                </$>
+                  </$>
+                </X>
 
                 
                 <S style={r.dockDivider}/>
 
                 
-                <$ onPress={_}style={r.menuItemBtn}accessible={!0}accessibilityLabel={s("header.recordScreen","Record Screen")}>
+                <X onPress={K}style={r.menuItemBtn}accessible={!0}accessibilityLabel={s("header.recordScreen","Record Screen")}>
                   <S style={[r.menuItemIconCircle,{backgroundColor:`${i.rose500}3D`}]}>
                     <Oe size={14}color={i.rose400}/>
                   </S>
-                  <W style={r.menuItemText}>
+                  <$ style={r.menuItemText}>
                     {s("header.record","Record")}
-                  </W>
-                </$>
+                  </$>
+                </X>
 
                 
                 <S style={r.dragGripArea}>
-                  <Le size={14}color="rgba(255, 255, 255, 0.55)"/>
+                  <Ae size={14}color="rgba(255, 255, 255, 0.55)"/>
                 </S>
               </Se>
             </S>}
         </n.View>}
 
       
-      <Ge item={z}visible={!!z}onClose={()=>T(null)}onDelete={async e=>{await C.deleteMedia(e.uri),x?.().catch(()=>{}),T(null)}}onConvertToGif={async e=>{const t=await C.convertToGif(e.uri,{fps:12,width:480});if(t){x?.().catch(()=>{});const o=q("anim","gif");T({id:o,type:"gif",format:"gif",uri:t.uri,filename:t.uri.split("/").pop()||o,sizeBytes:t.sizeBytes,timestamp:t.timestamp,durationMs:t.durationMs})}}}/>
-    </>};const r=ee.create({flashOverlay:{...ee.absoluteFillObject,backgroundColor:i.white,zIndex:999999},container:{position:"absolute",bottom:N.OS==="ios"?22:16,alignSelf:"center",alignItems:"center",justifyContent:"center",zIndex:999999,elevation:999999},dockShadowWrapper:{borderRadius:24,backgroundColor:"#0D1120",...N.select({ios:{shadowColor:i.black,shadowOffset:{width:0,height:6},shadowOpacity:.45,shadowRadius:14},android:{elevation:16}})},dockBar:{flexDirection:"row",alignItems:"center",borderRadius:24,overflow:"hidden"},dragGripArea:{paddingLeft:6,paddingRight:12,paddingVertical:10,alignItems:"center",justifyContent:"center"},dockDivider:{width:1,height:18,backgroundColor:"rgba(255, 255, 255, 0.14)"},menuItemBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:7,paddingVertical:8.5,paddingHorizontal:12},menuItemIconCircle:{width:24,height:24,borderRadius:12,alignItems:"center",justifyContent:"center"},menuItemText:{fontFamily:be.interSemiBold,fontSize:12,color:i.white,letterSpacing:.1},recordingShadowWrapper:{borderRadius:22,alignItems:"center",justifyContent:"center",...N.select({ios:{shadowColor:"#E11D48",shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:12},android:{elevation:14}})},recordingPillWrapper:{borderRadius:22,overflow:"hidden"},recordingPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:8,height:38,paddingHorizontal:14,borderRadius:22,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.45)"},recordingDot:{width:8,height:8,borderRadius:4,backgroundColor:"#FFFFFF"},recordingText:{fontFamily:be.interBold,fontSize:12,color:i.white,letterSpacing:.4},stopIconBadge:{width:18,height:18,borderRadius:9,backgroundColor:"rgba(255, 255, 255, 0.28)",alignItems:"center",justifyContent:"center",marginLeft:3},stopIconSquare:{width:6,height:6,borderRadius:1.5,backgroundColor:i.white}});export default FloatingCaptureWidget;
+      <We item={L}visible={!!L}onClose={()=>M(null)}onDelete={async e=>{await T.deleteMedia(e.uri),I?.().catch(()=>{}),M(null)}}onConvertToGif={async e=>{const t=await T.convertToGif(e.uri,{fps:12,width:480});if(t){I?.().catch(()=>{});const o=Y("anim","gif");M({id:o,type:"gif",format:"gif",uri:t.uri,filename:t.uri.split("/").pop()||o,sizeBytes:t.sizeBytes,timestamp:t.timestamp,durationMs:t.durationMs})}}}/>
+    </>};const r=re.create({flashOverlay:{...re.absoluteFillObject,backgroundColor:i.white,zIndex:999999},container:{position:"absolute",bottom:N.OS==="ios"?22:16,alignSelf:"center",alignItems:"center",justifyContent:"center",zIndex:999999,elevation:999999},dockShadowWrapper:{borderRadius:24,backgroundColor:"#0D1120",...N.select({ios:{shadowColor:i.black,shadowOffset:{width:0,height:6},shadowOpacity:.45,shadowRadius:14},android:{elevation:16}})},dockBar:{flexDirection:"row",alignItems:"center",borderRadius:24,overflow:"hidden"},dragGripArea:{paddingLeft:6,paddingRight:12,paddingVertical:10,alignItems:"center",justifyContent:"center"},dockDivider:{width:1,height:18,backgroundColor:"rgba(255, 255, 255, 0.14)"},menuItemBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:7,paddingVertical:8.5,paddingHorizontal:12},menuItemIconCircle:{width:24,height:24,borderRadius:12,alignItems:"center",justifyContent:"center"},menuItemText:{fontFamily:ve.interSemiBold,fontSize:12,color:i.white,letterSpacing:.1},recordingShadowWrapper:{borderRadius:22,alignItems:"center",justifyContent:"center",...N.select({ios:{shadowColor:"#E11D48",shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:12},android:{elevation:14}})},recordingPillWrapper:{borderRadius:22,overflow:"hidden"},recordingPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:8,height:38,paddingHorizontal:14,borderRadius:22,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.45)"},recordingDot:{width:8,height:8,borderRadius:4,backgroundColor:"#FFFFFF"},recordingText:{fontFamily:ve.interBold,fontSize:12,color:i.white,letterSpacing:.4},stopIconBadge:{width:18,height:18,borderRadius:9,backgroundColor:"rgba(255, 255, 255, 0.28)",alignItems:"center",justifyContent:"center",marginLeft:3},stopIconSquare:{width:6,height:6,borderRadius:1.5,backgroundColor:i.white}});export default FloatingCaptureWidget;