minecraft-inventory 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecraft-inventory",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "license": "MIT",
   "release": {
@@ -42,7 +42,7 @@
   },
   "scripts": {
     "dev": "rsbuild dev",
-    "build": "pnpm gen:textures && rsbuild build",
+    "build": "pnpm gen:textures && node scripts/stamp-version.mjs && rsbuild build",
     "preview": "rsbuild preview",
     "gen:textures": "node scripts/generate-texture-imports.mjs"
   }

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -19,8 +19,8 @@ export interface InventoryOverlayProps {
    * control special features: `showOffhand` (1/0) and `container` (1/0).
    */
   properties?: Record<string, number>
-  /** Show semi-transparent backdrop behind inventory (default: true) */
-  showBackdrop?: boolean
+  /** Hide semi-transparent backdrop behind inventory */
+  noBackdrop?: boolean
   /** Backdrop color (default: 'rgba(0,0,0,0.5)') */
   backdropColor?: string
   /** Called when clicking outside the inventory (or pressing Esc) */
@@ -48,14 +48,21 @@ export interface InventoryOverlayProps {
   className?: string
   style?: React.CSSProperties
   children?: React.ReactNode
+  /** Show yellow debug border around the overlay area */
   debugBounds?: boolean
+  /** Show red debug outline around the inventory background */
+  showDebug?: boolean
+  /** Override entity display rendering. Pass a function returning JSX, or null to hide. */
+  renderEntity?: ((width: number, height: number) => React.ReactNode) | null
+  /** Hide the "INV" version watermark (opt-out) */
+  noWatermark?: boolean
 }
 
 export function InventoryOverlay({
   type,
   title,
   properties,
-  showBackdrop = true,
+  noBackdrop = false,
   backdropColor = 'rgba(0,0,0,0.5)',
   onClose,
   showJEI = false,
@@ -72,8 +79,11 @@ export function InventoryOverlay({
   style,
   children,
   debugBounds = false,
+  showDebug = false,
+  renderEntity,
+  noWatermark = false,
 }: InventoryOverlayProps) {
-  const { heldItem, sendAction, setHeldItem } = useInventoryContext()
+  const { heldItem, sendAction, setHeldItem, focusedSlot, setFocusedSlot } = useInventoryContext()
   const { scale } = useScale()
 
   const def = getInventoryType(type)
@@ -114,13 +124,18 @@ export function InventoryOverlay({
 
   // Fires for any click that isn't stopped by an interactive panel (inventory, hotbar, JEI, etc.)
   const handleBackdropClick = useCallback(() => {
+    // Clicking the backdrop clears focused slot (regardless of heldItem)
+    if (focusedSlot !== null) {
+      setFocusedSlot(null)
+      return
+    }
     if (heldItem) {
       sendAction({ type: 'drop', slotIndex: -1, all: true })
       setHeldItem(null)
     } else {
       onClose?.()
     }
-  }, [heldItem, sendAction, setHeldItem, onClose])
+  }, [heldItem, sendAction, setHeldItem, onClose, focusedSlot, setFocusedSlot])
 
   const jeiPanel = showJEI ? (
     <JEI
@@ -162,7 +177,7 @@ export function InventoryOverlay({
           inset: 0,
           width: '100%',
           height: '100%',
-          background: showBackdrop ? backdropColor : 'transparent',
+          background: noBackdrop ? 'transparent' : backdropColor,
           cursor: 'default',
           zIndex: 1,
           ...style,
@@ -210,8 +225,15 @@ export function InventoryOverlay({
           }}
         >
           <div className="mc-inv-overlay-content" style={{ position: 'relative' }}>
-            {/* Inventory / Recipe view — stopPropagation so clicks inside don't close the overlay */}
-            <div className="mc-inv-overlay-window" onClick={(e) => e.stopPropagation()}>
+            {/* Inventory / Recipe view — clicks clear focused slot; slots stop propagation themselves */}
+            <div
+              className="mc-inv-overlay-window"
+              onClick={(e) => {
+                e.stopPropagation()
+                // Clicking the inventory background (not a slot) clears focused slot
+                if (focusedSlot !== null) setFocusedSlot(null)
+              }}
+            >
               {recipeNavStack.length > 0 ? (
                 <RecipeInventoryView
                   navStack={recipeNavStack}
@@ -220,7 +242,7 @@ export function InventoryOverlay({
                   onPushFrame={handleRecipePushFrame}
                 />
               ) : (
-                <InventoryWindow type={type} title={title} properties={properties} showDebug={debugBounds} />
+                <InventoryWindow type={type} title={title} properties={properties} showDebug={showDebug} renderEntity={renderEntity} />
               )}
             </div>
           </div>
@@ -245,6 +267,31 @@ export function InventoryOverlay({
         {/* Extra children (overlay-level) */}
         {children}
 
+        {/* Watermark */}
+        {!noWatermark && (
+          <a
+            className="mc-inv-watermark"
+            href="https://www.npmjs.com/package/minecraft-inventory"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              position: 'absolute',
+              top: 4,
+              left: 4,
+              fontSize: 9,
+              fontFamily: "'Minecraftia', 'Minecraft', monospace",
+              color: 'rgba(255,255,255,0.3)',
+              textDecoration: 'none',
+              pointerEvents: 'auto',
+              zIndex: 1,
+              lineHeight: 1,
+            }}
+          >
+            INV 0.0.0
+          </a>
+        )}
+
         {/* Debug bounds */}
         {debugBounds && (
           <div

package/src/components/InventoryWindow/AnvilInput.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react'
+import { useScale } from '../../context/ScaleContext'
+import { useTextures } from '../../context/TextureContext'
+import { useInventoryContext } from '../../context/InventoryContext'
+
+interface AnvilInputProps {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export function AnvilInput({ x, y, width, height }: AnvilInputProps) {
+  const { scale } = useScale()
+  const textures = useTextures()
+  const { sendAction, windowState } = useInventoryContext()
+
+  const [text, setText] = useState('')
+  const [focused, setFocused] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const hasInputItem = windowState?.slots.some((s) => s.index === 0 && s.item !== null) ?? false
+
+  const textFieldUrl = textures.getGuiTextureUrl(
+    hasInputItem
+      ? '1.21.11/textures/gui/sprites/container/anvil/text_field.png'
+      : '1.21.11/textures/gui/sprites/container/anvil/text_field_disabled.png',
+  )
+
+  useEffect(() => {
+    if (!hasInputItem) {
+      setText('')
+      setFocused(false)
+    }
+  }, [hasInputItem])
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = e.target.value
+      setText(val)
+      sendAction({ type: 'rename', text: val })
+    },
+    [sendAction],
+  )
+
+  return (
+    <div
+      className="mc-inv-anvil-input"
+      style={{
+        position: 'absolute',
+        left: x * scale,
+        top: y * scale,
+        width: width * scale,
+        height: height * scale,
+        imageRendering: 'pixelated',
+      }}
+    >
+      <img
+        src={textFieldUrl}
+        alt=""
+        aria-hidden
+        draggable={false}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          imageRendering: 'pixelated',
+          pointerEvents: 'none',
+        }}
+      />
+      <input
+        ref={inputRef}
+        type="text"
+        value={text}
+        onChange={handleChange}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        disabled={!hasInputItem}
+        maxLength={35}
+        placeholder=""
+        className="mc-inv-anvil-rename-input"
+        style={{
+          position: 'absolute',
+          left: 2 * scale,
+          top: 1 * scale,
+          width: (width - 4) * scale,
+          height: (height - 2) * scale,
+          border: 'none',
+          outline: 'none',
+          background: 'transparent',
+          color: '#ffffff',
+          fontFamily: "'Minecraftia', 'Minecraft', monospace",
+          fontSize: 7 * scale,
+          padding: 0,
+          lineHeight: 1,
+          caretColor: focused ? '#ffffff' : 'transparent',
+        }}
+      />
+    </div>
+  )
+}

package/src/components/InventoryWindow/EntityDisplay.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useScale } from '../../context/ScaleContext'
+import type { EntityDisplayArea } from '../../types'
+
+interface EntityDisplayProps {
+  area: EntityDisplayArea
+  renderEntity?: ((width: number, height: number) => React.ReactNode) | null
+}
+
+export function EntityDisplay({ area, renderEntity }: EntityDisplayProps) {
+  const { scale } = useScale()
+
+  if (renderEntity === null) return null
+
+  const w = area.width * scale
+  const h = area.height * scale
+
+  return (
+    <div
+      className="mc-inv-entity-display"
+      style={{
+        position: 'absolute',
+        left: area.x * scale,
+        top: area.y * scale,
+        width: w,
+        height: h,
+        overflow: 'hidden',
+      }}
+    >
+      {renderEntity ? (
+        renderEntity(w, h)
+      ) : (
+        <div
+          className="mc-inv-entity-display-placeholder"
+          style={{
+            width: '100%',
+            height: '100%',
+            background: 'rgba(255, 0, 0, 0.15)',
+            border: '1px solid rgba(255, 0, 0, 0.4)',
+            boxSizing: 'border-box',
+          }}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/InventoryWindow/InventoryBackground.tsx

@@ -4,6 +4,22 @@ import { useScale } from '../../context/ScaleContext'
 import { MessageFormattedString } from '../Text/MessageFormattedString'
 import type { InventoryTypeDefinition } from '../../registry'
 
+/**
+ * For generic_9xN (N < 6): CSS-stitch the 6-row generic_54 texture using two
+ * overlapping img elements with objectPosition to clip top and bottom portions.
+ * No canvas or async loading needed — works with any URL including remote ones.
+ *
+ * The source texture (generic_54.png, 176×222) fixed layout:
+ *   y=0   ..16  — title bar (17px)
+ *   y=17  ..124 — 6 container rows (6×18 = 108px)
+ *   y=125 ..221 — player inventory section (97px)
+ *
+ * Output height = topH + playerH = N*18+17 + 97 = N*18+114.
+ * Registry backgroundHeight must equal N*18+114 for the div to match.
+ */
+const SRC_PLAYER_Y = 17 + 6 * 18 // 125 — fixed position where player section starts
+const PLAYER_H = 222 - SRC_PLAYER_Y // 97px — height of player section in generic_54.png
+
 interface InventoryBackgroundProps {
   definition: InventoryTypeDefinition
   children: React.ReactNode
@@ -21,13 +37,23 @@ export function InventoryBackground({
   const { scale } = useScale()
 
   const bgUrl = textures.getGuiTextureUrl(definition.backgroundTexture)
+  const isStitched = definition.containerRows != null && definition.containerRows < 6
+
   const w = definition.backgroundWidth * scale
   const h = definition.backgroundHeight * scale
 
-  // Source dimensions from definition (e.g., 176x166) — clip to this region from texture
   const srcW = definition.backgroundWidth
   const srcH = definition.backgroundHeight
 
+  const sharedImgStyle: React.CSSProperties = {
+    display: 'block',
+    width: srcW,
+    imageRendering: 'pixelated',
+    pointerEvents: 'none',
+    userSelect: 'none',
+    objectFit: 'none',
+  }
+
   return (
     <div
       className="mc-inv-background"
@@ -41,40 +67,55 @@ export function InventoryBackground({
         outlineOffset: 0,
       }}
     >
-      {/* Background texture wrapper — clips source to srcW×srcH, then scales */}
-      <div
-        className="mc-inv-background-wrapper"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: srcW,
-          height: srcH,
-          overflow: 'hidden',
-          transform: `scale(${scale})`,
-          transformOrigin: 'top left',
-        }}
-      >
-        {/* Background texture — render at natural size, clipped by wrapper overflow */}
-        <img
-          className="mc-inv-background-image"
-          src={bgUrl}
-          alt=""
-          aria-hidden
+      {isStitched ? (
+        /* CSS two-part stitch: clips top (title+N rows) and bottom (player section)
+           from the same source image using objectPosition — no canvas/async needed. */
+        <div
+          className="mc-inv-background-wrapper"
           style={{
-            display: 'block',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            transform: `scale(${scale})`,
+            transformOrigin: 'top left',
+          }}
+        >
+          {/* Top: title bar + N container rows */}
+          <div style={{ width: srcW, height: definition.containerRows! * 18 + 17, overflow: 'hidden' }}>
+            <img className="mc-inv-background-image" src={bgUrl} alt="" aria-hidden draggable={false}
+              style={{ ...sharedImgStyle, objectPosition: '0 0' }} />
+          </div>
+          {/* Bottom: player inventory section starting at SRC_PLAYER_Y in source */}
+          <div style={{ width: srcW, height: PLAYER_H, overflow: 'hidden' }}>
+            <img src={bgUrl} alt="" aria-hidden draggable={false}
+              style={{ ...sharedImgStyle, objectPosition: `0 -${SRC_PLAYER_Y}px` }} />
+          </div>
+        </div>
+      ) : (
+        /* Standard: clip source to srcW×srcH via overflow:hidden, then scale */
+        <div
+          className="mc-inv-background-wrapper"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
             width: srcW,
             height: srcH,
-            imageRendering: 'pixelated',
-            pointerEvents: 'none',
-            userSelect: 'none',
-            // Clip to top-left srcW×srcH region (if texture is larger)
-            objectFit: 'none',
-            objectPosition: '0 0',
+            overflow: 'hidden',
+            transform: `scale(${scale})`,
+            transformOrigin: 'top left',
           }}
-          draggable={false}
-        />
-      </div>
+        >
+          <img
+            className="mc-inv-background-image"
+            src={bgUrl}
+            alt=""
+            aria-hidden
+            draggable={false}
+            style={{ ...sharedImgStyle, objectPosition: '0 0' }}
+          />
+        </div>
+      )}
 
       {/* Title */}
       {title !== undefined && (

package/src/components/InventoryWindow/InventoryWindow.tsx

@@ -10,6 +10,8 @@ import { ProgressBar } from './ProgressBar'
 import { VillagerTradeList } from './VillagerTradeList'
 import { EnchantmentOptions } from './EnchantmentOptions'
 import { HotbarExtras } from './HotbarExtras'
+import { AnvilInput } from './AnvilInput'
+import { EntityDisplay } from './EntityDisplay'
 
 interface InventoryWindowProps {
   type: string
@@ -20,6 +22,8 @@ interface InventoryWindowProps {
   style?: React.CSSProperties
   enableKeyboardShortcuts?: boolean
   showDebug?: boolean
+  /** Override entity display rendering. Pass a function returning JSX, or null to hide. */
+  renderEntity?: ((width: number, height: number) => React.ReactNode) | null
 }
 
 export function InventoryWindow({
@@ -31,6 +35,7 @@ export function InventoryWindow({
   style,
   enableKeyboardShortcuts = true,
   showDebug = false,
+  renderEntity,
 }: InventoryWindowProps) {
   const def = getInventoryType(type)
   const { windowState, getSlot } = useInventoryContext()
@@ -62,6 +67,7 @@ export function InventoryWindow({
   const isVillager = type === 'villager'
   const isEnchanting = type === 'enchanting_table'
   const isHotbar = type === 'hotbar'
+  const isAnvil = type === 'anvil'
 
   const resolveItem = (slotIndex: number) => {
     const fromProp = effectiveSlots.find((s) => s.index === slotIndex)
@@ -97,6 +103,11 @@ export function InventoryWindow({
           </div>
         ))}
 
+        {/* Entity display area */}
+        {def.entityDisplay && (
+          <EntityDisplay area={def.entityDisplay} renderEntity={renderEntity} />
+        )}
+
         {/* Progress bars */}
         {def.progressBars?.map((pb) => (
           <ProgressBar
@@ -119,6 +130,9 @@ export function InventoryWindow({
           />
         )}
 
+        {/* Anvil rename input */}
+        {isAnvil && <AnvilInput x={59} y={20} width={110} height={16} />}
+
         {/* Hotbar extras: active slot indicator, offhand slot, open-inventory button */}
         {isHotbar && (
           <HotbarExtras

package/src/components/ItemCanvas/ItemCanvas.tsx

@@ -7,8 +7,10 @@ import { useDataUrl, isTextureFailed } from '../../cache/textureCache'
 interface ItemCanvasProps {
   item: ItemStack
   size?: number
-  showCount?: boolean
-  showDurability?: boolean
+  /** Hide item count overlay */
+  noCount?: boolean
+  /** Hide durability bar */
+  noDurability?: boolean
   className?: string
   style?: React.CSSProperties
 }
@@ -24,8 +26,8 @@ function getDurabilityColor(current: number, max: number): string {
 export const ItemCanvas = memo(function ItemCanvas({
   item,
   size,
-  showCount = true,
-  showDurability = true,
+  noCount = false,
+  noDurability = false,
   className,
   style,
 }: ItemCanvasProps) {
@@ -34,7 +36,8 @@ export const ItemCanvas = memo(function ItemCanvas({
   const renderSize = size ?? contentSize
 
   const primaryUrl = textures.getItemTextureUrl(item)
-  const fallbackUrl = item.name ? textures.getBlockTextureUrl(item) : null
+  // Skip the block-texture fallback when a textureKey override is already in use
+  const fallbackUrl = !item.textureKey && item.name ? textures.getBlockTextureUrl(item) : null
 
   // Load primary URL as cached data URL
   const primaryDataUrl = useDataUrl(primaryUrl)
@@ -54,7 +57,7 @@ export const ItemCanvas = memo(function ItemCanvas({
     : primaryFailed && !fallbackUrl
 
   const hasDurability =
-    showDurability &&
+    !noDurability &&
     item.durability !== undefined &&
     item.maxDurability !== undefined &&
     item.durability < item.maxDurability
@@ -129,7 +132,7 @@ export const ItemCanvas = memo(function ItemCanvas({
       )}
 
       {/* Item count */}
-      {showCount && item.count > 1 && (
+      {!noCount && item.count > 1 && (
         <span className="mc-inv-item-count" style={{
           position: 'absolute',
           bottom: 0,

package/src/components/JEI/JEI.tsx

@@ -143,6 +143,12 @@ export function JEI({
   // F / R / U keyboard handlers
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
+      // Shift+F: toggle favorites-only filter
+      if (e.code === 'KeyF' && e.shiftKey) {
+        setShowFavorites((v) => !v)
+        setPage(0)
+        return
+      }
       // F: toggle favorite for hovered JEI item
       if (e.code === 'KeyF' && hoveredSlot !== null && hoveredSlot < 0) {
         const item = slotToItemRef.current.get(hoveredSlot)
@@ -235,7 +241,7 @@ export function JEI({
         style={{
           padding: `${padding}px`,
           background: '#c6c6c6',
-          border: `${scale}px solid #555555`,
+          // border: `${scale}px solid #555555`,
           flexShrink: 0,
         }}
       >