react-native-prod-debugger 1.0.0

package/lib/typescript/plugins/network/NetworkInterceptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkInterceptor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/network/NetworkInterceptor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,KAAK,eAAe,GAAG,CAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;AAE5D;;;;;;GAMG;AACH,cAAM,uBAAuB;IAC3B,OAAO,CAAC,QAAQ,CAAwB;IACxC,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,QAAQ,CAAkB;IAGlC,OAAO,CAAC,eAAe,CAAqD;IAC5E,OAAO,CAAC,eAAe,CAAqD;IAC5E,OAAO,CAAC,oBAAoB,CAAiE;IAC7F,OAAO,CAAC,aAAa,CAAwC;IAE7D,2CAA2C;IAC3C,KAAK,CAAC,WAAW,GAAE,MAAY,EAAE,WAAW,GAAE,OAAe,GAAG,IAAI;IAQpE,8DAA8D;IAC9D,IAAI,IAAI,IAAI;IAMZ,kEAAkE;IAClE,SAAS,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,IAAI;IAOhD,iCAAiC;IACjC,MAAM,IAAI,cAAc,EAAE;IAI1B,mCAAmC;IACnC,KAAK,IAAI,IAAI;IAKb,0CAA0C;IAC1C,IAAI,MAAM,IAAI,OAAO,CAEpB;IAID,OAAO,CAAC,YAAY;IAgIpB,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,cAAc;IAoGtB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,MAAM;CAUf;AAED,8CAA8C;AAC9C,eAAO,MAAM,kBAAkB,yBAAgC,CAAC"}

package/lib/typescript/plugins/performance/PerformanceMonitorPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { DebuggerPlugin } from '../../core/types';
+export declare function createPerformanceMonitorPlugin(): DebuggerPlugin;
+//# sourceMappingURL=PerformanceMonitorPlugin.d.ts.map

package/lib/typescript/plugins/performance/PerformanceMonitorPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceMonitorPlugin.d.ts","sourceRoot":"","sources":["../../../../src/plugins/performance/PerformanceMonitorPlugin.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAwB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAuL7E,wBAAgB,8BAA8B,IAAI,cAAc,CAQ/D"}

package/lib/typescript/plugins/remoteConfig/RemoteConfigPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { DebuggerPlugin } from '../../core/types';
+export declare function createRemoteConfigPlugin(): DebuggerPlugin;
+//# sourceMappingURL=RemoteConfigPlugin.d.ts.map

package/lib/typescript/plugins/remoteConfig/RemoteConfigPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteConfigPlugin.d.ts","sourceRoot":"","sources":["../../../../src/plugins/remoteConfig/RemoteConfigPlugin.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAA2C,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA0LhG,wBAAgB,wBAAwB,IAAI,cAAc,CAQzD"}

package/lib/typescript/plugins/remoteConfig/remoteConfigStore.d.ts

@@ -0,0 +1,20 @@
+import type { RemoteConfigProvider } from '../../core/types';
+type Listener = () => void;
+declare class RemoteConfigStoreClass {
+    private provider;
+    private listeners;
+    /** Set the remote config provider. */
+    set(provider: RemoteConfigProvider): void;
+    /** Get the current provider. */
+    get(): RemoteConfigProvider | null;
+    /** Remove the provider. */
+    remove(): void;
+    /** Subscribe to provider changes. */
+    subscribe(listener: Listener): () => void;
+    private notify;
+}
+export declare const remoteConfigStore: RemoteConfigStoreClass;
+/** Set the remote config provider (e.g., Firebase). */
+export declare function setRemoteConfigProvider(provider: RemoteConfigProvider): void;
+export {};
+//# sourceMappingURL=remoteConfigStore.d.ts.map

package/lib/typescript/plugins/remoteConfig/remoteConfigStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remoteConfigStore.d.ts","sourceRoot":"","sources":["../../../../src/plugins/remoteConfig/remoteConfigStore.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAE3B,cAAM,sBAAsB;IAC1B,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,SAAS,CAA4B;IAE7C,sCAAsC;IACtC,GAAG,CAAC,QAAQ,EAAE,oBAAoB,GAAG,IAAI;IAKzC,gCAAgC;IAChC,GAAG,IAAI,oBAAoB,GAAG,IAAI;IAIlC,2BAA2B;IAC3B,MAAM,IAAI,IAAI;IAKd,qCAAqC;IACrC,SAAS,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI;IAKzC,OAAO,CAAC,MAAM;CASf;AAED,eAAO,MAAM,iBAAiB,wBAA+B,CAAC;AAE9D,uDAAuD;AACvD,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,oBAAoB,GAAG,IAAI,CAE5E"}

