Vista de cambios.

<section class="ui-sample ui-ai" data-diff-view="true"><header><strong>Cambios propuestos</strong><span>1 bloque</span></header><pre><code>- Vigencia indefinida
+ Vigencia de doce meses desde la firma</code></pre><button class="btn btn--primary" type="button">Aceptar cambio</button><button class="btn btn--secondary" type="button">Descartar</button></section>

<section class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-diff-view="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Cambios propuestos</strong><span>1 bloque</span></header><pre class="overflow-x-auto border border-slate-300 bg-slate-50 p-3"><code>- Vigencia indefinida
+ Vigencia de doce meses desde la firma</code></pre><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Aceptar cambio</button><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Descartar</button></section>

import type { MouseEventHandler } from "react";

export interface DiffViewLine {
  /** `removed` se marca con «-», `added` con «+» y `context` (sin cambio) con un espacio. */
  type: "removed" | "added" | "context";
  /** Texto de la línea, sin el signo del cambio. */
  text: string;
}

export interface DiffViewProps {
  title?: string;
  /** Tamaño del cambio («1 bloque», «3 líneas»); vacío lo oculta. */
  summary?: string;
  /** Líneas del cambio en orden; cada una va en su propia línea dentro de `<pre>`. */
  lines?: DiffViewLine[];
  /** Texto del botón que acepta el cambio; vacío lo oculta. */
  acceptLabel?: string;
  onAccept?: MouseEventHandler<HTMLButtonElement>;
  /** Texto del botón que descarta el cambio; vacío lo oculta. */
  rejectLabel?: string;
  onReject?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

const DIFF_VIEW_LINES: DiffViewLine[] = [
  { type: "removed", text: "Vigencia indefinida" },
  { type: "added", text: "Vigencia de doce meses desde la firma" },
];

const PREFIJOS: Record<DiffViewLine["type"], string> = { removed: "- ", added: "+ ", context: "  " };

/**
 * Cambio que propone un asistente o agente de IA sobre un texto, con las líneas que se quitan y las que se agregan y los botones para aceptarlo o descartarlo; se muestra antes de aplicar el cambio.
 *
 * Las líneas van en `<pre>` con el signo del cambio al inicio («-» o «+»), de modo que el cambio se lee sin depender del color. Aceptar es la acción principal (`btn--primary`); descartar, la secundaria. `summary` resume el tamaño del cambio y tiene que calzar con `lines`.
 *
 * @example <DiffView summary="1 bloque" lines={[{ type: "removed", text: "Vigencia indefinida" }, { type: "added", text: "Vigencia de doce meses desde la firma" }]} onAccept={aceptar} onReject={descartar} />
 * @example <DiffView title="Cambios propuestos a la cláusula 4" summary="3 líneas" lines={[{ type: "removed", text: "El contrato rige por tiempo indefinido." }, { type: "added", text: "El contrato rige por doce meses desde la firma." }, { type: "added", text: "Se renueva por períodos iguales salvo aviso con 30 días de anticipación." }]} acceptLabel="Aceptar cambios" onAccept={aceptar} onReject={descartar} />
 */
export function DiffView({
  title = "Cambios propuestos",
  summary = "1 bloque",
  lines = DIFF_VIEW_LINES,
  acceptLabel = "Aceptar cambio",
  onAccept,
  rejectLabel = "Descartar",
  onReject,
  className,
}: DiffViewProps) {
  return (
    <section className={["ui-ai", className].filter(Boolean).join(" ")} data-diff-view>
      <header>
        <strong>{title}</strong>
        {summary ? <span>{summary}</span> : null}
      </header>
      {lines.length ? <pre><code>{lines.map((line) => `${PREFIJOS[line.type]}${line.text}`).join("\n")}</code></pre> : null}
      {acceptLabel ? <button className="btn btn--primary" type="button" onClick={onAccept}>{acceptLabel}</button> : null}
      {rejectLabel ? <button className="btn btn--secondary" type="button" onClick={onReject}>{rejectLabel}</button> : null}
    </section>
  );
}