react-native-inapp-inspector 1.1.11 → 1.1.13

package/dist/commonjs/components/ConsoleLogCard.js

@@ -254,7 +254,9 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
         }).start();
     }, [chevronAnim, expanded]);
     const toggleExpanded = () => {
-        react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+        if (react_native_1.Platform.OS === 'ios') {
+            react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+        }
         setExpanded(prev => !prev);
     };
     const chevronRotate = chevronAnim.interpolate({

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;

package/dist/commonjs/components/MetaAccordion.js

@@ -1,9 +1,42 @@
 "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");
 // Constants
 const constants_1 = require("../constants");
@@ -13,13 +46,52 @@ const useAccordion_1 = __importDefault(require("../customHooks/useAccordion"));
 const helpers_1 = require("../helpers");
 // Assets
 const NetworkIcons_1 = require("./NetworkIcons");
+// Components
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
-const styles_1 = __importDefault(require("../styles"));
 const AppFonts_1 = require("../styles/AppFonts");
+const styles_1 = __importDefault(require("../styles"));
 const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
+    const [urlExpanded, setUrlExpanded] = (0, react_1.useState)(false);
     const { toggleOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(true, 400, 390);
     const isFailed = status === 0 || status == null;
+    const renderFormattedUrl = (rawUrl) => {
+        if (!rawUrl)
+            return '—';
+        try {
+            const doubleSlashIndex = rawUrl.indexOf('//');
+            let temp = rawUrl;
+            let protocol = '';
+            if (doubleSlashIndex !== -1) {
+                protocol = rawUrl.substring(0, doubleSlashIndex + 2);
+                temp = rawUrl.substring(doubleSlashIndex + 2);
+            }
+            const slashIndex = temp.indexOf('/');
+            let host = temp;
+            let pathAndSearch = '';
+            if (slashIndex !== -1) {
+                host = temp.substring(0, slashIndex);
+                pathAndSearch = temp.substring(slashIndex);
+            }
+            const queryIndex = pathAndSearch.indexOf('?');
+            let pathname = pathAndSearch;
+            let search = '';
+            if (queryIndex !== -1) {
+                pathname = pathAndSearch.substring(0, queryIndex);
+                search = pathAndSearch.substring(queryIndex);
+            }
+            return (<react_native_1.Text style={{ lineHeight: 16 }}>
+          {protocol ? (<react_native_1.Text style={{ color: '#94A3B8', fontFamily: AppFonts_1.AppFonts.interRegular }}>{protocol}</react_native_1.Text>) : null}
+          <react_native_1.Text style={{ color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold }}>{host}</react_native_1.Text>
+          <react_native_1.Text style={{ color: '#334155', fontFamily: AppFonts_1.AppFonts.interMedium }}>{pathname}</react_native_1.Text>
+          {search ? (<react_native_1.Text style={{ color: '#0D9488', fontFamily: AppFonts_1.AppFonts.interRegular }}>{search}</react_native_1.Text>) : null}
+        </react_native_1.Text>);
+        }
+        catch {
+            return rawUrl;
+        }
+    };
     return (<react_native_1.View style={styles_1.default.metaContainer}>
       <react_native_1.Pressable onPress={toggleOpen} hitSlop={12}>
         <react_native_1.View style={styles_1.default.metaHeader}>
@@ -145,29 +217,54 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
 
-          <react_native_1.View style={[styles_1.default.metaRow, { alignItems: 'flex-start' }]}>
-            <react_native_1.View style={styles_1.default.metaLabelRow}>
-              <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-              <react_native_1.Text style={styles_1.default.metaLabel}>Full URL</react_native_1.Text>
+          <react_native_1.View style={[styles_1.default.metaRow, { alignItems: 'flex-start', flexDirection: 'column', gap: 6 }]}>
+            <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
+              <react_native_1.View style={styles_1.default.metaLabelRow}>
+                <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                <react_native_1.Text style={styles_1.default.metaLabel}>Full URL</react_native_1.Text>
+              </react_native_1.View>
+              
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                {url && url.length > 50 && (<TouchableScale_1.default onPress={() => setUrlExpanded(prev => !prev)} hitSlop={8}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10.5,
+                color: AppColors_1.AppColors.purple,
+            }}>
+                      {urlExpanded ? 'Show Less' : 'Show More'}
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>)}
+                
+                {url && (<TouchableScale_1.default onPress={() => (0, helpers_1.handleOpenExternalLink)(url)} hitSlop={8}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10.5,
+                color: AppColors_1.AppColors.purple,
+                textDecorationLine: 'underline',
+            }}>
+                      Open
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>)}
+              </react_native_1.View>
+            </react_native_1.View>
+            
+            <react_native_1.View style={{
+            backgroundColor: '#F8FAFC',
+            borderRadius: 8,
+            padding: 8,
+            borderWidth: 1.5,
+            borderColor: '#E2E8F0',
+            width: '100%',
+            marginTop: 2,
+        }}>
+              <react_native_1.Text selectable={true} numberOfLines={urlExpanded ? undefined : 2} ellipsizeMode="tail" style={{
+            fontSize: 11,
+            textAlign: 'left',
+            lineHeight: 16.5,
+        }}>
+                {renderFormattedUrl(url)}
+              </react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text selectable={true} numberOfLines={3} ellipsizeMode="tail" onPress={() => {
-            if (url) {
-                react_native_1.Linking.openURL(url).catch(() => { });
-            }
-        }} style={[
-            styles_1.default.metaValue,
-            {
-                fontSize: 11.5,
-                color: url ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak,
-                textDecorationLine: url ? 'underline' : 'none',
-                fontFamily: AppFonts_1.AppFonts.interMedium,
-                flex: 1,
-                textAlign: 'right',
-                lineHeight: 16,
-            },
-        ]}>
-              {url || '—'}
-            </react_native_1.Text>
           </react_native_1.View>
         </react_native_1.View>
       </react_native_1.Animated.View>

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

