docs(roadmap): v3.1 review pass — futurism amendment + Wave 13 + corrections
Comprehensive review of the v3.0 cross-repo UX roadmap. The diff grows
the doc from 370 to 591 lines (+60%); core structure preserved.
──────────────────────────────────────────────────────────────────
Bug fixes & corrections (no regressions)
──────────────────────────────────────────────────────────────────
- Product-web inventory: 11 → 15+ (was missing mindlyst-native/web,
talk2obsidian/web, productivity-web, sidecar-dashboard-web,
mac-tooling/dashboard, devops-tools/dashboard/web,
agent-monitoring-fx, local-llms/dashboard, efforise/client,
admin-web, tracker-web). New total: **20 web apps**.
- Net-new package count: 16 → 26 (the brand-* row was 3 packages,
not 1; plus Wave 13 adds 8 more)
- §4 heading: "five waves" → "six waves" (Wave 13 added)
- §10 metrics targets refreshed to reflect 20-app scope
- §11 hygiene bumped to v3.1 with full changelog
──────────────────────────────────────────────────────────────────
Major content amendments — "futurism layer"
──────────────────────────────────────────────────────────────────
NEW §3.4 On-device & privacy-first AI (8 surfaces)
• WebLLM / transformers.js for client-side LLM inference
• Privacy-mode toggle + GPC header honouring
• Explainable refusal, cost transparency, confidence transparency
• Provenance trails, telemetry opt-out, "Why did the AI say this?"
debug overlay
NEW §3.5 Real-time CRDT collaboration (6 patterns)
• Yjs canonical + Automerge adapter
• Liveblocks-grade presence (PresenceAvatars, TypingIndicator,
LiveCursor)
• Co-edit indicators, conflict-free sync, selective sharing,
comment threads anchored to selections
NEW §3.6 Spatial / visionOS-inspired surfaces (8 primitives)
• SurfaceFloat (multi-stop shadow + backdrop-blur)
• Parallax (scroll-driven), Spotlight (cursor-follow),
Magnetic buttons, TiltGallery, glass-with-depth modals,
MeshBackground (OKLCH ambient gradients)
NEW §3.7 Performance & sustainability budgets
• LCP ≤ 2.5s p75 · INP ≤ 200ms p75 · CLS ≤ 0.1 p75
• First-page JS ≤ 100 KB gzip · CO₂ ≤ 0.5g/view
• content-visibility, RSC for static surfaces, Suspense islands,
route prefetch, AVIF/WebP negotiation
NEW §3.8 Anti-patterns we will NEVER ship (10 entries)
• Dark patterns, auto-playing media, prefers-reduced-motion
ignored, <div onClick>, hard-coded colours, layout-shifting
skeletons, polling instead of streaming, notification spam,
modal stack > 2, generic 'Something went wrong'.
NEW Wave 13 — Futurism layer (~9 pw, 7 packages):
13.1 @bytelyst/on-device-ai (WebLLM + transformers.js)
13.2 @bytelyst/collab (Yjs CRDT + Automerge adapter)
13.3 ai-ui@0.5 trust surfaces (CostMeter, ConfidenceTag,
RefusalCard, ProvenanceDrawer,
DebugOverlay, PrivacyBadge)
13.4 motion@0.2 spatial (Parallax, Spotlight, Magnetic,
MeshBackground, TiltGallery)
13.5 @bytelyst/generative-theme ("describe your brand" → tokens)
13.6 @bytelyst/customizable-workspace
13.7 @bytelyst/media-ui (ImageGenStream, AudioWaveform,
PdfPreview, VideoPlayer)
NEW §6.1 RSC vs client guidance — per-package table for
React Server Component safety (design-tokens, ui-stateless,
legal-ui, settings-ui rail are RSC-safe; everything else is
client-only or hybrid)
NEW §6.2 Web Components interop — Lit-wrapped <bl-button>,
<bl-card> etc. for non-React consumers (efforise/Vite,
talk2obsidian/Obsidian plugin, local-llms dashboard)
NEW §6.3 Adjacent token packages — email-tokens (MJML),
audio-tokens (notification sounds), motion-tokens
(Lottie/Rive interpolation curves)
NEW §9.1 Demo-first showcase list — 8 customer-magnet prototypes
to lead with: MeshBackground+Spotlight landing, on-device-AI
chat, CostMeter+ConfidenceTag dashboard, CRDT multi-user
notes, ThemeStudio, customizable workspace, ImageGenStream+
AudioWaveform, Shift-click DebugOverlay.
──────────────────────────────────────────────────────────────────
Risks + metrics expanded
──────────────────────────────────────────────────────────────────
- 6 new risk-matrix rows (WebGPU fragmentation, CRDT memory
bloat, generative-theme palette accessibility, media-ui
bundle weight, workspace layout collisions, WebLLM
model-download UX)
- §10 success metrics: added Core Web Vital p75 targets per
product, INP/LCP/CLS gates, privacy-mode + CRDT + on-device
AI + CostMeter adoption KPIs, dark-pattern audit, Web
Components export, create-app scaffolding
──────────────────────────────────────────────────────────────────
Coverage now complete
──────────────────────────────────────────────────────────────────
Per-product matrix expanded from 11 to 20 web apps and gains a
"Wave 13 futurism hook" column. Pilots:
• notes/web + tracker-web → CRDT multi-user editing
• localmemgpt/web + local-llms dashboard → on-device AI
• mindlyst/web → ImageGenStream + CRDT memory canvas
• flowmonk + peakpulse + mac-tooling → customizable workspace
• jarvisjr + trails + sidecar + devops-tools + agent-monitoring
→ CostMeter + ConfidenceTag + ProvenanceDrawer
• clock/web → MeshBackground + Spotlight landing hero
Mirror in copilot/learning_ai_uxui_web follows in a paired commit.
This commit is contained in:
saravanakumardb1
parent
a94d9b211c
commit
850b9d35a2
@ -1,17 +1,20 @@
|
||||
# ByteLyst Cross-Repo UX Roadmap — v3 (Future-Proof, Elegant, Rich)
|
||||
|
||||
> **Status:** Draft for review · 2026-05-27
|
||||
> **Version:** v3.1 — 2026-05-27 (review + futurism amendment)
|
||||
> **Status:** Draft for review
|
||||
> **Owners:** ByteLyst Platform UI guild
|
||||
> **Predecessor:** `learning_ai_uxui_web/docs/ROADMAP_2026.md` v2.5 (Waves 1–7)
|
||||
> **Scope:** Every product web app under `/Users/sd9235/code/mygh/` + the common platform packages that should serve them.
|
||||
|
||||
This document **extends** the v2 roadmap rather than replacing it. v2 covered shared packages in isolation; v3 walks the ecosystem floor — looks at what each of the **11 product webs** actually ships today, finds the duplication, and prescribes the next 5 platform waves (Wave 8 – Wave 12) plus a per-product upgrade matrix.
|
||||
This document **extends** the v2 roadmap rather than replacing it. v2 covered shared packages in isolation; v3 walks the ecosystem floor — looks at what each of the **15+ product webs** actually ships today, finds the duplication, and prescribes the next **6 platform waves (Wave 8 – Wave 13)** plus a per-product upgrade matrix, with explicit futurism amendments in v3.1 (§3.4 – §3.8, §6.1 – §6.3, Wave 13).
|
||||
|
||||
> **What changed in v3.1 vs v3.0:** corrected product-web inventory (15+ not 11), corrected new-package count (18 in original waves + 8 added below = **26 net-new**), added five subsections on the frontier UX themes that attract today's most discerning customers (on-device AI, real-time CRDT collab, cost & confidence transparency, spatial UI, anti-patterns), introduced Wave 13 (futurism layer), expanded the per-product matrix to all 15+ webs, and added a dedicated **RSC vs client / Web Components interop** section.
|
||||
|
||||
---
|
||||
|
||||
## 1. Where we are (May 2026)
|
||||
|
||||
### Shared `@bytelyst/*` packages currently published or in-tree (72)
|
||||
### Shared `@bytelyst/*` packages currently published or in-tree (~73)
|
||||
|
||||
| Tier | Packages |
|
||||
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
@ -42,7 +45,33 @@ This document **extends** the v2 roadmap rather than replacing it. v2 covered sh
|
||||
|
||||
## 2. Cross-repo audit — what every product web actually ships
|
||||
|
||||
Sampled from `/Users/sd9235/code/mygh/{learning_ai_clock,learning_ai_notes,learning_ai_flowmonk,learning_ai_jarvis_jr,learning_ai_fastgap,learning_ai_local_memory_gpt,learning_voice_ai_agent,learning_ai_trails,learning_ai_dev_intelli}/web` plus the upcoming reference in `/copilot/learning_ai_uxui_web`.
|
||||
Sampled from every Next.js / Vite web in the workspace — v3.1 audit is **comprehensive** (was sample-based in v3.0):
|
||||
|
||||
```
|
||||
/copilot/learning_ai_uxui_web — reference showcase (Next.js 16)
|
||||
/learning_ai_clock/web — ChronoMind
|
||||
/learning_ai_notes/web — NoteLett
|
||||
/learning_ai_flowmonk/web — FlowMonk
|
||||
/learning_ai_jarvis_jr/web — JarvisJr
|
||||
/learning_ai_fastgap/web — NomGap (FastGap)
|
||||
/learning_ai_trails/web — ActionTrail
|
||||
/learning_ai_local_memory_gpt/web — LocalMemGPT
|
||||
/learning_ai_dev_intelli/web — DevIntelli
|
||||
/learning_voice_ai_agent/user-dashboard-web — LysnrAI user portal
|
||||
/learning_multimodal_memory_agents/mindlyst-native/web — MindLyst web shell
|
||||
/learning_ai_talk2obsidian/web — Talk2Obsidian
|
||||
/learning_ai_productivity_web — Productivity hub
|
||||
/learning_sidecar_setup/sidecar_dashboard_web — Sidecar dashboard
|
||||
/learning_ai_mac_tooling/dashboard — Mac Tooling dashboard
|
||||
/learning_ai_devops_tools/dashboard/web — DevOps tools dashboard
|
||||
/learning_agent_monitoring_fx/apps/web — Agent Monitoring FX
|
||||
/learning_ai_local_llms/dashboard — Local LLMs dashboard
|
||||
/learning_ai_efforise (Vite) — EffoRise client
|
||||
/learning_ai_common_plat/dashboards/admin-web — Platform admin
|
||||
/learning_ai_common_plat/dashboards/tracker-web — Issue tracker + roadmap
|
||||
```
|
||||
|
||||
**Total: 20 web apps** (12 product webs, 2 platform dashboards, 6 internal/utility dashboards). v3.1 widens scope from the 11 highlighted in v3.0.
|
||||
|
||||
### 2.1 `@bytelyst/*` package consumption matrix
|
||||
|
||||
@ -148,11 +177,95 @@ The v2 roadmap nailed accessibility, motion, density, AI-native primitives. v3 l
|
||||
| **Voice-first composer** (push-to-talk in `PromptComposer`) | `ai-ui/PromptComposer.voiceInput` (Wave 8 v0.6) — uses `@bytelyst/speech-ui` |
|
||||
| **Citations everywhere** (any text can attach `CitationChip`s) | `ui/Markdown` (Wave 5c) renders inline citations |
|
||||
|
||||
### 3.4 On-device & privacy-first AI — the trust differentiator
|
||||
|
||||
The single biggest 2026 customer-acquisition wedge: **"your data never leaves your device unless you ask it to."** Surfaces:
|
||||
|
||||
| Pattern | What it is | Where it lands |
|
||||
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| **WebLLM / transformers.js** in browser | Run 1B–8B-parameter models client-side via WebGPU; falls back to cloud if hardware can't | New `@bytelyst/on-device-ai` package (Wave 11) with `useOnDeviceModel()` hook + capability detection |
|
||||
| **"Privacy mode" toggle** | App-wide switch that routes every AI call to local model when capable; disables telemetry beacons | `@bytelyst/ai-ui/PrivacyBadge` chrome + `usePrivacyMode()` (Wave 11) |
|
||||
| **Explainable refusal** | When AI refuses, show _why_ (policy excerpt + appeal link), never a generic "I can't help" | `ai-ui/RefusalCard` (Wave 9 v0.5) |
|
||||
| **Cost transparency** | Inline per-turn cost ($ + tokens + provider), running session total | `ai-ui/CostMeter` (Wave 9 v0.5) — opt-in via `showCost` prop on `ChatStream` |
|
||||
| **Confidence transparency** | "Model is 73% confident; 2 of 3 sources agree" — surfaced on every AI response | `ai-ui/ConfidenceTag` (Wave 9 v0.5) |
|
||||
| **Provenance trails** | Every AI artefact carries a verifiable hash chain back to the prompt + model + tools used | `ai-ui/ProvenanceDrawer` (Wave 11) — backed by `@bytelyst/event-store` |
|
||||
| **Telemetry opt-out UX** | Single switch in `@bytelyst/settings-ui` honours **Global Privacy Control** (`Sec-GPC` header) | Wave 10 |
|
||||
| **"Why did the AI say this?"** debug overlay | Shift-click any AI response → opens inspector with system prompt, retrieved context, tool calls, raw stream | `ai-ui/DebugOverlay` (Wave 11) — dev/staging only by default |
|
||||
|
||||
### 3.5 Real-time collaboration — the Linear/Figma-tier patterns
|
||||
|
||||
Today's premium products are multiplayer. Wave 11 ships the primitives.
|
||||
|
||||
| Pattern | Tech | Surface |
|
||||
| ----------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| **CRDT document collab** | **Yjs** as the canonical CRDT; **Automerge** swap supported via adapter | `@bytelyst/collab` (new in Wave 11) — `useSharedDoc()`, `<CollabProvider>` |
|
||||
| **Liveblocks-grade presence** | SSE/WebSocket transport via `@bytelyst/fastify-sse` | `@bytelyst/realtime-ui` — `<PresenceAvatars>`, `<TypingIndicator>`, `<LiveCursor>` (already in Wave 11) |
|
||||
| **Co-edit indicators** | Show "Sara is editing line 14" with avatar | `rich-text/CollabSelection` extension (Wave 11) |
|
||||
| **Conflict-free sync** | Offline edits replay on reconnect; never lose work | `@bytelyst/sync` + Yjs binding |
|
||||
| **Selective sharing** | Share-by-link UI with permission tier (view / comment / edit) | `@bytelyst/settings-ui/SharePanel` (Wave 10) |
|
||||
| **Comment threads** | Anchored to a selection range; resolves + reopens | `@bytelyst/collab/CommentThread` (Wave 11) |
|
||||
|
||||
### 3.6 Spatial / immersive — visionOS-inspired surfaces
|
||||
|
||||
Inspired by Apple Vision Pro, Arc Browser, Linear's depth layering. Subtle but unmistakably "next-gen".
|
||||
|
||||
| Pattern | Implementation |
|
||||
| -------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
|
||||
| **Floating cards with depth** | Multi-stop shadows + 1px translucent border + `backdrop-filter: blur()`; never used for body text | `ui/SurfaceFloat` variant (Wave 9) |
|
||||
| **Parallax on scroll** | `motion/Parallax` driven by scroll-driven animations — zero-JS where supported | New primitive in `@bytelyst/motion@0.2.0` (Wave 9 hygiene) |
|
||||
| **3D model embed** | `<model-viewer>` web component, lazy-loaded behind `@bytelyst/file-ui` | Wave 11 |
|
||||
| **Cursor-aware spotlight** | Radial gradient that follows pointer, hugely effective on landing pages | `motion/Spotlight` (Wave 9) |
|
||||
| **Magnetic buttons** | Pointer-attracted CTAs, Arc-browser-style | `motion/Magnetic` (Wave 9) — already in v2 sketch |
|
||||
| **Tilt cards** | Already shipped in `motion@0.1.0` — add `<TiltGallery>` for product grids | Wave 9 |
|
||||
| **Glass-with-depth modal** | Backdrop blur + tinted vignette + spring entrance | `ui/Modal v2` (Wave 9) |
|
||||
| **Ambient gradient backgrounds** | OKLCH mesh that subtly shifts based on time-of-day or active route | `motion/MeshBackground` (Wave 9) |
|
||||
|
||||
### 3.7 Performance & sustainability — the Core Web Vital budgets
|
||||
|
||||
Every customer ultimately judges UX by speed. We publish per-route budgets and CI gates them.
|
||||
|
||||
| Metric | Target | How we measure |
|
||||
| --------------------------------------- | ------------- | --------------------------------------------- |
|
||||
| **LCP** (Largest Contentful Paint) | ≤ 2.5s p75 | Lighthouse + RUM via `@bytelyst/telemetry-ui` |
|
||||
| **INP** (Interaction to Next Paint) | ≤ 200ms p75 | `web-vitals@4` in `@bytelyst/telemetry-ui` |
|
||||
| **CLS** (Cumulative Layout Shift) | ≤ 0.1 p75 | Lighthouse |
|
||||
| **First-page JS** | ≤ 100 KB gzip | `size-limit` per-route budget |
|
||||
| **Image weight per page** | ≤ 500 KB | Lighthouse |
|
||||
| **CO₂ per page-view** | ≤ 0.5 g | `co2.js` in CI (Wave 12.6) |
|
||||
| **Time-to-Interactive on Moto G Power** | ≤ 4.5s | Lighthouse mobile profile in LHCI |
|
||||
|
||||
**Patterns we adopt to hit them:**
|
||||
|
||||
- `content-visibility: auto` on long lists & off-screen panels (10× INP improvement)
|
||||
- React 19 **Server Components** for static surfaces (legal-ui, settings-ui rails, marketing pages)
|
||||
- **Streaming SSR with progressive hydration** for AI surfaces
|
||||
- **Suspense islands** — never block a page on a slow chart
|
||||
- **Route prefetch** on hover/pointer-near (Next.js native + `@bytelyst/dashboard-shell` Sidebar opt-in)
|
||||
- **Image components** with AVIF + WebP negotiation, blurhash placeholders
|
||||
- **Cache-aware Cmd-K** — palette uses IndexedDB for the catalog so it opens instantly offline
|
||||
|
||||
### 3.8 Anti-patterns — what ByteLyst products will **never** ship
|
||||
|
||||
A short register, codified in `docs/design-system/ANTIPATTERNS.md` (created by Wave 9), and CI-checkable where possible.
|
||||
|
||||
| Forbidden pattern | Why | Detection |
|
||||
| --------------------------------------------------------------------------------------------------- | ------------------------- | ------------------------------------------------------------------ |
|
||||
| **Dark patterns** (cookie banner with hidden "Reject all", pre-checked opt-in, fake urgency timers) | EU EAA + ethics | Manual review + cookie-banner lint in `@bytelyst/legal-ui` |
|
||||
| **Auto-playing audio/video** without explicit user gesture | Accessibility + bandwidth | ESLint rule on `<video autoPlay>` / `<audio autoPlay>` |
|
||||
| **`prefers-reduced-motion` ignored** | Accessibility | `@bytelyst/motion` enforces; `bl-*` keyframes audited |
|
||||
| **`<div onClick>`** instead of `<button>` | Keyboard + screen reader | ESLint `jsx-a11y/click-events-have-key-events` |
|
||||
| **Hard-coded colours / sizes** outside `design-tokens` | Theming + density | Stylelint rule blocks hex / `px` outside tokens |
|
||||
| **Layout-shifting skeletons** | CLS | Skeletons must match content dimensions; visual-regression catches |
|
||||
| **Polling instead of streaming** for AI surfaces | UX latency + cost | Code review |
|
||||
| **Notification spam** | Trust | `@bytelyst/notifications-ui` rate-limits per kind |
|
||||
| **Modal stacks > 2 deep** | UX hygiene | `ui/Modal v2` enforces a single backdrop stack |
|
||||
| **Generic "Something went wrong"** errors | Trust | `@bytelyst/errors` taxonomy mandates a typed cause + user action |
|
||||
|
||||
---
|
||||
|
||||
## 4. The next five waves
|
||||
## 4. The next six waves
|
||||
|
||||
Builds on v2.5. All effort in person-weeks (pw).
|
||||
Builds on v2.5. All effort in person-weeks (pw). Totals: **Wave 8 = 4 pw · Wave 9 = 10 pw · Wave 10 = 9 pw · Wave 11 = 8 pw · Wave 12 = 7 pw · Wave 13 = 9 pw → ~47 pw across 28 weeks** (was ~38 pw / 26 weeks in v3.0).
|
||||
|
||||
### **Wave 8 — Unblock & rollout** _(weeks 16–18, ~4 pw)_
|
||||
|
||||
@ -243,23 +356,51 @@ Builds on v2.5. All effort in person-weeks (pw).
|
||||
|
||||
---
|
||||
|
||||
### **Wave 13 — Futurism layer** _(weeks 25–28, ~9 pw)_ — the customer-magnet wave
|
||||
|
||||
> **Theme:** the surfaces that make new prospects say _"how did you build this?"_ on first sight. Everything in §3.4 – §3.6 lands here, packaged.
|
||||
|
||||
| # | Package / surface | Notes | Effort |
|
||||
| ---- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
|
||||
| 13.1 | **`@bytelyst/on-device-ai@0.1.0`** | WebLLM + transformers.js runners, capability detection (`useDeviceCapability()`), `useOnDeviceModel(modelId)` hook, `<ModelDownloadCard>` UI. Falls back to cloud when device can't run. Peer-deps `@mlc-ai/web-llm` + `@xenova/transformers`. | 2 pw |
|
||||
| 13.2 | **`@bytelyst/collab@0.1.0`** | Yjs-based CRDT layer with Automerge adapter. Exports: `<CollabProvider>`, `useSharedDoc(roomId)`, `useAwareness()`, `<CommentThread>`. Transport via `@bytelyst/fastify-sse`. | 2 pw |
|
||||
| 13.3 | **`ai-ui@0.5.0` trust surfaces** | `<CostMeter>`, `<ConfidenceTag>`, `<RefusalCard>`, `<ProvenanceDrawer>`, `<DebugOverlay>`, `<PrivacyBadge>`. Closes §3.4 amendments. | 1.5 pw |
|
||||
| 13.4 | **`motion@0.2.0` spatial** | `<Parallax>` (scroll-driven), `<Spotlight>` (cursor-follow), `<Magnetic>`, `<MeshBackground>`, `<TiltGallery>`. Pure CSS where possible; springs where not. | 1 pw |
|
||||
| 13.5 | **`@bytelyst/generative-theme@0.1.0`** | "Describe your brand" → LLM generates a Tier-2 token override file. Bonus surface: `<ThemeStudio>` interactive playground in showcase. | 1 pw |
|
||||
| 13.6 | **`@bytelyst/customizable-workspace@0.1.0`** | User-rearrangeable dashboards (drag-resize tiles), saved views per route, layout persistence to platform-service. Built on `@dnd-kit/sortable` + react-grid-layout fork. | 1 pw |
|
||||
| 13.7 | **`@bytelyst/media-ui@0.1.0`** | `<ImageGenStream>` (live image generation with progress), `<AudioWaveform>` (canvas-rendered + transcript scrubber), `<PdfPreview>` (pdf.js-backed lazy viewer), `<VideoPlayer>` (chapters + captions). | 1.5 pw |
|
||||
|
||||
**DoD:** ambient assistant lives in notes/web with on-device-AI fallback · one product ships CRDT-backed multi-user editing (likely notes or mindlyst) · `<ThemeStudio>` published in showcase · customisable workspace pilot in 1 product.
|
||||
|
||||
---
|
||||
|
||||
## 5. Per-product upgrade matrix
|
||||
|
||||
For each product web, the **3 highest-value adoptions** in the next two waves. (Each row is independent and can be tackled by the product team.)
|
||||
|
||||
| Product | Adoption #1 (Wave 8) | Adoption #2 (Wave 9) | Adoption #3 (Wave 10) |
|
||||
| ------------------------------ | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
|
||||
| **clock/web** | Replace `framer-motion` with `@bytelyst/motion` Reveal + NumberFlow on `/landing` + `/history` | Adopt `@bytelyst/charts` for time-distribution donut; deprecate inline recharts | `@bytelyst/dashboard-shell@0.3.0` + `command-palette` |
|
||||
| **notes/web** | Swap bespoke `AgentTimeline` → `@bytelyst/ai-ui/AgentTimeline`; swap bespoke `Skeleton` → `ui/skeleton` | Adopt `@bytelyst/rich-text` for the note body editor; ship `@bytelyst/timeline` for `MemoryTimeline` | Wire `@bytelyst/assistant-shell` (Wave 11) — first product to host the ambient assistant |
|
||||
| **flowmonk/web** | Adopt `@bytelyst/motion` + Cmd-K palette commands for task switching | `@bytelyst/data-table` for the schedule view; `@bytelyst/data-viz/Heatmap` for streaks | `@bytelyst/onboarding-ui` checklist on first task creation |
|
||||
| **jarvisjr/web** | Adopt `@bytelyst/motion` on landing; swap recharts → `@bytelyst/charts` | Adopt `@bytelyst/data-table` for sessions list | `@bytelyst/billing-ui` upgrade modal + plan card |
|
||||
| **fastgap/web** | Replace bespoke `Skeleton` + swap sonner → `@bytelyst/ui/toast` | `@bytelyst/charts` for weight-trend line + fasting heatmap; `@bytelyst/data-viz/KpiCard` for streaks | `@bytelyst/onboarding-ui` for first-fast tour |
|
||||
| **localmemgpt/web** | Adopt `@bytelyst/motion` Reveal on chat threads; Cmd-K palette | Adopt `@bytelyst/ai-ui/PromptComposer` + `ChatStream` for the chat UI (currently bespoke) | `@bytelyst/file-ui/FileDrop` for memory imports |
|
||||
| **voice / user-dashboard-web** | Adopt `@bytelyst/ui` (replaces bespoke `radix-ui` direct usage) | Swap recharts → `@bytelyst/charts`; adopt `@bytelyst/data-table` for transcript browser | `@bytelyst/billing-ui` + `@bytelyst/settings-ui` |
|
||||
| **trails/web** | Adopt `@bytelyst/motion` + `@bytelyst/notifications-ui` for alert banner | Adopt `@bytelyst/data-table` for the action log; `@bytelyst/timeline` for revert history | `@bytelyst/settings-ui` |
|
||||
| **dev-intelli/web** | Adopt Cmd-K palette + `@bytelyst/motion` | `@bytelyst/data-table` for diagnostics list; `@bytelyst/ai-ui/CodeDiff` (Wave 9) for proposed fixes | `@bytelyst/assistant-shell` (Wave 11) — second host |
|
||||
| **nomgap/web** | Swap bespoke modals → `@bytelyst/ui/modal v2` | `@bytelyst/charts` for weight + meal heatmap; `@bytelyst/onboarding-ui` for first-day setup | `@bytelyst/billing-ui` |
|
||||
| **peakpulse/web** | Adopt `@bytelyst/motion` + Cmd-K | `@bytelyst/charts` for session pulse; `@bytelyst/data-viz/KpiCard` for streaks | `@bytelyst/settings-ui` |
|
||||
| Product | Adoption #1 (Wave 8) | Adoption #2 (Wave 9) | Adoption #3 (Wave 10) | Wave 13 futurism hook |
|
||||
| ---------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------- | --------------------------------------------------------------------- |
|
||||
| **clock/web** (ChronoMind) | Replace `framer-motion` with `@bytelyst/motion` Reveal + NumberFlow | `@bytelyst/charts` for time-distribution donut; deprecate inline recharts | `dashboard-shell@0.3.0` + `command-palette` | `<Spotlight>` + `<MeshBackground>` on landing |
|
||||
| **notes/web** (NoteLett) | Swap bespoke `AgentTimeline` → `ai-ui/AgentTimeline`; bespoke `Skeleton` → `ui/skeleton` | `@bytelyst/rich-text` for note body; `@bytelyst/timeline` for `MemoryTimeline` | `assistant-shell` (Wave 11) | **Pilot `@bytelyst/collab`** — CRDT-backed multi-user notes |
|
||||
| **flowmonk/web** | `@bytelyst/motion` + Cmd-K for task switching | `data-table` for schedule view; `data-viz/Heatmap` for streaks | `onboarding-ui` checklist on first task | `customizable-workspace` dashboard tiles |
|
||||
| **jarvisjr/web** | `@bytelyst/motion` on landing; swap recharts → `@bytelyst/charts` | `data-table` for sessions list | `billing-ui` upgrade modal | `<CostMeter>` on every AI turn; `<ProvenanceDrawer>` |
|
||||
| **fastgap/web** (NomGap) | Replace bespoke `Skeleton`; swap sonner → `ui/toast` | `@bytelyst/charts` for weight-trend; `data-viz/KpiCard` for streaks | `onboarding-ui` for first-fast tour | `media-ui/AudioWaveform` for guided fasting audio |
|
||||
| **localmemgpt/web** | `@bytelyst/motion` on chat threads; Cmd-K | Adopt `ai-ui/PromptComposer` + `ChatStream` (currently bespoke) | `file-ui/FileDrop` for memory imports | **Pilot `@bytelyst/on-device-ai`** — fully-local model option |
|
||||
| **voice / user-dashboard-web** (LysnrAI) | Adopt `@bytelyst/ui` (replaces direct `radix-ui` usage) | Swap recharts → `@bytelyst/charts`; `data-table` for transcripts | `billing-ui` + `settings-ui` | `media-ui/AudioWaveform` + `<ConfidenceTag>` on transcripts |
|
||||
| **trails/web** (ActionTrail) | `@bytelyst/motion` + `notifications-ui` for alert banner | `data-table` for action log; `timeline` for revert history | `settings-ui` | `<ProvenanceDrawer>` over every action |
|
||||
| **dev-intelli/web** | Cmd-K palette + `@bytelyst/motion` | `data-table` for diagnostics; `ai-ui/CodeDiff` for proposed fixes | `assistant-shell` (Wave 11) | `<DebugOverlay>` + `<RefusalCard>` |
|
||||
| **peakpulse/web** | `@bytelyst/motion` + Cmd-K | `@bytelyst/charts`; `data-viz/KpiCard` for streaks | `settings-ui` | `customizable-workspace` for personal dashboards |
|
||||
| **mindlyst/web** (multimodal-memory) | Adopt `@bytelyst/ui` + tokens; `motion` Reveal | `rich-text` + `media-ui/PdfPreview` for documents | `assistant-shell` + `timeline` | **Pilot `<ImageGenStream>` + `collab`** — multi-user memory canvas |
|
||||
| **talk2obsidian/web** | Adopt tokens + Cmd-K | `rich-text` aligned to Obsidian markdown subset | `settings-ui` + `file-ui` | `on-device-ai` for fully-local mode |
|
||||
| **productivity-web** | Tokens + Cmd-K + `motion` | `data-table` + `charts` for productivity metrics | `dashboard-shell@0.3.0` | `customizable-workspace` |
|
||||
| **sidecar-dashboard-web** | Tokens + `dashboard-shell@0.3.0` | `data-table` + `data-viz/RealtimeChart` | `notifications-ui` for incident stream | `<DebugOverlay>` + `<ProvenanceDrawer>` |
|
||||
| **mac-tooling / dashboard** | Tokens + `dashboard-shell@0.3.0` | `data-table` + `command-palette` | `settings-ui` | `customizable-workspace` |
|
||||
| **devops-tools / dashboard** | Tokens + Cmd-K | `data-table` + `data-viz/RealtimeChart` + `motion` | `dashboard-shell@0.3.0` + `settings-ui` | `<DebugOverlay>` + `<ProvenanceDrawer>` |
|
||||
| **agent-monitoring-fx** | Tokens + `dashboard-shell@0.3.0` | `data-table` + `data-viz` + `motion` | `notifications-ui` + `settings-ui` | `<CostMeter>` + `<ConfidenceTag>` for agent runs |
|
||||
| **local-llms / dashboard** | Tokens + Cmd-K | `data-table` + `motion` | `settings-ui` | **First-class `on-device-ai` host** — it _is_ the local-LLM dashboard |
|
||||
| **efforise / client** (Vite) | Tokens (Vite SDK adapter — see §6.1) + Cmd-K | `data-table` + `motion` | `settings-ui` | `customizable-workspace` |
|
||||
| **admin-web** (platform) | Already on `dashboard-shell`; add Cmd-K | `data-table` + `charts` | `settings-ui` + `billing-ui` | `<DebugOverlay>` + `<ProvenanceDrawer>` |
|
||||
| **tracker-web** (platform) | Already on `dashboard-shell`; add Cmd-K | `data-table` + `rich-text` for issue bodies | `notifications-ui` + `settings-ui` | **Pilot `@bytelyst/collab`** — multi-user issue editing |
|
||||
|
||||
> **Cross-cutting:** every product adopts `@bytelyst/telemetry-ui` (Wave 10.6) in the same PR that swaps in `dashboard-shell@0.3.0` — they share the topbar slot.
|
||||
|
||||
@ -267,29 +408,74 @@ For each product web, the **3 highest-value adoptions** in the next two waves. (
|
||||
|
||||
## 6. New common-platform packages proposed in v3
|
||||
|
||||
Summary table — 16 net-new packages over Waves 8 – 12:
|
||||
Summary table — **26 net-new packages** over Waves 8 – 13 (was 16 in v3.0; v3.1 amendment adds 8):
|
||||
|
||||
| Package | Wave | Pkg size budget (gzip) | Purpose |
|
||||
| -------------------------------- | --------- | ---------------------- | ------------------------------------------- |
|
||||
| `@bytelyst/charts` | 9 | 25 KB | Token-themed recharts wrapper + Donut/Gauge |
|
||||
| `@bytelyst/rich-text` | 9 | 40 KB | Tiptap wrapper + slash menu + mentions |
|
||||
| `@bytelyst/data-table` | 9 | 25 KB | TanStack Table + Virtual |
|
||||
| `@bytelyst/onboarding-ui` | 10 | 10 KB | Checklist + tour + callouts |
|
||||
| `@bytelyst/billing-ui` | 10 | 15 KB | Plan/upgrade/usage/invoice |
|
||||
| `@bytelyst/settings-ui` | 10 | 10 KB | Settings layout + sections |
|
||||
| `@bytelyst/legal-ui` | 10 | 6 KB | Privacy/terms/cookie banner |
|
||||
| `@bytelyst/telemetry-ui` | 10 | 4 KB | Auto-event tracking |
|
||||
| `@bytelyst/timeline` | 10 | 8 KB | Generic vertical event timeline |
|
||||
| `@bytelyst/brand-flowmonk` (× 3) | 10 | 1 KB each | Token overrides |
|
||||
| `@bytelyst/adaptive-ui` | 11 | 18 KB | SchemaForm + StreamUI |
|
||||
| `@bytelyst/assistant-shell` | 11 | 8 KB | Ambient ⌘J assistant |
|
||||
| `@bytelyst/speech-ui` | 11 | 6 KB | Voice input + dictation |
|
||||
| `@bytelyst/file-ui` | 11 | 12 KB | FileDrop + FileBrowser + ImageCrop |
|
||||
| `@bytelyst/realtime-ui` | 11 | 8 KB | Presence + typing + cursors |
|
||||
| `@bytelyst/i18n` | 12 | 12 KB | react-intl wrapper |
|
||||
| `@bytelyst/icons` | 3.x bonus | 0 KB (peer) | Lucide / Phosphor / Tabler swap provider |
|
||||
| Package | Wave | Pkg size budget (gzip) | Purpose |
|
||||
| ----------------------------------- | ---------- | ---------------------- | ----------------------------------------------------------------------------------- |
|
||||
| `@bytelyst/charts` | 9 | 25 KB | Token-themed recharts wrapper + Donut/Gauge |
|
||||
| `@bytelyst/rich-text` | 9 | 40 KB | Tiptap wrapper + slash menu + mentions |
|
||||
| `@bytelyst/data-table` | 9 | 25 KB | TanStack Table + Virtual |
|
||||
| `@bytelyst/onboarding-ui` | 10 | 10 KB | Checklist + tour + callouts |
|
||||
| `@bytelyst/billing-ui` | 10 | 15 KB | Plan/upgrade/usage/invoice |
|
||||
| `@bytelyst/settings-ui` | 10 | 10 KB | Settings layout + sections |
|
||||
| `@bytelyst/legal-ui` | 10 | 6 KB | Privacy/terms/cookie banner |
|
||||
| `@bytelyst/telemetry-ui` | 10 | 4 KB | Auto-event tracking |
|
||||
| `@bytelyst/timeline` | 10 | 8 KB | Generic vertical event timeline |
|
||||
| `@bytelyst/brand-flowmonk` (× 3) | 10 | 1 KB each | Token overrides |
|
||||
| `@bytelyst/adaptive-ui` | 11 | 18 KB | SchemaForm + StreamUI |
|
||||
| `@bytelyst/assistant-shell` | 11 | 8 KB | Ambient ⌘J assistant |
|
||||
| `@bytelyst/speech-ui` | 11 | 6 KB | Voice input + dictation |
|
||||
| `@bytelyst/file-ui` | 11 | 12 KB | FileDrop + FileBrowser + ImageCrop |
|
||||
| `@bytelyst/realtime-ui` | 11 | 8 KB | Presence + typing + cursors |
|
||||
| `@bytelyst/i18n` | 12 | 12 KB | react-intl wrapper |
|
||||
| `@bytelyst/icons` | 3.x bonus | 0 KB (peer) | Lucide / Phosphor / Tabler swap provider |
|
||||
| `@bytelyst/on-device-ai` | 13 | 18 KB + WebLLM peer | WebLLM + transformers.js runners |
|
||||
| `@bytelyst/collab` | 13 | 30 KB + Yjs peer | CRDT layer (Yjs canonical, Automerge adapter) |
|
||||
| `@bytelyst/generative-theme` | 13 | 8 KB | "Describe your brand" → token override |
|
||||
| `@bytelyst/customizable-workspace` | 13 | 14 KB | Drag-resize tiles + saved views |
|
||||
| `@bytelyst/media-ui` | 13 | 20 KB + pdf.js peer | ImageGenStream + AudioWaveform + PdfPreview + VideoPlayer |
|
||||
| `@bytelyst/ai-ui` (0.5.0 surfaces) | 13 | +6 KB | CostMeter, ConfidenceTag, RefusalCard, ProvenanceDrawer, DebugOverlay, PrivacyBadge |
|
||||
| `@bytelyst/motion` (0.2.0 surfaces) | 13 | +4 KB | Parallax, Spotlight, Magnetic, MeshBackground, TiltGallery |
|
||||
| `@bytelyst/email-tokens` | 10 hygiene | 0 KB (build-time) | Same tokens, emitted to MJML/inline-CSS for transactional email |
|
||||
|
||||
Total net-new package bytes if a product consumes **every** package: ~210 KB gzip. Per-product realistic adoption (5-6 of these): ~80 KB gzip — within the 100 KB JS budget per page after gzip.
|
||||
Total net-new package bytes if a product consumes **every** package: ~330 KB gzip. Per-product realistic adoption (6-8 of these): ~80-110 KB gzip — still within the 100 KB JS budget for _first-page_ loads (the larger packages — collab, on-device-ai, media-ui — lazy-load behind dynamic imports).
|
||||
|
||||
### 6.1 RSC vs client — explicit guidance per package
|
||||
|
||||
React 19 + Next.js 16 give us **React Server Components**. Knowing which package is RSC-safe vs client-only is the difference between a 100 KB and a 300 KB first paint.
|
||||
|
||||
| Package | RSC-safe? | Notes |
|
||||
| ----------------------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------ |
|
||||
| `design-tokens` | ✅ yes (build-time CSS) | Pure CSS variable emission |
|
||||
| `ui` (most primitives) | ✅ yes for stateless (Button, Heading, Card, Surface) | Interactive variants are `'use client'` |
|
||||
| `legal-ui`, `settings-ui` rail | ✅ yes | Static-shape components |
|
||||
| `motion` | ❌ client | DOM refs + RAF |
|
||||
| `ai-ui`, `command-palette`, `data-viz`, `notifications-ui` | ❌ client | All stateful |
|
||||
| `charts`, `data-table`, `rich-text`, `media-ui` | ❌ client | Recharts/TanStack/Tiptap/canvas |
|
||||
| `on-device-ai`, `collab`, `realtime-ui`, `assistant-shell`, `speech-ui` | ❌ client | Browser APIs |
|
||||
| `adaptive-ui/StreamUI` | 🟡 hybrid | Server emits initial tree; client hydrates streaming patches |
|
||||
|
||||
**Rule:** every package whose entry point is RSC-safe ships a `"react-server"` export condition in `package.json` that re-exports only the safe surface. Client-only files carry `'use client'` at the top.
|
||||
|
||||
### 6.2 Non-React consumers — Web Components interop
|
||||
|
||||
Products shipping non-React shells (Vite vanilla, Astro, native web-views in Tauri/Capacitor, Obsidian plugins) need a path. Three layers:
|
||||
|
||||
| Layer | What it is | Status |
|
||||
| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
|
||||
| **Tokens** | Pure CSS; works everywhere | ✅ already shipped |
|
||||
| **`@bytelyst/ui/web-components`** | Lit-wrapped Button/Card/Toast/Skeleton/EmptyState as Custom Elements (`<bl-button>`, `<bl-card>`, ...). React + framework-agnostic. | New — Wave 9 hygiene (0.5 pw) |
|
||||
| **`@bytelyst/icons/web-components`** | Icon registry as `<bl-icon name="sparkles"/>` Custom Element | New — Wave 9 hygiene (0.25 pw) |
|
||||
|
||||
This unlocks `learning_ai_efforise` (Vite), `learning_ai_talk2obsidian` (Obsidian plugin), `learning_ai_local_llms/dashboard` (Vite), and any future native shell without a React port.
|
||||
|
||||
### 6.3 Adjacent token packages — brand consistency outside the web
|
||||
|
||||
| Package | Notes |
|
||||
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **`@bytelyst/email-tokens`** | Same Tier-1/2 tokens, emitted as MJML-compatible inline-CSS for transactional emails (welcome, billing, password-reset). Brand stays consistent across web + email. |
|
||||
| **`@bytelyst/audio-tokens`** | Notification sound palette (`success.wav`, `mention.wav`, `error.wav`) — same brand intent. Future: `@bytelyst/notifications-ui` plays them based on `data-kind`. |
|
||||
| **`@bytelyst/motion-tokens`** | Spring presets exported as Lottie/Rive interpolation curves for designer hand-off. |
|
||||
|
||||
---
|
||||
|
||||
@ -300,19 +486,29 @@ Total net-new package bytes if a product consumes **every** package: ~210 KB gzi
|
||||
- A new state library — products keep TanStack Query / Zustand / Redux as they choose.
|
||||
- A new test runner — Vitest + Playwright is the stack.
|
||||
- Native iOS/Android UI work — `swift-platform-sdk` / `kotlin-platform-sdk` continue to share **tokens only**.
|
||||
- **A bespoke CRDT** — we adopt Yjs (with Automerge adapter), never re-invent.
|
||||
- **A bespoke on-device AI runtime** — we adopt WebLLM / transformers.js, never re-invent.
|
||||
- **A new CSS-in-JS runtime** — CSS variables + token-driven utility classes; zero-runtime is the rule.
|
||||
- **Generic "agent framework"** UI — the AI surface stays narrowly scoped to the patterns in §3.3 + §3.4. No "build your own agent" UI in v3.
|
||||
|
||||
---
|
||||
|
||||
## 8. Risks & mitigations (v3 specific)
|
||||
|
||||
| Risk | Likelihood | Impact | Mitigation |
|
||||
| ----------------------------------------------------------- | ---------- | ------ | -------------------------------------------------------------------------------------------------------- |
|
||||
| Publish-workflow regression blocks Wave 8 | Low | High | Manual `npm publish` fallback script already in `scripts/publish-outdated-gitea-packages.sh` |
|
||||
| Recharts API drift (peer-dep mismatch across products) | Med | Med | Pin to `^2.15`; `@bytelyst/charts` has type-only re-exports so a major bump fails build, not silent |
|
||||
| Tiptap StarterKit extension churn (v2 → v3) | Med | Low | Lock to a known-good range in `@bytelyst/rich-text/package.json` |
|
||||
| StreamUI security (LLM emits arbitrary components) | Med | High | Strict allow-list of renderable component names; never `dangerouslySetInnerHTML`; schema-validated props |
|
||||
| Browser support for View Transitions cross-doc | Low | Med | Mandatory crossfade fallback already in `@bytelyst/motion` |
|
||||
| Voice / passkey UX in corp networks (proxy strips WebAuthn) | Low | Low | Document; provide username/password fallback |
|
||||
| Risk | Likelihood | Impact | Mitigation |
|
||||
| ------------------------------------------------------------------- | ---------- | ------ | ----------------------------------------------------------------------------------------------------------- |
|
||||
| Publish-workflow regression blocks Wave 8 | Low | High | Manual `npm publish` fallback script already in `scripts/publish-outdated-gitea-packages.sh` |
|
||||
| Recharts API drift (peer-dep mismatch across products) | Med | Med | Pin to `^2.15`; `@bytelyst/charts` has type-only re-exports so a major bump fails build, not silent |
|
||||
| Tiptap StarterKit extension churn (v2 → v3) | Med | Low | Lock to a known-good range in `@bytelyst/rich-text/package.json` |
|
||||
| StreamUI security (LLM emits arbitrary components) | Med | High | Strict allow-list of renderable component names; never `dangerouslySetInnerHTML`; schema-validated props |
|
||||
| Browser support for View Transitions cross-doc | Low | Med | Mandatory crossfade fallback already in `@bytelyst/motion` |
|
||||
| Voice / passkey UX in corp networks (proxy strips WebAuthn) | Low | Low | Document; provide username/password fallback |
|
||||
| **On-device AI hardware fragmentation** (some users have no WebGPU) | High | Med | `useDeviceCapability()` gates UI; transparent fallback to cloud with `<PrivacyBadge>` reflecting it |
|
||||
| **CRDT memory bloat** on long-lived documents | Med | Med | Yjs garbage-collection enabled; snapshot + replay archive in `@bytelyst/event-store` |
|
||||
| **Generative-theme producing inaccessible palettes** | Med | High | LLM output passes contrast-checker + token-schema validator before persistence; AAA contrast lock available |
|
||||
| **`@bytelyst/media-ui` bundle weight** (pdf.js is ~500 KB) | High | Med | Lazy-loaded dynamic imports only; never in first-page JS |
|
||||
| **Customisable workspace layout collisions** across density modes | Med | Low | Layout persistence keyed by `[productId, userId, density]` triple |
|
||||
| **WebLLM model download UX** (1–4 GB on first run) | High | High | `<ModelDownloadCard>` shows progress + bandwidth est; defaults to smallest viable model; opt-in only |
|
||||
|
||||
---
|
||||
|
||||
@ -333,37 +529,63 @@ Total net-new package bytes if a product consumes **every** package: ~210 KB gzi
|
||||
| **11 (Sat)** | `<Skeleton>` + `<EmptyState>` + `<SearchInput>` added to `@bytelyst/ui@0.2.0` | UI v0.2.0 published |
|
||||
| **12 (Sun)** | Migrate every product `Skeleton.tsx` → `@bytelyst/ui/skeleton`; codemod commit per repo | -1,400 LOC across product webs |
|
||||
| **13 (Mon)** | **`@bytelyst/dashboard-shell@0.3.0`** scaffolding kicks off | RFC drafted, scaffold landed |
|
||||
| **14 (Tue)** | Wave 9 retro + Wave 10 kickoff | Roadmap doc bumped to v3.1 |
|
||||
| **14 (Tue)** | Wave 9 retro + Wave 10 kickoff | Roadmap doc bumped to v3.2 |
|
||||
|
||||
### 9.1 Demo-first — showcase prototypes to build alongside the packages
|
||||
|
||||
Every package ships with at least one _aspirational_ showcase demo that doubles as customer-facing marketing. The eight to lead with (in priority order):
|
||||
|
||||
1. **`<MeshBackground>` + `<Spotlight>` landing hero** — the first thing a prospect sees.
|
||||
2. **On-device-AI chat with `<PrivacyBadge>`** — "this conversation never left your laptop".
|
||||
3. **`<CostMeter>` + `<ConfidenceTag>` AI dashboard** — every other AI product hides cost; we show it.
|
||||
4. **CRDT multi-user notes** — open the same demo URL in two windows, watch it sync.
|
||||
5. **`<ThemeStudio>` — generative branding playground** — prospects can brand the showcase to their company in 30 seconds.
|
||||
6. **`<CustomizableWorkspace>` dashboard** — drag tiles, save views, reload — it remembers.
|
||||
7. **`<ImageGenStream>` + `<AudioWaveform>`** — multimodal AI surfaces in one screen.
|
||||
8. **`<DebugOverlay>` (Shift-click on any AI response)** — transparency demo for technical evaluators.
|
||||
|
||||
---
|
||||
|
||||
## 10. Success metrics — end of v3 (Wave 12, ~26 weeks)
|
||||
## 10. Success metrics — end of v3 (Wave 13, ~28 weeks)
|
||||
|
||||
| Metric | v2.5 baseline | v3 target |
|
||||
| -------------------------------------------- | ---------------------- | ------------------------------- |
|
||||
| `@bytelyst/*` packages published | 66 | **82** |
|
||||
| Products on at least one Wave 4/5/7 package | 0 | **11** |
|
||||
| Products on `dashboard-shell@0.3.0` | 0 | **8** |
|
||||
| Products on `charts` | 0 | **6** |
|
||||
| Products on `command-palette` | 0 | **11** |
|
||||
| Bespoke `Skeleton.tsx` files in product webs | ~7 | **0** |
|
||||
| Bespoke `*Modal.tsx` files | 10+ | **≤ 3** (product-specific only) |
|
||||
| Showcase demos | 90+ | **150+** |
|
||||
| Playwright tests | 94+ | **250+** |
|
||||
| Lighthouse Perf (showcase + each product) | unmeasured per product | **≥ 90 across the board** |
|
||||
| WCAG 2.2 AA pass rate | partial | **100%** |
|
||||
| RTL visual-test pass rate | none | **100%** |
|
||||
| Locales | 1 (en) | **4** |
|
||||
| Brand-layer packages | 0 | **3** |
|
||||
| EU EAA conformance statement | none | **published** |
|
||||
| Metric | v2.5 baseline | v3.1 target |
|
||||
| --------------------------------------------------- | ---------------------- | ---------------------------------------------------- |
|
||||
| `@bytelyst/*` packages published | 66 | **92** (66 + 26 net-new) |
|
||||
| Web apps on at least one new UI package | 0 / 20 | **20 / 20** |
|
||||
| Web apps on `dashboard-shell@0.3.0` | 0 | **12** |
|
||||
| Web apps on `@bytelyst/charts` | 0 | **8** |
|
||||
| Web apps on `@bytelyst/command-palette` | 0 | **20** (universal) |
|
||||
| Web apps with at least one Wave 13 futurism surface | 0 | **10+** |
|
||||
| Bespoke `Skeleton.tsx` files in product webs | ~7 | **0** |
|
||||
| Bespoke `*Modal.tsx` files | 10+ | **≤ 3** (product-specific only) |
|
||||
| Showcase demos | 90+ | **180+** |
|
||||
| Playwright tests | 94+ | **300+** |
|
||||
| Lighthouse Perf (showcase + each product) | unmeasured per product | **≥ 90 across the board** |
|
||||
| **INP p75** (each product) | unmeasured | **≤ 200ms** |
|
||||
| **LCP p75** (each product) | unmeasured | **≤ 2.5s** |
|
||||
| **CLS p75** (each product) | unmeasured | **≤ 0.1** |
|
||||
| First-page JS budget per route | unenforced | **≤ 100 KB gzip, CI-gated** |
|
||||
| WCAG 2.2 AA pass rate | partial | **100%** |
|
||||
| RTL visual-test pass rate | none | **100%** |
|
||||
| Locales | 1 (en) | **4** (en/es/ar/ja) |
|
||||
| Brand-layer packages | 0 | **3** |
|
||||
| EU EAA conformance statement | none | **published** |
|
||||
| **Privacy-mode toggle** present | 0 products | **all AI-touching products** |
|
||||
| **CRDT-backed multi-user editing** | 0 products | **≥ 2 products (notes, tracker-web)** |
|
||||
| **On-device AI option** | 0 products | **≥ 2 products (localmemgpt, local-llms dashboard)** |
|
||||
| **`<CostMeter>` visible in AI surfaces** | 0 products | **all AI-touching products** |
|
||||
| Cookie/consent UX dark-pattern audit pass | not run | **100%** |
|
||||
| Web Components export available | no | **`@bytelyst/ui/web-components` published** |
|
||||
| **`pnpm create @bytelyst/app`** scaffolding | none | **functional + documented** |
|
||||
|
||||
---
|
||||
|
||||
## 11. Document hygiene
|
||||
|
||||
- **v3 (this doc):** new cross-repo UX roadmap; builds on v2.5 (showcase repo). Adds Waves 8–12, 16 net-new packages, per-product upgrade matrix, and modern-web-platform adoption guidance.
|
||||
- Mirror at `learning_ai_uxui_web/docs/ROADMAP_2026_V3_CROSS_REPO.md` after this commit lands.
|
||||
- Future versions bump as waves close (`v3.1`, `v3.2`, etc.).
|
||||
- **v3.0** (initial commit): new cross-repo UX roadmap; built on v2.5 (showcase repo). Added Waves 8–12, 16 net-new packages, per-product upgrade matrix, and modern-web-platform adoption guidance.
|
||||
- **v3.1** (this revision): comprehensive review pass. Fixed under-counts (15+ webs not 11; 26 net-new packages not 16). Added five major futurism subsections (§3.4 on-device & privacy-first AI, §3.5 real-time CRDT collab, §3.6 spatial/visionOS surfaces, §3.7 Core Web Vital budgets, §3.8 anti-patterns). Introduced **Wave 13** (futurism layer) with 7 new packages: `on-device-ai`, `collab`, `generative-theme`, `customizable-workspace`, `media-ui`, plus `ai-ui@0.5` trust surfaces and `motion@0.2` spatial primitives. Added §6.1 RSC vs client guidance, §6.2 Web Components interop for non-React consumers, §6.3 adjacent token packages (email, audio, motion-tokens). Expanded per-product matrix to all 20 web apps including platform dashboards. Added 6 new risk-matrix rows and §9.1 demo-first list of 8 customer-facing prototypes.
|
||||
- Mirror at `learning_ai_uxui_web/docs/ROADMAP_2026_V3_CROSS_REPO.md` after each commit.
|
||||
- Future versions bump as waves close (`v3.2`, `v3.3`, ...).
|
||||
|
||||
**Owner:** ByteLyst Platform UI guild
|
||||
**Discussion:** `tracker-web` (issue tag: `roadmap-2026`, milestone: `v3`)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user