Design system

El kit de la flota, escrito a mano. Elige un componente en el menú de la izquierda o busca por nombre — / o ⌘K llevan el foco al buscador desde cualquier punto de la página.

componentes: 45
con librería: 3
de Subframe: 0

La regla que sostiene todo lo demás

Ninguna primitiva de terceros cruza la frontera de src/kit/. radix-ui solo se puede importar ahí dentro; fuera, la aplicación importa componentes nuestros. No es una buena intención: la impone no-restricted-imports en el preset de ESLint que este mismo paquete exporta (@saas-holic/design-system/eslint), y si alguien —persona o agente— la salta, el lint falla y dice por qué.

📏 No es teórico. En otto-web existe el mismo patrón sin regla que lo sostenga: de sus 5 usos de Radix, 4 se filtraron fuera de ui/. Con esas fugas ya no se cambia de primitiva tocando un archivo. La disciplina sin mecanismo se escapa sola.

Las 10 familias

Lo que todavía no tiene vitrina

Están en el paquete y se usan, pero no se pueden mirar aquí. Se listan a propósito: un catálogo que solo enseña lo que ya está hecho no es un catálogo, es una galería — el hueco deja de existir para quien lo lee, y nadie lo prioriza.

Combobox — Lista abierta con filtro sin tildes y colocación contra visualViewport. Sin vitrina todavía — se usa en el buscador de este mismo rail, que NO es una vitrina: ahí no se pueden ver sus estados. (src/kit/combobox.tsx)
Toast — Lleva BORDE y no sombra: su relleno es el color de la página (1.00:1) y en oscuro una sombra no se percibe. Sin vitrina todavía. (src/kit/feedback.tsx)
AppShell — El chasis de ranuras. Sin vitrina y no por falta de tiempo: emite <header>, <nav> y <main>, y montarlo dentro de esta página anidaría los tres landmarks. Se mira abriendo cualquier pantalla de la vitrina — es el marco que la sostiene. (src/shell/app-shell.tsx)
ShellLoading — Lo que Next pinta en el INSTANTE del clic, desde un loading.tsx. Sin vitrina porque no se puede montar aquí: solo existe durante una navegación. Hace dos cosas y la segunda se escapa — sin un loading.tsx, el prefetch de <Link> **no descarga nada** en una ruta dinámica (lo dice el link.d.ts de Next). ⚠️ Exige que el AppShell viva en un layout, o sale sin chrome. (src/shell/shell-loading.tsx)
LoadingRegion — La mitad que ANUNCIA una espera: aria-busy más una frase en un role="status" con retardo. El esqueleto es la mitad visual y va aria-hidden — una rejilla de barras leída en voz alta es ruido que además suena a contenido. Sin vitrina: lo que hace no se ve, se oye. (src/shell/shell-loading.tsx)
UserMenu — El único sitio donde vive el cambio de contexto (compañía/entorno/app), y además lo MUESTRA: si solo ofreciera la acción, la app colgaría un chip aparte para poder leerlo — el segundo control que tenía pacho. Sin vitrina: solo tiene sentido dentro de la ranura user del chasis. (src/shell/user-menu.tsx)
UserMenuTrigger — El disparador enfocable del menú. Existe suelto porque el <div onClick> que traía el código de origen no se podía abrir con el teclado en NINGUNA pantalla, y ahí dentro vive «Cerrar sesión». Sin vitrina por lo mismo que UserMenu. (src/shell/user-menu.tsx)
NavDrawer — El riel por debajo del corte: un diálogo modal con otra geometría. Hereda de Radix los cuatro comportamientos que un cajón escrito a mano pierde —Escape, foco atrapado, fondo escondido del lector y el foco de vuelta al botón que lo abrió—. Primer lo escribió a mano y su cajón tiene cero de los cuatro; el nuestro los verifica por mutación. (src/kit/drawer.tsx)
SidePanel — El panel de DETALLE, hermano del cajón y no una bandera suya. Sale por el borde final —la convención de Carbon, Fluent y Atlassian para inspeccionar sin perder la lista—, lleva título a la vista porque describe algo concreto, y no se cierra al tocar dentro. Nació al migrar una app real cuyo panel se abre desde una FILA de tabla: el cajón de navegación no servía porque es dueño de su propio botón. (src/kit/drawer.tsx)

La regla que sostiene todo lo demás

Lo que todavía no tiene vitrina

Combobox — Lista abierta con filtro sin tildes y colocación contra visualViewport. Sin vitrina todavía — se usa en el buscador de este mismo rail, que NO es una vitrina: ahí no se pueden ver sus estados. (src/kit/combobox.tsx)

Toast — Lleva BORDE y no sombra: su relleno es el color de la página (1.00:1) y en oscuro una sombra no se percibe. Sin vitrina todavía. (src/kit/feedback.tsx)

AppShell — El chasis de ranuras. Sin vitrina y no por falta de tiempo: emite <header>, <nav> y <main>, y montarlo dentro de esta página anidaría los tres landmarks. Se mira abriendo cualquier pantalla de la vitrina — es el marco que la sostiene. (src/shell/app-shell.tsx)

ShellLoading — Lo que Next pinta en el INSTANTE del clic, desde un loading.tsx. Sin vitrina porque no se puede montar aquí: solo existe durante una navegación. Hace dos cosas y la segunda se escapa — sin un loading.tsx, el prefetch de <Link> **no descarga nada** en una ruta dinámica (lo dice el link.d.ts de Next). ⚠️ Exige que el AppShell viva en un layout, o sale sin chrome. (src/shell/shell-loading.tsx)

LoadingRegion — La mitad que ANUNCIA una espera: aria-busy más una frase en un role="status" con retardo. El esqueleto es la mitad visual y va aria-hidden — una rejilla de barras leída en voz alta es ruido que además suena a contenido. Sin vitrina: lo que hace no se ve, se oye. (src/shell/shell-loading.tsx)

UserMenu — El único sitio donde vive el cambio de contexto (compañía/entorno/app), y además lo MUESTRA: si solo ofreciera la acción, la app colgaría un chip aparte para poder leerlo — el segundo control que tenía pacho. Sin vitrina: solo tiene sentido dentro de la ranura user del chasis. (src/shell/user-menu.tsx)

UserMenuTrigger — El disparador enfocable del menú. Existe suelto porque el <div onClick> que traía el código de origen no se podía abrir con el teclado en NINGUNA pantalla, y ahí dentro vive «Cerrar sesión». Sin vitrina por lo mismo que UserMenu. (src/shell/user-menu.tsx)

NavDrawer — El riel por debajo del corte: un diálogo modal con otra geometría. Hereda de Radix los cuatro comportamientos que un cajón escrito a mano pierde —Escape, foco atrapado, fondo escondido del lector y el foco de vuelta al botón que lo abrió—. Primer lo escribió a mano y su cajón tiene cero de los cuatro; el nuestro los verifica por mutación. (src/kit/drawer.tsx)

SidePanel — El panel de DETALLE, hermano del cajón y no una bandera suya. Sale por el borde final —la convención de Carbon, Fluent y Atlassian para inspeccionar sin perder la lista—, lleva título a la vista porque describe algo concreto, y no se cierra al tocar dentro. Nació al migrar una app real cuyo panel se abre desde una FILA de tabla: el cajón de navegación no servía porque es dueño de su propio botón. (src/kit/drawer.tsx)