@actioneer/ads 0.5.3 → 0.5.5

package/components/accordion.js

@@ -1,24 +1,24 @@
 "use client";
 import { jsx as n, jsxs as h } from "react/jsx-runtime";
 import * as r from "react";
-import { ChevronDown as I } from "../lib/icons.js";
+import { ChevronRight as A } from "../lib/icons.js";
 import { cn as c } from "../lib/cn.js";
 const b = r.createContext(
   null
 );
-function A(s) {
+function N(s) {
   const e = r.useContext(b);
   if (!e)
     throw new Error(`<${s}> must be used within <Accordion>`);
   return e;
 }
-const N = r.forwardRef(
+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((w) => w !== o) : [...x, o];
+          return e === "single" ? p ? [] : [o] : p ? x.filter((I) => I !== o) : [...x, o];
         });
       },
       [e]
@@ -37,9 +37,9 @@ const N = r.forwardRef(
     ) });
   }
 );
-N.displayName = "Accordion";
-const y = r.forwardRef(({ className: s, value: e, title: t, children: u, ...f }, g) => {
-  const { openItems: d, toggle: a, baseId: l } = A("AccordionItem"), i = d.includes(e), m = `${l}-trigger-${e}`, o = `${l}-panel-${e}`;
+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(
       "button",
@@ -50,22 +50,22 @@ const y = r.forwardRef(({ className: s, value: e, title: t, children: u, ...f },
         "aria-controls": o,
         onClick: () => a(e),
         className: c(
-          "flex w-full items-center justify-between py-4 text-left font-medium",
+          "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: [
-          t,
           /* @__PURE__ */ n(
-            I,
+            A,
             {
               "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-180"
+                i && "rotate-90"
               )
             }
-          )
+          ),
+          t
         ]
       }
     ) }),
@@ -84,8 +84,8 @@ const y = r.forwardRef(({ className: s, value: e, title: t, children: u, ...f },
     )
   ] });
 });
-y.displayName = "AccordionItem";
+C.displayName = "AccordionItem";
 export {
-  N as Accordion,
-  y as AccordionItem
+  w as Accordion,
+  C as AccordionItem
 };

package/components/agent-icon.d.ts

@@ -0,0 +1,64 @@
+import * as React from "react";
+/**
+ * AgentIcon — the "living agent" creative-icon family (the second special-icon
+ * tier alongside {@link PixelIcon}). 24 self-contained, dependency-free animated
+ * marks: a hatched tile field clipped to a silhouette, paired rectangular eyes,
+ * and four interaction states —
+ *
+ *   • `default`  — a slow breathing settle (idle, gently alive)
+ *   • `thinking` — a cool focus scan crosses the shifting hatch as the eyes search
+ *   • `acting`   — a quick speaking size cadence (a.k.a. "speaking")
+ *   • `sleep`    — the silhouette floats, desaturates, and closes its eyes
+ *
+ * Left uncontrolled it is interactive: hover/focus → `thinking`, click → `acting`
+ * for 1.5s, then it settles. Pass `state` to drive it externally (an agent's live
+ * status), which turns the pointer interactions off unless `interactive` is set.
+ *
+ * These are EXPRESSIVE marks for unique moments (an agent avatar, a voice/thinking
+ * surface, an empty state) — not functional UI glyphs. For those use the Phosphor
+ * registry at `@/lib/icons` (principle 4). The whole thing is one SVG + injected
+ * CSS keyframes: no OGL/WebGL, no external dependency, safe in ADS and the product.
+ */
+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";
+interface AgentConfig {
+    id: AgentIconName;
+    name: string;
+    color: string;
+    eyeColor: string;
+    eyeY?: number;
+    shape: string;
+}
+/** The 24 agent forms. All eyes share the one ink tone (source override). */
+export declare const AGENT_ICONS: readonly AgentConfig[];
+/** Names in registry order (matches the source's 01–24 numbering). */
+export declare const AGENT_ICON_NAMES: AgentIconName[];
+export interface AgentIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Which of the 24 agent forms to render. */
+    agent: AgentIconName;
+    /**
+     * Drive the state externally (an agent's live status). When set, pointer
+     * interactions are OFF unless `interactive` is also true.
+     */
+    state?: AgentIconState;
+    /**
+     * Force interactivity on/off. Defaults to interactive when `state` is
+     * uncontrolled, and static when `state` is provided.
+     */
+    interactive?: boolean;
+    /** Rendered size in px (square). Defaults to 40. */
+    size?: number;
+    /**
+     * 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;
+    /**
+     * Eyes follow the cursor (the "Field Agent" greeter treatment). Tracks the
+     * pointer globally; disabled under reduced motion.
+     */
+    trackPointer?: boolean;
+}
+export declare const AgentIcon: React.ForwardRefExoticComponent<AgentIconProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/components/agent-icon.js

