@robr0/design-system 0.3.0 → 0.4.0

package/components/Textarea/Textarea.d.ts

@@ -23,7 +23,11 @@ type TextareaOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes — applied to the wrapper, not the <textarea> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface TextareaProps extends TextareaOwnProps, Omit<React.ComponentPropsWithoutRef<'textarea'>, keyof TextareaOwnProps> {

package/components/Timeline/Timeline.d.ts

@@ -35,6 +35,7 @@ export interface TimelineCompany {
 }
 /** Default variant — a flat sequence of steps/events with dot, badge, or icon markers. */
 export interface TimelineDefaultProps {
+    /** Selects the flat step/event layout — the default when omitted */
     variant?: 'default';
     /** Ordered list of steps/events */
     items: TimelineItem[];
@@ -47,6 +48,7 @@ export interface TimelineDefaultProps {
 }
 /** Company variant — grouped roles under a logo, for résumé/pipeline histories. */
 export interface TimelineCompanyProps {
+    /** Selects the grouped layout: roles nested under a company logo */
     variant: 'company';
     /** Ordered list of company/tool entries */
     items: TimelineCompany[];

package/components/ToggleGroup/ToggleGroup.d.ts

@@ -23,9 +23,17 @@ type ToggleGroupOwnProps = {
     onValueChange?: (value: string | string[]) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValueChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string | string[]) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface ToggleGroupProps extends ToggleGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ToggleGroupOwnProps> {

package/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -13,9 +13,17 @@ type ToggleSwitchOwnProps = {
     onCheckedChange?: (checked: boolean) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onCheckedChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onCheckedChange` instead.
+     */
     onChange?: (checked: boolean) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface ToggleSwitchProps extends ToggleSwitchOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof ToggleSwitchOwnProps | 'type'> {

package/components/ToolCall/ToolCall.css

@@ -0,0 +1,213 @@
+/* ============================================
+   TOOL CALL COMPONENT
+   One tool invocation: a skimmable header row
+   and, behind a disclosure, the arguments and
+   the result.
+
+   The container stays neutral — colour lives in
+   the indicator and the status word, so a long
+   run of calls reads as a list rather than a
+   wall of tinted cards. The two states a person
+   has to act on, pending and error, also take a
+   coloured border.
+   ============================================ */
+
+.ds-tool-call {
+  --ds-tool-call-color: var(--color-text-secondary);
+  --ds-tool-call-border: var(--color-bg-container-border);
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--ds-tool-call-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-tool-call__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  width: 100%;
+  padding: var(--padding-xs) var(--padding-sm-md);
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-tool-call__header:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-tool-call__header:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* No panel to open — the row is a plain div and must not look pressable */
+.ds-tool-call__header--static {
+  cursor: default;
+}
+
+.ds-tool-call__header--static:hover {
+  background-color: transparent;
+}
+
+.ds-tool-call__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--ds-tool-call-color);
+}
+
+.ds-tool-call__indicator .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* The tool name is an identifier, so it takes the same monospace
+   context CodeBlock uses — the one place the system leaves Nunito Sans */
+.ds-tool-call__name {
+  flex: none;
+  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-tool-call__summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-tool-call__status {
+  flex: none;
+  margin-left: auto;
+  color: var(--ds-tool-call-color);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  white-space: nowrap;
+}
+
+/* A summary already claims the free space; without one the status still
+   needs pushing to the right, which the auto margin above handles */
+.ds-tool-call__summary ~ .ds-tool-call__status {
+  margin-left: 0;
+}
+
+.ds-tool-call__duration {
+  flex: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.ds-tool-call__chevron {
+  --icon-size: var(--icon-size-sm);
+
+  flex: none;
+  color: var(--color-icon-secondary);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-tool-call--open .ds-tool-call__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   STATUSES
+   ============================================ */
+
+.ds-tool-call--pending {
+  --ds-tool-call-color: var(--color-status-warning-text);
+  --ds-tool-call-border: var(--color-status-warning-border);
+}
+
+.ds-tool-call--running {
+  --ds-tool-call-color: var(--color-status-info-text);
+}
+
+.ds-tool-call--success {
+  --ds-tool-call-color: var(--color-status-positive-text);
+}
+
+.ds-tool-call--error {
+  --ds-tool-call-color: var(--color-status-error-text);
+  --ds-tool-call-border: var(--color-status-error-border);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-tool-call__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-ease-standard),
+    visibility var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-tool-call--open .ds-tool-call__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-tool-call__content {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.ds-tool-call--open .ds-tool-call__content {
+  padding: var(--padding-sm-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+}
+
+.ds-tool-call__content > :first-child {
+  margin-top: 0;
+}
+
+.ds-tool-call__content > :last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================
+   ACTIONS
+   Outside the panel, so a call awaiting approval
+   can be answered without expanding it first.
+   ============================================ */
+
+.ds-tool-call__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gap-sm);
+  padding: var(--padding-sm) var(--padding-sm-md);
+  border-top: var(--border-xs) solid var(--color-divider);
+  background-color: var(--color-bg-container-secondary);
+}

package/components/ToolCall/ToolCall.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+export type ToolCallStatus = 'pending' | 'running' | 'success' | 'error';
+/** Props owned by ToolCall itself — everything else falls through to the root element. */
+type ToolCallOwnProps = {
+    /** The tool that was invoked, shown in monospace. */
+    name: string;
+    /** Where the call has got to. Drives the colour, the indicator, and the default status text. */
+    status?: ToolCallStatus;
+    /** One line describing this particular call, e.g. the target path or query. */
+    summary?: string;
+    /** How long the call took, e.g. "1.2s". Free text, so callers keep their own formatting. */
+    duration?: string;
+    /** Override the status text shown beside the indicator. */
+    statusLabel?: string;
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. */
+    defaultOpen?: boolean;
+    /** Fires whenever the panel opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Controls for a call awaiting a decision — allow, deny, always allow.
+     * Rendered outside the collapsible panel, so approving never requires
+     * expanding the call first.
+     */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** The call's arguments and result. */
+    children?: React.ReactNode;
+};
+export interface ToolCallProps extends ToolCallOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ToolCallOwnProps> {
+}
+/**
+ * ToolCall is the record of one tool invocation: what ran, how it went, how
+ * long it took, and — behind a disclosure — the arguments it was given and
+ * what it returned.
+ *
+ * A run is mostly a list of these, so the collapsed header carries everything
+ * needed to skim it and the body holds everything needed to audit it.
+ */
+export declare const ToolCall: React.ForwardRefExoticComponent<ToolCallProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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,14 @@
       "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",
@@ -95,7 +104,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
     },
@@ -159,7 +168,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
     },
@@ -255,7 +264,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 +272,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 +280,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
     },
@@ -371,6 +380,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,7 +424,7 @@
       "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
     },
@@ -463,7 +480,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 +508,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,14 @@ 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": "Alert",
       "label": "Alert",
@@ -95,7 +104,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
     },
@@ -159,7 +168,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
     },
@@ -255,7 +264,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 +272,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 +280,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
     },
@@ -371,6 +380,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,7 +424,7 @@ 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
     },
@@ -463,7 +480,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 +508,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",