@vue-dnd-kit/core 0.0.25-beta → 0.0.26-beta

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

@@ -1,6 +1,6 @@
-import { effectScope as ie, ref as p, computed as w, onMounted as F, onBeforeUnmount as U, defineComponent as N, createElementBlock as $, createCommentVNode as se, unref as ee, openBlock as R, normalizeStyle as te, Fragment as ae, renderList as ue, createBlock as ce, resolveDynamicComponent as ve, renderSlot as de, createVNode as ge, markRaw as he } from "vue";
-let ne = !1, X;
-const I = () => (ne || (X = ie(!0).run(() => ({
+import { effectScope as de, ref as E, computed as w, onMounted as A, onBeforeUnmount as U, defineComponent as ae, createElementBlock as $, createCommentVNode as ge, unref as re, openBlock as R, normalizeStyle as oe, Fragment as fe, renderList as he, createBlock as me, resolveDynamicComponent as pe, watch as ue, nextTick as ye, getCurrentScope as Ee, onScopeDispose as we, shallowRef as W, toValue as N, getCurrentInstance as Pe, markRaw as xe } from "vue";
+let le = !1, X;
+const C = () => (le || (X = de(!0).run(() => ({
   /** Whether any drag operation is currently active */
   isDragging: w(
     () => X.draggingElements.value.length > 0
@@ -8,58 +8,58 @@ const I = () => (ne || (X = ie(!0).run(() => ({
   /** Active container where dragging occurs */
   activeContainer: {
     /** Component instance of active container */
-    component: p(null),
+    component: E(null),
     /** DOM reference of active container */
-    ref: p(null)
+    ref: E(null)
   },
   /** All registered draggable elements */
-  elements: p([]),
+  elements: E([]),
   /** Elements currently being dragged */
-  draggingElements: p([]),
+  draggingElements: E([]),
   /** Elements currently selected (for multi-drag) */
-  selectedElements: p([]),
+  selectedElements: E([]),
   /** All registered drop zones */
-  zones: p([]),
+  zones: E([]),
   /** Current hover states */
   hovered: {
     /** Currently hovered drop zone */
-    zone: p(null),
+    zone: E(null),
     /** Currently hovered draggable element */
-    element: p(null)
+    element: E(null)
   },
   /** Pointer position tracking */
   pointerPosition: {
     /** Current pointer coordinates */
-    current: p(null),
+    current: E(null),
     /** Initial coordinates when drag started */
-    start: p(null),
+    start: E(null),
     /** Offset from start position */
     offset: {
       /** Offset as percentage of container */
-      percent: p(null),
+      percent: E(null),
       /** Offset in pixels */
-      pixel: p(null)
+      pixel: E(null)
     }
   }
-})), ne = !0), X), fe = () => {
-  const t = p(null), { draggingElements: e, pointerPosition: i, isDragging: u, activeContainer: c } = I();
-  return F(() => {
+})), le = !0), X), De = () => {
+  const t = E(null), { draggingElements: e, pointerPosition: l, isDragging: u, activeContainer: c } = C();
+  return A(() => {
     c.ref = t;
   }), U(() => {
     c.ref.value = null;
   }), {
     elementRef: t,
     draggingElements: e,
-    pointerPosition: i,
+    pointerPosition: l,
     isDragging: u
   };
-}, me = ["innerHTML"], pe = /* @__PURE__ */ N({
+}, Ie = ["innerHTML"], Me = /* @__PURE__ */ ae({
   __name: "DefaultOverlay",
   setup(t) {
-    const { elementRef: e, pointerPosition: i, isDragging: u, draggingElements: c } = fe(), n = w(() => {
-      var s, h, f, y;
+    const { elementRef: e, pointerPosition: l, isDragging: u, draggingElements: c } = De(), r = w(() => {
+      var s, d, h, p;
       return {
-        transform: `translate3d(${(((s = i.current.value) == null ? void 0 : s.x) ?? 0) - (((h = i.offset.pixel.value) == null ? void 0 : h.x) ?? 0)}px, ${(((f = i.current.value) == null ? void 0 : f.y) ?? 0) - (((y = i.offset.pixel.value) == null ? void 0 : y.y) ?? 0)}px, 0)`,
+        transform: `translate3d(${(((s = l.current.value) == null ? void 0 : s.x) ?? 0) - (((d = l.offset.pixel.value) == null ? void 0 : d.x) ?? 0)}px, ${(((h = l.current.value) == null ? void 0 : h.y) ?? 0) - (((p = l.offset.pixel.value) == null ? void 0 : p.y) ?? 0)}px, 0)`,
         zIndex: 1e3,
         position: "fixed",
         top: 0,
@@ -67,66 +67,156 @@ const I = () => (ne || (X = ie(!0).run(() => ({
         transition: "0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"
       };
     });
-    return (s, h) => ee(u) ? (R(), $("div", {
+    return (s, d) => re(u) ? (R(), $("div", {
       key: 0,
       ref_key: "elementRef",
       ref: e,
-      style: te(n.value)
+      style: oe(r.value)
     }, [
-      (R(!0), $(ae, null, ue(ee(c), (f, y) => {
-        var l, E;
+      (R(!0), $(fe, null, he(re(c), (h, p) => {
+        var o, g;
         return R(), $("div", {
-          key: y,
-          innerHTML: f.initialHTML,
-          style: te({
-            width: `${(l = f.initialRect) == null ? void 0 : l.width}px`,
-            height: `${(E = f.initialRect) == null ? void 0 : E.height}px`
+          key: p,
+          innerHTML: h.initialHTML,
+          style: oe({
+            width: `${(o = h.initialRect) == null ? void 0 : o.width}px`,
+            height: `${(g = h.initialRect) == null ? void 0 : g.height}px`
           })
-        }, null, 12, me);
+        }, null, 12, Ie);
       }), 128))
-    ], 4)) : se("", !0);
+    ], 4)) : ge("", !0);
   }
-}), ye = /* @__PURE__ */ N({
+}), Fe = /* @__PURE__ */ ae({
   __name: "DragOverlay",
   setup(t) {
-    const { activeContainer: e } = I(), i = w(
-      () => e.component.value ?? pe
+    const { activeContainer: e } = C(), l = w(
+      () => e.component.value ?? Me
     );
-    return (u, c) => (R(), ce(ve(i.value)));
+    return (u, c) => (R(), me(pe(l.value)));
   }
-}), Ie = /* @__PURE__ */ N({
-  __name: "DnDContext",
-  setup(t) {
-    const e = p(null);
-    return (i, u) => (R(), $("div", {
-      ref_key: "contextRef",
-      ref: e
-    }, [
-      de(i.$slots, "default"),
-      ge(ye)
-    ], 512));
-  }
-}), Ee = "data-dnd-draggable", Pe = (t) => {
+}), Se = "data-dnd-draggable";
+function Ce(t) {
+  return Ee() ? (we(t), !0) : !1;
+}
+const Le = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const _e = (t) => t != null, Y = () => {
+};
+function Oe(t) {
+  return Array.isArray(t) ? t : [t];
+}
+function ke(t, e, l) {
+  const u = ue(t, (...c) => (ye(() => u()), e(...c)), l);
+  return u;
+}
+const ce = Le ? window : void 0;
+function b(t) {
+  var e;
+  const l = N(t);
+  return (e = l == null ? void 0 : l.$el) != null ? e : l;
+}
+function Te() {
+  const t = W(!1), e = Pe();
+  return e && A(() => {
+    t.value = !0;
+  }, e), t;
+}
+function ze(t) {
+  const e = Te();
+  return w(() => (e.value, !!t()));
+}
+function He(t, e, l = {}) {
+  const {
+    root: u,
+    rootMargin: c = "0px",
+    threshold: r = 0,
+    window: s = ce,
+    immediate: d = !0
+  } = l, h = ze(() => s && "IntersectionObserver" in s), p = w(() => {
+    const n = N(t);
+    return Oe(n).map(b).filter(_e);
+  });
+  let o = Y;
+  const g = W(d), x = h.value ? ue(
+    () => [p.value, b(u), g.value],
+    ([n, v]) => {
+      if (o(), !g.value || !n.length)
+        return;
+      const m = new IntersectionObserver(
+        e,
+        {
+          root: b(v),
+          rootMargin: c,
+          threshold: r
+        }
+      );
+      n.forEach((f) => f && m.observe(f)), o = () => {
+        m.disconnect(), o = Y;
+      };
+    },
+    { immediate: d, flush: "post" }
+  ) : Y, y = () => {
+    o(), x(), g.value = !1;
+  };
+  return Ce(y), {
+    isSupported: h,
+    isActive: g,
+    pause() {
+      o(), g.value = !1;
+    },
+    resume() {
+      g.value = !0;
+    },
+    stop: y
+  };
+}
+function Re(t, e = {}) {
+  const {
+    window: l = ce,
+    scrollTarget: u,
+    threshold: c = 0,
+    rootMargin: r,
+    once: s = !1
+  } = e, d = W(!1), { stop: h } = He(
+    t,
+    (p) => {
+      let o = d.value, g = 0;
+      for (const x of p)
+        x.time >= g && (g = x.time, o = x.isIntersecting);
+      d.value = o, s && ke(d, () => {
+        h();
+      });
+    },
+    {
+      root: u,
+      window: l,
+      threshold: c,
+      rootMargin: N(r)
+    }
+  );
+  return d;
+}
+const Ae = (t) => {
   const {
     elements: e,
-    draggingElements: i,
+    draggingElements: l,
     hovered: u,
     selectedElements: c,
-    isDragging: n
-  } = I(), s = p(null), h = w(
+    isDragging: r
+  } = C(), s = E(null), d = w(
     () => {
-      var m;
-      return ((m = u.element.value) == null ? void 0 : m.node) === s.value;
+      var y;
+      return ((y = u.element.value) == null ? void 0 : y.node) === s.value;
     }
-  ), f = w(
-    () => i.value.some((m) => m.node === s.value)
-  ), y = w(() => {
-    if (!s.value || !n.value) return !1;
-    const m = e.value.find(
-      (D) => D.node === s.value
+  ), h = Re(s), p = w(
+    () => l.value.some((y) => y.node === s.value)
+  ), o = w(() => {
+    if (!s.value || !r.value) return !1;
+    const y = e.value.find(
+      (n) => n.node === s.value
     );
-    return m != null && m.groups.length ? !i.value.some((D) => D.groups.length ? !D.groups.some(
-      (r) => m.groups.includes(r)
+    return y != null && y.groups.length ? !l.value.some((n) => n.groups.length ? !n.groups.some(
+      (v) => y.groups.includes(v)
     ) : !1) : !0;
   });
   return {
@@ -139,37 +229,38 @@ const I = () => (ne || (X = ie(!0).run(() => ({
         layer: (t == null ? void 0 : t.layer) ?? null,
         defaultLayer: (t == null ? void 0 : t.layer) ?? null,
         events: (t == null ? void 0 : t.events) ?? {},
-        data: (t == null ? void 0 : t.data) ?? void 0
-      }), s.value.setAttribute(Ee, "true");
+        data: (t == null ? void 0 : t.data) ?? void 0,
+        isVisible: h.value
+      }), s.value.setAttribute(Se, "true");
     },
     unregisterElement: () => {
-      const m = e.value.findIndex(
-        (r) => r.node === s.value
+      const y = e.value.findIndex(
+        (v) => v.node === s.value
       );
-      m !== -1 && e.value.splice(m, 1);
-      const D = c.value.findIndex(
-        (r) => r.node === s.value
+      y !== -1 && e.value.splice(y, 1);
+      const n = c.value.findIndex(
+        (v) => v.node === s.value
       );
-      D !== -1 && c.value.splice(D, 1);
+      n !== -1 && c.value.splice(n, 1);
     },
-    isDragging: f,
-    isOvered: h,
-    isAllowed: y
+    isDragging: p,
+    isOvered: d,
+    isAllowed: o
   };
-}, we = () => {
-  let t = "", e = "", i = "";
+}, Ve = () => {
+  let t = "", e = "", l = "";
   const u = () => {
     const s = document.body;
-    t = s.style.userSelect, e = s.style.touchAction, i = s.style.overscrollBehavior, s.style.userSelect = "none", s.style.touchAction = "none", s.style.overscrollBehavior = "none", window.addEventListener("contextmenu", n), window.addEventListener("selectstart", n), window.addEventListener("touchstart", n), window.addEventListener("touchmove", n);
+    t = s.style.userSelect, e = s.style.touchAction, l = s.style.overscrollBehavior, s.style.userSelect = "none", s.style.touchAction = "none", s.style.overscrollBehavior = "none", window.addEventListener("contextmenu", r), window.addEventListener("selectstart", r), window.addEventListener("touchstart", r), window.addEventListener("touchmove", r);
   }, c = () => {
     const s = document.body;
-    s.style.userSelect = t, s.style.touchAction = e, s.style.overscrollBehavior = i, window.removeEventListener("contextmenu", n), window.removeEventListener("selectstart", n), window.removeEventListener("touchstart", n), window.removeEventListener("touchmove", n);
-  }, n = (s) => s.preventDefault();
+    s.style.userSelect = t, s.style.touchAction = e, s.style.overscrollBehavior = l, window.removeEventListener("contextmenu", r), window.removeEventListener("selectstart", r), window.removeEventListener("touchstart", r), window.removeEventListener("touchmove", r);
+  }, r = (s) => s.preventDefault();
   return {
     disableInteractions: u,
     enableInteractions: c
   };
-}, re = (t, e) => t.x < e.x + e.width && t.x + t.width > e.x && t.y < e.y + e.height && t.y + t.height > e.y, k = (t) => {
+}, se = (t, e) => t.x < e.x + e.width && t.x + t.width > e.x && t.y < e.y + e.height && t.y + t.height > e.y, k = (t) => {
   if (!t)
     return {
       x: 0,
@@ -192,274 +283,273 @@ const I = () => (ne || (X = ie(!0).run(() => ({
     width: e.width,
     height: e.height
   };
-}, Y = (t) => ({
+}, F = (t) => ({
   x: t.x + t.width / 2,
   y: t.y + t.height / 2
-}), xe = (t, e) => {
-  const i = k(t);
+}), Ze = (t, e) => {
+  const l = k(t);
   return {
     pixel: {
-      x: e.x - i.x,
-      y: e.y - i.y
+      x: e.x - l.x,
+      y: e.y - l.y
     },
     percent: {
-      x: (e.x - i.x) / i.width * 100,
-      y: (e.y - i.y) / i.height * 100
+      x: (e.x - l.x) / l.width * 100,
+      y: (e.y - l.y) / l.height * 100
     }
   };
-}, oe = (t, e) => {
-  const i = e.x - t.x, u = e.y - t.y;
-  return Math.sqrt(i * i + u * u);
-}, _ = (t, e) => t ? e.contains(t) : !1, De = (t) => {
-  const e = I();
+}, ie = (t, e) => {
+  const l = e.x - t.x, u = e.y - t.y;
+  return Math.sqrt(l * l + u * u);
+}, S = (t, e) => t ? e.contains(t) : !1, $e = (t) => {
+  const e = C();
   return {
-    onPointerStart: (n) => {
-      e.pointerPosition.start.value = { x: n.clientX, y: n.clientY }, e.pointerPosition.current.value = {
-        x: n.clientX,
-        y: n.clientY
+    onPointerStart: (r) => {
+      e.pointerPosition.start.value = { x: r.clientX, y: r.clientY }, e.pointerPosition.current.value = {
+        x: r.clientX,
+        y: r.clientY
       };
-      const { pixel: s, percent: h } = xe(t.value, {
-        x: n.clientX,
-        y: n.clientY
+      const { pixel: s, percent: d } = Ze(t.value, {
+        x: r.clientX,
+        y: r.clientY
       });
-      e.pointerPosition.offset.pixel.value = s, e.pointerPosition.offset.percent.value = h;
+      e.pointerPosition.offset.pixel.value = s, e.pointerPosition.offset.percent.value = d;
     },
-    onPointerMove: (n) => {
+    onPointerMove: (r) => {
       e.pointerPosition.current.value = {
-        x: n.clientX,
-        y: n.clientY
+        x: r.clientX,
+        y: r.clientY
       };
     },
     onPointerEnd: () => {
       e.pointerPosition.current.value = null, e.pointerPosition.start.value = null, e.pointerPosition.offset.pixel.value = null, e.pointerPosition.offset.percent.value = null;
     }
   };
-}, Ce = (t) => {
-  const e = I(), { onPointerStart: i, onPointerMove: u, onPointerEnd: c } = De(t);
-  let n = null;
-  const s = (r) => {
-    var v, C;
-    const d = e.selectedElements.value.some(
-      (P) => P.node === r
+}, Xe = (t) => {
+  const e = C(), { onPointerStart: l, onPointerMove: u, onPointerEnd: c } = $e(t);
+  let r = null;
+  const s = (n) => {
+    var f, I;
+    const v = e.selectedElements.value.some(
+      (P) => P.node === n
     );
-    if (e.selectedElements.value.length && d)
+    if (e.selectedElements.value.length && v)
       return e.selectedElements.value.map((P) => {
-        var M, T;
+        var L, H;
         return {
           ...P,
-          initialHTML: ((M = P.node) == null ? void 0 : M.outerHTML) ?? "",
-          initialRect: (T = P.node) == null ? void 0 : T.getBoundingClientRect()
+          initialHTML: ((L = P.node) == null ? void 0 : L.outerHTML) ?? "",
+          initialRect: (H = P.node) == null ? void 0 : H.getBoundingClientRect()
         };
       });
     e.selectedElements.value = [];
-    const g = e.elements.value.find(
-      (P) => P.node === r
+    const m = e.elements.value.find(
+      (P) => P.node === n
     );
-    return g ? [
+    return m ? [
       {
-        ...g,
-        initialHTML: ((v = g.node) == null ? void 0 : v.outerHTML) ?? "",
-        initialRect: (C = g.node) == null ? void 0 : C.getBoundingClientRect()
+        ...m,
+        initialHTML: ((f = m.node) == null ? void 0 : f.outerHTML) ?? "",
+        initialRect: (I = m.node) == null ? void 0 : I.getBoundingClientRect()
       }
     ] : [];
-  }, h = (r, d) => {
-    const g = Math.max(
+  }, d = (n, v) => {
+    const m = Math.max(
       0,
-      Math.min(r.x + r.width, d.x + d.width) - Math.max(r.x, d.x)
-    ), v = Math.max(
+      Math.min(n.x + n.width, v.x + v.width) - Math.max(n.x, v.x)
+    ), f = Math.max(
       0,
-      Math.min(r.y + r.height, d.y + d.height) - Math.max(r.y, d.y)
-    ), C = g * v, P = r.width * r.height, M = d.width * d.height;
-    return (C / P * 100 + C / M * 100) / 2;
-  }, f = () => {
-    var q, V, B, j, G, J, K, Q, W, b;
-    const r = k(e.activeContainer.ref.value), d = Y(r), g = ((q = e.pointerPosition.current.value) == null ? void 0 : q.x) ?? 0, v = ((V = e.pointerPosition.current.value) == null ? void 0 : V.y) ?? 0, P = !(r && g >= r.x && g <= r.x + r.width && v >= r.y && v <= r.y + r.height), M = e.draggingElements.value.map((o) => o.node), T = e.elements.value.filter((o) => {
-      if (!o.node || M.some(
-        (x) => x && _(o.node, x)
-      ) || o.groups.length && !!e.draggingElements.value.some(
-        (L) => L.groups.length ? !L.groups.some(
-          (S) => o.groups.includes(S)
+      Math.min(n.y + n.height, v.y + v.height) - Math.max(n.y, v.y)
+    ), I = m * f, P = n.width * n.height, L = v.width * v.height;
+    return (I / P * 100 + I / L * 100) / 2;
+  }, h = () => {
+    var q, B, G, j, J, K, Q, ee, te, ne;
+    const n = k(e.activeContainer.ref.value), v = F(n), m = ((q = e.pointerPosition.current.value) == null ? void 0 : q.x) ?? 0, f = ((B = e.pointerPosition.current.value) == null ? void 0 : B.y) ?? 0, P = !(n && m >= n.x && m <= n.x + n.width && f >= n.y && f <= n.y + n.height), L = e.draggingElements.value.map((i) => i.node), H = e.elements.value.filter((i) => {
+      if (!i.node || !i.isVisible || !i.node || L.some(
+        (D) => D && S(i.node, D)
+      ) || i.groups.length && !!e.draggingElements.value.some(
+        (M) => M.groups.length ? !M.groups.some(
+          (_) => i.groups.includes(_)
         ) : !1
       ))
         return !1;
-      const a = k(o.node);
-      return a && r && re(a, r);
-    }).map((o) => {
-      const a = k(o.node), x = Y(a), L = g >= a.x && g <= a.x + a.width && v >= a.y && v <= a.y + a.height, S = h(a, r), Z = oe(d, x), A = e.elements.value.filter(
-        (O) => O !== o && O.node && o.node && _(
-          o.node,
+      const a = k(i.node);
+      return a && n && se(a, n);
+    }).map((i) => {
+      const a = k(i.node), D = F(a), M = m >= a.x && m <= a.x + a.width && f >= a.y && f <= a.y + a.height, _ = d(a, n), V = ie(v, D), Z = e.elements.value.filter(
+        (O) => O !== i && O.node && i.node && S(
+          i.node,
           O.node
         )
       ).length;
       return {
-        element: o,
-        isPointerInElement: L,
-        overlapPercent: S,
-        depth: A,
-        centerDistance: Z
+        element: i,
+        isPointerInElement: M,
+        overlapPercent: _,
+        depth: Z,
+        centerDistance: V
       };
-    }).sort((o, a) => {
+    }).sort((i, a) => {
       if (!P) {
-        if (o.isPointerInElement && a.isPointerInElement)
-          return a.depth - o.depth;
-        if (o.isPointerInElement !== a.isPointerInElement)
-          return o.isPointerInElement ? -1 : 1;
+        if (i.isPointerInElement && a.isPointerInElement)
+          return a.depth - i.depth;
+        if (i.isPointerInElement !== a.isPointerInElement)
+          return i.isPointerInElement ? -1 : 1;
       }
-      return Math.abs(o.overlapPercent - a.overlapPercent) <= 1 ? o.centerDistance - a.centerDistance : a.overlapPercent - o.overlapPercent;
-    }), le = e.zones.value.filter((o) => {
-      if (!o.node || M.some(
-        (x) => x && _(o.node, x)
-      ) || o.groups.length && !!e.draggingElements.value.some((L) => L.groups.length ? !L.groups.some((S) => o.groups.includes(S)) : !1))
+      return Math.abs(i.overlapPercent - a.overlapPercent) <= 1 ? i.centerDistance - a.centerDistance : a.overlapPercent - i.overlapPercent;
+    }), ve = e.zones.value.filter((i) => {
+      if (!i.node || L.some(
+        (D) => D && S(i.node, D)
+      ) || i.groups.length && !!e.draggingElements.value.some((M) => M.groups.length ? !M.groups.some((_) => i.groups.includes(_)) : !1))
         return !1;
-      const a = k(o.node);
-      return a && r && re(a, r);
-    }).map((o) => {
-      const a = k(o.node), x = Y(a), L = g >= a.x && g <= a.x + a.width && v >= a.y && v <= a.y + a.height, S = h(a, r), Z = oe(d, x), A = e.zones.value.filter(
-        (O) => O !== o && O.node && o.node && _(o.node, O.node)
+      const a = k(i.node);
+      return a && n && se(a, n);
+    }).map((i) => {
+      const a = k(i.node), D = F(a), M = m >= a.x && m <= a.x + a.width && f >= a.y && f <= a.y + a.height, _ = d(a, n), V = ie(v, D), Z = e.zones.value.filter(
+        (O) => O !== i && O.node && i.node && S(i.node, O.node)
       ).length;
       return {
-        zone: o,
-        isPointerInElement: L,
-        overlapPercent: S,
-        depth: A,
-        centerDistance: Z
+        zone: i,
+        isPointerInElement: M,
+        overlapPercent: _,
+        depth: Z,
+        centerDistance: V
       };
-    }).sort((o, a) => {
+    }).sort((i, a) => {
       if (!P) {
-        if (o.isPointerInElement && a.isPointerInElement)
-          return a.depth - o.depth;
-        if (o.isPointerInElement !== a.isPointerInElement)
-          return o.isPointerInElement ? -1 : 1;
+        if (i.isPointerInElement && a.isPointerInElement)
+          return a.depth - i.depth;
+        if (i.isPointerInElement !== a.isPointerInElement)
+          return i.isPointerInElement ? -1 : 1;
       }
-      return Math.abs(o.overlapPercent - a.overlapPercent) <= 1 ? o.centerDistance - a.centerDistance : a.overlapPercent - o.overlapPercent;
-    }), z = e.hovered.element.value, H = e.hovered.zone.value;
-    e.hovered.element.value = ((B = T[0]) == null ? void 0 : B.element) ?? null, e.hovered.zone.value = ((j = le[0]) == null ? void 0 : j.zone) ?? null, e.hovered.element.value !== z && ((G = z == null ? void 0 : z.events) != null && G.onLeave && z.events.onLeave(e), (K = (J = e.hovered.element.value) == null ? void 0 : J.events) != null && K.onHover && e.hovered.element.value.events.onHover(e)), e.hovered.zone.value !== H && ((Q = H == null ? void 0 : H.events) != null && Q.onLeave && H.events.onLeave(e), (b = (W = e.hovered.zone.value) == null ? void 0 : W.events) != null && b.onHover && e.hovered.zone.value.events.onHover(e)), n = requestAnimationFrame(f);
-  }, y = () => {
-    f();
-  }, l = () => {
-    n !== null && (cancelAnimationFrame(n), n = null);
+      return Math.abs(i.overlapPercent - a.overlapPercent) <= 1 ? i.centerDistance - a.centerDistance : a.overlapPercent - i.overlapPercent;
+    }), T = e.hovered.element.value, z = e.hovered.zone.value;
+    e.hovered.element.value = ((G = H[0]) == null ? void 0 : G.element) ?? null, e.hovered.zone.value = ((j = ve[0]) == null ? void 0 : j.zone) ?? null, e.hovered.element.value !== T && ((J = T == null ? void 0 : T.events) != null && J.onLeave && T.events.onLeave(e), (Q = (K = e.hovered.element.value) == null ? void 0 : K.events) != null && Q.onHover && e.hovered.element.value.events.onHover(e)), e.hovered.zone.value !== z && ((ee = z == null ? void 0 : z.events) != null && ee.onLeave && z.events.onLeave(e), (ne = (te = e.hovered.zone.value) == null ? void 0 : te.events) != null && ne.onHover && e.hovered.zone.value.events.onHover(e)), r = requestAnimationFrame(h);
+  }, p = () => {
+    h();
+  }, o = () => {
+    r !== null && (cancelAnimationFrame(r), r = null);
   };
   return {
-    activate: (r) => {
-      e.draggingElements.value = s(t.value), i(r), y();
+    activate: (n) => {
+      e.draggingElements.value = s(t.value), l(n), p();
     },
-    track: (r) => {
-      u(r);
+    track: (n) => {
+      u(n);
     },
     deactivate: () => {
-      var r, d;
-      c(), e.hovered.zone.value ? (d = (r = e.hovered.zone.value.events).onDrop) == null || d.call(r, e) : e.draggingElements.value.forEach(
-        (g) => {
-          var v, C;
-          return (C = (v = g.events).onEnd) == null ? void 0 : C.call(v, e);
+      var n, v;
+      c(), e.hovered.zone.value ? (v = (n = e.hovered.zone.value.events).onDrop) == null || v.call(n, e) : e.draggingElements.value.forEach(
+        (m) => {
+          var f, I;
+          return (I = (f = m.events).onEnd) == null ? void 0 : I.call(f, e);
         }
-      ), e.draggingElements.value = [], e.selectedElements.value = [], e.hovered.zone.value = null, e.hovered.element.value = null, l();
+      ), e.draggingElements.value = [], e.selectedElements.value = [], e.hovered.zone.value = null, e.hovered.element.value = null, o();
     }
   };
-}, Me = (t) => {
+}, Ue = (t) => {
   const {
     elementRef: e,
-    registerElement: i,
+    registerElement: l,
     unregisterElement: u,
     isDragging: c,
-    isOvered: n,
+    isOvered: r,
     isAllowed: s
-  } = Pe(t), { disableInteractions: h, enableInteractions: f } = we(), y = I(), { activate: l, track: E, deactivate: m } = Ce(e), D = (v) => {
-    t != null && t.container && (y.activeContainer.component.value = he(t.container)), h(), l(v), document.addEventListener("pointermove", r), document.addEventListener("pointerup", g), document.addEventListener("wheel", d);
-  }, r = (v) => {
-    E(v);
-  }, d = (v) => {
-    E(v);
-  }, g = () => {
-    y.activeContainer.component.value = null, f(), m(), document.removeEventListener("pointermove", r), document.removeEventListener("pointerup", g), document.removeEventListener("wheel", d);
+  } = Ae(t), { disableInteractions: d, enableInteractions: h } = Ve(), p = C(), { activate: o, track: g, deactivate: x } = Xe(e), y = (f) => {
+    t != null && t.container && (p.activeContainer.component.value = xe(t.container)), d(), o(f), document.addEventListener("pointermove", n), document.addEventListener("pointerup", m), document.addEventListener("wheel", v);
+  }, n = (f) => {
+    g(f);
+  }, v = (f) => {
+    g(f);
+  }, m = () => {
+    p.activeContainer.component.value = null, h(), x(), document.removeEventListener("pointermove", n), document.removeEventListener("pointerup", m), document.removeEventListener("wheel", v);
   };
-  return F(i), U(u), {
-    pointerPosition: y.pointerPosition,
+  return A(l), U(u), {
+    pointerPosition: p.pointerPosition,
     elementRef: e,
     isDragging: c,
-    isOvered: n,
+    isOvered: r,
     isAllowed: s,
-    handleDragStart: D
+    handleDragStart: y
   };
-}, Le = (t) => {
-  const { zones: e, hovered: i, draggingElements: u, isDragging: c } = I(), n = p(null), s = w(() => {
-    var l;
-    return ((l = i.zone.value) == null ? void 0 : l.node) === n.value;
-  }), h = w(() => {
-    if (!n.value || !c.value) return !1;
-    const l = e.value.find(
-      (E) => E.node === n.value
+}, Ye = (t) => {
+  const { zones: e, hovered: l, draggingElements: u, isDragging: c } = C(), r = E(null), s = w(() => {
+    var o;
+    return ((o = l.zone.value) == null ? void 0 : o.node) === r.value;
+  }), d = w(() => {
+    if (!r.value || !c.value) return !1;
+    const o = e.value.find(
+      (g) => g.node === r.value
     );
-    return l != null && l.groups.length ? !u.value.some((E) => E.groups.length ? !E.groups.some(
-      (m) => l.groups.includes(m)
+    return o != null && o.groups.length ? !u.value.some((g) => g.groups.length ? !g.groups.some(
+      (x) => o.groups.includes(x)
     ) : !1) : !0;
   });
-  return { elementRef: n, registerZone: () => {
-    if (!n.value) throw new Error("elementRef is not set");
+  return { elementRef: r, registerZone: () => {
+    if (!r.value) throw new Error("elementRef is not set");
     e.value.push({
-      node: n.value,
+      node: r.value,
       groups: (t == null ? void 0 : t.groups) ?? [],
       events: (t == null ? void 0 : t.events) ?? {},
       data: (t == null ? void 0 : t.data) ?? void 0
-    }), n.value.setAttribute("data-dnd-droppable", "true");
+    }), r.value.setAttribute("data-dnd-droppable", "true");
   }, unregisterZone: () => {
-    if (!n.value) throw new Error("elementRef is not set");
-    const l = e.value.findIndex(
-      (E) => E.node === n.value
+    if (!r.value) throw new Error("elementRef is not set");
+    const o = e.value.findIndex(
+      (g) => g.node === r.value
     );
-    l !== -1 && e.value.splice(l, 1);
-  }, isOvered: s, isAllowed: h };
-}, Se = (t) => {
-  const { elementRef: e, registerZone: i, unregisterZone: u, isOvered: c, isAllowed: n } = Le(t);
-  return F(i), U(u), { elementRef: e, isOvered: c, isAllowed: n };
-}, Oe = (t) => {
-  const { selectedElements: e, elements: i } = I(), u = w(
-    () => i.value.find((l) => l.node === t.value)
+    o !== -1 && e.value.splice(o, 1);
+  }, isOvered: s, isAllowed: d };
+}, We = (t) => {
+  const { elementRef: e, registerZone: l, unregisterZone: u, isOvered: c, isAllowed: r } = Ye(t);
+  return A(l), U(u), { elementRef: e, isOvered: c, isAllowed: r };
+}, Ne = (t) => {
+  const { selectedElements: e, elements: l } = C(), u = w(
+    () => l.value.find((o) => o.node === t.value)
   ), c = w(
-    () => e.value.some((l) => l.node === t.value)
-  ), n = w(() => t.value ? e.value.some(
-    (l) => l.node && _(
-      l.node,
+    () => e.value.some((o) => o.node === t.value)
+  ), r = w(() => t.value ? e.value.some(
+    (o) => o.node && S(
+      o.node,
       t.value
     )
   ) : !1), s = w(() => t.value ? e.value.some(
-    (l) => l.node && _(
+    (o) => o.node && S(
       t.value,
-      l.node
+      o.node
     )
-  ) : !1), h = () => {
+  ) : !1), d = () => {
     u.value && (e.value = e.value.filter(
-      (l) => l.node !== t.value
+      (o) => o.node !== t.value
     ));
-  }, f = () => {
-    u.value && (n.value && (e.value = e.value.filter(
-      (l) => l.node && !_(
-        l.node,
+  }, h = () => {
+    u.value && (r.value && (e.value = e.value.filter(
+      (o) => o.node && !S(
+        o.node,
         t.value
       )
     )), s.value && (e.value = e.value.filter(
-      (l) => l.node && !_(
+      (o) => o.node && !S(
         t.value,
-        l.node
+        o.node
       )
     )), e.value.push(u.value));
   };
   return {
-    handleUnselect: h,
-    handleSelect: f,
+    handleUnselect: d,
+    handleSelect: h,
     handleToggleSelect: () => {
-      u.value && (e.value.some((l) => l.node === t.value) ? h() : f());
+      u.value && (e.value.some((o) => o.node === t.value) ? d() : h());
     },
     isSelected: c,
-    isParentOfSelected: n
+    isParentOfSelected: r
   };
 };
 export {
-  Ie as DnDContext,
-  ye as DragOverlay,
+  Fe as DragOverlay,
   k as getBoundingBox,
-  I as useDnDStore,
-  Me as useDraggable,
-  Se as useDroppable,
-  Oe as useSelection
+  C as useDnDStore,
+  Ue as useDraggable,
+  We as useDroppable,
+  Ne as useSelection
 };