@rpg-engine/long-bow 0.7.70 → 0.7.72

package/dist/long-bow.cjs.development.js

@@ -27377,57 +27377,6 @@ var Container$8 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
 
-var useCursorPosition = function useCursorPosition(_ref) {
-  var _ref$scale = _ref.scale,
-    scale = _ref$scale === void 0 ? 1 : _ref$scale;
-  var _useState = React.useState({
-      x: 0,
-      y: 0
-    }),
-    position = _useState[0],
-    setPosition = _useState[1];
-  var scalePosition = React.useCallback(function (x, y) {
-    return {
-      x: (x - shared.GRID_WIDTH / 2) / scale + shared.GRID_WIDTH / 2,
-      y: (y - shared.GRID_HEIGHT / 2) / scale + shared.GRID_HEIGHT / 2
-    };
-  }, [scale]);
-  var setFromEvent = React.useCallback(function (e) {
-    var x, y;
-    if ('touches' in e) {
-      x = e.touches[0].clientX;
-      y = e.touches[0].clientY;
-    } else {
-      x = e.clientX;
-      y = e.clientY;
-    }
-    var scaledPosition = scalePosition(x, y);
-    setPosition(scaledPosition);
-  }, [scale, scalePosition]);
-  var cleanup = React.useCallback(function () {
-    setPosition({
-      x: 0,
-      y: 0
-    });
-  }, []);
-  React.useEffect(function () {
-    var handleEvent = function handleEvent(e) {
-      return setFromEvent(e);
-    };
-    window.addEventListener('mousemove', handleEvent);
-    window.addEventListener('touchmove', handleEvent);
-    window.addEventListener('mouseup', cleanup);
-    window.addEventListener('touchend', cleanup);
-    return function () {
-      window.removeEventListener('mousemove', handleEvent);
-      window.removeEventListener('touchmove', handleEvent);
-      window.removeEventListener('mouseup', cleanup);
-      window.removeEventListener('touchend', cleanup);
-    };
-  }, [setFromEvent, cleanup]);
-  return position;
-};
-
 var rarityColor = function rarityColor(item) {
   switch (item == null ? void 0 : item.rarity) {
     case shared.ItemRarities.Uncommon:
@@ -27596,306 +27545,187 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
   return React__default.createElement(React__default.Fragment, null, onRenderSlot(item));
 };
 
-// Set default state with clearly defined initial values
-var defaultItemDetails = {
-  item: null,
-  tooltip: {
-    visible: false,
-    mobileVisible: false
-  },
-  contextMenu: {
-    visible: false,
-    position: {
-      x: 0,
-      y: 0
-    },
-    actions: []
-  }
-};
-// Create context with default values
-var ItemSlotTooltipContext = /*#__PURE__*/React.createContext({
-  itemDetails: defaultItemDetails,
-  updateItemDetails: function updateItemDetails() {},
-  clearItemDetails: function clearItemDetails() {}
-});
-// Provider component
-var ItemSlotTooltipProvider = function ItemSlotTooltipProvider(_ref) {
-  var children = _ref.children;
-  var _useState = React.useState(defaultItemDetails),
-    itemDetails = _useState[0],
-    setItemDetails = _useState[1];
+var RelativeListMenu = function RelativeListMenu(_ref) {
+  var options = _ref.options,
+    onSelected = _ref.onSelected,
+    onOutsideClick = _ref.onOutsideClick,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize,
+    pos = _ref.pos;
+  var ref = React.useRef(null);
+  useOutsideClick(ref, 'relative-context-menu');
   React.useEffect(function () {
-    console.log('itemDetails', itemDetails);
-  }, [itemDetails]);
-  // Memoize the update function to optimize performance
-  var updateItemDetails = React.useCallback(function (updates) {
-    setItemDetails(function (prev) {
-      var _updates$contextMenu$, _updates$contextMenu, _prev$contextMenu;
-      return _extends({}, prev, updates, {
-        tooltip: _extends({}, prev.tooltip, updates.tooltip),
-        contextMenu: _extends({}, prev.contextMenu, updates.contextMenu, {
-          // Ensure actions are properly merged or overridden
-          actions: (_updates$contextMenu$ = (_updates$contextMenu = updates.contextMenu) == null ? void 0 : _updates$contextMenu.actions) != null ? _updates$contextMenu$ : (_prev$contextMenu = prev.contextMenu) == null ? void 0 : _prev$contextMenu.actions
-        })
-      });
+    document.addEventListener('clickOutside', function (event) {
+      var e = event;
+      if (e.detail.id === 'relative-context-menu') {
+        if (onOutsideClick) {
+          onOutsideClick();
+        }
+      }
     });
+    return function () {
+      document.removeEventListener('clickOutside', function (_e) {});
+    };
   }, []);
-  var clearItemDetails = React.useCallback(function () {
-    setItemDetails(defaultItemDetails);
-  }, []);
-  return React__default.createElement(ItemSlotTooltipContext.Provider, {
-    value: {
-      itemDetails: itemDetails,
-      updateItemDetails: updateItemDetails,
-      clearItemDetails: clearItemDetails
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$9, Object.assign({
+    fontSize: fontSize,
+    ref: ref
+  }, pos), React__default.createElement("ul", {
+    className: "rpgui-list-imp",
+    style: {
+      overflow: 'hidden'
     }
-  }, children);
+  }, options.map(function (params, index) {
+    return React__default.createElement(ListElement$2, {
+      key: (params == null ? void 0 : params.id) || index,
+      onPointerDown: function onPointerDown() {
+        onSelected(params == null ? void 0 : params.id);
+      }
+    }, (params == null ? void 0 : params.text) || 'No text');
+  }))));
 };
-// Custom hook for consuming the context
-var useItemSlotTooltip = function useItemSlotTooltip() {
-  return React.useContext(ItemSlotTooltipContext);
+var Container$9 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "RelativeListMenu__Container",
+  componentId: "sc-7hohf-0"
+})(["position:absolute;top:", "px;left:", "px;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
+  return props.y;
+}, function (props) {
+  return props.x;
+}, function (props) {
+  return props.fontSize;
+});
+var ListElement$2 = /*#__PURE__*/styled__default.li.withConfig({
+  displayName: "RelativeListMenu__ListElement",
+  componentId: "sc-7hohf-1"
+})(["margin-right:0.5rem;"]);
+
+var MobileItemTooltip = function MobileItemTooltip(_ref) {
+  var item = _ref.item,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    closeTooltip = _ref.closeTooltip,
+    equipmentSet = _ref.equipmentSet,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 1 : _ref$scale,
+    options = _ref.options,
+    onSelected = _ref.onSelected;
+  var ref = React.useRef(null);
+  var handleFadeOut = function handleFadeOut() {
+    var _ref$current;
+    (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
+  };
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$a, {
+    ref: ref,
+    onTouchEnd: function onTouchEnd() {
+      handleFadeOut();
+      setTimeout(function () {
+        closeTooltip();
+      }, 100);
+    },
+    scale: scale
+  }, React__default.createElement(ItemInfoDisplay, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    isMobile: true
+  }), React__default.createElement(OptionsContainer, null, options == null ? void 0 : options.map(function (option) {
+    return React__default.createElement(Option, {
+      key: option.id,
+      onTouchEnd: function onTouchEnd() {
+        handleFadeOut();
+        setTimeout(function () {
+          onSelected == null ? void 0 : onSelected(option.id);
+          closeTooltip();
+        }, 100);
+      }
+    }, option.text);
+  }))));
 };
