@robr0/design-system 0.5.0 → 0.7.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,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 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 -->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 -->79<!-- /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. |
 
 ---
 
@@ -27,12 +28,35 @@ 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 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 · 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>
+```
+
+Seven 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)** 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,39 +110,49 @@ 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
 - **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
 ```
 
-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.
 
 ---
 
@@ -132,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/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/ChatMessage/ChatMessage.css

@@ -253,6 +253,12 @@
   opacity: 1;
 }
 
+/* showActions pins the row on: the actions are part of the response, not a
+   secondary affordance to discover. */
+.ds-chat-message--show-actions .ds-chat-message__actions {
+  opacity: 1;
+}
+
 @media (hover: none) {
   .ds-chat-message__actions {
     opacity: 1;

package/components/ChatMessage/ChatMessage.d.ts

@@ -41,8 +41,14 @@ type ChatMessageOwnProps = {
     pending?: boolean;
     /** Accessible text announced for the pending state. */
     pendingLabel?: string;
-    /** Action row under the content, revealed on hover and keyboard focus (always visible on touch). */
+    /** Action row under the content, revealed on hover and keyboard focus (always visible on touch) — `showActions` pins it on. */
     actions?: React.ReactNode;
+    /**
+     * Always show the action row instead of revealing it on hover and focus.
+     * For surfaces where the actions are part of the response — a copy or
+     * feedback row — rather than a secondary affordance.
+     */
+    showActions?: boolean;
     /** Footer slot under the content — a sources row, an edited note. */
     footer?: React.ReactNode;
     /** Additional CSS classes */

package/components/ChatMessage/ChatMessage.js

@@ -15,6 +15,7 @@ const ChatMessage = React.forwardRef(
     pending = false,
     pendingLabel = "Waiting for a reply",
     actions,
+    showActions = false,
     footer,
     className = "",
     children,
@@ -31,6 +32,7 @@ const ChatMessage = React.forwardRef(
       grouped ? `${baseClass}--grouped` : "",
       size === "compact" ? `${baseClass}--compact` : "",
       pending ? `${baseClass}--pending` : "",
+      showActions ? `${baseClass}--show-actions` : "",
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [

package/components/Composer/Composer.css

@@ -13,12 +13,11 @@
   --ds-composer-send-size: 40px;
   background-color: var(--color-input-bg-primary);
   border: var(--border-xs) solid var(--color-input-border-primary);
-  /* Corner concentric with the send button it wraps: half the button,
-     plus the action bar's padding-sm ring, plus the border width
-     (border-radius applies to the border's outer edge). */
-  border-radius: calc(
-    var(--ds-composer-send-size) / 2 + var(--padding-sm) + var(--border-xs)
-  );
+  /* The token's default is concentric with the send button: half the
+     button, plus the action bar's padding-sm ring, plus the border width
+     (border-radius applies to the border's outer edge). A token rather
+     than the calc so radius re-theming reaches this corner too. */
+  border-radius: var(--radius-composer);
   box-shadow: var(--shadow-floating);
   transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
   /* The whole shell is the input affordance — clicking anywhere that is
@@ -59,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 {

package/components/Composer/Composer.d.ts

@@ -59,6 +59,9 @@ export interface ComposerProps extends ComposerOwnProps, Omit<React.ComponentPro
  * The textarea grows with its content up to `maxRows`, then scrolls
  * internally. Where the browser supports `field-sizing: content` the sizing
  * is fully native; elsewhere a measurement effect keeps the height in step.
+ * Either way the text zone glides between the two heights rather than
+ * snapping — 75ms, short enough to soften the step without reading as an
+ * animation. The action bar's buttons never move relative to the bar.
  *
  * Forwards a ref to the underlying `<textarea>` and spreads unrecognised
  * props onto it; `className` lands on the shell.

package/components/Composer/Composer.js

@@ -23,6 +23,7 @@ const Composer = React.forwardRef(
   }, ref) => {
     const baseClass = "ds-composer";
     const textareaRef = useRef(null);
+    const contentRef = useRef(null);
     const isControlled = value !== void 0;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
     const currentValue = isControlled ? value : uncontrolledValue;
@@ -40,6 +41,16 @@ const Composer = React.forwardRef(
       node.style.height = "auto";
       node.style.height = `${node.scrollHeight}px`;
     }, [currentValue]);
+    useLayoutEffect(() => {
+      const node = textareaRef.current;
+      const content = contentRef.current;
+      if (!node || !content) return;
+      const observer = new ResizeObserver(() => {
+        content.style.setProperty("--ds-composer-text-height", `${node.offsetHeight}px`);
+      });
+      observer.observe(node);
+      return () => observer.disconnect();
+    }, []);
     const submit = () => {
       if (streaming || !canSend) return;
       onSubmit?.(currentValue);
@@ -71,7 +82,7 @@ const Composer = React.forwardRef(
         onClick: handleShellClick,
         children: [
           attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
-          /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, ref: contentRef, children: /* @__PURE__ */ jsx(
             "textarea",
             {
               ...rest,

package/components/Prose/Prose.css

@@ -192,8 +192,17 @@
    TABLES
    ============================================ */
 
+/* The table is its own scroll container. Prose styles markup it does not
+   render, so it cannot wrap the table in a scrolling div — `display: block`
+   makes the table element itself the scroller. The cost is deliberate: the
+   table sizes to its content instead of filling the container, because the
+   inner anonymous table box a block table generates cannot be stretched.
+   A clipped or shattered table is the worse failure. */
 .ds-prose table {
-  width: 100%;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
   border-collapse: collapse;
 }
 
@@ -207,10 +216,18 @@
   text-align: start;
 }
 
+/* Cells never break words, whatever the surrounding context does. An
+   ancestor that sets `overflow-wrap: anywhere` (ChatMessage does, so a long
+   URL cannot widen a bubble) otherwise inherits in and collapses every
+   column's minimum width to one character, which lets auto table layout
+   squeeze a heading into "Co / m / pa / ny" rather than let the table reach
+   its natural width. Holding the floor is what gives the scroll above
+   something to scroll. */
 .ds-prose th,
 .ds-prose td {
   padding: var(--padding-xs) var(--padding-sm-md);
   border-block-end: var(--border-xs) solid var(--color-divider);
+  overflow-wrap: normal;
 }
 
 /* ============================================

package/components/Reasoning/Reasoning.css

@@ -128,12 +128,16 @@
   align-items: center;
 }
 
+/* The band travels dim → bright → dim, and stays narrow, matching
+   AgentStatus's sweep stop for stop: the two sit in the same conversation,
+   so a shimmer that read differently here would look like a second effect
+   rather than the same one. */
 .ds-reasoning--streaming .ds-reasoning__summary:not(.ds-reasoning__summary--node) {
   background-image: linear-gradient(
     100deg,
-    var(--color-text-primary) 35%,
-    var(--color-text-tertiary) 50%,
-    var(--color-text-primary) 65%
+    var(--color-text-tertiary) 44%,
+    var(--color-text-primary) 50%,
+    var(--color-text-tertiary) 56%
   );
   background-size: 250% 100%;
   background-clip: text;
@@ -183,7 +187,18 @@
      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);
+  /* The rail dissolves at its foot — the Timeline's end-of-line treatment.
+     A border can't carry a gradient, so the border only reserves the
+     geometry (transparent, same width) and the stripe is painted under it:
+     a border-box background sized to the border's own column. */
+  border-left: var(--border-md) solid transparent;
+  background:
+    linear-gradient(
+        to bottom,
+        var(--color-divider) calc(100% - var(--gap-lg) * 2),
+        var(--color-bg-container-primary-transparent)
+      )
+      left top / var(--border-md) 100% no-repeat border-box;
   color: var(--color-text-secondary);
   font-family: var(--font-paragraph-family);
   font-size: var(--font-paragraph-size);

package/components/ShaderField/ShaderField.css

@@ -0,0 +1,24 @@
+/* ShaderField — the canvas only.
+   Placement, clipping and any fade-to-page mask belong to the positioned
+   ancestor the caller provides: where the field sits is a layout decision,
+   and baking one in would make the component unusable anywhere else. */
+
+.ds-shader-field {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  /* Scenery, never a target — a full-bleed canvas that swallowed clicks would
+     make whatever it covers unreachable. */
+  pointer-events: none;
+  /* Reveals only once a context is live and the first frame is drawn, so a
+     machine that cannot run the shader never shows an empty canvas — it stays
+     on the caller's fallback instead. */
+  opacity: 0;
+  transition: opacity var(--motion-duration-slower) var(--motion-ease-entrance);
+}
+
+.ds-shader-field[data-status='active'] {
+  opacity: 1;
+}

package/components/ShaderField/ShaderField.d.ts

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+import { ShaderBlob, ShaderParams } from './useShaderField';
+export type { ShaderBlob, ShaderParams, ShaderFieldParams, ShaderFieldState, } from './useShaderField';
+export { useShaderField, DEFAULT_SHADER_BLOBS, DEFAULT_SHADER_PARAMS } from './useShaderField';
+export { BLOB_COUNT } from './field.glsl';
+/**
+ * How the renderer has resolved.
+ *
+ * `pending` is the one that matters to a caller: the context is still coming
+ * up, so neither the field nor a fallback should be painted yet — showing a
+ * fallback here and swapping it a frame later reads as two backgrounds loading
+ * in sequence.
+ */
+export type ShaderFieldStatus = 'pending' | 'active' | 'unavailable';
+/** Props owned by ShaderField itself — everything else falls through to the canvas. */
+type ShaderFieldOwnProps = {
+    /**
+     * Field parameters, merged over the shipped defaults, so passing one
+     * property changes one thing. Changing them never rebuilds the GL state.
+     */
+    params?: Partial<ShaderParams>;
+    /**
+     * The light sources. Defaults to an eight-source composition on the core
+     * accent tokens. Fewer than `BLOB_COUNT` entries is fine — unused slots park
+     * off-field; more are ignored, because the shader's uniform arrays are
+     * fixed-size.
+     */
+    blobs?: readonly ShaderBlob[];
+    /**
+     * False keeps WebGL entirely unmounted and reports `unavailable`, so the
+     * caller's fallback is the whole background. This is the kill switch: a
+     * config lever, or an A/B against the fallback.
+     */
+    enabled?: boolean;
+    /**
+     * Called whenever the renderer's status changes. Drive the fallback layer's
+     * visibility from this — the component deliberately does not own one, since
+     * what to paint instead is a design decision, not a rendering one.
+     */
+    onStatusChange?: (status: ShaderFieldStatus) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ShaderFieldProps extends ShaderFieldOwnProps, Omit<React.ComponentPropsWithoutRef<'canvas'>, keyof ShaderFieldOwnProps> {
+}
+/**
+ * ShaderField paints an ambient WebGL2 field of soft Gaussian light sources,
+ * each sampling a semantic colour token at runtime — so the whole thing
+ * re-themes with `data-theme`, and with any scoped custom-property override,
+ * without the caller wiring anything up.
+ *
+ * It is scenery, not interface: nothing about it is a signal, so its motion
+ * cannot be mistaken for feedback. Two consequences follow, and both are
+ * handled here rather than left to the caller.
+ *
+ * It honours reduced motion in JavaScript. The system's motion tokens collapse
+ * under `prefers-reduced-motion`, but that guard is CSS-only and cannot see a
+ * `requestAnimationFrame` loop; a GPU-driven surface has to check the query
+ * itself. This one renders a single static frame and never starts its loop.
+ *
+ * And it always reports how it resolved. No WebGL2, a blocked or lost GPU
+ * context, a renderer that stalls before its first frame, or `enabled={false}`
+ * all arrive at `unavailable` through `onStatusChange`, so the caller can keep
+ * a plain CSS fallback painted underneath. The canvas fills its positioned
+ * ancestor and is inert to pointer events; give that ancestor the placement,
+ * the clipping and any mask.
+ */
+export declare const ShaderField: React.ForwardRefExoticComponent<ShaderFieldProps & React.RefAttributes<HTMLCanvasElement>>;