Composición de impresión.

<figure class="ui-sample ui-document" data-print-layout="true"><div class="ui-embed__frame ui-embed__frame--paper"><header>Compañía de Innovación de Santiago SpA</header><main><h3>Contrato FYD-184</h3><p>Primera. El prestador desarrollará y mantendrá el portal de consulta de documentos del cliente, según el anexo técnico.</p></main><footer>Página 1 de 12</footer></div><figcaption>A4 · margen 20 mm · escala 100%</figcaption></figure>

<figure class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-print-layout="true"><div class="ui-embed__frame ui-embed__frame--paper"><header class="flex flex-wrap items-center justify-between gap-3">Compañía de Innovación de Santiago SpA</header><main><h3>Contrato FYD-184</h3><p>Primera. El prestador desarrollará y mantendrá el portal de consulta de documentos del cliente, según el anexo técnico.</p></main><footer class="flex flex-wrap items-center justify-between gap-3">Página 1 de 12</footer></div><figcaption class="text-sm text-slate-600">A4 · margen 20 mm · escala 100%</figcaption></figure>

import type { ReactNode } from "react";

export interface PrintLayoutProps {
  /** Membrete que se repite en cada página («Compañía de Innovación de Santiago SpA»); vacío lo oculta, como en las páginas interiores. */
  header?: string;
  /** Título del documento en la página. */
  title?: string;
  /** Cuerpo de la página; un texto se envuelve en un párrafo. */
  children?: ReactNode;
  /** Página que se muestra, desde 1. */
  page?: number;
  /** Total de páginas del documento. */
  pageCount?: number;
  /** Texto del pie de página; por defecto, «Página {page} de {pageCount}». Vacío lo oculta. */
  pageLabel?: string;
  /** Pie de la figura con formato de papel, margen y escala; vacío lo oculta. */
  caption?: string;
  className?: string;
}

/**
 * Vista previa de una página compuesta para imprimir, con membrete, título, cuerpo y foliado; se usa para revisar márgenes y paginación antes de imprimir o generar el PDF.
 *
 * @example <PrintLayout title="Contrato FYD-184" page={2} pageCount={12} caption="A4 · margen 20 mm · escala 100%">Segunda. El precio se paga en dos cuotas.</PrintLayout>
 */
export function PrintLayout({
  header = "Compañía de Innovación de Santiago SpA",
  title = "Contrato FYD-184",
  children = "Primera. El prestador desarrollará y mantendrá el portal de consulta de documentos del cliente, según el anexo técnico.",
  page = 1,
  pageCount = 12,
  pageLabel,
  caption = "A4 · margen 20 mm · escala 100%",
  className,
}: PrintLayoutProps) {
  const folio = pageLabel ?? `Página ${page} de ${pageCount}`;
  const cuerpo = typeof children === "string" ? (children ? <p>{children}</p> : null) : children;
  const hayCuerpo = cuerpo !== null && cuerpo !== undefined && cuerpo !== false;
  return (
    <figure className={["ui-document", className].filter(Boolean).join(" ")} data-print-layout>
      <div className="ui-embed__frame ui-embed__frame--paper">
        {header ? <header>{header}</header> : null}
        {title || hayCuerpo ? (
          <main>
            {title ? <h3>{title}</h3> : null}
            {cuerpo}
          </main>
        ) : null}
        {folio ? <footer>{folio}</footer> : null}
      </div>
      {caption ? <figcaption>{caption}</figcaption> : null}
    </figure>
  );
}