@robr0/design-system 0.4.0 → 0.5.0

package/components/Reasoning/Reasoning.css

@@ -7,6 +7,10 @@
    ============================================ */
 
 .ds-reasoning {
+  /* Where an AgentStatus summary's label starts: matrix plus its gap.
+     The rail geometry and the handoff slide both derive from it. */
+  --ds-reasoning-align: calc(var(--icon-size-md) + var(--gap-sm-md));
+
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -19,24 +23,34 @@
 .ds-reasoning__trigger {
   display: inline-flex;
   align-items: center;
-  gap: var(--gap-xs);
+  gap: var(--gap-sm);
   align-self: flex-start;
   padding: var(--padding-xxs) var(--padding-xs);
   margin-left: calc(var(--padding-xs) * -1);
   background: none;
   border: none;
   border-radius: var(--radius-sm);
-  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);
+  color: var(--color-text-secondary);
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
   cursor: pointer;
   transition: color var(--motion-duration-fast) var(--motion-ease-standard);
 }
 
 .ds-reasoning__trigger:hover {
+  color: var(--color-text-primary);
+}
+
+/* Summary-only: the same line, minus every affordance that would promise a
+   panel behind it. Not a button, so there is nothing to focus or press. */
+.ds-reasoning__trigger--static {
+  cursor: default;
+}
+
+.ds-reasoning__trigger--static:hover {
   color: var(--color-text-secondary);
 }
 
@@ -45,35 +59,81 @@
   outline-offset: -2px;
 }
 
+/* Closed the chevron points at the collapsed trace; open it points down the
+   way the panel expands. The glyph itself points down, so closed is the
+   rotated state — and the quarter turn to open runs clockwise, following
+   the panel as it opens. */
 .ds-reasoning__chevron {
   --icon-size: var(--icon-size-sm);
 
   flex: none;
+  transform: rotate(-90deg);
   transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
 }
 
 .ds-reasoning--open .ds-reasoning__chevron {
-  transform: rotate(180deg);
+  transform: rotate(0deg);
 }
 
 /* ============================================
    SUMMARY
-   While the trace streams, a highlight sweeps
-   the summary left to right — the same treatment
-   AgentStatus uses, so "the model is working"
+   While the trace streams, a sweep walks the
+   summary left to right — the same gradient
+   AgentStatus uses (primary base, tertiary
+   band, same stops), so "the model is working"
    looks the same wherever it appears.
    ============================================ */
 
 .ds-reasoning__summary {
+  position: relative;
+  white-space: nowrap;
+}
+
+/* The live→done handoff. The departing node summary (an AgentStatus)
+   overlays the incoming text, fading out in place, while the text summary
+   slides left from where its label sat into the flush position. The
+   modifier comes off once the animation ends, so nothing stays composited. */
+.ds-reasoning__summary--entering {
+  animation: ds-reasoning-summary-in var(--motion-duration-slow) var(--motion-ease-entrance) both;
+}
+
+.ds-reasoning__summary-leaving {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
   white-space: nowrap;
+  animation: ds-reasoning-summary-out var(--motion-duration-slow) var(--motion-ease-standard) both;
+}
+
+@keyframes ds-reasoning-summary-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--ds-reasoning-align));
+  }
 }
 
