@actioneer/ads 0.3.0 → 0.4.0

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

@@ -1,22 +1,22 @@
 "use client";
-import { jsxs as t, jsx as e, Fragment as K } from "react/jsx-runtime";
+import { jsxs as r, jsx as e, Fragment as P } 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", {
+import { MotionConfig as I, AnimatePresence as O, motion as ee } from "motion/react";
+import { cva as te } from "class-variance-authority";
+import { Collapsible as re, CollapsibleTrigger as M, CollapsibleContent as ae } from "../collapsible.js";
+import { Spinner as T } from "../spinner.js";
+import { Sparkles as V, ChevronDown as B } from "../../lib/icons.js";
+import { EASE_OUT as D } from "../../lib/motion.js";
+import { cn as l } from "../../lib/cn.js";
+import { Shimmer as F } from "./shimmer.js";
+const ie = te("w-full", {
   variants: {
     status: {
       active: "text-foreground",
       complete: "text-secondary"
     }
   }
-}), te = {
+}), se = {
   initial: {
     opacity: 0,
     transform: "translate3d(0, 7px, 0)",
@@ -26,32 +26,32 @@ const re = I("w-full", {
     opacity: 1,
     transform: "translate3d(0, 0, 0)",
     filter: "blur(0px)",
-    transition: { duration: 0.18, ease: V }
+    transition: { duration: 0.18, ease: D }
   },
   exit: {
     opacity: 0,
     transform: "translate3d(0, -7px, 0)",
     filter: "blur(2px)",
-    transition: { duration: 0.12, ease: V }
+    transition: { duration: 0.12, ease: D }
   }
 };
-function F({
-  elapsed: r,
+function K({
+  elapsed: t,
   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: [
+  return /* @__PURE__ */ r("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+    /* @__PURE__ */ r("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", { className: "text-xs text-tertiary tabular-nums", children: t }),
+    n != null && /* @__PURE__ */ r(P, { children: [
       /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "text-tertiary", children: "·" }),
-      /* @__PURE__ */ t("span", { className: "text-xs text-tertiary", children: [
+      /* @__PURE__ */ r("span", { className: "text-xs text-tertiary", children: [
         "first insight",
         " ",
         /* @__PURE__ */ e("span", { className: "tabular-nums", children: n })
@@ -59,117 +59,130 @@ function F({
     ] })
   ] });
 }
-const ae = s.forwardRef(
+const ne = s.forwardRef(
   ({
-    status: r,
+    status: t,
     elapsed: n,
     sourceCount: d,
-    firstInsight: N,
-    sticky: b = !1,
-    activity: o,
-    activityKey: P,
-    stepIndex: g,
-    stepCount: R,
-    summary: f,
-    open: w,
-    defaultOpen: U = !1,
+    firstInsight: w,
+    sticky: p = !1,
+    collapsible: h = !0,
+    activityPlacement: U = "top",
+    activity: c,
+    activityKey: _,
+    stepIndex: R,
+    stepCount: S,
+    summary: x,
+    open: k,
+    defaultOpen: $ = !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;
+    children: q,
+    className: G,
+    role: H,
+    "aria-label": J,
+    "aria-busy": Q,
+    ...W
+  }, X) => {
+    const m = k !== void 0, i = c != null, [Y, y] = s.useState(
+      !i && t === "active" || $
+    ), z = s.useRef(t), N = s.useRef(!1), E = s.useRef(null), b = s.useRef(null), g = m ? k : Y, v = !i && t === "active" || g, f = U === "bottom" && v;
     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);
+      var L, j;
+      const u = z.current;
+      if (z.current = t, t === "active") {
+        u !== "active" && (N.current = !1), u !== "active" && !i && !m && y(!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(
+      if (u !== "active" || N.current && i) return;
+      const A = document.activeElement;
+      A && ((L = E.current) != null && L.contains(A)) && ((j = b.current) == null || j.focus()), m || y(!1), a == null || a(!1);
+    }, [i, m, a, t]);
+    const Z = s.useCallback(
       (u) => {
-        !i && r !== "complete" || (h.current = !0, c || p(u), a == null || a(u));
+        !i && t !== "complete" || (N.current = !0, m || y(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,
+      [i, m, a, t]
+    ), o = t === "active", C = o ? `activity-${_ ?? (typeof c == "string" ? c : "current")}` : "summary";
+    return /* @__PURE__ */ r(
+      re,
       {
-        ref: J,
+        ref: X,
         open: v,
-        onOpenChange: W,
-        role: q ?? "region",
-        "aria-label": B ?? "Research activity",
-        "aria-busy": G ?? (l || void 0),
-        ...H,
+        onOpenChange: Z,
+        role: H ?? "region",
+        "aria-label": J ?? "Research activity",
+        "aria-busy": Q ?? (o || void 0),
+        ...W,
         "data-slot": "research-activity",
-        "data-status": r,
-        className: m(re({ status: r }), $),
+        "data-status": t,
+        className: l(
+          ie({ status: t }),
+          f && "flex flex-col",
+          G
+        ),
         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(
+          /* @__PURE__ */ e("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: o ? "Research in progress" : "Research complete" }),
+          i ? /* @__PURE__ */ e(M, { asChild: !0, children: /* @__PURE__ */ r(
             "button",
             {
-              ref: x,
+              ref: b,
               type: "button",
               "data-slot": "research-activity-trigger",
-              className: m(
+              className: l(
                 "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"
+                p && "sticky z-10 bg-background",
+                p && (f ? "bottom-0" : "top-0"),
+                f && "order-last mt-3"
               ),
               children: [
-                /* @__PURE__ */ t("span", { className: "sr-only", children: [
+                /* @__PURE__ */ r("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,
+                /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "flex size-4 shrink-0 items-center justify-center", children: o ? /* @__PURE__ */ e(T, { size: "sm", color: "current", role: "presentation" }) : /* @__PURE__ */ e(V, { className: "size-4" }) }),
+                /* @__PURE__ */ e(I, { reducedMotion: "user", children: /* @__PURE__ */ e("span", { className: "relative h-5 min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ e(O, { initial: !1, children: /* @__PURE__ */ e(
+                  ee.span,
                   {
-                    variants: te,
+                    variants: se,
                     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,
+                    children: o ? typeof c == "string" ? /* @__PURE__ */ e(F, { as: "span", className: "truncate text-sm", children: c }) : c : x !== void 0 ? x : /* @__PURE__ */ e(
+                      K,
                       {
                         elapsed: n,
-                        firstInsight: N,
+                        firstInsight: w,
                         sourceCount: d
                       }
                     )
                   },
-                  X
+                  C
                 ) }) }) }),
-                l && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: [
-                  g != null && R != null && /* @__PURE__ */ t(K, { children: [
+                o && /* @__PURE__ */ r("span", { className: l(
+                  "shrink-0 text-xs text-tertiary tabular-nums",
+                  // Reserve the caret slot (size-4 + gap-2) so trailing metadata
+                  // keeps the same right edge as sibling rows that show a caret.
+                  !h && "pe-6"
+                ), children: [
+                  R != null && S != null && /* @__PURE__ */ r(P, { children: [
                     /* @__PURE__ */ e("span", { className: "sr-only", children: "Step " }),
-                    g,
-                    " of ",
                     R,
+                    " of ",
+                    S,
                     /* @__PURE__ */ e("span", { "aria-hidden": !0, children: " · " })
                   ] }),
                   /* @__PURE__ */ e("span", { className: "sr-only", children: "Elapsed " }),
                   n
                 ] }),
-                /* @__PURE__ */ e(
-                  T,
+                h && /* @__PURE__ */ e(
+                  B,
                   {
                     "aria-hidden": !0,
-                    className: m(
+                    className: l(
                       "size-4 shrink-0 text-tertiary transition-transform duration-(--duration-normal) ease-out motion-reduce:transition-none",
                       v && "rotate-180"
                     )
@@ -177,14 +190,14 @@ const ae = s.forwardRef(
                 )
               ]
             }
-          ) }) : l ? /* @__PURE__ */ t(
+          ) }) : o ? /* @__PURE__ */ r(
             "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,
+                  T,
                   {
                     size: "sm",
                     color: "current",
@@ -192,47 +205,52 @@ const ae = s.forwardRef(
                     "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(F, { as: "span", className: "text-sm", children: "Researching…" }),
+                /* @__PURE__ */ r("span", { className: l(
+                  "ml-auto shrink-0 text-xs text-tertiary tabular-nums",
+                  !h && "pe-6"
+                ), children: [
                   /* @__PURE__ */ e("span", { className: "sr-only", children: "Elapsed " }),
                   n
                 ] })
               ]
             }
-          ) : /* @__PURE__ */ e(j, { asChild: !0, children: /* @__PURE__ */ t(
+          ) : /* @__PURE__ */ e(M, { asChild: !0, children: /* @__PURE__ */ r(
             "button",
             {
-              ref: x,
+              ref: b,
               type: "button",
               "data-slot": "research-activity-trigger",
-              className: m(
+              className: l(
                 "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"
+                p && "sticky z-10 bg-background",
+                p && (f ? "bottom-0" : "top-0"),
+                f && "order-last mt-3"
               ),
               children: [
-                /* @__PURE__ */ t("span", { className: "sr-only", children: [
-                  y ? "Collapse" : "Expand",
+                /* @__PURE__ */ r("span", { className: "sr-only", children: [
+                  g ? "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,
+                /* @__PURE__ */ e(V, { "aria-hidden": !0, className: "size-4 shrink-0" }),
+                /* @__PURE__ */ e("span", { className: "min-w-0 flex-1", children: x !== void 0 ? x : /* @__PURE__ */ e(
+                  K,
                   {
                     elapsed: n,
-                    firstInsight: N,
+                    firstInsight: w,
                     sourceCount: d
                   }
                 ) }),
-                /* @__PURE__ */ e(
-                  T,
+                h && /* @__PURE__ */ e(
+                  B,
                   {
                     "aria-hidden": !0,
-                    className: m(
+                    className: l(
                       "size-4 shrink-0 text-tertiary transition-transform duration-(--duration-normal) ease-out motion-reduce:transition-none",
-                      y && "rotate-180"
+                      g && "rotate-180"
                     )
                   }
                 )
@@ -240,13 +258,13 @@ const ae = s.forwardRef(
             }
           ) }),
           /* @__PURE__ */ e(
-            ee,
+            ae,
             {
-              ref: S,
+              ref: E,
               forceMount: !0,
               "data-slot": "research-activity-content",
               className: "mt-3 overflow-hidden text-foreground outline-none data-[state=closed]:hidden",
-              children: _
+              children: q
             }
           )
         ]
@@ -254,7 +272,7 @@ const ae = s.forwardRef(
     );
   }
 );
-ae.displayName = "ResearchActivity";
+ne.displayName = "ResearchActivity";
 export {
-  ae as ResearchActivity
+  ne as ResearchActivity
 };

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../collapsible';
 /**
  * Task — a collapsible list of the steps an agent took to accomplish a goal
@@ -18,14 +18,18 @@ export declare const TaskItem: {
 };
 export type TaskProps = ComponentProps<typeof Collapsible>;
 export declare const Task: {
-    ({ defaultOpen, className, ...props }: TaskProps): import("react").JSX.Element;
+    ({ defaultOpen, className, open, children, ...props }: TaskProps): import("react").JSX.Element;
     displayName: string;
 };
 export type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
     title: string;
+    /** Leading icon. Defaults to the search glyph. */
+    icon?: ReactNode;
+    /** Trailing metadata — counts, elapsed time. */
+    endContent?: ReactNode;
 };
 export declare const TaskTrigger: {
-    ({ children, className, title, ...props }: TaskTriggerProps): import("react").JSX.Element;
+    ({ children, className, title, icon, endContent, ...props }: TaskTriggerProps): import("react").JSX.Element;
     displayName: string;
 };
 export type TaskContentProps = ComponentProps<typeof CollapsibleContent>;

package/components/ai-elements/task.js

@@ -1,73 +1,105 @@
 "use client";
-import { jsx as a, jsxs as r } from "react/jsx-runtime";
-import { Collapsible as i, CollapsibleContent as l, CollapsibleTrigger as d } from "../collapsible.js";
-import { Search as m, ChevronDown as c } from "../../lib/icons.js";
-import { cn as o } from "../../lib/cn.js";
-const p = ({
-  children: e,
-  className: t,
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { createContext as m, useContext as d } from "react";
+import { motion as u } from "motion/react";
+import { EASE_DISCLOSURE as p } from "../../lib/motion.js";
+import { Collapsible as h, CollapsibleContent as f, CollapsibleTrigger as x } from "../collapsible.js";
+import { Search as g, ChevronDown as N } from "../../lib/icons.js";
+import { cn as i } from "../../lib/cn.js";
+const l = m(!0), k = ({
+  children: t,
+  className: a,
   ...s
-}) => /* @__PURE__ */ a(
+}) => /* @__PURE__ */ e(
   "div",
   {
-    className: o(
+    className: i(
       "inline-flex items-center gap-1 rounded-md bg-fill px-1.5 py-0.5 text-xs text-fill-foreground",
-      t
+      a
     ),
     ...s,
-    children: e
+    children: t
   }
 );
-p.displayName = "TaskItemFile";
-const u = ({ children: e, className: t, ...s }) => /* @__PURE__ */ a("div", { className: o("text-base text-secondary", t), ...s, children: e });
-u.displayName = "TaskItem";
-const f = ({ defaultOpen: e = !0, className: t, ...s }) => /* @__PURE__ */ a(i, { className: o(t), defaultOpen: e, ...s });
-f.displayName = "Task";
-const g = ({
-  children: e,
-  className: t,
+k.displayName = "TaskItemFile";
+const v = ({ children: t, className: a, ...s }) => /* @__PURE__ */ e("div", { className: i("text-base text-secondary", a), ...s, children: t });
+v.displayName = "TaskItem";
+const T = ({
+  defaultOpen: t = !0,
+  className: a,
+  open: s,
+  children: n,
+  ...r
+}) => /* @__PURE__ */ e(
+  h,
+  {
+    className: i(a),
+    defaultOpen: t,
+    open: s,
+    ...r,
+    children: /* @__PURE__ */ e(l.Provider, { value: s ?? t, children: n })
+  }
+);
+T.displayName = "Task";
+const y = ({
+  children: t,
+  className: a,
   title: s,
-  ...n
-}) => /* @__PURE__ */ a(d, { asChild: !0, className: o("group", t), ...n, children: e ?? /* @__PURE__ */ r(
+  icon: n,
+  endContent: r,
+  ...c
+}) => /* @__PURE__ */ e(x, { asChild: !0, className: i("group", a), ...c, children: t ?? /* @__PURE__ */ o(
   "button",
   {
     type: "button",
     className: "flex w-full cursor-pointer items-center gap-2 rounded-sm text-base text-secondary outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none",
     children: [
-      /* @__PURE__ */ a(m, { className: "size-4 shrink-0", "aria-hidden": !0 }),
-      /* @__PURE__ */ a("span", { className: "text-base", children: s }),
-      /* @__PURE__ */ a(
-        c,
-        {
-          className: "size-4 shrink-0 transition-transform duration-(--duration-fast) ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none",
-          "aria-hidden": !0
-        }
-      )
+      /* @__PURE__ */ e("span", { className: "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4", "aria-hidden": !0, children: n ?? /* @__PURE__ */ e(g, { className: "size-4 shrink-0" }) }),
+      /* @__PURE__ */ e("span", { className: "text-base", children: s }),
+      /* @__PURE__ */ o("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+        r != null && /* @__PURE__ */ e("span", { className: "text-xs text-tertiary tabular-nums", children: r }),
+        /* @__PURE__ */ e(
+          N,
+          {
+            className: "size-4 shrink-0 transition-transform duration-(--duration-fast) ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none",
+            "aria-hidden": !0
+          }
+        )
+      ] })
     ]
   }
 ) });
-g.displayName = "TaskTrigger";
-const x = ({
-  children: e,
-  className: t,
+y.displayName = "TaskTrigger";
+const b = ({
+  children: t,
+  className: a,
   ...s
-}) => /* @__PURE__ */ a(
-  l,
-  {
-    className: o(
-      "overflow-hidden text-foreground outline-none",
-      "data-[state=closed]:pointer-events-none",
-      t
-    ),
-    ...s,
-    children: /* @__PURE__ */ a("div", { className: "mt-4 space-y-2 border-l-2 border-border pl-4", children: e })
-  }
-);
-x.displayName = "TaskContent";
+}) => {
+  const n = d(l);
+  return /* @__PURE__ */ e(f, { forceMount: !0, asChild: !0, ...s, children: /* @__PURE__ */ e(
+    u.div,
+    {
+      initial: !1,
+      animate: n ? "open" : "closed",
+      variants: {
+        open: { height: "auto", opacity: 1 },
+        closed: { height: 0, opacity: 0 }
+      },
+      transition: { duration: n ? 0.28 : 0.2, ease: p },
+      className: i(
+        "overflow-hidden text-foreground outline-none",
+        "data-[state=closed]:pointer-events-none",
+        a
+      ),
+      children: /* @__PURE__ */ e("div", { className: "mt-2 ml-2", children: t })
+    }
+  ) });
+};
+b.displayName = "TaskContent";
 export {
-  f as Task,
-  x as TaskContent,
-  u as TaskItem,
-  p as TaskItemFile,
-  g as TaskTrigger
+  T as Task,
+  b as TaskContent,
+  v as TaskItem,
+  k as TaskItemFile,
+  y as TaskTrigger
 };