# 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.

Install: `npx candlelight-ds add grid-overlay`

Category: primitive · Grammar: —

## 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

- hidden
- open

## Keyboard

- `G` — toggle the overlay (bind it in your surface map so it prints in the help)

## Traps (shipped once — do not re-learn)

- 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 tests

- 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.

## Files

- components/ui/GridOverlay.tsx

npm dependencies: @candlelight-ds/tokens, clsx, tailwind-merge

Rendered twin: https://candlelight-docs.vercel.app/components/grid-overlay · Full spec: https://candlelight-docs.vercel.app/spec.md