@robr0/design-system 0.4.0 → 0.6.0

package/components/Prose/Prose.css

@@ -0,0 +1,252 @@
+/* ============================================
+   PROSE COMPONENT
+   Token-styled typography for rendered markdown
+   ============================================ */
+
+.ds-prose {
+  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);
+  color: var(--color-text-primary);
+}
+
+/* Block rhythm — every block owns its bottom margin; the edges are
+   trimmed so Prose slots into bubbles and cards cleanly */
+.ds-prose p,
+.ds-prose ul,
+.ds-prose ol,
+.ds-prose pre,
+.ds-prose blockquote,
+.ds-prose table,
+.ds-prose hr,
+.ds-prose img {
+  margin: 0;
+  margin-block-end: var(--gap-md);
+}
+
+.ds-prose > :first-child {
+  margin-block-start: 0;
+}
+
+.ds-prose > :last-child {
+  margin-block-end: 0;
+}
+
+/* ============================================
+   PARAGRAPHS
+   ============================================ */
+
+.ds-prose p {
+  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);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   HEADINGS
+   Hierarchy carried by the token scale; the
+   weight contrast is encoded in the tokens
+   ============================================ */
+
+.ds-prose h1,
+.ds-prose h2,
+.ds-prose h3,
+.ds-prose h4 {
+  margin: 0;
+  margin-block-start: var(--gap-lg);
+  margin-block-end: var(--gap-sm-md);
+  color: var(--color-text-primary);
+}
+
+.ds-prose h1 {
+  font-family: var(--font-heading-1-family);
+  font-size: var(--font-heading-1-size);
+  font-weight: var(--font-heading-1-weight);
+  line-height: var(--font-heading-1-line-height);
+  letter-spacing: var(--font-heading-1-letter-spacing);
+}
+
+.ds-prose h2 {
+  font-family: var(--font-heading-2-family);
+  font-size: var(--font-heading-2-size);
+  font-weight: var(--font-heading-2-weight);
+  line-height: var(--font-heading-2-line-height);
+  letter-spacing: var(--font-heading-2-letter-spacing);
+}
+
+.ds-prose h3 {
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+}
+
+.ds-prose h4 {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+}
+
+/* ============================================
+   LISTS
+   ============================================ */
+
+.ds-prose ul,
+.ds-prose ol {
+  padding-inline-start: var(--padding-md);
+}
+
+.ds-prose li {
+  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);
+  color: var(--color-text-primary);
+}
+
+.ds-prose li + li {
+  margin-block-start: var(--gap-xs);
+}
+
+/* Nested lists sit tight under their parent item */
+.ds-prose li > ul,
+.ds-prose li > ol {
+  margin-block-start: var(--gap-xs);
+  margin-block-end: 0;
+}
+
+/* ============================================
+   INLINE ELEMENTS
+   ============================================ */
+
+.ds-prose a {
+  color: var(--color-action-primary-text-tertiary);
+  text-decoration: underline;
+}
+
+.ds-prose strong {
+  font-weight: var(--font-paragraph-em-weight);
+}
+
+.ds-prose em {
+  font-style: italic;
+}
+
+.ds-prose code {
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-xxs);
+  padding-inline: var(--padding-xxxs);
+}
+
+/* ============================================
+   CODE BLOCKS
+   The plain fallback — CodeBlock is the richer
+   choice for standalone code
+   ============================================ */
+
+.ds-prose pre {
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  padding: var(--padding-md);
+  overflow-x: auto;
+}
+
+.ds-prose pre code {
+  background-color: transparent;
+  border-radius: 0;
+  padding-inline: 0;
+  font-size: inherit;
+}
+
+/* ============================================
+   BLOCKQUOTES
+   Mirrors Reasoning's trace rail
+   ============================================ */
+
+.ds-prose blockquote {
+  border-inline-start: var(--border-md) solid var(--color-divider);
+  padding-inline-start: var(--padding-md);
+  color: var(--color-text-secondary);
+}
+
+.ds-prose blockquote p {
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   TABLES
+   ============================================ */
+
+.ds-prose table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.ds-prose th {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  background-color: var(--color-bg-container-secondary);
+  text-align: start;
+}
+
+.ds-prose th,
+.ds-prose td {
+  padding: var(--padding-xs) var(--padding-sm-md);
+  border-block-end: var(--border-xs) solid var(--color-divider);
+}
+
+/* ============================================
+   RULES AND MEDIA
+   ============================================ */
+
+.ds-prose hr {
+  border: none;
+  border-block-start: var(--border-xs) solid var(--color-divider);
+}
+
+.ds-prose img {
+  max-width: 100%;
+  border-radius: var(--radius-md);
+}
+
+/* ============================================
+   SMALL SIZE
+   Dense chat contexts — body scale drops to the
+   small paragraph tokens; headings keep their tiers
+   ============================================ */
+
+.ds-prose--sm,
+.ds-prose--sm p,
+.ds-prose--sm li {
+  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-prose--sm strong {
+  font-weight: var(--font-paragraph-sm-em-weight);
+}
+
+.ds-prose--sm code {
+  font-size: var(--font-paragraph-sm-size);
+}

package/components/Prose/Prose.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+/** Props owned by Prose itself — everything else falls through to the root element. */
+type ProseOwnProps = {
+    /** Body scale. `sm` maps paragraphs, lists and code to the small paragraph tokens for dense chat contexts. */
+    size?: 'default' | 'sm';
+    /** Additional CSS classes */
+    className?: string;
+    /** The rendered markup to style — the output of whatever markdown renderer the consumer uses. */
+    children?: React.ReactNode;
+};
+export interface ProseProps extends ProseOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ProseOwnProps> {
+}
+/**
+ * Prose is the typography kit for rendered markdown and rich agent output.
+ * The package ships no markdown renderer: consumers render markdown with
+ * whatever library they already use and wrap the result in Prose, which
+ * styles the descendant elements — headings, paragraphs, lists, links,
+ * code, quotes, tables — with the token scale.
+ */
+export declare const Prose: React.ForwardRefExoticComponent<ProseProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Prose/Prose.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Prose.css";
+const Prose = React.forwardRef(
+  ({ size = "default", className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-prose";
+    const classes = [baseClass, size === "sm" ? `${baseClass}--sm` : "", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children });
+  }
+);
+Prose.displayName = "Prose";
+export {
+  Prose
+};

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" })
           ]
         }