minecraft-inventory 0.1.22 → 0.1.24

package/package.json

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

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -310,7 +310,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.22
+            INV 0.1.24
           </a>
         )}
 

package/src/components/InventoryWindow/EnchantmentOptions.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useInventoryContext } from '../../context/InventoryContext'
+import { useTextures } from '../../context/TextureContext'
 import { useScale } from '../../context/ScaleContext'
 
 const ENCHANTMENT_NAMES: Record<number, string> = {
@@ -59,6 +60,8 @@ function toRoman(num: number): string {
   return result
 }
 
+const SPRITE_BASE = '1.21.11/textures/gui/sprites/container/enchanting_table'
+
 interface EnchantmentOptionsProps {
   properties: Record<string, number>
   x: number
@@ -72,8 +75,27 @@ const OPTION_KEYS = [
 ]
 
 export function EnchantmentOptions({ properties, x, y }: EnchantmentOptionsProps) {
-  const { sendAction } = useInventoryContext()
+  const { sendAction, resolveEnchantmentName } = useInventoryContext()
+  const textures = useTextures()
   const { scale } = useScale()
+  const [hoveredSlot, setHoveredSlot] = useState<number | null>(null)
+
+  const getName = (id: number): string => {
+    if (id < 0) return '???'
+    return resolveEnchantmentName?.(id) ?? ENCHANTMENT_NAMES[id] ?? `Enchant #${id}`
+  }
+
+  const getSlotSprite = (disabled: boolean, hovered: boolean) => {
+    if (disabled) return textures.getGuiTextureUrl(`${SPRITE_BASE}/enchantment_slot_disabled.png`)
+    if (hovered) return textures.getGuiTextureUrl(`${SPRITE_BASE}/enchantment_slot_highlighted.png`)
+    return textures.getGuiTextureUrl(`${SPRITE_BASE}/enchantment_slot.png`)
+  }
+
+  const getLevelSprite = (slot: number, disabled: boolean) => {
+    const n = slot + 1
+    if (disabled) return textures.getGuiTextureUrl(`${SPRITE_BASE}/level_${n}_disabled.png`)
+    return textures.getGuiTextureUrl(`${SPRITE_BASE}/level_${n}.png`)
+  }
 
   return (
     <div
@@ -90,36 +112,100 @@ export function EnchantmentOptions({ properties, x, y }: EnchantmentOptionsProps
         const level = properties[levelKey] ?? 0
         const enchId = properties[idKey] ?? -1
         const levelClue = properties[clueKey] ?? 0
-        const name = ENCHANTMENT_NAMES[enchId] ?? (enchId >= 0 ? `Enchant #${enchId}` : '???')
         const disabled = level <= 0
+        const hovered = hoveredSlot === i && !disabled
+        const name = getName(enchId)
         const levelSuffix = levelClue > 0 ? ` ${toRoman(levelClue)}` : ''
+        // Vanilla colors
+        const nameColor = disabled ? '#342F25' : hovered ? '#FFFF80' : '#685E4A'
+        const costColor = disabled ? '#407F10' : '#80FF20'
 
         return (
           <div
             key={i}
             onClick={() => !disabled && sendAction({ type: 'enchant', enchantIndex: slot })}
+            onMouseEnter={() => setHoveredSlot(i)}
+            onMouseLeave={() => setHoveredSlot(null)}
             style={{
+              position: 'relative',
               width: 108 * scale,
               height: 19 * scale,
-              display: 'flex',
-              alignItems: 'center',
-              padding: `0 ${4 * scale}px`,
-              gap: 4 * scale,
-              background: disabled ? 'rgba(0,0,0,0.3)' : 'rgba(0,60,0,0.5)',
-              cursor: disabled ? 'not-allowed' : 'pointer',
-              border: `${scale}px solid ${disabled ? '#333333' : '#446644'}`,
-              boxSizing: 'border-box',
-              fontSize: 6 * scale,
-              fontFamily: "'Minecraft', monospace",
-              color: disabled ? '#555555' : '#80c060',
+              cursor: disabled ? 'default' : 'pointer',
+              overflow: 'hidden',
             }}
           >
-            <span style={{ color: disabled ? '#555' : '#558855', fontWeight: 'bold' }}>
-              {level}
-            </span>
-            <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {disabled ? '' : `${name}${levelSuffix}`}
-            </span>
+            {/* Background sprite */}
+            <img
+              src={getSlotSprite(disabled, hovered)}
+              alt=""
+              aria-hidden
+              draggable={false}
+              style={{
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: 108 * scale,
+                height: 19 * scale,
+                imageRendering: 'pixelated',
+              }}
+            />
+            {/* Level icon (16×16 at +1,+1) */}
+            {!disabled && (
+              <img
+                src={getLevelSprite(i, disabled)}
+                alt=""
+                aria-hidden
+                draggable={false}
+                style={{
+                  position: 'absolute',
+                  left: 1 * scale,
+                  top: 1 * scale,
+                  width: 16 * scale,
+                  height: 16 * scale,
+                  imageRendering: 'pixelated',
+                }}
+              />
+            )}
+            {/* Enchantment name text (at +20, +2) */}
+            {!disabled && (
+              <span
+                style={{
+                  position: 'absolute',
+                  left: 20 * scale,
+                  top: 2 * scale,
+                  fontSize: 8 * scale,
+                  fontFamily: "'Minecraft', monospace",
+                  color: nameColor,
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'clip',
+                  maxWidth: 70 * scale,
+                  lineHeight: `${16 * scale}px`,
+                  textShadow: 'none',
+                }}
+              >
+                {`${name}${levelSuffix}`}
+              </span>
+            )}
+            {/* Cost number (right-aligned, vertically centered) */}
+            {!disabled && (
+              <span
+                style={{
+                  position: 'absolute',
+                  right: 2 * scale,
+                  top: 0,
+                  height: 19 * scale,
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontSize: 8 * scale,
+                  fontFamily: "'Minecraft', monospace",
+                  color: costColor,
+                  textShadow: 'none',
+                }}
+              >
+                {level}
+              </span>
+            )}
           </div>
         )
       })}

package/src/components/Slot/Slot.tsx

@@ -96,6 +96,13 @@ export function Slot({
     }
   }, [label, item, renderSize])
 
+  // Clean up long press timer on unmount
+  useEffect(() => {
+    return () => {
+      if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current)
+    }
+  }, [])
+
   const isHovered = hoveredSlot === index
   const isDragTarget = dragSlots.includes(index)
   const dragPreviewEntry = dragPreview.get(index)
