minecraft-inventory 0.1.4 → 0.1.6

package/README.md

@@ -262,16 +262,16 @@ pnpm add mc-assets   # optional peer dependency
 
 ```tsx
 import { TextureProvider, InventoryOverlay } from 'minecraft-inventory'
-import { localTexturesConfig } from './generated/localTextures'
+import { localBundledTexturesConfig } from './bundledTexturesConfig'
 
 // GUI container backgrounds (chest, furnace, etc.) load from bundled mc-assets;
 // item/block textures still use the default remote URLs unless you override them.
-<TextureProvider config={localTexturesConfig}>
+<TextureProvider config={localBundledTexturesConfig}>
   <InventoryOverlay type="chest" ... />
 </TextureProvider>
 ```
 
-The generated file imports every `backgroundTexture` from your registry, resolves each to `node_modules/mc-assets/dist/other-textures/<version>/...` (or `latest/` if that version is missing), and exports `allContainerPaths` (inventory name → short path) plus `localTexturesConfig.getGuiTextureUrl(path)` for use with `<TextureProvider config={...}>`. Re-run `pnpm gen:textures` after changing [inventory types](#adding-new-inventory-types).
+The generated file (`src/generated/localTextures.ts`) exports `bundledTextureMap`, `allTexturePaths`, and `allContainerPaths`. Use `createBundledTexturesConfig({ remoteFallback: true, bundledTextureMap? })` to get a config with `getGuiTextureUrl`, `setOverride(path, image)`, `clearOverrides()`, `setRemoteFallback(enabled)`, and `resetRenderedSlots()`. Pass short paths to `setOverride` (e.g. `gui/sprites/container/anvil/text_field_disabled.png`) — the version prefix exists only for the texture import generator. Call `resetRenderedSlots()` after multiple `setOverride` calls to invalidate cached textures so slots re-request them. `localBundledTexturesConfig` is the default instance. Re-run `pnpm gen:textures` after changing [inventory types](#adding-new-inventory-types).
 
 ---
 
@@ -546,9 +546,18 @@ interface ItemStack {
   lore?: string[]
   durability?: number        // Current durability value
   maxDurability?: number     // Max durability (renders bar when < max)
+  textureKey?: string        // Override texture path for getItemTextureUrl
+  texture?: string | HTMLImageElement  // Direct texture (bypasses URL lookup)
+  blockTexture?: BlockTextureRender   // Isometric block icon from face slices
+  debugKey?: string
 }
 ```
 
+**Texture overrides (mineflayer `itemMapper`):**
+- `texture: string` — URL or data URL, fetched and cached.
+- `texture: HTMLImageElement` — Preloaded image, used directly.
+- `blockTexture: { source, top, left, right }` — Composite an isometric block icon from three face slices. Each face has `slice: [x, y, w, h]` in source texture pixels. Uses a pool of aux canvases (not recreated per slot).
+
 ---
 
 ## Project Structure
@@ -613,6 +622,10 @@ Each Minecraft window type has a fixed slot layout defined by the server protoco
 - [`prismarine-windows`](https://github.com/PrismarineJS/prismarine-windows) for JS slot maps
 - Minecraft source: `net/minecraft/world/inventory/` for the canonical layout
 
+### Memory leak note (Tooltip / MessageFormattedString)
+
+If opening tooltips increases memory without returning to baseline, see [docs/MEMORY_LEAK_ANALYSIS.md](docs/MEMORY_LEAK_ANALYSIS.md). The likely cause is `filter:blur(2px)` on obfuscated (§k) text creating retained compositor layers.
+
 ### Connector protocol
 
 When implementing a custom connector, actions have these shapes:

package/package.json

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

package/src/bundledTexturesConfig.ts

@@ -0,0 +1,126 @@
+/**
+ * Centralized config for bundled GUI textures. Uses maps from generated localTextures.
+ * Supports overrides via short paths (e.g. "gui/sprites/container/anvil/text_field_disabled.png"),
+ * remote fallback toggle, and cache invalidation after overrides.
+ *
+ * Version prefix (e.g. "1.21.11/textures/") in bundled keys exists only for the texture
+ * import generator — setOverride accepts short paths without it.
+ */
+
+import {
+  bundledTextureMap,
+  allTexturePaths,
+  allContainerPaths,
+} from './generated/localTextures'
+import type { TextureConfig } from './context/TextureContext'
+import { clearTextureCache } from './cache/textureCache'
+
+const MC_ASSETS_REMOTE =
+  'https://raw.githubusercontent.com/zardoy/mc-assets/refs/heads/gh-pages'
+
+/** Normalize path to short form: "gui/..." (strip version prefix if present). */
+function toShortPath(path: string): string {
+  const m = path.match(/^\d[\d.]+\/textures\/(.+)$/)
+  return m ? m[1] : path
+}
+
+/** Default version for building mc-assets URLs when path is short. */
+const DEFAULT_VERSION = '1.21.11'
+
+export interface BundledTexturesConfigOptions {
+  /** When true (default), unknown paths fall back to remote mc-assets URL. */
+  remoteFallback?: boolean
+  /** Override the bundled texture map (e.g. for custom builds). */
+  bundledTextureMap?: Record<string, string | undefined>
+}
+
+export interface BundledTexturesConfig extends Pick<TextureConfig, 'getGuiTextureUrl'> {
+  /**
+   * Override a texture. Pass short path (e.g. "gui/sprites/container/anvil/text_field_disabled.png")
+   * and image URL. Version prefix is only for the import generator — not needed here.
+   */
+  setOverride(path: string, image: string): void
+  /** Remove all texture overrides. */
+  clearOverrides(): void
+  /** Enable or disable remote fallback for unknown paths. */
+  setRemoteFallback(enabled: boolean): void
+  /**
+   * Invalidate cached textures so slots re-request them. Call after multiple setOverride
+   * calls when you want UI to immediately reflect new overrides.
+   */
+  resetRenderedSlots(): void
+}
+
+/**
+ * Build a reverse map: shortPath -> bundled URL.
+ */
+function buildShortPathToBundled(
+  bundled: Record<string, string | undefined>,
+): Map<string, string> {
+  const map = new Map<string, string>()
+  for (const [key, url] of Object.entries(bundled)) {
+    if (!url) continue
+    const short = toShortPath(key)
+    if (!map.has(short)) map.set(short, url)
+  }
+  return map
+}
+
+/**
+ * Create a bundled textures config with overrides and optional remote fallback.
+ * Pass the returned config to <TextureProvider config={...}>.
+ */
+export function createBundledTexturesConfig(
+  options?: BundledTexturesConfigOptions,
+): BundledTexturesConfig {
+  let remoteFallbackEnabled = options?.remoteFallback ?? true
+  const overrides = new Map<string, string>()
+  const bundled = options?.bundledTextureMap ?? bundledTextureMap
+  const shortToBundled = buildShortPathToBundled(bundled)
+
+  function getGuiTextureUrl(path: string): string {
+    const shortPath = toShortPath(path)
+
+    const override = overrides.get(shortPath)
+    if (override) return override
+
+    const bundledUrl = bundled[path] ?? shortToBundled.get(shortPath)
+    if (bundledUrl) return bundledUrl
+
+    if (
+      remoteFallbackEnabled &&
+      path.endsWith('.png') &&
+      path.includes('/textures/')
+    ) {
+      return `${MC_ASSETS_REMOTE}/${path}`
+    }
+
+    if (remoteFallbackEnabled && shortPath.endsWith('.png')) {
+      const versioned = `${DEFAULT_VERSION}/textures/${shortPath}`
+      return `${MC_ASSETS_REMOTE}/${versioned}`
+    }
+
+    return path
+  }
+
+  return {
+    getGuiTextureUrl,
+    setOverride(path: string, image: string) {
+      overrides.set(toShortPath(path), image)
+    },
+    clearOverrides() {
+      overrides.clear()
+    },
+    setRemoteFallback(enabled: boolean) {
+      remoteFallbackEnabled = enabled
+    },
+    resetRenderedSlots() {
+      clearTextureCache()
+    },
+  }
+}
+
+/** Default config instance for <TextureProvider config={localBundledTexturesConfig}>. */
+export const localBundledTexturesConfig = createBundledTexturesConfig()
+
+export { allTexturePaths, allContainerPaths }

package/src/cache/blockRenderer.ts

@@ -0,0 +1,103 @@
+/**
+ * Pool of offscreen canvases for block-face compositing.
+ * Reuses a fixed set of canvases instead of creating new ones per render.
+ */
+
+const POOL_SIZE = 8
+const OUTPUT_SIZE = 32
+
+const pool: HTMLCanvasElement[] = []
+const inUse = new Set<HTMLCanvasElement>()
+
+function getCanvas(): HTMLCanvasElement {
+  const free = pool.find((c) => !inUse.has(c))
+  if (free) {
+    inUse.add(free)
+    return free
+  }
+  if (pool.length < POOL_SIZE) {
+    const c = document.createElement('canvas')
+    c.width = OUTPUT_SIZE
+    c.height = OUTPUT_SIZE
+    pool.push(c)
+    inUse.add(c)
+    return c
+  }
+  const c = pool[pool.length - 1]
+  inUse.add(c)
+  return c
+}
+
+function releaseCanvas(c: HTMLCanvasElement): void {
+  inUse.delete(c)
+}
+
+/** Slice rect [x, y, width, height] */
+type Slice = [number, number, number, number]
+
+/**
+ * Composite top/left/right block faces into an isometric-style icon.
+ * Uses a pool of canvases; not recreated each time.
+ */
+export function renderBlockIcon(
+  source: HTMLImageElement | string,
+  top: Slice,
+  left: Slice,
+  right: Slice,
+): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const isUrl = typeof source === 'string'
+    const img = isUrl ? new Image() : (source as HTMLImageElement)
+
+    const draw = (image: HTMLImageElement) => {
+      let canvas: HTMLCanvasElement | null = null
+      try {
+        canvas = getCanvas()
+        const ctx = canvas.getContext('2d')
+        if (!ctx) throw new Error('No 2d context')
+
+        ctx.imageSmoothingEnabled = false
+        ctx.clearRect(0, 0, OUTPUT_SIZE, OUTPUT_SIZE)
+
+        const s = OUTPUT_SIZE / 16
+        const [tx, ty, tw, th] = top
+        const [lx, ly, lw, lh] = left
+        const [rx, ry, rw, rh] = right
+
+        // Isometric layout: top face tilted, left and right as sides
+        ctx.save()
+        ctx.translate(8 * s, 2 * s)
+        ctx.rotate(-Math.PI / 4)
+        ctx.drawImage(image, tx, ty, tw, th, -4 * s, -4 * s, 8 * s, 8 * s)
+        ctx.restore()
+
+        ctx.drawImage(image, lx, ly, lw, lh, 0, 12 * s, 10 * s, 10 * s)
+        ctx.drawImage(image, rx, ry, rw, rh, 12 * s, 12 * s, 10 * s, 10 * s)
+
+        const dataUrl = canvas.toDataURL('image/png')
+        resolve(dataUrl)
+      } catch (e) {
+        reject(e)
+      } finally {
+        if (canvas) releaseCanvas(canvas)
+      }
+    }
+
+    if (isUrl) {
+      img.onload = () => draw(img)
+      img.onerror = () =>
+        reject(new Error('Failed to load block texture'))
+      img.crossOrigin = 'anonymous'
+      img.src = source
+    } else if (
+      (img).complete &&
+      (img).naturalWidth > 0
+    ) {
+      draw(img)
+    } else {
+      img.onload = () => draw(img)
+      img.onerror = () =>
+        reject(new Error('Block texture image failed'))
+    }
+  })
+}

package/src/cache/textureCache.ts

@@ -45,6 +45,16 @@ export function isTextureFailed(url: string): boolean {
   return failedUrls.has(url)
 }
 
+/**
+ * Clear all cached texture data URLs and failed state.
+ * Call after setOverride in bundledTexturesConfig so slots re-request textures.
+ */
+export function clearTextureCache(): void {
+  dataUrlCache.clear()
+  failedUrls.clear()
+  inflight.clear()
+}
+
 /**
  * Hook that resolves a URL to a cached base64 data URL.
  * Returns:

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -288,7 +288,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.0.0
+            INV 0.1.6
           </a>
         )}
 

package/src/components/InventoryWindow/InventoryBackground.tsx

@@ -1,54 +1,24 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useTextures } from '../../context/TextureContext'
 import { useScale } from '../../context/ScaleContext'
 import { MessageFormattedString } from '../Text/MessageFormattedString'
 import type { InventoryTypeDefinition } from '../../registry'
 
 /**
- * For generic_9xN (N < 6): canvas-stitch the 6-row generic_54 texture.
- * Takes the top (title + N rows) and bottom (player-inventory section = last 96px)
- * from the source and composes them into a data URL of the correct output height.
+ * 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) layout:
- *   y=0..16   — title bar (17px)
- *   y=17..124 — 6 container rows (6×18 = 108px)
- *   y=126..221 — player inventory section (96px)
+ * 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.
  */
-function useStitchedTexture(srcUrl: string, containerRows: number): string | null {
-  const [dataUrl, setDataUrl] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (containerRows >= 6) {
-      setDataUrl(srcUrl)
-      return
-    }
-    let cancelled = false
-    const img = new window.Image()
-    img.crossOrigin = 'anonymous'
-    img.onload = () => {
-      if (cancelled) return
-      const srcW = 176
-      const srcH = img.naturalHeight // 222 for generic_54
-      const topH = containerRows * 18 + 17
-      const playerH = 96
-      const canvas = document.createElement('canvas')
-      canvas.width = srcW
-      canvas.height = topH + playerH
-      const ctx = canvas.getContext('2d')
-      if (!ctx) { setDataUrl(srcUrl); return }
-      // Top: title + N container rows
-      ctx.drawImage(img, 0, 0, srcW, topH, 0, 0, srcW, topH)
-      // Bottom: player inventory section (last 96px of source)
-      ctx.drawImage(img, 0, srcH - playerH, srcW, playerH, 0, topH, srcW, playerH)
-      setDataUrl(canvas.toDataURL())
-    }
-    img.onerror = () => { if (!cancelled) setDataUrl(srcUrl) }
-    img.src = srcUrl
-    return () => { cancelled = true }
-  }, [srcUrl, containerRows])
-
-  return dataUrl
-}
+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
@@ -66,20 +36,24 @@ export function InventoryBackground({
   const textures = useTextures()
   const { scale } = useScale()
 
-  const rawBgUrl = textures.getGuiTextureUrl(definition.backgroundTexture)
-  // For generic_9xN (containerRows defined and < 6): canvas-stitch the texture
-  const stitchedUrl = useStitchedTexture(rawBgUrl, definition.containerRows ?? 6)
-  const bgUrl = definition.containerRows != null && definition.containerRows < 6
-    ? stitchedUrl   // may be null while stitching
-    : rawBgUrl
+  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"
@@ -93,42 +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 */}
-        {bgUrl && (
-        <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/ItemCanvas/ItemCanvas.tsx

@@ -3,6 +3,7 @@ import type { ItemStack } from '../../types'
 import { useTextures } from '../../context/TextureContext'
 import { useScale } from '../../context/ScaleContext'
 import { useDataUrl, isTextureFailed } from '../../cache/textureCache'
+import { renderBlockIcon } from '../../cache/blockRenderer'
 
 interface ItemCanvasProps {
   item: ItemStack
@@ -22,28 +23,68 @@ function getDurabilityColor(current: number, max: number): string {
   return '#ff5555'
 }
 
-/** Renders a single item: texture as <img>, count as <span>, durability as CSS bars. */
-export const ItemCanvas = memo(function ItemCanvas({
-  item,
-  size,
-  noCount = false,
-  noDurability = false,
-  className,
-  style,
-}: ItemCanvasProps) {
+/** Resolve item texture source: direct override, block render, or URL lookup. */
+function useItemTextureSrc(item: ItemStack): {
+  src: string | null
+  failed: boolean
+  loading: boolean
+} {
   const textures = useTextures()
-  const { contentSize, pixelSize } = useScale()
-  const renderSize = size ?? contentSize
 
-  const primaryUrl = textures.getItemTextureUrl(item)
-  // Skip the block-texture fallback when a textureKey override is already in use
-  const fallbackUrl = !item.textureKey && item.name ? textures.getBlockTextureUrl(item) : null
+  // Block texture: always run effect for blockTexture case
+  const blockConfig = item.blockTexture ?? null
+  const [blockDataUrl, setBlockDataUrl] = useState<string | null>(null)
+  const [blockFailed, setBlockFailed] = useState(false)
+
+  useEffect(() => {
+    if (!blockConfig) return
+    let cancelled = false
+    renderBlockIcon(
+      blockConfig.source,
+      blockConfig.top.slice,
+      blockConfig.left.slice,
+      blockConfig.right.slice,
+    )
+      .then((url) => {
+        if (!cancelled) setBlockDataUrl(url)
+      })
+      .catch(() => {
+        if (!cancelled) setBlockFailed(true)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [
+    blockConfig?.source,
+    blockConfig ? String(blockConfig.top.slice) : '',
+    blockConfig ? String(blockConfig.left.slice) : '',
+    blockConfig ? String(blockConfig.right.slice) : '',
+  ])
+
+  // Reset block state when switching away from blockTexture
+  useEffect(() => {
+    if (!blockConfig) {
+      setBlockDataUrl(null)
+      setBlockFailed(false)
+    }
+  }, [blockConfig])
+
+  // Direct texture (string) - use cache
+  const directUrl =
+    typeof item.texture === 'string' ? item.texture : null
+  const directDataUrl = useDataUrl(directUrl)
 
-  // Load primary URL as cached data URL
-  const primaryDataUrl = useDataUrl(primaryUrl)
+  // Default URL lookup
+  const primaryUrl = blockConfig ? '' : (typeof item.texture === 'string' ? '' : textures.getItemTextureUrl(item))
+  const fallbackUrl =
+    !blockConfig &&
+    !item.textureKey &&
+    item.name
+      ? textures.getBlockTextureUrl(item)
+      : null
+  const primaryDataUrl = useDataUrl(primaryUrl || null)
   const primaryFailed = primaryDataUrl === null || isTextureFailed(primaryUrl)
 
-  // Load fallback only once primary is known to have failed
   const [loadFallback, setLoadFallback] = useState(false)
   useEffect(() => {
     if (primaryFailed && fallbackUrl) setLoadFallback(true)
@@ -51,11 +92,56 @@ export const ItemCanvas = memo(function ItemCanvas({
   }, [primaryFailed, fallbackUrl])
   const fallbackDataUrl = useDataUrl(loadFallback ? fallbackUrl : null)
 
+  // Resolve final src by priority
+  if (typeof item.texture === 'string') {
+    return {
+      src: directDataUrl ?? null,
+      failed: directDataUrl === null || isTextureFailed(item.texture),
+      loading: directDataUrl === undefined,
+    }
+  }
+  if (item.texture instanceof HTMLImageElement) {
+    const img = item.texture
+    return {
+      src: img.complete && img.naturalWidth > 0 ? img.src : null,
+      failed: false,
+      loading: !img.complete,
+    }
+  }
+  if (blockConfig) {
+    return {
+      src: blockDataUrl,
+      failed: blockFailed,
+      loading: !blockDataUrl && !blockFailed,
+    }
+  }
+
   const src = loadFallback ? fallbackDataUrl : primaryDataUrl
   const failed = loadFallback
     ? (fallbackDataUrl === null || isTextureFailed(fallbackUrl ?? ''))
     : primaryFailed && !fallbackUrl
 
+  return {
+    src: src ?? null,
+    failed,
+    loading: src === undefined,
+  }
+}
+
+/** Renders a single item: texture as <img>, count as <span>, durability as CSS bars. */
+export const ItemCanvas = memo(function ItemCanvas({
+  item,
+  size,
+  noCount = false,
+  noDurability = false,
+  className,
+  style,
+}: ItemCanvasProps) {
+  const { contentSize, pixelSize } = useScale()
+  const renderSize = size ?? contentSize
+
+  const { src, failed, loading } = useItemTextureSrc(item)
+
   const hasDurability =
     !noDurability &&
     item.durability !== undefined &&

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

@@ -1,6 +1,8 @@
 .jei {
   font-family: 'Minecraft', monospace;
   image-rendering: pixelated;
+  height: 100%;
+  border-radius: 1px;
 }
 
 .searchInput::placeholder {