8768c27f30
- Introduced `ReachabilityState`, `RuntimeHit`, `ExploitabilitySignal`, `ReachabilitySignal`, `SignalEnvelope`, `SignalType`, `TrustSignal`, and `UnknownSymbolSignal` records to define various signal types and their properties. - Implemented JSON serialization attributes for proper data interchange. - Created project files for the new signal contracts library and corresponding test projects. - Added deterministic test fixtures for micro-interaction testing. - Included cryptographic keys for secure operations with cosign.
3.5 KiB
3.5 KiB
UI Micro-Interactions Component Map (MI6)
This document maps StellaOps UI components to their interaction types and motion token usage. Components must use tokens from the catalog (tokens/motion.scss, motion-tokens.ts) rather than bespoke values.
Token Catalog Reference
| Token | CSS Variable | Duration | Use Case |
|---|---|---|---|
| durationXs | --motion-duration-xs | 80ms | Focus rings, instant feedback |
| durationSm | --motion-duration-sm | 140ms | Hover states, button presses |
| durationMd | --motion-duration-md | 200ms | Modal open/close, panel slide |
| durationLg | --motion-duration-lg | 260ms | Page transitions, accordions |
| durationXl | --motion-duration-xl | 320ms | Complex sequences, onboarding |
| easeStandard | --motion-ease-standard | cubic-bezier(0.2,0,0,1) | Default for all transitions |
| easeEntrance | --motion-ease-entrance | cubic-bezier(0.18,0.89,0.32,1) | Elements appearing |
| easeExit | --motion-ease-exit | cubic-bezier(0.36,0,-0.56,-0.56) | Elements leaving |
| easeBounce | --motion-ease-bounce | cubic-bezier(0.34,1.56,0.64,1) | Playful feedback only |
Component Mapping
| Component | Interaction Type | Tokens Used | Reduced-Motion Behavior |
|---|---|---|---|
| Button (primary) | Hover lift, press scale | durationSm, easeStandard, scaleSm | No transform, instant state change |
| Button (secondary) | Hover border, press | durationXs, easeStandard | Instant state change |
| Modal/Dialog | Fade + slide up | durationMd, easeEntrance/Exit, translateMd | Instant show/hide |
| Dropdown/Menu | Fade + scale | durationSm, easeStandard, scaleSm | Instant show/hide |
| Toast/Snackbar | Slide in, auto-dismiss | durationMd, easeEntrance, translateLg | Instant show/hide |
| Accordion | Height expand | durationMd, easeStandard | Instant toggle |
| Tabs | Indicator slide | durationSm, easeStandard | Instant indicator |
| Progress bar | Width fill | durationMd, easeStandard | No animation, instant fill |
| Spinner/Loader | Rotate animation | N/A (CSS keyframe) | Static icon or hidden |
| Skeleton | Shimmer pulse | durationXl, easeStandard | Static skeleton, no shimmer |
| Badge (status) | Scale pop on change | durationXs, easeBounce, scaleSm | No scale, instant |
| Focus ring | Fade in | durationXs, easeStandard | Always visible, no fade |
| Tooltip | Fade + offset | durationSm, easeEntrance, translateSm | Instant show/hide |
| Banner (info) | Slide down | durationMd, easeEntrance, translateMd | Instant show/hide |
| Error state | Shake animation | durationSm, easeStandard | No shake, border only |
Perf Budget Compliance (MI5)
| Metric | Budget | Measurement |
|---|---|---|
| Interaction response | <= 100ms | Time to visual feedback |
| Animation frame (avg) | <= 16ms | Chrome DevTools Performance |
| Animation frame (p95) | <= 50ms | Chrome DevTools Performance |
| Layout shift | <= 0.05 CLS | Lighthouse CI |
| LCP placeholder | Show within 400ms | Lighthouse CI |
Validation Rules
- Lint rule: ESLint/Stylelint blocks non-catalog easing values in
.scssand.tsfiles - Storybook check: All component stories must demonstrate reduced-motion variant
- Playwright check: Snapshot tests run with
--disable-animationsand reduced-motion emulation - CI gate: Perf budget failures block merge
Evidence
- Token catalog:
src/Web/StellaOps.Web/src/styles/tokens/_motion.scss - TypeScript tokens:
src/Web/StellaOps.Web/src/app/styles/motion-tokens.ts - Storybook stories:
src/Web/StellaOps.Web/src/stories/motion-tokens.stories.ts