# Elementos

> Elementos de las diapositivas de Live Deck: texto, imagen, forma, QR para unirse, ícono, gráficos y decoración, con sus estilos y valores.

## Campos comunes de los elementos

| Campo | Tipo | Reglas |
| --- | --- | --- |
| `id` | string | `[A-Za-z0-9_-]{1,40}`, único en la diapositiva. Los efectos (ripple, focus, zoom) lo usan como objetivo. |
| `type` | `"text"` \| `"image"` \| `"shape"` \| `"qr"` \| `"icon"` \| `"chart"` \| `"decor"` | Discriminador. No hay otros tipos: no se permite HTML ni SVG libre. |
| `box` | `{ x, y, w, h }` | Normalizado 0..1 sobre el lienzo 16:9, con origen arriba a la izquierda. `x + w <= 1`, `y + h <= 1`. |
| `fragment` | integer 1–20 | Opcional. El elemento aparece en ese paso; si no está = siempre visible. |

### text

- `text`: string, máximo 2000. `\n` hace saltos de línea.
- `style` (opcional, todo opcional):
  - `fontSize` 8–400 (px lógicos sobre 1920x1080)
  - `fontWeight` 400 \| 500 \| 600 \| 700 \| 800
  - `font` `"display"` \| `"body"` \| `"mono"`
  - `italic` boolean
  - `color` hex
  - `align` `"left"` \| `"center"` \| `"right"`
  - `valign` `"top"` \| `"middle"` \| `"bottom"`
  - `lineHeight` 0.8–3
  - `background` hex (relleno de tarjeta)
  - `radius` 0–540 (px)
  - `padding` 0–200 (px)
  - `card` boolean: dibuja la tarjeta del preset (color de superficie, radio, borde, sombra). No lo combines con `background` ni `radius`; deja que el preset decida.
  - `uppercase` boolean
  - `tracking` -0.05–0.3 (espaciado entre letras en em; un valor negativo aprieta los textos display grandes, uno positivo abre las etiquetas pequeñas en mayúsculas)
  - `mark` boolean: subrayado resaltado con el color de acento detrás del texto. Úsalo en una sola frase corta por diapositiva.

### image

- `src`: `https://…` o `assets/<path>` (caracteres `[A-Za-z0-9_\-./]`, sin `..`, máximo 500). Los archivos locales van en `decks/<id>/assets/`; la CLI falla si falta el archivo.
- `alt`: string, obligatorio, máximo 300.
- `fit`: `"contain"` \| `"cover"` (opcional).
- `style`: solo `{ radius }`.

### shape

- `shape`: `"rect"` \| `"ellipse"` \| `"line"`. Una línea horizontal usa `h: 0`.
- `style` (opcional): `fill` hex, `stroke` hex, `strokeWidth` 0–40, `radius` 0–540.

### qr

Muestra en tiempo de ejecución el QR y la URL para unirse a la sesión. No lleva contenido.
- `style` (opcional): solo `color` y `background` (hex). Usa un fondo claro con color oscuro para que se pueda escanear bien.
- Pon uno en la diapositiva 1. Mantenlo de al menos 0.25 de ancho y más o menos cuadrado en pantalla (`h ≈ w × 16/9`).

### icon

Un ícono de Lucide seleccionado. La lista oficial es `ICON_NAMES` en `shared/icons.ts` (~80 nombres en kebab-case); cualquier otro nombre no pasa la validación. Revisa el archivo cuando tengas dudas.

- `name`: una entrada de `ICON_NAMES`, por ejemplo `"rocket"`.
- `style` (opcional): `color` hex, `background` hex (un recuadro relleno detrás del ícono), `strokeWidth` 1–3, `radius` px (redondea el recuadro de fondo).
- Color por defecto: el acento del preset, o el color del texto cuando el acento es demasiado tenue sobre su fondo (menos de 3:1, por ejemplo amarillo sobre papel claro en `brutalista`). Define `color` solo para forzar un tono específico.
- Mantén la caja más o menos cuadrada en pantalla: `h ≈ w × 16/9` (por ejemplo `w: 0.08, h: 0.142`).

Nombres representativos (verifícalos contra `ICON_NAMES`):

| Significado | Nombres |
| --- | --- |
| Personas y conversación | `users`, `user`, `message-circle`, `heart`, `smile`, `thumbs-up`, `hand` |
| Ideas y metas | `lightbulb`, `target`, `rocket`, `sparkles`, `trophy`, `flag` |
| Datos y crecimiento | `bar-chart-3`, `trending-up`, `trending-down`, `pie-chart`, `database` |
| Seguridad | `shield-check`, `lock`, `key`, `alert-triangle`, `check-circle` |
| Tiempo y lugar | `clock`, `calendar`, `map-pin`, `globe` |
| Tecnología y trabajo | `code`, `cpu`, `cloud`, `zap`, `settings`, `book-open`, `graduation-cap` |

### chart

Gráfico de datos simple dibujado como SVG. Úsalo cuando el contenido tenga de 2 a 8 números reales; nunca inventes datos.

- `kind`: `"bar"` \| `"donut"`.
- `data`: arreglo de `{ "label": string (máximo 40 caracteres), "value": number >= 0 }`. Barras: 1–8 puntos, una sola serie. Dona: 2–6 porciones.
- `unit` (opcional): string, máximo 8 caracteres, se añade a los valores (`"%"`, `" h"`, `"k"`).
- `style` (opcional): solo `color` hex (color de las barras; por defecto el acento). La dona usa la paleta categórica del preset en orden fijo.
- Las barras muestran etiquetas de valor sobre cada barra y no tienen leyenda. La dona muestra una leyenda con los valores y el total al centro.
- Dale espacio: al menos `w: 0.4, h: 0.5`.

### decor

Forma SVG decorativa incorporada. No lleva contenido: nunca pongas significado en un decor.

- `shape`: `"blob"` \| `"wave"` \| `"dots"` \| `"rings"` \| `"arc"` \| `"squiggle"` \| `"star"` \| `"grid"`.
- `style` (opcional): `color` hex (por defecto el acento), `opacity` 0.05–1.
- Colócalo antes del texto en `elements` para que se dibuje detrás; mantenlo fuera del texto, normalmente pegado a una esquina o a un borde (las cajas no pueden salir del lienzo). Uno o dos por diapositiva como máximo.