made-refine 0.1.8 → 0.1.9
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 +24 -368
- package/dist/index.d.mts +20 -10
- package/dist/index.d.ts +20 -10
- package/dist/index.js +2562 -2021
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2606 -2044
- package/dist/index.mjs.map +1 -1
- package/dist/mcp.cjs +39 -1
- package/dist/styles.css +1 -1
- package/dist/{utils-DyR599SI.d.mts → utils-ClbtK5sb.d.mts} +29 -4
- package/dist/{utils-DyR599SI.d.ts → utils-ClbtK5sb.d.ts} +29 -4
- package/dist/utils.d.mts +1 -1
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +166 -53
- package/dist/utils.js.map +1 -1
- package/dist/utils.mjs +162 -54
- package/dist/utils.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,386 +1,42 @@
|
|
|
1
|
-
#
|
|
1
|
+
# handmade
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/made-refine) [](https://www.npmjs.com/package/made-refine)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Visual CSS editor for React. Edit styles in the browser, then copy agent-ready edits with component and file context.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
<p align="center">
|
|
8
|
+
<img src=".github/screenshot.png" alt="handmade visual editor" width="720" />
|
|
9
|
+
</p>
|
|
8
10
|
|
|
9
|
-
|
|
11
|
+
- Edit spacing, colors, typography, borders, shadows, and layout visually
|
|
12
|
+
- Copies include component name, file path, and the exact changes — ready for Cursor or Claude Code
|
|
13
|
+
- One-command setup for Next.js, Vite, and TanStack Start
|
|
10
14
|
|
|
11
|
-
|
|
12
|
-
npx made-refine init
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
The CLI auto-detects your framework (Next.js, Vite, or TanStack Start), installs the package, and configures everything — with a diff preview before any file changes.
|
|
16
|
-
If you use Bun, you can run `bunx made-refine init` instead.
|
|
17
|
-
|
|
18
|
-
Or, paste this prompt into any AI coding assistant (Cursor, Copilot, Claude Code, etc.):
|
|
19
|
-
|
|
20
|
-
> Add made-refine to this project. Run `npx made-refine init` and follow the prompts. If Bun is available, `bunx made-refine init` also works.
|
|
21
|
-
|
|
22
|
-
---
|
|
23
|
-
|
|
24
|
-
## Manual Setup
|
|
25
|
-
|
|
26
|
-
If you prefer to set things up by hand, follow the instructions below for your framework.
|
|
27
|
-
|
|
28
|
-
### Installation
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
bun add made-refine@beta
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Next.js Setup
|
|
35
|
-
|
|
36
|
-
### 1. Add the Babel plugin (for source locations)
|
|
37
|
-
|
|
38
|
-
Create `.babelrc` in your project root:
|
|
39
|
-
|
|
40
|
-
```json
|
|
41
|
-
{
|
|
42
|
-
"presets": ["next/babel"],
|
|
43
|
-
"env": {
|
|
44
|
-
"development": {
|
|
45
|
-
"plugins": ["made-refine/babel"]
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
### 2. Copy the preload script to public
|
|
15
|
+
## Quick start
|
|
52
16
|
|
|
53
17
|
```bash
|
|
54
|
-
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
### 3. Add the preload script and component
|
|
58
|
-
|
|
59
|
-
In your root layout (`app/layout.tsx`):
|
|
60
|
-
|
|
61
|
-
```tsx
|
|
62
|
-
import Script from 'next/script'
|
|
63
|
-
import { DirectEdit } from 'made-refine'
|
|
64
|
-
|
|
65
|
-
export default function RootLayout({ children }) {
|
|
66
|
-
return (
|
|
67
|
-
<html>
|
|
68
|
-
<head>
|
|
69
|
-
{process.env.NODE_ENV === 'development' && (
|
|
70
|
-
<Script src="/made-refine-preload.js" strategy="beforeInteractive" />
|
|
71
|
-
)}
|
|
72
|
-
</head>
|
|
73
|
-
<body>
|
|
74
|
-
{children}
|
|
75
|
-
{process.env.NODE_ENV === 'development' && <DirectEdit />}
|
|
76
|
-
</body>
|
|
77
|
-
</html>
|
|
78
|
-
)
|
|
79
|
-
}
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
## Vite Setup
|
|
83
|
-
|
|
84
|
-
### 1. Configure vite.config.ts
|
|
85
|
-
|
|
86
|
-
```ts
|
|
87
|
-
import { defineConfig } from 'vite'
|
|
88
|
-
import react from '@vitejs/plugin-react'
|
|
89
|
-
import { madeRefine } from 'made-refine/vite'
|
|
90
|
-
|
|
91
|
-
export default defineConfig({
|
|
92
|
-
plugins: [
|
|
93
|
-
react({
|
|
94
|
-
babel: {
|
|
95
|
-
plugins: [require.resolve('made-refine/babel')],
|
|
96
|
-
},
|
|
97
|
-
}),
|
|
98
|
-
madeRefine(),
|
|
99
|
-
],
|
|
100
|
-
})
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
### 2. Add the component
|
|
104
|
-
|
|
105
|
-
```tsx
|
|
106
|
-
import { DirectEdit } from 'made-refine'
|
|
107
|
-
|
|
108
|
-
function App() {
|
|
109
|
-
return (
|
|
110
|
-
<>
|
|
111
|
-
<YourApp />
|
|
112
|
-
{import.meta.env.DEV && <DirectEdit />}
|
|
113
|
-
</>
|
|
114
|
-
)
|
|
115
|
-
}
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
The Vite plugin automatically injects the preload script in dev mode.
|
|
119
|
-
|
|
120
|
-
## TanStack Start Setup (SSR / Tauri)
|
|
121
|
-
|
|
122
|
-
TanStack Start uses SSR, so `DirectEdit` must be lazy-loaded to avoid server-side rendering errors.
|
|
123
|
-
|
|
124
|
-
### 1. Configure vite.config.ts
|
|
125
|
-
|
|
126
|
-
```ts
|
|
127
|
-
import { defineConfig } from 'vite'
|
|
128
|
-
import react from '@vitejs/plugin-react'
|
|
129
|
-
import { madeRefine } from 'made-refine/vite'
|
|
130
|
-
|
|
131
|
-
export default defineConfig({
|
|
132
|
-
plugins: [
|
|
133
|
-
react({
|
|
134
|
-
babel: {
|
|
135
|
-
plugins: ['made-refine/babel'],
|
|
136
|
-
},
|
|
137
|
-
}),
|
|
138
|
-
madeRefine(),
|
|
139
|
-
],
|
|
140
|
-
})
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
### 2. Add to Root Layout
|
|
144
|
-
|
|
145
|
-
```tsx
|
|
146
|
-
import { lazy, Suspense } from 'react'
|
|
147
|
-
|
|
148
|
-
const DirectEdit = lazy(() =>
|
|
149
|
-
import('made-refine').then((m) => ({ default: m.DirectEdit }))
|
|
150
|
-
)
|
|
151
|
-
|
|
152
|
-
function RootLayout() {
|
|
153
|
-
return (
|
|
154
|
-
<html lang="en">
|
|
155
|
-
<head>
|
|
156
|
-
<HeadContent />
|
|
157
|
-
</head>
|
|
158
|
-
<body>
|
|
159
|
-
<Outlet />
|
|
160
|
-
<Scripts />
|
|
161
|
-
{import.meta.env.DEV && typeof window !== 'undefined' && (
|
|
162
|
-
<Suspense>
|
|
163
|
-
<DirectEdit />
|
|
164
|
-
</Suspense>
|
|
165
|
-
)}
|
|
166
|
-
</body>
|
|
167
|
-
</html>
|
|
168
|
-
)
|
|
169
|
-
}
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
> **Why lazy + Suspense?** TanStack Start renders on the server first. `DirectEdit` uses browser APIs (`window`, `document`, `localStorage`) that don't exist during SSR. `lazy()` prevents the module from loading on the server, `typeof window !== "undefined"` skips rendering during SSR, and `<Suspense>` is required by React for lazy components.
|
|
173
|
-
|
|
174
|
-
> **Next.js doesn't need this** because it natively supports `'use client'` directives, which the package already includes. Next.js automatically handles the client boundary during SSR.
|
|
175
|
-
|
|
176
|
-
## Basic Usage
|
|
177
|
-
|
|
178
|
-
```tsx
|
|
179
|
-
import { DirectEdit } from 'made-refine'
|
|
180
|
-
|
|
181
|
-
function App() {
|
|
182
|
-
return (
|
|
183
|
-
<>
|
|
184
|
-
<YourApp />
|
|
185
|
-
{process.env.NODE_ENV === 'development' && <DirectEdit />}
|
|
186
|
-
</>
|
|
187
|
-
)
|
|
188
|
-
}
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
No CSS import needed - styles are auto-injected at runtime.
|
|
192
|
-
|
|
193
|
-
### Manual CSS (CSP/SSR)
|
|
194
|
-
|
|
195
|
-
If your app disallows inline styles, import the stylesheet directly and add `data-direct-edit-disable-styles` to your `<html>` element:
|
|
196
|
-
|
|
197
|
-
```tsx
|
|
198
|
-
import 'made-refine/styles'
|
|
199
|
-
import { DirectEdit } from 'made-refine'
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
### Advanced (Custom Setup)
|
|
203
|
-
|
|
204
|
-
```tsx
|
|
205
|
-
import { DirectEditProvider, DirectEditPanel, DirectEditToolbar, useDirectEdit } from 'made-refine'
|
|
206
|
-
|
|
207
|
-
function App() {
|
|
208
|
-
return (
|
|
209
|
-
<DirectEditProvider>
|
|
210
|
-
<YourApp />
|
|
211
|
-
<DirectEditPanel />
|
|
212
|
-
<CustomToolbar />
|
|
213
|
-
</DirectEditProvider>
|
|
214
|
-
)
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
function CustomToolbar() {
|
|
218
|
-
const { editModeActive, toggleEditMode } = useDirectEdit()
|
|
219
|
-
|
|
220
|
-
return (
|
|
221
|
-
<button onClick={toggleEditMode}>
|
|
222
|
-
{editModeActive ? 'Exit Edit Mode' : 'Enter Edit Mode'}
|
|
223
|
-
</button>
|
|
224
|
-
)
|
|
225
|
-
}
|
|
226
|
-
```
|
|
227
|
-
|
|
228
|
-
## Features
|
|
229
|
-
|
|
230
|
-
- **Element Selection**: Click any element to select it (or use `Cmd+.` / `Ctrl+.` to toggle edit mode)
|
|
231
|
-
- **Padding Controls**: Adjust padding with combined (horizontal/vertical) or individual mode
|
|
232
|
-
- **Border Radius**: Slider for uniform radius or individual corner controls
|
|
233
|
-
- **Flex Properties**: Direction, alignment grid, distribution, and gap controls
|
|
234
|
-
- **Copy as Tailwind**: One-click copy of modified styles as Tailwind classes
|
|
235
|
-
- **Send to Agent**: Send edits directly to Claude Code via MCP (no copy-paste needed)
|
|
236
|
-
- **Draggable Panel**: Position the panel anywhere on screen (persisted to localStorage)
|
|
237
|
-
- **Keyboard Shortcuts**:
|
|
238
|
-
- `Cmd+.` / `Ctrl+.`: Toggle edit mode
|
|
239
|
-
- `Escape`: Close panel or exit edit mode
|
|
240
|
-
|
|
241
|
-
## Claude Code Integration (MCP)
|
|
242
|
-
|
|
243
|
-
Made-Refine includes an MCP server that lets you send visual edits directly to Claude Code — no copy-paste needed.
|
|
244
|
-
|
|
245
|
-
### Setup
|
|
246
|
-
|
|
247
|
-
Add this to `.mcp.json` in your project root:
|
|
248
|
-
|
|
249
|
-
```json
|
|
250
|
-
{
|
|
251
|
-
"mcpServers": {
|
|
252
|
-
"made-refine": {
|
|
253
|
-
"command": "npx",
|
|
254
|
-
"args": ["-y", "made-refine-mcp"]
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
```
|
|
259
|
-
|
|
260
|
-
If you use Bun, set `"command": "bunx"` and `"args": ["made-refine-mcp"]`.
|
|
261
|
-
|
|
262
|
-
Restart Claude Code. You should see the Made-Refine tools available.
|
|
263
|
-
|
|
264
|
-
### Usage
|
|
265
|
-
|
|
266
|
-
1. Activate design mode (`Cmd+.`), select an element, adjust styles
|
|
267
|
-
2. Click the **Send** button in the panel footer
|
|
268
|
-
3. In Claude Code, the edit appears with the source file path, line number, and Tailwind classes
|
|
269
|
-
4. Claude Code reads the file and applies the changes
|
|
270
|
-
|
|
271
|
-
### Available Tools
|
|
272
|
-
|
|
273
|
-
| Tool | Description |
|
|
274
|
-
|------|-------------|
|
|
275
|
-
| `get_pending_edits` | Return all pending edits and comments |
|
|
276
|
-
| `get_edit_details` | Full structured data for one edit |
|
|
277
|
-
| `acknowledge_edit` | Mark as "working on it" |
|
|
278
|
-
| `resolve_edit` | Mark as applied |
|
|
279
|
-
| `dismiss_edit` | Reject with reason |
|
|
280
|
-
| `watch_edits` | Block until a new edit arrives |
|
|
281
|
-
| `list_all_annotations` | List all, optionally filtered by status |
|
|
282
|
-
|
|
283
|
-
### Hands-Free Mode
|
|
284
|
-
|
|
285
|
-
Paste this prompt into Claude Code to enter hands-free mode:
|
|
286
|
-
|
|
287
|
-
```
|
|
288
|
-
Watch for visual edits from Made-Refine and apply them as they come in.
|
|
289
|
-
Use watch_edits to wait for new edits, then read the source file, apply
|
|
290
|
-
the Tailwind class changes, and call resolve_edit. Keep watching after
|
|
291
|
-
each edit.
|
|
18
|
+
npx made-refine init
|
|
292
19
|
```
|
|
293
20
|
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
1. Calls `watch_edits` (blocks, waiting for the next edit)
|
|
297
|
-
2. You make a visual change in the browser and click **Send**
|
|
298
|
-
3. Claude Code receives the edit with source file path, line number, and Tailwind classes
|
|
299
|
-
4. It reads the file, applies the changes, calls `resolve_edit`
|
|
300
|
-
5. Calls `watch_edits` again, waiting for the next one
|
|
301
|
-
|
|
302
|
-
You keep tweaking in the browser, Claude Code keeps applying to source files.
|
|
303
|
-
|
|
304
|
-
## Troubleshooting
|
|
305
|
-
|
|
306
|
-
### Source file locations not showing
|
|
307
|
-
|
|
308
|
-
Make sure:
|
|
309
|
-
1. The Babel plugin is configured in development mode only
|
|
310
|
-
2. The preload script loads before React (use `strategy="beforeInteractive"` in Next.js)
|
|
311
|
-
3. You're running in development mode, not production
|
|
312
|
-
|
|
313
|
-
### Styles not appearing
|
|
314
|
-
|
|
315
|
-
If styles don't load:
|
|
316
|
-
- Check for Content Security Policy blocking inline styles
|
|
317
|
-
- Import `made-refine/styles` directly and add `data-direct-edit-disable-styles` to `<html>`
|
|
318
|
-
|
|
319
|
-
### Next.js: "Cannot find module" errors
|
|
320
|
-
|
|
321
|
-
After installing, restart your dev server to pick up the new Babel config.
|
|
322
|
-
|
|
323
|
-
### Vite: Preload script not working
|
|
324
|
-
|
|
325
|
-
Ensure `madeRefine()` plugin is added after `react()` in the plugins array.
|
|
326
|
-
|
|
327
|
-
## Exports
|
|
328
|
-
|
|
329
|
-
### Components
|
|
330
|
-
|
|
331
|
-
- `DirectEdit` - All-in-one component (Provider + Panel + Toolbar)
|
|
332
|
-
- `DirectEditProvider` - Context provider for state management
|
|
333
|
-
- `DirectEditPanel` - The main editor panel
|
|
334
|
-
- `DirectEditToolbar` - Floating toggle button
|
|
335
|
-
|
|
336
|
-
### Hooks
|
|
337
|
-
|
|
338
|
-
- `useDirectEdit()` - Access edit state and methods
|
|
339
|
-
|
|
340
|
-
### Utilities (`made-refine/utils`)
|
|
341
|
-
|
|
342
|
-
These utilities require DOM APIs and must run in the browser:
|
|
343
|
-
|
|
344
|
-
- `parsePropertyValue(value: string)` - Parse CSS value to structured format
|
|
345
|
-
- `formatPropertyValue(value: CSSPropertyValue)` - Format back to CSS string
|
|
346
|
-
- `getComputedStyles(element: HTMLElement)` - Get all editable styles
|
|
347
|
-
- `stylesToTailwind(styles: Record<string, string>)` - Convert to Tailwind classes
|
|
348
|
-
- `getElementInfo(element: HTMLElement)` - Get element metadata
|
|
349
|
-
- `getElementLocator(element: HTMLElement)` - Build element locator for exports
|
|
350
|
-
|
|
351
|
-
## Requirements
|
|
352
|
-
|
|
353
|
-
- React 18+
|
|
354
|
-
- Next.js 13+ or Vite 4+
|
|
355
|
-
|
|
356
|
-
## Release to npm
|
|
21
|
+
This detects your framework, installs the package, previews file changes, and applies them after your confirmation. No manual wiring needed.
|
|
357
22
|
|
|
358
|
-
|
|
23
|
+
## Usage
|
|
359
24
|
|
|
360
|
-
1.
|
|
361
|
-
2.
|
|
362
|
-
3.
|
|
363
|
-
- `release`: bump version and publish
|
|
364
|
-
- `unpublish`: remove selected versions from npm
|
|
365
|
-
4. For `release`, choose `bump` (`patch`, `minor`, `major`, or `prerelease`).
|
|
366
|
-
5. If using `prerelease`, set `preid` (default: `beta`).
|
|
367
|
-
6. Keep `npm_tag` as `auto` (stable -> `latest`, prerelease -> `beta`) or override it.
|
|
368
|
-
7. For `unpublish`, set `unpublish_versions` and `confirm_unpublish=UNPUBLISH`.
|
|
25
|
+
1. Start your dev server.
|
|
26
|
+
2. Press **Cmd+.** (or **Ctrl+.**) to toggle edit mode.
|
|
27
|
+
3. Select an element, adjust styles, then copy edits to your AI agent.
|
|
369
28
|
|
|
370
|
-
|
|
29
|
+
## How it works
|
|
371
30
|
|
|
372
|
-
|
|
31
|
+
- Renders inside Shadow DOM for full CSS isolation from your app
|
|
32
|
+
- Babel/Vite plugin adds source location metadata to every JSX element
|
|
33
|
+
- Hooks into React DevTools fiber tree for component name resolution
|
|
34
|
+
- Built-in MCP server enables hands-free agent workflows
|
|
373
35
|
|
|
374
|
-
|
|
36
|
+
## Supported frameworks
|
|
375
37
|
|
|
376
|
-
|
|
377
|
-
- `--muted`, `--muted-foreground`
|
|
378
|
-
- `--border`, `--input`, `--ring`
|
|
379
|
-
- `--primary`, `--primary-foreground`
|
|
380
|
-
- `--secondary`, `--secondary-foreground`
|
|
381
|
-
- `--accent`, `--accent-foreground`
|
|
382
|
-
- `--radius`
|
|
38
|
+
Next.js · Vite · TanStack Start
|
|
383
39
|
|
|
384
40
|
## License
|
|
385
41
|
|
|
386
|
-
MIT
|
|
42
|
+
[MIT](./LICENSE)
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { D as DragState, a as DropIndicator,
|
|
4
|
-
export {
|
|
3
|
+
import { D as DragState, a as DropIndicator, S as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, b as BorderPropertyKey, c as BorderProperties, F as FlexPropertyKey, d as SizingPropertyKey, e as SizingValue, f as ColorPropertyKey, g as ColorValue, T as TypographyPropertyKey, A as ActiveTool, h as Theme, i as BorderStyleControlPreference, j as SessionEdit, k as SessionItem, l as DirectEditState, m as TypographyProperties, M as MeasurementLine, G as Guideline, n as Comment } from './utils-ClbtK5sb.mjs';
|
|
4
|
+
export { o as BorderRadiusProperties, p as BorderStyle, q as ColorProperties, r as CommentReply, s as DomSourceLocation, t as DropTarget, E as ElementInfo, u as ElementLocator, v as FlexProperties, w as MeasurementState, R as ReactComponentFrame, x as SizingMode, y as SizingProperties, z as SpacingProperties, U as UndoEditEntry, H as UndoEntry, I as UndoMoveEntry, J as UndoSelectionEntry, K as buildCommentExport, L as buildSessionExport, N as calculateDropPosition, O as calculateElementMeasurements, P as calculateGuidelineMeasurements, Q as calculateParentMeasurements, V as colorToTailwind, W as elementFromPointWithoutOverlays, X as findContainerAtPoint, Y as formatPropertyValue, Z as getComputedBorderStyles, _ as getComputedBoxShadow, $ as getComputedColorStyles, a0 as getComputedStyles, a1 as getDimensionDisplay, a2 as getElementInfo, a3 as getElementLocator, a4 as getFlexDirection, a5 as isFlexContainer, a6 as parseColorValue, a7 as parsePropertyValue, a8 as stylesToTailwind } from './utils-ClbtK5sb.mjs';
|
|
5
5
|
|
|
6
6
|
declare function DirectEdit(): react_jsx_runtime.JSX.Element;
|
|
7
7
|
|
|
@@ -28,7 +28,7 @@ interface UseMoveResult {
|
|
|
28
28
|
}
|
|
29
29
|
declare function useMove({ onMoveComplete }: UseMoveOptions): UseMoveResult;
|
|
30
30
|
|
|
31
|
-
interface
|
|
31
|
+
interface DirectEditActionsContextValue {
|
|
32
32
|
selectElement: (element: HTMLElement) => void;
|
|
33
33
|
selectParent: () => void;
|
|
34
34
|
selectChild: () => void;
|
|
@@ -50,6 +50,7 @@ interface DirectEditContextValue extends DirectEditState {
|
|
|
50
50
|
handleMoveComplete: (element: HTMLElement, moveInfo: MoveInfo | null) => void;
|
|
51
51
|
setActiveTool: (tool: ActiveTool) => void;
|
|
52
52
|
setTheme: (theme: Theme) => void;
|
|
53
|
+
setBorderStyleControlPreference: (preference: BorderStyleControlPreference) => void;
|
|
53
54
|
addComment: (element: HTMLElement, clickPosition: {
|
|
54
55
|
x: number;
|
|
55
56
|
y: number;
|
|
@@ -61,14 +62,21 @@ interface DirectEditContextValue extends DirectEditState {
|
|
|
61
62
|
sendEditToAgent: () => Promise<boolean>;
|
|
62
63
|
sendCommentToAgent: (id: string) => Promise<boolean>;
|
|
63
64
|
setActiveCommentId: (id: string | null) => void;
|
|
64
|
-
sessionEditCount: number;
|
|
65
65
|
getSessionEdits: () => SessionEdit[];
|
|
66
|
+
getSessionItems: () => SessionItem[];
|
|
66
67
|
exportAllEdits: () => Promise<boolean>;
|
|
67
68
|
clearSessionEdits: () => void;
|
|
68
69
|
removeSessionEdit: (element: HTMLElement) => void;
|
|
69
70
|
startTextEditing: (element: HTMLElement) => void;
|
|
70
71
|
commitTextEditing: () => void;
|
|
71
72
|
}
|
|
73
|
+
interface DirectEditStateContextValue extends DirectEditState {
|
|
74
|
+
sessionEditCount: number;
|
|
75
|
+
}
|
|
76
|
+
interface DirectEditContextValue extends DirectEditStateContextValue, DirectEditActionsContextValue {
|
|
77
|
+
}
|
|
78
|
+
declare function useDirectEditState(): DirectEditStateContextValue;
|
|
79
|
+
declare function useDirectEditActions(): DirectEditActionsContextValue;
|
|
72
80
|
declare function useDirectEdit(): DirectEditContextValue;
|
|
73
81
|
interface DirectEditProviderProps {
|
|
74
82
|
children: React.ReactNode;
|
|
@@ -119,6 +127,8 @@ interface DirectEditPanelInnerProps {
|
|
|
119
127
|
borderColor: ColorValue;
|
|
120
128
|
outlineColor: ColorValue;
|
|
121
129
|
} | null;
|
|
130
|
+
computedBoxShadow?: string;
|
|
131
|
+
borderStyleControlPreference?: BorderStyleControlPreference;
|
|
122
132
|
computedTypography: TypographyProperties | null;
|
|
123
133
|
pendingStyles: Record<string, string>;
|
|
124
134
|
onClose?: () => void;
|
|
@@ -145,7 +155,7 @@ interface DirectEditPanelInnerProps {
|
|
|
145
155
|
onHeaderPointerMove?: (e: React.PointerEvent) => void;
|
|
146
156
|
onHeaderPointerUp?: (e: React.PointerEvent) => void;
|
|
147
157
|
}
|
|
148
|
-
declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onUpdateTypography, onReset, onExportEdits, onSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
|
|
158
|
+
declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, computedBoxShadow, borderStyleControlPreference, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onUpdateTypography, onReset, onExportEdits, onSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
|
|
149
159
|
declare function DirectEditPanel(): react_jsx_runtime.JSX.Element | null;
|
|
150
160
|
|
|
151
161
|
interface DirectEditToolbarInnerProps {
|
|
@@ -158,13 +168,14 @@ interface DirectEditToolbarInnerProps {
|
|
|
158
168
|
theme?: Theme;
|
|
159
169
|
onSetTheme?: (theme: Theme) => void;
|
|
160
170
|
sessionEditCount?: number;
|
|
161
|
-
|
|
171
|
+
onGetSessionItems?: () => SessionItem[];
|
|
162
172
|
onExportAllEdits?: () => Promise<boolean>;
|
|
163
173
|
onClearSessionEdits?: () => void;
|
|
164
174
|
onRemoveSessionEdit?: (element: HTMLElement) => void;
|
|
175
|
+
onDeleteComment?: (id: string) => void;
|
|
165
176
|
className?: string;
|
|
166
177
|
}
|
|
167
|
-
declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool, onSetActiveTool, theme, onSetTheme, sessionEditCount,
|
|
178
|
+
declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool, onSetActiveTool, theme, onSetTheme, sessionEditCount, onGetSessionItems, onExportAllEdits, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, }: DirectEditToolbarInnerProps): react_jsx_runtime.JSX.Element;
|
|
168
179
|
declare function DirectEditToolbar(): react_jsx_runtime.JSX.Element | null;
|
|
169
180
|
|
|
170
181
|
interface UseMeasurementResult {
|
|
@@ -235,11 +246,10 @@ interface CommentOverlayProps {
|
|
|
235
246
|
onUpdateText: (id: string, text: string) => void;
|
|
236
247
|
onAddReply: (id: string, text: string) => void;
|
|
237
248
|
onDelete: (id: string) => void;
|
|
238
|
-
onExport: (id: string) => Promise<boolean>;
|
|
239
249
|
onSendToAgent: (id: string) => Promise<boolean>;
|
|
240
250
|
}
|
|
241
|
-
declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete,
|
|
251
|
+
declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete, onSendToAgent, }: CommentOverlayProps): react_jsx_runtime.JSX.Element | null;
|
|
242
252
|
|
|
243
253
|
declare function formatColorValue(color: ColorValue): string;
|
|
244
254
|
|
|
245
|
-
export { ActiveTool, BorderProperties, BorderPropertyKey, BorderRadiusPropertyKey, CSSPropertyValue, ColorPropertyKey, ColorValue, Comment, CommentOverlay, type CommentOverlayProps, DirectEdit, type DirectEditContextValue, DirectEditDemo, DirectEditPanel, DirectEditPanelInner, type DirectEditPanelInnerProps, DirectEditProvider, DirectEditState, DirectEditToolbar, DirectEditToolbarInner, type DirectEditToolbarInnerProps, DragState, DropIndicator, FlexPropertyKey, Guideline, MeasurementLine, MeasurementOverlay, type MeasurementOverlayProps, type MoveInfo, MoveOverlay, type MoveOverlayProps, Rulers, RulersOverlay, SelectionOverlay, type SelectionOverlayProps, SessionEdit, SizingPropertyKey, SizingValue, SpacingPropertyKey, Theme, TypographyProperties, TypographyPropertyKey, type UseGuidelinesResult, type UseMeasurementResult, type UseMoveDropTarget, type UseMoveOptions, type UseMoveResult, formatColorValue, getStoredGuidelines, useDirectEdit, useGuidelines, useMeasurement, useMove, useRulersVisible };
|
|
255
|
+
export { ActiveTool, BorderProperties, BorderPropertyKey, BorderRadiusPropertyKey, CSSPropertyValue, ColorPropertyKey, ColorValue, Comment, CommentOverlay, type CommentOverlayProps, DirectEdit, type DirectEditActionsContextValue, type DirectEditContextValue, DirectEditDemo, DirectEditPanel, DirectEditPanelInner, type DirectEditPanelInnerProps, DirectEditProvider, DirectEditState, type DirectEditStateContextValue, DirectEditToolbar, DirectEditToolbarInner, type DirectEditToolbarInnerProps, DragState, DropIndicator, FlexPropertyKey, Guideline, MeasurementLine, MeasurementOverlay, type MeasurementOverlayProps, type MoveInfo, MoveOverlay, type MoveOverlayProps, Rulers, RulersOverlay, SelectionOverlay, type SelectionOverlayProps, SessionEdit, SizingPropertyKey, SizingValue, SpacingPropertyKey, Theme, TypographyProperties, TypographyPropertyKey, type UseGuidelinesResult, type UseMeasurementResult, type UseMoveDropTarget, type UseMoveOptions, type UseMoveResult, formatColorValue, getStoredGuidelines, useDirectEdit, useDirectEditActions, useDirectEditState, useGuidelines, useMeasurement, useMove, useRulersVisible };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { D as DragState, a as DropIndicator,
|
|
4
|
-
export {
|
|
3
|
+
import { D as DragState, a as DropIndicator, S as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, b as BorderPropertyKey, c as BorderProperties, F as FlexPropertyKey, d as SizingPropertyKey, e as SizingValue, f as ColorPropertyKey, g as ColorValue, T as TypographyPropertyKey, A as ActiveTool, h as Theme, i as BorderStyleControlPreference, j as SessionEdit, k as SessionItem, l as DirectEditState, m as TypographyProperties, M as MeasurementLine, G as Guideline, n as Comment } from './utils-ClbtK5sb.js';
|
|
4
|
+
export { o as BorderRadiusProperties, p as BorderStyle, q as ColorProperties, r as CommentReply, s as DomSourceLocation, t as DropTarget, E as ElementInfo, u as ElementLocator, v as FlexProperties, w as MeasurementState, R as ReactComponentFrame, x as SizingMode, y as SizingProperties, z as SpacingProperties, U as UndoEditEntry, H as UndoEntry, I as UndoMoveEntry, J as UndoSelectionEntry, K as buildCommentExport, L as buildSessionExport, N as calculateDropPosition, O as calculateElementMeasurements, P as calculateGuidelineMeasurements, Q as calculateParentMeasurements, V as colorToTailwind, W as elementFromPointWithoutOverlays, X as findContainerAtPoint, Y as formatPropertyValue, Z as getComputedBorderStyles, _ as getComputedBoxShadow, $ as getComputedColorStyles, a0 as getComputedStyles, a1 as getDimensionDisplay, a2 as getElementInfo, a3 as getElementLocator, a4 as getFlexDirection, a5 as isFlexContainer, a6 as parseColorValue, a7 as parsePropertyValue, a8 as stylesToTailwind } from './utils-ClbtK5sb.js';
|
|
5
5
|
|
|
6
6
|
declare function DirectEdit(): react_jsx_runtime.JSX.Element;
|
|
7
7
|
|
|
@@ -28,7 +28,7 @@ interface UseMoveResult {
|
|
|
28
28
|
}
|
|
29
29
|
declare function useMove({ onMoveComplete }: UseMoveOptions): UseMoveResult;
|
|
30
30
|
|
|
31
|
-
interface
|
|
31
|
+
interface DirectEditActionsContextValue {
|
|
32
32
|
selectElement: (element: HTMLElement) => void;
|
|
33
33
|
selectParent: () => void;
|
|
34
34
|
selectChild: () => void;
|
|
@@ -50,6 +50,7 @@ interface DirectEditContextValue extends DirectEditState {
|
|
|
50
50
|
handleMoveComplete: (element: HTMLElement, moveInfo: MoveInfo | null) => void;
|
|
51
51
|
setActiveTool: (tool: ActiveTool) => void;
|
|
52
52
|
setTheme: (theme: Theme) => void;
|
|
53
|
+
setBorderStyleControlPreference: (preference: BorderStyleControlPreference) => void;
|
|
53
54
|
addComment: (element: HTMLElement, clickPosition: {
|
|
54
55
|
x: number;
|
|
55
56
|
y: number;
|
|
@@ -61,14 +62,21 @@ interface DirectEditContextValue extends DirectEditState {
|
|
|
61
62
|
sendEditToAgent: () => Promise<boolean>;
|
|
62
63
|
sendCommentToAgent: (id: string) => Promise<boolean>;
|
|
63
64
|
setActiveCommentId: (id: string | null) => void;
|
|
64
|
-
sessionEditCount: number;
|
|
65
65
|
getSessionEdits: () => SessionEdit[];
|
|
66
|
+
getSessionItems: () => SessionItem[];
|
|
66
67
|
exportAllEdits: () => Promise<boolean>;
|
|
67
68
|
clearSessionEdits: () => void;
|
|
68
69
|
removeSessionEdit: (element: HTMLElement) => void;
|
|
69
70
|
startTextEditing: (element: HTMLElement) => void;
|
|
70
71
|
commitTextEditing: () => void;
|
|
71
72
|
}
|
|
73
|
+
interface DirectEditStateContextValue extends DirectEditState {
|
|
74
|
+
sessionEditCount: number;
|
|
75
|
+
}
|
|
76
|
+
interface DirectEditContextValue extends DirectEditStateContextValue, DirectEditActionsContextValue {
|
|
77
|
+
}
|
|
78
|
+
declare function useDirectEditState(): DirectEditStateContextValue;
|
|
79
|
+
declare function useDirectEditActions(): DirectEditActionsContextValue;
|
|
72
80
|
declare function useDirectEdit(): DirectEditContextValue;
|
|
73
81
|
interface DirectEditProviderProps {
|
|
74
82
|
children: React.ReactNode;
|
|
@@ -119,6 +127,8 @@ interface DirectEditPanelInnerProps {
|
|
|
119
127
|
borderColor: ColorValue;
|
|
120
128
|
outlineColor: ColorValue;
|
|
121
129
|
} | null;
|
|
130
|
+
computedBoxShadow?: string;
|
|
131
|
+
borderStyleControlPreference?: BorderStyleControlPreference;
|
|
122
132
|
computedTypography: TypographyProperties | null;
|
|
123
133
|
pendingStyles: Record<string, string>;
|
|
124
134
|
onClose?: () => void;
|
|
@@ -145,7 +155,7 @@ interface DirectEditPanelInnerProps {
|
|
|
145
155
|
onHeaderPointerMove?: (e: React.PointerEvent) => void;
|
|
146
156
|
onHeaderPointerUp?: (e: React.PointerEvent) => void;
|
|
147
157
|
}
|
|
148
|
-
declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onUpdateTypography, onReset, onExportEdits, onSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
|
|
158
|
+
declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, computedBoxShadow, borderStyleControlPreference, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onUpdateTypography, onReset, onExportEdits, onSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
|
|
149
159
|
declare function DirectEditPanel(): react_jsx_runtime.JSX.Element | null;
|
|
150
160
|
|
|
151
161
|
interface DirectEditToolbarInnerProps {
|
|
@@ -158,13 +168,14 @@ interface DirectEditToolbarInnerProps {
|
|
|
158
168
|
theme?: Theme;
|
|
159
169
|
onSetTheme?: (theme: Theme) => void;
|
|
160
170
|
sessionEditCount?: number;
|
|
161
|
-
|
|
171
|
+
onGetSessionItems?: () => SessionItem[];
|
|
162
172
|
onExportAllEdits?: () => Promise<boolean>;
|
|
163
173
|
onClearSessionEdits?: () => void;
|
|
164
174
|
onRemoveSessionEdit?: (element: HTMLElement) => void;
|
|
175
|
+
onDeleteComment?: (id: string) => void;
|
|
165
176
|
className?: string;
|
|
166
177
|
}
|
|
167
|
-
declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool, onSetActiveTool, theme, onSetTheme, sessionEditCount,
|
|
178
|
+
declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool, onSetActiveTool, theme, onSetTheme, sessionEditCount, onGetSessionItems, onExportAllEdits, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, }: DirectEditToolbarInnerProps): react_jsx_runtime.JSX.Element;
|
|
168
179
|
declare function DirectEditToolbar(): react_jsx_runtime.JSX.Element | null;
|
|
169
180
|
|
|
170
181
|
interface UseMeasurementResult {
|
|
@@ -235,11 +246,10 @@ interface CommentOverlayProps {
|
|
|
235
246
|
onUpdateText: (id: string, text: string) => void;
|
|
236
247
|
onAddReply: (id: string, text: string) => void;
|
|
237
248
|
onDelete: (id: string) => void;
|
|
238
|
-
onExport: (id: string) => Promise<boolean>;
|
|
239
249
|
onSendToAgent: (id: string) => Promise<boolean>;
|
|
240
250
|
}
|
|
241
|
-
declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete,
|
|
251
|
+
declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete, onSendToAgent, }: CommentOverlayProps): react_jsx_runtime.JSX.Element | null;
|
|
242
252
|
|
|
243
253
|
declare function formatColorValue(color: ColorValue): string;
|
|
244
254
|
|
|
245
|
-
export { ActiveTool, BorderProperties, BorderPropertyKey, BorderRadiusPropertyKey, CSSPropertyValue, ColorPropertyKey, ColorValue, Comment, CommentOverlay, type CommentOverlayProps, DirectEdit, type DirectEditContextValue, DirectEditDemo, DirectEditPanel, DirectEditPanelInner, type DirectEditPanelInnerProps, DirectEditProvider, DirectEditState, DirectEditToolbar, DirectEditToolbarInner, type DirectEditToolbarInnerProps, DragState, DropIndicator, FlexPropertyKey, Guideline, MeasurementLine, MeasurementOverlay, type MeasurementOverlayProps, type MoveInfo, MoveOverlay, type MoveOverlayProps, Rulers, RulersOverlay, SelectionOverlay, type SelectionOverlayProps, SessionEdit, SizingPropertyKey, SizingValue, SpacingPropertyKey, Theme, TypographyProperties, TypographyPropertyKey, type UseGuidelinesResult, type UseMeasurementResult, type UseMoveDropTarget, type UseMoveOptions, type UseMoveResult, formatColorValue, getStoredGuidelines, useDirectEdit, useGuidelines, useMeasurement, useMove, useRulersVisible };
|
|
255
|
+
export { ActiveTool, BorderProperties, BorderPropertyKey, BorderRadiusPropertyKey, CSSPropertyValue, ColorPropertyKey, ColorValue, Comment, CommentOverlay, type CommentOverlayProps, DirectEdit, type DirectEditActionsContextValue, type DirectEditContextValue, DirectEditDemo, DirectEditPanel, DirectEditPanelInner, type DirectEditPanelInnerProps, DirectEditProvider, DirectEditState, type DirectEditStateContextValue, DirectEditToolbar, DirectEditToolbarInner, type DirectEditToolbarInnerProps, DragState, DropIndicator, FlexPropertyKey, Guideline, MeasurementLine, MeasurementOverlay, type MeasurementOverlayProps, type MoveInfo, MoveOverlay, type MoveOverlayProps, Rulers, RulersOverlay, SelectionOverlay, type SelectionOverlayProps, SessionEdit, SizingPropertyKey, SizingValue, SpacingPropertyKey, Theme, TypographyProperties, TypographyPropertyKey, type UseGuidelinesResult, type UseMeasurementResult, type UseMoveDropTarget, type UseMoveOptions, type UseMoveResult, formatColorValue, getStoredGuidelines, useDirectEdit, useDirectEditActions, useDirectEditState, useGuidelines, useMeasurement, useMove, useRulersVisible };
|