@popmelt.com/core 0.12.2 → 0.14.0
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 +74 -20
- package/codex-plugin/.codex-plugin/plugin.json +1 -1
- package/dist/bridge-entry.mjs +58 -58
- package/dist/{chunk-HBODYNYU.mjs → chunk-WVBQZISK.mjs} +1 -1
- package/dist/cli.mjs +86 -86
- package/dist/index.d.mts +11 -3
- package/dist/index.mjs +102 -79
- package/dist/plugin-astro.mjs +1 -1
- package/dist/plugin-vite.mjs +1 -1
- package/dist/server-PUB4CXLY.mjs +210 -0
- package/dist/server.mjs +59 -59
- package/package.json +5 -2
- package/dist/server-NIKJG3WH.mjs +0 -210
package/README.md
CHANGED
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
# Popmelt
|
|
6
6
|
|
|
7
|
-
Popmelt is a design
|
|
7
|
+
Popmelt is a tiny, powerful design layer for humans and AI. Turn any React repo into a design sandbox with the AI tools you already love.
|
|
8
8
|
|
|
9
|
-
Point to any part of your UI, describe what you have in mind,
|
|
9
|
+
Run your app locally and Popmelt appears as a toolbar in the browser. Point to any part of your UI, describe what you have in mind, or steer the design directly. Work through the result with Codex or Claude Code in a thread right on the page. Stack as many threads as you want so different ideas can move forward without losing their context.
|
|
10
10
|
|
|
11
|
-
As you collaborate, Popmelt builds an
|
|
11
|
+
As you collaborate, Popmelt builds an Imprint: a living project memory of your intent, preferences, and design decisions. Later threads use that shared understanding instead of starting from scratch.
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
Runs locally, learns naturally. Your annotations, screenshots, threads, and Imprint live with your project under `.popmelt/`.
|
|
14
14
|
|
|
15
15
|
## What you need
|
|
16
16
|
|
|
@@ -33,11 +33,61 @@ Your agent can detect the framework, add the provider and integration, and prese
|
|
|
33
33
|
|
|
34
34
|
1. Run your project locally and open it in a browser
|
|
35
35
|
2. Double-tap Command on macOS or Control on Windows and Linux to open the Popmelt toolbar
|
|
36
|
-
3.
|
|
37
|
-
4.
|
|
38
|
-
5.
|
|
36
|
+
3. Choose Chat (`C`), Steer (`S`), or Imprint (`I`)
|
|
37
|
+
4. Point to the relevant UI to add comments or preview design changes, or use Imprint to review the project's shared understanding
|
|
38
|
+
5. Press Command+Enter on macOS or Control+Enter on Windows and Linux to hand pending work to your coding agent
|
|
39
|
+
6. Review the result in its page-bound thread and keep iterating there
|
|
39
40
|
|
|
40
|
-
|
|
41
|
+
A handoff can contain several comments and changes, including work on different elements. Popmelt keeps that bundle together as one thread and presents its items separately at the beginning of the conversation. Status stays attached to the relevant parts of the page while work is queued or running, and you can reopen a thread from any of its badges. Tool and Imprint receipts show what helped the agent reach its result.
|
|
42
|
+
|
|
43
|
+
### Chat
|
|
44
|
+
|
|
45
|
+
Chat pins a comment to a specific element. Click the element, type the comment, and press Enter to finish the draft. Use Shift+Enter for a new line or Command/Control+Enter to send the full pending bundle.
|
|
46
|
+
|
|
47
|
+
Double-click visible text to edit it directly. Popmelt records the text change so it can be handed off alongside comments and Steer changes.
|
|
48
|
+
|
|
49
|
+
### Steer
|
|
50
|
+
|
|
51
|
+
Steer previews code-native design changes directly on the page. Point to an element, choose a family, narrow to a property, and choose a value. Click the target or press Enter at the value level to stage the preview.
|
|
52
|
+
|
|
53
|
+
| Keys | Family |
|
|
54
|
+
| --- | --- |
|
|
55
|
+
| `P` / `M` | Padding / margin |
|
|
56
|
+
| `B` / `R` | Borders / radii |
|
|
57
|
+
| `F` / `G` | Flexbox / grid |
|
|
58
|
+
| `FO` / `BG` | Type / background color |
|
|
59
|
+
| `T` / `O` | Transform / opacity and blend mode |
|
|
60
|
+
|
|
61
|
+
The omnidial can be driven entirely from the keyboard: `Q` and `E` move between properties, `A` and `D` or the arrow keys move between values, `W` or Enter goes deeper or applies, and `S` or Escape goes back. Press Space to search families, properties, colors, and values by name.
|
|
62
|
+
|
|
63
|
+
At the value level, padding, margin, gap, radius, and transform controls expose drag handles. Hold Shift while dragging to snap or constrain the change. For spacing and radius handles, hold Option/Alt or Control to isolate the touched side, axis, or corner.
|
|
64
|
+
|
|
65
|
+
### Imprint
|
|
66
|
+
|
|
67
|
+
Imprint opens the project's shared understanding. Use its filters to review grounded, emerging, and challenged explanations. Expand an explanation to see its rationale, concrete expressions, related understanding, and recent grounding evidence, or reopen its source thread. Changes to the Imprint are proposed and grounded through collaboration in threads rather than authored from this panel.
|
|
68
|
+
|
|
69
|
+
### Threads and drafts
|
|
70
|
+
|
|
71
|
+
- Click an annotation or status badge to open its thread
|
|
72
|
+
- Use the left and right chevrons in the thread header to cycle through visible threads
|
|
73
|
+
- Drag a thread header to move the panel; double-click the header to restore its default position
|
|
74
|
+
- Press Escape to close the open thread
|
|
75
|
+
- Press Backspace or Delete with a thread open, or with one of its historical annotations selected, to archive that thread
|
|
76
|
+
- Right-click a draft comment or staged Steer change in its annotation rail to remove only that draft item
|
|
77
|
+
|
|
78
|
+
Archiving hides a thread from the active canvas without deleting its stored conversation. Delete shortcuts are disabled while a text field is focused.
|
|
79
|
+
|
|
80
|
+
### Pointer gestures
|
|
81
|
+
|
|
82
|
+
| Gesture | Action |
|
|
83
|
+
| --- | --- |
|
|
84
|
+
| Shake the pointer quickly | Switch between Chat and Steer |
|
|
85
|
+
| Hold Command/Control while pointing | Pass through the default target to the deepest element under the pointer |
|
|
86
|
+
| Double-click text in Chat | Edit the text directly |
|
|
87
|
+
| Click the toolbar annotation counter | Cycle through annotation bundles, including other routes |
|
|
88
|
+
| Scroll the annotation counter | Change the active annotation color |
|
|
89
|
+
| Hold the annotation counter | Reset the active color |
|
|
90
|
+
| Right-click Popmelt's canvas, then right-click again | Pass through to the page's native context menu |
|
|
41
91
|
|
|
42
92
|
## Ambient Popmelt in Codex
|
|
43
93
|
|
|
@@ -68,7 +118,7 @@ As you work, Popmelt recognizes choices that may be useful beyond the current th
|
|
|
68
118
|
|
|
69
119
|
Confirmed Imprint knowledge is available to future threads when it is relevant. Popmelt can also search the project's collaboration history when a question depends on earlier discussions, feedback, or the evolution of a part of the UI.
|
|
70
120
|
|
|
71
|
-
|
|
121
|
+
Enter Imprint mode with `I` to inspect the project's current understanding, supporting evidence, relationships, and exceptions.
|
|
72
122
|
|
|
73
123
|
## Manual setup
|
|
74
124
|
|
|
@@ -193,17 +243,21 @@ Popmelt is designed for local development. As with any AI-assisted coding, your
|
|
|
193
243
|
|
|
194
244
|
## Useful shortcuts
|
|
195
245
|
|
|
196
|
-
| Shortcut
|
|
197
|
-
|
|
|
198
|
-
| Double-tap Command or Control
|
|
199
|
-
| `C`
|
|
200
|
-
| `
|
|
201
|
-
|
|
|
202
|
-
| Command/Control+
|
|
203
|
-
| Command/Control+
|
|
204
|
-
|
|
|
205
|
-
| Command/Control+
|
|
206
|
-
|
|
|
246
|
+
| Shortcut | Action |
|
|
247
|
+
| --- | --- |
|
|
248
|
+
| Double-tap Command or Control | Open or collapse Popmelt |
|
|
249
|
+
| `C` | Enter Chat mode |
|
|
250
|
+
| `S` | Enter Steer mode |
|
|
251
|
+
| `I` | Enter Imprint mode |
|
|
252
|
+
| Command/Control+Enter | Send all pending work |
|
|
253
|
+
| Command/Control+C | Capture a screenshot for pending work when no text is selected |
|
|
254
|
+
| Command/Control+Z | Undo a pending change |
|
|
255
|
+
| Command/Control+Shift+Z | Redo a pending change |
|
|
256
|
+
| Backspace/Delete | Archive the open or selected historical thread |
|
|
257
|
+
| Command/Control+Backspace/Delete | Clear all annotations and pending changes |
|
|
258
|
+
| Escape | Go back, cancel, close, discard, or deselect in the current context |
|
|
259
|
+
|
|
260
|
+
Steer additionally owns the unmodified letter, arrow, Enter, Escape, and Space keys described above while it is active. Popmelt leaves these shortcuts alone while you are typing in an input, textarea, or editable text surface.
|
|
207
261
|
|
|
208
262
|
## Bridge commands
|
|
209
263
|
|