---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 58
titulo: "Gantt e linha do tempo — `estável` (F7.4, 2026-08-16) · GT1–GT17 · gabarito A5 · fecha a PN-P2 (PN42–PN45)"
sequencia: 64 de 98
bytes_do_corpo: 13033
md5_do_corpo: 0bd1b1172d1178baa9185189f21f3abf
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 58. Gantt e linha do tempo — `estável` (F7.4, 2026-08-16) · GT1–GT17 · gabarito A5 · fecha a PN-P2 (PN42–PN45)

> **A pendência que esta seção fecha.** A **PN-P2** está aberta desde a Fase 6, registrada no §48.9
> como "bloco 6D": **PN42–PN45 — dependências FS/SS/FF/SF com lag · caminho crítico · linha de base
> · marco**. Os quatro números foram deixados **reservados e vazios** na numeração do §48, de
> propósito, porque cinco artefatos executáveis já citavam PN46–PN54 e renumerar invalidaria âncoras
> recém-calculadas. A dívida vence aqui.
>
> **Fronteira com o §48, declarada.** O §48 (painel) já tem a **lente temporal**: PN47 (pré-requisito
> de lente e gaveta de não agendados), **PN48** (régua de tempo em dois níveis) e PN49 (criar
> arrastando na faixa vazia). O §58 **não reescreve nada disso** — ele acrescenta a camada de
> **relação entre itens** que a lente não tem: dependência, folga, caminho crítico e linha de base.
> *Quem já lê o §48 não precisa reaprender a régua; quem lê o §58 encontra só o que é novo.*
>
> **Base.** **Rodada zero:** o arquétipo tem leitura visual — **C77–C81** (§13.8 do estudo).
> **R1 canon:** quatro tipos de dependência — término-início, início-início, término-término e
> início-término —, com **lag** (espera) ou **lead** (adiantamento); o **caminho crítico** é a
> cadeia mais longa de tarefas ligadas, e atraso nela atrasa o projeto inteiro; tarefas fora dele
> têm **folga**. A **linha de base** guarda o plano original para comparar com o realizado, e o
> **marco** é um ponto no tempo, não uma duração — representado por losango. Um alerta do canon
> entrou como contrato: *se você adiciona lag o tempo todo para o cronograma "fechar", suas durações
> de base provavelmente estão erradas — lag deve refletir espera real, não folga disfarçada.*
> **R2 stack:** os componentes de mercado tratam o gantt como **treegrid** (a tabela de nomes é uma
> árvore expansível) e implementam navegação por teclado sobre ela.
> **R3 normas:** a acessibilidade de gráfico complexo não se resolve com um `aria-label`. O consenso
> pede **camadas**: descrição breve do que o gráfico diz · **tabela de dados completa** como
> alternativa, para o leitor explorar por conta própria · `<title>`/`<desc>` no SVG · navegação por
> teclado ponto a ponto com nome e valor em cada marca (SC 4.1.2) · live region para mudanças.
> Um fornecedor declara em VPAT que a conformidade do gantt fica em **AA parcial**, e nomeia a
> limitação: *relações de dependência complexas podem não expor relação programática completa*.
> **Isso é fato do estado da arte, e é por isso que o GT11 existe.**

### 58.1 Os contratos

