@vadimcomanescu/nadicode-design-system 4.0.0 → 4.0.2

package/.agents/skills/seed/recipes/blog-content.md

@@ -1,307 +0,0 @@
-# Recipe: Blog / Content
-
-Blog index, article pages, and changelog display with reading-optimized layout.
-
-## Route Patterns
-
-- `/blog` (index with post cards)
-- `/blog/[slug]` (individual article)
-- `/changelog` (version changelog)
-
-## Shell
-
-`marketing-shell` (HeaderBlock + FooterBlock)
-
----
-
-## Layout Blueprint: Blog Index (Desktop)
-
-```
-+------------------------------------------------+
-| HeaderBlock                                     |
-+------------------------------------------------+
-|                                                 |
-|    Blog           [Category filter]             |
-|    Latest thoughts and updates                  |
-|                                                 |
-|  +--------------------+  +-------------------+  |
-|  | Featured Post      |  | Post 2            |  |
-|  | (large card)       |  | (standard card)   |  |
-|  |                    |  +-------------------+  |
-|  |                    |  | Post 3            |  |
-|  |                    |  | (standard card)   |  |
-|  +--------------------+  +-------------------+  |
-|                                                 |
-|  +----------+  +----------+  +----------+       |
-|  | Post 4   |  | Post 5   |  | Post 6   |      |
-|  +----------+  +----------+  +----------+       |
-|                                                 |
-|  [Load More / Pagination]                       |
-+------------------------------------------------+
-| FooterBlock                                     |
-+------------------------------------------------+
-```
-
-## Layout Blueprint: Article Page (Desktop)
-
-```
-+------------------------------------------------+
-| HeaderBlock                                     |
-+------------------------------------------------+
-|                                                 |
-|         max-w-3xl centered                      |
-|                                                 |
-|    Category Badge        5 min read             |
-|    Article Title (h1)                           |
-|    Published Jan 1, 2025 by Author Name         |
-|                                                 |
-|    [Article hero image]                         |
-|                                                 |
-|    Article body content with prose styling...   |
-|    Headings, paragraphs, code blocks,           |
-|    images, blockquotes...                       |
-|                                                 |
-|    ---                                          |
-|    Author card                                  |
-|    Share buttons                                |
-|                                                 |
-|    Related Posts (3 cards)                       |
-|                                                 |
-+------------------------------------------------+
-| FooterBlock                                     |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence: Blog Index
-
-### 1. Page Header
-
-```tsx
-<section className="py-12 md:py-16">
-  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-      <div>
-        <Heading level={1} size="display" >Blog</Heading>
-        <Typography variant="lead" className="text-text-secondary mt-2">
-          Latest thoughts and updates
-        </Typography>
-      </div>
-      <Select value={category} onValueChange={setCategory}>
-        <SelectTrigger className="w-48"><SelectValue placeholder="All categories" /></SelectTrigger>
-        <SelectContent>{/* Category options */}</SelectContent>
-      </Select>
-    </div>
-  </div>
-</section>
-```
-
-### 2. Featured + Recent Posts Grid
-
-```tsx
-<section className="pb-16">
-  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    {/* Featured row */}
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-      <Card className="glass-panel overflow-hidden lg:row-span-2">
-        {/* Featured post with large image */}
-        <img src={featured.image} alt="" className="w-full h-48 lg:h-64 object-cover" />
-        <div className="p-6">
-          <Badge variant="outline">{featured.category}</Badge>
-          <Heading level={3} size="subsection"  className="mt-3">{featured.title}</Heading>
-          <Typography variant="p" className="text-text-secondary mt-2 line-clamp-3">
-            {featured.excerpt}
-          </Typography>
-          <div className="flex items-center gap-2 mt-4 text-text-tertiary text-sm">
-            <Avatar className="h-6 w-6"><AvatarImage src={featured.author.avatar} /></Avatar>
-            <span>{featured.author.name}</span>
-            <span>-</span>
-            <span>{featured.date}</span>
-          </div>
-        </div>
-      </Card>
-      <div className="space-y-6">
-        {recentPosts.slice(0, 2).map(post => (
-          <Card key={post.id} className="glass-panel p-6">
-            <Badge variant="outline">{post.category}</Badge>
-            <Heading level={4} size="title"  className="mt-2">{post.title}</Heading>
-            <Typography variant="small" className="text-text-secondary mt-1 line-clamp-2">
-              {post.excerpt}
-            </Typography>
-          </Card>
-        ))}
-      </div>
-    </div>
-
-    {/* Remaining posts grid */}
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-      {remainingPosts.map(post => (
-        <Card key={post.id} className="glass-panel p-6">
-          <Badge variant="outline">{post.category}</Badge>
-          <Heading level={4} size="title"  className="mt-2">{post.title}</Heading>
-          <Typography variant="small" className="text-text-secondary mt-1 line-clamp-2">
-            {post.excerpt}
-          </Typography>
-        </Card>
-      ))}
-    </div>
-
-    {/* Pagination */}
-    <div className="mt-12 flex justify-center">
-      <Pagination current={page} total={totalPages} onPageChange={setPage} />
-    </div>
-  </div>
-</section>
-```
-
-### Article Page: Prose Content
-
-```tsx
-<article className="max-w-3xl mx-auto px-4 sm:px-6 py-12 md:py-16">
-  <header className="mb-8">
-    <div className="flex items-center gap-3 mb-4">
-      <Badge variant="outline">{post.category}</Badge>
-      <Typography variant="small" className="text-text-tertiary">
-        {post.readingTime} min read
-      </Typography>
-    </div>
-    <Heading level={1} size="display" >{post.title}</Heading>
-    <div className="flex items-center gap-3 mt-4 text-text-secondary">
-      <Avatar><AvatarImage src={post.author.avatar} /></Avatar>
-      <div>
-        <Typography variant="small" className="font-medium text-text-primary">
-          {post.author.name}
-        </Typography>
-        <Typography variant="small">{post.date}</Typography>
-      </div>
-    </div>
-  </header>
-
-  {/* Prose content */}
-  <div className="prose prose-neutral dark:prose-invert max-w-none">
-    {post.content}
-  </div>
-
-  {/* Author card + share */}
-  <Separator className="my-12" />
-  <Card className="glass-panel p-6 flex items-center gap-4">
-    <Avatar className="h-12 w-12"><AvatarImage src={post.author.avatar} /></Avatar>
-    <div>
-      <Heading level={4} size="title" >{post.author.name}</Heading>
-      <Typography variant="small" className="text-text-secondary">{post.author.bio}</Typography>
-    </div>
-  </Card>
-</article>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 600ms (index) / 300ms (article) | SPRING: snappy | REDUCED: opacity-only
-
-BLOG INDEX:
-T+0ms     [nav]       Header visible                (instant)
-T+50ms    [header]    Blog title + filter            {fadeInUp, snappy}
-T+130ms   [featured]  Featured post card             {fadeInUp, snappy}
-T+210ms   [recent]    Recent post cards stagger      {blockStagger, 80ms}
-T+450ms   [grid]      Remaining posts stagger        {blockStagger, 80ms, max 6}
-
-ARTICLE:
-T+0ms     [nav]       Header visible                (instant)
-T+50ms    [meta]      Category + reading time        {fadeIn, snappy}
-T+100ms   [title]     Article title                  {fadeInUp, snappy}
-T+200ms   [content]   Article body fades in          {fadeIn, gentle}
-
-REDUCED MOTION: All items visible immediately
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Post cards |
-| `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Category tags |
-| `Avatar` | `@vadimcomanescu/nadicode-design-system/avatar` | Author avatars |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, body |
-| `Pagination` | `@vadimcomanescu/nadicode-design-system/pagination` | Blog index pages |
-| `Separator` | `@vadimcomanescu/nadicode-design-system/separator` | Content dividers |
-| `Select` | `@vadimcomanescu/nadicode-design-system/select` | Category filter |
-| `HeaderBlock` | `@vadimcomanescu/nadicode-design-system/header-block` | Site navigation |
-| `FooterBlock` | `@vadimcomanescu/nadicode-design-system/footer-block` | Site footer |
-| `ScrollFadeIn` | `@vadimcomanescu/nadicode-design-system/scroll-fade-in` | Below-fold animations |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Share, read more |
-
-### Allowed (optional)
-
-`ChangelogBlock`, `NewsletterBlock`, `Tabs`, `Input` (search), `Breadcrumb`, `Tooltip`, `CodeBlock`
-
-### Forbidden
-
-`Sidebar`, `DataTable`, `FormWizard`, chart components, agentic components
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `loading` | Fetching posts | Skeleton post cards |
-| `empty` | No posts (unlikely for blog) | `Empty` with "No posts yet" |
-| `has-data` | Posts loaded | Full grid layout |
-| `category-filtered` | Category selected | Filtered post grid |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Blog Index Grid | Article Width |
-|------------|----------------|---------------|
-| Mobile | 1 col | Full width, px-4 |
-| `sm:` | 2 col | max-w-3xl, px-6 |
-| `lg:` | Featured 2-col + 3-col grid | max-w-3xl, px-6 |
-
----
-
-## Styling Rules
-
-- Post cards: `glass-panel` with overflow-hidden for images
-- Article prose: Tailwind typography plugin (`prose prose-neutral dark:prose-invert`)
-- Reading width: `max-w-3xl` (768px) for article content
-- Category badges: `variant="outline"`
-- No raw palette colors
-
----
-
-## Accessibility
-
-- Blog index is a `<main>` with article cards as `<article>` elements
-- Article page uses semantic `<article>`, `<header>`, heading hierarchy
-- Images have alt text
-- Pagination uses `<nav>` with `aria-label="Blog pagination"`
-
----
-
-## Reference Implementations
-
-- `src/app/blog/page.tsx`
-- `src/app/changelog/page.tsx`
-- `src/components/blocks/ChangelogBlock.tsx`
-- `src/components/blocks/NewsletterBlock.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/checkout.md

