@robr0/design-system 0.4.0 → 0.6.0

package/README.md

@@ -5,20 +5,21 @@
 [![npm](https://img.shields.io/npm/v/@robr0%2Fdesign-system?logo=npm&color=CB3837)](https://www.npmjs.com/package/@robr0/design-system)
 <!-- npm-badge:end -->
 
-A personal portfolio site built on an AI-ready React design system, designed and engineered from scratch. Claude Code builds the components from the written specs in this repo (`CLAUDE.md` for the rules, `design.md` for the design language, `content-design.md` for how every word reads), and generated registries keep this README and the docs site from drifting. The design system is the backbone every portfolio page is built on, so the work is presented consistently and to the same craft standards throughout.
+A personal portfolio site, the AI-ready React design system behind it, and the AI layer that lets the site answer questions about itself. Claude Code builds all of it from the written specs in this repo (`CLAUDE.md` for the rules, `design.md` for the design language, `content-design.md` for how every word reads, and `porting-guide.md` for rebuilding the site chat inside another design system), and generated registries keep this README and the docs site from drifting. The design system is the backbone every portfolio page is built on, so the work is presented consistently and to the same craft standards throughout.
 
 **[→ Live site](https://robertritacca.com/)** · **[→ Storybook](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)**
 
-The **live site** is the portfolio built on the design system. **Storybook** is the interactive component explorer for the design system itself. They are two separate parts of this repo.
+The **live site** is the portfolio built on the design system. **Storybook** is the interactive component explorer for the design system itself. They deploy separately: two Vercel projects from one repo.
 
 ---
 
-## Two things, one repo
+## Three parts, one repo
 
 | Part | Description |
 |---|---|
 | **Portfolio website** (`/website`) | Next.js app with case studies, work history, writing, and about pages, all built exclusively with the design system components below. **[Live site →](https://robertritacca.com/)** |
-| **Design system** (`/src`) | <!-- component-count -->64<!-- /component-count --> React components, a three-tier token architecture, dark mode, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
+| **Design system** (`/src`) | <!-- component-count -->78<!-- /component-count --> React components, a three-tier token architecture, dark mode, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
+| **AI layer** (`ai` components in `/src`, chat in `/website`, `/evals`) | A site-wide chat that answers questions about the work: built from the library's own `ai` components, grounded in a corpus generated from the site's published content, and scored by a golden-set eval. |
 
 ---
 
@@ -27,12 +28,12 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 ### Components
 
 <!-- component-list:start -->
-Accordion · Agent status · Alert · Alert dialog · App layout · App sidebar · Avatar · Badge · Breadcrumb · Button · Button group · Card · Carousel · Chart · Checkbox · Chip · Circular button · Code block · Colour picker · Combobox · Command palette · Contact card · Context menu · Contribution graph · Date input · Date picker · Dialog · Divider · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Field · Figure · File input · Input · Instructions · Kbd · Link list · Navigation · Pagination · Popover · Progress bar · Quote · Radio button · Reasoning · Section title · Segmented control · Selection card · Skeleton · Slider · Spinner · Stat · Swatch · Table · Tabs · Textarea · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip
+Accordion · Agent status · AI button · Alert · Alert dialog · App layout · App sidebar · Avatar · Badge · Breadcrumb · Button · Button group · Card · Carousel · Chart · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Colour picker · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Field · Figure · File input · Input · Instructions · Interrupt card · Kbd · Link list · Message actions · Message card · Navigation · Nav list · Pagination · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radio button · Reasoning · Section title · Segmented control · Selection card · Skeleton · Slider · Source chip · Spinner · Stat · Swatch · Table · Tabs · Textarea · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip
 <!-- component-list:end -->
 
 ### Using the package
 
-The design system is published as [`@robr0/design-system`](https://www.npmjs.com/package/@robr0/design-system) (React 19+ is a peer dependency). The **[full setup guide](https://robertritacca.com/docs/get-started)** covers install, dark mode, fonts, and re-theming:
+The design system is published as [`@robr0/design-system`](https://www.npmjs.com/package/@robr0/design-system) (React 19+ is a peer dependency). The **[full setup guide](https://robertritacca.com/docs/get-started)** expands on everything in this section:
 
 ```bash
 npm install @robr0/design-system
@@ -86,19 +87,29 @@ Dark mode is driven by `data-theme="dark"` on the root element, with no `prefers
 
 ### Design principles
 
-Stated as token roles on purpose — what each role resolves to is the theme, and yours to override:
+Stated as token roles on purpose. What each role resolves to is the theme, and yours to override:
 
-- **Style with semantic tokens, never raw values** — that is what makes one primitive override cascade through everything
+- **Style with semantic tokens, never raw values**: that is what makes one primitive override cascade through everything
 - **One typeface**, hierarchy carried by weight contrast
 - **The primary-action token means "click here"**: CTAs and focus only, never decoration
 - **Shape is a per-element-type token**, not a per-instance choice
 - **Five status roles** (info, positive, warning, error, neutral) shared by every status-bearing component
-- **Depth is token-owned**: the container ramp plus the system's elevation tokens — components don't bring their own shadows
+- **Depth is token-owned**: the container ramp plus the system's elevation tokens, and components don't bring their own shadows
 
 The defaults behind each role, and every component spec, live in [`design.md`](design.md).
 
 ---
 
+## AI layer
+
+The library's `ai` category is the interface half: chat primitives (Chat thread, Chat message, Composer) and agent-state components (Tool call, Reasoning, Agent status). Those components ship in the npm package; the rest of the chat does not. The conversation state hook, the streaming transport, the backend route, and the corpus are this site's own code under `website/`, and a consumer builds their own equivalents, with their LLM API key held server-side, never in the client. The site's own chat, robr0 GPT, is built from the shipped primitives, so it doubles as a live demo of the components it is made of.
+
+The answering half is a Claude-backed route (`website/src/app/api/chat/route.ts`) with a persona and guardrails. There is no retrieval step: `scripts/generate-site-corpus.mjs` compiles every published page's prose, the data registries, and the root specs into one corpus at build time, and the model reads it whole. The corpus is public-only, and a validator enforces that boundary. Nothing reaches the model that is not already on the site, so a prompt injection has nothing private to leak. The route also deploys ahead of its keys, so an unconfigured deploy answers with a polite notice rather than throwing.
+
+Answers are measured, not assumed. `evals/chat` holds a golden set that runs through the real route (persona, corpus, guardrails, all of it) with `npm run eval:chat`; it costs real API calls, so it runs on demand and never in CI. A second validator fails the build when a golden-set fact is missing from the corpus, which keeps the eval and the site describing the same system.
+
+---
+
 ## Tech
 
 - **React 19 + TypeScript**: component library
@@ -118,7 +129,7 @@ Every push and pull request runs a GitHub Actions pipeline ([`ci.yml`](.github/w
 npm run verify   # lint + library type-check + package build + story tests + Storybook build + website lint + build
 ```
 
-CI also guards against documentation drift: generated surfaces (this README's component count and list, the website's skills pages, the published CLAUDE.md, design.md, and content-design.md blueprints) are rebuilt from their source registries on every build, and CI fails if the committed copies are stale. The numbers on the site are never hand-written.
+CI also guards against documentation drift: generated surfaces (this README's component count and list, the website's skills pages, the published blueprint copies of the root markdown specs) are rebuilt from their source registries on every build, and CI fails if the committed copies are stale. The numbers on the site are never hand-written.
 
 ---
 

package/components/AgentStatus/AgentStatus.css

@@ -22,20 +22,22 @@
 .ds-agent-status {
   --ds-agent-color: var(--color-text-secondary);
   --ds-agent-label-color: var(--color-text-secondary);
+  --ds-agent-shimmer-base: var(--color-text-primary);
+  --ds-agent-shimmer-sweep: var(--color-text-tertiary);
   --ds-agent-dot-dim: 0.2;
   --ds-agent-dot-rest: 0.82;
   --ds-agent-cycle: var(--motion-duration-loop-matrix);
   --ds-agent-slot: calc(var(--ds-agent-cycle) / 12);
-  --ds-agent-matrix-size: var(--icon-size-sm);
+  --ds-agent-matrix-size: var(--icon-size-md);
 
   display: inline-flex;
   align-items: center;
-  gap: var(--gap-sm);
-  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);
+  gap: var(--gap-sm-md);
+  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);
 }
 
 /* ============================================
@@ -63,20 +65,60 @@
    ============================================ */
 
 .ds-agent-status__label {
+  position: relative;
   color: var(--ds-agent-label-color);
   min-width: 0;
 }
 
-/* A gradient between the secondary text colour the label already sits at and
-   the primary text colour, sweeping left to right: with an oversized
-   background image, background-position 100% shows its right edge, 0% its
-   left, so counting down walks the bright band across the text. */
+/* Label crossfade: when the label string changes, the outgoing copy sits
+   absolutely over the incoming one and fades up and out while the new one
+   fades up and in — one continuous upward motion. */
+.ds-agent-status__label-text {
+  display: inline-block;
+}
+
+/* The animations live only on the modifier classes, and the modifiers come
+   off once the swap settles: a filled animation can pin the span to its
+   own compositor layer, which would escape the shimmer's text clip and
+   leave the label invisible for good. */
+.ds-agent-status__label-text--in {
+  animation: ds-agent-label-in var(--motion-duration-slow) var(--motion-ease-entrance) both;
+  animation-delay: calc(var(--motion-duration-slow) / 2);
+}
+
+.ds-agent-status__label-text--out {
+  position: absolute;
+  left: 0;
+  top: 0;
+  white-space: nowrap;
+  animation: ds-agent-label-out var(--motion-duration-slow) var(--motion-ease-standard) both;
+  animation-delay: 0s;
+}
+
+@keyframes ds-agent-label-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@keyframes ds-agent-label-out {
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+/* A gradient between the shimmer base and sweep colours, moving left to
+   right: with an oversized background image, background-position 100% shows
+   its right edge, 0% its left, so counting down walks the sweep band across
+   the text. */
 .ds-agent-status__label--shimmer {
   background-image: linear-gradient(
     100deg,
-    var(--ds-agent-label-color) 35%,
-    var(--color-text-primary) 50%,
-    var(--ds-agent-label-color) 65%
+    var(--ds-agent-shimmer-base) 35%,
+    var(--ds-agent-shimmer-sweep) 50%,
+    var(--ds-agent-shimmer-base) 65%
   );
   background-size: 250% 100%;
   background-clip: text;
@@ -86,6 +128,16 @@
     var(--motion-ease-linear) infinite;
 }
 
+/* While a label crossfade runs, the shimmer's text clip stands down: an
+   animated descendant composites on its own layer, which escapes
+   background-clip: text and renders the text invisible. The swap motion
+   covers the pause; the sweep resumes on the settled text. */
+.ds-agent-status__label--shimmer.ds-agent-status__label--swapping {
+  background-image: none;
+  animation: none;
+  color: var(--ds-agent-label-color);
+}
+
 /* ============================================
    STATES
    The three working states are deliberately
@@ -102,6 +154,11 @@
 .ds-agent-status--waiting {
   --ds-agent-color: var(--color-status-warning-text);
   --ds-agent-label-color: var(--color-status-warning-text);
+
+  /* Waiting keeps its warning colour through the shimmer — colour is the
+     signal, so the sweep only brightens it rather than going monochrome. */
+  --ds-agent-shimmer-base: var(--color-status-warning-text);
+  --ds-agent-shimmer-sweep: var(--color-text-primary);
 }
 
 .ds-agent-status--done {
@@ -123,17 +180,20 @@
 
 /* ============================================
    SIZES
+   The scale pairs with ChatMessage: default
+   matches default message text, compact
+   matches compact message text.
    ============================================ */
 
-.ds-agent-status--md {
-  --ds-agent-matrix-size: var(--icon-size-md);
+.ds-agent-status--compact {
+  --ds-agent-matrix-size: var(--icon-size-sm);
 
-  gap: var(--gap-sm-md);
-  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);
+  gap: var(--gap-sm);
+  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);
 }
 
 /* ============================================

package/components/AgentStatus/AgentStatus.d.ts

@@ -13,8 +13,12 @@ type AgentStatusOwnProps = {
      * on for `thinking`, `working` and `waiting`, off for the resting states.
      */
     shimmer?: boolean;
-    /** Indicator and text scale. */
-    size?: 'sm' | 'md';
+    /**
+     * Indicator and text scale, paired with ChatMessage's sizes: `default`
+     * matches default message text, `compact` matches compact message text.
+     * `sm` and `md` are legacy aliases for `compact` and `default`.
+     */
+    size?: 'default' | 'compact' | 'sm' | 'md';
     /** `inline` sits in a line of content; `bar` is a full-width row for the top of a panel. */
     variant?: 'inline' | 'bar';
     /** Additional CSS classes */

package/components/AgentStatus/AgentStatus.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
 import "./AgentStatus.css";
 const DOT_COUNT = 12;
 const DEFAULT_LABELS = {
@@ -17,7 +17,7 @@ const AgentStatus = React.forwardRef(
     label,
     pattern = "orbit",
     shimmer,
-    size = "sm",
+    size = "default",
     variant = "inline",
     className = "",
     children,
@@ -26,11 +26,23 @@ const AgentStatus = React.forwardRef(
     const baseClass = "ds-agent-status";
     const isActive = ACTIVE_STATES.includes(state);
     const isShimmering = shimmer ?? isActive;
+    const resolvedSize = size === "sm" ? "compact" : size === "md" ? "default" : size;
+    const resolvedLabel = label ?? DEFAULT_LABELS[state];
+    const [outgoing, setOutgoing] = useState(null);
+    const lastLabel = useRef(resolvedLabel);
+    useEffect(() => {
+      if (children != null) return;
+      if (lastLabel.current !== resolvedLabel) {
+        setOutgoing(lastLabel.current);
+        lastLabel.current = resolvedLabel;
+      }
+    }, [resolvedLabel, children]);
+    const isSwapping = outgoing !== null;
     const classes = [
       baseClass,
       `${baseClass}--${state}`,
       `${baseClass}--${pattern}`,
-      `${baseClass}--${size}`,
+      `${baseClass}--${resolvedSize}`,
       `${baseClass}--${variant}`,
       isActive ? `${baseClass}--animated` : "",
       className
@@ -40,8 +52,28 @@ const AgentStatus = React.forwardRef(
       /* @__PURE__ */ jsx(
         "span",
         {
-          className: `${baseClass}__label${isShimmering ? ` ${baseClass}__label--shimmer` : ""}`,
-          children: children ?? label ?? DEFAULT_LABELS[state]
+          className: `${baseClass}__label${isShimmering ? ` ${baseClass}__label--shimmer` : ""}${isSwapping ? ` ${baseClass}__label--swapping` : ""}`,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            isSwapping && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__label-text ${baseClass}__label-text--out`,
+                "aria-hidden": "true",
+                children: outgoing
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__label-text${isSwapping ? ` ${baseClass}__label-text--in` : ""}`,
+                onAnimationEnd: (e) => {
+                  if (e.target === e.currentTarget) setOutgoing(null);
+                },
+                children: resolvedLabel
+              },
+              resolvedLabel
+            )
+          ] })
         }
       )
     ] });

package/components/AiButton/AiButton.css

@@ -0,0 +1,163 @@
+/* ============================================
+   AI BUTTON
+   The AI entry point: transparent field, slowly
+   rotating gradient ring, soft glow of the same
+   gradient. The ring is the system's "a model
+   answers here" signal — ordinary actions keep
+   the flat action teal.
+   ============================================ */
+
+/* The rotation animates a registered custom property: a conic gradient's
+   angle cannot tween otherwise. Browsers without @property render the ring
+   at its initial angle, static — a correct, quieter fallback. */
+@property --ds-ai-button-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+/* Base */
+.ds-ai-button {
+  /* Layout */
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-sm);
+
+  /* Spacing — matches Button so the two sit on one control scale */
+  padding: var(--padding-sm) var(--padding-lg);
+
+  /* Buttons are always pill-shaped (design.md invariant) */
+  border-radius: var(--radius-full);
+
+  /* Typography — the clickable-control face, same as Button */
+  font-family: var(--font-paragraph-em-family);
+  font-weight: var(--font-paragraph-em-weight);
+  font-size: var(--font-paragraph-em-size);
+  line-height: var(--font-paragraph-em-line-height);
+  letter-spacing: var(--font-paragraph-em-letter-spacing);
+  text-align: center;
+
+  /* The field is transparent by design: the ring and glow are the button */
+  background: transparent;
+  color: var(--color-text-primary);
+
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+
+  /* Reset */
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+}
+
+/* The gradient ring: a conic gradient painted across the whole button, then
+   masked to the border band (two fills, exclude-composited, inset by the
+   border width). The gradient repeats back to its start colour so the seam
+   at 360° is invisible while it turns. */
+.ds-ai-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--border-xs);
+  background: conic-gradient(
+    from var(--ds-ai-button-angle),
+    var(--color-ai-gradient-start),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-end),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-start)
+  );
+  /* Standard properties only — the build pipeline prefixes per its browser
+     targets, and hand-written -webkit- duplicates confuse its merging. */
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  /* ds-allow(motion): ambient signature rotation, tuned by eye — deliberately
+     far slower than the interaction-scale motion tokens */
+  animation: ds-ai-button-turn 7s linear infinite;
+}
+
+/* The glow: the same gradient, blurred behind the button at low opacity.
+   A colour effect, not an elevation shadow — depth stays token-owned. */
+.ds-ai-button::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--ds-ai-button-angle),
+    var(--color-ai-gradient-start),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-end),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-start)
+  );
+  /* The glow's spread; a length with no token family, chosen by eye. */
+  --ds-ai-button-glow: 14px;
+  filter: blur(var(--ds-ai-button-glow));
+  opacity: 0.3;
+  z-index: -1;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  /* ds-allow(motion): same ambient rotation as the ring, kept in phase */
+  animation: ds-ai-button-turn 7s linear infinite;
+}
+
+@keyframes ds-ai-button-turn {
+  to {
+    --ds-ai-button-angle: 360deg;
+  }
+}
+
+/* Icon rides the icon-size scale */
+.ds-ai-button__icon {
+  --icon-size: var(--icon-size-md);
+  line-height: 1;
+}
+
+/* States */
+.ds-ai-button:hover::after {
+  opacity: 0.55;
+}
+
+.ds-ai-button:focus-visible {
+  outline: var(--border-md) solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-ai-button--disabled,
+.ds-ai-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-ai-button--disabled::before,
+.ds-ai-button--disabled::after,
+.ds-ai-button:disabled::before,
+.ds-ai-button:disabled::after {
+  animation-play-state: paused;
+}
+
+/* Sizes */
+.ds-ai-button--compact {
+  padding: var(--padding-xs) var(--padding-sm-md);
+  font-size: var(--font-paragraph-sm-em-size);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-ai-button--compact .ds-ai-button__icon {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* Reduced motion: the ring and glow stay, the turning stops. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-ai-button::before,
+  .ds-ai-button::after {
+    animation: none;
+  }
+}

package/components/AiButton/AiButton.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by AiButton itself — everything else falls through to the DOM node. */
+type AiButtonOwnProps = {
+    /** Button text content */
+    label?: string;
+    /** Leading icon — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Button size */
+    size?: 'default' | 'compact';
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Optional href — renders as <a> instead of <button> */
+    href?: string;
+    /** Optional target attribute for links */
+    target?: string;
+    /** Optional rel attribute for links */
+    rel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AiButtonProps extends AiButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof AiButtonOwnProps | 'type'> {
+}
+/**
+ * The AI entry point. Icon and label on a transparent field, ringed by the
+ * AI gradient (`--color-ai-gradient-*`) rotating slowly, with a soft glow of
+ * the same gradient behind it. The treatment is the design system's signal
+ * for "a model answers here": ordinary actions keep the flat action teal,
+ * and this ring is reserved for AI surfaces so neither affordance dilutes
+ * the other.
+ *
+ * Renders a `<button>`, or an `<a>` when `href` is supplied. Forwards a ref
+ * to whichever element it renders, and spreads unrecognised props onto it.
+ * The rotation pauses under `prefers-reduced-motion`; the ring and glow stay.
+ */
+export declare const AiButton: React.ForwardRefExoticComponent<AiButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};

package/components/AiButton/AiButton.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./AiButton.css";
+import "../../fonts/material-symbols.css";
+const AiButton = React.forwardRef(
+  ({
+    label = "Ask AI",
+    icon = "auto_awesome",
+    size = "default",
+    disabled,
+    href,
+    target,
+    rel,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-ai-button";
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      disabled && `${baseClass}--disabled`,
+      className
+    ].filter(Boolean).join(" ");
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && (typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: icon })),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__text`, children: label })
+    ] });
+    if (href && !disabled) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ...rest,
+          ref,
+          className: classes,
+          href,
+          target,
+          rel,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        className: classes,
+        disabled,
+        children: content
+      }
+    );
+  }
+);
+AiButton.displayName = "AiButton";
+export {
+  AiButton
+};

