react-native-inapp-inspector 2.5.12 → 2.5.14

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

@@ -1,5 +1,8 @@
 import React from 'react';
+import { ActiveTab } from '../../types';
 export interface SkeletonPlaceholderProps {
+    tab?: ActiveTab;
+    type?: 'card' | 'detail' | 'list' | 'table';
     cardCount?: number;
 }
 export declare const SkeletonPlaceholder: React.NamedExoticComponent<SkeletonPlaceholderProps>;

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

@@ -1,23 +1,54 @@
-import x,{useEffect as v,useRef as D}from"react";import{Animated as f,StyleSheet as L,View as S}from"react-native";import{AppColors as b}from"../../styles/AppColors";export const SkeletonPlaceholder=x.memo(function({cardCount:B=4}){const C=D(new f.Value(.45)).current;return v(()=>{const V=f.loop(f.sequence([f.timing(C,{toValue:.95,duration:750,useNativeDriver:!1}),f.timing(C,{toValue:.45,duration:750,useNativeDriver:!1})]));return V.start(),()=>V.stop()},[C]),<S style={e.container}>
+import x,{useEffect as A,useRef as D}from"react";import{Animated as L,StyleSheet as W,View as S}from"react-native";import{AppColors as V}from"../../styles/AppColors";export const SkeletonPlaceholder=x.memo(function({tab:R="apis",type:v="card",cardCount:T=4}){const C=D(new L.Value(.4)).current;return A(()=>{const f=L.loop(L.sequence([L.timing(C,{toValue:.95,duration:700,useNativeDriver:!0}),L.timing(C,{toValue:.4,duration:700,useNativeDriver:!0})]));return f.start(),()=>f.stop()},[C]),v==="detail"?<S style={e.container}accessible={!0}accessibilityRole="progressbar"accessibilityLabel="Loading details, please wait"accessibilityLiveRegion="polite">
+        <L.View style={[e.detailHeader,{opacity:C}]}/>
+        <S style={e.chipStripSkeleton}>
+          <L.View style={[e.chipSkeleton,{width:70,opacity:C}]}/>
+          <L.View style={[e.chipSkeleton,{width:90,opacity:C}]}/>
+          <L.View style={[e.chipSkeleton,{width:80,opacity:C}]}/>
+        </S>
+        <L.View style={[e.detailCodeCard,{opacity:C}]}>
+          <S style={[e.urlLineLong,{width:"85%"}]}/>
+          <S style={[e.urlLineLong,{width:"70%",marginTop:8}]}/>
+          <S style={[e.urlLineLong,{width:"92%",marginTop:8}]}/>
+          <S style={[e.urlLineLong,{width:"60%",marginTop:8}]}/>
+          <S style={[e.urlLineLong,{width:"78%",marginTop:8}]}/>
+        </L.View>
+      </S>:R==="media"?<S style={e.container}accessible={!0}accessibilityRole="progressbar"accessibilityLabel="Loading media gallery, please wait"accessibilityLiveRegion="polite">
+        <S style={e.mediaGrid}>
+          {Array.from({length:6}).map((f,B)=><L.View key={`skeleton_media_${B}`}style={[e.mediaTile,{opacity:C}]}/>)}
+        </S>
+      </S>:R==="perf"?<S style={e.container}accessible={!0}accessibilityRole="progressbar"accessibilityLabel="Loading performance diagnostics, please wait"accessibilityLiveRegion="polite">
+        <L.View style={[e.heroCard,{opacity:C}]}>
+          <S style={e.cardTopRow}>
+            <S style={e.timeSkeleton}/>
+            <S style={e.statusBadgeSkeleton}/>
+          </S>
+          <S style={[e.urlLineLong,{height:32,marginTop:12}]}/>
+        </L.View>
+        <L.View style={[e.cardSkeleton,{opacity:C}]}>
+          <S style={[e.urlLineLong,{width:"40%"}]}/>
+          <S style={[e.urlLineShort,{marginTop:10}]}/>
+          <S style={[e.urlLineLong,{marginTop:8}]}/>
+        </L.View>
+      </S>:<S style={e.container}accessible={!0}accessibilityRole="progressbar"accessibilityLabel={`Loading ${R} data, please wait`}accessibilityLiveRegion="polite">
       
       <S style={e.toolbarSkeleton}>
-        <f.View style={[e.searchBarSkeleton,{opacity:C}]}/>
+        <L.View style={[e.searchBarSkeleton,{opacity:C}]}/>
         <S style={e.actionButtonsRow}>
-          <f.View style={[e.iconButtonSkeleton,{opacity:C}]}/>
-          <f.View style={[e.iconButtonSkeleton,{opacity:C}]}/>
+          <L.View style={[e.iconButtonSkeleton,{opacity:C}]}/>
+          <L.View style={[e.iconButtonSkeleton,{opacity:C}]}/>
         </S>
       </S>
 
       
       <S style={e.chipStripSkeleton}>
-        <f.View style={[e.chipSkeleton,{width:48,opacity:C}]}/>
-        <f.View style={[e.chipSkeleton,{width:68,opacity:C}]}/>
-        <f.View style={[e.chipSkeleton,{width:76,opacity:C}]}/>
-        <f.View style={[e.chipSkeleton,{width:58,opacity:C}]}/>
+        <L.View style={[e.chipSkeleton,{width:48,opacity:C}]}/>
+        <L.View style={[e.chipSkeleton,{width:68,opacity:C}]}/>
+        <L.View style={[e.chipSkeleton,{width:76,opacity:C}]}/>
+        <L.View style={[e.chipSkeleton,{width:58,opacity:C}]}/>
       </S>
 
       
-      {Array.from({length:B}).map((V,R)=><f.View key={`skeleton_card_${R}`}style={[e.cardSkeleton,{opacity:C}]}>
+      {Array.from({length:T}).map((f,B)=><L.View key={`skeleton_card_${B}`}style={[e.cardSkeleton,{opacity:C}]}>
           
           <S style={e.cardTopRow}>
             <S style={e.badgeGroup}>
@@ -36,5 +67,5 @@ import x,{useEffect as v,useRef as D}from"react";import{Animated as f,StyleSheet
             <S style={e.metaPillSkeleton}/>
             <S style={e.metaPillSkeleton}/>
           </S>
-        </f.View>)}
-    </S>});const e=L.create({container:{flex:1,paddingHorizontal:12,paddingTop:8},toolbarSkeleton:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},searchBarSkeleton:{flex:1,height:36,borderRadius:8,backgroundColor:b.graySurface,borderWidth:1,borderColor:b.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:b.graySurface,borderWidth:1,borderColor:b.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:b.graySurface,borderWidth:1,borderColor:b.dividerColor},cardSkeleton:{backgroundColor:b.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:b.dividerColor},cardTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8},badgeGroup:{flexDirection:"row",alignItems:"center",gap:6},statusBadgeSkeleton:{width:38,height:18,borderRadius:4,backgroundColor:b.slate200},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:b.slate200},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:b.slate200},urlLineLong:{height:13,borderRadius:4,backgroundColor:b.slate200,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:b.slate200,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:b.slate200}});export default SkeletonPlaceholder;
+        </L.View>)}
+    </S>});const e=W.create({container:{flex:1,paddingHorizontal:12,paddingTop:8},toolbarSkeleton:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},searchBarSkeleton:{flex:1,height:36,borderRadius:8,backgroundColor:V.graySurface,borderWidth:1,borderColor:V.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:V.graySurface,borderWidth:1,borderColor:V.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:V.graySurface,borderWidth:1,borderColor:V.dividerColor},cardSkeleton:{backgroundColor:V.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:V.dividerColor},cardTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8},badgeGroup:{flexDirection:"row",alignItems:"center",gap:6},statusBadgeSkeleton:{width:38,height:18,borderRadius:4,backgroundColor:V.slate200},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:V.slate200},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:V.slate200},urlLineLong:{height:13,borderRadius:4,backgroundColor:V.slate200,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:V.slate200,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:V.slate200},heroCard:{backgroundColor:V.primaryLight,borderRadius:12,padding:16,marginBottom:12,borderWidth:1,borderColor:V.dividerColor},detailHeader:{height:48,borderRadius:8,backgroundColor:V.graySurface,marginBottom:12},detailCodeCard:{flex:1,backgroundColor:V.primaryLight,borderRadius:10,padding:14,borderWidth:1,borderColor:V.dividerColor},mediaGrid:{flexDirection:"row",flexWrap:"wrap",gap:8},mediaTile:{width:"31%",aspectRatio:1,borderRadius:8,backgroundColor:V.graySurface,borderWidth:1,borderColor:V.dividerColor}});export default SkeletonPlaceholder;

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

