react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/commonjs/components/ReduxTreeView.js

@@ -45,6 +45,8 @@ const NetworkIcons_1 = require("./NetworkIcons");
 const JsonViewer_1 = __importDefault(require("./JsonViewer"));
 const DiffViewer_1 = __importDefault(require("./DiffViewer"));
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const SegmentedTabs_1 = __importDefault(require("./SegmentedTabs"));
+const CopyButton_1 = __importDefault(require("./CopyButton"));
 const helpers_1 = require("../helpers");
 const settingsStore_1 = require("../helpers/settingsStore");
 // Enable LayoutAnimation for Android
@@ -283,139 +285,192 @@ const ReduxTreeView = ({ state, actionHistory = [], lastActionMap = {}, search =
         const fieldsCount = typeof sliceData === 'object' && sliceData !== null
             ? Object.keys(sliceData).length
             : 1;
+        const sliceTabs = [
+            { key: 'live', label: 'Live State' },
+            ...(isPersisted
+                ? [{ key: 'persisted', label: `Persisted (${(0, helpers_1.getSize)(persistedData)})` }]
+                : []),
+            { key: 'metadata', label: 'Metadata' },
+        ];
         return (<react_native_1.View style={{ flex: 1 }}>
-        {/* Non-scrollable header */}
-        <react_native_1.View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
-          <react_native_1.View style={styles.apiLikeInfoBar}>
-            <react_native_1.View style={styles.apiBadgeRow}>
+        {/* Detail info header bar */}
+        <react_native_1.View style={styles.apiLikeInfoBar}>
+          <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginBottom: 8,
+            }}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
               <react_native_1.View style={[styles.apiMethodBadge, { backgroundColor: AppColors_1.AppColors.purple }]}>
                 <react_native_1.Text style={styles.apiMethodBadgeText}>REDUX</react_native_1.Text>
               </react_native_1.View>
-              <react_native_1.View style={[styles.apiMethodBadge, { backgroundColor: AppColors_1.AppColors.purpleShade50, borderWidth: 1, borderColor: AppColors_1.AppColors.purple + '30' }]}>
-                <react_native_1.Text style={[styles.apiMethodBadgeText, { color: AppColors_1.AppColors.purple }]}>SLICE</react_native_1.Text>
+              <react_native_1.View style={[
+                styles.apiMethodBadge,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.brandPurple}18`,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.brandPurple}40`,
+                },
+            ]}>
+                <react_native_1.Text style={[styles.apiMethodBadgeText, { color: AppColors_1.AppColors.brandPurple }]}>
+                  SLICE
+                </react_native_1.Text>
               </react_native_1.View>
