@buoy-gg/highlight-updates 6.0.0 → 6.0.1

package/README.md

@@ -1,210 +1,61 @@
-# @buoy/highlight-updates
+# @buoy-gg/highlight-updates
 
-Control React DevTools' "Highlight updates when components render" feature directly from your React Native app.
+[![npm version](https://img.shields.io/npm/v/@buoy-gg/highlight-updates?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/highlight-updates) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/highlight-updates?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/highlight-updates)
 
-## Overview
+**See exactly WHY your React Native components re-render — every render gets an overlay tagged with its cause: mount, state, props, or parent.**
 
-This tool intercepts the React DevTools agent's `drawTraceUpdates` event to provide programmatic control over component render highlighting. When DevTools has "Highlight updates when components render" enabled, this tool lets you toggle the highlighting on/off without navigating to DevTools settings.
+Part of [Buoy](https://github.com/Buoy-gg/buoy) — devtools that live inside your React Native app. Install it and it auto-appears in the floating menu from [`@buoy-gg/core`](https://www.npmjs.com/package/@buoy-gg/core).
 
-## Installation
+## Install
 
 ```bash
-npm install @buoy/highlight-updates
-# or
-yarn add @buoy/highlight-updates
-# or
-pnpm add @buoy/highlight-updates
+npm install @buoy-gg/core @buoy-gg/highlight-updates
 ```
 
-## Usage
-
-### With FloatingDevTools (Recommended)
-
-The easiest way to use this tool is with the FloatingDevTools menu:
-
-```tsx
-import { FloatingDevTools, autoDiscoverPresets } from '@buoy/core';
-
-// The highlight updates tool is automatically discovered if installed
-const apps = autoDiscoverPresets();
-
-function App() {
-  return (
-    <FloatingDevTools apps={apps}>
-      <YourApp />
-    </FloatingDevTools>
-  );
-}
-```
-
-Or explicitly add the preset:
+## Quick start
 
 ```tsx
-import { FloatingDevTools } from '@buoy/core';
-import { highlightUpdatesPreset } from '@buoy/highlight-updates';
+import { FloatingDevTools } from "@buoy-gg/core";
 
-function App() {
+export default function App() {
   return (
-    <FloatingDevTools apps={[highlightUpdatesPreset]}>
+    <>
       <YourApp />
-    </FloatingDevTools>
+      <FloatingDevTools />
+    </>
   );
 }
 ```
 
-### Standalone Controller
+That's it — the Render Highlighter appears in the floating menu. It's a standalone implementation: no React DevTools connection, no Chrome tab, no Flipper required.
 
-You can also use the controller directly without the FloatingDevTools menu:
+Prefer to drive it yourself?
 
 ```tsx
-import { HighlightUpdatesController } from '@buoy/highlight-updates';
-
-// Initialize when DevTools is connected
-HighlightUpdatesController.initialize();
+import { HighlightUpdatesController } from "@buoy-gg/highlight-updates";
 
-// Toggle highlights
 HighlightUpdatesController.toggle();
-
-// Enable/disable directly
-HighlightUpdatesController.enable();
-HighlightUpdatesController.disable();
-
-// Check state
-const isEnabled = HighlightUpdatesController.isEnabled();
-
-// Subscribe to state changes
-const unsubscribe = HighlightUpdatesController.subscribe((enabled) => {
-  console.log('Highlights enabled:', enabled);
-});
-
-// Cleanup when done
-HighlightUpdatesController.destroy();
 ```
 
-### Custom Configuration
-
-Create a customized version of the tool:
-
-```tsx
-import { createHighlightUpdatesTool } from '@buoy/highlight-updates';
-
-const myHighlightTool = createHighlightUpdatesTool({
-  name: 'RENDERS',
-  enabledColor: '#ec4899', // Pink when enabled
-  disabledColor: '#9ca3af', // Gray when disabled
-  autoInitialize: true, // Initialize automatically
-});
-```
+## What you get
 
-## Requirements
+- **Render overlays with the cause** — every render flashes a bounding box tagged mount / state change / prop change / parent re-render. No more guessing why a component updated.
+- **Hook value tracking** — when state caused the render, see the before → after values of the exact `useState` or `useReducer` that changed.
+- **Overlay mode** — lightweight real-time highlights while you interact with the app; perfect for spotting unnecessary re-renders.
+- **Modal mode** — full inspector with render history, filtering, and detailed per-render cause breakdowns for deep debugging sessions.
+- **Powers Bench's render capture** — with [`@buoy-gg/perf-monitor`](https://www.npmjs.com/package/@buoy-gg/perf-monitor) installed, benchmark recordings capture per-component render counts and durations.
+- **Filters out the framework noise** — you see your components, not `View`/`Text` internals.
 
-For this tool to work:
+## Desktop & AI
 
-1. **React DevTools must be connected** (Chrome DevTools or Flipper)
-2. **"Highlight updates when components render" must be enabled** in DevTools Profiler settings
-
-This tool then allows you to temporarily disable the highlighting without going back to DevTools settings.
-
-## How It Works
-
-The tool intercepts the DevTools agent's `drawTraceUpdates` event listener. When disabled, it simply doesn't forward the event to the original handler, effectively blocking the highlight rendering.
-
-```
-React DevTools Frontend (Chrome/Flipper)
-    | (sends drawTraceUpdates event)
-    v
-React DevTools Agent
-    | (event intercepted by HighlightUpdatesController)
-    v
-HighlightUpdatesController.controlledListener
-    | (if enabled, forwards to original)
-    v
-DebuggingOverlayRegistry (original listener)
-    | (processes component bounds)
-    v
-DebuggingOverlay (native component)
-    | (renders highlights on screen)
-```
+The same live session streams to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) (free, macOS/Windows/Linux) and to Claude Code or Cursor via the [Buoy MCP server](https://buoy.gg/buoy/latest/docs/mcp).
 
-## API Reference
+## Free vs Pro
 
-### `highlightUpdatesPreset`
+Every tool is free. [Pro](https://buoy.gg/pricing) unlocks production builds, the MCP server, and unlimited capture. Every weekend, Pro features unlock free for everyone.
 
-Pre-configured preset for use with FloatingDevTools.
-
-### `createHighlightUpdatesTool(options?)`
-
-Factory function to create a customized tool.
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `name` | `string` | `"UPDATES"` | Display name in the menu |
-| `description` | `string` | `"Toggle component render highlights"` | Tool description |
-| `enabledColor` | `string` | `"#10b981"` | Icon color when enabled (green) |
-| `disabledColor` | `string` | `"#6b7280"` | Icon color when disabled (gray) |
-| `id` | `string` | `"highlight-updates"` | Unique tool identifier |
-| `autoInitialize` | `boolean` | `false` | Initialize automatically on load |
-
-### `HighlightUpdatesController`
-
-Standalone controller for programmatic use.
-
-| Method | Description |
-|--------|-------------|
-| `initialize()` | Initialize the controller. Returns `true` on success. |
-| `enable()` | Enable highlight rendering |
-| `disable()` | Disable highlight rendering |
-| `toggle()` | Toggle the enabled state |
-| `isEnabled()` | Get current enabled state |
-| `setEnabled(enabled)` | Set enabled state |
-| `isInitialized()` | Check if controller is initialized |
-| `subscribe(callback)` | Subscribe to state changes. Returns unsubscribe function. |
-| `destroy()` | Cleanup and restore original listener |
-
-## Console Access
-
-When in development mode, the controller is exposed globally:
-
-```javascript
-// In Chrome DevTools console
-window.__HIGHLIGHT_UPDATES_CONTROLLER__.toggle();
-window.__HIGHLIGHT_UPDATES_CONTROLLER__.isEnabled();
-```
-
-## Troubleshooting
-
-### Controller Not Initializing
-
-**Problem:** `initialize()` returns false
-
-**Solutions:**
-1. Check DevTools is connected: `window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent`
-2. Add initialization delay: Wait 1-2 seconds after app launch
-3. Ensure "Highlight updates" is enabled in DevTools first
-
-### Highlights Still Showing After Disable
-
-**Problem:** Highlights appear even when disabled
-
-**Solutions:**
-1. Verify controller is initialized: `HighlightUpdatesController.isInitialized()`
-2. Check enabled state: `HighlightUpdatesController.isEnabled()`
-3. Ensure listener was properly intercepted (check console logs)
-
-## Development
-
-### Building
-
-```bash
-pnpm build
-```
-
-### Type Checking
-
-```bash
-pnpm typecheck
-```
+---
 
-## License
+📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/highlight-updates) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
 
-MIT
+Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@buoy-gg/highlight-updates",
-  "version": "6.0.0",
-  "description": "Control React DevTools highlight updates feature from your app",
+  "version": "6.0.1",
+  "description": "Render highlighter for React Native — see every render with its cause: mount, state, props, or parent. Part of Buoy devtools.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",
@@ -26,14 +26,14 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "6.0.0",
-    "@buoy-gg/floating-tools-core": "6.0.0"
+    "@buoy-gg/shared-ui": "6.0.1",
+    "@buoy-gg/floating-tools-core": "6.0.1"
   },
   "peerDependencies": {
-    "@buoy-gg/license": "6.0.0",
+    "@buoy-gg/license": "6.0.1",
     "react": "*",
     "react-native": "*",
-    "@buoy-gg/core": "6.0.0"
+    "@buoy-gg/core": "6.0.1"
   },
   "peerDependenciesMeta": {
     "@buoy-gg/core": {
@@ -44,8 +44,8 @@
     "@types/react": "^19.1.0",
     "@types/react-native": "^0.73.0",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "6.0.0",
-    "@buoy-gg/core": "6.0.0"
+    "@buoy-gg/license": "6.0.1",
+    "@buoy-gg/core": "6.0.1"
   },
   "react-native-builder-bob": {
     "source": "src",