react-native-inapp-inspector 2.3.18 → 2.3.20

package/dist/commonjs/components/JsonViewer.js

@@ -1,397 +1,185 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const i18n_1 = require("../i18n");
-const TreeNode_1 = __importDefault(require("./TreeNode"));
-const SegmentedTabs_1 = __importDefault(require("./SegmentedTabs"));
-const HighlightText_1 = __importDefault(require("./HighlightText"));
-const CopyButton_1 = __importDefault(require("./CopyButton"));
-const NetworkIcons_1 = require("./NetworkIcons");
-const AppColors_1 = require("../styles/AppColors");
-const AppFonts_1 = require("../styles/AppFonts");
-const styles_1 = __importDefault(require("../styles"));
-const JsonTableRow = react_1.default.memo(({ itemKey, val, search, }) => {
-    const [expanded, setExpanded] = (0, react_1.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 (<react_native_1.View style={localStyles.tableRow}>
-      <react_native_1.View style={{ flex: 2, paddingRight: 8 }}>
-        <HighlightText_1.default text={itemKey} search={search} style={localStyles.tableCellKey} highlightStyle={localStyles.highlight}/>
-        {isObject && (<react_native_1.Text style={localStyles.tableTypeBadge}>
-            {Array.isArray(val) ? `Array(${val.length})` : 'Object'}
-          </react_native_1.Text>)}
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(e,t,r,i){i===void 0&&(i=r);var o=Object.getOwnPropertyDescriptor(t,r);(!o||("get"in o?!t.__esModule:o.writable||o.configurable))&&(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,o)}):(function(e,t,r,i){i===void 0&&(i=r),e[i]=t[r]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}):function(e,t){e.default=t}),__importStar=this&&this.__importStar||(function(){var e=function(t){return e=Object.getOwnPropertyNames||function(r){var i=[];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(i[i.length]=o);return i},e(t)};return function(t){if(t&&t.__esModule)return t;var r={};if(t!=null)for(var i=e(t),o=0;o<i.length;o++)i[o]!=="default"&&__createBinding(r,t,i[o]);return __setModuleDefault(r,t),r}})(),__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),i18n_1=require("../i18n"),TreeNode_1=__importDefault(require("./TreeNode")),HighlightText_1=__importDefault(require("./HighlightText")),TouchableScale_1=__importDefault(require("./TouchableScale")),NetworkIcons_1=require("./NetworkIcons"),helpers_1=require("../helpers"),NativeInspector_1=require("../native/NativeInspector"),monoFont=react_native_1.Platform.select({ios:"Menlo",android:"monospace",default:"monospace"}),getTypeDetails=e=>e===null?{label:"null",color:"#E11D48",bg:"#FFF1F2",border:"#FECDD3"}:e===void 0?{label:"undef",color:"#E11D48",bg:"#FFF1F2",border:"#FECDD3"}:Array.isArray(e)?{label:`arr[${e.length}]`,color:"#2563EB",bg:"#EFF6FF",border:"#BFDBFE"}:typeof e=="object"?{label:`obj{${Object.keys(e).length}}`,color:"#7C3AED",bg:"#F5F3FF",border:"#DDD6FE"}:typeof e=="number"?{label:"num",color:"#D97706",bg:"#FEF3C7",border:"#FDE68A"}:typeof e=="boolean"?{label:"bool",color:"#DB2777",bg:"#FDF2F8",border:"#FBCFE8"}:{label:"str",color:"#059669",bg:"#ECFDF5",border:"#A7F3D0"},JsonTableRow=react_1.default.memo(({itemKey:e,val:t,search:r,index:i})=>{const[o,u]=(0,react_1.useState)(!1),f=t!==null&&typeof t=="object",d=getTypeDetails(t);let c="";if(t===null)c="null";else if(t===void 0)c="undefined";else if(f)try{c=JSON.stringify(t,null,2)}catch{c=String(t)}else c=String(t);const F=c.includes(`
+`)||c.length>80;return<react_native_1.View style={[localStyles.tableRow,i%2===1&&localStyles.tableRowAlt]}>
+      
+      <react_native_1.View style={localStyles.tableColKey}>
+        <HighlightText_1.default text={e}search={r}style={localStyles.tableCellKey}highlightStyle={localStyles.highlight}/>
+        <react_native_1.View style={[localStyles.typePill,{backgroundColor:d.bg,borderColor:d.border}]}>
+          <react_native_1.Text style={[localStyles.typePillText,{color:d.color}]}>
+            {d.label}
+          </react_native_1.Text>
+        </react_native_1.View>
       </react_native_1.View>
 
-      <react_native_1.View style={{ flex: 3 }}>
-        <HighlightText_1.default text={rawStr} search={search} style={[
-            localStyles.tableCellValue,
-            isObject && localStyles.tableCellRawCode,
-        ]} highlightStyle={localStyles.highlight} numberOfLines={expanded ? undefined : 3} selectable={true}/>
-        {isMultiline && (<react_native_1.TouchableOpacity onPress={() => setExpanded(prev => !prev)} hitSlop={6} style={[localStyles.showMoreBtn, { flexDirection: 'row', alignItems: 'center', gap: 4 }]}>
+      
+      <react_native_1.View style={localStyles.tableColVal}>
+        <react_native_1.View style={f?localStyles.tableCodeBox:void 0}>
+          <HighlightText_1.default text={c}search={r}style={[localStyles.tableCellValue,t==null?localStyles.syntaxNull:void 0,typeof t=="number"?localStyles.syntaxNumber:void 0,typeof t=="boolean"?localStyles.syntaxBoolean:void 0,typeof t=="string"?localStyles.syntaxString:void 0]}highlightStyle={localStyles.highlight}numberOfLines={o?void 0:3}selectable={!0}/>
+        </react_native_1.View>
+        {F&&<react_native_1.TouchableOpacity onPress={()=>u(y=>!y)}hitSlop={6}style={localStyles.showMoreBtn}>
             <react_native_1.Text style={localStyles.showMoreText}>
-              {expanded ? 'Show less' : 'Show more'}
+              {o?"Collapse":"Expand"}
             </react_native_1.Text>
-            <NetworkIcons_1.ChevronIcon direction={expanded ? 'up' : 'down'} size={10} color={AppColors_1.AppColors.purple}/>
-          </react_native_1.TouchableOpacity>)}
+            <NetworkIcons_1.ChevronIcon direction={o?"up":"down"}size={9}color="#4F46E5"/>
+          </react_native_1.TouchableOpacity>}
       </react_native_1.View>
-    </react_native_1.View>);
-});
-const JsonViewer = react_1.default.memo(({ data, search, forceOpen, defaultExpandDepth = 1, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
-    const { t } = (0, i18n_1.useTranslation)();
-    const [internalMode, setInternalMode] = (0, react_1.useState)('raw');
-    const mode = externalMode ?? internalMode;
-    const setMode = (newMode) => {
-        if (onModeChange) {
-            onModeChange(newMode);
-        }
-        else {
-            setInternalMode(newMode);
-        }
-    };
-    const rawText = react_1.default.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] = (0, react_1.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;
-    (0, react_1.useEffect)(() => {
-        if (externalMode) {
-            setInternalMode(externalMode);
-        }
-    }, [externalMode]);
-    const contentWrapperStyle = [
-        localStyles.contentWrapper,
-        { backgroundColor: AppColors_1.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 (<react_native_1.View style={localStyles.tableRow}>
-          <react_native_1.Text style={localStyles.tableCellKey}>{t('network.jsonViewer.value')}</react_native_1.Text>
-          <react_native_1.Text style={localStyles.tableCellValue}>{String(data)}</react_native_1.Text>
-        </react_native_1.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 (<react_native_1.View style={localStyles.emptyTable}>
-          <react_native_1.Text style={localStyles.emptyTableText}>
-            {search && search.trim().length > 0
-                    ? 'No matching keys or values found'
-                    : t('network.jsonViewer.emptyTable')}
+    </react_native_1.View>}),JsonViewer=react_1.default.memo(({data:e,search:t,forceOpen:r,defaultExpandDepth:i=1,wrap:o,fullHeight:u=!1,maxHeight:f,mode:d,onModeChange:c,hideTabs:F=!1})=>{const{t:y}=(0,i18n_1.useTranslation)(),[j,B]=(0,react_1.useState)(d??"pretty"),[E,D]=(0,react_1.useState)(!1),[b,O]=(0,react_1.useState)(o??!1),[T,z]=(0,react_1.useState)(r),a=c&&d?d:j,x=n=>{B(n),c&&c(n)};(0,react_1.useEffect)(()=>{o!==void 0&&O(o)},[o]),(0,react_1.useEffect)(()=>{r!==void 0&&z(r)},[r]);const g=(0,react_1.useMemo)(()=>{if(e==null)return"";if(typeof e=="string")return e;try{return JSON.stringify(e,null,2)??""}catch{return String(e)||""}},[e]),A=(0,react_1.useMemo)(()=>{if(typeof e=="string")return e;try{return JSON.stringify(e)??""}catch{return String(e)||""}},[e]),[H,R]=(0,react_1.useState)(!1),k=5e4,V=typeof g=="string"?g:"",C=V.length>k&&!H,S=C?V.slice(0,k):V,h=(0,react_1.useMemo)(()=>S?S.split(`
+`):[""],[S]),I=h.length,P=(0,react_1.useMemo)(()=>(0,helpers_1.getSize)(e),[e]);(0,react_1.useEffect)(()=>{d&&B(d)},[d]);const N=()=>{(0,NativeInspector_1.triggerNativeHaptic)("success"),(0,helpers_1.copyToClipboard)(A||g,"JSON"),D(!0),setTimeout(()=>D(!1),1200)},m=typeof e=="object"&&e!==null,M=e==null||m&&Object.keys(e).length===0,W=()=>{if(!m)return<react_native_1.View style={localStyles.tableRow}>
+          <react_native_1.View style={localStyles.tableColKey}>
+            <react_native_1.Text style={localStyles.tableCellKey}>{y("network.jsonViewer.value")}</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={localStyles.tableColVal}>
+            <react_native_1.Text style={localStyles.tableCellValue}>{String(e)}</react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>;let n=Object.keys(e);if(t&&t.trim().length>0){const l=t.trim().toLowerCase();n=n.filter(s=>{const p=e[s],w=typeof p=="object"&&p!==null?JSON.stringify(p):String(p);return s.toLowerCase().includes(l)||w.toLowerCase().includes(l)})}return n.length===0?<react_native_1.View style={localStyles.emptyContainer}>
+          <react_native_1.Text style={localStyles.emptyText}>
+            {t&&t.trim().length>0?"No matching keys or values found":y("network.jsonViewer.emptyTable")}
           </react_native_1.Text>
-        </react_native_1.View>);
-        }
-        return (<react_native_1.View style={localStyles.tableView}>
+        </react_native_1.View>:<react_native_1.View style={localStyles.tableView}>
+        
         <react_native_1.View style={localStyles.tableHeaderRow}>
-          <react_native_1.Text style={[localStyles.tableHeaderCell, { flex: 2 }]}>{t('network.jsonViewer.key')}</react_native_1.Text>
-          <react_native_1.Text style={[localStyles.tableHeaderCell, { flex: 3 }]}>{t('network.jsonViewer.value')}</react_native_1.Text>
+          <react_native_1.Text style={[localStyles.tableHeaderCell,{flex:2}]}>KEY / PROPERTY</react_native_1.Text>
+          <react_native_1.Text style={[localStyles.tableHeaderCell,{flex:3}]}>VALUE</react_native_1.Text>
         </react_native_1.View>
-        {keys.map((key) => (<JsonTableRow key={key} itemKey={key} val={data[key]} search={search}/>))}
-      </react_native_1.View>);
-    };
-    const tree = (<TreeNode_1.default data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>);
-    return (<react_native_1.View style={[localStyles.container, fullHeight && { flex: 1 }]}>
+        {n.map((l,s)=><JsonTableRow key={l}index={s}itemKey={l}val={e[l]}search={t}/>)}
+      </react_native_1.View>},_=<TreeNode_1.default data={e}search={t}forceOpen={T}defaultExpandDepth={T?99:i}/>;return<react_native_1.View style={[localStyles.container,u&&{flex:1}]}>
       
-      {!hideTabs && (<react_native_1.View style={localStyles.toolbar}>
-          <SegmentedTabs_1.default tabs={[
-                {
-                    key: 'pretty',
-                    label: t('network.jsonViewer.pretty'),
-                    icon: (isActive) => (<NetworkIcons_1.PrettyIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.slate400} size={12}/>),
-                },
-                {
-                    key: 'raw',
-                    label: t('network.jsonViewer.raw'),
-                    icon: (isActive) => (<NetworkIcons_1.RawIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.slate400} size={12}/>),
-                },
-                {
-                    key: 'table',
-                    label: t('network.jsonViewer.table'),
-                    icon: (isActive) => (<NetworkIcons_1.TableIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.slate400} size={12}/>),
-                },
-            ]} activeKey={mode} onChange={key => setMode(key)}/>
-          <CopyButton_1.default value={data} label="JSON"/>
-        </react_native_1.View>)}
+      <react_native_1.View style={localStyles.snippetHeader}>
+        
+        <react_native_1.View style={localStyles.headerLeft}>
+          <react_native_1.View style={localStyles.langBadge}>
+            <react_native_1.Text style={localStyles.langBadgeText}>JSON</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={localStyles.metaBadge}>
+            <react_native_1.Text style={localStyles.metaBadgeText}numberOfLines={1}ellipsizeMode="tail">
+              {I} {I===1?"line":"lines"} · {P}
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={localStyles.headerRight}>
+          {!F&&<react_native_1.View style={localStyles.snippetTabs}>
+              <react_native_1.TouchableOpacity onPress={()=>x("pretty")}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}style={[localStyles.snippetTabBtn,a==="pretty"&&localStyles.snippetTabBtnActive]}>
+                <NetworkIcons_1.PrettyIcon color={a==="pretty"?"#FFFFFF":"#64748B"}size={11}/>
+                <react_native_1.Text style={[localStyles.snippetTabText,a==="pretty"&&localStyles.snippetTabTextActive]}>
+                  {y("network.jsonViewer.pretty")}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+
+              <react_native_1.TouchableOpacity onPress={()=>x("raw")}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}style={[localStyles.snippetTabBtn,a==="raw"&&localStyles.snippetTabBtnActive]}>
+                <NetworkIcons_1.RawIcon color={a==="raw"?"#FFFFFF":"#64748B"}size={11}/>
+                <react_native_1.Text style={[localStyles.snippetTabText,a==="raw"&&localStyles.snippetTabTextActive]}>
+                  {y("network.jsonViewer.raw")}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+
+              <react_native_1.TouchableOpacity onPress={()=>x("table")}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}style={[localStyles.snippetTabBtn,a==="table"&&localStyles.snippetTabBtnActive]}>
+                <NetworkIcons_1.TableIcon color={a==="table"?"#FFFFFF":"#64748B"}size={11}/>
+                <react_native_1.Text style={[localStyles.snippetTabText,a==="table"&&localStyles.snippetTabTextActive]}>
+                  {y("network.jsonViewer.table")}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>}
 
