> ## Documentation Index
> Fetch the complete documentation index at: https://wondeya.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Catálogo de componentes

> Los 17 componentes tipados que pueden formar una respuesta, y las props que recibe cada uno

Una respuesta se compone de uno a tres componentes de un catálogo cerrado de 17. El agente elige los componentes y llena sus campos; no puede inventar un decimocuarto, no puede emitir HTML y no puede escribir una URL. Cada componente se valida contra su esquema en el servidor antes de que un solo byte llegue al visitante, y un componente que falla la validación se descarta mientras el resto de la respuesta llega igual.

## Los 17 componentes

| Componente | Cuándo lo elige el agente |
| - | - |
| `heading` | Para abrir una respuesta de varios componentes con un título y una línea de encuadre. Nunca la respuesta completa. |
| `media` | Una imagen o video, cuando verlo *es* la respuesta ("cómo se ve", "muéstrame"). |
| `mediaCard` | Una idea explicada en texto con una imagen de apoyo al lado. |
| `gallery` | De dos a cinco imágenes lado a lado: un recorrido, una comparación, un conjunto de espacios. |
| `timeline` | Una secuencia de pasos: un proceso, un onboarding, un trayecto. |
| `accordion` | Detalle secundario sobre un tema que el visitante no preguntó: letra chica, profundizaciones. Se renderiza plegado. |
| `cta` | Un banner de siguiente paso cuando la respuesta termina en una acción clara. |
| `metrics` | De una a tres cifras destacadas sobre el negocio, tomadas de su propio material. |
| `grid` | Un conjunto mixto de celdas para un panorama rico cuando una lista plana se quedaría corta. |
| `faq` | Varias preguntas distintas a la vez, formuladas como las haría un visitante. |
| `stats` | Cifras de terceros con su atribución, para el "por qué importa esto". |
| `leadForm` | Un formulario de contacto, cuando el visitante quiere que lo contacten. |
| `info` | Último recurso: un matiz, un honesto "no, pero esto es lo que hacemos", una redirección fuera de tema. |
| `features` | Un conjunto de 2 a 6 tarjetas iguales con ícono: un inventario, las razones detrás de una afirmación, opciones, casos de uso, una comparación cerrada. |
| `chips` | Grupos compactos de etiquetas cortas (canales, integraciones, métodos): nombres, no explicaciones. |
| `logos` | Prueba social o integraciones como marcas, opcionalmente agrupadas. |
| `plans` | Las ofertas de precio reales del negocio como tarjetas; el servidor formatea cada precio, el modelo solo elige cuáles mostrar. |

## Reglas que aplican a todos los componentes

* **Los campos de texto no llevan HTML, ni URLs, ni markdown.** La única excepción es el `body` de `info`, que permite formato markdown pero sigue rechazando HTML, URLs crudas y enlaces inline.
* **Las referencias son ids, nunca direcciones.** `assetId` nombra una imagen de tu registro, `actionId` nombra una de las acciones que declaraste en la página, `linkId` nombra uno de tus enlaces aprobados. Los ids van en minúsculas con guiones o guiones bajos simples, una forma que una URL no puede igualar. El servidor cambia cada id por el valor real después de la validación.
* **Los íconos vienen de un vocabulario fijo** de nombres genéricos (`shield`, `clock`, `truck`, `message-circle`, …). Son vocabulario de la interfaz, no tus datos, así que son una lista cerrada.
* **Como máximo una instancia de cada componente por respuesta.**

## Props, componente por componente

### heading

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | Una etiqueta de 2–5 palabras que nombra lo que sigue. |
| `description` | texto, 8–220, nullable | Una oración completa que lo encuadra. |

### media

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80, nullable | Etiqueta corta opcional. |
| `assetId` | id de recurso | Una imagen o video del registro de la página. |
| `caption` | texto, 8–160, nullable | Una oración que dice qué está mirando el visitante. |

Solo recursos horizontales. Uno vertical va en `mediaCard`, donde encaja sin estirarse.

### mediaCard

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | Etiqueta. |
| `description` | texto, 16–300 | Una o dos oraciones completas que llevan la sustancia. |
| `assetIds` | 1–2 ids de recurso | Imágenes que muestran lo que dice el texto. |
| `cta` | `label` (2–32) + `actionId`, nullable | Solo cuando un siguiente paso ayuda de verdad. |

### gallery

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80, nullable | Etiqueta opcional. |
| `variant` | `grid` o `bento` | `grid` para una comparación de cuadros uniformes; `bento` para un recorrido que conserva las proporciones de cada imagen. |
| `items` | 2–5 entradas | Cada una: `assetId` más un `caption` opcional (4–120). |

### timeline

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | Etiqueta de la secuencia. |
| `orientation` | `horizontal` o `vertical` | Horizontal cuando cada paso lleva una imagen, vertical para pasos compactos con ícono. |
| `items` | 2–6 pasos | Cada uno: `title` (2–80), `description` (8–160), `assetId` (nullable), `icon` (nullable). |

