minecraft-inventory 0.1.23 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecraft-inventory",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "type": "module",
   "license": "MIT",
   "release": {

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -310,7 +310,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.23
+            INV 0.1.24
           </a>
         )}
 

package/src/components/Slot/Slot.tsx

@@ -96,6 +96,13 @@ export function Slot({
     }
   }, [label, item, renderSize])
 
+  // Clean up long press timer on unmount
+  useEffect(() => {
+    return () => {
+      if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current)
+    }
+  }, [])
+
   const isHovered = hoveredSlot === index
   const isDragTarget = dragSlots.includes(index)
   const dragPreviewEntry = dragPreview.get(index)
@@ -247,19 +254,63 @@ export function Slot({
 
   // Mobile touch handlers
   const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null)
+  const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const longPressFiredRef = useRef(false)
+
+  const cancelLongPress = useCallback(() => {
+    if (longPressTimerRef.current) {
+      clearTimeout(longPressTimerRef.current)
+      longPressTimerRef.current = null
+    }
+  }, [])
 
   const handleTouchStart = useCallback(
     (e: React.TouchEvent) => {
       if (!isMobile) return
       const touch = e.touches[0]
       touchStartRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() }
+      longPressFiredRef.current = false
+      cancelLongPress()
+      // Long press: open mobile menu after 400ms if item exists and no held item
+      if (item && !heldItem && !disabled) {
+        const startX = touch.clientX
+        const startY = touch.clientY
+        longPressTimerRef.current = setTimeout(() => {
+          longPressFiredRef.current = true
+          setMobileTouchPos({ x: startX, y: startY })
+          setMobileMenuOpen(true)
+        }, 400)
+      }
     },
-    [isMobile],
+    [isMobile, item, heldItem, disabled, cancelLongPress],
+  )
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!longPressTimerRef.current) return
+      const touch = e.touches[0]
+      const start = touchStartRef.current
+      if (!start) return
+      if (Math.abs(touch.clientX - start.x) > 10 || Math.abs(touch.clientY - start.y) > 10) {
+        cancelLongPress()
+      }
+    },
+    [cancelLongPress],
   )
 
   const handleTouchEnd = useCallback(
     (e: React.TouchEvent) => {
+      cancelLongPress()
       if (!isMobile || disabled) return
+      // If long press opened the menu, don't process the tap
+      if (longPressFiredRef.current) {
+        longPressFiredRef.current = false
+        e.stopPropagation()
+        e.preventDefault()
+        return
+      }
+      // If mobile menu is open, let menu buttons handle their own events
+      if (mobileMenuOpen) return
       const start = touchStartRef.current
       if (!start) return
       touchStartRef.current = null
@@ -297,7 +348,7 @@ export function Slot({
         setFocusedSlot(null)
       }
     },
-    [isMobile, disabled, heldItem, sendAction, index, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot, onClickOverride],
+    [isMobile, disabled, heldItem, sendAction, index, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot, onClickOverride, cancelLongPress, mobileMenuOpen],
   )
 
   const handleMobilePickAll = useCallback(() => {
@@ -319,8 +370,16 @@ export function Slot({
     if (isNaN(amount) || amount <= 0) return
     setMobileMenuOpen(false)
     setShowTooltip(false)
-    for (let i = 0; i < Math.min(amount, item.count); i++) {
-      sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
+    const take = Math.min(amount, item.count)
+    if (take >= item.count) {
+      // Take all: just left-click
+      sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
+    } else {
+      // Pick up all, then put back (count - take) items one-by-one via right-click
+      sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
+      for (let i = 0; i < item.count - take; i++) {
+        sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
+      }
     }
   }, [item, sendAction, index])
 
@@ -368,6 +427,7 @@ export function Slot({
       onDoubleClick={handleDoubleClick}
       onContextMenu={handleContextMenu}
       onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
       aria-label={
         label ??
@@ -462,7 +522,12 @@ export function Slot({
 
       {isMobile && mobileMenuOpen && item && (
         <>
-          <div className={styles.mobileOverlay} onClick={closeMobileMenu} />
+          <div
+            className={styles.mobileOverlay}
+            onClick={closeMobileMenu}
+            onTouchStart={(e) => e.stopPropagation()}
+            onTouchEnd={(e) => { e.stopPropagation(); e.preventDefault(); closeMobileMenu() }}
+          />
           <MobileSlotMenu
             item={item}
             x={mobileTouchPos.x}
@@ -509,10 +574,18 @@ function MobileSlotMenu({ item, x, y, onPickAll, onPickHalf, onPickCustom, onDro
     setPos({ left, top })
   }, [x, y])
 
+  // Wrapper to handle both touch and click, preventing event bubbling to the slot
+  const touchBtn = (handler: () => void) => ({
+    onTouchEnd: (e: React.TouchEvent) => { e.stopPropagation(); e.preventDefault(); handler() },
+    onClick: (e: React.MouseEvent) => { e.stopPropagation(); handler() },
+  })
+
   return (
     <div
       ref={menuRef}
       className={styles.mobileMenu}
+      onTouchStart={(e) => e.stopPropagation()}
+      onTouchEnd={(e) => e.stopPropagation()}
       style={{
         position: 'fixed',
         left: pos.left,
@@ -527,11 +600,11 @@ function MobileSlotMenu({ item, x, y, onPickAll, onPickHalf, onPickCustom, onDro
       <div className={styles.mobileMenuTitle}>
         {item.displayName ?? item.name ?? `Item #${item.type}`} ×{item.count}
       </div>
-      <button className={styles.mobileBtn} onClick={onPickAll}>Take All ({item.count})</button>
-      <button className={styles.mobileBtn} onClick={onPickHalf}>Take Half ({Math.ceil(item.count / 2)})</button>
-      <button className={styles.mobileBtn} onClick={onPickCustom}>Take Amount…</button>
-      <button className={[styles.mobileBtn, styles.mobileBtnDanger].join(' ')} onClick={onDrop}>Drop</button>
-      <button className={styles.mobileBtn} onClick={onClose}>Cancel</button>
+      <button className={styles.mobileBtn} {...touchBtn(onPickAll)}>Take All ({item.count})</button>
+      <button className={styles.mobileBtn} {...touchBtn(onPickHalf)}>Take Half ({Math.ceil(item.count / 2)})</button>
+      <button className={styles.mobileBtn} {...touchBtn(onPickCustom)}>Take Amount…</button>
+      <button className={[styles.mobileBtn, styles.mobileBtnDanger].join(' ')} {...touchBtn(onDrop)}>Drop</button>
+      <button className={styles.mobileBtn} {...touchBtn(onClose)}>Cancel</button>
     </div>
   )
 }