Usage Ring AI Product Navbar Block for React

Edit USAGE at the top of the file (used and limit in millions of tokens, resetsInDays, plan), or replace it with props from your server. The percentage (PERCENT), the ring, the trigger's label and the popover's rows all derive from it. The reset is typed as a count of days, not a date, so the block never reads the clock.

The ring is decoration inside a button; the button's own name says what it is and carries the figures: "Token usage this month: 1.24M / 2M". The visible text "1.24M / 2M" is part of that name, so voice control that says what it sees works. Inside the popover the figures are a definition list.

Enter or Space opens the popover and moves focus into it; Escape or a click outside closes it and puts focus back on the trigger. It isn't modal, so the rest of the bar stays reachable.

Below lg the links fold into a menu button that opens a sheet from the top, its header lined up with the bar (the wordmark where it was, the close button where the menu button was), with the links and an Upgrade button in its foot. The ring stays in the bar on every width; below sm its figures and the bar's Upgrade button give way to the circle and the sheet's. The popover fits the screen at 320 pixels.

Edit PAGES: the bar and the sheet read it, and the page you're on takes aria-current="page". Every link points at #. Upgrade render the link they're given with render, with nativeButton={false}.

It's the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border because the next block's top rule is its bottom edge. The popover drops below the bar and never changes its height.