Full-Bleed Version Banner Block for React

It's typed data at the top of the file (UPGRADE.installed), because a block can't read your project. In your app, pass it in from your build (an environment variable, package.json) or from your account data, and hide the banner when it equals latest. The versions sit in bdi elements so they keep their order in a right-to-left page.

Edit UPGRADE: installed, latest, the note (note), the link's words (link) and its destination (href). The chips, the note and the link flow as one piece of text, so on a 320-pixel phone they wrap onto a second line; keep the note to about 45 characters so two lines are enough.

Both are outline Badges in mono. The installed one is muted, so it recedes; the latest has the background colour behind it, a stronger border and medium weight, so it stands out. No primary colour is involved: the emphasis is weight and contrast, and it works in light and dark.

Yes. Every colour is a token: bg-muted/50 for the tint, the muted and foreground tones for text and chips. There is no dark scope and no bg-foreground panel.

The tint is on the full-width section and the line sits in the same max-w-6xl page column as every block. The Guides layer draws the rails and one rule along the top with a plus on each crossing, and no bottom rule: the block below draws that line, so a stack never doubles it.