react-native-inapp-inspector 2.3.23 → 2.3.25

package/dist/esm/components/ConsoleLogCard.js

@@ -1,99 +1,111 @@
-import z,{useState as G}from"react";import{useTranslation as v}from"../i18n";import{Pressable as N,StyleSheet as K,Text as I,View as T}from"react-native";import{AppColors as o}from"../styles/AppColors";import{AppFonts as b}from"../styles/AppFonts";import{formatTime as j,getJsonContent as Y,getJsonPreviewText as X,parseStackLine as J,openInVSCode as Q}from"../helpers";import Z from"./CopyButton";import P from"./LogSyntaxHighlighter";import{ChevronIcon as D,ExternalLinkIcon as _,FlaskIcon as ee,ZapIcon as W,GlobeIcon as oe,DiceIcon as re,AtomIcon as H,BarChartIcon as te,KeyIcon as le,SmartphoneIcon as ae,AlertTriangleIcon as ne,BugIcon as ie,TagIcon as de,MapPinIcon as M,StorageIcon as ce,SignalIcon as se,FlameIcon as ge,MoneyIcon as pe,CircleCheckIcon as fe,RefreshCcwIcon as Te,PerformanceIcon as ue,ChipIcon as be,SettingsIcon as Ce,TerminalIcon as ye,InfoCircleIcon as Ie,ShieldAlertIcon as me,LayoutIcon as he,ClockIcon as Ee}from"./NetworkIcons";import{useInspector as Be}from"./Inspector/InspectorContext";const $=(B,t,E,F,S)=>{if(!B)return null;const h=/^((?:\[[^\]]+\]\s*)+)/,A=B.match(h);if(A){const C=A[1],R=B.substring(C.length),V=C.match(/\[[^\]]+\]/g)||[],u=O=>{const e=O.replace(/[\[\]]/g,"").trim().toUpperCase();return e==="AXIOS"?{color:o.emerald600,Icon:W,label:"AXIOS"}:e==="API"||e==="FETCH"||e==="HTTP"||e==="REST"||e==="NETWORK"?{color:o.sky600,Icon:oe,label:e}:e==="GRAPHQL"||e==="GQL"||e==="APOLLO"||e==="MUTATION"||e==="QUERY"?{color:o.pink500,Icon:H,label:e}:e==="WS"||e==="WEBSOCKET"||e==="SOCKET"||e==="SOCKET.IO"||e==="REALTIME"?{color:o.cyan600,Icon:se,label:e}:e==="REDUX"||e==="STORE"||e==="STATE"||e==="ZUSTAND"||e==="MOBX"||e==="RECOIL"||e==="ACTION"||e==="DISPATCH"?{color:o.violet600,Icon:H,label:e}:e==="ANALYTICS"||e==="FIREBASE"||e==="GA4"||e==="GA"||e==="SEGMENT"||e==="MIXPANEL"||e==="POSTHOG"||e==="TRACK"||e==="EVENT"?{color:o.teal600,Icon:te,label:e}:e==="AUTH"||e==="TOKEN"||e==="SESSION"||e==="JWT"||e==="LOGIN"||e==="LOGOUT"||e==="USER"?{color:o.amber600,Icon:le,label:e}:e==="SECURITY"||e==="SHIELD"||e==="PERMISSION"||e==="PERMISSIONS"?{color:o.indigo600Alt,Icon:me,label:e}:e==="NAV"||e==="NAVIGATION"||e==="ROUTE"||e==="SCREEN"||e==="ROUTER"||e==="DEEPLINK"?{color:o.indigo600Alt,Icon:M,label:e}:e==="STORAGE"||e==="ASYNCSTORAGE"||e==="MMKV"||e==="SQLITE"||e==="DB"||e==="DATABASE"||e==="REALM"||e==="CACHE"?{color:o.purple500,Icon:ce,label:e}:e==="PERF"||e==="RENDER"||e==="PERFORMANCE"||e==="FPS"||e==="MEMORY"?{color:o.violet500,Icon:ue,label:e}:e==="INIT"||e==="BOOT"||e==="STARTUP"||e==="LIFECYCLE"||e==="MOUNT"||e==="UNMOUNT"?{color:o.blue600,Icon:W,label:e}:e==="SYNC"||e==="REFRESH"||e==="BACKGROUND"||e==="JOB"||e==="WORKER"?{color:o.sky600,Icon:Te,label:e}:e==="PUSH"||e==="NOTIF"||e==="NOTIFICATION"||e==="FCM"||e==="APNS"?{color:o.darkOrange,Icon:ge,label:e}:e==="PAY"||e==="PAYMENT"||e==="STRIPE"||e==="IAP"||e==="BILLING"||e==="CHECKOUT"||e==="CART"?{color:o.emerald600,Icon:pe,label:e}:e==="DEVICE"||e==="HARDWARE"||e==="BLE"||e==="BLUETOOTH"||e==="NFC"||e==="SENSOR"?{color:o.slate600,Icon:be,label:e}:e==="LOCATION"||e==="GPS"||e==="GEO"?{color:o.emerald600,Icon:M,label:e}:e==="APP"?{color:o.indigo600Alt,Icon:ae,label:"APP"}:e==="UI"||e==="VIEW"||e==="THEME"||e==="STYLE"||e==="LAYOUT"?{color:o.pink600,Icon:he,label:e}:e==="TEST"||e==="MOCK"||e==="SPEC"?{color:o.emerald500,Icon:ee,label:"TEST"}:e==="SAMPLE"||e==="BATCH"?{color:o.indigo600Alt,Icon:re,label:e}:e==="CONFIG"||e==="ENV"||e==="SETTINGS"?{color:o.slate700,Icon:Ce,label:e}:e==="DEBUG"||e==="TRACE"?{color:o.purpleText,Icon:ye,label:e}:e==="INFO"?{color:o.sky600,Icon:Ie,label:"INFO"}:e==="SUCCESS"||e==="OK"||e==="DONE"||e==="PASSED"?{color:o.green600,Icon:fe,label:e}:e==="WARN"||e==="WARNING"?{color:o.amber600,Icon:ne,label:"WARN"}:e==="ERROR"||e==="CRASH"||e==="BUG"||e==="FATAL"||e==="EXCEPTION"||e==="FAIL"?{color:o.red600,Icon:ie,label:e==="CRASH"||e==="BUG"||e==="FATAL"||e==="EXCEPTION"||e==="FAIL"?e:"ERROR"}:{color:o.slate600,Icon:de,label:e}};return<T style={{flexDirection:"column",gap:6}}>
-        <T style={{flexDirection:"row",flexWrap:"wrap",gap:5}}>
-          {V.map((O,e)=>{const m=u(O),L=m.Icon;return<T key={e}style={[r.prefixTag,{backgroundColor:`${m.color}14`,borderColor:`${m.color}33`}]}>
-                <L color={m.color}size={10}/>
-                <I style={[r.prefixTagText,{color:m.color}]}>
-                  {m.label}
-                </I>
+import z from"react";import{useTranslation as G}from"../i18n";import{Pressable as K,StyleSheet as Y,Text as E,View as T}from"react-native";import{AppColors as r}from"../styles/AppColors";import{AppFonts as B}from"../styles/AppFonts";import{formatTime as X,getJsonContent as J,getJsonPreviewText as Q,parseStackLine as Z,openInVSCode as q,getSize as _,getCleanCallerDisplay as ee}from"../helpers";import Te from"./TouchableScale";import N from"./LogSyntaxHighlighter";import{ForwardChevronIcon as Ce,ExternalLinkIcon as Ie,FlaskIcon as he,ZapIcon as V,GlobeIcon as xe,DiceIcon as ye,AtomIcon as M,BarChartIcon as Se,KeyIcon as me,SmartphoneIcon as Ee,AlertTriangleIcon as Be,BugIcon as Re,TagIcon as Ae,MapPinIcon as $,StorageIcon as Oe,SignalIcon as Pe,FlameIcon as we,MoneyIcon as ke,CircleCheckIcon as U,CircleAlertIcon as Ne,CircleXIcon as Le,RefreshCcwIcon as He,PerformanceIcon as Ve,ChipIcon as Fe,SettingsIcon as De,TerminalIcon as ze,InfoCircleIcon as W,ShieldAlertIcon as Me,LayoutIcon as $e,ClockIcon as Ue,SizeIcon as We}from"./NetworkIcons";import{useInspector as Ge}from"./Inspector/InspectorContext";const ve=(w,C,O,F,L)=>{if(!w)return null;const x=/^((?:\[[^\]]+\]\s*)+)/,k=w.match(x);if(k){const I=k[1],D=w.substring(I.length),h=I.match(/\[[^\]]+\]/g)||[],H=P=>{const e=P.replace(/[\[\]]/g,"").trim().toUpperCase();return e==="AXIOS"?{color:r.emerald600,Icon:V,label:"AXIOS"}:e==="API"||e==="FETCH"||e==="HTTP"||e==="REST"||e==="NETWORK"?{color:r.sky600,Icon:xe,label:e}:e==="GRAPHQL"||e==="GQL"||e==="APOLLO"||e==="MUTATION"||e==="QUERY"?{color:r.pink500,Icon:M,label:e}:e==="WS"||e==="WEBSOCKET"||e==="SOCKET"||e==="SOCKET.IO"||e==="REALTIME"?{color:r.cyan600,Icon:Pe,label:e}:e==="REDUX"||e==="STORE"||e==="STATE"||e==="ZUSTAND"||e==="MOBX"||e==="RECOIL"||e==="ACTION"||e==="DISPATCH"?{color:r.violet600,Icon:M,label:e}:e==="ANALYTICS"||e==="FIREBASE"||e==="GA4"||e==="GA"||e==="SEGMENT"||e==="MIXPANEL"||e==="POSTHOG"||e==="TRACK"||e==="EVENT"?{color:r.teal600,Icon:Se,label:e}:e==="AUTH"||e==="TOKEN"||e==="SESSION"||e==="JWT"||e==="LOGIN"||e==="LOGOUT"||e==="USER"?{color:r.amber600,Icon:me,label:e}:e==="SECURITY"||e==="SHIELD"||e==="PERMISSION"||e==="PERMISSIONS"?{color:r.indigo600Alt,Icon:Me,label:e}:e==="NAV"||e==="NAVIGATION"||e==="ROUTE"||e==="SCREEN"||e==="ROUTER"||e==="DEEPLINK"?{color:r.indigo600Alt,Icon:$,label:e}:e==="STORAGE"||e==="ASYNCSTORAGE"||e==="MMKV"||e==="SQLITE"||e==="DB"||e==="DATABASE"||e==="REALM"||e==="CACHE"?{color:r.purple500,Icon:Oe,label:e}:e==="PERF"||e==="RENDER"||e==="PERFORMANCE"||e==="FPS"||e==="MEMORY"?{color:r.violet500,Icon:Ve,label:e}:e==="INIT"||e==="BOOT"||e==="STARTUP"||e==="LIFECYCLE"||e==="MOUNT"||e==="UNMOUNT"?{color:r.blue600,Icon:V,label:e}:e==="SYNC"||e==="REFRESH"||e==="BACKGROUND"||e==="JOB"||e==="WORKER"?{color:r.sky600,Icon:He,label:e}:e==="PUSH"||e==="NOTIF"||e==="NOTIFICATION"||e==="FCM"||e==="APNS"?{color:r.darkOrange,Icon:we,label:e}:e==="PAY"||e==="PAYMENT"||e==="STRIPE"||e==="IAP"||e==="BILLING"||e==="CHECKOUT"||e==="CART"?{color:r.emerald600,Icon:ke,label:e}:e==="DEVICE"||e==="HARDWARE"||e==="BLE"||e==="BLUETOOTH"||e==="NFC"||e==="SENSOR"?{color:r.slate600,Icon:Fe,label:e}:e==="LOCATION"||e==="GPS"||e==="GEO"?{color:r.emerald600,Icon:$,label:e}:e==="APP"?{color:r.indigo600Alt,Icon:Ee,label:"APP"}:e==="UI"||e==="VIEW"||e==="THEME"||e==="STYLE"||e==="LAYOUT"?{color:r.pink600,Icon:$e,label:e}:e==="TEST"||e==="MOCK"||e==="SPEC"?{color:r.emerald500,Icon:he,label:"TEST"}:e==="SAMPLE"||e==="BATCH"?{color:r.indigo600Alt,Icon:ye,label:e}:e==="CONFIG"||e==="ENV"||e==="SETTINGS"?{color:r.slate700,Icon:De,label:e}:e==="DEBUG"||e==="TRACE"?{color:r.purpleText,Icon:ze,label:e}:e==="INFO"?{color:r.sky600,Icon:W,label:"INFO"}:e==="SUCCESS"||e==="OK"||e==="DONE"||e==="PASSED"?{color:r.green600,Icon:U,label:e}:e==="WARN"||e==="WARNING"?{color:r.amber600,Icon:Be,label:"WARN"}:e==="ERROR"||e==="CRASH"||e==="BUG"||e==="FATAL"||e==="EXCEPTION"||e==="FAIL"?{color:r.red600,Icon:Re,label:e==="CRASH"||e==="BUG"||e==="FATAL"||e==="EXCEPTION"||e==="FAIL"?e:"ERROR"}:{color:r.slate600,Icon:Ae,label:e}};return<T style={{flexDirection:"column",gap:2}}>
+        <T style={{flexDirection:"row",gap:4,overflow:"hidden"}}>
+          {h.slice(0,2).map((P,e)=>{const R=H(P),S=R.Icon;return<T key={e}style={[o.prefixTag,{backgroundColor:`${R.color}12`,borderColor:`${R.color}30`}]}>
+                <S color={R.color}size={8.5}/>
+                <E style={[o.prefixTagText,{color:R.color}]}>
+                  {R.label}
+                </E>
               </T>})}
         </T>
-        <P text={R}search={t}style={E}numberOfLines={S}detectLinks={!0}/>
-      </T>}return<P text={B}search={t}style={E}numberOfLines={S}detectLinks={!0}/>};export const ConsoleLogCard=z.memo(function({item:t,searchStr:E=""}){const{setSelectedLog:F}=Be(),{t:S}=v(),[h,A]=G(!1),C=Y(t.message),R=t.message.toLowerCase().includes("[analytics error]"),V=t.sourceMethod==="log",u=t.caller&&t.caller!=="Unknown"?J(t.caller,!0):null,e=(()=>{const y=(t.type||"log").toLowerCase(),x=(t.sourceMethod||y).toLowerCase();return R||y==="error"||x==="error"?{border:o.errorColor,badgeBg:`${o.errorColor}18`,badgeText:o.errorColor,label:"ERROR",cardBg:o.errorCardBg,methodBorder:`${o.errorColor}30`,methodBg:`${o.errorColor}12`,methodText:o.errorColor,textColor:o.redErrorText}:y==="warn"||x==="warn"?{border:o.amber600,badgeBg:`${o.amber600}18`,badgeText:o.amber800,label:"WARN",cardBg:o.warnCardBg,methodBorder:`${o.amber600}33`,methodBg:`${o.amber600}14`,methodText:o.amber800,textColor:o.amber800}:y==="debug"||x==="debug"?{border:o.purple500,badgeBg:`${o.purple500}18`,badgeText:o.purple,label:"DEBUG",cardBg:o.purpleTintBg,methodBorder:`${o.purple500}33`,methodBg:`${o.purple500}12`,methodText:o.purple,textColor:o.purpleText}:x==="info"||y==="info"&&x!=="log"?{border:o.sky500,badgeBg:`${o.sky500}18`,badgeText:o.sky600,label:"INFO",cardBg:o.blueTintBg,methodBorder:`${o.sky500}33`,methodBg:`${o.sky500}12`,methodText:o.sky600,textColor:o.blue800}:{border:o.indigo500,badgeBg:`${o.indigo500}15`,badgeText:o.indigo600Alt,label:"LOG",cardBg:o.white,methodBorder:o.dividerColor,methodBg:o.indigo50,methodText:o.indigo600Alt,textColor:o.primaryBlack}})(),m=C?X(C.data):null,L=()=>{F(t)},U=y=>{y?.stopPropagation?.(),A(x=>!x)};return<T style={r.container}>
-      <N onPress={L}style={({pressed:y})=>[r.card,{borderLeftColor:e.border,borderLeftWidth:3.5,backgroundColor:e.cardBg},y&&r.cardPressed]}>
-        
-        <T style={r.cardHeader}>
-          <T style={r.headerLeft}>
-            <T style={r.idBadge}>
-              <I style={r.idBadgeText}>
-                #{t.id!=null?t.id+1:1}
-              </I>
-            </T>
-            <T style={[r.typeChip,{backgroundColor:e.badgeBg}]}>
-              <T style={[r.typeDot,{backgroundColor:e.badgeText}]}/>
-              <I style={[r.typeChipText,{color:e.badgeText,fontFamily:b.interBold}]}>
-                {e.label}
-              </I>
+        <N text={D}search={C}style={O}numberOfLines={1}detectLinks={!1}/>
+      </T>}return<N text={w}search={C}style={O}numberOfLines={L||2}detectLinks={!1}/>};export const ConsoleLogCard=z.memo(function({item:C,searchStr:O=""}){const{setSelectedLog:F}=Ge(),{t:L}=G(),x=J(C.message),k=C.message.toLowerCase().includes("[analytics error]"),I=z.useMemo(()=>{const S=ee(C.caller);if(!S)return null;const A=Z(C.caller,!0);return{...A,display:S.display,fileName:S.fileName,lineNumber:S.lineNumber||A.lineNumber}},[C.caller]),h=(()=>{const S=(C.type||"log").toLowerCase(),A=(C.sourceMethod||S).toLowerCase();return k||S==="error"||A==="error"?{badgeColor:r.errorColor,border:r.errorColor,badgeBg:`${r.errorColor}18`,badgeText:r.errorColor,label:"ERROR",cardBg:r.errorCardBg,statusPillBg:`${r.errorColor}14`,statusPillBorder:`${r.errorColor}33`,statusPillText:r.errorColor,StatusIcon:Le}:S==="warn"||A==="warn"?{badgeColor:r.darkOrange,border:r.darkOrange,badgeBg:`${r.darkOrange}18`,badgeText:r.darkOrange,label:"WARN",cardBg:r.warnCardBg,statusPillBg:`${r.darkOrange}14`,statusPillBorder:`${r.darkOrange}33`,statusPillText:r.darkOrange,StatusIcon:Ne}:S==="debug"||A==="debug"?{badgeColor:r.purple,border:r.purple,badgeBg:`${r.purple}18`,badgeText:r.purple,label:"DEBUG",cardBg:r.purpleTintBg,statusPillBg:`${r.purple}14`,statusPillBorder:`${r.purple}33`,statusPillText:r.purple,StatusIcon:V}:A==="info"||S==="info"&&A!=="log"?{badgeColor:r.sky600,border:r.sky600,badgeBg:`${r.sky600}18`,badgeText:r.sky600,label:"INFO",cardBg:r.blueTintBg,statusPillBg:`${r.sky600}14`,statusPillBorder:`${r.sky600}33`,statusPillText:r.sky600,StatusIcon:W}:{badgeColor:r.brandPurple,border:r.brandPurple,badgeBg:`${r.brandPurple}15`,badgeText:r.brandPurple,label:"LOG",cardBg:r.white,statusPillBg:`${r.brandPurple}12`,statusPillBorder:`${r.brandPurple}2E`,statusPillText:r.brandPurple,StatusIcon:U}})(),H=h.StatusIcon,P=x?Q(x.data):null,e=()=>{F(C)},R=("sourceMethod"in C?C.sourceMethod:void 0)||C.type||"log";return<T style={o.container}>
+      <Te onPress={e}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:h.border,backgroundColor:h.cardBg}]}>
+        <T style={o.cardBody}>
+          
+          <T style={o.cardHeaderRow}>
+            <T style={o.cardHeaderLeft}>
+              <E style={o.serialNumber}>
+                #{C.id!=null?C.id+1:1}
+              </E>
+
+              
+              <T style={[o.methodBadge,{backgroundColor:h.badgeColor}]}>
+                <E style={o.methodBadgeText}>{h.label}</E>
+              </T>
+
+              
+              <T style={[o.chip,{backgroundColor:`${h.badgeColor}12`,borderColor:`${h.badgeColor}2E`}]}>
+                <E style={[o.chipText,{color:h.badgeColor}]}numberOfLines={1}>
+                  console.{R}
+                </E>
+              </T>
+
+              
+              {x&&<T style={[o.chip,{backgroundColor:`${r.teal600}14`,borderColor:`${r.teal600}33`}]}>
+                  <E style={[o.chipText,{color:r.teal600}]}>
+                    {Array.isArray(x.data)?`Array[${x.data.length}]`:`Object{${Object.keys(x.data).length}}`}
+                  </E>
+                </T>}
+
+              
+              {"duplicateCount"in C&&C.duplicateCount!=null&&C.duplicateCount>1&&<T style={o.dupBadge}>
+                    <E style={o.dupBadgeText}>
+                      ×{C.duplicateCount}
+                    </E>
+                  </T>}
             </T>
