react-native-inapp-inspector 2.3.24 → 2.4.0

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

@@ -1,170 +1,173 @@
-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 Le,{useCallback as Pe,useMemo as N,useRef as De,useState as _}from"react";import{FlatList as Fe,Platform as Y,Pressable as Ce,StyleSheet as We,Text as S,TextInput as Oe,TouchableOpacity as Ee,View as C}from"react-native";import{useTranslation as je}from"../../i18n";import{useInspector as Me}from"./InspectorContext";import Ne from"../TouchableScale";import $e from"../AnimatedEntrance";import Ue from"../EmptyState";import Ge from"../EndOfListFooter";import Te from"../HighlightText";import{getSize as Se,openInVSCode as Ke,getCleanCallerDisplay as Ze}from"../../helpers";import E from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as z}from"../../styles/AppFonts";import{getActionHistory as qe}from"../../customHooks/reduxLogger";import{TerminalIcon as Ie,SearchIcon as Je,ClearIcon as Qe,LayersIcon as Xe,ClockIcon as _e,SizeIcon as Ye,ForwardChevronIcon as Ct,SortArrowIcon as Tt,BoltIcon as U,AtomIcon as St,ScreenIcon as It,ListenerIcon as Rt,DocIcon as At,LoadingSpinnerIcon as Vt,CircleAlertIcon as Ht,TextAaIcon as Bt}from"../NetworkIcons";const Re=L=>{switch(L){case"saga":return{label:"SAGA",renderIcon:(R,A=9)=><U color={R}size={A}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(R,A=9)=><St color={R}size={A}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(R,A=9)=><It color={R}size={A}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(R,A=9)=><Rt color={R}size={A}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(R,A=9)=><U color={R}size={A}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Lt=Le.memo(()=>{const{t:L}=je(),{reduxState:R,reduxLastActionMap:A,reduxSearch:k,setReduxSearch:G,setSelectedReduxSlice:Z}=Me(),ze=De(null),[q,Ae]=_(100),[F,ke]=_("latest"),Ve=N(()=>Se(R),[R]),J=N(()=>qe(),[A]),$=N(()=>!R||typeof R!="object"?[]:Object.keys(R).map(I=>{const T=R[I],H=Array.isArray(T),M=T&&typeof T=="object";let D="Primitive",B=0;H?(B=T.length,D=`Array [${B}]`):M?(B=Object.keys(T).length,D=`Object {${B}}`):typeof T<"u"&&(B=1,D=typeof T);let W="live",v;M&&(T.loading===!0||T.isLoading===!0||T.status==="loading"||T.status==="pending"?(W="loading",v="Loading"):T.error||T.hasError||T.status==="error"||T.status==="failed"?(W="error",v=typeof T.error=="string"?T.error:"Error"):B===0&&(W="empty",v="Empty"));const V=A[I],He=V?.updatedAt||0,Be=J.filter(O=>!O.affectedSlices||O.affectedSlices.length===0?!0:O.affectedSlices.includes(I)).length;let Q;if(V){let O;if(V.payload!==void 0&&V.payload!==null)try{if(typeof V.payload=="object"){const X=Object.keys(V.payload);O=`{ ${X.slice(0,3).join(", ")}${X.length>3?"...":""} }`}else O=String(V.payload)}catch{}Q={type:V.type,timestamp:V.timestamp,updatedAt:V.updatedAt,payloadPreview:O,originType:V.originType,callerFile:V.callerFile,callerLine:V.callerLine,callerCol:V.callerCol}}return{id:`slice-${I}`,name:I,keysCount:B,sizeStr:Se(T),typeLabel:D,status:W,statusMessage:v,timelineCount:Be,lastAction:Q,updatedAt:He}}),[R,A,J]),P=N(()=>{let t=$;if(k&&k.trim().length>0){const I=k.trim().toLowerCase().split(/\s+/).filter(Boolean);t=t.filter(T=>{const H=R?R[T.name]:null,M=[T.name||"",T.lastAction?.type||"",T.lastAction?.payloadPreview||"",T.lastAction?.originType||"",T.status||"",T.statusMessage||"",H?typeof H=="string"?H:JSON.stringify(H):""].join(" ").toLowerCase();return I.every(D=>M.includes(D))})}return[...t].sort((I,T)=>F==="latest"&&T.updatedAt!==I.updatedAt?T.updatedAt-I.updatedAt:I.name.localeCompare(T.name))},[$,k,F,R]),K=N(()=>P.slice(0,q),[P,q]),j=N(()=>{const t=Object.values(A);return t.length===0?null:t.reduce((I,T)=>I?(T.updatedAt||0)>(I.updatedAt||0)?T:I:T,null)},[A]),ve=Pe(({item:t,index:I})=>{const T=t.updatedAt>0&&Date.now()-t.updatedAt<5e3,H=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,B=t.status==="error"?e.red600:t.status==="loading"?e.amber800Warm:t.status==="empty"?e.grayTextWeak:e.emerald700,W=t.lastAction?.callerFile?Ze(t.lastAction.callerFile):null;return<$e index={I}distance={8}>
+          <C style={o.cardContainer}>
+            <Ne onPress={()=>{Z(t.name)}}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:H,backgroundColor:t.status==="error"?e.errorCardBg:e.white},T&&o.cardRecentlyUpdated]}>
+              <C style={o.cardBody}>
+                
+                <C style={o.cardHeaderRow}>
+                  <C style={o.cardHeaderLeft}>
+                    <S style={o.serialNumber}>#{I+1}</S>
+                    <C style={[o.methodBadge,{backgroundColor:e.violet600}]}>
+                      <S style={o.methodBadgeText}>REDUX</S>
+                    </C>
+                    <C style={[o.chip,{backgroundColor:`${e.violet600}14`,borderColor:`${e.violet600}2E`}]}>
+                      <S style={[o.chipText,{color:e.violet600}]}>
+                        {t.typeLabel.toUpperCase()}
+                      </S>
+                    </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 v=Re(t.lastAction.originType);return<C style={[o.chip,{backgroundColor:v.bg,borderColor:v.border}]}>
+                          {v.renderIcon(v.text,8.5)}
+                          <S style={[o.chipText,{color:v.text}]}>
+                            {v.label}
+                          </S>
+                        </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={o.cardHeaderRight}>
+                    <C style={[o.statusPill,{backgroundColor:M,borderColor:D}]}>
+                      {t.status==="loading"?<Vt color={e.amber800Warm}size={10}/>:t.status==="error"?<Ht color={e.red600}size={10}/>:t.status==="empty"?null:<C style={o.liveDot}/>}
+                      <S style={[o.statusPillText,{color:B}]}>
+                        {t.status==="loading"?"Loading":t.status==="error"?t.statusMessage||"Error":t.status==="empty"?"Empty":"Live"}
+                      </S>
+                    </C>
+                    <Ct 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={o.cardMainRow}>
+                  <C style={o.sliceNameRow}>
+                    <Te text={t.name}search={k}style={o.sliceNameText}highlightStyle={o.highlight}numberOfLines={1}/>
+                    {t.timelineCount>0&&<C style={o.actionCountChip}>
+                        <U color={e.violet600}size={9}/>
+                        <S style={o.actionCountChipText}>
+                          {t.timelineCount}
+                        </S>
+                      </C>}
+                  </C>
+                  <C style={o.actionPreviewRow}>
+                    <Ie color={e.grayTextWeak}size={10}/>
+                    {t.lastAction?<Te text={t.lastAction.type+(t.lastAction.payloadPreview?` \xB7 ${t.lastAction.payloadPreview}`:"")}search={k}style={o.actionPreviewText}highlightStyle={o.highlight}numberOfLines={1}/>:<S style={o.actionPreviewEmptyText}numberOfLines={1}>
+                        Initial state (no actions dispatched yet)
+                      </S>}
+                  </C>
+                </C>
 
-                  <Te text={r.lastAction.type}search={k}style={t.lastActionValue}highlightStyle={t.highlight}numberOfLines={1}/>
+                
+                <C style={o.cardFooterRow}>
+                  <C style={o.footerLeft}>
+                    <_e color={e.grayTextWeak}size={10}/>
+                    <S style={o.footerTimestampText}numberOfLines={1}>
+                      {t.lastAction?.timestamp||"Initial state"}
+                    </S>
+                    {W&&<Ce onPress={()=>Ke(t.lastAction.callerFile,t.lastAction.callerLine,t.lastAction.callerCol)}hitSlop={6}style={o.callerChip}>
+                        <At color={e.sky600}size={9}/>
+                        <S style={o.callerChipText}>
+                          {W.display}
+                        </S>
+                      </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={o.footerRight}>
+                    <C style={o.metaStatChip}>
+                      <Ye color={e.violet600}size={9.5}/>
+                      <S style={o.metaStatText}>
+                        {t.sizeStr}
+                      </S>
+                    </C>
+                    <C style={o.metaStatChip}>
+                      <Xe color={e.violet600}size={9.5}/>
+                      <S style={o.metaStatText}>
+                        {t.keysCount} keys
+                      </S>
+                    </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={o.waterfallContainer}>
+                <C style={[o.waterfallBar,{backgroundColor:H,width:T?"100%":"35%"}]}/>
+              </C>
+            </Ne>
+          </C>
+        </$e>},[k,Z]);return R?<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={o.overviewCard}>
+        <C style={o.statCol}>
+          <S style={o.statHeading}>{L("redux.activeSlices","ACTIVE SLICES")}</S>
+          <S style={o.statBigVal}>{$.length}</S>
+        </C>
+        <C style={o.statDivider}/>
+        <C style={o.statCol}>
+          <S style={o.statHeading}>{L("redux.totalState","TOTAL STATE")}</S>
+          <S style={o.statBigVal}>{Ve}</S>
+        </C>
+        <C style={o.statDivider}/>
+        <C style={[o.statCol,{flex:1.6}]}>
+          <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+            <S style={o.statHeading}>{L("redux.lastActionHeader","LAST ACTION")}</S>
+            {j?.originType&&(()=>{const t=Re(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)}
+                  <S style={{fontFamily:z.interBold,fontSize:7.5,color:t.text}}>
+                    {t.label}
+                  </S>
+                </C>})()}
           </C>
-          {W?.timestamp&&<C style={t.statLastTime}>
-              {W.timestamp}
-            </C>}
-        </T>
-      </T>
+          <S style={o.statLastAction}numberOfLines={1}>
+            {j?j.type:"Initial"}
+          </S>
+          {j?.timestamp&&<S style={o.statLastTime}>
+              {j.timestamp}
+            </S>}
+        </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>
-
-          
-          <_ 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}/>
-          </_>
+      <C style={o.toolbarContainer}>
+        <C style={o.searchRow}>
+          <C style={E.searchContainer}>
+            <Je color={e.grayTextWeak}size={15}/>
+            <Oe 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={k}onChangeText={G}style={E.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            {k.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                <C style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                  <S style={{color:e.purple,fontSize:9.5,fontFamily:z.interBold}}>
+                    {P.length}
+                  </S>
+                </C>
+                <Ce accessible={!0}accessibilityRole="button"accessibilityLabel="Clear search input"onPress={()=>G("")}hitSlop={10}>
+                  <Qe color={e.grayTextWeak}size={14}/>
+                </Ce>
+              </C>}
+          </C>
 
           
-          <_ 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>
+          <Ee accessible={!0}accessibilityRole="button"accessibilityLabel={`Sort order: ${F==="latest"?"Recently updated first":"Alphabetical A to Z"}`}accessibilityHint="Switches sorting between recently updated and alphabetical"style={[E.toolbarBtn,F==="latest"&&{backgroundColor:`${e.brandPurple}1F`,borderColor:e.brandPurple}]}onPress={()=>ke(t=>t==="latest"?"alpha":"latest")}hitSlop={6}>
+            <Tt color={F==="latest"?e.brandPurple:e.grayTextStrong}size={16}/>
+          </Ee>
+        </C>
 
-        <T style={t.headerSubRow}>
-          <C style={t.resultCount}>
-            Showing {F.length} of {M.length} state slices
+        <C style={o.headerSubRow}>
+          <S style={o.resultCount}>
+            Showing {P.length} of {$.length} state slices
+          </S>
+          <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+            {F==="latest"?<U color={e.brandPurple}size={11}/>:<Bt color={e.brandPurple}size={11}/>}
+            <S style={o.sortLabel}>
+              {F==="latest"?"Newest Updates First":"Alphabetical (A-Z)"}
+            </S>
           </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.
+      <Fe ref={ze}data={K}keyExtractor={t=>t.id}renderItem={ve}getItemLayout={(t,I)=>({length:126,offset:126*I,index:I})}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={Y.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ue 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={P.length>0?<Ge count={K.length}totalCount={P.length}label="slices"hasMore={K.length<P.length}onLoadMore={()=>Ae(t=>t+10)}/>:null}contentContainerStyle={[o.listContent,P.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+    </C>:<C style={E.emptyContainer}>
+        <C style={E.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;
+        <S style={E.emptyTitle}>{L("redux.noStoreConnected","No Redux Store Connected")}</S>
+        <S style={E.emptySub}>
+          {L("redux.connectStoreTip","Call connectReduxStore(store) or use inspectorReduxMiddleware at app initialization.")}
+        </S>
+      </C>}),o=We.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:z.interBold,fontSize:9,color:e.grayTextWeak,letterSpacing:.5},statBigVal:{fontFamily:z.interBold,fontSize:14,color:e.primaryBlack,marginTop:2},statLastAction:{fontFamily:z.interBold,fontSize:11,color:e.purple,marginTop:2},statLastTime:{fontFamily:z.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:z.interMedium,fontSize:11,color:e.grayTextWeak},sortLabel:{fontFamily:z.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:z.interBold,fontSize:10.5,lineHeight:13,color:e.grayTextWeak},methodBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:4,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:z.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:z.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:z.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:z.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:z.interBold,fontSize:8.5,lineHeight:11,color:e.violet600},actionPreviewRow:{flexDirection:"row",alignItems:"center",gap:4.5,minHeight:15},actionPreviewText:{fontFamily:Y.select({ios:"Menlo",default:"monospace"}),fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},actionPreviewEmptyText:{fontFamily:z.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:z.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:z.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:z.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}});export default Lt;