react-native-inapp-inspector 2.4.0 → 2.4.2

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

@@ -1,11 +1,11 @@
-import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert as ze,Platform as tt,Pressable as U,ScrollView as Z,StyleSheet as rt,Text as C,TextInput as Tt,ToastAndroid as Oe,TouchableOpacity as Ne,View as T}from"react-native";import{useTranslation as ht}from"../../i18n";import{useInspector as wt}from"./InspectorContext";import He from"../SegmentedTabs";import K from"../JsonViewer";import Me from"../DiffViewer";import Ee from"../CopyButton";import Ct from"../ShareButton";import St from"../TouchableScale";import Bt from"../HighlightText";import Vt from"../AnimatedEntrance";import{getActionHistory as zt}from"../../customHooks/reduxLogger";import{getSize as q,openInVSCode as _,parseStackLine as je}from"../../helpers";import{shareReduxReport as It}from"../../helpers/shareFormatter";import{getCustomStorage as $e}from"../../helpers/settingsStore";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{TerminalIcon as Je,SearchIcon as Pt,ClearIcon as Wt,ClockIcon as Ie,LayersIcon as Ge,TrashIcon as Ue,ForwardChevronIcon as Rt,LiveStateIcon as Ke,TimelineIcon as Te,StorageIcon as Ce,MetadataIcon as Ft,BoltIcon as Pe,AtomIcon as Dt,ScreenIcon as At,ListenerIcon as Lt,DocIcon as We,ExternalLinkIcon as Se,CodeBracketsIcon as Ot}from"../NetworkIcons";const qe=z=>{switch(z){case"saga":return{label:"SAGA",renderIcon:(D,v=9)=><Dt color={D}size={v}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(D,v=9)=><Pe color={D}size={v}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"epic":return{label:"EPIC",renderIcon:(D,v=9)=><Je color={D}size={v}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(D,v=9)=><Lt color={D}size={v}/>,bg:e.teal100,text:e.teal700,border:e.teal400};case"component":return{label:"UI DISPATCH",renderIcon:(D,v=9)=><At color={D}size={v}/>,bg:e.sky100,text:e.sky600,border:e.sky400};default:return{label:"DISPATCH",renderIcon:(D,v=9)=><Pe color={D}size={v}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Nt=_e.memo(()=>{const{t:z}=ht(),{reduxState:D,reduxLastActionMap:v,selectedReduxSlice:W,selectedReduxAction:V}=wt(),[A,Re]=E(""),[O,ve]=E("live"),[Q,Qe]=E("payload"),[Fe,De]=E("raw"),[Xe,Ye]=E(null),[J,G]=E(!1),[X,N]=E(null),ke=Ve(()=>zt(),[v]),j=Ve(()=>W?ke.filter(B=>!B.affectedSlices||B.affectedSlices.length===0?!0:B.affectedSlices.includes(W)):ke,[ke,W]),Ae=Ve(()=>{if(!A.trim())return j;const B=A.toLowerCase();return j.filter(R=>R.type.toLowerCase().includes(B)||R.callerFile&&R.callerFile.toLowerCase().includes(B)||R.payload&&JSON.stringify(R.payload).toLowerCase().includes(B))},[j,A]);et(()=>{if(!W)return;async function B(){try{const R=$e();if(!R){G(!1),N(null);return}let F=await R.getItem(`persist:${W}`);if(F){try{N(JSON.parse(F))}catch{N(F)}G(!0);return}let I=await R.getItem("persist:root");if(I){const S=JSON.parse(I);if(S&&S[W]!==void 0){const P=S[W];try{N(typeof P=="string"?JSON.parse(P):P)}catch{N(P)}G(!0);return}}}catch{}G(!1),N(null)}B()},[W]);const Le=()=>{W&&ze.alert("Clear Persisted State",`Are you sure you want to delete persisted storage for slice "${W}"?`,[{text:"Cancel",style:"cancel"},{text:"Delete",style:"destructive",onPress:async()=>{try{const B=$e();if(!B)return;typeof B.removeItem=="function"?await B.removeItem(`persist:${W}`):await B.setItem(`persist:${W}`,""),G(!1),N(null),ve("live"),tt.OS==="android"?Oe.show("Persisted state cleared",Oe.SHORT):ze.alert("Cleared","Persisted state has been cleared.")}catch{ze.alert("Error","Failed to clear persisted state.")}}}])};if(W!=null){const B=D?.[W],R=B&&typeof B=="object"?Object.keys(B).length:typeof B<"u"?1:0,F=v[W],I=[{key:"live",label:z("redux.liveState","Live State"),icon:S=><Ke color={S?e.white:e.grayText}size={12}/>},{key:"timeline",label:`${z("redux.timeline","Timeline")} (${j.length})`,icon:S=><Te color={S?e.white:e.grayText}size={12}/>},{key:"persisted",label:J?z("redux.persisted","Persisted"):z("redux.storage","Storage"),icon:S=><Ce color={S?e.white:e.grayText}size={12}/>},{key:"metadata",label:z("redux.metadata","Metadata"),icon:S=><Ft color={S?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
+import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert as ze,Platform as tt,Pressable as U,ScrollView as Z,StyleSheet as rt,Text as C,TextInput as Tt,ToastAndroid as Oe,TouchableOpacity as Ne,View as T}from"react-native";import{useTranslation as ht}from"../../i18n";import{useInspector as wt}from"./InspectorContext";import He from"../SegmentedTabs";import K from"../JsonViewer";import Me from"../DiffViewer";import Ee from"../CopyButton";import Ct from"../ShareButton";import St from"../TouchableScale";import Bt from"../HighlightText";import Vt from"../AnimatedEntrance";import{getActionHistory as zt}from"../../customHooks/reduxLogger";import{getSize as q,openInVSCode as _,parseStackLine as je}from"../../helpers";import{shareReduxReport as It}from"../../helpers/shareFormatter";import{getCustomStorage as $e}from"../../helpers/settingsStore";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{TerminalIcon as Je,SearchIcon as Pt,ClearIcon as Wt,ClockIcon as Ie,LayersIcon as Ge,TrashIcon as Ue,ForwardChevronIcon as Rt,LiveStateIcon as Ke,TimelineIcon as Te,StorageIcon as Ce,MetadataIcon as Ft,BoltIcon as Pe,AtomIcon as Dt,ScreenIcon as At,ListenerIcon as Lt,DocIcon as We,ExternalLinkIcon as Se,CodeBracketsIcon as Ot}from"../NetworkIcons";const qe=V=>{switch(V){case"saga":return{label:"SAGA",renderIcon:(D,F=9)=><Dt color={D}size={F}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(D,F=9)=><Pe color={D}size={F}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"epic":return{label:"EPIC",renderIcon:(D,F=9)=><Je color={D}size={F}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(D,F=9)=><Lt color={D}size={F}/>,bg:e.teal100,text:e.teal700,border:e.teal400};case"component":return{label:"UI DISPATCH",renderIcon:(D,F=9)=><At color={D}size={F}/>,bg:e.sky100,text:e.sky600,border:e.sky400};default:return{label:"DISPATCH",renderIcon:(D,F=9)=><Pe color={D}size={F}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Nt=_e.memo(()=>{const{t:V}=ht(),{reduxState:D,reduxLastActionMap:F,selectedReduxSlice:W,selectedReduxAction:z}=wt(),[A,Re]=E(""),[O,Fe]=E("live"),[Q,Qe]=E("payload"),[ve,De]=E("raw"),[Xe,Ye]=E(null),[J,G]=E(!1),[X,N]=E(null),ke=Ve(()=>zt(),[F]),j=Ve(()=>W?ke.filter(B=>!B.affectedSlices||B.affectedSlices.length===0?!0:B.affectedSlices.includes(W)):ke,[ke,W]),Ae=Ve(()=>{if(!A.trim())return j;const B=A.toLowerCase();return j.filter(R=>R.type.toLowerCase().includes(B)||R.callerFile&&R.callerFile.toLowerCase().includes(B)||R.payload&&JSON.stringify(R.payload).toLowerCase().includes(B))},[j,A]);et(()=>{if(!W)return;async function B(){try{const R=$e();if(!R){G(!1),N(null);return}let v=await R.getItem(`persist:${W}`);if(v){try{N(JSON.parse(v))}catch{N(v)}G(!0);return}let I=await R.getItem("persist:root");if(I){const S=JSON.parse(I);if(S&&S[W]!==void 0){const P=S[W];try{N(typeof P=="string"?JSON.parse(P):P)}catch{N(P)}G(!0);return}}}catch{}G(!1),N(null)}B()},[W]);const Le=()=>{W&&ze.alert(V("redux.clearPersistedTitle","Clear Persisted State"),V("redux.clearPersistedMessage",'Are you sure you want to delete persisted storage for slice "{{slice}}"?').replace("{{slice}}",W||""),[{text:V("common.cancel","Cancel"),style:"cancel"},{text:"Delete",style:"destructive",onPress:async()=>{try{const B=$e();if(!B)return;typeof B.removeItem=="function"?await B.removeItem(`persist:${W}`):await B.setItem(`persist:${W}`,""),G(!1),N(null),Fe("live"),tt.OS==="android"?Oe.show("Persisted state cleared",Oe.SHORT):ze.alert(V("redux.clearedPersisted","Persisted state has been cleared."))}catch{ze.alert(V("common.failed","Failed"),V("redux.clearPersistedError","Failed to clear persisted state."))}}}])};if(W!=null){const B=D?.[W],R=B&&typeof B=="object"?Object.keys(B).length:typeof B<"u"?1:0,v=F[W],I=[{key:"live",label:V("redux.liveState","Live State"),icon:S=><Ke color={S?e.white:e.grayText}size={12}/>},{key:"timeline",label:`${V("redux.timeline","Timeline")} (${j.length})`,icon:S=><Te color={S?e.white:e.grayText}size={12}/>},{key:"persisted",label:J?V("redux.persisted","Persisted"):V("redux.storage","Storage"),icon:S=><Ce color={S?e.white:e.grayText}size={12}/>},{key:"metadata",label:V("redux.metadata","Metadata"),icon:S=><Ft color={S?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
         
         <T style={t.infoBar}>
           <T style={t.infoTopRow}>
             <T style={{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",flex:1,minWidth:0}}>
               <T style={[t.methodBadge,{backgroundColor:e.indigo600Alt}]}>
                 <C style={t.methodBadgeText}>
-                  {z("redux.slice","SLICE")}
+                  {V("redux.slice","SLICE")}
                 </C>
               </T>
               <C style={t.sliceNameText}numberOfLines={1}>
@@ -14,23 +14,23 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
               {J?<T style={t.persistedChip}>
                   <Ce color={e.emerald700}size={10}/>
                   <C style={t.persistedChipText}>
-                    {z("redux.persisted","Persisted").toUpperCase()}
+                    {V("redux.persisted","Persisted").toUpperCase()}
                   </C>
                 </T>:<T style={t.inMemoryChip}>
                   <C style={t.inMemoryChipText}>
-                    {z("redux.inMemory","In-Memory").toUpperCase()}
+                    {V("redux.inMemory","In-Memory").toUpperCase()}
                   </C>
                 </T>}
-              {F?.timestamp&&<T style={t.timePill}>
+              {v?.timestamp&&<T style={t.timePill}>
                   <Ie color={e.violet600}size={10}/>
                   <C style={t.timeText}>
-                    {F.timestamp}
+                    {v.timestamp}
                   </C>
                 </T>}
             </T>
 
             
-            <Ee value={()=>O==="live"?B:X}label={z("redux.sliceJson","Slice JSON")}/>
+            <Ee value={()=>O==="live"?B:X}label={V("redux.sliceJson","Slice JSON")}/>
           </T>
 
           
@@ -38,7 +38,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             <T style={[t.statPill,{backgroundColor:e.indigo50,borderColor:e.indigo400}]}>
               <Ge color={e.indigo600Alt}size={11}/>
               <C style={[t.statLabel,{color:e.indigo600Alt}]}>
-                {z("redux.keys","Keys")}:
+                {V("redux.keys","Keys")}:
               </C>
               <C style={[t.statValue,{color:e.indigo600Alt}]}>
                 {R}
@@ -46,7 +46,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             </T>
             <T style={[t.statPill,{backgroundColor:e.sky100,borderColor:e.sky400}]}>
               <C style={[t.statLabel,{color:e.sky600}]}>
-                {z("redux.size","Size")}:
+                {V("redux.size","Size")}:
               </C>
               <C style={[t.statValue,{color:e.sky600}]}>
                 {q(B)}
@@ -55,25 +55,25 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             <T style={[t.statPill,{backgroundColor:e.purple100,borderColor:e.purple200}]}>
               <Te color={e.violet600}size={11}/>
               <C style={[t.statLabel,{color:e.brandPurple}]}>
-                {z("redux.timeline","Timeline")}:
+                {V("redux.timeline","Timeline")}:
               </C>
               <C style={[t.statValue,{color:e.brandPurple}]}>
                 {j.length}
               </C>
             </T>
-            {F&&<T style={[t.statPill,{backgroundColor:e.amber100,borderColor:e.amber200,flexShrink:1,maxWidth:160}]}>
+            {v&&<T style={[t.statPill,{backgroundColor:e.amber100,borderColor:e.amber200,flexShrink:1,maxWidth:160}]}>
                 <Pe color={e.amber800Warm}size={11}/>
                 <C style={[t.statLabel,{color:e.amber800Warm}]}>
-                  {z("redux.last","Last")}:
+                  {V("redux.last","Last")}:
                 </C>
                 <C style={[t.statValue,{color:e.amber800Warm,flexShrink:1}]}numberOfLines={1}>
-                  {F.type}
+                  {v.type}
                 </C>
               </T>}
           </T>
 
           
-          <He tabs={I}activeKey={O}onChange={S=>ve(S)}style={{marginTop:10}}/>
+          <He tabs={I}activeKey={O}onChange={S=>Fe(S)}style={{marginTop:10}}/>
         </T>
 
         
@@ -125,7 +125,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                           <T style={{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0}}>
                             <We color={e.sky600}size={10}/>
                             <C style={{fontFamily:k.interMedium,fontSize:9.5,color:e.grayTextWeak}}>
-                              {z("redux.triggeredFrom","Triggered From:")}
+                              {V("redux.triggeredFrom","Triggered From:")}
                             </C>
                             <C style={{fontFamily:k.interBold,fontSize:9.5,color:e.sky600}}numberOfLines={1}>
                               {Ze}:{S.callerLine||1}
@@ -135,7 +135,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                           <U onPress={()=>_(S.callerFile,S.callerLine,S.callerCol)}hitSlop={8}style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.sky100,paddingHorizontal:5,paddingVertical:2,borderRadius:4}}>
                             <Se color={e.sky600}size={9}/>
                             <C style={{fontFamily:k.interBold,fontSize:8.5,color:e.sky600}}>
-                              {z("redux.openInEditor","Open in Editor")}
+                              {V("redux.openInEditor","Open in Editor")}
                             </C>
                           </U>
                         </T>}
@@ -145,7 +145,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                           
                           {S.stack?<T style={{marginBottom:12}}>
                               <C style={t.expandedSectionTitle}>
-                                {z("redux.callStack","Call Stack Trace")}:
+                                {V("redux.callStack","Call Stack Trace")}:
                               </C>
                               <T style={{backgroundColor:e.grayBackground,borderRadius:8,padding:8,borderWidth:1,borderColor:e.dividerColor,gap:4}}>
                                 {S.stack.split(`
@@ -167,18 +167,18 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
 
                           {S.payload!==void 0&&<T style={{marginBottom:12}}>
                               <C style={t.expandedSectionTitle}>
-                                {z("redux.actionPayload","Action Payload:")}
+                                {V("redux.actionPayload","Action Payload:")}
                               </C>
                               <K data={S.payload}search={A}forceOpen={!0}wrap={!0}/>
                             </T>}
 
                           <C style={t.expandedSectionTitle}>
-                            {z("redux.stateChangesDiff","State Changes (Diff):")}
+                            {V("redux.stateChangesDiff","State Changes (Diff):")}
                           </C>
                           <Me oldData={S.prevState?.[W]||{}}newData={S.nextState?.[W]||{}}forceOpen={!0}/>
                         </T>:<T style={t.collapsedPrompt}>
                           <C style={t.collapsedPromptText}>
-                            {z("redux.tapToInspectAction","Tap to inspect action payload & diff changes")}
+                            {V("redux.tapToInspectAction","Tap to inspect action payload & diff changes")}
                           </C>
                           <Rt color={e.grayTextWeak}size={12}/>
                         </T>}
@@ -186,7 +186,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                   </Vt>})}
           </Z>:O==="metadata"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
             <T style={t.metadataCard}>
-              {[{label:"Slice Name",value:W},{label:"Root Keys Count",value:`${R} keys`},{label:"In-Memory State Size",value:q(B)},{label:"Persistence Status",value:J?`Persisted (${q(X)})`:"Not Persisted (In-Memory)"},{label:"Dispatched Actions History",value:`${j.length} recorded actions`},{label:"Last Dispatched Action",value:F?F.type:"None"},{label:"Last Action Timestamp",value:F?F.timestamp:"Initial"}].map((S,P)=><T key={P}style={[t.metaRow,P===6&&{borderBottomWidth:0}]}>
+              {[{label:"Slice Name",value:W},{label:"Root Keys Count",value:`${R} keys`},{label:"In-Memory State Size",value:q(B)},{label:"Persistence Status",value:J?`Persisted (${q(X)})`:"Not Persisted (In-Memory)"},{label:"Dispatched Actions History",value:`${j.length} recorded actions`},{label:"Last Dispatched Action",value:v?v.type:"None"},{label:"Last Action Timestamp",value:v?v.timestamp:"Initial"}].map((S,P)=><T key={P}style={[t.metaRow,P===6&&{borderBottomWidth:0}]}>
                   <C style={t.metaLabel}>{S.label}</C>
                   <C style={t.metaValue}selectable numberOfLines={2}>
                     {S.value}
@@ -219,7 +219,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                   </T>
                 </T>
                 <T style={{flex:1,marginTop:8}}>
-                  <K data={X}search={A}forceOpen={A.length>0?!0:void 0}mode={Fe}onModeChange={De}fullHeight={!0}wrap={!0}/>
+                  <K data={X}search={A}forceOpen={A.length>0?!0:void 0}mode={ve}onModeChange={De}fullHeight={!0}wrap={!0}/>
                 </T>
               </T>:<T style={t.emptyBox}>
                 <Ce color={e.grayTextWeak}size={32}/>
@@ -232,16 +232,16 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                 </C>
               </T>}
           </T>:<T style={{flex:1,padding:10}}>
-            <K data={B}search={A}forceOpen={A.length>0?!0:void 0}mode={Fe}onModeChange={De}fullHeight={!0}wrap={!0}/>
+            <K data={B}search={A}forceOpen={A.length>0?!0:void 0}mode={ve}onModeChange={De}fullHeight={!0}wrap={!0}/>
           </T>}
-      </T>}if(V!=null){const B=qe(V.originType),R=V.callerFile?V.callerFile.split("/").pop():null,F=[{key:"payload",label:z("redux.payload","Payload"),icon:I=><Ot color={I?e.white:e.grayText}size={12}/>},{key:"diff",label:z("redux.diff","State Diff"),icon:I=><Te color={I?e.white:e.grayText}size={12}/>},{key:"stack",label:z("redux.callStack","Call Stack"),icon:I=><We color={I?e.white:e.grayText}size={12}/>},{key:"raw",label:"Raw Action",icon:I=><Ke color={I?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
+      </T>}if(z!=null){const B=qe(z.originType),R=z.callerFile?z.callerFile.split("/").pop():null,v=[{key:"payload",label:V("redux.payload","Payload"),icon:I=><Ot color={I?e.white:e.grayText}size={12}/>},{key:"diff",label:V("redux.diff","State Diff"),icon:I=><Te color={I?e.white:e.grayText}size={12}/>},{key:"stack",label:V("redux.callStack","Call Stack"),icon:I=><We color={I?e.white:e.grayText}size={12}/>},{key:"raw",label:"Raw Action",icon:I=><Ke color={I?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
         
         <T style={t.infoBar}>
           <T style={t.infoTopRow}>
             <T style={{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",flex:1,minWidth:0}}>
               <T style={t.actionBadge}>
                 <C style={t.actionBadgeText}>
-                  #{V.id}
+                  #{z.id}
                 </C>
               </T>
               
@@ -252,32 +252,32 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                 </C>
               </T>
               <C style={t.sliceNameText}numberOfLines={1}>
-                {V.type}
+                {z.type}
               </C>
-              {V.timestamp&&<T style={t.timePill}>
+              {z.timestamp&&<T style={t.timePill}>
                   <Ie color={e.purple}size={10}/>
                   <C style={t.timeText}>
-                    {V.timestamp}
+                    {z.timestamp}
                   </C>
                 </T>}
             </T>
 
             
             <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
-              <Ct onShare={()=>It(V)}/>
-              <Ee value={()=>V}label="Copy Action"/>
+              <Ct onShare={()=>It(z)}/>
+              <Ee value={()=>z}label="Copy Action"/>
             </T>
           </T>
 
           
           <T style={t.subStatsRow}>
-            {V.affectedSlices&&V.affectedSlices.length>0&&<T style={[t.statPill,{backgroundColor:e.indigo50,borderColor:e.indigo400}]}>
+            {z.affectedSlices&&z.affectedSlices.length>0&&<T style={[t.statPill,{backgroundColor:e.indigo50,borderColor:e.indigo400}]}>
                   <Ge color={e.indigo600Alt}size={11}/>
                   <C style={[t.statLabel,{color:e.indigo600Alt}]}>
                     Slices:
                   </C>
                   <C style={[t.statValue,{color:e.indigo600Alt}]}>
-                    {V.affectedSlices.join(", ")}
+                    {z.affectedSlices.join(", ")}
                   </C>
                 </T>}
             <T style={[t.statPill,{backgroundColor:e.sky100,borderColor:e.sky400}]}>
@@ -285,24 +285,24 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                 Payload Size:
               </C>
               <C style={[t.statValue,{color:e.sky600}]}>
-                {q(V.payload)}
+                {q(z.payload)}
               </C>
             </T>
           </T>
 
           
-          {V.callerFile&&<T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:8,paddingHorizontal:8,paddingVertical:4,backgroundColor:e.grayBackground,borderRadius:6,borderWidth:1,borderColor:e.dividerColor}}>
+          {z.callerFile&&<T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:8,paddingHorizontal:8,paddingVertical:4,backgroundColor:e.grayBackground,borderRadius:6,borderWidth:1,borderColor:e.dividerColor}}>
               <T style={{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0}}>
                 <We color={e.sky600}size={10}/>
                 <C style={{fontFamily:k.interMedium,fontSize:9.5,color:e.grayTextWeak}}>
                   Triggered from:
                 </C>
                 <C style={{fontFamily:k.interBold,fontSize:9.5,color:e.sky600}}numberOfLines={1}>
-                  {R}:{V.callerLine||1}
+                  {R}:{z.callerLine||1}
                 </C>
               </T>
 
-              <U onPress={()=>_(V.callerFile,V.callerLine,V.callerCol)}hitSlop={8}style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.sky100,paddingHorizontal:5,paddingVertical:2,borderRadius:4}}>
+              <U onPress={()=>_(z.callerFile,z.callerLine,z.callerCol)}hitSlop={8}style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.sky100,paddingHorizontal:5,paddingVertical:2,borderRadius:4}}>
                 <Se color={e.sky600}size={9}/>
                 <C style={{fontFamily:k.interBold,fontSize:8.5,color:e.sky600}}>
                   Open in Editor
@@ -311,24 +311,24 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             </T>}
 
           
-          <He tabs={F}activeKey={Q}onChange={I=>Qe(I)}style={{marginTop:10}}/>
+          <He tabs={v}activeKey={Q}onChange={I=>Qe(I)}style={{marginTop:10}}/>
         </T>
 
         
         {Q==="payload"?<T style={{flex:1,padding:10}}>
-            {V.payload!==void 0?<K data={V.payload}search={A}forceOpen={!0}fullHeight={!0}wrap={!0}/>:<T style={t.emptyBox}>
+            {z.payload!==void 0?<K data={z.payload}search={A}forceOpen={!0}fullHeight={!0}wrap={!0}/>:<T style={t.emptyBox}>
                 <C style={t.emptyBoxText}>
                   This action has no payload dispatched.
                 </C>
               </T>}
           </T>:Q==="diff"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
-            <Me oldData={V.prevState||{}}newData={V.nextState||{}}forceOpen={!0}/>
+            <Me oldData={z.prevState||{}}newData={z.nextState||{}}forceOpen={!0}/>
           </Z>:Q==="stack"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
-            {V.stack?<T style={{backgroundColor:e.white,borderRadius:10,padding:10,borderWidth:1,borderColor:e.dividerColor}}>
+            {z.stack?<T style={{backgroundColor:e.white,borderRadius:10,padding:10,borderWidth:1,borderColor:e.dividerColor}}>
                 <C style={t.expandedSectionTitle}>
                   Dispatched from call stack:
                 </C>
-                {V.stack.split(`
+                {z.stack.split(`
 `).map(I=>I.trim()).filter(I=>I.length>0&&!I.includes("reduxLogger")&&!I.includes("inspectorReduxMiddleware")).map((I,S)=>{const P=je(I,S===0),H=P.frameType==="app";return<U key={S}onPress={()=>{P.fileName!=="Unknown"&&_(P.fullPath||P.fileName,P.lineNumber,P.columnNumber)}}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:5,borderBottomWidth:.5,borderBottomColor:e.dividerColor}}>
                         <T style={{flex:1,minWidth:0}}>
                           <C style={{fontFamily:H?k.interBold:k.interRegular,fontSize:10.5,color:H?e.primaryBlack:e.grayTextWeak}}numberOfLines={1}>
@@ -347,7 +347,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                 </C>
               </T>}
           </Z>:<T style={{flex:1,padding:10}}>
-            <K data={V}forceOpen={!0}fullHeight={!0}wrap={!0}/>
+            <K data={z}forceOpen={!0}fullHeight={!0}wrap={!0}/>
           </T>}
       </T>}return<T style={t.emptyBox}>
       <Je color={e.purple}size={32}/>

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

@@ -1,6 +1,6 @@
-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}>
+import ee,{useCallback as Le,useMemo as N,useRef as Pe,useState as te}from"react";import{FlatList as De,Platform as Fe,Pressable as Ce,StyleSheet as Ee,Text as S,TextInput as We,TouchableOpacity as Oe,View as C}from"react-native";import{useTranslation as Me}from"../../i18n";import{useInspector as je}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 _e,getCleanCallerDisplay as Ze}from"../../helpers";import O from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as R}from"../../styles/AppFonts";import{getActionHistory as Ke}from"../../customHooks/reduxLogger";import{TerminalIcon as Ie,SearchIcon as Je,ClearIcon as Qe,LayersIcon as Xe,ClockIcon as Ye,SizeIcon as Ct,ForwardChevronIcon as Tt,SortArrowIcon as St,BoltIcon as U,AtomIcon as It,ScreenIcon as At,ListenerIcon as Rt,DocIcon as Vt,LoadingSpinnerIcon as Bt,CircleAlertIcon as Ht,TextAaIcon as Lt}from"../NetworkIcons";const Ae=L=>{switch(L){case"saga":return{label:"SAGA",renderIcon:(A,z=9)=><U color={A}size={z}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(A,z=9)=><It color={A}size={z}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(A,z=9)=><At color={A}size={z}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(A,z=9)=><Rt color={A}size={z}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(A,z=9)=><U color={A}size={z}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Re=50,ze=10,Pt=ee.memo(()=>{const{t:L}=Me(),{reduxState:A,reduxLastActionMap:z,reduxSearch:k,setReduxSearch:G,setSelectedReduxSlice:Z}=je(),K=Pe(null),[q,J]=te(Re),[P,ke]=te("latest");ee.useEffect(()=>{J(Re),K.current?.scrollToOffset({offset:0,animated:!1})},[k,P]);const Ve=N(()=>Se(A),[A]),Q=N(()=>Ke(),[z]),$=N(()=>!A||typeof A!="object"?[]:Object.keys(A).map(I=>{const T=A[I],B=Array.isArray(T),j=T&&typeof T=="object";let F="Primitive",H=0;B?(H=T.length,F=`Array [${H}]`):j?(H=Object.keys(T).length,F=`Object {${H}}`):typeof T<"u"&&(H=1,F=typeof T);let E="live",v;j&&(T.loading===!0||T.isLoading===!0||T.status==="loading"||T.status==="pending"?(E="loading",v="Loading"):T.error||T.hasError||T.status==="error"||T.status==="failed"?(E="error",v=typeof T.error=="string"?T.error:"Error"):H===0&&(E="empty",v="Empty"));const V=z[I],Be=V?.updatedAt||0,He=Q.filter(W=>!W.affectedSlices||W.affectedSlices.length===0?!0:W.affectedSlices.includes(I)).length;let X;if(V){let W;if(V.payload!==void 0&&V.payload!==null)try{if(typeof V.payload=="object"){const Y=Object.keys(V.payload);W=`{ ${Y.slice(0,3).join(", ")}${Y.length>3?"...":""} }`}else W=String(V.payload)}catch{}X={type:V.type,timestamp:V.timestamp,updatedAt:V.updatedAt,payloadPreview:W,originType:V.originType,callerFile:V.callerFile,callerLine:V.callerLine,callerCol:V.callerCol}}return{id:`slice-${I}`,name:I,keysCount:H,sizeStr:Se(T),typeLabel:F,status:E,statusMessage:v,timelineCount:He,lastAction:X,updatedAt:Be}}),[A,z,Q]),D=N(()=>{let t=$;if(k&&k.trim().length>0){const I=k.trim().toLowerCase().split(/\s+/).filter(Boolean);t=t.filter(T=>{const B=A?A[T.name]:null,j=[T.name||"",T.lastAction?.type||"",T.lastAction?.payloadPreview||"",T.lastAction?.originType||"",T.status||"",T.statusMessage||"",B?typeof B=="string"?B:JSON.stringify(B):""].join(" ").toLowerCase();return I.every(F=>j.includes(F))})}return[...t].sort((I,T)=>P==="latest"&&T.updatedAt!==I.updatedAt?T.updatedAt-I.updatedAt:I.name.localeCompare(T.name))},[$,k,P,A]),_=N(()=>D.slice(0,q),[D,q]),M=N(()=>{const t=Object.values(z);return t.length===0?null:t.reduce((I,T)=>I?(T.updatedAt||0)>(I.updatedAt||0)?T:I:T,null)},[z]),ve=Le(({item:t,index:I})=>{const T=t.updatedAt>0&&Date.now()-t.updatedAt<5e3,B=t.status==="error"?e.errorColor:t.status==="loading"?e.warningIconGold:t.status==="empty"?e.grayTextWeak:e.greenColor,j=t.status==="error"?e.red100:t.status==="loading"?e.amber100:t.status==="empty"?e.grayBackground:e.emeraldBg,F=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,E=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]}>
+            <Ne onPress={()=>{Z(t.name)}}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:B,backgroundColor:t.status==="error"?e.errorCardBg:e.white},T&&o.cardRecentlyUpdated]}>
               <C style={o.cardBody}>
                 
                 <C style={o.cardHeaderRow}>
@@ -15,7 +15,7 @@ import Le,{useCallback as Pe,useMemo as N,useRef as De,useState as _}from"react"
                       </S>
                     </C>
 
-                    {t.lastAction?.originType&&(()=>{const v=Re(t.lastAction.originType);return<C style={[o.chip,{backgroundColor:v.bg,borderColor:v.border}]}>
+                    {t.lastAction?.originType&&(()=>{const v=Ae(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}
@@ -24,13 +24,13 @@ import Le,{useCallback as Pe,useMemo as N,useRef as De,useState as _}from"react"
                   </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}]}>
+                    <C style={[o.statusPill,{backgroundColor:j,borderColor:F}]}>
+                      {t.status==="loading"?<Bt 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:H}]}>
                         {t.status==="loading"?"Loading":t.status==="error"?t.statusMessage||"Error":t.status==="empty"?"Empty":"Live"}
                       </S>
                     </C>
-                    <Ct color={e.grayTextWeak}size={13}/>
+                    <Tt color={e.grayTextWeak}size={13}/>
                   </C>
                 </C>
 
@@ -56,21 +56,21 @@ import Le,{useCallback as Pe,useMemo as N,useRef as De,useState as _}from"react"
                 
                 <C style={o.cardFooterRow}>
                   <C style={o.footerLeft}>
-                    <_e color={e.grayTextWeak}size={10}/>
+                    <Ye 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}/>
+                    {E&&<Ce onPress={()=>_e(t.lastAction.callerFile,t.lastAction.callerLine,t.lastAction.callerCol)}hitSlop={6}style={o.callerChip}>
+                        <Vt color={e.sky600}size={9}/>
                         <S style={o.callerChipText}>
-                          {W.display}
+                          {E.display}
                         </S>
                       </Ce>}
                   </C>
 
                   <C style={o.footerRight}>
                     <C style={o.metaStatChip}>
-                      <Ye color={e.violet600}size={9.5}/>
+                      <Ct color={e.violet600}size={9.5}/>
                       <S style={o.metaStatText}>
                         {t.sizeStr}
                       </S>
@@ -87,11 +87,11 @@ import Le,{useCallback as Pe,useMemo as N,useRef as De,useState as _}from"react"
 
               
               <C style={o.waterfallContainer}>
-                <C style={[o.waterfallBar,{backgroundColor:H,width:T?"100%":"35%"}]}/>
+                <C style={[o.waterfallBar,{backgroundColor:B,width:T?"100%":"35%"}]}/>
               </C>
             </Ne>
           </C>
-        </$e>},[k,Z]);return R?<C style={{flex:1,backgroundColor:e.grayBackground}}>
+        </$e>},[k,Z]);return A?<C style={{flex:1,backgroundColor:e.grayBackground}}>
       
       <C style={o.overviewCard}>
         <C style={o.statCol}>
@@ -107,18 +107,18 @@ import Le,{useCallback as Pe,useMemo as N,useRef as De,useState as _}from"react"
         <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}}>
+            {M?.originType&&(()=>{const t=Ae(M.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}}>
+                  <S style={{fontFamily:R.interBold,fontSize:7.5,color:t.text}}>
                     {t.label}
                   </S>
                 </C>})()}
           </C>
           <S style={o.statLastAction}numberOfLines={1}>
-            {j?j.type:"Initial"}
+            {M?M.type:"Initial"}
           </S>
-          {j?.timestamp&&<S style={o.statLastTime}>
-              {j.timestamp}
+          {M?.timestamp&&<S style={o.statLastTime}>
+              {M.timestamp}
             </S>}
         </C>
       </C>
@@ -126,13 +126,13 @@ import Le,{useCallback as Pe,useMemo as N,useRef as De,useState as _}from"react"
       
       <C style={o.toolbarContainer}>
         <C style={o.searchRow}>
-          <C style={E.searchContainer}>
+          <C style={O.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"/>
+            <We 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={O.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 style={{color:e.purple,fontSize:9.5,fontFamily:R.interBold}}>
+                    {D.length}
                   </S>
                 </C>
                 <Ce accessible={!0}accessibilityRole="button"accessibilityLabel="Clear search input"onPress={()=>G("")}hitSlop={10}>
@@ -142,32 +142,32 @@ import Le,{useCallback as Pe,useMemo as N,useRef as De,useState as _}from"react"
           </C>
 
           
-          <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>
+          <Oe 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={[O.toolbarBtn,P==="latest"&&{backgroundColor:`${e.brandPurple}1F`,borderColor:e.brandPurple}]}onPress={()=>ke(t=>t==="latest"?"alpha":"latest")}hitSlop={6}>
+            <St color={P==="latest"?e.brandPurple:e.grayTextStrong}size={16}/>
+          </Oe>
         </C>
 
         <C style={o.headerSubRow}>
           <S style={o.resultCount}>
-            Showing {P.length} of {$.length} state slices
+            Showing {D.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}/>}
+            {P==="latest"?<U color={e.brandPurple}size={11}/>:<Lt color={e.brandPurple}size={11}/>}
             <S style={o.sortLabel}>
-              {F==="latest"?"Newest Updates First":"Alphabetical (A-Z)"}
+              {P==="latest"?"Newest Updates First":"Alphabetical (A-Z)"}
             </S>
           </C>
         </C>
       </C>
 
       
-      <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}>
+      <De ref={K}data={_}keyExtractor={t=>t.id}renderItem={ve}getItemLayout={(t,I)=>({length:126,offset:126*I,index:I})}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}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={D.length>0?<Ge count={_.length}totalCount={D.length}label="slices"loadMoreStep={ze}hasMore={_.length<D.length}onLoadMore={()=>J(t=>t+ze)}/>:null}contentContainerStyle={[o.listContent,D.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+    </C>:<C style={O.emptyContainer}>
+        <C style={O.emptyIconWrap}>
           <Ie color={e.purple}size={32}/>
         </C>
-        <S style={E.emptyTitle}>{L("redux.noStoreConnected","No Redux Store Connected")}</S>
-        <S style={E.emptySub}>
+        <S style={O.emptyTitle}>{L("redux.noStoreConnected","No Redux Store Connected")}</S>
+        <S style={O.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;
+      </C>}),o=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:R.interBold,fontSize:9,color:e.grayTextWeak,letterSpacing:.5},statBigVal:{fontFamily:R.interBold,fontSize:14,color:e.primaryBlack,marginTop:2},statLastAction:{fontFamily:R.interBold,fontSize:11,color:e.purple,marginTop:2},statLastTime:{fontFamily:R.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:R.interMedium,fontSize:11,color:e.grayTextWeak},sortLabel:{fontFamily:R.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:R.interBold,fontSize:10.5,lineHeight:13,color:e.grayTextWeak},methodBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:4,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:R.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:R.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:R.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:R.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:R.interBold,fontSize:8.5,lineHeight:11,color:e.violet600},actionPreviewRow:{flexDirection:"row",alignItems:"center",gap:4.5,minHeight:15},actionPreviewText:{fontFamily:Fe.select({ios:"Menlo",default:"monospace"}),fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},actionPreviewEmptyText:{fontFamily:R.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:R.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:R.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:R.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 Pt;