minecraft-inventory 0.1.41 → 0.1.43

package/README.md

@@ -1,5 +1,7 @@
 # minecraft-inventory
 
+DEMO: https://minecraft-inventory-npm.vercel.app/
+
 A flexible, scalable React library for rendering Minecraft inventory GUIs. Designed for integration into real Minecraft clients (e.g., mineflayer bots, web clients) without using CSS `transform: scale` — all sizing is driven by CSS custom properties.
 
 ## Features
@@ -10,7 +12,7 @@ A flexible, scalable React library for rendering Minecraft inventory GUIs. Desig
 - Tooltips that follow the cursor, matching the original Minecraft style
 - Full keyboard support: number keys (1-9) to swap hotbar, Q to drop, double-click to collect, scroll wheel to pick/place
 - Mobile support: tap-to-focus inventory interactions plus long-press slot actions (pick half / custom amount / drop one / drop all)
-- Optional JEI (item browser) panel on the left or right
+- Optional JEI (item browser) panel on right
 - Bot connector layer — plugs into a mineflayer bot or any custom server connection
 - Demo connector with action logging for local development
 - Extendable registry — add new inventory types in one place

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecraft-inventory",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "type": "module",
   "license": "MIT",
   "release": {
@@ -16,6 +16,17 @@
   "files": [
     "src"
   ],
+  "homepage": "https://mcraft.fun",
+  "keywords": [
+    "minecraft",
+    "minecraft-ui",
+    "minecraft-inventory",
+    "inventory",
+    "vanilla",
+    "react",
+    "typescript",
+    "web"
+  ],
   "devDependencies": {
     "@rsbuild/core": "^1.7.3",
     "@rsbuild/plugin-react": "^1.4.6",

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useCloseOnWClick } from '../../hooks/useCloseOnWClick'
 import { useInventoryContext } from '../../context/InventoryContext'
 import { useScale } from '../../context/ScaleContext'
@@ -94,7 +94,7 @@ export function InventoryOverlay({
   noWatermark = false,
   onOpenSettings,
 }: InventoryOverlayProps) {
-  const { heldItem, sendAction, setHeldItem, focusedSlot, setFocusedSlot } = useInventoryContext()
+  const { heldItem, sendAction, setHeldItem, focusedSlot, setFocusedSlot, hoveredSlot, getSlot } = useInventoryContext()
   const { scale } = useScale()
   const [settingsHovered, setSettingsHovered] = useState(false)
 
@@ -136,8 +136,30 @@ export function InventoryOverlay({
     pushRecipeFrame({ item, mode, guides, guideIndex: 0 })
   }, [jeiOnGetRecipes, jeiOnGetUsages, pushRecipeFrame])
 
+  // R / U while hovering a regular inventory slot (not JEI, not recipe view)
+  useEffect(() => {
+    if (!jeiOnGetRecipes && !jeiOnGetUsages) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.code !== 'KeyR' && e.code !== 'KeyU') return
+      const target = e.target as Element | null
+      const tagName = (target as { tagName?: string })?.tagName ?? ''
+      if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT' || (target as { isContentEditable?: boolean })?.isContentEditable) return
+      if (recipeNavStack.length > 0) return // RecipeInventoryView handles its own R/U
+      if (hoveredSlot === null || hoveredSlot < 0) return // JEI slots handled by JEI.tsx
+      const slot = getSlot(hoveredSlot)
+      if (!slot?.item) return
+      const item = slot.item
+      handleRecipePushFrame(
+        { type: item.type, name: item.name ?? '', displayName: item.displayName ?? item.name ?? `Item #${item.type}`, count: item.count, metadata: item.metadata },
+        e.code === 'KeyR' ? 'recipes' : 'usages',
+      )
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [jeiOnGetRecipes, jeiOnGetUsages, recipeNavStack.length, hoveredSlot, getSlot, handleRecipePushFrame])
+
   // Fires for any click that isn't stopped by an interactive panel (inventory, hotbar, JEI, etc.)
-  const handleBackdropClick = useCallback((e: React.MouseEvent) => {
+  const handleBackdropClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
     // Only handle left (drop all) and right (drop one) mouse buttons
     if (e.button !== 0 && e.button !== 2) return
     if (heldItem) {
@@ -316,6 +338,7 @@ export function InventoryOverlay({
             href="https://www.npmjs.com/package/minecraft-inventory"
             target="_blank"
             rel="noopener noreferrer"
+            onMouseDown={(e) => e.stopPropagation()}
             onClick={(e) => e.stopPropagation()}
             style={{
               position: 'absolute',
@@ -330,7 +353,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.41
+            INV 0.1.43
           </a>
         )}
 

package/src/components/Notes/Notes.tsx

@@ -167,6 +167,7 @@ export function Notes({
               </span>
               <button
                 type="button"
+                onMouseDown={(e) => e.stopPropagation()}
                 onClick={(e) => {
                   e.stopPropagation()
                   removeNote(note.id)
@@ -205,6 +206,7 @@ export function Notes({
             value={draft}
             rows={2}
             autoFocus
+            onMouseDown={(e) => e.stopPropagation()}
             onClick={(e) => e.stopPropagation()}
             onChange={(e) => {
               setDraft(e.target.value.replace(/[\r\n]/g, ''))
@@ -235,6 +237,7 @@ export function Notes({
           {showInput && (
             <button
               type="button"
+              onMouseDown={(e) => e.stopPropagation()}
               onClick={(e) => {
                 e.stopPropagation()
                 setShowInput(false)
@@ -257,6 +260,7 @@ export function Notes({
           )}
           <button
             type="button"
+            onMouseDown={(e) => e.stopPropagation()}
             onClick={(e) => {
               e.stopPropagation()
               handleAddButtonClick()

package/src/components/RecipeGuide/RecipeInventoryView.tsx

@@ -6,6 +6,14 @@ import { useScale } from '../../context/ScaleContext'
 import { useTextures } from '../../context/TextureContext'
 import { getInventoryType } from '../../registry'
 
+function isTypingTarget(target: EventTarget | null): boolean {
+  if (!target || !(target instanceof HTMLElement)) return false
+  const tag = target.tagName
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true
+  if (target.isContentEditable) return true
+  return false
+}
+
 interface RecipeInventoryViewProps {
   navStack: RecipeNavFrame[]
   onBack: () => void
@@ -96,6 +104,7 @@ export function RecipeInventoryView({
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.code !== 'KeyR' && e.code !== 'KeyU') return
+      if (isTypingTarget(e.target)) return
       const item = hoveredItemRef.current
       if (!item) return
       onPushFrame(item, e.code === 'KeyR' ? 'recipes' : 'usages')
@@ -104,10 +113,13 @@ export function RecipeInventoryView({
     return () => window.removeEventListener('keydown', handler)
   }, [onPushFrame])
 
-  // Escape = go back one level
+  // Escape / Backspace = go back one frame (Backspace on root frame closes recipe view)
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
-      if (e.code === 'Escape') onBack()
+      if (e.code !== 'Escape' && e.code !== 'Backspace') return
+      if (isTypingTarget(e.target)) return
+      onBack()
+      if (e.code === 'Backspace') e.preventDefault()
     }
     window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)