minecraft-inventory 0.1.24 → 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.24",
+  "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.24
+            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()
@@ -331,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
       }
@@ -351,28 +354,25 @@ export function Slot({
     [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)
+    setFocusedSlot(index)
     const take = Math.min(amount, item.count)
     if (take >= item.count) {
-      // Take all: just left-click
+      // 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
@@ -381,13 +381,21 @@ export function Slot({
         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)
@@ -532,10 +540,10 @@ export function Slot({
             item={item}
             x={mobileTouchPos.x}
             y={mobileTouchPos.y}
-            onPickAll={handleMobilePickAll}
             onPickHalf={handleMobilePickHalf}
             onPickCustom={handleMobilePickCustom}
-            onDrop={handleMobileDrop}
+            onDropOne={handleMobileDropOne}
+            onDropAll={handleMobileDropAll}
             onClose={closeMobileMenu}
           />
         </>
@@ -548,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 })
@@ -600,10 +608,10 @@ 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} {...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(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,
   }