67104b8ebc
4 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
saravanakumardb1
|
d082480849 |
feat(packages): Wave 4 motion + Wave 5b data-viz + Wave 7 notifications-ui
Three new product-agnostic packages unlock visible elegance lifts
across every product:
═══════════════════════════════════════════════════════════════════════
@bytelyst/motion@0.1.0 — Wave 4 elegance primitives (2.21 KB / 8 KB)
═══════════════════════════════════════════════════════════════════════
<Reveal> — IntersectionObserver-based fade/slide entry,
6 directions, configurable spring + delay
<StaggerList> — sequenced reveal of children with per-item delay
<NumberFlow> — RAF-tweened number counter, cubic-out easing,
Intl-formatted, prefers-reduced-motion aware
<TiltCard> — 3D perspective tilt + cursor-tracking glare
overlay (single-element ref, no React rerenders)
<ScrollProgress> — fixed scroll-position bar (window or any element)
Plus exported `SPRINGS` (4 cubic-bezier presets) + `prefersReducedMotion`
helper. Every primitive accepts `disableMotion` for snapshot tests.
═══════════════════════════════════════════════════════════════════════
@bytelyst/data-viz@0.1.0 — Wave 5b viz primitives (2.63 KB / 10 KB)
═══════════════════════════════════════════════════════════════════════
<Sparkline> — line trend with gradient fill + last-point marker
<BarSparkline> — discrete-bar mini-chart with max-bar highlight
<KpiCard> — label + headline + delta arrow + sparkline; supports
'goodWhen=lower' for latency/cost metrics
<ProgressRing> — circular progress with center content slot,
animated stroke-dashoffset
<Heatmap> — GitHub-style calendar grid with color-mix() intensity
All pure SVG / CSS — zero runtime dependencies.
═══════════════════════════════════════════════════════════════════════
@bytelyst/notifications-ui@0.1.0 — Wave 7 essentials (3.31 KB / 10 KB)
═══════════════════════════════════════════════════════════════════════
<NotificationCenter> — bell trigger + badge + dropdown panel with
All / Unread / Mentions tabs, outside-click
+ Escape close, mark-all-read action
<InboxItem> — single row with unread dot, kind glyph,
relative timestamp, optional action buttons
<BannerStack> — top-of-page strip with maxVisible + +N more,
accent-bordered tone variants, dismissible
<Announcement> — inline 'What's new' pill (3 tone variants)
5 notification kinds (info/success/warning/danger/mention) + 5 banner
kinds (... + announcement gradient).
═══════════════════════════════════════════════════════════════════════
Quality gates
═══════════════════════════════════════════════════════════════════════
All three packages: tsc --noEmit clean, build clean.
Tests: motion 16/16 · data-viz 14/14 · notifications-ui 17/17
Bundles: motion 2.21 KB · data-viz 2.63 KB · noti-ui 3.31 KB
Budgets: added to .size-limit.cjs (8/10/10 KB respectively)
Refs:
learning_ai_uxui_web/docs/ROADMAP_2026.md
§Wave 4 (Motion), §Wave 5b (Charts), §Wave 7 (Productisation)
Decisions doc §13 (mobile-native = tokens-only) leaves room for these
web-first packages to be the canonical surface
|
||
|
saravanakumardb1
|
e2eea086dc |
feat(packages): Wave 2 v0.4 + Wave 3 v0.1 — ai-ui expanded, command-palette new
═══════════════════════════════════════════════════════════════════════
@bytelyst/ai-ui bump 0.1.0 → 0.4.0
═══════════════════════════════════════════════════════════════════════
Folds three more roadmap milestones into the flagship package.
0.2: <ToolCallCard> — disclosure card; status pill, JSON preview
<CitationChip> — inline citation marker + hover preview
useToolCalls() — per-turn tool-invocation state machine
(begin/update/settle/clear); preserves insertion
order across updates; auto-computes durationMs
0.3: <AgentTimeline> — vertical think→act→observe→respond trace;
embeds ToolCallCard for kind='tool_call' steps
<ModelPicker> — model dropdown with capability chips, cost,
latency, context window, disabled gating
0.4: <ToolPalette> — searchable tool list with MCP-style discovery
(source can be ToolDescriptor[] OR an
'mcp://...' URL resolved via a discover
adapter; default adapter is fetch+JSON)
Types extended:
- ToolInvocation, ToolCallStatus, Citation added
- Message gains optional toolInvocations + citations
Tests: 53/53 (27 old + 26 new) · typecheck clean · 7.65 KB / 35 KB
═══════════════════════════════════════════════════════════════════════
NEW PACKAGE: @bytelyst/command-palette@0.1.0
═══════════════════════════════════════════════════════════════════════
Wave 3 deliverable — Cmd-K dialog with three modes and pluggable command
registration. Roadmap §Wave 3 of ROADMAP_2026.md.
What's exported:
<CommandRegistryProvider> — wrap your app once
<CommandPalette> — the dialog (Cmd-K / Ctrl-K)
useRegisterCommands() — contribute commands for component lifetime
useCommands() — read snapshot
useCommandRegistry() — imperative access
useCommandPalette() — open/close state + global hotkey
fuzzyScore / scoreCommand — exposed for tests + custom UIs
Three modes:
actions — invoke a registered run()
navigate — jump to href via onNavigate or window.location
ask-ai — host-supplied askAiPanel; default renders an 'Ask AI: <q>'
suggestion that products can wire to <ChatStream>
Keyboard:
↑ ↓ navigate selection
Enter activate
Tab cycle mode tabs (Shift+Tab reverses)
Esc close
Niceties:
- Fuzzy matcher (substring + subsequence with light scoring)
- localStorage-backed recents float to top of actions mode
- requires() gate hides commands wholesale (auth / feature-flag)
- aria-haspopup, role=dialog, role=listbox, role=option, aria-selected
- Backdrop click closes; Esc handler at document level
- Hotkey suppressed by Cmd-K / Ctrl-K default; configurable
Tests: 26/26 · typecheck clean · 3.91 KB / 15 KB
═══════════════════════════════════════════════════════════════════════
CI plumbing
═══════════════════════════════════════════════════════════════════════
- .size-limit.cjs gains @bytelyst/command-palette entry
- .gitea/workflows/size-limit.yml build filter expanded
- All 8 measured packages comfortably under budget
Refs:
learning_ai_uxui_web/docs/ROADMAP_2026.md §Wave 2 (0.2/0.3/0.4)
learning_ai_uxui_web/docs/ROADMAP_2026.md §Wave 3 (Command palette)
docs/ROADMAP_2026_DECISIONS.md §10 (Vercel AI SDK shape continues)
|
||
|
saravanakumardb1
|
c9a7f905af | feat(ai-ui): Wave 2 MVP @bytelyst/ai-ui@0.1.0 | ||
|
saravanakumardb1
|
ed5fb707ad |
ci(packages): close ROADMAP TODOs #5, #6 + draft RFC for #4
═══════════════════════════════════════════════════════════════════════ TODO #6 — size-limit budgets in CI ═══════════════════════════════════════════════════════════════════════ Adds .size-limit.cjs with budgets for 6 pilot @bytelyst/* packages, plus a Gitea Actions workflow (.gitea/workflows/size-limit.yml) that fails the build on any regression. Current measurements vs budget (all comfortably under): @bytelyst/api-client 793 B / 8 KB @bytelyst/auth-client 1.97 KB / 8 KB @bytelyst/celebrations 236 B / 6 KB @bytelyst/quick-actions 122 B / 6 KB @bytelyst/react-auth 2.71 KB / 10 KB @bytelyst/dashboard-shell 3.96 KB / 30 KB Scripts: pnpm size — measure + assert against budgets pnpm size:why — explain top contributors Deps: size-limit@^12.1.0, @size-limit/preset-small-lib@^12.1.0. Pilot scope (this commit): 6 packages. Full @bytelyst/* rollout is incremental — each entry added separately. ═══════════════════════════════════════════════════════════════════════ TODO #5 — Storybook canonical pattern ═══════════════════════════════════════════════════════════════════════ Discovery: @bytelyst/ui already has Storybook 8 with the @bytelyst/ addon-a11y addon configured and 5 .stories.tsx files. This commit: - Documents that setup as the canonical template (docs/STORYBOOK_TEMPLATE.md) including the .storybook/main.ts, preview.ts, package.json scripts, and an example story. - Catalogs which of the 8 visual @bytelyst/* packages need Storybook added (1/8 done — @bytelyst/ui). - Per docs/ROADMAP_2026_DECISIONS.md §9, hosting target is self-hosted Gitea Pages (no Chromatic). Full rollout to the other 7 packages stays open as incremental work. ═══════════════════════════════════════════════════════════════════════ TODO #4 — DTCG v3 token migration RFC ═══════════════════════════════════════════════════════════════════════ This is too large to land in a single commit. Drafted RFC instead: docs/rfc/0001-dtcg-v3-token-migration.md The RFC proposes a 4-PR sequence: PR 1 — Add converter + dual-emit (byte-identical assertion) PR 2 — Flip source of truth to DTCG JSON PR 3 — Introduce the component tier PR 4 — Multi-theme via DTCG token sets Estimate: 2 person-weeks total. Backward compatibility: --ml-* and --bl-* names preserved through all 4 PRs. Status: Draft, awaiting reviewers. Refs: learning_ai_uxui_web/docs/ROADMAP_2026.md §10 TODOs #4, #5, #6 |