@vuu-ui/vuu-utils 4.0.0 → 4.1.0

package/src/vendor/@dnd-kit/dom/index.js

@@ -1,7 +1,8 @@
-import { configurator, Sensor, Plugin, CorePlugin, DragDropManager as DragDropManager$1, Draggable as Draggable$1, Droppable as Droppable$1, descriptor } from '../abstract/index.js';
-import { ScrollDirection, Listeners, isElement, scrollIntoViewIfNeeded, DOMRectangle, getDocument, isHTMLElement, getFrameTransform, scheduler, isTextInput, isKeyboardEvent, isPointerEvent, canScroll, detectScrollIntent, getElementFromPoint, getScrollableAncestors, generateUniqueId, isSafari, Styles, getComputedStyles, parseTranslate, supportsPopover, showPopover, getWindow, supportsStyle, getFrameElement, cloneElement, getFinalKeyframe, animateTransform, ProxiedElements, PositionObserver } from './utilities.js';
-import { effect, computed, deepEqual, signal, batch, untracked, effects, reactive } from '../state/dist/index.js';
-import { exceedsDistance, Axes, Point, Rectangle } from '../geometry/dist/index.js';
+import { configurator, Plugin, Sensor, ActivationController, CorePlugin, DragDropManager as DragDropManager$1, resolveCustomizable, Draggable as Draggable$1, Droppable as Droppable$1, ActivationConstraint, descriptor } from '../abstract/index.js';
+export { resolveCustomizable } from '../abstract/index.js';
+import { ScrollDirection, getRoot, Listeners, isElement, scrollIntoViewIfNeeded, DOMRectangle, getDocument, isHTMLElement, getFrameTransform, getEventCoordinates, getDocuments, scheduler, getInteractiveElement, isTextInput, getScrollPosition, canScroll, detectScrollIntent, getElementFromPoint, getScrollableAncestors, isKeyboardEvent, isPointerEvent, generateUniqueId, isSafari, isDocument, isShadowRoot, Styles, getComputedStyles, parseTransform, parseTranslate, getFixedPositionOffset, supportsPopover, showPopover, getWindow, prefersReducedMotion, getFrameElement, cloneElement, supportsStyle, getFinalKeyframe, animateTransform, ProxiedElements, PositionObserver } from './utilities.js';
+import { untracked, effect, computed, deepEqual, signal, batch, effects, reactive, derived } from '../state/dist/index.js';
+import { Axes, Point, Rectangle, exceedsDistance } from '../geometry/dist/index.js';
 import { defaultCollisionDetection } from '../collision/dist/index.js';
 
 var __create = Object.create;
