@witchcraft/layout 0.5.0 → 0.5.2

package/dist/module.json

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

package/dist/module.mjs

@@ -20,7 +20,7 @@ const module$1 = defineNuxtModule({
       getContents: () => [
         `@source "${resolve("runtime/components")}";`,
         // the drag actions handlers and utils they use add some styles
-        `@source "${resolve("runtime/drag")}";`,
+        `@source "${resolve("runtime/move")}";`,
         `@source "${resolve("runtime/utils/createSplitDecoShapes")}";`
       ].join("\n")
     });

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

@@ -1,12 +1,14 @@
 import type { Ref } from "vue";
-import type { ActionHandler, ActionHandlerApplyResult, EdgeMoveStartData, FrameMoveStartData, IntersectionEntry, LayoutFrame, LayoutWindow } from "../types/index.js";
-export declare function useFrames(win: Ref<LayoutWindow>, handler: ActionHandler): {
+import type { EdgeMoveStartData, FrameMoveStartData, IActionHandler, IntersectionEntry, LayoutFrame, LayoutWindow } from "../types/index.js";
+export declare function useFrames(win: Ref<LayoutWindow>, handler: IActionHandler): {
     moveStart: <T extends "edge" | "frame">(e: PointerEvent, type: T, data: T extends "edge" ? EdgeMoveStartData : FrameMoveStartData, { moveEvent, endEvent, context }?: {
         moveEvent?: string;
         endEvent?: string;
         context?: Record<string, unknown>;
     }) => Promise<any>;
-    moveEnd: (e?: PointerEvent, { apply }?: Partial<Pick<ActionHandlerApplyResult, "apply">>) => void;
+    moveEnd: (e?: PointerEvent, { apply }?: {
+        apply?: boolean;
+    }) => void;
     cancel: () => void;
     onMove: (e: PointerEvent) => void;
     moveDirections: Ref<{
@@ -1049,5 +1051,5 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: ActionHandler
     }>;
     showMoving: Ref<boolean, boolean>;
     movingFrameId: Ref<string | undefined, string | undefined>;
-    actionHandler: ActionHandler;
+    actionHandler: IActionHandler;
 };

package/dist/runtime/composables/useFrames.js

@@ -102,6 +102,7 @@ export function useFrames(win, handler) {
     moveDirStore.reset();
     showMoving.value = false;
     forceRecalculateEdges();
+    handler.onMoveEnded();
   }
   function moveStart(e, type, data, {
     moveEvent = "pointermove",
@@ -169,10 +170,13 @@ export function useFrames(win, handler) {
       );
     }
     if (!didChange) return;
-    const res = handler.onMoveChange("move", e, state.value, forceRecalculateEdges, cancel, resolve);
+    onMoveChange(e, "move", point);
+  }
+  function onMoveChange(e, type, point) {
+    const res = handler.onMoveChange(type, e, state.value, forceRecalculateEdges, cancel, type === "end" ? void 0 : resolve);
     showMoving.value = res.showMoving ?? true;
     if (!res.updateEdges) return;
-    if (isMoving.value === "edge") {
+    if (isMoving.value === "edge" && point) {
       requestAnimationFrame(() => {
         for (let i = 0; i < movingEdges.value.length; i++) {
           const movingEdge = movingEdges.value[i];
@@ -189,16 +193,16 @@ export function useFrames(win, handler) {
       const point = toWindowCoord(win.value, e);
       movePoint.value = point;
     }
+    onMoveChange(e, "end", movePoint.value);
     if (apply) {
       const applyResult = handler.onMoveApply(state.value, forceRecalculateEdges);
       moveResult = applyResult.result;
-      if (applyResult.apply) {
+      if (applyResult.updateEdges) {
         for (const frame of touchingFramesArrays.value.flat()) {
           win.value.frames[frame.id] = frame;
         }
       }
     }
-    handler.onMoveChange("end", e, state.value, forceRecalculateEdges, void 0, void 0);
     controller?.abort();
   }
   function cancel() {

package/dist/runtime/move/ActionHandler.d.ts

@@ -1,16 +1,16 @@
 import { type RecordFromArray } from "@alanscodelog/utils";
-import type { ActionHandlerApplyResult, Edge, IAction, LayoutFrame, LayoutShape, MoveChangeHandler, MoveChangeResult, MoveState } from "../types/index.js";
+import type { ActionHandlerApplyResult, ActionResolve, Edge, IAction, IActionHandler, LayoutFrame, LayoutShape, MoveChangeResult, MoveState } from "../types/index.js";
 /**
  * Handles the lifecycle of a drag actions {@link IAction} and provides additional hooks.
  *
  * The first action instance that can handle the request is passed control of the event handlers until the request changes.
  */
-export declare class ActionHandler<TRawActions extends IAction[], TActions extends RecordFromArray<TRawActions, "name"> = RecordFromArray<TRawActions, "name">> {
+export declare class ActionHandler<TRawActions extends IAction[], TActions extends RecordFromArray<TRawActions, "name"> = RecordFromArray<TRawActions, "name">> implements IActionHandler {
     activeAction?: keyof TActions;
     actions: TActions;
     eventCanceller: ((e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void) | undefined;
     boundCancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void;
-    defaultOnMoveChange: MoveChangeHandler;
+    defaultOnMoveChange: IAction["onMoveChange"];
     hooks: {
         /** Called while dragging during dragChange events. You can use this to update the dragging edges. */
         onRecalculate?: () => void;
@@ -25,7 +25,8 @@ export declare class ActionHandler<TRawActions extends IAction[], TActions exten
         /** Called when the drag action ends either because it was completed or cancelled. */
         onEnd?: (context: {
             cancelled: boolean;
-            applied: boolean;
+            wasApplied: boolean;
+            result?: any;
         }) => void;
     };
     /** All action shapes merged into a single array. If using vue you can set this to a reactive array for reactivity. */
@@ -37,19 +38,18 @@ export declare class ActionHandler<TRawActions extends IAction[], TActions exten
     };
     constructor(actions: TRawActions, hooks?: ActionHandler<TRawActions, TActions>["hooks"], 
     /**
-     * Default onMoveChange handler for when no action can handle the request.
-     *
-     * Should return true to allow the edges to be moved, or false to prevent it.
+     * Default onMoveChange handler for when no action can handle the request. See {@link IAction.onMoveChange}.
      *
      * The default prevents movement when the edge is a window edge and when the edge is touching a collapsed frame.
      */
-    defaultOnMoveChange?: MoveChangeHandler);
+    defaultOnMoveChange?: IAction["onMoveChange"]);
     eventHandler(e: KeyboardEvent | PointerEvent, state: MoveState, forceRecalculateEdges: () => void): undefined;
-    onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, cancel: T extends "end" ? undefined : (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, resolve: T extends "end" ? undefined : (opts: ActionHandlerApplyResult) => void): MoveChangeResult;
-    setTextHints(type: "start" | "move" | "end"): void;
-    annotateEdges(edges: Edge[], frames: LayoutFrame[]): void;
+    onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, resolve: T extends "end" ? undefined : ((opts: ActionResolve) => void)): MoveChangeResult;
     onMoveApply(state: MoveState, forceRecalculateEdges: () => void): ActionHandlerApplyResult;
+    onMoveEnded(): void;
     cancel(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): void;
+    setTextHints(type: "start" | "move" | "end"): void;
+    annotateEdges(edges: Edge[], frames: LayoutFrame[]): void;
     static debugState(pluginName: string, type: "before" | "after" | string, state: MoveState, 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. */
     key?: string | boolean): void;

package/dist/runtime/move/ActionHandler.js

@@ -82,11 +82,31 @@ export class ActionHandler {
     this.setTextHints(type);
     const res = this.defaultOnMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel, resolve);
     this.shapes.splice(0, this.shapes.length, ...res.shapes);
-    if (type === "end") {
-      this.activeAction = void 0;
-    }
     return res;
   }
+  onMoveApply(state, forceRecalculateEdges) {
+    if (this.activeAction) {
+      const res = this.actions[this.activeAction].onMoveApply(state, forceRecalculateEdges);
+      this.hooks.onEnd?.({ cancelled: false, wasApplied: res.wasApplied, result: res.result });
+      return res;
+    }
+    this.hooks.onEnd?.({ cancelled: false, wasApplied: false });
+    return { updateEdges: true, result: void 0 };
+  }
+  onMoveEnded() {
+    if (this.activeAction) {
+      this.actions[this.activeAction].onMoveEnded();
+    }
+    this.activeAction = void 0;
+  }
+  cancel(e, state) {
+    if (this.activeAction) {
+      this.actions[this.activeAction].cancel(e, state);
+    }
+    this.activeAction = void 0;
+    this.eventCanceller?.(e, state);
+    this.hooks.onEnd?.({ cancelled: true, wasApplied: false });
+  }
   setTextHints(type) {
     this.textHints.actions = [];
     this.textHints.errors = [];
@@ -118,23 +138,6 @@ export class ActionHandler {
       }
     }
   }
-  onMoveApply(state, forceRecalculateEdges) {
-    if (this.activeAction) {
-      const res = this.actions[this.activeAction].onMoveApply(state, forceRecalculateEdges);
-      this.hooks.onEnd?.({ cancelled: false, applied: res });
-      return { apply: res, result: void 0 };
-    }
-    this.hooks.onEnd?.({ cancelled: false, applied: false });
-    return { apply: true, result: void 0 };
-  }
-  cancel(e, state) {
-    if (this.activeAction) {
-      this.actions[this.activeAction].cancel(e, state);
-    }
-    this.activeAction = void 0;
-    this.eventCanceller?.(e, state);
-    this.hooks.onEnd?.({ cancelled: true, applied: false });
-  }
   static debugState(pluginName, type, state, pluginState = {}, key) {
     if (key === false) return;
     let res = { state, pluginState };

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

@@ -1,5 +1,5 @@
 import { getCloseFrameInfo } from "../layout/getCloseFrameInfo.js";
-import type { ActionChangeResult, CloseDeco, IAction, MoveState } from "../types/index.js";
+import type { ActionApplyResult, ActionChangeResult, CloseDeco, IAction, MoveState } from "../types/index.js";
 import type { KnownError } from "../utils/KnownError.js";
 export type CloseInfo = Exclude<ReturnType<typeof getCloseFrameInfo>, KnownError>;
 export declare class CloseAction implements IAction {
@@ -53,6 +53,7 @@ export declare class CloseAction implements IAction {
     };
     canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean;
     onMoveChange(type: "start" | "end" | "move", _e: PointerEvent | undefined, state: MoveState): ActionChangeResult;
-    onMoveApply(state: MoveState): boolean;
+    onMoveApply(state: MoveState): ActionApplyResult;
     cancel(): void;
+    onMoveEnded(): void;
 }

package/dist/runtime/move/CloseAction.js

@@ -99,10 +99,6 @@ export class CloseAction {
     return false;
   }
   onMoveChange(type, _e, state) {
-    if (type === "end") {
-      this.reset();
-      return { shapes: [] };
-    }
     if (state.moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [] };
     }
@@ -152,7 +148,10 @@ export class CloseAction {
       }
     }
     const decos = this._getDecos(state);
-    this.state.lastReturn = { updateEdges: !isMovingFromWindowEdge, shapes: decos.flatMap((_) => _.shapes) };
+    this.state.lastReturn = {
+      updateEdges: !isMovingFromWindowEdge,
+      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes)
+    };
     return this.state.lastReturn;
   }
   onMoveApply(state) {
@@ -165,12 +164,14 @@ export class CloseAction {
       if (this.debug) {
         ActionHandler.debugState(this.name, "after", state, this.state, this.debug);
       }
-      return true;
+      return { updateEdges: false, wasApplied: true };
     }
-    return false;
+    return { updateEdges: true, wasApplied: false };
   }
   cancel() {
-    this.reset();
     this.hooks.onCancel?.();
   }
+  onMoveEnded() {
+    this.reset();
+  }
 }

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

@@ -1,4 +1,4 @@
-import type { ActionChangeResult, FrameDeco, IAction, LayoutChange, MoveState, Zone } from "../types/index.js";
+import type { ActionApplyResult, ActionChangeResult, FrameDeco, IAction, LayoutChange, MoveState, Zone } from "../types/index.js";
 import type { KnownError } from "../utils/KnownError.js";
 export declare class FrameDragAction implements IAction {
     name: "frameDrag";
@@ -45,6 +45,7 @@ export declare class FrameDragAction implements IAction {
     getDecos(matchedZone: Zone | undefined, state: MoveState, result: LayoutChange<"split" | "swap" | "rearrange" | "dock"> | KnownError | undefined): FrameDeco[];
     canHandleRequest(e: PointerEvent | KeyboardEvent, state: MoveState): boolean;
     onMoveChange<T extends "start" | "move" | "end">(type: T, _e: PointerEvent | undefined, state: MoveState): ActionChangeResult;
-    onMoveApply(state: MoveState): boolean;
+    onMoveApply(state: MoveState): ActionApplyResult;
+    onMoveEnded(): void;
     cancel(): void;
 }

package/dist/runtime/move/FrameDragAction.js

@@ -94,10 +94,6 @@ export class FrameDragAction {
     return false;
   }
   onMoveChange(type, _e, state) {
-    if (type === "end") {
-      this.reset();
-      return { shapes: [] };
-    }
     if (state.moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [], showMoving: false };
     }
@@ -119,7 +115,7 @@ export class FrameDragAction {
     this.setTextHints(this.state.lastReturn);
     const decos = this.getDecos(matchedZone, state, this.state.lastReturn);
     return {
-      shapes: decos.flatMap((_) => _.shapes),
+      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes),
       updateEdges: false,
       showMoving: false
     };
@@ -127,7 +123,7 @@ export class FrameDragAction {
   onMoveApply(state) {
     const result = this.state.lastReturn;
     if (!result || !state.moveHoveredFrame || !state.movingFrameId) {
-      return true;
+      return { updateEdges: false, wasApplied: false };
     }
     if (result instanceof Error) {
       this.hooks.onError?.(result);
@@ -140,7 +136,10 @@ export class FrameDragAction {
         ActionHandler.debugState(this.name, "after", state, this.state, this.debug);
       }
     }
-    return true;
+    return { updateEdges: false, wasApplied: true };
+  }
+  onMoveEnded() {
+    this.reset();
   }
   cancel() {
     this.reset();

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

@@ -1,5 +1,5 @@
 import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js";
-import type { ActionChangeResult, IAction, MoveState, Point, SplitDeco } from "../types/index.js";
+import type { ActionApplyResult, ActionChangeResult, IAction, MoveState, 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";
@@ -51,6 +51,7 @@ export declare class SplitAction implements IAction {
     };
     calculateSplitRequest(state: MoveState): boolean;
     onMoveChange(type: "start" | "end" | "move", _e: PointerEvent | undefined, state: MoveState): ActionChangeResult;
-    onMoveApply(state: MoveState): boolean;
+    onMoveApply(state: MoveState): ActionApplyResult;
+    onMoveEnded(): void;
     cancel(): void;
 }

package/dist/runtime/move/SplitAction.js

@@ -119,10 +119,6 @@ export class SplitAction {
     }
   }
   onMoveChange(type, _e, state) {
-    if (type === "end") {
-      this.reset();
-      return { shapes: [] };
-    }
     const { moveHoveredFrame, moveDistance } = state;
     if (moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [], showMoving: false };
@@ -147,11 +143,19 @@ export class SplitAction {
           },
           attrs: { class: "deco-split-error bg-red-500/50" }
         };
-        this.state.lastReturn = { updateEdges: true, shapes: [errorDeco], showMoving: false };
+        this.state.lastReturn = {
+          updateEdges: true,
+          shapes: type === "end" ? [] : [errorDeco],
+          showMoving: false
+        };
         return this.state.lastReturn;
       }
     }
-    this.state.lastReturn = { updateEdges: false, shapes: decos.flatMap((_) => _.shapes), showMoving: false };
+    this.state.lastReturn = {
+      updateEdges: false,
+      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes),
+      showMoving: false
+    };
     return this.state.lastReturn;
   }
   onMoveApply(state) {
@@ -167,10 +171,12 @@ export class SplitAction {
         }
       }
     }
