minecraft-inventory 0.1.4 → 0.1.5

package/package.json

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

package/src/components/InventoryWindow/InventoryBackground.tsx

@@ -1,54 +1,24 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useTextures } from '../../context/TextureContext'
 import { useScale } from '../../context/ScaleContext'
 import { MessageFormattedString } from '../Text/MessageFormattedString'
 import type { InventoryTypeDefinition } from '../../registry'
 
 /**
- * For generic_9xN (N < 6): canvas-stitch the 6-row generic_54 texture.
- * Takes the top (title + N rows) and bottom (player-inventory section = last 96px)
- * from the source and composes them into a data URL of the correct output height.
+ * For generic_9xN (N < 6): CSS-stitch the 6-row generic_54 texture using two
+ * overlapping img elements with objectPosition to clip top and bottom portions.
+ * No canvas or async loading needed — works with any URL including remote ones.
  *
- * The source texture (generic_54.png, 176×222) layout:
- *   y=0..16   — title bar (17px)
- *   y=17..124 — 6 container rows (6×18 = 108px)
- *   y=126..221 — player inventory section (96px)
+ * The source texture (generic_54.png, 176×222) fixed layout:
+ *   y=0   ..16  — title bar (17px)
+ *   y=17  ..124 — 6 container rows (6×18 = 108px)
+ *   y=125 ..221 — player inventory section (97px)
+ *
+ * Output height = topH + playerH = N*18+17 + 97 = N*18+114.
+ * Registry backgroundHeight must equal N*18+114 for the div to match.
  */
