Side-by-side diff
Two-column unified diff for parts catalogue rebuild — old version left, new version right, paired removals + additions.
Production answer
Side-by-side diff is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Side-by-side diff states
Generative search brief
Side-by-side diff: Two-column unified diff for parts catalogue rebuild — old version left, new version right, paired removals + additions.
apps/parts/catalogue.tsx · main vs feature/parts-3d-viewer
maina92f4c1
feature/parts-3d-viewerd6e0b88
12import { PartsList } from './parts-list'
13import { ThumbnailGrid } from './thumbnail-grid'
14
15export function PartsCatalogue() {
16 return <ThumbnailGrid items={parts} />
17}
12import { PartsList } from './parts-list'
13import { PartsViewer3D } from './parts-viewer-3d'
14import { useReducedMotion } from '../hooks/use-reduced-motion'
15
16export function PartsCatalogue() {
17 const reducedMotion = useReducedMotion()
18 if (reducedMotion) {
19 return <PartsList items={parts} />
20 }
21 return <PartsViewer3D items={parts} />
22}
Behaviour
Lines pair up: each removed line on the left gets a matching added line on the right when possible. Unmatched rows render an empty cell on the opposite side so the line numbers stay aligned. Both columns scroll in sync because the rows are part of a single grid.