@rpg-engine/long-bow 0.7.67 → 0.7.70

package/dist/long-bow.esm.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, Component, useRef, useContext, createContext, useCallback, useMemo, Fragment } from 'react';
+import React, { useState, useEffect, Component, useRef, useCallback, useContext, createContext, useMemo, Fragment } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, isMobile, ItemSlotType, isMobileOrTablet, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { FaTimes } from 'react-icons/fa';
@@ -27371,6 +27371,57 @@ var Container$8 = /*#__PURE__*/styled.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 = useState({
+      x: 0,
+      y: 0
+    }),
+    position = _useState[0],
+    setPosition = _useState[1];
+  var scalePosition = useCallback(function (x, y) {
+    return {
+      x: (x - GRID_WIDTH / 2) / scale + GRID_WIDTH / 2,
+      y: (y - GRID_HEIGHT / 2) / scale + GRID_HEIGHT / 2
+    };
+  }, [scale]);
+  var setFromEvent = 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 = useCallback(function () {
+    setPosition({
+      x: 0,
+      y: 0
+    });
+  }, []);
+  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 ItemRarities.Uncommon:
@@ -27539,205 +27590,108 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
   return React.createElement(React.Fragment, null, onRenderSlot(item));
 };
 
-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 = useRef(null);
-  useOutsideClick(ref, 'relative-context-menu');
+// 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__*/createContext({
+  itemDetails: defaultItemDetails,
+  updateItemDetails: function updateItemDetails() {},
+  clearItemDetails: function clearItemDetails() {}
+});
+// Provider component
+var ItemSlotTooltipProvider = function ItemSlotTooltipProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(defaultItemDetails),
+    itemDetails = _useState[0],
+    setItemDetails = _useState[1];
   useEffect(function () {
-    document.addEventListener('clickOutside', function (event) {
-      var e = event;
-      if (e.detail.id === 'relative-context-menu') {
-        if (onOutsideClick) {
-          onOutsideClick();
-        }
-      }
+    console.log('itemDetails', itemDetails);
+  }, [itemDetails]);
+  // Memoize the update function to optimize performance
+  var updateItemDetails = 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
+        })
+      });
     });
