Refresh UI 2026 — handoff2

User value

Workspace de CreaRack tiene ahora interfaz completa y coherente para pantalla grande y móvil. En lugar de layout único fijo, el usuario selecciona entre 3 variantes desktop (A Sobrio, B Premium, C Editorial Terminal) y 3 mobile (V1 Vivo, V2 Dashboard, V3 Briefing), conmutables en runtime sin recargar. Sistema de preferencias con 15 controles independientes por usuario (tema, acento, densidad, esquinas, tipografía, ancho, animaciones, shine), persistidos en localStorage. Edu, Dani y Txell tienen configuraciones distintas sin interferirse.

Cómo usarla

Desde home (/), panel de Preferencias (header) expone todos los controles. Toggle variante desktop cambia A/B/C; toggle mobile V1/V2/V3. Cmd+K abre SearchModal global (tareas, noticias, worklog, páginas). Todas las prefs sobreviven sesiones. Query param opcional (?variant=b) sobreescribe para esa sesión, útil compartiendo pantallas.

Implementación

Sigue paquete handoff2/ al pie de la letra: CSS copiado desde reference/styles.css, JSX traducido preservando markup y estilos inline sin creatividad propia.

Variantes desktop (src/components/variants/desktop/):

• DesktopA.tsx — grid 2fr/1fr, header sobrio, bentos con glow azul/cyan/verde.
• DesktopB.tsx + AuroraGlow.tsx — 3 columnas hero (1.2fr/1fr/1.3fr), auroras drifting, KPIs sparklines.
• DesktopC.tsx — masthead “EDICIÓN #042”, headline editorial, columnas newspaper, scanlines, Oswald + JetBrains Mono.

Variantes mobile (src/components/variants/mobile/):

• V1HomeVivo.tsx — saludo cálido, alerta con CTA, tareas con check, worklog bar chart, FAB 4 acciones.
• V2Dashboard.tsx — grid 2×2 KPI cards con sparklines, chips status scroll, equipos scroll horizontal.
• V3Briefing.tsx — serif italic Georgia, cifras gigantes sin iconos, agenda editorial numerada, masthead “ed. #1247”.

Widgets de contenido (AlertBanner, KanbanMini, MetricsStrip, WorklogFeed, TeamPulse, ServerGrid, HealthWidget, NewsFeed) en src/components/widgets/ compartidos. Orquestador DesktopApp.tsx y MobileApp.tsx islands client:only="react" que leen prefs y montan la variante.

Decisiones

• UserSwitcher eliminado: workspace pertenece a un único usuario. Dropdown → UserBadge estático. Lógica setCurrentUser() queda en prefs.ts para testing futuro.
• Shine añadido: no estaba en handoff2 original, Edu lo pidió del diseño antiguo. Implementado como pref shine: low|normal|high con filter: brightness.
• SecondaryLayout estático: páginas secundarias (/tasks, /wiki) usan SecondaryLayout.astro HTML puro para no cargar island React completo. Trade-off: Search y Preferencias no disponibles fuera de home.
• Sin librerías nuevas: sparklines con SVG inline y Web APIs nativas. ECharts descartado.
• Rutas únicas con toggle cliente: descartadas 3 rutas distintas (/, /b, /c) por duplicación de shell y complicaciones de deep-linking.

Commits relacionados

Véase también

• [[concept—biblioteca—supercontexto]]