Conflict Banner

<ConflictBanner
  state="conflict"
  description="Jordan Kim saved changes 30 seconds ago."
  diffs={[
    { field: 'Title', yours: 'Q3 Draft', theirs: 'Q3 Brief' },
    { field: 'Due date', yours: 'July 15', theirs: 'August 1' },
  ]}
  onKeepMine={keepMine}
  onLoadLatest={loadLatest}
/>

import { useOptimisticMutation } from '@/components/ui/conflict-banner/conflict-banner';

const {
  status,          // 'idle' | 'pending' | 'conflict' | 'resolving' | 'resolved-local' | 'resolved-remote'
  conflictState,   // ConflictState — maps directly to ConflictBanner's state prop
  currentValue,    // current displayed value (optimistic or rolled-back)
  mutate,          // (value, asyncFn) => Promise<void> — applies optimistic, calls fn, handles errors
  keepMine,        // () => Promise<void> — re-submits the user's version
  loadLatest,      // () => Promise<void> — fetches and applies the remote version
  reset,           // () => void — returns to idle
} = useOptimisticMutation(initialValue, {
  onOptimisticApply: (v) => { /* optional: side effect when optimistic is applied */ },
  onRollback: (prev) => { /* optional: side effect when rollback occurs */ },
  onKeepMine: async (v) => { /* submit user's data to server */ },
  onLoadLatest: async () => { /* fetch latest from server; return the value */ return remoteValue; },
});

npx visor add conflict-banner

import {
  ConflictBanner,
  useOptimisticMutation,
} from '@/components/ui/conflict-banner/conflict-banner';

function RecordForm() {
  const { conflictState, currentValue, mutate, keepMine, loadLatest } =
    useOptimisticMutation(record, {
      onKeepMine: async (v) => await api.put('/records/1', v),
      onLoadLatest: async () => (await api.get('/records/1')).data,
    });

  return (
    <div>
      <ConflictBanner
        state={conflictState}
        description="Another user saved this record while you were editing."
        onKeepMine={keepMine}
        onLoadLatest={loadLatest}
      />
      <div style={{ opacity: conflictState === 'conflict' ? 0.5 : 1 }}>
        {/* your fields here */}
      </div>
    </div>
  );
}