@robr0/design-system 0.4.0 → 0.5.0

package/components/registry.json

@@ -28,6 +28,14 @@
       "category": "ai",
       "client": true
     },
+    {
+      "name": "AiButton",
+      "label": "AI button",
+      "slug": "ai-button",
+      "description": "The AI entry point: icon and label on a transparent field, ringed by a slowly turning gradient and a soft glow.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "Alert",
       "label": "Alert",
@@ -124,6 +132,38 @@
       "category": "charts",
       "client": false
     },
+    {
+      "name": "ChatHeader",
+      "label": "Chat header",
+      "slug": "chat-header",
+      "description": "The top row of a chat surface, with the conversation title and its controls.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatMarker",
+      "label": "Chat marker",
+      "slug": "chat-marker",
+      "description": "An inline conversation separator for date breaks and system notes.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatMessage",
+      "label": "Chat message",
+      "slug": "chat-message",
+      "description": "A single chat turn with avatar, author, timestamp, and bubble or plain content aligned by role.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatThread",
+      "label": "Chat thread",
+      "slug": "chat-thread",
+      "description": "A scrollable conversation column with edge fades, send anchoring, and a subtle scrollbar.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "Checkbox",
       "label": "Checkbox",
@@ -180,6 +220,14 @@
       "category": "overlays",
       "client": true
     },
+    {
+      "name": "Composer",
+      "label": "Composer",
+      "slug": "composer",
+      "description": "An auto-growing message input with send and stop states, an attachment slot, and Enter-to-send.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "ContactCard",
       "label": "Contact card",
@@ -236,6 +284,14 @@
       "category": "layout",
       "client": false
     },
+    {
+      "name": "DocumentChip",
+      "label": "Document chip",
+      "slug": "document-chip",
+      "description": "A compact file reference with a type icon, name, metadata, and optional remove.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Drawer",
       "label": "Drawer",
@@ -316,6 +372,14 @@
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "InterruptCard",
+      "label": "Interrupt card",
+      "slug": "interrupt-card",
+      "description": "A human-in-the-loop checkpoint with a question from the agent and option buttons to decide.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Kbd",
       "label": "Kbd",
@@ -332,14 +396,38 @@
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "MessageActions",
+      "label": "Message actions",
+      "slug": "message-actions",
+      "description": "An icon-button row for message-level actions like copy, retry, and feedback.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "MessageCard",
+      "label": "Message card",
+      "slug": "message-card",
+      "description": "A structured rich-content card embedded in a chat message, with media, title, body, and actions.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Nav",
       "label": "Navigation",
       "slug": "navigation",
-      "description": "Desktop and mobile navigation components including top-level nav bar, collapsed mobile bar, and hamburger slide-out menu.",
+      "description": "Desktop top navigation bar with a brand slot, horizontal button group, and optional trailing content.",
       "category": "navigation",
       "client": false
     },
+    {
+      "name": "NavList",
+      "label": "Nav list",
+      "slug": "nav-list",
+      "description": "Vertical list of navigation links for drawers and menus, with three indent levels and per-row expand toggles.",
+      "category": "navigation",
+      "client": true
+    },
     {
       "name": "Pagination",
       "label": "Pagination",
@@ -364,6 +452,22 @@
       "category": "feedback",
       "client": false
     },
+    {
+      "name": "PromptSuggestions",
+      "label": "Prompt suggestions",
+      "slug": "prompt-suggestions",
+      "description": "A horizontal row of tappable prompt suggestions to start or steer a conversation.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "Prose",
+      "label": "Prose",
+      "slug": "prose",
+      "description": "Token-styled typography for rendered markdown and rich agent output.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Quote",
       "label": "Quote",
@@ -428,6 +532,14 @@
       "category": "forms",
       "client": true
     },