+var Container$a = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MobileItemTooltip__Container",
+  componentId: "sc-ku4p1j-0"
+})(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:640px){flex-direction:column;}"]);
+var OptionsContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MobileItemTooltip__OptionsContainer",
+  componentId: "sc-ku4p1j-1"
+})(["display:flex;flex-direction:column;gap:0.5rem;flex-wrap:wrap;@media (max-width:640px){flex-direction:row;justify-content:center;}"]);
+var Option = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "MobileItemTooltip__Option",
+  componentId: "sc-ku4p1j-2"
+})(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.1s;&:hover{background-color:#555;}@media (max-width:640px){padding:1rem 0.5rem;}"]);
 
-var ItemSlotDraggingContext = /*#__PURE__*/React.createContext({
-  item: null,
-  setDraggingItem: function setDraggingItem() {},
-  dragState: {
-    isFocused: false,
-    wasDragged: false,
-    position: {
-      x: 0,
-      y: 0
+var ItemSlotToolTips = function ItemSlotToolTips(_ref) {
+  var isTooltipVisible = _ref.isTooltipVisible,
+    isFocused = _ref.isFocused,
+    isContextMenuVisible = _ref.isContextMenuVisible,
+    isContextMenuDisabled = _ref.isContextMenuDisabled,
+    item = _ref.item,
+    contextActions = _ref.contextActions,
+    contextMenuPosition = _ref.contextMenuPosition,
+    dragScale = _ref.dragScale,
+    setIsContextMenuVisible = _ref.setIsContextMenuVisible,
+    setIsTooltipMobileVisible = _ref.setIsTooltipMobileVisible,
+    isTooltipMobileVisible = _ref.isTooltipMobileVisible,
+    _onSelected = _ref.onSelected,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    equipmentSet = _ref.equipmentSet;
+  return React__default.createElement(React__default.Fragment, null, isTooltipVisible && item && !isFocused && React__default.createElement(ItemTooltip, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet
+  }), isTooltipMobileVisible && item && React__default.createElement(MobileItemTooltip, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    closeTooltip: function closeTooltip() {
+      setIsTooltipMobileVisible(false);
     },
-    dropPosition: null
-  },
-  setDragState: function setDragState() {}
+    scale: dragScale,
+    options: contextActions,
+    onSelected: function onSelected(optionId) {
+      setIsContextMenuVisible(false);
+      if (item) {
+        _onSelected == null ? void 0 : _onSelected(optionId, item);
+      }
+    }
+  }), !isContextMenuDisabled && isContextMenuVisible && contextActions && React__default.createElement(RelativeListMenu, {
+    options: contextActions,
+    onSelected: function onSelected(optionId) {
+      setIsContextMenuVisible(false);
+      if (item) {
+        _onSelected == null ? void 0 : _onSelected(optionId, item);
+      }
+    },
+    onOutsideClick: function onOutsideClick() {
+      setIsContextMenuVisible(false);
+    },
+    pos: contextMenuPosition
+  }));
+};
+
+var DraggingContext = /*#__PURE__*/React.createContext({
+  item: null,
+  setDraggingItem: function setDraggingItem() {}
 });
-var ItemSlotDraggingProvider = function ItemSlotDraggingProvider(_ref) {
+var useDragging = function useDragging() {
+  return React.useContext(DraggingContext);
+};
+var DraggingProvider = function DraggingProvider(_ref) {
   var children = _ref.children;
   var _useState = React.useState(null),
     item = _useState[0],
     setDraggingItem = _useState[1];
-  var _useState2 = React.useState({
-      isFocused: false,
-      wasDragged: false,
-      position: {
-        x: 0,
-        y: 0
-      },
-      dropPosition: null
-    }),
-    dragState = _useState2[0],
-    setDragState = _useState2[1];
-  return React__default.createElement(ItemSlotDraggingContext.Provider, {
+  return React__default.createElement(DraggingContext.Provider, {
     value: {
       item: item,
-      setDraggingItem: setDraggingItem,
-      dragState: dragState,
-      setDragState: setDragState
+      setDraggingItem: setDraggingItem
     }
   }, children);
 };
-var useItemSlotDragging = function useItemSlotDragging() {
-  return React.useContext(ItemSlotDraggingContext);
-};
-
-var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
-  var isDepotSystem = _ref.isDepotSystem,
-    item = _ref.item,
-    onDrop = _ref.onDrop,
-    onDragEnd = _ref.onDragEnd,
-    checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
-    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
-    setItemShortcut = _ref.setItemShortcut,
-    isSelectingShortcut = _ref.isSelectingShortcut,
-    onDragStart = _ref.onDragStart,
-    onPointerDown = _ref.onPointerDown,
-    containerType = _ref.containerType,
-    slotIndex = _ref.slotIndex,
-    openQuantitySelector = _ref.openQuantitySelector,
-    isContextMenuDisabled = _ref.isContextMenuDisabled;
-  var dragContainer = React.useRef(null);
-  var _useItemSlotDragging = useItemSlotDragging(),
-    draggingItem = _useItemSlotDragging.item,
-    setDraggingItem = _useItemSlotDragging.setDraggingItem,
-    dragState = _useItemSlotDragging.dragState,
-    setDragState = _useItemSlotDragging.setDragState;
-  var _useItemSlotTooltip = useItemSlotTooltip(),
-    updateItemDetails = _useItemSlotTooltip.updateItemDetails,
-    itemDetails = _useItemSlotTooltip.itemDetails;
-  React.useEffect(function () {
-    setDragState(function (prev) {
-      return _extends({}, prev, {
-        position: {
-          x: 0,
-          y: 0
-        },
-        isFocused: false
-      });
-    });
-  }, [item, isDepotSystem, setDragState]);
-  React.useEffect(function () {
-    if (onDrop && item && dragState.dropPosition) {
-      onDrop(item, dragState.dropPosition);
-      setDragState(function (prev) {
-        return _extends({}, prev, {
-          dropPosition: null
-        });
-      });
-    }
-  }, [dragState.dropPosition, item, onDrop]);
-  var getContainerBounds = React.useCallback(function () {
-    var container = dragContainer.current;
-    if (!container) return {
-      left: 0,
-      top: 0,
-      right: 0,
-      bottom: 0
-    };
-    var rect = container.getBoundingClientRect();
-    return {
-      left: rect.left,
-      top: rect.top,
-      right: window.innerWidth - rect.right,
-      bottom: window.innerHeight - rect.bottom
-    };
-  }, []);
-  var resetDragState = React.useCallback(function () {
-    console.log('RESET_DRAG_STATE!');
-    setDragState(function (prev) {
-      return _extends({}, prev, {
-        wasDragged: false,
-        isFocused: false,
-        position: {
-          x: 0,
-          y: 0
-        }
-      });
-    });
-    setDraggingItem(null);
-    // Reset tooltip visibility
-    updateItemDetails({
-      tooltip: {
-        visible: false,
-        mobileVisible: false
-      }
-    });
-  }, [updateItemDetails, setDragState]);
-  var handleSuccessfulDrag = React.useCallback(function (quantity) {
-    console.log('HANDLE_SUCCESSFUL_DRAG!');
-    resetDragState();
-    if (quantity !== -1 && item) {
-      onDragEnd == null ? void 0 : onDragEnd(quantity);
-    }
-  }, [item, onDragEnd, resetDragState]);
-  var onDraggableStart = React.useCallback(function () {
-    console.log('ON_DRAGGABLE_START!');
-    if (!item || isSelectingShortcut) return;
-    if (onDragStart && containerType) {
-      onDragStart(item, slotIndex, containerType);
-    }
-    if (!draggingItem && item) {
-      console.log('!!! SETTING DRAGGING ITEM ', item._id);
-      setDraggingItem(item);
-    }
-  }, [item, isSelectingShortcut, onDragStart, containerType, slotIndex]);
-  var onDraggableProgress = React.useCallback(function (_e, data) {
-    console.log('ON_DRAGGABLE_PROGRESS!');
-    var _dragState$position = dragState.position,
-      x = _dragState$position.x,
-      y = _dragState$position.y;
-    if (Math.abs(data.x - x) > 5 || Math.abs(data.y - y) > 5) {
-      setDragState(function (prev) {
-        return _extends({}, prev, {
-          wasDragged: true,
-          isFocused: true
-        });
-      });
-    }
-  }, [dragState.position, draggingItem, item, setDraggingItem, setDragState]);
-  var onDraggableStop = React.useCallback(function (e, data) {
-    console.log('ON_DRAGGABLE_STOP!');
-    var target = e.target;
-    if (!target) return;
-    target.classList.remove('react-draggable-dragging');
-    if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
-      var index = parseInt(target.id.split('_')[1]);
-      if (!isNaN(index)) {
-        setItemShortcut(item, index);
-      }
-    }
-    if (dragState.wasDragged && item && !isSelectingShortcut) {
-      var classes = Array.from(target.classList);
-      var isOutsideDrop = classes.some(function (elm) {
-        return elm.includes('rpgui-content');
-      }) || classes.length === 0;
-      if (isOutsideDrop) {
-        setDragState(function (prev) {
-          return _extends({}, prev, {
-            dropPosition: {
-              x: data.x,
-              y: data.y
-            }
-          });
-        });
-      }
-      setDragState(function (prev) {
-        return _extends({}, prev, {
-          wasDragged: false
-        });
-      });
-      setTimeout(function () {
-        if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved() && (!checkIfItemShouldDragEnd || checkIfItemShouldDragEnd())) {
-          if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
-            openQuantitySelector(item.stackQty, handleSuccessfulDrag);
-          } else {
-            handleSuccessfulDrag(item.stackQty);
-          }
-        } else {
-          resetDragState();
-        }
-      }, 50);
-    } else if (item) {
-      var isTouch = e.type === 'touchend';
-      console.log("Debug: \n          isTouch: " + isTouch + ",\n          isSelectingShortcut: " + isSelectingShortcut + ",\n          draggingItem: " + draggingItem + ",\n          dragginState: " + JSON.stringify(dragState) + "\n        ");
-      if (!isContextMenuDisabled && isTouch && !isSelectingShortcut) {
-        updateItemDetails({
-          item: item,
-          tooltip: {
-            mobileVisible: true
-          }
-        });
-      } else if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
-        var _itemDetails$contextM;
-        var event = e;
-        updateItemDetails({
-          item: item,
-          contextMenu: {
-            visible: !(itemDetails != null && (_itemDetails$contextM = itemDetails.contextMenu) != null && _itemDetails$contextM.visible),
-            position: {
-              x: event.clientX - 10,
-              y: event.clientY - 5
-            }
-          }
-        });
-      }
-      onPointerDown == null ? void 0 : onPointerDown(item.type, containerType != null ? containerType : null, item);
-    }
-    console.log('setting draggingItem to null');
-    setDraggingItem(null);
-  }, [dragState.wasDragged, item, isSelectingShortcut, checkIfItemCanBeMoved, checkIfItemShouldDragEnd, openQuantitySelector, handleSuccessfulDrag, resetDragState, isContextMenuDisabled, onPointerDown, containerType, setItemShortcut]);
-  return {
-    dragContainer: dragContainer,
-    dragState: dragState,
-    draggingItem: draggingItem,
-    setDraggingItem: setDraggingItem,
-    getContainerBounds: getContainerBounds,
-    onDraggableStart: onDraggableStart,
-    onDraggableProgress: onDraggableProgress,
-    onDraggableStop: onDraggableStop,
-    resetItem: resetDragState
-  };
-};
 
 var generateContextMenuListOptions = function generateContextMenuListOptions(actionsByTypeList) {
   var contextMenu = actionsByTypeList.map(function (action) {
@@ -28034,14 +27864,15 @@ var EquipmentSlotSpriteByType = {
   RightHand: 'shields/plate-shield.png',
   Accessory: 'ranged-weapons/arrow.png'
 };
-var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.observer(function (_ref) {
+var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
   var slotIndex = _ref.slotIndex,
     item = _ref.item,
     containerType = _ref.itemContainerType,
     slotSpriteMask = _ref.slotSpriteMask,
     _onMouseOver = _ref.onMouseOver,
-    onMouseOut = _ref.onMouseOut,
+    _onMouseOut = _ref.onMouseOut,
     onPointerDown = _ref.onPointerDown,
+    _onSelected = _ref.onSelected,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     _ref$isContextMenuDis = _ref.isContextMenuDisabled,
@@ -28052,102 +27883,292 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
     onDrop = _ref.onOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     openQuantitySelector = _ref.openQuantitySelector,
+    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
     dragScale = _ref.dragScale,
     isSelectingShortcut = _ref.isSelectingShortcut,
+    equipmentSet = _ref.equipmentSet,
     setItemShortcut = _ref.setItemShortcut,
     isDepotSystem = _ref.isDepotSystem;
-  var _useItemSlotDragAndDr = useItemSlotDragAndDrop({
-      isDepotSystem: !!isDepotSystem,
-      item: item,
-      onDrop: onDrop != null ? onDrop : function () {},
-      onDragEnd: onDragEnd,
-      checkIfItemCanBeMoved: checkIfItemCanBeMoved,
-      setItemShortcut: setItemShortcut,
-      isSelectingShortcut: isSelectingShortcut,
-      onDragStart: onDragStart,
-      onPointerDown: onPointerDown,
-      containerType: containerType,
-      slotIndex: slotIndex,
-      openQuantitySelector: openQuantitySelector != null ? openQuantitySelector : function () {},
-      isContextMenuDisabled: isContextMenuDisabled
-    }),
-    dragContainer = _useItemSlotDragAndDr.dragContainer,
-    dragState = _useItemSlotDragAndDr.dragState,
-    draggingItem = _useItemSlotDragAndDr.draggingItem,
-    getContainerBounds = _useItemSlotDragAndDr.getContainerBounds,
-    onDraggableStart = _useItemSlotDragAndDr.onDraggableStart,
-    onDraggableProgress = _useItemSlotDragAndDr.onDraggableProgress,
-    onDraggableStop = _useItemSlotDragAndDr.onDraggableStop;
-  var _useItemSlotTooltip = useItemSlotTooltip(),
-    updateItemDetails = _useItemSlotTooltip.updateItemDetails,
-    itemDetails = _useItemSlotTooltip.itemDetails;
-  var _useCursorPosition = useCursorPosition({
-      scale: dragScale
+  // Centralized state using a single useState hook
+  var _useState = React.useState({
+      isTooltipVisible: false,
+      isTooltipMobileVisible: false,
+      isContextMenuVisible: false,
+      contextMenuPosition: {
+        x: 0,
+        y: 0
+      },
+      isFocused: false,
+      wasDragged: false,
+      dragPosition: {
+        x: 0,
+        y: 0
+      },
+      dropPosition: null,
+      contextActions: [],
+      draggingDistance: 0
     }),
-    cursorX = _useCursorPosition.x,
-    cursorY = _useCursorPosition.y;
+    state = _useState[0],
+    setState = _useState[1];
+  var isTooltipVisible = state.isTooltipVisible,
+    isTooltipMobileVisible = state.isTooltipMobileVisible,
+    isContextMenuVisible = state.isContextMenuVisible,
+    contextMenuPosition = state.contextMenuPosition,
+    isFocused = state.isFocused,
+    wasDragged = state.wasDragged,
+    dragPosition = state.dragPosition,
+    dropPosition = state.dropPosition,
+    contextActions = state.contextActions;
+  var dragContainer = React.useRef(null);
+  var _useDragging = useDragging(),
+    draggingItem = _useDragging.item,
+    setDraggingItem = _useDragging.setDraggingItem;
   React.useEffect(function () {
+    // Reset drag position and focus when item changes
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        dragPosition: {
+          x: 0,
+          y: 0
+        },
+        isFocused: false
+      });
+    });
+    // Update context actions when item or depot system changes
     if (item && containerType) {
-      updateItemDetails({
-        item: item,
-        contextMenu: {
-          actions: generateContextMenu(item, containerType, isDepotSystem)
-        }
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          contextActions: generateContextMenu(item, containerType, isDepotSystem)
+        });
+      });
+    } else {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          contextActions: []
+        });
       });
     }
   }, [item, isDepotSystem]);
