@hed-hog/core 0.0.400 → 0.0.402

package/src/pdf/document/pdf-document.css.ts

@@ -0,0 +1,326 @@
+import { PdfDocumentTheme } from './pdf-document.theme';
+
+/**
+ * O CSS do documento padrão — o mesmo acabamento da proposta comercial do CRM
+ * (`libraries/crm/src/proposal/proposal.service.ts`), com três acréscimos que
+ * a proposta não precisava e um relatório precisa:
+ *
+ * 1. `thead { display: table-header-group }` — sem isso a tabela perde o
+ *    cabeçalho a partir da segunda página, e um relatório de 15 páginas fica
+ *    ilegível da página 2 em diante.
+ * 2. `tbody tr { break-inside: avoid }` — linha não parte no meio.
+ * 3. Nada de wrapper com `break-inside: avoid`, `overflow` ou borda arredondada
+ *    em volta da tabela: foi o que fez a folha de impressão da tela sair com
+ *    uma primeira página vazia e conteúdo cortado.
+ *
+ * A barra laranja do topo e o "X / N" do rodapé **não estão aqui** — são
+ * templates do Chromium (ver ./pdf-document.chrome.ts), porque só eles repetem
+ * em toda página e só eles sabem o total de páginas.
+ */
+export function buildDocumentCss(theme: PdfDocumentTheme, landscape = false): string {
+  const { primary, mutedBg, mutedFg, ink, line, fontFamily } = theme;
+
+  return `
+    @page {
+      size: A4${landscape ? ' landscape' : ''};
+      margin: 72px 56px 56px 56px;
+    }
+    * { box-sizing: border-box; }
+    html, body {
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+    body {
+      color: ${ink};
+      font-family: ${fontFamily};
+      font-size: 11.5px;
+      line-height: 1.55;
+      margin: 0;
+    }
+
+    /* ── Letterhead ── */
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 24px;
+      margin-bottom: 24px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid ${line};
+    }
+    .brand { display: flex; align-items: center; gap: 14px; }
+    .brand img { height: 44px; max-width: 150px; object-fit: contain; }
+    .brand-text .eyebrow {
+      color: ${primary};
+      font-size: 9px;
+      font-weight: 700;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+      margin-bottom: 3px;
+    }
+    .brand-text h1 {
+      font-size: 20px;
+      font-weight: 700;
+      color: ${ink};
+      margin: 0 0 2px;
+      line-height: 1.2;
+    }
+    .brand-text .company-name { font-size: 11px; color: ${mutedFg}; }
+    .meta-block {
+      text-align: right;
+      font-size: 11px;
+      color: ${mutedFg};
+      line-height: 1.7;
+      white-space: nowrap;
+    }
+    .meta-block .meta-value { font-weight: 600; color: ${ink}; }
+
+    /* ── Cards ── */
+    .cards {
+      display: grid;
+      gap: 12px;
+      margin-bottom: 18px;
+      break-inside: avoid;
+    }
+    .cards-2 { grid-template-columns: repeat(2, 1fr); }
+    .cards-3 { grid-template-columns: repeat(3, 1fr); }
+    .cards-4 { grid-template-columns: repeat(4, 1fr); }
+    .cards-5 { grid-template-columns: repeat(5, 1fr); }
+    .card {
+      background: ${mutedBg};
+      border: 1px solid ${line};
+      border-top: 2px solid ${primary};
+      border-radius: 10px;
+      padding: 10px 12px;
+    }
+    .card .card-label {
+      font-size: 8.5px;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: ${mutedFg};
+      margin-bottom: 4px;
+    }
+    .card .card-value { font-size: 12px; font-weight: 600; color: ${ink}; }
+    .cards-metric .card .card-value { font-size: 17px; font-weight: 700; }
+    .card .card-hint { font-size: 9px; color: ${mutedFg}; margin-top: 2px; }
+
+    /* ── Seções ── */
+    h2 {
+      font-size: 12.5px;
+      font-weight: 700;
+      color: ${ink};
+      margin: 22px 0 10px;
+      padding-bottom: 6px;
+      border-bottom: 1px solid ${line};
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      break-after: avoid;
+    }
+    h2 .section-hint {
+      float: right;
+      font-size: 9.5px;
+      font-weight: 400;
+      letter-spacing: 0;
+      text-transform: none;
+      color: ${mutedFg};
+    }
+
+    /* ── Tabela ── */
+    .doc-table {
+      border-collapse: collapse;
+      width: 100%;
+      font-size: 10.5px;
+    }
+    .doc-table.compact { font-size: 9px; }
+    .doc-table thead { display: table-header-group; }
+    .doc-table thead tr { border-bottom: 1px solid ${line}; }
+    .doc-table th {
+      background: ${mutedBg};
+      color: ${mutedFg};
+      font-size: 9px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      padding: 7px 8px;
+      text-align: left;
+      vertical-align: middle;
+    }
+    .doc-table td {
+      border-bottom: 1px solid ${line};
+      padding: 6px 8px;
+      text-align: left;
+      vertical-align: top;
+      color: ${ink};
+    }
+    /*
+     * Os tons precisam vencer o color da propria celula: ".doc-table td" tem
+     * especificidade 0-1-1 e ".tone-accent" sozinho tem 0-1-0, entao a cor do
+     * tom era descartada em toda tabela do sistema — so o font-weight passava,
+     * porque a regra da celula nao mexe nele. Quem marca um valor como "warn"
+     * quer que ele salte aos olhos, nao que fique so em negrito igual ao resto.
+     */
+    .doc-table td.tone-muted { color: ${mutedFg}; }
+    .doc-table td.tone-accent { color: ${primary}; }
+    .doc-table td.tone-warn { color: #b45309; }
+    .doc-table tbody tr { break-inside: avoid; }
+    .doc-table tbody tr:last-child td { border-bottom: none; }
+    .doc-table.zebra tbody tr:nth-child(even) td { background: ${mutedBg}; }
+    .doc-table .align-right { text-align: right; }
+    .doc-table .align-center { text-align: center; }
+    /* Valor numérico não quebra: "1h 00min" partido em duas linhas dobra a
+       altura da linha e desalinha a leitura de cima a baixo. O cabeçalho pode
+       quebrar à vontade — é o que mantém "On demand" numa coluna estreita. */
+    .doc-table td.align-right,
+    .doc-table td.align-center { white-space: nowrap; }
+    /* A coluna "#" é numerada no servidor: contador de CSS reiniciaria a cada
+       repetição do <thead>. */
+    .doc-table .idx {
+      width: 30px;
+      color: ${mutedFg};
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
+    .cell-sub { font-size: 8.5px; color: ${mutedFg}; margin-top: 1px; }
+    .tone-muted { color: ${mutedFg}; }
+    .tone-bold { font-weight: 700; }
+    .tone-accent { color: ${primary}; font-weight: 600; }
+    .tone-warn { color: #b45309; font-weight: 600; }
+    .table-empty {
+      border: 1px dashed ${line};
+      border-radius: 10px;
+      padding: 18px;
+      text-align: center;
+      font-size: 10.5px;
+      color: ${mutedFg};
+    }
+
+    /* ── Gráficos ── */
+    .chart { margin: 4px 0 18px; break-inside: avoid; }
+    .chart-title {
+      font-size: 10.5px;
+      font-weight: 700;
+      color: ${ink};
+      margin-bottom: 6px;
+    }
+    .chart svg { width: 100%; height: auto; }
+    .chart-caption { font-size: 9px; color: ${mutedFg}; margin-top: 4px; }
+    .chart-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+      margin-bottom: 18px;
+    }
+
+    /* ── Notas e legenda ── */
+    .note {
+      background: ${mutedBg};
+      border: 1px solid ${line};
+      border-radius: 8px;
+      padding: 9px 12px;
+      font-size: 10px;
+      color: ${mutedFg};
+      margin: 12px 0;
+      break-inside: avoid;
+    }
+    .note-accent { border-left: 3px solid ${primary}; }
+    .legend {
+      margin-top: 18px;
+      padding-top: 10px;
+      border-top: 1px solid ${line};
+      font-size: 9px;
+      line-height: 1.6;
+      color: ${mutedFg};
+    }
+    .legend p { margin: 0 0 3px; }
+    .page-break { break-before: page; }
+
+    /* ── Barra empilhada e cartões de progresso ── */
+    .seg-bar {
+      display: flex;
+      height: 6px;
+      border-radius: 999px;
+      overflow: hidden;
+      background: ${line};
+      margin: 8px 0;
+    }
+    .seg { display: block; height: 100%; }
+    .seg-ink, .dot-ink { background: ${ink}; }
+    .seg-muted, .dot-muted { background: #8f8f94; }
+    .seg-light, .dot-light { background: #cfcfd4; }
+    .seg-accent, .dot-accent { background: ${primary}; }
+    .seg-danger, .dot-danger { background: #dc2626; }
+    .dot {
+      display: inline-block;
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+    .seg-block {
+      border: 1px solid ${line};
+      border-radius: 12px;
+      padding: 12px 16px;
+      margin-bottom: 18px;
+      break-inside: avoid;
+    }
+    .seg-title { font-size: 13px; font-weight: 700; color: ${ink}; }
+    .seg-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 10px; color: ${ink}; }
+    .seg-legend-item { white-space: nowrap; }
+    .seg-caption { font-size: 10.5px; color: ${ink}; margin-top: 8px; }
+    .pc-legend {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px 18px;
+      font-size: 10px;
+      color: ${mutedFg};
+      margin-bottom: 12px;
+    }
+    .pc-grid { display: grid; gap: 12px; align-items: start; }
+    .pc-grid-1 { grid-template-columns: 1fr; }
+    .pc-grid-2 { grid-template-columns: repeat(2, 1fr); }
+    .pc-card {
+      border: 1px solid ${line};
+      border-radius: 12px;
+      padding: 12px 14px;
+      break-inside: avoid;
+    }
+    .pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
+    .pc-title { font-size: 13px; font-weight: 700; color: ${ink}; line-height: 1.25; }
+    .pc-subtitle { font-size: 9.5px; color: ${mutedFg}; margin-top: 2px; }
+    .pc-value { text-align: right; white-space: nowrap; }
+    .pc-value-num { font-size: 22px; font-weight: 700; color: ${ink}; line-height: 1; }
+    .pc-value-hint { font-size: 9px; color: ${mutedFg}; margin-top: 2px; }
+    .pc-list-title { font-size: 10px; font-weight: 700; color: ${ink}; margin: 4px 0 6px; }
+    .pc-entry {
+      border: 1px solid ${line};
+      border-radius: 8px;
+      padding: 6px 10px;
+      margin-bottom: 6px;
+      break-inside: avoid;
+    }
+    .pc-entry-hl { border-color: transparent; }
+    .pc-entry-hl-accent { background: color-mix(in srgb, ${primary} 16%, white); }
+    .pc-entry-hl-danger { background: #fee2e2; }
+    .pc-entry-text { font-size: 10.5px; color: ${ink}; }
+    .pc-entry-meta {
+      display: flex;
+      justify-content: space-between;
+      gap: 8px;
+      font-size: 9.5px;
+      margin-top: 1px;
+    }
+    .pc-entry-status { font-weight: 700; color: ${ink}; }
+    .pc-entry-aside { color: ${mutedFg}; white-space: nowrap; }
+    .pc-entry-sub { font-size: 9px; color: ${mutedFg}; margin-top: 2px; }
+    .pc-entry-sub-danger { color: #b91c1c; font-weight: 700; }
+    .pc-empty {
+      background: ${mutedBg};
+      border-radius: 8px;
+      padding: 8px 10px;
+      font-size: 10px;
+      color: ${ink};
+    }
+  `;
+}

