@actioneer/ads 0.6.0 → 0.8.0

package/components/alert.js

@@ -1,11 +1,13 @@
 "use client";
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import * as i from "react";
-import { cva as m } from "class-variance-authority";
-import { Info as l, WarningCircle as g, Warning as p, CheckCircle as x, Close as v } from "../lib/icons.js";
-import { cn as n } from "../lib/cn.js";
-const h = m(
-  "flex w-full items-start gap-4 rounded-2xl bg-muted p-4",
+import { jsx as e, jsxs as k } from "react/jsx-runtime";
+import * as t from "react";
+import { cva as A } from "class-variance-authority";
+import { MotionConfig as E, motion as g } from "motion/react";
+import { Info as p, WarningCircle as C, Warning as I, CheckCircle as R, Close as j } from "../lib/icons.js";
+import { cn as d } from "../lib/cn.js";
+import { springOverlay as z } from "../lib/motion.js";
+const D = A(
+  "relative flex w-full items-start gap-4 overflow-hidden rounded-2xl border border-border bg-card p-4 shadow-[var(--shadow-200)]",
   {
     variants: {
       variant: {
@@ -18,71 +20,105 @@ const h = m(
     },
     defaultVariants: { variant: "default" }
   }
-), w = {
-  default: l,
-  success: x,
-  warning: p,
-  danger: g,
-  info: l
-}, N = i.forwardRef(
-  ({ className: t, variant: r = "default", icon: a, onClose: s, children: o, ...c }, f) => {
-    const d = w[r ?? "default"];
-    return /* @__PURE__ */ u(
-      "div",
+), T = {
+  default: p,
+  success: R,
+  warning: I,
+  danger: C,
+  info: p
+}, M = t.forwardRef(
+  ({ className: n, variant: r = "default", icon: s, duration: a = 0, onClose: l, children: x, ...v }, h) => {
+    const b = T[r ?? "default"], [i, w] = t.useState(!1), [o, N] = t.useState(!1), c = t.useRef(l), m = t.useRef(!1);
+    t.useEffect(() => {
+      c.current = l;
+    }, [l]);
+    const u = t.useCallback(() => {
+      o || w(!0);
+    }, [o]);
+    t.useEffect(() => {
+      if (a <= 0 || i || o) return;
+      const f = window.setTimeout(u, a);
+      return () => window.clearTimeout(f);
+    }, [u, a, o, i]);
+    const y = t.useCallback(() => {
+      var f;
+      !i || m.current || (m.current = !0, N(!0), (f = c.current) == null || f.call(c));
+    }, [i]);
+    return o ? null : /* @__PURE__ */ e(E, { reducedMotion: "user", children: /* @__PURE__ */ e(
+      g.div,
       {
-        ref: f,
-        role: "alert",
-        className: n(h({ variant: r }), t),
-        ...c,
-        children: [
-          /* @__PURE__ */ e("span", { className: "flex shrink-0 select-none items-center justify-center py-1 text-(--alert-accent) [&_svg]:size-4", children: a ?? /* @__PURE__ */ e(d, { "aria-hidden": !0 }) }),
-          /* @__PURE__ */ e("div", { className: "flex min-w-0 grow flex-col items-start", children: o }),
-          s && /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Dismiss",
-              onClick: s,
-              className: n(
-                "inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-muted-foreground",
-                "transition-colors hover:bg-fill hover:text-foreground",
-                "outline-none focus-visible:ring-3 focus-visible:ring-ring",
-                "[&_svg]:size-4"
+        initial: { opacity: 1, x: 32 },
+        animate: i ? { opacity: 0, x: -32 } : { opacity: 1, x: 0 },
+        transition: i ? { duration: 0.18, ease: "easeIn" } : z,
+        onAnimationComplete: y,
+        children: /* @__PURE__ */ k(
+          "div",
+          {
+            ref: h,
+            role: "alert",
+            className: d(D({ variant: r }), n),
+            ...v,
+            children: [
+              /* @__PURE__ */ e("span", { className: "flex shrink-0 select-none items-center justify-center py-1 text-(--alert-accent) [&_svg]:size-4", children: s ?? /* @__PURE__ */ e(b, { "aria-hidden": !0 }) }),
+              /* @__PURE__ */ e("div", { className: "flex min-w-0 grow flex-col items-start", children: x }),
+              l && /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Dismiss",
+                  onClick: u,
+                  className: d(
+                    "inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-muted-foreground",
+                    "transition-colors hover:bg-fill hover:text-foreground",
+                    "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+                    "[&_svg]:size-4"
+                  ),
+                  children: /* @__PURE__ */ e(j, { "aria-hidden": !0 })
+                }
               ),
-              children: /* @__PURE__ */ e(v, { "aria-hidden": !0 })
-            }
-          )
-        ]
+              a > 0 && /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "absolute inset-x-0 bottom-0 h-0.5 bg-wg3", children: /* @__PURE__ */ e(
+                g.span,
+                {
+                  className: "block size-full origin-left bg-(--alert-accent)",
+                  initial: { scaleX: 1 },
+                  animate: { scaleX: 0 },
+                  transition: { duration: a / 1e3, ease: "linear" }
+                },
+                a
+              ) })
+            ]
+          }
+        )
       }
-    );
+    ) });
   }
 );
