diff --git a/src/uix/eidos/THEMING.md b/src/uix/eidos/THEMING.md index d515c9fda..955840620 100644 --- a/src/uix/eidos/THEMING.md +++ b/src/uix/eidos/THEMING.md @@ -2336,6 +2336,33 @@ arco + estático; la continuidad solo existía en Apple, atada a plataforma). optar a `data-shape='continuous'` en las superficies rectangulares es una pasada separada, con cuidado de no squircle-izar avatares/píldoras). +## 31. Estructura (espacio · densidad · escala) — el espacio como ritmo (2026-06-05) + +Los sistemas **estructurales** (a diferencia de los expresivos) son **solo-estado** — el +escenario, no el suceso. Guía canónica: `STRUCTURE_ENGINE_RFC.md`. Tres ejes ortogonales: + +- **Densidad** — `[data-density='compact'|'comfortable'|'spacious']` reescala el layout (`space` + + `control-height`) sin tocar la legibilidad del texto. 3 niveles × 2 ejes (config-driven). +- **Scaling** — `[data-scaling='90'..'110']` es el zoom global (incluye tipografía; paridad + Radix), compone con densidad. +- **Espacio (el ritmo)** — `--space-{key}` se emite como + `calc(value · var(--density-space-scale) · var(--scaling))`. El **value** ya no es solo px + plano: `buildSpaceScale(seed)` (puro) + `ActiveEidos.applySpacing(seed)` / `clearSpacing()` + lo regeneran desde **una unidad base** (`base × N`, modular) y opcionalmente **fluido** + (`growth > 1` → cada paso `clamp()` que respira entre 480 y 1280px, reusando el `fluidClamp` + del type scale). **Preserva** la composición density × scaling. Hermano de + `applyTypeScale` — opt-in sobre la escala authored (`STATIC_SPACE` intacta). Exportado de + `$uix/eidos`. Demo: `/temas/estructura`. + +**Doctrina**: el espacio es **ritmo, no una tabla de píxeles**. Modular + fluido + compuesto con +densidad × zoom desde una semilla. El campo entero shippea una escala plana estática; el espacio +fluido (que casi nadie hace para el espacio, solo para el tipo) + los tres ejes integrados son el +diferencial. Estructural = solo-estado (sin dos momentos — el modelo eventful es de los canales +expresivos). + +**Pendiente** (futuro): `applyTheme(seed)` — una semilla que componga tipo + espacio (ritmo +compartido), capstone del cuarteto→quinteto de builders. + --- **Última revisión**: 2026-06-05. Si algo en este doc no coincide con diff --git a/web/routes/temas/estructura/+page.svelte b/web/routes/temas/estructura/+page.svelte new file mode 100644 index 000000000..256424c30 --- /dev/null +++ b/web/routes/temas/estructura/+page.svelte @@ -0,0 +1,264 @@ + + +Estructura · Eidos + +
+
+
+

Eidos · sistemas estructurales

+ +
+

El espacio es ritmo

+

+ Todos shippean una escala de espacio plana y estática. Aquí el espacio es un + ritmo derivado de una unidad base, fluido (respira con el + viewport) y compuesto con densidad y zoom — tres ejes desde + una semilla. Toca los cuatro mandos y mira el mismo panel recomponerse. +

+
+ + +
+
+

El taller

+

+ Cada hueco y relleno del panel es var(--space-*). Densidad aprieta el + layout, zoom escala todo (incluido el texto), la unidad base reentona el ritmo y el fluido + lo hace respirar. Estira la ventana con fluido activo para verlo crecer. +

+
+ +
+ +
+
+ N +
+ Nora Vega + nora@activething.com +
+ Pro +
+
+ {#each [['Notificaciones', 'Activadas'], ['Idioma', 'Español'], ['Tema', 'Sistema'], ['Privacidad', '2 activas']] as [k, v]} +
+ {k} + {v} +
+ {/each} +
+
+ + +
+
+ + +
+
+ densidad +
+ {#each DENSITIES as d} + + {/each} +
+
+
+ zoom (scaling) +
+ {#each SCALINGS as s} + + {/each} +
+
+
+ +
+
+ +
+ --space-4: {scale.steps.find((s) => s.key === '4')?.value} · density · scaling +
+
+
+ + +
+
+

El ritmo

+

+ La escalera completa a base {base}px{fluid ? ` · fluido ×${growth.toFixed(2)}` : ''}. + Cada peldaño = base × N (modular). {fluid + ? 'Con fluido, cada barra crece de su mínimo a su máximo entre 480 y 1280px.' + : 'Sube el fluido para que respiren.'} +

+
+
+ {#each scale.steps as step} + {#if step.minPx > 0} +
+ space-{step.key} + + + {#if fluid && step.maxPx > step.minPx} + + {/if} + + {step.minPx}{fluid ? `–${step.maxPx}` : ''}px +
+ {/if} + {/each} +
+
+ + +
+ +