react-native-inapp-inspector 2.4.2 → 2.5.1

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

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

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

@@ -1,6 +1,6 @@
-import{useMemo as E,useState as A}from"react";import{Alert as Pe,Linking as X,Pressable as M,ScrollView as $,StyleSheet as Fe,Text as T,TextInput as Ie,TouchableOpacity as I,View as S}from"react-native";import B from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as C}from"../../styles/AppFonts";import{useTranslation as We}from"../../i18n";import Oe from"../SegmentedTabs";import Z from"../JsonViewer";import W from"../CopyButton";import Ae from"../ShareButton";import _ from"../CodeSnippet";import $e from"../HighlightText";import He from"../TouchableScale";import{formatDateTime as ee}from"../../helpers";import{shareSocketReport as Ne}from"../../helpers/shareFormatter";import{ClockIcon as De,ChevronIcon as Le,GlobeIcon as Ee,SendFrameIcon as H,ReceiveFrameIcon as Te,ClearIcon as Me,SearchIcon as Ke,ExternalLinkIcon as Ue,LayersIcon as Je,TerminalIcon as Ge,SizeIcon as Qe,FailIcon as Ye}from"../NetworkIcons";function be(o){return!o||o<=0?"0 B":o<1024?`${o} B`:o<1024*1024?`${(o/1024).toFixed(1)} KB`:`${(o/(1024*1024)).toFixed(2)} MB`}const Xe=({item:o})=>{const{t:V}=We(),[F,Se]=A("messages"),[z,K]=A(""),[v,N]=A("all"),[Ce,D]=A(new Set);if(!o)return null;const U=o.url.startsWith("wss://")||o.url.startsWith("https://"),R=o.client==="socket.io"||o.url.includes("/socket.io"),O=E(()=>{const b=(o.status||"open").toLowerCase();return b==="open"?e.greenColor:b==="connecting"?e.amber600:b==="error"?e.errorColor:e.slate500},[o.status]),j=()=>{const b=o.url.replace(/^wss:\/\//,"https://").replace(/^ws:\/\//,"http://");Pe.alert(V("common.openInBrowser")||"Open in Browser",`${V("common.openInBrowserPrompt")||"Open URL in browser?"}
+import{useMemo as E,useState as H}from"react";import{Alert as $e,Linking as Z,Pressable as M,ScrollView as F,StyleSheet as Ne,Text as T,TextInput as De,TouchableOpacity as W,View as S}from"react-native";import B from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as h}from"../../styles/AppFonts";import{useTranslation as Le}from"../../i18n";import{animateNextLayout as Ee,useInspector as Me}from"./InspectorContext";import Ke from"../SourcePageCard";import Ue from"../HeadersSection";import Je from"../SegmentedTabs";import _ from"../JsonViewer";import O from"../CopyButton";import Ge from"../ShareButton";import Te from"../CodeSnippet";import Qe from"../HighlightText";import Ye from"../TouchableScale";import{formatDateTime as Se,formatByteSize as Ce}from"../../helpers";import{shareSocketReport as Xe}from"../../helpers/shareFormatter";import{ClockIcon as Ze,ChevronIcon as _e,GlobeIcon as Tt,SendFrameIcon as $,ReceiveFrameIcon as Ve,ClearIcon as St,SearchIcon as Ct,ExternalLinkIcon as Vt,LayersIcon as Bt,TerminalIcon as Rt,SizeIcon as It,FailIcon as Pt,HeadersIcon as Ft}from"../NetworkIcons";const Wt=({item:Be})=>{const{t:C}=Le(),{selectedSocket:ve,logRouteMapRef:j}=Me(),o=Be||ve,[I,ze]=H("messages"),[z,K]=H(""),[v,N]=H("all"),[Re,D]=H(new Set);if(!o)return null;const U=o.url.startsWith("wss://")||o.url.startsWith("https://"),R=o.client==="socket.io"||o.url.includes("/socket.io"),A=E(()=>{const r=(o.status||"open").toLowerCase();return r==="open"?e.greenColor:r==="connecting"?e.amber600:r==="error"?e.errorColor:e.slate500},[o.status]),q=()=>{const r=o.url.replace(/^wss:\/\//,"https://").replace(/^ws:\/\//,"http://");$e.alert(C("common.openInBrowser")||"Open in Browser",`${C("common.openInBrowserPrompt")||"Open URL in browser?"}
 
-${b}`,[{text:V("common.cancel")||"Cancel",style:"cancel"},{text:V("common.open")||"Open",onPress:()=>{X.canOpenURL(b).then(k=>{k&&X.openURL(b).catch(()=>{})})}}])},he=async()=>{await Ne(o)},ke=b=>{D(k=>{const h=new Set(k);return h.has(b)?h.delete(b):h.add(b),h})},Ve=()=>{const b=new Set((o.frames||[]).map(k=>k.id));D(b)},Be=()=>{D(new Set)},q=E(()=>{let b=o.frames||[];if(v!=="all"&&(b=b.filter(k=>k.direction===v)),z.trim()){const k=z.trim().toLowerCase();b=b.filter(h=>!!(h.eventName&&h.eventName.toLowerCase().includes(k)||h.type&&h.type.toLowerCase().includes(k)||typeof h.data=="string"&&h.data.toLowerCase().includes(k)||h.data&&typeof h.data=="object"&&JSON.stringify(h.data).toLowerCase().includes(k)))}return b},[o.frames,v,z]),ve=(o.totalBytesSent||0)+(o.totalBytesReceived||0),J=E(()=>R?`import { io } from 'socket.io-client';
+${r}`,[{text:C("common.cancel")||"Cancel",style:"cancel"},{text:C("common.open")||"Open",onPress:()=>{Z.canOpenURL(r).then(V=>{V&&Z.openURL(r).catch(()=>{})})}}])},Ie=async()=>{await Xe(o)},Pe=r=>{D(V=>{const k=new Set(V);return k.has(r)?k.delete(r):k.add(r),k})},Fe=()=>{const r=new Set((o.frames||[]).map(V=>V.id));D(r)},We=()=>{D(new Set)},J=E(()=>{let r=o.frames||[];if(v!=="all"&&(r=r.filter(V=>V.direction===v)),z.trim()){const V=z.trim().toLowerCase();r=r.filter(k=>!!(k.eventName&&k.eventName.toLowerCase().includes(V)||k.type&&k.type.toLowerCase().includes(V)||typeof k.data=="string"&&k.data.toLowerCase().includes(V)||k.data&&typeof k.data=="object"&&JSON.stringify(k.data).toLowerCase().includes(V)))}return r},[o.frames,v,z]),Oe=(o.totalBytesSent||0)+(o.totalBytesReceived||0),G=E(()=>R?`import { io } from 'socket.io-client';
 
 const socket = io('${o.url}', {
   transports: ['websocket'],
@@ -31,7 +31,7 @@ ws.onerror = (error) => {
 
 ws.onclose = (event) => {
   console.log('WebSocket closed:', event.code, event.reason);
-};`,[o.url,o.protocols,o.query,R]),G=`wscat -c "${o.url}"`,Q=o.url.indexOf("://"),P=Q!==-1?o.url.substring(0,Q+3):"";return<S style={{flex:1,backgroundColor:e.contentBg}}>
+};`,[o.url,o.protocols,o.query,R]),Q=`wscat -c "${o.url}"`,Y=o.url.indexOf("://"),P=Y!==-1?o.url.substring(0,Y+3):"";return<S style={{flex:1,backgroundColor:e.contentBg}}>
       
       <S style={{paddingHorizontal:8,paddingTop:4}}>
         <S style={B.detailInfoBar}>
@@ -40,47 +40,47 @@ ws.onclose = (event) => {
             <S style={{flexDirection:"row",alignItems:"center",gap:5,flexWrap:"wrap",flex:1}}>
               
               <S style={[B.methodBadge,{backgroundColor:R?e.violet600:U?e.emerald600:e.blue600,paddingHorizontal:8,paddingVertical:3.5,borderRadius:6}]}>
-                <T style={[B.methodBadgeText,{color:e.white,fontSize:10.5,fontFamily:C.interBold}]}>
+                <T style={[B.methodBadgeText,{color:e.white,fontSize:10.5,fontFamily:h.interBold}]}>
                   {R?"SIO":U?"WSS":"WS"}
                 </T>
               </S>
 
               
               <S style={[B.chip,{backgroundColor:R?`${e.violet600}14`:`${e.sky500}14`,borderColor:R?`${e.violet600}30`:`${e.sky500}30`,paddingHorizontal:6,paddingVertical:3,borderRadius:6}]}>
-                <T style={[B.chipText,{fontFamily:C.interBold,fontSize:9.5,color:R?e.violet600:e.sky600}]}>
+                <T style={[B.chipText,{fontFamily:h.interBold,fontSize:9.5,color:R?e.violet600:e.sky600}]}>
                   {(o.client||"WEBSOCKET").toUpperCase()}
                 </T>
               </S>
 
               
-              <S style={[B.chip,{backgroundColor:`${O}18`,borderColor:`${O}40`,paddingHorizontal:7,paddingVertical:3,borderRadius:6}]}>
-                {o.status==="error"?<Ye size={8}color={e.errorColor}/>:<S style={{width:6,height:6,borderRadius:3,backgroundColor:O}}/>}
-                <T style={[B.chipText,{color:O,fontFamily:C.interBold,fontSize:10.5}]}>
+              <S style={[B.chip,{backgroundColor:`${A}18`,borderColor:`${A}40`,paddingHorizontal:7,paddingVertical:3,borderRadius:6}]}>
+                {o.status==="error"?<Pt size={8}color={e.errorColor}/>:<S style={{width:6,height:6,borderRadius:3,backgroundColor:A}}/>}
+                <T style={[B.chipText,{color:A,fontFamily:h.interBold,fontSize:10.5}]}>
                   {(o.status||"open").toUpperCase()}
                 </T>
               </S>
 
               
               <S style={[B.chip,{backgroundColor:`${e.brandPurple}14`,borderColor:`${e.brandPurple}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
-                <De color={e.brandPurple}size={10}/>
-                <T style={[B.chipText,{color:e.brandPurple,fontFamily:C.interBold,fontSize:10.5}]}>
+                <Ze color={e.brandPurple}size={10}/>
+                <T style={[B.chipText,{color:e.brandPurple,fontFamily:h.interBold,fontSize:10.5}]}>
                   {o.duration!=null?`${o.duration}ms`:"Active"}
                 </T>
               </S>
 
               
               <S style={[B.chip,{backgroundColor:`${e.teal600}14`,borderColor:`${e.teal600}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
-                <H color={e.teal600}size={10}/>
-                <T style={[B.chipText,{color:e.teal600,fontFamily:C.interBold,fontSize:10.5}]}>
+                <$ color={e.teal600}size={10}/>
+                <T style={[B.chipText,{color:e.teal600,fontFamily:h.interBold,fontSize:10.5}]}>
                   {o.frames?.length||0} frames
                 </T>
               </S>
 
               
               <S style={[B.chip,{backgroundColor:`${e.sky600}14`,borderColor:`${e.sky600}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
-                <Qe color={e.sky600}size={10}/>
-                <T style={[B.chipText,{color:e.sky600,fontFamily:C.interBold,fontSize:10.5}]}>
-                  {be(ve)}
+                <It color={e.sky600}size={10}/>
+                <T style={[B.chipText,{color:e.sky600,fontFamily:h.interBold,fontSize:10.5}]}>
+                  {Ce(Oe)}
                 </T>
               </S>
             </S>
@@ -92,31 +92,31 @@ ws.onclose = (event) => {
             <S style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"nowrap",gap:6}}>
               <S style={{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1,minWidth:0}}>
                 {P?<S style={{backgroundColor:P.startsWith("wss")||P.startsWith("https")?`${e.green600}18`:`${e.amber500}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4}}>
-                    <T style={{fontFamily:C.interBold,fontSize:9,color:P.startsWith("wss")||P.startsWith("https")?e.green600:e.amber500}}>
+                    <T style={{fontFamily:h.interBold,fontSize:9,color:P.startsWith("wss")||P.startsWith("https")?e.green600:e.amber500}}>
                       {P.replace("://","").toUpperCase()}
                     </T>
                   </S>:null}
 
-                <T style={{fontFamily:C.interBold,fontSize:10,color:e.grayTextWeak,letterSpacing:.4,textTransform:"uppercase"}}numberOfLines={1}>
+                <T style={{fontFamily:h.interBold,fontSize:10,color:e.grayTextWeak,letterSpacing:.4,textTransform:"uppercase"}}numberOfLines={1}>
                   ENDPOINT URL
                 </T>
               </S>
 
               
               <S style={{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0}}>
-                <W value={G}label="wscat"iconType="terminal"/>
-                <Ae onShare={he}/>
-                <W value={J}label="JS"iconType="fetch"/>
-                <W value={o.url}label="URL"iconType="copy"/>
-                <He style={[B.iconSquareBtn,{backgroundColor:`${e.sky600}15`,borderColor:`${e.sky600}35`}]}onPress={j}hitSlop={10}accessibilityLabel="Open in Browser">
-                  <Ue color={e.sky600}size={13}/>
-                </He>
+                <O value={Q}label="wscat"iconType="terminal"/>
+                <Ge onShare={Ie}/>
+                <O value={G}label="JS"iconType="fetch"/>
+                <O value={o.url}label="URL"iconType="copy"/>
+                <Ye style={[B.iconSquareBtn,{backgroundColor:`${e.sky600}15`,borderColor:`${e.sky600}35`}]}onPress={q}hitSlop={10}accessibilityLabel="Open in Browser">
+                  <Vt color={e.sky600}size={13}/>
+                </Ye>
               </S>
             </S>
 
             
-            <M onPress={j}>
-              <T selectable={!0}style={{fontFamily:C.interMedium,fontSize:12.5,color:e.skyBlue,textDecorationLine:"underline",lineHeight:18}}>
+            <M onPress={q}>
+              <T selectable={!0}style={{fontFamily:h.interMedium,fontSize:12.5,color:e.skyBlue,textDecorationLine:"underline",lineHeight:18}}>
                 {o.url}
               </T>
             </M>
@@ -125,193 +125,203 @@ ws.onclose = (event) => {
       </S>
 
       
-      <Oe tabs={[{key:"messages",label:`${V("socket.messages","Messages")} (${o.frames?.length||0})`,themeColor:e.violet600,icon:b=><H size={12}color={b?e.white:e.grayText}/>},{key:"overview",label:V("socket.overview","Overview"),themeColor:e.sky600,icon:b=><Ee size={12}color={b?e.white:e.grayText}/>},{key:"params",label:`${V("socket.params","Params")} (${Object.keys(o.query||{}).length})`,themeColor:e.teal600,icon:b=><Je size={12}color={b?e.white:e.grayText}/>},{key:"raw",label:V("socket.rawAndCode","Raw & Code"),themeColor:e.amber600,icon:b=><Ge size={12}color={b?e.white:e.grayText}/>}]}activeKey={F}onChange={Se}style={{marginHorizontal:6,marginBottom:10,marginTop:6}}/>
+      <Je tabs={[{key:"messages",label:`${C("socket.messages","Messages")} (${o.frames?.length||0})`,themeColor:e.violet600,icon:r=><$ size={12}color={r?e.white:e.grayText}/>},{key:"overview",label:C("socket.overview","Overview"),themeColor:e.sky600,icon:r=><Tt size={12}color={r?e.white:e.grayText}/>},...o.headers&&Object.keys(o.headers).length>0?[{key:"headers",label:`${C("network.detailTabs.headers","Headers")} (${Object.keys(o.headers).length})`,themeColor:e.purple,icon:r=><Ft size={12}color={r?e.white:e.grayText}/>}]:[],{key:"params",label:`${C("socket.params","Params")} (${Object.keys(o.query||{}).length})`,themeColor:e.teal600,icon:r=><Bt size={12}color={r?e.white:e.grayText}/>},{key:"raw",label:C("socket.rawAndCode","Raw & Code"),themeColor:e.amber600,icon:r=><Rt size={12}color={r?e.white:e.grayText}/>}]}activeKey={I}onChange={r=>{Ee(),ze(r)}}style={{marginHorizontal:6,marginBottom:10,marginTop:6}}/>
 
       
-      {F==="messages"&&<S style={{flex:1}}>
+      {I==="messages"&&<S style={{flex:1}}>
           
           <S style={t.frameControlBar}>
             <S style={t.frameSearchBar}>
-              <Ke size={13}color={e.grayTextWeak}/>
-              <Ie style={t.frameSearchInput}placeholder={V("socket.searchFramesPlaceholder","Search frame payloads or event names...")}placeholderTextColor={e.grayTextWeak}value={z}onChangeText={K}clearButtonMode="while-editing"/>
+              <Ct size={13}color={e.grayTextWeak}/>
+              <De style={t.frameSearchInput}placeholder={C("socket.searchFramesPlaceholder","Search frame payloads or event names...")}placeholderTextColor={e.grayTextWeak}value={z}onChangeText={K}clearButtonMode="while-editing"/>
               {z.length>0&&<M onPress={()=>K("")}>
-                  <Me size={12}color={e.grayTextWeak}/>
+                  <St size={12}color={e.grayTextWeak}/>
                 </M>}
             </S>
 
             
             <S style={t.frameFilterRow}>
               <S style={t.dirPillGroup}>
-                <I onPress={()=>N("all")}style={[t.dirPill,v==="all"&&t.dirPillActive]}>
+                <W onPress={()=>N("all")}style={[t.dirPill,v==="all"&&t.dirPillActive]}>
                   <T style={[t.dirPillText,v==="all"&&t.dirPillTextActive]}>
-                    {V("common.all","All")}
+                    {C("common.all","All")}
                   </T>
-                </I>
+                </W>
 
-                <I onPress={()=>N("send")}style={[t.dirPill,v==="send"&&t.dirPillActive,{flexDirection:"row",alignItems:"center",gap:4}]}>
-                  <H size={10}color={v==="send"?e.white:e.emerald600}/>
+                <W onPress={()=>N("send")}style={[t.dirPill,v==="send"&&t.dirPillActive,{flexDirection:"row",alignItems:"center",gap:4}]}>
+                  <$ size={10}color={v==="send"?e.white:e.emerald600}/>
                   <T style={[t.dirPillText,v==="send"&&t.dirPillTextActive]}>
-                    {V("socket.sent","Sent")}
+                    {C("socket.sent","Sent")}
                   </T>
-                </I>
+                </W>
 
-                <I onPress={()=>N("receive")}style={[t.dirPill,v==="receive"&&t.dirPillActive,{flexDirection:"row",alignItems:"center",gap:4}]}>
-                  <Te size={10}color={v==="receive"?e.white:e.sky600}/>
+                <W onPress={()=>N("receive")}style={[t.dirPill,v==="receive"&&t.dirPillActive,{flexDirection:"row",alignItems:"center",gap:4}]}>
+                  <Ve size={10}color={v==="receive"?e.white:e.sky600}/>
                   <T style={[t.dirPillText,v==="receive"&&t.dirPillTextActive]}>
-                    {V("socket.recv","Recv")}
+                    {C("socket.recv","Recv")}
                   </T>
-                </I>
+                </W>
               </S>
 
               <S style={t.expandGroup}>
-                <I onPress={Ve}style={t.textBtn}>
-                  <T style={t.textBtnLabel}>{V("common.expandAll","Expand All")}</T>
-                </I>
+                <W onPress={Fe}style={t.textBtn}>
+                  <T style={t.textBtnLabel}>{C("common.expandAll","Expand All")}</T>
+                </W>
                 <T style={t.textBtnSep}>•</T>
-                <I onPress={Be}style={t.textBtn}>
-                  <T style={t.textBtnLabel}>{V("common.collapseAll","Collapse All")}</T>
-                </I>
+                <W onPress={We}style={t.textBtn}>
+                  <T style={t.textBtnLabel}>{C("common.collapseAll","Collapse All")}</T>
+                </W>
               </S>
             </S>
           </S>
 
           
-          <$ style={t.framesScrollView}contentContainerStyle={{padding:12}}>
-            {q.length===0?<S style={t.emptyFrames}>
+          <F style={t.framesScrollView}contentContainerStyle={{padding:12}}>
+            {J.length===0?<S style={t.emptyFrames}>
                 <T style={t.emptyFramesText}>
                   {o.frames?.length===0?"No messages transferred on this connection yet":"No frames match the active search or direction filter"}
                 </T>
-              </S>:q.map((b,k)=>{const h=b.direction==="send",Y=Ce.has(b.id),L=h?e.blue600:e.emerald600,ze=h?`${e.blue600}12`:`${e.emerald600}12`,Re=b.timestamp-o.startTime;return<S key={b.id}style={t.frameCard}>
+              </S>:J.map((r,V)=>{const k=r.direction==="send",X=Re.has(r.id),L=k?e.blue600:e.emerald600,Ae=k?`${e.blue600}12`:`${e.emerald600}12`,He=r.timestamp-o.startTime;return<S key={r.id}style={t.frameCard}>
                     
-                    <M onPress={()=>ke(b.id)}style={t.frameCardHeader}>
+                    <M onPress={()=>Pe(r.id)}style={t.frameCardHeader}>
                       <S style={t.frameHeaderLeft}>
-                        <S style={[t.dirBadge,{backgroundColor:ze}]}>
-                          {h?<H size={10}color={L}/>:<Te size={10}color={L}/>}
+                        <S style={[t.dirBadge,{backgroundColor:Ae}]}>
+                          {k?<$ size={10}color={L}/>:<Ve size={10}color={L}/>}
                           <T style={[t.dirBadgeText,{color:L}]}>
-                            {h?"SENT":"RECV"}
+                            {k?"SENT":"RECV"}
                           </T>
                         </S>
 
-                        {b.eventName&&<S style={t.eventBadge}>
+                        {r.eventName&&<S style={t.eventBadge}>
                             <T style={t.eventBadgeText}numberOfLines={1}>
-                              {b.eventName}
+                              {r.eventName}
                             </T>
                           </S>}
 
-                        <T style={t.frameIndexText}>#{k+1}</T>
+                        <T style={t.frameIndexText}>#{V+1}</T>
                       </S>
 
                       <S style={t.frameHeaderRight}>
                         <T style={t.frameOffsetTime}>
-                          +{Re}ms
+                          +{He}ms
                         </T>
                         <S style={t.frameSizePill}>
                           <T style={t.frameSizeText}>
-                            {be(b.size||0)}
+                            {Ce(r.size||0)}
                           </T>
                         </S>
-                        <W value={b.raw??b.data}label="Frame"/>
-                        <Le direction={Y?"up":"down"}size={12}color={e.grayTextWeak}/>
+                        <O value={r.raw??r.data}label="Frame"/>
+                        <_e direction={X?"up":"down"}size={12}color={e.grayTextWeak}/>
                       </S>
                     </M>
 
                     
                     <S style={t.frameBody}>
-                      {typeof b.data=="object"&&b.data!==null?<Z data={b.data}search={z}forceOpen={Y}/>:<T style={t.frameRawText}>
-                          <$e text={String(b.data)}search={z}/>
+                      {typeof r.data=="object"&&r.data!==null?<_ data={r.data}search={z}forceOpen={X}/>:<T style={t.frameRawText}>
+                          <Qe text={String(r.data)}search={z}/>
                         </T>}
                     </S>
                   </S>})}
-          </$>
+          </F>
         </S>}
 
       
-      {F==="overview"&&<$ style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
+      {I==="overview"&&<F style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
           <S style={t.sectionCard}>
-            <T style={t.sectionHeading}>CONNECTION DETAILS</T>
+            <T style={t.sectionHeading}>{C("socket.connectionDetails","CONNECTION DETAILS")}</T>
 
             <S style={t.infoRow}>
-              <T style={t.infoKey}>URL</T>
+              <T style={t.infoKey}>{C("socket.url","URL")}</T>
               <T style={t.infoVal}selectable>{o.url}</T>
             </S>
 
             <S style={t.infoRow}>
-              <T style={t.infoKey}>Client Engine</T>
+              <T style={t.infoKey}>{C("socket.clientEngine","Client Engine")}</T>
               <T style={t.infoVal}>{o.client?.toUpperCase()||"WEBSOCKET"}</T>
             </S>
 
             <S style={t.infoRow}>
-              <T style={t.infoKey}>Ready State</T>
+              <T style={t.infoKey}>{C("socket.readyState","Ready State")}</T>
               <T style={t.infoVal}>
                 {o.readyState===1?"1 (OPEN)":o.readyState===0?"0 (CONNECTING)":o.readyState===2?"2 (CLOSING)":"3 (CLOSED)"}
               </T>
             </S>
 
             <S style={t.infoRow}>
-              <T style={t.infoKey}>Connected At</T>
-              <T style={t.infoVal}>{ee(o.startTime)}</T>
+              <T style={t.infoKey}>{C("socket.connectedAt","Connected At")}</T>
+              <T style={t.infoVal}>{Se(o.startTime)}</T>
             </S>
 
             {o.endTime&&<S style={t.infoRow}>
-                <T style={t.infoKey}>Closed At</T>
-                <T style={t.infoVal}>{ee(o.endTime)}</T>
+                <T style={t.infoKey}>{C("socket.closedAt","Closed At")}</T>
+                <T style={t.infoVal}>{Se(o.endTime)}</T>
               </S>}
 
             {o.closeCode!=null&&<S style={t.infoRow}>
-                <T style={t.infoKey}>Close Code & Reason</T>
+                <T style={t.infoKey}>{C("socket.closeCodeReason","Close Code & Reason")}</T>
                 <T style={t.infoVal}>{o.closeCode} ({o.closeReason||"N/A"})</T>
               </S>}
 
             {o.protocols&&<S style={t.infoRow}>
-                <T style={t.infoKey}>Subprotocols</T>
+                <T style={t.infoKey}>{C("socket.subprotocols","Subprotocols")}</T>
                 <T style={t.infoVal}>
                   {Array.isArray(o.protocols)?o.protocols.join(", "):o.protocols}
                 </T>
               </S>}
 
             {o.caller&&<S style={t.infoRow}>
-                <T style={t.infoKey}>Caller Stack</T>
-                <T style={[t.infoVal,{fontFamily:C.interMedium,color:e.brandPurple}]}selectable>
+                <T style={t.infoKey}>{C("socket.callerStack","Caller Stack")}</T>
+                <T style={[t.infoVal,{fontFamily:h.interMedium,color:e.brandPurple}]}selectable>
                   {o.caller}
                 </T>
               </S>}
 
             {o.error&&<S style={t.infoRow}>
-                <T style={t.infoKey}>Error</T>
+                <T style={t.infoKey}>{C("socket.error","Error")}</T>
                 <T style={[t.infoVal,{color:e.errorColor}]}selectable>
                   {o.error}
                 </T>
               </S>}
           </S>
-        </$>}
+
+          
+          {(()=>{const r=o.routeInfo||j?.current&&j.current.get(o.id);return!r||!r.path||r.path==="Navigators"?null:<S style={{marginTop:12}}>
+                <Ke routeInfo={r}/>
+              </S>})()}
+        </F>}
+
+      
+      {I==="headers"&&o.headers&&<F style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
+          <Ue title={C("socket.handshakeHeaders","Handshake Headers")}headers={o.headers}search=""resetKey={o.id}/>
+        </F>}
 
       
-      {F==="params"&&<$ style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
+      {I==="params"&&<F style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
           <S style={t.sectionCard}>
-            <T style={t.sectionHeading}>HANDSHAKE QUERY PARAMETERS</T>
-            {!o.query||Object.keys(o.query).length===0?<T style={t.emptySectionText}>No query parameters passed in connection URL</T>:Object.entries(o.query).map(([b,k])=><S key={b}style={t.paramRow}>
-                  <T style={t.paramKey}selectable>{b}</T>
-                  <T style={t.paramVal}selectable>{k}</T>
-                  <W value={k}label={b}/>
+            <T style={t.sectionHeading}>{C("socket.handshakeParams","HANDSHAKE QUERY PARAMETERS")}</T>
+            {!o.query||Object.keys(o.query).length===0?<T style={t.emptySectionText}>{C("socket.noQueryParams","No query parameters passed in connection URL")}</T>:Object.entries(o.query).map(([r,V])=><S key={r}style={t.paramRow}>
+                  <T style={t.paramKey}selectable>{r}</T>
+                  <T style={t.paramVal}selectable>{V}</T>
+                  <O value={V}label={r}/>
                 </S>)}
           </S>
-        </$>}
+        </F>}
 
       
-      {F==="raw"&&<$ style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
+      {I==="raw"&&<F style={t.tabContentScroll}contentContainerStyle={{padding:12}}>
           <S style={t.sectionCard}>
-            <T style={t.sectionHeading}>JAVASCRIPT CLIENT CODE</T>
-            <_ code={J}language="javascript"/>
+            <T style={t.sectionHeading}>{C("socket.jsClientCode","JAVASCRIPT CLIENT CODE")}</T>
+            <Te code={G}language="javascript"/>
           </S>
 
           <S style={[t.sectionCard,{marginTop:14}]}>
-            <T style={t.sectionHeading}>TERMINAL WSCAT COMMAND</T>
-            <_ code={G}language="javascript"/>
+            <T style={t.sectionHeading}>{C("socket.terminalWscat","TERMINAL WSCAT COMMAND")}</T>
+            <Te code={Q}language="javascript"/>
           </S>
 
           <S style={[t.sectionCard,{marginTop:14}]}>
-            <T style={t.sectionHeading}>RAW CONNECTION JSON DUMP</T>
-            <Z data={o}/>
+            <T style={t.sectionHeading}>{C("socket.rawDump","RAW CONNECTION JSON DUMP")}</T>
+            <_ data={o}/>
           </S>
-        </$>}
-    </S>};export default Xe;const t=Fe.create({frameControlBar:{padding:10,backgroundColor:e.graySurface,borderBottomWidth:1,borderBottomColor:e.dividerColor,gap:8},frameSearchBar:{flexDirection:"row",alignItems:"center",backgroundColor:e.contentBg,borderRadius:8,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:8,height:34,gap:6},frameSearchInput:{flex:1,fontFamily:C.interRegular,fontSize:12,color:e.grayTextStrong,paddingVertical:0},frameFilterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},dirPillGroup:{flexDirection:"row",gap:6},dirPill:{paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:e.dividerColor,backgroundColor:e.contentBg},dirPillActive:{backgroundColor:`${e.brandPurple}18`,borderColor:e.brandPurple},dirPillText:{fontFamily:C.interMedium,fontSize:11,color:e.grayTextWeak},dirPillTextActive:{color:e.brandPurple,fontFamily:C.interBold},expandGroup:{flexDirection:"row",alignItems:"center",gap:4},textBtn:{paddingVertical:2,paddingHorizontal:4},textBtnLabel:{fontFamily:C.interMedium,fontSize:11,color:e.brandPurple},textBtnSep:{color:e.grayTextWeak,fontSize:10},framesScrollView:{flex:1},emptyFrames:{padding:32,alignItems:"center"},emptyFramesText:{fontFamily:C.interMedium,fontSize:12.5,color:e.grayTextWeak,textAlign:"center"},frameCard:{backgroundColor:e.contentBg,borderRadius:8,borderWidth:1,borderColor:e.dividerColor,marginBottom:8,overflow:"hidden"},frameCardHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:10,paddingVertical:7,backgroundColor:e.graySurface,borderBottomWidth:1,borderBottomColor:e.dividerColor},frameHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6},dirBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:5,paddingVertical:2,borderRadius:4,gap:3},dirBadgeText:{fontFamily:C.interBold,fontSize:9.5},eventBadge:{backgroundColor:`${e.violet600}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4,maxWidth:130},eventBadgeText:{fontFamily:C.interBold,fontSize:10,color:e.violet600},frameIndexText:{fontFamily:C.interMedium,fontSize:10,color:e.grayTextWeak},frameHeaderRight:{flexDirection:"row",alignItems:"center",gap:6},frameOffsetTime:{fontFamily:C.interRegular,fontSize:10,color:e.grayTextWeak},frameSizePill:{backgroundColor:`${e.slate400}18`,paddingHorizontal:4,paddingVertical:1,borderRadius:4},frameSizeText:{fontFamily:C.interMedium,fontSize:9.5,color:e.grayTextStrong},frameBody:{padding:8},frameRawText:{fontFamily:C.interRegular,fontSize:12,color:e.grayTextStrong,lineHeight:16},tabContentScroll:{flex:1},sectionCard:{backgroundColor:e.contentBg,borderRadius:10,borderWidth:1,borderColor:e.dividerColor,padding:12},sectionHeading:{fontFamily:C.interBold,fontSize:11,color:e.grayTextWeak,letterSpacing:.6,marginBottom:10},infoRow:{paddingVertical:8,borderBottomWidth:1,borderBottomColor:e.dividerColor},infoKey:{fontFamily:C.interMedium,fontSize:11,color:e.grayTextWeak,marginBottom:2},infoVal:{fontFamily:C.interSemiBold,fontSize:12.5,color:e.grayTextStrong,lineHeight:18},emptySectionText:{fontFamily:C.interRegular,fontSize:12,color:e.grayTextWeak,fontStyle:"italic",paddingVertical:8},paramRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:8,borderBottomWidth:1,borderBottomColor:e.dividerColor,gap:8},paramKey:{fontFamily:C.interBold,fontSize:12,color:e.brandPurple,width:"30%"},paramVal:{flex:1,fontFamily:C.interMedium,fontSize:12,color:e.grayTextStrong}});
+        </F>}
+    </S>};export default Wt;const t=Ne.create({frameControlBar:{padding:10,backgroundColor:e.graySurface,borderBottomWidth:1,borderBottomColor:e.dividerColor,gap:8},frameSearchBar:{flexDirection:"row",alignItems:"center",backgroundColor:e.contentBg,borderRadius:8,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:8,height:34,gap:6},frameSearchInput:{flex:1,fontFamily:h.interRegular,fontSize:12,color:e.grayTextStrong,paddingVertical:0},frameFilterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},dirPillGroup:{flexDirection:"row",gap:6},dirPill:{paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:e.dividerColor,backgroundColor:e.contentBg},dirPillActive:{backgroundColor:`${e.brandPurple}18`,borderColor:e.brandPurple},dirPillText:{fontFamily:h.interMedium,fontSize:11,color:e.grayTextWeak},dirPillTextActive:{color:e.brandPurple,fontFamily:h.interBold},expandGroup:{flexDirection:"row",alignItems:"center",gap:4},textBtn:{paddingVertical:2,paddingHorizontal:4},textBtnLabel:{fontFamily:h.interMedium,fontSize:11,color:e.brandPurple},textBtnSep:{color:e.grayTextWeak,fontSize:10},framesScrollView:{flex:1},emptyFrames:{padding:32,alignItems:"center"},emptyFramesText:{fontFamily:h.interMedium,fontSize:12.5,color:e.grayTextWeak,textAlign:"center"},frameCard:{backgroundColor:e.contentBg,borderRadius:8,borderWidth:1,borderColor:e.dividerColor,marginBottom:8,overflow:"hidden"},frameCardHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:10,paddingVertical:7,backgroundColor:e.graySurface,borderBottomWidth:1,borderBottomColor:e.dividerColor},frameHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6},dirBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:5,paddingVertical:2,borderRadius:4,gap:3},dirBadgeText:{fontFamily:h.interBold,fontSize:9.5},eventBadge:{backgroundColor:`${e.violet600}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4,maxWidth:130},eventBadgeText:{fontFamily:h.interBold,fontSize:10,color:e.violet600},frameIndexText:{fontFamily:h.interMedium,fontSize:10,color:e.grayTextWeak},frameHeaderRight:{flexDirection:"row",alignItems:"center",gap:6},frameOffsetTime:{fontFamily:h.interRegular,fontSize:10,color:e.grayTextWeak},frameSizePill:{backgroundColor:`${e.slate400}18`,paddingHorizontal:4,paddingVertical:1,borderRadius:4},frameSizeText:{fontFamily:h.interMedium,fontSize:9.5,color:e.grayTextStrong},frameBody:{padding:8},frameRawText:{fontFamily:h.interRegular,fontSize:12,color:e.grayTextStrong,lineHeight:16},tabContentScroll:{flex:1},sectionCard:{backgroundColor:e.contentBg,borderRadius:10,borderWidth:1,borderColor:e.dividerColor,padding:12},sectionHeading:{fontFamily:h.interBold,fontSize:11,color:e.grayTextWeak,letterSpacing:.6,marginBottom:10},infoRow:{paddingVertical:8,borderBottomWidth:1,borderBottomColor:e.dividerColor},infoKey:{fontFamily:h.interMedium,fontSize:11,color:e.grayTextWeak,marginBottom:2},infoVal:{fontFamily:h.interSemiBold,fontSize:12.5,color:e.grayTextStrong,lineHeight:18},emptySectionText:{fontFamily:h.interRegular,fontSize:12,color:e.grayTextWeak,fontStyle:"italic",paddingVertical:8},paramRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:8,borderBottomWidth:1,borderBottomColor:e.dividerColor,gap:8},paramKey:{fontFamily:h.interBold,fontSize:12,color:e.brandPurple,width:"30%"},paramVal:{flex:1,fontFamily:h.interMedium,fontSize:12,color:e.grayTextStrong}});