react-native-inapp-inspector 2.3.18 → 2.3.20

package/dist/esm/components/LogSyntaxHighlighter.js

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

package/dist/esm/components/MetaAccordion.js

@@ -1,283 +1,152 @@
-import React, { useState } from 'react';
-import { useTranslation } from '../i18n';
-import { View, Pressable, Text } from 'react-native';
-import { DURATION_FAST_MS, DURATION_SLOW_MS } from '../constants';
-import useAccordion from '../customHooks/useAccordion';
-import { getDurationColor, handleOpenExternalLink } from '../helpers';
-import { ChevronIcon, CalendarIcon, StatusIcon, ClockIcon, SizeIcon, TerminalIcon, GlobeIcon, } from './NetworkIcons';
-import TouchableScale from './TouchableScale';
-import CopyButton from './CopyButton';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-import styles from '../styles';
-const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
-    const { t } = useTranslation();
-    const [urlExpanded, setUrlExpanded] = useState(false);
-    const { isOpen, toggleOpen, chevronStyle } = useAccordion(true);
-    const isFailed = status === 0 || status == null;
-    const renderFormattedUrl = (rawUrl) => {
-        if (!rawUrl)
-            return '—';
-        try {
-            const doubleSlashIndex = rawUrl.indexOf('//');
-            let temp = rawUrl;
-            let protocol = '';
-            if (doubleSlashIndex !== -1) {
-                protocol = rawUrl.substring(0, doubleSlashIndex + 2);
-                temp = rawUrl.substring(doubleSlashIndex + 2);
-            }
-            const slashIndex = temp.indexOf('/');
-            let host = temp;
-            let pathAndSearch = '';
-            if (slashIndex !== -1) {
-                host = temp.substring(0, slashIndex);
-                pathAndSearch = temp.substring(slashIndex);
-            }
-            const queryIndex = pathAndSearch.indexOf('?');
-            let pathname = pathAndSearch;
-            let search = '';
-            if (queryIndex !== -1) {
-                pathname = pathAndSearch.substring(0, queryIndex);
-                search = pathAndSearch.substring(queryIndex);
-            }
-            return (<Text style={{ lineHeight: 16 }}>
-          {protocol ? (<Text style={{ color: AppColors.slate400, fontFamily: AppFonts.interRegular }}>{protocol}</Text>) : null}
-          <Text style={{ color: AppColors.purple, fontFamily: AppFonts.interBold }}>{host}</Text>
-          <Text style={{ color: AppColors.slate700, fontFamily: AppFonts.interMedium }}>{pathname}</Text>
-          {search ? (<Text style={{ color: AppColors.teal600, fontFamily: AppFonts.interRegular }}>{search}</Text>) : null}
-        </Text>);
-        }
-        catch {
-            return rawUrl;
-        }
-    };
-    return (<View style={styles.metaContainer}>
-      <Pressable onPress={toggleOpen} hitSlop={12}>
-        <View style={styles.metaHeader}>
-          <Text style={styles.metaTitle}>Metadata</Text>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            <CopyButton value={{
-            status: status ?? 0,
-            duration: duration != null ? `${duration} ms` : '—',
-            size: size || '—',
-            triggeredAt: triggeredAt || '',
-            method: method || 'GET',
-            contentType: contentType || 'application/json',
-            url: url || '',
-        }} label="Metadata"/>
-            <View style={chevronStyle}>
-              <ChevronIcon color={AppColors.grayTextWeak} size={14}/>
-            </View>
-          </View>
-        </View>
-      </Pressable>
+import{useState as oe}from"react";import{useTranslation as le}from"../i18n";import{View as T,Pressable as Te,Text as V}from"react-native";import{DURATION_FAST_MS as J,DURATION_SLOW_MS as K}from"../constants";import ue from"../customHooks/useAccordion";import{getDurationColor as D,handleOpenExternalLink as be}from"../helpers";import{ChevronIcon as Ve,CalendarIcon as Se,StatusIcon as Re,ClockIcon as Ce,SizeIcon as Le,TerminalIcon as Ie,GlobeIcon as Q}from"./NetworkIcons";import U from"./TouchableScale";import De from"./CopyButton";import{AppColors as h}from"../styles/AppColors";import{AppFonts as C}from"../styles/AppFonts";import e from"../styles";const Fe=({status:B,statusColor:M,duration:S,size:P,triggeredAt:E,method:j,contentType:_,url:z})=>{const{t:R}=le(),[G,X]=oe(!1),{isOpen:Y,toggleOpen:Z,chevronStyle:ee}=ue(!0),I=B===0||B==null,te=L=>{if(!L)return"\u2014";try{const $=L.indexOf("//");let F=L,v="";$!==-1&&(v=L.substring(0,$+2),F=L.substring($+2));const A=F.indexOf("/");let N=F,W="";A!==-1&&(N=F.substring(0,A),W=F.substring(A));const O=W.indexOf("?");let q=W,H="";return O!==-1&&(q=W.substring(0,O),H=W.substring(O)),<V style={{lineHeight:16}}>
+          {v?<V style={{color:h.slate400,fontFamily:C.interRegular}}>{v}</V>:null}
+          <V style={{color:h.purple,fontFamily:C.interBold}}>{N}</V>
+          <V style={{color:h.slate700,fontFamily:C.interMedium}}>{q}</V>
+          {H?<V style={{color:h.teal600,fontFamily:C.interRegular}}>{H}</V>:null}
+        </V>}catch{return L}};return<T style={e.metaContainer}>
+      <Te onPress={Z}hitSlop={12}>
+        <T style={e.metaHeader}>
+          <V style={e.metaTitle}>Metadata</V>
+          <T style={{flexDirection:"row",alignItems:"center",gap:8}}>
+            <De value={{status:B??0,duration:S!=null?`${S} ms`:"\u2014",size:P||"\u2014",triggeredAt:E||"",method:j||"GET",contentType:_||"application/json",url:z||""}}label="Metadata"/>
+            <T style={ee}>
+              <Ve color={h.grayTextWeak}size={14}/>
+            </T>
+          </T>
+        </T>
+      </Te>
 
-      {isOpen && (<View style={styles.metaBody}>
-          <View style={styles.metaRow}>
-            <View style={styles.metaLabelRow}>
-              <CalendarIcon color={AppColors.grayTextWeak} size={14}/>
-              <Text style={styles.metaLabel}>{t('network.triggeredAt')}</Text>
-            </View>
-            <Text style={[
-                styles.metaValue,
-                { color: AppColors.purple, fontSize: 12 },
-            ]}>
-              {triggeredAt}
-            </Text>
-          </View>
-          <View style={styles.metaDivider}/>
+      {Y&&<T style={e.metaBody}>
+          <T style={e.metaRow}>
+            <T style={e.metaLabelRow}>
+              <Se color={h.grayTextWeak}size={14}/>
+              <V style={e.metaLabel}>{R("network.triggeredAt")}</V>
+            </T>
+            <V style={[e.metaValue,{color:h.purple,fontSize:12}]}>
+              {E}
+            </V>
+          </T>
+          <T style={e.metaDivider}/>
 
-          <View style={styles.metaRow}>
-            <View style={styles.metaLabelRow}>
-              <TerminalIcon color={AppColors.grayTextWeak} size={14}/>
-              <Text style={styles.metaLabel}>{t('network.methodHeader')}</Text>
-            </View>
-            <View style={[
-                styles.statusChip,
-                {
-                    borderColor: `${AppColors.brandPurple}40`,
-                    backgroundColor: `${AppColors.brandPurple}14`,
-                },
-            ]}>
-              <Text style={[
-                styles.statusText,
-                { color: AppColors.purple, fontFamily: AppFonts.interBold },
-            ]}>
-                {method || 'GET'}
-              </Text>
-            </View>
-          </View>
-          <View style={styles.metaDivider}/>
+          <T style={e.metaRow}>
+            <T style={e.metaLabelRow}>
+              <Ie color={h.grayTextWeak}size={14}/>
+              <V style={e.metaLabel}>{R("network.methodHeader")}</V>
+            </T>
+            <T style={[e.statusChip,{borderColor:`${h.brandPurple}40`,backgroundColor:`${h.brandPurple}14`}]}>
+              <V style={[e.statusText,{color:h.purple,fontFamily:C.interBold}]}>
+                {j||"GET"}
+              </V>
+            </T>
+          </T>
+          <T style={e.metaDivider}/>
 
-          <View style={styles.metaRow}>
-            <View style={styles.metaLabelRow}>
-              <StatusIcon color={AppColors.grayTextWeak}/>
-              <Text style={styles.metaLabel}>{t('network.statusHeader')}</Text>
-            </View>
-            <View style={[
-                styles.statusChip,
-                {
-                    borderColor: isFailed
-                        ? `${AppColors.errorColor}40`
-                        : `${statusColor}40`,
-                    backgroundColor: isFailed
-                        ? `${AppColors.errorColor}15`
-                        : `${statusColor}15`,
-                },
-            ]}>
-              <Text style={[
-                styles.statusText,
-                { color: isFailed ? AppColors.errorColor : statusColor },
-            ]}>
-                {isFailed ? t('network.failedNetworkError') : String(status)}
-              </Text>
-            </View>
-          </View>
-          <View style={styles.metaDivider}/>
+          <T style={e.metaRow}>
+            <T style={e.metaLabelRow}>
+              <Re color={h.grayTextWeak}/>
+              <V style={e.metaLabel}>{R("network.statusHeader")}</V>
+            </T>
+            <T style={[e.statusChip,{borderColor:I?`${h.errorColor}40`:`${M}40`,backgroundColor:I?`${h.errorColor}15`:`${M}15`}]}>
+              <V style={[e.statusText,{color:I?h.errorColor:M}]}>
+                {I?R("network.failedNetworkError"):String(B)}
+              </V>
+            </T>
+          </T>
+          <T style={e.metaDivider}/>
 
-          <View style={styles.metaRow}>
-            <View style={styles.metaLabelRow}>
-              <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
-              <Text style={styles.metaLabel}>{t('network.contentType')}</Text>
-            </View>
-            <Text style={styles.metaValue}>
-              {contentType || 'application/json'}
-            </Text>
-          </View>
-          <View style={styles.metaDivider}/>
+          <T style={e.metaRow}>
+            <T style={e.metaLabelRow}>
+              <Q color={h.grayTextWeak}size={14}/>
+              <V style={e.metaLabel}>{R("network.contentType")}</V>
+            </T>
+            <V style={e.metaValue}>
+              {_||"application/json"}
+            </V>
+          </T>
+          <T style={e.metaDivider}/>
 
-          <View style={styles.metaRow}>
-            <View style={styles.metaLabelRow}>
-              <ClockIcon color={AppColors.grayTextWeak} size={14}/>
-              <Text style={styles.metaLabel}>{t('network.durationHeader')}</Text>
-            </View>
-            <View style={styles.metaValueRow}>
-              {duration != null && !isFailed && (<View style={[
-                    styles.perfBadge,
-                    {
-                        backgroundColor: `${getDurationColor(duration)}15`,
-                        borderColor: `${getDurationColor(duration)}40`,
-                    },
-                ]}>
-                  <Text style={[
-                    styles.perfBadgeText,
-                    { color: getDurationColor(duration) },
-                ]}>
-                    {duration < DURATION_FAST_MS
-                    ? t('network.perf.fast')
-                    : duration < DURATION_SLOW_MS
-                        ? t('network.perf.moderate')
-                        : t('network.perf.slow')}
-                  </Text>
-                </View>)}
-              <Text style={styles.metaValue}>
-                {duration != null ? `${duration} ms` : '—'}
-              </Text>
-            </View>
-          </View>
+          <T style={e.metaRow}>
+            <T style={e.metaLabelRow}>
+              <Ce color={h.grayTextWeak}size={14}/>
+              <V style={e.metaLabel}>{R("network.durationHeader")}</V>
+            </T>
+            <T style={e.metaValueRow}>
+              {S!=null&&!I&&<T style={[e.perfBadge,{backgroundColor:`${D(S)}15`,borderColor:`${D(S)}40`}]}>
+                  <V style={[e.perfBadgeText,{color:D(S)}]}>
+                    {S<J?R("network.perf.fast"):S<K?R("network.perf.moderate"):R("network.perf.slow")}
+                  </V>
+                </T>}
+              <V style={e.metaValue}>
+                {S!=null?`${S} ms`:"\u2014"}
+              </V>
+            </T>
+          </T>
 
           
-          {duration != null && !isFailed && (<View style={{ paddingVertical: 8, gap: 6 }}>
-              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11, color: AppColors.primaryBlack }}>
-                  {t('network.timingWaterfall')}
-                </Text>
-                <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 10.5, color: getDurationColor(duration) }}>
-                  {duration < DURATION_FAST_MS
-                    ? t('network.perf.fast')
-                    : duration < DURATION_SLOW_MS
-                        ? t('network.perf.moderate')
-                        : t('network.perf.slow')}
-                </Text>
-              </View>
+          {S!=null&&!I&&<T style={{paddingVertical:8,gap:6}}>
+              <T style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}>
+                <V style={{fontFamily:C.interBold,fontSize:11,color:h.primaryBlack}}>
+                  {R("network.timingWaterfall")}
+                </V>
+                <V style={{fontFamily:C.interMedium,fontSize:10.5,color:D(S)}}>
+                  {S<J?R("network.perf.fast"):S<K?R("network.perf.moderate"):R("network.perf.slow")}
+                </V>
+              </T>
 
-              <View style={{
-                    height: 6,
-                    backgroundColor: AppColors.grayBorderSecondary,
-                    borderRadius: 3,
-                    overflow: 'hidden',
-                }}>
-                <View style={{
-                    height: '100%',
-                    width: `${Math.min(100, Math.max(8, (duration / 1200) * 100))}%`,
-                    backgroundColor: getDurationColor(duration),
-                    borderRadius: 3,
-                }}/>
-              </View>
+              <T style={{height:6,backgroundColor:h.grayBorderSecondary,borderRadius:3,overflow:"hidden"}}>
+                <T style={{height:"100%",width:`${Math.min(100,Math.max(8,S/1200*100))}%`,backgroundColor:D(S),borderRadius:3}}/>
+              </T>
 
-              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 1 }}>
-                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak }}>
+              <T style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:1}}>
+                <V style={{fontFamily:C.interRegular,fontSize:9.5,color:h.grayTextWeak}}>
                   0 ms
