react-native-inapp-inspector 2.5.13 → 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/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.js

@@ -1,4 +1,4 @@
-import"react";import{StyleSheet as L,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:W})=>{const{hasValidTouchTarget:C,touchTargetWidth:R,touchTargetHeight:k,recommendedMinSize:h,contrastRatio:p,contrastScore:A,textColor:D,backgroundColor:V,hasAccessibilityLabel:w,accessibilityRole:B,accessibilityHint:z,issues:F}=W;return<S style={e.container}>
+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}>
@@ -17,7 +17,7 @@ import"react";import{StyleSheet as L,Text as T,View as S}from"react-native";impo
           <S style={e.metricItem}>
             <T style={e.metricLabel}>Actual Size</T>
             <T style={e.metricValue}>
-              {Math.round(R)} × {Math.round(k)} pt
+              {Math.round(W)} × {Math.round(k)} pt
             </T>
           </S>
           <S style={e.metricItem}>
@@ -89,9 +89,9 @@ import"react";import{StyleSheet as L,Text as T,View as S}from"react-native";impo
             <P color="#D97706"size={16}/>
             <T style={e.issuesTitle}>Recommendations ({F.length})</T>
           </S>
-          {F.map((I,E)=><S key={E}style={e.issueItem}>
+          {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=L.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}});
+    </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}});