@vadimcomanescu/nadicode-design-system 4.0.0 → 4.0.2

package/.agents/skills/seed/recipes/analytics.md

@@ -1,253 +0,0 @@
-# Recipe: Analytics
-
-Trend analysis page with date filters, KPI summary, chart grid, and data breakdowns.
-
-## Route Pattern
-
-`/analytics`
-
-## Shell
-
-`app-shell` (Sidebar + top bar + SearchCommand)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+--+---------------------------------------------+
-|  | Breadcrumb: Home > Analytics                 |
-|S | Analytics          [DateRange] [Export] [Tab] |
-|I |                                               |
-|D | +--------+ +--------+ +--------+ +--------+  |
-|E | | KPI 1  | | KPI 2  | | KPI 3  | | KPI 4  | |
-|B | +--------+ +--------+ +--------+ +--------+  |
-|A |                                               |
-|R | +------------------------------------------+  |
-|  | | Primary Chart (AreaChart, full width)    |  |
-|  | |                                          |  |
-|  | +------------------------------------------+  |
-|  |                                               |
-|  | +-------------------+ +--------------------+  |
-|  | | Breakdown Chart   | | Distribution Chart |  |
-|  | | (BarChart)        | | (PieChart)         |  |
-|  | +-------------------+ +--------------------+  |
-|  |                                               |
-|  | +------------------------------------------+  |
-|  | | Data Table (detailed breakdown)          |  |
-|  | +------------------------------------------+  |
-+--+---------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Page Header + Controls
-
-```tsx
-<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-  <div>
-    <Breadcrumb>...</Breadcrumb>
-    <Heading level={2} size="section" >Analytics</Heading>
-  </div>
-  <div className="flex items-center gap-3">
-    <DateRangePicker value={dateRange} onChange={setDateRange} />
-    <Button variant="outline"><DownloadIcon size={16} /> Export</Button>
-  </div>
-</div>
-```
-
-### 2. View Tabs (optional)
-
-```tsx
-<Tabs value={view} onValueChange={setView} className="mt-4">
-  <TabsList>
-    <TabsTrigger value="overview">Overview</TabsTrigger>
-    <TabsTrigger value="engagement">Engagement</TabsTrigger>
-    <TabsTrigger value="revenue">Revenue</TabsTrigger>
-  </TabsList>
-</Tabs>
-```
-
-### 3. KPI Summary Row
-
-```tsx
-<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-6">
-  {kpis.map(kpi => (
-    <Card key={kpi.id} className="glass-panel p-6">
-      <Typography variant="small" className="text-text-secondary">{kpi.label}</Typography>
-      <div className="flex items-baseline gap-2 mt-1">
-        <CountingNumber value={kpi.value} className="text-2xl font-bold" />
-        <Badge variant={kpi.trend > 0 ? "success" : "destructive"}>
-          {kpi.trend > 0 ? "+" : ""}{kpi.trend}%
-        </Badge>
-      </div>
-      <Typography variant="small" className="text-text-tertiary mt-1">
-        vs. previous period
-      </Typography>
-    </Card>
-  ))}
-</div>
-```
-
-### 4. Primary Chart (full width)
-
-```tsx
-<Card className="glass-panel p-6 mt-6">
-  <div className="flex items-center justify-between mb-4">
-    <Heading level={4} size="title" >Trend Over Time</Heading>
-    <Select value={metric} onValueChange={setMetric}>
-      <SelectTrigger className="w-40"><SelectValue /></SelectTrigger>
-      <SelectContent>
-        <SelectItem value="visitors">Visitors</SelectItem>
-        <SelectItem value="revenue">Revenue</SelectItem>
-      </SelectContent>
-    </Select>
-  </div>
-  <AreaChart data={trendData} height={300} />
-</Card>
-```
-
-### 5. Secondary Charts (2 column)
-
-```tsx
-<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6 mt-6">
-  <Card className="glass-panel p-6">
-    <Heading level={4} size="title"  className="mb-4">By Category</Heading>
-    <BarChart data={breakdownData} />
-  </Card>
-  <Card className="glass-panel p-6">
-    <Heading level={4} size="title"  className="mb-4">Distribution</Heading>
-    <PieChart data={distributionData} />
-  </Card>
-</div>
-```
-
-### 6. Detailed Breakdown Table (optional)
-
-```tsx
-<Card className="glass-panel mt-6">
-  <div className="flex items-center justify-between p-6 pb-0">
-    <Heading level={4} size="title" >Detailed Breakdown</Heading>
-    <Input placeholder="Search..." className="w-48" />
-  </div>
-  <DataTable columns={breakdownColumns} data={breakdownRows} />
-</Card>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 550ms | SPRING: snappy | REDUCED: opacity-only
-
-T+0ms     [shell]     Sidebar + top bar visible    (instant)
-T+50ms    [header]    Title + date filter           {fadeInUp, snappy}
-T+100ms   [tabs]      View tabs                    {fadeIn, snappy}
-T+150ms   [kpi-1..4]  KPI cards stagger            {blockStagger, 80ms apart}
-T+470ms   [chart-1]   Primary chart fades in        {fadeIn, gentle}
-T+550ms   [chart-2]   Secondary charts fade in      {fadeIn, gentle}
-
-SCROLL-TRIGGERED:
-[table]    DataTable ScrollFadeIn at 20%            {fadeIn, snappy}
-
-DATE FILTER CHANGE:
-[kpis]     CountingNumber animate to new values
-[charts]   Chart data transitions smoothly (recharts built-in)
-
-REDUCED MOTION: All items visible immediately
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `Card` | `@vadimcomanescu/nadicode-design-system/card` | KPI cards, chart containers |
-| `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Trend indicators |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Titles, labels |
-| `Breadcrumb` | `@vadimcomanescu/nadicode-design-system/breadcrumb` | Navigation |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Export, actions |
-| `DateRangePicker` | `@vadimcomanescu/nadicode-design-system/date-range-picker` | Date filter |
-| `Tabs` | `@vadimcomanescu/nadicode-design-system/tabs` | View switching |
-| `Select` | `@vadimcomanescu/nadicode-design-system/select` | Metric selector |
-| `AreaChart` | `@vadimcomanescu/nadicode-design-system/charts/area-chart` | Primary trend |
-| `BarChart` | `@vadimcomanescu/nadicode-design-system/charts/bar-chart` | Category breakdown |
-| `PieChart` | `@vadimcomanescu/nadicode-design-system/charts/pie-chart` | Distribution |
-| `CountingNumber` | `@vadimcomanescu/nadicode-design-system/text-effects/counting-number` | Animated KPIs |
-| `Skeleton` | `@vadimcomanescu/nadicode-design-system/skeleton` | Loading state |
-| `Empty` | `@vadimcomanescu/nadicode-design-system/empty` | No-data state |
-
-### Allowed (optional)
-
-`LineChart`, `RadarChart`, `RadialBarChart`, `HeatmapChart`, `DataTable`, `Tooltip`, `Progress`
-
-### Forbidden
-
-`HeroBlock`, `FormWizard`, `AuthLayout`, decorative effects, agentic components
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `loading` | Initial data fetch or filter change | Skeleton KPIs + skeleton chart areas |
-| `empty` | No data for selected range | `Empty` with chart icon, "No data for this period" |
-| `has-data` | Data loaded | Full charts and KPIs |
-| `error` | API failure | `Alert` variant="destructive" with retry |
-| `date-filtered` | User changes date range | KPIs animate, charts re-render with new data |
-
----
-
-## Responsive Contract
-
-| Breakpoint | KPIs | Charts | Table |
-|------------|------|--------|-------|
-| Mobile | 1 col | 1 col, stacked | Horizontal scroll |
-| `sm:` | 2 col | 1 col | Horizontal scroll |
-| `lg:` | 4 col | Primary full, secondary 2-col | Full table |
-
----
-
-## Styling Rules
-
-- Chart containers: `glass-panel p-6`
-- Chart colors: only `chart-1` through `chart-6` tokens
-- KPI cards: `glass-panel p-6`
-- No raw palette colors
-- Grid gaps: `gap-4 lg:gap-6`
-
----
-
-## Accessibility
-
-- Charts use `ChartContainer` with `aria-label`
-- Date range picker is keyboard accessible
-- KPI trend badges include direction in text ("up 12%")
-- Tab navigation is keyboard-navigable
-- Export button has `aria-label="Export analytics data"`
-
----
-
-## Reference Implementations
-
-- `src/components/blocks/ChartCollectionBlock.tsx`
-- `src/components/blocks/StatsBlock.tsx`
-- `src/components/blocks/InteractiveAreaChartBlock.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```

