@vue-dnd-kit/core 0.3.0-beta → 0.5.1

package/dist/composables/useDnDStore.d.ts

@@ -236,7 +236,7 @@ export declare const useDnDStore: () => {
             __file?: string | undefined;
             __name?: string | undefined;
         } | null>;
-        ref: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        ref: import('vue').ShallowRef<HTMLElement | null, HTMLElement | null>;
     };
     elements: import('vue').Ref<{
         node: HTMLElement | Element | null;
@@ -2283,35 +2283,17 @@ export declare const useDnDStore: () => {
         } | null>;
     };
     pointerPosition: {
-        current: import('vue').Ref<{
-            x: number;
-            y: number;
-        } | null, IPoint | {
-            x: number;
-            y: number;
-        } | null>;
-        start: import('vue').Ref<{
-            x: number;
-            y: number;
-        } | null, IPoint | {
-            x: number;
-            y: number;
-        } | null>;
+        current: import('vue').ShallowRef<IPoint | null, IPoint | null>;
+        start: import('vue').ShallowRef<IPoint | null, IPoint | null>;
         offset: {
-            percent: import('vue').Ref<{
-                x: number;
-                y: number;
-            } | null, IPoint | {
-                x: number;
-                y: number;
-            } | null>;
-            pixel: import('vue').Ref<{
-                x: number;
-                y: number;
-            } | null, IPoint | {
-                x: number;
-                y: number;
-            } | null>;
+            percent: import('vue').ShallowRef<IPoint | null, IPoint | null>;
+            pixel: import('vue').ShallowRef<IPoint | null, IPoint | null>;
         };
     };
+    keyboard: {
+        w: import('vue').ShallowRef<boolean, boolean>;
+        s: import('vue').ShallowRef<boolean, boolean>;
+        a: import('vue').ShallowRef<boolean, boolean>;
+        d: import('vue').ShallowRef<boolean, boolean>;
+    };
 };

package/dist/composables/useDragContainer.d.ts

@@ -587,35 +587,11 @@ export declare const useDragContainer: () => {
         };
     }[]>;
     pointerPosition: {
-        current: import('vue').Ref<{
-            x: number;
-            y: number;
-        } | null, import('../types').IPoint | {
-            x: number;
-            y: number;
-        } | null>;
-        start: import('vue').Ref<{
-            x: number;
-            y: number;
-        } | null, import('../types').IPoint | {
-            x: number;
-            y: number;
-        } | null>;
+        current: import('vue').ShallowRef<import('..').IPoint | null, import('..').IPoint | null>;
+        start: import('vue').ShallowRef<import('..').IPoint | null, import('..').IPoint | null>;
         offset: {
-            percent: import('vue').Ref<{
-                x: number;
-                y: number;
-            } | null, import('../types').IPoint | {
-                x: number;
-                y: number;
-            } | null>;
-            pixel: import('vue').Ref<{
-                x: number;
-                y: number;
-            } | null, import('../types').IPoint | {
-                x: number;
-                y: number;
-            } | null>;
+            percent: import('vue').ShallowRef<import('..').IPoint | null, import('..').IPoint | null>;
+            pixel: import('vue').ShallowRef<import('..').IPoint | null, import('..').IPoint | null>;
         };
     };
     isDragging: import('vue').ComputedRef<boolean>;

package/dist/composables/useDraggable.d.ts

@@ -2,40 +2,16 @@ import { IUseDragOptions } from "../types";
 
 export declare const useDraggable: (options?: IUseDragOptions) => {
     pointerPosition: {
-        current: import('vue').Ref<{
-            x: number;
-            y: number;
-        } | null, import('../types').IPoint | {
-            x: number;
-            y: number;
-        } | null>;
-        start: import('vue').Ref<{
-            x: number;
-            y: number;
-        } | null, import('../types').IPoint | {
-            x: number;
-            y: number;
-        } | null>;
+        current: import('vue').ShallowRef<import('../types').IPoint | null, import('../types').IPoint | null>;
+        start: import('vue').ShallowRef<import('../types').IPoint | null, import('../types').IPoint | null>;
         offset: {
-            percent: import('vue').Ref<{
-                x: number;
-                y: number;
-            } | null, import('../types').IPoint | {
-                x: number;
-                y: number;
-            } | null>;
-            pixel: import('vue').Ref<{
-                x: number;
-                y: number;
-            } | null, import('../types').IPoint | {
-                x: number;
-                y: number;
-            } | null>;
+            percent: import('vue').ShallowRef<import('../types').IPoint | null, import('../types').IPoint | null>;
+            pixel: import('vue').ShallowRef<import('../types').IPoint | null, import('../types').IPoint | null>;
         };
     };
     elementRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     isDragging: import('vue').ComputedRef<boolean>;
     isOvered: import('vue').ComputedRef<boolean>;
     isAllowed: import('vue').ComputedRef<boolean>;
-    handleDragStart: (event: PointerEvent) => void;
+    handleDragStart: (event: PointerEvent | KeyboardEvent) => void;
 };

package/dist/composables/useKeyboard.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+
+export interface IKeyboardOptions {
+    moveStep?: number;
+}
+export declare const useKeyboard: (elementRef: Ref<HTMLElement | null>, options?: IKeyboardOptions) => {
+    onKeyboardStart: (event: KeyboardEvent) => void;
+    onKeyboardMove: () => void;
+    onKeyboardEnd: () => void;
+};

package/dist/composables/useSelection.d.ts

@@ -1,10 +1,5 @@
 import { Ref } from 'vue';
 
