minecraft-inventory 0.1.23 → 0.1.25

package/README.md

@@ -9,7 +9,7 @@ A flexible, scalable React library for rendering Minecraft inventory GUIs. Desig
 - `<img>`-rendered item textures with automatic `items/` → `blocks/` fallback (via PrismarineJS asset mirror by default)
 - Tooltips that follow the cursor, matching the original Minecraft style
 - Full keyboard support: number keys (1-9) to swap hotbar, Q to drop, double-click to collect, scroll wheel to pick/place
-- Mobile support: tap to open a context menu (take all / half / custom amount / drop)
+- Mobile support: tap-to-focus inventory interactions plus long-press slot actions (pick half / custom amount / drop one / drop all)
 - Optional JEI (item browser) panel on the left or right
 - Bot connector layer — plugs into a mineflayer bot or any custom server connection
 - Demo connector with action logging for local development
@@ -414,13 +414,13 @@ const myConnector: InventoryConnector = {
 
 ## Mobile Support
 
-On touch devices, tapping a slot with no held item opens a context menu instead of immediately picking up the item. The menu appears to the side in landscape or below in portrait.
+On touch devices, tapping a slot uses the mobile focus/swap flow. Long-pressing a populated slot with no held item opens a context menu. The menu appears to the side in landscape or below in portrait.
 
 Context menu options:
-- **Take All** — picks up the entire stack
-- **Take Half** — picks up half
-- **Take Amount…** — `window.prompt` to enter a custom quantity
-- **Drop** — drops the stack from the slot
+- **Pick Half** — picks up half and highlights the selected slot
+- **Pick Amount…** — `window.prompt` to enter a custom quantity, remembering the last value entered
+- **Drop One** — drops a single item from the slot (same as `Q`)
+- **Drop All** — drops the full stack from the slot (same as `Ctrl+Q`)
 - **Cancel**
 
 When you have a held item, tapping a slot places/transfers it (same as left-click on desktop).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecraft-inventory",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "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.25
           </a>
         )}
 

package/src/components/Slot/Slot.tsx

