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

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

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