@witchcraft/layout 0.1.3 → 0.2.1

package/dist/runtime/demo/App.vue

@@ -1,16 +1,28 @@
 <template>
-<WRoot class="gap-2 p-2">
+<!-- not sure why we're needed to specify flex-col, tailwind isn't detecting the class properly in wroot maybe? -->
+<WRoot class="
+	gap-2
+	p-2
+	flex-col
+	[&_.frame-drag-ghost]:rounded-md
+">
 	<DemoControls
+		v-if="win"
 		:frames="frames"
+		:win="win"
+		:dragActionHandler="dragActionHandler"
 	/>
-	<LayoutWindow v-if="win"
-		class="
-			flex-1 w-full
+	<LayoutWindow
+		ref="layoutComponent"
+		v-if="win"
+		:class="twMerge(
+  `
+			flex-1
+			w-full
 			border-1
 			border-neutral-300
 			dark:border-neutral-700
 			rounded-md
-			flex-1
 			self-stretch
 			[&_.frame]:flex
 			[&_.frame]:flex-col
@@ -21,27 +33,35 @@
 			[&_.grabbed-edge]:bg-accent-500
 			[&.request-split_.grabbed-edge]:hidden
 			[&.request-split_.drag-edge]:hidden
+			[&.deco-split-error]:rounded-md
 			[&_.deco-split-new-frame]:rounded-md
 			[&_.deco-close-frame]:rounded-md
-			[&_.deco-close-frame]:bg-orange-500/50
-		"
-		:usage-instructions="usageInstructions"
-		instructions-teleport-to="#status-bar"
+			[&_.deco-close-frame-force]:rounded-md
+			[&_.deco-frame-drag]:rounded-md
+		`,
+  collapsedDocks.top && `border-t-2 border-t-green-500`,
+  collapsedDocks.bottom && `border-b-2 border-b-green-500`,
+  collapsedDocks.left && `border-l-2 border-l-green-500`,
+  collapsedDocks.right && `border-r-2 border-r-green-500`
+)"
+		:textHints="textHints"
+		textHintsTeleportTo="#status-bar"
 		v-model:win="win"
 		@is-showing-drag="isShowingDrag = $event"
 		@drag-state="dragState = $event"
 	>
-		<template #[`frame-${f.id}`] v-for="f in frames" :key="f.id">
+		<template #[`frame-${f.id}`] v-for="f in frames" :key="f.id" >
 			<div
