GridOverlay

The baseline grid made visible (§2.6a): minor line every 4px baseline, major every body leading. Governance, not chrome — a grid you can't toggle on and measure is a mood board.

npx candlelight-ds add grid-overlay

Use when

Proving a surface's vertical rhythm in review — every leading, control height, and band metric on the baseline.

Don't use when

Decorating. Ship it behind a dev/review gate; the grid is governance, not chrome.

States

hiddenopen

Keyboard

• Gtoggle the overlay (bind it in your surface map so it prints in the help)

Traps

• Mount the overlay INSIDE the surface it audits — same content box, a relative parent — never as a full-width sibling. An overlay in a different box drifts from the content at some viewport width and lies about alignment.

Acceptance

• Every text step's bundled line-height is a whole multiple of --baseline (the tokens package law-tests this).
• The overlay renders nothing when closed and is aria-hidden + pointer-events-none when open.

Raw twin: /components/grid-overlay.md·Registry item: /r/grid-overlay.json