@witchcraft/layout 0.5.5 → 0.5.7

package/README.md

@@ -79,6 +79,36 @@ declare module "@witchcraft/layout" {
 ```
 Note that `zFrameId` and `zWinId` are different as they also support constants (`zFrameIdConstants` and `zWindowIdConstants`).
 
+#### Extending Move Types
+
+You can also extend the move types. This is usually needed for creating custom actions.
+
+Unlike frame types, this uses a pattern where you can extend as many times as you want so long as the key is prefixed with `LayoutMove` and the type satisfies `{ type: string, context: any, resolve: any, moveType: "edge" | "frame" | "other" }`.
+
+
+```ts
+
+declare module "@witchcraft/layout" {
+	interface Register {
+		LayoutMovePicker: {
+			// used to discriminate the type
+			type: "picker",
+			// any other props to add to the context parameter of moveStart
+			// context ends up typed as { type: "picker", someState: string }
+			context: {
+				someState: string
+			}
+			// promise resolve value, for typing the return value of moveStart
+			resolve: string
+			// for typing the type parameter of moveStart so user picks supported types
+			moveType: "other",
+		}
+	}
+}
+```
+
+`moveStart`'s context parameter will now be type checked as `{someState: string, type: "picker"}` and the return value will be `Promise<string>`.
+
 ## Basics
 
 A layout is very simple, and looks like this:

package/dist/module.json

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

package/dist/module.mjs

@@ -17,6 +17,7 @@ const module$1 = defineNuxtModule({
     addTemplate({
       filename: "witchcraft-layout.css",
       write: true,
+      // keep in sync with demo tailwind.css's relevant section
       getContents: () => [
         `@source "${resolve("runtime/components")}";`,
         // the drag actions handlers and utils they use add some styles

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

@@ -44,7 +44,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             y: number;
         } | undefined;
         moveDistance: number;
-        isMoving: false | "edge" | "frame";
+        isMoving: false | "edge" | "frame" | "other";
         showMoving: boolean;
         movingFrameId: string | undefined;
         movingEdges: {
@@ -347,11 +347,19 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     getUpdateWindowSizeInfo: typeof getUpdateWindowSizeInfo;
     actionHandler: ActionHandler<any, any>;
     moveContext: {
-        moveStart: <T extends "edge" | "frame">(e: PointerEvent, type: T, data: T extends "edge" ? import("../types/index.js").EdgeMoveStartData : import("../types/index.js").FrameMoveStartData, { moveEvent, endEvent, context }?: {
+        moveStart: <T extends "edge" | "frame" | "other", TContextType extends keyof import("../types/index.js").ExtendedMoveTypes, TContext extends import("../types/index.js").ExtendedMoveTypes[TContextType], TContextReturn extends TContext extends {
+            resolve: infer R;
+        } ? R : never, TContextMoveType extends TContext extends {
+            moveType: infer M;
+        } ? M : never, TContextContext extends TContext extends {
+            context: infer C;
+        } ? C : never>(e: PointerEvent | undefined, type: TContextMoveType extends never ? T : TContextMoveType, data: T extends "edge" ? import("../types/index.js").EdgeMoveStartData : T extends "frame" ? import("../types/index.js").FrameMoveStartData : undefined, { moveEvent, endEvent, context }?: {
             moveEvent?: string;
             endEvent?: string;
-            context?: Record<string, unknown>;
-        }) => Promise<any>;
+            context?: {
+                type: TContextType;
+            } & TContextContext;
+        }) => TContext extends never ? Promise<void> : Promise<TContextReturn>;
         moveEnd: (e?: PointerEvent, { apply }?: {
             apply?: boolean;
         }) => void;
@@ -371,7 +379,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             x: number;
             y: number;
         } | undefined>;
-        isMoving: import("vue").Ref<false | "edge" | "frame", false | "edge" | "frame">;
+        isMoving: import("vue").Ref<false | "edge" | "frame" | "other", false | "edge" | "frame" | "other">;
         movingEdges: import("vue").Ref<{
             startX: number;
             startY: number;
@@ -1096,7 +1104,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                 y: number;
             } | undefined;
             moveDistance: number;
-            isMoving: false | "edge" | "frame";
+            isMoving: false | "edge" | "frame" | "other";
             showMoving: boolean;
             movingFrameId: string | undefined;
             movingEdges: {

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

@@ -44,7 +44,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             y: number;
         } | undefined;
         moveDistance: number;
-        isMoving: false | "edge" | "frame";
+        isMoving: false | "edge" | "frame" | "other";
         showMoving: boolean;
         movingFrameId: string | undefined;
         movingEdges: {
@@ -347,11 +347,19 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     getUpdateWindowSizeInfo: typeof getUpdateWindowSizeInfo;
     actionHandler: ActionHandler<any, any>;
     moveContext: {
-        moveStart: <T extends "edge" | "frame">(e: PointerEvent, type: T, data: T extends "edge" ? import("../types/index.js").EdgeMoveStartData : import("../types/index.js").FrameMoveStartData, { moveEvent, endEvent, context }?: {
+        moveStart: <T extends "edge" | "frame" | "other", TContextType extends keyof import("../types/index.js").ExtendedMoveTypes, TContext extends import("../types/index.js").ExtendedMoveTypes[TContextType], TContextReturn extends TContext extends {
+            resolve: infer R;
+        } ? R : never, TContextMoveType extends TContext extends {
+            moveType: infer M;
+        } ? M : never, TContextContext extends TContext extends {
+            context: infer C;
+        } ? C : never>(e: PointerEvent | undefined, type: TContextMoveType extends never ? T : TContextMoveType, data: T extends "edge" ? import("../types/index.js").EdgeMoveStartData : T extends "frame" ? import("../types/index.js").FrameMoveStartData : undefined, { moveEvent, endEvent, context }?: {
             moveEvent?: string;
             endEvent?: string;
-            context?: Record<string, unknown>;
-        }) => Promise<any>;
+            context?: {
+                type: TContextType;
+            } & TContextContext;
+        }) => TContext extends never ? Promise<void> : Promise<TContextReturn>;
         moveEnd: (e?: PointerEvent, { apply }?: {
             apply?: boolean;
         }) => void;
@@ -371,7 +379,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             x: number;
             y: number;
         } | undefined>;
-        isMoving: import("vue").Ref<false | "edge" | "frame", false | "edge" | "frame">;
+        isMoving: import("vue").Ref<false | "edge" | "frame" | "other", false | "edge" | "frame" | "other">;
         movingEdges: import("vue").Ref<{
             startX: number;
             startY: number;
@@ -1096,7 +1104,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                 y: number;
             } | undefined;
             moveDistance: number;
-            isMoving: false | "edge" | "frame";
+            isMoving: false | "edge" | "frame" | "other";
             showMoving: boolean;
             movingFrameId: string | undefined;
             movingEdges: {

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

@@ -1,11 +1,19 @@
 import type { Ref } from "vue";
-import type { EdgeMoveStartData, FrameMoveStartData, IActionHandler, IntersectionEntry, LayoutFrame, LayoutWindow } from "../types/index.js";
+import type { EdgeMoveStartData, ExtendedMoveTypes, 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 }?: {
+    moveStart: <T extends "edge" | "frame" | "other", TContextType extends keyof ExtendedMoveTypes, TContext extends ExtendedMoveTypes[TContextType], TContextReturn extends TContext extends {
+        resolve: infer R;
+    } ? R : never, TContextMoveType extends TContext extends {
+        moveType: infer M;
+    } ? M : never, TContextContext extends TContext extends {
+        context: infer C;
+    } ? C : never>(e: PointerEvent | undefined, type: TContextMoveType extends never ? T : TContextMoveType, data: T extends "edge" ? EdgeMoveStartData : T extends "frame" ? FrameMoveStartData : undefined, { moveEvent, endEvent, context }?: {
         moveEvent?: string;
         endEvent?: string;
-        context?: Record<string, unknown>;
-    }) => Promise<any>;
+        context?: {
+            type: TContextType;
+        } & TContextContext;
+    }) => TContext extends never ? Promise<void> : Promise<TContextReturn>;
     moveEnd: (e?: PointerEvent, { apply }?: {
         apply?: boolean;
     }) => void;
@@ -25,7 +33,7 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: IActionHandle
         x: number;
         y: number;
     } | undefined>;
-    isMoving: Ref<false | "edge" | "frame", false | "edge" | "frame">;
+    isMoving: Ref<false | "edge" | "frame" | "other", false | "edge" | "frame" | "other">;
     movingEdges: Ref<{
         startX: number;
         startY: number;
@@ -750,7 +758,7 @@ export declare function useFrames(win: Ref<LayoutWindow>, handler: IActionHandle
             y: number;
         } | undefined;
         moveDistance: number;
-        isMoving: false | "edge" | "frame";
+        isMoving: false | "edge" | "frame" | "other";
         showMoving: boolean;
         movingFrameId: string | undefined;
         movingEdges: {

package/dist/runtime/composables/useFrames.js

@@ -117,19 +117,21 @@ export function useFrames(win, handler) {
     });
     controller = new AbortController();
     controller.signal.addEventListener("abort", () => resetState());
-    e.preventDefault();
+    e?.preventDefault();
     window.addEventListener(moveEvent, onMove, { signal: controller.signal });
     window.addEventListener(endEvent, moveEnd, { signal: controller.signal });
-    const point = toWindowCoord(win.value, e);
-    movePoint.value = point;
-    moveStartPoint = { ...point };
-    moveDirStore.update(point);
+    if (e) {
+      const point = toWindowCoord(win.value, e);
+      movePoint.value = point;
+      moveStartPoint = { ...point };
+      moveDirStore.update(point);
+    }
     eventContext.value = context;
     isMoving.value = type;
     showMoving.value = true;
     if (type === "frame") {
       movingFrameId.value = data.frameId;
-    } else {
+    } else if (type === "edge") {
       const { edge, intersection } = data;
       movingIntersection.value = intersection;
       movingEdges.value = edge ? [edge] : [

package/dist/runtime/demo/tailwind.css

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

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

@@ -44,7 +44,7 @@ export declare class ActionHandler<TRawActions extends IAction[], TActions exten
      */
     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: ActionResolve) => void)): MoveChangeResult;
+    onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" | "start" ? 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;

package/dist/runtime/move/CloseAction.js

@@ -99,7 +99,7 @@ export class CloseAction {
     return false;
   }
   onMoveChange(type, _e, state) {
-    if (state.moveDistance <= this.minDragDistance) {
+    if (type === "end" || state.moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [] };
     }
     const {
@@ -150,7 +150,7 @@ export class CloseAction {
     const decos = this._getDecos(state);
     this.state.lastReturn = {
       updateEdges: !isMovingFromWindowEdge,
-      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes)
+      shapes: decos.flatMap((_) => _.shapes)
     };
     return this.state.lastReturn;
   }

package/dist/runtime/move/FrameDragAction.js

@@ -94,7 +94,7 @@ export class FrameDragAction {
     return false;
   }
   onMoveChange(type, _e, state) {
-    if (state.moveDistance <= this.minDragDistance) {
+    if (type === "start" || state.moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [], showMoving: false };
     }
     const { win, movingFrameId, moveHoveredFrame } = state;

package/dist/runtime/move/SplitAction.js

@@ -120,7 +120,7 @@ export class SplitAction {
   }
   onMoveChange(type, _e, state) {
     const { moveHoveredFrame, moveDistance } = state;
-    if (moveDistance <= this.minDragDistance) {
+    if (type === "end" || moveDistance <= this.minDragDistance) {
       return { updateEdges: false, shapes: [], showMoving: false };
     }
     let ok = false;
@@ -145,7 +145,7 @@ export class SplitAction {
         };
         this.state.lastReturn = {
           updateEdges: true,
-          shapes: type === "end" ? [] : [errorDeco],
+          shapes: [errorDeco],
           showMoving: false
         };
         return this.state.lastReturn;
@@ -153,7 +153,7 @@ export class SplitAction {
     }
     this.state.lastReturn = {
       updateEdges: false,
-      shapes: type === "end" ? [] : decos.flatMap((_) => _.shapes),
+      shapes: decos.flatMap((_) => _.shapes),
       showMoving: false
     };
     return this.state.lastReturn;

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

@@ -1,4 +1,5 @@
 import type { EnumLike } from "@alanscodelog/utils";
+import type { Flatten, OrToAnd } from "@alanscodelog/utils/types";
 import { z } from "zod";
 import { KnownError } from "../utils/KnownError.js";
 export declare const zUuid: z.ZodUUID;
@@ -1843,6 +1844,12 @@ export type LayoutChange<TInfo = never> = {
     window?: Partial<LayoutWindow>;
     info?: TInfo;
 };
+export type ExtendedMoveTypes = Flatten<OrToAnd<keyof Register extends `LayoutMove${infer T}` ? Register extends Record<`LayoutMove${T}`, infer U> ? U extends {
+    type: string;
+    context: any;
+    resolve: any;
+    moveType: "edge" | "frame" | "other";
+} ? Record<U["type"], U> : never : never : never>>;
 export type MoveState = {
     /** The current directions in the corresponding orientations that the user is dragging in. */
     moveDirections: Record<Orientation, Direction | undefined>;
@@ -1850,8 +1857,12 @@ export type MoveState = {
     movePoint?: Point;
     /** Cumulative pixel distance the user has dragged from the initial click point. 0 on start, increases on each move. */
     moveDistance: number;
-    /** Whether the user is currently dragging and what type of drag. Is truthy string during all drag events. */
-    isMoving: boolean | "frame" | "edge";
+    /**
+     * Whether the user is currently moving and what type of move. Is truthy string during all move events. The actions decide what they need to set it to as "frame" and "edge" have custom behavior.
+     *
+     * Other is for actions that do things other than drag frames/edges which include built in behavior (e.g. frames get a frame dragging indicator at the cursor)
+     */
+    isMoving: boolean | "frame" | "edge" | "other";
     /** Whether to show the moved frames while dragging. */
     showMoving: boolean;
     /** The frame being dragged during a frame drag. Only set when isMoving is "frame". */
@@ -1926,7 +1937,7 @@ export interface IAction {
      *
      * 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, 
+    onMoveChange: <T extends "start" | "move" | "end">(type: T, e: T extends "end" | "start" ? 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). */
@@ -2028,7 +2039,7 @@ export interface IActionHandler {
      * - onMoveApply(...) (IF moveEnd was called with apply: true, otherwise this is skipped)
      * - onMoveEnded() // do cleanup here, always called at the very end
      */
-    onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: MoveState, forceRecalculateEdges: () => void, 
+    onMoveChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" | "start" ? 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). */

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

@@ -33,7 +33,7 @@ export interface UseFramesContext {
     cancel: () => void;
     moveDirections: Ref<Record<Orientation, Direction | undefined>>;
     movePoint: Ref<Point | undefined>;
-    isMoving: Ref<false | "frame" | "edge">;
+    isMoving: Ref<false | "frame" | "edge" | "other">;
     movingEdges: Ref<Edge[]>;
     movingIntersection: Ref<IntersectionEntry | undefined>;
     visualEdges: Ref<Edge[]>;

package/package.json

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

package/src/module.ts

@@ -35,6 +35,7 @@ export default defineNuxtModule<ModuleOptions>({
 		addTemplate({
 			filename: "witchcraft-layout.css",
 			write: true,
+			// keep in sync with demo tailwind.css's relevant section
 			getContents: () => [
 				`@source "${resolve("runtime/components")}";`,
 				// the drag actions handlers and utils they use add some styles

package/src/runtime/composables/useFrames.ts

@@ -12,7 +12,23 @@ 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 { ActionResolve, Direction, Edge, EdgeMoveStartData, FrameId, FrameMoveStartData, IActionHandler, IntersectionEntry, LayoutFrame, LayoutWindow, MoveState, Orientation, Point } from "../types/index.js"
+import type {
+	ActionResolve,
+	Direction,
+	Edge,
+	EdgeMoveStartData,
+	ExtendedMoveTypes,
+	FrameId,
+	FrameMoveStartData,
+	IActionHandler,
+	IntersectionEntry,
+	LayoutFrame,
+	LayoutWindow,
+	MoveState,
+	Orientation,
+	Point
+} from "../types/index.js"
+
 
 export function useFrames(
 	win: Ref<LayoutWindow>,
@@ -34,7 +50,7 @@ export function useFrames(
 
 	const touchingFramesArrays = computed(() => touchingFrames.value.map(entry => Object.values(entry)))
 
-	const isMoving = ref<false | "frame" | "edge">(false)
+	const isMoving = ref<false | "frame" | "edge" | "other">(false)
 	const showMoving = ref(false)
 	const movePoint = ref<Point | undefined>()
 
@@ -137,11 +153,18 @@ export function useFrames(
 		handler.onMoveEnded()
 	}
 
-	function moveStart<T extends "edge" | "frame">(
-		e: PointerEvent,
-		type: T,
+	function moveStart<
+		T extends "edge" | "frame" | "other",
+		TContextType extends keyof ExtendedMoveTypes,
+		TContext extends ExtendedMoveTypes[TContextType],
+		TContextReturn extends TContext extends { resolve: infer R } ? R : never,
+		TContextMoveType extends TContext extends { moveType: infer M } ? M : never,
+		TContextContext extends TContext extends { context: infer C } ? C : never
+	>(
+		e: PointerEvent | undefined,
+		type: TContextMoveType extends never ? T : TContextMoveType,
 		// someday this will work
-		data: T extends "edge" ? EdgeMoveStartData : FrameMoveStartData,
+		data: T extends "edge" ? EdgeMoveStartData : T extends "frame" ? FrameMoveStartData : undefined,
 		{
 			moveEvent = "pointermove",
 			endEvent = "pointerup",
@@ -149,9 +172,11 @@ export function useFrames(
 		}: {
 			moveEvent?: string
 			endEvent?: string
-			context?: Record<string, unknown>
+			context?: { type: TContextType } & TContextContext
 		} = {}
-	): Promise<any> {
+	): TContext extends never
+		? Promise<void>
+		: Promise<TContextReturn> {
 		// if already dragging, abort previous (resetState resolves the old promise)
 		if (controller) {
 			controller.abort()
@@ -164,22 +189,24 @@ export function useFrames(
 		controller = new AbortController()
 		controller.signal.addEventListener("abort", () => resetState())
 
-		e.preventDefault()
+		e?.preventDefault()
 		window.addEventListener(moveEvent, onMove as EventListener, { signal: controller.signal })
 		window.addEventListener(endEvent, moveEnd as EventListener, { signal: controller.signal })
 
-		const point = toWindowCoord(win.value, e)
-		movePoint.value = point
-		moveStartPoint = { ...point }
-		moveDirStore.update(point)
+		if (e) {
+			const point = toWindowCoord(win.value, e)
+			movePoint.value = point
+			moveStartPoint = { ...point }
+			moveDirStore.update(point)
+		}
 		eventContext.value = context
 
-		isMoving.value = type
+		isMoving.value = type as any
 		showMoving.value = true
 
 		if (type === "frame") {
 			movingFrameId.value = (data as FrameMoveStartData).frameId
-		} else {
+		} else if (type === "edge") {
 			const { edge, intersection } = data as EdgeMoveStartData
 			movingIntersection.value = intersection
 
@@ -216,7 +243,7 @@ export function useFrames(
 
 		const res = handler.onMoveChange("start", e, state.value, forceRecalculateEdges, cancel, resolve)
 		showMoving.value = res.showMoving ?? true
-		return promise
+		return promise as any
 	}
 
 	function onMove(e: PointerEvent): void {

package/src/runtime/demo/tailwind.css

@@ -5,6 +5,10 @@
 
 /* Only needed for the dev playground: the demo App.vue lives outside the Vite project root, so Tailwind's auto-scan doesn't find the [&.deco-...] classes it defines. */
 @source "../../../src/runtime/demo";
+/* Only needed for the non-nuxt demo, makes sure classes are added even if .nuxt/witchcraft-layout.css is not generated or is outdated. Keep in sync with nuxt module list. */
+@source "../../../src/runtime/move";
+@source "../../../src/runtime/components";
+@source "../../../src/runtime/utils/createSplitDecoShapes";
 
 button {
 	cursor: pointer;

package/src/runtime/move/ActionHandler.ts

@@ -123,7 +123,7 @@ export class ActionHandler<
 
 	onMoveChange<T extends "start" | "move" | "end">(
 		type: T,
-		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
+		e: T extends "end" | "start" ? PointerEvent | undefined : PointerEvent,
 		state: MoveState,
 		forceRecalculateEdges: () => void,
 		cancel: (e: PointerEvent | KeyboardEvent | undefined, state: MoveState) => void,

package/src/runtime/move/CloseAction.ts

@@ -155,7 +155,7 @@ export class CloseAction implements IAction {
 		_e: PointerEvent | undefined,
 		state: MoveState
 	): ActionChangeResult {
-		if (state.moveDistance <= this.minDragDistance) {
+		if (type === "end" || state.moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [] }
 		}
 		const {
@@ -207,7 +207,7 @@ export class CloseAction implements IAction {
 		const decos = this._getDecos(state)
 		this.state.lastReturn = {
 			updateEdges: !isMovingFromWindowEdge,
-			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes)
+			shapes: decos.flatMap(_ => _.shapes)
 		}
 		return this.state.lastReturn
 	}

package/src/runtime/move/FrameDragAction.ts

@@ -155,7 +155,7 @@ export class FrameDragAction implements IAction {
 		_e: PointerEvent | undefined,
 		state: MoveState
 	): ActionChangeResult {
-		if (state.moveDistance <= this.minDragDistance) {
+		if (type === "start" || state.moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [], showMoving: false }
 		}
 		const { win, movingFrameId, moveHoveredFrame } = state

package/src/runtime/move/SplitAction.ts

@@ -179,7 +179,7 @@ export class SplitAction implements IAction {
 		state: MoveState
 	): ActionChangeResult {
 		const { moveHoveredFrame, moveDistance } = state
-		if (moveDistance <= this.minDragDistance) {
+		if (type === "end" || moveDistance <= this.minDragDistance) {
 			return { updateEdges: false, shapes: [], showMoving: false }
 		}
 		let ok = false
@@ -205,7 +205,7 @@ export class SplitAction implements IAction {
 				}
 				this.state.lastReturn = {
 					updateEdges: true,
-					shapes: type === "end" ? [] : [errorDeco],
+					shapes: [errorDeco],
 					showMoving: false
 				}
 				return this.state.lastReturn
@@ -213,7 +213,7 @@ export class SplitAction implements IAction {
 		}
 		this.state.lastReturn = {
 			updateEdges: false,
-			shapes: type === "end" ? [] : decos.flatMap(_ => _.shapes),
+			shapes: decos.flatMap(_ => _.shapes),
 			showMoving: false
 		}
 		return this.state.lastReturn

package/src/runtime/types/index.ts

@@ -1,5 +1,6 @@
 import type { EnumLike } from "@alanscodelog/utils"
 import { enumFromArray } from "@alanscodelog/utils/enumFromArray"
+import type { Flatten, OrToAnd } from "@alanscodelog/utils/types"
 import { z } from "zod"
 
 import { KnownError } from "../utils/KnownError.js"
@@ -441,6 +442,22 @@ export type LayoutChange<TInfo = never> = {
 	window?: Partial<LayoutWindow>
 	info?: TInfo
 }
+
+
+// #todo we also need to change how the normal types are extended to this pattern
+export type ExtendedMoveTypes = Flatten<OrToAnd<keyof Register extends `LayoutMove${infer T}`
+	? Register extends Record<`LayoutMove${T}`, infer U>
+		? U extends {
+			type: string
+			context: any
+			resolve: any
+			moveType: "edge" | "frame" | "other"
+		}
+			? Record<U["type"], U>
+			: never
+		: never
+	: never>>
+
 export type MoveState = {
 	/** The current directions in the corresponding orientations that the user is dragging in. */
 	moveDirections: Record<Orientation, Direction | undefined>
@@ -448,8 +465,12 @@ export type MoveState = {
 	movePoint?: Point
 	/** Cumulative pixel distance the user has dragged from the initial click point. 0 on start, increases on each move. */
 	moveDistance: number
-	/** Whether the user is currently dragging and what type of drag. Is truthy string during all drag events. */
-	isMoving: boolean | "frame" | "edge"
+	/**
+	 * Whether the user is currently moving and what type of move. Is truthy string during all move events. The actions decide what they need to set it to as "frame" and "edge" have custom behavior.
+	 *
+	 * Other is for actions that do things other than drag frames/edges which include built in behavior (e.g. frames get a frame dragging indicator at the cursor)
+	 */
+	isMoving: boolean | "frame" | "edge" | "other"
 	/** Whether to show the moved frames while dragging. */
 	showMoving: boolean
 	/** The frame being dragged during a frame drag. Only set when isMoving is "frame". */
@@ -531,7 +552,7 @@ export interface IAction {
 	 */
 	onMoveChange: <T extends "start" | "move" | "end">(
 		type: T,
-		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
+		e: T extends "end" | "start" ? PointerEvent | undefined : PointerEvent,
 		state: MoveState,
 		forceRecalculateEdges: () => void,
 		/** Calls moveEnd with updateEdges: false. This can technically be called from "end", it should still work. */
@@ -644,7 +665,7 @@ export interface IActionHandler {
 	 */
 	onMoveChange<T extends "start" | "move" | "end">(
 		type: T,
-		e: T extends "end" ? PointerEvent | undefined : PointerEvent,
+		e: T extends "end" | "start" ? PointerEvent | undefined : PointerEvent,
 		state: MoveState,
 		forceRecalculateEdges: () => void,
 		/** Calls moveEnd with apply: false. This can technically be called from "end", it should still work. */

package/src/runtime/types/vue.ts

@@ -25,7 +25,7 @@ export interface UseFramesContext {
 	cancel: () => void
 	moveDirections: Ref<Record<Orientation, Direction | undefined>>
 	movePoint: Ref<Point | undefined>
-	isMoving: Ref<false | "frame" | "edge">
+	isMoving: Ref<false | "frame" | "edge" | "other">
 	movingEdges: Ref<Edge[]>
 	movingIntersection: Ref<IntersectionEntry | undefined>
 	visualEdges: Ref<Edge[]>
@@ -41,3 +41,4 @@ export interface UseFramesContext {
 }
 
 export const moveContextInjectionKey = Symbol.for("@witchcraft/layout:moveContext") as InjectionKey<UseFramesContext>
+