docs: Add React Native CDP domains documentation and update architecture docs

document/docs/en/api/domains/_meta.json

@@ -1 +1 @@
-["runtime", "page", "dom", "network", "session-replay"]
+["runtime", "page", "dom", "network", "session-replay", "mmkv-storage", "async-storage", "redux"]

document/docs/en/api/domains/async-storage.md

@@ -0,0 +1,128 @@
+# AsyncStorageStorage Domain
+
+The AsyncStorageStorage domain is a custom CDP domain for inspecting and modifying AsyncStorage in React Native apps.
+
+## Overview
+
+The AsyncStorageStorage domain allows you to inspect and modify AsyncStorage instances used in React Native from Chrome DevTools.
+
+## Methods
+
+### AsyncStorageStorage.enable
+
+Enables the AsyncStorageStorage domain. When enabled, snapshots of all registered AsyncStorage instances are automatically sent.
+
+### AsyncStorageStorage.getAsyncStorageItems
+
+Gets all items from an AsyncStorage instance.
+
+**Parameters:**
+
+- `instanceId` (string): AsyncStorage instance ID
+
+**Returns:**
+
+- `entries`: Array of items (each item is a string array in the format `[key, value]`)
+
+### AsyncStorageStorage.setAsyncStorageItem
+
+Sets an item in an AsyncStorage instance.
+
+**Parameters:**
+
+- `instanceId` (string): AsyncStorage instance ID
+- `key` (string): Key
+- `value` (string): Value (AsyncStorage only stores strings)
+
+### AsyncStorageStorage.removeAsyncStorageItem
+
+Removes an item from an AsyncStorage instance.
+
+**Parameters:**
+
+- `instanceId` (string): AsyncStorage instance ID
+- `key` (string): Key to remove
+
+### AsyncStorageStorage.clear
+
+Removes all items from an AsyncStorage instance.
+
+**Parameters:**
+
+- `instanceId` (string): AsyncStorage instance ID
+
+## Events
+
+### AsyncStorageStorage.asyncStorageInstanceCreated
+
+Emitted when an AsyncStorage instance is created.
+
+**Parameters:**
+
+- `instanceId` (string): AsyncStorage instance ID
+
+### AsyncStorageStorage.asyncStorageItemAdded
+
+Emitted when an AsyncStorage item is added.
+
+**Parameters:**
+
+- `instanceId` (string): AsyncStorage instance ID
+- `key` (string): Key
+- `newValue` (string): New value
+
+### AsyncStorageStorage.asyncStorageItemUpdated
+
+Emitted when an AsyncStorage item is updated.
+
+**Parameters:**
+
+- `instanceId` (string): AsyncStorage instance ID
+- `key` (string): Key
+- `oldValue` (string): Old value
+- `newValue` (string): New value
+
+### AsyncStorageStorage.asyncStorageItemRemoved
+
+Emitted when an AsyncStorage item is removed.
+
+**Parameters:**
+
+- `instanceId` (string): AsyncStorage instance ID
+- `key` (string): Removed key
+
+### AsyncStorageStorage.asyncStorageItemsCleared
+
+Emitted when all items in an AsyncStorage instance are cleared.
+
+**Parameters:**
+
+- `instanceId` (string): AsyncStorage instance ID
+
+## Usage
+
+To register AsyncStorage instances in your React Native app:
+
+```typescript
+import { registerAsyncStorageDevTools } from '@ohah/chrome-remote-devtools-react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// Register default AsyncStorage instance
+registerAsyncStorageDevTools(AsyncStorage);
+
+// Register multiple instances (if you have custom AsyncStorage)
+registerAsyncStorageDevTools({
+  'default': AsyncStorage,
+  'custom': customAsyncStorage,
+});
+
+// Use blacklist pattern (optional)
+registerAsyncStorageDevTools(AsyncStorage, /^_/); // Exclude keys starting with '_'
+```
+
+## Notes
+
+- The AsyncStorageStorage domain is a React Native-only custom CDP domain.
+- AsyncStorage instances must be registered using `registerAsyncStorageDevTools()` to be inspectable in DevTools.
+- AsyncStorage only stores strings, so all values are sent as strings.
+- All AsyncStorage methods (setItem, removeItem, clear, multiSet, multiRemove, multiMerge) are automatically hooked to detect changes.

