react-native-inapp-inspector 1.1.16 → 1.1.18

package/dist/commonjs/styles/AppColors.js

@@ -2,70 +2,70 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateAppColorsTheme = exports.AppColors = exports.getThemeColors = void 0;
 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',
@@ -79,86 +79,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',
@@ -166,67 +166,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',
     ],
 };
 const getThemeColors = (isDark) => {

package/dist/commonjs/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/commonjs/styles/index.js

@@ -68,6 +68,20 @@ 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_1.AppFonts.interBold,
+        fontSize: 9.5,
+        letterSpacing: 0.5,
+    },
     headerDetailCenter: {
         alignItems: 'center',
         justifyContent: 'center',

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

@@ -1,9 +1,9 @@
-export type ActiveTab = 'apis' | 'analytics' | 'logs' | 'redux';
+export type ActiveTab = 'apis' | 'analytics' | 'logs' | 'redux' | 'bundle' | 'performance';
 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' | 'performance' | null;
 export type SettingsSubTab = 'module' | 'ui';
 export type LogFilter = 'all' | 'info' | 'warn' | 'error' | 'user-log' | 'analytics';

package/dist/commonjs/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/dist/esm/components/AnimatedEntrance.js

@@ -1,6 +1,9 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated } from 'react-native';
+import { Animated, Platform, View } from 'react-native';
 const AnimatedEntrance = React.memo(function AnimatedEntrance({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) {
+    if (Platform.OS === 'android') {
+        return <View style={style}>{children}</View>;
+    }
     const progress = useRef(new Animated.Value(0)).current;
     useEffect(() => {
         progress.setValue(0);

package/dist/esm/components/AppHeaderLogo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ImageSourcePropType } from 'react-native';
+interface AppHeaderLogoProps {
+    size?: number;
+    customIcon?: ImageSourcePropType | null;
+}
+export declare const AppHeaderLogo: React.FC<AppHeaderLogoProps>;
+export default AppHeaderLogo;

package/dist/esm/components/AppHeaderLogo.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Image, Platform, StyleSheet, View, } from 'react-native';
+import BrandSquareIcon from './BrandSquareIcon';
+import { AppColors } from '../styles/AppColors';
+export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
+    const [loadError, setLoadError] = useState(false);
+    // 1. If customIcon is explicitly provided, render it directly
+    if (customIcon) {
+        return (<View style={[logoStyles.container, { width: size, height: size }]}>
+        <Image source={customIcon} style={{ width: size - 4, height: size - 4, borderRadius: 10 }} resizeMode="cover"/>
+      </View>);
+    }
+    // 2. Dynamically query installed native app icon (AppIcon on iOS, ic_launcher on Android)
+    if (!loadError && Platform.OS !== 'web') {
+        const nativeSource = Platform.select({
+            ios: { uri: 'AppIcon' },
+            android: { uri: 'ic_launcher' },
+            default: { uri: 'AppIcon' },
+        });
+        return (<View style={[logoStyles.container, { width: size, height: size }]}>
+        <Image source={nativeSource} style={{ width: size - 4, height: size - 4, borderRadius: 10 }} resizeMode="cover" onError={() => setLoadError(true)}/>
+      </View>);
+    }
+    // 3. Fallback: Inspector's Signature Owl Brand Logo
+    return (<View style={[logoStyles.container, { width: size, height: size }]}>
+      <BrandSquareIcon size={size - 4}/>
+    </View>);
+};
+const logoStyles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 12,
+        backgroundColor: `${AppColors.white}24`,
+        borderWidth: 1.5,
+        borderColor: `${AppColors.white}4D`,
+        overflow: 'hidden',
+        shadowColor: AppColors.primaryBlack,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+});
+export default AppHeaderLogo;

package/dist/esm/components/Inspector/BundleTab.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+export type BundleSubTab = 'overview' | 'files' | 'packages' | 'media' | 'optimizer';
+export type FileTypeCategory = 'image' | 'typescript' | 'javascript' | 'font' | 'json';
+export interface BundleFileItem {
+    id: string;
+    name: string;
+    path: string;
+    ext: string;
+    category: FileTypeCategory;
+    sizeKb: number;
+    meta: string;
+    color: string;
+    status?: 'optimal' | 'warning' | 'info';
+    advice?: string;
+    previewUri?: string;
+    isConsumed?: boolean;
+}
+export interface BundlePackageItem {
+    id: string;
+    name: string;
+    version: string;
+    sizeKb: number;
+    percentage: number;
+    type: 'direct' | 'peer' | 'transitive';
+    category: 'core' | 'navigation' | 'network' | 'ui' | 'utils';
+    color: string;
+    description: string;
+    logoUri?: string;
+    latestVersion?: string;
+    isDeprecated?: boolean;
+    deprecationReason?: string;
+    lastActive?: string;
+    npmUrl?: string;
+}
+export interface TreeNode {
+    id: string;
+    name: string;
+    fullPath: string;
+    isFolder: boolean;
+    fileItem?: BundleFileItem;
+    sizeKb: number;
+    fileCount: number;
+    children: TreeNode[];
+}
+declare const BundleTab: React.MemoExoticComponent<() => React.JSX.Element>;
+export default BundleTab;