@eightshift/ui-components 1.9.0 → 2.0.0

package/dist/components/draggable/draggable.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useEffect, useLayoutEffect, useState, createContext, startTransition, useTransition, useContext, useCallback, useId } from "react";
+import { useRef, useEffect, useLayoutEffect, useMemo, useState, createContext, startTransition, useTransition, useContext, useCallback, useId } from "react";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { DraggableContext } from "./draggable-context.js";
-import { r as reactDomExports } from "../../index-BYHhzLf-.js";
+import { r as reactDomExports } from "../../index-BRp93Yfa.js";
 var i = Symbol.for("preact-signals");
 function t() {
   if (!(s > 1)) {
@@ -362,6 +362,9 @@ function deepEqual(a2, b2) {
   if (a2 === b2) {
     return true;
   }
+  if (typeof a2 === "function" && typeof b2 === "function") {
+    return a2 === b2;
+  }
   if (a2 instanceof Set && b2 instanceof Set) {
     if (a2.size !== b2.size) {
       return false;
@@ -428,7 +431,7 @@ var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
 var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
 var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
 var __knownSymbol$3 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$3 = (msg) => {
+var __typeError$4 = (msg) => {
   throw TypeError(msg);
 };
 var __pow = Math.pow;
@@ -444,14 +447,14 @@ var __spreadValues$6 = (a2, b2) => {
     }
   return a2;
 };
-var __name$1 = (target, value) => __defProp$6(target, "name", { value, configurable: true });
+var __name$2 = (target, value) => __defProp$6(target, "name", { value, configurable: true });
 var __decoratorStart$3 = (base) => {
   var _a3;
   return [, , , __create$3((_a3 = void 0) != null ? _a3 : null)];
 };
 var __decoratorStrings$3 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$3 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$3("Function expected") : fn;
-var __decoratorContext$3 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$3[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$3("Already initialized") : fns.push(__expectFn$3(fn || null)) });
+var __expectFn$3 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$4("Function expected") : fn;
+var __decoratorContext$3 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$3[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$4("Already initialized") : fns.push(__expectFn$3(fn || null)) });
 var __decoratorMetadata$3 = (array, target) => __defNormalProp$6(target, __knownSymbol$3("metadata"), array[3]);
 var __runInitializers$3 = (array, flags, self, value) => {
   for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
@@ -462,31 +465,31 @@ var __decorateElement$3 = (array, flags, name, decorators, target, extra) => {
   var j = k > 3 ? array.length + 1 : k ? s2 ? 1 : 2 : 0, key = __decoratorStrings$3[k + 5];
   var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
   var desc = k && (!p2 && !s2 && (target = target.prototype), k < 5 && (k > 3 || !p2) && __getOwnPropDesc$3(k < 4 ? target : { get [name]() {
-    return __privateGet$3(this, extra);
+    return __privateGet$4(this, extra);
   }, set [name](x) {
-    return __privateSet$3(this, extra, x);
+    return __privateSet$4(this, extra, x);
   } }, name));
-  k ? p2 && k < 4 && __name$1(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$1(target, name);
+  k ? p2 && k < 4 && __name$2(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$2(target, name);
   for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
     ctx = __decoratorContext$3(k, name, done = {}, array[3], extraInitializers);
     if (k) {
-      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn$1(target, x) : (x) => name in x };
-      if (k ^ 3) access.get = p2 ? (x) => (k ^ 1 ? __privateGet$3 : __privateMethod$1)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
-      if (k > 2) access.set = p2 ? (x, y2) => __privateSet$3(x, target, y2, k ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
+      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn$2(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p2 ? (x) => (k ^ 1 ? __privateGet$4 : __privateMethod$3)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p2 ? (x, y2) => __privateSet$4(x, target, y2, k ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
     }
     it = (0, decorators[i2])(k ? k < 4 ? p2 ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
     if (k ^ 4 || it === void 0) __expectFn$3(it) && (k > 4 ? initializers.unshift(it) : k ? p2 ? extra = it : desc[key] = it : target = it);
-    else if (typeof it !== "object" || it === null) __typeError$3("Object expected");
+    else if (typeof it !== "object" || it === null) __typeError$4("Object expected");
     else __expectFn$3(fn = it.get) && (desc.get = fn), __expectFn$3(fn = it.set) && (desc.set = fn), __expectFn$3(fn = it.init) && initializers.unshift(fn);
   }
   return k || __decoratorMetadata$3(array, target), desc && __defProp$6(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
 };
-var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-var __privateIn$1 = (member, obj) => Object(obj) !== obj ? __typeError$3('Cannot use the "in" operator on this value') : member.has(obj);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod$1 = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
+var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
+var __privateIn$2 = (member, obj) => Object(obj) !== obj ? __typeError$4('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$3 = (obj, member, method) => (__accessCheck$4(obj, member, "access private method"), method);
 var Point = class _Point {
   /**
    * @param {number} Coordinate of the point on the horizontal axis
@@ -593,6 +596,12 @@ var Rectangle = class _Rectangle {
     const { left, width } = this;
     return left + width;
   }
+  static from({ top, left, width, height }) {
+    return new _Rectangle(left, top, width, height);
+  }
+  static intersectionRatio(a2, b2) {
+    return _Rectangle.from(a2).intersectionRatio(_Rectangle.from(b2));
+  }
 };
 function rectangleRectangleIntersection(a2, b2) {
   const top = Math.max(b2.top, a2.top);
@@ -608,14 +617,19 @@ function rectangleRectangleIntersection(a2, b2) {
   return 0;
 }
 var SENSITIVITY = 10;
-var _direction_dec, _delta_dec, _current_dec, _previous_dec, _initial_dec, _init$3, _initial, _previous, _current;
-_initial_dec = [reactive], _previous_dec = [reactive], _current_dec = [reactive], _delta_dec = [derived], _direction_dec = [derived];
+var _direction_dec, _delta_dec, _current_dec, _previous_dec, _initial_dec, _velocity_dec, _timestamp, _init$3, _velocity, _initial, _previous, _current;
+_velocity_dec = [reactive], _initial_dec = [reactive], _previous_dec = [reactive], _current_dec = [reactive], _delta_dec = [derived], _direction_dec = [derived];
 var Position = class {
   constructor(initialValue) {
     __runInitializers$3(_init$3, 5, this);
-    __privateAdd$3(this, _initial, __runInitializers$3(_init$3, 8, this)), __runInitializers$3(_init$3, 11, this);
-    __privateAdd$3(this, _previous, __runInitializers$3(_init$3, 12, this)), __runInitializers$3(_init$3, 15, this);
-    __privateAdd$3(this, _current, __runInitializers$3(_init$3, 16, this)), __runInitializers$3(_init$3, 19, this);
+    __privateAdd$4(this, _timestamp, 0);
+    __privateAdd$4(this, _velocity, __runInitializers$3(_init$3, 8, this, {
+      x: 0,
+      y: 0
+    })), __runInitializers$3(_init$3, 11, this);
+    __privateAdd$4(this, _initial, __runInitializers$3(_init$3, 12, this)), __runInitializers$3(_init$3, 15, this);
+    __privateAdd$4(this, _previous, __runInitializers$3(_init$3, 16, this)), __runInitializers$3(_init$3, 19, this);
+    __privateAdd$4(this, _current, __runInitializers$3(_init$3, 20, this)), __runInitializers$3(_init$3, 23, this);
     const point = Point.from(initialValue);
     this.initial = point;
     this.current = point;
@@ -640,6 +654,8 @@ var Position = class {
   reset(coordinates) {
     const point = Point.from(coordinates);
     r(() => {
+      __privateSet$4(this, _timestamp, 0);
+      this.velocity = { x: 0, y: 0 };
       this.current = point;
       this.previous = point;
       this.initial = point;
@@ -655,16 +671,27 @@ var Position = class {
       x: point.x - current.x,
       y: point.y - current.y
     };
+    const timestamp = Date.now();
+    const timeDelta = timestamp - __privateGet$4(this, _timestamp);
+    const velocity = (delta2) => Math.round(delta2 / timeDelta * 100);
     if (Math.abs(delta.x) < SENSITIVITY || Math.abs(delta.y) < SENSITIVITY) {
       this.previous = current;
     }
+    __privateSet$4(this, _timestamp, timestamp);
+    this.velocity = {
+      x: velocity(delta.x),
+      y: velocity(delta.y)
+    };
     this.current = point;
   }
 };
 _init$3 = __decoratorStart$3();
+_timestamp = /* @__PURE__ */ new WeakMap();
+_velocity = /* @__PURE__ */ new WeakMap();
 _initial = /* @__PURE__ */ new WeakMap();
 _previous = /* @__PURE__ */ new WeakMap();
 _current = /* @__PURE__ */ new WeakMap();
+__decorateElement$3(_init$3, 4, "velocity", _velocity_dec, Position, _velocity);
 __decorateElement$3(_init$3, 4, "initial", _initial_dec, Position, _initial);
 __decorateElement$3(_init$3, 4, "previous", _previous_dec, Position, _previous);
 __decorateElement$3(_init$3, 4, "current", _current_dec, Position, _current);
@@ -703,7 +730,7 @@ var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
 var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
 var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
 var __knownSymbol$2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$2 = (msg) => {
+var __typeError$3 = (msg) => {
   throw TypeError(msg);
 };
 var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -719,7 +746,7 @@ var __spreadValues$5 = (a2, b2) => {
   return a2;
 };
 var __spreadProps$5 = (a2, b2) => __defProps$5(a2, __getOwnPropDescs$5(b2));
-var __name = (target, value) => __defProp$5(target, "name", { value, configurable: true });
+var __name$1 = (target, value) => __defProp$5(target, "name", { value, configurable: true });
 var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -737,8 +764,8 @@ var __decoratorStart$2 = (base) => {
   return [, , , __create$2((_a3 = base == null ? void 0 : base[__knownSymbol$2("metadata")]) != null ? _a3 : null)];
 };
 var __decoratorStrings$2 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$2("Function expected") : fn;
-var __decoratorContext$2 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$2[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$2("Already initialized") : fns.push(__expectFn$2(fn || null)) });
+var __expectFn$2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$3("Function expected") : fn;
+var __decoratorContext$2 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$2[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$3("Already initialized") : fns.push(__expectFn$2(fn || null)) });
 var __decoratorMetadata$2 = (array, target) => __defNormalProp$5(target, __knownSymbol$2("metadata"), array[3]);
 var __runInitializers$2 = (array, flags, self, value) => {
   for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
@@ -749,31 +776,31 @@ var __decorateElement$2 = (array, flags, name, decorators, target, extra) => {
   var j = k > 3 ? array.length + 1 : k ? s2 ? 1 : 2 : 0, key = __decoratorStrings$2[k + 5];
   var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
   var desc = k && (!p2 && !s2 && (target = target.prototype), k < 5 && (k > 3 || !p2) && __getOwnPropDesc$2(k < 4 ? target : { get [name]() {
-    return __privateGet$2(this, extra);
+    return __privateGet$3(this, extra);
   }, set [name](x) {
-    return __privateSet$2(this, extra, x);
+    return __privateSet$3(this, extra, x);
   } }, name));
-  k ? p2 && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  k ? p2 && k < 4 && __name$1(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$1(target, name);
   for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
     ctx = __decoratorContext$2(k, name, done = {}, array[3], extraInitializers);
     if (k) {
-      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn(target, x) : (x) => name in x };
-      if (k ^ 3) access.get = p2 ? (x) => (k ^ 1 ? __privateGet$2 : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
-      if (k > 2) access.set = p2 ? (x, y2) => __privateSet$2(x, target, y2, k ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
+      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn$1(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p2 ? (x) => (k ^ 1 ? __privateGet$3 : __privateMethod$2)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p2 ? (x, y2) => __privateSet$3(x, target, y2, k ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
     }
     it = (0, decorators[i2])(k ? k < 4 ? p2 ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
     if (k ^ 4 || it === void 0) __expectFn$2(it) && (k > 4 ? initializers.unshift(it) : k ? p2 ? extra = it : desc[key] = it : target = it);
-    else if (typeof it !== "object" || it === null) __typeError$2("Object expected");
+    else if (typeof it !== "object" || it === null) __typeError$3("Object expected");
     else __expectFn$2(fn = it.get) && (desc.get = fn), __expectFn$2(fn = it.set) && (desc.set = fn), __expectFn$2(fn = it.init) && initializers.unshift(fn);
   }
   return k || __decoratorMetadata$2(array, target), desc && __defProp$5(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
 };
-var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
-var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError$2('Cannot use the "in" operator on this value') : member.has(obj);
-var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck$2(obj, member, "access private method"), method);
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
+var __privateIn$1 = (member, obj) => Object(obj) !== obj ? __typeError$3('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$2 = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
 function configure(plugin, options) {
   return {
     plugin,
@@ -800,7 +827,7 @@ var Plugin = class {
   constructor(manager, options) {
     this.manager = manager;
     this.options = options;
-    __privateAdd$2(this, _disabled, __runInitializers$2(_init$2, 8, this, false)), __runInitializers$2(_init$2, 11, this);
+    __privateAdd$3(this, _disabled, __runInitializers$2(_init$2, 8, this, false)), __runInitializers$2(_init$2, 11, this);
   }
   /**
    * Enable a disabled plugin instance.
@@ -856,15 +883,20 @@ var PluginRegistry = class {
   constructor(manager) {
     this.manager = manager;
     this.instances = /* @__PURE__ */ new Map();
-    __privateAdd$2(this, _previousValues, []);
+    __privateAdd$3(this, _previousValues, []);
   }
   get values() {
     return Array.from(this.instances.values());
   }
   set values(entries) {
-    const descriptors = entries.map(descriptor);
+    const descriptors = entries.map(descriptor).reduceRight((acc, descriptor2) => {
+      if (acc.some(({ plugin }) => plugin === descriptor2.plugin)) {
+        return acc;
+      }
+      return [descriptor2, ...acc];
+    }, []);
     const constructors = descriptors.map(({ plugin }) => plugin);
-    for (const plugin of __privateGet$2(this, _previousValues)) {
+    for (const plugin of __privateGet$3(this, _previousValues)) {
       if (!constructors.includes(plugin)) {
         if (plugin.prototype instanceof CorePlugin) {
           continue;
@@ -875,7 +907,7 @@ var PluginRegistry = class {
     for (const { plugin, options } of descriptors) {
       this.register(plugin, options);
     }
-    __privateSet$2(this, _previousValues, constructors);
+    __privateSet$3(this, _previousValues, constructors);
   }
   get(plugin) {
     const instance = this.instances.get(plugin);
@@ -907,40 +939,50 @@ var PluginRegistry = class {
 _previousValues = /* @__PURE__ */ new WeakMap();
 function sortCollisions(a2, b2) {
   if (a2.priority === b2.priority) {
-    return b2.value - a2.value;
+    if (a2.type === b2.type) {
+      return b2.value - a2.value;
+    }
+    return b2.type - a2.type;
   }
   return b2.priority - a2.priority;
 }
 var DEFAULT_VALUE = [];
-var _collisions;
+var _previousCoordinates, _collisions;
 var CollisionObserver = class extends Plugin {
   constructor(manager) {
     super(manager);
-    this.forceUpdateCount = d(0);
-    __privateAdd$2(this, _collisions);
+    __privateAdd$3(this, _previousCoordinates);
+    __privateAdd$3(this, _collisions);
     this.computeCollisions = this.computeCollisions.bind(this);
-    __privateSet$2(this, _collisions, computed(this.computeCollisions, deepEqual));
-    this.destroy = E(() => {
-      const { dragOperation } = this.manager;
-      if (dragOperation.status.initialized) {
-        this.forceUpdate();
+    __privateSet$3(this, _collisions, d(DEFAULT_VALUE));
+    this.destroy = effects(
+      () => {
+        const collisions = this.computeCollisions();
+        const coordinates = n(
+          () => this.manager.dragOperation.position.current
+        );
+        const previousCoordinates = __privateGet$3(this, _previousCoordinates);
+        __privateSet$3(this, _previousCoordinates, coordinates);
+        if (previousCoordinates && coordinates.x == previousCoordinates.x && coordinates.y == previousCoordinates.y) {
+          return;
+        }
+        __privateGet$3(this, _collisions).value = collisions;
+      },
+      () => {
+        const { dragOperation } = this.manager;
+        if (dragOperation.status.initialized) {
+          this.forceUpdate();
+        }
       }
-    });
+    );
   }
-  forceUpdate(refresh = true) {
+  forceUpdate(immediate = true) {
     n(() => {
-      const { source } = this.manager.dragOperation;
-      r(() => {
-        if (refresh) {
-          for (const droppable of this.manager.registry.droppables) {
-            if (source && !droppable.accepts(source)) {
-              continue;
-            }
-            droppable.refreshShape();
-          }
-        }
-        this.forceUpdateCount.value++;
-      });
+      if (immediate) {
+        __privateGet$3(this, _collisions).value = this.computeCollisions();
+      } else {
+        __privateSet$3(this, _previousCoordinates, void 0);
+      }
     });
   }
   computeCollisions(entries, collisionDetector) {
@@ -950,7 +992,6 @@ var CollisionObserver = class extends Plugin {
       return DEFAULT_VALUE;
     }
     const collisions = [];
-    this.forceUpdateCount.value;
     for (const entry of entries != null ? entries : registry.droppables) {
       if (entry.disabled) {
         continue;
@@ -962,6 +1003,7 @@ var CollisionObserver = class extends Plugin {
       if (!detectCollision) {
         continue;
       }
+      entry.shape;
       const collision = n(
         () => detectCollision({
           droppable: entry,
@@ -979,9 +1021,10 @@ var CollisionObserver = class extends Plugin {
     return collisions;
   }
   get collisions() {
-    return __privateGet$2(this, _collisions).value;
+    return __privateGet$3(this, _collisions).value;
   }
 };
+_previousCoordinates = /* @__PURE__ */ new WeakMap();
 _collisions = /* @__PURE__ */ new WeakMap();
 var Monitor = class {
   constructor() {
@@ -1039,30 +1082,46 @@ function defaultPreventable(event, cancelable = true) {
 var CollisionNotifier = class extends CorePlugin {
   constructor(manager) {
     super(manager);
-    this.destroy = E(() => {
-      const { collisionObserver, monitor } = manager;
-      const { collisions } = collisionObserver;
-      if (collisionObserver.isDisabled()) {
-        return;
-      }
-      const event = defaultPreventable({
-        collisions
-      });
-      monitor.dispatch("collision", event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      const [firstCollision] = collisions;
-      n(() => {
-        var _a3;
-        if ((firstCollision == null ? void 0 : firstCollision.id) !== ((_a3 = manager.dragOperation.target) == null ? void 0 : _a3.id)) {
-          collisionObserver.disable();
-          manager.actions.setDropTarget(firstCollision == null ? void 0 : firstCollision.id).then(() => {
-            collisionObserver.enable();
-          });
+    const isEqual = (a2, b2) => a2.map(({ id }) => id).join("") === b2.map(({ id }) => id).join("");
+    let previousCollisions = [];
+    this.destroy = effects(
+      () => {
+        const { dragOperation, collisionObserver } = manager;
+        if (dragOperation.status.initializing) {
+          previousCollisions = [];
+          collisionObserver.enable();
         }
-      });
-    });
+      },
+      () => {
+        const { collisionObserver, monitor } = manager;
+        const { collisions } = collisionObserver;
+        if (collisionObserver.isDisabled()) {
+          return;
+        }
+        const event = defaultPreventable({
+          collisions
+        });
+        monitor.dispatch("collision", event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (isEqual(collisions, previousCollisions)) {
+          return;
+        } else {
+          previousCollisions = collisions;
+        }
+        const [firstCollision] = collisions;
+        n(() => {
+          var _a3;
+          if ((firstCollision == null ? void 0 : firstCollision.id) !== ((_a3 = manager.dragOperation.target) == null ? void 0 : _a3.id)) {
+            collisionObserver.disable();
+            manager.actions.setDropTarget(firstCollision == null ? void 0 : firstCollision.id).then(() => {
+              collisionObserver.enable();
+            });
+          }
+        });
+      }
+    );
   }
 };
 var CollisionPriority = /* @__PURE__ */ ((CollisionPriority2) => {
@@ -1073,6 +1132,12 @@ var CollisionPriority = /* @__PURE__ */ ((CollisionPriority2) => {
   CollisionPriority2[CollisionPriority2["Highest"] = 4] = "Highest";
   return CollisionPriority2;
 })(CollisionPriority || {});
+var CollisionType = /* @__PURE__ */ ((CollisionType2) => {
+  CollisionType2[CollisionType2["Collision"] = 0] = "Collision";
+  CollisionType2[CollisionType2["ShapeIntersection"] = 1] = "ShapeIntersection";
+  CollisionType2[CollisionType2["PointerIntersection"] = 2] = "PointerIntersection";
+  return CollisionType2;
+})(CollisionType || {});
 var _disabled_dec2, _data_dec, _id_dec, _manager_dec, _init2$1, _manager, _id, _data, _disabled2;
 _manager_dec = [reactive], _id_dec = [reactive], _data_dec = [reactive], _disabled_dec2 = [reactive];
 var Entity = class {
@@ -1083,11 +1148,11 @@ var Entity = class {
    * @param manager - The manager that controls the drag and drop operations.
    */
   constructor(input, manager) {
-    __privateAdd$2(this, _manager, __runInitializers$2(_init2$1, 8, this)), __runInitializers$2(_init2$1, 11, this);
-    __privateAdd$2(this, _id, __runInitializers$2(_init2$1, 12, this)), __runInitializers$2(_init2$1, 15, this);
-    __privateAdd$2(this, _data, __runInitializers$2(_init2$1, 16, this)), __runInitializers$2(_init2$1, 19, this);
-    __privateAdd$2(this, _disabled2, __runInitializers$2(_init2$1, 20, this)), __runInitializers$2(_init2$1, 23, this);
-    const { effects: effects3, id, data = {}, disabled = false } = input;
+    __privateAdd$3(this, _manager, __runInitializers$2(_init2$1, 8, this)), __runInitializers$2(_init2$1, 11, this);
+    __privateAdd$3(this, _id, __runInitializers$2(_init2$1, 12, this)), __runInitializers$2(_init2$1, 15, this);
+    __privateAdd$3(this, _data, __runInitializers$2(_init2$1, 16, this)), __runInitializers$2(_init2$1, 19, this);
+    __privateAdd$3(this, _disabled2, __runInitializers$2(_init2$1, 20, this)), __runInitializers$2(_init2$1, 23, this);
+    const { effects: effects5, id, data = {}, disabled = false } = input;
     let previousId = id;
     this.manager = manager;
     this.id = id;
@@ -1097,21 +1162,23 @@ var Entity = class {
       var _a3;
       return [
         () => {
-          const { id: _2, manager: manager2 } = this;
-          if (id === previousId) {
+          const { id: id2, manager: manager2 } = this;
+          if (id2 === previousId) {
             return;
           }
           manager2 == null ? void 0 : manager2.registry.register(this);
           return () => manager2 == null ? void 0 : manager2.registry.unregister(this);
         },
-        ...(_a3 = effects3 == null ? void 0 : effects3()) != null ? _a3 : []
+        ...(_a3 = effects5 == null ? void 0 : effects5()) != null ? _a3 : []
       ];
     };
+    this.register = this.register.bind(this);
+    this.unregister = this.unregister.bind(this);
     this.destroy = this.destroy.bind(this);
     if (manager) {
       queueMicrotask(() => {
         var _a3;
-        (_a3 = this.manager) == null ? void 0 : _a3.registry.register(this);
+        return (_a3 = this.manager) == null ? void 0 : _a3.registry.register(this);
       });
     }
   }
@@ -1156,15 +1223,20 @@ var EntityRegistry = class {
     this.cleanupFunctions = /* @__PURE__ */ new WeakMap();
     this.register = (key, value) => {
       const current = this.map.peek();
-      if (current.get(key) === value) {
-        return;
+      const currentValue2 = current.get(key);
+      const unregister = () => this.unregister(key, value);
+      if (currentValue2 === value) return unregister;
+      if (currentValue2) {
+        const cleanup2 = this.cleanupFunctions.get(currentValue2);
+        cleanup2 == null ? void 0 : cleanup2();
+        this.cleanupFunctions.delete(currentValue2);
       }
       const updatedMap = new Map(current);
       updatedMap.set(key, value);
       this.map.value = updatedMap;
       const cleanup = effects(...value.effects());
       this.cleanupFunctions.set(value, cleanup);
-      return () => this.unregister(key, value);
+      return unregister;
     };
     this.unregister = (key, value) => {
       const current = this.map.peek();
@@ -1223,9 +1295,9 @@ var Draggable$2 = class Draggable extends (_c$1 = Entity, _modifiers_dec = [reac
     var _b2 = _a3, { modifiers, type, sensors } = _b2, input = __objRest$3(_b2, ["modifiers", "type", "sensors"]);
     super(input, manager);
     __runInitializers$2(_init3$1, 5, this);
-    __privateAdd$2(this, _modifiers, __runInitializers$2(_init3$1, 8, this)), __runInitializers$2(_init3$1, 11, this);
-    __privateAdd$2(this, _type, __runInitializers$2(_init3$1, 12, this)), __runInitializers$2(_init3$1, 15, this);
-    __privateAdd$2(this, _status, __runInitializers$2(_init3$1, 16, this, "idle")), __runInitializers$2(_init3$1, 19, this);
+    __privateAdd$3(this, _modifiers, __runInitializers$2(_init3$1, 8, this)), __runInitializers$2(_init3$1, 11, this);
+    __privateAdd$3(this, _type, __runInitializers$2(_init3$1, 12, this)), __runInitializers$2(_init3$1, 15, this);
+    __privateAdd$3(this, _status, __runInitializers$2(_init3$1, 16, this, "idle")), __runInitializers$2(_init3$1, 19, this);
     this.type = type;
     this.sensors = sensors;
     this.modifiers = modifiers;
@@ -1247,24 +1319,14 @@ __decoratorMetadata$2(_init3$1, Draggable$2);
 var _isDropTarget_dec, _shape_dec, _collisionPriority_dec, _collisionDetector_dec, _type_dec2, _accept_dec, _c2$1, _init4$1, _accept, _type2, _collisionDetector, _collisionPriority, _shape;
 var Droppable$1 = class Droppable extends (_c2$1 = Entity, _accept_dec = [reactive], _type_dec2 = [reactive], _collisionDetector_dec = [reactive], _collisionPriority_dec = [reactive], _shape_dec = [reactive], _isDropTarget_dec = [derived], _c2$1) {
   constructor(_a3, manager) {
-    var _b2 = _a3, {
-      accept,
-      collisionDetector,
-      collisionPriority = 2,
-      type
-    } = _b2, input = __objRest$3(_b2, [
-      "accept",
-      "collisionDetector",
-      "collisionPriority",
-      "type"
-    ]);
+    var _b2 = _a3, { accept, collisionDetector, collisionPriority, type } = _b2, input = __objRest$3(_b2, ["accept", "collisionDetector", "collisionPriority", "type"]);
     super(input, manager);
     __runInitializers$2(_init4$1, 5, this);
-    __privateAdd$2(this, _accept, __runInitializers$2(_init4$1, 8, this)), __runInitializers$2(_init4$1, 11, this);
-    __privateAdd$2(this, _type2, __runInitializers$2(_init4$1, 12, this)), __runInitializers$2(_init4$1, 15, this);
-    __privateAdd$2(this, _collisionDetector, __runInitializers$2(_init4$1, 16, this)), __runInitializers$2(_init4$1, 19, this);
-    __privateAdd$2(this, _collisionPriority, __runInitializers$2(_init4$1, 20, this)), __runInitializers$2(_init4$1, 23, this);
-    __privateAdd$2(this, _shape, __runInitializers$2(_init4$1, 24, this)), __runInitializers$2(_init4$1, 27, this);
+    __privateAdd$3(this, _accept, __runInitializers$2(_init4$1, 8, this)), __runInitializers$2(_init4$1, 11, this);
+    __privateAdd$3(this, _type2, __runInitializers$2(_init4$1, 12, this)), __runInitializers$2(_init4$1, 15, this);
+    __privateAdd$3(this, _collisionDetector, __runInitializers$2(_init4$1, 16, this)), __runInitializers$2(_init4$1, 19, this);
+    __privateAdd$3(this, _collisionPriority, __runInitializers$2(_init4$1, 20, this)), __runInitializers$2(_init4$1, 23, this);
+    __privateAdd$3(this, _shape, __runInitializers$2(_init4$1, 24, this)), __runInitializers$2(_init4$1, 27, this);
     this.accept = accept;
     this.collisionDetector = collisionDetector;
     this.collisionPriority = collisionPriority;
@@ -1281,23 +1343,21 @@ var Droppable$1 = class Droppable extends (_c2$1 = Entity, _accept_dec = [reacti
     if (!accept) {
       return true;
     }
+    if (typeof accept === "function") {
+      return accept(draggable);
+    }
     if (!draggable.type) {
       return false;
     }
     if (Array.isArray(accept)) {
       return accept.includes(draggable.type);
     }
-    if (typeof accept === "function") {
-      return accept(draggable);
-    }
     return draggable.type === accept;
   }
   get isDropTarget() {
     var _a3, _b2;
     return ((_b2 = (_a3 = this.manager) == null ? void 0 : _a3.dragOperation.target) == null ? void 0 : _b2.id) === this.id;
   }
-  refreshShape() {
-  }
 };
 _init4$1 = __decoratorStart$2(_c2$1);
 _accept = /* @__PURE__ */ new WeakMap();
@@ -1556,18 +1616,16 @@ function DragOperationManager(manager) {
       setDropTarget(identifier) {
         const id = identifier != null ? identifier : null;
         if (targetIdentifier.peek() === id) {
-          return Promise.resolve();
+          return Promise.resolve(false);
         }
         targetIdentifier.value = id;
+        const event = defaultPreventable({
+          operation: snapshot(operation)
+        });
         if (status.peek() === "dragging") {
-          monitor.dispatch(
-            "dragover",
-            defaultPreventable({
-              operation: snapshot(operation)
-            })
-          );
+          monitor.dispatch("dragover", event);
         }
-        return manager.renderer.rendering;
+        return manager.renderer.rendering.then(() => event.defaultPrevented);
       },
       start({ event, coordinates }) {
         const sourceInstance = source.peek();
@@ -1577,6 +1635,8 @@ function DragOperationManager(manager) {
           );
         }
         r(() => {
+          shape.initial.value = null;
+          shape.current.value = null;
           dragended.value = false;
           canceled.value = false;
           activatorEvent.value = event;
@@ -1721,7 +1781,10 @@ var DragDropManager$1 = class DragDropManager {
     this.collisionObserver.destroy();
   }
 };
-var pointerIntersection = ({ dragOperation, droppable }) => {
+var pointerIntersection = ({
+  dragOperation,
+  droppable
+}) => {
   const pointerCoordinates = dragOperation.position.current;
   if (!pointerCoordinates) {
     return null;
@@ -1735,6 +1798,7 @@ var pointerIntersection = ({ dragOperation, droppable }) => {
     return {
       id,
       value: 1 / distance,
+      type: CollisionType.PointerIntersection,
       priority: CollisionPriority.High
     };
   }
@@ -1744,18 +1808,20 @@ var shapeIntersection = ({
   dragOperation,
   droppable
 }) => {
-  if (!droppable.shape) {
+  const { shape } = dragOperation;
+  if (!droppable.shape || !(shape == null ? void 0 : shape.current)) {
     return null;
   }
-  const { shape } = dragOperation;
-  const intersectionArea = shape == null ? void 0 : shape.current.intersectionArea(droppable.shape);
+  const intersectionArea = shape.current.intersectionArea(droppable.shape);
   if (intersectionArea) {
     const { position } = dragOperation;
     const distance = Point.distance(droppable.shape.center, position.current);
-    const value = 1 / distance;
+    const intersectionRatio = intersectionArea / (shape.current.area + droppable.shape.area - intersectionArea);
+    const value = intersectionRatio / distance;
     return {
       id: droppable.id,
       value,
+      type: CollisionType.ShapeIntersection,
       priority: CollisionPriority.Normal
     };
   }
@@ -1765,24 +1831,57 @@ var defaultCollisionDetection = (args) => {
   var _a3;
   return (_a3 = pointerIntersection(args)) != null ? _a3 : shapeIntersection(args);
 };
-var closestCenter = (input) => {
-  var _a3;
+var closestCorners = (input) => {
   const { dragOperation, droppable } = input;
   const { shape, position } = dragOperation;
   if (!droppable.shape) {
     return null;
   }
-  const distance = Point.distance(
-    droppable.shape.center,
-    (_a3 = shape == null ? void 0 : shape.current.center) != null ? _a3 : position.current
+  const { left, top, right, bottom } = droppable.shape.boundingRectangle;
+  const corners = [
+    {
+      x: left,
+      y: top
+    },
+    {
+      x: right,
+      y: top
+    },
+    {
+      x: left,
+      y: bottom
+    },
+    {
+      x: right,
+      y: bottom
+    }
+  ];
+  const distance = corners.reduce(
+    (acc, corner) => {
+      var _a3;
+      return acc + Point.distance(
+        Point.from(corner),
+        (_a3 = shape == null ? void 0 : shape.current.center) != null ? _a3 : position.current
+      );
+    },
+    0
   );
-  const value = 1 / distance;
+  const value = distance / 4;
   return {
     id: droppable.id,
-    value,
-    priority: CollisionPriority.Low
+    value: 1 / value,
+    type: CollisionType.Collision,
+    priority: CollisionPriority.Normal
   };
 };
+var __typeError$2 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod$1 = (obj, member, method) => (__accessCheck$2(obj, member, "access private method"), method);
 function getBoundingRectangle(element) {
   const { width, height, top, left, bottom, right } = element.getBoundingClientRect();
   return { width, height, top, left, bottom, right };
@@ -1797,7 +1896,7 @@ function isNode(node) {
   return "nodeType" in node;
 }
 function getWindow(target) {
-  var _a3, _b2;
+  var _a3, _b2, _c3;
   if (!target) {
     return window;
   }
@@ -1807,16 +1906,17 @@ function getWindow(target) {
   if (!isNode(target)) {
     return window;
   }
-  return (_b2 = (_a3 = target.ownerDocument) == null ? void 0 : _a3.defaultView) != null ? _b2 : window;
+  if ("defaultView" in target) {
+    return (_a3 = target.defaultView) != null ? _a3 : window;
+  }
+  return (_c3 = (_b2 = target.ownerDocument) == null ? void 0 : _b2.defaultView) != null ? _c3 : window;
 }
 function isDocument(node) {
   const { Document } = getWindow(node);
   return node instanceof Document;
 }
 function isHTMLElement(node) {
-  if (isWindow(node)) {
-    return false;
-  }
+  if (!node || isWindow(node)) return false;
   return node instanceof getWindow(node).HTMLElement;
 }
 function getDocument(target) {
@@ -1850,7 +1950,245 @@ function getViewportBoundingRectangle(element) {
     height
   };
 }
+function timeout(callback, duration) {
+  const id = setTimeout(callback, duration);
+  return () => clearTimeout(id);
+}
+function throttle(func, limit) {
+  const time = () => performance.now();
+  let cancel;
+  let lastRan;
+  return function(...args) {
+    const context = this;
+    if (!lastRan) {
+      func.apply(context, args);
+      lastRan = time();
+    } else {
+      cancel == null ? void 0 : cancel();
+      cancel = timeout(
+        () => {
+          func.apply(context, args);
+          lastRan = time();
+        },
+        limit - (time() - lastRan)
+      );
+    }
+  };
+}
+function isRectEqual(a2, b2) {
+  if (a2 === b2) return true;
+  if (!a2 || !b2) return false;
+  return a2.top == b2.top && a2.left == b2.left && a2.right == b2.right && a2.bottom == b2.bottom;
+}
+function isOverflowVisible(element, style) {
+  if (element instanceof getWindow(element).HTMLDetailsElement && element.open === false) {
+    return false;
+  }
+  const { overflow, overflowX, overflowY } = getComputedStyle(element);
+  return overflow === "visible" && overflowX === "visible" && overflowY === "visible";
+}
+function getVisibleBoundingRectangle(element, boundingClientRect = element.getBoundingClientRect(), margin = 0) {
+  var _a3;
+  let rect = boundingClientRect;
+  const { ownerDocument } = element;
+  const ownerWindow = (_a3 = ownerDocument.defaultView) != null ? _a3 : window;
+  let ancestor = element.parentElement;
+  while (ancestor && ancestor !== ownerDocument.documentElement) {
+    if (!isOverflowVisible(ancestor)) {
+      const ancestorRect = ancestor.getBoundingClientRect();
+      const marginTop = margin * (ancestorRect.bottom - ancestorRect.top);
+      const marginRight = margin * (ancestorRect.right - ancestorRect.left);
+      const marginBottom = margin * (ancestorRect.bottom - ancestorRect.top);
+      const marginLeft = margin * (ancestorRect.right - ancestorRect.left);
+      rect = {
+        top: Math.max(rect.top, ancestorRect.top - marginTop),
+        right: Math.min(rect.right, ancestorRect.right + marginRight),
+        bottom: Math.min(rect.bottom, ancestorRect.bottom + marginBottom),
+        left: Math.max(rect.left, ancestorRect.left - marginLeft),
+        width: 0,
+        // Will be calculated next
+        height: 0
+        // Will be calculated next
+      };
+      rect.width = rect.right - rect.left;
+      rect.height = rect.bottom - rect.top;
+    }
+    ancestor = ancestor.parentElement;
+  }
+  const viewportWidth = ownerWindow.innerWidth;
+  const viewportHeight = ownerWindow.innerHeight;
+  const viewportMarginY = margin * viewportHeight;
+  const viewportMarginX = margin * viewportWidth;
+  rect = {
+    top: Math.max(rect.top, 0 - viewportMarginY),
+    right: Math.min(rect.right, viewportWidth + viewportMarginX),
+    bottom: Math.min(rect.bottom, viewportHeight + viewportMarginY),
+    left: Math.max(rect.left, 0 - viewportMarginX),
+    width: 0,
+    // Will be calculated next
+    height: 0
+    // Will be calculated next
+  };
+  rect.width = rect.right - rect.left;
+  rect.height = rect.bottom - rect.top;
+  if (rect.width < 0) {
+    rect.width = 0;
+  }
+  if (rect.height < 0) {
+    rect.height = 0;
+  }
+  return rect;
+}
+function isVisible(element, boundingClientRect = element.getBoundingClientRect()) {
+  const { width, height } = getVisibleBoundingRectangle(
+    element,
+    boundingClientRect
+  );
+  return width > 0 && height > 0;
+}
+var threshold = Array.from({ length: 100 }, (_2, index) => index / 100);
+var THROTTLE_INTERVAL = 75;
+var _callback, _visible, _previousBoundingClientRect, _resizeObserver, _positionObserver, _visibilityObserver, _debug, _disconnected, _observePosition, _PositionObserver_instances, notify_fn, updateDebug_fn;
+var PositionObserver = class {
+  constructor(element, callback, options = { debug: false }) {
+    this.element = element;
+    __privateAdd$2(this, _PositionObserver_instances);
+    __privateAdd$2(this, _callback);
+    __privateAdd$2(this, _visible, true);
+    __privateAdd$2(this, _previousBoundingClientRect);
+    __privateAdd$2(this, _resizeObserver);
+    __privateAdd$2(this, _positionObserver);
+    __privateAdd$2(this, _visibilityObserver);
+    __privateAdd$2(this, _debug);
+    __privateAdd$2(this, _disconnected, false);
+    __privateAdd$2(this, _observePosition, throttle(() => {
+      var _a3, _b2, _c3;
+      const { element: element2 } = this;
+      (_a3 = __privateGet$2(this, _positionObserver)) == null ? void 0 : _a3.disconnect();
+      if (__privateGet$2(this, _disconnected) || !__privateGet$2(this, _visible) || !element2.isConnected) {
+        return;
+      }
+      const root2 = (_b2 = element2.ownerDocument) != null ? _b2 : document;
+      const { innerHeight, innerWidth } = (_c3 = root2.defaultView) != null ? _c3 : window;
+      const clientRect = element2.getBoundingClientRect();
+      const visibleRect = getVisibleBoundingRectangle(element2, clientRect);
+      const { top, left, bottom, right } = visibleRect;
+      const insetTop = -Math.floor(top);
+      const insetLeft = -Math.floor(left);
+      const insetRight = -Math.floor(innerWidth - right);
+      const insetBottom = -Math.floor(innerHeight - bottom);
+      const rootMargin = `${insetTop}px ${insetRight}px ${insetBottom}px ${insetLeft}px`;
+      this.boundingClientRect = clientRect;
+      __privateSet$2(this, _positionObserver, new IntersectionObserver(
+        (entries) => {
+          const [entry] = entries;
+          const { intersectionRect } = entry;
+          const intersectionRatio = Rectangle.intersectionRatio(
+            intersectionRect,
+            visibleRect
+          );
+          if (intersectionRatio !== 1) {
+            __privateGet$2(this, _observePosition).call(this);
+          }
+        },
+        {
+          threshold,
+          rootMargin,
+          root: root2
+        }
+      ));
+      __privateGet$2(this, _positionObserver).observe(element2);
+      __privateMethod$1(this, _PositionObserver_instances, notify_fn).call(this);
+    }, THROTTLE_INTERVAL));
+    __privateSet$2(this, _callback, callback);
+    this.boundingClientRect = element.getBoundingClientRect();
+    __privateSet$2(this, _visible, isVisible(element, this.boundingClientRect));
+    const root = element.ownerDocument;
+    if (options == null ? void 0 : options.debug) {
+      __privateSet$2(this, _debug, document.createElement("div"));
+      __privateGet$2(this, _debug).style.background = "rgba(0,0,0,0.15)";
+      __privateGet$2(this, _debug).style.position = "fixed";
+      __privateGet$2(this, _debug).style.pointerEvents = "none";
+      root.body.appendChild(__privateGet$2(this, _debug));
+    }
+    __privateSet$2(this, _visibilityObserver, new IntersectionObserver(
+      (entries) => {
+        var _a3, _b2;
+        const entry = entries[entries.length - 1];
+        const { boundingClientRect, isIntersecting: visible } = entry;
+        const { width, height } = boundingClientRect;
+        const previousVisible = __privateGet$2(this, _visible);
+        __privateSet$2(this, _visible, visible);
+        if (!width && !height) return;
+        if (previousVisible && !visible) {
+          (_a3 = __privateGet$2(this, _positionObserver)) == null ? void 0 : _a3.disconnect();
+          __privateGet$2(this, _callback).call(this, null);
+          (_b2 = __privateGet$2(this, _resizeObserver)) == null ? void 0 : _b2.disconnect();
+          __privateSet$2(this, _resizeObserver, void 0);
+          if (__privateGet$2(this, _debug)) __privateGet$2(this, _debug).style.visibility = "hidden";
+        } else {
+          __privateGet$2(this, _observePosition).call(this);
+        }
+        if (visible && !__privateGet$2(this, _resizeObserver)) {
+          __privateSet$2(this, _resizeObserver, new ResizeObserver(__privateGet$2(this, _observePosition)));
+          __privateGet$2(this, _resizeObserver).observe(element);
+        }
+      },
+      {
+        threshold,
+        root
+      }
+    ));
+    if (__privateGet$2(this, _visible)) {
+      __privateGet$2(this, _callback).call(this, this.boundingClientRect);
+    }
+    __privateGet$2(this, _visibilityObserver).observe(element);
+  }
+  disconnect() {
+    var _a3, _b2, _c3;
+    __privateSet$2(this, _disconnected, true);
+    (_a3 = __privateGet$2(this, _resizeObserver)) == null ? void 0 : _a3.disconnect();
+    (_b2 = __privateGet$2(this, _positionObserver)) == null ? void 0 : _b2.disconnect();
+    __privateGet$2(this, _visibilityObserver).disconnect();
+    (_c3 = __privateGet$2(this, _debug)) == null ? void 0 : _c3.remove();
+  }
+};
+_callback = /* @__PURE__ */ new WeakMap();
+_visible = /* @__PURE__ */ new WeakMap();
+_previousBoundingClientRect = /* @__PURE__ */ new WeakMap();
+_resizeObserver = /* @__PURE__ */ new WeakMap();
+_positionObserver = /* @__PURE__ */ new WeakMap();
+_visibilityObserver = /* @__PURE__ */ new WeakMap();
+_debug = /* @__PURE__ */ new WeakMap();
+_disconnected = /* @__PURE__ */ new WeakMap();
+_observePosition = /* @__PURE__ */ new WeakMap();
+_PositionObserver_instances = /* @__PURE__ */ new WeakSet();
+notify_fn = function() {
+  if (__privateGet$2(this, _disconnected)) return;
+  __privateMethod$1(this, _PositionObserver_instances, updateDebug_fn).call(this);
+  if (isRectEqual(this.boundingClientRect, __privateGet$2(this, _previousBoundingClientRect)))
+    return;
+  __privateGet$2(this, _callback).call(this, this.boundingClientRect);
+  __privateSet$2(this, _previousBoundingClientRect, this.boundingClientRect);
+};
+updateDebug_fn = function() {
+  if (__privateGet$2(this, _debug)) {
+    const { top, left, width, height } = getVisibleBoundingRectangle(
+      this.element
+    );
+    __privateGet$2(this, _debug).style.overflow = "hidden";
+    __privateGet$2(this, _debug).style.visibility = "visible";
+    __privateGet$2(this, _debug).style.top = `${Math.floor(top)}px`;
+    __privateGet$2(this, _debug).style.left = `${Math.floor(left)}px`;
+    __privateGet$2(this, _debug).style.width = `${Math.floor(width)}px`;
+    __privateGet$2(this, _debug).style.height = `${Math.floor(height)}px`;
+  }
+};
+function isSafari() {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
 function cloneElement(element) {
+  const window2 = getWindow(element);
   const selector = "input, textarea, select, canvas, [contenteditable]";
   const clonedElement = element.cloneNode(true);
   const fields = Array.from(element.querySelectorAll(selector));
@@ -1865,7 +2203,7 @@ function cloneElement(element) {
         field.name = `Cloned__${field.name}`;
       }
     }
-    if (field instanceof HTMLCanvasElement && originalField instanceof HTMLCanvasElement && originalField.width > 0 && originalField.height > 0) {
+    if (field instanceof window2.HTMLCanvasElement && originalField instanceof window2.HTMLCanvasElement && originalField.width > 0 && originalField.height > 0) {
       const destCtx = field.getContext("2d");
       destCtx == null ? void 0 : destCtx.drawImage(originalField, 0, 0);
     }
@@ -1875,26 +2213,21 @@ function cloneElement(element) {
 function isField(element) {
   return "value" in element;
 }
-function supportsStyle(element) {
-  return "style" in element && element.style instanceof getWindow(element).CSSStyleDeclaration;
-}
-function createPlaceholder(element, clone = false, attributes) {
-  const placeholder = cloneElement(element);
-  if (supportsStyle(placeholder)) {
-    if (!clone) {
-      placeholder.style.setProperty("opacity", "0");
-    }
-  }
-  placeholder.setAttribute("inert", "true");
-  placeholder.setAttribute("tab-index", "-1");
-  placeholder.setAttribute("aria-hidden", "true");
-  if (attributes) {
-    for (const [key, value] of Object.entries(attributes)) {
-      placeholder.setAttribute(key, value);
+function getElementFromPoint(document2, { x, y: y2 }) {
+  const element = document2.elementFromPoint(x, y2);
+  if (element instanceof HTMLIFrameElement) {
+    const { contentDocument } = element;
+    if (contentDocument) {
+      const { left, top } = element.getBoundingClientRect();
+      return getElementFromPoint(contentDocument, {
+        x: x - left,
+        y: y2 - top
+      });
     }
   }
-  return placeholder;
+  return element;
 }
+var ProxiedElements = /* @__PURE__ */ new WeakMap();
 var Listeners = class {
   constructor() {
     this.entries = /* @__PURE__ */ new Set();
@@ -1938,10 +2271,11 @@ function isDocumentScrollingElement(element) {
   return element === getDocument(element).scrollingElement;
 }
 function getScrollPosition(scrollableElement) {
+  const window2 = getWindow(scrollableElement);
   const rect = isDocumentScrollingElement(scrollableElement) ? getViewportBoundingRectangle(scrollableElement) : getBoundingRectangle(scrollableElement);
   const dimensions = isDocumentScrollingElement(scrollableElement) ? {
-    height: window.innerHeight,
-    width: window.innerWidth
+    height: window2.innerHeight,
+    width: window2.innerWidth
   } : {
     height: scrollableElement.clientHeight,
     width: scrollableElement.clientWidth
@@ -1997,10 +2331,10 @@ function isFixed(node, computedStyle = getComputedStyles(node)) {
 function isScrollable(element, computedStyle = getComputedStyles(element)) {
   const overflowRegex = /(auto|scroll|overlay)/;
   const properties = ["overflow", "overflowX", "overflowY"];
-  return properties.find((property) => {
+  return properties.some((property) => {
     const value = computedStyle[property];
     return typeof value === "string" ? overflowRegex.test(value) : false;
-  }) != null;
+  });
 }
 var defaultOptions = {
   excludeElement: true
@@ -2049,6 +2383,51 @@ function getFirstScrollableAncestor(node) {
   const [firstScrollableAncestor] = getScrollableAncestors(node, { limit: 1 });
   return firstScrollableAncestor != null ? firstScrollableAncestor : null;
 }
+function getFrameElement(el) {
+  const refWindow = el == null ? void 0 : el.ownerDocument.defaultView;
+  if (refWindow && refWindow.self !== refWindow.parent) {
+    return refWindow.frameElement;
+  }
+  return null;
+}
+function getFrameTransform(el, boundary = window.frameElement) {
+  const transform = {
+    x: 0,
+    y: 0,
+    scaleX: 1,
+    scaleY: 1
+  };
+  if (!el) return transform;
+  let frame = getFrameElement(el);
+  while (frame) {
+    if (frame === boundary) {
+      return transform;
+    }
+    const rect = frame.getBoundingClientRect();
+    const { x: scaleX, y: scaleY } = getScale(frame, rect);
+    transform.x = transform.x + rect.left;
+    transform.y = transform.y + rect.top;
+    transform.scaleX = transform.scaleX * scaleX;
+    transform.scaleY = transform.scaleY * scaleY;
+    frame = getFrameElement(frame);
+  }
+  return transform;
+}
+function getScale(element, boundingRectangle = element.getBoundingClientRect()) {
+  const width = Math.round(boundingRectangle.width);
+  const height = Math.round(boundingRectangle.height);
+  if (isHTMLElement(element)) {
+    return {
+      x: width / element.offsetWidth,
+      y: height / element.offsetHeight
+    };
+  }
+  const styles = getComputedStyles(element);
+  return {
+    x: (parseFloat(styles.width) || width) / width,
+    y: (parseFloat(styles.height) || height) / height
+  };
+}
 var ScrollDirection = /* @__PURE__ */ ((ScrollDirection2) => {
   ScrollDirection2[ScrollDirection2["Idle"] = 0] = "Idle";
   ScrollDirection2[ScrollDirection2["Forward"] = 1] = "Forward";
@@ -2064,13 +2443,15 @@ var defaultTolerance = {
   y: 10
 };
 function detectScrollIntent(scrollableElement, coordinates, intent, acceleration = 25, thresholdPercentage = defaultThreshold, tolerance = defaultTolerance) {
-  const {
-    rect: scrollContainerRect,
-    isTop,
-    isBottom,
-    isLeft,
-    isRight
-  } = getScrollPosition(scrollableElement);
+  const { x, y: y2 } = coordinates;
+  const { rect, isTop, isBottom, isLeft, isRight } = getScrollPosition(scrollableElement);
+  const frameTransform = getFrameTransform(scrollableElement);
+  const scrollContainerRect = new Rectangle(
+    rect.left * frameTransform.scaleX + frameTransform.x,
+    rect.top * frameTransform.scaleY + frameTransform.y,
+    rect.width * frameTransform.scaleX,
+    rect.height * frameTransform.scaleY
+  );
   const direction = {
     x: 0,
     y: 0
@@ -2080,30 +2461,30 @@ function detectScrollIntent(scrollableElement, coordinates, intent, acceleration
     x: 0,
     y: 0
   };
-  const threshold = {
+  const threshold2 = {
     height: scrollContainerRect.height * thresholdPercentage.y,
     width: scrollContainerRect.width * thresholdPercentage.x
   };
-  if (!isTop && coordinates.y <= scrollContainerRect.top + threshold.height && (intent == null ? void 0 : intent.y) !== 1 && coordinates.x >= scrollContainerRect.left - tolerance.x && coordinates.x <= scrollContainerRect.right + tolerance.x) {
+  if (!isTop && y2 <= scrollContainerRect.top + threshold2.height && (intent == null ? void 0 : intent.y) !== 1 && x >= scrollContainerRect.left - tolerance.x && x <= scrollContainerRect.right + tolerance.x) {
     direction.y = -1;
     speed.y = acceleration * Math.abs(
-      (scrollContainerRect.top + threshold.height - coordinates.y) / threshold.height
+      (scrollContainerRect.top + threshold2.height - y2) / threshold2.height
     );
-  } else if (!isBottom && coordinates.y >= scrollContainerRect.bottom - threshold.height && (intent == null ? void 0 : intent.y) !== -1 && coordinates.x >= scrollContainerRect.left - tolerance.x && coordinates.x <= scrollContainerRect.right + tolerance.x) {
+  } else if (!isBottom && y2 >= scrollContainerRect.bottom - threshold2.height && (intent == null ? void 0 : intent.y) !== -1 && x >= scrollContainerRect.left - tolerance.x && x <= scrollContainerRect.right + tolerance.x) {
     direction.y = 1;
     speed.y = acceleration * Math.abs(
-      (scrollContainerRect.bottom - threshold.height - coordinates.y) / threshold.height
+      (scrollContainerRect.bottom - threshold2.height - y2) / threshold2.height
     );
   }
-  if (!isRight && coordinates.x >= scrollContainerRect.right - threshold.width && (intent == null ? void 0 : intent.x) !== -1 && coordinates.y >= scrollContainerRect.top - tolerance.y && coordinates.y <= scrollContainerRect.bottom + tolerance.y) {
+  if (!isRight && x >= scrollContainerRect.right - threshold2.width && (intent == null ? void 0 : intent.x) !== -1 && y2 >= scrollContainerRect.top - tolerance.y && y2 <= scrollContainerRect.bottom + tolerance.y) {
     direction.x = 1;
     speed.x = acceleration * Math.abs(
-      (scrollContainerRect.right - threshold.width - coordinates.x) / threshold.width
+      (scrollContainerRect.right - threshold2.width - x) / threshold2.width
     );
-  } else if (!isLeft && coordinates.x <= scrollContainerRect.left + threshold.width && (intent == null ? void 0 : intent.x) !== 1 && coordinates.y >= scrollContainerRect.top - tolerance.y && coordinates.y <= scrollContainerRect.bottom + tolerance.y) {
+  } else if (!isLeft && x <= scrollContainerRect.left + threshold2.width && (intent == null ? void 0 : intent.x) !== 1 && y2 >= scrollContainerRect.top - tolerance.y && y2 <= scrollContainerRect.bottom + tolerance.y) {
     direction.x = -1;
     speed.x = acceleration * Math.abs(
-      (scrollContainerRect.left + threshold.width - coordinates.x) / threshold.width
+      (scrollContainerRect.left + threshold2.width - x) / threshold2.width
     );
   }
   return {
@@ -2119,11 +2500,11 @@ function scrollIntoViewIfNeeded(el, centerIfNeeded = false) {
     el.scrollIntoViewIfNeeded(centerIfNeeded);
     return;
   }
-  if (!(el instanceof HTMLElement)) {
+  if (!isHTMLElement(el)) {
     return el.scrollIntoView();
   }
-  var [parent] = getScrollableAncestors(el, { limit: 1 });
-  if (!(parent instanceof HTMLElement)) {
+  var parent = getFirstScrollableAncestor(el);
+  if (!isHTMLElement(parent)) {
     return;
   }
   const parentComputedStyle = getComputedStyles(parent), parentBorderTopWidth = parseInt(
@@ -2176,6 +2557,9 @@ function inverseTransform(rect, parsedTransform, transformOrigin) {
     left: x
   };
 }
+function supportsStyle(element) {
+  return "style" in element && element.style instanceof getWindow(element).CSSStyleDeclaration;
+}
 var Styles = class {
   constructor(element) {
     this.element = element;
@@ -2241,18 +2625,6 @@ function animateTransform({
     styles.reset();
   });
 }
-function getFinalKeyframe(element) {
-  const animations = element.getAnimations();
-  if (animations.length > 0) {
-    const [animation] = animations;
-    const { effect } = animation;
-    const keyframes = effect instanceof KeyframeEffect ? effect.getKeyframes() : [];
-    if (keyframes.length > 0) {
-      return keyframes == null ? void 0 : keyframes[keyframes.length - 1];
-    }
-  }
-  return null;
-}
 function parseTranslate(translate) {
   if (translate === "none") {
     return null;
@@ -2268,18 +2640,37 @@ function parseTranslate(translate) {
     z: isNaN(output.z) ? 0 : output.z
   };
 }
-function computeTranslate(element) {
-  const keyframe = getFinalKeyframe(element);
-  if (keyframe) {
-    const { translate: translate2 = "" } = keyframe;
-    if (typeof translate2 === "string") {
-      const finalTranslate = parseTranslate(translate2);
-      if (finalTranslate) {
-        return finalTranslate;
+function getFinalKeyframe(element, match) {
+  const { KeyframeEffect: KeyframeEffect2 } = getWindow(element);
+  const animations = element.getAnimations();
+  if (animations.length > 0) {
+    for (const animation of animations) {
+      const { effect } = animation;
+      const keyframes = effect instanceof KeyframeEffect2 ? effect.getKeyframes() : [];
+      const matchedKeyframes = keyframes.filter(match);
+      if (matchedKeyframes.length > 0) {
+        return matchedKeyframes[matchedKeyframes.length - 1];
+      }
+    }
+  }
+  return null;
+}
+function computeTranslate(element, translate = getComputedStyles(element).translate, projected = true) {
+  if (projected) {
+    const keyframe = getFinalKeyframe(
+      element,
+      (keyframe2) => "translate" in keyframe2
+    );
+    if (keyframe) {
+      const { translate: translate2 = "" } = keyframe;
+      if (typeof translate2 === "string") {
+        const finalTranslate = parseTranslate(translate2);
+        if (finalTranslate) {
+          return finalTranslate;
+        }
       }
     }
   }
-  const { translate } = getComputedStyles(element);
   if (translate) {
     const finalTranslate = parseTranslate(translate);
     if (finalTranslate) {
@@ -2304,7 +2695,7 @@ function parseScale(scale) {
   };
 }
 function parseTransform(computedStyles) {
-  var _a3, _b2, _c3, _d, _e, _f, _g, _h, _i;
+  var _a3, _b2, _c3, _d2, _e, _f, _g, _h, _i;
   const { scale, transform, translate } = computedStyles;
   const parsedScale = parseScale(scale);
   const parsedTranslate = parseTranslate(translate);
@@ -2318,7 +2709,7 @@ function parseTransform(computedStyles) {
   };
   const normalizedTranslate = {
     x: (_c3 = parsedTranslate == null ? void 0 : parsedTranslate.x) != null ? _c3 : 0,
-    y: (_d = parsedTranslate == null ? void 0 : parsedTranslate.y) != null ? _d : 0
+    y: (_d2 = parsedTranslate == null ? void 0 : parsedTranslate.y) != null ? _d2 : 0
   };
   const normalizedMatrix = {
     x: (_e = parsedMatrix == null ? void 0 : parsedMatrix.x) != null ? _e : 0,
@@ -2355,19 +2746,27 @@ function parseTransformMatrix(transform) {
   return null;
 }
 var DOMRectangle = class extends Rectangle {
-  constructor(element, ignoreTransforms = false) {
+  constructor(element, options = {}) {
     var _a3, _b2;
-    let { top, left, right, bottom, width, height } = getBoundingRectangle(element);
+    const {
+      frameTransform = getFrameTransform(element),
+      ignoreTransforms,
+      getBoundingClientRect = getBoundingRectangle
+    } = options;
+    const resetAnimations = forceFinishAnimations(element);
+    const boundingRectangle = getBoundingClientRect(element);
+    let { top, left, width, height } = boundingRectangle;
     const computedStyles = getComputedStyles(element);
     const parsedTransform = parseTransform(computedStyles);
     const scale = {
       x: (_a3 = parsedTransform == null ? void 0 : parsedTransform.scaleX) != null ? _a3 : 1,
       y: (_b2 = parsedTransform == null ? void 0 : parsedTransform.scaleY) != null ? _b2 : 1
     };
+    resetAnimations == null ? void 0 : resetAnimations();
     const projectedTransform = getProjectedTransform(element);
     if (parsedTransform && (ignoreTransforms || projectedTransform)) {
       const updated = inverseTransform(
-        { top, left, right, bottom, width, height },
+        boundingRectangle,
         parsedTransform,
         computedStyles.transformOrigin
       );
@@ -2384,27 +2783,96 @@ var DOMRectangle = class extends Rectangle {
       scale.x = projectedTransform.scaleX;
       scale.y = projectedTransform.scaleY;
     }
+    if (frameTransform) {
+      if (!ignoreTransforms) {
+        left *= frameTransform.scaleX;
+        width *= frameTransform.scaleX;
+        top *= frameTransform.scaleY;
+        height *= frameTransform.scaleY;
+      }
+      left += frameTransform.x;
+      top += frameTransform.y;
+    }
     super(left, top, width, height);
     this.scale = scale;
   }
 };
 function getProjectedTransform(element) {
-  const keyframe = getFinalKeyframe(element);
-  if (keyframe) {
+  var _a3;
+  const { KeyframeEffect: KeyframeEffect2 } = getWindow(element);
+  const animations = element.getAnimations();
+  let projectedTransform = null;
+  if (!animations.length) return null;
+  for (const animation of animations) {
+    const keyframes = animation.effect instanceof KeyframeEffect2 ? animation.effect.getKeyframes() : [];
+    const keyframe = keyframes[keyframes.length - 1];
+    if (!keyframe) continue;
     const { transform = "", translate = "", scale = "" } = keyframe;
     if (transform || translate || scale) {
-      return parseTransform({
+      const parsedTransform = parseTransform({
         transform: typeof transform === "string" ? transform : "",
         translate: typeof translate === "string" ? translate : "",
         scale: typeof scale === "string" ? scale : ""
       });
+      if (parsedTransform) {
+        projectedTransform = projectedTransform ? {
+          x: projectedTransform.x + parsedTransform.x,
+          y: projectedTransform.y + parsedTransform.y,
+          z: (_a3 = projectedTransform.z) != null ? _a3 : parsedTransform.z,
+          scaleX: projectedTransform.scaleX * parsedTransform.scaleX,
+          scaleY: projectedTransform.scaleY * parsedTransform.scaleY
+        } : parsedTransform;
+      }
     }
   }
-  return null;
+  return projectedTransform;
+}
+function forceFinishAnimations(element) {
+  const { KeyframeEffect: KeyframeEffect2 } = getWindow(element);
+  const animations = element.ownerDocument.getAnimations().filter((animation) => {
+    if (animation.effect instanceof KeyframeEffect2) {
+      const { target } = animation.effect;
+      if (target !== element && (target == null ? void 0 : target.contains(element))) {
+        return animation.effect.getKeyframes().some((keyframe) => {
+          const { transform, translate, scale, width, height } = keyframe;
+          return transform || translate || scale || width || height;
+        });
+      }
+    }
+  }).map((animation) => {
+    const { effect, currentTime } = animation;
+    const duration = effect == null ? void 0 : effect.getComputedTiming().duration;
+    if (animation.pending) return;
+    if (typeof duration == "number" && typeof currentTime == "number" && currentTime < duration) {
+      animation.currentTime = duration;
+      return () => {
+        animation.currentTime = currentTime;
+      };
+    }
+  });
+  if (animations.length > 0) {
+    return () => animations.forEach((reset) => reset == null ? void 0 : reset());
+  }
+}
+function isElement(target) {
+  return target instanceof getWindow(target).Element;
 }
 function isKeyboardEvent(event) {
+  if (!event) return false;
+  const { KeyboardEvent } = getWindow(event.target);
   return event instanceof KeyboardEvent;
 }
+function isPointerEvent(event) {
+  if (!event) return false;
+  const { PointerEvent } = getWindow(event.target);
+  return event instanceof PointerEvent;
+}
+var ids = {};
+function generateUniqueId(prefix) {
+  const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
+  ids[prefix] = id;
+  return `${prefix}-${id}`;
+}
 var __create$1 = Object.create;
 var __defProp$4 = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
@@ -2430,6 +2898,7 @@ var __spreadValues$4 = (a2, b2) => {
   return a2;
 };
 var __spreadProps$4 = (a2, b2) => __defProps$4(a2, __getOwnPropDescs$4(b2));
+var __name = (target, value) => __defProp$4(target, "name", { value, configurable: true });
 var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2456,31 +2925,34 @@ var __runInitializers$1 = (array, flags, self, value) => {
 };
 var __decorateElement$1 = (array, flags, name, decorators, target, extra) => {
   var fn, it, done, ctx, access, k = flags & 7, s2 = !!(flags & 8), p2 = !!(flags & 16);
-  var j = array.length + 1, key = __decoratorStrings$1[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$1({ get [name]() {
+  var j = k > 3 ? array.length + 1 : k ? s2 ? 1 : 2 : 0, key = __decoratorStrings$1[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p2 && !s2 && (target = target.prototype), k < 5 && (k > 3 || !p2) && __getOwnPropDesc$1(k < 4 ? target : { get [name]() {
     return __privateGet$1(this, extra);
   }, set [name](x) {
     return __privateSet$1(this, extra, x);
   } }, name));
+  k ? p2 && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
   for (var i2 = decorators.length - 1; i2 >= 0; i2--) {
     ctx = __decoratorContext$1(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y2) => x[name] = y2;
+    if (k) {
+      ctx.static = s2, ctx.private = p2, access = ctx.access = { has: p2 ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p2 ? (x) => (k ^ 1 ? __privateGet$1 : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p2 ? (x, y2) => __privateSet$1(x, target, y2, k ^ 4 ? extra : desc.set) : (x, y2) => x[name] = y2;
     }
-    it = (0, decorators[i2])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$1(it) && (desc[key] = it);
+    it = (0, decorators[i2])(k ? k < 4 ? p2 ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn$1(it) && (k > 4 ? initializers.unshift(it) : k ? p2 ? extra = it : desc[key] = it : target = it);
     else if (typeof it !== "object" || it === null) __typeError$1("Object expected");
     else __expectFn$1(fn = it.get) && (desc.get = fn), __expectFn$1(fn = it.set) && (desc.set = fn), __expectFn$1(fn = it.init) && initializers.unshift(fn);
   }
-  return desc && __defProp$4(target, name, desc), target;
+  return k || __decoratorMetadata$1(array, target), desc && __defProp$4(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
 };
 var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), member.get(obj));
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError$1('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
 var defaultAttributes = {
   role: "button",
   roleDescription: "draggable",
@@ -2515,13 +2987,8 @@ var defaultAnnouncements = {
   }
 };
 function isFocusable(element) {
-  return element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLAnchorElement || element instanceof HTMLButtonElement || element instanceof HTMLAreaElement;
-}
-var ids = {};
-function generateUniqueId(prefix) {
-  const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
-  ids[prefix] = id;
-  return `${prefix}-${id}`;
+  const window2 = getWindow(element);
+  return element instanceof window2.HTMLInputElement || element instanceof window2.HTMLSelectElement || element instanceof window2.HTMLTextAreaElement || element instanceof window2.HTMLAnchorElement || element instanceof window2.HTMLButtonElement || element instanceof window2.HTMLAreaElement;
 }
 function createHiddenText(id, value) {
   const element = document.createElement("div");
@@ -2589,14 +3056,15 @@ var Accessibility = class extends Plugin {
       for (const draggable of manager.registry.draggables.value) {
         const { element, handle } = draggable;
         const activator = handle != null ? handle : element;
+        const window2 = getWindow(activator);
         if (activator) {
           if (!hiddenTextElement || !liveRegionElement) {
             initialize();
           }
-          if (!isFocusable(activator) && !activator.hasAttribute("tabindex")) {
+          if ((!isFocusable(activator) || isSafari()) && !activator.hasAttribute("tabindex")) {
             activator.setAttribute("tabindex", "0");
           }
-          if (!activator.hasAttribute("role") && !(activator instanceof HTMLButtonElement)) {
+          if (!activator.hasAttribute("role") && !(activator instanceof window2.HTMLButtonElement)) {
             activator.setAttribute("role", defaultAttributes.role);
           }
           if (!activator.hasAttribute("role-description")) {
@@ -2646,24 +3114,36 @@ var Cursor = class extends Plugin {
 var ATTR_PREFIX = "data-dnd-";
 var CSS_PREFIX = "--dnd-";
 var ATTRIBUTE = `${ATTR_PREFIX}dragging`;
-var cssRules = `[${ATTRIBUTE}] {position: fixed !important; pointer-events: none !important; touch-action: none !important; z-index: calc(infinity); will-change: transform;top: var(${CSS_PREFIX}top, 0px) !important;left: var(${CSS_PREFIX}left, 0px) !important;width: var(${CSS_PREFIX}width, auto) !important;height: var(${CSS_PREFIX}height, auto) !important;}[${ATTRIBUTE}] *{pointer-events: none !important;}[${ATTRIBUTE}][style*="${CSS_PREFIX}translate"] {translate: var(${CSS_PREFIX}translate) !important;}[style*="${CSS_PREFIX}transition"] {transition: var(${CSS_PREFIX}transition) !important;}*:where([${ATTRIBUTE}][popover]){overflow:visible;background:var(${CSS_PREFIX}background);border:var(${CSS_PREFIX}border);margin:unset;padding:unset;color:inherit;}[${ATTRIBUTE}]::backdrop {display: none}`;
+var cssRules = `[${ATTRIBUTE}] {position: fixed !important;pointer-events: none !important;touch-action: none !important;z-index: calc(infinity);will-change: translate;top: var(${CSS_PREFIX}top, 0px) !important;left: var(${CSS_PREFIX}left, 0px) !important;width: var(${CSS_PREFIX}width, auto) !important;height: var(${CSS_PREFIX}height, auto) !important;box-sizing:border-box;}[${ATTRIBUTE}] *{pointer-events: none !important;}[${ATTRIBUTE}][style*="${CSS_PREFIX}translate"] {translate: var(${CSS_PREFIX}translate) !important;}[style*="${CSS_PREFIX}transition"] {transition: var(${CSS_PREFIX}transition) !important;}*:where([${ATTRIBUTE}][popover]){overflow:visible;background:var(${CSS_PREFIX}background);border:var(${CSS_PREFIX}border);margin:unset;padding:unset;color:inherit;}[${ATTRIBUTE}]::backdrop {display: none}html:has([${ATTRIBUTE}]) * {user-select:none;-webkit-user-select:none;}`;
 var PLACEHOLDER_ATTRIBUTE = `${ATTR_PREFIX}placeholder`;
 var IGNORED_ATTRIBUTES = [ATTRIBUTE, PLACEHOLDER_ATTRIBUTE, "popover"];
 var IGNORED_STYLES = ["view-transition-name"];
-var Feedback = class extends Plugin {
-  constructor(manager) {
+var _Feedback = class _Feedback2 extends Plugin {
+  constructor(manager, options) {
     super(manager);
-    let style;
+    const styleTags = /* @__PURE__ */ new Map();
+    let initialSize;
     let initialCoordinates;
+    let initialFrameTransform;
     let initialTranslate = { x: 0, y: 0 };
-    let currentTransform;
+    let currentTranslate;
     let transformOrigin;
     let moved = false;
     const styleInjectionCleanup = E(() => {
-      if (!style && manager.dragOperation.status.initialized) {
-        style = document.createElement("style");
-        style.innerText = cssRules;
-        document.head.prepend(style);
+      var _a3, _b2;
+      const { status, source, target } = manager.dragOperation;
+      if (status.initialized) {
+        const sourceDocument = getDocument((_a3 = source == null ? void 0 : source.element) != null ? _a3 : null);
+        const targetDocument = getDocument((_b2 = target == null ? void 0 : target.element) != null ? _b2 : null);
+        const documents = /* @__PURE__ */ new Set([sourceDocument, targetDocument]);
+        for (const doc of documents) {
+          if (!styleTags.has(doc)) {
+            const style = document.createElement("style");
+            style.innerText = cssRules;
+            doc.head.prepend(style);
+            styleTags.set(doc, style);
+          }
+        }
         return styleInjectionCleanup;
       }
     });
@@ -2672,24 +3152,30 @@ var Feedback = class extends Plugin {
       const { dragOperation } = manager;
       const { position, source, status } = dragOperation;
       if (status.idle) {
+        currentTranslate = void 0;
         initialCoordinates = void 0;
-        currentTransform = void 0;
-        transformOrigin = void 0;
+        initialSize = void 0;
+        initialFrameTransform = void 0;
         initialTranslate = { x: 0, y: 0 };
+        transformOrigin = void 0;
         return;
       }
       if (!source) return;
       const { element, feedback } = source;
-      if (!element || feedback === "none") return;
-      const shape = new DOMRectangle(element, true);
+      if (!element || feedback === "none") {
+        return;
+      }
+      let cleanup;
+      const frameTransform = getFrameTransform(element);
+      const shape = new DOMRectangle(element, {
+        frameTransform: null,
+        ignoreTransforms: true
+      });
       const { width, height, top, left } = shape;
       const styles = new Styles(element);
       const { background, border, transition, translate } = getComputedStyles(element);
-      const droppable = manager.registry.droppables.get(source.id);
       const clone = feedback === "clone";
-      const placeholder = feedback !== "move" ? createPlaceholder(element, clone, {
-        [PLACEHOLDER_ATTRIBUTE]: ""
-      }) : null;
+      const placeholder = feedback !== "move" ? createPlaceholder(source) : null;
       const isKeyboardOperation = n(
         () => isKeyboardEvent(manager.dragOperation.activatorEvent)
       );
@@ -2699,28 +3185,43 @@ var Feedback = class extends Plugin {
           initialTranslate = parsedTranslate;
         }
       }
+      const relativeTop = top * frameTransform.scaleY + frameTransform.y;
+      const relativeLeft = left * frameTransform.scaleX + frameTransform.x;
       if (!initialCoordinates) {
-        initialCoordinates = {
-          x: left,
-          y: top
-        };
+        initialCoordinates = { x: relativeLeft, y: relativeTop };
+      }
+      if (!initialSize) {
+        initialSize = { width, height };
+      }
+      if (!initialFrameTransform) {
+        initialFrameTransform = frameTransform;
       }
       if (!transformOrigin) {
-        const currentPosition = n(() => position.current);
+        const current = n(() => position.current);
         transformOrigin = {
-          x: (currentPosition.x - left) / width,
-          y: (currentPosition.y - top) / height
+          x: (current.x - left * frameTransform.scaleX - frameTransform.x) / (width * frameTransform.scaleX),
+          y: (current.y - top * frameTransform.scaleY - frameTransform.y) / (height * frameTransform.scaleY)
         };
       }
+      const coordinatesDelta = {
+        x: initialCoordinates.x - relativeLeft,
+        y: initialCoordinates.y - relativeTop
+      };
+      const sizeDelta = {
+        width: (initialSize.width * initialFrameTransform.scaleX - width * frameTransform.scaleX) * transformOrigin.x,
+        height: (initialSize.height * initialFrameTransform.scaleY - height * frameTransform.scaleY) * transformOrigin.y
+      };
       const delta = {
-        x: initialCoordinates.x - left,
-        y: initialCoordinates.y - top
+        x: coordinatesDelta.x / frameTransform.scaleX + sizeDelta.width,
+        y: coordinatesDelta.y / frameTransform.scaleY + sizeDelta.height
       };
       const projected = {
-        top: top + delta.y,
-        left: left + delta.x
+        left: left + delta.x,
+        top: top + delta.y
       };
       element.setAttribute(ATTRIBUTE, "true");
+      const transform = n(() => dragOperation.transform);
+      const translateString = `${transform.x * frameTransform.scaleX + initialTranslate.x}px ${transform.y * frameTransform.scaleY + initialTranslate.y}px 0`;
       styles.set(
         {
           width,
@@ -2729,27 +3230,35 @@ var Feedback = class extends Plugin {
           left: projected.left,
           background,
           border,
-          translate: currentTransform ? `${currentTransform.x}px ${currentTransform.y}px 0` : ""
+          translate: translateString
         },
         CSS_PREFIX
       );
-      if (placeholder) element.insertAdjacentElement("afterend", placeholder);
+      if (placeholder) {
+        element.insertAdjacentElement("afterend", placeholder);
+        if (options == null ? void 0 : options.rootElement) {
+          const root = typeof options.rootElement === "function" ? options.rootElement(source) : options.rootElement;
+          root.appendChild(element);
+        }
+      }
       if (supportsPopover(element)) {
         if (!element.hasAttribute("popover")) {
           element.setAttribute("popover", "");
         }
         showPopover(element);
       }
-      const actual = new DOMRectangle(element, true);
+      const actual = new DOMRectangle(element, {
+        ignoreTransforms: true
+      });
       const offset = {
         top: projected.top - actual.top,
         left: projected.left - actual.left
       };
-      if (offset.left > 0.01 || offset.top > 0.01) {
+      if (Math.abs(offset.left) > 0.01 || Math.abs(offset.top) > 0.01) {
         styles.set(
           {
-            top: projected.top + offset.top,
-            left: projected.left + offset.left
+            top: actual.top + offset.top,
+            left: actual.left + offset.left
           },
           CSS_PREFIX
         );
@@ -2759,7 +3268,9 @@ var Feedback = class extends Plugin {
       }
       const resizeObserver = new ResizeObserver(() => {
         if (!placeholder) return;
-        const placeholderShape = new DOMRectangle(placeholder, true);
+        const placeholderShape = new DOMRectangle(placeholder, {
+          ignoreTransforms: true
+        });
         const origin = transformOrigin != null ? transformOrigin : { x: 1, y: 1 };
         const dX = (width - placeholderShape.width) * origin.x + delta.x;
         const dY = (height - placeholderShape.height) * origin.y + delta.y;
@@ -2767,12 +3278,13 @@ var Feedback = class extends Plugin {
           {
             width: placeholderShape.width,
             height: placeholderShape.height,
-            top: top + dY + offset.top,
-            left: left + dX + offset.left
+            top: top + dY,
+            left: left + dX
           },
           CSS_PREFIX
         );
-        if (element instanceof HTMLTableRowElement && placeholder instanceof HTMLTableRowElement) {
+        const window2 = getWindow(element);
+        if (element instanceof window2.HTMLTableRowElement && placeholder instanceof window2.HTMLTableRowElement) {
           const cells = Array.from(element.cells);
           const placeholderCells = Array.from(placeholder.cells);
           for (const [index, cell] of cells.entries()) {
@@ -2780,12 +3292,8 @@ var Feedback = class extends Plugin {
             cell.style.width = `${placeholderCell.offsetWidth}px`;
           }
         }
-        manager.dragOperation.shape = new DOMRectangle(element);
+        dragOperation.shape = new DOMRectangle(element);
       });
-      if (droppable && placeholder) {
-        droppable.placeholder = placeholder;
-        n(droppable.refreshShape);
-      }
       dragOperation.shape = new DOMRectangle(element);
       source.status = "dragging";
       let elementMutationObserver;
@@ -2825,7 +3333,8 @@ var Feedback = class extends Plugin {
         });
         documentMutationObserver = new MutationObserver((entries) => {
           for (const entry of entries) {
-            if (Array.from(entry.addedNodes).includes(element)) {
+            const { addedNodes } = entry;
+            if (addedNodes.length > 0 && Array.from(addedNodes).some((node) => node.contains(element))) {
               element.insertAdjacentElement("afterend", placeholder);
               showPopover(element);
               return;
@@ -2838,19 +3347,17 @@ var Feedback = class extends Plugin {
         });
       }
       const cleanupEffect2 = E(function updateTransform() {
-        var _a4, _b2;
-        const { transform, status: status2 } = dragOperation;
-        if (!transform.x && !transform.y && !moved) {
+        const { transform: transform2, status: status2 } = dragOperation;
+        if (!transform2.x && !transform2.y && !moved) {
           return;
         }
         if (!moved) {
           moved = true;
         }
         if (status2.dragging) {
-          const translateTransition = isKeyboardOperation ? "250ms ease" : "0ms linear";
-          const x = transform.x + initialTranslate.x;
-          const y2 = transform.y + initialTranslate.y;
-          const shape2 = new DOMRectangle(element);
+          const translateTransition = isKeyboardOperation ? "250ms cubic-bezier(0.25, 1, 0.5, 1)" : "0ms linear";
+          const x = transform2.x / frameTransform.scaleX + initialTranslate.x;
+          const y2 = transform2.y / frameTransform.scaleY + initialTranslate.y;
           styles.set(
             {
               transition: `${transition}, translate ${translateTransition}`,
@@ -2858,16 +3365,10 @@ var Feedback = class extends Plugin {
             },
             CSS_PREFIX
           );
-          dragOperation.shape = shape2.translate(
-            x - ((_a4 = currentTransform == null ? void 0 : currentTransform.x) != null ? _a4 : 0),
-            y2 - ((_b2 = currentTransform == null ? void 0 : currentTransform.y) != null ? _b2 : 0)
-          );
-          currentTransform = {
+          dragOperation.shape = new DOMRectangle(element);
+          currentTranslate = {
             x,
-            y: y2,
-            z: 0,
-            scaleX: shape2.scale.x,
-            scaleY: shape2.scale.y
+            y: y2
           };
         }
       });
@@ -2883,13 +3384,14 @@ var Feedback = class extends Plugin {
           element2.focus();
         }
       };
-      let cleanup = () => {
+      let dropEffectCleanup;
+      cleanup = () => {
         elementMutationObserver == null ? void 0 : elementMutationObserver.disconnect();
         documentMutationObserver == null ? void 0 : documentMutationObserver.disconnect();
         resizeObserver.disconnect();
         styles.reset();
-        if (moved && element.isConnected) {
-          placeholder == null ? void 0 : placeholder.replaceWith(element);
+        if (placeholder && (moved || placeholder.parentElement !== element.parentElement) && element.isConnected) {
+          placeholder.replaceWith(element);
         }
         placeholder == null ? void 0 : placeholder.remove();
         element.removeAttribute(ATTRIBUTE);
@@ -2897,54 +3399,71 @@ var Feedback = class extends Plugin {
           element.removeAttribute("popover");
         }
         cleanupEffect2();
-        dropEffectCleanup();
-        if (droppable) {
-          droppable.placeholder = void 0;
-        }
+        dropEffectCleanup == null ? void 0 : dropEffectCleanup();
         source.status = "idle";
         moved = false;
       };
-      const dropEffectCleanup = E(function dropAnimation() {
+      dropEffectCleanup = E(function dropAnimation() {
         if (dragOperation.status.dropped) {
           const onComplete = cleanup;
           cleanup = void 0;
           source.status = "dropping";
-          const transform = currentTransform;
-          if (!transform) {
+          const transform2 = currentTranslate;
+          if (!transform2) {
             onComplete == null ? void 0 : onComplete();
             return;
           }
           manager.renderer.rendering.then(() => {
-            var _a4;
             showPopover(element);
             const target = placeholder != null ? placeholder : element;
-            styles.remove(["translate"], CSS_PREFIX);
-            const shape2 = new DOMRectangle(target);
-            const currentShape = new DOMRectangle(element, true).translate(
-              transform.x,
-              transform.y
-            );
+            const animations = element.getAnimations();
+            if (animations.length) {
+              animations.forEach((animation) => {
+                const { effect: effect9 } = animation;
+                if (effect9 instanceof KeyframeEffect) {
+                  if (effect9.getKeyframes().some((keyframe) => keyframe.translate)) {
+                    animation.finish();
+                  }
+                }
+              });
+            }
+            const sameFrame = getFrameElement(element) === getFrameElement(target);
+            const options2 = {
+              frameTransform: sameFrame ? null : void 0
+            };
+            const current = new DOMRectangle(element, options2);
+            const final = new DOMRectangle(target, options2);
             const delta2 = {
-              x: currentShape.center.x - shape2.center.x,
-              y: currentShape.center.y - shape2.center.y
+              x: current.center.x - final.center.x,
+              y: current.center.y - final.center.y
             };
-            const final = {
-              x: transform.x - delta2.x,
-              y: transform.y - delta2.y,
-              z: 0
+            const finalTransform = {
+              x: transform2.x - delta2.x,
+              y: transform2.y - delta2.y
             };
+            const heightKeyframes = Math.round(current.height) !== Math.round(final.height) ? {
+              minHeight: [`${current.height}px`, `${final.height}px`],
+              maxHeight: [`${current.height}px`, `${final.height}px`]
+            } : {};
+            const widthKeyframes = Math.round(current.width) !== Math.round(final.width) ? {
+              minWidth: [`${current.width}px`, `${final.width}px`],
+              maxWidth: [`${current.width}px`, `${final.width}px`]
+            } : {};
             animateTransform({
               element,
-              keyframes: {
+              keyframes: __spreadProps$4(__spreadValues$4(__spreadValues$4({}, heightKeyframes), widthKeyframes), {
                 translate: [
-                  `${transform.x}px ${transform.y}px ${(_a4 = transform.z) != null ? _a4 : 0}`,
-                  `${final.x}px ${final.y}px ${final.z}`
+                  `${transform2.x}px ${transform2.y}px 0`,
+                  `${finalTransform.x}px ${finalTransform.y}px 0`
                 ]
-              },
+              }),
               options: {
                 duration: moved ? 250 : 0,
                 easing: "ease"
               },
+              onReady() {
+                styles.remove(["translate"], CSS_PREFIX);
+              },
               onFinish() {
                 requestAnimationFrame(restoreFocus);
                 onComplete == null ? void 0 : onComplete();
@@ -2958,10 +3477,56 @@ var Feedback = class extends Plugin {
     this.destroy = () => {
       styleInjectionCleanup();
       cleanupEffect();
-      style == null ? void 0 : style.remove();
+      styleTags.forEach((style) => style.remove());
     };
   }
 };
+_Feedback.configure = configurator(_Feedback);
+var Feedback = _Feedback;
+function createPlaceholder(source) {
+  return n(() => {
+    var _a3;
+    const { element, manager } = source;
+    if (!element || !manager) return;
+    const { droppables } = manager.registry;
+    const containedDroppables = /* @__PURE__ */ new Map();
+    for (const droppable of droppables) {
+      if (!droppable.element) continue;
+      if (element === droppable.element || element.contains(droppable.element)) {
+        const identifierAttribute = `${ATTR_PREFIX}${generateUniqueId("dom-id")}`;
+        droppable.element.setAttribute(identifierAttribute, "");
+        containedDroppables.set(droppable, identifierAttribute);
+      }
+    }
+    const cleanup = [];
+    const placeholder = cloneElement(element);
+    const { remove } = placeholder;
+    for (const [droppable, identifierAttribute] of containedDroppables) {
+      if (!droppable.element) continue;
+      const selector = `[${identifierAttribute}]`;
+      const clonedElement = placeholder.matches(selector) ? placeholder : placeholder.querySelector(selector);
+      (_a3 = droppable.element) == null ? void 0 : _a3.removeAttribute(identifierAttribute);
+      if (!clonedElement) continue;
+      let current = droppable.element;
+      droppable.proxy = clonedElement;
+      clonedElement.removeAttribute(identifierAttribute);
+      ProxiedElements.set(current, clonedElement);
+      cleanup.push(() => {
+        ProxiedElements.delete(current);
+        droppable.proxy = void 0;
+      });
+    }
+    placeholder.setAttribute("inert", "true");
+    placeholder.setAttribute("tab-index", "-1");
+    placeholder.setAttribute("aria-hidden", "true");
+    placeholder.setAttribute(PLACEHOLDER_ATTRIBUTE, "");
+    placeholder.remove = () => {
+      cleanup.forEach((fn) => fn());
+      remove.call(placeholder);
+    };
+    return placeholder;
+  });
+}
 var LOCKED = true;
 var UNLOCKED = false;
 var _dec, _a, _dec2, _b, _init$1, __b, __a;
@@ -3055,7 +3620,8 @@ var Scroller = class extends (_a2 = CorePlugin, _autoScrolling_dec = [reactive],
         return;
       }
       const { element, by } = __privateGet$1(this, _meta);
-      element.scrollBy(by.x, by.y);
+      if (by.y) element.scrollTop += by.y;
+      if (by.x) element.scrollLeft += by.x;
     });
     this.scroll = (options) => {
       var _a3;
@@ -3125,21 +3691,20 @@ var Scroller = class extends (_a2 = CorePlugin, _autoScrolling_dec = [reactive],
     let previousElementFromPoint = null;
     let previousScrollableElements = null;
     const elementFromPoint = computed(() => {
-      var _a3;
       const { position } = manager.dragOperation;
       if (!position) {
         return null;
       }
-      const { x, y: y2 } = position.current;
-      const element = document.elementFromPoint(x, y2);
+      const element = getElementFromPoint(document, position.current);
       if (element) {
         previousElementFromPoint = element;
       }
-      return (_a3 = document.elementFromPoint(x, y2)) != null ? _a3 : previousElementFromPoint;
+      return element != null ? element : previousElementFromPoint;
     });
     const scrollableElements = computed(() => {
       const element = elementFromPoint.value;
-      if (!element || element === document.documentElement) {
+      const { documentElement } = getDocument(element);
+      if (!element || element === documentElement) {
         const { target } = manager.dragOperation;
         const targetElement = target == null ? void 0 : target.element;
         if (targetElement) {
@@ -3232,18 +3797,20 @@ var ScrollListener = class extends CorePlugin {
     this.handleScroll = () => {
       if (__privateGet$1(this, _timeout) == null) {
         __privateSet$1(this, _timeout, setTimeout(() => {
-          this.manager.collisionObserver.forceUpdate();
+          this.manager.collisionObserver.forceUpdate(false);
           __privateSet$1(this, _timeout, void 0);
         }, 50));
       }
     };
     const { dragOperation } = this.manager;
     this.destroy = E(() => {
+      var _a3, _b2, _c3;
       const enabled = dragOperation.status.dragging;
       if (enabled) {
-        document.addEventListener("scroll", this.handleScroll, listenerOptions);
+        const root = (_c3 = (_b2 = (_a3 = dragOperation.source) == null ? void 0 : _a3.element) == null ? void 0 : _b2.ownerDocument) != null ? _c3 : document;
+        root.addEventListener("scroll", this.handleScroll, listenerOptions);
         return () => {
-          document.removeEventListener(
+          root.removeEventListener(
             "scroll",
             this.handleScroll,
             listenerOptions
@@ -3284,7 +3851,7 @@ function removeSelection() {
 var DEFAULT_KEYBOARD_CODES = {
   start: ["Space", "Enter"],
   cancel: ["Escape"],
-  end: ["Space", "Enter"],
+  end: ["Space", "Enter", "Tab"],
   up: ["ArrowUp"],
   down: ["ArrowDown"],
   left: ["ArrowLeft"],
@@ -3303,20 +3870,22 @@ var KeyboardSensor = class extends Sensor {
       if (this.disabled || event.defaultPrevented) {
         return;
       }
-      if (!(event.target instanceof Element)) {
+      if (!isElement(event.target)) {
         return;
       }
-      if (source.disabled || !source.element) {
+      if (source.disabled) {
         return;
       }
-      const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options2 != null ? options2 : {};
-      if (!keyboardCodes.start.includes(event.code)) {
-        return;
-      }
-      if (!this.manager.dragOperation.status.idle) {
-        return;
+      if (!source.handle && source.element && event.target === source.element || source.handle && event.target === source.handle) {
+        const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options2 != null ? options2 : {};
+        if (!keyboardCodes.start.includes(event.code)) {
+          return;
+        }
+        if (!this.manager.dragOperation.status.idle) {
+          return;
+        }
+        this.handleStart(event, source, options2);
       }
-      this.handleStart(event, source, options2);
     };
   }
   bind(source, options = this.options) {
@@ -3324,7 +3893,7 @@ var KeyboardSensor = class extends Sensor {
       var _a3;
       const target = (_a3 = source.handle) != null ? _a3 : source.element;
       const listener = (event) => {
-        if (event instanceof KeyboardEvent) {
+        if (isKeyboardEvent(event)) {
           this.handleSourceKeyDown(event, source, options);
         }
       };
@@ -3410,13 +3979,13 @@ var KeyboardSensor = class extends Sensor {
     }
     switch (direction) {
       case "up":
-        offset = { x: 0, y: -DEFAULT_OFFSET * factor };
+        offset = { x: 0, y: -10 * factor };
         break;
       case "down":
         offset = { x: 0, y: DEFAULT_OFFSET * factor };
         break;
       case "left":
-        offset = { x: -DEFAULT_OFFSET * factor, y: 0 };
+        offset = { x: -10 * factor, y: 0 };
         break;
       case "right":
         offset = { x: DEFAULT_OFFSET * factor, y: 0 };
@@ -3468,7 +4037,7 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       var _a3;
       const target = (_a3 = source.handle) != null ? _a3 : source.element;
       const listener = (event) => {
-        if (event instanceof PointerEvent) {
+        if (isPointerEvent(event)) {
           this.handlePointerDown(event, source, options);
         }
       };
@@ -3483,29 +4052,30 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     return unbind;
   }
   handlePointerDown(event, source, options = {}) {
-    if (this.disabled || !event.isPrimary || event.button !== 0 || !(event.target instanceof Element) || source.disabled) {
+    if (this.disabled || !event.isPrimary || event.button !== 0 || !isElement(event.target) || source.disabled || isCapturedBySensor(event)) {
       return;
     }
     const { target } = event;
-    const isNativeDraggable = target instanceof HTMLElement && target.draggable && target.getAttribute("draggable") === "true";
+    const isNativeDraggable = isHTMLElement(target) && target.draggable && target.getAttribute("draggable") === "true";
+    const offset = getFrameTransform(source.element);
     this.initialCoordinates = {
-      x: event.clientX,
-      y: event.clientY
+      x: event.clientX * offset.scaleX + offset.x,
+      y: event.clientY * offset.scaleY + offset.y
     };
     const { activationConstraints } = options;
     const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
-    event.stopImmediatePropagation();
+    event.sensor = this;
     if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
       this.handleStart(source, event);
     } else {
       const { delay } = constraints;
       if (delay) {
-        const timeout = setTimeout(
+        const timeout2 = setTimeout(
           () => this.handleStart(source, event),
           delay.value
         );
         __privateSet$1(this, _clearTimeout, () => {
-          clearTimeout(timeout);
+          clearTimeout(timeout2);
           __privateSet$1(this, _clearTimeout, void 0);
         });
       }
@@ -3523,27 +4093,10 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
           capture: true
         }
       },
-      {
-        // Prevent scrolling on touch devices
-        type: "touchmove",
-        listener: preventDefault,
-        options: {
-          passive: false
-        }
-      },
-      {
-        // Prevent click events
-        type: "click",
-        listener: preventDefault
-      },
       {
         // Cancel activation if there is a competing Drag and Drop interaction
         type: "dragstart",
         listener: isNativeDraggable ? this.handleCancel : preventDefault
-      },
-      {
-        type: "keydown",
-        listener: this.handleKeyDown
       }
     ]);
     const cleanup = () => {
@@ -3551,7 +4104,6 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       setTimeout(unbindListeners);
       (_a3 = __privateGet$1(this, _clearTimeout)) == null ? void 0 : _a3.call(this);
       this.initialCoordinates = void 0;
-      this.cleanup.delete(cleanup);
     };
     this.cleanup.add(cleanup);
   }
@@ -3560,6 +4112,9 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       x: event.clientX,
       y: event.clientY
     };
+    const offset = getFrameTransform(source.element);
+    coordinates.x = coordinates.x * offset.scaleX + offset.x;
+    coordinates.y = coordinates.y * offset.scaleY + offset.y;
     if (this.manager.dragOperation.status.dragging) {
       event.preventDefault();
       event.stopPropagation();
@@ -3591,14 +4146,15 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     }
   }
   handlePointerUp(event) {
-    event.preventDefault();
-    event.stopPropagation();
     const { status } = this.manager.dragOperation;
     if (!status.idle) {
+      event.preventDefault();
+      event.stopPropagation();
       const canceled = !status.initialized;
       this.manager.actions.stop({ canceled });
     }
     this.cleanup.forEach((cleanup) => cleanup());
+    this.cleanup.clear();
   }
   handleKeyDown(event) {
     if (event.key === "Escape") {
@@ -3621,6 +4177,28 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       manager.actions.setDragSource(source.id);
       manager.actions.start({ coordinates: initialCoordinates, event });
     });
+    const ownerDocument = getDocument(event.target);
+    const unbind = this.listeners.bind(ownerDocument, [
+      {
+        // Prevent scrolling on touch devices
+        type: "touchmove",
+        listener: preventDefault,
+        options: {
+          passive: false
+        }
+      },
+      {
+        // Prevent click events
+        type: "click",
+        listener: preventDefault
+      },
+      {
+        type: "keydown",
+        listener: this.handleKeyDown
+      }
+    ]);
+    ownerDocument.body.setPointerCapture(event.pointerId);
+    this.cleanup.add(unbind);
   }
   handleCancel() {
     const { dragOperation } = this.manager;
@@ -3628,6 +4206,7 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       this.manager.actions.stop({ canceled: true });
     }
     this.cleanup.forEach((cleanup) => cleanup());
+    this.cleanup.clear();
   }
   destroy() {
     this.listeners.clear();
@@ -3636,6 +4215,9 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
 _clearTimeout = /* @__PURE__ */ new WeakMap();
 _PointerSensor.configure = configurator(_PointerSensor);
 var PointerSensor = _PointerSensor;
+function isCapturedBySensor(event) {
+  return "sensor" in event;
+}
 function preventDefault(event) {
   event.preventDefault();
 }
@@ -3659,7 +4241,7 @@ var defaultPreset = {
       activationConstraints(event, source) {
         var _a3;
         const { pointerType, target } = event;
-        if (pointerType === "mouse" && target instanceof Element && (source.handle === target || ((_a3 = source.handle) == null ? void 0 : _a3.contains(target)))) {
+        if (pointerType === "mouse" && isElement(target) && (source.handle === target || ((_a3 = source.handle) == null ? void 0 : _a3.contains(target)))) {
           return void 0;
         }
         return {
@@ -3685,7 +4267,7 @@ var DragDropManager2 = class extends DragDropManager$1 {
     }));
   }
 };
-var _feedback_dec, _element_dec, _handle_dec, _c, _init3, _handle, _element, _feedback;
+var _feedback_dec, _element_dec, _handle_dec, _c, _init3, _handle, _element$1, _feedback;
 var Draggable$1 = class Draggable2 extends (_c = Draggable$2, _handle_dec = [reactive], _element_dec = [reactive], _feedback_dec = [reactive], _c) {
   constructor(_a3, manager) {
     var _b2 = _a3, {
@@ -3725,7 +4307,7 @@ var Draggable$1 = class Draggable2 extends (_c = Draggable$2, _handle_dec = [rea
       manager
     );
     __privateAdd$1(this, _handle, __runInitializers$1(_init3, 8, this)), __runInitializers$1(_init3, 11, this);
-    __privateAdd$1(this, _element, __runInitializers$1(_init3, 12, this)), __runInitializers$1(_init3, 15, this);
+    __privateAdd$1(this, _element$1, __runInitializers$1(_init3, 12, this)), __runInitializers$1(_init3, 15, this);
     __privateAdd$1(this, _feedback, __runInitializers$1(_init3, 16, this)), __runInitializers$1(_init3, 19, this);
     this.element = element;
     this.handle = handle;
@@ -3734,18 +4316,33 @@ var Draggable$1 = class Draggable2 extends (_c = Draggable$2, _handle_dec = [rea
 };
 _init3 = __decoratorStart$1(_c);
 _handle = /* @__PURE__ */ new WeakMap();
-_element = /* @__PURE__ */ new WeakMap();
+_element$1 = /* @__PURE__ */ new WeakMap();
 _feedback = /* @__PURE__ */ new WeakMap();
 __decorateElement$1(_init3, 4, "handle", _handle_dec, Draggable$1, _handle);
-__decorateElement$1(_init3, 4, "element", _element_dec, Draggable$1, _element);
+__decorateElement$1(_init3, 4, "element", _element_dec, Draggable$1, _element$1);
 __decorateElement$1(_init3, 4, "feedback", _feedback_dec, Draggable$1, _feedback);
 __decoratorMetadata$1(_init3, Draggable$1);
-var _placeholder_dec, _visible_dec, _c2, _init4, _visible, _placeholder;
-var Droppable2 = class extends (_c2 = Droppable$1, _visible_dec = [reactive], _placeholder_dec = [reactive], _c2) {
+var _proxy_dec, _element_dec2, _c2, _init4, _element2, _d, element_get, element_set, _Droppable_instances, _proxy;
+var Droppable2 = class extends (_c2 = Droppable$1, _element_dec2 = [reactive], _proxy_dec = [reactive], _c2) {
   constructor(_a3, manager) {
     var _b2 = _a3, { element, effects: effects2 = () => [] } = _b2, input = __objRest$2(_b2, ["element", "effects"]);
-    var _a4;
     const { collisionDetector = defaultCollisionDetection } = input;
+    const updateShape = (boundingClientRect) => {
+      const { manager: manager2, element: element2 } = this;
+      if (!element2 || boundingClientRect === null) {
+        this.shape = void 0;
+        return void 0;
+      }
+      if (!manager2) return;
+      const updatedShape = new DOMRectangle(element2);
+      const shape = n(() => this.shape);
+      if (updatedShape && (shape == null ? void 0 : shape.equals(updatedShape))) {
+        return shape;
+      }
+      this.shape = updatedShape;
+      return updatedShape;
+    };
+    const observePosition = d(false);
     super(
       __spreadProps$4(__spreadValues$4({}, input), {
         collisionDetector,
@@ -3755,62 +4352,27 @@ var Droppable2 = class extends (_c2 = Droppable$1, _visible_dec = [reactive], _p
             const { element: element2, manager: manager2 } = this;
             if (!manager2) return;
             const { dragOperation } = manager2;
-            if (element2 && dragOperation.status.initialized) {
-              const scrollableAncestor = getFirstScrollableAncestor(element2);
-              const doc = getDocument(element2);
-              const root = scrollableAncestor === doc.scrollingElement ? doc : scrollableAncestor;
-              const intersectionObserver = new IntersectionObserver(
-                (entries) => {
-                  const [entry] = entries.slice(-1);
-                  const { width, height } = entry.boundingClientRect;
-                  if (!width && !height) {
-                    return;
-                  }
-                  this.visible = entry.isIntersecting;
-                },
-                {
-                  root: root != null ? root : doc,
-                  rootMargin: "40%"
-                }
-              );
-              const mutationObserver = new MutationObserver(
-                () => scheduler.schedule(this.refreshShape)
-              );
-              const resizeObserver = new ResizeObserver(
-                () => scheduler.schedule(this.refreshShape)
+            const { source } = dragOperation;
+            observePosition.value = Boolean(
+              source && dragOperation.status.initialized && element2 && !this.disabled && this.accepts(source)
+            );
+          },
+          () => {
+            const { element: element2 } = this;
+            if (observePosition.value && element2) {
+              const positionObserver = new PositionObserver(
+                element2,
+                updateShape
               );
-              if (element2.parentElement) {
-                mutationObserver.observe(element2.parentElement, {
-                  childList: true
-                });
-              }
-              resizeObserver.observe(element2);
-              intersectionObserver.observe(element2);
               return () => {
+                positionObserver.disconnect();
                 this.shape = void 0;
-                this.visible = void 0;
-                resizeObserver.disconnect();
-                mutationObserver.disconnect();
-                intersectionObserver.disconnect();
               };
             }
           },
           () => {
-            const { manager: manager2 } = this;
-            if (!manager2) return;
-            const { dragOperation } = manager2;
-            const { status } = dragOperation;
-            const source = n(() => dragOperation.source);
-            if (status.initialized) {
-              if ((source == null ? void 0 : source.type) != null && !this.accepts(source)) {
-                return;
-              }
-              scheduler.schedule(this.refreshShape);
-            }
-          },
-          () => {
-            var _a5;
-            if ((_a5 = this.manager) == null ? void 0 : _a5.dragOperation.status.initialized) {
+            var _a4;
+            if ((_a4 = this.manager) == null ? void 0 : _a4.dragOperation.status.initialized) {
               return () => {
                 this.shape = void 0;
               };
@@ -3820,42 +4382,26 @@ var Droppable2 = class extends (_c2 = Droppable$1, _visible_dec = [reactive], _p
       }),
       manager
     );
-    __privateAdd$1(this, _visible, __runInitializers$1(_init4, 8, this)), __runInitializers$1(_init4, 11, this);
-    __privateAdd$1(this, _placeholder, __runInitializers$1(_init4, 12, this)), __runInitializers$1(_init4, 15, this);
-    this.internal = {
-      element: d(element)
-    };
-    this.refreshShape = this.refreshShape.bind(this);
-    if ((_a4 = this.manager) == null ? void 0 : _a4.dragOperation.status.initialized) {
-      this.visible = true;
-    }
+    __privateAdd$1(this, _Droppable_instances);
+    __privateAdd$1(this, _element2, __runInitializers$1(_init4, 8, this)), __runInitializers$1(_init4, 11, this);
+    __privateAdd$1(this, _proxy, __runInitializers$1(_init4, 12, this)), __runInitializers$1(_init4, 15, this);
+    this.element = element;
+    this.refreshShape = () => updateShape();
   }
-  set element(value) {
-    this.internal.element.value = value;
+  set element(element) {
+    __privateSet$1(this, _Droppable_instances, element, element_set);
   }
   get element() {
-    var _a3, _b2;
-    return (_b2 = this.placeholder) != null ? _b2 : (_a3 = this.internal) == null ? void 0 : _a3.element.value;
-  }
-  refreshShape(ignoreTransform) {
-    const { element, shape } = this;
-    if (!element || this.visible === false) {
-      this.shape = void 0;
-      return void 0;
-    }
-    const updatedShape = new DOMRectangle(element, ignoreTransform);
-    if (updatedShape && (shape == null ? void 0 : shape.equals(updatedShape))) {
-      return shape;
-    }
-    this.shape = updatedShape;
-    return updatedShape;
+    var _a3;
+    return (_a3 = this.proxy) != null ? _a3 : __privateGet$1(this, _Droppable_instances, element_get);
   }
 };
 _init4 = __decoratorStart$1(_c2);
-_visible = /* @__PURE__ */ new WeakMap();
-_placeholder = /* @__PURE__ */ new WeakMap();
-__decorateElement$1(_init4, 4, "visible", _visible_dec, Droppable2, _visible);
-__decorateElement$1(_init4, 4, "placeholder", _placeholder_dec, Droppable2, _placeholder);
+_element2 = /* @__PURE__ */ new WeakMap();
+_Droppable_instances = /* @__PURE__ */ new WeakSet();
+_proxy = /* @__PURE__ */ new WeakMap();
+_d = __decorateElement$1(_init4, 20, "#element", _element_dec2, _Droppable_instances, _element2), element_get = _d.get, element_set = _d.set;
+__decorateElement$1(_init4, 4, "proxy", _proxy_dec, Droppable2, _proxy);
 __decoratorMetadata$1(_init4, Droppable2);
 var __create = Object.create;
 var __defProp$3 = Object.defineProperty;
@@ -3871,7 +4417,7 @@ var __typeError = (msg) => {
 };
 var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$3 = (a2, b2) => {
-  for (var prop in b2 || (b2 = {}))
+  for (var prop in b2)
     if (__hasOwnProp$4.call(b2, prop))
       __defNormalProp$3(a2, prop, b2[prop]);
   if (__getOwnPropSymbols$4)
@@ -3907,7 +4453,7 @@ var __runInitializers = (array, flags, self, value) => {
   return value;
 };
 var __decorateElement = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s2 = !!(flags & 8), p2 = !!(flags & 16);
+  var fn, it, done, ctx, access, k = flags & 7, s2 = false, p2 = false;
   var j = array.length + 1, key = __decoratorStrings[k + 5];
   var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
   var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
@@ -3979,75 +4525,71 @@ var SortableKeyboardPlugin = class extends Plugin {
             return;
           }
           const direction = getDirection(by);
-          const { source } = dragOperation;
+          const { source, target } = dragOperation;
           const { center } = dragOperation.shape.current;
           const potentialTargets = [];
-          for (const droppable of registry.droppables) {
-            const { shape, id: id2 } = droppable;
-            if (!shape || id2 === (source == null ? void 0 : source.id) && isSortable(droppable) || (source == null ? void 0 : source.type) != null && !droppable.accepts(source)) {
-              continue;
-            }
-            switch (direction) {
-              case "down":
-                if (center.y + TOLERANCE < shape.center.y) {
-                  potentialTargets.push(droppable);
-                }
-                break;
-              case "up":
-                if (center.y - TOLERANCE > shape.center.y) {
-                  potentialTargets.push(droppable);
-                }
-                break;
-              case "left":
-                if (center.x - TOLERANCE > shape.center.x) {
-                  potentialTargets.push(droppable);
-                }
-                break;
-              case "right":
-                if (center.x + TOLERANCE < shape.center.x) {
-                  potentialTargets.push(droppable);
-                }
-                break;
+          const cleanup = [];
+          r(() => {
+            for (const droppable of registry.droppables) {
+              const { id: id2 } = droppable;
+              if (!droppable.accepts(source) || id2 === (target == null ? void 0 : target.id) && isSortable(droppable) || !droppable.element) {
+                continue;
+              }
+              let previousShape = droppable.shape;
+              const shape = new DOMRectangle(droppable.element, {
+                getBoundingClientRect: (element) => getVisibleBoundingRectangle(element, void 0, 0.2)
+              });
+              if (!shape.height || !shape.width) continue;
+              if (direction == "down" && center.y + TOLERANCE < shape.center.y || direction == "up" && center.y - TOLERANCE > shape.center.y || direction == "left" && center.x - TOLERANCE > shape.center.x || direction == "right" && center.x + TOLERANCE < shape.center.x) {
+                potentialTargets.push(droppable);
+                droppable.shape = shape;
+                cleanup.push(() => droppable.shape = previousShape);
+              }
             }
-          }
+          });
           event.preventDefault();
           collisionObserver.disable();
           const collisions = collisionObserver.computeCollisions(
             potentialTargets,
-            closestCenter
+            closestCorners
           );
+          r(() => cleanup.forEach((clean) => clean()));
           const [firstCollision] = collisions;
           if (!firstCollision) {
             return;
           }
           const { id } = firstCollision;
-          actions.setDropTarget(id).then(() => {
-            const { source: source2 } = dragOperation;
-            if (!source2) {
+          const { index, group } = source.sortable;
+          actions.setDropTarget(id).then((defaultPrevented) => {
+            if (defaultPrevented) return;
+            const { source: source2, target: target2 } = dragOperation;
+            if (!source2 || !isSortable(source2)) {
               return;
             }
-            const droppable = registry.droppables.get(source2.id);
-            if (!(droppable == null ? void 0 : droppable.element)) {
+            const {
+              index: newIndex,
+              group: newGroup,
+              target: targetElement
+            } = source2.sortable;
+            const updated = index !== newIndex || group !== newGroup;
+            const element = updated ? targetElement : target2 == null ? void 0 : target2.element;
+            if (!element) return;
+            scrollIntoViewIfNeeded(element);
+            const shape = new DOMRectangle(element);
+            if (!shape) {
               return;
             }
-            const { element } = droppable;
-            scrollIntoViewIfNeeded(element);
-            scheduler.schedule(() => {
-              const shape = droppable.refreshShape();
-              if (!shape) {
-                return;
+            actions.move({
+              to: {
+                x: shape.center.x,
+                y: shape.center.y
               }
-              actions.move({
-                to: {
-                  x: shape.center.x,
-                  y: shape.center.y
-                }
-              });
-              actions.setDropTarget(source2.id).then(() => {
-                dragOperation.shape = shape;
-                collisionObserver.enable();
-              });
             });
+            if (updated) {
+              actions.setDropTarget(source2.id).then(() => collisionObserver.enable());
+            } else {
+              collisionObserver.enable();
+            }
           });
         });
       }
@@ -4070,6 +4612,25 @@ function getDirection(delta) {
     return "up";
   }
 }
+var __defProp2 = Object.defineProperty;
+var __defProps2 = Object.defineProperties;
+var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a2, b2) => {
+  for (var prop in b2)
+    if (__hasOwnProp2.call(b2, prop))
+      __defNormalProp2(a2, prop, b2[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b2)) {
+      if (__propIsEnum2.call(b2, prop))
+        __defNormalProp2(a2, prop, b2[prop]);
+    }
+  return a2;
+};
+var __spreadProps2 = (a2, b2) => __defProps2(a2, __getOwnPropDescs2(b2));
 function arrayMove$1(array, from, to) {
   if (from === to) {
     return array;
@@ -4078,26 +4639,108 @@ function arrayMove$1(array, from, to) {
   newArray.splice(to, 0, newArray.splice(from, 1)[0]);
   return newArray;
 }
+function mutate$1(items, event, mutation) {
+  var _a3, _b2;
+  const { source, target, canceled } = event.operation;
+  if (!source || !target || canceled || source.id === target.id) {
+    if ("preventDefault" in event) event.preventDefault();
+    return items;
+  }
+  const findIndex = (item, id) => item === id || typeof item === "object" && "id" in item && item.id === id;
+  if (Array.isArray(items)) {
+    const sourceIndex2 = items.findIndex((item) => findIndex(item, source.id));
+    const targetIndex2 = items.findIndex((item) => findIndex(item, target.id));
+    if (sourceIndex2 === -1 || targetIndex2 === -1) {
+      return items;
+    }
+    if (!canceled && "index" in source && typeof source.index === "number") {
+      const projectedSourceIndex = source.index;
+      if (projectedSourceIndex !== sourceIndex2) {
+        return mutation(items, sourceIndex2, projectedSourceIndex);
+      }
+    }
+    return mutation(items, sourceIndex2, targetIndex2);
+  }
+  const entries = Object.entries(items);
+  let sourceIndex = -1;
+  let sourceParent;
+  let targetIndex = -1;
+  let targetParent;
+  for (const [id, children] of entries) {
+    if (sourceIndex === -1) {
+      sourceIndex = children.findIndex((item) => findIndex(item, source.id));
+      if (sourceIndex !== -1) {
+        sourceParent = id;
+      }
+    }
+    if (targetIndex === -1) {
+      targetIndex = children.findIndex((item) => findIndex(item, target.id));
+      if (targetIndex !== -1) {
+        targetParent = id;
+      }
+    }
+    if (sourceIndex !== -1 && targetIndex !== -1) {
+      break;
+    }
+  }
+  if (!source.manager) return items;
+  const { dragOperation } = source.manager;
+  const position = (_b2 = (_a3 = dragOperation.shape) == null ? void 0 : _a3.current.center) != null ? _b2 : dragOperation.position.current;
+  if (targetParent == null) {
+    if (target.id in items) {
+      const insertionIndex = target.shape && position.y > target.shape.center.y ? items[target.id].length : 0;
+      targetParent = target.id;
+      targetIndex = insertionIndex;
+    }
+  }
+  if (sourceParent == null || targetParent == null || sourceParent === targetParent && sourceIndex === targetIndex) {
+    if ("preventDefault" in event) event.preventDefault();
+    return items;
+  }
+  if (sourceParent === targetParent) {
+    return __spreadProps2(__spreadValues2({}, items), {
+      [sourceParent]: mutation(items[sourceParent], sourceIndex, targetIndex)
+    });
+  }
+  const isBelowTarget = target.shape && Math.round(position.y) > Math.round(target.shape.center.y);
+  const modifier = isBelowTarget ? 1 : 0;
+  const sourceItem = items[sourceParent][sourceIndex];
+  return __spreadProps2(__spreadValues2({}, items), {
+    [sourceParent]: [
+      ...items[sourceParent].slice(0, sourceIndex),
+      ...items[sourceParent].slice(sourceIndex + 1)
+    ],
+    [targetParent]: [
+      ...items[targetParent].slice(0, targetIndex + modifier),
+      sourceItem,
+      ...items[targetParent].slice(targetIndex + modifier)
+    ]
+  });
+}
+function move$1(items, event) {
+  return mutate$1(items, event, arrayMove$1);
+}
+var defaultGroup = "__default__";
 var OptimisticSortingPlugin = class extends Plugin {
   constructor(manager) {
     super(manager);
-    const getSortableInstances = (group) => {
-      var _a3;
+    const getSortableInstances = () => {
       const sortableInstances = /* @__PURE__ */ new Map();
       for (const droppable of manager.registry.droppables) {
         if (droppable instanceof SortableDroppable) {
           const { sortable } = droppable;
-          if (sortable.group !== group) {
-            continue;
-          }
-          if (sortableInstances.has(sortable.index)) {
-            throw new Error(
-              `Duplicate sortable index found for same sortable group: ${sortable.droppable.id} and ${(_a3 = sortableInstances.get(sortable.index)) == null ? void 0 : _a3.droppable.id} have the same index (${sortable.index}). Make sure each sortable item has a unique index. Use the \`group\` attribute to separate sortables into different groups.`
-            );
+          const { group } = sortable;
+          let instances = sortableInstances.get(group);
+          if (!instances) {
+            instances = /* @__PURE__ */ new Set();
+            sortableInstances.set(group, instances);
           }
-          sortableInstances.set(sortable.index, sortable);
+          instances.add(sortable);
         }
       }
+      for (const [group, instances] of sortableInstances) {
+        sortableInstances.set(group, new Set(sort(instances)));
+      }
       return sortableInstances;
     };
     const unsubscribe = [
@@ -4114,38 +4757,56 @@ var OptimisticSortingPlugin = class extends Plugin {
           if (source.sortable === target.sortable) {
             return;
           }
-          if (source.sortable.group !== target.sortable.group) {
-            return;
-          }
-          const sortableInstances = getSortableInstances(source.sortable.group);
+          const instances = getSortableInstances();
+          const sameGroup = source.sortable.group === target.sortable.group;
+          const sourceInstances = instances.get(source.sortable.group);
+          const targetInstances = sameGroup ? sourceInstances : instances.get(target.sortable.group);
+          if (!sourceInstances || !targetInstances) return;
           manager2.renderer.rendering.then(() => {
-            var _a3;
-            for (const [index, sortable] of sortableInstances.entries()) {
-              if (sortable.index !== index) {
-                return;
+            var _a3, _b2, _c3;
+            const newInstances = getSortableInstances();
+            for (const [group, sortableInstances] of instances.entries()) {
+              const entries = Array.from(sortableInstances).entries();
+              for (const [index, sortable] of entries) {
+                if (sortable.index !== index || sortable.group !== group || !((_a3 = newInstances.get(group)) == null ? void 0 : _a3.has(sortable))) {
+                  return;
+                }
               }
             }
-            const orderedSortables = Array.from(
-              sortableInstances.values()
-            ).sort((a2, b2) => a2.index - b2.index);
-            const sourceIndex = orderedSortables.indexOf(source.sortable);
-            const targetIndex = orderedSortables.indexOf(target.sortable);
-            const newOrder = arrayMove$1(
-              orderedSortables,
-              sourceIndex,
-              targetIndex
-            );
-            const sourceElement = (_a3 = source.sortable.droppable.internal.element.peek()) != null ? _a3 : source.sortable.droppable.placeholder;
-            const targetElement = target.element;
+            const sourceElement = source.sortable.element;
+            const targetElement = target.sortable.element;
             if (!targetElement || !sourceElement) {
               return;
             }
+            if (!sameGroup && target.id === source.sortable.group) {
+              return;
+            }
+            const orderedSourceSortables = sort(sourceInstances);
+            const orderedTargetSortables = sameGroup ? orderedSourceSortables : sort(targetInstances);
+            const sourceGroup = (_b2 = source.sortable.group) != null ? _b2 : defaultGroup;
+            const targetGroup = (_c3 = target.sortable.group) != null ? _c3 : defaultGroup;
+            const state = {
+              [sourceGroup]: orderedSourceSortables,
+              [targetGroup]: orderedTargetSortables
+            };
+            const newState = move$1(state, event);
+            if (state === newState) return;
+            const sourceIndex = newState[targetGroup].indexOf(source.sortable);
+            const targetIndex = newState[targetGroup].indexOf(target.sortable);
             reorder(sourceElement, sourceIndex, targetElement, targetIndex);
+            manager2.collisionObserver.disable();
             r(() => {
-              for (const [index, sortable] of newOrder.entries()) {
+              for (const [index, sortable] of newState[sourceGroup].entries()) {
                 sortable.index = index;
               }
+              if (!sameGroup) {
+                for (const [index, sortable] of newState[targetGroup].entries()) {
+                  sortable.group = target.sortable.group;
+                  sortable.index = index;
+                }
+              }
             });
+            manager2.actions.setDropTarget(source.id).then(() => manager2.collisionObserver.enable());
           });
         });
       }),
@@ -4158,35 +4819,44 @@ var OptimisticSortingPlugin = class extends Plugin {
         if (!isSortable(source)) {
           return;
         }
-        if (source.sortable.initialIndex === source.sortable.index) {
+        if (source.sortable.initialIndex === source.sortable.index && source.sortable.initialGroup === source.sortable.group) {
           return;
         }
         queueMicrotask(() => {
-          const sortableInstances = getSortableInstances(source.sortable.group);
+          const instances = getSortableInstances();
+          const initialGroupInstances = instances.get(
+            source.sortable.initialGroup
+          );
+          if (!initialGroupInstances) return;
           manager2.renderer.rendering.then(() => {
             var _a3;
-            for (const [index, sortable] of sortableInstances.entries()) {
-              if (sortable.index !== index) {
-                return;
+            for (const [group, sortableInstances] of instances.entries()) {
+              const entries = Array.from(sortableInstances).entries();
+              for (const [index, sortable] of entries) {
+                if (sortable.index !== index || sortable.group !== group) {
+                  return;
+                }
               }
             }
-            const orderedSortables = Array.from(
-              sortableInstances.values()
-            ).sort((a2, b2) => a2.index - b2.index);
-            const sourceElement = source.sortable.droppable.element;
-            const targetElement = (_a3 = orderedSortables[source.sortable.initialIndex]) == null ? void 0 : _a3.element;
+            const initialGroup = sort(initialGroupInstances);
+            const sourceElement = source.sortable.element;
+            const targetElement = (_a3 = initialGroup[source.sortable.initialIndex]) == null ? void 0 : _a3.element;
             if (!targetElement || !sourceElement) {
               return;
             }
             reorder(
               sourceElement,
-              source.sortable.index,
+              source.sortable.initialIndex,
               targetElement,
               source.sortable.initialIndex
             );
             r(() => {
-              for (const sortable of orderedSortables.values()) {
-                sortable.index = sortable.initialIndex;
+              for (const [_2, sortableInstances] of instances.entries()) {
+                const entries = Array.from(sortableInstances).values();
+                for (const sortable of entries) {
+                  sortable.index = sortable.initialIndex;
+                  sortable.group = sortable.initialGroup;
+                }
               }
             });
           });
@@ -4201,9 +4871,15 @@ var OptimisticSortingPlugin = class extends Plugin {
   }
 };
 function reorder(sourceElement, sourceIndex, targetElement, targetIndex) {
-  const position = targetIndex < sourceIndex ? "beforebegin" : "afterend";
+  const position = targetIndex < sourceIndex ? "afterend" : "beforebegin";
   targetElement.insertAdjacentElement(position, sourceElement);
 }
+function sortByIndex(a2, b2) {
+  return a2.index - b2.index;
+}
+function sort(instances) {
+  return Array.from(instances).sort(sortByIndex);
+}
 var defaultPlugins = [
   SortableKeyboardPlugin,
   OptimisticSortingPlugin
@@ -4213,12 +4889,34 @@ var defaultSortableTransition = {
   easing: "cubic-bezier(0.25, 1, 0.5, 1)",
   idle: false
 };
-var _group_dec, _index_dec, _init, _index, _group;
+var _group_dec, _index_dec, _init, _index, _group, _element;
 _index_dec = [reactive], _group_dec = [reactive];
 var Sortable2 = class {
   constructor(_a3, manager) {
     __privateAdd(this, _index, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __privateAdd(this, _group, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _element);
+    this.register = () => {
+      r(() => {
+        var _a4, _b3;
+        (_a4 = this.manager) == null ? void 0 : _a4.registry.register(this.droppable);
+        (_b3 = this.manager) == null ? void 0 : _b3.registry.register(this.draggable);
+      });
+      return () => this.unregister();
+    };
+    this.unregister = () => {
+      r(() => {
+        var _a4, _b3;
+        (_a4 = this.manager) == null ? void 0 : _a4.registry.unregister(this.droppable);
+        (_b3 = this.manager) == null ? void 0 : _b3.registry.unregister(this.draggable);
+      });
+    };
+    this.destroy = () => {
+      r(() => {
+        this.droppable.destroy();
+        this.draggable.destroy();
+      });
+    };
     var _b2 = _a3, {
       effects: inputEffects = () => [],
       group,
@@ -4236,6 +4934,7 @@ var Sortable2 = class {
       "transition",
       "plugins"
     ]);
+    let previousGroup = group;
     this.droppable = new SortableDroppable(input, manager, this);
     this.draggable = new SortableDraggable(
       __spreadProps$3(__spreadValues$3({}, input), {
@@ -4244,16 +4943,17 @@ var Sortable2 = class {
             var _a22;
             return (_a22 = this.manager) == null ? void 0 : _a22.monitor.addEventListener("dragstart", () => {
               this.initialIndex = this.index;
+              this.initialGroup = this.group;
               this.previousIndex = this.index;
             });
           },
           () => {
-            const { index: index2, previousIndex, manager: _2 } = this;
-            if (index2 === previousIndex) {
-              return;
+            const { index: index2, group: group2, previousIndex, manager: _2 } = this;
+            if (index2 !== previousIndex || group2 !== previousGroup) {
+              this.previousIndex = index2;
+              previousGroup = group2;
+              this.animate();
             }
-            this.previousIndex = index2;
-            this.animate();
           },
           () => {
             const { target } = this;
@@ -4283,10 +4983,6 @@ var Sortable2 = class {
     this.group = group;
     this.type = type;
     this.transition = transition;
-    this.destroy = () => {
-      this.draggable.destroy();
-      this.droppable.destroy();
-    };
   }
   animate() {
     n(() => {
@@ -4297,8 +4993,8 @@ var Sortable2 = class {
       if (!shape || !transition || idle && !transition.idle) {
         return;
       }
-      scheduler.schedule(() => {
-        const { element } = this.droppable;
+      manager.renderer.rendering.then(() => {
+        const { element } = this;
         if (!element) {
           return;
         }
@@ -4306,28 +5002,32 @@ var Sortable2 = class {
         if (!updatedShape) {
           return;
         }
-        const delta = {
-          x: shape.boundingRectangle.left - updatedShape.boundingRectangle.left,
-          y: shape.boundingRectangle.top - updatedShape.boundingRectangle.top
-        };
-        const { x, y: y2, z } = computeTranslate(element);
-        if (delta.x || delta.y) {
-          animateTransform({
-            element,
-            keyframes: {
-              translate: [
-                `${x + delta.x}px ${y2 + delta.y}px ${z}`,
-                `${x}px ${y2}px ${z}`
-              ]
-            },
-            options: transition,
-            onFinish: () => {
-              if (idle) {
-                this.droppable.shape = void 0;
+        queueMicrotask(() => {
+          const delta = {
+            x: shape.boundingRectangle.left - updatedShape.boundingRectangle.left,
+            y: shape.boundingRectangle.top - updatedShape.boundingRectangle.top
+          };
+          const { translate } = getComputedStyles(element);
+          const currentTranslate = computeTranslate(element, translate, false);
+          const finalTranslate = computeTranslate(element, translate);
+          if (delta.x || delta.y) {
+            animateTransform({
+              element,
+              keyframes: {
+                translate: [
+                  `${currentTranslate.x + delta.x}px ${currentTranslate.y + delta.y}px ${currentTranslate.z}`,
+                  `${finalTranslate.x}px ${finalTranslate.y}px ${finalTranslate.z}`
+                ]
+              },
+              options: transition,
+              onFinish: () => {
+                if (!manager.dragOperation.status.dragging) {
+                  this.droppable.shape = void 0;
+                }
               }
-            }
-          });
-        }
+            });
+          }
+        });
       });
     });
   }
@@ -4335,16 +5035,30 @@ var Sortable2 = class {
     return this.draggable.manager;
   }
   set manager(manager) {
-    this.draggable.manager = manager;
-    this.droppable.manager = manager;
+    r(() => {
+      this.draggable.manager = manager;
+      this.droppable.manager = manager;
+    });
   }
   set element(element) {
-    this.draggable.element = element;
-    this.droppable.element = element;
+    r(() => {
+      const previousElement = __privateGet(this, _element);
+      const droppableElement = this.droppable.element;
+      const draggableElement = this.draggable.element;
+      if (!droppableElement || droppableElement === previousElement) {
+        this.droppable.element = element;
+      }
+      if (!draggableElement || draggableElement === previousElement) {
+        this.draggable.element = element;
+      }
+      __privateSet(this, _element, element);
+    });
   }
   get element() {
-    var _a3;
-    return (_a3 = this.droppable.element) != null ? _a3 : this.draggable.element;
+    var _a3, _b2;
+    const element = __privateGet(this, _element);
+    if (!element) return;
+    return (_b2 = (_a3 = ProxiedElements.get(element)) != null ? _a3 : element) != null ? _b2 : this.droppable.element;
   }
   set target(target) {
     this.droppable.element = target;
@@ -4366,14 +5080,14 @@ var Sortable2 = class {
   }
   set disabled(value) {
     r(() => {
-      this.draggable.disabled = value;
       this.droppable.disabled = value;
+      this.draggable.disabled = value;
     });
   }
   set data(data) {
     r(() => {
-      this.draggable.data = data;
       this.droppable.data = data;
+      this.draggable.data = data;
     });
   }
   set handle(handle) {
@@ -4381,8 +5095,8 @@ var Sortable2 = class {
   }
   set id(id) {
     r(() => {
-      this.draggable.id = id;
       this.droppable.id = id;
+      this.draggable.id = id;
     });
   }
   get id() {
@@ -4392,14 +5106,16 @@ var Sortable2 = class {
     this.draggable.sensors = value;
   }
   set collisionPriority(value) {
-    this.droppable.collisionPriority = value != null ? value : CollisionPriority.Normal;
+    this.droppable.collisionPriority = value;
   }
   set collisionDetector(value) {
     this.droppable.collisionDetector = value != null ? value : defaultCollisionDetection;
   }
   set type(type) {
-    this.draggable.type = type;
-    this.droppable.type = type;
+    r(() => {
+      this.droppable.type = type;
+      this.draggable.type = type;
+    });
   }
   get type() {
     return this.draggable.type;
@@ -4422,31 +5138,17 @@ var Sortable2 = class {
   get status() {
     return this.draggable.status;
   }
-  refreshShape(ignoreTransforms = false) {
-    return this.droppable.refreshShape(ignoreTransforms);
+  refreshShape() {
+    return this.droppable.refreshShape();
   }
   accepts(draggable) {
     return this.droppable.accepts(draggable);
   }
-  register() {
-    var _a3, _b2;
-    (_a3 = this.manager) == null ? void 0 : _a3.registry.register(this.draggable);
-    (_b2 = this.manager) == null ? void 0 : _b2.registry.register(this.droppable);
-    return () => this.unregister();
-  }
-  unregister() {
-    var _a3, _b2;
-    (_a3 = this.manager) == null ? void 0 : _a3.registry.unregister(this.draggable);
-    (_b2 = this.manager) == null ? void 0 : _b2.registry.unregister(this.droppable);
-  }
-  destroy() {
-    this.draggable.destroy();
-    this.droppable.destroy();
-  }
 };
 _init = __decoratorStart();
 _index = /* @__PURE__ */ new WeakMap();
 _group = /* @__PURE__ */ new WeakMap();
+_element = /* @__PURE__ */ new WeakMap();
 __decorateElement(_init, 4, "index", _index_dec, Sortable2, _index);
 __decorateElement(_init, 4, "group", _group_dec, Sortable2, _group);
 __decoratorMetadata(_init, Sortable2);
@@ -4455,24 +5157,15 @@ var SortableDraggable = class extends Draggable$1 {
     super(input, manager);
     this.sortable = sortable;
   }
-  get index() {
-    return this.sortable.index;
-  }
 };
 var SortableDroppable = class extends Droppable2 {
   constructor(input, manager, sortable) {
     super(input, manager);
     this.sortable = sortable;
   }
-  refreshShape(ignoreTransforms = false) {
-    return super.refreshShape(ignoreTransforms);
-  }
-  get index() {
-    return this.sortable.index;
-  }
 };
 function useConstant(initializer) {
-  const ref = useRef();
+  const ref = useRef(null);
   if (!ref.current) {
     ref.current = initializer();
   }
@@ -4480,15 +5173,14 @@ function useConstant(initializer) {
 }
 var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
-function useSignal(signalOrValue, sync = false) {
-  const sig = useConstant(
-    () => signalOrValue instanceof u ? signalOrValue : d(signalOrValue)
-  );
-  let val = sig.peek();
+function useSignal(signal, sync = false) {
+  let val = signal.peek();
+  const read = useRef(false);
   const update = useState(val)[1];
   useIsomorphicLayoutEffect(
     () => E(() => {
-      if (val !== (val = sig.value)) {
+      if (val !== (val = signal.value)) {
+        if (!read.current) return;
         if (sync) {
           reactDomExports.flushSync(() => update(val));
         } else {
@@ -4496,13 +5188,20 @@ function useSignal(signalOrValue, sync = false) {
         }
       }
     }),
-    [sync]
+    [signal, sync]
   );
-  return sig;
+  return {
+    get value() {
+      read.current = true;
+      return signal.value;
+    }
+  };
 }
-function useComputed(compute, sync = false) {
+function useComputed(compute, dependencies = [], sync = false) {
+  const $compute = useRef(compute);
+  $compute.current = compute;
   return useSignal(
-    useConstant(() => computed(compute)),
+    useMemo(() => computed(() => $compute.current()), dependencies),
     sync
   );
 }
@@ -4558,19 +5257,23 @@ var DragDropContext = createContext(
 function useRenderer() {
   const [_2, startTransition2] = useTransition();
   const [transitionCount, setTransitionCount] = useState(0);
-  const rendering = useRef();
-  const resolver = useRef();
+  const rendering = useRef(null);
+  const resolver = useRef(null);
   const renderer = useConstant(() => ({
     get rendering() {
       var _a3;
       return (_a3 = rendering.current) != null ? _a3 : Promise.resolve();
     }
   }));
-  useOnValueChange(transitionCount, () => {
-    var _a3;
-    (_a3 = resolver.current) == null ? void 0 : _a3.call(resolver);
-    rendering.current = void 0;
-  });
+  useOnValueChange(
+    transitionCount,
+    () => {
+      var _a3;
+      (_a3 = resolver.current) == null ? void 0 : _a3.call(resolver);
+      rendering.current = null;
+    },
+    useLayoutEffect
+  );
   return {
     renderer,
     trackRendering(callback) {
@@ -4660,7 +5363,7 @@ function DragDropProvider(_a3) {
     );
     startTransition(() => setManager(manager2));
     return manager2.destroy;
-  }, [renderer]);
+  }, [renderer, input.manager]);
   useOnValueChange(
     plugins,
     () => manager && (manager.plugins = plugins != null ? plugins : defaultPreset.plugins)
@@ -4681,13 +5384,11 @@ function useDragDropManager() {
 function useInstance(initializer) {
   var _a3;
   const manager = (_a3 = useDragDropManager()) != null ? _a3 : void 0;
-  const [instance] = useState(
-    () => initializer(manager === defaultManager ? void 0 : manager)
-  );
-  useEffect(() => {
+  const [instance] = useState(() => initializer(void 0));
+  if (instance.manager !== manager) {
     instance.manager = manager;
-    return instance.register();
-  }, [instance, manager]);
+  }
+  useIsomorphicLayoutEffect(instance.register, [manager, instance]);
   return instance;
 }
 var __defProp$2 = Object.defineProperty;
@@ -4698,7 +5399,7 @@ var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
 var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$2 = (a2, b2) => {
-  for (var prop in b2 || (b2 = {}))
+  for (var prop in b2)
     if (__hasOwnProp$2.call(b2, prop))
       __defNormalProp$2(a2, prop, b2[prop]);
   if (__getOwnPropSymbols$2)
@@ -4724,11 +5425,10 @@ function useSortable(input) {
     transition = defaultSortableTransition,
     type
   } = input;
-  const manager = useDragDropManager();
   const handle = currentValue(input.handle);
   const element = currentValue(input.element);
   const target = currentValue(input.target);
-  const sortable = useInstance((manager2) => {
+  const sortable = useInstance((manager) => {
     return new Sortable2(
       __spreadProps$2(__spreadValues$2({}, input), {
         handle,
@@ -4736,16 +5436,20 @@ function useSortable(input) {
         target,
         feedback
       }),
-      manager2
+      manager
     );
   });
-  const isDropTarget = useComputed(() => sortable.isDropTarget);
-  const isDragSource = useComputed(() => sortable.isDragSource);
-  const status = useComputed(() => sortable.status);
+  const isDropTarget = useComputed(() => sortable.isDropTarget, [sortable]);
+  const isDragSource = useComputed(() => sortable.isDragSource, [sortable]);
+  const status = useComputed(() => sortable.status, [sortable]);
   useOnValueChange(id, () => sortable.id = id);
-  useOnValueChange(index, () => sortable.index = index, useIsomorphicLayoutEffect);
+  useIsomorphicLayoutEffect(() => {
+    r(() => {
+      sortable.group = group;
+      sortable.index = index;
+    });
+  }, [sortable, group, index]);
   useOnValueChange(type, () => sortable.type = type);
-  useOnValueChange(group, () => sortable.group = group);
   useOnValueChange(
     accept,
     () => sortable.accept = accept,
@@ -4756,7 +5460,8 @@ function useSortable(input) {
   useOnValueChange(
     index,
     () => {
-      if ((manager == null ? void 0 : manager.dragOperation.status.idle) && transition) {
+      var _a3;
+      if (((_a3 = sortable.manager) == null ? void 0 : _a3.dragOperation.status.idle) && (transition == null ? void 0 : transition.idle)) {
         sortable.refreshShape();
       }
     },
@@ -4795,18 +5500,30 @@ function useSortable(input) {
     ),
     ref: useCallback(
       (element2) => {
+        var _a3, _b2;
+        if (!element2 && ((_a3 = sortable.element) == null ? void 0 : _a3.isConnected) && !((_b2 = sortable.manager) == null ? void 0 : _b2.dragOperation.status.idle)) {
+          return;
+        }
         sortable.element = element2 != null ? element2 : void 0;
       },
       [sortable]
     ),
     sourceRef: useCallback(
       (element2) => {
+        var _a3, _b2;
+        if (!element2 && ((_a3 = sortable.source) == null ? void 0 : _a3.isConnected) && !((_b2 = sortable.manager) == null ? void 0 : _b2.dragOperation.status.idle)) {
+          return;
+        }
         sortable.source = element2 != null ? element2 : void 0;
       },
       [sortable]
     ),
     targetRef: useCallback(
       (element2) => {
+        var _a3, _b2;
+        if (!element2 && ((_a3 = sortable.target) == null ? void 0 : _a3.isConnected) && !((_b2 = sortable.manager) == null ? void 0 : _b2.dragOperation.status.idle)) {
+          return;
+        }
         sortable.target = element2 != null ? element2 : void 0;
       },
       [sortable]
@@ -4896,17 +5613,17 @@ var _RestrictToElement = class _RestrictToElement2 extends Modifier {
         if (!target) {
           return;
         }
-        let timeout;
+        let timeout2;
         const updateBoundingRectangle = () => {
           this.boundingRectangle.value = getBoundingRectangle(target);
         };
         const handleScroll = () => {
-          if (timeout) {
+          if (timeout2) {
             return;
           }
-          timeout = setTimeout(() => {
+          timeout2 = setTimeout(() => {
             updateBoundingRectangle();
-            timeout = void 0;
+            timeout2 = void 0;
           }, 25);
         };
         const resizeObserver = new ResizeObserver(updateBoundingRectangle);
@@ -4975,8 +5692,11 @@ function arrayMove(array, from, to) {
   newArray.splice(to, 0, newArray.splice(from, 1)[0]);
   return newArray;
 }
-function mutate(items, source, target, mutation) {
-  if (!source || !target) {
+function mutate(items, event, mutation) {
+  var _a3, _b2;
+  const { source, target, canceled } = event.operation;
+  if (!source || !target || canceled || source.id === target.id) {
+    if ("preventDefault" in event) event.preventDefault();
     return items;
   }
   const findIndex = (item, id) => item === id || typeof item === "object" && "id" in item && item.id === id;
@@ -4986,20 +5706,14 @@ function mutate(items, source, target, mutation) {
     if (sourceIndex2 === -1 || targetIndex2 === -1) {
       return items;
     }
-    if (source.manager) {
-      const { dragOperation: dragOperation2 } = source.manager;
-      if (!dragOperation2.canceled && "index" in source && typeof source.index === "number") {
-        const projectedSourceIndex = source.index;
-        if (projectedSourceIndex !== sourceIndex2) {
-          return mutation(items, sourceIndex2, projectedSourceIndex);
-        }
+    if (!canceled && "index" in source && typeof source.index === "number") {
+      const projectedSourceIndex = source.index;
+      if (projectedSourceIndex !== sourceIndex2) {
+        return mutation(items, sourceIndex2, projectedSourceIndex);
       }
     }
     return mutation(items, sourceIndex2, targetIndex2);
   }
-  if (source.id === target.id) {
-    return items;
-  }
   const entries = Object.entries(items);
   let sourceIndex = -1;
   let sourceParent;
@@ -5024,7 +5738,7 @@ function mutate(items, source, target, mutation) {
   }
   if (!source.manager) return items;
   const { dragOperation } = source.manager;
-  const position = dragOperation.position.current;
+  const position = (_b2 = (_a3 = dragOperation.shape) == null ? void 0 : _a3.current.center) != null ? _b2 : dragOperation.position.current;
   if (targetParent == null) {
     if (target.id in items) {
       const insertionIndex = target.shape && position.y > target.shape.center.y ? items[target.id].length : 0;
@@ -5032,7 +5746,8 @@ function mutate(items, source, target, mutation) {
       targetIndex = insertionIndex;
     }
   }
-  if (sourceParent == null || targetParent == null) {
+  if (sourceParent == null || targetParent == null || sourceParent === targetParent && sourceIndex === targetIndex) {
+    if ("preventDefault" in event) event.preventDefault();
     return items;
   }
   if (sourceParent === targetParent) {
@@ -5040,7 +5755,7 @@ function mutate(items, source, target, mutation) {
       [sourceParent]: mutation(items[sourceParent], sourceIndex, targetIndex)
     });
   }
-  const isBelowTarget = target.shape && position.y > target.shape.boundingRectangle.bottom;
+  const isBelowTarget = target.shape && Math.round(position.y) > Math.round(target.shape.center.y);
   const modifier = isBelowTarget ? 1 : 0;
   const sourceItem = items[sourceParent][sourceIndex];
   return __spreadProps(__spreadValues({}, items), {
@@ -5055,8 +5770,8 @@ function mutate(items, source, target, mutation) {
     ]
   });
 }
-function move(items, source, target) {
-  return mutate(items, source, target, arrayMove);
+function move(items, event) {
+  return mutate(items, event, arrayMove);
 }
 const fixIds = (items, itemIdBase) => {
   return (items == null ? void 0 : items.map((item, i2) => ({
@@ -5148,7 +5863,7 @@ const Draggable3 = (props) => {
             if (!source || !target) {
               return;
             }
-            setItems((items2) => move(items2, source, target));
+            setItems((items2) => move(items2, source));
           },
           onDragEnd: ({ operation: { source, target }, canceled }) => {
             if (canceled) {
@@ -5157,7 +5872,7 @@ const Draggable3 = (props) => {
             if (!source || !target) {
               return;
             }
-            setItems((items2) => move(items2, source, target));
+            setItems((items2) => move(items2, source));
             onChange(items);
           },
           children: items.map((item, index) => /* @__PURE__ */ jsx(