@actioneer/ads 0.3.0 → 0.4.0

package/components/ai-elements/chain-of-thought.js

@@ -1,88 +1,114 @@
 "use client";
-import { jsx as t, jsxs as d, Fragment as C } from "react/jsx-runtime";
-import { Badge as b } from "../badge.js";
-import { Collapsible as v, CollapsibleTrigger as y, CollapsibleContent as N } from "../collapsible.js";
-import { ChevronRight as w, WarningCircle as O, Database as k, ChevronDown as S } from "../../lib/icons.js";
-import { cn as r } from "../../lib/cn.js";
-import { memo as c, useState as z, useRef as E, useEffect as R } from "react";
-const j = c(
-  ({ className: o, role: i = "list", ...a }) => /* @__PURE__ */ t(
+import { jsx as t, jsxs as c, Fragment as R } from "react/jsx-runtime";
+import { Badge as y } from "../badge.js";
+import { Collapsible as N, CollapsibleTrigger as C, CollapsibleContent as T } from "../collapsible.js";
+import { ChevronRight as M, ChevronDown as w, WarningCircle as j, Database as _ } from "../../lib/icons.js";
+import { cn as n } from "../../lib/cn.js";
+import { createContext as O, memo as l, useContext as S, useState as D, useRef as A, useEffect as I } from "react";
+import { motion as L } from "motion/react";
+import { EASE_DISCLOSURE as P } from "../../lib/motion.js";
+const k = O(!1), E = O("rail"), B = l(
+  ({
+    className: i,
+    role: o = "list",
+    connector: r = "rail",
+    children: a,
+    ...e
+  }) => /* @__PURE__ */ t(
     "div",
     {
       "data-slot": "chain-of-thought",
-      role: i,
-      className: r(
+      role: o,
+      className: n(
         "w-full",
-        "[&>[data-slot=chain-of-thought-step]:not(:has(~_[data-slot=chain-of-thought-step]))]:pb-0",
-        "[&>[data-slot=chain-of-thought-step]:not(:has(~_[data-slot=chain-of-thought-step]))]:before:hidden",
-        o
+        r === "rail" && [
+          "[&>[data-slot=chain-of-thought-step]:not(:has(~_[data-slot=chain-of-thought-step]))]:pb-0",
+          "[&>[data-slot=chain-of-thought-step]:not(:has(~_[data-slot=chain-of-thought-step]))]:before:hidden"
+        ],
+        i
       ),
-      ...a
+      ...e,
+      children: /* @__PURE__ */ t(E.Provider, { value: r, children: a })
     }
   )
-), M = c(
+), F = l(
   ({
-    className: o,
-    defaultOpen: i,
-    open: a,
-    onOpenChange: n,
+    className: i,
+    defaultOpen: o,
+    open: r,
+    onOpenChange: a,
     status: e = "complete",
     role: s = "listitem",
     "aria-busy": h,
-    ...m
+    children: m,
+    ...d
   }) => {
-    const l = a !== void 0, [g, u] = z(
-      i ?? e === "active"
-    ), f = E(e), p = f.current !== "active" && e === "active", T = l ? a : p || g;
-    return R(() => {
-      const x = f.current;
-      f.current = e, !(x === "active" || e !== "active") && (l || u(!0), n == null || n(!0));
-    }, [l, n, e]), /* @__PURE__ */ t(
-      v,
+    const p = S(E), u = r !== void 0, [g, f] = D(
+      o ?? e === "active"
+    ), b = A(e), z = b.current !== "active" && e === "active", v = u ? r : z || g;
+    return I(() => {
+      const x = b.current;
+      b.current = e, !(x === "active" || e !== "active") && (u || f(!0), a == null || a(!0));
+    }, [u, a, e]), /* @__PURE__ */ t(
+      N,
       {
         "data-slot": "chain-of-thought-step",
         "data-status": e,
-        open: T,
+        open: v,
         onOpenChange: (x) => {
-          l || u(x), n == null || n(x);
+          u || f(x), a == null || a(x);
         },
         role: s,
         "aria-current": e === "active" ? "step" : void 0,
         "aria-busy": h ?? (e === "active" || void 0),
-        className: r(
+        className: n(
           "group/cot-step relative pb-2",
           // Connector rail: a 16px segment centred in the 28px gap between a
           // collapsed step's icon and the next one (top-8 = 32px from the step
           // top, ending 4px past its box). It stretches with an open step.
-          "before:absolute before:top-8 before:-bottom-1 before:left-2 before:w-px before:bg-border before:content-['']",
+          p === "rail" && "before:absolute before:top-8 before:-bottom-1 before:left-2 before:w-px before:bg-border-strong before:content-['']",
+          // Tree connector: a continuous rail down the group with an elbow
+          // reaching EVERY step — the same branch language as Tree/TreeItem.
+          // The last step drops the rail; its elbow draws the final segment.
+          p === "tree" && [
+            "ps-5",
+            "before:absolute before:inset-y-0 before:left-0 before:border-l before:border-border-strong before:content-['']",
+            "last:before:hidden",
+            // top-0.5 + h-4 lands the elbow at 18px — the step icon's centre.
+            "after:absolute after:left-0 after:top-0.5 after:h-4 after:w-4 after:rounded-bl-[9px] after:border-b after:border-l after:border-border-strong after:content-['']"
+          ],
           e === "complete" && "text-secondary",
           e === "active" && "text-primary",
           e === "pending" && "text-tertiary/60",
           e === "error" && "text-danger",
-          o
+          i
         ),
-        ...m
+        ...d,
+        children: /* @__PURE__ */ t(k.Provider, { value: v, children: m })
       }
     );
   }
-), _ = c(
+), U = l(
   ({
-    className: o,
-    children: i,
-    leftIcon: a,
-    endContent: n,
-    swapIconOnHover: e = !0,
-    ...s
-  }) => /* @__PURE__ */ t(y, { asChild: !0, ...s, children: /* @__PURE__ */ d(
+    className: i,
+    children: o,
+    leftIcon: r,
+    endContent: a,
+    caret: e = !0,
+    swapIconOnHover: s = !0,
+    ...h
+  }) => /* @__PURE__ */ t(C, { asChild: !0, ...h, children: /* @__PURE__ */ c(
     "button",
     {
       type: "button",
       "data-slot": "chain-of-thought-trigger",
-      className: r(
+      className: n(
         "group/cot-trigger flex min-h-9 w-full cursor-pointer items-center gap-3 rounded-sm text-left text-base text-current outline-none",
+        // Rows carry no hover fill: the caret is the affordance, and a filled
+        // band on every row makes a dense trace read as a list of buttons.
         "transition-colors duration-(--duration-fast) ease-out hover:text-primary",
         "focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none",
-        o
+        i
       ),
       children: [
         /* @__PURE__ */ t(
@@ -90,21 +116,21 @@ const j = c(
           {
             "aria-hidden": !0,
             className: "relative z-10 block size-4 shrink-0",
-            children: a ? /* @__PURE__ */ d(C, { children: [
+            children: r ? /* @__PURE__ */ c(R, { children: [
               /* @__PURE__ */ t(
                 "span",
                 {
-                  className: r(
+                  className: n(
                     "absolute inset-0 flex items-center justify-center transition-opacity duration-(--duration-fast) ease-out [&>svg]:size-4 motion-reduce:transition-none",
-                    e && "group-hover/cot-trigger:opacity-0 group-data-[state=open]/cot-trigger:opacity-0"
+                    !e && s && "group-hover/cot-trigger:opacity-0 group-data-[state=open]/cot-trigger:opacity-0"
                   ),
-                  children: a
+                  children: r
                 }
               ),
-              e && /* @__PURE__ */ t(
-                w,
+              !e && s && /* @__PURE__ */ t(
+                M,
                 {
-                  className: r(
+                  className: n(
                     "absolute inset-0 size-4 opacity-0 transition-[opacity,transform] duration-(--duration-fast) ease-out motion-reduce:transition-none",
                     "group-hover/cot-trigger:opacity-100 group-data-[state=open]/cot-trigger:opacity-100",
                     "group-data-[state=open]/cot-trigger:rotate-90"
@@ -114,84 +140,102 @@ const j = c(
             ] }) : /* @__PURE__ */ t("span", { className: "absolute top-1/2 left-1/2 size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-dot bg-current" })
           }
         ),
-        /* @__PURE__ */ t("span", { className: "min-w-0 flex-1", children: i }),
-        n != null && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: n })
+        /* @__PURE__ */ t("span", { className: "min-w-0 flex-1", children: o }),
+        /* @__PURE__ */ c("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+          a != null && /* @__PURE__ */ t("span", { className: "text-xs text-tertiary tabular-nums", children: a }),
+          e && /* @__PURE__ */ t(
+            w,
+            {
+              className: "size-4 shrink-0 text-tertiary transition-transform duration-(--duration-fast) ease-out group-data-[state=open]/cot-trigger:rotate-180 motion-reduce:transition-none",
+              "aria-hidden": !0
+            }
+          )
+        ] })
       ]
     }
   ) })
-), D = c(
-  ({ className: o, children: i, ...a }) => /* @__PURE__ */ t(
-    N,
-    {
-      "data-slot": "chain-of-thought-content",
-      className: r(
-        "overflow-hidden pl-7 pt-2 pb-1 text-foreground outline-none",
-        "data-[state=closed]:pointer-events-none data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none",
-        o
-      ),
-      ...a,
-      children: i
-    }
-  )
-), A = c(
-  ({ className: o, ...i }) => /* @__PURE__ */ t(
+), W = l(
+  ({ className: i, children: o, ...r }) => {
+    const a = S(k);
+    return /* @__PURE__ */ t(T, { forceMount: !0, asChild: !0, ...r, children: /* @__PURE__ */ t(
+      L.div,
+      {
+        "data-slot": "chain-of-thought-content",
+        initial: !1,
+        animate: a ? "open" : "closed",
+        variants: {
+          open: { height: "auto", opacity: 1 },
+          closed: { height: 0, opacity: 0 }
+        },
+        transition: { duration: a ? 0.28 : 0.2, ease: P },
+        className: n(
+          "overflow-hidden text-foreground outline-none",
+          "data-[state=closed]:pointer-events-none",
+          i
+        ),
+        children: /* @__PURE__ */ t("div", { className: "pt-2 pb-1 pl-7", children: o })
+      }
+    ) });
+  }
+), X = l(
+  ({ className: i, ...o }) => /* @__PURE__ */ t(
     "div",
     {
       "data-slot": "chain-of-thought-item",
-      className: r(
+      className: n(
         "relative pl-4 text-base text-secondary",
         "before:absolute before:top-2 before:left-0 before:size-1.5 before:rounded-dot before:bg-current before:content-['']",
-        o
+        i
       ),
-      ...i
+      ...o
     }
   )
-), B = c(
-  ({ className: o, ...i }) => /* @__PURE__ */ t(
+), q = l(
+  ({ className: i, ...o }) => /* @__PURE__ */ t(
     "div",
     {
-      className: r("flex flex-wrap items-center gap-2", o),
-      ...i
+      className: n("flex flex-wrap items-center gap-2", i),
+      ...o
     }
   )
-), F = c(
-  ({ className: o, children: i, ...a }) => /* @__PURE__ */ t(
-    b,
+), G = l(
+  ({ className: i, children: o, ...r }) => /* @__PURE__ */ t(
+    y,
     {
-      className: r("gap-1 font-normal", o),
+      className: n("gap-1 font-normal", i),
       color: "default",
       variant: "soft",
-      ...a,
-      children: i
+      ...r,
+      children: o
     }
   )
-), I = c(
+), J = l(
   ({
-    className: o,
-    title: i,
-    tag: a,
-    meta: n,
+    className: i,
+    title: o,
+    tag: r,
+    meta: a,
     source: e,
     error: s,
     icon: h,
     defaultOpen: m = !1,
-    children: l,
-    ...g
-  }) => /* @__PURE__ */ d(
-    v,
+    children: d,
+    ...p
+  }) => /* @__PURE__ */ c(
+    N,
     {
       "data-slot": "chain-of-thought-evidence",
       "data-error": s != null || void 0,
       defaultOpen: m,
-      className: r("w-full", o),
-      ...g,
+      className: n("w-full", i),
+      ...p,
       children: [
-        /* @__PURE__ */ t(y, { asChild: !0, children: /* @__PURE__ */ d(
+        /* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ c(
           "button",
           {
             type: "button",
             "data-slot": "chain-of-thought-evidence-trigger",
-            className: r(
+            className: n(
               "group/cot-evidence flex min-h-8 w-full cursor-pointer items-center gap-2 rounded-md text-left outline-none",
               "transition-colors duration-(--duration-fast) ease-out hover:text-primary",
               "focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none"
@@ -201,29 +245,29 @@ const j = c(
                 "span",
                 {
                   "aria-hidden": !0,
-                  className: r(
+                  className: n(
                     "shrink-0 [&>svg]:size-3.5",
                     s != null ? "text-danger" : "text-tertiary"
                   ),
-                  children: h ?? (s != null ? /* @__PURE__ */ t(O, {}) : /* @__PURE__ */ t(k, {}))
+                  children: h ?? (s != null ? /* @__PURE__ */ t(j, {}) : /* @__PURE__ */ t(_, {}))
                 }
               ),
-              /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-secondary", children: i }),
-              a != null && /* @__PURE__ */ t(
-                b,
+              /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-secondary", children: o }),
+              r != null && /* @__PURE__ */ t(
+                y,
                 {
                   color: "default",
                   variant: "soft",
                   className: "shrink-0 font-normal tabular-nums",
-                  children: a
+                  children: r
                 }
               ),
-              n != null && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: n }),
+              a != null && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: a }),
               /* @__PURE__ */ t(
-                S,
+                w,
                 {
                   "aria-hidden": !0,
-                  className: r(
+                  className: n(
                     "size-3.5 shrink-0 text-tertiary transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
                     "group-data-[state=open]/cot-evidence:rotate-180"
                   )
@@ -233,16 +277,16 @@ const j = c(
           }
         ) }),
         /* @__PURE__ */ t(
-          N,
+          T,
           {
             "data-slot": "chain-of-thought-evidence-content",
-            className: r(
+            className: n(
               "overflow-hidden outline-none",
               "data-[state=closed]:pointer-events-none data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none"
             ),
-            children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-1.5 pt-1.5", children: [
+            children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-1.5 pt-1.5", children: [
               s != null && /* @__PURE__ */ t("p", { className: "text-xs text-danger", children: s }),
-              l,
+              d,
               e != null && /* @__PURE__ */ t("p", { className: "text-xs text-tertiary", children: e })
             ] })
           }
@@ -250,142 +294,142 @@ const j = c(
       ]
     }
   )
-), L = c(
+), K = l(
   ({
-    className: o,
-    columns: i,
-    rows: a,
-    totalRows: n,
+    className: i,
+    columns: o,
+    rows: r,
+    totalRows: a,
     flag: e,
     ...s
   }) => {
-    const h = n != null && n > a.length, m = (e == null ? void 0 : e.color) ?? "default";
-    return /* @__PURE__ */ d(
+    const h = a != null && a > r.length, m = (e == null ? void 0 : e.color) ?? "default";
+    return /* @__PURE__ */ c(
       "div",
       {
         "data-slot": "chain-of-thought-evidence-table",
-        className: r("overflow-hidden rounded-lg bg-surface", o),
+        className: n("overflow-hidden rounded-lg bg-surface", i),
         ...s,
         children: [
-          /* @__PURE__ */ t("div", { className: "max-h-56 overflow-auto", children: /* @__PURE__ */ d("table", { className: "w-full border-collapse text-xs tabular-nums", children: [
-            /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { className: "text-tertiary", children: i.map((l) => /* @__PURE__ */ t(
+          /* @__PURE__ */ t("div", { className: "max-h-56 overflow-auto", children: /* @__PURE__ */ c("table", { className: "w-full border-collapse text-xs tabular-nums", children: [
+            /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { className: "text-tertiary", children: o.map((d) => /* @__PURE__ */ t(
               "th",
               {
-                className: r(
+                className: n(
                   "sticky top-0 bg-surface px-2.5 py-1.5 font-medium whitespace-nowrap",
-                  l.align === "end" ? "text-right" : "text-left"
+                  d.align === "end" ? "text-right" : "text-left"
                 ),
-                children: l.label
+                children: d.label
               },
-              l.key
+              d.key
             )) }) }),
-            /* @__PURE__ */ t("tbody", { children: a.map((l, g) => {
-              const u = e != null && String(l[e.key]) === String(e.value);
-              return /* @__PURE__ */ t("tr", { className: r(u && "bg-muted"), children: i.map((f, p) => /* @__PURE__ */ t(
+            /* @__PURE__ */ t("tbody", { children: r.map((d, p) => {
+              const u = e != null && String(d[e.key]) === String(e.value);
+              return /* @__PURE__ */ t("tr", { className: n(u && "bg-muted"), children: o.map((g, f) => /* @__PURE__ */ t(
                 "td",
                 {
-                  className: r(
+                  className: n(
                     "px-2.5 py-1 whitespace-nowrap",
-                    f.align === "end" ? "text-right" : "text-left",
-                    p === 0 ? "text-foreground" : "text-secondary",
-                    u && p === 0 && "font-semibold",
-                    u && p === 0 && m === "danger" && "text-danger",
-                    u && p === 0 && m === "warning" && "text-warning"
+                    g.align === "end" ? "text-right" : "text-left",
+                    f === 0 ? "text-foreground" : "text-secondary",
+                    u && f === 0 && "font-semibold",
+                    u && f === 0 && m === "danger" && "text-danger",
+                    u && f === 0 && m === "warning" && "text-warning"
                   ),
-                  children: l[f.key]
+                  children: d[g.key]
                 },
-                f.key
-              )) }, g);
+                g.key
+              )) }, p);
             }) })
           ] }) }),
-          h && /* @__PURE__ */ d("p", { className: "px-2.5 py-1.5 text-xs text-tertiary tabular-nums", children: [
-            a.length,
+          h && /* @__PURE__ */ c("p", { className: "px-2.5 py-1.5 text-xs text-tertiary tabular-nums", children: [
+            r.length,
             " of ",
-            n,
+            a,
             " rows"
           ] })
         ]
       }
     );
   }
-), W = c(
-  ({ className: o, role: i = "list", ...a }) => /* @__PURE__ */ t(
+), Q = l(
+  ({ className: i, role: o = "list", ...r }) => /* @__PURE__ */ t(
     "div",
     {
       "data-slot": "chain-of-thought-metrics",
-      role: i,
-      className: r("flex flex-wrap items-stretch gap-x-6 gap-y-2", o),
-      ...a
+      role: o,
+      className: n("flex flex-wrap items-stretch gap-x-6 gap-y-2", i),
+      ...r
     }
   )
-), X = {
+), V = {
   default: "text-foreground",
   danger: "text-danger",
   warning: "text-warning",
   success: "text-success",
   info: "text-info"
-}, q = c(
+}, Y = l(
   ({
-    className: o,
-    label: i,
-    value: a,
-    sub: n,
+    className: i,
+    label: o,
+    value: r,
+    sub: a,
     color: e = "default",
     role: s = "listitem",
     ...h
-  }) => /* @__PURE__ */ d(
+  }) => /* @__PURE__ */ c(
     "div",
     {
       "data-slot": "chain-of-thought-metric",
       "data-color": e,
       role: s,
-      className: r("min-w-0", o),
+      className: n("min-w-0", i),
       ...h,
       children: [
-        /* @__PURE__ */ t("div", { className: "text-xs text-tertiary", children: i }),
+        /* @__PURE__ */ t("div", { className: "text-xs text-tertiary", children: o }),
         /* @__PURE__ */ t(
           "div",
           {
-            className: r(
+            className: n(
               "text-base font-semibold tabular-nums",
-              X[e]
+              V[e]
             ),
-            children: a
+            children: r
           }
         ),
-        n != null && /* @__PURE__ */ t("div", { className: "text-xs text-tertiary", children: n })
+        a != null && /* @__PURE__ */ t("div", { className: "text-xs text-tertiary", children: a })
       ]
     }
   )
-), G = c(
-  ({ className: o, children: i, caption: a, ...n }) => /* @__PURE__ */ d("div", { className: r("space-y-2", o), ...n, children: [
-    /* @__PURE__ */ t("div", { className: "relative flex max-h-88 items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children: i }),
-    a && /* @__PURE__ */ t("p", { className: "text-xs text-tertiary", children: a })
+), Z = l(
+  ({ className: i, children: o, caption: r, ...a }) => /* @__PURE__ */ c("div", { className: n("space-y-2", i), ...a, children: [
+    /* @__PURE__ */ t("div", { className: "relative flex max-h-88 items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children: o }),
+    r && /* @__PURE__ */ t("p", { className: "text-xs text-tertiary", children: r })
   ] })
 );
-j.displayName = "ChainOfThought";
-M.displayName = "ChainOfThoughtStep";
-_.displayName = "ChainOfThoughtTrigger";
-D.displayName = "ChainOfThoughtContent";
-A.displayName = "ChainOfThoughtItem";
-B.displayName = "ChainOfThoughtSearchResults";
-F.displayName = "ChainOfThoughtSearchResult";
-I.displayName = "ChainOfThoughtEvidence";
-L.displayName = "ChainOfThoughtEvidenceTable";
-W.displayName = "ChainOfThoughtMetrics";
-q.displayName = "ChainOfThoughtMetric";
-G.displayName = "ChainOfThoughtImage";
+B.displayName = "ChainOfThought";
+F.displayName = "ChainOfThoughtStep";
+U.displayName = "ChainOfThoughtTrigger";
+W.displayName = "ChainOfThoughtContent";
+X.displayName = "ChainOfThoughtItem";
+q.displayName = "ChainOfThoughtSearchResults";
+G.displayName = "ChainOfThoughtSearchResult";
+J.displayName = "ChainOfThoughtEvidence";
+K.displayName = "ChainOfThoughtEvidenceTable";
+Q.displayName = "ChainOfThoughtMetrics";
+Y.displayName = "ChainOfThoughtMetric";
+Z.displayName = "ChainOfThoughtImage";
 export {
-  j as ChainOfThought,
-  D as ChainOfThoughtContent,
-  I as ChainOfThoughtEvidence,
-  L as ChainOfThoughtEvidenceTable,
-  G as ChainOfThoughtImage,
-  A as ChainOfThoughtItem,
-  q as ChainOfThoughtMetric,
-  W as ChainOfThoughtMetrics,
-  F as ChainOfThoughtSearchResult,
-  B as ChainOfThoughtSearchResults,
-  M as ChainOfThoughtStep,
-  _ as ChainOfThoughtTrigger
+  B as ChainOfThought,
+  W as ChainOfThoughtContent,
+  J as ChainOfThoughtEvidence,
+  K as ChainOfThoughtEvidenceTable,
+  Z as ChainOfThoughtImage,
+  X as ChainOfThoughtItem,
+  Y as ChainOfThoughtMetric,
+  Q as ChainOfThoughtMetrics,
+  G as ChainOfThoughtSearchResult,
+  q as ChainOfThoughtSearchResults,
+  F as ChainOfThoughtStep,
+  U as ChainOfThoughtTrigger
 };

package/components/ai-elements/index.d.ts

@@ -1,3 +1,4 @@
+export * from './agent-trace';
 export * from './chain-of-thought';
 export * from './chart';
 export * from './inline-citation';

package/components/ai-elements/research-activity.d.ts

@@ -28,6 +28,23 @@ export interface ResearchActivityProps extends Omit<React.HTMLAttributes<HTMLDiv
      * otherwise scroll away exactly when the run is still moving.
      */
     sticky?: boolean;
+    /**
+     * Show the disclosure chevron. Turn it off when the consumer controls `open`
+     * and the line is a status readout rather than a toggle — a chevron that
+     * does nothing is a false affordance.
+     */
+    collapsible?: boolean;
+    /**
+     * Where the summary/live line sits when the trace is open. `"bottom"` puts
+     * it directly beneath the steps — while running that is where the next step
+     * appears, and on completion it stays put rather than jumping back over the
+     * trace it just narrated. A CLOSED trace always shows its line at the top:
+     * it is then standing in for the whole trace, so it has to sit where the
+     * trace would be.
+     *
+     * Visual order only — the trigger stays before its content in the DOM.
+     */
+    activityPlacement?: "top" | "bottom";
     /** Controlled disclosure of the trace. */
     open?: boolean;
     /** Initial disclosure state. */