@witchcraft/layout 0.4.2 → 0.4.4

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "configKey": "witchcraftLayout",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/components/LayoutDragEdgeGrabbed.vue

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

package/dist/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/dist/runtime/components/LayoutWindow.d.vue.ts

@@ -3,6 +3,8 @@ import { type DragState, type IDragAction } from "../types/index.js";
 import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js";
 import { type LayoutWindow } from "../types/index.js";
 type __VLS_Props = {
+    /** 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?: {
@@ -41,6 +43,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             x: number;
             y: number;
         } | undefined;
+        dragDistance: number;
         isDragging: false | "edge" | "frame";
         showDragging: boolean;
         draggingFrameId: string | undefined;
@@ -106,6 +109,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                 frame: import("../types/index.js").LayoutFrame;
             } | {
                 frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
             }> | {
                 code: string;
                 message: string;
@@ -181,6 +186,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                         frame: import("../types/index.js").LayoutFrame;
                     } | {
                         frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
                     }> | {
                         code: string;
                         message: string;
@@ -248,6 +255,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                         frame: import("../types/index.js").LayoutFrame;
                     } | {
                         frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
                     }> | {
                         code: string;
                         message: string;
@@ -318,6 +327,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                 frame: import("../types/index.js").LayoutFrame;
             } | {
                 frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
             }> | {
                 code: string;
                 message: string;
@@ -329,6 +340,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
         dragHoveredFrame: import("../types/index.js").LayoutFrame | undefined;
         intersections: import("../types/index.js").IntersectionEntry[];
         isDraggingFromWindowEdge: boolean;
+        eventContext: Record<string, unknown> | undefined;
         win: import("../types/index.js").BaseLayoutWindow;
     }>;
     win: import("vue").ModelRef<import("../types/index.js").BaseLayoutWindow, string, import("../types/index.js").BaseLayoutWindow, import("../types/index.js").BaseLayoutWindow>;

package/dist/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.class
 )"
@@ -67,7 +67,7 @@
 <script 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";
 import { createDefaultHandlers } from "../drag/createDefaultHandlers.js";
 import { DragActionHandler } from "../drag/DragActionHandler";
@@ -82,6 +82,7 @@ import { applyFrameChanges } from "../layout/applyFrameChanges.js";
 const $attrs = useAttrs();
 const win = defineModel("win", { type: Object, ...{ required: true } });
 const props = defineProps({
+  dragActionHandler: { type: Object, required: false },
   actionHandlers: { type: Array, required: false, default: void 0 },
   textHints: { type: Array, required: false, default: () => [] },
   textHintsTeleportTo: { type: null, required: true, default: void 0 },
@@ -91,7 +92,7 @@ const props = defineProps({
 const emit = defineEmits(["isShowingDrag", "dragState"]);
 const windowEl = ref(null);
 const requestType = ref();
-const dragActionHandler = new DragActionHandler(
+const dragActionHandler = props.dragActionHandler ?? markRaw(new DragActionHandler(
   [
     ...props.actionHandlers ?? createDefaultHandlers()
   ],
@@ -110,7 +111,7 @@ const dragActionHandler = new DragActionHandler(
       showDragging.value = true;
     }
   }
-);
+));
 dragActionHandler.shapes = reactive([]);
 dragActionHandler.textHints = reactive({ actions: [], errors: [] });
 const shapes = dragActionHandler.shapes;

package/dist/runtime/components/LayoutWindow.vue.d.ts

@@ -3,6 +3,8 @@ import { type DragState, type IDragAction } from "../types/index.js";
 import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js";
 import { type LayoutWindow } from "../types/index.js";
 type __VLS_Props = {
+    /** 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?: {
@@ -41,6 +43,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             x: number;
             y: number;
         } | undefined;
+        dragDistance: number;
         isDragging: false | "edge" | "frame";
         showDragging: boolean;
         draggingFrameId: string | undefined;
@@ -106,6 +109,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                 frame: import("../types/index.js").LayoutFrame;
             } | {
                 frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
             }> | {
                 code: string;
                 message: string;
@@ -181,6 +186,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                         frame: import("../types/index.js").LayoutFrame;
                     } | {
                         frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
                     }> | {
                         code: string;
                         message: string;
@@ -248,6 +255,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                         frame: import("../types/index.js").LayoutFrame;
                     } | {
                         frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
                     }> | {
                         code: string;
                         message: string;
@@ -318,6 +327,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                 frame: import("../types/index.js").LayoutFrame;
             } | {
                 frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
             }> | {
                 code: string;
                 message: string;
@@ -329,6 +340,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
         dragHoveredFrame: import("../types/index.js").LayoutFrame | undefined;
         intersections: import("../types/index.js").IntersectionEntry[];
         isDraggingFromWindowEdge: boolean;
+        eventContext: Record<string, unknown> | undefined;
         win: import("../types/index.js").BaseLayoutWindow;
     }>;
     win: import("vue").ModelRef<import("../types/index.js").BaseLayoutWindow, string, import("../types/index.js").BaseLayoutWindow, import("../types/index.js").BaseLayoutWindow>;

package/dist/runtime/composables/useFrames.d.ts

@@ -1,26 +1,11 @@
 import type { Ref } from "vue";
-import type { DragChangeHandler, DragChangeResult, DragState, Edge, EdgeDragStartData, FrameDragStartData, IntersectionEntry, LayoutFrame, LayoutWindow } from "../types/index.js";
-export declare 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;
-}): {
-    dragStart: <T extends "edge" | "frame">(e: PointerEvent, type: T, data: T extends "edge" ? EdgeDragStartData : FrameDragStartData) => void;
+import type { ActionHandler, EdgeDragStartData, FrameDragStartData, IntersectionEntry, LayoutFrame, LayoutWindow } from "../types/index.js";
+export declare function useFrames(win: Ref<LayoutWindow>, handler: ActionHandler): {
+    dragStart: <T extends "edge" | "frame">(e: PointerEvent, type: T, data: T extends "edge" ? EdgeDragStartData : FrameDragStartData, { moveEvent, endEvent, context }?: {
+        moveEvent?: string;
+        endEvent?: string;
+        context?: Record<string, unknown>;
+    }) => Promise<any>;
     dragEnd: (e?: PointerEvent, { apply }?: {
         apply?: boolean;
     }) => void;
@@ -103,6 +88,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
@@ -169,6 +156,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
@@ -235,6 +224,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
@@ -310,6 +301,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                     frame: LayoutFrame;
                 } | {
                     frame: LayoutFrame;
+                } | {
+                    frame: LayoutFrame;
                 }> | {
                     code: string;
                     message: string;
@@ -377,6 +370,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                     frame: LayoutFrame;
                 } | {
                     frame: LayoutFrame;
+                } | {
+                    frame: LayoutFrame;
                 }> | {
                     code: string;
                     message: string;
@@ -454,6 +449,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                     frame: LayoutFrame;
                 } | {
                     frame: LayoutFrame;
+                } | {
+                    frame: LayoutFrame;
                 }> | {
                     code: string;
                     message: string;
@@ -521,6 +518,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                     frame: LayoutFrame;
                 } | {
                     frame: LayoutFrame;
+                } | {
+                    frame: LayoutFrame;
                 }> | {
                     code: string;
                     message: string;
@@ -591,6 +590,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
@@ -657,6 +658,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
@@ -723,6 +726,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             frame: LayoutFrame;
         } | {
             frame: LayoutFrame;
+        } | {
+            frame: LayoutFrame;
         }> | {
             code: string;
             message: string;
@@ -744,6 +749,7 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
             x: number;
             y: number;
         } | undefined;
+        dragDistance: number;
         isDragging: false | "edge" | "frame";
         showDragging: boolean;
         draggingFrameId: string | undefined;
@@ -809,6 +815,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }> | {
                 code: string;
                 message: string;
@@ -884,6 +892,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                         frame: LayoutFrame;
                     } | {
                         frame: LayoutFrame;
+                    } | {
+                        frame: LayoutFrame;
                     }> | {
                         code: string;
                         message: string;
@@ -951,6 +961,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                         frame: LayoutFrame;
                     } | {
                         frame: LayoutFrame;
+                    } | {
+                        frame: LayoutFrame;
                     }> | {
                         code: string;
                         message: string;
@@ -1021,6 +1033,8 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
                 frame: LayoutFrame;
             } | {
                 frame: LayoutFrame;
+            } | {
+                frame: LayoutFrame;
             }> | {
                 code: string;
                 message: string;
@@ -1032,8 +1046,10 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: {
         dragHoveredFrame: LayoutFrame | undefined;
         intersections: IntersectionEntry[];
         isDraggingFromWindowEdge: boolean;
+        eventContext: Record<string, unknown> | undefined;
         win: import("../types/index.js").BaseLayoutWindow;
     }>;
     showDragging: Ref<boolean, boolean>;
     frameDragFrameId: Ref<string | undefined, string | undefined>;
+    actionHandler: ActionHandler;
 };

package/dist/runtime/composables/useFrames.js

@@ -27,9 +27,12 @@ export function useFrames(win, handler) {
   const showDragging = ref(false);
   const dragPoint = ref();
   const dragDirections = ref({});
+  let dragStartPoint;
+  const dragDistance = ref(-1);
   const draggingIntersection = ref(void 0);
   const isDraggingFromWindowEdge = ref(false);
   const frameDragFrameId = ref();
+  const eventContext = ref();
   const frames = computed(
     () => isDragging.value && showDragging.value ? { ...win.value.frames, ...allTouchingFrames.value } : win.value.frames
   );
@@ -64,6 +67,7 @@ export function useFrames(win, handler) {
   const state = computed(() => ({
     dragDirections: dragDirections.value,
     dragPoint: dragPoint.value,
+    dragDistance: dragDistance.value,
     isDragging: isDragging.value,
     showDragging: showDragging.value,
     draggingFrameId: frameDragFrameId.value,
@@ -76,29 +80,50 @@ export function useFrames(win, handler) {
     dragHoveredFrame: dragHoveredFrame.value,
     intersections: intersections.value,
     isDraggingFromWindowEdge: isDraggingFromWindowEdge.value,
+    eventContext: eventContext.value,
     win: win.value
   }));
   let controller;
+  let dragResolve;
+  let dragResult;
   function resetState() {
+    dragStartPoint = void 0;
+    dragResolve?.(dragResult);
+    dragResolve = void 0;
+    dragResult = void 0;
     draggingEdges.value = [];
     draggingIntersection.value = void 0;
     isDragging.value = false;
     dragPoint.value = void 0;
+    dragDistance.value = -1;
     touchingFrames.value = [];
     frameDragFrameId.value = void 0;
+    eventContext.value = void 0;
     dragDirStore.reset();
     showDragging.value = false;
     forceRecalculateEdges();
   }
-  function dragStart(e, type, data) {
+  function dragStart(e, type, data, {
+    moveEvent = "pointermove",
+    endEvent = "pointerup",
+    context
+  } = {}) {
+    if (controller) {
+      controller.abort();
+    }
+    const promise = new Promise((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, { signal: controller.signal });
+    window.addEventListener(endEvent, dragEnd, { 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;
     if (type === "frame") {
@@ -130,12 +155,19 @@ export function useFrames(win, handler) {
     }
     const res = handler.onDragChange("start", e, state.value, forceRecalculateEdges, cancel);
     showDragging.value = res.showDragging ?? true;
+    return promise;
   }
   function dragMove(e) {
     e.preventDefault();
     const point = toWindowCoord(win.value, e);
     const didChange = dragDirStore.update(point);
     dragPoint.value = point;
+    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);
     showDragging.value = res.showDragging ?? true;
@@ -157,10 +189,13 @@ export function useFrames(win, handler) {
       const point = toWindowCoord(win.value, e);
       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);
@@ -201,6 +236,7 @@ export function useFrames(win, handler) {
     forceRecalculateEdges,
     state,
     showDragging,
-    frameDragFrameId
+    frameDragFrameId,
+    actionHandler: handler
   };
 }

package/dist/runtime/demo/tailwind.css

@@ -1 +1 @@
-@import "tailwindcss";@import "../../../playground/.nuxt/witchcraft-ui.css";@import "../../../playground/.nuxt/witchcraft-layout.css";@source "../../../src/runtime/demo";
+@import "tailwindcss";@import "../../../playground/.nuxt/witchcraft-ui.css";@import "../../../playground/.nuxt/witchcraft-layout.css";@source "../../../src/runtime/demo";button{cursor:pointer}

package/dist/runtime/drag/CloseAction.d.ts

@@ -4,6 +4,7 @@ import type { KnownError } from "../utils/KnownError.js";
 export type CloseInfo = Exclude<ReturnType<typeof getCloseFrameInfo>, KnownError>;
 export declare class CloseAction implements IDragAction {
     name: "close";
+    minDragDistance: number;
     state: {
         allowed: true;
         force: boolean;
@@ -40,6 +41,8 @@ export declare class CloseAction implements IDragAction {
     modifyDecos?: CloseAction["modifyDecos"], hooks?: CloseAction["hooks"], 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;
     });
     reset(): void;
     private _getDecos;

package/dist/runtime/drag/CloseAction.js

@@ -7,6 +7,7 @@ import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js";
 import { getCloseFrameInfo } from "../layout/getCloseFrameInfo.js";
 export class CloseAction {
   name = "close";
+  minDragDistance = 5;
   state = {};
   // this is initialized by this.reset()
   debug = false;
@@ -30,6 +31,7 @@ export class CloseAction {
     if (modifyDecos !== void 0) this.modifyDecos = modifyDecos;
     this.hooks = hooks;
     if (config?.debug) this.debug = true;
+    if (config?.minDragDistance !== void 0) this.minDragDistance = config.minDragDistance;
     this.reset();
   }
   reset() {
@@ -97,6 +99,9 @@ export class CloseAction {
     return false;
   }
   onDragChange(_type, _e, state) {
+    if (state.dragDistance <= this.minDragDistance) {
+      return { updateEdges: false, shapes: [] };
+    }
     const {
       touchingFramesArrays,
       dragDirections,

package/dist/runtime/drag/DragActionHandler.d.ts

@@ -48,7 +48,10 @@ export declare class DragActionHandler<TRawDragActions extends IDragAction[], TD
     onDragChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: DragState, forceRecalculateEdges: () => void, cancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void): DragChangeResult;
     setTextHints(type: "start" | "move" | "end"): void;
     annotateEdges(edges: Edge[], frames: LayoutFrame[]): void;
-    onDragApply(state: DragState, forceRecalculateEdges: () => void): boolean;
+    onDragApply(state: DragState, forceRecalculateEdges: () => void): {
+        apply: boolean;
+        result: any;
+    };
     cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void;
     static debugState(pluginName: string, type: "before" | "after" | string, state: DragState, pluginState?: Record<string, any>, 
     /** Object key to filter the state by, e.g. state.win.frames. If false is ignored. The idea is you pass this.debug and users can set this.debug to a string to filter. */

package/dist/runtime/drag/DragActionHandler.js

@@ -122,10 +122,10 @@ export class DragActionHandler {
     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: void 0 };
     }
     this.hooks.onEnd?.({ cancelled: false, applied: false });