+    {
+      "name": "SourceChip",
+      "label": "Source chip",
+      "slug": "source-chip",
+      "description": "A numbered citation pill linking a claim to its source.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Spinner",
       "label": "Spinner",

package/components/registry.json.d.ts

@@ -28,6 +28,14 @@ declare const _default: {
       "category": "ai",
       "client": true
     },
+    {
+      "name": "AiButton",
+      "label": "AI button",
+      "slug": "ai-button",
+      "description": "The AI entry point: icon and label on a transparent field, ringed by a slowly turning gradient and a soft glow.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "Alert",
       "label": "Alert",
@@ -124,6 +132,38 @@ declare const _default: {
       "category": "charts",
       "client": false
     },
+    {
+      "name": "ChatHeader",
+      "label": "Chat header",
+      "slug": "chat-header",
+      "description": "The top row of a chat surface, with the conversation title and its controls.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatMarker",
+      "label": "Chat marker",
+      "slug": "chat-marker",
+      "description": "An inline conversation separator for date breaks and system notes.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatMessage",
+      "label": "Chat message",
+      "slug": "chat-message",
+      "description": "A single chat turn with avatar, author, timestamp, and bubble or plain content aligned by role.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "ChatThread",
+      "label": "Chat thread",
+      "slug": "chat-thread",
+      "description": "A scrollable conversation column with edge fades, send anchoring, and a subtle scrollbar.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "Checkbox",
       "label": "Checkbox",
@@ -180,6 +220,14 @@ declare const _default: {
       "category": "overlays",
       "client": true
     },
+    {
+      "name": "Composer",
+      "label": "Composer",
+      "slug": "composer",
+      "description": "An auto-growing message input with send and stop states, an attachment slot, and Enter-to-send.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "ContactCard",
       "label": "Contact card",
@@ -236,6 +284,14 @@ declare const _default: {
       "category": "layout",
       "client": false
     },
+    {
+      "name": "DocumentChip",
+      "label": "Document chip",
+      "slug": "document-chip",
+      "description": "A compact file reference with a type icon, name, metadata, and optional remove.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Drawer",
       "label": "Drawer",
@@ -316,6 +372,14 @@ declare const _default: {
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "InterruptCard",
+      "label": "Interrupt card",
+      "slug": "interrupt-card",
+      "description": "A human-in-the-loop checkpoint with a question from the agent and option buttons to decide.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Kbd",
       "label": "Kbd",
@@ -332,14 +396,38 @@ declare const _default: {
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "MessageActions",
+      "label": "Message actions",
+      "slug": "message-actions",
+      "description": "An icon-button row for message-level actions like copy, retry, and feedback.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "MessageCard",
+      "label": "Message card",
+      "slug": "message-card",
+      "description": "A structured rich-content card embedded in a chat message, with media, title, body, and actions.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Nav",
       "label": "Navigation",
       "slug": "navigation",
-      "description": "Desktop and mobile navigation components including top-level nav bar, collapsed mobile bar, and hamburger slide-out menu.",
+      "description": "Desktop top navigation bar with a brand slot, horizontal button group, and optional trailing content.",
       "category": "navigation",
       "client": false
     },
+    {
+      "name": "NavList",
+      "label": "Nav list",
+      "slug": "nav-list",
+      "description": "Vertical list of navigation links for drawers and menus, with three indent levels and per-row expand toggles.",
+      "category": "navigation",
+      "client": true
+    },
     {
       "name": "Pagination",
       "label": "Pagination",
@@ -364,6 +452,22 @@ declare const _default: {
       "category": "feedback",
       "client": false
     },
+    {
+      "name": "PromptSuggestions",
+      "label": "Prompt suggestions",
+      "slug": "prompt-suggestions",
+      "description": "A horizontal row of tappable prompt suggestions to start or steer a conversation.",
+      "category": "ai",
+      "client": false
+    },
+    {
+      "name": "Prose",
+      "label": "Prose",
+      "slug": "prose",
+      "description": "Token-styled typography for rendered markdown and rich agent output.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Quote",
       "label": "Quote",
@@ -428,6 +532,14 @@ declare const _default: {
       "category": "forms",
       "client": true
     },
+    {
+      "name": "SourceChip",
+      "label": "Source chip",
+      "slug": "source-chip",
+      "description": "A numbered citation pill linking a claim to its source.",
+      "category": "ai",
+      "client": false
+    },
     {
       "name": "Spinner",
       "label": "Spinner",

package/components/registry.json.js

@@ -1,5 +1,5 @@
 const categories = ["actions", "ai", "charts", "data-display", "feedback", "forms", "layout", "navigation", "overlays"];
-const components = /* @__PURE__ */ JSON.parse(`[{"name":"Accordion","label":"Accordion","slug":"accordion","description":"Collapsible content sections for organising related information.","category":"data-display","client":true},{"name":"AgentStatus","label":"Agent status","slug":"agent-status","description":"A dot-matrix indicator and status line reporting what an agent is doing right now.","category":"ai","client":true},{"name":"Alert","label":"Alert","slug":"alert","description":"Contextual feedback with status variants, optional dismiss, and compact sizing.","category":"feedback","client":false},{"name":"AlertDialog","label":"Alert dialog","slug":"alert-dialog","description":"Modal confirmation overlay with title, description, and confirm / cancel actions.","category":"overlays","client":true},{"name":"AppLayout","label":"App layout","slug":"app-layout","description":"Full-page template pairing the collapsible App sidebar with a centred content area.","category":"layout","client":true},{"name":"AppSidebar","label":"App sidebar","slug":"app-sidebar","description":"Collapsible navigation rail with accordion sub-items, category headings, and profile section.","category":"layout","client":true},{"name":"Avatar","label":"Avatar","slug":"avatar","description":"User profile image with initials and icon fallback, status indicator, and multiple sizes.","category":"data-display","client":true},{"name":"Badge","label":"Badge","slug":"badge","description":"Small inline status labels with info, positive, warning, error, and neutral variants.","category":"data-display","client":false},{"name":"Breadcrumb","label":"Breadcrumb","slug":"breadcrumb","description":"Hierarchical navigation trail showing the user's location within the site.","category":"navigation","client":false},{"name":"Button","label":"Button","slug":"button","description":"Primary and secondary button variants in default and compact sizes, with icon support and multiple states.","category":"actions","client":true},{"name":"ButtonGroup","label":"Button group","slug":"button-group","description":"Horizontal and vertical button group layouts for related actions and navigation patterns.","category":"actions","client":false},{"name":"Card","label":"Card","slug":"card","description":"Card components for previews, navigation, and token documentation, from content cards to colour swatches and typography specimens.","category":"data-display","client":true},{"name":"Carousel","label":"Carousel","slug":"carousel","description":"Sliding content viewer with navigation arrows, dot indicators, auto-play, and keyboard support.","category":"data-display","client":true},{"name":"Chart","label":"Chart","slug":"chart","description":"Data visualisation components built on Recharts. Includes bar, line, pie, and radial chart types with design-system token integration.","category":"charts","client":false},{"name":"Checkbox","label":"Checkbox","slug":"checkbox","description":"Custom checkbox with check and indeterminate states, keyboard accessible with animated transitions.","category":"forms","client":true},{"name":"Chip","label":"Chip","slug":"chip","description":"Compact pills for attributes, filters, and inline metadata.","category":"data-display","client":false},{"name":"CircularButton","label":"Circular button","slug":"circular-button","description":"Round icon button with primary and secondary variants, default and compact sizes.","category":"actions","client":false},{"name":"CodeBlock","label":"Code block","slug":"code-block","description":"Monospace code with a header and one-click copy.","category":"data-display","client":true},{"name":"ColorPicker","label":"Colour picker","slug":"color-picker","description":"Swatch trigger opening a saturation area, hue and alpha sliders, and a hex field; controlled or uncontrolled.","category":"forms","client":true},{"name":"Combobox","label":"Combobox","slug":"combobox","description":"A filterable select that narrows options as the user types, with multi-select chips, grouping, and async loading.","category":"forms","client":true},{"name":"CommandPalette","label":"Command palette","slug":"command-palette","description":"A modal Cmd+K launcher that searches a grouped command list, with keyboard navigation and shortcut hints.","category":"overlays","client":true},{"name":"ContactCard","label":"Contact card","slug":"contact-card","description":"Linked contact method with icon, label, and value.","category":"data-display","client":true},{"name":"ContextMenu","label":"Context menu","slug":"context-menu","description":"Right-click menu at the pointer with groups, sub-menus, and shortcut hints.","category":"overlays","client":true},{"name":"ContributionGraph","label":"Contribution graph","slug":"contribution-graph","description":"A year of activity, one cell per day.","category":"charts","client":false},{"name":"DateInput","label":"Date input","slug":"date-input","description":"Date input with native picker, calendar icon, label, and validation states.","category":"forms","client":true},{"name":"DatePicker","label":"Date picker","slug":"date-picker","description":"Inline calendar with month navigation, day selection, and today indicator.","category":"forms","client":true},{"name":"Dialog","label":"Dialog","slug":"dialog","description":"A general-purpose modal for focused tasks, with sizes, an optional footer, and full focus management.","category":"overlays","client":true},{"name":"Divider","label":"Divider","slug":"divider","description":"A thin rule separating stacked content, with optional inline label and vertical orientation.","category":"layout","client":false},{"name":"Drawer","label":"Drawer","slug":"drawer","description":"An edge-anchored modal panel that slides in from any side, for filter panels, detail views, and mobile navigation.","category":"overlays","client":true},{"name":"Dropdown","label":"Dropdown","slug":"dropdown","description":"Custom select dropdown with keyboard navigation, disabled options, and error states.","category":"forms","client":true},{"name":"DropdownMenu","label":"Dropdown menu","slug":"dropdown-menu","description":"Contextual menu with sections, sub-menus, keyboard shortcuts, and inset-gap hover styling.","category":"overlays","client":true},{"name":"EmptyState","label":"Empty state","slug":"empty-state","description":"The placeholder for a list, table, or search with nothing to show: icon, headline, guidance, and a next action.","category":"feedback","client":false},{"name":"EntityCard","label":"Entity card","slug":"entity-card","description":"Compact display-only card with a centred icon or image and a label, used in the Icons and Logos galleries.","category":"data-display","client":false},{"name":"Field","label":"Field","slug":"field","description":"The shared scaffolding for labelled form controls: label, required marker, helper and error text, and the ARIA wiring that ties them together.","category":"forms","client":true},{"name":"Figure","label":"Figure","slug":"figure","description":"Images with captions, in the case-study frame.","category":"data-display","client":false},{"name":"FileInput","label":"File input","slug":"file-input","description":"A click-or-drop upload zone paired with a controlled file list showing size, progress, and per-file errors.","category":"forms","client":true},{"name":"Input","label":"Input","slug":"input","description":"Text input with label, placeholder, left and right icons, helper text, and error states.","category":"forms","client":true},{"name":"Instructions","label":"Instructions","slug":"instructions","description":"Step-by-step guidance with numbered badges, connecting lines, and horizontal layout.","category":"data-display","client":false},{"name":"Kbd","label":"Kbd","slug":"kbd","description":"A keyboard key rendered as a keycap, for shortcut hints in menus and prose.","category":"data-display","client":false},{"name":"LinkList","label":"Link list","slug":"link-list","description":"Linked items with logo, label, and subtitle.","category":"data-display","client":false},{"name":"Nav","label":"Navigation","slug":"navigation","description":"Desktop and mobile navigation components including top-level nav bar, collapsed mobile bar, and hamburger slide-out menu.","category":"navigation","client":false},{"name":"Pagination","label":"Pagination","slug":"pagination","description":"Numbered page navigation for long datasets, with ellipses, disabled end arrows, and a compact readout mode.","category":"navigation","client":true},{"name":"Popover","label":"Popover","slug":"popover","description":"Contextual overlay panel with click and hover triggers, positioned relative to its anchor.","category":"overlays","client":true},{"name":"ProgressBar","label":"Progress bar","slug":"progress-bar","description":"Horizontal bar indicating completion progress, with an optional percentage label.","category":"feedback","client":false},{"name":"Quote","label":"Quote","slug":"quote","description":"Blockquotes and pull-quotes with attribution.","category":"data-display","client":false},{"name":"RadioButton","label":"Radio button","slug":"radio-button","description":"Radio button and radio group with vertical and horizontal layouts, animated dot indicator.","category":"forms","client":true},{"name":"Reasoning","label":"Reasoning","slug":"reasoning","description":"A model's thinking, disclosed behind a one-line summary and collapsed once it finishes.","category":"ai","client":true},{"name":"SectionTitle","label":"Section title","slug":"section-title","description":"Heading with a divider line and optional trailing content for organising page sections.","category":"layout","client":false},{"name":"SegmentedControl","label":"Segmented control","slug":"segmented-control","description":"Pill-style toggle between related views with keyboard navigation and icon support.","category":"actions","client":true},{"name":"SelectionCard","label":"Selection card","slug":"selection-card","description":"Large selectable option cards with radio or checkbox indicators for high-visibility choices like settings and onboarding.","category":"data-display","client":true},{"name":"Skeleton","label":"Skeleton","slug":"skeleton","description":"Placeholder loading indicators with text, circular, and rectangular variants.","category":"feedback","client":false},{"name":"Slider","label":"Slider","slug":"slider","description":"Range input for selecting a value between a minimum and maximum, in default and compact sizes.","category":"forms","client":true},{"name":"Spinner","label":"Spinner","slug":"spinner","description":"Animated circular loading indicator in three sizes and primary, neutral, or inherit variants.","category":"feedback","client":false},{"name":"Stat","label":"Stat","slug":"stat","description":"Headline metrics with labels and trend deltas.","category":"data-display","client":false},{"name":"Swatch","label":"Swatch","slug":"swatch","description":"Clickable colour tile for preset palettes and picker triggers, with a theme-aware selection ring.","category":"forms","client":false},{"name":"Table","label":"Table","slug":"table","description":"Data table with flexible cell content, striped rows, compact sizing, and support for icons, inputs, buttons, and interactive controls.","category":"data-display","client":false},{"name":"Tabs","label":"Tabs","slug":"tabs","description":"Tab navigation with underline indicator, icon support, compact size, and full-width mode.","category":"navigation","client":true},{"name":"Textarea","label":"Textarea","slug":"textarea","description":"Multi-line text input with character counter, resize control, helper text, and error states.","category":"forms","client":true},{"name":"Timeline","label":"Timeline","slug":"timeline","description":"Ordered sequences: histories and steppers.","category":"data-display","client":false},{"name":"Toast","label":"Toast","slug":"toast","description":"Temporary notification with status variants, auto-dismiss, and stacking via ToastProvider.","category":"feedback","client":true},{"name":"ToggleGroup","label":"Toggle group","slug":"toggle-group","description":"A set of two-state buttons that can be toggled on or off, supporting text and icon items.","category":"actions","client":true},{"name":"ToggleSwitch","label":"Toggle switch","slug":"toggle-switch","description":"Binary on/off toggle control with sliding thumb and check indicator, used for settings like theme switching.","category":"forms","client":true},{"name":"ToolCall","label":"Tool call","slug":"tool-call","description":"The record of one tool invocation, with its arguments and result behind a disclosure.","category":"ai","client":true},{"name":"Tooltip","label":"Tooltip","slug":"tooltip","description":"Contextual text label that appears on hover or focus with position and delay options.","category":"overlays","client":true}]`);
+const components = /* @__PURE__ */ JSON.parse(`[{"name":"Accordion","label":"Accordion","slug":"accordion","description":"Collapsible content sections for organising related information.","category":"data-display","client":true},{"name":"AgentStatus","label":"Agent status","slug":"agent-status","description":"A dot-matrix indicator and status line reporting what an agent is doing right now.","category":"ai","client":true},{"name":"AiButton","label":"AI button","slug":"ai-button","description":"The AI entry point: icon and label on a transparent field, ringed by a slowly turning gradient and a soft glow.","category":"ai","client":true},{"name":"Alert","label":"Alert","slug":"alert","description":"Contextual feedback with status variants, optional dismiss, and compact sizing.","category":"feedback","client":false},{"name":"AlertDialog","label":"Alert dialog","slug":"alert-dialog","description":"Modal confirmation overlay with title, description, and confirm / cancel actions.","category":"overlays","client":true},{"name":"AppLayout","label":"App layout","slug":"app-layout","description":"Full-page template pairing the collapsible App sidebar with a centred content area.","category":"layout","client":true},{"name":"AppSidebar","label":"App sidebar","slug":"app-sidebar","description":"Collapsible navigation rail with accordion sub-items, category headings, and profile section.","category":"layout","client":true},{"name":"Avatar","label":"Avatar","slug":"avatar","description":"User profile image with initials and icon fallback, status indicator, and multiple sizes.","category":"data-display","client":true},{"name":"Badge","label":"Badge","slug":"badge","description":"Small inline status labels with info, positive, warning, error, and neutral variants.","category":"data-display","client":false},{"name":"Breadcrumb","label":"Breadcrumb","slug":"breadcrumb","description":"Hierarchical navigation trail showing the user's location within the site.","category":"navigation","client":false},{"name":"Button","label":"Button","slug":"button","description":"Primary and secondary button variants in default and compact sizes, with icon support and multiple states.","category":"actions","client":true},{"name":"ButtonGroup","label":"Button group","slug":"button-group","description":"Horizontal and vertical button group layouts for related actions and navigation patterns.","category":"actions","client":false},{"name":"Card","label":"Card","slug":"card","description":"Card components for previews, navigation, and token documentation, from content cards to colour swatches and typography specimens.","category":"data-display","client":true},{"name":"Carousel","label":"Carousel","slug":"carousel","description":"Sliding content viewer with navigation arrows, dot indicators, auto-play, and keyboard support.","category":"data-display","client":true},{"name":"Chart","label":"Chart","slug":"chart","description":"Data visualisation components built on Recharts. Includes bar, line, pie, and radial chart types with design-system token integration.","category":"charts","client":false},{"name":"ChatHeader","label":"Chat header","slug":"chat-header","description":"The top row of a chat surface, with the conversation title and its controls.","category":"ai","client":false},{"name":"ChatMarker","label":"Chat marker","slug":"chat-marker","description":"An inline conversation separator for date breaks and system notes.","category":"ai","client":false},{"name":"ChatMessage","label":"Chat message","slug":"chat-message","description":"A single chat turn with avatar, author, timestamp, and bubble or plain content aligned by role.","category":"ai","client":false},{"name":"ChatThread","label":"Chat thread","slug":"chat-thread","description":"A scrollable conversation column with edge fades, send anchoring, and a subtle scrollbar.","category":"ai","client":true},{"name":"Checkbox","label":"Checkbox","slug":"checkbox","description":"Custom checkbox with check and indeterminate states, keyboard accessible with animated transitions.","category":"forms","client":true},{"name":"Chip","label":"Chip","slug":"chip","description":"Compact pills for attributes, filters, and inline metadata.","category":"data-display","client":false},{"name":"CircularButton","label":"Circular button","slug":"circular-button","description":"Round icon button with primary and secondary variants, default and compact sizes.","category":"actions","client":false},{"name":"CodeBlock","label":"Code block","slug":"code-block","description":"Monospace code with a header and one-click copy.","category":"data-display","client":true},{"name":"ColorPicker","label":"Colour picker","slug":"color-picker","description":"Swatch trigger opening a saturation area, hue and alpha sliders, and a hex field; controlled or uncontrolled.","category":"forms","client":true},{"name":"Combobox","label":"Combobox","slug":"combobox","description":"A filterable select that narrows options as the user types, with multi-select chips, grouping, and async loading.","category":"forms","client":true},{"name":"CommandPalette","label":"Command palette","slug":"command-palette","description":"A modal Cmd+K launcher that searches a grouped command list, with keyboard navigation and shortcut hints.","category":"overlays","client":true},{"name":"Composer","label":"Composer","slug":"composer","description":"An auto-growing message input with send and stop states, an attachment slot, and Enter-to-send.","category":"ai","client":true},{"name":"ContactCard","label":"Contact card","slug":"contact-card","description":"Linked contact method with icon, label, and value.","category":"data-display","client":true},{"name":"ContextMenu","label":"Context menu","slug":"context-menu","description":"Right-click menu at the pointer with groups, sub-menus, and shortcut hints.","category":"overlays","client":true},{"name":"ContributionGraph","label":"Contribution graph","slug":"contribution-graph","description":"A year of activity, one cell per day.","category":"charts","client":false},{"name":"DateInput","label":"Date input","slug":"date-input","description":"Date input with native picker, calendar icon, label, and validation states.","category":"forms","client":true},{"name":"DatePicker","label":"Date picker","slug":"date-picker","description":"Inline calendar with month navigation, day selection, and today indicator.","category":"forms","client":true},{"name":"Dialog","label":"Dialog","slug":"dialog","description":"A general-purpose modal for focused tasks, with sizes, an optional footer, and full focus management.","category":"overlays","client":true},{"name":"Divider","label":"Divider","slug":"divider","description":"A thin rule separating stacked content, with optional inline label and vertical orientation.","category":"layout","client":false},{"name":"DocumentChip","label":"Document chip","slug":"document-chip","description":"A compact file reference with a type icon, name, metadata, and optional remove.","category":"ai","client":false},{"name":"Drawer","label":"Drawer","slug":"drawer","description":"An edge-anchored modal panel that slides in from any side, for filter panels, detail views, and mobile navigation.","category":"overlays","client":true},{"name":"Dropdown","label":"Dropdown","slug":"dropdown","description":"Custom select dropdown with keyboard navigation, disabled options, and error states.","category":"forms","client":true},{"name":"DropdownMenu","label":"Dropdown menu","slug":"dropdown-menu","description":"Contextual menu with sections, sub-menus, keyboard shortcuts, and inset-gap hover styling.","category":"overlays","client":true},{"name":"EmptyState","label":"Empty state","slug":"empty-state","description":"The placeholder for a list, table, or search with nothing to show: icon, headline, guidance, and a next action.","category":"feedback","client":false},{"name":"EntityCard","label":"Entity card","slug":"entity-card","description":"Compact display-only card with a centred icon or image and a label, used in the Icons and Logos galleries.","category":"data-display","client":false},{"name":"Field","label":"Field","slug":"field","description":"The shared scaffolding for labelled form controls: label, required marker, helper and error text, and the ARIA wiring that ties them together.","category":"forms","client":true},{"name":"Figure","label":"Figure","slug":"figure","description":"Images with captions, in the case-study frame.","category":"data-display","client":false},{"name":"FileInput","label":"File input","slug":"file-input","description":"A click-or-drop upload zone paired with a controlled file list showing size, progress, and per-file errors.","category":"forms","client":true},{"name":"Input","label":"Input","slug":"input","description":"Text input with label, placeholder, left and right icons, helper text, and error states.","category":"forms","client":true},{"name":"Instructions","label":"Instructions","slug":"instructions","description":"Step-by-step guidance with numbered badges, connecting lines, and horizontal layout.","category":"data-display","client":false},{"name":"InterruptCard","label":"Interrupt card","slug":"interrupt-card","description":"A human-in-the-loop checkpoint with a question from the agent and option buttons to decide.","category":"ai","client":false},{"name":"Kbd","label":"Kbd","slug":"kbd","description":"A keyboard key rendered as a keycap, for shortcut hints in menus and prose.","category":"data-display","client":false},{"name":"LinkList","label":"Link list","slug":"link-list","description":"Linked items with logo, label, and subtitle.","category":"data-display","client":false},{"name":"MessageActions","label":"Message actions","slug":"message-actions","description":"An icon-button row for message-level actions like copy, retry, and feedback.","category":"ai","client":false},{"name":"MessageCard","label":"Message card","slug":"message-card","description":"A structured rich-content card embedded in a chat message, with media, title, body, and actions.","category":"ai","client":false},{"name":"Nav","label":"Navigation","slug":"navigation","description":"Desktop top navigation bar with a brand slot, horizontal button group, and optional trailing content.","category":"navigation","client":false},{"name":"NavList","label":"Nav list","slug":"nav-list","description":"Vertical list of navigation links for drawers and menus, with three indent levels and per-row expand toggles.","category":"navigation","client":true},{"name":"Pagination","label":"Pagination","slug":"pagination","description":"Numbered page navigation for long datasets, with ellipses, disabled end arrows, and a compact readout mode.","category":"navigation","client":true},{"name":"Popover","label":"Popover","slug":"popover","description":"Contextual overlay panel with click and hover triggers, positioned relative to its anchor.","category":"overlays","client":true},{"name":"ProgressBar","label":"Progress bar","slug":"progress-bar","description":"Horizontal bar indicating completion progress, with an optional percentage label.","category":"feedback","client":false},{"name":"PromptSuggestions","label":"Prompt suggestions","slug":"prompt-suggestions","description":"A horizontal row of tappable prompt suggestions to start or steer a conversation.","category":"ai","client":false},{"name":"Prose","label":"Prose","slug":"prose","description":"Token-styled typography for rendered markdown and rich agent output.","category":"ai","client":false},{"name":"Quote","label":"Quote","slug":"quote","description":"Blockquotes and pull-quotes with attribution.","category":"data-display","client":false},{"name":"RadioButton","label":"Radio button","slug":"radio-button","description":"Radio button and radio group with vertical and horizontal layouts, animated dot indicator.","category":"forms","client":true},{"name":"Reasoning","label":"Reasoning","slug":"reasoning","description":"A model's thinking, disclosed behind a one-line summary and collapsed once it finishes.","category":"ai","client":true},{"name":"SectionTitle","label":"Section title","slug":"section-title","description":"Heading with a divider line and optional trailing content for organising page sections.","category":"layout","client":false},{"name":"SegmentedControl","label":"Segmented control","slug":"segmented-control","description":"Pill-style toggle between related views with keyboard navigation and icon support.","category":"actions","client":true},{"name":"SelectionCard","label":"Selection card","slug":"selection-card","description":"Large selectable option cards with radio or checkbox indicators for high-visibility choices like settings and onboarding.","category":"data-display","client":true},{"name":"Skeleton","label":"Skeleton","slug":"skeleton","description":"Placeholder loading indicators with text, circular, and rectangular variants.","category":"feedback","client":false},{"name":"Slider","label":"Slider","slug":"slider","description":"Range input for selecting a value between a minimum and maximum, in default and compact sizes.","category":"forms","client":true},{"name":"SourceChip","label":"Source chip","slug":"source-chip","description":"A numbered citation pill linking a claim to its source.","category":"ai","client":false},{"name":"Spinner","label":"Spinner","slug":"spinner","description":"Animated circular loading indicator in three sizes and primary, neutral, or inherit variants.","category":"feedback","client":false},{"name":"Stat","label":"Stat","slug":"stat","description":"Headline metrics with labels and trend deltas.","category":"data-display","client":false},{"name":"Swatch","label":"Swatch","slug":"swatch","description":"Clickable colour tile for preset palettes and picker triggers, with a theme-aware selection ring.","category":"forms","client":false},{"name":"Table","label":"Table","slug":"table","description":"Data table with flexible cell content, striped rows, compact sizing, and support for icons, inputs, buttons, and interactive controls.","category":"data-display","client":false},{"name":"Tabs","label":"Tabs","slug":"tabs","description":"Tab navigation with underline indicator, icon support, compact size, and full-width mode.","category":"navigation","client":true},{"name":"Textarea","label":"Textarea","slug":"textarea","description":"Multi-line text input with character counter, resize control, helper text, and error states.","category":"forms","client":true},{"name":"Timeline","label":"Timeline","slug":"timeline","description":"Ordered sequences: histories and steppers.","category":"data-display","client":false},{"name":"Toast","label":"Toast","slug":"toast","description":"Temporary notification with status variants, auto-dismiss, and stacking via ToastProvider.","category":"feedback","client":true},{"name":"ToggleGroup","label":"Toggle group","slug":"toggle-group","description":"A set of two-state buttons that can be toggled on or off, supporting text and icon items.","category":"actions","client":true},{"name":"ToggleSwitch","label":"Toggle switch","slug":"toggle-switch","description":"Binary on/off toggle control with sliding thumb and check indicator, used for settings like theme switching.","category":"forms","client":true},{"name":"ToolCall","label":"Tool call","slug":"tool-call","description":"The record of one tool invocation, with its arguments and result behind a disclosure.","category":"ai","client":true},{"name":"Tooltip","label":"Tooltip","slug":"tooltip","description":"Contextual text label that appears on hover or focus with position and delay options.","category":"overlays","client":true}]`);
 const registry = {
   categories,
   components

package/index.d.ts

@@ -6,6 +6,7 @@
 export * from './components/Accordion/Accordion';
 export * from './components/AgentStatus/AgentStatus';
 export * from './components/AgentStatus/AgentStatusPatterns';
+export * from './components/AiButton/AiButton';
 export * from './components/Alert/Alert';
 export * from './components/AlertDialog/AlertDialog';
 export * from './components/AppLayout/AppLayout';
@@ -17,6 +18,10 @@ export * from './components/Button/Button';
 export * from './components/ButtonGroup/ButtonGroup';
 export * from './components/Card/Card';
 export * from './components/Carousel/Carousel';
+export * from './components/ChatHeader/ChatHeader';
+export * from './components/ChatMarker/ChatMarker';
+export * from './components/ChatMessage/ChatMessage';
+export * from './components/ChatThread/ChatThread';
 export * from './components/Checkbox/Checkbox';
 export * from './components/Chip/Chip';
 export * from './components/CircularButton/CircularButton';
@@ -24,6 +29,7 @@ export * from './components/CodeBlock/CodeBlock';
 export * from './components/ColorPicker/ColorPicker';
 export * from './components/Combobox/Combobox';
 export * from './components/CommandPalette/CommandPalette';
+export * from './components/Composer/Composer';
 export * from './components/ContactCard/ContactCard';
 export * from './components/ContextMenu/ContextMenu';
 export * from './components/ContributionGraph/ContributionGraph';
@@ -31,6 +37,7 @@ export * from './components/DateInput/DateInput';
 export * from './components/DatePicker/DatePicker';
 export * from './components/Dialog/Dialog';
 export * from './components/Divider/Divider';
+export * from './components/DocumentChip/DocumentChip';
 export * from './components/Drawer/Drawer';
 export * from './components/Dropdown/Dropdown';
 export * from './components/DropdownMenu/DropdownMenu';
@@ -42,12 +49,18 @@ export * from './components/Figure/Figure';
 export * from './components/FileInput/FileInput';
 export * from './components/Input/Input';
 export * from './components/Instructions/Instructions';
+export * from './components/InterruptCard/InterruptCard';
 export * from './components/Kbd/Kbd';
 export * from './components/LinkList/LinkList';
+export * from './components/MessageActions/MessageActions';
+export * from './components/MessageCard/MessageCard';
 export * from './components/Nav/Nav';
+export * from './components/NavList/NavList';
 export * from './components/Pagination/Pagination';
 export * from './components/Popover/Popover';
 export * from './components/ProgressBar/ProgressBar';
+export * from './components/PromptSuggestions/PromptSuggestions';
+export * from './components/Prose/Prose';
 export * from './components/Quote/Quote';
 export * from './components/RadioButton/RadioButton';
 export * from './components/Reasoning/Reasoning';
@@ -56,6 +69,7 @@ export * from './components/SegmentedControl/SegmentedControl';
 export * from './components/SelectionCard/SelectionCard';
 export * from './components/Skeleton/Skeleton';
 export * from './components/Slider/Slider';
+export * from './components/SourceChip/SourceChip';
 export * from './components/Spinner/Spinner';
 export * from './components/Stat/Stat';
 export * from './components/Swatch/Swatch';

package/index.js

@@ -1,6 +1,7 @@
 import { Accordion } from "./components/Accordion/Accordion.js";
 import { AgentStatus } from "./components/AgentStatus/AgentStatus.js";
 import { agentStatusPatterns } from "./components/AgentStatus/AgentStatusPatterns.js";
+import { AiButton } from "./components/AiButton/AiButton.js";
 import { Alert } from "./components/Alert/Alert.js";
 import { AlertDialog } from "./components/AlertDialog/AlertDialog.js";
 import { AppLayout } from "./components/AppLayout/AppLayout.js";
@@ -12,6 +13,10 @@ import { Button } from "./components/Button/Button.js";
 import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.js";
 import { Card } from "./components/Card/Card.js";
 import { Carousel } from "./components/Carousel/Carousel.js";
+import { ChatHeader } from "./components/ChatHeader/ChatHeader.js";
+import { ChatMarker } from "./components/ChatMarker/ChatMarker.js";
+import { ChatMessage } from "./components/ChatMessage/ChatMessage.js";
+import { ChatThread } from "./components/ChatThread/ChatThread.js";
 import { Checkbox, CheckboxGroup } from "./components/Checkbox/Checkbox.js";
 import { Chip } from "./components/Chip/Chip.js";
 import { CircularButton } from "./components/CircularButton/CircularButton.js";
@@ -19,6 +24,7 @@ import { CodeBlock } from "./components/CodeBlock/CodeBlock.js";
 import { ColorPicker } from "./components/ColorPicker/ColorPicker.js";
 import { Combobox } from "./components/Combobox/Combobox.js";
 import { CommandPalette } from "./components/CommandPalette/CommandPalette.js";
+import { Composer } from "./components/Composer/Composer.js";
 import { ContactCard } from "./components/ContactCard/ContactCard.js";
 import { ContextMenu } from "./components/ContextMenu/ContextMenu.js";
 import { ContributionGraph } from "./components/ContributionGraph/ContributionGraph.js";
@@ -26,6 +32,7 @@ import { DateInput } from "./components/DateInput/DateInput.js";
 import { DatePicker } from "./components/DatePicker/DatePicker.js";
 import { Dialog } from "./components/Dialog/Dialog.js";
 import { Divider } from "./components/Divider/Divider.js";
+import { DocumentChip } from "./components/DocumentChip/DocumentChip.js";
 import { Drawer } from "./components/Drawer/Drawer.js";
 import { Dropdown } from "./components/Dropdown/Dropdown.js";
 import { DropdownMenu } from "./components/DropdownMenu/DropdownMenu.js";
@@ -37,12 +44,18 @@ import { Figure } from "./components/Figure/Figure.js";
 import { FileInput } from "./components/FileInput/FileInput.js";
 import { Input } from "./components/Input/Input.js";
 import { Instructions } from "./components/Instructions/Instructions.js";
+import { InterruptCard } from "./components/InterruptCard/InterruptCard.js";
 import { Kbd } from "./components/Kbd/Kbd.js";
 import { LinkList } from "./components/LinkList/LinkList.js";
+import { MessageActions } from "./components/MessageActions/MessageActions.js";
+import { MessageCard } from "./components/MessageCard/MessageCard.js";
 import { Nav } from "./components/Nav/Nav.js";
+import { NavList } from "./components/NavList/NavList.js";
 import { Pagination } from "./components/Pagination/Pagination.js";
 import { Popover } from "./components/Popover/Popover.js";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar.js";
+import { PromptSuggestions } from "./components/PromptSuggestions/PromptSuggestions.js";
+import { Prose } from "./components/Prose/Prose.js";
 import { Quote } from "./components/Quote/Quote.js";
 import { RadioButton, RadioGroup } from "./components/RadioButton/RadioButton.js";
 import { Reasoning } from "./components/Reasoning/Reasoning.js";
@@ -51,6 +64,7 @@ import { SegmentedControl } from "./components/SegmentedControl/SegmentedControl
 import { SelectionCard } from "./components/SelectionCard/SelectionCard.js";
 import { Skeleton } from "./components/Skeleton/Skeleton.js";
 import { Slider } from "./components/Slider/Slider.js";
+import { SourceChip } from "./components/SourceChip/SourceChip.js";
 import { Spinner } from "./components/Spinner/Spinner.js";
 import { Stat } from "./components/Stat/Stat.js";
 import { Swatch } from "./components/Swatch/Swatch.js";
@@ -68,6 +82,7 @@ import { TOKEN_COUNT, TOKEN_COUNTS, tokenRegistry } from "./tokens/registry.js";
 export {
   Accordion,
   AgentStatus,
+  AiButton,
   Alert,
   AlertDialog,
   AppLayout,
@@ -80,6 +95,10 @@ export {
   COMPONENT_COUNT,
   Card,
   Carousel,
+  ChatHeader,
+  ChatMarker,
+  ChatMessage,
+  ChatThread,
   Checkbox,
   CheckboxGroup,
   Chip,
@@ -88,6 +107,7 @@ export {
   ColorPicker,
   Combobox,
   CommandPalette,
+  Composer,
   ContactCard,
   ContextMenu,
   ContributionGraph,
@@ -95,6 +115,7 @@ export {
   DatePicker,
   Dialog,
   Divider,
+  DocumentChip,
   Drawer,
   Dropdown,
   DropdownMenu,
@@ -106,12 +127,18 @@ export {
   FileInput,
   Input,
   Instructions,
+  InterruptCard,
   Kbd,
   LinkList,
+  MessageActions,
+  MessageCard,
   Nav,
+  NavList,
   Pagination,
   Popover,
   ProgressBar,
+  PromptSuggestions,
+  Prose,
   Quote,
   RadioButton,
   RadioGroup,
@@ -121,6 +148,7 @@ export {
   SelectionCard,
   Skeleton,
   Slider,
+  SourceChip,
   Spinner,
   Stat,
   Swatch,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robr0/design-system",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
   "license": "MIT",
   "repository": {