docs(motion): record (b) step-2/3 done + two implementation findings — RFC §D.12

Marks (b) step 2 done (Badge pilot `0a6d112c` + `<Motion>` wrapper `54268717`)
and records the two findings from building them:

- The helper only works on components WITHOUT their own `data-state`. `motionAttrs`
  / `<Motion>` force `data-state="open"`, which would clobber a stateful
  component's own machine (Card selected/idle, checkbox checked). The state domain
  is a separate path (its `motion` would tie to its own transitions, but the
  presets key on open/closed specifically).
- The `data-motion` collision. That attr belongs to reduced-motion: arts/prefs
  projects the `motion` pref (system|allow|reduce) onto `<html data-motion>`, and
  render-css emits `[data-motion='reduce'] …` + the prefers-reduced-motion media
  query. So `<Motion>` emits NO part marker — only the functional attrs. Confirms
  the content domain is reduced-motion-safe for free (the overrides key on
  data-state, which motionAttrs sets).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 54268717b4
commit f2ed308d33

@ -1507,8 +1507,23 @@ eje exige **estrenar el driver `spring`** con un primer preset JS — trabajo ap
directa), NO de si el trigger CSS es `data-state`: el contenido es "siempre mostrado" (un `data-state`
constante), sin máquina que lo conmute. Flash-free al spreadear en markup (attrs en la inserción, `backwards`
fill). `'none'`/undefined → sin attrs (opt-out explícito).
- **Paso 2 (pendiente):** un wrapper `<Motion>` (con `out:` retención → exit en desmontaje, + su morfo) y
cablear el prop `motion` en componentes reales. Loops (contenido infinito) = variante posterior.
- **Paso 2 — ✅ HECHO.** Cableado el prop `motion` en un componente real (piloto `<Badge motion="X">`,
commit `0a6d112c`) + el wrapper `<Motion>` (enter on-mount + exit on-unmount con retención `out:` estilo
`<Cascade.Item>`, + su morfo `scope:['eidos']`, commit `54268717`). Dos vías para el diseñador: el prop en
un componente, o el wrapper para contenido crudo (in/out). Loops (contenido infinito) = variante posterior.
- **Hallazgo — el helper solo sirve en componentes SIN `data-state` propio.** `motionAttrs`/`<Motion>` fuerzan
`data-state="open"` → clobbearían la máquina de estado de un componente que tenga la suya (Card
`selected`/`idle`, checkbox `checked`). La universalidad se parte: **contenido** (sin estado) = el helper;
**estado** (máquina propia) = OTRO camino — su `motion` ataría a SUS transiciones, pero los presets keyean en
`open`/`closed` específicamente, así que un `selected`/`idle` ni dispararía el preset. El state-domain es
trabajo aparte (desbloquea la universalidad para componentes con estado).
- **Hallazgo — colisión `data-motion`.** Ese attr es del sistema de **reduced-motion**:
`arts/prefs/dom-projection.ts` proyecta la pref `motion` (intent `system|allow|reduce` → effective
`allow|reduce`, vía `resolveMotion` + el OS) como `data-motion` en `<html>`; `render-css.ts`
(`renderReducedMotionRules`) emite `[data-motion='reduce'] [data-animation-style][data-state]` + el
`@media (prefers-reduced-motion: reduce)`. Por eso `<Motion>` **NO emite marcador de part** (un
`closest('[data-motion]')` del prefs lo matchearía) — solo los attrs funcionales. **Confirma:** el contenido
es reduced-motion-safe GRATIS (las overrides keyean en `data-state`, que `motionAttrs` ya pone).
- **(c) El guard.** Tipos/lint: un componente con evento-que-posee-la-animación marca el prop como override;
los demás, primario.
- Cierra §6 (routing) en su parte vigente: el enrutado a superficie sigue siendo la idea (el dev nombra, el

Loading…
Cancel
Save

Powered by TurnKey Linux.