weevar 1.0.0 → 1.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/LICENSE +21 -0
- package/README.md +95 -0
- package/dist/react.dev.js +9 -3
- package/dist/react.dev.js.map +1 -1
- package/dist/react.dev.mjs +9 -3
- package/dist/react.dev.mjs.map +1 -1
- package/package.json +4 -2
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Gideon Adeyemi
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
# Weevar
|
|
2
|
+
|
|
3
|
+
A dev tool that lets you rearrange your UI visually in the browser—then turns those changes into prompts for AI to implement in code.
|
|
4
|
+
|
|
5
|
+
Weevar is **development-only**: it runs as an overlay in your React app while you work locally. Nothing ships to production by until you push.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install weevar
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Mount in your app root:
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { Weevar } from "weevar/react";
|
|
18
|
+
|
|
19
|
+
export function Root() {
|
|
20
|
+
return (
|
|
21
|
+
<>
|
|
22
|
+
<App />
|
|
23
|
+
<Weevar />
|
|
24
|
+
</>
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Vite
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
import { defineConfig } from "vite";
|
|
33
|
+
import react from "@vitejs/plugin-react";
|
|
34
|
+
import { weevar } from "weevar/vite";
|
|
35
|
+
|
|
36
|
+
export default defineConfig({
|
|
37
|
+
plugins: [weevar(), react()],
|
|
38
|
+
});
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Run your dev server and press **⌘⇧E** (Mac) or **Ctrl+Shift+E** (Windows/Linux) to toggle the overlay.
|
|
42
|
+
|
|
43
|
+
## Requirements
|
|
44
|
+
|
|
45
|
+
- **Node.js** `>= 18.18`
|
|
46
|
+
- A **React** app (`react` / `react-dom` **>= 17**)
|
|
47
|
+
- **Development mode** (run your usual dev server—e.g. Vite, Next dev—not a production build)
|
|
48
|
+
- **Bundler integration** is recommended for the best experience (see **Vite** below); other setups may need extra configuration—see the [Install](https://github.com/weevar/weevar/blob/main/docs/INSTALL.md) guide.
|
|
49
|
+
|
|
50
|
+
## How it works
|
|
51
|
+
|
|
52
|
+
1. Run your app in dev mode.
|
|
53
|
+
2. Turn on the overlay (shortcut below).
|
|
54
|
+
3. Click and drag elements to rearrange them.
|
|
55
|
+
4. See the layout update instantly.
|
|
56
|
+
|
|
57
|
+
When you’re done, the tool generates a prompt—for example:
|
|
58
|
+
|
|
59
|
+
> Move the CTA button below the feature list and keep spacing consistent across all cards.
|
|
60
|
+
|
|
61
|
+
Paste that into your AI coding tool, and it updates your code.
|
|
62
|
+
|
|
63
|
+
## What you can do right now
|
|
64
|
+
|
|
65
|
+
- Reorder elements within a layout.
|
|
66
|
+
- Move elements between sections.
|
|
67
|
+
- Experiment with layout structure visually.
|
|
68
|
+
|
|
69
|
+
This version is focused on **layout and structure** only.
|
|
70
|
+
|
|
71
|
+
## Why this is useful
|
|
72
|
+
|
|
73
|
+
Explaining layout changes is harder than it sounds:
|
|
74
|
+
|
|
75
|
+
- “Put this under that.”
|
|
76
|
+
- “Move this to the right but keep it aligned.”
|
|
77
|
+
- “Reorder these cards.”
|
|
78
|
+
|
|
79
|
+
Instead of describing it, you move things directly and let Weevar translate that into a structured prompt.
|
|
80
|
+
|
|
81
|
+
## Documentation
|
|
82
|
+
|
|
83
|
+
Full guides live in the repository:
|
|
84
|
+
|
|
85
|
+
- [Install](https://github.com/weevar/weevar/blob/main/docs/INSTALL.md)
|
|
86
|
+
- [Usage](https://github.com/weevar/weevar/blob/main/docs/USAGE.md)
|
|
87
|
+
- [Troubleshooting](https://github.com/weevar/weevar/blob/main/docs/TROUBLESHOOTING.md)
|
|
88
|
+
- [Compatibility](https://github.com/weevar/weevar/blob/main/docs/COMPATIBILITY.md)
|
|
89
|
+
- [Security](https://github.com/weevar/weevar/blob/main/docs/SECURITY.md)
|
|
90
|
+
|
|
91
|
+
## License
|
|
92
|
+
|
|
93
|
+
© 2026 Gideon Adeyemi. All rights reserved.
|
|
94
|
+
|
|
95
|
+
licensed under the MIT License.
|
package/dist/react.dev.js
CHANGED
|
@@ -953,6 +953,12 @@ function matchesIdentity(el, identity) {
|
|
|
953
953
|
return true;
|
|
954
954
|
}
|
|
955
955
|
|
|
956
|
+
// src/version.ts
|
|
957
|
+
var WEEVAR_VERSION = "1.0.1";
|
|
958
|
+
function weevarVersionLabel() {
|
|
959
|
+
return `v${WEEVAR_VERSION}`;
|
|
960
|
+
}
|
|
961
|
+
|
|
956
962
|
// src/overlay/overlayStyles.ts
|
|
957
963
|
var OVERLAY_CSS = `
|
|
958
964
|
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400&display=swap");
|
|
@@ -2564,7 +2570,7 @@ function PromptPanel({
|
|
|
2564
2570
|
warningNote ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "wv-panel-note", children: warningNote }) : null
|
|
2565
2571
|
] }),
|
|
2566
2572
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wv-tray-foot", children: [
|
|
2567
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children:
|
|
2573
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: weevarVersionLabel() }),
|
|
2568
2574
|
/* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, {})
|
|
2569
2575
|
] })
|
|
2570
2576
|
]
|
|
@@ -4195,7 +4201,7 @@ body *:focus {
|
|
|
4195
4201
|
}
|
|
4196
4202
|
),
|
|
4197
4203
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wv-tray-foot", children: [
|
|
4198
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children:
|
|
4204
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: weevarVersionLabel() }),
|
|
4199
4205
|
/* @__PURE__ */ jsxRuntime.jsx(GlobeIcon2, {})
|
|
4200
4206
|
] })
|
|
4201
4207
|
] })
|
|
@@ -4448,7 +4454,7 @@ function SettingsTray({
|
|
|
4448
4454
|
] })
|
|
4449
4455
|
] }),
|
|
4450
4456
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wv-tray-foot wv-settings-foot", children: [
|
|
4451
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children:
|
|
4457
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: weevarVersionLabel() }),
|
|
4452
4458
|
/* @__PURE__ */ jsxRuntime.jsx(GlobeIcon2, {})
|
|
4453
4459
|
] })
|
|
4454
4460
|
]
|