-  var bounds = getContainerBounds();
-  var handleInteraction = React.useCallback(function (event) {
-    event.stopPropagation();
-    console.log('handleInteraction');
-    if (item && containerType) {
-      if (onPlaceDrop && draggingItem) {
-        onPlaceDrop(item, slotIndex, containerType);
-      }
-      if (onPointerDown && onDragStart === undefined && onDragEnd === undefined) {
-        onPointerDown(item.type, containerType, item);
+  React.useEffect(function () {
+    // Handle outside drop
+    if (onDrop && item && dropPosition) {
+      onDrop(item, dropPosition);
+    }
+  }, [dropPosition]);
+  var resetItem = function resetItem() {
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        isTooltipVisible: false,
+        wasDragged: false
+      });
+    });
+  };
+  var onSuccessfulDrag = function onSuccessfulDrag(quantity) {
+    resetItem();
+    if (quantity === -1) {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          dragPosition: {
+            x: 0,
+            y: 0
+          },
+          isFocused: false
+        });
+      });
+    } else if (item) {
+      onDragEnd == null ? void 0 : onDragEnd(quantity);
+    }
+  };
+  var onDraggableStop = function onDraggableStop(e, data) {
+    console.log('>>> ON_DRAGGABLE_STOP');
+    // Stop the dragging state
+    console.log('setDraggingItem(null)');
+    setDraggingItem(null);
+    var target = e.target;
+    console.log('handleShortcutSetter(target)');
+    handleShortcutSetter(target);
+    console.log('removeDraggingClass(target)');
+    removeDraggingClass(target);
+    console.log('shouldHandleDraggedItem()');
+    if (shouldHandleDraggedItem()) {
+      console.log('handleDraggedItem(e, data)');
+      handleDraggedItem(e, data);
+    } else if (item && !wasDragged) {
+      console.log('handleContextMenuOrTooltip(e)');
+      handleContextMenuOrTooltip(e);
+    }
+  };
+  /**
+   * Handles the shortcut setter logic if the target element is a shortcut setter.
+   */
+  var handleShortcutSetter = function handleShortcutSetter(target) {
+    if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
+      var index = parseInt(target.id.split('_')[1], 10);
+      if (!isNaN(index)) {
+        setItemShortcut(item, index);
       }
     }
