--- type: TP asset_id: TP-XX-DashboardSystem-RoomKit-v01 version: v01 status: Activo — listo para arrancar un room dedicado owner: Victor Heredia sherpa_owner: Jay ratificador: Victor Heredia fecha_creacion: 2026-07-13 intellibank: IB-XX-Maestro subbank: — proposito: Transfer Pack para operar y actualizar, desde un room dedicado, el sistema de tableros/navegación de EmpowerLabs — el kit, el HOY principal, los mini-sitios y los homes de componente. Explica la lógica y la programación, y cómo actualizar el contenido de cada frente ligado al menú. relacionados: "EL-DashboardStandard-v01.js (kit) · SK-EL-DashboardHomogenize-v01.js (propagador) · SK-EL-DashboardValidator-v01.js · CP-XX-DashboardGovernance-v01 · CP-XX-ComponentHomes-v01 · MePB-XX-ComponentHomeSystem-Portable-v01 (playbook portable)" tags: [transfer-pack, dashboards, kit, mini-sitios, homes-componente, navegacion, room-kit] --- # Transfer Pack — Sistema de Dashboards & Navegación (RoomKit) > **BLUF.** Todo el sistema de navegación de EmpowerLabs (menú de HOY, mini-sitios, homes de componente, tema, firmas de familia) vive en **un solo archivo**: `EL-DashboardStandard-v01.js` (el "kit"). El kit se **incrusta (inline)** dentro de cada uno de los ~148 tableros HTML. Se edita **una vez** y se re-propaga a todos con un script. Este pack te da la lógica completa para operar el sistema y actualizar el contenido de cada frente, sin romperlo. --- ## 0. Cómo usar este pack Cárgalo al abrir el room dedicado. Con él, el agente puede: (a) actualizar el contenido de los frentes ligados al menú, (b) entender la lógica/programación del kit, HOY y los mini-sitios, (c) hacer cambios de menú/navegación de forma segura. **Regla base:** navegación y menú = se editan en el kit y se re-propaga; contenido de un frente = se edita el archivo del frente. Nunca edites la navegación tablero por tablero. --- ## 1. Arquitectura en una imagen mental ``` EL-DashboardStandard-v01.js (EL KIT · única fuente de verdad) │ se incrusta (inline) en cada .html vía el homogenizador ▼ ~148 tableros .html autocontenidos ──► cada uno hereda: tema, menú, firma de familia, barra de control (widget), estampa de fecha. ``` **Archivos del sistema (todos en `IB-XX-Maestro/`):** | Archivo | Rol | |---|---| | `EL-DashboardStandard-v01.js` | **El kit.** Toda la lógica: tema, menú (general + mini-sitios), firmas de familia, widget, estilos. | | `SK-EL-DashboardHomogenize-v01.js` | **El propagador.** Incrusta el kit en cada .html + sella `data-updated/group/doc`. Idempotente. | | `SK-EL-DashboardValidator-v01.js` | Valida cumplimiento del estándar. | | `SK-EL-DashboardStamp-v01.js` · `SK-EL-AuditoriaDashboards-v01.js` | Sello de fechas · auditoría. | | `SK-EL-ThemeNormalize / DeepRecolor / RemoveHomeButtons` | Helpers de migración de una sola vez (histórico). | | `TPL-XX-Dashboard-Starter-v01.html` | Plantilla base para un tablero nuevo (se queda **sin** kit; el homogenizador lo salta). | | `CP-XX-DashboardGovernance-v01.md` | Gobernanza visual (mini-sitios, checklist, familias). | | `CP-XX-ComponentHomes-v01.md` | Estándar de los Homes de Componente (5 elementos). | --- ## 2. Qué hace el kit (al cargar cada tablero) El kit corre un IIFE que, al cargar el HTML: aplica el **tema** (oscura por default, compartido entre tableros vía `localStorage`), pinta la **firma de familia** (cinta superior + tinte), aplica la **paleta Home-Live**, monta el **menú** (si aplica), monta la **barra de control** (widget) y la **estampa** de fecha, y oscurece el texto en modo claro para legibilidad. No toca el contenido propio del tablero. **Convención de tema:** `data-theme="oscura|clara"` en ``. El kit es la **única** autoridad de tema: oculta cualquier control de tema propio del tablero y sincroniza todas las convenciones viejas (`data-t`, clases `.light/.dark`). --- ## 3. La lógica de navegación (el corazón) Se decide con **dos atributos** en `` + una detección: - **`data-group`** = la **familia** (empowerlabs, rebelocity, posta, masterplaybooks, wikix, loopx, maestro). Lo sella el homogenizador según la ruta. Da: color de firma (`GROUPS`) + qué menú de familia aplica (`FAMILY_NAV`). - **`data-site`** = la **clave de mini-sitio** (dg, soo, worxos, intellibanks, skillfactory, empowerscan, macroloopx, braincodes, factoriaeditorial). Si está presente, el menú del mini-sitio **reemplaza** al de la familia. - **`ownNav`** = detección: ¿la página tiene su **propio** menú? (`.navitem`, `#menuToggle`, `.menu-toggle`). Si sí, el kit **no** inyecta menú. **Funciones clave del kit:** - `fam()` → devuelve la navegación de la familia (`FAMILY_NAV[data-group] || FAMILY_NAV.empowerlabs`). - `site()` → devuelve la entrada de mini-sitio (`SITES[data-site]`) o `null`. - `ctx()` → `site() || fam()` — el **contexto** de navegación (mini-sitio si hay, si no la familia). - **`var kitMenu = !hasNav && !isWiki;`** → **regla de inyección**. Si la página no tiene menú propio y no es WikiX, el kit inyecta el menú de `ctx()`. (Antes se excluía a las páginas "HOY/Home"; esa exclusión se **quitó** para que la principal HOY comparta el mismo menú general.) - `goHome()` → va al home del contexto (`ctx().home`). - `nav(rel)` → navega vía `computer:///` en Cowork (independiente de la profundidad de la carpeta). **Resultado por tipo de página:** | Página | ownNav | data-site | Menú que ve | |---|---|---|---| | General EL (Buzón, Frentes, Mapa Cognitivo, **HOY**…) | no | — | **Menú general** (4 secciones) | | Home de mini-sitio/componente (WORX OS, SOO, Brain Codes…) | sí | su clave | **Su propio** menú (hardcodeado en el home) | | Sub-página de mini-sitio sin menú propio (p.ej. ROI Tracker) | no | su clave | **Menú del mini-sitio** (inyectado) | | WikiX | — | — | Ninguno (tiene su propio hub) | --- ## 4. El menú general (4 secciones · única fuente = el kit) Se define en el kit con 4 arrays → una sección cada uno en `FAMILY_NAV.empowerlabs.sections`: - **`MENU_DIA_EL`** — 🗓️ Día a día: HOY, Buzón, Frentes, Esta semana, Agenda viva, Semanal EmpowerLabs, Logros de la semana, **Boletín Semanal**. - **`MENU_COMPONENTES_EL`** — 🧩 Componentes del ecosistema: WORX OS, SOO, Demand Gen, Skill Factory, Factoría Editorial, MacroLoopX, Brain Codes, EmpowerScan, IntelliBanks. - **`MENU_HERR_EL`** — 🛠️ Herramientas & conocimiento: Grafo del ecosistema, Idea Bank, Experimentos·LoopXIN, Calculadoras, Mapa Cognitivo, WikiX. - **`MENU_PERSONAL_EL`** — 👤 Personal: NEXTs, Brain OS, ROI Tracker, Coordinación Victor·Anahí. *(Nota: hoy la sección Personal es visible para todo el equipo — el menú es HTML estático sin login por usuario. Para hacerla privada se creará un home personal de Victor con `data-site` propio y se quitará Personal del menú compartido.)* **Editar el menú = editar SOLO estos arrays en el kit + re-propagar.** Nunca se edita el menú tablero por tablero. --- ## 5. El widget (barra de control vertical, arriba-derecha) Botones: **☰** (abrir/cerrar menú · solo si el kit inyecta menú) · **🏠** (ir al home del contexto · oculto si ya estás en el home) · **🏢** (Home del ecosistema = EmpowerLabs HOY · aparece **solo en mini-sitios**, es la salida al ecosistema) · **☀️/🌙** (tema) · **⟳** (actualizar). La estampa (abajo-derecha) muestra `data-updated` + fecha viva + familia + `data-doc`. --- ## 6. Homes de Componente y mini-sitios Un **home de componente** es el home canónico de un frente: mini-sitio (`data-site` + menú propio) + **bitácora de avances** + índice de docs + nodo en el grafo + cadencia. Estándar completo en `CP-XX-ComponentHomes-v01.md`. **Convenciones fijas (del piloto WORX OS):** hero title con gradiente horizontal; orden Resumen → Componentes → Bitácora → Docs; salida al ecosistema en el widget (🏢), no en el menú; footer con el doc que rige. Los 9 homes/mini-sitios: worxos, soo, dg, skillfactory, factoriaeditorial, macroloopx, braincodes, empowerscan, intellibanks. --- ## 7. Cómo actualizar el CONTENIDO de cada frente (operativo) **Regla de oro:** el **contenido** se edita en el archivo del frente; la **navegación/menú** en el kit. Tras tocar el kit → re-propagar. Tras tocar solo contenido de un tablero → no hace falta re-propagar (pero conviene resellar la fecha corriendo el homogenizador, que es idempotente). | Frente (link del menú) | Archivo del home / página | Qué editas para actualizar contenido | |---|---|---| | **WORX OS** | `BOS-EL-WORX-OS/BRD-EL-WORXOS-Home-v01.html` | secciones del home + **agregar línea a la Bitácora**; docs `.md` aparte | | **IntelliBanks** | `IB-XX-Maestro/BRD-XX-IntelliBanks-Home-v01.html` | idem | | **Skill Factory** | `CP-EL-Control-Planes/BRD-EL-SkillFactory-Home-v01.html` | home + su mapa de skills `VIZ-EL-SkillsRegistry-Dashboard-v01.html` | | **EmpowerScan** | `PB-LoopX/BRD-EL-EmpowerScan-Home-v01.html` | idem | | **MacroLoopX** | `PB-LoopX/BRD-EL-MacroLoopX-Home-v01.html` | idem | | **Brain Codes** | `BC-EL-BrainCodes/BRD-EL-BrainCodes-Home-v01.html` | idem | | **Factoría Editorial** | `PB-MPX-FactoriaEditorial/BRD-MPX-FactoriaEditorial-Home-v01.html` + su **Dashboard de Producción** | home + **capa DATA** del dashboard (`const PUBS`, `const CASAS`) | | **Demand Gen · SOO** | `BRD-EL-DG-Home` · `BRD-EL-SOO-Home` | contenido + anclas del home | | Páginas generales (Buzón, Frentes, Esta semana, Agenda, Semanal, Logros) | su propio `.html` | editas su contenido; **el menú lo pone el kit**, no lo toques | | **Boletín Semanal** | `EQ-EL-Equipo/BOL-EL-BoletinSemanal--v01.html` | cada semana: crear el nuevo boletín fechado + **repuntar el link** en `MENU_DIA_EL` (o usar un nombre estable y sobrescribir) | **Tableros con capa DATA** (Experimentos = `const exps`/`LINES`; Factoría = `const PUBS`/`CASAS`; etc.): editar **solo el bloque DATA** marcado en el `