-    return true;
+    return { updateEdges: false, wasApplied: true };
   }
-  cancel() {
+  onMoveEnded() {
     this.reset();
+  }
+  cancel() {
     this.hooks.onCancel?.();
   }
 }

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

@@ -1889,7 +1889,7 @@ export type MoveState = {
      */
     intersections: IntersectionEntry[];
     /**
-     * Whether the drag was initiated from a point along the window edge.
+     * Whether the move was initiated from a point along the window edge.
      */
     isMovingFromWindowEdge: boolean;
     /** Custom context passed to moveStart, available to action handlers via state.eventContext. */
@@ -1897,7 +1897,7 @@ export type MoveState = {
     win: LayoutWindow;
 };
 export interface ActionChangeResult {
-    /** Whether the drag should update the edges. Defaults to false. */
+    /** Whether the move should update the edges. Defaults to false. */
     updateEdges?: boolean;
     /** Deco shapes produced by this action during this drag step. */
     shapes: LayoutShape[];
@@ -1905,25 +1905,6 @@ export interface ActionChangeResult {
     showMoving?: boolean;
 }
 export type MoveChangeResult = Omit<ActionChangeResult, "shapes">;
-/**
- * Called when the drag coordinates change (during any event).
- *
- * Should return `{ allowed: true/false, shapes: LayoutShape[] }` to control whether the action is allowed and edges update and what deco shapes to render.
- *
- * Note that the allowed return type only affect the `move` event but is also typed as `boolean` for other events for ease of use.
- *
- * Use also to cleanup your action when type is "end".
- *
- * See also {@link ActionHandler.onMoveChange} to understand it's lifecycle as it is the extended version of.
- */
-export type MoveChangeHandler = <T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, 
-/** Calls moveEnd with apply: false */
-cancel: T extends "end" ? undefined : (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, 
-/** Saves result to resolve moveStart promise with then calls moveEnd with given apply. */
-resolve: T extends "end" ? undefined : ({ apply, result }: {
-    apply: boolean;
-    result: any;
-}) => void) => ActionChangeResult;
 /**
  * A drag action describes when and how to handle a drag event.
  *
@@ -1934,18 +1915,30 @@ resolve: T extends "end" ? undefined : ({ apply, result }: {
 export interface IAction {
     /** A unique name for your action. */
     name: string;
-    onMoveChange: MoveChangeHandler;
     /**
+     * Called when the drag coordinates change (during any event).
      *
-     * Is called before `onMoveChange("end")` with the same event. Might not be called if the request was cancelled.
+     * Should return `{ allowed: true/false, shapes: LayoutShape[] }` to control whether the action is allowed and edges update and what deco shapes to render.
      *
-     * You should apply your action if possible and return whether it was applied.
+     * Note that the allowed return type only affect the `move` event but is also typed as `boolean` for other events for ease of use.
      *
-     * Do not reset state here, use onMoveChange ("end").
+     * Use also to cleanup your action when type is "end".
+     *
+     * See also {@link ActionHandler.onMoveChange} to understand it's lifecycle as it is the extended version of.
+     */
+    onMoveChange: <T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, 
+    /** Calls moveEnd with updateEdges: false. This can technically be called from "end", it should still work. */
+    cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, 
+    /** Saves result to resolve moveStart promise with then calls moveEnd with given apply. Not available during "end" event. It's designed for resolving from other external evente (e.g. key events). */
+    resolve: T extends "end" ? undefined : ((opts: ActionResolve) => void)) => ActionChangeResult;
+    /**
+     * Is called after `onMoveChange("end")` with the same event. Will not be called if the request was cancelled.
+     *
+     * You should apply your action if possible and return whether it was applied `wasApplied` as well as `updateEdges` and `result` (optional), see {@link ActionHandler.onMoveApply}, which this is the extended version of.
      *
-     * See also {@link ActionHandler.onMoveApply} which this is the extended version of.
+     * Do not reset state here, use onMoveChange ("end").
      */
-    onMoveApply: (state: MoveState, forceRecalculateEdges: () => void) => boolean;
+    onMoveApply: (state: MoveState, forceRecalculateEdges: () => void) => ActionApplyResult;
     /**
      * Should return true if it should handle the "request"/event (e.g. some modifier is being pressed => user is requesting x action).
      *
@@ -1977,6 +1970,10 @@ export interface IAction {
         /** Error texts/hints to display when the action produces an error. */
         errors?: string[];
     };