-    _onMouseOver == null ? void 0 : _onMouseOver(event, slotIndex, item, cursorX, cursorY);
-  }, [item, containerType, slotIndex, onPlaceDrop, onPointerDown, _onMouseOver, onDragStart, onDragEnd, cursorX, cursorY]);
-  var handleInteractionEnd = React.useCallback(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    console.log('handleInteractionEnd');
-    console.log('itemDetails', itemDetails);
-    onMouseOut == null ? void 0 : onMouseOut();
-    if (event.type === 'touchend') {
-      var _document$elementFrom;
-      var simulatedEvent = new MouseEvent('mouseup', {
-        clientX: cursorX,
-        clientY: cursorY,
-        bubbles: true
+  };
+  /**
+   * Removes the dragging CSS class from the target element.
+   */
+  var removeDraggingClass = function removeDraggingClass(target) {
+    target.classList.remove('react-draggable-dragging');
+  };
+  /**
+   * Determines whether the dragged item should be processed.
+   */
+  var shouldHandleDraggedItem = function shouldHandleDraggedItem() {
+    console.log("Debug: shouldHandleDraggedItem()", "wasDragged: " + wasDragged, "item: " + item, "isSelectingShortcut: " + isSelectingShortcut);
+    return !!(wasDragged && item && !isSelectingShortcut);
+  };
+  /**
+   * Handles the logic when an item has been dragged.
+   */
+  var handleDraggedItem = function handleDraggedItem(e, data) {
+    var targetClasses = Array.from(e.target.classList);
+    var isOutsideDrop = targetClasses.some(function (elm) {
+      return elm.includes('rpgui-content');
+    }) || targetClasses.length === 0;
+    if (isOutsideDrop) {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          dropPosition: {
+            x: data.x,
+            y: data.y
+          }
+        });
       });
-      (_document$elementFrom = document.elementFromPoint(cursorX, cursorY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
-      updateItemDetails({
-        item: item,
-        tooltip: {
-          visible: false
+    }
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        wasDragged: false
+      });
+    });
+    var targetElement = dragContainer.current;
+    if (!targetElement) return;
+    var _getElementTransform = getElementTransform(targetElement),
+      x = _getElementTransform.x,
+      y = _getElementTransform.y;
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        dragPosition: {
+          x: x,
+          y: y
         }
       });