| # | Contrato | O que ele descarta, e por quê |
|---|---|---|
| **GT1** | **O gantt é SPLIT de dois painéis com rolagem vertical sincronizada**: tabela de nomes à esquerda, área de plotagem à direita, divisor redimensionável (C77) | Uma coisa só. Sem a tabela, não há como ler nome, responsável e data de quem está fora da janela de tempo visível |
| **GT2** | **O divisor tem alternativa sem arraste** (CP30 · SC 2.5.7): posições declaradas em menu, além do arraste | Divisor só arrastável. Mesmo raciocínio que virou slider no §51 e menu no §57 |
| **GT3** | **Régua de tempo em DOIS NÍVEIS**, herdando o **PN48** do §48 sem alteração; granularidade escolhida em controle nomeado | Reescrever a régua. Duas réguas para a mesma coisa produzem dois números e nenhuma decisão |
| **GT4** | **Marcador de AGORA é linha vertical contínua** na tinta de alerta, atravessando a plotagem (C78) — e leva **nome acessível** | Marcador só desenhado. Ele é a referência que dá sentido a "atrasado", e quem não vê a linha precisa da informação |
| **GT5** | **A barra é peça de dado, não peça de UI**: sem par sombra+anel, sem raio de peça. Ela pertence à figura | Tratar barra como cartão. A plotagem é figura de dado, governada pelo **CP32** |
| **GT6** | **A figura obedece ao CP32**: 1 unidade de `viewBox` = 1px; ganhar largura significa **mais tempo visível**, nunca barra mais grossa nem tipografia maior | Escalar o desenho. É o defeito de 2,16× que o gate pegou no dataviz |
| **GT7** | **Quatro tipos de dependência** — TI, II, TT, IT — desenhados como conectora com seta, cada uma com **origem e destino nomeados** no texto acessível | Só término-início. Obra elétrica tem paralelismo real: comissionamento II com energização, por exemplo |
| **GT8** | **Lag é DECLARADO no rótulo da conectora** ("TI + 5 d"), nunca implícito no espaço entre as barras | Lag invisível. O canon é explícito: lag que vira hábito esconde duração de base errada |
| **GT9** | **Caminho crítico é REALCE, não filtro**: as barras da cadeia mais longa recebem tratamento próprio **com mecanismo além de cor** | Esconder o resto. Caminho crítico só significa alguma coisa contra o que **não** é crítico |
| **GT10** | **Linha de base é uma SEGUNDA BARRA**, mais fina e recuada, sob a barra do realizado — e um controle liga e desliga a comparação | Trocar a cor da barra. A comparação é entre **duas durações**, e uma cor não mostra duas durações |
| **GT11** | **A alternativa textual é uma TABELA COMPLETA**, não um resumo: cada item com início, término, duração, folga, predecessor e tipo de ligação | `aria-label` no SVG. O estado da arte reconhece que dependência complexa não expõe relação programática completa; a tabela **é** a relação, escrita |
| **GT12** | **A tabela de nomes é `treegrid`**: hierarquia expansível, com uma linha no tab sequence (roving) | Lista plana. Obra tem etapa e subetapa, e a árvore é o que permite fechar o que não interessa |
| **GT13** | **Data com cor por estado no VALOR**, não em chip separado (C80) — e com mecanismo além de cor | Chip de status ao lado. Numa coluna estreita, o chip rouba a data; e o estado É da data |
| **GT14** | **Marco é LOSANGO**, ponto no tempo sem duração, com rótulo próprio | Barra de um dia. Marco não tem duração, e desenhá-lo como barra faz o olho ler duração onde não há |
| **GT15** | **Gaveta de não agendados** acoplada à visualização (C81), com abas de motivo e contagem — herda o PN47 do §48 | Esconder o item sem data. Toda visualização por eixo tem o problema do item sem posição, e escondê-lo é como se ele não existisse |
| **GT16** | **A rolagem horizontal da plotagem é exceção bidimensional DECLARADA** (SC 1.4.10): região focável e nomeada, como no §57 | Rolagem no documento |

### 58.2 O que este arquivo NÃO decide

- **Recalcular cronograma** (predecessor atrasa e sucessores deslizam) é regra de **domínio**, não de
  DS. O DS desenha o resultado; quem o calcula é o produto.
- **Criar dependência arrastando** de uma barra a outra é conveniência; o caminho obrigatório é o
  formulário de ligação, pelo SC 2.5.7.
- **Nivelamento de recurso** e **carga de trabalho** são o arquétipo A15, que **não tem leitura
  visual** e está fora deste texto.

### 58.3 Números MEDIDOS na produção do gabarito

A seção nasceu só com relações; os números vieram na produção do gabarito A5,
`tela-gantt.html`, exatamente como o §55 fez.

| Medida | Valor |
|---|---:|
| **Escala declarada (CP32)** | **6px por dia** — não muda com a largura da tela |
| Janela do gabarito · largura da plotagem | 01/06/2026–31/12/2026 · **1.284px** |
| Altura da faixa e da linha do treegrid | **34px** (iguais, por construção) |
| Altura da barra do realizado · da linha de base | **20px** · **5px** |
| Lado do losango do marco | **14px** (quadrado rotacionado 45°) |
| Espessura da conectora · da seta | **1,5px** · polígono de 6×8px |
| Espessura do marcador de agora | **2px** |
| Larguras declaradas do painel de nomes | **240 · 340 · 460px** |
| Alvo do divisor e dos itens da gaveta | **44px** no eixo curto |

**Três achados reais na medição de contraste, e os três mudaram o artefato:**

