Model Roster

Written for the variant you picked above: Dark

Build the models section of an AI tool's settings: a 32rem panel (bottom corners 16px) listing which models appear in the model picker. Top: a 30px search field ('Add or search model', 6px radius, a slightly lighter fill and a 1px border) with a 32px refresh icon button beside it, then a hairline. Below, rows 44px tall separated by hairlines: the maker's logo at 17px (OpenAI, Claude, xAI, Cursor — dimmed when the model is off; models added by hand get a lettered tile), the model name at 15px, and a switch on the right. Rows: Grok 4.7, Grok 4.6, Composer 2.5, Claude Opus 5.5, GPT-5.6 Sol, Claude Fable 5.1, Claude Sonnet 5.5 (on), Claude Opus 5, Claude Opus 4.8, GPT-5.5 (off). A mint 'View All Models' link reveals four more and becomes 'Show Fewer Models'. Clicking anywhere on a row flips its switch. The switch (34×20 track, 16px white knob with a soft shadow): green when on, grey when off, and the state is also a shape — a small tick on the left of the track when on, a small ring on the right when off — so it reads without colour. The knob travels 14px on a slightly springy curve; pressing squeezes it 4px wider towards the side it will move to; it can be dragged and decides by where it's released; the tick and ring scale in and out. The hit area is 46×36. It refuses to turn off the last model that's still on: the track shakes and the reason is announced. Search filters as you type, by model name or maker ('claude' shows the Claude models, with the maker named beside each), and underlines the matching part of the name in green. When the text isn't an exact model, a row 'Add <name> · custom model' follows the results; Enter adds it when nothing matches, switched on, at the top, with a brief highlight. ↓ moves from the field into the switches, ↑/↓/Home/End move between them, Escape clears the search. Refresh turns its arrow for at least 700ms while it checks and announces the result. Selected variant — Dark (dark): Palette for this theme (Dark): --mrst-bg #191919; --mrst-faint #6b6b6b; --mrst-field #1d1d1d; --mrst-field-line #353535; --mrst-focus #7fe0a4; --mrst-hover rgb(255 255 255 / 0.035); --mrst-icon #bdbdbd; --mrst-ink #f0f0f0; --mrst-knob #ffffff; --mrst-line #2d2d2d; --mrst-link #7fe0a4; --mrst-mark rgb(147 211 140 / 0.28); --mrst-muted #8a8a8a; --mrst-off #3b3b3b; --mrst-off-glyph #8a8a8a; --mrst-on #93d38c; --mrst-on-glyph #1f4d1c. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "dark". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Click a row or its switch to turn a model on or off, or drag the knob. Type to filter by model or maker; Enter adds a model that isn't listed. ↓ from the search field reaches the switches; ↑/↓, Home and End move between them; Space toggles; Escape clears the search. Refresh checks the list; View All Models shows the rest. Motion: The knob slides on a springy 320ms curve and widens while pressed; the track fades between grey and green while the tick and ring swap with a small scale; refusing shakes the track; new rows flash green; the refresh arrow turns. Reduced motion makes every change instant. Accessibility: Each switch is a button with role switch, aria-checked and the model's name as its label (the last one on says why it can't be turned off). The search field is labelled and described; changes are announced in a polite status region; View All Models is a disclosure with aria-expanded. Logos are decorative; the maker is named in the row's title and in search results. Responsive behavior: The panel fills narrow screens; names truncate with an ellipsis. On touch screens rows grow to 52px and the field to 40px with 16px text. Touch: Whole rows are tap targets, switches can be tapped or dragged, and nothing depends on hover. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Click a row or its switch to turn a model on or off, or drag the knob. Type to filter by model or maker; Enter adds a model that isn't listed. ↓ from the search field reaches the switches; ↑/↓, Home and End move between them; Space toggles; Escape clears the search. Refresh checks the list; View All Models shows the rest.

Motion

The knob slides on a springy 320ms curve and widens while pressed; the track fades between grey and green while the tick and ring swap with a small scale; refusing shakes the track; new rows flash green; the refresh arrow turns. Reduced motion makes every change instant.

Accessibility

Each switch is a button with role switch, aria-checked and the model's name as its label (the last one on says why it can't be turned off). The search field is labelled and described; changes are announced in a polite status region; View All Models is a disclosure with aria-expanded. Logos are decorative; the maker is named in the row's title and in search results.

Responsive

The panel fills narrow screens; names truncate with an ellipsis. On touch screens rows grow to 52px and the field to 40px with 16px text.

On touch

Whole rows are tap targets, switches can be tapped or dragged, and nothing depends on hover.