react-native-inapp-inspector 1.1.15 → 1.1.17

package/dist/esm/styles/AppColors.js

@@ -1,68 +1,68 @@
 const LightColors = {
-    // ─── Core (theme-switching) ───
+    // ─── Core (Thai Airways Royal Palette) ───
     primaryLight: '#FFFFFF',
-    purple: '#684B9B',
-    purpleShade50: '#F9F5FF',
-    offerPurple: '#F246CB',
-    grayBorderSecondary: '#DFE0EB',
-    grayBackground: '#F9F9FC',
-    grayText: '#6A6D87',
-    grayTextWeak: '#9596AC',
-    greenColor: '#55CD7D',
-    graySurface: '#DFE0EB',
-    skyBlue: '#007AFF',
-    primaryBlack: '#2C3059',
-    grayTextStrong: '#2C3059',
-    dividerColor: '#EBECEF',
-    warningIconGold: '#BFA252',
-    shadowColorString: '#101828',
-    errorColor: '#FF2E57',
-    lightOrange: '#FFC738',
-    darkOrange: '#996F04',
-    successGreen: '#55CD7D',
-    purpleShade700: '#6941C6',
-    greenStatus: '#D0F8DE',
-    greenBaggageText: '#159E44',
-    paleYellow: '#F9DB7C',
-    // ─── Brand / UI (fixed) ───
+    purple: '#5C2D91', // Thai Royal Purple
+    purpleShade50: '#F8F4FC', // Orchid Silk Tint
+    offerPurple: '#9B2677', // Thai Orchid Magenta
+    grayBorderSecondary: '#E2DFEB',
+    grayBackground: '#F8F7FB', // Pearl White Surface
+    grayText: '#625D73',
+    grayTextWeak: '#8F8A9E',
+    greenColor: '#10B981',
+    graySurface: '#E2DFEB',
+    skyBlue: '#2563EB',
+    primaryBlack: '#211B30', // Royal Midnight Dark
+    grayTextStrong: '#211B30',
+    dividerColor: '#EBE7F2',
+    warningIconGold: '#C5A059', // Thai Orchid Gold
+    shadowColorString: '#211B30',
+    errorColor: '#E11D48',
+    lightOrange: '#E5C158', // Thai Warm Gold Light
+    darkOrange: '#B89758', // Thai Silk Gold
+    successGreen: '#10B981',
+    purpleShade700: '#481E78', // Thai Deep Violet
+    greenStatus: '#D1FAE5',
+    greenBaggageText: '#059669',
+    paleYellow: '#F7E9C4', // Thai Pale Gold
+    // ─── Brand / UI ───
     white: '#FFFFFF',
     black: '#000000',
-    brandPurple: '#6B4EFF',
-    liveGreen: '#4ADE80',
-    firebaseOrange: '#E07B1A',
+    brandPurple: '#4B1B7D', // Iconic Thai Airways Purple
+    liveGreen: '#10B981',
+    firebaseOrange: '#D97706',
     greenA400: '#00E676',
-    // ─── Code / slate (fixed) ───
-    slate900: '#0F172A',
-    slate700: '#334155',
-    slate600: '#475569',
-    slate500: '#64748B',
-    slate400: '#94A3B8',
-    slate200: '#E2E8F0',
-    slate100: '#F1F5F9',
-    slate50: '#F8FAFC',
-    gray700: '#374151',
-    gray300: '#D1D5DB',
+    // ─── Code / Slate ───
+    slate900: '#171226',
+    slate700: '#332C4A',
+    slate600: '#4D446B',
+    slate500: '#6E648D',
+    slate400: '#948BAF',
+    slate200: '#E4DFEE',
+    slate100: '#F3F0F8',
+    slate50: '#F9F7FC',
+    gray700: '#373147',
+    gray300: '#D5D0E0',
     highlightYellow: '#FDE047',
     yellowHighlight: '#FFE44D',
-    // ─── Status / syntax (fixed) ───
+    // ─── Status / Syntax ───
     teal600: '#0D9488',
     cyan600: '#0891B2',
     sky600: '#0284C7',
     blue500: '#3B82F6',
     blue600: '#2563EB',
-    blue700: '#1565C0',
-    blue800: '#1976D2',
+    blue700: '#1D4ED8',
+    blue800: '#1E40AF',
     indigo600: '#4F46E5',
     violet600: '#7C3AED',
     violet500: '#8B5CF6',
-    purpleText: '#7B1FA2',
-    pink600: '#DB2777',
+    purpleText: '#5C2D91',
+    pink600: '#9B2677',
     rose600: '#E11D48',
     orange600: '#EA580C',
-    amber500: '#F59E0B',
-    amber600: '#EAB308',
-    amber700: '#D97706',
-    amber800: '#854D0E',
+    amber500: '#C5A059',
+    amber600: '#B89758',
+    amber700: '#A17D3B',
+    amber800: '#785A1D',
     green500: '#22C55E',
     green600: '#16A34A',
     green700: '#15803D',
@@ -76,86 +76,86 @@ const LightColors = {
     googleGreen: '#34A853',
     googleOrange: '#F57C00',
     googleRed: '#E53935',
-    googlePurple: '#9C27B0',
+    googlePurple: '#5C2D91',
     googleTeal: '#00897B',
-    // ─── Tint backgrounds / borders (theme-aware) ───
-    errorCardBg: '#FFF5F6',
-    warnCardBg: '#FFFDF6',
-    blueTintBg: '#E6F2FF',
-    purpleTintBg: '#F4EBFF',
-    purpleTint2: '#EAE5FF',
-    roseBg: '#FFE4E6',
-    roseBorder: '#FCC2D7',
-    errorBorder: '#FCA5A5',
-    amberBg: '#FEF3C7',
-    amberBorder: '#FDE68A',
+    // ─── Tint Backgrounds / Borders (Theme-Aware) ───
+    errorCardBg: '#FFF1F3',
+    warnCardBg: '#FDFBF4',
+    blueTintBg: '#EFF6FF',
+    purpleTintBg: '#F6F0FA',
+    purpleTint2: '#EFE7F7',
+    roseBg: '#FDF2F8',
+    roseBorder: '#FBCFE8',
+    errorBorder: '#FECDD3',
+    amberBg: '#FDF8EE',
+    amberBorder: '#E8D6AC',
     emeraldBg: '#ECFDF5',
     emeraldBorder: '#A7F3D0',
-    blueBg: '#E3F2FD',
-    blueBorder: '#BBDEFB',
-    greenBg: '#E8F5E9',
-    greenBorder: '#C8E6C9',
-    purpleBg: '#F3E5F5',
-    purpleBorder: '#E1BEE7',
-    greyBg: '#F5F5F5',
-    greyBorder: '#E0E0E0',
-    paperBg: '#FAF9F6',
-    contentBg: '#F8F9FB',
-    // ─── Domain colors (fixed) ───
+    blueBg: '#EFF6FF',
+    blueBorder: '#BFDBFE',
+    greenBg: '#F0FDF4',
+    greenBorder: '#BBF7D0',
+    purpleBg: '#F6F0FA',
+    purpleBorder: '#E4D5F2',
+    greyBg: '#F5F4F8',
+    greyBorder: '#E3DFEC',
+    paperBg: '#FBF9FC',
+    contentBg: '#F8F7FB',
+    // ─── Domain Colors (Thai Airways Themed) ───
     domainColors: [
-        '#1a5276',
-        '#8e44ad',
-        '#1e8449',
-        '#c0392b',
-        '#d35400',
-        '#d68910',
-        '#16a085',
-        '#27ae60',
-        '#2c3e50',
-        '#c2185b',
+        '#5C2D91',
+        '#9B2677',
+        '#C5A059',
+        '#4B1B7D',
+        '#0D9488',
+        '#2563EB',
+        '#B89758',
+        '#059669',
+        '#3B1359',
+        '#D1208A',
     ],
 };
 const DarkColors = {
-    primaryLight: '#1E1E24',
-    purple: '#A78BFA',
-    purpleShade50: '#2E224E',
+    primaryLight: '#1C1628', // Thai Dark Card
+    purple: '#B68FE8', // Luminous Thai Orchid
+    purpleShade50: '#2A1C3E',
     offerPurple: '#F472B6',
-    grayBorderSecondary: '#374151',
-    grayBackground: '#121214',
-    grayText: '#9CA3AF',
-    grayTextWeak: '#6B7280',
+    grayBorderSecondary: '#362C4E',
+    grayBackground: '#130F1F', // Thai Airways Midnight Sky
+    grayText: '#A197B8',
+    grayTextWeak: '#756C8C',
     greenColor: '#34D399',
-    graySurface: '#374151',
+    graySurface: '#362C4E',
     skyBlue: '#60A5FA',
-    primaryBlack: '#F3F4F6',
-    grayTextStrong: '#F3F4F6',
-    dividerColor: '#1F2937',
-    warningIconGold: '#F59E0B',
+    primaryBlack: '#F7F5FC',
+    grayTextStrong: '#F7F5FC',
+    dividerColor: '#2B2240',
+    warningIconGold: '#E5C158', // Thai Luminous Gold
     shadowColorString: '#000000',
-    errorColor: '#EF4444',
-    lightOrange: '#FCD34D',
-    darkOrange: '#D97706',
+    errorColor: '#F87171',
+    lightOrange: '#FDE68A',
+    darkOrange: '#D4AF37',
     successGreen: '#34D399',
-    purpleShade700: '#8B5CF6',
+    purpleShade700: '#8E4DBE',
     greenStatus: '#064E3B',
     greenBaggageText: '#34D399',
     paleYellow: '#78350F',
     white: '#FFFFFF',
     black: '#000000',
-    brandPurple: '#6B4EFF',
-    liveGreen: '#4ADE80',
-    firebaseOrange: '#E07B1A',
+    brandPurple: '#7B3DB8',
+    liveGreen: '#34D399',
+    firebaseOrange: '#F59E0B',
     greenA400: '#00E676',
-    slate900: '#0F172A',
-    slate700: '#334155',
-    slate600: '#475569',
-    slate500: '#64748B',
-    slate400: '#94A3B8',
-    slate200: '#E2E8F0',
-    slate100: '#F1F5F9',
-    slate50: '#F8FAFC',
-    gray700: '#374151',
-    gray300: '#D1D5DB',
+    slate900: '#0B0813',
+    slate700: '#261F38',
+    slate600: '#3D3357',
+    slate500: '#5C4F7F',
+    slate400: '#8E82B0',
+    slate200: '#C7BEDE',
+    slate100: '#E4DFEE',
+    slate50: '#F3F0F8',
+    gray700: '#312847',
+    gray300: '#C7BEDE',
     highlightYellow: '#FDE047',
     yellowHighlight: '#FFE44D',
     teal600: '#0D9488',
@@ -163,67 +163,67 @@ const DarkColors = {
     sky600: '#0284C7',
     blue500: '#3B82F6',
     blue600: '#2563EB',
-    blue700: '#1565C0',
-    blue800: '#1976D2',
-    indigo600: '#4F46E5',
-    violet600: '#7C3AED',
-    violet500: '#8B5CF6',
-    purpleText: '#7B1FA2',
-    pink600: '#DB2777',
-    rose600: '#E11D48',
-    orange600: '#EA580C',
-    amber500: '#F59E0B',
-    amber600: '#EAB308',
-    amber700: '#D97706',
-    amber800: '#854D0E',
+    blue700: '#1D4ED8',
+    blue800: '#1E40AF',
+    indigo600: '#6366F1',
+    violet600: '#8B5CF6',
+    violet500: '#A78BFA',
+    purpleText: '#C084FC',
+    pink600: '#F472B6',
+    rose600: '#FB7185',
+    orange600: '#FB923C',
+    amber500: '#E5C158',
+    amber600: '#D4AF37',
+    amber700: '#C5A059',
+    amber800: '#B89758',
     green500: '#22C55E',
     green600: '#16A34A',
     green700: '#15803D',
     green800: '#166534',
     emerald500: '#10B981',
     emerald600: '#059669',
-    grey600: '#616161',
-    redErrorText: '#991B1B',
+    grey600: '#756C8C',
+    redErrorText: '#FCA5A5',
     materialGreen: '#2E7D32',
-    googleBlue: '#4285F4',
-    googleGreen: '#34A853',
-    googleOrange: '#F57C00',
-    googleRed: '#E53935',
-    googlePurple: '#9C27B0',
-    googleTeal: '#00897B',
-    errorCardBg: '#3B1D23',
-    warnCardBg: '#3B341C',
-    blueTintBg: '#1C2F4A',
-    purpleTintBg: '#2E2447',
-    purpleTint2: '#2B2540',
-    roseBg: '#3B1D21',
-    roseBorder: '#7F2D44',
-    errorBorder: '#7F2D36',
-    amberBg: '#3B3017',
-    amberBorder: '#7F6A2D',
-    emeraldBg: '#16302B',
-    emeraldBorder: '#2D6A52',
-    blueBg: '#16263D',
-    blueBorder: '#2D4A73',
-    greenBg: '#16271A',
-    greenBorder: '#2D5C33',
-    purpleBg: '#2B1E31',
-    purpleBorder: '#5A3872',
-    greyBg: '#1E1E24',
-    greyBorder: '#374151',
-    paperBg: '#201F1B',
-    contentBg: '#16181D',
+    googleBlue: '#60A5FA',
+    googleGreen: '#34D399',
+    googleOrange: '#FBBF24',
+    googleRed: '#F87171',
+    googlePurple: '#C084FC',
+    googleTeal: '#2DD4BF',
+    errorCardBg: '#34151B',
+    warnCardBg: '#342B16',
+    blueTintBg: '#15243B',
+    purpleTintBg: '#281B3B',
+    purpleTint2: '#32224A',
+    roseBg: '#341626',
+    roseBorder: '#782352',
+    errorBorder: '#782330',
+    amberBg: '#342914',
+    amberBorder: '#785E22',
+    emeraldBg: '#122D25',
+    emeraldBorder: '#236952',
+    blueBg: '#13243D',
+    blueBorder: '#234978',
+    greenBg: '#122D1B',
+    greenBorder: '#236939',
+    purpleBg: '#2D1B40',
+    purpleBorder: '#62358F',
+    greyBg: '#1C1628',
+    greyBorder: '#362C4E',
+    paperBg: '#181224',
+    contentBg: '#130F1F',
     domainColors: [
-        '#1a5276',
-        '#8e44ad',
-        '#1e8449',
-        '#c0392b',
-        '#d35400',
-        '#d68910',
-        '#16a085',
-        '#27ae60',
-        '#2c3e50',
-        '#c2185b',
+        '#B68FE8',
+        '#F472B6',
+        '#E5C158',
+        '#8E4DBE',
+        '#2DD4BF',
+        '#60A5FA',
+        '#D4AF37',
+        '#34D399',
+        '#A78BFA',
+        '#FB7185',
     ],
 };
 export const getThemeColors = (isDark) => {

package/dist/esm/styles/index.d.ts

@@ -39,6 +39,20 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         letterSpacing: number;
         paddingBottom: number;
     };
+    envBadge: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+        borderWidth: number;
+        alignItems: string;
+        justifyContent: string;
+        marginBottom: number;
+    };
+    envBadgeText: {
+        fontFamily: string;
+        fontSize: number;
+        letterSpacing: number;
+    };
     headerDetailCenter: {
         alignItems: string;
         justifyContent: string;

package/dist/esm/styles/index.js

@@ -32,6 +32,20 @@ export const getRawStyles = (colors) => ({
         letterSpacing: 0.3,
         paddingBottom: 4,
     },
+    envBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 6,
+        borderWidth: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 4,
+    },
+    envBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        letterSpacing: 0.5,
+    },
     headerDetailCenter: {
         alignItems: 'center',
         justifyContent: 'center',

package/dist/esm/types/enums.d.ts

@@ -1,9 +1,9 @@
-export type ActiveTab = 'apis' | 'analytics' | 'logs' | 'redux';
+export type ActiveTab = 'apis' | 'analytics' | 'logs' | 'redux' | 'bundle';
 export type Method = 'ALL' | 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 export type StatusFilter = 'ALL' | '2xx' | '3xx' | '4xx' | '5xx' | 'Failed';
 export type SortOrder = 'newest' | 'oldest';
 export type LocalFilter = 'success' | 'failed' | 'loading';
 export type ModalAnimationType = 'slide' | 'fade' | 'none';
-export type SettingsPage = 'main' | 'apis' | 'logs' | 'analytics' | 'redux' | null;
+export type SettingsPage = 'main' | 'apis' | 'logs' | 'analytics' | 'redux' | 'bundle' | null;
 export type SettingsSubTab = 'module' | 'ui';
 export type LogFilter = 'all' | 'info' | 'warn' | 'error' | 'user-log' | 'analytics';

package/dist/esm/types/interfaces.d.ts

@@ -55,6 +55,7 @@ export interface ReduxHistoryEntry {
     type: string;
     payload: any;
     timestamp: string;
+    updatedAt?: number;
     affectedSlices: string[];
     prevState?: any;
     nextState?: any;
@@ -86,6 +87,8 @@ export interface NetworkInspectorProps {
     isEnabled?: boolean;
     storage?: InspectorStorage;
     navigationRef?: any;
+    appIcon?: any;
+    environment?: 'DEV' | 'UAT' | 'PrePROD' | 'PROD' | 'QA' | 'Staging' | string;
 }
 export interface NavigationTrackerProps {
     onStateChange: (state: any) => void;
@@ -96,6 +99,8 @@ export interface InspectorContextValue {
     closeModal: () => void;
     isReady: boolean;
     isEnabled: boolean;
+    appIcon?: any;
+    environment?: string;
     modalHeightPercent: number;
     setModalHeightPercent: React.Dispatch<React.SetStateAction<number>>;
     modalAnimationType: 'slide' | 'fade' | 'none';
@@ -198,6 +203,12 @@ export interface InspectorContextValue {
     reduxLastActionMap: Record<string, any>;
     reduxSearch: string;
     setReduxSearch: React.Dispatch<React.SetStateAction<string>>;
+    selectedReduxSlice: string | null;
+    setSelectedReduxSlice: React.Dispatch<React.SetStateAction<string | null>>;
+    selectedReduxAction: any | null;
+    setSelectedReduxAction: React.Dispatch<React.SetStateAction<any | null>>;
+    reduxActiveSubTab: 'state' | 'timeline';
+    setReduxActiveSubTab: React.Dispatch<React.SetStateAction<'state' | 'timeline'>>;
     settingsActiveSubTab: SettingsSubTab;
     setSettingsActiveSubTab: React.Dispatch<React.SetStateAction<SettingsSubTab>>;
     defaultTab: ActiveTab;

package/example/App.tsx

@@ -458,6 +458,39 @@ function HomeScreen({ navigation }: any) {
               Trigger Log, Warn & Error Logs
             </Text>
           </TouchableOpacity>
+
+          <View style={[styles.btnRow, {marginTop: 8}]}>
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#8B5CF6' }]}
+              onPress={() => {
+                console.log(
+                  'Multi-argument payload inspection:',
+                  { userId: 101, username: 'venkatesh', role: 'Lead Architect' },
+                  ['permissions.read', 'permissions.write', 'permissions.admin'],
+                  { device: 'iPhone 15 Pro', os: 'iOS 18.0', battery: '92%' },
+                );
+              }}
+            >
+              <Text style={[styles.btnText, { color: '#8B5CF6' }]}>
+                Multi-Arg Log
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#EF4444' }]}
+              onPress={() => {
+                try {
+                  throw new TypeError('Cannot read properties of undefined (reading "authToken")');
+                } catch (err) {
+                  console.error(err);
+                }
+              }}
+            >
+              <Text style={[styles.btnText, { color: '#EF4444' }]}>
+                Error Stack Log
+              </Text>
+            </TouchableOpacity>
+          </View>
         </View>
 
         <View style={styles.panelCard}>
@@ -517,8 +550,31 @@ function HomeScreen({ navigation }: any) {
 
         <View style={styles.panelCard}>
           <Text style={styles.panelHeader}>⚙️ REDUX & STATE ACTIONS</Text>
+          <View style={styles.btnRow}>
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#10B981' }]}
+              onPress={handleToggleSidebar}
+            >
+              <Text style={[styles.btnText, { color: '#10B981' }]}>
+                Toggle Sidebar
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#06B6D4' }]}
+              onPress={() => {
+                mockStore.dispatch({
+                  type: 'SET_THEME',
+                  payload: mockStore.getState().settings.theme === 'dark' ? 'light' : 'dark',
+                });
+              }}
+            >
+              <Text style={[styles.btnText, { color: '#06B6D4' }]}>
+                Toggle Theme
+              </Text>
+            </TouchableOpacity>
+          </View>
           <TouchableOpacity
-            style={[styles.fullWidthBtn, { backgroundColor: '#8B5CF6' }]}
+            style={[styles.fullWidthBtn, { backgroundColor: '#8B5CF6', marginTop: 8 }]}
             onPress={handleToggleSidebar}
           >
             <Text style={styles.fullWidthBtnText}>
@@ -685,7 +741,11 @@ function App() {
           </Stack.Navigator>
         </NavigationContainer>
         {/* Render inspector globally exactly once at the root level */}
-        <NetworkInspector navigationRef={navigationRef} />
+        <NetworkInspector
+          navigationRef={navigationRef}
+          appIcon={require('./assets/app_icon.png')}
+          environment="DEV"
+        />
       </ErrorBoundary>
     </SafeAreaProvider>
   );