-function useStitchedTexture(srcUrl: string, containerRows: number): string | null {
-  const [dataUrl, setDataUrl] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (containerRows >= 6) {
-      setDataUrl(srcUrl)
-      return
-    }
-    let cancelled = false
-    const img = new window.Image()
-    img.crossOrigin = 'anonymous'
-    img.onload = () => {
-      if (cancelled) return
-      const srcW = 176
-      const srcH = img.naturalHeight // 222 for generic_54
-      const topH = containerRows * 18 + 17
-      const playerH = 96
-      const canvas = document.createElement('canvas')
-      canvas.width = srcW
-      canvas.height = topH + playerH
-      const ctx = canvas.getContext('2d')
-      if (!ctx) { setDataUrl(srcUrl); return }
-      // Top: title + N container rows
-      ctx.drawImage(img, 0, 0, srcW, topH, 0, 0, srcW, topH)
-      // Bottom: player inventory section (last 96px of source)
-      ctx.drawImage(img, 0, srcH - playerH, srcW, playerH, 0, topH, srcW, playerH)
-      setDataUrl(canvas.toDataURL())
-    }
-    img.onerror = () => { if (!cancelled) setDataUrl(srcUrl) }
-    img.src = srcUrl
-    return () => { cancelled = true }
-  }, [srcUrl, containerRows])
-
-  return dataUrl
-}
+const SRC_PLAYER_Y = 17 + 6 * 18 // 125 — fixed position where player section starts
+const PLAYER_H = 222 - SRC_PLAYER_Y // 97px — height of player section in generic_54.png
 
 interface InventoryBackgroundProps {
   definition: InventoryTypeDefinition
@@ -66,20 +36,24 @@ export function InventoryBackground({
   const textures = useTextures()
   const { scale } = useScale()
 
-  const rawBgUrl = textures.getGuiTextureUrl(definition.backgroundTexture)
-  // For generic_9xN (containerRows defined and < 6): canvas-stitch the texture
-  const stitchedUrl = useStitchedTexture(rawBgUrl, definition.containerRows ?? 6)
-  const bgUrl = definition.containerRows != null && definition.containerRows < 6
-    ? stitchedUrl   // may be null while stitching
-    : rawBgUrl
+  const bgUrl = textures.getGuiTextureUrl(definition.backgroundTexture)
+  const isStitched = definition.containerRows != null && definition.containerRows < 6
 
   const w = definition.backgroundWidth * scale
   const h = definition.backgroundHeight * scale
 
-  // Source dimensions from definition (e.g., 176x166) — clip to this region from texture
   const srcW = definition.backgroundWidth
   const srcH = definition.backgroundHeight
 
+  const sharedImgStyle: React.CSSProperties = {
+    display: 'block',
+    width: srcW,
+    imageRendering: 'pixelated',
+    pointerEvents: 'none',
+    userSelect: 'none',
+    objectFit: 'none',
+  }
+
   return (
     <div
       className="mc-inv-background"
@@ -93,42 +67,55 @@ export function InventoryBackground({
         outlineOffset: 0,
       }}
     >
-      {/* Background texture wrapper — clips source to srcW×srcH, then scales */}
-      <div
-        className="mc-inv-background-wrapper"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: srcW,
-          height: srcH,
-          overflow: 'hidden',
-          transform: `scale(${scale})`,
-          transformOrigin: 'top left',
-        }}
-      >
-        {/* Background texture — render at natural size, clipped by wrapper overflow */}
-        {bgUrl && (
-        <img
-          className="mc-inv-background-image"
-          src={bgUrl}
-          alt=""
-          aria-hidden
+      {isStitched ? (
+        /* CSS two-part stitch: clips top (title+N rows) and bottom (player section)
+           from the same source image using objectPosition — no canvas/async needed. */
+        <div
+          className="mc-inv-background-wrapper"
           style={{
-            display: 'block',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            transform: `scale(${scale})`,
+            transformOrigin: 'top left',
+          }}
+        >
+          {/* Top: title bar + N container rows */}
+          <div style={{ width: srcW, height: definition.containerRows! * 18 + 17, overflow: 'hidden' }}>
+            <img className="mc-inv-background-image" src={bgUrl} alt="" aria-hidden draggable={false}
+              style={{ ...sharedImgStyle, objectPosition: '0 0' }} />
+          </div>
+          {/* Bottom: player inventory section starting at SRC_PLAYER_Y in source */}
+          <div style={{ width: srcW, height: PLAYER_H, overflow: 'hidden' }}>
+            <img src={bgUrl} alt="" aria-hidden draggable={false}
+              style={{ ...sharedImgStyle, objectPosition: `0 -${SRC_PLAYER_Y}px` }} />
+          </div>
+        </div>
+      ) : (
+        /* Standard: clip source to srcW×srcH via overflow:hidden, then scale */
+        <div
+          className="mc-inv-background-wrapper"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
             width: srcW,
             height: srcH,
-            imageRendering: 'pixelated',
-            pointerEvents: 'none',
-            userSelect: 'none',
-            // Clip to top-left srcW×srcH region (if texture is larger)
-            objectFit: 'none',
-            objectPosition: '0 0',
+            overflow: 'hidden',
+            transform: `scale(${scale})`,
+            transformOrigin: 'top left',
           }}
-          draggable={false}
-        />
-        )}
-      </div>
+        >
+          <img
+            className="mc-inv-background-image"
+            src={bgUrl}
+            alt=""
+            aria-hidden
+            draggable={false}
+            style={{ ...sharedImgStyle, objectPosition: '0 0' }}
+          />
+        </div>
+      )}
 
       {/* Title */}
       {title !== undefined && (

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

@@ -244,6 +244,9 @@ export function Slot({
       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)
 
@@ -319,6 +322,9 @@ 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,

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

@@ -35,6 +35,9 @@ function makeSlotConverter(itemMapper?: MineflayerConnectorOptions['itemMapper']
       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
   }

package/src/context/InventoryContext.tsx

@@ -137,12 +137,11 @@ export function InventoryProvider({ connector, children, noDragSpread = false }:
       })
       if (compatibleSlots.length === 0) return preview
       const perSlot = Math.floor(held.count / compatibleSlots.length)
-      let remainder = held.count % compatibleSlots.length
+      // Vanilla behavior: if perSlot=0 (more slots than items), nothing is distributed
+      if (perSlot === 0) return preview
       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)
+        const total = Math.min(existingCount + perSlot, maxStack)
         preview.set(idx, { count: total })
       }
     } else {
@@ -197,21 +196,26 @@ export function InventoryProvider({ connector, children, noDragSpread = false }:
           })
           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 } })