-N.displayName = "Alert";
-const b = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
+M.displayName = "Alert";
+const S = t.forwardRef(({ className: n, ...r }, s) => /* @__PURE__ */ e(
   "p",
   {
-    ref: a,
-    className: n("text-xs font-normal leading-6 text-foreground", t),
+    ref: s,
+    className: d("text-xs font-normal leading-6 text-(--alert-accent)", n),
     ...r
   }
 ));
-b.displayName = "AlertTitle";
-const y = i.forwardRef(({ className: t, ...r }, a) => (
+S.displayName = "AlertTitle";
+const V = t.forwardRef(({ className: n, ...r }, s) => (
   // leading-normal (150%) — the description is the only part of an alert that
   // regularly wraps, and the text-xs default (138%) sets multi-line copy too
   // tight to scan.
   /* @__PURE__ */ e(
     "p",
     {
-      ref: a,
-      className: n("text-xs leading-normal text-muted-foreground", t),
+      ref: s,
+      className: d("text-xs leading-normal text-muted-foreground", n),
       ...r
     }
   )
 ));
-y.displayName = "AlertDescription";
+V.displayName = "AlertDescription";
 export {
-  N as Alert,
-  y as AlertDescription,
-  b as AlertTitle
+  M as Alert,
+  V as AlertDescription,
+  S as AlertTitle
 };

package/components/answer-sources.d.ts

@@ -1,12 +1,8 @@
 import { DrawerProps } from './drawer';
 import * as React from "react";
 export interface AnswerSourcesProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Total referenced nodes represented by the source chips. */
-    count: number;
-    /** Label before the count. Defaults to “Sources”. */
-    label?: string;
 }
-/** Compact source strip placed immediately before an answer's follow-ups. */
+/** Direct source-control strip placed immediately before answer follow-ups. */
 export declare const AnswerSources: React.ForwardRefExoticComponent<AnswerSourcesProps & React.RefAttributes<HTMLDivElement>>;
 export interface AnswerSourceChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /** Connector/source mark shown before the label. */
@@ -15,7 +11,7 @@ export interface AnswerSourceChipProps extends Omit<React.ButtonHTMLAttributes<H
     count?: number;
     children: React.ReactNode;
 }