@@ -1,7 +1,7 @@
-import te,{useMemo as O,useRef as le,useEffect as ae}from"react";import{Alert as ie,Animated as K,Linking as E,Pressable as X,StyleSheet as ne,Text as S,View as C}from"react-native";import Ce,{Path as Se}from"react-native-svg";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{formatDateTime as Te,formatTime as ke}from"../../helpers";import{CalendarIcon as Be,ClockIcon as J,CircleCheckIcon as Re,CircleXIcon as $e,ForwardChevronIcon as Ie,GlobeIcon as Q,LockIcon as Ve,ReceiveFrameIcon as We,SendFrameIcon as Pe,SizeIcon as De}from"../NetworkIcons";import Le from"../HighlightText";import Oe from"../TouchableScale";import{useTranslation as Fe}from"../../i18n";function He(o){return!o||o<=0?"0 B":o<1024?`${o} B`:o<1024*1024?`${(o/1024).toFixed(1)} KB`:`${(o/(1024*1024)).toFixed(2)} MB`}function ve({item:o,onPress:T,searchStr:Y,isNew:W,isSelected:M,onToggleSelect:N,serialNumber:A}){const{t:P}=Fe(),$=o.url.startsWith("wss://")||o.url.startsWith("https://"),F=o.client==="socket.io"||o.url.includes("/socket.io"),D=O(()=>F?{label:"SIO",color:e.violet600,bg:`${e.violet600}14`,border:`${e.violet600}35`}:$?{label:"WSS",color:e.emerald600,bg:`${e.emerald600}14`,border:`${e.emerald600}35`}:{label:"WS",color:e.blue600,bg:`${e.blue600}14`,border:`${e.blue600}35`},[F,$]),H=o.status||"open",k=H==="open",V=H==="connecting",z=H==="error",Z=O(()=>k?e.greenColor:V?e.amber600:z?e.errorColor:e.slate400,[k,V,z]),L=O(()=>k?{label:"OPEN",color:e.greenColor,bg:`${e.greenColor}15`,border:`${e.greenColor}40`}:V?{label:"CONNECTING",color:e.amber600,bg:`${e.amber600}15`,border:`${e.amber600}40`}:z?{label:o.closeCode?`ERR ${o.closeCode}`:"ERROR",color:e.errorColor,bg:`${e.errorColor}15`,border:`${e.errorColor}40`}:{label:o.closeCode?`CLOSED (${o.closeCode})`:"CLOSED",color:e.slate500,bg:`${e.slate500}15`,border:`${e.slate500}40`},[k,V,z,o.closeCode]),U=O(()=>{try{const I=o.url.replace(/^(wss?|https?):\/\//,""),R=I.indexOf("/");if(R>=0){const v=I.substring(0,R),re=I.substring(R);return{host:v,path:re}}return{host:I,path:"/"}}catch{return{host:o.url,path:"/"}}},[o.url]),_=I=>{I?.stopPropagation?.();const R=o.url.replace(/^wss:\/\//i,"https://").replace(/^ws:\/\//i,"http://");ie.alert(P("common.openInBrowser","Open in Browser"),`${P("common.openInBrowserPrompt","Are you sure you want to open this URL in your external browser?")}
+import te,{useMemo as O,useRef as le,useEffect as ie}from"react";import{Alert as ae,Animated as K,Linking as E,Pressable as X,StyleSheet as ne,Text as S,View as C}from"react-native";import Ce,{Path as Se}from"react-native-svg";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{formatDateTime as Te,formatTime as ke}from"../../helpers";import{CalendarIcon as Be,ClockIcon as J,CircleCheckIcon as $e,CircleXIcon as Re,ForwardChevronIcon as Ie,GlobeIcon as Q,LockIcon as We,ReceiveFrameIcon as Ve,SendFrameIcon as Pe,SizeIcon as De}from"../NetworkIcons";import Le from"../HighlightText";import Oe from"../TouchableScale";import{useTranslation as Fe}from"../../i18n";function He(o){return!o||o<=0?"0 B":o<1024?`${o} B`:o<1024*1024?`${(o/1024).toFixed(1)} KB`:`${(o/(1024*1024)).toFixed(2)} MB`}function ve({item:o,onPress:T,searchStr:Y,isNew:V,isSelected:M,onToggleSelect:N,serialNumber:A}){const{t:P}=Fe(),R=o.url.startsWith("wss://")||o.url.startsWith("https://"),F=o.client==="socket.io"||o.url.includes("/socket.io"),D=O(()=>F?{label:"SIO",color:e.violet600,bg:`${e.violet600}14`,border:`${e.violet600}35`}:R?{label:"WSS",color:e.emerald600,bg:`${e.emerald600}14`,border:`${e.emerald600}35`}:{label:"WS",color:e.blue600,bg:`${e.blue600}14`,border:`${e.blue600}35`},[F,R]),H=o.status||"open",k=H==="open",W=H==="connecting",z=H==="error",Z=O(()=>k?e.greenColor:W?e.amber600:z?e.errorColor:e.slate400,[k,W,z]),L=O(()=>k?{label:"OPEN",color:e.greenColor,bg:`${e.greenColor}15`,border:`${e.greenColor}40`}:W?{label:"CONNECTING",color:e.amber600,bg:`${e.amber600}15`,border:`${e.amber600}40`}:z?{label:o.closeCode?`ERR ${o.closeCode}`:"ERROR",color:e.errorColor,bg:`${e.errorColor}15`,border:`${e.errorColor}40`}:{label:o.closeCode?`CLOSED (${o.closeCode})`:"CLOSED",color:e.slate500,bg:`${e.slate500}15`,border:`${e.slate500}40`},[k,W,z,o.closeCode]),j=O(()=>{try{const I=o.url.replace(/^(wss?|https?):\/\//,""),$=I.indexOf("/");if($>=0){const v=I.substring(0,$),re=I.substring($);return{host:v,path:re}}return{host:I,path:"/"}}catch{return{host:o.url,path:"/"}}},[o.url]),_=I=>{I?.stopPropagation?.();const $=o.url.replace(/^wss:\/\//i,"https://").replace(/^ws:\/\//i,"http://");ae.alert(P("common.openInBrowser","Open in Browser"),`${P("common.openInBrowserPrompt","Are you sure you want to open this URL in your external browser?")}
 
-${R}`,[{text:P("common.cancel","Cancel"),style:"cancel"},{text:P("common.open","Open"),onPress:()=>{E.canOpenURL(R).then(v=>{v?E.openURL(R):E.openURL(R).catch(()=>{})}).catch(()=>{})}}])},j=le(new K.Value(W?.35:0)).current;ae(()=>{W&&K.timing(j,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[W,j]);const G=(o.totalBytesSent||0)+(o.totalBytesReceived||0),ee=o.duration!=null?`${o.duration}ms`:"Active",oe=Te(o.startTime);return<C style={r.container}>
-      <Oe onPress={T}style={[r.card,{borderLeftWidth:3.5,borderLeftColor:Z,backgroundColor:z?e.errorCardBg:e.white},W&&r.cardNew]}>
+${$}`,[{text:P("common.cancel","Cancel"),style:"cancel"},{text:P("common.open","Open"),onPress:()=>{E.canOpenURL($).then(v=>{v?E.openURL($):E.openURL($).catch(()=>{})}).catch(()=>{})}}])},U=le(new K.Value(V?.35:0)).current;ie(()=>{V&&K.timing(U,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[V,U]);const G=(o.totalBytesSent||0)+(o.totalBytesReceived||0),ee=o.duration!=null?`${o.duration}ms`:"Active",oe=Te(o.startTime);return<C style={r.container}>
+      <Oe onPress={T}style={[r.card,{borderLeftWidth:3.5,borderLeftColor:Z,backgroundColor:z?e.errorCardBg:e.white},V&&r.cardNew]}>
         <C style={r.cardBody}>
           
           <C style={r.cardHeaderRow}>
@@ -32,13 +32,13 @@ ${R}`,[{text:P("common.cancel","Cancel"),style:"cancel"},{text:P("common.open","
             <C style={r.cardHeaderRight}>
               
               <C style={[r.statusPill,{backgroundColor:L.bg,borderColor:L.border}]}>
-                {k?<C style={r.pulsingDot}/>:V?<J color={e.amber600}size={9}/>:z?<$e color={e.errorColor}size={9}/>:<Re color={e.slate500}size={9}/>}
+                {k?<C style={r.pulsingDot}/>:W?<J color={e.amber600}size={9}/>:z?<Re color={e.errorColor}size={9}/>:<$e color={e.slate500}size={9}/>}
                 <S style={[r.statusPillText,{color:L.color}]}>
                   {L.label}
                 </S>
               </C>
 
-              <X onPress={_}hitSlop={8}style={r.globeBtn}accessibilityRole="button"accessibilityLabel="Open in Browser">
+              <X onPress={_}hitSlop={{top:6,bottom:6,left:3,right:3}}style={r.globeBtn}accessibilityRole="button"accessibilityLabel="Open in Browser">
                 <Q color={e.grayTextWeak}size={12}/>
               </X>
 
@@ -49,19 +49,19 @@ ${R}`,[{text:P("common.cancel","Cancel"),style:"cancel"},{text:P("common.open","
           
           <C style={r.urlBox}>
             <C style={r.urlMainRow}>
-              <Le text={U.path}search={Y}style={r.pathText}highlightStyle={r.highlight}numberOfLines={1}ellipsizeMode="middle"/>
+              <Le text={j.path}search={Y}style={r.pathText}highlightStyle={r.highlight}numberOfLines={1}ellipsizeMode="middle"/>
             </C>
 
             <C style={r.hostRow}>
-              <C style={[r.protoBadge,{backgroundColor:$?`${e.emerald600}12`:`${e.blue600}12`,borderColor:$?`${e.emerald600}2B`:`${e.blue600}2B`}]}>
-                {$?<Ve size={9}color={e.emerald600}/>:<Q size={9}color={e.blue600}/>}
-                <S style={[r.protoBadgeText,{color:$?e.emerald600:e.blue600}]}>
-                  {$?"WSS":"WS"}
+              <C style={[r.protoBadge,{backgroundColor:R?`${e.emerald600}12`:`${e.blue600}12`,borderColor:R?`${e.emerald600}2B`:`${e.blue600}2B`}]}>
+                {R?<We size={9}color={e.emerald600}/>:<Q size={9}color={e.blue600}/>}
+                <S style={[r.protoBadgeText,{color:R?e.emerald600:e.blue600}]}>
+                  {R?"WSS":"WS"}
                 </S>
               </C>
 
               <S style={r.hostText}numberOfLines={1}ellipsizeMode="tail">
-                {U.host}
+                {j.host}
               </S>
             </C>
           </C>
@@ -88,7 +88,7 @@ ${R}`,[{text:P("common.cancel","Cancel"),style:"cancel"},{text:P("common.open","
 
               
               <C style={[r.metaStatChip,{backgroundColor:`${e.emerald600}10`,borderColor:`${e.emerald600}26`}]}>
-                <We size={9}color={e.emerald600}/>
+                <Ve size={9}color={e.emerald600}/>
                 <S style={[r.metaStatText,{color:e.emerald600}]}>
                   {o.receivedCount||0}
                 </S>
@@ -113,4 +113,4 @@ ${R}`,[{text:P("common.cancel","Cancel"),style:"cancel"},{text:P("common.open","
           </C>
         </C>
       </Oe>
-    </C>}const r=ne.create({container:{marginHorizontal:4,marginBottom:6},card:{borderRadius:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:2,elevation:1,overflow:"hidden"},cardNew:{borderColor:`${e.brandPurple}66`,backgroundColor:`${e.brandPurple}05`},cardBody:{paddingHorizontal:8,paddingVertical:8},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:5},cardHeaderLeft:{flexDirection:"row",alignItems:"center",gap:4.5,flex:1,minWidth:0},smallCheckbox:{width:15,height:15,borderRadius:3.5,borderWidth:1.2,borderColor:e.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:e.white,marginRight:2},smallCheckboxChecked:{backgroundColor:e.purple,borderColor:e.purple},serialNumber:{fontFamily:B.interSemiBold,fontSize:10.5,color:e.grayTextWeak},protocolBadge:{paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5,borderWidth:1},protocolBadgeText:{fontFamily:B.interBold,fontSize:9.5,letterSpacing:.3},chip:{paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:B.interBold,fontSize:9,letterSpacing:.2},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:6},statusPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:6,paddingVertical:2,borderRadius:5,borderWidth:1},statusPillText:{fontFamily:B.interBold,fontSize:9.5,letterSpacing:.3},pulsingDot:{width:6,height:6,borderRadius:3,backgroundColor:e.greenColor},globeBtn:{padding:3,borderRadius:4,backgroundColor:`${e.grayTextWeak}12`},urlBox:{marginBottom:8},urlMainRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6,marginBottom:3},pathText:{flex:1,fontFamily:B.interBold,fontSize:12.5,color:e.grayTextStrong,lineHeight:17},highlight:{backgroundColor:"rgba(250, 204, 21, 0.40)",color:e.grayTextStrong,borderRadius:2},hostRow:{flexDirection:"row",alignItems:"center",gap:5},protoBadge:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:4.5,paddingVertical:1,borderRadius:4,borderWidth:1},protoBadgeText:{fontFamily:B.interBold,fontSize:8.5,letterSpacing:.2},hostText:{flex:1,fontFamily:B.interMedium,fontSize:11,color:e.grayTextWeak},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingTop:6,borderTopWidth:1,borderTopColor:e.dividerColor},footerLeft:{flexDirection:"row",alignItems:"center",flex:1,minWidth:0,marginRight:6},cardDateRow:{flexDirection:"row",alignItems:"center",gap:4},cardDateText:{fontFamily:B.interMedium,fontSize:10,color:e.grayTextWeak},footerRight:{flexDirection:"row",alignItems:"center",gap:4},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1},metaStatText:{fontFamily:B.interSemiBold,fontSize:9.5}});function Ee(o,T){return o.item===T.item&&o.isSelected===T.isSelected&&o.isNew===T.isNew&&o.searchStr===T.searchStr&&o.serialNumber===T.serialNumber&&o.onPress===T.onPress&&o.onToggleSelect===T.onToggleSelect}export default te.memo(ve,Ee);
+    </C>}const r=ne.create({container:{marginHorizontal:4,marginBottom:6},card:{borderRadius:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:2,elevation:1,overflow:"hidden"},cardNew:{borderColor:`${e.brandPurple}66`,backgroundColor:`${e.brandPurple}05`},cardBody:{paddingHorizontal:8,paddingVertical:8},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:5},cardHeaderLeft:{flexDirection:"row",alignItems:"center",gap:4.5,flex:1,minWidth:0},smallCheckbox:{width:15,height:15,borderRadius:3.5,borderWidth:1.2,borderColor:e.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:e.white,marginRight:2},smallCheckboxChecked:{backgroundColor:e.purple,borderColor:e.purple},serialNumber:{fontFamily:B.interSemiBold,fontSize:10.5,color:e.grayTextWeak},protocolBadge:{paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5,borderWidth:1},protocolBadgeText:{fontFamily:B.interBold,fontSize:9.5,letterSpacing:.3},chip:{paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:B.interBold,fontSize:9,letterSpacing:.2},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:7},statusPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:6,paddingVertical:2,borderRadius:5,borderWidth:1},statusPillText:{fontFamily:B.interBold,fontSize:9.5,letterSpacing:.3},pulsingDot:{width:6,height:6,borderRadius:3,backgroundColor:e.greenColor},globeBtn:{width:26,height:22,borderRadius:5,backgroundColor:`${e.grayTextWeak}14`,borderWidth:1,borderColor:`${e.grayTextWeak}28`,alignItems:"center",justifyContent:"center"},urlBox:{marginBottom:8},urlMainRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6,marginBottom:3},pathText:{flex:1,fontFamily:B.interBold,fontSize:12.5,color:e.grayTextStrong,lineHeight:17},highlight:{backgroundColor:"rgba(250, 204, 21, 0.40)",color:e.grayTextStrong,borderRadius:2},hostRow:{flexDirection:"row",alignItems:"center",gap:5},protoBadge:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:4.5,paddingVertical:1,borderRadius:4,borderWidth:1},protoBadgeText:{fontFamily:B.interBold,fontSize:8.5,letterSpacing:.2},hostText:{flex:1,fontFamily:B.interMedium,fontSize:11,color:e.grayTextWeak},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingTop:6,borderTopWidth:1,borderTopColor:e.dividerColor},footerLeft:{flexDirection:"row",alignItems:"center",flex:1,minWidth:0,marginRight:6},cardDateRow:{flexDirection:"row",alignItems:"center",gap:4},cardDateText:{fontFamily:B.interMedium,fontSize:10,color:e.grayTextWeak},footerRight:{flexDirection:"row",alignItems:"center",gap:4},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1},metaStatText:{fontFamily:B.interSemiBold,fontSize:9.5}});function Ee(o,T){return o.item===T.item&&o.isSelected===T.isSelected&&o.isNew===T.isNew&&o.searchStr===T.searchStr&&o.serialNumber===T.serialNumber&&o.onPress===T.onPress&&o.onToggleSelect===T.onToggleSelect}export default te.memo(ve,Ee);

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