-              {isPersisted && (<react_native_1.View style={[styles.apiMethodBadge, { backgroundColor: '#10B981' }]}>
+              {isPersisted && (<react_native_1.View style={[styles.apiMethodBadge, { backgroundColor: AppColors_1.AppColors.emerald500 }]}>
                   <react_native_1.Text style={styles.apiMethodBadgeText}>PERSISTED</react_native_1.Text>
                 </react_native_1.View>)}
               <react_native_1.View style={styles.apiChip}>
                 <react_native_1.Text style={styles.apiChipText}>{(0, helpers_1.getSize)(sliceData)}</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={styles.apiChip}>
-                <react_native_1.Text style={styles.apiChipText}>{fieldsCount} {fieldsCount === 1 ? 'field' : 'fields'}</react_native_1.Text>
+                <react_native_1.Text style={styles.apiChipText}>
+                  {fieldsCount} {fieldsCount === 1 ? 'field' : 'fields'}
+                </react_native_1.Text>
               </react_native_1.View>
             </react_native_1.View>
 
-            <react_native_1.Text style={styles.apiTitleText} selectable={true}>{activeSliceKey}</react_native_1.Text>
+            <CopyButton_1.default value={JSON.stringify(sliceDetailTab === 'live' ? sliceData : persistedData, null, 2)} label={`Slice '${activeSliceKey}'`}/>
+          </react_native_1.View>
 
-            <react_native_1.View style={styles.apiMetaRow}>
-              <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
-              <react_native_1.Text style={styles.apiMetaText}>
-                Last updated: {lastActionMap[activeSliceKey] ? lastActionMap[activeSliceKey].timestamp : 'Initial'}
-              </react_native_1.Text>
-            </react_native_1.View>
+          <react_native_1.Text style={styles.apiTitleText} selectable={true}>
+            {activeSliceKey}
+          </react_native_1.Text>
+
+          <react_native_1.View style={styles.apiMetaRow}>
+            <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={11}/>
+            <react_native_1.Text style={styles.apiMetaText}>
+              Last updated: {lastActionMap[activeSliceKey] ? lastActionMap[activeSliceKey].timestamp : 'Initial'}
+            </react_native_1.Text>
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* Segment Control */}
-        <react_native_1.View style={{
+        {/* Back button row + sub-tabs */}
+        <react_native_1.View style={{ paddingHorizontal: 12, paddingTop: 8, paddingBottom: 4 }}>
+          <react_native_1.View style={{
                 flexDirection: 'row',
-                backgroundColor: AppColors_1.AppColors.grayBackground,
-                borderRadius: 10,
-                padding: 3,
-                marginHorizontal: 6,
-                marginBottom: 10,
-                marginTop: 6,
-                borderWidth: 1,
-                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginBottom: 8,
             }}>
-          {(isPersisted ? ['live', 'persisted'] : ['live']).map(tab => {
-                const isActive = sliceDetailTab === tab;
-                const getLabel = () => {
-                    if (tab === 'live')
-                        return 'Live State';
-                    return `Persisted (${(0, helpers_1.getSize)(persistedData)})`;
-                };
-                const getIcon = () => {
-                    const iconColor = isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText;
-                    if (tab === 'live')
-                        return <NetworkIcons_1.LayersIcon color={iconColor} size={11}/>;
-                    return <NetworkIcons_1.CalendarIcon color={iconColor} size={11}/>;
-                };
-                return (<react_native_1.Pressable key={tab} onPress={() => {
-                        animateLayout();
-                        setSliceDetailTab(tab);
-                    }} style={{
-                        flex: 1,
-                        paddingVertical: 6,
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        borderRadius: 8,
-                        backgroundColor: isActive ? AppColors_1.AppColors.purple : 'transparent',
-                        gap: 4,
-                    }}>
-                {getIcon()}
-                <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 10,
-                        color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
-                    }}>
-                  {getLabel()}
-                </react_native_1.Text>
-              </react_native_1.Pressable>);
-            })}
-        </react_native_1.View>
-
-        {/* Scrollable Tab Content */}
-        <react_native_1.View style={{ flex: 1, paddingHorizontal: 6 }}>
-          {/* Back button + controls */}
-          <react_native_1.View style={styles.contentDetailSubHeader}>
             <TouchableScale_1.default onPress={handleGoBackSlice} style={styles.backBtn} hitSlop={12}>
-              <BackChevronIcon color={AppColors_1.AppColors.purple} size={11}/>
+              <BackChevronIcon color={AppColors_1.AppColors.purple} size={12}/>
               <react_native_1.Text style={styles.backBtnText}>State Slices</react_native_1.Text>
             </TouchableScale_1.default>
 
-            <react_native_1.View style={styles.detailHeaderActions}>
-              {isPersisted && sliceDetailTab === 'persisted' && (<TouchableScale_1.default onPress={handleClearPersistence} style={[styles.detailHeaderBtn, { marginRight: 8 }]} hitSlop={8}>
-                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={14}/>
-                </TouchableScale_1.default>)}
+            {isPersisted && sliceDetailTab === 'persisted' && (<TouchableScale_1.default onPress={handleClearPersistence} style={[styles.detailHeaderBtn, { borderColor: `${AppColors_1.AppColors.errorColor}40` }]} hitSlop={8}>
+                <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={14}/>
+              </TouchableScale_1.default>)}
+          </react_native_1.View>
 
-              <TouchableScale_1.default onPress={() => {
+          <SegmentedTabs_1.default tabs={sliceTabs} activeKey={sliceDetailTab} onChange={key => {
                 animateLayout();
-                setSliceForceOpen(prev => (prev === true ? false : prev === false ? undefined : true));
-            }} style={styles.detailHeaderBtn} hitSlop={8}>
-                <NetworkIcons_1.ExpandCollapseIcon expanded={sliceForceOpen !== false} color={AppColors_1.AppColors.purple} size={14}/>
-              </TouchableScale_1.default>
+                setSliceDetailTab(key);
+            }}/>
+        </react_native_1.View>
 
-              <TouchableScale_1.default onPress={() => {
-                const dataToCopy = sliceDetailTab === 'live' ? sliceData : persistedData;
-                (0, helpers_1.copyToClipboard)(dataToCopy, `Redux Slice '${activeSliceKey}' (${sliceDetailTab})`);
-            }} style={styles.detailHeaderBtn} hitSlop={8}>
-                <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.purple} size={14}/>
-              </TouchableScale_1.default>
+        {/* Search row (for live/persisted tabs) */}
+        {sliceDetailTab !== 'metadata' && (<react_native_1.View style={{ paddingHorizontal: 12, paddingTop: 4, paddingBottom: 4 }}>
+            <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    borderRadius: 8,
+                    paddingHorizontal: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                    height: 36,
+                }}>
+              <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
+              <react_native_1.TextInput placeholder="Search in slice keys or values..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={onSearchChange} style={{
+                    flex: 1,
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 12,
+                    color: AppColors_1.AppColors.grayTextStrong,
+                    paddingHorizontal: 8,
+                    paddingVertical: 0,
+                }} autoCorrect={false} autoCapitalize="none"/>
+              {search.length > 0 && (<react_native_1.Pressable onPress={() => onSearchChange?.('')} hitSlop={10}>
+                  <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>
+                </react_native_1.Pressable>)}
             </react_native_1.View>