package/lib/typescript/plugins/stateInspector/StateInspectorPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { DebuggerPlugin } from '../../core/types';
+export declare function createStateInspectorPlugin(): DebuggerPlugin;
+//# sourceMappingURL=StateInspectorPlugin.d.ts.map

package/lib/typescript/plugins/stateInspector/StateInspectorPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateInspectorPlugin.d.ts","sourceRoot":"","sources":["../../../../src/plugins/stateInspector/StateInspectorPlugin.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAwB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA2U7E,wBAAgB,0BAA0B,IAAI,cAAc,CAQ3D"}

package/lib/typescript/plugins/stateInspector/stateAdapterRegistry.d.ts

@@ -0,0 +1,34 @@
+/**
+ * State Adapter Registry — Allows consumers to register their state stores.
+ *
+ * Supports Redux, Zustand, MobX, or any custom state store via a simple adapter interface.
+ */
+export interface StateAdapter {
+    /** Adapter name (e.g., "Redux", "Zustand - userStore"). */
+    name: string;
+    /** Get the current state snapshot. */
+    getState: () => unknown;
+    /** Subscribe to state changes. Returns unsubscribe function. */
+    subscribe?: (listener: () => void) => () => void;
+}
+type AdapterListener = () => void;
+declare class StateAdapterRegistryClass {
+    private adapters;
+    private listeners;
+    /** Register a state adapter. */
+    set(id: string, adapter: StateAdapter): void;
+    /** Remove a state adapter. */
+    remove(id: string): void;
+    /** Get all registered adapters. */
+    getAll(): Map<string, StateAdapter>;
+    /** Subscribe to adapter changes. */
+    subscribe(listener: AdapterListener): () => void;
+    private notify;
+}
+export declare const stateAdapterRegistry: StateAdapterRegistryClass;
+/** Register a state store adapter. */
+export declare function setStateAdapter(id: string, adapter: StateAdapter): void;
+/** Remove a state store adapter. */
+export declare function removeStateAdapter(id: string): void;
+export {};
+//# sourceMappingURL=stateAdapterRegistry.d.ts.map

package/lib/typescript/plugins/stateInspector/stateAdapterRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateAdapterRegistry.d.ts","sourceRoot":"","sources":["../../../../src/plugins/stateInspector/stateAdapterRegistry.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,YAAY;IAC3B,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,gEAAgE;IAChE,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;CAClD;AAED,KAAK,eAAe,GAAG,MAAM,IAAI,CAAC;AAElC,cAAM,yBAAyB;IAC7B,OAAO,CAAC,QAAQ,CAAwC;IACxD,OAAO,CAAC,SAAS,CAAmC;IAEpD,gCAAgC;IAChC,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,IAAI;IAK5C,8BAA8B;IAC9B,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKxB,mCAAmC;IACnC,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC;IAInC,oCAAoC;IACpC,SAAS,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,IAAI;IAKhD,OAAO,CAAC,MAAM;CASf;AAED,eAAO,MAAM,oBAAoB,2BAAkC,CAAC;AAEpE,sCAAsC;AACtC,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,IAAI,CAEvE;AAED,oCAAoC;AACpC,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAEnD"}

package/lib/typescript/plugins/storageBrowser/StorageBrowserPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { DebuggerPlugin } from '../../core/types';
+export declare function createStorageBrowserPlugin(): DebuggerPlugin;
+//# sourceMappingURL=StorageBrowserPlugin.d.ts.map

package/lib/typescript/plugins/storageBrowser/StorageBrowserPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageBrowserPlugin.d.ts","sourceRoot":"","sources":["../../../../src/plugins/storageBrowser/StorageBrowserPlugin.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAwC,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAsY7F,wBAAgB,0BAA0B,IAAI,cAAc,CAQ3D"}

package/lib/typescript/plugins/storageBrowser/storageAdapterRegistry.d.ts

