From 042868fec1f02a1effca23382721f4aabda48c54 Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Tue, 4 Aug 2026 11:24:51 +0000
Subject: [PATCH] feat(nuxt): show site version in footer and changelog in the
 h4ck panel

---
 .cspell.json                               |   6 +
 .gitignore                                 |   3 +
 nuxt/DEV-TOOLS.md                          |  63 +-
 nuxt/app/components/DevGrid.vue            | 722 ++-------------------
 nuxt/app/components/DevGridTools.vue       | 712 ++++++++++++++++++++
 nuxt/app/layouts/default.vue               |   6 +-
 nuxt/content.config.ts                     |   8 +
 nuxt/nuxt.config.ts                        |   8 +
 nuxt/package.json                          |   4 +
 nuxt/scripts/getAppVersion.mjs             |  16 +
 nuxt/scripts/sync-changelog.mjs            |  29 +
 nuxt/tests/components/DevGrid.spec.ts      | 639 +++---------------
 nuxt/tests/components/DevGridTools.spec.ts | 667 +++++++++++++++++++
 nuxt/tests/components/layout.spec.ts       |  20 +-
 nuxt/tests/seo/seo.spec.ts                 |  48 ++
 15 files changed, 1736 insertions(+), 1215 deletions(-)
 create mode 100644 nuxt/app/components/DevGridTools.vue
 create mode 100644 nuxt/scripts/getAppVersion.mjs
 create mode 100644 nuxt/scripts/sync-changelog.mjs
 create mode 100644 nuxt/tests/components/DevGridTools.spec.ts

diff --git a/.cspell.json b/.cspell.json
index c9c86090..dae3ea53 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -101,8 +101,14 @@
     "wordmark",
     "crispedges",
     "mistagged",
+    "prerender",
     "prerendered",
     "prerendering",
+    "gtag",
+    "BRPZD",
+    "Standardised",
+    "modernised",
+    "repointed",
     "pathauto",
     "langcode",
     "onecol",
diff --git a/.gitignore b/.gitignore
index 7e31f5fc..b5b263dc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,6 @@ nuxt/.netlify
 
 # Playwright storage-state (session cookies) saved by screenshot-story.mjs
 nuxt/scripts/.auth/
+
+# Generated by scripts/sync-changelog.mjs — CHANGELOG.md is the source of truth
+nuxt/content/changelog.md
diff --git a/nuxt/DEV-TOOLS.md b/nuxt/DEV-TOOLS.md
index ca0d28b1..4136ddca 100644
--- a/nuxt/DEV-TOOLS.md
+++ b/nuxt/DEV-TOOLS.md
@@ -1,8 +1,11 @@
 # stuar.tc Dev Tools
 
-A secret dev-only overlay suite embedded in the site, available only
-when running the local dev server (`import.meta.dev`). Activated via
-the Konami code. Zero production footprint.
+A secret overlay suite embedded in the site. Activated via the Konami
+code, on every build — dev and production. Once unlocked, production
+visitors see only the **Version** section below; the rest (Color
+Scheme, Dev Overlay, Measure Tool, Module List, Client Data) stays
+dev-only, gated on `import.meta.dev`, and its code never ships to
+production visitors at all (see "Implementation notes").
 
 ## Unlocking
 
@@ -31,6 +34,15 @@ Authentication is session-only; it resets on page reload.
 After authenticating, clicking π opens the **Dev Console**
 (`H4CK TH3 PL4N3T`).
 
+### Version
+
+The site's current version (from `CHANGELOG.md`) and a **Changelog**
+toggle. Collapsed by default — expanding it renders the full release
+history inline, in a scrollable box, without leaving the panel or
+pushing the rest of the console (dev tools, in dev mode) below the
+fold. There's no separate `/changelog` page; this is the only place
+it renders. This section is available in production.
+
 ### Color Scheme
 
 Switch the site's primary colour at runtime. Changes update every
@@ -123,8 +135,22 @@ instead.
 
 ## Implementation notes
 
-- All code lives in `app/components/DevGrid.vue` (rendered via
-  `<DevGrid v-if="isDev" />` in `layouts/default.vue`).
+- Split across two components. `app/components/DevGrid.vue` is the
+  shell: Konami detection, the π badge, the password modal, the
+  console frame, and the Version section — always rendered
+  (`<DevGrid />` in `layouts/default.vue`, unconditional).
+  `app/components/DevGridTools.vue` holds the dev-only sections
+  (Color Scheme, Dev Overlay, Measure Tool, Module List, Client
+  Data), mounted from DevGrid only when `import.meta.dev` is true,
+  via Nuxt's `Lazy` component prefix (`<LazyDevGridTools>`) — its
+  code is a separate chunk, never fetched by production visitors.
+- The changelog is fetched (`queryCollection('changelog')`) and
+  rendered (`<LazyContentRenderer>`) only once the console is
+  actually opened, and only rendered once the Changelog toggle is
+  expanded — both deferred so `@nuxt/content`'s rendering pipeline
+  isn't in every visitor's eager bundle for a panel most never find.
+  See `nuxt/scripts/sync-changelog.mjs` for how `CHANGELOG.md`
+  becomes a content collection in the first place.
 - Pure geometry utilities are in `app/utils/dev-measure.ts` —
   side-effect-free and independently unit tested.
 - Theme responsiveness uses
@@ -136,11 +162,26 @@ instead.
 - Measure overlay uses a full-screen `pointer-events: all` div as a
   capture layer. `elementFromPoint` temporarily blinds the div
   (`pointer-events: none`) to hit-test the real page beneath it.
