@actioneer/ads 0.2.4 → 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/tool.js

@@ -4,48 +4,52 @@ import { isValidElement as c } from "react";
 import { Collapsible as u, CollapsibleContent as m, CollapsibleTrigger as p } from "../collapsible.js";
 import { Badge as f } from "../badge.js";
 import { Wrench as g, ChevronDown as h, CloseCircle as x, CheckCircle as b, Clock as N, CircleDashed as v } from "../../lib/icons.js";
-import { cn as t } from "../../lib/cn.js";
-const y = ({ className: e, ...n }) => /* @__PURE__ */ o(
+import { cn as r } from "../../lib/cn.js";
+const w = ({ className: e, ...t }) => /* @__PURE__ */ o(
   u,
   {
-    className: t(
+    className: r(
       "not-prose group/tool w-full overflow-hidden rounded-xl bg-card",
       e
     ),
-    ...n
+    ...t
   }
 );
-y.displayName = "Tool";
-const w = {
+w.displayName = "Tool";
+const y = {
   "input-streaming": { label: "Pending", color: "default", icon: v },
   "input-available": { label: "Running", color: "info", icon: N, pulse: !0 },
   "output-available": { label: "Completed", color: "success", icon: b },
   "output-error": { label: "Error", color: "danger", icon: x }
 }, C = ({ state: e }) => {
-  const { label: n, color: r, icon: a, pulse: i } = w[e];
-  return /* @__PURE__ */ l(f, { variant: "soft", color: r, children: [
+  const { label: t, color: n, icon: a, pulse: i } = y[e];
+  return /* @__PURE__ */ l(f, { variant: "soft", color: n, children: [
     /* @__PURE__ */ o(
       a,
       {
-        className: t(
+        className: r(
           "size-3",
           i && "animate-pulse motion-reduce:animate-none"
         ),
         "aria-hidden": !0
       }
     ),
-    n
+    t
   ] });
-}, T = ({
+};
+function T(e) {
+  return e.split("-").slice(1).join("-") || e;
+}
+const S = ({
   className: e,
-  title: n,
-  type: r,
+  title: t,
+  type: n,
   state: a,
   ...i
 }) => /* @__PURE__ */ l(
   p,
   {
-    className: t(
+    className: r(
       "group/tool-header flex w-full items-center justify-between gap-4 px-4 py-3 text-left transition-colors hover:bg-muted motion-reduce:transition-none",
       "outline-none focus-visible:ring-3 focus-visible:ring-ring",
       e
@@ -54,7 +58,7 @@ const w = {
     children: [
       /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ o(g, { className: "size-4 shrink-0 text-tertiary", "aria-hidden": !0 }),
-        /* @__PURE__ */ o("span", { className: "font-medium text-base", children: n ?? r.split("-").slice(1).join("-") }),
+        /* @__PURE__ */ o("span", { className: "font-medium text-base", children: t ?? T(n) }),
         /* @__PURE__ */ o(C, { state: a })
       ] }),
       /* @__PURE__ */ o(
@@ -67,50 +71,50 @@ const w = {
     ]
   }
 );
-T.displayName = "ToolHeader";
-const S = ({ className: e, ...n }) => /* @__PURE__ */ o(
+S.displayName = "ToolHeader";
+const j = ({ className: e, ...t }) => /* @__PURE__ */ o(
   m,
   {
-    className: t(
+    className: r(
       "overflow-hidden text-foreground outline-none",
       "data-[state=closed]:pointer-events-none",
       e
     ),
-    ...n
+    ...t
   }
 );
-S.displayName = "ToolContent";
+j.displayName = "ToolContent";
 const s = ({
   code: e,
-  className: n
+  className: t
 }) => /* @__PURE__ */ o(
   "pre",
   {
-    className: t(
+    className: r(
       "overflow-x-auto rounded-md bg-surface p-3 text-xs leading-relaxed text-foreground tabular-nums",
-      n
+      t
     ),
     children: /* @__PURE__ */ o("code", { children: e })
   }
-), d = ({ children: e }) => /* @__PURE__ */ o("h4", { className: "text-xs font-medium uppercase tracking-wide text-tertiary", children: e }), j = ({ className: e, input: n, ...r }) => /* @__PURE__ */ l("div", { className: t("space-y-2 overflow-hidden p-4", e), ...r, children: [
+), d = ({ children: e }) => /* @__PURE__ */ o("h4", { className: "text-xs font-medium uppercase tracking-wide text-tertiary", children: e }), k = ({ className: e, input: t, ...n }) => /* @__PURE__ */ l("div", { className: r("space-y-2 overflow-hidden p-4", e), ...n, children: [
   /* @__PURE__ */ o(d, { children: "Parameters" }),
-  /* @__PURE__ */ o(s, { code: JSON.stringify(n, null, 2) })
+  /* @__PURE__ */ o(s, { code: JSON.stringify(t, null, 2) })
 ] });
-j.displayName = "ToolInput";
-const k = (e) => typeof e == "object" && e !== null && !c(e) ? /* @__PURE__ */ o(s, { code: JSON.stringify(e, null, 2) }) : typeof e == "string" ? /* @__PURE__ */ o("div", { className: "rounded-md bg-surface p-3 text-xs leading-relaxed text-foreground whitespace-pre-wrap", children: e }) : e, O = ({
+k.displayName = "ToolInput";
+const O = (e) => typeof e == "object" && e !== null && !c(e) ? /* @__PURE__ */ o(s, { code: JSON.stringify(e, null, 2) }) : typeof e == "string" ? /* @__PURE__ */ o("div", { className: "rounded-md bg-surface p-3 text-xs leading-relaxed text-foreground whitespace-pre-wrap", children: e }) : e, P = ({
   className: e,
-  output: n,
-  errorText: r,
+  output: t,
+  errorText: n,
   ...a
-}) => n || r ? /* @__PURE__ */ l("div", { className: t("space-y-2 p-4", e), ...a, children: [
-  /* @__PURE__ */ o(d, { children: r ? "Error" : "Result" }),
-  r ? /* @__PURE__ */ o("div", { className: "rounded-md bg-danger-50 p-3 text-xs leading-relaxed text-danger-700 whitespace-pre-wrap", children: r }) : /* @__PURE__ */ o("div", { className: "overflow-x-auto text-xs text-foreground [&_table]:w-full", children: k(n) })
+}) => t || n ? /* @__PURE__ */ l("div", { className: r("space-y-2 p-4", e), ...a, children: [
+  /* @__PURE__ */ o(d, { children: n ? "Error" : "Result" }),
+  n ? /* @__PURE__ */ o("div", { className: "rounded-md bg-danger-50 p-3 text-xs leading-relaxed text-danger-700 whitespace-pre-wrap", children: n }) : /* @__PURE__ */ o("div", { className: "overflow-x-auto text-xs text-foreground [&_table]:w-full", children: O(t) })
 ] }) : null;
-O.displayName = "ToolOutput";
+P.displayName = "ToolOutput";
 export {
-  y as Tool,
-  S as ToolContent,
-  T as ToolHeader,
-  j as ToolInput,
-  O as ToolOutput
+  w as Tool,
+  j as ToolContent,
+  S as ToolHeader,
+  k as ToolInput,
+  P as ToolOutput
 };

package/components/answer.d.ts

@@ -20,6 +20,7 @@ export declare const AnswerSourceSchema: z.ZodObject<{
     id: z.ZodString;
     label: z.ZodString;
     description: z.ZodOptional<z.ZodString>;
+    href: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
 export declare const AnswerSignalSchema: z.ZodObject<{
     label: z.ZodOptional<z.ZodString>;
@@ -104,6 +105,7 @@ export declare const ComparisonAnswerSchema: z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
+        href: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
 }, z.core.$strip>;
 export declare const TrendAnswerSchema: z.ZodObject<{
@@ -203,6 +205,7 @@ export declare const TrendAnswerSchema: z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
+        href: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
 }, z.core.$strip>;
 export declare const StatusAnswerSchema: z.ZodObject<{
@@ -257,6 +260,7 @@ export declare const StatusAnswerSchema: z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
+        href: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
 }, z.core.$strip>;
 export declare const BreakdownAnswerSchema: z.ZodObject<{
@@ -303,6 +307,7 @@ export declare const BreakdownAnswerSchema: z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
+        href: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
 }, z.core.$strip>;
 export declare const ExplanationAnswerSchema: z.ZodObject<{
@@ -336,6 +341,7 @@ export declare const ExplanationAnswerSchema: z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
+        href: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
 }, z.core.$strip>;
 /** The complete model-facing contract. No free-form layout nodes are allowed. */
@@ -410,6 +416,7 @@ export declare const AnswerSpecSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
+        href: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
 }, z.core.$strip>, z.ZodObject<{
     kind: z.ZodLiteral<"trend">;
@@ -508,6 +515,7 @@ export declare const AnswerSpecSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
+        href: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
 }, z.core.$strip>, z.ZodObject<{
     kind: z.ZodLiteral<"status">;
@@ -561,6 +569,7 @@ export declare const AnswerSpecSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
+        href: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
 }, z.core.$strip>, z.ZodObject<{
     kind: z.ZodLiteral<"breakdown">;
@@ -606,6 +615,7 @@ export declare const AnswerSpecSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
+        href: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
 }, z.core.$strip>, z.ZodObject<{
     kind: z.ZodLiteral<"explanation">;
@@ -638,6 +648,7 @@ export declare const AnswerSpecSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
         id: z.ZodString;
         label: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
+        href: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
 }, z.core.$strip>], "kind">;
 export type AnswerTone = z.infer<typeof AnswerToneSchema>;
@@ -724,6 +735,7 @@ export declare const answerTool: {
             id: z.ZodString;
             label: z.ZodString;
             description: z.ZodOptional<z.ZodString>;
+            href: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>>;
     }, z.core.$strip>, z.ZodObject<{
         kind: z.ZodLiteral<"trend">;
@@ -822,6 +834,7 @@ export declare const answerTool: {
             id: z.ZodString;
             label: z.ZodString;
             description: z.ZodOptional<z.ZodString>;
+            href: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>>;
     }, z.core.$strip>, z.ZodObject<{
         kind: z.ZodLiteral<"status">;
@@ -875,6 +888,7 @@ export declare const answerTool: {
             id: z.ZodString;
             label: z.ZodString;
             description: z.ZodOptional<z.ZodString>;
+            href: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>>;
     }, z.core.$strip>, z.ZodObject<{
         kind: z.ZodLiteral<"breakdown">;
@@ -920,6 +934,7 @@ export declare const answerTool: {
             id: z.ZodString;
             label: z.ZodString;
             description: z.ZodOptional<z.ZodString>;
+            href: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>>;
     }, z.core.$strip>, z.ZodObject<{
         kind: z.ZodLiteral<"explanation">;
@@ -952,6 +967,7 @@ export declare const answerTool: {
             id: z.ZodString;
             label: z.ZodString;
             description: z.ZodOptional<z.ZodString>;
+            href: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>>;
     }, z.core.$strip>], "kind">;
 };