react-native-inapp-inspector 1.1.12 → 1.1.14

package/dist/commonjs/components/AnalyticsDetail.js

@@ -44,6 +44,7 @@ const JsonViewer_1 = __importDefault(require("./JsonViewer"));
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
 // Utils
 const AppFonts_1 = require("../styles/AppFonts");
+const helpers_1 = require("../helpers");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 const AnalyticsDetail = ({ event, }) => {
@@ -52,6 +53,26 @@ const AnalyticsDetail = ({ event, }) => {
     const params = event.params ?? {};
     const userProperties = event.userProperties ?? {};
     const upCount = Object.keys(userProperties).length;
+    const jsonData = {
+        name: event.name,
+        params: params,
+        ...(upCount > 0 ? { userProperties } : {}),
+    };
+    const isObject = typeof jsonData === 'object' && jsonData !== null;
+    const isArray = Array.isArray(jsonData);
+    let typeLabel = typeof jsonData;
+    let countLabel = '';
+    if (jsonData === null) {
+        typeLabel = 'null';
+    }
+    else if (isArray) {
+        typeLabel = 'array';
+        countLabel = `${jsonData.length} items`;
+    }
+    else if (isObject) {
+        typeLabel = 'object';
+        countLabel = `${Object.keys(jsonData).length} keys`;
+    }
     return (<react_native_1.ScrollView style={[detailStyles.scroll, { backgroundColor: AppColors_1.AppColors.grayBackground }]} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
       
       {/* Clean Toolbar */}
@@ -65,7 +86,8 @@ const AnalyticsDetail = ({ event, }) => {
             borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
             backgroundColor: AppColors_1.AppColors.primaryLight,
         }}>
-        <TouchableScale_1.default style={{
+        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <TouchableScale_1.default style={{
             flexDirection: 'row',
             alignItems: 'center',
             gap: 6,
@@ -80,20 +102,49 @@ const AnalyticsDetail = ({ event, }) => {
             setExpandDepth(nextDepth);
             setTreeKey(prev => prev + 1);
         }}>
-          <react_native_1.Text style={{
+            <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
             fontSize: 12,
             color: AppColors_1.AppColors.purple,
         }}>
-            {expandDepth === 99 ? 'Collapse All' : 'Expand All'}
-          </react_native_1.Text>
-        </TouchableScale_1.default>
+              {expandDepth === 99 ? 'Collapse All' : 'Expand All'}
+            </react_native_1.Text>
+          </TouchableScale_1.default>
+          <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: AppColors_1.AppColors.grayBackground,
+            borderRadius: 6,
+            overflow: 'hidden',
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        }}>
+            <react_native_1.View style={{ paddingHorizontal: 6, paddingVertical: 4, backgroundColor: AppColors_1.AppColors.purple + '18' }}>
+              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 9, color: AppColors_1.AppColors.purple, letterSpacing: 0.3 }}>
+                {typeLabel.toUpperCase()}
+              </react_native_1.Text>
+            </react_native_1.View>
+            {countLabel ? (<react_native_1.View style={{ paddingHorizontal: 6, paddingVertical: 4 }}>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 9, color: AppColors_1.AppColors.grayText }}>
+                  {countLabel}
+                </react_native_1.Text>
+              </react_native_1.View>) : null}
+          </react_native_1.View>
+          <react_native_1.View style={{
+            backgroundColor: AppColors_1.AppColors.grayBackground,
+            borderRadius: 6,
+            paddingHorizontal: 6,
+            paddingVertical: 4,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        }}>
+            <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 9, color: AppColors_1.AppColors.grayText }}>
+              {(0, helpers_1.getSize)(jsonData)}
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
 
-        <CopyButton_1.default value={JSON.stringify({
-            name: event.name,
-            params: params,
-            ...(upCount > 0 ? { userProperties } : {}),
-        }, null, 2)} label="Copy JSON"/>
+        <CopyButton_1.default value={JSON.stringify(jsonData, null, 2)} label="Copy JSON"/>
       </react_native_1.View>
 
       {/* Direct JSON Viewer View */}
@@ -105,15 +156,7 @@ const AnalyticsDetail = ({ event, }) => {
                 marginTop: 16,
             },
         ]}>
-        <JsonViewer_1.default key={treeKey} data={{
-            name: event.name,
-            params: params,
-            ...(upCount > 0
-                ? {
-                    userProperties: userProperties,
-                }
-                : {}),
-        }} defaultExpandDepth={expandDepth}/>
+        <JsonViewer_1.default key={treeKey} data={jsonData} defaultExpandDepth={expandDepth} fullHeight/>
       </react_native_1.View>
     </react_native_1.ScrollView>);
 };