-          </react_native_1.View>
+          </react_native_1.View>)}
 
-          <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 24 }} showsVerticalScrollIndicator={true}>
-            <react_native_1.View style={{ padding: 12 }}>
-              <JsonViewer_1.default data={sliceDetailTab === 'live' ? sliceData : (persistedData ?? 'No persisted data')} search={search} forceOpen={sliceForceOpen !== undefined ? sliceForceOpen : (isSearching ? true : undefined)} fullHeight={true}/>
-            </react_native_1.View>
-          </react_native_1.ScrollView>
-        </react_native_1.View>
+        {/* Scrollable Tab Content */}
+        <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingHorizontal: 12, paddingTop: 6, paddingBottom: 28, flexGrow: 1 }} showsVerticalScrollIndicator={true} keyboardShouldPersistTaps="handled">
+          {sliceDetailTab === 'metadata' ? (<react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                    overflow: 'hidden',
+                    paddingHorizontal: 12,
+                    paddingVertical: 4,
+                }}>
+              {[
+                    { label: 'Slice Name', value: activeSliceKey },
+                    { label: 'Fields Count', value: `${fieldsCount} root keys` },
+                    { label: 'State Size', value: (0, helpers_1.getSize)(sliceData) },
+                    {
+                        label: 'Persistence',
+                        value: isPersisted ? `Persisted (${(0, helpers_1.getSize)(persistedData)})` : 'Not Persisted',
+                    },
+                    {
+                        label: 'Last Dispatched Action',
+                        value: lastActionMap[activeSliceKey] ? lastActionMap[activeSliceKey].type : 'None',
+                    },
+                    {
+                        label: 'Last Updated At',
+                        value: lastActionMap[activeSliceKey] ? lastActionMap[activeSliceKey].timestamp : 'Initial',
+                    },
+                ].map((row, rIdx) => (<react_native_1.View key={rIdx} style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        paddingVertical: 9,
+                        borderBottomWidth: rIdx < 5 ? 1 : 0,
+                        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
+                    }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 11.5, color: AppColors_1.AppColors.grayTextWeak }}>
+                    {row.label}
+                  </react_native_1.Text>
+                  <react_native_1.Text selectable style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11.5,
+                        color: AppColors_1.AppColors.primaryBlack,
+                        maxWidth: '60%',
+                        textAlign: 'right',
+                    }}>
+                    {row.value}
+                  </react_native_1.Text>
+                </react_native_1.View>))}
+            </react_native_1.View>) : (<JsonViewer_1.default data={sliceDetailTab === 'live' ? sliceData : (persistedData ?? 'No persisted data')} search={search} forceOpen={sliceForceOpen !== undefined ? sliceForceOpen : (isSearching ? true : undefined)} fullHeight={true}/>)}
+        </react_native_1.ScrollView>
       </react_native_1.View>);
     }
     // ── Render Detail View: Timeline Action ──
     if (activeTab === 'timeline' && selectedAction !== null) {
         const affectedSlices = selectedAction.affectedSlices || [];
+        const actionTabs = [
+            { key: 'payload', label: 'Payload' },
+            { key: 'diff', label: 'Diff Changes' },
+            { key: 'state', label: 'Snapshot' },
+            { key: 'metadata', label: 'Metadata' },
+        ];
         return (<react_native_1.View style={{ flex: 1 }}>
-        {/* Non-scrollable header */}
-        <react_native_1.View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
-          <react_native_1.View style={styles.apiLikeInfoBar}>
-            <react_native_1.View style={styles.apiBadgeRow}>
+        {/* Detail info header bar */}
+        <react_native_1.View style={styles.apiLikeInfoBar}>
+          <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginBottom: 8,
+            }}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
               <react_native_1.View style={[styles.apiMethodBadge, { backgroundColor: AppColors_1.AppColors.purple }]}>
                 <react_native_1.Text style={styles.apiMethodBadgeText}>REDUX</react_native_1.Text>
               </react_native_1.View>
