react-native-inapp-inspector 1.0.9 → 1.0.11

package/dist/commonjs/components/ReduxTreeView.js

@@ -0,0 +1,630 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReduxActionTimeline = exports.ReduxTreeView = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const NetworkIcons_1 = require("./NetworkIcons");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+// Custom icons
+const DatabaseIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M12 2C6.5 2 2 4.2 2 7v10c0 2.8 4.5 5 10 5s10-2.2 10-5V7c0-2.8-4.5-5-10-5z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M2 12c0 2.8 4.5 5 10 5s10-2.2 10-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M2 7c0 2.8 4.5 5 10 5s10-2.2 10-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const BoltIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const FolderIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const ReduxValueNode = ({ name, value, level, search }) => {
+    const [expanded, setExpanded] = (0, react_1.useState)(level < 1);
+    const isObject = typeof value === 'object' && value !== null;
+    const isArray = Array.isArray(value);
+    const nameStr = String(name);
+    // Filter check if search query matches key or value
+    const matchesSearch = (k, val) => {
+        if (!search)
+            return true;
+        const s = search.toLowerCase();
+        if (k.toLowerCase().includes(s))
+            return true;
+        if (typeof val !== 'object' && String(val).toLowerCase().includes(s))
+            return true;
+        if (typeof val === 'object' && val !== null) {
+            return Object.keys(val).some(key => matchesSearch(key, val[key]));
+        }
+        return false;
+    };
+    if (!matchesSearch(nameStr, value)) {
+        return null;
+    }
+    if (!isObject) {
+        const valStr = value === null ? 'null' : value === undefined ? 'undefined' : String(value);
+        // Pick different colors for primitives
+        let valColor = '#0D9488'; // String
+        if (value === null || value === undefined) {
+            valColor = AppColors_1.AppColors.grayTextWeak;
+        }
+        else if (typeof value === 'number') {
+            valColor = '#D97706';
+        }
+        else if (typeof value === 'boolean') {
+            valColor = '#4F46E5';
+        }
+        return (<react_native_1.View style={[reduxValueStyles.treeRow, { paddingLeft: 12 }]}>
+        <react_native_1.View style={reduxValueStyles.treeLeafConnector}/>
+        <react_native_1.Text style={reduxValueStyles.keyText} selectable={true}>
+          {nameStr}
+          <react_native_1.Text style={reduxValueStyles.colonText}>: </react_native_1.Text>
+          <react_native_1.Text style={[reduxValueStyles.valText, { color: valColor }]} selectable={true}>
+            {valStr}
+          </react_native_1.Text>
+        </react_native_1.Text>
+      </react_native_1.View>);
+    }
+    const keys = Object.keys(value);
+    const summaryText = isArray ? `Array [${keys.length}]` : `Object {${keys.length}}`;
+    return (<react_native_1.View style={reduxValueStyles.treeNodeBlock}>
+      <react_native_1.Pressable onPress={() => setExpanded(!expanded)} style={reduxValueStyles.treeRow}>
+        <react_native_1.View style={reduxValueStyles.treeLeafConnector}/>
+        <react_native_1.View style={[reduxValueStyles.chevronWrap, { transform: [{ rotate: expanded ? '90deg' : '0deg' }] }]}>
+          <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
+        </react_native_1.View>
+        <react_native_1.Text style={reduxValueStyles.keyText} selectable={true}>
+          {nameStr}
+          <react_native_1.Text style={reduxValueStyles.colonText}>: </react_native_1.Text>
+          <react_native_1.Text style={reduxValueStyles.summaryText}>{summaryText}</react_native_1.Text>
+        </react_native_1.Text>
+      </react_native_1.Pressable>
+      {expanded && (<react_native_1.View style={reduxValueStyles.treeChildrenContainer}>
+          {keys.map(key => (<ReduxValueNode key={key} name={key} value={value[key]} level={level + 1} search={search}/>))}
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+const ReduxTreeView = ({ state, lastActionMap, search, }) => {
+    const [storeExpanded, setStoreExpanded] = (0, react_1.useState)(true);
+    const [reducerExpanded, setReducerExpanded] = (0, react_1.useState)({});
+    if (!state || typeof state !== 'object') {
+        return (<react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 12, color: AppColors_1.AppColors.grayTextWeak, padding: 12 }}>
+        No state object to display.
+      </react_native_1.Text>);
+    }
+    const reducers = Object.keys(state);
+    const toggleReducer = (key) => {
+        setReducerExpanded(prev => ({
+            ...prev,
+            [key]: !prev[key],
+        }));
+    };
+    return (<react_native_1.View style={styles.container}>
+      {/* Root Node: Store */}
+      <react_native_1.Pressable onPress={() => setStoreExpanded(!storeExpanded)} style={styles.storeHeader}>
+        <react_native_1.View style={[styles.chevronWrap, { transform: [{ rotate: storeExpanded ? '90deg' : '0deg' }] }]}>
+          <NetworkIcons_1.ChevronIcon color="#FFFFFF" size={12}/>
+        </react_native_1.View>
+        <react_native_1.Text style={styles.storeTitle}>🏪 Redux Store</react_native_1.Text>
+        <react_native_1.View style={styles.badge}>
+          <react_native_1.Text style={styles.badgeText}>{reducers.length} Reducers</react_native_1.Text>
+        </react_native_1.View>
+      </react_native_1.Pressable>
+
+      {storeExpanded && (<react_native_1.View style={styles.storeChildren}>
+          {reducers.map((reducerKey, index) => {
+                const isLastReducer = index === reducers.length - 1;
+                const isExpanded = !!reducerExpanded[reducerKey];
+                const sliceData = state[reducerKey];
+                const lastAction = lastActionMap[reducerKey];
+                return (<react_native_1.View key={reducerKey} style={styles.reducerContainer}>
+                {/* Visual Branch Line for Reducer */}
+                <react_native_1.View style={[styles.reducerVerticalLine, isLastReducer && { bottom: '50%' }]}/>
+
+                {/* Reducer Header */}
+                <react_native_1.Pressable onPress={() => toggleReducer(reducerKey)} style={styles.reducerHeader}>
+                  <react_native_1.View style={styles.reducerHorizontalLine}/>
+                  <react_native_1.View style={[styles.chevronWrap, { transform: [{ rotate: isExpanded ? '90deg' : '0deg' }] }]}>
+                    <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.purple} size={10}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={styles.iconWrap}>
+                    <FolderIcon color={AppColors_1.AppColors.purple} size={11}/>
+                  </react_native_1.View>
+                  <react_native_1.Text style={styles.reducerText}>{reducerKey}</react_native_1.Text>
+                </react_native_1.Pressable>
+
+                {isExpanded && (<react_native_1.View style={styles.reducerChildren}>
+                    {/* Vertical line connecting children */}
+                    <react_native_1.View style={styles.childrenVerticalLine}/>
+
+                    {/* Node 1: Last Action */}
+                    <react_native_1.View style={styles.childItem}>
+                      <react_native_1.View style={styles.childHorizontalLine}/>
+                      <react_native_1.View style={[styles.iconWrap, { backgroundColor: '#FDF2F8' }]}>
+                        <BoltIcon color="#DB2777" size={11}/>
+                      </react_native_1.View>
+                      <react_native_1.View style={{ flex: 1 }}>
+                        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
+                          <react_native_1.Text style={styles.childLabel}>Last Action:</react_native_1.Text>
+                          {lastAction ? (<react_native_1.View style={styles.actionTypeBadge}>
+                              <react_native_1.Text style={styles.actionTypeText}>{lastAction.type}</react_native_1.Text>
+                            </react_native_1.View>) : (<react_native_1.Text style={styles.noActionText}>None dispatched</react_native_1.Text>)}
+                        </react_native_1.View>
+                        {lastAction && (<react_native_1.Text style={styles.timestampText}>Dispatched: {lastAction.timestamp}</react_native_1.Text>)}
+                        {lastAction && lastAction.payload !== null && (<react_native_1.View style={{ marginTop: 6 }}>
+                            <ReduxValueNode name="payload" value={lastAction.payload} level={0} search={search}/>
+                          </react_native_1.View>)}
+                      </react_native_1.View>
+                    </react_native_1.View>
+
+                    {/* Node 2: State Data */}
+                    <react_native_1.View style={styles.childItem}>
+                      <react_native_1.View style={[styles.childHorizontalLine, { bottom: '50%' }]}/>
+                      <react_native_1.View style={[styles.iconWrap, { backgroundColor: '#ECFDF5' }]}>
+                        <DatabaseIcon color="#059669" size={11}/>
+                      </react_native_1.View>
+                      <react_native_1.View style={{ flex: 1 }}>
+                        <react_native_1.Text style={styles.childLabel}>State Slice Data</react_native_1.Text>
+                        <react_native_1.View style={{ marginTop: 6 }}>
+                          <ReduxValueNode name="state" value={sliceData} level={0} search={search}/>
+                        </react_native_1.View>
+                      </react_native_1.View>
+                    </react_native_1.View>
+                  </react_native_1.View>)}
+              </react_native_1.View>);
+            })}
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+exports.ReduxTreeView = ReduxTreeView;
+const ReduxActionTimeline = ({ history, onClear, search, }) => {
+    const [expandedActionId, setExpandedActionId] = (0, react_1.useState)(null);
+    const toggleExpand = (id) => {
+        setExpandedActionId(prev => (prev === id ? null : id));
+    };
+    const filteredHistory = history.filter(action => {
+        if (!search)
+            return true;
+        const s = search.toLowerCase();
+        if (action.type.toLowerCase().includes(s))
+            return true;
+        if (action.affectedSlices.some(slice => slice.toLowerCase().includes(s)))
+            return true;
+        if (action.payload && typeof action.payload === 'object') {
+            return JSON.stringify(action.payload).toLowerCase().includes(s);
+        }
+        return false;
+    });
+    return (<react_native_1.View style={timelineStyles.container}>
+      <react_native_1.View style={timelineStyles.headerRow}>
+        <react_native_1.Text style={timelineStyles.headerTitle}>⚡ Dispatched Actions ({filteredHistory.length})</react_native_1.Text>
+        {history.length > 0 && (<react_native_1.Pressable onPress={onClear} style={timelineStyles.clearBtn}>
+            <react_native_1.Text style={timelineStyles.clearBtnText}>Clear Log</react_native_1.Text>
+          </react_native_1.Pressable>)}
+      </react_native_1.View>
+
+      {filteredHistory.length === 0 ? (<react_native_1.View style={timelineStyles.emptyContainer}>
+          <react_native_1.Text style={timelineStyles.emptyText}>
+            {history.length === 0
+                ? 'No actions dispatched yet.\nDispatch actions in your application to see the timeline.'
+                : 'No matching actions found.'}
+          </react_native_1.Text>
+        </react_native_1.View>) : (<react_native_1.View style={timelineStyles.listContainer}>
+          {filteredHistory.map((item, index) => {
+                const isLast = index === filteredHistory.length - 1;
+                const isExpanded = expandedActionId === item.id;
+                return (<react_native_1.View key={item.id} style={timelineStyles.timelineItem}>
+                {/* Visual Line */}
+                <react_native_1.View style={[timelineStyles.verticalLine, isLast && { bottom: '50%' }]}/>
+                <react_native_1.View style={timelineStyles.circleIndicator}>
+                  <react_native_1.View style={timelineStyles.circleInner}/>
+                </react_native_1.View>
+
+                {/* Card */}
+                <react_native_1.Pressable onPress={() => toggleExpand(item.id)} style={[
+                        timelineStyles.card,
+                        isExpanded && { borderColor: AppColors_1.AppColors.purple, backgroundColor: AppColors_1.AppColors.purpleShade50 },
+                    ]}>
+                  <react_native_1.View style={timelineStyles.cardHeader}>
+                    <react_native_1.View style={timelineStyles.typeBadge}>
+                      <react_native_1.Text style={timelineStyles.typeText}>{item.type}</react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={timelineStyles.timestamp}>{item.timestamp}</react_native_1.Text>
+                  </react_native_1.View>
+
+                  {item.affectedSlices.length > 0 && (<react_native_1.View style={timelineStyles.slicesRow}>
+                      <react_native_1.Text style={timelineStyles.slicesLabel}>Affected:</react_native_1.Text>
+                      {item.affectedSlices.map(slice => (<react_native_1.View key={slice} style={timelineStyles.slicePill}>
+                          <react_native_1.Text style={timelineStyles.sliceText}>{slice}</react_native_1.Text>
+                        </react_native_1.View>))}
+                    </react_native_1.View>)}
+
+                  {isExpanded && (<react_native_1.View style={timelineStyles.payloadContainer}>
+                      <react_native_1.Text style={timelineStyles.payloadTitle}>Payload</react_native_1.Text>
+                      {item.payload !== null && typeof item.payload === 'object' ? (<ReduxValueNode name="action.payload" value={item.payload} level={0} search={search}/>) : (<react_native_1.Text style={timelineStyles.primitivePayload}>
+                          {item.payload === null ? 'null' : String(item.payload)}
+                        </react_native_1.Text>)}
+                    </react_native_1.View>)}
+                </react_native_1.Pressable>
+              </react_native_1.View>);
+            })}
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+exports.ReduxActionTimeline = ReduxActionTimeline;
+const reduxValueStyles = react_native_1.StyleSheet.create({
+    treeNodeBlock: {
+        marginTop: 4,
+    },
+    treeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 3,
+        gap: 4,
+        position: 'relative',
+    },
+    treeLeafConnector: {
+        position: 'absolute',
+        left: -12,
+        top: '50%',
+        width: 8,
+        height: 1,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+        opacity: 0.5,
+    },
+    treeChildrenContainer: {
+        paddingLeft: 14,
+        borderLeftWidth: 1,
+        borderLeftColor: AppColors_1.AppColors.dividerColor,
+        marginLeft: 6,
+    },
+    chevronWrap: {
+        width: 10,
+        height: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    keyText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.grayTextStrong,
+    },
+    colonText: {
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    valText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11.5,
+    },
+    summaryText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+});
+const timelineStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    headerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 12,
+    },
+    headerTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    clearBtn: {
+        backgroundColor: 'rgba(239, 68, 68, 0.08)',
+        borderColor: 'rgba(239, 68, 68, 0.2)',
+        borderWidth: 1,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+    },
+    clearBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: '#EF4444',
+    },
+    emptyContainer: {
+        paddingVertical: 32,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors_1.AppColors.grayTextWeak,
+        textAlign: 'center',
+        lineHeight: 18,
+    },
+    listContainer: {
+        paddingLeft: 12,
+    },
+    timelineItem: {
+        position: 'relative',
+        paddingLeft: 20,
+        marginBottom: 12,
+    },
+    verticalLine: {
+        position: 'absolute',
+        left: 4,
+        top: 0,
+        bottom: -12,
+        width: 1,
+        backgroundColor: AppColors_1.AppColors.dividerColor,
+    },
+    circleIndicator: {
+        position: 'absolute',
+        left: 0,
+        top: 10,
+        width: 9,
+        height: 9,
+        borderRadius: 4.5,
+        backgroundColor: AppColors_1.AppColors.purpleShade50,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.purple,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    circleInner: {
+        width: 3,
+        height: 3,
+        borderRadius: 1.5,
+        backgroundColor: AppColors_1.AppColors.purple,
+    },
+    card: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        borderRadius: 8,
+        padding: 10,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+    },
+    typeBadge: {
+        backgroundColor: 'rgba(104,75,155,0.08)',
+        borderColor: 'rgba(104,75,155,0.18)',
+        borderWidth: 1,
+        borderRadius: 6,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        flexShrink: 1,
+    },
+    typeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.purple,
+    },
+    timestamp: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    slicesRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: 4,
+        marginTop: 6,
+    },
+    slicesLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+        marginRight: 2,
+    },
+    slicePill: {
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        borderWidth: 1,
+        borderRadius: 4,
+        paddingHorizontal: 4,
+        paddingVertical: 1,
+    },
+    sliceText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 9,
+        color: AppColors_1.AppColors.grayText,
+    },
+    payloadContainer: {
+        marginTop: 10,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.dividerColor,
+        paddingTop: 8,
+    },
+    payloadTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+        textTransform: 'uppercase',
+        marginBottom: 4,
+    },
+    primitivePayload: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextStrong,
+    },
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    storeHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.purple,
+        borderRadius: 8,
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        gap: 8,
+    },
+    chevronWrap: {
+        width: 12,
+        height: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    storeTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: '#FFFFFF',
+    },
+    badge: {
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        borderRadius: 12,
+        marginLeft: 'auto',
+    },
+    badgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: '#FFFFFF',
+    },
+    storeChildren: {
+        paddingLeft: 12,
+        marginTop: 4,
+    },
+    reducerContainer: {
+        position: 'relative',
+        paddingLeft: 16,
+        paddingVertical: 4,
+    },
+    reducerVerticalLine: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: 1,
+        backgroundColor: AppColors_1.AppColors.dividerColor,
+    },
+    reducerHorizontalLine: {
+        position: 'absolute',
+        left: -16,
+        top: '50%',
+        width: 16,
+        height: 1,
+        backgroundColor: AppColors_1.AppColors.dividerColor,
+    },
+    reducerHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 6,
+        gap: 6,
+    },
+    iconWrap: {
+        width: 18,
+        height: 18,
+        borderRadius: 4,
+        backgroundColor: AppColors_1.AppColors.purpleShade50,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    reducerText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    reducerChildren: {
+        paddingLeft: 20,
+        position: 'relative',
+        marginTop: 4,
+        gap: 10,
+    },
+    childrenVerticalLine: {
+        position: 'absolute',
+        left: 8,
+        top: 0,
+        bottom: 16,
+        width: 1,
+        backgroundColor: AppColors_1.AppColors.dividerColor,
+    },
+    childItem: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 8,
+        position: 'relative',
+        paddingLeft: 12,
+    },
+    childHorizontalLine: {
+        position: 'absolute',
+        left: -12,
+        top: 10,
+        width: 12,
+        height: 1,
+        backgroundColor: AppColors_1.AppColors.dividerColor,
+    },
+    childLabel: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.grayText,
+        marginTop: 2,
+    },
+    actionTypeBadge: {
+        backgroundColor: '#FCE7F3',
+        borderColor: '#FBCFE8',
+        borderWidth: 1,
+        borderRadius: 6,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+    },
+    actionTypeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        color: '#BE185D',
+    },
+    noActionText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    timestampText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+        marginTop: 2,
+    },
+});

