react-native-inapp-inspector 2.5.1 → 2.5.2

package/README.pt-BR.md

@@ -1,4 +1,10 @@
-# React Native In-App Inspector (Inspetor e Depurador no App)
+<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 (Kit de Ferramentas de Depuração no App)
 
 <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>
 
-O **conjunto completo de ferramentas de depuração in-app para React Native & Expo sem necessidade de configuração**. Inspecione tráfego de rede HTTP/HTTPS, conexões WebSocket & Socket.IO em tempo real, logs do console com número exato de linha via Metro, diferenças de estado do Redux, armazenamento ao vivo de AsyncStorage e MMKV, notificações push, métricas de hardware nativo e gravação de tela diretamente no seu celular sem cabos.
+O **kit completo de ferramentas de depuração sem configuração para React Native e Expo**. Inspecione tráfego de rede HTTP/HTTPS, fluxos em tempo real de WebSocket e Socket.IO, registros de console com número de linha exato via Metro, diffs de estado no Redux, armazenamento ao vivo de AsyncStorage e MMKV, notificações push, métricas de hardware e faça capturas de tela/vídeo com estúdio de edição integrado diretamente no celular sem cabos.
 
-> 🚀 **A alternativa moderna e leve ao Flipper, Charles e Chucker** — funciona de forma independente no aparelho, em builds de teste (APK / TestFlight) e sem portas de depuração abertas.
+> 🚀 **A alternativa moderna e leve ao Flipper, Charles, Proxyman e Chucker** — funciona de forma autônoma no aparelho, em builds de teste (APK/TestFlight) e sem fios ou portas abertas.
 
 <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">Assistir ao Vídeo de Demonstração (MP4)</a></b> | <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mov">MOV Original</a></b>
+  🎬 <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mp4">Assistir ao Vídeo de Demonstração Completo (MP4)</a></b> | <b><a href="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/docs/video_walkthrough.mov">MOV Original</a></b>
 </p>
 
 ---
 
-## ⚡ Comparativo de Recursos
+<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">💖 Feito com Carinho para Cada Dev que já Perseguiu um Bug Misterioso às 2 da Madrugada</h3>
+      <p align="center">
+        <i>“Criamos o react-native-inapp-inspector porque conhecemos de perto a dor dos cabos enrolados, portas de depuração caindo e crashes misteriosos em builds de teste. Dedicamos inúmeras noites em claro e todo o nosso coração para que cada desenvolvedor mobile e time de QA do mundo possa depurar direto no celular com liberdade, agilidade e paz de espírito.”</i>
+      </p>
+      <p align="center">
+        Se esta ferramenta economizou horas de estresse na sua rotina, te ajudou a entregar uma versão crítica no prazo ou tornou seu dia a dia mais leve — <b>por favor, considere apoiar o projeto com um patrocínio</b>. Um cafezinho ou um apoio mensal significa muito e mantém o código aberto independente vivo para todos. ☕✨
+      </p>
+      <p align="center">
+        <a href="https://github.com/sponsors/vengatmacuser">
+          <img src="https://img.shields.io/badge/Sponsor%20%40vengatmacuser-Apoiar%20no%20GitHub%20Sponsors-ea4aaa?style=for-the-badge&logo=githubsponsors&logoColor=white" alt="Sponsor on GitHub Sponsors" />
+        </a>
+      </p>
+    </td>
+  </tr>
+</table>
+
+---
+
+## ⚡ Comparativo com Outras Ferramentas
 
 | Recurso | **react-native-inapp-inspector** | Flipper | Charles / Proxyman | RN Debugger |
 | :--- | :---: | :---: | :---: | :---: |
