Control de cambios.

<section class="ui-sample ui-document" data-change-tracking="true"><header><strong>Cambio en cláusula cuarta</strong><span>v3 → v4</span></header><p><del>Vigencia indefinida</del></p><p><ins>Vigencia de doce meses desde la firma</ins></p><footer>Propuesto por Revisión legal <span class="badge badge--ok">aceptado</span></footer></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-change-tracking="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Cambio en cláusula cuarta</strong><span>v3 → v4</span></header><p><del>Vigencia indefinida</del></p><p><ins>Vigencia de doce meses desde la firma</ins></p><footer class="flex flex-wrap items-center justify-between gap-3">Propuesto por Revisión legal <span class="badge badge--ok">aceptado</span></footer></section>

export interface ChangeTrackingProps {
  /** Qué cambió y dónde («Cambio en cláusula cuarta»). */
  title?: string;
  /** Versión de origen del cambio («v3»). */
  fromVersion?: string;
  /** Versión de destino del cambio («v4»); si falta una de las dos, se oculta el rango. */
  toVersion?: string;
  /** Texto eliminado, tachado (`<del>`); vacío lo oculta. */
  removed?: string;
  /** Texto agregado (`<ins>`); vacío lo oculta. */
  inserted?: string;
  /** Texto antes del autor en el pie; sin autor no se muestra. */
  authorLabel?: string;
  /** Persona o equipo que propuso el cambio; vacío muestra sólo el estado. */
  author?: string;
  /** Estado del cambio («aceptado», «pendiente», «rechazado»); se muestra como etiqueta y vacío muestra sólo el autor. Sin autor ni estado no hay pie. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce del texto (aceptado: `ok`; pendiente: `warn`; rechazado: `err`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  className?: string;
}

const CHANGE_TRACKING_TONOS: [string, "ok" | "warn" | "err"][] = [
  ["aceptado", "ok"],
  ["pendiente", "warn"],
  ["en revisión", "warn"],
  ["rechazado", "err"],
];

function claseEstado(status: string, tone?: "ok" | "warn" | "err" | "neutral") {
  const texto = status.toLowerCase();
  const tono = tone ?? CHANGE_TRACKING_TONOS.find(([clave]) => texto.startsWith(clave))?.[1] ?? "neutral";
  return tono === "neutral" ? "badge" : `badge badge--${tono}`;
}

/**
 * Cambio propuesto a un documento con el texto eliminado, el agregado, el rango de versiones, quién lo propuso y su estado; se usa en la revisión de un contrato para mostrar un cambio propuesto y su estado.
 *
 * El texto eliminado va en `<del>` y el agregado en `<ins>`, que los lectores de pantalla anuncian como tales. El estado va en texto dentro de una etiqueta con tono (`badge`).
 *
 * @example <ChangeTracking title="Cambio en cláusula cuarta" fromVersion="v3" toVersion="v4" removed="Vigencia indefinida" inserted="Vigencia de doce meses desde la firma" author="Revisión legal" status="pendiente" />
 */
export function ChangeTracking({
  title = "Cambio en cláusula cuarta",
  fromVersion = "v3",
  toVersion = "v4",
  removed = "Vigencia indefinida",
  inserted = "Vigencia de doce meses desde la firma",
  authorLabel = "Propuesto por",
  author = "Revisión legal",
  status = "aceptado",
  statusTone,
  className,
}: ChangeTrackingProps) {
  const autoria = author ? [authorLabel, author].filter(Boolean).join(" ") : "";
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-change-tracking>
      <header>
        <strong>{title}</strong>
        {fromVersion && toVersion ? <span>{`${fromVersion} → ${toVersion}`}</span> : null}
      </header>
      {removed ? <p><del>{removed}</del></p> : null}
      {inserted ? <p><ins>{inserted}</ins></p> : null}
      {autoria || status ? (
        <footer>
          {autoria}
          {autoria && status ? " " : null}
          {status ? <span className={claseEstado(status, statusTone)}>{status}</span> : null}
        </footer>
      ) : null}
    </section>
  );
}