{
  "examples": {
    "hero": {
      "title": "Galería de Ejemplos",
      "subtitle": "Observa cómo las directivas de NoJS reemplazan el boilerplate y dan vida a los layouts usando solo atributos HTML semánticos."
    },
    "cat1": { "title": "Estado & Binding", "subtitle": "Gestión de estado reactivo con actualizaciones automáticas del DOM — sin cableado manual." },
    "cat2": { "title": "Condicionales & Bucles", "subtitle": "Controla el renderizado con atributos declarativos. Muestra, oculta, itera y ramifica — todo en HTML." },
    "cat3": { "title": "Obtención de Datos", "subtitle": "Verbos HTTP integrados con estados de carga, manejo de errores y caché — cero boilerplate." },
    "cat4": { "title": "Rutas & Plantillas", "subtitle": "Navegación client-side y composición de plantillas reutilizables sin paso de build." },
    "counter": {
      "badge": "Interactivo",
      "name": "Contador Simple",
      "desc": "Contador reactivo local. Se actualiza automáticamente cuando las variables cambian. Pausa la ejecución y resalta estados de forma limpia."
    },
    "binding": {
      "badge": "Bidireccional",
      "name": "Input Binding en Vivo",
      "desc": "Vincula un input al estado con <code>model</code> y renderízalo en otro lugar con <code>bind</code>. Los cambios se propagan al instante."
    },
    "computed": {
      "badge": "Derivado",
      "name": "Valores Computados",
      "desc": "Define valores derivados con <code>computed</code> y <code>expr</code>. Se recalculan automáticamente cuando las dependencias cambian."
    },
    "search": {
      "badge": "Bucles y Filtros",
      "name": "Lista de Búsqueda Filtrada",
      "desc": "Filtra elementos de un array interactivamente usando bindings bidireccionales de input (<code>model</code>) y bucles (<code>foreach</code>)."
    },
    "todo": {
      "badge": "CRUD",
      "name": "Lista de Tareas",
      "desc": "Añade y elimina elementos con <code>foreach</code>, <code>on:click</code> y métodos de array. CRUD completo en HTML puro."
    },
    "switchCase": {
      "badge": "Ramificación",
      "name": "Switch / Case",
      "desc": "Renderiza contenido diferente según un valor usando <code>switch</code>, <code>case</code> y <code>default</code> — como un switch nativo."
    },
    "fetch": {
      "badge": "HTTP / Fetching",
      "name": "API Fetcher con Skeleton",
      "desc": "Obtén y muestra datos de una API. El elemento skeleton designado mantiene el espacio del layout y desaparece automáticamente cuando llegan los datos."
    },
    "formPost": {
      "badge": "Formularios",
      "name": "Envío de Formulario",
      "desc": "Envía datos de formulario con <code>post</code> y <code>body</code>. Combínalo con <code>model</code> para campos reactivos y validación inline."
    },
    "pagination": {
      "badge": "Paginación",
      "name": "Lista con Cargar Más",
      "desc": "Pagina resultados de API con <code>get-trigger</code>, <code>get-page</code> y <code>get-insert</code>. Añade nuevos elementos al hacer clic."
    },
    "query": {
      "badge": "HTTP / QUERY",
      "name": "Búsqueda con QUERY",
      "desc": "Envía filtros de búsqueda complejos con <code>query</code> — una lectura HTTP segura y cacheable que lleva un body de petición (RFC 10008). Los campos del formulario se convierten en el body y los resultados se renderizan de forma reactiva; no se añade token CSRF."
    },
    "router": {
      "badge": "SPA",
      "name": "Router Básico",
      "desc": "Define rutas con <code>route</code> y renderízalas en <code>route-view</code>. Los enlaces activos se destacan con <code>route-active</code>."
    },
    "templates": {
      "badge": "Composición",
      "name": "Plantillas Reutilizables",
      "desc": "Compón UI con <code>use</code> y <code>&lt;slot&gt;</code>. Pasa datos vía <code>state</code> — como componentes, pero solo plantillas HTML."
    },
    "dynamicStyles": {
      "badge": "Estilos",
      "name": "Clases & Estilos Dinámicos",
      "desc": "Alterna clases con <code>class-*</code> y establece estilos inline con <code>style-*</code>. Ambos reaccionan a cambios de estado automáticamente."
    }
  }
}