-/**
- * Hook for managing element selection in drag and drop interface
- * @param elementRef - Reference to the HTML element that can be selected
- * @returns Object containing selection state and handlers
- */
 export declare const useSelection: (elementRef: Ref<HTMLElement | null>) => {
     handleUnselect: () => void;
     handleSelect: () => void;

package/dist/composables/useSensor.d.ts

@@ -1,8 +1,8 @@
-import { IUseSensorOptions } from "../types";
+import { IUseDragOptions } from "../types";
 import { Ref } from 'vue';
 
-export declare const useSensor: (elementRef: Ref<HTMLElement | null>, options?: IUseSensorOptions) => {
-    activate: (event: PointerEvent) => void;
-    track: (event: PointerEvent | WheelEvent) => void;
-    deactivate: () => void;
+export declare const useSensor: (elementRef: Ref<HTMLElement | null>, options?: IUseDragOptions) => {
+    activate: (event: PointerEvent | KeyboardEvent) => void;
+    track: (event: PointerEvent | WheelEvent | KeyboardEvent) => void;
+    deactivate: (triggerEvents?: boolean) => void;
 };

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import { VueDndKitPlugin } from './plugin';
+import { getBoundingBox } from './utils/geometry';
 import { useDnDStore } from './composables/useDnDStore';
 import { useDraggable } from './composables/useDraggable';
 import { useDroppable } from './composables/useDroppable';
 import { useSelection } from './composables/useSelection';
 
 export default VueDndKitPlugin;
-export { useDraggable, useDroppable, useDnDStore, useSelection };
-export type { IDnDStore, IActiveContainer, IDragElement, IDraggingElement, IDropZone, } from './types';
+export { useDraggable, useDroppable, useDnDStore, useSelection, getBoundingBox, };
+export type { IDnDStore, IActiveContainer, IDragElement, IDraggingElement, IDropZone, IPoint, IBoundingBox, } from './types';

package/dist/managers/useElementManager.d.ts

@@ -1,13 +1,5 @@
 import { IUseDragOptions } from "../types";
 
-/**
- * Hook for managing draggable elements and their interactions.
- * Provides methods for registering, unregistering elements,
- * checking if an element is being dragged, and determining if it can be dropped.
- *
- * @param options - Optional configuration object for element management
- * @returns Object containing element management state and methods
- */
 export declare const useElementManager: (options?: IUseDragOptions) => {
     elementRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     registerElement: () => void;

package/dist/managers/useEventManager.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'vue';
+import { IUseDragOptions } from "../types";
+
+export declare const useEventManager: () => {
+    handleDragStart: (event: PointerEvent | KeyboardEvent, elementRef: Ref<HTMLElement | null>, options?: IUseDragOptions) => void;
+};

package/dist/types/index.d.ts

@@ -72,7 +72,7 @@ export interface IUseDropOptions {
   };
   data?: any;
 }
-export interface IUseDragOptions {
+export interface IUseDragOptions extends IUseSensorOptions {
   groups?: string[];
   events?: {
     onEnd?: (store: IDnDStore) => void;
@@ -81,14 +81,17 @@ export interface IUseDragOptions {
     onHover?: (store: IDnDStore) => void;
     onLeave?: (store: IDnDStore) => void;
   };
+  keyboard?: {
+    moveStep?: number;
+  };
   data?: any;
   layer?: Component | null;
   container?: Component;
-  throttle?: number;
-  sensor?: ISensor;
 }
 
-export type ISensor = (store: IDnDStore) => HTMLElement | HTMLElement[] | null;
+export type ISensor = (
+  store: IDnDStore
+) => HTMLElement | HTMLElement[] | Element | Element[] | null;
 
 export interface IBoundingBox {
   x: number;
@@ -102,8 +105,10 @@ export interface IBoundingBox {
 }
 
 export interface IUseSensorOptions {
-  throttle?: number;
-  sensor?: ISensor;
+  sensor?: {
+    throttle?: number;
+    setup?: ISensor;
+  };
 }
 
 interface ICollisionDetectionResult {

package/dist/utils/dom.d.ts

@@ -1 +1 @@
-export declare const isDescendant: (element: HTMLElement | null, container: HTMLElement) => boolean;
+export declare const isDescendant: (element: HTMLElement | Element | null, container: HTMLElement | Element) => boolean;

package/dist/vue-dnd-kit-core.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue");function Y(e){let t=!1,n;const s=o.effectScope(!0);return(...u)=>(t||(n=s.run(()=>e(...u)),t=!0),n)}typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const z=()=>{};function F(e,t){function n(...s){return new Promise((u,l)=>{Promise.resolve(e(()=>t.apply(this,s),{fn:t,thisArg:this,args:s})).then(u).catch(l)})}return n}function N(...e){let t=0,n,s=!0,u=z,l,a,v,f,E;!o.isRef(e[0])&&typeof e[0]=="object"?{delay:a,trailing:v=!0,leading:f=!0,rejectOnCancel:E=!1}=e[0]:[a,v=!0,f=!0,E=!1]=e;const c=()=>{n&&(clearTimeout(n),n=void 0,u(),u=z)};return r=>{const i=o.toValue(a),m=Date.now()-t,p=()=>l=r();return c(),i<=0?(t=Date.now(),p()):(m>i&&(f||!s)?(t=Date.now(),p()):v&&(l=new Promise((w,x)=>{u=E?x:w,n=setTimeout(()=>{t=Date.now(),s=!0,w(p()),c()},Math.max(0,i-m))})),!f&&!n&&(n=setTimeout(()=>s=!0,i)),s=!1,l)}}function Z(e,t=200,n=!1,s=!0,u=!1){return F(N(t,n,s,u),e)}const M=Y(()=>{const e=o.ref([]),t=o.computed(()=>e.value.length>0),n={component:o.ref(null),ref:o.ref(null)},s=o.ref([]),u=o.ref([]),l=o.ref([]),a={zone:o.ref(null),element:o.ref(null)},v={current:o.ref(null),start:o.ref(null),offset:{percent:o.ref(null),pixel:o.ref(null)}};return{isDragging:t,activeContainer:n,elements:s,draggingElements:e,selectedElements:u,zones:l,hovered:a,pointerPosition:v}}),B=()=>{const e=o.ref(null),{draggingElements:t,pointerPosition:n,isDragging:s,activeContainer:u}=M();return o.onMounted(()=>{u.ref=e}),o.onBeforeUnmount(()=>{u.ref.value=null}),{elementRef:e,draggingElements:t,pointerPosition:n,isDragging:s}},q=["innerHTML"],K=o.defineComponent({__name:"DefaultOverlay",setup(e){const{elementRef:t,pointerPosition:n,isDragging:s,draggingElements:u}=B(),l=o.computed(()=>{var a,v,f,E;return{transform:`translate3d(${(((a=n.current.value)==null?void 0:a.x)??0)-(((v=n.offset.pixel.value)==null?void 0:v.x)??0)}px, ${(((f=n.current.value)==null?void 0:f.y)??0)-(((E=n.offset.pixel.value)==null?void 0:E.y)??0)}px, 0)`,zIndex:1e3,position:"fixed",top:0,left:0,transition:"0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"}});return(a,v)=>o.unref(s)?(o.openBlock(),o.createElementBlock("div",{key:0,ref_key:"elementRef",ref:t,style:o.normalizeStyle(l.value)},[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(o.unref(u),(f,E)=>{var c,y;return o.openBlock(),o.createElementBlock("div",{key:E,innerHTML:f.initialHTML,style:o.normalizeStyle({width:`${(c=f.initialRect)==null?void 0:c.width}px`,height:`${(y=f.initialRect)==null?void 0:y.height}px`})},null,12,q)}),128))],4)):o.createCommentVNode("",!0)}}),R=o.defineComponent({__name:"DragOverlay",setup(e){const{activeContainer:t}=M(),n=o.computed(()=>t.component.value??K);return(s,u)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(n.value)))}}),X={install(e){e.component("DragOverlay",R);const t=e.mount;e.mount=function(s){const u=t.call(this,s),l=typeof s=="string"?document.querySelector(s):s;if(l&&l instanceof Element&&!l.querySelector("#vue-dnd-kit-overlay")){const a=document.createElement("div");a.id="vue-dnd-kit-overlay",a.style.pointerEvents="none",l.appendChild(a);const v=o.createVNode(R);o.render(v,a),e.__VUE_DND_KIT_OVERLAY__={container:a,vnode:v}}return u};const n=e.unmount;e.unmount=function(){return e.__VUE_DND_KIT_OVERLAY__&&(o.render(null,e.__VUE_DND_KIT_OVERLAY__.container),delete e.__VUE_DND_KIT_OVERLAY__),n.call(this)}}},A="data-vue-dnd-kit-draggable",L=e=>{e.preventDefault()},$=e=>{const{elements:t,draggingElements:n,hovered:s,selectedElements:u,isDragging:l}=M(),a=o.ref(null),v=o.computed(()=>{var r;return((r=s.element.value)==null?void 0:r.node)===a.value}),f=o.computed(()=>n.value.some(r=>r.node===a.value)),E=o.computed(()=>{if(!a.value||!l.value)return!1;const r=t.value.find(i=>i.node===a.value);return r!=null&&r.groups.length?!n.value.some(i=>i.groups.length?!i.groups.some(m=>r.groups.includes(m)):!1):!0});return{elementRef:a,registerElement:()=>{if(!a.value)throw new Error("ElementRef is not set");t.value.push({node:a.value,groups:(e==null?void 0:e.groups)??[],layer:(e==null?void 0:e.layer)??null,defaultLayer:(e==null?void 0:e.layer)??null,events:(e==null?void 0:e.events)??{},data:(e==null?void 0:e.data)??void 0}),a.value.addEventListener("dragstart",L),a.value.addEventListener("drag",L),a.value.setAttribute(A,"true"),a.value.setAttribute("draggable","false"),a.value.style.touchAction="none"},unregisterElement:()=>{var m,p,w,x;const r=t.value.findIndex(d=>d.node===a.value);r!==-1&&t.value.splice(r,1);const i=u.value.findIndex(d=>d.node===a.value);i!==-1&&u.value.splice(i,1),(m=a.value)==null||m.removeEventListener("dragstart",L),(p=a.value)==null||p.removeEventListener("drag",L),(w=a.value)==null||w.removeAttribute(A),(x=a.value)==null||x.removeAttribute("draggable")},isDragging:f,isOvered:v,isAllowed:E}},j=()=>{let e="",t="",n="";return{disableInteractions:()=>{const l=document.body;e=l.style.userSelect,l.style.userSelect="none",window.addEventListener("contextmenu",L),window.addEventListener("selectstart",L),window.addEventListener("touchstart",L),window.addEventListener("touchmove",L)},enableInteractions:()=>{const l=document.body;l.style.userSelect=e,l.style.touchAction=t,l.style.overscrollBehavior=n,window.removeEventListener("contextmenu",L),window.removeEventListener("selectstart",L),window.removeEventListener("touchstart",L),window.removeEventListener("touchmove",L)}}},V=(e,t)=>e.x<t.x+t.width&&e.x+e.width>t.x&&e.y<t.y+t.height&&e.y+e.height>t.y,T=e=>{if(!e)return{x:0,y:0,width:0,height:0,bottom:0,left:0,right:0,top:0};const t=e.getBoundingClientRect();return{bottom:t.bottom,left:t.left,right:t.right,top:t.top,x:t.x,y:t.y,width:t.width,height:t.height}},O=e=>({x:e.x+e.width/2,y:e.y+e.height/2}),G=(e,t)=>{const n=T(e);return{pixel:{x:t.x-n.x,y:t.y-n.y},percent:{x:(t.x-n.x)/n.width*100,y:(t.y-n.y)/n.height*100}}},U=(e,t)=>{const n=t.x-e.x,s=t.y-e.y;return Math.sqrt(n*n+s*s)},H=(e,t)=>{const n=Math.max(0,Math.min(e.x+e.width,t.x+t.width)-Math.max(e.x,t.x)),s=Math.max(0,Math.min(e.y+e.height,t.y+t.height)-Math.max(e.y,t.y)),u=n*s,l=e.width*e.height,a=t.width*t.height;return(u/l*100+u/a*100)/2},C=(e,t)=>e?t.contains(e):!1,W=e=>{var c,y;const t=T(e.activeContainer.ref.value),n=O(t),s=((c=e.pointerPosition.current.value)==null?void 0:c.x)??0,u=((y=e.pointerPosition.current.value)==null?void 0:y.y)??0,a=!(t&&s>=t.x&&s<=t.x+t.width&&u>=t.y&&u<=t.y+t.height),v=e.draggingElements.value.map(r=>r.node),f=e.elements.value.filter(r=>{if(!r.node||v.some(m=>m&&C(r.node,m)))return!1;const i=T(r.node);return i&&t&&V(i,t)}).map(r=>{const i=T(r.node),m=O(i),p=s>=i.x&&s<=i.x+i.width&&u>=i.y&&u<=i.y+i.height,w=H(i,t),x=U(n,m),d=e.elements.value.filter(g=>g!==r&&g.node&&r.node&&C(r.node,g.node)).length;return{element:r,node:r.node,isPointerInElement:p,overlapPercent:w,depth:d,centerDistance:x}}).sort((r,i)=>{if(!a){if(r.isPointerInElement&&i.isPointerInElement)return i.depth-r.depth;if(r.isPointerInElement!==i.isPointerInElement)return r.isPointerInElement?-1:1}return Math.abs(r.overlapPercent-i.overlapPercent)<=1?r.centerDistance-i.centerDistance:i.overlapPercent-r.overlapPercent}),E=e.zones.value.filter(r=>{if(!r.node||v.some(m=>m&&C(r.node,m)))return!1;const i=T(r.node);return i&&t&&V(i,t)}).map(r=>{const i=T(r.node),m=O(i),p=s>=i.x&&s<=i.x+i.width&&u>=i.y&&u<=i.y+i.height,w=H(i,t),x=U(n,m),d=e.zones.value.filter(g=>g!==r&&g.node&&r.node&&C(r.node,g.node)).length;return{zone:r,node:r.node,isPointerInElement:p,overlapPercent:w,depth:d,centerDistance:x}}).sort((r,i)=>{if(!a){if(r.isPointerInElement&&i.isPointerInElement)return i.depth-r.depth;if(r.isPointerInElement!==i.isPointerInElement)return r.isPointerInElement?-1:1}return Math.abs(r.overlapPercent-i.overlapPercent)<=1?r.centerDistance-i.centerDistance:i.overlapPercent-r.overlapPercent});return[...f.map(r=>r.node),...E.map(r=>r.node)]},J=e=>{const t=M();return{onPointerStart:l=>{t.pointerPosition.start.value={x:l.clientX,y:l.clientY},t.pointerPosition.current.value={x:l.clientX,y:l.clientY};const{pixel:a,percent:v}=G(e.value,{x:l.clientX,y:l.clientY});t.pointerPosition.offset.pixel.value=a,t.pointerPosition.offset.percent.value=v},onPointerMove:l=>{t.pointerPosition.current.value={x:l.clientX,y:l.clientY}},onPointerEnd:()=>{t.pointerPosition.current.value=null,t.pointerPosition.start.value=null,t.pointerPosition.offset.pixel.value=null,t.pointerPosition.offset.percent.value=null}}},Q=(e,t)=>{const n=M(),{onPointerStart:s,onPointerMove:u,onPointerEnd:l}=J(e);let a=null;const v=d=>{var S,I;const g=n.selectedElements.value.some(h=>h.node===d);if(n.selectedElements.value.length&&g)return n.selectedElements.value.map(h=>{var _,D;return{...h,initialHTML:((_=h.node)==null?void 0:_.outerHTML)??"",initialRect:(D=h.node)==null?void 0:D.getBoundingClientRect()}});n.selectedElements.value=[];const P=n.elements.value.find(h=>h.node===d);return P?[{...P,initialHTML:((S=P.node)==null?void 0:S.outerHTML)??"",initialRect:(I=P.node)==null?void 0:I.getBoundingClientRect()}]:[]},f=d=>{if(!d)return{element:null,zone:null};const g=Array.isArray(d)?d:[d],P=n.draggingElements.value.map(h=>h.node),[S]=g.map(h=>n.elements.value.find(_=>_.node===h)).filter(h=>h?h.groups.length?!n.draggingElements.value.some(D=>D.groups.length?!D.groups.some(k=>h.groups.includes(k)):!1):!0:!1),[I]=g.map(h=>{const _=n.zones.value.find(D=>D.node===h);return!_||P.some(D=>D&&C(h,D))||_.groups.length&&!!n.draggingElements.value.some(k=>k.groups.length?!k.groups.some(b=>_.groups.includes(b)):!1)?null:_});return{element:S??null,zone:I??null}},E=(t==null?void 0:t.sensor)||W,c=d=>{var S,I,h,_,D,k;const g=n.hovered.element.value,P=n.hovered.zone.value;n.hovered.element.value=d.element,n.hovered.zone.value=d.zone,n.hovered.element.value!==g&&((S=g==null?void 0:g.events)!=null&&S.onLeave&&g.events.onLeave(n),(h=(I=n.hovered.element.value)==null?void 0:I.events)!=null&&h.onHover&&n.hovered.element.value.events.onHover(n)),n.hovered.zone.value!==P&&((_=P==null?void 0:P.events)!=null&&_.onLeave&&P.events.onLeave(n),(k=(D=n.hovered.zone.value)==null?void 0:D.events)!=null&&k.onHover&&n.hovered.zone.value.events.onHover(n))},y=Z(()=>{const d=E(n),g=f(d);c(g)},(t==null?void 0:t.throttle)??0),r=()=>{y(),a=requestAnimationFrame(r)},i=()=>r(),m=()=>{a!==null&&(cancelAnimationFrame(a),a=null)};return{activate:d=>{n.draggingElements.value=v(e.value),s(d),i()},track:d=>{u(d)},deactivate:()=>{var d,g;l(),n.hovered.zone.value?(g=(d=n.hovered.zone.value.events).onDrop)==null||g.call(d,n):n.draggingElements.value.forEach(P=>{var S,I;return(I=(S=P.events).onEnd)==null?void 0:I.call(S,n)}),n.draggingElements.value=[],n.selectedElements.value=[],n.hovered.zone.value=null,n.hovered.element.value=null,m()}}},ee=e=>{const{elementRef:t,registerElement:n,unregisterElement:s,isDragging:u,isOvered:l,isAllowed:a}=$(e),{disableInteractions:v,enableInteractions:f}=j(),{activeContainer:E,pointerPosition:c}=M(),{activate:y,track:r,deactivate:i}=Q(t,{throttle:e==null?void 0:e.throttle,sensor:e==null?void 0:e.sensor}),m=d=>{e!=null&&e.container&&(E.component.value=o.markRaw(e.container)),v(),y(d),document.addEventListener("pointermove",p),document.addEventListener("pointerup",x),document.addEventListener("wheel",w)},p=d=>r(d),w=d=>r(d),x=()=>{E.component.value=null,f(),i(),document.removeEventListener("pointermove",p),document.removeEventListener("pointerup",x),document.removeEventListener("wheel",w)};return o.onMounted(n),o.onBeforeUnmount(s),{pointerPosition:c,elementRef:t,isDragging:u,isOvered:l,isAllowed:a,handleDragStart:m}},te=e=>{const{zones:t,hovered:n,draggingElements:s,isDragging:u}=M(),l=o.ref(null),a=o.computed(()=>{var c;return((c=n.zone.value)==null?void 0:c.node)===l.value}),v=o.computed(()=>{if(!l.value||!u.value)return!1;const c=t.value.find(y=>y.node===l.value);return c!=null&&c.groups.length?!s.value.some(y=>y.groups.length?!y.groups.some(r=>c.groups.includes(r)):!1):!0});return{elementRef:l,registerZone:()=>{if(!l.value)throw new Error("elementRef is not set");t.value.push({node:l.value,groups:(e==null?void 0:e.groups)??[],events:(e==null?void 0:e.events)??{},data:(e==null?void 0:e.data)??void 0}),l.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{if(!l.value)throw new Error("elementRef is not set");const c=t.value.findIndex(y=>y.node===l.value);c!==-1&&t.value.splice(c,1)},isOvered:a,isAllowed:v}},ne=e=>{const{elementRef:t,registerZone:n,unregisterZone:s,isOvered:u,isAllowed:l}=te(e);return o.onMounted(n),o.onBeforeUnmount(s),{elementRef:t,isOvered:u,isAllowed:l}},re=e=>{const{selectedElements:t,elements:n}=M(),s=o.computed(()=>n.value.find(c=>c.node===e.value)),u=o.computed(()=>t.value.some(c=>c.node===e.value)),l=o.computed(()=>e.value?t.value.some(c=>c.node&&C(c.node,e.value)):!1),a=o.computed(()=>e.value?t.value.some(c=>c.node&&C(e.value,c.node)):!1),v=()=>{s.value&&(t.value=t.value.filter(c=>c.node!==e.value))},f=()=>{s.value&&(l.value&&(t.value=t.value.filter(c=>c.node&&!C(c.node,e.value))),a.value&&(t.value=t.value.filter(c=>c.node&&!C(e.value,c.node))),t.value.push(s.value))};return{handleUnselect:v,handleSelect:f,handleToggleSelect:()=>{s.value&&(t.value.some(c=>c.node===e.value)?v():f())},isSelected:u,isParentOfSelected:l}};exports.default=X;exports.useDnDStore=M;exports.useDraggable=ee;exports.useDroppable=ne;exports.useSelection=re;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("vue");function H(e){let t=!1,n;const o=s.effectScope(!0);return(...l)=>(t||(n=o.run(()=>e(...l)),t=!0),n)}typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const V=()=>{};function Z(e,t){function n(...o){return new Promise((l,u)=>{Promise.resolve(e(()=>t.apply(this,o),{fn:t,thisArg:this,args:o})).then(l).catch(u)})}return n}function q(...e){let t=0,n,o=!0,l=V,u,a,f,d,v;!s.isRef(e[0])&&typeof e[0]=="object"?{delay:a,trailing:f=!0,leading:d=!0,rejectOnCancel:v=!1}=e[0]:[a,f=!0,d=!0,v=!1]=e;const c=()=>{n&&(clearTimeout(n),n=void 0,l(),l=V)};return r=>{const i=s.toValue(a),g=Date.now()-t,p=()=>u=r();return c(),i<=0?(t=Date.now(),p()):(g>i&&(d||!o)?(t=Date.now(),p()):f&&(u=new Promise((w,L)=>{l=v?L:w,n=setTimeout(()=>{t=Date.now(),o=!0,w(p()),c()},Math.max(0,i-g))})),!d&&!n&&(n=setTimeout(()=>o=!0,i)),o=!1,u)}}function N(e,t=200,n=!1,o=!0,l=!1){return Z(q(t,n,o,l),e)}const M=H(()=>{const e=s.ref([]),t=s.computed(()=>e.value.length>0),n={component:s.ref(null),ref:s.shallowRef(null)},o=s.ref([]),l=s.ref([]),u=s.ref([]),a={zone:s.ref(null),element:s.ref(null)},f={current:s.shallowRef(null),start:s.shallowRef(null),offset:{percent:s.shallowRef(null),pixel:s.shallowRef(null)}},d={w:s.shallowRef(!1),s:s.shallowRef(!1),a:s.shallowRef(!1),d:s.shallowRef(!1)};return{isDragging:t,activeContainer:n,elements:o,draggingElements:e,selectedElements:l,zones:u,hovered:a,pointerPosition:f,keyboard:d}}),$=()=>{const e=s.ref(null),{draggingElements:t,pointerPosition:n,isDragging:o,activeContainer:l}=M();return s.onMounted(()=>{l.ref=e}),s.onBeforeUnmount(()=>{l.ref.value=null}),{elementRef:e,draggingElements:t,pointerPosition:n,isDragging:o}},j=["innerHTML"],W=s.defineComponent({__name:"DefaultOverlay",setup(e){const{elementRef:t,pointerPosition:n,isDragging:o,draggingElements:l}=$(),u=s.computed(()=>{var a,f,d,v;return{transform:`translate3d(${(((a=n.current.value)==null?void 0:a.x)??0)-(((f=n.offset.pixel.value)==null?void 0:f.x)??0)}px, ${(((d=n.current.value)==null?void 0:d.y)??0)-(((v=n.offset.pixel.value)==null?void 0:v.y)??0)}px, 0)`,zIndex:1e3,position:"fixed",top:0,left:0,transition:"0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"}});return(a,f)=>s.unref(o)?(s.openBlock(),s.createElementBlock("div",{key:0,ref_key:"elementRef",ref:t,style:s.normalizeStyle(u.value)},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(s.unref(l),(d,v)=>{var c,h;return s.openBlock(),s.createElementBlock("div",{key:v,innerHTML:d.initialHTML,style:s.normalizeStyle({width:`${(c=d.initialRect)==null?void 0:c.width}px`,height:`${(h=d.initialRect)==null?void 0:h.height}px`})},null,12,j)}),128))],4)):s.createCommentVNode("",!0)}}),U=s.defineComponent({__name:"DragOverlay",setup(e){const{activeContainer:t}=M(),n=s.computed(()=>t.component.value??W);return(o,l)=>(s.openBlock(),s.createBlock(s.resolveDynamicComponent(n.value)))}}),G={install(e){e.component("DragOverlay",U);const t=e.mount;e.mount=function(o){const l=t.call(this,o),u=typeof o=="string"?document.querySelector(o):o;if(u&&u instanceof Element&&!u.querySelector("#vue-dnd-kit-overlay")){const a=document.createElement("div");a.id="vue-dnd-kit-overlay",a.style.pointerEvents="none",u.appendChild(a);const f=s.createVNode(U);s.render(f,a),e.__VUE_DND_KIT_OVERLAY__={container:a,vnode:f}}return l};const n=e.unmount;e.unmount=function(){return e.__VUE_DND_KIT_OVERLAY__&&(s.render(null,e.__VUE_DND_KIT_OVERLAY__.container),delete e.__VUE_DND_KIT_OVERLAY__),n.call(this)}}},Y=(e,t)=>e.x<t.x+t.width&&e.x+e.width>t.x&&e.y<t.y+t.height&&e.y+e.height>t.y,T=e=>{if(!e)return{x:0,y:0,width:0,height:0,bottom:0,left:0,right:0,top:0};const t=e.getBoundingClientRect();return{bottom:t.bottom,left:t.left,right:t.right,top:t.top,x:t.x,y:t.y,width:t.width,height:t.height}},K=e=>({x:e.x+e.width/2,y:e.y+e.height/2}),J=(e,t)=>{const n=T(e);return{pixel:{x:t.x-n.x,y:t.y-n.y},percent:{x:(t.x-n.x)/n.width*100,y:(t.y-n.y)/n.height*100}}},B=(e,t)=>{const n=t.x-e.x,o=t.y-e.y;return Math.sqrt(n*n+o*o)},X=(e,t)=>{const n=Math.max(0,Math.min(e.x+e.width,t.x+t.width)-Math.max(e.x,t.x)),o=Math.max(0,Math.min(e.y+e.height,t.y+t.height)-Math.max(e.y,t.y)),l=n*o,u=e.width*e.height,a=t.width*t.height;return(l/u*100+l/a*100)/2},F="data-vue-dnd-kit-draggable",_=e=>{e.preventDefault()},Q=e=>{const{elements:t,draggingElements:n,hovered:o,selectedElements:l,isDragging:u}=M(),a=s.ref(null),f=s.computed(()=>{var r;return((r=o.element.value)==null?void 0:r.node)===a.value}),d=s.computed(()=>n.value.some(r=>r.node===a.value)),v=s.computed(()=>{if(!a.value||!u.value)return!1;const r=t.value.find(i=>i.node===a.value);return r!=null&&r.groups.length?!n.value.some(i=>i.groups.length?!i.groups.some(g=>r.groups.includes(g)):!1):!0});return{elementRef:a,registerElement:()=>{if(!a.value)throw new Error("ElementRef is not set");t.value.push({node:a.value,groups:(e==null?void 0:e.groups)??[],layer:(e==null?void 0:e.layer)??null,defaultLayer:(e==null?void 0:e.layer)??null,events:(e==null?void 0:e.events)??{},data:(e==null?void 0:e.data)??void 0}),a.value.addEventListener("dragstart",_),a.value.addEventListener("drag",_),a.value.setAttribute(F,"true"),a.value.setAttribute("draggable","false")},unregisterElement:()=>{var g,p,w,L;const r=t.value.findIndex(S=>S.node===a.value);r!==-1&&t.value.splice(r,1);const i=l.value.findIndex(S=>S.node===a.value);i!==-1&&l.value.splice(i,1),(g=a.value)==null||g.removeEventListener("dragstart",_),(p=a.value)==null||p.removeEventListener("drag",_),(w=a.value)==null||w.removeAttribute(F),(L=a.value)==null||L.removeAttribute("draggable")},isDragging:d,isOvered:f,isAllowed:v}},b=(e,t)=>e?t.contains(e):!1,ee=e=>{var c,h;const t=T(e.activeContainer.ref.value),n=K(t),o=((c=e.pointerPosition.current.value)==null?void 0:c.x)??0,l=((h=e.pointerPosition.current.value)==null?void 0:h.y)??0,a=!(t&&o>=t.x&&o<=t.x+t.width&&l>=t.y&&l<=t.y+t.height),f=e.draggingElements.value.map(r=>r.node),d=e.elements.value.filter(r=>{if(!r.node)return!1;const i=T(r.node);return i&&t&&Y(i,t)}).map(r=>{const i=T(r.node),g=K(i),p=o>=i.x&&o<=i.x+i.width&&l>=i.y&&l<=i.y+i.height,w=X(i,t),L=B(n,g),S=e.elements.value.filter(C=>C!==r&&C.node&&r.node&&b(r.node,C.node)).length;return{element:r,node:r.node,isPointerInElement:p,overlapPercent:w,depth:S,centerDistance:L}}).sort((r,i)=>{if(!a){if(r.isPointerInElement&&i.isPointerInElement)return i.depth-r.depth;if(r.isPointerInElement!==i.isPointerInElement)return r.isPointerInElement?-1:1}return Math.abs(r.overlapPercent-i.overlapPercent)<=1?r.centerDistance-i.centerDistance:i.overlapPercent-r.overlapPercent}),v=e.zones.value.filter(r=>{if(!r.node||f.some(g=>g&&b(r.node,g)))return!1;const i=T(r.node);return i&&t&&Y(i,t)}).map(r=>{const i=T(r.node),g=K(i),p=o>=i.x&&o<=i.x+i.width&&l>=i.y&&l<=i.y+i.height,w=X(i,t),L=B(n,g),S=e.zones.value.filter(C=>C!==r&&C.node&&r.node&&b(r.node,C.node)).length;return{zone:r,node:r.node,isPointerInElement:p,overlapPercent:w,depth:S,centerDistance:L}}).sort((r,i)=>{if(!a){if(r.isPointerInElement&&i.isPointerInElement)return i.depth-r.depth;if(r.isPointerInElement!==i.isPointerInElement)return r.isPointerInElement?-1:1}return Math.abs(r.overlapPercent-i.overlapPercent)<=1?r.centerDistance-i.centerDistance:i.overlapPercent-r.overlapPercent});return[...d.map(r=>r.node),...v.map(r=>r.node)]},te=(e,t)=>{const{pointerPosition:n,keyboard:o}=M(),l=(t==null?void 0:t.moveStep)||10;return{onKeyboardStart:d=>{var r;_(d);const v=T(e.value);(r=e.value)==null||r.blur();const c=v.x+v.width/2,h=v.y+v.height/2;n.start.value={x:c,y:h},n.current.value={x:c,y:h},n.offset.pixel.value={x:v.width/2,y:v.height/2},n.offset.percent.value={x:50,y:50}},onKeyboardMove:()=>{if(!n.current.value)return;const d=n.current.value.x,v=n.current.value.y;let c=d,h=v;o.w.value&&(h-=l),o.s.value&&(h+=l),o.a.value&&(c-=l),o.d.value&&(c+=l),n.current.value={x:c,y:h}},onKeyboardEnd:()=>{n.current.value=null,n.start.value=null,n.offset.pixel.value=null,n.offset.percent.value=null}}},ne=e=>{const t=M();return{onPointerStart:u=>{t.pointerPosition.start.value={x:u.clientX,y:u.clientY},t.pointerPosition.current.value={x:u.clientX,y:u.clientY};const{pixel:a,percent:f}=J(e.value,{x:u.clientX,y:u.clientY});t.pointerPosition.offset.pixel.value=a,t.pointerPosition.offset.percent.value=f},onPointerMove:u=>{t.pointerPosition.current.value={x:u.clientX,y:u.clientY}},onPointerEnd:()=>{t.pointerPosition.current.value=null,t.pointerPosition.start.value=null,t.pointerPosition.offset.pixel.value=null,t.pointerPosition.offset.percent.value=null}}},re=(e,t)=>{var A,z;const n=M(),{onPointerStart:o,onPointerMove:l,onPointerEnd:u}=ne(e),{onKeyboardStart:a,onKeyboardMove:f,onKeyboardEnd:d}=te(e,t==null?void 0:t.keyboard);let v=null;const c=y=>{var R,I;const x=n.selectedElements.value.some(m=>m.node===y);if(n.selectedElements.value.length&&x)return n.selectedElements.value.map(m=>{var E,k;return{...m,initialHTML:((E=m.node)==null?void 0:E.outerHTML)??"",initialRect:(k=m.node)==null?void 0:k.getBoundingClientRect()}});n.selectedElements.value=[];const D=n.elements.value.find(m=>m.node===y);return D?[{...D,initialHTML:((R=D.node)==null?void 0:R.outerHTML)??"",initialRect:(I=D.node)==null?void 0:I.getBoundingClientRect()}]:[]},h=y=>{if(!y)return{element:null,zone:null};const x=Array.isArray(y)?y:[y],D=n.draggingElements.value.map(m=>m.node),R=x.map(m=>n.elements.value.find(E=>E.node===m)).filter(m=>!m||D.some(E=>E&&(E===m.node||b(m.node,E)))?!1:m.groups.length?!n.draggingElements.value.some(k=>k.groups.length?!k.groups.some(O=>m.groups.includes(O)):!1):!0),I=x.map(m=>n.zones.value.find(E=>E.node===m)).filter(m=>!m||D.some(E=>E&&(E===m.node||b(m.node,E)))?!1:m.groups.length&&!!n.draggingElements.value.some(k=>k.groups.length?!k.groups.some(O=>m.groups.includes(O)):!1)?null:!0);return{element:R[0]??null,zone:I[0]??null}},r=((A=t==null?void 0:t.sensor)==null?void 0:A.setup)||ee,i=y=>{var R,I,m,E,k,O;const x=n.hovered.element.value,D=n.hovered.zone.value;n.hovered.element.value=y.element,n.hovered.zone.value=y.zone,n.hovered.element.value!==x&&((R=x==null?void 0:x.events)!=null&&R.onLeave&&x.events.onLeave(n),(m=(I=n.hovered.element.value)==null?void 0:I.events)!=null&&m.onHover&&n.hovered.element.value.events.onHover(n)),n.hovered.zone.value!==D&&((E=D==null?void 0:D.events)!=null&&E.onLeave&&D.events.onLeave(n),(O=(k=n.hovered.zone.value)==null?void 0:k.events)!=null&&O.onHover&&n.hovered.zone.value.events.onHover(n))},g=N(()=>{const y=r(n),x=h(y);i(x)},((z=t==null?void 0:t.sensor)==null?void 0:z.throttle)??0),p=()=>{g(),v=requestAnimationFrame(p)},w=()=>p(),L=()=>{v!==null&&(cancelAnimationFrame(v),v=null)};return{activate:y=>{n.draggingElements.value=c(e.value),y instanceof PointerEvent?o(y):a(y),w()},track:y=>{y instanceof KeyboardEvent?f():l(y)},deactivate:(y=!0)=>{var x,D;u(),d(),y&&(n.hovered.zone.value?(D=(x=n.hovered.zone.value.events).onDrop)==null||D.call(x,n):n.draggingElements.value.forEach(R=>{var I,m;return(m=(I=R.events).onEnd)==null?void 0:m.call(I,n)}),n.selectedElements.value=[]),n.draggingElements.value=[],n.hovered.zone.value=null,n.hovered.element.value=null,L()}}},le=H(()=>{let e="",t="",n="",o=null,l=null,u=null,a=null;const{activeContainer:f,keyboard:d}=M(),v=()=>{const g=document.body;e=g.style.userSelect,g.style.userSelect="none",window.addEventListener("contextmenu",_),window.addEventListener("selectstart",_),window.addEventListener("touchstart",_),window.addEventListener("touchmove",_)},c=()=>{const g=document.body;g.style.userSelect=e,g.style.touchAction=t,g.style.overscrollBehavior=n,window.removeEventListener("contextmenu",_),window.removeEventListener("selectstart",_),window.removeEventListener("touchstart",_),window.removeEventListener("touchmove",_)},h=()=>{o&&(document.removeEventListener("pointermove",o),o=null),l&&(document.removeEventListener("pointerup",()=>l==null?void 0:l()),l=null),u&&(document.removeEventListener("wheel",u),u=null),a&&(document.removeEventListener("keydown",a),document.removeEventListener("keypress",a),document.removeEventListener("keyup",a),a=null)},r=(g,p,w)=>{h(),g.target.blur(),w!=null&&w.container&&(f.component.value=s.markRaw(w.container));const{activate:L,track:S,deactivate:C}=re(p,w);l=(P=!0)=>{f.component.value=null,c(),C(P),h()},o=P=>S(P),u=P=>S(P),a=P=>{P.type==="keydown"&&i(P,!0),P.type==="keypress"&&i(P,!0),P.type==="keyup"&&(P.code==="Escape"&&(l==null||l(!1)),P.code==="Enter"&&(l==null||l()),i(P,!1)),S(P)},v(),L(g),document.addEventListener("pointermove",o),document.addEventListener("pointerup",()=>l==null?void 0:l()),document.addEventListener("wheel",u),document.addEventListener("keydown",a),document.addEventListener("keypress",a),document.addEventListener("keyup",a)},i=(g,p=!0)=>{g.code==="KeyW"&&(d.w.value=p),g.code==="KeyA"&&(d.a.value=p),g.code==="KeyS"&&(d.s.value=p),g.code==="KeyD"&&(d.d.value=p)};return{handleDragStart:r}}),oe=e=>{const{elementRef:t,registerElement:n,unregisterElement:o,isDragging:l,isOvered:u,isAllowed:a}=Q(e),{pointerPosition:f}=M(),{handleDragStart:d}=le(),v=c=>d(c,t,e);return s.onMounted(n),s.onBeforeUnmount(o),{pointerPosition:f,elementRef:t,isDragging:l,isOvered:u,isAllowed:a,handleDragStart:v}},se=e=>{const{zones:t,hovered:n,draggingElements:o,isDragging:l}=M(),u=s.ref(null),a=s.computed(()=>{var c;return((c=n.zone.value)==null?void 0:c.node)===u.value}),f=s.computed(()=>{if(!u.value||!l.value)return!1;const c=t.value.find(h=>h.node===u.value);return c!=null&&c.groups.length?!o.value.some(h=>h.groups.length?!h.groups.some(r=>c.groups.includes(r)):!1):!0});return{elementRef:u,registerZone:()=>{if(!u.value)throw new Error("elementRef is not set");t.value.push({node:u.value,groups:(e==null?void 0:e.groups)??[],events:(e==null?void 0:e.events)??{},data:(e==null?void 0:e.data)??void 0}),u.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{if(!u.value)throw new Error("elementRef is not set");const c=t.value.findIndex(h=>h.node===u.value);c!==-1&&t.value.splice(c,1)},isOvered:a,isAllowed:f}},ae=e=>{const{elementRef:t,registerZone:n,unregisterZone:o,isOvered:l,isAllowed:u}=se(e);return s.onMounted(n),s.onBeforeUnmount(o),{elementRef:t,isOvered:l,isAllowed:u}},ie=e=>{const{selectedElements:t,elements:n}=M(),o=s.computed(()=>n.value.find(c=>c.node===e.value)),l=s.computed(()=>t.value.some(c=>c.node===e.value)),u=s.computed(()=>e.value?t.value.some(c=>c.node&&b(c.node,e.value)):!1),a=s.computed(()=>e.value?t.value.some(c=>c.node&&b(e.value,c.node)):!1),f=()=>{o.value&&(t.value=t.value.filter(c=>c.node!==e.value))},d=()=>{o.value&&(u.value&&(t.value=t.value.filter(c=>c.node&&!b(c.node,e.value))),a.value&&(t.value=t.value.filter(c=>c.node&&!b(e.value,c.node))),t.value.push(o.value))};return{handleUnselect:f,handleSelect:d,handleToggleSelect:()=>{o.value&&(t.value.some(c=>c.node===e.value)?f():d())},isSelected:l,isParentOfSelected:u}};exports.default=G;exports.getBoundingBox=T;exports.useDnDStore=M;exports.useDraggable=oe;exports.useDroppable=ae;exports.useSelection=ie;

package/dist/vue-dnd-kit-core.es.js

@@ -1,85 +1,91 @@
-import { effectScope as G, isRef as W, toValue as J, ref as y, computed as I, onMounted as V, onBeforeUnmount as H, defineComponent as q, createElementBlock as z, createCommentVNode as Q, unref as U, openBlock as k, normalizeStyle as Y, Fragment as B, renderList as ee, createBlock as te, resolveDynamicComponent as ne, createVNode as re, render as F, markRaw as le } from "vue";
-function oe(e) {
+import { effectScope as te, isRef as ne, toValue as re, ref as I, computed as S, shallowRef as O, onMounted as U, onBeforeUnmount as X, defineComponent as B, createElementBlock as z, createCommentVNode as le, unref as Z, openBlock as V, normalizeStyle as N, Fragment as oe, renderList as se, createBlock as ae, resolveDynamicComponent as ie, createVNode as ue, render as $, markRaw as ce } from "vue";
+function ee(e) {
   let t = !1, n;
-  const i = G(!0);
-  return (...a) => (t || (n = i.run(() => e(...a)), t = !0), n);
+  const o = te(!0);
+  return (...l) => (t || (n = o.run(() => e(...l)), t = !0), n);
 }
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const N = () => {
+const q = () => {
 };
-function ie(e, t) {
-  function n(...i) {
-    return new Promise((a, l) => {
-      Promise.resolve(e(() => t.apply(this, i), { fn: t, thisArg: this, args: i })).then(a).catch(l);
+function de(e, t) {
+  function n(...o) {
+    return new Promise((l, i) => {
+      Promise.resolve(e(() => t.apply(this, o), { fn: t, thisArg: this, args: o })).then(l).catch(i);
     });
   }
   return n;
 }
-function se(...e) {
-  let t = 0, n, i = !0, a = N, l, s, d, v, h;
-  !W(e[0]) && typeof e[0] == "object" ? { delay: s, trailing: d = !0, leading: v = !0, rejectOnCancel: h = !1 } = e[0] : [s, d = !0, v = !0, h = !1] = e;
+function ve(...e) {
+  let t = 0, n, o = !0, l = q, i, s, v, c, d;
+  !ne(e[0]) && typeof e[0] == "object" ? { delay: s, trailing: v = !0, leading: c = !0, rejectOnCancel: d = !1 } = e[0] : [s, v = !0, c = !0, d = !1] = e;
   const u = () => {
-    n && (clearTimeout(n), n = void 0, a(), a = N);
+    n && (clearTimeout(n), n = void 0, l(), l = q);
   };
   return (r) => {
-    const o = J(s), f = Date.now() - t, p = () => l = r();
-    return u(), o <= 0 ? (t = Date.now(), p()) : (f > o && (v || !i) ? (t = Date.now(), p()) : d && (l = new Promise((D, x) => {
-      a = h ? x : D, n = setTimeout(() => {
-        t = Date.now(), i = !0, D(p()), u();
-      }, Math.max(0, o - f));
-    })), !v && !n && (n = setTimeout(() => i = !0, o)), i = !1, l);
+    const a = re(s), f = Date.now() - t, y = () => i = r();
+    return u(), a <= 0 ? (t = Date.now(), y()) : (f > a && (c || !o) ? (t = Date.now(), y()) : v && (i = new Promise((p, _) => {
+      l = d ? _ : p, n = setTimeout(() => {
+        t = Date.now(), o = !0, p(y()), u();
+      }, Math.max(0, a - f));
+    })), !c && !n && (n = setTimeout(() => o = !0, a)), o = !1, i);
   };
 }
-function ae(e, t = 200, n = !1, i = !0, a = !1) {
-  return ie(
-    se(t, n, i, a),
+function fe(e, t = 200, n = !1, o = !0, l = !1) {
+  return de(
+    ve(t, n, o, l),
     e
   );
 }
-const T = oe(() => {
-  const e = y([]), t = I(() => e.value.length > 0), n = {
-    component: y(null),
-    ref: y(null)
-  }, i = y([]), a = y([]), l = y([]), s = {
-    zone: y(null),
-    element: y(null)
-  }, d = {
-    current: y(null),
-    start: y(null),
+const T = ee(() => {
+  const e = I([]), t = S(() => e.value.length > 0), n = {
+    component: I(null),
+    ref: O(null)
+  }, o = I([]), l = I([]), i = I([]), s = {
+    zone: I(null),
+    element: I(null)
+  }, v = {
+    current: O(null),
+    start: O(null),
     offset: {
-      percent: y(null),
-      pixel: y(null)
+      percent: O(null),
+      pixel: O(null)
     }
+  }, c = {
+    w: O(!1),
+    s: O(!1),
+    a: O(!1),
+    d: O(!1)
   };
   return {
     isDragging: t,
     activeContainer: n,
-    elements: i,
+    elements: o,
     draggingElements: e,
-    selectedElements: a,
-    zones: l,
+    selectedElements: l,
+    zones: i,
     hovered: s,
-    pointerPosition: d
+    pointerPosition: v,
+    keyboard: c
   };
-}), ue = () => {
-  const e = y(null), { draggingElements: t, pointerPosition: n, isDragging: i, activeContainer: a } = T();
-  return V(() => {
-    a.ref = e;
-  }), H(() => {
-    a.ref.value = null;
+}), ge = () => {
+  const e = I(null), { draggingElements: t, pointerPosition: n, isDragging: o, activeContainer: l } = T();
+  return U(() => {
+    l.ref = e;
+  }), X(() => {
+    l.ref.value = null;
   }), {
     elementRef: e,
     draggingElements: t,
     pointerPosition: n,
-    isDragging: i
+    isDragging: o
   };
-}, ce = ["innerHTML"], de = /* @__PURE__ */ q({
+}, me = ["innerHTML"], he = /* @__PURE__ */ B({
   __name: "DefaultOverlay",
   setup(e) {
-    const { elementRef: t, pointerPosition: n, isDragging: i, draggingElements: a } = ue(), l = I(() => {
-      var s, d, v, h;
+    const { elementRef: t, pointerPosition: n, isDragging: o, draggingElements: l } = ge(), i = S(() => {
+      var s, v, c, d;
       return {
-        transform: `translate3d(${(((s = n.current.value) == null ? void 0 : s.x) ?? 0) - (((d = n.offset.pixel.value) == null ? void 0 : d.x) ?? 0)}px, ${(((v = n.current.value) == null ? void 0 : v.y) ?? 0) - (((h = n.offset.pixel.value) == null ? void 0 : h.y) ?? 0)}px, 0)`,
+        transform: `translate3d(${(((s = n.current.value) == null ? void 0 : s.x) ?? 0) - (((v = n.offset.pixel.value) == null ? void 0 : v.x) ?? 0)}px, ${(((c = n.current.value) == null ? void 0 : c.y) ?? 0) - (((d = n.offset.pixel.value) == null ? void 0 : d.y) ?? 0)}px, 0)`,
         zIndex: 1e3,
         position: "fixed",
         top: 0,
@@ -87,121 +93,56 @@ const T = oe(() => {
         transition: "0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"
       };
     });
-    return (s, d) => U(i) ? (k(), z("div", {
+    return (s, v) => Z(o) ? (V(), z("div", {
       key: 0,
       ref_key: "elementRef",
       ref: t,
-      style: Y(l.value)
+      style: N(i.value)
     }, [
-      (k(!0), z(B, null, ee(U(a), (v, h) => {
-        var u, E;
-        return k(), z("div", {
-          key: h,
-          innerHTML: v.initialHTML,
-          style: Y({
-            width: `${(u = v.initialRect) == null ? void 0 : u.width}px`,
-            height: `${(E = v.initialRect) == null ? void 0 : E.height}px`
+      (V(!0), z(oe, null, se(Z(l), (c, d) => {
+        var u, m;
+        return V(), z("div", {
+          key: d,
+          innerHTML: c.initialHTML,
+          style: N({
+            width: `${(u = c.initialRect) == null ? void 0 : u.width}px`,
+            height: `${(m = c.initialRect) == null ? void 0 : m.height}px`
           })
-        }, null, 12, ce);
+        }, null, 12, me);
       }), 128))
-    ], 4)) : Q("", !0);
+    ], 4)) : le("", !0);
   }
-}), Z = /* @__PURE__ */ q({
+}), W = /* @__PURE__ */ B({
   __name: "DragOverlay",
   setup(e) {
-    const { activeContainer: t } = T(), n = I(
-      () => t.component.value ?? de
+    const { activeContainer: t } = T(), n = S(
+      () => t.component.value ?? he
     );
-    return (i, a) => (k(), te(ne(n.value)));
+    return (o, l) => (V(), ae(ie(n.value)));
   }
-}), Pe = {
+}), Se = {
   install(e) {
-    e.component("DragOverlay", Z);
+    e.component("DragOverlay", W);
     const t = e.mount;
-    e.mount = function(i) {
-      const a = t.call(this, i), l = typeof i == "string" ? document.querySelector(i) : i;
-      if (l && l instanceof Element && !l.querySelector("#vue-dnd-kit-overlay")) {
+    e.mount = function(o) {
+      const l = t.call(this, o), i = typeof o == "string" ? document.querySelector(o) : o;
+      if (i && i instanceof Element && !i.querySelector("#vue-dnd-kit-overlay")) {
         const s = document.createElement("div");
-        s.id = "vue-dnd-kit-overlay", s.style.pointerEvents = "none", l.appendChild(s);
-        const d = re(Z);
-        F(d, s), e.__VUE_DND_KIT_OVERLAY__ = {
+        s.id = "vue-dnd-kit-overlay", s.style.pointerEvents = "none", i.appendChild(s);
+        const v = ue(W);
+        $(v, s), e.__VUE_DND_KIT_OVERLAY__ = {
           container: s,
-          vnode: d
+          vnode: v
         };
       }
-      return a;
+      return l;
     };
     const n = e.unmount;
     e.unmount = function() {
-      return e.__VUE_DND_KIT_OVERLAY__ && (F(null, e.__VUE_DND_KIT_OVERLAY__.container), delete e.__VUE_DND_KIT_OVERLAY__), n.call(this);
+      return e.__VUE_DND_KIT_OVERLAY__ && ($(null, e.__VUE_DND_KIT_OVERLAY__.container), delete e.__VUE_DND_KIT_OVERLAY__), n.call(this);
     };
   }
-}, b = "data-vue-dnd-kit-draggable", L = (e) => {
-  e.preventDefault();
-}, ve = (e) => {
-  const {
-    elements: t,
-    draggingElements: n,
-    hovered: i,
-    selectedElements: a,
-    isDragging: l
-  } = T(), s = y(null), d = I(
-    () => {
-      var r;
-      return ((r = i.element.value) == null ? void 0 : r.node) === s.value;
-    }
-  ), v = I(
-    () => n.value.some((r) => r.node === s.value)
-  ), h = I(() => {
-    if (!s.value || !l.value) return !1;
-    const r = t.value.find(
-      (o) => o.node === s.value
-    );
-    return r != null && r.groups.length ? !n.value.some((o) => o.groups.length ? !o.groups.some(
-      (f) => r.groups.includes(f)
-    ) : !1) : !0;
-  });
-  return {
-    elementRef: s,
-    registerElement: () => {
-      if (!s.value) throw new Error("ElementRef is not set");
-      t.value.push({
-        node: s.value,
-        groups: (e == null ? void 0 : e.groups) ?? [],
-        layer: (e == null ? void 0 : e.layer) ?? null,
-        defaultLayer: (e == null ? void 0 : e.layer) ?? null,
-        events: (e == null ? void 0 : e.events) ?? {},
-        data: (e == null ? void 0 : e.data) ?? void 0
-      }), s.value.addEventListener("dragstart", L), s.value.addEventListener("drag", L), s.value.setAttribute(b, "true"), s.value.setAttribute("draggable", "false"), s.value.style.touchAction = "none";
-    },
-    unregisterElement: () => {
-      var f, p, D, x;
-      const r = t.value.findIndex(
-        (c) => c.node === s.value
-      );
-      r !== -1 && t.value.splice(r, 1);
-      const o = a.value.findIndex(
-        (c) => c.node === s.value
-      );
-      o !== -1 && a.value.splice(o, 1), (f = s.value) == null || f.removeEventListener("dragstart", L), (p = s.value) == null || p.removeEventListener("drag", L), (D = s.value) == null || D.removeAttribute(b), (x = s.value) == null || x.removeAttribute("draggable");
-    },
-    isDragging: v,
-    isOvered: d,
-    isAllowed: h
-  };
-}, ge = () => {
-  let e = "", t = "", n = "";
-  return {
-    disableInteractions: () => {
-      const l = document.body;
-      e = l.style.userSelect, l.style.userSelect = "none", window.addEventListener("contextmenu", L), window.addEventListener("selectstart", L), window.addEventListener("touchstart", L), window.addEventListener("touchmove", L);
-    },
-    enableInteractions: () => {
-      const l = document.body;
-      l.style.userSelect = e, l.style.touchAction = t, l.style.overscrollBehavior = n, window.removeEventListener("contextmenu", L), window.removeEventListener("selectstart", L), window.removeEventListener("touchstart", L), window.removeEventListener("touchmove", L);
-    }
-  };
-}, K = (e, t) => e.x < t.x + t.width && e.x + e.width > t.x && e.y < t.y + t.height && e.y + e.height > t.y, R = (e) => {
+}, j = (e, t) => e.x < t.x + t.width && e.x + e.width > t.x && e.y < t.y + t.height && e.y + e.height > t.y, b = (e) => {
   if (!e)
     return {
       x: 0,
@@ -224,11 +165,11 @@ const T = oe(() => {
     width: t.width,
     height: t.height
   };
-}, A = (e) => ({
+}, Y = (e) => ({
   x: e.x + e.width / 2,
   y: e.y + e.height / 2
-}), fe = (e, t) => {
-  const n = R(e);
+}), ye = (e, t) => {
+  const n = b(e);
   return {
     pixel: {
       x: t.x - n.x,
@@ -239,282 +180,394 @@ const T = oe(() => {
       y: (t.y - n.y) / n.height * 100
     }
   };
-}, X = (e, t) => {
-  const n = t.x - e.x, i = t.y - e.y;
-  return Math.sqrt(n * n + i * i);
-}, $ = (e, t) => {
+}, G = (e, t) => {
+  const n = t.x - e.x, o = t.y - e.y;
+  return Math.sqrt(n * n + o * o);
+}, J = (e, t) => {
   const n = Math.max(
     0,
     Math.min(e.x + e.width, t.x + t.width) - Math.max(e.x, t.x)
-  ), i = Math.max(
+  ), o = Math.max(
     0,
     Math.min(e.y + e.height, t.y + t.height) - Math.max(e.y, t.y)
-  ), a = n * i, l = e.width * e.height, s = t.width * t.height;
-  return (a / l * 100 + a / s * 100) / 2;
-}, M = (e, t) => e ? t.contains(e) : !1, me = (e) => {
-  var u, E;
-  const t = R(e.activeContainer.ref.value), n = A(t), i = ((u = e.pointerPosition.current.value) == null ? void 0 : u.x) ?? 0, a = ((E = e.pointerPosition.current.value) == null ? void 0 : E.y) ?? 0, s = !(t && i >= t.x && i <= t.x + t.width && a >= t.y && a <= t.y + t.height), d = e.draggingElements.value.map((r) => r.node), v = e.elements.value.filter((r) => {
-    if (!r.node || d.some(
-      (f) => f && M(r.node, f)
-    ))
-      return !1;
-    const o = R(r.node);
-    return o && t && K(o, t);
+  ), l = n * o, i = e.width * e.height, s = t.width * t.height;
+  return (l / i * 100 + l / s * 100) / 2;
+}, Q = "data-vue-dnd-kit-draggable", D = (e) => {
+  e.preventDefault();
+}, Ee = (e) => {
+  const {
+    elements: t,
+    draggingElements: n,
+    hovered: o,
+    selectedElements: l,
+    isDragging: i
+  } = T(), s = I(null), v = S(
+    () => {
+      var r;
+      return ((r = o.element.value) == null ? void 0 : r.node) === s.value;
+    }
+  ), c = S(
+    () => n.value.some((r) => r.node === s.value)
+  ), d = S(() => {
+    if (!s.value || !i.value) return !1;
+    const r = t.value.find(
+      (a) => a.node === s.value
+    );
+    return r != null && r.groups.length ? !n.value.some((a) => a.groups.length ? !a.groups.some(
+      (f) => r.groups.includes(f)
+    ) : !1) : !0;
+  });
+  return {
+    elementRef: s,
+    registerElement: () => {
+      if (!s.value) throw new Error("ElementRef is not set");
+      t.value.push({
+        node: s.value,
+        groups: (e == null ? void 0 : e.groups) ?? [],
+        layer: (e == null ? void 0 : e.layer) ?? null,
+        defaultLayer: (e == null ? void 0 : e.layer) ?? null,
+        events: (e == null ? void 0 : e.events) ?? {},
+        data: (e == null ? void 0 : e.data) ?? void 0
+      }), s.value.addEventListener("dragstart", D), s.value.addEventListener("drag", D), s.value.setAttribute(Q, "true"), s.value.setAttribute("draggable", "false");
+    },
+    unregisterElement: () => {
+      var f, y, p, _;
+      const r = t.value.findIndex(
+        (L) => L.node === s.value
+      );
+      r !== -1 && t.value.splice(r, 1);
+      const a = l.value.findIndex(
+        (L) => L.node === s.value
+      );
+      a !== -1 && l.value.splice(a, 1), (f = s.value) == null || f.removeEventListener("dragstart", D), (y = s.value) == null || y.removeEventListener("drag", D), (p = s.value) == null || p.removeAttribute(Q), (_ = s.value) == null || _.removeAttribute("draggable");
+    },
+    isDragging: c,
+    isOvered: v,
+    isAllowed: d
+  };
+}, R = (e, t) => e ? t.contains(e) : !1, pe = (e) => {
+  var u, m;
+  const t = b(e.activeContainer.ref.value), n = Y(t), o = ((u = e.pointerPosition.current.value) == null ? void 0 : u.x) ?? 0, l = ((m = e.pointerPosition.current.value) == null ? void 0 : m.y) ?? 0, s = !(t && o >= t.x && o <= t.x + t.width && l >= t.y && l <= t.y + t.height), v = e.draggingElements.value.map((r) => r.node), c = e.elements.value.filter((r) => {
+    if (!r.node) return !1;
+    const a = b(r.node);
+    return a && t && j(a, t);
   }).map((r) => {
-    const o = R(r.node), f = A(o), p = i >= o.x && i <= o.x + o.width && a >= o.y && a <= o.y + o.height, D = $(o, t), x = X(n, f), c = e.elements.value.filter(
-      (g) => g !== r && g.node && r.node && M(r.node, g.node)
+    const a = b(r.node), f = Y(a), y = o >= a.x && o <= a.x + a.width && l >= a.y && l <= a.y + a.height, p = J(a, t), _ = G(n, f), L = e.elements.value.filter(
+      (C) => C !== r && C.node && r.node && R(r.node, C.node)
     ).length;
     return {
       element: r,
       node: r.node,
-      isPointerInElement: p,
-      overlapPercent: D,
-      depth: c,
-      centerDistance: x
+      isPointerInElement: y,
+      overlapPercent: p,
+      depth: L,
+      centerDistance: _
     };
-  }).sort((r, o) => {
+  }).sort((r, a) => {
     if (!s) {
-      if (r.isPointerInElement && o.isPointerInElement)
-        return o.depth - r.depth;
-      if (r.isPointerInElement !== o.isPointerInElement)
+      if (r.isPointerInElement && a.isPointerInElement)
+        return a.depth - r.depth;
+      if (r.isPointerInElement !== a.isPointerInElement)
         return r.isPointerInElement ? -1 : 1;
     }
-    return Math.abs(r.overlapPercent - o.overlapPercent) <= 1 ? r.centerDistance - o.centerDistance : o.overlapPercent - r.overlapPercent;
-  }), h = e.zones.value.filter((r) => {
-    if (!r.node || d.some(
-      (f) => f && M(r.node, f)
+    return Math.abs(r.overlapPercent - a.overlapPercent) <= 1 ? r.centerDistance - a.centerDistance : a.overlapPercent - r.overlapPercent;
+  }), d = e.zones.value.filter((r) => {
+    if (!r.node || v.some(
+      (f) => f && R(r.node, f)
     ))
       return !1;
-    const o = R(r.node);
-    return o && t && K(o, t);
+    const a = b(r.node);
+    return a && t && j(a, t);
   }).map((r) => {
-    const o = R(r.node), f = A(o), p = i >= o.x && i <= o.x + o.width && a >= o.y && a <= o.y + o.height, D = $(o, t), x = X(n, f), c = e.zones.value.filter(
-      (g) => g !== r && g.node && r.node && M(r.node, g.node)
+    const a = b(r.node), f = Y(a), y = o >= a.x && o <= a.x + a.width && l >= a.y && l <= a.y + a.height, p = J(a, t), _ = G(n, f), L = e.zones.value.filter(
+      (C) => C !== r && C.node && r.node && R(r.node, C.node)
     ).length;
     return {
       zone: r,
       node: r.node,
-      isPointerInElement: p,
-      overlapPercent: D,
-      depth: c,
-      centerDistance: x
+      isPointerInElement: y,
+      overlapPercent: p,
+      depth: L,
+      centerDistance: _
     };
-  }).sort((r, o) => {
+  }).sort((r, a) => {
     if (!s) {
-      if (r.isPointerInElement && o.isPointerInElement)
-        return o.depth - r.depth;
-      if (r.isPointerInElement !== o.isPointerInElement)
+      if (r.isPointerInElement && a.isPointerInElement)
+        return a.depth - r.depth;
+      if (r.isPointerInElement !== a.isPointerInElement)
         return r.isPointerInElement ? -1 : 1;
     }
-    return Math.abs(r.overlapPercent - o.overlapPercent) <= 1 ? r.centerDistance - o.centerDistance : o.overlapPercent - r.overlapPercent;
+    return Math.abs(r.overlapPercent - a.overlapPercent) <= 1 ? r.centerDistance - a.centerDistance : a.overlapPercent - r.overlapPercent;
   });
   return [
-    ...v.map((r) => r.node),
-    ...h.map((r) => r.node)
+    ...c.map((r) => r.node),
+    ...d.map((r) => r.node)
   ];
-}, he = (e) => {
+}, Pe = (e, t) => {
+  const { pointerPosition: n, keyboard: o } = T(), l = (t == null ? void 0 : t.moveStep) || 10;
+  return {
+    onKeyboardStart: (c) => {
+      var r;
+      D(c);
+      const d = b(e.value);
+      (r = e.value) == null || r.blur();
+      const u = d.x + d.width / 2, m = d.y + d.height / 2;
+      n.start.value = {
+        x: u,
+        y: m
+      }, n.current.value = {
+        x: u,
+        y: m
+      }, n.offset.pixel.value = {
+        x: d.width / 2,
+        y: d.height / 2
+      }, n.offset.percent.value = {
+        x: 50,
+        y: 50
+      };
+    },
+    onKeyboardMove: () => {
+      if (!n.current.value) return;
+      const c = n.current.value.x, d = n.current.value.y;
+      let u = c, m = d;
+      o.w.value && (m -= l), o.s.value && (m += l), o.a.value && (u -= l), o.d.value && (u += l), n.current.value = {
+        x: u,
+        y: m
+      };
+    },
+    onKeyboardEnd: () => {
+      n.current.value = null, n.start.value = null, n.offset.pixel.value = null, n.offset.percent.value = null;
+    }
+  };
+}, we = (e) => {
   const t = T();
   return {
-    onPointerStart: (l) => {
-      t.pointerPosition.start.value = { x: l.clientX, y: l.clientY }, t.pointerPosition.current.value = {
-        x: l.clientX,
-        y: l.clientY
+    onPointerStart: (i) => {
+      t.pointerPosition.start.value = { x: i.clientX, y: i.clientY }, t.pointerPosition.current.value = {
+        x: i.clientX,
+        y: i.clientY
       };
-      const { pixel: s, percent: d } = fe(e.value, {
-        x: l.clientX,
-        y: l.clientY
+      const { pixel: s, percent: v } = ye(e.value, {
+        x: i.clientX,
+        y: i.clientY
       });
-      t.pointerPosition.offset.pixel.value = s, t.pointerPosition.offset.percent.value = d;
+      t.pointerPosition.offset.pixel.value = s, t.pointerPosition.offset.percent.value = v;
     },
-    onPointerMove: (l) => {
+    onPointerMove: (i) => {
       t.pointerPosition.current.value = {
-        x: l.clientX,
-        y: l.clientY
+        x: i.clientX,
+        y: i.clientY
       };
     },
     onPointerEnd: () => {
       t.pointerPosition.current.value = null, t.pointerPosition.start.value = null, t.pointerPosition.offset.pixel.value = null, t.pointerPosition.offset.percent.value = null;
     }
   };
-}, Ee = (e, t) => {
-  const n = T(), { onPointerStart: i, onPointerMove: a, onPointerEnd: l } = he(e);
-  let s = null;
-  const d = (c) => {
-    var C, S;
-    const g = n.selectedElements.value.some(
-      (m) => m.node === c
+}, xe = (e, t) => {
+  var F, H;
+  const n = T(), { onPointerStart: o, onPointerMove: l, onPointerEnd: i } = we(e), { onKeyboardStart: s, onKeyboardMove: v, onKeyboardEnd: c } = Pe(
+    e,
+    t == null ? void 0 : t.keyboard
+  );
+  let d = null;
+  const u = (h) => {
+    var K, M;
+    const x = n.selectedElements.value.some(
+      (g) => g.node === h
     );
-    if (n.selectedElements.value.length && g)
-      return n.selectedElements.value.map((m) => {
-        var _, w;
+    if (n.selectedElements.value.length && x)
+      return n.selectedElements.value.map((g) => {
+        var E, k;
         return {
-          ...m,
-          initialHTML: ((_ = m.node) == null ? void 0 : _.outerHTML) ?? "",
-          initialRect: (w = m.node) == null ? void 0 : w.getBoundingClientRect()
+          ...g,
+          initialHTML: ((E = g.node) == null ? void 0 : E.outerHTML) ?? "",
+          initialRect: (k = g.node) == null ? void 0 : k.getBoundingClientRect()
         };
       });
     n.selectedElements.value = [];
-    const P = n.elements.value.find(
-      (m) => m.node === c
+    const w = n.elements.value.find(
+      (g) => g.node === h
     );
-    return P ? [
+    return w ? [
       {
-        ...P,
-        initialHTML: ((C = P.node) == null ? void 0 : C.outerHTML) ?? "",
-        initialRect: (S = P.node) == null ? void 0 : S.getBoundingClientRect()
+        ...w,
+        initialHTML: ((K = w.node) == null ? void 0 : K.outerHTML) ?? "",
+        initialRect: (M = w.node) == null ? void 0 : M.getBoundingClientRect()
       }
     ] : [];
-  }, v = (c) => {
-    if (!c)
+  }, m = (h) => {
+    if (!h)
       return { element: null, zone: null };
-    const g = Array.isArray(c) ? c : [c], P = n.draggingElements.value.map(
-      (m) => m.node
-    ), [C] = g.map(
-      (m) => n.elements.value.find((_) => _.node === m)
-    ).filter((m) => m ? m.groups.length ? !n.draggingElements.value.some(
-      (w) => w.groups.length ? !w.groups.some(
-        (O) => m.groups.includes(O)
+    const x = Array.isArray(h) ? h : [h], w = n.draggingElements.value.map(
+      (g) => g.node
+    ), K = x.map(
+      (g) => n.elements.value.find((E) => E.node === g)
+    ).filter((g) => !g || w.some(
+      (E) => E && (E === g.node || R(
+        g.node,
+        E
+      ))
+    ) ? !1 : g.groups.length ? !n.draggingElements.value.some(
+      (k) => k.groups.length ? !k.groups.some(
+        (A) => g.groups.includes(A)
       ) : !1
-    ) : !0 : !1), [S] = g.map((m) => {
-      const _ = n.zones.value.find((w) => w.node === m);
-      return !_ || P.some(
-        (w) => w && M(m, w)
-      ) || _.groups.length && !!n.draggingElements.value.some((O) => O.groups.length ? !O.groups.some((j) => _.groups.includes(j)) : !1) ? null : _;
-    });
+    ) : !0), M = x.map(
+      (g) => n.zones.value.find((E) => E.node === g)
+    ).filter((g) => !g || w.some(
+      (E) => E && (E === g.node || R(g.node, E))
+    ) ? !1 : g.groups.length && !!n.draggingElements.value.some((k) => k.groups.length ? !k.groups.some((A) => g.groups.includes(A)) : !1) ? null : !0);
     return {
-      element: C ?? null,
-      zone: S ?? null
+      element: K[0] ?? null,
+      zone: M[0] ?? null
     };
-  }, h = (t == null ? void 0 : t.sensor) || me, u = (c) => {
-    var C, S, m, _, w, O;
-    const g = n.hovered.element.value, P = n.hovered.zone.value;
-    n.hovered.element.value = c.element, n.hovered.zone.value = c.zone, n.hovered.element.value !== g && ((C = g == null ? void 0 : g.events) != null && C.onLeave && g.events.onLeave(n), (m = (S = n.hovered.element.value) == null ? void 0 : S.events) != null && m.onHover && n.hovered.element.value.events.onHover(n)), n.hovered.zone.value !== P && ((_ = P == null ? void 0 : P.events) != null && _.onLeave && P.events.onLeave(n), (O = (w = n.hovered.zone.value) == null ? void 0 : w.events) != null && O.onHover && n.hovered.zone.value.events.onHover(n));
-  }, E = ae(() => {
-    const c = h(n), g = v(c);
-    u(g);
-  }, (t == null ? void 0 : t.throttle) ?? 0), r = () => {
-    E(), s = requestAnimationFrame(r);
-  }, o = () => r(), f = () => {
-    s !== null && (cancelAnimationFrame(s), s = null);
+  }, r = ((F = t == null ? void 0 : t.sensor) == null ? void 0 : F.setup) || pe, a = (h) => {
+    var K, M, g, E, k, A;
+    const x = n.hovered.element.value, w = n.hovered.zone.value;
+    n.hovered.element.value = h.element, n.hovered.zone.value = h.zone, n.hovered.element.value !== x && ((K = x == null ? void 0 : x.events) != null && K.onLeave && x.events.onLeave(n), (g = (M = n.hovered.element.value) == null ? void 0 : M.events) != null && g.onHover && n.hovered.element.value.events.onHover(n)), n.hovered.zone.value !== w && ((E = w == null ? void 0 : w.events) != null && E.onLeave && w.events.onLeave(n), (A = (k = n.hovered.zone.value) == null ? void 0 : k.events) != null && A.onHover && n.hovered.zone.value.events.onHover(n));
+  }, f = fe(() => {
+    const h = r(n), x = m(h);
+    a(x);
+  }, ((H = t == null ? void 0 : t.sensor) == null ? void 0 : H.throttle) ?? 0), y = () => {
+    f(), d = requestAnimationFrame(y);
+  }, p = () => y(), _ = () => {
+    d !== null && (cancelAnimationFrame(d), d = null);
   };
   return {
-    activate: (c) => {
-      n.draggingElements.value = d(e.value), i(c), o();
+    activate: (h) => {
+      n.draggingElements.value = u(e.value), h instanceof PointerEvent ? o(h) : s(h), p();
     },
-    track: (c) => {
-      a(c);
+    track: (h) => {
+      h instanceof KeyboardEvent ? v() : l(h);
     },
-    deactivate: () => {
-      var c, g;
-      l(), n.hovered.zone.value ? (g = (c = n.hovered.zone.value.events).onDrop) == null || g.call(c, n) : n.draggingElements.value.forEach(
-        (P) => {
-          var C, S;
-          return (S = (C = P.events).onEnd) == null ? void 0 : S.call(C, n);
+    deactivate: (h = !0) => {
+      var x, w;
+      i(), c(), h && (n.hovered.zone.value ? (w = (x = n.hovered.zone.value.events).onDrop) == null || w.call(x, n) : n.draggingElements.value.forEach(
+        (K) => {
+          var M, g;
+          return (g = (M = K.events).onEnd) == null ? void 0 : g.call(M, n);
         }
-      ), n.draggingElements.value = [], n.selectedElements.value = [], n.hovered.zone.value = null, n.hovered.element.value = null, f();
+      ), n.selectedElements.value = []), n.draggingElements.value = [], n.hovered.zone.value = null, n.hovered.element.value = null, _();
     }
   };
-}, we = (e) => {
+}, De = ee(() => {
+  let e = "", t = "", n = "", o = null, l = null, i = null, s = null;
+  const { activeContainer: v, keyboard: c } = T(), d = () => {
+    const f = document.body;
+    e = f.style.userSelect, f.style.userSelect = "none", window.addEventListener("contextmenu", D), window.addEventListener("selectstart", D), window.addEventListener("touchstart", D), window.addEventListener("touchmove", D);
+  }, u = () => {
+    const f = document.body;
+    f.style.userSelect = e, f.style.touchAction = t, f.style.overscrollBehavior = n, window.removeEventListener("contextmenu", D), window.removeEventListener("selectstart", D), window.removeEventListener("touchstart", D), window.removeEventListener("touchmove", D);
+  }, m = () => {
+    o && (document.removeEventListener("pointermove", o), o = null), l && (document.removeEventListener("pointerup", () => l == null ? void 0 : l()), l = null), i && (document.removeEventListener("wheel", i), i = null), s && (document.removeEventListener("keydown", s), document.removeEventListener("keypress", s), document.removeEventListener("keyup", s), s = null);
+  }, r = (f, y, p) => {
+    m(), f.target.blur(), p != null && p.container && (v.component.value = ce(p.container));
+    const { activate: _, track: L, deactivate: C } = xe(y, p);
+    l = (P = !0) => {
+      v.component.value = null, u(), C(P), m();
+    }, o = (P) => L(P), i = (P) => L(P), s = (P) => {
+      P.type === "keydown" && a(P, !0), P.type === "keypress" && a(P, !0), P.type === "keyup" && (P.code === "Escape" && (l == null || l(!1)), P.code === "Enter" && (l == null || l()), a(P, !1)), L(P);
+    }, d(), _(f), document.addEventListener("pointermove", o), document.addEventListener("pointerup", () => l == null ? void 0 : l()), document.addEventListener("wheel", i), document.addEventListener("keydown", s), document.addEventListener("keypress", s), document.addEventListener("keyup", s);
+  }, a = (f, y = !0) => {
+    f.code === "KeyW" && (c.w.value = y), f.code === "KeyA" && (c.a.value = y), f.code === "KeyS" && (c.s.value = y), f.code === "KeyD" && (c.d.value = y);
+  };
+  return {
+    handleDragStart: r
+  };
+}), ke = (e) => {
   const {
     elementRef: t,
     registerElement: n,
-    unregisterElement: i,
-    isDragging: a,
-    isOvered: l,
+    unregisterElement: o,
+    isDragging: l,
+    isOvered: i,
     isAllowed: s
-  } = ve(e), { disableInteractions: d, enableInteractions: v } = ge(), { activeContainer: h, pointerPosition: u } = T(), { activate: E, track: r, deactivate: o } = Ee(t, {
-    throttle: e == null ? void 0 : e.throttle,
-    sensor: e == null ? void 0 : e.sensor
-  }), f = (c) => {
-    e != null && e.container && (h.component.value = le(e.container)), d(), E(c), document.addEventListener("pointermove", p), document.addEventListener("pointerup", x), document.addEventListener("wheel", D);
-  }, p = (c) => r(c), D = (c) => r(c), x = () => {
-    h.component.value = null, v(), o(), document.removeEventListener("pointermove", p), document.removeEventListener("pointerup", x), document.removeEventListener("wheel", D);
-  };
-  return V(n), H(i), {
-    pointerPosition: u,
+  } = Ee(e), { pointerPosition: v } = T(), { handleDragStart: c } = De(), d = (u) => c(u, t, e);
+  return U(n), X(o), {
+    pointerPosition: v,
     elementRef: t,
-    isDragging: a,
-    isOvered: l,
+    isDragging: l,
+    isOvered: i,
     isAllowed: s,
-    handleDragStart: f
+    handleDragStart: d
   };
-}, ye = (e) => {
-  const { zones: t, hovered: n, draggingElements: i, isDragging: a } = T(), l = y(null), s = I(() => {
+}, _e = (e) => {
+  const { zones: t, hovered: n, draggingElements: o, isDragging: l } = T(), i = I(null), s = S(() => {
     var u;
-    return ((u = n.zone.value) == null ? void 0 : u.node) === l.value;
-  }), d = I(() => {
-    if (!l.value || !a.value) return !1;
+    return ((u = n.zone.value) == null ? void 0 : u.node) === i.value;
+  }), v = S(() => {
+    if (!i.value || !l.value) return !1;
     const u = t.value.find(
-      (E) => E.node === l.value
+      (m) => m.node === i.value
     );
-    return u != null && u.groups.length ? !i.value.some((E) => E.groups.length ? !E.groups.some(
+    return u != null && u.groups.length ? !o.value.some((m) => m.groups.length ? !m.groups.some(
       (r) => u.groups.includes(r)
     ) : !1) : !0;
   });
-  return { elementRef: l, registerZone: () => {
-    if (!l.value) throw new Error("elementRef is not set");
+  return { elementRef: i, registerZone: () => {
+    if (!i.value) throw new Error("elementRef is not set");
     t.value.push({
-      node: l.value,
+      node: i.value,
       groups: (e == null ? void 0 : e.groups) ?? [],
       events: (e == null ? void 0 : e.events) ?? {},
       data: (e == null ? void 0 : e.data) ?? void 0
-    }), l.value.setAttribute("data-dnd-droppable", "true");
+    }), i.value.setAttribute("data-dnd-droppable", "true");
   }, unregisterZone: () => {
-    if (!l.value) throw new Error("elementRef is not set");
+    if (!i.value) throw new Error("elementRef is not set");
     const u = t.value.findIndex(
-      (E) => E.node === l.value
+      (m) => m.node === i.value
     );
     u !== -1 && t.value.splice(u, 1);
-  }, isOvered: s, isAllowed: d };
-}, De = (e) => {
-  const { elementRef: t, registerZone: n, unregisterZone: i, isOvered: a, isAllowed: l } = ye(e);
-  return V(n), H(i), { elementRef: t, isOvered: a, isAllowed: l };
-}, _e = (e) => {
-  const { selectedElements: t, elements: n } = T(), i = I(
+  }, isOvered: s, isAllowed: v };
+}, Ce = (e) => {
+  const { elementRef: t, registerZone: n, unregisterZone: o, isOvered: l, isAllowed: i } = _e(e);
+  return U(n), X(o), { elementRef: t, isOvered: l, isAllowed: i };
+}, Me = (e) => {
+  const { selectedElements: t, elements: n } = T(), o = S(
     () => n.value.find((u) => u.node === e.value)
-  ), a = I(
+  ), l = S(
     () => t.value.some((u) => u.node === e.value)
-  ), l = I(() => e.value ? t.value.some(
-    (u) => u.node && M(
+  ), i = S(() => e.value ? t.value.some(
+    (u) => u.node && R(
       u.node,
       e.value
     )
-  ) : !1), s = I(() => e.value ? t.value.some(
-    (u) => u.node && M(
+  ) : !1), s = S(() => e.value ? t.value.some(
+    (u) => u.node && R(
       e.value,
       u.node
     )
-  ) : !1), d = () => {
-    i.value && (t.value = t.value.filter(
+  ) : !1), v = () => {
+    o.value && (t.value = t.value.filter(
       (u) => u.node !== e.value
     ));
-  }, v = () => {
-    i.value && (l.value && (t.value = t.value.filter(
-      (u) => u.node && !M(
+  }, c = () => {
+    o.value && (i.value && (t.value = t.value.filter(
+      (u) => u.node && !R(
         u.node,
         e.value
       )
     )), s.value && (t.value = t.value.filter(
-      (u) => u.node && !M(
+      (u) => u.node && !R(
         e.value,
         u.node
       )
-    )), t.value.push(i.value));
+    )), t.value.push(o.value));
   };
   return {
-    handleUnselect: d,
-    handleSelect: v,
+    handleUnselect: v,
+    handleSelect: c,
     handleToggleSelect: () => {
-      i.value && (t.value.some((u) => u.node === e.value) ? d() : v());
+      o.value && (t.value.some((u) => u.node === e.value) ? v() : c());
     },
-    isSelected: a,
-    isParentOfSelected: l
+    isSelected: l,
+    isParentOfSelected: i
   };
 };
 export {
-  Pe as default,
+  Se as default,
+  b as getBoundingBox,
   T as useDnDStore,
-  we as useDraggable,
-  De as useDroppable,
-  _e as useSelection
+  ke as useDraggable,
+  Ce as useDroppable,
+  Me as useSelection
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-dnd-kit/core",
-  "version": "0.3.0-beta",
+  "version": "0.5.1",
   "description": "Core functionality for Vue DnD Kit - a lightweight Vue 3 library for building performant and accessible drag and drop interfaces",
   "author": "ZiZIGY",
   "license": "MIT",

package/dist/managers/useInteractionManager.d.ts

@@ -1,4 +0,0 @@
-export declare const useInteractionManager: () => {
-    disableInteractions: () => void;
-    enableInteractions: () => void;
-};