react-native-inapp-inspector 2.3.25 → 2.4.1

package/dist/esm/components/JsonViewer.js

@@ -1,159 +1,146 @@
-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}/>
+import Q,{useState as D,useEffect as le,useMemo as G,useCallback as He}from"react";import{ScrollView as O,View as T,Text as V,StyleSheet as Ie,TouchableOpacity as Te,Platform as We}from"react-native";import{useTranslation as Ae}from"../i18n";import Pe from"./TreeNode";import X from"./HighlightText";import E from"./TouchableScale";import{PrettyIcon as Ne,RawIcon as Oe,TableIcon as De,ChevronIcon as Ee,CopyIcon as Le,CheckIcon as Ke}from"./NetworkIcons";import{AppColors as t}from"../styles/AppColors";import{AppFonts as N}from"../styles/AppFonts";import{getSize as Me,copyToClipboard as ve}from"../helpers";import{triggerNativeHaptic as Je}from"../native/NativeInspector";const I=We.select({ios:"Menlo",android:"monospace",default:"monospace"}),$e=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},Se=Q.memo(({text:o,search:S,detectLinks:A})=>{const B=o.trim();let F=e.rawMonospaceText;return B.startsWith('"')?F=e.syntaxString:B==="null"||B.startsWith("null,")||B==="undefined"?F=e.syntaxNull:B==="true"||B.startsWith("true,")||B==="false"||B.startsWith("false,")?F=e.syntaxBoolean:/^-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?,?$/.test(B)&&(F=e.syntaxNumber),<X text={o}search={S}detectLinks={A}style={F}selectable={!0}highlightStyle={e.highlight}/>}),Ge=Q.memo(({line:o,search:S,detectLinks:A})=>{const B=o.match(/^(\s+)(.*)$/),F=B?B[1]:"",P=B?B[2]:o,j=F?F.replace(/  /g,"\xB7 ").replace(/ /g,"\xB7"):"",z=P.match(/^("(?:[^"\\]|\\.)*")(\s*:\s*)(.*)$/);if(z){const k=z[1],K=z[2],H=z[3];return<T style={e.rawLineContentRow}>
+          {j.length>0&&<V style={e.indentDots}>{j}</V>}
+          <X text={k}search={S}style={e.syntaxKey}selectable={!0}highlightStyle={e.highlight}/>
+          <V style={e.syntaxColon}>{K}</V>
+          <Se text={H}search={S}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]}>
+        {j.length>0&&<V style={e.indentDots}>{j}</V>}
+        <Se text={P}search={S}detectLinks={A}/>
+      </T>}),Ye=Q.memo(({itemKey:o,val:S,search:A,index:B})=>{const[F,P]=D(!1),j=S!==null&&typeof S=="object",z=$e(S);let k="";if(S===null)k="null";else if(S===void 0)k="undefined";else if(j)try{k=JSON.stringify(S,null,2)}catch{k=String(S)}else k=String(S);const K=k.includes(`
+`)||k.length>80;return<T style={[e.tableRow,B%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 style={[e.typePill,{backgroundColor:z.bg,borderColor:z.border}]}>
+            <V style={[e.typePillText,{color:z.color}]}>
+              {z.label}
+            </V>
           </T>
         </T>
 
         
         <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 style={j?e.tableCodeBox:void 0}>
+            <X text={k}search={A}style={[e.tableCellValue,S==null?e.syntaxNull:void 0,typeof S=="number"?e.syntaxNumber:void 0,typeof S=="boolean"?e.syntaxBoolean:void 0,typeof S=="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}>
+          {K&&<Te onPress={()=>P(H=>!H)}hitSlop={6}style={e.showMoreBtn}>
+              <V style={e.showMoreText}>
                 {F?"Collapse":"Expand"}
-              </S>
-              <De direction={F?"up":"down"}size={9}color="#4F46E5"/>
+              </V>
+              <Ee 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>}),qe=Q.memo(({data:o,search:S,forceOpen:A,defaultExpandDepth:B=1,wrap:F,fullHeight:P=!1,maxHeight:j,mode:z,onModeChange:k,hideTabs:K=!1})=>{const{t:H}=Ae(),[Ce,ne]=D(z??"raw"),[ie,ae]=D(!1),[M,se]=D(F??!0),[v,Ve]=D("compact"),[J,ce]=D(A),[Be,Fe]=D(!1),R=k&&z?z:Ce,Z=C=>{ne(C),k&&k(C)};le(()=>{F!==void 0&&se(F)},[F]),le(()=>{A!==void 0&&ce(A)},[A]),le(()=>{z&&ne(z)},[z]);const L=G(()=>{if(o==null)return"";if(typeof o=="string"){const C=o.trim();try{const W=JSON.parse(C);return JSON.stringify(W,null,2)}catch{return o}}try{return JSON.stringify(o,null,2)??""}catch{return String(o)||""}},[o]),ee=G(()=>{if(typeof o=="string"){const C=o.trim();try{const W=JSON.parse(C);return JSON.stringify(W)}catch{return o}}try{return JSON.stringify(o)??""}catch{return String(o)||""}},[o]),de=v==="formatted"?L:ee,ge=5e4,$=typeof de=="string"?de:"",ye=$.length>ge&&!Be,te=ye?$.slice(0,ge):$,oe=G(()=>te?te.split(`
+`):[""],[te]),Ue=G(()=>R==="raw"?oe.length:L?L.split(`
+`).length:1,[R,oe.length,L]),_e=G(()=>Me(o),[o]),ze=He(()=>{Je("success"),ve(v==="compact"?ee:L,"JSON"),ae(!0),setTimeout(()=>ae(!1),1200)},[v,ee,L]),re=typeof o=="object"&&o!==null,Re=o==null||re&&Object.keys(o).length===0,pe=()=>{if(!re)return<T style={e.tableRow}>
             <T style={e.tableColKey}>
-              <S style={e.tableCellKey}>
-                {z("network.jsonViewer.value")}
-              </S>
+              <V style={e.tableCellKey}>
+                {H("network.jsonViewer.value")}
+              </V>
             </T>
             <T style={e.tableColVal}>
-              <S style={e.tableCellValue}>{String(o)}</S>
+              <V style={e.tableCellValue}>{String(o)}</V>
             </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>;let C=Object.keys(o);if(S&&S.trim().length>0){const W=S.trim().toLowerCase();C=C.filter(U=>{const _=o[U],ke=typeof _=="object"&&_!==null?JSON.stringify(_):String(_);return U.toLowerCase().includes(W)||ke.toLowerCase().includes(W)})}return C.length===0?<T style={e.emptyContainer}>
+            <V style={e.emptyText}>
+              {S&&S.trim().length>0?"No matching keys or values found":H("network.jsonViewer.emptyTable")}
+            </V>
           </T>:<T style={e.tableView}>
           
           <T style={e.tableHeaderRow}>
-            <S style={[e.tableHeaderCell,{flex:2}]}>
+            <V style={[e.tableHeaderCell,{flex:2}]}>
               KEY / PROPERTY
-            </S>
-            <S style={[e.tableHeaderCell,{flex:3}]}>VALUE</S>
+            </V>
+            <V style={[e.tableHeaderCell,{flex:3}]}>VALUE</V>
           </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}>
+          {C.map((W,U)=><Ye key={W}index={U}itemKey={W}val={o[W]}search={S}/>)}
+        </T>},Y=<Pe data={o}search={S}forceOpen={J}defaultExpandDepth={J?99:B}/>,q=()=><T style={e.rawLinesWrapper}>
+          {oe.map((C,W)=><T key={W}style={e.rawCodeLineRow}>
               
               <T style={e.gutterCell}>
-                <S style={e.gutterNumber}selectable={!1}>
-                  {I+1}
-                </S>
+                <V style={e.gutterNumber}selectable={!1}>
+                  {W+1}
+                </V>
               </T>
 
               
               <T style={e.rawTextCell}>
-                <Ye line={B}search={C}detectLinks={$.length<2e4}/>
+                <Ge line={C}search={S}detectLinks={$.length<2e4}/>
               </T>
             </T>)}
-        </T>,be=()=>ye?<Te onPress={()=>ke(!0)}activeOpacity={.8}style={e.truncationBanner}>
-          <S style={e.truncationText}>
+        </T>,ue=()=>ye?<Te onPress={()=>Fe(!0)}activeOpacity={.8}style={e.truncationBanner}>
+          <V 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}]}>
+          </V>
+        </Te>:null;return<T style={[e.container,P&&{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>
-
-          
-          <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>
+          {!K&&<T style={e.snippetTabs}>
+              <E onPress={()=>Z("raw")}style={[e.snippetTabBtn,R==="raw"&&e.snippetTabBtnActive]}>
+                <Oe color={R==="raw"?t.white:t.grayText}size={11.5}/>
+                <V style={[e.snippetTabText,R==="raw"&&e.snippetTabTextActive]}>
+                  {H("network.jsonViewer.raw","Raw")}
+                </V>
+              </E>
 
-                <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>
+              <E onPress={()=>Z("pretty")}style={[e.snippetTabBtn,R==="pretty"&&e.snippetTabBtnActive]}>
+                <Ne color={R==="pretty"?t.white:t.grayText}size={11.5}/>
+                <V style={[e.snippetTabText,R==="pretty"&&e.snippetTabTextActive]}>
+                  {H("network.jsonViewer.pretty","Pretty")}
+                </V>
+              </E>
 
-                <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>}
+              <E onPress={()=>Z("table")}style={[e.snippetTabBtn,R==="table"&&e.snippetTabBtnActive]}>
+                <De color={R==="table"?t.white:t.grayText}size={11.5}/>
+                <V style={[e.snippetTabText,R==="table"&&e.snippetTabTextActive]}>
+                  {H("network.jsonViewer.table","Table")}
+                </V>
+              </E>
+            </T>}
 
+          
+          <T style={e.headerRight}>
             
-            {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>}
+            {R==="raw"&&<>
+                <E onPress={()=>Ve(C=>C==="compact"?"formatted":"compact")}style={[e.toolToggleBtn,v==="compact"&&e.toolToggleBtnActive]}>
+                  <V style={[e.toolToggleText,v==="compact"&&e.toolToggleTextActive]}>
+                    {H("jsonViewer.min","Min")}
+                  </V>
+                </E>
 
-            
-            {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>}
+                <E onPress={()=>se(C=>!C)}style={[e.toolToggleBtn,M&&e.toolToggleBtnActive]}>
+                  <V style={[e.toolToggleText,M&&e.toolToggleTextActive]}>
+                    {H("jsonViewer.wrap","Wrap")}
+                  </V>
+                </E>
+              </>}
 
             
-            {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>}
+            {R==="pretty"&&re&&<E onPress={()=>ce(C=>!C)}style={[e.toolToggleBtn,J&&e.toolToggleBtnActive]}>
+                <V style={[e.toolToggleText,J&&e.toolToggleTextActive]}>
+                  {J?H("jsonViewer.fold","Fold"):H("jsonViewer.expand","Expand")}
+                </V>
+              </E>}
 
             
-            <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>
+            <E onPress={ze}hitSlop={6}style={[e.copyBtn,ie&&e.copyBtnSuccess]}>
+              {ie?<Ke color={t.emerald500}size={13}/>:<Le color={t.grayText}size={13}/>}
+            </E>
           </T>
         </T>
 
         
-        <T style={[e.editorBody,j&&{flex:1,maxHeight:void 0},!j&&P!=null&&{maxHeight:P}]}>
+        <T style={[e.editorBody,P&&{flex:1,maxHeight:void 0},!P&&j!=null&&{maxHeight:j}]}>
           
           {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}>
+                <V style={e.emptyText}>
+                  {H("network.jsonViewer.emptyPayload")}
+                </V>
+              </T>:M?P?<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>:<T style={e.prettyContainer}>{Y}</T>:P?<O style={{flex:1}}contentContainerStyle={{flexGrow:1}}showsVerticalScrollIndicator={!0}>
                 <O horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={e.prettyContainer}>
                   {Y}
                 </O>
@@ -162,29 +149,29 @@ import Q,{useState as L,useEffect as le,useMemo as v,useCallback as He}from"reac
               </O>)}
 
           
-          {R==="raw"&&(j?<O style={e.fullHeightScrollView}contentContainerStyle={e.fullHeightScrollContent}showsVerticalScrollIndicator={!0}showsHorizontalScrollIndicator={!1}>
-                {K?<T style={e.rawEditorFullWidth}>
+          {R==="raw"&&(P?<O style={e.fullHeightScrollView}contentContainerStyle={e.fullHeightScrollContent}showsVerticalScrollIndicator={!0}showsHorizontalScrollIndicator={!1}>
+                {M?<T style={e.rawEditorFullWidth}>
                     {q()}
                   </T>:<O horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={e.rawHorizontalContent}>
                     <T style={{flexDirection:"column"}}>
                       {q()}
                     </T>
                   </O>}
-                {be()}
+                {ue()}
               </O>:<T style={e.rawEditorAutoHeight}>
-                {K?<T style={e.rawEditorFullWidth}>
+                {M?<T style={e.rawEditorFullWidth}>
                     {q()}
                   </T>:<O horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={e.rawHorizontalContent}>
                     <T style={{flexDirection:"column"}}>
                       {q()}
                     </T>
                   </O>}
-                {be()}
+                {ue()}
               </T>)}
 
           
-          {R==="table"&&(j?<O style={{flex:1}}contentContainerStyle={{flexGrow:1}}showsVerticalScrollIndicator={!0}>
-                {ue()}
-              </O>:<T style={e.tableView}>{ue()}</T>)}
+          {R==="table"&&(P?<O style={{flex:1}}contentContainerStyle={{flexGrow:1}}showsVerticalScrollIndicator={!0}>
+                {pe()}
+              </O>:<T style={e.tableView}>{pe()}</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;
+      </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:I,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:I,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.slate200}80`,borderRadius:8,padding:2.5,borderWidth:1,borderColor:t.dividerColor,gap:2},snippetTabBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingVertical:3.5,paddingHorizontal:8,borderRadius:6},snippetTabBtnActive:{backgroundColor:t.brandPurple,shadowColor:t.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1},snippetTabText:{fontFamily:N.interSemiBold,fontSize:10.5,color:t.grayText},snippetTabTextActive:{color:t.white,fontFamily:N.interBold},toolToggleBtn:{paddingHorizontal:8,paddingVertical:3.5,borderRadius:6,backgroundColor:t.white,borderWidth:1,borderColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center"},toolToggleBtnActive:{backgroundColor:t.purpleShade50,borderColor:`${t.brandPurple}60`},toolToggleText:{fontFamily:N.interSemiBold,fontSize:10.5,color:t.grayText},toolToggleTextActive:{color:t.brandPurple,fontFamily:N.interBold},copyBtn:{width:27,height:27,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:I,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:I,fontSize:11.5,lineHeight:18,color:"#CBD5E1",letterSpacing:.5},rawMonospaceText:{fontFamily:I,fontSize:11.5,lineHeight:18,color:t.slate900},syntaxKey:{fontFamily:I,fontSize:11.5,lineHeight:18,color:t.syntaxKey,fontWeight:"700"},syntaxColon:{fontFamily:I,fontSize:11.5,lineHeight:18,color:t.syntaxColon,marginRight:4},syntaxString:{fontFamily:I,fontSize:11.5,lineHeight:18,color:t.syntaxString},syntaxNumber:{fontFamily:I,fontSize:11.5,lineHeight:18,color:t.syntaxNumber},syntaxBoolean:{fontFamily:I,fontSize:11.5,lineHeight:18,color:t.syntaxBoolean},syntaxNull:{fontFamily:I,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:N.interSemiBold,fontSize:11,color:t.brandPurple},tableView:{flex:1,width:"100%"},tableHeaderRow:{flexDirection:"row",backgroundColor:t.slate100,borderBottomWidth:1,borderBottomColor:t.slate200,paddingVertical:7,paddingHorizontal:12},tableHeaderCell:{fontFamily:N.interBold,fontSize:10.5,color:t.slate600,letterSpacing:.5,textTransform:"uppercase"},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:I,fontSize:11.5,fontWeight:"700",color:t.brandPurple},typePill:{alignSelf:"flex-start",borderRadius:4,borderWidth:1,paddingHorizontal:4,paddingVertical:1,marginTop:3},typePillText:{fontFamily:N.interBold,fontSize:9},tableCellValue:{fontFamily:I,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:N.interSemiBold,fontSize:10.5,color:t.brandPurple},emptyContainer:{padding:24,alignItems:"center",justifyContent:"center"},emptyText:{fontFamily:N.interMedium,fontSize:12,color:t.slate500},highlight:{backgroundColor:t.yellow200,color:t.yellow800,fontFamily:I,fontWeight:"700",borderRadius:2,paddingHorizontal:2}});export default qe;

package/dist/esm/components/LogCard.js

@@ -1,20 +1,20 @@
-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?"}
+import ee,{useEffect as re,useRef as oe,useMemo as te}from"react";import{Alert as ne,Animated as O,Linking as W,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 Re,getSize as He,getPath as Ve,getBaseUrl as ze}from"../helpers";import{CalendarIcon as Ie,ClockIcon as E,SizeIcon as Le,CircleCheckIcon as $e,CircleAlertIcon as Oe,CircleXIcon as We,RepeatIcon as De,ForwardChevronIcon as Fe,GlobeIcon as Pe}from"./NetworkIcons";import{AppFonts as B}from"../styles/AppFonts";import Me from"./HighlightText";import Ae from"./TouchableScale";import{useTranslation as Ue}from"../i18n";const Ee=ee.memo(function({item:r,onPress:q,timelineMinStart:Ne,timelineTotalRange:Ge,isNew:L,isSelected:D,onToggleSelect:N,searchStr:G}){const{t:V}=Ue(),F=U[r.method]??U.ALL,R=te(()=>{try{const t=new URL(r.url),I=t.host,v=t.pathname+(t.search?t.search:""),Z=t.protocol==="https:";return{host:I,path:v||"/",isHttps:Z}}catch{const t=r.url.toLowerCase().startsWith("https:"),I=Ve(r.url);return{host:ze(r.url).replace(/^https?:\/\//,""),path:I||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: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}]}>
+${r.url}`,[{text:V("common.cancel")||"Cancel",style:"cancel"},{text:V("common.open")||"Open",onPress:()=>{W.canOpenURL(r.url).then(I=>{I?W.openURL(r.url):W.openURL(r.url).catch(()=>{})}).catch(()=>{})}}])},S=r.status===0||r.status!=null&&r.status>=400,H=r.status==null,$=Be(r.status),z=Se(r.duration),K=H?e.darkOrange:S?e.errorColor:e.greenColor,P=oe(new O.Value(L?.35:0)).current;re(()=>{L&&O.timing(P,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[L]);const Q=()=>{if(H)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(H)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?<De color={e.amber700}size={10}/>:t>=400&&t<500?<Oe color={e.darkOrange}size={10}/>:<We color={e.errorColor}size={10}/>},_=Re(r.startTime),Y=r.url.split("?")[0].toLowerCase().endsWith(".json");return<C style={o.container}>
+      <Ae 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}>
-              <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">
+              <M onPress={()=>N(r.id)}hitSlop={12}style={[o.smallCheckbox,D&&o.smallCheckboxChecked]}>
+                {D&&<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>}
               </M>
 
               <T style={o.serialNumber}>#{r.id+1}</T>
 
-              <C style={[o.methodBadge,{backgroundColor:W}]}>
+              <C style={[o.methodBadge,{backgroundColor:F}]}>
                 <T style={o.methodBadgeText}>
                   {r.method}
                 </T>
@@ -35,20 +35,23 @@ ${r.url}`,[{text:V("common.cancel")||"Cancel",style:"cancel"},{text:V("common.op
             </C>
 
             <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`}]}>
+              <C style={[o.statusPill,{backgroundColor:S?`${e.errorColor}14`:H?`${e.darkOrange}14`:`${$}14`,borderColor:S?`${e.errorColor}33`:H?`${e.darkOrange}33`:`${$}33`}]}>
                 {X()}
-                <T style={[o.statusPillText,{color:S?e.errorColor:R?e.darkOrange:$}]}>
+                <T style={[o.statusPillText,{color:S?e.errorColor:H?e.darkOrange:$}]}>
                   {Q()}
                 </T>
               </C>
-              <We color={e.grayTextWeak}size={13}/>
+              <M onPress={J}hitSlop={8}style={o.globeBtn}accessibilityRole="button"accessibilityLabel="Open in Browser">
+                <Pe color={e.grayTextWeak}size={12}/>
+              </M>
+              <Fe color={e.grayTextWeak}size={13}/>
             </C>
           </C>
 
           
-          <M onPress={J}hitSlop={6}style={o.urlBox}>
+          <C style={o.urlBox}>
             <C style={o.urlMainRow}>
-              <Pe text={H.path}search={G}style={o.pathText}highlightStyle={o.highlight}numberOfLines={1}ellipsizeMode="middle"/>
+              <Me text={R.path}search={G}style={o.pathText}highlightStyle={o.highlight}numberOfLines={1}ellipsizeMode="middle"/>
               <C style={o.urlBadgeRow}>
                 {Y&&<C style={o.jsonBadge}>
                     <T style={o.jsonBadgeText}>.json</T>
@@ -60,31 +63,31 @@ ${r.url}`,[{text:V("common.cancel")||"Cancel",style:"cancel"},{text:V("common.op
             </C>
 
             <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"}
+              <C style={[o.protoBadge,{backgroundColor:R.isHttps?`${e.emerald600}12`:`${e.amber600}12`,borderColor:R.isHttps?`${e.emerald600}2B`:`${e.amber600}2B`}]}>
+                <T style={[o.protoBadgeText,{color:R.isHttps?e.emerald600:e.amber700}]}>
+                  {R.isHttps?"HTTPS":"HTTP"}
                 </T>
               </C>
               <T style={o.hostText}numberOfLines={1}ellipsizeMode="tail">
-                {H.host||r.url}
+                {R.host||r.url}
               </T>
             </C>
-          </M>
+          </C>
 
           
           <C style={o.cardFooterRow}>
             <C style={o.footerLeft}>
               <C style={o.cardDateRow}>
-                <Le color={e.grayTextWeak}size={10}/>
+                <Ie color={e.grayTextWeak}size={10}/>
                 <T style={o.cardDateText}numberOfLines={1}>{_}</T>
               </C>
             </C>
 
             <C style={o.footerRight}>
               {r.response!=null&&<C style={o.metaStatChip}>
-                  <Ie color={e.purple}size={9}/>
+                  <Le color={e.purple}size={9}/>
                   <T style={o.metaStatText}>
-                    {Re(r.response)}
+                    {He(r.response)}
                   </T>
                 </C>}
 
@@ -103,6 +106,6 @@ ${r.url}`,[{text:V("common.cancel")||"Cancel",style:"cancel"},{text:V("common.op
           </C>
         </C>
 
-        {I&&<D.View pointerEvents="none"style={[A.absoluteFill,{backgroundColor:W,opacity:P}]}/>}
-      </Me>
-    </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;
+        {L&&<O.View pointerEvents="none"style={[A.absoluteFill,{backgroundColor:F,opacity:P}]}/>}
+      </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},globeBtn:{padding:3,borderRadius:4,backgroundColor:`${e.grayTextWeak}12`,alignItems:"center",justifyContent:"center"},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 Ee;

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

@@ -0,0 +1,24 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ModuleErrorBoundaryProps {
+    moduleName?: string;
+    fallback?: ReactNode | ((error: Error, retry: () => void) => ReactNode);
+    children: ReactNode;
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    onRetry?: () => void;
+    containerStyle?: StyleProp<ViewStyle>;
+}
+interface ModuleErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    copied: boolean;
+}
+export declare class ModuleErrorBoundary extends Component<ModuleErrorBoundaryProps, ModuleErrorBoundaryState> {
+    state: ModuleErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): Partial<ModuleErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleRetry: () => void;
+    handleCopy: () => void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;
+}
+export default ModuleErrorBoundary;

package/dist/esm/components/ModuleErrorBoundary.js

@@ -0,0 +1,33 @@
+import{Component as E}from"react";import{StyleSheet as S,Text as F,View as C,TouchableOpacity as T,Platform as D}from"react-native";import{AppFonts as w}from"../styles/AppFonts";import{copyToClipboard as k}from"../helpers";import{WarningTriangleIcon as B,RefreshCcwIcon as I,CopyIcon as O}from"./NetworkIcons";import{handleInterceptedCrash as V}from"../customHooks/crashHandler";import{CrashType as W}from"../types/enums";export class ModuleErrorBoundary extends E{constructor(){super(...arguments),this.state={hasError:!1,error:null,copied:!1},this.handleRetry=()=>{this.setState({hasError:!1,error:null,copied:!1}),this.props.onRetry&&this.props.onRetry()},this.handleCopy=()=>{if(!this.state.error)return;const e=`[Module Error: ${this.props.moduleName||"Micro-Feature"}]
+Message: ${this.state.error.message}
+Stack: ${this.state.error.stack||"N/A"}`;k(e),this.setState({copied:!0}),setTimeout(()=>{this.setState({copied:!1})},2e3)}}static getDerivedStateFromError(e){return{hasError:!0,error:e}}componentDidCatch(e,b){try{V(e,e?.stack,!1,W.Js,b.componentStack||void 0)}catch{}this.props.onError&&this.props.onError(e,b)}render(){if(this.state.hasError&&this.state.error){const{fallback:e,moduleName:b="UI Module",containerStyle:R}=this.props;return typeof e=="function"?e(this.state.error,this.handleRetry):e||<C style={[t.card,R]}>
+          <C style={t.headerRow}>
+            <C style={t.titleRow}>
+              <B color="#DC2626"size={16}/>
+              <F style={t.moduleName}numberOfLines={1}>
+                {b}
+              </F>
+            </C>
+            <C style={t.badge}>
+              <F style={t.badgeText}>FAULT ISOLATED</F>
+            </C>
+          </C>
+
+          <F style={t.message}numberOfLines={2}>
+            {this.state.error.message||"An unexpected rendering error occurred in this module."}
+          </F>
+
+          <C style={t.actionsRow}>
+            <T style={t.retryButton}onPress={this.handleRetry}activeOpacity={.7}>
+              <I color="#FFFFFF"size={12}/>
+              <F style={t.retryText}>Retry Module</F>
+            </T>
+
+            <T style={t.copyButton}onPress={this.handleCopy}activeOpacity={.7}>
+              <O color="#475569"size={12}/>
+              <F style={t.copyText}>
+                {this.state.copied?"Copied":"Copy Error"}
+              </F>
+            </T>
+          </C>
+        </C>}return this.props.children}}export default ModuleErrorBoundary;const t=S.create({card:{backgroundColor:"#FEF2F2",borderColor:"#FECDD3",borderWidth:1.2,borderRadius:16,padding:14,marginVertical:6,gap:10,...D.select({ios:{shadowColor:"#DC2626",shadowOffset:{width:0,height:2},shadowOpacity:.06,shadowRadius:6},android:{elevation:2}})},headerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6},titleRow:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},moduleName:{fontSize:12.5,fontWeight:"800",color:"#991B1B",fontFamily:w.interBold,flexShrink:1},badge:{backgroundColor:"#FEE2E2",paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:"#FCA5A5"},badgeText:{fontSize:8.5,fontWeight:"800",color:"#B91C1C",letterSpacing:.4},message:{fontSize:11.5,color:"#7F1D1D",lineHeight:16,fontFamily:w.interRegular},actionsRow:{flexDirection:"row",alignItems:"center",gap:8,marginTop:2},retryButton:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:"#DC2626",paddingVertical:7,paddingHorizontal:12,borderRadius:9},retryText:{fontSize:11,fontWeight:"700",color:"#FFFFFF",fontFamily:w.interBold},copyButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:4,backgroundColor:"#F1F5F9",paddingVertical:7,paddingHorizontal:12,borderRadius:9,borderWidth:1,borderColor:"#E2E8F0"},copyText:{fontSize:11,fontWeight:"600",color:"#475569",fontFamily:w.interMedium}});

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

@@ -4,7 +4,6 @@ export interface IconProps {
     size?: number;
     strokeWidth?: number;
     isExpanded?: boolean;
-    isPaused?: boolean;
     active?: boolean;
     direction?: 'up' | 'down' | string;
     ascending?: boolean;
@@ -31,7 +30,6 @@ export declare const CircleXIcon: ({ color, size }: IconProps) => React.JSX.Elem
 export declare const CircleAlertIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const FailIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const TrashIcon: ({ color, size }: IconProps) => React.JSX.Element;
-export declare const HeaderPauseIcon: ({ isPaused, color, size, }: IconProps) => React.JSX.Element;
 export declare const ExportIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const ShareIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const SignalIcon: ({ color, size, }: IconProps) => React.JSX.Element;
@@ -49,7 +47,6 @@ export declare const DebugIcon: ({ color, size }: IconProps) => React.JSX.Elemen
 export declare const SunIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const MoonIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export { BrandCircleIcon } from './BrandCircleIcon';
-export { BrandSquareIcon } from './BrandSquareIcon';
 export declare const HtmlIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const CssIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const JsIcon: ({ color, size }: IconProps) => React.JSX.Element;
@@ -168,3 +165,6 @@ export declare const NeutralFaceIcon: ({ color, size, }: IconProps) => React.JSX
 export declare const SmileFaceIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const StarFaceIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const HeartFaceIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const BellIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const NotificationIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const CloudPushIcon: ({ color, size, }: IconProps) => React.JSX.Element;