react-native-inapp-inspector 2.5.1 → 2.5.3

package/README.hi.md

@@ -1,4 +1,10 @@
-# React Native In-App Inspector (ऐप-इन डिबगर और नेटवर्क लॉगर)
+<p align="center">
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector">
+    <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/inapp_inspector_icon.gif" alt="React Native In-App Inspector Icon" width="120" height="120" style="border-radius: 28px; box-shadow: 0 10px 30px rgba(99, 102, 241, 0.45);" />
+  </a>
+</p>
+
+# React Native In-App Inspector (इन-ऐप डीबगिंग टूलकिट)
 
 <p align="center">
   <b><a href="./README.md">English</a></b> |
@@ -27,6 +33,7 @@
   <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/dm/react-native-inapp-inspector?color=3b82f6&label=downloads" alt="npm downloads" /></a>
   <a href="https://github.com/vengatmacuser/react-native-inapp-inspector"><img src="https://img.shields.io/github/stars/vengatmacuser/react-native-inapp-inspector?color=f59e0b&label=stars&logo=github" alt="GitHub stars" /></a>
   <a href="https://github.com/vengatmacuser/react-native-inapp-inspector/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="license" /></a>
+  <a href="https://github.com/sponsors/vengatmacuser"><img src="https://img.shields.io/badge/sponsor-GitHub%20Sponsors-ea4aaa?logo=githubsponsors&logoColor=white" alt="sponsor" /></a>
 </p>
 
 <p align="center">
@@ -37,38 +44,157 @@
   <img src="https://img.shields.io/badge/Engine-Hermes%20%7C%20JSC-9333ea" alt="Engine" />
 </p>
 
-**React Native और Expo** के लिए एक **शून्य-कॉन्फ़िगरेशन, स्टैंडअलोन इन-ऐप डिबगिंग टूलकिट**। बिना किसी कंप्यूटर केबल या प्रॉक्सी सेटअप के सीधे अपने मोबाइल डिवाइस पर HTTP/HTTPS नेटवर्क अनुरोध, WebSocket और Socket.IO पैकेट, Metro सिम्बॉलिकेटेड कंसोल लॉग्स, Redux स्टेट बदलाव, AsyncStorage और MMKV स्टोरेज, पुश नोटिफिकेशन और हार्डवेयर मेट्रिक्स का लाइव निरीक्षण करें।
+React Native और Expo के लिए **ऑल-इन-वन और ज़ीरो-कॉन्फ़िग इन-ऐप डीबगिंग टूलकिट**। HTTP/HTTPS नेटवर्क ट्रैफ़िक, WebSocket और Socket.IO लाइव स्ट्रीम, Metro द्वारा सटीक लाइन नंबर कंसोल लॉग्स, Redux स्टेट डिफ्स, AsyncStorage और MMKV स्टोरेज, पुश नोटिफिकेशन्स, नेटिव हार्डवेयर मेट्रिक्स और फोटो/वीडियो एडिटिंग स्टूडियो सहित स्क्रीनशॉट/स्क्रीन रिकॉर्डिंग सीधे मोबाइल पर बिना किसी केबल के देखें।
 
-> 🚀 **Flipper, Charles, और Chucker का आधुनिक विकल्प** — बिना डेस्कटॉप ऐप या केबल के स्टैंडअलोन टेस्ट बिल्ड (APK / TestFlight) और डिवाइस पर काम करता है।
+> 🚀 **Flipper, Charles, Proxyman और Chucker का आधुनिक और हल्का विकल्प** — सीधे डिवाइस पर, टेस्ट बिल्ड्स में और बिना पीसी कनेक्ट किए स्टैंडअलोन चलता है।
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/walkthrough.gif" alt="React Native In-App Inspector Walkthrough" width="360" style="border-radius: 20px; box-shadow: 0 12px 36px rgba(0,0,0,0.5);" />
 </p>
 
 <p align="center">
-  🎬 <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mp4">पूरा वीडियो वॉकथ्रू देखें (MP4)</a></b> | <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mov">मूल MOV</a></b>
+  🎬 <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mp4">पूरा वीडियो वॉकथ्रू देखें (MP4)</a></b> | <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mov">मूल MOV फ़ाइल</a></b>
 </p>
 
 ---
 
-## ⚡ प्रमुख विशेषताएं और तुलना
+<table align="center" width="100%">
+  <tr>
+    <td align="center" style="padding: 24px; background: linear-gradient(135deg, rgba(236,72,153,0.1), rgba(99,102,241,0.1)); border-radius: 16px; border: 1px solid rgba(236,72,153,0.35);">
+      <h3 align="center">💖 हर उस डेवलपर के लिए दिल से बनाया गया, जिसने रात के 2 बजे किसी रहस्यमयी बग को खोजा है</h3>
+      <p align="center">
+        <i>“हमने react-native-inapp-inspector इसलिए बनाया क्योंकि हम उलझी हुई USB केबल्स, टूटे हुए डीबगर पोर्ट्स और टेस्ट बिल्ड्स में आने वाले अनजान क्रैश के दर्द को बहुत अच्छी तरह समझते हैं। हमने अनगिनत रातों की कड़ी मेहनत और पूरा दिल इसमें लगाया है ताकि दुनिया का हर मोबाइल इंजीनियर और QA टेस्टर बिना किसी रुकावट के खुलकर और आसानी से डीबग कर सके।”</i>
+      </p>
+      <p align="center">
+        यदि इस टूल ने आपका घंटों का समय और तनाव बचाया है, किसी महत्वपूर्ण रिलीज़ को समय पर पूरा करने में मदद की है — तो <b>कृपया इस ओपन-सोर्स यात्रा का समर्थन करने पर विचार करें</b>। आपकी एक छोटी सी कॉफ़ी या मासिक प्रायोजन (Sponsorship) हमारे लिए बहुत मायने रखती है और इस प्रोजेक्ट को हमेशा बेहतर बनाए रखने की ऊर्जा देती है। ☕✨
+      </p>
+      <p align="center">
+        <a href="https://github.com/sponsors/vengatmacuser">
+          <img src="https://img.shields.io/badge/Sponsor%20%40vengatmacuser-GitHub%20Sponsors%20%E0%A4%AA%E0%A4%B0%20%E0%A4%B8%E0%A5%8D%E0%A4%AA%E0%A5%89%E0%A4%A8%E0%A5%8D%E0%A4%B8%E0%A4%B0%20%E0%A4%95%E0%A4%B0%E0%A5%87%E0%A4%82-ea4aaa?style=for-the-badge&logo=githubsponsors&logoColor=white" alt="Sponsor on GitHub Sponsors" />
+        </a>
+      </p>
+    </td>
+  </tr>
+</table>
+
+---
+
+## ⚡ विशेषताएं और अन्य टूल्स से तुलना
 
 | क्षमता | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger |
 | :--- | :---: | :---: | :---: | :---: |
