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

Core functionality for Vue DnD Kit - a lightweight Vue 3 library for building performant and accessible drag and drop interfaces

(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"
}, H = {
  SELECT_AREA: `[${O.SELECT_AREA}]`,
  DRAGGABLE: `[${O.DRAGGABLE}]`,
  CONSTRAINT_AREA: `[${O.CONSTRAINT_AREA}]`
}, xe = "VueDnDKitProvider", Ie = (e, t, n, s) => {
  const i = /* @__PURE__ */ new Set();
  return t.forEach((o) => {
    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) {
      i.add(o);
      return;
    }
    g[c]((l) => n.value.has(l)) && i.add(o);
  }), i;
};
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;
  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 = 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 && G(s, e)) return !0;
  return !1;
}, 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 && G(s, e)) return !0;
  return !1;
}, ne = (e, t) => {
  if (!e.length || !t.length) return !0;
  const n = new Set(t);
  return e.some((s) => n.has(s));
};
function ot(e, t, n, s) {
  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 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 a of t.keys()) {
    const r = n.get(a);
    for (const g of r?.groups ?? []) s.add(g);
  }
  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 i = s.target;
      e[s.isIntersecting ? "add" : "delete"](i);
    });
  });
  return {
    observe: (n) => t.observe(n),
    unobserve: (n) => t.unobserve(n),
    disconnect: () => t.disconnect()
  };
};
function Se(e, t = 0, n = 0) {
  return {
    start: { x: e.clientX, y: e.clientY },
    current: { x: e.clientX, y: e.clientY },
    offset: { x: t, y: n }
  };
}
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,
    initialRect: e.getBoundingClientRect(),
    initialOuterHTML: e.outerHTML
  };
}
function lt(e, t, n) {
  e.forEach((s) => {
    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, _e(e, s));
}
function Q(e) {
  e.entities.initiatingDraggable && (e.state.value = "dragging", gt(
    e.entities.initiatingDraggable,
    e.entities.selectedSet,
    e.entities.draggableMap,
    e.entities.draggingMap
  ));
}
function gt(e, t, n, s) {
  t.has(e) ? lt(t, n, s) : (t.clear(), ct(e, n, s));
}
function He(e, t, n, s) {
  if (s || !n) return !0;
  const i = e.closest(n);
  return i ? t.contains(i) : !1;
}
function ut(e, t) {
  if (!e || !t) return 1;
  const n = Math.abs(e.current.x - e.start.x), s = Math.abs(e.current.y - e.start.y);
  if (typeof t == "number") {
    const c = Math.sqrt(n * n + s * s);
    return Math.min(c / t, 1);
  }
  const {
    x: i = 0,
    y: o = 0,
    condition: a = "any"
  } = t;
  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, 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)
    return !1;
  const t = e.entities.draggableMap.get(
    e.entities.initiatingDraggable
  );
  return Ge(
    e.distanceProgress.value,
    e.delay.progress,
    t?.activation
  ) ? (Q(e), !0) : !1;
}
function dt(e, t) {
  let n = null;
  const s = () => {
    if (e.state.value !== "activating" || !e.entities.initiatingDraggable) {
      n = null;
      return;
    }
    const i = e.entities.draggableMap.get(
      e.entities.initiatingDraggable
    ), o = i?.activation?.delay;
    if (!o) {
      n = null;
      return;
    }
    e.delay.progress = Math.min(
      (Date.now() - e.delay.startTime) / (o * 1e3),
      1
    ), Ge(
      e.distanceProgress.value,
      e.delay.progress,
      i?.activation
    ) ? (t(), n = null) : n = requestAnimationFrame(s);
  };
  return n = requestAnimationFrame(s), {
    cancel: () => {
      n !== null && (cancelAnimationFrame(n), n = null);
    }
  };
}
function mt(e, t) {
  const n = e.closest(
    H.CONSTRAINT_AREA
  );
  return !n || !t.has(n) ? null : {
    element: n,
    entity: t.get(n)
  };
}
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, i) {
  let o = e, a = t;
  return n !== "y" && (o = Math.max(
    s.left,
    Math.min(s.right - i.width, e)
  )), n !== "x" && (a = Math.max(
    s.top,
    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 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: a, y: r };
  const g = mt(n, s);
  if (!g)
    return { x: a, y: r };
  const { element: c, entity: u } = g, l = c.getBoundingClientRect(), f = n.getBoundingClientRect(), d = ht(
    a,
    r,
    u.axis || "both",
    f
  );
  return u.restrictToArea ? bt(
    d.x,
    d.y,
    u.axis || "both",
    l,
    t ?? { width: 0, height: 0 }
  ) : d;
}
const Y = {
  forDrag: ["Enter", "Space"],
  forCancel: ["Escape"],
  forDrop: ["Enter", "Space"],
  forMove: [
    "ArrowUp",
    "ArrowDown",
    "ArrowLeft",
    "ArrowRight",
    "KeyW",
    "KeyA",
    "KeyS",
    "KeyD"
  ],
  forMoveFaster: ["ShiftLeft", "ShiftRight"]
};
function yt(e, t) {
  const n = V(), s = oe(), o = {
    keys: {
      pressedKeys: oe(/* @__PURE__ */ new Set()),
      forDrag: [...Y.forDrag],
      forCancel: [...Y.forCancel],
      forDrop: [...Y.forDrop],
      forMove: [...Y.forMove],
      forMoveFaster: [...Y.forMoveFaster]
    },
    step: 8,
    moveFaster: 4
  }, a = $({
    draggableMap: /* @__PURE__ */ new Map(),
    droppableMap: /* @__PURE__ */ new Map(),
    selectableAreaMap: /* @__PURE__ */ new Map(),
    constraintsAreaMap: /* @__PURE__ */ new Map(),
    initiatingDraggable: void 0,
    selectingArea: void 0,
    draggingMap: /* @__PURE__ */ new Map(),
    selectedSet: /* @__PURE__ */ new Set(),
    selectionBase: /* @__PURE__ */ new Set(),
    allowedDroppableSet: b(() => n.value ? ot(
      a.visibleDroppableSet,
      a.draggingMap,
      a.draggableMap,
      a.droppableMap
    ) : /* @__PURE__ */ new Set()),
    allowedDraggableSet: b(() => n.value ? rt(
      a.visibleDraggableSet,
      a.draggingMap,
      a.draggableMap
    ) : /* @__PURE__ */ new Set()),
    modifiersSelectableAreaSet: b(() => Ie(
      a.selectableAreaMap,
      a.visibleSelectableAreaSet,
      o.keys.pressedKeys
    )),
    modifiersDraggableSet: b(() => Ie(
      a.draggableMap,
      a.visibleDraggableSet,
      o.keys.pressedKeys,
      (S) => Ee(S, { entities: a })
    )),
    visibleDraggableSet: /* @__PURE__ */ new Set(),
    visibleDroppableSet: /* @__PURE__ */ new Set(),
    visibleSelectableAreaSet: /* @__PURE__ */ new Set()
  }), r = $({
    draggable: /* @__PURE__ */ new Map(),
    droppable: /* @__PURE__ */ new Map()
  }), g = {
    throttle: V(0)
  }, c = $({
    x: window.scrollX,
    y: window.scrollY
  }), u = $({
    progress: 0,
    startTime: 0
  }), l = b(() => {
    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(
    a.visibleDraggableSet
  ), d = re(
    a.visibleDroppableSet
  ), m = re(
    a.visibleSelectableAreaSet
  ), h = oe(), M = V(new DOMRect()), p = b(() => {
    c.x, c.y;
    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,
      a.constraintsAreaMap
    );
  }), x = b({
    get: () => t?.previewTo,
    set: (y) => x.value = y
  }), R = b(() => t?.autoScrollViewport);
  return {
    state: n,
    pointer: s,
    entities: a,
    keyboard: o,
    scrollPosition: c,
    delay: u,
    distanceProgress: l,
    hovered: r,
    collision: g,
    preview: {
      size: M,
      position: p,
      render: h,
      ref: e,
      to: x
    },
    lib: {
      draggableObserver: f,
      droppableObserver: d,
      selectableAreaObserver: m,
      rectCache: /* @__PURE__ */ new Map()
    },
    autoScrollViewport: R
  };
}
const ee = (e) => {
  const t = e.hovered.draggable.keys().next().value;
  if (t) {
    const s = e.entities.draggableMap.get(t);
    s && (s.hoveredPlacement = void 0);
  }
  const n = e.hovered.droppable.keys().next().value;
  if (n) {
    const s = e.entities.droppableMap.get(n);
    s && (s.hoveredPlacement = void 0);
  }
  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(H.SELECT_AREA) ?? null;
}
const Dt = (e, t, n) => {
  if (!n) return {};
  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`,
    top: `${l}px`,
    width: `${g}px`,
    height: `${c}px`,
    pointerEvents: "none",
    border: "1px solid #3b82f6",
    backgroundColor: "#3b82f61a"
  };
}, Ke = (e) => {
  if (!e.pointer.value || !e.entities.selectingArea) return;
  const { selectingArea: t } = e.entities, n = wt(
    e.pointer.value.start,
    e.pointer.value.current
  ), s = e.entities.selectableAreaMap.get(t)?.groups ?? [], i = e.lib.rectCache;
  e.entities.visibleDraggableSet.forEach((o) => {
    if (o === t || !t.contains(o)) return;
    const a = St(o);
    if (a && a !== t) {
      e.entities.selectedSet.delete(o);
      return;
    }
    if (Ee(o, e)) {
      e.entities.selectedSet.delete(o);
      return;
    }
    const g = e.entities.draggableMap.get(o)?.groups ?? [];
    if (!ne(s, g)) {
      e.entities.selectedSet.delete(o);
      return;
    }
    let c = i.get(o);
    c || (c = o.getBoundingClientRect(), i.set(o, c));
    const u = e.entities.selectionBase.has(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), 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)), i = Math.max(0, Math.min(n, e.length - s));
  return [...e.slice(0, s), ...e.slice(s + i)];
}
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 i of n) s = Le(s, i, 1);
  return s;
}
function Ne(e, t, n) {
  if (t === n || t < 0 || n < 0 || t >= e.length || n >= e.length)
    return e;
  const s = [...e];
  return [s[t], s[n]] = [s[n], s[t]], s;
}
const I = {
  getInsertSide(e, t) {
    return e ? t === "vertical" ? e.top && !e.bottom ? "before" : e.bottom && !e.top ? "after" : e.top ? "before" : null : e.left && !e.right ? "before" : e.right && !e.left ? "after" : e.left ? "before" : null : null;
  },
  isAtZoneStart(e, t) {
    return I.getInsertSide(e, t) === "before" && !e?.center;
  },
  isAtZoneEnd(e, t) {
    return I.getInsertSide(e, t) === "after" && !e?.center;
  }
};
function Ye(e, t) {
  const { draggedItems: n, dropZone: s, hoveredDraggable: i } = e;
  if (!n.length) return null;
  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 (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";
    } else {
      if (f)
        return null;
      {
        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");
      }
    }
  } else {
    if (!s) return null;
    const f = I.isAtZoneStart(s.placement, t);
    u = f ? 0 : c, l = f ? "prepend" : "append";
  }
  return { targetIndex: u, mode: l, targetArr: a };
}
function Mt(e, t = "vertical") {
  const { draggedItems: n } = e;
  if (!n.length) return null;
  const s = Ye(e, t);
  if (!s) return null;
  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 === 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 = 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), 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, i);
      return { sourceItems: l, targetItems: l, sourceIndexes: s, targetIndex: i, sameList: !0 };
    } else {
      const l = [...r], f = [...g];
      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 < 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, [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 = 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 = Ye(e, t);
  if (!s) return null;
  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((a) => a.index), s = t.map((a) => a.item), i = t[0].items;
  return { sourceItems: N(i, n), removedItems: s, sourceIndexes: n };
}
function Ve(e) {
  return {
    // Low-level array ops
    insertAt: C,
    removeAt: Le,
    removeIndexes: N,
    swapAt: Ne,
    // Placement helpers
    getInsertSide: (t, n) => I.getInsertSide(t, n),
    isAtZoneStart: (t, n) => I.isAtZoneStart(t, n),
    isAtZoneEnd: (t, n) => I.isAtZoneEnd(t, n),
    // High-level (event-bound)
    suggestSort: (t) => Mt(e, t),
    suggestSwap: () => vt(e),
    suggestCopy: (t) => At(e, t),
    suggestRemove: () => xt(e)
  };
}
const B = (e) => e.keys().next().value, Et = (e) => e.target.closest(
  H.DRAGGABLE
);
function Lt(e) {
  const t = e.entities.initiatingDraggable;
  if (!t) return [];
  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 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],
    items: g,
    data: n?.data?.()
  }), e.entities.draggingMap.forEach((u, l) => {
    const f = e.entities.draggableMap.get(l), d = f?.payload;
    if (!d) return;
    const m = d();
    if (!Array.isArray(m) || m.length < 2) return;
    const [h, M] = m;
    if (M !== g) return;
    const p = Number(h);
    c.has(p) || c.set(p, {
      index: p,
      item: M[p],
      items: g,
      data: f?.data?.()
    });
  }), [...c.values()].sort((u, l) => u.index - l.index);
}
const A = (e, t) => {
  const n = Lt(e);
  let s, i;
  if (t) {
    const o = e.entities.droppableMap.get(t);
    if (o) {
      const g = o.payload;
      s = {
        items: g ? g() : [],
        placement: e.hovered.droppable.get(t),
        data: o.data?.()
      };
    }
    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);
          i = {
            element: a,
            placement: u ?? l,
            index: h,
            item: m[h],
            items: m,
            data: g?.data?.()
          };
        }
      } else g?.data && (i = {
        element: a,
        placement: u ?? l,
        index: -1,
        item: void 0,
        items: [],
        data: g.data()
      });
    }
  }
  return {
    draggedItems: n,
    dropZone: s,
    hoveredDraggable: i,
    provider: e,
    helpers: Ve({ draggedItems: n, dropZone: s, hoveredDraggable: i })
  };
}, 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));
}, v = (e, t) => {
  const n = A(e);
  e.entities.draggingMap.forEach((s) => {
    s.disabled || s.events?.[t]?.(n);
  });
}, Ct = (e, t, n) => {
  if (t !== n) {
    if (t && !K(t, e)) {
      const s = A(e, t);
      e.entities.droppableMap.get(t)?.events?.onLeave?.(s);
    }
    if (n && !K(n, e)) {
      const s = A(e, n);
      e.entities.droppableMap.get(n)?.events?.onEnter?.(s);
    }
  }
}, It = (e, t, n) => {
  if (t !== n) {
    const s = A(e);
    if (t) {
      const i = e.entities.draggableMap.get(t);
      i && !i.disabled && i.events?.onLeave?.(s);
    }
    if (n) {
      const i = e.entities.draggableMap.get(n);
      i && !i.disabled && i.events?.onHover?.(s);
    }
  }
}, le = (e, t, n) => {
  const s = Et(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 && !K(n, e) && e.entities.droppableMap.get(n)?.events?.onLeave?.(A(e, n));
}, De = (e, t) => {
  const n = B(t.droppable);
  n && !K(n, e) && e.entities.droppableMap.get(n)?.events?.onLeave?.(A(e, n));
}, kt = (e, t, n = 5) => {
  const s = n / 2;
  return {
    left: e - s,
    top: t - s,
    width: n,
    height: n
  };
}, Tt = (e) => {
  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, 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 && i >= d && i <= m)
      return {
        top: !1,
        right: !1,
        bottom: !1,
        left: !1,
        center: !0
      };
  }
  const o = t.left + t.width / 2, a = t.top + t.height / 2;
  return {
    top: i <= a,
    bottom: i > a,
    left: s <= o,
    right: s > o,
    center: !1
  };
}, Pt = (e) => ({
  x: e.left + e.width / 2,
  y: e.top + e.height / 2
}), Re = (e, t) => {
  const n = Pt(t);
  return Math.hypot(e.x - n.x, e.y - n.y);
};
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 U(e, t) {
  Bt(e.hoveredPlacement, t) || (e.hoveredPlacement = t);
}
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(a, d);
      const m = Ot(n.elements, a);
      if (m) {
        const h = m.getBoundingClientRect();
        t.draggable.set(
          m,
          P(o, h, void 0)
        );
      }
    } else {
      t.draggable.set(r, d);
      const m = n.zones.find((h) => h !== a);
      if (m) {
        const h = m.getBoundingClientRect();
        t.droppable.set(
          m,
          P(o, h)
        );
      }
    }
  } else {
    if (a) {
      const l = a.getBoundingClientRect();
      t.droppable.set(a, P(o, l));
    }
    if (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 = 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;
            t.draggable.set(
              r,
              P(o, d, M)
            );
          }
        }
      else {
        const l = r.getBoundingClientRect(), f = e.entities.draggableMap.get(r)?.placementMargins;
        t.draggable.set(
          r,
          P(o, l, f)
        );
      }
  }
  const c = B(t.droppable), u = B(t.draggable);
  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 && U(l, void 0);
  }
  if (u) {
    const l = e.entities.draggableMap.get(u);
    l && U(l, t.draggable.get(u));
  }
  if (c) {
    const l = e.entities.droppableMap.get(c);
    l && U(l, t.droppable.get(c));
  }
  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 };
  const t = e.getBoundingClientRect();
  return {
    x: t.x,
    y: t.y,
    width: t.width,
    height: t.height,
    top: t.top,
    left: t.left,
    right: t.right,
    bottom: t.bottom
  };
}, ue = (e, t) => {
  const n = Math.max(
    0,
    Math.min(e.x + e.width, t.x + t.width) - Math.max(e.x, t.x)
  ), s = Math.max(
    0,
    Math.min(e.y + e.height, t.y + t.height) - Math.max(e.y, t.y)
  ), 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, a = r?.height ?? 0;
  }
  return {
    x: n,
    y: s,
    width: o,
    height: a,
    top: s,
    left: n,
    right: n + o,
    bottom: s + a
  };
}, 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) && 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) ? !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)
  );
}
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), i = Xe(e), o = [], a = [];
  let r = n;
  for (; r; )
    (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 (!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;
    const c = s.zones[0];
    if (!c) return s;
    const u = ke(e);
    return { elements: [...Me(e)].filter(
      (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) => _(d.box, n) - _(m.box, n)).map(({ el: d }) => d), zones: s.zones };
  }
  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, 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) {
  const t = ve(e);
  we(e, e.hovered, t);
}
function Kt(e, t) {
  const n = e.collision?.throttle?.value ?? 0;
  if (n <= 0) {
    Ae(e);
    return;
  }
  const s = Date.now();
  s - t.value >= n && (t.value = s, Ae(e));
}
async function Ze(e) {
  const t = e.hovered.droppable.keys().next().value;
  if (!t || K(t, e)) return "accept";
  const n = e.entities.droppableMap.get(t), s = A(e, t);
  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) {
        const f = l.payload?.();
        if (!(!Array.isArray(f) || f.length < 2) && Number(f[0]) === u.index && f[1] === u.items)
          return ne(l.groups ?? [], r);
      }
      return !0;
    }), c = s.draggedItems.filter(
      (u) => !g.includes(u)
    );
    if (c.length > 0) {
      const u = (l) => ({
        ...s,
        draggedItems: l,
        helpers: Ve({ ...s, draggedItems: l })
      });
      if (n.events?.onValidate) {
        const l = n.events.onValidate({
          validItems: g,
          invalidItems: c,
          dropZone: s.dropZone,
          hoveredDraggable: s.hoveredDraggable
        }), f = l != null && typeof l.then == "function";
        let d;
        if (f) {
          e.state.value = "pending";
          try {
            d = await l;
          } catch {
            const h = e.entities.initiatingDraggable;
            return F(e, h, "onSelfDragCancel"), v(e, "onDragCancel"), De(e, e.hovered), "cancel";
          }
        } else
          d = l;
        if (d === !1)
          return e.state.value = "dragging", "decline";
        const m = Array.isArray(d) ? d : g;
        if (m.length === 0) return "accept";
        i = u(m);
      } else {
        if (g.length === 0) return "accept";
        i = u(g);
      }
    }
  }
  const o = n?.events?.onDrop?.(i);
  if (o != null && typeof o.then == "function") {
    e.state.value = "pending";
    let r;
    try {
      r = await o;
    } catch {
      const g = e.entities.initiatingDraggable;
      return F(e, g, "onSelfDragCancel"), v(e, "onDragCancel"), De(e, e.hovered), "cancel";
    }
    return r === !1 ? (e.state.value = "dragging", "decline") : "accept";
  }
  return o === !1 ? "decline" : "accept";
}
function $e(e) {
  const t = e.entities.initiatingDraggable;
  F(e, t, "onSelfDragEnd"), v(e, "onDragEnd"), Rt(e, e.hovered);
}
function Nt(e) {
  const t = e.entities.selectingArea;
  if (!t) return;
  const n = e.entities.selectableAreaMap.get(t), s = [...e.entities.selectedSet];
  n?.events?.onSelected?.(s);
}
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 Ze(e);
      if (g === "accept" && $e(e), g === "accept" || g === "cancel") {
        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", 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");
        return;
      }
      if (e.state.value === "dragging") {
        Kt(e, n);
        const g = e.entities.initiatingDraggable;
        F(e, g, "onSelfDragMove"), v(e, "onDragMove");
      }
      e.state.value === "selecting" && Ke(e);
    }
  };
  return { pointerDown: (r) => {
    document.addEventListener("pointerup", s), document.addEventListener("pointermove", i);
    const g = r.target, c = g.closest(
      H.SELECT_AREA
    ), u = g.closest(
      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);
      return;
    }
    if (e.entities.modifiersDraggableSet.size > 0 && e.entities.modifiersDraggableSet.has(u)) {
      const l = e.entities.draggableMap.get(u);
      if (!He(g, u, l?.dragHandle))
        return;
      pe(), e.entities.initiatingDraggable = 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: 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();
  } };
}, Vt = {
  ArrowUp: { dx: 0, dy: -1 },
  ArrowDown: { dx: 0, dy: 1 },
  ArrowLeft: { dx: -1, dy: 0 },
  ArrowRight: { dx: 1, dy: 0 },
  KeyW: { dx: 0, dy: -1 },
  KeyA: { dx: -1, dy: 0 },
  KeyS: { dx: 0, dy: 1 },
  KeyD: { dx: 1, dy: 0 }
}, 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(), F(
        e,
        e.entities.initiatingDraggable,
        "onSelfDragCancel"
      ), v(e, "onDragCancel"), De(e, e.hovered), ee(e);
      return;
    }
    if (n.forDrop.includes(t.code)) {
      t.preventDefault(), (async () => (await Ze(e) && $e(e), ye(), ee(e)))();
      return;
    }
    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)
      ), a = e.keyboard.step * (o ? e.keyboard.moveFaster : 1);
      e.pointer.value.current = {
        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), F(
        e,
        e.entities.initiatingDraggable,
        "onSelfDragMove"
      ), v(e, "onDragMove");
      return;
    }
    return;
  }
  if (n.forDrag.includes(t.code)) {
    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 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 = {
      clientX: g,
      clientY: c
    };
    e.entities.initiatingDraggable = 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), F(e, o, "onSelfDragStart"), v(e, "onDragStart");
  }
}, Zt = (e) => (t) => {
  e.keyboard.keys.pressedKeys.value.delete(t.code);
}, $t = (e) => () => {
  e.keyboard.keys.pressedKeys.value.clear();
}, de = {
  keyDown: Xt,
  keyUp: Zt,
  clear: $t
}, Ut = (e) => () => {
  if (!e.state.value) return;
  const t = e.scrollPosition.x, n = e.scrollPosition.y;
  if (e.scrollPosition.x = window.scrollX, e.scrollPosition.y = window.scrollY, e.lib.rectCache.clear(), e.state.value === "dragging") {
    Ae(e);
    return;
  }
  if (e.state.value === "selecting" && e.pointer.value) {
    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 jt(e) {
  return e == null ? {
    top: E,
    right: E,
    bottom: E,
    left: E
  } : typeof e == "number" ? {
    top: e,
    right: e,
    bottom: e,
    left: e
  } : {
    top: e.top ?? E,
    right: e.right ?? E,
    bottom: e.bottom ?? E,
    left: e.left ?? E
  };
}
const Wt = {
  getScrollState(e) {
    return {
      scrollTop: e.scrollTop,
      scrollLeft: e.scrollLeft
    };
  },
  setScroll(e, t, n) {
    e.scrollTop = t, e.scrollLeft = n;
  }
};
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) => {
    i && (i.value = p);
  }, m = (p) => {
    const x = e.value, R = n();
    if (!x || !R || a) {
      d(!1);
      return;
    }
    c || (c = p);
    const y = p - c;
    if (y < Te) {
      g = requestAnimationFrame(m);
      return;
    }
    const S = o * (y / Te);
    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 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);
  }, stop: () => {
    g && (cancelAnimationFrame(g), g = null), u = null, l = 0, f = 0, c = null, d(!1);
  } };
}
const Jt = {
  getScrollState() {
    return {
      scrollTop: window.scrollY ?? document.documentElement.scrollTop,
      scrollLeft: window.scrollX ?? document.documentElement.scrollLeft
    };
  },
  setScroll(e, t, n) {
    window.scrollTo(n, t);
  },
  getRect() {
    return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
  }
}, Qt = {
  get value() {
    return typeof document < "u" ? document.documentElement : null;
  }
};
function en(e, t) {
  const n = V(!1), i = Ue(
    Qt,
    t ?? {},
    () => {
      if (e.state.value !== "dragging") return null;
      const r = e.preview.position.value, g = e.preview.size.value;
      return r ? g?.width && g?.height ? {
        x: r.x + g.width / 2,
        y: r.y + g.height / 2
      } : r : null;
    },
    Jt,
    n
  ), o = te(
    () => e.state.value,
    (r) => {
      r === "dragging" ? i.run() : i.stop();
    }
  ), a = () => {
    o(), i.stop();
  };
  return je(a), { isScrolling: n, stop: a };
}
const tn = (e) => {
  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) => {
      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", 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);
  if (!e) throw Error("DnD provider not found");
  return e;
}, qe = () => {
  const e = se();
  return {
    preview: e.preview,
    delay: e.delay,
    distanceProgress: e.distanceProgress,
    entities: e.entities,
    pointer: e.pointer,
    state: e.state,
    scrollPosition: e.scrollPosition,
    keyboard: e.keyboard,
    hovered: e.hovered,
    collision: e.collision,
    autoScrollViewport: e.autoScrollViewport
  };
}, nn = /* @__PURE__ */ Be({
  __name: "DragPreview",
  props: {
    grid: {}
  },
  setup(e) {
    const { state: t, entities: n, preview: s } = qe(), i = Oe("contentRef");
    te(
      () => i.value,
      () => {
        const r = i.value?.getBoundingClientRect();
        r && (s.size.value = r);
      }
    );
    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: i,
      style: Ce({
        transform: `translate3d(${a.value.x}px, ${a.value.y}px, 0)`
      })
    }, [
      me(r.$slots, "default", {
        draggingMap: q(n).draggingMap
      }, () => [
        (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: u.initialOuterHTML,
            style: Ce({
              width: u.initialRect.width + "px",
              height: u.initialRect.height + "px"
            })
          }, null, 8, ["innerHTML", "style"]))
        ], 64))), 128))
      ])
    ], 4)) : Je("", !0);
  }
}), an = /* @__PURE__ */ Be({
  __name: "DnDProvider",
  props: {
    autoScrollViewport: { type: [Object, Boolean, null] },
    previewTo: { type: [String, Boolean, null] },
    style: {},
    class: {}
  },
  setup(e) {
    const t = e, n = Oe("previewRef"), s = yt(n, t);
    tn(s);
    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: 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: i.value }, () => [
            (L(), J(be(i.value)))
          ])
        ], 16)
      ], 8, ["to"]))
    ], 64));
  }
});
function on(e, t, n) {
  const s = se();
  let i, o, a;
  typeof t == "function" ? (i = {}, o = t) : (i = t ?? {}, o = n);
  const r = b({
    get() {
      const l = D(e);
      return l ? s.entities.selectedSet.has(l) : !1;
    },
    set(l) {
      const f = D(e);
      f && s.entities.selectedSet[l ? "add" : "delete"](f);
    }
  }), g = b(() => {
    const l = D(e);
    return l ? s.entities.draggingMap.has(l) : !1;
  }), c = b(() => {
    const l = D(e);
    return l ? s.entities.allowedDraggableSet.has(l) : !1;
  }), u = b(() => {
    const l = D(e);
    if (l)
      return s.entities.draggableMap.get(l)?.hoveredPlacement;
  });
  return X(() => {
    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: i.data,
      dragHandle: i.dragHandle,
      activation: i.activation,
      placementMargins: i.placementMargins,
      hoveredPlacement: void 0
    }));
  }), 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,
    isAllowed: c,
    isDragOver: u
  };
}
const rn = (e, t) => {
  const n = se(), s = b(() => e.value === n.entities.selectingArea);
  let i = null;
  X(() => {
    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"
      },
      events: t?.events,
      disabled: t?.disabled ?? !1,
      groups: t?.groups ?? []
    }));
  }), 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 a = n.pointer.value;
    return !a || n.state.value !== "selecting" || !i || !s.value ? {} : Dt(a.start, a.current, i);
  });
  return {
    isSelecting: s,
    style: o
  };
};
function ln(e, t) {
  const n = Pe(xe);
  if (!n) throw Error("DnD provider not found");
  let s = null;
  return X(() => {
    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 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;
  }), g = b(() => {
    const c = D(e);
    if (c)
      return s.entities.droppableMap.get(c)?.hoveredPlacement;
  });
  return X(() => {
    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: a,
      data: o.data,
      hoveredPlacement: void 0
    }));
  }), 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 = V(!1), o = Ue(
    e,
    t ?? {},
    () => {
      if (n.state.value !== "dragging") return 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,
    (a) => {
      a === "dragging" ? o.run() : o.stop();
    }
  ), { isScrolling: s };
};
export {
  an as DnDProvider,
  nn as DragPreview,
  gn as makeAutoScroll,
  ln as makeConstraintArea,
  on as makeDraggable,
  cn as makeDroppable,
  rn as makeSelectionArea,
  qe as useDnDProvider
};