Sitemap
Canvas de sitemap
betaO quadro X/Y: pan, zoom, enquadramento e a leitura alternativa em lista. Escrito sobre os tokens, sem dependência de terceiro.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
O que é
Pan por arrastar o fundo, zoom com ctrl+roda, setas para mover pelo teclado, 0 para enquadrar. O quadro recorta por dentro (overflow: hidden) e nunca estica o documento.
Escrito à mão sobre transform e os tokens do sistema. Nenhuma biblioteca de canvas entrou: adotar uma seria adoção de capacidade, e o que ela resolveria — arestas e minimapa — é menos do que ela custaria em peso e em acoplamento.
Duas leituras, não uma com desculpa
Um quadro X/Y só é navegável por quem enxerga posição e consegue arrastar. A lista carrega a mesma hierarquia em elementos focáveis, e é por ela que a página passa no sensor de acessibilidade — que reprova rota cujo conteúdo não se alcança pelo teclado.
Abaixo de md o quadro deixa de ocupar a tela inteira: num telefone ele é um painel, e a lista é provavelmente o que a pessoa quer.
Enquadrar pela largura, nunca pela altura
O primeiro arranjo dava uma coluna por item de menu. Medido: os 48 nós do Backoffice viravam um quadro de ~2.700px, o enquadramento caía em 25% e o cartão deixava de ser um cartão. A coluna passou a ser a profundidade e a linha, a ordem de leitura — a mesma forma da árvore do documento.
Como o quadro é alto e estreito, o enquadramento ajusta a largura e começa no topo, com piso de 55%. Caber a altura inteira levaria o zoom de volta a 25%.
Código
Esta peça é da ferramenta de documentação, não do produto: ela mora em site/, e não em @voxmente/ui.