@buoy-gg/highlight-updates 7.0.36 → 7.0.39

package/README.md

@@ -2,9 +2,9 @@
 
 [![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)
 
-**See exactly WHY your React Native components re-render — every render gets an overlay tagged with its cause: mount, state, props, or parent.**
+Highlight observed React component updates in development builds and inspect the available render details.
 
-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).
+Part of [Buoy](https://github.com/Buoy-gg/buoy). Install the package, complete account setup, and follow the integration steps below.
 
 ## Install
 
@@ -12,6 +12,24 @@ Part of [Buoy](https://github.com/Buoy-gg/buoy) — devtools that live inside yo
 npm install @buoy-gg/core @buoy-gg/highlight-updates
 ```
 
+## Before you start
+
+Use a development build with `@buoy-gg/core` and a Free or Pro Buoy account key. From your app’s directory, sign in:
+
+```bash
+npx --package=@buoy-gg/core buoy login
+```
+
+For Expo, initialize Buoy before rendering the menu:
+
+```tsx
+import { Buoy } from "@buoy-gg/core";
+
+Buoy.init({ licenseKey: process.env.EXPO_PUBLIC_BUOY_KEY });
+```
+
+The login command writes the Expo key to `.env.local`. For React Native CLI, pass the key from your app’s environment configuration; React Native does not load `.env.local` automatically. Mount `FloatingDevTools` inside the same providers as your screens and restart the development server after installation. The [Quick Start](https://buoy.gg/buoy/latest/docs/quick-start) shows the complete root component setup.
+
 ## Quick start
 
 ```tsx
@@ -37,9 +55,13 @@ import { HighlightUpdatesController } from "@buoy-gg/highlight-updates";
 HighlightUpdatesController.toggle();
 ```
 
+## Check the integration
+
+In a development build, open the tool and update a visible component’s state. Confirm that an update is highlighted. Capture depends on React’s development hooks; Pro does not make those hooks available in a release build.
+
 ## What you get
 
-- **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.
+- **Render overlays with the cause** — observed updates flash a bounding box with the available mount, state, props, or parent-update classification.
 - **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.
@@ -48,11 +70,11 @@ HighlightUpdatesController.toggle();
 
 ## Desktop & AI
 
-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).
+To connect a React Native app to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) or MCP, install `@buoy-gg/external-sync` and follow the [Desktop connection guide](https://buoy.gg/buoy/latest/docs/desktop). Sign in to Desktop separately. [MCP setup](https://buoy.gg/buoy/latest/docs/mcp) also requires a process account and Pro access. Available remote actions depend on the tool and app integration.
 
-## Free vs Pro
+## Account and plan requirements
 
-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 anyone holding a key — including a free one (`npx buoy login`).
+Use a Free or Pro Buoy account. History limits and paid features vary by tool; see [pricing](https://buoy.gg/pricing). Production access requires Pro where supported. Development-only hooks and actions remain unavailable in release builds.
 
 ---
 

package/lib/commonjs/highlight-updates/components/RendersCopySettingsView.js

@@ -132,7 +132,10 @@ function RendersCopySettingsView({
   }, [estimatedSize]);
   const generateCopyText = (0, _react.useCallback)(() => (0, _rendersExportFormatter.generateExport)(previewRenders, settings), [previewRenders, settings]);
   const applyPreset = (0, _react.useCallback)(name => {
+    // "Custom" is what the list shows once the settings match no preset;
+    // choosing it changes nothing.
     const preset = _copySettings.COPY_PRESETS[name];
+    if (!preset) return;
     updateSettings({
       ...preset,
       filterCauses: [...preset.filterCauses]

package/lib/module/highlight-updates/components/RendersCopySettingsView.js

@@ -128,7 +128,10 @@ export function RendersCopySettingsView({
   }, [estimatedSize]);
   const generateCopyText = useCallback(() => generateExport(previewRenders, settings), [previewRenders, settings]);
   const applyPreset = useCallback(name => {
+    // "Custom" is what the list shows once the settings match no preset;
+    // choosing it changes nothing.
     const preset = COPY_PRESETS[name];
+    if (!preset) return;
     updateSettings({
       ...preset,
       filterCauses: [...preset.filterCauses]

package/lib/typescript/highlight-updates/components/RendersCopySettingsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RendersCopySettingsView.d.ts","sourceRoot":"","sources":["../../../../src/highlight-updates/components/RendersCopySettingsView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAuBH,OAAO,KAAK,EAAE,aAAa,EAAmB,MAAM,wBAAwB,CAAC;AAmB7E,UAAU,4BAA4B;IACpC,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA+ED,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,GACR,EAAE,4BAA4B,+BAuY9B"}
+{"version":3,"file":"RendersCopySettingsView.d.ts","sourceRoot":"","sources":["../../../../src/highlight-updates/components/RendersCopySettingsView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAuBH,OAAO,KAAK,EAAE,aAAa,EAAmB,MAAM,wBAAwB,CAAC;AAmB7E,UAAU,4BAA4B;IACpC,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA+ED,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,GACR,EAAE,4BAA4B,+BA0Y9B"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@buoy-gg/highlight-updates",
-  "version": "7.0.36",
-  "description": "Render highlighter for React Native — see every render with its cause: mount, state, props, or parent. Part of Buoy devtools.",
+  "version": "7.0.39",
+  "description": "Highlight observed React Native renders and inspect available render diagnostics.",
   "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": "^7.0.36",
-    "@buoy-gg/floating-tools-core": "^7.0.36"
+    "@buoy-gg/shared-ui": "^7.0.39",
+    "@buoy-gg/floating-tools-core": "^7.0.39"
   },
   "peerDependencies": {
-    "@buoy-gg/license": "7.0.36",
+    "@buoy-gg/license": "7.0.39",
     "react": "*",
     "react-native": "*",
-    "@buoy-gg/core": "^7.0.36"
+    "@buoy-gg/core": "^7.0.39"
   },
   "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/core": "^7.0.36",
-    "@buoy-gg/license": "^7.0.36"
+    "@buoy-gg/core": "^7.0.39",
+    "@buoy-gg/license": "^7.0.39"
   },
   "react-native-builder-bob": {
     "source": "src",