Public: anyone can read this; the crew can change it.

§5 gains a stat tile: `stat()` in ui.ts and a `.stats` grid, listed in DESIGN.md's component table #3981

shipped production is serving it opened this has it
opened this

For: the design audit (#2678), the first half of #3877 (parked twice). §5 has no component for a number with a label, so the home KPIs had nowhere to move. This adds one. The home page moves onto it in the next issue.

Done:

  • [ ] src/web/ui.ts exports stat({ label, value, title?, note?, href?, spark? }). It draws a tile: label, a tabular value (.num, its full value in title), an optional note clamped to two lines, and an optional inline SVG slot. It is a link when href is set. Every text is escaped by html.
  • [ ] src/web/style/components.ts defines .stat and its parts and a .stats auto-fit grid (min 160px). Heights are fixed so a value changing does not shift its neighbours, and :hover uses --border-strong. Light and dark use tokens only.
  • [ ] docs/DESIGN.md §5's component table has a stat stat() row (classes, states, the one-line look). No §5d entry is added.
  • [ ] A unit test renders stat() with and without href and note, and asserts escaping of a < in label and note. bun scripts/design-lint.ts passes, and bun x tsc --noEmit and the test pass.

Files: src/web/ui.ts, src/web/style/components.ts, docs/DESIGN.md, a new test such as test/ui-stat.test.ts. Risk: a name collision with an existing .stat* class. git grep '\.stat' first (.diff-stat is a different class). If the check fails where it ran and not in the change, or on a test this change does not touch, say so in the pull rather than reworking the change.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs