minecraft-inventory 0.1.43 → 0.1.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecraft-inventory",
-  "version": "0.1.43",
+  "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.43
+            INV 0.1.45
           </a>
         )}
 

package/src/components/InventoryWindow/HotbarExtras.tsx

@@ -130,7 +130,7 @@ export function HotbarExtras({ showOffhand, container, offhandItem }: HotbarExtr
           />
           {/* Item at slot 45 (offhand) */}
           <div style={{ position: 'absolute', top: 4 * scale, left: 3 * scale }}>
-            <Slot index={45} item={offhandItem} size={16 * scale} noBackground />
+            <Slot index={45} item={offhandItem} size={16 * scale} noBackground disableFocusSwap />
           </div>
         </div>
       )}

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) => {
@@ -98,7 +98,6 @@ export function InventoryWindow({
               // Offset by borderPx to land inside the texture's slot cell (skip the 1px border)
               left: slotDef.x * scale + borderPx,
               top: slotDef.y * scale + borderPx,
-              ...(isHotbar ? { pointerEvents: 'none' as const } : {}),
             }}
           >
             <Slot
@@ -107,6 +106,7 @@ export function InventoryWindow({
               size={slotDef.size ? slotDef.size * scale - 2 * borderPx : contentSize}
               resultSlot={slotDef.resultSlot}
               label={slotDef.label}
+              disableFocusSwap={isHotbar}
             />
           </div>
         ))}

package/src/components/RecipeGuide/RecipeInventoryView.tsx

@@ -22,6 +22,11 @@ interface RecipeInventoryViewProps {
   onPushFrame: (item: RecipeNavFrame['item'], mode: 'recipes' | 'usages') => void
 }
 
+function minecraftWikiUrlForName(nameOrDisplay: string): string {
+  const slug = nameOrDisplay.replace(/ /g, '_')
+  return `https://minecraft.wiki/w/${encodeURIComponent(slug)}`
+}
+
 /** Slot item with a Tooltip, used inside the recipe view */
 function RecipeItemCell({
   item,
@@ -29,12 +34,14 @@ function RecipeItemCell({
   y,
   size,
   onHover,
+  onRecipeNavigate,
 }: {
   item: ItemStack | null
   x: number
   y: number
   size: number
   onHover: (item: ItemStack | null) => void
+  onRecipeNavigate?: (item: ItemStack, mode: 'recipes' | 'usages') => void
 }) {
   const [hovered, setHovered] = useState(false)
 
@@ -63,6 +70,15 @@ function RecipeItemCell({
         setHovered(false)
         onHover(null)
       }}
+      onClick={(e) => {
+        e.stopPropagation()
+        onRecipeNavigate?.(item, 'recipes')
+      }}
+      onContextMenu={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        onRecipeNavigate?.(item, 'usages')
+      }}
     >
       <ItemCanvas item={item} size={size} style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }} />
       {hovered && <Tooltip item={item} visible />}
@@ -100,6 +116,24 @@ export function RecipeInventoryView({
     }
   }, [])
 
+  const handleRecipeItemNavigate = useCallback(
+    (item: ItemStack, mode: 'recipes' | 'usages') => {
+      onPushFrame(
+        {
+          type: item.type,
+          name: item.name ?? '',
+          displayName: item.displayName ?? item.name ?? `Item #${item.type}`,
+          count: item.count,
+          metadata: item.metadata,
+        },
+        mode,
+      )
+    },
+    [onPushFrame],
+  )
+
+  const wikiHref = minecraftWikiUrlForName(frame.item.name || frame.item.displayName || 'Unknown')
+
   // R / U for nested navigation on hovered recipe items
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
@@ -215,6 +249,22 @@ export function RecipeInventoryView({
           )}
         </span>
 
