@robr0/design-system 0.10.0 → 0.11.0

package/components/Chart/LineChart.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Line } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
@@ -31,7 +32,7 @@ const LineChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const seriesColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(LineChartTooltip, { ...props }),
@@ -68,13 +69,13 @@ const LineChart = ({
         }
       ),
       /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      series.map((s) => /* @__PURE__ */ jsx(
+      series.map((s, i) => /* @__PURE__ */ jsx(
         Line,
         {
           type: "monotone",
           dataKey: s.dataKey,
           name: s.label,
-          stroke: s.color || defaultColor,
+          stroke: s.color || seriesColors[i % seriesColors.length],
           strokeWidth: 2,
           strokeDasharray: s.strokeDasharray,
           dot: false,

package/components/Chart/PieChart.js

@@ -1,21 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
-function getDefaultColors() {
-  if (typeof window === "undefined") {
-    return ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
-  }
-  const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
-  return [
-    get("--color-action-primary-bg", "#0E6E8F"),
-    get("--color-core-accent-mint", "#06D6A0"),
-    get("--color-core-accent-gold", "#FFD166"),
-    get("--color-core-accent-coral", "#EF476F"),
-    get("--color-core-accent-violet", "#9E47EF"),
-    get("--color-core-accent-amber", "#EF8247")
-  ];
-}
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
@@ -48,7 +35,7 @@ const PieChart = ({
 }) => {
   const baseClass = "ds-chart";
   const classes = [baseClass, className].filter(Boolean).join(" ");
-  const defaultColors = getDefaultColors();
+  const defaultColors = getChartSeriesColors();
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

package/components/Chart/RadarChart.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Tooltip, Radar, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
@@ -31,7 +32,7 @@ const RadarChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const seriesColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(RadarTooltip, { ...props }),
@@ -66,13 +67,13 @@ const RadarChart = ({
         }
       ),
       /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      series.map((s) => /* @__PURE__ */ jsx(
+      series.map((s, i) => /* @__PURE__ */ jsx(
         Radar,
         {
           name: s.label,
           dataKey: s.dataKey,
-          stroke: s.color || defaultColor,
-          fill: s.color || defaultColor,
+          stroke: s.color || seriesColors[i % seriesColors.length],
+          fill: s.color || seriesColors[i % seriesColors.length],
           fillOpacity: s.fillOpacity ?? 0.3
         },
         s.dataKey

package/components/Chart/RadialChart.js

@@ -1,21 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, RadialBarChart, PolarAngleAxis, RadialBar, Tooltip, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
-function getDefaultColors() {
-  if (typeof window === "undefined") {
-    return ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
-  }
-  const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
-  return [
-    get("--color-action-primary-bg", "#0E6E8F"),
-    get("--color-core-accent-mint", "#06D6A0"),
-    get("--color-core-accent-gold", "#FFD166"),
-    get("--color-core-accent-coral", "#EF476F"),
-    get("--color-core-accent-violet", "#9E47EF"),
-    get("--color-core-accent-amber", "#EF8247")
-  ];
-}
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
@@ -49,7 +36,7 @@ const RadialChart = ({
 }) => {
   const baseClass = "ds-chart";
   const classes = [baseClass, className].filter(Boolean).join(" ");
-  const defaultColors = getDefaultColors();
+  const defaultColors = getChartSeriesColors();
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const bgColor = getCSSVar("--color-bg-container-primary", "#0E0E0E");
   const chartData = data.map((item, i) => ({

package/components/Chart/ScatterChart.js

@@ -1,19 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, ScatterChart as ScatterChart$1, CartesianGrid, XAxis, YAxis, ZAxis, Tooltip, Scatter, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
-const PALETTE = [
-  "#118AB2",
-  // teal-07
-  "#06D6A0",
-  // green-07
-  "#EF476F",
-  // red-07
-  "#FFD166",
-  // yellow-07
-  "#9E47EF"
-  // purple-07
-];
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
@@ -47,6 +36,7 @@ const ScatterChart = ({
 }) => {
   const baseClass = "ds-chart";
   const classes = [baseClass, className].filter(Boolean).join(" ");
+  const seriesColors = getChartSeriesColors();
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
   const renderTooltip = useCallback(
@@ -96,7 +86,7 @@ const ScatterChart = ({
         {
           name: ds.name,
           data: ds.data,
-          fill: ds.color || PALETTE[i % PALETTE.length]
+          fill: ds.color || seriesColors[i % seriesColors.length]
         },
         ds.name
       )),

package/components/Chart/StackedBarChart.js

@@ -1,25 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
 }
-function getDefaultColors() {
-  if (typeof window === "undefined") {
-    return ["#0E6E8F", "#06D6A0", "#FFD166", "#EF476F", "#9E47EF", "#EF8247"];
-  }
-  const get = (v, fb) => getComputedStyle(document.documentElement).getPropertyValue(v).trim() || fb;
-  return [
-    get("--color-action-primary-bg", "#0E6E8F"),
-    get("--color-core-accent-mint", "#06D6A0"),
-    get("--color-core-accent-gold", "#FFD166"),
-    get("--color-core-accent-coral", "#EF476F"),
-    get("--color-core-accent-violet", "#9E47EF"),
-    get("--color-core-accent-amber", "#EF8247")
-  ];
-}
 function StackedTooltip({ active, payload, label }) {
   if (!active || !payload?.length) return null;
   return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
@@ -47,7 +34,7 @@ const StackedBarChart = ({
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
   const cursorColor = getCSSVar("--color-bg-container-secondary", "#303030");
-  const defaultColors = getDefaultColors();
+  const defaultColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(StackedTooltip, { ...props }),

package/components/Chart/Treemap.js

@@ -1,23 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, Treemap as Treemap$1, Tooltip } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
-const PALETTE = [
-  "#118AB2",
-  // teal-07
-  "#06D6A0",
-  // green-07
-  "#EF476F",
-  // red-07
-  "#FFD166",
-  // yellow-07
-  "#9E47EF",
-  // purple-07
-  "#1E47B0",
-  // blue-07
-  "#EF8247"
-  // orange
-];
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
@@ -25,7 +10,8 @@ function getCSSVar(name, fallback) {
 function TreemapContent(props) {
   const { x, y, width, height, name, index, color } = props;
   if (width < 4 || height < 4) return null;
-  const fill = color || PALETTE[index % PALETTE.length];
+  const seriesColors = getChartSeriesColors();
+  const fill = color || seriesColors[index % seriesColors.length];
   const textColor = getCSSVar("--color-text-primary", "#050505");
   const showLabel = width > 50 && height > 28;
   return /* @__PURE__ */ jsxs("g", { children: [

package/components/Chart/palette.d.ts

@@ -0,0 +1 @@
+export declare function getChartSeriesColors(): string[];

package/components/Chart/palette.js

@@ -0,0 +1,19 @@
+const SERIES_FALLBACKS = [
+  "#0E6E8F",
+  "#06D6A0",
+  "#FFD166",
+  "#EF476F",
+  "#9E47EF",
+  "#EF8247",
+  "#1E47B0"
+];
+function getChartSeriesColors() {
+  if (typeof window === "undefined") return SERIES_FALLBACKS;
+  const style = getComputedStyle(document.documentElement);
+  return SERIES_FALLBACKS.map(
+    (fallback, i) => style.getPropertyValue(`--color-chart-series-${i + 1}`).trim() || fallback
+  );
+}
+export {
+  getChartSeriesColors
+};

package/components/ChatMarker/ChatMarker.css

@@ -50,3 +50,12 @@
 .ds-chat-marker__icon .material-symbols-rounded {
   --icon-size: var(--icon-size-sm);
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-chat-marker .material-symbols-rounded {
+  color: inherit;
+}

package/components/ChatMessage/ChatMessage.css

@@ -110,6 +110,22 @@
   color: var(--color-text-primary);
 }
 
+/* Card furniture inside a turn steps clear of the content around it — at
+   the body's default rhythm an adjacent text line sits close enough to read
+   as a caption rather than a neighbouring block. Margins, not gap, so a
+   card standing alone adds nothing. */
+.ds-chat-message__content > .ds-message-card:not(:first-child),
+.ds-chat-message__content > .ds-interrupt-card:not(:first-child),
+.ds-chat-message__content > .ds-tool-call:not(:first-child) {
+  margin-top: var(--gap-sm-md);
+}
+
+.ds-chat-message__content > .ds-message-card:not(:last-child),
+.ds-chat-message__content > .ds-interrupt-card:not(:last-child),
+.ds-chat-message__content > .ds-tool-call:not(:last-child) {
+  margin-bottom: var(--gap-sm-md);
+}
+
 /* Bubble — capped width so a short line never drags a surface across the
    whole row; the fallback is the sanctioned consumer-override hook */
 .ds-chat-message--bubble .ds-chat-message__content {

package/components/ChatThread/ChatThread.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useEffect, useState, useLayoutEffect } from "react";
+import { MOTION_SCROLL_SETTLE_MS } from "../../tokens/motion.js";
 import "./ChatThread.css";
 import "../../fonts/material-symbols.css";
-const SCROLLBAR_SETTLE_MS = 600;
 const JUMP_THRESHOLD_PX = 24;
 const ChatThread = React.forwardRef(
   ({
@@ -129,7 +129,7 @@ const ChatThread = React.forwardRef(
       window.clearTimeout(settleTimer.current);
       settleTimer.current = window.setTimeout(
         () => setScrolling(false),
-        SCROLLBAR_SETTLE_MS
+        MOTION_SCROLL_SETTLE_MS
       );
     };
     const jumpToBottom = () => {

package/components/Chip/Chip.css

@@ -220,3 +220,12 @@
   outline: 2px solid var(--color-action-primary-bg);
   outline-offset: 2px;
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-chip .material-symbols-rounded {
+  color: inherit;
+}

package/components/CodeBlock/CodeBlock.css

@@ -95,7 +95,7 @@
   font-weight: var(--font-paragraph-sm-em-weight);
   line-height: var(--font-paragraph-sm-line-height);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: var(--font-overline-letter-spacing);
   color: var(--color-text-tertiary);
   flex-shrink: 0;
 }
@@ -178,3 +178,12 @@
   color: var(--color-text-primary);
   white-space: pre;
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-code-block .material-symbols-rounded {
+  color: inherit;
+}

package/components/CodeBlock/CodeBlock.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useId } from "react";
+import { MOTION_FEEDBACK_RESET_MS } from "../../tokens/motion.js";
 import "./CodeBlock.css";
 import "../../fonts/material-symbols.css";
 const CodeBlock = ({
@@ -44,7 +45,7 @@ const CodeBlock = ({
       fallback();
     }
     setCopied(true);
-    window.setTimeout(() => setCopied(false), 2e3);
+    window.setTimeout(() => setCopied(false), MOTION_FEEDBACK_RESET_MS);
   };
   return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
     hasHeader && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [

package/components/ColorPicker/ColorPicker.js

@@ -170,6 +170,16 @@ const ColorPicker = React.forwardRef(
           e.preventDefault();
           commit({ h, s, v: clamp(v - step, 0, 100), a });
           break;
+        // The slider pattern requires Home/End; they act on the horizontal
+        // (saturation) axis, matching the arrow keys above.
+        case "Home":
+          e.preventDefault();
+          commit({ h, s: 0, v, a });
+          break;
+        case "End":
+          e.preventDefault();
+          commit({ h, s: 100, v, a });
+          break;
       }
     };
     const displayHex = formatHex(hsva, showAlpha);

package/components/Combobox/Combobox.css

@@ -373,3 +373,12 @@
     animation: none;
   }
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-combobox .material-symbols-rounded {
+  color: inherit;
+}

package/components/CommandPalette/CommandPalette.css

@@ -294,3 +294,12 @@
     transition: none;
   }
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-command-palette .material-symbols-rounded {
+  color: inherit;
+}

package/components/CommandPalette/CommandPalette.js

@@ -7,6 +7,7 @@ import "./CommandPalette.css";
 import "../../fonts/material-symbols.css";
 const emptySubscribe = () => () => {
 };
+const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const CommandPalette = ({
   open,
   onOpenChange,
@@ -25,6 +26,7 @@ const CommandPalette = ({
   const [rawActiveIndex, setActiveIndex] = useState(0);
   const [prevOpen, setPrevOpen] = useState(open);
   const inputRef = useRef(null);
+  const panelRef = useRef(null);
   const listRef = useRef(null);
   const previousFocusRef = useRef(null);
   const generatedId = useId();
@@ -87,6 +89,33 @@ const CommandPalette = ({
       document.body.style.overflow = "";
     };
   }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const handleTrapKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onOpenChange(false);
+        return;
+      }
+      if (e.key === "Tab") {
+        const panel = panelRef.current;
+        if (!panel) return;
+        const focusable = panel.querySelectorAll(FOCUSABLE);
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleTrapKeyDown);
+    return () => document.removeEventListener("keydown", handleTrapKeyDown);
+  }, [open, onOpenChange]);
   const runCommand = (command) => {
     if (command.disabled) return;
     command.onSelect?.();
@@ -119,10 +148,6 @@ const CommandPalette = ({
         e.preventDefault();
         if (flatCommands[activeIndex]) runCommand(flatCommands[activeIndex]);
         break;
-      case "Escape":
-        e.preventDefault();
-        onOpenChange(false);
-        break;
     }
   };
   useEffect(() => {
@@ -148,6 +173,7 @@ const CommandPalette = ({
       "div",
       {
         className: `${baseClass}__panel`,
+        ref: panelRef,
         role: "dialog",
         "aria-modal": "true",
         "aria-label": "Command palette",
@@ -186,7 +212,7 @@ const CommandPalette = ({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: `${baseClass}__list`, role: "listbox", id: listboxId, ref: listRef, children: [
             loading && /* @__PURE__ */ jsx("p", { className: `${baseClass}__status`, children: "Loading…" }),
-            !loading && filteredGroups.length === 0 && /* @__PURE__ */ jsx("p", { className: `${baseClass}__status`, children: emptyMessage }),
+            !loading && filteredGroups.length === 0 && /* @__PURE__ */ jsx("p", { className: `${baseClass}__status`, "aria-live": "polite", children: emptyMessage }),
             !loading && filteredGroups.map((group) => /* @__PURE__ */ jsxs(
               "div",
               {

package/components/Composer/Composer.css

@@ -3,7 +3,20 @@
    The chat input shell: attachments, auto-growing textarea, send/stop
    ============================================ */
 
+/* The focus treatment animates a registered custom property, exactly as
+   AiButton does: a conic gradient's angle cannot tween otherwise. Browsers
+   without @property render the ring at its initial angle, static — a
+   correct, quieter fallback. Registered under its own name so Composer
+   never depends on AiButton's stylesheet being loaded. */
+@property --ds-composer-glow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
 .ds-composer {
+  /* Anchors the focus ring and glow pseudo-elements */
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -36,6 +49,105 @@
   border-color: var(--color-input-border-selected);
 }
 
+/* ============================================
+   AI GLOW — opt-in via the `aiGlow` prop
+   While focused, the plain selected border stands down and the AI gradient
+   ring takes its place — the same "a model answers here" signal AiButton
+   carries, for composers whose messages are answered by a model.
+   ============================================ */
+
+.ds-composer--ai-glow:focus-within {
+  border-color: transparent;
+}
+
+/* The gradient ring: AiButton's treatment on the composer shell — a conic
+   gradient painted across the whole box, 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. Negative inset lays the pseudo over the shell's own border
+   box, so the ring replaces the border exactly. */
+.ds-composer--ai-glow::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--border-xs));
+  border-radius: inherit;
+  /* One step up from the shell's --border-xs border: the outer edge stays on
+     the border box and the extra pixel grows inward, so the thicker band
+     reads clearly on low-density screens without changing the geometry. */
+  padding: var(--border-md);
+  background: conic-gradient(
+    from var(--ds-composer-glow-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;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  /* ds-allow(motion): ambient signature rotation, matched to AiButton's —
+     deliberately far slower than the interaction-scale motion tokens */
+  animation: ds-composer-glow-turn 7s linear infinite paused;
+}
+
+/* The glow: the same gradient, blurred behind the opaque shell at low
+   opacity, so it reads as a halo around the border. A colour effect, not
+   an elevation shadow — depth stays token-owned. */
+.ds-composer--ai-glow::after {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--border-xs));
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--ds-composer-glow-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, matched to AiButton. */
+  --ds-composer-glow: 14px;
+  filter: blur(var(--ds-composer-glow));
+  opacity: 0;
+  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-composer-glow-turn 7s linear infinite paused;
+}
+
+.ds-composer--ai-glow:focus-within::before {
+  opacity: 1;
+  animation-play-state: running;
+}
+
+.ds-composer--ai-glow:focus-within::after {
+  opacity: 0.3;
+  animation-play-state: running;
+}
+
+@keyframes ds-composer-glow-turn {
+  to {
+    --ds-composer-glow-angle: 360deg;
+  }
+}
+
+/* Reduced motion: the ring and glow stay, the turning stops. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-composer--ai-glow::before,
+  .ds-composer--ai-glow::after {
+    animation: none;
+  }
+}
+
 /* ============================================
    ATTACHMENTS ROW
    ============================================ */
@@ -175,6 +287,12 @@
   border-color: var(--color-input-border-disabled);
 }
 
+.ds-composer--disabled:focus-within::before,
+.ds-composer--disabled:focus-within::after {
+  opacity: 0;
+  animation-play-state: paused;
+}
+
 .ds-composer--disabled .ds-composer__textarea {
   cursor: not-allowed;
   color: var(--color-input-text-disabled);

package/components/Composer/Composer.d.ts

@@ -28,6 +28,13 @@ type ComposerOwnProps = {
     onStop?: () => void;
     /** Growth cap in text rows before the textarea scrolls internally. */
     maxRows?: number;
+    /**
+     * While focused, the shell wears AiButton's slowly rotating gradient ring
+     * and glow in place of the plain selected border — the system's "a model
+     * answers here" signal, for composers whose messages are answered by one.
+     * Off by default.
+     */
+    aiGlow?: boolean;
     /**
      * Attachment row rendered above the textarea (DocumentChips). Fully
      * controlled by the caller — Composer never owns the list.