made-refine 0.2.1-beta.1 → 0.2.2

package/LICENSE.md

@@ -0,0 +1,110 @@
+# Functional Source License, Version 1.1, MIT Future License
+
+## Abbreviation
+
+FSL-1.1-MIT
+
+## Notice
+
+Copyright 2025 Reza Ilmi
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the MIT license that is effective on the second anniversary of the date we make
+the Software available. On or after that date, you may use the Software under
+the MIT license, in which case the following will apply:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -8,35 +8,51 @@ Visual CSS editor for React. Edit styles in the browser, then copy agent-ready e
   <img src=".github/screenshot.png" alt="handmade visual editor" width="720" />
 </p>
 
-- Edit spacing, colors, typography, borders, shadows, and layout visually
-- Copies include component name, file path, and the exact changes — ready for Cursor or Claude Code
-- One-command setup for Next.js, Vite, and TanStack Start
-
 ## Quick start
 
 ```bash
 npx made-refine@latest init
 ```
 
-This detects your framework, installs the package, previews file changes, and applies them after your confirmation. No manual wiring needed.
-
-## Usage
-
-1. Start your dev server.
-2. Press **Cmd+.** (or **Ctrl+.**) to toggle edit mode.
-3. Select an element, adjust styles, then copy edits to your AI agent.
+Run this in your project folder. It detects your framework and applies the necessary config changes after your confirmation.
 
 ## How it works
 
-- Renders inside Shadow DOM for full CSS isolation from your app
-- Babel/Vite plugin adds source location metadata to every JSX element
-- Hooks into React DevTools fiber tree for component name resolution
-- Integrates with the desktop app MCP broker for hands-free agent workflows
-
-## Supported frameworks
-
-Next.js · Vite · TanStack Start
+1. **Start your dev server** as usual.
+2. **Press `Cmd + .`** (or `Ctrl + .`) to open the editor right in the browser, on your running app.
+3. **Click any element** on the page to select it.
+4. **Edit visually** — adjust layout, spacing, radius, borders, shadows, colors, move elements, and edit text directly from the side panel. Undo anytime with `Cmd + Z`.
+5. **Copy the changes** — edits are formatted with the component name, file path, and exact CSS changes so you can paste them straight into Cursor or Claude Code.
+
+Your app keeps running normally. The editor floats on top and never touches your actual styles until you apply the changes through your AI coding agent.
+
+## Adding handmade to your project
+
+### Setup
+
+1. **Open the terminal** in your project folder and run:
+   ```bash
+   npx made-refine@latest init
+   ```
+2. **Review and confirm** the config changes when prompted. That's it — handmade is installed.
+
+### Using the editor
+
+1. **Start your dev server** and open the app in the browser.
+2. **Press `Cmd + .`** on Mac (or `Ctrl + .` on Windows) to turn on the editor.
+3. **Click any element** — a text block, a button, an image, anything on the page.
+4. **Make your changes** using the side panel:
+   - **Layout** — adjust padding, margin, sizing, and flex alignment
+   - **Colors** — change background, text, border, and outline colors
+   - **Radius** — round corners individually or all at once
+   - **Borders** — set style, width, and color per side
+   - **Shadows** — add and layer drop shadows
+   - **Typography** — change font, size, weight, spacing, and alignment
+   - **Move** — drag elements to reposition them
+   - **Text** — press `Enter` on a text element to edit its content directly
+5. **Undo** with `Cmd + Z`.
+6. **Click the copy button** to grab your edits. Paste them into Cursor or Claude Code — the edit includes the file name and component so the AI knows exactly where to apply it.
 
 ## License
 
