@eightshift/ui-components 5.0.1 → 5.0.3

package/dist/components/draggable/draggable.js

@@ -1,5 +1,5 @@
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useLayoutEffect, useMemo, useState, useCallback, startTransition, createContext, useTransition, useContext, useId } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useLayoutEffect, useMemo, useState, useCallback, startTransition, createContext, memo, forwardRef, useImperativeHandle, useContext, useId } from "react";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
 import { DraggableContext } from "./draggable-context.js";
 import { r as reactDomExports } from "../../index-CFozsmNS.js";
@@ -2401,10 +2401,30 @@ var __typeError$3 = (msg) => {
   throw TypeError(msg);
 };
 var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), member.get(obj));
 var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod$1 = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
+function isKeyframeEffect(effect) {
+  if (!effect) return false;
+  if (effect instanceof KeyframeEffect) return true;
+  return "getKeyframes" in effect && typeof effect.getKeyframes === "function";
+}
+function getFinalKeyframe(element, match) {
+  const animations2 = element.getAnimations();
+  if (animations2.length > 0) {
+    for (const animation of animations2) {
+      if (animation.playState !== "running") continue;
+      const { effect } = animation;
+      const keyframes = isKeyframeEffect(effect) ? effect.getKeyframes() : [];
+      const matchedKeyframes = keyframes.filter(match);
+      if (matchedKeyframes.length > 0) {
+        return [matchedKeyframes[matchedKeyframes.length - 1], animation];
+      }
+    }
+  }
+  return null;
+}
 function getBoundingRectangle(element) {
   const { width, height, top, left, bottom, right } = element.getBoundingClientRect();
   return { width, height, top, left, bottom, right };
@@ -2476,36 +2496,6 @@ function getViewportBoundingRectangle(element) {
     height
   };
 }