@@ -1,311 +0,0 @@
-# Recipe: Checkout
-
-Payment flow with Stripe integration, order summary, and success state.
-
-## Route Patterns
-
-- `/checkout`
-- `/checkout/success`
-
-## Shell
-
-`marketing-shell` (minimal: logo + trust badge, no full nav to avoid abandonment)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+------------------------------------------------+
-| Logo            Secure checkout   [Back to cart]|
-+------------------------------------------------+
-|                                                 |
-|  +-------------------------+  +-------------+   |
-|  | Checkout Form           |  | Order       |   |
-|  |                         |  | Summary     |   |
-|  | Contact Information     |  |             |   |
-|  | [Email input]           |  | Item 1  $29 |   |
-|  |                         |  | Item 2  $49 |   |
-|  | Payment                 |  |             |   |
-|  | [Stripe Card Element]   |  | Subtotal $78|   |
-|  |                         |  | Tax      $8 |   |
-|  | Billing Address         |  | ----------- |   |
-|  | [Address fields]        |  | Total    $86|   |
-|  |                         |  |             |   |
-|  | [Pay $86.00]            |  | [Coupon]    |   |
-|  +-------------------------+  +-------------+   |
-|                                                 |
-|  [Stripe] [SSL] [Money-back guarantee badges]   |
-+------------------------------------------------+
-
-Success Page:
-+------------------------------------------------+
-| Logo                                  [Home]    |
-+------------------------------------------------+
-|                                                 |
-|           [ConfettiBurst]                       |
-|           [SuccessCheck]                        |
-|                                                 |
-|        Payment successful!                      |
-|        Order #12345 confirmed.                  |
-|                                                 |
-|    We've sent a confirmation to your email.     |
-|                                                 |
-|    [Go to Dashboard]    [View Receipt]          |
-|                                                 |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Minimal Header
-
-```tsx
-<header className="flex items-center justify-between px-6 py-4 border-b border-border">
-  <Logo className="h-6" />
-  <div className="flex items-center gap-2 text-text-secondary">
-    <LockIcon size={14} />
-    <Typography variant="small">Secure checkout</Typography>
-  </div>
-  <Button variant="ghost" size="sm" asChild>
-    <a href="/pricing">Back</a>
-  </Button>
-</header>
-```
-
-### 2. Checkout Form + Order Summary (2-column)
-
-```tsx
-<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
-  <div className="grid grid-cols-1 lg:grid-cols-[1fr_380px] gap-8">
-    {/* Left: Form */}
-    <div className="space-y-6">
-      {/* Contact */}
-      <Card className="glass-panel p-6">
-        <Heading level={4} size="title"  className="mb-4">Contact information</Heading>
-        <div className="space-y-4">
-          <FormField>
-            <FormLabel>Email</FormLabel>
-            <FormControl><Input type="email" /></FormControl>
-          </FormField>
-        </div>
-      </Card>
-
-      {/* Payment */}
-      <Card className="glass-panel p-6">
-        <Heading level={4} size="title"  className="mb-4">Payment</Heading>
-        <CheckoutForm
-          amount={totalAmount}
-          onSuccess={handlePaymentSuccess}
-          onError={handlePaymentError}
-        />
-      </Card>
-
-      {/* Billing Address */}
-      <Card className="glass-panel p-6">
-        <Heading level={4} size="title"  className="mb-4">Billing address</Heading>
-        <div className="grid grid-cols-2 gap-4">
-          <FormField>
-            <FormLabel>First name</FormLabel>
-            <FormControl><Input /></FormControl>
-          </FormField>
-          <FormField>
-            <FormLabel>Last name</FormLabel>
-            <FormControl><Input /></FormControl>
-          </FormField>
-          <FormField className="col-span-2">
-            <FormLabel>Address</FormLabel>
-            <FormControl><Input /></FormControl>
-          </FormField>
-          {/* City, State, ZIP */}
-        </div>
-      </Card>
-    </div>
-
-    {/* Right: Order Summary */}
-    <div className="lg:sticky lg:top-8 self-start">
-      <Card className="glass-panel p-6">
-        <Heading level={4} size="title"  className="mb-4">Order summary</Heading>
-        <div className="space-y-3">
-          {items.map(item => (
-            <div key={item.id} className="flex items-center justify-between">
-              <Typography variant="small">{item.name}</Typography>
-              <Typography variant="small" className="font-medium">${item.price}</Typography>
-            </div>
-          ))}
-        </div>
-        <Separator className="my-4" />
-        <div className="space-y-2">
-          <div className="flex justify-between text-text-secondary text-sm">
-            <span>Subtotal</span><span>${subtotal}</span>
-          </div>
-          <div className="flex justify-between text-text-secondary text-sm">
-            <span>Tax</span><span>${tax}</span>
-          </div>
-        </div>
-        <Separator className="my-4" />
-        <div className="flex justify-between font-bold text-lg">
-          <span>Total</span><span>${total}</span>
-        </div>
-
-        {/* Coupon input */}
-        <div className="mt-4">
-          <InputGroup>
-            <Input placeholder="Coupon code" />
-            <Button variant="outline">Apply</Button>
-          </InputGroup>
-        </div>
-      </Card>
-    </div>
-  </div>
-
-  {/* Trust badges */}
-  <div className="flex items-center justify-center gap-6 mt-8 text-text-tertiary">
-    <div className="flex items-center gap-1 text-sm">
-      <ShieldIcon size={14} /> SSL Encrypted
-    </div>
-    <div className="flex items-center gap-1 text-sm">
-      <RefreshIcon size={14} /> 30-day guarantee
-    </div>
-  </div>
-</div>
-```
-
-### 3. Success Page
-
-```tsx
-<div className="min-h-dvh flex flex-col items-center justify-center p-6 text-center">
-  <ConfettiBurst trigger={showCelebration} />
-  <SuccessCheck className="mb-6" />
-  <Heading level={2} size="section" >Payment successful!</Heading>
-  <Typography variant="p" className="text-text-secondary mt-2 mb-2">
-    Order #{orderId} confirmed.
-  </Typography>
-  <Typography variant="small" className="text-text-tertiary mb-8">
-    We've sent a confirmation to {email}
-  </Typography>
-  <div className="flex gap-4">
-    <Button asChild><a href="/dashboard">Go to Dashboard</a></Button>
-    <Button variant="outline" asChild><a href={receiptUrl}>View Receipt</a></Button>
-  </div>
-</div>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-
-CHECKOUT PAGE:
-BUDGET: 400ms | SPRING: snappy | REDUCED: opacity-only
-
-T+0ms     [header]    Minimal header visible        (instant)
-T+50ms    [contact]   Contact section               {fadeInUp, snappy}
-T+150ms   [payment]   Payment section               {fadeInUp, snappy}
-T+250ms   [address]   Billing address section       {fadeInUp, snappy}
-T+100ms   [summary]   Order summary (right column)  {fadeIn, snappy}
-
-SUCCESS PAGE:
-BUDGET: 500ms | SPRING: bouncy | REDUCED: check visible, no confetti
-
-T+0ms     [confetti]  ConfettiBurst fires            (particle animation)
-T+100ms   [check]     SuccessCheck animates           {scaleIn, bouncy}
-T+300ms   [title]     Success title fades in          {fadeInUp, gentle}
-T+400ms   [details]   Order details fade in           {fadeIn, snappy}
-T+500ms   [actions]   Buttons fade in                 {fadeIn, snappy}
-
-REDUCED MOTION: All items visible immediately, no confetti
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `CheckoutForm` | `@vadimcomanescu/nadicode-design-system/checkout-form` | Stripe Elements payment |
-| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Section containers, order summary |
-| `Input` | `@vadimcomanescu/nadicode-design-system/input` | Contact, address fields |
-| `InputGroup` | `@vadimcomanescu/nadicode-design-system/input-group` | Coupon input + apply button |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Submit, apply, navigation |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, text |
-| `Separator` | `@vadimcomanescu/nadicode-design-system/separator` | Price dividers |
-| `Logo` | `@vadimcomanescu/nadicode-design-system/logo` | Brand mark |
-| `Form` / `FormField` | `@vadimcomanescu/nadicode-design-system/form` | Form management |
-| `ConfettiBurst` | `@vadimcomanescu/nadicode-design-system/confetti-burst` | Success celebration |
-| `SuccessCheck` | `@vadimcomanescu/nadicode-design-system/success-check` | Success checkmark |
-| `Alert` | `@vadimcomanescu/nadicode-design-system/alert` | Payment errors |
-| `Spinner` | `@vadimcomanescu/nadicode-design-system/spinner` | Processing state |
-
-### Allowed (optional)
-
-`CheckoutFormDemo`, `Label`, `Select` (country picker), `NativeSelect`, `Badge`, `Tooltip`
-
-### Forbidden
-
-`Sidebar`, `NavigationMenu`, `DataTable`, chart components, agentic components, decorative effects, marketing blocks
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `default` | Page loaded | Form ready for input |
-| `submitting` | Pay button clicked | Button shows Spinner, form disabled |
-| `processing` | Stripe processing | "Processing payment..." message |
-| `error` | Payment failed | `Alert` variant="destructive" with error + retry |
-| `success` | Payment succeeded | Redirect to success page with celebration |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Layout | Order Summary |
-|------------|--------|---------------|
-| Mobile | Single column, summary above form | Collapsible or stacked above form |
-| `lg:` | 2-column: form (flex-1) + summary (380px sticky) | Sticky sidebar |
-
----
-
-## Styling Rules
-
-- Form sections: `glass-panel p-6`
-- Order summary: `glass-panel p-6`, sticky on desktop
-- Trust badges: `text-text-tertiary`, small, centered
-- No heavy decoration (reduce friction)
-- Minimal navigation (prevent abandonment)
-- Labels always stacked above inputs
-
----
-
-## Accessibility
-
-- Payment form has proper labels (Stripe Elements handle internal a11y)
-- Error messages use `role="alert"`
-- Form fields have `autocomplete` attributes (email, name, address)
-- Tab order: contact -> payment -> address -> submit
-- Success page auto-announces via `aria-live`
-
----
-
-## Reference Implementations
-
-- `src/components/ui/CheckoutForm.tsx`
-- `src/components/ui/CheckoutFormDemo.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```