@robr0/design-system 0.3.0 → 0.5.0

package/components/ToolCall/ToolCall.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useId, useState, useCallback } from "react";
+import { Spinner } from "../Spinner/Spinner.js";
+import "./ToolCall.css";
+import "../../fonts/material-symbols.css";
+const DEFAULT_STATUS_LABELS = {
+  pending: "Needs approval",
+  running: "Running",
+  success: "Done",
+  error: "Failed"
+};
+const STATUS_ICONS = {
+  pending: "pause_circle",
+  success: "check_circle",
+  error: "error"
+};
+const ToolCall = React.forwardRef(
+  ({
+    name,
+    status = "success",
+    summary,
+    duration,
+    statusLabel,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    actions,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-tool-call";
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const hasPanel = Boolean(children);
+    const toggle = useCallback(() => {
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const classes = [
+      baseClass,
+      `${baseClass}--${status}`,
+      isOpen ? `${baseClass}--open` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const header = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true", children: status === "running" ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "inherit" }) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: STATUS_ICONS[status] }) }),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__name`, children: name }),
+      summary && /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary`, children: summary }),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__status`, children: statusLabel ?? DEFAULT_STATUS_LABELS[status] }),
+      duration && /* @__PURE__ */ jsx("span", { className: `${baseClass}__duration`, children: duration }),
+      hasPanel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+    ] });
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      hasPanel ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__header`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: header
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: `${baseClass}__header ${baseClass}__header--static`, children: header }),
+      hasPanel && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__panel`,
+          id: panelId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children })
+        }
+      ),
+      actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions })
+    ] });
+  }
+);
+ToolCall.displayName = "ToolCall";
+export {
+  ToolCall
+};

package/components/registry.json

@@ -2,6 +2,7 @@
   "$comment": "SINGLE SOURCE OF TRUTH for the public component count. Every folder in src/components must appear in exactly one of these lists; scripts/validate-component-registry.mjs enforces this at build time. Import COMPONENT_COUNT from src/components/registry.ts wherever a count is displayed - never hardcode the number.",
   "categories": [
     "actions",
+    "ai",
     "charts",
     "data-display",
     "feedback",
@@ -19,6 +20,22 @@
       "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",
@@ -95,7 +112,7 @@
       "name": "Card",
       "label": "Card",
       "slug": "card",
-      "description": "Card components for previews, navigation, and token documentation \u2014 from content cards to colour swatches and typography specimens.",
+      "description": "Card components for previews, navigation, and token documentation, from content cards to colour swatches and typography specimens.",
       "category": "data-display",
       "client": true
     },
@@ -115,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",
@@ -159,7 +208,7 @@
       "name": "Combobox",
       "label": "Combobox",
       "slug": "combobox",
-      "description": "A filterable select that narrows options as you type, with multi-select chips, grouping, and async loading.",
+      "description": "A filterable select that narrows options as the user types, with multi-select chips, grouping, and async loading.",
       "category": "forms",
       "client": true
     },
@@ -171,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",
@@ -227,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",
@@ -255,7 +320,7 @@
       "name": "EmptyState",
       "label": "Empty state",
       "slug": "empty-state",
-      "description": "The placeholder for a list, table, or search with nothing to show \u2014 icon, headline, guidance, and a next action.",
+      "description": "The placeholder for a list, table, or search with nothing to show: icon, headline, guidance, and a next action.",
       "category": "feedback",
       "client": false
     },
@@ -263,7 +328,7 @@
       "name": "EntityCard",
       "label": "Entity card",
       "slug": "entity-card",
-      "description": "Compact display-only card with a centred icon or image and a label \u2014 powers the Icons and Logos galleries.",
+      "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
     },
@@ -271,7 +336,7 @@
       "name": "Field",
       "label": "Field",
       "slug": "field",
-      "description": "The shared scaffolding for labelled form controls \u2014 label, required marker, helper and error text, and the ARIA wiring that ties them together.",
+      "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
     },
@@ -307,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",
@@ -323,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",
@@ -355,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",
@@ -371,6 +484,14 @@
       "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",
@@ -407,10 +528,18 @@
       "name": "Slider",
       "label": "Slider",
       "slug": "slider",
-      "description": "Range input for selecting a value within a given range with default and compact sizes.",
+      "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",
@@ -463,7 +592,7 @@
       "name": "Timeline",
       "label": "Timeline",
       "slug": "timeline",
-      "description": "Ordered sequences \u2014 histories and steppers.",
+      "description": "Ordered sequences: histories and steppers.",
       "category": "data-display",
       "client": false
     },
@@ -491,6 +620,14 @@
       "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",

package/components/registry.json.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
   "$comment": "SINGLE SOURCE OF TRUTH for the public component count. Every folder in src/components must appear in exactly one of these lists; scripts/validate-component-registry.mjs enforces this at build time. Import COMPONENT_COUNT from src/components/registry.ts wherever a count is displayed - never hardcode the number.",
   "categories": [
     "actions",
+    "ai",
     "charts",
     "data-display",
     "feedback",
@@ -19,6 +20,22 @@ declare const _default: {
       "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",
@@ -95,7 +112,7 @@ declare const _default: {
       "name": "Card",
       "label": "Card",
       "slug": "card",
-      "description": "Card components for previews, navigation, and token documentation \u2014 from content cards to colour swatches and typography specimens.",
+      "description": "Card components for previews, navigation, and token documentation, from content cards to colour swatches and typography specimens.",
       "category": "data-display",
       "client": true
     },
@@ -115,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",
@@ -159,7 +208,7 @@ declare const _default: {
       "name": "Combobox",
       "label": "Combobox",
       "slug": "combobox",
-      "description": "A filterable select that narrows options as you type, with multi-select chips, grouping, and async loading.",
+      "description": "A filterable select that narrows options as the user types, with multi-select chips, grouping, and async loading.",
       "category": "forms",
       "client": true
     },
@@ -171,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",
@@ -227,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",
@@ -255,7 +320,7 @@ declare const _default: {
       "name": "EmptyState",
       "label": "Empty state",
       "slug": "empty-state",
-      "description": "The placeholder for a list, table, or search with nothing to show \u2014 icon, headline, guidance, and a next action.",
+      "description": "The placeholder for a list, table, or search with nothing to show: icon, headline, guidance, and a next action.",
       "category": "feedback",
       "client": false
     },
@@ -263,7 +328,7 @@ declare const _default: {
       "name": "EntityCard",
       "label": "Entity card",
       "slug": "entity-card",
-      "description": "Compact display-only card with a centred icon or image and a label \u2014 powers the Icons and Logos galleries.",
+      "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
     },
@@ -271,7 +336,7 @@ declare const _default: {
       "name": "Field",
       "label": "Field",
       "slug": "field",
-      "description": "The shared scaffolding for labelled form controls \u2014 label, required marker, helper and error text, and the ARIA wiring that ties them together.",
+      "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
     },
@@ -307,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",
@@ -323,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",
@@ -355,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",
@@ -371,6 +484,14 @@ declare const _default: {
       "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",
@@ -407,10 +528,18 @@ declare const _default: {
       "name": "Slider",
       "label": "Slider",
       "slug": "slider",
-      "description": "Range input for selecting a value within a given range with default and compact sizes.",
+      "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",
@@ -463,7 +592,7 @@ declare const _default: {
       "name": "Timeline",
       "label": "Timeline",
       "slug": "timeline",
-      "description": "Ordered sequences \u2014 histories and steppers.",
+      "description": "Ordered sequences: histories and steppers.",
       "category": "data-display",
       "client": false
     },
@@ -491,6 +620,14 @@ declare const _default: {
       "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",