+        <a
+          href={wikiHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+          style={{
+            color: '#3366bb',
+            textDecoration: 'underline',
+            flexShrink: 0,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          Wiki
+        </a>
+
         {/* Prev / next for multiple guides */}
         {totalGuides > 1 && (
           <>
@@ -250,6 +300,7 @@ export function RecipeInventoryView({
           navPx={navPx}
           contentSize={contentSize}
           onHoverItem={handleHoverItem}
+          onRecipeNavigate={handleRecipeItemNavigate}
         />
       )}
 
@@ -263,7 +314,7 @@ export function RecipeInventoryView({
           color: 'rgba(80,80,80,0.7)',
           pointerEvents: 'none',
         }}>
-          Hover ingredient + R / U for nested lookup
+          Hover ingredient + R / U, or left / right-click (usages)
         </div>
       )}
     </div>
@@ -283,6 +334,7 @@ function CroppedRecipeBackground({
   navPx,
   contentSize,
   onHoverItem,
+  onRecipeNavigate,
 }: {
   guide: RecipeGuide
   containerSlots: Array<{ index: number; x: number; y: number; size?: number; group?: string }>
@@ -291,6 +343,7 @@ function CroppedRecipeBackground({
   navPx: number
   contentSize: number
   onHoverItem: (item: ItemStack | null) => void
+  onRecipeNavigate?: (item: ItemStack, mode: 'recipes' | 'usages') => void
 }) {
   const textures = useTextures()
   const layoutType = guide.type === 'smelting' ? 'furnace' : 'crafting_table'
@@ -375,6 +428,7 @@ function CroppedRecipeBackground({
             y={slotDef.y * scale}
             size={slotDef.size ? slotDef.size * scale - 2 * navPx : contentSize}
             onHover={onHoverItem}
+            onRecipeNavigate={onRecipeNavigate}
           />
         )
       })}
@@ -406,8 +460,6 @@ function DescriptionCard({
   const fontSize = Math.max(6, Math.round(6 * scale))
   const iconSize = 16 * scale
 
-  const wikiUrl = `https://minecraft.wiki/w/${encodeURIComponent(itemName.replace(/ /g, '_'))}`
-
   return (
     <div
       className="mc-inv-description-card"
@@ -504,25 +556,6 @@ function DescriptionCard({
           {guide.description}
         </div>
       )}
-
-      {/* Minecraft Wiki link */}
-      <a
-        href={wikiUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        style={{
-          position: 'absolute',
-          bottom: 4 * scale,
-          right: 8 * scale,
-          fontSize,
-          fontFamily: "'Minecraftia', 'Minecraft', monospace",
-          color: '#3366bb',
-          textDecoration: 'underline',
-          cursor: 'pointer',
-        }}
-      >
-        Minecraft Wiki
-      </a>
     </div>
   )
 }

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,9 +4,15 @@ 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'
 
+/** Hotbar HUD long-press: first threshold drops one item; hold longer for whole stack. */
+const HOTBAR_LONG_PRESS_DROP_ONE_MS = 420
+const HOTBAR_LONG_PRESS_DROP_ALL_EXTRA_MS = 600
+
 interface SlotProps {
   index: number
   item: ItemStack | null
@@ -19,6 +25,8 @@ interface SlotProps {
   style?: React.CSSProperties
   /** Remove slot background/border (e.g. for JEI items) */
   noBackground?: boolean
+  /** When true, skip P-key / focus-swap UI and mobile two-tap swap (e.g. standalone hotbar HUD). */
+  disableFocusSwap?: boolean
   /** Override default click behavior - when provided, calls this instead of sendAction */
   onClickOverride?: (button: 'left' | 'right' | 'middle', mode: 'normal' | 'shift' | 'double') => void
 }
@@ -34,6 +42,7 @@ export function Slot({
   className,
   style,
   noBackground,
+  disableFocusSwap = false,
   onClickOverride,
 }: SlotProps) {
   const {
@@ -96,6 +105,18 @@ export function Slot({
     }
   }, [label, item, renderSize])
 
+  // Mobile touch — timer ref must exist before cleanup effect below
+  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
+    }
+  }, [])
+
   // Clean up long press timer on unmount
   useEffect(() => {
     return () => {
@@ -106,15 +127,14 @@ export function Slot({
   const isHovered = hoveredSlot === index
   const isDragTarget = dragSlots.includes(index)
   const dragPreviewEntry = dragPreview.get(index)
-  const isFocused = focusedSlot === index
-  const showPKeyNumber = pKeyActive && index >= 0 && index <= 99
-  const isInFocusSwapMode = focusedSlot !== null || pKeyActive
+  const isFocused = !disableFocusSwap && focusedSlot === index
+  const showPKeyNumber = !disableFocusSwap && pKeyActive && index >= 0 && index <= 99
 
-  // Keyboard number key while hovering
+  // Keyboard number key while hovering (disabled on hotbar HUD)
   useEffect(() => {
-    if (!isHovered || activeNumberKey === null || isMobile) return
+    if (!isHovered || activeNumberKey === null || isMobile || disableFocusSwap) return
     sendAction({ type: 'hotbar-swap', slotIndex: index, hotbarSlot: activeNumberKey })
-  }, [activeNumberKey, isHovered, index, sendAction, isMobile])
+  }, [activeNumberKey, isHovered, index, sendAction, isMobile, disableFocusSwap])
 
   const handleMouseEnter = useCallback((e: React.MouseEvent) => {
     if (isMobile) return
@@ -136,7 +156,9 @@ export function Slot({
       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' })
+        if (!disableFocusSwap) {
+          sendAction({ type: 'click', slotIndex: index, button: 'middle', mode: 'middle' })
+        }
         return
       }
       if (heldItem && (button === 'left' || button === 'right')) {
@@ -145,7 +167,7 @@ export function Slot({
         startDrag(index, button)
       }
     },
-    [isMobile, disabled, heldItem, index, sendAction, startDrag, dragEndedRef],
+    [isMobile, disabled, disableFocusSwap, heldItem, index, sendAction, startDrag, dragEndedRef],
   )
 
   const handleMouseUp = useCallback(
@@ -164,8 +186,8 @@ export function Slot({
       // 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)) {
+      // Focus/swap logic — active in P mode OR when a slot is already focused (disabled for hotbar HUD)
+      if (!disableFocusSwap && button === 'left' && (pKeyActive || focusedSlot !== null)) {
         if (pKeyActive) setPKeyActive(false)
         if (focusedSlot === null) {
           setFocusedSlot(index)
@@ -191,6 +213,21 @@ export function Slot({
       lastClickTimeRef.current = now
 
       const mode = e.shiftKey ? 'shift' : 'normal'
+
+      if (disableFocusSwap && !onClickOverride) {
+        if (button === 'middle') {
+          if (isDragging) endDrag()
+          return
+        }
+        if (!heldItem && index >= 36 && index <= 44) {
+          if (button === 'left' && mode === 'normal') {
+            sendAction({ type: 'hotbar-select', slotIndex: index })
+          }
+          if (isDragging) endDrag()
+          return
+        }
+      }
+
       if (onClickOverride) {
         onClickOverride(button, mode)
       } else {
@@ -203,7 +240,7 @@ export function Slot({
       }
       if (isDragging) endDrag()
     },
-    [isMobile, disabled, isDragging, dragSlots.length, sendAction, index, endDrag, onClickOverride, resultSlot, heldItem, item, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot, dragEndedRef],
+    [isMobile, disabled, disableFocusSwap, isDragging, dragSlots.length, sendAction, index, endDrag, onClickOverride, resultSlot, heldItem, item, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot, dragEndedRef],
   )
 
   const handleDoubleClick = useCallback(
@@ -211,13 +248,14 @@ export function Slot({
       if (isMobile || disabled) return
       e.preventDefault()
       cancelDrag()
+      if (disableFocusSwap && !onClickOverride) return
       if (onClickOverride) {
         onClickOverride('left', 'double')
       } else {
         sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'double' })
       }
     },
-    [isMobile, disabled, sendAction, index, onClickOverride, cancelDrag],
+    [isMobile, disabled, disableFocusSwap, sendAction, index, onClickOverride, cancelDrag],
   )
 
   const handleContextMenu = useCallback((e: React.MouseEvent) => {
@@ -226,7 +264,7 @@ export function Slot({
 
   const handleWheel = useCallback(
     (e: WheelEvent) => {
-      if (isMobile || disabled) return
+      if (isMobile || disabled || disableFocusSwap) return
       if (onClickOverride) return // JEI slots: let parent handle wheel for pagination
       if (!item && !heldItem) return
       e.preventDefault()
@@ -236,7 +274,7 @@ export function Slot({
         sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
       }
     },
-    [isMobile, disabled, item, heldItem, sendAction, index, onClickOverride],
+    [isMobile, disabled, disableFocusSwap, item, heldItem, sendAction, index, onClickOverride],
   )
 
   // Attach wheel listener as non-passive so preventDefault() is effective.
@@ -249,18 +287,6 @@ export function Slot({
     return () => el.removeEventListener('wheel', handleWheel)
   }, [handleWheel])
 
-  // 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
@@ -268,6 +294,18 @@ export function Slot({
       touchStartRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() }
       longPressFiredRef.current = false
       cancelLongPress()
+      // Hotbar HUD: staged long-press drops (no radial menu)
+      if (disableFocusSwap && item && !heldItem && !disabled) {
+        longPressTimerRef.current = setTimeout(() => {
+          longPressFiredRef.current = true
+          sendAction({ type: 'drop', slotIndex: index, all: false })
+          longPressTimerRef.current = setTimeout(() => {
+            sendAction({ type: 'drop', slotIndex: index, all: true })
+            longPressTimerRef.current = null
+          }, HOTBAR_LONG_PRESS_DROP_ALL_EXTRA_MS)
+        }, HOTBAR_LONG_PRESS_DROP_ONE_MS)
+        return
+      }
       // Long press: open mobile menu after 400ms if item exists and no held item
       if (item && !heldItem && !disabled) {
         const startX = touch.clientX
@@ -279,7 +317,7 @@ export function Slot({
         }, 400)
       }
     },
-    [isMobile, item, heldItem, disabled, cancelLongPress],
+    [isMobile, item, heldItem, disabled, cancelLongPress, disableFocusSwap, sendAction, index],
   )
 
   const handleTouchMove = useCallback(
@@ -318,7 +356,7 @@ export function Slot({
       // Without this, the click bubbles to the inventory window div which clears focusedSlot.
       e.preventDefault()
 
-      if (pKeyActive) setPKeyActive(false)
+      if (pKeyActive && !disableFocusSwap) setPKeyActive(false)
 
       // JEI / recipe / custom slots: same handler as desktop onMouseUp (not focus/swap).
       if (onClickOverride) {
@@ -333,6 +371,16 @@ export function Slot({
         return
       }
 
+      if (disableFocusSwap) {
+        if (focusedSlot !== null) setFocusedSlot(null)
+        if (index >= 36 && index <= 44 && !heldItem) {
+          sendAction({ type: 'hotbar-select', slotIndex: index })
+        } else {
+          sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
+        }
+        return
+      }
+
       // On mobile, tapping always uses the focus/swap mechanism:
       // first tap focuses, second tap on a different slot swaps, same slot clears.
       if (focusedSlot === null) {
@@ -346,22 +394,22 @@ export function Slot({
         setFocusedSlot(null)
       }
     },
-    [isMobile, disabled, heldItem, sendAction, index, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot, onClickOverride, cancelLongPress, mobileMenuOpen],
+    [isMobile, disabled, disableFocusSwap, heldItem, sendAction, index, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot, onClickOverride, cancelLongPress, mobileMenuOpen],
   )
 
   const handleMobilePickAll = useCallback(() => {
     setMobileMenuOpen(false)
     setShowTooltip(false)
-    setFocusedSlot(index)
+    if (!disableFocusSwap) setFocusedSlot(index)
     sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
-  }, [sendAction, index, setFocusedSlot])
+  }, [sendAction, index, setFocusedSlot, disableFocusSwap])
 
   const handleMobilePickHalf = useCallback(() => {
     setMobileMenuOpen(false)
     setShowTooltip(false)
-    setFocusedSlot(index)
+    if (!disableFocusSwap) setFocusedSlot(index)
     sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
-  }, [sendAction, index, setFocusedSlot])
+  }, [sendAction, index, setFocusedSlot, disableFocusSwap])
 
   const handleMobileDropOne = useCallback(() => {
     setMobileMenuOpen(false)
@@ -560,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) => ({
@@ -585,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>
   )
 

package/src/connector/demo.ts

@@ -39,6 +39,8 @@ function describeAction(action: InventoryAction): string {
       return `Set beacon effects: ${action.primaryEffect} / ${action.secondaryEffect}`
     case 'hotbar-swap':
       return `Swap slot ${action.slotIndex} with hotbar ${action.hotbarSlot}`
+    case 'hotbar-select':
+      return `Select hotbar slot (index ${action.slotIndex})`
     default:
       return JSON.stringify(action)
   }
@@ -88,12 +90,34 @@ export function createDemoConnector(options: DemoConnectorOptions): InventoryCon
       if (actionLog.length > 100) actionLog.splice(100)
       options.onAction?.(entry)
 
+      if (action.type === 'hotbar-select') {
+        if (action.slotIndex >= 36 && action.slotIndex <= 44) {
+          playerState = { ...playerState, activeHotbarSlot: action.slotIndex - 36 }
+          emit({ type: 'playerUpdate', state: playerState })
+        }
+        return
+      }
+
       // Demo: simulate simple click behavior
       if (action.type === 'click' && windowState) {
         const slots = [...windowState.slots]
         const slotState = slots.find((s) => s.index === action.slotIndex)
         const held = windowState.heldItem
 
+        // Hotbar HUD: empty-hand click on main bar = select only (no pick)
+        if (
+          windowState.type === 'hotbar' &&
+          action.button === 'left' &&
+          action.mode === 'normal' &&
+          !held &&
+          action.slotIndex >= 36 &&
+          action.slotIndex <= 44
+        ) {
+          playerState = { ...playerState, activeHotbarSlot: action.slotIndex - 36 }
+          emit({ type: 'playerUpdate', state: playerState })
+          return
+        }
+
         if (action.button === 'left' && action.mode === 'normal') {
           if (held && slotState) {
             const idx = slots.indexOf(slotState)

package/src/connector/mineflayer.ts

@@ -603,6 +603,22 @@ export function createMineflayerConnector(bot: MineflayerBot, options?: Mineflay
           logActionEvent('connector.action.success', action)
           return
         }
+
+        if (action.type === 'hotbar-select') {
+          if (!hotbarOnly) {
+            logActionEvent('connector.action.skipped', action, { reason: 'not_hotbar_only' })
+            return
+          }
+          if (action.slotIndex < 36 || action.slotIndex > 44) {
+            logActionEvent('connector.action.skipped', action, { reason: 'invalid_hotbar_slot' })
+            return
+          }
+          const extBot = bot as MineflayerBot & { setQuickBarSlot?: (i: number) => void }
+          extBot.setQuickBarSlot?.(action.slotIndex - 36)
+          onSetSlot()
+          logActionEvent('connector.action.success', action)
+          return
+        }
   
         const win = bot.currentWindow
   

package/src/debug/inventoryDebug.ts

@@ -142,7 +142,7 @@ export function summarizeWindowState(state: InventoryWindowState | null | undefi
 }
 
 export function getActionSlotIndexes(action: InventoryAction): number[] | undefined {
-  if (action.type === 'click' || action.type === 'drop' || action.type === 'hotbar-swap') return [action.slotIndex]
+  if (action.type === 'click' || action.type === 'drop' || action.type === 'hotbar-swap' || action.type === 'hotbar-select') return [action.slotIndex]
   if (action.type === 'drag') return [...action.slots]
   return undefined
 }

package/src/types.ts

@@ -90,6 +90,8 @@ export type InventoryAction =
   | { type: 'enchant'; enchantIndex: number }
   | { type: 'beacon'; primaryEffect: number; secondaryEffect: number }
   | { type: 'hotbar-swap'; slotIndex: number; hotbarSlot: number }
+  /** Standalone hotbar HUD: change selected slot only (no window pick/swap). Slot index 36–44. */
+  | { type: 'hotbar-select'; slotIndex: number }
   /** Emitted by the Hotbar "open inventory" button; integrations (e.g. mineflayer) handle this. */
   | { type: 'open-inventory' }