# Shell cuadrático común de XpaceOS / XpaceOS four-band shell (FLT-101337) **Regla: toda página nueva de xpaceos.com (= admira.store) usa el shell cuadrático.** Ninguna página trae su propia cabecera ni su propia navegación. Es lo mismo que ya tienen admira.app (`galaxy-shell`) y Pixeria (`shell-cuadratico`). Estado: shell compartido publicado; tiradores de tamaño añadidos el 3-oct-2026; paneles superpuestos y siempre cerrados al cargar desde el 3-oct-2026 (`v.03.10.2026.r1`). ## Qué es La interfaz de cuatro bandas del gemelo (`admira-xp/index.html`), ahora en todas las páginas: - **Barra superior** (`#topBar`, 46 px, el mismo degradado y borde cian del gemelo): a la izquierda **☰ Opciones** + marca **XpaceOS** (enlace al inicio) + la sección discreta de la página (`/ ayuda`); a la derecha **▤ Avanzado** y **⌘ Experto**. Mismos glifos y clases que el gemelo: `.quad-icon`, `data-quad-toggle="left|right"`, `#pfOptions`, `#pfExpert`. - **☰ Opciones** (`nav.quad-menu.quad-left`, panel izquierdo): Inicio, Gemelo digital, Ayuda, Comandos CLI y los enlaces generales de la página (lo que lleva a otra página o a otro sitio). Al pie, el sello del release si la página lo declara. - **▤ Avanzado** (`nav.quad-menu.quad-right`, panel derecho): las acciones de trabajo de la página y los atajos a sus secciones (`#…`). - **⌘ Experto** (`section.quad-menu.quad-bottom`, abajo): la consola. `/help`, `/limpiar`, `/gemelo [orden]` y los verbos propios de la página; los verbos del gemelo se ejecutan en el gemelo (ver abajo). Los paneles son independientes (pueden estar abiertos a la vez) y **entran cerrados en cada página**: el estado abierto no se guarda ni se restaura (la clave antigua `xpaceos_shell_panels_v1` se borra al arrancar); solo se recuerda su tamaño (`xpaceos_shell_size_v1:`). Esc cierra el panel que tiene el foco. ### Principio: el contenido no se mueve (Carlos, 3-oct-2026) > «El cuerpo central del sitio (contenido) no se desplaza al abrir las barras opcionales, ni verticales ni la horizontal inferior». ☰ Opciones, ▤ Avanzado y ⌘ Experto **se superponen** al contenido en todos los anchos (no hay modo acoplado). Abrirlos o cerrarlos no cambia la posición, el ancho ni el alto del cuerpo de la página: el shell no aplica `padding`, `margin`, `width` ni `height` al contenido según el estado de los paneles, y las páginas tampoco. `--xs-left`, `--xs-right` y `--xs-bottom` siguen existiendo, pero **solo para elementos flotantes** (los laterales se detienen sobre ⌘ con `bottom: var(--xs-bottom)`; una barra pegajosa puede quedar sobre ⌘, como la de `altadis/datos.html`). Igual que Yokup y que el gemelo `admira-xp`. El guardián lo vigila. Sin scroll horizontal en móvil (los paneles viven en una capa fija que recorta su desplazamiento); bajo 420 px la sección se oculta y quedan ☰, XpaceOS, ▤ y ⌘. ## Cómo la adopta una página En el ``, **después de todo el CSS propio**: ```html ``` Opcionalmente, antes del script, `window.XPACE_SHELL = {...}`: | Clave | Uso | |---|---| | `section` | Texto junto a la marca: `'/ ayuda'` o `{es, en}` (también `data-section` / `data-section-en`). | | `options` | Enlaces extra de ☰: `[{href, es, en, newTab?}]`. | | `advanced` | Acciones de ▤: `[{href, es, en}]` o `{id, es, en}` para un botón. | | `verbs` | Verbos propios del CLI: `{id, aliases, es, en, run(args, ctx, lang)}`. Solo valen en esa página. | | `home` | Destino de la marca (por defecto `/`). | | `common` | `false` para quitar los enlaces comunes de Opciones. | | `data-marca="barra"` (atributo del script) | Con marca blanca, viste solo la barra y los paneles; la página conserva su paleta (CMDB). Ver `admira-xp/docs/marca-blanca.md`. | Para conservar los manejadores de lo que ya existe, la página marca los elementos y el shell los **mueve** (no los copia): | Atributo | Efecto | |---|---| | `data-shell-slot="options\|advanced\|expert"` | Mueve ese elemento al panel indicado. `expert` lo pone sobre la consola (p. ej. el log de XpaceScan). | | `data-shell-nav` | Reparte los ``/`