@actioneer/ads 0.2.3 → 0.3.0

package/components/ai-elements/research-activity.js

@@ -0,0 +1,260 @@
+"use client";
+import { jsxs as t, jsx as e, Fragment as K } from "react/jsx-runtime";
+import * as s from "react";
+import { MotionConfig as Y, AnimatePresence as Z, motion as C } from "motion/react";
+import { cva as I } from "class-variance-authority";
+import { Collapsible as O, CollapsibleTrigger as j, CollapsibleContent as ee } from "../collapsible.js";
+import { Spinner as L } from "../spinner.js";
+import { Sparkles as M, ChevronDown as T } from "../../lib/icons.js";
+import { EASE_OUT as V } from "../../lib/motion.js";
+import { cn as m } from "../../lib/cn.js";
+import { Shimmer as D } from "./shimmer.js";
+const re = I("w-full", {
+  variants: {
+    status: {
+      active: "text-foreground",
+      complete: "text-secondary"
+    }
+  }
+}), te = {
+  initial: {
+    opacity: 0,
+    transform: "translate3d(0, 7px, 0)",
+    filter: "blur(2px)"
+  },
+  animate: {
+    opacity: 1,
+    transform: "translate3d(0, 0, 0)",
+    filter: "blur(0px)",
+    transition: { duration: 0.18, ease: V }
+  },
+  exit: {
+    opacity: 0,
+    transform: "translate3d(0, -7px, 0)",
+    filter: "blur(2px)",
+    transition: { duration: 0.12, ease: V }
+  }
+};
+function F({
+  elapsed: r,
+  firstInsight: n,
+  sourceCount: d
+}) {
+  return /* @__PURE__ */ t("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+    /* @__PURE__ */ t("span", { children: [
+      "Researched ",
+      d,
+      " ",
+      d === 1 ? "source" : "sources"
+    ] }),
+    /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "text-tertiary", children: "·" }),
+    /* @__PURE__ */ e("span", { className: "text-xs text-tertiary tabular-nums", children: r }),
+    n != null && /* @__PURE__ */ t(K, { children: [
+      /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "text-tertiary", children: "·" }),
+      /* @__PURE__ */ t("span", { className: "text-xs text-tertiary", children: [
+        "first insight",
+        " ",
+        /* @__PURE__ */ e("span", { className: "tabular-nums", children: n })
+      ] })
+    ] })
+  ] });
+}
+const ae = s.forwardRef(
+  ({
+    status: r,
+    elapsed: n,
+    sourceCount: d,
+    firstInsight: N,
+    sticky: b = !1,
+    activity: o,
+    activityKey: P,
+    stepIndex: g,
+    stepCount: R,
+    summary: f,
+    open: w,
+    defaultOpen: U = !1,
+    onOpenChange: a,
+    children: _,
+    className: $,
+    role: q,
+    "aria-label": B,
+    "aria-busy": G,
+    ...H
+  }, J) => {
+    const c = w !== void 0, i = o != null, [Q, p] = s.useState(
+      !i && r === "active" || U
+    ), k = s.useRef(r), h = s.useRef(!1), S = s.useRef(null), x = s.useRef(null), y = c ? w : Q, v = !i && r === "active" || y;
+    s.useLayoutEffect(() => {
+      var E, A;
+      const u = k.current;
+      if (k.current = r, r === "active") {
+        u !== "active" && (h.current = !1), u !== "active" && !i && !c && p(!0);
+        return;
+      }
+      if (u !== "active" || h.current && i) return;
+      const z = document.activeElement;
+      z && ((E = S.current) != null && E.contains(z)) && ((A = x.current) == null || A.focus()), c || p(!1), a == null || a(!1);
+    }, [i, c, a, r]);
+    const W = s.useCallback(
+      (u) => {
+        !i && r !== "complete" || (h.current = !0, c || p(u), a == null || a(u));
+      },
+      [i, c, a, r]
+    ), l = r === "active", X = l ? `activity-${P ?? (typeof o == "string" ? o : "current")}` : "summary";
+    return /* @__PURE__ */ t(
+      O,
+      {
+        ref: J,
+        open: v,
+        onOpenChange: W,
+        role: q ?? "region",
+        "aria-label": B ?? "Research activity",
+        "aria-busy": G ?? (l || void 0),
+        ...H,
+        "data-slot": "research-activity",
+        "data-status": r,
+        className: m(re({ status: r }), $),
+        children: [
+          /* @__PURE__ */ e("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: l ? "Research in progress" : "Research complete" }),
+          i ? /* @__PURE__ */ e(j, { asChild: !0, children: /* @__PURE__ */ t(
+            "button",
+            {
+              ref: x,
+              type: "button",
+              "data-slot": "research-activity-trigger",
+              className: m(
+                "group/research-trigger flex min-h-9 w-full cursor-pointer items-center gap-2.5 rounded-sm py-1 text-left text-sm outline-none",
+                "transition-[color,transform] duration-(--duration-fast) ease-out hover:text-primary active:scale-(--scale-press)",
+                "focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none",
+                b && "sticky top-0 z-10 bg-background"
+              ),
+              children: [
+                /* @__PURE__ */ t("span", { className: "sr-only", children: [
+                  v ? "Collapse" : "Expand",
+                  " research activity:",
+                  " "
+                ] }),
+                /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "flex size-4 shrink-0 items-center justify-center", children: l ? /* @__PURE__ */ e(L, { size: "sm", color: "current", role: "presentation" }) : /* @__PURE__ */ e(M, { className: "size-4" }) }),
+                /* @__PURE__ */ e(Y, { reducedMotion: "user", children: /* @__PURE__ */ e("span", { className: "relative h-5 min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ e(Z, { initial: !1, children: /* @__PURE__ */ e(
+                  C.span,
+                  {
+                    variants: te,
+                    initial: "initial",
+                    animate: "animate",
+                    exit: "exit",
+                    className: "absolute inset-0 flex items-center truncate whitespace-nowrap",
+                    children: l ? typeof o == "string" ? /* @__PURE__ */ e(D, { as: "span", className: "truncate text-sm", children: o }) : o : f !== void 0 ? f : /* @__PURE__ */ e(
+                      F,
+                      {
+                        elapsed: n,
+                        firstInsight: N,
+                        sourceCount: d
+                      }
+                    )
+                  },
+                  X
+                ) }) }) }),
+                l && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: [
+                  g != null && R != null && /* @__PURE__ */ t(K, { children: [
+                    /* @__PURE__ */ e("span", { className: "sr-only", children: "Step " }),
+                    g,
+                    " of ",
+                    R,
+                    /* @__PURE__ */ e("span", { "aria-hidden": !0, children: " · " })
+                  ] }),
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: "Elapsed " }),
+                  n
+                ] }),
+                /* @__PURE__ */ e(
+                  T,
+                  {
+                    "aria-hidden": !0,
+                    className: m(
+                      "size-4 shrink-0 text-tertiary transition-transform duration-(--duration-normal) ease-out motion-reduce:transition-none",
+                      v && "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ) }) : l ? /* @__PURE__ */ t(
+            "div",
+            {
+              "data-slot": "research-activity-header",
+              className: "flex min-h-9 w-full items-center gap-2.5 py-1 text-left",
+              children: [
+                /* @__PURE__ */ e(
+                  L,
+                  {
+                    size: "sm",
+                    color: "current",
+                    role: "presentation",
+                    "aria-hidden": !0
+                  }
+                ),
+                /* @__PURE__ */ e(D, { as: "span", className: "text-sm", children: "Researching…" }),
+                /* @__PURE__ */ t("span", { className: "ml-auto shrink-0 text-xs text-tertiary tabular-nums", children: [
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: "Elapsed " }),
+                  n
+                ] })
+              ]
+            }
+          ) : /* @__PURE__ */ e(j, { asChild: !0, children: /* @__PURE__ */ t(
+            "button",
+            {
+              ref: x,
+              type: "button",
+              "data-slot": "research-activity-trigger",
+              className: m(
+                "group/research-trigger flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-sm py-1 text-left text-sm outline-none",
+                "transition-[color,transform] duration-(--duration-fast) ease-out hover:text-primary active:scale-(--scale-press)",
+                "focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none",
+                b && "sticky top-0 z-10 bg-background"
+              ),
+              children: [
+                /* @__PURE__ */ t("span", { className: "sr-only", children: [
+                  y ? "Collapse" : "Expand",
+                  " research activity:",
+                  " "
+                ] }),
+                /* @__PURE__ */ e(M, { "aria-hidden": !0, className: "size-4 shrink-0" }),
+                /* @__PURE__ */ e("span", { className: "min-w-0 flex-1", children: f !== void 0 ? f : /* @__PURE__ */ e(
+                  F,
+                  {
+                    elapsed: n,
+                    firstInsight: N,
+                    sourceCount: d
+                  }
+                ) }),
+                /* @__PURE__ */ e(
+                  T,
+                  {
+                    "aria-hidden": !0,
+                    className: m(
+                      "size-4 shrink-0 text-tertiary transition-transform duration-(--duration-normal) ease-out motion-reduce:transition-none",
+                      y && "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            ee,
+            {
+              ref: S,
+              forceMount: !0,
+              "data-slot": "research-activity-content",
+              className: "mt-3 overflow-hidden text-foreground outline-none data-[state=closed]:hidden",
+              children: _
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ae.displayName = "ResearchActivity";
+export {
+  ae as ResearchActivity
+};

package/components/ai-elements/task-progress.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as a, jsxs as n, Fragment as q } from "react/jsx-runtime";
-import * as l from "react";
+import { jsx as t, jsxs as n, Fragment as q } from "react/jsx-runtime";
+import * as i from "react";
 import { cva as C } from "class-variance-authority";
 import { Collapsible as B, CollapsibleTrigger as G, CollapsibleContent as H } from "../collapsible.js";
 import { Spinner as J } from "../spinner.js";
 import { ChevronDown as K, Check as M, Clock as Q } from "../../lib/icons.js";
-import { cn as o } from "../../lib/cn.js";
+import { cn as l } from "../../lib/cn.js";
 const U = C(
-  "w-full overflow-hidden rounded-2xl bg-card text-foreground",
+  "w-full overflow-hidden rounded-2xl bg-card text-foreground before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[linear-gradient(to_bottom,var(--border-strong)_0%,transparent_100%)] before:p-px before:content-[''] before:[mask:linear-gradient(var(--foreground)_0_0)_content-box,linear-gradient(var(--foreground)_0_0)] before:[mask-composite:exclude]!",
   {
     variants: {
       isSticky: {
@@ -20,7 +20,10 @@ const U = C(
     }
   }
 ), X = C(
-  "flex w-full flex-col rounded-2xl bg-transparent [&_.aui-composer-root]:relative [&_.aui-composer-root]:z-10 [&_.aui-composer-root]:-mt-px",
+  // The composer must sit flush under the progress bar: kill its standalone
+  // entrance animation (a mid-flight slide-in reads as a gap between the two
+  // surfaces) and square the shell's top corners to butt-joint the bar.
+  "flex w-full flex-col rounded-2xl bg-transparent [&_.aui-composer-root]:relative [&_.aui-composer-root]:z-10 [&_.aui-composer-root]:-mt-px [&_.aui-composer-root]:animate-none [&_.aui-composer-root>*:first-child]:rounded-t-none",
   {
     variants: {
       isSticky: {
@@ -32,31 +35,31 @@ const U = C(
       isSticky: !0
     }
   }
-), w = l.createContext(!1), Y = l.forwardRef(({ className: t, isSticky: s, ...d }, f) => /* @__PURE__ */ a(w.Provider, { value: !0, children: /* @__PURE__ */ a(
+), w = i.createContext(!1), Y = i.forwardRef(({ className: a, isSticky: r, ...d }, f) => /* @__PURE__ */ t(w.Provider, { value: !0, children: /* @__PURE__ */ t(
   "div",
   {
     ref: f,
     "data-slot": "task-progress-dock",
-    className: o(X({ isSticky: s }), t),
+    className: l(X({ isSticky: r }), a),
     ...d
   }
 ) }));
 Y.displayName = "TaskProgressDock";
-function y({ status: t }) {
+function y({ status: a }) {
   return /* @__PURE__ */ n(
     "span",
     {
       "aria-hidden": !0,
-      className: o(
+      className: l(
         "flex size-5 shrink-0 items-center justify-center",
-        t === "complete" && "text-success",
-        t === "active" && "text-info",
-        t === "pending" && "text-tertiary"
+        a === "complete" && "text-success",
+        a === "active" && "text-info",
+        a === "pending" && "text-tertiary"
       ),
       children: [
-        t === "complete" && /* @__PURE__ */ a(M, { className: "size-4", strokeWidth: 2 }),
-        t === "active" && /* @__PURE__ */ a(J, { size: "sm", color: "current", role: "presentation", "aria-hidden": !0 }),
-        t === "pending" && /* @__PURE__ */ a(Q, { className: "size-4" })
+        a === "complete" && /* @__PURE__ */ t(M, { className: "size-4", strokeWidth: 2 }),
+        a === "active" && /* @__PURE__ */ t(J, { size: "sm", color: "current", role: "presentation", "aria-hidden": !0 }),
+        a === "pending" && /* @__PURE__ */ t(Q, { className: "size-4" })
       ]
     }
   );
@@ -66,86 +69,86 @@ const Z = {
   active: "In progress",
   pending: "Pending"
 };
-function N({ elapsed: t }) {
-  return t ? /* @__PURE__ */ n("span", { className: "flex shrink-0 items-center gap-3 text-xs text-tertiary tabular-nums", children: [
-    /* @__PURE__ */ a("span", { "aria-hidden": !0, className: "h-4 w-px bg-border" }),
-    /* @__PURE__ */ a("span", { "aria-label": `Elapsed ${t}`, children: t })
+function N({ elapsed: a }) {
+  return a ? /* @__PURE__ */ n("span", { className: "flex shrink-0 items-center gap-3 text-xs text-tertiary tabular-nums", children: [
+    /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "h-4 w-px bg-border" }),
+    /* @__PURE__ */ t("span", { "aria-label": `Elapsed ${a}`, children: a })
   ] }) : null;
 }
-const O = l.forwardRef(
+const O = i.forwardRef(
   ({
-    className: t,
-    steps: s,
+    className: a,
+    steps: r,
     open: d,
     defaultOpen: f = !1,
     onOpenChange: u,
     title: c = "Task progress",
-    summary: P,
-    emptyLabel: I = "No task steps",
-    isSticky: T,
-    role: $,
-    "aria-label": z,
-    "aria-busy": D,
-    ...S
-  }, V) => {
-    const b = l.useContext(w), x = d !== void 0, [j, E] = l.useState(f), m = x ? d : j, i = s.findIndex((e) => e.status === "active"), p = s.reduce(
+    summary: _,
+    emptyLabel: P = "No task steps",
+    isSticky: I,
+    role: T,
+    "aria-label": $,
+    "aria-busy": z,
+    ...D
+  }, S) => {
+    const g = i.useContext(w), b = d !== void 0, [V, j] = i.useState(f), m = b ? d : V, o = r.findIndex((e) => e.status === "active"), p = r.reduce(
       (e, F, W) => F.status === "complete" ? W : e,
       -1
-    ), R = s.findIndex(
+    ), E = r.findIndex(
       (e) => e.status === "pending"
-    ), h = i >= 0 ? i : p >= 0 ? p : R, r = h >= 0 ? s[h] : void 0, g = i >= 0 ? i + 1 : p >= 0 ? p + 1 : 0, _ = s.filter(
+    ), h = o >= 0 ? o : p >= 0 ? p : E, s = h >= 0 ? r[h] : void 0, x = o >= 0 ? o + 1 : p >= 0 ? p + 1 : 0, R = r.filter(
       (e) => e.status === "pending"
-    ).length, k = s.length > 0 && s.every((e) => e.status === "complete"), A = i >= 0 ? "active" : k ? "complete" : "pending", v = r ? r.accessibilityLabel ?? (typeof r.label == "string" ? r.label : "") : "", L = l.useCallback(
+    ).length, v = r.length > 0 && r.every((e) => e.status === "complete"), A = o >= 0 ? "active" : v ? "complete" : "pending", k = s ? s.accessibilityLabel ?? (typeof s.label == "string" ? s.label : "") : "", L = i.useCallback(
       (e) => {
-        x || E(e), u == null || u(e);
+        b || j(e), u == null || u(e);
       },
-      [x, u]
+      [b, u]
     );
     return /* @__PURE__ */ n(
       B,
       {
-        ref: V,
+        ref: S,
         open: m,
         onOpenChange: L,
-        role: $ ?? "region",
-        "aria-label": z ?? c,
-        "aria-busy": D ?? (i >= 0 || void 0),
-        ...S,
+        role: T ?? "region",
+        "aria-label": $ ?? c,
+        "aria-busy": z ?? (o >= 0 || void 0),
+        ...D,
         "data-slot": "task-progress",
         "data-status": A,
-        className: o(
-          U({ isSticky: b ? !1 : T }),
-          b && "rounded-b-none",
-          t
+        className: l(
+          U({ isSticky: g ? !1 : I }),
+          g && "rounded-b-none",
+          a
         ),
         children: [
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ t(
             "span",
             {
               className: "sr-only",
               role: "progressbar",
               "aria-label": c,
               "aria-valuemin": 0,
-              "aria-valuemax": s.length,
-              "aria-valuenow": g
+              "aria-valuemax": r.length,
+              "aria-valuenow": x
             }
           ),
-          /* @__PURE__ */ a("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: k ? `All ${s.length} steps complete` : `Step ${g} of ${s.length}${v ? `: ${v}` : ""}. ${_} pending.` }),
-          /* @__PURE__ */ a(G, { asChild: !0, children: /* @__PURE__ */ n(
+          /* @__PURE__ */ t("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: v ? `All ${r.length} steps complete` : `Step ${x} of ${r.length}${k ? `: ${k}` : ""}. ${R} pending.` }),
+          /* @__PURE__ */ t(G, { asChild: !0, children: /* @__PURE__ */ n(
             "button",
             {
               type: "button",
               "aria-label": m ? `Collapse ${c}` : `Expand ${c}`,
-              className: o(
-                "flex min-h-(--panel-header-height) w-full items-center gap-3 px-4 text-left sm:px-5",
+              className: l(
+                "flex min-h-14 w-full items-center gap-3 px-4 text-left sm:px-5",
                 "rounded-t-2xl rounded-b-sm outline-none focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring",
                 "transition-[color,transform] duration-(--duration-fast) ease-out active:scale-(--scale-press) motion-reduce:transition-none"
               ),
               children: [
-                m ? /* @__PURE__ */ a("span", { className: "min-w-0 flex-1 truncate text-base font-bold text-secondary", children: c }) : /* @__PURE__ */ n(q, { children: [
-                  /* @__PURE__ */ a(y, { status: (r == null ? void 0 : r.status) ?? "pending" }),
-                  /* @__PURE__ */ a("span", { className: "min-w-0 flex-1 truncate text-base text-primary", children: P ?? (r == null ? void 0 : r.label) ?? I }),
-                  (r == null ? void 0 : r.status) === "active" && /* @__PURE__ */ a(N, { elapsed: r.elapsed })
+                m ? /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-base font-bold text-secondary", children: c }) : /* @__PURE__ */ n(q, { children: [
+                  /* @__PURE__ */ t(y, { status: (s == null ? void 0 : s.status) ?? "pending" }),
+                  /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-base text-primary", children: _ ?? (s == null ? void 0 : s.label) ?? P }),
+                  (s == null ? void 0 : s.status) === "active" && /* @__PURE__ */ t(N, { elapsed: s.elapsed })
                 ] }),
                 /* @__PURE__ */ n(
                   "span",
@@ -153,17 +156,17 @@ const O = l.forwardRef(
                     "aria-hidden": !0,
                     className: "shrink-0 text-xs font-bold text-tertiary tabular-nums",
                     children: [
-                      g,
+                      x,
                       " / ",
-                      s.length
+                      r.length
                     ]
                   }
                 ),
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ t(
                   K,
                   {
                     "aria-hidden": !0,
-                    className: o(
+                    className: l(
                       "size-4 shrink-0 text-tertiary",
                       m && "rotate-180"
                     )
@@ -172,16 +175,16 @@ const O = l.forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ a(H, { className: "outline-none", children: /* @__PURE__ */ a(
+          /* @__PURE__ */ t(H, { className: "outline-none", children: /* @__PURE__ */ t(
             "ol",
             {
               "aria-label": "Task steps",
               className: "max-h-64 space-y-1 overflow-y-auto px-4 pb-4 sm:px-5",
-              children: s.map((e) => /* @__PURE__ */ n(
+              children: r.map((e) => /* @__PURE__ */ n(
                 "li",
                 {
                   "data-status": e.status,
-                  className: o(
+                  className: l(
                     "flex min-h-8 items-center gap-3 text-base",
                     e.status === "pending" ? "text-tertiary" : "text-primary"
                   ),
@@ -190,9 +193,9 @@ const O = l.forwardRef(
                       Z[e.status],
                       ": "
                     ] }),
-                    /* @__PURE__ */ a(y, { status: e.status }),
-                    /* @__PURE__ */ a("span", { className: "min-w-0 flex-1 truncate", children: e.label }),
-                    e.status === "active" && /* @__PURE__ */ a(N, { elapsed: e.elapsed })
+                    /* @__PURE__ */ t(y, { status: e.status }),
+                    /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", children: e.label }),
+                    e.status === "active" && /* @__PURE__ */ t(N, { elapsed: e.elapsed })
                   ]
                 },
                 e.id