@witchcraft/layout 0.5.1 → 0.5.2

package/dist/module.json

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

@@ -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;
         }

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 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).
      *
@@ -2010,18 +2003,24 @@ 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. 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 +2029,19 @@ export interface ActionHandler {
      * - onMoveChange("move", ...)
      * - onMoveChange("end", ...)
      * - onMoveApply(...) (IF moveEnd was called with apply: true, otherwise this is skipped)
+     * 	- 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 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.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[]>([])
 
@@ -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,7 +281,8 @@ export function useFrames(
 	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
@@ -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.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).
 	 *
@@ -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 = { 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. 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,24 @@ export interface ActionHandler {
 	 * - onMoveChange("move", ...)
 	 * - onMoveChange("end", ...)
 	 * - onMoveApply(...) (IF moveEnd was called with apply: true, otherwise this is skipped)
+	 * 	- 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 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>