@@ -0,0 +1,16 @@
+import type { StorageAdapter } from '../../core/types';
+type Listener = () => void;
+declare class StorageAdapterRegistryClass {
+    private adapters;
+    private listeners;
+    set(id: string, adapter: StorageAdapter): void;
+    remove(id: string): void;
+    getAll(): Map<string, StorageAdapter>;
+    subscribe(listener: Listener): () => void;
+    private notify;
+}
+export declare const storageAdapterRegistry: StorageAdapterRegistryClass;
+export declare function setStorageAdapter(id: string, adapter: StorageAdapter): void;
+export declare function removeStorageAdapter(id: string): void;
+export {};
+//# sourceMappingURL=storageAdapterRegistry.d.ts.map

package/lib/typescript/plugins/storageBrowser/storageAdapterRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storageAdapterRegistry.d.ts","sourceRoot":"","sources":["../../../../src/plugins/storageBrowser/storageAdapterRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAE3B,cAAM,2BAA2B;IAC/B,OAAO,CAAC,QAAQ,CAA0C;IAC1D,OAAO,CAAC,SAAS,CAA4B;IAE7C,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,IAAI;IAK9C,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKxB,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC;IAIrC,SAAS,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI;IAKzC,OAAO,CAAC,MAAM;CASf;AAED,eAAO,MAAM,sBAAsB,6BAAoC,CAAC;AAExE,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,IAAI,CAE3E;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAErD"}

package/lib/typescript/plugins/timeline/TimelinePlugin.d.ts

@@ -0,0 +1,3 @@
+import type { DebuggerPlugin } from '../../core/types';
+export declare function createTimelinePlugin(): DebuggerPlugin;
+//# sourceMappingURL=TimelinePlugin.d.ts.map

package/lib/typescript/plugins/timeline/TimelinePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelinePlugin.d.ts","sourceRoot":"","sources":["../../../../src/plugins/timeline/TimelinePlugin.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAuC,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA+N5F,wBAAgB,oBAAoB,IAAI,cAAc,CAQrD"}

package/lib/typescript/plugins/timeline/timelineStore.d.ts

@@ -0,0 +1,24 @@
+import type { TimelineEvent } from '../../core/types';
+type TimelineListener = (events: TimelineEvent[]) => void;
+/**
+ * TimelineStore — Global event logger for tracking app lifecycle events.
+ *
+ * Records events with category, timestamp, and optional data.
+ * Useful for tracking user flows, state transitions, and debugging sequences.
+ */
+declare class TimelineStoreClass {
+    private events;
+    private listeners;
+    private maxEvents;
+    /** Log a timeline event. */
+    log(category: TimelineEvent['category'], title: string, data?: unknown): void;
+    getAll(): TimelineEvent[];
+    clear(): void;
+    subscribe(listener: TimelineListener): () => void;
+    private notify;
+}
+export declare const timelineStore: TimelineStoreClass;
+/** Log a timeline event. */
+export declare function logTimelineEvent(category: TimelineEvent['category'], title: string, data?: unknown): void;
+export {};
+//# sourceMappingURL=timelineStore.d.ts.map

package/lib/typescript/plugins/timeline/timelineStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timelineStore.d.ts","sourceRoot":"","sources":["../../../../src/plugins/timeline/timelineStore.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,KAAK,gBAAgB,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;AAE1D;;;;;GAKG;AACH,cAAM,kBAAkB;IACtB,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAoC;IACrD,OAAO,CAAC,SAAS,CAAO;IAExB,4BAA4B;IAC5B,GAAG,CAAC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAY7E,MAAM,IAAI,aAAa,EAAE;IAGzB,KAAK,IAAI,IAAI;IAKb,SAAS,CAAC,QAAQ,EAAE,gBAAgB,GAAG,MAAM,IAAI;IAMjD,OAAO,CAAC,MAAM;CAUf;AAED,eAAO,MAAM,aAAa,oBAA2B,CAAC;AAEtD,4BAA4B;AAC5B,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,EACnC,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,OAAO,GACb,IAAI,CAEN"}

package/package.json