+    });
+    // Delay to ensure state updates before proceeding
+    setTimeout(function () {
+      processDragEnd(item);
+    }, 50);
+  };
+  /**
+   * Retrieves the current transform position of the dragged element.
+   */
+  var getElementTransform = function getElementTransform(element) {
+    var style = window.getComputedStyle(element);
+    var matrix = new DOMMatrixReadOnly(style.transform);
+    return {
+      x: matrix.m41,
+      y: matrix.m42
+    };
+  };
+  /**
+   * Processes the end of a drag event, handling quantity selection or resetting state.
+   */
+  var processDragEnd = function processDragEnd(item) {
+    console.log("Debug: processDragEnd(item)", "item: " + item);
+    if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
+      console.log("Debug: checkIfItemCanBeMoved()", "result: " + checkIfItemCanBeMoved());
+      if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
+      console.log("Debug: checkIfItemShouldDragEnd()", "result: " + (checkIfItemShouldDragEnd == null ? void 0 : checkIfItemShouldDragEnd()));
+      if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) {
+        console.log("Debug: openQuantitySelector(item.stackQty, onSuccessfulDrag)");
+        openQuantitySelector(item.stackQty, onSuccessfulDrag);
+      } else {
+        console.log("Debug: onSuccessfulDrag(item.stackQty)");
+        onSuccessfulDrag(item.stackQty);
+      }
+    } else {
+      console.log("Debug: resetItem()");
+      resetItem();
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          isFocused: false,
+          dragPosition: {
+            x: 0,
+            y: 0
+          }
+        });
+      });
+    }
+  };
+  /**
+   * Handles the context menu or tooltip display after dragging stops without a drop.
+   */
+  var handleContextMenuOrTooltip = function handleContextMenuOrTooltip(e) {
+    var isTouchEvent = false;
+    if (!isContextMenuDisabled && e.type === 'touchend' && !isSelectingShortcut) {
+      isTouchEvent = true;
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          isTooltipMobileVisible: true
+        });
+      });
+    }
+    if (!isContextMenuDisabled && !isSelectingShortcut && !isTouchEvent) {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          isContextMenuVisible: !prevState.isContextMenuVisible,
+          contextMenuPosition: {
+            x: e.clientX - 10,
+            y: e.clientY - 5
+          }
+        });
+      });
+    }
+    if (item) {
+      onPointerDown(item.type, containerType != null ? containerType : null, item);
+    }
+  };
+  var onDraggableStart = function onDraggableStart() {
+    if (!item || isSelectingShortcut) {
+      return;
+    }
+    if (onDragStart && containerType) {
+      onDragStart(item, slotIndex, containerType);
+    }
+  };
+  var onDraggableProgress = function onDraggableProgress(_e, _data) {
+    // increment draggingDistance by 1
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        draggingDistance: prevState.draggingDistance + 1
+      });
+    });
+    if (state.draggingDistance > 10) {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          wasDragged: true,
+          isFocused: true
+        });
+      });
+    }
+    if (!draggingItem) {
+      setDraggingItem(item);
     }
-  }, [onMouseOut, cursorX, cursorY]);
-  return React__default.createElement(Container$9, {
+  };
+  return React__default.createElement(Container$b, {
     isDraggingItem: !!draggingItem,
     item: item,
     className: "rpgui-icon empty-slot",
-    isSelectingShortcut: isSelectingShortcut && ((item == null ? void 0 : item.type) === shared.ItemType.Consumable || (item == null ? void 0 : item.type) === shared.ItemType.Tool || (item == null ? void 0 : item.subType) === shared.ItemSubType.Seed),
-    onMouseDown: handleInteraction,
-    onTouchStart: handleInteraction,
-    onMouseUp: function onMouseUp(e) {
-      handleInteractionEnd(e);
+    onMouseUp: function onMouseUp() {
       var data = item ? item : null;
-      if (onPlaceDrop && containerType && draggingItem) {
-        onPlaceDrop(data, slotIndex, containerType);
-      }
+      if (onPlaceDrop && containerType) onPlaceDrop(data, slotIndex, containerType);
     },
     onTouchEnd: function onTouchEnd(e) {
-      var _document$elementFrom2;
+      var _document$elementFrom;
       var _e$changedTouches$ = e.changedTouches[0],
         clientX = _e$changedTouches$.clientX,
         clientY = _e$changedTouches$.clientY;
@@ -28156,12 +28177,12 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
         clientY: clientY,
         bubbles: true
       });
-      (_document$elementFrom2 = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom2.dispatchEvent(simulatedEvent);
+      (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
     },
     onPointerDown: onDragStart !== undefined && onDragEnd !== undefined ? undefined : function () {
       if (item) onPointerDown(item.type, containerType != null ? containerType : null, item);
     },
-    onMouseLeave: handleInteractionEnd
+    isSelectingShortcut: isSelectingShortcut && ((item == null ? void 0 : item.type) === shared.ItemType.Consumable || (item == null ? void 0 : item.type) === shared.ItemType.Tool || (item == null ? void 0 : item.subType) === shared.ItemSubType.Seed)
   }, React__default.createElement(Draggable, {
     axis: isSelectingShortcut ? 'none' : 'both',
     defaultClassName: item ? 'draggable' : 'empty-slot',
@@ -28170,30 +28191,30 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
     onStop: onDraggableStop,
     onStart: onDraggableStart,
     onDrag: onDraggableProgress,
-    position: dragState.position,
+    position: dragPosition,
     cancel: ".empty-slot",
-    bounds: bounds
+    bounds: ".item-container-body, .equipment-container-body"
   }, React__default.createElement(ItemContainer, {
     ref: dragContainer,
-    isFocused: dragState.isFocused,
-    onMouseOver: function onMouseOver() {
-      _onMouseOver == null ? void 0 : _onMouseOver({}, slotIndex, item, cursorX, cursorY);
+    isFocused: isFocused,
+    onMouseOver: function onMouseOver(event) {
+      _onMouseOver == null ? void 0 : _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
+    },
+    onMouseOut: function onMouseOut() {
+      if (_onMouseOut) _onMouseOut();
     },
-    onMouseOut: onMouseOut,
     onMouseEnter: function onMouseEnter() {
-      updateItemDetails({
-        item: item,
-        tooltip: {
-          visible: true
-        }
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          isTooltipVisible: true
+        });
       });
     },
     onMouseLeave: function onMouseLeave() {
-      updateItemDetails({
-        item: item,
-        tooltip: {
-          visible: false
-        }
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          isTooltipVisible: false
+        });
       });
     }
   }, React__default.createElement(ItemSlotRenderer, {
@@ -28202,12 +28223,54 @@ var ItemSlot = /*#__PURE__*/React__default.memo( /*#__PURE__*/mobxReactLite.obse
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     containerType: containerType
-  }))));
-}));
-var Container$9 = /*#__PURE__*/styled__default.div.withConfig({
+  }))), React__default.createElement(ItemSlotToolTips, {
+    isTooltipVisible: isTooltipVisible,
+    isTooltipMobileVisible: isTooltipMobileVisible,
+    setIsTooltipMobileVisible: function setIsTooltipMobileVisible(value) {
+      return setState(function (prevState) {
+        return _extends({}, prevState, {
+          isTooltipMobileVisible: value
+        });
+      });
+    },
+    isFocused: isFocused,
+    isContextMenuVisible: isContextMenuVisible,
+    isContextMenuDisabled: isContextMenuDisabled,
+    item: item,
+    contextActions: contextActions,
+    contextMenuPosition: contextMenuPosition,
+    dragScale: dragScale,
+    setIsContextMenuVisible: function setIsContextMenuVisible(value) {
+      return setState(function (prevState) {
+        return _extends({}, prevState, {
+          isContextMenuVisible: value
+        });
+      });
+    },
+    onSelected: function onSelected(optionId, item) {
+      setState(function (prevState) {
+        return _extends({}, prevState, {
+          isContextMenuVisible: false
+        });
+      });
+      if (_onSelected) _onSelected(optionId, item);
+    },
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    setIsTooltipVisible: function setIsTooltipVisible(value) {
+      return setState(function (prevState) {
+        return _extends({}, prevState, {
+          isTooltipVisible: value
+        });
+      });
+    }
+  }));
+});
+var Container$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
+})(["margin:0.1rem;*{border:1px solid blue;}.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
   var isDraggingItem = _ref2.isDraggingItem;
   return isDraggingItem ? 0 : 1;
 }, function (_ref3) {
@@ -28320,7 +28383,7 @@ var ItemInfo = function ItemInfo(_ref) {
     });
   };
   var skillName = (_item$minRequirements = item.minRequirements) == null ? void 0 : (_item$minRequirements2 = _item$minRequirements.skill) == null ? void 0 : _item$minRequirements2.name;
