d082480849
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
104 lines
3.4 KiB
JavaScript
104 lines
3.4 KiB
JavaScript
/**
|
|
* ROADMAP TODO #6 — Bundle-size budgets for @bytelyst/* packages.
|
|
*
|
|
* Each entry measures the gzipped size of a package's built `dist/`
|
|
* output. The 'limit' field is the budget — PRs that exceed it fail CI.
|
|
*
|
|
* Initial budgets per learning_ai_uxui_web/docs/ROADMAP_2026.md §5
|
|
* "Performance budgets":
|
|
* - Pure-TS clients → 8 KB
|
|
* - Feature packs → 6 KB
|
|
* - UI primitive slices → ~1 KB per primitive (whole pkg < 30 KB)
|
|
* - Tokens / design-tokens → 12 KB (CSS heavy)
|
|
*
|
|
* Pilot scope (this commit): wire up 6 representative packages. Rollout
|
|
* to the rest of @bytelyst/* lands incrementally as packages stabilise.
|
|
*
|
|
* Run locally:
|
|
* pnpm -w size — full check
|
|
* pnpm -w size --why <name> — explain what's contributing
|
|
*
|
|
* To add a package:
|
|
* 1. Confirm the package has 'build' in its scripts and emits to dist/
|
|
* 2. Add an entry below with name, path, and limit
|
|
* 3. Run `pnpm -w size --update` to record the current baseline if
|
|
* you're starting under-budget (optional)
|
|
*/
|
|
module.exports = [
|
|
// ── Pure-TS clients (8 KB) ──────────────────────────────────────
|
|
{
|
|
name: '@bytelyst/api-client',
|
|
path: 'packages/api-client/dist/index.js',
|
|
limit: '8 KB',
|
|
gzip: true,
|
|
},
|
|
{
|
|
name: '@bytelyst/auth-client',
|
|
path: 'packages/auth-client/dist/index.js',
|
|
limit: '8 KB',
|
|
gzip: true,
|
|
},
|
|
// ── Feature packs (6 KB) ────────────────────────────────────────
|
|
{
|
|
name: '@bytelyst/celebrations',
|
|
path: 'packages/celebrations/dist/index.js',
|
|
limit: '6 KB',
|
|
gzip: true,
|
|
},
|
|
{
|
|
name: '@bytelyst/quick-actions',
|
|
path: 'packages/quick-actions/dist/index.js',
|
|
limit: '6 KB',
|
|
gzip: true,
|
|
},
|
|
// ── React bindings (10 KB — slightly higher for hooks + context) ─
|
|
{
|
|
name: '@bytelyst/react-auth',
|
|
path: 'packages/react-auth/dist/index.js',
|
|
limit: '10 KB',
|
|
gzip: true,
|
|
},
|
|
// ── Shells / composite UI (30 KB) ───────────────────────────────
|
|
{
|
|
name: '@bytelyst/dashboard-shell',
|
|
path: 'packages/dashboard-shell/dist/index.js',
|
|
limit: '30 KB',
|
|
gzip: true,
|
|
},
|
|
// ── AI-native UI (35 KB — streaming + parsing is heavy) ─────────
|
|
{
|
|
name: '@bytelyst/ai-ui',
|
|
path: 'packages/ai-ui/dist/index.js',
|
|
limit: '35 KB',
|
|
gzip: true,
|
|
},
|
|
// ── Command palette (15 KB — fuzzy + dialog + registry) ─────────
|
|
{
|
|
name: '@bytelyst/command-palette',
|
|
path: 'packages/command-palette/dist/index.js',
|
|
limit: '15 KB',
|
|
gzip: true,
|
|
},
|
|
// ── Motion primitives (8 KB — 5 components, zero deps) ──────────
|
|
{
|
|
name: '@bytelyst/motion',
|
|
path: 'packages/motion/dist/index.js',
|
|
limit: '8 KB',
|
|
gzip: true,
|
|
},
|
|
// ── Data-viz primitives (10 KB — 5 SVG components) ──────────────
|
|
{
|
|
name: '@bytelyst/data-viz',
|
|
path: 'packages/data-viz/dist/index.js',
|
|
limit: '10 KB',
|
|
gzip: true,
|
|
},
|
|
// ── Notifications UI (10 KB — center + banner + announcement) ───
|
|
{
|
|
name: '@bytelyst/notifications-ui',
|
|
path: 'packages/notifications-ui/dist/index.js',
|
|
limit: '10 KB',
|
|
gzip: true,
|
|
},
|
|
];
|