@@ -29,13 +29,13 @@ https://github.com/vengatmacuser/react-native-inapp-inspector`,url:"https://gith
           
           <T style={e.pillRow}>
             <T style={e.pillBadge}>
-              <C style={e.pillBadgeText}>MIT LICENSE</C>
+              <C style={e.pillBadgeText}>{S("support.mitLicense","MIT LICENSE")}</C>
             </T>
             <T style={e.pillBadge}>
-              <C style={e.pillBadgeText}>ZERO CONFIG</C>
+              <C style={e.pillBadgeText}>{S("support.zeroConfig","ZERO CONFIG")}</C>
             </T>
             <T style={e.pillBadge}>
-              <C style={e.pillBadgeText}>FABRIC & TURBO</C>
+              <C style={e.pillBadgeText}>{S("support.fabricTurbo","FABRIC & TURBO")}</C>
             </T>
           </T>
         </T>
@@ -99,7 +99,7 @@ https://github.com/vengatmacuser/react-native-inapp-inspector`,url:"https://gith
                     {S("support.star","Star on GitHub")}
                   </C>
                   <T style={e.badgeAmber}>
-                    <C style={e.badgeAmberText}>RECOMMENDED</C>
+                    <C style={e.badgeAmberText}>{S("support.recommended","RECOMMENDED")}</C>
                   </T>
                 </T>
                 <C style={e.itemDesc}>