-  return React__default.createElement(Container$a, {
+  return React__default.createElement(Container$c, {
     item: item
   }, React__default.createElement(Header, null, React__default.createElement("div", null, React__default.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React__default.createElement(Rarity, {
     item: item
@@ -28334,7 +28397,7 @@ var ItemInfo = function ItemInfo(_ref) {
     "$isSpecial": true
   }, "Two handed"), React__default.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React__default.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React__default.createElement(MissingStatistics, null, React__default.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
 };
-var Container$a = /*#__PURE__*/styled__default.div.withConfig({
+var Container$c = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Container",
   componentId: "sc-1xm4q8k-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:18rem;@media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
@@ -28480,7 +28543,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$b, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$d, {
     ref: ref
   }, React__default.createElement(ItemInfoDisplay, {
     item: item,
@@ -28489,67 +28552,11 @@ var ItemTooltip = function ItemTooltip(_ref) {
     equipmentSet: equipmentSet
   })));
 };
-var Container$b = /*#__PURE__*/styled__default.div.withConfig({
+var Container$d = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemTooltip__Container",
   componentId: "sc-11d9r7x-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
 
-var MobileItemTooltip = function MobileItemTooltip(_ref) {
-  var item = _ref.item,
-    atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON,
-    closeTooltip = _ref.closeTooltip,
-    equipmentSet = _ref.equipmentSet,
-    _ref$scale = _ref.scale,
-    scale = _ref$scale === void 0 ? 1 : _ref$scale,
-    options = _ref.options,
-    onSelected = _ref.onSelected;
-  var ref = React.useRef(null);
-  var handleFadeOut = function handleFadeOut() {
-    var _ref$current;
-    (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
-  };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$c, {
-    ref: ref,
-    onTouchEnd: function onTouchEnd() {
-      handleFadeOut();
-      setTimeout(function () {
-        closeTooltip();
-      }, 100);
-    },
-    scale: scale
-  }, React__default.createElement(ItemInfoDisplay, {
-    item: item,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    isMobile: true
-  }), React__default.createElement(OptionsContainer, null, options == null ? void 0 : options.map(function (option) {
-    return React__default.createElement(Option, {
-      key: option.id,
-      onTouchEnd: function onTouchEnd() {
-        handleFadeOut();
-        setTimeout(function () {
-          onSelected == null ? void 0 : onSelected(option.id);
-          closeTooltip();
-        }, 100);
-      }
-    }, option.text);
-  }))));
-};
-var Container$c = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "MobileItemTooltip__Container",
-  componentId: "sc-ku4p1j-0"
-})(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:640px){flex-direction:column;}"]);
-var OptionsContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "MobileItemTooltip__OptionsContainer",
-  componentId: "sc-ku4p1j-1"
-})(["display:flex;flex-direction:column;gap:0.5rem;flex-wrap:wrap;@media (max-width:640px){flex-direction:row;justify-content:center;}"]);
-var Option = /*#__PURE__*/styled__default.button.withConfig({
-  displayName: "MobileItemTooltip__Option",
-  componentId: "sc-ku4p1j-2"
-})(["padding:1rem;background-color:#333;color:white;border:none;border-radius:3px;width:8rem;transition:background-color 0.1s;&:hover{background-color:#555;}@media (max-width:640px){padding:1rem 0.5rem;}"]);
-
 var ItemInfoWrapper = function ItemInfoWrapper(_ref) {
   var children = _ref.children,
     atlasIMG = _ref.atlasIMG,
@@ -28904,7 +28911,7 @@ var Dropdown = function Dropdown(_ref) {
       onChange(selectedValue);
     }
   }, [selectedValue]);
-  return React__default.createElement(Container$d, {
+  return React__default.createElement(Container$e, {
     onMouseLeave: function onMouseLeave() {
       return setOpened(false);
     },
@@ -28932,7 +28939,7 @@ var Dropdown = function Dropdown(_ref) {
     }, option.option);
   })));
 };
