@vue-dnd-kit/core 2.1.4 → 2.2.0

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

@@ -1,43 +1,43 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dnd-kit-preview{transform-origin:0 0;will-change:transform;transition:all .3s cubic-bezier(.165,.84,.44,1)}.dnd-kit-preview-container{position:fixed;top:0;left:0;pointer-events:none;cursor:grabbing;z-index:9999}")),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
-import { shallowRef as Z, ref as oe, reactive as U, computed as b, watch as te, onScopeDispose as We, onMounted as X, onBeforeUnmount as $, inject as Pe, defineComponent as Be, useTemplateRef as _e, unref as H, openBlock as L, createElementBlock as W, normalizeStyle as Ce, renderSlot as me, Fragment as he, renderList as je, createBlock as J, resolveDynamicComponent as be, createCommentVNode as Je, provide as Qe, Teleport as et, createElementVNode as tt, mergeProps as nt } from "vue";
-const _ = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dnd-kit-preview{transform-origin:0 0;will-change:transform}.dnd-kit-preview-container{position:fixed;top:0;left:0;pointer-events:none;cursor:grabbing;z-index:9999}")),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+import { shallowRef as V, ref as oe, reactive as $, computed as b, watch as te, onScopeDispose as je, onMounted as X, onBeforeUnmount as Z, inject as Pe, defineComponent as Be, useTemplateRef as Oe, unref as q, openBlock as L, createElementBlock as j, normalizeStyle as Ce, renderSlot as me, Fragment as he, renderList as We, createBlock as J, resolveDynamicComponent as be, createCommentVNode as Je, provide as Qe, Teleport as et, createElementVNode as tt, mergeProps as nt } from "vue";
+const O = {
   SELECT_AREA: "data-dnd-kit-select-area",
   DRAGGABLE: "data-dnd-kit-draggable",
   DROPPABLE: "data-dnd-kit-droppable",
   CONSTRAINT_AREA: "data-dnd-kit-constraint-area"
-}, G = {
-  SELECT_AREA: `[${_.SELECT_AREA}]`,
-  DRAGGABLE: `[${_.DRAGGABLE}]`,
-  CONSTRAINT_AREA: `[${_.CONSTRAINT_AREA}]`
+}, H = {
+  SELECT_AREA: `[${O.SELECT_AREA}]`,
+  DRAGGABLE: `[${O.DRAGGABLE}]`,
+  CONSTRAINT_AREA: `[${O.CONSTRAINT_AREA}]`
 }, xe = "VueDnDKitProvider", Ie = (e, t, n, s) => {
-  const a = /* @__PURE__ */ new Set();
+  const i = /* @__PURE__ */ new Set();
   return t.forEach((o) => {
-    const i = e.get(o), r = s ? s(o) : i?.disabled;
-    if (!i || r) return;
-    const g = i.modifier?.keys, c = i.modifier?.method;
+    const a = e.get(o), r = s ? s(o) : a?.disabled;
+    if (!a || r) return;
+    const g = a.modifier?.keys, c = a.modifier?.method;
     if (!g || !c || g.length === 0) {
-      a.add(o);
+      i.add(o);
       return;
     }
-    g[c]((l) => n.value.has(l)) && a.add(o);
-  }), a;
+    g[c]((l) => n.value.has(l)) && i.add(o);
+  }), i;
 };
