made-refine 0.2.1-beta.2 → 0.2.3

package/README.md

@@ -55,4 +55,4 @@ Your app keeps running normally. The editor floats on top and never touches your
 
 ## License
 
-[FSL-1.1-MIT](./LICENSE)
+[FSL-1.1-MIT](./LICENSE.md)

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 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';
+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-C7RBdUAE.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-C7RBdUAE.mjs';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
@@ -78,6 +78,10 @@ interface DirectEditActionsContextValue {
     removeSessionEdit: (element: HTMLElement) => void;
     startTextEditing: (element: HTMLElement) => void;
     commitTextEditing: () => void;
+    toggleCanvas: () => void;
+    setCanvasZoom: (zoom: number) => void;
+    fitCanvasToViewport: () => void;
+    zoomCanvasTo100: () => void;
 }
 interface DirectEditStateContextValue extends DirectEditState {
     sessionEditCount: number;
@@ -186,8 +190,14 @@ interface DirectEditToolbarInnerProps {
     onRemoveSessionEdit?: (element: HTMLElement) => void;
     onDeleteComment?: (id: string) => void;
     className?: string;
+    canvasActive?: boolean;
+    canvasZoom?: number;
+    onToggleCanvas?: () => void;
+    onSetCanvasZoom?: (zoom: number) => void;
+    onZoomTo100?: () => void;
+    onFitToViewport?: () => void;
 }
-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 DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool, onSetActiveTool, theme, onSetTheme, sessionEditCount, onGetSessionItems, onExportAllEdits, onSendAllToAgents, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, canvasActive, canvasZoom, onToggleCanvas, onSetCanvasZoom, onZoomTo100, onFitToViewport, }: DirectEditToolbarInnerProps): react_jsx_runtime.JSX.Element;
 declare function DirectEditToolbar(): react_jsx_runtime.JSX.Element | null;
 
 interface UseMeasurementResult {
@@ -221,12 +231,13 @@ interface SelectionOverlayProps {
     };
     onMoveStart: (e: React.PointerEvent, targetElement?: HTMLElement, options?: MoveStartOptions) => void;
     showMoveHandle?: boolean;
+    activeTool?: ActiveTool;
     isTextEditing?: boolean;
     onDoubleClick?: (clientX: number, clientY: number) => void;
     onHoverElement?: (element: HTMLElement | null) => void;
     onClickThrough?: (clientX: number, clientY: number) => void;
 }