@@ -247,19 +254,63 @@ export function Slot({
 
   // Mobile touch handlers
   const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null)
+  const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const longPressFiredRef = useRef(false)
+
+  const cancelLongPress = useCallback(() => {
+    if (longPressTimerRef.current) {
+      clearTimeout(longPressTimerRef.current)
+      longPressTimerRef.current = null
+    }
+  }, [])
 
   const handleTouchStart = useCallback(
     (e: React.TouchEvent) => {
       if (!isMobile) return
       const touch = e.touches[0]
       touchStartRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() }
+      longPressFiredRef.current = false
+      cancelLongPress()
+      // Long press: open mobile menu after 400ms if item exists and no held item
+      if (item && !heldItem && !disabled) {
+        const startX = touch.clientX
+        const startY = touch.clientY
+        longPressTimerRef.current = setTimeout(() => {
+          longPressFiredRef.current = true
+          setMobileTouchPos({ x: startX, y: startY })
+          setMobileMenuOpen(true)
+        }, 400)
+      }
     },
-    [isMobile],
+    [isMobile, item, heldItem, disabled, cancelLongPress],
+  )
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!longPressTimerRef.current) return
+      const touch = e.touches[0]
+      const start = touchStartRef.current
+      if (!start) return
+      if (Math.abs(touch.clientX - start.x) > 10 || Math.abs(touch.clientY - start.y) > 10) {
+        cancelLongPress()
+      }
+    },
+    [cancelLongPress],
   )
 
   const handleTouchEnd = useCallback(
     (e: React.TouchEvent) => {
+      cancelLongPress()
       if (!isMobile || disabled) return
+      // If long press opened the menu, don't process the tap
+      if (longPressFiredRef.current) {
+        longPressFiredRef.current = false
+        e.stopPropagation()
+        e.preventDefault()
+        return
+      }
+      // If mobile menu is open, let menu buttons handle their own events
+      if (mobileMenuOpen) return
       const start = touchStartRef.current
       if (!start) return
       touchStartRef.current = null
@@ -297,7 +348,7 @@ export function Slot({
         setFocusedSlot(null)
       }
     },
-    [isMobile, disabled, heldItem, sendAction, index, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot, onClickOverride],
+    [isMobile, disabled, heldItem, sendAction, index, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot, onClickOverride, cancelLongPress, mobileMenuOpen],
   )
 
   const handleMobilePickAll = useCallback(() => {
@@ -319,8 +370,16 @@ export function Slot({
     if (isNaN(amount) || amount <= 0) return
     setMobileMenuOpen(false)
     setShowTooltip(false)
-    for (let i = 0; i < Math.min(amount, item.count); i++) {
-      sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
+    const take = Math.min(amount, item.count)
+    if (take >= item.count) {
+      // Take all: just left-click
+      sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
+    } else {
+      // Pick up all, then put back (count - take) items one-by-one via right-click
+      sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
+      for (let i = 0; i < item.count - take; i++) {
+        sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
+      }
     }
   }, [item, sendAction, index])
 
@@ -368,6 +427,7 @@ export function Slot({
       onDoubleClick={handleDoubleClick}
       onContextMenu={handleContextMenu}
       onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
       aria-label={
         label ??
@@ -462,7 +522,12 @@ export function Slot({
 
       {isMobile && mobileMenuOpen && item && (
         <>
-          <div className={styles.mobileOverlay} onClick={closeMobileMenu} />
+          <div
+            className={styles.mobileOverlay}
+            onClick={closeMobileMenu}
+            onTouchStart={(e) => e.stopPropagation()}
+            onTouchEnd={(e) => { e.stopPropagation(); e.preventDefault(); closeMobileMenu() }}
+          />
           <MobileSlotMenu
             item={item}
             x={mobileTouchPos.x}
@@ -509,10 +574,18 @@ function MobileSlotMenu({ item, x, y, onPickAll, onPickHalf, onPickCustom, onDro
     setPos({ left, top })
   }, [x, y])
 
+  // Wrapper to handle both touch and click, preventing event bubbling to the slot
+  const touchBtn = (handler: () => void) => ({
+    onTouchEnd: (e: React.TouchEvent) => { e.stopPropagation(); e.preventDefault(); handler() },
+    onClick: (e: React.MouseEvent) => { e.stopPropagation(); handler() },
+  })
+
   return (
     <div
       ref={menuRef}
       className={styles.mobileMenu}
+      onTouchStart={(e) => e.stopPropagation()}
+      onTouchEnd={(e) => e.stopPropagation()}
       style={{
         position: 'fixed',
         left: pos.left,
@@ -527,11 +600,11 @@ function MobileSlotMenu({ item, x, y, onPickAll, onPickHalf, onPickCustom, onDro
       <div className={styles.mobileMenuTitle}>
         {item.displayName ?? item.name ?? `Item #${item.type}`} ×{item.count}
       </div>
-      <button className={styles.mobileBtn} onClick={onPickAll}>Take All ({item.count})</button>
-      <button className={styles.mobileBtn} onClick={onPickHalf}>Take Half ({Math.ceil(item.count / 2)})</button>
-      <button className={styles.mobileBtn} onClick={onPickCustom}>Take Amount…</button>
-      <button className={[styles.mobileBtn, styles.mobileBtnDanger].join(' ')} onClick={onDrop}>Drop</button>
-      <button className={styles.mobileBtn} onClick={onClose}>Cancel</button>
+      <button className={styles.mobileBtn} {...touchBtn(onPickAll)}>Take All ({item.count})</button>
+      <button className={styles.mobileBtn} {...touchBtn(onPickHalf)}>Take Half ({Math.ceil(item.count / 2)})</button>
+      <button className={styles.mobileBtn} {...touchBtn(onPickCustom)}>Take Amount…</button>
+      <button className={[styles.mobileBtn, styles.mobileBtnDanger].join(' ')} {...touchBtn(onDrop)}>Drop</button>
+      <button className={styles.mobileBtn} {...touchBtn(onClose)}>Cancel</button>
     </div>
   )
 }

package/src/context/InventoryContext.tsx

@@ -49,6 +49,8 @@ export interface InventoryContextValue {
   dragEndedRef: React.MutableRefObject<boolean>
   /** When true, empty slot labels (Head, Chest, Legs, etc.) are not rendered */
   noPlaceholders: boolean
+  /** Optional resolver for enchantment ID → display name (version-aware) */
+  resolveEnchantmentName?: (id: number) => string | undefined
 }
 
 const InventoryContext = createContext<InventoryContextValue | null>(null)
@@ -64,9 +66,10 @@ interface InventoryProviderProps {
   children: React.ReactNode
   noDragSpread?: boolean
   noPlaceholders?: boolean
+  resolveEnchantmentName?: (id: number) => string | undefined
 }
 
-export function InventoryProvider({ connector, children, noDragSpread = false, noPlaceholders = false }: InventoryProviderProps) {
+export function InventoryProvider({ connector, children, noDragSpread = false, noPlaceholders = false, resolveEnchantmentName }: InventoryProviderProps) {
   const [windowState, setWindowState] = useState<InventoryWindowState | null>(
     () => connector?.getWindowState() ?? null,
   )
@@ -318,6 +321,7 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
     pKeyDigit,
     setPKeyDigit,
     dragEndedRef,
+    resolveEnchantmentName,
   }
 
   valueRef.current = value

package/src/generated/localTextures.ts

@@ -35,6 +35,15 @@ import _gui_sprites_container_smoker_lit_progress from 'mc-assets/dist/other-tex
 import _gui_sprites_container_smoker_burn_progress from 'mc-assets/dist/other-textures/latest/gui/sprites/container/smoker/burn_progress.png'
 import _gui_sprites_container_brewing_stand_brew_progress from 'mc-assets/dist/other-textures/latest/gui/sprites/container/brewing_stand/brew_progress.png'
 import _gui_sprites_container_brewing_stand_fuel_length from 'mc-assets/dist/other-textures/latest/gui/sprites/container/brewing_stand/fuel_length.png'
+import _gui_sprites_container_enchanting_table_enchantment_slot from 'mc-assets/dist/other-textures/latest/gui/sprites/container/enchanting_table/enchantment_slot.png'
+import _gui_sprites_container_enchanting_table_enchantment_slot_disabled from 'mc-assets/dist/other-textures/latest/gui/sprites/container/enchanting_table/enchantment_slot_disabled.png'
+import _gui_sprites_container_enchanting_table_enchantment_slot_highlighted from 'mc-assets/dist/other-textures/latest/gui/sprites/container/enchanting_table/enchantment_slot_highlighted.png'
+import _gui_sprites_container_enchanting_table_level_1 from 'mc-assets/dist/other-textures/latest/gui/sprites/container/enchanting_table/level_1.png'
+import _gui_sprites_container_enchanting_table_level_2 from 'mc-assets/dist/other-textures/latest/gui/sprites/container/enchanting_table/level_2.png'
+import _gui_sprites_container_enchanting_table_level_3 from 'mc-assets/dist/other-textures/latest/gui/sprites/container/enchanting_table/level_3.png'
+import _gui_sprites_container_enchanting_table_level_1_disabled from 'mc-assets/dist/other-textures/latest/gui/sprites/container/enchanting_table/level_1_disabled.png'
+import _gui_sprites_container_enchanting_table_level_2_disabled from 'mc-assets/dist/other-textures/latest/gui/sprites/container/enchanting_table/level_2_disabled.png'
+import _gui_sprites_container_enchanting_table_level_3_disabled from 'mc-assets/dist/other-textures/latest/gui/sprites/container/enchanting_table/level_3_disabled.png'
 
 /**
  * Versioned texture path → bundled asset URL (or undefined for remote fallback).
@@ -75,6 +84,15 @@ export const bundledTextureMap: Record<string, string | undefined> = {
   '1.21.11/textures/gui/sprites/container/smoker/burn_progress.png': _gui_sprites_container_smoker_burn_progress,
   '1.21.11/textures/gui/sprites/container/brewing_stand/brew_progress.png': _gui_sprites_container_brewing_stand_brew_progress,
   '1.21.11/textures/gui/sprites/container/brewing_stand/fuel_length.png': _gui_sprites_container_brewing_stand_fuel_length,
+  '1.21.11/textures/gui/sprites/container/enchanting_table/enchantment_slot.png': _gui_sprites_container_enchanting_table_enchantment_slot,
+  '1.21.11/textures/gui/sprites/container/enchanting_table/enchantment_slot_disabled.png': _gui_sprites_container_enchanting_table_enchantment_slot_disabled,
+  '1.21.11/textures/gui/sprites/container/enchanting_table/enchantment_slot_highlighted.png': _gui_sprites_container_enchanting_table_enchantment_slot_highlighted,
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_1.png': _gui_sprites_container_enchanting_table_level_1,
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_2.png': _gui_sprites_container_enchanting_table_level_2,
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_3.png': _gui_sprites_container_enchanting_table_level_3,
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_1_disabled.png': _gui_sprites_container_enchanting_table_level_1_disabled,
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_2_disabled.png': _gui_sprites_container_enchanting_table_level_2_disabled,
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_3_disabled.png': _gui_sprites_container_enchanting_table_level_3_disabled,
 }
 
 
@@ -116,6 +134,15 @@ export const allTexturePaths: readonly string[] = [
   'gui/sprites/container/smoker/burn_progress.png',
   'gui/sprites/container/brewing_stand/brew_progress.png',
   'gui/sprites/container/brewing_stand/fuel_length.png',
+  'gui/sprites/container/enchanting_table/enchantment_slot.png',
+  'gui/sprites/container/enchanting_table/enchantment_slot_disabled.png',
+  'gui/sprites/container/enchanting_table/enchantment_slot_highlighted.png',
+  'gui/sprites/container/enchanting_table/level_1.png',
+  'gui/sprites/container/enchanting_table/level_2.png',
+  'gui/sprites/container/enchanting_table/level_3.png',
+  'gui/sprites/container/enchanting_table/level_1_disabled.png',
+  'gui/sprites/container/enchanting_table/level_2_disabled.png',
+  'gui/sprites/container/enchanting_table/level_3_disabled.png',
 ]
 
 /**

package/src/registry/inventories.ts

@@ -749,4 +749,14 @@ export const registryExtraTextures: string[] = [
   // Brewing stand progress bar sprites
   '1.21.11/textures/gui/sprites/container/brewing_stand/brew_progress.png',
   '1.21.11/textures/gui/sprites/container/brewing_stand/fuel_length.png',
+  // Enchanting table slot backgrounds & level icons
+  '1.21.11/textures/gui/sprites/container/enchanting_table/enchantment_slot.png',
+  '1.21.11/textures/gui/sprites/container/enchanting_table/enchantment_slot_disabled.png',
+  '1.21.11/textures/gui/sprites/container/enchanting_table/enchantment_slot_highlighted.png',
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_1.png',
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_2.png',
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_3.png',
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_1_disabled.png',
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_2_disabled.png',
+  '1.21.11/textures/gui/sprites/container/enchanting_table/level_3_disabled.png',
 ]