Conflict Resolver

Written for the variant you picked above: Light

Build a three-way merge screen for one record (an article with title, summary, status, tags, publish date and body) after two people edited it from the same starting version: 'Your offline copy' and 'Layla's edit'. Rules: for every field compare base, yours and theirs. Unchanged stays; the same change on both sides is taken; a change on only one side is taken automatically and labelled 'Auto: Layla's edit'; tags merge as sets (additions from both, removals from both); long text merges line by line with diff3, so edits to different lines combine and only overlapping edits become conflicts; any other field changed differently on both sides is a conflict. Layout: a 14px-radius panel in Inter. Header: '2 conflicts left' in 18px semibold, a muted line with the automatic count and the keys (J K move · M keep yours · T take theirs), and a 4px progress bar that fills green as conflicts are resolved. Then one white card per field: a small uppercase label and a status on the right (muted for auto, amber 'Conflict'); unchanged fields are dimmed. A conflict card has an amber left rule (green once resolved) and three panes: Original (dimmed), Yours (blue label) and Theirs (purple label), where each side reads as its own text with the words it added or changed on a green wash (the dimmed original shows what was there). Under them a radio group of buttons: 'Keep your offline copy', 'Take Layla's edit', 'Keep both' (long text only) and 'Edit', which opens a textarea seeded with yours; the chosen side's pane gets a ring in its colour. In long text, unconflicted lines show as muted context between conflict cards. Footer: 'Resolve every conflict to save.' and a dark 'Save merged version' button, disabled until nothing is left; saving can fail and keep every choice. Selected variant — Light (light): Palette for this theme (Light): --cres-add rgb(36 140 76 / 0.16); --cres-bad #b3261e; --cres-bg #fbfaf8; --cres-card #ffffff; --cres-ink #1d1c1a; --cres-line rgb(29 28 26 / 0.12); --cres-mine #2457c5; --cres-muted #6b6760; --cres-ok #23704a; --cres-theirs #8a3fb0; --cres-warn #b45309. 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: Click a choice or press M / T on a focused conflict card; J and K move between cards. Edit keeps your typing as the resolution. onResolve(merged) receives the complete record; it may reject, in which case the error shows and the choices stay. Motion: Card rules change colour over 200ms and the progress bar eases over 300ms; side rings fade over 160ms. Reduced motion or motion={false} removes them. Accessibility: Each conflict is a labelled group that can take focus; its choices are a radiogroup of buttons with aria-checked and their shortcut keys declared. Every choice is announced with how many conflicts remain. Added words use ins elements, so they are exposed as insertions and not only by colour. Responsive behavior: Below 40rem the original pane is hidden and yours and theirs stack, each still marked against the original. Touch: Every choice is a button; keyboard shortcuts are optional. 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 choice or press M / T on a focused conflict card; J and K move between cards. Edit keeps your typing as the resolution. onResolve(merged) receives the complete record; it may reject, in which case the error shows and the choices stay.

Motion

Card rules change colour over 200ms and the progress bar eases over 300ms; side rings fade over 160ms. Reduced motion or motion={false} removes them.

Accessibility

Each conflict is a labelled group that can take focus; its choices are a radiogroup of buttons with aria-checked and their shortcut keys declared. Every choice is announced with how many conflicts remain. Added words use ins elements, so they are exposed as insertions and not only by colour.

Responsive

Below 40rem the original pane is hidden and yours and theirs stack, each still marked against the original.

On touch

Every choice is a button; keyboard shortcuts are optional.