Add a development alignment grid toggled with Ctrl+G

assets/js/app.js

@@ -746,6 +746,36 @@ window.addEventListener('mave:clipcopy', (event) => {
   }
 })
 
+// Development alignment grid: Ctrl+G toggles #dev-grid, which only renders
+// when dev routes are enabled. The state survives page loads.
+const DEV_GRID_KEY = "mave:dev-grid"
+
+const readDevGrid = () => {
+  try {
+    return localStorage.getItem(DEV_GRID_KEY) === "on"
+  } catch (_error) {
+    return false
+  }
+}
+
+const applyDevGrid = () => {
+  const grid = document.getElementById("dev-grid")
+  if (grid) grid.hidden = !readDevGrid()
+}
+
+window.addEventListener("keydown", (event) => {
+  const grid = document.getElementById("dev-grid")
+  if (!grid || !event.ctrlKey || event.metaKey || event.altKey || event.key.toLowerCase() !== "g") return
+
+  event.preventDefault()
+  grid.hidden = !grid.hidden
+  try {
+    localStorage.setItem(DEV_GRID_KEY, grid.hidden ? "off" : "on")
+  } catch (_error) {}
+})
+window.addEventListener("phx:page-loading-stop", applyDevGrid)
+applyDevGrid()
+
 // The lines below enable quality of life phoenix_live_reload
 // development features:
 //

lib/mave_core_web/components/layouts.ex

@@ -8,6 +8,32 @@ defmodule MaveCoreWeb.Layouts do
 
   embed_templates "layouts/*"
 
+  @doc """
+  Renders a development-only alignment grid overlay, toggled with Ctrl+G.
+
+  Renders nothing unless dev routes are enabled, so the overlay never ships
+  in production builds.
+  """
+  if Application.compile_env(:mave_core, :dev_routes, false) do
+    def dev_grid(assigns) do
+      ~H"""
+      <div
+        id="dev-grid"
+        aria-hidden="true"
+        hidden
+        class="pointer-events-none fixed inset-0 z-[9999]"
+        style="background-image: linear-gradient(to right, rgb(255 0 80 / 0.22) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 0 80 / 0.22) 1px, transparent 1px), linear-gradient(to right, rgb(255 0 80 / 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 0 80 / 0.08) 1px, transparent 1px); background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px;"
+      >
+      </div>
+      """
+    end
+  else
+    def dev_grid(assigns) do
+      ~H"""
+      """
+    end
+  end
+
   @doc """
   Shows the flash group with standard titles and content.
 

lib/mave_core_web/components/layouts/dashboard_root.html.heex

@@ -12,5 +12,6 @@
   </head>
   <body class="bg-white h-full overflow-hidden">
     {@inner_content}
+    <.dev_grid />
   </body>
 </html>

lib/mave_core_web/components/layouts/root.html.heex

@@ -11,5 +11,6 @@
   </head>
   <body>
     {@inner_content}
+    <.dev_grid />
   </body>
 </html>