-            <T style={[r.metaChip,{backgroundColor:e.methodBg,borderColor:e.methodBorder}]}>
-              <I style={[r.metaChipText,{color:e.methodText,fontFamily:b.interBold}]}>
-                console.
-                {("sourceMethod"in t?t.sourceMethod:void 0)||t.type||"log"}
-              </I>
+
+            
+            <T style={o.cardHeaderRight}>
+              <T style={[o.statusPill,{backgroundColor:h.statusPillBg,borderColor:h.statusPillBorder}]}>
+                <H color={h.statusPillText}size={9.5}/>
+                <E style={[o.statusPillText,{color:h.statusPillText}]}>
+                  {h.label}
+                </E>
+              </T>
+              <Ce color={r.grayTextWeak}size={13}/>
             </T>
-            {C&&<T style={[r.metaChip,{backgroundColor:`${o.teal600}14`,borderColor:`${o.teal600}33`}]}>
-                <I style={[r.metaChipText,{color:o.teal600,fontFamily:b.interBold}]}>
-                  {Array.isArray(C.data)?`Array[${C.data.length}]`:`Object{${Object.keys(C.data).length}}`}
-                </I>
-              </T>}
-            {"duplicateCount"in t&&t.duplicateCount!=null&&t.duplicateCount>1&&<T style={[r.metaChip,{backgroundColor:`${o.purple}1A`,borderColor:`${o.purple}3D`}]}>
-                  <I style={[r.metaChipText,{color:o.purple,fontFamily:b.interBold}]}>
-                    ×{t.duplicateCount}
-                  </I>
-                </T>}
           </T>
 
