diff --git a/src/uix/eidos/DEPTH_ENGINE_RFC.md b/src/uix/eidos/DEPTH_ENGINE_RFC.md index c4a3df94f..3628d873d 100644 --- a/src/uix/eidos/DEPTH_ENGINE_RFC.md +++ b/src/uix/eidos/DEPTH_ENGINE_RFC.md @@ -93,13 +93,18 @@ fondos de componente. Sin renombrar nada existente → **cero rotura de componen ## 6. Fases (la flexibilidad va horneada en cada una) -1. **Plano unificado** — `EidosConfig.depth` + planos canónicos + emisión `--depth-{plane}-*` +1. ✅ **Plano unificado** — `EidosConfig.depth` + planos canónicos + emisión `--depth-{plane}-*` (componen surface/shadow/z) + regla `[data-depth]` (sombra+z) + validación + test + regen. Puertas: set config-driven, mezcla por plano, primitivos intactos, escape a raw. -2. **Mezcla computada mode-adaptive** — sombras OKLCH derivadas de la superficie; light↑sombra / - dark↑tinte+halo. Override literal siempre disponible. -3. **Canal sema `depth`** — `emerge↑ / contact↓` vía el registro abierto de sema; opt-in/opt-out; - degrada en reduced-motion; reglas anulables. Coordinado con dos-momentos de motion. +2. ⏸️ **Mezcla computada mode-adaptive** — diferida: las sombras YA son mode-aware (light slate + sutil / dark negro más opaco), así que es **refinamiento** (sombra OKLCH desde la superficie + + halo en dark), no un hueco. Se retoma como pulido o se funde en el showcase. +3. ✅ **Canal `depth` eventful (momento-evento)** — la dimensión de ELEVACIÓN vive en la *firma*: + `present-rise` (emerge) hace crecer la sombra desde plano → la de reposo del elemento (sube); + `press-squeeze` (contact) la aplana a la superficie (recede). Generic (flush = no-op), + coordinado con posición/escala y con sound+haptic desde **un solo evento**, degradando con + reduced-motion (cap global). Anulable: un tema sobreescribe los keyframes/signatures. Monta + sobre el sistema de `signatures` existente, **no** un sistema paralelo. 4. **Atmósfera** — blur/scrim en config; opt-out por overlay. + builder `applyDepth(seed)`. 5. **Showcase + docs** — `/temas/profundidad` (planos/mezcla/eventful en vivo) + THEMING §depth. diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index d07b8dc42..23b70b7d3 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -4707,6 +4707,7 @@ from { opacity: 0; transform: translateY(8px); + box-shadow: 0 0 0 0 transparent; } } @@ -4717,6 +4718,7 @@ 40% { transform: scale(0.96); filter: brightness(0.96); + box-shadow: 0 0 0 0 transparent; } 100% { transform: scale(1); diff --git a/src/uix/eidos/lib/motion/presets/css.ts b/src/uix/eidos/lib/motion/presets/css.ts index 6b813743e..c851de986 100644 --- a/src/uix/eidos/lib/motion/presets/css.ts +++ b/src/uix/eidos/lib/motion/presets/css.ts @@ -110,10 +110,17 @@ export const BUILTIN_KEYFRAMES: Readonly> = { // (0.92); the outgoing side is opacity-only (see the `fade-through` preset's exit). 'scale-through': { from: { scale: 'var(--motion-scale-through)' }, to: { scale: '1' } }, - // ── Firma perceptiva (momento --event) — migrado 1:1 de events.css ────────── + // ── Firma perceptiva (momento --event) ────────────────────────────────────── // Pulsos por intent (announce / commit-intent), settle de commit, squeeze de - // contact, fade de dismiss, rise de present. Referencian color tokens del - // theme. (NOTA fiel: announce-affirm usa `fulfill-element` como en events.css.) + // contact, fade de dismiss, rise de present. Referencian color tokens del theme. + // + // DEPTH — momento-EVENTO de la profundidad (DEPTH_ENGINE_RFC §3.bis, Fase 3): + // `present-rise` y `press-squeeze` llevan la dimensión de ELEVACIÓN además de la + // posición/escala. La sombra CRECE al emerger (de plano `transparent` → la sombra de + // reposo del elemento: sube de plano) y se APLANA al presionar (recede a la superficie). + // Generic: un elemento flush (sin sombra de reposo) → no-op; uno raised/overlay → la + // elevación anima proporcional a SU plano. Profundidad + motion + sound + haptic salen + // coordinados de un solo evento. (announce-affirm usa `fulfill-element` a propósito.) 'announce-pulse-neutral': { '0%, 100%': { 'box-shadow': '0 0 0 0 transparent' }, '20%': { 'box-shadow': '0 0 0 var(--focus-ring-width) var(--color-neutral-element)' } @@ -137,10 +144,15 @@ export const BUILTIN_KEYFRAMES: Readonly> = { '35%': { 'box-shadow': '0 0 0 3px var(--color-threat-element)' } }, 'dismiss-fade': { to: { opacity: '0', transform: 'translateX(8%)' } }, - 'present-rise': { from: { opacity: '0', transform: 'translateY(8px)' } }, + // Emerge: the shadow grows from flat → the element's resting plane shadow as it rises + // (the depth dimension of the rise). Flat elements interpolate none→none (no-op). + 'present-rise': { + from: { opacity: '0', transform: 'translateY(8px)', 'box-shadow': '0 0 0 0 transparent' } + }, + // Contact: the shadow flattens to the surface at the press peak, then returns (recede). 'press-squeeze': { '0%': { transform: 'scale(1)' }, - '40%': { transform: 'scale(0.96)', filter: 'brightness(0.96)' }, + '40%': { transform: 'scale(0.96)', filter: 'brightness(0.96)', 'box-shadow': '0 0 0 0 transparent' }, '100%': { transform: 'scale(1)' } }, 'commit-settle': {