@@ -125,8 +168,8 @@ const detailStyles = react_native_1.StyleSheet.create({
     },
     jsonBlockContainer: {
         marginHorizontal: 16,
-        marginTop: 8,
-        padding: 12,
+        marginTop: 16,
+        marginBottom: 16,
         borderWidth: 1,
         borderRadius: 12,
     },

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -55,9 +55,10 @@ const EVENT_PALETTE = [
     '#2E7D32', // dark green
 ];
 function getEventColor(name) {
+    const safeName = typeof name === 'string' ? name : String(name || '');
     let hash = 0;
-    for (let i = 0; i < name.length; i++) {
-        hash = (hash * 31 + name.charCodeAt(i)) | 0;
+    for (let i = 0; i < safeName.length; i++) {
+        hash = (hash * 31 + safeName.charCodeAt(i)) | 0;
     }
     return EVENT_PALETTE[Math.abs(hash) % EVENT_PALETTE.length];
 }
@@ -80,6 +81,63 @@ function formatGap(ms) {
     const rem = s % 60;
     return rem > 0 ? `+${m}m ${rem}s` : `+${m}m`;
 }
+function getEventCategory(name) {
+    if (!name)
+        return 'Custom';
+    const lowercaseName = name.toLowerCase();
+    if (lowercaseName === 'screen_view' || lowercaseName === 'page_view') {
+        return 'Page View';
+    }
+    // Ecommerce events
+    const ecommerceEvents = [
+        'purchase', 'add_to_cart', 'begin_checkout', 'view_item',
+        'select_item', 'remove_from_cart', 'view_cart',
+        'add_shipping_info', 'add_payment_info', 'refund',
+        'view_item_list', 'select_promotion', 'view_promotion'
+    ];
+    if (ecommerceEvents.includes(lowercaseName)) {
+        return 'Ecommerce';
+    }
+    // Firebase System Auto-events
+    const systemEvents = [
+        'first_open', 'session_start', 'user_engagement',
+        'app_clear_data', 'app_exception', 'app_update', 'os_update',
+        'notification_receive', 'notification_open', 'notification_dismiss',
+        'screen_active', 'screen_inactive'
+    ];
+    if (systemEvents.includes(lowercaseName) || lowercaseName.startsWith('firebase_') || lowercaseName.startsWith('_')) {
+        return 'System';
+    }
+    return 'Custom';
+}
+function getCategoryColors(category) {
+    switch (category) {
+        case 'Page View':
+            return {
+                bg: '#E3F2FD',
+                border: '#BBDEFB',
+                text: '#1976D2',
+            };
+        case 'Ecommerce':
+            return {
+                bg: '#E8F5E9',
+                border: '#C8E6C9',
+                text: '#2E7D32',
+            };
+        case 'System':
+            return {
+                bg: '#F5F5F5',
+                border: '#E0E0E0',
+                text: '#616161',
+            };
+        default:
+            return {
+                bg: '#F3E5F5',
+                border: '#E1BEE7',
+                text: '#7B1FA2',
+            };
+    }
+}
 // ─── Component ────────────────────────────────────────────────────────────────
 const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
     const color = getEventColor(event.name);
@@ -128,6 +186,19 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
               <HighlightText_1.default text={event.name} search={searchStr} style={[cardStyles.eventName, { color: color }]} highlightStyle={cardStyles.highlight}/>
             </react_native_1.View>
 
+            {(() => {
+            const category = getEventCategory(event.name);
+            const tagColors = getCategoryColors(category);
+            return (<react_native_1.View style={[
+                    cardStyles.categoryBadge,
+                    { backgroundColor: tagColors.bg, borderColor: tagColors.border },
+                ]}>
+                  <react_native_1.Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
+                    {category}
+                  </react_native_1.Text>
+                </react_native_1.View>);
+        })()}
+
             {event.count !== undefined ? (<react_native_1.View style={[
                 cardStyles.duplicateBadge,
                 event.count === 1 && {
@@ -151,20 +222,24 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
         {/* Bottom Row: Metadata Chips & Sparkline */}
         <react_native_1.View style={cardStyles.cardBody}>
           <react_native_1.View style={cardStyles.chipsRow}>
-            {computedScreenName ||
-            event.screenName ||
-            event.params?.firebase_screen ||
-            event.params?.screen_name ||
-            event.params?.firebase_screen_class ? (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-                <react_native_1.View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
-                <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]} numberOfLines={1}>
-                  {computedScreenName ||
+            {(() => {
+            const rawScreenName = computedScreenName ||
                 event.screenName ||
                 event.params?.firebase_screen ||
                 event.params?.screen_name ||
-                event.params?.firebase_screen_class}
-                </react_native_1.Text>
-              </react_native_1.View>) : null}
+                event.params?.firebase_screen_class;
+            if (!rawScreenName)
+                return null;
+            const screenNameStr = typeof rawScreenName === 'object'
+                ? JSON.stringify(rawScreenName)
+                : String(rawScreenName);
+            return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+                  <react_native_1.View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
+                  <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]} numberOfLines={1}>
+                    {screenNameStr}
+                  </react_native_1.Text>
+                </react_native_1.View>);
+        })()}
 
             <react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
               <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>
@@ -311,6 +386,18 @@ const cardStyles = react_native_1.StyleSheet.create({
         textTransform: 'uppercase',
         letterSpacing: 0.5,
     },
+    categoryBadge: {
+        borderWidth: 1,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    categoryText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
     miniGraphWrapper: {
         flexDirection: 'row',
         alignItems: 'flex-end',

package/dist/commonjs/components/HighlightText.js

@@ -33,7 +33,7 @@ const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...re
                             color: '#007AFF', // skyBlue link color
                             textDecorationLine: 'underline',
                         }} onPress={() => {
-                            react_native_1.Linking.openURL(part).catch(() => { });
+                            (0, helpers_1.handleOpenExternalLink)(part);
                         }}>
                 {part}
               </react_native_1.Text>);

package/dist/commonjs/components/JsonViewer.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, }: {
+declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight, onModeChange, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
     defaultExpandDepth?: number;
     wrap?: boolean;
+    fullHeight?: boolean;
+    onModeChange?: (mode: "pretty" | "raw" | "table") => void;
 }) => React.JSX.Element;
 export default JsonViewer;

