Canvas Composer

Written for the variant you picked above: Dark

Build a composer for a coding agent laid out as a briefing desk rather than a form. A 64rem canvas (20px radius, a faint 18px dot grid on a near-black surface, a hairline inner edge) holds a sheet in the middle and four trays of pieces around it: files above, modes on the left, models on the right, effort levels below. It is not a node editor — no wires, only placement. Pieces are small cards (32px, 9px radius, a raised fill with a hairline and a soft shadow, 13.5px medium text): modes with their line icon in the mode's colour (Agent grey, Plan amber, Debug coral, Multitask sky, Ask green); models with the maker's logo (Claude's in orange, OpenAI's in blue, Grok's white on a black disc); effort levels with five rising bars and the name in the level's colour (Low grey, Medium green, High amber, Extra High violet, Max red); files with a tiny bold file-type badge (TS blue, LOG ochre, SQL violet). Hovering lifts a piece 1px. The sheet (26rem, 14px radius, card fill, deep shadow) has a small mono 'BRIEF' label with a status on the right ('Needs a task, a mode' / 'Ready' / 'Drop it here' while dragging), a borderless prompt, three slots in a row — Mode, Model, Effort — and a full-width Files slot below; empty slots have a dashed outline and their name. A footer shows files, tokens and the share of the chosen model's window in faint mono, and a round send button that stays dimmed until there is a task, a mode and a model. Pick a piece up and it follows the pointer with a slight tilt and a deeper shadow; while you carry it the sheet's outline brightens and the matching slot tints; over the sheet it scales up 1% with a blue ring. Drop it on the sheet and it flies into its slot (a FLIP move, 380ms, a slight overshoot); drop it anywhere else and it slides back. Tapping or pressing Enter/Space does the same without dragging. A slot holds one mode, model or effort — dropping another swaps it and the old one returns to the desk; files collect. On the desk, a piece that's in the brief leaves a faint outline where it was; tapping that outline, or the × on its chip, takes it back off the sheet. Enter in the prompt sends; a line at the top of the sheet shows what ran. Selected variant — Dark (dark): Palette for this theme (Dark): --cvsc-agent #d4d4d4; --cvsc-ask #8fd18a; --cvsc-claude #e08560; --cvsc-debug #f08c7b; --cvsc-desk #111111; --cvsc-dot rgb(255 255 255 / 0.06); --cvsc-drop #8ab4f8; --cvsc-e0 #8e8e8e; --cvsc-e1 #6cc08b; --cvsc-e2 #e6c26b; --cvsc-e3 #b48cf2; --cvsc-e4 #f0645a; --cvsc-faint #555555; --cvsc-focus #8ab4f8; --cvsc-go #ededed; --cvsc-go-ink #111111; --cvsc-hover rgb(255 255 255 / 0.05); --cvsc-ink #ececec; --cvsc-lift 0 18px 36px -12px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.08); --cvsc-line #2c2c2c; --cvsc-line-soft rgb(255 255 255 / 0.06); --cvsc-log #d0ad6b; --cvsc-md #a3a3a3; --cvsc-multitask #7cc5ee; --cvsc-muted #8c8c8c; --cvsc-off #343434; --cvsc-openai #5b9bff; --cvsc-piece #1f1f1f; --cvsc-piece-line #303030; --cvsc-plan #e6c26b; --cvsc-rest 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 4px 10px -6px rgb(0 0 0 / 0.6); --cvsc-sheet #191919; --cvsc-sql #cf93d9; --cvsc-ts #74a8ff; --cvsc-xai #ffffff. 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: Drag a piece onto the sheet to add it to the brief, or tap it (Enter/Space with the keyboard). Drop it elsewhere and it returns. Tap the outline it leaves, or the × on its chip, to take it off. A mode, model or effort replaces the one already there; files collect. Enter in the prompt sends once there's a task, a mode and a model. Motion: A carried piece tilts slightly and casts a deeper shadow; the sheet's ring brightens and the right slot tints while you carry; landing pieces fly into their slot with a slight overshoot, missed drops slide home, removed pieces fly back to the desk. Reduced motion turns every move into an instant change. Accessibility: Every piece is a toggle button (aria-pressed) whose name says what it is and whether it's in the brief; chips have labelled remove buttons; the send button says what's still missing; each change is announced in a polite status region. Dragging is never required. Responsive behavior: Below 760px of its own width the sheet comes first and the trays become rows of pieces beneath it that scroll sideways; the slots stack, and tapping is the main way to brief. Touch: Tap pieces to put them on the sheet and tap again to take them off; drag still works vertically. 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

Drag a piece onto the sheet to add it to the brief, or tap it (Enter/Space with the keyboard). Drop it elsewhere and it returns. Tap the outline it leaves, or the × on its chip, to take it off. A mode, model or effort replaces the one already there; files collect. Enter in the prompt sends once there's a task, a mode and a model.

Motion

A carried piece tilts slightly and casts a deeper shadow; the sheet's ring brightens and the right slot tints while you carry; landing pieces fly into their slot with a slight overshoot, missed drops slide home, removed pieces fly back to the desk. Reduced motion turns every move into an instant change.

Accessibility

Every piece is a toggle button (aria-pressed) whose name says what it is and whether it's in the brief; chips have labelled remove buttons; the send button says what's still missing; each change is announced in a polite status region. Dragging is never required.

Responsive

Below 760px of its own width the sheet comes first and the trays become rows of pieces beneath it that scroll sideways; the slots stack, and tapping is the main way to brief.

On touch

Tap pieces to put them on the sheet and tap again to take them off; drag still works vertically.