minecraft-inventory 0.1.5 → 0.1.7

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.5",
+  "version": "0.1.7",
   "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,127 @@
+/**
+ * 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 / 2 - 2 // face size with padding (14px at 32px canvas)
+        const ox = (OUTPUT_SIZE - 2 * s) / 2 // horizontal offset to center
+        const oy = (OUTPUT_SIZE - 2 * s) / 2 // vertical offset to center
+        const [tx, ty, tw, th] = top
+        const [lx, ly, lw, lh] = left
+        const [rx, ry, rw, rh] = right
+
+        // Enable smoothing for isometric transforms (better diagonal edges)
+        ctx.imageSmoothingEnabled = true
+        ctx.imageSmoothingQuality = 'high'
+
+        // Isometric cube using affine transforms.
+        // Face vertices for a cube centered in OUTPUT_SIZE × OUTPUT_SIZE:
+        //   Top:   (s+ox, oy) → (2s+ox, s/2+oy) → (s+ox, s+oy) → (ox, s/2+oy)
+        //   Left:  (ox, s/2+oy) → (s+ox, s+oy) → (s+ox, 2s+oy) → (ox, 3s/2+oy)
+        //   Right: (s+ox, s+oy) → (2s+ox, s/2+oy) → (2s+ox, 3s/2+oy) → (s+ox, 2s+oy)
+
+        // Top face
+        ctx.save()
+        ctx.setTransform(1, 0.5, -1, 0.5, s + ox, oy)
+        ctx.drawImage(image, tx, ty, tw, th, 0, 0, s, s)
+        ctx.restore()
+
+        // Left face (darkened)
+        ctx.save()
+        ctx.setTransform(1, 0.5, 0, 1, ox, s / 2 + oy)
+        ctx.drawImage(image, lx, ly, lw, lh, 0, 0, s, s)
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'
+        ctx.fillRect(0, 0, s, s)
+        ctx.restore()
+
+        // Right face (slightly darkened)
+        ctx.save()
+        ctx.setTransform(1, -0.5, 0, 1, s + ox, s + oy)
+        ctx.drawImage(image, rx, ry, rw, rh, 0, 0, s, s)
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'
+        ctx.fillRect(0, 0, s, s)
+        ctx.restore()
+
+        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

@@ -52,6 +52,8 @@ export interface InventoryOverlayProps {
   debugBounds?: boolean
   /** Show red debug outline around the inventory background */
   showDebug?: boolean
+  /** When true, entity display area shows layout debug bounds instead of the default image. */
+  entityDisplayDebug?: 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) */
@@ -80,6 +82,7 @@ export function InventoryOverlay({
   children,
   debugBounds = false,
   showDebug = false,
+  entityDisplayDebug = false,
   renderEntity,
   noWatermark = false,
 }: InventoryOverlayProps) {
@@ -242,7 +245,14 @@ export function InventoryOverlay({
                   onPushFrame={handleRecipePushFrame}
                 />
               ) : (
-                <InventoryWindow type={type} title={title} properties={properties} showDebug={showDebug} renderEntity={renderEntity} />
+                <InventoryWindow
+                  type={type}
+                  title={title}
+                  properties={properties}
+                  showDebug={showDebug}
+                  entityDisplayDebug={entityDisplayDebug}
+                  renderEntity={renderEntity}
+                />
               )}
             </div>
           </div>
@@ -288,7 +298,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.0.0
+            INV 0.1.7
           </a>
         )}
 

package/src/components/InventoryWindow/EntityDisplay.tsx

@@ -1,13 +1,22 @@
 import React from 'react'
 import { useScale } from '../../context/ScaleContext'
-import type { EntityDisplayArea } from '../../types'
+import type { EntityDisplayArea, InventoryTypeDefinition } from '../../types'
+import { ENTITY_PLACEHOLDER_IMAGES } from './defaultEntityImages'
 
 interface EntityDisplayProps {
   area: EntityDisplayArea
+  placeholder: NonNullable<InventoryTypeDefinition['entityPlaceholder']>
+  /** When true, draw layout debug bounds instead of the default image (ignored if renderEntity is set). */
+  debug?: boolean
   renderEntity?: ((width: number, height: number) => React.ReactNode) | null
 }
 
