minecraft-inventory 0.1.3 → 0.1.5

package/src/components/Notes/Notes.tsx

@@ -45,6 +45,7 @@ export function Notes({
   const [notes, setNotes] = useState<Note[]>([])
   const [draft, setDraft] = useState('')
   const [loading, setLoading] = useState(true)
+  const [showInput, setShowInput] = useState(false)
 
   // Load notes on mount
   useEffect(() => {
@@ -104,6 +105,14 @@ export function Notes({
     setDraft('')
   }, [draft, notes, saveNotes])
 
+  const handleAddButtonClick = useCallback(() => {
+    if (!showInput) {
+      setShowInput(true)
+    } else {
+      addNote()
+    }
+  }, [showInput, addNote])
+
   const removeNote = useCallback((id: number) => {
     const next = notes.filter((n) => n.id !== id)
     saveNotes(next)
@@ -142,7 +151,7 @@ export function Notes({
           </div>
         ) : notes.length === 0 ? (
           <div style={{ color: '#888', fontSize: Math.round(6 * scale), textAlign: 'center', padding: `${4 * scale}px` }}>
-            No tasks yet
+            {/* No tasks yet */}
           </div>
         ) : (
           notes.map((note) => (
@@ -187,50 +196,72 @@ export function Notes({
         boxSizing: 'border-box',
         // borderTop: `${scale}px solid #555555`,
       }}>
-        <textarea
-          value={draft}
-          rows={2}
-          onChange={(e) => {
-            // Strip newlines — behave like a single-line input but with word wrap
-            setDraft(e.target.value.replace(/[\r\n]/g, ''))
-          }}
-          onKeyDown={(e) => {
-            if (e.code === 'Enter') { e.preventDefault(); addNote() }
-          }}
-          placeholder="Add task…"
-          style={{
-            flex: 1,
-            minWidth: 0,
-            resize: 'none',
-            background: '#8b8b8b',
-            border: `${scale}px solid #373737`,
-            color: '#fff',
-            fontSize: Math.round(6 * scale),
-            padding: `${scale}px`,
-            fontFamily: 'inherit',
-            outline: 'none',
-            lineHeight: 1.4,
-            boxSizing: 'border-box',
-            overflowY: 'hidden',
-          }}
-        />
-        <button
-          onClick={addNote}
-          disabled={!draft.trim()}
-          style={{
-            background: '#404040',
-            color: '#fff',
-            border: `${scale}px solid #666`,
-            cursor: draft.trim() ? 'pointer' : 'not-allowed',
-            fontSize: Math.round(6 * scale),
-            padding: `${scale}px ${2 * scale}px`,
-            fontFamily: 'inherit',
-            flexShrink: 0,
-            opacity: draft.trim() ? 1 : 0.5,
-          }}
-        >
-          +
-        </button>
+        {showInput && (
+          <textarea
+            value={draft}
+            rows={2}
+            autoFocus
+            onChange={(e) => {
+              setDraft(e.target.value.replace(/[\r\n]/g, ''))
+            }}
+            onKeyDown={(e) => {
+              if (e.code === 'Enter') { e.preventDefault(); addNote() }
+              if (e.code === 'Escape') { setShowInput(false); setDraft('') }
+            }}
+            placeholder="Add task…"
+            style={{
+              flex: 1,
+              minWidth: 0,
+              resize: 'none',
+              background: '#8b8b8b',
+              border: `${scale}px solid #373737`,
+              color: '#fff',
+              fontSize: Math.round(6 * scale),
+              padding: `${scale}px`,
+              fontFamily: 'inherit',
+              outline: 'none',
+              lineHeight: 1.4,
+              boxSizing: 'border-box',
+              overflowY: 'hidden',
+            }}
+          />
+        )}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: scale, flexShrink: 0 }}>
+          {showInput && (
+            <button
+              onClick={() => { setShowInput(false); setDraft('') }}
+              title="Hide"
+              style={{
+                background: '#5a3a3a',
+                color: '#ccc',
+                border: `${scale}px solid #666`,
+                cursor: 'pointer',
+                fontSize: Math.round(6 * scale),
+                padding: `${scale}px ${2 * scale}px`,
+                fontFamily: 'inherit',
+                lineHeight: 1,
+              }}
+            >
+              ×
+            </button>
+          )}
+          <button
+            onClick={handleAddButtonClick}
+            disabled={showInput && !draft.trim()}
+            style={{
+              background: '#404040',
+              color: '#fff',
+              border: `${scale}px solid #666`,
+              cursor: showInput && !draft.trim() ? 'not-allowed' : 'pointer',
+              fontSize: Math.round(6 * scale),
+              padding: `${scale}px ${2 * scale}px`,
+              fontFamily: 'inherit',
+              opacity: showInput && !draft.trim() ? 0.5 : 1,
+            }}
+          >
+            +
+          </button>
+        </div>
       </div>
     </div>
   )

package/src/components/Slot/Slot.tsx

@@ -42,12 +42,17 @@ export function Slot({
     isDragging,
     dragSlots,
     dragButton,
+    dragPreview,
     startDrag,
     addDragSlot,
     endDrag,
     hoveredSlot,
     setHoveredSlot,
     activeNumberKey,
+    pKeyActive,
+    setPKeyActive,
+    focusedSlot,
+    setFocusedSlot,
   } = useInventoryContext()
 
   const { contentSize } = useScale()
@@ -89,6 +94,10 @@ export function Slot({
 
   const isHovered = hoveredSlot === index
   const isDragTarget = dragSlots.includes(index)
+  const dragPreviewEntry = dragPreview.get(index)
+  const isFocused = focusedSlot === index
+  const showPKeyNumber = pKeyActive && index >= 0 && index <= 99
+  const isInFocusSwapMode = focusedSlot !== null || pKeyActive
 
   // Keyboard number key while hovering
   useEffect(() => {
@@ -129,22 +138,44 @@ export function Slot({
     (e: React.MouseEvent) => {
       if (isMobile || disabled) return
       e.preventDefault()
+      e.stopPropagation()
       const button = e.button === 2 ? 'right' : e.button === 1 ? 'middle' : 'left'
       if (isDragging && dragSlots.length > 1) {
         endDrag()
         return
       }
+
+      // Focus/swap logic — active in P mode OR when a slot is already focused
+      if (button === 'left' && (pKeyActive || focusedSlot !== null)) {
+        if (pKeyActive) setPKeyActive(false)
+        if (focusedSlot === null) {
+          setFocusedSlot(index)
+        } else if (focusedSlot === index) {
+          setFocusedSlot(null)
+        } else {
+          sendAction({ type: 'click', slotIndex: focusedSlot, button: 'left', mode: 'normal' })
+          sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
+          sendAction({ type: 'click', slotIndex: focusedSlot, button: 'left', mode: 'normal' })
+          setFocusedSlot(null)
+        }
+        if (isDragging) endDrag()
+        return
+      }
+
       const mode = e.shiftKey ? 'shift' : 'normal'
       if (onClickOverride) {
         onClickOverride(button, mode)
       } else {
-        // Hide tooltip immediately when picking up or placing an item
-        if (button === 'left' || button === 'right') setShowTooltip(false)
-        sendAction({ type: 'click', slotIndex: index, button, mode })
+        if (resultSlot && heldItem && !item && mode === 'normal') {
+          // Cannot place items into result/output slots
+        } else {
+          if (button === 'left' || button === 'right') setShowTooltip(false)
+          sendAction({ type: 'click', slotIndex: index, button, mode })
+        }
       }
       if (isDragging) endDrag()
     },
-    [isMobile, disabled, isDragging, dragSlots.length, sendAction, index, endDrag, onClickOverride],
+    [isMobile, disabled, isDragging, dragSlots.length, sendAction, index, endDrag, onClickOverride, resultSlot, heldItem, item, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot],
   )
 
   const handleDoubleClick = useCallback(
@@ -212,17 +243,33 @@ export function Slot({
       touchStartRef.current = null
       const touch = e.changedTouches[0]
       if (Math.abs(touch.clientX - start.x) > 10 || Math.abs(touch.clientY - start.y) > 10) return
+      e.stopPropagation()
+      // Prevent the browser from firing a synthetic click after touchEnd.
+      // Without this, the click bubbles to the inventory window div which clears focusedSlot.
+      e.preventDefault()
+
+      if (pKeyActive) setPKeyActive(false)
 
       if (heldItem) {
+        // When holding an item, place it (standard behavior, no focus needed)
         sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
-      } else if (item) {
-        const rect = slotRef.current?.getBoundingClientRect()
-        if (rect) setMobileTouchPos({ x: rect.right, y: rect.top })
-        setMobileMenuOpen(true)
-        setShowTooltip(true)
+        return
+      }
+
+      // On mobile, tapping always uses the focus/swap mechanism:
+      // first tap focuses, second tap on a different slot swaps, same slot clears.
+      if (focusedSlot === null) {
+        setFocusedSlot(index)
+      } else if (focusedSlot === index) {
+        setFocusedSlot(null)
+      } else {
+        sendAction({ type: 'click', slotIndex: focusedSlot, button: 'left', mode: 'normal' })
+        sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
+        sendAction({ type: 'click', slotIndex: focusedSlot, button: 'left', mode: 'normal' })
+        setFocusedSlot(null)
       }
     },
-    [isMobile, disabled, heldItem, item, sendAction, index],
+    [isMobile, disabled, heldItem, sendAction, index, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot],
   )
 
   const handleMobilePickAll = useCallback(() => {
@@ -274,11 +321,16 @@ export function Slot({
       ]
         .filter(Boolean)
         .join(' ')}
+      tabIndex={index >= 0 ? 0 : undefined}
+      data-slot={index}
+      data-debug={item?.debugKey ?? undefined}
+      data-texture={item?.textureKey ?? undefined}
       style={{
         width: renderSize,
         height: renderSize,
         position: 'relative',
         flexShrink: 0,
+        ...(isFocused ? { outline: `2px dashed #ff0`, outlineOffset: -2, animation: 'mc-inv-focus-dash 0.5s linear infinite' } : {}),
         ...style,
       }}
       onMouseEnter={handleMouseEnter}
@@ -314,7 +366,58 @@ export function Slot({
         </div>
       )}
 
-      {item && showTooltip && !mobileMenuOpen && (
+      {showPKeyNumber && (
+        <div
+          className="mc-inv-pkey-overlay"
+          style={{
+            position: 'absolute',
+            inset: 0,
+            background: 'rgba(255, 0, 0, 0.2)',
+            border: '1px solid rgba(255, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingLeft: 4,
+            pointerEvents: 'none',
+            zIndex: 4,
+            boxSizing: 'border-box',
+          }}
+        >
+          <span
+            style={{
+              fontSize: Math.round(renderSize * 0.4),
+              fontFamily: "'Minecraftia', 'Minecraft', monospace",
+              color: '#ffffff',
+              textShadow: '1px 1px 0 rgba(0,0,0,0.7)',
+              lineHeight: 1,
+            }}
+          >
+            {String(index).padStart(2, '0')}
+          </span>
+        </div>
+      )}
+
+      {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 && showTooltip && !mobileMenuOpen && !heldItem && (
         <Tooltip item={item} visible />
       )}
 

package/src/connector/demo.ts

@@ -1,5 +1,6 @@
 import type { InventoryAction, InventoryWindowState, PlayerState, SlotState, ItemStack } from '../types'
 import type { InventoryConnector, ConnectorListener, ConnectorEvent } from './types'
+import { isItemEqual, getMaxStackSize } from '../utils/isItemEqual'
 
 export interface ActionLogEntry {
   id: number
@@ -154,11 +155,75 @@ export function createDemoConnector(options: DemoConnectorOptions): InventoryCon
           }
         } else if (action.mode === 'shift' && slotState?.item) {
           // Simulate shift-click: just log it
+        } else if (action.mode === 'double') {
+          // Double-click collect: pick up all matching items from other slots up to maxStack
+          const held = windowState.heldItem
+          if (held) {
+            const maxStack = getMaxStackSize(held)
+            let remaining = maxStack - held.count
+            for (let i = 0; i < slots.length && remaining > 0; i++) {
+              const s = slots[i]
+              if (!s.item || !isItemEqual(s.item, held)) continue
+              const take = Math.min(s.item.count, remaining)
+              slots[i] = { ...s, item: s.item.count - take > 0 ? { ...s.item, count: s.item.count - take } : null }
+              remaining -= take
+            }
+            windowState = { ...windowState, slots, heldItem: { ...held, count: maxStack - remaining } }
+          }
         }
 
         emit({ type: 'windowUpdate', state: windowState })
       }
 
+      // Demo: simulate drag/spread behavior
+      if (action.type === 'drag' && windowState && windowState.heldItem) {
+        const held = windowState.heldItem
+        const maxStack = getMaxStackSize(held)
+        const slots = [...windowState.slots]
+
+        if (action.button === 'left') {
+          // Vanilla left-drag: distribute perSlot items evenly, remainder stays in cursor
+          const compatibleSlots = action.slots.filter((idx) => {
+            const existing = slots.find((s) => s.index === idx)?.item
+            return !existing || isItemEqual(existing, held)
+          })
+          if (compatibleSlots.length > 0) {
+            const perSlot = Math.floor(held.count / compatibleSlots.length)
+            // If perSlot=0 (more slots than items), nothing is distributed
+            if (perSlot > 0) {
+              let totalPlaced = 0
+              for (const idx of compatibleSlots) {
+                const si = slots.findIndex((s) => s.index === idx)
+                const existingCount = si >= 0 ? (slots[si].item?.count ?? 0) : 0
+                const add = Math.min(perSlot, maxStack - existingCount)
+                totalPlaced += add
+                const newCount = existingCount + add
+                if (si >= 0) slots[si] = { ...slots[si], item: { ...held, count: newCount } }
+                else slots.push({ index: idx, item: { ...held, count: newCount } })
+              }
+              const remaining = held.count - totalPlaced
+              windowState = { ...windowState, slots, heldItem: remaining > 0 ? { ...held, count: remaining } : null }
+            }
+          }
+        } else {
+          // Place 1 item per slot (right-click drag)
+          let remaining = held.count
+          for (const idx of action.slots) {
+            if (remaining <= 0) break
+            const si = slots.findIndex((s) => s.index === idx)
+            const existing = si >= 0 ? slots[si].item : null
+            if (existing && !isItemEqual(existing, held)) continue
+            const existingCount = existing?.count ?? 0
+            const newCount = Math.min(existingCount + 1, maxStack)
+            if (si >= 0) slots[si] = { ...slots[si], item: { ...held, count: newCount } }
+            else slots.push({ index: idx, item: { ...held, count: newCount } })
+            remaining--
+          }
+          windowState = { ...windowState, slots, heldItem: remaining > 0 ? { ...held, count: remaining } : null }
+        }
+        emit({ type: 'windowUpdate', state: windowState })
+      }
+
       if (action.type === 'drop' && windowState) {
         const slots = [...windowState.slots]
         const slotState = slots.find((s) => s.index === action.slotIndex)

package/src/connector/mineflayer.ts

@@ -1,20 +1,55 @@
 import type { InventoryAction, InventoryWindowState, PlayerState, SlotState, ItemStack } from '../types'
 import type { InventoryConnector, ConnectorListener, ConnectorEvent, MineflayerBot } from './types'
 
-function botSlotToItemStack(slot: MineflayerBot['heldItem']): ItemStack | null {
-  if (!slot || slot.type === -1 || slot.type === 0) return null
-  return {
-    type: slot.type,
-    count: slot.count,
-    metadata: slot.metadata,
-    nbt: slot.nbt as Record<string, unknown> | undefined,
+type RawSlot = { type: number; count: number; metadata?: number; nbt?: unknown }
+
+/**
+ * Options for {@link createMineflayerConnector}.
+ */
+export interface MineflayerConnectorOptions {
+  /**
+   * Custom item mapper called for every slot conversion from raw mineflayer data to
+   * {@link ItemStack}. Receives the raw slot data and the default-mapped stack.
+   * Return a modified stack to override fields (e.g. `name`, `textureKey`, `displayName`),
+   * or return the second argument unchanged to use the default mapping.
+   *
+   * @example
+   * ```ts
+   * createMineflayerConnector(bot, {
+   *   itemMapper: (raw, mapped) => ({
+   *     ...mapped,
+   *     // Override texture for specific numeric type IDs:
+   *     textureKey: raw.type === 438 ? 'item/potion_water' : mapped.textureKey,
+   *   }),
+   * })
+   * ```
+   */
+  itemMapper?: (raw: RawSlot, mapped: ItemStack) => ItemStack
+}
+
+function makeSlotConverter(itemMapper?: MineflayerConnectorOptions['itemMapper']) {
+  return function botSlotToItemStack(slot: RawSlot | null | undefined): ItemStack | null {
+    if (!slot || slot.type === -1 || slot.type === 0) return null
+    const mapped: ItemStack = {
+      type: slot.type,
+      count: slot.count,
+      metadata: slot.metadata,
+      nbt: slot.nbt as Record<string, unknown> | undefined,
+      // Default debug key: "<type>:<metadata>" — visible as data-debug on slot elements.
+      // Override via itemMapper if needed.
+      debugKey: slot.metadata ? `${slot.type}:${slot.metadata}` : String(slot.type),
+    }
+    return itemMapper ? itemMapper(slot, mapped) : mapped
   }
 }
 
-function botSlotsToSlotStates(slots: MineflayerBot['inventory']['slots']): SlotState[] {
+function botSlotsToSlotStates(
+  slots: MineflayerBot['inventory']['slots'],
+  convert: (slot: RawSlot | null | undefined) => ItemStack | null,
+): SlotState[] {
   return slots.map((slot, index) => ({
     index,
-    item: botSlotToItemStack(slot),
+    item: convert(slot),
   }))
 }
 
@@ -67,23 +102,47 @@ function isBeaconWindow(win: unknown): win is { setBeaconEffects?: (primary: num
   return win != null && (typeof (win as Record<string, unknown>).setBeaconEffects === 'function' || /beacon/i.test(String((win as Record<string, unknown>).type)))
 }
 
-export function createMineflayerConnector(bot: MineflayerBot): InventoryConnector {
+export function createMineflayerConnector(bot: MineflayerBot, options?: MineflayerConnectorOptions): InventoryConnector {
   const listeners = new Set<ConnectorListener>()
   const ext = bot as MineflayerBotExtended
+  const convert = makeSlotConverter(options?.itemMapper)
 
   function emit(event: ConnectorEvent) {
     listeners.forEach((l) => l(event))
   }
 
+  /**
+   * Builds a window state from the currently open window, OR from `bot.inventory`
+   * when no container is open (exposing the player's own inventory as a synthetic
+   * 'player' window with windowId = 0).
+   */
   function buildWindowState(): InventoryWindowState | null {
     const win = bot.currentWindow
-    if (!win) return null
+    if (win) {
+      return {
+        windowId: win.id,
+        type: win.type ?? 'unknown',
+        title: win.title,
+        slots: botSlotsToSlotStates(win.slots, convert),
+        heldItem: convert(bot.heldItem),
+      }
+    }
+    // No open container — expose the player inventory as a synthetic 'player' window.
+    const invSlots: SlotState[] = []
+    // Slots 0–8: crafting/armour — leave empty (not accessible from bot.inventory directly)
+    for (let i = 0; i < 9; i++) invSlots.push({ index: i, item: null })
+    // Slots 9–35: main inventory
+    for (let i = 9; i <= 35; i++) invSlots.push({ index: i, item: convert(bot.inventory.slots[i]) })
+    // Slots 36–44: hotbar
+    for (let i = 36; i <= 44; i++) invSlots.push({ index: i, item: convert(bot.inventory.slots[i]) })
+    // Slot 45: offhand
+    invSlots.push({ index: 45, item: convert(bot.inventory.slots[45]) })
     return {
-      windowId: win.id,
-      type: win.type ?? 'unknown',
-      title: win.title,
-      slots: botSlotsToSlotStates(win.slots),
-      heldItem: botSlotToItemStack(bot.heldItem),
+      windowId: 0,
+      type: 'player',
+      title: undefined,
+      slots: invSlots,
+      heldItem: convert(bot.heldItem),
     }
   }
 
@@ -91,7 +150,7 @@ export function createMineflayerConnector(bot: MineflayerBot): InventoryConnecto
     const inv = bot.inventory.slots
     return {
       activeHotbarSlot: bot.quickBarSlot,
-      inventory: botSlotsToSlotStates(inv),
+      inventory: botSlotsToSlotStates(inv, convert),
     }
   }
 
@@ -135,21 +194,20 @@ export function createMineflayerConnector(bot: MineflayerBot): InventoryConnecto
       // Llama inventory structure (per registry):
       // Slot 0: Carpet (saddle) - empty since we don't have entity data
       slots.push({ index: 0, item: null })
-      // Slot 1: skipped (not used)
       // Slots 2-16: Llama chest (5×3 grid = 15 slots) - empty since we don't have entity data
       for (let i = 2; i <= 16; i++) {
         slots.push({ index: i, item: null })
       }
       // Slots 17-43: Player inventory (bot.inventory.slots indices 9-35 map to window slots 17-43)
       for (let i = 9; i <= 35; i++) {
-        slots.push({ index: i + 8, item: botSlotToItemStack(bot.inventory.slots[i]) })
+        slots.push({ index: i + 8, item: convert(bot.inventory.slots[i]) })
       }
       // Slots 44-52: Hotbar (bot.inventory.slots indices 36-44 map to window slots 44-52)
       for (let i = 36; i <= 44; i++) {
-        slots.push({ index: i + 8, item: botSlotToItemStack(bot.inventory.slots[i]) })
+        slots.push({ index: i + 8, item: convert(bot.inventory.slots[i]) })
       }
       // Slot 53: Offhand (bot.inventory slot 45 maps to window slot 53)
-      slots.push({ index: 53, item: botSlotToItemStack(bot.inventory.slots[45]) })
+      slots.push({ index: 53, item: convert(bot.inventory.slots[45]) })
     } else {
       // Player inventory window structure (per registry):
       // Slots 0-8: Crafting result + grid + armor (not in bot.inventory.slots, leave empty)
@@ -158,14 +216,14 @@ export function createMineflayerConnector(bot: MineflayerBot): InventoryConnecto
       }
       // Slots 9-35: Player inventory (bot.inventory.slots indices 9-35)
       for (let i = 9; i <= 35; i++) {
-        slots.push({ index: i, item: botSlotToItemStack(bot.inventory.slots[i]) })
+        slots.push({ index: i, item: convert(bot.inventory.slots[i]) })
       }
       // Slots 36-44: Hotbar (bot.inventory.slots indices 36-44)
       for (let i = 36; i <= 44; i++) {
-        slots.push({ index: i, item: botSlotToItemStack(bot.inventory.slots[i]) })
+        slots.push({ index: i, item: convert(bot.inventory.slots[i]) })
       }
       // Slot 45: Offhand (bot.inventory slot 45)
-      slots.push({ index: 45, item: botSlotToItemStack(bot.inventory.slots[45]) })
+      slots.push({ index: 45, item: convert(bot.inventory.slots[45]) })
     }
     
     const windowState: InventoryWindowState = {
@@ -173,7 +231,7 @@ export function createMineflayerConnector(bot: MineflayerBot): InventoryConnecto
       type: inventoryType,
       title: inventoryType === 'llama' ? 'Llama' : undefined,
       slots,
-      heldItem: botSlotToItemStack(bot.heldItem),
+      heldItem: convert(bot.heldItem),
     }
     
     emit({ type: 'windowOpen', state: windowState })