react-native-inapp-inspector 2.3.18 → 2.3.20

package/dist/esm/components/JsonViewer.js

@@ -1,359 +1,185 @@
-import React, { useState, useEffect } from 'react';
-import { ScrollView, View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import { useTranslation } from '../i18n';
-import TreeNode from './TreeNode';
-import SegmentedTabs from './SegmentedTabs';
-import HighlightText from './HighlightText';
-import CopyButton from './CopyButton';
-import { PrettyIcon, RawIcon, TableIcon, ChevronIcon } from './NetworkIcons';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-import styles from '../styles';
-const JsonTableRow = React.memo(({ itemKey, val, search, }) => {
-    const [expanded, setExpanded] = useState(false);
-    const isObject = val !== null && typeof val === 'object';
-    let rawStr = '';
-    if (val === null) {
-        rawStr = 'null';
-    }
-    else if (val === undefined) {
-        rawStr = 'undefined';
-    }
-    else if (isObject) {
-        try {
-            rawStr = JSON.stringify(val, null, 2);
-        }
-        catch {
-            rawStr = String(val);
-        }
-    }
-    else {
-        rawStr = String(val);
-    }
-    const isMultiline = rawStr.includes('\n') || rawStr.length > 90;
-    return (<View style={localStyles.tableRow}>
-      <View style={{ flex: 2, paddingRight: 8 }}>
-        <HighlightText text={itemKey} search={search} style={localStyles.tableCellKey} highlightStyle={localStyles.highlight}/>
-        {isObject && (<Text style={localStyles.tableTypeBadge}>
-            {Array.isArray(val) ? `Array(${val.length})` : 'Object'}
-          </Text>)}
-      </View>
+import de,{useState as j,useEffect as ee,useMemo as v}from"react";import{ScrollView as A,View as F,Text as T,StyleSheet as he,TouchableOpacity as O,Platform as ue}from"react-native";import{useTranslation as we}from"../i18n";import Te from"./TreeNode";import L from"./HighlightText";import Ce from"./TouchableScale";import{PrettyIcon as Se,RawIcon as Ve,TableIcon as Be,ChevronIcon as Ee,CopyIcon as De,CheckIcon as Re}from"./NetworkIcons";import{getSize as We,copyToClipboard as Ie}from"../helpers";import{triggerNativeHaptic as Ae}from"../native/NativeInspector";const S=ue.select({ios:"Menlo",android:"monospace",default:"monospace"}),Oe=t=>t===null?{label:"null",color:"#E11D48",bg:"#FFF1F2",border:"#FECDD3"}:t===void 0?{label:"undef",color:"#E11D48",bg:"#FFF1F2",border:"#FECDD3"}:Array.isArray(t)?{label:`arr[${t.length}]`,color:"#2563EB",bg:"#EFF6FF",border:"#BFDBFE"}:typeof t=="object"?{label:`obj{${Object.keys(t).length}}`,color:"#7C3AED",bg:"#F5F3FF",border:"#DDD6FE"}:typeof t=="number"?{label:"num",color:"#D97706",bg:"#FEF3C7",border:"#FDE68A"}:typeof t=="boolean"?{label:"bool",color:"#DB2777",bg:"#FDF2F8",border:"#FBCFE8"}:{label:"str",color:"#059669",bg:"#ECFDF5",border:"#A7F3D0"},He=de.memo(({itemKey:t,val:f,search:H,index:$})=>{const[R,z]=j(!1),P=f!==null&&typeof f=="object",D=Oe(f);let B="";if(f===null)B="null";else if(f===void 0)B="undefined";else if(P)try{B=JSON.stringify(f,null,2)}catch{B=String(f)}else B=String(f);const _=B.includes(`
+`)||B.length>80;return<F style={[e.tableRow,$%2===1&&e.tableRowAlt]}>
+      
+      <F style={e.tableColKey}>
+        <L text={t}search={H}style={e.tableCellKey}highlightStyle={e.highlight}/>
+        <F style={[e.typePill,{backgroundColor:D.bg,borderColor:D.border}]}>
+          <T style={[e.typePillText,{color:D.color}]}>
+            {D.label}
+          </T>
+        </F>
+      </F>
 
-      <View style={{ flex: 3 }}>
-        <HighlightText text={rawStr} search={search} style={[
-            localStyles.tableCellValue,
-            isObject && localStyles.tableCellRawCode,
-        ]} highlightStyle={localStyles.highlight} numberOfLines={expanded ? undefined : 3} selectable={true}/>
-        {isMultiline && (<TouchableOpacity onPress={() => setExpanded(prev => !prev)} hitSlop={6} style={[localStyles.showMoreBtn, { flexDirection: 'row', alignItems: 'center', gap: 4 }]}>
-            <Text style={localStyles.showMoreText}>
-              {expanded ? 'Show less' : 'Show more'}
-            </Text>
-            <ChevronIcon direction={expanded ? 'up' : 'down'} size={10} color={AppColors.purple}/>
-          </TouchableOpacity>)}
-      </View>
-    </View>);
-});
-const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth = 1, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
-    const { t } = useTranslation();
-    const [internalMode, setInternalMode] = useState('raw');
-    const mode = externalMode ?? internalMode;
-    const setMode = (newMode) => {
-        if (onModeChange) {
-            onModeChange(newMode);
-        }
-        else {
-            setInternalMode(newMode);
-        }
-    };
-    const rawText = React.useMemo(() => {
-        if (data === undefined || data === null) {
-            return '';
-        }
-        if (typeof data === 'string') {
-            return data;
-        }
-        try {
-            const stringified = JSON.stringify(data);
-            return stringified ?? '';
-        }
-        catch {
-            return String(data) || '';
-        }
-    }, [data]);
-    const [showFullRaw, setShowFullRaw] = useState(false);
-    const RAW_LIMIT = 50000;
-    const safeRawText = typeof rawText === 'string' ? rawText : '';
-    const isTruncated = safeRawText.length > RAW_LIMIT && !showFullRaw;
-    const displayRawText = isTruncated ? safeRawText.slice(0, RAW_LIMIT) : safeRawText;
-    useEffect(() => {
-        if (externalMode) {
-            setInternalMode(externalMode);
-        }
-    }, [externalMode]);
-    const contentWrapperStyle = [
-        localStyles.contentWrapper,
-        { backgroundColor: AppColors.contentBg },
-        fullHeight && { flex: 1, maxHeight: undefined },
-        !fullHeight && maxHeight != null && { maxHeight },
-    ];
-    const scrollStyle = [
-        localStyles.rawScroll,
-        !fullHeight && maxHeight != null && { maxHeight },
-    ];
-    const isObject = typeof data === 'object' && data !== null;
-    const isEmpty = data === null ||
-        data === undefined ||
-        (isObject && Object.keys(data).length === 0);
-    const renderTableMode = () => {
-        if (!isObject) {
-            return (<View style={localStyles.tableRow}>
-          <Text style={localStyles.tableCellKey}>{t('network.jsonViewer.value')}</Text>
-          <Text style={localStyles.tableCellValue}>{String(data)}</Text>
-        </View>);
-        }
-        let keys = Object.keys(data);
-        if (search && search.trim().length > 0) {
-            const q = search.trim().toLowerCase();
-            keys = keys.filter(key => {
-                const val = data[key];
-                const valStr = typeof val === 'object' && val !== null ? JSON.stringify(val) : String(val);
-                return key.toLowerCase().includes(q) || valStr.toLowerCase().includes(q);
-            });
-        }
-        if (keys.length === 0) {
-            return (<View style={localStyles.emptyTable}>
-          <Text style={localStyles.emptyTableText}>
-            {search && search.trim().length > 0
-                    ? 'No matching keys or values found'
-                    : t('network.jsonViewer.emptyTable')}
-          </Text>
-        </View>);
-        }
-        return (<View style={localStyles.tableView}>
-        <View style={localStyles.tableHeaderRow}>
-          <Text style={[localStyles.tableHeaderCell, { flex: 2 }]}>{t('network.jsonViewer.key')}</Text>
-          <Text style={[localStyles.tableHeaderCell, { flex: 3 }]}>{t('network.jsonViewer.value')}</Text>
-        </View>
-        {keys.map((key) => (<JsonTableRow key={key} itemKey={key} val={data[key]} search={search}/>))}
-      </View>);
-    };
-    const tree = (<TreeNode data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>);
-    return (<View style={[localStyles.container, fullHeight && { flex: 1 }]}>
       
-      {!hideTabs && (<View style={localStyles.toolbar}>
-          <SegmentedTabs tabs={[
-                {
-                    key: 'pretty',
-                    label: t('network.jsonViewer.pretty'),
-                    icon: (isActive) => (<PrettyIcon color={isActive ? AppColors.white : AppColors.slate400} size={12}/>),
-                },
-                {
-                    key: 'raw',
-                    label: t('network.jsonViewer.raw'),
-                    icon: (isActive) => (<RawIcon color={isActive ? AppColors.white : AppColors.slate400} size={12}/>),
-                },
-                {
-                    key: 'table',
-                    label: t('network.jsonViewer.table'),
-                    icon: (isActive) => (<TableIcon color={isActive ? AppColors.white : AppColors.slate400} size={12}/>),
-                },
-            ]} activeKey={mode} onChange={key => setMode(key)}/>
-          <CopyButton value={data} label="JSON"/>
-        </View>)}
+      <F style={e.tableColVal}>
+        <F style={P?e.tableCodeBox:void 0}>
+          <L text={B}search={H}style={[e.tableCellValue,f==null?e.syntaxNull:void 0,typeof f=="number"?e.syntaxNumber:void 0,typeof f=="boolean"?e.syntaxBoolean:void 0,typeof f=="string"?e.syntaxString:void 0]}highlightStyle={e.highlight}numberOfLines={R?void 0:3}selectable={!0}/>
+        </F>
+        {_&&<O onPress={()=>z(W=>!W)}hitSlop={6}style={e.showMoreBtn}>
+            <T style={e.showMoreText}>
+              {R?"Collapse":"Expand"}
+            </T>
+            <Ee direction={R?"up":"down"}size={9}color="#4F46E5"/>
+          </O>}
+      </F>
+    </F>}),je=de.memo(({data:t,search:f,forceOpen:H,defaultExpandDepth:$=1,wrap:R,fullHeight:z=!1,maxHeight:P,mode:D,onModeChange:B,hideTabs:_=!1})=>{const{t:W}=we(),[ge,te]=j(D??"pretty"),[oe,re]=j(!1),[N,le]=j(R??!1),[G,ne]=j(H),V=B&&D?D:ge,Y=x=>{te(x),B&&B(x)};ee(()=>{R!==void 0&&le(R)},[R]),ee(()=>{H!==void 0&&ne(H)},[H]);const k=v(()=>{if(t==null)return"";if(typeof t=="string")return t;try{return JSON.stringify(t,null,2)??""}catch{return String(t)||""}},[t]),ye=v(()=>{if(typeof t=="string")return t;try{return JSON.stringify(t)??""}catch{return String(t)||""}},[t]),[pe,ie]=j(!1),ae=5e4,q=typeof k=="string"?k:"",U=q.length>ae&&!pe,Q=U?q.slice(0,ae):q,K=v(()=>Q?Q.split(`
+`):[""],[Q]),se=K.length,be=v(()=>We(t),[t]);ee(()=>{D&&te(D)},[D]);const Fe=()=>{Ae("success"),Ie(ye||k,"JSON"),re(!0),setTimeout(()=>re(!1),1200)},X=typeof t=="object"&&t!==null,fe=t==null||X&&Object.keys(t).length===0,ce=()=>{if(!X)return<F style={e.tableRow}>
+          <F style={e.tableColKey}>
+            <T style={e.tableCellKey}>{W("network.jsonViewer.value")}</T>
+          </F>
+          <F style={e.tableColVal}>
+            <T style={e.tableCellValue}>{String(t)}</T>
+          </F>
+        </F>;let x=Object.keys(t);if(f&&f.trim().length>0){const C=f.trim().toLowerCase();x=x.filter(E=>{const I=t[E],M=typeof I=="object"&&I!==null?JSON.stringify(I):String(I);return E.toLowerCase().includes(C)||M.toLowerCase().includes(C)})}return x.length===0?<F style={e.emptyContainer}>
+          <T style={e.emptyText}>
+            {f&&f.trim().length>0?"No matching keys or values found":W("network.jsonViewer.emptyTable")}
+          </T>
+        </F>:<F style={e.tableView}>
+        
+        <F style={e.tableHeaderRow}>
+          <T style={[e.tableHeaderCell,{flex:2}]}>KEY / PROPERTY</T>
+          <T style={[e.tableHeaderCell,{flex:3}]}>VALUE</T>
+        </F>
+        {x.map((C,E)=><He key={C}index={E}itemKey={C}val={t[C]}search={f}/>)}
+      </F>},J=<Te data={t}search={f}forceOpen={G}defaultExpandDepth={G?99:$}/>;return<F style={[e.container,z&&{flex:1}]}>
+      
+      <F style={e.snippetHeader}>
+        
+        <F style={e.headerLeft}>
+          <F style={e.langBadge}>
+            <T style={e.langBadgeText}>JSON</T>
+          </F>
+          <F style={e.metaBadge}>
+            <T style={e.metaBadgeText}numberOfLines={1}ellipsizeMode="tail">
+              {se} {se===1?"line":"lines"} · {be}
+            </T>
+          </F>
+        </F>
+
+        
+        <F style={e.headerRight}>
+          {!_&&<F style={e.snippetTabs}>
+              <O onPress={()=>Y("pretty")}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}style={[e.snippetTabBtn,V==="pretty"&&e.snippetTabBtnActive]}>
+                <Se color={V==="pretty"?"#FFFFFF":"#64748B"}size={11}/>
+                <T style={[e.snippetTabText,V==="pretty"&&e.snippetTabTextActive]}>
+                  {W("network.jsonViewer.pretty")}
+                </T>
+              </O>
+
+              <O onPress={()=>Y("raw")}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}style={[e.snippetTabBtn,V==="raw"&&e.snippetTabBtnActive]}>
+                <Ve color={V==="raw"?"#FFFFFF":"#64748B"}size={11}/>
+                <T style={[e.snippetTabText,V==="raw"&&e.snippetTabTextActive]}>
+                  {W("network.jsonViewer.raw")}
+                </T>
+              </O>
+
+              <O onPress={()=>Y("table")}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}style={[e.snippetTabBtn,V==="table"&&e.snippetTabBtnActive]}>
+                <Be color={V==="table"?"#FFFFFF":"#64748B"}size={11}/>
+                <T style={[e.snippetTabText,V==="table"&&e.snippetTabTextActive]}>
+                  {W("network.jsonViewer.table")}
+                </T>
+              </O>
+            </F>}
+
+          
+          {V==="pretty"&&X&&<O onPress={()=>ne(x=>!x)}hitSlop={{top:6,bottom:6,left:4,right:4}}style={e.toolToggleBtn}>
+              <T style={e.toolToggleText}>
+                {G?"Fold":"Expand"}
+              </T>
+            </O>}
 
+          
+          {V==="raw"&&<O onPress={()=>le(x=>!x)}hitSlop={{top:6,bottom:6,left:4,right:4}}style={[e.toolToggleBtn,N&&e.toolToggleBtnActive]}>
+              <T style={[e.toolToggleText,N&&e.toolToggleTextActive]}>
+                Wrap
+              </T>
+            </O>}
+
+          
+          <Ce onPress={Fe}hitSlop={8}style={[e.copyBtn,oe&&e.copyBtnSuccess]}>
+            {oe?<Re color="#10B981"size={13}/>:<De color="#64748B"size={13}/>}
+          </Ce>
+        </F>
+      </F>
       
-      <View style={contentWrapperStyle}>
-        {mode === 'pretty' && (isEmpty ? (<View style={localStyles.emptyTable}>
-              <Text style={localStyles.emptyTableText}>
-                {t('network.jsonViewer.emptyPayload')}
-              </Text>
-            </View>) : (wrap ? (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
-                  <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>
-                </ScrollView>) : (<View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>)) : (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
-                  <ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
-                    <View style={styles.codeBlock}>{tree}</View>
-                  </ScrollView>
-                </ScrollView>) : (<ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
-                  <View style={styles.codeBlock}>{tree}</View>
-                </ScrollView>))))}
+      <F style={[e.editorBody,z&&{flex:1,maxHeight:void 0},!z&&P!=null&&{maxHeight:P}]}>
+        
+        {V==="pretty"&&(fe?<F style={e.emptyContainer}>
+              <T style={e.emptyText}>
+                {W("network.jsonViewer.emptyPayload")}
+              </T>
+            </F>:N?z?<A style={{flex:1}}contentContainerStyle={e.prettyContainer}>
+                {J}
+              </A>:<F style={e.prettyContainer}>{J}</F>:z?<A style={{flex:1}}contentContainerStyle={{flexGrow:1}}>
+              <A horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={e.prettyContainer}>
+                {J}
+              </A>
+            </A>:<A horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={e.prettyContainer}>
+              {J}
+            </A>)}
+
+        
+        {V==="raw"&&(z?<A style={{flex:1}}contentContainerStyle={{flexGrow:1}}showsVerticalScrollIndicator={!0}>
+              <F style={e.rawEditorRow}>
+                
+                <F style={e.gutter}>
+                  {K.map((x,C)=><T key={C}style={e.gutterNumber}>
+                      {C+1}
+                    </T>)}
+                </F>
+
+                
+                <A horizontal={!N}showsHorizontalScrollIndicator={!0}style={{flex:1}}>
+                  <F style={e.rawTextContainer}>
+                    {K.map((x,C)=>{const E=x.match(/^(\s+)(.*)$/);if(E){const I=E[1],M=E[2],Z=I.replace(/  /g,"\xB7 ").replace(/ /g,"\xB7");return<F key={C}style={e.rawCodeLineRow}>
+                            <T style={e.indentDots}>{Z}</T>
+                            <L text={M}search={f}detectLinks={k.length<2e4}style={e.rawMonospaceText}selectable={!0}highlightStyle={e.highlight}/>
+                          </F>}return<F key={C}style={e.rawCodeLineRow}>
+                          <L text={x}search={f}detectLinks={k.length<2e4}style={e.rawMonospaceText}selectable={!0}highlightStyle={e.highlight}/>
+                        </F>})}
+                  </F>
+                </A>
+              </F>
+
+              {U&&<O onPress={()=>ie(!0)}style={e.truncationBanner}>
+                  <T style={e.truncationText}>
+                    Showing first 50 KB ({Math.round(k.length/1024)} KB total) · Tap to load full payload
+                  </T>
+                </O>}
+            </A>:<F>
+              <F style={e.rawEditorRow}>
+                
+                <F style={e.gutter}>
+                  {K.map((x,C)=><T key={C}style={e.gutterNumber}>
+                      {C+1}
+                    </T>)}
+                </F>
+
+                
+                <A horizontal={!N}showsHorizontalScrollIndicator={!0}style={{flex:1}}>
+                  <F style={e.rawTextContainer}>
+                    {K.map((x,C)=>{const E=x.match(/^(\s+)(.*)$/);if(E){const I=E[1],M=E[2],Z=I.replace(/  /g,"\xB7 ").replace(/ /g,"\xB7");return<F key={C}style={e.rawCodeLineRow}>
+                            <T style={e.indentDots}>{Z}</T>
+                            <L text={M}search={f}detectLinks={k.length<2e4}style={e.rawMonospaceText}selectable={!0}highlightStyle={e.highlight}/>
+                          </F>}return<F key={C}style={e.rawCodeLineRow}>
+                          <L text={x}search={f}detectLinks={k.length<2e4}style={e.rawMonospaceText}selectable={!0}highlightStyle={e.highlight}/>
+                        </F>})}
+                  </F>
+                </A>
+              </F>
 
-        {mode === 'raw' && (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={localStyles.rawContainer} showsVerticalScrollIndicator={true}>
-              <HighlightText text={displayRawText} search={search} detectLinks={rawText.length < 20000} style={localStyles.rawPlainText} selectable={true} highlightStyle={{
-                backgroundColor: AppColors.yellowHighlight,
-                color: AppColors.primaryBlack,
-                borderRadius: 3,
-                paddingHorizontal: 2,
-            }}/>
-              {isTruncated && (<TouchableOpacity onPress={() => setShowFullRaw(true)} style={{
-                    marginTop: 10,
-                    backgroundColor: `${AppColors.brandPurple}15`,
-                    paddingVertical: 8,
-                    paddingHorizontal: 12,
-                    borderRadius: 6,
-                    alignItems: 'center',
-                    borderWidth: 1,
-                    borderColor: `${AppColors.brandPurple}30`,
-                }}>
-                  <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 11,
-                    color: AppColors.brandPurple,
-                }}>
-                    Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
-                  </Text>
-                </TouchableOpacity>)}
-            </ScrollView>) : (<View style={localStyles.rawContainer}>
-              <HighlightText text={displayRawText} search={search} detectLinks={rawText.length < 20000} style={localStyles.rawPlainText} selectable={true} highlightStyle={{
-                backgroundColor: AppColors.yellowHighlight,
-                color: AppColors.primaryBlack,
-                borderRadius: 3,
-                paddingHorizontal: 2,
-            }}/>
-              {isTruncated && (<TouchableOpacity onPress={() => setShowFullRaw(true)} style={{
-                    marginTop: 10,
-                    backgroundColor: `${AppColors.brandPurple}15`,
-                    paddingVertical: 8,
-                    paddingHorizontal: 12,
-                    borderRadius: 6,
-                    alignItems: 'center',
-                    borderWidth: 1,
-                    borderColor: `${AppColors.brandPurple}30`,
-                }}>
-                  <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 11,
-                    color: AppColors.brandPurple,
-                }}>
-                    Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
-                  </Text>
-                </TouchableOpacity>)}
-            </View>))}
+              {U&&<O onPress={()=>ie(!0)}style={e.truncationBanner}>
+                  <T style={e.truncationText}>
+                    Showing first 50 KB ({Math.round(k.length/1024)} KB total) · Tap to load full payload
+                  </T>
+                </O>}
+            </F>)}
 
