@robr0/design-system 0.6.0 → 0.8.0

package/LICENSE

@@ -1,6 +1,21 @@
-MIT License
+Copyright (c) 2026 Rob Ritacca. All rights reserved, except as granted below.
 
-Copyright (c) 2026 Rob Ritacca
+This repository holds two kinds of material under two different licenses.
+The SOFTWARE is free to use under the MIT License. The CONTENT is not
+licensed for reuse.
+
+If you installed this as an npm package, you received the Software only.
+The MIT License below is the license for everything in that package.
+
+
+================================================================================
+SOFTWARE — MIT License
+================================================================================
+
+Applies to the design system and the code that builds and documents it:
+component source and CSS, the design tokens, Storybook stories, the build,
+generator and validator scripts, configuration, and the website's application
+code (layouts, routing, hooks, and UI components).
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +34,39 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+
+================================================================================
+CONTENT — All rights reserved
+================================================================================
+
+Applies to the authored material published on robertritacca.com and stored in
+this repository, including:
+
+  - Written prose on any page: body copy, headings, descriptions, and
+    microcopy across the website and the root specification documents.
+  - Case studies and the client work they describe
+    (website/src/app/work/, website/src/data/case-studies.json).
+  - Essays and long-form writing
+    (website/src/app/writing/, website/src/data/essays.json).
+  - The project journal entries (website/src/data/site-updates.json).
+  - Photographs, illustrations, client logos, cover images, and other media.
+  - The name "Rob Ritacca", the RR logo and wordmark, and any likeness,
+    photograph, biography, or professional history of Rob Ritacca.
+
+No license is granted to this material. Without prior written permission you
+may not copy, reproduce, republish, mirror, redistribute, sell, or create
+derivative works from it, and you may not use it to train, fine-tune, or
+otherwise build a machine learning model. You may not present it as your own
+work, and you may not use the name, logo, likeness, or professional history of
+Rob Ritacca to imply authorship, endorsement, or affiliation.
+
+You are welcome to read the site, quote short passages with attribution and a
+link to the source, link to any page, and use automated tools to read and cite
+pages as a human reader would. Nothing here restricts rights you already have
+under applicable copyright law.
+
+Client logos and trademarks shown in case studies belong to their respective
+owners and appear as references to real work, not as a grant of any rights.
+
+Permission requests: rob.ritacca@gmail.com

package/README.md

@@ -5,7 +5,7 @@
 [![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, 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.
+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 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)**
 
@@ -18,7 +18,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 | 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 -->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)** |
+| **Design system** (`/src`) | <!-- component-count -->84<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, 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. |
 
 ---
@@ -28,9 +28,32 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 ### Components
 
 <!-- component-list:start -->
-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
+Accordion · Agent plan · 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 · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Input · Instructions · Interrupt card · Kbd · Link list · Message actions · Message card · Model picker · Navigation · Nav list · Notification centre · Pagination · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radio button · Reasoning · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Spinner · Stat · Swatch · Table · Tabs · Textarea · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip
 <!-- component-list:end -->
 
