@actioneer/ads 0.5.6 → 0.5.8

package/bin/ads-init.mjs

@@ -236,6 +236,9 @@ export function providersFile(language) {
 // Required ADS providers — wrap the app root once. Without TooltipProvider the
 // vendored tooltip/attachment chips crash; ToastProvider is needed to render
 // toasts; MotionConfig reducedMotion="user" honors the OS setting everywhere.
+// ADS components already ship their correct motion. Keep it intact. For any
+// consumer-authored state motion, import the matching named spring/variant from
+// "${PKG}"; never copy spring values or create a separate timing system.
 import { TooltipProvider, ToastProvider } from "${PKG}";
 import { MotionConfig } from "motion/react";
 
@@ -311,6 +314,9 @@ const ADS_LINT_CONFIG = `// @actioneer/ads-lint — consumer mode. Every file is
 // barrel / deep-import / external-UI rules apply everywhere. See the ADS
 // import contract: import the exact named export from "${PKG}"; never
 // deep-import, alias, or hand-roll a copy.
+// Motion is part of that component contract: preserve built-in ADS motion and
+// import named role presets from "${PKG}" for consumer-authored transitions.
+// Raw spring parameters and legacy motion-token systems are rejected.
 export default {
   imports: {
     libraryPackage: "${PKG}",

package/components/accordion.js

@@ -1,91 +1,93 @@
 "use client";
-import { jsx as n, jsxs as h } from "react/jsx-runtime";
-import * as r from "react";
-import { ChevronRight as A } from "../lib/icons.js";
-import { cn as c } from "../lib/cn.js";
-const b = r.createContext(
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import * as o from "react";
+import { MotionConfig as A, AnimatePresence as I, motion as N } from "motion/react";
+import { ChevronRight as C } from "../lib/icons.js";
+import { cn as m } from "../lib/cn.js";
+import { springDisclosure as w } from "../lib/motion.js";
+const y = o.createContext(
   null
 );
-function N(s) {
-  const e = r.useContext(b);
+function $(s) {
+  const e = o.useContext(y);
   if (!e)
     throw new Error(`<${s}> must be used within <Accordion>`);
   return e;
 }
-const w = r.forwardRef(
-  ({ className: s, type: e = "single", defaultValue: t, children: u, ...f }, g) => {
-    const d = r.useId(), [a, l] = r.useState(() => t === void 0 ? [] : Array.isArray(t) ? t : [t]), i = r.useCallback(
-      (o) => {
-        l((x) => {
-          const p = x.includes(o);
-          return e === "single" ? p ? [] : [o] : p ? x.filter((I) => I !== o) : [...x, o];
+const v = o.forwardRef(
+  ({ className: s, type: e = "single", defaultValue: i, children: u, ...f }, g) => {
+    const c = o.useId(), [a, d] = o.useState(() => i === void 0 ? [] : Array.isArray(i) ? i : [i]), r = o.useCallback(
+      (n) => {
+        d((h) => {
+          const p = h.includes(n);
+          return e === "single" ? p ? [] : [n] : p ? h.filter((b) => b !== n) : [...h, n];
         });
       },
       [e]
-    ), m = r.useMemo(
-      () => ({ openItems: a, toggle: i, baseId: d }),
-      [a, i, d]
+    ), l = o.useMemo(
+      () => ({ openItems: a, toggle: r, baseId: c }),
+      [a, r, c]
     );
-    return /* @__PURE__ */ n(b.Provider, { value: m, children: /* @__PURE__ */ n(
+    return /* @__PURE__ */ t(y.Provider, { value: l, children: /* @__PURE__ */ t(
       "div",
       {
         ref: g,
-        className: c(s),
+        className: m(s),
         ...f,
         children: u
       }
     ) });
   }
 );
-w.displayName = "Accordion";
-const C = r.forwardRef(({ className: s, value: e, title: t, children: u, ...f }, g) => {
-  const { openItems: d, toggle: a, baseId: l } = N("AccordionItem"), i = d.includes(e), m = `${l}-trigger-${e}`, o = `${l}-panel-${e}`;
-  return /* @__PURE__ */ h("div", { ref: g, className: c(s), ...f, children: [
-    /* @__PURE__ */ n("h3", { className: "flex", children: /* @__PURE__ */ h(
+v.displayName = "Accordion";
+const R = o.forwardRef(({ className: s, value: e, title: i, children: u, ...f }, g) => {
+  const { openItems: c, toggle: a, baseId: d } = $("AccordionItem"), r = c.includes(e), l = `${d}-trigger-${e}`, n = `${d}-panel-${e}`;
+  return /* @__PURE__ */ x("div", { ref: g, className: m(s), ...f, children: [
+    /* @__PURE__ */ t("h3", { className: "flex", children: /* @__PURE__ */ x(
       "button",
       {
         type: "button",
-        id: m,
-        "aria-expanded": i,
-        "aria-controls": o,
+        id: l,
+        "aria-expanded": r,
+        "aria-controls": n,
         onClick: () => a(e),
-        className: c(
+        className: m(
           "flex w-full items-center gap-2 py-4 text-left font-normal",
           "outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm",
           "transition-colors hover:text-foreground"
         ),
         children: [
-          /* @__PURE__ */ n(
-            A,
+          /* @__PURE__ */ t(
+            C,
             {
               "aria-hidden": !0,
-              className: c(
-                "size-4 shrink-0 text-muted-foreground transition-transform duration-(--duration-normal) ease-out motion-reduce:transition-none",
-                i && "rotate-90"
+              className: m(
+                "size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out motion-reduce:transition-none",
+                r && "rotate-90"
               )
             }
           ),
-          t
+          i
         ]
       }
     ) }),
-    /* @__PURE__ */ n(
-      "div",
+    /* @__PURE__ */ t(A, { reducedMotion: "user", children: /* @__PURE__ */ t(I, { initial: !1, children: r && /* @__PURE__ */ t(
+      N.div,
       {
-        id: o,
-        role: "region",
-        "aria-labelledby": m,
-        className: c(
-          "grid",
-          i ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
-        ),
-        children: /* @__PURE__ */ n("div", { className: "overflow-hidden", children: /* @__PURE__ */ n("div", { className: "pb-4 text-xs text-muted-foreground", children: u }) })
+        id: n,
+        "aria-labelledby": l,
+        initial: { height: 0, opacity: 0, y: -4 },
+        animate: { height: "auto", opacity: 1, y: 0 },
+        exit: { height: 0, opacity: 0, y: -4 },
+        transition: w,
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ t("div", { className: "pb-4 text-xs text-muted-foreground", children: u })
       }
-    )
+    ) }) })
   ] });
 });
-C.displayName = "AccordionItem";
+R.displayName = "AccordionItem";
 export {
-  w as Accordion,
-  C as AccordionItem
+  v as Accordion,
+  R as AccordionItem
 };

package/components/agent-icon.d.ts

@@ -21,6 +21,8 @@ import * as React from "react";
  */
 export type AgentIconName = "orb" | "heart" | "soft-square" | "hex" | "spark" | "clover-x" | "ripple" | "bloom" | "sun" | "pulse" | "triangle" | "quad-flower" | "hexagon" | "star" | "stack" | "butterfly" | "octagon" | "heart-drop" | "soft-scallop" | "arch" | "pentagon" | "diamond" | "leaf" | "dome";
 export type AgentIconState = "default" | "thinking" | "acting" | "sleep";
+/** Named product-safe recolors. Raw palette values stay inside ADS. */
+export type AgentIconColorPreset = "field";
 interface AgentConfig {
     id: AgentIconName;
     name: string;
@@ -48,12 +50,22 @@ export interface AgentIconProps extends Omit<React.HTMLAttributes<HTMLSpanElemen
     interactive?: boolean;
     /** Rendered size in px (square). Defaults to 40. */
     size?: number;
+    /** Number of tiles per side. Defaults to 7; larger display marks can use a denser field. */
+    tileGridSize?: number;
+    /** Scale applied to the paired eyes. Defaults to 1. */
+    eyeScale?: number;
+    /** Override the paired eye color without changing the hatch palette. */
+    eyeColor?: string;
+    /** Play the staggered tile-assembly animation when mounted. Defaults to true. */
+    animateOnMount?: boolean;
     /**
      * Override the mark's base hue (any CSS hex). The five-tone hatch palette is
      * re-derived from it, so the whole silhouette recolors. Defaults to the
      * form's own registry color.
      */
     color?: string;
+    /** Product-safe named recolor. `color` wins when both are supplied. */
+    colorPreset?: AgentIconColorPreset;
     /**
      * Eyes follow the cursor (the "Field Agent" greeter treatment). Tracks the
      * pointer globally; disabled under reduced motion.

package/components/agent-icon.js

@@ -1,99 +1,102 @@
 "use client";
-import { jsx as H } from "react/jsx-runtime";
-import * as i from "react";
-import { cn as G } from "../lib/cn.js";
-function x(e, t, g, l = -Math.PI / 2) {
-  const c = [], n = e * 2;
-  for (let o = 0; o < n; o += 1) {
-    const f = o % 2 === 0 ? t : g, m = l + Math.PI * o / e;
-    c.push(
-      `${(18 + Math.cos(m) * f).toFixed(2)},${(18 + Math.sin(m) * f).toFixed(2)}`
+import { jsx as L } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as ee } from "../lib/cn.js";
+const te = {
+  field: "#4565d5"
+};
+function b(e, n, c, i = -Math.PI / 2) {
+  const p = [], t = e * 2;
+  for (let a = 0; a < t; a += 1) {
+    const g = a % 2 === 0 ? n : c, h = i + Math.PI * a / e;
+    p.push(
+      `${(18 + Math.cos(h) * g).toFixed(2)},${(18 + Math.sin(h) * g).toFixed(2)}`
     );
   }
-  return c.join(" ");
+  return p.join(" ");
 }
-function u(e, t, g) {
-  const l = (n, o) => Number.parseInt(n.slice(1), 16) >> o & 255, c = (n) => Math.round(l(e, n) + (l(t, n) - l(e, n)) * g);
-  return `#${[16, 8, 0].map((n) => c(n).toString(16).padStart(2, "0")).join("")}`;
+function y(e, n, c) {
+  const i = (t, a) => Number.parseInt(t.slice(1), 16) >> a & 255, p = (t) => Math.round(i(e, t) + (i(n, t) - i(e, t)) * c);
+  return `#${[16, 8, 0].map((t) => p(t).toString(16).padStart(2, "0")).join("")}`;
 }
-function V(e) {
+function ae(e) {
   return [
-    u(e, "#16213f", 0.2),
-    u(e, "#ffffff", 0.04),
-    u(e, "#ffffff", 0.16),
-    u(e, "#ffffff", 0.3),
-    u(e, "#233055", 0.1)
+    y(e, "#16213f", 0.2),
+    y(e, "#ffffff", 0.04),
+    y(e, "#ffffff", 0.16),
+    y(e, "#ffffff", 0.3),
+    y(e, "#233055", 0.1)
   ];
 }
-const X = [
+const j = [
   { spacing: 2.15, strokeWidth: 1.38, phase: 0 },
   { spacing: 2.65, strokeWidth: 1.72, phase: 0.38 },
   { spacing: 3.1, strokeWidth: 1.78, phase: 0.72 },
   { spacing: 3.65, strokeWidth: 2.2, phase: 1.06 }
 ];
-function W(e, t) {
-  const g = V(e.color), l = u(e.color, "#4fe6ff", 0.58), c = 7, n = 36 / c, o = 0.18, f = [...e.id].reduce((s, a) => s + a.charCodeAt(0), 0), m = g.flatMap(
-    (s, a) => X.map(
-      (d, y) => `
-      <pattern id="${t}-hatch-${a}-${y}" width="${d.spacing}" height="${d.spacing}" patternUnits="userSpaceOnUse" patternTransform="rotate(45) translate(${d.phase} 0)">
-        <rect width="${d.strokeWidth}" height="${d.spacing}" fill="${s}" />
+function ne(e, n, c = 7) {
+  const i = ae(e.color), p = y(e.color, "#4fe6ff", 0.58), t = Math.max(4, Math.min(12, Math.round(c))), a = 36 / t, g = Math.min(0.18, a * 0.05), h = (t - 1) / 2, $ = Math.max(Math.hypot(h, h), 1), v = [...e.id].reduce((l, r) => l + r.charCodeAt(0), 0), C = i.flatMap(
+    (l, r) => j.map(
+      (f, m) => `
+      <pattern id="${n}-hatch-${r}-${m}" width="${f.spacing}" height="${f.spacing}" patternUnits="userSpaceOnUse" patternTransform="rotate(45) translate(${f.phase} 0)">
+        <rect width="${f.strokeWidth}" height="${f.spacing}" fill="${l}" />
       </pattern>`
     )
-  ).join(""), h = [];
-  for (let s = 0; s < c; s += 1)
-    for (let a = 0; a < c; a += 1) {
-      const d = (a * 3 + s * 5 + f) % g.length, y = (a + s * 2 + f) % X.length, b = Math.hypot(a - 3, s - 3) / Math.hypot(3, 3), k = Math.round(b * 620);
-      h.push(
-        `<rect class="agent-avatar__tile" x="${(a * n + o).toFixed(3)}" y="${(s * n + o).toFixed(3)}" width="${(n - o * 2).toFixed(3)}" height="${(n - o * 2).toFixed(3)}" rx="0.18" fill="url(#${t}-hatch-${d}-${y})" style="--agent-tile-delay: ${k}ms" />`
+  ).join(""), k = [];
+  for (let l = 0; l < t; l += 1)
+    for (let r = 0; r < t; r += 1) {
+      const f = (r * 3 + l * 5 + v) % i.length, m = (r + l * 2 + v) % j.length, d = Math.hypot(r - h, l - h) / $, w = Math.round(d * 620);
+      k.push(
+        `<rect class="agent-avatar__tile" x="${(r * a + g).toFixed(3)}" y="${(l * a + g).toFixed(3)}" width="${(a - g * 2).toFixed(3)}" height="${(a - g * 2).toFixed(3)}" rx="0.18" fill="url(#${n}-hatch-${f}-${m})" style="--agent-tile-delay: ${w}ms" />`
       );
     }
   return `
     <defs>
-      <clipPath id="${t}-shape" clipPathUnits="userSpaceOnUse">${e.shape}</clipPath>
-      ${m}
-      <pattern id="${t}-focus-hatch" width="2.3" height="2.3" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
-        <rect width="1.46" height="2.3" fill="${l}" />
+      <clipPath id="${n}-shape" clipPathUnits="userSpaceOnUse">${e.shape}</clipPath>
+      ${C}
+      <pattern id="${n}-focus-hatch" width="2.3" height="2.3" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+        <rect width="1.46" height="2.3" fill="${p}" />
       </pattern>
     </defs>
-    <g class="agent-avatar__field" clip-path="url(#${t}-shape)">${h.join("")}</g>
-    <rect class="agent-avatar__focus-scan" x="-8" y="1" width="7" height="34" rx="3.5" fill="url(#${t}-focus-hatch)" clip-path="url(#${t}-shape)" aria-hidden="true" />
+    <g class="agent-avatar__field" clip-path="url(#${n}-shape)">${k.join("")}</g>
+    <rect class="agent-avatar__focus-scan" x="-8" y="1" width="7" height="34" rx="3.5" fill="url(#${n}-focus-hatch)" clip-path="url(#${n}-shape)" aria-hidden="true" />
   `;
 }
-function Q(e) {
-  const t = e.eyeY ?? 13;
+function re(e, n = 1) {
+  const c = 4 * n, i = 7 * n, t = (e.eyeY ?? 13) + 3.5 - i / 2, a = Math.min(1, c * 0.25), g = 14 - c / 2, h = 22 - c / 2;
   return `
     <g class="agent-avatar__eyes" fill="${e.eyeColor}" aria-hidden="true">
-      <rect class="agent-avatar__eye agent-avatar__eye--left" x="12" y="${t}" width="4" height="7" rx="1" />
-      <rect class="agent-avatar__eye agent-avatar__eye--right" x="20" y="${t}" width="4" height="7" rx="1" />
+      <rect class="agent-avatar__eye agent-avatar__eye--left" x="${g.toFixed(3)}" y="${t.toFixed(3)}" width="${c.toFixed(3)}" height="${i.toFixed(3)}" rx="${a.toFixed(3)}" />
+      <rect class="agent-avatar__eye agent-avatar__eye--right" x="${h.toFixed(3)}" y="${t.toFixed(3)}" width="${c.toFixed(3)}" height="${i.toFixed(3)}" rx="${a.toFixed(3)}" />
     </g>
   `;
 }
-const Y = [
+const E = [
   { id: "orb", name: "Orb", color: "#8b66f6", shape: '<circle cx="18" cy="18" r="15.5" />' },
   { id: "heart", name: "Heart", color: "#ff4a3d", eyeY: 12.5, shape: '<path d="M18 33 5.3 20.6C-1.3 13.7 3.2 4 11.1 4c3.1 0 5.6 1.7 6.9 4.2C19.3 5.7 21.8 4 24.9 4c7.9 0 12.4 9.7 5.8 16.6Z" />' },
   { id: "soft-square", name: "Soft square", color: "#3b94d2", shape: '<rect x="3" y="3" width="30" height="30" rx="8" />' },
   { id: "hex", name: "Hex", color: "#f28aaa", shape: '<polygon points="10,3 26,3 34,18 26,33 10,33 2,18" />' },
   { id: "spark", name: "Spark", color: "#9669ee", shape: '<path d="M18 1c3 8 9 14 17 17-8 3-14 9-17 17-3-8-9-14-17-17C9 15 15 9 18 1Z" />' },
   { id: "clover-x", name: "Clover X", color: "#118a65", shape: '<path d="M18 11C14 3 7 2 4 6c-3 4 0 9 6 12-6 3-9 8-6 12 3 4 10 3 14-5 4 8 11 9 14 5 3-4 0-9-6-12 6-3 9-8 6-12-3-4-10-3-14 5Z" />' },
-  { id: "ripple", name: "Ripple", color: "#0d8d67", shape: `<polygon points="${x(10, 15.5, 13.8)}" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />` },
+  { id: "ripple", name: "Ripple", color: "#0d8d67", shape: `<polygon points="${b(10, 15.5, 13.8)}" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />` },
   { id: "bloom", name: "Bloom", color: "#f29ab7", shape: '<circle cx="18" cy="9.5" r="6.8"/><circle cx="25.4" cy="13.8" r="6.8"/><circle cx="25.4" cy="22.2" r="6.8"/><circle cx="18" cy="26.5" r="6.8"/><circle cx="10.6" cy="22.2" r="6.8"/><circle cx="10.6" cy="13.8" r="6.8"/>' },
-  { id: "sun", name: "Sun", color: "#ffb51b", shape: `<polygon points="${x(10, 16, 12.2)}" />` },
-  { id: "pulse", name: "Pulse", color: "#ff6d27", shape: `<polygon points="${x(18, 16, 14.2)}" />` },
+  { id: "sun", name: "Sun", color: "#ffb51b", shape: `<polygon points="${b(10, 16, 12.2)}" />` },
+  { id: "pulse", name: "Pulse", color: "#ff6d27", shape: `<polygon points="${b(18, 16, 14.2)}" />` },
   { id: "triangle", name: "Triangle", color: "#ffb317", eyeY: 14.5, shape: '<path d="M16.2 4.5a2.05 2.05 0 0 1 3.6 0l13.1 24.3A2.15 2.15 0 0 1 31 32H5a2.15 2.15 0 0 1-1.9-3.2Z" />' },
   { id: "quad-flower", name: "Quad flower", color: "#3f96d6", shape: '<circle cx="11" cy="11" r="8"/><circle cx="25" cy="11" r="8"/><circle cx="11" cy="25" r="8"/><circle cx="25" cy="25" r="8"/>' },
   { id: "hexagon", name: "Hexagon", color: "#3a92d1", shape: '<polygon points="18,2.5 32,10.5 32,25.5 18,33.5 4,25.5 4,10.5" />' },
-  { id: "star", name: "Star", color: "#ffb91c", eyeY: 14, shape: `<polygon points="${x(5, 16, 7.3)}" />` },
+  { id: "star", name: "Star", color: "#ffb91c", eyeY: 14, shape: `<polygon points="${b(5, 16, 7.3)}" />` },
   { id: "stack", name: "Stack", color: "#ff4a42", shape: '<rect x="4" y="3" width="28" height="11" rx="5.5"/><rect x="4" y="12.5" width="28" height="11" rx="5.5"/><rect x="4" y="22" width="28" height="11" rx="5.5"/>' },
   { id: "butterfly", name: "Butterfly", color: "#ef91af", shape: '<path d="M18 18C18 8 13 3 4 3c0 9 3 14 11 15-8 1-11 6-11 15 9 0 14-5 14-15 0 10 5 15 14 15 0-9-3-14-11-15 8-1 11-6 11-15-9 0-14 5-14 15Z" />' },
   { id: "octagon", name: "Octagon", color: "#128862", shape: '<polygon points="11,3 25,3 33,11 33,25 25,33 11,33 3,25 3,11" />' },
   { id: "heart-drop", name: "Heart drop", color: "#f38dac", eyeY: 12.5, shape: '<path d="M18 34 5.8 21.4C-.8 14.6 3.1 4 11.2 4c3.2 0 5.6 1.7 6.8 4.3C19.2 5.7 21.6 4 24.8 4c8.1 0 12 10.6 5.4 17.4Z" />' },
-  { id: "soft-scallop", name: "Soft scallop", color: "#f19bb1", shape: `<polygon points="${x(12, 15.6, 14.4)}" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />` },
+  { id: "soft-scallop", name: "Soft scallop", color: "#f19bb1", shape: `<polygon points="${b(12, 15.6, 14.4)}" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />` },
   { id: "arch", name: "Arch", color: "#0f8c65", shape: '<path d="M5 33V17C5 8.7 10.8 3 18 3s13 5.7 13 14v16Z" />' },
   { id: "pentagon", name: "Pentagon", color: "#936af0", eyeY: 13.5, shape: '<polygon points="18,2 33,13 27,33 9,33 3,13" />' },
   { id: "diamond", name: "Diamond", color: "#368fd0", shape: '<polygon points="18,2 34,18 18,34 2,18" />' },
   { id: "leaf", name: "Leaf", color: "#ff7028", shape: '<path d="M4 32V18C4 10.3 10.3 4 18 4h14v14c0 7.7-6.3 14-14 14Z" />' },
   { id: "dome", name: "Dome", color: "#ffb614", shape: '<path d="M4 33V18C4 9.7 10.7 3 19 3h1c7.2 0 13 5.8 13 13v17Z" />' }
-].map((e) => ({ ...e, eyeColor: "#171820" })), ne = Y.map((e) => e.id), Z = "ads-agent-icon-styles", J = `
+].map((e) => ({ ...e, eyeColor: "#171820" })), de = E.map((e) => e.id), z = "ads-agent-icon-styles", ie = `
 .agent-avatar { display: inline-block; flex: none; color: var(--agent-color, #4565d5); line-height: 0; }
 .agent-avatar__svg { display: block; width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; }
 .agent-avatar__character,
@@ -107,6 +110,7 @@ const Y = [
    If the animation never runs, the tile still shows its natural visible state,
    so the mark can never be trapped invisible. */
 .agent-avatar__tile { transform-box: fill-box; transform-origin: center; animation: ads-agent-tile-intro 620ms cubic-bezier(0.22, 0.72, 0.24, 1) both; animation-delay: var(--agent-tile-delay, 0ms); }
+.agent-avatar[data-agent-animate-on-mount="false"] .agent-avatar__tile { animation: none; opacity: 1; transform: none; }
 /* Field Agent pointer tracking: eyes ease toward the cursor; overrides the
    state eye animation while the pointer is active. */
 .agent-avatar.is-pointer-tracking .agent-avatar__eyes { animation: none !important; transform: translate(var(--agent-pointer-eye-x, 0), var(--agent-pointer-eye-y, 0)); transition: transform 70ms linear; }
@@ -134,8 +138,8 @@ const Y = [
    blink (the Field Agent greeter behaviour). Pure CSS on :hover; the
    pointer-tracking rule above wins on the eyes when the pointer is active. */
 @media (hover: hover) and (pointer: fine) {
-  .agent-avatar:hover .agent-avatar__svg { animation: ads-agent-cute-hello 680ms cubic-bezier(0.2, 0.82, 0.24, 1) both; }
-  .agent-avatar[data-agent-state="default"]:hover .agent-avatar__eyes { animation: ads-agent-cute-blink 680ms ease-in-out both; }
+  .agent-avatar[data-agent-interactive="true"]:hover .agent-avatar__svg { animation: ads-agent-cute-hello 680ms cubic-bezier(0.2, 0.82, 0.24, 1) both; }
+  .agent-avatar[data-agent-interactive="true"][data-agent-state="default"]:hover .agent-avatar__eyes { animation: ads-agent-cute-blink 680ms ease-in-out both; }
 }
 @media (prefers-reduced-motion: reduce) {
   .agent-avatar__character,
@@ -145,107 +149,117 @@ const Y = [
   .agent-avatar__tile { animation: none !important; opacity: 1; transform: none; transition: none; }
 }
 `;
-function K() {
-  i.useEffect(() => {
-    if (typeof document > "u" || document.getElementById(Z)) return;
+function oe() {
+  s.useEffect(() => {
+    if (typeof document > "u" || document.getElementById(z)) return;
     const e = document.createElement("style");
-    e.id = Z, e.textContent = J, document.head.appendChild(e);
+    e.id = z, e.textContent = ie, document.head.appendChild(e);
   }, []);
 }
-const ee = i.forwardRef(
+const se = s.forwardRef(
   ({
     agent: e,
-    state: t,
-    interactive: g,
-    size: l = 40,
-    color: c,
-    trackPointer: n,
-    className: o,
-    style: f,
-    ...m
-  }, h) => {
-    K();
-    const s = i.useMemo(
-      () => Y.find((r) => r.id === e) ?? Y[0],
+    state: n,
+    interactive: c,
+    size: i = 40,
+    tileGridSize: p = 7,
+    eyeScale: t = 1,
+    eyeColor: a,
+    animateOnMount: g = !0,
+    color: h,
+    colorPreset: $,
+    trackPointer: v,
+    className: C,
+    style: k,
+    ...l
+  }, r) => {
+    oe();
+    const f = s.useMemo(
+      () => E.find((o) => o.id === e) ?? E[0],
       [e]
-    ), a = i.useMemo(
-      () => c ? { ...s, color: c } : s,
-      [s, c]
-    ), d = i.useRef(null), y = i.useCallback(
-      (r) => {
-        d.current = r, typeof h == "function" ? h(r) : h && (h.current = r);
+    ), m = h ?? ($ ? te[$] : void 0), d = s.useMemo(() => !m && !a ? f : {
+      ...f,
+      ...m ? { color: m } : {},
+      ...a ? { eyeColor: a } : {}
+    }, [f, m, a]), w = s.useRef(null), B = s.useCallback(
+      (o) => {
+        w.current = o, typeof r == "function" ? r(o) : r && (r.current = o);
       },
-      [h]
-    ), b = i.useId(), k = i.useMemo(
-      () => `agent-${a.id}-${b.replace(/[^a-zA-Z0-9]/g, "")}`,
-      [a.id, b]
-    ), S = t !== void 0, w = g ?? !S, [O, A] = i.useState("default"), $ = i.useRef(void 0), R = S ? t : O, z = i.useMemo(() => `-${([...a.id].reduce((M, C) => M + C.charCodeAt(0), 0) % 9 * 0.11).toFixed(2)}s`, [a.id]), L = i.useMemo(
-      () => `<g class="agent-avatar__character">${W(a, k)}${Q(
-        a
-      )}</g>`,
-      [a, k]
+      [r]
+    ), I = s.useId(), F = s.useMemo(
+      () => `agent-${d.id}-${I.replace(/[^a-zA-Z0-9]/g, "")}`,
+      [d.id, I]
+    ), T = n !== void 0, M = c ?? !T, [D, N] = s.useState("default"), Y = s.useRef(void 0), U = T ? n : D, W = s.useMemo(() => `-${([...d.id].reduce((S, A) => S + A.charCodeAt(0), 0) % 9 * 0.11).toFixed(2)}s`, [d.id]), q = s.useMemo(
+      () => `<g class="agent-avatar__character">${ne(
+        d,
+        F,
+        p
+      )}${re(d, t)}</g>`,
+      [t, d, F, p]
     );
-    i.useEffect(() => () => window.clearTimeout($.current), []), i.useEffect(() => {
-      const r = d.current;
-      if (!n || !r || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-      const M = 82, C = 1.55, B = 1.05;
-      let I = 0, E = 0, v = 0;
-      const U = () => {
-        v = 0;
-        const p = r.getBoundingClientRect(), N = I - (p.left + p.width / 2), F = E - (p.top + p.height / 2), _ = Math.hypot(N, F), P = Math.min(_ / M, 1), q = _ > 0 ? N / _ : 0, D = _ > 0 ? F / _ : 0;
-        r.style.setProperty("--agent-pointer-eye-x", `${(q * C * P).toFixed(3)}px`), r.style.setProperty("--agent-pointer-eye-y", `${(D * B * P).toFixed(3)}px`);
-      }, T = (p) => {
-        I = p.clientX, E = p.clientY, r.classList.add("is-pointer-tracking"), v || (v = requestAnimationFrame(U));
+    s.useEffect(() => () => window.clearTimeout(Y.current), []), s.useEffect(() => {
+      const o = w.current;
+      if (!v || !o || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+      const S = 82, A = 1.55, V = 1.05;
+      let P = 0, H = 0, _ = 0;
+      const Q = () => {
+        _ = 0;
+        const u = o.getBoundingClientRect(), O = P - (u.left + u.width / 2), R = H - (u.top + u.height / 2), x = Math.hypot(O, R), Z = Math.min(x / S, 1), J = x > 0 ? O / x : 0, K = x > 0 ? R / x : 0;
+        o.style.setProperty("--agent-pointer-eye-x", `${(J * A * Z).toFixed(3)}px`), o.style.setProperty("--agent-pointer-eye-y", `${(K * V * Z).toFixed(3)}px`);
+      }, X = (u) => {
+        P = u.clientX, H = u.clientY, o.classList.add("is-pointer-tracking"), _ || (_ = requestAnimationFrame(Q));
       };
-      return window.addEventListener("pointermove", T, { passive: !0 }), () => {
-        window.removeEventListener("pointermove", T), v && cancelAnimationFrame(v), r.classList.remove("is-pointer-tracking"), r.style.removeProperty("--agent-pointer-eye-x"), r.style.removeProperty("--agent-pointer-eye-y");
+      return window.addEventListener("pointermove", X, { passive: !0 }), () => {
+        window.removeEventListener("pointermove", X), _ && cancelAnimationFrame(_), o.classList.remove("is-pointer-tracking"), o.style.removeProperty("--agent-pointer-eye-x"), o.style.removeProperty("--agent-pointer-eye-y");
       };
-    }, [n]);
-    const j = w ? {
+    }, [v]);
+    const G = M ? {
       onClick: () => {
-        window.clearTimeout($.current), A("acting"), $.current = window.setTimeout(() => A("default"), 1500);
+        window.clearTimeout(Y.current), N("acting"), Y.current = window.setTimeout(() => N("default"), 1500);
       }
     } : {};
-    return /* @__PURE__ */ H(
+    return /* @__PURE__ */ L(
       "span",
       {
-        ref: y,
-        className: G(
+        ref: B,
+        className: ee(
           "agent-avatar",
-          w && "cursor-pointer rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring",
-          o
+          M && "cursor-pointer rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring",
+          C
         ),
-        "data-agent-icon": a.id,
-        "data-agent-state": R,
+        "data-agent-icon": d.id,
+        "data-agent-state": U,
+        "data-agent-interactive": M ? "true" : "false",
+        "data-agent-animate-on-mount": g ? "true" : "false",
         role: "img",
-        "aria-label": `${a.name} agent icon`,
-        tabIndex: w ? 0 : void 0,
+        "aria-label": `${d.name} agent icon`,
+        tabIndex: M ? 0 : void 0,
         style: {
-          "--agent-color": a.color,
-          "--agent-delay": z,
-          width: l,
-          height: l,
-          ...f
+          "--agent-color": d.color,
+          "--agent-delay": W,
+          width: i,
+          height: i,
+          ...k
         },
-        ...j,
-        ...m,
-        children: /* @__PURE__ */ H(
+        ...G,
+        ...l,
+        children: /* @__PURE__ */ L(
           "svg",
           {
             className: "agent-avatar__svg",
             viewBox: "0 0 36 36",
             focusable: "false",
             "aria-hidden": "true",
-            dangerouslySetInnerHTML: { __html: L }
+            dangerouslySetInnerHTML: { __html: q }
           }
         )
       }
     );
   }
 );
-ee.displayName = "AgentIcon";
+se.displayName = "AgentIcon";
 export {
-  Y as AGENT_ICONS,
-  ne as AGENT_ICON_NAMES,
-  ee as AgentIcon
+  E as AGENT_ICONS,
+  de as AGENT_ICON_NAMES,
+  se as AgentIcon
 };

package/components/ai-elements/chain-of-thought-icon.d.ts

@@ -12,31 +12,29 @@ export interface ChainOfThoughtIconProps extends Omit<React.SVGAttributes<SVGSVG
     state: ChainOfThoughtState;
     /** Defaults to the grid's native 16 px size. */
     size?: number | string;
-    /** Active steps animate; complete, pending, and error steps pass `false`. */
+    /** Active steps animate; settled steps hold the stage's authored frame. */
     animated?: boolean;
-    /** Accessible name. Omit to keep the icon decorative — pair with `aria-hidden` at the call site, the convention every other ADS icon follows. */
+    /** Accessible name. Omit when adjacent text already names the state. */
     label?: string;
 }
 /**
- * One animated (or, for the three lifecycle states, static) squircle-grid
- * icon. `currentColor`-based like every ADS icon — set its color with a
- * `text-*` class on an ancestor, not a prop. `prefers-reduced-motion` is
- * already handled inside the source markup.
+ * One currentColor, dependency-free trace icon. Reduced motion holds the
+ * same representative frame used after the stage settles.
  */
 export declare const ChainOfThoughtIcon: React.ForwardRefExoticComponent<ChainOfThoughtIconProps & React.RefAttributes<SVGSVGElement>>;
 export interface TraceStateIconProps extends Omit<ChainOfThoughtIconProps, "state"> {
     /** Explicit chain-of-thought stage, when known. */
     stage?: ActiveChainOfThoughtState;
-    /** Tool name executed by this step — used to infer a stage when `stage` is absent. */
+    /** Tool name used to infer a stage when `stage` is absent. */
     toolName?: string;
-    /** ADS 2 step status changes motion/emphasis while preserving the stage icon. */
+    /** Step status controls motion while preserving the semantic stage. */
     status?: "active" | "complete" | "pending" | "error";
-    /** Whole-chain outcome. Do not use this for an individual completed step. */
+    /** Whole-chain outcome. Do not use this for a completed individual step. */
     outcome?: "completed" | "paused" | "incomplete";
 }
 /**
- * Resolves a semantic stage from an explicit state or tool name. Step status
- * controls motion only: active animates; complete, pending, and error freeze
- * the same glyph. `outcome` is reserved for the whole-chain summary.
+ * Resolves a semantic stage from an explicit state or tool name. An active
+ * stage animates; settled stages keep that same icon and hold its authored
+ * frame. `outcome` is reserved for the whole-chain summary.
  */
 export declare const TraceStateIcon: React.ForwardRefExoticComponent<TraceStateIconProps & React.RefAttributes<SVGSVGElement>>;