Stacked Download Card Banner Block for React

After the first render, an effect reads navigator.userAgent once and picks Windows, Linux or macOS (anything it can't place, a phone included, gets the macOS build). The server can't know, so until then the card says "desktop" and no segment is chosen; both are replaced on load without moving the page, because the button has a minimum width and the line under it shares one cell with every other line. The button's icon and label do shift a few pixels sideways when the label's length changes, since the label is centred. A visitor's own choice is never overwritten: the effect runs once.

Edit BUILDS at the top of the file: each entry is the label on the segment and in the button, the line that names the installer's size and what the machine needs, and a platform key. Add a key to Platform and a branch to detect for a new system. The line's cell is as tall as the longest line, so a long one never makes the card jump.

Not in the preview: it simulates a transfer so you can see all three states, five steps of 20 percent every 300 ms, then a check that stays for three seconds. To ship it, start your download in start (set href to the installer in a fetch or window.location) and feed the real progress into progress; while it's downloading the button ignores presses and keeps full strength, and a polite status inside it says the progress every quarter.

The heading says what the app does, which stays true across releases; the version is data. Keep v2.4.1 in the badge and update it in one place when you ship. The installer's size lives in the line under the button, because it changes with the platform.

The segment control and the button stack and each spans the width, the heading wraps to two lines at most, and nothing scrolls sideways at 320 pixels. The line under them keeps the height of its longest version, so choosing a platform doesn't move the page.

Yes. The segment control follows the page direction, the version and the sizes sit in bdi so their digits and letters stay in order, and nothing in the card uses a physical side.