-var Container$d = /*#__PURE__*/styled__default.div.withConfig({
+var Container$e = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Dropdown__Container",
   componentId: "sc-8arn65-0"
 })(["position:relative;width:", ";"], function (props) {
@@ -28974,6 +28981,57 @@ var Details = /*#__PURE__*/styled__default.p.withConfig({
   componentId: "sc-kaa0h9-0"
 })(["font-size:", " !important;"], uiFonts.size.xsmall);
 
+var useCursorPosition = function useCursorPosition(_ref) {
+  var _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 1 : _ref$scale;
+  var _useState = React.useState({
+      x: 0,
+      y: 0
+    }),
+    position = _useState[0],
+    setPosition = _useState[1];
+  var scalePosition = React.useCallback(function (x, y) {
+    return {
+      x: (x - shared.GRID_WIDTH / 2) / scale + shared.GRID_WIDTH / 2,
+      y: (y - shared.GRID_HEIGHT / 2) / scale + shared.GRID_HEIGHT / 2
+    };
+  }, [scale]);
+  var setFromEvent = React.useCallback(function (e) {
+    var x, y;
+    if ('touches' in e) {
+      x = e.touches[0].clientX;
+      y = e.touches[0].clientY;
+    } else {
+      x = e.clientX;
+      y = e.clientY;
+    }
+    var scaledPosition = scalePosition(x, y);
+    setPosition(scaledPosition);
+  }, [scale, scalePosition]);
+  var cleanup = React.useCallback(function () {
+    setPosition({
+      x: 0,
+      y: 0
+    });
+  }, []);
+  React.useEffect(function () {
+    var handleEvent = function handleEvent(e) {
+      return setFromEvent(e);
+    };
+    window.addEventListener('mousemove', handleEvent);
+    window.addEventListener('touchmove', handleEvent);
+    window.addEventListener('mouseup', cleanup);
+    window.addEventListener('touchend', cleanup);
+    return function () {
+      window.removeEventListener('mousemove', handleEvent);
+      window.removeEventListener('touchmove', handleEvent);
+      window.removeEventListener('mouseup', cleanup);
+      window.removeEventListener('touchend', cleanup);
+    };
+  }, [setFromEvent, cleanup]);
+  return position;
+};
+
 var CONTAINER_SIZE = 32;
 var OFFSET = CONTAINER_SIZE / 2;
 var DraggedItem = function DraggedItem(_ref) {
@@ -28981,8 +29039,8 @@ var DraggedItem = function DraggedItem(_ref) {
   var atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     scale = _ref.scale;
-  var _useItemSlotDragging = useItemSlotDragging(),
-    item = _useItemSlotDragging.item;
+  var _useDragging = useDragging(),
+    item = _useDragging.item;
   var _useCursorPosition = useCursorPosition({
       scale: scale
     }),
@@ -28997,7 +29055,7 @@ var DraggedItem = function DraggedItem(_ref) {
   var centeredX = x - OFFSET;
   var centeredY = y - OFFSET;
   var stackInfo = onRenderStackInfo((_item$_id = item == null ? void 0 : item._id) != null ? _item$_id : '', (_item$stackQty = item == null ? void 0 : item.stackQty) != null ? _item$stackQty : 0);
-  return React__default.createElement(Container$e, null, React__default.createElement(SpriteContainer, {
+  return React__default.createElement(Container$f, null, React__default.createElement(SpriteContainer, {
     x: centeredX,
     y: centeredY
   }, React__default.createElement(SpriteFromAtlas, {
@@ -29015,7 +29073,7 @@ var DraggedItem = function DraggedItem(_ref) {
   }), stackInfo));
 };
 var pulse = "\n  @keyframes pulse {\n    0%, 100% {\n      transform: scale(1) rotate(-3deg);\n    }\n    50% {\n      transform: scale(0.95) rotate(-3deg);\n    }\n  }\n";
-var Container$e = /*#__PURE__*/styled__default.div.withConfig({
+var Container$f = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggedItem__Container",
   componentId: "sc-mlzzcp-0"
 })(["position:relative;"]);
@@ -29031,127 +29089,11 @@ var SpriteContainer = /*#__PURE__*/styled__default.div.attrs(function (props) {
   componentId: "sc-mlzzcp-1"
 })(["", " position:absolute;z-index:100;pointer-events:none;width:", "px;height:", "px;transform:rotate(-3deg);filter:grayscale(100%);opacity:0.35;animation:pulse 2s infinite;.item-slot-qty{position:absolute;bottom:0;margin-left:0.8rem;}"], pulse, CONTAINER_SIZE, CONTAINER_SIZE);
 
-var RelativeListMenu = function RelativeListMenu(_ref) {
-  var options = _ref.options,
-    onSelected = _ref.onSelected,
-    onOutsideClick = _ref.onOutsideClick,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize,
-    pos = _ref.pos;
-  var ref = React.useRef(null);
-  useOutsideClick(ref, 'relative-context-menu');
-  React.useEffect(function () {
-    document.addEventListener('clickOutside', function (event) {
-      var e = event;
-      if (e.detail.id === 'relative-context-menu') {
-        if (onOutsideClick) {
-          onOutsideClick();
-        }
-      }
-    });
-    return function () {
-      document.removeEventListener('clickOutside', function (_e) {});
-    };
-  }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$f, Object.assign({
-    fontSize: fontSize,
-    ref: ref
-  }, pos), React__default.createElement("ul", {
-    className: "rpgui-list-imp",
-    style: {
-      overflow: 'hidden'
-    }
-  }, options.map(function (params, index) {
-    return React__default.createElement(ListElement$2, {
-      key: (params == null ? void 0 : params.id) || index,
-      onPointerDown: function onPointerDown() {
-        onSelected(params == null ? void 0 : params.id);
-      }
-    }, (params == null ? void 0 : params.text) || 'No text');
-  }))));
-};
-var Container$f = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "RelativeListMenu__Container",
-  componentId: "sc-7hohf-0"
-})(["position:absolute;top:", "px;left:", "px;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
-  return props.y;
-}, function (props) {
-  return props.x;
-}, function (props) {
-  return props.fontSize;
-});
-var ListElement$2 = /*#__PURE__*/styled__default.li.withConfig({
-  displayName: "RelativeListMenu__ListElement",
-  componentId: "sc-7hohf-1"
-})(["margin-right:0.5rem;"]);
-
-var ItemSlotToolTips = function ItemSlotToolTips(_ref) {
-  var _itemDetails$tooltip, _itemDetails$tooltip2, _itemDetails$contextM, _itemDetails$contextM2;
-  var isFocused = _ref.isFocused,
-    isContextMenuDisabled = _ref.isContextMenuDisabled,
-    dragScale = _ref.dragScale,
-    onSelected = _ref.onSelected,
-    atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON,
-    equipmentSet = _ref.equipmentSet;
-  var _useItemSlotTooltip = useItemSlotTooltip(),
-    itemDetails = _useItemSlotTooltip.itemDetails,
-    updateItemDetails = _useItemSlotTooltip.updateItemDetails;
-  var item = itemDetails.item;
-  var handleCloseTooltip = function handleCloseTooltip() {
-    updateItemDetails({
-      item: item,
-      tooltip: {
-        mobileVisible: false
-      }
-    });
-  };
-  var handleContextMenuSelect = function handleContextMenuSelect(optionId) {
-    updateItemDetails({
-      item: item,
-      contextMenu: {
-        visible: false
-      }
-    });
-    if (item) {
-      onSelected == null ? void 0 : onSelected(optionId, item);
-    }
-  };
-  var handleOutsideClick = function handleOutsideClick() {
-    updateItemDetails({
-      item: item,
-      contextMenu: {
-        visible: false
-      }
-    });
-  };
-  // monitor why mobileVisible is not working
-  return React__default.createElement(React__default.Fragment, null, ((_itemDetails$tooltip = itemDetails.tooltip) == null ? void 0 : _itemDetails$tooltip.visible) && item && !isFocused && React__default.createElement(ItemTooltip, {
-    item: item,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet
-  }), ((_itemDetails$tooltip2 = itemDetails.tooltip) == null ? void 0 : _itemDetails$tooltip2.mobileVisible) && item && React__default.createElement(MobileItemTooltip, {
-    item: item,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    closeTooltip: handleCloseTooltip,
-    scale: dragScale,
-    options: ((_itemDetails$contextM = itemDetails.contextMenu) == null ? void 0 : _itemDetails$contextM.actions) || [],
-    onSelected: handleContextMenuSelect
-  }), !isContextMenuDisabled && ((_itemDetails$contextM2 = itemDetails.contextMenu) == null ? void 0 : _itemDetails$contextM2.visible) && itemDetails.contextMenu.actions && React__default.createElement(RelativeListMenu, {
-    options: itemDetails.contextMenu.actions,
-    onSelected: handleContextMenuSelect,
-    onOutsideClick: handleOutsideClick,
-    pos: itemDetails.contextMenu.position
-  }));
-};
-
 var EquipmentSet = function EquipmentSet(_ref) {
   var equipmentSet = _ref.equipmentSet,
     onClose = _ref.onClose,
     _onMouseOver = _ref.onMouseOver,
+    _onSelected = _ref.onSelected,
     onItemClick = _ref.onItemClick,
     atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
@@ -29160,11 +29102,11 @@ var EquipmentSet = function EquipmentSet(_ref) {
     onItemPlaceDrop = _ref.onItemPlaceDrop,
     onItemOutsideDrop = _ref.onItemOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
+    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
     scale = _ref.scale,
     initialPosition = _ref.initialPosition,
     onPositionChangeEnd = _ref.onPositionChangeEnd,
-    onPositionChangeStart = _ref.onPositionChangeStart,
-    _onSelected = _ref.onSelected;
+    onPositionChangeStart = _ref.onPositionChangeStart;
   var neck = equipmentSet.neck,
     leftHand = equipmentSet.leftHand,
     ring = equipmentSet.ring,
@@ -29177,10 +29119,6 @@ var EquipmentSet = function EquipmentSet(_ref) {
     accessory = equipmentSet.accessory;
   var equipmentData = [neck, leftHand, ring, head, armor, legs, boot, inventory, rightHand, accessory];
   var equipmentMaskSlots = [shared.ItemSlotType.Neck, shared.ItemSlotType.LeftHand, shared.ItemSlotType.Ring, shared.ItemSlotType.Head, shared.ItemSlotType.Torso, shared.ItemSlotType.Legs, shared.ItemSlotType.Feet, shared.ItemSlotType.Inventory, shared.ItemSlotType.RightHand, shared.ItemSlotType.Accessory];
-  var _useItemSlotDragging = useItemSlotDragging(),
-    dragState = _useItemSlotDragging.dragState;
-  var _useItemSlotTooltip = useItemSlotTooltip(),
-    updateItemDetails = _useItemSlotTooltip.updateItemDetails;
   var onRenderEquipmentSlotRange = function onRenderEquipmentSlotRange(start, end) {
     var equipmentRange = equipmentData.slice(start, end);
     var slotMaksRange = equipmentMaskSlots.slice(start, end);
@@ -29201,6 +29139,9 @@ var EquipmentSet = function EquipmentSet(_ref) {
         onPointerDown: function onPointerDown(itemType, ContainerType) {
           if (onItemClick) onItemClick(itemType, item, ContainerType);
         },
+        onSelected: function onSelected(optionId) {
+          if (_onSelected) _onSelected(optionId);
+        },
         onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
           if (!item) {
             return;
@@ -29212,6 +29153,7 @@ var EquipmentSet = function EquipmentSet(_ref) {
         },
         dragScale: scale,
         checkIfItemCanBeMoved: checkIfItemCanBeMoved,
+        checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
         onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
           if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
         },
@@ -29223,7 +29165,7 @@ var EquipmentSet = function EquipmentSet(_ref) {
       });
     });
   };
-  return React__default.createElement(ItemSlotDraggingProvider, null, React__default.createElement(ItemSlotTooltipProvider, null, React__default.createElement(DraggedItem, {
+  return React__default.createElement(DraggingProvider, null, React__default.createElement(DraggedItem, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     scale: scale
@@ -29241,23 +29183,7 @@ var EquipmentSet = function EquipmentSet(_ref) {
     onPositionChangeStart: onPositionChangeStart
   }, React__default.createElement(EquipmentSetContainer, {
     className: "equipment-container-body"
-  }, React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10)))), React__default.createElement(ItemSlotToolTips, {
-    isFocused: dragState.isFocused,
-    isContextMenuDisabled: shared.isMobile(),
-    dragScale: scale,
-    onSelected: function onSelected(optionId, item) {
-      updateItemDetails({
-        item: item,
-        contextMenu: {
-          visible: false
-        }
-      });
-      if (_onSelected) _onSelected(optionId);
-    },
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet
-  })));
+  }, React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10)))));
 };
 var EquipmentSetContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "EquipmentSet__EquipmentSetContainer",