-| **Executa no dispositivo (sem PC ou cabos)** | ✅ | ❌ | ❌ | ❌ |
-| **0% de uso de CPU em segundo plano** | ✅ | ❌ | ❌ | ❌ |
+| **Funciona direto no aparelho (Sem PC ou cabos)** | ✅ | ❌ | ❌ | ❌ |
+| **Zero consumo em repouso (0% CPU em segundo plano)** | ✅ | ❌ | ❌ | ❌ |
 | **Inspetor de rede HTTP/HTTPS (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
-| **Gráfico cascata de tempo e métricas P95** | ✅ | ⚠️ | ⚠️ | ❌ |
-| **Cópia instantânea de cURL e Fetch** | ✅ | ⚠️ | ⚠️ | ❌ |
-| **Monitor de pacotes WebSocket & Socket.IO** | ✅ | ❌ | ⚠️ | ⚠️ |
-| **Editor de armazenamento ao vivo (AsyncStorage & MMKV)** | ✅ (CRUD) | ⚠️ (Apenas leitura)| ❌ | ⚠️ |
-| **Histórico de notificações push (APNs, FCM)** | ✅ | ❌ | ❌ | ❌ |
-| **Logs com linha e arquivo reais via Metro** | ✅ (Linha exata) | ✅ | ❌ | ✅ |
-| **Diferenças de estado Redux e linha do tempo** | ✅ | ⚠️ | ❌ | ✅ |
-| **Proteção contra crash e rastreamento (Breadcrumbs)**| ✅ | ❌ | ❌ | ❌ |
-| **Telemetria de hardware (RAM, heap, disco, bateria)**| ✅ | ⚠️ | ❌ | ❌ |
-| **Gravação de tela e captura de tela (MP4 / GIF)** | ✅ | ❌ | ❌ | ❌ |
-| **25 idiomas globais com seletor Bottom Sheet** | ✅ | ❌ (Apenas inglês)| ❌ | ❌ |
+| **Cascata de latência & Percentil P95** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **Cópia instantânea de snippets cURL e Fetch** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **Monitoramento de WebSocket & Socket.IO bidirecional** | ✅ | ❌ | ⚠️ | ⚠️ |
+| **Editor de armazenamento ao vivo (AsyncStorage & MMKV)** | ✅ (CRUD) | ⚠️ (Somente leitura) | ❌ | ⚠️ |
+| **Registro de notificações push (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
+| **Logs com numeração de linhas reais via Metro** | ✅ (Linha exata) | ✅ | ❌ | ✅ |
+| **Diffs de estado Redux & Linha do tempo de ações** | ✅ | ⚠️ | ❌ | ✅ |
+| **Rastreador de eventos de analytics (Firebase, Mixpanel)** | ✅ | ❌ | ❌ | ❌ |
+| **Proteção contra falhas & Rastreador de passos (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ |
+| **Telemetria de hardware (RAM, heap, disco, bateria, FPS)** | ✅ | ⚠️ | ❌ | ❌ |
+| **Captura e estúdio de edição de mídia no app (Crop, Trim, Badges)** | ✅ (Estúdio completo) | ❌ | ❌ | ❌ |
+| **Botão flutuante arrastável & Modo transparente (Peek)** | ✅ (0.05 - 1.0) | ❌ | ❌ | ❌ |
+| **Gerenciamento remoto de módulos via Firebase Remote Config** | ✅ | ❌ | ❌ | ❌ |
+| **25 idiomas com seletor em folha inferior (Bottom Sheet)** | ✅ | ❌ (Apenas inglês) | ❌ | ❌ |
+| **Expo (Bare / Managed) & React Native CLI** | ✅ | ⚠️ | ⚠️ | ⚠️ |
+
+---
+
+## ✨ Principais Módulos e Recursos
+
+### 🌐 1. Inspetor de Rede & Cascata de Latência
+- **Interceptação Universal HTTP/HTTPS**: Suporta nativamente `fetch`, instâncias de Axios e `XMLHttpRequest`.
+- **Detalhamento de Latência**: Barras de cascata proporcionais, classificação de velocidade (Rápido `<200ms`, Moderado `200-800ms`, Lento `>800ms`).
+- **Painel de Telemetria**: Taxa de sucesso (%), Latência média (ms) e Latência P95 (ms) em tempo real.
+- **Visualizador de Carga Útil**: Árvore JSON formatada, texto bruto, cabeçalhos, parâmetros de consulta e origem da chamada.
+- **Exportação Rápida**: Copie com um toque como comando **cURL**, trecho **Fetch** ou relatório resumido.
+
+### ⚡ 2. Inspetor em Tempo Real de WebSocket & Socket.IO
+- **Cobertura Completa de Protocolos**: WebSocket nativo (`ws://`, `wss://`) e Socket.IO (`v2`, `v3`, `v4`).
+- **Linha do Tempo Bidirecional**: Rastreamento de pacotes (⬆️ Enviados, ⬇️ Recebidos) com carimbo de data/hora de alta precisão.
+- **Identificação de Tipos**: Texto, cargas JSON, tamanho binário (ArrayBuffer) e batimentos Ping/Pong.
+- **Metadados da Conexão**: Estado da conexão, parâmetros de handshake, transporte (websocket/polling) e reconexões.
+
+### 💾 3. Gerenciador de Armazenamento (AsyncStorage & MMKV)
+- **Interface Unificada**: Compatível com `@react-native-async-storage/async-storage` e `react-native-mmkv`.
+- **CRUD em Tempo Real no App**: Veja, pesquise, crie, edite e delete chaves direto na tela do celular.
+- **Tipagem Inteligente**: Distingue automaticamente objetos JSON, arrays, booleanos, números e strings.
+
+### 🔔 4. Registro de Notificações Push
+- **Múltiplos Provedores**: FCM, APNs, Salesforce Marketing Cloud, OneSignal e Notifee.
+- **Rastreamento de Estado do App**: Identifica se foi recebida em Primeiro Plano (**Foreground**), Segundo Plano (**Background**) ou Inicialização Fechada (**Killed**).
+- **Inspeção de Payload**: Parâmetros de dados, deep-links, títulos, mensagens e IDs de canais.
+
+### 🪵 5. Registrador de Console & Simbolização Metro Source-Map
+- **Numeração de Linhas Exata**: Intercepta `console.log`, `warn` e `error` apontando o arquivo fonte e linha real através do Metro (`HomeScreen.tsx:42:15`).
+- **Detalhamento de Argumentos**: Inspecione cada argumento individualmente com seu tipo.
+- **Pilha de Chamadas e Erros**: Visualização estruturada com nomes de funções, arquivos e pilhas de exceção.
+- **Agrupamento Inteligente**: Contador (`×N`) para logs duplicados consecutivos.
+
+### 🔄 6. Diffs de Estado Redux & Linha do Tempo de Ações
+- **Integração com Redux Toolkit**: Suporte completo a Redux Store, RTK Query e `redux-persist`.
+- **Linha do Tempo de Ações**: Registro cronológico de ações despachadas com tempo e payload.
+- **Diff Visual Colorido**: Alterações em destaque (**Verde** para adições, **Amarelo** para atualizações, **Vermelho** para remoções).
+
+### 📊 7. Rastreador de Eventos de Analytics
+- **Integração Automática Firebase**: Intercepta `logEvent`, `logScreenView`, `setUserProperties` e `setUserId`.
+- **Arquitetura Aberta**: Conexão simples com Google Analytics 4, Mixpanel, Segment e Amplitude.
+- **Inspeção de Parâmetros**: Veja parâmetros de eventos, propriedades de usuários e carimbos de tempo.
+
+### 🛡️ 8. Proteção contra Falhas & Error Boundary Global
+- **Micro-UI Isolada**: O inspetor roda em ambiente isolado e nunca derrubará o aplicativo principal.
+- **ErrorBoundary Global**: Trata falhas de renderização não capturadas do React com tela de recuperação.
+- **Rastreador de Passos (Breadcrumbs)**: Exibe telas navegadas, chamadas de rede e ações Redux antes da falha.
+
+### 📱 9. Telemetria de Hardware Nativo, RAM & Desempenho
+- **Métricas do Sistema**: RAM total e livre, Heap nativo, Espaço livre em disco, Bateria e arquitetura do processador.
+- **Contador FPS em Tempo Real**: Medição contínua da taxa de quadros por segundo da tela.
+- **Limpeza Automática de Memória**: Libera registros caso o sistema operacional envie avisos de memória baixa.
+- **Gesto de Balançar**: Balance o aparelho ou pressione `Ctrl+Cmd+Z` / `Cmd+M` para abrir o inspetor.
+
+### 📸 10. Captura de Mídia Nativa & Estúdio de Edição In-App
+- **Captura no Dispositivo**: Crie capturas de tela em alta resolução, gravações em vídeo MP4 e GIFs animados.
+- **Galeria de Mídia Completa**: Navegue, filtre (Fotos, Vídeos, GIFs), selecione em lote e copie URIs.
+- **Estúdio de Edição de Foto e Vídeo**:
+  - **Recorte e Redimensionamento**: Proporções padrão (Quadrado 1:1, 4:3, 16:9) e redução de resolução para uploads rápidos.
+  - **Corte de Vídeo & Áudio**: Ajuste pontos de início/fim, altere a velocidade de reprodução (0.5× – 2.0×) ou silencie o áudio.
+  - **Captura de Quadros PNG**: Extraia imagens PNG de alta resolução de qualquer momento do vídeo com um toque.
+- **Anotações de QA & Marcadores de Bugs**:
+  - **Grade 3×3 Estilo Instagram**: Ative guias de alinhamento para inspecionar layouts pixel por pixel.
+  - **Emblemas de Passos Numerados**: Coloque marcadores numerados (`1`, `2`, `3`...) para ilustrar passos de reprodução.
+  - **Etiquetas de Bugs e Notas**: Adicione selos de bugs (`🐛`), notas (`📝`) e alertas visuais.
+  - **Texto & Marca d'Água de QA**: Escreva anotações e inclua marca d'água com modelo do celular e versão do SO.
+- **Importador da Galeria**: Importe fotos ou vídeos da galeria do aparelho para edição e testes.
+
+### 🎛️ 11. Botão Flutuante Arrastável (FAB) & Opacidade Transparente (Modo Peek)
+- **Lançador Flutuante**: Bolha arrastável para qualquer canto com contador de não lidos.
+- **Área de Fechamento Inferior**: Arraste até o alvo inferior iluminado para fechar o botão com facilidade.
+- **Modo Peek Transparente**: Ajuste a opacidade de 0.05 a 1.0 para interagir com o app enquanto inspeciona o tráfego e os dados.
+
+### ☁️ 12. Gerenciamento de Módulos via Firebase Remote Config
+- **Feature Flags Remotas**: Habilite ou desabilite abas do inspetor em produção ou testes direto pela nuvem sem precisar lançar nova versão do app.
+
+### 🌍 13. 25 Idiomas Globais & Seletor em Folha Inferior
+- **25 Idiomas Suportados**: Português, Inglês, Espanhol, Francês, Alemão, Italiano, Russo, Japonês, Coreano, Chinês, Árabe, Hindi, etc.
+- **Seletor em Folha Inferior**: Toque em `[ 🌐 PT ▾ ]` no cabeçalho para abrir a folha com bandeiras e busca instantânea.
+
+---
+
+## 🔎 Sintaxe de Busca 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,25 +202,25 @@ O **conjunto completo de ferramentas de depuração in-app para React Native & E
 
 ```bash
 npm install --save-dev react-native-inapp-inspector react-native-svg
-# ou
+# or
 yarn add -D react-native-inapp-inspector react-native-svg
+# or
+pnpm add -D react-native-inapp-inspector react-native-svg
 ```
 
-#### Instalação iOS CocoaPods
+#### iOS CocoaPods
 ```bash
 cd ios && pod install && cd ..
 ```
 
-### Projetos Expo
+### Expo
 ```bash
 npx expo install react-native-inapp-inspector react-native-svg
 ```
 
 ---
 
-## 🚀 Como Usar
-
-No arquivo inicial da sua aplicação (`App.tsx` ou `index.js`):
+## 🚀 Início Rápido
 
 ```tsx
 import React from 'react';
@@ -109,7 +235,7 @@ import NetworkInspector, {
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { store } from './src/store';
 
-// ⚡ Inicialize os registradores antes da renderização da interface
+// ⚡ Initialize interceptors before app mount
 setupNetworkLogger();
 setupConsoleLogger();
 setupSocketLogger();
@@ -122,7 +248,7 @@ export default function App() {
     <SafeAreaView style={{ flex: 1 }}>
       <YourAppRoot />
 
-      {/* Exibe o inspetor flutuante apenas em desenvolvimento */}
+      {/* Mount In-App Inspector in DEV builds */}
       {__DEV__ && (
         <NetworkInspector
           enabled={true}
@@ -133,31 +259,3 @@ export default function App() {
   );
 }
 ```
-
----
-
-## 🔎 Sintaxe de Busca DevTools
-
-```text
-method:POST status:200         # Filtra requisições POST com status 200 OK
-url:api.minhaapp.com -analytics# Busca sua API e descarta analytics
-header:authorization           # Filtra requisições com tokens de autorização
-body:"orderId"                 # Busca em profundidade no JSON
-page:CheckoutScreen            # Filtra por tela ativa do React Navigation
-file:ProfileView.tsx           # Filtra logs pelo arquivo de origem
-```
-
-## 🔍 Palavras-Chave de Busca (Keywords)
-
-Otimizado para desenvolvedores no Brasil, Portugal e países de língua portuguesa:
-
-* **Termos de busca comuns**: Depurador React Native, inspetor de rede móvel, ferramentas dev, depurador React Native Brasil, captura de pacotes, monitor de rede mobile, depuração no celular.
-* **Alternativas populares**: Alternativa ao Flipper, alternativa ao Charles Proxy, Chucker para React Native, alternativa ao Proxyman, alternativa ao Reactotron.
-* **Recursos essenciais**: Leitor e editor de MMKV e AsyncStorage, interceptador WebSocket, symbolication de Metro sourcemaps, gravação de tela integrada.
-
----
-
-## 📄 Licença
-
-MIT © [vengatmacuser](LICENSE)
-

package/README.ru.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, push-уведомления и параметры железа прямо на мобильном устройстве без проводов.
+**Универсальный инструмент для внутрипрограммной отладки React Native и Expo без конфигурации**. Инспектируйте HTTP/HTTPS сетевой трафик, потоки WebSocket и Socket.IO в реальном времени, логи консоли с точными номерами строк через Metro, диффы состояния Redux, хранилища AsyncStorage и MMKV, push-уведомления, показатели железа и делайте скриншоты/видеозаписи со встроенным студийным редактором прямо на телефоне без проводов.
 
-> 🚀 **Современная альтернатива Flipper, Charles и Chucker** — работает прямо на устройстве в тестовых сборках (APK / TestFlight) без необходимости подключать кабель к ПК.
+> 🚀 **Современная легковесная альтернатива Flipper, Charles, Proxyman и Chucker** — работает полностью автономно на устройстве, в тестовых сборках (APK/TestFlight) и не требует кабелей или настольных программ.
 
 <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, потому что на собственном опыте знаем боль запутанных проводов, отваливающихся портов отладчика и загадочных крашей в тестовых сборках. Мы вложили сотни бессонных ночей и всю душу, чтобы каждый мобильный инженер и тестировщик в мире мог отлаживать приложения на реальных устройствах легко, свободно и с удовольствием.»</i>
+      </p>
+      <p align="center">
+        Если этот инструмент сэкономил вам часы нервов, помог вовремя выпустить критически важный релиз или сделал вашу работу приятнее — <b>пожалуйста, поддержите проект спонсорством</b>. Даже чашка кофе или ежемесячная поддержка значат для нас бесконечно много и помогают сохранять независимый open-source проект живым для всех. ☕✨
+      </p>
+      <p align="center">
+        <a href="https://github.com/sponsors/vengatmacuser">
+          <img src="https://img.shields.io/badge/Sponsor%20%40vengatmacuser-%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D1%82%D1%8C%20%D0%BD%D0%B0%20GitHub%20Sponsors-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% нагрузки на CPU в фоновом режиме** | ✅ | ❌ | ❌ | ❌ |
-| **Сниффер сети HTTP/HTTPS (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
-| **Водопад задержек и P95 метрики** | ✅ | ⚠️ | ⚠️ | ❌ |
-| **Быстрое копирование cURL и Fetch сниппетов** | ✅ | ⚠️ | ⚠️ | ❌ |
-| **Пакетный монитор WebSocket & Socket.IO** | ✅ | ❌ | ⚠️ | ⚠️ |
-| **Редактор хранилища на лету (AsyncStorage & MMKV)** | ✅ (CRUD) | ⚠️ (Только чтение)| ❌ | ⚠️ |
-| **Логгер push-уведомлений (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
-| **Логи с реальными номерами строк через Metro** | ✅ (Точная строка)| ✅ | ❌ | ✅ |
-| **Redux State Diff и временная шкала экшенов** | ✅ | ⚠️ | ❌ | ✅ |
-| **Защита от сбоев и хлебные крошки (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ |
-| **Телеметрия железа (RAM, heap, диск, батарея)** | ✅ | ⚠️ | ❌ | ❌ |
-| **Запись видео экрана и скриншоты (MP4 / GIF)** | ✅ | ❌ | ❌ | ❌ |
-| **25 мировых языков с выбором в Bottom Sheet** | ✅ | ❌ (Только англ.)| ❌ | ❌ |
+| **Автономно на устройстве (Без ПК и проводов)** | ✅ | ❌ | ❌ | ❌ |
+| **Нулевая нагрузка в простое (0% CPU в фоне)** | ✅ | ❌ | ❌ | ❌ |
+| **Сетевой логгер HTTP/HTTPS (Fetch / Axios / XHR)** | ✅ | ✅ | ✅ | ✅ |
+| **Водопад задержек и перцентиль P95** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **Мгновенный экспорт сниппетов cURL и Fetch** | ✅ | ⚠️ | ⚠️ | ❌ |
+| **Двунаправленный мониторинг WebSocket и Socket.IO** | ✅ | ❌ | ⚠️ | ⚠️ |
+| **Живой редактор хранилища (AsyncStorage и MMKV)** | ✅ (CRUD) | ⚠️ (Только чтение) | ❌ | ⚠️ |
+| **Логгер Push-уведомлений (APNs, FCM, Salesforce)** | ✅ | ❌ | ❌ | ❌ |
+| **Логи с реальными строками исходного кода через Metro** | ✅ (Точная строка) | ✅ | ❌ | ✅ |
+| **Diffs состояния Redux и хронология экшенов** | ✅ | ⚠️ | ❌ | ✅ |
+| **Трекер аналитических событий (Firebase, Mixpanel)** | ✅ | ❌ | ❌ | ❌ |
+| **Защита от сбоев и цепочка действий (Breadcrumbs)** | ✅ | ❌ | ❌ | ❌ |
+| **Телеметрия железа (RAM, куча, диск, батарея, FPS)** | ✅ | ⚠️ | ❌ | ❌ |
+| **Захват медиа и студийный редактор (Crop, Trim, Badges)** | ✅ (Полная студия) | ❌ | ❌ | ❌ |
+| **Перетаскиваемый FAB и режим прозрачности (Peek Mode)** | ✅ (0.05 - 1.0) | ❌ | ❌ | ❌ |
+| **Удаленное управление модулями через Firebase Remote Config** | ✅ | ❌ | ❌ | ❌ |
+| **25 языков с выбором в нижнем экране (Bottom Sheet)** | ✅ | ❌ (Только английский) | ❌ | ❌ |
+| **Expo (Bare / Managed) и React Native CLI** | ✅ | ⚠️ | ⚠️ | ⚠️ |
+
+---
+
+## ✨ Ключевые Модули и Возможности
+
+### 🌐 1. Инспектор Сети и Водопад Задержек
+- **Универсальный перехват HTTP/HTTPS**: Автоматически поддерживает `fetch`, экземпляры Axios и `XMLHttpRequest`.
+- **Анализ Задержек**: Пропорциональные полосы водопада, градация скорости (Быстро `<200ms`, Средне `200-800ms`, Медленно `>800ms`).
+- **Панель Телеметрии**: Процент успешных запросов (%), Средняя задержка (мс) и задержка P95 (мс) в реальном времени.
+- **Просмотр Полезной Нагрузки**: Форматированное дерево JSON, сырые данные, заголовки запроса/ответа, параметры и файл-источник.
+- **Быстрый Экспорт**: Копирование в один клик как команда **cURL**, сниппет **Fetch** или краткий отчет.
+
+### ⚡ 2. Инспектор Потоков WebSocket и Socket.IO в Реальном Времени
+- **Полная Поддержка Протоколов**: Нативный WebSocket (`ws://`, `wss://`) и Socket.IO (`v2`, `v3`, `v4`).
+- **Двунаправленная Хронология**: Отслеживание пакетов (⬆️ Отправлено, ⬇️ Получено) с миллисекундной точностью.
+- **Определение Типов**: Текст, JSON-данные, размер бинарных данных (ArrayBuffer) и Ping/Pong сигналы.
+- **Метаданные Соединения**: Статус, параметры рукопожатия (handshake), транспорт (websocket/polling) и переподключения.
+
+### 💾 3. Менеджер Хранилища (AsyncStorage и MMKV)
+- **Единый Интерфейс**: Поддержка `@react-native-async-storage/async-storage` и `react-native-mmkv`.
+- **Живые CRUD-Операции**: Просматривайте, ищите, создавайте, редактируйте и удаляйте ключи прямо на экране телефона.
+- **Умное Распознавание Типов**: Автоматически различает объекты JSON, массивы, логические значения, числа и строки.
+
+### 🔔 4. Логгер Push-Уведомлений
+- **Множество Провайдеров**: FCM, APNs, Salesforce Marketing Cloud, OneSignal и Notifee.
+- **Отслеживание Состояния Приложения**: Определяет получение на переднем плане (**Foreground**), в фоне (**Background**) или запуск из закрытого состояния (**Killed**).
+- **Инспекция Данных**: Параметры полезной нагрузки, диплинки, заголовки, текст и ID каналов.
+
+### 🪵 5. Логгер Консоли и Символизация Metro Source-Map
+- **Точные Номера Строк**: Перехватывает `console.log`, `warn` и `error`, сопоставляя их через Metro с файлами проекта и строками (`HomeScreen.tsx:42:15`).
+- **Детализация Аргументов**: Индивидуальный просмотр каждого переданного аргумента с указанием типа.
+- **Стек Вызовов и Ошибок**: Структурированные карточки с именами функций, файлами и трассировками исключений.
+- **Группировка Повторов**: Автоматическое сворачивание одинаковых логов со счетчиком (`×N`).
+
+### 🔄 6. Diffs Состояния Redux и Хронология Экшенов
+- **Интеграция с Redux Toolkit**: Поддержка Redux Store, RTK Query и `redux-persist`.
+- **Хронология Экшенов**: Последовательная запись отправленных действий с длительностью и полезной нагрузкой.
+- **Цветные Diffs Состояния**: Наглядная подсветка (**Зеленый** — добавления, **Желтый** — изменения, **Красный** — удаления).
+
+### 📊 7. Трекер Аналитических Событий
+- **Авто-Перехват Firebase Analytics**: Автоматически отслеживает `logEvent`, `logScreenView`, `setUserProperties` и `setUserId`.
+- **Модульная Архитектура**: Легко подключается к Google Analytics 4, Mixpanel, Segment и Amplitude.
+- **Проверка Параметров**: Просматривайте параметры событий, свойства пользователей и временные метки.
+
+### 🛡️ 8. Защита от Сбоев и Глобальный Error Boundary
+- **Изолированный Micro-UI**: Инспектор работает в изолированной среде и не вызовет падение основного приложения.
+- **Глобальный ErrorBoundary**: Перехватывает необработанные сбои рендеринга React с экраном восстановления.
+- **Цепочка Действий (Breadcrumbs)**: Восстанавливает экраны навигации, сетевые запросы и экшены Redux перед падением.
+
+### 📱 9. Нативная Телеметрия Оборудования, RAM и Производительности
+- **Системные Метрики**: Общий и свободный объем RAM, Нативная куча, Свободное место на диске, Батарея и архитектура процессора.
+- **Живой Счетчик 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 Instagram**: Включение направляющих линий для проверки выравнивания элементов интерфейса.
+  - **Нумерованные Бейджи Шагов**: Размещение меток с номерами (`1`, `2`, `3`...) для иллюстрации шагов воспроизведения бага.
+  - **Теги Ошибок и Заметок**: Добавление графических значков багов (`🐛`), заметок (`📝`) и предупреждений.
+  - **Текст и Водяной Знак QA**: Добавление текстовых пояснений и водяного знака с моделью устройства и версией ОС.
+- **Импорт из Галереи**: Импорт фото или видео из медиатеки устройства для редактирования и проверки.
+
+### 🎛️ 11. Перетаскиваемый Плавающий FAB и Режим Прозрачности (Peek Mode)
+- **Плавающий Лаунчер**: Перемещаемая в любой угол кнопка с бейджем непрочитанных уведомлений.
+- **Нижняя Зона Закрытия**: Перетащите на светящуюся нижнюю цель для удобного скрытия кнопки.
+- **Режим Прозрачности (Peek Mode)**: Настройка прозрачности от 0.05 до 1.0 для работы с приложением при одновременном мониторинге данных и сети.
+
+### ☁️ 12. Управление Модулями через Firebase Remote Config
+- **Удаленные Feature Flags**: Включение или отключение вкладок инспектора в релизных или тестовых сборках через облако без выпуска новой версии приложения.
+
+### 🌍 13. 25 Мировых Языков и Интерактивный Нижний Экран
+- **25 Поддерживаемых Языков**: Русский, Английский, Испанский, Немецкий, Французский, Итальянский, Португальский, Японский, Корейский, Китайский, Арабский, Хинди и др.
+- **Интерактивный Bottom Sheet**: Нажмите на `[ 🌐 RU ▾ ]` в заголовке, чтобы открыть панель выбора с флагами стран и мгновенным поиском.
+
+---
+
+## 🔎 Синтаксис Поиска 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,25 +202,25 @@
 
 ```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
+#### iOS CocoaPods
 ```bash
 cd ios && pod install && cd ..
 ```
 
-### Проекты Expo
+### Expo
 ```bash
 npx expo install react-native-inapp-inspector react-native-svg
 ```
 
 ---
 
-## 🚀 Быстрый старт
-
-В корневом файле (`App.tsx` или `index.js`):
+## 🚀 Быстрый Старт
 
 ```tsx
 import React from 'react';
@@ -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 />
 
-      {/* Оверлей инспектора только в DEV режиме */}
+      {/* 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   # Поиск по API без лишнего трекинга
-header:authorization           # Запросы с токенами авторизации
-body:"orderId"                 # Поиск внутри JSON тела
-page:CheckoutScreen            # Фильтрация по текущему экрану
-file:ProfileView.tsx           # Поиск логов из конкретного файла
-```
-
-## 🔍 Ключевые слова для поиска (Keywords)
-
-Оптимизировано для разработчиков в России, Беларуси, Казахстане, Украине и странах СНГ:
-
-* **Основные поисковые запросы**: Отладчик React Native, сниффер сети, логирование сети, перехватчик трафика, мобильная отладка, инспектор сети, мобильные инструменты разработчика.
-* **Популярные альтернативы**: Альтернатива Flipper, альтернатива Charles Proxy, Chucker для React Native, альтернатива Proxyman, альтернатива Reactotron.
-* **Ключевые возможности**: Перехват WebSocket, просмотрщик и редактор MMKV и AsyncStorage, симболикация Metro, захват видео экрана с устройства.
-
----
-
-## 📄 Лицензия
-
-MIT © [vengatmacuser](LICENSE)
-