+				v-if="!(f.collapsed && (f.width === 0 || f.height === 0))"
 				:data-is-active="win.activeFrame === f.id"
 				:class="twMerge(
   `
-						border-2
-						border-neutral-500
-						h-full
-						rounded-md
-						overflow-auto
-					`,
+					border-2
+					border-neutral-500
+					h-full
+					rounded-md
+					overflow-auto
+				`,
   win.activeFrame === f.id && `border-blue-500`
 )"
 				@click="win.activeFrame = f.id"
@@ -51,11 +71,41 @@
 					Set it on the first child instead, so that the frame can shrink as small as possible.
 					Too big a border can also be a problem, but usually it's small enough that it's beneath the min frame width/height allowed.
 				-->
-				<div class="p-2"> {{ debugFrame(f) }} </div>
+				<div class="p-2 flex flex-col">
+					<FrameDragHandle :frame-id="f.id">
+						<div
+							class="cursor-grab bg-neutral-200 dark:bg-neutral-700 px-2 py-1 text-xs select-none"
+						>
+							⠿ Drag to move frame
+						</div>
+					</FrameDragHandle>
+					<div class="flex gap-1 px-2 py-1 flex-wrap">
+						<button
+							v-if="f.docked && !f.collapsed"
+							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+							@click="handleUndock(f.id)"
+						>Undock</button>
+						<button
+							v-if="f.docked && !f.collapsed"
+							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+							@click="handleCollapse(f.id)"
+						>Collapse</button>
+						<button
+							v-if="f.docked && typeof f.collapsed === 'number'"
+							class="bg-neutral-200 dark:bg-neutral-700 px-2 py-0.5 text-xs rounded"
+							@click="handleUncollapse(f.id)"
+						>Uncollapse</button>
+					</div>
+					<div class="p-2 whitespace-pre-wrap">
+						{{ debugFrame(f) }}
+					</div>
+				</div>
+			</div>
+			<div v-else>
 			</div>
 		</template>
 	</LayoutWindow>
-</Wroot>
+</WRoot>
 </template>
 
 <script setup>
@@ -65,18 +115,26 @@ import { twMerge } from "@witchcraft/ui/utils/twMerge";
 import { computed, onBeforeMount, ref } from "vue";
 import DemoControls from "./DemoControls.vue";
 import { app } from "./sharedLayoutInstance.js";
+import FrameDragHandle from "../components/FrameDragHandle.vue";
 import LayoutWindow from "../components/LayoutWindow.vue";
+import { applyFrameChanges } from "../layout/applyFrameChanges.js";
 import { debugFrame } from "../layout/debugFrame.js";
+import { getFrameCollapseInfo } from "../layout/getFrameCollapseInfo.js";
+import { getFrameUncollapseInfo } from "../layout/getFrameUncollapseInfo.js";
+import { getFrameUndockInfo } from "../layout/getFrameUndockInfo.js";
 import {
   frameCreate,
   layoutAddWindow,
   windowAddFrame,
   windowCreate
 } from "../layout/index.js";
-import { getMaxInt } from "../settings.js";
-import {} from "../types/index.js";
+import { settings } from "../settings.js";
+import { throwIfError } from "@alanscodelog/utils/throwIfError";
+import { useTemplateRef } from "vue";
+import { DragActionHandler } from "../drag/DragActionHandler.js";
 const winId = ref(void 0);
 const win = computed(() => winId.value !== void 0 ? app.layout.windows[winId.value] : void 0);
+const layoutComponent = useTemplateRef("layoutComponent");
 const frames = computed(() => {
   if (!win.value) return;
   return Object.values(win.value.frames);
@@ -85,7 +143,6 @@ onBeforeMount(() => {
   layoutInitialize(app.layout);
   winId.value = keys(app.layout.windows)[0];
 });
-const isDragging = ref(false);
 function layoutInitialize(layout, { defaultPos, defaultSize } = {
   defaultPos: { x: 0, y: 0 },
   defaultSize: { width: 0, height: 0 }
@@ -99,7 +156,7 @@ function layoutInitialize(layout, { defaultPos, defaultSize } = {
     })
   );
   layout.activeWindow = w.id;
-  const max = getMaxInt();
+  const max = settings.maxInt;
   const frame = windowAddFrame(w, frameCreate({
     x: 0,
     y: 0,
@@ -110,12 +167,41 @@ function layoutInitialize(layout, { defaultPos, defaultSize } = {
 }
 const isShowingDrag = ref(false);
 const dragState = ref(void 0);
-const usageInstructions = computed(() => ({
-  // names are arbitrary and don't mean anything, they just make things easier
-  // if a key is undefined, it's ignored
-  none: !dragState.value?.isDragging ? "Drag from an edge to create a new frame." : void 0,
-  split: dragState.value?.isDragging ? "Hold Alt to Split" : void 0,
-  close: dragState.value?.isDragging ? "Shift+Drag to Close" : void 0,
-  forceClose: dragState.value?.isDragging ? "Ctrl+Shift+Drag to Force Close" : void 0
-}));
+function handleUndock(frameId) {
+  const changes = throwIfError(getFrameUndockInfo(win.value, frameId));
+  DragActionHandler.debugState("undock", "before", dragState.value, {}, void 0);
+  applyFrameChanges(win.value, changes);
+  DragActionHandler.debugState("undock", "after", dragState.value, {}, void 0);
+}
+function handleCollapse(frameId) {
+  const changes = throwIfError(getFrameCollapseInfo(win.value, frameId));
+  DragActionHandler.debugState("collapse", "before", dragState.value, {}, void 0);
+  applyFrameChanges(win.value, changes);
+  DragActionHandler.debugState("collapse", "after", dragState.value, {}, void 0);
+}
+function handleUncollapse(frameId) {
+  const changes = throwIfError(getFrameUncollapseInfo(win.value, frameId));
+  DragActionHandler.debugState("uncollapse", "before", dragState.value, {}, void 0);
+  applyFrameChanges(win.value, changes);
+  DragActionHandler.debugState("uncollapse", "after", dragState.value, {}, void 0);
+}
+const textHints = computed(() => {
+  const isDragging = dragState.value?.isDragging;
+  const textHints2 = dragActionHandler.value?.textHints ?? { actions: [], errors: [] };
+  return [
+    ...!isDragging ? [{ classes: "", text: "Drag from an edge to create a new frame." }] : [],
+    ...textHints2.errors.map((_) => ({ classes: "text-red-500", text: _ })),
+    ...textHints2.actions.map((_) => ({ text: _ }))
+  ];
+});
+const collapsedDocks = computed(() => {
+  const sides = {};
+  for (const frame of Object.values(win.value?.frames ?? {})) {
+    if (frame.docked) {
+      sides[frame.docked] = true;
+    }
+  }
+  return sides;
+});
+const dragActionHandler = computed(() => layoutComponent.value?.dragActionHandler);
 </script>

package/dist/runtime/demo/DemoControls.d.vue.ts

@@ -1,6 +1,9 @@
-import type { LayoutFrame } from "../types/index.js";
+import type { LayoutFrame, LayoutWindow } from "../types/index.js";
+import type { DragActionHandler } from "../drag/DragActionHandler.js";
 type __VLS_Props = {
+    win: LayoutWindow;
     frames: LayoutFrame[];
+    dragActionHandler?: DragActionHandler<any>;
 };
 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/demo/DemoControls.vue

@@ -1,14 +1,108 @@
 <template>
-<div class="border-2 border-neutral-500 p-2 rounded-md flex">
+<div class="border-2 border-neutral-500 p-2 rounded-md flex gap-2 items-center flex-wrap">
 	<div class="">Instruction/status bar:</div>
-	<div id="status-bar" class="px-2 flex-1 overflow-x-auto scrollbar-hidden"/>
+	<div id="status-bar" class="px-2 flex-1 overflow-x-auto scrollbar-hidden whitespace-nowrap"/>
+	<WButton class="" @click="uncollapseAll" >Uncollapse All</WButton>
+	<WPopover v-model="showDevActions">
+		<template #button>
+			<WButton @click="showDevActions = !showDevActions">Dev Actions</WButton>
+		</template>
+		<template #popover>
+			<div class="flex flex-col gap-2 rounded-md w-full`">
+				<label class="text-xs">Collapse Size (%):</label>
+				<input
+					type="number"
+					class="w-full min-w-0 border border-neutral-300 dark:border-neutral-700 rounded px-1 py-0.5 text-xs bg-neutral-100 dark:bg-neutral-800"
+					:min="0"
+					:max="100"
+					:value="collapseSizeValue"
+					@input="collapseSizeValue = Number($event.target.value);
+  handleCollapseSizeChange(collapseSizeValue)"
+				/>
+				<WButton class="flex-1" @click="rotateLayoutAction">Rotate Layout</WButton>
+				<div class="p-2 flex flex-col border-neutral-500/50 border rounded-md gap-2">
+					<span>Debug:</span>
+					<div class="flex gap-2">
+						<WButton class="flex-1" @click="copyState">Copy State</WButton>
+						<WCheckbox v-model="renameFrames">Easy Ids</WCheckbox>
+					</div>
+					<label class="flex flex-col gap-2 text-sm" v-if="dragActionHandler">
+						<span>Plugin Debug Logs (true | debug path):</span>
+						<WSimpleInput v-model="debugKey" />
+					</label>
+				</div>
+			</div>
+		</template>
+	</WPopover>
 	<WDarkModeSwitcher :show-label="false"/>
 </div>
 </template>
 
 <script setup>
 import WDarkModeSwitcher from "@witchcraft/ui/components/WDarkModeSwitcher";