@@ -0,0 +1,131 @@
+{
+  "name": "react-native-prod-debugger",
+  "version": "1.0.0",
+  "description": "A comprehensive, in-app debugging toolkit for React Native that works in production builds. Hidden gesture activation, network inspector, state viewer, feature flags, and 13+ debugging tools — zero native dependencies.",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "test": "jest",
+    "clean": "rm -rf lib",
+    "prepare": "bun run build",
+    "release": "npm publish"
+  },
+  "keywords": [
+    "react-native",
+    "debugger",
+    "production",
+    "debug",
+    "overlay",
+    "network-logger",
+    "redux",
+    "zustand",
+    "mobx",
+    "state-inspector",
+    "feature-flags",
+    "remote-config",
+    "console-logger",
+    "performance-monitor",
+    "deep-link",
+    "crash-reporter",
+    "developer-tools",
+    "in-app-debugger",
+    "devtools"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/amanverma/react-native-prod-debugger"
+  },
+  "author": "Aman Verma",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/amanverma/react-native-prod-debugger/issues"
+  },
+  "homepage": "https://github.com/amanverma/react-native-prod-debugger#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.63.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-native": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0",
+    "eslint": "^8.57.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.7.0",
+    "@types/jest": "^29.5.0",
+    "ts-jest": "^29.1.0",
+    "prettier": "^3.2.0",
+    "react": "^18.2.0",
+    "react-native": "^0.73.0",
+    "react-native-builder-bob": "^0.23.0",
+    "typescript": "^5.3.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "node",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/lib/"
+    ],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ]
+}

package/src/core/DebugBubble.tsx

@@ -0,0 +1,149 @@
+import React, { useRef, useMemo } from 'react';
+import {
+  Animated,
+  PanResponder,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  Text,
+  View,
+} from 'react-native';
+import type { DebuggerTheme } from './types';
+
+interface DebugBubbleProps {
+  onPress: () => void;
+  theme: DebuggerTheme;
+  size?: number;
+  initialPosition?: { x: number; y: number };
+}
+
+const SCREEN = Dimensions.get('window');
+
+/**
+ * DebugBubble — A floating, draggable FAB that opens the debug overlay.
+ *
+ * - Fully draggable via PanResponder
+ * - Snaps to the nearest screen edge on release
+ * - Pulses subtly to indicate interactivity
+ * - Renders above all other content
+ */
+export const DebugBubble: React.FC<DebugBubbleProps> = ({
+  onPress,
+  theme,
+  size = 50,
+  initialPosition,
+}) => {
+  const defaultPos = initialPosition ?? { x: SCREEN.width - size - 16, y: SCREEN.height * 0.7 };
+  const pan = useRef(new Animated.ValueXY(defaultPos)).current;
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_, gesture) => {
+          // Only claim the gesture if the user has dragged more than 5px
+          return Math.abs(gesture.dx) > 5 || Math.abs(gesture.dy) > 5;
+        },
+        onPanResponderGrant: () => {
+          // Flatten offset into the value so extractOffset works correctly
+          pan.extractOffset();
+          Animated.spring(scale, {
+            toValue: 1.15,
+            useNativeDriver: true,
+            friction: 5,
+          }).start();
+        },
+        onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], {
+          useNativeDriver: false,
+        }),
+        onPanResponderRelease: (_, gesture) => {
+          pan.flattenOffset();
+
+          Animated.spring(scale, {
+            toValue: 1,
+            useNativeDriver: true,
+            friction: 5,
+          }).start();
+
+          // Snap to nearest horizontal edge
+          const finalX = gesture.moveX > SCREEN.width / 2 ? SCREEN.width - size - 8 : 8;
+
+          // Clamp vertical position
+          const finalY = Math.max(
+            50,
+            Math.min(gesture.moveY - size / 2, SCREEN.height - size - 50),
+          );
+
+          Animated.spring(pan, {
+            toValue: { x: finalX, y: finalY },
+            useNativeDriver: false,
+            friction: 7,
+            tension: 40,
+          }).start();
+
+          // If the user barely moved, treat it as a tap
+          if (Math.abs(gesture.dx) < 10 && Math.abs(gesture.dy) < 10) {
+            onPress();
+          }
+        },
+      }),
+    [pan, scale, size, onPress],
+  );
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: theme.bubbleBackground,
+          transform: [{ translateX: pan.x }, { translateY: pan.y }, { scale }],
+          shadowColor: theme.shadow,
+        },
+      ]}
+      {...panResponder.panHandlers}
+    >
+      <TouchableOpacity
+        activeOpacity={0.8}
+        style={[
+          styles.inner,
+          {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+          },
+        ]}
+        onPress={onPress}
+      >
+        <View style={styles.iconContainer}>
+          <Text style={[styles.icon, { fontSize: size * 0.45 }]}>🐛</Text>
+        </View>
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 99999,
+    elevation: 99999,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+  },
+  inner: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    textAlign: 'center',
+  },
+});

