{
  "examples": {
    "hero": {
      "title": "Vitrine de Exemplos",
      "subtitle": "Veja como as diretivas do NoJS substituem o boilerplate e dão vida aos layouts usando apenas atributos HTML semânticos."
    },
    "cat1": { "title": "Estado & Binding", "subtitle": "Gerenciamento de estado reativo com atualizações automáticas do DOM — sem wiring manual." },
    "cat2": { "title": "Condicionais & Loops", "subtitle": "Controle a renderização com atributos declarativos. Exiba, oculte, itere e ramifique — tudo em HTML." },
    "cat3": { "title": "Busca de Dados", "subtitle": "Verbos HTTP integrados com estados de carregamento, tratamento de erros e cache — zero boilerplate." },
    "cat4": { "title": "Rotas & Templates", "subtitle": "Navegação client-side e composição de templates reutilizáveis sem etapa de build." },
    "counter": {
      "badge": "Interativo",
      "name": "Contador Simples",
      "desc": "Contador reativo local. Atualiza automaticamente quando as variáveis mudam. Pausa a execução e destaca estados de forma limpa."
    },
    "binding": {
      "badge": "Bidirecional",
      "name": "Input Binding ao Vivo",
      "desc": "Vincule um input ao estado com <code>model</code> e renderize em outro lugar com <code>bind</code>. Mudanças propagam instantaneamente."
    },
    "computed": {
      "badge": "Derivado",
      "name": "Valores Computados",
      "desc": "Defina valores derivados com <code>computed</code> e <code>expr</code>. Eles recalculam automaticamente quando as dependências mudam."
    },
    "search": {
      "badge": "Loops & Filtros",
      "name": "Lista de Busca Filtrada",
      "desc": "Filtre itens de um array interativamente usando bindings bidirecionais de input (<code>model</code>) e loops (<code>foreach</code>)."
    },
    "todo": {
      "badge": "CRUD",
      "name": "Lista de Tarefas",
      "desc": "Adicione e remova itens com <code>foreach</code>, <code>on:click</code> e métodos de array. CRUD completo em HTML puro."
    },
    "switchCase": {
      "badge": "Ramificação",
      "name": "Switch / Case",
      "desc": "Renderize conteúdo diferente com base em um valor usando <code>switch</code>, <code>case</code> e <code>default</code> — como um switch nativo."
    },
    "fetch": {
      "badge": "HTTP / Fetching",
      "name": "API Fetcher com Skeleton",
      "desc": "Busque e exiba dados de uma API. O elemento skeleton designado mantém o espaço do layout e desaparece automaticamente quando os dados chegam."
    },
    "formPost": {
      "badge": "Formulários",
      "name": "Envio de Formulário",
      "desc": "Envie dados de formulário com <code>post</code> e <code>body</code>. Combine com <code>model</code> para campos reativos e validação inline."
    },
    "pagination": {
      "badge": "Paginação",
      "name": "Lista com Carregar Mais",
      "desc": "Pagine resultados de API com <code>get-trigger</code>, <code>get-page</code> e <code>get-insert</code>. Anexe novos itens ao clicar."
    },
    "query": {
      "badge": "HTTP / QUERY",
      "name": "Busca com QUERY",
      "desc": "Envie filtros de busca complexos com <code>query</code> — uma leitura HTTP segura e cacheable que carrega um body de requisição (RFC 10008). Os campos do formulário viram o body e os resultados aparecem de forma reativa; nenhum token CSRF é adicionado."
    },
    "router": {
      "badge": "SPA",
      "name": "Roteador Básico",
      "desc": "Defina rotas com <code>route</code> e renderize em <code>route-view</code>. Links ativos são destacados com <code>route-active</code>."
    },
    "templates": {
      "badge": "Composição",
      "name": "Templates Reutilizáveis",
      "desc": "Componha UI com <code>use</code> e <code>&lt;slot&gt;</code>. Passe dados via <code>state</code> — como componentes, mas apenas templates HTML."
    },
    "dynamicStyles": {
      "badge": "Estilização",
      "name": "Classes & Estilos Dinâmicos",
      "desc": "Alterne classes com <code>class-*</code> e defina estilos inline com <code>style-*</code>. Ambos reagem a mudanças de estado automaticamente."
    }
  }
}