# @lexydesign/kit

Kit **HTML / low-fi** del Lexy Design System: los mismos componentes y blocks del registry en HTML plano, sin React ni Radix, con un `kit.css` autocontenido (theme Lexy + utilidades Tailwind ya compiladas). Sirve para prototipos low-fi y para que un agente componga páginas con el look real de Lexy.

No se importa como librería — se trae como carpeta:

```
npx create-lexy kit            # copia el kit a ./lexy-kit
```

O directo por CDN de npm (jsdelivr sirve cada archivo como texto, con CORS abierto):

```
# Página central para una IA (catálogo + cómo prototipar + enlaces absolutos)
https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/llms.txt
# Todo el contexto inline en un solo archivo
https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/llms-full.txt
# Índice máquina-legible y catálogo navegable
https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/manifest.json
https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/index.html
```

Una IA que pueda navegar (ChatGPT, etc.) lee `llms.txt` y sigue los enlaces para el markup de cada componente — igual que el registry se consume por CDN.

Estructura: `index.html` (catálogo), `components/<nombre>.html`, `blocks/<nombre>.html`, `kit.css`, `kit.js`, `fonts/`, `manifest.json` (índice máquina-legible), `AGENTS.md` (guía para que una IA construya prototipos) y `pautas/` (las pautas de diseño de Lexy, para decidir bien — no solo emitir HTML válido).

**Para una IA:** `AGENTS.md` explica el flujo; `manifest.json` lista el inventario (con `assets`, `guides` e `interactive`); el markup de cada pieza está en su `.html`; las decisiones de diseño en `pautas/`. Es la paridad del flujo React, en HTML.

El contenido es **generado** por `scripts/generate-kit.ts` ejecutando los componentes a partir de `registry/components/`, `registry/blocks/` y `registry/theme/lexy-theme.css` (la fuente de verdad). No se edita a mano; cada merge a `main` regenera y publica.

**Estados interactivos:** los overlays (menús, selects, popovers, tooltips, diálogos) traen un specimen *Interactivo* — su contenido abierto se captura del componente real (ejecutándolo en un DOM en proceso) y `kit.js` lo togglea al click/hover. Sin React ni Radix.

**Límite:** las visualizaciones que miden el DOM (Chart) quedan en su estado base; los paneles se posicionan de forma simple (no con Floating UI). Suficiente para un kit low-fi.