-          <T style={r.headerRight}>
-            <Z value={t.message}label={S("console.logMessage")}/>
-            <D color={o.grayTextWeak}size={14}/>
+          
+          <T style={o.messageBox}>
+            {x?<T style={o.jsonPreviewRow}>
+                {x.header?<N text={x.header}search={O}style={o.messageText}detectLinks={!1}numberOfLines={1}/>:null}
+                {P&&<N text={P.text.replace(/\s+/g," ")}search={O}style={o.jsonPreviewText}detectLinks={!1}numberOfLines={x.header?2:3}/>}
+              </T>:ve(C.message,O,o.messageText,o.highlight,3)}
           </T>
-        </T>
 
-        
-        <T style={r.cardBody}>
-          {C?<>
-              {C.header?$(C.header,E,[r.messageText,{color:o.primaryBlack}],r.highlight,h?void 0:2):null}
-              {m&&<T style={r.jsonPreviewContainer}>
-                  <P text={m.text}search={E}style={[r.jsonPreviewText,{color:o.primaryBlack}]}detectLinks={!1}numberOfLines={h?void 0:4}/>
-                  {m.text.split(`
-`).length>4&&<N onPress={U}hitSlop={6}style={r.expandToggle}>
-                      <I style={r.expandToggleText}>
-                        {h?"Show less":"Show full preview"}
-                      </I>
-                      <D color={o.purple}size={11}direction={h?"up":"down"}/>
-                    </N>}
-                </T>}
-            </>:$(t.message,E,[r.messageText,{color:o.primaryBlack}],r.highlight,h?void 0:4)}
-        </T>
+          
+          <T style={o.cardFooterRow}>
+            <T style={o.footerLeft}>
+              <T style={o.cardDateRow}>
+                <Ue color={r.grayTextWeak}size={10}/>
+                <E style={o.cardDateText}numberOfLines={1}>
+                  {X(C.timestamp)}
+                </E>
+              </T>
 