package/dist/commonjs/components/TouchableScale.js

@@ -37,8 +37,22 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const TouchableScale = ({ onPress, style, children, hitSlop, disabled, }) => {
     const scale = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const flattenedStyle = react_native_1.StyleSheet.flatten(style) || {};
+    const layoutStyle = {
+        flex: flattenedStyle.flex,
+        flexDirection: flattenedStyle.flexDirection,
+        alignItems: flattenedStyle.alignItems,
+        justifyContent: flattenedStyle.justifyContent,
+        flexWrap: flattenedStyle.flexWrap,
+        alignSelf: flattenedStyle.alignSelf,
+        flexGrow: flattenedStyle.flexGrow,
+        flexShrink: flattenedStyle.flexShrink,
+        gap: flattenedStyle.gap,
+    };
     return (<react_native_1.Pressable disabled={disabled} style={style} onPressIn={() => react_native_1.Animated.spring(scale, { toValue: 0.94, useNativeDriver: true }).start()} onPressOut={() => react_native_1.Animated.spring(scale, { toValue: 1, useNativeDriver: true }).start()} onPress={onPress} hitSlop={hitSlop}>
-      <react_native_1.Animated.View style={{ transform: [{ scale }] }}>{children}</react_native_1.Animated.View>
+      <react_native_1.Animated.View style={[{ transform: [{ scale }] }, layoutStyle]}>
+        {children}
+      </react_native_1.Animated.View>
     </react_native_1.Pressable>);
 };
 exports.default = TouchableScale;

