@witchcraft/layout 0.4.2 → 0.4.4

package/dist/runtime/layout/index.js

@@ -12,13 +12,16 @@ export { getFillEmptySpaceInfo } from "./getFillEmptySpaceInfo.js";
 export { getFrameCollapseInfo } from "./getFrameCollapseInfo.js";
 export { getFrameDockInfo } from "./getFrameDockInfo.js";
 export { getFrameDragZones } from "./getFrameDragZones.js";
+export { getFrameExpandInfo } from "./getFrameExpandInfo.js";
 export { getFrameRearrangeInfo } from "./getFrameRearrangeInfo.js";
+export { getFrameShrinkInfo } from "./getFrameShrinkInfo.js";
 export { getFrameSplitInfo } from "./getFrameSplitInfo.js";
 export { getFramesRedistributeInfo } from "./getFramesRedistributeInfo.js";
 export { getFrameSwapInfo } from "./getFrameSwapInfo.js";
 export { getFrameTo } from "./getFrameTo.js";
 export { getFrameUncollapseInfo } from "./getFrameUncollapseInfo.js";
 export { getFrameUndockInfo } from "./getFrameUndockInfo.js";
+export { getRelaxFramesInfo } from "./getRelaxFramesInfo.js";
 export { getUpdateWindowSizeInfo } from "./getUpdateWindowSizeInfo.js";
 export { getWindowDragZones } from "./getWindowDragZones.js";
 export { isPointInRect } from "./isPointInRect.js";

package/dist/runtime/settings.js

