apps/client/src/ui/kit

The components the game pages are built of (the creation page, the admin page, Your games, a game's page, the list of games), styled by the theme's tokens alone (../../theme) in kit.css. No UI library: plain React, accessible (labels tied to their controls, help and errors read with them, keyboard focus shown by the theme's ring, the radio groups and the tabs moved with the arrow keys). Every component passes the props it does not use (an id, a className, data-*) to its element, so the end-to-end tests find them as before.

File	Components
Button.tsx	Button (filled, tonal, outlined, text, danger; three sizes; an icon; busy with a spinner), IconButton (its label its accessible name and tooltip), buttonClass for a link drawn as a button
Field.tsx	TextField, NumberField (a unit before or after), TextArea (its characters counted, chips under the text), Select, Switch (role="switch"), Segmented and ChoiceCards (radio groups: a few choices side by side, or cards with a picture, a line, a badge, a price)
Surface.tsx	Card (elevations, selected), Chip, Badge (tones, a dot, a spinner), Alert, Progress (a budget's part, held beside it), EmptyState, Skeleton, Spinner, Tooltip; cx joins class names
Tabs.tsx	Tabs (a tab list with counts), Table (columns of cells, a sticky header, rows carrying their data-*)
Dialog.tsx	Dialog (the browser's modal <dialog>, drawn in the page's body), useConfirm (a question before what cannot be undone: #confirm-dialog, #confirm-ok, #confirm-cancel)
Toast.tsx	ToastProvider and useToast: snackbars at the foot of the page (.kit-toast, its tone in data-tone)
Icon.tsx	Icon: line drawings on a 24-unit grid in the text's colour

The studio (../studio) keeps its own styles for now; it can take the same tokens and components.