-declare function SelectionOverlay({ selectedElement, draggedElement, isDragging, ghostPosition, onMoveStart, showMoveHandle, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
+declare function SelectionOverlay({ selectedElement, draggedElement, isDragging, ghostPosition, onMoveStart, showMoveHandle, activeTool, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
 
 interface MoveOverlayProps {
     dropIndicator: DropIndicator | null;
@@ -244,6 +255,7 @@ interface UseGuidelinesResult {
     activeGuideline: Guideline | null;
     dragPosition: number | null;
     isCreating: boolean;
+    isSnapped: boolean;
     scrollOffset: {
         x: number;
         y: number;
@@ -254,7 +266,12 @@ interface UseGuidelinesResult {
     clearAll: () => void;
 }
 declare function getStoredGuidelines(): Guideline[];
-declare function useGuidelines(enabled: boolean, hostElement?: HTMLElement | null): UseGuidelinesResult;
+declare function useGuidelines(enabled: boolean, hostElement?: HTMLElement | null, canvas?: {
+    active: boolean;
+    zoom: number;
+    panX: number;
+    panY: number;
+} | null): UseGuidelinesResult;
 
 interface CommentOverlayProps {
     comments: Comment[];
@@ -269,8 +286,9 @@ interface CommentOverlayProps {
         commentId: string;
         nonce: number;
     } | null;
+    draftRef?: React.MutableRefObject<string>;
 }
-declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete, onExport, onSendToAgent, attentionRequest, }: CommentOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete, onExport, onSendToAgent, attentionRequest, draftRef, }: CommentOverlayProps): react_jsx_runtime.JSX.Element | null;
 
 declare function formatColorValue(color: ColorValue): string;
 

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 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';
+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-C7RBdUAE.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-C7RBdUAE.js';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
@@ -78,6 +78,10 @@ interface DirectEditActionsContextValue {
     removeSessionEdit: (element: HTMLElement) => void;
     startTextEditing: (element: HTMLElement) => void;
     commitTextEditing: () => void;
+    toggleCanvas: () => void;
+    setCanvasZoom: (zoom: number) => void;
+    fitCanvasToViewport: () => void;
+    zoomCanvasTo100: () => void;
 }
 interface DirectEditStateContextValue extends DirectEditState {
     sessionEditCount: number;
@@ -186,8 +190,14 @@ interface DirectEditToolbarInnerProps {
     onRemoveSessionEdit?: (element: HTMLElement) => void;
     onDeleteComment?: (id: string) => void;
     className?: string;
+    canvasActive?: boolean;
+    canvasZoom?: number;
+    onToggleCanvas?: () => void;
+    onSetCanvasZoom?: (zoom: number) => void;
+    onZoomTo100?: () => void;
+    onFitToViewport?: () => void;
 }
-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 DirectEditToolbarInner({ editModeActive, onToggleEditMode, rulersVisible, onToggleRulers, activeTool, onSetActiveTool, theme, onSetTheme, sessionEditCount, onGetSessionItems, onExportAllEdits, onSendAllToAgents, onClearSessionEdits, onRemoveSessionEdit, onDeleteComment, className, canvasActive, canvasZoom, onToggleCanvas, onSetCanvasZoom, onZoomTo100, onFitToViewport, }: DirectEditToolbarInnerProps): react_jsx_runtime.JSX.Element;
 declare function DirectEditToolbar(): react_jsx_runtime.JSX.Element | null;
 
 interface UseMeasurementResult {
@@ -221,12 +231,13 @@ interface SelectionOverlayProps {
     };
     onMoveStart: (e: React.PointerEvent, targetElement?: HTMLElement, options?: MoveStartOptions) => void;
     showMoveHandle?: boolean;
+    activeTool?: ActiveTool;
     isTextEditing?: boolean;
     onDoubleClick?: (clientX: number, clientY: number) => void;
     onHoverElement?: (element: HTMLElement | null) => void;
     onClickThrough?: (clientX: number, clientY: number) => void;
 }
-declare function SelectionOverlay({ selectedElement, draggedElement, isDragging, ghostPosition, onMoveStart, showMoveHandle, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
+declare function SelectionOverlay({ selectedElement, draggedElement, isDragging, ghostPosition, onMoveStart, showMoveHandle, activeTool, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
 
 interface MoveOverlayProps {
     dropIndicator: DropIndicator | null;
@@ -244,6 +255,7 @@ interface UseGuidelinesResult {
     activeGuideline: Guideline | null;
     dragPosition: number | null;
     isCreating: boolean;
+    isSnapped: boolean;
     scrollOffset: {
         x: number;
         y: number;
@@ -254,7 +266,12 @@ interface UseGuidelinesResult {
     clearAll: () => void;
 }
 declare function getStoredGuidelines(): Guideline[];
-declare function useGuidelines(enabled: boolean, hostElement?: HTMLElement | null): UseGuidelinesResult;
+declare function useGuidelines(enabled: boolean, hostElement?: HTMLElement | null, canvas?: {
+    active: boolean;
+    zoom: number;
+    panX: number;
+    panY: number;
+} | null): UseGuidelinesResult;
 
 interface CommentOverlayProps {
     comments: Comment[];
@@ -269,8 +286,9 @@ interface CommentOverlayProps {
         commentId: string;
         nonce: number;
     } | null;
+    draftRef?: React.MutableRefObject<string>;
 }
-declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete, onExport, onSendToAgent, attentionRequest, }: CommentOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete, onExport, onSendToAgent, attentionRequest, draftRef, }: CommentOverlayProps): react_jsx_runtime.JSX.Element | null;
 
 declare function formatColorValue(color: ColorValue): string;