Maps every realtime component/surface to the shared design system. Sources of truth:
00-shared/02 (Design Tokens), 00-shared/03 (Component Library),
00-shared/04 (Design System Mapping), 00-shared/08 (Interaction & Motion),
00-shared/09 (Accessibility Baseline), 00-shared/10 (QA Baseline).
| Real-time concept | Token / primitive | Notes |
|---|
| connected | color.success (status) | from 00-shared/02 status palette |
| connecting / reconnecting | color.warning + pulse | pulse duration from 00-shared/08 motion tokens |
| offline / error-auth | color.danger | banner uses surface.danger-container for background |
| idle (neutral) | color.neutral | dot only, no label |
| status dot | 8 dp circle, radius.round | from shared shape tokens |
| banner | AppBanner/AppOfflineBanner primitive (00-shared/03) | module composes AppConnectionBanner (07 §2) |
| row flash | m-fast (≤ 200 ms) ease-out highlight | from 00-shared/08 |
| toast | AppSnackbar | from 00-shared/03 |
| live-region announcements | a11y baseline §3 | 00-shared/09 |
| ws component (07) | Built on (shared) | Extends with |
|---|
AppRealtimeStatusDot | AppBadge/dot primitive + tooltip | state→color/motion mapping table |
AppConnectionBanner | AppBanner/AppOfflineBanner | retry action, live-region text |
AppLiveList | AppList + AppSkeleton + RefreshIndicator | event merge logic, row flash, bounded refetch |
AppNotificationToast | AppSnackbar | priority filter, dedup window |
AppEventLog | AppDataTable + AppEmptyState | monospace stream, filter, pause |
AppBottomSheet (status sheet) | AppBottomSheet | state chip + last-event row |
RealtimeClient | — (non-visual) | socket lifecycle, handshake, rooms |
All surfaces map the five realtime states to the shared state vocabulary
(idle / loading / success / empty / error — 00-shared/03 legend):
| Realtime state | Shared vocabulary mapping |
|---|
| idle | idle |
| connecting | loading (indeterminate, non-blocking) |
| connected | success |
| reconnecting | loading (indeterminate) + warning tint |
| offline | error (offline subtype per 00-shared/10 QA baseline) |
| error-auth | error (auth subtype — distinct copy, no destructive tone) |
- Debug log:
font.mono (00-shared/02), text.sm, tabular numerals for timestamps.
- Banner/toast:
text.md title + text.sm body per shared type scale.
| Interaction | Motion |
|---|
| banner in/out | m-fast slide from top (16 dp) |
| dot pulse | 1 s ease-in-out loop, only in connecting/reconnecting |
| row flash | 200 ms ease-out highlight |
| toast | m-fast fade+slide, 5 s dwell |
| status sheet | m-base slide-up, content m-fast fade |
- Status never color-only: dot always paired with label/tooltip/live-region text.
- Banner content in live region; retry button reachable by keyboard (tab order after app bar).
- Toast auto-dismiss must not destroy meaning: bell badge persists as the durable signal.
- Debug view: monospace rows readable with text-scale up to 200%; filter field labeled.
- Reduced-motion: pulse and row-flash degrade to static states (00-shared/09).
- Realtime surfaces follow the shared QA baseline (offline/error matrix) plus module
cases in 14_QA_Checklist.md.