> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpos.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Measure

> The measurement toolkit: seven measure modes, the pixeldiff fidelity score, and the bench harness.

Clone runs and design reviews live on measurements: screenshots, section
rhythm, element geometry, text ink, font paint, reference diffs, copy
extraction. `eu-studio measure` covers all of it; never hand-write Playwright or
PIL scripts for these.

## The seven modes

```text theme={null}
usage: eu-studio measure <mode> : clone-run measurement toolkit (never hand-write playwright/PIL for these)
  shots    --page </> --widths 1512,390 [--out <dir>] [--full] [--crop x,y,w,h]  scroll-settled screenshots (fullPage default; --crop = doc-space region)
  sections --page </> [--width 1512]                                            section rhythm scan: {sel, top, height} sorted by top
  geom     --page </> --selector '<css>' [--width 1512] [--all]                  rect + display/position/font for first (--all: ≤40) match(es)
  ink      --page </> --selector '<css>' [--width 1512]                          text ink extents vs element box (nowrap escapes, tracking drift)
  fonts    --page </> [--width 1512]                                             which families ACTUALLY painted (width-vs-fallback probe)
  compare  --ours <png|/page|url> --ref <png> [--out <dir>] [--bands 900]        side-by-side band sheets + per-band mean |Δ| table
  copytext --html <file> [--min-len 3]                                           deduped, attributed copy inventory from saved HTML
```

What each answers:

| Mode       | The question it answers                                                                              |
| ---------- | ---------------------------------------------------------------------------------------------------- |
| `shots`    | What does the page actually look like at these widths? (Scroll-settled, animation-finished captures) |
| `sections` | What is the page's vertical rhythm? Where does each section start and how tall is it?                |
| `geom`     | Where exactly is this element, and with what display, position, and font?                            |
| `ink`      | Does the rendered text ink escape its element box? (Nowrap escapes, tracking drift)                  |
| `fonts`    | Which font families **actually painted**, versus silently falling back? (Width-vs-fallback probe)    |
| `compare`  | Side by side, band by band, how far is our render from the reference?                                |
| `copytext` | What copy does the reference page contain, deduped and attributed, ready to reproduce verbatim?      |

Real `sections` output against a production build:

```bash theme={null}
eu-studio measure sections --page /
```

```text theme={null}
✓ 10 sections under div.elementor-element (page 8131px)
{"url":"http://127.0.0.1:8927/","width":1512,"root":"div.elementor-element","pageHeight":8131,
 "sections":[{"sel":"section.elementor-element","top":0,"height":900},
             {"sel":"section.elementor-element","top":900,"height":880},
             {"sel":"section.elementor-element","top":1780,"height":638}, ...]}
```

<Tip>
  Review shots at wide widths, not just 1200: `measure shots --page / --widths
      1920,390`. Wide screens expose nav and section alignment bugs that 1200
  hides, and real users browse at 1512 to 2560.
</Tip>

## pixeldiff: the photometric fidelity score

Anchors measure geometry; pixeldiff measures **appearance**: gradients, art,
type ink.

```text theme={null}
usage: eu-studio pixeldiff --page-url </ or url> --reference <design.png> [--keep-shots <dir>] [--exclude y0-y1:why[,y0-y1:why...]]
```

Method: the page is captured as **viewport slices** at the reference's width
(full-page captures of tall pages deterministically drop bottom-of-page image
paint, so it never diffs against one), scroll-settled and animation-finished,
then each slice is compared against the corresponding crop of the reference.
Comparison runs through python3 with PIL and numpy.

The score is per-slice mean absolute luminance delta (0 to 255) plus the worst
50px-band mean, aggregated page-wide. Empirical interpretation bands:

| Score     | Reading                                                         |
| --------- | --------------------------------------------------------------- |
| 3 or less | Near-identical                                                  |
| 3 to 8    | Faithful; the residue is font rendering and anti-aliasing noise |
| 8 to 20   | Visible deviations                                              |
| over 20   | Structurally different                                          |

### Exclusion masks

`--exclude y0-y1:why` drops reference-coordinate row bands from the mean and the
worst-band scan, reporting them separately, so the score reflects what the build
was actually **asked** to match. The `why` label is mandatory context for
whoever reads the score.

This exists because of a real incident: an agent spent eight minutes chasing a
score of 8 that was mathematically unreachable; the worst band (61.6) was a
deviation the brief itself mandated, and the gate had no way to know. Mask the
mandated deviations, then chase the score.

## bench: scoring whole scenario runs

For repeatable evaluation of agent builds, `eu-studio bench` scores a scenario
directory (reference render, anchors with presence floors and paint bands, a
brief template) by running geometric verify plus photometric pixeldiff, and
appends one record per run to `runs.jsonl`. `bench compare` tabulates runs. See
`eu-studio bench` for the scenario layout.

## Next

<CardGroup cols={2}>
  <Card title="Recipe: clone a site" icon="clone" href="/ultra/recipe-clone-a-site">
    The measurement modes assembled into the faithful-rebuild flow.
  </Card>

  <Card title="Verify" icon="clipboard-check" href="/ultra/verify">
    The structural and interaction gates.
  </Card>
</CardGroup>