-                </Text>
-                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10, color: getDurationColor(duration) }}>
-                  {duration} ms
-                </Text>
-                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak }}>
+                </V>
+                <V style={{fontFamily:C.interBold,fontSize:10,color:D(S)}}>
+                  {S} ms
+                </V>
+                <V style={{fontFamily:C.interRegular,fontSize:9.5,color:h.grayTextWeak}}>
                   1,200+ ms
-                </Text>
-              </View>
-            </View>)}
-          <View style={styles.metaDivider}/>
+                </V>
+              </T>
+            </T>}
+          <T style={e.metaDivider}/>
 
-          <View style={styles.metaRow}>
-            <View style={styles.metaLabelRow}>
-              <SizeIcon color={AppColors.grayTextWeak}/>
-              <Text style={styles.metaLabel}>{t('network.sizeHeader')}</Text>
-            </View>
-            <Text style={styles.metaValue}>{size}</Text>
-          </View>
-          <View style={styles.metaDivider}/>
+          <T style={e.metaRow}>
+            <T style={e.metaLabelRow}>
+              <Le color={h.grayTextWeak}/>
+              <V style={e.metaLabel}>{R("network.sizeHeader")}</V>
+            </T>
+            <V style={e.metaValue}>{P}</V>
+          </T>
+          <T style={e.metaDivider}/>
 
-          <View style={[styles.metaRow, { alignItems: 'flex-start', flexDirection: 'column', gap: 6 }]}>
-            <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
-              <View style={styles.metaLabelRow}>
-                <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
-                <Text style={styles.metaLabel}>{t('network.fullUrl')}</Text>
-              </View>
+          <T style={[e.metaRow,{alignItems:"flex-start",flexDirection:"column",gap:6}]}>
+            <T style={{flexDirection:"row",justifyContent:"space-between",width:"100%",alignItems:"center"}}>
+              <T style={e.metaLabelRow}>
+                <Q color={h.grayTextWeak}size={14}/>
+                <V style={e.metaLabel}>{R("network.fullUrl")}</V>
+              </T>
               
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-                {url && url.length > 50 && (<TouchableScale onPress={() => setUrlExpanded(prev => !prev)} hitSlop={8}>
-                    <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: AppColors.purple,
-                }}>
-                      {urlExpanded ? t('network.showLess') : t('network.showMore')}
-                    </Text>
-                  </TouchableScale>)}
+              <T style={{flexDirection:"row",alignItems:"center",gap:10}}>
+                {z&&z.length>50&&<U onPress={()=>X(L=>!L)}hitSlop={8}>
+                    <V style={{fontFamily:C.interBold,fontSize:10.5,color:h.purple}}>
+                      {R(G?"network.showLess":"network.showMore")}
+                    </V>
+                  </U>}
                 
