minecraft-inventory 0.1.29 → 0.1.30

package/package.json

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

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -61,6 +61,8 @@ export interface InventoryOverlayProps {
   renderEntity?: ((width: number, height: number) => React.ReactNode) | null
   /** Hide the "INV" version watermark (opt-out) */
   noWatermark?: boolean
+  /** Called when the gear button is clicked. When provided, a small settings gear appears in the overlay. */
+  onOpenSettings?: () => void
 }
 
 export function InventoryOverlay({
@@ -90,9 +92,11 @@ export function InventoryOverlay({
   entityDisplayDebug = false,
   renderEntity,
   noWatermark = false,
+  onOpenSettings,
 }: InventoryOverlayProps) {
   const { heldItem, sendAction, setHeldItem, focusedSlot, setFocusedSlot } = useInventoryContext()
   const { scale } = useScale()
+  const [settingsHovered, setSettingsHovered] = useState(false)
 
   useCloseOnWClick(onClose)
 
@@ -326,10 +330,42 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.29
+            INV 0.1.30
           </a>
         )}
 
+        {/* Settings gear button */}
+        {onOpenSettings && (
+          <button
+            className="mc-inv-settings-btn"
+            onClick={(e) => { e.stopPropagation(); onOpenSettings() }}
+            onMouseDown={(e) => e.stopPropagation()}
+            onMouseEnter={() => setSettingsHovered(true)}
+            onMouseLeave={() => setSettingsHovered(false)}
+            title="Settings"
+            style={{
+              position: 'absolute',
+              top: 4,
+              right: 4,
+              background: 'none',
+              border: 'none',
+              padding: 2,
+              cursor: 'pointer',
+              color: settingsHovered ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.35)',
+              pointerEvents: 'auto',
+              zIndex: 2,
+              lineHeight: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <svg viewBox="0 0 20 20" width={14} height={14} fill="currentColor">
+              <path d="M8.5 0h3l.5 2.5 1.3.5L15.5 1.5l2.1 2.1-1.5 2.2.5 1.3L19.1 8v3l-2.5.5-.5 1.3 1.5 2.2-2.1 2.1-2.2-1.5-1.3.5L11.5 19h-3L8 16.5l-1.3-.5L4.5 17.5l-2.1-2.1 1.5-2.2L3.4 12 .9 11.5v-3L3.4 8l.5-1.3L2.4 4.5 4.5 2.4l2.2 1.5L8 3.4 8.5 0zM10 6.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"/>
+            </svg>
+          </button>
+        )}
+
         {/* Debug bounds */}
         {debugBounds && (
           <div