Frontend y estado
Entrada y composición
main.tsx carga mediante React.lazy el editor, el visor público o el consentimiento MCP. La selección usa host y parámetros, sin un router general declarado. EditorRoot.tsx envuelve App en AuthProvider y StoreProvider. El visor público entra por PublicSiteRoute.tsx.
App.tsx coordina sesión de proyecto, selección, herramientas, operaciones de elementos y modales. Usa carga diferida para paneles y gestores. El lienzo se divide en CanvasViewport, CanvasSection y CanvasElement. Los tipos en builder.ts y cálculos en responsiveLayout.ts modelan geometría y variantes por dispositivo; modificar una variante requiere respetar esas funciones, no asumir independencia garantizada para cualquier código nuevo.
Propiedad del estado
| Estado | Responsable |
|---|---|
| Usuario, inicio/cierre de sesión, repositorio remoto | AuthContext.tsx. Firebase Google y correo/contraseña, observación de onAuthStateChanged. |
| Documento actual, selección de proyecto, recuperación, conflictos y estado de guardado | useProjectSession.ts, con useProjectHistory.ts. |
| Programación del guardado y publicación | saveCoordinator.ts. |
| Copia local y copia anterior | localRepository.ts, almacenamiento por usuario y proyecto. |
| Lectura, suscripción y guardado remoto de proyectos propios | firestoreRepository.ts, transacciones y onSnapshot. |
| Proyectos compartidos | collaborationRepository.ts, seleccionado desde AuthContext según alcance de colaboración. |
| Catálogo, carrito, pedidos y vínculo al proyecto | StoreContext.tsx. |
| Estado transitorio de paneles, selección y modales | App y hooks/componentes del editor. No se observa Redux o Zustand como almacén central. |
La sesión mantiene ProjectSnapshot y usa el documento completo como unidad de persistencia. editorProjection.ts adapta páginas/capas a la edición. La revisión local, remota y publicada distingue cambios hechos, guardados y visibles. El repositorio remoto detecta escrituras de otra sesión; no equivale a edición colaborativa arbitraria sin conflictos. La colaboración tiene su propio servicio y estrategia de combinación.
Estilos y extensiones
Tailwind se procesa con Vite y convive con CSS de aplicación. Lucide aporta iconos; anime.js se usa al menos en tooltips. El registro de módulos aporta elementos al catálogo, mientras que la coordinación general y varios gestores continúan importados explícitamente desde App. Véase la evaluación de modularidad en visión general.