Double Line Timeline Block for React

Edit MILESTONES at the top of the file. Each has a name, the actual date (or the forecast), a done flag and one planned date per baseline (original and replan). Add a baseline by adding an entry to BASELINES and a field to each milestone, then read it in plannedOf(). The slip is the actual date minus the planned date in whole days.

A milestone that is not done has a dashed dot, a dashed segment arriving at it, a dashed tie and the word "Forecast" instead of "Actual". The key under the rails says so.

As a signed number of days, never as a colour: plus for late, minus for early and zero for on plan, with a hidden word that a screen reader speaks after the number. Up and down are not green and red.

The chosen baseline. Nothing is saved or sent. To make it real, load the baselines from your planning tool and pass the milestones of one project in; the ties and figures follow.

The segmented control is labelled "Baseline", and the foot is a polite status line that repeats the baseline, the slip at handover and the count of late milestones when you switch. Each date is a time element. The two rails are decoration; every date and slip is also text.

The ladder is replaced by a single rail with the planned and actual dates under each name, so no column is squeezed. Both layouts read from the same state.