-defineProps({
-  frames: { type: Array, required: true }
+import WButton from "@witchcraft/ui/components/WButton";
+import WPopover from "@witchcraft/ui/components/WPopover";
+import { copy } from "@witchcraft/ui/helpers";
+import { ref, watch } from "vue";
+import { applyFrameChanges } from "../layout/applyFrameChanges.js";
+import { getFrameUncollapseInfo } from "../layout/getFrameUncollapseInfo.js";
+import { settings } from "../settings.js";
+import { throwIfError } from "@alanscodelog/utils/throwIfError";
+import { walk } from "@alanscodelog/utils/walk";
+import { rotateLayout } from "../helpers/rotateFrames.js";
+const props = defineProps({
+  win: { type: Object, required: true },
+  frames: { type: Array, required: true },
+  dragActionHandler: { type: Object, required: false }
+});
+const showDevActions = ref(false);
+const collapseSizeValue = ref(Math.round(settings.collapseSizeScaled.width / settings.maxInt * 100));
+function handleCollapseSizeChange(value) {
+  settings.collapseSize = value;
+  collapseSizeValue.value = value;
+}
+function uncollapseAll() {
+  const win = props.win;
+  if (!win) return;
+  for (const frame of Object.values(win.frames)) {
+    if (frame.docked && typeof frame.collapsed === "number") {
+      const changes = throwIfError(getFrameUncollapseInfo(win, frame.id));
+      applyFrameChanges(win, changes);
+    }
+  }
+}
+const renameFrames = ref(false);
+const rotationAngle = ref(0);
+function rotateLayoutAction() {
+  const angles = [90, 180, 270];
+  const currentIdx = angles.indexOf(rotationAngle.value);
+  const nextIdx = (currentIdx + 1) % angles.length;
+  const nextAngle = angles[nextIdx];
+  rotationAngle.value = nextAngle;
+  rotateLayout(Object.values(props.win.frames), nextAngle);
+}
+const alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
+function copyState() {
+  const clone = walk(props.win, void 0, { save: true });
+  if (renameFrames.value) {
+    const framesList = Object.values(clone.frames);
+    for (let i = 0; i < framesList.length; i++) {
+      const frame = framesList[i];
+      delete clone.frames[frame.id];
+      frame._originalId = frame.id;
+      frame.id = alphabet[i % alphabet.length].repeat(i == 0 ? 1 : Math.ceil(i / alphabet.length));
+      clone.frames[frame.id] = frame;
+    }
+  }
+  const state = JSON.stringify(clone, null, 2);
+  copy(state);
+}
+const debugKey = ref(import.meta.dev ? "state.win.frames" : "false");
+watch(debugKey, () => {
+  if (!props.dragActionHandler) return;
+  const value = debugKey.value === "true" ? true : debugKey.value === "false" ? false : debugKey.value;
+  for (const plugin of Object.values(props.dragActionHandler.actions)) {
+    plugin.debug = value;
+  }
 });
 </script>

package/dist/runtime/demo/DemoControls.vue.d.ts

@@ -1,6 +1,9 @@
-import type { LayoutFrame } from "../types/index.js";
+import type { LayoutFrame, LayoutWindow } from "../types/index.js";
+import type { DragActionHandler } from "../drag/DragActionHandler.js";
 type __VLS_Props = {
+    win: LayoutWindow;
     frames: LayoutFrame[];
+    dragActionHandler?: DragActionHandler<any>;
 };
 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/drag/CloseAction.d.ts

@@ -1,4 +1,4 @@
-import type { DragState, IDragAction } from "./types.js";
+import type { ActionDragChangeResult, DragState, IDragAction } from "./types.js";
 import { getCloseFrameInfo } from "../layout/getCloseFrameInfo.js";
 import type { CloseDeco } from "../types/index.js";
 import type { KnownError } from "../utils/KnownError.js";
@@ -10,24 +10,45 @@ export declare class CloseAction implements IDragAction {
         force: boolean;
         res: CloseInfo;
         cacheKey: string | undefined;
+        lastReturn: ActionDragChangeResult;
     } | {
         allowed: false;
         force: boolean;
         res: CloseInfo | undefined;
         cacheKey: string | undefined;
+        lastReturn: ActionDragChangeResult | undefined;
+    };
+    debug: boolean | string;
+    textHints: {
+        actions: string[];
+        errors: string[];
+    };
+    closeHints: {
+        actions: string[];
+        transformError: (e: KnownError) => string;
     };
     handleEvent: (e: PointerEvent | KeyboardEvent, state: DragState) => boolean | "force";
-    updateCloseDecos: (decos: CloseDeco[]) => void;
+    modifyDecos: (shapes: CloseDeco[]) => void;
     hooks: {
         onStart?: (active: boolean) => void;
         onCancel?: () => void;
         onError?: (e: KnownError) => void;
     };
-    constructor(handleEvent: CloseAction["handleEvent"], updateCloseDecos: CloseAction["updateCloseDecos"], hooks?: CloseAction["hooks"]);
+    constructor(handleEvent?: CloseAction["handleEvent"], 
+    /** Modify the created decos before they are rendered. */
+    modifyDecos?: CloseAction["modifyDecos"], hooks?: CloseAction["hooks"], config?: {
+        debug?: boolean | string;
+        closeHints?: Partial<CloseAction["closeHints"]>;
+    });
     reset(): void;
-    updateDecos(state: DragState): void;
+    private _getDecos;
+    setTextHints(result: true | CloseInfo | KnownError | undefined): void;
+    getTextHints(type: "start" | "move" | "end"): {
+        actions: string[];
+        errors: string[];
+    };
     canHandleRequest(e: PointerEvent | KeyboardEvent, state: DragState): boolean;
-    onDragChange(_type: "start" | "end" | "move", _e: PointerEvent | undefined, state: DragState): boolean;
+    onDragChange(_type: "start" | "end" | "move", _e: PointerEvent | undefined, state: DragState): ActionDragChangeResult;
     onDragApply(state: DragState): boolean;
     cancel(): void;
 }

package/dist/runtime/drag/CloseAction.js

@@ -1,20 +1,35 @@
+import { DragActionHandler } from "./DragActionHandler.js";
 import { dirToOrientation } from "../helpers/dirToOrientation.js";
 import { getEdgeOrientation } from "../helpers/getEdgeOrientation.js";
 import { oppositeSide } from "../helpers/oppositeSide.js";
-import { closeFrames } from "../layout/closeFrames.js";
+import { applyFrameChanges } from "../layout/applyFrameChanges.js";
 import { findFramesTouchingEdge } from "../layout/findFramesTouchingEdge.js";
 import { getCloseFrameInfo } from "../layout/getCloseFrameInfo.js";
 export class CloseAction {
   name = "close";
   state = {};
   // this is initialized by this.reset()
-  handleEvent;
-  updateCloseDecos;
-  hooks;
-  constructor(handleEvent, updateCloseDecos, hooks = {}) {
-    this.handleEvent = handleEvent;
-    this.updateCloseDecos = updateCloseDecos;
+  debug = false;
+  textHints = { actions: [], errors: [] };
+  closeHints = {
+    actions: ["Hold Shift to Close", "Hold Ctrl+Shift to Force Close"],
+    transformError: (e) => e.message
+  };
+  handleEvent = (e) => {
+    if (e.ctrlKey && e.shiftKey) {
+      return "force";
+    }
+    if (e.shiftKey) return true;
+    return false;
+  };
+  modifyDecos = () => {
+  };
+  hooks = {};
+  constructor(handleEvent, modifyDecos, hooks = {}, config) {
+    if (handleEvent !== void 0) this.handleEvent = handleEvent;
+    if (modifyDecos !== void 0) this.modifyDecos = modifyDecos;
     this.hooks = hooks;
+    if (config?.debug) this.debug = true;
     this.reset();
   }
   reset() {
@@ -22,31 +37,58 @@ export class CloseAction {
       allowed: false,
       force: false,
       res: void 0,
-      cacheKey: void 0
+      cacheKey: void 0,
+      lastReturn: void 0
     };
-    this.updateCloseDecos([]);
+    this.modifyDecos([]);
   }
-  updateDecos(state) {
-    const {
-      isDragging
-    } = state;
+  _getDecos(state) {
+    let decos = [];
+    const { isDragging } = state;
     if (isDragging && this.state.allowed && this.state.res) {
       const { force } = this.state;
-      const decos = this.state.res.deletedFrames.map((_) => ({ id: _.id, type: "close", force }));
-      this.updateCloseDecos(decos);
+      decos = this.state.res.deleted.map((_) => ({
+        id: _.id,
+        type: "close",
+        force,
+        shapes: [
+          {
+            type: "square",
+            data: { x: _.x, y: _.y, width: _.width, height: _.height },
+            attrs: {
+              class: force ? `deco-close-force-frame bg-orange-500/50` : `deco-close-frame bg-orange-500/20`
+            }
+          }
+        ]
+      }));
+    }
+    this.modifyDecos(decos);
+    return decos;
+  }
+  setTextHints(result) {
+    if (result === void 0) {
+      this.textHints.actions = [];
+      this.textHints.errors = [];
+    } else if (result instanceof Error) {
+      this.textHints.actions = [];
+      this.textHints.errors = [this.closeHints.transformError(result)];
     } else {
-      this.updateCloseDecos([]);
+      this.textHints.actions = this.closeHints.actions;
+      this.textHints.errors = [];
     }
   }
+  getTextHints(type) {
+    if (type === "end") {
+      this.setTextHints(void 0);
+    }
+    return this.textHints;
+  }
   canHandleRequest(e, state) {
     const { draggingEdges } = state;
     if (draggingEdges.length !== 1) return false;
     const res = this.handleEvent(e, state);
-    if (res === "force") {
-      this.state.force = true;
-    } else {
-      this.state.force = false;
-    }
+    this.state.force = res === "force";
+    this.setTextHints(state.isDragging === "edge" ? true : void 0);
     if (res) {
       this.hooks.onStart?.(true);
       return true;
@@ -62,10 +104,16 @@ export class CloseAction {
       draggingEdges,
       visualEdges,
       frames,
-      isDraggingFromWindowEdge
+      isDraggingFromWindowEdge,
+      dragPoint
     } = state;
     const oppositeOrientation = oppositeSide(getEdgeOrientation(draggingEdges[0]));
-    let ok = false;
+    const cacheKey = `${dragPoint?.x}-${dragPoint?.y}-${dragDirections[oppositeOrientation]}-${this.state.force}`;
+    if (this.state.allowed) {
+      if (this.state.cacheKey === cacheKey) {
+        return this.state.lastReturn;
+      }
+    }
     if (isDragging && draggingEdges.length === 1) {
       const res = findFramesTouchingEdge(
         draggingEdges[0],
@@ -80,35 +128,34 @@ export class CloseAction {
         const sizeKey = orientation === "horizontal" ? "width" : "height";
         const smallestFrameSize = Math.min(...res.map((_) => _.frame[sizeKey]));
         const frame = res.find((_) => _.frame[sizeKey] === smallestFrameSize).frame;
-        const cacheKey = `${frame.id}-${dragDirections[oppositeOrientation]}`;
-        if (this.state.allowed) {
-          if (this.state.cacheKey === cacheKey) {
-            this.updateDecos(state);
-            return true;
-          }
-        }
         const closeInfo = getCloseFrameInfo(Object.values(frames), visualEdges, frame, dragDirections[oppositeOrientation], "dir", this.state.force);
+        this.state.cacheKey = cacheKey;
+        this.setTextHints(closeInfo);
         if (!(closeInfo instanceof Error)) {
-          this.state.allowed = true;
           this.state.res = closeInfo;
-          this.state.cacheKey = cacheKey;
-          ok = true;
+          this.state.allowed = true;
         } else {
+          this.state.res = void 0;
+          this.state.allowed = false;
           this.hooks.onError?.(closeInfo);
+          return { updateEdges: true, shapes: [] };
         }
       }
     }
-    this.updateDecos(state);
-    if (!ok) {
-      this.state.allowed = false;
-    }
-    return !isDraggingFromWindowEdge;
+    const decos = this._getDecos(state);
+    this.state.lastReturn = { updateEdges: !isDraggingFromWindowEdge, shapes: decos.flatMap((_) => _.shapes) };
+    return this.state.lastReturn;
   }
   onDragApply(state) {
     if (this.state.res) {
-      const { deletedFrames, modifiedFrames } = this.state.res;
       const win = state.win;
-      closeFrames(win, deletedFrames, modifiedFrames);
+      if (this.debug) {
+        DragActionHandler.debugState(this.name, "before", state, this.state, this.debug);
+      }
+      applyFrameChanges(win, this.state.res);
+      if (this.debug) {
+        DragActionHandler.debugState(this.name, "after", state, this.state, this.debug);
+      }
       this.reset();
       return true;
     }

package/dist/runtime/drag/DragActionHandler.d.ts

@@ -1,5 +1,6 @@
-import type { RecordFromArray } from "@alanscodelog/utils";
-import type { DragChangeHandler, DragState, IDragAction } from "./types.js";
+import { type RecordFromArray } from "@alanscodelog/utils";
+import type { DragChangeHandler, DragChangeResult, DragState, IDragAction } from "./types.js";
+import type { LayoutShape } from "../types/index.js";
 /**
  * Handles the lifecycle of a drag actions {@link IDragAction} and provides additional hooks.
  *
@@ -8,8 +9,8 @@ import type { DragChangeHandler, DragState, IDragAction } from "./types.js";
 export declare class DragActionHandler<TRawDragActions extends IDragAction[], TDragActions extends RecordFromArray<TRawDragActions, "name"> = RecordFromArray<TRawDragActions, "name">> {
     activeAction?: keyof TDragActions;
     actions: TDragActions;
-    eventCanceller: (() => void) | undefined;
-    boundCancel: () => void;
+    eventCanceller: ((e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void) | undefined;
+    boundCancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void;
     defaultOnDragChange: DragChangeHandler;
     hooks: {
         /** Called while dragging during dragChange events. You can use this to update the dragging edges. */
@@ -28,15 +29,26 @@ export declare class DragActionHandler<TRawDragActions extends IDragAction[], TD
             applied: boolean;
         }) => void;
     };
-    constructor(
+    /** All action shapes merged into a single array. If using vue you can set this to a reactive array for reactivity. */
+    shapes: LayoutShape[];
+    /** All hint/error text from all actions, updated on every onDragChange. If using vue you can set this to a reactive object for reactivity. */
+    textHints: {
+        actions: string[];
+        errors: string[];
+    };
+    constructor(actions: TRawDragActions, hooks?: DragActionHandler<TRawDragActions, TDragActions>["hooks"], 
     /**
      * Default onDragChange handler for when no action can handle the request.
      *
      * Should return true to allow the edges to be moved, or false to prevent it.
      */
-    defaultOnDragChange: DragChangeHandler, actions: TRawDragActions, hooks?: DragActionHandler<TRawDragActions, TDragActions>["hooks"]);
+    defaultOnDragChange?: DragChangeHandler);
     eventHandler(e: KeyboardEvent | PointerEvent, state: DragState, forceRecalculateEdges: () => void): undefined;
-    onDragChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: DragState, forceRecalculateEdges: () => void, cancel?: () => void): boolean | undefined;
+    onDragChange<T extends "start" | "move" | "end">(type: T, e: T extends "end" ? PointerEvent | undefined : PointerEvent, state: DragState, forceRecalculateEdges: () => void, cancel: (e: PointerEvent | KeyboardEvent | undefined, state: DragState) => void): DragChangeResult;
+    setTextHints(type: "start" | "move" | "end"): void;
     onDragApply(state: DragState, forceRecalculateEdges: () => void): boolean;
-    cancel(): void;
+    cancel(e: PointerEvent | KeyboardEvent | undefined, state: DragState): void;
+    static debugState(pluginName: string, type: "before" | "after" | string, state: DragState, pluginState?: Record<string, any>, 
+    /** Object key to filter the state by, e.g. state.win.frames. If boolean is ignored. The idea is you pass this.debug and users can set this.debug to a string to filter. */
+    key?: string | boolean): void;
 }