@@ -196,7 +196,7 @@ https://github.com/vengatmacuser/react-native-inapp-inspector`,url:"https://gith
             <T style={e.authorTextCol}>
               <C style={e.authorName}>Vengateswaran Balakrishnan</C>
               <C style={e.authorRole}>
-                Creator & Core Maintainer • @vengatmacuser
+                {S("support.creatorMaintainer","Creator & Core Maintainer \u2022 @vengatmacuser")}
               </C>
               <C style={e.authorEmail}>vengatmacuser@gmail.com</C>
             </T>

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

@@ -1,58 +1,52 @@
-import ce,{useRef as _,useState as F}from"react";import{Platform as de,ScrollView as Ce,Text as P,TouchableOpacity as U,View as C}from"react-native";import{useInspector as ke}from"./InspectorContext";import{useTranslation as we}from"../../i18n";import v from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as T}from"../../styles/AppFonts";import G from"../TouchableScale";import{SignalIcon as Se,TerminalIcon as Ie,AnalyticsIcon as Re,ReduxIcon as Te,CrashIcon as Be,BellIcon as Pe,SmartphoneIcon as Le,DatabaseIcon as Ae,QrCodeIcon as Ve,ScreencastIcon as Oe,ChevronIcon as Q,WebsocketIcon as De,SpeedometerIcon as Ee}from"../NetworkIcons";import{isReduxConnected as He}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as We}from"../../customHooks/analyticsLogger";import{isLocalDebugEnvironment as $e}from"../../helpers";const n={themeColor:o.brandPurple,bgInactive:`${o.brandPurple}0D`,borderInactive:`${o.brandPurple}2B`,iconInactive:o.brandPurple,idBadgeBg:`${o.brandPurple}1C`,idBadgeBorder:`${o.brandPurple}3D`,idBadgeText:o.brandPurple},q={apis:n,logs:n,perf:n,analytics:n,redux:n,storage:n,device:n,crash:n,push:n,socket:n,debugging:n,media:n},je=ce.memo(()=>{const{t:J}=we(),{activeTab:w,switchActiveTab:L,tabVisibility:B,logs:A,consoleLogs:V,analyticsEvents:K,crashRecords:O,pushRecords:D,socketRecords:E,unreadPushCount:N,unreadSocketCount:X,lastReadApisCount:Y,lastReadLogsCount:Z,lastReadCrashesCount:ee,lastReadSocketCount:oe,mediaCount:H}=ke(),te=He(),ie=We(),k=w==="media",x=(B?.media??!0)&&(H>0||k||__DEV__),W=_(null),[z,re]=F(!1),[$,ne]=F(!0),j=_(0),le=e=>{const{contentOffset:t,layoutMeasurement:i,contentSize:r}=e.nativeEvent,S=t.x;j.current=S;const I=S>8,R=S<r.width-i.width-8;z!==I&&re(I),$!==R&&ne(R)},M=e=>{W.current?.scrollTo({x:Math.max(0,j.current+e),animated:!0})};return<C style={[v.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
+import ce,{useRef as H,useState as E}from"react";import{ScrollView as Ce,Text as M,TouchableOpacity as W,View as C}from"react-native";import{useInspector as we}from"./InspectorContext";import{useTranslation as ke}from"../../i18n";import x from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as z}from"../../styles/AppFonts";import _ from"../TouchableScale";import{SignalIcon as Se,TerminalIcon as Re,AnalyticsIcon as Ie,ReduxIcon as Te,CrashIcon as Be,BellIcon as Pe,SmartphoneIcon as Le,DatabaseIcon as Ae,ScreencastIcon as $e,ChevronIcon as F,WebsocketIcon as De,SpeedometerIcon as Oe}from"../NetworkIcons";import{isReduxConnected as Ve}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as He}from"../../customHooks/analyticsLogger";const n={themeColor:t.brandPurple,bgInactive:`${t.brandPurple}0D`,borderInactive:`${t.brandPurple}2B`,iconInactive:t.brandPurple,idBadgeBg:`${t.brandPurple}1C`,idBadgeBorder:`${t.brandPurple}3D`,idBadgeText:t.brandPurple},U={apis:n,logs:n,perf:n,analytics:n,redux:n,storage:n,device:n,crash:n,push:n,socket:n,media:n},Ee=ce.memo(()=>{const{t:S}=ke(),{activeTab:k,switchActiveTab:L,tabVisibility:A,logs:q,consoleLogs:G,analyticsEvents:je,crashRecords:J,pushRecords:K,socketRecords:N,unreadPushCount:Q,unreadSocketCount:X,lastReadApisCount:Y,lastReadLogsCount:Z,lastReadCrashesCount:ee,lastReadSocketCount:te,mediaCount:I}=we(),oe=Ve(),ie=He(),w=k==="media",B=(A?.media??!0)&&(I>0||w||__DEV__),$=H(null),[P,re]=E(!1),[D,ne]=E(!0),O=H(0),se=e=>{const{contentOffset:o,layoutMeasurement:r,contentSize:i}=e.nativeEvent,R=o.x;O.current=R;const T=R>8,v=R<i.width-r.width-8;P!==T&&re(T),D!==v&&ne(v)},V=e=>{$.current?.scrollTo({x:Math.max(0,O.current+e),animated:!0})};return<C style={[x.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
       
-      {z&&<U onPress={()=>M(-160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:6,paddingRight:2,justifyContent:"center",alignItems:"center"}}>
-          <C style={{width:22,height:22,borderRadius:11,backgroundColor:o.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
-            <Q direction="left"size={13}color={o.grayTextStrong}/>
+      {P&&<W onPress={()=>V(-160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:6,paddingRight:2,justifyContent:"center",alignItems:"center"}}>
+          <C style={{width:22,height:22,borderRadius:11,backgroundColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
+            <F direction="left"size={13}color={t.grayTextStrong}/>
           </C>
-        </U>}
+        </W>}
 
       
-      <Ce testID="inspector.tab.scrollview"ref={W}horizontal showsHorizontalScrollIndicator={!1}onScroll={le}scrollEventThrottle={16}style={{flex:1}}contentContainerStyle={{paddingLeft:z?4:12,paddingRight:x?6:12}}>
-        {[{id:1,key:"apis",label:"APIs",count:A.length,icon:"apis"},{id:2,key:"logs",label:"Logs",count:V.length,icon:"logs"},{id:3,key:"perf",label:"Perf / FPS",count:0,icon:"perf"},{id:4,key:"analytics",label:"Analytics",count:K.length,icon:"analytics"},{id:5,key:"redux",label:"Redux",count:0,icon:"redux"},{id:6,key:"storage",label:"Storage",count:0,icon:"storage"},{id:7,key:"device",label:"Device",count:0,icon:"device"},{id:8,key:"crash",label:"Crash",count:O?.length||0,icon:"crash"},{id:9,key:"push",label:"Push",count:D?.length||0,icon:"push"},{id:10,key:"socket",label:"WebSocket",count:E?.length||0,icon:"socket"},{id:11,key:"debugging",label:"Debugging",count:0,icon:"debugging"}].filter(e=>e.key==="debugging"?de.OS==="android"&&$e()&&!!B?.debugging:!(!B?.[e.key]||e.key==="redux"&&!te||e.key==="analytics"&&!ie)).map(e=>{const t=w===e.key,i=q[e.key]||q.apis,r=t?o.white:i.iconInactive,S=e.count>99?"99+":String(e.count),I=w!=="apis"&&A.length>Y,R=w!=="logs"&&V.length>Z,se=w!=="crash"&&(O?.length||0)>(ee||0),ae=w!=="socket"&&((E?.length||0)>(oe||0)||X>0);return<G key={e.key}testID={`inspector.tab.${e.key}`}onPress={()=>{L(e.key)}}style={[v.contentTabButton,{backgroundColor:t?i.themeColor:i.bgInactive,borderColor:t?i.themeColor:i.borderInactive},t&&{shadowColor:i.themeColor,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
+      <Ce testID="inspector.tab.scrollview"ref={$}horizontal showsHorizontalScrollIndicator={!1}onScroll={se}scrollEventThrottle={16}style={{flex:1}}contentContainerStyle={{paddingLeft:P?4:12,paddingRight:B?6:12}}>
+        {[{id:1,key:"apis",label:"APIs",icon:"apis"},{id:2,key:"logs",label:"Logs",icon:"logs"},{id:3,key:"perf",label:"Perf / FPS",icon:"perf"},{id:4,key:"analytics",label:"Analytics",icon:"analytics"},{id:5,key:"redux",label:"Redux",icon:"redux"},{id:6,key:"storage",label:"Storage",icon:"storage"},{id:7,key:"device",label:"Device",icon:"device"},{id:8,key:"crash",label:"Crash",icon:"crash"},{id:9,key:"push",label:"Push",icon:"push"},{id:10,key:"socket",label:"WebSocket",icon:"socket"}].filter(e=>!(!A?.[e.key]||e.key==="redux"&&!oe||e.key==="analytics"&&!ie)).map(e=>{const o=k===e.key,r=U[e.key]||U.apis,i=o?t.white:r.iconInactive,R=k!=="apis"&&q.length>Y,T=k!=="logs"&&G.length>Z,v=k!=="crash"&&(J?.length||0)>(ee||0),ae=k!=="socket"&&((N?.length||0)>(te||0)||X>0);return<_ key={e.key}testID={`inspector.tab.${e.key}`}accessible={!0}accessibilityRole="tab"accessibilityState={{selected:o}}accessibilityLabel={`${S(`tabs.${e.key}`,e.label)} tab`}accessibilityHint={S("accessibility.tabSwitchHint","Double tap to switch to this tab")}onPress={()=>{L(e.key)}}style={[x.contentTabButton,{backgroundColor:o?r.themeColor:r.bgInactive,borderColor:o?r.themeColor:r.borderInactive},o&&{shadowColor:r.themeColor,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
                 <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                  {e.icon==="apis"&&<Se color={r}size={14}/>}
-                  {e.icon==="logs"&&<Ie color={r}size={14}/>}
-                  {e.icon==="perf"&&<Ee color={r}size={14}/>}
-                  {e.icon==="analytics"&&<Re color={r}size={14}/>}
-                  {e.icon==="redux"&&<Te color={r}size={14}/>}
-                  {e.icon==="storage"&&<Ae color={r}size={14}/>}
-                  {e.icon==="device"&&<Le color={r}size={14}/>}
-                  {e.icon==="crash"&&<Be color={r}size={14}/>}
-                  {e.icon==="push"&&<Pe color={r}size={14}/>}
-                  {e.icon==="socket"&&<De color={r}size={14}/>}
-                  {e.icon==="debugging"&&<Ve color={r}size={14}/>}
-                  <C style={{minWidth:20,height:20,paddingHorizontal:4,borderRadius:10,backgroundColor:t?`${o.white}33`:i.idBadgeBg,borderWidth:1,borderColor:t?`${o.white}66`:i.idBadgeBorder,alignItems:"center",justifyContent:"center"}}>
-                    <P style={{fontFamily:T.interBold,fontSize:9.5,lineHeight:12,color:t?o.white:i.idBadgeText}}>
+                  {e.icon==="apis"&&<Se color={i}size={14}/>}
+                  {e.icon==="logs"&&<Re color={i}size={14}/>}
+                  {e.icon==="perf"&&<Oe color={i}size={14}/>}
+                  {e.icon==="analytics"&&<Ie color={i}size={14}/>}
+                  {e.icon==="redux"&&<Te color={i}size={14}/>}
+                  {e.icon==="storage"&&<Ae color={i}size={14}/>}
+                  {e.icon==="device"&&<Le color={i}size={14}/>}
+                  {e.icon==="crash"&&<Be color={i}size={14}/>}
+                  {e.icon==="push"&&<Pe color={i}size={14}/>}
+                  {e.icon==="socket"&&<De color={i}size={14}/>}
+                  <C style={{minWidth:20,height:20,paddingHorizontal:4,borderRadius:10,backgroundColor:o?`${t.white}33`:r.idBadgeBg,borderWidth:1,borderColor:o?`${t.white}66`:r.idBadgeBorder,alignItems:"center",justifyContent:"center"}}>
+                    <M style={{fontFamily:z.interBold,fontSize:9.5,lineHeight:12,color:o?t.white:r.idBadgeText}}>
                       #{e.id}
-                    </P>
+                    </M>
                   </C>
-                  <P numberOfLines={1}ellipsizeMode="tail"style={[v.contentTabButtonText,{color:t?o.white:o.grayTextStrong,fontFamily:t?T.interBold:T.interSemiBold}]}>
-                    {J(`tabs.${e.key}`,e.label)}
-                  </P>
-                  {e.count>0&&e.key!=="push"&&<C style={{paddingHorizontal:5,paddingVertical:1,borderRadius:8,backgroundColor:t?o.overlayWhite25:i.idBadgeBg,borderWidth:.5,borderColor:t?o.overlayWhite45:i.idBadgeBorder,marginLeft:1,alignItems:"center",justifyContent:"center"}}>
-                      <P style={{fontFamily:T.interBold,fontSize:9.5,lineHeight:12,color:t?o.white:i.themeColor}}>
-                        {S}
-                      </P>
-                    </C>}
-                  {(e.key==="apis"&&I||e.key==="logs"&&R||e.key==="crash"&&se||e.key==="push"&&((D?.length||0)>0||N>0)||e.key==="socket"&&ae)&&<C style={{width:6,height:6,borderRadius:3,backgroundColor:o.errorColor,marginLeft:4,alignSelf:"center"}}/>}
+                  <M numberOfLines={1}ellipsizeMode="tail"style={[x.contentTabButtonText,{color:o?t.white:t.grayTextStrong,fontFamily:o?z.interBold:z.interSemiBold}]}>
+                    {S(`tabs.${e.key}`,e.label)}
+                  </M>
+                  {(e.key==="apis"&&R||e.key==="logs"&&T||e.key==="crash"&&v||e.key==="push"&&((K?.length||0)>0||Q>0)||e.key==="socket"&&ae)&&<C style={{width:6,height:6,borderRadius:3,backgroundColor:t.errorColor,marginLeft:4,alignSelf:"center"}}/>}
                 </C>
-              </G>})}
+              </_>})}
       </Ce>
 
       
-      {$&&<U onPress={()=>M(160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:2,paddingRight:x?4:8,justifyContent:"center",alignItems:"center"}}>
-          <C style={{width:22,height:22,borderRadius:11,backgroundColor:o.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
-            <Q direction="right"size={13}color={o.grayTextStrong}/>
+      {D&&<W onPress={()=>V(160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:2,paddingRight:B?4:8,justifyContent:"center",alignItems:"center"}}>
+          <C style={{width:22,height:22,borderRadius:11,backgroundColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
+            <F direction="right"size={13}color={t.grayTextStrong}/>
           </C>
-        </U>}
+        </W>}
 
       
-      {x&&<C style={{paddingLeft:6,paddingRight:10,borderLeftWidth:1,borderLeftColor:o.dividerColor,backgroundColor:o.primaryLight,justifyContent:"center",shadowColor:o.shadowColorString,shadowOffset:{width:-3,height:0},shadowOpacity:.12,shadowRadius:4,elevation:4,zIndex:10}}>
-          <G key="media"testID="inspector.tab.media"onPress={()=>{L("media")}}accessibilityRole="button"accessibilityLabel="Media Gallery"style={[v.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:k?o.brandPurple:`${o.brandPurple}0D`,borderColor:k?o.brandPurple:`${o.brandPurple}2B`,borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},k&&{shadowColor:o.brandPurple,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
+      {B&&<C style={{paddingLeft:6,paddingRight:10,borderLeftWidth:1,borderLeftColor:t.dividerColor,backgroundColor:t.primaryLight,justifyContent:"center",shadowColor:t.shadowColorString,shadowOffset:{width:-3,height:0},shadowOpacity:.12,shadowRadius:4,elevation:4,zIndex:10}}>
+          <_ key="media"testID="inspector.tab.media"onPress={()=>{L("media")}}accessible={!0}accessibilityRole="tab"accessibilityState={{selected:w}}accessibilityLabel={`${S("tabs.media","Media")} tab${I>0?`, ${I} items`:""}`}accessibilityHint={S("accessibility.tabSwitchHint","Double tap to switch to this tab")}style={[x.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:w?t.brandPurple:`${t.brandPurple}0D`,borderColor:w?t.brandPurple:`${t.brandPurple}2B`,borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},w&&{shadowColor:t.brandPurple,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
             <C style={{position:"relative",alignItems:"center",justifyContent:"center"}}>
-              <Oe color={k?o.white:o.brandPurple}size={15}/>
-              {H>0&&<C style={{position:"absolute",top:-3,right:-4,width:7,height:7,borderRadius:3.5,backgroundColor:k?o.white:o.brandPurple,borderWidth:1.2,borderColor:k?o.brandPurple:o.white}}/>}
+              <$e color={w?t.white:t.brandPurple}size={15}/>
+              {I>0&&<C style={{position:"absolute",top:-3,right:-4,width:7,height:7,borderRadius:3.5,backgroundColor:w?t.white:t.brandPurple,borderWidth:1.2,borderColor:w?t.brandPurple:t.white}}/>}
             </C>
-          </G>
+          </_>
         </C>}
-    </C>});export default je;
+    </C>});export default Ee;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { A11yAuditResult } from '../../types';
+interface UiA11yAuditPanelProps {
+    a11y: A11yAuditResult;
+}
+export declare const UiA11yAuditPanel: React.FC<UiA11yAuditPanelProps>;
+export {};

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

@@ -0,0 +1,97 @@
+import"react";import{StyleSheet as E,Text as T,View as S}from"react-native";import{AppColors as f}from"../../styles/AppColors";import{AppFonts as x}from"../../styles/AppFonts";import{AccessibilityIcon as H,AlertTriangleIcon as P}from"../NetworkIcons";export const UiA11yAuditPanel=({a11y:R})=>{const{hasValidTouchTarget:C,touchTargetWidth:W,touchTargetHeight:k,recommendedMinSize:h,contrastRatio:p,contrastScore:A,textColor:D,backgroundColor:V,hasAccessibilityLabel:w,accessibilityRole:B,accessibilityHint:z,issues:F}=R;return<S style={e.container}>
+      
+      <S style={e.card}>
+        <S style={e.cardHeader}>
+          <S style={e.cardTitleRow}>
+            <H color={f.brandPurple}size={18}/>
+            <T style={e.cardTitle}>Touch Target Size</T>
+          </S>
+          <S style={[e.badge,C?e.badgeSuccess:e.badgeWarning]}>
+            <T style={[e.badgeText,C?e.badgeTextSuccess:e.badgeTextWarning]}>
+              {C?"COMPLIANT":"SUB-OPTIMAL"}
+            </T>
+          </S>
+        </S>
+
+        <S style={e.metricRow}>
+          <S style={e.metricItem}>
+            <T style={e.metricLabel}>Actual Size</T>
+            <T style={e.metricValue}>
+              {Math.round(W)} × {Math.round(k)} pt
+            </T>
+          </S>
+          <S style={e.metricItem}>
+            <T style={e.metricLabel}>Target Guideline</T>
+            <T style={e.metricValue}>
+              ≥ {h} × {h} pt
+            </T>
+          </S>
+        </S>
+      </S>
+
+      
+      <S style={e.card}>
+        <S style={e.cardHeader}>
+          <S style={e.cardTitleRow}>
+            <T style={e.cardTitle}>WCAG Color Contrast</T>
+          </S>
+          <S style={[e.badge,A==="AAA"||A==="AA"?e.badgeSuccess:A==="Fail"?e.badgeError:e.badgeNeutral]}>
+            <T style={[e.badgeText,A==="AAA"||A==="AA"?e.badgeTextSuccess:A==="Fail"?e.badgeTextError:e.badgeTextNeutral]}>
+              {A==="N/A"?"NOT APPLICABLE":`WCAG ${A}`}
+            </T>
+          </S>
+        </S>
+
+        {p!==void 0?<S style={e.contrastPreview}>
+            <S style={[e.contrastSwatch,{backgroundColor:V||"#FFFFFF"}]}>
+              <T style={[e.contrastSampleText,{color:D||"#000000"}]}>
+                Sample Text
+              </T>
+            </S>
+            <S style={e.contrastDetails}>
+              <T style={e.contrastRatioValue}>{p}:1</T>
+              <T style={e.contrastSubtext}>
+                {p>=7?"Passes AAA (Enhanced Contrast)":p>=4.5?"Passes AA (Minimum Standard)":"Fails AA (Low Contrast Warning)"}
+              </T>
+            </S>
+          </S>:<T style={e.naSubtext}>
+            Text or background color is transparent or dynamically inherited.
+          </T>}
+      </S>
+
+      
+      <S style={e.card}>
+        <T style={[e.cardTitle,{marginBottom:10}]}>Accessibility Attributes</T>
+
+        <S style={e.attributeRow}>
+          <T style={e.attributeLabel}>accessibilityLabel:</T>
+          <T style={[e.attributeValue,!w&&{color:f.grayTextWeak,fontStyle:"italic"}]}>
+            {w?"Provided":"None specified"}
+          </T>
+        </S>
+
+        <S style={e.attributeRow}>
+          <T style={e.attributeLabel}>accessibilityRole:</T>
+          <T style={[e.attributeValue,!B&&{color:f.grayTextWeak,fontStyle:"italic"}]}>
+            {B||"None"}
+          </T>
+        </S>
+
+        {z&&<S style={e.attributeRow}>
+            <T style={e.attributeLabel}>accessibilityHint:</T>
+            <T style={e.attributeValue}>{z}</T>
+          </S>}
+      </S>
+
+      
+      {F.length>0&&<S style={[e.card,e.issuesCard]}>
+          <S style={e.issuesHeader}>
+            <P color="#D97706"size={16}/>
+            <T style={e.issuesTitle}>Recommendations ({F.length})</T>
+          </S>
+          {F.map((I,L)=><S key={L}style={e.issueItem}>
+              <T style={e.issueBullet}>•</T>
+              <T style={e.issueText}>{I}</T>
+            </S>)}
+        </S>}
+    </S>};const e=E.create({container:{gap:10,paddingVertical:4},card:{backgroundColor:f.white,borderRadius:12,padding:14,borderWidth:1,borderColor:f.grayBorderSecondary},cardHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:10},cardTitleRow:{flexDirection:"row",alignItems:"center",gap:8},cardTitle:{fontSize:14,fontFamily:x.semiBold,color:f.slate900},badge:{paddingHorizontal:8,paddingVertical:3,borderRadius:6},badgeSuccess:{backgroundColor:"#10B9811A",borderColor:"#10B98144",borderWidth:1},badgeWarning:{backgroundColor:"#F59E0B1A",borderColor:"#F59E0B44",borderWidth:1},badgeError:{backgroundColor:"#E11D481A",borderColor:"#E11D4844",borderWidth:1},badgeNeutral:{backgroundColor:f.slate100},badgeText:{fontSize:10,fontFamily:x.bold},badgeTextSuccess:{color:"#059669"},badgeTextWarning:{color:"#D97706"},badgeTextError:{color:"#E11D48"},badgeTextNeutral:{color:f.slate600},metricRow:{flexDirection:"row",gap:16},metricItem:{flex:1,backgroundColor:f.slate50,padding:10,borderRadius:8},metricLabel:{fontSize:11,fontFamily:x.medium,color:f.grayTextWeak,marginBottom:4},metricValue:{fontSize:13,fontFamily:x.semiBold,color:f.slate900},contrastPreview:{flexDirection:"row",alignItems:"center",gap:12},contrastSwatch:{paddingVertical:12,paddingHorizontal:16,borderRadius:8,borderWidth:1,borderColor:f.grayBorderSecondary},contrastSampleText:{fontSize:13,fontFamily:x.semiBold},contrastDetails:{flex:1},contrastRatioValue:{fontSize:16,fontFamily:x.bold,color:f.slate900},contrastSubtext:{fontSize:11,fontFamily:x.medium,color:f.grayTextWeak,marginTop:2},naSubtext:{fontSize:12,fontFamily:x.medium,color:f.grayTextWeak},attributeRow:{flexDirection:"row",justifyContent:"space-between",paddingVertical:6,borderBottomWidth:1,borderBottomColor:f.slate100},attributeLabel:{fontSize:12,fontFamily:x.medium,color:f.slate600},attributeValue:{fontSize:12,fontFamily:x.semiBold,color:f.slate900},issuesCard:{backgroundColor:"#FEF3C722",borderColor:"#F59E0B44"},issuesHeader:{flexDirection:"row",alignItems:"center",gap:6,marginBottom:8},issuesTitle:{fontSize:13,fontFamily:x.semiBold,color:"#D97706"},issueItem:{flexDirection:"row",alignItems:"flex-start",gap:6,marginVertical:3},issueBullet:{fontSize:12,color:"#D97706"},issueText:{fontSize:12,fontFamily:x.medium,color:f.slate700,flex:1,lineHeight:16}});

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const UiInspectorDetail: React.FC;