Sentence Composer

Written for the variant you picked above: Dark

Build a composer for a coding agent with no toolbar: the settings are one sentence. A 44rem card (16px radius, 1px border) holds a borderless prompt (16px/25px) and, below a dashed hairline, a footer with the sentence on the left and a round 36px send button on the right. The sentence is set at 15px with a 30px line height in a muted colour: '[Claude Opus 5.5] will [make the change] at [high] effort, reading [2 files].' The bracketed parts are buttons styled as words — semibold, full ink, a dashed underline 5px below that turns solid on hover, a soft rounded fill on hover or while open. Each carries its colour: the model word has the maker's logo (Claude's in orange, OpenAI's in blue, Grok's white on a black disc); the mode phrase has the mode's line icon and colour — make the change (Agent, grey), draft a plan first (Plan, amber), track down the cause (Debug, coral), run each line as its own task (Multitask, sky), only answer (Ask, green); the effort word has five little rising bars and the level's colour (low grey, medium green, high amber, extra high violet, max red); the context word reads 'just this message', a file name, or 'n files'. The glue words stay muted and the sentence wraps naturally. Clicking a word opens a menu hanging just under that word: models with logos and context windows; the mode phrases with their icons and the mode name in small mono; effort levels with bars and a one-word note (fast, brief, careful, checks itself, slowest); files as a checklist with token counts and a footer showing the total and the share of the model's window. Choosing rewrites the sentence: the changed word rolls up into place (320ms). Menus have a tick on the current choice and full keyboard support. Enter sends; a line appears at the top of the card repeating the sentence with a spinner, then a green tick. Selected variant — Dark (dark): Palette for this theme (Dark): --snts-agent #d4d4d4; --snts-ask #8fd18a; --snts-card #171717; --snts-claude #e08560; --snts-debug #f08c7b; --snts-e0 #8e8e8e; --snts-e1 #6cc08b; --snts-e2 #e6c26b; --snts-e3 #b48cf2; --snts-e4 #f0645a; --snts-faint #5a5a5a; --snts-focus #8ab4f8; --snts-go #ededed; --snts-go-ink #111111; --snts-hover rgb(255 255 255 / 0.06); --snts-ink #ececec; --snts-line #2a2a2a; --snts-line-soft rgb(255 255 255 / 0.06); --snts-multitask #7cc5ee; --snts-muted #8c8c8c; --snts-off #353535; --snts-openai #5b9bff; --snts-plan #e6c26b; --snts-pop #1d1d1d; --snts-pop-line #333333; --snts-shadow 0 16px 40px -12px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(0 0 0 / 0.4); --snts-xai #ececec. 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: Write the task and press Enter. Click (or Tab to and press Enter on) any underlined word to change it: ↑/↓ and Home/End move through its menu, Enter chooses, Escape returns to the word. The file menu is a checklist and stays open while you tick. Motion: Menus drop 4px in 160ms; a changed word rolls up into place with a slight overshoot; the run line's spinner turns until it becomes a tick. Reduced motion makes every change instant. Accessibility: Each word is a menu button whose name says what it sets and its current value; menus use menuitemradio (or menuitemcheckbox for files) with descriptions; the send button's name is the whole sentence; changes are announced politely. Responsive behavior: Below 520px of its own width the sentence gets more line height for tapping, menus span the card, and rows grow to 42px; the prompt uses 16px text. Touch: Every word is a tap target with a generous line height; 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

Write the task and press Enter. Click (or Tab to and press Enter on) any underlined word to change it: ↑/↓ and Home/End move through its menu, Enter chooses, Escape returns to the word. The file menu is a checklist and stays open while you tick.

Motion

Menus drop 4px in 160ms; a changed word rolls up into place with a slight overshoot; the run line's spinner turns until it becomes a tick. Reduced motion makes every change instant.

Accessibility

Each word is a menu button whose name says what it sets and its current value; menus use menuitemradio (or menuitemcheckbox for files) with descriptions; the send button's name is the whole sentence; changes are announced politely.

Responsive

Below 520px of its own width the sentence gets more line height for tapping, menus span the card, and rows grow to 42px; the prompt uses 16px text.

On touch

Every word is a tap target with a generous line height; nothing depends on hover.