openbridge-webcomponents readout-components.instructions.md

Readout Components

These instructions apply to the readout composition stack — the primitives that render a value, and the two layout components built on them.

⚠️ IMPORTANT: Four nested layers, one set of invariants

Every readout is the same primitive wrapped twice. A change to a lower layer reaches every layer above it:

obc-textbox                 components/textbox/
  └─ obc-readout-block      building-blocks/readout-block/
       ├─ obc-readout-list-item   navigation-instruments/readout-list-item/
       │    └─ obc-readout-list   navigation-instruments/readout-list/
       └─ obc-readout             navigation-instruments/readout/

obc-readout is the same block in a different layout, used mostly inside radial instruments (compass, gauge, pitch-roll, …) via instrument-readout.ts / center-readout.ts. It is covered by watch-radial-instruments.md for its instrument-embedding concerns, and by this file for the value/format contracts it shares with the list stack.

When changing a lower layer, verify the layer above it:

1. obc-textbox — sizing/cap-height/length-slot changes affect every readout, plus non-readout consumers.
2. obc-readout-block — owns formatting, hinted zeros, the reserver and the degree column. Both layout components render it.
3. obc-readout-list-item / obc-readout — layout siblings over the same options API; behavioural changes usually belong in both, or in readout-shared.ts.
4. obc-readout-list — computes shared reservers across rows and writes them back onto each row.

Where logic lives