-                {url && (<TouchableScale onPress={() => handleOpenExternalLink(url)} hitSlop={8}>
-                    <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: AppColors.purple,
-                    textDecorationLine: 'underline',
-                }}>
-                      {t('network.open')}
-                    </Text>
-                  </TouchableScale>)}
-              </View>
-            </View>
+                {z&&<U onPress={()=>be(z)}hitSlop={8}>
+                    <V style={{fontFamily:C.interBold,fontSize:10.5,color:h.purple,textDecorationLine:"underline"}}>
+                      {R("network.open")}
+                    </V>
+                  </U>}
+              </T>
+            </T>
             
-            <View style={{
-                backgroundColor: AppColors.slate50,
-                borderRadius: 8,
-                padding: 8,
-                borderWidth: 1.5,
-                borderColor: AppColors.slate200,
-                width: '100%',
-                marginTop: 2,
-            }}>
-              <Text selectable={true} numberOfLines={urlExpanded ? undefined : 2} ellipsizeMode="tail" style={{
-                fontSize: 11,
-                textAlign: 'left',
-                lineHeight: 16.5,
-            }}>
-                {renderFormattedUrl(url)}
-              </Text>
-            </View>
-          </View>
-        </View>)}
-    </View>);
-};
-export default MetaAccordion;
+            <T style={{backgroundColor:h.slate50,borderRadius:8,padding:8,borderWidth:1.5,borderColor:h.slate200,width:"100%",marginTop:2}}>
+              <V selectable={!0}numberOfLines={G?void 0:2}ellipsizeMode="tail"style={{fontSize:11,textAlign:"left",lineHeight:16.5}}>
+                {te(z)}
+              </V>
+            </T>
+          </T>
+        </T>}
+    </T>};export default Fe;