-              <react_native_1.View style={[styles.apiMethodBadge, { backgroundColor: '#F59E0B' }]}>
+              <react_native_1.View style={[styles.apiMethodBadge, { backgroundColor: AppColors_1.AppColors.amber500 }]}>
                 <react_native_1.Text style={styles.apiMethodBadgeText}>ACTION</react_native_1.Text>
               </react_native_1.View>
               <react_native_1.View style={styles.apiChip}>
@@ -426,119 +481,105 @@ const ReduxTreeView = ({ state, actionHistory = [], lastActionMap = {}, search =
               </react_native_1.View>
             </react_native_1.View>
 
-            <react_native_1.Text style={styles.apiTitleText} selectable={true}>{selectedAction.type}</react_native_1.Text>
+            <CopyButton_1.default value={JSON.stringify(actionSubTab === 'payload'
+                ? selectedAction.payload
+                : actionSubTab === 'diff'
+                    ? { prev: selectedAction.prevState, next: selectedAction.nextState }
+                    : selectedAction.nextState, null, 2)} label={actionSubTab === 'payload' ? 'Action Payload' : 'State Snapshot'}/>
+          </react_native_1.View>
 
-            <react_native_1.View style={styles.apiMetaRow}>
-              <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
-              <react_native_1.Text style={styles.apiMetaText}>Dispatched: {selectedAction.timestamp}</react_native_1.Text>
-            </react_native_1.View>
+          <react_native_1.Text style={styles.apiTitleText} selectable={true}>
+            {selectedAction.type}
+          </react_native_1.Text>
+
+          <react_native_1.View style={styles.apiMetaRow}>
+            <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={11}/>
+            <react_native_1.Text style={styles.apiMetaText}>
+              Dispatched: {selectedAction.timestamp}
+            </react_native_1.Text>
           </react_native_1.View>
-        </react_native_1.View>
 
-        {/* Affected Slices Tags list */}
-        {affectedSlices.length > 0 && (<react_native_1.View style={styles.detailAffectedTags}>
-            <react_native_1.Text style={styles.affectedTagsLabel}>AFFECTED SLICES:</react_native_1.Text>
-            <react_native_1.View style={styles.detailTagsList}>
-              {affectedSlices.map(slice => (<react_native_1.View key={slice} style={styles.sliceTag}>
-                  <react_native_1.Text style={styles.sliceTagText}>{slice}</react_native_1.Text>
-                </react_native_1.View>))}
-            </react_native_1.View>
-          </react_native_1.View>)}
+          {/* Affected Slices Tags list */}
+          {affectedSlices.length > 0 && (<react_native_1.View style={[styles.detailAffectedTags, { marginTop: 6, paddingHorizontal: 0, paddingBottom: 0 }]}>
+              <react_native_1.Text style={styles.affectedTagsLabel}>AFFECTED SLICES:</react_native_1.Text>
+              <react_native_1.View style={styles.detailTagsList}>
+                {affectedSlices.map(slice => (<react_native_1.View key={slice} style={styles.sliceTag}>
+                    <react_native_1.Text style={styles.sliceTagText}>{slice}</react_native_1.Text>
+                  </react_native_1.View>))}
+              </react_native_1.View>
+            </react_native_1.View>)}
+        </react_native_1.View>
 
-        {/* Segment Control */}
-        <react_native_1.View style={{
+        {/* Back button row + sub-tabs */}
+        <react_native_1.View style={{ paddingHorizontal: 12, paddingTop: 8, paddingBottom: 4 }}>
+          <react_native_1.View style={{
                 flexDirection: 'row',
-                backgroundColor: AppColors_1.AppColors.grayBackground,
-                borderRadius: 10,
-                padding: 3,
-                marginHorizontal: 6,
-                marginBottom: 10,
-                marginTop: 6,
-                borderWidth: 1,
-                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginBottom: 8,
             }}>
-          {['payload', 'diff', 'state'].map(tab => {
-                const isActive = actionSubTab === tab;
-                const getLabel = () => {
-                    if (tab === 'payload')
-                        return 'Payload';
-                    if (tab === 'diff')
-                        return 'Diff Changes';
-                    return 'Snapshot';
-                };
-                const getIcon = () => {
-                    const iconColor = isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText;
-                    if (tab === 'payload')
-                        return <NetworkIcons_1.RequestIcon color={iconColor} size={11}/>;
-                    if (tab === 'diff')
-                        return <NetworkIcons_1.DiffIcon color={iconColor} size={11}/>;
-                    return <NetworkIcons_1.LayersIcon color={iconColor} size={11}/>;
-                };
-                return (<react_native_1.Pressable key={tab} onPress={() => {
-                        animateLayout();
-                        setActionSubTab(tab);
-                    }} style={{
-                        flex: 1,
-                        paddingVertical: 6,
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        borderRadius: 8,
-                        backgroundColor: isActive ? AppColors_1.AppColors.purple : 'transparent',
-                        gap: 4,
-                    }}>
-                {getIcon()}
-                <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 10,
-                        color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
-                    }}>
-                  {getLabel()}
-                </react_native_1.Text>
-              </react_native_1.Pressable>);
-            })}
-        </react_native_1.View>
-
-        {/* Scrollable Tab Content */}
-        <react_native_1.View style={{ flex: 1, paddingHorizontal: 6 }}>
-          {/* Back button + controls */}
-          <react_native_1.View style={styles.contentDetailSubHeader}>
             <TouchableScale_1.default onPress={handleGoBackAction} style={styles.backBtn} hitSlop={12}>
-              <BackChevronIcon color={AppColors_1.AppColors.purple} size={11}/>
-              <react_native_1.Text style={styles.backBtnText}>Actions</react_native_1.Text>
+              <BackChevronIcon color={AppColors_1.AppColors.purple} size={12}/>
+              <react_native_1.Text style={styles.backBtnText}>Actions Timeline</react_native_1.Text>
             </TouchableScale_1.default>
+          </react_native_1.View>
 
-            {(actionSubTab === 'payload' || actionSubTab === 'state') && (<react_native_1.View style={styles.detailHeaderActions}>
-                <TouchableScale_1.default onPress={() => {
-                    animateLayout();
-                    setActionForceOpen(prev => (prev === true ? false : prev === false ? undefined : true));
-                }} style={styles.detailHeaderBtn} hitSlop={8}>
-                  <NetworkIcons_1.ExpandCollapseIcon expanded={actionForceOpen !== false} color={AppColors_1.AppColors.purple} size={14}/>
-                </TouchableScale_1.default>
+          <SegmentedTabs_1.default tabs={actionTabs} activeKey={actionSubTab} onChange={key => {
+                animateLayout();
+                setActionSubTab(key);
+            }}/>
+        </react_native_1.View>
 
-                <TouchableScale_1.default onPress={() => {
-                    const dataToCopy = actionSubTab === 'payload' ? selectedAction.payload : selectedAction.nextState;
-                    (0, helpers_1.copyToClipboard)(dataToCopy, actionSubTab === 'payload' ? 'Action payload' : 'State snapshot');
-                }} style={styles.detailHeaderBtn} hitSlop={8}>
-                  <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.purple} size={14}/>
-                </TouchableScale_1.default>
-              </react_native_1.View>)}
-          </react_native_1.View>
+        {/* Scrollable Tab Content */}
+        <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingHorizontal: 12, paddingTop: 6, paddingBottom: 28, flexGrow: 1 }} showsVerticalScrollIndicator={true} keyboardShouldPersistTaps="handled">
+          {actionSubTab === 'payload' && (<JsonViewer_1.default data={selectedAction.payload ?? 'No payload data'} wrap forceOpen={actionForceOpen !== undefined ? actionForceOpen : undefined} fullHeight={true}/>)}
 
