react-native-inapp-inspector 2.2.8 → 2.3.0

package/dist/commonjs/index.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerComponentProfile = exports.getHermesMemoryStats = exports.measureAsync = exports.trackHeavyTask = exports.trackNavigationTransition = exports.trackComponentRender = exports.useNavigationProfiler = exports.useComponentProfiler = exports.usePerformanceTracker = exports.registerGAPlugin = exports.getEventCategory = exports.getLastActionForReducer = exports.clearActionHistory = exports.getActionHistory = exports.subscribeReduxState = exports.getReduxState = exports.inspectorReduxMiddleware = exports.connectReduxStore = exports.ErrorBoundary = exports.CrashTab = exports.computeCrashFingerprint = exports.recordUserActionBreadcrumb = exports.recordReduxBreadcrumb = exports.recordNetworkBreadcrumb = exports.recordNavigationBreadcrumb = exports.addCrashBreadcrumb = exports.recordCustomCrash = exports.parseCrashStackTrace = exports.exportCrashReport = exports.simulateTestCrash = exports.clearCrashRecords = exports.getCrashRecords = exports.emitCrashEvent = exports.subscribeCrashEvents = exports.setupGlobalCrashHandler = exports.getCollectionEnabled = exports.getDefaultEventParameters = exports.getCurrentUserId = exports.getCurrentUserProperties = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.addAxiosInterceptors = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
 exports.connectMMKV = exports.connectAsyncStorage = exports.BrandCircleIcon = exports.BrandSquareIcon = exports.prunePerformanceEvents = exports.getMaxPerformanceEventsLimit = exports.setMaxPerformanceEventsLimit = exports.pruneCrashRecords = exports.getMaxCrashLogsLimit = exports.pruneAnalyticsLogs = exports.getMaxAnalyticsLogsLimit = exports.setMaxAnalyticsLogsLimit = exports.pruneReduxHistory = exports.getMaxReduxHistoryLimit = exports.setMaxReduxHistoryLimit = exports.pruneConsoleLogs = exports.getMaxConsoleLogsLimit = exports.setMaxConsoleLogsLimit = exports.pruneNetworkLogs = exports.getMaxNetworkLogsLimit = exports.setMaxNetworkLogsLimit = exports.subscribeMemoryWarning = exports.pruneAllLogs = exports.setupMemoryWarningHandler = exports.isNativeModuleAvailable = exports.setNativeStorageItem = exports.getNativeStorageItem = exports.getNativeFpsMetrics = exports.stopNativeFpsMonitoring = exports.startNativeFpsMonitoring = exports.subscribeNativeDeviceShake = exports.subscribeNativeFloatingButtonPress = exports.setNativeFloatingButtonBadge = exports.hideNativeFloatingButton = exports.showNativeFloatingButton = exports.subscribeNativeCrashes = exports.enableNativeCrashProtection = exports.getNativeDeviceMetrics = exports.InspectCatch = exports.InspectTrackTime = exports.InspectLog = exports.generateFixSnippet = exports.getInitialPerformanceEvents = exports.getInitialRenderProfiles = exports.getPerformanceEvents = exports.subscribePerformanceEvents = exports.clearPerformanceEvents = exports.logPerformanceEvent = exports.getRenderProfiles = exports.subscribeRenderProfiles = void 0;
-exports.BreadcrumbType = exports.CrashFilterType = exports.CrashDetailSubTab = exports.CrashExportFormat = exports.CrashType = exports.PerformanceSubTab = exports.BundleSubTab = exports.DiffResultType = exports.StackFrameType = exports.GAEventCategory = exports.AnalyticsEventSource = exports.ConsoleLogType = exports.LogFilter = exports.SettingsSubTab = exports.SettingsPage = exports.ModalAnimationType = exports.LocalFilter = exports.SortOrder = exports.StatusFilter = exports.Method = exports.ActiveTab = exports.subscribeToStorageChanges = exports.clearStorageDriver = exports.removeStorageEntry = exports.setStorageEntry = exports.fetchStorageEntries = exports.getRegisteredMMKVInstanceIds = exports.isMMKVConnected = exports.isAsyncStorageConnected = void 0;
+exports.I18nextProvider = exports.setTranslations = exports.addTranslations = exports.setLanguage = exports.useTranslation = exports.i18n = exports.t = exports.updateAppColorsTheme = exports.getThemeColors = exports.setAppColors = exports.AppColors = exports.setAppFonts = exports.AppFonts = exports.BreadcrumbType = exports.CrashFilterType = exports.CrashDetailSubTab = exports.CrashExportFormat = exports.CrashType = exports.PerformanceSubTab = exports.BundleSubTab = exports.DiffResultType = exports.StackFrameType = exports.GAEventCategory = exports.AnalyticsEventSource = exports.ConsoleLogType = exports.LogFilter = exports.SettingsSubTab = exports.SettingsPage = exports.ModalAnimationType = exports.LocalFilter = exports.SortOrder = exports.StatusFilter = exports.Method = exports.ActiveTab = exports.subscribeToStorageChanges = exports.clearStorageDriver = exports.removeStorageEntry = exports.setStorageEntry = exports.fetchStorageEntries = exports.getRegisteredMMKVInstanceIds = exports.isMMKVConnected = exports.isAsyncStorageConnected = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const native_1 = require("@react-navigation/native");
@@ -224,8 +224,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         bundle: false,
         performance: false,
         crash: false,