+          
+          {a==="pretty"&&m&&<react_native_1.TouchableOpacity onPress={()=>z(n=>!n)}hitSlop={{top:6,bottom:6,left:4,right:4}}style={localStyles.toolToggleBtn}>
+              <react_native_1.Text style={localStyles.toolToggleText}>
+                {T?"Fold":"Expand"}
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>}
+
+          
+          {a==="raw"&&<react_native_1.TouchableOpacity onPress={()=>O(n=>!n)}hitSlop={{top:6,bottom:6,left:4,right:4}}style={[localStyles.toolToggleBtn,b&&localStyles.toolToggleBtnActive]}>
+              <react_native_1.Text style={[localStyles.toolToggleText,b&&localStyles.toolToggleTextActive]}>
+                Wrap
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>}
+
+          
+          <TouchableScale_1.default onPress={N}hitSlop={8}style={[localStyles.copyBtn,E&&localStyles.copyBtnSuccess]}>
+            {E?<NetworkIcons_1.CheckIcon color="#10B981"size={13}/>:<NetworkIcons_1.CopyIcon color="#64748B"size={13}/>}
+          </TouchableScale_1.default>
+        </react_native_1.View>
+      </react_native_1.View>
       
-      <react_native_1.View style={contentWrapperStyle}>
-        {mode === 'pretty' && (isEmpty ? (<react_native_1.View style={localStyles.emptyTable}>
-              <react_native_1.Text style={localStyles.emptyTableText}>
-                {t('network.jsonViewer.emptyPayload')}
+      <react_native_1.View style={[localStyles.editorBody,u&&{flex:1,maxHeight:void 0},!u&&f!=null&&{maxHeight:f}]}>
+        
+        {a==="pretty"&&(M?<react_native_1.View style={localStyles.emptyContainer}>
+              <react_native_1.Text style={localStyles.emptyText}>
+                {y("network.jsonViewer.emptyPayload")}
               </react_native_1.Text>
-            </react_native_1.View>) : (wrap ? (fullHeight ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
-                  <react_native_1.View style={[styles_1.default.codeBlock, { width: '100%' }]}>{tree}</react_native_1.View>
-                </react_native_1.ScrollView>) : (<react_native_1.View style={[styles_1.default.codeBlock, { width: '100%' }]}>{tree}</react_native_1.View>)) : (fullHeight ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
-                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles_1.default.codeBlockScroll}>
-                    <react_native_1.View style={styles_1.default.codeBlock}>{tree}</react_native_1.View>
-                  </react_native_1.ScrollView>
-                </react_native_1.ScrollView>) : (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles_1.default.codeBlockScroll}>
-                  <react_native_1.View style={styles_1.default.codeBlock}>{tree}</react_native_1.View>
-                </react_native_1.ScrollView>))))}
+            </react_native_1.View>:b?u?<react_native_1.ScrollView style={{flex:1}}contentContainerStyle={localStyles.prettyContainer}>
+                {_}
+              </react_native_1.ScrollView>:<react_native_1.View style={localStyles.prettyContainer}>{_}</react_native_1.View>:u?<react_native_1.ScrollView style={{flex:1}}contentContainerStyle={{flexGrow:1}}>
+              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={localStyles.prettyContainer}>
+                {_}
+              </react_native_1.ScrollView>
+            </react_native_1.ScrollView>:<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!0}contentContainerStyle={localStyles.prettyContainer}>
+              {_}
+            </react_native_1.ScrollView>)}
+
+        
+        {a==="raw"&&(u?<react_native_1.ScrollView style={{flex:1}}contentContainerStyle={{flexGrow:1}}showsVerticalScrollIndicator={!0}>
+              <react_native_1.View style={localStyles.rawEditorRow}>
+                
+                <react_native_1.View style={localStyles.gutter}>
+                  {h.map((n,l)=><react_native_1.Text key={l}style={localStyles.gutterNumber}>
+                      {l+1}
+                    </react_native_1.Text>)}
+                </react_native_1.View>
+
+                
+                <react_native_1.ScrollView horizontal={!b}showsHorizontalScrollIndicator={!0}style={{flex:1}}>
+                  <react_native_1.View style={localStyles.rawTextContainer}>
+                    {h.map((n,l)=>{const s=n.match(/^(\s+)(.*)$/);if(s){const p=s[1],w=s[2],v=p.replace(/  /g,"\xB7 ").replace(/ /g,"\xB7");return<react_native_1.View key={l}style={localStyles.rawCodeLineRow}>
+                            <react_native_1.Text style={localStyles.indentDots}>{v}</react_native_1.Text>
+                            <HighlightText_1.default text={w}search={t}detectLinks={g.length<2e4}style={localStyles.rawMonospaceText}selectable={!0}highlightStyle={localStyles.highlight}/>
+                          </react_native_1.View>}return<react_native_1.View key={l}style={localStyles.rawCodeLineRow}>
+                          <HighlightText_1.default text={n}search={t}detectLinks={g.length<2e4}style={localStyles.rawMonospaceText}selectable={!0}highlightStyle={localStyles.highlight}/>
+                        </react_native_1.View>})}
+                  </react_native_1.View>
+                </react_native_1.ScrollView>
+              </react_native_1.View>
 
-        {mode === 'raw' && (fullHeight ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={localStyles.rawContainer} showsVerticalScrollIndicator={true}>
-              <HighlightText_1.default text={displayRawText} search={search} detectLinks={rawText.length < 20000} style={localStyles.rawPlainText} selectable={true} highlightStyle={{
-                backgroundColor: AppColors_1.AppColors.yellowHighlight,
-                color: AppColors_1.AppColors.primaryBlack,
-                borderRadius: 3,
-                paddingHorizontal: 2,
-            }}/>
-              {isTruncated && (<react_native_1.TouchableOpacity onPress={() => setShowFullRaw(true)} style={{
-                    marginTop: 10,
-                    backgroundColor: `${AppColors_1.AppColors.brandPurple}15`,
-                    paddingVertical: 8,
-                    paddingHorizontal: 12,
-                    borderRadius: 6,
-                    alignItems: 'center',
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.brandPurple}30`,
-                }}>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11,
-                    color: AppColors_1.AppColors.brandPurple,
-                }}>
-                    Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
+              {C&&<react_native_1.TouchableOpacity onPress={()=>R(!0)}style={localStyles.truncationBanner}>
+                  <react_native_1.Text style={localStyles.truncationText}>
+                    Showing first 50 KB ({Math.round(g.length/1024)} KB total) · Tap to load full payload
                   </react_native_1.Text>
-                </react_native_1.TouchableOpacity>)}
-            </react_native_1.ScrollView>) : (<react_native_1.View style={localStyles.rawContainer}>
-              <HighlightText_1.default text={displayRawText} search={search} detectLinks={rawText.length < 20000} style={localStyles.rawPlainText} selectable={true} highlightStyle={{
-                backgroundColor: AppColors_1.AppColors.yellowHighlight,
-                color: AppColors_1.AppColors.primaryBlack,
-                borderRadius: 3,
-                paddingHorizontal: 2,
-            }}/>
-              {isTruncated && (<react_native_1.TouchableOpacity onPress={() => setShowFullRaw(true)} style={{
-                    marginTop: 10,
-                    backgroundColor: `${AppColors_1.AppColors.brandPurple}15`,
-                    paddingVertical: 8,
-                    paddingHorizontal: 12,
-                    borderRadius: 6,
-                    alignItems: 'center',
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.brandPurple}30`,
-                }}>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11,
-                    color: AppColors_1.AppColors.brandPurple,
-                }}>
-                    Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
+                </react_native_1.TouchableOpacity>}
+            </react_native_1.ScrollView>:<react_native_1.View>
+              <react_native_1.View style={localStyles.rawEditorRow}>
+                
+                <react_native_1.View style={localStyles.gutter}>
+                  {h.map((n,l)=><react_native_1.Text key={l}style={localStyles.gutterNumber}>
+                      {l+1}
+                    </react_native_1.Text>)}
+                </react_native_1.View>
+
+                
+                <react_native_1.ScrollView horizontal={!b}showsHorizontalScrollIndicator={!0}style={{flex:1}}>
+                  <react_native_1.View style={localStyles.rawTextContainer}>
+                    {h.map((n,l)=>{const s=n.match(/^(\s+)(.*)$/);if(s){const p=s[1],w=s[2],v=p.replace(/  /g,"\xB7 ").replace(/ /g,"\xB7");return<react_native_1.View key={l}style={localStyles.rawCodeLineRow}>
+                            <react_native_1.Text style={localStyles.indentDots}>{v}</react_native_1.Text>
+                            <HighlightText_1.default text={w}search={t}detectLinks={g.length<2e4}style={localStyles.rawMonospaceText}selectable={!0}highlightStyle={localStyles.highlight}/>
+                          </react_native_1.View>}return<react_native_1.View key={l}style={localStyles.rawCodeLineRow}>
+                          <HighlightText_1.default text={n}search={t}detectLinks={g.length<2e4}style={localStyles.rawMonospaceText}selectable={!0}highlightStyle={localStyles.highlight}/>
+                        </react_native_1.View>})}
+                  </react_native_1.View>
+                </react_native_1.ScrollView>
+              </react_native_1.View>
+
+              {C&&<react_native_1.TouchableOpacity onPress={()=>R(!0)}style={localStyles.truncationBanner}>
+                  <react_native_1.Text style={localStyles.truncationText}>
+                    Showing first 50 KB ({Math.round(g.length/1024)} KB total) · Tap to load full payload
                   </react_native_1.Text>
-                </react_native_1.TouchableOpacity>)}
-            </react_native_1.View>))}
+                </react_native_1.TouchableOpacity>}
+            </react_native_1.View>)}
 
