@vadimcomanescu/nadicode-design-system 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/.agents/skills/seed/SKILL.md +15 -4
  2. package/.agents/skills/seed/contract.md +4 -0
  3. package/.agents/skills/seed/references/blocks.md +57 -55
  4. package/.agents/skills/seed/references/components.md +98 -101
  5. package/dist/catalog.json +3217 -0
  6. package/package.json +6 -3
package/.agents/skills/seed/SKILL.md CHANGED
@@ -18,14 +18,25 @@ In consumer apps, Seed runtime normally comes from an exact released `@vadimcoma
18
18
 
19
19
  Consumer scaffold contract: brand customization stays palette-only unless the task is explicitly DS development. In seeded apps, edit seed-palette.css in the app src/ root for brand colors. Do not tell consumers to edit the package tokens stylesheet, `src/lib/tokens.config.js`, or font/layout wiring as part of normal branding.
20
20
 
21
+ ## Component Discovery
22
+
23
+ For exact component names, variant values, props, and tiers, read the machine-readable catalog:
24
+
25
+ ```
26
+ cat node_modules/@vadimcomanescu/nadicode-design-system/dist/catalog.json
27
+ ```
28
+
29
+ The catalog is auto-generated from source and always accurate. Use exact variant names from the catalog. Do not guess.
30
+
21
31
  ## Read Order
22
32
 
23
33
  1. **This file** -- router, quick references, forbidden patterns
24
34
  2. **`contract.md`** -- binary rules, package integration contract
25
- 3. **`intent-map.md`** -- intent decision tree + recipe index
26
- 4. **`recipes/<page-type>.md`** -- matching recipe for your page
27
- 5. **`references/`** -- deep dives as needed
28
- 6. **`references/brand-override.md`** -- palette-only brand customization guide for seeded apps
35
+ 3. **catalog.json** (in dist/) -- machine-readable component metadata (variants, props, tiers)
36
+ 4. **`intent-map.md`** -- intent decision tree + recipe index
37
+ 5. **`recipes/<page-type>.md`** -- matching recipe for your page
38
+ 6. **`references/`** -- deep dives as needed
39
+ 7. **`references/brand-override.md`** -- palette-only brand customization guide for seeded apps
29
40
 
30
41
  ---
31
42
 
package/.agents/skills/seed/contract.md CHANGED
@@ -7,6 +7,10 @@ Binary rules for consumer apps using the Seed Design System. Every rule is non-n
7
7
  - Apply only to the explicit migration scope you were given.
8
8
  - Do not edit files outside scope unless the build is blocked by a required wiring step.
9
9
 
10
+ ## Component Catalog
11
+
12
+ Read catalog.json (shipped in the package under dist/) for the authoritative list of components, variant names, props, and tiers. Verify component names and variant values against the catalog. Do not guess variant names or prop values.
13
+
10
14
  ## Import Rules
11
15
 
12
16
  1. Import Seed primitives, blocks, charts, icons, and text effects from `@vadimcomanescu/nadicode-design-system/*` subpaths. Do not vendor or recreate DS runtime files inside the scaffold.
package/.agents/skills/seed/references/blocks.md CHANGED
@@ -8,101 +8,103 @@ Run `npm run docs:inventory` for the current filesystem-backed list.
8
8
 
9
9
  | Block | Purpose | Key Props |
10
10
  | --- | --- | --- |
11
- | LoginBlock | Email/password login with social OAuth | `type`, `variant`, `showSocial`, `title`, `description`, `onLogin`, `googleAction`, `forgotPasswordHref`, `signUpHref`, `signInHref` |
12
- | SignUpBlock | Registration form | `onSubmit`, `showSocial` |
13
- | PasswordRecoveryBlock | Password reset request | `onSubmit` |
14
- | ResetPasswordBlock | New password entry (from email link) | `onSubmit` |
15
- | TwoFactorChallengeBlock | 2FA code entry challenge | `onVerify` |
16
- | TwoFactorSetupBlock | 2FA setup with QR code | `qrCodeUrl`, `secret` |
17
- | AccountLockedBlock | Account locked notification | `onContact`, `reason` |
18
- | AuthSuccessBlock | Generic auth success state | `title`, `description`, `onContinue` |
19
- | AuthLayout | Split-screen auth layout wrapper | `children` |
11
+ | AccountLockedBlock | Account locked notification | `reason`, `unlockMinutes`, `onContactSupport`, `onBackToLogin`, `title`, `description` |
12
+ | AuthLayout | Split-screen auth layout wrapper | `mode`, `action`, `error`, `googleAction`, `labels` |
13
+ | AuthSuccessBlock | Generic auth success state | `icon`, `title`, `description`, `buttonText`, `onContinue`, `autoRedirectSeconds` |
14
+ | LoginBlock | Email/password login with social OAuth | `type`, `showSocial`, `labels`, `action`, `error`, `onLogin`, `googleAction`, `forgotPasswordHref`, `signUpHref`, `signInHref` |
15
+ | PasswordRecoveryBlock | Password reset request | `mode`, `onSubmit`, `onBackToLogin`, `title`, `description`, `buttonText`, `successTitle` |
16
+ | ResetPasswordBlock | New password entry (from email link) | `onSubmit`, `onBackToLogin`, `title`, `description` |
17
+ | SignUpBlock | Registration form | `title`, `description`, `showSocial`, `signInHref`, `onSubmit` |
18
+ | TwoFactorChallengeBlock | 2FA code entry challenge | `onVerify`, `onUseBackupCode`, `onBackToLogin`, `error`, `title`, `description`, `backupCodeLabel` |
19
+ | TwoFactorSetupBlock | 2FA setup with QR code | `qrCodeUrl`, `secret`, `backupCodes`, `onVerify`, `onComplete`, `title`, `description` |
20
20
 
21
21
  ## Marketing
22
22
 
23
23
  | Block | Purpose | Key Props |
24
24
  | --- | --- | --- |
25
- | HeroBlock | Full hero with gradient text | `title`, `subtitle`, `cta` |
26
- | HeroSectionBlock | Alternate hero layout | `title`, `description`, `actions` |
27
- | FeatureBlock | Single feature showcase | `title`, `description`, `icon` |
28
- | FeatureGridBlock | Multi-feature grid layout | `features: Array<{title, description, icon}>` |
29
- | PricingBlock | Pricing cards comparison | `plans: Array<Plan>` |
30
- | TestimonialsBlock | Customer testimonial carousel/grid | `testimonials: Array<Testimonial>` |
31
- | CallToActionBlock | Call-to-action section | `title`, `description`, `action` |
32
- | FAQBlock | FAQ accordion | `items: Array<{question, answer}>` |
33
- | ComparisonBlock | Side-by-side feature comparison | `items` |
34
- | SocialProofBlock | Social proof metrics/logos | `metrics`, `logos` |
35
- | StatsMarketingBlock | Marketing statistics display | `stats: Array<{label, value}>` |
36
- | LogoCloud | Partner/client logo grid | `logos: Array<{src, alt}>` |
37
- | ProcessFlowBlock | "How it works" numbered step sequence | `steps: Array<{title, description, icon?}>`, `badge?` |
38
- | AgentProfileGridBlock | Agent/worker profile card grid ("Meet your AI team") | `agents: Array<{name, role, description, avatar, capabilities?, status?}>`, `columns?` |
39
- | SolutionShowcaseBlock | Problem → Solution → Output narrative with color-coded arc | `sections: Array<{label, title, description, bullets}>`, `badge?` |
25
+ | AgentProfileGridBlock | Agent/worker profile card grid ("Meet your AI team") | `title`, `description`, `agents`, `columns` |
26
+ | CallToActionBlock | Call-to-action section | - |
27
+ | ComparisonBlock | Side-by-side feature comparison | `plans`, `title`, `description` |
28
+ | FAQBlock | FAQ accordion | `items`, `title`, `description` |
29
+ | FeatureBlock | Single feature showcase | - |
30
+ | FeatureGridBlock | Multi-feature grid layout | - |
31
+ | HeroBlock | Full hero with gradient text | - |
32
+ | HeroSectionBlock | Alternate hero layout | - |
33
+ | LogoCloud | Partner/client logo grid | `title`, `logos` |
34
+ | PricingBlock | Pricing cards comparison | - |
35
+ | ProcessFlowBlock | "How it works" numbered step sequence | `title`, `description`, `badge`, `steps` |
36
+ | SocialProofBlock | Social proof metrics/logos | - |
37
+ | SolutionShowcaseBlock | Problem -> Solution -> Output narrative with color-coded arc | `title`, `description`, `badge`, `sections` |
38
+ | StatsMarketingBlock | Marketing statistics display | - |
39
+ | TestimonialsBlock | Customer testimonial carousel/grid | - |
40
40
 
41
41
  ## Navigation
42
42
 
43
43
  | Block | Purpose | Key Props |
44
44
  | --- | --- | --- |
45
- | HeaderBlock | Site header with nav links | `logo`, `links`, `actions` |
46
- | FooterBlock | Site footer with link columns | `columns`, `social`, `legal` |
47
- | BannerBlock | Top-of-page promotional banner | `message`, `action`, `dismissible` |
48
- | NotFoundBlock | 404 page content | `title`, `description`, `action` |
49
- | NavUser | Sidebar user menu with dropdown | `user: {name, email, avatar?}`, `items?`, `footer?` |
45
+ | BannerBlock | Top-of-page promotional banner | `variant`, `dismissible`, `onDismiss` |
46
+ | FooterBlock | Site footer with link columns | - |
47
+ | HeaderBlock | Site header with nav links | - |
48
+ | NavUser | Sidebar user menu with dropdown | `user`, `name`, `email`, `avatar`, `items`, `footer` |
49
+ | NotFoundBlock | 404 page content | `title`, `description`, `backHref`, `backLabel` |
50
50
 
51
51
  ## Dashboard & Data
52
52
 
53
53
  | Block | Purpose | Key Props |
54
54
  | --- | --- | --- |
55
- | StatsBlock | KPI statistics cards | `stats: Array<{label, value, change}>` |
56
- | ChartBlock | Single chart container | `title`, `chart`, `description` |
57
- | ChartCollectionBlock | Multiple chart grid | `charts: Array<ChartConfig>` |
58
- | BarChartBlock | Pre-configured bar chart | `data`, `title` |
59
- | InteractiveAreaChartBlock | Zoomable/interactive area chart | `data`, `title` |
60
- | HeatmapChartBlock | Heatmap visualization | `data`, `title` |
61
- | UsageDonutBlock | Usage/quota donut chart | `used`, `total`, `label` |
62
- | DataGridBlock | Data grid/table block | `columns`, `data` |
63
- | ActivityFeedBlock | Activity/event timeline | `activities: Array<Activity>` |
64
- | CodeBlock | Syntax-highlighted code display | `code`, `language`, `title` |
55
+ | ActivityFeedBlock | Activity/event timeline | `activities`, `title` |
56
+ | BarChartBlock | Pre-configured bar chart | - |
57
+ | ChartBlock | Single chart container | `data`, `config`, `title`, `description` |
58
+ | ChartCollectionBlock | Multiple chart grid | - |
59
+ | CodeBlock | Syntax-highlighted code display | - |
60
+ | DataGridBlock | Data grid/table block | `data`, `columns`, `title`, `description` |
61
+ | HeatmapChartBlock | Heatmap visualization | - |
62
+ | InteractiveAreaChartBlock | Zoomable/interactive area chart | - |
63
+ | StatsBlock | KPI statistics cards | - |
64
+ | UsageDonutBlock | Usage/quota donut chart | - |
65
65
 
66
66
  ## Application
67
67
 
68
68
  | Block | Purpose | Key Props |
69
69
  | --- | --- | --- |
70
- | SettingsLayout | Settings page with nav sidebar | `sections`, `children` |
71
- | ChatLayout | Chat application layout | `messages`, `onSend` |
72
- | OnboardingBlock | Multi-step onboarding wizard | `steps: Array<Step>` |
73
- | WizardBlock | Generic step-by-step wizard | `steps`, `onComplete` |
74
- | CreateBlock | Entity creation form | `fields`, `onSubmit` |
75
- | DirectoryBlock | User/item directory with search | `items`, `onSearch` |
76
- | ChangelogBlock | Version changelog display | `entries: Array<ChangelogEntry>` |
77
- | IntegrationsBlock | Integration marketplace grid | `integrations: Array<Integration>` |
78
- | ContactBlock | Contact form | `onSubmit` |
70
+ | ChangelogBlock | Version changelog display | `entries`, `title` |
71
+ | ChatLayout | Chat application layout | `initialMessages`, `assistantName`, `assistantStatus`, `placeholder` |
72
+ | ContactBlock | Contact form | `onSubmit`, `title`, `description`, `namePlaceholder`, `emailPlaceholder`, `messagePlaceholder`, `successTitle`, `submitLabel` |
73
+ | CreateBlock | Entity creation form | `title`, `description`, `submitLabel`, `onSubmit` |
74
+ | DirectoryBlock | User/item directory with search | `navItems`, `projects` |
75
+ | IntegrationsBlock | Integration marketplace grid | - |
76
+ | KanbanDemoBlock | Kanban board demo with sample data | - |
77
+ | OnboardingBlock | Multi-step onboarding wizard | `steps`, `title`, `onToggle` |
78
+ | SettingsLayout | Settings page with nav sidebar | `links`, `title`, `subtitle`, `defaultActive`, `renderContent` |
79
+ | WizardBlock | Generic step-by-step wizard | `title`, `description`, `steps`, `onFinish` |
79
80
 
80
81
  ## Content & Media
81
82
 
82
83
  | Block | Purpose | Key Props |
83
84
  | --- | --- | --- |
84
- | GalleryBlock | Image/media gallery grid | `items: Array<GalleryItem>` |
85
- | AudioVisualizerBlock | Audio visualization display | `audioSrc` |
86
- | NewsletterBlock | Email newsletter signup | `onSubscribe` |
85
+ | AudioVisualizerBlock | Audio visualization display | - |
86
+ | GalleryBlock | Image/media gallery grid | `images`, `columns`, `title` |
87
+ | NewsletterBlock | Email newsletter signup | `onSubscribe`, `title`, `description` |
87
88
 
88
89
  ## User
89
90
 
90
91
  | Block | Purpose | Key Props |
91
92
  | --- | --- | --- |
92
- | TeamBlock | Team members grid with roles/avatars | `members: Array<Member>` |
93
- | InviteUserModal | Invite user flow modal | `onInvite?`, `onInvited?` |
93
+ | TeamBlock | Team members grid with roles/avatars | - |
94
94
 
95
95
  ## AI/Voice
96
96
 
97
97
  | Block | Purpose | Key Props |
98
98
  | --- | --- | --- |
99
- | VoiceAgentCard | AI voice agent interface card | `agent`, `state`, `selected?`, `onSelect?` |
99
+ | VoiceAgentCard | AI voice agent interface card | `agent`, `state`, `selected`, `onSelect` |
100
100
 
101
101
  ## Agentic
102
102
 
103
103
  | Block | Purpose | Key Props |
104
104
  | --- | --- | --- |
105
- | AgentConversationBlock | Agent conversation UI (messages, tool calls, thinking) | `messages: ConversationMessage[]` |
105
+ | AgentConversationBlock | Agent conversation UI (messages, tool calls, thinking) | - |
106
+ | AgentRunOverviewBlock | Agent run summary with status, duration, and output | - |
107
+ | AgentWorkbenchBlock | Agent workbench layout with tool panels and conversation | - |
106
108
 
107
109
  ## Usage Pattern
108
110
 
package/.agents/skills/seed/references/components.md CHANGED
@@ -11,29 +11,29 @@ Tiers: **1**=Core (3+ recipes), **2**=Domain (1-2 recipes), **3**=Decorative (ma
11
11
  | Component | Path | Tier | Radix/Lib | Notes |
12
12
  |-----------|------|------|-----------|-------|
13
13
  | Button | `ui/Button` | 1 | `react-slot` | 8 variants (primary, secondary, outline, ghost, link, destructive, accent, glass), 4 sizes |
14
- | Input | `ui/Input` | 1 | - | size: sm/default/lg, props: label, error, startIcon, endIcon |
15
- | PasswordInput | `ui/PasswordInput` | 1 | - | Input with show/hide toggle |
16
- | Textarea | `ui/Textarea` | 1 | - | Auto-grow text area |
17
- | Select | `ui/Select` | 1 | `react-select` | Compound: Trigger, Content, Item, Group, Separator |
18
- | NativeSelect | `ui/NativeSelect` | 4 | - | Browser-native `<select>` styled |
14
+ | Calendar | `ui/Calendar` | 1 | `react-day-picker` | Calendar grid primitive |
19
15
  | Checkbox | `ui/Checkbox` | 1 | `react-checkbox` | With optional label |
20
- | Switch | `ui/Switch` | 1 | `react-switch` | Toggle switch |
21
- | RadioGroup | `ui/RadioGroup` | 1 | `react-radio-group` | RadioGroup + RadioGroupItem |
22
- | Slider | `ui/Slider` | 1 | `react-slider` | Range slider |
16
+ | CheckoutForm | `ui/CheckoutForm` | 2 | `@stripe/react-stripe-js` | Stripe Elements checkout form |
17
+ | CheckoutFormDemo | `ui/CheckoutFormDemo` | 2 | `@stripe/react-stripe-js` | Demo checkout with pre-wired state |
23
18
  | Combobox | `ui/Combobox` | 1 | `cmdk` | Searchable select |
24
- | TagInput | `ui/TagInput` | 1 | - | Multi-value tag input |
25
19
  | DatePicker | `ui/DatePicker` | 1 | `react-day-picker` | Single date picker |
26
20
  | DateRangePicker | `ui/DateRangePicker` | 1 | `react-day-picker` | Date range selection |
27
- | Calendar | `ui/Calendar` | 1 | `react-day-picker` | Calendar grid primitive |
28
- | InputOTP | `ui/InputOTP` | 1 | `input-otp` | OTP input with groups, slots, separators |
29
- | InputGroup | `ui/InputGroup` | 1 | - | Input + addon composition |
21
+ | Field | `ui/Field` | 1 | - | Generic field wrapper (label + error) |
22
+ | FileUpload | `ui/FileUpload` | 1 | - | Drag-and-drop file upload zone |
30
23
  | Form | `ui/Form` | 1 | `react-hook-form` | FormField, FormItem, FormLabel, FormControl, FormMessage |
31
24
  | FormWizard | `ui/FormWizard` | 1 | - | Multi-step form wizard |
32
- | Field | `ui/Field` | 1 | - | Generic field wrapper (label + error) |
25
+ | Input | `ui/Input` | 1 | - | size: sm/default/lg, props: label, error, startIcon, endIcon |
26
+ | InputGroup | `ui/InputGroup` | 1 | - | Input + addon composition |
27
+ | InputOTP | `ui/InputOTP` | 1 | `input-otp` | OTP input with groups, slots, separators |
33
28
  | Label | `ui/Label` | 1 | `react-label` | Accessible label |
34
- | FileUpload | `ui/FileUpload` | 1 | - | Drag-and-drop file upload zone |
35
- | CheckoutForm | `ui/CheckoutForm` | 2 | `@stripe/react-stripe-js` | Stripe Elements checkout form |
36
- | CheckoutFormDemo | `ui/CheckoutFormDemo` | 2 | `@stripe/react-stripe-js` | Demo checkout with pre-wired state |
29
+ | NativeSelect | `ui/NativeSelect` | 4 | - | Browser-native <select> styled |
30
+ | PasswordInput | `ui/PasswordInput` | 1 | - | Input with show/hide toggle |
31
+ | RadioGroup | `ui/RadioGroup` | 1 | `react-radio-group` | RadioGroup + RadioGroupItem |
32
+ | Select | `ui/Select` | 1 | `react-select` | Compound: Trigger, Content, Item, Group, Separator |
33
+ | Slider | `ui/Slider` | 1 | `react-slider` | Range slider |
34
+ | Switch | `ui/Switch` | 1 | `react-switch` | Toggle switch |
35
+ | TagInput | `ui/TagInput` | 1 | - | Multi-value tag input |
36
+ | Textarea | `ui/Textarea` | 1 | - | Auto-grow text area |
37
37
 
38
38
  ---
39
39
 
@@ -41,34 +41,40 @@ Tiers: **1**=Core (3+ recipes), **2**=Domain (1-2 recipes), **3**=Decorative (ma
41
41
 
42
42
  | Component | Path | Tier | Radix/Lib | Notes |
43
43
  |-----------|------|------|-----------|-------|
44
- | Card | `ui/Card` | 1 | - | Card, Header, Title, Description, Content, Footer |
44
+ | Accordion | `ui/Accordion` | 1 | `react-accordion` | Accordion, Item, Trigger, Content |
45
+ | Alert | `ui/Alert` | 1 | - | variant: default, destructive |
46
+ | AlertDialog | `ui/AlertDialog` | 1 | `react-alert-dialog` | Full compound set with actions |
47
+ | AnimatedTabs | `ui/AnimatedTabs` | 3 | - | Tabs with sliding indicator (layoutId) |
48
+ | AnnouncementBanner | `ui/AnnouncementBanner` | 1 | - | Top-of-page announcement |
45
49
  | Avatar | `ui/Avatar` | 1 | `react-avatar` | Avatar, AvatarImage, AvatarFallback |
46
50
  | AvatarUpload | `ui/AvatarUpload` | 1 | - | Avatar with upload functionality |
47
- | Badge | `ui/Badge` | 1 | - | variant: default, secondary, outline, destructive, success, warning |
48
- | RoleBadge | `ui/RoleBadge` | 4 | - | Role-specific badge styling (merge into Badge) |
49
- | Table | `ui/Table` | 1 | - | Table, Header, Body, Row, Head, Cell |
51
+ | Badge | `ui/Badge` | 1 | - | variant: primary, secondary, destructive, outline, accent |
52
+ | Breadcrumb | `ui/Breadcrumb` | 1 | - | Breadcrumb, List, Item, Link, Separator |
53
+ | Card | `ui/Card` | 1 | - | Card, Header, Title, Description, Content, Footer |
54
+ | Carousel | `ui/Carousel` | 1 | `embla-carousel-react` | Content, Item, Previous, Next |
55
+ | CheckStatus | `ui/CheckStatus` | 2 | - | Status check indicator component |
56
+ | DataFreshness | `ui/DataFreshness` | 2 | - | Data freshness/staleness indicator |
50
57
  | DataTable | `ui/DataTable` | 1 | `@tanstack/react-table` | Full-featured with sorting/filtering |
58
+ | Empty | `ui/Empty` | 1 | - | Empty state placeholder |
59
+ | Heading | `ui/Heading` | 1 | - | Semantic headings with explicit level + visual size |
60
+ | HoverCard | `ui/HoverCard` | 4 | `react-hover-card` | HoverCard, Trigger, Content |
61
+ | KanbanBoard | `ui/KanbanBoard` | 2 | - | Drag-and-drop kanban board component |
62
+ | Kbd | `ui/Kbd` | 1 | - | Keyboard shortcut display |
63
+ | MetricCard | `ui/MetricCard` | 2 | - | Single metric display card with label, value, and trend |
64
+ | Popover | `ui/Popover` | 1 | `react-popover` | Popover, Trigger, Content |
65
+ | Progress | `ui/Progress` | 1 | `react-progress` | Progress bar |
66
+ | ProgressRing | `ui/ProgressRing` | 2 | - | Circular progress ring indicator |
67
+ | PromoCard | `ui/PromoCard` | 4 | - | Promotional card (Card + glass-floating may replace) |
68
+ | RoleBadge | `ui/RoleBadge` | 4 | - | Role-specific badge styling (merge into Badge) |
51
69
  | Skeleton | `ui/Skeleton` | 1 | - | Loading placeholder |
52
70
  | Spinner | `ui/Spinner` | 1 | - | Loading spinner |
53
- | Progress | `ui/Progress` | 1 | `react-progress` | Progress bar |
54
- | Empty | `ui/Empty` | 1 | - | Empty state placeholder |
55
- | Timeline | `ui/Timeline` | 1 | - | Vertical timeline |
56
71
  | StatusDot | `ui/StatusDot` | 4 | - | Status indicator dot (can be CSS utility) |
57
- | Accordion | `ui/Accordion` | 1 | `react-accordion` | Accordion, Item, Trigger, Content |
72
+ | Table | `ui/Table` | 1 | - | Table, Header, Body, Row, Head, Cell |
58
73
  | Tabs | `ui/Tabs` | 1 | `react-tabs` | Tabs, TabsList, TabsTrigger, TabsContent |
59
- | AnimatedTabs | `ui/AnimatedTabs` | 3 | - | Tabs with sliding indicator (layoutId) |
74
+ | Timeline | `ui/Timeline` | 1 | - | Vertical timeline |
60
75
  | Tooltip | `ui/Tooltip` | 1 | `react-tooltip` | Provider, Tooltip, Trigger, Content |
61
- | HoverCard | `ui/HoverCard` | 4 | `react-hover-card` | HoverCard, Trigger, Content |
62
- | Popover | `ui/Popover` | 1 | `react-popover` | Popover, Trigger, Content |
63
- | Alert | `ui/Alert` | 1 | - | variant: default, destructive |
64
- | AlertDialog | `ui/AlertDialog` | 1 | `react-alert-dialog` | Full compound set with actions |
65
- | Breadcrumb | `ui/Breadcrumb` | 1 | - | Breadcrumb, List, Item, Link, Separator |
66
- | Kbd | `ui/Kbd` | 1 | - | Keyboard shortcut display |
67
- | PromoCard | `ui/PromoCard` | 4 | - | Promotional card (Card + glass-floating may replace) |
68
- | AnnouncementBanner | `ui/AnnouncementBanner` | 1 | - | Top-of-page announcement |
69
- | Heading | `ui/Heading` | 1 | - | Semantic headings with explicit `level` + visual `size` |
76
+ | TrendIndicator | `ui/TrendIndicator` | 2 | - | Trend direction indicator (up/down/neutral) |
70
77
  | Typography | `ui/Typography` | 1 | - | Body, small, and muted text only |
71
- | Carousel | `ui/Carousel` | 1 | `embla-carousel-react` | Content, Item, Previous, Next |
72
78
 
73
79
  ---
74
80
 
@@ -76,15 +82,16 @@ Tiers: **1**=Core (3+ recipes), **2**=Domain (1-2 recipes), **3**=Decorative (ma
76
82
 
77
83
  | Component | Path | Tier | Radix/Lib | Notes |
78
84
  |-----------|------|------|-----------|-------|
79
- | Sidebar | `ui/Sidebar` | 1 | - | Full system: Provider, Trigger, Content, Group, Menu |
80
- | NavigationMenu | `ui/NavigationMenu` | 1 | `react-navigation-menu` | Menu, List, Item, Trigger, Content |
81
- | Menubar | `ui/Menubar` | 4 | `react-menubar` | Rare in modern SaaS |
82
- | DropdownMenu | `ui/DropdownMenu` | 1 | `react-dropdown-menu` | Full compound set |
85
+ | Command | `ui/Command` | 1 | `cmdk` | Command palette primitive |
83
86
  | ContextMenu | `ui/ContextMenu` | 4 | `react-context-menu` | Rarely needed |
84
- | Pagination | `ui/Pagination` | 1 | - | Content, Item, Previous, Next |
87
+ | DropdownMenu | `ui/DropdownMenu` | 1 | `react-dropdown-menu` | Full compound set |
85
88
  | FloatingDock | `ui/FloatingDock` | 4 | - | macOS-style floating dock |
89
+ | LanguageSwitcher | `ui/LanguageSwitcher` | 2 | - | Locale/language selection switcher |
90
+ | Menubar | `ui/Menubar` | 4 | `react-menubar` | Rare in modern SaaS |
91
+ | NavigationMenu | `ui/NavigationMenu` | 1 | `react-navigation-menu` | Menu, List, Item, Trigger, Content |
92
+ | Pagination | `ui/Pagination` | 1 | - | Content, Item, Previous, Next |
86
93
  | SearchCommand | `ui/SearchCommand` | 1 | `cmdk` | Cmd+K search dialog |
87
- | Command | `ui/Command` | 1 | `cmdk` | Command palette primitive |
94
+ | Sidebar | `ui/Sidebar` | 1 | - | Full system: Provider, Trigger, Content, Group, Menu |
88
95
  | TreeView | `ui/TreeView` | 1 | - | Recursive collapsible tree with keyboard nav |
89
96
 
90
97
  ---
@@ -93,20 +100,22 @@ Tiers: **1**=Core (3+ recipes), **2**=Domain (1-2 recipes), **3**=Decorative (ma
93
100
 
94
101
  | Component | Path | Tier | Radix/Lib | Notes |
95
102
  |-----------|------|------|-----------|-------|
96
- | Dialog | `ui/Dialog` | 1 | `react-dialog` | Full compound set with close button |
97
103
  | AnimatedDialog | `ui/AnimatedDialog` | 3 | `react-dialog` | Dialog with motion spring animations |
98
- | Drawer | `ui/Drawer` | 1 | `vaul` | Mobile-friendly bottom drawer |
99
- | Sheet | `ui/Sheet` | 1 | `react-dialog` | Slide-in side panel |
100
104
  | AnimatedSheet | `ui/AnimatedSheet` | 3 | `react-dialog` | Sheet with motion animations |
105
+ | AspectRatio | `ui/AspectRatio` | 1 | `react-aspect-ratio` | Fixed aspect ratio container |
106
+ | BentoGrid | `ui/BentoGrid` | 1 | - | CSS grid layout system |
107
+ | Collapsible | `ui/Collapsible` | 4 | `react-collapsible` | Used by Sidebar internally |
108
+ | Dialog | `ui/Dialog` | 1 | `react-dialog` | Full compound set with close button |
109
+ | Drawer | `ui/Drawer` | 1 | `vaul` | Mobile-friendly bottom drawer |
110
+ | Grid | `layout/Grid` | 1 | - | CSS Grid wrapper |
111
+ | GridSystem | `layout/GridSystem` | 2 | - | Extended grid system with responsive column and gap utilities |
101
112
  | Resizable | `ui/Resizable` | 1 | `react-resizable-panels` | PanelGroup, Panel, Handle |
102
113
  | ScrollArea | `ui/ScrollArea` | 1 | `react-scroll-area` | Custom scrollbar |
103
- | Collapsible | `ui/Collapsible` | 4 | `react-collapsible` | Used by Sidebar internally |
104
- | BentoGrid | `ui/BentoGrid` | 1 | - | CSS grid layout system |
105
- | AspectRatio | `ui/AspectRatio` | 1 | `react-aspect-ratio` | Fixed aspect ratio container |
106
114
  | Separator | `ui/Separator` | 1 | `react-separator` | Horizontal/vertical divider |
115
+ | SettingsModal | `ui/SettingsModal` | 2 | - | Modal dialog for application settings |
116
+ | Sheet | `ui/Sheet` | 1 | `react-dialog` | Slide-in side panel |
107
117
  | Toggle | `ui/Toggle` | 4 | `react-toggle` | variant: default, outline |
108
118
  | ToggleGroup | `ui/ToggleGroup` | 4 | `react-toggle-group` | Group of toggles |
109
- | Grid | `layout/Grid` | 1 | - | CSS Grid wrapper |
110
119
 
111
120
  ---
112
121
 
@@ -115,15 +124,16 @@ Tiers: **1**=Core (3+ recipes), **2**=Domain (1-2 recipes), **3**=Decorative (ma
115
124
  | Component | Path | Tier | Notes |
116
125
  |-----------|------|------|-------|
117
126
  | AmbientGrid | `ui/AmbientGrid` | 3 | CSS grid overlay (24px cells, 0.06 opacity) |
127
+ | AnimatedBackground | `ui/AnimatedBackground` | 3 | CSS animated gradient background |
118
128
  | AuroraEffect | `ui/AuroraEffect` | 3 | Animated gradient aurora background |
129
+ | InfiniteSlider | `ui/InfiniteSlider` | 3 | Auto-scrolling content slider |
130
+ | MagneticElement | `ui/MagneticElement` | 3 | Magnetic cursor attraction |
119
131
  | MeteorShower | `ui/MeteorShower` | 3 | Falling meteor particles |
120
- | AnimatedBackground | `ui/AnimatedBackground` | 3 | CSS animated gradient background |
121
132
  | MouseEffect | `ui/MouseEffect` | 3 | Mouse-tracking effects (MouseGlow, MouseSpotlight) |
122
133
  | MovingBorder | `ui/MovingBorder` | 3 | Animated border rotation |
123
134
  | ProgressiveBlur | `ui/ProgressiveBlur` | 3 | Gradient blur effect |
135
+ | ShaderBackground | `ui/ShaderBackground` | 2 | 21 shader types with intent-based presets (hero, section, ambient, card) |
124
136
  | TiltCard | `ui/TiltCard` | 3 | 3D perspective tilt on hover |
125
- | MagneticElement | `ui/MagneticElement` | 3 | Magnetic cursor attraction |
126
- | InfiniteSlider | `ui/InfiniteSlider` | 3 | Auto-scrolling content slider |
127
137
 
128
138
  ---
129
139
 
@@ -133,15 +143,15 @@ All in `@vadimcomanescu/nadicode-design-system/text-effects/`.
133
143
 
134
144
  | Component | Path | Tier | Notes |
135
145
  |-----------|------|------|-------|
136
- | TextReveal | `ui/text-effects/TextReveal` | 3 | Scroll-triggered text reveal |
137
146
  | AnimatedGradientText | `ui/text-effects/AnimatedGradientText` | 3 | Animated gradient sweep on text |
138
- | FlipWords | `ui/text-effects/FlipWords` | 3 | Word cycling with flip animation |
139
- | StreamingText | `ui/text-effects/StreamingText` | 3 | ChatGPT-style streaming output |
140
- | ShimmeringText | `ui/text-effects/ShimmeringText` | 3 | Shimmer highlight sweep |
141
147
  | CountingNumber | `ui/text-effects/CountingNumber` | 3 | Animated number counter (also used in dashboard) |
142
- | MorphingText | `ui/text-effects/MorphingText` | 3 | SVG text morphing transitions |
148
+ | FlipWords | `ui/text-effects/FlipWords` | 3 | Word cycling with flip animation |
143
149
  | HighlightText | `ui/text-effects/HighlightText` | 3 | Animated highlight marker |
150
+ | MorphingText | `ui/text-effects/MorphingText` | 3 | SVG text morphing transitions |
151
+ | ShimmeringText | `ui/text-effects/ShimmeringText` | 3 | Shimmer highlight sweep |
144
152
  | SlidingNumber | `ui/text-effects/SlidingNumber` | 3 | Digit-by-digit sliding animation |
153
+ | StreamingText | `ui/text-effects/StreamingText` | 3 | ChatGPT-style streaming output |
154
+ | TextReveal | `ui/text-effects/TextReveal` | 3 | Scroll-triggered text reveal |
145
155
 
146
156
  ---
147
157
 
@@ -149,12 +159,12 @@ All in `@vadimcomanescu/nadicode-design-system/text-effects/`.
149
159
 
150
160
  | Component | Path | Tier | Notes |
151
161
  |-----------|------|------|-------|
162
+ | ConfettiBurst | `ui/ConfettiBurst` | 1 | Celebratory confetti animation |
163
+ | PageTransition | `ui/PageTransition` | 1 | Route transition wrapper (keyed on pathname) |
152
164
  | ScrollFadeIn | `ui/ScrollFadeIn` | 1 | Fade in on scroll intersection |
165
+ | SpringHover | `ui/SpringHover` | 3 | Spring-based hover effect wrapper |
153
166
  | StaggerChildren | `ui/StaggerChildren` | 1 | Stagger child element entrances |
154
167
  | StaggeredEntrance | `ui/StaggeredEntrance` | 3 | Sequential entrance animation |
155
- | PageTransition | `ui/PageTransition` | 1 | Route transition wrapper (keyed on pathname) |
156
- | ConfettiBurst | `ui/ConfettiBurst` | 1 | Celebratory confetti animation |
157
- | SpringHover | `ui/SpringHover` | 3 | Spring-based hover effect wrapper |
158
168
  | SuccessCheck | `ui/SuccessCheck` | 1 | Animated success checkmark |
159
169
 
160
170
  ---
@@ -165,14 +175,16 @@ Base `Chart.tsx` in `ui/` (not `ui/charts/`). The 7 chart variants in `ui/charts
165
175
 
166
176
  | Component | Path | Tier | Notes |
167
177
  |-----------|------|------|-------|
168
- | Chart | `ui/Chart` | 2 | Base config: ChartContainer, ChartTooltip, ChartLegend |
169
178
  | AreaChart | `ui/charts/AreaChart` | 2 | Recharts area chart |
170
179
  | BarChart | `ui/charts/BarChart` | 2 | Recharts bar chart |
180
+ | Chart | `ui/Chart` | 2 | Base config: ChartContainer, ChartTooltip, ChartLegend |
181
+ | ChartCard | `ui/ChartCard` | 2 | Card wrapper for chart display with title and description |
182
+ | HeatmapChart | `ui/charts/HeatmapChart` | 2 | Custom heatmap visualization |
171
183
  | LineChart | `ui/charts/LineChart` | 2 | Recharts line chart |
172
184
  | PieChart | `ui/charts/PieChart` | 2 | Recharts pie/donut chart |
173
185
  | RadarChart | `ui/charts/RadarChart` | 2 | Recharts radar chart |
174
186
  | RadialBarChart | `ui/charts/RadialBarChart` | 2 | Recharts radial bar chart |
175
- | HeatmapChart | `ui/charts/HeatmapChart` | 2 | Custom heatmap visualization |
187
+ | Sparkline | `ui/charts/Sparkline` | 2 | Inline sparkline chart for compact trend display |
176
188
 
177
189
  ---
178
190
 
@@ -181,9 +193,9 @@ Base `Chart.tsx` in `ui/` (not `ui/charts/`). The 7 chart variants in `ui/charts
181
193
  | Component | Path | Tier | Notes |
182
194
  |-----------|------|------|-------|
183
195
  | AgentAvatar | `ui/AgentAvatar` | 2 | AI agent avatar with idle/listening/speaking states |
184
- | Avatar3D | `ui/Avatar3D` | 2 | 3D avatar with Three.js |
185
196
  | AgentStatus | `ui/AgentStatus` | 2 | Agent connection status indicator |
186
197
  | AudioWaveform | `ui/AudioWaveform` | 2 | Real-time audio visualization |
198
+ | Avatar3D | `ui/Avatar3D` | 2 | 3D avatar with Three.js |
187
199
  | ConversationThread | `ui/ConversationThread` | 2 | Chat message thread |
188
200
 
189
201
  ---
@@ -192,40 +204,24 @@ Base `Chart.tsx` in `ui/` (not `ui/charts/`). The 7 chart variants in `ui/charts
192
204
 
193
205
  Components for AI agent interfaces, tool-use visualization, and multi-agent workflows.
194
206
 
195
- ### Core
196
-
197
207
  | Component | Path | Tier | Notes |
198
208
  |-----------|------|------|-------|
199
- | ToolCallCard | `ui/ToolCallCard` | 2 | Tool invocation with name, args, status, result |
200
- | ThinkingIndicator | `ui/ThinkingIndicator` | 2 | Animated "thinking..." for agent reasoning |
201
209
  | AgentMessageBubble | `ui/AgentMessageBubble` | 2 | Chat bubble with role-based styling |
202
- | ApprovalCard | `ui/ApprovalCard` | 2 | Human-in-the-loop approval/reject |
203
-
204
- ### Multi-Agent
205
-
206
- | Component | Path | Tier | Notes |
207
- |-----------|------|------|-------|
210
+ | AgentMetricsCard | `ui/AgentMetricsCard` | 2 | Agent performance metrics dashboard |
208
211
  | AgentTeamPanel | `ui/AgentTeamPanel` | 2 | Agent team members and statuses |
212
+ | AgentTerminal | `ui/AgentTerminal` | 2 | Terminal-style command output |
209
213
  | AgentTimeline | `ui/AgentTimeline` | 2 | Timeline of agent actions |
210
- | WorkflowGraph | `ui/WorkflowGraph` | 2 | Visual graph of workflow steps |
211
- | HandoffIndicator | `ui/HandoffIndicator` | 2 | Agent-to-agent task handoff |
212
-
213
- ### Observability
214
-
215
- | Component | Path | Tier | Notes |
216
- |-----------|------|------|-------|
217
- | ContextMeter | `ui/ContextMeter` | 2 | Context window usage visualization |
218
- | SourceCitation | `ui/SourceCitation` | 2 | Cited sources with links |
219
- | AgentMetricsCard | `ui/AgentMetricsCard` | 2 | Agent performance metrics dashboard |
220
- | MemoryInspector | `ui/MemoryInspector` | 2 | Agent memory/state inspector |
221
-
222
- ### Artifacts
223
-
224
- | Component | Path | Tier | Notes |
225
- |-----------|------|------|-------|
214
+ | ApprovalCard | `ui/ApprovalCard` | 2 | Human-in-the-loop approval/reject |
226
215
  | ArtifactCard | `ui/ArtifactCard` | 2 | Generated artifacts display |
227
216
  | CodeDiffViewer | `ui/CodeDiffViewer` | 2 | Side-by-side or unified diff view |
228
- | AgentTerminal | `ui/AgentTerminal` | 2 | Terminal-style command output |
217
+ | ContextMeter | `ui/ContextMeter` | 2 | Context window usage visualization |
218
+ | DiffStat | `ui/DiffStat` | 2 | Diff statistics display (additions/deletions) |
219
+ | HandoffIndicator | `ui/HandoffIndicator` | 2 | Agent-to-agent task handoff |
220
+ | MemoryInspector | `ui/MemoryInspector` | 2 | Agent memory/state inspector |
221
+ | SourceCitation | `ui/SourceCitation` | 2 | Cited sources with links |
222
+ | ThinkingIndicator | `ui/ThinkingIndicator` | 2 | Animated "thinking..." for agent reasoning |
223
+ | ToolCallCard | `ui/ToolCallCard` | 2 | Tool invocation with name, args, status, result |
224
+ | WorkflowGraph | `ui/WorkflowGraph` | 2 | Visual graph of workflow steps |
229
225
 
230
226
  ---
231
227
 
@@ -235,8 +231,8 @@ All in `src/components/ui/stepper/`. Distinct from FormWizard.
235
231
 
236
232
  | Component | Path | Tier | Notes |
237
233
  |-----------|------|------|-------|
238
- | Stepper | `ui/stepper/stepper` | 1 | Root stepper, exports `useStepper` hook |
239
234
  | Step | `ui/stepper/step` | 1 | Individual step |
235
+ | Stepper | `ui/stepper/stepper` | 1 | Root stepper, exports useStepper hook |
240
236
 
241
237
  ---
242
238
 
@@ -244,17 +240,18 @@ All in `src/components/ui/stepper/`. Distinct from FormWizard.
244
240
 
245
241
  | Component | Path | Tier | Notes |
246
242
  |-----------|------|------|-------|
247
- | ThemeToggle | `ui/ThemeToggle` | 1 | Light/dark/system theme switcher |
248
- | StyleToggle | `ui/StyleToggle` | 1 | Arctic/bloom style switcher |
249
- | Toast / Toaster | `ui/Toast`, `ui/Toaster` | 1 | `react-toast` based |
250
- | Sonner | `ui/Sonner` | 1 | Sonner toast integration |
251
- | NotificationCenter | `ui/NotificationCenter` | 4 | Overlaps with Sonner/Toast |
252
- | Logo | `ui/Logo` | 1 | Brand logo component |
253
243
  | BrandIcons | `ui/BrandIcons` | 1 | Google, GitHub brand SVGs |
254
- | SkipNav | `ui/SkipNav` | 1 | Accessibility skip navigation |
255
- | VisuallyHidden | `ui/VisuallyHidden` | 1 | Screen-reader-only content |
256
244
  | ButtonGroup | `ui/ButtonGroup` | 4 | Grouped button layout (use flex+gap) |
257
245
  | Item | `ui/Item` | 4 | Generic list item (too generic) |
246
+ | Logo | `ui/Logo` | 1 | Brand logo component |
247
+ | NotificationCenter | `ui/NotificationCenter` | 4 | Overlaps with Sonner/Toast |
248
+ | SkipNav | `ui/SkipNav` | 1 | Accessibility skip navigation |
249
+ | Sonner | `ui/Sonner` | 1 | Sonner toast integration |
250
+ | StyleToggle | `ui/StyleToggle` | 1 | Arctic/bloom style switcher |
251
+ | ThemeToggle | `ui/ThemeToggle` | 1 | Light/dark/system theme switcher |
252
+ | Toast | `ui/Toast` | 1 | Toast notification primitive |
253
+ | Toaster | `ui/Toaster` | 1 | Toast container and renderer |
254
+ | VisuallyHidden | `ui/VisuallyHidden` | 1 | Screen-reader-only content |
258
255
 
259
256
  ---
260
257
 
@@ -262,9 +259,9 @@ All in `src/components/ui/stepper/`. Distinct from FormWizard.
262
259
 
263
260
  | Tier | Count | Usage |
264
261
  |------|-------|-------|
265
- | 1 (Core) | ~48 | 3+ recipes, always available |
266
- | 2 (Domain) | ~30 | Agentic, charts, AI/voice, checkout |
267
- | 3 (Decorative) | ~27 | Marketing/showcase only |
262
+ | 1 (Core) | ~76 | 3+ recipes, always available |
263
+ | 2 (Domain) | ~43 | Agentic, charts, AI/voice, checkout |
264
+ | 3 (Decorative) | ~24 | Marketing/showcase only |
268
265
  | 4 (Deprecation) | ~14 | Evaluate for removal/consolidation |
269
266
 
270
267
  Use `npm run docs:inventory` for filesystem-backed inventory output.