minecraft-inventory 0.1.37 → 0.1.39

package/README.md

@@ -4,7 +4,7 @@ A flexible, scalable React library for rendering Minecraft inventory GUIs. Desig
 
 ## Features
 
-- All standard inventory types (chest, furnace, crafting table, villager trades, enchanting table, brewing stand, anvil, smithing table, horse, beacon, and more)
+- ALL standard inventory types (chest, furnace, crafting table, enchanting table, brewing stand, anvil, smithing table, horse, **beacon**, and more)
 - CSS variable–based scaling — no layout jank, no `transform: scale`
 - `<img>`-rendered item textures with automatic `items/` → `blocks/` fallback (via PrismarineJS asset mirror by default)
 - Tooltips that follow the cursor, matching the original Minecraft style

package/package.json

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

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -330,7 +330,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.37
+            INV 0.1.39
           </a>
         )}
 

package/src/components/JEI/JEI.module.css

@@ -41,3 +41,19 @@
 .pageBtnActive:hover:not(:disabled) {
   background: #a07820;
 }
+
+.displayAllBtn {
+  background: #505050;
+  color: #ffffff;
+  border: 2px solid #8b8b8b;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: normal;
+  transition: background 0.1s;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.displayAllBtn:hover {
+  background: #606060;
+}

package/src/components/JEI/JEI.tsx

@@ -232,6 +232,26 @@ export function JEI({
     slotToItemRef.current.set(slotIndex, jeiItem)
   })
 
+  const displayAllButton = !showAllItems ? (
+    <button
+      type="button"
+      className={styles.displayAllBtn}
+      onClick={() => {
+        setShowAllItems(true)
+        setPage(0)
+      }}
+      style={{
+        fontSize: 8 * scale,
+        padding: `${2 * scale}px ${5 * scale}px`,
+        fontFamily: "'Minecraftia', 'Minecraft', monospace",
+      }}
+    >
+      Show All {baseList.length} {baseList.length === 1 ? 'item' : 'items'}
+    </button>
+  ) : null
+
+  const showDisplayAllInGrid = !showAllItems && visibleItems.length === 0
+
   return (
     <div
       ref={rootRef}
@@ -311,16 +331,6 @@ export function JEI({
           >
             <StarIcon size={Math.max(1, Math.round(6 * scale))} />
           </button>
-          {!showAllItems && (
-            <button
-              className={styles.pageBtn}
-              onClick={() => { setShowAllItems(true); setPage(0) }}
-              style={{ fontSize: 6 * scale, padding: `${scale}px ${2 * scale}px` }}
-              title="Show all items"
-            >
-              👁
-            </button>
-          )}
         </div>
       </div>
 
@@ -335,10 +345,26 @@ export function JEI({
           padding: `${padding}px`,
           gap: 0,
           flex: 1,
+          minHeight: 0,
           alignContent: 'flex-start',
           overflowY: 'hidden',
         }}
       >
+        {showDisplayAllInGrid && displayAllButton && (
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              pointerEvents: 'none',
+              padding: `${padding}px`,
+            }}
+          >
+            <span style={{ pointerEvents: 'auto' }}>{displayAllButton}</span>
+          </div>
+        )}
         {visibleItems.map((jeiItem, i) => {
           const itemStack: ItemStack = {
             type: jeiItem.type,

package/src/components/RecipeGuide/RecipeInventoryView.tsx

@@ -79,6 +79,7 @@ export function RecipeInventoryView({
   const frame = navStack[navStack.length - 1]
   const guide = frame.guides[frame.guideIndex]
   const hoveredItemRef = useRef<RecipeNavFrame['item'] | null>(null)
+  const recipeViewRootRef = useRef<HTMLDivElement>(null)
 
   const handleHoverItem = useCallback((item: ItemStack | null) => {
     if (!item) { hoveredItemRef.current = null; return }
@@ -143,8 +144,30 @@ export function RecipeInventoryView({
   const navFontSize = Math.max(6, Math.round(6 * scale))
   const navPx = Math.max(1, Math.round(scale))
 
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      if (totalGuides <= 1) return
+      e.preventDefault()
+      const idx = frame.guideIndex
+      if (e.deltaY > 0) {
+        onGuideIndexChange(Math.min(idx + 1, totalGuides - 1))
+      } else {
+        onGuideIndexChange(Math.max(idx - 1, 0))
+      }
+    },
+    [totalGuides, frame.guideIndex, onGuideIndexChange],
+  )
+
+  useEffect(() => {
+    const el = recipeViewRootRef.current
+    if (!el || totalGuides <= 1) return
+    el.addEventListener('wheel', handleWheel, { passive: false })
+    return () => el.removeEventListener('wheel', handleWheel)
+  }, [handleWheel, totalGuides])
+
   return (
     <div
+      ref={recipeViewRootRef}
       className="mc-inv-recipe-view"
       style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'stretch' }}
     >

package/src/globals.d.ts

@@ -6,3 +6,11 @@ declare module '*.png' {
   const content: string
   export default content
 }
+declare module '*.jpeg' {
+  const content: string
+  export default content
+}
+declare module '*.jpg' {
+  const content: string
+  export default content
+}

package/src/registry/inventories.ts

@@ -565,6 +565,7 @@ export const inventoryDefinitions = makeInventoryDefinitions({
     backgroundWidth: 176,
     backgroundHeight: 166,
     entityDisplay: { x: 26, y: 18, width: 52, height: 52 },
+    entityPlaceholder: 'horse',
     slots: [
       { x: 8, y: 18, group: 'saddle', label: 'Saddle' },
       { x: 8, y: 36, group: 'armor', label: 'Horse Armor' },