package/dist/commonjs/components/TreeNode.js

@@ -45,8 +45,8 @@ const NetworkIcons_1 = require("./NetworkIcons");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 const styles_1 = __importDefault(require("../styles"));
-const TreeNode = react_1.default.memo(function TreeNode({ data, name, level = 0, search, forceOpen, }) {
-    const [localOpen, setLocalOpen] = (0, react_1.useState)(level < 1);
+const TreeNode = react_1.default.memo(function TreeNode({ data, name, level = 0, search, forceOpen, defaultExpandDepth, }) {
+    const [localOpen, setLocalOpen] = (0, react_1.useState)(level < (defaultExpandDepth ?? 1));
     const open = forceOpen !== undefined ? forceOpen : localOpen;
     const isObject = typeof data === 'object' && data !== null;
     const isArray = Array.isArray(data);
@@ -132,7 +132,7 @@ const TreeNode = react_1.default.memo(function TreeNode({ data, name, level = 0,
       </react_native_1.Pressable>
 
       {open &&
-            entries.map(([k, v]) => (<TreeNode key={String(k)} name={k} data={v} level={level + 1} search={search} forceOpen={forceOpen}/>))}
+            entries.map(([k, v]) => (<TreeNode key={String(k)} name={k} data={v} level={level + 1} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>))}
 
       {open && <react_native_1.Text style={styles_1.default.codeSyntax}>{isArray ? ']' : '}'}</react_native_1.Text>}
     </react_native_1.View>);