made-refine 0.2.6 → 0.2.8

package/dist/cli.cjs

@@ -8337,7 +8337,13 @@ function getInstallCommand(pm) {
 function detectFramework(cwd) {
   const pkgPath = import_path2.default.join(cwd, "package.json");
   if (!import_fs2.default.existsSync(pkgPath)) return null;
-  const pkg = JSON.parse(import_fs2.default.readFileSync(pkgPath, "utf-8"));
+  let pkg;
+  try {
+    pkg = JSON.parse(import_fs2.default.readFileSync(pkgPath, "utf-8"));
+  } catch (err) {
+    console.error(import_picocolors.default.red(`Failed to parse package.json: ${err instanceof Error ? err.message : err}`));
+    return null;
+  }
   const deps = { ...pkg.dependencies, ...pkg.devDependencies };
   if (deps["@tanstack/start"] || deps["@tanstack/react-start"]) return "tanstack";
   if (deps["next"]) return "next";
@@ -8793,7 +8799,7 @@ async function init() {
     }
     framework = selected;
   }
-  await installPackage(cwd);
+  installPackage(cwd);
   switch (framework) {
     case "next":
       await setupNextJs(cwd);
@@ -8808,6 +8814,14 @@ async function init() {
   console.log(import_picocolors.default.bold(import_picocolors.default.green("\n\u2713 Setup complete!")));
   console.log(import_picocolors.default.dim("  Start your dev server and press Cmd+. (Ctrl+.) to toggle the editor.\n"));
 }
-program.name("made-refine").description("Visual CSS editor for React").version("0.1.0");
+function getPackageVersion() {
+  try {
+    const pkgJson = JSON.parse(import_fs2.default.readFileSync(import_path2.default.join(__dirname, "..", "package.json"), "utf-8"));
+    return pkgJson.version ?? "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
+program.name("made-refine").description("Visual CSS editor for React").version(getPackageVersion());
 program.command("init").description("Set up made-refine in your project").action(init);
 program.parse();

package/dist/index.d.mts

@@ -1,16 +1,28 @@
 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-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';
+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 SizingChangeOptions, g as ColorPropertyKey, h as ColorValue, T as TypographyPropertyKey, A as ActiveTool, i as Theme, j as BorderStyleControlPreference, k as DirectEditState, l as SessionEdit, m as SessionItem, n as TypographyProperties, M as MeasurementLine, G as Guideline, o as Comment } from './utils-BGCQaaSf.mjs';
+export { p as BorderRadiusProperties, q as BorderStyle, r as ColorProperties, s as CommentReply, t as DomSourceLocation, u as DropTarget, E as ElementInfo, v as ElementLocator, w as FlexProperties, x as MeasurementState, R as ReactComponentFrame, y as SizingChangePhase, z as SizingMode, H as SizingProperties, I as SpacingProperties, U as UndoEditEntry, J as UndoEntry, K as UndoMoveEntry, L as UndoSelectionEntry, N as buildCommentExport, O as buildSessionExport, P as calculateDropPosition, Q as calculateElementMeasurements, V as calculateGuidelineMeasurements, W as calculateParentMeasurements, X as colorToTailwind, Y as elementFromPointWithoutOverlays, Z as findContainerAtPoint, _ as findLayoutContainerAtPoint, $ as formatPropertyValue, a0 as getComputedBorderStyles, a1 as getComputedBoxShadow, a2 as getComputedColorStyles, a3 as getComputedStyles, a4 as getDimensionDisplay, a5 as getElementInfo, a6 as getElementLocator, a7 as getFlexDirection, a8 as isFlexContainer, a9 as isLayoutContainer, aa as parseColorValue, ab as parsePropertyValue, ac as stylesToTailwind } from './utils-BGCQaaSf.mjs';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
 declare function DirectEditDemo(): react_jsx_runtime.JSX.Element;
 
+type MoveMode = 'free' | 'reorder' | 'position';
 interface MoveInfo {
     originalParent: HTMLElement;
     originalPreviousSibling: HTMLElement | null;
     originalNextSibling: HTMLElement | null;
+    mode?: MoveMode;
+    positionDelta?: {
+        x: number;
+        y: number;
+    };
+    visualDelta?: {
+        x: number;
+        y: number;
+    };
+    /** When true, the element was reparented — clear any position/left/top inline styles from prior position-mode moves. */
+    resetPositionOffsets?: boolean;
 }
 interface UseMoveOptions {
     onMoveComplete?: (element: HTMLElement, moveInfo: MoveInfo | null) => void;
@@ -22,6 +34,7 @@ interface UseMoveDropTarget {
 }
 interface StartDragOptions {
     constrainToOriginalParent?: boolean;
+    mode?: MoveMode;
 }
 interface UseMoveResult {
     dragState: DragState;
@@ -43,8 +56,10 @@ interface DirectEditActionsContextValue {
     updateRawCSS: (properties: Record<string, string>) => void;
     updateFlexProperty: (key: FlexPropertyKey, value: string) => void;
     toggleFlexLayout: () => void;
+    updateSizingProperties: (changes: Partial<Record<SizingPropertyKey, SizingValue>>, options?: SizingChangeOptions) => void;
     updateSizingProperty: (key: SizingPropertyKey, value: SizingValue) => void;
     updateColorProperty: (key: ColorPropertyKey, value: ColorValue) => void;
+    replaceSelectionColor: (from: ColorValue, to: ColorValue) => void;
     updateTypographyProperty: (key: TypographyPropertyKey, value: CSSPropertyValue | string) => void;
     resetToOriginal: () => void;
     exportEdits: () => Promise<boolean>;
@@ -140,6 +155,7 @@ interface DirectEditPanelInnerProps {
         borderColor: ColorValue;
         outlineColor: ColorValue;
     } | null;
+    selectionColors?: ColorValue[];
     computedBoxShadow?: string;
     borderStyleControlPreference?: BorderStyleControlPreference;
     computedTypography: TypographyProperties | null;
@@ -156,6 +172,8 @@ interface DirectEditPanelInnerProps {
     onToggleFlex: () => void;
     onUpdateSizing: (key: SizingPropertyKey, value: SizingValue) => void;
     onUpdateColor: (key: ColorPropertyKey, value: ColorValue) => void;
+    onReplaceSelectionColor: (from: ColorValue, to: ColorValue) => void;
+    onSelectSelectionColorTarget?: (color: ColorValue) => void;
     onUpdateTypography: (key: TypographyPropertyKey, value: CSSPropertyValue | string) => void;
     onReset: () => void;
     onExportEdits: () => Promise<boolean>;
@@ -170,7 +188,7 @@ interface DirectEditPanelInnerProps {
     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, 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, 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 {
@@ -218,9 +236,6 @@ interface MeasurementOverlayProps {
 }
 declare function MeasurementOverlay({ selectedElement, hoveredElement, measurements, }: MeasurementOverlayProps): react_jsx_runtime.JSX.Element;
 
-interface MoveStartOptions {
-    constrainToOriginalParent?: boolean;
-}
 interface SelectionOverlayProps {
     selectedElement: HTMLElement;
     draggedElement?: HTMLElement | null;
@@ -229,15 +244,17 @@ interface SelectionOverlayProps {
         x: number;
         y: number;
     };
-    onMoveStart: (e: React.PointerEvent, targetElement?: HTMLElement, options?: MoveStartOptions) => void;
+    onMoveStart: (e: React.PointerEvent, targetElement?: HTMLElement, options?: StartDragOptions) => void;
     showMoveHandle?: boolean;
     activeTool?: ActiveTool;
     isTextEditing?: boolean;
     onDoubleClick?: (clientX: number, clientY: number) => void;
     onHoverElement?: (element: HTMLElement | null) => void;
     onClickThrough?: (clientX: number, clientY: number) => void;
+    enableResizeHandles?: boolean;
+    onResizeSizingChange?: (changes: Partial<Record<SizingPropertyKey, SizingValue>>, options?: SizingChangeOptions) => void;
 }
-declare function SelectionOverlay({ selectedElement, draggedElement, isDragging, ghostPosition, onMoveStart, showMoveHandle, activeTool, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
+declare function SelectionOverlay({ selectedElement, draggedElement, isDragging, ghostPosition, onMoveStart, showMoveHandle, activeTool, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, enableResizeHandles, onResizeSizingChange, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
 
 interface MoveOverlayProps {
     dropIndicator: DropIndicator | null;
@@ -292,4 +309,4 @@ declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment,
 
 declare function formatColorValue(color: ColorValue): string;
 
-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 };
+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, type MoveMode, MoveOverlay, type MoveOverlayProps, Rulers, RulersOverlay, SelectionOverlay, type SelectionOverlayProps, SessionEdit, SizingChangeOptions, SizingPropertyKey, SizingValue, SpacingPropertyKey, type StartDragOptions, 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

@@ -1,16 +1,28 @@
 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-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';
+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 SizingChangeOptions, g as ColorPropertyKey, h as ColorValue, T as TypographyPropertyKey, A as ActiveTool, i as Theme, j as BorderStyleControlPreference, k as DirectEditState, l as SessionEdit, m as SessionItem, n as TypographyProperties, M as MeasurementLine, G as Guideline, o as Comment } from './utils-BGCQaaSf.js';
+export { p as BorderRadiusProperties, q as BorderStyle, r as ColorProperties, s as CommentReply, t as DomSourceLocation, u as DropTarget, E as ElementInfo, v as ElementLocator, w as FlexProperties, x as MeasurementState, R as ReactComponentFrame, y as SizingChangePhase, z as SizingMode, H as SizingProperties, I as SpacingProperties, U as UndoEditEntry, J as UndoEntry, K as UndoMoveEntry, L as UndoSelectionEntry, N as buildCommentExport, O as buildSessionExport, P as calculateDropPosition, Q as calculateElementMeasurements, V as calculateGuidelineMeasurements, W as calculateParentMeasurements, X as colorToTailwind, Y as elementFromPointWithoutOverlays, Z as findContainerAtPoint, _ as findLayoutContainerAtPoint, $ as formatPropertyValue, a0 as getComputedBorderStyles, a1 as getComputedBoxShadow, a2 as getComputedColorStyles, a3 as getComputedStyles, a4 as getDimensionDisplay, a5 as getElementInfo, a6 as getElementLocator, a7 as getFlexDirection, a8 as isFlexContainer, a9 as isLayoutContainer, aa as parseColorValue, ab as parsePropertyValue, ac as stylesToTailwind } from './utils-BGCQaaSf.js';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
 declare function DirectEditDemo(): react_jsx_runtime.JSX.Element;
 
+type MoveMode = 'free' | 'reorder' | 'position';
 interface MoveInfo {
     originalParent: HTMLElement;
     originalPreviousSibling: HTMLElement | null;
     originalNextSibling: HTMLElement | null;
+    mode?: MoveMode;
+    positionDelta?: {
+        x: number;
+        y: number;
+    };
+    visualDelta?: {
+        x: number;
+        y: number;
+    };
+    /** When true, the element was reparented — clear any position/left/top inline styles from prior position-mode moves. */
+    resetPositionOffsets?: boolean;
 }
 interface UseMoveOptions {
     onMoveComplete?: (element: HTMLElement, moveInfo: MoveInfo | null) => void;
@@ -22,6 +34,7 @@ interface UseMoveDropTarget {
 }
 interface StartDragOptions {
     constrainToOriginalParent?: boolean;
+    mode?: MoveMode;
 }
 interface UseMoveResult {
     dragState: DragState;
@@ -43,8 +56,10 @@ interface DirectEditActionsContextValue {
     updateRawCSS: (properties: Record<string, string>) => void;
     updateFlexProperty: (key: FlexPropertyKey, value: string) => void;
     toggleFlexLayout: () => void;
+    updateSizingProperties: (changes: Partial<Record<SizingPropertyKey, SizingValue>>, options?: SizingChangeOptions) => void;
     updateSizingProperty: (key: SizingPropertyKey, value: SizingValue) => void;
     updateColorProperty: (key: ColorPropertyKey, value: ColorValue) => void;
+    replaceSelectionColor: (from: ColorValue, to: ColorValue) => void;
     updateTypographyProperty: (key: TypographyPropertyKey, value: CSSPropertyValue | string) => void;
     resetToOriginal: () => void;
     exportEdits: () => Promise<boolean>;
@@ -140,6 +155,7 @@ interface DirectEditPanelInnerProps {
         borderColor: ColorValue;
         outlineColor: ColorValue;
     } | null;
+    selectionColors?: ColorValue[];
     computedBoxShadow?: string;
     borderStyleControlPreference?: BorderStyleControlPreference;
     computedTypography: TypographyProperties | null;
@@ -156,6 +172,8 @@ interface DirectEditPanelInnerProps {
     onToggleFlex: () => void;
     onUpdateSizing: (key: SizingPropertyKey, value: SizingValue) => void;
     onUpdateColor: (key: ColorPropertyKey, value: ColorValue) => void;
+    onReplaceSelectionColor: (from: ColorValue, to: ColorValue) => void;
+    onSelectSelectionColorTarget?: (color: ColorValue) => void;
     onUpdateTypography: (key: TypographyPropertyKey, value: CSSPropertyValue | string) => void;
     onReset: () => void;
     onExportEdits: () => Promise<boolean>;
@@ -170,7 +188,7 @@ interface DirectEditPanelInnerProps {
     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, 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, 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 {
@@ -218,9 +236,6 @@ interface MeasurementOverlayProps {
 }
 declare function MeasurementOverlay({ selectedElement, hoveredElement, measurements, }: MeasurementOverlayProps): react_jsx_runtime.JSX.Element;
 
-interface MoveStartOptions {
-    constrainToOriginalParent?: boolean;
-}
 interface SelectionOverlayProps {
     selectedElement: HTMLElement;
     draggedElement?: HTMLElement | null;
@@ -229,15 +244,17 @@ interface SelectionOverlayProps {
         x: number;
         y: number;
     };
-    onMoveStart: (e: React.PointerEvent, targetElement?: HTMLElement, options?: MoveStartOptions) => void;
+    onMoveStart: (e: React.PointerEvent, targetElement?: HTMLElement, options?: StartDragOptions) => void;
     showMoveHandle?: boolean;
     activeTool?: ActiveTool;
     isTextEditing?: boolean;
     onDoubleClick?: (clientX: number, clientY: number) => void;
     onHoverElement?: (element: HTMLElement | null) => void;
     onClickThrough?: (clientX: number, clientY: number) => void;
+    enableResizeHandles?: boolean;
+    onResizeSizingChange?: (changes: Partial<Record<SizingPropertyKey, SizingValue>>, options?: SizingChangeOptions) => void;
 }
-declare function SelectionOverlay({ selectedElement, draggedElement, isDragging, ghostPosition, onMoveStart, showMoveHandle, activeTool, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
+declare function SelectionOverlay({ selectedElement, draggedElement, isDragging, ghostPosition, onMoveStart, showMoveHandle, activeTool, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, enableResizeHandles, onResizeSizingChange, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
 
 interface MoveOverlayProps {
     dropIndicator: DropIndicator | null;
@@ -292,4 +309,4 @@ declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment,
 
 declare function formatColorValue(color: ColorValue): string;
 
-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 };
+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, type MoveMode, MoveOverlay, type MoveOverlayProps, Rulers, RulersOverlay, SelectionOverlay, type SelectionOverlayProps, SessionEdit, SizingChangeOptions, SizingPropertyKey, SizingValue, SpacingPropertyKey, type StartDragOptions, Theme, TypographyProperties, TypographyPropertyKey, type UseGuidelinesResult, type UseMeasurementResult, type UseMoveDropTarget, type UseMoveOptions, type UseMoveResult, formatColorValue, getStoredGuidelines, useDirectEdit, useDirectEditActions, useDirectEditState, useGuidelines, useMeasurement, useMove, useRulersVisible };