package/dist/commonjs/components/JsonViewer.js

@@ -1,21 +1,339 @@
 "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 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Components
 const TreeNode_1 = __importDefault(require("./TreeNode"));
-// Stylesheet
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+// Helpers
+const helpers_1 = require("../helpers");
+// Styles
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
 const styles_1 = __importDefault(require("../styles"));
-const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, }) => {
-    const tree = (<TreeNode_1.default data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>);
-    if (wrap) {
-        return <react_native_1.View style={[styles_1.default.codeBlock, { width: '100%' }]}>{tree}</react_native_1.View>;
+// ── Tab Icons ────────────────────────────────────────────────────────────────
+const PrettyIcon = ({ color = '#94A3B8', size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <react_native_svg_1.Path d="M5 3C3.9 3 3 3.9 3 5v1.5c0 .8-.7 1.5-1.5 1.5S0 7.3 0 6.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1zm6 0c-1.1 0-2 .9-2 2v1.5c0 .8-.7 1.5-1.5 1.5S6 9.3 6 8.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1z" fill={color} opacity={0.9}/>
+    <react_native_svg_1.Path d="M3 11v1.5c0 .8.7 1.5 1.5 1.5S6 13.3 6 12.5V11H3zm7 0v1.5c0 .8.7 1.5 1.5 1.5S13 13.3 13 12.5V11H10z" fill={color} opacity={0.6}/>
+  </react_native_svg_1.default>);
+const RawIcon = ({ color = '#94A3B8', size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <react_native_svg_1.Rect x="1" y="2" width="10" height="1.5" rx="0.75" fill={color} opacity={0.9}/>
+    <react_native_svg_1.Rect x="1" y="5.5" width="14" height="1.5" rx="0.75" fill={color} opacity={0.6}/>
+    <react_native_svg_1.Rect x="1" y="9" width="8" height="1.5" rx="0.75" fill={color} opacity={0.45}/>
+    <react_native_svg_1.Rect x="1" y="12.5" width="12" height="1.5" rx="0.75" fill={color} opacity={0.3}/>
+  </react_native_svg_1.default>);
+const TableIcon = ({ color = '#94A3B8', size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <react_native_svg_1.Rect x="1" y="1" width="14" height="14" rx="2" stroke={color} strokeWidth={1.2} opacity={0.7}/>
+    <react_native_svg_1.Path d="M1 5.5h14M1 10h14M5.5 1v14M10.5 1v14" stroke={color} strokeWidth={0.8} opacity={0.5}/>
+  </react_native_svg_1.default>);
+// ── JsonViewer Component ─────────────────────────────────────────────────────
+const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, onModeChange, }) => {
+    const [mode, setMode] = (0, react_1.useState)('pretty');
+    (0, react_1.useEffect)(() => {
+        onModeChange?.(mode);
+    }, [mode, onModeChange]);
+    // Determine type and size details
+    const isObject = typeof data === 'object' && data !== null;
+    const isArray = Array.isArray(data);
+    let typeLabel = typeof data;
+    let countLabel = '';
+    if (data === null) {
+        typeLabel = 'null';
+    }
+    else if (isArray) {
+        typeLabel = 'array';
+        countLabel = `${data.length} items`;
     }
-    return (<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>);
+    else if (isObject) {
+        typeLabel = 'object';
+        countLabel = `${Object.keys(data).length} keys`;
+    }
+    // Copy helper
+    const handleCopy = () => {
+        (0, helpers_1.copyToClipboard)(data, 'JSON data');
+    };
+    // Render Table view (Key-Value flat table for root keys)
+    const renderTableMode = () => {
+        if (!isObject) {
+            return (<react_native_1.View style={localStyles.tableRow}>
+          <react_native_1.Text style={localStyles.tableCellKey}>value</react_native_1.Text>
+          <react_native_1.Text style={localStyles.tableCellValue}>{String(data)}</react_native_1.Text>
+        </react_native_1.View>);
+        }
+        const keys = Object.keys(data);
+        if (keys.length === 0) {
+            return (<react_native_1.View style={localStyles.emptyTable}>
+          <react_native_1.Text style={localStyles.emptyTableText}>Empty Object</react_native_1.Text>
+        </react_native_1.View>);
+        }
+        return (<react_native_1.View style={localStyles.tableView}>
+        <react_native_1.View style={localStyles.tableHeaderRow}>
+          <react_native_1.Text style={[localStyles.tableHeaderCell, { flex: 2 }]}>Key</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) => {
+                const val = data[key];
+                let displayVal = '';
+                if (val === null) {
+                    displayVal = 'null';
+                }
+                else if (val === undefined) {
+                    displayVal = 'undefined';
+                }
+                else if (typeof val === 'object') {
+                    displayVal = Array.isArray(val) ? `[Array(${val.length})]` : '{Object}';
+                }
+                else {
+                    displayVal = String(val);
+                }
+                return (<react_native_1.View key={key} style={localStyles.tableRow}>
+              <react_native_1.Text style={[localStyles.tableCellKey, { flex: 2 }]}>{key}</react_native_1.Text>
+              <react_native_1.Text style={[localStyles.tableCellValue, { flex: 3 }]} numberOfLines={2}>
+                {displayVal}
+              </react_native_1.Text>
+            </react_native_1.View>);
+            })}
+      </react_native_1.View>);
+    };
+    // Tree View Content
+    const tree = (<TreeNode_1.default data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>);
+    return (<react_native_1.View style={[localStyles.container, fullHeight && { flex: 1 }]}>
+      {/* ── Top Toolbar Bar (Postman-style) ── */}
+      <react_native_1.View style={localStyles.toolbar}>
+        {/* Left Segmented Control */}
+        <react_native_1.View style={localStyles.segmentedControl}>
+          {[
+            { key: 'pretty', label: 'Pretty', icon: PrettyIcon },
+            { key: 'raw', label: 'Raw', icon: RawIcon },
+            { key: 'table', label: 'Table', icon: TableIcon },
+        ].map(({ key, label, icon: Icon }) => (<TouchableScale_1.default key={key} onPress={() => setMode(key)} style={[
+                localStyles.segButton,
+                mode === key && localStyles.segButtonActive,
+            ]}>
+              <Icon color={mode === key ? AppColors_1.AppColors.purple : '#94A3B8'} size={12}/>
+              <react_native_1.Text style={[
+                localStyles.segText,
+                mode === key && localStyles.segTextActive,
+            ]}>
+                {label}
+              </react_native_1.Text>
+            </TouchableScale_1.default>))}
+        </react_native_1.View>
+
+        {/* Right Actions — badges & copy removed (caller provides header) */}
+
+      </react_native_1.View>
+
+      {/* ── Main View Content Area (Royal Monospace Theme) ── */}
+      <react_native_1.View style={[localStyles.contentWrapper, { backgroundColor: '#F8F9FB' }, fullHeight && { flex: 1, maxHeight: undefined }]}>
+        {mode === 'pretty' && (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.View style={styles_1.default.codeBlock}>{tree}</react_native_1.View>
+              </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>)))}
+
+        {mode === 'raw' && (fullHeight ? (<react_native_1.ScrollView style={localStyles.rawScroll} contentContainerStyle={localStyles.rawContent}>
+              <react_native_1.Text selectable={true} style={localStyles.rawMonospaceText}>
+                {JSON.stringify(data, null, 2)}
+              </react_native_1.Text>
+            </react_native_1.ScrollView>) : (<react_native_1.View style={localStyles.rawContent}>
+              <react_native_1.Text selectable={true} style={localStyles.rawMonospaceText}>
+                {JSON.stringify(data, null, 2)}
+              </react_native_1.Text>
+            </react_native_1.View>))}
+
+        {mode === 'table' && (fullHeight ? (<react_native_1.ScrollView style={localStyles.rawScroll}>
+              {renderTableMode()}
+            </react_native_1.ScrollView>) : (<react_native_1.View style={localStyles.rawScroll}>
+              {renderTableMode()}
+            </react_native_1.View>))}
+      </react_native_1.View>
+    </react_native_1.View>);
 };