document/docs/en/api/domains/mmkv-storage.md

@@ -0,0 +1,130 @@
+# MMKVStorage Domain
+
+The MMKVStorage domain is a custom CDP domain for inspecting and modifying MMKV storage in React Native apps.
+
+## Overview
+
+The MMKVStorage domain allows you to inspect and modify MMKV (Memory-Mapped Key-Value) storage instances used in React Native from Chrome DevTools.
+
+## Methods
+
+### MMKVStorage.enable
+
+Enables the MMKVStorage domain. When enabled, snapshots of all registered MMKV instances are automatically sent.
+
+### MMKVStorage.getMMKVItems
+
+Gets all items from an MMKV instance.
+
+**Parameters:**
+
+- `instanceId` (string): MMKV instance ID
+
+**Returns:**
+
+- `entries`: Array of items (each item is a string array in the format `[key, value]`)
+
+### MMKVStorage.setMMKVItem
+
+Sets an item in an MMKV instance.
+
+**Parameters:**
+
+- `instanceId` (string): MMKV instance ID
+- `key` (string): Key
+- `value` (string): Value (passed as string, automatically converted for numbers or booleans)
+
+### MMKVStorage.removeMMKVItem
+
+Removes an item from an MMKV instance.
+
+**Parameters:**
+
+- `instanceId` (string): MMKV instance ID
+- `key` (string): Key to remove
+
+### MMKVStorage.clear
+
+Removes all items from an MMKV instance.
+
+**Parameters:**
+
+- `instanceId` (string): MMKV instance ID
+
+## Events
+
+### MMKVStorage.mmkvInstanceCreated
+
+Emitted when an MMKV instance is created.
+
+**Parameters:**
+
+- `instanceId` (string): MMKV instance ID
+
+### MMKVStorage.mmkvItemAdded
+
+Emitted when an MMKV item is added.
+
+**Parameters:**
+
+- `instanceId` (string): MMKV instance ID
+- `key` (string): Key
+- `newValue` (string): New value
+
+### MMKVStorage.mmkvItemUpdated
+
+Emitted when an MMKV item is updated.
+
+**Parameters:**
+
+- `instanceId` (string): MMKV instance ID
+- `key` (string): Key
+- `oldValue` (string): Old value
+- `newValue` (string): New value
+
+### MMKVStorage.mmkvItemRemoved
+
+Emitted when an MMKV item is removed.
+
+**Parameters:**
+
+- `instanceId` (string): MMKV instance ID
+- `key` (string): Removed key
+
+### MMKVStorage.mmkvItemsCleared
+
+Emitted when all items in an MMKV instance are cleared.
+
+**Parameters:**
+
+- `instanceId` (string): MMKV instance ID
+
+## Usage
+
+To register MMKV instances in your React Native app:
+
+```typescript
+import { registerMMKVDevTools } from '@ohah/chrome-remote-devtools-react-native';
+import { createMMKV } from 'react-native-mmkv';
+
+const userStorage = createMMKV({ id: 'user-storage' });
+const cacheStorage = createMMKV({ id: 'cache-storage' });
+
+// Register single instance
+registerMMKVDevTools(userStorage);
+
+// Register multiple instances
+registerMMKVDevTools({
+  'user-storage': userStorage,
+  'cache-storage': cacheStorage,
+});
+
+// Use blacklist pattern (optional)
+registerMMKVDevTools(userStorage, /^_/); // Exclude keys starting with '_'
+```
+
+## Notes
+
+- The MMKVStorage domain is a React Native-only custom CDP domain.
+- MMKV instances must be registered using `registerMMKVDevTools()` to be inspectable in DevTools.
+- Values are sent as strings and automatically converted for numbers or booleans.

document/docs/en/api/domains/redux.md

