@witchcraft/layout 0.5.1 → 0.5.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/layout",
   "configKey": "witchcraftLayout",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "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

@@ -197,7 +197,7 @@ export function useFrames(win, handler) {
     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;
         }
@@ -208,9 +208,14 @@ export function useFrames(win, handler) {
   function cancel() {
     moveEnd(void 0, { apply: false });
   }
-  function resolve({ apply, result: value }) {
+  function resolve({ updateEdges, result: value }) {
     moveResult = value;
-    moveEnd(void 0, { apply });
+    if (updateEdges) {
+      for (const frame of touchingFramesArrays.value.flat()) {
+        win.value.frames[frame.id] = frame;
+      }
+    }
+    controller?.abort();
   }
   const keydownController = new AbortController();
   const wrappedKeydownHandler = (e) => {

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,20 +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: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void, resolve: T extends "end" ? undefined : (opts: ActionHandlerApplyResult) => void): MoveChangeResult;
+    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;
-    onMoveApply(state: MoveState, forceRecalculateEdges: () => void): ActionHandlerApplyResult;
-    cancel(e: PointerEvent | KeyboardEvent | undefined, state: MoveState): 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

@@ -84,12 +84,29 @@ export class ActionHandler {
     this.shapes.splice(0, this.shapes.length, ...res.shapes);
     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 = [];
@@ -121,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,7 +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

@@ -164,9 +164,9 @@ 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.hooks.onCancel?.();

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

@@ -123,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);
@@ -136,7 +136,7 @@ export class FrameDragAction {
         ActionHandler.debugState(this.name, "after", state, this.state, this.debug);
       }
     }
-    return true;
+    return { updateEdges: false, wasApplied: true };
   }
   onMoveEnded() {
     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,7 +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

@@ -171,7 +171,7 @@ export class SplitAction {
         }
       }
     }
-    return true;
+    return { updateEdges: false, wasApplied: true };
   }
   onMoveEnded() {
     this.reset();

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. 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 : ({ 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.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, updates edges if you passed updateEdges then aborts the handler (only onMoveEnded will fire after) . 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).
      *
@@ -2010,18 +2003,21 @@ 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;
+    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 = ActionHandlerApplyResult;
 /**
  * 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. See also {@link MoveChangeHandler} for the built in action handler.
+     * 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.
      *
@@ -2030,12 +2026,16 @@ export interface ActionHandler {
      * - onMoveChange("move", ...)
      * - onMoveChange("end", ...)
      * - onMoveApply(...) (IF moveEnd was called with apply: true, otherwise this is skipped)
-     * - onMoveEnded() // do cleanup here
+     * - onMoveEnded() // do cleanup here, always called at the very end
      */
-    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, updates edges if you passed updateEdges then aborts the handler (only onMoveEnded will fire after) . 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 onMoveEnded for that.
      */

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.1",
+  "version": "0.5.3",
   "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[]>([])
 
@@ -255,7 +255,7 @@ 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
@@ -266,7 +266,7 @@ export function useFrames(
 		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
 				}
@@ -281,9 +281,15 @@ export function useFrames(
 	function cancel(): void {
 		moveEnd(undefined, { apply: false })
 	}
-	function resolve({ apply, result: value }: ActionHandlerApplyResult): void {
+	function resolve({ updateEdges, result: value }: ActionResolve): void {
 		moveResult = value
-		moveEnd(undefined, { apply })
+
+		if (updateEdges) {
+			for (const frame of touchingFramesArrays.value.flat()) {
+				win!.value.frames[frame.id] = frame
+			}
+		}
+		controller?.abort()
 	}
 
 	const keydownController = new AbortController()

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
@@ -129,7 +127,7 @@ export class ActionHandler<
 		state: MoveState,
 		forceRecalculateEdges: () => void,
 		cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,
-		resolve: T extends "end" ? undefined : (opts: ActionHandlerApplyResult) => void
+		resolve: T extends "end" ? undefined : ((opts: ActionResolve) => void)
 	): MoveChangeResult {
 		if (type === "start") {
 			this.eventCanceller = cancel
@@ -150,6 +148,19 @@ export class ActionHandler<
 		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()
@@ -158,6 +169,16 @@ export class ActionHandler<
 		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 = []
@@ -195,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>
@@ -212,15 +212,15 @@ export class CloseAction implements IAction {
 		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 {

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"
 
 
@@ -187,10 +187,10 @@ export class FrameDragAction implements IAction {
 		}
 	}
 
-	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) {
@@ -201,7 +201,7 @@ 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() {

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>
@@ -219,7 +219,7 @@ export class SplitAction implements IAction {
 		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
@@ -230,7 +230,7 @@ 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 }
 	}
 
 	onMoveEnded() {

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. 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 : ({ 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.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, updates edges if you passed updateEdges then aborts the handler (only onMoveEnded will fire after) . 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).
 	 *
@@ -617,19 +613,25 @@ 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 = ActionHandlerApplyResult
+
 /**
  * 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. See also {@link MoveChangeHandler} for the built in action handler.
+	 * 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.
 	 *
@@ -638,12 +640,21 @@ export interface ActionHandler {
 	 * - onMoveChange("move", ...)
 	 * - onMoveChange("end", ...)
 	 * - onMoveApply(...) (IF moveEnd was called with apply: true, otherwise this is skipped)
-	 * - onMoveEnded() // do cleanup here
+	 * - onMoveEnded() // do cleanup here, always called at the very end
 	 */
-	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, updates edges if you passed updateEdges then aborts the handler (only onMoveEnded will fire after) . 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 onMoveEnded for that.
 	 */

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>