Capture all views

Capturing each View by hand means resizing the window to every breakpoint. The companion Chrome extension automates the sweep: the HUD drives it, resizing the viewport through each detected band and capturing as it goes — preserving any interaction-gated state along the way.

The HUD is the controller; the extension is a thin executor. When the extension is present, the HUD shows a Capture all views button; when it isn’t, a one-line prompt to install it.

How the sweep works

1. Enable the HUD with xrayVitePlugin({ hud: true }).
2. Render the page into the state you want captured: open menus, choose filters, or reveal any interaction-gated content first.
3. Keep Chrome DevTools closed on the tab. The extension uses Chrome’s debugger viewport emulation, and DevTools can block that attachment.
4. Click Capture all views in the HUD.
5. Commit the updated plates/ files.

The page remains the source of truth. It computes the target widths from mounted Skeletons, detected breakpoints, matchMedia queries, and committed coverage. The extension only emulates each width and resets the viewport when the sweep finishes.

What gets captured

The sweep visits one mobile-ish width plus each detected threshold. At every width, xray forces a capture for the mounted Skeletons, waits for the subtree to settle, and stores the resulting View in the same Plate file.

If a component renders different structure at a width, that View becomes a Projection in the Plate. If it only changes with CSS, the captured CSS carries the responsive behavior.

Troubleshooting

• If the HUD only shows the install prompt, the extension has not announced itself to the page yet.
• If the sweep fails with an extension response error, close DevTools on that tab and retry.
• If coverage still shows a missing band, manually visit one width inside that band with Capture enabled.