+### Ambient background
+
+The package ships more than components. **Shader field** is a WebGL2 canvas that sums soft Gaussian light sources into an ambient field of colour, and every source reads a semantic colour token at runtime. Override a primitive and the background re-themes with the rest of the system, in both themes, with nothing wired up:
+
+```tsx
+import { ShaderField, type ShaderFieldStatus } from '@robr0/design-system';
+
+const [status, setStatus] = useState<ShaderFieldStatus>('pending');
+
+<div style={{ position: 'fixed', inset: 0, zIndex: -1 }}>
+  {status === 'unavailable' && <YourCssFallback />}
+  <ShaderField params={{ streak: 0.4 }} onStatusChange={setStatus} />
+</div>
+```
+
+Eight parameters describe the look, and a composition is a table of token names with positions and drift periods, so a negative weight cuts a shadow through the field instead of adding light to it.
+
+It asks two things of you, both deliberate. It fills a positioned ancestor you provide, because where a background sits is a layout decision rather than a rendering one. And it never decides what to paint instead of itself: it reports `pending`, `active` or `unavailable`, and one fallback covers every way it can fail (no WebGL2, a blocked or lost GPU context, a renderer that stalls before its first frame, or `enabled={false}` as a kill switch). `pending` is the state worth handling. Paint neither layer while the context comes up, or the swap a frame later reads as two backgrounds loading in sequence.
+
+It is also the one place a `prefers-reduced-motion` check lives in JavaScript rather than in the motion tokens, because the CSS guard cannot see a `requestAnimationFrame` loop. Set the preference and it draws a single static frame.
+
+The background behind this site is that component, with eight blurred CSS discs kept painted underneath as its fallback. The **[component page](https://robertritacca.com/components/shader-field)** is a live demo, and the **[setup guide](https://robertritacca.com/docs/get-started)** has the wiring.
+
 ### 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)** expands on everything in this section:
@@ -116,14 +139,14 @@ Answers are measured, not assumed. `evals/chat` holds a golden set that runs thr
 - **Vite 7**: dev server and library build
 - **Next.js 16**: portfolio site and design system documentation
 - **Storybook 10**: component explorer
-- **Vitest + Playwright**: every Storybook story runs as a render test in headless Chromium
+- **Vitest + Playwright + axe**: every Storybook story runs as a render test in headless Chromium, with an accessibility audit on each
 - **CSS custom properties**: all theming via semantic tokens, no CSS-in-JS
 
 ---
 
 ## Quality & CI
 
-Every push and pull request runs a GitHub Actions pipeline ([`ci.yml`](.github/workflows/ci.yml)) with four jobs: lint + library build, story tests (every Storybook story rendered in headless Chromium via Vitest), Storybook build, and website lint + build. The same checklist runs locally with one command:
+Every push and pull request runs a GitHub Actions pipeline ([`ci.yml`](.github/workflows/ci.yml)) with four jobs: lint + library build, story tests, Storybook build, and website lint + build. The story tests render every Storybook story in headless Chromium via Vitest and run an axe accessibility audit on each, so a violation fails the build exactly like a render error. The same checklist runs locally with one command:
 
 ```bash
 npm run verify   # lint + library type-check + package build + story tests + Storybook build + website lint + build
@@ -143,3 +166,11 @@ npm run storybook        # http://localhost:6006
 npm install
 npm run dev --workspace website   # http://localhost:3000
 ```
+
+---
+
+## License
+
+Two licenses, one repository. The **software** (components, tokens, scripts, and the website's application code) is MIT, so use it in anything. The **content** (page prose, case studies, essays, images, and the name and likeness of Rob Ritacca) is all rights reserved and not licensed for reuse. See [`LICENSE`](LICENSE) for the full terms.
+
+The npm package contains the software only.

package/components/AgentPlan/AgentPlan.css

@@ -0,0 +1,231 @@
+/* ============================================
+   AGENT PLAN COMPONENT
+   A collapsible checklist of an agent's task:
+   a progress header and one row per step.
+
+   The container stays neutral, like ToolCall —
+   colour lives in each step's indicator, so a
+   long plan reads as a list rather than a wall
+   of tinted rows. A thin connector ties the
+   indicators into one path through the task.
+   ============================================ */
+
+.ds-agent-plan {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-agent-plan__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-agent-plan__header:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-agent-plan__header:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-agent-plan__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  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);
+}
+
+.ds-agent-plan__count {
+  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-agent-plan__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-agent-plan--open .ds-agent-plan__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   PANEL
+   Same grid-rows collapse as ToolCall, so the
+   list opens and closes without measuring.
+   ============================================ */
+
+.ds-agent-plan__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-agent-plan--open .ds-agent-plan__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-agent-plan__content {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.ds-agent-plan--open .ds-agent-plan__content {
+  border-top: var(--border-xs) solid var(--color-divider);
+}
+
+/* ============================================
+   STEPS
+   ============================================ */
+
+.ds-agent-plan__steps {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: var(--padding-sm) var(--padding-sm-md);
+  list-style: none;
+}
+
+.ds-agent-plan__step {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-sm);
+  padding: var(--padding-xxs) 0;
+}
+
+/* Connector — a thin line linking each indicator to the next */
+.ds-agent-plan__step:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  top: calc(var(--padding-xxs) + var(--icon-size-sm));
+  bottom: calc(-1 * var(--padding-xxs));
+  left: calc(var(--icon-size-sm) / 2);
+  width: var(--border-xs);
+  background-color: var(--color-divider);
+}
+
+.ds-agent-plan__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--color-icon-secondary);
+}
+
+.ds-agent-plan__indicator .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+.ds-agent-plan__step-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  /* Align the first text line with the indicator's optical centre */
+  padding-top: calc((var(--icon-size-sm) - var(--font-paragraph-sm-line-height)) / 2);
+}
+
+.ds-agent-plan__label {
+  color: var(--color-text-primary);
+  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-agent-plan__detail {
+  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);
+}
+
+/* ============================================
+   STEP STATES
+   ============================================ */
+
+.ds-agent-plan__step--completed .ds-agent-plan__indicator {
+  color: var(--color-status-positive-text);
+}
+
+.ds-agent-plan__step--completed .ds-agent-plan__label {
+  color: var(--color-text-tertiary);
+}
+
+.ds-agent-plan__step--active .ds-agent-plan__indicator {
+  color: var(--color-status-info-text);
+}
+
+.ds-agent-plan__step--active .ds-agent-plan__label {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-agent-plan__step--failed .ds-agent-plan__indicator {
+  color: var(--color-status-error-text);
+}
+
+.ds-agent-plan__step--failed .ds-agent-plan__label {
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   SCREEN READER TEXT
+   Status is colour + glyph for sighted users;
+   this span announces it.
+   ============================================ */
+
+.ds-agent-plan__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/components/AgentPlan/AgentPlan.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export type AgentPlanStepStatus = 'pending' | 'active' | 'completed' | 'failed';
+export interface AgentPlanStep {
+    /** What this step does, in one line. */
+    label: string;
+    /** Where the step has got to. Defaults to `pending`. */
+    status?: AgentPlanStepStatus;
+    /** Optional supporting line under the label, e.g. the file it touched. */
+    detail?: string;
+}
+/** Props owned by AgentPlan itself — everything else falls through to the root element. */
+type AgentPlanOwnProps = {
+    /** The plan, in order. Step status drives each row's indicator and colour. */
+    steps: AgentPlanStep[];
+    /**
+     * Header text. Left unset, it is computed from the steps —
+     * "3 steps left", or "All steps complete" once everything is done.
+     */
+    title?: string;
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. */
+    defaultOpen?: boolean;
+    /** Fires whenever the step list opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AgentPlanProps extends AgentPlanOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AgentPlanOwnProps> {
+}
+/**
+ * AgentPlan shows the steps an agent intends to take and where it has got to:
+ * a collapsible checklist with one row per step, a live progress readout in
+ * the header, and completed work ticked off as the run advances.
+ *
+ * It complements the other agent primitives — AgentStatus says what is
+ * happening right now, ToolCall records one action, AgentPlan holds the
+ * whole task.
+ */
+export declare const AgentPlan: React.ForwardRefExoticComponent<AgentPlanProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/AgentPlan/AgentPlan.js

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useCallback } from "react";
+import { Spinner } from "../Spinner/Spinner.js";
+import "./AgentPlan.css";
+import "../../fonts/material-symbols.css";
+const STEP_ICONS = {
+  pending: "circle",
+  completed: "check_circle",
+  failed: "error"
+};
+const STEP_STATUS_TEXT = {
+  pending: "Not started",
+  active: "In progress",
+  completed: "Completed",
+  failed: "Failed"
+};
+const AgentPlan = React.forwardRef(
+  ({
+    steps,
+    title,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-agent-plan";
+    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 toggle = useCallback(() => {
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const total = steps.length;
+    const completed = steps.filter((step) => step.status === "completed").length;
+    const remaining = total - completed;
+    const resolvedTitle = title ?? (total > 0 && remaining === 0 ? "All steps complete" : `${remaining} step${remaining === 1 ? "" : "s"} left`);
+    const classes = [baseClass, isOpen ? `${baseClass}--open` : "", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__header`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: resolvedTitle }),
+            total > 0 && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__count`, children: [
+              completed,
+              "/",
+              total
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__panel`,
+          id: panelId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__steps`, children: steps.map((step, index) => {
+            const status = step.status ?? "pending";
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: `${baseClass}__step ${baseClass}__step--${status}`,
+                "aria-current": status === "active" ? "step" : void 0,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true", children: status === "active" ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "inherit" }) : /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: STEP_ICONS[status] }) }),
+                  /* @__PURE__ */ jsxs("span", { className: `${baseClass}__step-body`, children: [
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: step.label }),
+                    step.detail && /* @__PURE__ */ jsx("span", { className: `${baseClass}__detail`, children: step.detail })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: STEP_STATUS_TEXT[status] })
+                ]
+              },
+              index
+            );
+          }) }) })
+        }
+      )
+    ] });
+  }
+);
+AgentPlan.displayName = "AgentPlan";
+export {
+  AgentPlan
+};