-        
-        <T style={r.cardFooter}>
-          <T style={r.footerLeft}>
-            <Ee color={o.grayTextWeak}size={11}/>
-            <I style={r.footerTime}>{j(t.timestamp)}</I>
-            {u&&<>
-                <T style={r.footerDot}/>
-                <N onPress={y=>{y.stopPropagation?.(),Q(u.rawFilePath||u.fullPath||u.fileName,u.lineNumber,u.columnNumber)}}hitSlop={8}style={r.callerPill}>
-                  {u.fileExt&&u.fileExt!=="other"&&<T style={[r.extBadge,{backgroundColor:u.fileExt==="tsx"||u.fileExt==="ts"?`${o.brandPurple}22`:`${o.teal600}22`}]}>
-                      <I style={[r.extBadgeText,{color:u.fileExt==="tsx"||u.fileExt==="ts"?o.brandPurple:o.teal600}]}>
-                        {u.fileExt.toUpperCase()}
-                      </I>
+              {I&&<K onPress={S=>{S.stopPropagation?.(),q(I.rawFilePath||I.fullPath||I.fileName,I.lineNumber,I.columnNumber)}}hitSlop={8}style={o.callerChip}>
+                  {I.fileExt&&I.fileExt!=="other"&&<T style={[o.extBadge,{backgroundColor:I.fileExt==="tsx"||I.fileExt==="ts"?`${r.brandPurple}22`:`${r.teal600}22`}]}>
+                      <E style={[o.extBadgeText,{color:I.fileExt==="tsx"||I.fileExt==="ts"?r.brandPurple:r.teal600}]}>
+                        {I.fileExt.toUpperCase()}
+                      </E>
                     </T>}
-                  <I style={r.callerFileName}numberOfLines={1}ellipsizeMode="middle">
-                    {u.fileName}
-                    {u.lineNumber?`:${u.lineNumber}`:""}
-                  </I>
-                  <_ color={o.sky600}size={8.5}/>
-                </N>
-              </>}
+                  <E style={o.callerChipText}numberOfLines={1}ellipsizeMode="middle">
+                    {I.display}
+                  </E>
+                  <Ie color={r.sky600}size={8}/>
+                </K>}
+            </T>
+
+            <T style={o.footerRight}>
+              {x&&<T style={o.metaStatChip}>
+                  <We color={r.purple}size={8.5}/>
+                  <E style={o.metaStatText}>
+                    {_(x.data)}
+                  </E>
+                </T>}
+
+              {k&&<T style={[o.chip,{backgroundColor:`${r.skyBlue}15`,borderColor:`${r.skyBlue}30`}]}>
+                  <E style={[o.chipText,{color:r.skyBlue}]}>
+                    {L("console.analyticsBadge")||"ANALYTICS"}
+                  </E>
+                </T>}
+            </T>
           </T>
 
-          {R&&<T style={r.footerRight}>
-              <T style={[r.footerBadge,{backgroundColor:`${o.skyBlue}15`,borderColor:`${o.skyBlue}30`}]}>
-                <I style={[r.footerBadgeText,{color:o.skyBlue}]}>
-                  {S("console.analyticsBadge")}
-                </I>
-              </T>
-            </T>}
+          
+          <T style={[o.bottomAccentBar,{backgroundColor:`${h.border}35`}]}/>
         </T>
-      </N>
-    </T>});const r=K.create({container:{paddingHorizontal:10,paddingVertical:3.5},card:{alignSelf:"stretch",borderRadius:11,borderWidth:1,borderColor:o.grayBorderSecondary,borderLeftWidth:3.5,paddingHorizontal:12,paddingTop:10,paddingBottom:9,backgroundColor:o.white,shadowColor:o.black,shadowOpacity:.04,shadowRadius:3,shadowOffset:{width:0,height:1.5},elevation:1.5},cardPressed:{opacity:.88,transform:[{scale:.995}]},cardHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:6,gap:8},headerLeft:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:6,flex:1},idBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:6,backgroundColor:`${o.slate500}12`,borderWidth:1,borderColor:`${o.slate500}22`},idBadgeText:{fontFamily:b.interBold,fontSize:10,color:o.grayTextWeak,letterSpacing:.2},headerRight:{flexDirection:"row",alignItems:"center",gap:6},typeChip:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:2.5,borderRadius:6},typeDot:{width:5,height:5,borderRadius:2.5},typeChipText:{fontFamily:b.interBold,fontSize:9.5,letterSpacing:.5},metaChip:{paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1},metaChipText:{fontFamily:b.interBold,fontSize:9.5,letterSpacing:.2},cardBody:{paddingVertical:2},messageText:{fontFamily:b.interMedium,fontSize:12.5,color:o.primaryBlack,lineHeight:18},highlight:{backgroundColor:o.yellowHighlight,color:o.primaryBlack,borderRadius:2},jsonPreviewContainer:{marginTop:6,backgroundColor:o.grayBackground,borderRadius:8,borderWidth:1,borderColor:o.grayBorderSecondary,borderLeftWidth:3,borderLeftColor:o.teal600,paddingHorizontal:10,paddingVertical:7},jsonPreviewText:{fontFamily:b.interRegular,fontSize:11,color:o.primaryBlack,lineHeight:16},expandToggle:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:4,marginTop:5,paddingVertical:3,borderTopWidth:1,borderTopColor:o.dividerColor},expandToggleText:{fontFamily:b.interBold,fontSize:10.5,color:o.purple},cardFooter:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:7,paddingTop:6,borderTopWidth:1,borderTopColor:`${o.dividerColor}88`,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:5,flex:1,flexWrap:"wrap"},footerRight:{flexDirection:"row",alignItems:"center",gap:4},footerDot:{width:3,height:3,borderRadius:1.5,backgroundColor:o.grayTextWeak,opacity:.6},footerId:{fontFamily:b.interBold,fontSize:10,color:o.grayTextWeak},footerTime:{fontFamily:b.interMedium,fontSize:10,color:o.grayTextWeak,letterSpacing:.1},callerPill:{flexDirection:"row",alignItems:"center",gap:4,maxWidth:185,backgroundColor:`${o.sky600}10`,borderColor:`${o.sky600}2B`,borderWidth:1,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5},extBadge:{borderRadius:3,paddingHorizontal:3.5,paddingVertical:.5},extBadgeText:{fontFamily:b.interBold,fontSize:8},callerFileName:{fontFamily:b.interBold,color:o.sky600,fontSize:9.5},footerBadge:{paddingHorizontal:6,paddingVertical:1.5,borderRadius:5,borderWidth:1},footerBadgeText:{fontFamily:b.interBold,fontSize:9},prefixTag:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6.5,paddingVertical:2,borderRadius:5,borderWidth:1},prefixTagText:{fontFamily:b.interBold,fontSize:9.5,letterSpacing:.3}});
+      </Te>
+    </T>});const o=Y.create({container:{paddingHorizontal:8,paddingVertical:4,height:148,justifyContent:"center"},card:{height:140,alignSelf:"stretch",borderRadius:10,overflow:"hidden",borderWidth:1,borderColor:r.dividerColor,shadowColor:r.shadowColorString},cardBody:{height:"100%",paddingHorizontal:12,paddingTop:10,paddingBottom:8,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,marginRight:8,gap:6,minWidth:0,overflow:"hidden"},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},serialNumber:{fontFamily:B.interBold,color:r.grayTextWeak,fontSize:10},methodBadge:{paddingHorizontal:7,paddingVertical:2.5,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:B.interBold,fontSize:9.5,lineHeight:12,letterSpacing:.5,color:r.white},chip:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},chipText:{fontFamily:B.interBold,fontSize:9,lineHeight:12},dupBadge:{backgroundColor:`${r.purple}14`,borderColor:`${r.purple}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},dupBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:r.purple},statusPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:2.5,borderRadius:6,borderWidth:1,flexShrink:0},statusPillText:{fontFamily:B.interBold,fontSize:10,lineHeight:13},messageBox:{backgroundColor:r.grayBackground,borderRadius:7,borderWidth:1,borderColor:r.dividerColor,paddingHorizontal:10,paddingVertical:6,height:68,minHeight:68,maxHeight:68,justifyContent:"center",gap:2,overflow:"hidden"},messageText:{fontFamily:B.interMedium,fontSize:12,color:r.primaryBlack,lineHeight:17},highlight:{backgroundColor:r.yellowHighlight,color:r.primaryBlack,borderRadius:2},jsonPreviewRow:{flexDirection:"column",justifyContent:"center",gap:2},jsonPreviewText:{fontFamily:B.interMedium,fontSize:11,color:r.teal700,lineHeight:15},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:6,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0},cardDateRow:{flexDirection:"row",alignItems:"center",gap:3.5},cardDateText:{fontFamily:B.interRegular,fontSize:10,lineHeight:13,color:r.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:r.skySoftBg,borderColor:r.skySoftBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,flexShrink:1,minWidth:0},extBadge:{borderRadius:3,paddingHorizontal:3,paddingVertical:.5},extBadgeText:{fontFamily:B.interBold,fontSize:7.5},callerChipText:{color:r.skySoftText,fontSize:9,lineHeight:12,fontFamily:B.interBold},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:r.violetSoftBg,borderColor:r.violetSoftBorder,borderWidth:1,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:B.interBold,color:r.violetSoftText,fontSize:9,lineHeight:12},prefixTag:{flexDirection:"row",alignItems:"center",gap:2.5,paddingHorizontal:5,paddingVertical:1.5,borderRadius:3.5,borderWidth:1},prefixTagText:{fontFamily:B.interBold,fontSize:8.5,letterSpacing:.3},bottomAccentBar:{height:2.5,width:"100%",borderRadius:1.5,marginTop:2}});export default ConsoleLogCard;

package/dist/esm/components/EndOfListFooter.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
-interface EndOfListFooterProps {
+export interface EndOfListFooterProps {
     count?: number;
+    totalCount?: number;
     label?: string;
     message?: string;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    loadMoreStep?: number;
 }
 export declare const EndOfListFooter: React.FC<EndOfListFooterProps>;
 export default EndOfListFooter;

package/dist/esm/components/EndOfListFooter.js

@@ -1,15 +1,37 @@
-import B from"react";import{Platform as V,StyleSheet as v,Text as T,View as C}from"react-native";import{AppColors as e}from"../styles/AppColors";import{AppFonts as S}from"../styles/AppFonts";import{CheckIcon as L}from"./NetworkIcons";export const EndOfListFooter=B.memo(({count:w,label:b,message:k="You've reached the end of the list"})=><C style={o.container}>
-      <C style={o.dividerLine}/>
-      <C style={o.badgePill}>
-        <C style={o.iconCircle}>
-          <L color={e.purple}size={8}/>
-        </C>
-        <T style={o.messageText}>{k}</T>
-        {w!=null&&w>0&&<C style={o.countBadge}>
-            <T style={o.countText}>
-              {w} {b?w===1?b.replace(/s$/,""):b:""}
+import $ from"react";import{Platform as H,StyleSheet as j,Text as B,View as T}from"react-native";import{AppColors as o}from"../styles/AppColors";import{AppFonts as V}from"../styles/AppFonts";import{CheckIcon as A,ChevronIcon as D}from"./NetworkIcons";import E from"./TouchableScale";import{useTranslation as Y}from"../i18n";export const EndOfListFooter=$.memo(({count:C,totalCount:S,label:M="items",message:O,hasMore:F=!1,onLoadMore:z,loadMoreStep:v=10})=>{const{t:I}=Y(),L=O??I("footer.endOfList","You've reached the end of the list"),W=F||S!=null&&C!=null&&C<S&&!!z,P=S!=null&&C!=null?Math.max(0,S-C):v,R=Math.min(P||v,v);if(W&&z)return<T style={e.container}>
+        <T style={e.dividerLine}/>
+        <T style={e.loadMoreContainer}>
+          <E onPress={z}hitSlop={6}style={e.loadMoreBtn}>
+            <T style={e.loadMoreIconWrap}>
+              <D color={o.white}size={9}direction="down"/>
             </T>
-          </C>}
-      </C>
-      <C style={o.dividerLine}/>
-    </C>);const o=v.create({container:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingHorizontal:16,paddingTop:16,paddingBottom:V.OS==="ios"?44:32,gap:8},dividerLine:{flex:1,height:1,backgroundColor:e.dividerColor,opacity:.7},badgePill:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:10,paddingVertical:5,borderRadius:999,backgroundColor:e.primaryLight,borderWidth:1,borderColor:e.grayBorderSecondary,shadowColor:e.black,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:2,elevation:1},iconCircle:{width:14,height:14,borderRadius:7,backgroundColor:`${e.purple}18`,alignItems:"center",justifyContent:"center"},messageText:{fontFamily:S.interMedium,fontSize:11,color:e.grayTextWeak,letterSpacing:.1},countBadge:{paddingHorizontal:5,paddingVertical:1,borderRadius:6,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary},countText:{fontFamily:S.interBold,fontSize:9.5,color:e.grayTextStrong}});export default EndOfListFooter;
+            <B style={e.loadMoreBtnText}>
+              {I("footer.loadMore",{count:R,defaultValue:`Load ${R} More`})}
+            </B>
+            {S!=null&&C!=null&&<T style={e.loadMoreCountBadge}>
+                <B style={e.loadMoreCountText}>
+                  {C}/{S}
+                </B>
+              </T>}
+          </E>
+          {S!=null&&C!=null&&<B style={e.loadMoreSubtitle}>
+              {I("footer.showingOf",{count:C,total:S,label:M,defaultValue:`Showing ${C} of ${S} ${M}`})}
+            </B>}
+        </T>
+        <T style={e.dividerLine}/>
+      </T>;const k=C??S;return<T style={e.container}>
+      <T style={e.dividerLine}/>
+      <T style={e.badgePill}>
+        <T style={e.iconCircle}>
+          <A color={o.purple}size={8}/>
+        </T>
+        <B style={e.messageText}>{L}</B>
+        {k!=null&&k>0&&<T style={e.countBadge}>
+            <B style={e.countText}>
+              {k}{" "}
+              {M?k===1?M.replace(/s$/,""):M:""}
+            </B>
+          </T>}
+      </T>
+      <T style={e.dividerLine}/>
+    </T>});const e=j.create({container:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingHorizontal:16,paddingTop:14,paddingBottom:H.OS==="ios"?40:28,gap:8},dividerLine:{flex:1,height:1,backgroundColor:o.dividerColor,opacity:.7},loadMoreContainer:{alignItems:"center",gap:5},loadMoreBtn:{flexDirection:"row",alignItems:"center",backgroundColor:o.brandPurple,paddingVertical:6,paddingHorizontal:12,borderRadius:20,gap:6,shadowColor:o.brandPurple,shadowOffset:{width:0,height:2},shadowOpacity:.25,shadowRadius:4,elevation:2,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.2)"},loadMoreIconWrap:{width:15,height:15,borderRadius:7.5,backgroundColor:"rgba(255, 255, 255, 0.25)",alignItems:"center",justifyContent:"center"},loadMoreBtnText:{fontFamily:V.interBold,fontSize:11,color:o.white,letterSpacing:.2},loadMoreCountBadge:{backgroundColor:"rgba(255, 255, 255, 0.2)",paddingHorizontal:5,paddingVertical:1,borderRadius:10},loadMoreCountText:{fontFamily:V.interBold,fontSize:9.5,color:o.white},loadMoreSubtitle:{fontFamily:V.interMedium,fontSize:10,color:o.grayTextWeak,letterSpacing:.1},badgePill:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:10,paddingVertical:5,borderRadius:999,backgroundColor:o.primaryLight,borderWidth:1,borderColor:o.grayBorderSecondary,shadowColor:o.black,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:2,elevation:1},iconCircle:{width:14,height:14,borderRadius:7,backgroundColor:`${o.purple}18`,alignItems:"center",justifyContent:"center"},messageText:{fontFamily:V.interMedium,fontSize:11,color:o.grayTextWeak,letterSpacing:.1},countBadge:{paddingHorizontal:5,paddingVertical:1,borderRadius:6,backgroundColor:o.grayBackground,borderWidth:1,borderColor:o.grayBorderSecondary},countText:{fontFamily:V.interBold,fontSize:9.5,color:o.grayTextStrong}});export default EndOfListFooter;