-        {mode === 'table' && (fullHeight ? (<ScrollView style={{ flex: 1 }}>
-              {renderTableMode()}
-            </ScrollView>) : (<View style={localStyles.tableView}>
-              {renderTableMode()}
-            </View>))}
-      </View>
-    </View>);
-});
-const localStyles = StyleSheet.create({
-    container: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        borderWidth: 1.5,
-        borderColor: AppColors.slate200,
-        overflow: 'hidden',
-        shadowColor: AppColors.black,
-        shadowOpacity: 0.04,
-        shadowRadius: 5,
-        shadowOffset: { width: 0, height: 2 },
-        elevation: 2,
-        width: '100%',
-    },
-    toolbar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        backgroundColor: AppColors.slate50,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.slate200,
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-    },
-    contentWrapper: {
-        backgroundColor: AppColors.white,
-        minHeight: 120,
-    },
-    rawScroll: {
-        flex: 1,
-        backgroundColor: AppColors.paperBg,
-    },
-    rawContainer: {
-        padding: 12,
-    },
-    rawPlainText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-        lineHeight: 18,
-    },
-    tableView: {
-        flex: 1,
-    },
-    tableHeaderRow: {
-        flexDirection: 'row',
-        backgroundColor: AppColors.slate100,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.slate200,
-        paddingVertical: 8,
-        paddingHorizontal: 12,
-    },
-    tableHeaderCell: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.slate600,
-        letterSpacing: 0.5,
-        textTransform: 'uppercase',
-    },
-    tableRow: {
-        flexDirection: 'row',
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.slate100,
-        paddingVertical: 10,
-        paddingHorizontal: 12,
-        alignItems: 'center',
-    },
-    tableCellKey: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.purple,
-    },
-    tableTypeBadge: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 9.5,
-        color: AppColors.slate400,
-        marginTop: 2,
-    },
-    tableCellValue: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-        lineHeight: 17,
-    },
-    tableCellRawCode: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11.5,
-        color: AppColors.slate700,
-        backgroundColor: `${AppColors.slate100}80`,
-        padding: 6,
-        borderRadius: 6,
-    },
-    showMoreBtn: {
-        alignSelf: 'flex-start',
-        marginTop: 4,
-        paddingVertical: 2,
-        paddingHorizontal: 4,
-    },
-    showMoreText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.purple,
-    },
-    emptyTable: {
-        padding: 24,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    emptyTableText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12.5,
-        color: AppColors.slate400,
-    },
-    highlight: {
-        backgroundColor: '#FEF08A',
-        color: '#854D0E',
-        fontFamily: AppFonts.interBold,
-    },
-});
-export default JsonViewer;
+        
+        {V==="table"&&(z?<A style={{flex:1}}>
+              {ce()}
+            </A>:<F style={e.tableView}>
+              {ce()}
+            </F>)}
+      </F>
+    </F>}),e=he.create({container:{backgroundColor:"#FFFFFF",borderRadius:12,borderWidth:1.5,borderColor:"#E2E8F0",overflow:"hidden",shadowColor:"#4F46E5",shadowOpacity:.05,shadowRadius:6,shadowOffset:{width:0,height:2},elevation:2,width:"100%"},snippetHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:"#F1F5F9",borderBottomWidth:1,borderBottomColor:"#E2E8F0",paddingHorizontal:8,paddingVertical:6,gap:6},headerLeft:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:1,minWidth:0},langBadge:{backgroundColor:"#FFFFFF",borderRadius:4,borderWidth:1,borderColor:"#CBD5E1",paddingHorizontal:5,paddingVertical:2},langBadgeText:{fontFamily:S,fontSize:9.5,color:"#475569",fontWeight:"700",letterSpacing:.4},metaBadge:{backgroundColor:"#FFFFFF",borderRadius:4,borderWidth:1,borderColor:"#CBD5E1",paddingHorizontal:5,paddingVertical:2,flexShrink:1},metaBadgeText:{fontFamily:S,fontSize:9.5,color:"#64748B",fontWeight:"600"},metaStats:{fontFamily:S,fontSize:9.5,color:"#64748B",flexShrink:1},headerRight:{flexDirection:"row",alignItems:"center",gap:5},snippetTabs:{flexDirection:"row",alignItems:"center",backgroundColor:"#E2E8F0",borderRadius:6,padding:2,borderWidth:1,borderColor:"#CBD5E1",gap:2},snippetTabBtn:{flexDirection:"row",alignItems:"center",gap:3.5,paddingVertical:2.5,paddingHorizontal:6,borderRadius:4},snippetTabBtnActive:{backgroundColor:"#4F46E5",shadowColor:"#4F46E5",shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2,elevation:1},snippetTabText:{fontFamily:S,fontSize:9.5,color:"#64748B",fontWeight:"600"},snippetTabTextActive:{color:"#FFFFFF",fontWeight:"700"},toolToggleBtn:{paddingHorizontal:6,paddingVertical:2.5,borderRadius:5,backgroundColor:"#FFFFFF",borderWidth:1,borderColor:"#CBD5E1",alignItems:"center",justifyContent:"center"},toolToggleBtnActive:{backgroundColor:"#EEF2FF",borderColor:"#C7D2FE"},toolToggleText:{fontFamily:S,fontSize:9.5,color:"#64748B",fontWeight:"600"},toolToggleTextActive:{color:"#4F46E5",fontWeight:"700"},copyBtn:{width:24,height:24,borderRadius:5,backgroundColor:"#FFFFFF",borderWidth:1,borderColor:"#CBD5E1",alignItems:"center",justifyContent:"center"},copyBtnSuccess:{borderColor:"#10B981",backgroundColor:"#ECFDF5"},editorBody:{backgroundColor:"#FFFFFF",minHeight:100},prettyContainer:{padding:12,minWidth:"100%",backgroundColor:"#FFFFFF"},rawEditorRow:{flexDirection:"row",alignItems:"stretch",minHeight:100},gutter:{backgroundColor:"#F1F5F9",borderRightWidth:1,borderRightColor:"#E2E8F0",paddingVertical:10,paddingHorizontal:8,alignItems:"flex-end",userSelect:"none"},gutterNumber:{fontFamily:S,fontSize:11.5,height:18,lineHeight:18,color:"#94A3B8",textAlign:"right"},rawTextContainer:{paddingVertical:10,paddingHorizontal:12,backgroundColor:"#FFFFFF"},rawCodeLineRow:{flexDirection:"row",alignItems:"center",height:18},indentDots:{fontFamily:S,fontSize:11.5,lineHeight:18,color:"#CBD5E1",letterSpacing:.5},rawMonospaceText:{fontFamily:S,fontSize:11.5,lineHeight:18,color:"#0F172A"},truncationBanner:{margin:10,backgroundColor:"#EEF2FF",paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center",borderWidth:1,borderColor:"#C7D2FE"},truncationText:{fontFamily:S,fontSize:10.5,color:"#4F46E5",fontWeight:"600"},tableView:{flex:1},tableHeaderRow:{flexDirection:"row",backgroundColor:"#F1F5F9",borderBottomWidth:1,borderBottomColor:"#E2E8F0",paddingVertical:7,paddingHorizontal:12},tableHeaderCell:{fontFamily:S,fontSize:10,color:"#475569",fontWeight:"700",letterSpacing:.5},tableRow:{flexDirection:"row",borderBottomWidth:1,borderBottomColor:"#F1F5F9",paddingVertical:8,paddingHorizontal:12,alignItems:"flex-start",backgroundColor:"#FFFFFF"},tableRowAlt:{backgroundColor:"#F8FAFC"},tableColKey:{flex:2,paddingRight:8},tableColVal:{flex:3},tableCellKey:{fontFamily:S,fontSize:11.5,fontWeight:"700",color:"#4F46E5"},typePill:{alignSelf:"flex-start",borderRadius:4,borderWidth:1,paddingHorizontal:4,paddingVertical:1,marginTop:3},typePillText:{fontFamily:S,fontSize:9,fontWeight:"700"},tableCellValue:{fontFamily:S,fontSize:11.5,color:"#0F172A",lineHeight:17},tableCodeBox:{backgroundColor:"#F1F5F9",borderRadius:6,borderWidth:1,borderColor:"#E2E8F0",padding:6},showMoreBtn:{flexDirection:"row",alignItems:"center",gap:4,alignSelf:"flex-start",marginTop:4,paddingVertical:2,paddingHorizontal:4},showMoreText:{fontFamily:S,fontSize:10,color:"#4F46E5",fontWeight:"600"},emptyContainer:{padding:24,alignItems:"center",justifyContent:"center"},emptyText:{fontFamily:S,fontSize:11.5,color:"#64748B"},highlight:{backgroundColor:"#FEF08A",color:"#854D0E",fontFamily:S,fontWeight:"700",borderRadius:2,paddingHorizontal:2},syntaxNull:{color:"#E11D48",fontStyle:"italic"},syntaxNumber:{color:"#D97706"},syntaxBoolean:{color:"#DB2777"},syntaxString:{color:"#059669"}});export default je;