Brand and design · Stages

Hi-fi screens

Stage 4: one folder per screen with its contract, boards per state and data-binding map.

One folder per screen, named by its ID in ../screens.json (listed in ../lofi/screens.md):

hifi/S16/
  screen.md      contract (states, flows, API calls, local state), a board per state, tokens used, strings
  bindings.md    data-binding map: every field to its endpoint or local state, and the four state lines

The boards are not in these folders: they are the committed HTML in ../screens/<group>/<screen>--<state>.html (zh-Hans) and ….en.html (en), drawn on the example data in ../../docs/api/examples/. screen.md links them. Both files are generated from ../screens.json by pnpm design:index (botgumi's botgumi-design index); do not edit them by hand. screens.json itself is exported from the gallery by python3 design/tools/hifi_index.py, which reads ../screens/manifest.json, ../data-binding.md, ../states.md, ../flows.md, ../strings.json and ../base.css.

A required state (loading, empty, error, offline) that has no board of its own is still a row in the Boards table: it says so, quotes ../states.md and links the board that covers it where one exists.

Every screen is at stage hifi. After its retroactive gate passes, set its stage in ../screens.json to approved and its gate to the issue (#12), then run pnpm design:index; the export keeps both. node design/check.mjs checks each folder.