Scaffold base para el flujo "GestionPro APP" del Build de GestionPro. Cuando un usuario elige crear módulo y envía un prompt, el sandbox clona este repo y la IA construye encima.
Es un proyecto runnable en sandbox aislado (Vite + React + Tailwind por CDN),
no una copia del módulo del monorepo: aquí no resuelven @ui/* ni @shared/* ni los
paquetes del host, así que se usa UI con elementos planos + los mismos tokens de
tema de la app. Al portar el módulo a apps/web/modules/<id> se sustituyen los
elementos planos por componentes @ui — el look ya coincide.
index.html Tailwind CDN + variables de tema (claro/oscuro) + darkMode:class
src/main.tsx Monta <App/> en <BrowserRouter>
src/App.tsx Shell de PREVIEW (nav + toggle claro/oscuro). No se porta al host.
manifest.ts ModuleManifest (id, moduleName, sidebar.icon lucide, routes, dbSchema)
routes.tsx Array de rutas (paths en sync con manifest.routes.basePath)
index.ts export { manifest, routes } ← contrato del módulo
pages/ Páginas (Home = panel/KPIs, List = tabla)
components/ UI reutilizable (StatCard, DataTable)
types.ts, data.ts Tipos + datos de ejemplo en memoria
Theming — claro/oscuro: estilizar SOLO con tokens semánticos: bg-background,
text-foreground, bg-card, text-card-foreground, bg-muted, text-muted-foreground,
bg-accent, bg-primary, text-primary-foreground, bg-destructive, border-border.
Para chips decorativos: bg-primary/10 + text-primary. Nunca #hex, white,
black, bg-black, ni escalas (bg-blue-100 dark:bg-blue-900) para chrome. Escalas de
color SOLO cuando el color significa algo (estado/prioridad) y siempre con variante dark:
(ver components/DataTable.tsx).
Iconos: solo lucide-react; tamaño con escala size-* (size-4 por defecto, size-6
títulos); color por token; el icono del manifest es el componente.
Contrato del módulo: index.ts exporta { manifest, routes }; manifest con forma
ModuleManifest; paths de routes.tsx en sync con manifest.routes.basePath.
npm install
npm run dev # http://localhost:5173 — usa el toggle para probar claro/oscuro