@eightshift/ui-components 2.0.1 → 3.0.0

package/dist/components/draggable/draggable.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useEffect, useLayoutEffect, useMemo, useState, createContext, startTransition, useTransition, useContext, useCallback, useId } from "react";
+import { useRef, useEffect, useLayoutEffect, useMemo, useState, useCallback, createContext, startTransition, useTransition, useContext, useId } from "react";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { DraggableContext } from "./draggable-context.js";
 import { r as reactDomExports } from "../../index-BRp93Yfa.js";
@@ -449,8 +449,8 @@ var __spreadValues$6 = (a2, b2) => {
 };
 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 _a4;
+  return [, , , __create$3((_a4 = void 0) != null ? _a4 : null)];
 };
 var __decoratorStrings$3 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
 var __expectFn$3 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$4("Function expected") : fn;
@@ -596,9 +596,35 @@ var Rectangle = class _Rectangle {
     const { left, width } = this;
     return left + width;
   }
+  get aspectRatio() {
+    const { width, height } = this;
+    return width / height;
+  }
+  get corners() {
+    return [
+      { x: this.left, y: this.top },
+      { x: this.right, y: this.top },
+      { x: this.left, y: this.bottom },
+      { x: this.right, y: this.bottom }
+    ];
+  }
   static from({ top, left, width, height }) {
     return new _Rectangle(left, top, width, height);
   }
+  static delta(a2, b2, alignment = { x: "center", y: "center" }) {
+    const getCoordinate = (rect, axis) => {
+      const align = alignment[axis];
+      const start = axis === "x" ? rect.left : rect.top;
+      const size = axis === "x" ? rect.width : rect.height;
+      if (align == "start") return start;
+      if (align == "end") return start + size;
+      return start + size / 2;
+    };
+    return Point.delta(
+      { x: getCoordinate(a2, "x"), y: getCoordinate(a2, "y") },
+      { x: getCoordinate(b2, "x"), y: getCoordinate(b2, "y") }
+    );
+  }
   static intersectionRatio(a2, b2) {
     return _Rectangle.from(a2).intersectionRatio(_Rectangle.from(b2));
   }
@@ -760,8 +786,8 @@ var __objRest$3 = (source, exclude) => {
   return target;
 };
 var __decoratorStart$2 = (base) => {
-  var _a3;
-  return [, , , __create$2((_a3 = base == null ? void 0 : base[__knownSymbol$2("metadata")]) != null ? _a3 : null)];
+  var _a4;
+  return [, , , __create$2((_a4 = base == null ? void 0 : base[__knownSymbol$2("metadata")]) != null ? _a4 : null)];
 };
 var __decoratorStrings$2 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
 var __expectFn$2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$3("Function expected") : fn;