### accordion

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | El tema que se desglosa. |
| `items` | 2–6 filas | Cada una: `label` (2–80) y `body` (16–400), texto plano. |

Filas de un solo tema, ocultas hasta que el visitante hace clic, así que el acordeón lleva solo detalle secundario. El contenido que responde la pregunta real va a `grid`, `timeline`, `metrics`, `faq` o `info`; las preguntas formuladas como las haría un visitante pertenecen a `faq`.

### cta

| Prop | Tipo | Notas |
| - | - | - |
| `eyebrow` | texto, 2–48, nullable | Una línea pequeña opcional sobre el título. |
| `title` | texto, 4–80 | Etiqueta. |
| `description` | texto, 8–180 | Una oración sobre lo que obtiene el visitante. |
| `primaryCta` | `label` (2–32) + O BIEN `actionId` (sigue la conversación) O BIEN `linkId` (abre una página) | La acción. Las etiquetas son verbos. |
| `secondaryCta` | misma forma, nullable | Solo cuando existe una alternativa real. |

### metrics

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | Etiqueta. |
| `items` | 1–3 cifras | Cada una: `value` tal como se muestra (1–16 caracteres, p. ej. `6`, `24/7`), `label` (8–160), `assetId` (nullable). |

Solo cifras que aparecen literalmente en tu material. Los números de terceros pertenecen a `stats`, donde llevan una fuente.

### grid

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | Etiqueta. |
| `items` | 2–6 celdas | Cada una: `size` (`large` o `small`), `title` (2–80), `description` (8–160), `icon` (nullable), `assetId` (nullable). |
| `cta` | `label` + un destino, nullable | El único siguiente paso cuando el panorama termina en uno. |

### faq

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | Etiqueta. |
| `items` | 2–5 pares | Cada uno: `question` (8–120) y `answer` (16–300). |

### stats

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | Etiqueta. |
| `items` | 2–4 cifras | Cada una: `value` (1–12, p. ej. `5x`, `32%`), `label` (8–160), `source` (2–60). |

Tanto el número como su atribución deben existir en el material. Una atribución nunca se descarta ni se altera.

### leadForm

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | Etiqueta. |
| `description` | texto, 8–180 | Qué pasa después de que dejan sus datos. |
| `formId` | id de formulario | Uno de los formularios que configuraste; el servidor resuelve sus campos, y el agente nunca ve lo que un visitante escribe. |

El agente elige qué formulario mostrar; tú defines sus campos y a dónde va un envío. Un formulario envía internamente (se guarda y se te avisa por correo) o externamente (se postea a tu propia API), y solo un formulario externo puede incluir una contraseña — wondeya nunca guarda una.

### features

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | Etiqueta del conjunto. |
| `items` | 2–6 tarjetas | Cada una: `icon` (del enum), `title` (2–80), `description` (8–160). |
| `cta` | `label` + un destino, nullable | El siguiente paso natural. |

### chips

| Prop | Tipo | Notas |
| - | - | - |
| `groups` | 1–3 grupos | Cada uno: una `label` (1–3 palabras) y 1–6 `items`, cada uno con una `label` corta y un `icon` opcional. |
| `cta` | `label` + un destino, nullable | Solo cuando un siguiente paso ayuda de verdad. |

### logos

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | Etiqueta. |
| `logoIds` | 2–8 ids de logo | Marcas de tu conjunto de logos; nunca inventadas. |

### plans

| Prop | Tipo | Notas |
| - | - | - |
| `offerIds` | las ofertas a mostrar | Tú configuras las ofertas; el servidor renderiza los nombres, precios y botones reales. El modelo nunca escribe una cifra. |
| `note` | texto, nullable | Una línea opcional sobre la selección, nunca una cifra. |
| `linkId` | nullable | Un enlace opcional de "ver todos los planes". |

### info

| Prop | Tipo | Notas |
| - | - | - |
| `title` | texto, 4–80 | Etiqueta. |
| `body` | markdown, 16–600 | La respuesta completa. Formato sí; HTML, URLs crudas y enlaces inline no. |
| `bullets` | 1–6 líneas (2–160 cada una), nullable | Para enumeraciones. |
| `links` | 1–3 entradas, nullable | Cada una: `label` (2–48) y `linkId` de tus enlaces aprobados. |
| `cta` | `label` + `actionId`, nullable | Solo cuando un siguiente paso ayuda de verdad. |

## Cómo se hace cumplir el catálogo

El servidor hace cumplir el mismo contrato de esquema antes de que algo se transmita, y el registro de renderizadores del cliente lo replica. Ese registro es cerrado: un tipo de componente que no reconoce nunca se adivina (el visitante ve en su lugar una nota corta que le pide refrescar la página), y un componente cuya imagen no logra cargar se degrada a un placeholder neutro en lugar de una caja rota.

Como el catálogo es cerrado y sus campos de texto rechazan el marcado, el peor resultado de una instrucción maliciosa escondida dentro del conocimiento subido es un componente que falla la validación y desaparece, no marcado en la pantalla de tu visitante.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.