react-native-inapp-inspector 1.0.9 → 1.0.11

package/dist/commonjs/components/ConsoleLogCard.js

@@ -154,6 +154,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
     const isUserLog = !isWebView && item.sourceMethod === 'log';
     const caller = 'caller' in item ? item.caller : undefined;
     const getLogColors = () => {
+        const isDark = AppColors_1.AppColors.primaryLight !== '#FFFFFF';
         if (isWebView) {
             const label = item.type.toUpperCase();
             switch (item.type) {
@@ -163,7 +164,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                         badgeBg: `${AppColors_1.AppColors.errorColor}15`,
                         badgeText: AppColors_1.AppColors.errorColor,
                         label,
-                        cardBg: '#FFF5F6',
+                        cardBg: isDark ? 'rgba(239, 68, 68, 0.15)' : '#FFF5F6',
                     };
                 case 'warn':
                     return {
@@ -171,15 +172,15 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                         badgeBg: `${AppColors_1.AppColors.lightOrange}15`,
                         badgeText: AppColors_1.AppColors.darkOrange || AppColors_1.AppColors.lightOrange,
                         label,
-                        cardBg: '#FFFDF6',
+                        cardBg: isDark ? 'rgba(245, 158, 11, 0.15)' : '#FFFDF6',
                     };
                 default:
                     return {
                         border: '#475569',
-                        badgeBg: '#F1F5F9',
-                        badgeText: '#475569',
+                        badgeBg: isDark ? '#374151' : '#F1F5F9',
+                        badgeText: isDark ? '#9CA3AF' : '#475569',
                         label,
-                        cardBg: '#F8FAFC',
+                        cardBg: isDark ? '#1E1E24' : '#F8FAFC',
                     };
             }
         }
@@ -189,7 +190,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                 badgeBg: `${AppColors_1.AppColors.skyBlue}15`,
                 badgeText: AppColors_1.AppColors.skyBlue,
                 label: 'ERROR',
-                cardBg: '#E6F2FF', // light sky blue background for analytics errors
+                cardBg: isDark ? 'rgba(96, 165, 250, 0.15)' : '#E6F2FF',
             };
         }
         switch (item.type) {
@@ -199,7 +200,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     badgeBg: `${AppColors_1.AppColors.errorColor}15`,
                     badgeText: AppColors_1.AppColors.errorColor,
                     label: 'ERROR',
-                    cardBg: '#FFF5F6', // light red background
+                    cardBg: isDark ? 'rgba(239, 68, 68, 0.15)' : '#FFF5F6',
                 };
             case 'warn':
                 return {
@@ -207,16 +208,16 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     badgeBg: `${AppColors_1.AppColors.lightOrange}15`,
                     badgeText: AppColors_1.AppColors.darkOrange || AppColors_1.AppColors.lightOrange,
                     label: 'WARN',
-                    cardBg: '#FFFDF6', // light yellow/orange background
+                    cardBg: isDark ? 'rgba(245, 158, 11, 0.15)' : '#FFFDF6',
                 };
             default:
                 if (isUserLog) {
                     return {
                         border: '#475569',
-                        badgeBg: '#E2E8F0',
-                        badgeText: '#334155',
+                        badgeBg: isDark ? '#374151' : '#E2E8F0',
+                        badgeText: isDark ? '#D1D5DB' : '#334155',
                         label: 'INFO',
-                        cardBg: '#F1F5F9', // slate-blue / steel-blue background for user log
+                        cardBg: isDark ? '#1E1E24' : '#F1F5F9',
                     };
                 }
                 return {
@@ -224,7 +225,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     badgeBg: `${AppColors_1.AppColors.purple}15`,
                     badgeText: AppColors_1.AppColors.purple,
                     label: 'INFO',
-                    cardBg: '#F9F5FF', // light purple background for general info
+                    cardBg: isDark ? 'rgba(167, 139, 250, 0.12)' : '#F9F5FF',
                 };
         }
     };
@@ -243,84 +244,138 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                 borderLeftWidth: 4,
                 borderLeftColor: colors.border,
                 backgroundColor: colors.cardBg,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingRight: 4,
             },
         ]}>