@@ -50,3 +50,4 @@ export declare const WarningTriangleIcon: ({ color, size, }: any) => React.JSX.E
 export declare const ErrorCircleIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const TrendingUpIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const MotionIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const SortIcon: ({ ascending, color, size, }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -37,7 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
-exports.MotionIcon = void 0;
+exports.SortIcon = exports.MotionIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -393,3 +393,10 @@ const MotionIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, })
     </react_native_svg_1.default>);
 };
 exports.MotionIcon = MotionIcon;
+const SortIcon = ({ ascending, color = AppColors_1.AppColors.purple, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M12 4l-6 6h12z" fill={ascending ? color : AppColors_1.AppColors.grayTextWeak}/>
+      <react_native_svg_1.Path d="M12 20l6-6H6z" fill={!ascending ? color : AppColors_1.AppColors.grayTextWeak}/>
+    </react_native_svg_1.default>);
+};
+exports.SortIcon = SortIcon;

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

@@ -1,21 +1,16 @@
 import React from 'react';
-export declare const ReduxStoreIcon: ({ color, size, }: any) => React.JSX.Element;
-export declare const ReduxBoltIcon: ({ color, size, }: any) => React.JSX.Element;
-export declare const ReduxTimelineIcon: ({ color, size, }: any) => React.JSX.Element;
-export declare const ReduxTreeIcon: ({ color, size, }: any) => React.JSX.Element;
-export declare const ReduxTreeView: ({ state, lastActionMap, search, }: {
+export declare const ReduxTreeView: ({ state, actionHistory, lastActionMap, search, onSearchChange, autoRefresh, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey, onSelectSliceKey, selectedActionId, onSelectActionId, }: {
     state: any;
-    lastActionMap: Record<string, any>;
-    search?: string;
-}) => React.JSX.Element;
-export declare const ReduxActionTimeline: ({ history, onClear, search, }: {
-    history: Array<{
-        id: number;
-        type: string;
-        payload: any;
-        timestamp: string;
-        affectedSlices: string[];
-    }>;
-    onClear: () => void;
+    actionHistory?: any[];
+    lastActionMap?: Record<string, any>;
     search?: string;
+    onSearchChange?: (val: string) => void;
+    autoRefresh?: boolean;
+    onToggleAutoRefresh?: () => void;
+    onClearHistory?: () => void;
+    onDetailOpenChange?: (isOpen: boolean) => void;
+    selectedSliceKey?: string | null;
+    onSelectSliceKey?: (key: string | null) => void;
+    selectedActionId?: number | null;
+    onSelectActionId?: (id: number | null) => void;
 }) => React.JSX.Element;