@@ -43,8 +44,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 var __decoratorStart = (base) => {
-  var _a4;
-  return [, , , __create((_a4 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a4 : null)];
+  var _a5;
+  return [, , , __create((_a5 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a5 : 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;
@@ -123,6 +124,10 @@ function isFocusable(element) {
   const tagName = element.tagName.toLowerCase();
   return ["input", "select", "textarea", "a", "button"].includes(tagName);
 }
+function supportsPressedState(element) {
+  var _a5;
+  return ((_a5 = element.getAttribute("role")) != null ? _a5 : "button") === "button";
+}
 
 // src/core/plugins/accessibility/HiddenText.ts
 function createHiddenText(id, value) {
@@ -232,10 +237,10 @@ var Accessibility = class extends Plugin {
       }
     }
     this.registerEffect(() => {
-      var _a4;
+      var _a5;
       mutations.clear();
       for (const draggable of this.manager.registry.draggables.value) {
-        const activator = (_a4 = draggable.handle) != null ? _a4 : draggable.element;
+        const activator = (_a5 = draggable.handle) != null ? _a5 : draggable.element;
         if (activator) {
           if (!hiddenTextElement || !liveRegionElement) {
             mutations.add(initialize);
@@ -261,7 +266,8 @@ var Accessibility = class extends Plugin {
               () => activator.setAttribute("aria-describedby", descriptionId)
             );
           }
-          for (const key of ["aria-pressed", "aria-grabbed"]) {
+          const stateAttributes = supportsPressedState(activator) ? ["aria-pressed", "aria-grabbed"] : ["aria-grabbed"];
+          for (const key of stateAttributes) {
             const value = String(draggable.isDragging);
             if (activator.getAttribute(key) !== value) {
               mutations.add(() => activator.setAttribute(key, value));
@@ -296,31 +302,285 @@ function debounce(fn, wait) {
   debounced.cancel = () => clearTimeout(timeout);
   return debounced;
 }
-var Cursor = class extends Plugin {
+var styleRegistry = /* @__PURE__ */ new Map();
+function isAttached(root) {
+  return isShadowRoot(root) ? root.host.isConnected : root.defaultView != null;
+}
+var _roots_dec, _targetRoot_dec, _sourceRoot_dec, _additionalRoots_dec, _registeredRules_dec, _a, _init, _registeredRules, _additionalRoots, _retainedRoots, _injections, _StyleInjector_instances, syncStyles_fn, inject_fn, injectStyleElement_fn, injectAdoptedSheet_fn;
+var _StyleInjector = class _StyleInjector extends (_a = CorePlugin, _registeredRules_dec = [reactive], _additionalRoots_dec = [reactive], _sourceRoot_dec = [derived], _targetRoot_dec = [derived], _roots_dec = [derived], _a) {
   constructor(manager, options) {
     super(manager, options);
-    this.manager = manager;
-    const doc = computed(
-      () => {
-        var _a4;
-        return getDocument((_a4 = this.manager.dragOperation.source) == null ? void 0 : _a4.element);
+    __runInitializers(_init, 5, this);
+    __privateAdd(this, _StyleInjector_instances);
+    __privateAdd(this, _registeredRules, __runInitializers(_init, 8, this, /* @__PURE__ */ new Map())), __runInitializers(_init, 11, this);
+    __privateAdd(this, _additionalRoots, __runInitializers(_init, 12, this, /* @__PURE__ */ new Set())), __runInitializers(_init, 15, this);
+    /**
+     * Roots that have taken part in a drag operation, where retained rules stay
+     * injected between drag operations.
+     */
+    __privateAdd(this, _retainedRoots, /* @__PURE__ */ new Set());
+    __privateAdd(this, _injections, /* @__PURE__ */ new Map());
+    this.registerEffect(__privateMethod(this, _StyleInjector_instances, syncStyles_fn));
+  }
+  /**
+   * Registers CSS rules to be injected into the active drag operation's
+   * document and shadow roots. The StyleInjector handles tracking
+   * which roots need the styles and cleaning up when they're no longer needed.
+   *
+   * Returns a cleanup function that unregisters the rules.
+   */
+  register(cssRules, options) {
+    untracked(() => {
+      var _a5;
+      const rules = new Map(this.registeredRules);
+      rules.set(cssRules, (_a5 = options == null ? void 0 : options.retain) != null ? _a5 : false);
+      this.registeredRules = rules;
+    });
+    return () => {
+      untracked(() => {
+        const rules = new Map(this.registeredRules);
+        rules.delete(cssRules);
+        this.registeredRules = rules;
+      });
+    };
+  }
+  /**
+   * Adds an additional root to track for style injection.
+   * Returns a cleanup function that removes the root.
+   */
+  addRoot(root) {
+    untracked(() => {
+      const roots = new Set(this.additionalRoots);
+      roots.add(root);
+      this.additionalRoots = roots;
+    });
+    return () => {
+      untracked(() => {
+        const roots = new Set(this.additionalRoots);
+        roots.delete(root);
+        this.additionalRoots = roots;
+      });
+    };
+  }
+  get sourceRoot() {
+    var _a5;
+    const { source } = this.manager.dragOperation;
+    return getRoot((_a5 = source == null ? void 0 : source.element) != null ? _a5 : null);
+  }
+  get targetRoot() {
+    var _a5;
+    const { target } = this.manager.dragOperation;
+    return getRoot((_a5 = target == null ? void 0 : target.element) != null ? _a5 : null);
+  }
+  get roots() {
+    const { status } = this.manager.dragOperation;
+    if (status.initializing || status.initialized) {
+      const roots = [this.sourceRoot, this.targetRoot].filter(
+        (root) => root != null
+      );
+      return /* @__PURE__ */ new Set([...roots, ...this.additionalRoots]);
+    }
+    return /* @__PURE__ */ new Set();
+  }
+  destroy() {
+    for (const injected of __privateGet(this, _injections).values()) {
+      for (const cleanup of injected.values()) {
+        cleanup();
+      }
+    }
+    __privateGet(this, _injections).clear();
+    __privateGet(this, _retainedRoots).clear();
+    super.destroy();
+  }
+};
+_init = __decoratorStart(_a);
+_registeredRules = new WeakMap();
+_additionalRoots = new WeakMap();
+_retainedRoots = new WeakMap();
+_injections = new WeakMap();
+_StyleInjector_instances = new WeakSet();
+/**
+ * Injects and removes only the rules whose target roots changed, so that a
+ * stylesheet that is still needed is never removed and added back.
+ */
+syncStyles_fn = function() {
+  const { roots, registeredRules } = this;
+  for (const root of roots) {
+    __privateGet(this, _retainedRoots).add(root);
+  }
+  const wanted = /* @__PURE__ */ new Map();
+  for (const root of __privateGet(this, _retainedRoots)) {
+    const active = roots.has(root);
+    if (!active && !isAttached(root)) {
+      __privateGet(this, _retainedRoots).delete(root);
+      continue;
+    }
+    for (const [cssRules, retain] of registeredRules) {
+      if (!active && !retain) continue;
+      let rules = wanted.get(root);
+      if (!rules) {
+        rules = /* @__PURE__ */ new Set();
+        wanted.set(root, rules);
+      }
+      rules.add(cssRules);
+    }
+  }
+  for (const [root, injected] of __privateGet(this, _injections)) {
+    const rules = wanted.get(root);
+    for (const [cssRules, cleanup] of injected) {
+      if (rules == null ? void 0 : rules.has(cssRules)) continue;
+      cleanup();
+      injected.delete(cssRules);
+    }
+    if (injected.size === 0) {
+      __privateGet(this, _injections).delete(root);
+    }
+  }
+  for (const [root, rules] of wanted) {
+    let injected = __privateGet(this, _injections).get(root);
+    if (!injected) {
+      injected = /* @__PURE__ */ new Map();
+      __privateGet(this, _injections).set(root, injected);
+    }
+    for (const cssRules of rules) {
+      if (!injected.has(cssRules)) {
+        injected.set(cssRules, __privateMethod(this, _StyleInjector_instances, inject_fn).call(this, root, cssRules));
+      }
+    }
+  }
+};
+inject_fn = function(root, cssRules) {
+  let rootStyles = styleRegistry.get(root);
+  if (!rootStyles) {
+    rootStyles = /* @__PURE__ */ new Map();
+    styleRegistry.set(root, rootStyles);
+  }
+  let registration = rootStyles.get(cssRules);
+  if (!registration) {
+    const created = isDocument(root) ? __privateMethod(this, _StyleInjector_instances, injectStyleElement_fn).call(this, root, rootStyles, cssRules) : __privateMethod(this, _StyleInjector_instances, injectAdoptedSheet_fn).call(this, root, rootStyles, cssRules);
+    if (!created) {
+      return () => {
+      };
+    }
+    registration = created;
+    rootStyles.set(cssRules, registration);
+  }
+  registration.refCount++;
+  let disposed = false;
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    registration.refCount--;
+    if (registration.refCount === 0) {
+      registration.cleanup();
+    }
+  };
+};
+/**
+ * For Document roots, prepend a <style> element to <head> so that any
+ * @layer declarations appear before layers from regular stylesheets,
+ * giving them the lowest cascade priority.
+ */
+injectStyleElement_fn = function(root, rootStyles, cssRules) {
+  var _a5;
+  const style = root.createElement("style");
+  const { nonce } = (_a5 = this.options) != null ? _a5 : {};
+  if (nonce) {
+    style.setAttribute("nonce", nonce);
+  }
+  style.textContent = cssRules;
+  root.head.prepend(style);
+  const observer = new MutationObserver((entries) => {
+    for (const entry of entries) {
+      for (const node of Array.from(entry.removedNodes)) {
+        if (node === style) {
+          root.head.prepend(style);
+          return;
+        }
+      }
+    }
+  });
+  observer.observe(root.head, { childList: true });
+  return {
+    refCount: 0,
+    cleanup: () => {
+      observer.disconnect();
+      style.remove();
+      rootStyles.delete(cssRules);
+      if (rootStyles.size === 0) {
+        styleRegistry.delete(root);
       }
+    }
+  };
+};
+/**
+ * For ShadowRoot roots, use adoptedStyleSheets to avoid DOM side effects
+ * like interfering with :first-child or :nth-child selectors.
+ */
+injectAdoptedSheet_fn = function(root, rootStyles, cssRules) {
+  if (!("adoptedStyleSheets" in root && Array.isArray(root.adoptedStyleSheets)) && process.env.NODE_ENV !== "production") {
+    console.error(
+      "Cannot inject styles: This browser doesn't support adoptedStyleSheets"
     );
-    this.destroy = effect(() => {
-      var _a4;
-      const { dragOperation } = this.manager;
-      const { cursor = "grabbing", nonce } = (_a4 = this.options) != null ? _a4 : {};
-      if (dragOperation.status.initialized) {
-        const document2 = doc.value;
-        const style = document2.createElement("style");
-        if (nonce) {
-          style.setAttribute("nonce", nonce);
+  }
+  const targetWindow = root.ownerDocument.defaultView;
+  const { CSSStyleSheet } = targetWindow != null ? targetWindow : {};
+  if (!CSSStyleSheet) {
+    if (process.env.NODE_ENV !== "production") {
+      console.error(
+        "Cannot inject styles: CSSStyleSheet constructor not available"
+      );
+    }
+    return null;
+  }
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(cssRules);
+  root.adoptedStyleSheets.push(sheet);
+  return {
+    refCount: 0,
+    cleanup: () => {
+      var _a5;
+      if (isShadowRoot(root) && ((_a5 = root.host) == null ? void 0 : _a5.isConnected)) {
+        const index = root.adoptedStyleSheets.indexOf(sheet);
+        if (index !== -1) {
+          root.adoptedStyleSheets.splice(index, 1);
         }
-        style.textContent = `* { cursor: ${cursor} !important; }`;
-        document2.head.appendChild(style);
-        return () => style.remove();
       }
-    });
+      rootStyles.delete(cssRules);
+      if (rootStyles.size === 0) {
+        styleRegistry.delete(root);
+      }
+    }
+  };
+};
+__decorateElement(_init, 4, "registeredRules", _registeredRules_dec, _StyleInjector, _registeredRules);
+__decorateElement(_init, 4, "additionalRoots", _additionalRoots_dec, _StyleInjector, _additionalRoots);
+__decorateElement(_init, 2, "sourceRoot", _sourceRoot_dec, _StyleInjector);
+__decorateElement(_init, 2, "targetRoot", _targetRoot_dec, _StyleInjector);
+__decorateElement(_init, 2, "roots", _roots_dec, _StyleInjector);
+__decoratorMetadata(_init, _StyleInjector);
+_StyleInjector.configure = configurator(_StyleInjector);
+var StyleInjector = _StyleInjector;
+
+// src/core/plugins/cursor/Cursor.ts
+var Cursor = class extends Plugin {
+  constructor(manager, options) {
+    super(manager, options);
+    this.manager = manager;
+    const { cursor = "grabbing" } = options != null ? options : {};
+    const styleInjector = manager.registry.plugins.get(
+      StyleInjector
+    );
+    const unregisterStyles = styleInjector == null ? void 0 : styleInjector.register(
+      `* { cursor: ${cursor} !important; }`
+    );
+    if (unregisterStyles) {
+      const originalDestroy = this.destroy.bind(this);
+      this.destroy = () => {
+        unregisterStyles();
+        originalDestroy();
+      };
+    }
   }
 };
 
@@ -339,7 +599,7 @@ var IGNORED_ATTRIBUTES = [
 ];
 var IGNORED_STYLES = ["view-transition-name"];
 var CSS_RULES = `
-  :root [${ATTRIBUTE}] {
+  :is(:root,:host) [${ATTRIBUTE}] {
     position: fixed !important;
     pointer-events: none !important;
     touch-action: none;
@@ -353,14 +613,15 @@ var CSS_RULES = `
     max-width: var(${CSS_PREFIX}width, auto);
     height: var(${CSS_PREFIX}height, auto);
     max-height: var(${CSS_PREFIX}height, auto);
+    transform: var(${CSS_PREFIX}transform, none) !important;
     transition: var(${CSS_PREFIX}transition) !important;
   }
 
-  :root [${PLACEHOLDER_ATTRIBUTE}] {
+  :is(:root,:host) [${PLACEHOLDER_ATTRIBUTE}] {
     transition: none;
   }
 
-  :root [${PLACEHOLDER_ATTRIBUTE}='hidden'] {
+  :is(:root,:host) [${PLACEHOLDER_ATTRIBUTE}='hidden'] {
     visibility: hidden;
   }
 
@@ -377,7 +638,7 @@ var CSS_RULES = `
     transform-origin: var(${CSS_PREFIX}transform-origin) !important;
   }
 
-  @layer {
+  @layer dnd-kit {
     :where([${ATTRIBUTE}][popover]) {
       overflow: visible;
       background: unset;
@@ -465,40 +726,250 @@ function preventPopoverClose(event) {
 function isTableRow(element) {
   return element.tagName === "TR";
 }
+function createElementMutationObserver(element, placeholder, clone) {
+  const observer = new MutationObserver((mutations) => {
+    let hasChildrenMutations = false;
+    for (const mutation of mutations) {
+      if (mutation.target !== element) {
+        hasChildrenMutations = true;
+        continue;
+      }
+      if (mutation.type !== "attributes") {
+        continue;
+      }
+      const attributeName = mutation.attributeName;
+      if (attributeName.startsWith("aria-") || IGNORED_ATTRIBUTES.includes(attributeName)) {
+        continue;
+      }
+      const attributeValue = element.getAttribute(attributeName);
+      if (attributeName === "style") {
+        if (supportsStyle(element) && supportsStyle(placeholder)) {
+          const styles = element.style;
+          for (const key of Array.from(placeholder.style)) {
+            if (styles.getPropertyValue(key) === "") {
+              placeholder.style.removeProperty(key);
+            }
+          }
+          for (const key of Array.from(styles)) {
+            if (IGNORED_STYLES.includes(key) || key.startsWith(CSS_PREFIX)) {
+              continue;
+            }
+            const value = styles.getPropertyValue(key);
+            placeholder.style.setProperty(key, value);
+          }
+        }
+      } else if (attributeValue !== null) {
+        placeholder.setAttribute(attributeName, attributeValue);
+      } else {
+        placeholder.removeAttribute(attributeName);
+      }
+    }
+    if (hasChildrenMutations && clone) {
+      placeholder.replaceChildren(...element.cloneNode(true).childNodes);
+    }
+  });
+  observer.observe(element, {
+    attributes: true,
+    subtree: true,
+    childList: true
+  });
+  return observer;
+}
+function createDocumentMutationObserver(element, placeholder, feedbackElement) {
+  const observer = 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;
+        }
+      }
+    }
+    if (element.isConnected && placeholder.isConnected && element.nextElementSibling !== placeholder) {
+      element.insertAdjacentElement("afterend", placeholder);
+      showPopover(feedbackElement);
+    }
+  });
+  observer.observe(element.ownerDocument.body, {
+    childList: true,
+    subtree: true
+  });
+  return observer;
+}
+function createResizeObserver(ctx) {
+  return new ResizeObserver(() => {
+    var _a5, _b2, _c3;
+    const placeholderShape = new DOMRectangle(ctx.placeholder, {
+      frameTransform: ctx.frameTransform,
+      ignoreTransforms: true
+    });
+    const origin = (_a5 = ctx.transformOrigin) != null ? _a5 : { x: 1, y: 1 };
+    const dX = (ctx.width - placeholderShape.width) * origin.x + ctx.delta.x;
+    const dY = (ctx.height - placeholderShape.height) * origin.y + ctx.delta.y;
+    const fixedOffset = getFixedPositionOffset();
+    ctx.styles.set(
+      {
+        width: placeholderShape.width - ctx.widthOffset,
+        height: placeholderShape.height - ctx.heightOffset,
+        top: ctx.top + dY + fixedOffset.y,
+        left: ctx.left + dX + fixedOffset.x
+      },
+      CSS_PREFIX
+    );
+    (_b2 = ctx.getElementMutationObserver()) == null ? void 0 : _b2.takeRecords();
+    if (isTableRow(ctx.element) && isTableRow(ctx.placeholder)) {
+      const cells = Array.from(ctx.element.cells);
+      const placeholderCells = Array.from(ctx.placeholder.cells);
+      if (!ctx.getSavedCellWidths()) {
+        ctx.setSavedCellWidths(cells.map((cell) => cell.style.width));
+      }
+      for (const [index, cell] of cells.entries()) {
+        const placeholderCell = placeholderCells[index];
+        cell.style.width = `${placeholderCell.getBoundingClientRect().width}px`;
+      }
+    }
+    const translate = (_c3 = ctx.getTranslate()) != null ? _c3 : { x: 0, y: 0 };
+    const shapeLeft = ctx.left + dX + fixedOffset.x + translate.x;
+    const shapeTop = ctx.top + dY + fixedOffset.y + translate.y;
+    const shapeWidth = placeholderShape.width - ctx.widthOffset;
+    const shapeHeight = placeholderShape.height - ctx.heightOffset;
+    const ft = ctx.frameTransform;
+    ctx.dragOperation.shape = new Rectangle(
+      shapeLeft * ft.scaleX + ft.x,
+      shapeTop * ft.scaleY + ft.y,
+      shapeWidth * ft.scaleX,
+      shapeHeight * ft.scaleY
+    );
+  });
+}
+var DEFAULT_DURATION = 250;
+var DEFAULT_EASING = "ease";
+function runDropAnimation(ctx) {
+  var _a5, _b2, _c3, _d2;
+  const { animation } = ctx;
+  if (typeof animation === "function") {
+    const result = animation({
+      source: ctx.source,
+      element: ctx.element,
+      feedbackElement: ctx.feedbackElement,
+      placeholder: ctx.placeholder,
+      translate: ctx.translate,
+      moved: ctx.moved
+    });
+    Promise.resolve(result).then(() => {
+      ctx.cleanup();
+      requestAnimationFrame(ctx.restoreFocus);
+    });
+    return;
+  }
+  const {
+    duration = DEFAULT_DURATION,
+    easing = DEFAULT_EASING
+  } = animation != null ? animation : {};
+  showPopover(ctx.feedbackElement);
+  const [, runningAnimation] = (_a5 = getFinalKeyframe(
+    ctx.feedbackElement,
+    (keyframe) => "translate" in keyframe
+  )) != null ? _a5 : [];
+  runningAnimation == null ? void 0 : runningAnimation.pause();
+  const target = (_b2 = ctx.placeholder) != null ? _b2 : ctx.element;
+  const options = {
+    frameTransform: isSameFrame(ctx.feedbackElement, target) ? null : void 0
+  };
+  const current = new DOMRectangle(ctx.feedbackElement, options);
+  const currentTranslate = (_c3 = parseTranslate(getComputedStyles(ctx.feedbackElement).translate)) != null ? _c3 : ctx.translate;
+  const final = new DOMRectangle(target, options);
+  const delta = Rectangle.delta(current, final, ctx.alignment);
+  const finalTranslate = {
+    x: currentTranslate.x - delta.x,
+    y: currentTranslate.y - delta.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`
+    ]
+  } : {};
+  ctx.styles.set({ transition: ctx.transition }, CSS_PREFIX);
+  ctx.feedbackElement.setAttribute(DROPPING_ATTRIBUTE, "");
+  (_d2 = ctx.getElementMutationObserver()) == null ? void 0 : _d2.takeRecords();
+  animateTransform({
+    element: ctx.feedbackElement,
+    keyframes: __spreadProps(__spreadValues(__spreadValues({}, heightKeyframes), widthKeyframes), {
+      translate: [
+        `${currentTranslate.x}px ${currentTranslate.y}px 0`,
+        `${finalTranslate.x}px ${finalTranslate.y}px 0`
+      ]
+    }),
+    options: {
+      duration: prefersReducedMotion(getWindow(ctx.feedbackElement)) ? 0 : ctx.moved || ctx.feedbackElement !== ctx.element ? duration : 0,
+      easing
+    }
+  }).then(() => {
+    ctx.feedbackElement.removeAttribute(DROPPING_ATTRIBUTE);
+    runningAnimation == null ? void 0 : runningAnimation.finish();
+    ctx.cleanup();
+    requestAnimationFrame(ctx.restoreFocus);
+  });
+}
 
 // src/core/plugins/feedback/Feedback.ts
-var styleSheetRegistry = /* @__PURE__ */ new Map();
-var _overlay_dec, _a, _init, _overlay, _Feedback_instances, render_fn, injectStyles_fn;
-var _Feedback = class _Feedback extends (_a = Plugin, _overlay_dec = [reactive], _a) {
+var _overlay_dec, _a2, _init2, _overlay, _Feedback_instances, trackOverlayRoot_fn, render_fn;
+var _Feedback = class _Feedback extends (_a2 = Plugin, _overlay_dec = [reactive], _a2) {
   constructor(manager, options) {
     super(manager, options);
     __privateAdd(this, _Feedback_instances);
-    __privateAdd(this, _overlay, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _overlay, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 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();
-    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);
-        }
-      }
+    const styleInjector = manager.registry.plugins.get(StyleInjector);
+    const unregisterStyles = styleInjector == null ? void 0 : styleInjector.register(CSS_RULES, { retain: true });
+    if (unregisterStyles) {
+      const originalDestroy = this.destroy.bind(this);
+      this.destroy = () => {
+        unregisterStyles();
+        originalDestroy();
+      };
     }
+    this.registerEffect(__privateMethod(this, _Feedback_instances, trackOverlayRoot_fn).bind(this, styleInjector));
+    this.registerEffect(__privateMethod(this, _Feedback_instances, render_fn));
   }
 };
-_init = __decoratorStart(_a);
+_init2 = __decoratorStart(_a2);
 _overlay = new WeakMap();
 _Feedback_instances = new WeakSet();
+trackOverlayRoot_fn = function(styleInjector) {
+  const { overlay } = this;
+  if (!overlay || !styleInjector) return;
+  const root = getRoot(overlay);
+  if (!root) return;
+  return styleInjector.addRoot(root);
+};
 render_fn = function() {
-  var _a4, _b2, _c3;
+  var _a5, _b2, _c3, _d2, _e, _f, _g;
   const { state, manager, options } = this;
   const { dragOperation } = manager;
   const { position, source, status } = dragOperation;
@@ -508,12 +979,15 @@ render_fn = function() {
     return;
   }
   if (!source) return;
-  const { element, feedback } = source;
+  const { element } = source;
+  const entityOptions = source.pluginConfig(_Feedback);
+  const feedbackOption = (_b2 = (_a5 = entityOptions == null ? void 0 : entityOptions.feedback) != null ? _a5 : options == null ? void 0 : options.feedback) != null ? _b2 : "default";
+  const feedback = typeof feedbackOption === "function" ? feedbackOption(source, manager) : feedbackOption;
   if (!element || feedback === "none" || !status.initialized || status.initializing) {
     return;
   }
   const { initial } = state;
-  const feedbackElement = (_a4 = this.overlay) != null ? _a4 : element;
+  const feedbackElement = (_c3 = this.overlay) != null ? _c3 : element;
   const frameTransform = getFrameTransform(feedbackElement);
   const elementFrameTransform = getFrameTransform(element);
   const crossFrame = !isSameFrame(element, feedbackElement);
@@ -530,9 +1004,8 @@ render_fn = function() {
     width = width / scaleDelta.x;
     height = height / scaleDelta.y;
   }
-  let elementMutationObserver;
-  let documentMutationObserver;
   const styles = new Styles(feedbackElement);
+  const elementStyles = getComputedStyles(element);
   const {
     transition,
     translate,
@@ -545,7 +1018,10 @@ render_fn = function() {
     borderInlineEndWidth,
     borderBlockStartWidth,
     borderBlockEndWidth
-  } = getComputedStyles(element);
+  } = elementStyles;
+  const feedbackTransition = transition.split(",").filter((t) => !/^\s*(transform|translate|scale)\b/.test(t)).join(",");
+  const parsedTransform = parseTransform(elementStyles);
+  const initialTransformStyle = elementStyles.transform;
   const clone = feedback === "clone";
   const contentBox = boxSizing === "content-box";
   const widthOffset = contentBox ? parseInt(paddingInlineStart) + parseInt(paddingInlineEnd) + parseInt(borderInlineStartWidth) + parseInt(borderInlineEndWidth) : 0;
@@ -554,17 +1030,23 @@ render_fn = function() {
   const isKeyboardOperation = untracked(
     () => isKeyboardEvent(manager.dragOperation.activatorEvent)
   );
-  if (translate !== "none") {
-    const parsedTranslate = parseTranslate(translate);
-    if (parsedTranslate && !initial.translate) {
-      initial.translate = parsedTranslate;
+  if (!initial.translate) {
+    if (this.overlay && parsedTransform) {
+      initial.translate = { x: parsedTransform.x, y: parsedTransform.y };
+    } else if (translate !== "none") {
+      const parsedTranslate = parseTranslate(translate);
+      if (parsedTranslate) {
+        initial.translate = parsedTranslate;
+      }
     }
   }
   if (!initial.transformOrigin) {
     const current = untracked(() => position.current);
+    const visualLeft = left + ((_d2 = parsedTransform == null ? void 0 : parsedTransform.x) != null ? _d2 : 0);
+    const visualTop = top + ((_e = parsedTransform == null ? void 0 : parsedTransform.y) != null ? _e : 0);
     initial.transformOrigin = {
-      x: (current.x - left * frameTransform.scaleX - frameTransform.x) / (width * frameTransform.scaleX),
-      y: (current.y - top * frameTransform.scaleY - frameTransform.y) / (height * frameTransform.scaleY)
+      x: (current.x - visualLeft * frameTransform.scaleX - frameTransform.x) / (width * frameTransform.scaleX),
+      y: (current.y - visualTop * frameTransform.scaleY - frameTransform.y) / (height * frameTransform.scaleY)
     };
   }
   const { transformOrigin } = initial;
@@ -606,19 +1088,19 @@ render_fn = function() {
   };
   feedbackElement.setAttribute(ATTRIBUTE, "true");
   const transform = untracked(() => dragOperation.transform);
-  const initialTranslate = (_b2 = initial.translate) != null ? _b2 : { x: 0, y: 0 };
+  const initialTranslate = (_f = initial.translate) != null ? _f : { 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`;
-  const transitionString = transition ? `${transition}, translate 0ms linear` : "";
+  const fixedOffset = getFixedPositionOffset();
   styles.set(
     {
       width: width - widthOffset,
       height: height - heightOffset,
-      top: projected.top,
-      left: projected.left,
-      translate: translateString,
-      transition: transitionString,
+      top: projected.top + fixedOffset.y,
+      left: projected.left + fixedOffset.x,
+      translate: `${tX}px ${tY}px 0`,
+      transform: this.overlay ? "none" : initialTransformStyle,
+      transition: feedbackTransition ? `${feedbackTransition}, translate 0ms linear` : "translate 0ms linear",
       scale: crossFrame ? `${scaleDelta.x} ${scaleDelta.y}` : "",
       "transform-origin": `${transformOrigin.x * 100}% ${transformOrigin.y * 100}%`
     },
@@ -638,34 +1120,30 @@ render_fn = function() {
     showPopover(feedbackElement);
     feedbackElement.addEventListener("beforetoggle", preventPopoverClose);
   }
-  const resizeObserver = new ResizeObserver(() => {
-    if (!placeholder) return;
-    const placeholderShape = new DOMRectangle(placeholder, {
-      frameTransform,
-      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 - widthOffset,
-        height: placeholderShape.height - heightOffset,
-        top: top + dY,
-        left: left + dX
-      },
-      CSS_PREFIX
-    );
-    elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
-    if (isTableRow(element) && isTableRow(placeholder)) {
-      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 elementMutationObserver;
+  let documentMutationObserver;
+  let savedCellWidths;
+  const resizeObserver = createResizeObserver({
+    placeholder,
+    element,
+    feedbackElement,
+    frameTransform,
+    transformOrigin,
+    width,
+    height,
+    top,
+    left,
+    widthOffset,
+    heightOffset,
+    delta,
+    styles,
+    dragOperation,
+    getTranslate: () => state.current.translate,
+    getElementMutationObserver: () => elementMutationObserver,
+    getSavedCellWidths: () => savedCellWidths,
+    setSavedCellWidths: (widths) => {
+      savedCellWidths = widths;
     }
-    dragOperation.shape = new DOMRectangle(feedbackElement);
   });
   const initialShape = new DOMRectangle(feedbackElement);
   untracked(() => dragOperation.shape = initialShape);
@@ -673,6 +1151,7 @@ render_fn = function() {
   const handleWindowResize = (event) => {
     this.manager.actions.stop({ event });
   };
+  const reducedMotion = prefersReducedMotion(feedbackWindow);
   if (isKeyboardOperation) {
     feedbackWindow.addEventListener("resize", handleWindowResize);
   }
@@ -681,84 +1160,25 @@ render_fn = function() {
   }
   if (placeholder) {
     resizeObserver.observe(placeholder);
-    elementMutationObserver = new MutationObserver((mutations) => {
-      let hasChildrenMutations = false;
-      for (const mutation of mutations) {
-        if (mutation.target !== element) {
-          hasChildrenMutations = true;
-          continue;
-        }
-        if (mutation.type !== "attributes") {
-          continue;
-        }
-        const attributeName = mutation.attributeName;
-        if (attributeName.startsWith("aria-") || IGNORED_ATTRIBUTES.includes(attributeName)) {
-          continue;
-        }
-        const attributeValue = element.getAttribute(attributeName);
-        if (attributeName === "style") {
-          if (supportsStyle(element) && supportsStyle(placeholder)) {
-            const styles2 = element.style;
-            for (const key of Array.from(placeholder.style)) {
-              if (styles2.getPropertyValue(key) === "") {
-                placeholder.style.removeProperty(key);
-              }
-            }
-            for (const key of Array.from(styles2)) {
-              if (IGNORED_STYLES.includes(key) || key.startsWith(CSS_PREFIX)) {
-                continue;
-              }
-              const value = styles2.getPropertyValue(key);
-              placeholder.style.setProperty(key, value);
-            }
-          }
-        } else if (attributeValue !== null) {
-          placeholder.setAttribute(attributeName, attributeValue);
-        } else {
-          placeholder.removeAttribute(attributeName);
-        }
-      }
-      if (hasChildrenMutations && clone) {
-        placeholder.innerHTML = element.innerHTML;
-      }
-    });
-    elementMutationObserver.observe(element, {
-      attributes: true,
-      subtree: true,
-      childList: 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;
-          }
-        }
-      }
-    });
-    documentMutationObserver.observe(element.ownerDocument.body, {
-      childList: true,
-      subtree: true
-    });
+    elementMutationObserver = createElementMutationObserver(
+      element,
+      placeholder,
+      clone
+    );
+    documentMutationObserver = createDocumentMutationObserver(
+      element,
+      placeholder,
+      feedbackElement
+    );
   }
-  const id = (_c3 = manager.dragOperation.source) == null ? void 0 : _c3.id;
+  const id = (_g = manager.dragOperation.source) == null ? void 0 : _g.id;
   const restoreFocus = () => {
-    var _a5;
-    if (!isKeyboardOperation || id == null) {
-      return;
-    }
+    var _a6;
+    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 (isHTMLElement(element2)) {
-      element2.focus();
+    const focusTarget = (_a6 = draggable == null ? void 0 : draggable.handle) != null ? _a6 : draggable == null ? void 0 : draggable.element;
+    if (isHTMLElement(focusTarget)) {
+      focusTarget.focus();
     }
   };
   const cleanup = () => {
@@ -775,23 +1195,40 @@ render_fn = function() {
     }
     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);
+    const finalize = () => {
+      var _a6;
+      if (savedCellWidths && isTableRow(element)) {
+        const cells = Array.from(element.cells);
+        for (const [index, cell] of cells.entries()) {
+          cell.style.width = (_a6 = savedCellWidths[index]) != null ? _a6 : "";
+        }
+      }
+      source.status = "idle";
+      const moved = state.current.translate != null;
+      const isDragging = dragOperation.status.dragging;
+      if (placeholder && (!isDragging && moved || placeholder.parentElement !== feedbackElement.parentElement) && feedbackElement.isConnected) {
+        placeholder.replaceWith(feedbackElement);
+      }
+      placeholder == null ? void 0 : placeholder.remove();
+    };
+    if (feedbackElement === this.overlay) {
+      setTimeout(finalize, 0);
+    } else {
+      finalize();
     }
-    placeholder == null ? void 0 : placeholder.remove();
   };
+  const optionsDropAnimation = options == null ? void 0 : options.dropAnimation;
+  const feedbackPlugin = this;
   const cleanupEffects = effects(
     // Update transform on move
     () => {
-      var _a5;
+      var _a6, _b3, _c4;
       const { transform: transform2, status: status2 } = dragOperation;
       if (!transform2.x && !transform2.y && !state.current.translate) {
         return;
       }
       if (status2.dragging) {
-        const initialTranslate2 = (_a5 = initial.translate) != null ? _a5 : { x: 0, y: 0 };
+        const initialTranslate2 = (_a6 = initial.translate) != null ? _a6 : { x: 0, y: 0 };
         const translate2 = {
           x: transform2.x / frameTransform.scaleX + initialTranslate2.x,
           y: transform2.y / frameTransform.scaleY + initialTranslate2.y
@@ -799,13 +1236,14 @@ render_fn = function() {
         const previousTranslate = state.current.translate;
         const modifiers = untracked(() => dragOperation.modifiers);
         const currentShape = untracked(() => {
-          var _a6;
-          return (_a6 = dragOperation.shape) == null ? void 0 : _a6.current;
+          var _a7;
+          return (_a7 = dragOperation.shape) == null ? void 0 : _a7.current;
         });
-        const translateTransition = isKeyboardOperation ? "250ms cubic-bezier(0.25, 1, 0.5, 1)" : "0ms linear";
+        const keyboardTransition = options == null ? void 0 : options.keyboardTransition;
+        const translateTransition = isKeyboardOperation && !reducedMotion && keyboardTransition !== null ? `${(_b3 = keyboardTransition == null ? void 0 : keyboardTransition.duration) != null ? _b3 : 250}ms ${(_c4 = keyboardTransition == null ? void 0 : keyboardTransition.easing) != null ? _c4 : "cubic-bezier(0.25, 1, 0.5, 1)"}` : "0ms linear";
         styles.set(
           {
-            transition: `${transition}, translate ${translateTransition}`,
+            transition: feedbackTransition ? `${feedbackTransition}, translate ${translateTransition}` : `translate ${translateTransition}`,
             translate: `${translate2.x}px ${translate2.y}px 0`
           },
           CSS_PREFIX
@@ -816,7 +1254,6 @@ render_fn = function() {
           dragOperation.shape = Rectangle.from(
             currentShape.boundingRectangle
           ).translate(
-            // Need to take into account frame transform when optimistically updating shape
             delta2.x * frameTransform.scaleX,
             delta2.y * frameTransform.scaleY
           );
@@ -831,83 +1268,33 @@ render_fn = function() {
       if (dragOperation.status.dropped) {
         this.dispose();
         source.status = "dropping";
+        const dropAnimationConfig = (entityOptions == null ? void 0 : entityOptions.dropAnimation) !== void 0 ? entityOptions.dropAnimation : feedbackPlugin.dropAnimation !== void 0 ? feedbackPlugin.dropAnimation : optionsDropAnimation;
         let translate2 = state.current.translate;
         const moved = translate2 != null;
         if (!translate2 && element !== feedbackElement) {
-          translate2 = {
-            x: 0,
-            y: 0
-          };
+          translate2 = { x: 0, y: 0 };
         }
-        if (!translate2) {
+        if (!translate2 || dropAnimationConfig === null) {
           cleanup();
           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 options2 = {
-              frameTransform: isSameFrame(feedbackElement, target) ? null : void 0
-            };
-            const current = new DOMRectangle(feedbackElement, options2);
-            const currentTranslate = (_b3 = parseTranslate(getComputedStyles(feedbackElement).translate)) != null ? _b3 : translate2;
-            const final = new DOMRectangle(target, options2);
-            const delta2 = Rectangle.delta(current, final, source.alignment);
-            const finalTranslate = {
-              x: currentTranslate.x - delta2.x,
-              y: currentTranslate.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`
-              ]
-            } : {};
-            styles.set({ transition }, CSS_PREFIX);
-            feedbackElement.setAttribute(DROPPING_ATTRIBUTE, "");
-            elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
-            animateTransform({
-              element: feedbackElement,
-              keyframes: __spreadProps(__spreadValues(__spreadValues({}, heightKeyframes), widthKeyframes), {
-                translate: [
-                  `${currentTranslate.x}px ${currentTranslate.y}px 0`,
-                  `${finalTranslate.x}px ${finalTranslate.y}px 0`
-                ]
-              }),
-              options: {
-                duration: moved || feedbackElement !== element ? 250 : 0,
-                easing: "ease"
-              }
-            }).then(() => {
-              feedbackElement.removeAttribute(DROPPING_ATTRIBUTE);
-              animation == null ? void 0 : animation.finish();
-              cleanup();
-              requestAnimationFrame(restoreFocus);
-            });
-          }
-        };
-        manager.renderer.rendering.then(dropAnimation);
+        manager.renderer.rendering.then(() => {
+          runDropAnimation({
+            source,
+            element,
+            feedbackElement,
+            placeholder,
+            translate: translate2,
+            moved,
+            transition,
+            alignment: source.alignment,
+            styles,
+            animation: dropAnimationConfig != null ? dropAnimationConfig : void 0,
+            getElementMutationObserver: () => elementMutationObserver,
+            cleanup,
+            restoreFocus
+          });
+        });
       }
     }
   );
@@ -916,59 +1303,18 @@ render_fn = function() {
     cleanupEffects();
   };
 };
-injectStyles_fn = function() {
-  var _a4, _b2, _c3;
-  const { status, source, target } = this.manager.dragOperation;
-  const { nonce } = (_a4 = this.options) != null ? _a4 : {};
-  if (status.initializing) {
-    const sourceDocument = getDocument((_b2 = source == null ? void 0 : source.element) != null ? _b2 : null);
-    const targetDocument = getDocument((_c3 = target == null ? void 0 : target.element) != null ? _c3 : null);
-    const documents = /* @__PURE__ */ new Set([sourceDocument, targetDocument]);
-    for (const doc of documents) {
-      let registration = styleSheetRegistry.get(doc);
-      if (!registration) {
-        const style = document.createElement("style");
-        style.textContent = CSS_RULES;
-        if (nonce) {
-          style.setAttribute("nonce", nonce);
-        }
-        doc.head.prepend(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);
-    }
-  }
-};
-__decorateElement(_init, 4, "overlay", _overlay_dec, _Feedback, _overlay);
-__decoratorMetadata(_init, _Feedback);
+__decorateElement(_init2, 4, "overlay", _overlay_dec, _Feedback, _overlay);
+__decoratorMetadata(_init2, _Feedback);
 _Feedback.configure = configurator(_Feedback);
 var Feedback = _Feedback;
 var LOCKED = true;
 var UNLOCKED = false;
-var _dec, _a2, _dec2, _b, _init2, __b, __a;
-_b = (_dec2 = [reactive], ScrollDirection.Forward), _a2 = (_dec = [reactive], ScrollDirection.Reverse);
+var _dec, _a3, _dec2, _b, _init3, __b, __a;
+_b = (_dec2 = [reactive], ScrollDirection.Forward), _a3 = (_dec = [reactive], ScrollDirection.Reverse);
 var ScrollLock = class {
   constructor() {
-    __privateAdd(this, __b, __runInitializers(_init2, 8, this, LOCKED)), __runInitializers(_init2, 11, this);
-    __privateAdd(this, __a, __runInitializers(_init2, 12, this, LOCKED)), __runInitializers(_init2, 15, this);
+    __privateAdd(this, __b, __runInitializers(_init3, 8, this, LOCKED)), __runInitializers(_init3, 11, this);
+    __privateAdd(this, __a, __runInitializers(_init3, 12, this, LOCKED)), __runInitializers(_init3, 15, this);
   }
   isLocked(direction) {
     if (direction === ScrollDirection.Idle) {
@@ -986,12 +1332,12 @@ var ScrollLock = class {
     this[direction] = UNLOCKED;
   }
 };
-_init2 = __decoratorStart(null);
+_init3 = __decoratorStart(null);
 __b = new WeakMap();
 __a = new WeakMap();
-__decorateElement(_init2, 4, _b, _dec2, ScrollLock, __b);
-__decorateElement(_init2, 4, _a2, _dec, ScrollLock, __a);
-__decoratorMetadata(_init2, ScrollLock);
+__decorateElement(_init3, 4, _b, _dec2, ScrollLock, __b);
+__decorateElement(_init3, 4, _a3, _dec, ScrollLock, __a);
+__decoratorMetadata(_init3, ScrollLock);
 
 // src/core/plugins/scrolling/ScrollIntent.ts
 var DIRECTIONS = [ScrollDirection.Forward, ScrollDirection.Reverse];
@@ -1047,11 +1393,11 @@ function getDirection(a, b) {
 }
 
 // src/core/plugins/scrolling/Scroller.ts
-var _autoScrolling_dec, _a3, _init3, _autoScrolling, _meta, _scroll;
-var Scroller = class extends (_a3 = CorePlugin, _autoScrolling_dec = [reactive], _a3) {
+var _autoScrolling_dec, _a4, _init4, _autoScrolling, _meta, _scroll;
+var Scroller = class extends (_a4 = CorePlugin, _autoScrolling_dec = [reactive], _a4) {
   constructor(manager) {
     super(manager);
-    __privateAdd(this, _autoScrolling, __runInitializers(_init3, 8, this, false)), __runInitializers(_init3, 11, this);
+    __privateAdd(this, _autoScrolling, __runInitializers(_init4, 8, this, false)), __runInitializers(_init4, 11, this);
     __privateAdd(this, _meta);
     __privateAdd(this, _scroll, () => {
       if (!__privateGet(this, _meta)) {
@@ -1061,8 +1407,8 @@ var Scroller = class extends (_a3 = CorePlugin, _autoScrolling_dec = [reactive],
       if (by.y) element.scrollTop += by.y;
       if (by.x) element.scrollLeft += by.x;
     });
-    this.scroll = (options) => {
-      var _a4;
+    this.scroll = (options, scrollOptions) => {
+      var _a5;
       if (this.disabled) {
         return false;
       }
@@ -1084,12 +1430,21 @@ var Scroller = class extends (_a3 = CorePlugin, _autoScrolling_dec = [reactive],
           return false;
         }
         for (const scrollableElement of elements) {
-          const elementCanScroll = canScroll(scrollableElement, by);
+          const scrollPosition = getScrollPosition(scrollableElement);
+          const elementCanScroll = canScroll(
+            scrollableElement,
+            by,
+            scrollPosition
+          );
           if (elementCanScroll.x || elementCanScroll.y) {
             const { speed, direction } = detectScrollIntent(
               scrollableElement,
               currentPosition,
-              intent
+              intent,
+              scrollOptions == null ? void 0 : scrollOptions.acceleration,
+              scrollOptions == null ? void 0 : scrollOptions.threshold,
+              void 0,
+              scrollPosition
             );
             if (scrollIntent) {
               for (const axis of Axes) {
@@ -1104,7 +1459,7 @@ var Scroller = class extends (_a3 = CorePlugin, _autoScrolling_dec = [reactive],
               const scrollLeftBy = x * speed.x;
               const scrollTopBy = y * speed.y;
               if (scrollLeftBy || scrollTopBy) {
-                const previousScrollBy = (_a4 = __privateGet(this, _meta)) == null ? void 0 : _a4.by;
+                const previousScrollBy = (_a5 = __privateGet(this, _meta)) == null ? void 0 : _a5.by;
                 if (this.autoScrolling && previousScrollBy) {
                   const scrollIntentMismatch = previousScrollBy.x && !scrollLeftBy || previousScrollBy.y && !scrollTopBy;
                   if (scrollIntentMismatch) continue;
@@ -1134,7 +1489,7 @@ var Scroller = class extends (_a3 = CorePlugin, _autoScrolling_dec = [reactive],
         return null;
       }
       const element = getElementFromPoint(
-        getDocument(source == null ? void 0 : source.element),
+        getRoot(source == null ? void 0 : source.element),
         position.current
       );
       if (element) {
@@ -1183,12 +1538,12 @@ var Scroller = class extends (_a3 = CorePlugin, _autoScrolling_dec = [reactive],
     });
   }
 };
-_init3 = __decoratorStart(_a3);
+_init4 = __decoratorStart(_a4);
 _autoScrolling = new WeakMap();
 _meta = new WeakMap();
 _scroll = new WeakMap();
-__decorateElement(_init3, 4, "autoScrolling", _autoScrolling_dec, Scroller, _autoScrolling);
-__decoratorMetadata(_init3, Scroller);
+__decorateElement(_init4, 4, "autoScrolling", _autoScrolling_dec, Scroller, _autoScrolling);
+__decoratorMetadata(_init4, Scroller);
 function getScrollIntent(value) {
   if (value > 0) {
     return ScrollDirection.Forward;
@@ -1238,24 +1593,31 @@ var scheduler3 = new Scheduler((callback) => {
 
 // src/core/plugins/scrolling/AutoScroller.ts
 var AUTOSCROLL_INTERVAL = 10;
-var AutoScroller = class extends Plugin {
-  constructor(manager, _options) {
-    super(manager);
+var _AutoScroller = class _AutoScroller extends Plugin {
+  constructor(manager, options) {
+    super(manager, options);
     const scroller = manager.registry.plugins.get(Scroller);
     if (!scroller) {
       throw new Error("AutoScroller plugin depends on Scroller plugin");
     }
     this.destroy = effect(() => {
+      var _a5, _b2, _c3;
       if (this.disabled) {
         return;
       }
       const { position: _, status } = manager.dragOperation;
       if (status.dragging) {
-        const canScroll2 = scroller.scroll();
+        const scrollOptions = {
+          acceleration: (_a5 = this.options) == null ? void 0 : _a5.acceleration,
+          threshold: typeof ((_b2 = this.options) == null ? void 0 : _b2.threshold) === "number" ? { x: this.options.threshold, y: this.options.threshold } : (_c3 = this.options) == null ? void 0 : _c3.threshold
+        };
+        const canScroll2 = scroller.scroll(void 0, scrollOptions);
         if (canScroll2) {
           scroller.autoScrolling = true;
           const interval = setInterval(
-            () => scheduler3.schedule(scroller.scroll),
+            () => scheduler3.schedule(
+              () => scroller.scroll(void 0, scrollOptions)
+            ),
             AUTOSCROLL_INTERVAL
           );
           return () => {
@@ -1268,6 +1630,8 @@ var AutoScroller = class extends Plugin {
     });
   }
 };
+_AutoScroller.configure = configurator(_AutoScroller);
+var AutoScroller = _AutoScroller;
 var listenerOptions = {
   capture: true,
   passive: true
@@ -1287,10 +1651,10 @@ var ScrollListener = class extends CorePlugin {
     };
     const { dragOperation } = this.manager;
     this.destroy = effect(() => {
-      var _a4, _b2, _c3;
+      var _a5, _b2, _c3;
       const enabled = dragOperation.status.dragging;
       if (enabled) {
-        const root = (_c3 = (_b2 = (_a4 = dragOperation.source) == null ? void 0 : _a4.element) == null ? void 0 : _b2.ownerDocument) != null ? _c3 : document;
+        const root = (_c3 = (_b2 = (_a5 = dragOperation.source) == null ? void 0 : _a5.element) == null ? void 0 : _b2.ownerDocument) != null ? _c3 : document;
         root.addEventListener("scroll", this.handleScroll, listenerOptions);
         return () => {
           root.removeEventListener(
@@ -1304,21 +1668,18 @@ var ScrollListener = class extends CorePlugin {
   }
 };
 _timeout = new WeakMap();
+var CSS_RULES2 = "* { user-select: none !important; -webkit-user-select: none !important; }";
 var PreventSelection = class extends Plugin {
-  constructor(manager, options) {
-    super(manager, options);
+  constructor(manager) {
+    super(manager);
     this.manager = manager;
+    const styleInjector = manager.registry.plugins.get(
+      StyleInjector
+    );
+    const unregisterStyles = styleInjector == null ? void 0 : styleInjector.register(CSS_RULES2);
     this.destroy = effect(() => {
-      var _a4;
       const { dragOperation } = this.manager;
-      const { nonce } = (_a4 = this.options) != null ? _a4 : {};
       if (dragOperation.status.initialized) {
-        const style = document.createElement("style");
-        if (nonce) {
-          style.setAttribute("nonce", nonce);
-        }
-        style.textContent = `* { user-select: none !important; -webkit-user-select: none !important; }`;
-        document.head.appendChild(style);
         removeSelection();
         document.addEventListener("selectionchange", removeSelection, {
           capture: true
@@ -1327,16 +1688,83 @@ var PreventSelection = class extends Plugin {
           document.removeEventListener("selectionchange", removeSelection, {
             capture: true
           });
-          style.remove();
         };
       }
     });
+    if (unregisterStyles) {
+      const originalDestroy = this.destroy.bind(this);
+      this.destroy = () => {
+        unregisterStyles();
+        originalDestroy();
+      };
+    }
   }
 };
 function removeSelection() {
-  var _a4;
-  (_a4 = document.getSelection()) == null ? void 0 : _a4.removeAllRanges();
+  var _a5;
+  (_a5 = document.getSelection()) == null ? void 0 : _a5.removeAllRanges();
 }
+
+// src/core/sensors/keyboard/KeyboardSensor.helpers.ts
+function isKeyboardKey(event, codes) {
+  const eventKey = normalizeKey(event.key);
+  return codes.some((code) => normalizeKey(code) === eventKey);
+}
+var namedKeys = /* @__PURE__ */ new Set([
+  "alt",
+  "altgraph",
+  "backspace",
+  "capslock",
+  "control",
+  "delete",
+  "end",
+  "enter",
+  "escape",
+  "home",
+  "insert",
+  "meta",
+  "pagedown",
+  "pageup",
+  "pause",
+  "printscreen",
+  "shift",
+  "space",
+  "tab",
+  "arrowdown",
+  "arrowleft",
+  "arrowright",
+  "arrowup",
+  "f1",
+  "f2",
+  "f3",
+  "f4",
+  "f5",
+  "f6",
+  "f7",
+  "f8",
+  "f9",
+  "f10",
+  "f11",
+  "f12"
+]);
+function normalizeKey(key) {
+  if (key === " " || key === "Spacebar") {
+    return "space";
+  }
+  if (/^Key[A-Z]$/.test(key)) {
+    return key.slice(3).toLowerCase();
+  }
+  if (/^Digit[0-9]$/.test(key)) {
+    return key.slice(5);
+  }
+  if (key.length === 1) {
+    return key.toLowerCase();
+  }
+  const lowerCaseKey = key.toLowerCase();
+  return namedKeys.has(lowerCaseKey) ? lowerCaseKey : key;
+}
+
+// src/core/sensors/keyboard/KeyboardSensor.ts
 var defaults = Object.freeze({
   offset: 10,
   keyboardCodes: {
@@ -1348,11 +1776,10 @@ var defaults = Object.freeze({
     left: ["ArrowLeft"],
     right: ["ArrowRight"]
   },
-  shouldActivate(args) {
-    var _a4;
-    const { event, source } = args;
-    const target = (_a4 = source.handle) != null ? _a4 : source.element;
-    return event.target === target;
+  preventActivation(event, source) {
+    var _a5;
+    const target = (_a5 = source.handle) != null ? _a5 : source.element;
+    return event.target !== target;
   }
 });
 var _cleanupFunctions;
@@ -1375,23 +1802,22 @@ var _KeyboardSensor = class _KeyboardSensor extends Sensor {
       }
       const {
         keyboardCodes = defaults.keyboardCodes,
-        shouldActivate = defaults.shouldActivate
+        preventActivation = defaults.preventActivation
       } = options != null ? options : {};
-      if (!keyboardCodes.start.includes(event.code)) {
+      if (!isKeyboardKey(event, keyboardCodes.start)) {
         return;
       }
       if (!this.manager.dragOperation.status.idle) {
         return;
       }
-      if (shouldActivate({ event, source, manager: this.manager })) {
-        this.handleStart(event, source, options);
-      }
+      if (preventActivation == null ? void 0 : preventActivation(event, source)) return;
+      this.handleStart(event, source, options);
     };
   }
   bind(source, options = this.options) {
     const unbind = effect(() => {
-      var _a4;
-      const target = (_a4 = source.handle) != null ? _a4 : source.element;
+      var _a5;
+      const target = (_a5 = source.handle) != null ? _a5 : source.element;
       const listener = (event) => {
         if (isKeyboardEvent(event)) {
           this.handleSourceKeyDown(event, source, options);
@@ -1439,20 +1865,20 @@ var _KeyboardSensor = class _KeyboardSensor extends Sensor {
   }
   handleKeyDown(event, _source, options) {
     const { keyboardCodes = defaults.keyboardCodes } = options != null ? options : {};
-    if (isKeycode(event, [...keyboardCodes.end, ...keyboardCodes.cancel])) {
+    if (isKeyboardKey(event, [...keyboardCodes.end, ...keyboardCodes.cancel])) {
       event.preventDefault();
-      const canceled = isKeycode(event, keyboardCodes.cancel);
+      const canceled = isKeyboardKey(event, keyboardCodes.cancel);
       this.handleEnd(event, canceled);
       return;
     }
-    if (isKeycode(event, keyboardCodes.up)) {
+    if (isKeyboardKey(event, keyboardCodes.up)) {
       this.handleMove("up", event);
-    } else if (isKeycode(event, keyboardCodes.down)) {
+    } else if (isKeyboardKey(event, keyboardCodes.down)) {
       this.handleMove("down", event);
     }
-    if (isKeycode(event, keyboardCodes.left)) {
+    if (isKeyboardKey(event, keyboardCodes.left)) {
       this.handleMove("left", event);
-    } else if (isKeycode(event, keyboardCodes.right)) {
+    } else if (isKeyboardKey(event, keyboardCodes.right)) {
       this.handleMove("right", event);
     }
   }
@@ -1464,14 +1890,14 @@ var _KeyboardSensor = class _KeyboardSensor extends Sensor {
     this.cleanup();
   }
   handleMove(direction, event) {
-    var _a4, _b2;
+    var _a5, _b2;
     const { shape } = this.manager.dragOperation;
     const factor = event.shiftKey ? 5 : 1;
     let by = {
       x: 0,
       y: 0
     };
-    let offset = (_b2 = (_a4 = this.options) == null ? void 0 : _a4.offset) != null ? _b2 : defaults.offset;
+    let offset = (_b2 = (_a5 = this.options) == null ? void 0 : _a5.offset) != null ? _b2 : defaults.offset;
     if (typeof offset === "number") {
       offset = { x: offset, y: offset };
     }
@@ -1522,40 +1948,134 @@ _cleanupFunctions = new WeakMap();
 _KeyboardSensor.configure = configurator(_KeyboardSensor);
 _KeyboardSensor.defaults = defaults;
 var KeyboardSensor = _KeyboardSensor;
-function isKeycode(event, codes) {
-  return codes.includes(event.code);
-}
+var _coordinates;
+var DistanceConstraint = class extends ActivationConstraint {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _coordinates);
+  }
+  onEvent(event) {
+    switch (event.type) {
+      case "pointerdown":
+        __privateSet(this, _coordinates, getEventCoordinates(event));
+        break;
+      case "pointermove":
+        if (!__privateGet(this, _coordinates)) return;
+        const { x, y } = getEventCoordinates(event);
+        const delta = {
+          x: x - __privateGet(this, _coordinates).x,
+          y: y - __privateGet(this, _coordinates).y
+        };
+        const { tolerance } = this.options;
+        if (tolerance && exceedsDistance(delta, tolerance)) {
+          this.abort();
+          return;
+        }
+        if (exceedsDistance(delta, this.options.value)) {
+          this.activate(event);
+        }
+        break;
+      case "pointerup":
+        this.abort();
+        break;
+    }
+  }
+  abort() {
+    __privateSet(this, _coordinates, void 0);
+  }
+};
+_coordinates = new WeakMap();
+var _timeout2, _coordinates2;
+var DelayConstraint = class extends ActivationConstraint {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _timeout2);
+    __privateAdd(this, _coordinates2);
+  }
+  onEvent(event) {
+    switch (event.type) {
+      case "pointerdown":
+        __privateSet(this, _coordinates2, getEventCoordinates(event));
+        __privateSet(this, _timeout2, setTimeout(
+          () => this.activate(event),
+          this.options.value
+        ));
+        break;
+      case "pointermove":
+        if (!__privateGet(this, _coordinates2)) return;
+        const { x, y } = getEventCoordinates(event);
+        const delta = {
+          x: x - __privateGet(this, _coordinates2).x,
+          y: y - __privateGet(this, _coordinates2).y
+        };
+        if (exceedsDistance(delta, this.options.tolerance)) {
+          this.abort();
+        }
+        break;
+      case "pointerup":
+        this.abort();
+        break;
+    }
+  }
+  abort() {
+    if (__privateGet(this, _timeout2)) {
+      clearTimeout(__privateGet(this, _timeout2));
+      __privateSet(this, _coordinates2, void 0);
+      __privateSet(this, _timeout2, void 0);
+    }
+  }
+};
+_timeout2 = new WeakMap();
+_coordinates2 = new WeakMap();
+
+// src/core/sensors/pointer/PointerActivationConstraints.ts
+var PointerActivationConstraints = class {
+};
+PointerActivationConstraints.Delay = DelayConstraint;
+PointerActivationConstraints.Distance = DistanceConstraint;
+
+// src/core/sensors/pointer/PointerSensor.ts
 var defaults2 = Object.freeze({
   activationConstraints(event, source) {
-    var _a4;
+    var _a5;
     const { pointerType, target } = event;
-    if (pointerType === "mouse" && isElement(target) && (source.handle === target || ((_a4 = source.handle) == null ? void 0 : _a4.contains(target)))) {
+    if (pointerType === "mouse" && isElement(target) && (source.handle === target || ((_a5 = source.handle) == null ? void 0 : _a5.contains(target)))) {
       return void 0;
     }
     if (pointerType === "touch") {
-      return {
-        delay: { value: 250, tolerance: 5 }
-      };
+      return [
+        new PointerActivationConstraints.Delay({ value: 250, tolerance: 5 })
+      ];
     }
     if (isTextInput(target) && !event.defaultPrevented) {
-      return {
-        delay: { value: 200, tolerance: 0 }
-      };
+      return [
+        new PointerActivationConstraints.Delay({ value: 200, tolerance: 0 })
+      ];
     }
-    return {
-      delay: { value: 200, tolerance: 10 },
-      distance: { value: 5 }
-    };
+    return [
+      new PointerActivationConstraints.Delay({ value: 200, tolerance: 10 }),
+      new PointerActivationConstraints.Distance({ value: 5 })
+    ];
+  },
+  preventActivation(event, source) {
+    var _a5;
+    const { target } = event;
+    if (target === source.element) return false;
+    if (target === source.handle) return false;
+    if (!isElement(target)) return false;
+    if ((_a5 = source.handle) == null ? void 0 : _a5.contains(target)) return false;
+    const interactiveElement = getInteractiveElement(target);
+    if (interactiveElement === source.element) return false;
+    return Boolean(interactiveElement);
   }
 });
-var _cleanup, _clearTimeout;
+var _cleanup;
 var _PointerSensor = class _PointerSensor extends Sensor {
   constructor(manager, options) {
     super(manager);
     this.manager = manager;
     this.options = options;
     __privateAdd(this, _cleanup, /* @__PURE__ */ new Set());
-    __privateAdd(this, _clearTimeout);
     this.listeners = new Listeners();
     this.latest = {
       event: void 0,
@@ -1572,15 +2092,14 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     this.handlePointerUp = this.handlePointerUp.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
   }
-  activationConstraints(event, source) {
-    var _a4;
-    const { activationConstraints = defaults2.activationConstraints } = (_a4 = this.options) != null ? _a4 : {};
+  activationConstraints(event, source, options = this.options) {
+    const { activationConstraints = defaults2.activationConstraints } = options != null ? options : {};
     const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
     return constraints;
   }
   bind(source, options = this.options) {
     const unbind = effect(() => {
-      var _a4;
+      var _a5;
       const controller = new AbortController();
       const { signal: signal3 } = controller;
       const listener = (event) => {
@@ -1588,7 +2107,7 @@ var _PointerSensor = class _PointerSensor extends Sensor {
           this.handlePointerDown(event, source, options);
         }
       };
-      let targets = [(_a4 = source.handle) != null ? _a4 : source.element];
+      let targets = [(_a5 = source.handle) != null ? _a5 : source.element];
       if (options == null ? void 0 : options.activatorElements) {
         if (Array.isArray(options.activatorElements)) {
           targets = options.activatorElements;
@@ -1605,36 +2124,33 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     });
     return unbind;
   }
-  handlePointerDown(event, source, options = {}) {
+  handlePointerDown(event, source, options) {
     if (this.disabled || !event.isPrimary || event.button !== 0 || !isElement(event.target) || source.disabled || isCapturedBySensor(event) || !this.manager.dragOperation.status.idle) {
       return;
     }
+    const { preventActivation = defaults2.preventActivation } = options != null ? options : {};
+    if (preventActivation == null ? void 0 : preventActivation(event, source)) {
+      return;
+    }
     const { target } = event;
     const isNativeDraggable = isHTMLElement(target) && target.draggable && target.getAttribute("draggable") === "true";
     const offset = getFrameTransform(source.element);
+    const { x, y } = getEventCoordinates(event);
     this.initialCoordinates = {
-      x: event.clientX * offset.scaleX + offset.x,
-      y: event.clientY * offset.scaleY + offset.y
+      x: x * offset.scaleX + offset.x,
+      y: y * offset.scaleY + offset.y
     };
-    const constraints = this.activationConstraints(event, source);
+    const constraints = this.activationConstraints(event, source, options);
     event.sensor = this;
-    if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
-      this.handleStart(source, event);
-    } else {
-      const { delay } = constraints;
-      if (delay) {
-        const timeout = setTimeout(
-          () => this.handleStart(source, event),
-          delay.value
-        );
-        __privateSet(this, _clearTimeout, () => {
-          clearTimeout(timeout);
-          __privateSet(this, _clearTimeout, void 0);
-        });
-      }
-    }
-    const ownerDocument = getDocument(event.target);
-    const unbindListeners = this.listeners.bind(ownerDocument, [
+    const controller = new ActivationController(
+      constraints,
+      (event2) => this.handleStart(source, event2)
+    );
+    controller.signal.onabort = () => this.handleCancel(event);
+    controller.onEvent(event);
+    this.controller = controller;
+    const documents = getDocuments();
+    const unbindListeners = this.listeners.bind(documents, [
       {
         type: "pointermove",
         listener: (event2) => this.handlePointerMove(event2, source)
@@ -1646,6 +2162,10 @@ var _PointerSensor = class _PointerSensor extends Sensor {
           capture: true
         }
       },
+      {
+        type: "pointercancel",
+        listener: this.handleCancel
+      },
       {
         // Cancel activation if there is a competing Drag and Drop interaction
         type: "dragstart",
@@ -1656,49 +2176,28 @@ var _PointerSensor = class _PointerSensor extends Sensor {
       }
     ]);
     const cleanup = () => {
-      var _a4;
       unbindListeners();
-      (_a4 = __privateGet(this, _clearTimeout)) == null ? void 0 : _a4.call(this);
       this.initialCoordinates = void 0;
     };
     __privateGet(this, _cleanup).add(cleanup);
   }
   handlePointerMove(event, source) {
-    const coordinates = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    const offset = getFrameTransform(source.element);
-    coordinates.x = coordinates.x * offset.scaleX + offset.x;
-    coordinates.y = coordinates.y * offset.scaleY + offset.y;
-    if (this.manager.dragOperation.status.dragging) {
+    var _a5, _b2;
+    if (((_a5 = this.controller) == null ? void 0 : _a5.activated) === false) {
+      (_b2 = this.controller) == null ? void 0 : _b2.onEvent(event);
+    }
+    const { status } = this.manager.dragOperation;
+    if (status.initializing || status.dragging) {
+      const coordinates = getEventCoordinates(event);
+      const offset = getFrameTransform(source.element);
+      coordinates.x = coordinates.x * offset.scaleX + offset.x;
+      coordinates.y = coordinates.y * offset.scaleY + offset.y;
       event.preventDefault();
       event.stopPropagation();
       this.latest.event = event;
       this.latest.coordinates = coordinates;
-      scheduler.schedule(this.handleMove);
-      return;
-    }
-    if (!this.initialCoordinates) {
-      return;
-    }
-    const delta = {
-      x: coordinates.x - this.initialCoordinates.x,
-      y: coordinates.y - this.initialCoordinates.y
-    };
-    const constraints = this.activationConstraints(event, source);
-    const { distance, delay } = constraints != null ? constraints : {};
-    if (distance) {
-      if (distance.tolerance != null && exceedsDistance(delta, distance.tolerance)) {
-        return this.handleCancel(event);
-      }
-      if (exceedsDistance(delta, distance.value)) {
-        return this.handleStart(source, event);
-      }
-    }
-    if (delay) {
-      if (exceedsDistance(delta, delay.tolerance)) {
-        return this.handleCancel(event);
+      if (status.dragging) {
+        scheduler.schedule(this.handleMove);
       }
     }
   }
@@ -1708,6 +2207,20 @@ var _PointerSensor = class _PointerSensor extends Sensor {
       event.preventDefault();
       event.stopPropagation();
       const canceled = !status.initialized;
+      const ownerDocument = getDocument(event.target);
+      const ownerWindow = ownerDocument.defaultView;
+      if (!canceled && ownerWindow) {
+        const suppressClick = (clickEvent) => {
+          if (clickEvent.target === ownerDocument.body && clickEvent.detail > 0) {
+            clickEvent.preventDefault();
+            clickEvent.stopImmediatePropagation();
+          }
+        };
+        ownerWindow.addEventListener("click", suppressClick, true);
+        ownerWindow.setTimeout(() => {
+          ownerWindow.removeEventListener("click", suppressClick, true);
+        }, 0);
+      }
       this.manager.actions.stop({ event, canceled });
     }
     this.cleanup();
@@ -1719,9 +2232,7 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     }
   }
   handleStart(source, event) {
-    var _a4;
     const { manager, initialCoordinates } = this;
-    (_a4 = __privateGet(this, _clearTimeout)) == null ? void 0 : _a4.call(this);
     if (!initialCoordinates || !manager.dragOperation.status.idle) {
       return;
     }
@@ -1737,8 +2248,14 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     event.preventDefault();
     const ownerDocument = getDocument(event.target);
     const pointerCaptureTarget = ownerDocument.body;
-    pointerCaptureTarget.setPointerCapture(event.pointerId);
-    const unbind = this.listeners.bind(ownerDocument, [
+    try {
+      pointerCaptureTarget.setPointerCapture(event.pointerId);
+    } catch (e) {
+      this.handleCancel(event);
+      return;
+    }
+    const listenerTargets = isElement(event.target) ? [event.target, pointerCaptureTarget] : pointerCaptureTarget;
+    const unbind = this.listeners.bind(listenerTargets, [
       {
         // Prevent scrolling on touch devices
         type: "touchmove",
@@ -1759,16 +2276,14 @@ var _PointerSensor = class _PointerSensor extends Sensor {
       {
         type: "keydown",
         listener: this.handleKeyDown
-      },
-      {
-        type: "lostpointercapture",
-        listener: (event2) => {
-          if (event2.target !== pointerCaptureTarget) return;
-          this.handlePointerUp(event2);
-        }
       }
     ]);
     __privateGet(this, _cleanup).add(unbind);
+    manager.renderer.rendering.then(() => {
+      if (!controller.signal.aborted && manager.dragOperation.status.dragging) {
+        scheduler.schedule(this.handleMove);
+      }
+    });
   }
   handleCancel(event) {
     const { dragOperation } = this.manager;
@@ -1778,6 +2293,11 @@ var _PointerSensor = class _PointerSensor extends Sensor {
     this.cleanup();
   }
   cleanup() {
+    const { controller } = this;
+    this.controller = void 0;
+    if (controller && !controller.signal.aborted) {
+      controller.abort();
+    }
     this.latest = {
       event: void 0,
       coordinates: void 0
@@ -1791,7 +2311,6 @@ var _PointerSensor = class _PointerSensor extends Sensor {
   }
 };
 _cleanup = new WeakMap();
-_clearTimeout = new WeakMap();
 _PointerSensor.configure = configurator(_PointerSensor);
 _PointerSensor.defaults = defaults2;
 var PointerSensor = _PointerSensor;
@@ -1823,41 +2342,40 @@ var defaultPreset = {
 };
 var DragDropManager = class extends DragDropManager$1 {
   constructor(input = {}) {
-    const {
-      plugins = defaultPreset.plugins,
-      sensors = defaultPreset.sensors,
-      modifiers = []
-    } = input;
+    const plugins = resolveCustomizable(input.plugins, defaultPreset.plugins);
+    const sensors = resolveCustomizable(input.sensors, defaultPreset.sensors);
+    const modifiers = resolveCustomizable(
+      input.modifiers,
+      defaultPreset.modifiers
+    );
     super(__spreadProps(__spreadValues({}, input), {
-      plugins: [ScrollListener, Scroller, ...plugins],
+      plugins: [ScrollListener, Scroller, StyleInjector, ...plugins],
       sensors,
       modifiers
     }));
   }
 };
-var _feedback_dec, _element_dec, _handle_dec, _c, _init4, _handle, _element, _feedback;
-var Draggable = class extends (_c = Draggable$1, _handle_dec = [reactive], _element_dec = [reactive], _feedback_dec = [reactive], _c) {
-  constructor(_a4, manager) {
-    var _b2 = _a4, {
+var _element_dec, _handle_dec, _c, _init5, _handle, _element;
+var Draggable = class extends (_c = Draggable$1, _handle_dec = [reactive], _element_dec = [reactive], _c) {
+  constructor(_a5, manager) {
+    var _b2 = _a5, {
       element,
       effects: effects2 = () => [],
-      handle,
-      feedback = "default"
+      handle
     } = _b2, input = __objRest(_b2, [
       "element",
       "effects",
-      "handle",
-      "feedback"
+      "handle"
     ]);
     super(
       __spreadValues({
         effects: () => [
           ...effects2(),
           () => {
-            var _a5, _b3;
+            var _a6, _b3;
             const { manager: manager2 } = this;
             if (!manager2) return;
-            const sensors = (_b3 = (_a5 = this.sensors) == null ? void 0 : _a5.map(descriptor)) != null ? _b3 : [
+            const sensors = (_b3 = (_a6 = this.sensors) == null ? void 0 : _a6.map(descriptor)) != null ? _b3 : [
               ...manager2.sensors
             ];
             const unbindFunctions = sensors.map((entry) => {
@@ -1874,26 +2392,22 @@ var Draggable = class extends (_c = Draggable$1, _handle_dec = [reactive], _elem
       }, input),
       manager
     );
-    __privateAdd(this, _handle, __runInitializers(_init4, 8, this)), __runInitializers(_init4, 11, this);
-    __privateAdd(this, _element, __runInitializers(_init4, 12, this)), __runInitializers(_init4, 15, this);
-    __privateAdd(this, _feedback, __runInitializers(_init4, 16, this)), __runInitializers(_init4, 19, this);
+    __privateAdd(this, _handle, __runInitializers(_init5, 8, this)), __runInitializers(_init5, 11, this);
+    __privateAdd(this, _element, __runInitializers(_init5, 12, this)), __runInitializers(_init5, 15, this);
     this.element = element;
     this.handle = handle;
-    this.feedback = feedback;
   }
 };
-_init4 = __decoratorStart(_c);
+_init5 = __decoratorStart(_c);
 _handle = new WeakMap();
 _element = new WeakMap();
-_feedback = new WeakMap();
-__decorateElement(_init4, 4, "handle", _handle_dec, Draggable, _handle);
-__decorateElement(_init4, 4, "element", _element_dec, Draggable, _element);
-__decorateElement(_init4, 4, "feedback", _feedback_dec, Draggable, _feedback);
-__decoratorMetadata(_init4, Draggable);
-var _proxy_dec, _element_dec2, _c2, _init5, _element2, _d, element_get, element_set, _Droppable_instances, _proxy;
+__decorateElement(_init5, 4, "handle", _handle_dec, Draggable, _handle);
+__decorateElement(_init5, 4, "element", _element_dec, Draggable, _element);
+__decoratorMetadata(_init5, Draggable);
+var _proxy_dec, _element_dec2, _c2, _init6, _element2, _d, element_get, element_set, _Droppable_instances, _proxy;
 var Droppable = class extends (_c2 = Droppable$1, _element_dec2 = [reactive], _proxy_dec = [reactive], _c2) {
-  constructor(_a4, manager) {
-    var _b2 = _a4, { element, effects: effects2 = () => [] } = _b2, input = __objRest(_b2, ["element", "effects"]);
+  constructor(_a5, manager) {
+    var _b2 = _a5, { element, effects: effects2 = () => [] } = _b2, input = __objRest(_b2, ["element", "effects"]);
     const { collisionDetector = defaultCollisionDetection } = input;
     const updateShape = (boundingClientRect) => {
       const { manager: manager2, element: element2 } = this;
@@ -1939,8 +2453,8 @@ var Droppable = class extends (_c2 = Droppable$1, _element_dec2 = [reactive], _p
             }
           },
           () => {
-            var _a5;
-            if ((_a5 = this.manager) == null ? void 0 : _a5.dragOperation.status.initialized) {
+            var _a6;
+            if ((_a6 = this.manager) == null ? void 0 : _a6.dragOperation.status.initialized) {
               return () => {
                 this.shape = void 0;
               };
@@ -1951,8 +2465,8 @@ var Droppable = class extends (_c2 = Droppable$1, _element_dec2 = [reactive], _p
       manager
     );
     __privateAdd(this, _Droppable_instances);
-    __privateAdd(this, _element2, __runInitializers(_init5, 8, this)), __runInitializers(_init5, 11, this);
-    __privateAdd(this, _proxy, __runInitializers(_init5, 12, this)), __runInitializers(_init5, 15, this);
+    __privateAdd(this, _element2, __runInitializers(_init6, 8, this)), __runInitializers(_init6, 11, this);
+    __privateAdd(this, _proxy, __runInitializers(_init6, 12, this)), __runInitializers(_init6, 15, this);
     this.element = element;
     this.refreshShape = () => updateShape();
   }
@@ -1960,18 +2474,18 @@ var Droppable = class extends (_c2 = Droppable$1, _element_dec2 = [reactive], _p
     __privateSet(this, _Droppable_instances, element, element_set);
   }
   get element() {
-    var _a4;
-    return (_a4 = this.proxy) != null ? _a4 : __privateGet(this, _Droppable_instances, element_get);
+    var _a5;
+    return (_a5 = this.proxy) != null ? _a5 : __privateGet(this, _Droppable_instances, element_get);
   }
 };
-_init5 = __decoratorStart(_c2);
+_init6 = __decoratorStart(_c2);
 _element2 = new WeakMap();
 _Droppable_instances = new WeakSet();
 _proxy = new WeakMap();
-_d = __decorateElement(_init5, 20, "#element", _element_dec2, _Droppable_instances, _element2), element_get = _d.get, element_set = _d.set;
-__decorateElement(_init5, 4, "proxy", _proxy_dec, Droppable, _proxy);
-__decoratorMetadata(_init5, Droppable);
+_d = __decorateElement(_init6, 20, "#element", _element_dec2, _Droppable_instances, _element2), element_get = _d.get, element_set = _d.set;
+__decorateElement(_init6, 4, "proxy", _proxy_dec, Droppable, _proxy);
+__decoratorMetadata(_init6, Droppable);
 
-export { Accessibility, AutoScroller, Cursor, DragDropManager, Draggable, Droppable, Feedback, KeyboardSensor, PointerSensor, PreventSelection, ScrollListener, Scroller, defaultPreset };
+export { Accessibility, AutoScroller, Cursor, DragDropManager, Draggable, Droppable, Feedback, KeyboardSensor, PointerActivationConstraints, PointerSensor, PreventSelection, ScrollListener, Scroller, StyleInjector, defaultPreset };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map