@witchcraft/layout 0.4.3 → 0.5.0

package/dist/module.json

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

package/dist/runtime/components/FrameDragHandle.vue

@@ -9,18 +9,18 @@
 
 <script setup>
 import { inject, onBeforeUnmount } from "vue";
-import { dragContextInjectionKey } from "../types/vue.js";
+import { moveContextInjectionKey } from "../types/vue.js";
 const props = defineProps({
   frameId: { type: String, required: true }
 });
-const dragContext = inject(dragContextInjectionKey);
+const dragContext = inject(moveContextInjectionKey);
 if (!dragContext) {
   throw new Error("FrameDragHandle must be used inside a LayoutWindow and drag context returned by useFrames must be injected.");
 }
 function handlePointerDown(e) {
   e.preventDefault();
   e.stopPropagation();
-  dragContext.dragStart(e, "frame", { frameId: props.frameId });
+  dragContext.moveStart(e, "frame", { frameId: props.frameId });
 }
 onBeforeUnmount(() => {
   dragContext.cancel();

package/dist/runtime/components/LayoutDragEdgeGrabbed.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
+import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
 import { computed, inject, useAttrs } from "vue";
 import LayoutShapeRect from "./LayoutShapeRect.vue";
@@ -30,9 +30,9 @@ defineOptions({
 });
 const ctx = inject(layoutContextInjectionKey, void 0);
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
-const dragCtx = inject(dragContextInjectionKey, void 0);
+const dragCtx = inject(moveContextInjectionKey, void 0);
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
-const draggingEdge = computed(() => dragCtx.draggingEdges.value.length === 1 ? dragCtx.draggingEdges.value[0] : void 0);
+const draggingEdge = computed(() => dragCtx.movingEdges.value.length === 1 ? dragCtx.movingEdges.value[0] : void 0);
 const cssDragEdge = computed(() => {
   if (!draggingEdge.value) return [];
   return getVisualEdgesCss([draggingEdge.value], {

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

@@ -1,9 +1,9 @@
-import { type EdgeDragStartData } from "../types/index.js";
+import { type EdgeMoveStartData } from "../types/index.js";
 import type { Edge, EdgeCss } from "../types/index.js";
 type __VLS_Props = {
     edge: Edge;
     css: EdgeCss;
-    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeDragStartData) => void;
+    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/LayoutDragEdgeHandle.vue

@@ -26,7 +26,7 @@ import { twMerge } from "@witchcraft/ui/utils/twMerge";
 import { useAttrs, inject } from "vue";
 import LayoutShapeRect from "./LayoutShapeRect.vue";
 import {} from "../types/index.js";
-import { dragContextInjectionKey } from "../types/vue.js";
+import { moveContextInjectionKey } from "../types/vue.js";
 const $attrs = useAttrs();
 defineOptions({
   inheritAttrs: false
@@ -38,6 +38,6 @@ const props = defineProps({
 });
 const ctx = inject(layoutContextInjectionKey, void 0);
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
-const dragCtx = inject(dragContextInjectionKey, void 0);
+const dragCtx = inject(moveContextInjectionKey, void 0);
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
 </script>

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

@@ -1,9 +1,9 @@
-import { type EdgeDragStartData } from "../types/index.js";
+import { type EdgeMoveStartData } from "../types/index.js";
 import type { Edge, EdgeCss } from "../types/index.js";
 type __VLS_Props = {
     edge: Edge;
     css: EdgeCss;
-    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeDragStartData) => void;
+    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/LayoutDragEdges.vue

@@ -6,12 +6,12 @@
 	<slot name="handle" v-bind="{
   css: css.handle,
   edge: visualEdges[i],
-  onPointerDown: dragCtx.dragStart
+  onPointerDown: dragCtx.moveStart
 }">
 		<LayoutDragEdgeHandle
 			:css="css.handle"
 			:edge="visualEdges[i]"
-			:on-pointer-down="dragCtx.dragStart"
+			:on-pointer-down="dragCtx.moveStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{
@@ -36,16 +36,16 @@ import { isEdgeEqual } from "../helpers/isEdgeEqual.js";
 import { toRef } from "vue";
 import { cssToKey } from "../utils/cssToKey.js";
 import {} from "../types/index.js";
-import { dragContextInjectionKey } from "../types/vue.js";
+import { moveContextInjectionKey } from "../types/vue.js";
 defineOptions({
   inheritAttrs: false
 });
 const ctx = inject(layoutContextInjectionKey, void 0);
 if (!ctx) throw new Error("LayoutEdges must be used wivisible a LayoutWindow");
-const dragCtx = inject(dragContextInjectionKey, void 0);
+const dragCtx = inject(moveContextInjectionKey, void 0);
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
 const visualEdges = toRef(dragCtx, "visualEdges");
-const draggingEdge = computed(() => dragCtx.draggingEdges.value.length === 1 ? dragCtx.draggingEdges.value[0] : void 0);
+const draggingEdge = computed(() => dragCtx.movingEdges.value.length === 1 ? dragCtx.movingEdges.value[0] : void 0);
 const cssDragEdges = computed(() => {
   const handleEdges = getVisualEdgesCss(
     draggingEdge.value ? dragCtx.visualEdges.value.filter((_) => !isEdgeEqual(draggingEdge.value, _)) : dragCtx.visualEdges.value,

package/dist/runtime/components/LayoutEdgesActiveFrame.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
+import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
 import { computed, inject, useAttrs } from "vue";
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
 import LayoutShapeRect from "./LayoutShapeRect.vue";
@@ -29,7 +29,7 @@ defineOptions({
 });
 const ctx = inject(layoutContextInjectionKey, void 0);
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
-const dragCtx = inject(dragContextInjectionKey, void 0);
+const dragCtx = inject(moveContextInjectionKey, void 0);
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
 const activeFrame = computed(() => ctx.value.win.activeFrame ? dragCtx.frames.value[ctx.value.win.activeFrame] : void 0);
 </script>

package/dist/runtime/components/LayoutFrame.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup>
-import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
+import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
 import { useAttrs, inject, toRef } from "vue";
 const $attrs = useAttrs();
@@ -40,7 +40,7 @@ defineOptions({
 const emit = defineEmits(["focus"]);
 const ctx = inject(layoutContextInjectionKey, void 0);
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
-const dragCtx = inject(dragContextInjectionKey, void 0);
+const dragCtx = inject(moveContextInjectionKey, void 0);
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
 const frames = toRef(dragCtx, "frames");
 </script>

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

@@ -1,10 +1,10 @@
 import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
-import { type EdgeDragStartData } from "../types/index.js";
+import { type EdgeMoveStartData } from "../types/index.js";
 import type { IntersectionEntry } from "../types/index.js";
 type __VLS_Props = {
     css: ReturnType<typeof getIntersectionsCss>[number];
     intersection: IntersectionEntry;
-    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeDragStartData) => void;
+    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/LayoutIntersectionHandle.vue

@@ -19,7 +19,7 @@ import { twMerge } from "@witchcraft/ui/utils/twMerge";
 import LayoutShapeRect from "./LayoutShapeRect.vue";
 import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
 import {} from "../types/index.js";
-import { dragContextInjectionKey } from "../types/vue.js";
+import { moveContextInjectionKey } from "../types/vue.js";
 const $attrs = useAttrs();
 defineOptions({
   inheritAttrs: false
@@ -31,6 +31,6 @@ const props = defineProps({
 });
 const ctx = inject(layoutContextInjectionKey, void 0);
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
-const dragCtx = inject(dragContextInjectionKey, void 0);
+const dragCtx = inject(moveContextInjectionKey, void 0);
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
 </script>

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

@@ -1,10 +1,10 @@
 import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
-import { type EdgeDragStartData } from "../types/index.js";
+import { type EdgeMoveStartData } from "../types/index.js";
 import type { IntersectionEntry } from "../types/index.js";
 type __VLS_Props = {
     css: ReturnType<typeof getIntersectionsCss>[number];
     intersection: IntersectionEntry;
-    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeDragStartData) => void;
+    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeMoveStartData) => void;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/LayoutIntersections.vue

@@ -5,13 +5,13 @@
 >
 	<slot name="handler" v-bind="{
   css: css.handle,
-  onPointerDown: dragCtx.dragStart,
+  onPointerDown: dragCtx.moveStart,
   intersection: draggableIntersections[i]
 }">
 		<LayoutIntersectionHandle
 			:css="css.handle"
 			:intersection="draggableIntersections[i]"
-			:on-pointer-down="dragCtx.dragStart"
+			:on-pointer-down="dragCtx.moveStart"
 		/>
 	</slot>
 	<slot name="indicator" v-bind="{ css: css.visible, intersection: draggableIntersections[i] }">
@@ -23,7 +23,7 @@
 </template>
 
 <script setup>
-import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
+import { moveContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
 import { computed, inject } from "vue";
 import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
 import { cssToKey } from "../utils/cssToKey.js";
@@ -34,7 +34,7 @@ defineOptions({
 });
 const ctx = inject(layoutContextInjectionKey, void 0);
 if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
-const dragCtx = inject(dragContextInjectionKey, void 0);
+const dragCtx = inject(moveContextInjectionKey, void 0);
 if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
 const draggableIntersections = computed(
   () => dragCtx.intersections.value.filter((_) => !_.isWindowEdge && (_.count === 4 || _.count === 1 && _.sharesEdge))

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

@@ -1,12 +1,12 @@
-import { DragActionHandler } from "../drag/DragActionHandler";
-import { type DragState, type IDragAction } from "../types/index.js";
+import { ActionHandler } from "../move/ActionHandler";
+import { type MoveState, type IAction } from "../types/index.js";
 import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js";
 import { type LayoutWindow } from "../types/index.js";
 type __VLS_Props = {
-    /** If you really need it, you can provide your own drag action handler, note the actionHandler's prop will no longer have any effect.*/
-    dragActionHandler?: DragActionHandler<any, any>;
+    /** If you really need it, you can provide your own drag action handler (remember to markRaw it), note the actionHandler's prop will no longer have any effect.*/
+    actionHandler?: ActionHandler<any, any>;
     /** Custom drag action handlers. Falls back to default split/close/frame handlers if not provided. */
-    actionHandlers?: IDragAction[];
+    actionHandlers?: IAction[];
     textHints?: {
         text: string;
         classes?: string;
@@ -35,19 +35,19 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {
     state: import("vue").ComputedRef<{
-        dragDirections: {
+        moveDirections: {
             horizontal: "up" | "down" | "left" | "right" | undefined;
             vertical: "up" | "down" | "left" | "right" | undefined;
         };
-        dragPoint: {
+        movePoint: {
             x: number;
             y: number;
         } | undefined;
-        dragDistance: number;
-        isDragging: false | "edge" | "frame";
-        showDragging: boolean;
-        draggingFrameId: string | undefined;
-        draggingEdges: {
+        moveDistance: number;
+        isMoving: false | "edge" | "frame";
+        showMoving: boolean;
+        movingFrameId: string | undefined;
+        movingEdges: {
             startX: number;
             startY: number;
             endX: number;
@@ -76,17 +76,17 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             } | {
                 frame: import("../types/index.js").LayoutFrame;
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
                 frame: import("../types/index.js").LayoutFrame;
             } | {
@@ -109,12 +109,14 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                 frame: import("../types/index.js").LayoutFrame;
             } | {
                 frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
             }> | {
                 code: string;
                 message: string;
             } | undefined;
         }[];
-        draggingIntersection: {
+        movingIntersection: {
             point: {
                 x: number;
                 y: number;
@@ -151,17 +153,17 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                     } | {
                         frame: import("../types/index.js").LayoutFrame;
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
                         frame: import("../types/index.js").LayoutFrame;
                     } | {
@@ -184,6 +186,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                         frame: import("../types/index.js").LayoutFrame;
                     } | {
                         frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
                     }> | {
                         code: string;
                         message: string;
@@ -218,17 +222,17 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                     } | {
                         frame: import("../types/index.js").LayoutFrame;
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
-                        draggingFrameId: string;
+                        movingFrameId: string;
                         hoveredFrameId: string;
-                        zoneSide: import("../types/index.js").DragZone["side"];
+                        zoneSide: import("../types/index.js").Zone["side"];
                     } | {
                         frame: import("../types/index.js").LayoutFrame;
                     } | {
@@ -251,6 +255,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                         frame: import("../types/index.js").LayoutFrame;
                     } | {
                         frame: import("../types/index.js").LayoutFrame;
+                    } | {
+                        frame: import("../types/index.js").LayoutFrame;
                     }> | {
                         code: string;
                         message: string;
@@ -288,17 +294,17 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
             } | {
                 frame: import("../types/index.js").LayoutFrame;
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
-                draggingFrameId: string;
+                movingFrameId: string;
                 hoveredFrameId: string;
-                zoneSide: import("../types/index.js").DragZone["side"];
+                zoneSide: import("../types/index.js").Zone["side"];
             } | {
                 frame: import("../types/index.js").LayoutFrame;
             } | {
@@ -321,6 +327,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
                 frame: import("../types/index.js").LayoutFrame;
             } | {
                 frame: import("../types/index.js").LayoutFrame;
+            } | {
+                frame: import("../types/index.js").LayoutFrame;
             }> | {
                 code: string;
                 message: string;
@@ -329,25 +337,26 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
         touchingFrames: Record<string, import("../types/index.js").LayoutFrame>[];
         touchingFramesArrays: import("../types/index.js").LayoutFrame[][];
         frames: import("../types/index.js").LayoutFrames;
-        dragHoveredFrame: import("../types/index.js").LayoutFrame | undefined;
+        moveHoveredFrame: import("../types/index.js").LayoutFrame | undefined;
         intersections: import("../types/index.js").IntersectionEntry[];
-        isDraggingFromWindowEdge: boolean;
+        isMovingFromWindowEdge: boolean;
+        eventContext: Record<string, unknown> | undefined;
         win: import("../types/index.js").BaseLayoutWindow;
     }>;
     win: import("vue").ModelRef<import("../types/index.js").BaseLayoutWindow, string, import("../types/index.js").BaseLayoutWindow, import("../types/index.js").BaseLayoutWindow>;
     getUpdateWindowSizeInfo: typeof getUpdateWindowSizeInfo;
-    dragActionHandler: DragActionHandler<any, any>;
+    actionHandler: ActionHandler<any, any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:win": (value: import("../types/index.js").BaseLayoutWindow) => any;
 } & {
-    isShowingDrag: (value: boolean) => any;
-    dragState: (value: DragState) => any;
+    isShowingMove: (value: boolean) => any;
+    moveState: (value: MoveState) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onIsShowingDrag?: ((value: boolean) => any) | undefined;
-    onDragState?: ((value: DragState) => any) | undefined;
+    onIsShowingMove?: ((value: boolean) => any) | undefined;
+    onMoveState?: ((value: MoveState) => any) | undefined;
     "onUpdate:win"?: ((value: import("../types/index.js").BaseLayoutWindow) => any) | undefined;
 }>, {
-    actionHandlers: IDragAction[];
+    actionHandlers: IAction[];
     textHints: {
         text: string;
         classes?: string;

package/dist/runtime/components/LayoutWindow.vue

@@ -7,7 +7,7 @@
 			flex
 			flex-col
 		`,
-  isDragging && `dragging cursor-pointer user-select-none`,
+  isMoving && `dragging cursor-pointer user-select-none pointer-events-none`,
   requestType && `request-${requestType}`,
   $attrs.class
 )"
@@ -23,21 +23,21 @@
 		</template>
 	</div>
 	<Teleport
-		v-if="isDragging === 'frame' && frameDragFrameId && dragPoint"
+		v-if="isMoving === 'frame' && movingFrameId && movePoint"
 		:to="ghostTeleportTo"
 		defer
 	>
 		<div
 			class="fixed z-[9999] pointer-events-none"
 			:style="{
-  left: dragPoint.x / settings.maxInt * win.pxWidth + win.pxX + 'px',
-  top: dragPoint.y / settings.maxInt * win.pxHeight + win.pxY + 'px',
-  width: frames[frameDragFrameId] ? frames[frameDragFrameId].width / settings.maxInt * win.pxWidth + 'px' : void 0,
-  height: frames[frameDragFrameId] ? frames[frameDragFrameId].height / settings.maxInt * win.pxHeight + 'px' : void 0
+  left: movePoint.x / settings.maxInt * win.pxWidth + win.pxX + 'px',
+  top: movePoint.y / settings.maxInt * win.pxHeight + win.pxY + 'px',
+  width: frames[movingFrameId] ? frames[movingFrameId].width / settings.maxInt * win.pxWidth + 'px' : void 0,
+  height: frames[movingFrameId] ? frames[movingFrameId].height / settings.maxInt * win.pxHeight + 'px' : void 0
 }"
 		>
 			<slot
-				:id="frameDragFrameId"
+				:id="movingFrameId"
 				:name="`frame-drag-ghost`"
 			>
 				<div class="frame-drag-ghost border border-neutral-500 bg-white/50 w-10 h-10"/>
@@ -67,11 +67,11 @@
 <script setup>
 import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver";
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
-import { computed, provide, reactive, ref, useAttrs, watch } from "vue";
+import { computed, markRaw, provide, reactive, ref, useAttrs, watch } from "vue";
 import { useFrames } from "../composables/useFrames.js";
-import { createDefaultHandlers } from "../drag/createDefaultHandlers.js";
-import { DragActionHandler } from "../drag/DragActionHandler";
-import { dragContextInjectionKey } from "../types/vue.js";
+import { createDefaultHandlers } from "../move/createDefaultHandlers.js";
+import { ActionHandler } from "../move/ActionHandler";
+import { moveContextInjectionKey } from "../types/vue.js";
 import {} from "../types/index.js";
 import { getUpdateWindowSizeInfo } from "../layout/getUpdateWindowSizeInfo.js";
 import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js";
@@ -82,23 +82,23 @@ import { applyFrameChanges } from "../layout/applyFrameChanges.js";
 const $attrs = useAttrs();
 const win = defineModel("win", { type: Object, ...{ required: true } });
 const props = defineProps({
-  dragActionHandler: { type: Object, required: false },
+  actionHandler: { type: Object, required: false },
   actionHandlers: { type: Array, required: false, default: void 0 },
   textHints: { type: Array, required: false, default: () => [] },
   textHintsTeleportTo: { type: null, required: true, default: void 0 },
   ghostTeleportTo: { type: String, required: false, default: "#root" },
   allowWindowSizeUpdate: { type: Boolean, required: false, default: true }
 });
-const emit = defineEmits(["isShowingDrag", "dragState"]);
+const emit = defineEmits(["isShowingMove", "moveState"]);
 const windowEl = ref(null);
 const requestType = ref();
-const dragActionHandler = props.dragActionHandler ?? new DragActionHandler(
+const actionHandler = props.actionHandler ?? markRaw(new ActionHandler(
   [
     ...props.actionHandlers ?? createDefaultHandlers()
   ],
   {
     onEvent: (e, cancel) => {
-      showDragging.value = true;
+      showMoving.value = true;
       if (e instanceof KeyboardEvent && e.key === "Escape") {
         cancel();
       }
@@ -108,26 +108,26 @@ const dragActionHandler = props.dragActionHandler ?? new DragActionHandler(
     },
     onEnd: () => {
       requestType.value = void 0;
-      showDragging.value = true;
+      showMoving.value = true;
     }
   }
-);
-dragActionHandler.shapes = reactive([]);
-dragActionHandler.textHints = reactive({ actions: [], errors: [] });
-const shapes = dragActionHandler.shapes;
+));
+actionHandler.shapes = reactive([]);
+actionHandler.textHints = reactive({ actions: [], errors: [] });
+const shapes = actionHandler.shapes;
 const dragContext = useFrames(
   win,
-  dragActionHandler
+  actionHandler
 );
 const {
-  dragPoint,
-  isDragging,
+  movePoint,
+  isMoving,
   frames,
   state,
-  frameDragFrameId,
-  showDragging
+  movingFrameId,
+  showMoving
 } = dragContext;
-provide(dragContextInjectionKey, dragContext);
+provide(moveContextInjectionKey, dragContext);
 function getWindowOffset() {
   const windowElRect = windowEl.value.getBoundingClientRect();
   return {
@@ -155,8 +155,8 @@ watch(() => props.allowWindowSizeUpdate, (newval, oldval) => {
     onWindowResize();
   }
 });
-watch(state, () => emit("dragState", state.value));
-watch(showDragging, () => emit("isShowingDrag", showDragging.value));
+watch(state, () => emit("moveState", state.value));
+watch(showMoving, () => emit("isShowingMove", showMoving.value));
 const layoutContext = computed(() => {
   return {
     win: win.value,
@@ -169,6 +169,6 @@ defineExpose({
   state,
   win,
   getUpdateWindowSizeInfo,
-  dragActionHandler
+  actionHandler
 });
 </script>