Elementos

Cada elemento ocupa una caja normalizada en el lienzo 16:9. Hay siete tipos incorporados; no se permite HTML ni SVG libre, porque el contenido del deck llega a los celulares del público.

Campos comunes de los elementos

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):

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.