minecraft-inventory 0.1.6 → 0.1.8

package/package.json

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

package/src/cache/blockRenderer.ts

@@ -59,20 +59,44 @@ export function renderBlockIcon(
         ctx.imageSmoothingEnabled = false
         ctx.clearRect(0, 0, OUTPUT_SIZE, OUTPUT_SIZE)
 
-        const s = OUTPUT_SIZE / 16
+        const s = OUTPUT_SIZE / 2 - 2 // face size with padding (14px at 32px canvas)
+        const ox = (OUTPUT_SIZE - 2 * s) / 2 // horizontal offset to center
+        const oy = (OUTPUT_SIZE - 2 * s) / 2 // vertical offset to center
         const [tx, ty, tw, th] = top
         const [lx, ly, lw, lh] = left
         const [rx, ry, rw, rh] = right
 
-        // Isometric layout: top face tilted, left and right as sides
+        // Enable smoothing for isometric transforms (better diagonal edges)
+        ctx.imageSmoothingEnabled = true
+        ctx.imageSmoothingQuality = 'high'
+
+        // Isometric cube using affine transforms.
+        // Face vertices for a cube centered in OUTPUT_SIZE × OUTPUT_SIZE:
+        //   Top:   (s+ox, oy) → (2s+ox, s/2+oy) → (s+ox, s+oy) → (ox, s/2+oy)
+        //   Left:  (ox, s/2+oy) → (s+ox, s+oy) → (s+ox, 2s+oy) → (ox, 3s/2+oy)
+        //   Right: (s+ox, s+oy) → (2s+ox, s/2+oy) → (2s+ox, 3s/2+oy) → (s+ox, 2s+oy)
+
+        // Top face
         ctx.save()
-        ctx.translate(8 * s, 2 * s)
-        ctx.rotate(-Math.PI / 4)
-        ctx.drawImage(image, tx, ty, tw, th, -4 * s, -4 * s, 8 * s, 8 * s)
+        ctx.setTransform(1, 0.5, -1, 0.5, s + ox, oy)
+        ctx.drawImage(image, tx, ty, tw, th, 0, 0, s, s)
         ctx.restore()
 
-        ctx.drawImage(image, lx, ly, lw, lh, 0, 12 * s, 10 * s, 10 * s)
-        ctx.drawImage(image, rx, ry, rw, rh, 12 * s, 12 * s, 10 * s, 10 * s)
+        // Left face (darkened)
+        ctx.save()
+        ctx.setTransform(1, 0.5, 0, 1, ox, s / 2 + oy)
+        ctx.drawImage(image, lx, ly, lw, lh, 0, 0, s, s)
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'
+        ctx.fillRect(0, 0, s, s)
+        ctx.restore()
+
+        // Right face (slightly darkened)
+        ctx.save()
+        ctx.setTransform(1, -0.5, 0, 1, s + ox, s + oy)
+        ctx.drawImage(image, rx, ry, rw, rh, 0, 0, s, s)
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'
+        ctx.fillRect(0, 0, s, s)
+        ctx.restore()
 
         const dataUrl = canvas.toDataURL('image/png')
         resolve(dataUrl)

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -52,6 +52,8 @@ export interface InventoryOverlayProps {
   debugBounds?: boolean
   /** Show red debug outline around the inventory background */
   showDebug?: boolean
+  /** When true, entity display area shows layout debug bounds instead of the default image. */
+  entityDisplayDebug?: boolean
   /** Override entity display rendering. Pass a function returning JSX, or null to hide. */
   renderEntity?: ((width: number, height: number) => React.ReactNode) | null
   /** Hide the "INV" version watermark (opt-out) */
@@ -80,6 +82,7 @@ export function InventoryOverlay({
   children,
   debugBounds = false,
   showDebug = false,
+  entityDisplayDebug = false,
   renderEntity,
   noWatermark = false,
 }: InventoryOverlayProps) {
@@ -242,7 +245,14 @@ export function InventoryOverlay({
                   onPushFrame={handleRecipePushFrame}
                 />
               ) : (
-                <InventoryWindow type={type} title={title} properties={properties} showDebug={showDebug} renderEntity={renderEntity} />
+                <InventoryWindow
+                  type={type}
+                  title={title}
+                  properties={properties}
+                  showDebug={showDebug}
+                  entityDisplayDebug={entityDisplayDebug}
+                  renderEntity={renderEntity}
+                />
               )}
             </div>
           </div>
@@ -288,7 +298,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.6
+            INV 0.1.8
           </a>
         )}
 

package/src/components/InventoryWindow/EntityDisplay.tsx

@@ -1,13 +1,22 @@
 import React from 'react'
 import { useScale } from '../../context/ScaleContext'
-import type { EntityDisplayArea } from '../../types'
+import type { EntityDisplayArea, InventoryTypeDefinition } from '../../types'
+import { ENTITY_PLACEHOLDER_IMAGES } from './defaultEntityImages'
 
 interface EntityDisplayProps {
   area: EntityDisplayArea
+  placeholder: NonNullable<InventoryTypeDefinition['entityPlaceholder']>
+  /** When true, draw layout debug bounds instead of the default image (ignored if renderEntity is set). */
+  debug?: boolean
   renderEntity?: ((width: number, height: number) => React.ReactNode) | null
 }
 
-export function EntityDisplay({ area, renderEntity }: EntityDisplayProps) {
+export function EntityDisplay({
+  area,
+  placeholder,
+  debug = false,
+  renderEntity,
+}: EntityDisplayProps) {
   const { scale } = useScale()
 
   if (renderEntity === null) return null
@@ -15,6 +24,44 @@ export function EntityDisplay({ area, renderEntity }: EntityDisplayProps) {
   const w = area.width * scale
   const h = area.height * scale
 
+  let content: React.ReactNode
+  if (renderEntity) {
+    content = renderEntity(w, h)
+  } else if (debug) {
+    content = (
+      <div
+        className="mc-inv-entity-display-placeholder"
+        style={{
+          width: '100%',
+          height: '100%',
+          background: 'rgba(255, 0, 0, 0.15)',
+          border: '1px solid rgba(255, 0, 0, 0.4)',
+          boxSizing: 'border-box',
+        }}
+      />
+    )
+  } else {
+    const image = ENTITY_PLACEHOLDER_IMAGES[placeholder]
+    if (!image) return null
+    content = (
+      <img
+        src={ENTITY_PLACEHOLDER_IMAGES[placeholder]}
+        alt=""
+        draggable={false}
+        className="mc-inv-entity-display-image"
+        style={{
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+          pointerEvents: 'none',
+          userSelect: 'none',
+          imageRendering: 'pixelated',
+        }}
+      />
+    )
+  }
+
   return (
     <div
       className="mc-inv-entity-display"
@@ -27,20 +74,7 @@ export function EntityDisplay({ area, renderEntity }: EntityDisplayProps) {
         overflow: 'hidden',
       }}
     >
-      {renderEntity ? (
-        renderEntity(w, h)
-      ) : (
-        <div
-          className="mc-inv-entity-display-placeholder"
-          style={{
-            width: '100%',
-            height: '100%',
-            background: 'rgba(255, 0, 0, 0.15)',
-            border: '1px solid rgba(255, 0, 0, 0.4)',
-            boxSizing: 'border-box',
-          }}
-        />
-      )}
+      {content}
     </div>
   )
 }

package/src/components/InventoryWindow/InventoryWindow.tsx

@@ -22,6 +22,8 @@ interface InventoryWindowProps {
   style?: React.CSSProperties
   enableKeyboardShortcuts?: boolean
   showDebug?: boolean
+  /** When true, entity slot shows layout debug bounds instead of the default placeholder image. */
+  entityDisplayDebug?: boolean
   /** Override entity display rendering. Pass a function returning JSX, or null to hide. */
   renderEntity?: ((width: number, height: number) => React.ReactNode) | null
 }
@@ -35,6 +37,7 @@ export function InventoryWindow({
   style,
   enableKeyboardShortcuts = true,
   showDebug = false,
+  entityDisplayDebug = false,
   renderEntity,
 }: InventoryWindowProps) {
   const def = getInventoryType(type)
@@ -104,8 +107,13 @@ export function InventoryWindow({
         ))}
 
         {/* Entity display area */}
-        {def.entityDisplay && (
-          <EntityDisplay area={def.entityDisplay} renderEntity={renderEntity} />
+        {def.entityDisplay && def.entityPlaceholder && (
+          <EntityDisplay
+            area={def.entityDisplay}
+            placeholder={def.entityPlaceholder}
+            debug={entityDisplayDebug}
+            renderEntity={renderEntity}
+          />
         )}
 
         {/* Progress bars */}

package/src/components/InventoryWindow/defaultEntityImages.ts

@@ -0,0 +1,13 @@
+import playerImage from '../../assets/entities/player.png'
+import horseImage from '../../assets/entities/horse.png'
+import llamaImage from '../../assets/entities/llama.png'
+import { InventoryTypeDefinition } from '../../types'
+
+export const ENTITY_PLACEHOLDER_IMAGES: Record<
+  NonNullable<InventoryTypeDefinition['entityPlaceholder']>,
+  string | undefined
+> = {
+  player: playerImage,
+  horse: horseImage,
+  llama: llamaImage,
+}

package/src/components/ItemCanvas/ItemCanvas.tsx

@@ -153,7 +153,7 @@ export const ItemCanvas = memo(function ItemCanvas({
     : '#55ff55'
 
   // Font size for count: ~38% of slot size, min 7px, shadow offset = 1 scaled pixel
-  const countFontSize = Math.max(7, Math.round(renderSize * 0.38))
+  const countFontSize = Math.max(7, Math.round(renderSize * 0.5))
   const shadow = Math.max(1, Math.round(pixelSize))
 
   return (

package/src/components/JEI/JEI.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
-import type { ItemStack, RecipeGuide, RecipeNavFrame } from '../../types'
+import type { ItemStack, RecipeGuide, RecipeNavFrame, BlockTextureRender } from '../../types'
 import { useScale } from '../../context/ScaleContext'
 import { useInventoryContext } from '../../context/InventoryContext'
 import { Slot } from '../Slot'
@@ -11,6 +11,8 @@ export interface JEIItem {
   displayName: string
   count?: number
   metadata?: number
+  texture?: string
+  blockTexture?: BlockTextureRender
 }
 
 interface JEIProps {
@@ -328,6 +330,8 @@ export function JEI({
             count: jeiItem.count ?? 1,
             metadata: jeiItem.metadata,
             displayName: jeiItem.displayName,
+            texture: jeiItem.texture,
+            blockTexture: jeiItem.blockTexture,
           }
           const slotIndex = -(page * itemsPerPage + i + 1)
           const isFav = favorites.has(getItemKey(jeiItem))

package/src/components/Slot/Slot.tsx

@@ -46,6 +46,7 @@ export function Slot({
     startDrag,
     addDragSlot,
     endDrag,
+    cancelDrag,
     hoveredSlot,
     setHoveredSlot,
     activeNumberKey,
@@ -53,12 +54,14 @@ export function Slot({
     setPKeyActive,
     focusedSlot,
     setFocusedSlot,
+    dragEndedRef,
   } = useInventoryContext()
 
   const { contentSize } = useScale()
   const isMobile = useMobile()
   const slotRef = useRef<HTMLDivElement>(null)
   const labelRef = useRef<HTMLDivElement>(null)
+  const lastClickTimeRef = useRef(0)
   const [mobileTouchPos, setMobileTouchPos] = useState({ x: 0, y: 0 })
   const [showTooltip, setShowTooltip] = useState(false)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -122,16 +125,19 @@ export function Slot({
     (e: React.MouseEvent) => {
       if (isMobile || disabled) return
       e.preventDefault()
+      dragEndedRef.current = false
       const button = e.button === 2 ? 'right' : e.button === 1 ? 'middle' : 'left'
       if (button === 'middle') {
         sendAction({ type: 'click', slotIndex: index, button: 'middle', mode: 'middle' })
         return
       }
       if (heldItem && (button === 'left' || button === 'right')) {
+        // Don't start drag during double-click sequence
+        if (Date.now() - lastClickTimeRef.current < 400) return
         startDrag(index, button)
       }
     },
-    [isMobile, disabled, heldItem, index, sendAction, startDrag],
+    [isMobile, disabled, heldItem, index, sendAction, startDrag, dragEndedRef],
   )
 
   const handleMouseUp = useCallback(
@@ -145,6 +151,11 @@ export function Slot({
         return
       }
 
+      // Suppress spurious mouseUp events that fire after a drag ends.
+      // The browser can dispatch extra mouseUp events after endDrag resets isDragging;
+      // without this guard they fall through to the click path below.
+      if (dragEndedRef.current) 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)
@@ -162,6 +173,15 @@ export function Slot({
         return
       }
 
+      // Suppress the second mouseup of a double-click to prevent it from
+      // putting the item back before the dblclick event fires mode=6.
+      const now = Date.now()
+      if (button === 'left' && now - lastClickTimeRef.current < 400) {
+        lastClickTimeRef.current = 0
+        return
+      }
+      lastClickTimeRef.current = now
+
       const mode = e.shiftKey ? 'shift' : 'normal'
       if (onClickOverride) {
         onClickOverride(button, mode)
@@ -175,20 +195,21 @@ export function Slot({
       }
       if (isDragging) endDrag()
     },
-    [isMobile, disabled, isDragging, dragSlots.length, sendAction, index, endDrag, onClickOverride, resultSlot, heldItem, item, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot],
+    [isMobile, disabled, isDragging, dragSlots.length, sendAction, index, endDrag, onClickOverride, resultSlot, heldItem, item, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot, dragEndedRef],
   )
 
   const handleDoubleClick = useCallback(
     (e: React.MouseEvent) => {
       if (isMobile || disabled) return
       e.preventDefault()
+      cancelDrag()
       if (onClickOverride) {
         onClickOverride('left', 'double')
       } else {
         sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'double' })
       }
     },
-    [isMobile, disabled, sendAction, index, onClickOverride],
+    [isMobile, disabled, sendAction, index, onClickOverride, cancelDrag],
   )
 
   const handleContextMenu = useCallback((e: React.MouseEvent) => {

package/src/connector/mineflayer.ts

@@ -1,5 +1,6 @@
 import type { InventoryAction, InventoryWindowState, PlayerState, SlotState, ItemStack } from '../types'
 import type { InventoryConnector, ConnectorListener, ConnectorEvent, MineflayerBot } from './types'
+import { getInventoryType } from '../registry'
 
 type RawSlot = { type: number; count: number; metadata?: number; nbt?: unknown }
 
@@ -37,6 +38,20 @@ export interface MineflayerConnectorOptions {
    * ```
    */
   itemMapper?: (raw: RawSlot, mapped: ItemStack) => ItemStack
+
+  /**
+   * When true, the connector only tracks the player inventory (window 0) and never
+   * emits windowOpen/windowUpdate/windowClose events. Use for HUD hotbar that must
+   * always show player hotbar slots regardless of open container windows.
+   */
+  hotbarOnly?: boolean
+
+  /**
+   * Optional title formatter. Called with the raw window title from the server
+   * (may be a JSON text component string, NBT object, or plain text).
+   * Return a human-readable string for display.
+   */
+  formatTitle?: (rawTitle: any) => string
 }
 
 function makeSlotConverter(itemMapper?: MineflayerConnectorOptions['itemMapper']) {
@@ -82,6 +97,9 @@ interface MineflayerBotExtended extends MineflayerBot {
   supportFeature?(name: string): boolean
   _client?: {
     write(packet: string, data: unknown): void
+    on?(event: string, listener: (...args: any[]) => void): void
+    off?(event: string, listener: (...args: any[]) => void): void
+    removeListener?(event: string, listener: (...args: any[]) => void): void
     writeChannel?(channel: string, data: unknown): void
     registerChannel?(channel: string, schema: unknown): void
   }
@@ -118,35 +136,148 @@ export function createMineflayerConnector(bot: MineflayerBot, options?: Mineflay
   const listeners = new Set<ConnectorListener>()
   const ext = bot as MineflayerBotExtended
   const convert = makeSlotConverter(options?.itemMapper)
+  const hotbarOnly = options?.hotbarOnly ?? false
+  const formatTitle = options?.formatTitle
+
+  // Track window properties (furnace progress, enchant levels, etc.)
+  const windowProperties: Record<string, number> = {}
+  let currentWindowType: string | null = null
+
+  // Track stateId for raw packet sending (drag operations bypass bot.clickWindow)
+  let dragStateId = typeof (bot as any)._stateId === 'number' ? (bot as any)._stateId : -1
+  // True only while drag packets are being written; guards trackState against
+  // stale server responses overwriting our predicted stateId mid-sequence.
+  let isDraggingRaw = false
+
+  // Resolve the Item class (prismarine-item) for converting notch-format items.
+  // We extract it lazily from the first non-null slot item's constructor.
+  let ItemClass: { fromNotch(notch: unknown): unknown } | null = null
+  function getItemClass(): typeof ItemClass {
+    if (ItemClass) return ItemClass
+    const win = bot.currentWindow ?? bot.inventory
+    for (const slot of win.slots) {
+      if (slot) {
+        ItemClass = slot.constructor as any
+        return ItemClass
+      }
+    }
+    return null
+  }
+
+  const rawPacketListeners: Array<[string, (...args: any[]) => void]> = []
+  if (ext._client?.on) {
+    const trackState = (packet: any) => {
+      if (packet.stateId != null) {
+        if (isDraggingRaw) {
+          // During active drag, only accept higher stateIds to prevent
+          // stale server responses from reverting our predicted value.
+          if (packet.stateId > dragStateId) {
+            dragStateId = packet.stateId
+          }
+        } else {
+          dragStateId = packet.stateId
+        }
+      }
+    }
+    ext._client.on('window_items' as any, trackState)
+    ext._client.on('set_slot' as any, trackState)
+    rawPacketListeners.push(['window_items', trackState], ['set_slot', trackState])
+
+    // Mineflayer drops set_slot with windowId=-1 (cursor updates) because the window
+    // lookup fails. Intercept these to keep selectedItem in sync after raw packet ops.
+    const onRawSetSlot = (packet: any) => {
+      if (packet.windowId !== -1 || packet.slot !== -1) return
+      const win = bot.currentWindow ?? bot.inventory
+      const IC = getItemClass()
+      if (IC && packet.item) {
+        ;(win as any).selectedItem = IC.fromNotch(packet.item) ?? null
+      } else {
+        ;(win as any).selectedItem = null
+      }
+      emit({ type: 'heldItemChange', item: convert((win as any).selectedItem) })
+    }
+    ext._client.on('set_slot' as any, onRawSetSlot)
+    rawPacketListeners.push(['set_slot', onRawSetSlot])
+
+    // Mineflayer processes window_items slots but ignores the carriedItem field.
+    // Intercept to update selectedItem from the server's cursor state.
+    // Always call scheduleSlotUpdate() so UI gets corrected state even when mineflayer's
+    // handler fires first with a stale selectedItem (drag-flash fix).
+    const onRawWindowItems = (packet: any) => {
+      if (packet.carriedItem != null) {
+        const win = packet.windowId === 0 ? bot.inventory : (bot.currentWindow ?? bot.inventory)
+        const IC = getItemClass()
+        if (IC) {
+          ;(win as any).selectedItem = IC.fromNotch(packet.carriedItem) ?? null
+        } else {
+          ;(win as any).selectedItem = null
+        }
+      }
+      scheduleSlotUpdate()
+    }
+    ext._client.on('window_items' as any, onRawWindowItems)
+    rawPacketListeners.push(['window_items', onRawWindowItems])
+  }
 
   function emit(event: ConnectorEvent) {
     listeners.forEach((l) => l(event))
   }
 
+  /** Build a reverse map from dataSlot index → property name for the current window type. */
+  function getDataSlotMap(type: string): Record<number, string> | null {
+    const typeDef = getInventoryType(type)
+    if (!typeDef?.properties) return null
+    const map: Record<number, string> = {}
+    for (const [name, def] of Object.entries(typeDef.properties)) {
+      map[def.dataSlot] = name
+    }
+    return map
+  }
+
   /**
    * 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
+    // In hotbarOnly mode, always build a player-like state (never the container itself)
+    const win = hotbarOnly ? null : bot.currentWindow
     if (win) {
-      return {
+      const title = formatTitle ? formatTitle(win.title) : win.title
+      const state: InventoryWindowState = {
         windowId: win.id,
         type: win.type ?? 'unknown',
-        title: win.title,
+        title,
         slots: botSlotsToSlotStates(win.slots, convert),
-        heldItem: convert(bot.heldItem),
+        heldItem: convert(win.selectedItem),
       }
+      if (Object.keys(windowProperties).length > 0) {
+        state.properties = { ...windowProperties }
+      }
+      return state
+    }
+    // No open container (or hotbarOnly) — expose the player inventory.
+    // When a container IS open in hotbarOnly mode, mineflayer doesn't update
+    // bot.inventory.slots in real time — read player slots from the container
+    // window instead (using inventoryStart offset).
+    const containerWin = hotbarOnly ? bot.currentWindow : null
+    const invStart: number | null = containerWin ? (containerWin as any).inventoryStart ?? null : null
+    const readSlot = (playerSlotIndex: number) => {
+      if (containerWin && invStart != null) {
+        // Map player inventory index to container window index
+        const containerIndex = playerSlotIndex - 9 + invStart
+        return convert(containerWin.slots[containerIndex])
+      }
+      return convert(bot.inventory.slots[playerSlotIndex])
     }
-    // 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]) })
+    for (let i = 9; i <= 35; i++) invSlots.push({ index: i, item: readSlot(i) })
     // Slots 36–44: hotbar
-    for (let i = 36; i <= 44; i++) invSlots.push({ index: i, item: convert(bot.inventory.slots[i]) })
+    for (let i = 36; i <= 44; i++) invSlots.push({ index: i, item: readSlot(i) })
     // Slot 45: offhand
     invSlots.push({ index: 45, item: convert(bot.inventory.slots[45]) })
     return {
@@ -154,7 +285,7 @@ export function createMineflayerConnector(bot: MineflayerBot, options?: Mineflay
       type: 'player',
       title: undefined,
       slots: invSlots,
-      heldItem: convert(bot.heldItem),
+      heldItem: convert((bot.inventory as any).selectedItem ?? null),
     }
   }
 
@@ -178,14 +309,91 @@ export function createMineflayerConnector(bot: MineflayerBot, options?: Mineflay
   const onSetSlot = () => {
     const state = buildWindowState()
     if (state) emit({ type: 'windowUpdate', state })
-    else {
-      emit({ type: 'playerUpdate', state: buildPlayerState() })
+    emit({ type: 'playerUpdate', state: buildPlayerState() })
+  }
+
+  const onHeldItemChanged = () => {
+    emit({ type: 'playerUpdate', state: buildPlayerState() })
+  }
+
+  // Mineflayer emits 'setSlot:${windowId}' (e.g. 'setSlot:0'), not plain 'setSlot'.
+  // Always listen on window 0 (player inventory) and dynamically track container windows.
+  // Also listen for 'heldItemChanged' to track active hotbar slot changes.
+  let currentWindowSlotEvent: string | null = null
+  let currentWindowItemsEvent: string | null = null
+
+  const onWindowOpenInternal = () => {
+    const win = bot.currentWindow
+    if (win) {
+      currentWindowSlotEvent = `setSlot:${win.id}`
+      currentWindowItemsEvent = `setWindowItems:${win.id}`
+      bot.on(currentWindowSlotEvent as any, onSetSlot)
+      bot.on(currentWindowItemsEvent as any, scheduleSlotUpdate)
+      // Reset properties and resolve window type for property mapping
+      for (const key of Object.keys(windowProperties)) delete windowProperties[key]
+      currentWindowType = win.type ?? null
+      ;(win as any).on('updateSlot', scheduleSlotUpdate)
+    }
+    if (!hotbarOnly) onWindowOpen()
+  }
+
+  const onWindowCloseInternal = () => {
+    const closingWin = bot.currentWindow
+    if (closingWin) {
+      ;(closingWin as any).off('updateSlot', scheduleSlotUpdate)
+    }
+    if (currentWindowSlotEvent) {
+      bot.off(currentWindowSlotEvent as any, onSetSlot)
+      currentWindowSlotEvent = null
+    }
+    if (currentWindowItemsEvent) {
+      bot.off(currentWindowItemsEvent as any, scheduleSlotUpdate)
+      currentWindowItemsEvent = null
+    }
+    currentWindowType = null
+    for (const key of Object.keys(windowProperties)) delete windowProperties[key]
+    if (!hotbarOnly) onWindowClose()
+    // In hotbar mode, emit a windowUpdate after close so the hotbar
+    // re-syncs from bot.inventory (now freshly copied back by mineflayer)
+    if (hotbarOnly) scheduleSlotUpdate()
+  }
+
+  // Handle craft_progress_bar packets (furnace progress, enchant levels, etc.)
+  const onCraftProgressBar = (packet: { windowId: number; property: number; value: number }) => {
+    const win = bot.currentWindow
+    if (!win || packet.windowId !== win.id || !currentWindowType) return
+    const slotMap = getDataSlotMap(currentWindowType)
+    if (!slotMap) return
+    const propName = slotMap[packet.property]
+    if (propName) {
+      windowProperties[propName] = packet.value
+      const state = buildWindowState()
+      if (state) emit({ type: 'windowUpdate', state })
     }
   }
 
-  bot.on('windowOpen', onWindowOpen)
-  bot.on('windowClose', onWindowClose)
-  bot.on('setSlot', onSetSlot)
+  // Listen to Window-level slot changes to catch optimistic acceptClick updates
+  // that don't fire bot-level events (needed for multi-connector architecture)
+  let slotUpdateScheduled = false
+  const scheduleSlotUpdate = () => {
+    if (slotUpdateScheduled) return
+    slotUpdateScheduled = true
+    queueMicrotask(() => {
+      slotUpdateScheduled = false
+      onSetSlot()
+    })
+  }
+
+  ;(bot.inventory as any).on('updateSlot', scheduleSlotUpdate)
+
+  bot.on('windowOpen', onWindowOpenInternal)
+  bot.on('windowClose', onWindowCloseInternal)
+  bot.on('setSlot:0' as any, onSetSlot)
+  bot.on('setWindowItems:0' as any, scheduleSlotUpdate)
+  bot.on('heldItemChanged' as any, onHeldItemChanged)
+  if (!hotbarOnly && ext._client) {
+    ext._client.on?.('craft_progress_bar' as any, onCraftProgressBar as any)
+  }
 
   async function openPlayerInventory() {
     const vehicle = bot.vehicle
@@ -255,57 +463,123 @@ export function createMineflayerConnector(bot: MineflayerBot, options?: Mineflay
     openPlayerInventory,
 
     sendAction: async (action: InventoryAction) => {
-      // Hotbar "open inventory" button — delegates to openPlayerInventory()
-      if (action.type === 'open-inventory') {
-        await openPlayerInventory()
-        return
-      }
-
-      const win = bot.currentWindow
-
-      if (action.type === 'trade' && win) {
-        if (ext.trade && isVillagerWindow(win)) {
-          await ext.trade(win, action.tradeIndex, 1)
-        } else if (isVillagerWindow(win)) {
-          await win.trade(action.tradeIndex, 1)
+      try {
+        // Hotbar "open inventory" button — delegates to openPlayerInventory()
+        if (action.type === 'open-inventory') {
+          await openPlayerInventory()
+          return
         }
-        return
-      }
-
-      if (action.type === 'enchant' && win && isEnchantmentTableWindow(win)) {
-        await win.enchant(action.enchantIndex)
-        return
-      }
-
-      if (action.type === 'rename' && win && isAnvilWindow(win)) {
-        const w = win as { slots?: unknown[]; findInventoryItem?: (id: number) => unknown; rename: (item: unknown, name: string) => Promise<void> }
-        const inputSlot = w.slots?.[0] as { type?: number; metadata?: number; count?: number; nbt?: unknown } | null
-        const item = inputSlot?.type ? (w.findInventoryItem?.(inputSlot.type) ?? inputSlot) : null
-        if (item) await w.rename(item, action.text)
-        return
-      }
+  
+        const win = bot.currentWindow
+  
+        if (action.type === 'trade' && win) {
+          if (ext.trade && isVillagerWindow(win)) {
+            await ext.trade(win, action.tradeIndex, 1)
+          } else if (isVillagerWindow(win)) {
+            await win.trade(action.tradeIndex, 1)
+          }
+          return
+        }
+  
+        if (action.type === 'enchant' && win && isEnchantmentTableWindow(win)) {
+          await win.enchant(action.enchantIndex)
+          return
+        }
+  
+        if (action.type === 'rename' && win && isAnvilWindow(win)) {
+          const w = win as { slots?: unknown[]; findInventoryItem?: (id: number) => unknown; rename: (item: unknown, name: string) => Promise<void> }
+          const inputSlot = w.slots?.[0] as { type?: number; metadata?: number; count?: number; nbt?: unknown } | null
+          const item = inputSlot?.type ? (w.findInventoryItem?.(inputSlot.type) ?? inputSlot) : null
+          if (item) await w.rename(item, action.text)
+          return
+        }
+  
+        if (action.type === 'beacon' && win && isBeaconWindow(win)) {
+          if (typeof win.setBeaconEffects === 'function') {
+            await win.setBeaconEffects(action.primaryEffect, action.secondaryEffect)
+          } else if (ext._client) {
+            ext._client.write('beacon_effect', {
+              primaryEffect: action.primaryEffect,
+              secondaryEffect: action.secondaryEffect,
+            })
+          }
+          return
+        }
+  
+        if (action.type === 'click' && action.mode === 'double') {
+          // bot.clickWindow() throws for mode=6 (prismarine-windows doubleClick is unimplemented).
+          // Send raw window_click packet directly, same approach as drag (mode=5).
+          if (!ext._client) return
+          const windowId = bot.currentWindow ? bot.currentWindow.id : 0
 
-      if (action.type === 'beacon' && win && isBeaconWindow(win)) {
-        if (typeof win.setBeaconEffects === 'function') {
-          await win.setBeaconEffects(action.primaryEffect, action.secondaryEffect)
-        } else if (ext._client) {
-          ext._client.write('beacon_effect', {
-            primaryEffect: action.primaryEffect,
-            secondaryEffect: action.secondaryEffect,
+          ext._client.write('window_click', {
+            windowId,
+            stateId: dragStateId,
+            slot: action.slotIndex,
+            mouseButton: 0,
+            mode: 6,
+            changedSlots: [],
+            cursorItem: { present: false } as any,
           })
+          dragStateId++
+          return
         }
-        return
-      }
-
-      if (action.type === 'click') {
-        const [mouseButton, mode] = modeFromAction(action)
-        await bot.clickWindow(action.slotIndex, mouseButton, mode)
-      } else if (action.type === 'drop') {
-        await bot.clickWindow(action.slotIndex, action.all ? 1 : 0, 4)
-      } else if (action.type === 'close') {
-        if (win) bot.closeWindow(win)
-      } else if (action.type === 'hotbar-swap') {
-        await bot.clickWindow(action.slotIndex, action.hotbarSlot, 2)
+  
+        if (action.type === 'click') {
+          const [mouseButton, mode] = modeFromAction(action)
+          await bot.clickWindow(action.slotIndex, mouseButton, mode)
+          onSetSlot()
+        } else if (action.type === 'drag') {
+          // bot.clickWindow() throws for mode=5 (prismarine-windows dragClick is unimplemented).
+          // Send raw window_click packets directly via _client.write.
+          if (!ext._client) return
+          const isRight = action.button === 'right'
+          const startButton = isRight ? 4 : 0
+          const slotButton = isRight ? 5 : 1
+          const endButton = isRight ? 6 : 2
+          const windowId = bot.currentWindow ? bot.currentWindow.id : 0
+          const cursorItem = { present: false } as any
+  
+          isDraggingRaw = true
+          const writeClick = (slot: number, mouseButton: number) => {
+            ext._client!.write('window_click', {
+              windowId,
+              stateId: dragStateId,
+              slot,
+              mouseButton,
+              mode: 5,
+              changedSlots: [],
+              cursorItem,
+            })
+            dragStateId++
+          }
+  
+          writeClick(-999, startButton)
+          for (const slot of action.slots) {
+            writeClick(slot, slotButton)
+          }
+          writeClick(-999, endButton)
+          isDraggingRaw = false
+        } else if (action.type === 'drop') {
+          await bot.clickWindow(action.slotIndex, action.all ? 1 : 0, 4)
+          onSetSlot()
+        } else if (action.type === 'close') {
+          if (win) {
+            bot.closeWindow(win)
+          } else {
+            // Player inventory (synthetic) — send close_window so server drops cursor items
+            if (ext._client) {
+              ext._client.write('close_window', { windowId: 0 })
+            }
+            ;(bot.inventory as any).selectedItem = null
+          }
+        } else if (action.type === 'hotbar-swap') {
+          await bot.clickWindow(action.slotIndex, action.hotbarSlot, 2)
+          onSetSlot()
+        }
+      } catch (err) {
+        const detail = 'slotIndex' in action ? ` slot=${(action as any).slotIndex}` : ''
+        console.error(`[minecraft-inventory] sendAction "${action.type}"${detail} failed:`, err)
       }
     },
 
@@ -318,9 +592,29 @@ export function createMineflayerConnector(bot: MineflayerBot, options?: Mineflay
       listeners.add(listener)
       return () => {
         listeners.delete(listener)
-        bot.off('windowOpen', onWindowOpen)
-        bot.off('windowClose', onWindowClose)
-        bot.off('setSlot', onSetSlot)
+        bot.off('windowOpen', onWindowOpenInternal)
+        bot.off('windowClose', onWindowCloseInternal)
+        bot.off('setSlot:0' as any, onSetSlot)
+        bot.off('setWindowItems:0' as any, scheduleSlotUpdate)
+        bot.off('heldItemChanged' as any, onHeldItemChanged)
+        if (ext._client?.off) {
+          if (!hotbarOnly) {
+            ext._client.off('craft_progress_bar' as any, onCraftProgressBar as any)
+          }
+          for (const [event, listener] of rawPacketListeners) {
+            ext._client.off(event as any, listener as any)
+          }
+        }
+        if (currentWindowSlotEvent) {
+          bot.off(currentWindowSlotEvent as any, onSetSlot)
+        }
+        if (currentWindowItemsEvent) {
+          bot.off(currentWindowItemsEvent as any, scheduleSlotUpdate)
+        }
+        ;(bot.inventory as any).off('updateSlot', scheduleSlotUpdate)
+        if (bot.currentWindow) {
+          ;(bot.currentWindow as any).off('updateSlot', scheduleSlotUpdate)
+        }
       }
     },
   }

package/src/connector/types.ts

@@ -28,6 +28,7 @@ export interface MineflayerBotWindow {
   type: string
   title?: string
   slots: Array<{ type: number; count: number; metadata?: number; nbt?: unknown } | null>
+  selectedItem?: { type: number; count: number; metadata?: number; nbt?: unknown } | null
 }
 
 /** Villager window from bot.openVillager() — has trade() */

package/src/context/InventoryContext.tsx

@@ -42,6 +42,9 @@ export interface InventoryContextValue {
   /** Pending first digit for P-key slot number entry */
   pKeyDigit: string
   setPKeyDigit: (d: string) => 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>
 }
 
 const InventoryContext = createContext<InventoryContextValue | null>(null)
@@ -90,6 +93,10 @@ export function InventoryProvider({ connector, children, noDragSpread = false }:
   const dragButtonRef = useRef(dragButton)
   dragButtonRef.current = dragButton
 
+  // Set to true when endDrag fires; cleared on the next mouseDown in Slot.
+  // Prevents spurious mouseUp events from sending unwanted clicks after a drag.
+  const dragEndedRef = useRef(false)
+
   useEffect(() => {
     if (!connector) return
     setWindowState(connector.getWindowState())
@@ -159,6 +166,7 @@ export function InventoryProvider({ connector, children, noDragSpread = false }:
 
   const startDrag = useCallback((slotIndex: number, button: 'left' | 'right') => {
     if (noDragSpread) return
+    dragEndedRef.current = false
     setIsDragging(true)
     setDragButton(button)
     setDragSlots([slotIndex])
@@ -175,6 +183,7 @@ export function InventoryProvider({ connector, children, noDragSpread = false }:
   }, [computeDragPreview, dragButton, heldItem, windowState])
 
   const endDrag = useCallback(() => {
+    dragEndedRef.current = true
     setDragSlots((slots) => {
       const button = dragButtonRef.current
       const held = heldItemRef.current
@@ -196,7 +205,6 @@ export function InventoryProvider({ connector, children, noDragSpread = false }:
           })
           if (compatibleSlots.length > 0) {
             const perSlot = Math.floor(held.count / compatibleSlots.length)
-            // Vanilla behavior: if perSlot=0 (more slots than items), nothing is distributed
             if (perSlot > 0) {
               let totalPlaced = 0
               for (const idx of compatibleSlots) {
@@ -302,6 +310,7 @@ export function InventoryProvider({ connector, children, noDragSpread = false }:
     setFocusedSlot,
     pKeyDigit,
     setPKeyDigit,
+    dragEndedRef,
   }
 
   return <InventoryContext.Provider value={value}>{children}</InventoryContext.Provider>

package/src/registry/inventories.ts

@@ -95,6 +95,7 @@ export const inventoryDefinitions = makeInventoryDefinitions({
     backgroundWidth: 176,
     backgroundHeight: 166,
     entityDisplay: { x: 26, y: 8, width: 49, height: 70 },
+    entityPlaceholder: 'player',
     slots: [
       // Result (0)
       { x: 154, y: 28, group: 'result', resultSlot: true },
@@ -552,6 +553,7 @@ export const inventoryDefinitions = makeInventoryDefinitions({
     backgroundWidth: 176,
     backgroundHeight: 166,
     entityDisplay: { x: 26, y: 18, width: 52, height: 52 },
+    entityPlaceholder: 'horse',
     slots: [
       // Saddle (0); slot 1 (horse armor) is absent for donkeys — gap is intentional
       { x: 8, y: 18, group: 'saddle', label: 'Saddle' },
@@ -568,6 +570,7 @@ export const inventoryDefinitions = makeInventoryDefinitions({
     backgroundWidth: 176,
     backgroundHeight: 166,
     entityDisplay: { x: 26, y: 18, width: 52, height: 52 },
+    entityPlaceholder: 'llama',
     slots: [
       { x: 8, y: 18, group: 'saddle', label: 'Carpet' },
       ...gridSlots(5, 3, 80, 18, 'chest').map((s, i) => i === 0 ? { ...s, index: 2 } : s),

package/src/types.ts

@@ -177,6 +177,11 @@ export interface InventoryTypeDefinition {
   extraData?: Record<string, unknown>
   /** Bounds for the entity preview area (e.g. player model, horse model). */
   entityDisplay?: EntityDisplayArea
+  /**
+   * Bundled placeholder image for the entity panel when `renderEntity` is not set.
+   * Maps to files under `src/assets/entities/`.
+   */
+  entityPlaceholder?: 'player' | 'horse' | 'llama'
   /**
    * When set, InventoryBackground will canvas-stitch the background texture:
    * top (title + N container rows) + bottom (player inventory section) from