made-refine 0.2.20 → 0.3.0

package/README.md

@@ -5,7 +5,7 @@
 Visual CSS editor for React. Edit styles in the browser, then copy agent-ready edits with component and file context.
 
 <p align="center">
-  <img src=".github/screenshot.png" alt="handmade visual editor" width="720" />
+  <img src="https://raw.githubusercontent.com/rezailmi/made-refine/main/.github/screenshot.png" alt="handmade visual editor" width="720" />
 </p>
 
 ## Quick start

package/dist/babel.cjs

@@ -5,7 +5,11 @@ var path = require("path");
 function isHostElement(name) {
   return /^[a-z]/.test(name);
 }
-module.exports = function directEditSourcePlugin({ types: t }) {
+module.exports = function directEditSourcePlugin(api) {
+  const t = api.types;
+  if (typeof api.env === "function" && !api.env("development")) {
+    return { name: "direct-edit-source", visitor: {} };
+  }
   return {
     name: "direct-edit-source",
     visitor: {

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 SelectElementOptions, b as SelectElementsOptions, c as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, d as BorderPropertyKey, e as BorderProperties, F as FlexPropertyKey, f as SizingPropertyKey, g as SizingValue, h as SizingChangeOptions, i as ColorPropertyKey, j as ColorValue, T as TypographyPropertyKey, A as ActiveTool, k as Theme, l as BorderStyleControlPreference, m as DirectEditState, n as SessionEdit, o as SessionItem, p as CanvasElementKind, q as TypographyProperties, M as MeasurementLine, G as Guideline, r as Comment } from './utils-CpmjloNg.mjs';
-export { s as BorderRadiusProperties, t as BorderStyle, u as ColorProperties, v as CommentReply, w as DomSourceLocation, x as DropTarget, E as ElementInfo, y as ElementLocator, z as FlexProperties, H as MeasurementState, R as ReactComponentFrame, I as SizingChangePhase, J as SizingMode, K as SizingProperties, L as SpacingProperties, U as UndoEditEntry, N as UndoEntry, O as UndoMoveEntry, P as UndoSelectionEntry, Q as buildCommentExport, V as buildSessionExport, W as calculateDropPosition, X as calculateElementMeasurements, Y as calculateGuidelineMeasurements, Z as calculateParentMeasurements, _ as colorToTailwind, $ as elementFromPointWithoutOverlays, a0 as findContainerAtPoint, a1 as findLayoutContainerAtPoint, a2 as formatPropertyValue, a3 as getComputedBorderStyles, a4 as getComputedBoxShadow, a5 as getComputedColorStyles, a6 as getComputedStyles, a7 as getDimensionDisplay, a8 as getElementInfo, a9 as getElementLocator, aa as getFlexDirection, ab as isFlexContainer, ac as isLayoutContainer, ad as parseColorValue, ae as parsePropertyValue, af as stylesToTailwind } from './utils-CpmjloNg.mjs';
+import { D as DragState, a as DropIndicator, S as SelectElementOptions, b as SelectElementsOptions, c as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, d as BorderPropertyKey, e as BorderProperties, F as FlexPropertyKey, f as SizingPropertyKey, g as SizingValue, h as SizingChangeOptions, i as ColorPropertyKey, j as ColorValue, T as TypographyPropertyKey, A as ActiveTool, k as Theme, l as BorderStyleControlPreference, m as DirectEditState, n as SessionEdit, o as SessionItem, p as CanvasElementKind, q as TypographyProperties, M as MeasurementLine, G as Guideline, r as Comment } from './utils-ovHeRo0g.mjs';
+export { s as BorderRadiusProperties, t as BorderStyle, u as ColorProperties, v as CommentReply, w as DomSourceLocation, x as DropTarget, E as ElementInfo, y as ElementLocator, z as FlexProperties, H as MeasurementState, R as ReactComponentFrame, I as SizingChangePhase, J as SizingMode, K as SizingProperties, L as SpacingProperties, U as UndoEditEntry, N as UndoEntry, O as UndoMoveEntry, P as UndoSelectionEntry, Q as buildCommentExport, V as buildSessionExport, W as calculateDropPosition, X as calculateElementMeasurements, Y as calculateGuidelineMeasurements, Z as calculateParentMeasurements, _ as colorToTailwind, $ as elementFromPointWithoutOverlays, a0 as findContainerAtPoint, a1 as findLayoutContainerAtPoint, a2 as formatPropertyValue, a3 as getComputedBorderStyles, a4 as getComputedBoxShadow, a5 as getComputedColorStyles, a6 as getComputedStyles, a7 as getDimensionDisplay, a8 as getElementInfo, a9 as getElementLocator, aa as getFlexDirection, ab as isFlexContainer, ac as isLayoutContainer, ad as parseColorValue, ae as parsePropertyValue, af as stylesToTailwind } from './utils-ovHeRo0g.mjs';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
@@ -44,6 +44,13 @@ interface UseMoveResult {
 }
 declare function useMove({ onMoveComplete }: UseMoveOptions): UseMoveResult;
 
+type SendFailure = {
+    reason: 'unreachable' | 'rejected';
+    failedEditElements: HTMLElement[];
+    failedCommentIds: string[];
+    at: number;
+};
+
 interface DirectEditActionsContextValue {
     selectElement: (element: HTMLElement, options?: SelectElementOptions) => void;
     selectElements: (elements: HTMLElement[], options?: SelectElementsOptions) => void;
@@ -81,6 +88,7 @@ interface DirectEditActionsContextValue {
     addCommentReply: (id: string, text: string) => void;
     deleteComment: (id: string) => void;
     exportComment: (id: string) => Promise<boolean>;
+    clearSendFailure: () => void;
     canSendEditToAgent: (snapshot?: {
         selectedElement: HTMLElement | null;
         elementInfo: DirectEditState['elementInfo'];
@@ -97,6 +105,8 @@ interface DirectEditActionsContextValue {
     removeSessionEdit: (element: HTMLElement) => void;
     startTextEditing: (element: HTMLElement) => void;
     commitTextEditing: () => void;
+    setCommentDraftText: (text: string) => void;
+    setCommentDraftBlockedHandler: (handler: (() => void) | null) => void;
     groupSelection: () => void;
     deleteSelection: () => void;
     insertElement: (kind: CanvasElementKind) => void;
@@ -107,6 +117,7 @@ interface DirectEditActionsContextValue {
 }
 interface DirectEditStateContextValue extends DirectEditState {
     agentAvailable: boolean;
+    lastSendFailure: SendFailure | null;
     sessionEditCount: number;
     multiSelectContextCount: number;
 }
@@ -189,6 +200,7 @@ interface DirectEditPanelInnerProps {
     onSendToAgent?: () => Promise<boolean>;
     canSendToAgent?: boolean;
     showSendButton?: boolean;
+    sendFailureReason?: 'unreachable' | 'rejected' | null;
     className?: string;
     style?: React.CSSProperties;
     panelRef?: React.RefObject<HTMLDivElement>;
@@ -198,7 +210,7 @@ interface DirectEditPanelInnerProps {
     onHeaderPointerUp?: (e: React.PointerEvent) => void;
     onHeaderPointerCancel?: (e: React.PointerEvent) => void;
 }
-declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, selectionColors, computedBoxShadow, borderStyleControlPreference, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onReplaceSelectionColor, onSelectSelectionColorTarget, onUpdateTypography, onReset, onExportEdits, onSendToAgent, canSendToAgent, showSendButton, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, onHeaderPointerCancel, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
+declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, selectionColors, computedBoxShadow, borderStyleControlPreference, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onReplaceSelectionColor, onSelectSelectionColorTarget, onUpdateTypography, onReset, onExportEdits, onSendToAgent, canSendToAgent, showSendButton, sendFailureReason, 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 {
@@ -217,6 +229,11 @@ interface DirectEditToolbarInnerProps {
     onExportAllEdits?: () => Promise<boolean>;
     onSendAllToAgents?: () => Promise<boolean>;
     agentAvailable?: boolean;
+    sendFailureReason?: 'unreachable' | 'rejected' | null;
+    sendFailure?: {
+        failedEditElements: HTMLElement[];
+        failedCommentIds: string[];
+    } | null;
     onClearSessionEdits?: () => void;
     onRemoveSessionEdit?: (element: HTMLElement) => void;
     onDeleteComment?: (id: string) => void;
@@ -227,8 +244,9 @@ interface DirectEditToolbarInnerProps {
     onSetCanvasZoom?: (zoom: number) => void;
     onZoomTo100?: () => void;
     onFitToViewport?: () => void;
+    onInsertElement?: (kind: CanvasElementKind) => void;
 }
-declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool: _activeTool, onSetActiveTool: _onSetActiveTool, theme, onSetTheme, sessionEditCount, multiSelectCount, multiSelectedElements, onGetSessionItems, onExportAllEdits, onSendAllToAgents, agentAvailable, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, canvasActive, canvasZoom, onToggleCanvas, onSetCanvasZoom, onZoomTo100, onFitToViewport, }: DirectEditToolbarInnerProps): react_jsx_runtime.JSX.Element;
+declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool: _activeTool, onSetActiveTool: _onSetActiveTool, theme, onSetTheme, sessionEditCount, multiSelectCount, multiSelectedElements, onGetSessionItems, onExportAllEdits, onSendAllToAgents, agentAvailable, sendFailureReason, sendFailure, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, canvasActive, canvasZoom, onToggleCanvas, onSetCanvasZoom, onZoomTo100, onFitToViewport, onInsertElement, }: 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 SelectElementOptions, b as SelectElementsOptions, c as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, d as BorderPropertyKey, e as BorderProperties, F as FlexPropertyKey, f as SizingPropertyKey, g as SizingValue, h as SizingChangeOptions, i as ColorPropertyKey, j as ColorValue, T as TypographyPropertyKey, A as ActiveTool, k as Theme, l as BorderStyleControlPreference, m as DirectEditState, n as SessionEdit, o as SessionItem, p as CanvasElementKind, q as TypographyProperties, M as MeasurementLine, G as Guideline, r as Comment } from './utils-CpmjloNg.js';
-export { s as BorderRadiusProperties, t as BorderStyle, u as ColorProperties, v as CommentReply, w as DomSourceLocation, x as DropTarget, E as ElementInfo, y as ElementLocator, z as FlexProperties, H as MeasurementState, R as ReactComponentFrame, I as SizingChangePhase, J as SizingMode, K as SizingProperties, L as SpacingProperties, U as UndoEditEntry, N as UndoEntry, O as UndoMoveEntry, P as UndoSelectionEntry, Q as buildCommentExport, V as buildSessionExport, W as calculateDropPosition, X as calculateElementMeasurements, Y as calculateGuidelineMeasurements, Z as calculateParentMeasurements, _ as colorToTailwind, $ as elementFromPointWithoutOverlays, a0 as findContainerAtPoint, a1 as findLayoutContainerAtPoint, a2 as formatPropertyValue, a3 as getComputedBorderStyles, a4 as getComputedBoxShadow, a5 as getComputedColorStyles, a6 as getComputedStyles, a7 as getDimensionDisplay, a8 as getElementInfo, a9 as getElementLocator, aa as getFlexDirection, ab as isFlexContainer, ac as isLayoutContainer, ad as parseColorValue, ae as parsePropertyValue, af as stylesToTailwind } from './utils-CpmjloNg.js';
+import { D as DragState, a as DropIndicator, S as SelectElementOptions, b as SelectElementsOptions, c as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, d as BorderPropertyKey, e as BorderProperties, F as FlexPropertyKey, f as SizingPropertyKey, g as SizingValue, h as SizingChangeOptions, i as ColorPropertyKey, j as ColorValue, T as TypographyPropertyKey, A as ActiveTool, k as Theme, l as BorderStyleControlPreference, m as DirectEditState, n as SessionEdit, o as SessionItem, p as CanvasElementKind, q as TypographyProperties, M as MeasurementLine, G as Guideline, r as Comment } from './utils-ovHeRo0g.js';
+export { s as BorderRadiusProperties, t as BorderStyle, u as ColorProperties, v as CommentReply, w as DomSourceLocation, x as DropTarget, E as ElementInfo, y as ElementLocator, z as FlexProperties, H as MeasurementState, R as ReactComponentFrame, I as SizingChangePhase, J as SizingMode, K as SizingProperties, L as SpacingProperties, U as UndoEditEntry, N as UndoEntry, O as UndoMoveEntry, P as UndoSelectionEntry, Q as buildCommentExport, V as buildSessionExport, W as calculateDropPosition, X as calculateElementMeasurements, Y as calculateGuidelineMeasurements, Z as calculateParentMeasurements, _ as colorToTailwind, $ as elementFromPointWithoutOverlays, a0 as findContainerAtPoint, a1 as findLayoutContainerAtPoint, a2 as formatPropertyValue, a3 as getComputedBorderStyles, a4 as getComputedBoxShadow, a5 as getComputedColorStyles, a6 as getComputedStyles, a7 as getDimensionDisplay, a8 as getElementInfo, a9 as getElementLocator, aa as getFlexDirection, ab as isFlexContainer, ac as isLayoutContainer, ad as parseColorValue, ae as parsePropertyValue, af as stylesToTailwind } from './utils-ovHeRo0g.js';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
@@ -44,6 +44,13 @@ interface UseMoveResult {
 }
 declare function useMove({ onMoveComplete }: UseMoveOptions): UseMoveResult;
 
+type SendFailure = {
+    reason: 'unreachable' | 'rejected';
+    failedEditElements: HTMLElement[];
+    failedCommentIds: string[];
+    at: number;
+};
+
 interface DirectEditActionsContextValue {
     selectElement: (element: HTMLElement, options?: SelectElementOptions) => void;
     selectElements: (elements: HTMLElement[], options?: SelectElementsOptions) => void;
@@ -81,6 +88,7 @@ interface DirectEditActionsContextValue {
     addCommentReply: (id: string, text: string) => void;
     deleteComment: (id: string) => void;
     exportComment: (id: string) => Promise<boolean>;
+    clearSendFailure: () => void;
     canSendEditToAgent: (snapshot?: {
         selectedElement: HTMLElement | null;
         elementInfo: DirectEditState['elementInfo'];
@@ -97,6 +105,8 @@ interface DirectEditActionsContextValue {
     removeSessionEdit: (element: HTMLElement) => void;
     startTextEditing: (element: HTMLElement) => void;
     commitTextEditing: () => void;
+    setCommentDraftText: (text: string) => void;
+    setCommentDraftBlockedHandler: (handler: (() => void) | null) => void;
     groupSelection: () => void;
     deleteSelection: () => void;
     insertElement: (kind: CanvasElementKind) => void;
@@ -107,6 +117,7 @@ interface DirectEditActionsContextValue {
 }
 interface DirectEditStateContextValue extends DirectEditState {
     agentAvailable: boolean;
+    lastSendFailure: SendFailure | null;
     sessionEditCount: number;
     multiSelectContextCount: number;
 }
@@ -189,6 +200,7 @@ interface DirectEditPanelInnerProps {
     onSendToAgent?: () => Promise<boolean>;
     canSendToAgent?: boolean;
     showSendButton?: boolean;
+    sendFailureReason?: 'unreachable' | 'rejected' | null;
     className?: string;
     style?: React.CSSProperties;
     panelRef?: React.RefObject<HTMLDivElement>;
@@ -198,7 +210,7 @@ interface DirectEditPanelInnerProps {
     onHeaderPointerUp?: (e: React.PointerEvent) => void;
     onHeaderPointerCancel?: (e: React.PointerEvent) => void;
 }
-declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, selectionColors, computedBoxShadow, borderStyleControlPreference, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onReplaceSelectionColor, onSelectSelectionColorTarget, onUpdateTypography, onReset, onExportEdits, onSendToAgent, canSendToAgent, showSendButton, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, onHeaderPointerCancel, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
+declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, selectionColors, computedBoxShadow, borderStyleControlPreference, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onReplaceSelectionColor, onSelectSelectionColorTarget, onUpdateTypography, onReset, onExportEdits, onSendToAgent, canSendToAgent, showSendButton, sendFailureReason, 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 {
@@ -217,6 +229,11 @@ interface DirectEditToolbarInnerProps {
     onExportAllEdits?: () => Promise<boolean>;
     onSendAllToAgents?: () => Promise<boolean>;
     agentAvailable?: boolean;
+    sendFailureReason?: 'unreachable' | 'rejected' | null;
+    sendFailure?: {
+        failedEditElements: HTMLElement[];
+        failedCommentIds: string[];
+    } | null;
     onClearSessionEdits?: () => void;
     onRemoveSessionEdit?: (element: HTMLElement) => void;
     onDeleteComment?: (id: string) => void;
@@ -227,8 +244,9 @@ interface DirectEditToolbarInnerProps {
     onSetCanvasZoom?: (zoom: number) => void;
     onZoomTo100?: () => void;
     onFitToViewport?: () => void;
+    onInsertElement?: (kind: CanvasElementKind) => void;
 }
-declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool: _activeTool, onSetActiveTool: _onSetActiveTool, theme, onSetTheme, sessionEditCount, multiSelectCount, multiSelectedElements, onGetSessionItems, onExportAllEdits, onSendAllToAgents, agentAvailable, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, canvasActive, canvasZoom, onToggleCanvas, onSetCanvasZoom, onZoomTo100, onFitToViewport, }: DirectEditToolbarInnerProps): react_jsx_runtime.JSX.Element;
+declare function DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool: _activeTool, onSetActiveTool: _onSetActiveTool, theme, onSetTheme, sessionEditCount, multiSelectCount, multiSelectedElements, onGetSessionItems, onExportAllEdits, onSendAllToAgents, agentAvailable, sendFailureReason, sendFailure, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, canvasActive, canvasZoom, onToggleCanvas, onSetCanvasZoom, onZoomTo100, onFitToViewport, onInsertElement, }: DirectEditToolbarInnerProps): react_jsx_runtime.JSX.Element;
 declare function DirectEditToolbar(): react_jsx_runtime.JSX.Element | null;
 
 interface UseMeasurementResult {