Com o layout atual em mente, a melhor posição para as três ações seria dentro do header de cada card de variação, ao lado do badge. Assim cada preview pode ser testado individualmente nos três estados (obrigatório, oculto, somente leitura). Vou implementar isso com três toggle buttons no header do card:

Agora atualizo o VariacaoCard para receber e exibir as ações, e passo o estado para os previews reagirem visualmente:

Agora atualizo o VariacaoCard para ter estado próprio das três ações e exibir os toggle buttons no header:

Por fim, atualizo os dois cards no CampoListaContent para usar a nova assinatura de children como função:

As três ações ficam no header de cada card de variação, à direita do badge, como toggle buttons compactos. Cada botão tem cor semântica quando ativo: vermelho para obrigatório (asterisco), âmbar para oculto (olho riscado) e azul para somente leitura (cadeado). O preview de cada card reage imediatamente ao estado: campo oculto mostra um placeholder tracejado, somente leitura desabilita o input e exibe um aviso, obrigatório adiciona o asterisco vermelho no label.

Recebi um erro na preview: mt is not iterable. Isso parece estar relacionado a um problema no uso da função cn() no componente. Deixa eu verificar e corrigir:

Encontrei o problema! Na linha 300, BADGE_STYLES[badgeVariant] pode estar retornando undefined em algumas situações. Mas o erro real é que em algum lugar estou passando algo que não é string para cn(). Deixa eu ler mais:

Achei! Olha a linha 180: value={i.valor} está passando um número, não uma string. Em HTML, o value do <option> deve ser uma string. Vou corrigir isso:

Corrigido! O erro era simples: estava passando um number para o atributo value do <option>, quando HTML espera uma string. A linha 180 agora converte o valor para string com String(i.valor), resolvendo o erro "mt is not iterable" que era uma cascata de erros do Tailwind não conseguindo processar um valor não-string.