+    /**
+     * Called when an action is cancelled. Call action specific onCancel hooks here.
+     */
+    cancel(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): void;
     /**
      * Called after visual edges are recalculated, once per edge. Action handlers can annotate edges with error info here ({@link Edge.error}).
      *
@@ -2006,35 +2003,51 @@ export type FrameMoveStartData = {
     frameId: FrameId;
 };
 export type ActionHandlerApplyResult = {
-    /** Whether to apply the regular drag end changes. Return false to reset to the position before dragging. */
+    updateEdges: boolean;
+    /** Value to resolve the drag promise with. Ignored if `updateEdges` is false. */
+    result?: any;
+};
+export type ActionApplyResult = ActionHandlerApplyResult & {
+    wasApplied: boolean;
+};
+export type ActionResolve = {
     apply: boolean;
-    /** Value to resolve the drag promise with. Ignored if `apply` is false. */
-    result: any;
+    result?: any;
 };
 /**
  * Handler interface for drag actions.
  */
-export interface ActionHandler {
+export interface IActionHandler {
     eventHandler: (e: KeyboardEvent, state: MoveState, 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. Note that the return only affects the move event but it's typed like this for ease of use. See also {@link MoveChangeHandler}.
+     * Called when the drag coordinates change (during any event). Should return updateEdges true to allow the edges to be updated/moved, or false to prevent it. See also {@link MoveChangeHandler} for the built in action handler.
      *
      * Can be used to save some context/info to later apply safely during onMoveApply.
      *
      * The call order is:
      * - onMoveChange("start", ...)
      * - onMoveChange("move", ...)
+     * - onMoveChange("end", ...)
      * - onMoveApply(...) (IF moveEnd was called with apply: true, otherwise this is skipped)
-     * - onMoveChange("end", ...) // always called last, do cleanup here
+     * 	- If anything calls cancel or resolve they call onMoveApply (cancel with apply: false, resolve with whatever apply value you gave it).
+     * - onMoveEnded() // do cleanup here
+     *
+     * Note also that resolve just resolves the promise value (after onMoveApply("end") and before onMoveEnded()). Depending on what you're doing you might still have to apply the result, remember onMoveApply will still be called if you do `resolve({ apply:true })`.
      */
-    onMoveChange: (...args: Parameters<MoveChangeHandler>) => MoveChangeResult;
+    onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, 
+    /** Calls moveEnd with apply: false. This can technically be called from "end", it should still work. */
+    cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, 
+    /** Saves result to resolve moveStart promise with then calls moveEnd with given apply. Not available during "end" event. It's designed for resolving from other external evente (e.g. key events). */
+    resolve: T extends "end" ? undefined : ((opts: ActionResolve) => void)): MoveChangeResult;
     /**
      * Called when drag will be applied. If moveEnd 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).
+     * Return `{updateEdges: false`} to not apply the regular drag end changes (i.e. return false to reset to the position before dragging). Optionally return a `result` value to resolve the promise with.
      *
-     * Do not use for resetting handler state, use onMoveChange("end", ...) for that.
+     * Do not use for resetting handler state, use onMoveEnded for that.
      */
     onMoveApply: (state: MoveState, forceRecalculateEdges: () => void) => ActionHandlerApplyResult;
+    /** For doing cleanup */
+    onMoveEnded: () => void;
     /**
      * Called after visual edges are recalculated. Action handlers can annotate edges with error info.
      */

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

@@ -1,5 +1,5 @@
 import type { ComputedRef, InjectionKey, Ref } from "vue";
-import type { ActionHandler, ActionHandlerApplyResult, Direction, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, MoveState, Orientation, Point } from "./index.js";
+import type { Direction, Edge, FrameId, IActionHandler, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, MoveState, Orientation, Point } from "./index.js";
 export type LayoutContext = ComputedRef<{
     /** The owning window, needed so we can correctly scale coordinates. */
     win: LayoutWindow;
@@ -8,7 +8,7 @@ export type LayoutContext = ComputedRef<{
 }>;
 export declare const layoutContextInjectionKey: InjectionKey<LayoutContext>;
 export interface UseFramesContext {
-    actionHandler: ActionHandler;
+    actionHandler: IActionHandler;
     moveStart: {
         (e: PointerEvent, type: "edge", data: {
             edge?: Edge;
@@ -27,7 +27,9 @@ export interface UseFramesContext {
         }): Promise<any>;
     };
     onMove: (e: PointerEvent) => void;
-    moveEnd: (e?: PointerEvent, options?: Partial<Pick<ActionHandlerApplyResult, "apply">>) => void;
+    moveEnd: (e?: PointerEvent, options?: {
+        apply?: boolean;
+    }) => void;
     cancel: () => void;
     moveDirections: Ref<Record<Orientation, Direction | undefined>>;
     movePoint: Ref<Point | undefined>;

package/package.json

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

package/src/module.ts

@@ -38,7 +38,7 @@ export default defineNuxtModule<ModuleOptions>({
 			getContents: () => [
 				`@source "${resolve("runtime/components")}";`,
 				// the drag actions handlers and utils they use add some styles
-				`@source "${resolve("runtime/drag")}";`,
+				`@source "${resolve("runtime/move")}";`,
 				`@source "${resolve("runtime/utils/createSplitDecoShapes")}";`
 			].join("\n")
 		})

package/src/runtime/composables/useFrames.ts

@@ -12,11 +12,11 @@ import { toWindowCoord } from "../helpers/toWindowCoord.js"
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
 import { isPointInRect } from "../layout/isPointInRect.js"
 import { MoveDirectionStore } from "../move/MoveDirectionStore.js"
-import type { ActionHandler, ActionHandlerApplyResult, Direction, Edge, EdgeMoveStartData, FrameId, FrameMoveStartData, IntersectionEntry, LayoutFrame, LayoutWindow, MoveState, Orientation, Point } from "../types/index.js"
+import type { ActionResolve, Direction, Edge, EdgeMoveStartData, FrameId, FrameMoveStartData, IActionHandler, IntersectionEntry, LayoutFrame, LayoutWindow, MoveState, Orientation, Point } from "../types/index.js"
 
 export function useFrames(
 	win: Ref<LayoutWindow>,
-	handler: ActionHandler
+	handler: IActionHandler
 ) {
 	const movingEdges = ref<Edge[]>([])
 
@@ -134,6 +134,7 @@ export function useFrames(
 		moveDirStore.reset()
 		showMoving.value = false
 		forceRecalculateEdges()
+		handler.onMoveEnded()
 	}
 
 	function moveStart<T extends "edge" | "frame">(
@@ -231,13 +232,17 @@ export function useFrames(
 			)
 		}
 		if (!didChange) return
-		const res = handler.onMoveChange("move", e, state.value, forceRecalculateEdges, cancel, resolve)
+		onMoveChange(e, "move", point)
+	}
+
+	function onMoveChange(e: PointerEvent | undefined, type: "move" | "end", point: Point | undefined) {
+		const res = handler.onMoveChange(type, e, state.value, forceRecalculateEdges, cancel, type === "end" ? undefined : resolve)
 
 
 		showMoving.value = res.showMoving ?? true
 		if (!res.updateEdges) return
 
-		if (isMoving.value === "edge") {
+		if (isMoving.value === "edge" && point) {
 			requestAnimationFrame(() => {
 				for (let i = 0; i < movingEdges.value.length; i++) {
 					const movingEdge = movingEdges.value[i]
@@ -250,33 +255,34 @@ export function useFrames(
 		}
 	}
 
-	function moveEnd(e?: PointerEvent, { apply = true }: Partial<Pick<ActionHandlerApplyResult, "apply">> = {}): void {
+	function moveEnd(e?: PointerEvent, { apply = true }: { apply?: boolean } = {}) {
 		if (e) {
 			const point = toWindowCoord(win.value, e)
 			movePoint.value = point
 		}
 
+		onMoveChange(e, "end", movePoint.value)
+
 		if (apply) {
 			const applyResult = handler.onMoveApply(state.value, forceRecalculateEdges)
 			moveResult = applyResult.result
-			if (applyResult.apply) {
+			if (applyResult.updateEdges) {
 				for (const frame of touchingFramesArrays.value.flat()) {
 					win!.value.frames[frame.id] = frame
 				}
 			}
 		}
 
-		handler.onMoveChange("end", e, state.value, forceRecalculateEdges, undefined, undefined)
-
 		// this can get called from elsewhere
-		// also takes care of cleanup nd resolving promise
+		// also takes care of cleanup, resolving promise, and calling onMoveEnded
 		controller?.abort()
 	}
 
 	function cancel(): void {
 		moveEnd(undefined, { apply: false })
 	}
-	function resolve({ apply, result: value }: ActionHandlerApplyResult): void {
+	// we use apply not updateEdges, updateEdges needs to be returned by onMoveApply
+	function resolve({ apply, result: value }: ActionResolve): void {
 		moveResult = value
 		moveEnd(undefined, { apply })
 	}

package/src/runtime/move/ActionHandler.ts

@@ -2,7 +2,7 @@ import { get, type RecordFromArray } from "@alanscodelog/utils"
 
 import { isWindowEdge } from "../helpers/isWindowEdge.js"
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
-import type { ActionHandlerApplyResult, Edge, IAction, LayoutFrame, LayoutShape, MoveChangeHandler, MoveChangeResult, MoveState } from "../types/index.js"
+import type { ActionHandlerApplyResult, ActionResolve, Edge, IAction, IActionHandler, LayoutFrame, LayoutShape, MoveChangeResult, MoveState } from "../types/index.js"
 import { LAYOUT_ERROR } from "../types/index.js"
 import { KnownError } from "../utils/KnownError.js"
 
@@ -14,7 +14,7 @@ import { KnownError } from "../utils/KnownError.js"
 export class ActionHandler<
 	TRawActions extends IAction[],
 	TActions extends RecordFromArray<TRawActions, "name"> = RecordFromArray<TRawActions, "name">
-> {
+> implements IActionHandler {
 	activeAction?: keyof TActions
 
 	actions: TActions
@@ -23,7 +23,7 @@ export class ActionHandler<
 
 	boundCancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void
 
-	defaultOnMoveChange: MoveChangeHandler = (type, _e, state, _forceRecalculateEdges, _cancel) => {
+	defaultOnMoveChange: IAction["onMoveChange"] = (type, _e, state, _forceRecalculateEdges, _cancel) => {
 		const isTouchingCollapsedFrameEdge = type === "move"
 			&& state.isMoving === "edge"
 			&& state.touchingFramesArrays.some(frames =>
@@ -48,7 +48,7 @@ export class ActionHandler<
 		/** Called when the action requested changes. */
 		onRequestChange?: (type: keyof TActions | undefined) => void
 		/** Called when the drag action ends either because it was completed or cancelled. */
-		onEnd?: (context: { cancelled: boolean, applied: boolean }) => void
+		onEnd?: (context: { cancelled: boolean, wasApplied: boolean, result?: any }) => void
 	}
 
 	/** All action shapes merged into a single array. If using vue you can set this to a reactive array for reactivity. */
@@ -61,13 +61,11 @@ export class ActionHandler<
 		actions: TRawActions,
 		hooks: ActionHandler<TRawActions, TActions>["hooks"] = {},
 		/**
-		 * Default onMoveChange handler for when no action can handle the request.
-		 *
-		 * Should return true to allow the edges to be moved, or false to prevent it.
+		 * Default onMoveChange handler for when no action can handle the request. See {@link IAction.onMoveChange}.
 		 *
 		 * The default prevents movement when the edge is a window edge and when the edge is touching a collapsed frame.
 		 */
-		defaultOnMoveChange?: MoveChangeHandler
+		defaultOnMoveChange?: IAction["onMoveChange"]
 	) {
 		if (defaultOnMoveChange) this.defaultOnMoveChange = defaultOnMoveChange
 		this.hooks = hooks
@@ -128,8 +126,8 @@ export class ActionHandler<
 		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
 		state: MoveState,
 		forceRecalculateEdges: () => void,
-		cancel: T extends "end" ? undefined : (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,
-		resolve: T extends "end" ? undefined : (opts: ActionHandlerApplyResult) => void
+		cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,
+		resolve: T extends "end" ? undefined : ((opts: ActionResolve) => void)
 	): MoveChangeResult {
 		if (type === "start") {
 			this.eventCanceller = cancel
@@ -137,7 +135,7 @@ export class ActionHandler<
 		}
 
 		if (this.activeAction) {
-			const res = this.actions[this.activeAction]!.onMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel as any, resolve as any)
+			const res = this.actions[this.activeAction]!.onMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel as any, resolve)
 			// in case it's a vue reactive array
 			this.shapes.splice(0, this.shapes.length, ...res.shapes)
 			this.setTextHints(type)
@@ -147,12 +145,40 @@ export class ActionHandler<
 		const res = this.defaultOnMoveChange(type, e, state, forceRecalculateEdges, this.boundCancel as any, resolve as any)
 		this.shapes.splice(0, this.shapes.length, ...res.shapes)
 
-		if (type === "end") {
-			this.activeAction = undefined
-		}
 		return res
 	}
 
+	onMoveApply(
+		state: MoveState,
+		forceRecalculateEdges: () => void
+	): ActionHandlerApplyResult {
+		if (this.activeAction) {
+			const res = this.actions[this.activeAction]!.onMoveApply(state, forceRecalculateEdges)
+			this.hooks.onEnd?.({ cancelled: false, wasApplied: res.wasApplied, result: res.result })
+			return res
+		}
+		this.hooks.onEnd?.({ cancelled: false, wasApplied: false })
+		return { updateEdges: true, result: undefined }
+	}
+
+	onMoveEnded() {
+		if (this.activeAction) {
+			this.actions[this.activeAction]!.onMoveEnded()
+		}
+
+		this.activeAction = undefined
+	}
+
+	cancel(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): void {
+		if (this.activeAction) {
+			this.actions[this.activeAction].cancel(e, state)
+		}
+		this.activeAction = undefined
+		this.eventCanceller?.(e, state)
+		this.hooks.onEnd?.({ cancelled: true, wasApplied: false })
+	}
+
+
 	setTextHints(type: "start" | "move" | "end") {
 		// again in case it's a vue reactive object
 		this.textHints.actions = []
@@ -190,28 +216,6 @@ export class ActionHandler<
 		}
 	}
 
-	onMoveApply(
-		state: MoveState,
-		forceRecalculateEdges: () => void
-	): ActionHandlerApplyResult {
-		if (this.activeAction) {
-			const res = this.actions[this.activeAction]!.onMoveApply(state, forceRecalculateEdges)
-			this.hooks.onEnd?.({ cancelled: false, applied: res })
-			return { apply: res, result: undefined }
-		}
-		this.hooks.onEnd?.({ cancelled: false, applied: false })
-		return { apply: true, result: undefined }
-	}
-
-	cancel(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): void {
-		if (this.activeAction) {
-			this.actions[this.activeAction].cancel(e, state)
-		}
-		this.activeAction = undefined
-		this.eventCanceller?.(e, state)
-		this.hooks.onEnd?.({ cancelled: true, applied: false })
-	}
-
 	static debugState(
 		pluginName: string,
 		type: "before" | "after" | string,

package/src/runtime/move/CloseAction.ts

@@ -6,7 +6,7 @@ import { oppositeSide } from "../helpers/oppositeSide.js"
 import { applyFrameChanges } from "../layout/applyFrameChanges.js"
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js"
 import { getCloseFrameInfo } from "../layout/getCloseFrameInfo.js"
-import type { ActionChangeResult, CloseDeco, IAction, MoveState } from "../types/index.js"
+import type { ActionApplyResult, ActionChangeResult, CloseDeco, IAction, MoveState } from "../types/index.js"
 import type { KnownError } from "../utils/KnownError.js"
 
 export type CloseInfo = Exclude<ReturnType<typeof getCloseFrameInfo>, KnownError>
@@ -155,10 +155,6 @@ export class CloseAction implements IAction {
 		_e: PointerEvent | undefined,
 		state: MoveState
 	): ActionChangeResult {
-		if (type === "end") {
-			this.reset()
-			return { shapes: [] }
-		}
 		if (state.moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [] }
 		}
@@ -209,23 +205,29 @@ export class CloseAction implements IAction {
 			}
 		}
 		const decos = this._getDecos(state)
-		this.state.lastReturn = { updateEdges: !isMovingFromWindowEdge, shapes: decos.flatMap(_ => _.shapes) }
+		this.state.lastReturn = {
+			updateEdges: !isMovingFromWindowEdge,
+			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes)
+		}
 		return this.state.lastReturn
 	}
 
-	onMoveApply(state: MoveState): boolean {
+	onMoveApply(state: MoveState): ActionApplyResult {
 		if (this.state.res) {
 			const win = state.win
 			if (this.debug) { ActionHandler.debugState(this.name, "before", state, this.state, this.debug) }
 			applyFrameChanges(win, this.state.res)
 			if (this.debug) { ActionHandler.debugState(this.name, "after", state, this.state, this.debug) }
-			return true
+			return { updateEdges: false, wasApplied: true }
 		}
-		return false
+		return { updateEdges: true, wasApplied: false }
 	}
 
 	cancel(): void {
-		this.reset()
 		this.hooks.onCancel?.()
 	}
+
+	onMoveEnded() {
+		this.reset()
+	}
 }

package/src/runtime/move/FrameDragAction.ts

@@ -7,7 +7,7 @@ import { getFrameRearrangeInfo } from "../layout/getFrameRearrangeInfo.js"
 import { getFrameSwapInfo } from "../layout/getFrameSwapInfo.js"
 import { getZones } from "../layout/getZones.js"
 import { settings } from "../settings.js"
-import type { ActionChangeResult, FrameDeco, IAction, LayoutChange, MoveState, Zone } from "../types/index.js"
+import type { ActionApplyResult, ActionChangeResult, FrameDeco, IAction, LayoutChange, MoveState, Zone } from "../types/index.js"
 import type { KnownError } from "../utils/KnownError.js"
 
 
@@ -155,10 +155,6 @@ export class FrameDragAction implements IAction {
 		_e: PointerEvent | undefined,
 		state: MoveState
 	): ActionChangeResult {
-		if (type === "end") {
-			this.reset()
-			return { shapes: [] }
-		}
 		if (state.moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [], showMoving: false }
 		}
@@ -185,16 +181,16 @@ export class FrameDragAction implements IAction {
 		const decos = this.getDecos(matchedZone, state, this.state.lastReturn)
 
 		return {
-			shapes: decos.flatMap(_ => _.shapes),
+			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes),
 			updateEdges: false,
 			showMoving: false
 		}
 	}
 
-	onMoveApply(state: MoveState): boolean {
+	onMoveApply(state: MoveState): ActionApplyResult {
 		const result = this.state.lastReturn
 		if (!result || !state.moveHoveredFrame || !state.movingFrameId) {
-			return true
+			return { updateEdges: false, wasApplied: false }
 		}
 
 		if (result instanceof Error) {
@@ -205,7 +201,11 @@ export class FrameDragAction implements IAction {
 			if (this.debug) { ActionHandler.debugState(this.name, "after", state, this.state, this.debug) }
 		}
 
-		return true
+		return { updateEdges: false, wasApplied: true }
+	}
+
+	onMoveEnded() {
+		this.reset()
 	}
 
 	cancel(): void {

package/src/runtime/move/SplitAction.ts

@@ -5,7 +5,7 @@ import { oppositeSide } from "../helpers/oppositeSide.js"
 import { applyFrameChanges } from "../layout/applyFrameChanges.js"
 import { createSplitDecoFromDrag } from "../layout/createSplitDecoFromDrag.js"
 import { getFrameSplitInfo } from "../layout/getFrameSplitInfo.js"
-import type { ActionChangeResult, IAction, LayoutShape, MoveState, Point, SplitDeco } from "../types/index.js"
+import type { ActionApplyResult, ActionChangeResult, IAction, LayoutShape, MoveState, Point, SplitDeco } from "../types/index.js"
 import type { KnownError } from "../utils/KnownError.js"
 
 export type SplitInfo = Exclude<ReturnType<typeof getFrameSplitInfo>, KnownError>
@@ -178,10 +178,6 @@ export class SplitAction implements IAction {
 		_e: PointerEvent | undefined,
 		state: MoveState
 	): ActionChangeResult {
-		if (type === "end") {
-			this.reset()
-			return { shapes: [] }
-		}
 		const { moveHoveredFrame, moveDistance } = state
 		if (moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [], showMoving: false }
@@ -207,15 +203,23 @@ export class SplitAction implements IAction {
 					},
 					attrs: { class: "deco-split-error bg-red-500/50" }
 				}
-				this.state.lastReturn = { updateEdges: true, shapes: [errorDeco], showMoving: false }
+				this.state.lastReturn = {
+					updateEdges: true,
+					shapes: type === "end" ? [] : [errorDeco],
+					showMoving: false
+				}
 				return this.state.lastReturn
 			}
 		}
-		this.state.lastReturn = { updateEdges: false, shapes: decos.flatMap(_ => _.shapes), showMoving: false }
+		this.state.lastReturn = {
+			updateEdges: false,
+			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes),
+			showMoving: false
+		}
 		return this.state.lastReturn
 	}
 
-	onMoveApply(state: MoveState): boolean {
+	onMoveApply(state: MoveState): ActionApplyResult {
 		if (this.state.res && state.moveHoveredFrame) {
 			// this only caches once per frame hovered over
 			// so the drag position is outdated, we must recalculate
@@ -226,11 +230,14 @@ export class SplitAction implements IAction {
 				if (this.debug) { ActionHandler.debugState(this.name, "after", state, this.state, this.debug) }
 			}
 		}
-		return true
+		return { updateEdges: false, wasApplied: true }
 	}
 
-	cancel(): void {
+	onMoveEnded() {
 		this.reset()
+	}
+
+	cancel(): void {
 		this.hooks.onCancel?.()
 	}
 }

package/src/runtime/types/index.ts

@@ -487,7 +487,7 @@ export type MoveState = {
 	 */
 	intersections: IntersectionEntry[]
 	/**
-	 * Whether the drag was initiated from a point along the window edge.
+	 * Whether the move was initiated from a point along the window edge.
 	 */
 	isMovingFromWindowEdge: boolean
 	/** Custom context passed to moveStart, available to action handlers via state.eventContext. */
@@ -497,7 +497,7 @@ export type MoveState = {
 
 
 export interface ActionChangeResult {
-	/** Whether the drag should update the edges. Defaults to false. */
+	/** Whether the move should update the edges. Defaults to false. */
 	updateEdges?: boolean
 	/** Deco shapes produced by this action during this drag step. */
 	shapes: LayoutShape[]
@@ -506,27 +506,6 @@ export interface ActionChangeResult {
 }
 export type MoveChangeResult = Omit<ActionChangeResult, "shapes">
 
-/**
- * Called when the drag coordinates change (during any event).
- *
- * Should return `{ allowed: true/false, shapes: LayoutShape[] }` to control whether the action is allowed and edges update and what deco shapes to render.
- *
- * Note that the allowed return type only affect the `move` event but is also typed as `boolean` for other events for ease of use.
- *
- * Use also to cleanup your action when type is "end".
- *
- * See also {@link ActionHandler.onMoveChange} to understand it's lifecycle as it is the extended version of.
- */
-export type MoveChangeHandler = <T extends "start" | "move" | "end">(
-	type: T,
-	e: T extends "end" ? PointerEvent | undefined : PointerEvent,
-	state: MoveState,
-	forceRecalculateEdges: () => void,
-	/** Calls moveEnd with apply: false */
-	cancel: T extends "end" ? undefined : (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,
-	/** Saves result to resolve moveStart promise with then calls moveEnd with given apply. */
-	resolve: T extends "end" ? undefined : ({ apply, result }: { apply: boolean, result: any }) => void
-) => ActionChangeResult
 
 /**
  * A drag action describes when and how to handle a drag event.
@@ -539,18 +518,35 @@ export type MoveChangeHandler = <T extends "start" | "move" | "end">(
 export interface IAction {
 	/** A unique name for your action. */
 	name: string
-	onMoveChange: MoveChangeHandler
 	/**
+	 * Called when the drag coordinates change (during any event).
 	 *
-	 * Is called before `onMoveChange("end")` with the same event. Might not be called if the request was cancelled.
+	 * Should return `{ allowed: true/false, shapes: LayoutShape[] }` to control whether the action is allowed and edges update and what deco shapes to render.
 	 *
-	 * You should apply your action if possible and return whether it was applied.
+	 * Note that the allowed return type only affect the `move` event but is also typed as `boolean` for other events for ease of use.
 	 *
-	 * Do not reset state here, use onMoveChange ("end").
+	 * Use also to cleanup your action when type is "end".
 	 *
-	 * See also {@link ActionHandler.onMoveApply} which this is the extended version of.
+	 * See also {@link ActionHandler.onMoveChange} to understand it's lifecycle as it is the extended version of.
 	 */
-	onMoveApply: (state: MoveState, forceRecalculateEdges: () => void) => boolean
+	onMoveChange: <T extends "start" | "move" | "end">(
+		type: T,
+		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
+		state: MoveState,
+		forceRecalculateEdges: () => void,
+		/** Calls moveEnd with updateEdges: false. This can technically be called from "end", it should still work. */
+		cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,
+		/** Saves result to resolve moveStart promise with then calls moveEnd with given apply. Not available during "end" event. It's designed for resolving from other external evente (e.g. key events). */
+		resolve: T extends "end" ? undefined : ((opts: ActionResolve) => void)
+	) => ActionChangeResult
+	/**
+	 * Is called after `onMoveChange("end")` with the same event. Will not be called if the request was cancelled.
+	 *
+	 * You should apply your action if possible and return whether it was applied `wasApplied` as well as `updateEdges` and `result` (optional), see {@link ActionHandler.onMoveApply}, which this is the extended version of.
+	 *
+	 * Do not reset state here, use onMoveChange ("end").
+	 */
+	onMoveApply: (state: MoveState, forceRecalculateEdges: () => void) => ActionApplyResult
 	/**
 	 * Should return true if it should handle the "request"/event (e.g. some modifier is being pressed => user is requesting x action).
 	 *
@@ -587,6 +583,11 @@ export interface IAction {
 		/** Error texts/hints to display when the action produces an error. */
 		errors?: string[]
 	}
+	/**
+	 * Called when an action is cancelled. Call action specific onCancel hooks here.
+	 */
+	// note: internally this is done by the actionhandler wrapping the given cancel function for an event
+	cancel(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): void
 	/**
 	 * Called after visual edges are recalculated, once per edge. Action handlers can annotate edges with error info here ({@link Edge.error}).
 	 *
@@ -612,39 +613,62 @@ export type EdgeMoveStartData = { edge?: Edge, intersection?: IntersectionEntry
 export type FrameMoveStartData = { frameId: FrameId }
 
 export type ActionHandlerApplyResult = {
-	/** 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
+	// /** Whether the move should update the edges. Defaults to false which resets to the position before moving started.*/
+	updateEdges: boolean
+	/** Value to resolve the drag promise with. Ignored if `updateEdges` is false. */
+	result?: any
 }
 
+export type ActionApplyResult = ActionHandlerApplyResult & { wasApplied: boolean }
+
+export type ActionResolve = { apply: boolean, result?: any }
+
 /**
  * Handler interface for drag actions.
  */
-export interface ActionHandler {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export interface IActionHandler {
 	eventHandler: (e: KeyboardEvent, state: MoveState, 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. Note that the return only affects the move event but it's typed like this for ease of use. See also {@link MoveChangeHandler}.
+	 * Called when the drag coordinates change (during any event). Should return updateEdges true to allow the edges to be updated/moved, or false to prevent it. See also {@link MoveChangeHandler} for the built in action handler.
 	 *
 	 * Can be used to save some context/info to later apply safely during onMoveApply.
 	 *
 	 * The call order is:
 	 * - onMoveChange("start", ...)
 	 * - onMoveChange("move", ...)
+	 * - onMoveChange("end", ...)
 	 * - onMoveApply(...) (IF moveEnd was called with apply: true, otherwise this is skipped)
-	 * - onMoveChange("end", ...) // always called last, do cleanup here
+	 * 	- If anything calls cancel or resolve they call onMoveApply (cancel with apply: false, resolve with whatever apply value you gave it).
+	 * - onMoveEnded() // do cleanup here
+	 *
+	 * Note also that resolve just resolves the promise value (after onMoveApply("end") and before onMoveEnded()). Depending on what you're doing you might still have to apply the result, remember onMoveApply will still be called if you do `resolve({ apply:true })`.
 	 */
-	onMoveChange: (...args: Parameters<MoveChangeHandler>) => MoveChangeResult
+	onMoveChange<T extends "start" | "move" | "end">(
+		type: T,
+		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
+		state: MoveState,
+		forceRecalculateEdges: () => void,
+		/** Calls moveEnd with apply: false. This can technically be called from "end", it should still work. */
+		cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,
+		/** Saves result to resolve moveStart promise with then calls moveEnd with given apply. Not available during "end" event. It's designed for resolving from other external evente (e.g. key events). */
+		resolve: T extends "end" ? undefined : ((opts: ActionResolve) => void)
+	): MoveChangeResult
 	/**
 	 * Called when drag will be applied. If moveEnd 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).
+	 * Return `{updateEdges: false`} to not apply the regular drag end changes (i.e. return false to reset to the position before dragging). Optionally return a `result` value to resolve the promise with.
 	 *
-	 * Do not use for resetting handler state, use onMoveChange("end", ...) for that.
+	 * Do not use for resetting handler state, use onMoveEnded for that.
 	 */
 	onMoveApply: (
 		state: MoveState,
 		forceRecalculateEdges: () => void
 	) => ActionHandlerApplyResult
+
+	/** For doing cleanup */
+	onMoveEnded: () => void
+
 	/**
 	 * Called after visual edges are recalculated. Action handlers can annotate edges with error info.
 	 */

package/src/runtime/types/vue.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, InjectionKey, Ref } from "vue"
 
 // eslint-disable-next-line no-restricted-imports
-import type { ActionHandler, ActionHandlerApplyResult, Direction, Edge, FrameId, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, MoveState, Orientation, Point } from "./index.js"
+import type { Direction, Edge, FrameId, IActionHandler, IntersectionEntry, LayoutFrame, LayoutShape, LayoutWindow, MoveState, Orientation, Point } from "./index.js"
 
 export type LayoutContext = ComputedRef<
 	& {
@@ -15,13 +15,13 @@ export type LayoutContext = ComputedRef<
 export const layoutContextInjectionKey = Symbol.for("@witchcraft/layout:context") as InjectionKey<LayoutContext>
 
 export interface UseFramesContext {
-	actionHandler: ActionHandler
+	actionHandler: IActionHandler
 	moveStart: {
 		(e: PointerEvent, type: "edge", data: { edge?: Edge, intersection?: IntersectionEntry }, opts?: { moveEvent?: string, endEvent?: string, context?: Record<string, unknown> }): Promise<any>
 		(e: PointerEvent, type: "frame", data: { frameId: FrameId }, opts?: { moveEvent?: string, endEvent?: string, context?: Record<string, unknown> }): Promise<any>
 	}
 	onMove: (e: PointerEvent) => void
-	moveEnd: (e?: PointerEvent, options?: Partial<Pick<ActionHandlerApplyResult, "apply">>) => void
+	moveEnd: (e?: PointerEvent, options?: { apply?: boolean }) => void
 	cancel: () => void
 	moveDirections: Ref<Record<Orientation, Direction | undefined>>
 	movePoint: Ref<Point | undefined>