-          <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 24 }} showsVerticalScrollIndicator={true}>
-            {actionSubTab === 'payload' && (<react_native_1.View style={{ padding: 12 }}>
-                <JsonViewer_1.default data={selectedAction.payload ?? 'No payload data'} wrap forceOpen={actionForceOpen !== undefined ? actionForceOpen : undefined} fullHeight={true}/>
-              </react_native_1.View>)}
+          {actionSubTab === 'diff' && (<DiffViewer_1.default oldData={selectedAction.prevState} newData={selectedAction.nextState}/>)}
 
-            {actionSubTab === 'diff' && (<react_native_1.View style={{ padding: 12 }}>
-                <DiffViewer_1.default oldData={selectedAction.prevState} newData={selectedAction.nextState}/>
-              </react_native_1.View>)}
+          {actionSubTab === 'state' && (<JsonViewer_1.default data={selectedAction.nextState} wrap forceOpen={actionForceOpen !== undefined ? actionForceOpen : undefined} fullHeight={true}/>)}
 
-            {actionSubTab === 'state' && (<react_native_1.View style={{ padding: 12 }}>
-                <JsonViewer_1.default data={selectedAction.nextState} wrap forceOpen={actionForceOpen !== undefined ? actionForceOpen : undefined} fullHeight={true}/>
-              </react_native_1.View>)}
-          </react_native_1.ScrollView>
-        </react_native_1.View>
+          {actionSubTab === 'metadata' && (<react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                    overflow: 'hidden',
+                    paddingHorizontal: 12,
+                    paddingVertical: 4,
+                }}>
+              {[
+                    { label: 'Action Type', value: selectedAction.type },
+                    { label: 'Action ID', value: `#${selectedAction.id}` },
+                    { label: 'Dispatched At', value: selectedAction.timestamp },
+                    { label: 'Payload Size', value: (0, helpers_1.getSize)(selectedAction.payload) },
+                    { label: 'Snapshot Size', value: (0, helpers_1.getSize)(selectedAction.nextState) },
+                    {
+                        label: 'Affected Slices',
+                        value: affectedSlices.length > 0 ? affectedSlices.join(', ') : 'None',
+                    },
+                ].map((row, rIdx) => (<react_native_1.View key={rIdx} style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        paddingVertical: 9,
+                        borderBottomWidth: rIdx < 5 ? 1 : 0,
+                        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
+                    }}>
+                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 11.5, color: AppColors_1.AppColors.grayTextWeak }}>
+                    {row.label}
+                  </react_native_1.Text>
+                  <react_native_1.Text selectable style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11.5,
+                        color: AppColors_1.AppColors.primaryBlack,
+                        maxWidth: '60%',
+                        textAlign: 'right',
+                    }}>
+                    {row.value}
+                  </react_native_1.Text>
+                </react_native_1.View>))}
+            </react_native_1.View>)}
+        </react_native_1.ScrollView>
       </react_native_1.View>);
     }
     // ── Render List Views (Default) ──
