minecraft-inventory 0.1.19 → 0.1.21

package/package.json

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

package/src/InventoryGUI.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react'
+import { useCloseOnWClick } from './hooks/useCloseOnWClick'
 import type { InventoryConnector } from './connector/types'
 import type { SlotState } from './types'
 import { InventoryProvider } from './context/InventoryContext'
@@ -51,6 +52,8 @@ export function InventoryGUI({
 }: InventoryGUIProps) {
   const containerRef = useRef<HTMLDivElement>(null)
 
+  useCloseOnWClick(onClose)
+
   const handleClose = useCallback(
     (e: KeyboardEvent) => {
       if (e.code === 'Escape') onClose?.()

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react'
+import { useCloseOnWClick } from '../../hooks/useCloseOnWClick'
 import { useInventoryContext } from '../../context/InventoryContext'
 import { useScale } from '../../context/ScaleContext'
 import { getInventoryType } from '../../registry'
@@ -93,6 +94,8 @@ export function InventoryOverlay({
   const { heldItem, sendAction, setHeldItem, focusedSlot, setFocusedSlot } = useInventoryContext()
   const { scale } = useScale()
 
+  useCloseOnWClick(onClose)
+
   const def = getInventoryType(type)
   const invUnscaledW = def?.backgroundWidth ?? 176
   const sideGapPx = 5 * scale // gap from overlay edge and from inventory edge
@@ -196,7 +199,6 @@ export function InventoryOverlay({
         {(leftPanel || enableNotes || (showJEI && jeiPosition === 'left')) && (
           <div
             className="mc-inv-overlay-side mc-inv-overlay-side-left"
-            onClick={(e) => e.stopPropagation()}
             style={{ ...sidePanelBase, left: sideGapPx, pointerEvents: 'auto' }}
           >
             {enableNotes && (
@@ -205,13 +207,17 @@ export function InventoryOverlay({
               </div>
             )}
             {leftPanel && (
-              <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+              <div
+                onClick={(e) => e.stopPropagation()}
+                style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}
+              >
                 {leftPanel}
               </div>
             )}
             {showJEI && jeiPosition === 'left' && (
               <div
                 className="mc-inv-overlay-jei mc-inv-overlay-jei-left"
+                onClick={(e) => e.stopPropagation()}
                 style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', width: '100%' }}
               >
                 {jeiPanel}
@@ -304,7 +310,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.19
+            INV 0.1.21
           </a>
         )}
 

package/src/components/InventoryWindow/AnvilCost.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useScale } from '../../context/ScaleContext'
+import { useInventoryContext } from '../../context/InventoryContext'
+
+interface AnvilCostProps {
+  properties: Record<string, number>
+  backgroundWidth: number
+}
+
+export function AnvilCost({ properties, backgroundWidth }: AnvilCostProps) {
+  const { scale } = useScale()
+  const { windowState } = useInventoryContext()
+
+  const cost = properties.repairCost ?? 0
+  if (cost <= 0) return null
+
+  const hasResult = windowState?.slots.some((s) => s.index === 2 && s.item !== null) ?? false
+  if (!hasResult) return null
+
+  const tooExpensive = cost >= 40
+  const label = tooExpensive ? 'Too Expensive!' : `Enchantment Cost: ${cost}`
+  const color = tooExpensive ? '#FF6060' : '#80FF20'
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        right: 8 * scale,
+        top: 67 * scale,
+        height: 12 * scale,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        padding: `0 ${2 * scale}px`,
+        background: 'rgba(0, 0, 0, 0.3)',
+        fontSize: 7 * scale,
+        fontFamily: "'Minecraftia', 'Minecraft', monospace",
+        color,
+        whiteSpace: 'nowrap',
+        pointerEvents: 'none',
+      }}
+    >
+      {label}
+    </div>
+  )
+}

package/src/components/InventoryWindow/EnchantmentOptions.tsx

@@ -42,6 +42,23 @@ const ENCHANTMENT_NAMES: Record<number, string> = {
   74: 'Vanishing Curse',
 }
 
+const ROMAN_NUMERALS: [number, string][] = [
+  [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
+]
+
+function toRoman(num: number): string {
+  if (num <= 0) return ''
+  let result = ''
+  let remaining = num
+  for (const [value, symbol] of ROMAN_NUMERALS) {
+    while (remaining >= value) {
+      result += symbol
+      remaining -= value
+    }
+  }
+  return result
+}
+
 interface EnchantmentOptionsProps {
   properties: Record<string, number>
   x: number
@@ -49,9 +66,9 @@ interface EnchantmentOptionsProps {
 }
 
 const OPTION_KEYS = [
-  { levelKey: 'topEnchantLevel', idKey: 'topEnchantId', slot: 0 },
-  { levelKey: 'middleEnchantLevel', idKey: 'middleEnchantId', slot: 1 },
-  { levelKey: 'bottomEnchantLevel', idKey: 'bottomEnchantId', slot: 2 },
+  { levelKey: 'topEnchantLevel', idKey: 'topEnchantId', clueKey: 'topLevelClue', slot: 0 },
+  { levelKey: 'middleEnchantLevel', idKey: 'middleEnchantId', clueKey: 'middleLevelClue', slot: 1 },
+  { levelKey: 'bottomEnchantLevel', idKey: 'bottomEnchantId', clueKey: 'bottomLevelClue', slot: 2 },
 ]
 
 export function EnchantmentOptions({ properties, x, y }: EnchantmentOptionsProps) {
@@ -69,11 +86,13 @@ export function EnchantmentOptions({ properties, x, y }: EnchantmentOptionsProps
         gap: 0,
       }}
     >
-      {OPTION_KEYS.map(({ levelKey, idKey, slot }, i) => {
+      {OPTION_KEYS.map(({ levelKey, idKey, clueKey, slot }, i) => {
         const level = properties[levelKey] ?? 0
         const enchId = properties[idKey] ?? -1
+        const levelClue = properties[clueKey] ?? 0
         const name = ENCHANTMENT_NAMES[enchId] ?? (enchId >= 0 ? `Enchant #${enchId}` : '???')
         const disabled = level <= 0
+        const levelSuffix = levelClue > 0 ? ` ${toRoman(levelClue)}` : ''
 
         return (
           <div
@@ -99,7 +118,7 @@ export function EnchantmentOptions({ properties, x, y }: EnchantmentOptionsProps
               {level}
             </span>
             <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {disabled ? '' : name}
+              {disabled ? '' : `${name}${levelSuffix}`}
             </span>
           </div>
         )

package/src/components/InventoryWindow/InventoryWindow.tsx

@@ -11,6 +11,7 @@ import { VillagerTradeList } from './VillagerTradeList'
 import { EnchantmentOptions } from './EnchantmentOptions'
 import { HotbarExtras } from './HotbarExtras'
 import { AnvilInput } from './AnvilInput'
+import { AnvilCost } from './AnvilCost'
 import { EntityDisplay } from './EntityDisplay'
 
 interface InventoryWindowProps {
@@ -68,9 +69,9 @@ export function InventoryWindow({
   // Player inventory: don't show title (it's just the player's own inventory)
   const effectiveTitle = type === 'player' ? undefined : (title ?? windowState?.title ?? def.title)
   const isVillager = type === 'villager'
-  const isEnchanting = type === 'enchanting_table'
+  const isEnchanting = def?.name === 'enchanting_table'
   const isHotbar = type === 'hotbar'
-  const isAnvil = type === 'anvil'
+  const isAnvil = def?.name === 'anvil'
 
   const resolveItem = (slotIndex: number) => {
     const fromProp = effectiveSlots.find((s) => s.index === slotIndex)
@@ -139,8 +140,9 @@ export function InventoryWindow({
           />
         )}
 
-        {/* Anvil rename input */}
+        {/* Anvil rename input + cost display */}
         {isAnvil && <AnvilInput x={59} y={20} width={110} height={16} />}
+        {isAnvil && <AnvilCost properties={effectiveProperties} backgroundWidth={def.backgroundWidth} />}
 
         {/* Hotbar extras: active slot indicator, offhand slot, open-inventory button */}
         {isHotbar && (

package/src/components/JEI/JEI.tsx

@@ -3,6 +3,7 @@ import type { ItemStack, RecipeGuide, RecipeNavFrame, BlockTextureRender } from
 import { useScale } from '../../context/ScaleContext'
 import { useInventoryContext } from '../../context/InventoryContext'
 import { Slot } from '../Slot'
+import { StarIcon } from './StarIcon'
 import styles from './JEI.module.css'
 
 export interface JEIItem {
@@ -303,7 +304,7 @@ export function JEI({
             style={{ fontSize: 6 * scale, padding: `${scale}px ${2 * scale}px` }}
             title={showFavorites ? 'Show all items' : 'Show favorites (F to toggle)'}
           >
-            ★
+            <StarIcon size={Math.max(1, Math.round(6 * scale))} />
           </button>
         </div>
       </div>
@@ -371,14 +372,13 @@ export function JEI({
                     position: 'absolute',
                     top: 0,
                     right: 0,
-                    fontSize: Math.round(5 * scale),
-                    color: '#ffcc00',
-                    lineHeight: 1,
+                    lineHeight: 0,
                     pointerEvents: 'none',
-                    textShadow: `0 0 ${scale}px rgba(0,0,0,0.8)`,
+                    color: '#ffd700',
+                    filter: `drop-shadow(0 0 ${Math.max(1, scale)}px rgba(0,0,0,0.85))`,
                   }}
                 >
-                  ★
+                  <StarIcon size={Math.max(1, Math.round(6 * scale))} />
                 </span>
               )}
             </div>

package/src/components/JEI/StarIcon.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+/** Pixel-art star (18×18 viewBox), same appearance on all platforms */
+const STAR_PATH =
+  'M15.4375 15.1238L15.625 15.3113V16.8113L15.4375 16.9988H14.6875L14.5 16.8113V16.4363L14.3125 16.2488H12.8125L12.625 16.0613V15.3113L12.4375 15.1238H10.9375L10.75 14.9363V14.1863L10.5625 13.9988H7.9375L7.75 14.1863V14.9363L7.5625 15.1238H6.0625L5.875 15.3113V16.0613L5.6875 16.2488H4.1875L4 16.4363V16.8113L3.8125 16.9988H3.0625L2.875 16.8113V15.3113L3.0625 15.1238H3.4375L3.625 14.9363V13.8113L3.8125 13.6238H4.1875L4.375 13.4363V11.9363L4.5625 11.7488H4.9375L5.125 11.5613V10.0613L4.9375 9.87384H4.1875L4 9.68634V8.93634L3.8125 8.74884H2.6875L2.5 8.56134V7.81134L2.3125 7.62384H1.1875L1 7.43634V6.68634L1.1875 6.49884H6.63738L6.82488 6.31134V5.61543V4.60586L7.01238 4.41836H7.5625L7.75 4.23086V2.6875L7.9375 2.5H8.43022L8.61772 2.3125V1.1875L8.80522 1H9.66735L9.85485 1.1875V2.3125L10.0424 2.5H10.5625L10.75 2.6875V4.23086L10.9375 4.41836H11.4375L11.625 4.60586V6.31134L11.8125 6.49884H17.3125L17.5 6.68634V7.43634L17.3125 7.62384H16.1875L16 7.81134V8.56134L15.8125 8.74884H14.6875L14.5 8.93634V9.68634L14.3125 9.87384H13.5625L13.375 10.0613V11.5613L13.5625 11.7488H13.9375L14.125 11.9363V13.4363L14.3125 13.6238H14.6875L14.875 13.8113V14.9363L15.0625 15.1238H15.4375Z'
+
+export interface StarIconProps {
+  size: number
+  className?: string
+  style?: React.CSSProperties
+  title?: string
+}
+
+export function StarIcon({ size, className, style, title }: StarIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={{ display: 'block', flexShrink: 0, ...style }}
+      aria-hidden={title ? undefined : true}
+      role={title ? 'img' : undefined}
+    >
+      {title ? <title>{title}</title> : null}
+      <path d={STAR_PATH} fill="currentColor" />
+    </svg>
+  )
+}

package/src/components/Notes/Notes.tsx

@@ -134,14 +134,14 @@ export function Notes({
         ...style,
       }}
     >
-      <div style={{
+      {/* <div style={{
         padding: `${3 * scale}px ${4 * scale}px`,
         color: '#404040',
         fontWeight: 'bold',
         flexShrink: 0,
       }}>
         Current Tasks
-      </div>
+      </div> */}
 
       {/* Task list */}
       <div style={{ overflowY: 'auto', padding: `${2 * scale}px`, minHeight: 0 }}>
@@ -162,11 +162,15 @@ export function Notes({
               marginBottom: 2 * scale,
               padding: `${2 * scale}px`,
             }}>
-              <span style={{ flex: 1, color: '#222', wordBreak: 'break-word', lineHeight: 1.3 }}>
+              <span style={{ flex: 1, color: '#d6d6d6', wordBreak: 'break-word', lineHeight: 1.3 }}>
                 {note.text}
               </span>
               <button
-                onClick={() => removeNote(note.id)}
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  removeNote(note.id)
+                }}
                 style={{
                   background: '#8b0000',
                   color: '#fff',
@@ -201,6 +205,7 @@ export function Notes({
             value={draft}
             rows={2}
             autoFocus
+            onClick={(e) => e.stopPropagation()}
             onChange={(e) => {
               setDraft(e.target.value.replace(/[\r\n]/g, ''))
             }}
@@ -229,7 +234,12 @@ export function Notes({
         <div style={{ display: 'flex', flexDirection: 'column', gap: scale, flexShrink: 0 }}>
           {showInput && (
             <button
-              onClick={() => { setShowInput(false); setDraft('') }}
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation()
+                setShowInput(false)
+                setDraft('')
+              }}
               title="Hide"
               style={{
                 background: '#5a3a3a',
@@ -246,7 +256,11 @@ export function Notes({
             </button>
           )}
           <button
-            onClick={handleAddButtonClick}
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation()
+              handleAddButtonClick()
+            }}
             disabled={showInput && !draft.trim()}
             style={{
               background: '#404040',

package/src/components/Slot/Slot.tsx

@@ -272,6 +272,12 @@ export function Slot({
 
       if (pKeyActive) setPKeyActive(false)
 
+      // JEI / recipe / custom slots: same handler as desktop onMouseUp (not focus/swap).
+      if (onClickOverride) {
+        onClickOverride('left', 'normal')
+        return
+      }
+
       if (heldItem) {
         // When holding an item, place it (standard behavior, no focus needed)
         sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
@@ -291,7 +297,7 @@ export function Slot({
         setFocusedSlot(null)
       }
     },
-    [isMobile, disabled, heldItem, sendAction, index, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot],
+    [isMobile, disabled, heldItem, sendAction, index, pKeyActive, setPKeyActive, focusedSlot, setFocusedSlot, onClickOverride],
   )
 
   const handleMobilePickAll = useCallback(() => {

package/src/context/InventoryContext.tsx

@@ -102,6 +102,8 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
   // Set to true when endDrag fires; cleared on the next mouseDown in Slot.
   // Prevents spurious mouseUp events from sending unwanted clicks after a drag.
   const dragEndedRef = useRef(false)
+  /** Latest full context value; updated every render for global debug (`globalThis.__mcInv.state`). */
+  const valueRef = useRef<InventoryContextValue | null>(null)
 
   useEffect(() => {
     if (!connector) return
@@ -284,19 +286,6 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
     [windowState],
   )
 
-  // Expose state to window for easier debugging from browser DevTools.
-  // Access via: window.__mcInv
-  useEffect(() => {
-    ;(window as unknown as Record<string, unknown>).__mcInv = {
-      get windowState() { return windowStateRef.current },
-      get heldItem() { return heldItemRef.current },
-      get dragSlots() { return dragSlots },
-      get isDragging() { return isDragging },
-      get focusedSlot() { return focusedSlot },
-      get pKeyActive() { return pKeyActive },
-    }
-  })
-
   const value: InventoryContextValue = {
     windowState,
     playerState,
@@ -331,5 +320,20 @@ export function InventoryProvider({ connector, children, noDragSpread = false, n
     dragEndedRef,
   }
 
+  valueRef.current = value
+
+  // Full inventory UI state on global for DevTools: globalThis.__mcInv.state (e.g. windowState, playerState, heldItem, drag state).
+  useEffect(() => {
+    const g = globalThis as any
+    g.__mcInv = {
+      get state() {
+        return valueRef.current
+      },
+    }
+    return () => {
+      delete g.__mcInv
+    }
+  }, [])
+
   return <InventoryContext.Provider value={value}>{children}</InventoryContext.Provider>
 }

package/src/hooks/useCloseOnWClick.ts

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from 'react'
+
+function isTypingTarget(el: EventTarget | null): boolean {
+  if (!el || !(el instanceof HTMLElement)) return false
+  const tag = el.tagName
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true
+  if (el.isContentEditable) return true
+  return false
+}
+
+/**
+ * While W is held, a primary-button pointerdown anywhere (capture phase) calls onClose.
+ * Ignores events when the target is an input/textarea/select or contenteditable.
+ */
+export function useCloseOnWClick(onClose?: () => void) {
+  const onCloseRef = useRef(onClose)
+  onCloseRef.current = onClose
+  const wHeldRef = useRef(false)
+
+  useEffect(() => {
+    if (!onClose) return
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.code === 'KeyW' && !e.repeat) wHeldRef.current = true
+    }
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.code === 'KeyW') wHeldRef.current = false
+    }
+    const resetW = () => {
+      wHeldRef.current = false
+    }
+
+    const onPointerDownCapture = (e: PointerEvent) => {
+      if (e.button !== 0 || !wHeldRef.current) return
+      if (isTypingTarget(e.target)) return
+      const cb = onCloseRef.current
+      if (!cb) return
+      cb()
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+    window.addEventListener('keyup', onKeyUp)
+    window.addEventListener('blur', resetW)
+    document.addEventListener('pointerdown', onPointerDownCapture, true)
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      window.removeEventListener('keyup', onKeyUp)
+      window.removeEventListener('blur', resetW)
+      document.removeEventListener('pointerdown', onPointerDownCapture, true)
+    }
+  }, [onClose])
+}

package/src/registry/inventories.ts

@@ -452,6 +452,9 @@ export const inventoryDefinitions = makeInventoryDefinitions({
       topEnchantId: { dataSlot: 4, description: 'Top enchantment ID' },
       middleEnchantId: { dataSlot: 5, description: 'Middle enchantment ID' },
       bottomEnchantId: { dataSlot: 6, description: 'Bottom enchantment ID' },
+      topLevelClue: { dataSlot: 7, description: 'Top enchantment level clue (e.g. III)' },
+      middleLevelClue: { dataSlot: 8, description: 'Middle enchantment level clue (e.g. II)' },
+      bottomLevelClue: { dataSlot: 9, description: 'Bottom enchantment level clue (e.g. I)' },
     },
     slots: [
       { x: 15, y: 47, group: 'enchant' },
@@ -645,7 +648,7 @@ export const inventoryDefinitions = makeInventoryDefinitions({
     backgroundHeight: 166,
     slots: [
       { x: 15, y: 15, group: 'input', label: 'Map' },
-      { x: 15, y: 39, group: 'input', label: 'Paper/Map' },
+      { x: 15, y: 52, group: 'input', label: 'Paper/Map' },
       { x: 145, y: 39, group: 'result', resultSlot: true },
       ...playerInv(84),
     ],