+            // Vanilla behavior: if perSlot=0 (more slots than items), nothing is distributed
+            if (perSlot > 0) {
+              let totalPlaced = 0
+              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 = Math.min(perSlot, maxStack - existingCount)
+                totalPlaced += add
+                const newCount = existingCount + add
+                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 })
+              const remaining = held.count - totalPlaced
+              if (remaining > 0) setHeldItemState({ ...held, count: remaining })
+              else setHeldItemState(null)
             }
-            if (ws) setWindowState({ ...ws, slots: newSlots })
-            setHeldItemState(null)
           }
         } else {
           // Right-click drag: place 1 per slot
@@ -256,6 +260,19 @@ export function InventoryProvider({ connector, children, noDragSpread = false }:
     [windowState],
   )
 
+  // Expose state to window for easier debugging from browser DevTools.
+  // Access via: window.__mcInv
+  useEffect(() => {
+    ;(window as unknown as Record<string, unknown>).__mcInv = {
+      get windowState() { return windowStateRef.current },
+      get heldItem() { return heldItemRef.current },
+      get dragSlots() { return dragSlots },
+      get isDragging() { return isDragging },
+      get focusedSlot() { return focusedSlot },
+      get pKeyActive() { return pKeyActive },
+    }
+  })
+
   const value: InventoryContextValue = {
     windowState,
     playerState,

package/src/index.tsx

@@ -49,7 +49,7 @@ export type {
 export type { ActionLogEntry, DemoConnectorOptions } from './connector/demo'
 
 // Registry
-export { registerInventoryType, getInventoryType, getAllInventoryTypes } from './registry'
+export { registerInventoryType, registerTypeAlias, getInventoryType, getAllInventoryTypes } from './registry'
 export type { InventoryTypeDefinition, WindowType } from './registry'
 
 // Types

package/src/registry/index.ts

@@ -5,12 +5,41 @@ const registry = new Map<string, InventoryTypeDefinition>(
   Object.entries(inventoryDefinitions),
 )
 
+/**
+ * Maps alternative names/aliases to canonical inventory type names.
+ * Both the alias and the canonical name resolve to the same definition.
+ *
+ * Add entries here to support shorthand or legacy type identifiers.
+ */
+const typeAliases: Record<string, string> = {
+  // Shorthand aliases
+  crafting3x3: 'crafting_table',
+  crafting: 'crafting_table',
+  chest: 'chest',               // already canonical, listed for clarity
+  // Protocol-level minecraft: prefix stripping is handled in getInventoryType
+}
+
 export function registerInventoryType(def: InventoryTypeDefinition): void {
   registry.set(def.name, def)
 }
 
+/**
+ * Resolve an inventory type name or alias to its definition.
+ * Handles:
+ *  - Exact matches (e.g. "crafting_table")
+ *  - Aliases defined in `typeAliases` (e.g. "crafting3x3" → "crafting_table")
+ *  - "minecraft:" namespace prefix (e.g. "minecraft:generic_9x3" → "generic_9x3")
+ */
 export function getInventoryType(name: string): InventoryTypeDefinition | undefined {
-  return registry.get(name)
+  // Strip "minecraft:" namespace prefix if present
+  const stripped = name.startsWith('minecraft:') ? name.slice('minecraft:'.length) : name
+  // Resolve alias if defined
+  const canonical = typeAliases[stripped] ?? stripped
+  return registry.get(canonical)
+}
+
+export function registerTypeAlias(alias: string, canonical: string): void {
+  typeAliases[alias] = canonical
 }
 
 export function getAllInventoryTypes(): InventoryTypeDefinition[] {

package/src/registry/inventories.ts

@@ -127,15 +127,16 @@ export const inventoryDefinitions = makeInventoryDefinitions({
 
   // generic_9x1..9x6 all use generic_54.png (the 6-row chest texture, 176×222).
   // InventoryBackground canvas-stitches rows < 6: takes the top N rows from the source
-  // then the player-inventory section (bottom 96px) and composes them into the output.
-  // Slot formula: containerRows=N → container at y=18, player at y = N*18+30.
-  // backgroundHeight = N*18 + 113  (96px player section + 17px title).
+  // (y=0..topH-1, where topH = N*18+17) then the player-inventory section starting at
+  // y=SRC_PLAYER_Y=125 and composites them.
+  // Output height formula: N*18+17 + (222-125) = N*18+17+97 = N*18+114.
+  // Slot formula: container at y=18, player at y = N*18+30  (13px frame into player section).
   generic_9x1: {
     name: 'generic_9x1',
     title: 'Container',
     backgroundTexture: '1.21.11/textures/gui/container/generic_54.png',
     backgroundWidth: 176,
-    backgroundHeight: 131, // 1*18 + 113
+    backgroundHeight: 132, // 1*18 + 114
     containerRows: 1,
     slots: [
       ...gridSlots(9, 1, 8, 18, 'container'),
@@ -148,7 +149,7 @@ export const inventoryDefinitions = makeInventoryDefinitions({
     title: 'Container',
     backgroundTexture: '1.21.11/textures/gui/container/generic_54.png',
     backgroundWidth: 176,
-    backgroundHeight: 149, // 2*18 + 113
+    backgroundHeight: 150, // 2*18 + 114
     containerRows: 2,
     slots: [
       ...gridSlots(9, 2, 8, 18, 'container'),
@@ -161,7 +162,7 @@ export const inventoryDefinitions = makeInventoryDefinitions({
     title: 'Container',
     backgroundTexture: '1.21.11/textures/gui/container/generic_54.png',
     backgroundWidth: 176,
-    backgroundHeight: 167, // 3*18 + 113
+    backgroundHeight: 168, // 3*18 + 114
     containerRows: 3,
     playerInventoryOffset: { x: 8, y: 84 },
     slots: [
@@ -175,7 +176,7 @@ export const inventoryDefinitions = makeInventoryDefinitions({
     title: 'Container',
     backgroundTexture: '1.21.11/textures/gui/container/generic_54.png',
     backgroundWidth: 176,
-    backgroundHeight: 185, // 4*18 + 113
+    backgroundHeight: 186, // 4*18 + 114
     containerRows: 4,
     slots: [
       ...gridSlots(9, 4, 8, 18, 'container'),
@@ -188,7 +189,7 @@ export const inventoryDefinitions = makeInventoryDefinitions({
     title: 'Container',
     backgroundTexture: '1.21.11/textures/gui/container/generic_54.png',
     backgroundWidth: 176,
-    backgroundHeight: 203, // 5*18 + 113
+    backgroundHeight: 204, // 5*18 + 114
     containerRows: 5,
     slots: [
       ...gridSlots(9, 5, 8, 18, 'container'),
@@ -201,7 +202,7 @@ export const inventoryDefinitions = makeInventoryDefinitions({
     title: 'Container',
     backgroundTexture: '1.21.11/textures/gui/container/generic_54.png',
     backgroundWidth: 176,
-    backgroundHeight: 222, // full 6-row texture, no stitching needed
+    backgroundHeight: 222, // full 6-row texture, no stitching needed (N*18+114 = 222)
     playerInventoryOffset: { x: 8, y: 140 },
     slots: [
       ...gridSlots(9, 6, 8, 18, 'container'),

package/src/types.ts

@@ -19,6 +19,12 @@ export interface ItemStack {
    * Example: `"item/dye_black"` or `"entity/spider/spider"`
    */
   textureKey?: string
+  /**
+   * Arbitrary debug identifier exposed as a `data-debug` attribute on the slot element.
+   * The mineflayer connector sets this to `"<type>:<metadata>"` by default, making it easy
+   * to inspect raw item IDs in browser DevTools without touching React internals.
+   */
+  debugKey?: string
 }
 
 export interface SlotState {