@@ -0,0 +1,251 @@
+"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)}`
+    );
+  }
+  return c.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 V(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)
+  ];
+}
+const X = [
+  { 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}" />
+      </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" />`
+      );
+    }
+  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}" />
+      </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" />
+  `;
+}
+function Q(e) {
+  const t = e.eyeY ?? 13;
+  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" />
+    </g>
+  `;
+}
+const Y = [
+  { 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: "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: "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: "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: "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 = `
+.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,
+.agent-avatar__field,
+.agent-avatar__eyes,
+.agent-avatar__focus-scan { transform-box: fill-box; transform-origin: center; will-change: transform; }
+.agent-avatar__focus-scan { opacity: 0; pointer-events: none; }
+/* Tiles rest VISIBLE (opacity 1, scale 1 - no base hiding). The tile-assembly
+   intro is a pure-CSS mount animation: 'both' fill holds the collapsed 0%
+   frame through its stagger delay, then settles at the visible 100% frame.
+   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); }
+/* 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; }
+.agent-avatar[data-agent-state="default"] .agent-avatar__character { animation: ads-agent-default-breathe 3.6s ease-in-out infinite; animation-delay: var(--agent-delay, 0s); }
+.agent-avatar[data-agent-state="thinking"] .agent-avatar__field { animation: ads-agent-thinking-field 2.15s ease-in-out infinite, ads-agent-thinking-color 3.2s ease-in-out infinite; animation-delay: var(--agent-delay, 0s), var(--agent-delay, 0s); }
+.agent-avatar[data-agent-state="thinking"] .agent-avatar__eyes { animation: ads-agent-thinking-eyes 1.65s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-delay: var(--agent-delay, 0s); }
+.agent-avatar[data-agent-state="thinking"] .agent-avatar__focus-scan { animation: ads-agent-thinking-scan 2.15s cubic-bezier(0.45, 0, 0.2, 1) infinite; animation-delay: var(--agent-delay, 0s); }
+.agent-avatar[data-agent-state="acting"] .agent-avatar__character { animation: ads-agent-acting-size 720ms cubic-bezier(0.33, 1, 0.68, 1) infinite; animation-delay: var(--agent-delay, 0s); }
+.agent-avatar[data-agent-state="sleep"] .agent-avatar__character { animation: ads-agent-sleep-float 4.8s ease-in-out infinite; animation-delay: var(--agent-delay, 0s); }
+.agent-avatar[data-agent-state="sleep"] .agent-avatar__field { animation: ads-agent-sleep-dim 4.8s ease-in-out infinite; animation-delay: var(--agent-delay, 0s); }
+.agent-avatar[data-agent-state="sleep"] .agent-avatar__eyes { animation: ads-agent-sleep-eyes 4.8s ease-in-out infinite; animation-delay: var(--agent-delay, 0s); }
+@keyframes ads-agent-default-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-0.45px) scale(1.018, 0.985); } }
+@keyframes ads-agent-tile-intro { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
+@keyframes ads-agent-thinking-field { 0%, 100% { transform: rotate(-1.6deg) scale(0.99); } 50% { transform: rotate(1.6deg) scale(1.025); } }
+@keyframes ads-agent-thinking-color { 0%, 100% { filter: hue-rotate(-8deg) saturate(1.08) brightness(1); } 50% { filter: hue-rotate(24deg) saturate(1.48) brightness(1.13); } }
+@keyframes ads-agent-thinking-scan { 0% { opacity: 0; transform: translateX(0); } 16% { opacity: 0.22; } 42% { opacity: 0.92; } 72% { opacity: 0.35; } 100% { opacity: 0; transform: translateX(51px); } }
+@keyframes ads-agent-thinking-eyes { 0%, 18%, 100% { transform: translateX(-1.15px); } 48%, 68% { transform: translateX(1.15px); } }
+@keyframes ads-agent-acting-size { 0%, 100% { transform: scale(1.1); } 28% { transform: scale(1.2); } 48% { transform: scale(1.125); } 72% { transform: scale(1.185); } }
+@keyframes ads-agent-sleep-float { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-1.25px) rotate(0.6deg); } }
+@keyframes ads-agent-sleep-dim { 0%, 100% { opacity: 0.68; filter: saturate(0.52) brightness(1.04); } 50% { opacity: 0.82; filter: saturate(0.68) brightness(1.1); } }
+@keyframes ads-agent-sleep-eyes { 0%, 100% { transform: translateY(1.7px) scaleY(0.18); } 50% { transform: translateY(2px) scaleY(0.14); } }
+@keyframes ads-agent-cute-hello { 0%, 100% { transform: translateY(0) rotate(0) scale(1); } 16% { transform: translateY(0.8px) rotate(0) scale(1.05, 0.93); } 38% { transform: translateY(-2.4px) rotate(-4deg) scale(0.96, 1.07); } 56% { transform: translateY(-1.2px) rotate(3deg) scale(1.025, 0.985); } 74% { transform: translateY(0.25px) rotate(-1.2deg) scale(0.99, 1.015); } }
+@keyframes ads-agent-cute-blink { 0%, 28%, 46%, 100% { transform: translateY(0) scaleY(1); } 36% { transform: translateY(2.7px) scaleY(0.16); } }
+/* Hover greeting: the whole mark gives a quick playful "hello" wave and a
+   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; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .agent-avatar__character,
+  .agent-avatar__field,
+  .agent-avatar__eyes,
+  .agent-avatar__focus-scan,
+  .agent-avatar__tile { animation: none !important; opacity: 1; transform: none; transition: none; }
+}
+`;
+function K() {
+  i.useEffect(() => {
+    if (typeof document > "u" || document.getElementById(Z)) return;
+    const e = document.createElement("style");
+    e.id = Z, e.textContent = J, document.head.appendChild(e);
+  }, []);
+}
+const ee = i.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],
+      [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);
+      },
+      [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]
+    );
+    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));
+      };
+      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");
+      };
+    }, [n]);
+    const j = w ? {
+      onClick: () => {
+        window.clearTimeout($.current), A("acting"), $.current = window.setTimeout(() => A("default"), 1500);
+      }
+    } : {};
+    return /* @__PURE__ */ H(
+      "span",
+      {
+        ref: y,
+        className: G(
+          "agent-avatar",
+          w && "cursor-pointer rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring",
+          o
+        ),
+        "data-agent-icon": a.id,
+        "data-agent-state": R,
+        role: "img",
+        "aria-label": `${a.name} agent icon`,
+        tabIndex: w ? 0 : void 0,
+        style: {
+          "--agent-color": a.color,
+          "--agent-delay": z,
+          width: l,
+          height: l,
+          ...f
+        },
+        ...j,
+        ...m,
+        children: /* @__PURE__ */ H(
+          "svg",
+          {
+            className: "agent-avatar__svg",
+            viewBox: "0 0 36 36",
+            focusable: "false",
+            "aria-hidden": "true",
+            dangerouslySetInnerHTML: { __html: L }
+          }
+        )
+      }
+    );
+  }
+);
+ee.displayName = "AgentIcon";
+export {
+  Y as AGENT_ICONS,
+  ne as AGENT_ICON_NAMES,
+  ee as AgentIcon
+};

package/components/ai-elements/agent-trace.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { ActiveChainOfThoughtState } from './chain-of-thought-icon';
 import { ToolState } from './tool';
 /**
  * AgentTrace — the ENTIRE agent reasoning trace as one component, so any
@@ -48,8 +49,14 @@ export interface AgentTraceStep {
     group: string;
     /** Icon for the phase header (only the first step in a group needs it). */
     groupIcon?: ReactNode;
-    /** The step's own leading icon. */
+    /** The step's own leading icon. Takes priority over `state` when both are set. */
     icon?: ReactNode;
+    /**
+     * The chain-of-thought stage this step represents — resolves to an
+     * animated `TraceStateIcon` when active and the same static semantic glyph
+     * when complete or errored. Step status never replaces the stage identity.
+     */
+    state?: ActiveChainOfThoughtState;
     label: string;
     /** Attribution — shown only when it differs from `mainAgent`. */
     agent?: string;