package/src/pdf/document/pdf-document.renderer.spec.ts

@@ -0,0 +1,172 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { escapeHtml, renderBlock, renderDocumentHtml } from './pdf-document.renderer';
+import { PdfDocumentTheme } from './pdf-document.theme';
+import { PdfDocumentBlock, PdfDocumentRow } from './pdf-document.types';
+
+const theme: PdfDocumentTheme = {
+  primary: '#ff760c',
+  mutedBg: '#f4f4f5',
+  mutedFg: '#71717a',
+  ink: '#18181b',
+  line: '#e4e4e7',
+  companyName: 'HedHog',
+  logoUrl: 'data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3C/svg%3E',
+  fontFamily: 'Arial, Helvetica, sans-serif',
+  chartPalette: ['#ff760c'],
+};
+
+const table = (rows: PdfDocumentRow[]): PdfDocumentBlock => ({
+  kind: 'table',
+  numbered: true,
+  columns: [{ header: 'Aluno' }, { header: 'Horas', align: 'right' }],
+  rows,
+});
+
+describe('escapeHtml', () => {
+  it('neutraliza os cinco caracteres que viram markup', () => {
+    expect(escapeHtml(`<script>alert("1" & '2')</script>`)).toBe(
+      '&lt;script&gt;alert(&quot;1&quot; &amp; &#39;2&#39;)&lt;/script&gt;',
+    );
+  });
+
+  it('trata nulo e indefinido como texto vazio', () => {
+    expect(escapeHtml(null)).toBe('');
+    expect(escapeHtml(undefined)).toBe('');
+  });
+});
+
+describe('tabela', () => {
+  // O pedido que originou o kit: cada linha numerada a partir de 1.
+  it('numera as linhas de 1 a N, na ordem recebida', () => {
+    const html = renderBlock(table([['Ana', '10h'], ['Bruno', '9h'], ['Carla', '8h']]));
+    const indices = [...html.matchAll(/<td class="idx">(\d+)<\/td>/g)].map((m) => m[1]);
+
+    expect(indices).toEqual(['1', '2', '3']);
+  });
+
+  // Sem `display: table-header-group` o cabeçalho some da segunda página em
+  // diante; o `<thead>` tem que existir de verdade para a regra pegar.
+  it('emite thead próprio, que o CSS manda repetir por página', () => {
+    const html = renderBlock(table([['Ana', '10h']]));
+
+    expect(html).toContain('<thead><tr>');
+    expect(html).toContain('<th class="idx">#</th>');
+  });
+
+  it('escapa o conteúdo das células e da segunda linha', () => {
+    const html = renderBlock({
+      kind: 'table',
+      columns: [{ header: 'Aluno' }],
+      rows: [[{ text: '<b>Ana</b>', sub: 'a&b@x.com' }]],
+    });
+
+    expect(html).toContain('&lt;b&gt;Ana&lt;/b&gt;');
+    expect(html).toContain('a&amp;b@x.com');
+    expect(html).not.toContain('<b>Ana</b>');
+  });
+
+  it('mostra um aviso no lugar da tabela quando não há linha nenhuma', () => {
+    const html = renderBlock({ kind: 'table', columns: [{ header: 'Aluno' }], rows: [] });
+
+    expect(html).toContain('table-empty');
+    expect(html).not.toContain('<table');
+  });
+
+  it('preenche célula vazia com travessão em vez de deixar buraco', () => {
+    const html = renderBlock(table([['Ana', null]]));
+
+    expect(html).toContain('—');
+  });
+});
+
+describe('documento', () => {
+  it('monta o letterhead com sobretítulo, título e metadados', () => {
+    const html = renderDocumentHtml(
+      {
+        title: 'Alunos',
+        eyebrow: 'Relatório de Alunos',
+        subtitle: 'BRClick',
+        meta: [{ label: 'Status', value: 'Todos os status' }],
+        generatedAt: new Date('2026-09-22T13:32:00Z'),
+        blocks: [{ kind: 'section', title: 'Resumo' }],
+      },
+      theme,
+    );
+
+    expect(html).toContain('<div class="eyebrow">Relatório de Alunos</div>');
+    expect(html).toContain('<h1>Alunos</h1>');
+    expect(html).toContain('Status: <span class="meta-value">Todos os status</span>');
+    expect(html).toContain('Gerado em:');
+  });
+
+  it('escapa o título também no <title> da página', () => {
+    const html = renderDocumentHtml(
+      { title: 'Turma <A>', blocks: [] },
+      theme,
+    );
+
+    expect(html).toContain('<title>Turma &lt;A&gt;</title>');
+  });
+
+  // O SVG é a única string injetada crua — e só os desenhistas do kit produzem.
+  it('injeta o SVG do gráfico sem escapar, mas escapa o título dele', () => {
+    const html = renderBlock({
+      kind: 'chart',
+      title: 'Matrículas & conclusões',
+      svg: '<svg><rect /></svg>' as never,
+    });
+
+    expect(html).toContain('<svg><rect /></svg>');
+    expect(html).toContain('Matrículas &amp; conclusões');
+  });
+
+  it('vira paisagem quando o documento pede', () => {
+    const html = renderDocumentHtml({ title: 'Frequência', landscape: true, blocks: [] }, theme);
+
+    expect(html).toContain('size: A4 landscape');
+  });
+});
+
+describe('barra e cartões de progresso', () => {
+  it('reparte a barra pelo total e mostra a legenda com a porcentagem', () => {
+    const html = renderBlock({
+      kind: 'segmentBar',
+      title: 'Com quem estão',
+      segments: [
+        { label: 'Com o aluno', value: 1, tone: 'muted' },
+        { label: 'Aguardando', value: 3, tone: 'accent' },
+        { label: 'Em revisão', value: 0, tone: 'light' },
+      ],
+    });
+
+    expect(html).toContain('seg-muted" style="width:25.00%"');
+    expect(html).toContain('seg-accent" style="width:75.00%"');
+    expect(html).not.toContain('seg-light" style');
+    expect(html).toContain('<strong>3 (75%)</strong>');
+  });
+
+  it('escapa o texto de cada cartão e cai no texto de vazio sem itens', () => {
+    const html = renderBlock({
+      kind: 'progressCards',
+      items: [
+        {
+          title: '<b>Ana</b>',
+          value: '25%',
+          segments: [{ value: 1, tone: 'ink' }],
+          listTitle: 'Tarefas em aberto (1)',
+          entries: [
+            { text: 'Acesso & API', status: 'Aguardando', tone: 'accent', highlight: true, sub: 'Atrasada', subTone: 'danger' },
+          ],
+        },
+        { title: 'Bruno', value: '100%', segments: [], entries: [], emptyText: 'Tudo concluído.' },
+      ],
+    });
+
+    expect(html).toContain('&lt;b&gt;Ana&lt;/b&gt;');
+    expect(html).toContain('Acesso &amp; API');
+    expect(html).toContain('pc-entry-hl-accent');
+    expect(html).toContain('pc-entry-sub-danger');
+    expect(html).toContain('<div class="pc-empty">Tudo concluído.</div>');
+  });
+});