Box Shadow

Editor visual de sombras CSS. Monte a sombra em várias camadas, arraste direto na prévia para ajustar e copie o código pronto em CSS ou em classe do Tailwind.

🔗 No ar: https://box-shadow.vercel.app

Funcionalidades

• Várias camadas. O box-shadow aceita sombras empilhadas, e é assim que se fazem sombras realistas. Dá para adicionar até 6 camadas, remover e escolher qual editar.
• Arrastar na prévia. Clique e arraste a área de visualização para mover a sombra da camada selecionada. Com o foco na prévia, as setas do teclado movem 1px (Shift + seta move 10px).
• Modelos prontos: Suave, Flutuante, Brutalista, Interna e Brilho.
• Exportação para CSS e Tailwind, com um clique para copiar.
• Link compartilhável. A configuração inteira fica na URL. Quem abrir o link vê a mesma sombra.
• Controle deslizante e número sempre sincronizados, nos dois sentidos.

Decisões técnicas

Tema	O que foi feito
Arquitetura	A lógica de transformar o estado em CSS (src/shadow.js) e de validar e serializar o estado (src/state.js) é feita de funções puras, sem DOM. A interface (src/main.js) só lê e escreve o estado e chama render().
Interface gerada por dados	Os campos de cada camada vêm de uma lista de definições (rótulo, limites, unidade). Adicionar uma propriedade nova é uma linha.
Segurança	O estado que vem da URL é tratado como entrada não confiável: cores passam por regex, números são limitados aos intervalos, tipos são conferidos e a quantidade de camadas tem teto. Um link corrompido ou malicioso abre o estado padrão, sem erro.
Testes	14 testes com o test runner nativo do Node (node --test), cobrindo conversão de cores, geração de CSS e Tailwind, ida e volta pela URL e entradas maliciosas. Rodam no GitHub Actions a cada push.
Acessibilidade	Camadas como radiogroup navegável por setas, abas com aria-selected, prévia operável pelo teclado, mensagens de cópia em aria-live, foco sempre visível.
Sem dependências	HTML, CSS e JavaScript (ES Modules) puros. Fontes hospedadas no projeto.

Estrutura

├── index.html
├── src/
│   ├── shadow.js     # estado → CSS / Tailwind (funções puras)
│   ├── state.js      # estado padrão, modelos, validação e URL
│   └── main.js       # interface, arrastar, teclado, cópia
├── tests/            # node --test
├── assets/
│   ├── css/styles.css
│   └── fonts/
├── docs/             # prints do README
└── .github/workflows/test.yml

Rodando localmente

git clone https://github.com/wagnerglongo/Box-shadow.git
cd Box-shadow
npm run dev    # http://localhost:3000
npm test       # roda os testes (Node 20+)

---

Desenvolvido por Wagner Longo.