-        {mode === 'table' && (fullHeight ? (<react_native_1.ScrollView style={{ flex: 1 }}>
-              {renderTableMode()}
-            </react_native_1.ScrollView>) : (<react_native_1.View style={localStyles.tableView}>
-              {renderTableMode()}
-            </react_native_1.View>))}
+        
+        {a==="table"&&(u?<react_native_1.ScrollView style={{flex:1}}>
+              {W()}
+            </react_native_1.ScrollView>:<react_native_1.View style={localStyles.tableView}>
+              {W()}
+            </react_native_1.View>)}
       </react_native_1.View>
-    </react_native_1.View>);
-});
-const localStyles = react_native_1.StyleSheet.create({
-    container: {
-        backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 12,
-        borderWidth: 1.5,
-        borderColor: AppColors_1.AppColors.slate200,
-        overflow: 'hidden',
-        shadowColor: AppColors_1.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_1.AppColors.slate50,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.slate200,
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-    },
-    contentWrapper: {
-        backgroundColor: AppColors_1.AppColors.white,
-        minHeight: 120,
-    },
-    rawScroll: {
-        flex: 1,
-        backgroundColor: AppColors_1.AppColors.paperBg,
-    },
-    rawContainer: {
-        padding: 12,
-    },
-    rawPlainText: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 12.5,
-        color: AppColors_1.AppColors.primaryBlack,
-        lineHeight: 18,
-    },
-    tableView: {
-        flex: 1,
-    },
-    tableHeaderRow: {
-        flexDirection: 'row',
-        backgroundColor: AppColors_1.AppColors.slate100,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.slate200,
-        paddingVertical: 8,
-        paddingHorizontal: 12,
-    },
-    tableHeaderCell: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors_1.AppColors.slate600,
-        letterSpacing: 0.5,
-        textTransform: 'uppercase',
-    },
-    tableRow: {
-        flexDirection: 'row',
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.slate100,
-        paddingVertical: 10,
-        paddingHorizontal: 12,
-        alignItems: 'center',
-    },
-    tableCellKey: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors_1.AppColors.purple,
-    },
-    tableTypeBadge: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.slate400,
-        marginTop: 2,
-    },
-    tableCellValue: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors_1.AppColors.primaryBlack,
-        lineHeight: 17,
-    },
-    tableCellRawCode: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 11.5,
-        color: AppColors_1.AppColors.slate700,
-        backgroundColor: `${AppColors_1.AppColors.slate100}80`,
-        padding: 6,
-        borderRadius: 6,
-    },
-    showMoreBtn: {
-        alignSelf: 'flex-start',
-        marginTop: 4,
-        paddingVertical: 2,
-        paddingHorizontal: 4,
-    },
-    showMoreText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors_1.AppColors.purple,
-    },
-    emptyTable: {
-        padding: 24,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    emptyTableText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 12.5,
-        color: AppColors_1.AppColors.slate400,
-    },
-    highlight: {
-        backgroundColor: '#FEF08A',
-        color: '#854D0E',
-        fontFamily: AppFonts_1.AppFonts.interBold,
-    },
-});
-exports.default = JsonViewer;
+    </react_native_1.View>}),localStyles=react_native_1.StyleSheet.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:monoFont,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:monoFont,fontSize:9.5,color:"#64748B",fontWeight:"600"},metaStats:{fontFamily:monoFont,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:monoFont,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:monoFont,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:monoFont,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:monoFont,fontSize:11.5,lineHeight:18,color:"#CBD5E1",letterSpacing:.5},rawMonospaceText:{fontFamily:monoFont,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:monoFont,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:monoFont,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:monoFont,fontSize:11.5,fontWeight:"700",color:"#4F46E5"},typePill:{alignSelf:"flex-start",borderRadius:4,borderWidth:1,paddingHorizontal:4,paddingVertical:1,marginTop:3},typePillText:{fontFamily:monoFont,fontSize:9,fontWeight:"700"},tableCellValue:{fontFamily:monoFont,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:monoFont,fontSize:10,color:"#4F46E5",fontWeight:"600"},emptyContainer:{padding:24,alignItems:"center",justifyContent:"center"},emptyText:{fontFamily:monoFont,fontSize:11.5,color:"#64748B"},highlight:{backgroundColor:"#FEF08A",color:"#854D0E",fontFamily:monoFont,fontWeight:"700",borderRadius:2,paddingHorizontal:2},syntaxNull:{color:"#E11D48",fontStyle:"italic"},syntaxNumber:{color:"#D97706"},syntaxBoolean:{color:"#DB2777"},syntaxString:{color:"#059669"}});exports.default=JsonViewer;