-        device: true,
-        storage: true,
+        device: false,
+        storage: false,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = (0, react_1.useState)(100);
     const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = (0, react_1.useState)(75);
@@ -280,8 +280,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             bundle: false,
             performance: false,
             crash: false,
-            device: true,
-            storage: true,
+            device: false,
+            storage: false,
         });
         setDefaultTab('apis');
         setIsAutoRamLimitEnabled(true);
@@ -355,6 +355,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                         bundle: false,
                         performance: false,
                         crash: false,
+                        device: false,
+                        storage: false,
                     },
                     ...(saved.tabVisibility || {}),
                     apis: true,
@@ -580,12 +582,21 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const navigationContext = react_1.default.useContext(native_1.NavigationContext);
     const hasNavigationContext = navigationContext !== undefined;
     const currentRouteRef = (0, react_1.useRef)({
-        path: 'Navigators',
+        path: '',
         params: null,
     });
+    (0, react_1.useEffect)(() => {
+        (0, networkLogger_1.setRouteInfoProvider)(() => currentRouteRef.current);
+        return () => {
+            (0, networkLogger_1.setRouteInfoProvider)(null);
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         if (navState) {
-            currentRouteRef.current = (0, helpers_1.getNavigationInfo)(navState);
+            const info = (0, helpers_1.getNavigationInfo)(navState);
+            if (info?.path) {
+                currentRouteRef.current = info;
+            }
         }
     }, [navState]);
     (0, react_1.useEffect)(() => {
@@ -594,9 +605,22 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         const updateState = () => {
             try {
                 if (typeof navigationRef.isReady === 'function' && navigationRef.isReady()) {
+                    const currentRoute = typeof navigationRef.getCurrentRoute === 'function'
+                        ? navigationRef.getCurrentRoute()
+                        : null;
+                    if (currentRoute?.name) {
+                        currentRouteRef.current = {
+                            path: currentRoute.name,
+                            params: currentRoute.params || null,
+                        };
+                    }
                     const state = navigationRef.getRootState();
                     if (state) {
                         setNavState(state);
+                        const routeInfo = (0, helpers_1.getNavigationInfo)(state);
+                        if (routeInfo?.path) {
+                            currentRouteRef.current = routeInfo;
+                        }
                     }
                 }
             }
@@ -908,7 +932,9 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 if (freshIds.size > 0) {
                     freshIds.forEach(id => {
                         if (!logRouteMapRef.current.has(id)) {
-                            logRouteMapRef.current.set(id, currentRouteRef.current);
+                            const matchedLog = deduped.find(l => l.id === id);
+                            const resolvedRoute = matchedLog?.routeInfo || currentRouteRef.current;
+                            logRouteMapRef.current.set(id, resolvedRoute);
                         }
                     });
                     setNewLogIds(freshIds);
@@ -921,6 +947,12 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 const deduped = (0, helpers_1.deduplicateLogs)(raw);
                 const incoming = new Set(deduped.map(l => l.id));
                 prevLogIdsRef.current = incoming;
+                deduped.forEach(l => {
+                    if (!logRouteMapRef.current.has(l.id)) {
+                        const resolvedRoute = l?.routeInfo || currentRouteRef.current;
+                        logRouteMapRef.current.set(l.id, resolvedRoute);
+                    }
+                });
                 setLogs(deduped);
             }
             else {
@@ -1192,8 +1224,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         const groups = [];
         for (let i = 0; i < filteredLogs.length; i++) {
             const log = filteredLogs[i];
-            const routeInfo = logRouteMapRef.current.get(log.id);
-            const pageName = routeInfo?.path || 'Navigators';
+            const routeInfo = logRouteMapRef.current.get(log.id) || log?.routeInfo;
+            const pageName = (0, helpers_1.getLogPageName)(log, routeInfo);
             if (groups.length === 0 ||
                 groups[groups.length - 1].pageName !== pageName) {
                 groups.push({ pageName, color: (0, helpers_1.getDomainColor)(pageName), logs: [] });
@@ -1446,7 +1478,28 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                     log.type || '',
                     log.sourceMethod || '',
                 ].join(' ').toLowerCase();
-                return queryTokens.every(token => searchTarget.includes(token));
+                return queryTokens.every(token => {
+                    if (token.startsWith('level:') || token.startsWith('is:') || token.startsWith('type:')) {
+                        const flag = token.replace(/^(level:|is:|type:)/, '').trim();
+                        if (flag === 'error' || flag === 'err')
+                            return log.type === 'error';
+                        if (flag === 'warn' || flag === 'warning')
+                            return log.type === 'warn';
+                        if (flag === 'info')
+                            return log.type === 'info';
+                        if (flag === 'log')
+                            return log.sourceMethod === 'log';
+                        if (flag === 'analytics')
+                            return (log.message || '').toLowerCase().includes('[analytics');
+                    }
+                    if (token === 'error' || token === 'err') {
+                        return log.type === 'error' || searchTarget.includes(token);
+                    }
+                    if (token === 'warn' || token === 'warning') {
+                        return log.type === 'warn' || searchTarget.includes(token);
+                    }
+                    return searchTarget.includes(token);
+                });
             });
         }
         // #7 — apply sort order (newest/oldest first)
@@ -1994,3 +2047,19 @@ Object.defineProperty(exports, "CrashExportFormat", { enumerable: true, get: fun
 Object.defineProperty(exports, "CrashDetailSubTab", { enumerable: true, get: function () { return types_1.CrashDetailSubTab; } });
 Object.defineProperty(exports, "CrashFilterType", { enumerable: true, get: function () { return types_1.CrashFilterType; } });
 Object.defineProperty(exports, "BreadcrumbType", { enumerable: true, get: function () { return types_1.BreadcrumbType; } });
+var AppFonts_1 = require("./styles/AppFonts");
+Object.defineProperty(exports, "AppFonts", { enumerable: true, get: function () { return AppFonts_1.AppFonts; } });
+Object.defineProperty(exports, "setAppFonts", { enumerable: true, get: function () { return AppFonts_1.setAppFonts; } });
+var AppColors_1 = require("./styles/AppColors");
+Object.defineProperty(exports, "AppColors", { enumerable: true, get: function () { return AppColors_1.AppColors; } });
+Object.defineProperty(exports, "setAppColors", { enumerable: true, get: function () { return AppColors_1.setAppColors; } });
+Object.defineProperty(exports, "getThemeColors", { enumerable: true, get: function () { return AppColors_1.getThemeColors; } });
+Object.defineProperty(exports, "updateAppColorsTheme", { enumerable: true, get: function () { return AppColors_1.updateAppColorsTheme; } });
+var i18n_2 = require("./i18n");
+Object.defineProperty(exports, "t", { enumerable: true, get: function () { return i18n_2.t; } });
+Object.defineProperty(exports, "i18n", { enumerable: true, get: function () { return i18n_2.i18n; } });
+Object.defineProperty(exports, "useTranslation", { enumerable: true, get: function () { return i18n_2.useTranslation; } });
+Object.defineProperty(exports, "setLanguage", { enumerable: true, get: function () { return i18n_2.setLanguage; } });
+Object.defineProperty(exports, "addTranslations", { enumerable: true, get: function () { return i18n_2.addTranslations; } });
+Object.defineProperty(exports, "setTranslations", { enumerable: true, get: function () { return i18n_2.setTranslations; } });
+Object.defineProperty(exports, "I18nextProvider", { enumerable: true, get: function () { return i18n_2.I18nextProvider; } });

package/dist/commonjs/native/NativeInspector.js

@@ -151,6 +151,19 @@ const subscribeNativeFloatingButtonPress = (callback) => {
         }
         catch (e) { }
     }
+    // Active Bridgeless / TurboModule tap detection
+    const interval = setInterval(async () => {
+        if (NativeModule && NativeModule.checkFloatingButtonPress) {
+            try {
+                const pressed = await NativeModule.checkFloatingButtonPress();
+                if (pressed) {
+                    callback();
+                }
+            }
+            catch (e) { }
+        }
+    }, 180);
+    cleanups.push(() => clearInterval(interval));
     return () => {
         cleanups.forEach(fn => {
             try {

package/dist/commonjs/native/NativeNetworkInspector.d.ts

@@ -14,7 +14,7 @@ export interface Spec extends TurboModule {
     triggerHaptic(style: string): Promise<boolean>;
     getNativeSystemMetrics(): Promise<Object>;
     pushNativeLogRecord(pageKey: string, jsonPayload: string): Promise<boolean>;
-    getNativeCachedPage(pageKey: string, offset: number, limit: number, query: string): Promise<string>;
+    checkFloatingButtonPress(): Promise<boolean>;
     addListener(eventName: string): void;
     removeListeners(count: number): void;
 }

package/dist/commonjs/styles/AppColors.d.ts

@@ -344,4 +344,8 @@ export declare const getThemeColors: (isDark: boolean) => {
 };
 export declare const AppColors: typeof LightColors;
 export declare const updateAppColorsTheme: (isDark: boolean) => void;
+/**
+ * Configure or override specific color tokens used throughout the inspector.
+ */
+export declare const setAppColors: (customColors: Partial<typeof LightColors>) => void;
 export default AppColors;

package/dist/commonjs/styles/AppColors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateAppColorsTheme = exports.AppColors = exports.getThemeColors = void 0;
+exports.setAppColors = exports.updateAppColorsTheme = exports.AppColors = exports.getThemeColors = void 0;
 const LightColors = {
     // ─── Core (Thai Airways Royal Palette) ───
     primaryLight: '#FFFFFF',
@@ -389,4 +389,14 @@ const updateAppColorsTheme = (isDark) => {
     Object.assign(exports.AppColors, (0, exports.getThemeColors)(isDark));
 };
 exports.updateAppColorsTheme = updateAppColorsTheme;
+/**
+ * Configure or override specific color tokens used throughout the inspector.
+ */
+const setAppColors = (customColors) => {
+    if (!customColors || typeof customColors !== 'object')
+        return;
+    Object.assign(exports.AppColors, customColors);
+    Object.assign(LightColors, customColors);
+};
+exports.setAppColors = setAppColors;
 exports.default = exports.AppColors;

package/dist/commonjs/styles/AppFonts.d.ts

@@ -1,7 +1,18 @@
+export interface AppFontConfig {
+    interRegular?: string;
+    interMedium?: string;
+    interBold?: string;
+    Sfprotext?: string;
+}
 export declare const AppFonts: {
     interRegular: string;
     interMedium: string;
     interBold: string;
     Sfprotext: string;
 };
+/**
+ * Configure or override font families used across all inspector screens.
+ * Useful when integrating into apps with custom font setups or system fonts.
+ */
+export declare const setAppFonts: (customFonts: Partial<typeof AppFonts>) => void;
 export default AppFonts;

package/dist/commonjs/styles/AppFonts.js

@@ -1,10 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppFonts = void 0;
+exports.setAppFonts = exports.AppFonts = void 0;
 exports.AppFonts = {
     interRegular: 'Inter-Regular',
     interMedium: 'Inter-Medium',
     interBold: 'Inter-Bold',
     Sfprotext: 'Inter-Regular',
 };
+/**
+ * Configure or override font families used across all inspector screens.
+ * Useful when integrating into apps with custom font setups or system fonts.
+ */
+const setAppFonts = (customFonts) => {
+    if (!customFonts || typeof customFonts !== 'object')
+        return;
+    Object.assign(exports.AppFonts, customFonts);
+};
+exports.setAppFonts = setAppFonts;
 exports.default = exports.AppFonts;

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

@@ -106,6 +106,7 @@ export interface NetworkLog {
     /** Client identifier: axios, fetch, xhr, apollo, etc. */
     client?: 'axios' | 'fetch' | 'xhr' | 'apollo' | 'graphql' | string;
     caller?: string;
+    routeInfo?: RouteInfo;
 }
 export interface RouteInfo {
     path: string;

package/dist/esm/components/AppHeaderLogo.js

@@ -12,15 +12,23 @@ export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
                 height: size,
             });
             return (<View style={[
-                    logoStyles.container,
-                    { width: size, height: size, padding: 0, borderRadius: Math.round(size * 0.28) },
+                    logoStyles.svgContainer,
+                    {
+                        width: size,
+                        height: size,
+                        borderRadius: Math.round(size * 0.23),
+                    },
                 ]}>
           {clonedIcon}
         </View>);
         }
         return (<View style={[
-                logoStyles.container,
-                { width: size, height: size, borderRadius: Math.round(size * 0.28) },
+                logoStyles.imageContainer,
+                {
+                    width: size,
+                    height: size,
+                    borderRadius: Math.round(size * 0.23),
+                },
             ]}>
         <Image source={customIcon} style={logoStyles.image} resizeMode="cover"/>
       </View>);
@@ -32,33 +40,58 @@ export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
             android: { uri: 'ic_launcher' },
             default: { uri: 'AppIcon' },
         });
-        return (<View style={[logoStyles.container, { width: size, height: size }]}>
+        return (<View style={[
+                logoStyles.imageContainer,
+                {
+                    width: size,
+                    height: size,
+                    borderRadius: Math.round(size * 0.23),
+                },
+            ]}>
         <Image source={nativeSource} style={logoStyles.image} resizeMode="cover" onError={() => setLoadError(true)}/>
       </View>);
     }
     // 3. Fallback: Inspector's Signature Owl Brand Logo
     return (<View style={[
-            logoStyles.container,
-            { width: size, height: size, padding: 0, borderRadius: Math.round(size * 0.28) },
+            logoStyles.svgContainer,
+            {
+                width: size,
+                height: size,
+                borderRadius: Math.round(size * 0.23),
+            },
         ]}>
       <BrandSquareIcon size={size}/>
     </View>);
 };
 const logoStyles = StyleSheet.create({
-    container: {
-        borderRadius: 10,
+    svgContainer: {
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3,
+        elevation: 3,
+    },
+    imageContainer: {
         overflow: 'hidden',
         backgroundColor: 'rgba(255, 255, 255, 0.15)',
         borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.28)',
-        padding: 2.5,
+        borderColor: 'rgba(255, 255, 255, 0.35)',
+        padding: 2,
         alignItems: 'center',
         justifyContent: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3,
+        elevation: 3,
     },
     image: {
         width: '100%',
         height: '100%',
-        borderRadius: 7.5,
+        borderRadius: 8,
     },
 });
 export default AppHeaderLogo;

package/dist/esm/components/BrandSquareIcon.js

@@ -3,72 +3,115 @@ import Svg, { Circle, Path, G, Defs, LinearGradient, RadialGradient, Stop, Rect,
 export const BrandSquareIcon = ({ size = 56 }) => {
     return (<Svg width={size} height={size} viewBox="0 0 256 256" fill="none">
       <Defs>
+        {/* App Tile Background - Crisp Royal Deep Violet to Midnight */}
         <LinearGradient id="bs_tile" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
-          <Stop offset="0" stopColor="#1E1B4B"/>
-          <Stop offset="1" stopColor="#0F172A"/>
+          <Stop offset="0%" stopColor="#1E1B4B"/>
+          <Stop offset="50%" stopColor="#18182F"/>
+          <Stop offset="100%" stopColor="#0B0F19"/>
         </LinearGradient>
-        <LinearGradient id="bs_beam" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
-          <Stop offset="0" stopColor="#818CF8"/>
-          <Stop offset="0.5" stopColor="#A855F7"/>
-          <Stop offset="1" stopColor="#EC4899"/>
+
+        {/* Outer Neon Cyber Border */}
+        <LinearGradient id="bs_border" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
+          <Stop offset="0%" stopColor="#818CF8" stopOpacity={0.9}/>
+          <Stop offset="45%" stopColor="#C084FC" stopOpacity={0.8}/>
+          <Stop offset="80%" stopColor="#F472B6" stopOpacity={0.85}/>
+          <Stop offset="100%" stopColor="#38BDF8" stopOpacity={0.9}/>
+        </LinearGradient>
+
+        {/* Ambient Top Glow */}
+        <RadialGradient id="bs_top_glow" cx="50%" cy="15%" r="65%">
+          <Stop offset="0%" stopColor="#818CF8" stopOpacity={0.35}/>
+          <Stop offset="60%" stopColor="#A855F7" stopOpacity={0.12}/>
+          <Stop offset="100%" stopColor="#1E1B4B" stopOpacity={0}/>
+        </RadialGradient>
+
+        {/* Owl Outer Body Gradient - High Contrast */}
+        <LinearGradient id="bs_body" x1="64" y1="40" x2="192" y2="220" gradientUnits="userSpaceOnUse">
+          <Stop offset="0%" stopColor="#3730A3"/>
+          <Stop offset="50%" stopColor="#2E1065"/>
+          <Stop offset="100%" stopColor="#17123A"/>
         </LinearGradient>
-        <LinearGradient id="bs_body" x1="0" y1="0" x2="0" y2="256" gradientUnits="userSpaceOnUse">
-          <Stop offset="0" stopColor="#312E81"/>
-          <Stop offset="1" stopColor="#1E1B4B"/>
+
+        {/* Neon Cyber Beam Stroke */}
+        <LinearGradient id="bs_beam" x1="40" y1="40" x2="220" y2="220" gradientUnits="userSpaceOnUse">
+          <Stop offset="0%" stopColor="#67E8F9"/>
+          <Stop offset="35%" stopColor="#818CF8"/>
+          <Stop offset="70%" stopColor="#C084FC"/>
+          <Stop offset="100%" stopColor="#F472B6"/>
         </LinearGradient>
-        <RadialGradient id="bs_iris" cx="40%" cy="40%" r="60%">
-          <Stop offset="0" stopColor="#FDE047"/>
-          <Stop offset="0.7" stopColor="#F59E0B"/>
-          <Stop offset="1" stopColor="#D97706"/>
+
+        {/* Eyes Radiant Iris */}
+        <RadialGradient id="bs_iris" cx="38%" cy="36%" r="65%">
+          <Stop offset="0%" stopColor="#FEF08A"/>
+          <Stop offset="40%" stopColor="#FBBF24"/>
+          <Stop offset="80%" stopColor="#F59E0B"/>
+          <Stop offset="100%" stopColor="#D97706"/>
         </RadialGradient>
-        <LinearGradient id="bs_beak" x1="0" y1="0" x2="0" y2="20" gradientUnits="userSpaceOnUse">
-          <Stop offset="0" stopColor="#FBBF24"/>
-          <Stop offset="1" stopColor="#F97316"/>
+
+        {/* Beak Gradient */}
+        <LinearGradient id="bs_beak" x1="124" y1="120" x2="132" y2="136" gradientUnits="userSpaceOnUse">
+          <Stop offset="0%" stopColor="#FDE047"/>
+          <Stop offset="100%" stopColor="#EA580C"/>
         </LinearGradient>
+
+        {/* Diagnostic Lens Glass Flare */}
+        <RadialGradient id="bs_lens" cx="40%" cy="35%" r="65%">
+          <Stop offset="0%" stopColor="#A5F3FC" stopOpacity={0.4}/>
+          <Stop offset="50%" stopColor="#38BDF8" stopOpacity={0.18}/>
+          <Stop offset="100%" stopColor="#0284C7" stopOpacity={0.05}/>
+        </RadialGradient>
       </Defs>
 
-      {/* Rounded App Tile Background */}
-      <Rect x="8" y="8" width="240" height="240" rx="54" fill="url(#bs_tile)"/>
-      <Rect x="8" y="8" width="240" height="240" rx="54" fill="none" stroke="url(#bs_beam)" strokeWidth="3" strokeOpacity={0.4}/>
+      {/* ── 1. Rounded App Tile Base (Full Edge-to-Edge) ── */}
+      <Rect x="2" y="2" width="252" height="252" rx="58" fill="url(#bs_tile)"/>
+      <Rect x="2" y="2" width="252" height="252" rx="58" fill="url(#bs_top_glow)"/>
+      <Rect x="2" y="2" width="252" height="252" rx="58" fill="none" stroke="url(#bs_border)" strokeWidth="3.5"/>
+
+      {/* ── 2. Owl Outer Wings (Layered behind) ── */}
+      <Path d="M62 120 C42 152 46 194 76 210 C68 178 66 146 80 120 Z" fill="#1E1B4B" stroke="url(#bs_beam)" strokeWidth="3" strokeOpacity={0.75}/>
+      <Path d="M194 120 C214 152 210 194 180 210 C188 178 190 146 176 120 Z" fill="#1E1B4B" stroke="url(#bs_beam)" strokeWidth="3" strokeOpacity={0.75}/>
 
-      {/* Owl Outer Body Contour */}
-      <Path d="M64 148 C60 102 72 68 92 56 L100 40 L118 60 Q128 55 138 60 L156 40 L164 56 C184 68 196 102 192 148 C196 178 182 202 150 210 C138 214 118 214 106 210 C74 202 60 178 64 148 Z" fill="url(#bs_body)" stroke="url(#bs_beam)" strokeWidth="4" strokeLinejoin="round"/>
+      {/* ── 3. Owl Body Contour ── */}
+      <Path d="M58 146 C54 98 68 64 88 52 L98 34 L118 56 Q128 50 138 56 L158 34 L168 52 C188 64 202 98 198 146 C202 180 186 208 152 216 C140 220 116 220 104 216 C70 208 54 180 58 146 Z" fill="url(#bs_body)" stroke="url(#bs_beam)" strokeWidth="4.5" strokeLinejoin="round"/>
 
-      {/* Wings */}
-      <Path d="M74 124 C58 154 60 190 86 204 C79 176 77 148 88 126 Z" fill="#1E1B4B" stroke="#818CF8" strokeWidth="2.5" strokeOpacity={0.6}/>
-      <Path d="M182 124 C198 154 196 190 170 204 C177 176 179 148 168 126 Z" fill="#1E1B4B" stroke="#818CF8" strokeWidth="2.5" strokeOpacity={0.6}/>
+      {/* Inner Ear Highlights */}
+      <Path d="M98 42 L112 56 L102 57 Z" fill="#67E8F9" opacity={0.6}/>
+      <Path d="M158 42 L144 56 L154 57 Z" fill="#F472B6" opacity={0.6}/>
 
-      {/* Belly Screen Plate */}
-      <Rect x="105" y="160" width="46" height="34" rx="8" fill="#0B0F19" stroke="url(#bs_beam)" strokeWidth="2"/>
-      {/* Code Emblem on Chest */}
-      <G stroke="#A5B4FC" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round" fill="none">
-        <Path d="M120 171 L114 177 L120 183"/>
-        <Path d="M136 171 L142 177 L136 183"/>
-        <Path d="M130 169 L126 185" stroke="#EC4899"/>
+      {/* ── 4. Chest Terminal & Code Braces ── */}
+      <Rect x="98" y="162" width="60" height="38" rx="10" fill="#050811" stroke="url(#bs_beam)" strokeWidth="2.5"/>
+      <G strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none">
+        <Path d="M116 174 L108 181 L116 188" stroke="#38BDF8"/>
+        <Path d="M140 174 L148 181 L140 188" stroke="#38BDF8"/>
+        <Path d="M131 171 L125 191" stroke="#F43F5E"/>
       </G>
 
-      {/* Facial Disc & Mask */}
-      <Path d="M128 92 C148 70 186 78 186 108 C186 134 160 152 128 152 C96 152 70 134 70 108 C70 78 108 70 128 92 Z" fill="#2E1065" stroke="#818CF8" strokeWidth="2" strokeOpacity={0.6}/>
+      {/* ── 5. Facial Mask Plate ── */}
+      <Path d="M128 88 C152 64 192 72 192 104 C192 132 162 152 128 152 C94 152 64 132 64 104 C64 72 104 64 128 88 Z" fill="#1E1B4B" stroke="url(#bs_beam)" strokeWidth="2.8"/>
+
+      {/* ── 6. Right Eye (Glowing Owl Eye) ── */}
+      <Circle cx="156" cy="106" r="19" fill="url(#bs_iris)" stroke="#0F172A" strokeWidth="2.5"/>
+      <Circle cx="156" cy="106" r="9.5" fill="#0B0F19"/>
+      <Circle cx="159.5" cy="102.5" r="3.5" fill="#FFFFFF"/>
+      <Circle cx="153" cy="109.5" r="1.8" fill="#FFFFFF" opacity={0.85}/>
 
-      {/* Right Eye (Normal Cute Eye) */}
-      <Circle cx="154" cy="108" r="17" fill="url(#bs_iris)" stroke="#0F172A" strokeWidth="2"/>
-      <Circle cx="154" cy="108" r="8.5" fill="#0F172A"/>
-      <Circle cx="157" cy="105" r="3" fill="#FFFFFF"/>
-      <Circle cx="151" cy="111" r="1.5" fill="#FFFFFF" opacity={0.8}/>
+      {/* ── 7. Left Eye (Diagnostic Magnifier Lens) ── */}
+      {/* Magnifier Glass Glow */}
+      <Circle cx="94" cy="104" r="30" fill="url(#bs_lens)" stroke="url(#bs_beam)" strokeWidth="6"/>
+      <Line x1="72" y1="126" x2="48" y2="152" stroke="#0B0F19" strokeWidth="13" strokeLinecap="round"/>
+      <Line x1="72" y1="126" x2="48" y2="152" stroke="url(#bs_beam)" strokeWidth="8" strokeLinecap="round"/>
 
-      {/* Left Eye (Diagnostic Magnifier Lens) */}
-      <Circle cx="96" cy="104" r="20" fill="url(#bs_iris)" stroke="#0F172A" strokeWidth="2"/>
-      <Circle cx="96" cy="104" r="10" fill="#0F172A"/>
-      <Circle cx="99.5" cy="100.5" r="3.5" fill="#FFFFFF"/>
-      <Circle cx="92" cy="107" r="1.8" fill="#FFFFFF" opacity={0.8}/>
+      {/* Eye Inside Magnifier */}
+      <Circle cx="94" cy="104" r="21" fill="url(#bs_iris)" stroke="#0F172A" strokeWidth="2.5"/>
+      <Circle cx="94" cy="104" r="10.5" fill="#0B0F19"/>
+      <Circle cx="98" cy="100" r="4" fill="#FFFFFF"/>
+      <Circle cx="90.5" cy="107.5" r="2" fill="#FFFFFF" opacity={0.85}/>
 
-      {/* Magnifier Glass Ring & Handle */}
-      <Line x1="76" y1="124" x2="55" y2="148" stroke="#0F172A" strokeWidth="12" strokeLinecap="round"/>
-      <Line x1="76" y1="124" x2="55" y2="148" stroke="url(#bs_beam)" strokeWidth="7" strokeLinecap="round"/>
-      <Circle cx="96" cy="104" r="28" fill="#38BDF8" fillOpacity={0.12} stroke="url(#bs_beam)" strokeWidth="6"/>
+      {/* Lens Reflection Highlight */}
+      <Path d="M74 94 A26 26 0 0 1 106 78" stroke="#FFFFFF" strokeWidth="3" strokeLinecap="round" opacity={0.65} fill="none"/>
 
-      {/* Beak */}
-      <Path d="M123.5 123 Q128 121 132.5 123 Q131 132 128 134.5 Q125 132 123.5 123 Z" fill="url(#bs_beak)"/>
+      {/* ── 8. Beak ── */}
+      <Path d="M123 120 Q128 118 133 120 Q131.5 133 128 137 Q124.5 133 123 120 Z" fill="url(#bs_beak)" stroke="#78350F" strokeWidth="1"/>
     </Svg>);
 };
 export default BrandSquareIcon;

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

@@ -1,5 +1,10 @@
 import React from 'react';
-declare const EmptyState: React.NamedExoticComponent<{
+interface EmptyStateProps {
     isSearch?: boolean;
-}>;
+    searchQuery?: string;
+    customTitle?: string;
+    customSub?: string;
+    onClearSearch?: () => void;
+}
+declare const EmptyState: React.NamedExoticComponent<EmptyStateProps>;
 export default EmptyState;

package/dist/esm/components/EmptyState.js

@@ -8,7 +8,7 @@ import { EmptyRadarIcon } from './NetworkIcons';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
-const EmptyState = React.memo(function EmptyState({ isSearch }) {
+const EmptyState = React.memo(function EmptyState({ isSearch, searchQuery, customTitle, customSub, onClearSearch, }) {
     const iconPulse = useRef(new Animated.Value(1)).current;
     useEffect(() => {
         const loop = Animated.loop(Animated.sequence([
@@ -38,13 +38,19 @@ const EmptyState = React.memo(function EmptyState({ isSearch }) {
         <EmptyRadarIcon color={AppColors.purple} size={32}/>
       </Animated.View>
       <Text style={styles.emptyTitle}>
-        {isSearch ? 'No matching APIs' : 'No network activity'}
+        {customTitle || (isSearch ? 'No matching results' : 'No network activity')}
       </Text>
       <Text style={styles.emptySub}>
-        {isSearch
-            ? 'Try adjusting your filters or search.'
-            : 'Listening for incoming API calls...'}
+        {customSub ||
+            (isSearch
+                ? searchQuery
+                    ? `No items matched "${searchQuery}"`
+                    : 'Try adjusting your filters or search keywords.'
+                : 'Listening for incoming API calls...')}
       </Text>
+      {isSearch && onClearSearch && (<TouchableScale style={styles.reloadBtn} onPress={onClearSearch}>
+          <Text style={styles.reloadBtnText}>Clear Search & Filters</Text>
+        </TouchableScale>)}
       {!isSearch && (<TouchableScale style={styles.reloadBtn} onPress={handleReload}>
           <Text style={styles.reloadBtnText}>Reload App</Text>
         </TouchableScale>)}