@@ -54,6 +54,8 @@ export function Slot({
     setPKeyActive,
     focusedSlot,
     setFocusedSlot,
+    mobilePickAmount,
+    setMobilePickAmount,
     dragEndedRef,
     noPlaceholders,
   } = useInventoryContext()
@@ -96,6 +98,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 +256,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
@@ -280,6 +333,7 @@ export function Slot({
 
       if (heldItem) {
         // When holding an item, place it (standard behavior, no focus needed)
+        if (focusedSlot !== null) setFocusedSlot(null)
         sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
         return
       }
@@ -297,38 +351,51 @@ 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(() => {
-    setMobileMenuOpen(false)
-    setShowTooltip(false)
-    sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
-  }, [sendAction, index])
-
   const handleMobilePickHalf = useCallback(() => {
     setMobileMenuOpen(false)
     setShowTooltip(false)
+    setFocusedSlot(index)
     sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
-  }, [sendAction, index])
+  }, [sendAction, index, setFocusedSlot])
 
   const handleMobilePickCustom = useCallback(() => {
     if (!item) return
-    const input = window.prompt(`Pick amount (max ${item.count}):`, String(item.count))
+    const input = window.prompt(`Pick amount (max ${item.count}):`, String(mobilePickAmount))
     const amount = parseInt(input ?? '', 10)
     if (isNaN(amount) || amount <= 0) return
+    setMobilePickAmount(amount)
     setMobileMenuOpen(false)
     setShowTooltip(false)
-    for (let i = 0; i < Math.min(amount, item.count); i++) {
-      sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
+    setFocusedSlot(index)
+    const take = Math.min(amount, item.count)
+    if (take >= item.count) {
+      // Pick 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])
+  }, [item, mobilePickAmount, sendAction, index, setFocusedSlot, setMobilePickAmount])
+
+  const handleMobileDropOne = useCallback(() => {
+    setMobileMenuOpen(false)
+    setShowTooltip(false)
+    setFocusedSlot(null)
+    sendAction({ type: 'drop', slotIndex: index, all: false })
+  }, [sendAction, index, setFocusedSlot])
 
-  const handleMobileDrop = useCallback(() => {
+  const handleMobileDropAll = useCallback(() => {
     setMobileMenuOpen(false)
     setShowTooltip(false)
+    setFocusedSlot(null)
     sendAction({ type: 'drop', slotIndex: index, all: true })
-  }, [sendAction, index])
+  }, [sendAction, index, setFocusedSlot])
 
   const closeMobileMenu = useCallback(() => {
     setMobileMenuOpen(false)
@@ -368,6 +435,7 @@ export function Slot({
       onDoubleClick={handleDoubleClick}
       onContextMenu={handleContextMenu}
       onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
       aria-label={
         label ??
@@ -462,15 +530,20 @@ 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}
             y={mobileTouchPos.y}
-            onPickAll={handleMobilePickAll}
             onPickHalf={handleMobilePickHalf}
             onPickCustom={handleMobilePickCustom}
-            onDrop={handleMobileDrop}
+            onDropOne={handleMobileDropOne}
+            onDropAll={handleMobileDropAll}
             onClose={closeMobileMenu}
           />
         </>
@@ -483,14 +556,14 @@ interface MobileSlotMenuProps {
   item: ItemStack
   x: number
   y: number
-  onPickAll(): void
   onPickHalf(): void
   onPickCustom(): void
-  onDrop(): void
+  onDropOne(): void
+  onDropAll(): void
   onClose(): void
 }
 
-function MobileSlotMenu({ item, x, y, onPickAll, onPickHalf, onPickCustom, onDrop, onClose }: MobileSlotMenuProps) {
+function MobileSlotMenu({ item, x, y, onPickHalf, onPickCustom, onDropOne, onDropAll, onClose }: MobileSlotMenuProps) {
   const { scale } = useScale()
   const menuRef = useRef<HTMLDivElement>(null)
   const [pos, setPos] = useState({ left: x, top: y })
@@ -509,10 +582,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 +608,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(onPickHalf)}>Pick Half ({Math.ceil(item.count / 2)})</button>
+      <button className={styles.mobileBtn} {...touchBtn(onPickCustom)}>Pick Amount…</button>
+      <button className={[styles.mobileBtn, styles.mobileBtnDanger].join(' ')} {...touchBtn(onDropOne)}>Drop One</button>
+      <button className={[styles.mobileBtn, styles.mobileBtnDanger].join(' ')} {...touchBtn(onDropAll)}>Drop All</button>
+      <button className={styles.mobileBtn} {...touchBtn(onClose)}>Cancel</button>
     </div>
   )
 }

package/src/context/InventoryContext.tsx

@@ -44,6 +44,9 @@ export interface InventoryContextValue {
   /** Pending first digit for P-key slot number entry */
   pKeyDigit: string
   setPKeyDigit: (d: string) => void
+  /** Last amount entered in the mobile pick-amount prompt */
+  mobilePickAmount: number
+  setMobilePickAmount: (amount: number) => void
   /** Ref set to true when a drag just ended; cleared on next mouseDown.
    *  Used by Slot to suppress spurious click events that fire after endDrag. */
   dragEndedRef: React.MutableRefObject<boolean>
@@ -90,6 +93,7 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
   const [pKeyActive, setPKeyActive] = useState(false)
   const [focusedSlot, setFocusedSlot] = useState<number | null>(null)
   const [pKeyDigit, setPKeyDigit] = useState('')
+  const [mobilePickAmount, setMobilePickAmount] = useState(1)
 
   const connectorRef = useRef(connector)
   connectorRef.current = connector
@@ -320,6 +324,8 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
     setFocusedSlot,
     pKeyDigit,
     setPKeyDigit,
+    mobilePickAmount,
+    setMobilePickAmount,
     dragEndedRef,
     resolveEnchantmentName,
   }