-        <react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={styles.cardHeader}>
-          <react_native_1.View style={styles.headerLeft}>
-            <CopyButton_1.default value={item.message} label="Log message"/>
-            <react_native_1.View style={[styles.badge, { backgroundColor: colors.badgeBg }]}>
-              <react_native_1.Text style={[styles.badgeText, { color: colors.badgeText }]}>
-                {colors.label}
-              </react_native_1.Text>
-            </react_native_1.View>
-            {isAnalyticsError && (<react_native_1.View style={[
+        
+        {/* Left Content Area */}
+        <react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={{ flex: 1, paddingRight: 6 }}>
+          
+          <react_native_1.View style={styles.cardHeader}>
+            <react_native_1.View style={styles.headerLeft}>
+              <CopyButton_1.default value={item.message} label="Log message"/>
+              <react_native_1.View style={[styles.badge, { backgroundColor: colors.badgeBg }]}>
+                <react_native_1.Text style={[styles.badgeText, { color: colors.badgeText }]}>
+                  {colors.label}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={[
+            styles.badge,
+            {
+                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+                borderColor: 'rgba(107, 78, 255, 0.2)',
+                borderWidth: 1,
+            },
+        ]}>
+                <react_native_1.Text style={[styles.badgeText, { color: '#6B4EFF' }]}>
+                  console.{('sourceMethod' in item ? item.sourceMethod : undefined) || item.type || 'log'}
+                </react_native_1.Text>
+              </react_native_1.View>
+              {jsonContent && (<react_native_1.View style={[
+                styles.badge,
+                {
+                    backgroundColor: 'rgba(13, 148, 136, 0.08)',
+                    borderColor: 'rgba(13, 148, 136, 0.18)',
+                    borderWidth: 1,
+                },
+            ]}>
+                  <react_native_1.Text style={[styles.badgeText, { color: '#0D9488' }]}>
+                    {Array.isArray(jsonContent.data) ? `Array[${jsonContent.data.length}]` : `Object{${Object.keys(jsonContent.data).length}}`}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+              {isAnalyticsError && (<react_native_1.View style={[
                 styles.badge,
                 { backgroundColor: `${AppColors_1.AppColors.skyBlue}15` },
             ]}>
-                <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.skyBlue }]}>
-                  Analytics
-                </react_native_1.Text>
-              </react_native_1.View>)}
-            {isUserLog && (<react_native_1.View style={[
+                  <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.skyBlue }]}>
+                    Analytics
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+              {isUserLog && (<react_native_1.View style={[
                 styles.badge,
                 {
-                    backgroundColor: '#F3F4F6',
-                    borderColor: '#D1D5DB',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
                     borderWidth: 1,
                 },
             ]}>
-                <react_native_1.Text style={[styles.badgeText, { color: '#4B5563' }]}>
-                  user-log
-                </react_native_1.Text>
-              </react_native_1.View>)}
-            {isWebView && (<react_native_1.View style={[
+                  <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.grayTextStrong }]}>
+                    user-log
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+              {isWebView && (<react_native_1.View style={[
                 styles.badge,
                 {
-                    backgroundColor: '#F1F5F9',
-                    borderColor: '#E2E8F0',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
                     borderWidth: 1,
                 },
             ]}>
-                <react_native_1.Text style={[styles.badgeText, { color: '#475569' }]}>
-                  webview
-                </react_native_1.Text>
-              </react_native_1.View>)}
-            <react_native_1.Text style={styles.serialNumber}>#{item.id + 1}</react_native_1.Text>
-            <react_native_1.Text style={styles.timestamp}>{formatTime(item.timestamp)}</react_native_1.Text>
-          </react_native_1.View>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            {caller && caller !== 'Unknown' && (<react_native_1.Text style={styles.callerText} numberOfLines={1} ellipsizeMode="middle">
+                  <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.grayText }]}>
+                    webview
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+              <react_native_1.Text style={[styles.serialNumber, { color: AppColors_1.AppColors.grayTextWeak }]}>#{item.id + 1}</react_native_1.Text>
+              <react_native_1.Text style={[styles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>{formatTime(item.timestamp)}</react_native_1.Text>
+            </react_native_1.View>
+            
+            {caller && caller !== 'Unknown' && (<react_native_1.Text style={[styles.callerText, { color: AppColors_1.AppColors.grayTextWeak, marginRight: 4 }]} numberOfLines={1} ellipsizeMode="middle">
                 {caller.split('/').pop() || caller}
               </react_native_1.Text>)}
-            <react_native_1.View style={{ transform: [{ rotate: expanded ? '180deg' : '0deg' }] }}>
-              <NetworkIcons_1.ChevronIcon size={14} color={AppColors_1.AppColors.grayTextWeak}/>
-            </react_native_1.View>
           </react_native_1.View>
+
+          <react_native_1.View style={[styles.cardBody, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.dividerColor }]}>
+            {jsonContent ? (<>
+                {jsonContent.header ? (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
+                    {getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, numLines)}
+                  </react_native_1.Pressable>) : null}
+                {expanded ? (<react_native_1.View style={[styles.jsonContainer, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.dividerColor }]}>
+                    <JsonViewer_1.default data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
+                  </react_native_1.View>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={[styles.jsonPreviewContainer, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.dividerColor }]}>
+                    <HighlightText_1.default text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={[styles.jsonPreviewText, { color: AppColors_1.AppColors.primaryBlack }]} highlightStyle={styles.highlight} detectLinks={true}/>
+                  </react_native_1.Pressable>)}
+              </>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
+                {getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, numLines)}
+              </react_native_1.Pressable>)}
+            {hasLongMessage && (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
+                <react_native_1.Text style={styles.seeMoreText}>
+                  {expanded ? 'See Less' : 'See More'}
+                </react_native_1.Text>
+              </react_native_1.Pressable>)}
+          </react_native_1.View>
+
+          {expanded && (<react_native_1.View style={[styles.cardFooter, { borderTopColor: AppColors_1.AppColors.dividerColor, gap: 6 }]}>
+              <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10.5, color: AppColors_1.AppColors.grayTextWeak }}>
+                  Length: {item.message.length} chars • Size: {encodeURIComponent(item.message).replace(/%[0-9A-F]{2}/g, 'a').length} bytes
+                </react_native_1.Text>
+              </react_native_1.View>
+              {caller && caller !== 'Unknown' && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
+                  <react_native_1.Text style={[styles.fullCallerText, { color: AppColors_1.AppColors.grayText, flex: 1, marginRight: 8 }]} numberOfLines={2}>
+                    Caller: {caller}
+                  </react_native_1.Text>
+                  <CopyButton_1.default value={caller} label="Caller stack frame"/>
+                </react_native_1.View>)}
+            </react_native_1.View>)}
         </react_native_1.Pressable>
 
