Componentes (Atomic Design)

O Atomic Design (Brad Frost) organiza a interface em cinco níveis: os átomos combinam-se em moléculas, que formam organismos, que se distribuem em templates, que viram páginas com conteúdo real. O inventário abaixo mapeia o que já existe no código.

Átomos: packages/ui/src

Componente	Base	Observação
Button	Radix Slot + cva	Variantes por cva
CircleButton	próprio	O botão redondo verde com ✓, usado para confirmar. Precisa de rótulo acessível.
Input, Textarea, Label	shadcn
Select	Radix Select	Telas do estúdio usam <select> nativo em vez dele
Badge, Divider, Title	próprio/shadcn
Ícones	lucide-react

Moléculas

Componente	Onde
Alert, AlertDialog	Confirmações de exclusão
Toast / ToastProvider + sonner	Feedback (“Novo Rascunho criado para…”)
Card	Cards de produto, peça e cobertura no estúdio
DropdownMenu, menu/* (desktop-menu, accordion-button, about-dropdown)	Menus do site institucional
FileUploadButton, PlantigraphyUpload (web)	Área de arrastar e soltar com tipos e limite
Item da navegação inferior	Ícone + rótulo + estado ativo em vermelho

Organismos: apps/web/src/components

Organismo	Pasta	Função
Barra de passos do estúdio	studio/Header	Produto · Peças · Cobertura · Nota · Ajuda, com bloqueio sequencial
Rodapé do estúdio	studio/Footer	Parcial · Esquerdo/Direito (1º passo) · Salvar e Sair
Canvas de vetorização	studio/VectorizationCanvas, A4Paper	Plantigrafia + elementos (Konva)
Controles do canvas	studio/PlantigraphyControllers	Comandos de tela (zoom ±, recentrar), elementos, plantigrafia (atualizar/remover), selecionar, remover seleção
Checklist do rascunho	studio/DraftProgressChecklist	Progresso dos passos
Grade de catálogo	studio, products, pieces, coverages	Cards com miniatura, nome e (i) de informação
Modal de configuração	studio/VectorSelectorModal, coverages/ModalSettings	Característica, tamanho, material, lado
Sacola e subtotal	logged/cart	Itens, quantidade, cupom, envio, “Pagar Total”
Lista de pedidos	logged/orders	Acordeão com detalhes do item
Navegação inferior	logged/Footer	Rascunhos · Sacola · Criar · Pedidos · Conta
Tabelas do admin	admin/*, data-table	Tabelas com ações por linha
Formulários de acesso	auth/*	Login, cadastro, recuperação, redefinição + carrossel

Templates

Template	Estrutura	Páginas
Acesso	Logo · carrossel · formulário · rodapé legal	login, cadastro, recuperar e redefinir senha
Área logada	Header com logo · conteúdo · navegação inferior fixa	rascunhos, sacola, pedidos, conta
Estúdio	Barra de passos · área de trabalho A4 · rodapé de ações	studio/[id]/*
Resumo	Logo · lista de itens · barra de total · ações	parcial, checkout
Admin	Menu lateral (hambúrguer) · título + descrição · tabelas	admin/*

Páginas

Ver Mapa de telas.

Lacunas no design system

1. Botões só com ícone (CircleButton ✓, controles do canvas) sem texto visível e, no canvas, com aria-label em inglês técnico (zoomIn, zoomOut, resetZoom).
2. <select> nativo no estúdio e na sacola, fora do Select do @moldape/ui.
3. Três linguagens de botão: vermelho (estúdio), azul (parcial) e âmbar (sacola). Proposta: um único Button com variantes primary, secondary e ghost sobre os tokens semânticos.
4. Estados vazios: a sacola tem um bom exemplo (“Sua sacola está vazia”, com atalhos para Rascunho e Criar). Vale padronizar o mesmo componente para rascunhos e pedidos.