@vadimcomanescu/nadicode-design-system 4.0.0 → 4.0.2

package/.agents/skills/seed/recipes/agency-home.md

@@ -1,311 +0,0 @@
-# Recipe: Agency Home
-
-AI agency/platform homepage oriented around selling AI services, showcasing process and outcomes.
-
-## Route Pattern
-
-`/` or `/home`
-
-## Shell
-
-`marketing-shell` (HeaderBlock + FooterBlock)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+------------------------------------------------+
-| HeaderBlock: Logo  [Nav links]  [CTA Button]   |
-+------------------------------------------------+
-|                                                 |
-|              HERO SECTION                       |
-|    Agency headline (centered)                   |
-|    Subtitle: what the agency delivers           |
-|    [Primary CTA]  [Secondary CTA]              |
-|    ShaderBackground / ambient visual            |
-|                                                 |
-+------------------------------------------------+
-| Logo Cloud: client logos (InfiniteSlider)       |
-+------------------------------------------------+
-|                                                 |
-|         SERVICES GRID (3-col)                   |
-|  +----------+ +----------+ +----------+         |
-|  | Service 1| | Service 2| | Service 3|         |
-|  +----------+ +----------+ +----------+         |
-|  +----------+ +----------+ +----------+         |
-|  | Service 4| | Service 5| | Service 6|         |
-|  +----------+ +----------+ +----------+         |
-|                                                 |
-+------------------------------------------------+
-|         PROCESS FLOW                            |
-|  [Step 1] → [Step 2] → [Step 3] → [Step 4]     |
-|  How we work: discovery → design → deliver      |
-+------------------------------------------------+
-|        OUTCOME STATS                            |
-|   +------+  +------+  +------+  +------+       |
-|   | ROI  |  | Time |  | Cost |  | Scale|       |
-|   | 340% |  | -60% |  | -45% |  | 10x |       |
-|   +------+  +------+  +------+  +------+       |
-+------------------------------------------------+
-|                                                 |
-|         TESTIMONIALS (carousel or grid)         |
-|                                                 |
-+------------------------------------------------+
-|                                                 |
-|         FAQ (Accordion)                         |
-|                                                 |
-+------------------------------------------------+
-|         FINAL CTA SECTION                       |
-|    Headline + [CTA Button]                      |
-+------------------------------------------------+
-| FooterBlock: columns + social + legal           |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Header
-
-```tsx
-<HeaderBlock logo={<Logo />} links={navLinks} actions={<Button>Book a Call</Button>} />
-```
-
-### 2. Hero Section
-
-```tsx
-<section className="relative py-24 md:py-32 overflow-hidden">
-  <ShaderBackground shader="meshGradient" intent="hero" opacity={0.25} />
-  <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <motion.div variants={heroStagger.container} initial="hidden" animate="visible">
-      <motion.div variants={heroStagger.child}>
-        <Badge variant="outline" className="mb-4">AI-Powered Solutions</Badge>
-      </motion.div>
-      <motion.h1 variants={heroStagger.child} className="text-4xl md:text-6xl font-bold tracking-tight">
-        {headline}
-      </motion.h1>
-      <motion.p variants={heroStagger.child} className="mt-6 text-lg md:text-xl text-text-secondary max-w-2xl mx-auto">
-        {subtitle}
-      </motion.p>
-      <motion.div variants={heroStagger.child} className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg">Book a Call</Button>
-        <Button size="lg" variant="outline">See Our Work</Button>
-      </motion.div>
-    </motion.div>
-  </div>
-</section>
-```
-
-### 3. Logo Cloud
-
-```tsx
-<section className="py-12 border-y border-border-subtle">
-  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <Typography variant="small" className="text-center text-text-tertiary mb-6">
-      Trusted by forward-thinking companies
-    </Typography>
-    <LogoCloud logos={clientLogos} />
-  </div>
-</section>
-```
-
-### 4. Services Grid
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div className="text-center mb-12">
-        <Heading level={2} size="section" >Our Services</Heading>
-        <Typography variant="lead" className="mt-4 text-text-secondary">
-          End-to-end AI solutions tailored to your business
-        </Typography>
-      </div>
-      <FeatureGridBlock features={services} columns={3} />
-    </div>
-  </section>
-</ScrollFadeIn>
-```
-
-### 5. Process Flow
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24 bg-muted">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div className="text-center mb-12">
-        <Heading level={2} size="section" >How We Work</Heading>
-        <Typography variant="lead" className="mt-4 text-text-secondary">
-          A proven process from discovery to deployment
-        </Typography>
-      </div>
-      <ProcessFlowBlock steps={processSteps} />
-    </div>
-  </section>
-</ScrollFadeIn>
-```
-
-### 6. Outcome Stats
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <StatsMarketingBlock stats={outcomeStats} />
-  </section>
-</ScrollFadeIn>
-```
-
-### 7. Testimonials
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24 bg-muted">
-    <TestimonialsBlock testimonials={testimonials} />
-  </section>
-</ScrollFadeIn>
-```
-
-### 8. FAQ
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <FAQBlock items={faqItems} />
-  </section>
-</ScrollFadeIn>
-```
-
-### 9. Final CTA
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <CallToActionBlock
-      title="Ready to transform your business with AI?"
-      description="Book a free discovery call and see how we can help."
-      action={<Button size="lg">Book a Call</Button>}
-    />
-  </section>
-</ScrollFadeIn>
-```
-
-### 10. Footer
-
-```tsx
-<FooterBlock columns={footerColumns} social={socialLinks} legal={legalLinks} />
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 1000ms (above-fold) | SPRING: dramatic (hero), snappy (rest) | REDUCED: opacity-only
-
-T+0ms     [nav]        Header visible                  (instant)
-T+100ms   [badge]      Agency badge                    {fadeIn, snappy}
-T+200ms   [headline]   Hero headline                   {fadeInUp, dramatic}
-T+350ms   [subtitle]   Hero subtitle                   {fadeInUp, dramatic}
-T+500ms   [ctas]       CTA buttons                     {fadeInUp, dramatic}
-T+700ms   [shader]     Hero visual/shader appears      {fadeIn, gentle}
-T+900ms   [logos]      Logo cloud fades in             {fadeIn, snappy}
-
-SCROLL-TRIGGERED (below fold):
-[services]     ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 100ms}
-[process]      ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 150ms}
-[stats]        ScrollFadeIn at 20% visible    {fadeInUp, snappy}
-[testimonials] ScrollFadeIn at 20% visible    {fadeIn, gentle}
-[faq]          ScrollFadeIn at 20% visible    {fadeInUp, snappy}
-[cta]          ScrollFadeIn at 20% visible    {scaleIn, gentle}
-
-REDUCED MOTION: All items visible immediately, opacity 0->1 in 10ms
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `HeaderBlock` | `@vadimcomanescu/nadicode-design-system/header-block` | Site navigation |
-| `FooterBlock` | `@vadimcomanescu/nadicode-design-system/footer-block` | Site footer |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | CTAs |
-| `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Hero tag |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, body text |
-| `ScrollFadeIn` | `@vadimcomanescu/nadicode-design-system/scroll-fade-in` | Below-fold animations |
-| `ProcessFlowBlock` | `@vadimcomanescu/nadicode-design-system/process-flow-block` | How-we-work process |
-| `FeatureGridBlock` | `@vadimcomanescu/nadicode-design-system/feature-grid-block` | Services grid |
-| `StatsMarketingBlock` | `@vadimcomanescu/nadicode-design-system/stats-marketing-block` | Outcome metrics (ROI, time saved) |
-
-### Allowed (optional)
-
-`HeroBlock`, `HeroSectionBlock`, `TestimonialsBlock`, `LogoCloud`, `FAQBlock`, `CallToActionBlock`, `SocialProofBlock`, `InfiniteSlider`, `CountingNumber`, `ShaderBackground`, `Card`, `BentoGrid`
-
-### Forbidden
-
-`Sidebar`, `DataTable`, `Form`, `FormWizard`, `AgentTeamPanel`, `AgentTerminal`, `SettingsLayout`, `ChatLayout`
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `default` | Page loaded | Full marketing content |
-| `mobile-navigation` | Hamburger tap | Mobile nav drawer/sheet |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Hero | Services | Process | Stats | Content Width |
-|------------|------|----------|---------|-------|---------------|
-| Mobile | Stacked, text-center | 1 col | Vertical stack | 2 col | px-4 |
-| `sm:` | Stacked, text-center | 2 col | Vertical stack | 2 col | px-6, max-w-7xl |
-| `lg:` | Centered | 3 col | Horizontal flow | 4 col | px-8, max-w-7xl |
-
----
-
-## Styling Rules
-
-- Hero: `ShaderBackground` for ambient glow, `glass-floating` for elevated cards
-- Section backgrounds alternate: `bg-background` and `bg-muted`
-- Process flow uses connected step indicators with semantic `border-accent`
-- Stats use `CountingNumber` for animated counters
-- CTAs use `Button` with `size="lg"` for prominence
-- No raw palette colors; semantic tokens only
-
----
-
-## Accessibility
-
-- Hero heading is `<h1>`, section headings are `<h2>`
-- Skip-nav link to main content
-- All images have alt text
-- CTA buttons have descriptive text (not just "Click here")
-- Mobile nav is keyboard accessible with focus trap
-- Process flow steps are in an ordered list
-
----
-
-## Reference Implementations
-
-- `src/app/landing/page.tsx`
-- `src/components/blocks/ProcessFlowBlock.tsx`
-- `src/components/blocks/FeatureGridBlock.tsx`
-- `src/components/blocks/StatsMarketingBlock.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/agents-chat.md

@@ -1,305 +0,0 @@
-# Recipe: Agent Chat
-
-3-region agent workbench for AI agent interaction, tool monitoring, and artifact inspection.
-
-## Route Patterns
-
-- `/agents`
-- `/voice-agents`
-
-## Shell
-
-`app-shell` (Sidebar + top bar + SearchCommand)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+--+------+---------------------------+---------+
-|  | Team | Conversation              | Work    |
-|S | Panel|                           | Panel   |
-|I |      | [AgentMessageBubble]      |         |
-|D | Agent| [ToolCallCard]            | [Tabs]  |
-|E | list | [ThinkingIndicator]       | Work    |
-|B | with | [AgentMessageBubble]      | Logs    |
-|A | status| [ApprovalCard]           | Files   |
-|R |      |                           |         |
-|  | Team | [AgentMessageBubble]      | Code    |
-|  | metrics|                         | Diff    |
-|  |      |                           |         |
-|  |      +---------------------------+ Artifact|
-|  |      | Composer                  | Card    |
-|  |      | [Textarea] [Send]         |         |
-+--+------+---------------------------+---------+
-
-Mobile: Conversation + Composer only.
-        Team panel: left Sheet. Work panel: right Sheet.
-```
-
----
-
-## Section Sequence
-
-### 1. Team & Status Panel (left, 280px)
-
-```tsx
-<aside className="hidden xl:flex flex-col w-[280px] border-r border-border bg-surface/50">
-  <div className="p-4 border-b border-border">
-    <Heading level={4} size="title" >Team</Heading>
-  </div>
-  <ScrollArea className="flex-1">
-    <AgentTeamPanel agents={agents} activeAgent={active} onSelect={setActive} />
-    <div className="p-4 border-t border-border">
-      <WorkflowGraph nodes={workflowNodes} edges={workflowEdges} />
-    </div>
-    <div className="p-4 mt-auto">
-      <AgentMetricsCard metrics={runMetrics} />
-    </div>
-  </ScrollArea>
-  <div className="p-4 border-t border-border">
-    <ContextMeter used={contextUsed} total={contextTotal} />
-  </div>
-</aside>
-```
-
-### 2. Conversation Region (center, flex-1)
-
-```tsx
-<main className="flex-1 flex flex-col min-w-0">
-  {/* Mobile header with panel triggers */}
-  <header className="xl:hidden flex items-center gap-2 p-3 border-b border-border">
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="ghost" size="icon"><UsersIcon size={16} /></Button>
-      </SheetTrigger>
-      <SheetContent side="left"><AgentTeamPanel ... /></SheetContent>
-    </Sheet>
-    <Heading level={4} size="title"  className="flex-1 text-center truncate">
-      {runTitle}
-    </Heading>
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="ghost" size="icon"><FileTextIcon size={16} /></Button>
-      </SheetTrigger>
-      <SheetContent side="right"><WorkPanel ... /></SheetContent>
-    </Sheet>
-  </header>
-
-  {/* Message thread */}
-  <ScrollArea className="flex-1 p-4" aria-live="polite">
-    {messages.map(msg => {
-      if (msg.type === "thinking") return <ThinkingIndicator key={msg.id} />
-      if (msg.type === "tool") return (
-        <ToolCallCard key={msg.id} name={msg.tool} args={msg.args}
-          status={msg.status} result={msg.result} />
-      )
-      if (msg.type === "approval") return (
-        <ApprovalCard key={msg.id} action={msg.action}
-          onApprove={() => approve(msg.id)} onReject={() => reject(msg.id)} />
-      )
-      return (
-        <AgentMessageBubble key={msg.id} role={msg.role}
-          content={msg.content} isStreaming={msg.isStreaming} />
-      )
-    })}
-  </ScrollArea>
-
-  {/* Composer */}
-  <div className="p-4 border-t border-border">
-    <div className="flex items-end gap-2">
-      <Textarea
-        placeholder="Type a message..."
-        className="flex-1 min-h-[44px] max-h-[200px]"
-        value={input}
-        onChange={e => setInput(e.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <Button onClick={handleSend} disabled={!input.trim() || isSending}>
-        <SendIcon size={16} />
-      </Button>
-    </div>
-  </div>
-</main>
-```
-
-### 3. Work Panel (right, 320px)
-
-```tsx
-<aside className="hidden xl:flex flex-col w-[320px] border-l border-border">
-  <Tabs value={workTab} onValueChange={setWorkTab} className="flex flex-col h-full">
-    <TabsList className="mx-4 mt-4">
-      <TabsTrigger value="work">Work</TabsTrigger>
-      <TabsTrigger value="logs">Logs</TabsTrigger>
-      <TabsTrigger value="files">Files</TabsTrigger>
-    </TabsList>
-    <ScrollArea className="flex-1">
-      <TabsContent value="work" className="p-4 space-y-4">
-        {artifacts.map(a => <ArtifactCard key={a.id} {...a} />)}
-      </TabsContent>
-      <TabsContent value="logs" className="p-4">
-        <AgentTerminal lines={logLines} />
-      </TabsContent>
-      <TabsContent value="files" className="p-4 space-y-4">
-        {diffs.map(d => <CodeDiffViewer key={d.file} {...d} />)}
-      </TabsContent>
-    </ScrollArea>
-  </Tabs>
-</aside>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 300ms (shell) | STREAMING: continuous | REDUCED: opacity-only
-
-T+0ms     [shell]     All panels visible           (instant)
-T+50ms    [team]      Team panel content fades in    {fadeIn, snappy}
-T+100ms   [messages]  Message history fades in       {fadeIn, snappy}
-T+200ms   [work]      Work panel content fades in    {fadeIn, snappy}
-
-NEW MESSAGE (runtime):
-T+0ms     [bubble]    Message slides up from bottom  {slideInUp, snappy, y: 16px}
-
-TOOL CALL (runtime):
-T+0ms     [toolcard]  Card expands in-place          {scaleIn, snappy}
-T+0ms     [status]    Status badge animates           {fadeIn, micro}
-
-THINKING (runtime):
-T+0ms     [dots]      Pulsing dot animation           (continuous CSS)
-
-APPROVAL (runtime):
-T+0ms     [card]      ApprovalCard scales in          {scaleIn, gentle}
-
-REDUCED MOTION: Items appear instantly, no slide/scale
-```
-
----
-
-## Required Components
-
-### Chat Primitives (preferred)
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `Conversation` | `.../conversation` | Scroll-aware container with auto-scroll |
-| `ChatMessage` | `.../chat-message` | Core message with avatar, content, actions |
-| `ChatResponse` | `.../chat-response` | Streaming markdown response renderer |
-| `ChatPromptInput` | `.../chat-prompt-input` | Chat text input with keyboard handling |
-| `ChatToolCall` | `.../chat-tool-call` | Tool call lifecycle wrapper |
-| `ChatActions` | `.../chat-actions` | Copy, retry, edit action buttons |
-| `ChatGreeting` | `.../chat-greeting` | Welcome greeting for sessions |
-| `ChatThinkingMessage` | `.../chat-thinking-message` | Animated thinking state |
-| `ChatShimmer` | `.../chat-shimmer` | Loading shimmer placeholder |
-| `ChatReasoning` | `.../chat-reasoning` | AI reasoning with auto-close |
-| `ChatConfirmation` | `.../chat-confirmation` | Action confirmation dialog |
-| `ChatSuggestion` | `.../chat-suggestion` | Follow-up prompt chips |
-| `ChatSources` | `.../chat-sources` | Source citations panel |
-| `ChatBranch` | `.../chat-branch` | Conversation fork navigation |
-| `ChatChainOfThought` | `.../chat-chain-of-thought` | Step-by-step reasoning |
-| `ChatPlan` | `.../chat-plan` | Collapsible plan card |
-| `ChatQueue` | `.../chat-queue` | Task queue with sections |
-| `ChatPromptInputAttachments` | `.../chat-prompt-input-attachments` | File attachment support |
-
-### Agent-Level Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `AgentTeamPanel` | `.../agent-team-panel` | Team member list |
-| `AgentStatus` | `.../agent-status` | Connection status |
-| `AgentTimeline` | `.../agent-timeline` | Action timeline |
-| `AgentMetricsCard` | `.../agent-metrics-card` | Run metrics |
-| `ConversationThread` | `.../conversation-thread` | Legacy message rendering |
-| `AgentMessageBubble` | `.../agent-message-bubble` | Individual messages |
-| `ThinkingIndicator` | `.../thinking-indicator` | Processing state |
-| `ToolCallCard` | `.../tool-call-card` | Tool invocations |
-| `ApprovalCard` | `.../approval-card` | Human approval flow |
-| `CodeDiffViewer` | `.../code-diff-viewer` | Code changes |
-| `ArtifactCard` | `.../artifact-card` | Generated outputs |
-| `AgentTerminal` | `.../agent-terminal` | Command output |
-| `WorkflowGraph` | `.../workflow-graph` | DAG execution flow |
-| `ContextMeter` | `.../context-meter` | Context window usage |
-| `SourceCitation` | `.../source-citation` | Referenced sources |
-| `Tabs` | `.../tabs` | Work panel tabs |
-| `Button` | `.../button` | Send, panel triggers |
-| `ScrollArea` | `.../scroll-area` | Scrollable regions |
-| `Sheet` | `.../sheet` | Mobile panel drawers |
-
-### Allowed (optional)
-
-`HandoffIndicator`, `MemoryInspector`, `StreamingText`, `Badge`, `Avatar`, `AgentAvatar`, `Resizable`
-
-### Forbidden
-
-`HeroBlock`, `PricingBlock`, `FormWizard`, `DataTable`, marketing blocks, decorative effects
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `empty` | No active run | `Empty` with "Start a conversation" message |
-| `loading` | History loading | Skeleton message bubbles |
-| `running` | Agent(s) active | Live conversation with streaming |
-| `thinking` | Agent processing | `ThinkingIndicator` in message thread |
-| `blocked-approval` | Awaiting user action | `ApprovalCard` prominent in thread |
-| `failed` | Run or tool error | Error message in thread + retry option |
-| `complete` | Run finished | Final message with artifacts summary |
-| `over-budget` | Cost/token threshold exceeded | Warning badge on metrics, pause prompt |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Team Panel | Conversation | Work Panel |
-|------------|------------|-------------|------------|
-| Mobile | Hidden (Sheet, left) | Full width + composer | Hidden (Sheet, right) |
-| `lg:` | Sidebar 280px | Flex-1 | Hidden (Sheet) |
-| `xl:` | Sidebar 280px | Flex-1 | Panel 320px |
-
----
-
-## Styling Rules
-
-- Panel backgrounds: `bg-surface/50` or `bg-background`
-- Panel borders: `border-border`
-- Message bubbles: styled by `AgentMessageBubble` (role-based)
-- Tool call cards: `glass-panel` with status color
-- Composer: `border-t border-border` with `p-4`
-- No raw palette colors
-
----
-
-## Accessibility
-
-- Message thread uses `aria-live="polite"` for streaming updates
-- All interactive controls have visible focus rings
-- Panel toggles on mobile have `aria-label`
-- Composer textarea has `aria-label="Message input"`
-- Approval buttons are clearly labeled (approve/reject)
-- Tab navigation for work panel is keyboard accessible
-
----
-
-## Reference Implementations
-
-- `src/app/voice-agents/page.tsx`
-- `src/components/pages/VoiceAgentsPage.tsx`
-- `src/components/blocks/AgentConversationBlock.tsx`
-- `src/components/blocks/ChatLayout.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```