@@ -801,15 +827,15 @@ var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "rea
 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) {
+function configure(plugin, options2) {
   return {
     plugin,
-    options
+    options: options2
   };
 }
 function configurator(plugin) {
-  return (options) => {
-    return configure(plugin, options);
+  return (options2) => {
+    return configure(plugin, options2);
   };
 }
 function descriptor(plugin) {
@@ -821,13 +847,14 @@ function descriptor(plugin) {
   }
   return plugin;
 }
-var _disabled_dec, _init$2, _disabled;
+var _disabled_dec, _init$2, _disabled, _cleanupFunctions$1;
 _disabled_dec = [reactive];
 var Plugin = class {
-  constructor(manager, options) {
+  constructor(manager, options2) {
     this.manager = manager;
-    this.options = options;
+    this.options = options2;
     __privateAdd$3(this, _disabled, __runInitializers$2(_init$2, 8, this, false)), __runInitializers$2(_init$2, 11, this);
+    __privateAdd$3(this, _cleanupFunctions$1, /* @__PURE__ */ new Set());
   }
   /**
    * Enable a disabled plugin instance.
@@ -855,25 +882,36 @@ var Plugin = class {
   /**
    * Configure a plugin instance with new options.
    */
-  configure(options) {
-    this.options = options;
+  configure(options2) {
+    this.options = options2;
+  }
+  /**
+   * Register an effect that will be cleaned up when the plugin instance is destroyed.
+   * Returns a cleanup function that can be used to dispose of the effect.
+   */
+  registerEffect(callback) {
+    const dispose = E(callback.bind(this));
+    __privateGet$3(this, _cleanupFunctions$1).add(dispose);
+    return dispose;
   }
   /**
    * Destroy a plugin instance.
    */
   destroy() {
+    __privateGet$3(this, _cleanupFunctions$1).forEach((cleanup) => cleanup());
   }
   /**
    * Configure a plugin constructor with options.
    * This method is used to configure the options that the
    * plugin constructor will use to create plugin instances.
    */
-  static configure(options) {
-    return configure(this, options);
+  static configure(options2) {
+    return configure(this, options2);
   }
 };
 _init$2 = __decoratorStart$2(null);
 _disabled = /* @__PURE__ */ new WeakMap();
+_cleanupFunctions$1 = /* @__PURE__ */ new WeakMap();
 __decorateElement$2(_init$2, 4, "disabled", _disabled_dec, Plugin, _disabled);
 __decoratorMetadata$2(_init$2, Plugin);
 var CorePlugin = class extends Plugin {
@@ -904,8 +942,8 @@ var PluginRegistry = class {
         this.unregister(plugin);
       }
     }
-    for (const { plugin, options } of descriptors) {
-      this.register(plugin, options);
+    for (const { plugin, options: options2 } of descriptors) {
+      this.register(plugin, options2);
     }
     __privateSet$3(this, _previousValues, constructors);
   }
@@ -913,12 +951,15 @@ var PluginRegistry = class {
     const instance = this.instances.get(plugin);
     return instance;
   }
-  register(plugin, options) {
+  register(plugin, options2) {
     const existingInstance = this.instances.get(plugin);
     if (existingInstance) {
+      if (existingInstance.options !== options2) {
+        existingInstance.options = options2;
+      }
       return existingInstance;
     }
-    const instance = new plugin(this.manager, options);
+    const instance = new plugin(this.manager, options2);
     this.instances.set(plugin, instance);
     return instance;
   }
@@ -961,10 +1002,14 @@ var CollisionObserver = class extends Plugin {
         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;
+        if (collisions !== DEFAULT_VALUE) {
+          const previousCoordinates = __privateGet$3(this, _previousCoordinates);
+          __privateSet$3(this, _previousCoordinates, coordinates);
+          if (previousCoordinates && coordinates.x == previousCoordinates.x && coordinates.y == previousCoordinates.y) {
+            return;
+          }
+        } else {
+          __privateSet$3(this, _previousCoordinates, void 0);
         }
         __privateGet$3(this, _collisions).value = collisions;
       },
@@ -992,6 +1037,7 @@ var CollisionObserver = class extends Plugin {
       return DEFAULT_VALUE;
     }
     const collisions = [];
+    const potentialTargets = [];
     for (const entry of entries != null ? entries : registry.droppables) {
       if (entry.disabled) {
         continue;
@@ -1003,7 +1049,8 @@ var CollisionObserver = class extends Plugin {
       if (!detectCollision) {
         continue;
       }
-      entry.shape;
+      potentialTargets.push(entry);
+      void entry.shape;
       const collision = n(
         () => detectCollision({
           droppable: entry,
@@ -1017,6 +1064,9 @@ var CollisionObserver = class extends Plugin {
         collisions.push(collision);
       }
     }
+    if (potentialTargets.length === 0) {
+      return DEFAULT_VALUE;
+    }
     collisions.sort(sortCollisions);
     return collisions;
   }
@@ -1112,8 +1162,8 @@ var CollisionNotifier = class extends CorePlugin {
         }
         const [firstCollision] = collisions;
         n(() => {
-          var _a3;
-          if ((firstCollision == null ? void 0 : firstCollision.id) !== ((_a3 = manager.dragOperation.target) == null ? void 0 : _a3.id)) {
+          var _a4;
+          if ((firstCollision == null ? void 0 : firstCollision.id) !== ((_a4 = manager.dragOperation.target) == null ? void 0 : _a4.id)) {
             collisionObserver.disable();
             manager.actions.setDropTarget(firstCollision == null ? void 0 : firstCollision.id).then(() => {
               collisionObserver.enable();
@@ -1152,14 +1202,14 @@ var Entity = class {
     __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;
+    const { effects: effects5, id, data = {}, disabled = false, register = true } = input;
     let previousId = id;
     this.manager = manager;
     this.id = id;
     this.data = data;
     this.disabled = disabled;
     this.effects = () => {
-      var _a3;
+      var _a4;
       return [
         () => {
           const { id: id2, manager: manager2 } = this;
@@ -1169,17 +1219,14 @@ var Entity = class {
           manager2 == null ? void 0 : manager2.registry.register(this);
           return () => manager2 == null ? void 0 : manager2.registry.unregister(this);
         },
-        ...(_a3 = effects5 == null ? void 0 : effects5()) != null ? _a3 : []
+        ...(_a4 = effects5 == null ? void 0 : effects5()) != null ? _a4 : []
       ];
     };
     this.register = this.register.bind(this);
     this.unregister = this.unregister.bind(this);
     this.destroy = this.destroy.bind(this);
-    if (manager) {
-      queueMicrotask(() => {
-        var _a3;
-        return (_a3 = this.manager) == null ? void 0 : _a3.registry.register(this);
-      });
+    if (manager && register) {
+      queueMicrotask(this.register);
     }
   }
   /**
@@ -1187,24 +1234,24 @@ var Entity = class {
    * @returns CleanupFunction | void
    */
   register() {
-    var _a3;
-    return (_a3 = this.manager) == null ? void 0 : _a3.registry.register(this);
+    var _a4;
+    return (_a4 = this.manager) == null ? void 0 : _a4.registry.register(this);
   }
   /**
    * A method that unregisters the entity from the manager.
    * @returns void
    */
   unregister() {
-    var _a3;
-    (_a3 = this.manager) == null ? void 0 : _a3.registry.unregister(this);
+    var _a4;
+    (_a4 = this.manager) == null ? void 0 : _a4.registry.unregister(this);
   }
   /**
    * A method that cleans up the entity when it is no longer needed.
    * @returns void
    */
   destroy() {
-    var _a3;
-    (_a3 = this.manager) == null ? void 0 : _a3.registry.unregister(this);
+    var _a4;
+    (_a4 = this.manager) == null ? void 0 : _a4.registry.unregister(this);
   }
 };
 _init2$1 = __decoratorStart$2(null);
@@ -1289,37 +1336,46 @@ var EntityRegistry = class {
     this.map.value = /* @__PURE__ */ new Map();
   }
 };
-var _isDragSource_dec, _status_dec, _type_dec, _modifiers_dec, _c$1, _init3$1, _modifiers, _type, _status;
-var Draggable$2 = class Draggable extends (_c$1 = Entity, _modifiers_dec = [reactive], _type_dec = [reactive], _status_dec = [reactive], _isDragSource_dec = [derived], _c$1) {
-  constructor(_a3, manager) {
-    var _b2 = _a3, { modifiers, type, sensors } = _b2, input = __objRest$3(_b2, ["modifiers", "type", "sensors"]);
+var _isDragSource_dec, _isDragging_dec, _isDropping_dec, _status_dec, _modifiers_dec, _type_dec, _c$1, _init3$1, _type, _modifiers, _status;
+var Draggable$2 = class Draggable extends (_c$1 = Entity, _type_dec = [reactive], _modifiers_dec = [reactive], _status_dec = [reactive], _isDropping_dec = [derived], _isDragging_dec = [derived], _isDragSource_dec = [derived], _c$1) {
+  constructor(_a4, manager) {
+    var _b2 = _a4, { modifiers, type, sensors } = _b2, input = __objRest$3(_b2, ["modifiers", "type", "sensors"]);
     super(input, manager);
     __runInitializers$2(_init3$1, 5, 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);
+    __privateAdd$3(this, _type, __runInitializers$2(_init3$1, 8, this)), __runInitializers$2(_init3$1, 11, this);
+    __privateAdd$3(this, _modifiers, __runInitializers$2(_init3$1, 12, this)), __runInitializers$2(_init3$1, 15, this);
+    __privateAdd$3(this, _status, __runInitializers$2(_init3$1, 16, this, this.isDragSource ? "dragging" : "idle")), __runInitializers$2(_init3$1, 19, this);
     this.type = type;
     this.sensors = sensors;
     this.modifiers = modifiers;
+    this.alignment = input.alignment;
+  }
+  get isDropping() {
+    return this.status === "dropping" && this.isDragSource;
+  }
+  get isDragging() {
+    return this.status === "dragging" && this.isDragSource;
   }
   get isDragSource() {
-    var _a3, _b2;
-    return ((_b2 = (_a3 = this.manager) == null ? void 0 : _a3.dragOperation.source) == null ? void 0 : _b2.id) === this.id;
+    var _a4, _b2;
+    return ((_b2 = (_a4 = this.manager) == null ? void 0 : _a4.dragOperation.source) == null ? void 0 : _b2.id) === this.id;
   }
 };
 _init3$1 = __decoratorStart$2(_c$1);
-_modifiers = /* @__PURE__ */ new WeakMap();
 _type = /* @__PURE__ */ new WeakMap();
+_modifiers = /* @__PURE__ */ new WeakMap();
 _status = /* @__PURE__ */ new WeakMap();
-__decorateElement$2(_init3$1, 4, "modifiers", _modifiers_dec, Draggable$2, _modifiers);
 __decorateElement$2(_init3$1, 4, "type", _type_dec, Draggable$2, _type);
+__decorateElement$2(_init3$1, 4, "modifiers", _modifiers_dec, Draggable$2, _modifiers);
 __decorateElement$2(_init3$1, 4, "status", _status_dec, Draggable$2, _status);
+__decorateElement$2(_init3$1, 2, "isDropping", _isDropping_dec, Draggable$2);
+__decorateElement$2(_init3$1, 2, "isDragging", _isDragging_dec, Draggable$2);
 __decorateElement$2(_init3$1, 2, "isDragSource", _isDragSource_dec, Draggable$2);
 __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, type } = _b2, input = __objRest$3(_b2, ["accept", "collisionDetector", "collisionPriority", "type"]);
+  constructor(_a4, manager) {
+    var _b2 = _a4, { accept, collisionDetector, collisionPriority, type } = _b2, input = __objRest$3(_b2, ["accept", "collisionDetector", "collisionPriority", "type"]);
     super(input, manager);
     __runInitializers$2(_init4$1, 5, this);
     __privateAdd$3(this, _accept, __runInitializers$2(_init4$1, 8, this)), __runInitializers$2(_init4$1, 11, this);
@@ -1355,8 +1411,8 @@ var Droppable$1 = class Droppable extends (_c2$1 = Entity, _accept_dec = [reacti
     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;
+    var _a4, _b2;
+    return ((_b2 = (_a4 = this.manager) == null ? void 0 : _a4.dragOperation.target) == null ? void 0 : _b2.id) === this.id;
   }
 };
 _init4$1 = __decoratorStart$2(_c2$1);
@@ -1373,17 +1429,17 @@ __decorateElement$2(_init4$1, 4, "shape", _shape_dec, Droppable$1, _shape);
 __decorateElement$2(_init4$1, 2, "isDropTarget", _isDropTarget_dec, Droppable$1);
 __decoratorMetadata$2(_init4$1, Droppable$1);
 var Sensor = class extends Plugin {
-  constructor(manager, options) {
-    super(manager, options);
+  constructor(manager, options2) {
+    super(manager, options2);
     this.manager = manager;
-    this.options = options;
+    this.options = options2;
   }
 };
 var Modifier = class extends Plugin {
-  constructor(manager, options) {
-    super(manager, options);
+  constructor(manager, options2) {
+    super(manager, options2);
     this.manager = manager;
-    this.options = options;
+    this.options = options2;
   }
   apply(operation) {
     return operation.transform;
@@ -1397,7 +1453,7 @@ var DragDropRegistry = class {
     this.sensors = new PluginRegistry(manager);
     this.modifiers = new PluginRegistry(manager);
   }
-  register(input, options) {
+  register(input, options2) {
     if (input instanceof Draggable$2) {
       return this.draggables.register(input.id, input);
     }
@@ -1405,13 +1461,13 @@ var DragDropRegistry = class {
       return this.droppables.register(input.id, input);
     }
     if (input.prototype instanceof Modifier) {
-      return this.modifiers.register(input, options);
+      return this.modifiers.register(input, options2);
     }
     if (input.prototype instanceof Sensor) {
-      return this.sensors.register(input, options);
+      return this.sensors.register(input, options2);
     }
     if (input.prototype instanceof Plugin) {
-      return this.plugins.register(input, options);
+      return this.plugins.register(input, options2);
     }
     throw new Error("Invalid instance type");
   }
@@ -1486,36 +1542,36 @@ function DragOperationManager(manager) {
   const dragended = d(true);
   let previousSource;
   const source = computed(() => {
-    var _a3;
+    var _a4;
     const identifier = sourceIdentifier.value;
     if (identifier == null) return null;
     const value = draggables.get(identifier);
     if (value) {
       previousSource = value;
     }
-    return (_a3 = value != null ? value : previousSource) != null ? _a3 : null;
+    return (_a4 = value != null ? value : previousSource) != null ? _a4 : null;
   });
   const target = computed(() => {
-    var _a3;
+    var _a4;
     const identifier = targetIdentifier.value;
-    return identifier != null ? (_a3 = droppables.get(identifier)) != null ? _a3 : null : null;
+    return identifier != null ? (_a4 = droppables.get(identifier)) != null ? _a4 : null : null;
   });
   const modifiers = d([]);
-  E(() => {
-    var _a3, _b2, _c3;
+  const dispose = E(() => {
+    var _a4, _b2, _c3;
     const currentModifiers = modifiers.peek();
-    if (currentModifiers !== manager.modifiers) {
+    if (!deepEqual(currentModifiers, manager.modifiers)) {
       currentModifiers.forEach((modifier) => modifier.destroy());
     }
-    modifiers.value = (_c3 = (_b2 = (_a3 = source.value) == null ? void 0 : _a3.modifiers) == null ? void 0 : _b2.map((modifier) => {
-      const { plugin, options } = descriptor(modifier);
-      return new plugin(manager, options);
+    modifiers.value = (_c3 = (_b2 = (_a4 = source.value) == null ? void 0 : _a4.modifiers) == null ? void 0 : _b2.map((modifier) => {
+      const { plugin, options: options2 } = descriptor(modifier);
+      return new plugin(manager, options2);
     })) != null ? _c3 : manager.modifiers;
   });
   const transform = computed(() => {
     const { x, y: y2 } = position.delta;
     let transform2 = { x, y: y2 };
-    const initialShape = shape.initial.peek();
+    const initialShape = shape.initial.value;
     const currentShape = shape.current.peek();
     const operation2 = {
       activatorEvent: activatorEvent.peek(),
@@ -1581,8 +1637,8 @@ function DragOperationManager(manager) {
       return initial && current ? { initial, current } : null;
     },
     set shape(value) {
-      var _a3;
-      if (value && ((_a3 = shape.current.peek()) == null ? void 0 : _a3.equals(value))) {
+      var _a4;
+      if (value && ((_a4 = shape.current.peek()) == null ? void 0 : _a4.equals(value))) {
         return;
       }
       const initial = shape.initial.peek();
@@ -1607,126 +1663,160 @@ function DragOperationManager(manager) {
       modifiers.value = [];
     });
   };
-  return {
-    operation,
-    actions: {
-      setDragSource(identifier) {
-        sourceIdentifier.value = identifier;
-      },
-      setDropTarget(identifier) {
-        const id = identifier != null ? identifier : null;
-        if (targetIdentifier.peek() === id) {
-          return Promise.resolve(false);
-        }
-        targetIdentifier.value = id;
-        const event = defaultPreventable({
-          operation: snapshot(operation)
-        });
-        if (status.peek() === "dragging") {
-          monitor.dispatch("dragover", event);
-        }
-        return manager.renderer.rendering.then(() => event.defaultPrevented);
-      },
-      start({ event, coordinates }) {
-        const sourceInstance = source.peek();
-        if (!sourceInstance) {
-          throw new Error(
-            "Cannot start a drag operation without a drag source"
-          );
+  const actions = {
+    setDragSource(identifier) {
+      sourceIdentifier.value = identifier;
+    },
+    setDropTarget(identifier) {
+      const id = identifier != null ? identifier : null;
+      if (targetIdentifier.peek() === id) {
+        return Promise.resolve(false);
+      }
+      targetIdentifier.value = id;
+      const event = defaultPreventable({
+        operation: snapshot(operation)
+      });
+      if (status.peek() === "dragging") {
+        monitor.dispatch("dragover", event);
+      }
+      return manager.renderer.rendering.then(() => event.defaultPrevented);
+    },
+    start({
+      event: nativeEvent,
+      coordinates
+    }) {
+      const sourceInstance = source.peek();
+      if (!sourceInstance) {
+        throw new Error("Cannot start a drag operation without a drag source");
+      }
+      r(() => {
+        shape.initial.value = null;
+        shape.current.value = null;
+        dragended.value = false;
+        canceled.value = false;
+        activatorEvent.value = nativeEvent != null ? nativeEvent : null;
+        position.reset(coordinates);
+      });
+      const beforeStartEvent = defaultPreventable({
+        operation: snapshot(operation)
+      });
+      monitor.dispatch("beforedragstart", beforeStartEvent);
+      manager.renderer.rendering.then(() => {
+        if (beforeStartEvent.defaultPrevented) {
+          reset();
+          return;
         }
-        r(() => {
-          shape.initial.value = null;
-          shape.current.value = null;
-          dragended.value = false;
-          canceled.value = false;
-          activatorEvent.value = event;
-          position.reset(coordinates);
-        });
-        const beforeStartEvent = defaultPreventable({
-          operation: snapshot(operation)
-        });
-        monitor.dispatch("beforedragstart", beforeStartEvent);
-        manager.renderer.rendering.then(() => {
-          if (beforeStartEvent.defaultPrevented) {
-            reset();
-            return;
-          }
-          status.value = "initializing";
-          requestAnimationFrame(() => {
-            status.value = "dragging";
-            monitor.dispatch("dragstart", {
-              operation: snapshot(operation),
-              cancelable: false
-            });
+        status.value = "initializing";
+        requestAnimationFrame(() => {
+          status.value = "dragging";
+          monitor.dispatch("dragstart", {
+            nativeEvent,
+            operation: snapshot(operation),
+            cancelable: false
           });
         });
-      },
-      move({
-        by,
-        to,
-        cancelable = true
-      }) {
-        if (!dragging.peek()) {
+      });
+    },
+    move({
+      by,
+      to,
+      event: nativeEvent,
+      cancelable = true,
+      propagate = true
+    }) {
+      if (!dragging.peek()) {
+        return;
+      }
+      const event = defaultPreventable(
+        {
+          nativeEvent,
+          operation: snapshot(operation),
+          by,
+          to
+        },
+        cancelable
+      );
+      if (propagate) {
+        monitor.dispatch("dragmove", event);
+      }
+      queueMicrotask(() => {
+        if (event.defaultPrevented) {
           return;
         }
-        const event = defaultPreventable(
-          {
-            operation: snapshot(operation),
-            by,
-            to
+        const coordinates = to != null ? to : {
+          x: position.current.x + by.x,
+          y: position.current.y + by.y
+        };
+        position.update(coordinates);
+      });
+    },
+    stop({
+      canceled: eventCanceled = false,
+      event: nativeEvent
+    } = {}) {
+      let promise;
+      const suspend = () => {
+        const output = {
+          resume: () => {
           },
-          cancelable
-        );
-        monitor.dispatch("dragmove", event);
-        queueMicrotask(() => {
-          if (event.defaultPrevented) {
-            return;
+          abort: () => {
           }
-          const coordinates = to != null ? to : {
-            x: position.current.x + by.x,
-            y: position.current.y + by.y
-          };
-          position.update(coordinates);
+        };
+        promise = new Promise((resolve, reject) => {
+          output.resume = resolve;
+          output.abort = reject;
         });
-      },
-      stop({ canceled: eventCanceled = false } = {}) {
-        let promise;
-        const suspend = () => {
-          const output = {
-            resume: () => {
-            },
-            abort: () => {
-            }
-          };
-          promise = new Promise((resolve, reject) => {
-            output.resume = resolve;
-            output.abort = reject;
+        return output;
+      };
+      const end = () => {
+        manager.renderer.rendering.then(() => {
+          status.value = "dropped";
+          const dropping = n(() => {
+            var _a4;
+            return ((_a4 = source.value) == null ? void 0 : _a4.status) === "dropping";
           });
-          return output;
-        };
-        const end = () => {
-          manager.renderer.rendering.then(() => {
-            status.value = "dropped";
+          if (dropping) {
+            const currentSource = source.value;
+            const dispose2 = E(() => {
+              if ((currentSource == null ? void 0 : currentSource.status) === "idle") {
+                dispose2();
+                if (source.value !== currentSource) return;
+                reset();
+              }
+            });
+          } else {
             manager.renderer.rendering.then(reset);
-          });
-        };
-        r(() => {
-          dragended.value = true;
-          canceled.value = eventCanceled;
-        });
-        monitor.dispatch("dragend", {
-          operation: snapshot(operation),
-          canceled: eventCanceled,
-          suspend
+          }
         });
-        if (promise) {
-          promise.then(end).catch(reset);
-        } else {
-          end();
-        }
+      };
+      r(() => {
+        dragended.value = true;
+        canceled.value = eventCanceled;
+      });
+      monitor.dispatch("dragend", {
+        nativeEvent,
+        operation: snapshot(operation),
+        canceled: eventCanceled,
+        suspend
+      });
+      if (promise) {
+        promise.then(end).catch(reset);
+      } else {
+        end();
       }
     }
   };
+  return {
+    operation,
+    actions,
+    cleanup() {
+      if (status.peek() !== "idle") {
+        actions.stop({ canceled: true });
+      }
+      modifiers.value.forEach((modifier) => modifier.destroy());
+      dispose();
+    }
+  };
 }
 function snapshot(obj) {
   return __spreadValues$5({}, obj);
@@ -1738,6 +1828,10 @@ var defaultRenderer = {
 };
 var DragDropManager$1 = class DragDropManager {
   constructor(config) {
+    this.destroy = () => {
+      this.registry.destroy();
+      this.collisionObserver.destroy();
+    };
     const {
       plugins = [],
       sensors = [],
@@ -1749,14 +1843,18 @@ var DragDropManager$1 = class DragDropManager {
     this.registry = registry;
     this.monitor = monitor;
     this.renderer = renderer;
-    const { actions, operation } = DragOperationManager(this);
+    const { actions, operation, cleanup } = DragOperationManager(this);
     this.actions = actions;
     this.dragOperation = operation;
     this.collisionObserver = new CollisionObserver(this);
     this.plugins = [CollisionNotifier, ...plugins];
     this.modifiers = modifiers;
     this.sensors = sensors;
-    this.destroy = this.destroy.bind(this);
+    const { destroy } = this;
+    this.destroy = () => {
+      cleanup();
+      destroy();
+    };
   }
   get plugins() {
     return this.registry.plugins.values;
@@ -1776,10 +1874,6 @@ var DragDropManager$1 = class DragDropManager {
   set sensors(sensors) {
     this.registry.sensors.values = sensors;
   }
-  destroy() {
-    this.registry.destroy();
-    this.collisionObserver.destroy();
-  }
 };
 var pointerIntersection = ({
   dragOperation,
@@ -1828,8 +1922,8 @@ var shapeIntersection = ({
   return null;
 };
 var defaultCollisionDetection = (args) => {
-  var _a3;
-  return (_a3 = pointerIntersection(args)) != null ? _a3 : shapeIntersection(args);
+  var _a4;
+  return (_a4 = pointerIntersection(args)) != null ? _a4 : shapeIntersection(args);
 };
 var closestCorners = (input) => {
   const { dragOperation, droppable } = input;
@@ -1837,31 +1931,15 @@ var closestCorners = (input) => {
   if (!droppable.shape) {
     return null;
   }
-  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;
+  const shapeCorners = shape ? Rectangle.from(shape.current.boundingRectangle).corners : void 0;
+  const distance = Rectangle.from(
+    droppable.shape.boundingRectangle
+  ).corners.reduce(
+    (acc, corner, index) => {
+      var _a4;
       return acc + Point.distance(
         Point.from(corner),
-        (_a3 = shape == null ? void 0 : shape.current.center) != null ? _a3 : position.current
+        (_a4 = shapeCorners == null ? void 0 : shapeCorners[index]) != null ? _a4 : position.current
       );
     },
     0
@@ -1896,7 +1974,7 @@ function isNode(node) {
   return "nodeType" in node;
 }
 function getWindow(target) {
-  var _a3, _b2, _c3;
+  var _a4, _b2, _c3;
   if (!target) {
     return window;
   }
@@ -1907,7 +1985,7 @@ function getWindow(target) {
     return window;
   }
   if ("defaultView" in target) {
-    return (_a3 = target.defaultView) != null ? _a3 : window;
+    return (_a4 = target.defaultView) != null ? _a4 : window;
   }
   return (_c3 = (_b2 = target.ownerDocument) == null ? void 0 : _b2.defaultView) != null ? _c3 : window;
 }
@@ -1988,10 +2066,10 @@ function isOverflowVisible(element, style) {
   return overflow === "visible" && overflowX === "visible" && overflowY === "visible";
 }
 function getVisibleBoundingRectangle(element, boundingClientRect = element.getBoundingClientRect(), margin = 0) {
-  var _a3;
+  var _a4;
   let rect = boundingClientRect;
   const { ownerDocument } = element;
-  const ownerWindow = (_a3 = ownerDocument.defaultView) != null ? _a3 : window;
+  const ownerWindow = (_a4 = ownerDocument.defaultView) != null ? _a4 : window;
   let ancestor = element.parentElement;
   while (ancestor && ancestor !== ownerDocument.documentElement) {
     if (!isOverflowVisible(ancestor)) {
@@ -2050,7 +2128,7 @@ 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 }) {
+  constructor(element, callback, options2 = { debug: false }) {
     this.element = element;
     __privateAdd$2(this, _PositionObserver_instances);
     __privateAdd$2(this, _callback);
@@ -2062,9 +2140,9 @@ var PositionObserver = class {
     __privateAdd$2(this, _debug);
     __privateAdd$2(this, _disconnected, false);
     __privateAdd$2(this, _observePosition, throttle(() => {
-      var _a3, _b2, _c3;
+      var _a4, _b2, _c3;
       const { element: element2 } = this;
-      (_a3 = __privateGet$2(this, _positionObserver)) == null ? void 0 : _a3.disconnect();
+      (_a4 = __privateGet$2(this, _positionObserver)) == null ? void 0 : _a4.disconnect();
       if (__privateGet$2(this, _disconnected) || !__privateGet$2(this, _visible) || !element2.isConnected) {
         return;
       }
@@ -2104,7 +2182,7 @@ var PositionObserver = class {
     this.boundingClientRect = element.getBoundingClientRect();
     __privateSet$2(this, _visible, isVisible(element, this.boundingClientRect));
     const root = element.ownerDocument;
-    if (options == null ? void 0 : options.debug) {
+    if (options2 == null ? void 0 : options2.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";
@@ -2113,7 +2191,7 @@ var PositionObserver = class {
     }
     __privateSet$2(this, _visibilityObserver, new IntersectionObserver(
       (entries) => {
-        var _a3, _b2;
+        var _a4, _b2;
         const entry = entries[entries.length - 1];
         const { boundingClientRect, isIntersecting: visible } = entry;
         const { width, height } = boundingClientRect;
@@ -2121,7 +2199,7 @@ var PositionObserver = class {
         __privateSet$2(this, _visible, visible);
         if (!width && !height) return;
         if (previousVisible && !visible) {
-          (_a3 = __privateGet$2(this, _positionObserver)) == null ? void 0 : _a3.disconnect();
+          (_a4 = __privateGet$2(this, _positionObserver)) == null ? void 0 : _a4.disconnect();
           __privateGet$2(this, _callback).call(this, null);
           (_b2 = __privateGet$2(this, _resizeObserver)) == null ? void 0 : _b2.disconnect();
           __privateSet$2(this, _resizeObserver, void 0);
@@ -2145,9 +2223,9 @@ var PositionObserver = class {
     __privateGet$2(this, _visibilityObserver).observe(element);
   }
   disconnect() {
-    var _a3, _b2, _c3;
+    var _a4, _b2, _c3;
     __privateSet$2(this, _disconnected, true);
-    (_a3 = __privateGet$2(this, _resizeObserver)) == null ? void 0 : _a3.disconnect();
+    (_a4 = __privateGet$2(this, _resizeObserver)) == null ? void 0 : _a4.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();
@@ -2233,8 +2311,8 @@ var Listeners = class {
     this.entries = /* @__PURE__ */ new Set();
     this.clear = () => {
       for (const entry of this.entries) {
-        const [target, { type, listener, options }] = entry;
-        target.removeEventListener(type, listener, options);
+        const [target, { type, listener, options: options2 }] = entry;
+        target.removeEventListener(type, listener, options2);
       }
       this.entries.clear();
     };
@@ -2243,15 +2321,15 @@ var Listeners = class {
     const listeners = Array.isArray(input) ? input : [input];
     const entries = [];
     for (const descriptor2 of listeners) {
-      const { type, listener, options } = descriptor2;
+      const { type, listener, options: options2 } = descriptor2;
       const entry = [target, descriptor2];
-      target.addEventListener(type, listener, options);
+      target.addEventListener(type, listener, options2);
       this.entries.add(entry);
       entries.push(entry);
     }
     return function cleanup() {
-      for (const [target2, { type, listener, options }] of entries) {
-        target2.removeEventListener(type, listener, options);
+      for (const [target2, { type, listener, options: options2 }] of entries) {
+        target2.removeEventListener(type, listener, options2);
       }
     };
   }
@@ -2339,8 +2417,8 @@ function isScrollable(element, computedStyle = getComputedStyles(element)) {
 var defaultOptions = {
   excludeElement: true
 };
-function getScrollableAncestors(element, options = defaultOptions) {
-  const { limit, excludeElement } = options;
+function getScrollableAncestors(element, options2 = defaultOptions) {
+  const { limit, excludeElement } = options2;
   const scrollParents = /* @__PURE__ */ new Set();
   function findScrollableAncestors(node) {
     if (limit != null && scrollParents.size >= limit) {
@@ -2607,7 +2685,7 @@ var Styles = class {
 function animateTransform({
   element,
   keyframes,
-  options,
+  options: options2,
   onReady,
   onFinish
 }) {
@@ -2620,7 +2698,7 @@ function animateTransform({
     ).join(", ") : "none"
   });
   onReady == null ? void 0 : onReady();
-  element.animate(keyframes, options).finished.then(() => {
+  element.animate(keyframes, options2).finished.then(() => {
     onFinish == null ? void 0 : onFinish();
     styles.reset();
   });
@@ -2695,7 +2773,7 @@ function parseScale(scale) {
   };
 }
 function parseTransform(computedStyles) {
-  var _a3, _b2, _c3, _d2, _e, _f, _g, _h, _i;
+  var _a4, _b2, _c3, _d2, _e, _f, _g, _h, _i;
   const { scale, transform, translate } = computedStyles;
   const parsedScale = parseScale(scale);
   const parsedTranslate = parseTranslate(translate);
@@ -2704,7 +2782,7 @@ function parseTransform(computedStyles) {
     return null;
   }
   const normalizedScale = {
-    x: (_a3 = parsedScale == null ? void 0 : parsedScale.x) != null ? _a3 : 1,
+    x: (_a4 = parsedScale == null ? void 0 : parsedScale.x) != null ? _a4 : 1,
     y: (_b2 = parsedScale == null ? void 0 : parsedScale.y) != null ? _b2 : 1
   };
   const normalizedTranslate = {
@@ -2746,35 +2824,42 @@ function parseTransformMatrix(transform) {
   return null;
 }
 var DOMRectangle = class extends Rectangle {
-  constructor(element, options = {}) {
-    var _a3, _b2;
+  constructor(element, options2 = {}) {
+    var _a4, _b2, _c3, _d2;
     const {
       frameTransform = getFrameTransform(element),
       ignoreTransforms,
       getBoundingClientRect = getBoundingRectangle
-    } = options;
+    } = options2;
     const resetAnimations = forceFinishAnimations(element);
     const boundingRectangle = getBoundingClientRect(element);
     let { top, left, width, height } = boundingRectangle;
+    let updated;
     const computedStyles = getComputedStyles(element);
     const parsedTransform = parseTransform(computedStyles);
     const scale = {
-      x: (_a3 = parsedTransform == null ? void 0 : parsedTransform.scaleX) != null ? _a3 : 1,
+      x: (_a4 = parsedTransform == null ? void 0 : parsedTransform.scaleX) != null ? _a4 : 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(
+    if (parsedTransform) {
+      updated = inverseTransform(
         boundingRectangle,
         parsedTransform,
         computedStyles.transformOrigin
       );
-      top = updated.top;
-      left = updated.left;
-      width = updated.width;
-      height = updated.height;
+      if (ignoreTransforms || projectedTransform) {
+        top = updated.top;
+        left = updated.left;
+        width = updated.width;
+        height = updated.height;
+      }
     }
+    const intrinsic = {
+      width: (_c3 = updated == null ? void 0 : updated.width) != null ? _c3 : width,
+      height: (_d2 = updated == null ? void 0 : updated.height) != null ? _d2 : height
+    };
     if (projectedTransform && !ignoreTransforms) {
       top = top + projectedTransform.y;
       left = left + projectedTransform.x;
@@ -2795,10 +2880,12 @@ var DOMRectangle = class extends Rectangle {
     }
     super(left, top, width, height);
     this.scale = scale;
+    this.intrinsicWidth = intrinsic.width;
+    this.intrinsicHeight = intrinsic.height;
   }
 };
 function getProjectedTransform(element) {
-  var _a3;
+  var _a4;
   const { KeyframeEffect: KeyframeEffect2 } = getWindow(element);
   const animations = element.getAnimations();
   let projectedTransform = null;
@@ -2818,7 +2905,7 @@ function getProjectedTransform(element) {
         projectedTransform = projectedTransform ? {
           x: projectedTransform.x + parsedTransform.x,
           y: projectedTransform.y + parsedTransform.y,
-          z: (_a3 = projectedTransform.z) != null ? _a3 : parsedTransform.z,
+          z: (_a4 = projectedTransform.z) != null ? _a4 : parsedTransform.z,
           scaleX: projectedTransform.scaleX * parsedTransform.scaleX,
           scaleY: projectedTransform.scaleY * parsedTransform.scaleY
         } : parsedTransform;
@@ -2912,8 +2999,8 @@ var __objRest$2 = (source, exclude) => {
   return target;
 };
 var __decoratorStart$1 = (base) => {
-  var _a3;
-  return [, , , __create$1((_a3 = base == null ? void 0 : base[__knownSymbol$1("metadata")]) != null ? _a3 : null)];
+  var _a4;
+  return [, , , __create$1((_a4 = base == null ? void 0 : base[__knownSymbol$1("metadata")]) != null ? _a4 : null)];
 };
 var __decoratorStrings$1 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
 var __expectFn$1 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$1("Function expected") : fn;
@@ -3016,7 +3103,7 @@ function createLiveRegion(id) {
   return element;
 }
 var Accessibility = class extends Plugin {
-  constructor(manager, options) {
+  constructor(manager, options2) {
     super(manager);
     const {
       id,
@@ -3026,7 +3113,7 @@ var Accessibility = class extends Plugin {
       } = {},
       announcements = defaultAnnouncements,
       screenReaderInstructions = defaultScreenReaderInstructions
-    } = options != null ? options : {};
+    } = options2 != null ? options2 : {};
     const descriptionId = id ? `${descriptionPrefix}-${id}` : generateUniqueId(descriptionPrefix);
     const announcementId = id ? `${announcementPrefix}-${id}` : generateUniqueId(announcementPrefix);
     let hiddenTextElement;
@@ -3076,10 +3163,9 @@ var Accessibility = class extends Plugin {
           if (!activator.hasAttribute("aria-describedby")) {
             activator.setAttribute("aria-describedby", descriptionId);
           }
-          activator.setAttribute(
-            "aria-pressed",
-            String(draggable.isDragSource)
-          );
+          for (const key of ["aria-pressed", "aria-grabbed"]) {
+            activator.setAttribute(key, String(draggable.isDragSource));
+          }
           activator.setAttribute("aria-disabled", String(draggable.disabled));
         }
       }
@@ -3093,13 +3179,13 @@ var Accessibility = class extends Plugin {
   }
 };
 var Cursor = class extends Plugin {
-  constructor(manager, options) {
-    super(manager, options);
+  constructor(manager, options2) {
+    super(manager, options2);
     this.manager = manager;
     this.destroy = E(() => {
-      var _a3;
+      var _a4;
       const { dragOperation } = this.manager;
-      const { cursor = "grabbing" } = (_a3 = this.options) != null ? _a3 : {};
+      const { cursor = "grabbing" } = (_a4 = this.options) != null ? _a4 : {};
       if (dragOperation.status.initialized) {
         const style = document.createElement("style");
         style.innerText = `* { cursor: ${cursor} !important; }`;
@@ -3114,427 +3200,535 @@ 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: 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_ATTRIBUTES = [
+  ATTRIBUTE,
+  PLACEHOLDER_ATTRIBUTE,
+  "popover",
+  "aria-pressed",
+  "aria-grabbing"
+];
 var IGNORED_STYLES = ["view-transition-name"];
-var _Feedback = class _Feedback2 extends Plugin {
-  constructor(manager, options) {
+var CSS_RULES = `
+  :root [${ATTRIBUTE}] {
+    position: fixed !important;
+    pointer-events: none !important;
+    touch-action: none;
+    z-index: calc(infinity);
+    will-change: translate;
+    top: var(${CSS_PREFIX}top, 0px) !important;
+    left: var(${CSS_PREFIX}left, 0px) !important;
+    right: unset !important;
+    bottom: unset !important;
+    width: var(${CSS_PREFIX}width, auto);
+    max-width: var(${CSS_PREFIX}width, auto);
+    height: var(${CSS_PREFIX}height, auto);
+    max-height: var(${CSS_PREFIX}height, auto);
+    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;
+  }
+  [style*='${CSS_PREFIX}scale'] {
+    scale: var(${CSS_PREFIX}scale) !important;
+    transform-origin: var(${CSS_PREFIX}transform-origin) !important;
+  }
+  @layer {
+    :where([${ATTRIBUTE}][popover]) {
+      overflow: visible;
+      background: unset;
+      border: unset;
+      margin: unset;
+      padding: unset;
+      color: inherit;
+    }
+  }
+  [${ATTRIBUTE}]::backdrop, [${ATTR_PREFIX}overlay]:not([${ATTRIBUTE}]) {
+    display: none;
+  }
+`.replace(/\n+/g, " ").replace(/\s+/g, " ").trim();
+function createPlaceholder(source) {
+  return n(() => {
+    const { element, manager } = source;
+    if (!element || !manager) return;
+    const containedDroppables = findContainedDroppables(
+      element,
+      manager.registry.droppables
+    );
+    const cleanup = [];
+    const placeholder = cloneElement(element);
+    const { remove } = placeholder;
+    proxyDroppableElements(containedDroppables, placeholder, cleanup);
+    configurePlaceholder(placeholder);
+    placeholder.remove = () => {
+      cleanup.forEach((fn) => fn());
+      remove.call(placeholder);
+    };
+    return placeholder;
+  });
+}
+function findContainedDroppables(element, droppables) {
+  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);
+    }
+  }
+  return containedDroppables;
+}
+function proxyDroppableElements(containedDroppables, placeholder, cleanup) {
+  for (const [droppable, identifierAttribute] of containedDroppables) {
+    if (!droppable.element) continue;
+    const selector = `[${identifierAttribute}]`;
+    const clonedElement = placeholder.matches(selector) ? placeholder : placeholder.querySelector(selector);
+    droppable.element.removeAttribute(identifierAttribute);
+    if (!clonedElement) continue;
+    const originalElement = droppable.element;
+    droppable.proxy = clonedElement;
+    clonedElement.removeAttribute(identifierAttribute);
+    ProxiedElements.set(originalElement, clonedElement);
+    cleanup.push(() => {
+      ProxiedElements.delete(originalElement);
+      droppable.proxy = void 0;
+    });
+  }
+}
+function configurePlaceholder(placeholder) {
+  placeholder.setAttribute("inert", "true");
+  placeholder.setAttribute("tab-index", "-1");
+  placeholder.setAttribute("aria-hidden", "true");
+  placeholder.setAttribute(PLACEHOLDER_ATTRIBUTE, "");
+}
+function isSameFrame(element, target) {
+  if (element === target) return true;
+  return getFrameElement(element) === getFrameElement(target);
+}
+function preventPopoverClose(event) {
+  const { target } = event;
+  if (event instanceof ToggleEvent && event.newState === "closed" && target instanceof Element && target.hasAttribute("popover")) {
+    requestAnimationFrame(() => showPopover(target));
+  }
+}
+var _overlay_dec, _a, _init$1, _overlay, _Feedback_instances, render_fn, injectStyles_fn;
+var _Feedback = class _Feedback2 extends (_a = Plugin, _overlay_dec = [reactive], _a) {
+  constructor(manager, options2) {
     super(manager);
-    const styleTags = /* @__PURE__ */ new Map();
-    let initialSize;
-    let initialCoordinates;
-    let initialFrameTransform;
-    let initialTranslate = { x: 0, y: 0 };
-    let currentTranslate;
-    let transformOrigin;
-    let moved = false;
-    const styleInjectionCleanup = E(() => {
-      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;
-      }
+    __privateAdd$1(this, _Feedback_instances);
+    __privateAdd$1(this, _overlay, __runInitializers$1(_init$1, 8, this)), __runInitializers$1(_init$1, 11, this);
+    this.state = {
+      initial: {},
+      current: {}
+    };
+    this.registerEffect(__privateMethod(this, _Feedback_instances, injectStyles_fn));
+    this.registerEffect(__privateMethod(this, _Feedback_instances, render_fn));
+  }
+  destroy() {
+    super.destroy();
+    injectedStyleTags.forEach((style) => style.remove());
+    injectedStyleTags.clear();
+  }
+};
+_init$1 = __decoratorStart$1(_a);
+_overlay = /* @__PURE__ */ new WeakMap();
+_Feedback_instances = /* @__PURE__ */ new WeakSet();
+render_fn = function() {
+  var _a4, _b2, _c3;
+  const { state, manager, options: options2 } = this;
+  const { dragOperation } = manager;
+  const { position, source, status } = dragOperation;
+  if (status.idle) {
+    state.current = {};
+    state.initial = {};
+    return;
+  }
+  if (!source) return;
+  const { element, feedback } = source;
+  if (!element || feedback === "none" || status.initializing) {
+    return;
+  }
+  const { initial } = state;
+  const feedbackElement = (_a4 = this.overlay) != null ? _a4 : element;
+  const frameTransform = getFrameTransform(feedbackElement);
+  const elementFrameTransform = getFrameTransform(element);
+  const crossFrame = !isSameFrame(element, feedbackElement);
+  const shape = new DOMRectangle(element, {
+    frameTransform: crossFrame ? elementFrameTransform : null,
+    ignoreTransforms: !crossFrame
+  });
+  const scaleDelta = {
+    x: elementFrameTransform.scaleX / frameTransform.scaleX,
+    y: elementFrameTransform.scaleY / frameTransform.scaleY
+  };
+  let cleanup;
+  let { width, height, top, left } = shape;
+  if (crossFrame) {
+    width = width / scaleDelta.x;
+    height = height / scaleDelta.y;
+  }
+  const styles = new Styles(feedbackElement);
+  const { transition, translate } = getComputedStyles(element);
+  const clone = feedback === "clone";
+  const placeholder = feedback !== "move" && !this.overlay ? createPlaceholder(source) : null;
+  const isKeyboardOperation = n(
+    () => isKeyboardEvent(manager.dragOperation.activatorEvent)
+  );
+  if (translate !== "none") {
+    const parsedTranslate = parseTranslate(translate);
+    if (parsedTranslate && !initial.translate) {
+      initial.translate = parsedTranslate;
+    }
+  }
+  if (!initial.transformOrigin) {
+    const current = n(() => position.current);
+    initial.transformOrigin = {
+      x: (current.x - left * frameTransform.scaleX - frameTransform.x) / (width * frameTransform.scaleX),
+      y: (current.y - top * frameTransform.scaleY - frameTransform.y) / (height * frameTransform.scaleY)
+    };
+  }
+  const { transformOrigin } = initial;
+  const relativeTop = top * frameTransform.scaleY + frameTransform.y;
+  const relativeLeft = left * frameTransform.scaleX + frameTransform.x;
+  if (!initial.coordinates) {
+    initial.coordinates = {
+      x: relativeLeft,
+      y: relativeTop
+    };
+    if (scaleDelta.x !== 1 || scaleDelta.y !== 1) {
+      const { scaleX, scaleY } = elementFrameTransform;
+      const { x: tX2, y: tY2 } = transformOrigin;
+      initial.coordinates.x += (width * scaleX - width) * tX2;
+      initial.coordinates.y += (height * scaleY - height) * tY2;
+    }
+  }
+  if (!initial.dimensions) {
+    initial.dimensions = { width, height };
+  }
+  if (!initial.frameTransform) {
+    initial.frameTransform = frameTransform;
+  }
+  const coordinatesDelta = {
+    x: initial.coordinates.x - relativeLeft,
+    y: initial.coordinates.y - relativeTop
+  };
+  const sizeDelta = {
+    width: (initial.dimensions.width * initial.frameTransform.scaleX - width * frameTransform.scaleX) * transformOrigin.x,
+    height: (initial.dimensions.height * initial.frameTransform.scaleY - height * frameTransform.scaleY) * transformOrigin.y
+  };
+  const delta = {
+    x: coordinatesDelta.x / frameTransform.scaleX + sizeDelta.width,
+    y: coordinatesDelta.y / frameTransform.scaleY + sizeDelta.height
+  };
+  const projected = {
+    left: left + delta.x,
+    top: top + delta.y
+  };
+  feedbackElement.setAttribute(ATTRIBUTE, "true");
+  const transform = n(() => dragOperation.transform);
+  const initialTranslate = (_b2 = initial.translate) != null ? _b2 : { x: 0, y: 0 };
+  const tX = transform.x * frameTransform.scaleX + initialTranslate.x;
+  const tY = transform.y * frameTransform.scaleY + initialTranslate.y;
+  const translateString = `${tX}px ${tY}px 0`;
+  styles.set(
+    {
+      width,
+      height,
+      top: projected.top,
+      left: projected.left,
+      translate: translateString,
+      scale: crossFrame ? `${scaleDelta.x} ${scaleDelta.y}` : "",
+      "transform-origin": `${transformOrigin.x * 100}% ${transformOrigin.y * 100}%`
+    },
+    CSS_PREFIX
+  );
+  if (placeholder) {
+    element.insertAdjacentElement("afterend", placeholder);
+    if (options2 == null ? void 0 : options2.rootElement) {
+      const root = typeof options2.rootElement === "function" ? options2.rootElement(source) : options2.rootElement;
+      root.appendChild(element);
+    }
+  }
+  if (supportsPopover(feedbackElement)) {
+    if (!feedbackElement.hasAttribute("popover")) {
+      feedbackElement.setAttribute("popover", "");
+    }
+    showPopover(feedbackElement);
+    feedbackElement.addEventListener("beforetoggle", preventPopoverClose);
+  }
+  const resizeObserver = new ResizeObserver(() => {
+    if (!placeholder) return;
+    const placeholderShape = new DOMRectangle(placeholder, {
+      frameTransform,
+      ignoreTransforms: true
     });
-    const cleanupEffect = E(() => {
-      var _a3;
-      const { dragOperation } = manager;
-      const { position, source, status } = dragOperation;
-      if (status.idle) {
-        currentTranslate = void 0;
-        initialCoordinates = 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 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;
+    styles.set(
+      {
+        width: placeholderShape.width,
+        height: placeholderShape.height,
+        top: top + dY,
+        left: left + dX
+      },
+      CSS_PREFIX
+    );
+    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()) {
+        const placeholderCell = placeholderCells[index];
+        cell.style.width = `${placeholderCell.offsetWidth}px`;
       }
-      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 clone = feedback === "clone";
-      const placeholder = feedback !== "move" ? createPlaceholder(source) : null;
-      const isKeyboardOperation = n(
-        () => isKeyboardEvent(manager.dragOperation.activatorEvent)
-      );
-      if (translate !== "none") {
-        const parsedTranslate = parseTranslate(translate);
-        if (parsedTranslate) {
-          initialTranslate = parsedTranslate;
+    }
+    dragOperation.shape = new DOMRectangle(element);
+  });
+  dragOperation.shape = new DOMRectangle(feedbackElement);
+  if (n(() => source.status) === "idle") {
+    requestAnimationFrame(() => source.status = "dragging");
+  }
+  let elementMutationObserver;
+  let documentMutationObserver;
+  if (placeholder) {
+    resizeObserver.observe(placeholder);
+    elementMutationObserver = new MutationObserver(() => {
+      for (const attribute of Array.from(element.attributes)) {
+        if (attribute.name.startsWith("aria-") || IGNORED_ATTRIBUTES.includes(attribute.name)) {
+          continue;
         }
+        if (attribute.name === "style") {
+          if (supportsStyle(element) && supportsStyle(placeholder)) {
+            placeholder.setAttribute("style", clone ? "" : "opacity: 0;");
+            placeholder.style.setProperty("transition", "none");
+            for (const key of Object.values(element.style)) {
+              if (key.startsWith(CSS_PREFIX) || IGNORED_STYLES.includes(key)) {
+                continue;
+              }
+              placeholder.style.setProperty(
+                key,
+                element.style.getPropertyValue(key)
+              );
+            }
+          }
+          continue;
+        }
+        placeholder.setAttribute(attribute.name, attribute.value);
       }
-      const relativeTop = top * frameTransform.scaleY + frameTransform.y;
-      const relativeLeft = left * frameTransform.scaleX + frameTransform.x;
-      if (!initialCoordinates) {
-        initialCoordinates = { x: relativeLeft, y: relativeTop };
-      }
-      if (!initialSize) {
-        initialSize = { width, height };
-      }
-      if (!initialFrameTransform) {
-        initialFrameTransform = frameTransform;
+      if (clone) {
+        placeholder.innerHTML = element.innerHTML;
       }
-      if (!transformOrigin) {
-        const current = n(() => position.current);
-        transformOrigin = {
-          x: (current.x - left * frameTransform.scaleX - frameTransform.x) / (width * frameTransform.scaleX),
-          y: (current.y - top * frameTransform.scaleY - frameTransform.y) / (height * frameTransform.scaleY)
-        };
+    });
+    elementMutationObserver.observe(element, {
+      attributes: true,
+      subtree: true
+    });
+    documentMutationObserver = new MutationObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.addedNodes.length === 0) continue;
+        for (const node of Array.from(entry.addedNodes)) {
+          if (node.contains(element) && element.nextElementSibling !== placeholder) {
+            element.insertAdjacentElement("afterend", placeholder);
+            showPopover(feedbackElement);
+            return;
+          }
+          if (node.contains(placeholder) && placeholder.previousElementSibling !== element) {
+            placeholder.insertAdjacentElement("beforebegin", element);
+            showPopover(feedbackElement);
+            return;
+          }
+        }
       }
-      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: coordinatesDelta.x / frameTransform.scaleX + sizeDelta.width,
-        y: coordinatesDelta.y / frameTransform.scaleY + sizeDelta.height
-      };
-      const projected = {
-        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`;
+    });
+    documentMutationObserver.observe(element.ownerDocument.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+  const cleanupEffect = E(() => {
+    var _a5;
+    const { transform: transform2, status: status2 } = dragOperation;
+    if (!transform2.x && !transform2.y && !state.current.translate) {
+      return;
+    }
+    if (status2.dragging) {
+      const translateTransition = isKeyboardOperation ? "250ms cubic-bezier(0.25, 1, 0.5, 1)" : "0ms linear";
+      const initialTranslate2 = (_a5 = initial.translate) != null ? _a5 : { x: 0, y: 0 };
+      const x = transform2.x / frameTransform.scaleX + initialTranslate2.x;
+      const y2 = transform2.y / frameTransform.scaleY + initialTranslate2.y;
       styles.set(
         {
-          width,
-          height,
-          top: projected.top,
-          left: projected.left,
-          background,
-          border,
-          translate: translateString
+          transition: `${transition}, translate ${translateTransition}`,
+          translate: `${x}px ${y2}px 0`
         },
         CSS_PREFIX
       );
-      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, {
-        ignoreTransforms: true
-      });
-      const offset = {
-        top: projected.top - actual.top,
-        left: projected.left - actual.left
+      dragOperation.shape = new DOMRectangle(feedbackElement);
+      state.current.translate = {
+        x,
+        y: y2
       };
-      if (Math.abs(offset.left) > 0.01 || Math.abs(offset.top) > 0.01) {
-        styles.set(
-          {
-            top: actual.top + offset.top,
-            left: actual.left + offset.left
-          },
-          CSS_PREFIX
-        );
-      } else {
-        offset.left = 0;
-        offset.top = 0;
+    }
+  });
+  const id = (_c3 = manager.dragOperation.source) == null ? void 0 : _c3.id;
+  const restoreFocus = () => {
+    var _a5;
+    if (!isKeyboardOperation || id == null) {
+      return;
+    }
+    const draggable = manager.registry.draggables.get(id);
+    const element2 = (_a5 = draggable == null ? void 0 : draggable.handle) != null ? _a5 : draggable == null ? void 0 : draggable.element;
+    if (element2 instanceof HTMLElement) {
+      element2.focus();
+    }
+  };
+  let dropEffectCleanup;
+  cleanup = () => {
+    elementMutationObserver == null ? void 0 : elementMutationObserver.disconnect();
+    documentMutationObserver == null ? void 0 : documentMutationObserver.disconnect();
+    resizeObserver.disconnect();
+    if (supportsPopover(feedbackElement)) {
+      feedbackElement.removeEventListener(
+        "beforetoggle",
+        preventPopoverClose
+      );
+      feedbackElement.removeAttribute("popover");
+    }
+    feedbackElement.removeAttribute(ATTRIBUTE);
+    styles.reset();
+    source.status = "idle";
+    const moved = state.current.translate != null;
+    if (placeholder && (moved || placeholder.parentElement !== feedbackElement.parentElement) && feedbackElement.isConnected) {
+      placeholder.replaceWith(feedbackElement);
+    }
+    placeholder == null ? void 0 : placeholder.remove();
+    cleanupEffect();
+    dropEffectCleanup == null ? void 0 : dropEffectCleanup();
+  };
+  dropEffectCleanup = E(() => {
+    if (dragOperation.status.dropped) {
+      const onComplete = cleanup;
+      cleanup = void 0;
+      source.status = "dropping";
+      let translate2 = state.current.translate;
+      const moved = translate2 != null;
+      if (!translate2 && element !== feedbackElement) {
+        translate2 = {
+          x: 0,
+          y: 0
+        };
       }
-      const resizeObserver = new ResizeObserver(() => {
-        if (!placeholder) return;
-        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;
-        styles.set(
-          {
-            width: placeholderShape.width,
-            height: placeholderShape.height,
-            top: top + dY,
-            left: left + dX
-          },
-          CSS_PREFIX
-        );
-        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()) {
-            const placeholderCell = placeholderCells[index];
-            cell.style.width = `${placeholderCell.offsetWidth}px`;
-          }
-        }
-        dragOperation.shape = new DOMRectangle(element);
-      });
-      dragOperation.shape = new DOMRectangle(element);
-      source.status = "dragging";
-      let elementMutationObserver;
-      let documentMutationObserver;
-      if (placeholder) {
-        resizeObserver.observe(placeholder);
-        elementMutationObserver = new MutationObserver(() => {
-          for (const attribute of Array.from(element.attributes)) {
-            if (attribute.name.startsWith("aria-") || IGNORED_ATTRIBUTES.includes(attribute.name)) {
-              continue;
-            }
-            if (attribute.name === "style") {
-              if (supportsStyle(element) && supportsStyle(placeholder)) {
-                placeholder.setAttribute("style", clone ? "" : "opacity: 0;");
-                placeholder.style.setProperty("transition", "none");
-                for (const key of Object.values(element.style)) {
-                  if (key.startsWith(CSS_PREFIX) || IGNORED_STYLES.includes(key)) {
-                    continue;
-                  }
-                  placeholder.style.setProperty(
-                    key,
-                    element.style.getPropertyValue(key)
-                  );
-                }
+      if (!translate2) {
+        onComplete == null ? void 0 : onComplete();
+        return;
+      }
+      manager.renderer.rendering.then(() => {
+        showPopover(feedbackElement);
+        const target = placeholder != null ? placeholder : element;
+        const animations = feedbackElement.getAnimations();
+        if (animations.length) {
+          animations.forEach((animation) => {
+            const { effect: effect9 } = animation;
+            if (effect9 instanceof KeyframeEffect) {
+              if (effect9.getKeyframes().some((keyframe) => keyframe.translate)) {
+                animation.finish();
               }
-              continue;
             }
-            placeholder.setAttribute(attribute.name, attribute.value);
-          }
-          if (clone) {
-            placeholder.innerHTML = element.innerHTML;
-          }
-        });
-        elementMutationObserver.observe(element, {
-          attributes: true,
-          subtree: true
-        });
-        documentMutationObserver = new MutationObserver((entries) => {
-          for (const entry of entries) {
-            const { addedNodes } = entry;
-            if (addedNodes.length > 0 && Array.from(addedNodes).some((node) => node.contains(element))) {
-              element.insertAdjacentElement("afterend", placeholder);
-              showPopover(element);
-              return;
-            }
-          }
-        });
-        documentMutationObserver.observe(element.ownerDocument.body, {
-          childList: true,
-          subtree: true
-        });
-      }
-      const cleanupEffect2 = E(function updateTransform() {
-        const { transform: transform2, status: status2 } = dragOperation;
-        if (!transform2.x && !transform2.y && !moved) {
-          return;
-        }
-        if (!moved) {
-          moved = true;
-        }
-        if (status2.dragging) {
-          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}`,
-              translate: `${x}px ${y2}px 0`
-            },
-            CSS_PREFIX
-          );
-          dragOperation.shape = new DOMRectangle(element);
-          currentTranslate = {
-            x,
-            y: y2
-          };
-        }
-      });
-      const id = (_a3 = manager.dragOperation.source) == null ? void 0 : _a3.id;
-      const restoreFocus = () => {
-        var _a4;
-        if (!isKeyboardOperation || id == null) {
-          return;
-        }
-        const draggable = manager.registry.draggables.get(id);
-        const element2 = (_a4 = draggable == null ? void 0 : draggable.handle) != null ? _a4 : draggable == null ? void 0 : draggable.element;
-        if (element2 instanceof HTMLElement) {
-          element2.focus();
-        }
-      };
-      let dropEffectCleanup;
-      cleanup = () => {
-        elementMutationObserver == null ? void 0 : elementMutationObserver.disconnect();
-        documentMutationObserver == null ? void 0 : documentMutationObserver.disconnect();
-        resizeObserver.disconnect();
-        styles.reset();
-        if (placeholder && (moved || placeholder.parentElement !== element.parentElement) && element.isConnected) {
-          placeholder.replaceWith(element);
-        }
-        placeholder == null ? void 0 : placeholder.remove();
-        element.removeAttribute(ATTRIBUTE);
-        if (supportsPopover(element)) {
-          element.removeAttribute("popover");
+          });
         }
-        cleanupEffect2();
-        dropEffectCleanup == null ? void 0 : dropEffectCleanup();
-        source.status = "idle";
-        moved = false;
-      };
-      dropEffectCleanup = E(function dropAnimation() {
-        if (dragOperation.status.dropped) {
-          const onComplete = cleanup;
-          cleanup = void 0;
-          source.status = "dropping";
-          const transform2 = currentTranslate;
-          if (!transform2) {
+        const options22 = {
+          frameTransform: isSameFrame(feedbackElement, target) ? null : void 0
+        };
+        const current = new DOMRectangle(feedbackElement, options22);
+        const final = new DOMRectangle(target, options22);
+        const delta2 = Rectangle.delta(current, final, source.alignment);
+        const finalTranslate = {
+          x: translate2.x - delta2.x,
+          y: translate2.y - delta2.y
+        };
+        const heightKeyframes = Math.round(current.intrinsicHeight) !== Math.round(final.intrinsicHeight) ? {
+          minHeight: [
+            `${current.intrinsicHeight}px`,
+            `${final.intrinsicHeight}px`
+          ],
+          maxHeight: [
+            `${current.intrinsicHeight}px`,
+            `${final.intrinsicHeight}px`
+          ]
+        } : {};
+        const widthKeyframes = Math.round(current.intrinsicWidth) !== Math.round(final.intrinsicWidth) ? {
+          minWidth: [
+            `${current.intrinsicWidth}px`,
+            `${final.intrinsicWidth}px`
+          ],
+          maxWidth: [
+            `${current.intrinsicWidth}px`,
+            `${final.intrinsicWidth}px`
+          ]
+        } : {};
+        animateTransform({
+          element: feedbackElement,
+          keyframes: __spreadProps$4(__spreadValues$4(__spreadValues$4({}, heightKeyframes), widthKeyframes), {
+            translate: [
+              `${translate2.x}px ${translate2.y}px 0`,
+              `${finalTranslate.x}px ${finalTranslate.y}px 0`
+            ]
+          }),
+          options: {
+            duration: moved || feedbackElement !== element ? 250 : 0,
+            easing: "ease"
+          },
+          onReady() {
+            styles.remove(["translate"], CSS_PREFIX);
+          },
+          onFinish() {
             onComplete == null ? void 0 : onComplete();
-            return;
+            requestAnimationFrame(restoreFocus);
           }
-          manager.renderer.rendering.then(() => {
-            showPopover(element);
-            const target = placeholder != null ? placeholder : element;
-            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: current.center.x - final.center.x,
-              y: current.center.y - final.center.y
-            };
-            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: __spreadProps$4(__spreadValues$4(__spreadValues$4({}, heightKeyframes), widthKeyframes), {
-                translate: [
-                  `${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();
-              }
-            });
-          });
-        }
+        });
       });
-      return () => cleanup == null ? void 0 : cleanup();
-    });
-    this.destroy = () => {
-      styleInjectionCleanup();
-      cleanupEffect();
-      styleTags.forEach((style) => style.remove());
-    };
+    }
+  });
+  return () => cleanup == null ? void 0 : cleanup();
+};
+injectStyles_fn = function() {
+  var _a4, _b2;
+  const { status, source, target } = this.manager.dragOperation;
+  if (status.initialized) {
+    const sourceDocument = getDocument((_a4 = source == null ? void 0 : source.element) != null ? _a4 : 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 (!injectedStyleTags.has(doc)) {
+        const style = document.createElement("style");
+        style.innerText = CSS_RULES;
+        doc.head.prepend(style);
+        injectedStyleTags.set(doc, style);
+      }
+    }
   }
 };
+__decorateElement$1(_init$1, 4, "overlay", _overlay_dec, _Feedback, _overlay);
+__decoratorMetadata$1(_init$1, _Feedback);
 _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 injectedStyleTags = /* @__PURE__ */ new Map();
 var LOCKED = true;
 var UNLOCKED = false;
-var _dec, _a, _dec2, _b, _init$1, __b, __a;
-_b = (_dec2 = [reactive], ScrollDirection.Forward), _a = (_dec = [reactive], ScrollDirection.Reverse);
+var _dec, _a2, _dec2, _b, _init2, __b, __a;
+_b = (_dec2 = [reactive], ScrollDirection.Forward), _a2 = (_dec = [reactive], ScrollDirection.Reverse);
 var ScrollLock = class {
   constructor() {
-    __privateAdd$1(this, __b, __runInitializers$1(_init$1, 8, this, LOCKED)), __runInitializers$1(_init$1, 11, this);
-    __privateAdd$1(this, __a, __runInitializers$1(_init$1, 12, this, LOCKED)), __runInitializers$1(_init$1, 15, this);
+    __privateAdd$1(this, __b, __runInitializers$1(_init2, 8, this, LOCKED)), __runInitializers$1(_init2, 11, this);
+    __privateAdd$1(this, __a, __runInitializers$1(_init2, 12, this, LOCKED)), __runInitializers$1(_init2, 15, this);
   }
   isLocked(direction) {
     if (direction === ScrollDirection.Idle) {
@@ -3552,12 +3746,12 @@ var ScrollLock = class {
     this[direction] = UNLOCKED;
   }
 };
-_init$1 = __decoratorStart$1(null);
+_init2 = __decoratorStart$1(null);
 __b = /* @__PURE__ */ new WeakMap();
 __a = /* @__PURE__ */ new WeakMap();
-__decorateElement$1(_init$1, 4, _b, _dec2, ScrollLock, __b);
-__decorateElement$1(_init$1, 4, _a, _dec, ScrollLock, __a);
-__decoratorMetadata$1(_init$1, ScrollLock);
+__decorateElement$1(_init2, 4, _b, _dec2, ScrollLock, __b);
+__decorateElement$1(_init2, 4, _a2, _dec, ScrollLock, __a);
+__decoratorMetadata$1(_init2, ScrollLock);
 var DIRECTIONS = [ScrollDirection.Forward, ScrollDirection.Reverse];
 var ScrollIntent = class {
   constructor() {
@@ -3609,11 +3803,11 @@ var ScrollIntentTracker = class extends Plugin {
 function getDirection$1(a2, b2) {
   return Math.sign(a2 - b2);
 }
-var _autoScrolling_dec, _a2, _init2, _autoScrolling, _meta, _scroll;
-var Scroller = class extends (_a2 = CorePlugin, _autoScrolling_dec = [reactive], _a2) {
+var _autoScrolling_dec, _a3, _init3, _autoScrolling, _meta, _scroll;
+var Scroller = class extends (_a3 = CorePlugin, _autoScrolling_dec = [reactive], _a3) {
   constructor(manager) {
     super(manager);
-    __privateAdd$1(this, _autoScrolling, __runInitializers$1(_init2, 8, this, false)), __runInitializers$1(_init2, 11, this);
+    __privateAdd$1(this, _autoScrolling, __runInitializers$1(_init3, 8, this, false)), __runInitializers$1(_init3, 11, this);
     __privateAdd$1(this, _meta);
     __privateAdd$1(this, _scroll, () => {
       if (!__privateGet$1(this, _meta)) {
@@ -3623,8 +3817,8 @@ var Scroller = class extends (_a2 = CorePlugin, _autoScrolling_dec = [reactive],
       if (by.y) element.scrollTop += by.y;
       if (by.x) element.scrollLeft += by.x;
     });
-    this.scroll = (options) => {
-      var _a3;
+    this.scroll = (options2) => {
+      var _a4;
       if (this.disabled) {
         return false;
       }
@@ -3636,7 +3830,7 @@ var Scroller = class extends (_a2 = CorePlugin, _autoScrolling_dec = [reactive],
       const { position } = this.manager.dragOperation;
       const currentPosition = position == null ? void 0 : position.current;
       if (currentPosition) {
-        const { by } = options != null ? options : {};
+        const { by } = options2 != null ? options2 : {};
         const intent = by ? {
           x: getScrollIntent(by.x),
           y: getScrollIntent(by.y)
@@ -3666,7 +3860,7 @@ var Scroller = class extends (_a2 = CorePlugin, _autoScrolling_dec = [reactive],
               const scrollLeftBy = x * speed.x;
               const scrollTopBy = y2 * speed.y;
               if (scrollLeftBy || scrollTopBy) {
-                const previousScrollBy = (_a3 = __privateGet$1(this, _meta)) == null ? void 0 : _a3.by;
+                const previousScrollBy = (_a4 = __privateGet$1(this, _meta)) == null ? void 0 : _a4.by;
                 if (this.autoScrolling && previousScrollBy) {
                   const scrollIntentMismatch = previousScrollBy.x && !scrollLeftBy || previousScrollBy.y && !scrollTopBy;
                   if (scrollIntentMismatch) continue;
@@ -3742,12 +3936,12 @@ var Scroller = class extends (_a2 = CorePlugin, _autoScrolling_dec = [reactive],
     });
   }
 };
-_init2 = __decoratorStart$1(_a2);
+_init3 = __decoratorStart$1(_a3);
 _autoScrolling = /* @__PURE__ */ new WeakMap();
 _meta = /* @__PURE__ */ new WeakMap();
 _scroll = /* @__PURE__ */ new WeakMap();
-__decorateElement$1(_init2, 4, "autoScrolling", _autoScrolling_dec, Scroller, _autoScrolling);
-__decoratorMetadata$1(_init2, Scroller);
+__decorateElement$1(_init3, 4, "autoScrolling", _autoScrolling_dec, Scroller, _autoScrolling);
+__decoratorMetadata$1(_init3, Scroller);
 function getScrollIntent(value) {
   if (value > 0) {
     return ScrollDirection.Forward;
@@ -3804,10 +3998,10 @@ var ScrollListener = class extends CorePlugin {
     };
     const { dragOperation } = this.manager;
     this.destroy = E(() => {
-      var _a3, _b2, _c3;
+      var _a4, _b2, _c3;
       const enabled = dragOperation.status.dragging;
       if (enabled) {
-        const root = (_c3 = (_b2 = (_a3 = dragOperation.source) == null ? void 0 : _a3.element) == null ? void 0 : _b2.ownerDocument) != null ? _c3 : document;
+        const root = (_c3 = (_b2 = (_a4 = dragOperation.source) == null ? void 0 : _a4.element) == null ? void 0 : _b2.ownerDocument) != null ? _c3 : document;
         root.addEventListener("scroll", this.handleScroll, listenerOptions);
         return () => {
           root.removeEventListener(
@@ -3829,8 +4023,9 @@ var PreventSelection = class extends Plugin {
       const { dragOperation } = this.manager;
       if (dragOperation.status.initialized) {
         const style = document.createElement("style");
-        style.innerText = `* { user-select: none !important;, -webkit-user-select: none !important; }`;
+        style.innerText = `* { user-select: none !important; -webkit-user-select: none !important; }`;
         document.head.appendChild(style);
+        removeSelection();
         document.addEventListener("selectionchange", removeSelection, {
           capture: true
         });
@@ -3845,8 +4040,8 @@ var PreventSelection = class extends Plugin {
   }
 };
 function removeSelection() {
-  var _a3;
-  (_a3 = document.getSelection()) == null ? void 0 : _a3.removeAllRanges();
+  var _a4;
+  (_a4 = document.getSelection()) == null ? void 0 : _a4.removeAllRanges();
 }
 var DEFAULT_KEYBOARD_CODES = {
   start: ["Space", "Enter"],
@@ -3860,13 +4055,13 @@ var DEFAULT_KEYBOARD_CODES = {
 var DEFAULT_OFFSET = 10;
 var _cleanupFunctions;
 var KeyboardSensor = class extends Sensor {
-  constructor(manager, options) {
+  constructor(manager, options2) {
     super(manager);
     this.manager = manager;
-    this.options = options;
+    this.options = options2;
     __privateAdd$1(this, _cleanupFunctions, []);
     this.listeners = new Listeners();
-    this.handleSourceKeyDown = (event, source, options2) => {
+    this.handleSourceKeyDown = (event, source, options3) => {
       if (this.disabled || event.defaultPrevented) {
         return;
       }
@@ -3877,24 +4072,24 @@ var KeyboardSensor = class extends Sensor {
         return;
       }
       if (!source.handle && source.element && event.target === source.element || source.handle && event.target === source.handle) {
-        const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options2 != null ? options2 : {};
+        const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options3 != null ? options3 : {};
         if (!keyboardCodes.start.includes(event.code)) {
           return;
         }
         if (!this.manager.dragOperation.status.idle) {
           return;
         }
-        this.handleStart(event, source, options2);
+        this.handleStart(event, source, options3);
       }
     };
   }
-  bind(source, options = this.options) {
+  bind(source, options2 = this.options) {
     const unbind = E(() => {
-      var _a3;
-      const target = (_a3 = source.handle) != null ? _a3 : source.element;
+      var _a4;
+      const target = (_a4 = source.handle) != null ? _a4 : source.element;
       const listener = (event) => {
         if (isKeyboardEvent(event)) {
-          this.handleSourceKeyDown(event, source, options);
+          this.handleSourceKeyDown(event, source, options2);
         }
       };
       if (target) {
@@ -3906,7 +4101,7 @@ var KeyboardSensor = class extends Sensor {
     });
     return unbind;
   }
-  handleStart(event, source, options) {
+  handleStart(event, source, options2) {
     const { element } = source;
     if (!element) {
       throw new Error("Source draggable does not have an associated element");
@@ -3932,22 +4127,22 @@ var KeyboardSensor = class extends Sensor {
       this.listeners.bind(sourceDocument, [
         {
           type: "keydown",
-          listener: (event2) => this.handleKeyDown(event2, source, options),
+          listener: (event2) => this.handleKeyDown(event2, source, options2),
           options: { capture: true }
         }
       ]),
       this.listeners.bind(sourceWindow, [
-        { type: "resize", listener: () => this.handleEnd(true) }
+        { type: "resize", listener: () => this.handleEnd(event, true) }
       ])
     ];
     __privateGet$1(this, _cleanupFunctions).push(...listeners);
   }
-  handleKeyDown(event, _source, options) {
-    const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options != null ? options : {};
+  handleKeyDown(event, _source, options2) {
+    const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options2 != null ? options2 : {};
     if (isKeycode(event, [...keyboardCodes.end, ...keyboardCodes.cancel])) {
       event.preventDefault();
       const canceled = isKeycode(event, keyboardCodes.cancel);
-      this.handleEnd(canceled);
+      this.handleEnd(event, canceled);
       return;
     }
     if (isKeycode(event, keyboardCodes.up)) {
@@ -3961,8 +4156,9 @@ var KeyboardSensor = class extends Sensor {
       this.handleMove("right", event);
     }
   }
-  handleEnd(canceled) {
+  handleEnd(event, canceled) {
     this.manager.actions.stop({
+      event,
       canceled
     });
     this.cleanup();
@@ -3994,6 +4190,7 @@ var KeyboardSensor = class extends Sensor {
     if ((offset == null ? void 0 : offset.x) || (offset == null ? void 0 : offset.y)) {
       event.preventDefault();
       this.manager.actions.move({
+        event,
         by: offset
       });
     }
@@ -4021,10 +4218,10 @@ function isKeycode(event, codes) {
 }
 var _clearTimeout;
 var _PointerSensor = class _PointerSensor2 extends Sensor {
-  constructor(manager, options) {
+  constructor(manager, options2) {
     super(manager);
     this.manager = manager;
-    this.options = options;
+    this.options = options2;
     this.listeners = new Listeners();
     this.cleanup = /* @__PURE__ */ new Set();
     __privateAdd$1(this, _clearTimeout);
@@ -4032,13 +4229,13 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     this.handlePointerUp = this.handlePointerUp.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
   }
-  bind(source, options = this.options) {
+  bind(source, options2 = this.options) {
     const unbind = E(() => {
-      var _a3;
-      const target = (_a3 = source.handle) != null ? _a3 : source.element;
+      var _a4;
+      const target = (_a4 = source.handle) != null ? _a4 : source.element;
       const listener = (event) => {
         if (isPointerEvent(event)) {
-          this.handlePointerDown(event, source, options);
+          this.handlePointerDown(event, source, options2);
         }
       };
       if (target) {
@@ -4051,7 +4248,7 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     });
     return unbind;
   }
-  handlePointerDown(event, source, options = {}) {
+  handlePointerDown(event, source, options2 = {}) {
     if (this.disabled || !event.isPrimary || event.button !== 0 || !isElement(event.target) || source.disabled || isCapturedBySensor(event)) {
       return;
     }
@@ -4062,7 +4259,7 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       x: event.clientX * offset.scaleX + offset.x,
       y: event.clientY * offset.scaleY + offset.y
     };
-    const { activationConstraints } = options;
+    const { activationConstraints } = options2;
     const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
     event.sensor = this;
     if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
@@ -4084,7 +4281,7 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     const unbindListeners = this.listeners.bind(ownerDocument, [
       {
         type: "pointermove",
-        listener: (event2) => this.handlePointerMove(event2, source, options)
+        listener: (event2) => this.handlePointerMove(event2, source, options2)
       },
       {
         type: "pointerup",
@@ -4096,18 +4293,21 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       {
         // Cancel activation if there is a competing Drag and Drop interaction
         type: "dragstart",
-        listener: isNativeDraggable ? this.handleCancel : preventDefault
+        listener: isNativeDraggable ? this.handleCancel : preventDefault,
+        options: {
+          capture: true
+        }
       }
     ]);
     const cleanup = () => {
-      var _a3;
-      setTimeout(unbindListeners);
-      (_a3 = __privateGet$1(this, _clearTimeout)) == null ? void 0 : _a3.call(this);
+      var _a4;
+      unbindListeners();
+      (_a4 = __privateGet$1(this, _clearTimeout)) == null ? void 0 : _a4.call(this);
       this.initialCoordinates = void 0;
     };
     this.cleanup.add(cleanup);
   }
-  handlePointerMove(event, source, options) {
+  handlePointerMove(event, source, options2) {
     const coordinates = {
       x: event.clientX,
       y: event.clientY
@@ -4118,7 +4318,7 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     if (this.manager.dragOperation.status.dragging) {
       event.preventDefault();
       event.stopPropagation();
-      this.manager.actions.move({ to: coordinates });
+      this.manager.actions.move({ event, to: coordinates });
       return;
     }
     if (!this.initialCoordinates) {
@@ -4128,12 +4328,12 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       x: coordinates.x - this.initialCoordinates.x,
       y: coordinates.y - this.initialCoordinates.y
     };
-    const { activationConstraints } = options;
+    const { activationConstraints } = options2;
     const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
     const { distance, delay } = constraints != null ? constraints : {};
     if (distance) {
       if (distance.tolerance != null && exceedsDistance(delta, distance.tolerance)) {
-        return this.handleCancel();
+        return this.handleCancel(event);
       }
       if (exceedsDistance(delta, distance.value)) {
         return this.handleStart(source, event);
@@ -4141,17 +4341,17 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     }
     if (delay) {
       if (exceedsDistance(delta, delay.tolerance)) {
-        return this.handleCancel();
+        return this.handleCancel(event);
       }
     }
   }
   handlePointerUp(event) {
     const { status } = this.manager.dragOperation;
-    if (!status.idle) {
+    if (status.dragging) {
       event.preventDefault();
       event.stopPropagation();
       const canceled = !status.initialized;
-      this.manager.actions.stop({ canceled });
+      this.manager.actions.stop({ event, canceled });
     }
     this.cleanup.forEach((cleanup) => cleanup());
     this.cleanup.clear();
@@ -4159,13 +4359,13 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
   handleKeyDown(event) {
     if (event.key === "Escape") {
       event.preventDefault();
-      this.handleCancel();
+      this.handleCancel(event);
     }
   }
   handleStart(source, event) {
-    var _a3;
+    var _a4;
     const { manager, initialCoordinates } = this;
-    (_a3 = __privateGet$1(this, _clearTimeout)) == null ? void 0 : _a3.call(this);
+    (_a4 = __privateGet$1(this, _clearTimeout)) == null ? void 0 : _a4.call(this);
     if (!initialCoordinates || manager.dragOperation.status.initialized) {
       return;
     }
@@ -4178,6 +4378,8 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       manager.actions.start({ coordinates: initialCoordinates, event });
     });
     const ownerDocument = getDocument(event.target);
+    const pointerCaptureTarget = ownerDocument.body;
+    pointerCaptureTarget.setPointerCapture(event.pointerId);
     const unbind = this.listeners.bind(ownerDocument, [
       {
         // Prevent scrolling on touch devices
@@ -4192,18 +4394,28 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
         type: "click",
         listener: preventDefault
       },
+      {
+        type: "contextmenu",
+        listener: preventDefault
+      },
       {
         type: "keydown",
         listener: this.handleKeyDown
+      },
+      {
+        type: "lostpointercapture",
+        listener: (event2) => {
+          if (event2.target !== pointerCaptureTarget) return;
+          this.handlePointerUp(event2);
+        }
       }
     ]);
-    ownerDocument.body.setPointerCapture(event.pointerId);
     this.cleanup.add(unbind);
   }
-  handleCancel() {
+  handleCancel(event) {
     const { dragOperation } = this.manager;
     if (dragOperation.status.initialized) {
-      this.manager.actions.stop({ canceled: true });
+      this.manager.actions.stop({ event, canceled: true });
     }
     this.cleanup.forEach((cleanup) => cleanup());
     this.cleanup.clear();
@@ -4235,15 +4447,21 @@ function patchWindow(window2) {
   windows.add(window2);
 }
 var defaultPreset = {
+  modifiers: [],
   plugins: [Accessibility, AutoScroller, Cursor, Feedback, PreventSelection],
   sensors: [
     PointerSensor.configure({
       activationConstraints(event, source) {
-        var _a3;
+        var _a4;
         const { pointerType, target } = event;
-        if (pointerType === "mouse" && isElement(target) && (source.handle === target || ((_a3 = source.handle) == null ? void 0 : _a3.contains(target)))) {
+        if (pointerType === "mouse" && isElement(target) && (source.handle === target || ((_a4 = source.handle) == null ? void 0 : _a4.contains(target)))) {
           return void 0;
         }
+        if (pointerType === "touch") {
+          return {
+            delay: { value: 250, tolerance: 5 }
+          };
+        }
         return {
           delay: { value: 200, tolerance: 10 },
           distance: { value: 5 }
@@ -4267,10 +4485,10 @@ var DragDropManager2 = class extends DragDropManager$1 {
     }));
   }
 };
-var _feedback_dec, _element_dec, _handle_dec, _c, _init3, _handle, _element$1, _feedback;
+var _feedback_dec, _element_dec, _handle_dec, _c, _init4, _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, {
+  constructor(_a4, manager) {
+    var _b2 = _a4, {
       element,
       effects: effects2 = () => [],
       handle,
@@ -4286,16 +4504,16 @@ var Draggable$1 = class Draggable2 extends (_c = Draggable$2, _handle_dec = [rea
         effects: () => [
           ...effects2(),
           () => {
-            var _a4, _b3;
+            var _a5, _b3;
             const { manager: manager2 } = this;
             if (!manager2) return;
-            const sensors = (_b3 = (_a4 = this.sensors) == null ? void 0 : _a4.map(descriptor)) != null ? _b3 : [
+            const sensors = (_b3 = (_a5 = this.sensors) == null ? void 0 : _a5.map(descriptor)) != null ? _b3 : [
               ...manager2.sensors
             ];
             const unbindFunctions = sensors.map((entry) => {
               const sensorInstance = entry instanceof Sensor ? entry : manager2.registry.register(entry.plugin);
-              const options = entry instanceof Sensor ? void 0 : entry.options;
-              const unbind = sensorInstance.bind(this, options);
+              const options2 = entry instanceof Sensor ? void 0 : entry.options;
+              const unbind = sensorInstance.bind(this, options2);
               return unbind;
             });
             return function cleanup() {
@@ -4306,26 +4524,26 @@ var Draggable$1 = class Draggable2 extends (_c = Draggable$2, _handle_dec = [rea
       }, input),
       manager
     );
-    __privateAdd$1(this, _handle, __runInitializers$1(_init3, 8, this)), __runInitializers$1(_init3, 11, 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);
+    __privateAdd$1(this, _handle, __runInitializers$1(_init4, 8, this)), __runInitializers$1(_init4, 11, this);
+    __privateAdd$1(this, _element$1, __runInitializers$1(_init4, 12, this)), __runInitializers$1(_init4, 15, this);
+    __privateAdd$1(this, _feedback, __runInitializers$1(_init4, 16, this)), __runInitializers$1(_init4, 19, this);
     this.element = element;
     this.handle = handle;
     this.feedback = feedback;
   }
 };
-_init3 = __decoratorStart$1(_c);
+_init4 = __decoratorStart$1(_c);
 _handle = /* @__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$1);
-__decorateElement$1(_init3, 4, "feedback", _feedback_dec, Draggable$1, _feedback);
-__decoratorMetadata$1(_init3, Draggable$1);
-var _proxy_dec, _element_dec2, _c2, _init4, _element2, _d, element_get, element_set, _Droppable_instances, _proxy;
+__decorateElement$1(_init4, 4, "handle", _handle_dec, Draggable$1, _handle);
+__decorateElement$1(_init4, 4, "element", _element_dec, Draggable$1, _element$1);
+__decorateElement$1(_init4, 4, "feedback", _feedback_dec, Draggable$1, _feedback);
+__decoratorMetadata$1(_init4, Draggable$1);
+var _proxy_dec, _element_dec2, _c2, _init5, _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"]);
+  constructor(_a4, manager) {
+    var _b2 = _a4, { element, effects: effects2 = () => [] } = _b2, input = __objRest$2(_b2, ["element", "effects"]);
     const { collisionDetector = defaultCollisionDetection } = input;
     const updateShape = (boundingClientRect) => {
       const { manager: manager2, element: element2 } = this;
@@ -4371,8 +4589,8 @@ var Droppable2 = class extends (_c2 = Droppable$1, _element_dec2 = [reactive], _
             }
           },
           () => {
-            var _a4;
-            if ((_a4 = this.manager) == null ? void 0 : _a4.dragOperation.status.initialized) {
+            var _a5;
+            if ((_a5 = this.manager) == null ? void 0 : _a5.dragOperation.status.initialized) {
               return () => {
                 this.shape = void 0;
               };
@@ -4383,8 +4601,8 @@ var Droppable2 = class extends (_c2 = Droppable$1, _element_dec2 = [reactive], _
       manager
     );
     __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);
+    __privateAdd$1(this, _element2, __runInitializers$1(_init5, 8, this)), __runInitializers$1(_init5, 11, this);
+    __privateAdd$1(this, _proxy, __runInitializers$1(_init5, 12, this)), __runInitializers$1(_init5, 15, this);
     this.element = element;
     this.refreshShape = () => updateShape();
   }
@@ -4392,17 +4610,17 @@ var Droppable2 = class extends (_c2 = Droppable$1, _element_dec2 = [reactive], _
     __privateSet$1(this, _Droppable_instances, element, element_set);
   }
   get element() {
-    var _a3;
-    return (_a3 = this.proxy) != null ? _a3 : __privateGet$1(this, _Droppable_instances, element_get);
+    var _a4;
+    return (_a4 = this.proxy) != null ? _a4 : __privateGet$1(this, _Droppable_instances, element_get);
   }
 };
-_init4 = __decoratorStart$1(_c2);
+_init5 = __decoratorStart$1(_c2);
 _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);
+_d = __decorateElement$1(_init5, 20, "#element", _element_dec2, _Droppable_instances, _element2), element_get = _d.get, element_set = _d.set;
+__decorateElement$1(_init5, 4, "proxy", _proxy_dec, Droppable2, _proxy);
+__decoratorMetadata$1(_init5, Droppable2);
 var __create = Object.create;
 var __defProp$3 = Object.defineProperty;
 var __defProps$3 = Object.defineProperties;
@@ -4441,8 +4659,8 @@ var __objRest$1 = (source, exclude) => {
   return target;
 };
 var __decoratorStart = (base) => {
-  var _a3;
-  return [, , , __create((_a3 = void 0) != null ? _a3 : null)];
+  var _a4;
+  return [, , , __create((_a4 = void 0) != null ? _a4 : null)];
 };
 var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
 var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
@@ -4506,11 +4724,11 @@ var SortableKeyboardPlugin = class extends Plugin {
       "dragmove",
       (event, manager2) => {
         queueMicrotask(() => {
-          if (this.disabled || event.defaultPrevented) {
+          if (this.disabled || event.defaultPrevented || !event.nativeEvent) {
             return;
           }
           const { dragOperation } = manager2;
-          if (!isKeyboardEvent(dragOperation.activatorEvent)) {
+          if (!isKeyboardEvent(event.nativeEvent)) {
             return;
           }
           if (!isSortable(dragOperation.source)) {
@@ -4560,10 +4778,9 @@ var SortableKeyboardPlugin = class extends Plugin {
           }
           const { id } = firstCollision;
           const { index, group } = source.sortable;
-          actions.setDropTarget(id).then((defaultPrevented) => {
-            if (defaultPrevented) return;
-            const { source: source2, target: target2 } = dragOperation;
-            if (!source2 || !isSortable(source2)) {
+          actions.setDropTarget(id).then(() => {
+            const { source: source2, target: target2, shape } = dragOperation;
+            if (!source2 || !isSortable(source2) || !shape) {
               return;
             }
             const {
@@ -4575,15 +4792,17 @@ var SortableKeyboardPlugin = class extends Plugin {
             const element = updated ? targetElement : target2 == null ? void 0 : target2.element;
             if (!element) return;
             scrollIntoViewIfNeeded(element);
-            const shape = new DOMRectangle(element);
-            if (!shape) {
+            const updatedShape = new DOMRectangle(element);
+            if (!updatedShape) {
               return;
             }
+            const delta = Rectangle.delta(
+              updatedShape,
+              Rectangle.from(shape.current.boundingRectangle),
+              source2.alignment
+            );
             actions.move({
-              to: {
-                x: shape.center.x,
-                y: shape.center.y
-              }
+              by: delta
             });
             if (updated) {
               actions.setDropTarget(source2.id).then(() => collisionObserver.enable());
@@ -4640,9 +4859,9 @@ function arrayMove$1(array, from, to) {
   return newArray;
 }
 function mutate$1(items, event, mutation) {
-  var _a3, _b2;
+  var _a4, _b2;
   const { source, target, canceled } = event.operation;
-  if (!source || !target || canceled || source.id === target.id) {
+  if (!source || !target || canceled) {
     if ("preventDefault" in event) event.preventDefault();
     return items;
   }
@@ -4685,7 +4904,7 @@ function mutate$1(items, event, mutation) {
   }
   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;
+  const position = (_b2 = (_a4 = dragOperation.shape) == null ? void 0 : _a4.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;
@@ -4763,12 +4982,12 @@ var OptimisticSortingPlugin = class extends Plugin {
           const targetInstances = sameGroup ? sourceInstances : instances.get(target.sortable.group);
           if (!sourceInstances || !targetInstances) return;
           manager2.renderer.rendering.then(() => {
-            var _a3, _b2, _c3;
+            var _a4, _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))) {
+                if (sortable.index !== index || sortable.group !== group || !((_a4 = newInstances.get(group)) == null ? void 0 : _a4.has(sortable))) {
                   return;
                 }
               }
@@ -4829,7 +5048,7 @@ var OptimisticSortingPlugin = class extends Plugin {
           );
           if (!initialGroupInstances) return;
           manager2.renderer.rendering.then(() => {
-            var _a3;
+            var _a4;
             for (const [group, sortableInstances] of instances.entries()) {
               const entries = Array.from(sortableInstances).entries();
               for (const [index, sortable] of entries) {
@@ -4840,7 +5059,7 @@ var OptimisticSortingPlugin = class extends Plugin {
             }
             const initialGroup = sort(initialGroupInstances);
             const sourceElement = source.sortable.element;
-            const targetElement = (_a3 = initialGroup[source.sortable.initialIndex]) == null ? void 0 : _a3.element;
+            const targetElement = (_a4 = initialGroup[source.sortable.initialIndex]) == null ? void 0 : _a4.element;
             if (!targetElement || !sourceElement) {
               return;
             }
@@ -4892,22 +5111,22 @@ var defaultSortableTransition = {
 var _group_dec, _index_dec, _init, _index, _group, _element;
 _index_dec = [reactive], _group_dec = [reactive];
 var Sortable2 = class {
-  constructor(_a3, manager) {
+  constructor(_a4, 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);
+        var _a5, _b3;
+        (_a5 = this.manager) == null ? void 0 : _a5.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);
+        var _a5, _b3;
+        (_a5 = this.manager) == null ? void 0 : _a5.registry.unregister(this.droppable);
         (_b3 = this.manager) == null ? void 0 : _b3.registry.unregister(this.draggable);
       });
     };
@@ -4917,7 +5136,7 @@ var Sortable2 = class {
         this.draggable.destroy();
       });
     };
-    var _b2 = _a3, {
+    var _b2 = _a4, {
       effects: inputEffects = () => [],
       group,
       index,
@@ -4976,6 +5195,7 @@ var Sortable2 = class {
       manager,
       this
     );
+    __privateSet(this, _element, input.element);
     this.manager = manager;
     this.index = index;
     this.previousIndex = index;
@@ -5055,10 +5275,10 @@ var Sortable2 = class {
     });
   }
   get element() {
-    var _a3, _b2;
+    var _a4, _b2;
     const element = __privateGet(this, _element);
     if (!element) return;
-    return (_b2 = (_a3 = ProxiedElements.get(element)) != null ? _a3 : element) != null ? _b2 : this.droppable.element;
+    return (_b2 = (_a4 = ProxiedElements.get(element)) != null ? _a4 : element) != null ? _b2 : this.droppable.element;
   }
   set target(target) {
     this.droppable.element = target;
@@ -5105,12 +5325,21 @@ var Sortable2 = class {
   set sensors(value) {
     this.draggable.sensors = value;
   }
+  set modifiers(value) {
+    this.draggable.modifiers = value;
+  }
   set collisionPriority(value) {
     this.droppable.collisionPriority = value;
   }
   set collisionDetector(value) {
     this.droppable.collisionDetector = value != null ? value : defaultCollisionDetection;
   }
+  set alignment(value) {
+    this.draggable.alignment = value;
+  }
+  get alignment() {
+    return this.draggable.alignment;
+  }
   set type(type) {
     r(() => {
       this.droppable.type = type;
@@ -5135,6 +5364,18 @@ var Sortable2 = class {
   get isDragSource() {
     return this.draggable.isDragSource;
   }
+  /**
+   * A boolean indicating whether the sortable item is being dragged.
+   */
+  get isDragging() {
+    return this.draggable.isDragging;
+  }
+  /**
+   * A boolean indicating whether the sortable item is being dropped.
+   */
+  get isDropping() {
+    return this.draggable.isDropping;
+  }
   get status() {
     return this.draggable.status;
   }
@@ -5157,6 +5398,9 @@ 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) {
@@ -5164,6 +5408,19 @@ var SortableDroppable = class extends Droppable2 {
     this.sortable = sortable;
   }
 };
+function isRef(value) {
+  return value != null && typeof value === "object" && "current" in value;
+}
+function currentValue(value) {
+  var _a4;
+  if (value == null) {
+    return void 0;
+  }
+  if (isRef(value)) {
+    return (_a4 = value.current) != null ? _a4 : void 0;
+  }
+  return value;
+}
 function useConstant(initializer) {
   const ref = useRef(null);
   if (!ref.current) {
@@ -5173,36 +5430,48 @@ function useConstant(initializer) {
 }
 var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
-function useSignal(signal, sync = false) {
-  let val = signal.peek();
-  const read = useRef(false);
-  const update = useState(val)[1];
-  useIsomorphicLayoutEffect(
-    () => E(() => {
-      if (val !== (val = signal.value)) {
-        if (!read.current) return;
-        if (sync) {
-          reactDomExports.flushSync(() => update(val));
-        } else {
-          update(val);
+function useForceUpdate() {
+  const setState = useState(0)[1];
+  return useCallback(() => {
+    setState((value) => value + 1);
+  }, [setState]);
+}
+function useDeepSignal(target, synchronous) {
+  const tracked = useRef(/* @__PURE__ */ new Map());
+  const forceUpdate = useForceUpdate();
+  useIsomorphicLayoutEffect(() => {
+    if (!target) {
+      tracked.current.clear();
+      return;
+    }
+    return E(() => {
+      var _a4;
+      let stale = false;
+      let sync = false;
+      for (const entry of tracked.current) {
+        const [key] = entry;
+        const value = n(() => entry[1]);
+        const latestValue = target[key];
+        if (value !== latestValue) {
+          stale = true;
+          tracked.current.set(key, latestValue);
+          sync = (_a4 = synchronous == null ? void 0 : synchronous(key, value, latestValue)) != null ? _a4 : false;
         }
       }
-    }),
-    [signal, sync]
-  );
-  return {
-    get value() {
-      read.current = true;
-      return signal.value;
-    }
-  };
-}
-function useComputed(compute, dependencies = [], sync = false) {
-  const $compute = useRef(compute);
-  $compute.current = compute;
-  return useSignal(
-    useMemo(() => computed(() => $compute.current()), dependencies),
-    sync
+      if (stale) {
+        sync ? reactDomExports.flushSync(forceUpdate) : forceUpdate();
+      }
+    });
+  }, [target]);
+  return useMemo(
+    () => target ? new Proxy(target, {
+      get(target2, key) {
+        const value = target2[key];
+        tracked.current.set(key, value);
+        return value;
+      }
+    }) : target,
+    [target]
   );
 }
 function useImmediateEffect(callback, _2) {
@@ -5215,9 +5484,9 @@ function useLatest(value) {
   }, [value]);
   return valueRef;
 }
-function useOnValueChange(value, onChange, effect2 = useEffect, compare = Object.is) {
+function useOnValueChange(value, onChange, effect3 = useEffect, compare = Object.is) {
   const tracked = useRef(value);
-  effect2(() => {
+  effect3(() => {
     const oldValue = tracked.current;
     if (!compare(value, oldValue)) {
       tracked.current = value;
@@ -5225,15 +5494,15 @@ function useOnValueChange(value, onChange, effect2 = useEffect, compare = Object
     }
   }, [onChange, value]);
 }
-function currentValue(value) {
-  var _a3;
-  if (value == null) {
-    return void 0;
-  }
-  if (typeof value === "object" && "current" in value) {
-    return (_a3 = value.current) != null ? _a3 : void 0;
-  }
-  return value;
+function useOnElementChange(value, onChange) {
+  const previous = useRef(currentValue(value));
+  useIsomorphicLayoutEffect(() => {
+    const current = currentValue(value);
+    if (current !== previous.current) {
+      previous.current = current;
+      onChange(current);
+    }
+  });
 }
 var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
 var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
@@ -5261,15 +5530,15 @@ function useRenderer() {
   const resolver = useRef(null);
   const renderer = useConstant(() => ({
     get rendering() {
-      var _a3;
-      return (_a3 = rendering.current) != null ? _a3 : Promise.resolve();
+      var _a4;
+      return (_a4 = rendering.current) != null ? _a4 : Promise.resolve();
     }
   }));
   useOnValueChange(
     transitionCount,
     () => {
-      var _a3;
-      (_a3 = resolver.current) == null ? void 0 : _a3.call(resolver);
+      var _a4;
+      (_a4 = resolver.current) == null ? void 0 : _a4.call(resolver);
       rendering.current = null;
     },
     useLayoutEffect
@@ -5289,8 +5558,9 @@ function useRenderer() {
     }
   };
 }
-function DragDropProvider(_a3) {
-  var _b2 = _a3, {
+var options = [void 0, deepEqual];
+function DragDropProvider(_a4) {
+  var _b2 = _a4, {
     children,
     onCollision,
     onBeforeDragStart,
@@ -5332,8 +5602,8 @@ function DragDropProvider(_a3) {
     manager2.monitor.addEventListener(
       "dragstart",
       (event, manager3) => {
-        var _a4;
-        return (_a4 = handleDragStart.current) == null ? void 0 : _a4.call(handleDragStart, event, manager3);
+        var _a42;
+        return (_a42 = handleDragStart.current) == null ? void 0 : _a42.call(handleDragStart, event, manager3);
       }
     );
     manager2.monitor.addEventListener("dragover", (event, manager3) => {
@@ -5357,8 +5627,8 @@ function DragDropProvider(_a3) {
     manager2.monitor.addEventListener(
       "collision",
       (event, manager3) => {
-        var _a4;
-        return (_a4 = handleCollision.current) == null ? void 0 : _a4.call(handleCollision, event, manager3);
+        var _a42;
+        return (_a42 = handleCollision.current) == null ? void 0 : _a42.call(handleCollision, event, manager3);
       }
     );
     startTransition(() => setManager(manager2));
@@ -5366,15 +5636,18 @@ function DragDropProvider(_a3) {
   }, [renderer, input.manager]);
   useOnValueChange(
     plugins,
-    () => manager && (manager.plugins = plugins != null ? plugins : defaultPreset.plugins)
+    () => manager && (manager.plugins = plugins != null ? plugins : defaultPreset.plugins),
+    ...options
   );
   useOnValueChange(
     sensors,
-    () => manager && (manager.sensors = sensors != null ? sensors : defaultPreset.sensors)
+    () => manager && (manager.sensors = sensors != null ? sensors : defaultPreset.sensors),
+    ...options
   );
   useOnValueChange(
     modifiers,
-    () => manager && (manager.modifiers = modifiers != null ? modifiers : [])
+    () => manager && (manager.modifiers = modifiers != null ? modifiers : defaultPreset.modifiers),
+    ...options
   );
   return /* @__PURE__ */ jsx(DragDropContext.Provider, { value: manager, children });
 }
@@ -5382,9 +5655,9 @@ function useDragDropManager() {
   return useContext(DragDropContext);
 }
 function useInstance(initializer) {
-  var _a3;
-  const manager = (_a3 = useDragDropManager()) != null ? _a3 : void 0;
-  const [instance] = useState(() => initializer(void 0));
+  var _a4;
+  const manager = (_a4 = useDragDropManager()) != null ? _a4 : void 0;
+  const [instance] = useState(() => initializer(manager));
   if (instance.manager !== manager) {
     instance.manager = manager;
   }
@@ -5399,7 +5672,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)
+  for (var prop in b2 || (b2 = {}))
     if (__hasOwnProp$2.call(b2, prop))
       __defNormalProp$2(a2, prop, b2[prop]);
   if (__getOwnPropSymbols$2)
@@ -5417,31 +5690,32 @@ function useSortable(input) {
     collisionPriority,
     id,
     data,
+    element,
+    handle,
     index,
     group,
     disabled,
     feedback,
+    modifiers,
     sensors,
-    transition = defaultSortableTransition,
+    target,
     type
   } = input;
-  const handle = currentValue(input.handle);
-  const element = currentValue(input.element);
-  const target = currentValue(input.target);
+  const transition = __spreadValues$2(__spreadValues$2({}, defaultSortableTransition), input.transition);
   const sortable = useInstance((manager) => {
     return new Sortable2(
       __spreadProps$2(__spreadValues$2({}, input), {
-        handle,
-        element,
-        target,
+        transition,
+        register: false,
+        handle: currentValue(handle),
+        element: currentValue(element),
+        target: currentValue(target),
         feedback
       }),
       manager
     );
   });
-  const isDropTarget = useComputed(() => sortable.isDropTarget, [sortable]);
-  const isDragSource = useComputed(() => sortable.isDragSource, [sortable]);
-  const status = useComputed(() => sortable.status, [sortable]);
+  const trackedSortable = useDeepSignal(sortable, shouldUpdateSynchronously);
   useOnValueChange(id, () => sortable.id = id);
   useIsomorphicLayoutEffect(() => {
     r(() => {
@@ -5460,16 +5734,16 @@ function useSortable(input) {
   useOnValueChange(
     index,
     () => {
-      var _a3;
-      if (((_a3 = sortable.manager) == null ? void 0 : _a3.dragOperation.status.idle) && (transition == null ? void 0 : transition.idle)) {
+      var _a4;
+      if (((_a4 = sortable.manager) == null ? void 0 : _a4.dragOperation.status.idle) && (transition == null ? void 0 : transition.idle)) {
         sortable.refreshShape();
       }
     },
     useImmediateEffect
   );
-  useOnValueChange(handle, () => sortable.handle = handle);
-  useOnValueChange(element, () => sortable.element = element);
-  useOnValueChange(target, () => sortable.target = target);
+  useOnElementChange(handle, (handle2) => sortable.handle = handle2);
+  useOnElementChange(element, (element2) => sortable.element = element2);
+  useOnElementChange(target, (target2) => sortable.target = target2);
   useOnValueChange(disabled, () => sortable.disabled = disabled === true);
   useOnValueChange(sensors, () => sortable.sensors = sensors);
   useOnValueChange(
@@ -5481,16 +5755,35 @@ function useSortable(input) {
     () => sortable.collisionPriority = collisionPriority
   );
   useOnValueChange(feedback, () => sortable.feedback = feedback != null ? feedback : "default");
-  useOnValueChange(transition, () => sortable.transition = transition);
+  useOnValueChange(
+    transition,
+    () => sortable.transition = transition,
+    void 0,
+    deepEqual
+  );
+  useOnValueChange(
+    modifiers,
+    () => sortable.modifiers = modifiers,
+    void 0,
+    deepEqual
+  );
+  useOnValueChange(
+    input.alignment,
+    () => sortable.alignment = input.alignment
+  );
   return {
+    sortable: trackedSortable,
+    get isDragging() {
+      return trackedSortable.isDragging;
+    },
+    get isDropping() {
+      return trackedSortable.isDropping;
+    },
     get isDragSource() {
-      return isDragSource.value;
+      return trackedSortable.isDragSource;
     },
     get isDropTarget() {
-      return isDropTarget.value;
-    },
-    get status() {
-      return status.value;
+      return trackedSortable.isDropTarget;
     },
     handleRef: useCallback(
       (element2) => {
@@ -5500,8 +5793,8 @@ 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)) {
+        var _a4, _b2;
+        if (!element2 && ((_a4 = sortable.element) == null ? void 0 : _a4.isConnected) && !((_b2 = sortable.manager) == null ? void 0 : _b2.dragOperation.status.idle)) {
           return;
         }
         sortable.element = element2 != null ? element2 : void 0;
@@ -5510,8 +5803,8 @@ function useSortable(input) {
     ),
     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)) {
+        var _a4, _b2;
+        if (!element2 && ((_a4 = sortable.source) == null ? void 0 : _a4.isConnected) && !((_b2 = sortable.manager) == null ? void 0 : _b2.dragOperation.status.idle)) {
           return;
         }
         sortable.source = element2 != null ? element2 : void 0;
@@ -5520,8 +5813,8 @@ function useSortable(input) {
     ),
     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)) {
+        var _a4, _b2;
+        if (!element2 && ((_a4 = sortable.target) == null ? void 0 : _a4.isConnected) && !((_b2 = sortable.manager) == null ? void 0 : _b2.dragOperation.status.idle)) {
           return;
         }
         sortable.target = element2 != null ? element2 : void 0;
@@ -5530,6 +5823,10 @@ function useSortable(input) {
     )
   };
 }
+function shouldUpdateSynchronously(key, oldValue, newValue) {
+  if (key === "isDragSource" && !newValue && oldValue) return true;
+  return false;
+}
 var __defProp$1 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
@@ -5586,8 +5883,8 @@ function restrictShapeToBoundingRectangle(shape, transform, boundingRect) {
 }
 var _SnapModifier = class _SnapModifier2 extends Modifier {
   apply({ transform }) {
-    var _a3;
-    const { size = 20 } = (_a3 = this.options) != null ? _a3 : {};
+    var _a4;
+    const { size = 20 } = (_a4 = this.options) != null ? _a4 : {};
     const x = typeof size === "number" ? size : size.x;
     const y2 = typeof size === "number" ? size : size.y;
     return __spreadProps$1(__spreadValues$1({}, transform), {
@@ -5598,8 +5895,8 @@ var _SnapModifier = class _SnapModifier2 extends Modifier {
 };
 _SnapModifier.configure = configurator(_SnapModifier);
 var _RestrictToElement = class _RestrictToElement2 extends Modifier {
-  constructor(manager, options) {
-    super(manager, options);
+  constructor(manager, options2) {
+    super(manager, options2);
     this.boundingRectangle = d(null);
     this.destroy = E(() => {
       if (!this.options) {
@@ -5693,9 +5990,9 @@ function arrayMove(array, from, to) {
   return newArray;
 }
 function mutate(items, event, mutation) {
-  var _a3, _b2;
+  var _a4, _b2;
   const { source, target, canceled } = event.operation;
-  if (!source || !target || canceled || source.id === target.id) {
+  if (!source || !target || canceled) {
     if ("preventDefault" in event) event.preventDefault();
     return items;
   }
@@ -5738,7 +6035,7 @@ function mutate(items, event, mutation) {
   }
   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;
+  const position = (_b2 = (_a4 = dragOperation.shape) == null ? void 0 : _a4.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;
@@ -5859,20 +6156,12 @@ const Draggable3 = (props) => {
       children: /* @__PURE__ */ jsx(
         DragDropProvider,
         {
-          onDragOver: ({ operation: { source, target } }) => {
-            if (!source || !target) {
-              return;
-            }
-            setItems((items2) => move(items2, source));
-          },
-          onDragEnd: ({ operation: { source, target }, canceled }) => {
-            if (canceled) {
-              return;
-            }
-            if (!source || !target) {
+          onDragOver: (event) => setItems((items2) => move(items2, event)),
+          onDragEnd: (event) => {
+            if (event == null ? void 0 : event.canceled) {
               return;
             }
-            setItems((items2) => move(items2, source));
+            setItems((items2) => move(items2, event));
             onChange(items);
           },
           children: items.map((item, index) => /* @__PURE__ */ jsx(