NEW REWORKED inventory GUI : Spread, Anvil, Enchant and more!

package.json

@@ -88,6 +88,7 @@
     "lodash-es": "^4.17.21",
     "mcraft-fun-mineflayer": "^0.1.23",
     "minecraft-data": "3.103.0",
+    "minecraft-inventory": "^0.1.2",
     "minecraft-protocol": "github:PrismarineJS/node-minecraft-protocol#master",
     "mineflayer-item-map-downloader": "github:zardoy/mineflayer-item-map-downloader",
     "mojangson": "^2.0.4",

src/react/inventory/Inventory.tsx

@@ -0,0 +1,37 @@
+import { TextureProvider, ScaleProvider, InventoryProvider, InventoryOverlay, createMineflayerConnector, MineflayerBot, InventoryOverlayProps } from 'minecraft-inventory/src'
+import { useMemo } from 'react'
+import { proxy, useSnapshot } from 'valtio'
+import { useAppScale } from '../../scaleInterface'
+
+export const openInventoryProxy = proxy({
+  inventory: undefined as InventoryOverlayProps | undefined,
+})
+
+export const Inventory = () => {
+  const windowType = 'player'
+  const connector = useMemo(() => createMineflayerConnector(bot as MineflayerBot), [bot])
+  const appScale = useAppScale()
+  const { inventory } = useSnapshot(openInventoryProxy) as typeof openInventoryProxy
+
+  if (!inventory) return null
+
+  return <div style={{
+    position: 'fixed',
+    inset: 0,
+    width: '100%',
+    height: '100dvh',
+    zIndex: 1000,
+    // backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  }}>
+    <TextureProvider>
+      <ScaleProvider scale={appScale}>
+        <InventoryProvider connector={connector}>
+          <InventoryOverlay
+            showJEI
+            {...inventory}
+          />
+        </InventoryProvider>
+      </ScaleProvider>
+    </TextureProvider>
+  </div>
+}

src/reactUi.tsx

@@ -75,6 +75,7 @@ import AllSettingsEditor from './react/AllSettingsEditor'
 import { isPlayground, urlParams } from './playgroundIntegration'
 import { withInjectableUi } from './react/extendableSystem'
 import { hadReactUiRegistered } from './clientMods'
+import { Inventory } from './react/inventory/Inventory'
 
 const isFirefox = ua.getBrowser().name === 'Firefox'
 if (isFirefox) {
@@ -204,6 +205,7 @@ const InGameUi = () => {
     <PerComponentErrorBoundary>
       <SignEditorProvider />
       <DisplayQr />
+      <Inventory />
     </PerComponentErrorBoundary>
     <RobustPortal to={document.body}>
       {displayFullmap && <MinimapProvider adapter={adapter} displayMode='fullmapOnly' />}