react-native-inapp-inspector 2.3.25 → 2.4.0

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/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;

package/dist/esm/components/NetworkIcons.js

@@ -60,8 +60,6 @@ import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Rect as B}f
       <L d="M18 6L6 18M6 6l12 12"stroke={e}strokeWidth="3"strokeLinecap="round"strokeLinejoin="round"/>
     </W>,TrashIcon=({color:e=p.primaryLight,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       <L d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-    </W>,HeaderPauseIcon=({isPaused:e,color:t=p.primaryLight,size:I=20})=><W width={I}height={I}viewBox="0 0 24 24"fill="none">
-      {e?<L d="M5 3l14 9-14 9V3z"fill={t}/>:<L d="M6 5h3v14H6V5zm9 0h3v14h-3V5z"fill={t}/>}
     </W>,ExportIcon=({color:e=p.primaryLight,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       <L d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     </W>,ShareIcon=({color:e=p.white,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
@@ -116,7 +114,7 @@ import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Rect as B}f
       <L d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"stroke={e}strokeWidth="2"strokeLinecap="round"/>
     </W>,MoonIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       <L d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"fill={e}stroke={e}strokeWidth="1.5"strokeLinecap="round"strokeLinejoin="round"/>
-    </W>;export{BrandCircleIcon}from"./BrandCircleIcon";export{BrandSquareIcon}from"./BrandSquareIcon";export const HtmlIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    </W>;export{BrandCircleIcon}from"./BrandCircleIcon";export const HtmlIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       <L d="M17.5 8.5L21 12l-3.5 3.5M6.5 8.5L3 12l3.5 3.5M14 4.5l-4 15"stroke={e}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
     </W>,CssIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       <L d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
@@ -533,4 +531,10 @@ import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Rect as B}f
     
     <L d="M15 8.2C14.3 7.4 13.2 7.5 12.7 8.2C12.1 9 12.4 10.1 15 11.6C17.6 10.1 17.9 9 17.3 8.2C16.8 7.5 15.7 7.4 15 8.2Z"fill={e}/>
     <L d="M8 14.5C8 14.5 9.5 17.5 12 17.5C14.5 17.5 16 14.5 16 14.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+  </W>,BellIcon=({color:e=p.brandPurple,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M13.73 21a2 2 0 0 1-3.46 0"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,NotificationIcon=BellIcon,CloudPushIcon=({color:e=p.brandPurple,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="m12 13 3 3m0 0-3 3m3-3H7"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
   </W>;

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

@@ -12,7 +12,10 @@ interface SegmentedTabsProps {
     activeKey: string;
     onChange: (key: string) => void;
     style?: ViewStyle | ViewStyle[];
+    scrollable?: boolean;
 }
 export declare const DEFAULT_INNER_TAB_THEMES: Record<string, string>;
-declare const SegmentedTabs: React.MemoExoticComponent<({ tabs, activeKey, onChange, style }: SegmentedTabsProps) => React.JSX.Element>;
+declare const SegmentedTabs: React.MemoExoticComponent<({ tabs, activeKey, onChange, style, scrollable }: SegmentedTabsProps & {
+    scrollable?: boolean;
+}) => React.JSX.Element>;
 export default SegmentedTabs;

package/dist/esm/components/SegmentedTabs.js

@@ -1,8 +1,12 @@
-import d from"react";import{Pressable as C,Text as P,View as T}from"react-native";import{AppColors as e}from"../styles/AppColors";import{AppFonts as S}from"../styles/AppFonts";export const DEFAULT_INNER_TAB_THEMES={metadata:e.sky600,headers:e.teal600,request:e.amber600,response:e.brandPurple,req:e.amber600,res:e.brandPurple,output:e.teal600,arguments:e.amber600,stack:e.errorColor,caller:e.sky600,error:e.errorColor,app:e.green600,all:e.brandPurple,live:e.violet600,timeline:e.orange600,persisted:e.teal600,payload:e.violet600,diff:e.green600,raw:e.slate600,diagnostics:e.amber600,breadcrumbs:e.orange600,overview:e.sky600,json:e.brandPurple,tree:e.violet600,pretty:e.brandPurple,table:e.teal600,production:e.brandPurple,files:e.teal600,packages:e.orange600,media:e.pink600,optimizer:e.violet600,hardware:e.orange600,network:e.teal600,display:e.pink600,runtime:e.amber600,security:e.errorColor,fatal:e.errorColor,promise:e.orange600,render:e.pink600,native:e.cyan600,js:e.amber600,asyncStorage:e.brandPurple,mmkv:e.teal600};const A=d.memo(({tabs:t,activeKey:i,onChange:l,style:n})=><T style={[{flexDirection:"row",borderRadius:10,backgroundColor:`${e.slate200}80`,padding:3,borderWidth:1,borderColor:e.dividerColor,gap:3,minWidth:0},n]}>
-      {t.map(r=>{const o=i===r.key,a=r.themeColor||r.color||DEFAULT_INNER_TAB_THEMES[r.key]||e.brandPurple;return<C key={r.key}onPress={()=>l(r.key)}style={({pressed:s})=>[{flex:1,paddingVertical:7,paddingHorizontal:6,borderRadius:7,backgroundColor:o?a:"transparent",alignItems:"center",justifyContent:"center",gap:4.5,flexDirection:"row",opacity:s?.8:1},o&&{shadowColor:a,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:3,elevation:2}]}>
-            {r.icon?typeof r.icon=="function"?r.icon(o,a):r.icon:null}
-            <P numberOfLines={1}ellipsizeMode="tail"style={{flexShrink:1,fontFamily:S.interBold,fontSize:10.5,color:o?e.white:e.grayText,letterSpacing:.2}}>
-              {r.label}
-            </P>
-          </C>})}
-    </T>);export default A;
+import T from"react";import{Pressable as A,ScrollView as R,Text as V,View as C}from"react-native";import{AppColors as e}from"../styles/AppColors";import{AppFonts as z}from"../styles/AppFonts";export const DEFAULT_INNER_TAB_THEMES={metadata:e.sky600,headers:e.teal600,request:e.amber600,response:e.brandPurple,req:e.amber600,res:e.brandPurple,output:e.teal600,arguments:e.amber600,stack:e.errorColor,caller:e.sky600,error:e.errorColor,app:e.green600,all:e.brandPurple,live:e.violet600,timeline:e.orange600,persisted:e.teal600,payload:e.violet600,diff:e.green600,raw:e.brandPurple,diagnostics:e.amber600,breadcrumbs:e.orange600,overview:e.sky600,json:e.brandPurple,tree:e.violet600,preview:e.brandPurple,delivery:e.amber600,domainAttrs:e.sky600,pretty:e.violet600,table:e.teal600,production:e.brandPurple,files:e.teal600,packages:e.orange600,media:e.pink600,optimizer:e.violet600,hardware:e.orange600,network:e.teal600,display:e.pink600,runtime:e.amber600,security:e.errorColor,fatal:e.errorColor,promise:e.orange600,render:e.pink600,native:e.cyan600,js:e.amber600,asyncStorage:e.brandPurple,mmkv:e.teal600};const D=T.memo(({tabs:v,activeKey:P,onChange:x,style:i,scrollable:t})=>{const n=v.map(r=>{const o=P===r.key,a=r.themeColor||r.color||DEFAULT_INNER_TAB_THEMES[r.key]||e.brandPurple;return<A key={r.key}onPress={()=>x(r.key)}style={({pressed:S})=>[{flex:t?void 0:1,paddingVertical:7,paddingHorizontal:t?12:6,borderRadius:7,backgroundColor:o?a:"transparent",alignItems:"center",justifyContent:"center",gap:4.5,flexDirection:"row",opacity:S?.8:1},o&&{shadowColor:a,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:3,elevation:2}]}>
+          {r.icon?typeof r.icon=="function"?r.icon(o,a):r.icon:null}
+          <V numberOfLines={1}style={{fontFamily:z.interBold,fontSize:10.5,color:o?e.white:e.grayText,letterSpacing:.2}}>
+            {r.label}
+          </V>
+        </A>});return t?<C style={[{borderRadius:10,backgroundColor:`${e.slate200}80`,padding:3,borderWidth:1,borderColor:e.dividerColor},i]}>
+          <R horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:4}}>
+            {n}
+          </R>
+        </C>:<C style={[{flexDirection:"row",borderRadius:10,backgroundColor:`${e.slate200}80`,padding:3,borderWidth:1,borderColor:e.dividerColor,gap:3,minWidth:0},i]}>
+        {n}
+      </C>});export default D;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ShareButtonProps {
+    onShare: () => void | Promise<void>;
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+    color?: string;
+    size?: number;
+}
+declare const ShareButton: React.MemoExoticComponent<({ onShare, label, style, color, size, }: ShareButtonProps) => React.JSX.Element>;
+export default ShareButton;

package/dist/esm/components/ShareButton.js

@@ -0,0 +1,6 @@
+import p,{useCallback as h,useState as S}from"react";import{Text as C}from"react-native";import T from"./TouchableScale";import{ShareIcon as B,CheckIcon as $}from"./NetworkIcons";import{triggerNativeHaptic as q}from"../native/NativeInspector";import{AppColors as r}from"../styles/AppColors";import s from"../styles";const n=p.memo(({onShare:a,label:e,style:l,color:t=r.brandPurple,size:i=14})=>{const[o,c]=S(!1),m=h(async()=>{try{q("medium"),await a(),c(!0),setTimeout(()=>c(!1),1200)}catch{}},[a]),u=[s.iconSquareBtn,{backgroundColor:`${t}14`,borderColor:`${t}30`},o&&s.iconSquareBtnSuccess,l];return<T accessible={!0}accessibilityRole="button"accessibilityLabel={`Share ${e}`}accessibilityHint={`Opens native share sheet to export ${e}`}style={u}onPress={m}hitSlop={8}>
+      {o?<$ color={r.greenColor}size={i}strokeWidth={2.4}/>:<B color={t}size={i}/>}
+      {e?<C style={[s.iconSquareBtnText,{color:o?r.greenColor:t}]}>
+          {o?"Shared":e}
+        </C>:null}
+    </T>});n.displayName="ShareButton";export default n;

package/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.25";
+export declare const LIB_VERSION = "2.4.0";

package/dist/esm/constants/version.js

@@ -1 +1 @@
-export const LIB_VERSION="2.3.25";
+export const LIB_VERSION="2.4.0";