-    return true;
+    return { apply: true, result: void 0 };
   }
   cancel(e, state) {
     if (this.activeAction) {

package/dist/runtime/drag/FrameDragAction.d.ts

@@ -2,6 +2,7 @@ import type { ActionDragChangeResult, DragState, DragZone, FrameDragDeco, IDragA
 import type { KnownError } from "../utils/KnownError.js";
 export declare class FrameDragAction implements IDragAction {
     name: "frameDrag";
+    minDragDistance: number;
     state: {
         lastReturn?: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError;
     };
@@ -32,6 +33,8 @@ export declare class FrameDragAction implements IDragAction {
     /** Modify the created decos before they are rendered. */
     modifyDecos?: FrameDragAction["modifyDecos"], hooks?: FrameDragAction["hooks"], config?: {
         debug?: boolean | string;
+        /** Minimum pixel distance the user must drag before the action is allowed (decos shown and action applied). Defaults to 5. */
+        minDragDistance?: number;
     });
     reset(): void;
     setTextHints(result: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError | undefined): void;

package/dist/runtime/drag/FrameDragAction.js

@@ -8,6 +8,7 @@ import { getFrameSwapInfo } from "../layout/getFrameSwapInfo.js";
 import { settings } from "../settings.js";
 export class FrameDragAction {
   name = "frameDrag";
+  minDragDistance = 5;
   state = {
     lastReturn: void 0
   };
@@ -31,6 +32,7 @@ export class FrameDragAction {
     if (modifyDecos !== void 0) this.modifyDecos = modifyDecos;
     this.hooks = hooks;
     if (config?.debug) this.debug = true;
+    if (config?.minDragDistance !== void 0) this.minDragDistance = config.minDragDistance;
     this.reset();
   }
   reset() {
@@ -92,6 +94,9 @@ export class FrameDragAction {
     return false;
   }
   onDragChange(_type, _e, state) {
+    if (state.dragDistance <= this.minDragDistance) {
+      return { updateEdges: false, shapes: [], showDragging: false };
+    }
     const { win, draggingFrameId, dragHoveredFrame } = state;
     const matchedZone = getDragZones(state, settings.zoneSizes);
     if (!matchedZone) {

package/dist/runtime/drag/SplitAction.d.ts

@@ -5,6 +5,7 @@ export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError
 export type DragChangeType = "start" | "move" | "end";
 export declare class SplitAction implements IDragAction {
     name: "split";
+    minDragDistance: number;
     state: {
         allowed: true;
         res: SplitInfo;
@@ -37,6 +38,8 @@ export declare class SplitAction implements IDragAction {
     modifyDecos?: SplitAction["modifyDecos"], hooks?: SplitAction["hooks"], config?: {
         debug?: boolean | string;
         splitHints?: Partial<SplitAction["splitHints"]>;
+        /** Minimum pixel distance the user must drag before the action is allowed (decos shown and action applied). Defaults to 5. */
+        minDragDistance?: number;
     });
     reset(): void;
     getDecos(state: DragState): SplitDeco[];