@@ -30687,6 +30613,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     _onOutsideDrop = _ref.onOutsideDrop,
     checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
     initialPosition = _ref.initialPosition,
+    checkIfItemShouldDragEnd = _ref.checkIfItemShouldDragEnd,
     scale = _ref.scale,
     shortcuts = _ref.shortcuts,
     setItemShortcut = _ref.setItemShortcut,
@@ -30767,10 +30694,14 @@ var ItemContainer$1 = function ItemContainer(_ref) {
             onItemClick(item, itemType, containerType);
           }
         },
+        onSelected: function onSelected(optionId, item) {
+          if (_onSelected) _onSelected(optionId, item);
+        },
         onDragStart: onDragStart,
         onDragEnd: onDragEnd,
         dragScale: scale,
         checkIfItemCanBeMoved: checkIfItemCanBeMoved,
+        checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
         openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
           setQuantitySelect({
             isOpen: true,
@@ -30795,17 +30726,14 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         isSelectingShortcut: settingShortcutIndex !== -1,
+        equipmentSet: equipmentSet,
         setItemShortcut: type === shared.ItemContainerType.Inventory ? handleSetShortcut : undefined,
         isDepotSystem: isDepotSystem
       }));
     }
     return slots;
   };
-  var _useItemSlotTooltip = useItemSlotTooltip(),
-    updateItemDetails = _useItemSlotTooltip.updateItemDetails;
-  var _useItemSlotDragging = useItemSlotDragging(),
-    dragState = _useItemSlotDragging.dragState;
-  return React__default.createElement(ItemSlotDraggingProvider, null, React__default.createElement(ItemSlotTooltipProvider, null, React__default.createElement(DraggedItem, {
+  return React__default.createElement(DraggingProvider, null, React__default.createElement(DraggedItem, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     scale: scale
@@ -30830,26 +30758,10 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     ref: containerRef,
     isScrollable: itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL,
     isFullScreen: isFullScreen
-  }, onRenderSlots())), React__default.createElement(ItemSlotToolTips, {
-    isFocused: dragState.isFocused,
-    isContextMenuDisabled: disableContextMenu,
-    dragScale: scale,
-    onSelected: function onSelected(optionId, item) {
-      updateItemDetails({
-        item: item,
-        contextMenu: {
-          visible: false
-        }
-      });
-      if (_onSelected) _onSelected(optionId, item);
-    },
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet
-  }), quantitySelect.isOpen && React__default.createElement(ItemQuantitySelectorModal, {
+  }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect
-  })));
+  }));
 };
 var ItemsContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",