react-native-inapp-inspector 2.3.24 → 2.3.25

package/dist/esm/components/JsonViewer.js

@@ -1,185 +1,190 @@
-import ge,{useState as H,useEffect as ee,useMemo as v}from"react";import{ScrollView as I,View as F,Text as T,StyleSheet as ue,TouchableOpacity as A,Platform as we}from"react-native";import{useTranslation as Te}from"../i18n";import Ce from"./TreeNode";import L from"./HighlightText";import Se from"./TouchableScale";import{PrettyIcon as Ve,RawIcon as Be,TableIcon as Ee,ChevronIcon as De,CopyIcon as Re,CheckIcon as We}from"./NetworkIcons";import{getSize as Ie,copyToClipboard as Ae}from"../helpers";import{triggerNativeHaptic as Oe}from"../native/NativeInspector";const C=we.select({ios:"Menlo",android:"monospace",default:"monospace"}),He=t=>t===null?{label:"null",color:"#E11D48",bg:"#FFF1F2",border:"#FECDD3"}:t===void 0?{label:"undef",color:"#E11D48",bg:"#FFF1F2",border:"#FECDD3"}:Array.isArray(t)?{label:`arr[${t.length}]`,color:"#2563EB",bg:"#EFF6FF",border:"#BFDBFE"}:typeof t=="object"?{label:`obj{${Object.keys(t).length}}`,color:"#7C3AED",bg:"#F5F3FF",border:"#DDD6FE"}:typeof t=="number"?{label:"num",color:"#D97706",bg:"#FEF3C7",border:"#FDE68A"}:typeof t=="boolean"?{label:"bool",color:"#DB2777",bg:"#FDF2F8",border:"#FBCFE8"}:{label:"str",color:"#059669",bg:"#ECFDF5",border:"#A7F3D0"},Le=ge.memo(({itemKey:t,val:f,search:O,index:$})=>{const[k,z]=H(!1),P=f!==null&&typeof f=="object",E=He(f);let V="";if(f===null)V="null";else if(f===void 0)V="undefined";else if(P)try{V=JSON.stringify(f,null,2)}catch{V=String(f)}else V=String(f);const _=V.includes(`
-`)||V.length>80;return<F style={[e.tableRow,$%2===1&&e.tableRowAlt]}>
-      
-      <F style={e.tableColKey}>
-        <L text={t}search={O}style={e.tableCellKey}highlightStyle={e.highlight}/>
-        <F style={[e.typePill,{backgroundColor:E.bg,borderColor:E.border}]}>
-          <T style={[e.typePillText,{color:E.color}]}>
-            {E.label}
+import Q,{useState as L,useEffect as le,useMemo as v,useCallback as He}from"react";import{ScrollView as O,View as T,Text as S,StyleSheet as Ie,TouchableOpacity as Te,Platform as Ae}from"react-native";import{useTranslation as je}from"../i18n";import Pe from"./TreeNode";import X from"./HighlightText";import N from"./TouchableScale";import{PrettyIcon as Oe,RawIcon as Le,TableIcon as Ne,ChevronIcon as De,CopyIcon as Ee,CheckIcon as Je}from"./NetworkIcons";import{AppColors as t}from"../styles/AppColors";import{getSize as Ke,copyToClipboard as Me}from"../helpers";import{triggerNativeHaptic as $e}from"../native/NativeInspector";const V=Ae.select({ios:"Menlo",android:"monospace",default:"monospace"}),Ge=o=>o===null?{label:"null",color:t.errorColor,bg:t.errorCardBg,border:t.errorBorder}:o===void 0?{label:"undef",color:t.errorColor,bg:t.errorCardBg,border:t.errorBorder}:Array.isArray(o)?{label:`arr[${o.length}]`,color:t.blue600,bg:t.blueBg,border:t.sky100}:typeof o=="object"?{label:`obj{${Object.keys(o).length}}`,color:t.violet600,bg:t.purple50,border:t.purple200}:typeof o=="number"?{label:"num",color:t.amber600,bg:t.amber100,border:t.amber200}:typeof o=="boolean"?{label:"bool",color:t.pink600,bg:t.roseBg,border:t.roseBorder}:{label:"str",color:t.emerald600,bg:t.emeraldBg,border:t.emeraldBorder},Ce=Q.memo(({text:o,search:C,detectLinks:A})=>{const k=o.trim();let F=e.rawMonospaceText;return k.startsWith('"')?F=e.syntaxString:k==="null"||k.startsWith("null,")||k==="undefined"?F=e.syntaxNull:k==="true"||k.startsWith("true,")||k==="false"||k.startsWith("false,")?F=e.syntaxBoolean:/^-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?,?$/.test(k)&&(F=e.syntaxNumber),<X text={o}search={C}detectLinks={A}style={F}selectable={!0}highlightStyle={e.highlight}/>}),Ye=Q.memo(({line:o,search:C,detectLinks:A})=>{const k=o.match(/^(\s+)(.*)$/),F=k?k[1]:"",j=k?k[2]:o,P=F?F.replace(/  /g,"\xB7 ").replace(/ /g,"\xB7"):"",W=j.match(/^("(?:[^"\\]|\\.)*")(\s*:\s*)(.*)$/);if(W){const H=W[1],J=W[2],z=W[3];return<T style={e.rawLineContentRow}>
+          {P.length>0&&<S style={e.indentDots}>{P}</S>}
+          <X text={H}search={C}style={e.syntaxKey}selectable={!0}highlightStyle={e.highlight}/>
+          <S style={e.syntaxColon}>{J}</S>
+          <Ce text={z}search={C}detectLinks={A}/>
+        </T>}return<T style={e.rawLineContentRow}>
+        {P.length>0&&<S style={e.indentDots}>{P}</S>}
+        <Ce text={j}search={C}detectLinks={A}/>
+      </T>}),Ue=Q.memo(({itemKey:o,val:C,search:A,index:k})=>{const[F,j]=L(!1),P=C!==null&&typeof C=="object",W=Ge(C);let H="";if(C===null)H="null";else if(C===void 0)H="undefined";else if(P)try{H=JSON.stringify(C,null,2)}catch{H=String(C)}else H=String(C);const J=H.includes(`
+`)||H.length>80;return<T style={[e.tableRow,k%2===1&&e.tableRowAlt]}>
+        
+        <T style={e.tableColKey}>
+          <X text={o}search={A}style={e.tableCellKey}highlightStyle={e.highlight}/>
+          <T style={[e.typePill,{backgroundColor:W.bg,borderColor:W.border}]}>
+            <S style={[e.typePillText,{color:W.color}]}>
+              {W.label}
+            </S>
           </T>
-        </F>
-      </F>
+        </T>
 
-      
-      <F style={e.tableColVal}>
-        <F style={P?e.tableCodeBox:void 0}>
-          <L text={V}search={O}style={[e.tableCellValue,f==null?e.syntaxNull:void 0,typeof f=="number"?e.syntaxNumber:void 0,typeof f=="boolean"?e.syntaxBoolean:void 0,typeof f=="string"?e.syntaxString:void 0]}highlightStyle={e.highlight}numberOfLines={k?void 0:3}selectable={!0}/>
-        </F>
-        {_&&<A onPress={()=>z(R=>!R)}hitSlop={6}style={e.showMoreBtn}>
-            <T style={e.showMoreText}>
-              {k?"Collapse":"Expand"}
-            </T>
-            <De direction={k?"up":"down"}size={9}color="#4F46E5"/>
-          </A>}
-      </F>
-    </F>}),Pe=ge.memo(({data:t,search:f,forceOpen:O,defaultExpandDepth:$=1,wrap:k,fullHeight:z=!1,maxHeight:P,mode:E,onModeChange:V,hideTabs:_=!1})=>{const{t:R}=Te(),[ye,te]=H(E??"raw"),[oe,re]=H(!1),[N,le]=H(k??!1),[G,ne]=H(O),S=V&&E?E:ye,Y=m=>{te(m),V&&V(m)};ee(()=>{k!==void 0&&le(k)},[k]),ee(()=>{O!==void 0&&ne(O)},[O]);const ie=v(()=>{if(t==null)return"";if(typeof t=="string")return t;try{return JSON.stringify(t,null,2)??""}catch{return String(t)||""}},[t]),D=v(()=>{if(typeof t=="string")return t;try{return JSON.stringify(t)??""}catch{return String(t)||""}},[t]),pe=D,[be,ae]=H(!1),se=5e4,q=typeof D=="string"?D:"",U=q.length>se&&!be,Q=U?q.slice(0,se):q,Ne=typeof ie=="string"?ie:"",K=v(()=>Q?Q.split(`
-`):[""],[Q]),ce=K.length,Fe=v(()=>Ie(t),[t]);ee(()=>{E&&te(E)},[E]);const fe=()=>{Oe("success"),Ae(pe||D,"JSON"),re(!0),setTimeout(()=>re(!1),1200)},X=typeof t=="object"&&t!==null,he=t==null||X&&Object.keys(t).length===0,de=()=>{if(!X)return<F style={e.tableRow}>
-          <F style={e.tableColKey}>
-            <T style={e.tableCellKey}>{R("network.jsonViewer.value")}</T>
-          </F>
-          <F style={e.tableColVal}>
-            <T style={e.tableCellValue}>{String(t)}</T>
-          </F>
-        </F>;let m=Object.keys(t);if(f&&f.trim().length>0){const x=f.trim().toLowerCase();m=m.filter(B=>{const W=t[B],M=typeof W=="object"&&W!==null?JSON.stringify(W):String(W);return B.toLowerCase().includes(x)||M.toLowerCase().includes(x)})}return m.length===0?<F style={e.emptyContainer}>
-          <T style={e.emptyText}>
-            {f&&f.trim().length>0?"No matching keys or values found":R("network.jsonViewer.emptyTable")}
-          </T>
-        </F>:<F style={e.tableView}>
-        
-        <F style={e.tableHeaderRow}>
-          <T style={[e.tableHeaderCell,{flex:2}]}>KEY / PROPERTY</T>
-          <T style={[e.tableHeaderCell,{flex:3}]}>VALUE</T>
-        </F>
-        {m.map((x,B)=><Le key={x}index={B}itemKey={x}val={t[x]}search={f}/>)}
-      </F>},J=<Ce data={t}search={f}forceOpen={G}defaultExpandDepth={G?99:$}/>;return<F style={[e.container,z&&{flex:1}]}>
-      
-      <F style={e.snippetHeader}>
         
-        <F style={e.headerLeft}>
-          <F style={e.langBadge}>
-            <T style={e.langBadgeText}>JSON</T>
-          </F>
-          <F style={e.metaBadge}>
-            <T style={e.metaBadgeText}numberOfLines={1}ellipsizeMode="tail">
-              {ce} {ce===1?"line":"lines"} · {Fe}
+        <T style={e.tableColVal}>
+          <T style={P?e.tableCodeBox:void 0}>
+            <X text={H}search={A}style={[e.tableCellValue,C==null?e.syntaxNull:void 0,typeof C=="number"?e.syntaxNumber:void 0,typeof C=="boolean"?e.syntaxBoolean:void 0,typeof C=="string"?e.syntaxString:void 0]}highlightStyle={e.highlight}numberOfLines={F?void 0:3}selectable={!0}/>
+          </T>
+          {J&&<Te onPress={()=>j(z=>!z)}hitSlop={6}style={e.showMoreBtn}>
+              <S style={e.showMoreText}>
+                {F?"Collapse":"Expand"}
+              </S>
+              <De direction={F?"up":"down"}size={9}color="#4F46E5"/>
+            </Te>}
+        </T>
+      </T>}),_e=Q.memo(({data:o,search:C,forceOpen:A,defaultExpandDepth:k=1,wrap:F,fullHeight:j=!1,maxHeight:P,mode:W,onModeChange:H,hideTabs:J=!1})=>{const{t:z}=je(),[Se,ne]=L(W??"pretty"),[ie,ae]=L(!1),[K,se]=L(F??!0),[D,Ve]=L("compact"),[M,ce]=L(A),[Be,ke]=L(!1),R=H&&W?W:Se,Z=B=>{ne(B),H&&H(B)};le(()=>{F!==void 0&&se(F)},[F]),le(()=>{A!==void 0&&ce(A)},[A]),le(()=>{W&&ne(W)},[W]);const E=v(()=>{if(o==null)return"";if(typeof o=="string"){const B=o.trim();try{const I=JSON.parse(B);return JSON.stringify(I,null,2)}catch{return o}}try{return JSON.stringify(o,null,2)??""}catch{return String(o)||""}},[o]),ee=v(()=>{if(typeof o=="string"){const B=o.trim();try{const I=JSON.parse(B);return JSON.stringify(I)}catch{return o}}try{return JSON.stringify(o)??""}catch{return String(o)||""}},[o]),de=D==="formatted"?E:ee,ge=5e4,$=typeof de=="string"?de:"",ye=$.length>ge&&!Be,te=ye?$.slice(0,ge):$,oe=v(()=>te?te.split(`
+`):[""],[te]),pe=v(()=>R==="raw"?oe.length:E?E.split(`
+`).length:1,[R,oe.length,E]),Fe=v(()=>Ke(o),[o]),ze=He(()=>{$e("success"),Me(D==="compact"?ee:E,"JSON"),ae(!0),setTimeout(()=>ae(!1),1200)},[D,ee,E]),re=typeof o=="object"&&o!==null,Re=o==null||re&&Object.keys(o).length===0,ue=()=>{if(!re)return<T style={e.tableRow}>
+            <T style={e.tableColKey}>
+              <S style={e.tableCellKey}>
+                {z("network.jsonViewer.value")}
+              </S>
             </T>
-          </F>
-        </F>
-
-        
-        <F style={e.headerRight}>
-          {!_&&<F style={e.snippetTabs}>
-              <A onPress={()=>Y("pretty")}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}style={[e.snippetTabBtn,S==="pretty"&&e.snippetTabBtnActive]}>
-                <Ve color={S==="pretty"?"#FFFFFF":"#64748B"}size={11}/>
-                <T style={[e.snippetTabText,S==="pretty"&&e.snippetTabTextActive]}>
-                  {R("network.jsonViewer.pretty")}
-                </T>
-              </A>
-
-              <A onPress={()=>Y("raw")}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}style={[e.snippetTabBtn,S==="raw"&&e.snippetTabBtnActive]}>
-                <Be color={S==="raw"?"#FFFFFF":"#64748B"}size={11}/>
-                <T style={[e.snippetTabText,S==="raw"&&e.snippetTabTextActive]}>
-                  {R("network.jsonViewer.raw")}
-                </T>
-              </A>
-
-              <A onPress={()=>Y("table")}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}style={[e.snippetTabBtn,S==="table"&&e.snippetTabBtnActive]}>
-                <Ee color={S==="table"?"#FFFFFF":"#64748B"}size={11}/>
-                <T style={[e.snippetTabText,S==="table"&&e.snippetTabTextActive]}>
-                  {R("network.jsonViewer.table")}
-                </T>
-              </A>
-            </F>}
-
+            <T style={e.tableColVal}>
+              <S style={e.tableCellValue}>{String(o)}</S>
+            </T>
+          </T>;let B=Object.keys(o);if(C&&C.trim().length>0){const I=C.trim().toLowerCase();B=B.filter(U=>{const _=o[U],We=typeof _=="object"&&_!==null?JSON.stringify(_):String(_);return U.toLowerCase().includes(I)||We.toLowerCase().includes(I)})}return B.length===0?<T style={e.emptyContainer}>
+            <S style={e.emptyText}>
+              {C&&C.trim().length>0?"No matching keys or values found":z("network.jsonViewer.emptyTable")}
+            </S>
+          </T>:<T style={e.tableView}>
           
-          {S==="pretty"&&X&&<A onPress={()=>ne(m=>!m)}hitSlop={{top:6,bottom:6,left:4,right:4}}style={e.toolToggleBtn}>
-              <T style={e.toolToggleText}>
-                {G?"Fold":"Expand"}
+          <T style={e.tableHeaderRow}>
+            <S style={[e.tableHeaderCell,{flex:2}]}>
+              KEY / PROPERTY
+            </S>
+            <S style={[e.tableHeaderCell,{flex:3}]}>VALUE</S>
+          </T>
+          {B.map((I,U)=><Ue key={I}index={U}itemKey={I}val={o[I]}search={C}/>)}
+        </T>},Y=<Pe data={o}search={C}forceOpen={M}defaultExpandDepth={M?99:k}/>,q=()=><T style={e.rawLinesWrapper}>
+          {oe.map((B,I)=><T key={I}style={e.rawCodeLineRow}>
+              
+              <T style={e.gutterCell}>
+                <S style={e.gutterNumber}selectable={!1}>
+                  {I+1}
+                </S>
               </T>
-            </A>}
 
-          
-          {S==="raw"&&<A onPress={()=>le(m=>!m)}hitSlop={{top:6,bottom:6,left:4,right:4}}style={[e.toolToggleBtn,N&&e.toolToggleBtnActive]}>
-              <T style={[e.toolToggleText,N&&e.toolToggleTextActive]}>
-                Wrap
+              
+              <T style={e.rawTextCell}>
+                <Ye line={B}search={C}detectLinks={$.length<2e4}/>
               </T>
-            </A>}
+            </T>)}
+        </T>,be=()=>ye?<Te onPress={()=>ke(!0)}activeOpacity={.8}style={e.truncationBanner}>
+          <S style={e.truncationText}>
+            Showing first 50 KB ({Math.round($.length/1024)} KB
+            total) · Tap to load full payload
+          </S>
+        </Te>:null,G=v(()=>Array.isArray(o)?{label:`ARRAY [${o.length}]`,color:t.blue600,bg:`${t.blue600}12`,border:`${t.blue600}30`}:o&&typeof o=="object"?{label:`OBJECT {${Object.keys(o).length}}`,color:t.violet600,bg:`${t.violet600}12`,border:`${t.violet600}30`}:{label:"JSON",color:t.slate700,bg:`${t.slate700}10`,border:`${t.slate700}25`},[o]);return<T style={[e.container,j&&{flex:1}]}>
+        
+        <T style={e.snippetHeader}>
+          
+          <T style={e.headerLeft}>
+            <T style={[e.langBadge,{backgroundColor:G.bg,borderColor:G.border}]}>
+              <T style={[e.langDot,{backgroundColor:G.color}]}/>
+              <S style={[e.langBadgeText,{color:G.color}]}>
+                {G.label}
+              </S>
+            </T>
+            <T style={e.metaBadge}>
+              <S style={e.metaBadgeText}numberOfLines={1}ellipsizeMode="tail">
+                {Fe} · {pe} {pe===1?z("jsonViewer.line","line"):z("jsonViewer.lines","lines")}
+              </S>
+            </T>
+          </T>
 
           
-          <Se onPress={fe}hitSlop={8}style={[e.copyBtn,oe&&e.copyBtnSuccess]}>
-            {oe?<We color="#10B981"size={13}/>:<Re color="#64748B"size={13}/>}
-          </Se>
-        </F>
-      </F>
-      
-      <F style={[e.editorBody,z&&{flex:1,maxHeight:void 0},!z&&P!=null&&{maxHeight:P}]}>
-        
-        {S==="pretty"&&(he?<F style={e.emptyContainer}>
-              <T style={e.emptyText}>
-                {R("network.jsonViewer.emptyPayload")}
-              </T>
-            </F>:N?z?<I style={{flex:1}}contentContainerStyle={e.prettyContainer}>
-                {J}
-              </I>:<F style={e.prettyContainer}>{J}</F>:z?<I style={{flex:1}}contentContainerStyle={{flexGrow:1}}>
-              <I horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={e.prettyContainer}>
-                {J}
-              </I>
-            </I>:<I horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={e.prettyContainer}>
-              {J}
-            </I>)}
+          <T style={e.headerRight}>
+            {!J&&<T style={e.snippetTabs}>
+                <N onPress={()=>Z("pretty")}style={[e.snippetTabBtn,R==="pretty"&&[e.snippetTabBtnActive,{backgroundColor:t.brandPurple,shadowColor:t.brandPurple}]]}>
+                  <Oe color={R==="pretty"?t.white:t.grayTextWeak}size={11}/>
+                  <S style={[e.snippetTabText,R==="pretty"&&e.snippetTabTextActive]}>
+                    {z("network.jsonViewer.pretty","Pretty")}
+                  </S>
+                </N>
 
-        
-        {S==="raw"&&(z?<I style={{flex:1}}contentContainerStyle={{flexGrow:1}}showsVerticalScrollIndicator={!0}>
-              <F style={e.rawEditorRow}>
-                
-                <F style={e.gutter}>
-                  {K.map((m,x)=><T key={x}style={e.gutterNumber}>
-                      {x+1}
-                    </T>)}
-                </F>
+                <N onPress={()=>Z("raw")}style={[e.snippetTabBtn,R==="raw"&&[e.snippetTabBtnActive,{backgroundColor:t.sky600,shadowColor:t.sky600}]]}>
+                  <Le color={R==="raw"?t.white:t.grayTextWeak}size={11}/>
+                  <S style={[e.snippetTabText,R==="raw"&&e.snippetTabTextActive]}>
+                    {z("network.jsonViewer.raw","Raw")}
+                  </S>
+                </N>
 
-                
-                <I horizontal={!N}showsHorizontalScrollIndicator={!0}style={{flex:1}}>
-                  <F style={e.rawTextContainer}>
-                    {K.map((m,x)=>{const B=m.match(/^(\s+)(.*)$/);if(B){const W=B[1],M=B[2],Z=W.replace(/  /g,"\xB7 ").replace(/ /g,"\xB7");return<F key={x}style={e.rawCodeLineRow}>
-                            <T style={e.indentDots}>{Z}</T>
-                            <L text={M}search={f}detectLinks={D.length<2e4}style={e.rawMonospaceText}selectable={!0}highlightStyle={e.highlight}/>
-                          </F>}return<F key={x}style={e.rawCodeLineRow}>
-                          <L text={m}search={f}detectLinks={D.length<2e4}style={e.rawMonospaceText}selectable={!0}highlightStyle={e.highlight}/>
-                        </F>})}
-                  </F>
-                </I>
-              </F>
+                <N onPress={()=>Z("table")}style={[e.snippetTabBtn,R==="table"&&[e.snippetTabBtnActive,{backgroundColor:t.teal600,shadowColor:t.teal600}]]}>
+                  <Ne color={R==="table"?t.white:t.grayTextWeak}size={11}/>
+                  <S style={[e.snippetTabText,R==="table"&&e.snippetTabTextActive]}>
+                    {z("network.jsonViewer.table","Table")}
+                  </S>
+                </N>
+              </T>}
 
-              {U&&<A onPress={()=>ae(!0)}style={e.truncationBanner}>
-                  <T style={e.truncationText}>
-                    Showing first 50 KB ({Math.round(D.length/1024)} KB total) · Tap to load full payload
-                  </T>
-                </A>}
-            </I>:<F>
-              <F style={e.rawEditorRow}>
-                
-                <F style={e.gutter}>
-                  {K.map((m,x)=><T key={x}style={e.gutterNumber}>
-                      {x+1}
-                    </T>)}
-                </F>
+            
+            {R==="pretty"&&re&&<N onPress={()=>ce(B=>!B)}style={[e.toolToggleBtn,M&&e.toolToggleBtnActive]}>
+                <S style={[e.toolToggleText,M&&e.toolToggleTextActive]}>
+                  {M?z("jsonViewer.fold","Fold"):z("jsonViewer.expand","Expand")}
+                </S>
+              </N>}
 
-                
-                <I horizontal={!N}showsHorizontalScrollIndicator={!0}style={{flex:1}}>
-                  <F style={e.rawTextContainer}>
-                    {K.map((m,x)=>{const B=m.match(/^(\s+)(.*)$/);if(B){const W=B[1],M=B[2],Z=W.replace(/  /g,"\xB7 ").replace(/ /g,"\xB7");return<F key={x}style={e.rawCodeLineRow}>
-                            <T style={e.indentDots}>{Z}</T>
-                            <L text={M}search={f}detectLinks={D.length<2e4}style={e.rawMonospaceText}selectable={!0}highlightStyle={e.highlight}/>
-                          </F>}return<F key={x}style={e.rawCodeLineRow}>
-                          <L text={m}search={f}detectLinks={D.length<2e4}style={e.rawMonospaceText}selectable={!0}highlightStyle={e.highlight}/>
-                        </F>})}
-                  </F>
-                </I>
-              </F>
+            
+            {R==="raw"&&<N onPress={()=>Ve(B=>B==="compact"?"formatted":"compact")}style={[e.toolToggleBtn,D==="compact"&&e.toolToggleBtnActive]}>
+                <S style={[e.toolToggleText,D==="compact"&&e.toolToggleTextActive]}>
+                  {D==="compact"?z("jsonViewer.min","Min"):z("jsonViewer.indent","Indent")}
+                </S>
+              </N>}
 
-              {U&&<A onPress={()=>ae(!0)}style={e.truncationBanner}>
-                  <T style={e.truncationText}>
-                    Showing first 50 KB ({Math.round(D.length/1024)} KB total) · Tap to load full payload
-                  </T>
-                </A>}
-            </F>)}
+            
+            {R==="raw"&&<N onPress={()=>se(B=>!B)}style={[e.toolToggleBtn,K&&e.toolToggleBtnActive]}>
+                <S style={[e.toolToggleText,K&&e.toolToggleTextActive]}>
+                  {z("jsonViewer.wrap","Wrap")}
+                </S>
+              </N>}
+
+            
+            <N onPress={ze}hitSlop={6}style={[e.copyBtn,ie&&e.copyBtnSuccess]}>
+              {ie?<Je color={t.emerald500}size={12}/>:<Ee color={t.grayTextWeak}size={12}/>}
+            </N>
+          </T>
+        </T>
 
         
-        {S==="table"&&(z?<I style={{flex:1}}>
-              {de()}
-            </I>:<F style={e.tableView}>
-              {de()}
-            </F>)}
-      </F>
-    </F>}),e=ue.create({container:{backgroundColor:"#FFFFFF",borderRadius:12,borderWidth:1.5,borderColor:"#E2E8F0",overflow:"hidden",shadowColor:"#4F46E5",shadowOpacity:.05,shadowRadius:6,shadowOffset:{width:0,height:2},elevation:2,width:"100%"},snippetHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:"#F1F5F9",borderBottomWidth:1,borderBottomColor:"#E2E8F0",paddingHorizontal:8,paddingVertical:6,gap:6},headerLeft:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:1,minWidth:0},langBadge:{backgroundColor:"#FFFFFF",borderRadius:4,borderWidth:1,borderColor:"#CBD5E1",paddingHorizontal:5,paddingVertical:2},langBadgeText:{fontFamily:C,fontSize:9.5,color:"#475569",fontWeight:"700",letterSpacing:.4},metaBadge:{backgroundColor:"#FFFFFF",borderRadius:4,borderWidth:1,borderColor:"#CBD5E1",paddingHorizontal:5,paddingVertical:2,flexShrink:1},metaBadgeText:{fontFamily:C,fontSize:9.5,color:"#64748B",fontWeight:"600"},metaStats:{fontFamily:C,fontSize:9.5,color:"#64748B",flexShrink:1},headerRight:{flexDirection:"row",alignItems:"center",gap:5},snippetTabs:{flexDirection:"row",alignItems:"center",backgroundColor:"#E2E8F0",borderRadius:6,padding:2,borderWidth:1,borderColor:"#CBD5E1",gap:2},snippetTabBtn:{flexDirection:"row",alignItems:"center",gap:3.5,paddingVertical:2.5,paddingHorizontal:6,borderRadius:4},snippetTabBtnActive:{backgroundColor:"#4F46E5",shadowColor:"#4F46E5",shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2,elevation:1},snippetTabText:{fontFamily:C,fontSize:9.5,color:"#64748B",fontWeight:"600"},snippetTabTextActive:{color:"#FFFFFF",fontWeight:"700"},toolToggleBtn:{paddingHorizontal:6,paddingVertical:2.5,borderRadius:5,backgroundColor:"#FFFFFF",borderWidth:1,borderColor:"#CBD5E1",alignItems:"center",justifyContent:"center"},toolToggleBtnActive:{backgroundColor:"#EEF2FF",borderColor:"#C7D2FE"},toolToggleText:{fontFamily:C,fontSize:9.5,color:"#64748B",fontWeight:"600"},toolToggleTextActive:{color:"#4F46E5",fontWeight:"700"},copyBtn:{width:24,height:24,borderRadius:5,backgroundColor:"#FFFFFF",borderWidth:1,borderColor:"#CBD5E1",alignItems:"center",justifyContent:"center"},copyBtnSuccess:{borderColor:"#10B981",backgroundColor:"#ECFDF5"},editorBody:{backgroundColor:"#FFFFFF",minHeight:100},prettyContainer:{padding:12,minWidth:"100%",backgroundColor:"#FFFFFF"},rawEditorRow:{flexDirection:"row",alignItems:"stretch",minHeight:100},gutter:{backgroundColor:"#F1F5F9",borderRightWidth:1,borderRightColor:"#E2E8F0",paddingVertical:10,paddingHorizontal:8,alignItems:"flex-end",userSelect:"none"},gutterNumber:{fontFamily:C,fontSize:11.5,height:18,lineHeight:18,color:"#94A3B8",textAlign:"right"},rawTextContainer:{paddingVertical:10,paddingHorizontal:12,backgroundColor:"#FFFFFF"},rawCodeLineRow:{flexDirection:"row",alignItems:"center",height:18},indentDots:{fontFamily:C,fontSize:11.5,lineHeight:18,color:"#CBD5E1",letterSpacing:.5},rawMonospaceText:{fontFamily:C,fontSize:11.5,lineHeight:18,color:"#0F172A"},truncationBanner:{margin:10,backgroundColor:"#EEF2FF",paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center",borderWidth:1,borderColor:"#C7D2FE"},truncationText:{fontFamily:C,fontSize:10.5,color:"#4F46E5",fontWeight:"600"},tableView:{flex:1},tableHeaderRow:{flexDirection:"row",backgroundColor:"#F1F5F9",borderBottomWidth:1,borderBottomColor:"#E2E8F0",paddingVertical:7,paddingHorizontal:12},tableHeaderCell:{fontFamily:C,fontSize:10,color:"#475569",fontWeight:"700",letterSpacing:.5},tableRow:{flexDirection:"row",borderBottomWidth:1,borderBottomColor:"#F1F5F9",paddingVertical:8,paddingHorizontal:12,alignItems:"flex-start",backgroundColor:"#FFFFFF"},tableRowAlt:{backgroundColor:"#F8FAFC"},tableColKey:{flex:2,paddingRight:8},tableColVal:{flex:3},tableCellKey:{fontFamily:C,fontSize:11.5,fontWeight:"700",color:"#4F46E5"},typePill:{alignSelf:"flex-start",borderRadius:4,borderWidth:1,paddingHorizontal:4,paddingVertical:1,marginTop:3},typePillText:{fontFamily:C,fontSize:9,fontWeight:"700"},tableCellValue:{fontFamily:C,fontSize:11.5,color:"#0F172A",lineHeight:17},tableCodeBox:{backgroundColor:"#F1F5F9",borderRadius:6,borderWidth:1,borderColor:"#E2E8F0",padding:6},showMoreBtn:{flexDirection:"row",alignItems:"center",gap:4,alignSelf:"flex-start",marginTop:4,paddingVertical:2,paddingHorizontal:4},showMoreText:{fontFamily:C,fontSize:10,color:"#4F46E5",fontWeight:"600"},emptyContainer:{padding:24,alignItems:"center",justifyContent:"center"},emptyText:{fontFamily:C,fontSize:11.5,color:"#64748B"},highlight:{backgroundColor:"#FEF08A",color:"#854D0E",fontFamily:C,fontWeight:"700",borderRadius:2,paddingHorizontal:2},syntaxNull:{color:"#E11D48",fontStyle:"italic"},syntaxNumber:{color:"#D97706"},syntaxBoolean:{color:"#DB2777"},syntaxString:{color:"#059669"}});export default Pe;
+        <T style={[e.editorBody,j&&{flex:1,maxHeight:void 0},!j&&P!=null&&{maxHeight:P}]}>
+          
+          {R==="pretty"&&(Re?<T style={e.emptyContainer}>
+                <S style={e.emptyText}>
+                  {z("network.jsonViewer.emptyPayload")}
+                </S>
+              </T>:K?j?<O style={{flex:1}}contentContainerStyle={e.prettyContainer}showsVerticalScrollIndicator={!0}>
+                  {Y}
+                </O>:<T style={e.prettyContainer}>{Y}</T>:j?<O style={{flex:1}}contentContainerStyle={{flexGrow:1}}showsVerticalScrollIndicator={!0}>
+                <O horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={e.prettyContainer}>
+                  {Y}
+                </O>
+              </O>:<O horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={e.prettyContainer}>
+                {Y}
+              </O>)}
+
+          
+          {R==="raw"&&(j?<O style={e.fullHeightScrollView}contentContainerStyle={e.fullHeightScrollContent}showsVerticalScrollIndicator={!0}showsHorizontalScrollIndicator={!1}>
+                {K?<T style={e.rawEditorFullWidth}>
+                    {q()}
+                  </T>:<O horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={e.rawHorizontalContent}>
+                    <T style={{flexDirection:"column"}}>
+                      {q()}
+                    </T>
+                  </O>}
+                {be()}
+              </O>:<T style={e.rawEditorAutoHeight}>
+                {K?<T style={e.rawEditorFullWidth}>
+                    {q()}
+                  </T>:<O horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={e.rawHorizontalContent}>
+                    <T style={{flexDirection:"column"}}>
+                      {q()}
+                    </T>
+                  </O>}
+                {be()}
+              </T>)}
+
+          
+          {R==="table"&&(j?<O style={{flex:1}}contentContainerStyle={{flexGrow:1}}showsVerticalScrollIndicator={!0}>
+                {ue()}
+              </O>:<T style={e.tableView}>{ue()}</T>)}
+        </T>
+      </T>}),e=Ie.create({container:{backgroundColor:t.white,borderRadius:12,borderWidth:1,borderColor:t.grayBorderSecondary,overflow:"hidden",shadowColor:t.brandPurple,shadowOpacity:.04,shadowRadius:6,shadowOffset:{width:0,height:2},elevation:2,width:"100%"},snippetHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:t.grayBackground,borderBottomWidth:1,borderBottomColor:t.grayBorderSecondary,paddingHorizontal:8,paddingVertical:5,gap:6,minHeight:38},headerLeft:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:1,minWidth:0},langBadge:{flexDirection:"row",alignItems:"center",backgroundColor:t.white,borderRadius:6,borderWidth:1,borderColor:t.grayBorderSecondary,paddingHorizontal:6,paddingVertical:2.5,gap:4.5},langDot:{width:5,height:5,borderRadius:2.5,backgroundColor:t.emerald500},langBadgeText:{fontFamily:V,fontSize:9.5,color:t.primaryBlack,fontWeight:"700",letterSpacing:.3},metaBadge:{backgroundColor:t.white,borderRadius:6,borderWidth:1,borderColor:t.grayBorderSecondary,paddingHorizontal:6,paddingVertical:2.5,flexShrink:1},metaBadgeText:{fontFamily:V,fontSize:9.5,color:t.grayTextWeak,fontWeight:"600"},headerRight:{flexDirection:"row",alignItems:"center",gap:4.5,flexShrink:0},snippetTabs:{flexDirection:"row",alignItems:"center",backgroundColor:`${t.grayBorderSecondary}66`,borderRadius:7,padding:2,borderWidth:1,borderColor:t.dividerColor,gap:2},snippetTabBtn:{flexDirection:"row",alignItems:"center",gap:3.5,paddingVertical:2.5,paddingHorizontal:6,borderRadius:5},snippetTabBtnActive:{backgroundColor:t.brandPurple,shadowColor:t.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1},snippetTabText:{fontFamily:V,fontSize:9.5,color:t.grayTextWeak,fontWeight:"600"},snippetTabTextActive:{color:t.white,fontWeight:"700"},toolToggleBtn:{paddingHorizontal:6,paddingVertical:3,borderRadius:6,backgroundColor:t.white,borderWidth:1,borderColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center"},toolToggleBtnActive:{backgroundColor:t.purple50,borderColor:t.purple200},toolToggleText:{fontFamily:V,fontSize:9.5,color:t.grayTextWeak,fontWeight:"600"},toolToggleTextActive:{color:t.brandPurple,fontWeight:"700"},copyBtn:{width:25,height:25,borderRadius:6,backgroundColor:t.white,borderWidth:1,borderColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center"},copyBtnSuccess:{borderColor:t.greenMintBorder,backgroundColor:t.greenMintBg},editorBody:{backgroundColor:"#FFFFFF",minHeight:80},prettyContainer:{padding:10,minWidth:"100%",backgroundColor:"#FFFFFF"},fullHeightScrollView:{flex:1},fullHeightScrollContent:{flexGrow:1},rawEditorAutoHeight:{width:"100%"},rawEditorFullWidth:{width:"100%"},rawHorizontalContent:{minWidth:"100%"},rawLinesWrapper:{paddingVertical:6,backgroundColor:"#FFFFFF",width:"100%"},rawCodeLineRow:{flexDirection:"row",alignItems:"flex-start",minHeight:20,width:"100%"},gutterCell:{width:38,paddingRight:8,paddingTop:1,alignItems:"flex-end",justifyContent:"flex-start",borderRightWidth:1,borderRightColor:"#E2E8F0",backgroundColor:"#F8FAFC",userSelect:"none"},gutterNumber:{fontFamily:V,fontSize:11,lineHeight:18,color:"#94A3B8",textAlign:"right"},rawTextCell:{flex:1,paddingLeft:8,paddingRight:8,paddingTop:1,alignItems:"flex-start"},rawLineContentRow:{flexDirection:"row",alignItems:"flex-start",flexWrap:"wrap",minHeight:18},indentDots:{fontFamily:V,fontSize:11.5,lineHeight:18,color:"#CBD5E1",letterSpacing:.5},rawMonospaceText:{fontFamily:V,fontSize:11.5,lineHeight:18,color:t.slate900},syntaxKey:{fontFamily:V,fontSize:11.5,lineHeight:18,color:t.syntaxKey,fontWeight:"700"},syntaxColon:{fontFamily:V,fontSize:11.5,lineHeight:18,color:t.syntaxColon,marginRight:4},syntaxString:{fontFamily:V,fontSize:11.5,lineHeight:18,color:t.syntaxString},syntaxNumber:{fontFamily:V,fontSize:11.5,lineHeight:18,color:t.syntaxNumber},syntaxBoolean:{fontFamily:V,fontSize:11.5,lineHeight:18,color:t.syntaxBoolean},syntaxNull:{fontFamily:V,fontSize:11.5,lineHeight:18,color:t.syntaxNull,fontStyle:"italic"},truncationBanner:{margin:10,backgroundColor:t.purple50,paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center",borderWidth:1,borderColor:t.purple200},truncationText:{fontFamily:V,fontSize:10.5,color:t.brandPurple,fontWeight:"600"},tableView:{flex:1,width:"100%"},tableHeaderRow:{flexDirection:"row",backgroundColor:t.slate100,borderBottomWidth:1,borderBottomColor:t.slate200,paddingVertical:7,paddingHorizontal:12},tableHeaderCell:{fontFamily:V,fontSize:10,color:t.slate600,fontWeight:"700",letterSpacing:.5},tableRow:{flexDirection:"row",borderBottomWidth:1,borderBottomColor:t.slate100,paddingVertical:8,paddingHorizontal:12,alignItems:"flex-start",backgroundColor:t.white},tableRowAlt:{backgroundColor:t.slate50},tableColKey:{flex:2,paddingRight:8},tableColVal:{flex:3},tableCellKey:{fontFamily:V,fontSize:11.5,fontWeight:"700",color:t.brandPurple},typePill:{alignSelf:"flex-start",borderRadius:4,borderWidth:1,paddingHorizontal:4,paddingVertical:1,marginTop:3},typePillText:{fontFamily:V,fontSize:9,fontWeight:"700"},tableCellValue:{fontFamily:V,fontSize:11.5,color:t.slate900,lineHeight:17},tableCodeBox:{backgroundColor:t.slate100,borderRadius:6,borderWidth:1,borderColor:t.slate200,padding:6},showMoreBtn:{flexDirection:"row",alignItems:"center",gap:4,alignSelf:"flex-start",marginTop:4,paddingVertical:2,paddingHorizontal:4},showMoreText:{fontFamily:V,fontSize:10,color:t.brandPurple,fontWeight:"600"},emptyContainer:{padding:24,alignItems:"center",justifyContent:"center"},emptyText:{fontFamily:V,fontSize:11.5,color:t.slate500},highlight:{backgroundColor:t.yellow200,color:t.yellow800,fontFamily:V,fontWeight:"700",borderRadius:2,paddingHorizontal:2}});export default _e;

package/dist/esm/components/LogCard.js

@@ -1,20 +1,20 @@
-import oe,{useEffect as te,useRef as le,useMemo as j}from"react";import{Alert as ae,Animated as W,Linking as D,View as C,Pressable as A,Text as T,StyleSheet as U}from"react-native";import Ce,{Path as Te}from"react-native-svg";import{AppColors as e}from"../styles/AppColors";import{METHOD_COLORS as E}from"../constants";import{getStatusColor as Be,getDurationColor as Se,formatDateTime as Re,getSize as ze,getPath as Ve,getBaseUrl as He}from"../helpers";import{CalendarIcon as Le,ClockIcon as N,SizeIcon as $e,CircleCheckIcon as Ie,CircleAlertIcon as We,CircleXIcon as De,RepeatIcon as Fe,PinIcon as Oe}from"./NetworkIcons";import{AppFonts as B}from"../styles/AppFonts";import Pe from"./HighlightText";import Me from"./TouchableScale";import{useTranslation as je}from"../i18n";const Ae=oe.memo(function({item:r,onPress:_,timelineMinStart:Ee,timelineTotalRange:qe,isNew:$,isSelected:F,onToggleSelect:G,searchStr:J}){const{t:H}=je(),O=E[r.method]??E.ALL,S=j(()=>{try{const t=new URL(r.url),V=t.host,M=t.pathname+(t.search?t.search:""),re=t.protocol==="https:";return{host:V,path:M||"/",isHttps:re}}catch{const t=r.url.toLowerCase().startsWith("https:"),V=Ve(r.url);return{host:He(r.url).replace(/^https?:\/\//,""),path:V||r.url,isHttps:t}}},[r.url]),P=j(()=>{if(!r.caller||r.caller==="Unknown")return null;const t=r.caller.split(/[\/\\]/);return(t[t.length-1]||r.caller).replace(/\?.*$/,"").replace(/^[a-zA-Z0-9_$]+@/,"")},[r.caller]),K=t=>{t?.stopPropagation?.(),ae.alert(H("common.openInBrowser")||"Open in Browser",`${H("common.openInBrowserPrompt")||"Are you sure you want to open this URL in your external browser?"}
+import ee,{useEffect as re,useRef as oe,useMemo as te}from"react";import{Alert as ne,Animated as D,Linking as F,View as C,Pressable as M,Text as T,StyleSheet as A}from"react-native";import Ce,{Path as Te}from"react-native-svg";import{AppColors as e}from"../styles/AppColors";import{METHOD_COLORS as U}from"../constants";import{getStatusColor as Be,getDurationColor as Se,formatDateTime as He,getSize as Re,getPath as Ve,getBaseUrl as ze}from"../helpers";import{CalendarIcon as Le,ClockIcon as E,SizeIcon as Ie,CircleCheckIcon as $e,CircleAlertIcon as De,CircleXIcon as Fe,RepeatIcon as Oe,ForwardChevronIcon as We}from"./NetworkIcons";import{AppFonts as B}from"../styles/AppFonts";import Pe from"./HighlightText";import Me from"./TouchableScale";import{useTranslation as Ae}from"../i18n";const Ue=ee.memo(function({item:r,onPress:q,timelineMinStart:qe,timelineTotalRange:Ne,isNew:I,isSelected:O,onToggleSelect:N,searchStr:G}){const{t:V}=Ae(),W=U[r.method]??U.ALL,H=te(()=>{try{const t=new URL(r.url),L=t.host,v=t.pathname+(t.search?t.search:""),Z=t.protocol==="https:";return{host:L,path:v||"/",isHttps:Z}}catch{const t=r.url.toLowerCase().startsWith("https:"),L=Ve(r.url);return{host:ze(r.url).replace(/^https?:\/\//,""),path:L||r.url,isHttps:t}}},[r.url]),J=t=>{t?.stopPropagation?.(),ne.alert(V("common.openInBrowser")||"Open in Browser",`${V("common.openInBrowserPrompt")||"Are you sure you want to open this URL in your external browser?"}
 
-${r.url}`,[{text:H("common.cancel")||"Cancel",style:"cancel"},{text:H("common.open")||"Open",onPress:()=>{D.canOpenURL(r.url).then(V=>{V?D.openURL(r.url):D.openURL(r.url).catch(()=>{})}).catch(()=>{})}}])},R=r.status===0||r.status!=null&&r.status>=400,z=r.status==null,I=Be(r.status),L=Se(r.duration),Q=z?e.darkOrange:R?e.errorColor:e.greenColor,v=le(new W.Value($?.35:0)).current;te(()=>{$&&W.timing(v,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[$]);const X=()=>{if(z)return"...";if(r.status===0||r.status==null)return H("network.statusFailed")||"FAILED";const t=typeof r.status=="number"?r.status:parseInt(String(r.status||0),10);return t===200?"200 OK":t===201?"201 Created":t===204?"204 No Content":t===304?"304 Not Modified":t===400?"400 Bad Req":t===401?"401 Unauth":t===403?"403 Forbidden":t===404?"404 Not Found":t===500?"500 Error":String(r.status)},Z=()=>{if(z)return<N color={e.darkOrange}size={10}/>;const t=typeof r.status=="number"?r.status:parseInt(String(r.status||0),10);return t>=200&&t<300?<Ie color={e.greenColor}size={10}/>:t>=300&&t<400?<Fe color={e.amber700}size={10}/>:t>=400&&t<500?<We color={e.darkOrange}size={10}/>:<De color={e.errorColor}size={10}/>},Y=Re(r.startTime),ee=r.url.split("?")[0].toLowerCase().endsWith(".json");return<C style={o.container}>
-      <Me onPress={_}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:Q,backgroundColor:R?e.errorCardBg:e.white}]}>
+${r.url}`,[{text:V("common.cancel")||"Cancel",style:"cancel"},{text:V("common.open")||"Open",onPress:()=>{F.canOpenURL(r.url).then(L=>{L?F.openURL(r.url):F.openURL(r.url).catch(()=>{})}).catch(()=>{})}}])},S=r.status===0||r.status!=null&&r.status>=400,R=r.status==null,$=Be(r.status),z=Se(r.duration),K=R?e.darkOrange:S?e.errorColor:e.greenColor,P=oe(new D.Value(I?.35:0)).current;re(()=>{I&&D.timing(P,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[I]);const Q=()=>{if(R)return"...";if(r.status===0||r.status==null)return V("network.statusFailed")||"FAILED";const t=typeof r.status=="number"?r.status:parseInt(String(r.status||0),10);return t===200?"200 OK":t===201?"201 Created":t===204?"204 No Content":t===304?"304 Not Modified":t===400?"400 Bad Req":t===401?"401 Unauth":t===403?"403 Forbidden":t===404?"404 Not Found":t===500?"500 Error":String(r.status)},X=()=>{if(R)return<E color={e.darkOrange}size={10}/>;const t=typeof r.status=="number"?r.status:parseInt(String(r.status||0),10);return t>=200&&t<300?<$e color={e.greenColor}size={10}/>:t>=300&&t<400?<Oe color={e.amber700}size={10}/>:t>=400&&t<500?<De color={e.darkOrange}size={10}/>:<Fe color={e.errorColor}size={10}/>},_=He(r.startTime),Y=r.url.split("?")[0].toLowerCase().endsWith(".json");return<C style={o.container}>
+      <Me onPress={q}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:K,backgroundColor:S?e.errorCardBg:e.white}]}>
         <C style={o.cardBody}>
           
           <C style={o.cardHeaderRow}>
             <C style={o.cardHeaderLeft}>
-              <A onPress={()=>G(r.id)}hitSlop={12}style={[o.smallCheckbox,F&&o.smallCheckboxChecked]}>
-                {F&&<Ce width={9}height={9}viewBox="0 0 24 24"fill="none">
+              <M onPress={()=>N(r.id)}hitSlop={12}style={[o.smallCheckbox,O&&o.smallCheckboxChecked]}>
+                {O&&<Ce width={9}height={9}viewBox="0 0 24 24"fill="none">
                     <Te d="M20 6L9 17l-5-5"stroke={e.white}strokeWidth="4"strokeLinecap="round"strokeLinejoin="round"/>
                   </Ce>}
-              </A>
+              </M>
 
               <T style={o.serialNumber}>#{r.id+1}</T>
 
-              <C style={[o.methodBadge,{backgroundColor:O}]}>
+              <C style={[o.methodBadge,{backgroundColor:W}]}>
                 <T style={o.methodBadgeText}>
                   {r.method}
                 </T>
@@ -34,20 +34,23 @@ ${r.url}`,[{text:H("common.cancel")||"Cancel",style:"cancel"},{text:H("common.op
                 </C>}
             </C>
 
-            <C style={[o.statusPill,{backgroundColor:R?`${e.errorColor}14`:z?`${e.darkOrange}14`:`${I}14`,borderColor:R?`${e.errorColor}33`:z?`${e.darkOrange}33`:`${I}33`}]}>
-              {Z()}
-              <T style={[o.statusPillText,{color:R?e.errorColor:z?e.darkOrange:I}]}>
+            <C style={o.cardHeaderRight}>
+              <C style={[o.statusPill,{backgroundColor:S?`${e.errorColor}14`:R?`${e.darkOrange}14`:`${$}14`,borderColor:S?`${e.errorColor}33`:R?`${e.darkOrange}33`:`${$}33`}]}>
                 {X()}
-              </T>
+                <T style={[o.statusPillText,{color:S?e.errorColor:R?e.darkOrange:$}]}>
+                  {Q()}
+                </T>
+              </C>
+              <We color={e.grayTextWeak}size={13}/>
             </C>
           </C>
 
           
-          <A onPress={K}hitSlop={6}style={o.urlBox}>
+          <M onPress={J}hitSlop={6}style={o.urlBox}>
             <C style={o.urlMainRow}>
-              <Pe text={S.path}search={J}style={o.pathText}highlightStyle={o.highlight}numberOfLines={2}ellipsizeMode="middle"/>
+              <Pe text={H.path}search={G}style={o.pathText}highlightStyle={o.highlight}numberOfLines={1}ellipsizeMode="middle"/>
               <C style={o.urlBadgeRow}>
-                {ee&&<C style={o.jsonBadge}>
+                {Y&&<C style={o.jsonBadge}>
                     <T style={o.jsonBadgeText}>.json</T>
                   </C>}
                 {r.duplicateCount!=null&&r.duplicateCount>1&&<C style={o.dupBadge}>
@@ -56,45 +59,38 @@ ${r.url}`,[{text:H("common.cancel")||"Cancel",style:"cancel"},{text:H("common.op
               </C>
             </C>
 
-            {S.host?<C style={o.hostRow}>
-                <C style={[o.protoBadge,{backgroundColor:S.isHttps?`${e.emerald600}12`:`${e.amber600}12`,borderColor:S.isHttps?`${e.emerald600}2B`:`${e.amber600}2B`}]}>
-                  <T style={[o.protoBadgeText,{color:S.isHttps?e.emerald600:e.amber700}]}>
-                    {S.isHttps?"HTTPS":"HTTP"}
-                  </T>
-                </C>
-                <T style={o.hostText}numberOfLines={1}ellipsizeMode="tail">
-                  {S.host}
+            <C style={o.hostRow}>
+              <C style={[o.protoBadge,{backgroundColor:H.isHttps?`${e.emerald600}12`:`${e.amber600}12`,borderColor:H.isHttps?`${e.emerald600}2B`:`${e.amber600}2B`}]}>
+                <T style={[o.protoBadgeText,{color:H.isHttps?e.emerald600:e.amber700}]}>
+                  {H.isHttps?"HTTPS":"HTTP"}
                 </T>
-              </C>:null}
-          </A>
+              </C>
+              <T style={o.hostText}numberOfLines={1}ellipsizeMode="tail">
+                {H.host||r.url}
+              </T>
+            </C>
+          </M>
 
           
           <C style={o.cardFooterRow}>
             <C style={o.footerLeft}>
               <C style={o.cardDateRow}>
                 <Le color={e.grayTextWeak}size={10}/>
-                <T style={o.cardDateText}>{Y}</T>
+                <T style={o.cardDateText}numberOfLines={1}>{_}</T>
               </C>
-
-              {P&&<C style={o.callerChip}>
-                  <Oe color={e.sky600}size={8.5}/>
-                  <T style={o.callerChipText}numberOfLines={1}ellipsizeMode="middle">
-                    {P}
-                  </T>
-                </C>}
             </C>
 
             <C style={o.footerRight}>
               {r.response!=null&&<C style={o.metaStatChip}>
-                  <$e color={e.purple}size={9}/>
+                  <Ie color={e.purple}size={9}/>
                   <T style={o.metaStatText}>
-                    {ze(r.response)}
+                    {Re(r.response)}
                   </T>
                 </C>}
 
-              {r.duration!=null&&!R&&<C style={[o.metaStatChip,{backgroundColor:`${L}12`,borderColor:`${L}2E`}]}>
-                  <N color={L}size={9}/>
-                  <T style={[o.metaStatText,{color:L}]}>
+              {r.duration!=null&&!S&&<C style={[o.metaStatChip,{backgroundColor:`${z}12`,borderColor:`${z}2E`}]}>
+                  <E color={z}size={9}/>
+                  <T style={[o.metaStatText,{color:z}]}>
                     {r.duration}ms
                   </T>
                 </C>}
@@ -102,11 +98,11 @@ ${r.url}`,[{text:H("common.cancel")||"Cancel",style:"cancel"},{text:H("common.op
           </C>
 
           
-          {typeof r.duration=="number"&&r.duration>0&&!R&&<C style={o.waterfallContainer}>
-              <C style={[o.waterfallBar,{width:`${Math.min(100,Math.max(6,r.duration/1200*100))}%`,backgroundColor:L}]}/>
-            </C>}
+          <C style={o.waterfallContainer}>
+            {typeof r.duration=="number"&&r.duration>0&&!S&&<C style={[o.waterfallBar,{width:`${Math.min(100,Math.max(6,r.duration/1200*100))}%`,backgroundColor:z}]}/>}
+          </C>
         </C>
 
-        {$&&<W.View pointerEvents="none"style={[U.absoluteFill,{backgroundColor:O,opacity:v}]}/>}
+        {I&&<D.View pointerEvents="none"style={[A.absoluteFill,{backgroundColor:W,opacity:P}]}/>}
       </Me>
-    </C>}),o=U.create({container:{paddingHorizontal:8,paddingVertical:3},card:{alignSelf:"stretch",borderRadius:10,overflow:"hidden",borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString},cardBody:{paddingHorizontal:11,paddingTop:8,paddingBottom:7},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:5,minHeight:20},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,marginRight:6,gap:5,minWidth:0,flexWrap:"wrap"},smallCheckbox:{width:14,height:14,borderRadius:3.5,borderWidth:1.5,borderColor:e.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:e.white},smallCheckboxChecked:{backgroundColor:e.purple,borderColor:e.purple},serialNumber:{fontFamily:B.interBold,color:e.grayTextWeak,fontSize:9.5},methodBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:B.interBold,fontSize:9,lineHeight:11,letterSpacing:.5,color:e.white},chip:{paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:B.interBold,fontSize:8.5,lineHeight:11},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6.5,paddingVertical:2,borderRadius:6,borderWidth:1,flexShrink:0},statusPillText:{fontFamily:B.interBold,fontSize:9.5,lineHeight:12},urlBox:{backgroundColor:e.grayBackground,borderRadius:7,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:8,paddingVertical:5,marginVertical:3,gap:3},urlMainRow:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",gap:6},pathText:{fontFamily:B.interBold,fontSize:12,lineHeight:16,color:e.primaryBlack,flex:1},urlBadgeRow:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},jsonBadge:{backgroundColor:`${e.darkOrange}14`,borderColor:`${e.darkOrange}2E`,borderWidth:1,paddingHorizontal:4,paddingVertical:1,borderRadius:3},jsonBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.darkOrange},dupBadge:{backgroundColor:`${e.purple}14`,borderColor:`${e.purple}2E`,borderWidth:1,paddingHorizontal:4,paddingVertical:1,borderRadius:3},dupBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.purple},hostRow:{flexDirection:"row",alignItems:"center",gap:4.5},protoBadge:{paddingHorizontal:4,paddingVertical:1,borderRadius:3,borderWidth:1},protoBadgeText:{fontFamily:B.interBold,fontSize:7.5,lineHeight:9},hostText:{fontFamily:B.interMedium,fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:3,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0},footerRight:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},cardDateRow:{flexDirection:"row",alignItems:"center",gap:3},cardDateText:{fontFamily:B.interRegular,fontSize:9.5,lineHeight:12,color:e.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.skySoftBg,borderColor:e.skySoftBorder,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:4,flexShrink:1,minWidth:0},callerChipText:{color:e.skySoftText,fontSize:8.5,lineHeight:11,fontFamily:B.interBold},metaStatChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.violetSoftBg,borderColor:e.violetSoftBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:B.interBold,color:e.violetSoftText,fontSize:9,lineHeight:11},waterfallContainer:{height:2,width:"100%",backgroundColor:e.graySurface,borderRadius:1,overflow:"hidden",marginTop:5},waterfallBar:{height:"100%",borderRadius:1}});export default Ae;
+    </C>}),o=A.create({container:{paddingHorizontal:8,paddingVertical:4,height:126,justifyContent:"center"},card:{height:118,alignSelf:"stretch",borderRadius:10,overflow:"hidden",borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString},cardBody:{height:"100%",paddingHorizontal:12,paddingTop:9,paddingBottom:7,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,marginRight:8,gap:6,minWidth:0,overflow:"hidden"},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},smallCheckbox:{width:15,height:15,borderRadius:4,borderWidth:1.5,borderColor:e.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:e.white},smallCheckboxChecked:{backgroundColor:e.purple,borderColor:e.purple},serialNumber:{fontFamily:B.interBold,color:e.grayTextWeak,fontSize:10},methodBadge:{paddingHorizontal:7,paddingVertical:2.5,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:B.interBold,fontSize:9.5,lineHeight:12,letterSpacing:.5,color:e.white},chip:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},chipText:{fontFamily:B.interBold,fontSize:9,lineHeight:12},statusPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:2.5,borderRadius:6,borderWidth:1,flexShrink:0},statusPillText:{fontFamily:B.interBold,fontSize:10,lineHeight:13},urlBox:{backgroundColor:e.grayBackground,borderRadius:7,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:9,paddingVertical:5,height:48,minHeight:48,maxHeight:48,justifyContent:"center",gap:3,overflow:"hidden"},urlMainRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6},pathText:{fontFamily:B.interBold,fontSize:12,lineHeight:16,color:e.primaryBlack,flex:1},urlBadgeRow:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},jsonBadge:{backgroundColor:`${e.darkOrange}14`,borderColor:`${e.darkOrange}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},jsonBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.darkOrange},dupBadge:{backgroundColor:`${e.purple}14`,borderColor:`${e.purple}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},dupBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.purple},hostRow:{flexDirection:"row",alignItems:"center",gap:5,minHeight:15},protoBadge:{paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5,borderWidth:1},protoBadgeText:{fontFamily:B.interBold,fontSize:8,lineHeight:10},hostText:{fontFamily:B.interMedium,fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:6,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0},cardDateRow:{flexDirection:"row",alignItems:"center",gap:3.5},cardDateText:{fontFamily:B.interRegular,fontSize:10,lineHeight:13,color:e.slate400},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:B.interBold,color:e.violetSoftText,fontSize:9,lineHeight:12},waterfallContainer:{height:2.5,width:"100%",backgroundColor:e.graySurface,borderRadius:1.5,overflow:"hidden",marginTop:2},waterfallBar:{height:"100%",borderRadius:1.5}});export default Ue;

package/dist/esm/components/LogSyntaxHighlighter.js

@@ -1,4 +1,4 @@
-import F from"react";import{StyleSheet as G,Text as T}from"react-native";import{AppColors as r}from"../styles/AppColors";import{AppFonts as w}from"../styles/AppFonts";import{escapeRegex as U,handleOpenExternalLink as H}from"../helpers";const M=/("(?:\\.|[^"\\])*"(?=\s*:))|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|(\b-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|(\b(?:true|false)\b)|(\b(?:null|undefined|NaN)\b)|(https?:\/\/[^\s"',]+)|(\[[\w\s_-]+\])|([{}[\],:])|([^"'\d\s{}[\],:]+|[ \t\r\n]+)/g;export const tokenizeText=l=>{if(!l)return[];const t=[];let e;for(M.lastIndex=0;(e=M.exec(l))!==null;)e[1]?t.push({type:"key",value:e[1]}):e[2]?t.push({type:"string",value:e[2]}):e[3]?t.push({type:"number",value:e[3]}):e[4]?t.push({type:"boolean",value:e[4]}):e[5]?t.push({type:"null",value:e[5]}):e[6]?t.push({type:"url",value:e[6]}):e[7]?t.push({type:"tag",value:e[7]}):e[8]?t.push({type:"bracket",value:e[8]}):e[9]&&t.push({type:"plain",value:e[9]});return t};const X=l=>{switch(l){case"key":return r.sky600||"#0369a1";case"string":return r.emerald600||"#059669";case"number":return r.amber600||"#d97706";case"boolean":return r.purple||"#7c3aed";case"null":return r.red600||"#dc2626";case"url":return"#0284c7";case"tag":return r.violet600||"#7c3aed";case"bracket":return r.slate500||"#64748b";default:return r.primaryBlack||"#1e293b"}};export const LogSyntaxHighlighter=F.memo(({text:l,search:t,numberOfLines:e,style:O,detectLinks:L=!0})=>{if(!l)return null;const z=F.useMemo(()=>tokenizeText(l),[l]),A=(n,S)=>{const K=X(n.type),C=n.type==="url",P=n.type==="key",R={color:K,fontFamily:P?w.interBold:w.interRegular,textDecorationLine:C?"underline":"none"};if(!t||t.trim().length===0)return<T key={S}style={R}onPress={C&&L?()=>H(n.value):void 0}>
+import F from"react";import{StyleSheet as G,Text as T}from"react-native";import{AppColors as r}from"../styles/AppColors";import{AppFonts as w}from"../styles/AppFonts";import{escapeRegex as U,handleOpenExternalLink as H}from"../helpers";const M=/("(?:\\.|[^"\\])*"(?=\s*:))|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|(\b-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|(\b(?:true|false)\b)|(\b(?:null|undefined|NaN)\b)|(https?:\/\/[^\s"',]+)|(\[[\w\s_-]+\])|([{}[\],:])|([^"'\d\s{}[\],:]+|[ \t\r\n]+)/g;export const tokenizeText=l=>{if(!l)return[];const t=[];let e;for(M.lastIndex=0;(e=M.exec(l))!==null;)e[1]?t.push({type:"key",value:e[1]}):e[2]?t.push({type:"string",value:e[2]}):e[3]?t.push({type:"number",value:e[3]}):e[4]?t.push({type:"boolean",value:e[4]}):e[5]?t.push({type:"null",value:e[5]}):e[6]?t.push({type:"url",value:e[6]}):e[7]?t.push({type:"tag",value:e[7]}):e[8]?t.push({type:"bracket",value:e[8]}):e[9]&&t.push({type:"plain",value:e[9]});return t};const X=l=>{switch(l){case"key":return r.sky600;case"string":return r.emerald600;case"number":return r.amber600;case"boolean":return r.purple;case"null":return r.red600;case"url":return r.sky600;case"tag":return r.violet600;case"bracket":return r.slate500;default:return r.primaryBlack}};export const LogSyntaxHighlighter=F.memo(({text:l,search:t,numberOfLines:e,style:O,detectLinks:L=!0})=>{if(!l)return null;const z=F.useMemo(()=>tokenizeText(l),[l]),A=(n,S)=>{const K=X(n.type),C=n.type==="url",P=n.type==="key",R={color:K,fontFamily:P?w.interBold:w.interRegular,textDecorationLine:C?"underline":"none"};if(!t||t.trim().length===0)return<T key={S}style={R}onPress={C&&L?()=>H(n.value):void 0}>
             {n.value}
           </T>;const _=new RegExp(`(${U(t.trim())})`,"gi"),D=n.value.split(_);return<T key={S}style={R}>
           {D.map((E,B)=>E.toLowerCase()===t.trim().toLowerCase()?<T key={B}style={[R,N.searchHighlight]}>

package/dist/esm/components/SegmentedTabs.d.ts

@@ -3,7 +3,9 @@ import { ViewStyle } from 'react-native';
 export interface SegmentedTab {
     key: string;
     label: string;
-    icon?: (isActive: boolean) => React.ReactNode;
+    themeColor?: string;
+    color?: string;
+    icon?: (isActive: boolean, themeColor?: string) => React.ReactNode;
 }
 interface SegmentedTabsProps {
     tabs: SegmentedTab[];
@@ -11,5 +13,6 @@ interface SegmentedTabsProps {
     onChange: (key: string) => void;
     style?: ViewStyle | ViewStyle[];
 }
+export declare const DEFAULT_INNER_TAB_THEMES: Record<string, string>;
 declare const SegmentedTabs: React.MemoExoticComponent<({ tabs, activeKey, onChange, style }: SegmentedTabsProps) => React.JSX.Element>;
 export default SegmentedTabs;