-    return function () {
-      document.removeEventListener('clickOutside', function (_e) {});
-    };
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$9, Object.assign({
-    fontSize: fontSize,
-    ref: ref
-  }, pos), React.createElement("ul", {
-    className: "rpgui-list-imp",
-    style: {
-      overflow: 'hidden'
+  var clearItemDetails = useCallback(function () {
+    setItemDetails(defaultItemDetails);
+  }, []);
+  return React.createElement(ItemSlotTooltipContext.Provider, {
+    value: {
+      itemDetails: itemDetails,
+      updateItemDetails: updateItemDetails,
+      clearItemDetails: clearItemDetails
     }
-  }, options.map(function (params, index) {
-    return React.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$9 = /*#__PURE__*/styled.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.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 = useRef(null);
-  var handleFadeOut = function handleFadeOut() {
-    var _ref$current;
-    (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
-  };
-  return React.createElement(ModalPortal, null, React.createElement(Container$a, {
-    ref: ref,
-    onTouchEnd: function onTouchEnd() {
-      handleFadeOut();
-      setTimeout(function () {
-        closeTooltip();
-      }, 100);
-    },
-    scale: scale
-  }, React.createElement(ItemInfoDisplay, {
-    item: item,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    isMobile: true
-  }), React.createElement(OptionsContainer, null, options == null ? void 0 : options.map(function (option) {
-    return React.createElement(Option, {
-      key: option.id,
-      onTouchEnd: function onTouchEnd() {
-        handleFadeOut();
-        setTimeout(function () {
-          onSelected == null ? void 0 : onSelected(option.id);
-          closeTooltip();
-        }, 100);
-      }
-    }, option.text);
-  }))));
+  }, children);
 };
-var Container$a = /*#__PURE__*/styled.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.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.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 ItemSlotToolTips = function ItemSlotToolTips(_ref) {
-  var tooltipState = _ref.tooltipState,
-    setTooltipState = _ref.setTooltipState,
-    contextMenuState = _ref.contextMenuState,
-    setContextMenuState = _ref.setContextMenuState,
-    isFocused = _ref.isFocused,
-    isContextMenuDisabled = _ref.isContextMenuDisabled,
-    item = _ref.item,
-    contextActions = _ref.contextActions,
-    dragScale = _ref.dragScale,
-    _onSelected = _ref.onSelected,
-    atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON,
-    equipmentSet = _ref.equipmentSet,
-    isDragging = _ref.isDragging,
-    isSelectingShortcut = _ref.isSelectingShortcut,
-    showTooltipDelayed = _ref.showTooltipDelayed;
-  var canShow = !isDragging || !isSelectingShortcut || showTooltipDelayed;
-  return React.createElement(React.Fragment, null, tooltipState.visible && item && !isFocused && canShow && React.createElement(ItemTooltip, {
-    item: item,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet
-  }), tooltipState.mobileVisible && item && canShow && React.createElement(MobileItemTooltip, {
-    item: item,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    closeTooltip: function closeTooltip() {
-      setTooltipState(function (prev) {
-        return _extends({}, prev, {
-          mobileVisible: false
-        });
-      });
-    },
-    scale: dragScale,
-    options: contextActions,
-    onSelected: function onSelected(optionId) {
-      setContextMenuState(function (prev) {
-        return _extends({}, prev, {
-          visible: false
-        });
-      });
-      if (item) {
-        _onSelected == null ? void 0 : _onSelected(optionId, item);
-      }
-    }
-  }), !isContextMenuDisabled && contextMenuState.visible && contextActions && canShow && React.createElement(RelativeListMenu, {
-    options: contextActions,
-    onSelected: function onSelected(optionId) {
-      setContextMenuState(function (prev) {
-        return _extends({}, prev, {
-          visible: false
-        });
-      });
-      if (item) {
-        _onSelected == null ? void 0 : _onSelected(optionId, item);
-      }
-    },
-    onOutsideClick: function onOutsideClick() {
-      setContextMenuState(function (prev) {
-        return _extends({}, prev, {
-          visible: false
-        });
-      });
-    },
-    pos: contextMenuState.position
-  }));
+// Custom hook for consuming the context
+var useItemSlotTooltip = function useItemSlotTooltip() {
+  return useContext(ItemSlotTooltipContext);
 };
 
-var DraggingContext = /*#__PURE__*/createContext({
+var ItemSlotDraggingContext = /*#__PURE__*/createContext({
   item: null,
-  setDraggingItem: function setDraggingItem() {}
+  setDraggingItem: function setDraggingItem() {},
+  dragState: {
+    isFocused: false,
+    wasDragged: false,
+    position: {
+      x: 0,
+      y: 0
+    },
+    dropPosition: null
+  },
+  setDragState: function setDragState() {}
 });
-var useDragging = function useDragging() {
-  return useContext(DraggingContext);
-};
-var DraggingProvider = function DraggingProvider(_ref) {
+var ItemSlotDraggingProvider = function ItemSlotDraggingProvider(_ref) {
   var children = _ref.children;
   var _useState = useState(null),
     item = _useState[0],
     setDraggingItem = _useState[1];
-  return React.createElement(DraggingContext.Provider, {
+  var _useState2 = useState({
+      isFocused: false,
+      wasDragged: false,
+      position: {
+        x: 0,
+        y: 0
+      },
+      dropPosition: null
+    }),
+    dragState = _useState2[0],
+    setDragState = _useState2[1];
+  return React.createElement(ItemSlotDraggingContext.Provider, {
     value: {
       item: item,
-      setDraggingItem: setDraggingItem
+      setDraggingItem: setDraggingItem,
+      dragState: dragState,
+      setDragState: setDragState
     }
   }, children);
 };
+var useItemSlotDragging = function useItemSlotDragging() {
+  return useContext(ItemSlotDraggingContext);
+};
 
 var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
   var isDepotSystem = _ref.isDepotSystem,
@@ -27753,24 +27707,16 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
     containerType = _ref.containerType,
     slotIndex = _ref.slotIndex,
     openQuantitySelector = _ref.openQuantitySelector,
-    isContextMenuDisabled = _ref.isContextMenuDisabled,
-    setTooltipState = _ref.setTooltipState,
-    setContextMenuState = _ref.setContextMenuState;
+    isContextMenuDisabled = _ref.isContextMenuDisabled;
   var dragContainer = useRef(null);
-  var _useDragging = useDragging(),
-    draggingItem = _useDragging.item,
-    setDraggingItem = _useDragging.setDraggingItem;
-  var _useState = useState({
-      isFocused: false,
-      wasDragged: false,
-      position: {
-        x: 0,
-        y: 0
-      },
-      dropPosition: null
-    }),
-    dragState = _useState[0],
-    setDragState = _useState[1];
+  var _useItemSlotDragging = useItemSlotDragging(),
+    draggingItem = _useItemSlotDragging.item,
+    setDraggingItem = _useItemSlotDragging.setDraggingItem,
+    dragState = _useItemSlotDragging.dragState,
+    setDragState = _useItemSlotDragging.setDragState;
+  var _useItemSlotTooltip = useItemSlotTooltip(),
+    updateItemDetails = _useItemSlotTooltip.updateItemDetails,
+    itemDetails = _useItemSlotTooltip.itemDetails;
   useEffect(function () {
     setDragState(function (prev) {
       return _extends({}, prev, {
@@ -27781,7 +27727,7 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
         isFocused: false
       });
     });
-  }, [item, isDepotSystem]);
+  }, [item, isDepotSystem, setDragState]);
   useEffect(function () {
     if (onDrop && item && dragState.dropPosition) {
       onDrop(item, dragState.dropPosition);
@@ -27809,11 +27755,7 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
     };
   }, []);
   var resetDragState = useCallback(function () {
-    setTooltipState(function (prev) {
-      return _extends({}, prev, {
-        visible: false
-      });
-    });
+    console.log('RESET_DRAG_STATE!');
     setDragState(function (prev) {
       return _extends({}, prev, {
         wasDragged: false,
@@ -27824,20 +27766,35 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
         }
       });
     });
-  }, [setTooltipState]);
+    setDraggingItem(null);
+    // Reset tooltip visibility
+    updateItemDetails({
+      tooltip: {
+        visible: false,
+        mobileVisible: false
+      }
+    });
+  }, [updateItemDetails, setDragState]);
   var handleSuccessfulDrag = useCallback(function (quantity) {
+    console.log('HANDLE_SUCCESSFUL_DRAG!');
     resetDragState();
     if (quantity !== -1 && item) {
       onDragEnd == null ? void 0 : onDragEnd(quantity);
     }
   }, [item, onDragEnd, resetDragState]);
   var onDraggableStart = 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 = useCallback(function (_e, data) {
+    console.log('ON_DRAGGABLE_PROGRESS!');
     var _dragState$position = dragState.position,
       x = _dragState$position.x,
       y = _dragState$position.y;
@@ -27849,14 +27806,9 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
         });
       });
     }
-    if (!draggingItem) {
-      setDraggingItem(item);
-    }
-  }, [dragState.position, draggingItem, item, setDraggingItem]);
+  }, [dragState.position, draggingItem, item, setDraggingItem, setDragState]);
   var onDraggableStop = useCallback(function (e, data) {
-    setTimeout(function () {
-      setDraggingItem(null);
-    }, 50);
+    console.log('ON_DRAGGABLE_STOP!');
     var target = e.target;
     if (!target) return;
     target.classList.remove('react-draggable-dragging');
@@ -27899,27 +27851,33 @@ var useItemSlotDragAndDrop = function useItemSlotDragAndDrop(_ref) {
       }, 50);
     } else if (item) {
       var isTouch = e.type === 'touchend';
-      if (!isContextMenuDisabled && isTouch && !isSelectingShortcut && !draggingItem) {
-        setTooltipState(function (prev) {
-          return _extends({}, prev, {
+      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;
-        setContextMenuState(function (prev) {
-          return {
-            visible: !prev.visible,
+        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);
     }
-  }, [dragState.wasDragged, item, isSelectingShortcut, checkIfItemCanBeMoved, checkIfItemShouldDragEnd, openQuantitySelector, handleSuccessfulDrag, resetDragState, isContextMenuDisabled, setTooltipState, setContextMenuState, onPointerDown, containerType, setItemShortcut]);
+    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,
@@ -28078,7 +28036,6 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     _onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut,
     onPointerDown = _ref.onPointerDown,
-    _onSelected = _ref.onSelected,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     _ref$isContextMenuDis = _ref.isContextMenuDisabled,
@@ -28091,33 +28048,8 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     openQuantitySelector = _ref.openQuantitySelector,
     dragScale = _ref.dragScale,
     isSelectingShortcut = _ref.isSelectingShortcut,
-    equipmentSet = _ref.equipmentSet,
     setItemShortcut = _ref.setItemShortcut,
     isDepotSystem = _ref.isDepotSystem;
-  var _useState = useState({
-      visible: false,
-      mobileVisible: false
-    }),
-    tooltipState = _useState[0],
-    setTooltipState = _useState[1];
-  var _useState2 = useState({
-      visible: false,
-      position: {
-        x: 0,
-        y: 0
-      }
-    }),
-    contextMenuState = _useState2[0],
-    setContextMenuState = _useState2[1];
-  var _useState3 = useState([]),
-    contextActions = _useState3[0],
-    setContextActions = _useState3[1];
-  var isDraggingDisabled = useMemo(function () {
-    return contextMenuState.visible || onDragStart === undefined || onDragEnd === undefined;
-  }, [contextMenuState.visible, onDragStart, onDragEnd]);
-  useEffect(function () {
-    console.log('isDraggingDisabled', isDraggingDisabled);
-  }, [isDraggingDisabled]);
   var _useItemSlotDragAndDr = useItemSlotDragAndDrop({
       isDepotSystem: !!isDepotSystem,
       item: item,
@@ -28131,10 +28063,7 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
       containerType: containerType,
       slotIndex: slotIndex,
       openQuantitySelector: openQuantitySelector != null ? openQuantitySelector : function () {},
-      isContextMenuDisabled: isContextMenuDisabled,
-      setTooltipState: setTooltipState,
-      contextMenuState: contextMenuState,
-      setContextMenuState: setContextMenuState
+      isContextMenuDisabled: isContextMenuDisabled
     }),
     dragContainer = _useItemSlotDragAndDr.dragContainer,
     dragState = _useItemSlotDragAndDr.dragState,
@@ -28143,17 +28072,28 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     onDraggableStart = _useItemSlotDragAndDr.onDraggableStart,
     onDraggableProgress = _useItemSlotDragAndDr.onDraggableProgress,
     onDraggableStop = _useItemSlotDragAndDr.onDraggableStop;
+  var _useItemSlotTooltip = useItemSlotTooltip(),
+    updateItemDetails = _useItemSlotTooltip.updateItemDetails,
+    itemDetails = _useItemSlotTooltip.itemDetails;
+  var _useCursorPosition = useCursorPosition({
+      scale: dragScale
+    }),
+    cursorX = _useCursorPosition.x,
+    cursorY = _useCursorPosition.y;
   useEffect(function () {
     if (item && containerType) {
-      setContextActions(generateContextMenu(item, containerType, isDepotSystem));
+      updateItemDetails({
+        item: item,
+        contextMenu: {
+          actions: generateContextMenu(item, containerType, isDepotSystem)
+        }
+      });
     }
   }, [item, isDepotSystem]);
   var bounds = getContainerBounds();
   var handleInteraction = useCallback(function (event) {
     event.stopPropagation();
-    var _ref2 = 'touches' in event ? event.touches[0] : event,
-      clientX = _ref2.clientX,
-      clientY = _ref2.clientY;
+    console.log('handleInteraction');
     if (item && containerType) {
       if (onPlaceDrop && draggingItem) {
         onPlaceDrop(item, slotIndex, containerType);
@@ -28162,52 +28102,31 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
         onPointerDown(item.type, containerType, item);
       }
     }
-    setTooltipState(function (prev) {
-      return _extends({}, prev, {
-        visible: true
-      });
-    });
-    _onMouseOver == null ? void 0 : _onMouseOver(event, slotIndex, item, clientX, clientY);
-  }, [item, containerType, slotIndex, onPlaceDrop, onPointerDown, _onMouseOver, onDragStart, onDragEnd]);
+    _onMouseOver == null ? void 0 : _onMouseOver(event, slotIndex, item, cursorX, cursorY);
+  }, [item, containerType, slotIndex, onPlaceDrop, onPointerDown, _onMouseOver, onDragStart, onDragEnd, cursorX, cursorY]);
   var handleInteractionEnd = useCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
-    setTooltipState(function (prev) {
-      return _extends({}, prev, {
-        visible: false
-      });
-    });
+    console.log('handleInteractionEnd');
+    console.log('itemDetails', itemDetails);
     onMouseOut == null ? void 0 : onMouseOut();
-    if (event.type === 'touchend' && 'changedTouches' in event) {
+    if (event.type === 'touchend') {
       var _document$elementFrom;
-      var _event$changedTouches = event.changedTouches[0],
-        clientX = _event$changedTouches.clientX,
-        clientY = _event$changedTouches.clientY;
       var simulatedEvent = new MouseEvent('mouseup', {
-        clientX: clientX,
-        clientY: clientY,
+        clientX: cursorX,
+        clientY: cursorY,
         bubbles: true
       });
-      (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
-    }
-  }, [onMouseOut]);
-  var _useState4 = useState(false),
-    showTooltipDelayed = _useState4[0],
-    setShowTooltipDelayed = _useState4[1];
-  //@ts-ignore
-  useEffect(function () {
-    if (tooltipState.visible && !isDraggingDisabled) {
-      var timer = setTimeout(function () {
-        return setShowTooltipDelayed(true);
-      }, 50);
-      return function () {
-        return clearTimeout(timer);
-      };
-    } else {
-      setShowTooltipDelayed(false);
+      (_document$elementFrom = document.elementFromPoint(cursorX, cursorY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
+      updateItemDetails({
+        item: item,
+        tooltip: {
+          visible: false
+        }
+      });
     }
-  }, [tooltipState.visible, isDraggingDisabled]);
-  return React.createElement(Container$b, {
+  }, [onMouseOut, cursorX, cursorY]);
+  return React.createElement(Container$9, {
     isDraggingItem: !!draggingItem,
     item: item,
     className: "rpgui-icon empty-slot",
@@ -28223,7 +28142,6 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     },
     onTouchEnd: function onTouchEnd(e) {
       var _document$elementFrom2;
-      handleInteractionEnd(e);
       var _e$changedTouches$ = e.changedTouches[0],
         clientX = _e$changedTouches$.clientX,
         clientY = _e$changedTouches$.clientY;
@@ -28242,7 +28160,7 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     axis: isSelectingShortcut ? 'none' : 'both',
     defaultClassName: item ? 'draggable' : 'empty-slot',
     scale: dragScale,
-    disabled: isDraggingDisabled,
+    disabled: onDragStart === undefined || onDragEnd === undefined,
     onStop: onDraggableStop,
     onStart: onDraggableStart,
     onDrag: onDraggableProgress,
@@ -28252,26 +28170,25 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
   }, React.createElement(ItemContainer, {
     ref: dragContainer,
     isFocused: dragState.isFocused,
-    onMouseOver: function onMouseOver(event) {
-      _onMouseOver == null ? void 0 : _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
+    onMouseOver: function onMouseOver() {
+      _onMouseOver == null ? void 0 : _onMouseOver({}, slotIndex, item, cursorX, cursorY);
     },
     onMouseOut: onMouseOut,
     onMouseEnter: function onMouseEnter() {
-      setTooltipState(function (prev) {
-        return _extends({}, prev, {
+      updateItemDetails({
+        item: item,
+        tooltip: {
           visible: true
-        });
+        }
       });
     },
-    onMouseLeave: function onMouseLeave(e) {
-      var _dragContainer$curren;
-      if (!e.relatedTarget || !((_dragContainer$curren = dragContainer.current) != null && _dragContainer$curren.contains(e.relatedTarget))) {
-        setTooltipState(function (prev) {
-          return _extends({}, prev, {
-            visible: false
-          });
-        });
-      }
+    onMouseLeave: function onMouseLeave() {
+      updateItemDetails({
+        item: item,
+        tooltip: {
+          visible: false
+        }
+      });
     }
   }, React.createElement(ItemSlotRenderer, {
     item: item,
@@ -28279,49 +28196,25 @@ var ItemSlot = /*#__PURE__*/React.memo( /*#__PURE__*/observer(function (_ref) {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     containerType: containerType
-  }))), React.createElement(ItemSlotToolTips, {
-    tooltipState: tooltipState,
-    setTooltipState: setTooltipState,
-    contextMenuState: contextMenuState,
-    setContextMenuState: setContextMenuState,
-    isFocused: dragState.isFocused,
-    isContextMenuDisabled: isContextMenuDisabled,
-    item: item,
-    contextActions: contextActions,
-    dragScale: dragScale,
-    onSelected: function onSelected(optionId, item) {
-      setContextMenuState(function (prev) {
-        return _extends({}, prev, {
-          visible: false
-        });
-      });
-      if (_onSelected) _onSelected(optionId, item);
-    },
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    isDragging: !!draggingItem,
-    isSelectingShortcut: !!isSelectingShortcut,
-    showTooltipDelayed: showTooltipDelayed
-  }));
+  }))));
 }));
-var Container$b = /*#__PURE__*/styled.div.withConfig({
+var Container$9 = /*#__PURE__*/styled.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 (_ref3) {
-  var isDraggingItem = _ref3.isDraggingItem;
+})(["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) {
+  var isDraggingItem = _ref2.isDraggingItem;
   return isDraggingItem ? 0 : 1;
+}, function (_ref3) {
+  var item = _ref3.item;
+  return rarityColor(item);
 }, function (_ref4) {
   var item = _ref4.item;
-  return rarityColor(item);
+  return "0 0 5px 2px " + rarityColor(item);
 }, function (_ref5) {
   var item = _ref5.item;
-  return "0 0 5px 2px " + rarityColor(item);
-}, function (_ref6) {
-  var item = _ref6.item;
   return "0 0 4px 3px " + rarityColor(item);
-}, function (_ref7) {
-  var isSelectingShortcut = _ref7.isSelectingShortcut;
+}, function (_ref6) {
+  var isSelectingShortcut = _ref6.isSelectingShortcut;
   return isSelectingShortcut ? 'bg-color-change 1s infinite' : 'none';
 });
 var ItemContainer = /*#__PURE__*/styled.div.withConfig({
@@ -28421,7 +28314,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.createElement(Container$c, {
+  return React.createElement(Container$a, {
     item: item
   }, React.createElement(Header, null, React.createElement("div", null, React.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React.createElement(Rarity, {
     item: item
@@ -28435,7 +28328,7 @@ var ItemInfo = function ItemInfo(_ref) {
     "$isSpecial": true
   }, "Two handed"), React.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React.createElement(MissingStatistics, null, React.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$a = /*#__PURE__*/styled.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) {
@@ -28581,7 +28474,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$d, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$b, {
     ref: ref
   }, React.createElement(ItemInfoDisplay, {
     item: item,
@@ -28590,11 +28483,67 @@ var ItemTooltip = function ItemTooltip(_ref) {
     equipmentSet: equipmentSet
   })));
 };
-var Container$d = /*#__PURE__*/styled.div.withConfig({
+var Container$b = /*#__PURE__*/styled.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 = useRef(null);
+  var handleFadeOut = function handleFadeOut() {
+    var _ref$current;
+    (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
+  };
+  return React.createElement(ModalPortal, null, React.createElement(Container$c, {
+    ref: ref,
+    onTouchEnd: function onTouchEnd() {
+      handleFadeOut();
+      setTimeout(function () {
+        closeTooltip();
+      }, 100);
+    },
+    scale: scale
+  }, React.createElement(ItemInfoDisplay, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    isMobile: true
+  }), React.createElement(OptionsContainer, null, options == null ? void 0 : options.map(function (option) {
+    return React.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.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.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.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,
@@ -28949,7 +28898,7 @@ var Dropdown = function Dropdown(_ref) {
       onChange(selectedValue);
     }
   }, [selectedValue]);
-  return React.createElement(Container$e, {
+  return React.createElement(Container$d, {
     onMouseLeave: function onMouseLeave() {
       return setOpened(false);
     },
@@ -28977,7 +28926,7 @@ var Dropdown = function Dropdown(_ref) {
     }, option.option);
   })));
 };
-var Container$e = /*#__PURE__*/styled.div.withConfig({
+var Container$d = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dropdown__Container",
   componentId: "sc-8arn65-0"
 })(["position:relative;width:", ";"], function (props) {
@@ -29019,57 +28968,6 @@ var Details = /*#__PURE__*/styled.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 = useState({
-      x: 0,
-      y: 0
-    }),
-    position = _useState[0],
-    setPosition = _useState[1];
-  var scalePosition = useCallback(function (x, y) {
-    return {
-      x: (x - GRID_WIDTH / 2) / scale + GRID_WIDTH / 2,
-      y: (y - GRID_HEIGHT / 2) / scale + GRID_HEIGHT / 2
-    };
-  }, [scale]);
-  var setFromEvent = 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 = useCallback(function () {
-    setPosition({
-      x: 0,
-      y: 0
-    });
-  }, []);
-  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) {
@@ -29077,8 +28975,8 @@ var DraggedItem = function DraggedItem(_ref) {
   var atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     scale = _ref.scale;
-  var _useDragging = useDragging(),
-    item = _useDragging.item;
+  var _useItemSlotDragging = useItemSlotDragging(),
+    item = _useItemSlotDragging.item;
   var _useCursorPosition = useCursorPosition({
       scale: scale
     }),
@@ -29093,7 +28991,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.createElement(Container$f, null, React.createElement(SpriteContainer, {
+  return React.createElement(Container$e, null, React.createElement(SpriteContainer, {
     x: centeredX,
     y: centeredY
   }, React.createElement(SpriteFromAtlas, {
@@ -29111,7 +29009,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$f = /*#__PURE__*/styled.div.withConfig({
+var Container$e = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggedItem__Container",
   componentId: "sc-mlzzcp-0"
 })(["position:relative;"]);
@@ -29127,11 +29025,127 @@ var SpriteContainer = /*#__PURE__*/styled.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 = useRef(null);
+  useOutsideClick(ref, 'relative-context-menu');
+  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.createElement(ModalPortal, null, React.createElement(Container$f, Object.assign({
+    fontSize: fontSize,
+    ref: ref
+  }, pos), React.createElement("ul", {
+    className: "rpgui-list-imp",
+    style: {
+      overflow: 'hidden'
+    }
+  }, options.map(function (params, index) {
+    return React.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.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.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.createElement(React.Fragment, null, ((_itemDetails$tooltip = itemDetails.tooltip) == null ? void 0 : _itemDetails$tooltip.visible) && item && !isFocused && React.createElement(ItemTooltip, {
+    item: item,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet
+  }), ((_itemDetails$tooltip2 = itemDetails.tooltip) == null ? void 0 : _itemDetails$tooltip2.mobileVisible) && item && React.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.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,
@@ -29140,11 +29154,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;
+    onPositionChangeStart = _ref.onPositionChangeStart,
+    _onSelected = _ref.onSelected;
   var neck = equipmentSet.neck,
     leftHand = equipmentSet.leftHand,
     ring = equipmentSet.ring,
@@ -29157,6 +29171,10 @@ var EquipmentSet = function EquipmentSet(_ref) {
     accessory = equipmentSet.accessory;
   var equipmentData = [neck, leftHand, ring, head, armor, legs, boot, inventory, rightHand, accessory];
   var equipmentMaskSlots = [ItemSlotType.Neck, ItemSlotType.LeftHand, ItemSlotType.Ring, ItemSlotType.Head, ItemSlotType.Torso, ItemSlotType.Legs, ItemSlotType.Feet, ItemSlotType.Inventory, ItemSlotType.RightHand, 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);
@@ -29177,9 +29195,6 @@ 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;
@@ -29191,7 +29206,6 @@ var EquipmentSet = function EquipmentSet(_ref) {
         },
         dragScale: scale,
         checkIfItemCanBeMoved: checkIfItemCanBeMoved,
-        checkIfItemShouldDragEnd: checkIfItemShouldDragEnd,
         onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
           if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
         },
@@ -29203,7 +29217,7 @@ var EquipmentSet = function EquipmentSet(_ref) {
       });
     });
   };
-  return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
+  return React.createElement(ItemSlotDraggingProvider, null, React.createElement(ItemSlotTooltipProvider, null, React.createElement(DraggedItem, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     scale: scale
@@ -29221,7 +29235,23 @@ var EquipmentSet = function EquipmentSet(_ref) {
     onPositionChangeStart: onPositionChangeStart
   }, React.createElement(EquipmentSetContainer, {
     className: "equipment-container-body"
-  }, React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10)))));
+  }, React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10)))), React.createElement(ItemSlotToolTips, {
+    isFocused: dragState.isFocused,
+    isContextMenuDisabled: isMobile(),
+    dragScale: scale,
+    onSelected: function onSelected(optionId, item) {
+      updateItemDetails({
+        item: item,
+        contextMenu: {
+          visible: false
+        }
+      });
+      if (_onSelected) _onSelected(optionId);
+    },
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet
+  })));
 };
 var EquipmentSetContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "EquipmentSet__EquipmentSetContainer",
@@ -30702,14 +30732,12 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     document.removeEventListener('pointermove', handleMouseMove);
   }, [handleMouseMove, onItemDragStart, stopScrolling]);
   var onDragStart = function onDragStart(item, slotIndex, itemContainerType) {
-    console.log('DRAG START');
     if (onItemDragStart) {
       onItemDragStart(item, slotIndex, itemContainerType);
     }
     onDragStartScrollingEvents();
   };
   var onDragEnd = function onDragEnd(quantity) {
-    console.log('DRAG END');
     if (onItemDragEnd) {
       onItemDragEnd(quantity);
     }
@@ -30736,9 +30764,6 @@ 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,
@@ -30767,14 +30792,17 @@ var ItemContainer$1 = function ItemContainer(_ref) {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         isSelectingShortcut: settingShortcutIndex !== -1,
-        equipmentSet: equipmentSet,
         setItemShortcut: type === ItemContainerType.Inventory ? handleSetShortcut : undefined,
         isDepotSystem: isDepotSystem
       }));
     }
     return slots;
   };
-  return React.createElement(DraggingProvider, null, React.createElement(DraggedItem, {
+  var _useItemSlotTooltip = useItemSlotTooltip(),
+    updateItemDetails = _useItemSlotTooltip.updateItemDetails;
+  var _useItemSlotDragging = useItemSlotDragging(),
+    dragState = _useItemSlotDragging.dragState;
+  return React.createElement(ItemSlotDraggingProvider, null, React.createElement(ItemSlotTooltipProvider, null, React.createElement(DraggedItem, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     scale: scale
@@ -30799,10 +30827,26 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     ref: containerRef,
     isScrollable: itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL,
     isFullScreen: isFullScreen
-  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ItemQuantitySelectorModal, {
+  }, onRenderSlots())), React.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.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect
-  }));
+  })));
 };
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",