@witchcraft/layout 0.4.1 → 0.4.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "configKey": "witchcraftLayout",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "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/LayoutDragEdges.d.vue.ts

@@ -2,14 +2,14 @@ declare var __VLS_1: {
     css: any;
     edge: any;
     onPointerDown: any;
-}, __VLS_10: {
+}, __VLS_6: {
     css: any;
     edge: any;
 };
 type __VLS_Slots = {} & {
     handle?: (props: typeof __VLS_1) => any;
 } & {
-    indicator?: (props: typeof __VLS_10) => any;
+    indicator?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/LayoutDragEdges.vue

@@ -11,7 +11,7 @@
 		<LayoutDragEdgeHandle
 			:css="css.handle"
 			:edge="visualEdges[i]"
-			@pointerdown="dragCtx.dragStart"
+			:on-pointer-down="dragCtx.dragStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{

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

@@ -2,14 +2,14 @@ declare var __VLS_1: {
     css: any;
     edge: any;
     onPointerDown: any;
-}, __VLS_10: {
+}, __VLS_6: {
     css: any;
     edge: any;
 };
 type __VLS_Slots = {} & {
     handle?: (props: typeof __VLS_1) => any;
 } & {
-    indicator?: (props: typeof __VLS_10) => any;
+    indicator?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/LayoutIntersections.vue

@@ -11,6 +11,7 @@
 		<LayoutIntersectionHandle
 			:css="css.handle"
 			:intersection="draggableIntersections[i]"
+			:on-pointer-down="dragCtx.dragStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{ css: css.visible, intersection: draggableIntersections[i] }">

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, 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;

package/dist/runtime/components/LayoutWindow.vue

@@ -7,7 +7,7 @@
 			flex
 			flex-col
 		`,
-  isDragging && `dragging cursor-pointer`,
+  isDragging && `dragging cursor-pointer user-select-none`,
   requestType && `request-${requestType}`,
   $attrs.class
 )"
@@ -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 ?? new DragActionHandler(
   [
     ...props.actionHandlers ?? createDefaultHandlers()
   ],

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, 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;

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

@@ -744,6 +744,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;

package/dist/runtime/composables/useFrames.js

@@ -27,6 +27,8 @@ 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();
@@ -64,6 +66,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,
@@ -80,10 +83,12 @@ export function useFrames(win, handler) {
   }));
   let controller;
   function resetState() {
+    dragStartPoint = void 0;
     draggingEdges.value = [];
     draggingIntersection.value = void 0;
     isDragging.value = false;
     dragPoint.value = void 0;
+    dragDistance.value = -1;
     touchingFrames.value = [];
     frameDragFrameId.value = void 0;
     dragDirStore.reset();
@@ -98,6 +103,7 @@ export function useFrames(win, handler) {
     window.addEventListener("pointerup", dragEnd, { signal: controller.signal });
     const point = toWindowCoord(win.value, e);
     dragPoint.value = point;
+    dragStartPoint = { ...point };
     dragDirStore.update(point);
     isDragging.value = type;
     showDragging.value = true;
@@ -136,6 +142,12 @@ export function useFrames(win, handler) {
     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;

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;
@@ -23,7 +24,9 @@ export declare class CloseAction implements IDragAction {
         errors: string[];
     };
     closeHints: {
-        actions: string[];
+        actions: string[] | ((state: {
+            force: boolean;
+        }) => string[]);
         transformError: (e: KnownError) => string;
     };
     handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean | "force";
@@ -38,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() {
@@ -73,7 +75,7 @@ export class CloseAction {
       this.textHints.actions = [];
       this.textHints.errors = [this.closeHints.transformError(result)];
     } else {
-      this.textHints.actions = this.closeHints.actions;
+      this.textHints.actions = typeof this.closeHints.actions === "function" ? this.closeHints.actions({ force: this.state.force }) : this.closeHints.actions;
       this.textHints.errors = [];
     }
   }
@@ -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/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;
     };
@@ -13,11 +14,13 @@ export declare class FrameDragAction implements IDragAction {
     handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
     dragHints: {
         actions: {
-            split: string;
-            swap: string;
-            rearrange: string;
-            dock: string;
-        };
+            split?: string;
+            swap?: string;
+            rearrange?: string;
+            dock?: string;
+        } | ((state: {
+            type: "split" | "swap" | "rearrange" | "dock";
+        }) => string[]);
         transformError: (e: KnownError) => string;
     };
     modifyDecos: (shapes: FrameDragDeco[]) => void;
@@ -30,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() {
@@ -46,8 +48,7 @@ export class FrameDragAction {
       this.textHints.actions = [];
       this.textHints.errors = [this.dragHints.transformError(result)];
     } else {
-      const text = this.dragHints.actions[result.info];
-      this.textHints.actions = [text];
+      this.textHints.actions = typeof this.dragHints.actions === "function" ? this.dragHints.actions({ type: result.info }) : this.dragHints.actions[result.info] !== void 0 ? [this.dragHints.actions[result.info]] : [];
       this.textHints.errors = [];
     }
   }
@@ -93,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

@@ -2,8 +2,10 @@ import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js";
 import type { ActionDragChangeResult, DragState, IDragAction, Point, SplitDeco } from "../types/index.js";
 import type { KnownError } from "../utils/KnownError.js";
 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;
@@ -21,7 +23,7 @@ export declare class SplitAction implements IDragAction {
         errors: string[];
     };
     splitHints: {
-        action: string;
+        actions: string[] | ((type: DragChangeType) => string[]);
         transformError: (e: KnownError) => string;
     };
     handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean;
@@ -36,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[];

package/dist/runtime/drag/SplitAction.js

@@ -6,12 +6,13 @@ import { createSplitDecoFromDrag } from "../layout/createSplitDecoFromDrag.js";
 import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js";
 export class SplitAction {
   name = "split";
+  minDragDistance = 5;
   state = {};
   // this is initialized by `this.reset()`
   debug = false;
   textHints = { actions: [], errors: [] };
   splitHints = {
-    action: "Hold Alt to Split",
+    actions: ["Hold Alt to Split"],
     transformError: (e) => e.message
   };
   handleEvent = (e, state) => e.altKey || state.isDraggingFromWindowEdge;
@@ -24,7 +25,8 @@ export class SplitAction {
     this.hooks = hooks;
     this.reset();
     if (config?.debug) this.debug = true;
-    if (config?.splitHints?.action) this.splitHints.action = config.splitHints.action;
+    if (config?.minDragDistance !== void 0) this.minDragDistance = config.minDragDistance;
+    if (config?.splitHints?.actions) this.splitHints.actions = config.splitHints.actions;
     if (config?.splitHints?.transformError) this.splitHints.transformError = config.splitHints.transformError;
   }
   reset() {
@@ -62,7 +64,7 @@ export class SplitAction {
   canHandleRequest(e, state) {
     const { draggingEdges } = state;
     if (draggingEdges.length !== 1) return false;
-    this.setTextHints(state.isDragging === "edge" ? true : void 0);
+    this.setTextHints(state.isDragging === "edge" && !state.isDraggingFromWindowEdge ? true : void 0);
     if (this.handleEvent(e, state)) {
       this.hooks.onStart?.();
       return true;
@@ -78,7 +80,7 @@ export class SplitAction {
       this.textHints.actions = [];
       this.textHints.errors = [this.splitHints.transformError(result)];
     } else {
-      this.textHints.actions = [this.splitHints.action];
+      this.textHints.actions = typeof this.splitHints.actions === "function" ? this.splitHints.actions("move") : this.splitHints.actions;
       this.textHints.errors = [];
     }
   }
@@ -103,7 +105,7 @@ export class SplitAction {
       dragDirections[oppositeOrientation],
       dragPoint
     );
-    this.setTextHints(canSplit);
+    this.setTextHints(state.isDragging === "edge" && !state.isDraggingFromWindowEdge ? canSplit : void 0);
     if (!(canSplit instanceof Error)) {
       this.state.allowed = true;
       this.state.res = canSplit;
@@ -117,7 +119,10 @@ export class SplitAction {
     }
   }
   onDragChange(_type, _e, state) {
-    const { dragHoveredFrame } = state;
+    const { dragHoveredFrame, dragDistance } = state;
+    if (dragDistance <= this.minDragDistance) {
+      return { updateEdges: false, shapes: [], showDragging: false };
+    }
     let ok = false;
     if (dragHoveredFrame) {
       if (this.state.lastPoint?.x === state.dragPoint?.x && this.state.lastPoint?.y === state.dragPoint?.y && this.state.lastReturn) {

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

@@ -1808,6 +1808,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. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "description": "Headless layout manager.",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "main": "./dist/runtime/index.js",
   "type": "module",
   "sideEffects": false,

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/LayoutDragEdges.vue

@@ -11,7 +11,7 @@
 		<LayoutDragEdgeHandle
 			:css="css.handle"
 			:edge="visualEdges[i]"
-			@pointerdown="dragCtx.dragStart"
+			:on-pointer-down="dragCtx.dragStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{

package/src/runtime/components/LayoutIntersections.vue

@@ -11,6 +11,7 @@
 		<LayoutIntersectionHandle
 			:css="css.handle"
 			:intersection="draggableIntersections[i]"
+			:on-pointer-down="dragCtx.dragStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{ css: css.visible, intersection: draggableIntersections[i] }">

package/src/runtime/components/LayoutWindow.vue

@@ -7,7 +7,7 @@
 			flex
 			flex-col
 		`,
-		isDragging && `dragging cursor-pointer`,
+		isDragging && `dragging cursor-pointer user-select-none`,
 		requestType && `request-${requestType}`,
 		($attrs as any).class
 	)"
@@ -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, 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 ?? new DragActionHandler(
 	[
-		...(props.actionHandlers ?? createDefaultHandlers()),
+		...(props.actionHandlers ?? createDefaultHandlers())
 	],
 	{
 		onEvent: (e, cancel) => {
@@ -132,7 +134,7 @@ const dragActionHandler = new DragActionHandler(
 			}
 		},
 		onRequestChange: type => {
-			requestType.value = type
+			requestType.value = type as any
 		},
 		onEnd: () => {
 			requestType.value = undefined

package/src/runtime/composables/useFrames.ts

@@ -59,6 +59,9 @@ 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)
 
@@ -110,6 +113,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,
@@ -128,10 +132,13 @@ export function useFrames(
 	let controller: AbortController
 
 	function resetState(): void {
+		dragStartPoint = undefined
+
 		draggingEdges.value = []
 		draggingIntersection.value = undefined
 		isDragging.value = false
 		dragPoint.value = undefined
+		dragDistance.value = -1
 		touchingFrames.value = []
 		frameDragFrameId.value = undefined
 		dragDirStore.reset()
@@ -154,6 +161,7 @@ export function useFrames(
 
 		const point = toWindowCoord(win.value, e)
 		dragPoint.value = point
+		dragStartPoint = { ...point }
 		dragDirStore.update(point)
 
 		isDragging.value = type
@@ -205,6 +213,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)
 

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
@@ -32,7 +33,7 @@ export class CloseAction implements IDragAction {
 	textHints: { actions: string[], errors: string[] } = { actions: [], errors: [] }
 
 	closeHints: {
-		actions: string[]
+		actions: string[] | ((state: { force: boolean }) => string[])
 		transformError: (e: KnownError) => string
 	} = {
 		actions: ["Hold Shift to Close", "Hold Ctrl+Shift to Force Close"],
@@ -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()
 	}
 
@@ -116,7 +120,9 @@ export class CloseAction implements IDragAction {
 			this.textHints.actions = []
 			this.textHints.errors = [this.closeHints.transformError(result)]
 		} else {
-			this.textHints.actions = this.closeHints.actions
+			this.textHints.actions = typeof this.closeHints.actions === "function"
+				? this.closeHints.actions({ force: this.state.force })
+				: this.closeHints.actions
 			this.textHints.errors = []
 		}
 	}
@@ -149,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/FrameDragAction.ts

@@ -13,6 +13,9 @@ import type { KnownError } from "../utils/KnownError.js"
 
 export class FrameDragAction implements IDragAction {
 	name = "frameDrag" as const
+
+	minDragDistance = 5
+
 	state: {
 		lastReturn?: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError
 	} = {
@@ -26,7 +29,7 @@ export class FrameDragAction implements IDragAction {
 		= (_e: PointerEvent | KeyboardEvent, state: DragState) => state.isDragging === "frame"
 
 	dragHints: {
-		actions: { split: string, swap: string, rearrange: string, dock: string }
+		actions: { split?: string, swap?: string, rearrange?: string, dock?: string } | ((state: { type: "split" | "swap" | "rearrange" | "dock" }) => string[])
 		transformError: (e: KnownError) => string
 	} = {
 		actions: {
@@ -52,12 +55,15 @@ export class FrameDragAction implements IDragAction {
 		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
 		}
 	) {
 		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()
 	}
@@ -76,8 +82,11 @@ export class FrameDragAction implements IDragAction {
 			this.textHints.actions = []
 			this.textHints.errors = [this.dragHints.transformError(result)]
 		} else {
-			const text = this.dragHints.actions[result.info]
-			this.textHints.actions = [text]
+			this.textHints.actions = typeof this.dragHints.actions === "function"
+				? this.dragHints.actions({ type: result.info })
+				: this.dragHints.actions[result.info] !== undefined
+					?	[this.dragHints.actions[result.info]!]
+					: []
 			this.textHints.errors = []
 		}
 	}
@@ -146,6 +155,9 @@ export class FrameDragAction implements IDragAction {
 		_e: PointerEvent | undefined,
 		state: DragState
 	): ActionDragChangeResult {
+		if (state.dragDistance <= this.minDragDistance) {
+			return { updateEdges: false, shapes: [], showDragging: false }
+		}
 		const { win, draggingFrameId, dragHoveredFrame } = state
 		const matchedZone = getDragZones(state, settings.zoneSizes)
 

package/src/runtime/drag/SplitAction.ts

@@ -12,8 +12,11 @@ export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError
 
 // note that we dont annotateEdges because is possible to forexample drag from a window edge to a frame that can be split, moving over a collapsed frame that was sharing the edge but can't be split
 
+export type DragChangeType = "start" | "move" | "end"
+
 export class SplitAction implements IDragAction {
 	name = "split" as const
+	minDragDistance = 5
 
 	state: {
 		allowed: true
@@ -30,10 +33,10 @@ export class SplitAction implements IDragAction {
 	debug: boolean | string = false
 	textHints: { actions: string[], errors: string[] } = { actions: [], errors: [] }
 	splitHints: {
-		action: string
+		actions: string[] | ((type: DragChangeType) => string[])
 		transformError: (e: KnownError) => string
 	} = {
-		action: "Hold Alt to Split",
+		actions: ["Hold Alt to Split"],
 		transformError: e => e.message
 	}
 
@@ -55,6 +58,8 @@ export class SplitAction implements IDragAction {
 		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
 		}
 	) {
 		if (handleEvent !== undefined) this.handleEvent = handleEvent
@@ -63,7 +68,8 @@ export class SplitAction implements IDragAction {
 		this.hooks = hooks
 		this.reset()
 		if (config?.debug) this.debug = true
-		if (config?.splitHints?.action) this.splitHints.action = config.splitHints.action
+		if (config?.minDragDistance !== undefined) this.minDragDistance = config.minDragDistance
+		if (config?.splitHints?.actions) this.splitHints.actions = config.splitHints.actions
 		if (config?.splitHints?.transformError) this.splitHints.transformError = config.splitHints.transformError
 	}
 
@@ -104,7 +110,8 @@ export class SplitAction implements IDragAction {
 	canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean {
 		const { draggingEdges } = state
 		if (draggingEdges.length !== 1) return false
-		this.setTextHints(state.isDragging === "edge" ? true : undefined)
+		// hint should not be shown when dragging from window edge but we should still handle the event
+		this.setTextHints(state.isDragging === "edge" && !state.isDraggingFromWindowEdge ? true : undefined)
 		if (this.handleEvent(e, state)) {
 			this.hooks.onStart?.()
 			return true
@@ -121,7 +128,10 @@ export class SplitAction implements IDragAction {
 			this.textHints.actions = []
 			this.textHints.errors = [this.splitHints.transformError(result)]
 		} else {
-			this.textHints.actions = [this.splitHints.action]
+			this.textHints.actions = typeof this.splitHints.actions === "function"
+				? this.splitHints.actions("move")
+				: this.splitHints.actions
+
 			this.textHints.errors = []
 		}
 	}
@@ -149,7 +159,7 @@ export class SplitAction implements IDragAction {
 			dragDirections[oppositeOrientation]!,
 			dragPoint!
 		)
-		this.setTextHints(canSplit)
+		this.setTextHints(state.isDragging === "edge" && !state.isDraggingFromWindowEdge ? canSplit : undefined)
 		if (!(canSplit instanceof Error)) {
 			this.state.allowed = true
 			this.state.res = canSplit
@@ -168,7 +178,10 @@ export class SplitAction implements IDragAction {
 		_e: PointerEvent | undefined,
 		state: DragState
 	): ActionDragChangeResult {
-		const { dragHoveredFrame } = state
+		const { dragHoveredFrame, dragDistance } = state
+		if (dragDistance <= this.minDragDistance) {
+			return { updateEdges: false, shapes: [], showDragging: false }
+		}
 		let ok = false
 		if (dragHoveredFrame) {
 			if (this.state.lastPoint?.x === state.dragPoint?.x && this.state.lastPoint?.y === state.dragPoint?.y && this.state.lastReturn) {

package/src/runtime/settings.ts

@@ -11,7 +11,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/src/runtime/types/index.ts

@@ -442,6 +442,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. */