-function timeout(callback, duration) {
-  const id = setTimeout(callback, duration);
-  return () => clearTimeout(id);
-}
-function throttle(func, limit) {
-  const time = () => performance.now();
-  let cancel;
-  let lastRan;
-  return function(...args) {
-    const context = this;
-    if (!lastRan) {
-      func.apply(context, args);
-      lastRan = time();
-    } else {
-      cancel == null ? void 0 : cancel();
-      cancel = timeout(
-        () => {
-          func.apply(context, args);
-          lastRan = time();
-        },
-        limit - (time() - lastRan)
-      );
-    }
-  };
-}
-function isRectEqual(a2, b2) {
-  if (a2 === b2) return true;
-  if (!a2 || !b2) return false;
-  return a2.top == b2.top && a2.left == b2.left && a2.right == b2.right && a2.bottom == b2.bottom;
-}
 function isOverflowVisible(element, style) {
   if (isDetailsElement(element) && element.open === false) {
     return false;
@@ -2568,6 +2558,128 @@ function getVisibleBoundingRectangle(element, boundingClientRect = element.getBo
   }
   return rect;
 }
+function isSafari() {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+function cloneElement(element) {
+  const selector = "input, textarea, select, canvas, [contenteditable]";
+  const clonedElement = element.cloneNode(true);
+  const fields = Array.from(element.querySelectorAll(selector));
+  const clonedFields = Array.from(clonedElement.querySelectorAll(selector));
+  clonedFields.forEach((field, index) => {
+    const originalField = fields[index];
+    if (isField(field) && isField(originalField)) {
+      if (field.type !== "file") {
+        field.value = originalField.value;
+      }
+      if (field.type === "radio" && field.name) {
+        field.name = `Cloned__${field.name}`;
+      }
+    }
+    if (isCanvasElement(field) && isCanvasElement(originalField) && originalField.width > 0 && originalField.height > 0) {
+      const destCtx = field.getContext("2d");
+      destCtx == null ? void 0 : destCtx.drawImage(originalField, 0, 0);
+    }
+  });
+  return clonedElement;
+}
+function isField(element) {
+  return "value" in element;
+}
+function isCanvasElement(element) {
+  return element.tagName === "CANVAS";
+}
+function getElementFromPoint(document2, { x, y: y2 }) {
+  const element = document2.elementFromPoint(x, y2);
+  if (isIFrameElement(element)) {
+    const { contentDocument } = element;
+    if (contentDocument) {
+      const { left, top } = element.getBoundingClientRect();
+      return getElementFromPoint(contentDocument, {
+        x: x - left,
+        y: y2 - top
+      });
+    }
+  }
+  return element;
+}
+function isIFrameElement(element) {
+  return (element == null ? void 0 : element.tagName) === "IFRAME";
+}
+var ProxiedElements = /* @__PURE__ */ new WeakMap();
+var Listeners = class {
+  constructor() {
+    this.entries = /* @__PURE__ */ new Set();
+    this.clear = () => {
+      for (const entry of this.entries) {
+        const [target, { type, listener, options: options2 }] = entry;
+        target.removeEventListener(type, listener, options2);
+      }
+      this.entries.clear();
+    };
+  }
+  bind(target, input) {
+    const listeners = Array.isArray(input) ? input : [input];
+    const entries = [];
+    for (const descriptor2 of listeners) {
+      const { type, listener, options: options2 } = descriptor2;
+      const entry = [target, descriptor2];
+      target.addEventListener(type, listener, options2);
+      this.entries.add(entry);
+      entries.push(entry);
+    }
+    return function cleanup() {
+      for (const [target2, { type, listener, options: options2 }] of entries) {
+        target2.removeEventListener(type, listener, options2);
+      }
+    };
+  }
+};
+function getFrameElement(el) {
+  const refWindow = el == null ? void 0 : el.ownerDocument.defaultView;
+  if (refWindow && refWindow.self !== refWindow.parent) {
+    return refWindow.frameElement;
+  }
+}
+function getFrameElements(el) {
+  const frames = /* @__PURE__ */ new Set();
+  let frame = getFrameElement(el);
+  while (frame) {
+    frames.add(frame);
+    frame = getFrameElement(frame);
+  }
+  return frames;
+}
+function timeout(callback, duration) {
+  const id = setTimeout(callback, duration);
+  return () => clearTimeout(id);
+}
+function throttle(func, limit) {
+  const time = () => performance.now();
+  let cancel;
+  let lastRan;
+  return function(...args) {
+    const context = this;
+    if (!lastRan) {
+      func.apply(context, args);
+      lastRan = time();
+    } else {
+      cancel == null ? void 0 : cancel();
+      cancel = timeout(
+        () => {
+          func.apply(context, args);
+          lastRan = time();
+        },
+        limit - (time() - lastRan)
+      );
+    }
+  };
+}
+function isRectEqual(a2, b2) {
+  if (a2 === b2) return true;
+  if (!a2 || !b2) return false;
+  return a2.top == b2.top && a2.left == b2.left && a2.right == b2.right && a2.bottom == b2.bottom;
+}
 function isVisible(element, boundingClientRect = element.getBoundingClientRect()) {
   const { width, height } = getVisibleBoundingRectangle(
     element,
@@ -2575,14 +2687,47 @@ function isVisible(element, boundingClientRect = element.getBoundingClientRect()
   );
   return width > 0 && height > 0;
 }
+var Observer = canUseDOM$1 ? ResizeObserver : class MockResizeObserver {
+  observe() {
+  }
+  unobserve() {
+  }
+  disconnect() {
+  }
+};
+var _initialized;
+var ResizeNotifier = class extends Observer {
+  constructor(callback) {
+    super((entries) => {
+      if (!__privateGet$3(this, _initialized)) {
+        __privateSet$3(this, _initialized, true);
+        return;
+      }
+      callback(entries, this);
+    });
+    __privateAdd$3(this, _initialized, false);
+  }
+};
+_initialized = /* @__PURE__ */ new WeakMap();
 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 _visible, _previousBoundingClientRect, _resizeObserver, _positionObserver, _visibilityObserver, _debug, _disconnected, _observePosition, _PositionObserver_instances, notify_fn, updateDebug_fn;
 var PositionObserver = class {
-  constructor(element, callback, options2 = { debug: false }) {
+  constructor(element, callback, options2 = {
+    debug: false,
+    skipInitial: false
+  }) {
     this.element = element;
+    this.callback = callback;
     __privateAdd$3(this, _PositionObserver_instances);
-    __privateAdd$3(this, _callback);
+    this.disconnect = () => {
+      var _a4, _b2, _c3;
+      __privateSet$3(this, _disconnected, true);
+      (_a4 = __privateGet$3(this, _resizeObserver)) == null ? void 0 : _a4.disconnect();
+      (_b2 = __privateGet$3(this, _positionObserver)) == null ? void 0 : _b2.disconnect();
+      __privateGet$3(this, _visibilityObserver).disconnect();
+      (_c3 = __privateGet$3(this, _debug)) == null ? void 0 : _c3.remove();
+    };
     __privateAdd$3(this, _visible, true);
     __privateAdd$3(this, _previousBoundingClientRect);
     __privateAdd$3(this, _resizeObserver);
@@ -2612,9 +2757,9 @@ var PositionObserver = class {
         (entries) => {
           const [entry] = entries;
           const { intersectionRect } = entry;
-          const intersectionRatio = Rectangle.intersectionRatio(
+          const intersectionRatio = entry.intersectionRatio !== 1 ? entry.intersectionRatio : Rectangle.intersectionRatio(
             intersectionRect,
-            visibleRect
+            getVisibleBoundingRectangle(element2)
           );
           if (intersectionRatio !== 1) {
             __privateGet$3(this, _observePosition).call(this);
@@ -2629,9 +2774,16 @@ var PositionObserver = class {
       __privateGet$3(this, _positionObserver).observe(element2);
       __privateMethod$1(this, _PositionObserver_instances, notify_fn).call(this);
     }, THROTTLE_INTERVAL));
-    __privateSet$3(this, _callback, callback);
     this.boundingClientRect = element.getBoundingClientRect();
     __privateSet$3(this, _visible, isVisible(element, this.boundingClientRect));
+    let initial = true;
+    this.callback = (boundingClientRect) => {
+      if (initial) {
+        initial = false;
+        if (options2.skipInitial) return;
+      }
+      callback(boundingClientRect);
+    };
     const root = element.ownerDocument;
     if (options2 == null ? void 0 : options2.debug) {
       __privateSet$3(this, _debug, document.createElement("div"));
@@ -2651,7 +2803,7 @@ var PositionObserver = class {
         if (!width && !height) return;
         if (previousVisible && !visible) {
           (_a4 = __privateGet$3(this, _positionObserver)) == null ? void 0 : _a4.disconnect();
-          __privateGet$3(this, _callback).call(this, null);
+          this.callback(null);
           (_b2 = __privateGet$3(this, _resizeObserver)) == null ? void 0 : _b2.disconnect();
           __privateSet$3(this, _resizeObserver, void 0);
           if (__privateGet$3(this, _debug)) __privateGet$3(this, _debug).style.visibility = "hidden";
@@ -2659,7 +2811,7 @@ var PositionObserver = class {
           __privateGet$3(this, _observePosition).call(this);
         }
         if (visible && !__privateGet$3(this, _resizeObserver)) {
-          __privateSet$3(this, _resizeObserver, new ResizeObserver(__privateGet$3(this, _observePosition)));
+          __privateSet$3(this, _resizeObserver, new ResizeNotifier(__privateGet$3(this, _observePosition)));
           __privateGet$3(this, _resizeObserver).observe(element);
         }
       },
@@ -2668,21 +2820,12 @@ var PositionObserver = class {
         root
       }
     ));
-    if (__privateGet$3(this, _visible)) {
-      __privateGet$3(this, _callback).call(this, this.boundingClientRect);
+    if (__privateGet$3(this, _visible) && !options2.skipInitial) {
+      this.callback(this.boundingClientRect);
     }
     __privateGet$3(this, _visibilityObserver).observe(element);
   }
-  disconnect() {
-    var _a4, _b2, _c3;
-    __privateSet$3(this, _disconnected, true);
-    (_a4 = __privateGet$3(this, _resizeObserver)) == null ? void 0 : _a4.disconnect();
-    (_b2 = __privateGet$3(this, _positionObserver)) == null ? void 0 : _b2.disconnect();
-    __privateGet$3(this, _visibilityObserver).disconnect();
-    (_c3 = __privateGet$3(this, _debug)) == null ? void 0 : _c3.remove();
-  }
 };
-_callback = /* @__PURE__ */ new WeakMap();
 _visible = /* @__PURE__ */ new WeakMap();
 _previousBoundingClientRect = /* @__PURE__ */ new WeakMap();
 _resizeObserver = /* @__PURE__ */ new WeakMap();
@@ -2697,7 +2840,7 @@ notify_fn = function() {
   __privateMethod$1(this, _PositionObserver_instances, updateDebug_fn).call(this);
   if (isRectEqual(this.boundingClientRect, __privateGet$3(this, _previousBoundingClientRect)))
     return;
-  __privateGet$3(this, _callback).call(this, this.boundingClientRect);
+  this.callback(this.boundingClientRect);
   __privateSet$3(this, _previousBoundingClientRect, this.boundingClientRect);
 };
 updateDebug_fn = function() {
@@ -2713,89 +2856,116 @@ updateDebug_fn = function() {
     __privateGet$3(this, _debug).style.height = `${Math.floor(height)}px`;
   }
 };
-function isSafari() {
-  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-}
-function cloneElement(element) {
-  const selector = "input, textarea, select, canvas, [contenteditable]";
-  const clonedElement = element.cloneNode(true);
-  const fields = Array.from(element.querySelectorAll(selector));
-  const clonedFields = Array.from(clonedElement.querySelectorAll(selector));
-  clonedFields.forEach((field, index) => {
-    const originalField = fields[index];
-    if (isField(field) && isField(originalField)) {
-      if (field.type !== "file") {
-        field.value = originalField.value;
-      }
-      if (field.type === "radio" && field.name) {
-        field.name = `Cloned__${field.name}`;
-      }
-    }
-    if (isCanvasElement(field) && isCanvasElement(originalField) && originalField.width > 0 && originalField.height > 0) {
-      const destCtx = field.getContext("2d");
-      destCtx == null ? void 0 : destCtx.drawImage(originalField, 0, 0);
+var framePositionObservers = /* @__PURE__ */ new WeakMap();
+var scrollListeners = /* @__PURE__ */ new WeakMap();
+function addFrameListener(frame, callback) {
+  let cached = framePositionObservers.get(frame);
+  if (!cached) {
+    const observer = new PositionObserver(
+      frame,
+      (boundingClientRect) => {
+        const cached2 = framePositionObservers.get(frame);
+        if (!cached2) return;
+        cached2.callbacks.forEach((callback2) => callback2(boundingClientRect));
+      },
+      { skipInitial: true }
+    );
+    cached = { disconnect: observer.disconnect, callbacks: /* @__PURE__ */ new Set() };
+  }
+  cached.callbacks.add(callback);
+  framePositionObservers.set(frame, cached);
+  return () => {
+    cached.callbacks.delete(callback);
+    if (cached.callbacks.size === 0) {
+      framePositionObservers.delete(frame);
+      cached.disconnect();
     }
-  });
-  return clonedElement;
-}
-function isField(element) {
-  return "value" in element;
-}
-function isCanvasElement(element) {
-  return element.tagName === "CANVAS";
+  };
 }
-function getElementFromPoint(document2, { x, y: y2 }) {
-  const element = document2.elementFromPoint(x, y2);
-  if (isIFrameElement(element)) {
-    const { contentDocument } = element;
-    if (contentDocument) {
-      const { left, top } = element.getBoundingClientRect();
-      return getElementFromPoint(contentDocument, {
-        x: x - left,
-        y: y2 - top
-      });
-    }
+function observeParentFrames(frames, callback) {
+  const cleanup = /* @__PURE__ */ new Set();
+  for (const frame of frames) {
+    const remove = addFrameListener(frame, callback);
+    cleanup.add(remove);
   }
-  return element;
-}
-function isIFrameElement(element) {
-  return (element == null ? void 0 : element.tagName) === "IFRAME";
+  return () => cleanup.forEach((remove) => remove());
 }
-var ProxiedElements = /* @__PURE__ */ new WeakMap();
-var Listeners = class {
-  constructor() {
-    this.entries = /* @__PURE__ */ new Set();
-    this.clear = () => {
-      for (const entry of this.entries) {
-        const [target, { type, listener, options: options2 }] = entry;
-        target.removeEventListener(type, listener, options2);
+function addScrollListener(element, callback) {
+  var _a4;
+  const doc = element.ownerDocument;
+  if (!scrollListeners.has(doc)) {
+    const controller = new AbortController();
+    const listeners2 = /* @__PURE__ */ new Set();
+    document.addEventListener(
+      "scroll",
+      (event) => listeners2.forEach((listener) => listener(event)),
+      {
+        capture: true,
+        passive: true,
+        signal: controller.signal
       }
-      this.entries.clear();
-    };
+    );
+    scrollListeners.set(doc, { disconnect: () => controller.abort(), listeners: listeners2 });
   }
-  bind(target, input) {
-    const listeners = Array.isArray(input) ? input : [input];
-    const entries = [];
-    for (const descriptor2 of listeners) {
-      const { type, listener, options: options2 } = descriptor2;
-      const entry = [target, descriptor2];
-      target.addEventListener(type, listener, options2);
-      this.entries.add(entry);
-      entries.push(entry);
+  const { listeners, disconnect } = (_a4 = scrollListeners.get(doc)) != null ? _a4 : {};
+  if (!listeners || !disconnect) return () => {
+  };
+  listeners.add(callback);
+  return () => {
+    listeners.delete(callback);
+    if (listeners.size === 0) {
+      disconnect();
+      scrollListeners.delete(doc);
     }
-    return function cleanup() {
-      for (const [target2, { type, listener, options: options2 }] of entries) {
-        target2.removeEventListener(type, listener, options2);
+  };
+}
+var _elementObserver, _disconnected2, _frames, _handleScroll;
+var FrameObserver = class {
+  constructor(element, callback, options2) {
+    this.callback = callback;
+    __privateAdd$3(this, _elementObserver);
+    __privateAdd$3(this, _disconnected2, false);
+    __privateAdd$3(this, _frames);
+    __privateAdd$3(this, _handleScroll, throttle((event) => {
+      if (__privateGet$3(this, _disconnected2)) return;
+      if (!event.target) return;
+      if ("contains" in event.target && typeof event.target.contains === "function") {
+        for (const frame of __privateGet$3(this, _frames)) {
+          if (event.target.contains(frame)) {
+            this.callback(__privateGet$3(this, _elementObserver).boundingClientRect);
+            break;
+          }
+        }
       }
+    }, THROTTLE_INTERVAL));
+    const frames = getFrameElements(element);
+    const unobserveParentFrames = observeParentFrames(frames, callback);
+    const removeScrollListener = addScrollListener(element, __privateGet$3(this, _handleScroll));
+    __privateSet$3(this, _frames, frames);
+    __privateSet$3(this, _elementObserver, new PositionObserver(element, callback, options2));
+    this.disconnect = () => {
+      if (__privateGet$3(this, _disconnected2)) return;
+      __privateSet$3(this, _disconnected2, true);
+      unobserveParentFrames();
+      removeScrollListener();
+      __privateGet$3(this, _elementObserver).disconnect();
     };
   }
 };
+_elementObserver = /* @__PURE__ */ new WeakMap();
+_disconnected2 = /* @__PURE__ */ new WeakMap();
+_frames = /* @__PURE__ */ new WeakMap();
+_handleScroll = /* @__PURE__ */ new WeakMap();
 function supportsPopover(element) {
   return "showPopover" in element && "hidePopover" in element && typeof element.showPopover === "function" && typeof element.hidePopover === "function";
 }
 function showPopover(element) {
-  if (supportsPopover(element) && element.isConnected && element.hasAttribute("popover")) {
-    element.showPopover();
+  try {
+    if (supportsPopover(element) && element.isConnected && element.hasAttribute("popover") && // This selector can throw an error in browsers that don't support it
+    !element.matches(":popover-open")) {
+      element.showPopover();
+    }
+  } catch (error) {
   }
 }
 function isDocumentScrollingElement(element) {
@@ -2853,7 +3023,7 @@ function canScroll(scrollableElement, by) {
     y: top || bottom
   };
 }
-var Scheduler = class {
+var Scheduler$1 = class Scheduler {
   constructor(scheduler4) {
     this.scheduler = scheduler4;
     this.pending = false;
@@ -2881,10 +3051,14 @@ var Scheduler = class {
     return new Promise((resolve) => this.resolvers.add(resolve));
   }
 };
-var scheduler = new Scheduler(
-  (callback) => requestAnimationFrame(callback)
-);
-var scheduler2 = new Scheduler((callback) => setTimeout(callback, 50));
+var scheduler = new Scheduler$1((callback) => {
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(callback);
+  } else {
+    callback();
+  }
+});
+var scheduler2 = new Scheduler$1((callback) => setTimeout(callback, 50));
 var cachedStyles = /* @__PURE__ */ new Map();
 var clear = cachedStyles.clear.bind(cachedStyles);
 function getComputedStyles(element, cached = false) {
@@ -2957,13 +3131,6 @@ function getFirstScrollableAncestor(node) {
   const [firstScrollableAncestor] = getScrollableAncestors(node, { limit: 1 });
   return firstScrollableAncestor != null ? firstScrollableAncestor : null;
 }
-function getFrameElement(el) {
-  const refWindow = el == null ? void 0 : el.ownerDocument.defaultView;
-  if (refWindow && refWindow.self !== refWindow.parent) {
-    return refWindow.frameElement;
-  }
-  return null;
-}
 function getFrameTransform(el, boundary = window.frameElement) {
   const transform = {
     x: 0,
@@ -3181,6 +3348,21 @@ function scrollIntoViewIfNeeded(el, centerIfNeeded = false) {
     el.scrollIntoView(alignWithTop);
   }
 }
+function applyTransform(rect, parsedTransform, transformOrigin) {
+  const { scaleX, scaleY, x: translateX, y: translateY } = parsedTransform;
+  const x = rect.left + translateX + (1 - scaleX) * parseFloat(transformOrigin);
+  const y2 = rect.top + translateY + (1 - scaleY) * parseFloat(transformOrigin.slice(transformOrigin.indexOf(" ") + 1));
+  const w2 = scaleX ? rect.width * scaleX : rect.width;
+  const h2 = scaleY ? rect.height * scaleY : rect.height;
+  return {
+    width: w2,
+    height: h2,
+    top: y2,
+    right: x + w2,
+    bottom: y2 + h2,
+    left: x
+  };
+}
 function inverseTransform(rect, parsedTransform, transformOrigin) {
   const { scaleX, scaleY, x: translateX, y: translateY } = parsedTransform;
   const x = rect.left - translateX - (1 - scaleX) * parseFloat(transformOrigin);
@@ -3199,25 +3381,6 @@ function inverseTransform(rect, parsedTransform, transformOrigin) {
 function animateTransform({ element, keyframes, options: options2 }) {
   return element.animate(keyframes, options2).finished;
 }
-function isKeyframeEffect(effect) {
-  if (!effect) return false;
-  if (effect instanceof KeyframeEffect) return true;
-  return "getKeyframes" in effect && typeof effect.getKeyframes === "function";
-}
-function getFinalKeyframe(element, match) {
-  const animations2 = element.getAnimations();
-  if (animations2.length > 0) {
-    for (const animation of animations2) {
-      const { effect } = animation;
-      const keyframes = isKeyframeEffect(effect) ? effect.getKeyframes() : [];
-      const matchedKeyframes = keyframes.filter(match);
-      if (matchedKeyframes.length > 0) {
-        return matchedKeyframes[matchedKeyframes.length - 1];
-      }
-    }
-  }
-  return null;
-}
 function computeTranslate(element, translate = getComputedStyles(element).translate, projected = true) {
   if (projected) {
     const keyframe = getFinalKeyframe(
@@ -3225,7 +3388,7 @@ function computeTranslate(element, translate = getComputedStyles(element).transl
       (keyframe2) => "translate" in keyframe2
     );
     if (keyframe) {
-      const { translate: translate2 = "" } = keyframe;
+      const { translate: translate2 = "" } = keyframe[0];
       if (typeof translate2 === "string") {
         const finalTranslate = parseTranslate(translate2);
         if (finalTranslate) {
@@ -3242,6 +3405,51 @@ function computeTranslate(element, translate = getComputedStyles(element).transl
   }
   return { x: 0, y: 0, z: 0 };
 }
+var scheduler3$1 = new Scheduler$1((callback) => setTimeout(callback, 0));
+var animations = /* @__PURE__ */ new Map();
+var clear2 = animations.clear.bind(animations);
+function getDocumentAnimations(element) {
+  const document2 = element.ownerDocument;
+  let documentAnimations = animations.get(document2);
+  if (documentAnimations) return documentAnimations;
+  documentAnimations = document2.getAnimations();
+  animations.set(document2, documentAnimations);
+  scheduler3$1.schedule(clear2);
+  const elementAnimations = documentAnimations.filter(
+    (animation) => isKeyframeEffect(animation.effect) && animation.effect.target === element
+  );
+  animations.set(element, elementAnimations);
+  return documentAnimations;
+}
+function forceFinishAnimations(element, options2) {
+  const animations2 = getDocumentAnimations(element).filter((animation) => {
+    var _a4, _b2;
+    if (isKeyframeEffect(animation.effect)) {
+      const { target } = animation.effect;
+      const isValidTarget = (_b2 = target && ((_a4 = options2.isValidTarget) == null ? void 0 : _a4.call(options2, target))) != null ? _b2 : true;
+      if (isValidTarget) {
+        return animation.effect.getKeyframes().some((keyframe) => {
+          for (const property of options2.properties) {
+            if (keyframe[property]) return true;
+          }
+        });
+      }
+    }
+  }).map((animation) => {
+    const { effect, currentTime } = animation;
+    const duration = effect == null ? void 0 : effect.getComputedTiming().duration;
+    if (animation.pending || animation.playState === "finished") return;
+    if (typeof duration == "number" && typeof currentTime == "number" && currentTime < duration) {
+      animation.currentTime = duration;
+      return () => {
+        animation.currentTime = currentTime;
+      };
+    }
+  });
+  if (animations2.length > 0) {
+    return () => animations2.forEach((reset) => reset == null ? void 0 : reset());
+  }
+}
 var DOMRectangle = class extends Rectangle {
   constructor(element, options2 = {}) {
     var _a4, _b2, _c3, _d2;
@@ -3250,7 +3458,10 @@ var DOMRectangle = class extends Rectangle {
       ignoreTransforms,
       getBoundingClientRect = getBoundingRectangle
     } = options2;
-    const resetAnimations = forceFinishAnimations(element);
+    const resetAnimations = forceFinishAnimations(element, {
+      properties: ["transform", "translate", "scale", "width", "height"],
+      isValidTarget: (target) => (target !== element || isSafari()) && target.contains(element)
+    });
     const boundingRectangle = getBoundingClientRect(element);
     let { top, left, width, height } = boundingRectangle;
     let updated;
@@ -3260,8 +3471,8 @@ var DOMRectangle = class extends Rectangle {
       x: (_a4 = parsedTransform == null ? void 0 : parsedTransform.scaleX) != null ? _a4 : 1,
       y: (_b2 = parsedTransform == null ? void 0 : parsedTransform.scaleY) != null ? _b2 : 1
     };
+    const projectedTransform = getProjectedTransform(element, computedStyles);
     resetAnimations == null ? void 0 : resetAnimations();
-    const projectedTransform = getProjectedTransform(element);
     if (parsedTransform) {
       updated = inverseTransform(
         boundingRectangle,
@@ -3279,11 +3490,16 @@ var DOMRectangle = class extends Rectangle {
       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;
-      width = width * projectedTransform.scaleX;
-      height = height * projectedTransform.scaleY;
+    if (projectedTransform && !ignoreTransforms && updated) {
+      const projected = applyTransform(
+        updated,
+        projectedTransform,
+        computedStyles.transformOrigin
+      );
+      top = projected.top;
+      left = projected.left;
+      width = projected.width;
+      height = projected.height;
       scale.x = projectedTransform.scaleX;
       scale.y = projectedTransform.scaleY;
     }
@@ -3303,21 +3519,22 @@ var DOMRectangle = class extends Rectangle {
     this.intrinsicHeight = intrinsic.height;
   }
 };
-function getProjectedTransform(element) {
+function getProjectedTransform(element, computedStyles) {
   var _a4;
   const animations2 = element.getAnimations();
   let projectedTransform = null;
   if (!animations2.length) return null;
   for (const animation of animations2) {
+    if (animation.playState !== "running") continue;
     const keyframes = isKeyframeEffect(animation.effect) ? animation.effect.getKeyframes() : [];
     const keyframe = keyframes[keyframes.length - 1];
     if (!keyframe) continue;
-    const { transform = "", translate = "", scale = "" } = keyframe;
+    const { transform, translate, scale } = keyframe;
     if (transform || translate || scale) {
       const parsedTransform = parseTransform({
-        transform: typeof transform === "string" ? transform : "",
-        translate: typeof translate === "string" ? translate : "",
-        scale: typeof scale === "string" ? scale : ""
+        transform: typeof transform === "string" && transform ? transform : computedStyles.transform,
+        translate: typeof translate === "string" && translate ? translate : computedStyles.translate,
+        scale: typeof scale === "string" && scale ? scale : computedStyles.scale
       });
       if (parsedTransform) {
         projectedTransform = projectedTransform ? {
@@ -3332,49 +3549,6 @@ function getProjectedTransform(element) {
   }
   return projectedTransform;
 }
-var scheduler3 = new Scheduler((callback) => setTimeout(callback, 0));
-var animations = /* @__PURE__ */ new Map();
-var clear2 = animations.clear.bind(animations);
-function getDocumentAnimations(element) {
-  const document2 = element.ownerDocument;
-  let documentAnimations = animations.get(document2);
-  if (documentAnimations) return documentAnimations;
-  documentAnimations = document2.getAnimations();
-  animations.set(document2, documentAnimations);
-  scheduler3.schedule(clear2);
-  const elementAnimations = documentAnimations.filter(
-    (animation) => isKeyframeEffect(animation.effect) && animation.effect.target === element
-  );
-  animations.set(element, elementAnimations);
-  return documentAnimations;
-}
-function forceFinishAnimations(element) {
-  const animations2 = getDocumentAnimations(element).filter((animation) => {
-    if (isKeyframeEffect(animation.effect)) {
-      const { target } = animation.effect;
-      const isValidTarget = target && (isSafari() || target !== element);
-      if (isValidTarget && target.contains(element)) {
-        return animation.effect.getKeyframes().some((keyframe) => {
-          const { transform, translate, scale, width, height } = keyframe;
-          return transform || translate || scale || width || height;
-        });
-      }
-    }
-  }).map((animation) => {
-    const { effect, currentTime } = animation;
-    const duration = effect == null ? void 0 : effect.getComputedTiming().duration;
-    if (animation.pending) return;
-    if (typeof duration == "number" && typeof currentTime == "number" && currentTime < duration) {
-      animation.currentTime = duration;
-      return () => {
-        animation.currentTime = currentTime;
-      };
-    }
-  });
-  if (animations2.length > 0) {
-    return () => animations2.forEach((reset) => reset == null ? void 0 : reset());
-  }
-}
 function supportsStyle(element) {
   return "style" in element && typeof element.style === "object" && element.style !== null && "setProperty" in element.style && "removeProperty" in element.style && typeof element.style.setProperty === "function" && typeof element.style.removeProperty === "function";
 }
@@ -3436,6 +3610,14 @@ function isPointerEvent(event) {
   const { PointerEvent } = getWindow(event.target);
   return event instanceof PointerEvent;
 }
+function isTextInput(target) {
+  if (!isElement(target)) return false;
+  const { tagName } = target;
+  return tagName === "INPUT" || tagName === "TEXTAREA" || isContentEditable(target);
+}
+function isContentEditable(element) {
+  return element.hasAttribute("contenteditable") && element.getAttribute("contenteditable") !== "false";
+}
 var ids = {};
 function generateUniqueId(prefix) {
   const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
@@ -3537,7 +3719,7 @@ var defaultAnnouncements = {
     return `Picked up draggable item ${source.id}.`;
   },
   dragover({ operation: { source, target } }) {
-    if (!source) return;
+    if (!source || source.id === (target == null ? void 0 : target.id)) return;
     if (target) {
       return `Draggable item ${source.id} was moved over droppable target ${target.id}.`;
     }
@@ -3583,6 +3765,7 @@ function createLiveRegion(id) {
   element.style.setProperty("white-space", "nowrap");
   return element;
 }
+var debouncedEvents = ["dragover", "dragmove"];
 var Accessibility = class extends Plugin {
   constructor(manager, options2) {
     super(manager);
@@ -3593,71 +3776,137 @@ var Accessibility = class extends Plugin {
         announcement: announcementPrefix = defaultAnnouncementIdPrefix
       } = {},
       announcements = defaultAnnouncements,
-      screenReaderInstructions = defaultScreenReaderInstructions
+      screenReaderInstructions = defaultScreenReaderInstructions,
+      debounce: debounceMs = 500
     } = options2 != null ? options2 : {};
     const descriptionId = id ? `${descriptionPrefix}-${id}` : generateUniqueId(descriptionPrefix);
     const announcementId = id ? `${announcementPrefix}-${id}` : generateUniqueId(announcementPrefix);
     let hiddenTextElement;
     let liveRegionElement;
+    let liveRegionTextNode;
+    let latestAnnouncement;
+    const updateAnnouncement = (value = latestAnnouncement) => {
+      if (!liveRegionTextNode || !value) return;
+      if ((liveRegionTextNode == null ? void 0 : liveRegionTextNode.nodeValue) !== value) {
+        liveRegionTextNode.nodeValue = value;
+      }
+    };
+    const scheduleUpdateAnnouncement = () => scheduler.schedule(updateAnnouncement);
+    const debouncedUpdateAnnouncement = debounce(
+      scheduleUpdateAnnouncement,
+      debounceMs
+    );
     const eventListeners = Object.entries(announcements).map(
       ([eventName, getAnnouncement]) => {
         return this.manager.monitor.addEventListener(
           eventName,
           (event, manager2) => {
+            const element = liveRegionTextNode;
+            if (!element) return;
             const announcement = getAnnouncement == null ? void 0 : getAnnouncement(event, manager2);
-            if (announcement && liveRegionElement) {
-              liveRegionElement.textContent = announcement;
+            if (announcement && element.nodeValue !== announcement) {
+              latestAnnouncement = announcement;
+              if (debouncedEvents.includes(eventName)) {
+                debouncedUpdateAnnouncement();
+              } else {
+                scheduleUpdateAnnouncement();
+                debouncedUpdateAnnouncement.cancel();
+              }
             }
           }
         );
       }
     );
     const initialize = () => {
-      hiddenTextElement = createHiddenText(
-        descriptionId,
-        screenReaderInstructions.draggable
-      );
-      liveRegionElement = createLiveRegion(announcementId);
-      document.body.append(hiddenTextElement, liveRegionElement);
+      let elements = [];
+      if (!(hiddenTextElement == null ? void 0 : hiddenTextElement.isConnected)) {
+        hiddenTextElement = createHiddenText(
+          descriptionId,
+          screenReaderInstructions.draggable
+        );
+        elements.push(hiddenTextElement);
+      }
+      if (!(liveRegionElement == null ? void 0 : liveRegionElement.isConnected)) {
+        liveRegionElement = createLiveRegion(announcementId);
+        liveRegionTextNode = document.createTextNode("");
+        liveRegionElement.appendChild(liveRegionTextNode);
+        elements.push(liveRegionElement);
+      }
+      if (elements.length > 0) {
+        document.body.append(...elements);
+      }
     };
-    const cleanupEffects = effects(() => {
-      for (const draggable of manager.registry.draggables.value) {
-        const { element, handle } = draggable;
-        const activator = handle != null ? handle : element;
+    const mutations = /* @__PURE__ */ new Set();
+    function executeMutations() {
+      for (const operation of mutations) {
+        operation();
+      }
+    }
+    this.registerEffect(() => {
+      var _a4;
+      mutations.clear();
+      for (const draggable of this.manager.registry.draggables.value) {
+        const activator = (_a4 = draggable.handle) != null ? _a4 : draggable.element;
         if (activator) {
           if (!hiddenTextElement || !liveRegionElement) {
-            initialize();
+            mutations.add(initialize);
           }
           if ((!isFocusable(activator) || isSafari()) && !activator.hasAttribute("tabindex")) {
-            activator.setAttribute("tabindex", "0");
+            mutations.add(() => activator.setAttribute("tabindex", "0"));
           }
           if (!activator.hasAttribute("role") && !(activator.tagName.toLowerCase() === "button")) {
-            activator.setAttribute("role", defaultAttributes.role);
+            mutations.add(
+              () => activator.setAttribute("role", defaultAttributes.role)
+            );
           }
-          if (!activator.hasAttribute("role-description")) {
-            activator.setAttribute(
-              "aria-roledescription",
-              defaultAttributes.roleDescription
+          if (!activator.hasAttribute("aria-roledescription")) {
+            mutations.add(
+              () => activator.setAttribute(
+                "aria-roledescription",
+                defaultAttributes.roleDescription
+              )
             );
           }
           if (!activator.hasAttribute("aria-describedby")) {
-            activator.setAttribute("aria-describedby", descriptionId);
+            mutations.add(
+              () => activator.setAttribute("aria-describedby", descriptionId)
+            );
           }
           for (const key of ["aria-pressed", "aria-grabbed"]) {
-            activator.setAttribute(key, String(draggable.isDragging));
+            const value = String(draggable.isDragging);
+            if (activator.getAttribute(key) !== value) {
+              mutations.add(() => activator.setAttribute(key, value));
+            }
+          }
+          const disabled = String(draggable.disabled);
+          if (activator.getAttribute("aria-disabled") !== disabled) {
+            mutations.add(
+              () => activator.setAttribute("aria-disabled", disabled)
+            );
           }
-          activator.setAttribute("aria-disabled", String(draggable.disabled));
         }
       }
-      this.destroy = () => {
-        hiddenTextElement == null ? void 0 : hiddenTextElement.remove();
-        liveRegionElement == null ? void 0 : liveRegionElement.remove();
-        eventListeners.forEach((unsubscribe) => unsubscribe());
-        cleanupEffects();
-      };
+      if (mutations.size > 0) {
+        scheduler.schedule(executeMutations);
+      }
     });
+    this.destroy = () => {
+      super.destroy();
+      hiddenTextElement == null ? void 0 : hiddenTextElement.remove();
+      liveRegionElement == null ? void 0 : liveRegionElement.remove();
+      eventListeners.forEach((unsubscribe) => unsubscribe());
+    };
   }
 };
+function debounce(fn, wait) {
+  let timeout2;
+  const debounced = () => {
+    clearTimeout(timeout2);
+    timeout2 = setTimeout(fn, wait);
+  };
+  debounced.cancel = () => clearTimeout(timeout2);
+  return debounced;
+}
 var Cursor = class extends Plugin {
   constructor(manager, options2) {
     super(manager, options2);
@@ -3710,7 +3959,6 @@ var CSS_RULES = `
     max-width: var(${CSS_PREFIX}width, auto);
     height: var(${CSS_PREFIX}height, auto);
     max-height: var(${CSS_PREFIX}height, auto);
-    box-sizing: border-box;
     transition: var(${CSS_PREFIX}transition) !important;
   }
 
@@ -3752,6 +4000,7 @@ var CSS_RULES = `
   }
   [${ATTRIBUTE}]::backdrop, [${ATTR_PREFIX}overlay]:not([${ATTRIBUTE}]) {
     display: none;
+    visibility: hidden;
   }
 `.replace(/\n+/g, " ").replace(/\s+/g, " ").trim();
 function createPlaceholder(source, type = "hidden") {
@@ -3822,10 +4071,11 @@ function preventPopoverClose(event) {
 function isTableRow(element) {
   return element.tagName === "TR";
 }
+var styleSheetRegistry = /* @__PURE__ */ new Map();
 var _overlay_dec, _a$1, _init$2, _overlay, _Feedback_instances, render_fn, injectStyles_fn;
 var _Feedback = class _Feedback2 extends (_a$1 = Plugin, _overlay_dec = [reactive], _a$1) {
   constructor(manager, options2) {
-    super(manager);
+    super(manager, options2);
     __privateAdd$2(this, _Feedback_instances);
     __privateAdd$2(this, _overlay, __runInitializers$2(_init$2, 8, this)), __runInitializers$2(_init$2, 11, this);
     this.state = {
@@ -3837,8 +4087,15 @@ var _Feedback = class _Feedback2 extends (_a$1 = Plugin, _overlay_dec = [reactiv
   }
   destroy() {
     super.destroy();
-    injectedStyleTags.forEach((style) => style.remove());
-    injectedStyleTags.clear();
+    for (const [doc, registration] of styleSheetRegistry.entries()) {
+      if (registration.instances.has(this)) {
+        registration.instances.delete(this);
+        if (registration.instances.size === 0) {
+          registration.cleanup();
+          styleSheetRegistry.delete(doc);
+        }
+      }
+    }
   }
 };
 _init$2 = __decoratorStart$2(_a$1);
@@ -3881,8 +4138,23 @@ render_fn = function() {
   let elementMutationObserver;
   let documentMutationObserver;
   const styles = new Styles(feedbackElement);
-  const { transition, translate } = getComputedStyles(element);
+  const {
+    transition,
+    translate,
+    boxSizing,
+    paddingBlockStart,
+    paddingBlockEnd,
+    paddingInlineStart,
+    paddingInlineEnd,
+    borderInlineStartWidth,
+    borderInlineEndWidth,
+    borderBlockStartWidth,
+    borderBlockEndWidth
+  } = getComputedStyles(element);
   const clone = feedback === "clone";
+  const contentBox = boxSizing === "content-box";
+  const widthOffset = contentBox ? parseInt(paddingInlineStart) + parseInt(paddingInlineEnd) + parseInt(borderInlineStartWidth) + parseInt(borderInlineEndWidth) : 0;
+  const heightOffset = contentBox ? parseInt(paddingBlockStart) + parseInt(paddingBlockEnd) + parseInt(borderBlockStartWidth) + parseInt(borderBlockEndWidth) : 0;
   const placeholder = feedback !== "move" && !this.overlay ? createPlaceholder(source, clone ? "clone" : "hidden") : null;
   const isKeyboardOperation = n(
     () => isKeyboardEvent(manager.dragOperation.activatorEvent)
@@ -3943,15 +4215,16 @@ render_fn = function() {
   const tX = transform.x * frameTransform.scaleX + initialTranslate.x;
   const tY = transform.y * frameTransform.scaleY + initialTranslate.y;
   const translateString = `${tX}px ${tY}px 0`;
+  const transitionString = transition ? `${transition}, translate 0ms linear` : "";
   styles.set(
     {
-      width,
-      height,
+      width: width - widthOffset,
+      height: height - heightOffset,
       top: projected.top,
       left: projected.left,
       translate: translateString,
+      transition: transitionString,
       scale: crossFrame ? `${scaleDelta.x} ${scaleDelta.y}` : "",
-      transition,
       "transform-origin": `${transformOrigin.x * 100}% ${transformOrigin.y * 100}%`
     },
     CSS_PREFIX
@@ -3981,8 +4254,8 @@ render_fn = function() {
     const dY = (height - placeholderShape.height) * origin.y + delta.y;
     styles.set(
       {
-        width: placeholderShape.width,
-        height: placeholderShape.height,
+        width: placeholderShape.width - widthOffset,
+        height: placeholderShape.height - heightOffset,
         top: top + dY,
         left: left + dX
       },
@@ -3997,9 +4270,17 @@ render_fn = function() {
         cell.style.width = `${placeholderCell.offsetWidth}px`;
       }
     }
-    dragOperation.shape = new DOMRectangle(element);
+    dragOperation.shape = new DOMRectangle(feedbackElement);
   });
-  dragOperation.shape = new DOMRectangle(feedbackElement);
+  const initialShape = new DOMRectangle(feedbackElement);
+  n(() => dragOperation.shape = initialShape);
+  const feedbackWindow = getWindow(feedbackElement);
+  const handleWindowResize = (event) => {
+    this.manager.actions.stop({ event });
+  };
+  if (isKeyboardOperation) {
+    feedbackWindow.addEventListener("resize", handleWindowResize);
+  }
   if (n(() => source.status) === "idle") {
     requestAnimationFrame(() => source.status = "dragging");
   }
@@ -4085,6 +4366,12 @@ render_fn = function() {
         x: transform2.x / frameTransform.scaleX + initialTranslate2.x,
         y: transform2.y / frameTransform.scaleY + initialTranslate2.y
       };
+      const previousTranslate = state.current.translate;
+      const modifiers = n(() => dragOperation.modifiers);
+      const currentShape = n(() => {
+        var _a6;
+        return (_a6 = dragOperation.shape) == null ? void 0 : _a6.current;
+      });
       const translateTransition = isKeyboardOperation ? "250ms cubic-bezier(0.25, 1, 0.5, 1)" : "0ms linear";
       styles.set(
         {
@@ -4094,17 +4381,15 @@ render_fn = function() {
         CSS_PREFIX
       );
       elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
-      const previousTranslate = state.current.translate;
-      const modifiers = n(() => dragOperation.modifiers);
-      const currentShape = n(() => {
-        var _a6;
-        return (_a6 = dragOperation.shape) == null ? void 0 : _a6.current;
-      });
-      if (currentShape && previousTranslate && !modifiers.length) {
+      if (currentShape && currentShape !== initialShape && previousTranslate && !modifiers.length) {
         const delta2 = Point$1.delta(translate2, previousTranslate);
         dragOperation.shape = Rectangle.from(
           currentShape.boundingRectangle
-        ).translate(delta2.x, delta2.y);
+        ).translate(
+          // Need to take into account frame transform when optimistically updating shape
+          delta2.x * frameTransform.scaleX,
+          delta2.y * frameTransform.scaleY
+        );
       } else {
         dragOperation.shape = new DOMRectangle(feedbackElement);
       }
@@ -4128,6 +4413,7 @@ render_fn = function() {
     elementMutationObserver == null ? void 0 : elementMutationObserver.disconnect();
     documentMutationObserver == null ? void 0 : documentMutationObserver.disconnect();
     resizeObserver.disconnect();
+    feedbackWindow.removeEventListener("resize", handleWindowResize);
     if (supportsPopover(feedbackElement)) {
       feedbackElement.removeEventListener(
         "beforetoggle",
@@ -4164,27 +4450,25 @@ render_fn = function() {
         return;
       }
       const dropAnimation = () => {
+        var _a5, _b3;
         {
           showPopover(feedbackElement);
+          const [, animation] = (_a5 = getFinalKeyframe(
+            feedbackElement,
+            (keyframe) => "translate" in keyframe
+          )) != null ? _a5 : [];
+          animation == null ? void 0 : animation.pause();
           const target = placeholder != null ? placeholder : element;
-          const animations2 = feedbackElement.getAnimations();
-          if (animations2.length) {
-            animations2.forEach((animation) => {
-              const { effect: effect9 } = animation;
-              if (isKeyframeEffect(effect9) && effect9.getKeyframes().some((keyframe) => keyframe.translate)) {
-                animation.finish();
-              }
-            });
-          }
           const options22 = {
             frameTransform: isSameFrame(feedbackElement, target) ? null : void 0
           };
           const current = new DOMRectangle(feedbackElement, options22);
+          const currentTranslate = (_b3 = parseTranslate(getComputedStyles(feedbackElement).translate)) != null ? _b3 : translate2;
           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
+            x: currentTranslate.x - delta2.x,
+            y: currentTranslate.y - delta2.y
           };
           const heightKeyframes = Math.round(current.intrinsicHeight) !== Math.round(final.intrinsicHeight) ? {
             minHeight: [
@@ -4213,7 +4497,7 @@ render_fn = function() {
             element: feedbackElement,
             keyframes: __spreadProps$4(__spreadValues$4(__spreadValues$4({}, heightKeyframes), widthKeyframes), {
               translate: [
-                `${translate2.x}px ${translate2.y}px 0`,
+                `${currentTranslate.x}px ${currentTranslate.y}px 0`,
                 `${finalTranslate.x}px ${finalTranslate.y}px 0`
               ]
             }),
@@ -4223,6 +4507,7 @@ render_fn = function() {
             }
           }).then(() => {
             feedbackElement.removeAttribute(DROPPING_ATTRIBUTE);
+            animation == null ? void 0 : animation.finish();
             onComplete == null ? void 0 : onComplete();
             requestAnimationFrame(restoreFocus);
           });
@@ -4236,17 +4521,37 @@ render_fn = function() {
 injectStyles_fn = function() {
   var _a4, _b2;
   const { status, source, target } = this.manager.dragOperation;
-  if (status.initialized) {
+  if (status.initializing) {
     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)) {
+      let registration = styleSheetRegistry.get(doc);
+      if (!registration) {
         const style = document.createElement("style");
         style.textContent = CSS_RULES;
         doc.head.prepend(style);
-        injectedStyleTags.set(doc, style);
+        const mutationObserver = new MutationObserver((entries) => {
+          for (const entry of entries) {
+            if (entry.type === "childList") {
+              const removedNodes = Array.from(entry.removedNodes);
+              if (removedNodes.length > 0 && removedNodes.includes(style)) {
+                doc.head.prepend(style);
+              }
+            }
+          }
+        });
+        mutationObserver.observe(doc.head, { childList: true });
+        registration = {
+          cleanup: () => {
+            mutationObserver.disconnect();
+            style.remove();
+          },
+          instances: /* @__PURE__ */ new Set()
+        };
+        styleSheetRegistry.set(doc, registration);
       }
+      registration.instances.add(this);
     }
   }
 };
@@ -4254,7 +4559,6 @@ __decorateElement$2(_init$2, 4, "overlay", _overlay_dec, _Feedback, _overlay);
 __decoratorMetadata$2(_init$2, _Feedback);
 _Feedback.configure = configurator(_Feedback);
 var Feedback = _Feedback;
-var injectedStyleTags = /* @__PURE__ */ new Map();
 var LOCKED = true;
 var UNLOCKED = false;
 var _dec, _a2, _dec2, _b, _init2, __b, __a;
@@ -4488,6 +4792,41 @@ function getScrollIntent(value) {
   }
   return ScrollDirection.Idle;
 }
+var Scheduler2 = class {
+  constructor(scheduler5) {
+    this.scheduler = scheduler5;
+    this.pending = false;
+    this.tasks = /* @__PURE__ */ new Set();
+    this.resolvers = /* @__PURE__ */ new Set();
+    this.flush = () => {
+      const { tasks, resolvers } = this;
+      this.pending = false;
+      this.tasks = /* @__PURE__ */ new Set();
+      this.resolvers = /* @__PURE__ */ new Set();
+      for (const task of tasks) {
+        task();
+      }
+      for (const resolve of resolvers) {
+        resolve();
+      }
+    };
+  }
+  schedule(task) {
+    this.tasks.add(task);
+    if (!this.pending) {
+      this.pending = true;
+      this.scheduler(this.flush);
+    }
+    return new Promise((resolve) => this.resolvers.add(resolve));
+  }
+};
+var scheduler3 = new Scheduler2((callback) => {
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(callback);
+  } else {
+    callback();
+  }
+});
 var AUTOSCROLL_INTERVAL = 10;
 var AutoScroller = class extends Plugin {
   constructor(manager, _options) {
@@ -4505,7 +4844,10 @@ var AutoScroller = class extends Plugin {
         const canScroll2 = scroller.scroll();
         if (canScroll2) {
           scroller.autoScrolling = true;
-          const interval = setInterval(scroller.scroll, AUTOSCROLL_INTERVAL);
+          const interval = setInterval(
+            () => scheduler3.schedule(scroller.scroll),
+            AUTOSCROLL_INTERVAL
+          );
           return () => {
             clearInterval(interval);
           };
@@ -4669,7 +5011,6 @@ var _KeyboardSensor = class _KeyboardSensor2 extends Sensor {
     if (controller.signal.aborted) return this.cleanup();
     this.sideEffects();
     const sourceDocument = getDocument(element);
-    const sourceWindow = getWindow(sourceDocument);
     const listeners = [
       this.listeners.bind(sourceDocument, [
         {
@@ -4677,9 +5018,6 @@ var _KeyboardSensor = class _KeyboardSensor2 extends Sensor {
           listener: (event2) => this.handleKeyDown(event2, source, options2),
           options: { capture: true }
         }
-      ]),
-      this.listeners.bind(sourceWindow, [
-        { type: "resize", listener: () => this.handleEnd(event, true) }
       ])
     ];
     __privateGet$2(this, _cleanupFunctions).push(...listeners);
@@ -4784,6 +5122,11 @@ var defaults2 = Object.freeze({
         delay: { value: 250, tolerance: 5 }
       };
     }
+    if (isTextInput(target) && !event.defaultPrevented) {
+      return {
+        delay: { value: 200, tolerance: 0 }
+      };
+    }
     return {
       delay: { value: 200, tolerance: 10 },
       distance: { value: 5 }
@@ -5168,7 +5511,7 @@ var Droppable2 = class extends (_c2 = Droppable$1, _element_dec2 = [reactive], _
           () => {
             const { element: element2 } = this;
             if (observePosition.value && element2) {
-              const positionObserver = new PositionObserver(
+              const positionObserver = new FrameObserver(
                 element2,
                 updateShape
               );
@@ -5554,23 +5897,24 @@ var OptimisticSortingPlugin = class extends Plugin {
     };
     const unsubscribe = [
       manager.monitor.addEventListener("dragover", (event, manager2) => {
+        if (this.disabled) {
+          return;
+        }
+        const { dragOperation } = manager2;
+        const { source, target } = dragOperation;
+        if (!isSortable(source) || !isSortable(target)) {
+          return;
+        }
+        if (source.sortable === target.sortable) {
+          return;
+        }
+        const instances = getSortableInstances();
+        const sameGroup = source.sortable.group === target.sortable.group;
+        const sourceInstances = instances.get(source.sortable.group);
+        const targetInstances = sameGroup ? sourceInstances : instances.get(target.sortable.group);
+        if (!sourceInstances || !targetInstances) return;
         queueMicrotask(() => {
-          if (this.disabled || event.defaultPrevented) {
-            return;
-          }
-          const { dragOperation } = manager2;
-          const { source, target } = dragOperation;
-          if (!isSortable(source) || !isSortable(target)) {
-            return;
-          }
-          if (source.sortable === target.sortable) {
-            return;
-          }
-          const instances = getSortableInstances();
-          const sameGroup = source.sortable.group === target.sortable.group;
-          const sourceInstances = instances.get(source.sortable.group);
-          const targetInstances = sameGroup ? sourceInstances : instances.get(target.sortable.group);
-          if (!sourceInstances || !targetInstances) return;
+          if (event.defaultPrevented) return;
           manager2.renderer.rendering.then(() => {
             var _a4, _b2, _c3;
             const newInstances = getSortableInstances();
@@ -6031,13 +6375,6 @@ function currentValue(value) {
   }
   return value;
 }
-function useConstant(initializer) {
-  const ref = useRef(null);
-  if (!ref.current) {
-    ref.current = initializer();
-  }
-  return ref.current;
-}
 var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
 function useForceUpdate() {
@@ -6133,41 +6470,42 @@ var defaultManager = new DragDropManager2();
 var DragDropContext = createContext(
   defaultManager
 );
-function useRenderer() {
-  const [_2, startTransition2] = useTransition();
-  const [transitionCount, setTransitionCount] = useState(0);
-  const rendering = useRef(null);
-  const resolver = useRef(null);
-  const renderer = useConstant(() => ({
-    get rendering() {
-      var _a22;
-      return (_a22 = rendering.current) != null ? _a22 : Promise.resolve();
-    }
-  }));
-  useOnValueChange(
-    transitionCount,
-    () => {
+var Renderer = memo(
+  forwardRef(({ children }, ref) => {
+    const [transitionCount, setTransitionCount] = useState(0);
+    const rendering = useRef(null);
+    const resolver = useRef(null);
+    const renderer = useMemo(
+      () => ({
+        renderer: {
+          get rendering() {
+            var _a22;
+            return (_a22 = rendering.current) != null ? _a22 : Promise.resolve();
+          }
+        },
+        trackRendering(callback) {
+          if (!rendering.current) {
+            rendering.current = new Promise((resolve) => {
+              resolver.current = resolve;
+            });
+          }
+          startTransition(() => {
+            callback();
+            setTransitionCount((count) => count + 1);
+          });
+        }
+      }),
+      []
+    );
+    useIsomorphicLayoutEffect(() => {
       var _a22;
       (_a22 = resolver.current) == null ? void 0 : _a22.call(resolver);
       rendering.current = null;
-    },
-    useLayoutEffect
-  );
-  return {
-    renderer,
-    trackRendering(callback) {
-      if (!rendering.current) {
-        rendering.current = new Promise((resolve) => {
-          resolver.current = resolve;
-        });
-      }
-      startTransition2(() => {
-        callback();
-        setTransitionCount((count) => count + 1);
-      });
-    }
-  };
-}
+    }, [children, transitionCount]);
+    useImperativeHandle(ref, () => renderer);
+    return null;
+  })
+);
 var options = [void 0, deepEqual];
 function DragDropProvider(_a22) {
   var _b2 = _a22, {
@@ -6188,10 +6526,8 @@ function DragDropProvider(_a22) {
     "onDragEnd"
   ]);
   var _a32;
-  const { renderer, trackRendering } = useRenderer();
-  const [manager, setManager] = useState(
-    (_a32 = input.manager) != null ? _a32 : null
-  );
+  const rendererRef = useRef(null);
+  const [manager, setManager] = useState((_a32 = input.manager) != null ? _a32 : null);
   const { plugins, modifiers, sensors } = input;
   const handleBeforeDragStart = useLatest(onBeforeDragStart);
   const handleDragStart = useLatest(onDragStart);
@@ -6201,49 +6537,51 @@ function DragDropProvider(_a22) {
   const handleCollision = useLatest(onCollision);
   useEffect(() => {
     var _a4;
+    if (!rendererRef.current) throw new Error("Renderer not found");
+    const { renderer, trackRendering } = rendererRef.current;
     const manager2 = (_a4 = input.manager) != null ? _a4 : new DragDropManager2(input);
     manager2.renderer = renderer;
-    manager2.monitor.addEventListener("beforedragstart", (event, manager3) => {
+    manager2.monitor.addEventListener("beforedragstart", (event) => {
       const callback = handleBeforeDragStart.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
     manager2.monitor.addEventListener(
       "dragstart",
-      (event, manager3) => {
+      (event) => {
         var _a5;
-        return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager3);
+        return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager2);
       }
     );
-    manager2.monitor.addEventListener("dragover", (event, manager3) => {
+    manager2.monitor.addEventListener("dragover", (event) => {
       const callback = handleDragOver.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
-    manager2.monitor.addEventListener("dragmove", (event, manager3) => {
+    manager2.monitor.addEventListener("dragmove", (event) => {
       const callback = handleDragMove.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
-    manager2.monitor.addEventListener("dragend", (event, manager3) => {
+    manager2.monitor.addEventListener("dragend", (event) => {
       const callback = handleDragEnd.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
     manager2.monitor.addEventListener(
       "collision",
-      (event, manager3) => {
+      (event) => {
         var _a5;
-        return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager3);
+        return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager2);
       }
     );
     startTransition(() => setManager(manager2));
     return manager2.destroy;
-  }, [renderer, input.manager]);
+  }, [input.manager]);
   useOnValueChange(
     plugins,
     () => manager && (manager.plugins = plugins != null ? plugins : defaultPreset.plugins),
@@ -6259,7 +6597,10 @@ function DragDropProvider(_a22) {
     () => manager && (manager.modifiers = modifiers != null ? modifiers : defaultPreset.modifiers),
     ...options
   );
-  return /* @__PURE__ */ jsx(DragDropContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ jsxs(DragDropContext.Provider, { value: manager, children: [
+    /* @__PURE__ */ jsx(Renderer, { ref: rendererRef, children }),
+    children
+  ] });
 }
 function useDragDropManager() {
   return useContext(DragDropContext);