feat: initial romm web ui architecture, bento grids, and spatial gamepad bindings

src/context/InputModeContext.tsx

@@ -0,0 +1,60 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type InputMode = 'mouse' | 'gamepad';
+
+interface InputModeContextType {
+  mode: InputMode;
+  setMode: (mode: InputMode) => void;
+}
+
+const InputModeContext = createContext<InputModeContextType | undefined>(undefined);
+
+export const InputModeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [mode, setModeState] = useState<InputMode>('mouse');
+
+  const setMode = (newMode: InputMode) => {
+    if (newMode !== mode) {
+      setModeState(newMode);
+    }
+  };
+
+  useEffect(() => {
+    // Spatial Engine Override
+    if (mode === 'mouse') {
+      document.body.classList.remove('gamepad-active');
+    } else {
+      document.body.classList.add('gamepad-active');
+    }
+  }, [mode]);
+
+  useEffect(() => {
+    const onMouseMove = () => {
+      setMode('mouse');
+    };
+    const onMouseDown = () => {
+      setMode('mouse');
+    };
+
+    window.addEventListener('mousemove', onMouseMove, { passive: true });
+    window.addEventListener('mousedown', onMouseDown, { passive: true });
+
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mousedown', onMouseDown);
+    };
+  }, []);
+
+  return (
+    <InputModeContext.Provider value={{ mode, setMode }}>
+      {children}
+    </InputModeContext.Provider>
+  );
+};
+
+export const useInputMode = () => {
+  const context = useContext(InputModeContext);
+  if (context === undefined) {
+    throw new Error('useInputMode must be used within an InputModeProvider');
+  }
+  return context;
+};