package/dist/esm/components/MiniBarChart.js

@@ -1,18 +1,3 @@
-import React from 'react';
-import Svg, { Rect } from 'react-native-svg';
-const MiniBarChart = ({ data, color, maxVal, }) => {
-    if (!data || data.length === 0)
-        return <Svg width={40} height={16}/>;
-    const max = maxVal || Math.max(...data, 1);
-    const paddedData = data.length < 10
-        ? [...Array(10 - data.length).fill(0), ...data]
-        : data.slice(-10);
-    return (<Svg width={40} height={16} viewBox="0 0 40 16">
-      {paddedData.map((val, i) => {
-            const h = Math.max((val / max) * 16, 2);
-            const opacity = val === 0 && maxVal === 1 ? 0.2 : 1;
-            return (<Rect key={i} x={i * 4} y={16 - h} width={2.5} height={h} fill={color} rx={1} opacity={opacity}/>);
-        })}
-    </Svg>);
-};
-export default MiniBarChart;
+import"react";import M,{Rect as A}from"react-native-svg";const C=({data:t,color:v,maxVal:e})=>{if(!t||t.length===0)return<M width={40}height={16}/>;const B=e||Math.max(...t,1),R=t.length<10?[...Array(10-t.length).fill(0),...t]:t.slice(-10);return<M width={40}height={16}viewBox="0 0 40 16">
+      {R.map((h,i)=>{const r=Math.max(h/B*16,2),S=h===0&&e===1?.2:1;return<A key={i}x={i*4}y={16-r}width={2.5}height={r}fill={v}rx={1}opacity={S}/>})}
+    </M>};export default C;

