svelte-kit-vice/src/uix/eidos/STRUCTURE_ENGINE_RFC.md

# RFC — Sistemas estructurales (espacio · densidad · escala) de Eidos

> Hermano de `COLOR_ENGINE_RFC.md`, `TYPOGRAPHY_ENGINE_RFC.md`, `DEPTH_ENGINE_RFC.md` y
> `SHAPE_ENGINE_RFC.md`. Lleva los sistemas **estructurales** a reference-grade. A diferencia de
> los canales **expresivos** (los 8 del libro), lo estructural es **solo-estado** — el escenario,
> no el suceso. Por eso la novedad aquí **no es eventful**: es **ritmo**, **fluidez** y
> **composición de ejes**, bajo la jaula abierta.

## 0. Tesis

> **El espacio no es una tabla de búsqueda de píxeles arbitrarios; es un _ritmo_ — derivado de
> una unidad base, _fluido_ (respira con el viewport) y _compuesto_ con densidad y zoom desde una
> semilla mínima.**

Todos shippean una escala de espacio **plana** (`4 · 8 · 12 · 16 · 24…`), **arbitraria**,
**estática** y desligada de la tipografía. Eidos ya tiene los otros dos ejes estructurales
—**densidad** (compacidad) y **scaling** (zoom)— por encima de la media; falta que el **espacio
mismo** sea ritmo: modular, fluido y con builder runtime, como ya hizo la tipografía.

## 1. El estudio — cómo lo hacen los referentes y dónde topan

| Framework | Espacio | Límite |
|---|---|---|
| **Tailwind** | escala fija (`0.25rem` × N) | plana, arbitraria, **estática** |
| **Material** | grid `8dp` | múltiplos de 8, estática, sin fluidez |
| **Radix / Chakra / Mantine** | tokens de space | escala plana estática; densidad (si hay) = preset global |
| **Bootstrap / Ant / Carbon / Fluent** | escala de spacers | igual — plana + estática |
| **Utopia.fyi** | fluid space (técnica) | una **calculadora externa**, no un sistema de tokens integrado con densidad + zoom |

**Límite común**: el espacio es una **escala plana de px**, **estática** (no respira con el
viewport), **arbitraria** (no deriva de nada), y **desconectada** de la densidad / el zoom como un
sistema. Utopia demostró el fluid space pero como hoja de cálculo, no como motor de tokens.

## 2. Dónde está Eidos hoy (fuerte en 2 de 3 ejes)

- **Densidad** — 3 niveles (`compact · comfortable · spacious`) × **2 ejes** (`spaceScale` +
  `controlScale`). Aprieta el layout sin tocar la legibilidad del texto. ✓ (por encima de la media)
- **Scaling** — zoom global `90–110` que escala los px **incluida la tipografía** (paridad Radix),
  componiendo con densidad. ✓
- **Layout** — contenedores + padding + breakpoints + aspect-ratios. ✓
- **Composición** — `--space-{key}` se emite como `calc(value · var(--density-space-scale) ·
  var(--scaling))`: densidad × zoom ya componen. ✓
- **PERO el espacio EN SÍ** (`STATIC_SPACE`) es px **plano y arbitrario** (base 4, medios-pasos a
  mano), **estático** (no respira) y **sin builder** — a diferencia del tipo, que tiene
  `buildTypeScale` (modular + fluido) + `applyTypeScale` (runtime). Es el **eje rezagado**.

## 3. El modelo novel — el espacio como ritmo

1. **Modular** — cada paso = unidad base × N (un ladder coherente), no px sueltos.
2. **Fluido** — `clamp()`: el espacio **respira con el viewport** (como el tipo fluido — casi
   ningún framework lo hace para el espacio). Reusa el mismo `fluidClamp` del type scale.
3. **Tres ejes ortogonales** — **ritmo** (la escala) × **densidad** (compacidad) × **scaling**
   (zoom), compuestos multiplicativamente. Una semilla mínima los gobierna.
4. **Builder runtime** — `buildSpaceScale(seed)` (puro) + `applySpacing(seed)` (DOM), hermano de
   `applyColorScheme` / `applyTypeScale` / `applyDepth` / `applyShape`. Completa el quinteto.

## 3.bis Estructural = solo-estado (sin dos momentos)

A diferencia de motion / depth / shape, el espacio **no “ocurre”**: es el escenario, no el
suceso. El modelo de **dos momentos** (estado vs evento) pertenece a los canales **expresivos**.
Forzar un “espacio eventful” sería disfraz — la honestidad doctrinal es que aquí la novedad es
**ritmo + fluidez + composición de ejes**, no eventful. (Mismo rigor: no inventar un momento que
no existe.)

## 4. Doctrina — _default fuerte, jaula abierta_

| Pieza | Default fuerte | Puerta abierta |
|---|---|---|
| **escala de espacio** | `STATIC_SPACE` authored (estable, curada) | `buildSpaceScale` / `applySpacing` = alternativa **modular + fluida opt-in** (misma postura que `applyTypeScale` sobre la escala authored) |
| **densidad** | 3 niveles × 2 ejes | config-driven + runtime (`[data-density]`) |
| **scaling** | `90–110`, factores universales | runtime (`[data-scaling]`); compone con densidad |
| **composición** | `calc(value · density · scaling)` | los primitivos `--space-*` siempre accesibles; el builder **preserva** la composición |
| **sistema entero** | tema canónico | `applySpacing(seed)` runtime |

## 5. Contrato de tokens

```
--space-{key}   value · var(--density-space-scale) · var(--scaling)   (escala existente — se mantiene)
```

El builder **reescribe el `value`** (bloque gestionado) por uno modular/fluido, **preservando** el
`calc(… · density · scaling)` para que densidad y zoom sigan componiendo. Cero renombrado → cero
rotura.

## 6. Fases

1. **Builder de espacio** — `buildSpaceScale(seed)` (puro: unidad base × ladder, fluido vía
   `fluidClamp`) + `ActiveEidos.applySpacing` / `clearSpacing` (bloque gestionado que preserva
   `· density · scaling`) + export + test. Opt-in; `STATIC_SPACE` intacto.
2. **Showcase + docs** — `/temas/estructura` (densidad × scaling × espacio fluido en vivo) +
   THEMING §estructura + esta RFC.
3. ⏸️ (futuro) **`applyTheme(seed)`** — una semilla que compone tipo + espacio (ritmo compartido).

## 7. Composición con lo existente

- **`fluidClamp`** (del type scale) → el espacio fluido (no se reinventa).
- **`calc(value · density · scaling)`** → se preserva (densidad + zoom siguen componiendo).
- **`buildTypeScale`** → el patrón exacto que `buildSpaceScale` refleja (semilla → ladder fluido).
- **Box/Flex/Grid/Stack/Container** → consumen `--space-*`; no se tocan.

## 8. Doctrina (paralela a color / tipografía / depth / shape)

- **Escala authored = canon estable**; el builder = alternativa matemática **opt-in** (igual que
  tipografía). El theme retunea, el builder recompone.
- **Densidad y scaling = ejes ortogonales** al ritmo; los tres componen.
- **Jaula abierta**: `--space-*` crudo siempre a un paso.

## 9. Fuera de alcance

- **Baseline grid rígido** (vertical rhythm pixel-perfect): el ritmo modular + fluido da cadencia
  sin imponer una rejilla rígida que pelee con el contenido real.
- **Reinventar el layout**: `Box · Flex · Grid · Stack · Container · AutoGrid` ya cubren la
  composición; aquí elevamos el **espacio**, no las primitivas de layout.