Ir ao conteúdo
SEED engenhariaDesign System

Composição

7b. Primitivos de layout — CP25 (camada nova, F5/2026-08-15)

seed-composicao.md v2.1 · §07bseção 10 de 1707b-primitivos-de-layout-cp25-camada-nova-f5-2026.md · MD5 60b02802

CP25 — CINCO PRIMITIVOS MECÂNICOS, ABAIXO DOS BLOCOS. Todo espaçamento entre elementos é responsabilidade de um primitivo declarado; nenhum componente resolve o próprio layout externo.

O problema que motiva, com o fato. O DS tinha blocos (o QUE a coisa é: peça, régua, faixa) e componentes (§1–§45), e nada entre eles — então cada preview resolvia espaçamento no CSS local. Consequência medida na CP-P4 (2026-08-15): onze artefatos, onze soluções diferentes para o mesmo problema de empilhar coisas. O canon converge nesta camada: Every Layout (primitivo = "uma responsabilidade estrutural só"), Atlassian Primitives (Box/Inline/Stack, com a regra "toda decisão de layout precisa ter um dono explícito") e o W3C Design System (Box, Center, Cluster, Frame, Sidebar, Switcher). Nenhum deles inventa layout novo — todos nomeiam o dono.

Primitivo Responsabilidade única Parâmetro Onde já existe hoje sem nome
pilha empilhar verticalmente com ritmo constante escala sp-* conteúdo de cartão, corpo de formulário, lista de mensagens
linha dispor horizontalmente com alinhamento e sem quebra sp-* + alinhamento zonas da topbar, ações do rodapé de cartão, cabeçalho de peça
cacho dispor horizontalmente permitindo quebra sp-* chips de filtro aplicado (§42), tags, avatares agrupados
caixa dar respiro interno e superfície a um conteúdo padding + superfície o interior de toda peça
lateral dois painéis lado a lado que empilham quando o espaço acaba, sem media query largura do painel lateral + limite de quebra shell (rail+conteúdo), gantt, chat, configurações

Regras do CP25, todas verificáveis:

  1. Um primitivo tem uma responsabilidade. pilha não alinha horizontalmente; caixa não espaça filhos entre si.
  2. Espaçamento vive no pai, nunca no filho. Componente não declara margin externo — a regra do "owl" (* + *) do canon: quem separa é o contexto, e assim não sobra margem no primeiro nem no último item.
  3. Primitivos compõem-se; blocos não mudam. Uma peça é um bloco; por dentro ela é caixa + pilha. O vocabulário de sete blocos (CP2) não muda — o CP25 é a camada de baixo.
  4. lateral é a única forma canônica de dois painéis — proibido resolver com media query (CP27/CP28).

Alternativa descartada: seguir sem a camada, documentando espaçamento caso a caso — é exatamente o estado que produziu onze soluções para um problema. Custo declarado: mais uma camada para manter e para ensinar; o ganho é que layout deixa de ser opinião local.

Nomes em português por coerência com o resto do canônico (todo conteúdo técnico do projeto é PT-BR). No código, a skill seed-ds-ui mapeia para as classes utilitárias da stack — o nome do DS é o contrato; o nome da implementação é detalhe dela.

Esc