package/components/AgentStatus/AgentStatus.css

@@ -22,8 +22,8 @@
 .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-shimmer-base: var(--color-text-tertiary);
+  --ds-agent-shimmer-sweep: var(--color-text-primary);
   --ds-agent-dot-dim: 0.2;
   --ds-agent-dot-rest: 0.82;
   --ds-agent-cycle: var(--motion-duration-loop-matrix);
@@ -33,11 +33,16 @@
   display: inline-flex;
   align-items: center;
   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);
+
+  /* The label is set in the title-body face, not the paragraph one: a status
+     is a heading for the work underneath it, not prose. The two sets share
+     16px/24px metrics, so the row's geometry is identical either way — only
+     the weight and tracking change. */
+  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);
 }
 
 /* ============================================
@@ -112,13 +117,19 @@
 /* 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. */
+   the text.
+
+   The base is the dimmer colour and the sweep the brighter one, so what
+   travels is a highlight rather than a shadow — the same "the sweep only
+   brightens it" reading `waiting` has always had. The band is narrow
+   (12% of a 250% image, so under a third of the text at a time): spread
+   wide it washes the whole label at once and stops reading as movement. */
 .ds-agent-status__label--shimmer {
   background-image: linear-gradient(
     100deg,
-    var(--ds-agent-shimmer-base) 35%,
+    var(--ds-agent-shimmer-base) 44%,
     var(--ds-agent-shimmer-sweep) 50%,
-    var(--ds-agent-shimmer-base) 65%
+    var(--ds-agent-shimmer-base) 56%
   );
   background-size: 250% 100%;
   background-clip: text;
@@ -189,9 +200,13 @@
   --ds-agent-matrix-size: var(--icon-size-sm);
 
   gap: var(--gap-sm);
+
+  /* The small metrics, carrying the same title weight down a size: the scale
+     has no 14px title face, and dropping to the paragraph weight here would
+     make one size of the component read as a heading and the other as prose. */
   font-family: var(--font-paragraph-sm-family);
   font-size: var(--font-paragraph-sm-size);
-  font-weight: var(--font-paragraph-sm-weight);
+  font-weight: var(--font-title-body-weight);
   line-height: var(--font-paragraph-sm-line-height);
   letter-spacing: var(--font-paragraph-sm-letter-spacing);
 }