+- DevGrid's own Escape handler covers the console/password modals
+  only. DevGridTools owns a second listener for its own overlays
+  (measure mode, static shell) — both toggles that open those
+  overlays also close the console first, so there's no ordering
+  dependency between the two listeners.
+- A public, always-visible version indicator also lives in the site
+  footer (`@stuartclark/ui`'s `AppFooter`, `version` prop) — separate
+  from this panel, for visitors who never find the Konami code.
+
+## Future direction
+
+You've floated eventually splitting this into its own module with
+multiple passwords unlocking different tiers — a public-safe one
+(this one), separate secret ones, some behind 2FA. Not built yet;
+tracked in `openspec/changes/tiered-dev-console-access/`.
 
 ## Testing
 
 ```bash
-# Run all tests including DevGrid
+# Run all tests including DevGrid/DevGridTools
 pnpm test
 
 # Coverage (must stay 100%)
@@ -150,5 +191,11 @@ pnpm test:coverage
 Tests live in:
 
 - `tests/utils/dev-measure.spec.ts` — pure geometry utilities
-- `tests/components/DevGrid.spec.ts` — component interactions
-  (konami, password, overlays, measure)
+- `tests/components/DevGrid.spec.ts` — shell: konami, password,
+  console open/close, Version section, production-mode behaviour
+- `tests/components/DevGridTools.spec.ts` — dev-only sections:
+  overlays, measure tool, color scheme, module list, client data
+- `tests/seo/seo.spec.ts` — end-to-end check (real browser, real
+  Konami code) against the generated production build: footer
+  version text, no `/changelog` route, and the panel's changelog
+  content rendering inline once unlocked
diff --git a/nuxt/app/components/DevGrid.vue b/nuxt/app/components/DevGrid.vue
index 697d9e17..648ace32 100644
--- a/nuxt/app/components/DevGrid.vue
+++ b/nuxt/app/components/DevGrid.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
-import {
-  measureElement,
-  getGapResult,
-  getAlignmentResult,
-  formatPx,
-  getElementLabel,
-  type MeasureRect,
-} from '~/utils/dev-measure'
+const isDev = inject('devMode', import.meta.dev)
+const appVersion = useRuntimeConfig().public.appVersion as string
+
+// The changelog collection has no routed page — it's only ever rendered
+// here, inline in the panel. `.path('/changelog')` is just the collection
+// item's derived identifier, not a real navigable URL. Fetched lazily, only
+// once the console actually opens, so @nuxt/content's rendering pipeline
+// isn't pulled into every visitor's eager bundle for a panel most never find.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const changelogPage = ref<any>(null)
+// Collapsed by default — the full history is long enough to push the rest
+// of the console (dev tools, in dev mode) below the fold otherwise.
+const showChangelog = ref(false)
 
 // ── Konami code ───────────────────────────────────────────────────────────────
 // ↑ ↑ ↓ ↓ ← → ← → A B
@@ -24,6 +29,11 @@ const authenticated = ref(false) // session-only; resets on reload
 const showPassword  = ref(false)
 const showConsole   = ref(false)
 
+watch(showConsole, async (open) => {
+  if (open && !changelogPage.value)
+    changelogPage.value = await queryCollection('changelog').path('/changelog').first()
+})
+
 // ── Password ──────────────────────────────────────────────────────────────────
 const pw        = ref('')
 const pwError   = ref(false)
@@ -67,25 +77,15 @@ function onPiClick() {
   else showPassword.value = true
 }
 
-// ── Overlay state ─────────────────────────────────────────────────────────────
-type GridSize = 'off' | '4' | '8'
-const grid           = ref<GridSize>('off')
-const columns        = ref(false)
-const outlines       = ref(false)
-const overlayOpacity = ref(40)
-const { showFiltered } = useDevPrefs()
-
+// ── Persistence (dev + prod — just the badge's visibility) ────────────────────
+// Dev-only prefs (overlay, measure, color scheme, module list) live in
+// DevGridTools.vue's own storage key — see there for why they're split.
 const STORAGE_KEY = 'sc-devconsole-v1'
 
 onMounted(() => {
   try {
     const s = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}')
-    grid.value           = s.grid         ?? 'off'
-    columns.value        = s.columns      ?? false
-    outlines.value       = s.outlines     ?? false
-    overlayOpacity.value = s.opacity      ?? 40
-    piVisible.value      = s.pi           ?? false
-    showFiltered.value   = s.showFiltered ?? false
+    piVisible.value = s.pi ?? false
   }
   catch { /* ignore malformed localStorage JSON */ }
   window.addEventListener('keydown', onKey)
@@ -94,218 +94,22 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('keydown', onKey)
   if (konamiTimer) clearTimeout(konamiTimer)
-  document.body.classList.remove('sc-devgrid-outlines')
 })
 
-watch([grid, columns, outlines, overlayOpacity, piVisible, showFiltered], () => {
+watch(piVisible, () => {
   try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify({
-      grid: grid.value, columns: columns.value,
-      outlines: outlines.value, opacity: overlayOpacity.value,
-      pi: piVisible.value, showFiltered: showFiltered.value,
-    }))
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ pi: piVisible.value }))
   }
   catch { /* ignore localStorage quota errors */ }
 })
 
-watch(outlines, v => document.body.classList.toggle('sc-devgrid-outlines', v))
-
-// ── Measure layer ─────────────────────────────────────────────────────────────
-const measuring        = ref(false)
-const measureHover     = ref<MeasureRect | null>(null)
-const measurePinnedA   = ref<MeasureRect | null>(null)
-const measurePinnedB   = ref<MeasureRect | null>(null)
-const measureLabelA    = ref('')
-const measureLabelB    = ref('')
-const measureLabelHov  = ref('')
-const measureBlocker   = ref<HTMLDivElement | null>(null)
-
-watch(measuring, (v) => {
-  if (!v) {
-    measureHover.value   = null
-    measurePinnedA.value = null
-    measurePinnedB.value = null
-  }
-})
-
-/** Get the real page element under (x, y) by temporarily blinding our overlay. */
-function elementAtPoint(x: number, y: number): Element | null {
-  const blocker = measureBlocker.value!
-  blocker.style.pointerEvents = 'none'
-  const el = document.elementFromPoint(x, y)
-  blocker.style.pointerEvents = 'all'
-  if (!el || el.closest('[data-dev-console]')) return null
-  return el
-}
-
-function onMeasureMove(e: MouseEvent) {
-  const el = elementAtPoint(e.clientX, e.clientY)
-  if (el) {
-    measureHover.value  = measureElement(el)
-    measureLabelHov.value = getElementLabel(el)
-  }
-  else {
-    measureHover.value  = null
-    measureLabelHov.value = ''
-  }
-}
-
-function onMeasureClick(e: MouseEvent) {
-  e.preventDefault()
-  const el = elementAtPoint(e.clientX, e.clientY)
-
-  if (!el) {
-    // Clicked empty space → clear
-    measurePinnedA.value = null
-    measurePinnedB.value = null
-    return
-  }
-
-  if (!measurePinnedA.value) {
-    // First pick
-    measurePinnedA.value = measureElement(el)
-    measureLabelA.value  = getElementLabel(el)
-  }
-  else if (!measurePinnedB.value) {
-    // Second pick → lock measurement
-    measurePinnedB.value = measureElement(el)
-    measureLabelB.value  = getElementLabel(el)
-  }
-  else {
-    // Third pick → restart
-    measurePinnedA.value = measureElement(el)
-    measureLabelA.value  = getElementLabel(el)
-    measurePinnedB.value = null
-    measureLabelB.value  = ''
-  }
-}
-
-/**
- * The "target" for gap/alignment: locked B when set, otherwise live hover.
- * Null when nothing to compare against.
- */
-const gapTarget = computed<MeasureRect | null>(() =>
-  measurePinnedB.value ?? measureHover.value,
-)
-
-const gapResult = computed(() =>
-  measurePinnedA.value && gapTarget.value
-    ? getGapResult(measurePinnedA.value, gapTarget.value)
-    : null,
-)
-
-const alignResult = computed(() =>
-  measurePinnedA.value && gapTarget.value
-    ? getAlignmentResult(measurePinnedA.value, gapTarget.value)
-    : null,
-)
-
-// Mid-line position for the horizontal gap indicator.
-// All gap-line computeds below are template-gated (v-if="gapResult && …
-// measurePinnedA && gapTarget") so the non-null assertions are safe there.
-const hGapLineY = computed(() => {
-  const a = measurePinnedA.value!, b = gapTarget.value!
-  const overlapTop    = Math.max(a.top, b.top)
-  const overlapBottom = Math.min(a.bottom, b.bottom)
-  if (overlapBottom > overlapTop) return (overlapTop + overlapBottom) / 2
-  return (a.centerY + b.centerY) / 2
-})
-
-// Mid-line position for the vertical gap indicator
-const vGapLineX = computed(() => {
-  const a = measurePinnedA.value!, b = gapTarget.value!
-  const overlapLeft  = Math.max(a.left, b.left)
-  const overlapRight = Math.min(a.right, b.right)
-  if (overlapRight > overlapLeft) return (overlapLeft + overlapRight) / 2
-  return (a.centerX + b.centerX) / 2
-})
-
-// Left edge of horizontal gap line
-const hGapLeft = computed(() =>
-  gapResult.value!.hDir === 'right' ? measurePinnedA.value!.right : gapTarget.value!.right,
-)
-
-// Width of horizontal gap line — template gates on gapResult.h !== null
-const hGapWidth = computed(() => gapResult.value!.h!)
-
-// Top of vertical gap line
-const vGapTop = computed(() =>
-  gapResult.value!.vDir === 'below' ? measurePinnedA.value!.bottom : gapTarget.value!.bottom,
-)
-
-// Height of vertical gap line — template gates on gapResult.v !== null
-const vGapHeight = computed(() => gapResult.value!.v!)
-
-// ── Color scheme ──────────────────────────────────────────────────────────────
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const appConfig = useAppConfig() as any
-
-const COLOR_OPTIONS = [
-  { name: 'magenta',  hex: '#c21a74', label: 'Magenta'  },
-  { name: 'electric', hex: '#1f4fe0', label: 'Electric' },
-  { name: 'violet',   hex: '#7c3aed', label: 'Violet'   },
-  { name: 'cyan',     hex: '#0891b2', label: 'Cyan'     },
-  { name: 'amber',    hex: '#d97706', label: 'Amber'    },
-  { name: 'orange',   hex: '#ea580c', label: 'Orange'   },
-]
-
-const currentPrimary = computed(() => appConfig.ui.colors.primary)
-
-// ── Client data inspector ─────────────────────────────────────────────────────
-const nuxtApp = useNuxtApp()
-const showPayload = ref(false)
-const payloadJson = computed(() =>
-  JSON.stringify(nuxtApp.payload?.data ?? {}, null, 2),
-)
-
-/**
- * Static shell — fetches the page's generated HTML and renders it in a
- * full-viewport iframe so the user can see what was static at generation time
- * vs what's been hydrated client-side since.
- *
- * Most meaningful against `nuxt preview` of a generated site; in `nuxt dev`
- * the fetch returns per-request SSR output instead.
- */
-const showStaticShell = ref(false)
-const staticHtml = ref('')
-const staticError = ref('')
-const staticLoading = ref(false)
-
-async function toggleStaticShell() {
-  if (showStaticShell.value) {
-    showStaticShell.value = false
-    return
-  }
-  staticLoading.value = true
-  staticError.value = ''
-  try {
-    const res = await fetch(location.href, { headers: { accept: 'text/html' } })
-    staticHtml.value = await res.text()
-    showStaticShell.value = true
-  }
-  catch (e) {
-    staticError.value = e instanceof Error ? e.message : String(e)
-  }
-  finally {
-    staticLoading.value = false
-  }
-}
-
 // ── Keyboard ──────────────────────────────────────────────────────────────────
+// Only this shell's own overlays (console, password). DevGridTools.vue owns
+// its own listener for its own overlays (static shell, measure) — those
+// always close this shell's console first (see its toggle handlers), so
+// there's no ordering dependency between the two listeners.
 function onKey(e: KeyboardEvent) {
   if (e.key === 'Escape') {
-    if (showStaticShell.value) { showStaticShell.value = false; return }
-    if (measuring.value) {
-      if (measurePinnedA.value) {
-        // First Escape clears the current selection
-        measurePinnedA.value = null
-        measurePinnedB.value = null
-      }
-      else {
-        measuring.value = false
-      }
-      return
-    }
     if (showConsole.value)  { showConsole.value  = false; return }
     if (showPassword.value) { showPassword.value = false; pw.value = ''; return }
   }
@@ -331,315 +135,11 @@ function onKey(e: KeyboardEvent) {
     clearTimeout(konamiTimer!)
   }
 }
-
-// ── Overlay computed styles ───────────────────────────────────────────────────
-const alpha = computed(() => overlayOpacity.value / 100)
-const p     = (pct: number) => `color-mix(in srgb, var(--ui-primary) ${pct}%, transparent)`
-
-const gridStyle = computed(() => {
-  const size = Number(grid.value)
-  const a    = Math.round(alpha.value * 90)
-  return {
-    backgroundImage: `radial-gradient(circle, ${p(a)} 1px, transparent 1px)`,
-    backgroundSize:  `${size}px ${size}px`,
-  }
-})
 </script>
 
 <template>
   <Teleport to="body">
 
-    <!-- ── Dot grid overlay ──────────────────────────────────────────────── -->
-    <div
-      v-if="grid !== 'off'"
-      data-grid-overlay
-      :style="gridStyle"
-      style="position:fixed;inset:0;pointer-events:none;z-index:9990;"
-    />
-
-    <!-- ── Column guides overlay ─────────────────────────────────────────── -->
-    <div
-      v-if="columns"
-      style="position:fixed;inset:0;pointer-events:none;z-index:9990;display:flex;justify-content:center;"
-    >
-      <div style="width:100%;max-width:72rem;position:relative;">
-        <div :style="`position:absolute;inset-block:0;left:0;width:1px;background:${p(Math.round(alpha*60))};`" />
-        <div :style="`position:absolute;inset-block:0;right:0;width:1px;background:${p(Math.round(alpha*60))};`" />
-        <div :style="`position:absolute;inset-block:0;left:0;width:24px;background:${p(Math.round(alpha*12))};`" />
-        <div :style="`position:absolute;inset-block:0;right:0;width:24px;background:${p(Math.round(alpha*12))};`" />
-        <div :style="`position:absolute;inset-block:0;left:40px;width:1px;background:color-mix(in srgb,#6366f1 ${Math.round(alpha*38)}%,transparent);`" />
-        <div :style="`position:absolute;inset-block:0;right:40px;width:1px;background:color-mix(in srgb,#6366f1 ${Math.round(alpha*38)}%,transparent);`" />
-        <div :style="`position:absolute;inset-block:0;left:50%;width:1px;background:${p(Math.round(alpha*18))};`" />
-        <div style="position:absolute;top:8px;left:50%;transform:translateX(-50%);font-family:ui-monospace,monospace;font-size:10px;font-weight:600;color:color-mix(in srgb,var(--ui-primary) 65%,transparent);white-space:nowrap;background:rgb(0 0 0 / 55%);padding:2px 6px;border-radius:3px;">
-          max-w-6xl · 72rem · px-6 / sm:px-10
-        </div>
-      </div>
-    </div>
-
-    <!-- ── Measure layer ─────────────────────────────────────────────────── -->
-    <template v-if="measuring">
-
-      <!-- Full-screen event capture overlay (briefly blinded for elementFromPoint). ESC exits. -->
-      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
-      <div
-        ref="measureBlocker"
-        data-dev-console
-        data-measure-blocker
-        style="position:fixed;inset:0;z-index:9982;cursor:crosshair;"
-        @mousemove="onMeasureMove"
-        @click.prevent="onMeasureClick"
-      />
-
-      <!-- Hover highlight (only while A isn't pinned, or before B is pinned) -->
-      <div
-        v-if="measureHover && !measurePinnedB"
-        data-dev-console
-        :style="`
-          position:fixed;
-          top:${measureHover.top}px;left:${measureHover.left}px;
-          width:${measureHover.width}px;height:${measureHover.height}px;
-          pointer-events:none;z-index:9983;
-          border:1px dashed ${p(65)};
-          background:${p(6)};
-          box-sizing:border-box;
-        `"
-      >
-        <!-- Dimension label -->
-        <div
-          data-dev-console
-          style="
-            position:absolute;bottom:100%;left:0;margin-bottom:3px;
-            font-family:ui-monospace,monospace;font-size:11px;font-weight:600;
-            color:var(--ui-primary);background:rgb(0 0 0 / 70%);
-            padding:2px 5px;border-radius:3px;white-space:nowrap;line-height:1.4;
-          "
-        >
-          {{ measureLabelHov }} · {{ formatPx(measureHover.width) }} × {{ formatPx(measureHover.height) }}
-        </div>
-        <!-- Centre crosshair -->
-        <div data-dev-console :style="`position:absolute;top:50%;left:0;right:0;height:1px;background:${p(30)};`" />
-        <div data-dev-console :style="`position:absolute;left:50%;top:0;bottom:0;width:1px;background:${p(30)};`" />
-      </div>
-
-      <!-- Pinned A highlight (solid) -->
-      <div
-        v-if="measurePinnedA"
-        data-dev-console
-        :style="`
-          position:fixed;
-          top:${measurePinnedA.top}px;left:${measurePinnedA.left}px;
-          width:${measurePinnedA.width}px;height:${measurePinnedA.height}px;
-          pointer-events:none;z-index:9984;
-          border:2px solid var(--ui-primary);
-          background:${p(8)};
-          box-sizing:border-box;
-        `"
-      >
-        <div
-          data-dev-console
-          style="
-            position:absolute;bottom:100%;left:0;margin-bottom:3px;
-            font-family:ui-monospace,monospace;font-size:11px;font-weight:600;
-            color:var(--ui-primary);background:rgb(0 0 0 / 80%);
-            padding:2px 6px;border-radius:3px;white-space:nowrap;line-height:1.4;
-          "
-        >
-          [A] {{ measureLabelA }} · {{ formatPx(measurePinnedA.width) }} × {{ formatPx(measurePinnedA.height) }}
-        </div>
-        <!-- Corner markers -->
-        <div data-dev-console style="position:absolute;top:-2px;left:-2px;width:6px;height:6px;border-top:2px solid var(--ui-primary);border-left:2px solid var(--ui-primary);" />
-        <div data-dev-console style="position:absolute;top:-2px;right:-2px;width:6px;height:6px;border-top:2px solid var(--ui-primary);border-right:2px solid var(--ui-primary);" />
-        <div data-dev-console style="position:absolute;bottom:-2px;left:-2px;width:6px;height:6px;border-bottom:2px solid var(--ui-primary);border-left:2px solid var(--ui-primary);" />
-        <div data-dev-console style="position:absolute;bottom:-2px;right:-2px;width:6px;height:6px;border-bottom:2px solid var(--ui-primary);border-right:2px solid var(--ui-primary);" />
-      </div>
-
-      <!-- Pinned B highlight (secondary colour) -->
-      <div
-        v-if="measurePinnedB"
-        data-dev-console
-        :style="`
-          position:fixed;
-          top:${measurePinnedB.top}px;left:${measurePinnedB.left}px;
-          width:${measurePinnedB.width}px;height:${measurePinnedB.height}px;
-          pointer-events:none;z-index:9984;
-          border:2px solid color-mix(in srgb,var(--ui-primary) 55%,white);
-          background:color-mix(in srgb,var(--ui-primary) 5%,transparent);
-          box-sizing:border-box;
-        `"
-      >
-        <div
-          data-dev-console
-          style="
-            position:absolute;bottom:100%;left:0;margin-bottom:3px;
-            font-family:ui-monospace,monospace;font-size:11px;font-weight:600;
-            color:color-mix(in srgb,var(--ui-primary) 55%,white);
-            background:rgb(0 0 0 / 80%);
-            padding:2px 6px;border-radius:3px;white-space:nowrap;line-height:1.4;
-          "
-        >
-          [B] {{ measureLabelB }} · {{ formatPx(measurePinnedB.width) }} × {{ formatPx(measurePinnedB.height) }}
-        </div>
-      </div>
-
-      <!-- Horizontal gap indicator -->
-      <template v-if="gapResult && gapResult.h !== null && measurePinnedA && gapTarget">
-        <div
-          data-dev-console
-          :style="`
-            position:fixed;
-            top:${hGapLineY - 0.5}px;
-            left:${hGapLeft}px;
-            width:${hGapWidth}px;height:1px;
-            background:var(--ui-primary);pointer-events:none;z-index:9985;
-          `"
-        >
-          <!-- Tick marks -->
-          <div data-dev-console style="position:absolute;left:0;top:-4px;width:1px;height:9px;background:var(--ui-primary);" />
-          <div data-dev-console style="position:absolute;right:0;top:-4px;width:1px;height:9px;background:var(--ui-primary);" />
-          <!-- Label -->
-          <div
-            v-if="hGapWidth > 18"
-            data-dev-console
-            style="
-              position:absolute;top:-9px;left:50%;transform:translateX(-50%);
-              font-family:ui-monospace,monospace;font-size:10px;font-weight:700;
-              color:var(--ui-primary);background:rgb(0 0 0 / 80%);
-              padding:1px 4px;border-radius:3px;white-space:nowrap;
-            "
-          >{{ formatPx(gapResult.h) }}</div>
-        </div>
-        <!-- Label beside the line when gap too narrow for inline -->
-        <div
-          v-if="hGapWidth <= 18"
-          data-dev-console
-          :style="`
-            position:fixed;top:${hGapLineY - 9}px;left:${hGapLeft + hGapWidth + 4}px;
-            font-family:ui-monospace,monospace;font-size:10px;font-weight:700;
-            color:var(--ui-primary);background:rgba(0,0,0,0.8);
-            padding:1px 4px;border-radius:3px;white-space:nowrap;z-index:9985;pointer-events:none;
-          `"
-        >{{ formatPx(gapResult.h) }}</div>
-      </template>
-
-      <!-- Vertical gap indicator -->
-      <template v-if="gapResult && gapResult.v !== null && measurePinnedA && gapTarget">
-        <div
-          data-dev-console
-          :style="`
-            position:fixed;
-            left:${vGapLineX - 0.5}px;
-            top:${vGapTop}px;
-            width:1px;height:${vGapHeight}px;
-            background:var(--ui-primary);pointer-events:none;z-index:9985;
-          `"
-        >
-          <div data-dev-console style="position:absolute;top:0;left:-4px;width:9px;height:1px;background:var(--ui-primary);" />
-          <div data-dev-console style="position:absolute;bottom:0;left:-4px;width:9px;height:1px;background:var(--ui-primary);" />
-          <div
-            v-if="vGapHeight > 18"
-            data-dev-console
-            style="
-              position:absolute;left:6px;top:50%;transform:translateY(-50%);
-              font-family:ui-monospace,monospace;font-size:10px;font-weight:700;
-              color:var(--ui-primary);background:rgb(0 0 0 / 80%);
-              padding:1px 4px;border-radius:3px;white-space:nowrap;
-            "
-          >{{ formatPx(gapResult.v) }}</div>
-        </div>
-        <div
-          v-if="vGapHeight <= 18"
-          data-dev-console
-          :style="`
-            position:fixed;top:${vGapTop + vGapHeight + 4}px;left:${vGapLineX + 6}px;
-            font-family:ui-monospace,monospace;font-size:10px;font-weight:700;
-            color:var(--ui-primary);background:rgba(0,0,0,0.8);
-            padding:1px 4px;border-radius:3px;white-space:nowrap;z-index:9985;pointer-events:none;
-          `"
-        >{{ formatPx(gapResult.v) }}</div>
-      </template>
-
-      <!-- Centre-alignment guide lines -->
-      <template v-if="alignResult && measurePinnedA && gapTarget">
-        <!-- Shared horizontal centre (same Y) -->
-        <div
-          v-if="alignResult.hCentre"
-          data-dev-console
-          :style="`
-            position:fixed;
-            top:${(measurePinnedA.centerY + gapTarget.centerY) / 2 - 0.5}px;
-            left:${Math.min(measurePinnedA.left, gapTarget.left) - 20}px;
-            width:${Math.abs(measurePinnedA.right - gapTarget.left) + 40 + Math.abs(Math.min(measurePinnedA.left, gapTarget.left) - Math.min(measurePinnedA.left, gapTarget.left))}px;
-            width:${Math.max(measurePinnedA.right, gapTarget.right) - Math.min(measurePinnedA.left, gapTarget.left) + 40}px;
-            height:1px;
-            border-top:1px dashed ${p(45)};
-            pointer-events:none;z-index:9983;
-          `"
-        />
-        <!-- Shared vertical centre (same X) -->
-        <div
-          v-if="alignResult.vCentre"
-          data-dev-console
-          :style="`
-            position:fixed;
-            left:${(measurePinnedA.centerX + gapTarget.centerX) / 2 - 0.5}px;
-            top:${Math.min(measurePinnedA.top, gapTarget.top) - 20}px;
-            height:${Math.max(measurePinnedA.bottom, gapTarget.bottom) - Math.min(measurePinnedA.top, gapTarget.top) + 40}px;
-            width:1px;
-            border-left:1px dashed ${p(45)};
-            pointer-events:none;z-index:9983;
-          `"
-        />
-      </template>
-
-      <!-- Measure HUD (bottom-left) -->
-      <div
-        data-dev-console
-        style="
-          position:fixed;bottom:16px;left:16px;z-index:9986;
-          background:#09090f;border:1px solid color-mix(in srgb,var(--ui-primary) 22%,transparent);
-          border-radius:8px;padding:10px 14px;max-width:320px;
-          box-shadow:0 4px 20px rgb(0 0 0 / 60%);
-          font-family:ui-monospace,monospace;font-size:11px;
-        "
-      >
-        <div v-if="!measurePinnedA" style="color:#52525b;">
-          Click an element to measure · ESC to exit
-        </div>
-        <template v-else>
-          <div style="color:var(--ui-primary);margin-bottom:6px;">
-            [A] {{ measureLabelA }}
-            <span style="color:#52525b;"> · {{ formatPx(measurePinnedA.width) }} × {{ formatPx(measurePinnedA.height) }}</span>
-          </div>
-          <div v-if="!measurePinnedB && !measureHover" style="color:#52525b;">
-            Hover or click a second element
-          </div>
-          <template v-if="gapTarget">
-            <div style="color:color-mix(in srgb,var(--ui-primary) 55%,white);margin-bottom:6px;">
-              [{{ measurePinnedB ? 'B' : '→' }}] {{ measurePinnedB ? measureLabelB : measureLabelHov }}
-              <span style="color:#52525b;"> · {{ formatPx(gapTarget.width) }} × {{ formatPx(gapTarget.height) }}</span>
-            </div>
-            <!-- Gap info -->
-            <div v-if="gapResult" style="color:#a1a1aa;border-top:1px solid rgb(255 255 255 / 6%);padding-top:6px;">
-              <span v-if="gapResult.h !== null">H gap: <strong style="color:var(--ui-primary);">{{ formatPx(gapResult.h) }}</strong> </span>
-              <span v-if="gapResult.v !== null">V gap: <strong style="color:var(--ui-primary);">{{ formatPx(gapResult.v) }}</strong></span>
-              <span v-if="gapResult.h === null && gapResult.v === null" style="color:#52525b;">overlapping</span>
-            </div>
-            <!-- Alignment flags -->
-            <div v-if="alignResult" style="margin-top:5px;display:flex;flex-wrap:wrap;gap:4px;">
-              <span v-if="alignResult.topEdge"    class="sc-align-tag">top ✓</span>
-              <span v-if="alignResult.bottomEdge" class="sc-align-tag">bottom ✓</span>
-              <span v-if="alignResult.leftEdge"   class="sc-align-tag">left ✓</span>
-              <span v-if="alignResult.rightEdge"  class="sc-align-tag">right ✓</span>
-              <span v-if="alignResult.hCentre"    class="sc-align-tag">H-centre ✓</span>
-              <span v-if="alignResult.vCentre"    class="sc-align-tag">V-centre ✓</span>
-            </div>
-          </template>
-          <div style="color:#3f3f46;margin-top:8px;">ESC to clear · click again to restart</div>
-        </template>
-      </div>
-
-    </template>
-
     <!-- ── Pi badge ──────────────────────────────────────────────────────── -->
     <button
       v-if="piVisible"
@@ -712,10 +212,16 @@ const gridStyle = computed(() => {
     </Transition>
 
     <!-- ── Dev console modal ─────────────────────────────────────────────── -->
+    <!-- v-show, not v-if: DevGridTools lives inside this so its section
+         markup lands in the right place in the console body, but its own
+         Teleport (grid overlay, measure layer, ...) is meant to keep
+         working with the console closed — v-if would unmount DevGridTools
+         (and everything it teleported) the moment the console closes,
+         taking the grid overlay down with it. -->
     <Transition name="sc-scale">
       <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
       <div
-        v-if="showConsole"
+        v-show="showConsole"
         data-dev-console
         style="position:fixed;inset:0;z-index:9996;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0 / 72%);backdrop-filter:blur(3px);"
         @click.self="showConsole = false"
@@ -736,156 +242,48 @@ const gridStyle = computed(() => {
 
           <div data-dev-console style="overflow-y:auto;padding:20px;flex:1;">
 
-            <!-- Color scheme -->
-            <section data-dev-console style="margin-bottom:26px;">
-              <h3 class="sc-section-label">// COLOR SCHEME</h3>
-              <div data-dev-console style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;">
-                <button
-                  v-for="c in COLOR_OPTIONS"
-                  :key="c.name"
-                  data-dev-console
-                  :title="c.label"
-                  :style="`display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:5px 6px;border-radius:7px;outline:${currentPrimary === c.name ? '2px solid rgba(255,255,255,0.45)' : '2px solid transparent'};outline-offset:2px;transition:outline-color 0.15s;`"
-                  @click="appConfig.ui.colors.primary = c.name"
-                >
-                  <div :style="`width:34px;height:34px;border-radius:8px;background:${c.hex};box-shadow:${currentPrimary === c.name ? '0 0 12px ' + c.hex + '90' : '0 2px 8px rgba(0,0,0,0.45)'};transition:box-shadow 0.2s;`" />
-                  <span style="font-family:ui-monospace,monospace;font-size:10px;color:#52525b;">{{ c.label }}</span>
-                </button>
-              </div>
-              <p style="font-family:ui-monospace,monospace;font-size:10px;color:#3f3f46;margin-top:10px;">
-                primary: <span style="color:#71717a;">{{ currentPrimary }}</span>
-              </p>
-            </section>
-
-            <!-- Dev overlay -->
-            <section data-dev-console style="margin-bottom:26px;">
-              <h3 class="sc-section-label">// DEV OVERLAY</h3>
-              <div data-dev-console style="display:flex;flex-direction:column;gap:11px;">
-                <div data-dev-console style="display:flex;align-items:center;justify-content:space-between;">
-                  <span style="font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa;">Grid</span>
-                  <div data-dev-console style="display:flex;gap:4px;">
-                    <button v-for="opt in (['off', '4', '8'] as GridSize[])" :key="opt" data-dev-console class="sc-btn" :class="{ 'sc-btn-active': grid === opt }" @click="grid = opt">
-                      {{ opt === 'off' ? 'Off' : opt + 'px' }}
-                    </button>
-                  </div>
-                </div>
-                <div data-dev-console style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
-                  <span style="font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa;">Columns <span style="font-size:10px;color:#3f3f46;margin-left:6px;">max-w-6xl / px-6 / sm:px-10</span></span>
-                  <button data-dev-console class="sc-btn" :class="{ 'sc-btn-active': columns }" @click="columns = !columns">{{ columns ? 'On' : 'Off' }}</button>
-                </div>
-                <div data-dev-console style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
-                  <span style="font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa;">Outlines <span style="font-size:10px;color:#3f3f46;margin-left:6px;">all elements</span></span>
-                  <button data-dev-console class="sc-btn" :class="{ 'sc-btn-active': outlines }" @click="outlines = !outlines">{{ outlines ? 'On' : 'Off' }}</button>
-                </div>
-                <div data-dev-console>
-                  <div data-dev-console style="display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;">
-                    <span style="font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa;">Overlay Opacity</span>
-                    <span style="font-family:ui-monospace,monospace;font-size:11px;color:#52525b;">{{ overlayOpacity }}%</span>
-                  </div>
-                  <input v-model.number="overlayOpacity" data-dev-console type="range" min="10" max="80" aria-label="Overlay opacity" style="width:100%;accent-color:var(--ui-primary);cursor:pointer;" >
-                </div>
-              </div>
-            </section>
-
-            <!-- Measure tool -->
-            <section data-dev-console>
-              <h3 class="sc-section-label">// MEASURE</h3>
-              <div data-dev-console style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;">
-                <div style="font-family:ui-monospace,monospace;font-size:11px;color:#52525b;line-height:1.6;">
-                  Click elements to measure gaps &amp; alignment.<br>
-                  2 picks = locked comparison · ESC to clear
-                </div>
+            <!-- Version / changelog — always available, dev and prod. No
+                 routed page: this is the only place the changelog renders.
+                 Collapsed by default — the full history is long enough to
+                 push the rest of the console (dev tools) below the fold. -->
+            <section data-dev-console :style="isDev ? 'margin-bottom:26px;' : ''">
+              <h3 class="sc-section-label">// VERSION</h3>
+              <div data-dev-console style="display:flex;align-items:center;justify-content:space-between;gap:16px;">
+                <span style="font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa;">stuar.tc v{{ appVersion }}</span>
                 <button
+                  v-if="changelogPage"
                   data-dev-console
                   class="sc-btn"
-                  :class="{ 'sc-btn-active': measuring }"
-                  style="flex-shrink:0;"
-                  @click="measuring = !measuring; showConsole = false"
-                >{{ measuring ? 'Active' : 'Start' }}</button>
+                  :class="{ 'sc-btn-active': showChangelog }"
+                  @click="showChangelog = !showChangelog"
+                >{{ showChangelog ? 'Hide' : 'Changelog' }}</button>
               </div>
-            </section>
-
-            <!-- Module list -->
-            <section data-dev-console style="margin-bottom:26px;">
-              <h3 class="sc-section-label">// MODULE LIST</h3>
-              <div data-dev-console style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;">
-                <div style="font-family:ui-monospace,monospace;font-size:11px;color:#52525b;line-height:1.6;">
-                  Show filtered modules<br>
-                  <span style="font-size:10px;color:#3f3f46;">Modules with &lt; 100 installs · shown faded</span>
-                </div>
-                <button
+              <div
+                v-if="showChangelog && changelogPage"
+                data-dev-console
+                style="margin-top:12px;max-height:220px;overflow-y:auto;border:1px solid rgb(255 255 255 / 6%);border-radius:4px;padding:10px 12px;background:rgb(0 0 0 / 25%);"
+              >
+                <LazyContentRenderer
+                  :value="changelogPage"
                   data-dev-console
-                  class="sc-btn"
-                  :class="{ 'sc-btn-active': showFiltered }"
-                  style="flex-shrink:0;"
-                  @click="showFiltered = !showFiltered"
-                >{{ showFiltered ? 'On' : 'Off' }}</button>
+                  class="prose prose-sm prose-invert max-w-none font-mono"
+                  style="font-size:11px;"
+                />
               </div>
             </section>
 
-            <!-- Client data -->
-            <section data-dev-console>
-              <h3 class="sc-section-label">// CLIENT DATA</h3>
-              <div data-dev-console style="display:flex;flex-direction:column;gap:11px;">
-                <!-- Static shell -->
-                <div data-dev-console style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;">
-                  <div style="font-family:ui-monospace,monospace;font-size:11px;color:#52525b;line-height:1.6;">
-                    Static shell overlay<br>
-                    <span style="font-size:10px;color:#3f3f46;">Fetches generated HTML · shows what<br>was SSG vs hydrated since. Best vs<br><code style="color:#71717a;">nuxt preview</code></span>
-                  </div>
-                  <button
-                    data-dev-console
-                    class="sc-btn"
-                    :class="{ 'sc-btn-active': showStaticShell }"
-                    style="flex-shrink:0;"
-                    @click="toggleStaticShell"
-                  >{{ staticLoading ? '…' : showStaticShell ? 'Hide' : 'Show' }}</button>
-                </div>
-                <p v-if="staticError" data-dev-console style="font-family:ui-monospace,monospace;font-size:10px;color:#f87171;letter-spacing:0.04em;margin:0;">// FETCH ERROR: {{ staticError }}</p>
-                <!-- Payload inspector -->
-                <div data-dev-console style="display:flex;justify-content:space-between;align-items:center;">
-                  <span style="font-family:ui-monospace,monospace;font-size:11px;color:#52525b;">Nuxt payload (SSG snapshot)</span>
-                  <button data-dev-console class="sc-btn" :class="{ 'sc-btn-active': showPayload }" @click="showPayload = !showPayload">{{ showPayload ? 'Hide' : 'Show' }}</button>
-                </div>
-                <pre v-if="showPayload" data-dev-console style="margin:0;max-height:240px;overflow-y:auto;font-family:ui-monospace,monospace;font-size:10px;line-height:1.5;color:#71717a;background:rgb(0 0 0 / 35%);border-radius:4px;padding:8px;border:1px solid rgb(255 255 255 / 6%);">{{ payloadJson }}</pre>
-              </div>
-            </section>
+            <LazyDevGridTools v-if="isDev" v-model:show-console="showConsole" />
 
           </div>
 
           <div data-dev-console style="border-top:1px solid rgb(255 255 255 / 5%);padding:9px 18px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;">
-            <span style="font-family:ui-monospace,monospace;font-size:10px;color:#27272a;">stuar.tc dev console</span>
+            <span style="font-family:ui-monospace,monospace;font-size:10px;color:#27272a;">{{ isDev ? 'stuar.tc dev console' : 'stuar.tc console' }}</span>
             <span style="font-family:ui-monospace,monospace;font-size:10px;color:#27272a;">ESC to close</span>
           </div>
         </div>
       </div>
     </Transition>
 
-    <!-- ── Static shell overlay ───────────────────────────────────────────── -->
-    <div
-      v-if="showStaticShell"
-      data-dev-console
-      data-static-shell
-      style="position:fixed;inset:0;z-index:9999;background:#0a0a0a;"
-    >
-      <div data-dev-console style="position:fixed;top:12px;left:12px;z-index:10000;font-family:ui-monospace,monospace;font-size:11px;font-weight:600;color:#4ade80;background:rgb(0 0 0 / 85%);padding:6px 12px;border-radius:4px;border:1px solid rgb(74 222 128 / 30%);letter-spacing:0.1em;">
-        STATIC SHELL — SSG OUTPUT
-        <span style="color:#52525b;margin-left:8px;font-weight:400;">{{ staticHtml.length.toLocaleString() }} bytes</span>
-      </div>
-      <button
-        data-dev-console
-        class="sc-btn"
-        style="position:fixed;top:12px;right:12px;z-index:10000;"
-        @click="showStaticShell = false"
-      >Close ✕</button>
-      <iframe
-        data-dev-console
-        :srcdoc="staticHtml"
-        style="width:100%;height:100%;border:0;background:#fff;"
-        title="Static SSG output"
-      />
-    </div>
-
   </Teleport>
 </template>
 
@@ -918,6 +316,8 @@ const gridStyle = computed(() => {
   background: rgb(255 255 255 / 4%);
   color: #71717a; font-family: ui-monospace, monospace; font-size: 11px; cursor: pointer;
   transition: background 0.1s, border-color 0.1s, color 0.1s;
+  text-decoration: none;
+  display: inline-block;
 }
 
 .sc-btn:hover {
diff --git a/nuxt/app/components/DevGridTools.vue b/nuxt/app/components/DevGridTools.vue
new file mode 100644
index 00000000..c22a4e74
--- /dev/null
+++ b/nuxt/app/components/DevGridTools.vue
@@ -0,0 +1,712 @@
+<script setup lang="ts">
+import {
+  measureElement,
+  getGapResult,
+  getAlignmentResult,
+  formatPx,
+  getElementLabel,
+  type MeasureRect,
+} from '~/utils/dev-measure'
+
+// Two-way with DevGrid.vue's console visibility — measure mode and the
+// static shell both take over the full page, so they always close the
+// console panel first (see toggleStaticShell and the Start button below).
+// This also means DevGrid.vue's own Escape handler for the console never
+// fires while either of these is open (showConsole is already false), so
+// there's no dependency on which of the two keydown listeners runs first.
+const showConsole = defineModel<boolean>('showConsole', { required: true })
+
+// ── Overlay state ─────────────────────────────────────────────────────────────
+type GridSize = 'off' | '4' | '8'
+const grid           = ref<GridSize>('off')
+const columns        = ref(false)
+const outlines       = ref(false)
+const overlayOpacity = ref(40)
+const { showFiltered } = useDevPrefs()
+
+// Separate key from DevGrid.vue's — that one persists just the π badge's
+// visibility (dev + prod), this one persists dev-only prefs.
+const STORAGE_KEY = 'sc-devconsole-tools-v1'
+
+onMounted(() => {
+  try {
+    const s = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}')
+    grid.value           = s.grid         ?? 'off'
+    columns.value        = s.columns      ?? false
+    outlines.value       = s.outlines     ?? false
+    overlayOpacity.value = s.opacity      ?? 40
+    showFiltered.value   = s.showFiltered ?? false
+  }
+  catch { /* ignore malformed localStorage JSON */ }
+  window.addEventListener('keydown', onKey)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKey)
+  document.body.classList.remove('sc-devgrid-outlines')
+})
+
+watch([grid, columns, outlines, overlayOpacity, showFiltered], () => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({
+      grid: grid.value, columns: columns.value,
+      outlines: outlines.value, opacity: overlayOpacity.value,
+      showFiltered: showFiltered.value,
+    }))
+  }
+  catch { /* ignore localStorage quota errors */ }
+})
+
+watch(outlines, v => document.body.classList.toggle('sc-devgrid-outlines', v))
+
+// ── Measure layer ─────────────────────────────────────────────────────────────
+const measuring        = ref(false)
+const measureHover     = ref<MeasureRect | null>(null)
+const measurePinnedA   = ref<MeasureRect | null>(null)
+const measurePinnedB   = ref<MeasureRect | null>(null)
+const measureLabelA    = ref('')
+const measureLabelB    = ref('')
+const measureLabelHov  = ref('')
+const measureBlocker   = ref<HTMLDivElement | null>(null)
+
+watch(measuring, (v) => {
+  if (!v) {
+    measureHover.value   = null
+    measurePinnedA.value = null
+    measurePinnedB.value = null
+  }
+})
+
+/** Get the real page element under (x, y) by temporarily blinding our overlay. */
+function elementAtPoint(x: number, y: number): Element | null {
+  const blocker = measureBlocker.value!
+  blocker.style.pointerEvents = 'none'
+  const el = document.elementFromPoint(x, y)
+  blocker.style.pointerEvents = 'all'
+  if (!el || el.closest('[data-dev-console]')) return null
+  return el
+}
+
+function onMeasureMove(e: MouseEvent) {
+  const el = elementAtPoint(e.clientX, e.clientY)
+  if (el) {
+    measureHover.value  = measureElement(el)
+    measureLabelHov.value = getElementLabel(el)
+  }
+  else {
+    measureHover.value  = null
+    measureLabelHov.value = ''
+  }
+}
+
+function onMeasureClick(e: MouseEvent) {
+  e.preventDefault()
+  const el = elementAtPoint(e.clientX, e.clientY)
+
+  if (!el) {
+    // Clicked empty space → clear
+    measurePinnedA.value = null
+    measurePinnedB.value = null
+    return
+  }
+
+  if (!measurePinnedA.value) {
+    // First pick
+    measurePinnedA.value = measureElement(el)
+    measureLabelA.value  = getElementLabel(el)
+  }
+  else if (!measurePinnedB.value) {
+    // Second pick → lock measurement
+    measurePinnedB.value = measureElement(el)
+    measureLabelB.value  = getElementLabel(el)
+  }
+  else {
+    // Third pick → restart
+    measurePinnedA.value = measureElement(el)
+    measureLabelA.value  = getElementLabel(el)
+    measurePinnedB.value = null
+    measureLabelB.value  = ''
+  }
+}
+
+/**
+ * The "target" for gap/alignment: locked B when set, otherwise live hover.
+ * Null when nothing to compare against.
+ */
+const gapTarget = computed<MeasureRect | null>(() =>
+  measurePinnedB.value ?? measureHover.value,
+)
+
+const gapResult = computed(() =>
+  measurePinnedA.value && gapTarget.value
+    ? getGapResult(measurePinnedA.value, gapTarget.value)
+    : null,
+)
+
+const alignResult = computed(() =>
+  measurePinnedA.value && gapTarget.value
+    ? getAlignmentResult(measurePinnedA.value, gapTarget.value)
+    : null,
+)
+
+// Mid-line position for the horizontal gap indicator.
+// All gap-line computeds below are template-gated (v-if="gapResult && …
+// measurePinnedA && gapTarget") so the non-null assertions are safe there.
+const hGapLineY = computed(() => {
+  const a = measurePinnedA.value!, b = gapTarget.value!
+  const overlapTop    = Math.max(a.top, b.top)
+  const overlapBottom = Math.min(a.bottom, b.bottom)
+  if (overlapBottom > overlapTop) return (overlapTop + overlapBottom) / 2
+  return (a.centerY + b.centerY) / 2
+})
+
+// Mid-line position for the vertical gap indicator
+const vGapLineX = computed(() => {
+  const a = measurePinnedA.value!, b = gapTarget.value!
+  const overlapLeft  = Math.max(a.left, b.left)
+  const overlapRight = Math.min(a.right, b.right)
+  if (overlapRight > overlapLeft) return (overlapLeft + overlapRight) / 2
+  return (a.centerX + b.centerX) / 2
+})
+
+// Left edge of horizontal gap line
+const hGapLeft = computed(() =>
+  gapResult.value!.hDir === 'right' ? measurePinnedA.value!.right : gapTarget.value!.right,
+)
+
+// Width of horizontal gap line — template gates on gapResult.h !== null
+const hGapWidth = computed(() => gapResult.value!.h!)
+
+// Top of vertical gap line
+const vGapTop = computed(() =>
+  gapResult.value!.vDir === 'below' ? measurePinnedA.value!.bottom : gapTarget.value!.bottom,
+)
+
+// Height of vertical gap line — template gates on gapResult.v !== null
+const vGapHeight = computed(() => gapResult.value!.v!)
+
+// ── Color scheme ──────────────────────────────────────────────────────────────
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const appConfig = useAppConfig() as any
+
+const COLOR_OPTIONS = [
+  { name: 'magenta',  hex: '#c21a74', label: 'Magenta'  },
+  { name: 'electric', hex: '#1f4fe0', label: 'Electric' },
+  { name: 'violet',   hex: '#7c3aed', label: 'Violet'   },
+  { name: 'cyan',     hex: '#0891b2', label: 'Cyan'     },
+  { name: 'amber',    hex: '#d97706', label: 'Amber'    },
+  { name: 'orange',   hex: '#ea580c', label: 'Orange'   },
+]
+
+const currentPrimary = computed(() => appConfig.ui.colors.primary)
+
+// ── Client data inspector ─────────────────────────────────────────────────────
+const nuxtApp = useNuxtApp()
+const showPayload = ref(false)
+const payloadJson = computed(() =>
+  JSON.stringify(nuxtApp.payload?.data ?? {}, null, 2),
+)
+
+/**
+ * Static shell — fetches the page's generated HTML and renders it in a
+ * full-viewport iframe so the user can see what was static at generation time
+ * vs what's been hydrated client-side since.
+ *
+ * Most meaningful against `nuxt preview` of a generated site; in `nuxt dev`
+ * the fetch returns per-request SSR output instead.
+ */
+const showStaticShell = ref(false)
+const staticHtml = ref('')
+const staticError = ref('')
+const staticLoading = ref(false)
+
+async function toggleStaticShell() {
+  if (showStaticShell.value) {
+    showStaticShell.value = false
+    return
+  }
+  staticLoading.value = true
+  staticError.value = ''
+  try {
+    const res = await fetch(location.href, { headers: { accept: 'text/html' } })
+    staticHtml.value = await res.text()
+    showStaticShell.value = true
+    showConsole.value = false
+  }
+  catch (e) {
+    staticError.value = e instanceof Error ? e.message : String(e)
+  }
+  finally {
+    staticLoading.value = false
+  }
+}
+
+// ── Keyboard ──────────────────────────────────────────────────────────────────
+// Only this component's own overlays. DevGrid.vue owns the console/password
+// Escape handling — see the note on `showConsole` above for why there's no
+// ordering dependency between the two listeners.
+function onKey(e: KeyboardEvent) {
+  if (e.key !== 'Escape') return
+  if (showStaticShell.value) { showStaticShell.value = false; return }
+  if (measuring.value) {
+    if (measurePinnedA.value) {
+      // First Escape clears the current selection
+      measurePinnedA.value = null
+      measurePinnedB.value = null
+    }
+    else {
+      measuring.value = false
+    }
+  }
+}
+
+// ── Overlay computed styles ───────────────────────────────────────────────────
+const alpha = computed(() => overlayOpacity.value / 100)
+const p     = (pct: number) => `color-mix(in srgb, var(--ui-primary) ${pct}%, transparent)`
+
+const gridStyle = computed(() => {
+  const size = Number(grid.value)
+  const a    = Math.round(alpha.value * 90)
+  return {
+    backgroundImage: `radial-gradient(circle, ${p(a)} 1px, transparent 1px)`,
+    backgroundSize:  `${size}px ${size}px`,
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+
+    <!-- ── Dot grid overlay ──────────────────────────────────────────────── -->
+    <div
+      v-if="grid !== 'off'"
+      data-grid-overlay
+      :style="gridStyle"
+      style="position:fixed;inset:0;pointer-events:none;z-index:9990;"
+    />
+
+    <!-- ── Column guides overlay ─────────────────────────────────────────── -->
+    <div
+      v-if="columns"
+      style="position:fixed;inset:0;pointer-events:none;z-index:9990;display:flex;justify-content:center;"
+    >
+      <div style="width:100%;max-width:72rem;position:relative;">
+        <div :style="`position:absolute;inset-block:0;left:0;width:1px;background:${p(Math.round(alpha*60))};`" />
+        <div :style="`position:absolute;inset-block:0;right:0;width:1px;background:${p(Math.round(alpha*60))};`" />
+        <div :style="`position:absolute;inset-block:0;left:0;width:24px;background:${p(Math.round(alpha*12))};`" />
+        <div :style="`position:absolute;inset-block:0;right:0;width:24px;background:${p(Math.round(alpha*12))};`" />
+        <div :style="`position:absolute;inset-block:0;left:40px;width:1px;background:color-mix(in srgb,#6366f1 ${Math.round(alpha*38)}%,transparent);`" />
+        <div :style="`position:absolute;inset-block:0;right:40px;width:1px;background:color-mix(in srgb,#6366f1 ${Math.round(alpha*38)}%,transparent);`" />
+        <div :style="`position:absolute;inset-block:0;left:50%;width:1px;background:${p(Math.round(alpha*18))};`" />
+        <div style="position:absolute;top:8px;left:50%;transform:translateX(-50%);font-family:ui-monospace,monospace;font-size:10px;font-weight:600;color:color-mix(in srgb,var(--ui-primary) 65%,transparent);white-space:nowrap;background:rgb(0 0 0 / 55%);padding:2px 6px;border-radius:3px;">
+          max-w-6xl · 72rem · px-6 / sm:px-10
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Measure layer ─────────────────────────────────────────────────── -->
+    <template v-if="measuring">
+
+      <!-- Full-screen event capture overlay (briefly blinded for elementFromPoint). ESC exits. -->
+      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+      <div
+        ref="measureBlocker"
+        data-dev-console
+        data-measure-blocker
+        style="position:fixed;inset:0;z-index:9982;cursor:crosshair;"
+        @mousemove="onMeasureMove"
+        @click.prevent="onMeasureClick"
+      />
+
+      <!-- Hover highlight (only while A isn't pinned, or before B is pinned) -->
+      <div
+        v-if="measureHover && !measurePinnedB"
+        data-dev-console
+        :style="`
+          position:fixed;
+          top:${measureHover.top}px;left:${measureHover.left}px;
+          width:${measureHover.width}px;height:${measureHover.height}px;
+          pointer-events:none;z-index:9983;
+          border:1px dashed ${p(65)};
+          background:${p(6)};
+          box-sizing:border-box;
+        `"
+      >
+        <!-- Dimension label -->
+        <div
+          data-dev-console
+          style="
+            position:absolute;bottom:100%;left:0;margin-bottom:3px;
+            font-family:ui-monospace,monospace;font-size:11px;font-weight:600;
+            color:var(--ui-primary);background:rgb(0 0 0 / 70%);
+            padding:2px 5px;border-radius:3px;white-space:nowrap;line-height:1.4;
+          "
+        >
+          {{ measureLabelHov }} · {{ formatPx(measureHover.width) }} × {{ formatPx(measureHover.height) }}
+        </div>
+        <!-- Centre crosshair -->
+        <div data-dev-console :style="`position:absolute;top:50%;left:0;right:0;height:1px;background:${p(30)};`" />
+        <div data-dev-console :style="`position:absolute;left:50%;top:0;bottom:0;width:1px;background:${p(30)};`" />
+      </div>
+
+      <!-- Pinned A highlight (solid) -->
+      <div
+        v-if="measurePinnedA"
+        data-dev-console
+        :style="`
+          position:fixed;
+          top:${measurePinnedA.top}px;left:${measurePinnedA.left}px;
+          width:${measurePinnedA.width}px;height:${measurePinnedA.height}px;
+          pointer-events:none;z-index:9984;
+          border:2px solid var(--ui-primary);
+          background:${p(8)};
+          box-sizing:border-box;
+        `"
+      >
+        <div
+          data-dev-console
+          style="
+            position:absolute;bottom:100%;left:0;margin-bottom:3px;
+            font-family:ui-monospace,monospace;font-size:11px;font-weight:600;
+            color:var(--ui-primary);background:rgb(0 0 0 / 80%);
+            padding:2px 6px;border-radius:3px;white-space:nowrap;line-height:1.4;
+          "
+        >
+          [A] {{ measureLabelA }} · {{ formatPx(measurePinnedA.width) }} × {{ formatPx(measurePinnedA.height) }}
+        </div>
+        <!-- Corner markers -->
+        <div data-dev-console style="position:absolute;top:-2px;left:-2px;width:6px;height:6px;border-top:2px solid var(--ui-primary);border-left:2px solid var(--ui-primary);" />
+        <div data-dev-console style="position:absolute;top:-2px;right:-2px;width:6px;height:6px;border-top:2px solid var(--ui-primary);border-right:2px solid var(--ui-primary);" />
+        <div data-dev-console style="position:absolute;bottom:-2px;left:-2px;width:6px;height:6px;border-bottom:2px solid var(--ui-primary);border-left:2px solid var(--ui-primary);" />
+        <div data-dev-console style="position:absolute;bottom:-2px;right:-2px;width:6px;height:6px;border-bottom:2px solid var(--ui-primary);border-right:2px solid var(--ui-primary);" />
+      </div>
+
+      <!-- Pinned B highlight (secondary colour) -->
+      <div
+        v-if="measurePinnedB"
+        data-dev-console
+        :style="`
+          position:fixed;
+          top:${measurePinnedB.top}px;left:${measurePinnedB.left}px;
+          width:${measurePinnedB.width}px;height:${measurePinnedB.height}px;
+          pointer-events:none;z-index:9984;
+          border:2px solid color-mix(in srgb,var(--ui-primary) 55%,white);
+          background:color-mix(in srgb,var(--ui-primary) 5%,transparent);
+          box-sizing:border-box;
+        `"
+      >
+        <div
+          data-dev-console
+          style="
+            position:absolute;bottom:100%;left:0;margin-bottom:3px;
+            font-family:ui-monospace,monospace;font-size:11px;font-weight:600;
+            color:color-mix(in srgb,var(--ui-primary) 55%,white);
+            background:rgb(0 0 0 / 80%);
+            padding:2px 6px;border-radius:3px;white-space:nowrap;line-height:1.4;
+          "
+        >
+          [B] {{ measureLabelB }} · {{ formatPx(measurePinnedB.width) }} × {{ formatPx(measurePinnedB.height) }}
+        </div>
+      </div>
+
+      <!-- Horizontal gap indicator -->
+      <template v-if="gapResult && gapResult.h !== null && measurePinnedA && gapTarget">
+        <div
+          data-dev-console
+          :style="`
+            position:fixed;
+            top:${hGapLineY - 0.5}px;
+            left:${hGapLeft}px;
+            width:${hGapWidth}px;height:1px;
+            background:var(--ui-primary);pointer-events:none;z-index:9985;
+          `"
+        >
+          <!-- Tick marks -->
+          <div data-dev-console style="position:absolute;left:0;top:-4px;width:1px;height:9px;background:var(--ui-primary);" />
+          <div data-dev-console style="position:absolute;right:0;top:-4px;width:1px;height:9px;background:var(--ui-primary);" />
+          <!-- Label -->
+          <div
+            v-if="hGapWidth > 18"
+            data-dev-console
+            style="
+              position:absolute;top:-9px;left:50%;transform:translateX(-50%);
+              font-family:ui-monospace,monospace;font-size:10px;font-weight:700;
+              color:var(--ui-primary);background:rgb(0 0 0 / 80%);
+              padding:1px 4px;border-radius:3px;white-space:nowrap;
+            "
+          >{{ formatPx(gapResult.h) }}</div>
+        </div>
+        <!-- Label beside the line when gap too narrow for inline -->
+        <div
+          v-if="hGapWidth <= 18"
+          data-dev-console
+          :style="`
+            position:fixed;top:${hGapLineY - 9}px;left:${hGapLeft + hGapWidth + 4}px;
+            font-family:ui-monospace,monospace;font-size:10px;font-weight:700;
+            color:var(--ui-primary);background:rgba(0,0,0,0.8);
+            padding:1px 4px;border-radius:3px;white-space:nowrap;z-index:9985;pointer-events:none;
+          `"
+        >{{ formatPx(gapResult.h) }}</div>
+      </template>
+
+      <!-- Vertical gap indicator -->
+      <template v-if="gapResult && gapResult.v !== null && measurePinnedA && gapTarget">
+        <div
+          data-dev-console
+          :style="`
+            position:fixed;
+            left:${vGapLineX - 0.5}px;
+            top:${vGapTop}px;
+            width:1px;height:${vGapHeight}px;
+            background:var(--ui-primary);pointer-events:none;z-index:9985;
+          `"
+        >
+          <div data-dev-console style="position:absolute;top:0;left:-4px;width:9px;height:1px;background:var(--ui-primary);" />
+          <div data-dev-console style="position:absolute;bottom:0;left:-4px;width:9px;height:1px;background:var(--ui-primary);" />
+          <div
+            v-if="vGapHeight > 18"
+            data-dev-console
+            style="
+              position:absolute;left:6px;top:50%;transform:translateY(-50%);
+              font-family:ui-monospace,monospace;font-size:10px;font-weight:700;
+              color:var(--ui-primary);background:rgb(0 0 0 / 80%);
+              padding:1px 4px;border-radius:3px;white-space:nowrap;
+            "
+          >{{ formatPx(gapResult.v) }}</div>
+        </div>
+        <div
+          v-if="vGapHeight <= 18"
+          data-dev-console
+          :style="`
+            position:fixed;top:${vGapTop + vGapHeight + 4}px;left:${vGapLineX + 6}px;
+            font-family:ui-monospace,monospace;font-size:10px;font-weight:700;
+            color:var(--ui-primary);background:rgba(0,0,0,0.8);
+            padding:1px 4px;border-radius:3px;white-space:nowrap;z-index:9985;pointer-events:none;
+          `"
+        >{{ formatPx(gapResult.v) }}</div>
+      </template>
+
+      <!-- Centre-alignment guide lines -->
+      <template v-if="alignResult && measurePinnedA && gapTarget">
+        <!-- Shared horizontal centre (same Y) -->
+        <div
+          v-if="alignResult.hCentre"
+          data-dev-console
+          :style="`
+            position:fixed;
+            top:${(measurePinnedA.centerY + gapTarget.centerY) / 2 - 0.5}px;
+            left:${Math.min(measurePinnedA.left, gapTarget.left) - 20}px;
+            width:${Math.abs(measurePinnedA.right - gapTarget.left) + 40 + Math.abs(Math.min(measurePinnedA.left, gapTarget.left) - Math.min(measurePinnedA.left, gapTarget.left))}px;
+            width:${Math.max(measurePinnedA.right, gapTarget.right) - Math.min(measurePinnedA.left, gapTarget.left) + 40}px;
+            height:1px;
+            border-top:1px dashed ${p(45)};
+            pointer-events:none;z-index:9983;
+          `"
+        />
+        <!-- Shared vertical centre (same X) -->
+        <div
+          v-if="alignResult.vCentre"
+          data-dev-console
+          :style="`
+            position:fixed;
+            left:${(measurePinnedA.centerX + gapTarget.centerX) / 2 - 0.5}px;
+            top:${Math.min(measurePinnedA.top, gapTarget.top) - 20}px;
+            height:${Math.max(measurePinnedA.bottom, gapTarget.bottom) - Math.min(measurePinnedA.top, gapTarget.top) + 40}px;
+            width:1px;
+            border-left:1px dashed ${p(45)};
+            pointer-events:none;z-index:9983;
+          `"
+        />
+      </template>
+
+      <!-- Measure HUD (bottom-left) -->
+      <div
+        data-dev-console
+        style="
+          position:fixed;bottom:16px;left:16px;z-index:9986;
+          background:#09090f;border:1px solid color-mix(in srgb,var(--ui-primary) 22%,transparent);
+          border-radius:8px;padding:10px 14px;max-width:320px;
+          box-shadow:0 4px 20px rgb(0 0 0 / 60%);
+          font-family:ui-monospace,monospace;font-size:11px;
+        "
+      >
+        <div v-if="!measurePinnedA" style="color:#52525b;">
+          Click an element to measure · ESC to exit
+        </div>
+        <template v-else>
+          <div style="color:var(--ui-primary);margin-bottom:6px;">
+            [A] {{ measureLabelA }}
+            <span style="color:#52525b;"> · {{ formatPx(measurePinnedA.width) }} × {{ formatPx(measurePinnedA.height) }}</span>
+          </div>
+          <div v-if="!measurePinnedB && !measureHover" style="color:#52525b;">
+            Hover or click a second element
+          </div>
+          <template v-if="gapTarget">
+            <div style="color:color-mix(in srgb,var(--ui-primary) 55%,white);margin-bottom:6px;">
+              [{{ measurePinnedB ? 'B' : '→' }}] {{ measurePinnedB ? measureLabelB : measureLabelHov }}
+              <span style="color:#52525b;"> · {{ formatPx(gapTarget.width) }} × {{ formatPx(gapTarget.height) }}</span>
+            </div>
+            <!-- Gap info -->
+            <div v-if="gapResult" style="color:#a1a1aa;border-top:1px solid rgb(255 255 255 / 6%);padding-top:6px;">
+              <span v-if="gapResult.h !== null">H gap: <strong style="color:var(--ui-primary);">{{ formatPx(gapResult.h) }}</strong> </span>
+              <span v-if="gapResult.v !== null">V gap: <strong style="color:var(--ui-primary);">{{ formatPx(gapResult.v) }}</strong></span>
+              <span v-if="gapResult.h === null && gapResult.v === null" style="color:#52525b;">overlapping</span>
+            </div>
+            <!-- Alignment flags -->
+            <div v-if="alignResult" style="margin-top:5px;display:flex;flex-wrap:wrap;gap:4px;">
+              <span v-if="alignResult.topEdge"    class="sc-align-tag">top ✓</span>
+              <span v-if="alignResult.bottomEdge" class="sc-align-tag">bottom ✓</span>
+              <span v-if="alignResult.leftEdge"   class="sc-align-tag">left ✓</span>
+              <span v-if="alignResult.rightEdge"  class="sc-align-tag">right ✓</span>
+              <span v-if="alignResult.hCentre"    class="sc-align-tag">H-centre ✓</span>
+              <span v-if="alignResult.vCentre"    class="sc-align-tag">V-centre ✓</span>
+            </div>
+          </template>
+          <div style="color:#3f3f46;margin-top:8px;">ESC to clear · click again to restart</div>
+        </template>
+      </div>
+
+    </template>
+
+    <!-- ── Static shell overlay ───────────────────────────────────────────── -->
+    <div
+      v-if="showStaticShell"
+      data-dev-console
+      data-static-shell
+      style="position:fixed;inset:0;z-index:9999;background:#0a0a0a;"
+    >
+      <div data-dev-console style="position:fixed;top:12px;left:12px;z-index:10000;font-family:ui-monospace,monospace;font-size:11px;font-weight:600;color:#4ade80;background:rgb(0 0 0 / 85%);padding:6px 12px;border-radius:4px;border:1px solid rgb(74 222 128 / 30%);letter-spacing:0.1em;">
+        STATIC SHELL — SSG OUTPUT
+        <span style="color:#52525b;margin-left:8px;font-weight:400;">{{ staticHtml.length.toLocaleString() }} bytes</span>
+      </div>
+      <button
+        data-dev-console
+        class="sc-btn"
+        style="position:fixed;top:12px;right:12px;z-index:10000;"
+        @click="showStaticShell = false"
+      >Close ✕</button>
+      <iframe
+        data-dev-console
+        :srcdoc="staticHtml"
+        style="width:100%;height:100%;border:0;background:#fff;"
+        title="Static SSG output"
+      />
+    </div>
+
+  </Teleport>
+
+  <!-- Color scheme -->
+  <section data-dev-console style="margin-bottom:26px;">
+    <h3 class="sc-section-label">// COLOR SCHEME</h3>
+    <div data-dev-console style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;">
+      <button
+        v-for="c in COLOR_OPTIONS"
+        :key="c.name"
+        data-dev-console
+        :title="c.label"
+        :style="`display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:5px 6px;border-radius:7px;outline:${currentPrimary === c.name ? '2px solid rgba(255,255,255,0.45)' : '2px solid transparent'};outline-offset:2px;transition:outline-color 0.15s;`"
+        @click="appConfig.ui.colors.primary = c.name"
+      >
+        <div :style="`width:34px;height:34px;border-radius:8px;background:${c.hex};box-shadow:${currentPrimary === c.name ? '0 0 12px ' + c.hex + '90' : '0 2px 8px rgba(0,0,0,0.45)'};transition:box-shadow 0.2s;`" />
+        <span style="font-family:ui-monospace,monospace;font-size:10px;color:#52525b;">{{ c.label }}</span>
+      </button>
+    </div>
+    <p style="font-family:ui-monospace,monospace;font-size:10px;color:#3f3f46;margin-top:10px;">
+      primary: <span style="color:#71717a;">{{ currentPrimary }}</span>
+    </p>
+  </section>
+
+  <!-- Dev overlay -->
+  <section data-dev-console style="margin-bottom:26px;">
+    <h3 class="sc-section-label">// DEV OVERLAY</h3>
+    <div data-dev-console style="display:flex;flex-direction:column;gap:11px;">
+      <div data-dev-console style="display:flex;align-items:center;justify-content:space-between;">
+        <span style="font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa;">Grid</span>
+        <div data-dev-console style="display:flex;gap:4px;">
+          <button v-for="opt in (['off', '4', '8'] as GridSize[])" :key="opt" data-dev-console class="sc-btn" :class="{ 'sc-btn-active': grid === opt }" @click="grid = opt">
+            {{ opt === 'off' ? 'Off' : opt + 'px' }}
+          </button>
+        </div>
+      </div>
+      <div data-dev-console style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
+        <span style="font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa;">Columns <span style="font-size:10px;color:#3f3f46;margin-left:6px;">max-w-6xl / px-6 / sm:px-10</span></span>
+        <button data-dev-console class="sc-btn" :class="{ 'sc-btn-active': columns }" @click="columns = !columns">{{ columns ? 'On' : 'Off' }}</button>
+      </div>
+      <div data-dev-console style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
+        <span style="font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa;">Outlines <span style="font-size:10px;color:#3f3f46;margin-left:6px;">all elements</span></span>
+        <button data-dev-console class="sc-btn" :class="{ 'sc-btn-active': outlines }" @click="outlines = !outlines">{{ outlines ? 'On' : 'Off' }}</button>
+      </div>
+      <div data-dev-console>
+        <div data-dev-console style="display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;">
+          <span style="font-family:ui-monospace,monospace;font-size:12px;color:#a1a1aa;">Overlay Opacity</span>
+          <span style="font-family:ui-monospace,monospace;font-size:11px;color:#52525b;">{{ overlayOpacity }}%</span>
+        </div>
+        <input v-model.number="overlayOpacity" data-dev-console type="range" min="10" max="80" aria-label="Overlay opacity" style="width:100%;accent-color:var(--ui-primary);cursor:pointer;" >
+      </div>
+    </div>
+  </section>
+
+  <!-- Measure tool -->
+  <section data-dev-console style="margin-bottom:26px;">
+    <h3 class="sc-section-label">// MEASURE</h3>
+    <div data-dev-console style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;">
+      <div style="font-family:ui-monospace,monospace;font-size:11px;color:#52525b;line-height:1.6;">
+        Click elements to measure gaps &amp; alignment.<br>
+        2 picks = locked comparison · ESC to clear
+      </div>
+      <button
+        data-dev-console
+        class="sc-btn"
+        :class="{ 'sc-btn-active': measuring }"
+        style="flex-shrink:0;"
+        @click="measuring = !measuring; showConsole = false"
+      >{{ measuring ? 'Active' : 'Start' }}</button>
+    </div>
+  </section>
+
+  <!-- Module list -->
+  <section data-dev-console style="margin-bottom:26px;">
+    <h3 class="sc-section-label">// MODULE LIST</h3>
+    <div data-dev-console style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;">
+      <div style="font-family:ui-monospace,monospace;font-size:11px;color:#52525b;line-height:1.6;">
+        Show filtered modules<br>
+        <span style="font-size:10px;color:#3f3f46;">Modules with &lt; 100 installs · shown faded</span>
+      </div>
+      <button
+        data-dev-console
+        class="sc-btn"
+        :class="{ 'sc-btn-active': showFiltered }"
+        style="flex-shrink:0;"
+        @click="showFiltered = !showFiltered"
+      >{{ showFiltered ? 'On' : 'Off' }}</button>
+    </div>
+  </section>
+
+  <!-- Client data -->
+  <section data-dev-console>
+    <h3 class="sc-section-label">// CLIENT DATA</h3>
+    <div data-dev-console style="display:flex;flex-direction:column;gap:11px;">
+      <!-- Static shell -->
+      <div data-dev-console style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;">
+        <div style="font-family:ui-monospace,monospace;font-size:11px;color:#52525b;line-height:1.6;">
+          Static shell overlay<br>
+          <span style="font-size:10px;color:#3f3f46;">Fetches generated HTML · shows what<br>was SSG vs hydrated since. Best vs<br><code style="color:#71717a;">nuxt preview</code></span>
+        </div>
+        <button
+          data-dev-console
+          class="sc-btn"
+          :class="{ 'sc-btn-active': showStaticShell }"
+          style="flex-shrink:0;"
+          @click="toggleStaticShell"
+        >{{ staticLoading ? '…' : showStaticShell ? 'Hide' : 'Show' }}</button>
+      </div>
+      <p v-if="staticError" data-dev-console style="font-family:ui-monospace,monospace;font-size:10px;color:#f87171;letter-spacing:0.04em;margin:0;">// FETCH ERROR: {{ staticError }}</p>
+      <!-- Payload inspector -->
+      <div data-dev-console style="display:flex;justify-content:space-between;align-items:center;">
+        <span style="font-family:ui-monospace,monospace;font-size:11px;color:#52525b;">Nuxt payload (SSG snapshot)</span>
+        <button data-dev-console class="sc-btn" :class="{ 'sc-btn-active': showPayload }" @click="showPayload = !showPayload">{{ showPayload ? 'Hide' : 'Show' }}</button>
+      </div>
+      <pre v-if="showPayload" data-dev-console style="margin:0;max-height:240px;overflow-y:auto;font-family:ui-monospace,monospace;font-size:10px;line-height:1.5;color:#71717a;background:rgb(0 0 0 / 35%);border-radius:4px;padding:8px;border:1px solid rgb(255 255 255 / 6%);">{{ payloadJson }}</pre>
+    </div>
+  </section>
+</template>
diff --git a/nuxt/app/layouts/default.vue b/nuxt/app/layouts/default.vue
index acf2c818..fb056a0b 100644
--- a/nuxt/app/layouts/default.vue
+++ b/nuxt/app/layouts/default.vue
@@ -9,6 +9,8 @@ const navLinks = [
   // { label: 'photos', to: '/photos' }, // photos section disabled
 ]
 
+const appVersion = useRuntimeConfig().public.appVersion as string
+
 const siteLinks = [
   { label: 'open source', to: '/open-source' },
   { label: 'community', to: '/community' },
@@ -20,7 +22,6 @@ const siteLinks = [
 const elsewhereLinks = site.socials.map(s => ({ label: `${s.label} ↗`, to: s.href }))
 
 const contactOpen = useContactModal()
-const isDev = inject('devMode', import.meta.dev)
 
 async function handleContactSubmit(payload: { name: string; email: string; message: string }) {
   await $fetch('/api/contact', { method: 'POST', body: payload })
@@ -49,9 +50,10 @@ async function handleContactSubmit(payload: { name: string; email: string; messa
       :feed-links="[{ label: 'RSS', href: '/blog.xml' }]"
       copyright="© 2026 Stuart Clark"
       stack="Nuxt · Tailwind · decoupled Drupal via DruxtJS"
+      :version="`v${appVersion}`"
     />
     <SCBackToTop />
     <SCContactModal v-model:open="contactOpen" :submit-handler="handleContactSubmit" />
-    <DevGrid v-if="isDev" />
+    <DevGrid />
   </div>
 </template>
diff --git a/nuxt/content.config.ts b/nuxt/content.config.ts
index 12805fcd..86ad4a3b 100644
--- a/nuxt/content.config.ts
+++ b/nuxt/content.config.ts
@@ -8,5 +8,13 @@ export default defineContentConfig({
       source: 'articles-data/**/*.json',
       schema: articleEntrySchema,
     }),
+    // Rendered from the repo-root CHANGELOG.md, copied in by
+    // scripts/sync-changelog.mjs (see its `pre*` package.json hooks). No
+    // custom schema needed — the built-in page schema already supplies
+    // path/title/description/body.
+    changelog: defineCollection({
+      type: 'page',
+      source: 'changelog.md',
+    }),
   },
 })
diff --git a/nuxt/nuxt.config.ts b/nuxt/nuxt.config.ts
index cde2b332..3bc07cd7 100644
--- a/nuxt/nuxt.config.ts
+++ b/nuxt/nuxt.config.ts
@@ -1,6 +1,14 @@
+import { getAppVersion } from './scripts/getAppVersion.mjs'
+
 export default defineNuxtConfig({
   compatibilityDate: '2025-01-01',
 
+  runtimeConfig: {
+    public: {
+      appVersion: getAppVersion(),
+    },
+  },
+
   site: {
     // Netlify sometimes builds `main` as a non-production deploy. Then
     // DEPLOY_PRIME_URL resolves to a netlify.app branch URL, not the real
diff --git a/nuxt/package.json b/nuxt/package.json
index 9b8e19b0..c17fdffb 100644
--- a/nuxt/package.json
+++ b/nuxt/package.json
@@ -5,10 +5,14 @@
   "packageManager": "pnpm@10.34.4",
   "scripts": {
     "postinstall": "[ \"$NETLIFY\" = \"true\" ] || SKIP_STORYBOOK=1 nuxt prepare",
+    "predev": "node scripts/sync-changelog.mjs",
     "build": "SKIP_STORYBOOK=1 nuxt build",
+    "prebuild": "node scripts/sync-changelog.mjs",
     "dev": "nuxt dev",
     "generate": "SKIP_STORYBOOK=1 nuxt generate",
+    "pregenerate": "node scripts/sync-changelog.mjs",
     "preview": "SKIP_STORYBOOK=1 nuxt preview",
+    "pretypecheck": "node scripts/sync-changelog.mjs",
     "typecheck": "SKIP_STORYBOOK=1 nuxt typecheck",
     "storybook": "STORYBOOK_STANDALONE=1 storybook dev -p 6006 --no-open",
     "storybook:build": "STORYBOOK_STANDALONE=1 SKIP_STORYBOOK=1 storybook build",
diff --git a/nuxt/scripts/getAppVersion.mjs b/nuxt/scripts/getAppVersion.mjs
new file mode 100644
index 00000000..4c5e6df4
--- /dev/null
+++ b/nuxt/scripts/getAppVersion.mjs
@@ -0,0 +1,16 @@
+// Reads the latest released version straight from the repo-root
+// CHANGELOG.md, so nuxt.config.ts can expose it without a second,
+// driftable version field (e.g. in package.json). Skips `[Unreleased]`,
+// which never has a version number.
+
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export function getAppVersion() {
+  const changelog = readFileSync(path.join(__dirname, '../../CHANGELOG.md'), 'utf8')
+  const match = changelog.match(/^## \[(\d+\.\d+\.\d+)\]/m)
+  return match?.[1] ?? '0.0.0'
+}
diff --git a/nuxt/scripts/sync-changelog.mjs b/nuxt/scripts/sync-changelog.mjs
new file mode 100644
index 00000000..4650f1b6
--- /dev/null
+++ b/nuxt/scripts/sync-changelog.mjs
@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+// Copies the repo-root CHANGELOG.md into content/changelog.md, so the
+// `changelog` collection (content.config.ts) can find it. @nuxt/content
+// only scans nuxt/content/, and the real CHANGELOG.md lives one directory
+// up, outside that scan root.
+//
+// Runs on every dev/build/generate (see the `pre*` scripts in
+// package.json), so content/changelog.md always matches the real file with
+// no manual step. It's gitignored, not committed — CHANGELOG.md is the only
+// source of truth.
+
+import { copyFile, mkdir } from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const SRC = path.join(__dirname, '../../CHANGELOG.md')
+const DEST = path.join(__dirname, '../content/changelog.md')
+
+async function main() {
+  await mkdir(path.dirname(DEST), { recursive: true })
+  await copyFile(SRC, DEST)
+  console.log(`sync-changelog: copied ${path.relative(process.cwd(), SRC)} -> ${path.relative(process.cwd(), DEST)}`)
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})
diff --git a/nuxt/tests/components/DevGrid.spec.ts b/nuxt/tests/components/DevGrid.spec.ts
index 0523b0ad..bebd4fc1 100644
--- a/nuxt/tests/components/DevGrid.spec.ts
+++ b/nuxt/tests/components/DevGrid.spec.ts
@@ -1,8 +1,23 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime'
 import { nextTick } from 'vue'
 import DevGrid from '~/components/DevGrid.vue'
 
+// DevGrid queries the `changelog` collection to render inline in the panel.
+// There's no routed page for it (unlike articleEntries), so there's no
+// existing shared mock shape to reuse — a bare spy is enough here: what
+// matters is that DevGrid asks for the right collection/path and doesn't
+// crash regardless of what comes back (real MDC-rendered content is
+// covered by the e2e check in tests/seo/seo.spec.ts against a real build).
+// mockNuxtImport's factory is hoisted above regular imports/consts, so the
+// spy has to live inside vi.hoisted() too — same reasoning as writing.spec.ts.
+const { queryChangelogSpy } = vi.hoisted(() => ({
+  queryChangelogSpy: vi.fn(() => ({
+    path: () => ({ first: async () => null }),
+  })),
+}))
+mockNuxtImport('queryCollection', () => queryChangelogSpy)
+
 // ── constants ─────────────────────────────────────────────────────────────────
 
 const STORAGE_KEY = 'sc-devconsole-v1'
@@ -19,17 +34,15 @@ async function triggerKonami() {
   for (const k of KONAMI_KEYS) { pressKey(k); await nextTick() }
 }
 
-function fakeRect(overrides: Partial<DOMRect> = {}): DOMRect {
-  const base = { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0, x: 0, y: 0, toJSON: () => ({}) }
-  return { ...base, ...overrides } as DOMRect
-}
-
-function measurableEl(rect: Partial<DOMRect>, className = 'target-el') {
-  const el = document.createElement('div')
-  el.className = className
-  vi.spyOn(el, 'getBoundingClientRect').mockReturnValue(fakeRect(rect))
-  document.body.appendChild(el)
-  return el
+/**
+ * The console modal uses v-show, not v-if (see DevGrid.vue for why —
+ * DevGridTools' own Teleported overlays need to survive the console
+ * closing), so its markup stays in the DOM even when closed. Check the
+ * outermost backdrop's actual `display` instead of DOM/text presence.
+ */
+function isConsoleVisible(): boolean {
+  const backdrop = document.querySelector<HTMLElement>('[style*="9996"]')
+  return !!backdrop && backdrop.style.display !== 'none'
 }
 
 /** Mount, run konami, click π → password modal is now open.
@@ -48,8 +61,8 @@ async function openPasswordModal() {
  * Uses fake timers ONLY around the setTimeout inside submitPassword so
  * mountSuspended itself can run with real timers.
  */
-async function mountAndUnlock() {
-  const w = await mountSuspended(DevGrid)
+async function mountAndUnlock(options?: Parameters<typeof mountSuspended>[1]) {
+  const w = await mountSuspended(DevGrid, options)
   await triggerKonami()
   document.querySelector<HTMLElement>('.sc-pi-badge')!.click()
   await nextTick()
@@ -108,14 +121,6 @@ describe('DevGrid startup', () => {
     w.unmount()
   })
 
-  it('loads grid overlay from localStorage (grid:8)', async () => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify({ grid: '8', pi: false }))
-    const w = await mountSuspended(DevGrid)
-    await nextTick()
-    expect(document.body.querySelector('[data-grid-overlay]')).not.toBeNull()
-    w.unmount()
-  })
-
   it('handles corrupt localStorage JSON without throwing', async () => {
     localStorage.setItem(STORAGE_KEY, 'NOT_JSON')
     const w = await mountSuspended(DevGrid)
@@ -124,14 +129,11 @@ describe('DevGrid startup', () => {
     w.unmount()
   })
 
-  it('removes body class and keydown listener on unmount', async () => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify({ outlines: true }))
+  it('removes keydown listener on unmount', async () => {
     const w = await mountSuspended(DevGrid)
     await nextTick()
-    expect(document.body.classList.contains('sc-devgrid-outlines')).toBe(true)
     w.unmount()
     await nextTick()
-    expect(document.body.classList.contains('sc-devgrid-outlines')).toBe(false)
     // Listener removed: konami no longer fires
     await triggerKonami()
     expect(document.querySelector('.sc-pi-badge')).toBeNull()
@@ -302,7 +304,7 @@ describe('password modal', () => {
   })
 })
 
-// ── authenticated flow ────────────────────────────────────────────────────────
+// ── authenticated flow (shell only — dev tools live in DevGridTools.spec.ts) ──
 
 describe('authenticated flow', () => {
   it('pi click opens console directly when already authenticated', async () => {
@@ -310,14 +312,14 @@ describe('authenticated flow', () => {
     pressKey('Escape'); await nextTick() // close console
     document.querySelector<HTMLElement>('.sc-pi-badge')!.click()
     await nextTick()
-    expect(document.body.innerHTML).toContain('H4CK TH3 PL4N3T')
+    expect(isConsoleVisible()).toBe(true)
     w.unmount()
   })
 
   it('ESC closes the console', async () => {
     const w = await mountAndUnlock()
     pressKey('Escape'); await nextTick()
-    expect(document.body.innerHTML).not.toContain('H4CK TH3 PL4N3T')
+    expect(isConsoleVisible()).toBe(false)
     w.unmount()
   })
 
@@ -325,7 +327,7 @@ describe('authenticated flow', () => {
     const w = await mountAndUnlock()
     pressKey('Escape'); await nextTick() // close console
     pressKey('Escape'); await nextTick() // nothing open now
-    expect(document.body.innerHTML).not.toContain('H4CK TH3 PL4N3T')
+    expect(isConsoleVisible()).toBe(false)
     expect(document.querySelector('input[type="password"]')).toBeNull()
     w.unmount()
   })
@@ -336,7 +338,7 @@ describe('authenticated flow', () => {
       .filter(b => b.textContent?.trim() === '✕')
     closeBtns[closeBtns.length - 1]?.click() // last ✕ is the console's
     await nextTick()
-    expect(document.body.innerHTML).not.toContain('H4CK TH3 PL4N3T')
+    expect(isConsoleVisible()).toBe(false)
     w.unmount()
   })
 
@@ -346,559 +348,116 @@ describe('authenticated flow', () => {
     const backdrop = document.querySelector<HTMLElement>('[style*="9996"]')!
     backdrop.click()
     await nextTick()
-    expect(document.body.innerHTML).not.toContain('H4CK TH3 PL4N3T')
+    expect(isConsoleVisible()).toBe(false)
     w.unmount()
   })
 
-  // ── overlay toggles ─────────────────────────────────────────────────────
-
-  it('grid toggle: off → 4px → 8px → off', async () => {
-    const w = await mountAndUnlock()
-    expect(document.body.querySelector('[data-grid-overlay]')).toBeNull()
+  it('closing the console does not unmount DevGridTools (grid overlay survives)', async () => {
+    const w = await mountAndUnlock({ global: { provide: { devMode: true } } })
+    await vi.waitFor(() => {
+      expect(document.body.innerHTML).toContain('COLOR SCHEME')
+    }, { timeout: 3000, interval: 50 })
 
     const btn4 = [...document.querySelectorAll<HTMLElement>('[data-dev-console] button')]
       .find(b => b.textContent?.trim() === '4px')
-    btn4?.click(); await nextTick()
+    btn4?.click()
+    await nextTick()
     expect(document.body.querySelector('[data-grid-overlay]')).not.toBeNull()
 
-    const btn8 = [...document.querySelectorAll<HTMLElement>('[data-dev-console] button')]
-      .find(b => b.textContent?.trim() === '8px')
-    btn8?.click(); await nextTick()
+    pressKey('Escape'); await nextTick() // close console
+    expect(isConsoleVisible()).toBe(false)
+    // The whole point of the grid overlay is inspecting the real page with
+    // the console out of the way — closing it must not take the grid down.
     expect(document.body.querySelector('[data-grid-overlay]')).not.toBeNull()
-
-    const btnOff = [...document.querySelectorAll<HTMLElement>('[data-dev-console] button')]
-      .find(b => b.textContent?.trim() === 'Off')
-    btnOff?.click(); await nextTick()
-    expect(document.body.querySelector('[data-grid-overlay]')).toBeNull()
-    w.unmount()
-  })
-
-  it('columns toggle shows/hides column guides', async () => {
-    const w = await mountAndUnlock()
-    const colRow = [...document.querySelectorAll<HTMLElement>('[data-dev-console] [style*="space-between"]')]
-      .find(row => row.textContent?.includes('max-w-6xl'))
-    const colBtn = colRow?.querySelector<HTMLElement>('button')
-
-    colBtn?.click(); await nextTick()
-    expect(document.body.innerHTML).toContain('max-w-6xl · 72rem')
-    colBtn?.click(); await nextTick()
-    expect(document.body.innerHTML).not.toContain('max-w-6xl · 72rem')
-    w.unmount()
-  })
-
-  it('outlines toggle adds/removes body class', async () => {
-    const w = await mountAndUnlock()
-    const outRow = [...document.querySelectorAll<HTMLElement>('[data-dev-console] [style*="space-between"]')]
-      .find(row => row.textContent?.includes('Outlines') && row.textContent?.includes('all elements'))
-    const outBtn = outRow?.querySelector<HTMLElement>('button')
-
-    outBtn?.click(); await nextTick()
-    expect(document.body.classList.contains('sc-devgrid-outlines')).toBe(true)
-    outBtn?.click(); await nextTick()
-    expect(document.body.classList.contains('sc-devgrid-outlines')).toBe(false)
-    w.unmount()
-  })
-
-  it('color scheme buttons mutate appConfig.ui.colors.primary', async () => {
-    const w = await mountAndUnlock()
-    const electricBtn = [...document.querySelectorAll<HTMLElement>('[data-dev-console] button')]
-      .find(b => b.title === 'Electric')
-    electricBtn?.click(); await nextTick()
-    // After switching to electric, the button should have the active outline style.
-    // happy-dom normalises rgba() with spaces after commas, so strip whitespace.
-    expect(electricBtn?.style.outline.replace(/\s+/g, '')).toContain('rgba(255,255,255,0.45)')
-    w.unmount()
-  })
-
-  it('opacity slider adjusts overlay opacity', async () => {
-    const w = await mountAndUnlock()
-    const btn4 = [...document.querySelectorAll<HTMLElement>('[data-dev-console] button')]
-      .find(b => b.textContent?.trim() === '4px')
-    btn4?.click(); await nextTick()
-    const slider = document.querySelector<HTMLInputElement>('[data-dev-console] input[type="range"]')!
-    slider.value = '60'
-    slider.dispatchEvent(new Event('input', { bubbles: true }))
-    await nextTick()
-    // The percentage label in the console should reflect the new value
-    expect(document.body.innerHTML).toContain('>60%<')
-    w.unmount()
-  })
-
-  // ── measure mode ────────────────────────────────────────────────────────
-
-  async function activateMeasure() {
-    const startBtn = [...document.querySelectorAll<HTMLElement>('[data-dev-console] button')]
-      .find(b => b.textContent?.trim() === 'Start')
-    startBtn?.click()
-    await nextTick()
-    return document.querySelector<HTMLElement>('[data-measure-blocker]')!
-  }
-
-  it('Start button enters measure mode and closes console', async () => {
-    const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    expect(blocker).not.toBeNull()
-    expect(document.body.innerHTML).not.toContain('H4CK TH3 PL4N3T')
-    w.unmount()
-  })
-
-  it('measure button shows "Active" while measuring', async () => {
-    const w = await mountAndUnlock()
-    await activateMeasure()
-    // Re-open console to inspect button label
-    document.querySelector<HTMLElement>('.sc-pi-badge')!.click()
-    await nextTick()
-    const activeBtn = [...document.querySelectorAll<HTMLElement>('[data-dev-console] button')]
-      .find(b => b.textContent?.trim() === 'Active')
-    expect(activeBtn).not.toBeNull()
-    w.unmount()
-  })
-
-  it('module list "Show filtered modules" toggle flips between Off and On', async () => {
-    const w = await mountAndUnlock()
-    const label = [...document.querySelectorAll<HTMLElement>('[data-dev-console] h3')]
-      .find(h => h.textContent?.includes('MODULE LIST'))
-    const toggleBtn = label?.closest('section')?.querySelector<HTMLElement>('button')
-    expect(toggleBtn?.textContent?.trim()).toBe('Off')
-    toggleBtn?.click()
-    await nextTick()
-    expect(toggleBtn?.textContent?.trim()).toBe('On')
-    w.unmount()
-  })
-
-  it('HUD shows "Click an element to measure" before first selection', async () => {
-    const w = await mountAndUnlock()
-    await activateMeasure()
-    expect(document.body.innerHTML).toContain('Click an element to measure')
-    w.unmount()
-  })
-
-  it('ESC without pins exits measure mode', async () => {
-    const w = await mountAndUnlock()
-    await activateMeasure()
-    pressKey('Escape'); await nextTick()
-    expect(document.querySelector('[data-measure-blocker]')).toBeNull()
-    w.unmount()
-  })
-
-  it('mousemove over element shows hover highlight with dimensions', async () => {
-    const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    const target = measurableEl({ top: 10, left: 20, width: 100, height: 50, right: 120, bottom: 60 })
-    vi.spyOn(document, 'elementFromPoint').mockReturnValue(target)
-    blocker.dispatchEvent(new MouseEvent('mousemove', { clientX: 50, clientY: 30, bubbles: true }))
-    await nextTick()
-    expect(document.body.innerHTML).toContain('100px × 50px')
-    target.remove()
-    w.unmount()
-  })
-
-  it('mousemove over a dev-console element shows nothing (filtered)', async () => {
-    const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    const consoleEl = document.createElement('div')
-    consoleEl.setAttribute('data-dev-console', '')
-    document.body.appendChild(consoleEl)
-    vi.spyOn(document, 'elementFromPoint').mockReturnValue(consoleEl)
-    blocker.dispatchEvent(new MouseEvent('mousemove', { clientX: 50, clientY: 30, bubbles: true }))
-    await nextTick()
-    // No dashed hover box should appear
-    expect(document.body.innerHTML).not.toContain('border:1px dashed')
-    consoleEl.remove()
-    w.unmount()
-  })
-
-  it('mousemove with no element under cursor shows no hover box', async () => {
-    const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    vi.spyOn(document, 'elementFromPoint').mockReturnValue(null)
-    blocker.dispatchEvent(new MouseEvent('mousemove', { clientX: 1, clientY: 1, bubbles: true }))
-    await nextTick()
-    expect(document.body.innerHTML).not.toContain('border:1px dashed')
     w.unmount()
-  })
-
-  it('click with no element under cursor does not crash', async () => {
-    const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    vi.spyOn(document, 'elementFromPoint').mockReturnValue(null)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 1, clientY: 1, bubbles: true }))
-    await nextTick()
-    expect(document.body.innerHTML).toContain('Click an element to measure')
-    w.unmount()
-  })
+  }, 10000)
+})
 
-  it('first click pins element A', async () => {
-    const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    const elA = measurableEl({ top: 0, left: 0, width: 100, height: 50, right: 100, bottom: 50 })
-    vi.spyOn(document, 'elementFromPoint').mockReturnValue(elA)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
-    await nextTick()
-    expect(document.body.innerHTML).toContain('[A]')
-    elA.remove()
-    w.unmount()
-  })
+// ── version / changelog section (always available, dev and prod) ─────────────
 
-  it('second click pins element B and shows gap info', async () => {
+describe('version section', () => {
+  it('shows the app version', async () => {
     const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    const elA = measurableEl({ top: 0, left: 0, width: 100, height: 50, right: 100, bottom: 50 })
-    const elB = measurableEl({ top: 0, left: 150, width: 80, height: 50, right: 230, bottom: 50 })
-    const fromPoint = vi.spyOn(document, 'elementFromPoint')
-    fromPoint.mockReturnValueOnce(elA)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
-    await nextTick()
-    fromPoint.mockReturnValueOnce(elB)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 180, clientY: 25, bubbles: true }))
-    await nextTick()
-    expect(document.body.innerHTML).toContain('[A]')
-    expect(document.body.innerHTML).toContain('[B]')
-    expect(document.body.innerHTML).toContain('H gap')
-    elA.remove(); elB.remove()
+    expect(document.body.innerHTML).toContain('// VERSION')
+    expect(document.body.innerHTML).toMatch(/stuar\.tc v\d+\.\d+\.\d+/)
     w.unmount()
   })
 
-  it('third click restarts with new A', async () => {
+  it('queries the changelog collection for inline display, not a routed page', async () => {
     const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    const elA = measurableEl({ top: 0, left: 0,   width: 100, height: 50, right: 100, bottom: 50 })
-    const elB = measurableEl({ top: 0, left: 150,  width: 80,  height: 50, right: 230, bottom: 50 })
-    const elC = measurableEl({ top: 0, left: 0,   width: 200, height: 60, right: 200, bottom: 60 }, 'el-c')
-    const fromPoint = vi.spyOn(document, 'elementFromPoint')
-    fromPoint.mockReturnValueOnce(elA)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50,  clientY: 25, bubbles: true }))
-    await nextTick()
-    fromPoint.mockReturnValueOnce(elB)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 180, clientY: 25, bubbles: true }))
-    await nextTick()
-    fromPoint.mockReturnValueOnce(elC)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 100, clientY: 30, bubbles: true }))
-    await nextTick()
-    expect(document.body.innerHTML).toContain('200px × 60px')
-    elA.remove(); elB.remove(); elC.remove()
+    expect(queryChangelogSpy).toHaveBeenCalledWith('changelog')
+    // No link anywhere in the panel points at a /changelog route — the
+    // content renders inline, there's nothing to navigate to.
+    const links = [...document.querySelectorAll<HTMLAnchorElement>('[data-dev-console] a')]
+    expect(links.some(a => a.getAttribute('href') === '/changelog')).toBe(false)
     w.unmount()
   })
 
-  it('ESC with pins first clears pins, second ESC exits measure mode', async () => {
+  it('does not crash when the changelog collection has no data yet', async () => {
     const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    const elA = measurableEl({ top: 0, left: 0, width: 100, height: 50, right: 100, bottom: 50 })
-    vi.spyOn(document, 'elementFromPoint').mockReturnValue(elA)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
-    await nextTick()
-    expect(document.body.innerHTML).toContain('[A]')
-
-    pressKey('Escape'); await nextTick()
-    expect(document.querySelector('[data-measure-blocker]')).not.toBeNull()
-    expect(document.body.innerHTML).toContain('Click an element to measure')
-
-    pressKey('Escape'); await nextTick()
-    expect(document.querySelector('[data-measure-blocker]')).toBeNull()
-    elA.remove()
+    // queryChangelogSpy resolves to null by default — the section should
+    // still show the version line without a Changelog toggle at all.
+    expect(document.body.innerHTML).toContain('// VERSION')
+    const btn = [...document.querySelectorAll<HTMLElement>('[data-dev-console] button')]
+      .find(b => b.textContent?.trim() === 'Changelog')
+    expect(btn).toBeUndefined()
     w.unmount()
   })
 
-  it('deactivating measure clears all state', async () => {
+  it('starts collapsed, and the Changelog toggle expands/collapses it', async () => {
+    queryChangelogSpy.mockImplementationOnce(() => ({
+      path: () => ({ first: async () => ({ body: { type: 'minimal', value: [] }, path: '/changelog' }) }),
+    }))
     const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    const elA = measurableEl({ top: 0, left: 0, width: 100, height: 50, right: 100, bottom: 50 })
-    vi.spyOn(document, 'elementFromPoint').mockReturnValue(elA)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
-    await nextTick()
+    const btn = [...document.querySelectorAll<HTMLElement>('[data-dev-console] button')]
+      .find(b => b.textContent?.trim() === 'Changelog')
+    expect(btn, 'Changelog toggle should appear once the collection resolves').not.toBeUndefined()
+    expect(document.body.innerHTML).not.toContain('>Hide<')
 
-    // Re-open console → click "Active" to deactivate
-    document.querySelector<HTMLElement>('.sc-pi-badge')!.click()
-    await nextTick()
-    const activeBtn = [...document.querySelectorAll<HTMLElement>('[data-dev-console] button')]
-      .find(b => b.textContent?.trim() === 'Active')
-    activeBtn?.click(); await nextTick()
-
-    expect(document.querySelector('[data-measure-blocker]')).toBeNull()
-    elA.remove()
-    w.unmount()
-  })
-
-  // ── gap indicator rendering ──────────────────────────────────────────────
-
-  async function pinTwo(a: Partial<DOMRect>, b: Partial<DOMRect>) {
-    const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    const elA = measurableEl(a)
-    const elB = measurableEl(b, 'el-b')
-    const fromPoint = vi.spyOn(document, 'elementFromPoint')
-    fromPoint.mockReturnValueOnce(elA)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 0, clientY: 0, bubbles: true }))
-    await nextTick()
-    fromPoint.mockReturnValueOnce(elB)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 0, clientY: 0, bubbles: true }))
-    await nextTick()
-    return { w, blocker, elA, elB }
-  }
-
-  it('renders H gap line with inline label when gap > 18px', async () => {
-    // A and B side-by-side with 30px gap, sharing a Y-overlap range
-    const { w, elA, elB } = await pinTwo(
-      { top: 50, left: 0,   width: 100, height: 100, right: 100, bottom: 150 },
-      { top: 50, left: 130, width: 100, height: 100, right: 230, bottom: 150 },
-    )
-    expect(document.body.innerHTML).toContain('30px')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  it('renders H gap line with beside label when gap ≤ 18px', async () => {
-    const { w, elA, elB } = await pinTwo(
-      { top: 0, left: 0,   width: 100, height: 50, right: 100, bottom: 50 },
-      { top: 0, left: 110, width: 100, height: 50, right: 210, bottom: 50 },
-    )
-    expect(document.body.innerHTML).toContain('10px')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  it('renders V gap line with inline label when gap > 18px', async () => {
-    const { w, elA, elB } = await pinTwo(
-      { top: 0,  left: 0, width: 100, height: 50, right: 100, bottom: 50  },
-      { top: 80, left: 0, width: 100, height: 50, right: 100, bottom: 130 },
-    )
-    expect(document.body.innerHTML).toContain('30px')
-    expect(document.body.innerHTML).toContain('V gap')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  it('renders V gap line with beside label when gap ≤ 18px', async () => {
-    const { w, elA, elB } = await pinTwo(
-      { top: 0,  left: 0, width: 100, height: 50, right: 100, bottom: 50  },
-      { top: 60, left: 0, width: 100, height: 50, right: 100, bottom: 110 },
-    )
-    expect(document.body.innerHTML).toContain('10px')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  it('shows "overlapping" in HUD when elements fully overlap', async () => {
-    const { w, elA, elB } = await pinTwo(
-      { top: 0,  left: 0,  width: 200, height: 200, right: 200, bottom: 200 },
-      { top: 50, left: 50, width: 100, height: 100, right: 150, bottom: 150 },
-    )
-    expect(document.body.innerHTML).toContain('overlapping')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  it('renders hCentre alignment guide when both share the same vertical midpoint', async () => {
-    // A: centerY=50 (top=0,height=100). B: centerY=50 (top=20,height=60).
-    const { w, elA, elB } = await pinTwo(
-      { top: 0,  left: 0,   width: 100, height: 100, right: 100, bottom: 100 },
-      { top: 20, left: 150, width: 80,  height: 60,  right: 230, bottom: 80  },
-    )
-    expect(document.body.innerHTML).toContain('H-centre ✓')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  it('renders vCentre alignment guide when both share the same horizontal midpoint', async () => {
-    // A: centerX=100 (left=0,width=200). B: centerX=100 (left=50,width=100).
-    const { w, elA, elB } = await pinTwo(
-      { top: 0,  left: 0,  width: 200, height: 50, right: 200, bottom: 50  },
-      { top: 80, left: 50, width: 100, height: 50, right: 150, bottom: 130 },
-    )
-    expect(document.body.innerHTML).toContain('V-centre ✓')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  it('shows all edge alignment tags when rects are identical', async () => {
-    const { w, elA, elB } = await pinTwo(
-      { top: 10, left: 20, width: 100, height: 50, right: 120, bottom: 60 },
-      { top: 10, left: 20, width: 100, height: 50, right: 120, bottom: 60 },
-    )
-    expect(document.body.innerHTML).toContain('top ✓')
-    expect(document.body.innerHTML).toContain('bottom ✓')
-    expect(document.body.innerHTML).toContain('left ✓')
-    expect(document.body.innerHTML).toContain('right ✓')
-    expect(document.body.innerHTML).toContain('H-centre ✓')
-    expect(document.body.innerHTML).toContain('V-centre ✓')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  it('live hover shows → label in HUD before B is locked', async () => {
-    const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    const elA = measurableEl({ top: 0, left: 0,   width: 100, height: 50, right: 100, bottom: 50 })
-    const elB = measurableEl({ top: 0, left: 150, width: 80,  height: 50, right: 230, bottom: 50 }, 'el-b')
-    const fromPoint = vi.spyOn(document, 'elementFromPoint')
-    fromPoint.mockReturnValueOnce(elA)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
-    await nextTick()
-    fromPoint.mockReturnValue(elB)
-    blocker.dispatchEvent(new MouseEvent('mousemove', { clientX: 180, clientY: 25, bubbles: true }))
+    btn?.click()
     await nextTick()
-    expect(document.body.innerHTML).toContain('[→]')
-    elA.remove(); elB.remove()
-    w.unmount()
-  })
+    const hideBtn = [...document.querySelectorAll<HTMLElement>('[data-dev-console] button')]
+      .find(b => b.textContent?.trim() === 'Hide')
+    expect(hideBtn, 'button relabels to Hide once expanded').not.toBeUndefined()
 
-  it('HUD shows "hover or click" when A is pinned but nothing else selected', async () => {
-    const w = await mountAndUnlock()
-    const blocker = await activateMeasure()
-    const elA = measurableEl({ top: 0, left: 0, width: 100, height: 50, right: 100, bottom: 50 })
-    const fromPoint = vi.spyOn(document, 'elementFromPoint')
-    fromPoint.mockReturnValueOnce(elA)
-    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
-    await nextTick()
-    fromPoint.mockReturnValue(null)
-    blocker.dispatchEvent(new MouseEvent('mousemove', { clientX: 0, clientY: 0, bubbles: true }))
+    hideBtn?.click()
     await nextTick()
-    expect(document.body.innerHTML).toContain('Hover or click a second element')
-    elA.remove()
-    w.unmount()
-  })
-
-  it('hGapLineY uses overlap midpoint when elements share a Y range', async () => {
-    // A: top=0,bottom=100. B: top=50,bottom=150,left=130 → H gap=30, Y overlap [50,100]
-    const { w, elA, elB } = await pinTwo(
-      { top: 0,  left: 0,   width: 100, height: 100, right: 100, bottom: 100 },
-      { top: 50, left: 130, width: 100, height: 100, right: 230, bottom: 150 },
-    )
-    expect(document.body.innerHTML).toContain('30px')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  it('B to the left of A (hDir=left) renders correct gap', async () => {
-    // A at right, B at left → gap is A.left(200) - B.right(100) = 100px
-    const { w, elA, elB } = await pinTwo(
-      { top: 0, left: 200, width: 100, height: 50, right: 300, bottom: 50 },
-      { top: 0, left: 0,   width: 100, height: 50, right: 100, bottom: 50 },
-    )
-    expect(document.body.innerHTML).toContain('100px')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  it('B above A (vDir=above) renders correct gap', async () => {
-    // A at bottom (top=200), B at top (bottom=50) → gap = A.top(200) - B.bottom(50) = 150px
-    const { w, elA, elB } = await pinTwo(
-      { top: 200, left: 0, width: 100, height: 50, right: 100, bottom: 250 },
-      { top: 0,   left: 0, width: 100, height: 50, right: 100, bottom: 50  },
-    )
-    expect(document.body.innerHTML).toContain('150px')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  it('diagonal gap uses midpoint fallback when elements share no axis overlap', async () => {
-    // A(top-left) and B(bottom-right): H gap=50, V gap=50, no overlap in either axis.
-    // Exercises the midpoint fallback branches in hGapLineY and vGapLineX.
-    const { w, elA, elB } = await pinTwo(
-      { top: 0,   left: 0,   width: 100, height: 50, right: 100, bottom: 50  },
-      { top: 100, left: 150, width: 80,  height: 50, right: 230, bottom: 150 },
-    )
-    expect(document.body.innerHTML).toContain('50px')
-    elA.remove(); elB.remove(); w.unmount()
-  })
-
-  // ── client data ────────────────────────────────────────────────────────
-
-  /** Find a button inside the CLIENT DATA section by matching row text. */
-  function findClientDataBtn(rowText: string) {
-    const section = [...document.querySelectorAll<HTMLElement>('[data-dev-console] section')]
-      .find(s => s.textContent?.includes('CLIENT DATA'))
-    const row = [...section?.querySelectorAll<HTMLElement>('[style*="space-between"]') ?? []]
-      .find(el => el.textContent?.includes(rowText))
-    return row?.querySelector<HTMLElement>('button')
-  }
-
-  it('payload inspector toggles JSON view', async () => {
-    const w = await mountAndUnlock()
-    const btn = findClientDataBtn('Nuxt payload')
-    btn?.click(); await nextTick()
-    const pre = document.querySelector('[data-dev-console] pre')
-    expect(pre).not.toBeNull()
-    expect(pre?.textContent).toContain('{')
-    btn?.click(); await nextTick()
-    expect(document.querySelector('[data-dev-console] pre')).toBeNull()
-    w.unmount()
-  })
-
-  it('payload inspector shows empty object when data is nullish', async () => {
-    const nuxtApp = useNuxtApp()
-    const saved = nuxtApp.payload.data
-    nuxtApp.payload.data = null
-    const w = await mountAndUnlock()
-    findClientDataBtn('Nuxt payload')?.click(); await nextTick()
-    const pre = document.querySelector('[data-dev-console] pre')
-    expect(pre?.textContent?.trim()).toBe('{}')
-    nuxtApp.payload.data = saved
+    expect(document.body.innerHTML).not.toContain('>Hide<')
     w.unmount()
   })
+})
 
-  it('static shell fetches generated HTML and renders iframe overlay', async () => {
-    const fetchSpy = vi.spyOn(globalThis, 'fetch')
-      .mockResolvedValue(new Response('<html><body>SSG shell</body></html>', { status: 200 }))
-    const w = await mountAndUnlock()
-    const btn = findClientDataBtn('Static shell')
-    btn?.click()
-    await vi.waitFor(() => {
-      expect(document.querySelector('[data-static-shell]')).not.toBeNull()
-    })
-    const iframe = document.querySelector<HTMLIFrameElement>('[data-static-shell] iframe')
-    expect(iframe?.getAttribute('srcdoc')).toContain('SSG shell')
-    expect(document.body.innerHTML).toContain('bytes')
-    // Close via button
-    document.querySelector<HTMLElement>('[data-static-shell] button')!.click()
-    await nextTick()
-    expect(document.querySelector('[data-static-shell]')).toBeNull()
-    fetchSpy.mockRestore()
-    w.unmount()
-  })
+// ── production mode (isDev false — the real, un-injected default) ────────────
 
-  it('static shell shows error on fetch failure', async () => {
-    const fetchSpy = vi.spyOn(globalThis, 'fetch')
-      .mockRejectedValue(new Error('Network down'))
+describe('production mode', () => {
+  it('footer reads "stuar.tc console" (not "dev console") when isDev is false', async () => {
     const w = await mountAndUnlock()
-    const btn = findClientDataBtn('Static shell')
-    btn?.click()
-    await vi.waitFor(() => {
-      expect(document.body.innerHTML).toContain('FETCH ERROR')
-    })
-    expect(document.body.innerHTML).toContain('Network down')
-    fetchSpy.mockRestore()
+    expect(document.body.innerHTML).toContain('stuar.tc console')
+    expect(document.body.innerHTML).not.toContain('stuar.tc dev console')
     w.unmount()
   })
 
-  it('static shell handles non-Error rejections via String()', async () => {
-    const fetchSpy = vi.spyOn(globalThis, 'fetch')
-      .mockRejectedValue('string thrown')
+  it('dev-only tooling never appears — unlock still shows only the version panel', async () => {
     const w = await mountAndUnlock()
-    findClientDataBtn('Static shell')?.click()
-    await vi.waitFor(() => {
-      expect(document.body.innerHTML).toContain('string thrown')
-    })
-    fetchSpy.mockRestore()
+    expect(document.body.innerHTML).not.toContain('COLOR SCHEME')
+    expect(document.body.innerHTML).not.toContain('MEASURE')
+    expect(document.body.innerHTML).not.toContain('CLIENT DATA')
     w.unmount()
   })
+})
 
-  it('static shell toggle button hides when already visible', async () => {
-    vi.spyOn(globalThis, 'fetch')
-      .mockResolvedValue(new Response('<html></html>', { status: 200 }))
-    const w = await mountAndUnlock()
-    const btn = findClientDataBtn('Static shell')
-    btn?.click()
-    await vi.waitFor(() => {
-      expect(document.querySelector('[data-static-shell]')).not.toBeNull()
-    })
-    btn?.click()
-    await nextTick()
-    expect(document.querySelector('[data-static-shell]')).toBeNull()
-    w.unmount()
-  })
+// ── dev mode integration (devMode injected true — proves the Lazy wiring works) ─
 
-  it('ESC closes static shell overlay', async () => {
-    vi.spyOn(globalThis, 'fetch')
-      .mockResolvedValue(new Response('<html></html>', { status: 200 }))
-    const w = await mountAndUnlock()
-    findClientDataBtn('Static shell')?.click()
+describe('dev mode integration', () => {
+  it('mounts DevGridTools inside the console when isDev is true', async () => {
+    const w = await mountAndUnlock({ global: { provide: { devMode: true } } })
     await vi.waitFor(() => {
-      expect(document.querySelector('[data-static-shell]')).not.toBeNull()
-    })
-    pressKey('Escape'); await nextTick()
-    expect(document.querySelector('[data-static-shell]')).toBeNull()
+      expect(document.body.innerHTML).toContain('COLOR SCHEME')
+    }, { timeout: 3000, interval: 50 })
+    expect(document.body.innerHTML).toContain('MEASURE')
+    expect(document.body.innerHTML).toContain('CLIENT DATA')
     w.unmount()
-  })
+  }, 10000)
 })
 
 // ── localStorage persistence ──────────────────────────────────────────────────
diff --git a/nuxt/tests/components/DevGridTools.spec.ts b/nuxt/tests/components/DevGridTools.spec.ts
new file mode 100644
index 00000000..e8649a6e
--- /dev/null
+++ b/nuxt/tests/components/DevGridTools.spec.ts
@@ -0,0 +1,667 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { nextTick } from 'vue'
+import DevGridTools from '~/components/DevGridTools.vue'
+
+// ── constants ─────────────────────────────────────────────────────────────────
+
+const STORAGE_KEY = 'sc-devconsole-tools-v1'
+
+// ── helpers ───────────────────────────────────────────────────────────────────
+
+function pressKey(k: string, target: EventTarget = document.body) {
+  target.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true }))
+}
+
+function fakeRect(overrides: Partial<DOMRect> = {}): DOMRect {
+  const base = { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0, x: 0, y: 0, toJSON: () => ({}) }
+  return { ...base, ...overrides } as DOMRect
+}
+
+function measurableEl(rect: Partial<DOMRect>, className = 'target-el') {
+  const el = document.createElement('div')
+  el.className = className
+  vi.spyOn(el, 'getBoundingClientRect').mockReturnValue(fakeRect(rect))
+  document.body.appendChild(el)
+  return el
+}
+
+/** Mount DevGridTools directly, attached to document.body so its
+ *  non-teleported sections (and its own Teleport content) are both
+ *  findable via document.querySelector, matching real usage inside
+ *  DevGrid's console modal. */
+async function mount() {
+  const w = await mountSuspended(DevGridTools, {
+    props: { showConsole: true },
+    attachTo: document.body,
+  })
+  await nextTick()
+  return w
+}
+
+async function activateMeasure() {
+  const startBtn = [...document.querySelectorAll<HTMLElement>('button')]
+    .find(b => b.textContent?.trim() === 'Start')
+  startBtn?.click()
+  await nextTick()
+  return document.querySelector<HTMLElement>('[data-measure-blocker]')!
+}
+
+/** Find a button inside the CLIENT DATA section by matching row text. */
+function findClientDataBtn(rowText: string) {
+  const section = [...document.querySelectorAll<HTMLElement>('section')]
+    .find(s => s.textContent?.includes('CLIENT DATA'))
+  const row = [...section?.querySelectorAll<HTMLElement>('[style*="space-between"]') ?? []]
+    .find(el => el.textContent?.includes(rowText))
+  return row?.querySelector<HTMLElement>('button')
+}
+
+// ── setup / teardown ──────────────────────────────────────────────────────────
+
+beforeEach(() => {
+  localStorage.clear()
+})
+
+afterEach(async () => {
+  vi.restoreAllMocks()
+  vi.useRealTimers()
+  await nextTick()
+  await nextTick()
+  document.querySelectorAll('[data-dev-console],[data-grid-overlay],.target-el,.el-b,.el-c')
+    .forEach(el => el.remove())
+  document.body.classList.remove('sc-devgrid-outlines')
+})
+
+// ── startup / localStorage ────────────────────────────────────────────────────
+
+describe('DevGridTools startup', () => {
+  it('mounts without error', async () => {
+    const w = await mount()
+    expect(w.html()).not.toBeNull()
+    w.unmount()
+  })
+
+  it('loads grid overlay from localStorage (grid:8)', async () => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ grid: '8' }))
+    const w = await mount()
+    expect(document.body.querySelector('[data-grid-overlay]')).not.toBeNull()
+    w.unmount()
+  })
+
+  it('handles corrupt localStorage JSON without throwing', async () => {
+    localStorage.setItem(STORAGE_KEY, 'NOT_JSON')
+    const w = await mount()
+    expect(document.querySelector('section')).not.toBeNull()
+    w.unmount()
+  })
+
+  it('removes body class and keydown listener on unmount', async () => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ outlines: true }))
+    const w = await mount()
+    expect(document.body.classList.contains('sc-devgrid-outlines')).toBe(true)
+    w.unmount()
+    await nextTick()
+    expect(document.body.classList.contains('sc-devgrid-outlines')).toBe(false)
+  })
+
+  it('writes state to localStorage when prefs change', async () => {
+    const w = await mount()
+    const btn4 = [...document.querySelectorAll<HTMLElement>('button')]
+      .find(b => b.textContent?.trim() === '4px')
+    btn4?.click(); await nextTick()
+    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}')
+    expect(saved).toHaveProperty('grid', '4')
+    w.unmount()
+  })
+
+  it('handles localStorage write failure silently', async () => {
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new Error('QuotaExceededError')
+    })
+    const w = await mount()
+    const btn4 = [...document.querySelectorAll<HTMLElement>('button')]
+      .find(b => b.textContent?.trim() === '4px')
+    btn4?.click(); await nextTick()
+    expect(true).toBe(true) // no throw
+    w.unmount()
+  })
+})
+
+// ── overlay toggles ───────────────────────────────────────────────────────────
+
+describe('overlay toggles', () => {
+  it('grid toggle: off → 4px → 8px → off', async () => {
+    const w = await mount()
+    expect(document.body.querySelector('[data-grid-overlay]')).toBeNull()
+
+    const btn4 = [...document.querySelectorAll<HTMLElement>('button')]
+      .find(b => b.textContent?.trim() === '4px')
+    btn4?.click(); await nextTick()
+    expect(document.body.querySelector('[data-grid-overlay]')).not.toBeNull()
+
+    const btn8 = [...document.querySelectorAll<HTMLElement>('button')]
+      .find(b => b.textContent?.trim() === '8px')
+    btn8?.click(); await nextTick()
+    expect(document.body.querySelector('[data-grid-overlay]')).not.toBeNull()
+
+    const btnOff = [...document.querySelectorAll<HTMLElement>('button')]
+      .find(b => b.textContent?.trim() === 'Off' && b.closest('section')?.textContent?.includes('DEV OVERLAY'))
+    btnOff?.click(); await nextTick()
+    expect(document.body.querySelector('[data-grid-overlay]')).toBeNull()
+    w.unmount()
+  })
+
+  it('columns toggle shows/hides column guides', async () => {
+    const w = await mount()
+    const colRow = [...document.querySelectorAll<HTMLElement>('[style*="space-between"]')]
+      .find(row => row.textContent?.includes('max-w-6xl'))
+    const colBtn = colRow?.querySelector<HTMLElement>('button')
+
+    colBtn?.click(); await nextTick()
+    expect(document.body.innerHTML).toContain('max-w-6xl · 72rem')
+    colBtn?.click(); await nextTick()
+    expect(document.body.innerHTML).not.toContain('max-w-6xl · 72rem')
+    w.unmount()
+  })
+
+  it('outlines toggle adds/removes body class', async () => {
+    const w = await mount()
+    const outRow = [...document.querySelectorAll<HTMLElement>('[style*="space-between"]')]
+      .find(row => row.textContent?.includes('Outlines') && row.textContent?.includes('all elements'))
+    const outBtn = outRow?.querySelector<HTMLElement>('button')
+
+    outBtn?.click(); await nextTick()
+    expect(document.body.classList.contains('sc-devgrid-outlines')).toBe(true)
+    outBtn?.click(); await nextTick()
+    expect(document.body.classList.contains('sc-devgrid-outlines')).toBe(false)
+    w.unmount()
+  })
+
+  it('color scheme buttons mutate appConfig.ui.colors.primary', async () => {
+    const w = await mount()
+    const electricBtn = [...document.querySelectorAll<HTMLElement>('button')]
+      .find(b => b.title === 'Electric')
+    electricBtn?.click(); await nextTick()
+    // happy-dom normalises rgba() with spaces after commas, so strip whitespace.
+    expect(electricBtn?.style.outline.replace(/\s+/g, '')).toContain('rgba(255,255,255,0.45)')
+    w.unmount()
+  })
+
+  it('opacity slider adjusts overlay opacity', async () => {
+    const w = await mount()
+    const btn4 = [...document.querySelectorAll<HTMLElement>('button')]
+      .find(b => b.textContent?.trim() === '4px')
+    btn4?.click(); await nextTick()
+    const slider = document.querySelector<HTMLInputElement>('input[type="range"]')!
+    slider.value = '60'
+    slider.dispatchEvent(new Event('input', { bubbles: true }))
+    await nextTick()
+    expect(document.body.innerHTML).toContain('>60%<')
+    w.unmount()
+  })
+
+  it('module list "Show filtered modules" toggle flips between Off and On', async () => {
+    const w = await mount()
+    const label = [...document.querySelectorAll<HTMLElement>('h3')]
+      .find(h => h.textContent?.includes('MODULE LIST'))
+    const toggleBtn = label?.closest('section')?.querySelector<HTMLElement>('button')
+    expect(toggleBtn?.textContent?.trim()).toBe('Off')
+    toggleBtn?.click()
+    await nextTick()
+    expect(toggleBtn?.textContent?.trim()).toBe('On')
+    w.unmount()
+  })
+})
+
+// ── measure mode ───────────────────────────────────────────────────────────────
+
+describe('measure mode', () => {
+  it('Start button enters measure mode and requests the console close', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    expect(blocker).not.toBeNull()
+    expect(w.emitted('update:showConsole')?.at(-1)).toEqual([false])
+    w.unmount()
+  })
+
+  it('measure button shows "Active" while measuring', async () => {
+    const w = await mount()
+    await activateMeasure()
+    await nextTick()
+    const activeBtn = [...document.querySelectorAll<HTMLElement>('button')]
+      .find(b => b.textContent?.trim() === 'Active')
+    expect(activeBtn).not.toBeNull()
+    w.unmount()
+  })
+
+  it('HUD shows "Click an element to measure" before first selection', async () => {
+    const w = await mount()
+    await activateMeasure()
+    await nextTick()
+    expect(document.body.innerHTML).toContain('Click an element to measure')
+    w.unmount()
+  })
+
+  it('ESC without pins exits measure mode', async () => {
+    const w = await mount()
+    await activateMeasure()
+    await nextTick()
+    pressKey('Escape'); await nextTick()
+    expect(document.querySelector('[data-measure-blocker]')).toBeNull()
+    w.unmount()
+  })
+
+  it('mousemove over element shows hover highlight with dimensions', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    const target = measurableEl({ top: 10, left: 20, width: 100, height: 50, right: 120, bottom: 60 })
+    vi.spyOn(document, 'elementFromPoint').mockReturnValue(target)
+    blocker.dispatchEvent(new MouseEvent('mousemove', { clientX: 50, clientY: 30, bubbles: true }))
+    await nextTick()
+    expect(document.body.innerHTML).toContain('100px × 50px')
+    target.remove()
+    w.unmount()
+  })
+
+  it('mousemove over a dev-console element shows nothing (filtered)', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    const consoleEl = document.createElement('div')
+    consoleEl.setAttribute('data-dev-console', '')
+    document.body.appendChild(consoleEl)
+    vi.spyOn(document, 'elementFromPoint').mockReturnValue(consoleEl)
+    blocker.dispatchEvent(new MouseEvent('mousemove', { clientX: 50, clientY: 30, bubbles: true }))
+    await nextTick()
+    expect(document.body.innerHTML).not.toContain('border:1px dashed')
+    consoleEl.remove()
+    w.unmount()
+  })
+
+  it('mousemove with no element under cursor shows no hover box', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    vi.spyOn(document, 'elementFromPoint').mockReturnValue(null)
+    blocker.dispatchEvent(new MouseEvent('mousemove', { clientX: 1, clientY: 1, bubbles: true }))
+    await nextTick()
+    expect(document.body.innerHTML).not.toContain('border:1px dashed')
+    w.unmount()
+  })
+
+  it('click with no element under cursor does not crash', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    vi.spyOn(document, 'elementFromPoint').mockReturnValue(null)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 1, clientY: 1, bubbles: true }))
+    await nextTick()
+    expect(document.body.innerHTML).toContain('Click an element to measure')
+    w.unmount()
+  })
+
+  it('first click pins element A', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    const elA = measurableEl({ top: 0, left: 0, width: 100, height: 50, right: 100, bottom: 50 })
+    vi.spyOn(document, 'elementFromPoint').mockReturnValue(elA)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
+    await nextTick()
+    expect(document.body.innerHTML).toContain('[A]')
+    elA.remove()
+    w.unmount()
+  })
+
+  it('second click pins element B and shows gap info', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    const elA = measurableEl({ top: 0, left: 0, width: 100, height: 50, right: 100, bottom: 50 })
+    const elB = measurableEl({ top: 0, left: 150, width: 80, height: 50, right: 230, bottom: 50 })
+    const fromPoint = vi.spyOn(document, 'elementFromPoint')
+    fromPoint.mockReturnValueOnce(elA)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
+    await nextTick()
+    fromPoint.mockReturnValueOnce(elB)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 180, clientY: 25, bubbles: true }))
+    await nextTick()
+    expect(document.body.innerHTML).toContain('[A]')
+    expect(document.body.innerHTML).toContain('[B]')
+    expect(document.body.innerHTML).toContain('H gap')
+    elA.remove(); elB.remove()
+    w.unmount()
+  })
+
+  it('third click restarts with new A', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    const elA = measurableEl({ top: 0, left: 0,   width: 100, height: 50, right: 100, bottom: 50 })
+    const elB = measurableEl({ top: 0, left: 150,  width: 80,  height: 50, right: 230, bottom: 50 })
+    const elC = measurableEl({ top: 0, left: 0,   width: 200, height: 60, right: 200, bottom: 60 }, 'el-c')
+    const fromPoint = vi.spyOn(document, 'elementFromPoint')
+    fromPoint.mockReturnValueOnce(elA)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50,  clientY: 25, bubbles: true }))
+    await nextTick()
+    fromPoint.mockReturnValueOnce(elB)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 180, clientY: 25, bubbles: true }))
+    await nextTick()
+    fromPoint.mockReturnValueOnce(elC)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 100, clientY: 30, bubbles: true }))
+    await nextTick()
+    expect(document.body.innerHTML).toContain('200px × 60px')
+    elA.remove(); elB.remove(); elC.remove()
+    w.unmount()
+  })
+
+  it('ESC with pins first clears pins, second ESC exits measure mode', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    const elA = measurableEl({ top: 0, left: 0, width: 100, height: 50, right: 100, bottom: 50 })
+    vi.spyOn(document, 'elementFromPoint').mockReturnValue(elA)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
+    await nextTick()
+    expect(document.body.innerHTML).toContain('[A]')
+
+    pressKey('Escape'); await nextTick()
+    expect(document.querySelector('[data-measure-blocker]')).not.toBeNull()
+    expect(document.body.innerHTML).toContain('Click an element to measure')
+
+    pressKey('Escape'); await nextTick()
+    expect(document.querySelector('[data-measure-blocker]')).toBeNull()
+    elA.remove()
+    w.unmount()
+  })
+
+  it('deactivating measure clears all state', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    const elA = measurableEl({ top: 0, left: 0, width: 100, height: 50, right: 100, bottom: 50 })
+    vi.spyOn(document, 'elementFromPoint').mockReturnValue(elA)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
+    await nextTick()
+
+    const activeBtn = [...document.querySelectorAll<HTMLElement>('button')]
+      .find(b => b.textContent?.trim() === 'Active')
+    activeBtn?.click(); await nextTick()
+
+    expect(document.querySelector('[data-measure-blocker]')).toBeNull()
+    elA.remove()
+    w.unmount()
+  })
+
+  // ── gap indicator rendering ──────────────────────────────────────────────
+
+  async function pinTwo(a: Partial<DOMRect>, b: Partial<DOMRect>) {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    const elA = measurableEl(a)
+    const elB = measurableEl(b, 'el-b')
+    const fromPoint = vi.spyOn(document, 'elementFromPoint')
+    fromPoint.mockReturnValueOnce(elA)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 0, clientY: 0, bubbles: true }))
+    await nextTick()
+    fromPoint.mockReturnValueOnce(elB)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 0, clientY: 0, bubbles: true }))
+    await nextTick()
+    return { w, blocker, elA, elB }
+  }
+
+  it('renders H gap line with inline label when gap > 18px', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 50, left: 0,   width: 100, height: 100, right: 100, bottom: 150 },
+      { top: 50, left: 130, width: 100, height: 100, right: 230, bottom: 150 },
+    )
+    expect(document.body.innerHTML).toContain('30px')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+
+  it('renders H gap line with beside label when gap ≤ 18px', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 0, left: 0,   width: 100, height: 50, right: 100, bottom: 50 },
+      { top: 0, left: 110, width: 100, height: 50, right: 210, bottom: 50 },
+    )
+    expect(document.body.innerHTML).toContain('10px')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+
+  it('renders V gap line with inline label when gap > 18px', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 0,  left: 0, width: 100, height: 50, right: 100, bottom: 50  },
+      { top: 80, left: 0, width: 100, height: 50, right: 100, bottom: 130 },
+    )
+    expect(document.body.innerHTML).toContain('30px')
+    expect(document.body.innerHTML).toContain('V gap')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+
+  it('renders V gap line with beside label when gap ≤ 18px', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 0,  left: 0, width: 100, height: 50, right: 100, bottom: 50  },
+      { top: 60, left: 0, width: 100, height: 50, right: 100, bottom: 110 },
+    )
+    expect(document.body.innerHTML).toContain('10px')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+
+  it('shows "overlapping" in HUD when elements fully overlap', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 0,  left: 0,  width: 200, height: 200, right: 200, bottom: 200 },
+      { top: 50, left: 50, width: 100, height: 100, right: 150, bottom: 150 },
+    )
+    expect(document.body.innerHTML).toContain('overlapping')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+
+  it('renders hCentre alignment guide when both share the same vertical midpoint', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 0,  left: 0,   width: 100, height: 100, right: 100, bottom: 100 },
+      { top: 20, left: 150, width: 80,  height: 60,  right: 230, bottom: 80  },
+    )
+    expect(document.body.innerHTML).toContain('H-centre ✓')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+
+  it('renders vCentre alignment guide when both share the same horizontal midpoint', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 0,  left: 0,  width: 200, height: 50, right: 200, bottom: 50  },
+      { top: 80, left: 50, width: 100, height: 50, right: 150, bottom: 130 },
+    )
+    expect(document.body.innerHTML).toContain('V-centre ✓')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+
+  it('shows all edge alignment tags when rects are identical', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 10, left: 20, width: 100, height: 50, right: 120, bottom: 60 },
+      { top: 10, left: 20, width: 100, height: 50, right: 120, bottom: 60 },
+    )
+    expect(document.body.innerHTML).toContain('top ✓')
+    expect(document.body.innerHTML).toContain('bottom ✓')
+    expect(document.body.innerHTML).toContain('left ✓')
+    expect(document.body.innerHTML).toContain('right ✓')
+    expect(document.body.innerHTML).toContain('H-centre ✓')
+    expect(document.body.innerHTML).toContain('V-centre ✓')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+
+  it('live hover shows → label in HUD before B is locked', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    const elA = measurableEl({ top: 0, left: 0,   width: 100, height: 50, right: 100, bottom: 50 })
+    const elB = measurableEl({ top: 0, left: 150, width: 80,  height: 50, right: 230, bottom: 50 }, 'el-b')
+    const fromPoint = vi.spyOn(document, 'elementFromPoint')
+    fromPoint.mockReturnValueOnce(elA)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
+    await nextTick()
+    fromPoint.mockReturnValue(elB)
+    blocker.dispatchEvent(new MouseEvent('mousemove', { clientX: 180, clientY: 25, bubbles: true }))
+    await nextTick()
+    expect(document.body.innerHTML).toContain('[→]')
+    elA.remove(); elB.remove()
+    w.unmount()
+  })
+
+  it('HUD shows "hover or click" when A is pinned but nothing else selected', async () => {
+    const w = await mount()
+    const blocker = await activateMeasure()
+    await nextTick()
+    const elA = measurableEl({ top: 0, left: 0, width: 100, height: 50, right: 100, bottom: 50 })
+    const fromPoint = vi.spyOn(document, 'elementFromPoint')
+    fromPoint.mockReturnValueOnce(elA)
+    blocker.dispatchEvent(new MouseEvent('click', { clientX: 50, clientY: 25, bubbles: true }))
+    await nextTick()
+    fromPoint.mockReturnValue(null)
+    blocker.dispatchEvent(new MouseEvent('mousemove', { clientX: 0, clientY: 0, bubbles: true }))
+    await nextTick()
+    expect(document.body.innerHTML).toContain('Hover or click a second element')
+    elA.remove()
+    w.unmount()
+  })
+
+  it('hGapLineY uses overlap midpoint when elements share a Y range', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 0,  left: 0,   width: 100, height: 100, right: 100, bottom: 100 },
+      { top: 50, left: 130, width: 100, height: 100, right: 230, bottom: 150 },
+    )
+    expect(document.body.innerHTML).toContain('30px')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+
+  it('B to the left of A (hDir=left) renders correct gap', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 0, left: 200, width: 100, height: 50, right: 300, bottom: 50 },
+      { top: 0, left: 0,   width: 100, height: 50, right: 100, bottom: 50 },
+    )
+    expect(document.body.innerHTML).toContain('100px')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+
+  it('B above A (vDir=above) renders correct gap', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 200, left: 0, width: 100, height: 50, right: 100, bottom: 250 },
+      { top: 0,   left: 0, width: 100, height: 50, right: 100, bottom: 50  },
+    )
+    expect(document.body.innerHTML).toContain('150px')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+
+  it('diagonal gap uses midpoint fallback when elements share no axis overlap', async () => {
+    const { w, elA, elB } = await pinTwo(
+      { top: 0,   left: 0,   width: 100, height: 50, right: 100, bottom: 50  },
+      { top: 100, left: 150, width: 80,  height: 50, right: 230, bottom: 150 },
+    )
+    expect(document.body.innerHTML).toContain('50px')
+    elA.remove(); elB.remove(); w.unmount()
+  })
+})
+
+// ── client data ────────────────────────────────────────────────────────────────
+
+describe('client data', () => {
+  it('payload inspector toggles JSON view', async () => {
+    const w = await mount()
+    const btn = findClientDataBtn('Nuxt payload')
+    btn?.click(); await nextTick()
+    const pre = document.querySelector('pre')
+    expect(pre).not.toBeNull()
+    expect(pre?.textContent).toContain('{')
+    btn?.click(); await nextTick()
+    expect(document.querySelector('pre')).toBeNull()
+    w.unmount()
+  })
+
+  it('payload inspector shows empty object when data is nullish', async () => {
+    const nuxtApp = useNuxtApp()
+    const saved = nuxtApp.payload.data
+    nuxtApp.payload.data = null
+    const w = await mount()
+    findClientDataBtn('Nuxt payload')?.click(); await nextTick()
+    const pre = document.querySelector('pre')
+    expect(pre?.textContent?.trim()).toBe('{}')
+    nuxtApp.payload.data = saved
+    w.unmount()
+  })
+
+  it('static shell fetches generated HTML and renders iframe overlay', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValue(new Response('<html><body>SSG shell</body></html>', { status: 200 }))
+    const w = await mount()
+    const btn = findClientDataBtn('Static shell')
+    btn?.click()
+    await vi.waitFor(() => {
+      expect(document.querySelector('[data-static-shell]')).not.toBeNull()
+    })
+    const iframe = document.querySelector<HTMLIFrameElement>('[data-static-shell] iframe')
+    expect(iframe?.getAttribute('srcdoc')).toContain('SSG shell')
+    expect(document.body.innerHTML).toContain('bytes')
+    expect(w.emitted('update:showConsole')?.at(-1)).toEqual([false])
+    // Close via button
+    document.querySelector<HTMLElement>('[data-static-shell] button')!.click()
+    await nextTick()
+    expect(document.querySelector('[data-static-shell]')).toBeNull()
+    fetchSpy.mockRestore()
+    w.unmount()
+  })
+
+  it('static shell shows error on fetch failure', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch')
+      .mockRejectedValue(new Error('Network down'))
+    const w = await mount()
+    const btn = findClientDataBtn('Static shell')
+    btn?.click()
+    await vi.waitFor(() => {
+      expect(document.body.innerHTML).toContain('FETCH ERROR')
+    })
+    expect(document.body.innerHTML).toContain('Network down')
+    fetchSpy.mockRestore()
+    w.unmount()
+  })
+
+  it('static shell handles non-Error rejections via String()', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch')
+      .mockRejectedValue('string thrown')
+    const w = await mount()
+    findClientDataBtn('Static shell')?.click()
+    await vi.waitFor(() => {
+      expect(document.body.innerHTML).toContain('string thrown')
+    })
+    fetchSpy.mockRestore()
+    w.unmount()
+  })
+
+  it('static shell toggle button hides when already visible', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValue(new Response('<html></html>', { status: 200 }))
+    const w = await mount()
+    const btn = findClientDataBtn('Static shell')
+    btn?.click()
+    await vi.waitFor(() => {
+      expect(document.querySelector('[data-static-shell]')).not.toBeNull()
+    })
+    btn?.click()
+    await nextTick()
+    expect(document.querySelector('[data-static-shell]')).toBeNull()
+    w.unmount()
+  })
+
+  it('ESC closes static shell overlay', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValue(new Response('<html></html>', { status: 200 }))
+    const w = await mount()
+    findClientDataBtn('Static shell')?.click()
+    await vi.waitFor(() => {
+      expect(document.querySelector('[data-static-shell]')).not.toBeNull()
+    })
+    pressKey('Escape'); await nextTick()
+    expect(document.querySelector('[data-static-shell]')).toBeNull()
+    w.unmount()
+  })
+})
diff --git a/nuxt/tests/components/layout.spec.ts b/nuxt/tests/components/layout.spec.ts
index 8bbb9520..c2369e65 100644
--- a/nuxt/tests/components/layout.spec.ts
+++ b/nuxt/tests/components/layout.spec.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime'
 import { reactive, nextTick } from 'vue'
 import DefaultLayout from '~/layouts/default.vue'
@@ -178,6 +178,14 @@ describe('Default layout contact', () => {
 })
 
 describe('Default layout back-to-top', () => {
+  // A tall page, nowhere near the bottom, unless a test says otherwise —
+  // happy-dom defaults innerHeight/scrollHeight to 0, which would make the
+  // button's own near-bottom guard hide it for any scrollY > 0.
+  beforeEach(() => {
+    Object.defineProperty(window, 'innerHeight', { value: 800, configurable: true, writable: true })
+    Object.defineProperty(document.documentElement, 'scrollHeight', { value: 5000, configurable: true, writable: true })
+  })
+
   it('renders back-to-top button when page is scrolled', async () => {
     const wrapper = await mountSuspended(DefaultLayout)
     Object.defineProperty(window, 'scrollY', { value: 500, configurable: true, writable: true })
@@ -196,13 +204,17 @@ describe('Default layout back-to-top', () => {
 })
 
 describe('Default layout dev tools', () => {
-  it('does not render DevGrid by default (non-dev env)', async () => {
+  // DevGrid always mounts now — its unlock mechanism and the always-visible
+  // VERSION section need to work in production, not just dev. `isDev` is
+  // read inside DevGrid itself (see its own test suite) to decide whether
+  // to additionally mount DevGridTools, not at the layout level anymore.
+  it('always renders DevGrid, regardless of devMode', async () => {
     const wrapper = await mountSuspended(DefaultLayout)
-    expect(wrapper.findComponent(DevGrid).exists()).toBe(false)
+    expect(wrapper.findComponent(DevGrid).exists()).toBe(true)
     wrapper.unmount()
   })
 
-  it('renders DevGrid when devMode is injected as true', async () => {
+  it('still renders DevGrid when devMode is injected as true', async () => {
     const wrapper = await mountSuspended(DefaultLayout, {
       global: { provide: { devMode: true } },
     })
diff --git a/nuxt/tests/seo/seo.spec.ts b/nuxt/tests/seo/seo.spec.ts
index 25a71602..42ab52f3 100644
--- a/nuxt/tests/seo/seo.spec.ts
+++ b/nuxt/tests/seo/seo.spec.ts
@@ -170,3 +170,51 @@ test.describe('Meta fundamentals — JSON-LD, manifest, sitemap, robots', () =>
     await expect(png).toMatchSnapshot('og-image-home.png', { maxDiffPixelRatio: 0.02 })
   })
 })
+
+test.describe('Version indicator and h4ck panel (production build)', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('footer shows the version as plain text, not a link', async ({ page }) => {
+    const footer = page.locator('footer')
+    await expect(footer).toContainText(/v\d+\.\d+\.\d+/)
+    const versionLink = footer.locator('a', { hasText: /^v\d+\.\d+\.\d+$/ })
+    expect(await versionLink.count(), 'version text should not be a link').toBe(0)
+  })
+
+  test('/changelog has no routed page', async ({ request, baseURL }) => {
+    expect(baseURL).toBeTruthy()
+    const res = await request.get('/changelog')
+    expect(res.status(), '/changelog should 404 — the changelog only renders inside the panel').toBe(404)
+  })
+
+  test('Konami code + passphrase reveals the panel with real changelog content inline, no dev tools', async ({ page }) => {
+    await page.locator('body').click()
+    const konami = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'a', 'b']
+    for (const key of konami) {
+      await page.keyboard.press(key)
+      await page.waitForTimeout(50)
+    }
+
+    await page.locator('.sc-pi-badge').click()
+    await page.locator('input[type="password"]').fill('hacktheplanet')
+    await page.locator('input[type="password"]').press('Enter')
+
+    await expect(page.getByText('H4CK TH3 PL4N3T')).toBeVisible()
+    const body = page.locator('body')
+    await expect(body).toContainText('// VERSION')
+    await expect(body).toContainText(/stuar\.tc v\d+\.\d+\.\d+/)
+    // Collapsed by default, so it doesn't push the rest of the console
+    // (dev tools, in dev mode) below the fold.
+    await expect(body).not.toContainText('Keep a Changelog')
+    await page.getByRole('button', { name: 'Changelog' }).click()
+    // Real changelog content, rendered inline — not a link to a page.
+    await expect(body).toContainText('Keep a Changelog')
+    await expect(page.locator('a[href="/changelog"]')).toHaveCount(0)
+    // Production build: only the VERSION section, no dev-only tooling.
+    await expect(body).not.toContainText('COLOR SCHEME')
+    await expect(body).not.toContainText('MEASURE')
+    await expect(body).not.toContainText('CLIENT DATA')
+  })
+})