package/dist/esm/components/MiniLineChart.js

@@ -1,20 +1,3 @@
-import React from 'react';
-import Svg, { Path } from 'react-native-svg';
-const MiniLineChart = ({ data, color }) => {
-    if (!data || data.length === 0)
-        return <Svg width={40} height={16}/>;
-    const paddedData = data.length < 10
-        ? [...Array(10 - data.length).fill(data[0] || 0), ...data]
-        : data.slice(-10);
-    const max = Math.max(...paddedData, 1);
-    const min = Math.min(...paddedData, 0);
-    const range = max - min || 1;
-    const dx = 40 / 9;
-    const points = paddedData
-        .map((d, i) => `${i * dx},${14 - ((d - min) / range) * 12}`)
-        .join(' L ');
-    return (<Svg width={40} height={16} viewBox="0 0 40 16">
-      <Path d={`M ${points}`} fill="none" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export default MiniLineChart;
+import"react";import L,{Path as A}from"react-native-svg";const B=({data:n,color:M})=>{if(!n||n.length===0)return<L width={40}height={16}/>;const t=n.length<10?[...Array(10-n.length).fill(n[0]||0),...n]:n.slice(-10),a=Math.max(...t,1),o=Math.min(...t,0),v=a-o||1,w=40/9,$=t.map((j,S)=>`${S*w},${14-(j-o)/v*12}`).join(" L ");return<L width={40}height={16}viewBox="0 0 40 16">
+      <A d={`M ${$}`}fill="none"stroke={M}strokeWidth={1.5}strokeLinecap="round"strokeLinejoin="round"/>
+    </L>};export default B;

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

@@ -33,6 +33,7 @@ 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;
 export declare const DiffIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const GlobeIcon: ({ color, size }: IconProps) => React.JSX.Element;
@@ -128,6 +129,8 @@ export declare const TagIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const NpmIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ResetIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ChevronDownIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const MaximizeIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const MinimizeIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const CpuIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const WifiIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const ShieldCheckIcon: ({ color, size, }: IconProps) => React.JSX.Element;
@@ -151,3 +154,7 @@ export declare const PlayIcon: ({ color, size, }: IconProps) => React.JSX.Elemen
 export declare const PauseIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const ImageIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const FilmIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ScreencastIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ListIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const GridIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const MinimizeWindowIcon: ({ color, size }: IconProps) => React.JSX.Element;