@@ -676,7 +717,7 @@ const ReduxTreeView = ({ state, actionHistory = [], lastActionMap = {}, search =
                     ? 'No actions match your search.'
                     : 'No actions dispatched yet. Trigger an action in the app to populate history.'}
               </react_native_1.Text>
-            </react_native_1.View>) : (filteredActionHistory.map((action, index) => {
+            </react_native_1.View>) : (filteredActionHistory.map(action => {
                 const id = action.id;
                 const affectedSlices = action.affectedSlices || [];
                 return (<TouchableScale_1.default key={id} onPress={() => {
@@ -1120,7 +1161,7 @@ const styles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.grayText,
     },
     subTabPillTextActive: {
-        color: '#FFFFFF',
+        color: AppColors_1.AppColors.white,
         fontFamily: AppFonts_1.AppFonts.interBold,
     },
     detailScrollContent: {
@@ -1170,16 +1211,16 @@ const styles = react_native_1.StyleSheet.create({
     apiMethodBadgeText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 9.5,
-        color: '#FFFFFF',
+        color: AppColors_1.AppColors.white,
         letterSpacing: 0.5,
     },
     apiChip: {
         paddingHorizontal: 7,
         paddingVertical: 2,
         borderRadius: 4,
-        backgroundColor: 'rgba(104,75,155,0.06)',
+        backgroundColor: `${AppColors_1.AppColors.purple}0F`,
         borderWidth: 1,
-        borderColor: 'rgba(104,75,155,0.15)',
+        borderColor: `${AppColors_1.AppColors.purple}26`,
         alignItems: 'center',
         justifyContent: 'center',
     },

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface SegmentedTab {
+    key: string;
+    label: string;
+    icon?: (isActive: boolean) => React.ReactNode;
+}
+interface SegmentedTabsProps {
+    tabs: SegmentedTab[];
+    activeKey: string;
+    onChange: (key: string) => void;
+    style?: ViewStyle | ViewStyle[];
+}
+declare const SegmentedTabs: ({ tabs, activeKey, onChange, style }: SegmentedTabsProps) => React.JSX.Element;
+export default SegmentedTabs;

package/dist/commonjs/components/SegmentedTabs.js

@@ -0,0 +1,52 @@
+"use strict";
+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_native_1 = require("react-native");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const SegmentedTabs = ({ tabs, activeKey, onChange, style }) => (<react_native_1.View style={[
+        {
+            flexDirection: 'row',
+            borderRadius: 8,
+            overflow: 'hidden',
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.dividerColor,
+            backgroundColor: AppColors_1.AppColors.primaryLight,
+        },
+        style,
+    ]}>
+    {tabs.map((tab, index) => {
+        const isActive = activeKey === tab.key;
+        return (<react_native_1.Pressable key={tab.key} onPress={() => onChange(tab.key)} style={{
+                flex: 1,
+                paddingVertical: 8,
+                paddingHorizontal: 8,
+                backgroundColor: isActive
+                    ? AppColors_1.AppColors.brandPurple
+                    : AppColors_1.AppColors.primaryLight,
+                borderRightWidth: index < tabs.length - 1 ? 1 : 0,
+                borderRightColor: AppColors_1.AppColors.dividerColor,
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 4,
+                flexDirection: 'row',
+            }}>
+          {tab.icon ? tab.icon(isActive) : null}
+          <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10,
+                color: isActive
+                    ? AppColors_1.AppColors.white
+                    : AppColors_1.AppColors.grayTextWeak,
+                textTransform: 'capitalize',
+                letterSpacing: 0.3,
+            }}>
+            {tab.label}
+          </react_native_1.Text>
+        </react_native_1.Pressable>);
+    })}
+  </react_native_1.View>);
+exports.default = SegmentedTabs;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ActiveTab } from '../types';
+interface SettingsViewProps {
+    headerTopPadding: number;
+    activeTab?: ActiveTab;
+    defaultTab: ActiveTab;
+    tabVisibility: Record<string, boolean>;
+    onCloseSettings: () => void;
+    onUpdateTabVisibility: (key: ActiveTab, val: boolean) => void;
+    onSetDefaultTab: (key: ActiveTab) => void;
+}
+export declare const SettingsView: React.FC<SettingsViewProps>;
+export default SettingsView;