-        <react_native_1.View style={styles.cardBody}>
-          {jsonContent ? (<>
-              {jsonContent.header ? (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
-                  {getLogMessageWithBadges(jsonContent.header, searchStr, styles.messageText, styles.highlight, numLines)}
-                </react_native_1.Pressable>) : null}
-              {expanded ? (<react_native_1.View style={styles.jsonContainer}>
-                  <JsonViewer_1.default data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
-                </react_native_1.View>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={styles.jsonPreviewContainer}>
-                  <HighlightText_1.default text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={styles.jsonPreviewText} highlightStyle={styles.highlight} detectLinks={true}/>
-                </react_native_1.Pressable>)}
-            </>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
-              {getLogMessageWithBadges(item.message, searchStr, styles.messageText, styles.highlight, numLines)}
-            </react_native_1.Pressable>)}
-          {hasLongMessage && (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
-              <react_native_1.Text style={styles.seeMoreText}>
-                {expanded ? 'See Less' : 'See More'}
-              </react_native_1.Text>
-            </react_native_1.Pressable>)}
-        </react_native_1.View>
+        {/* Right Isolated Chevron Area */}
+        <react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={{
+            width: 28,
+            alignItems: 'center',
+            justifyContent: 'center',
+            alignSelf: expanded ? 'flex-start' : 'center',
+            marginTop: expanded ? 8 : 0,
+            height: expanded ? 32 : undefined,
+        }} hitSlop={12}>
+          <react_native_1.View style={{ transform: [{ rotate: expanded ? '180deg' : '0deg' }] }}>
+            <NetworkIcons_1.ChevronIcon size={16} color={AppColors_1.AppColors.grayTextWeak}/>
+          </react_native_1.View>
+        </react_native_1.Pressable>
 
-        {caller && caller !== 'Unknown' && expanded && (<react_native_1.View style={styles.cardFooter}>
-            <react_native_1.Text style={styles.fullCallerText}>Caller: {caller}</react_native_1.Text>
-          </react_native_1.View>)}
       </react_native_1.View>
     </react_native_1.View>);
 });
@@ -353,7 +408,9 @@ const styles = react_native_1.StyleSheet.create({
     headerLeft: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 8,
+        flexWrap: 'wrap',
+        gap: 6,
+        flex: 1,
     },
     badge: {
         paddingHorizontal: 6,

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

@@ -1,7 +1,8 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, }: {
+declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
+    defaultExpandDepth?: number;
 }) => React.JSX.Element;
 export default JsonViewer;

package/dist/commonjs/components/JsonViewer.js

@@ -9,10 +9,10 @@ const react_native_1 = require("react-native");
 const TreeNode_1 = __importDefault(require("./TreeNode"));
 // Stylesheet
 const styles_1 = __importDefault(require("../styles"));
-const JsonViewer = ({ data, search, forceOpen, }) => {
+const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, }) => {
     return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles_1.default.codeBlockScroll}>
       <react_native_1.View style={styles_1.default.codeBlock}>
-        <TreeNode_1.default data={data} search={search} forceOpen={forceOpen}/>
+        <TreeNode_1.default data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>
       </react_native_1.View>
     </react_native_1.ScrollView>);
 };

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

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

package/dist/commonjs/components/MetaAccordion.js

