react-native-inapp-inspector 2.5.8 → 2.5.10

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

@@ -0,0 +1,317 @@
+import{useCallback as ne,useEffect as De,useMemo as $,useRef as He,useState as k}from"react";import{Modal as Ze,View as T,Text as C,TextInput as Le,StyleSheet as Pe,Pressable as Qe,Animated as L,Easing as J,ScrollView as Ye,Platform as _e,Share as Ee}from"react-native";import F from"../TouchableScale";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as w}from"../../styles/AppFonts";import{ExportIcon as Ce,ShareIcon as Ct,SaveIcon as Tt,CopyIcon as St,CloseWhite as Bt,CircleCheckIcon as Ft,InfoCircleIcon as Vt,WarningTriangleIcon as It,ErrorCircleIcon as Rt,LayersIcon as We,FilterIcon as At,CheckIcon as Dt,ZapIcon as Ht,PenIcon as Lt}from"../NetworkIcons";import{triggerNativeHaptic as R}from"../../native/NativeInspector";import{copyToClipboard as Pt,showToast as X}from"../../helpers";import{formatConsoleLogsExport as Et,estimateConsoleLogsExportSize as Wt,generateConsoleLogsFilename as Ot}from"../../helpers/shareFormatter";import{useTranslation as Mt}from"../../i18n";export const ConsoleExportModal=({visible:ae,onClose:Z,filteredLogs:Q,allLogs:Y})=>{const{t:S}=Mt(),[O,_]=k("config"),[P,be]=k("filtered"),[j,Te]=k("info"),[V,se]=k("all"),[de,we]=k("50"),[M,Se]=k(""),[A,Be]=k("txt"),[ce,ke]=k(!1),[ge,ve]=k(!1),[ue,Fe]=k(!1),[pe,Ve]=k(!1),[me,Ie]=k(!1),[Oe,fe]=k(0),[Me,ye]=k(0),[D,Re]=k(""),[H,ze]=k(""),[$e,Ae]=k(0),N=He(new L.Value(0)).current,ee=He(new L.Value(1)).current,E=$(()=>{if(!M||M.trim().length===0)return{isValid:!0,error:null,regex:null};try{return{isValid:!0,error:null,regex:new RegExp(M.trim(),"i")}}catch(o){return{isValid:!1,error:o?.message||"Invalid pattern",regex:null}}},[M]),te=$(()=>({includeStackTrace:ce,includeArguments:ge,includeCaller:ue,includeTimestamps:pe,includeAppInfo:me,includeDuplicates:!1,ignorePattern:V==="custom"&&E.isValid?M.trim():void 0}),[ce,ge,ue,pe,me,V,E.isValid,M]);De(()=>{if(O==="progress"){const o=L.loop(L.sequence([L.timing(ee,{toValue:1.05,duration:600,easing:J.inOut(J.ease),useNativeDriver:!0}),L.timing(ee,{toValue:1,duration:600,easing:J.inOut(J.ease),useNativeDriver:!0})]));return o.start(),()=>o.stop()}},[O,ee]),De(()=>{ae&&(_("config"),se("all"),Te("info"),Be("txt"),we("50"),Se(""),ke(!1),ve(!1),Fe(!1),Ve(!1),Ie(!1),fe(0),ye(0),Re(""),ze(""),Ae(0),N.setValue(0))},[ae,N]);const G=$(()=>P==="filtered"?Q:Y,[P,Q,Y]),K=$(()=>j==="all"?G:G.filter(o=>j==="info"?o.type==="info"||o.sourceMethod==="log"||o.sourceMethod==="info":j==="warn"?o.type==="warn":j==="error"?o.type==="error":!0),[G,j]),oe=$(()=>{let o=0,B=0,I=0;return G.forEach(W=>{W.type==="error"?I++:W.type==="warn"?B++:o++}),{all:G.length,info:o,warn:B,error:I}},[G]),{selectedLogs:v,ignoredCount:re}=$(()=>{if(K.length===0)return{selectedLogs:[],ignoredCount:0};let B=K,I=0;if(V==="custom"&&E.regex){const z=E.regex,ie=B.length;B=B.filter(U=>{const qe=U.message||"",Je=U.rawArgs?JSON.stringify(U.rawArgs):"",Xe=U.caller||"";return!z.test(qe)&&!z.test(Je)&&!z.test(Xe)}),I=ie-B.length}let W=B.length;if(V==="all")W=B.length;else if(V==="custom"){const z=parseInt(de,10);W=isNaN(z)||z<=0?B.length:Math.min(z,B.length)}return{selectedLogs:B.slice(-W),ignoredCount:I}},[K,V,de,E.regex]),le=$(()=>Wt(v,A,te),[v,A,te]),q=o=>o<=0?"0 KB":o<1024?`${(o/1024).toFixed(2)} KB`:o<1024*1024?`${(o/1024).toFixed(1)} KB`:`${(o/(1024*1024)).toFixed(2)} MB`,je=ne(()=>{if(v.length===0){X(S("console.noLogsToExport","No logs available to export"));return}R("medium"),_("progress"),fe(0),ye(0),N.setValue(0);const o=v.length,B=Math.max(1,Math.floor(o/10));let I=0;const W=setInterval(()=>{I=Math.min(I+B,o);const z=I/o;fe(Math.round(z*100)),ye(I),L.timing(N,{toValue:z,duration:120,easing:J.linear,useNativeDriver:!1}).start(),I>=o&&(clearInterval(W),setTimeout(()=>{const ie=Et(v,A,te),U=Ot(A);Re(ie),ze(U),Ae(ie.length),_("complete"),R("heavy")},180))},45)},[v,A,te,N,S]),Ne=ne(async()=>{if(D){R("light");try{await Ee.share({title:H,message:D},{dialogTitle:`Share ${H}`,subject:H})}catch(o){o?.message!=="User did not share"&&X(o?.message||"Failed to open share sheet")}}},[D,H]),Ge=ne(async()=>{if(D){R("medium");try{await Ee.share({title:`Save ${H}`,message:D},{dialogTitle:`Save to Disk (${H})`,subject:H}),X(S("console.savePromptOpened","Opened save to disk dialog"))}catch(o){o?.message!=="User did not share"&&X(o?.message||"Save error")}}},[D,H,S]),Ue=ne(()=>{D&&(R("light"),Pt(D,"Console Logs"),X(S("console.copiedLogs","Logs copied to clipboard!")))},[D,S]),Ke=Q.length!==Y.length;return<Ze visible={ae}transparent animationType="slide"onRequestClose={Z}>
+      <T style={e.overlay}>
+        <Qe style={e.backdrop}onPress={Z}/>
+
+        <T style={e.bottomSheetCard}>
+          
+          <T style={e.sheetHandleContainer}>
+            <T style={e.sheetHandle}/>
+          </T>
+
+          
+          <T style={e.headerRow}>
+            <T style={e.headerLeft}>
+              <T style={e.iconBadge}>
+                <Ce size={18}color={t.purple}/>
+              </T>
+              <T style={e.headerTextGroup}>
+                <C style={e.title}>
+                  {S("console.exportTitle","Export Console Logs")}
+                </C>
+                <C style={e.subtitle}>
+                  {O==="config"?`${v.length} logs ready for export`:O==="progress"?"Preparing exported file...":"Export complete"}
+                </C>
+              </T>
+            </T>
+            <F onPress={Z}hitSlop={10}style={e.closeBtn}>
+              <Bt size={12}color={t.grayTextWeak}/>
+            </F>
+          </T>
+
+          
+          {O==="config"&&<>
+              <Ye showsVerticalScrollIndicator={!1}contentContainerStyle={e.configContainer}>
+                
+                {Ke&&<T style={e.section}>
+                    <C style={e.sectionLabel}>
+                      {S("console.exportScope","LOG SOURCE SCOPE")}
+                    </C>
+                    <T style={e.segmentedRow}>
+                      <F onPress={()=>{R("light"),be("filtered")}}style={[e.segmentBtn,P==="filtered"&&e.segmentBtnActive]}>
+                        <At size={13}color={P==="filtered"?t.purple:t.grayTextWeak}/>
+                        <C style={[e.segmentBtnText,P==="filtered"&&e.segmentBtnTextActive]}>
+                          {S("console.filteredView","Active Filter")} (
+                          {Q.length})
+                        </C>
+                      </F>
+
+                      <F onPress={()=>{R("light"),be("all")}}style={[e.segmentBtn,P==="all"&&e.segmentBtnActive]}>
+                        <We size={13}color={P==="all"?t.purple:t.grayTextWeak}/>
+                        <C style={[e.segmentBtnText,P==="all"&&e.segmentBtnTextActive]}>
+                          {S("console.allLogsScope","All Logs")} ({Y.length})
+                        </C>
+                      </F>
+                    </T>
+                  </T>}
+
+                
+                <T style={e.section}>
+                  <C style={e.sectionLabel}>LOG LEVEL FILTER</C>
+                  <T style={e.levelRow}>
+                    {[{id:"all",label:"All",count:oe.all,color:t.purple,Icon:We},{id:"info",label:"Info / Log",count:oe.info,color:t.sky600,Icon:Vt},{id:"warn",label:"Warn",count:oe.warn,color:t.amber600,Icon:It},{id:"error",label:"Error",count:oe.error,color:t.errorColor,Icon:Rt}].map(o=>{const B=j===o.id,I=o.Icon;return<F key={o.id}onPress={()=>{R("light"),Te(o.id)}}style={[e.levelChip,B&&{backgroundColor:`${o.color}15`,borderColor:o.color}]}>
+                          <I size={11}color={B?o.color:t.grayTextWeak}/>
+                          <C style={[e.levelChipText,B&&{color:o.color,fontFamily:w.interBold}]}>
+                            {o.label}
+                          </C>
+                          <T style={[e.levelCountBadge,B&&{backgroundColor:`${o.color}25`}]}>
+                            <C style={[e.levelCountText,B&&{color:o.color}]}>
+                              {o.count}
+                            </C>
+                          </T>
+                        </F>})}
+                  </T>
+                </T>
+
+                
+                <T style={e.section}>
+                  <T style={e.sectionHeaderRow}>
+                    <C style={e.sectionLabel}>LOGS COUNT RANGE</C>
+                    <T style={e.countPill}>
+                      <C style={e.countPillText}>
+                        Matched: {K.length}
+                      </C>
+                    </T>
+                  </T>
+
+                  
+                  <T style={e.segmentedRow}>
+                    <F onPress={()=>{R("light"),se("all")}}style={[e.segmentBtn,V==="all"&&e.segmentBtnActive]}>
+                      <Ht size={13}color={V==="all"?t.purple:t.grayTextStrong}/>
+                      <C style={[e.segmentBtnText,V==="all"&&e.segmentBtnTextActive]}>
+                        All ({K.length})
+                      </C>
+                    </F>
+
+                    <F onPress={()=>{R("light"),se("custom")}}style={[e.segmentBtn,V==="custom"&&e.segmentBtnActive]}>
+                      <Lt size={12}color={V==="custom"?t.purple:t.grayTextStrong}/>
+                      <C style={[e.segmentBtnText,V==="custom"&&e.segmentBtnTextActive]}>
+                        Custom
+                      </C>
+                    </F>
+                  </T>
+
+                  
+                  {V==="custom"&&<T style={e.customOptionsContainer}>
+                      
+                      <T style={e.customFieldRow}>
+                        <C style={e.customFieldLabel}>
+                          {S("console.enterCount","Enter number of logs:")}
+                        </C>
+                        <Le keyboardType="number-pad"value={de}onChangeText={we}style={e.customCountInput}placeholder="e.g. 50"placeholderTextColor={t.slate400}/>
+                      </T>
+
+                      
+                      <T style={e.regexFieldBlock}>
+                        <T style={e.regexLabelRow}>
+                          <C style={e.customFieldLabel}>
+                            {S("console.ignorePatterns","Ignore Patterns (Regex):")}
+                          </C>
+                          {E.isValid&&re>0&&<T style={e.regexExclusionBadge}>
+                              <C style={e.regexExclusionBadgeText}>
+                                -{re} excluded
+                              </C>
+                            </T>}
+                        </T>
+
+                        <Le autoCapitalize="none"autoCorrect={!1}value={M}onChangeText={Se}style={[e.regexInput,!E.isValid&&e.regexInputError]}placeholder="e.g. ^\[DEBUG\]|analytics|token=.*"placeholderTextColor={t.slate400}/>
+
+                        {E.isValid?<C style={e.regexHelpText}>
+                            {S("console.ignorePatternsDesc","Logs matching this regex will be excluded from export.")}
+                          </C>:<C style={e.regexErrorText}>
+                            ⚠️{" "}
+                            {S("console.invalidRegex","Invalid regular expression syntax")}
+                          </C>}
+                      </T>
+                    </T>}
+                </T>
+
+                
+                <T style={e.section}>
+                  <C style={e.sectionLabel}>EXPORT FORMAT</C>
+                  <T style={e.formatRowInline}>
+                    {[{id:"txt",label:"Plain Text (.txt)",desc:"Universal text with structured banners"},{id:"log",label:"Log File (.log)",desc:"Standard log format with frame blocks"}].map(o=>{const B=A===o.id;return<F key={o.id}onPress={()=>{R("light"),Be(o.id)}}style={[e.formatCardInline,B&&e.formatCardInlineActive]}>
+                          <T style={e.formatCardInlineHeader}>
+                            <T style={[e.radioCircle,B&&e.radioCircleActive]}>
+                              {B&&<T style={e.radioDot}/>}
+                            </T>
+                            <C style={[e.formatCardTitle,B&&e.formatCardTitleActive]}>
+                              {o.label}
+                            </C>
+                          </T>
+                          <C style={e.formatCardDesc}>{o.desc}</C>
+                        </F>})}
+                  </T>
+                </T>
+
+                
+                <T style={e.section}>
+                  <C style={e.sectionLabel}>CONTENT OPTIONS</C>
+                  <T style={e.optionsGrid}>
+                    {[{key:"stack",label:"Stack Trace & Frames",value:ce,toggle:()=>ke(o=>!o)},{key:"args",label:"Arguments & Payloads",value:ge,toggle:()=>ve(o=>!o)},{key:"caller",label:"Caller & File Origin",value:ue,toggle:()=>Fe(o=>!o)},{key:"timestamps",label:"Exact Timestamps",value:pe,toggle:()=>Ve(o=>!o)},{key:"appinfo",label:"System Header Banner",value:me,toggle:()=>Ie(o=>!o)}].map(o=><F key={o.key}onPress={()=>{R("light"),o.toggle()}}style={[e.optionRow,o.value&&e.optionRowActive]}>
+                        <T style={[e.checkbox,o.value&&e.checkboxActive]}>
+                          {o.value&&<Dt size={10}color={t.white}/>}
+                        </T>
+                        <C style={[e.optionLabel,o.value&&e.optionLabelActive]}>
+                          {o.label}
+                        </C>
+                      </F>)}
+                  </T>
+                </T>
+              </Ye>
+
+              
+              <T style={e.staticFooter}>
+                <T style={e.footerMinimalSummary}>
+                  <T style={e.footerSummaryLeft}>
+                    <T style={e.footerSummaryDot}/>
+                    <C style={e.footerSummaryCountText}>
+                      {v.length} logs
+                    </C>
+                    <C style={e.footerSummaryDivider}>•</C>
+                    <C style={e.footerSummarySizeText}>
+                      ~{q(le)}
+                    </C>
+                    <C style={e.footerSummaryDivider}>•</C>
+                    <C style={e.footerSummaryFormatText}>
+                      .{A.toUpperCase()}
+                    </C>
+                  </T>
+
+                  {re>0&&<T style={e.footerIgnoredPill}>
+                      <C style={e.footerIgnoredPillText}>
+                        -{re} ignored
+                      </C>
+                    </T>}
+                </T>
+
+                <F onPress={je}disabled={v.length===0}style={[e.exportActionBtn,v.length===0&&e.exportActionBtnDisabled]}>
+                  <Ce size={17}color={t.white}/>
+                  <C style={e.exportActionBtnText}>
+                    {S("console.exportLogsAction",{count:v.length,size:q(le),defaultValue:`Export ${v.length} Logs (${q(le)})`})}
+                  </C>
+                </F>
+              </T>
+            </>}
+
+          
+          {O==="progress"&&<T style={e.progressContainer}>
+              <L.View style={[e.progressIconBadge,{transform:[{scale:ee}]}]}>
+                <Ce size={30}color={t.purple}/>
+              </L.View>
+
+              <C style={e.progressHeading}>
+                {S("console.exportingLogs","Exporting Console Logs...")}
+              </C>
+              <C style={e.progressSub}>
+                {S("console.processingItem","Processing")} {Me} /{" "}
+                {v.length} {S("console.records","records")} (
+                {Oe}%)
+              </C>
+
+              
+              <T style={e.progressTrack}>
+                <L.View style={[e.progressBar,{width:N.interpolate({inputRange:[0,1],outputRange:["0%","100%"]})}]}/>
+              </T>
+
+              <C style={e.progressFootnote}>
+                Formatting .{A.toUpperCase()} payload with separators •{" "}
+                {q(le)}
+              </C>
+            </T>}
+
+          
+          {O==="complete"&&<T style={e.completeContainer}>
+              <T style={e.completeSuccessBadge}>
+                <Ft size={34}color={t.emerald500}/>
+              </T>
+
+              <C style={e.completeTitle}>
+                {S("console.exportSuccessTitle","Logs Export Ready!")}
+              </C>
+              <C style={e.completeSub}>
+                {S("console.exportSuccessDesc","Generated full formatted log bundle ready to share or save.")}
+              </C>
+
+              
+              <T style={e.fileDetailsCard}>
+                <T style={e.fileDetailsRow}>
+                  <C style={e.fileDetailLabel}>📁 File:</C>
+                  <C style={e.fileDetailValue}numberOfLines={1}>
+                    {H}
+                  </C>
+                </T>
+                <T style={e.fileDetailsRow}>
+                  <C style={e.fileDetailLabel}>📊 Log Count:</C>
+                  <C style={e.fileDetailValue}>
+                    {v.length} logs
+                  </C>
+                </T>
+                <T style={e.fileDetailsRow}>
+                  <C style={e.fileDetailLabel}>💾 Final Size:</C>
+                  <C style={[e.fileDetailValue,{color:t.emerald500,fontFamily:w.interBold}]}>
+                    {q($e)}
+                  </C>
+                </T>
+                <T style={e.fileDetailsRow}>
+                  <C style={e.fileDetailLabel}>⚙️ Format:</C>
+                  <C style={e.fileDetailValue}>
+                    .{A.toUpperCase()}
+                  </C>
+                </T>
+              </T>
+
+              
+              <T style={e.actionButtonGroup}>
+                
+                <F onPress={Ne}style={[e.primaryActionBtn,e.shareBtn]}>
+                  <Ct size={15}color={t.white}/>
+                  <C style={e.primaryActionBtnText}>
+                    {S("console.shareReport","Share Logs")}
+                  </C>
+                </F>
+
+                
+                <F onPress={Ge}style={[e.primaryActionBtn,e.saveDiskBtn]}>
+                  <Tt size={15}color={t.white}/>
+                  <C style={e.primaryActionBtnText}>
+                    {S("console.saveToDisk","Save to Disk")}
+                  </C>
+                </F>
+
+                
+                <F onPress={Ue}style={e.secondaryActionBtn}>
+                  <St size={14}color={t.purple}/>
+                  <C style={e.secondaryActionBtnText}>
+                    {S("console.copyToClipboard","Copy Content")}
+                  </C>
+                </F>
+              </T>
+
+              
+              <T style={e.bottomFooterRow}>
+                <F onPress={()=>_("config")}style={e.textBtn}>
+                  <C style={e.textBtnText}>
+                    {S("console.exportAnother","\u2190 Export Another")}
+                  </C>
+                </F>
+
+                <F onPress={Z}style={e.doneBtn}>
+                  <C style={e.doneBtnText}>
+                    {S("common.done","Done")}
+                  </C>
+                </F>
+              </T>
+            </T>}
+        </T>
+      </T>
+    </Ze>};const e=Pe.create({overlay:{flex:1,backgroundColor:"rgba(0,0,0,0.55)",justifyContent:"flex-end"},backdrop:{...Pe.absoluteFillObject},bottomSheetCard:{width:"100%",maxHeight:"86%",backgroundColor:t.white,borderTopLeftRadius:24,borderTopRightRadius:24,overflow:"hidden",shadowColor:"#000",shadowOffset:{width:0,height:-6},shadowOpacity:.18,shadowRadius:16,elevation:24},sheetHandleContainer:{width:"100%",alignItems:"center",paddingTop:8,paddingBottom:4,backgroundColor:"#FAF9FE"},sheetHandle:{width:38,height:4,borderRadius:2,backgroundColor:`${t.grayTextWeak}40`},headerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:18,paddingVertical:12,borderBottomWidth:1,borderBottomColor:t.dividerColor,backgroundColor:"#FAF9FE",shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.04,shadowRadius:4,elevation:3},headerLeft:{flexDirection:"row",alignItems:"center",gap:12,flex:1},headerTextGroup:{gap:2},iconBadge:{width:36,height:36,borderRadius:10,backgroundColor:`${t.purple}14`,borderWidth:1,borderColor:`${t.purple}28`,justifyContent:"center",alignItems:"center"},title:{fontFamily:w.interBold,fontSize:15.5,lineHeight:20,color:t.primaryBlack,letterSpacing:-.2},subtitle:{fontFamily:w.interMedium,fontSize:11.5,lineHeight:15,color:t.grayTextWeak},closeBtn:{width:28,height:28,borderRadius:14,backgroundColor:t.dividerColor,justifyContent:"center",alignItems:"center"},configContainer:{padding:16,gap:14},section:{gap:7},sectionHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},sectionLabel:{fontFamily:w.interBold,fontSize:10.5,lineHeight:14,color:t.grayTextWeak,letterSpacing:.6},levelRow:{flexDirection:"row",flexWrap:"wrap",gap:6},levelChip:{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:5.5,borderRadius:8,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.dividerColor,gap:5},levelChipText:{fontFamily:w.interMedium,fontSize:11,lineHeight:15,color:t.primaryBlack},levelCountBadge:{backgroundColor:"rgba(0,0,0,0.06)",paddingHorizontal:4.5,paddingVertical:1,borderRadius:5},levelCountText:{fontFamily:w.interBold,fontSize:9.5,color:t.grayTextStrong},countPill:{backgroundColor:`${t.purple}12`,paddingHorizontal:8,paddingVertical:2,borderRadius:6},countPillText:{fontFamily:w.interSemiBold,fontSize:10.5,color:t.purple},segmentedRow:{flexDirection:"row",gap:7},segmentBtn:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:8.5,borderRadius:9,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.dividerColor},segmentBtnActive:{backgroundColor:`${t.purple}14`,borderColor:t.purple},segmentBtnText:{fontFamily:w.interMedium,fontSize:11.5,lineHeight:15,color:t.grayTextStrong},segmentBtnTextActive:{color:t.purple,fontFamily:w.interBold},customOptionsContainer:{marginTop:6,padding:11,borderRadius:10,backgroundColor:"#F8FAFC",borderWidth:1,borderColor:t.dividerColor,gap:10},customFieldRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:10},customFieldLabel:{fontFamily:w.interSemiBold,fontSize:11.5,lineHeight:15,color:t.grayTextStrong},customCountInput:{width:90,backgroundColor:t.white,borderWidth:1,borderColor:t.dividerColor,borderRadius:7,paddingHorizontal:10,paddingVertical:5.5,fontSize:12.5,fontFamily:w.interSemiBold,color:t.primaryBlack,textAlign:"center"},regexFieldBlock:{gap:5,paddingTop:4,borderTopWidth:1,borderTopColor:t.dividerColor},regexLabelRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},regexExclusionBadge:{backgroundColor:`${t.purple}14`,paddingHorizontal:7,paddingVertical:2,borderRadius:5},regexExclusionBadgeText:{fontFamily:w.interBold,fontSize:10,color:t.purple},regexInput:{backgroundColor:t.white,borderWidth:1,borderColor:t.dividerColor,borderRadius:7,paddingHorizontal:10,paddingVertical:6,fontSize:12,fontFamily:w.interRegular,color:t.primaryBlack},regexInputError:{borderColor:t.errorColor,backgroundColor:`${t.errorColor}08`},regexErrorText:{fontFamily:w.interMedium,fontSize:10.5,lineHeight:14,color:t.errorColor},regexHelpText:{fontFamily:w.interRegular,fontSize:10.5,lineHeight:14,color:t.grayTextWeak},formatRowInline:{flexDirection:"row",gap:8},formatCardInline:{flex:1,padding:10,borderRadius:10,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.dividerColor,gap:4},formatCardInlineActive:{backgroundColor:`${t.purple}0C`,borderColor:t.purple},formatCardInlineHeader:{flexDirection:"row",alignItems:"center",gap:6},radioCircle:{width:14,height:14,borderRadius:7,borderWidth:1.5,borderColor:t.grayTextWeak,justifyContent:"center",alignItems:"center"},radioCircleActive:{borderColor:t.purple},radioDot:{width:7,height:7,borderRadius:3.5,backgroundColor:t.purple},formatCardTitle:{fontFamily:w.interSemiBold,fontSize:11.5,lineHeight:15,color:t.grayTextStrong},formatCardTitleActive:{fontFamily:w.interBold,color:t.purple},formatCardDesc:{fontFamily:w.interRegular,fontSize:10,lineHeight:13,color:t.grayTextWeak,paddingLeft:20},optionsGrid:{flexDirection:"column",gap:5},optionRow:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:7,borderRadius:8,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.dividerColor,gap:8},optionRowActive:{backgroundColor:`${t.purple}0A`,borderColor:`${t.purple}30`},checkbox:{width:15,height:15,borderRadius:3.5,borderWidth:1.5,borderColor:t.grayTextWeak,justifyContent:"center",alignItems:"center"},checkboxActive:{backgroundColor:t.purple,borderColor:t.purple},optionLabel:{fontFamily:w.interMedium,fontSize:11.5,lineHeight:15,color:t.grayTextStrong},optionLabelActive:{fontFamily:w.interSemiBold,color:t.primaryBlack},staticFooter:{paddingHorizontal:16,paddingTop:10,paddingBottom:_e.OS==="ios"?26:14,backgroundColor:t.white,borderTopWidth:1,borderTopColor:t.dividerColor,shadowColor:t.purple,shadowOffset:{width:0,height:-4},shadowOpacity:.12,shadowRadius:8,elevation:8,gap:8},footerMinimalSummary:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:2},footerSummaryLeft:{flexDirection:"row",alignItems:"center",gap:6},footerSummaryDot:{width:6,height:6,borderRadius:3,backgroundColor:t.emerald500||"#10B981"},footerSummaryCountText:{fontFamily:w.interSemiBold,fontSize:11.5,lineHeight:15,color:t.grayTextStrong},footerSummaryDivider:{fontSize:10,color:t.grayTextWeak},footerSummarySizeText:{fontFamily:w.interBold,fontSize:11.5,lineHeight:15,color:t.purple},footerSummaryFormatText:{fontFamily:w.interMedium,fontSize:11,lineHeight:14,color:t.grayTextWeak},footerIgnoredPill:{backgroundColor:`${t.errorColor}12`,paddingHorizontal:7,paddingVertical:1.5,borderRadius:5},footerIgnoredPillText:{fontFamily:w.interSemiBold,fontSize:10,color:t.errorColor},exportActionBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:t.purple,paddingVertical:12,borderRadius:12,gap:7,shadowColor:t.purple,shadowOffset:{width:0,height:4},shadowOpacity:.25,shadowRadius:8,elevation:4},exportActionBtnDisabled:{opacity:.5},exportActionBtnText:{fontFamily:w.interBold,fontSize:13.5,lineHeight:17,color:t.white,letterSpacing:.1},progressContainer:{padding:28,alignItems:"center",justifyContent:"center"},progressIconBadge:{width:60,height:60,borderRadius:30,backgroundColor:`${t.purple}18`,justifyContent:"center",alignItems:"center",marginBottom:14},progressHeading:{fontFamily:w.interBold,fontSize:15.5,lineHeight:21,color:t.primaryBlack,marginBottom:3},progressSub:{fontFamily:w.interMedium,fontSize:12,lineHeight:16,color:t.grayTextWeak,marginBottom:18},progressTrack:{width:"100%",height:9,backgroundColor:t.grayBackground,borderRadius:4.5,overflow:"hidden",borderWidth:1,borderColor:t.dividerColor,marginBottom:10},progressBar:{height:"100%",backgroundColor:t.purple,borderRadius:4.5},progressFootnote:{fontFamily:w.interMedium,fontSize:11,lineHeight:14,color:t.grayTextWeak},completeContainer:{padding:20,alignItems:"center"},completeSuccessBadge:{width:58,height:58,borderRadius:29,backgroundColor:`${t.emerald500}18`,justifyContent:"center",alignItems:"center",marginBottom:12},completeTitle:{fontFamily:w.interBold,fontSize:16.5,lineHeight:22,color:t.primaryBlack},completeSub:{fontFamily:w.interMedium,fontSize:12,lineHeight:16,color:t.grayTextWeak,textAlign:"center",marginTop:3,marginBottom:16},fileDetailsCard:{width:"100%",backgroundColor:"#F8FAFC",borderRadius:12,padding:12,borderWidth:1,borderColor:t.dividerColor,gap:7,marginBottom:16},fileDetailsRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},fileDetailLabel:{fontFamily:w.interMedium,fontSize:11.5,lineHeight:15,color:t.grayTextStrong},fileDetailValue:{fontFamily:w.interSemiBold,fontSize:11.5,lineHeight:15,color:t.primaryBlack},actionButtonGroup:{width:"100%",gap:8,marginBottom:14},primaryActionBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,borderRadius:10,gap:7},shareBtn:{backgroundColor:t.purple,shadowColor:t.purple,shadowOffset:{width:0,height:3},shadowOpacity:.2,shadowRadius:6,elevation:3},saveDiskBtn:{backgroundColor:t.teal600,shadowColor:t.teal600,shadowOffset:{width:0,height:3},shadowOpacity:.2,shadowRadius:6,elevation:3},primaryActionBtnText:{fontFamily:w.interBold,fontSize:13,lineHeight:17,color:t.white},secondaryActionBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,borderRadius:10,borderWidth:1,borderColor:`${t.purple}40`,backgroundColor:`${t.purple}0C`,gap:6},secondaryActionBtnText:{fontFamily:w.interSemiBold,fontSize:12,lineHeight:15,color:t.purple},bottomFooterRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",width:"100%",paddingTop:8,borderTopWidth:1,borderTopColor:t.dividerColor},textBtn:{paddingVertical:5,paddingHorizontal:8},textBtnText:{fontFamily:w.interMedium,fontSize:11.5,lineHeight:15,color:t.grayTextStrong},doneBtn:{paddingVertical:5,paddingHorizontal:14,borderRadius:6,backgroundColor:t.dividerColor},doneBtnText:{fontFamily:w.interBold,fontSize:11.5,lineHeight:15,color:t.primaryBlack}});export default ConsoleExportModal;

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

