@buoy-gg/image-overlay 5.0.0 → 6.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +65 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# @buoy-gg/image-overlay
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@buoy-gg/image-overlay) [](https://www.npmjs.com/package/@buoy-gg/image-overlay)
|
|
4
|
+
|
|
5
|
+
**Pin your Figma mockup on top of the running app and nail pixel-perfect UI without leaving the simulator.**
|
|
6
|
+
|
|
7
|
+
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).
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @buoy-gg/core @buoy-gg/image-overlay
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Quick start
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { FloatingDevTools } from "@buoy-gg/core";
|
|
19
|
+
|
|
20
|
+
export default function App() {
|
|
21
|
+
return (
|
|
22
|
+
<>
|
|
23
|
+
<YourApp />
|
|
24
|
+
<FloatingDevTools />
|
|
25
|
+
</>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
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.
|
|
31
|
+
|
|
32
|
+
To pin the overlay to a specific component in **Component Mode**, tag it with an `image-target:` testID:
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
<View testID="image-target:LoginCard">
|
|
36
|
+
<TextInput placeholder="Email" />
|
|
37
|
+
<Button title="Sign In" />
|
|
38
|
+
</View>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
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.
|
|
42
|
+
|
|
43
|
+
## What you get
|
|
44
|
+
|
|
45
|
+
- **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)
|
|
46
|
+
- **Component Mode** — scan the app for tagged targets, pick one, and the overlay pins to its exact measured position and size
|
|
47
|
+
- **Auto-track** — the target is re-measured every render, so the overlay stays locked through scrolling, animation, and layout shifts
|
|
48
|
+
- **Free Mode** — drag and pinch the overlay anywhere for full-screen or multi-component comparisons
|
|
49
|
+
- **Opacity blending** — fade the mockup over your live UI to spot the differences instantly
|
|
50
|
+
- **Fine alignment** — scale, X/Y offset, horizontal/vertical flip, and an outline toggle for precise placement
|
|
51
|
+
- **Lock** — freeze position so you don't nudge it mid-comparison
|
|
52
|
+
|
|
53
|
+
## Desktop & AI
|
|
54
|
+
|
|
55
|
+
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).
|
|
56
|
+
|
|
57
|
+
## Free vs Pro
|
|
58
|
+
|
|
59
|
+
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.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/image-overlay) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
|
|
64
|
+
|
|
65
|
+
Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@buoy-gg/image-overlay",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.1",
|
|
4
4
|
"description": "Image overlay tool for matching design mockups",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
],
|
|
27
27
|
"sideEffects": false,
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@buoy-gg/shared-ui": "
|
|
29
|
+
"@buoy-gg/shared-ui": "6.0.1"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "*",
|