@robr0/design-system 0.3.0 → 0.5.0

package/components/registry.json.js

@@ -1,5 +1,5 @@
-const categories = ["actions", "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":"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 you type, 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 — powers 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":"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 within a given range with 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":"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 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":"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

@@ -4,6 +4,9 @@
  * (validate-registry chain). recharts-backed modules live in charts.ts, not here — recharts is an optional peer.
  */
 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';
@@ -15,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';
@@ -22,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';
@@ -29,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';
@@ -40,19 +49,27 @@ 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';
 export * from './components/SectionTitle/SectionTitle';
 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';
@@ -63,6 +80,7 @@ export * from './components/Timeline/Timeline';
 export * from './components/Toast/Toast';
 export * from './components/ToggleGroup/ToggleGroup';
 export * from './components/ToggleSwitch/ToggleSwitch';
+export * from './components/ToolCall/ToolCall';
 export * from './components/Tooltip/Tooltip';
 export { componentRegistry, componentMetadata, componentCategories, COMPONENT_COUNT, } from './components/registry';
 export type { ComponentMeta } from './components/registry';

package/index.js

@@ -1,4 +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";
@@ -10,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";
@@ -17,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";
@@ -24,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";
@@ -35,19 +44,27 @@ 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";
 import { SectionTitle } from "./components/SectionTitle/SectionTitle.js";
 import { SegmentedControl } from "./components/SegmentedControl/SegmentedControl.js";
 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";
@@ -58,11 +75,14 @@ import { Timeline } from "./components/Timeline/Timeline.js";
 import { Toast, ToastProvider, useToast } from "./components/Toast/Toast.js";
 import { ToggleGroup } from "./components/ToggleGroup/ToggleGroup.js";
 import { ToggleSwitch } from "./components/ToggleSwitch/ToggleSwitch.js";
+import { ToolCall } from "./components/ToolCall/ToolCall.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
 import { COMPONENT_COUNT, componentCategories, componentMetadata, componentRegistry } from "./components/registry.js";
 import { TOKEN_COUNT, TOKEN_COUNTS, tokenRegistry } from "./tokens/registry.js";
 export {
   Accordion,
+  AgentStatus,
+  AiButton,
   Alert,
   AlertDialog,
   AppLayout,
@@ -75,6 +95,10 @@ export {
   COMPONENT_COUNT,
   Card,
   Carousel,
+  ChatHeader,
+  ChatMarker,
+  ChatMessage,
+  ChatThread,
   Checkbox,
   CheckboxGroup,
   Chip,
@@ -83,6 +107,7 @@ export {
   ColorPicker,
   Combobox,
   CommandPalette,
+  Composer,
   ContactCard,
   ContextMenu,
   ContributionGraph,
@@ -90,6 +115,7 @@ export {
   DatePicker,
   Dialog,
   Divider,
+  DocumentChip,
   Drawer,
   Dropdown,
   DropdownMenu,
@@ -101,20 +127,28 @@ export {
   FileInput,
   Input,
   Instructions,
+  InterruptCard,
   Kbd,
   LinkList,
+  MessageActions,
+  MessageCard,
   Nav,
+  NavList,
   Pagination,
   Popover,
   ProgressBar,
+  PromptSuggestions,
+  Prose,
   Quote,
   RadioButton,
   RadioGroup,
+  Reasoning,
   SectionTitle,
   SegmentedControl,
   SelectionCard,
   Skeleton,
   Slider,
+  SourceChip,
   Spinner,
   Stat,
   Swatch,
@@ -128,7 +162,9 @@ export {
   ToastProvider,
   ToggleGroup,
   ToggleSwitch,
+  ToolCall,
   Tooltip,
+  agentStatusPatterns,
   componentCategories,
   componentMetadata,
   componentRegistry,

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@robr0/design-system",
-  "version": "0.3.0",
-  "description": "A token-driven React design system — accessible components, light/dark theming, and CSS-variable customization.",
+  "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": {
     "type": "git",
     "url": "git+https://github.com/robritacca-dotcom/design-system.git"
   },
-  "homepage": "https://www.robertritacca.com",
+  "homepage": "https://robertritacca.com",
   "keywords": [
     "react",
     "design-system",
@@ -15,7 +15,11 @@
     "design-tokens",
     "css-variables",
     "dark-mode",
-    "typescript"
+    "typescript",
+    "ai-ready",
+    "ai-agents",
+    "claude-code",
+    "composable"
   ],
   "type": "module",
   "sideEffects": [

package/tokens/registry.json

@@ -18,6 +18,9 @@
       "--color-action-primary-text-active",
       "--color-action-primary-text-secondary",
       "--color-action-primary-text-tertiary",
+      "--color-ai-gradient-end",
+      "--color-ai-gradient-mid",
+      "--color-ai-gradient-start",
       "--color-bg-container-border",
       "--color-bg-container-inverse",
       "--color-bg-container-primary",
@@ -32,6 +35,10 @@
       "--color-chart-contribution-2",
       "--color-chart-contribution-3",
       "--color-chart-contribution-4",
+      "--color-chat-bubble-received-bg",
+      "--color-chat-bubble-received-text",
+      "--color-chat-bubble-sent-bg",
+      "--color-chat-bubble-sent-text",
       "--color-control-thumb",
       "--color-core-accent-amber",
       "--color-core-accent-cobalt",
@@ -87,6 +94,7 @@
       "--font-display-2-line-height",
       "--font-display-2-size",
       "--font-display-2-weight",
+      "--font-family-code",
       "--font-family-primary",
       "--font-heading-1-family",
       "--font-heading-1-letter-spacing",
@@ -151,13 +159,17 @@
       "--gap-sm-md",
       "--gap-xl",
       "--gap-xs",
+      "--gap-xxl",
       "--gap-xxs",
+      "--gap-xxxl",
+      "--gap-xxxxl",
       "--padding-lg",
       "--padding-md",
       "--padding-sm",
       "--padding-sm-md",
       "--padding-xl",
       "--padding-xs",
+      "--padding-xxl",
       "--padding-xxs",
       "--padding-xxxs"
     ],
@@ -189,6 +201,7 @@
       "--motion-duration-base",
       "--motion-duration-deliberate",
       "--motion-duration-fast",
+      "--motion-duration-loop-matrix",
       "--motion-duration-loop-shimmer",
       "--motion-duration-loop-spin",
       "--motion-duration-slow",

package/tokens/registry.json.d.ts

@@ -18,6 +18,9 @@ declare const _default: {
       "--color-action-primary-text-active",
       "--color-action-primary-text-secondary",
       "--color-action-primary-text-tertiary",
+      "--color-ai-gradient-end",
+      "--color-ai-gradient-mid",
+      "--color-ai-gradient-start",
       "--color-bg-container-border",
       "--color-bg-container-inverse",
       "--color-bg-container-primary",
@@ -32,6 +35,10 @@ declare const _default: {
       "--color-chart-contribution-2",
       "--color-chart-contribution-3",
       "--color-chart-contribution-4",
+      "--color-chat-bubble-received-bg",
+      "--color-chat-bubble-received-text",
+      "--color-chat-bubble-sent-bg",
+      "--color-chat-bubble-sent-text",
       "--color-control-thumb",
       "--color-core-accent-amber",
       "--color-core-accent-cobalt",
@@ -87,6 +94,7 @@ declare const _default: {
       "--font-display-2-line-height",
       "--font-display-2-size",
       "--font-display-2-weight",
+      "--font-family-code",
       "--font-family-primary",
       "--font-heading-1-family",
       "--font-heading-1-letter-spacing",
@@ -151,13 +159,17 @@ declare const _default: {
       "--gap-sm-md",
       "--gap-xl",
       "--gap-xs",
+      "--gap-xxl",
       "--gap-xxs",
+      "--gap-xxxl",
+      "--gap-xxxxl",
       "--padding-lg",
       "--padding-md",
       "--padding-sm",
       "--padding-sm-md",
       "--padding-xl",
       "--padding-xs",
+      "--padding-xxl",
       "--padding-xxs",
       "--padding-xxxs"
     ],
@@ -189,6 +201,7 @@ declare const _default: {
       "--motion-duration-base",
       "--motion-duration-deliberate",
       "--motion-duration-fast",
+      "--motion-duration-loop-matrix",
       "--motion-duration-loop-shimmer",
       "--motion-duration-loop-spin",
       "--motion-duration-slow",

package/tokens/registry.json.js

@@ -1,4 +1,4 @@
-const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary"], "typography": ["--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-paragraph-em-family", "--font-paragraph-em-letter-spacing", "--font-paragraph-em-line-height", "--font-paragraph-em-size", "--font-paragraph-em-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-em-family", "--font-paragraph-sm-em-letter-spacing", "--font-paragraph-sm-em-line-height", "--font-paragraph-sm-em-size", "--font-paragraph-sm-em-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-lg", "--gap-md", "--gap-sm", "--gap-sm-md", "--gap-xl", "--gap-xs", "--gap-xxs", "--padding-lg", "--padding-md", "--padding-sm", "--padding-sm-md", "--padding-xl", "--padding-xs", "--padding-xxs", "--padding-xxxs"], "radius": ["--radius-full", "--radius-lg", "--radius-md", "--radius-sm", "--radius-xl", "--radius-xs", "--radius-xxl", "--radius-xxs"], "border": ["--border-md", "--border-xs"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-lg", "--icon-size-md", "--icon-size-sm", "--icon-size-xl"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
+const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-ai-gradient-end", "--color-ai-gradient-mid", "--color-ai-gradient-start", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-chat-bubble-received-bg", "--color-chat-bubble-received-text", "--color-chat-bubble-sent-bg", "--color-chat-bubble-sent-text", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary"], "typography": ["--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-code", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-paragraph-em-family", "--font-paragraph-em-letter-spacing", "--font-paragraph-em-line-height", "--font-paragraph-em-size", "--font-paragraph-em-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-em-family", "--font-paragraph-sm-em-letter-spacing", "--font-paragraph-sm-em-line-height", "--font-paragraph-sm-em-size", "--font-paragraph-sm-em-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-lg", "--gap-md", "--gap-sm", "--gap-sm-md", "--gap-xl", "--gap-xs", "--gap-xxl", "--gap-xxs", "--gap-xxxl", "--gap-xxxxl", "--padding-lg", "--padding-md", "--padding-sm", "--padding-sm-md", "--padding-xl", "--padding-xs", "--padding-xxl", "--padding-xxs", "--padding-xxxs"], "radius": ["--radius-full", "--radius-lg", "--radius-md", "--radius-sm", "--radius-xl", "--radius-xs", "--radius-xxl", "--radius-xxs"], "border": ["--border-md", "--border-xs"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-lg", "--icon-size-md", "--icon-size-sm", "--icon-size-xl"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-loop-matrix", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
 const registry = {
   categories
 };

package/tokens/tokens-dark.css

@@ -33,6 +33,13 @@
   /* Divider */
   --color-divider: var(--primitive-neutral-08-semi);
 
+  /* Chat bubbles — alias the same roles as light; the underlying container
+     and text tokens carry the theme swap. */
+  --color-chat-bubble-sent-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-sent-text: var(--color-text-primary);
+  --color-chat-bubble-received-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-received-text: var(--color-text-primary);
+
   /* Overlay & controls */
   --color-scrim: var(--primitive-true-black-strong);
   --color-control-thumb: var(--primitive-neutral-01);
@@ -88,6 +95,12 @@
   --color-status-neutral-border: var(--primitive-neutral-06);
   --color-status-neutral-text: var(--primitive-neutral-01);
 
+  /* AI - The gradient accent, one step brighter than light mode so the ring
+     stays luminous on dark surfaces. */
+  --color-ai-gradient-start: var(--primitive-purple-05);
+  --color-ai-gradient-mid: var(--primitive-blue-05);
+  --color-ai-gradient-end: var(--primitive-teal-05);
+
   /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
   --color-chart-contribution-0: var(--primitive-neutral-08);
   --color-chart-contribution-1: var(--primitive-green-10);

package/tokens/tokens-light.css

@@ -34,6 +34,15 @@
   /* Divider */
   --color-divider: var(--primitive-neutral-02-semi);
 
+  /* Chat bubbles — sent (the person) and received (the agent). Both alias
+     the container-secondary / text-primary pair today; they exist as their
+     own roles so chat surfaces can be re-themed later without touching the
+     container ramp. */
+  --color-chat-bubble-sent-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-sent-text: var(--color-text-primary);
+  --color-chat-bubble-received-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-received-text: var(--color-text-primary);
+
   /* Overlay & controls */
   --color-scrim: var(--primitive-true-black-semi);
   --color-control-thumb: var(--primitive-neutral-00);
@@ -99,6 +108,14 @@
   --color-status-neutral-border: var(--primitive-neutral-07);
   --color-status-neutral-text: var(--primitive-neutral-08);
 
+  /* AI - The gradient accent reserved for AI entry points and surfaces.
+     Purple → blue → teal, so the AI affordance is its own signature and the
+     flat action teal keeps meaning "click here". Used as gradient stops
+     (AiButton's ring and glow), never as fills for ordinary chrome. */
+  --color-ai-gradient-start: var(--primitive-purple-06);
+  --color-ai-gradient-mid: var(--primitive-blue-06);
+  --color-ai-gradient-end: var(--primitive-teal-06);
+
   /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
   --color-chart-contribution-0: var(--color-bg-container-primary);
   --color-chart-contribution-1: var(--primitive-green-02);
@@ -156,4 +173,29 @@
   --gap-md: var(--primitive-gap-md);
   --gap-lg: var(--primitive-gap-lg);
   --gap-xl: var(--primitive-gap-xl);
+
+  /* Section rhythm — page-level spacing between major blocks. These are
+     the only spacing tokens with a responsive step (see the collapse
+     block at the bottom of this file). */
+  --gap-xxl: var(--primitive-gap-xxl);       /* 60px */
+  --gap-xxxl: var(--primitive-gap-xxxl);     /* 80px */
+  --gap-xxxxl: var(--primitive-gap-xxxxl);   /* 120px */
+  --padding-xxl: var(--primitive-padding-xxl); /* 60px */
+}
+
+/* ============================================
+   RESPONSIVE COLLAPSE
+   Section-rhythm spacing steps one notch down the primitive scale at
+   768px — the token layer's only breakpoint (typography collapses at the
+   same threshold in tokens-typography.css). Component-level spacing
+   (gap/padding xl and below) never steps.
+   ============================================ */
+
+@media (max-width: 768px) {
+  [data-theme="light"], :root {
+    --gap-xxl: var(--primitive-gap-xl);        /* 60 → 40 */
+    --gap-xxxl: var(--primitive-gap-xxl);      /* 80 → 60 */
+    --gap-xxxxl: var(--primitive-gap-xxxl);    /* 120 → 80 */
+    --padding-xxl: var(--primitive-padding-xl); /* 60 → 40 */
+  }
 }

package/tokens/tokens-motion.css

@@ -26,7 +26,8 @@
 
   --motion-duration-deliberate: 400ms;    /* Carousel slide */
   --motion-duration-loop-spin: 1000ms;    /* Spinner rotation */
-  --motion-duration-loop-shimmer: 1800ms; /* Skeleton shimmer */
+  --motion-duration-loop-shimmer: 1800ms; /* Skeleton shimmer, agent label sweep */
+  --motion-duration-loop-matrix: 1400ms;  /* Agent dot-matrix cycle (twelve slots) */
 
   /* ============================================
      EASINGS
@@ -55,6 +56,7 @@
     --motion-duration-deliberate: 0.01ms;
     --motion-duration-loop-spin: 0.01ms;
     --motion-duration-loop-shimmer: 0.01ms;
+    --motion-duration-loop-matrix: 0.01ms;
   }
 
   *,

package/tokens/tokens-typography.css

@@ -11,6 +11,11 @@
 
   --font-family-primary: 'Nunito Sans', sans-serif;
 
+  /* The one sanctioned monospace stack — CodeBlock, ToolCall names, and
+     Prose inline code. Anything monospace references this token. */
+  --font-family-code: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
+    monospace;
+
   /* ============================================
      DISPLAY STYLES (Large headlines)
      ============================================ */
@@ -114,3 +119,22 @@
   --font-paragraph-sm-em-line-height: 20px;
   --font-paragraph-sm-em-letter-spacing: 0;
 }
+
+/* ============================================
+   RESPONSIVE COLLAPSE
+   The display tier steps down once, at 768px — the token layer's only
+   breakpoint. Headings and body never step; weights and letter-spacing
+   never change at any breakpoint (weight contrast is the hierarchy rule).
+   ============================================ */
+
+@media (max-width: 768px) {
+  :root {
+    --font-mega-1-size: 64px;
+    --font-mega-2-size: 56px;
+    --font-display-1-size: 48px;
+    --font-display-2-size: 40px;
+    --font-display-2-line-height: 1.05;
+    --font-sub-display-size: 24px;
+    --font-sub-display-line-height: 36px;
+  }
+}