-/** Blue connector chip that opens its referenced nodes in the inspector. */
+/** Canonical info chip that opens its referenced nodes in the inspector. */
 export declare const AnswerSourceChip: React.ForwardRefExoticComponent<AnswerSourceChipProps & React.RefAttributes<HTMLButtonElement>>;
 export interface AnswerSourceInspectorProps extends Omit<DrawerProps, "children"> {
     /** Supporting count/context line beneath the title. */

package/components/answer-sources.js

@@ -1,75 +1,73 @@
 "use client";
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import * as c from "react";
-import { ExternalLink as p, Table as f } from "../lib/icons.js";
+import { ExternalLink as u, Table as f } from "../lib/icons.js";
 import { cn as o } from "../lib/cn.js";
-import { Button as u } from "./button.js";
-import { Drawer as x, DrawerHeader as h, DrawerTitle as g, DrawerBody as N } from "./drawer.js";
-const w = c.forwardRef(({ count: n, label: e = "Sources", className: a, children: t, ...i }, l) => /* @__PURE__ */ s(
+import { Chip as p } from "./chip.js";
+import { Drawer as h, DrawerHeader as x, DrawerTitle as b, DrawerBody as g } from "./drawer.js";
+const N = c.forwardRef(({ className: a, children: r, ...s }, n) => /* @__PURE__ */ e(
   "div",
   {
-    ref: l,
+    ref: n,
     className: o("flex flex-wrap items-center gap-2", a),
-    ...i,
-    children: [
-      /* @__PURE__ */ s("span", { className: "text-xs font-normal uppercase tracking-wide text-tertiary", children: [
-        e,
-        " · ",
-        n
-      ] }),
-      t
-    ]
+    ...s,
+    children: r
   }
 ));
-w.displayName = "AnswerSources";
-const b = c.forwardRef(({ icon: n, count: e, className: a, children: t, ...i }, l) => /* @__PURE__ */ s(
-  u,
+N.displayName = "AnswerSources";
+const w = c.forwardRef(({ icon: a, count: r, className: s, children: n, ...i }, l) => /* @__PURE__ */ e(
+  "button",
   {
     ref: l,
     type: "button",
-    size: "xs",
-    variant: "ghost",
     className: o(
-      "h-auto gap-1.5 rounded-full bg-info-50 px-2 py-0.5 text-xs text-info-700 hover:bg-info-100 focus-visible:ring-info/40",
-      a
+      "group inline-flex rounded-[4px] outline-none transition-transform active:scale-[0.97] focus-visible:ring-3 focus-visible:ring-info/40",
+      s
     ),
     ...i,
-    children: [
-      n,
-      t,
-      e != null && e > 1 && /* @__PURE__ */ s("span", { className: "tabular-nums", children: [
-        "· ",
-        e
-      ] })
-    ]
+    children: /* @__PURE__ */ t(
+      p,
+      {
+        color: "info",
+        startContent: a,
+        className: "pointer-events-none transition-colors duration-150 group-hover:border-info-400 group-hover:bg-info-100 group-focus-visible:border-info-400 group-focus-visible:bg-info-100",
+        children: [
+          n,
+          r != null && r > 1 && /* @__PURE__ */ t("span", { className: "tabular-nums", children: [
+            "· ",
+            r
+          ] })
+        ]
+      }
+    )
   }
 ));
-b.displayName = "AnswerSourceChip";
+w.displayName = "AnswerSourceChip";
 function D({
-  title: n = "Answer sources",
-  description: e,
-  className: a,
-  children: t,
+  title: a = "Answer sources",
+  description: r,
+  className: s,
+  children: n,
   ...i
 }) {
-  return /* @__PURE__ */ s(x, { className: o("h-full", a), ...i, children: [
-    /* @__PURE__ */ s(h, { className: "gap-1", children: [
-      /* @__PURE__ */ r(g, { children: n }),
-      e && /* @__PURE__ */ r("p", { className: "text-xs text-tertiary", children: e })
+  return /* @__PURE__ */ t(h, { className: o("h-full", s), ...i, children: [
+    /* @__PURE__ */ t(x, { className: "gap-1", children: [
+      /* @__PURE__ */ e(b, { children: a }),
+      r && /* @__PURE__ */ e("p", { className: "text-xs text-tertiary", children: r })
     ] }),
-    /* @__PURE__ */ r(N, { className: "space-y-2", children: t })
+    /* @__PURE__ */ e(g, { className: "space-y-2", children: n })
   ] });
 }
-const y = c.forwardRef(
+const v = c.forwardRef(
   ({
-    name: n,
-    source: e,
-    description: a,
-    status: t,
-    icon: i = /* @__PURE__ */ r(f, { "aria-hidden": !0, className: "size-4" }),
+    name: a,
+    source: r,
+    description: s,
+    status: n,
+    icon: i = /* @__PURE__ */ e(f, { "aria-hidden": !0, className: "size-4" }),
     className: l,
     ...m
-  }, d) => /* @__PURE__ */ s(
+  }, d) => /* @__PURE__ */ t(
     "button",
     {
       ref: d,
@@ -82,17 +80,17 @@ const y = c.forwardRef(
       ),
       ...m,
       children: [
-        /* @__PURE__ */ r("span", { className: "mt-0.5 grid size-8 shrink-0 place-items-center rounded-md bg-muted text-foreground", children: i }),
-        /* @__PURE__ */ s("span", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ s("span", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate font-normal tabular-nums text-foreground", children: n }),
-            t && /* @__PURE__ */ r("span", { className: "shrink-0", children: t })
+        /* @__PURE__ */ e("span", { className: "mt-0.5 grid size-8 shrink-0 place-items-center rounded-md bg-muted text-foreground", children: i }),
+        /* @__PURE__ */ t("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate font-normal tabular-nums text-foreground", children: a }),
+            n && /* @__PURE__ */ e("span", { className: "shrink-0", children: n })
           ] }),
-          e && /* @__PURE__ */ r("span", { className: "mt-0.5 flex items-center gap-1.5 text-xs text-secondary", children: e }),
-          a && /* @__PURE__ */ r("span", { className: "mt-1.5 block text-xs text-secondary", children: a })
+          r && /* @__PURE__ */ e("span", { className: "mt-0.5 flex items-center gap-1.5 text-xs text-secondary", children: r }),
+          s && /* @__PURE__ */ e("span", { className: "mt-1.5 block text-xs text-secondary", children: s })
         ] }),
-        /* @__PURE__ */ r(
-          p,
+        /* @__PURE__ */ e(
+          u,
           {
             "aria-hidden": !0,
             className: "mt-2 size-4 shrink-0 text-tertiary"
@@ -102,10 +100,10 @@ const y = c.forwardRef(
     }
   )
 );
-y.displayName = "AnswerSourceItem";
+v.displayName = "AnswerSourceItem";
 export {
-  b as AnswerSourceChip,
+  w as AnswerSourceChip,
   D as AnswerSourceInspector,
-  y as AnswerSourceItem,
-  w as AnswerSources
+  v as AnswerSourceItem,
+  N as AnswerSources
 };

package/components/answer.d.ts

@@ -1,8 +1,13 @@
 import { z } from 'zod/v4';
+import { Button } from './button';
 import * as React from "react";
 /** The single tool name every ADS assistant uses for deterministic answers. */
 export declare const ANSWER_TOOL_NAME = "render_answer";
 export declare const ANSWER_TOOL_DESCRIPTION = "Render the final answer with one curated ADS template. Choose the semantic kind that best matches the answer \u2014 data kinds (fact, table, ranking, trend, comparison, breakdown, report), narrative kinds (explanation, knowledge, decision, status), task kinds (confirmation), and situation kinds (clarification, empty, error, refusal) \u2014 and provide only validated data; the application owns the layout.";
+export interface FollowUpQuestionProps extends Omit<React.ComponentProps<typeof Button>, "size" | "variant" | "startContent" | "endContent"> {
+}
+/** Full-width next-question row used at the end of a structured answer. */
+export declare const FollowUpQuestion: React.ForwardRefExoticComponent<Omit<FollowUpQuestionProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const AnswerToneSchema: z.ZodEnum<{
     success: "success";
     warning: "warning";