@@ -16,8 +16,9 @@ const NetworkIcons_1 = require("./NetworkIcons");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 const styles_1 = __importDefault(require("../styles"));
-const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) => {
-    const { toggleOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(true, 400, 260);
+const AppFonts_1 = require("../styles/AppFonts");
+const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
+    const { toggleOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(true, 400, 390);
     const isFailed = status === 0 || status == null;
     return (<react_native_1.View style={styles_1.default.metaContainer}>
       <react_native_1.Pressable onPress={toggleOpen} hitSlop={12}>
@@ -44,6 +45,26 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </react_native_1.Text>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
+          
+          <react_native_1.View style={styles_1.default.metaRow}>
+            <react_native_1.View style={styles_1.default.metaLabelRow}>
+              <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              <react_native_1.Text style={styles_1.default.metaLabel}>Method</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={[
+            styles_1.default.statusChip,
+            {
+                borderColor: 'rgba(107, 78, 255, 0.25)',
+                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+            }
+        ]}>
+              <react_native_1.Text style={[styles_1.default.statusText, { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                {method || 'GET'}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.metaDivider}/>
+
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.StatusIcon color={AppColors_1.AppColors.grayTextWeak}/>
@@ -69,6 +90,16 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </react_native_1.View>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
+
+          <react_native_1.View style={styles_1.default.metaRow}>
+            <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}>Content Type</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={styles_1.default.metaValue}>{contentType || 'application/json'}</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.metaDivider}/>
+
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
@@ -99,6 +130,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </react_native_1.View>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
+          
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.grayTextWeak}/>
@@ -106,6 +138,17 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </react_native_1.View>
             <react_native_1.Text style={styles_1.default.metaValue}>{size}</react_native_1.Text>
           </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>
+            <react_native_1.Text selectable={true} numberOfLines={3} ellipsizeMode="tail" style={[styles_1.default.metaValue, { fontSize: 11.5, color: AppColors_1.AppColors.grayTextWeak, flex: 1, textAlign: 'right', lineHeight: 16 }]}>
+              {url || '—'}
+            </react_native_1.Text>
+          </react_native_1.View>
         </react_native_1.View>
       </react_native_1.Animated.View>
     </react_native_1.View>);

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

@@ -35,3 +35,10 @@ export declare const DebugIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const SunIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const MoonIcon: ({ color, size }: any) => React.JSX.Element;
 export { BrandCircleIcon } from './BrandCircleIcon';
+export { BrandSquareIcon } from './BrandSquareIcon';
+export declare const HtmlIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const CssIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const JsIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const EyeIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const SettingsIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const FolderIcon: ({ color, size }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -289,3 +289,44 @@ const MoonIcon = ({ color = '#FFFFFF', size = 16 }) => {
 exports.MoonIcon = MoonIcon;
 var BrandCircleIcon_1 = require("./BrandCircleIcon");
 Object.defineProperty(exports, "BrandCircleIcon", { enumerable: true, get: function () { return BrandCircleIcon_1.BrandCircleIcon; } });
+var BrandSquareIcon_1 = require("./BrandSquareIcon");
+Object.defineProperty(exports, "BrandSquareIcon", { enumerable: true, get: function () { return BrandSquareIcon_1.BrandSquareIcon; } });
+const HtmlIcon = ({ color = AppColors_1.AppColors.grayTextWeak, 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="M17.5 8.5L21 12l-3.5 3.5M6.5 8.5L3 12l3.5 3.5M14 4.5l-4 15" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.HtmlIcon = HtmlIcon;
+const CssIcon = ({ color = AppColors_1.AppColors.grayTextWeak, 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 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.CssIcon = CssIcon;
+const JsIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Rect x="3" y="3" width="18" height="18" rx="4" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Path d="M8 12v2.5a1.5 1.5 0 003 0V11M13 15.5a1 1 0 001.5.8h.5a1 1 0 001-1v-.5a1 1 0 00-1-1h-1a1 1 0 01-1-1v-.5a1 1 0 011-1h.5a1 1 0 011.5.8" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.JsIcon = JsIcon;
+const EyeIcon = ({ color = AppColors_1.AppColors.grayTextWeak, 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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Circle cx="12" cy="12" r="3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.EyeIcon = EyeIcon;
+const SettingsIcon = ({ color = AppColors_1.AppColors.grayTextWeak, 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="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Circle cx="12" cy="12" r="3" stroke={color} strokeWidth="2"/>
+    </react_native_svg_1.default>);
+};
+exports.SettingsIcon = SettingsIcon;
+const FolderIcon = ({ color = AppColors_1.AppColors.grayTextWeak, 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="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>);
+};
+exports.FolderIcon = FolderIcon;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare const ReduxTreeView: ({ state, lastActionMap, search, }: {
+    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;
+    search?: string;
+}) => React.JSX.Element;