minecraft-inventory 0.1.17 → 0.1.18

package/package.json

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

package/src/components/CursorItem/CursorItem.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import { useInventoryContext } from '../../context/InventoryContext'
 import { useScale } from '../../context/ScaleContext'
 import { ItemCanvas } from '../ItemCanvas'
@@ -11,13 +11,21 @@ import { globalMouse } from '../../utils/globalMouse'
  * Only re-renders when heldItem or contentSize changes (for ItemCanvas updates).
  */
 export function CursorItem() {
-  const { heldItem } = useInventoryContext()
+  const { heldItem, isDragging, dragSlots, dragRemainder } = useInventoryContext()
   const { contentSize } = useScale()
   const isMobile = useMobile()
   const containerRef = useRef<HTMLDivElement>(null)
   const rafRef = useRef(0)
   const halfSizeRef = useRef(Math.round(contentSize / 2))
 
+  // Determine display item: during spread, show remainder count
+  const displayItem = useMemo(() => {
+    if (isDragging && dragSlots.length > 1 && heldItem && dragRemainder !== null) {
+      return { ...heldItem, count: dragRemainder }
+    }
+    return heldItem
+  }, [isDragging, dragSlots.length, heldItem, dragRemainder])
+
   // Update halfSize when contentSize changes
   useEffect(() => {
     halfSizeRef.current = Math.round(contentSize / 2)
@@ -76,10 +84,29 @@ export function CursorItem() {
       }}
     >
       <ItemCanvas
-        item={heldItem}
+        item={displayItem!}
         size={contentSize}
         style={{ position: 'absolute', top: 0, left: 0 }}
       />
+      {isDragging && dragSlots.length > 1 && dragRemainder === 0 && (
+        <span
+          className="mc-inv-cursor-zero"
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            fontSize: Math.max(7, Math.round(contentSize * 0.5)),
+            fontFamily: "'Minecraftia', 'Minecraft', monospace",
+            color: '#ffff00',
+            textShadow: '1px 1px 0 #3f3f00',
+            lineHeight: 1,
+            pointerEvents: 'none',
+            zIndex: 1,
+          }}
+        >
+          0
+        </span>
+      )}
     </div>
   )
 }

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -304,7 +304,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.17
+            INV 0.1.18
           </a>
         )}
 

package/src/components/Slot/Slot.tsx

@@ -374,6 +374,7 @@ export function Slot({
         <ItemCanvas
           item={item}
           size={renderSize}
+          noCount={!!dragPreviewEntry}
           style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}
         />
       )}