package/.agents/skills/seed/recipes/auth.md

@@ -1,254 +0,0 @@
-# Recipe: Auth
-
-Login, signup, password reset, and 2FA flows with split-screen or centered layout.
-
-## Route Patterns
-
-- `/login`
-- `/signup`
-- `/reset-password`
-- `/verify` (2FA challenge)
-
-## Shell
-
-`auth-shell` (AuthLayout: split-screen or centered, minimal chrome)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+------------------------------------------------+
-|                                                 |
-|  +--------------------+  +-------------------+  |
-|  |                    |  |                   |  |
-|  |  Brand Panel       |  |  Auth Card        |  |
-|  |  (illustration,    |  |  (glass-floating) |  |
-|  |   testimonial,     |  |                   |  |
-|  |   or shader bg)    |  |  Logo             |  |
-|  |                    |  |  Title            |  |
-|  |                    |  |  Subtitle         |  |
-|  |                    |  |                   |  |
-|  |                    |  |  [Email input]    |  |
-|  |                    |  |  [Password input] |  |
-|  |                    |  |                   |  |
-|  |                    |  |  [Sign In]        |  |
-|  |                    |  |  Or continue with |  |
-|  |                    |  |  [Google] [GitHub] |  |
-|  |                    |  |                   |  |
-|  |                    |  |  Forgot password? |  |
-|  |                    |  |  Don't have acct? |  |
-|  +--------------------+  +-------------------+  |
-|                                                 |
-+------------------------------------------------+
-
-Mobile: Brand panel hidden, auth card full-width centered
-```
-
----
-
-## Section Sequence
-
-### 1. Auth Layout Wrapper
-
-```tsx
-<AuthLayout>
-  {/* AuthLayout provides split-screen on desktop, centered on mobile */}
-  <LoginBlock
-    type="login"
-    variant="glass-panel"
-    showSocial
-    title="Welcome back"
-    description="Sign in to your account"
-    onLogin={handleLogin}
-    forgotPasswordHref="/reset-password"
-    signUpHref="/signup"
-  />
-</AuthLayout>
-```
-
-### 2. Login Form (within LoginBlock or custom)
-
-```tsx
-<Card className="glass-floating p-8 w-full max-w-md">
-  <div className="flex flex-col items-center mb-6">
-    <Logo className="h-8 mb-4" />
-    <Heading level={3} size="subsection" >Welcome back</Heading>
-    <Typography variant="small" className="text-text-secondary mt-1">
-      Sign in to your account
-    </Typography>
-  </div>
-
-  {error && <Alert variant="destructive" className="mb-4">{error}</Alert>}
-
-  <form onSubmit={handleSubmit} className="space-y-4">
-    <div>
-      <Label htmlFor="email">Email</Label>
-      <Input id="email" type="email" placeholder="name@example.com" />
-    </div>
-    <div>
-      <Label htmlFor="password">Password</Label>
-      <PasswordInput id="password" />
-    </div>
-    <Button type="submit" className="w-full" disabled={isSubmitting}>
-      {isSubmitting ? <Spinner className="mr-2" /> : null}
-      Sign In
-    </Button>
-  </form>
-
-  <div className="relative my-6">
-    <Separator />
-    <span className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface px-2 text-text-tertiary text-sm">
-      Or continue with
-    </span>
-  </div>
-
-  <div className="grid grid-cols-2 gap-3">
-    <Button variant="outline"><BrandIcons.Google className="mr-2 h-4 w-4" /> Google</Button>
-    <Button variant="outline"><BrandIcons.GitHub className="mr-2 h-4 w-4" /> GitHub</Button>
-  </div>
-
-  <div className="mt-6 text-center space-y-2">
-    <a href="/reset-password" className="text-sm text-link">Forgot password?</a>
-    <p className="text-sm text-text-secondary">
-      Don't have an account? <a href="/signup" className="text-link">Sign up</a>
-    </p>
-  </div>
-</Card>
-```
-
-### 3. 2FA Challenge (separate route)
-
-```tsx
-<Card className="glass-floating p-8 w-full max-w-md text-center">
-  <Heading level={3} size="subsection" >Two-factor authentication</Heading>
-  <Typography variant="small" className="text-text-secondary mt-2 mb-6">
-    Enter the 6-digit code from your authenticator app
-  </Typography>
-  <InputOTP maxLength={6} onComplete={handleVerify}>
-    <InputOTPGroup>
-      <InputOTPSlot index={0} />
-      <InputOTPSlot index={1} />
-      <InputOTPSlot index={2} />
-    </InputOTPGroup>
-    <InputOTPSeparator />
-    <InputOTPGroup>
-      <InputOTPSlot index={3} />
-      <InputOTPSlot index={4} />
-      <InputOTPSlot index={5} />
-    </InputOTPGroup>
-  </InputOTP>
-  <Button className="w-full mt-6" disabled={isSubmitting}>Verify</Button>
-</Card>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 350ms | SPRING: gentle | REDUCED: opacity-only
-
-T+0ms     [layout]    Split-screen panels visible   (instant)
-T+0ms     [brand]     Brand panel bg/shader          (instant)
-T+100ms   [card]      Auth card scales in            {scaleIn, gentle}
-T+200ms   [logo]      Logo fades in                  {fadeIn, snappy}
-T+250ms   [fields]    Form fields stagger            {blockStagger, 60ms, max 4}
-T+350ms   [cta]       Sign-in button fades in        {fadeIn, snappy}
-
-REDUCED MOTION: Card and all children visible immediately
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `AuthLayout` | `@vadimcomanescu/nadicode-design-system/auth-layout` | Split-screen wrapper |
-| `LoginBlock` | `@vadimcomanescu/nadicode-design-system/login-block` | Pre-built login form |
-| `SignUpBlock` | `@vadimcomanescu/nadicode-design-system/sign-up-block` | Pre-built signup form |
-| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Auth card container |
-| `Input` | `@vadimcomanescu/nadicode-design-system/input` | Email, name fields |
-| `PasswordInput` | `@vadimcomanescu/nadicode-design-system/password-input` | Password with toggle |
-| `Label` | `@vadimcomanescu/nadicode-design-system/label` | Stacked labels |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Submit, social login |
-| `Alert` | `@vadimcomanescu/nadicode-design-system/alert` | Error messages |
-| `Logo` | `@vadimcomanescu/nadicode-design-system/logo` | Brand mark |
-| `BrandIcons` | `@vadimcomanescu/nadicode-design-system/brand-icons` | Google, GitHub icons |
-| `Separator` | `@vadimcomanescu/nadicode-design-system/separator` | "Or" divider |
-| `InputOTP` | `@vadimcomanescu/nadicode-design-system/input-otp` | 2FA code entry |
-| `Spinner` | `@vadimcomanescu/nadicode-design-system/spinner` | Submit loading |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, descriptions |
-
-### Allowed (optional)
-
-`PasswordRecoveryBlock`, `ResetPasswordBlock`, `TwoFactorChallengeBlock`, `TwoFactorSetupBlock`, `AccountLockedBlock`, `AuthSuccessBlock`, `Checkbox` (remember me), `ShaderBackground`
-
-### Forbidden
-
-`Sidebar`, `DataTable`, chart components, `NavigationMenu`, decorative effects (except on brand panel)
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `default` | Page loaded | Form ready for input |
-| `submitting` | Form submitted | Button shows Spinner, form disabled |
-| `error` | Auth failure | `Alert` variant="destructive" with message |
-| `success` | Auth succeeded | Redirect to dashboard (or `AuthSuccessBlock`) |
-| `2fa-challenge` | Server requests 2FA | Show 2FA code entry screen |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Layout | Card Width |
-|------------|--------|------------|
-| Mobile | Centered card, no brand panel | Full width, max-w-md, px-4 |
-| `lg:` | Split screen: brand (50%) + form (50%) | max-w-md centered in right half |
-
----
-
-## Styling Rules
-
-- Auth card: `glass-floating p-8`
-- Brand panel: full-height, may use `ShaderBackground` or illustration
-- Labels: stacked above inputs (always)
-- Social buttons: `variant="outline"`, 2-column grid
-- Links: `text-link` token
-- Error: `Alert` at top of form, not inline per-field (for auth errors)
-
----
-
-## Accessibility
-
-- Form inputs have associated labels
-- Error alert uses `role="alert"`
-- Social login buttons include brand name in text
-- OTP input is keyboard-navigable (auto-advance)
-- Focus moves to first field on mount
-- Escape key behavior is handled (no accidental navigation away)
-
----
-
-## Reference Implementations
-
-- `src/components/blocks/LoginBlock.tsx`
-- `src/components/blocks/AuthLayout.tsx`
-- `src/app/login/vanta/*/page.tsx` (7 variants)
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```