Three coordinated package changes addressing Wave 1 cross-repo TODOs
from the UI/UX roadmap (learning_ai_uxui_web/docs/ROADMAP_2026.md §10).
═══════════════════════════════════════════════════════════════════════
TODO #2 — @bytelyst/react-auth bump 0.1.8 → 0.2.0
═══════════════════════════════════════════════════════════════════════
- Changes 'workspace:*' to 'workspace:^' for the @bytelyst/api-client
dependency. On pnpm publish this resolves to a caret range (e.g.
^0.1.6) instead of '*', restoring installability for consumers.
(The 0.1.6 tarball was published with a literal 'workspace:*'
string — newer minor bump unblocks the showcase react-auth demo.)
- 21 tests still passing.
═══════════════════════════════════════════════════════════════════════
TODO #3 — @bytelyst/dashboard-shell bump 0.1.7 → 0.2.0
═══════════════════════════════════════════════════════════════════════
- Adds 'routePrefix?: string' prop to DashboardShellProps, SidebarProps,
and TopBarProps. Threads through DashboardShell → Sidebar + TopBar.
- Built-in /profile, /billing, /settings links now use the prefix:
routePrefix="/app" → /app/profile, /app/billing, /app/settings
- Defaults to '' (empty string) — fully back-compat with 0.1.x callers.
- 2 new vitest cases covering both prefixed and default behavior;
43 / 43 tests passing (+2 from 41).
═══════════════════════════════════════════════════════════════════════
TODO #1 — @bytelyst/design-tokens bump 0.1.8 → 0.2.0
═══════════════════════════════════════════════════════════════════════
- Adds a density-aware spacing tier on top of the existing raw
--ml-space-* tier:
--bl-space-scale: 1 (default :root)
--bl-space-1..16: calc(--ml-space-N × --bl-space-scale)
- Emits density selectors at the end of tokens.css:
[data-density="compact"] { --bl-space-scale: 0.875; }
[data-density="comfortable"] { --bl-space-scale: 1; }
[data-density="spacious"] { --bl-space-scale: 1.125; }
- Generator (scripts/generate.ts) emits both tiers automatically; the
auto-generated per-product CSS files (lysnrai, mindlyst, etc.) gain
a single blank-line diff from regeneration — no semantic change.
- 11 / 11 token tests passing.
═══════════════════════════════════════════════════════════════════════
Decision doc — docs/ROADMAP_2026_DECISIONS.md
═══════════════════════════════════════════════════════════════════════
- Records pragmatic defaults for TODO ledger items #9–#13 so
implementation work doesn't block:
#9 Storybook hosting → self-hosted on Gitea Pages (free)
#10 useChat protocol → adopt Vercel AI SDK shape, abstract transport
#11 react-auth fold-in → defer to Wave 7
#12 dashboard-shell merge → defer to Wave 7
#13 mobile-native UI → out of scope (tokens-only sharing)
- Each decision is reversible via RFC.
═══════════════════════════════════════════════════════════════════════
Publish flow
═══════════════════════════════════════════════════════════════════════
These three packages now require a release. The existing publish
workflow (.gitea/workflows/publish-packages.yml) has PACKAGE_FILTER
pinned to @bytelyst/errors and won't pick them up automatically — a
manual workflow_dispatch with a broader filter (or the existing
publish-all-packages.yml on workflow_dispatch) is needed to ship
0.2.0 to the Gitea npm registry.
Refs: learning_ai_uxui_web/docs/ROADMAP_2026.md §10 TODOs #1, #2, #3, #9–#13
6 test files across 4 packages (auth-ui, dashboard-components,
dashboard-shell, react-auth) failed with 'document is not defined'
when run from the monorepo root because the root vitest config uses
environment: 'node'. The package-local configs set happy-dom but are
ignored when vitest is invoked from root.
Fix: Add per-file '// @vitest-environment happy-dom' annotations,
which is the recommended vitest pattern for mixed-environment monorepos.
This ensures tests work regardless of which config is loaded.
Recovers 148 tests across 6 files.
Components:
- DashboardShell — main layout combining sidebar + topbar + content area
- Sidebar — collapsible nav with sections, badges, active state, auto-settings link
- TopBar — user avatar/menu, notifications bell, sign out, custom actions
- ProfilePage — avatar, name/email form, loading/error/success states
- BillingPage — current plan card, status badge, trial info, plan comparison grid
- SettingsPage — section-based layout with empty state
Features:
- NavItem[] or NavSection[] for flat or grouped navigation
- ShellFeatures toggle: profile, billing, settings, notifications, themeToggle
- ShellUser with avatar, role, initials fallback
- onNavigate callback for SPA routers (Next.js, etc.)
- Collapsible sidebar with toggle button
- All styled via --bl-shell-* CSS custom properties with fallbacks
- 41 tests covering all components