-export function EntityDisplay({ area, renderEntity }: EntityDisplayProps) {
+export function EntityDisplay({
+  area,
+  placeholder,
+  debug = false,
+  renderEntity,
+}: EntityDisplayProps) {
   const { scale } = useScale()
 
   if (renderEntity === null) return null
@@ -15,6 +24,44 @@ export function EntityDisplay({ area, renderEntity }: EntityDisplayProps) {
   const w = area.width * scale
   const h = area.height * scale
 
+  let content: React.ReactNode
+  if (renderEntity) {
+    content = renderEntity(w, h)
+  } else if (debug) {
+    content = (
+      <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',
+        }}
+      />
+    )
+  } else {
+    const image = ENTITY_PLACEHOLDER_IMAGES[placeholder]
+    if (!image) return null
+    content = (
+      <img
+        src={ENTITY_PLACEHOLDER_IMAGES[placeholder]}
+        alt=""
+        draggable={false}
+        className="mc-inv-entity-display-image"
+        style={{
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+          pointerEvents: 'none',
+          userSelect: 'none',
+          imageRendering: 'pixelated',
+        }}
+      />
+    )
+  }
+
   return (
     <div
       className="mc-inv-entity-display"
@@ -27,20 +74,7 @@ export function EntityDisplay({ area, renderEntity }: EntityDisplayProps) {
         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',
-          }}
-        />
-      )}
+      {content}
     </div>
   )
 }

package/src/components/InventoryWindow/InventoryBackground.tsx

@@ -37,7 +37,7 @@ export function InventoryBackground({
   const { scale } = useScale()
 
   const bgUrl = textures.getGuiTextureUrl(definition.backgroundTexture)
-  const isStitched = definition.containerRows != null && definition.containerRows < 6
+  const isStitched = definition.containerRows != null && definition.containerRows <= 6
 
   const w = definition.backgroundWidth * scale
   const h = definition.backgroundHeight * scale

package/src/components/InventoryWindow/InventoryWindow.tsx

@@ -22,6 +22,8 @@ interface InventoryWindowProps {
   style?: React.CSSProperties
   enableKeyboardShortcuts?: boolean
   showDebug?: boolean
+  /** When true, entity slot shows layout debug bounds instead of the default placeholder image. */
+  entityDisplayDebug?: boolean
   /** Override entity display rendering. Pass a function returning JSX, or null to hide. */
   renderEntity?: ((width: number, height: number) => React.ReactNode) | null
 }
@@ -35,6 +37,7 @@ export function InventoryWindow({
   style,
   enableKeyboardShortcuts = true,
   showDebug = false,
+  entityDisplayDebug = false,
   renderEntity,
 }: InventoryWindowProps) {
   const def = getInventoryType(type)
@@ -104,8 +107,13 @@ export function InventoryWindow({
         ))}
 
         {/* Entity display area */}
-        {def.entityDisplay && (
-          <EntityDisplay area={def.entityDisplay} renderEntity={renderEntity} />
+        {def.entityDisplay && def.entityPlaceholder && (
+          <EntityDisplay
+            area={def.entityDisplay}
+            placeholder={def.entityPlaceholder}
+            debug={entityDisplayDebug}
+            renderEntity={renderEntity}
+          />
         )}
 
         {/* Progress bars */}

package/src/components/InventoryWindow/defaultEntityImages.ts

@@ -0,0 +1,13 @@
+import playerImage from '../../assets/entities/player.png'
+import horseImage from '../../assets/entities/horse.png'
+import llamaImage from '../../assets/entities/llama.png'
+import { InventoryTypeDefinition } from '../../types'
+
+export const ENTITY_PLACEHOLDER_IMAGES: Record<
+  NonNullable<InventoryTypeDefinition['entityPlaceholder']>,
+  string | undefined
+> = {
+  player: playerImage,
+  horse: horseImage,
+  llama: llamaImage,
+}

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 {