package/src/core/DebugOverlay.tsx

@@ -0,0 +1,211 @@
+import React, { useState, useMemo, useCallback, useRef } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  SafeAreaView,
+  StatusBar,
+} from 'react-native';
+import type { DebuggerPlugin, DebuggerTheme } from './types';
+
+interface DebugOverlayProps {
+  plugins: DebuggerPlugin[];
+  theme: DebuggerTheme;
+  onClose: () => void;
+}
+
+const SCREEN = Dimensions.get('window');
+
+/**
+ * DebugOverlay — Full-screen modal with tab navigation for plugins.
+ *
+ * - Slide-up animation on open
+ * - Scrollable tab bar at the top
+ * - Each tab renders a plugin's component
+ * - Close button in the header
+ */
+export const DebugOverlay: React.FC<DebugOverlayProps> = ({ plugins, theme, onClose }) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const slideAnim = useRef(new Animated.Value(SCREEN.height)).current;
+
+  React.useEffect(() => {
+    Animated.spring(slideAnim, {
+      toValue: 0,
+      useNativeDriver: true,
+      damping: 20,
+      stiffness: 120,
+    }).start();
+  }, [slideAnim]);
+
+  const handleClose = useCallback(() => {
+    Animated.timing(slideAnim, {
+      toValue: SCREEN.height,
+      duration: 250,
+      useNativeDriver: true,
+    }).start(() => onClose());
+  }, [slideAnim, onClose]);
+
+  const ActivePlugin = useMemo(() => {
+    return plugins[activeTab]?.component;
+  }, [plugins, activeTab]);
+
+  if (plugins.length === 0) return null;
+
+  return (
+    <Animated.View
+      style={[
+        styles.overlay,
+        {
+          backgroundColor: theme.overlay,
+          transform: [{ translateY: slideAnim }],
+        },
+      ]}
+    >
+      <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.headerBackground }]}>
+        <StatusBar barStyle="light-content" />
+
+        {/* Header */}
+        <View
+          style={[
+            styles.header,
+            { backgroundColor: theme.headerBackground, borderBottomColor: theme.border },
+          ]}
+        >
+          <View style={styles.headerLeft}>
+            <Text style={[styles.headerTitle, { color: theme.text }]}>🐛 Prod Debugger</Text>
+          </View>
+          <TouchableOpacity
+            onPress={handleClose}
+            style={[styles.closeButton, { backgroundColor: theme.surfaceAlt }]}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.closeIcon, { color: theme.textSecondary }]}>✕</Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* Tab Bar */}
+        <View
+          style={[
+            styles.tabBarContainer,
+            { backgroundColor: theme.headerBackground, borderBottomColor: theme.border },
+          ]}
+        >
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.tabBarContent}
+          >
+            {plugins.map((plugin, index) => (
+              <TouchableOpacity
+                key={plugin.id}
+                style={[
+                  styles.tab,
+                  {
+                    backgroundColor: index === activeTab ? theme.accent : 'transparent',
+                    borderColor: index === activeTab ? theme.accent : theme.border,
+                  },
+                ]}
+                onPress={() => setActiveTab(index)}
+                activeOpacity={0.7}
+              >
+                <Text style={styles.tabIcon}>{plugin.icon}</Text>
+                <Text
+                  style={[
+                    styles.tabLabel,
+                    {
+                      color: index === activeTab ? '#FFFFFF' : theme.textSecondary,
+                      fontWeight: index === activeTab ? '700' : '500',
+                    },
+                  ]}
+                  numberOfLines={1}
+                >
+                  {plugin.name}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        </View>
+
+        {/* Active Plugin Content */}
+        <View style={[styles.content, { backgroundColor: theme.background }]}>
+          {ActivePlugin ? <ActivePlugin theme={theme} /> : null}
+        </View>
+      </SafeAreaView>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 999999,
+    elevation: 999999,
+  },
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '800',
+    letterSpacing: 0.5,
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeIcon: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  tabBarContainer: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  tabBarContent: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    gap: 6,
+  },
+  tab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+    borderWidth: 1,
+    gap: 4,
+  },
+  tabIcon: {
+    fontSize: 14,
+  },
+  tabLabel: {
+    fontSize: 12,
+    maxWidth: 80,
+  },
+  content: {
+    flex: 1,
+  },
+});