Use isto quando um conceito é uma sequência de estados e o leitor precisa sentir quais movimentos são permitidos em cada etapa — um checkout, um semáforo, o ciclo de vida de um pedido, uma fila de aprovação.
Este é um exemplar copiável. Leve o palco <section id="drive-it"> para uma lição real construída a partir de assets/lesson-template.html, mantendo os design tokens na íntegra.
Algumas ideias só fazem sentido quando você as cutuca. Um checkout tem um punhado de estágios — carrinho, pagamento, pago, cancelado — e a questão toda é que você não pode pular etapas: não dá para estornar um pedido que nunca foi pago, e, uma vez cancelado, não há para onde ir. Descrever isso em um parágrafo é esquecível. Deixar o leitor apertar os botões e ver o sistema recusar os movimentos ilegais faz a regra grudar.
Pense nisto como… um jogo de tabuleiro em que só certas casas se conectam. Você joga o dado, você anda — mas o tabuleiro não deixa você saltar para uma casa sem caminho até ela. Os botões esmaecidos abaixo são as casas que você simplesmente não consegue alcançar de onde está.
Isto é uma máquina de estados finita. Existe exatamente um estado atual, um conjunto fixo de eventos e uma tabela de transições que mapeia (state, event) → nextState. Eventos que não estão na tabela para o estado atual não são permitidos — o protótipo desabilita os botões deles em vez de silenciosamente não fazer nada, de modo que a restrição fica visível, não escondida.
Estados sem transições de saída (PAID, CANCELLED) são terminais: todo botão de evento fica desabilitado e só resta Reiniciar. Modelar um fluxo assim é o que impede o bug clássico de estornar um pedido não pago ou cobrar um carrinho cancelado — o caminho ilegal não existe na tabela, então não pode ser percorrido.
Aperte um evento. Observe o nó destacado se mover e o painel se atualizar. Os botões esmaecem no instante em que um movimento não é permitido a partir de onde você está.
O nó preenchido em terracota é onde você está agora. Nós esmaecidos são inalcançáveis daqui.
Estado atual
CART
Os itens estão na cesta. Nada foi confirmado ainda.
Transições permitidas
Registro de eventos
Tudo o que o protótipo faz é conduzido por esta tabela. Os botões a leem para decidir o que habilitar; apertar um deles consulta transitions[state][event] e move para lá. Nenhum movimento permitido é codificado duas vezes — o diagrama, os chips e os estados desabilitados vêm todos desta única fonte da verdade.
const machine = { CART: { next: 'AWAIT', cancel: 'CANCELLED' }, AWAIT: { pay: 'PAID', cancel: 'CANCELLED' }, PAID: {}, // terminal — sem eventos de saída CANCELLED: {} // terminal }; function send(state, event) { const next = machine[state][event]; return next ?? state; // rejeita: permanece se não estiver na tabela }