Plataformas y superficies

Plataformas

Cada componente y patrón tiene pestañas de plataforma: Web, iOS y Android. Cada pestaña tiene su propio estado y su archivo (web.md, ios.md, android.md). Lo común (cuándo usarlo, reglas, accesibilidad) vive en index.md y se muestra en todas.

Cuando una plataforma no tiene implementación, la pestaña muestra «Sin iniciar» y un prompt para que un agente prepare la primera versión en exploración.

Para añadir una plataforma a un sistema se añade a plataformas en system.json. Para iOS y Android, el enlace con producción funciona igual: la fuente es un archivo Swift o Kotlin y la huella es el archivo completo.

Superficies

Una superficie es una parte del producto con su propio código: por ejemplo, una landing en HTML y CSS estático y un área de cliente en Next y Tailwind. Se definen en system.json:

"superficies": {
  "landing": { "nombre": "Landing", "estilos": ["public/site/fonts.css", "public/site/styles.css"], "cobertura": true },
  "portal": { "nombre": "Portal de clientes", "estilos": ["src/app/globals.css"], "tailwind": "4.3.3" }
}

• estilos: hojas que se copian en la instantánea y que cargan los ejemplos.
• cobertura: si se cuentan las clases sin documentar de esta superficie.
• tailwind: versión de Tailwind con la que se compilan los ejemplos de la superficie en el navegador.
• estilosExtra y cssExtra: hojas de otra superficie (fuentes) y variables que en producción pone el framework.

Si dos superficies implementan el mismo componente de forma distinta, la ficha lo anota en «Diferencias entre superficies». Unificarlas es una iniciativa, no un arreglo silencioso.