minecraft-inventory 0.1.36 → 0.1.38

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.36",
+  "version": "0.1.38",
   "type": "module",
   "license": "MIT",
   "release": {

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -330,7 +330,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.36
+            INV 0.1.38
           </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

@@ -81,6 +81,7 @@ export function JEI({
   const { hoveredSlot } = useInventoryContext()
   const [search, setSearch] = useState('')
   const [page, setPage] = useState(0)
+  const [showAllItems, setShowAllItems] = useState(false)
   const [showFavorites, setShowFavorites] = useState(false)
   const [favorites, setFavorites] = useState<Set<string>>(loadFavorites)
   // Map from negative slot index → JEI item (to enable F-key and R/U on hover)
@@ -187,7 +188,7 @@ export function JEI({
   }, [items, showFavorites, favorites])
 
   const filteredItems = useMemo(() => {
-    if (!search.trim()) return baseList
+    if (!search.trim()) return showAllItems ? baseList : []
     const q = search.toLowerCase()
     return baseList.filter(
       (item) =>
@@ -195,7 +196,7 @@ export function JEI({
         item.name.toLowerCase().includes(q) ||
         String(item.type).includes(q),
     )
-  }, [baseList, search])
+  }, [baseList, search, showAllItems])
 
   const totalPages = Math.ceil(filteredItems.length / itemsPerPage)
   const visibleItems = filteredItems.slice(page * itemsPerPage, (page + 1) * itemsPerPage)
@@ -231,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",
+      }}
+    >
+      Display All {baseList.length} {baseList.length === 1 ? 'item' : 'items'}
+    </button>
+  ) : null
+
+  const showDisplayAllInGrid = !showAllItems && visibleItems.length === 0
+
   return (
     <div
       ref={rootRef}
@@ -324,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
+}