@actioneer/ads 0.5.2 → 0.5.3

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

@@ -1,66 +1,66 @@
 "use client";
-import { jsx as t, jsxs as c, Fragment as R } from "react/jsx-runtime";
+import { jsx as e, jsxs as l, Fragment as z } 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 { ChevronRight as R, ChevronDown as w, WarningCircle as j, Database as M } 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 { createContext as O, memo as d, useContext as _, 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(
+const S = O(!1), k = O("tree"), B = d(
   ({
     className: i,
-    role: o = "list",
-    connector: r = "rail",
-    children: a,
-    ...e
-  }) => /* @__PURE__ */ t(
+    role: r = "list",
+    connector: a = "tree",
+    children: o,
+    ...t
+  }) => /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "chain-of-thought",
-      role: o,
+      role: r,
       className: n(
         "w-full",
-        r === "rail" && [
+        a === "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
       ),
-      ...e,
-      children: /* @__PURE__ */ t(E.Provider, { value: r, children: a })
+      ...t,
+      children: /* @__PURE__ */ e(k.Provider, { value: a, children: o })
     }
   )
-), F = l(
+), F = d(
   ({
     className: i,
-    defaultOpen: o,
-    open: r,
-    onOpenChange: a,
-    status: e = "complete",
+    defaultOpen: r,
+    open: a,
+    onOpenChange: o,
+    status: t = "complete",
     role: s = "listitem",
     "aria-busy": h,
     children: m,
-    ...d
+    ...c
   }) => {
-    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;
+    const p = _(k), u = a !== void 0, [g, f] = D(
+      r ?? t === "active"
+    ), x = A(t), E = x.current !== "active" && t === "active", v = u ? a : E || 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(
+      const b = x.current;
+      x.current = t, !(b === "active" || t !== "active") && (u || f(!0), o == null || o(!0));
+    }, [u, o, t]), /* @__PURE__ */ e(
       N,
       {
         "data-slot": "chain-of-thought-step",
-        "data-status": e,
+        "data-status": t,
         open: v,
-        onOpenChange: (x) => {
-          u || f(x), a == null || a(x);
+        onOpenChange: (b) => {
+          u || f(b), o == null || o(b);
         },
         role: s,
-        "aria-current": e === "active" ? "step" : void 0,
-        "aria-busy": h ?? (e === "active" || void 0),
+        "aria-current": t === "active" ? "step" : void 0,
+        "aria-busy": h ?? (t === "active" || void 0),
         className: n(
           "group/cot-step relative pb-2",
           // Connector rail: a 16px segment centred in the 28px gap between a
@@ -70,34 +70,45 @@ const k = O(!1), E = O("rail"), B = l(
           // 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.
+          // The rail sits at the container's left edge; the PARENT indents
+          // the group so that edge lands on its icon's centre (TaskContent
+          // and ResearchActivity both use ml-2 for a size-4 icon), and sets
+          // --tree-rail-lead so the FIRST row's rail climbs the gap to hang
+          // from that icon instead of floating below it.
           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",
+            "before:absolute before:top-0 before:bottom-0 before:left-0 before:border-l before:border-border-strong before:content-['']",
+            "first:before:top-[calc(-1*var(--tree-rail-lead,0px))]",
+            // The LAST row's rail stops exactly where its elbow begins (2px
+            // in) instead of disappearing — hiding it left a 2px notch above
+            // every final elbow, and erased the climb entirely on a
+            // single-step trace (first AND last). bottom is 100%-anchored so
+            // it composes with the first-row climb.
+            "last:before:bottom-[calc(100%-0.125rem)]",
             // 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",
+          t === "complete" && "text-secondary",
+          t === "active" && "text-secondary",
+          t === "pending" && "text-tertiary/60",
+          t === "error" && "text-danger",
           i
         ),
-        ...d,
-        children: /* @__PURE__ */ t(k.Provider, { value: v, children: m })
+        ...c,
+        children: /* @__PURE__ */ e(S.Provider, { value: v, children: m })
       }
     );
   }
-), U = l(
+), U = d(
   ({
     className: i,
-    children: o,
-    leftIcon: r,
-    endContent: a,
-    caret: e = !0,
+    children: r,
+    leftIcon: a,
+    endContent: o,
+    caret: t = !0,
     swapIconOnHover: s = !0,
     ...h
-  }) => /* @__PURE__ */ t(C, { asChild: !0, ...h, children: /* @__PURE__ */ c(
+  }) => /* @__PURE__ */ e(C, { asChild: !0, ...h, children: /* @__PURE__ */ l(
     "button",
     {
       type: "button",
@@ -111,24 +122,24 @@ const k = O(!1), E = O("rail"), B = l(
         i
       ),
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ e(
           "span",
           {
             "aria-hidden": !0,
             className: "relative z-10 block size-4 shrink-0",
-            children: r ? /* @__PURE__ */ c(R, { children: [
-              /* @__PURE__ */ t(
+            children: a ? /* @__PURE__ */ l(z, { children: [
+              /* @__PURE__ */ e(
                 "span",
                 {
                   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 && s && "group-hover/cot-trigger:opacity-0 group-data-[state=open]/cot-trigger:opacity-0"
+                    !t && s && "group-hover/cot-trigger:opacity-0 group-data-[state=open]/cot-trigger:opacity-0"
                   ),
-                  children: r
+                  children: a
                 }
               ),
-              !e && s && /* @__PURE__ */ t(
-                M,
+              !t && s && /* @__PURE__ */ e(
+                R,
                 {
                   className: n(
                     "absolute inset-0 size-4 opacity-0 transition-[opacity,transform] duration-(--duration-fast) ease-out motion-reduce:transition-none",
@@ -137,13 +148,13 @@ const k = O(!1), E = O("rail"), B = l(
                   )
                 }
               )
-            ] }) : /* @__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__ */ e("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: 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(
+        /* @__PURE__ */ e("span", { className: "min-w-0 flex-1", children: r }),
+        /* @__PURE__ */ l("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+          o != null && /* @__PURE__ */ e("span", { className: "text-xs text-tertiary tabular-nums", children: o }),
+          t && /* @__PURE__ */ e(
             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",
@@ -154,31 +165,48 @@ const k = O(!1), E = O("rail"), B = l(
       ]
     }
   ) })
-), W = l(
-  ({ className: i, children: o, ...r }) => {
-    const a = S(k);
-    return /* @__PURE__ */ t(T, { forceMount: !0, asChild: !0, ...r, children: /* @__PURE__ */ t(
+), W = d(
+  ({ className: i, children: r, rail: a = !0, ...o }) => {
+    const t = _(S);
+    return /* @__PURE__ */ e(T, { forceMount: !0, asChild: !0, ...o, children: /* @__PURE__ */ e(
       L.div,
       {
         "data-slot": "chain-of-thought-content",
         initial: !1,
-        animate: a ? "open" : "closed",
+        animate: t ? "open" : "closed",
         variants: {
           open: { height: "auto", opacity: 1 },
           closed: { height: 0, opacity: 0 }
         },
-        transition: { duration: a ? 0.28 : 0.2, ease: P },
+        transition: { duration: t ? 0.28 : 0.2, ease: P },
         className: n(
-          "overflow-hidden text-foreground outline-none",
+          "overflow-hidden text-secondary outline-none",
           "data-[state=closed]:pointer-events-none",
           i
         ),
-        children: /* @__PURE__ */ t("div", { className: "pt-2 pb-1 pl-7", children: o })
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            "data-rail": a || void 0,
+            className: n(
+              "relative pt-2 pb-1 pl-7",
+              a && [
+                "has-[[data-slot=chain-of-thought-evidence]]:before:absolute has-[[data-slot=chain-of-thought-evidence]]:before:left-2 has-[[data-slot=chain-of-thought-evidence]]:before:top-0 has-[[data-slot=chain-of-thought-evidence]]:before:bottom-1 has-[[data-slot=chain-of-thought-evidence]]:before:border-l has-[[data-slot=chain-of-thought-evidence]]:before:border-border-strong has-[[data-slot=chain-of-thought-evidence]]:before:content-['']",
+                // The rail ends ON the last branch: when the trailing element
+                // is a collapsed evidence row (min-h-8 = 32px + the pb-1),
+                // stop at its top and let its elbow draw the final curve —
+                // a rail running past the last elbow is a line to nowhere.
+                "has-[[data-slot=chain-of-thought-evidence][data-state=closed]:last-child]:before:bottom-9"
+              ]
+            ),
+            children: r
+          }
+        )
       }
     ) });
   }
-), X = l(
-  ({ className: i, ...o }) => /* @__PURE__ */ t(
+), X = d(
+  ({ className: i, ...r }) => /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "chain-of-thought-item",
@@ -187,50 +215,60 @@ const k = O(!1), E = O("rail"), B = l(
         "before:absolute before:top-2 before:left-0 before:size-1.5 before:rounded-dot before:bg-current before:content-['']",
         i
       ),
-      ...o
+      ...r
     }
   )
-), q = l(
-  ({ className: i, ...o }) => /* @__PURE__ */ t(
+), q = d(
+  ({ className: i, ...r }) => /* @__PURE__ */ e(
     "div",
     {
       className: n("flex flex-wrap items-center gap-2", i),
-      ...o
+      ...r
     }
   )
-), G = l(
-  ({ className: i, children: o, ...r }) => /* @__PURE__ */ t(
+), G = d(
+  ({ className: i, children: r, ...a }) => /* @__PURE__ */ e(
     y,
     {
       className: n("gap-1 font-normal", i),
       color: "default",
       variant: "soft",
-      ...r,
-      children: o
+      ...a,
+      children: r
     }
   )
-), J = l(
+), J = d(
   ({
     className: i,
-    title: o,
-    tag: r,
-    meta: a,
-    source: e,
+    title: r,
+    tag: a,
+    meta: o,
+    source: t,
     error: s,
     icon: h,
     defaultOpen: m = !1,
-    children: d,
+    children: c,
     ...p
-  }) => /* @__PURE__ */ c(
+  }) => /* @__PURE__ */ l(
     N,
     {
       "data-slot": "chain-of-thought-evidence",
       "data-error": s != null || void 0,
       defaultOpen: m,
-      className: n("w-full", i),
+      className: n(
+        "w-full",
+        // Inside rail-enabled step content, an evidence row is a real CHILD
+        // of the step: it hangs off the descending rail with its own elbow,
+        // terminating at the trigger icon's centre (min-h-8 row, size-3.5
+        // icon → 16px = h-4). The elbow spans from the rail (20px left of
+        // the row) to 4px short of the icon, same as every other branch.
+        "[[data-rail]_&]:relative",
+        "[[data-rail]_&]:before:absolute [[data-rail]_&]:before:content-[''] [[data-rail]_&]:before:-left-5 [[data-rail]_&]:before:top-0 [[data-rail]_&]:before:h-4 [[data-rail]_&]:before:w-4 [[data-rail]_&]:before:rounded-bl-[9px] [[data-rail]_&]:before:border-b [[data-rail]_&]:before:border-l [[data-rail]_&]:before:border-border-strong",
+        i
+      ),
       ...p,
       children: [
-        /* @__PURE__ */ t(C, { asChild: !0, children: /* @__PURE__ */ c(
+        /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ l(
           "button",
           {
             type: "button",
@@ -241,7 +279,7 @@ const k = O(!1), E = O("rail"), B = l(
               "focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none"
             ),
             children: [
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ e(
                 "span",
                 {
                   "aria-hidden": !0,
@@ -249,21 +287,21 @@ const k = O(!1), E = O("rail"), B = l(
                     "shrink-0 [&>svg]:size-3.5",
                     s != null ? "text-danger" : "text-tertiary"
                   ),
-                  children: h ?? (s != null ? /* @__PURE__ */ t(j, {}) : /* @__PURE__ */ t(_, {}))
+                  children: h ?? (s != null ? /* @__PURE__ */ e(j, {}) : /* @__PURE__ */ e(M, {}))
                 }
               ),
-              /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-secondary", children: o }),
-              r != null && /* @__PURE__ */ t(
+              /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-base font-medium text-secondary", children: r }),
+              a != null && /* @__PURE__ */ e(
                 y,
                 {
                   color: "default",
                   variant: "soft",
                   className: "shrink-0 font-normal tabular-nums",
-                  children: r
+                  children: a
                 }
               ),
-              a != null && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: a }),
-              /* @__PURE__ */ t(
+              o != null && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: o }),
+              /* @__PURE__ */ e(
                 w,
                 {
                   "aria-hidden": !0,
@@ -276,7 +314,7 @@ const k = O(!1), E = O("rail"), B = l(
             ]
           }
         ) }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ e(
           T,
           {
             "data-slot": "chain-of-thought-evidence-content",
@@ -284,127 +322,139 @@ const k = O(!1), E = O("rail"), B = l(
               "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__ */ 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 }),
-              d,
-              e != null && /* @__PURE__ */ t("p", { className: "text-xs text-tertiary", children: e })
+            children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-1.5 pt-1.5", children: [
+              s != null && /* @__PURE__ */ e("p", { className: "text-xs text-danger", children: s }),
+              c,
+              t != null && /* @__PURE__ */ e("p", { className: "text-xs text-tertiary", children: t })
             ] })
           }
         )
       ]
     }
   )
-), K = l(
+), K = d(
   ({
     className: i,
-    columns: o,
-    rows: r,
-    totalRows: a,
-    flag: e,
+    columns: r,
+    rows: a,
+    totalRows: o,
+    flag: t,
     ...s
   }) => {
-    const h = a != null && a > r.length, m = (e == null ? void 0 : e.color) ?? "default";
-    return /* @__PURE__ */ c(
+    const h = o != null && o > a.length, m = (t == null ? void 0 : t.color) ?? "default";
+    return /* @__PURE__ */ l(
       "div",
       {
         "data-slot": "chain-of-thought-evidence-table",
         className: n("overflow-hidden rounded-lg bg-surface", i),
         ...s,
         children: [
-          /* @__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(
+          /* @__PURE__ */ e("div", { className: "max-h-56 overflow-auto", children: /* @__PURE__ */ l("table", { className: "w-full border-collapse text-xs tabular-nums", children: [
+            /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { className: "text-tertiary", children: r.map((c) => /* @__PURE__ */ e(
               "th",
               {
                 className: n(
                   "sticky top-0 bg-surface px-2.5 py-1.5 font-medium whitespace-nowrap",
-                  d.align === "end" ? "text-right" : "text-left"
+                  c.align === "end" ? "text-right" : "text-left"
                 ),
-                children: d.label
+                children: c.label
               },
-              d.key
+              c.key
             )) }) }),
-            /* @__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(
+            /* @__PURE__ */ e("tbody", { children: a.map((c, p) => {
+              const u = t != null && String(c[t.key]) === String(t.value);
+              return /* @__PURE__ */ e("tr", { className: n(u && "bg-muted"), children: r.map((g, f) => /* @__PURE__ */ e(
                 "td",
                 {
                   className: n(
                     "px-2.5 py-1 whitespace-nowrap",
                     g.align === "end" ? "text-right" : "text-left",
-                    f === 0 ? "text-foreground" : "text-secondary",
+                    f === 0 ? "text-secondary" : "text-tertiary",
                     u && f === 0 && "font-semibold",
                     u && f === 0 && m === "danger" && "text-danger",
                     u && f === 0 && m === "warning" && "text-warning"
                   ),
-                  children: d[g.key]
+                  children: c[g.key]
                 },
                 g.key
               )) }, p);
             }) })
           ] }) }),
-          h && /* @__PURE__ */ c("p", { className: "px-2.5 py-1.5 text-xs text-tertiary tabular-nums", children: [
-            r.length,
+          h && /* @__PURE__ */ l("p", { className: "px-2.5 py-1.5 text-xs text-tertiary tabular-nums", children: [
+            a.length,
             " of ",
-            a,
+            o,
             " rows"
           ] })
         ]
       }
     );
   }
-), Q = l(
-  ({ className: i, role: o = "list", ...r }) => /* @__PURE__ */ t(
+), Q = d(
+  ({ className: i, role: r = "list", ...a }) => /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "chain-of-thought-metrics",
-      role: o,
-      className: n("flex flex-wrap items-stretch gap-x-6 gap-y-2", i),
-      ...r
+      role: r,
+      className: n(
+        "flex flex-col gap-2 rounded-lg bg-muted px-4 py-3",
+        i
+      ),
+      ...a
     }
   )
 ), V = {
-  default: "text-foreground",
+  default: "text-secondary",
   danger: "text-danger",
   warning: "text-warning",
   success: "text-success",
   info: "text-info"
-}, Y = l(
+}, Y = d(
   ({
     className: i,
-    label: o,
-    value: r,
-    sub: a,
-    color: e = "default",
+    label: r,
+    value: a,
+    sub: o,
+    color: t = "default",
     role: s = "listitem",
     ...h
-  }) => /* @__PURE__ */ c(
+  }) => /* @__PURE__ */ l(
     "div",
     {
       "data-slot": "chain-of-thought-metric",
-      "data-color": e,
+      "data-color": t,
       role: s,
-      className: n("min-w-0", i),
+      className: n(
+        "flex min-w-0 items-baseline justify-between gap-6",
+        i
+      ),
       ...h,
       children: [
-        /* @__PURE__ */ t("div", { className: "text-xs text-tertiary", children: o }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ l("div", { className: "min-w-0 text-xs text-tertiary", children: [
+          r,
+          o != null && /* @__PURE__ */ l("span", { children: [
+            " (",
+            o,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
           "div",
           {
             className: n(
-              "text-base font-semibold tabular-nums",
-              V[e]
+              "shrink-0 text-base font-semibold tabular-nums",
+              V[t]
             ),
-            children: r
+            children: a
           }
-        ),
-        a != null && /* @__PURE__ */ t("div", { 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 })
+), Z = d(
+  ({ className: i, children: r, caption: a, ...o }) => /* @__PURE__ */ l("div", { className: n("space-y-2", i), ...o, children: [
+    /* @__PURE__ */ e("div", { className: "relative flex max-h-88 items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children: r }),
+    a && /* @__PURE__ */ e("p", { className: "text-xs text-tertiary", children: a })
   ] })
 );
 B.displayName = "ChainOfThought";