@dnd-kit/dom 0.0.1

package/index.cjs

@@ -0,0 +1,1307 @@
+'use strict';
+
+var abstract = require('@dnd-kit/abstract');
+var state = require('@dnd-kit/state');
+var utilities = require('@dnd-kit/dom/utilities');
+var geometry = require('@dnd-kit/geometry');
+var collision = require('@dnd-kit/collision');
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result)
+    __defProp(target, key, result);
+  return result;
+};
+
+// src/core/plugins/accessibility/defaults.ts
+var defaultAttributes = {
+  role: "button",
+  roleDescription: "draggable",
+  tabIndex: 0
+};
+var defaultDescriptionIdPrefix = `dnd-kit-description`;
+var defaultAnnouncementIdPrefix = `dnd-kit-announcement`;
+var defaultScreenReaderInstructions = {
+  draggable: `To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item in a given direction. Press space again to drop the item in its new position, or press escape to cancel.`
+};
+var defaultAnnouncements = {
+  dragstart({ operation: { source } }) {
+    if (!source)
+      return;
+    return `Picked up draggable item ${source.id}.`;
+  },
+  dragover({ operation: { source, target } }) {
+    if (!source)
+      return;
+    if (target) {
+      return `Draggable item ${source.id} was moved over droppable target ${target.id}.`;
+    }
+    return `Draggable item ${source.id} is no longer over a droppable target.`;
+  },
+  dragend({ operation: { source, target }, canceled }) {
+    if (!source)
+      return;
+    if (canceled) {
+      return `Dragging was cancelled. Draggable item ${source.id} was dropped.`;
+    }
+    if (target) {
+      return `Draggable item ${source.id} was dropped over droppable target ${target.id}`;
+    }
+    return `Draggable item ${source.id} was dropped.`;
+  }
+};
+
+// src/core/plugins/accessibility/utilities.ts
+function isFocusable(element) {
+  return element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLAnchorElement || element instanceof HTMLButtonElement || element instanceof HTMLAreaElement;
+}
+var ids = {};
+function generateUniqueId(prefix) {
+  const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
+  ids[prefix] = id;
+  return `${prefix}-${id}`;
+}
+
+// src/core/plugins/accessibility/HiddenText.ts
+function createHiddenText(id, value) {
+  const element = document.createElement("div");
+  element.id = id;
+  element.style.setProperty("display", "none");
+  element.innerText = value;
+  return element;
+}
+
+// src/core/plugins/accessibility/LiveRegion.ts
+function createLiveRegion(id) {
+  const element = document.createElement("div");
+  element.id = id;
+  element.setAttribute("role", "status");
+  element.setAttribute("aria-live", "polite");
+  element.setAttribute("aria-atomic", "true");
+  element.style.setProperty("position", "fixed");
+  element.style.setProperty("width", "1px");
+  element.style.setProperty("height", "1px");
+  element.style.setProperty("margin", "-1px");
+  element.style.setProperty("border", "0");
+  element.style.setProperty("padding", "0");
+  element.style.setProperty("overflow", "hidden");
+  element.style.setProperty("clip", "rect(0 0 0 0)");
+  element.style.setProperty("clip-path", "inset(100%)");
+  element.style.setProperty("white-space", "nowrap");
+  return element;
+}
+
+// src/core/plugins/accessibility/Accessibility.ts
+var Accessibility = class extends abstract.Plugin {
+  constructor(manager, options) {
+    super(manager);
+    const {
+      id,
+      idPrefix: {
+        description: descriptionPrefix = defaultDescriptionIdPrefix,
+        announcement: announcementPrefix = defaultAnnouncementIdPrefix
+      } = {},
+      announcements = defaultAnnouncements,
+      screenReaderInstructions = defaultScreenReaderInstructions
+    } = options ?? {};
+    const descriptionId = id ? `${descriptionPrefix}-${id}` : generateUniqueId(descriptionPrefix);
+    const announcementId = id ? `${announcementPrefix}-${id}` : generateUniqueId(announcementPrefix);
+    let hiddenTextElement;
+    let liveRegionElement;
+    const eventListeners = Object.entries(announcements).map(
+      ([eventName, getAnnouncement]) => {
+        return this.manager.monitor.addEventListener(
+          eventName,
+          (event, manager2) => {
+            const announcement = getAnnouncement?.(event, manager2);
+            if (announcement && liveRegionElement) {
+              liveRegionElement.innerText = announcement;
+            }
+          }
+        );
+      }
+    );
+    const initialize = () => {
+      hiddenTextElement = createHiddenText(
+        descriptionId,
+        screenReaderInstructions.draggable
+      );
+      liveRegionElement = createLiveRegion(announcementId);
+      document.body.append(hiddenTextElement, liveRegionElement);
+    };
+    const cleanupEffects = state.effects(() => {
+      for (const draggable of manager.registry.draggables.value) {
+        const { element, handle } = draggable;
+        const activator = handle ?? element;
+        if (activator) {
+          if (!hiddenTextElement || !liveRegionElement) {
+            initialize();
+          }
+          if (!isFocusable(activator) && !activator.hasAttribute("tabindex")) {
+            activator.setAttribute("tabindex", "0");
+          }
+          if (!activator.hasAttribute("role") && !(activator instanceof HTMLButtonElement)) {
+            activator.setAttribute("role", defaultAttributes.role);
+          }
+          if (!activator.hasAttribute("role-description")) {
+            activator.setAttribute(
+              "aria-roledescription",
+              defaultAttributes.roleDescription
+            );
+          }
+          if (!activator.hasAttribute("aria-describedby")) {
+            activator.setAttribute("aria-describedby", descriptionId);
+          }
+          activator.setAttribute(
+            "aria-pressed",
+            String(draggable.isDragSource)
+          );
+          activator.setAttribute("aria-disabled", String(draggable.disabled));
+        }
+      }
+      this.destroy = () => {
+        hiddenTextElement?.remove();
+        liveRegionElement?.remove();
+        eventListeners.forEach((unsubscribe) => unsubscribe());
+        cleanupEffects();
+      };
+    });
+  }
+};
+var Cursor = class extends abstract.Plugin {
+  constructor(manager, options) {
+    super(manager, options);
+    this.manager = manager;
+    this.destroy = state.effect(() => {
+      const { dragOperation } = this.manager;
+      const { cursor = "grabbing" } = this.options ?? {};
+      if (dragOperation.status.initialized) {
+        const style = document.createElement("style");
+        style.innerText = `* { cursor: ${cursor} !important; }`;
+        document.head.appendChild(style);
+        return () => {
+          style.remove();
+        };
+      }
+    });
+  }
+};
+var ATTR_PREFIX = "data-dnd-kit-";
+var CSS_PREFIX = "--dnd-kit-feedback-";
+var cssRules = `[${ATTR_PREFIX}feedback] {position: fixed !important;pointer-events: none;touch-action: none;z-index: 999999;will-change: transform;top: var(${CSS_PREFIX}top, 0px) !important;left: var(${CSS_PREFIX}left, 0px) !important;width: var(${CSS_PREFIX}width, auto) !important;height: var(${CSS_PREFIX}height, auto) !important;margin: var(${CSS_PREFIX}margin, 0px) !important;padding: var(${CSS_PREFIX}padding, 0px) !important;}[${ATTR_PREFIX}feedback][style*="${CSS_PREFIX}translate"] {transition: var(${CSS_PREFIX}transition) !important;translate: var(${CSS_PREFIX}translate) !important;}[${ATTR_PREFIX}feedback][popover]{overflow:visible;}[popover]{background:unset;border:unset;}[${ATTR_PREFIX}feedback]::backdrop {display: none}`;
+var ATTRIBUTE = `${ATTR_PREFIX}feedback`;
+var IGNORED_ATTRIBUTES = [ATTRIBUTE, "popover"];
+var IGNORED_STYLES = ["view-transition-name"];
+var Feedback = class extends abstract.Plugin {
+  constructor(manager) {
+    super(manager);
+    let style;
+    let initialCoordinates;
+    let currentTransform;
+    let transformOrigin;
+    let moved = false;
+    const styleInjectionCleanup = state.effect(() => {
+      if (!style && manager.dragOperation.status.initialized) {
+        style = document.createElement("style");
+        style.innerText = cssRules;
+        document.head.prepend(style);
+        return styleInjectionCleanup;
+      }
+    });
+    const cleanupEffect = state.effect(() => {
+      const { dragOperation } = manager;
+      const { position, source, status } = dragOperation;
+      if (status.idle) {
+        initialCoordinates = void 0;
+        currentTransform = void 0;
+        transformOrigin = void 0;
+        moved = false;
+        return;
+      }
+      if (!source)
+        return;
+      const { element, feedback } = source;
+      if (!element || feedback === "none")
+        return;
+      const shape = new utilities.DOMRectangle(element, true);
+      const { width, height, top, left } = shape;
+      const styles = new utilities.Styles(element);
+      const { padding, margin, transition } = utilities.getWindow(element).getComputedStyle(element);
+      const droppable = manager.registry.droppables.get(source.id);
+      const clone = feedback === "clone";
+      const placeholder = utilities.createPlaceholder(element, clone);
+      const isKeyboardOperation = state.untracked(
+        () => utilities.isKeyboardEvent(manager.dragOperation.activatorEvent)
+      );
+      if (!initialCoordinates) {
+        initialCoordinates = {
+          x: left,
+          y: top
+        };
+      }
+      if (!transformOrigin) {
+        const currentPosition = state.untracked(() => position.current);
+        transformOrigin = {
+          x: (currentPosition.x - left) / width,
+          y: (currentPosition.y - top) / height
+        };
+      }
+      const delta = {
+        x: initialCoordinates.x - left,
+        y: initialCoordinates.y - top
+      };
+      const projected = {
+        top: top + delta.y,
+        left: left + delta.x
+      };
+      element.setAttribute(ATTRIBUTE, "");
+      styles.set(
+        {
+          width,
+          height,
+          top: projected.top,
+          left: projected.left,
+          padding,
+          margin,
+          translate: currentTransform ? `${currentTransform.x}px ${currentTransform.y}px 0` : ""
+        },
+        CSS_PREFIX
+      );
+      element.parentElement?.insertBefore(
+        placeholder,
+        element.nextElementSibling
+      );
+      if (utilities.supportsPopover(element)) {
+        element.setAttribute("popover", "");
+        utilities.showPopover(element);
+      }
+      const actual = new utilities.DOMRectangle(element, true);
+      const offset = {
+        top: projected.top - actual.top,
+        left: projected.left - actual.left
+      };
+      if (Math.abs(offset.top) || Math.abs(offset.left)) {
+        styles.set(
+          {
+            top: projected.top + offset.top,
+            left: projected.left + offset.left
+          },
+          CSS_PREFIX
+        );
+      }
+      const resizeObserver = new ResizeObserver(() => {
+        const placeholderShape = new utilities.DOMRectangle(placeholder, true);
+        const origin = transformOrigin ?? { x: 1, y: 1 };
+        const dX = (width - placeholderShape.width) * origin.x + delta.x;
+        const dY = (height - placeholderShape.height) * origin.y + delta.y;
+        styles.set(
+          {
+            width: placeholderShape.width,
+            height: placeholderShape.height,
+            top: top + dY + offset.top,
+            left: left + dX + offset.left
+          },
+          CSS_PREFIX
+        );
+        manager.dragOperation.shape = new utilities.DOMRectangle(element);
+      });
+      if (droppable) {
+        droppable.placeholder = placeholder;
+        state.untracked(droppable.refreshShape);
+      }
+      dragOperation.shape = shape;
+      resizeObserver.observe(placeholder);
+      const elementMutationObserver = new MutationObserver(() => {
+        for (const attribute of Array.from(element.attributes)) {
+          if (attribute.name.startsWith("aria-") || IGNORED_ATTRIBUTES.includes(attribute.name)) {
+            continue;
+          }
+          if (attribute.name === "style") {
+            if (utilities.supportsStyle(element) && utilities.supportsStyle(placeholder)) {
+              placeholder.setAttribute("style", clone ? "" : "opacity: 0;");
+              placeholder.style.setProperty("transition", "none");
+              for (const key of Object.values(element.style)) {
+                if (key.startsWith(CSS_PREFIX) || IGNORED_STYLES.includes(key)) {
+                  continue;
+                }
+                placeholder.style.setProperty(
+                  key,
+                  element.style.getPropertyValue(key)
+                );
+              }
+            }
+            continue;
+          }
+          placeholder.setAttribute(attribute.name, attribute.value);
+        }
+        if (clone) {
+          placeholder.innerHTML = element.innerHTML;
+        }
+      });
+      elementMutationObserver.observe(element, {
+        attributes: true,
+        subtree: true
+      });
+      const documentMutationObserver = new MutationObserver((entries) => {
+        for (const entry of entries) {
+          if (Array.from(entry.addedNodes).includes(element)) {
+            entry.target.insertBefore(placeholder, element.nextElementSibling);
+            utilities.showPopover(element);
+            return;
+          }
+        }
+      });
+      documentMutationObserver.observe(element.ownerDocument.body, {
+        childList: true,
+        subtree: true
+      });
+      const cleanupEffect2 = state.effect(function updateTransform() {
+        const { transform, status: status2 } = dragOperation;
+        const { x, y } = transform;
+        if (!x && !y && !moved) {
+          return;
+        }
+        if (!moved) {
+          moved = true;
+        }
+        if (status2.dragging) {
+          const translateTransition = isKeyboardOperation ? "250ms ease" : "0ms linear";
+          const shape2 = new utilities.DOMRectangle(element);
+          styles.set(
+            {
+              transition: `${transition}, translate ${translateTransition}`,
+              translate: `${x}px ${y}px 0`
+            },
+            CSS_PREFIX
+          );
+          dragOperation.shape = shape2.translate(
+            x - (currentTransform?.x ?? 0),
+            y - (currentTransform?.y ?? 0)
+          );
+          currentTransform = {
+            x,
+            y,
+            z: 0,
+            scaleX: shape2.scale.x,
+            scaleY: shape2.scale.y
+          };
+        }
+      });
+      const id = manager.dragOperation.source?.id;
+      const restoreFocus = () => {
+        if (id == null) {
+          return;
+        }
+        const draggable = manager.registry.draggables.get(id);
+        const element2 = draggable?.handle ?? draggable?.element;
+        if (element2 instanceof HTMLElement) {
+          element2.focus();
+        }
+      };
+      let cleanup = () => {
+        elementMutationObserver.disconnect();
+        documentMutationObserver.disconnect();
+        resizeObserver.disconnect();
+        styles.reset();
+        placeholder.remove();
+        element.removeAttribute(ATTRIBUTE);
+        if (utilities.supportsPopover(element)) {
+          element.removeAttribute("popover");
+        }
+        cleanupEffect2();
+        dropEffectCleanup();
+        if (droppable) {
+          droppable.placeholder = void 0;
+        }
+      };
+      const dropEffectCleanup = state.effect(function dropAnimation() {
+        if (dragOperation.status.dropping) {
+          const onComplete = cleanup;
+          cleanup = void 0;
+          const transform = currentTransform;
+          if (!transform) {
+            onComplete?.();
+            return;
+          }
+          manager.renderer.rendering.then(() => {
+            utilities.showPopover(element);
+            const shape2 = new utilities.DOMRectangle(placeholder, true);
+            const currentShape = new utilities.DOMRectangle(element, true).translate(
+              transform.x,
+              transform.y
+            );
+            const delta2 = {
+              x: currentShape.center.x - shape2.center.x,
+              y: currentShape.center.y - shape2.center.y
+            };
+            const final = {
+              x: transform.x - delta2.x,
+              y: transform.y - delta2.y,
+              z: 0
+            };
+            utilities.animateTransform({
+              element,
+              keyframes: {
+                translate: [
+                  `${transform.x}px ${transform.y}px ${transform.z ?? 0}`,
+                  `${final.x}px ${final.y}px ${final.z}`
+                ]
+              },
+              options: {
+                duration: moved ? 250 : 0,
+                easing: "ease"
+              },
+              onReady() {
+                styles.remove(["translate", "transition"], CSS_PREFIX);
+              },
+              onFinish() {
+                requestAnimationFrame(restoreFocus);
+                onComplete?.();
+              }
+            });
+          });
+        }
+      });
+      return () => cleanup?.();
+    });
+    this.destroy = () => {
+      styleInjectionCleanup();
+      cleanupEffect();
+      style?.remove();
+    };
+  }
+};
+var LOCKED = true;
+var UNLOCKED = false;
+var _a, _b;
+var ScrollLock = class {
+  constructor() {
+    this[_a] = LOCKED;
+    this[_b] = LOCKED;
+  }
+  static {
+    _a = utilities.ScrollDirection.Forward, _b = utilities.ScrollDirection.Reverse;
+  }
+  isLocked(direction) {
+    if (direction === utilities.ScrollDirection.Idle) {
+      return false;
+    }
+    if (direction == null) {
+      return this[utilities.ScrollDirection.Forward] === LOCKED && this[utilities.ScrollDirection.Reverse] === LOCKED;
+    }
+    return this[direction] === LOCKED;
+  }
+  unlock(direction) {
+    if (direction === utilities.ScrollDirection.Idle) {
+      return;
+    }
+    this[direction] = UNLOCKED;
+  }
+};
+__decorateClass([
+  state.reactive
+], ScrollLock.prototype, _a);
+__decorateClass([
+  state.reactive
+], ScrollLock.prototype, _b);
+
+// src/core/plugins/scrolling/ScrollIntent.ts
+var DIRECTIONS = [utilities.ScrollDirection.Forward, utilities.ScrollDirection.Reverse];
+var ScrollIntent = class {
+  constructor() {
+    this.x = new ScrollLock();
+    this.y = new ScrollLock();
+  }
+  isLocked() {
+    return this.x.isLocked() && this.y.isLocked();
+  }
+};
+var ScrollIntentTracker = class extends abstract.Plugin {
+  constructor(manager) {
+    super(manager);
+    const scrollIntent = state.signal(new ScrollIntent());
+    let previousDelta = null;
+    this.signal = scrollIntent;
+    state.effect(() => {
+      const { status } = manager.dragOperation;
+      if (!status.initialized) {
+        previousDelta = null;
+        scrollIntent.value = new ScrollIntent();
+        return;
+      }
+      const { delta } = manager.dragOperation.position;
+      if (previousDelta) {
+        const directions = {
+          x: getDirection(delta.x, previousDelta.x),
+          y: getDirection(delta.y, previousDelta.y)
+        };
+        const intent = scrollIntent.peek();
+        state.batch(() => {
+          for (const axis of geometry.Axes) {
+            for (const direction of DIRECTIONS) {
+              if (directions[axis] === direction) {
+                intent[axis].unlock(direction);
+              }
+            }
+          }
+          scrollIntent.value = intent;
+        });
+      }
+      previousDelta = delta;
+    });
+  }
+  get current() {
+    return this.signal.peek();
+  }
+};
+function getDirection(a, b) {
+  return Math.sign(a - b);
+}
+
+// src/core/plugins/scrolling/Scroller.ts
+var Scroller = class extends abstract.CorePlugin {
+  constructor(manager) {
+    super(manager);
+    this.#scroll = () => {
+      if (!this.#meta) {
+        return;
+      }
+      const { element, by } = this.#meta;
+      element.scrollBy(by.x, by.y);
+    };
+    this.scroll = (options) => {
+      if (this.disabled) {
+        return false;
+      }
+      const elements = this.getScrollableElements();
+      if (!elements) {
+        return false;
+      }
+      const { position } = this.manager.dragOperation;
+      const currentPosition = position?.current;
+      if (currentPosition) {
+        const { by } = options ?? {};
+        const intent = by ? {
+          x: getScrollIntent(by.x),
+          y: getScrollIntent(by.y)
+        } : void 0;
+        const trackedScrollIntent = intent ? void 0 : this.scrollIntentTracker.current;
+        if (trackedScrollIntent?.isLocked()) {
+          return false;
+        }
+        for (const scrollableElement of elements) {
+          const elementCanScroll = utilities.canScroll(scrollableElement, by);
+          if (elementCanScroll.x || elementCanScroll.y) {
+            const { speed, direction } = utilities.detectScrollIntent(
+              scrollableElement,
+              currentPosition,
+              intent
+            );
+            if (trackedScrollIntent) {
+              for (const axis of geometry.Axes) {
+                if (trackedScrollIntent[axis].isLocked(direction[axis])) {
+                  speed[axis] = 0;
+                  direction[axis] = 0;
+                }
+              }
+            }
+            if (direction.x || direction.y) {
+              const { x, y } = by ?? direction;
+              const scrollLeftBy = x * speed.x;
+              const scrollTopBy = y * speed.y;
+              if (scrollLeftBy || scrollTopBy) {
+                this.#meta = {
+                  element: scrollableElement,
+                  by: {
+                    x: scrollLeftBy,
+                    y: scrollTopBy
+                  }
+                };
+                utilities.scheduler.schedule(this.#scroll);
+                return true;
+              }
+            }
+          }
+        }
+      }
+      return false;
+    };
+    let previousElementFromPoint = null;
+    const elementFromPoint = state.computed(() => {
+      const { position } = manager.dragOperation;
+      if (!position) {
+        return null;
+      }
+      const { x, y } = position.current;
+      const element = document.elementFromPoint(x, y);
+      if (element) {
+        previousElementFromPoint = element;
+      }
+      return document.elementFromPoint(x, y) ?? previousElementFromPoint;
+    });
+    const scrollableElements = state.computed(() => {
+      const element = elementFromPoint.value;
+      if (!element || element === document.documentElement) {
+        const { target } = manager.dragOperation;
+        const targetElement = target?.element;
+        if (targetElement) {
+          return utilities.getScrollableAncestors(targetElement, { excludeElement: false });
+        }
+      }
+      return element ? utilities.getScrollableAncestors(element, { excludeElement: false }) : null;
+    }, state.deepEqual);
+    this.getScrollableElements = () => {
+      return scrollableElements.value;
+    };
+    this.scrollIntentTracker = new ScrollIntentTracker(manager);
+    this.destroy = manager.monitor.addEventListener("dragmove", (event) => {
+      if (this.disabled || event.defaultPrevented || !utilities.isKeyboardEvent(manager.dragOperation.activatorEvent) || !event.by) {
+        return;
+      }
+      if (this.scroll({ by: event.by })) {
+        event.preventDefault();
+      }
+    });
+  }
+  #meta;
+  #scroll;
+};
+function getScrollIntent(value) {
+  if (value > 0) {
+    return utilities.ScrollDirection.Forward;
+  }
+  if (value < 0) {
+    return utilities.ScrollDirection.Reverse;
+  }
+  return utilities.ScrollDirection.Idle;
+}
+var AUTOSCROLL_INTERVAL = 10;
+var AutoScroller = class extends abstract.Plugin {
+  constructor(manager, _options) {
+    super(manager);
+    const scroller = manager.registry.plugins.get(Scroller);
+    if (!scroller) {
+      throw new Error("AutoScroller plugin depends on Scroller plugin");
+    }
+    this.destroy = state.effect(() => {
+      if (this.disabled) {
+        return;
+      }
+      const { position: _, status } = manager.dragOperation;
+      if (status.dragging) {
+        const canScroll2 = scroller.scroll();
+        if (canScroll2) {
+          const interval = setInterval(scroller.scroll, AUTOSCROLL_INTERVAL);
+          return () => {
+            clearInterval(interval);
+          };
+        }
+      }
+    });
+  }
+};
+var listenerOptions = {
+  capture: true,
+  passive: true
+};
+var ScrollListener = class extends abstract.CorePlugin {
+  constructor(manager) {
+    super(manager);
+    this.handleScroll = () => {
+      if (this.#timeout == null) {
+        this.#timeout = setTimeout(() => {
+          this.manager.collisionObserver.forceUpdate();
+          this.#timeout = void 0;
+        }, 50);
+      }
+    };
+    const { dragOperation } = this.manager;
+    this.destroy = state.effect(() => {
+      const enabled = dragOperation.status.dragging;
+      if (enabled) {
+        document.addEventListener("scroll", this.handleScroll, listenerOptions);
+        return () => {
+          document.removeEventListener(
+            "scroll",
+            this.handleScroll,
+            listenerOptions
+          );
+        };
+      }
+    });
+  }
+  #timeout;
+};
+var PreventSelection = class extends abstract.Plugin {
+  constructor(manager) {
+    super(manager);
+    this.manager = manager;
+    this.destroy = state.effect(() => {
+      const { dragOperation } = this.manager;
+      if (dragOperation.status.initialized) {
+        const style = document.createElement("style");
+        style.innerText = `* { user-select: none !important;, -webkit-user-select: none !important; }`;
+        document.head.appendChild(style);
+        document.addEventListener("selectionchange", removeSelection, {
+          capture: true
+        });
+        return () => {
+          document.removeEventListener("selectionchange", removeSelection, {
+            capture: true
+          });
+          style.remove();
+        };
+      }
+    });
+  }
+};
+function removeSelection() {
+  document.getSelection()?.removeAllRanges();
+}
+var DEFAULT_KEYBOARD_CODES = {
+  start: ["Space", "Enter"],
+  cancel: ["Escape"],
+  end: ["Space", "Enter"],
+  up: ["ArrowUp"],
+  down: ["ArrowDown"],
+  left: ["ArrowLeft"],
+  right: ["ArrowRight"]
+};
+var DEFAULT_OFFSET = 10;
+var KeyboardSensor = class extends abstract.Sensor {
+  constructor(manager, options) {
+    super(manager);
+    this.manager = manager;
+    this.options = options;
+    this.#cleanupFunctions = [];
+    this.listeners = new utilities.Listeners();
+    this.handleSourceKeyDown = (event, source, options) => {
+      if (this.disabled || event.defaultPrevented) {
+        return;
+      }
+      if (!(event.target instanceof Element)) {
+        return;
+      }
+      if (source.disabled || !source.element) {
+        return;
+      }
+      const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options ?? {};
+      if (!keyboardCodes.start.includes(event.code)) {
+        return;
+      }
+      if (!this.manager.dragOperation.status.idle) {
+        return;
+      }
+      this.handleStart(event, source, options);
+    };
+  }
+  #cleanupFunctions;
+  bind(source, options = this.options) {
+    const unbind = state.effect(() => {
+      const target = source.handle ?? source.element;
+      const listener = (event) => {
+        if (event instanceof KeyboardEvent) {
+          this.handleSourceKeyDown(event, source, options);
+        }
+      };
+      if (target) {
+        target.addEventListener("keydown", listener);
+        return () => {
+          target.removeEventListener("keydown", listener);
+        };
+      }
+    });
+    return unbind;
+  }
+  handleStart(event, source, options) {
+    const { element } = source;
+    if (!element) {
+      throw new Error("Source draggable does not have an associated element");
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    utilities.scrollIntoViewIfNeeded(element);
+    const { center } = new utilities.DOMRectangle(element);
+    state.batch(() => {
+      this.manager.actions.setDragSource(source.id);
+      this.manager.actions.start({
+        event,
+        coordinates: {
+          x: center.x,
+          y: center.y
+        }
+      });
+    });
+    this.sideEffects();
+    const sourceDocument = utilities.getDocument(element);
+    const sourceWindow = utilities.getWindow(sourceDocument);
+    const listeners = [
+      this.listeners.bind(sourceDocument, [
+        {
+          type: "keydown",
+          listener: (event2) => this.handleKeyDown(event2, source, options),
+          options: { capture: true }
+        }
+      ]),
+      this.listeners.bind(sourceWindow, [
+        { type: "resize", listener: () => this.handleEnd(true) }
+      ])
+    ];
+    this.#cleanupFunctions.push(...listeners);
+  }
+  handleKeyDown(event, _source, options) {
+    const { keyboardCodes = DEFAULT_KEYBOARD_CODES } = options ?? {};
+    if (isKeycode(event, [...keyboardCodes.end, ...keyboardCodes.cancel])) {
+      event.preventDefault();
+      const canceled = isKeycode(event, keyboardCodes.cancel);
+      this.handleEnd(canceled);
+      return;
+    }
+    if (isKeycode(event, keyboardCodes.up)) {
+      this.handleMove("up", event);
+    } else if (isKeycode(event, keyboardCodes.down)) {
+      this.handleMove("down", event);
+    }
+    if (isKeycode(event, keyboardCodes.left)) {
+      this.handleMove("left", event);
+    } else if (isKeycode(event, keyboardCodes.right)) {
+      this.handleMove("right", event);
+    }
+  }
+  handleEnd(canceled) {
+    this.manager.actions.stop({
+      canceled
+    });
+    this.cleanup();
+  }
+  handleMove(direction, event) {
+    const { shape } = this.manager.dragOperation;
+    const factor = event.shiftKey ? 5 : 1;
+    let offset = {
+      x: 0,
+      y: 0
+    };
+    if (!shape) {
+      return;
+    }
+    switch (direction) {
+      case "up":
+        offset = { x: 0, y: -DEFAULT_OFFSET * factor };
+        break;
+      case "down":
+        offset = { x: 0, y: DEFAULT_OFFSET * factor };
+        break;
+      case "left":
+        offset = { x: -DEFAULT_OFFSET * factor, y: 0 };
+        break;
+      case "right":
+        offset = { x: DEFAULT_OFFSET * factor, y: 0 };
+        break;
+    }
+    if (offset?.x || offset?.y) {
+      event.preventDefault();
+      this.manager.actions.move({
+        by: offset
+      });
+    }
+  }
+  sideEffects() {
+    const autoScroller = this.manager.registry.plugins.get(AutoScroller);
+    if (autoScroller?.disabled === false) {
+      autoScroller.disable();
+      this.#cleanupFunctions.push(() => {
+        autoScroller.enable();
+      });
+    }
+  }
+  cleanup() {
+    this.#cleanupFunctions.forEach((cleanup) => cleanup());
+  }
+  destroy() {
+    this.cleanup();
+    this.listeners.clear();
+  }
+};
+function isKeycode(event, codes) {
+  return codes.includes(event.code);
+}
+var PointerSensor = class _PointerSensor extends abstract.Sensor {
+  constructor(manager, options) {
+    super(manager);
+    this.manager = manager;
+    this.options = options;
+    this.listeners = new utilities.Listeners();
+    this.listeners.bind(window, {
+      type: "touchmove",
+      listener() {
+      },
+      options: {
+        capture: false,
+        passive: false
+      }
+    });
+  }
+  #clearTimeout;
+  #document;
+  bind(source, options = this.options) {
+    const unbind = state.effect(() => {
+      const target = source.handle ?? source.element;
+      const listener = (event) => {
+        if (event instanceof PointerEvent) {
+          this.handlePointerDown(event, source, options);
+        }
+      };
+      if (target) {
+        target.addEventListener("pointerdown", listener);
+        return () => {
+          target.removeEventListener("pointerdown", listener);
+        };
+      }
+    });
+    return unbind;
+  }
+  handlePointerDown(event, source, options = {}) {
+    if (this.disabled) {
+      return;
+    }
+    if (!event.isPrimary || event.button !== 0 || !(event.target instanceof Element)) {
+      return;
+    }
+    if (source.disabled) {
+      return;
+    }
+    this.initialCoordinates = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    const { activationConstraints } = options;
+    const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
+    if (!constraints?.delay && !constraints?.distance) {
+      this.handleStart(source, event);
+      event.stopImmediatePropagation();
+    } else {
+      const { delay } = constraints;
+      if (delay) {
+        const timeout = setTimeout(
+          () => this.handleStart(source, event),
+          delay.value
+        );
+        this.#clearTimeout = () => {
+          clearTimeout(timeout);
+          this.#clearTimeout = void 0;
+        };
+      }
+    }
+    const ownerDocument = utilities.getDocument(event.target);
+    this.#document = ownerDocument;
+    const unbindListeners = this.listeners.bind(ownerDocument, [
+      {
+        type: "pointermove",
+        listener: (event2) => this.handlePointerMove(event2, source, options)
+      },
+      {
+        type: "pointerup",
+        listener: this.handlePointerUp.bind(this)
+      },
+      {
+        // Prevent scrolling on touch devices
+        type: "touchmove",
+        listener: preventDefault,
+        options: {
+          passive: false
+        }
+      },
+      {
+        // Cancel activation if there is a competing Drag and Drop interaction
+        type: "dragstart",
+        listener: this.handleCancel.bind(this)
+      },
+      {
+        type: "keydown",
+        listener: this.handleKeyDown.bind(this)
+      }
+    ]);
+    this.cleanup = () => {
+      unbindListeners();
+      this.#clearTimeout?.();
+      this.initialCoordinates = void 0;
+    };
+  }
+  handlePointerMove(event, source, options) {
+    const coordinates = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    if (this.manager.dragOperation.status.dragging) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.manager.actions.move({ to: coordinates });
+      return;
+    }
+    if (!this.initialCoordinates) {
+      return;
+    }
+    const delta = {
+      x: coordinates.x - this.initialCoordinates.x,
+      y: coordinates.y - this.initialCoordinates.y
+    };
+    const { activationConstraints } = options;
+    const constraints = typeof activationConstraints === "function" ? activationConstraints(event, source) : activationConstraints;
+    const { distance, delay } = constraints ?? {};
+    if (distance) {
+      if (distance.tolerance != null && geometry.exceedsDistance(delta, distance.tolerance)) {
+        return this.handleCancel();
+      }
+      if (geometry.exceedsDistance(delta, distance.value)) {
+        return this.handleStart(source, event);
+      }
+    }
+    if (delay) {
+      if (geometry.exceedsDistance(delta, delay.tolerance)) {
+        return this.handleCancel();
+      }
+    }
+  }
+  handlePointerUp(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const { status } = this.manager.dragOperation;
+    if (!status.idle) {
+      const canceled = !status.initialized;
+      this.manager.actions.stop({ canceled });
+    }
+    this.cleanup?.();
+  }
+  handleKeyDown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.handleCancel();
+    }
+  }
+  handleStart(source, event) {
+    const { manager, initialCoordinates } = this;
+    this.#clearTimeout?.();
+    if (!initialCoordinates || manager.dragOperation.status.initialized) {
+      return;
+    }
+    state.batch(() => {
+      manager.actions.setDragSource(source.id);
+      manager.actions.start({ coordinates: initialCoordinates, event });
+    });
+  }
+  handleCancel() {
+    const { dragOperation } = this.manager;
+    if (dragOperation.status.initialized) {
+      this.manager.actions.stop({ canceled: true });
+    }
+    this.cleanup?.();
+  }
+  destroy() {
+    this.listeners.clear();
+  }
+  static {
+    this.configure = abstract.configurator(_PointerSensor);
+  }
+};
+function preventDefault(event) {
+  event.preventDefault();
+}
+
+// src/core/manager/manager.ts
+var defaultPreset = {
+  plugins: [Accessibility, AutoScroller, Cursor, Feedback, PreventSelection],
+  sensors: [
+    PointerSensor.configure({
+      activationConstraints(event, source) {
+        const { pointerType, target } = event;
+        if (pointerType === "mouse" && target instanceof Element && (source.handle === target || source.handle?.contains(target))) {
+          return void 0;
+        }
+        return {
+          delay: { value: 200, tolerance: 10 },
+          distance: { value: 5 }
+        };
+      }
+    }),
+    KeyboardSensor
+  ]
+};
+var DragDropManager = class extends abstract.DragDropManager {
+  constructor(input = {}) {
+    const {
+      plugins = defaultPreset.plugins,
+      sensors = defaultPreset.sensors,
+      modifiers = []
+    } = input;
+    super({
+      ...input,
+      plugins: [ScrollListener, Scroller, ...plugins],
+      sensors,
+      modifiers
+    });
+  }
+};
+var Draggable = class extends abstract.Draggable {
+  constructor(input, manager) {
+    const { feedback = "default" } = input;
+    const config = { ...input, feedback };
+    super(config, manager);
+    this.manager = manager;
+    this.feedback = feedback;
+    const cleanupEffect = state.effect(() => {
+      const sensors = this.sensors?.map(abstract.descriptor) ?? [...manager.sensors];
+      const unbindFunctions = sensors.map((entry) => {
+        const sensorInstance = entry instanceof abstract.Sensor ? entry : manager.registry.register(entry.plugin);
+        const options = entry instanceof abstract.Sensor ? void 0 : entry.options;
+        const unbind = sensorInstance.bind(this, options);
+        return unbind;
+      });
+      return function cleanup() {
+        unbindFunctions.forEach((unbind) => unbind());
+      };
+    });
+    const { destroy } = this;
+    this.destroy = () => {
+      cleanupEffect();
+      destroy();
+    };
+  }
+};
+__decorateClass([
+  state.reactive
+], Draggable.prototype, "handle");
+__decorateClass([
+  state.reactive
+], Draggable.prototype, "element");
+__decorateClass([
+  state.reactive
+], Draggable.prototype, "feedback");
+__decorateClass([
+  state.reactive
+], Draggable.prototype, "sensors");
+var Droppable = class extends abstract.Droppable {
+  constructor({ element, ...input }, manager) {
+    const { collisionDetector = collision.defaultCollisionDetection } = input;
+    super({ ...input, collisionDetector }, manager);
+    this.manager = manager;
+    const { destroy } = this;
+    this.internal = {
+      element: state.signal(element)
+    };
+    this.refreshShape = this.refreshShape.bind(this);
+    if (manager.dragOperation.status.initialized) {
+      this.visible = true;
+    }
+    const cleanup = state.effects(
+      () => {
+        const { element: element2 } = this;
+        const { dragOperation } = manager;
+        if (element2 && dragOperation.status.initialized) {
+          const scrollableAncestor = utilities.getFirstScrollableAncestor(element2);
+          const doc = utilities.getDocument(element2);
+          const root = scrollableAncestor === doc.scrollingElement ? doc : scrollableAncestor;
+          const intersectionObserver = new IntersectionObserver(
+            (entries) => {
+              const [entry] = entries.slice(-1);
+              const { width, height } = entry.boundingClientRect;
+              if (!width && !height) {
+                return;
+              }
+              this.visible = entry.isIntersecting;
+            },
+            {
+              root: root ?? doc,
+              rootMargin: "40%"
+            }
+          );
+          const mutationObserver = new MutationObserver(
+            () => utilities.scheduler.schedule(this.refreshShape)
+          );
+          const resizeObserver = new ResizeObserver(
+            () => utilities.scheduler.schedule(this.refreshShape)
+          );
+          if (element2.parentElement) {
+            mutationObserver.observe(element2.parentElement, {
+              childList: true
+            });
+          }
+          resizeObserver.observe(element2);
+          intersectionObserver.observe(element2);
+          return () => {
+            this.shape = void 0;
+            this.visible = void 0;
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+            intersectionObserver.disconnect();
+          };
+        }
+      },
+      () => {
+        const { dragOperation } = manager;
+        const { status } = dragOperation;
+        const source = state.untracked(() => dragOperation.source);
+        if (status.initialized) {
+          if (source?.type != null && !this.accepts(source)) {
+            return;
+          }
+          utilities.scheduler.schedule(this.refreshShape);
+        }
+      },
+      () => {
+        if (manager.dragOperation.status.initialized) {
+          return () => {
+            this.shape = void 0;
+          };
+        }
+      }
+    );
+    this.destroy = () => {
+      cleanup();
+      destroy();
+    };
+  }
+  set element(value) {
+    this.internal.element.value = value;
+  }
+  get element() {
+    return this.placeholder ?? this.internal?.element.value;
+  }
+  refreshShape(ignoreTransform) {
+    const { element } = this;
+    if (!element || this.visible === false) {
+      this.shape = void 0;
+      return void 0;
+    }
+    const { shape } = this;
+    const updatedShape = new utilities.DOMRectangle(element, ignoreTransform);
+    if (updatedShape && shape?.equals(updatedShape)) {
+      return shape;
+    }
+    this.shape = updatedShape;
+    return updatedShape;
+  }
+};
+__decorateClass([
+  state.reactive
+], Droppable.prototype, "visible");
+__decorateClass([
+  state.reactive
+], Droppable.prototype, "placeholder");
+
+exports.Accessibility = Accessibility;
+exports.AutoScroller = AutoScroller;
+exports.DragDropManager = DragDropManager;
+exports.Draggable = Draggable;
+exports.Droppable = Droppable;
+exports.Feedback = Feedback;
+exports.KeyboardSensor = KeyboardSensor;
+exports.PointerSensor = PointerSensor;
+exports.ScrollListener = ScrollListener;
+exports.Scroller = Scroller;
+exports.defaultPreset = defaultPreset;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.cjs.map