minecraft-inventory 0.1.2 → 0.1.4

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,30 @@ 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()
+
+      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' })
+        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' })
-      } else if (item) {
-        const rect = slotRef.current?.getBoundingClientRect()
-        if (rect) setMobileTouchPos({ x: rect.right, y: rect.top })
-        setMobileMenuOpen(true)
-        setShowTooltip(true)
+        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 +318,13 @@ export function Slot({
       ]
         .filter(Boolean)
         .join(' ')}
+      tabIndex={index >= 0 ? 0 : 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 +360,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/mineflayer.ts

@@ -1,20 +1,52 @@
 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,
+    }
+    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 +99,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 +147,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 +191,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 +213,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 +228,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 })

package/src/context/InventoryContext.tsx

@@ -1,6 +1,11 @@
-import React, { createContext, useContext, useEffect, useRef, useState, useCallback } from 'react'
+import React, { createContext, useContext, useEffect, useRef, useState, useCallback, useMemo } from 'react'
 import type { InventoryWindowState, PlayerState, ItemStack, SlotState } from '../types'
 import type { InventoryConnector } from '../connector/types'
+import { isItemEqual, getMaxStackSize } from '../utils/isItemEqual'
+
+export interface DragPreviewEntry {
+  count: number
+}
 
 export interface InventoryContextValue {
   windowState: InventoryWindowState | null
@@ -12,6 +17,8 @@ export interface InventoryContextValue {
   isDragging: boolean
   dragSlots: number[]
   dragButton: 'left' | 'right' | null
+  /** Client-side preview of item counts for each slot in the current drag */
+  dragPreview: Map<number, DragPreviewEntry>
   startDrag: (slotIndex: number, button: 'left' | 'right') => void
   addDragSlot: (slotIndex: number) => void
   endDrag: () => void
@@ -24,6 +31,17 @@ export interface InventoryContextValue {
   /** Pixel offset from the cursor item's top-left to the grab point, preserving pick-up position */
   grabOffset: { x: number; y: number }
   setGrabOffset: (offset: { x: number; y: number }) => void
+  /** Whether drag/spread operations are disabled */
+  noDragSpread: boolean
+  /** Whether P-key slot numbering mode is active */
+  pKeyActive: boolean
+  setPKeyActive: (v: boolean) => void
+  /** Currently focused slot index (via P-key number entry) */
+  focusedSlot: number | null
+  setFocusedSlot: (slot: number | null) => void
+  /** Pending first digit for P-key slot number entry */
+  pKeyDigit: string
+  setPKeyDigit: (d: string) => void
 }
 
 const InventoryContext = createContext<InventoryContextValue | null>(null)
@@ -37,9 +55,10 @@ export function useInventoryContext(): InventoryContextValue {
 interface InventoryProviderProps {
   connector: InventoryConnector | null
   children: React.ReactNode
+  noDragSpread?: boolean
 }
 
-export function InventoryProvider({ connector, children }: InventoryProviderProps) {
+export function InventoryProvider({ connector, children, noDragSpread = false }: InventoryProviderProps) {
   const [windowState, setWindowState] = useState<InventoryWindowState | null>(
     () => connector?.getWindowState() ?? null,
   )
@@ -53,12 +72,24 @@ export function InventoryProvider({ connector, children }: InventoryProviderProp
   const [isDragging, setIsDragging] = useState(false)
   const [dragSlots, setDragSlots] = useState<number[]>([])
   const [dragButton, setDragButton] = useState<'left' | 'right' | null>(null)
+  const [dragPreview, setDragPreview] = useState<Map<number, DragPreviewEntry>>(new Map())
   const [activeNumberKey, setActiveNumberKey] = useState<number | null>(null)
   const [grabOffset, setGrabOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
+  const [pKeyActive, setPKeyActive] = useState(false)
+  const [focusedSlot, setFocusedSlot] = useState<number | null>(null)
+  const [pKeyDigit, setPKeyDigit] = useState('')
 
   const connectorRef = useRef(connector)
   connectorRef.current = connector
 
+  // Refs so endDrag can read current values without being in its dep array
+  const heldItemRef = useRef(heldItem)
+  heldItemRef.current = heldItem
+  const windowStateRef = useRef(windowState)
+  windowStateRef.current = windowState
+  const dragButtonRef = useRef(dragButton)
+  dragButtonRef.current = dragButton
+
   useEffect(() => {
     if (!connector) return
     setWindowState(connector.getWindowState())
@@ -92,35 +123,130 @@ export function InventoryProvider({ connector, children }: InventoryProviderProp
     [],
   )
 
+  const computeDragPreview = useCallback((slots: number[], button: 'left' | 'right', held: ItemStack | null, ws: InventoryWindowState | null) => {
+    const preview = new Map<number, DragPreviewEntry>()
+    if (!held || slots.length === 0) return preview
+
+    const maxStack = getMaxStackSize(held)
+
+    if (button === 'left') {
+      // Only spread into compatible slots (empty or same item type)
+      const compatibleSlots = slots.filter((idx) => {
+        const existingItem = ws?.slots.find((s) => s.index === idx)?.item
+        return !existingItem || isItemEqual(existingItem, held)
+      })
+      if (compatibleSlots.length === 0) return preview
+      const perSlot = Math.floor(held.count / compatibleSlots.length)
+      let remainder = held.count % compatibleSlots.length
+      for (const idx of compatibleSlots) {
+        const existingCount = ws?.slots.find((s) => s.index === idx)?.item?.count ?? 0
+        const add = perSlot + (remainder > 0 ? 1 : 0)
+        if (remainder > 0) remainder--
+        const total = Math.min(existingCount + add, maxStack)
+        preview.set(idx, { count: total })
+      }
+    } else {
+      for (const idx of slots) {
+        const existing = ws?.slots.find((s) => s.index === idx)
+        const existingItem = existing?.item
+        if (existingItem && !isItemEqual(existingItem, held)) continue
+        const existingCount = existingItem ? existingItem.count : 0
+        const total = Math.min(existingCount + 1, maxStack)
+        preview.set(idx, { count: total })
+      }
+    }
+    return preview
+  }, [])
+
   const startDrag = useCallback((slotIndex: number, button: 'left' | 'right') => {
+    if (noDragSpread) return
     setIsDragging(true)
     setDragButton(button)
     setDragSlots([slotIndex])
-    connectorRef.current?.sendAction({ type: 'drag', slots: [], button })
-  }, [])
+    setDragPreview(new Map())
+  }, [noDragSpread])
 
   const addDragSlot = useCallback((slotIndex: number) => {
     setDragSlots((prev) => {
       if (prev.includes(slotIndex)) return prev
-      return [...prev, slotIndex]
+      const next = [...prev, slotIndex]
+      setDragPreview(computeDragPreview(next, dragButton!, heldItem, windowState))
+      return next
     })
-  }, [])
+  }, [computeDragPreview, dragButton, heldItem, windowState])
 
   const endDrag = useCallback(() => {
     setDragSlots((slots) => {
-      if (slots.length > 0 && dragButton) {
-        connectorRef.current?.sendAction({ type: 'drag', slots, button: dragButton })
+      const button = dragButtonRef.current
+      const held = heldItemRef.current
+      const ws = windowStateRef.current
+
+      // Only send drag action if multiple slots were involved (single slot = normal click)
+      if (slots.length > 1 && button && held) {
+        connectorRef.current?.sendAction({ type: 'drag', slots, button })
+
+        // Optimistic client-side update: apply item distribution immediately
+        // so slots visually update before server responds.
+        const maxStack = getMaxStackSize(held)
+        const newSlots = ws ? [...ws.slots] : []
+
+        if (button === 'left') {
+          const compatibleSlots = slots.filter((idx) => {
+            const existing = newSlots.find((s) => s.index === idx)?.item
+            return !existing || isItemEqual(existing, held)
+          })
+          if (compatibleSlots.length > 0) {
+            const perSlot = Math.floor(held.count / compatibleSlots.length)
+            let remainder = held.count % compatibleSlots.length
+            for (const idx of compatibleSlots) {
+              const existingIdx = newSlots.findIndex((s) => s.index === idx)
+              const existingCount = existingIdx >= 0 ? (newSlots[existingIdx].item?.count ?? 0) : 0
+              const add = perSlot + (remainder > 0 ? 1 : 0)
+              if (remainder > 0) remainder--
+              const newCount = Math.min(existingCount + add, maxStack)
+              if (existingIdx >= 0) {
+                newSlots[existingIdx] = { index: idx, item: { ...held, count: newCount } }
+              } else {
+                newSlots.push({ index: idx, item: { ...held, count: newCount } })
+              }
+            }
+            if (ws) setWindowState({ ...ws, slots: newSlots })
+            setHeldItemState(null)
+          }
+        } else {
+          // Right-click drag: place 1 per slot
+          let remaining = held.count
+          for (const idx of slots) {
+            if (remaining <= 0) break
+            const existingIdx = newSlots.findIndex((s) => s.index === idx)
+            const existingItem = existingIdx >= 0 ? newSlots[existingIdx].item : null
+            if (existingItem && !isItemEqual(existingItem, held)) continue
+            const existingCount = existingItem?.count ?? 0
+            const newCount = Math.min(existingCount + 1, maxStack)
+            if (existingIdx >= 0) {
+              newSlots[existingIdx] = { index: idx, item: { ...held, count: newCount } }
+            } else {
+              newSlots.push({ index: idx, item: { ...held, count: newCount } })
+            }
+            remaining--
+          }
+          if (ws) setWindowState({ ...ws, slots: newSlots })
+          if (remaining <= 0) setHeldItemState(null)
+          else setHeldItemState({ ...held, count: remaining })
+        }
       }
       return []
     })
     setIsDragging(false)
     setDragButton(null)
-  }, [dragButton])
+    setDragPreview(new Map())
+  }, [])
 
   const cancelDrag = useCallback(() => {
     setIsDragging(false)
     setDragSlots([])
     setDragButton(null)
+    setDragPreview(new Map())
   }, [])
 
   const getSlot = useCallback(
@@ -140,6 +266,7 @@ export function InventoryProvider({ connector, children }: InventoryProviderProp
     isDragging,
     dragSlots,
     dragButton,
+    dragPreview,
     startDrag,
     addDragSlot,
     endDrag,
@@ -151,6 +278,13 @@ export function InventoryProvider({ connector, children }: InventoryProviderProp
     getSlot,
     grabOffset,
     setGrabOffset,
+    noDragSpread,
+    pKeyActive,
+    setPKeyActive,
+    focusedSlot,
+    setFocusedSlot,
+    pKeyDigit,
+    setPKeyDigit,
   }
 
   return <InventoryContext.Provider value={value}>{children}</InventoryContext.Provider>

package/src/context/TextureContext.tsx

@@ -9,7 +9,13 @@ export const MC_GUI_BASE = MC_ASSETS_BASE
 
 export interface TextureConfig {
   baseUrl: string
-  getItemTextureUrl(item: { type: number; name?: string }): string
+  /**
+   * Resolve item texture URL.
+   * When `item.textureKey` is set it is used as the path relative to the items texture root
+   * (e.g. `"item/dye_black"` → `<base>/item/dye_black.png`).
+   * Otherwise falls back to `name` then `type`.
+   */
+  getItemTextureUrl(item: { type: number; name?: string; textureKey?: string }): string
   getBlockTextureUrl(item: { type: number; name?: string }): string
   /** Supports full mc-assets paths (e.g. "1.21.11/textures/gui/container/anvil.png") */
   getGuiTextureUrl(path: string, version?: string): string
@@ -23,8 +29,9 @@ function buildDefault(base: string): TextureConfig {
   return {
     baseUrl: base,
 
-    getItemTextureUrl({ type, name }) {
+    getItemTextureUrl({ type, name, textureKey }) {
       const root = isRemote ? MC_ITEMS_BASE : base
+      if (textureKey) return `${root}/${textureKey}.png`
       if (name) return `${root}/item/${name}.png`
       return `${root}/item/${type}.png`
     },