-.ds-reasoning--streaming .ds-reasoning__summary {
+@keyframes ds-reasoning-summary-out {
+  to {
+    opacity: 0;
+  }
+}
+
+/* A node summary (an AgentStatus) owns its own appearance — the text
+   shimmer below never applies to it. Inline-flex keeps the span exactly
+   the node's height: left inline, the node sits on the text baseline and
+   the leftover descender space pushes it off the chevron's centreline. */
+.ds-reasoning__summary--node {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ds-reasoning--streaming .ds-reasoning__summary:not(.ds-reasoning__summary--node) {
   background-image: linear-gradient(
     100deg,
-    var(--color-text-tertiary) 40%,
-    var(--color-text-primary) 50%,
-    var(--color-text-tertiary) 60%
+    var(--color-text-primary) 35%,
+    var(--color-text-tertiary) 50%,
+    var(--color-text-primary) 65%
   );
   background-size: 250% 100%;
   background-clip: text;
@@ -115,20 +175,28 @@
   overflow: hidden;
   min-height: 0;
   transition: padding-block var(--motion-duration-slow) var(--motion-ease-standard);
-  padding-left: var(--padding-sm-md);
-  /* The rail sits flush with the summary's left edge — the trigger's own
-     padding is cancelled by its negative margin, so both start at zero */
+  /* The rail and trace align to an AgentStatus summary's geometry: the
+     rail runs down the centre of the matrix (half an icon step, corrected
+     by half the rail's own width) and the trace text starts exactly where
+     the status label's first letter starts (matrix + its gap). A plain
+     text summary shares the same geometry, so swapping a live status for
+     the thought-for line never shifts the trace. */
+  margin-left: calc(var(--icon-size-md) / 2 - var(--border-md) / 2);
+  padding-left: calc(var(--icon-size-md) / 2 + var(--gap-sm-md) - var(--border-md) / 2);
   border-left: var(--border-md) solid var(--color-divider);
   color: var(--color-text-secondary);
-  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-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
 }
 
+/* With the trigger's own bottom padding, the panel opens one --gap-lg
+   below the summary row — the same step a --gap-lg trace list uses
+   between nodes, so the first node isn't tighter than the rest. */
 .ds-reasoning--open .ds-reasoning__content {
-  padding-block: var(--padding-xs);
+  padding-block: var(--padding-md);
 }
 
 .ds-reasoning__content > :first-child {
@@ -139,12 +207,68 @@
   margin-bottom: 0;
 }
 
+/* ============================================
+   TRACE NODES
+   Inside Reasoning, a list is the trace's node
+   list: one thinking step per item, no bullets
+   (the rail is the marker), on the same
+   --gap-lg beat the panel opens with. New
+   nodes rise in as the trace builds.
+   ============================================ */
+
+.ds-reasoning__content ul,
+.ds-reasoning__content ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-lg);
+}
+
+.ds-reasoning__content li {
+  animation: ds-reasoning-node-in var(--motion-duration-slow) var(--motion-ease-entrance);
+}
+
+@keyframes ds-reasoning-node-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+/* ============================================
+   SIZES
+   The scale pairs with ChatMessage: default
+   matches default message text, compact
+   matches compact message text.
+   ============================================ */
+
+.ds-reasoning--compact .ds-reasoning__trigger,
+.ds-reasoning--compact .ds-reasoning__content {
+  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);
+}
+
+/* Compact pairs with a compact AgentStatus: sm matrix, sm gap. */
+.ds-reasoning--compact {
+  --ds-reasoning-align: calc(var(--icon-size-sm) + var(--gap-sm));
+}
+
+.ds-reasoning--compact .ds-reasoning__content {
+  margin-left: calc(var(--icon-size-sm) / 2 - var(--border-md) / 2);
+  padding-left: calc(var(--icon-size-sm) / 2 + var(--gap-sm) - var(--border-md) / 2);
+}
+
 /* ============================================
    REDUCED MOTION
    ============================================ */
 
 @media (prefers-reduced-motion: reduce) {
-  .ds-reasoning--streaming .ds-reasoning__summary {
+  .ds-reasoning--streaming .ds-reasoning__summary:not(.ds-reasoning__summary--node) {
     background-image: none;
     color: var(--color-text-tertiary);
     animation: none;

package/components/Reasoning/Reasoning.d.ts

@@ -7,6 +7,25 @@ type ReasoningOwnProps = {
     duration?: number;
     /** Override the summary line. By default it reports the streaming state and the duration. */
     label?: string;
+    /**
+     * Replace the summary text with custom content — typically an AgentStatus,
+     * pairing the live indicator with the trace disclosure. The node owns its
+     * own appearance and announcement, so Reasoning's shimmer and live region
+     * stand down.
+     */
+    summary?: React.ReactNode;
+    /**
+     * Render the summary line alone, with no chevron, no trigger, and no
+     * panel — for a model that reports what it is doing but produces no trace
+     * to read. A disclosure that opens onto nothing is a promise the component
+     * cannot keep, so it stops being one.
+     */
+    summaryOnly?: boolean;
+    /**
+     * Text scale, paired with ChatMessage's sizes: `default` matches default
+     * message text, `compact` matches compact message text.
+     */
+    size?: 'default' | 'compact';
     /** Open state for controlled use. Pair with `onOpenChange`. */
     open?: boolean;
     /** Open state for uncontrolled use. Defaults to open while `streaming`. */

package/components/Reasoning/Reasoning.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useId, useState, useRef, useEffect, useCallback } from "react";
 import "./Reasoning.css";
 import "../../fonts/material-symbols.css";
@@ -7,6 +7,9 @@ const Reasoning = React.forwardRef(
     streaming = false,
     duration,
     label,
+    summary,
+    summaryOnly = false,
+    size = "default",
     open,
     defaultOpen,
     onOpenChange,
@@ -21,6 +24,14 @@ const Reasoning = React.forwardRef(
     const isControlled = open !== void 0;
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? streaming);
     const isOpen = isControlled ? open : uncontrolledOpen;
+    const [leaving, setLeaving] = useState(null);
+    const prevSummary = useRef(summary);
+    useEffect(() => {
+      if (prevSummary.current != null && summary == null) {
+        setLeaving(prevSummary.current);
+      }
+      prevSummary.current = summary;
+    }, [summary]);
     const readerDecided = useRef(false);
     const wasStreaming = useRef(streaming);
     useEffect(() => {
@@ -36,13 +47,31 @@ const Reasoning = React.forwardRef(
       if (!isControlled) setUncontrolledOpen(next);
       onOpenChange?.(next);
     }, [isOpen, isControlled, onOpenChange]);
-    const summary = label ?? (streaming ? "Thinking" : duration !== void 0 ? `Thought for ${duration}s` : "Thought process");
+    const summaryText = label ?? (streaming ? "Thinking" : duration !== void 0 ? `Thought for ${duration}s` : "Thought process");
     const classes = [
       baseClass,
+      `${baseClass}--${size}`,
       isOpen ? `${baseClass}--open` : "",
       streaming ? `${baseClass}--streaming` : "",
       className
     ].filter(Boolean).join(" ");
+    const summaryLine = /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `${baseClass}__summary${summary ? ` ${baseClass}__summary--node` : ""}${leaving != null && summary == null ? ` ${baseClass}__summary--entering` : ""}`,
+        role: summary ? void 0 : "status",
+        onAnimationEnd: (e) => {
+          if (e.target === e.currentTarget) setLeaving(null);
+        },
+        children: [
+          leaving != null && summary == null && /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-leaving`, "aria-hidden": "true", children: leaving }),
+          summary ?? summaryText
+        ]
+      }
+    );
+    if (summaryOnly) {
+      return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__trigger ${baseClass}__trigger--static`, children: summaryLine }) });
+    }
     return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
       /* @__PURE__ */ jsxs(
         "button",
@@ -54,7 +83,7 @@ const Reasoning = React.forwardRef(
           "aria-controls": panelId,
           onClick: toggle,
           children: [
-            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary`, role: "status", children: summary }),
+            summaryLine,
             /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
           ]
         }

package/components/SourceChip/SourceChip.css

@@ -0,0 +1,102 @@
+/* ============================================
+   SOURCE CHIP COMPONENT
+   Numbered citation pill linking a claim to
+   its source. Anchor when href is set, plain
+   span otherwise.
+   ============================================ */
+
+.ds-source-chip {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs); /* 4px */
+
+  /* Spacing */
+  padding: var(--padding-xxxs) var(--padding-sm); /* 2px 8px */
+
+  /* Shape — borderless pill on the secondary container */
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-secondary);
+
+  /* Typography */
+  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);
+  color: var(--color-text-secondary);
+
+  /* The pill shape is the affordance — never an underline */
+  text-decoration: none;
+  cursor: default;
+
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* ============================================
+   INDEX — citation numeral in its own circle
+   ============================================ */
+
+.ds-source-chip__index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-tertiary);
+
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   ICON (leading, when no index)
+   ============================================ */
+
+.ds-source-chip__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-sm);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+/* ============================================
+   TITLE — truncates with an ellipsis
+   ============================================ */
+
+.ds-source-chip__title {
+  max-width: 24ch;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ============================================
+   LINK (rendered as <a>)
+   ============================================ */
+
+.ds-source-chip--link {
+  cursor: pointer;
+}
+
+.ds-source-chip--link:hover {
+  background-color: var(--color-bg-container-tertiary);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-source-chip--link:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}

package/components/SourceChip/SourceChip.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+/** Props owned by SourceChip itself — everything else falls through to the root element. */
+type SourceChipOwnProps = {
+    /** The source name, e.g. "Design tokens quarterly". Truncates with an ellipsis when long. */
+    title: string;
+    /** Citation number, rendered as a leading numeral in its own small badge circle. */
+    index?: number;
+    /**
+     * Leading icon — a Material Symbol name (string) or custom element (ReactNode).
+     * The icon and the index share the leading slot: when both are passed, `index` wins
+     * and the icon is not rendered.
+     */
+    icon?: string | React.ReactNode;
+    /** Optional href — renders as an `<a>` instead of a `<span>`. */
+    href?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SourceChipProps extends SourceChipOwnProps, Omit<React.ComponentPropsWithoutRef<'a'>, keyof SourceChipOwnProps> {
+}
+/**
+ * SourceChip is the numbered citation pill linking a claim to its source.
+ * It renders inline after a sentence or in a sources row under an assistant
+ * chat message: a leading citation number (or icon) beside a truncating
+ * source title.
+ *
+ * Renders an `<a>` when `href` is supplied, a plain `<span>` otherwise.
+ * Forwards a ref to whichever element it renders, and spreads unrecognised
+ * props onto it — `target` and `rel` pass through as native anchor attributes.
+ */
+export declare const SourceChip: React.ForwardRefExoticComponent<SourceChipProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
+export {};

package/components/SourceChip/SourceChip.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./SourceChip.css";
+import "../../fonts/material-symbols.css";
+const SourceChip = React.forwardRef(
+  ({ title, index, icon, href, className = "", ...rest }, ref) => {
+    const baseClass = "ds-source-chip";
+    const classes = [baseClass, href ? `${baseClass}--link` : "", className].filter(Boolean).join(" ");
+    const leading = index !== void 0 ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__index`, children: index }) : icon ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }) : null;
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      leading,
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsx("a", { ...rest, ref, className: classes, href, children: content });
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        children: content
+      }
+    );
+  }
+);
+SourceChip.displayName = "SourceChip";
+export {
+  SourceChip
+};

package/components/Stat/Stat.css

@@ -66,11 +66,11 @@
 }
 
 .ds-stat__delta--up {
-  color: var(--color-status-positive-text);
+  color: var(--color-core-accent-mint);
 }
 
 .ds-stat__delta--down {
-  color: var(--color-status-error-text);
+  color: var(--color-core-accent-coral);
 }
 
 .ds-stat__delta--neutral {

package/components/ToolCall/ToolCall.css

@@ -72,11 +72,11 @@
   --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 */
+/* The tool name is an identifier, so it takes the code stack —
+   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-family: var(--font-family-code);
   font-size: var(--font-paragraph-sm-size);
   line-height: var(--font-paragraph-sm-line-height);
   color: var(--color-text-primary);