Ruler Web Page (dev tool)

Blocked by #1552 

![Ruler UI-Iteration 2](https://github.com/user-attachments/assets/28537f45-771a-408d-ba4a-f1d6e505f0fe)

[Diagram link](https://viewer.diagrams.net/?tags=%7B%7D&lightbox=1&highlight=0000ff&layers=1&nav=1&title=Ruler%20UI.drawio#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D1xPWRSb0MUmKbcepWFvn8vK-IDBmzvXXY%26export%3Ddownload)