1. **A barra nasceu com `surface-brand`** (#11B0A0, o turquesa vivo do hero) e o rótulo branco sobre
   ela media **2,71** — reprova o piso 4,5 do SC 1.4.3. Trocada por `action-primary`, o token que
   existe para carregar texto (4,60). **Turquesa de MARCA e turquesa de AÇÃO não são o mesmo token,
   e a diferença é o texto que cada um sustenta.**
2. **O marco nasceu com `entity-2`** (#D49400) e media **2,61** contra a plotagem — reprova o
   SC 1.4.11. `entity-5` resolvia o claro (6,74) e **reprovava o escuro (2,37)**: cor fixa precisa
   passar nos dois temas. Ficou `text-brand`, que vira sozinha (4,60 · 8,31). **Cor de identidade
   categórica não é automaticamente cor de elemento de interface.**
3. **O contorno do caminho crítico** mede menos que 3,0 contra a própria barra. Ele é **fronteira
   externa**: a cor adjacente que o SC 1.4.11 alcança é a da plotagem, contra a qual ele desenha —
   **5,59**. E o que distingue crítico de não-crítico não é o contorno sozinho: é o par contorno +
   **pictograma**, e o pictograma sobrevive à escala de cinza.

### 58.4 Validação

| Camada | Placar |
|---|---|
| `suite-gantt.mjs` — blocos ESC · SPL · DEP · CRI · BAS · ALT · TRG · EST · MRC · GAV · REG · VIV · **POP** · **EIX** | **43 · 0** (35 na produção + 8 nascidas do gate de 2026-08-16) |
| `suite-composicao.mjs` (render, 2 temas) | **27 · 0** |
| `contraste-f73.py` — 64 pares × 2 temas | **128 · 0** |
| Console e erros de página | limpo |

> **Dois defeitos do gate de 2026-08-16, ambos virados guarda antes de qualquer promoção.**
> **(a)** O menu do divisor abria **estourado** — verbatim: *"o botão está abrindo estourado"*. A
> causa: ele usa a classe `.menu-mover`, que existe no gabarito A7 e **nunca foi copiada para este
> molde**; sem regra, sobravam só os estilos inline, sem `font-size` e sem âncora. **Classe
> reaproveitada entre gabaritos é dependência, e dependência não copiada é referência órfã** — a
> mesma família que a guarda `REF-01` pega em código e o `NV-01` em token. Guardas `POP-01…03`.
> **(b)** O gráfico parecia **travado** — verbatim: *"o gantt tbm nao clica nem da pra mexer"*. As
> barras clicavam e a região rolava; o que faltava era o **controle**. Daí o **GT17**. Guardas
> `EIX-01…05`.
>
> **A guarda que vale mais é o bloco `ESC`.** Ela mede a largura e a altura de uma barra em **duas
> larguras de janela** e exige que sejam idênticas, junto com o tamanho do texto — é o **CP32**
> aplicado a uma figura montada em HTML. Sem ela, bastaria trocar `px` por `%` para o gantt voltar a
> ser o defeito de 2,16× que o gate pegou no dataviz.
>
> **Nota sobre a `suite-composicao.mjs`:** as guardas `ST-01/02/03` (chip de status pintado com o
> token do tema) passaram a ser **condicionais à existência de chip**, e isso está **impresso** na
> saída. O gantt não usa chip por decisão escrita — o **GT13** manda o estado viver no valor da
> data. Mesma régua do `MONO-03` no §57: contrato que não se aplica ao arquétipo é declarado, não
> silenciado. Por isso o A5 fecha em **27**.

### 58.4 Pendências

| # | Pendência | Por que fica aberta |
|---|---|---|
| **GT-P1** | ~~gabarito A5~~ | **FECHADA em 2026-08-16**: `tela-gantt.html` produzido com gerador, molde e suíte própria (35 · 0) |
| **GT-P4** | **Só dois dos quatro tipos de ligação** (TI e II) têm exemplar na tela | TT e IT existem como contrato e não como pixel. A asserção do gerador exige mais de um tipo — subir para os quatro exige um caso de obra que os use de verdade, e inventar um só para preencher a tela seria dado sem referente |
| **GT17** *(contrato NOVO, do gate de 2026-08-16)* | **Eixo que rola precisa de CONTROLE explícito**, não só de `overflow`: recuar, avançar e "Hoje", com passo declarado em unidade de tempo e posição na janela exibida | Confiar na barra de rolagem. **Achado do gate**, verbatim: *"o gantt tbm nao clica nem da pra mexer"*. Rolagem horizontal com roda de mouse exige Shift — quem tem mouse comum não move o eixo e conclui que a tela está travada. **Overflow é mecanismo; controle é affordance**, e o C79 já observava o controle de tempo na barra do produto de referência. O passo é UM MÊS em px da escala declarada, nunca uma fração da largura visível: fração faria o passo mudar de tamanho conforme a janela |
| **GT-P5** | **Arraste de barra** (mover data arrastando) não implementado | Os caminhos obrigatórios são o de ponteiro único e o de teclado; o arraste é conveniência, e o gabarito não é o lugar de escrever a mecânica que o produto vai reimplementar |
| **GT-P3** | **A15 carga de trabalho** segue sem leitura visual | Exige navegação antes, como o A6 |

---