@@ -8,7 +8,7 @@ export class Settings {
   resetToDefaults() {
     this.scale = 3;
     this.snapPoint = 0.5;
-    this.minSize = 5;
+    this.minSize = 3;
     this.collapseSizePx = 15;
     this.maxPerpendicularLength = 20;
     this.zoneSizes = { frameEdgePx: 40, windowEdgePx: 20 };

package/dist/runtime/types/index.d.ts

@@ -105,6 +105,8 @@ export declare const zEdge: z.ZodObject<{
         frame: LayoutFrame;
     } | {
         frame: LayoutFrame;
+    } | {
+        frame: LayoutFrame;
     }>, KnownError<LayoutError, {} | {
         id: string | undefined;
     } | {
@@ -162,6 +164,8 @@ export declare const zEdge: z.ZodObject<{
         frame: LayoutFrame;
     } | {
         frame: LayoutFrame;
+    } | {
+        frame: LayoutFrame;
     }>>, z.ZodObject<{
         code: z.ZodString;
         message: z.ZodString;
@@ -504,6 +508,8 @@ declare const zLayoutShape: z.ZodDiscriminatedUnion<[z.ZodObject<{
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }>, KnownError<LayoutError, {} | {
             id: string | undefined;
         } | {
@@ -561,6 +567,8 @@ declare const zLayoutShape: z.ZodDiscriminatedUnion<[z.ZodObject<{
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }>>, z.ZodObject<{
             code: z.ZodString;
             message: z.ZodString;
@@ -643,6 +651,8 @@ declare const zBaseDeco: z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>, KnownError<LayoutError, {} | {
                 id: string | undefined;
             } | {
@@ -700,6 +710,8 @@ declare const zBaseDeco: z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>>, z.ZodObject<{
                 code: z.ZodString;
                 message: z.ZodString;
@@ -783,6 +795,8 @@ export declare const zSplitDeco: z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>, KnownError<LayoutError, {} | {
                 id: string | undefined;
             } | {
@@ -840,6 +854,8 @@ export declare const zSplitDeco: z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>>, z.ZodObject<{
                 code: z.ZodString;
                 message: z.ZodString;
@@ -944,6 +960,8 @@ declare const zCloseDeco: z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>, KnownError<LayoutError, {} | {
                 id: string | undefined;
             } | {
@@ -1001,6 +1019,8 @@ declare const zCloseDeco: z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>>, z.ZodObject<{
                 code: z.ZodString;
                 message: z.ZodString;
@@ -1087,6 +1107,8 @@ declare const zFrameDragDeco: z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>, KnownError<LayoutError, {} | {
                 id: string | undefined;
             } | {
@@ -1144,6 +1166,8 @@ declare const zFrameDragDeco: z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>>, z.ZodObject<{
                 code: z.ZodString;
                 message: z.ZodString;
@@ -1237,6 +1261,8 @@ export declare const zDeco: z.ZodUnion<readonly [z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>, KnownError<LayoutError, {} | {
                 id: string | undefined;
             } | {
@@ -1294,6 +1320,8 @@ export declare const zDeco: z.ZodUnion<readonly [z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>>, z.ZodObject<{
                 code: z.ZodString;
                 message: z.ZodString;
@@ -1384,6 +1412,8 @@ export declare const zDeco: z.ZodUnion<readonly [z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>, KnownError<LayoutError, {} | {
                 id: string | undefined;
             } | {
@@ -1441,6 +1471,8 @@ export declare const zDeco: z.ZodUnion<readonly [z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>>, z.ZodObject<{
                 code: z.ZodString;
                 message: z.ZodString;
@@ -1525,6 +1557,8 @@ export declare const zDeco: z.ZodUnion<readonly [z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>, KnownError<LayoutError, {} | {
                 id: string | undefined;
             } | {
@@ -1582,6 +1616,8 @@ export declare const zDeco: z.ZodUnion<readonly [z.ZodObject<{
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }>>, z.ZodObject<{
                 code: z.ZodString;
                 message: z.ZodString;
@@ -1627,6 +1663,7 @@ export declare const LAYOUT_ERROR: {
     CANT_UNCOLLAPSE_NOT_COLLAPSED: "CANT_UNCOLLAPSE_NOT_COLLAPSED";
     NO_FILL_CANDIDATES: "NO_FILL_CANDIDATES";
     CANT_RESIZE_COLLAPSED_FRAME: "CANT_RESIZE_COLLAPSED_FRAME";
+    CANT_RESIZE_SINGLE_FRAME: "CANT_RESIZE_SINGLE_FRAME";
 };
 export type LayoutError = EnumLike<typeof LAYOUT_ERROR>;
 export type LayoutErrorInfo<T extends LayoutError> = LayoutErrorsInfo[T] extends undefined ? never : LayoutErrorsInfo[T];
@@ -1710,6 +1747,9 @@ export type LayoutErrorsInfo = {
     [LAYOUT_ERROR.CANT_RESIZE_COLLAPSED_FRAME]: {
         frame: LayoutFrame;
     };
+    [LAYOUT_ERROR.CANT_RESIZE_SINGLE_FRAME]: {
+        frame: LayoutFrame;
+    };
     [LAYOUT_ERROR.REDISTRIBUTE_WOULD_RESULT_IN_INVALID_FRAMES]: {
         problemEdgeCoordinates: number[];
     };
@@ -1808,6 +1848,8 @@ export type DragState = {
     dragDirections: Record<Orientation, Direction | undefined>;
     /** The curren point (in scaled window coordinates) the user is dragging at. */
     dragPoint?: Point;
+    /** Cumulative pixel distance the user has dragged from the initial click point. 0 on start, increases on each move. */
+    dragDistance: number;
     /** Whether the user is currently dragging and what type of drag. Is truthy string during all drag events. */
     isDragging: boolean | "frame" | "edge";
     /** Whether to show the moved frames while dragging. */
@@ -1850,6 +1892,8 @@ export type DragState = {
      * Whether the drag was initiated from a point along the window edge.
      */
     isDraggingFromWindowEdge: boolean;
+    /** Custom context passed to dragStart, available to action handlers via state.eventContext. */
+    eventContext?: Record<string, unknown>;
     win: LayoutWindow;
 };
 export interface ActionDragChangeResult {
@@ -1954,6 +1998,34 @@ export type EdgeDragStartData = {
 export type FrameDragStartData = {
     frameId: FrameId;
 };
+/**
+ * Handler interface for drag actions.
+ */
+export interface ActionHandler {
+    eventHandler: (e: KeyboardEvent, state: DragState, forceRecalculateEdges: () => void) => void;
+    /**
+     * Called when the drag coordinates change (during any event). Should return true to allow the edges to be updated/moved, or false to prevent it.
+     *
+     * Can return anything for the end event as it's ignored.
+     *
+     * Can be used to save some context/info to later apply safely during onDragApply.
+     */
+    onDragChange: (...args: Parameters<DragChangeHandler>) => DragChangeResult;
+    /**
+     * Called when drag will be applied. If dragEnd was called with apply false, it will not be called.
+     * Return false to not apply the regular drag end changes (i.e. return false to reset to the position before dragging).
+     */
+    onDragApply: (state: DragState, forceRecalculateEdges: () => void) => {
+        /** Whether to apply the regular drag end changes. Return false to reset to the position before dragging. */
+        apply: boolean;
+        /** Value to resolve the drag promise with. Ignored if `apply` is false. */
+        result: any;
+    };
+    /**
+     * Called after visual edges are recalculated. Action handlers can annotate edges with error info.
+     */
+    annotateEdges?: (edges: Edge[], frames: LayoutFrame[]) => void;
+}
 export type DragStartFn = {
     (e: PointerEvent, type: "edge", data: EdgeDragStartData): void;
     (e: PointerEvent, type: "frame", data: FrameDragStartData): void;

package/dist/runtime/types/index.js

@@ -153,7 +153,8 @@ export const LAYOUT_ERROR = enumFromArray([
   "CANT_COLLAPSE_NOT_DOCKED",
   "CANT_UNCOLLAPSE_NOT_COLLAPSED",
   "NO_FILL_CANDIDATES",
-  "CANT_RESIZE_COLLAPSED_FRAME"
+  "CANT_RESIZE_COLLAPSED_FRAME",
+  "CANT_RESIZE_SINGLE_FRAME"
 ]);
 export const zWindowCreate = zLayoutWindowLoose.partial({ id: true, pxWidth: true, pxHeight: true, pxX: true, pxY: true }).extend({ frames: zLayoutWindow.shape.frames.optional() });
 export const zLayoutCreate = baseLayout.loose().extend({

package/dist/runtime/types/vue.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, InjectionKey, Ref } from "vue";
-import type { Direction, DragState, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, Orientation, Point } from "./index.js";
+import type { ActionHandler, Direction, DragState, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, Orientation, Point } from "./index.js";
 export type LayoutContext = ComputedRef<{
     /** The owning window, needed so we can correctly scale coordinates. */
     win: LayoutWindow;
@@ -8,14 +8,23 @@ export type LayoutContext = ComputedRef<{
 }>;
 export declare const layoutContextInjectionKey: InjectionKey<LayoutContext>;
 export interface UseFramesContext {
+    actionHandler: ActionHandler;
     dragStart: {
         (e: PointerEvent, type: "edge", data: {
             edge?: Edge;
             intersection?: IntersectionEntry;
-        }): void;
+        }, opts?: {
+            moveEvent?: string;
+            endEvent?: string;
+            context?: Record<string, unknown>;
+        }): Promise<any>;
         (e: PointerEvent, type: "frame", data: {
             frameId: FrameId;
-        }): void;
+        }, opts?: {
+            moveEvent?: string;
+            endEvent?: string;
+            context?: Record<string, unknown>;
+        }): Promise<any>;
     };
     dragMove: (e: PointerEvent) => void;
     dragEnd: (e?: PointerEvent, options?: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "description": "Headless layout manager.",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,
@@ -49,6 +49,7 @@
     "@alanscodelog/semantic-release-config": "^6.0.2",
     "@alanscodelog/tsconfigs": "^6.3.0",
     "@alanscodelog/vite-config": "^0.0.7",
+    "@babel/runtime": "^7.20.7",
     "@commitlint/cli": "^19.8.1",
     "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/kit": "^4.4.6",
@@ -145,6 +146,6 @@
     "doc:dev": "concurrently \"pnpm doc:watch\" \"pnpm doc:serve\"",
     "doc:check-invalid": "typedoc --listInvalidSymbolLinks",
     "actions:debug": "act -r -v -j release",
-    "gen:exports": "indexit update --ignore **/*.d.ts **.vue src/assets/** -o '${path}.js'"
+    "gen:exports": "indexit update --ignore **/*.d.ts **.vue src/assets/** **/demo/** **/dist/** -o '${path}.js'"
   }
 }

package/src/runtime/components/LayoutDragEdgeGrabbed.vue

@@ -6,7 +6,7 @@
 		z-20
 		bg-accent-500
 		cursor-pointer
-		[&.request-split]:hidden
+		[.request-split_&]:hidden
 	`,
 		($attrs as any).class
 	)"

package/src/runtime/components/LayoutDragEdgeHandle.vue

@@ -7,8 +7,7 @@
 			drag-edge
 			z-20
 			hover:cursor-pointer
-			
-			[&.request-split]:hidden
+			[.request-split_&]:hidden
 		`,
 		edge.error && `
 			drag-edge-errored

package/src/runtime/components/LayoutWindow.vue

@@ -7,7 +7,7 @@
 			flex
 			flex-col
 		`,
-		isDragging && `dragging cursor-pointer`,
+		isDragging && `dragging cursor-pointer user-select-none pointer-events-none`,
 		requestType && `request-${requestType}`,
 		($attrs as any).class
 	)"
@@ -70,7 +70,7 @@
 <script lang="ts" setup>
 import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver"
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { computed, provide, reactive, ref, useAttrs, watch } from "vue"
+import { computed, markRaw, provide, reactive, ref, useAttrs, watch } from "vue"
 
 
 import { useFrames } from "../composables/useFrames.js"
@@ -90,6 +90,8 @@ const $attrs = useAttrs()
 const win = defineModel<LayoutWindow>("win", { required: true })
 
 const props = withDefaults(defineProps<{
+	/** If you really need it, you can provide your own drag action handler (remember to markRaw it), note the actionHandler's prop will no longer have any effect.*/
+	dragActionHandler?: DragActionHandler<any, any>
 	/** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
 	actionHandlers?: IDragAction[]
 	textHints?: {text:string, classes?:string}[] 
@@ -120,9 +122,9 @@ const windowEl = ref<HTMLElement | null>(null)
 
 const requestType = ref<string | undefined | string>()
 
-const dragActionHandler = new DragActionHandler(
+const dragActionHandler = props.dragActionHandler ?? markRaw(new DragActionHandler(
 	[
-		...(props.actionHandlers ?? createDefaultHandlers()),
+		...(props.actionHandlers ?? createDefaultHandlers())
 	],
 	{
 		onEvent: (e, cancel) => {
@@ -132,14 +134,14 @@ const dragActionHandler = new DragActionHandler(
 			}
 		},
 		onRequestChange: type => {
-			requestType.value = type
+			requestType.value = type as any
 		},
 		onEnd: () => {
 			requestType.value = undefined
 			showDragging.value = true
 		},
 	}
-)
+))
 dragActionHandler.shapes = reactive([])
 dragActionHandler.textHints = reactive({ actions: [], errors: [] })
 const shapes = dragActionHandler.shapes

package/src/runtime/composables/useFrames.ts

@@ -12,30 +12,11 @@ import { moveEdge } from "../helpers/moveEdge.js"
 import { toWindowCoord } from "../helpers/toWindowCoord.js"
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
 import { isPointInRect } from "../layout/isPointInRect.js"
-import type { Direction, DragChangeHandler, DragChangeResult, DragState, Edge, EdgeDragStartData, FrameDragStartData, FrameId, IntersectionEntry, LayoutFrame, LayoutWindow, Orientation, Point } from "../types/index.js"
+import type { ActionHandler, Direction, DragState, Edge, EdgeDragStartData, FrameDragStartData, FrameId, IntersectionEntry, LayoutFrame, LayoutWindow, Orientation, Point } from "../types/index.js"
 
 export function useFrames(
 	win: Ref<LayoutWindow>,
-	handler: {
-		eventHandler: (e: KeyboardEvent, state: DragState, forceRecalculateEdges: () => void) => void
-		/**
-			* Called when the drag coordinates change (during any event). Should return true to allow the edges to be updated/moved, or false to prevent it.
-			*
-			* Can return anything for the end event as it's ignored.
-			*
-			* Can be used to save some context/info to later apply safely during onDragApply.
-			*/
-		onDragChange: (...args: Parameters<DragChangeHandler>) => DragChangeResult
-		/**
-		 * Called when drag will be applied. If dragEnd was called with apply false, it will not be called.
-		 * Return false to not apply the regular drag end changes (i.e. return false to reset to the position before dragging).
-		 */
-		onDragApply: ((state: DragState, forceRecalculateEdges: () => void) => boolean)
-		/**
-		 * Called after visual edges are recalculated. Action handlers can annotate edges with error info.
-		 */
-		annotateEdges?: (edges: Edge[], frames: LayoutFrame[]) => void
-	}
+	handler: ActionHandler
 ) {
 	const draggingEdges = ref<Edge[]>([])
 
@@ -59,10 +40,14 @@ export function useFrames(
 
 	const dragDirections = ref<Record<Orientation, Direction | undefined>>({} as any)
 
+	let dragStartPoint: Point | undefined
+	const dragDistance = ref(-1)
+
 	const draggingIntersection = ref<IntersectionEntry | undefined>(undefined)
 	const isDraggingFromWindowEdge = ref<boolean>(false)
 
 	const frameDragFrameId = ref<FrameId | undefined>()
+	const eventContext = ref<Record<string, unknown> | undefined>()
 
 	const frames = computed(() =>
 		isDragging.value && showDragging.value
@@ -110,6 +95,7 @@ export function useFrames(
 	const state = computed(() => ({
 		dragDirections: dragDirections.value,
 		dragPoint: dragPoint.value,
+		dragDistance: dragDistance.value,
 		isDragging: isDragging.value,
 		showDragging: showDragging.value,
 		draggingFrameId: frameDragFrameId.value,
@@ -122,18 +108,29 @@ export function useFrames(
 		dragHoveredFrame: dragHoveredFrame.value,
 		intersections: intersections.value,
 		isDraggingFromWindowEdge: isDraggingFromWindowEdge.value,
+		eventContext: eventContext.value,
 		win: win.value
 	} satisfies DragState))
 
 	let controller: AbortController
+	let dragResolve: ((result: any) => void) | undefined
+	let dragResult: any
 
 	function resetState(): void {
+		dragStartPoint = undefined
+
+		dragResolve?.(dragResult)
+		dragResolve = undefined
+		dragResult = undefined
+
 		draggingEdges.value = []
 		draggingIntersection.value = undefined
 		isDragging.value = false
 		dragPoint.value = undefined
+		dragDistance.value = -1
 		touchingFrames.value = []
 		frameDragFrameId.value = undefined
+		eventContext.value = undefined
 		dragDirStore.reset()
 		showDragging.value = false
 		forceRecalculateEdges()
@@ -143,18 +140,38 @@ export function useFrames(
 		e: PointerEvent,
 		type: T,
 		// someday this will work
-		data: T extends "edge" ? EdgeDragStartData : FrameDragStartData
-	): void {
+		data: T extends "edge" ? EdgeDragStartData : FrameDragStartData,
+		{
+			moveEvent = "pointermove",
+			endEvent = "pointerup",
+			context
+		}: {
+			moveEvent?: string
+			endEvent?: string
+			context?: Record<string, unknown>
+		} = {}
+	): Promise<any> {
+		// if already dragging, abort previous (resetState resolves the old promise)
+		if (controller) {
+			controller.abort()
+		}
+
+		const promise = new Promise<any>(resolve => {
+			dragResolve = resolve
+		})
+
 		controller = new AbortController()
 		controller.signal.addEventListener("abort", () => resetState())
 
 		e.preventDefault()
-		window.addEventListener("pointermove", dragMove, { signal: controller.signal })
-		window.addEventListener("pointerup", dragEnd, { signal: controller.signal })
+		window.addEventListener(moveEvent, dragMove as EventListener, { signal: controller.signal })
+		window.addEventListener(endEvent, dragEnd as EventListener, { signal: controller.signal })
 
 		const point = toWindowCoord(win.value, e)
 		dragPoint.value = point
+		dragStartPoint = { ...point }
 		dragDirStore.update(point)
+		eventContext.value = context
 
 		isDragging.value = type
 		showDragging.value = true
@@ -166,7 +183,7 @@ export function useFrames(
 			draggingIntersection.value = intersection
 
 			draggingEdges.value = edge
-				? [edge]
+				? [edge!]
 				: [
 						...(draggingIntersection.value?.sharedEdges.horizontal ?? []),
 						...(draggingIntersection.value?.sharedEdges.vertical ?? [])
@@ -198,6 +215,7 @@ export function useFrames(
 
 		const res = handler.onDragChange("start", e, state.value, forceRecalculateEdges, cancel)
 		showDragging.value = res.showDragging ?? true
+		return promise
 	}
 
 	function dragMove(e: PointerEvent): void {
@@ -205,6 +223,13 @@ export function useFrames(
 		const point = toWindowCoord(win.value, e)
 		const didChange = dragDirStore.update(point)
 		dragPoint.value = point
+		// at least one drag move has happened
+		dragDistance.value = 0
+		if (dragStartPoint) {
+			dragDistance.value = Math.sqrt(
+				Math.pow(point.x - dragStartPoint.x, 2) + Math.pow(point.y - dragStartPoint.y, 2)
+			)
+		}
 		if (!didChange) return
 		const res = handler.onDragChange("move", e, state.value, forceRecalculateEdges, cancel)
 
@@ -231,17 +256,20 @@ export function useFrames(
 			dragPoint.value = point
 		}
 
-		const doApply = apply && handler.onDragApply(state.value, forceRecalculateEdges)
-		if (doApply) {
-			for (const frame of touchingFramesArrays.value.flat()) {
-				win!.value.frames[frame.id] = frame
+		if (apply) {
+			const applyResult = handler.onDragApply(state.value, forceRecalculateEdges)
+			dragResult = applyResult.result
+			if (applyResult.apply) {
+				for (const frame of touchingFramesArrays.value.flat()) {
+					win!.value.frames[frame.id] = frame
+				}
 			}
 		}
 
 		handler.onDragChange("end", e, state.value, forceRecalculateEdges, cancel)
 
 		// this can get called from elsewhere
-		// also takes care of cleanup
+		// also takes care of cleanup nd resolving promise
 		controller?.abort()
 	}
 	function cancel(): void {
@@ -281,6 +309,7 @@ export function useFrames(
 		forceRecalculateEdges,
 		state,
 		showDragging,
-		frameDragFrameId
+		frameDragFrameId,
+		actionHandler: handler
 	}
 }

package/src/runtime/demo/tailwind.css

@@ -5,3 +5,7 @@
 
 /* Only needed for the dev playground: the demo App.vue lives outside the Vite project root, so Tailwind's auto-scan doesn't find the [&.deco-...] classes it defines. */
 @source "../../../src/runtime/demo";
+
+button {
+	cursor: pointer;
+}

package/src/runtime/drag/CloseAction.ts

@@ -13,6 +13,7 @@ export type CloseInfo = Exclude<ReturnType<typeof getCloseFrameInfo>, KnownError
 
 export class CloseAction implements IDragAction {
 	name = "close" as const
+	minDragDistance = 5
 
 	state: {
 		allowed: true
@@ -62,12 +63,15 @@ export class CloseAction implements IDragAction {
 		config?: {
 			debug?: boolean | string
 			closeHints?: Partial<CloseAction["closeHints"]>
+			/** Minimum pixel distance the user must drag before the action is allowed (decos shown and action applied). Defaults to 5. */
+			minDragDistance?: number
 		}
 	) {
 		if (handleEvent !== undefined) this.handleEvent = handleEvent
 		if (modifyDecos !== undefined) this.modifyDecos = modifyDecos
 		this.hooks = hooks
 		if (config?.debug) this.debug = true
+		if (config?.minDragDistance !== undefined) this.minDragDistance = config.minDragDistance
 		this.reset()
 	}
 
@@ -151,6 +155,9 @@ export class CloseAction implements IDragAction {
 		_e: PointerEvent | undefined,
 		state: DragState
 	): ActionDragChangeResult {
+		if (state.dragDistance <= this.minDragDistance) {
+			return { updateEdges: false, shapes: [] }
+		}
 		const {
 			touchingFramesArrays,
 			dragDirections,

package/src/runtime/drag/DragActionHandler.ts

@@ -191,14 +191,14 @@ export class DragActionHandler<
 	onDragApply(
 		state: DragState,
 		forceRecalculateEdges: () => void
-	): boolean {
+	): { apply: boolean, result: any } {
 		if (this.activeAction) {
 			const res = this.actions[this.activeAction]!.onDragApply(state, forceRecalculateEdges)
 			this.hooks.onEnd?.({ cancelled: false, applied: res })
-			return false
+			return { apply: res, result: undefined }
 		}
 		this.hooks.onEnd?.({ cancelled: false, applied: false })
-		return true
+		return { apply: true, result: undefined }
 	}
 
 	cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void {