package/components/Card/Card.css

@@ -106,6 +106,15 @@
   background: var(--color-bg-container-secondary);
 }
 
+/* A drawn cover (the `cover` prop) fills the same slot the image would, so a
+   grid of cards keeps one cover shape whichever kind it was given. */
+.ds-card--case-study__cover-slot,
+.ds-card--case-study__cover-slot > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .ds-card--case-study__cover-image {
   width: 100%;
   height: 100%;

package/components/Card/Card.d.ts

@@ -18,6 +18,12 @@ type CardOwnProps = {
     href?: string;
     /** Cover image src */
     coverSrc?: string;
+    /**
+     * Cover content rendered in place of the image — for a cover that is drawn
+     * rather than photographed (an SVG, a chart, a live preview). Takes
+     * precedence over `coverSrc`, and fills the same fixed-ratio slot.
+     */
+    cover?: React.ReactNode;
     /** Cover image alt text */
     coverAlt?: string;
     /** Path to the company logo shown in the eyebrow */

package/components/Card/Card.js

@@ -13,6 +13,7 @@ const Card = React.forwardRef(
     className = "",
     href,
     coverSrc,
+    cover,
     coverAlt,
     companyLogo,
     companyName,
@@ -22,7 +23,7 @@ const Card = React.forwardRef(
   }, ref) => {
     if (variant === "case-study") {
       const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "ds-card--case-study__cover-wrap", children: coverSrc ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "ds-card--case-study__cover-wrap", children: cover ? /* @__PURE__ */ jsx("div", { className: "ds-card--case-study__cover-slot", children: cover }) : coverSrc ? /* @__PURE__ */ jsx(
           "img",
           {
             src: coverSrc,

package/components/Composer/Composer.css

@@ -58,8 +58,26 @@
 
 .ds-composer__content {
   display: flex;
+  /* The textarea keeps its own natural height rather than stretching to the
+     zone's — the measurement below reads it, so a stretched textarea would
+     feed its own height back in and the zone could never shrink. */
+  align-items: flex-start;
+  box-sizing: border-box;
   width: 100%;
   padding: var(--padding-md) var(--padding-lg) var(--padding-sm);
+  /* Growing and shrinking is animated, which needs two pixel heights to run
+     between — `auto` has nothing to interpolate. So the zone states its own
+     height: the measured textarea (published as --ds-composer-text-height on
+     every resize) plus the block padding it owns. The fallback is a single
+     row, which is what the shell renders before the first measurement. */
+  height: calc(
+    var(--ds-composer-text-height, var(--font-paragraph-line-height)) + var(--padding-md) +
+      var(--padding-sm)
+  );
+  /* Mid-transition the textarea is already at its new height, so the extra
+     line is clipped on the way in and released on the way out. */
+  overflow: hidden;
+  transition: height var(--motion-duration-instant) var(--motion-ease-emphasized);
 }
 
 .ds-composer__textarea {