-let Oe = "", st = "", at = "";
-const D = (e) => e.value ? e.value instanceof HTMLElement ? e.value : e.value.$el : null, K = (e, t) => e !== t && e.contains(t), it = (e, t) => !(e.right < t.left || e.left > t.right || e.bottom < t.top || e.top > t.bottom), pe = () => {
+let Fe = "", st = "", it = "";
+const D = (e) => e.value ? e.value instanceof HTMLElement ? e.value : e.value.$el : null, G = (e, t) => e !== t && e.contains(t), at = (e, t) => !(e.right < t.left || e.left > t.right || e.bottom < t.top || e.top > t.bottom), pe = () => {
   const e = document.body;
-  Oe = e.style.userSelect, e.style.userSelect = "none", window.addEventListener("contextmenu", w), window.addEventListener("selectstart", w), window.addEventListener("touchstart", w), window.addEventListener("touchmove", w);
+  Fe = e.style.userSelect, e.style.userSelect = "none", window.addEventListener("contextmenu", w), window.addEventListener("selectstart", w), window.addEventListener("touchstart", w), window.addEventListener("touchmove", w);
 }, ye = () => {
   const e = document.body;
-  e.style.userSelect = Oe, e.style.touchAction = st, e.style.overscrollBehavior = at, window.removeEventListener("contextmenu", w), window.removeEventListener("selectstart", w), window.removeEventListener("touchstart", w), window.removeEventListener("touchmove", w);
+  e.style.userSelect = Fe, e.style.touchAction = st, e.style.overscrollBehavior = it, window.removeEventListener("contextmenu", w), window.removeEventListener("selectstart", w), window.removeEventListener("touchstart", w), window.removeEventListener("touchmove", w);
 }, w = (e) => e.preventDefault(), Ee = (e, t) => {
   if (t.entities.draggableMap.get(e)?.disabled) return !0;
   for (const s of t.entities.visibleDraggableSet)
-    if (t.entities.draggableMap.get(s)?.disabled && K(s, e)) return !0;
+    if (t.entities.draggableMap.get(s)?.disabled && G(s, e)) return !0;
   return !1;
-}, N = (e, t) => {
+}, K = (e, t) => {
   if (t.entities.droppableMap.get(e)?.disabled) return !0;
   for (const s of t.entities.visibleDroppableSet)
-    if (t.entities.droppableMap.get(s)?.disabled && K(s, e)) return !0;
+    if (t.entities.droppableMap.get(s)?.disabled && G(s, e)) return !0;
   return !1;
 }, ne = (e, t) => {
   if (!e.length || !t.length) return !0;
@@ -45,36 +45,36 @@ const D = (e) => e.value ? e.value instanceof HTMLElement ? e.value : e.value.$e
   return e.some((s) => n.has(s));
 };
 function ot(e, t, n, s) {
-  const a = [];
-  for (const i of t.keys()) {
-    const r = n.get(i);
-    a.push({ groups: r?.groups ?? [] });
+  const i = [];
+  for (const a of t.keys()) {
+    const r = n.get(a);
+    i.push({ groups: r?.groups ?? [] });
   }
   const o = /* @__PURE__ */ new Set();
-  for (const i of e) {
-    const r = s.get(i), g = r?.groups ?? [], c = r?.groupMatch ?? "every";
-    (!a.length || a[c]((l) => ne(l.groups, g))) && o.add(i);
+  for (const a of e) {
+    const r = s.get(a), g = r?.groups ?? [], c = r?.groupMatch ?? "every";
+    (!i.length || i[c]((l) => ne(l.groups, g))) && o.add(a);
   }
   return o;
 }
 function rt(e, t, n) {
   const s = /* @__PURE__ */ new Set();
-  for (const i of t.keys()) {
-    const r = n.get(i);
+  for (const a of t.keys()) {
+    const r = n.get(a);
     for (const g of r?.groups ?? []) s.add(g);
   }
-  const a = [...s], o = /* @__PURE__ */ new Set();
-  for (const i of e) {
-    const g = n.get(i)?.groups ?? [];
-    ne(a, g) && o.add(i);
+  const i = [...s], o = /* @__PURE__ */ new Set();
+  for (const a of e) {
+    const g = n.get(a)?.groups ?? [];
+    ne(i, g) && o.add(a);
   }
   return o;
 }
 const re = (e) => {
   const t = new IntersectionObserver((n) => {
     n.forEach((s) => {
-      const a = s.target;
-      e[s.isIntersecting ? "add" : "delete"](a);
+      const i = s.target;
+      e[s.isIntersecting ? "add" : "delete"](i);
     });
   });
   return {
@@ -90,11 +90,11 @@ function Se(e, t = 0, n = 0) {
     offset: { x: t, y: n }
   };
 }
-function Fe(e, t) {
-  const n = t.getBoundingClientRect(), s = n.width > 0 ? (e.clientX - n.left) / n.width : 0.5, a = n.height > 0 ? (e.clientY - n.top) / n.height : 0.5;
-  return { x: s, y: a };
-}
 function ze(e, t) {
+  const n = t.getBoundingClientRect(), s = n.width > 0 ? (e.clientX - n.left) / n.width : 0.5, i = n.height > 0 ? (e.clientY - n.top) / n.height : 0.5;
+  return { x: s, y: i };
+}
+function _e(e, t) {
   return {
     ...t,
     initialHTML: e.innerHTML,
@@ -104,14 +104,14 @@ function ze(e, t) {
 }
 function lt(e, t, n) {
   e.forEach((s) => {
-    const a = t.get(s);
-    n.set(s, ze(s, a));
+    const i = t.get(s);
+    n.set(s, _e(s, i));
   }), e.clear();
 }
 function ct(e, t, n) {
   n.clear();
   const s = t.get(e);
-  n.set(e, ze(e, s));
+  n.set(e, _e(e, s));
 }
 function Q(e) {
   e.entities.initiatingDraggable && (e.state.value = "dragging", gt(
@@ -126,8 +126,8 @@ function gt(e, t, n, s) {
 }
 function He(e, t, n, s) {
   if (s || !n) return !0;
-  const a = e.closest(n);
-  return a ? t.contains(a) : !1;
+  const i = e.closest(n);
+  return i ? t.contains(i) : !1;
 }
 function ut(e, t) {
   if (!e || !t) return 1;
@@ -137,18 +137,18 @@ function ut(e, t) {
     return Math.min(c / t, 1);
   }
   const {
-    x: a = 0,
+    x: i = 0,
     y: o = 0,
-    condition: i = "any"
+    condition: a = "any"
   } = t;
-  if (a === 0 && o === 0) return 1;
-  const r = a > 0 ? Math.min(n / a, 1) : 1, g = o > 0 ? Math.min(s / o, 1) : 1;
-  return i === "both" ? Math.min(r, g) : Math.max(r, g);
+  if (i === 0 && o === 0) return 1;
+  const r = i > 0 ? Math.min(n / i, 1) : 1, g = o > 0 ? Math.min(s / o, 1) : 1;
+  return a === "both" ? Math.min(r, g) : Math.max(r, g);
 }
 function Ge(e, t, n) {
   if (!n) return !0;
-  const s = n.distance != null, a = n.delay != null;
-  return !s && !a ? !0 : s && !a ? e >= 1 : !s && a ? t >= 1 : (n.condition ?? "both") === "both" ? e >= 1 && t >= 1 : e >= 1 || t >= 1;
+  const s = n.distance != null, i = n.delay != null;
+  return !s && !i ? !0 : s && !i ? e >= 1 : !s && i ? t >= 1 : (n.condition ?? "both") === "both" ? e >= 1 && t >= 1 : e >= 1 || t >= 1;
 }
 function ft(e) {
   if (e.state.value !== "activating" || !e.entities.initiatingDraggable)
@@ -169,9 +169,9 @@ function dt(e, t) {
       n = null;
       return;
     }
-    const a = e.entities.draggableMap.get(
+    const i = e.entities.draggableMap.get(
       e.entities.initiatingDraggable
-    ), o = a?.activation?.delay;
+    ), o = i?.activation?.delay;
     if (!o) {
       n = null;
       return;
@@ -182,7 +182,7 @@ function dt(e, t) {
     ), Ge(
       e.distanceProgress.value,
       e.delay.progress,
-      a?.activation
+      i?.activation
     ) ? (t(), n = null) : n = requestAnimationFrame(s);
   };
   return n = requestAnimationFrame(s), {
@@ -193,7 +193,7 @@ function dt(e, t) {
 }
 function mt(e, t) {
   const n = e.closest(
-    G.CONSTRAINT_AREA
+    H.CONSTRAINT_AREA
   );
   return !n || !t.has(n) ? null : {
     element: n,
@@ -203,28 +203,28 @@ function mt(e, t) {
 function ht(e, t, n, s) {
   return n === "x" ? { x: e, y: s.top } : n === "y" ? { x: s.left, y: t } : { x: e, y: t };
 }
-function bt(e, t, n, s, a) {
-  let o = e, i = t;
+function bt(e, t, n, s, i) {
+  let o = e, a = t;
   return n !== "y" && (o = Math.max(
     s.left,
-    Math.min(s.right - a.width, e)
-  )), n !== "x" && (i = Math.max(
+    Math.min(s.right - i.width, e)
+  )), n !== "x" && (a = Math.max(
     s.top,
-    Math.min(s.bottom - a.height, t)
-  )), { x: o, y: i };
+    Math.min(s.bottom - i.height, t)
+  )), { x: o, y: a };
 }
 function pt(e, t, n, s) {
   if (!e)
     return { x: 0, y: 0 };
-  const a = t?.width ?? 0, o = t?.height ?? 0;
-  let i = e.current.x - a * e.offset.x, r = e.current.y - o * e.offset.y;
+  const i = t?.width ?? 0, o = t?.height ?? 0;
+  let a = e.current.x - i * e.offset.x, r = e.current.y - o * e.offset.y;
   if (!n)
-    return { x: i, y: r };
+    return { x: a, y: r };
   const g = mt(n, s);
   if (!g)
-    return { x: i, y: r };
+    return { x: a, y: r };
   const { element: c, entity: u } = g, l = c.getBoundingClientRect(), f = n.getBoundingClientRect(), d = ht(
-    i,
+    a,
     r,
     u.axis || "both",
     f
@@ -254,7 +254,7 @@ const Y = {
   forMoveFaster: ["ShiftLeft", "ShiftRight"]
 };
 function yt(e, t) {
-  const n = Z(), s = oe(), o = {
+  const n = V(), s = oe(), o = {
     keys: {
       pressedKeys: oe(/* @__PURE__ */ new Set()),
       forDrag: [...Y.forDrag],
@@ -265,7 +265,7 @@ function yt(e, t) {
     },
     step: 8,
     moveFaster: 4
-  }, i = U({
+  }, a = $({
     draggableMap: /* @__PURE__ */ new Map(),
     droppableMap: /* @__PURE__ */ new Map(),
     selectableAreaMap: /* @__PURE__ */ new Map(),
@@ -276,59 +276,59 @@ function yt(e, t) {
     selectedSet: /* @__PURE__ */ new Set(),
     selectionBase: /* @__PURE__ */ new Set(),
     allowedDroppableSet: b(() => n.value ? ot(
-      i.visibleDroppableSet,
-      i.draggingMap,
-      i.draggableMap,
-      i.droppableMap
+      a.visibleDroppableSet,
+      a.draggingMap,
+      a.draggableMap,
+      a.droppableMap
     ) : /* @__PURE__ */ new Set()),
     allowedDraggableSet: b(() => n.value ? rt(
-      i.visibleDraggableSet,
-      i.draggingMap,
-      i.draggableMap
+      a.visibleDraggableSet,
+      a.draggingMap,
+      a.draggableMap
     ) : /* @__PURE__ */ new Set()),
     modifiersSelectableAreaSet: b(() => Ie(
-      i.selectableAreaMap,
-      i.visibleSelectableAreaSet,
+      a.selectableAreaMap,
+      a.visibleSelectableAreaSet,
       o.keys.pressedKeys
     )),
     modifiersDraggableSet: b(() => Ie(
-      i.draggableMap,
-      i.visibleDraggableSet,
+      a.draggableMap,
+      a.visibleDraggableSet,
       o.keys.pressedKeys,
-      (S) => Ee(S, { entities: i })
+      (S) => Ee(S, { entities: a })
     )),
     visibleDraggableSet: /* @__PURE__ */ new Set(),
     visibleDroppableSet: /* @__PURE__ */ new Set(),
     visibleSelectableAreaSet: /* @__PURE__ */ new Set()
-  }), r = U({
+  }), r = $({
     draggable: /* @__PURE__ */ new Map(),
     droppable: /* @__PURE__ */ new Map()
   }), g = {
-    throttle: Z(0)
-  }, c = U({
+    throttle: V(0)
+  }, c = $({
     x: window.scrollX,
     y: window.scrollY
-  }), u = U({
+  }), u = $({
     progress: 0,
     startTime: 0
   }), l = b(() => {
-    if (!s.value || !i.initiatingDraggable) return 0;
-    const S = i.draggableMap.get(i.initiatingDraggable)?.activation?.distance;
+    if (!s.value || !a.initiatingDraggable) return 0;
+    const S = a.draggableMap.get(a.initiatingDraggable)?.activation?.distance;
     return S ? ut(s.value, S) : 1;
   }), f = re(
-    i.visibleDraggableSet
+    a.visibleDraggableSet
   ), d = re(
-    i.visibleDroppableSet
+    a.visibleDroppableSet
   ), m = re(
-    i.visibleSelectableAreaSet
-  ), h = oe(), M = Z(new DOMRect()), p = b(() => {
+    a.visibleSelectableAreaSet
+  ), h = oe(), M = V(new DOMRect()), p = b(() => {
     c.x, c.y;
-    const y = M.value, S = i.initiatingDraggable, k = S ? i.draggingMap.get(S) : null, T = y.width && y.height ? y : k?.initialRect ?? null;
+    const y = M.value, S = a.initiatingDraggable, k = S ? a.draggingMap.get(S) : null, T = y.width && y.height ? y : k?.initialRect ?? null;
     return pt(
       s.value,
       T,
       S || null,
-      i.constraintsAreaMap
+      a.constraintsAreaMap
     );
   }), x = b({
     get: () => t?.previewTo,
@@ -337,7 +337,7 @@ function yt(e, t) {
   return {
     state: n,
     pointer: s,
-    entities: i,
+    entities: a,
     keyboard: o,
     scrollPosition: c,
     delay: u,
@@ -374,11 +374,11 @@ const ee = (e) => {
   e.lib.rectCache.clear(), e.pointer.value = void 0, e.state.value = void 0, e.entities.selectingArea = void 0, e.entities.selectionBase.clear(), e.entities.initiatingDraggable = void 0, e.delay.progress = 0, e.delay.startTime = 0, e.entities.draggingMap.clear(), e.hovered.draggable.clear(), e.hovered.droppable.clear();
 };
 function St(e) {
-  return e.parentElement?.closest(G.SELECT_AREA) ?? null;
+  return e.parentElement?.closest(H.SELECT_AREA) ?? null;
 }
 const Dt = (e, t, n) => {
   if (!n) return {};
-  const s = n.getBoundingClientRect(), a = Math.max(s.left, Math.min(e.x, t.x)), o = Math.max(s.top, Math.min(e.y, t.y)), i = Math.min(s.right, Math.max(e.x, t.x)), r = Math.min(s.bottom, Math.max(e.y, t.y)), g = Math.max(0, i - a), c = Math.max(0, r - o), u = a - s.left + n.scrollLeft, l = o - s.top + n.scrollTop;
+  const s = n.getBoundingClientRect(), i = Math.max(s.left, Math.min(e.x, t.x)), o = Math.max(s.top, Math.min(e.y, t.y)), a = Math.min(s.right, Math.max(e.x, t.x)), r = Math.min(s.bottom, Math.max(e.y, t.y)), g = Math.max(0, a - i), c = Math.max(0, r - o), u = i - s.left + n.scrollLeft, l = o - s.top + n.scrollTop;
   return {
     position: "absolute",
     left: `${u}px`,
@@ -394,11 +394,11 @@ const Dt = (e, t, n) => {
   const { selectingArea: t } = e.entities, n = wt(
     e.pointer.value.start,
     e.pointer.value.current
-  ), s = e.entities.selectableAreaMap.get(t)?.groups ?? [], a = e.lib.rectCache;
+  ), s = e.entities.selectableAreaMap.get(t)?.groups ?? [], i = e.lib.rectCache;
   e.entities.visibleDraggableSet.forEach((o) => {
     if (o === t || !t.contains(o)) return;
-    const i = St(o);
-    if (i && i !== t) {
+    const a = St(o);
+    if (a && a !== t) {
       e.entities.selectedSet.delete(o);
       return;
     }
@@ -411,27 +411,27 @@ const Dt = (e, t, n) => {
       e.entities.selectedSet.delete(o);
       return;
     }
-    let c = a.get(o);
-    c || (c = o.getBoundingClientRect(), a.set(o, c));
+    let c = i.get(o);
+    c || (c = o.getBoundingClientRect(), i.set(o, c));
     const u = e.entities.selectionBase.has(o);
-    it(n, c) ? u ? e.entities.selectedSet.delete(o) : e.entities.selectedSet.add(o) : u ? e.entities.selectedSet.add(o) : e.entities.selectedSet.delete(o);
+    at(n, c) ? u ? e.entities.selectedSet.delete(o) : e.entities.selectedSet.add(o) : u ? e.entities.selectedSet.add(o) : e.entities.selectedSet.delete(o);
   });
 }, wt = (e, t) => {
-  const n = Math.min(e.x, t.x), s = Math.min(e.y, t.y), a = Math.max(e.x, t.x), o = Math.max(e.y, t.y), i = a - n, r = o - s;
-  return new DOMRect(n, s, i, r);
+  const n = Math.min(e.x, t.x), s = Math.min(e.y, t.y), i = Math.max(e.x, t.x), o = Math.max(e.y, t.y), a = i - n, r = o - s;
+  return new DOMRect(n, s, a, r);
 };
 function C(e, t, n) {
   const s = Math.max(0, Math.min(t, e.length));
   return [...e.slice(0, s), ...n, ...e.slice(s)];
 }
 function Le(e, t, n = 1) {
-  const s = Math.max(0, Math.min(t, e.length - 1)), a = Math.max(0, Math.min(n, e.length - s));
-  return [...e.slice(0, s), ...e.slice(s + a)];
+  const s = Math.max(0, Math.min(t, e.length - 1)), i = Math.max(0, Math.min(n, e.length - s));
+  return [...e.slice(0, s), ...e.slice(s + i)];
 }
-function V(e, t) {
-  const n = [...new Set(t)].filter((a) => a >= 0 && a < e.length).sort((a, o) => o - a);
+function N(e, t) {
+  const n = [...new Set(t)].filter((i) => i >= 0 && i < e.length).sort((i, o) => o - i);
   let s = e;
-  for (const a of n) s = Le(s, a, 1);
+  for (const i of n) s = Le(s, i, 1);
   return s;
 }
 function Ne(e, t, n) {
@@ -451,15 +451,15 @@ const I = {
     return I.getInsertSide(e, t) === "after" && !e?.center;
   }
 };
-function Ve(e, t) {
-  const { draggedItems: n, dropZone: s, hoveredDraggable: a } = e;
+function Ye(e, t) {
+  const { draggedItems: n, dropZone: s, hoveredDraggable: i } = e;
   if (!n.length) return null;
-  const o = a?.placement.center === !0 && s != null && s.items !== a.items, i = o ? s.items : a?.items ?? s?.items;
-  if (!i) return null;
-  const r = n[0].items, g = n.map((f) => f.index), c = i.length;
+  const o = i?.placement.center === !0 && s != null && s.items !== i.items, a = o ? s.items : i?.items ?? s?.items;
+  if (!a) return null;
+  const r = n[0].items, g = n.map((f) => f.index), c = a.length;
   let u, l;
-  if (a && !o) {
-    const f = a.items === r && g.includes(a.index);
+  if (i && !o) {
+    const f = i.items === r && g.includes(i.index);
     if (f && n.length === 1) {
       const d = I.isAtZoneStart(s?.placement, t);
       u = d ? 0 : c, l = d ? "prepend" : "append";
@@ -467,7 +467,7 @@ function Ve(e, t) {
       if (f)
         return null;
       {
-        const d = I.getInsertSide(a.placement, t), m = a.index;
+        const d = I.getInsertSide(i.placement, t), m = i.index;
         d === "before" ? (u = Math.max(0, m), l = "insert") : d === "after" ? (u = Math.min(c, m + 1), l = "insert") : (u = c, l = "append");
       }
     }
@@ -476,77 +476,77 @@ function Ve(e, t) {
     const f = I.isAtZoneStart(s.placement, t);
     u = f ? 0 : c, l = f ? "prepend" : "append";
   }
-  return { targetIndex: u, mode: l, targetArr: i };
+  return { targetIndex: u, mode: l, targetArr: a };
 }
 function Mt(e, t = "vertical") {
   const { draggedItems: n } = e;
   if (!n.length) return null;
-  const s = Ve(e, t);
+  const s = Ye(e, t);
   if (!s) return null;
-  const { targetArr: a, mode: o } = s;
-  let { targetIndex: i } = s;
+  const { targetArr: i, mode: o } = s;
+  let { targetIndex: a } = s;
   const r = n.map((l) => l.index), g = n.map((l) => l.item), c = n[0].items;
-  if (c === a) {
-    const l = r.filter((d) => d < i).length;
-    i = Math.max(0, i - l);
-    const f = C(V(c, r), i, g);
-    return { sourceItems: f, targetItems: f, draggedItems: g, sourceIndexes: r, targetIndex: i, mode: o, sameList: !0 };
+  if (c === i) {
+    const l = r.filter((d) => d < a).length;
+    a = Math.max(0, a - l);
+    const f = C(N(c, r), a, g);
+    return { sourceItems: f, targetItems: f, draggedItems: g, sourceIndexes: r, targetIndex: a, mode: o, sameList: !0 };
   } else {
-    const l = V(c, r), f = C(a, i, g);
-    return { sourceItems: l, targetItems: f, draggedItems: g, sourceIndexes: r, targetIndex: i, mode: o, sameList: !1 };
+    const l = N(c, r), f = C(i, a, g);
+    return { sourceItems: l, targetItems: f, draggedItems: g, sourceIndexes: r, targetIndex: a, mode: o, sameList: !1 };
   }
 }
 function vt(e) {
   const { draggedItems: t, hoveredDraggable: n } = e;
   if (!t.length || !n) return null;
-  const s = t.map((u) => u.index), a = n.index, o = t.map((u) => u.item), i = n.item, r = t[0].items, g = n.items, c = r === g;
-  if (c && s.includes(a)) return null;
+  const s = t.map((u) => u.index), i = n.index, o = t.map((u) => u.item), a = n.item, r = t[0].items, g = n.items, c = r === g;
+  if (c && s.includes(i)) return null;
   if (t.length === 1) {
     const u = s[0];
     if (c) {
-      const l = Ne(r, u, a);
-      return { sourceItems: l, targetItems: l, sourceIndexes: s, targetIndex: a, sameList: !0 };
+      const l = Ne(r, u, i);
+      return { sourceItems: l, targetItems: l, sourceIndexes: s, targetIndex: i, sameList: !0 };
     } else {
       const l = [...r], f = [...g];
-      return l[u] = g[a], f[a] = r[u], { sourceItems: l, targetItems: f, sourceIndexes: s, targetIndex: a, sameList: !1 };
+      return l[u] = g[i], f[i] = r[u], { sourceItems: l, targetItems: f, sourceIndexes: s, targetIndex: i, sameList: !1 };
     }
   } else {
     const u = Math.min(...s);
     if (c) {
-      const l = s.filter((p) => p < a).length, f = Math.max(0, a - l), d = s.filter((p) => p < u).length, m = Math.max(0, u - d);
-      let h = V(r, s);
+      const l = s.filter((p) => p < i).length, f = Math.max(0, i - l), d = s.filter((p) => p < u).length, m = Math.max(0, u - d);
+      let h = N(r, s);
       h = C(h, f, o);
       const M = m >= f ? m + o.length : m;
-      return h = C(h, M, [i]), { sourceItems: h, targetItems: h, sourceIndexes: s, targetIndex: f, sameList: !0 };
+      return h = C(h, M, [a]), { sourceItems: h, targetItems: h, sourceIndexes: s, targetIndex: f, sameList: !0 };
     } else {
       const l = s.filter((h) => h < u).length, f = Math.max(0, u - l);
-      let d = V(r, s);
-      d = C(d, f, [i]);
-      let m = Le(g, a);
-      return m = C(m, a, o), { sourceItems: d, targetItems: m, sourceIndexes: s, targetIndex: a, sameList: !1 };
+      let d = N(r, s);
+      d = C(d, f, [a]);
+      let m = Le(g, i);
+      return m = C(m, i, o), { sourceItems: d, targetItems: m, sourceIndexes: s, targetIndex: i, sameList: !1 };
     }
   }
 }
 function At(e, t = "vertical") {
   const { draggedItems: n } = e;
   if (!n.length) return null;
-  const s = Ve(e, t);
+  const s = Ye(e, t);
   if (!s) return null;
-  const { targetArr: a, targetIndex: o, mode: i } = s, r = n.map((c) => c.item);
-  return { targetItems: C(a, o, r), copiedItems: r, targetIndex: o, mode: i };
+  const { targetArr: i, targetIndex: o, mode: a } = s, r = n.map((c) => c.item);
+  return { targetItems: C(i, o, r), copiedItems: r, targetIndex: o, mode: a };
 }
 function xt(e) {
   const { draggedItems: t } = e;
   if (!t.length) return null;
-  const n = t.map((i) => i.index), s = t.map((i) => i.item), a = t[0].items;
-  return { sourceItems: V(a, n), removedItems: s, sourceIndexes: n };
+  const n = t.map((a) => a.index), s = t.map((a) => a.item), i = t[0].items;
+  return { sourceItems: N(i, n), removedItems: s, sourceIndexes: n };
 }
-function Ye(e) {
+function Ve(e) {
   return {
     // Low-level array ops
     insertAt: C,
     removeAt: Le,
-    removeIndexes: V,
+    removeIndexes: N,
     swapAt: Ne,
     // Placement helpers
     getInsertSide: (t, n) => I.getInsertSide(t, n),
@@ -560,7 +560,7 @@ function Ye(e) {
   };
 }
 const B = (e) => e.keys().next().value, Et = (e) => e.target.closest(
-  G.DRAGGABLE
+  H.DRAGGABLE
 );
 function Lt(e) {
   const t = e.entities.initiatingDraggable;
@@ -568,9 +568,9 @@ function Lt(e) {
   const n = e.entities.draggingMap.get(t) ?? e.entities.draggableMap.get(t), s = n?.payload;
   if (!s)
     return n?.data ? [{ index: -1, item: void 0, items: [], data: n.data() }] : [];
-  const a = s();
-  if (!Array.isArray(a) || a.length < 2) return [];
-  const [o, i] = a, r = Number(o), g = i, c = /* @__PURE__ */ new Map();
+  const i = s();
+  if (!Array.isArray(i) || i.length < 2) return [];
+  const [o, a] = i, r = Number(o), g = a, c = /* @__PURE__ */ new Map();
   return c.set(r, {
     index: r,
     item: g[r],
@@ -594,7 +594,7 @@ function Lt(e) {
 }
 const A = (e, t) => {
   const n = Lt(e);
-  let s, a;
+  let s, i;
   if (t) {
     const o = e.entities.droppableMap.get(t);
     if (o) {
@@ -605,15 +605,15 @@ const A = (e, t) => {
         data: o.data?.()
       };
     }
-    const i = B(e.hovered.draggable);
-    if (i && (i === t || t.contains(i)) && i) {
-      const g = e.entities.draggableMap.get(i), c = g?.payload, u = e.hovered.draggable.get(i), l = { top: !1, right: !1, bottom: !1, left: !1, center: !1 };
+    const a = B(e.hovered.draggable);
+    if (a && (a === t || t.contains(a)) && a) {
+      const g = e.entities.draggableMap.get(a), c = g?.payload, u = e.hovered.draggable.get(a), l = { top: !1, right: !1, bottom: !1, left: !1, center: !1 };
       if (c) {
         const f = c();
         if (Array.isArray(f) && f.length >= 2) {
           const [d, m] = f, h = Number(d);
-          a = {
-            element: i,
+          i = {
+            element: a,
             placement: u ?? l,
             index: h,
             item: m[h],
@@ -621,8 +621,8 @@ const A = (e, t) => {
             data: g?.data?.()
           };
         }
-      } else g?.data && (a = {
-        element: i,
+      } else g?.data && (i = {
+        element: a,
         placement: u ?? l,
         index: -1,
         item: void 0,
@@ -634,11 +634,11 @@ const A = (e, t) => {
   return {
     draggedItems: n,
     dropZone: s,
-    hoveredDraggable: a,
+    hoveredDraggable: i,
     provider: e,
-    helpers: Ye({ draggedItems: n, dropZone: s, hoveredDraggable: a })
+    helpers: Ve({ draggedItems: n, dropZone: s, hoveredDraggable: i })
   };
-}, O = (e, t, n) => {
+}, F = (e, t, n) => {
   if (!t) return;
   const s = e.entities.draggingMap.get(t) ?? e.entities.draggableMap.get(t);
   !s || s.disabled || s.events?.[n]?.(A(e));
@@ -649,11 +649,11 @@ const A = (e, t) => {
   });
 }, Ct = (e, t, n) => {
   if (t !== n) {
-    if (t && !N(t, e)) {
+    if (t && !K(t, e)) {
       const s = A(e, t);
       e.entities.droppableMap.get(t)?.events?.onLeave?.(s);
     }
-    if (n && !N(n, e)) {
+    if (n && !K(n, e)) {
       const s = A(e, n);
       e.entities.droppableMap.get(n)?.events?.onEnter?.(s);
     }
@@ -662,12 +662,12 @@ const A = (e, t) => {
   if (t !== n) {
     const s = A(e);
     if (t) {
-      const a = e.entities.draggableMap.get(t);
-      a && !a.disabled && a.events?.onLeave?.(s);
+      const i = e.entities.draggableMap.get(t);
+      i && !i.disabled && i.events?.onLeave?.(s);
     }
     if (n) {
-      const a = e.entities.draggableMap.get(n);
-      a && !a.disabled && a.events?.onHover?.(s);
+      const i = e.entities.draggableMap.get(n);
+      i && !i.disabled && i.events?.onHover?.(s);
     }
   }
 }, le = (e, t, n) => {
@@ -675,10 +675,10 @@ const A = (e, t) => {
   !s || !e.entities.draggingMap.has(s) || e.entities.draggingMap.get(s)?.events?.[n]?.(A(e));
 }, Rt = (e, t) => {
   const n = B(t.droppable);
-  n && !N(n, e) && e.entities.droppableMap.get(n)?.events?.onLeave?.(A(e, n));
+  n && !K(n, e) && e.entities.droppableMap.get(n)?.events?.onLeave?.(A(e, n));
 }, De = (e, t) => {
   const n = B(t.droppable);
-  n && !N(n, e) && e.entities.droppableMap.get(n)?.events?.onLeave?.(A(e, n));
+  n && !K(n, e) && e.entities.droppableMap.get(n)?.events?.onLeave?.(A(e, n));
 }, kt = (e, t, n = 5) => {
   const s = n / 2;
   return {
@@ -691,10 +691,10 @@ const A = (e, t) => {
   const t = e.pointer.value?.current, n = t?.x ?? 0, s = t?.y ?? 0;
   return kt(n, s, 5);
 }, P = (e, t, n) => {
-  const s = e.left + e.width / 2, a = e.top + e.height / 2;
+  const s = e.left + e.width / 2, i = e.top + e.height / 2;
   if (n) {
     const r = n.top ?? 0, g = n.right ?? 0, c = n.bottom ?? 0, u = n.left ?? 0, l = t.left + u, f = t.right - g, d = t.top + r, m = t.bottom - c;
-    if (l < f && d < m && s >= l && s <= f && a >= d && a <= m)
+    if (l < f && d < m && s >= l && s <= f && i >= d && i <= m)
       return {
         top: !1,
         right: !1,
@@ -703,10 +703,10 @@ const A = (e, t) => {
         center: !0
       };
   }
-  const o = t.left + t.width / 2, i = t.top + t.height / 2;
+  const o = t.left + t.width / 2, a = t.top + t.height / 2;
   return {
-    top: a <= i,
-    bottom: a > i,
+    top: i <= a,
+    bottom: i > a,
     left: s <= o,
     right: s > o,
     center: !1
@@ -721,18 +721,18 @@ const A = (e, t) => {
 function Bt(e, t) {
   return e === t ? !0 : !e || !t ? !1 : e.top === t.top && e.right === t.right && e.bottom === t.bottom && e.left === t.left && e.center === t.center;
 }
-function q(e, t) {
+function U(e, t) {
   Bt(e.hoveredPlacement, t) || (e.hoveredPlacement = t);
 }
-const _t = (e, t) => e.find((n) => n !== t && K(t, n)), we = (e, t, n) => {
-  const s = B(t.droppable), a = B(t.draggable);
-  a && t.draggable.delete(a), s && t.droppable.delete(s);
-  const o = Tt(e), i = n.zones[0], r = n.elements[0];
-  if (i && r && i === r && e.entities.droppableMap.has(i) && i) {
-    const l = i.getBoundingClientRect(), f = e.entities.draggableMap.get(i)?.placementMargins, d = P(o, l, f);
+const Ot = (e, t) => e.find((n) => n !== t && G(t, n)), we = (e, t, n) => {
+  const s = B(t.droppable), i = B(t.draggable);
+  i && t.draggable.delete(i), s && t.droppable.delete(s);
+  const o = Tt(e), a = n.zones[0], r = n.elements[0];
+  if (a && r && a === r && e.entities.droppableMap.has(a) && a) {
+    const l = a.getBoundingClientRect(), f = e.entities.draggableMap.get(a)?.placementMargins, d = P(o, l, f);
     if (d.center) {
-      t.droppable.set(i, d);
-      const m = _t(n.elements, i);
+      t.droppable.set(a, d);
+      const m = Ot(n.elements, a);
       if (m) {
         const h = m.getBoundingClientRect();
         t.draggable.set(
@@ -742,7 +742,7 @@ const _t = (e, t) => e.find((n) => n !== t && K(t, n)), we = (e, t, n) => {
       }
     } else {
       t.draggable.set(r, d);
-      const m = n.zones.find((h) => h !== i);
+      const m = n.zones.find((h) => h !== a);
       if (m) {
         const h = m.getBoundingClientRect();
         t.droppable.set(
@@ -752,20 +752,20 @@ const _t = (e, t) => e.find((n) => n !== t && K(t, n)), we = (e, t, n) => {
       }
     }
   } else {
-    if (i) {
-      const l = i.getBoundingClientRect();
-      t.droppable.set(i, P(o, l));
+    if (a) {
+      const l = a.getBoundingClientRect();
+      t.droppable.set(a, P(o, l));
     }
     if (r)
-      if (i)
-        if (K(i, r)) {
+      if (a)
+        if (G(a, r)) {
           const l = r.getBoundingClientRect(), f = e.entities.draggableMap.get(r)?.placementMargins;
           t.draggable.set(
             r,
             P(o, l, f)
           );
         } else {
-          const l = e.pointer.value?.current ?? { x: 0, y: 0 }, f = i.getBoundingClientRect(), d = r.getBoundingClientRect(), m = Re(l, f);
+          const l = e.pointer.value?.current ?? { x: 0, y: 0 }, f = a.getBoundingClientRect(), d = r.getBoundingClientRect(), m = Re(l, f);
           if (Re(l, d) < m) {
             t.droppable.clear();
             const M = e.entities.draggableMap.get(r)?.placementMargins;
@@ -784,23 +784,23 @@ const _t = (e, t) => e.find((n) => n !== t && K(t, n)), we = (e, t, n) => {
       }
   }
   const c = B(t.droppable), u = B(t.draggable);
-  if (a && a !== u) {
-    const l = e.entities.draggableMap.get(a);
-    l && q(l, void 0);
+  if (i && i !== u) {
+    const l = e.entities.draggableMap.get(i);
+    l && U(l, void 0);
   }
   if (s && s !== c) {
     const l = e.entities.droppableMap.get(s);
-    l && q(l, void 0);
+    l && U(l, void 0);
   }
   if (u) {
     const l = e.entities.draggableMap.get(u);
-    l && q(l, t.draggable.get(u));
+    l && U(l, t.draggable.get(u));
   }
   if (c) {
     const l = e.entities.droppableMap.get(c);
-    l && q(l, t.droppable.get(c));
+    l && U(l, t.droppable.get(c));
   }
-  Ct(e, s, c), It(e, a, u);
+  Ct(e, s, c), It(e, i, u);
 }, ce = (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, ge = (e) => {
   if (!e)
     return { x: 0, y: 0, width: 0, height: 0, top: 0, left: 0, right: 0, bottom: 0 };
@@ -822,35 +822,35 @@ const _t = (e, t) => e.find((n) => n !== t && K(t, n)), we = (e, t, n) => {
   ), s = Math.max(
     0,
     Math.min(e.y + e.height, t.y + t.height) - Math.max(e.y, t.y)
-  ), a = n * s, o = e.width * e.height, i = t.width * t.height;
-  return o === 0 || i === 0 ? 0 : (a / o * 100 + a / i * 100) / 2;
-}, Ot = (e) => e.preview.ref?.value ?? null, ke = (e) => {
-  const t = e.preview.position?.value ?? { x: 0, y: 0 }, { x: n, y: s } = t, a = e.preview.size?.value;
-  let o, i;
-  if (a)
-    o = a.width, i = a.height;
+  ), i = n * s, o = e.width * e.height, a = t.width * t.height;
+  return o === 0 || a === 0 ? 0 : (i / o * 100 + i / a * 100) / 2;
+}, Ft = (e) => e.preview.ref?.value ?? null, ke = (e) => {
+  const t = e.preview.position?.value ?? { x: 0, y: 0 }, { x: n, y: s } = t, i = e.preview.size?.value;
+  let o, a;
+  if (i)
+    o = i.width, a = i.height;
   else {
     const r = e.preview.ref?.value?.getBoundingClientRect();
-    o = r?.width ?? 0, i = r?.height ?? 0;
+    o = r?.width ?? 0, a = r?.height ?? 0;
   }
   return {
     x: n,
     y: s,
     width: o,
-    height: i,
+    height: a,
     top: s,
     left: n,
     right: n + o,
-    bottom: s + i
+    bottom: s + a
   };
-}, Me = (e) => e.entities.allowedDraggableSet, Ze = (e) => e.entities.allowedDroppableSet, Ft = (e, t) => !t.entities.draggingMap.has(e), zt = (e, t) => ![...t.entities.draggingMap.keys()].some((n) => {
-  if (K(n, e)) return !0;
+}, Me = (e) => e.entities.allowedDraggableSet, Xe = (e) => e.entities.allowedDroppableSet, zt = (e, t) => !t.entities.draggingMap.has(e), _t = (e, t) => ![...t.entities.draggingMap.keys()].some((n) => {
+  if (G(n, e)) return !0;
   const s = n.parentElement;
-  return !!(s && e !== n && !t.entities.draggableMap.has(s) && !t.entities.droppableMap.has(s) && K(s, e) && [
+  return !!(s && e !== n && !t.entities.draggableMap.has(s) && !t.entities.droppableMap.has(s) && G(s, e) && [
     ...t.entities.draggableMap.keys()
   ].filter((o) => o.parentElement === s).length === 1);
-}), Ht = (e, t) => t.entities.draggableMap.has(e) ? !Ee(e, t) : t.entities.droppableMap.has(e) ? !N(e, t) : !0, j = (e, t) => Ft(e, t) && zt(e, t) && Ht(e, t), fe = 10;
-function z(e, t) {
+}), Ht = (e, t) => t.entities.draggableMap.has(e) ? !Ee(e, t) : t.entities.droppableMap.has(e) ? !K(e, t) : !0, W = (e, t) => zt(e, t) && _t(e, t) && Ht(e, t), fe = 10;
+function _(e, t) {
   return Math.hypot(
     t.x - (e.x + e.width / 2),
     t.y - (e.y + e.height / 2)
@@ -859,14 +859,14 @@ function z(e, t) {
 function Gt(e) {
   const t = e.pointer.value?.current ?? { x: 0, y: 0 }, n = document.elementFromPoint(t.x, t.y);
   if (!n) return null;
-  const s = Me(e), a = Ze(e), o = [], i = [];
+  const s = Me(e), i = Xe(e), o = [], a = [];
   let r = n;
   for (; r; )
-    (s.has(r) || a.has(r)) && j(r, e) && (s.has(r) && o.push(r), a.has(r) && i.push(r)), r = r.parentElement;
-  return o.length === 0 && i.length === 0 ? null : { elements: o, zones: i };
+    (s.has(r) || i.has(r)) && W(r, e) && (s.has(r) && o.push(r), i.has(r) && a.push(r)), r = r.parentElement;
+  return o.length === 0 && a.length === 0 ? null : { elements: o, zones: a };
 }
 const ve = (e) => {
-  if (!Ot(e)) return { elements: [], zones: [] };
+  if (!Ft(e)) return { elements: [], zones: [] };
   const n = e.pointer.value?.current ?? { x: 0, y: 0 }, s = Gt(e);
   if (s) {
     if (s.elements.length > 0) return s;
@@ -874,20 +874,20 @@ const ve = (e) => {
     if (!c) return s;
     const u = ke(e);
     return { elements: [...Me(e)].filter(
-      (d) => c.contains(d) && j(d, e)
+      (d) => c.contains(d) && W(d, e)
     ).map((d) => ({ el: d, box: ge(d) })).filter(
       ({ box: d }) => ce(d, u) && ue(d, u) >= fe
-    ).sort((d, m) => z(d.box, n) - z(m.box, n)).map(({ el: d }) => d), zones: s.zones };
+    ).sort((d, m) => _(d.box, n) - _(m.box, n)).map(({ el: d }) => d), zones: s.zones };
   }
-  const a = ke(e), o = [...Me(e)].filter(
-    (c) => j(c, e)
-  ), i = [...Ze(e)].filter(
-    (c) => j(c, e)
+  const i = ke(e), o = [...Me(e)].filter(
+    (c) => W(c, e)
+  ), a = [...Xe(e)].filter(
+    (c) => W(c, e)
   ), r = o.map((c) => ({ n: c, box: ge(c) })).filter(
-    ({ box: c }) => ce(c, a) && ue(c, a) >= fe
-  ).sort((c, u) => z(c.box, n) - z(u.box, n)).map(({ n: c }) => c), g = i.map((c) => ({ n: c, box: ge(c) })).filter(
-    ({ box: c }) => ce(c, a) && ue(c, a) >= fe
-  ).sort((c, u) => z(c.box, n) - z(u.box, n)).map(({ n: c }) => c);
+    ({ box: c }) => ce(c, i) && ue(c, i) >= fe
+  ).sort((c, u) => _(c.box, n) - _(u.box, n)).map(({ n: c }) => c), g = a.map((c) => ({ n: c, box: ge(c) })).filter(
+    ({ box: c }) => ce(c, i) && ue(c, i) >= fe
+  ).sort((c, u) => _(c.box, n) - _(u.box, n)).map(({ n: c }) => c);
   return { elements: r, zones: g };
 };
 function Ae(e) {
@@ -903,11 +903,11 @@ function Kt(e, t) {
   const s = Date.now();
   s - t.value >= n && (t.value = s, Ae(e));
 }
-async function Xe(e) {
+async function Ze(e) {
   const t = e.hovered.droppable.keys().next().value;
-  if (!t || N(t, e)) return "accept";
+  if (!t || K(t, e)) return "accept";
   const n = e.entities.droppableMap.get(t), s = A(e, t);
-  let a = s;
+  let i = s;
   if (n?.groupMatch === "some" && (n.groups?.length ?? 0) > 0) {
     const r = n.groups, g = s.draggedItems.filter((u) => {
       for (const [, l] of e.entities.draggingMap) {
@@ -923,7 +923,7 @@ async function Xe(e) {
       const u = (l) => ({
         ...s,
         draggedItems: l,
-        helpers: Ye({ ...s, draggedItems: l })
+        helpers: Ve({ ...s, draggedItems: l })
       });
       if (n.events?.onValidate) {
         const l = n.events.onValidate({
@@ -939,7 +939,7 @@ async function Xe(e) {
             d = await l;
           } catch {
             const h = e.entities.initiatingDraggable;
-            return O(e, h, "onSelfDragCancel"), v(e, "onDragCancel"), De(e, e.hovered), "cancel";
+            return F(e, h, "onSelfDragCancel"), v(e, "onDragCancel"), De(e, e.hovered), "cancel";
           }
         } else
           d = l;
@@ -947,14 +947,14 @@ async function Xe(e) {
           return e.state.value = "dragging", "decline";
         const m = Array.isArray(d) ? d : g;
         if (m.length === 0) return "accept";
-        a = u(m);
+        i = u(m);
       } else {
         if (g.length === 0) return "accept";
-        a = u(g);
+        i = u(g);
       }
     }
   }
-  const o = n?.events?.onDrop?.(a);
+  const o = n?.events?.onDrop?.(i);
   if (o != null && typeof o.then == "function") {
     e.state.value = "pending";
     let r;
@@ -962,7 +962,7 @@ async function Xe(e) {
       r = await o;
     } catch {
       const g = e.entities.initiatingDraggable;
-      return O(e, g, "onSelfDragCancel"), v(e, "onDragCancel"), De(e, e.hovered), "cancel";
+      return F(e, g, "onSelfDragCancel"), v(e, "onDragCancel"), De(e, e.hovered), "cancel";
     }
     return r === !1 ? (e.state.value = "dragging", "decline") : "accept";
   }
@@ -970,7 +970,7 @@ async function Xe(e) {
 }
 function $e(e) {
   const t = e.entities.initiatingDraggable;
-  O(e, t, "onSelfDragEnd"), v(e, "onDragEnd"), Rt(e, e.hovered);
+  F(e, t, "onSelfDragEnd"), v(e, "onDragEnd"), Rt(e, e.hovered);
 }
 function Nt(e) {
   const t = e.entities.selectingArea;
@@ -978,22 +978,22 @@ function Nt(e) {
   const n = e.entities.selectableAreaMap.get(t), s = [...e.entities.selectedSet];
   n?.events?.onSelected?.(s);
 }
-const Vt = (e) => {
+const Yt = (e) => {
   const t = {
     current: null
   }, n = { value: 0 }, s = async () => {
     ye(), t.current?.cancel(), t.current = null;
     const r = e.state.value;
     if (r === "dragging") {
-      const g = await Xe(e);
+      const g = await Ze(e);
       if (g === "accept" && $e(e), g === "accept" || g === "cancel") {
-        ee(e), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", a);
+        ee(e), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", i);
         return;
       }
       return;
     } else r === "selecting" && Nt(e);
-    ee(e), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", a);
-  }, a = (r) => {
+    ee(e), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", i);
+  }, i = (r) => {
     if (e.pointer.value && e.state.value !== "pending") {
       if (e.pointer.value.current = { x: r.clientX, y: r.clientY }, ft(e)) {
         le(e, r, "onSelfDragStart"), v(e, "onDragStart");
@@ -1002,17 +1002,17 @@ const Vt = (e) => {
       if (e.state.value === "dragging") {
         Kt(e, n);
         const g = e.entities.initiatingDraggable;
-        O(e, g, "onSelfDragMove"), v(e, "onDragMove");
+        F(e, g, "onSelfDragMove"), v(e, "onDragMove");
       }
       e.state.value === "selecting" && Ke(e);
     }
   };
   return { pointerDown: (r) => {
-    document.addEventListener("pointerup", s), document.addEventListener("pointermove", a);
+    document.addEventListener("pointerup", s), document.addEventListener("pointermove", i);
     const g = r.target, c = g.closest(
-      G.SELECT_AREA
+      H.SELECT_AREA
     ), u = g.closest(
-      G.DRAGGABLE
+      H.DRAGGABLE
     );
     if (e.entities.modifiersSelectableAreaSet.size > 0 && e.entities.modifiersSelectableAreaSet.has(c)) {
       pe(), e.pointer.value = Se(r), e.state.value = "selecting", e.entities.selectingArea = c, e.entities.selectionBase = new Set(e.entities.selectedSet);
@@ -1023,15 +1023,15 @@ const Vt = (e) => {
       if (!He(g, u, l?.dragHandle))
         return;
       pe(), e.entities.initiatingDraggable = u;
-      const f = Fe(r, u);
+      const f = ze(r, u);
       e.pointer.value = Se(r, f.x, f.y), l?.activation?.distance || l?.activation?.delay ? (e.state.value = "activating", l?.activation?.delay && (e.delay.startTime = Date.now(), t.current = dt(e, () => {
         Q(e), le(e, r, "onSelfDragStart"), v(e, "onDragStart");
       }))) : (Q(e), le(e, r, "onSelfDragStart"), v(e, "onDragStart"));
     }
-  }, pointerUp: s, pointerMove: a, cleanup: () => {
-    t.current?.cancel(), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", a), e.lib.draggableObserver.disconnect(), e.lib.droppableObserver.disconnect(), e.lib.selectableAreaObserver.disconnect();
+  }, pointerUp: s, pointerMove: i, cleanup: () => {
+    t.current?.cancel(), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", i), e.lib.draggableObserver.disconnect(), e.lib.droppableObserver.disconnect(), e.lib.selectableAreaObserver.disconnect();
   } };
-}, Yt = {
+}, Vt = {
   ArrowUp: { dx: 0, dy: -1 },
   ArrowDown: { dx: 0, dy: 1 },
   ArrowLeft: { dx: -1, dy: 0 },
@@ -1040,11 +1040,11 @@ const Vt = (e) => {
   KeyA: { dx: -1, dy: 0 },
   KeyS: { dx: 0, dy: 1 },
   KeyD: { dx: 1, dy: 0 }
-}, Zt = (e) => (t) => {
+}, Xt = (e) => (t) => {
   const { keys: n } = e.keyboard;
   if (n.pressedKeys.value.add(t.code), e.state.value === "dragging") {
     if (n.forCancel.includes(t.code)) {
-      t.preventDefault(), ye(), O(
+      t.preventDefault(), ye(), F(
         e,
         e.entities.initiatingDraggable,
         "onSelfDragCancel"
@@ -1052,21 +1052,21 @@ const Vt = (e) => {
       return;
     }
     if (n.forDrop.includes(t.code)) {
-      t.preventDefault(), (async () => (await Xe(e) && $e(e), ye(), ee(e)))();
+      t.preventDefault(), (async () => (await Ze(e) && $e(e), ye(), ee(e)))();
       return;
     }
-    const a = Yt[t.code];
-    if (a && n.forMove.includes(t.code) && e.pointer.value) {
+    const i = Vt[t.code];
+    if (i && n.forMove.includes(t.code) && e.pointer.value) {
       t.preventDefault();
       const o = n.forMoveFaster.some(
         (g) => n.pressedKeys.value.has(g)
-      ), i = e.keyboard.step * (o ? e.keyboard.moveFaster : 1);
+      ), a = e.keyboard.step * (o ? e.keyboard.moveFaster : 1);
       e.pointer.value.current = {
-        x: e.pointer.value.current.x + a.dx * i,
-        y: e.pointer.value.current.y + a.dy * i
+        x: e.pointer.value.current.x + i.dx * a,
+        y: e.pointer.value.current.y + i.dy * a
       };
       const r = ve(e);
-      we(e, e.hovered, r), O(
+      we(e, e.hovered, r), F(
         e,
         e.entities.initiatingDraggable,
         "onSelfDragMove"
@@ -1076,15 +1076,15 @@ const Vt = (e) => {
     return;
   }
   if (n.forDrag.includes(t.code)) {
-    const a = document.activeElement;
-    if (!a) return;
-    const o = a.closest(
-      G.DRAGGABLE
+    const i = document.activeElement;
+    if (!i) return;
+    const o = i.closest(
+      H.DRAGGABLE
     );
     if (!o || e.entities.modifiersDraggableSet.size === 0 || !e.entities.modifiersDraggableSet.has(o))
       return;
-    const i = e.entities.draggableMap.get(o);
-    if (!He(a, o, i?.dragHandle, !0))
+    const a = e.entities.draggableMap.get(o);
+    if (!He(i, o, a?.dragHandle, !0))
       return;
     t.preventDefault(), pe();
     const r = o.getBoundingClientRect(), g = r.left + r.width / 2, c = r.top + r.height / 2, u = {
@@ -1092,22 +1092,22 @@ const Vt = (e) => {
       clientY: c
     };
     e.entities.initiatingDraggable = o;
-    const l = Fe(u, o);
+    const l = ze(u, o);
     e.pointer.value = Se(
       u,
       l.x,
       l.y
     ), Q(e);
     const f = ve(e);
-    we(e, e.hovered, f), O(e, o, "onSelfDragStart"), v(e, "onDragStart");
+    we(e, e.hovered, f), F(e, o, "onSelfDragStart"), v(e, "onDragStart");
   }
-}, Xt = (e) => (t) => {
+}, Zt = (e) => (t) => {
   e.keyboard.keys.pressedKeys.value.delete(t.code);
 }, $t = (e) => () => {
   e.keyboard.keys.pressedKeys.value.clear();
 }, de = {
-  keyDown: Zt,
-  keyUp: Xt,
+  keyDown: Xt,
+  keyUp: Zt,
   clear: $t
 }, Ut = (e) => () => {
   if (!e.state.value) return;
@@ -1117,11 +1117,11 @@ const Vt = (e) => {
     return;
   }
   if (e.state.value === "selecting" && e.pointer.value) {
-    const s = window.scrollX - t, a = window.scrollY - n;
-    e.pointer.value.start.x -= s, e.pointer.value.start.y -= a, Ke(e);
+    const s = window.scrollX - t, i = window.scrollY - n;
+    e.pointer.value.start.x -= s, e.pointer.value.start.y -= i, Ke(e);
   }
 }, E = 50, qt = 144, Te = 1e3 / qt;
-function Wt(e) {
+function jt(e) {
   return e == null ? {
     top: E,
     right: E,
@@ -1139,7 +1139,7 @@ function Wt(e) {
     left: e.left ?? E
   };
 }
-const jt = {
+const Wt = {
   getScrollState(e) {
     return {
       scrollTop: e.scrollTop,
@@ -1150,14 +1150,14 @@ const jt = {
     e.scrollTop = t, e.scrollLeft = n;
   }
 };
-function Ue(e, t, n, s = jt, a) {
-  const { speed: o = 10, disabled: i = !1 } = t, r = Wt(t.threshold);
+function Ue(e, t, n, s = Wt, i) {
+  const { speed: o = 10, disabled: a = !1 } = t, r = jt(t.threshold);
   let g = null, c = null, u = null, l = 0, f = 0;
   const d = (p) => {
-    a && (a.value = p);
+    i && (i.value = p);
   }, m = (p) => {
     const x = e.value, R = n();
-    if (!x || !R || i) {
+    if (!x || !R || a) {
       d(!1);
       return;
     }
@@ -1171,8 +1171,8 @@ function Ue(e, t, n, s = jt, a) {
     c = p;
     const { scrollTop: k, scrollLeft: T } = s.getScrollState(x);
     (!u || l !== k || f !== T) && (u = s.getRect ? s.getRect(x) : x.getBoundingClientRect(), l = k, f = T);
-    let F = !1, ae = k, ie = T;
-    r.top > 0 && R.y - u.top < r.top ? (ae = k - S, F = !0) : r.bottom > 0 && u.bottom - R.y < r.bottom && (ae = k + S, F = !0), r.left > 0 && R.x - u.left < r.left ? (ie = T - S, F = !0) : r.right > 0 && u.right - R.x < r.right && (ie = T + S, F = !0), F && s.setScroll(x, ae, ie), d(F), g = requestAnimationFrame(m);
+    let z = !1, ie = k, ae = T;
+    r.top > 0 && R.y - u.top < r.top ? (ie = k - S, z = !0) : r.bottom > 0 && u.bottom - R.y < r.bottom && (ie = k + S, z = !0), r.left > 0 && R.x - u.left < r.left ? (ae = T - S, z = !0) : r.right > 0 && u.right - R.x < r.right && (ae = T + S, z = !0), z && s.setScroll(x, ie, ae), d(z), g = requestAnimationFrame(m);
   };
   return { run: () => {
     c = null, g = requestAnimationFrame(m);
@@ -1199,7 +1199,7 @@ const Jt = {
   }
 };
 function en(e, t) {
-  const n = Z(!1), a = Ue(
+  const n = V(!1), i = Ue(
     Qt,
     t ?? {},
     () => {
@@ -1215,29 +1215,29 @@ function en(e, t) {
   ), o = te(
     () => e.state.value,
     (r) => {
-      r === "dragging" ? a.run() : a.stop();
+      r === "dragging" ? i.run() : i.stop();
     }
-  ), i = () => {
-    o(), a.stop();
+  ), a = () => {
+    o(), i.stop();
   };
-  return We(i), { isScrolling: n, stop: i };
+  return je(a), { isScrolling: n, stop: a };
 }
 const tn = (e) => {
-  const t = Vt(e), n = de.keyDown(e), s = de.keyUp(e), a = de.clear(e), o = Ut(e);
-  let i = null;
+  const t = Yt(e), n = de.keyDown(e), s = de.keyUp(e), i = de.clear(e), o = Ut(e);
+  let a = null;
   te(
     e.autoScrollViewport,
     (r) => {
-      i?.(), i = null, (r === !0 || r && typeof r == "object") && (i = en(
+      a?.(), a = null, (r === !0 || r && typeof r == "object") && (a = en(
         e,
         r === !0 ? {} : r
       ).stop);
     },
     { immediate: !0 }
   ), X(() => {
-    document.addEventListener("pointerdown", t.pointerDown), document.addEventListener("keydown", n), document.addEventListener("keyup", s), document.addEventListener("blur", a), document.addEventListener("scroll", o, !0);
-  }), $(() => {
-    document.removeEventListener("pointerdown", t.pointerDown), document.removeEventListener("pointerup", t.pointerUp), document.removeEventListener("pointermove", t.pointerMove), document.removeEventListener("keydown", n), document.removeEventListener("keyup", s), document.removeEventListener("blur", a), document.removeEventListener("scroll", o, !0), i?.(), t.cleanup();
+    document.addEventListener("pointerdown", t.pointerDown), document.addEventListener("keydown", n), document.addEventListener("keyup", s), document.addEventListener("blur", i), document.addEventListener("scroll", o, !0);
+  }), Z(() => {
+    document.removeEventListener("pointerdown", t.pointerDown), document.removeEventListener("pointerup", t.pointerUp), document.removeEventListener("pointermove", t.pointerMove), document.removeEventListener("keydown", n), document.removeEventListener("keyup", s), document.removeEventListener("blur", i), document.removeEventListener("scroll", o, !0), a?.(), t.cleanup();
   });
 }, se = () => {
   const e = Pe(xe);
@@ -1260,33 +1260,41 @@ const tn = (e) => {
   };
 }, nn = /* @__PURE__ */ Be({
   __name: "DragPreview",
+  props: {
+    grid: {}
+  },
   setup(e) {
-    const { state: t, entities: n, preview: s } = qe(), a = _e("contentRef");
-    return te(
-      () => a.value,
+    const { state: t, entities: n, preview: s } = qe(), i = Oe("contentRef");
+    te(
+      () => i.value,
       () => {
-        const o = a.value?.getBoundingClientRect();
-        o && (s.size.value = o);
+        const r = i.value?.getBoundingClientRect();
+        r && (s.size.value = r);
       }
-    ), (o, i) => H(t) === "dragging" ? (L(), W("div", {
+    );
+    const o = (r, g) => !g || g <= 0 ? r : Math.round(r / g) * g, a = b(() => {
+      const { x: r, y: g } = s.position.value, c = typeof e.grid == "object" ? e.grid.x : e.grid, u = typeof e.grid == "object" ? e.grid.y : e.grid;
+      return { x: o(r, c), y: o(g, u) };
+    });
+    return (r, g) => q(t) === "dragging" ? (L(), j("div", {
       key: 0,
       class: "dnd-kit-preview",
       ref_key: "contentRef",
-      ref: a,
+      ref: i,
       style: Ce({
-        transform: `translate3d(${H(s).position.value.x}px, ${H(s).position.value.y}px, 0)`
+        transform: `translate3d(${a.value.x}px, ${a.value.y}px, 0)`
       })
     }, [
-      me(o.$slots, "default", {
-        draggingMap: H(n).draggingMap
+      me(r.$slots, "default", {
+        draggingMap: q(n).draggingMap
       }, () => [
-        (L(!0), W(he, null, je(H(n).draggingMap, ([r, g]) => (L(), W(he, { key: r }, [
-          g.render ? (L(), J(be(g.render), { key: 0 })) : (L(), J(be(r.tagName), {
+        (L(!0), j(he, null, We(q(n).draggingMap, ([c, u]) => (L(), j(he, { key: c }, [
+          u.render ? (L(), J(be(u.render), { key: 0 })) : (L(), J(be(c.tagName), {
             key: 1,
-            innerHTML: g.initialOuterHTML,
+            innerHTML: u.initialOuterHTML,
             style: Ce({
-              width: g.initialRect.width + "px",
-              height: g.initialRect.height + "px"
+              width: u.initialRect.width + "px",
+              height: u.initialRect.height + "px"
             })
           }, null, 8, ["innerHTML", "style"]))
         ], 64))), 128))
@@ -1302,21 +1310,21 @@ const tn = (e) => {
     class: {}
   },
   setup(e) {
-    const t = e, n = _e("previewRef"), s = yt(n, t);
+    const t = e, n = Oe("previewRef"), s = yt(n, t);
     tn(s);
-    const a = b(() => s.preview.render.value ?? nn);
-    return Qe(xe, s), (o, i) => (L(), W(he, null, [
+    const i = b(() => s.preview.render.value ?? nn);
+    return Qe(xe, s), (o, a) => (L(), j(he, null, [
       me(o.$slots, "default"),
       (L(), J(et, {
-        to: H(s).preview.to.value || "body"
+        to: q(s).preview.to.value || "body"
       }, [
         tt("div", nt({
           ref_key: "previewRef",
           ref: n,
           class: "dnd-kit-preview-container"
         }, t), [
-          me(o.$slots, "preview", { preview: a.value }, () => [
-            (L(), J(be(a.value)))
+          me(o.$slots, "preview", { preview: i.value }, () => [
+            (L(), J(be(i.value)))
           ])
         ], 16)
       ], 8, ["to"]))
@@ -1325,8 +1333,8 @@ const tn = (e) => {
 });
 function on(e, t, n) {
   const s = se();
-  let a, o, i;
-  typeof t == "function" ? (a = {}, o = t) : (a = t ?? {}, o = n);
+  let i, o, a;
+  typeof t == "function" ? (i = {}, o = t) : (i = t ?? {}, o = n);
   const r = b({
     get() {
       const l = D(e);
@@ -1348,21 +1356,21 @@ function on(e, t, n) {
       return s.entities.draggableMap.get(l)?.hoveredPlacement;
   });
   return X(() => {
-    i = D(e), i && (i.addEventListener("dragstart", w), i.addEventListener("drag", w), i.addEventListener("dragend", w), i.setAttribute(_.DRAGGABLE, ""), s.lib.draggableObserver.observe(i), s.entities.draggableMap.set(i, {
-      render: a.render,
-      disabled: a.disabled ?? !1,
-      groups: a.groups ?? [],
-      modifier: a.modifier,
-      events: a.events,
+    a = D(e), a && (a.addEventListener("dragstart", w), a.addEventListener("drag", w), a.addEventListener("dragend", w), a.setAttribute(O.DRAGGABLE, ""), s.lib.draggableObserver.observe(a), s.entities.draggableMap.set(a, {
+      render: i.render,
+      disabled: i.disabled ?? !1,
+      groups: i.groups ?? [],
+      modifier: i.modifier,
+      events: i.events,
       payload: o,
-      data: a.data,
-      dragHandle: a.dragHandle,
-      activation: a.activation,
-      placementMargins: a.placementMargins,
+      data: i.data,
+      dragHandle: i.dragHandle,
+      activation: i.activation,
+      placementMargins: i.placementMargins,
       hoveredPlacement: void 0
     }));
-  }), $(() => {
-    i && (s.lib.draggableObserver.unobserve(i), s.entities.visibleDraggableSet.delete(i), s.entities.draggableMap.delete(i), s.entities.modifiersDraggableSet.delete(i));
+  }), Z(() => {
+    a && (s.lib.draggableObserver.unobserve(a), s.entities.visibleDraggableSet.delete(a), s.entities.draggableMap.delete(a), s.entities.modifiersDraggableSet.delete(a));
   }), {
     selected: r,
     isDragging: g,
@@ -1372,9 +1380,9 @@ function on(e, t, n) {
 }
 const rn = (e, t) => {
   const n = se(), s = b(() => e.value === n.entities.selectingArea);
-  let a = null;
+  let i = null;
   X(() => {
-    a = D(e), a && (a.setAttribute(_.SELECT_AREA, ""), n.lib.selectableAreaObserver.observe(a), n.entities.selectableAreaMap.set(a, {
+    i = D(e), i && (i.setAttribute(O.SELECT_AREA, ""), n.lib.selectableAreaObserver.observe(i), n.entities.selectableAreaMap.set(i, {
       modifier: t?.modifier ?? {
         keys: ["ControlLeft"],
         method: "every"
@@ -1383,13 +1391,13 @@ const rn = (e, t) => {
       disabled: t?.disabled ?? !1,
       groups: t?.groups ?? []
     }));
-  }), $(() => {
-    a && (n.lib.selectableAreaObserver.unobserve(a), n.entities.visibleSelectableAreaSet.delete(a), n.entities.modifiersSelectableAreaSet.delete(a), n.entities.selectableAreaMap.delete(a));
+  }), Z(() => {
+    i && (n.lib.selectableAreaObserver.unobserve(i), n.entities.visibleSelectableAreaSet.delete(i), n.entities.modifiersSelectableAreaSet.delete(i), n.entities.selectableAreaMap.delete(i));
   });
   const o = b(() => {
     n.scrollPosition.x, n.scrollPosition.y;
-    const i = n.pointer.value;
-    return !i || n.state.value !== "selecting" || !a || !s.value ? {} : Dt(i.start, i.current, a);
+    const a = n.pointer.value;
+    return !a || n.state.value !== "selecting" || !i || !s.value ? {} : Dt(a.start, a.current, i);
   });
   return {
     isSelecting: s,
@@ -1401,18 +1409,18 @@ function ln(e, t) {
   if (!n) throw Error("DnD provider not found");
   let s = null;
   return X(() => {
-    s = D(e), s && (s.setAttribute(_.CONSTRAINT_AREA, ""), n.entities.constraintsAreaMap.set(s, {
+    s = D(e), s && (s.setAttribute(O.CONSTRAINT_AREA, ""), n.entities.constraintsAreaMap.set(s, {
       axis: t?.axis || "both",
       restrictToArea: t?.restrictToArea || !1
     }));
-  }), $(() => {
+  }), Z(() => {
     s && n.entities.constraintsAreaMap.delete(s);
   }), {};
 }
 function cn(e, t, n) {
   const s = se();
-  let a = null, o, i;
-  typeof t == "function" ? (o = {}, i = t) : (o = t ?? {}, i = n);
+  let i = null, o, a;
+  typeof t == "function" ? (o = {}, a = t) : (o = t ?? {}, a = n);
   const r = b(() => {
     const c = D(e);
     return c ? s.entities.allowedDroppableSet.has(c) : !1;
@@ -1422,41 +1430,41 @@ function cn(e, t, n) {
       return s.entities.droppableMap.get(c)?.hoveredPlacement;
   });
   return X(() => {
-    a = D(e), a && (a.setAttribute(_.DROPPABLE, ""), s.lib.droppableObserver.observe(a), s.entities.droppableMap.set(a, {
+    i = D(e), i && (i.setAttribute(O.DROPPABLE, ""), s.lib.droppableObserver.observe(i), s.entities.droppableMap.set(i, {
       disabled: o.disabled ?? !1,
       groups: o.groups ?? [],
       groupMatch: o.groupMatch ?? "every",
       events: o.events,
-      payload: i,
+      payload: a,
       data: o.data,
       hoveredPlacement: void 0
     }));
-  }), $(() => {
-    a && (s.lib.droppableObserver.unobserve(a), s.entities.visibleDroppableSet.delete(a), s.entities.droppableMap.delete(a));
+  }), Z(() => {
+    i && (s.lib.droppableObserver.unobserve(i), s.entities.visibleDroppableSet.delete(i), s.entities.droppableMap.delete(i));
   }), {
     isAllowed: r,
     isDragOver: g
   };
 }
 const gn = (e, t) => {
-  const n = qe(), s = Z(!1), o = Ue(
+  const n = qe(), s = V(!1), o = Ue(
     e,
     t ?? {},
     () => {
       if (n.state.value !== "dragging") return null;
-      const i = n.preview.position.value, r = n.preview.size.value;
-      return i ? r?.width && r?.height ? {
-        x: i.x + r.width / 2,
-        y: i.y + r.height / 2
-      } : i : null;
+      const a = n.preview.position.value, r = n.preview.size.value;
+      return a ? r?.width && r?.height ? {
+        x: a.x + r.width / 2,
+        y: a.y + r.height / 2
+      } : a : null;
     },
     void 0,
     s
   );
   return te(
     () => n.state.value,
-    (i) => {
-      i === "dragging" ? o.run() : o.stop();
+    (a) => {
+      a === "dragging" ? o.run() : o.stop();
     }
   ), { isScrolling: s };
 };