Build Sheet

Written for the variant you picked above: Light

Build a product configurator (a laptop, 'Masar Field 14') whose rules are visible instead of silently disabling options, laid out like an engineering order: the choices on the left and a printed build sheet on the right. Surface: off-white drafting paper with faint blue rules every 28px, a 12px radius, IBM Plex Sans with IBM Plex Mono for part numbers, prices and labels, a deep ink-blue accent. From 52rem the sheet is a sticky 19rem column; below that it follows the options. Options: each group is a fieldset with a small mono uppercase legend ('CHIP', 'MEMORY', 'EXTRAS · choose any') over a grid of option cards (auto-fill, 190px minimum): a native radio or checkbox, the name in semibold, a muted detail line, and a mono price on the right that is relative to the current choice ('Selected', '+$200', '−$150', 'Included'; add-ons show their own price). The selected card gets a 2px accent outline. An option that conflicts with the current build stays clickable but is lightly hatched and shows a rust note in a few words ('Needs 16 GB+', 'Not with touch'). Choosing a conflicting option opens a slip under its group: pale blue carbon paper with a perforated top edge, mono text, the full reason ('Video Pro needs 16 GB of memory or more.'), then the proposed fix as arrow lines with their price effect ('→ Switch memory to 16 GB +$200') and two buttons, 'Keep current' and an accent 'Make both changes'. The fix is the cheapest change to the other side of each broken rule, applied repeatedly until the build is valid, and never undoes what was just chosen; if no valid build exists, the slip says so. Build sheet: a white card with a heavy rule under 'BUILD SHEET' and the model code, one dashed-ruled line per chosen part with its SKU under the name and its price right-aligned in mono, a large mono total that counts to each new value, and a full-width 'Place order' button. Selected variant — Light (light): Palette for this theme (Light): --bsheet-accent #1f3a8a; --bsheet-accent-ink #ffffff; --bsheet-carbon #e9eefb; --bsheet-carbon-ink #1f3a8a; --bsheet-card #ffffff; --bsheet-grid rgb(31 58 138 / 0.06); --bsheet-ink #1c2230; --bsheet-line rgb(28 34 48 / 0.14); --bsheet-mark #fff0b3; --bsheet-muted #5c6474; --bsheet-paper #fbfaf6; --bsheet-warn #a3341f. 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 "light". 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: Clicking an option applies it at once when it fits. Otherwise the slip appears and takes focus; 'Make both changes' applies the choice and its fix together, 'Keep current' dismisses it. onSubmit(selection, total) may reject: the error shows under the button and the build is kept; success shows the reference. Motion: The slip drops in 6px over 260ms; changed lines on the sheet flash a pale highlighter for 1.6s and the changed group's legend turns accent; the total counts up or down over 420ms with an ease-out. Reduced motion or motion={false} applies changes without any of it. Accessibility: Groups are fieldsets with native radios and checkboxes; conflicting options are aria-disabled but focusable and described by their note. The slip is a labelled group that receives focus. Every applied change and the new total are announced in a polite live region; the order result uses role=status or role=alert. Responsive behavior: Two columns from 52rem with a sticky sheet; below that the sheet follows the options. Option grids reflow by available width. Touch: Every option and slip action is a full tap target; nothing relies 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

Clicking an option applies it at once when it fits. Otherwise the slip appears and takes focus; 'Make both changes' applies the choice and its fix together, 'Keep current' dismisses it. onSubmit(selection, total) may reject: the error shows under the button and the build is kept; success shows the reference.

Motion

The slip drops in 6px over 260ms; changed lines on the sheet flash a pale highlighter for 1.6s and the changed group's legend turns accent; the total counts up or down over 420ms with an ease-out. Reduced motion or motion={false} applies changes without any of it.

Accessibility

Groups are fieldsets with native radios and checkboxes; conflicting options are aria-disabled but focusable and described by their note. The slip is a labelled group that receives focus. Every applied change and the new total are announced in a polite live region; the order result uses role=status or role=alert.

Responsive

Two columns from 52rem with a sticky sheet; below that the sheet follows the options. Option grids reflow by available width.

On touch

Every option and slip action is a full tap target; nothing relies on hover.