react-native-inapp-inspector 2.3.24 → 2.3.25

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

@@ -1,170 +1,183 @@
-import Pe,{useCallback as Q,useMemo as O,useRef as Le,useState as X}from"react";import{FlatList as Fe,Platform as We,Pressable as Y,StyleSheet as He,Text as C,TextInput as De,TouchableOpacity as _,View as T}from"react-native";import{useTranslation as Oe}from"../../i18n";import{useInspector as Ee}from"./InspectorContext";import Me from"../TouchableScale";import $e from"../AnimatedEntrance";import Ne from"../EmptyState";import Ue from"../EndOfListFooter";import Te from"../HighlightText";import{getSize as we,openInVSCode as Ge}from"../../helpers";import B from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{getActionHistory as Ke,getReduxAutoRefresh as Ze,setReduxAutoRefresh as qe}from"../../customHooks/reduxLogger";import{TerminalIcon as Je,SearchIcon as Qe,ClearIcon as Xe,LayersIcon as Ye,ClockIcon as _e,ForwardChevronIcon as Tt,SortArrowIcon as Ct,BoltIcon as U,AtomIcon as St,ScreenIcon as At,ListenerIcon as Rt,DocIcon as Vt,LoadingSpinnerIcon as It,CircleAlertIcon as Bt,TextAaIcon as Pt,HeaderPauseIcon as Lt}from"../NetworkIcons";const Ce=E=>{switch(E){case"saga":return{label:"SAGA",renderIcon:(A,R=9)=><U color={A}size={R}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(A,R=9)=><St color={A}size={R}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(A,R=9)=><At color={A}size={R}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(A,R=9)=><Rt color={A}size={R}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(A,R=9)=><U color={A}size={R}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},vt=Pe.memo(()=>{const{t:E}=Oe(),{reduxState:A,reduxLastActionMap:R,reduxSearch:k,setReduxSearch:G,setSelectedReduxSlice:K}=Ee(),Se=Le(null),[P,Ae]=X("latest"),[D,ze]=X(!Ze()),Re=Q(()=>{ze(r=>{const z=!r;return qe(!z),z})},[]),ke=O(()=>we(A),[A]),Z=O(()=>Ke(),[R]),M=O(()=>!A||typeof A!="object"?[]:Object.keys(A).map(z=>{const o=A[z],I=Array.isArray(o),$=o&&typeof o=="object";let H="Primitive",L=0;I?(L=o.length,H=`Array [${L}]`):$?(L=Object.keys(o).length,H=`Object {${L}}`):typeof o<"u"&&(L=1,H=typeof o);let j="live",N;$&&(o.loading===!0||o.isLoading===!0||o.status==="loading"||o.status==="pending"?(j="loading",N="Loading"):o.error||o.hasError||o.status==="error"||o.status==="failed"?(j="error",N=typeof o.error=="string"?o.error:"Error"):L===0&&(j="empty",N="Empty"));const V=R[z],Ie=V?.updatedAt||0,Be=Z.filter(v=>!v.affectedSlices||v.affectedSlices.length===0?!0:v.affectedSlices.includes(z)).length;let q;if(V){let v;if(V.payload!==void 0&&V.payload!==null)try{if(typeof V.payload=="object"){const J=Object.keys(V.payload);v=`{ ${J.slice(0,3).join(", ")}${J.length>3?"...":""} }`}else v=String(V.payload)}catch{}q={type:V.type,timestamp:V.timestamp,updatedAt:V.updatedAt,payloadPreview:v,originType:V.originType,callerFile:V.callerFile,callerLine:V.callerLine,callerCol:V.callerCol}}return{id:`slice-${z}`,name:z,keysCount:L,sizeStr:we(o),typeLabel:H,status:j,statusMessage:N,timelineCount:Be,lastAction:q,updatedAt:Ie}}),[A,R,Z]),F=O(()=>{let r=M;if(k&&k.trim().length>0){const z=k.trim().toLowerCase().split(/\s+/).filter(Boolean);r=r.filter(o=>{const I=A?A[o.name]:null,$=[o.name||"",o.lastAction?.type||"",o.lastAction?.payloadPreview||"",o.lastAction?.originType||"",o.status||"",o.statusMessage||"",I?typeof I=="string"?I:JSON.stringify(I):""].join(" ").toLowerCase();return z.every(H=>$.includes(H))})}return[...r].sort((z,o)=>P==="latest"&&o.updatedAt!==z.updatedAt?o.updatedAt-z.updatedAt:z.name.localeCompare(o.name))},[M,k,P,A]),W=O(()=>{const r=Object.values(R);return r.length===0?null:r.reduce((z,o)=>z?(o.updatedAt||0)>(z.updatedAt||0)?o:z:o,null)},[R]),Ve=Q(({item:r,index:z})=>{const o=r.updatedAt>0&&Date.now()-r.updatedAt<5e3;return<$e index={z}distance={8}>
-          <Me onPress={()=>{K(r.name)}}style={[t.card,o&&t.cardRecentlyUpdated]}>
-            
-            <T style={t.cardHeader}>
-              <T style={t.sliceBadge}>
-                <C style={t.sliceBadgeText}>SLICE</C>
-              </T>
+import Fe,{useCallback as ee,useMemo as N,useRef as We,useState as q}from"react";import{FlatList as Oe,Platform as te,Pressable as Ce,StyleSheet as Ee,Text as R,TextInput as Me,TouchableOpacity as Te,View as C}from"react-native";import{useTranslation as Ne}from"../../i18n";import{useInspector as $e}from"./InspectorContext";import Ue from"../TouchableScale";import Ge from"../AnimatedEntrance";import Ke from"../EmptyState";import Ze from"../EndOfListFooter";import Se from"../HighlightText";import{getSize as Re,openInVSCode as qe,getCleanCallerDisplay as Je}from"../../helpers";import F from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{getActionHistory as Qe,getReduxAutoRefresh as Xe,setReduxAutoRefresh as _e}from"../../customHooks/reduxLogger";import{TerminalIcon as Ie,SearchIcon as Ye,ClearIcon as Ct,LayersIcon as Tt,ClockIcon as St,SizeIcon as Rt,ForwardChevronIcon as It,SortArrowIcon as At,BoltIcon as G,AtomIcon as Vt,ScreenIcon as Bt,ListenerIcon as Ht,DocIcon as Lt,LoadingSpinnerIcon as Pt,CircleAlertIcon as Dt,TextAaIcon as Ft,HeaderPauseIcon as Wt}from"../NetworkIcons";const ke=L=>{switch(L){case"saga":return{label:"SAGA",renderIcon:(I,z=9)=><G color={I}size={z}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(I,z=9)=><Vt color={I}size={z}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(I,z=9)=><Bt color={I}size={z}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(I,z=9)=><Ht color={I}size={z}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(I,z=9)=><G color={I}size={z}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Ot=Fe.memo(()=>{const{t:L}=Ne(),{reduxState:I,reduxLastActionMap:z,reduxSearch:A,setReduxSearch:K,setSelectedReduxSlice:J}=$e(),ze=We(null),[Q,Ae]=q(100),[W,Ve]=q("latest"),[$,Be]=q(!Xe()),ve=ee(()=>{Be(t=>{const S=!t;return _e(!S),S})},[]),He=N(()=>Re(I),[I]),X=N(()=>Qe(),[z]),U=N(()=>!I||typeof I!="object"?[]:Object.keys(I).map(S=>{const T=I[S],v=Array.isArray(T),M=T&&typeof T=="object";let D="Primitive",H=0;v?(H=T.length,D=`Array [${H}]`):M?(H=Object.keys(T).length,D=`Object {${H}}`):typeof T<"u"&&(H=1,D=typeof T);let O="live",B;M&&(T.loading===!0||T.isLoading===!0||T.status==="loading"||T.status==="pending"?(O="loading",B="Loading"):T.error||T.hasError||T.status==="error"||T.status==="failed"?(O="error",B=typeof T.error=="string"?T.error:"Error"):H===0&&(O="empty",B="Empty"));const V=z[S],Pe=V?.updatedAt||0,De=X.filter(E=>!E.affectedSlices||E.affectedSlices.length===0?!0:E.affectedSlices.includes(S)).length;let _;if(V){let E;if(V.payload!==void 0&&V.payload!==null)try{if(typeof V.payload=="object"){const Y=Object.keys(V.payload);E=`{ ${Y.slice(0,3).join(", ")}${Y.length>3?"...":""} }`}else E=String(V.payload)}catch{}_={type:V.type,timestamp:V.timestamp,updatedAt:V.updatedAt,payloadPreview:E,originType:V.originType,callerFile:V.callerFile,callerLine:V.callerLine,callerCol:V.callerCol}}return{id:`slice-${S}`,name:S,keysCount:H,sizeStr:Re(T),typeLabel:D,status:O,statusMessage:B,timelineCount:De,lastAction:_,updatedAt:Pe}}),[I,z,X]),P=N(()=>{let t=U;if(A&&A.trim().length>0){const S=A.trim().toLowerCase().split(/\s+/).filter(Boolean);t=t.filter(T=>{const v=I?I[T.name]:null,M=[T.name||"",T.lastAction?.type||"",T.lastAction?.payloadPreview||"",T.lastAction?.originType||"",T.status||"",T.statusMessage||"",v?typeof v=="string"?v:JSON.stringify(v):""].join(" ").toLowerCase();return S.every(D=>M.includes(D))})}return[...t].sort((S,T)=>W==="latest"&&T.updatedAt!==S.updatedAt?T.updatedAt-S.updatedAt:S.name.localeCompare(T.name))},[U,A,W,I]),Z=N(()=>P.slice(0,Q),[P,Q]),j=N(()=>{const t=Object.values(z);return t.length===0?null:t.reduce((S,T)=>S?(T.updatedAt||0)>(S.updatedAt||0)?T:S:T,null)},[z]),Le=ee(({item:t,index:S})=>{const T=t.updatedAt>0&&Date.now()-t.updatedAt<5e3,v=t.status==="error"?e.errorColor:t.status==="loading"?e.warningIconGold:t.status==="empty"?e.grayTextWeak:e.greenColor,M=t.status==="error"?e.red100:t.status==="loading"?e.amber100:t.status==="empty"?e.grayBackground:e.emeraldBg,D=t.status==="error"?e.errorBorder:t.status==="loading"?e.amber200:t.status==="empty"?e.dividerColor:e.emeraldBorder,H=t.status==="error"?e.red600:t.status==="loading"?e.amber800Warm:t.status==="empty"?e.grayTextWeak:e.emerald700,O=t.lastAction?.callerFile?Je(t.lastAction.callerFile):null;return<Ge index={S}distance={8}>
+          <C style={r.cardContainer}>
+            <Ue onPress={()=>{J(t.name)}}style={[r.card,{borderLeftWidth:3.5,borderLeftColor:v,backgroundColor:t.status==="error"?e.errorCardBg:e.white},T&&r.cardRecentlyUpdated]}>
+              <C style={r.cardBody}>
+                
+                <C style={r.cardHeaderRow}>
+                  <C style={r.cardHeaderLeft}>
+                    <R style={r.serialNumber}>#{S+1}</R>
+                    <C style={[r.methodBadge,{backgroundColor:e.violet600}]}>
+                      <R style={r.methodBadgeText}>REDUX</R>
+                    </C>
+                    <C style={[r.chip,{backgroundColor:`${e.violet600}14`,borderColor:`${e.violet600}2E`}]}>
+                      <R style={[r.chipText,{color:e.violet600}]}>
+                        {t.typeLabel.toUpperCase()}
+                      </R>
+                    </C>
 
-              <Te text={r.name}search={k}style={t.sliceName}highlightStyle={t.highlight}/>
-
-              
-              {r.status==="loading"?<T style={t.loadingPill}>
-                  <It color={e.amber800Warm}size={10}/>
-                  <C style={t.loadingPillText}>Loading</C>
-                </T>:r.status==="error"?<T style={t.errorPill}>
-                  <Bt color={e.red600}size={10}/>
-                  <C style={t.errorPillText}>Error</C>
-                </T>:r.status==="empty"?<T style={t.emptyPill}>
-                  <C style={t.emptyPillText}>Empty</C>
-                </T>:<T style={t.livePill}>
-                  <T style={t.liveDot}/>
-                  <C style={t.livePillText}>Live</C>
-                </T>}
-
-              {r.lastAction?.timestamp&&<T style={t.timePill}>
-                  <_e color={e.purple}size={10}/>
-                  <C style={t.timeText}>
-                    {r.lastAction.timestamp}
+                    {t.lastAction?.originType&&(()=>{const B=ke(t.lastAction.originType);return<C style={[r.chip,{backgroundColor:B.bg,borderColor:B.border}]}>
+                          {B.renderIcon(B.text,8.5)}
+                          <R style={[r.chipText,{color:B.text}]}>
+                            {B.label}
+                          </R>
+                        </C>})()}
                   </C>
-                </T>}
 
-              <Tt color={e.grayTextWeak}size={13}/>
-            </T>
-
-            
-            <T style={t.statsRow}>
-              <T style={t.pill}>
-                <Ye color={e.grayTextWeak}size={11}/>
-                <C style={t.pillValue}>{r.typeLabel}</C>
-              </T>
-              <T style={t.pill}>
-                <C style={t.pillLabel}>Size:</C>
-                <C style={t.pillValue}>{r.sizeStr}</C>
-              </T>
-              {r.timelineCount>0&&<T style={t.pill}>
-                  <C style={t.pillLabel}>Actions:</C>
-                  <C style={t.pillValue}>{r.timelineCount}</C>
-                </T>}
-            </T>
-
-            
-            {r.lastAction&&<T style={t.lastActionRow}>
-                <T style={{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0,flexWrap:"wrap"}}>
-                  <U color={e.brandPurple}size={12}/>
-                  <C style={t.lastActionLabel}>{E("redux.last","Last")}:</C>
+                  <C style={r.cardHeaderRight}>
+                    <C style={[r.statusPill,{backgroundColor:M,borderColor:D}]}>
+                      {t.status==="loading"?<Pt color={e.amber800Warm}size={10}/>:t.status==="error"?<Dt color={e.red600}size={10}/>:t.status==="empty"?null:<C style={r.liveDot}/>}
+                      <R style={[r.statusPillText,{color:H}]}>
+                        {t.status==="loading"?"Loading":t.status==="error"?t.statusMessage||"Error":t.status==="empty"?"Empty":"Live"}
+                      </R>
+                    </C>
+                    <It color={e.grayTextWeak}size={13}/>
+                  </C>
+                </C>
 
-                  
-                  {r.lastAction.originType&&(()=>{const I=Ce(r.lastAction.originType);return<T style={{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:I.bg,paddingHorizontal:4.5,paddingVertical:1.5,borderRadius:3.5,borderWidth:1,borderColor:I.border}}>
-                        {I.renderIcon(I.text,8.5)}
-                        <C style={{fontFamily:S.interBold,fontSize:8,color:I.text,letterSpacing:.3}}>
-                          {I.label}
-                        </C>
-                      </T>})()}
+                
+                <C style={r.cardMainRow}>
+                  <C style={r.sliceNameRow}>
+                    <Se text={t.name}search={A}style={r.sliceNameText}highlightStyle={r.highlight}numberOfLines={1}/>
+                    {t.timelineCount>0&&<C style={r.actionCountChip}>
+                        <G color={e.violet600}size={9}/>
+                        <R style={r.actionCountChipText}>
+                          {t.timelineCount}
+                        </R>
+                      </C>}
+                  </C>
+                  <C style={r.actionPreviewRow}>
+                    <Ie color={e.grayTextWeak}size={10}/>
+                    {t.lastAction?<Se text={t.lastAction.type+(t.lastAction.payloadPreview?` \xB7 ${t.lastAction.payloadPreview}`:"")}search={A}style={r.actionPreviewText}highlightStyle={r.highlight}numberOfLines={1}/>:<R style={r.actionPreviewEmptyText}numberOfLines={1}>
+                        Initial state (no actions dispatched yet)
+                      </R>}
+                  </C>
+                </C>
 
-                  <Te text={r.lastAction.type}search={k}style={t.lastActionValue}highlightStyle={t.highlight}numberOfLines={1}/>
+                
+                <C style={r.cardFooterRow}>
+                  <C style={r.footerLeft}>
+                    <St color={e.grayTextWeak}size={10}/>
+                    <R style={r.footerTimestampText}numberOfLines={1}>
+                      {t.lastAction?.timestamp||"Initial state"}
+                    </R>
+                    {O&&<Ce onPress={()=>qe(t.lastAction.callerFile,t.lastAction.callerLine,t.lastAction.callerCol)}hitSlop={6}style={r.callerChip}>
+                        <Lt color={e.sky600}size={9}/>
+                        <R style={r.callerChipText}>
+                          {O.display}
+                        </R>
+                      </Ce>}
+                  </C>
 
-                  
-                  {r.lastAction.callerFile&&<Y onPress={()=>Ge(r.lastAction.callerFile,r.lastAction.callerLine,r.lastAction.callerCol)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.sky100,paddingHorizontal:4.5,paddingVertical:1.5,borderRadius:3,borderWidth:.5,borderColor:e.sky400}}>
-                      <Vt color={e.sky600}size={9}/>
-                      <C style={{fontFamily:S.interMedium,fontSize:8.5,color:e.sky600}}>
-                        {r.lastAction.callerFile.split("/").pop()}:{r.lastAction.callerLine||1}
-                      </C>
-                    </Y>}
+                  <C style={r.footerRight}>
+                    <C style={r.metaStatChip}>
+                      <Rt color={e.violet600}size={9.5}/>
+                      <R style={r.metaStatText}>
+                        {t.sizeStr}
+                      </R>
+                    </C>
+                    <C style={r.metaStatChip}>
+                      <Tt color={e.violet600}size={9.5}/>
+                      <R style={r.metaStatText}>
+                        {t.keysCount} keys
+                      </R>
+                    </C>
+                  </C>
+                </C>
+              </C>
 
-                  {r.lastAction.payloadPreview&&<C style={t.payloadPreviewText}numberOfLines={1}>
-                      {r.lastAction.payloadPreview}
-                    </C>}
-                </T>
-              </T>}
-          </Me>
-        </$e>},[k,K,E]);return A?<T style={{flex:1,backgroundColor:e.grayBackground}}>
+              
+              <C style={r.waterfallContainer}>
+                <C style={[r.waterfallBar,{backgroundColor:v,width:T?"100%":"35%"}]}/>
+              </C>
+            </Ue>
+          </C>
+        </Ge>},[A,J]);return I?<C style={{flex:1,backgroundColor:e.grayBackground}}>
       
-      <T style={t.overviewCard}>
-        <T style={t.statCol}>
-          <C style={t.statHeading}>ACTIVE SLICES</C>
-          <C style={t.statBigVal}>{M.length}</C>
-        </T>
-        <T style={t.statDivider}/>
-        <T style={t.statCol}>
-          <C style={t.statHeading}>TOTAL STATE</C>
-          <C style={t.statBigVal}>{ke}</C>
-        </T>
-        <T style={t.statDivider}/>
-        <T style={[t.statCol,{flex:1.6}]}>
-          <T style={{flexDirection:"row",alignItems:"center",gap:4}}>
-            <C style={t.statHeading}>LAST ACTION</C>
-            {W?.originType&&(()=>{const r=Ce(W.originType);return<T style={{flexDirection:"row",alignItems:"center",gap:2,backgroundColor:r.bg,paddingHorizontal:4,paddingVertical:1,borderRadius:3}}>
-                  {r.renderIcon(r.text,8)}
-                  <C style={{fontFamily:S.interBold,fontSize:7.5,color:r.text}}>
-                    {r.label}
-                  </C>
-                </T>})()}
-          </T>
-          <C style={t.statLastAction}numberOfLines={1}>
-            {W?W.type:"Initial"}
+      <C style={r.overviewCard}>
+        <C style={r.statCol}>
+          <R style={r.statHeading}>{L("redux.activeSlices","ACTIVE SLICES")}</R>
+          <R style={r.statBigVal}>{U.length}</R>
+        </C>
+        <C style={r.statDivider}/>
+        <C style={r.statCol}>
+          <R style={r.statHeading}>{L("redux.totalState","TOTAL STATE")}</R>
+          <R style={r.statBigVal}>{He}</R>
+        </C>
+        <C style={r.statDivider}/>
+        <C style={[r.statCol,{flex:1.6}]}>
+          <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+            <R style={r.statHeading}>{L("redux.lastActionHeader","LAST ACTION")}</R>
+            {j?.originType&&(()=>{const t=ke(j.originType);return<C style={{flexDirection:"row",alignItems:"center",gap:2,backgroundColor:t.bg,paddingHorizontal:4,paddingVertical:1,borderRadius:3}}>
+                  {t.renderIcon(t.text,8)}
+                  <R style={{fontFamily:k.interBold,fontSize:7.5,color:t.text}}>
+                    {t.label}
+                  </R>
+                </C>})()}
           </C>
-          {W?.timestamp&&<C style={t.statLastTime}>
-              {W.timestamp}
-            </C>}
-        </T>
-      </T>
+          <R style={r.statLastAction}numberOfLines={1}>
+            {j?j.type:"Initial"}
+          </R>
+          {j?.timestamp&&<R style={r.statLastTime}>
+              {j.timestamp}
+            </R>}
+        </C>
+      </C>
 
       
-      <T style={t.toolbarContainer}>
-        <T style={t.searchRow}>
-          <T style={B.searchContainer}>
-            <Qe color={e.grayTextWeak}size={15}/>
-            <De accessible={!0}accessibilityRole="search"accessibilityLabel="Search Redux slices or actions"accessibilityHint="Type to filter state slices in real time"placeholder="Search Redux slices or actions..."placeholderTextColor={e.grayTextWeak}value={k}onChangeText={G}style={B.searchInput}autoCorrect={!1}autoCapitalize="none"/>
-            {k.length>0&&<T style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                <T style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
-                  <C style={{color:e.purple,fontSize:9.5,fontFamily:S.interBold}}>
-                    {F.length}
-                  </C>
-                </T>
-                <Y accessible={!0}accessibilityRole="button"accessibilityLabel="Clear search input"onPress={()=>G("")}hitSlop={10}>
-                  <Xe color={e.grayTextWeak}size={14}/>
-                </Y>
-              </T>}
-          </T>
+      <C style={r.toolbarContainer}>
+        <C style={r.searchRow}>
+          <C style={F.searchContainer}>
+            <Ye color={e.grayTextWeak}size={15}/>
+            <Me accessible={!0}accessibilityRole="search"accessibilityLabel="Search Redux slices or actions"accessibilityHint="Type to filter state slices in real time"placeholder={L("redux.searchPlaceholder","Search state or actions...")}placeholderTextColor={e.grayTextWeak}value={A}onChangeText={K}style={F.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            {A.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                <C style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                  <R style={{color:e.purple,fontSize:9.5,fontFamily:k.interBold}}>
+                    {P.length}
+                  </R>
+                </C>
+                <Ce accessible={!0}accessibilityRole="button"accessibilityLabel="Clear search input"onPress={()=>K("")}hitSlop={10}>
+                  <Ct color={e.grayTextWeak}size={14}/>
+                </Ce>
+              </C>}
+          </C>
 
           
-          <_ accessible={!0}accessibilityRole="button"accessibilityLabel={D?"Resume live Redux updates":"Pause live Redux updates"}accessibilityHint="Toggles automatic recording of Redux state updates"style={[B.toolbarBtn,D&&{backgroundColor:`${e.darkOrange}1F`,borderColor:e.darkOrange}]}onPress={Re}hitSlop={6}>
-            <Lt isPaused={D}color={D?e.darkOrange:e.grayTextStrong}size={16}/>
-          </_>
+          <Te accessible={!0}accessibilityRole="button"accessibilityLabel={$?"Resume live Redux updates":"Pause live Redux updates"}accessibilityHint="Toggles automatic recording of Redux state updates"style={[F.toolbarBtn,$&&{backgroundColor:`${e.darkOrange}1F`,borderColor:e.darkOrange}]}onPress={ve}hitSlop={6}>
+            <Wt isPaused={$}color={$?e.darkOrange:e.grayTextStrong}size={16}/>
+          </Te>
 
           
-          <_ accessible={!0}accessibilityRole="button"accessibilityLabel={`Sort order: ${P==="latest"?"Recently updated first":"Alphabetical A to Z"}`}accessibilityHint="Switches sorting between recently updated and alphabetical"style={[B.toolbarBtn,P==="latest"&&{backgroundColor:`${e.brandPurple}1F`,borderColor:e.brandPurple}]}onPress={()=>Ae(r=>r==="latest"?"alpha":"latest")}hitSlop={6}>
-            <Ct color={P==="latest"?e.brandPurple:e.grayTextStrong}size={16}/>
-          </_>
-        </T>
+          <Te accessible={!0}accessibilityRole="button"accessibilityLabel={`Sort order: ${W==="latest"?"Recently updated first":"Alphabetical A to Z"}`}accessibilityHint="Switches sorting between recently updated and alphabetical"style={[F.toolbarBtn,W==="latest"&&{backgroundColor:`${e.brandPurple}1F`,borderColor:e.brandPurple}]}onPress={()=>Ve(t=>t==="latest"?"alpha":"latest")}hitSlop={6}>
+            <At color={W==="latest"?e.brandPurple:e.grayTextStrong}size={16}/>
+          </Te>
+        </C>
 
-        <T style={t.headerSubRow}>
-          <C style={t.resultCount}>
-            Showing {F.length} of {M.length} state slices
+        <C style={r.headerSubRow}>
+          <R style={r.resultCount}>
+            Showing {P.length} of {U.length} state slices
+          </R>
+          <C style={{flexDirection:"row",alignItems:"center",gap:8}}>
+            {$&&<C style={r.pausedBannerPill}>
+                <R style={r.pausedBannerText}>PAUSED</R>
+              </C>}
+            <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+              {W==="latest"?<G color={e.brandPurple}size={11}/>:<Ft color={e.brandPurple}size={11}/>}
+              <R style={r.sortLabel}>
+                {W==="latest"?"Newest Updates First":"Alphabetical (A-Z)"}
+              </R>
+            </C>
           </C>
-          <T style={{flexDirection:"row",alignItems:"center",gap:8}}>
-            {D&&<T style={t.pausedBannerPill}>
-                <C style={t.pausedBannerText}>PAUSED</C>
-              </T>}
-            <T style={{flexDirection:"row",alignItems:"center",gap:4}}>
-              {P==="latest"?<U color={e.brandPurple}size={11}/>:<Pt color={e.brandPurple}size={11}/>}
-              <C style={t.sortLabel}>
-                {P==="latest"?"Newest Updates First":"Alphabetical (A-Z)"}
-              </C>
-            </T>
-          </T>
-        </T>
-      </T>
+        </C>
+      </C>
 
       
-      <Fe ref={Se}data={F}keyExtractor={r=>r.id}renderItem={Ve}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={We.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ne isSearch={k.trim().length>0}searchQuery={k}onClearSearch={()=>G("")}customTitle={k.trim().length>0?"No Matching Slices":"No Redux State Detected"}customSub={k.trim().length>0?`No Redux slices match "${k}"`:"Attach the Redux store or dispatch actions to see state slices."}/>}ListFooterComponent={F.length>0?<Ue count={F.length}label="slices"/>:null}contentContainerStyle={[t.listContent,F.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
-    </T>:<T style={B.emptyContainer}>
-        <T style={B.emptyIconWrap}>
-          <Je color={e.purple}size={32}/>
-        </T>
-        <C style={B.emptyTitle}>No Redux Store Connected</C>
-        <C style={B.emptySub}>
-          Call connectReduxStore(store) or use inspectorReduxMiddleware at app initialization.
+      <Oe ref={ze}data={Z}keyExtractor={t=>t.id}renderItem={Le}getItemLayout={(t,S)=>({length:126,offset:126*S,index:S})}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={te.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ke isSearch={A.trim().length>0}searchQuery={A}onClearSearch={()=>K("")}customTitle={A.trim().length>0?"No Matching Slices":"No Redux State Detected"}customSub={A.trim().length>0?`No Redux slices match "${A}"`:"Attach the Redux store or dispatch actions to see state slices."}/>}ListFooterComponent={P.length>0?<Ze count={Z.length}totalCount={P.length}label="slices"hasMore={Z.length<P.length}onLoadMore={()=>Ae(t=>t+10)}/>:null}contentContainerStyle={[r.listContent,P.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+    </C>:<C style={F.emptyContainer}>
+        <C style={F.emptyIconWrap}>
+          <Ie color={e.purple}size={32}/>
         </C>
-      </T>}),t=He.create({overviewCard:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,marginHorizontal:12,marginTop:10,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},statCol:{flex:1},statDivider:{width:1,height:28,backgroundColor:e.dividerColor,marginHorizontal:8},statHeading:{fontFamily:S.interBold,fontSize:9,color:e.grayTextWeak,letterSpacing:.5},statBigVal:{fontFamily:S.interBold,fontSize:14,color:e.primaryBlack,marginTop:2},statLastAction:{fontFamily:S.interBold,fontSize:11,color:e.purple,marginTop:2},statLastTime:{fontFamily:S.interRegular,fontSize:9.5,color:e.grayTextWeak},toolbarContainer:{backgroundColor:e.white,borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingHorizontal:12,paddingTop:8,paddingBottom:6,marginTop:8},searchRow:{flexDirection:"row",alignItems:"center",gap:8},headerSubRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:6,paddingHorizontal:2},resultCount:{fontFamily:S.interMedium,fontSize:11,color:e.grayTextWeak},sortLabel:{fontFamily:S.interMedium,fontSize:10.5,color:e.brandPurple},listContent:{padding:12,paddingBottom:36},card:{backgroundColor:e.white,borderRadius:12,padding:12,marginBottom:10,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:4,elevation:2},cardRecentlyUpdated:{borderColor:`${e.brandPurple}66`,backgroundColor:e.purpleTintBg},cardHeader:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},sliceBadge:{backgroundColor:e.violetSoftBg,paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.violetSoftBorder},sliceBadgeText:{fontFamily:S.interBold,fontSize:9.5,color:e.purple700,letterSpacing:.4},sliceName:{flex:1,fontFamily:S.interBold,fontSize:13.5,color:e.primaryBlack},timePill:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.purple}14`,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:`${e.purple}2E`},timeText:{fontFamily:S.interMedium,fontSize:10,color:e.purple},statsRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",marginBottom:6},pill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.grayBackground,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.dividerColor},pillLabel:{fontFamily:S.interMedium,fontSize:10.5,color:e.grayTextWeak},pillValue:{fontFamily:S.interBold,fontSize:10.5,color:e.primaryBlack},livePill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.emeraldBg,paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.emeraldBorder},liveDot:{width:6,height:6,borderRadius:3,backgroundColor:e.emerald500},livePillText:{fontFamily:S.interBold,fontSize:10,color:e.emerald700},loadingPill:{backgroundColor:e.amber100,paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.amber200},loadingPillText:{fontFamily:S.interBold,fontSize:9.5,color:e.amber800Warm},errorPill:{backgroundColor:e.red100,paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.errorBorder},errorPillText:{fontFamily:S.interBold,fontSize:9.5,color:e.red600},emptyPill:{backgroundColor:e.grayBackground,paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.dividerColor},emptyPillText:{fontFamily:S.interMedium,fontSize:9.5,color:e.grayTextWeak},lastActionRow:{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:e.grayBackground,borderRadius:6,paddingHorizontal:8,paddingVertical:5,marginTop:4,borderWidth:1,borderColor:e.dividerColor},lastActionLabel:{fontFamily:S.interMedium,fontSize:10.5,color:e.grayTextWeak},lastActionValue:{fontFamily:S.interBold,fontSize:11,color:e.primaryBlack},payloadPreviewText:{flex:1,fontFamily:S.interRegular,fontSize:10,color:e.grayTextWeak,marginLeft:4},highlight:{backgroundColor:e.yellow200,color:e.yellow800,fontFamily:S.interBold},pausedBannerPill:{backgroundColor:e.amber100,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.amber200},pausedBannerText:{fontFamily:S.interBold,fontSize:9,color:e.amber800Warm,letterSpacing:.5}});export default vt;
+        <R style={F.emptyTitle}>{L("redux.noStoreConnected","No Redux Store Connected")}</R>
+        <R style={F.emptySub}>
+          {L("redux.connectStoreTip","Call connectReduxStore(store) or use inspectorReduxMiddleware at app initialization.")}
+        </R>
+      </C>}),r=Ee.create({overviewCard:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,marginHorizontal:12,marginTop:10,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},statCol:{flex:1},statDivider:{width:1,height:28,backgroundColor:e.dividerColor,marginHorizontal:8},statHeading:{fontFamily:k.interBold,fontSize:9,color:e.grayTextWeak,letterSpacing:.5},statBigVal:{fontFamily:k.interBold,fontSize:14,color:e.primaryBlack,marginTop:2},statLastAction:{fontFamily:k.interBold,fontSize:11,color:e.purple,marginTop:2},statLastTime:{fontFamily:k.interRegular,fontSize:9.5,color:e.grayTextWeak},toolbarContainer:{backgroundColor:e.white,borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingHorizontal:12,paddingTop:8,paddingBottom:6,marginTop:8},searchRow:{flexDirection:"row",alignItems:"center",gap:8},headerSubRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:6,paddingHorizontal:2},resultCount:{fontFamily:k.interMedium,fontSize:11,color:e.grayTextWeak},sortLabel:{fontFamily:k.interMedium,fontSize:10.5,color:e.brandPurple},listContent:{paddingVertical:8,paddingBottom:36},cardContainer:{paddingHorizontal:10,paddingVertical:4,height:126},card:{backgroundColor:e.white,borderRadius:10,borderWidth:1,borderColor:e.grayBorderSecondary,shadowColor:e.shadowColorString,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:2.5,elevation:1.5,height:118,overflow:"hidden"},cardRecentlyUpdated:{borderColor:`${e.brandPurple}66`,backgroundColor:e.purpleTintBg},cardBody:{paddingHorizontal:12,paddingTop:9,paddingBottom:7,flex:1,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22,gap:6},cardHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6,flex:1,minWidth:0},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},serialNumber:{fontFamily:k.interBold,fontSize:10.5,lineHeight:13,color:e.grayTextWeak},methodBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:4,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:k.interBold,color:e.white,fontSize:9,lineHeight:12,letterSpacing:.4},chip:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:k.interBold,fontSize:8.5,lineHeight:11,letterSpacing:.3},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},liveDot:{width:6,height:6,borderRadius:3,backgroundColor:e.emerald500},statusPillText:{fontFamily:k.interBold,fontSize:9.5,lineHeight:12},cardMainRow:{height:48,minHeight:48,maxHeight:48,justifyContent:"space-between",gap:3},sliceNameRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6},sliceNameText:{fontFamily:k.interBold,fontSize:12.5,lineHeight:16,color:e.primaryBlack,flex:1},actionCountChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:`${e.violet600}14`,borderColor:`${e.violet600}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},actionCountChipText:{fontFamily:k.interBold,fontSize:8.5,lineHeight:11,color:e.violet600},actionPreviewRow:{flexDirection:"row",alignItems:"center",gap:4.5,minHeight:15},actionPreviewText:{fontFamily:te.select({ios:"Menlo",default:"monospace"}),fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},actionPreviewEmptyText:{fontFamily:k.interRegular,fontSize:10,lineHeight:13,color:e.slate400,fontStyle:"italic",flex:1},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0},footerTimestampText:{fontFamily:k.interRegular,fontSize:10,lineHeight:13,color:e.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.sky100,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3,borderWidth:.5,borderColor:e.sky400,marginLeft:4},callerChipText:{fontFamily:k.interMedium,fontSize:8.5,lineHeight:11,color:e.sky600},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.violetSoftBg,borderColor:e.violetSoftBorder,borderWidth:1,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:k.interBold,color:e.violetSoftText,fontSize:9,lineHeight:12},waterfallContainer:{height:2.5,width:"100%",backgroundColor:e.graySurface,borderRadius:1.5,overflow:"hidden"},waterfallBar:{height:"100%",borderRadius:1.5},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2},pausedBannerPill:{backgroundColor:e.amber100,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.amber200},pausedBannerText:{fontFamily:k.interBold,fontSize:9,color:e.amber800Warm,letterSpacing:.5}});export default Ot;