@@ -0,0 +1,131 @@
+# Redux Domain
+
+The Redux domain is a custom CDP domain for tracking Redux state changes and actions in React Native apps.
+
+## Overview
+
+The Redux domain provides integration with Redux DevTools Extension for debugging Redux applications. Redux actions and state changes are sent as CDP messages and can be viewed in the Redux panel in DevTools.
+
+## Methods
+
+### Redux.message
+
+Sends a Redux message from the application to DevTools or vice versa. This is the unified method that handles all Redux message types. Matches Redux DevTools Extension message format exactly.
+
+**Parameters:**
+
+- `type` (MessageType): Message type
+  - `INIT_INSTANCE`: Redux instance initialization
+  - `INIT`: Store initialization
+  - `ACTION`: Action dispatch
+  - `STATE`: State update
+  - `ERROR`: Error occurred
+- `action` (string, optional): Action payload (JSON string, for ACTION type)
+- `payload` (string, optional): State payload (JSON string, for INIT and ACTION types)
+- `source` (string): Source of the message (e.g., "@devtools-page", "@devtools-extension")
+- `instanceId` (string): Instance ID of the Redux store
+- `name` (string, optional): Store name (for INIT type)
+- `maxAge` (integer, optional): Maximum age of actions to keep (for ACTION type)
+- `nextActionId` (integer, optional): Next action ID (for ACTION type)
+- `error` (string, optional): Error message (for ERROR type)
+- `timestamp` (Runtime.Timestamp, optional): Timestamp when the message was created
+
+## Events
+
+### Redux.message
+
+Emitted when a Redux message is received from the application. Matches Redux DevTools Extension message format exactly.
+
+**Parameters:**
+
+- `type` (MessageType): Message type
+- `action` (string, optional): Action payload (JSON string, for ACTION type)
+- `payload` (string, optional): State payload (JSON string, for INIT and ACTION types)
+- `source` (string): Source of the message
+- `instanceId` (string): Instance ID of the Redux store
+- `name` (string, optional): Store name (for INIT type)
+- `maxAge` (integer, optional): Maximum age of actions to keep (for ACTION type)
+- `nextActionId` (integer, optional): Next action ID (for ACTION type)
+- `error` (string, optional): Error message (for ERROR type)
+- `timestamp` (Runtime.Timestamp, optional): Timestamp when the message was created
+
+## Usage
+
+### React Native
+
+To use Redux DevTools in a React Native app:
+
+```typescript
+import { createReduxDevToolsMiddleware } from '@ohah/chrome-remote-devtools-react-native/redux';
+import { createStore, applyMiddleware } from 'redux';
+import rootReducer from './reducers';
+
+const store = createStore(
+  rootReducer,
+  applyMiddleware(
+    createReduxDevToolsMiddleware({
+      name: 'MyApp',
+      instanceId: 'main-store'
+    })
+  )
+);
+```
+
+### Zustand
+
+To use with Zustand:
+
+```typescript
+import { chromeDevtools } from '@ohah/chrome-remote-devtools-react-native/zustand';
+import { create } from 'zustand';
+
+const useStore = create(
+  chromeDevtools(
+    (set) => ({
+      count: 0,
+      increment: () => set((state) => ({ count: state.count + 1 })),
+    }),
+    { name: 'MyStore', instanceId: 'main-store' }
+  )
+);
+```
+
+### Metro Configuration
+
+You need to add Redux DevTools Extension polyfill to your Metro configuration:
+
+```javascript
+// metro.config.js
+const { withChromeRemoteDevToolsRedux } = require('@ohah/chrome-remote-devtools-react-native/metro');
+
+module.exports = withChromeRemoteDevToolsRedux(metroConfig);
+```
+
+## Message Types
+
+### INIT_INSTANCE
+
+Sent when a new Redux instance is initialized. Notifies DevTools of a new store instance.
+
+### INIT
+
+Sent when a store is initialized. Includes initial state and store metadata.
+
+### ACTION
+
+Sent when an action is dispatched. Includes action type and payload.
+
+### STATE
+
+Sent when state changes. Includes the new state.
+
+### ERROR
+
+Sent when an error occurs. Includes error message.
+
+## Notes
+
+- The Redux domain is a React Native-only custom CDP domain.
+- Fully compatible with Redux DevTools Extension format.
+- Can track multiple Redux store instances simultaneously.
+- `__REDUX_DEVTOOLS_EXTENSION__` is automatically injected for compatibility with Redux DevTools Extension API.