minecraft-inventory 0.1.12 → 0.1.13

package/package.json

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

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -298,7 +298,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.12
+            INV 0.1.13
           </a>
         )}
 

package/src/components/ItemCanvas/ItemCanvas.tsx

@@ -193,29 +193,40 @@ export const ItemCanvas = memo(function ItemCanvas({
         />
       ) : null /* still loading — render nothing (slot stays empty) */}
 
-      {/* Durability bar */}
-      {hasDurability && (
-        <>
-          <div className="mc-inv-item-durability-bg" style={{
-            position: 'absolute',
-            bottom: 1,
-            left: 1,
-            width: 'calc(100% - 2px)',
-            height: Math.max(1, Math.round(renderSize * 0.063)),
-            background: '#000',
-            pointerEvents: 'none',
-          }} />
-          <div className="mc-inv-item-durability-bar" style={{
-            position: 'absolute',
-            bottom: 1,
-            left: 1,
-            width: `${(item.durability! / item.maxDurability!) * 100}%`,
-            height: Math.max(1, Math.round(renderSize * 0.063)),
-            background: barColor,
-            pointerEvents: 'none',
-          }} />
-        </>
-      )}
+      {/* Durability bar — vanilla layout: x=2, y=13 in 16×16 item area */}
+      {hasDurability && (() => {
+        const mcPx = Math.max(1, Math.round(pixelSize))
+        const barLeft = 2 * mcPx
+        const bgBottom = mcPx
+        const bgWidth = 13 * mcPx
+        const bgHeight = 2 * mcPx
+        const ratio = item.durability! / item.maxDurability!
+        const fillWidth = Math.round(13 * ratio) * mcPx
+        const fillHeight = mcPx
+        const fillBottom = 2 * mcPx
+        return (
+          <>
+            <div className="mc-inv-item-durability-bg" style={{
+              position: 'absolute',
+              bottom: bgBottom,
+              left: barLeft,
+              width: bgWidth,
+              height: bgHeight,
+              background: '#000',
+              pointerEvents: 'none',
+            }} />
+            <div className="mc-inv-item-durability-bar" style={{
+              position: 'absolute',
+              bottom: fillBottom,
+              left: barLeft,
+              width: fillWidth,
+              height: fillHeight,
+              background: barColor,
+              pointerEvents: 'none',
+            }} />
+          </>
+        )
+      })()}
 
       {/* Item count */}
       {!noCount && item.count > 1 && (