-[MIT](./LICENSE)
+[FSL-1.1-MIT](./LICENSE)

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-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-DUE0nsRc.mjs';
-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-DUE0nsRc.mjs';
+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 DirectEditState, k as SessionEdit, l as SessionItem, m as TypographyProperties, M as MeasurementLine, G as Guideline, n as Comment } from './utils-BHGlXxF7.mjs';
+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-BHGlXxF7.mjs';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
@@ -62,8 +62,13 @@ interface DirectEditActionsContextValue {
     addCommentReply: (id: string, text: string) => void;
     deleteComment: (id: string) => void;
     exportComment: (id: string) => Promise<boolean>;
-    canSendEditToAgent: () => boolean;
+    canSendEditToAgent: (snapshot?: {
+        selectedElement: HTMLElement | null;
+        elementInfo: DirectEditState['elementInfo'];
+        pendingStyles: Record<string, string>;
+    }) => boolean;
     sendEditToAgent: () => Promise<boolean>;
+    sendAllSessionItemsToAgent: () => Promise<boolean>;
     sendCommentToAgent: (id: string) => Promise<boolean>;
     setActiveCommentId: (id: string | null) => void;
     getSessionEdits: () => SessionEdit[];
@@ -159,8 +164,9 @@ interface DirectEditPanelInnerProps {
     onHeaderPointerDown?: (e: React.PointerEvent) => void;
     onHeaderPointerMove?: (e: React.PointerEvent) => void;
     onHeaderPointerUp?: (e: React.PointerEvent) => void;
+    onHeaderPointerCancel?: (e: React.PointerEvent) => void;
 }
-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, canSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
+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, canSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, onHeaderPointerCancel, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
 declare function DirectEditPanel(): react_jsx_runtime.JSX.Element | null;
 
 interface DirectEditToolbarInnerProps {
@@ -175,12 +181,13 @@ interface DirectEditToolbarInnerProps {
     sessionEditCount?: number;
     onGetSessionItems?: () => SessionItem[];
     onExportAllEdits?: () => Promise<boolean>;
+    onSendAllToAgents?: () => Promise<boolean>;
     onClearSessionEdits?: () => void;
     onRemoveSessionEdit?: (element: HTMLElement) => void;
     onDeleteComment?: (id: string) => void;
     className?: string;
 }
-declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool, onSetActiveTool, theme, onSetTheme, sessionEditCount, onGetSessionItems, onExportAllEdits, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, }: DirectEditToolbarInnerProps): react_jsx_runtime.JSX.Element;
+declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool, onSetActiveTool, theme, onSetTheme, sessionEditCount, onGetSessionItems, onExportAllEdits, onSendAllToAgents, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, }: DirectEditToolbarInnerProps): react_jsx_runtime.JSX.Element;
 declare function DirectEditToolbar(): react_jsx_runtime.JSX.Element | null;
 
 interface UseMeasurementResult {

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-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-DUE0nsRc.js';
-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-DUE0nsRc.js';
+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 DirectEditState, k as SessionEdit, l as SessionItem, m as TypographyProperties, M as MeasurementLine, G as Guideline, n as Comment } from './utils-BHGlXxF7.js';
+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-BHGlXxF7.js';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
@@ -62,8 +62,13 @@ interface DirectEditActionsContextValue {
     addCommentReply: (id: string, text: string) => void;
     deleteComment: (id: string) => void;
     exportComment: (id: string) => Promise<boolean>;
-    canSendEditToAgent: () => boolean;
+    canSendEditToAgent: (snapshot?: {
+        selectedElement: HTMLElement | null;
+        elementInfo: DirectEditState['elementInfo'];
+        pendingStyles: Record<string, string>;
+    }) => boolean;
     sendEditToAgent: () => Promise<boolean>;
+    sendAllSessionItemsToAgent: () => Promise<boolean>;
     sendCommentToAgent: (id: string) => Promise<boolean>;
     setActiveCommentId: (id: string | null) => void;
     getSessionEdits: () => SessionEdit[];
@@ -159,8 +164,9 @@ interface DirectEditPanelInnerProps {
     onHeaderPointerDown?: (e: React.PointerEvent) => void;
     onHeaderPointerMove?: (e: React.PointerEvent) => void;
     onHeaderPointerUp?: (e: React.PointerEvent) => void;
+    onHeaderPointerCancel?: (e: React.PointerEvent) => void;
 }
-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, canSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
+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, canSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, onHeaderPointerCancel, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
 declare function DirectEditPanel(): react_jsx_runtime.JSX.Element | null;
 
 interface DirectEditToolbarInnerProps {
@@ -175,12 +181,13 @@ interface DirectEditToolbarInnerProps {
     sessionEditCount?: number;
     onGetSessionItems?: () => SessionItem[];
     onExportAllEdits?: () => Promise<boolean>;
+    onSendAllToAgents?: () => Promise<boolean>;
     onClearSessionEdits?: () => void;
     onRemoveSessionEdit?: (element: HTMLElement) => void;
     onDeleteComment?: (id: string) => void;
     className?: string;
 }
-declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool, onSetActiveTool, theme, onSetTheme, sessionEditCount, onGetSessionItems, onExportAllEdits, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, }: DirectEditToolbarInnerProps): react_jsx_runtime.JSX.Element;
+declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool, onSetActiveTool, theme, onSetTheme, sessionEditCount, onGetSessionItems, onExportAllEdits, onSendAllToAgents, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, }: DirectEditToolbarInnerProps): react_jsx_runtime.JSX.Element;
 declare function DirectEditToolbar(): react_jsx_runtime.JSX.Element | null;
 
 interface UseMeasurementResult {