@@ -1,71 +1,76 @@
-import F,{useCallback as k,useMemo as P,useRef as ne}from"react";import{FlatList as Se,Pressable as Ce,ScrollView as Q,Text as A,TextInput as Ie,View as S}from"react-native";import{useInspector as Te}from"./InspectorContext";import{useTranslation as xe}from"../../i18n";import H from"../TouchableScale";import Le from"../AnimatedEntrance";import{ConsoleLogCard as Ae}from"../ConsoleLogCard";import Ve from"../EmptyState";import Ee from"../EndOfListFooter";import T from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as z}from"../../styles/AppFonts";import{LogFilter as V}from"../../types";import{SearchIcon as Be,ClearIcon as Fe,SortArrowIcon as Pe,TrashIcon as He,LayersIcon as Re,UserIcon as $e,InfoCircleIcon as We,WarningTriangleIcon as De,ErrorCircleIcon as Oe,AnalyticsIcon as Ne}from"../NetworkIcons";const Y=10,Ue=F.memo(()=>{const{t:C}=xe(),{logSearch:y,setLogSearch:E,logSortOrder:K,setLogSortOrder:X,handleDelete:j,logFilters:h,setLogFilters:R,logCounts:x,filteredConsoleLogs:w,visibleConsoleLogs:O,maxConsoleLogs:$,setSelectedLog:N}=Te(),q=$||100,U=ne(null),[G,M]=F.useState(q);F.useEffect(()=>{M($||100),U.current?.scrollToOffset({offset:0,animated:!1})},[y,h,$]);const W=P(()=>w.slice(0,G),[w,G]),v=k(e=>{N(e)},[N]),J=k(({item:e,index:t})=><Le index={t}distance={8}>
-        <Ae testID={`inspector.console.item.${t}`}item={e}searchStr={y}onPress={v}/>
-      </Le>,[y,v]),Z=k((e,t)=>({length:148,offset:148*t,index:t}),[]),ee=k((e,t)=>e?.id?.toString()??t.toString(),[]),oe=P(()=>{const e=O.length,t=w.length;if(h.has("all")||!Array.from(h).some(B=>B!=="all"))return<S style={{paddingHorizontal:8,paddingTop:8,paddingBottom:3}}>
+import F,{useCallback as H,useMemo as R,useRef as se}from"react";import{FlatList as Se,Pressable as Ce,ScrollView as K,Text as A,TextInput as Ie,View as S}from"react-native";import{useInspector as we}from"./InspectorContext";import{useTranslation as Te}from"../../i18n";import P from"../TouchableScale";import Le from"../AnimatedEntrance";import{ConsoleLogCard as Ae}from"../ConsoleLogCard";import Ee from"../EmptyState";import Ve from"../EndOfListFooter";import Be from"./ConsoleExportModal";import b from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as z}from"../../styles/AppFonts";import{LogFilter as E}from"../../types";import{SearchIcon as Fe,ClearIcon as Pe,SortArrowIcon as He,TrashIcon as Re,LayersIcon as $e,UserIcon as De,InfoCircleIcon as We,WarningTriangleIcon as Oe,ErrorCircleIcon as Me,AnalyticsIcon as Ne,ExportIcon as Ue}from"../NetworkIcons";const X=10,ve=F.memo(()=>{const{t:I}=Te(),{logSearch:y,setLogSearch:V,logSortOrder:j,setLogSortOrder:q,handleDelete:J,logFilters:h,setLogFilters:$,logCounts:x,filteredConsoleLogs:C,visibleConsoleLogs:D,maxConsoleLogs:W,setSelectedLog:N}=we(),Z=W||100,U=se(null),[v,G]=F.useState(Z),[ee,_]=F.useState(!1);F.useEffect(()=>{G(W||100),U.current?.scrollToOffset({offset:0,animated:!1})},[y,h,W]);const O=R(()=>C.slice(0,v),[C,v]),Q=H(e=>{N(e)},[N]),oe=H(({item:e,index:t})=><Le index={t}distance={8}>
+        <Ae testID={`inspector.console.item.${t}`}item={e}searchStr={y}onPress={Q}/>
+      </Le>,[y,Q]),te=H((e,t)=>({length:148,offset:148*t,index:t}),[]),le=H((e,t)=>e?.id?.toString()??t.toString(),[]),re=R(()=>{const e=D.length,t=C.length;if(h.has("all")||!Array.from(h).some(B=>B!=="all"))return<S style={{paddingHorizontal:8,paddingTop:8,paddingBottom:3}}>
           <A style={{fontFamily:z.interMedium,fontSize:11,color:o.grayTextWeak,letterSpacing:.2}}>
             {t===e?`Showing ${e} logs`:`Showing ${t} of ${e} logs`}
           </A>
-        </S>;{const B=Array.from(h).filter(I=>I!=="all").map(I=>I==="user-log"?"Log":I==="analytics"?"Analytics":I.charAt(0).toUpperCase()+I.slice(1));return<S style={{paddingHorizontal:12,paddingTop:8,paddingBottom:3}}>
+        </S>;{const B=Array.from(h).filter(T=>T!=="all").map(T=>T==="user-log"?"Log":T==="analytics"?"Analytics":T.charAt(0).toUpperCase()+T.slice(1));return<S style={{paddingHorizontal:12,paddingTop:8,paddingBottom:3}}>
           <A style={{fontFamily:z.interMedium,fontSize:11,color:o.grayTextWeak,letterSpacing:.2}}>
             Filtered by {B.join(", ")} ({t} of {e} logs)
           </A>
-        </S>}},[O.length,w.length,h]),[D,_]=F.useState(!1),te=P(()=>["[AXIOS]","[API]","[GRAPHQL]","[REDUX]","[ANALYTICS]","[AUTH]","[NAV]","[STORAGE]","[PERF]","[WS]","[PUSH]","[PAYMENT]","[SYNC]","[BLE]","[LOCATION]","[TEST]","[DEBUG]"],[]),re=P(()=>[{id:V.All,label:C("common.all","All"),count:x.all?.split("/")?.[0]??"0",color:o.purple,Icon:Re},{id:V.UserLog,label:C("console.log","Log"),count:x["user-log"]?.split("/")?.[0]??"0",color:o.teal600,Icon:$e},{id:V.Info,label:C("console.info","Info"),count:x.info?.split("/")?.[0]??"0",color:o.sky600,Icon:We},{id:V.Warn,label:C("console.warning","Warn"),count:x.warn?.split("/")?.[0]??"0",color:o.amber600,Icon:De},{id:V.Error,label:C("console.error","Error"),count:x.error?.split("/")?.[0]??"0",color:o.errorColor,Icon:Oe},{id:V.Analytics,label:C("console.analytics","Analytics"),count:x.analytics?.split("/")?.[0]??"0",color:o.violet600,Icon:Ne}],[x,C]);return<S style={{flex:1}}>
+        </S>}},[D.length,C.length,h]),[M,Y]=F.useState(!1),ne=R(()=>["[AXIOS]","[API]","[GRAPHQL]","[REDUX]","[ANALYTICS]","[AUTH]","[NAV]","[STORAGE]","[PERF]","[WS]","[PUSH]","[PAYMENT]","[SYNC]","[BLE]","[LOCATION]","[TEST]","[DEBUG]"],[]),ie=R(()=>[{id:E.All,label:I("common.all","All"),count:x.all?.split("/")?.[0]??"0",color:o.purple,Icon:$e},{id:E.UserLog,label:I("console.log","Log"),count:x["user-log"]?.split("/")?.[0]??"0",color:o.teal600,Icon:De},{id:E.Info,label:I("console.info","Info"),count:x.info?.split("/")?.[0]??"0",color:o.sky600,Icon:We},{id:E.Warn,label:I("console.warning","Warn"),count:x.warn?.split("/")?.[0]??"0",color:o.amber600,Icon:Oe},{id:E.Error,label:I("console.error","Error"),count:x.error?.split("/")?.[0]??"0",color:o.errorColor,Icon:Me},{id:E.Analytics,label:I("console.analytics","Analytics"),count:x.analytics?.split("/")?.[0]??"0",color:o.violet600,Icon:Ne}],[x,I]);return<S style={{flex:1}}>
       <S style={{backgroundColor:o.white,borderBottomWidth:1,borderBottomColor:o.dividerColor,paddingBottom:6}}>
-        <S style={[T.toolbarRow,{marginTop:12,marginBottom:8}]}>
-          <S style={[T.searchContainer,D&&{borderColor:o.purple,borderWidth:1.5}]}>
-            <Be color={D?o.purple:o.grayTextWeak}size={16}/>
-            <Ie placeholder={C("console.searchPlaceholder")}placeholderTextColor={o.grayTextWeak}value={y}onChangeText={E}onFocus={()=>_(!0)}onBlur={()=>_(!1)}style={T.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+        <S style={[b.toolbarRow,{marginTop:12,marginBottom:8}]}>
+          <S style={[b.searchContainer,M&&{borderColor:o.purple,borderWidth:1.5}]}>
+            <Fe color={M?o.purple:o.grayTextWeak}size={16}/>
+            <Ie placeholder={I("console.searchPlaceholder")}placeholderTextColor={o.grayTextWeak}value={y}onChangeText={V}onFocus={()=>Y(!0)}onBlur={()=>Y(!1)}style={b.searchInput}autoCorrect={!1}autoCapitalize="none"/>
             {y.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4}}>
                 <S style={{backgroundColor:`${o.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:2}}>
                   <A style={{color:o.purple,fontSize:10,fontFamily:z.interBold}}>
-                    {w.length}
+                    {C.length}
                   </A>
                 </S>
-                <Ce onPress={()=>E("")}hitSlop={10}style={T.clearBtn}>
-                  <Fe color={o.grayTextWeak}size={14}/>
+                <Ce onPress={()=>V("")}hitSlop={10}style={b.clearBtn}>
+                  <Pe color={o.grayTextWeak}size={14}/>
                 </Ce>
               </S>}
           </S>
 
-          <S style={T.toolbarRight}>
-            <H style={T.toolbarBtn}onPress={()=>X(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
-              <Pe color={o.grayTextStrong}size={18}direction={K==="newest"?"down":"up"}/>
-            </H>
-            <H style={[T.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={j}hitSlop={6}>
-              <He color={o.errorColor}size={15}/>
-            </H>
+          <S style={b.toolbarRight}>
+            <P style={[b.toolbarBtn,{borderColor:`${o.purple}38`,backgroundColor:`${o.purple}0F`}]}onPress={()=>_(!0)}hitSlop={6}testID="inspector.console.exportBtn">
+              <Ue color={o.purple}size={15}/>
+            </P>
+            <P style={b.toolbarBtn}onPress={()=>q(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
+              <He color={o.grayTextStrong}size={18}direction={j==="newest"?"down":"up"}/>
+            </P>
+            <P style={[b.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={J}hitSlop={6}>
+              <Re color={o.errorColor}size={15}/>
+            </P>
           </S>
         </S>
 
         
-        {(D||y.length>0)&&<Q horizontal showsHorizontalScrollIndicator={!1}style={{marginBottom:6,maxHeight:30}}contentContainerStyle={{paddingHorizontal:8,flexDirection:"row",alignItems:"center",gap:6}}>
-            {te.map(e=>{const t=y.includes(e);return<H key={e}onPress={()=>{E(t?r=>r.replace(e,"").trim():r=>r?`${r} ${e}`.trim():e)}}>
+        {(M||y.length>0)&&<K horizontal showsHorizontalScrollIndicator={!1}style={{marginBottom:6,maxHeight:30}}contentContainerStyle={{paddingHorizontal:8,flexDirection:"row",alignItems:"center",gap:6}}>
+            {ne.map(e=>{const t=y.includes(e);return<P key={e}onPress={()=>{V(t?l=>l.replace(e,"").trim():l=>l?`${l} ${e}`.trim():e)}}>
                   <S style={{paddingHorizontal:8,paddingVertical:3,borderRadius:6,backgroundColor:t?o.purple:`${o.purple}14`,borderWidth:1,borderColor:t?o.purple:`${o.purple}30`}}>
                     <A style={{fontFamily:z.interBold,fontSize:10,color:t?o.white:o.purple}}>
                       {e}
                     </A>
                   </S>
-                </H>})}
-          </Q>}
+                </P>})}
+          </K>}
 
         
         <S style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
-          <Q horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-            {re.map(e=>{const t=e.id==="all"?h.has("all"):h.has(e.id)&&!h.has("all"),r=e.color||o.purple,B=t?o.white:r,I=e.Icon;return<H testID={`inspector.console.filter.${e.id}`}key={e.id}onPress={()=>{e.id==="all"?R(new Set(["all"])):R(le=>{const L=new Set(le);return L.delete("all"),L.has(e.id)?L.delete(e.id):L.add(e.id),L.size===0&&L.add("all"),L})}}>
-                  <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:t?r:`${r}12`,borderWidth:1,borderColor:t?r:`${r}30`,gap:5}}>
-                    <I size={11}color={B}/>
+          <K horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+            {ie.map(e=>{const t=e.id==="all"?h.has("all"):h.has(e.id)&&!h.has("all"),l=e.color||o.purple,B=t?o.white:l,T=e.Icon;return<P testID={`inspector.console.filter.${e.id}`}key={e.id}onPress={()=>{e.id==="all"?$(new Set(["all"])):$(ae=>{const L=new Set(ae);return L.delete("all"),L.has(e.id)?L.delete(e.id):L.add(e.id),L.size===0&&L.add("all"),L})}}>
+                  <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:t?l:`${l}12`,borderWidth:1,borderColor:t?l:`${l}30`,gap:5}}>
+                    <T size={11}color={B}/>
                     <A style={{fontFamily:z.interBold,fontSize:10.5,color:t?o.white:o.primaryBlack}}>
                       {e.label}
                     </A>
-                    <S style={{backgroundColor:t?"rgba(255,255,255,0.25)":`${r}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
-                      <A style={{fontFamily:z.interBold,fontSize:9,color:t?o.white:r}}>
+                    <S style={{backgroundColor:t?"rgba(255,255,255,0.25)":`${l}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
+                      <A style={{fontFamily:z.interBold,fontSize:9,color:t?o.white:l}}>
                         {e.count}
                       </A>
                     </S>
                   </S>
-                </H>})}
-          </Q>
+                </P>})}
+          </K>
         </S>
       </S>
 
-      <Se ref={U}data={W}keyExtractor={ee}ListHeaderComponent={oe}renderItem={J}getItemLayout={Z}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Ve isSearch={y.length>0||!h.has("all")}searchQuery={y}customTitle={y.length>0?"No matching console logs":"No console logs"}onClearSearch={()=>{E(""),R(new Set(["all"]))}}/>}ListFooterComponent={w.length>0?<Ee count={W.length}totalCount={w.length}label="logs"loadMoreStep={Y}hasMore={W.length<w.length}onLoadMore={()=>M(e=>e+Y)}/>:null}style={{flex:1}}contentContainerStyle={[T.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
-    </S>});export default Ue;
+      <Se ref={U}data={O}keyExtractor={le}ListHeaderComponent={re}renderItem={oe}getItemLayout={te}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Ee isSearch={y.length>0||!h.has("all")}searchQuery={y}customTitle={y.length>0?"No matching console logs":"No console logs"}onClearSearch={()=>{V(""),$(new Set(["all"]))}}/>}ListFooterComponent={C.length>0?<Ve count={O.length}totalCount={C.length}label="logs"loadMoreStep={X}hasMore={O.length<C.length}onLoadMore={()=>G(e=>e+X)}/>:null}style={{flex:1}}contentContainerStyle={[b.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+
+      <Be visible={ee}onClose={()=>_(!1)}filteredLogs={C}allLogs={D}/>
+    </S>});export default ve;

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

@@ -60,7 +60,7 @@ import{useCallback as L,useEffect as X,useRef as d,useState as E}from"react";imp
             </F>
           </S>
         </s.View>:<s.View style={[Ce.fabWrapper,{transform:a.getTranslateTransform()}]}{...ze.panHandlers}>
-          <F testID="inspector.fab.launcher"style={{alignItems:"center",justifyContent:"center"}}onPress={()=>{N.current||(u("light"),P(!0))}}hitSlop={10}>
+          <F testID="inspector.fab.launcher"style={{width:68,height:68,borderRadius:34,alignItems:"center",justifyContent:"center"}}onPress={()=>{N.current||(u("light"),P(!0))}}hitSlop={10}>
             <s.View style={[Ce.fabPulseRing,{transform:[{scale:Ve}]}]}/>
             <Se size={68}customIcon={Q}shape="circle"/>
           </F>

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

@@ -1,15 +1,15 @@
-import{useCallback as Z,useEffect as G,useRef as v,useState as j}from"react";import{Animated as n,Dimensions as Pe,PanResponder as De,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 Fe}from"./InspectorContext";import $ from"../TouchableScale";import{GripVerticalIcon as Be,ScreenshotCaptureIcon as Le,ScreenRecordIcon as Ae}from"../NetworkIcons";import{ScreenCapture as C,generateCaptureId as q}from"../../capture";import{triggerNativeHaptic as D}from"../../native/NativeInspector";import{showToast as b}from"../../helpers/toast";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as ve}from"../../styles/AppFonts";import{useTranslation as Oe}from"../../i18n";import{MediaPreviewModal as Ee}from"./MediaPreviewModal";export const FloatingCaptureWidget=()=>{const{refreshMediaCount:x,captureFps:X,captureScale:Y,captureBitrate:B,captureMaxDurationSeconds:H,captureAudioMode:U,activeTab:be,settingsPage:xe,peekMode:Ge,previewMediaItem:z,setPreviewMediaItem:T}=Fe(),{t:s}=Oe(),[M,V]=j(!1),[Ie,L]=j(!1),[Re,A]=j(0),I=v(null),k=v(new n.Value(1)).current,F=v(new n.Value(0)).current,a=v(new n.ValueXY({x:0,y:0})).current,R=v({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=v(!1),Ce=v(De.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}=Pe.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 Ve=Math.min(Math.max(O,J),o),ke=Math.min(Math.max(E,Q),K);n.spring(a,{toValue:{x:Ve,y:ke},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 Te=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(()=>{}),b(s("header.screenshotCaptured","Screenshot captured"))}else b(s("header.screenshotFailed","Failed to capture screenshot"))}catch{L(!1),b(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(()=>{}),b(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})?b(s("header.recordingStarted","Recording started")):(V(!1),b(s("header.recordingStartFailed","Failed to start recording")))}catch{b(s("header.recordingError","Error during screen recording")),V(!1)}},[M,X,Y,B,H,U,x,s]),Me=e=>{const t=Math.floor(e/60),o=e%60;return`${t<10?"0":""}${t}:${o<10?"0":""}${o}`};return be==="media"||xe==="media"?null:<>
+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:<>
       
       <n.View pointerEvents="none"style={[r.flashOverlay,{opacity:F}]}/>
 
-      {!Ie&&!z&&<n.View{...Ce.panHandlers}style={[r.container,{transform:a.getTranslateTransform()}]}>
+      {!Re&&!z&&<n.View{...Te.panHandlers}style={[r.container,{transform:a.getTranslateTransform()}]}>
           
           {M?<S style={r.recordingShadowWrapper}>
               <$ onPress={_}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 {Me(Re)}
+                    REC {Ve(Ce)}
                   </W>
                   <S style={r.stopIconBadge}>
                     <S style={r.stopIconSquare}/>
@@ -19,9 +19,9 @@ import{useCallback as Z,useEffect as G,useRef as v,useState as j}from"react";imp
             </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={Te}style={r.menuItemBtn}accessible={!0}accessibilityLabel="Take Screenshot">
+                <$ onPress={Me}style={r.menuItemBtn}accessible={!0}accessibilityLabel="Take Screenshot">
                   <S style={[r.menuItemIconCircle,{backgroundColor:`${i.sky400}38`}]}>
-                    <Le size={14}color={i.sky400}/>
+                    <Ae size={14}color={i.sky400}/>
                   </S>
                   <W style={r.menuItemText}>
                     {s("header.screenshot","Screenshot")}
@@ -34,7 +34,7 @@ import{useCallback as Z,useEffect as G,useRef as v,useState as j}from"react";imp
                 
                 <$ onPress={_}style={r.menuItemBtn}accessible={!0}accessibilityLabel={s("header.recordScreen","Record Screen")}>
                   <S style={[r.menuItemIconCircle,{backgroundColor:`${i.rose500}3D`}]}>
-                    <Ae size={14}color={i.rose400}/>
+                    <Oe size={14}color={i.rose400}/>
                   </S>
                   <W style={r.menuItemText}>
                     {s("header.record","Record")}
@@ -43,12 +43,12 @@ import{useCallback as Z,useEffect as G,useRef as v,useState as j}from"react";imp
 
                 
                 <S style={r.dragGripArea}>
-                  <Be size={14}color="rgba(255, 255, 255, 0.55)"/>
+                  <Le size={14}color="rgba(255, 255, 255, 0.55)"/>
                 </S>
               </Se>
             </S>}
         </n.View>}
 
       
-      <Ee 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: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;
+      <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;