@@ -420,23 +421,33 @@ export function Slot({
       )}
 
       {dragPreviewEntry && (
-        <div
-          className="mc-inv-drag-preview-count"
-          style={{
-            position: 'absolute',
-            right: 1,
-            bottom: 1,
-            fontSize: Math.round(renderSize * 0.45),
-            fontFamily: "'Minecraftia', 'Minecraft', monospace",
-            color: '#ffff00',
-            textShadow: '1px 1px 0 #3f3f00',
-            lineHeight: 1,
-            pointerEvents: 'none',
-            zIndex: 3,
-          }}
-        >
-          {dragPreviewEntry.count}
-        </div>
+        <>
+          {!item && heldItem && (
+            <ItemCanvas
+              item={heldItem}
+              size={renderSize}
+              noCount
+              style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}
+            />
+          )}
+          <div
+            className="mc-inv-drag-preview-count"
+            style={{
+              position: 'absolute',
+              right: 1,
+              bottom: 1,
+              fontSize: Math.round(renderSize * 0.45),
+              fontFamily: "'Minecraftia', 'Minecraft', monospace",
+              color: '#ffff00',
+              textShadow: '1px 1px 0 #3f3f00',
+              lineHeight: 1,
+              pointerEvents: 'none',
+              zIndex: 3,
+            }}
+          >
+            {dragPreviewEntry.count}
+          </div>
+        </>
       )}
 
       {item && showTooltip && !mobileMenuOpen && !heldItem && (

package/src/context/InventoryContext.tsx

@@ -19,6 +19,8 @@ export interface InventoryContextValue {
   dragButton: 'left' | 'right' | null
   /** Client-side preview of item counts for each slot in the current drag */
   dragPreview: Map<number, DragPreviewEntry>
+  /** Number of items remaining on the cursor during an active spread drag */
+  dragRemainder: number | null
   startDrag: (slotIndex: number, button: 'left' | 'right') => void
   addDragSlot: (slotIndex: number) => void
   endDrag: () => void
@@ -79,6 +81,7 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
   const [dragSlots, setDragSlots] = useState<number[]>([])
   const [dragButton, setDragButton] = useState<'left' | 'right' | null>(null)
   const [dragPreview, setDragPreview] = useState<Map<number, DragPreviewEntry>>(new Map())
+  const [dragRemainder, setDragRemainder] = useState<number | null>(null)
   const [activeNumberKey, setActiveNumberKey] = useState<number | null>(null)
   const [grabOffset, setGrabOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
   const [pKeyActive, setPKeyActive] = useState(false)
@@ -133,11 +136,12 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
     [],
   )
 
-  const computeDragPreview = useCallback((slots: number[], button: 'left' | 'right', held: ItemStack | null, ws: InventoryWindowState | null) => {
+  const computeDragPreview = useCallback((slots: number[], button: 'left' | 'right', held: ItemStack | null, ws: InventoryWindowState | null): { preview: Map<number, DragPreviewEntry>; remainder: number } => {
     const preview = new Map<number, DragPreviewEntry>()
-    if (!held || slots.length === 0) return preview
+    if (!held || slots.length === 0) return { preview, remainder: held?.count ?? 0 }
 
     const maxStack = getMaxStackSize(held)
+    let totalPlaced = 0
 
     if (button === 'left') {
       // Only spread into compatible slots (empty or same item type)
@@ -145,13 +149,15 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
         const existingItem = ws?.slots.find((s) => s.index === idx)?.item
         return !existingItem || isItemEqual(existingItem, held)
       })
-      if (compatibleSlots.length === 0) return preview
+      if (compatibleSlots.length === 0) return { preview, remainder: held.count }
       const perSlot = Math.floor(held.count / compatibleSlots.length)
       // Vanilla behavior: if perSlot=0 (more slots than items), nothing is distributed
-      if (perSlot === 0) return preview
+      if (perSlot === 0) return { preview, remainder: held.count }
       for (const idx of compatibleSlots) {
         const existingCount = ws?.slots.find((s) => s.index === idx)?.item?.count ?? 0
         const total = Math.min(existingCount + perSlot, maxStack)
+        const added = total - existingCount
+        totalPlaced += added
         preview.set(idx, { count: total })
       }
     } else {
@@ -161,10 +167,12 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
         if (existingItem && !isItemEqual(existingItem, held)) continue
         const existingCount = existingItem ? existingItem.count : 0
         const total = Math.min(existingCount + 1, maxStack)
+        const added = total - existingCount
+        totalPlaced += added
         preview.set(idx, { count: total })
       }
     }
-    return preview
+    return { preview, remainder: held.count - totalPlaced }
   }, [])
 
   const startDrag = useCallback((slotIndex: number, button: 'left' | 'right') => {
@@ -174,13 +182,16 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
     setDragButton(button)
     setDragSlots([slotIndex])
     setDragPreview(new Map())
+    setDragRemainder(null)
   }, [noDragSpread])
 
   const addDragSlot = useCallback((slotIndex: number) => {
     setDragSlots((prev) => {
       if (prev.includes(slotIndex)) return prev
       const next = [...prev, slotIndex]
-      setDragPreview(computeDragPreview(next, dragButton!, heldItem, windowState))
+      const result = computeDragPreview(next, dragButton!, heldItem, windowState)
+      setDragPreview(result.preview)
+      setDragRemainder(result.remainder)
       return next
     })
   }, [computeDragPreview, dragButton, heldItem, windowState])
@@ -255,6 +266,7 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
     setIsDragging(false)
     setDragButton(null)
     setDragPreview(new Map())
+    setDragRemainder(null)
   }, [])
 
   const cancelDrag = useCallback(() => {
@@ -262,6 +274,7 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
     setDragSlots([])
     setDragButton(null)
     setDragPreview(new Map())
+    setDragRemainder(null)
   }, [])
 
   const getSlot = useCallback(
@@ -295,6 +308,7 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
     dragSlots,
     dragButton,
     dragPreview,
+    dragRemainder,
     startDrag,
     addDragSlot,
     endDrag,