@buoy-gg/image-overlay 7.0.35 → 7.0.38

package/README.md

@@ -2,9 +2,9 @@
 
 [![npm version](https://img.shields.io/npm/v/@buoy-gg/image-overlay?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/image-overlay) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/image-overlay?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/image-overlay)
 
-**Pin your Figma mockup on top of the running app and nail pixel-perfect UI without leaving the simulator.**
+Place a reference image over your app to compare spacing, alignment, and sizing on the device.
 
-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/image-overlay
 ```
 
+## 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
@@ -29,22 +47,26 @@ export default function App() {
 
 The IMG tool appears in the menu. Copy a frame in Figma, tap "Paste from Clipboard" (or paste an image URL), and the mockup floats over your live UI.
 
-To pin the overlay to a specific component in **Component Mode**, tag it with an `image-target:` testID:
+To pin the overlay to a specific component in **Component Mode**, tag it with an `image-target:` testID. This example uses your existing `handleSignIn` handler and React Native components:
 
 ```tsx
 <View testID="image-target:LoginCard">
   <TextInput placeholder="Email" />
-  <Button title="Sign In" />
+  <Button title="Sign In" onPress={handleSignIn} />
 </View>
 ```
 
 The text after `image-target:` becomes the label in the target list. Your existing testIDs (like `testID="login-button"`) are ignored — only the `image-target:` prefix is scanned.
 
+## Check the integration
+
+Load a reference image from a direct image URL, adjust its opacity, and align it with a known screen. Clipboard import requires the clipboard dependency described in the full setup guide.
+
 ## What you get
 
 - **Two image sources** — paste straight from the clipboard (Figma copy → paste; requires `expo-clipboard`) or load any image URL (works in bare React Native too)
 - **Component Mode** — scan the app for tagged targets, pick one, and the overlay pins to its exact measured position and size
-- **Auto-track** — the target is re-measured every render, so the overlay stays locked through scrolling, animation, and layout shifts
+- **Auto-track** — re-measures the target as the app changes. Check alignment during scrolling and animation on your target device
 - **Free Mode** — drag and pinch the overlay anywhere for full-screen or multi-component comparisons
 - **Opacity blending** — fade the mockup over your live UI to spot the differences instantly
 - **Fine alignment** — scale, X/Y offset, horizontal/vertical flip, and an outline toggle for precise placement
@@ -52,11 +74,11 @@ The text after `image-target:` becomes the label in the target list. Your existi
 
 ## 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@buoy-gg/image-overlay",
-  "version": "7.0.35",
-  "description": "Pin your Figma mockup on top of the running app — pixel-perfect UI comparison without leaving the simulator. Part of Buoy devtools.",
+  "version": "7.0.38",
+  "description": "Overlay a design mockup on a running React Native app and adjust opacity to compare spacing and alignment.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.35"
+    "@buoy-gg/shared-ui": "^7.0.38"
   },
   "peerDependencies": {
     "react": "*",