package/components/ChatHeader/ChatHeader.css

@@ -0,0 +1,35 @@
+/* ============================================
+   CHAT HEADER COMPONENT
+   Top row of a chat surface: title on the
+   left, controls on the right. No divider —
+   it floats free of the transcript.
+   ============================================ */
+
+/* Base */
+.ds-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-md);
+  padding: var(--padding-xs) var(--padding-md);
+}
+
+/* Title */
+.ds-chat-header__title {
+  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);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Actions */
+.ds-chat-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  flex-shrink: 0;
+}

package/components/ChatHeader/ChatHeader.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+/** Props owned by ChatHeader itself — everything else falls through to the root element. */
+type ChatHeaderOwnProps = {
+    /**
+     * The chat or assistant name. Deliberately shadows the native `title`
+     * tooltip attribute — a header's title is content, not a tooltip. Pass a
+     * string for the default treatment, or your own heading element.
+     */
+    title?: React.ReactNode;
+    /**
+     * Trailing controls: a new-chat CircularButton, a view switcher, a close
+     * button. The slot only lays them out — each control owns its behaviour.
+     */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ChatHeaderProps extends ChatHeaderOwnProps, Omit<React.ComponentPropsWithoutRef<'header'>, keyof ChatHeaderOwnProps> {
+}
+/**
+ * ChatHeader is the top row of a chat surface: the conversation's name on the
+ * left, its controls on the right. It draws no bottom border — like the
+ * composer below, it floats free of the transcript, and the thread's own
+ * padding provides the separation.
+ *
+ * Purely presentational, so it renders from a Server Component; the controls
+ * passed into `actions` bring their own interactivity.
+ */
+export declare const ChatHeader: React.ForwardRefExoticComponent<ChatHeaderProps & React.RefAttributes<HTMLElement>>;
+export {};