+const localStyles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 12,
+        borderWidth: 1.5,
+        borderColor: '#E2E8F0',
+        overflow: 'hidden',
+        shadowColor: '#000',
+        shadowOpacity: 0.04,
+        shadowRadius: 5,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 2,
+        width: '100%',
+    },
+    toolbar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: '#F8FAFC',
+        borderBottomWidth: 1,
+        borderBottomColor: '#E2E8F0',
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    segmentedControl: {
+        flexDirection: 'row',
+        backgroundColor: '#E2E8F0',
+        borderRadius: 8,
+        padding: 2,
+    },
+    segButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 6,
+    },
+    segButtonActive: {
+        backgroundColor: '#FFFFFF',
+        shadowColor: '#000',
+        shadowOpacity: 0.08,
+        shadowRadius: 2,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+    },
+    segText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: '#64748B',
+        letterSpacing: 0.3,
+    },
+    segTextActive: {
+        color: AppColors_1.AppColors.purple,
+    },
+    rightActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    badge: {
+        backgroundColor: 'rgba(104,75,155,0.06)',
+        borderWidth: 1,
+        borderColor: 'rgba(104,75,155,0.15)',
+        borderRadius: 5,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+    },
+    badgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors_1.AppColors.purple,
+    },
+    copyButton: {
+        width: 24,
+        height: 24,
+        borderRadius: 6,
+        backgroundColor: 'rgba(104,75,155,0.08)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    contentWrapper: {
+        backgroundColor: '#FFFFFF',
+        minHeight: 120,
+        maxHeight: 480,
+    },
+    rawScroll: {
+        flex: 1,
+        backgroundColor: '#FAF9F6', // Royal off-white paper tone
+    },
+    rawContent: {
+        padding: 12,
+    },
+    rawMonospaceText: {
+        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Courier New' : 'monospace',
+        fontSize: 11.5,
+        color: '#0F172A',
+        lineHeight: 16,
+    },
+    tableView: {
+        flex: 1,
+    },
+    tableHeaderRow: {
+        flexDirection: 'row',
+        backgroundColor: '#F1F5F9',
+        borderBottomWidth: 1,
+        borderBottomColor: '#E2E8F0',
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+    },
+    tableHeaderCell: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: '#475569',
+        letterSpacing: 0.5,
+        textTransform: 'uppercase',
+    },
+    tableRow: {
+        flexDirection: 'row',
+        borderBottomWidth: 1,
+        borderBottomColor: '#F1F5F9',
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        alignItems: 'center',
+    },
+    tableCellKey: {
+        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Courier-Bold' : 'monospace',
+        fontSize: 11.5,
+        fontWeight: 'bold',
+        color: '#0F172A',
+    },
+    tableCellValue: {
+        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Courier' : 'monospace',
+        fontSize: 11.5,
+        color: '#475569',
+    },
+    emptyTable: {
+        padding: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyTableText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: '#94A3B8',
+    },
+});
 exports.default = JsonViewer;

package/dist/commonjs/components/MetaAccordion.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
-import { MetaAccordionProps } from '../types';
+export interface MetaAccordionProps {
+    status: number | null | undefined;
+    statusColor: string;
+    duration: number | null | undefined;
+    size: string;
+    triggeredAt: string;
+    method: string;
+    contentType?: string;
+    url: string;
+}
 declare const MetaAccordion: ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }: MetaAccordionProps) => React.JSX.Element;
 export default MetaAccordion;