@neuctra/ui-mcp 0.4.7 → 0.4.8

package/data/components.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema#",
   "package": "@neuctra/ui",
-  "version": "1.0.14",
-  "generatedAt": "2026-10-07T06:01:15.313Z",
+  "version": "1.0.15",
+  "generatedAt": "2026-10-25T16:43:03.355Z",
   "componentCount": 79,
   "components": [
     {
@@ -336,7 +336,7 @@
       "module": "AvatarGroup",
       "category": "data-display",
       "propsInterface": "AvatarGroupProps",
-      "description": "React avatar group with overlapping stack, background rings and an automatic +N overflow counter — built with Tailwind CSS.",
+      "description": "React avatar group with overlapping stack, background rings and an automatic +N overflow counter - built with Tailwind CSS.",
       "props": [
         {
           "name": "children",
@@ -551,7 +551,7 @@
       "module": "Breadcrumb",
       "category": "navigation",
       "propsInterface": "BreadcrumbProps",
-      "description": "Accessible React breadcrumb navigation with icons, custom separators, SPA click handlers and automatic ellipsis collapsing for deep paths — built with Tailwind CSS.",
+      "description": "Accessible React breadcrumb navigation with icons, custom separators, SPA click handlers and automatic ellipsis collapsing for deep paths - built with Tailwind CSS.",
       "props": [
         {
           "name": "items",
@@ -649,7 +649,7 @@
       "module": "Button",
       "category": "actions",
       "propsInterface": "ButtonProps",
-      "description": "The Button component is a flexible, highly customizable UI primitive built for SaaS applications. Perfect for React authentication UI, form builders, and SaaS dashboard interfaces. Built with Tailwind CSS for modern, responsive design. with TypeScript. It supports multiple variants, sizes, icon positioning, loading states, and full-width layout control — making it suitable for modern design systems and production apps.",
+      "description": "The Button component is a flexible, highly customizable UI primitive built for SaaS applications. Perfect for React authentication UI, form builders, and SaaS dashboard interfaces. Built with Tailwind CSS for modern, responsive design. with TypeScript. It supports multiple variants, sizes, icon positioning, loading states, and full-width layout control - making it suitable for modern design systems and production apps.",
       "props": [
         {
           "name": "children",
@@ -901,7 +901,7 @@
       "module": "Callout",
       "category": "feedback",
       "propsInterface": "CalloutProps",
-      "description": "A static inline alert that lives in the page flow — use it for persistent messages, while the toast system (ToastProvider) handles transient notifications.",
+      "description": "A static inline alert that lives in the page flow - use it for persistent messages, while the toast system (ToastProvider) handles transient notifications.",
       "props": [
         {
           "name": "type",
@@ -999,7 +999,7 @@
       "module": "Card",
       "category": "layout",
       "propsInterface": "CardProps",
-      "description": "Composable React card component with header, body and footer sections. Supports outline, elevated, ghost and transparent variants, hover states and padding scales — built with Tailwind CSS.",
+      "description": "Composable React card component with header, body and footer sections. Supports outline, elevated, ghost and transparent variants, hover states and padding scales - built with Tailwind CSS.",
       "props": [
         {
           "name": "variant",
@@ -1034,7 +1034,7 @@
       "module": "Card",
       "category": "layout",
       "propsInterface": "CardSectionProps",
-      "description": "Composable React card component with header, body and footer sections. Supports outline, elevated, ghost and transparent variants, hover states and padding scales — built with Tailwind CSS.",
+      "description": "Composable React card component with header, body and footer sections. Supports outline, elevated, ghost and transparent variants, hover states and padding scales - built with Tailwind CSS.",
       "props": [
         {
           "name": "children",
@@ -1055,7 +1055,7 @@
       "module": "Card",
       "category": "layout",
       "propsInterface": "CardSectionProps",
-      "description": "Composable React card component with header, body and footer sections. Supports outline, elevated, ghost and transparent variants, hover states and padding scales — built with Tailwind CSS.",
+      "description": "Composable React card component with header, body and footer sections. Supports outline, elevated, ghost and transparent variants, hover states and padding scales - built with Tailwind CSS.",
       "props": [
         {
           "name": "children",
@@ -1076,7 +1076,7 @@
       "module": "Card",
       "category": "layout",
       "propsInterface": "CardHeaderProps",
-      "description": "Composable React card component with header, body and footer sections. Supports outline, elevated, ghost and transparent variants, hover states and padding scales — built with Tailwind CSS.",
+      "description": "Composable React card component with header, body and footer sections. Supports outline, elevated, ghost and transparent variants, hover states and padding scales - built with Tailwind CSS.",
       "props": [
         {
           "name": "title",
@@ -1501,7 +1501,7 @@
       "module": "Chip",
       "category": "data-display",
       "propsInterface": "ChipProps",
-      "description": "React chip component for tags and filters. Solid, soft and outline variants, four colors, three sizes, icons and removable state — built with Tailwind CSS.",
+      "description": "React chip component for tags and filters. Solid, soft and outline variants, four colors, three sizes, icons and removable state - built with Tailwind CSS.",
       "props": [
         {
           "name": "label",
@@ -1648,7 +1648,7 @@
       "module": "CopyButton",
       "category": "actions",
       "propsInterface": "CopyButtonProps",
-      "description": "React copy-to-clipboard button with success feedback, secure-context fallback, sizes and label support — built with Tailwind CSS.",
+      "description": "React copy-to-clipboard button with success feedback, secure-context fallback, sizes and label support - built with Tailwind CSS.",
       "props": [
         {
           "name": "value",
@@ -1877,7 +1877,7 @@
       "module": "Divider",
       "category": "layout",
       "propsInterface": "DividerProps",
-      "description": "React divider component for separating content. Horizontal and vertical orientation, optional centered label, dashed style and spacing scales — built with Tailwind CSS.",
+      "description": "React divider component for separating content. Horizontal and vertical orientation, optional centered label, dashed style and spacing scales - built with Tailwind CSS.",
       "props": [
         {
           "name": "orientation",
@@ -2430,7 +2430,7 @@
       "module": "EmptyState",
       "category": "feedback",
       "propsInterface": "EmptyStateProps",
-      "description": "React empty state component with icon, title, description and call-to-action slot for no-results and empty-list screens — built with Tailwind CSS.",
+      "description": "React empty state component with icon, title, description and call-to-action slot for no-results and empty-list screens - built with Tailwind CSS.",
       "props": [
         {
           "name": "icon",
@@ -2736,7 +2736,7 @@
       "module": "Image",
       "category": "data-display",
       "propsInterface": "ImageProps",
-      "description": "The Image component provides a responsive and stylable wrapper for images. Supports aspect ratios, overlays, fallback content, lazy loading, click interactions, shadows, borders, and custom styles — all with full TypeScript support.",
+      "description": "The Image component provides a responsive and stylable wrapper for images. Supports aspect ratios, overlays, fallback content, lazy loading, click interactions, shadows, borders, and custom styles - all with full TypeScript support.",
       "props": [
         {
           "name": "src",
@@ -3976,7 +3976,7 @@
       "module": "Modal",
       "category": "overlay",
       "propsInterface": "ModalProps",
-      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter — making it easy to build consistent, accessible layouts.",
+      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter - making it easy to build consistent, accessible layouts.",
       "props": [
         {
           "name": "isOpen",
@@ -4058,7 +4058,7 @@
       "module": "Modal",
       "category": "overlay",
       "propsInterface": "ModalBodyProps",
-      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter — making it easy to build consistent, accessible layouts.",
+      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter - making it easy to build consistent, accessible layouts.",
       "props": [
         {
           "name": "children",
@@ -4091,7 +4091,7 @@
       "module": "Modal",
       "category": "overlay",
       "propsInterface": "ModalButtonProps",
-      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter — making it easy to build consistent, accessible layouts.",
+      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter - making it easy to build consistent, accessible layouts.",
       "props": [
         {
           "name": "onClose",
@@ -4126,7 +4126,7 @@
       "module": "Modal",
       "category": "overlay",
       "propsInterface": "ModalContentProps",
-      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter — making it easy to build consistent, accessible layouts.",
+      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter - making it easy to build consistent, accessible layouts.",
       "props": [
         {
           "name": "children",
@@ -4194,7 +4194,7 @@
       "module": "Modal",
       "category": "overlay",
       "propsInterface": "ModalFooterProps",
-      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter — making it easy to build consistent, accessible layouts.",
+      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter - making it easy to build consistent, accessible layouts.",
       "props": [
         {
           "name": "children",
@@ -4227,7 +4227,7 @@
       "module": "Modal",
       "category": "overlay",
       "propsInterface": "ModalHeaderProps",
-      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter — making it easy to build consistent, accessible layouts.",
+      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter - making it easy to build consistent, accessible layouts.",
       "props": [
         {
           "name": "title",
@@ -4302,7 +4302,7 @@
       "module": "Modal",
       "category": "overlay",
       "propsInterface": "ModalTriggerButtonProps",
-      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter — making it easy to build consistent, accessible layouts.",
+      "description": "The Modal component is a flexible and composable overlay system designed for dialogs, confirmations, and complex UI interactions. It includes structured subcomponents like ModalContent, ModalHeader, ModalBody, and ModalFooter - making it easy to build consistent, accessible layouts.",
       "props": [
         {
           "name": "children",
@@ -4337,7 +4337,7 @@
       "module": "NumberInput",
       "category": "form",
       "propsInterface": "NumberInputProps",
-      "description": "React number input with increment/decrement steppers, min/max clamping, arrow-key support, decimal input and spinbutton semantics — built with Tailwind CSS.",
+      "description": "React number input with increment/decrement steppers, min/max clamping, arrow-key support, decimal input and spinbutton semantics - built with Tailwind CSS.",
       "props": [
         {
           "name": "value",
@@ -4463,7 +4463,7 @@
       "module": "Pagination",
       "category": "navigation",
       "propsInterface": "PaginationProps",
-      "description": "Accessible React pagination with smart ellipsis, sibling count control, three sizes and full keyboard support — built with Tailwind CSS.",
+      "description": "Accessible React pagination with smart ellipsis, sibling count control, three sizes and full keyboard support - built with Tailwind CSS.",
       "props": [
         {
           "name": "page",
@@ -5519,7 +5519,7 @@
       "module": "Skeleton",
       "category": "feedback",
       "propsInterface": "SkeletonProps",
-      "description": "React skeleton loading component with text, circular and rectangular variants, multi-line paragraphs and reduced-motion support — built with Tailwind CSS.",
+      "description": "React skeleton loading component with text, circular and rectangular variants, multi-line paragraphs and reduced-motion support - built with Tailwind CSS.",
       "props": [
         {
           "name": "variant",
@@ -5708,7 +5708,7 @@
       "module": "Spinner",
       "category": "feedback",
       "propsInterface": "SpinnerProps",
-      "description": "Accessible React spinner component with five sizes, theme-aware colors and a screen-reader label — built with Tailwind CSS.",
+      "description": "Accessible React spinner component with five sizes, theme-aware colors and a screen-reader label - built with Tailwind CSS.",
       "props": [
         {
           "name": "size",
@@ -5750,7 +5750,7 @@
       "module": "Stat",
       "category": "data-display",
       "propsInterface": "StatProps",
-      "description": "React stat component for dashboards: KPI value, label, icon, trend indicator with up/down arrows and helper text — built with Tailwind CSS.",
+      "description": "React stat component for dashboards: KPI value, label, icon, trend indicator with up/down arrows and helper text - built with Tailwind CSS.",
       "props": [
         {
           "name": "label",
@@ -6168,7 +6168,7 @@
       "module": "Tabs",
       "category": "navigation",
       "propsInterface": "TabProps",
-      "description": "The Tabs component is a flexible, fully responsive UI primitive built with TypeScript. It supports multiple layouts, visual variants, keyboard navigation, and mobile-aware behaviors — making it ideal for dashboards, settings panels, and structured content navigation.",
+      "description": "The Tabs component is a flexible, fully responsive UI primitive built with TypeScript. It supports multiple layouts, visual variants, keyboard navigation, and mobile-aware behaviors - making it ideal for dashboards, settings panels, and structured content navigation.",
       "props": [
         {
           "name": "children",
@@ -6332,7 +6332,7 @@
       "module": "Tabs",
       "category": "navigation",
       "propsInterface": "TabListProps",
-      "description": "The Tabs component is a flexible, fully responsive UI primitive built with TypeScript. It supports multiple layouts, visual variants, keyboard navigation, and mobile-aware behaviors — making it ideal for dashboards, settings panels, and structured content navigation.",
+      "description": "The Tabs component is a flexible, fully responsive UI primitive built with TypeScript. It supports multiple layouts, visual variants, keyboard navigation, and mobile-aware behaviors - making it ideal for dashboards, settings panels, and structured content navigation.",
       "props": [
         {
           "name": "children",
@@ -6400,7 +6400,7 @@
       "module": "Tabs",
       "category": "navigation",
       "propsInterface": "TabPanelProps",
-      "description": "The Tabs component is a flexible, fully responsive UI primitive built with TypeScript. It supports multiple layouts, visual variants, keyboard navigation, and mobile-aware behaviors — making it ideal for dashboards, settings panels, and structured content navigation.",
+      "description": "The Tabs component is a flexible, fully responsive UI primitive built with TypeScript. It supports multiple layouts, visual variants, keyboard navigation, and mobile-aware behaviors - making it ideal for dashboards, settings panels, and structured content navigation.",
       "props": [
         {
           "name": "children",
@@ -6447,7 +6447,7 @@
       "module": "Tabs",
       "category": "navigation",
       "propsInterface": "TabPanelsProps",
-      "description": "The Tabs component is a flexible, fully responsive UI primitive built with TypeScript. It supports multiple layouts, visual variants, keyboard navigation, and mobile-aware behaviors — making it ideal for dashboards, settings panels, and structured content navigation.",
+      "description": "The Tabs component is a flexible, fully responsive UI primitive built with TypeScript. It supports multiple layouts, visual variants, keyboard navigation, and mobile-aware behaviors - making it ideal for dashboards, settings panels, and structured content navigation.",
       "props": [
         {
           "name": "children",
@@ -6480,7 +6480,7 @@
       "module": "Tabs",
       "category": "navigation",
       "propsInterface": "TabsProps",
-      "description": "The Tabs component is a flexible, fully responsive UI primitive built with TypeScript. It supports multiple layouts, visual variants, keyboard navigation, and mobile-aware behaviors — making it ideal for dashboards, settings panels, and structured content navigation.",
+      "description": "The Tabs component is a flexible, fully responsive UI primitive built with TypeScript. It supports multiple layouts, visual variants, keyboard navigation, and mobile-aware behaviors - making it ideal for dashboards, settings panels, and structured content navigation.",
       "props": [
         {
           "name": "children",
@@ -6639,7 +6639,7 @@
       "module": "TagInput",
       "category": "form",
       "propsInterface": "TagInputProps",
-      "description": "React tag input with Enter/comma commit, Backspace removal, duplicate filtering, max-tag limits, validation hook and error states — built with Tailwind CSS.",
+      "description": "React tag input with Enter/comma commit, Backspace removal, duplicate filtering, max-tag limits, validation hook and error states - built with Tailwind CSS.",
       "props": [
         {
           "name": "value",
@@ -7299,7 +7299,7 @@
       "module": "Timeline",
       "category": "data-display",
       "propsInterface": "TimelineProps",
-      "description": "React timeline component for activity feeds, order tracking and changelogs. Done/active/pending statuses, custom icons and timestamps — built with Tailwind CSS.",
+      "description": "React timeline component for activity feeds, order tracking and changelogs. Done/active/pending statuses, custom icons and timestamps - built with Tailwind CSS.",
       "props": [
         {
           "name": "items",
@@ -7570,7 +7570,7 @@
       "module": "Alert",
       "category": "feedback",
       "propsInterface": null,
-      "description": "The Toast component is a lightweight, react-hot-toast-style notification system. Call toast() from anywhere — no hook required — to trigger success, error, warning, info, or loading notifications, each with distinct styling and icons for clear visual communication.",
+      "description": "The Toast component is a lightweight, react-hot-toast-style notification system. Call toast() from anywhere - no hook required - to trigger success, error, warning, info, or loading notifications, each with distinct styling and icons for clear visual communication.",
       "props": [],
       "extends": [],
       "example": ""
@@ -7581,7 +7581,7 @@
       "module": "Alert",
       "category": "feedback",
       "propsInterface": "ToastProviderProps",
-      "description": "The Toast component is a lightweight, react-hot-toast-style notification system. Call toast() from anywhere — no hook required — to trigger success, error, warning, info, or loading notifications, each with distinct styling and icons for clear visual communication.",
+      "description": "The Toast component is a lightweight, react-hot-toast-style notification system. Call toast() from anywhere - no hook required - to trigger success, error, warning, info, or loading notifications, each with distinct styling and icons for clear visual communication.",
       "props": [
         {
           "name": "children",
@@ -7621,7 +7621,7 @@
       "module": "Toggle",
       "category": "form",
       "propsInterface": "ToggleProps",
-      "description": "React toggle button and segmented toggle group with single and multiple selection, icons, sizes and aria-pressed semantics — built with Tailwind CSS.",
+      "description": "React toggle button and segmented toggle group with single and multiple selection, icons, sizes and aria-pressed semantics - built with Tailwind CSS.",
       "props": [
         {
           "name": "pressed",
@@ -7670,7 +7670,7 @@
       "module": "ToggleGroup",
       "category": "form",
       "propsInterface": "ToggleGroupProps",
-      "description": "React toggle button and segmented toggle group with single and multiple selection, icons, sizes and aria-pressed semantics — built with Tailwind CSS.",
+      "description": "React toggle button and segmented toggle group with single and multiple selection, icons, sizes and aria-pressed semantics - built with Tailwind CSS.",
       "props": [
         {
           "name": "options",
@@ -7754,7 +7754,7 @@
       "module": "Tooltip",
       "category": "overlay",
       "propsInterface": "TooltipProps",
-      "description": "Accessible React tooltip shown on hover and keyboard focus. Four positions, show delay, Escape dismissal and WCAG-friendly behavior — built with Tailwind CSS.",
+      "description": "Accessible React tooltip shown on hover and keyboard focus. Four positions, show delay, Escape dismissal and WCAG-friendly behavior - built with Tailwind CSS.",
       "props": [
         {
           "name": "content",
@@ -7850,7 +7850,7 @@
       "module": "Alert",
       "category": "feedback",
       "propsInterface": null,
-      "description": "The Toast component is a lightweight, react-hot-toast-style notification system. Call toast() from anywhere — no hook required — to trigger success, error, warning, info, or loading notifications, each with distinct styling and icons for clear visual communication.",
+      "description": "The Toast component is a lightweight, react-hot-toast-style notification system. Call toast() from anywhere - no hook required - to trigger success, error, warning, info, or loading notifications, each with distinct styling and icons for clear visual communication.",
       "props": [],
       "extends": [],
       "example": ""

package/data/design-rules.json

@@ -31,19 +31,24 @@
       {
         "number": 44,
         "title": "Component Selection Principle",
-        "content": "When choosing a component, use this decision process:\n\n```text\nNeed navigation?\n→ Tabs / Breadcrumb / Pagination / Stepper\n→ For a sidebar or nav links: hand-build from Button (ghost/link variant) — no dedicated Navigation component exists\n\nNeed an action?\n→ Button / Icon Button\n\nNeed selection?\n→ Select / RadioGroup / Checkbox / Switch\n\nNeed compact metadata?\n→ Badge / Chip\n\nNeed grouped content?\n→ Card\n\nNeed persistent message?\n→ Callout\n\nNeed temporary message?\n→ the toast system (import { toast, ToastProvider } from \"@neuctra/ui\" — not a \"Toast\" component)\n\nNeed focused interaction?\n→ Modal / Drawer / Popover\n\nNeed clarification?\n→ Tooltip\n\nNeed structured records?\n→ Table / List\n\nNeed loading?\n→ Skeleton / Spinner\n\nNeed progress?\n→ Progress\n\nNeed hierarchy?\n→ Accordion / Breadcrumb / Stepper\n```\n\nNever select a component merely because it looks attractive."
+        "content": "When choosing a component, use this decision process:\n\n```text\nNeed navigation?\n→ Tabs / Breadcrumb / Pagination / Stepper\n→ For a sidebar or nav links: hand-build from Button (ghost/link variant) — no dedicated Navigation component exists\n\nNeed an action?\n→ Button / Icon Button\n\nNeed selection?\n→ Select / RadioGroup / Checkbox / Switch\n\nNeed compact metadata?\n→ Badge / Chip\n\nNeed grouped content?\n→ Card\n\nNeed persistent message?\n→ Callout\n\nNeed temporary message?\n→ the toast system (import { toast, ToastProvider } from \"@neuctra/ui\" — not a \"Toast\" component)\n\nNeed focused interaction?\n→ Modal / Drawer / Popover\n\nNeed clarification?\n→ Tooltip\n\nNeed structured records?\n→ Table / List\n\nNeed loading?\n→ Skeleton / Spinner\n\nNeed progress?\n→ Progress\n\nNeed to display code?\n→ react-syntax-highlighter (see Code Blocks rule)\n\nNeed to visualize stats or trends (dashboards)?\n→ ApexCharts via react-apexcharts (see Dashboard Charts rule)\n\nNeed hierarchy?\n→ Accordion / Breadcrumb / Stepper\n```\n\nNever select a component merely because it looks attractive."
       },
       {
         "number": 49,
         "title": "Final UI Quality Checklist",
         "content": "Before considering the UI complete, verify:\n\n### Hierarchy\n\n* Is the primary purpose obvious within seconds?\n* Is the most important action visually dominant?\n\n### Layout\n\n* Is spacing intentional?\n* Are sections grouped logically?\n* Is the content width comfortable?\n\n### Components\n\n* Is every component necessary?\n* Is each component being used for its intended purpose?\n\n### Visual Design\n\n* Is the color palette restrained?\n* Are borders and shadows subtle?\n* Is typography consistent?\n\n### UX\n\n* Can users understand what to do?\n* Are loading, empty, error, and success states handled?\n\n### Responsive\n\n* Does it work on mobile?\n* Does navigation adapt correctly?\n* Do cards/forms/tables remain usable?\n\n### Human Design\n\n* Does it look intentionally designed?\n* Could removing a decorative element improve it?\n* Does anything feel like generic AI-generated SaaS UI?\n\nIf something feels unnecessary, remove it."
+      },
+      {
+        "number": 66,
+        "title": "Context-Driven Variety",
+        "content": "Do not reuse the same dashboard shell, stat cards and grid for every request. Two different products should not look like the same template with renamed labels.\n\nBefore building app UI, write a short design brief from the request:\n\n1. Domain: finance, health, devops, commerce, education, CRM...\n2. Primary user: operator, executive, end customer, developer.\n3. Density: compact, balanced or spacious.\n4. Frequency: glanced at daily, or worked in for hours.\n5. The one decision the page must support.\n\nThen pick one variant per group from that brief. The `neuctra-ui-page-builder` tool scores these against the request and returns full specs in `designVariants`.\n\nNavigation shell:\n\n* **Grouped full sidebar** (`grouped-sidebar`): Admin panels and back offices with many destinations (8+) that fall into clear groups.\n* **Icon rail** (`icon-rail`): Focused tools with few top-level areas (6 or fewer) where the canvas or data needs maximum width.\n* **Rail plus contextual panel** (`rail-plus-panel`): Multi-module products where each module has its own list: mail, chat, projects with sub-lists, file managers.\n* **Collapsible sidebar** (`collapsible-sidebar`): General SaaS products with a medium nav (5-10 items) where users sometimes want more room.\n* **Top navigation bar** (`top-navbar`): Products with 6 or fewer sections and wide content: analytics, reports, personal finance, store owners, consumer dashboards.\n* **Inset sidebar** (`inset-sidebar`): Modern, premium or AI products where the main area should feel like a raised workspace.\n* **Workspace switcher sidebar** (`workspace-sidebar`): Multi-tenant products: teams, organizations, agencies managing clients.\n* **Bottom tab bar** (`bottom-tab-bar`): Mobile-first apps and consumer products used mainly on phones.\n\nPage header:\n\n* **Title with actions** (`title-actions`): Pages with one clear primary action.\n* **Personal greeting** (`greeting`): Home dashboards for individual users who return daily.\n* **Title with filter toolbar** (`title-toolbar`): Analytics and reporting views driven by a date range and filters.\n* **Title with view tabs** (`title-tabs`): One entity viewed several ways (overview, activity, settings).\n* **Status banner header** (`status-banner`): Operational and monitoring screens where overall health is the first thing to know.\n\nStat card:\n\n* **Number with delta** (`number-delta`): Headline KPIs compared with the previous period.\n* **Number with sparkline** (`sparkline`): Metrics where the recent trend matters as much as the current value.\n* **Progress toward goal** (`progress-goal`): Values with a target or limit: quotas, budgets, storage, course completion.\n* **Icon tile** (`icon-tile`): Operational counts that users scan and click through: open tickets, pending orders, low stock.\n* **Hero metric** (`hero-metric`): Dashboards with one north-star number (revenue, balance, portfolio value) and a few supporting stats.\n* **Compact stat strip** (`compact-strip`): Dense operational screens: one Card split into columns by dividers instead of separate cards.\n* **Value with breakdown** (`breakdown`): Totals that are meaningful only with their composition: pipeline by stage, tickets by status, traffic by source.\n* **Radial score** (`radial-score`): Single percentage scores: health, satisfaction, completion, performance.\n\nDashboard body:\n\n* **KPI row, chart, table** (`kpi-chart-table`): General overview dashboards where users check numbers, then drill into records.\n* **Bento grid** (`bento`): Executive or product overviews mixing one hero metric with varied tiles.\n* **Main column with side rail** (`main-side-rail`): Work dashboards where people act on items: tasks, approvals, upcoming events, activity.\n* **Table first** (`table-first`): Operational screens where the job is working through records: orders, users, inventory, tickets.\n* **Single metric focus** (`single-focus`): Personal or monitoring dashboards built around one number over time.\n* **Pipeline overview** (`pipeline-board`): Stage-based work: sales deals, hiring, support queues, order fulfilment.\n* **Tabbed sections** (`tabbed-sections`): Analytics with several distinct areas (acquisition, engagement, revenue) that would make one page too long.\n* **Activity feed center** (`feed-center`): Community, social, audit and notification-heavy products where events are the content.\n\nRules:\n\n* Derive a short design brief from the request before choosing anything: domain (finance, health, devops, commerce, education...), primary user (operator, executive, end customer, developer), data density, how often the page is used, and the one decision the page should support.\n* Pick one variant per group deliberately from that brief. The recommended variant is a starting point, not a mandate: if an alternative fits the brief better, use it and say why in one sentence.\n* Inside one existing app, consistency wins: if the project already has an app shell, sidebar or stat card style, reuse it for new pages instead of introducing a new variant. Variety applies across different products and contexts, not between pages of the same product.\n* Content must come from the domain. A clinic dashboard shows appointments, no-shows and wait time; a SaaS dashboard shows MRR, churn and activation. Never ship generic 'Total Users / Revenue / Orders / Growth' placeholders unless the request is literally about those.\n* Do not combine more than two stat card variants on one page, and keep a single variant within one row.\n* Vary the active-state treatment, header style and grid to fit the variant. Do not fall back to the same left-border active item, four equal stat cards and chart-plus-table grid every time."
       }
     ],
     "layout": [
       {
         "number": 4,
         "title": "Sidebar Design",
-        "content": "The sidebar is navigation, not content.\n\nKeep it visually quiet.\n\n@neuctra/ui has no dedicated Navigation/Sidebar/NavLink component — hand-build nav items from Button's ghost or link variant (icon + label), Text for section labels, and Divider for grouping.\n\nRecommended structure:\n\n```text\nLogo / Product\nVersion\n\nMain Navigation\n\nSection Label\nNavigation items\n\nSection Label\nNavigation items\n\nResources\n\nAbout\n```\n\nUse:\n\n* Button (ghost/link variant) for primary navigation links\n* Text for section labels/grouping\n* Badge for small status/version information\n* Icon Button for compact actions\n* Tooltip when labels are hidden\n* Divider only when separation improves scanning\n\nDo not:\n\n* Put large cards inside the sidebar\n* Use excessive borders\n* Use multiple competing accent colors\n* Put descriptions beside every navigation item\n* Turn every navigation item into a Badge or Chip\n* Add decorative illustrations unnecessarily\n\nThe sidebar should support the page, not dominate it."
+        "content": "The sidebar is navigation, not content.\n\nKeep it visually quiet.\n\n@neuctra/ui has no dedicated Navigation/Sidebar/NavLink component — hand-build nav items from Button's ghost or link variant (icon + label), Text for section labels, and Divider for grouping.\n\nThis is the content structure for a grouped sidebar, which is only one of several navigation shells. Choose the shell from context (see rule 66: Context-Driven Variety), for example an icon rail for focused tools, a rail plus panel for inbox or chat products, a top navbar for simple analytics, an inset sidebar for modern AI products, or a bottom tab bar for mobile-first apps.\n\nGrouped sidebar content structure:\n\n```text\nLogo / Product\nVersion\n\nMain Navigation\n\nSection Label\nNavigation items\n\nSection Label\nNavigation items\n\nResources\n\nAbout\n```\n\nUse:\n\n* Button (ghost/link variant) for primary navigation links\n* Text for section labels/grouping\n* Badge for small status/version information\n* Icon Button for compact actions\n* Tooltip when labels are hidden\n* Divider only when separation improves scanning\n\nDo not:\n\n* Put large cards inside the sidebar\n* Use excessive borders\n* Use multiple competing accent colors\n* Put descriptions beside every navigation item\n* Turn every navigation item into a Badge or Chip\n* Add decorative illustrations unnecessarily\n\nThe sidebar should support the page, not dominate it."
       },
       {
         "number": 5,
@@ -165,12 +170,12 @@
       {
         "number": 15,
         "title": "Input / Form Components",
-        "content": "Forms should feel calm and structured.\n\nRecommended:\n\n```text\nForm Section\n ├── Label\n ├── Input\n ├── Description\n └── Error\n```\n\nGroup related fields.\n\nDo not place every field in a separate Card.\n\nUse:\n\n* Input for text\n* Textarea for long text\n* Select for predefined options\n* Checkbox for independent choices\n* RadioGroup for mutually exclusive choices\n* Switch for immediate on/off settings\n* Slider for ranges\n* Number Input for numeric values\n* Date Picker for dates\n* Time Picker for times\n* File Upload for files"
+        "content": "Forms should feel calm and structured.\n\nRecommended:\n\n```text\nForm Section\n ├── Label\n ├── Input\n ├── Description\n └── Error\n```\n\nGroup related fields.\n\nDo not place every field in a separate Card.\n\nUse:\n\n* Input for text\n* Textarea for long text\n* Select for predefined options\n* Checkbox for independent choices\n* RadioGroup for mutually exclusive choices\n* Switch for immediate on/off settings\n* Slider for ranges\n* Number Input for numeric values\n* Date Picker for dates\n* Time Picker for times\n* File Upload for files\n\nPlaceholders, compulsory:\n\n* Every Input, Textarea, Select, Number Input, Date Picker, Time Picker and search field must have a `placeholder`.\n* The placeholder shows an example or format of the expected value: \"you@company.com\", \"Search projects...\", \"e.g. Q3 marketing plan\".\n* A placeholder is a hint, never a replacement for the Label. Keep the visible Label and add the placeholder.\n* Keep placeholders short and in sentence case. Do not repeat the label word for word (\"Email\" label → \"you@company.com\", not \"Email\")."
       },
       {
         "number": 16,
         "title": "Modal",
-        "content": "Use Modal for focused decisions or short tasks.\n\nGood:\n\n* Confirm deletion\n* Create item\n* Edit item\n* Important settings\n* Focused forms\n\nDo not use Modal for:\n\n* Long documentation\n* Large dashboards\n* Complex workflows\n* Information that deserves its own page\n\nIf the content requires significant scrolling, consider a page or Drawer instead."
+        "content": "Use Modal for focused decisions or short tasks.\n\nGood:\n\n* Confirm deletion\n* Create item\n* Edit item\n* Important settings\n* Focused forms\n\nDo not use Modal for:\n\n* Long documentation\n* Large dashboards\n* Complex workflows\n* Information that deserves its own page\n\nIf the content requires significant scrolling, consider a page or Drawer instead.\n\nModal overflow, compulsory:\n\n* A Modal must never grow taller than the viewport. Cap the modal body height (for example `max-h-[70vh]` or `max-h-[calc(100vh-8rem)]`) and give the body `overflow-y-auto`.\n* Only the body scrolls. Keep the header (title, close button) and footer (actions) fixed and always visible.\n* Never let content be clipped or push the action buttons off screen. If the content can exceed the available height (long forms, lists, terms, previews), apply the vertical scroll.\n* Do not add horizontal scroll to a Modal. Wrap or reflow wide content instead."
       },
       {
         "number": 17,
@@ -286,6 +291,16 @@
         "number": 51,
         "title": "Paragraph Text Color",
         "content": "Use `text-secondary` for all paragraph text: body copy, section descriptions, card descriptions, and supporting text under headings.\n\nDo not use `text-muted-foreground` for paragraphs. It is too low-contrast for reading text.\n\nKeep `text-muted-foreground` for small, low-priority text only:\n\n* Timestamps\n* Metadata\n* Captions\n* Placeholders\n* Helper and hint text\n* Disabled states\n\nUse `text-foreground` for headings, titles, and anything that needs full emphasis.\n\n`secondary` is a text color only. Do not use it as a background (`bg-secondary`).\n\nOrder of emphasis:\n\n```text\ntext-foreground        ← headings\n↓\ntext-secondary         ← paragraphs\n↓\ntext-muted-foreground  ← metadata and hints\n```\n\nToken values:\n\n* Light theme: `--secondary: #3f3f46`\n* Dark theme: `--secondary: #d4d4d8`"
+      },
+      {
+        "number": 64,
+        "title": "Code Blocks",
+        "content": "Whenever the UI shows a code block (snippets, install commands, API examples, config files, documentation), use the `react-syntax-highlighter` package (`\"react-syntax-highlighter\": \"^15.6.6\"`). Never hand-roll a code block with a plain `<pre>` and manual coloring, and never use another highlighting library.\n\nInstall:\n\n```bash\nnpm install react-syntax-highlighter@^15.6.6\n```\n\nUsage:\n\n```jsx\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\nimport { oneDark } from \"react-syntax-highlighter/dist/esm/styles/prism\";\n\n<SyntaxHighlighter\n  language=\"tsx\"\n  style={oneDark}\n  showLineNumbers={false}\n  wrapLongLines={false}\n  customStyle={{ margin: 0, borderRadius: \"0.75rem\", fontSize: \"0.875rem\" }}\n>\n  {code}\n</SyntaxHighlighter>\n```\n\nRules:\n\n* Use the Prism build and always set the correct `language`.\n* The highlighter's syntax theme is the only allowed exception to the theme-tokens-only color rule. Everything around it (wrapper, header, copy button, filename) uses Neuctra UI tokens and components.\n* Give multi-line blocks a small header with the filename or language and a copy button.\n* Long lines scroll horizontally inside the block (`overflow-x-auto`); the block must never widen the page.\n* Inline code in a sentence stays a styled `<code>` element, not the highlighter."
+      },
+      {
+        "number": 65,
+        "title": "Dashboard Charts",
+        "content": "When you build a dashboard (analytics, admin, CRM, reports, any page that shows stats over time or comparisons), visualize the stats with ApexCharts using `apexcharts` + `react-apexcharts`. Do not use another chart library and do not fake charts with divs or static images.\n\nInstall:\n\n```bash\nnpm install apexcharts react-apexcharts\n```\n\nUsage (Next.js: load the chart client-side only):\n\n```jsx\n\"use client\";\nimport dynamic from \"next/dynamic\";\nconst Chart = dynamic(() => import(\"react-apexcharts\"), { ssr: false });\n\nconst css = (name) =>\n  getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n\nconst options = {\n  chart: { toolbar: { show: false }, fontFamily: \"inherit\", background: \"transparent\" },\n  colors: [css(\"--primary\"), css(\"--info\"), css(\"--warning\")],\n  grid: { borderColor: css(\"--border\"), strokeDashArray: 4 },\n  xaxis: { categories, labels: { style: { colors: css(\"--muted-foreground\") } } },\n  yaxis: { labels: { style: { colors: css(\"--muted-foreground\") } } },\n  tooltip: { theme: isDark ? \"dark\" : \"light\" },\n  dataLabels: { enabled: false },\n  stroke: { curve: \"smooth\", width: 2 },\n};\n\n<Chart type=\"area\" height={300} options={options} series={series} />\n```\n\nRules:\n\n* Chart colors come from the theme CSS variables (read with getComputedStyle), never hardcoded hex values. Re-read them when the theme switches between light and dark.\n* Place each chart inside a Card with a CardHeader (title, short description, optional range selector) and the chart in CardBody.\n* Pick the chart by the question: line/area for trends over time, bar for comparing categories, donut/radial only for a few parts of a whole (max 5 slices), sparkline inside stat tiles.\n* Keep KPI stat tiles as numbers first; add a chart only where a trend or comparison helps.\n* Hide the toolbar, disable data labels on dense series, keep the grid subtle, and set an explicit height so the layout does not jump while loading.\n* Charts must be responsive: use `width=\"100%\"` and stack chart cards to a single column on small screens."
       }
     ],
     "accessibilityInteraction": [