TopBar

The app's stable frame: brand, destinations with a shared active pill, search, and the account, the same on every page. `inset` sits over the page beside a sidebar card; `full` spans the window with the sidebar below it. Sets --topbar-row-h, --tabstrip-h and their sum as CSS variables, so a second row costs no measurement and no re-render.

Top bar

The stable frame over the sidebar chrome. `inset` sits over the page beside the sidebar's card; `full` spans the window with the sidebar below it. The second row is the member's tabs, and its height is a CSS variable rather than a measurement, so nothing re-renders to keep the page's top padding right.

<TopBar layout="inset">
  <TopBarRow>
    <TopBarNav label="Product">{/* TopBarNavItem per destination */}</TopBarNav>
    <TopBarSpacer />
    <TopBarActions><AccountSlot /></TopBarActions>
  </TopBarRow>
</TopBar>
Y
The page renders below the bar.