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

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

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