Standard 02 · Preview release-gate

Preview System

Every reviewable state of every module is reachable from a single, self-contained HTML preview. Deterministic mocks, no async, no backend calls, reproducible screenshots from a clean checkout.

Authority

Binding markdown

Binding source: unit-lab/_standards/preview-release-gate.md. This standard exists to eliminate manually-placed screenshots, stale preview state, and undocumented capture workflows.

Shape

What every module preview must be

Self-contained

One HTML file

Inline CSS or single relative stylesheet
No external libraries, no frameworks
No build step required to render
Opens locally with file://

Navigable

State navigation by hash

Sidebar lists every state
URL hash routes (#d01, #w01, …)
Prev / Next buttons and a counter
One <section> per state

Deterministic

Mock data, no async

Fixtures inline in <script>
No fetch(), no Promise chains
No Date.now(), no Math.random()
Same render every time

Reproducible

Screenshots from a clean checkout

Capture script committed alongside
npm run verify:all regenerates and verifies
"X required / X present / 0 missing / 0 extra"
No manually-placed PNGs

Layout

Per-state structure

Each state section in a preview carries:

A screen-meta block declaring data-state, data-step, data-status, and any module-specific data attributes — read by smoke tests.
A wd-shell / dp-shell wrapper that mirrors the TSX render shape.
An optional simulator block (Step 1) with deterministic mocks (*_PRICES, *_BALANCES, address book, etc.).

Rule: a preview that requires the network to render is not a preview — it is an integration test.

Verification

Release-gate command

cd <module>/handover/tests
npm install
npm run install:browsers
npm run verify:all
# expects: "PASS X required / X present / 0 missing / 0 extra"
# expects: "X passed"
# anything else → not handoff-ready