Pill Tab Expand Preview Features Block for React

Edit STAGES at the top of the file: each stage has an id, a label and three steps with a title, a sentence, two badges and a drawing name. Every drawing is a small component beside it (SubjectsDrawing, TimeDrawing, RatesDrawing…) and the Drawing helper picks one by name, so a new step needs a data entry, a component and one line in the helper. The numbers in each drawing come from typed data above it, so the percentages, the winner, the best hour and the dip are derived rather than typed twice.

Each stage keeps its own accordion and remembers the step you opened. The three sit stacked in one cell, and the two you are not looking at are invisible, so Tab only reaches the rows you can see and the block keeps the tallest height whichever pill is chosen.

One step is always open, because every stage shows a drawing. Opening another step closes the first. Closing the open step is ignored: the change handler keeps the previous step when it receives none.

The stage control is a group of radio buttons: Tab to it, then use the arrow keys to move between Draft, Send and Measure, which changes the steps at once. Each step is a real accordion button that opens with Enter or Space. Tab moves between the steps; the arrow keys do not.

They are drawings, built from the page's own tokens in greyscale and hidden from assistive technology, so everything they say is also in the step's sentence. The send-time and slump curves are one SVG path generated from the numbers beside it, with the marker placed from the same data. They keep one fixed height, so opening a step never moves the page.

The segment control takes the full width under the title, and each open step stacks its drawing under its sentence at the same fixed height. The chosen stage and step behave exactly as on desktop.