-| **डिवाइस पर स्टैंडअलोन (कंप्यूटर की आवश्यकता नहीं)** | ✅ | ❌ | ❌ | ❌ |
+| **डिवाइस पर स्टैंडअलोन (कंप्यूटर/केबल की जरूरत नहीं)** | ✅ | ❌ | ❌ | ❌ |
 | **जीरो-रेंडर निष्क्रिय मोड (0% बैकग्राउंड ओवरहेड)** | ✅ | ❌ | ❌ | ❌ |
 | **HTTP/HTTPS नेटवर्क मॉनिटर (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
 | **टाइमिंग वॉटरफॉल और P95 लेटेंसी** | ✅ | ⚠️ | ⚠️ | ❌ |
 | **cURL और Fetch कोड तुरंत कॉपी करें** | ✅ | ⚠️ | ⚠️ | ❌ |
 | **WebSocket और Socket.IO पैकेट इंस्पेक्टर** | ✅ | ❌ | ⚠️ | ⚠️ |
-| **स्टोरेज इंस्पेक्टर और एडिटर (AsyncStorage और MMKV)** | ✅ (CRUD) | ⚠️ (केवल पढ़ें) | ❌ | ⚠️ |
+| **स्टोरेज इंस्पेक्टर और लाइव एडिटर (AsyncStorage और MMKV)** | ✅ (CRUD) | ⚠️ (केवल पढ़ें) | ❌ | ⚠️ |
 | **पुश नोटिफिकेशन लॉगर (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
 | **Metro द्वारा सटीक लाइन नंबर कंसोल लॉग्स** | ✅ (सटीक फ़ाइल:लाइन) | ✅ | ❌ | ✅ |
 | **Redux स्टेट डिफ और एक्शन टाइमलाइन** | ✅ | ⚠️ | ❌ | ✅ |
+| **एनालिटिक्स इवेंट ट्रैकर (Firebase, Mixpanel)** | ✅ | ❌ | ❌ | ❌ |
 | **क्रैश गार्ड और मल्टी-टाइप ब्रेडक्रंब्स** | ✅ | ❌ | ❌ | ❌ |
 | **नेटिव हार्डवेयर (RAM, हीप, स्टोरेज, बैटरी, FPS)** | ✅ | ⚠️ | ❌ | ❌ |
-| **स्क्रीन रिकॉर्डिंग और स्क्रीनशॉट (MP4 / GIF)** | ✅ | ❌ | ❌ | ❌ |
-| **हिन्दी और भारतीय भाषाओं सहित 25 भाषाएं** | ✅ | ❌ (केवल अंग्रेजी) | ❌ | ❌ |
+| **मीडिया कैप्चर और स्टूडियो एडिटर (क्रॉप, ट्रिम, बैज)** | ✅ (फुल स्टूडियो) | ❌ | ❌ | ❌ |
+| **ड्रैग करने योग्य FAB और पीक-थ्रू ओपेसिटी मोड** | ✅ (0.05 - 1.0) | ❌ | ❌ | ❌ |
+| **Firebase Remote Config द्वारा रिमोट मॉड्यूल टॉगल** | ✅ | ❌ | ❌ | ❌ |
+| **हिन्दी सहित 25 भाषाएं (बॉटम शीट पिकर के साथ)** | ✅ | ❌ (केवल अंग्रेजी) | ❌ | ❌ |
+| **Expo (Bare / Managed) और React Native CLI** | ✅ | ⚠️ | ⚠️ | ⚠️ |
+
+---
+
+## ✨ मुख्य मॉड्यूल और क्षमताएं
+
+### 🌐 1. नेटवर्क इंस्पेक्टर और टाइमिंग वॉटरफॉल
+- **यूनिवर्सल HTTP/HTTPS इंटरसेप्शन**: `fetch`, Axios और `XMLHttpRequest` के साथ स्वचालित रूप से कार्य करता है।
+- **लेटेंसी वॉटरफॉल**: आनुपातिक टाइमिंग बार, स्पीड ग्रेडिंग (तेज़ `<200ms`, मध्यम `200-800ms`, धीमा `>800ms`)।
+- **टेलीमेट्री बार**: वास्तविक समय में सफलता दर (%), औसत लेटेंसी (ms) और P95 लेटेंसी (ms)।
+- **पेलोड व्यूअर**: फॉर्मेट किया गया JSON ट्री, रॉ डेटा, हेडर, क्वेरी पैरामीटर और कॉलर फाइल।
+- **त्वरित एक्सपोर्ट**: एक टैप में **cURL कमांड**, **Fetch स्निपेट** या सारांश रिपोर्ट कॉपी करें।
+
+### ⚡ 2. WebSocket और Socket.IO रियल-टाइम स्ट्रीम इंस्पेक्टर
+- **पूर्ण प्रोटोकॉल कवरेज**: नेटिव WebSocket (`ws://`, `wss://`) और Socket.IO (`v2`, `v3`, `v4`) को ट्रैक करता है।
+- **लाइव फ्रेम टाइमलाइन**: दोनों दिशाओं के पैकेट (⬆️ भेजा गया, ⬇️ प्राप्त हुआ) सटीक समय के साथ।
+- **फ्रेम प्रकार पहचान**: टेक्स्ट, JSON पेलोड, बाइनरी डेटा (ArrayBuffer) और Ping/Pong हार्टबीट।
+- **हैंडशेक और मेटाडेटा**: कनेक्शन स्थिति, ट्रांसपोर्ट प्रकार (websocket/polling) और पुनः कनेक्शन घटनाएं।
+
+### 💾 3. स्टोरेज मैनेजर (AsyncStorage और MMKV)
+- **एकीकृत स्टोरेज इंटरफ़ेस**: `@react-native-async-storage/async-storage` और `react-native-mmkv` दोनों के लिए।
+- **लाइव इन-ऐप CRUD**: सीधे फोन स्क्रीन से कीज़ पढ़ें, खोजें, नई बनाएं, एडिट करें या डिलीट करें।
+- **स्मार्ट टाइप पार्सिंग**: JSON ऑब्जेक्ट्स, एरेज़, बूलियन, संख्या और स्ट्रिंग्स को पहचानता है।
+
+### 🔔 4. पुश नोटिफिकेशन लॉगर
+- **मल्टी-प्रोवाइडर सपोर्ट**: FCM, APNs, Salesforce Marketing Cloud, OneSignal और Notifee के नोटिफिकेशन्स।
+- **ऐप स्थिति ट्रैकिंग**: पहचानता है कि नोटिफिकेशन फोरग्राउंड, बैकग्राउंड या किल्ड अवस्था में आया।
+- **पेलोड विवरण**: डेटा पैरामीटर्स, डीप-लिंक, शीर्षक, संदेश और चैनल आईडी देखें।
+
+### 🪵 5. कंसोल लॉगर और Metro सोर्स-मैप सिम्बॉलिकेशन
+- **सटीक लाइन नंबर**: `console.log`, `warn` और `error` को इंटरसेप्ट करके Metro बंडलर के जरिए प्रोजेक्ट की वास्तविक फाइल और लाइन नंबर दिखाता है (`HomeScreen.tsx:42:15`)।
+- **पैरामीटर ब्रेकडाउन**: प्रत्येक पास किए गए आर्गुमेंट को अलग-अलग प्रकार के साथ जांचें।
+- **कॉल स्टैक और एरर स्टैक**: फंक्शन नाम, फाइल, लाइन और एरर ट्री का संरचित दृश्य।
+- **डुप्लिकेट कोलाप्सिंग**: बार-बार आने वाले लॉग्स को एक साथ गिनकर (`×N`) दिखाता है।
+
+### 🔄 6. Redux स्टेट डिफ्स और एक्शन टाइमलाइन
+- **Redux Toolkit एकीकरण**: Redux Store, RTK Query और `redux-persist` के साथ सहज रूप से कार्य करता है।
+- **एक्शन टाइमलाइन**: डिस्पैच किए गए एक्शन्स का क्रमानुसार विवरण और समय।
+- **कलर-कोडेड स्टेट डिफ्स**: बदलावों को रंगों से पहचानें (**हरा** जोड़ने के लिए, **पीला** बदलने के लिए, **लाल** हटाने के लिए)।
+
+### 📊 7. एनालिटिक्स इवेंट ट्रैकर
+- **Firebase Analytics ऑटो-हुक**: `logEvent`, `logScreenView`, `setUserProperties` और `setUserId` को स्वचालित रूप से कैप्चर करता है।
+- **प्लगइन आर्किटेक्चर**: Google Analytics 4, Mixpanel, Segment और Amplitude को आसानी से जोड़ें।
+- **पैरामीटर और टाइमलाइन**: इवेंट पैरामीटर्स, यूजर प्रॉपर्टीज और टाइमस्टैम्प्स की समीक्षा करें।
+
+### 🛡️ 8. क्रैश प्रोटेक्शन और ग्लोबल एरर बाउंड्री
+- **सुरक्षित माइक्रो-UI**: इंस्पेक्टर का अपना वातावरण पूरी तरह अलग है, यह होस्ट ऐप को क्रैश नहीं होने देता।
+- **ग्लोबल एरर बाउंड्री**: अनहैंडल्ड जावास्क्रिप्ट रेंडरिंग क्रैश को पकड़कर रिकवरी स्क्रीन दिखाता है।
+- **ब्रेडक्रंब्स टाइमलाइन**: क्रैश होने से ठीक पहले के यूजर नेविगेशन, नेटवर्क कॉल्स और Redux एक्शन्स दिखाता है।
+
+### 📱 9. नेटिव हार्डवेयर, RAM और परफॉर्मेंस टेलीमेट्री
+- **सिस्टम मेट्रिक्स**: कुल RAM, उपलब्ध फ्री RAM, नेटिव हीप, फ्री स्टोरेज, बैटरी % और CPU आर्किटेक्चर।
+- **लाइव FPS काउंटर**: स्क्रीन रिफ्रेश रेट की निरंतर निगरानी।
+- **मेमोरी वार्निंग ऑटो-प्रूनिंग**: कम मेमोरी का अलर्ट मिलने पर स्वतः इन-मेमोरी लॉग्स साफ़ करता है।
+- **शेक जेस्चर**: डिवाइस को हिलाकर या `Ctrl+Cmd+Z` / `Cmd+M` दबाकर इंस्पेक्टर खोलें या बंद करें।
+
+### 📸 10. नेटिव मीडिया कैप्चर और इन-ऐप स्टूडियो एडिटर
+- **डिवाइस पर कैप्चर**: हाई-रेज़ोल्यूशन स्क्रीनशॉट, स्मूथ MP4 वीडियो रिकॉर्डिंग या एनिमेटेड GIF बनाएं।
+- **फुल मीडिया गैलरी**: मीडिया देखें, फ़िल्टर करें (फोटो/वीडियो/GIF), बैच सेलेक्ट करें और URI कॉपी करें।
+- **फोटो और वीडियो एडिटिंग स्टूडियो**:
+  - **क्रॉप और रीसाइज़**: स्टैंडर्ड रेशियो (1:1, 4:3, 16:9) में क्रॉप करें और अपलोड हल्का करने के लिए रीसाइज़ करें।
+  - **वीडियो ट्रिमिंग और ऑडियो**: शुरू और अंत का समय सेट करें, प्लेबैक स्पीड बदलें (0.5× – 2.0×) या ऑडियो म्यूट करें।
+  - **PNG फ्रेम स्नैपशॉट**: वीडियो चलाते समय किसी भी पल का हाई-रेज़ोल्यूशन PNG फ्रेम एक्सट्रैक्ट करें।
+- **QA एनोटेशन और बग मार्किंग**:
+  - **इंस्टाग्राम 3×3 ग्रिडलाइन्स**: पिक्सेल-परफेक्ट अलाइनमेंट के लिए ग्रिड ओवरले चालू करें।
+  - **स्टेप नंबरिंग बैज**: रीप्रोडक्शन स्टेप्स दिखाने के लिए नंबर वाले बैज (`1`, `2`, `3`...) लगाएं।
+  - **बग और नोट टैग्स**: स्क्रीनशॉट पर बग (`🐛`), नोट (`📝`) और चेतावनी टैग जोड़ें।
+  - **टेक्स्ट ओवरले और QA वॉटरमार्क**: कस्टम टेक्स्ट लिखें और डिवाइस मॉडल व OS का वॉटरमार्क जोड़ें।
+- **कैमरा रोल इंपोर्टर**: डिवाइस की फोटो लाइब्रेरी से सीधे फोटो या वीडियो इंपोर्ट करके एडिट करें।
+
+### 🎛️ 11. ड्रैग करने योग्य फ्लोटिंग FAB और पीक-थ्रू ओपेसिटी (पीक मोड)
+- **फ्लोटिंग एक्शन लॉन्चर**: स्क्रीन के किसी भी कोने में ड्रैग करने योग्य बबल जिसमें अनरीड इंडिकेटर और बैज काउंटर है।
+- **ड्रैग-टू-डिसमिस ज़ोन**: नीचे दिए गए डिस्मिस टारगेट पर खींचकर बटन को आसानी से छिपाएं।
+- **पीक-थ्रू ट्रांसपेरेंट मोड**: 0.05 से 1.0 तक पारदर्शिता सेट करें ताकि आप नीचे की ऐप चलाते हुए भी नेटवर्क और स्टेट देख सकें।
+
+### ☁️ 12. Firebase Remote Config मॉड्यूल प्रबंधन
+- **रिमोट फीचर फ्लैग्स**: बिना नया ऐप वर्जन रिलीज़ किए Firebase Remote Config से क्लाउड द्वारा इंस्पेक्टर के टैब्स चालू या बंद करें।
+
+### 🌍 13. 25 वैश्विक भाषाएं और इंटरएक्टिव बॉटम शीट
+- **25 समर्थित भाषाएं**: हिन्दी, अंग्रेज़ी, स्पैनिश, फ़्रेंच, जर्मन, जापानी, कोरियन, चीनी, अरबी, रूसी, पुर्तगाली, तमिल, तेलुगु, मराठी, गुजराती, कन्नड़, मलयालम, पंजाबी, बंगाली आदि।
+- **इंटरएक्टिव भाषा चयनकर्ता**: हेडर में `[ 🌐 HI ▾ ]` टैप करके झंडों और खोज बार के साथ बॉटम शीट खोलें।
+
+---
+
+## 🔎 DevTools सर्च सिंटैक्स
+
+```text
+method:POST status:200         # Filter POST requests with 200 OK
+url:api.myapp.com -analytics   # Filter domain and exclude analytics
+header:authorization           # Filter requests containing auth header
+body:"orderId"                 # Search in request/response JSON body
+page:CheckoutScreen            # Filter logs by screen/route name
+file:ProfileView.tsx           # Filter console logs by source file
+-healthcheck -socket.io        # Exclude unwanted logs
+```
 
 ---
 
@@ -76,8 +202,10 @@
 
 ```bash
 npm install --save-dev react-native-inapp-inspector react-native-svg
-# या
+# or
 yarn add -D react-native-inapp-inspector react-native-svg
+# or
+pnpm add -D react-native-inapp-inspector react-native-svg
 ```
 
 #### iOS CocoaPods
@@ -85,7 +213,7 @@ yarn add -D react-native-inapp-inspector react-native-svg
 cd ios && pod install && cd ..
 ```
 
-### Expo प्रोजेक्ट्स
+### Expo
 ```bash
 npx expo install react-native-inapp-inspector react-native-svg
 ```
@@ -94,8 +222,6 @@ npx expo install react-native-inapp-inspector react-native-svg
 
 ## 🚀 त्वरित सेटअप
 
-अपनी ऐप के मुख्य घटक (`App.tsx` या `index.js`) में जोड़ें:
-
 ```tsx
 import React from 'react';
 import { SafeAreaView } from 'react-native';
@@ -109,7 +235,7 @@ import NetworkInspector, {
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { store } from './src/store';
 
-// ⚡ ऐप माउंट होने से पहले लॉगर प्रारंभ करें
+// ⚡ Initialize interceptors before app mount
 setupNetworkLogger();
 setupConsoleLogger();
 setupSocketLogger();
@@ -122,7 +248,7 @@ export default function App() {
     <SafeAreaView style={{ flex: 1 }}>
       <YourAppRoot />
 
-      {/* केवल डेवलपमेंट में इंस्पेक्टर ओवरले दिखाएं */}
+      {/* Mount In-App Inspector in DEV builds */}
       {__DEV__ && (
         <NetworkInspector
           enabled={true}
@@ -133,31 +259,3 @@ export default function App() {
   );
 }
 ```
-
----
-
-## 🔎 DevTools सर्च सिंटैक्स
-
-```text
-method:POST status:200         # POST और 200 OK अनुरोध फ़िल्टर करें
-url:api.myapp.com -analytics   # analytics को छोड़कर केवल myapp API खोजें
-header:authorization           # ऑथराइजेशन टोकन वाले अनुरोध खोजें
-body:"orderId"                 # JSON बॉडी के अंदर गहराई से खोजें
-page:CheckoutScreen            # React Navigation स्क्रीन नाम से फ़िल्टर करें
-file:ProfileView.tsx           # विशिष्ट TSX फ़ाइल से लॉग खोजें
-```
-
-## 🔍 भारतीय डेवलपर्स और क्षेत्रीय भाषाओं के लिए कीवर्ड (Keywords)
-
-भारत और दक्षिण एशिया के डेवलपर्स के लिए सर्च अनुकूलित:
-
-* **हिंदी एवं क्षेत्रीय भाषाएँ**: नेटवर्क-लॉगर, मोबाइल डिबगिंग टूल, इन-ऐप इंस्पेक्टर, வலைப்பின்னல் பதிவர் (Tamil), நெட்வொர்க் இன்ஸ்பெக்டர், నెట్‌వర్క్ లాగర్ (Telugu), ನೆಟ್‌ವರ್ಕ್ ಲಾಗರ್ (Kannada), നെറ്റ്‌വർക്ക് ലോഗർ (Malayalam), নেটওয়ার্ক লগার (Bengali), नेटवर्क लॉगर मराठी (Marathi).
-* **प्रमुख टेक हब**: React Native Bengaluru, Hyderabad, Pune, Delhi NCR, Chennai, Mumbai developers.
-* **वैकल्पिक टूल्स**: Flipper alternative India, Charles proxy alternative, Chucker for React Native, Proxyman alternative, Reactotron alternative.
-
----
-
-## 📄 लाइसेंस
-
-MIT © [vengatmacuser](LICENSE)
-

package/README.ja.md

@@ -1,4 +1,10 @@
-# React Native In-App Inspector (アプリ内総合デバッガー)
+<p align="center">
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector">
+    <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/inapp_inspector_icon.gif" alt="React Native In-App Inspector Icon" width="120" height="120" style="border-radius: 28px; box-shadow: 0 10px 30px rgba(99, 102, 241, 0.45);" />
+  </a>
+</p>
+
+# React Native In-App Inspector (アプリ内デバッグツールキット)
 
 <p align="center">
   <b><a href="./README.md">English</a></b> |
@@ -27,6 +33,7 @@
   <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/dm/react-native-inapp-inspector?color=3b82f6&label=downloads" alt="npm downloads" /></a>
   <a href="https://github.com/vengatmacuser/react-native-inapp-inspector"><img src="https://img.shields.io/github/stars/vengatmacuser/react-native-inapp-inspector?color=f59e0b&label=stars&logo=github" alt="GitHub stars" /></a>
   <a href="https://github.com/vengatmacuser/react-native-inapp-inspector/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="license" /></a>
+  <a href="https://github.com/sponsors/vengatmacuser"><img src="https://img.shields.io/badge/sponsor-GitHub%20Sponsors-ea4aaa?logo=githubsponsors&logoColor=white" alt="sponsor" /></a>
 </p>
 
 <p align="center">
@@ -37,9 +44,9 @@
   <img src="https://img.shields.io/badge/Engine-Hermes%20%7C%20JSC-9333ea" alt="Engine" />
 </p>
 
-**React Native & Expo** のための**設定不要・完全自立型のアプリ内デバッグツールキット**。ケーブル接続やプロキシ設定不要で、HTTP/HTTPS通信、WebSocket・Socket.IO通信、Metroシンボル化されたコンソールログ、Reduxステート差分、AsyncStorage & MMKVストレージ、プッシュ通知、ネイティブハードウェア指標、画面録画・スクリーンショットを端末上で直接リアルタイム監視できます。
+React Native および Expo のための**設定不要・オールインワンのアプリ内デバッグツールキット**。HTTP/HTTPS ネットワーク通信の傍受、WebSocket / Socket.IO のリアルタイムストリーム、Metro による正確な行番号付きコンソールログ、Redux 状態差分、AsyncStorage & MMKV ストレージ、プッシュ通知、端末ハードウェア統計、そしてスタジオ編集機能付きのスクリーンショット・動画録画を PC やケーブル接続なしでスマホ単体で実現します。
 
-> 🚀 **Flipper、Charles、Proxyman、Chuckerのモダンな代替ツール** — スタンドアロン端末、テスト配信（TestFlight/APK）、実機デバッグでPCやデバッグポートなしで動作します。
+> 🚀 **Flipper、Charles、Proxyman、Chucker に代わる軽量でモダンな選択肢** — 実機上、TestFlight/APK 内でデスクトップアプリやケーブルなしで動作します。
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/walkthrough.gif" alt="React Native In-App Inspector Walkthrough" width="360" style="border-radius: 20px; box-shadow: 0 12px 36px rgba(0,0,0,0.5);" />
@@ -51,34 +58,154 @@
 
 ---
 
-## ⚡ 主な特徴と他ツール比較
+<table align="center" width="100%">
+  <tr>
+    <td align="center" style="padding: 24px; background: linear-gradient(135deg, rgba(236,72,153,0.1), rgba(99,102,241,0.1)); border-radius: 16px; border: 1px solid rgba(236,72,153,0.35);">
+      <h3 align="center">💖 深夜2時に原因不明のバグと戦ったすべてのエンジニアへ愛を込めて</h3>
+      <p align="center">
+        <i>「react-native-inapp-inspector を開発したのは、絡まるUSBケーブルや突然切断されるデバッガポート、実機ビルドだけで起きる謎のエラーに悩まされる辛さを誰よりも知っているからです。世界中のすべてのモバイル開発者とQAエンジニアが、PCに縛られず自由で快適にデバッグできるように、数え切れないほどの徹夜と情熱を注ぎ込みました。」</i>
+      </p>
+      <p align="center">
+        もしこのツールがあなたのデバッグ時間を節約し、大切なリリースを成功に導き、日々の開発体験を少しでも豊かにしたなら —— <b>ぜひ本プロジェクトへのスポンサー支援をご検討ください</b>。一杯の温かいコーヒーや温かいご支援が、今後の継続的な開発と完全無料のオープンソースを支える大きな原動力になります。☕✨
+      </p>
+      <p align="center">
+        <a href="https://github.com/sponsors/vengatmacuser">
+          <img src="https://img.shields.io/badge/Sponsor%20%40vengatmacuser-GitHub%20Sponsors%20%E3%81%A7%E6%94%AF%E6%8F%B4%E3%81%99%E3%82%8B-ea4aaa?style=for-the-badge&logo=githubsponsors&logoColor=white" alt="Sponsor on GitHub Sponsors" />
+        </a>
+      </p>
+    </td>
+  </tr>
+</table>
+
+---
+
+## ⚡ 特徴と他ツールとの比較
 
 | 機能 | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger |
 | :--- | :---: | :---: | :---: | :---: |
-| **端末単体で動作（PC・ケーブル不要）** | ✅ | ❌ | ❌ | ❌ |
-| **非表示時ゼロ負荷（バックグラウンドCPU 0%）** | ✅ | ❌ | ❌ | ❌ |
-| **HTTP/HTTPS ネットワーク監視 (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
-| **ウォーターフォール表示 & P95 レイテンシ分析** | ✅ | ⚠️ | ⚠️ | ❌ |
-| **cURL & Fetch コード即時コピー** | ✅ | ⚠️ | ⚠️ | ❌ |
-| **WebSocket & Socket.IO 双方向パケット監視** | ✅ | ❌ | ⚠️ | ⚠️ |
-| **ストレージ確認・リアルタイム編集 (AsyncStorage & MMKV)** | ✅ (CRUD操作) | ⚠️ (参照のみ) | ❌ | ⚠️ |
-| **プッシュ通知ログ (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
-| **Metroソースマップによる行番号特定ログ** | ✅ (正確な行番表示) | ✅ | ❌ | ✅ |
-| **Redux State差分 & Actionタイムライン** | ✅ | ⚠️ | ❌ | ✅ |
-| **クラッシュ防止 & パンくずリスト (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ |
-| **端末ハードウェア情報 (RAM・ヒープ・空き容量・バッテリー)** | ✅ | ⚠️ | ❌ | ❌ |
-| **端末内画面録画・スクリーンショット (MP4・GIF)** | ✅ | ❌ | ❌ | ❌ |
-| **日本語を含む世界25言語対応（ボトムシート切替）** | ✅ | ❌ (英語のみ) | ❌ | ❌ |
+| **端末単体で動作 (PCやケーブル不要)** | ✅ | ❌ | ❌ | ❌ |
+| **非アクティブ時ゼロ負荷 (バックグラウンドCPU 0%)** | ✅ | ❌ | ❌ | ❌ |
+| **HTTP/HTTPS 通信インスペクター (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
+| **タイミングウォーターフォール & P95 レイテンシ** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **cURL / Fetch コードのワンタップ即座コピー** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **双方向 WebSocket & Socket.IO パケット監視** | ✅ | ❌ | ⚠️ | ⚠️ |
+| **ライブストレージ編集 (AsyncStorage & MMKV)** | ✅ (CRUD対応) | ⚠️ (読み取り専用) | ❌ | ⚠️ |
+| **プッシュ通知ロガー (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
+| **Metro による正確なソースコード行番号シンボリケーション** | ✅ (正確な行番号) | ✅ | ❌ | ✅ |
+| **Redux 状態 Diff & アクションタイムライン** | ✅ | ⚠️ | ❌ | ✅ |
+| **アナリティクスイベント追跡 (Firebase, Mixpanel)** | ✅ | ❌ | ❌ | ❌ |
+| **クラッシュ保護 & マルチタイプブレッドクラム** | ✅ | ❌ | ❌ | ❌ |
+| **端末ハードウェア情報 (RAM, ヒープ, ストレージ, バッテリー, FPS)** | ✅ | ⚠️ | ❌ | ❌ |
+| **メディアキャプチャ & スタジオエディター (トリミング, バッジ)** | ✅ (フルスタジオ) | ❌ | ❌ | ❌ |
+| **ドラッグ可能なフローティングFAB & シースルー透過モード** | ✅ (0.05 - 1.0) | ❌ | ❌ | ❌ |
+| **Firebase Remote Config によるクラウドモジュール管理** | ✅ | ❌ | ❌ | ❌ |
+| **ボトムシート選択付き 25 言語対応** | ✅ | ❌ (英語のみ) | ❌ | ❌ |
+| **Expo (Bare / Managed) & React Native CLI** | ✅ | ⚠️ | ⚠️ | ⚠️ |
+
+---
+
+## ✨ 主な機能とモジュール
+
+### 🌐 1. ネットワークインスペクター & タイムライン・ウォーターフォール
+- **万能な HTTP/HTTPS 傍受**: `fetch`、Axios（デフォルトおよび `axios.create()`）、`XMLHttpRequest` を自動追跡。
+- **レイテンシの内訳**: 視覚的なウォーターフォールバーと速度判定（高速 `<200ms`、通常 `200-800ms`、低速 `>800ms`）。
+- **リアルタイム統計**: 成功率 (%)、平均レイテンシ (ms)、P95 レイテンシ (ms) を常時表示。
+- **ペイロード閲覧**: フォーマット済み JSON ツリー、Raw テキスト、ヘッダー、クエリパラメータ、呼び出し元ファイル。
+- **ワンタップ出力**: **cURL コマンド**、**Fetch コードスニペット**、または要約レポートをワンタップでコピー。
+
+### ⚡ 2. WebSocket & Socket.IO リアルタイムストリームインスペクター
+- **全プロトコル対応**: 標準 WebSocket (`ws://`, `wss://`) および Socket.IO (`v2`, `v3`, `v4`) をサポート。
+- **双方向フレーム監視**: 送信 (⬆️) と受信 (⬇️) パケットを高精度タイムスタンプ付きで記録。
+- **多彩なフレームタイプ識別**: JSON テキスト、バイナリ長 (ArrayBuffer)、Ping/Pong ハートビートを識別。
+- **接続詳細**: ハンドシェイクパラメータ、接続モード (websocket/polling)、再接続イベントを追跡。
+
+### 💾 3. ストレージマネージャー (AsyncStorage & MMKV)
+- **統一ストレージインターフェース**: `@react-native-async-storage/async-storage` および `react-native-mmkv` に対応。
+- **アプリ内リアルタイム CRUD**: 端末上でキーの閲覧、検索、新規作成、編集、削除が可能。
+- **スマート型解析**: JSON オブジェクト、配列、真偽値、数値、文字列を自動判別。
+
+### 🔔 4. プッシュ通知ロガー
+- **マルチプロバイダー対応**: FCM、APNs、Salesforce Marketing Cloud、OneSignal、Notifee の通知を捕捉。
+- **アプリ状態トラッキング**: フォアグラウンド、バックグラウンド、または終了状態からの起動を判別。
+- **ペイロードインスペクター**: データパラメータ、ディープリンク URL、タイトル、本文、チャンネル ID を表示。
+
+### 🪵 5. コンソールロガー & Metro ソースマップシンボリケーション
+- **正確な行番号**: `console.log`、`warn`、`error` を捕捉し、Metro バンドラーを通じてソースファイルの正確な行番号を表示 (`HomeScreen.tsx:42:15`)。
+- **引数の個別展開**: 渡された各引数を個別のカードで型情報とともに表示。
+- **コールスタック & エラースタック**: 関数名、ファイル名、エラーオブジェクトのスタックトレースを構造化表示。
+- **重複ログの集約**: 同一ログの連続出力を `×N` で自動的に折りたたみ。
+
+### 🔄 6. Redux 状態 Diff & アクションタイムライン
+- **Redux Toolkit 対応**: Redux Store、RTK Query、`redux-persist` と完全連携。
+- **アクション履歴**: ディスパッチされたアクションの時系列順表示と処理時間の計測。
+- **カラーコード化 Diff**: 変更内容を視覚的にハイライト（**緑**: 追加、**黄**: 更新、**赤**: 削除）。
+
+### 📊 7. アナリティクスイベントトラッカー
+- **Firebase Analytics 自動連携**: `logEvent`、`logScreenView`、`setUserProperties`、`setUserId` を自動監視。
+- **プラグイン構造**: Google Analytics 4、Mixpanel、Segment、Amplitude に容易に対応可能。
+- **パラメータ検証**: イベント属性、ユーザープロパティ、タイムスタンプを即座に確認。
+
+### 🛡️ 8. クラッシュ保護 & グローバルエラーバウンダリ
+- **完全分離 Micro-UI**: インスペクター内部のエラーがホストアプリをクラッシュさせることはありません。
+- **グローバル ErrorBoundary**: React の未処理レンダリングクラッシュを捕捉し、復帰ボタン付きの UI を表示。
+- **ブレッドクラム追跡**: クラッシュ直前の画面遷移、通信、Redux アクションを時系列で追跡。
+
+### 📱 9. ネイティブハードウェア、RAM & パフォーマンステレメトリ
+- **低レイヤーシステム指標**: 総 RAM、空き RAM、ネイティブヒープ、空きストレージ容量、バッテリー残量・充電状態、CPU アーキテクチャ。
+- **リアルタイム FPS 計測**: 画面描画の FPS をリアルタイム監視。
+- **メモリ警告時の自動パージ**: OS の低メモリ警告を受け取った際に自動的に内部ログを解放。
+- **端末シェイク機能**: 端末を振るか、`Ctrl+Cmd+Z` / `Cmd+M` でインスペクターの表示を切り替え。
+
+### 📸 10. ネイティブメディアキャプチャ & アプリ内スタジオエディター
+- **実機で直接キャプチャ**: 高解像度スクリーンショット、スムーズな MP4 動画録画、アニメーション GIF を作成。
+- **高機能メディアギャラリー**: 写真、動画、GIF を閲覧・絞り込み、一括削除や URI コピーが可能。
+- **写真 & 動画スタジオ編集**:
+  - **トリミング & リサイズ**: アスペクト比 (1:1 正方形, 4:3, 16:9) に切り抜き、軽量化のための解像度縮小。
+  - **動画カット & 音声制御**: 開始/終了位置のスライダー調整、再生速度変更 (0.5× – 2.0×)、音声ミュート。
+  - **PNG フレーム抽出**: 動画再生中の任意の瞬間を高精細 PNG 画像としてワンタップ保存。
+- **QA 障害報告 & 注釈ツール**:
+  - **Instagram 3×3 グリッド**: 正確な UI アライメント確認用のグリッド線を表示。
+  - **ステップ番号バッジ**: 不具合の再現手順を示す番号バッジ (`1`, `2`, `3`...) をタップまたはドラッグで配置。
+  - **バグ & メモタグ**: バグ (`🐛`)、メモ (`📝`)、警告スタンプを配置。
+  - **テキスト追加 & QA 透かし**: 自由な説明テキストの記入や端末型番・OS 情報付きの QA 透かし。
+- **写真ライブラリ読み込み**: デバイス内の既存の写真や動画をインポートして編集・検証が可能。
+
+### 🎛️ 11. ドラッグ可能なフローティングFAB & シースルー透過モード (Peek Mode)
+- **フローティングランチャー**: 画面の隅に移動可能なアイコン。未読件数バッジ付き。
+- **画面下部ドラッグ非表示**: 画面下の光るターゲットにドラッグしてスマートに非表示。
+- **シースルー透過モード**: 透過度を 0.05 〜 1.0 のスライダーで調整可能。背面のアプリを操作しながらリアルタイムに通信や Redux を確認。
+
+### ☁️ 12. Firebase Remote Config 動的モジュール管理
+- **クラウド機能フラグ**: アプリを再リリースすることなく、Firebase Remote Config を使ってインスペクターの各モジュールを遠隔で ON/OFF 切替。
+
+### 🌍 13. 25言語対応 & インタラクティブボトムシート
+- **25の対応言語**: 日本語、英語、中国語（簡体字/繁体字）、韓国語、スペイン語、フランス語、ドイツ語、ロシア語、ヒンディー語、アラビア語、ポルトガル語など。
+- **ボトムシート選択**: ヘッダーの `[ 🌐 JA ▾ ]` をタップして国旗付きの検索可能なシートから瞬時に切り替え。
+
+---
+
+## 🔎 DevTools 検索構文
+
+```text
+method:POST status:200         # Filter POST requests with 200 OK
+url:api.myapp.com -analytics   # Filter domain and exclude analytics
+header:authorization           # Filter requests containing auth header
+body:"orderId"                 # Search in request/response JSON body
+page:CheckoutScreen            # Filter logs by screen/route name
+file:ProfileView.tsx           # Filter console logs by source file
+-healthcheck -socket.io        # Exclude unwanted logs
+```
 
 ---
 
 ## 📦 インストール
 
-### Bare React Native
 ```bash
 npm install --save-dev react-native-inapp-inspector react-native-svg
-# または
+# or
 yarn add -D react-native-inapp-inspector react-native-svg
+# or
+pnpm add -D react-native-inapp-inspector react-native-svg
 ```
 
 #### iOS CocoaPods
@@ -86,7 +213,7 @@ yarn add -D react-native-inapp-inspector react-native-svg
 cd ios && pod install && cd ..
 ```
 
-### Expo プロジェクト
+### Expo
 ```bash
 npx expo install react-native-inapp-inspector react-native-svg
 ```
@@ -95,8 +222,6 @@ npx expo install react-native-inapp-inspector react-native-svg
 
 ## 🚀 クイックスタート
 
-エントリーファイル（`App.tsx` または `index.js`）で初期化します：
-
 ```tsx
 import React from 'react';
 import { SafeAreaView } from 'react-native';
@@ -110,7 +235,7 @@ import NetworkInspector, {
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { store } from './src/store';
 
-// ⚡ コンポーネント描画前に初期化（起動時リクエストも漏れなくキャプチャ）
+// ⚡ Initialize interceptors before app mount
 setupNetworkLogger();
 setupConsoleLogger();
 setupSocketLogger();
@@ -123,7 +248,7 @@ export default function App() {
     <SafeAreaView style={{ flex: 1 }}>
       <YourAppRoot />
 
-      {/* 開発環境のみインスペクターを表示 */}
+      {/* Mount In-App Inspector in DEV builds */}
       {__DEV__ && (
         <NetworkInspector
           enabled={true}
@@ -134,47 +259,3 @@ export default function App() {
   );
 }
 ```
-
----
-
-## 🔎 DevTools 検索構文
-
-Chrome DevToolsスタイルの検索フィルターに対応：
-
-```text
-method:POST status:200         # POSTリクエストかつ200 OKのみ表示
-url:api.myapp.com -analytics   # analyticsを除外して対象APIのみ検索
-header:authorization           # 認証ヘッダー付きリクエストを検索
-body:"orderId"                 # リクエスト/レスポンスJSON内を深掘り検索
-page:CheckoutScreen            # 画面名（Route）でフィルタリング
-file:ProfileView.tsx           # 特定のTSXファイルから出力されたログを検索
-```
-
----
-
-## 📱 モジュール別インポート
-
-```typescript
-import { setupNetworkLogger } from 'react-native-inapp-inspector/network';
-import { setupSocketLogger } from 'react-native-inapp-inspector/socket';
-import { connectAsyncStorage, connectMMKV } from 'react-native-inapp-inspector/storage';
-import { autoSetupPushLogger } from 'react-native-inapp-inspector/push';
-import { connectReduxStore } from 'react-native-inapp-inspector/redux';
-import { ScreenCapture } from 'react-native-inapp-inspector/capture';
-```
-
-## 🔍 開発者向け検索キーワード (Search Keywords)
-
-日本のReact Nativeエンジニアが検索しやすい関連キーワード一覧：
-
-* **主な検索ワード**: リアクトネイティブ デバッガー, ネットワークロガー, アプリ内パケットキャプチャ, モバイル通信ログ監視, 実機通信デバッグ, 開発ツール, 端末内DevTools.
-* **代替ツール**: Flipper 代替 (Flipper alternative), Charles プロキシ代替, Chucker React Native, Proxyman 代替, Reactotron 代替.
-* **機能別**: WebSocket リアルタイム監視, Socket.io パケット監視, MMKV エディタ, AsyncStorage ビューアー, Redux 状態監視, プッシュ通知ログ.
-* **日本市場**: 日本国内のモバイルアプリ開発、Expo / Bare React Native プロジェクトに最適化。
-
----
-
-## 📄 ライセンス
-
-MIT © [vengatmacuser](LICENSE)
-