Error cartográfico.

<section class="ui-sample ui-feedback" data-map-error="true" role="status"><span class="badge badge--err">Error</span> <strong>No se cargó la capa</strong><p>Fuente: IDE Chile.</p><button class="btn btn--primary" type="button">Reintentar</button></section>

<section class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-map-error="true" role="status"><span class="badge badge--err">Error</span> <strong>No se cargó la capa</strong><p>Fuente: IDE Chile.</p><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">Reintentar</button></section>

import type { MouseEventHandler } from "react";

export interface MapErrorProps {
  /** Qué no se pudo cargar («No se cargó la capa»). */
  title?: string;
  /** Fuente que falló o qué se conserva en pantalla; vacío lo omite. */
  description?: string;
  /** Texto de la insignia de estado antes del título («Error»); vacío la oculta. */
  statusLabel?: string;
  /** Texto del botón que reintenta; vacío lo oculta. */
  retryLabel?: string;
  /** Se llama al pulsar el botón de reintentar. */
  onRetry?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Aviso que se muestra cuando una capa o geometría del mapa no cargó, con la fuente o lo que se conserva y un botón para reintentar.
 *
 * Usa `role="status"` porque el mapa sigue en uso con la vista anterior; el lector de pantalla lo anuncia sin interrumpir. La insignia de `statusLabel` dice el estado en texto; reintentar es la acción principal (`btn--primary`).
 *
 * @example <MapError title="No se cargó la capa de paraderos" description="Conservamos la vista anterior." onRetry={recargarCapa} />
 */
export function MapError({
  title = "No se cargó la capa",
  description = "Fuente: IDE Chile.",
  statusLabel = "Error",
  retryLabel = "Reintentar",
  onRetry,
  className,
}: MapErrorProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} data-map-error role="status">
      {statusLabel ? <span className="badge badge--err">{statusLabel}</span> : null}
      {statusLabel && title ? " " : null}
      {title ? <strong>{title}</strong> : null}
      {description ? <p>{description}</p> : null}
      {retryLabel ? <button className="btn btn--primary" type="button" onClick={onRetry}>{retryLabel}</button> : null}
    </section>
  );
}