minecraft-inventory 0.1.44 → 0.1.45

package/package.json

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

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -353,7 +353,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.44
+            INV 0.1.45
           </a>
         )}
 

package/src/components/InventoryWindow/InventoryWindow.tsx

@@ -47,8 +47,9 @@ export function InventoryWindow({
   const { scale, slotSize, contentSize } = useScale()
   // borderPx removed from slot positioning: registry coords already point to the item area
   const borderPx = 0
+  const isHotbar = type === 'hotbar'
 
-  useKeyboardShortcuts(enableKeyboardShortcuts)
+  useKeyboardShortcuts(enableKeyboardShortcuts && !isHotbar)
 
   const effectiveSlots = useMemo(() => {
     if (slotsProp) return slotsProp
@@ -73,7 +74,6 @@ export function InventoryWindow({
   const effectiveTitle = (type === 'player' || isBeacon) ? undefined : (title ?? windowState?.title ?? def.title)
   const isVillager = type === 'villager'
   const isEnchanting = def?.name === 'enchanting_table'
-  const isHotbar = type === 'hotbar'
   const isAnvil = def?.name === 'anvil'
 
   const resolveItem = (slotIndex: number) => {

package/src/components/Slot/Slot.module.css

@@ -75,12 +75,9 @@
   z-index: 10001;
 }
 
-.mobileMenuTitle {
-  color: #ffffff;
-  font-weight: bold;
-  padding-bottom: 4px;
-  border-bottom: 1px solid #555555;
+.mobileMenuInfo {
   margin-bottom: 4px;
+  flex-shrink: 0;
 }
 
 .mobileBtn {

package/src/components/Slot/Slot.tsx

@@ -4,6 +4,8 @@ import { useInventoryContext } from '../../context/InventoryContext'
 import { useScale } from '../../context/ScaleContext'
 import { ItemCanvas } from '../ItemCanvas'
 import { Tooltip } from '../Tooltip'
+import { ItemTooltipBody } from '../Tooltip/ItemTooltipBody'
+import tooltipStyles from '../Tooltip/Tooltip.module.css'
 import { useMobile } from '../../hooks/useMobile'
 import styles from './Slot.module.css'
 
@@ -606,7 +608,7 @@ function MobileSlotMenu({ item, x, y, onPickAll, onPickHalf, onDropOne, onDropAl
     if (top + mh > vh - 4) top = vh - mh - 4
     if (top < 4) top = 4
     setPos({ left, top })
-  }, [x, y])
+  }, [x, y, item])
 
   // Wrapper to handle both touch and click, preventing event bubbling to the slot
   const touchBtn = (handler: () => void) => ({
@@ -631,8 +633,17 @@ function MobileSlotMenu({ item, x, y, onPickAll, onPickHalf, onDropOne, onDropAl
         minWidth: 100 * scale,
       }}
     >
-      <div className={styles.mobileMenuTitle}>
-        {item.displayName ?? item.name ?? `Item #${item.type}`} ×{item.count}
+      <div
+        className={[tooltipStyles.tooltip, styles.mobileMenuInfo].join(' ')}
+        style={{
+          fontSize: Math.round(8 * scale),
+          padding: Math.round(3 * scale),
+          gap: Math.round(0.5 * scale),
+          width: 'max-content',
+          maxWidth: 'min(90vw, 280px)',
+        }}
+      >
+        <ItemTooltipBody item={item} />
       </div>
       <button className={styles.mobileBtn} {...touchBtn(onPickAll)}>Select All ({item.count})</button>
       <button className={styles.mobileBtn} {...touchBtn(onPickHalf)}>Pick Half ({Math.ceil(item.count / 2)})</button>

package/src/components/Tooltip/ItemTooltipBody.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import type { ItemStack } from '../../types'
+import { MessageFormattedString } from '../Text/MessageFormattedString'
+import styles from './Tooltip.module.css'
+
+function getRarityColor(item: ItemStack): string {
+  if (item.enchantments && item.enchantments.length > 0) return '#8080ff'
+  return '#ffffff'
+}
+
+function formatEnchantment(e: { name: string; level: number }): string {
+  const roman = ['', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X']
+  return e.level <= 10 ? `${e.name} ${roman[e.level]}` : `${e.name} ${e.level}`
+}
+
+export function getItemTooltipDisplayName(item: ItemStack): string {
+  return item.displayName ?? (item.name ? item.name.replace(/_/g, ' ') : `Item #${item.type}`)
+}
+
+/** Item name, enchantments, lore, durability, and type id — shared by desktop tooltip and mobile menu. */
+export function ItemTooltipBody({ item }: { item: ItemStack }) {
+  const nameColor = getRarityColor(item)
+  const hasDurability =
+    item.durability !== undefined &&
+    item.maxDurability !== undefined &&
+    item.durability < item.maxDurability
+
+  return (
+    <>
+      <div className={styles.name} style={{ color: nameColor }}>
+        <MessageFormattedString
+          text={getItemTooltipDisplayName(item)}
+          fallbackColor={nameColor}
+        />
+      </div>
+
+      {item.enchantments && item.enchantments.length > 0 && (
+        <div className={styles.section}>
+          {item.enchantments.map((e, i) => (
+            <div key={i} className={styles.enchantment}>
+              {formatEnchantment(e)}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {item.lore && item.lore.length > 0 && (
+        <div className={styles.lore}>
+          {item.lore.map((line, i) => (
+            <div key={i}>
+              <MessageFormattedString text={line} />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {hasDurability && (
+        <div className={styles.durability}>
+          Durability: {item.durability} / {item.maxDurability}
+        </div>
+      )}
+
+      <div className={styles.typeId}>
+        {item.name ?? `#${item.type}`}
+        {item.metadata !== undefined && item.metadata > 0 ? `:${item.metadata}` : ''}
+      </div>
+    </>
+  )
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -2,8 +2,8 @@ import React, { useRef, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import type { ItemStack } from '../../types'
 import { useScale } from '../../context/ScaleContext'
-import { MessageFormattedString } from '../Text/MessageFormattedString'
 import { globalMouse } from '../../utils/globalMouse'
+import { ItemTooltipBody } from './ItemTooltipBody'
 import styles from './Tooltip.module.css'
 
 interface TooltipProps {
@@ -11,16 +11,6 @@ interface TooltipProps {
   visible: boolean
 }
 
-function getRarityColor(item: ItemStack): string {
-  if (item.enchantments && item.enchantments.length > 0) return '#8080ff'
-  return '#ffffff'
-}
-
-function formatEnchantment(e: { name: string; level: number }): string {
-  const roman = ['', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X']
-  return e.level <= 10 ? `${e.name} ${roman[e.level]}` : `${e.name} ${e.level}`
-}
-
 export function Tooltip({ item, visible }: TooltipProps) {
   const { scale } = useScale()
   const ref = useRef<HTMLDivElement>(null)
@@ -63,12 +53,6 @@ export function Tooltip({ item, visible }: TooltipProps) {
 
   if (!visible) return null
 
-  const nameColor = getRarityColor(item)
-  const hasDurability =
-    item.durability !== undefined &&
-    item.maxDurability !== undefined &&
-    item.durability < item.maxDurability
-
   const fs = Math.round(8 * scale)
   const pad = Math.round(3 * scale)
   const gap2 = Math.round(0.5 * scale)
@@ -91,43 +75,7 @@ export function Tooltip({ item, visible }: TooltipProps) {
         pointerEvents: 'none',
       }}
     >
-      <div className={styles.name} style={{ color: nameColor }}>
-        <MessageFormattedString
-          text={item.displayName ?? (item.name ? item.name.replace(/_/g, ' ') : `Item #${item.type}`)}
-          fallbackColor={nameColor}
-        />
-      </div>
-
-      {item.enchantments && item.enchantments.length > 0 && (
-        <div className={styles.section}>
-          {item.enchantments.map((e, i) => (
-            <div key={i} className={styles.enchantment}>
-              {formatEnchantment(e)}
-            </div>
-          ))}
-        </div>
-      )}
-
-      {item.lore && item.lore.length > 0 && (
-        <div className={styles.lore}>
-          {item.lore.map((line, i) => (
-            <div key={i}>
-              <MessageFormattedString text={line} />
-            </div>
-          ))}
-        </div>
-      )}
-
-      {hasDurability && (
-        <div className={styles.durability}>
-          Durability: {item.durability} / {item.maxDurability}
-        </div>
-      )}
-
-      <div className={styles.typeId}>
-        {item.name ?? `#${item.type}`}
-        {item.metadata !== undefined && item.metadata > 0 ? `:${item.metadata}` : ''}
-      </div>
+      <ItemTooltipBody item={item} />
     </div>
   )