@actioneer/ads 0.2.3 → 0.3.0

package/components/ai-elements/chain-of-thought.d.ts

@@ -1,29 +1,98 @@
 import { Badge } from '../badge';
-import { CollapsibleContent, CollapsibleTrigger } from '../collapsible';
-import { ComponentProps, ComponentType, ReactNode } from 'react';
-export type ChainOfThoughtProps = ComponentProps<"div"> & {
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../collapsible';
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * A step-first reasoning trace. The root is intentionally only a list: each
+ * step owns its own disclosure so the trace does not need a redundant global
+ * "Chain of Thought" trigger above it.
+ */
+export type ChainOfThoughtProps = ComponentProps<"div">;
+export declare const ChainOfThought: import('react').MemoExoticComponent<({ className, role, ...props }: ChainOfThoughtProps) => import("react").JSX.Element>;
+/**
+ * Step lifecycle mirrors the production work-trace statuses: steps stream in
+ * as `active`, settle to `complete`, and surface failures as `error` — an
+ * error is an execution fact shown in place, not a hidden retry.
+ */
+export type ChainOfThoughtStatus = "complete" | "active" | "pending" | "error";
+export type ChainOfThoughtStepProps = ComponentProps<typeof Collapsible> & {
+    status?: ChainOfThoughtStatus;
 };
-export declare const ChainOfThought: import('react').MemoExoticComponent<({ className, open, defaultOpen, onOpenChange, children, ...props }: ChainOfThoughtProps) => import("react").JSX.Element>;
-export type ChainOfThoughtHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
-export declare const ChainOfThoughtHeader: import('react').MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtHeaderProps) => import("react").JSX.Element>;
-export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
-    icon?: ComponentType<{
-        className?: string;
-    }>;
-    label: ReactNode;
-    description?: ReactNode;
-    status?: "complete" | "active" | "pending";
+export declare const ChainOfThoughtStep: import('react').MemoExoticComponent<({ className, defaultOpen, open: controlledOpen, onOpenChange, status, role, "aria-busy": ariaBusy, ...props }: ChainOfThoughtStepProps) => import("react").JSX.Element>;
+export type ChainOfThoughtTriggerProps = Omit<ComponentProps<typeof CollapsibleTrigger>, "asChild" | "children"> & {
+    children: ReactNode;
+    /** Semantic icon rendered on the reasoning rail. */
+    leftIcon?: ReactNode;
+    /** Optional trailing metadata such as elapsed time. */
+    endContent?: ReactNode;
+    /** Swap the semantic icon for a disclosure affordance on hover. */
+    swapIconOnHover?: boolean;
 };
-export declare const ChainOfThoughtStep: import('react').MemoExoticComponent<({ className, icon: Icon, label, description, status, children, ...props }: ChainOfThoughtStepProps) => import("react").JSX.Element>;
+export declare const ChainOfThoughtTrigger: import('react').MemoExoticComponent<({ className, children, leftIcon, endContent, swapIconOnHover, ...props }: ChainOfThoughtTriggerProps) => import("react").JSX.Element>;
+export type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;
+export declare const ChainOfThoughtContent: import('react').MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtContentProps) => import("react").JSX.Element>;
+export type ChainOfThoughtItemProps = ComponentProps<"div">;
+export declare const ChainOfThoughtItem: import('react').MemoExoticComponent<({ className, ...props }: ChainOfThoughtItemProps) => import("react").JSX.Element>;
 export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
 export declare const ChainOfThoughtSearchResults: import('react').MemoExoticComponent<({ className, ...props }: ChainOfThoughtSearchResultsProps) => import("react").JSX.Element>;
 export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
 export declare const ChainOfThoughtSearchResult: import('react').MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtSearchResultProps) => import("react").JSX.Element>;
-export type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;
-export declare const ChainOfThoughtContent: import('react').MemoExoticComponent<({ className, children, ...props }: ChainOfThoughtContentProps) => import("react").JSX.Element>;
+export type ChainOfThoughtEvidenceProps = Omit<ComponentProps<typeof Collapsible>, "title"> & {
+    /** Short artifact name, e.g. "NPA movement — last 4 quarters". */
+    title: ReactNode;
+    /** Stable result tag badge, e.g. "E1". */
+    tag?: ReactNode;
+    /** Trailing scale hint on the closed chip, e.g. "128 rows" or "chart". */
+    meta?: ReactNode;
+    /** Provenance footer under the preview, e.g. "core_banking.npa_movement". */
+    source?: ReactNode;
+    /** Execution failure shown in place of (or alongside) the preview. */
+    error?: ReactNode;
+    /** Swap the leading Database glyph. Errors default to a warning glyph. */
+    icon?: ReactNode;
+};
+/**
+ * A bounded evidence preview riding inside a step: collapsed to a one-line
+ * chip by default, expanding to a capped artifact preview (table, chart) with
+ * its provenance. Evidence stays visually secondary to the step's finding —
+ * supporting detail on demand, never competing with the answer. Errors render
+ * in place as facts.
+ */
+export declare const ChainOfThoughtEvidence: import('react').MemoExoticComponent<({ className, title, tag, meta, source, error, icon, defaultOpen, children, ...props }: ChainOfThoughtEvidenceProps) => import("react").JSX.Element>;
+export interface ChainOfThoughtEvidenceColumn {
+    key: string;
+    label: ReactNode;
+    align?: "start" | "end";
+}
+export type ChainOfThoughtEvidenceTableProps = Omit<ComponentProps<"div">, "children"> & {
+    columns: ChainOfThoughtEvidenceColumn[];
+    /** Bounded preview rows — the deterministic capped preview, never the full artifact. */
+    rows: Record<string, ReactNode>[];
+    /** True row count in the committed artifact; a truncation footer appears when larger. */
+    totalRows?: number;
+    /** Flags the matching row for emphasis, e.g. the risk outlier. */
+    flag?: {
+        key: string;
+        value: string | number;
+        color?: "default" | "danger" | "warning";
+    };
+};
+/**
+ * The capped tabular preview inside {@link ChainOfThoughtEvidence}: sticky
+ * header, quiet surface fill, optional flagged-row emphasis, and an explicit
+ * "N of M rows" footer whenever the preview is truncated.
+ */
+export declare const ChainOfThoughtEvidenceTable: import('react').MemoExoticComponent<({ className, columns, rows, totalRows, flag, ...props }: ChainOfThoughtEvidenceTableProps) => import("react").JSX.Element>;
+export type ChainOfThoughtMetricsProps = ComponentProps<"div">;
+/** A quiet inline stat row — no fills, separated by spacing alone. */
+export declare const ChainOfThoughtMetrics: import('react').MemoExoticComponent<({ className, role, ...props }: ChainOfThoughtMetricsProps) => import("react").JSX.Element>;
+export type ChainOfThoughtMetricProps = Omit<ComponentProps<"div">, "children" | "color"> & {
+    label: ReactNode;
+    value: ReactNode;
+    /** Qualifier under the value, e.g. "of ₹8,400 Cr book". */
+    sub?: ReactNode;
+    color?: "default" | "danger" | "warning" | "success" | "info";
+};
+export declare const ChainOfThoughtMetric: import('react').MemoExoticComponent<({ className, label, value, sub, color, role, ...props }: ChainOfThoughtMetricProps) => import("react").JSX.Element>;
 export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
     caption?: string;
 };

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

@@ -1,182 +1,391 @@
 "use client";
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import { Badge as C } from "../badge.js";
-import { Collapsible as p, CollapsibleTrigger as N, CollapsibleContent as O } from "../collapsible.js";
-import { Brain as v, ChevronDown as y } from "../../lib/icons.js";
-import { cn as i } from "../../lib/cn.js";
-import { createContext as T, memo as c, useMemo as b, useState as w, useRef as S, useCallback as z, useContext as j } from "react";
-function R({
-  prop: e,
-  defaultProp: a,
-  onChange: n
-}) {
-  const [s, r] = w(a), l = e !== void 0, h = l ? e : s, o = S(n);
-  o.current = n;
-  const u = z(
-    (m) => {
-      var f;
-      l || r(m), (f = o.current) == null || f.call(o, m);
-    },
-    [l]
-  );
-  return [h, u];
-}
-const g = T(
-  null
-), x = () => {
-  const e = j(g);
-  if (!e)
-    throw new Error(
-      "ChainOfThought components must be used within ChainOfThought"
-    );
-  return e;
-}, I = c(
+import { jsx as t, jsxs as d, Fragment as C } from "react/jsx-runtime";
+import { Badge as b } from "../badge.js";
+import { Collapsible as v, CollapsibleTrigger as y, CollapsibleContent as N } from "../collapsible.js";
+import { ChevronRight as w, WarningCircle as O, Database as k, ChevronDown as S } from "../../lib/icons.js";
+import { cn as r } from "../../lib/cn.js";
+import { memo as c, useState as z, useRef as E, useEffect as R } from "react";
+const j = c(
+  ({ className: o, role: i = "list", ...a }) => /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "chain-of-thought",
+      role: i,
+      className: r(
+        "w-full",
+        "[&>[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",
+        o
+      ),
+      ...a
+    }
+  )
+), M = c(
   ({
-    className: e,
+    className: o,
+    defaultOpen: i,
     open: a,
-    defaultOpen: n = !1,
-    onOpenChange: s,
-    children: r,
-    ...l
+    onOpenChange: n,
+    status: e = "complete",
+    role: s = "listitem",
+    "aria-busy": h,
+    ...m
   }) => {
-    const [h, o] = R({
-      prop: a,
-      defaultProp: n,
-      onChange: s
-    }), u = b(
-      () => ({ isOpen: h, setIsOpen: o }),
-      [h, o]
-    );
-    return /* @__PURE__ */ t(g.Provider, { value: u, children: /* @__PURE__ */ t("div", { className: i("max-w-prose space-y-4", e), ...l, children: r }) });
-  }
-), B = c(
-  ({ className: e, children: a, ...n }) => {
-    const { isOpen: s, setIsOpen: r } = x();
-    return /* @__PURE__ */ t(p, { onOpenChange: r, open: s, children: /* @__PURE__ */ d(
-      N,
+    const l = a !== void 0, [g, u] = z(
+      i ?? e === "active"
+    ), f = E(e), p = f.current !== "active" && e === "active", T = l ? a : p || g;
+    return R(() => {
+      const x = f.current;
+      f.current = e, !(x === "active" || e !== "active") && (l || u(!0), n == null || n(!0));
+    }, [l, n, e]), /* @__PURE__ */ t(
+      v,
       {
-        className: i(
-          "flex w-full items-center gap-2 text-base text-secondary transition-colors hover:text-foreground",
-          e
+        "data-slot": "chain-of-thought-step",
+        "data-status": e,
+        open: T,
+        onOpenChange: (x) => {
+          l || u(x), n == null || n(x);
+        },
+        role: s,
+        "aria-current": e === "active" ? "step" : void 0,
+        "aria-busy": h ?? (e === "active" || void 0),
+        className: r(
+          "group/cot-step relative pb-2",
+          // Connector rail: a 16px segment centred in the 28px gap between a
+          // collapsed step's icon and the next one (top-8 = 32px from the step
+          // top, ending 4px past its box). It stretches with an open step.
+          "before:absolute before:top-8 before:-bottom-1 before:left-2 before:w-px before:bg-border before:content-['']",
+          e === "complete" && "text-secondary",
+          e === "active" && "text-primary",
+          e === "pending" && "text-tertiary/60",
+          e === "error" && "text-danger",
+          o
         ),
-        ...n,
-        children: [
-          /* @__PURE__ */ t(v, { className: "size-4" }),
-          /* @__PURE__ */ t("span", { className: "flex-1 text-left", children: a ?? "Chain of Thought" }),
-          /* @__PURE__ */ t(
-            y,
-            {
-              className: i(
-                "size-4 transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
-                s ? "rotate-180" : "rotate-0"
-              )
-            }
-          )
-        ]
+        ...m
       }
-    ) });
+    );
   }
-), H = c(
+), _ = c(
   ({
-    className: e,
-    icon: a,
-    label: n,
-    description: s,
-    status: r = "complete",
-    children: l,
-    ...h
-  }) => /* @__PURE__ */ d(
-    "div",
+    className: o,
+    children: i,
+    leftIcon: a,
+    endContent: n,
+    swapIconOnHover: e = !0,
+    ...s
+  }) => /* @__PURE__ */ t(y, { asChild: !0, ...s, children: /* @__PURE__ */ d(
+    "button",
     {
-      className: i(
-        "flex gap-2 text-base",
-        {
-          complete: "text-secondary",
-          active: "text-primary",
-          pending: "text-tertiary/60"
-        }[r],
-        "fade-in-0 slide-in-from-top-2 animate-in motion-reduce:animate-none",
-        e
+      type: "button",
+      "data-slot": "chain-of-thought-trigger",
+      className: r(
+        "group/cot-trigger flex min-h-9 w-full cursor-pointer items-center gap-3 rounded-sm text-left text-base text-current outline-none",
+        "transition-colors duration-(--duration-fast) ease-out hover:text-primary",
+        "focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none",
+        o
       ),
-      ...h,
       children: [
-        /* @__PURE__ */ d("div", { className: "relative mt-0.5", children: [
-          a ? /* @__PURE__ */ t(a, { className: "size-4" }) : (
-            // ADS status markers are square (principle 6), not a filled dot.
-            /* @__PURE__ */ t(
-              "span",
-              {
-                "aria-hidden": !0,
-                className: "flex size-4 items-center justify-center",
-                children: /* @__PURE__ */ t("span", { className: "size-1.5 rounded-dot bg-current" })
-              }
-            )
-          ),
-          /* @__PURE__ */ t("div", { className: "absolute bottom-0 left-1/2 top-7 w-px -translate-x-1/2 bg-border" })
-        ] }),
-        /* @__PURE__ */ d("div", { className: "flex-1 space-y-2 overflow-hidden", children: [
-          /* @__PURE__ */ t("div", { children: n }),
-          s && /* @__PURE__ */ t("div", { className: "text-xs text-tertiary", children: s }),
-          l
-        ] })
+        /* @__PURE__ */ t(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: "relative z-10 block size-4 shrink-0",
+            children: a ? /* @__PURE__ */ d(C, { children: [
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  className: r(
+                    "absolute inset-0 flex items-center justify-center transition-opacity duration-(--duration-fast) ease-out [&>svg]:size-4 motion-reduce:transition-none",
+                    e && "group-hover/cot-trigger:opacity-0 group-data-[state=open]/cot-trigger:opacity-0"
+                  ),
+                  children: a
+                }
+              ),
+              e && /* @__PURE__ */ t(
+                w,
+                {
+                  className: r(
+                    "absolute inset-0 size-4 opacity-0 transition-[opacity,transform] duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                    "group-hover/cot-trigger:opacity-100 group-data-[state=open]/cot-trigger:opacity-100",
+                    "group-data-[state=open]/cot-trigger:rotate-90"
+                  )
+                }
+              )
+            ] }) : /* @__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__ */ t("span", { className: "min-w-0 flex-1", children: i }),
+        n != null && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: n })
       ]
     }
+  ) })
+), D = c(
+  ({ className: o, children: i, ...a }) => /* @__PURE__ */ t(
+    N,
+    {
+      "data-slot": "chain-of-thought-content",
+      className: r(
+        "overflow-hidden pl-7 pt-2 pb-1 text-foreground 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",
+        o
+      ),
+      ...a,
+      children: i
+    }
   )
-), P = c(
-  ({ className: e, ...a }) => /* @__PURE__ */ t(
+), A = c(
+  ({ className: o, ...i }) => /* @__PURE__ */ t(
     "div",
     {
-      className: i("flex flex-wrap items-center gap-2", e),
-      ...a
+      "data-slot": "chain-of-thought-item",
+      className: r(
+        "relative pl-4 text-base text-secondary",
+        "before:absolute before:top-2 before:left-0 before:size-1.5 before:rounded-dot before:bg-current before:content-['']",
+        o
+      ),
+      ...i
+    }
+  )
+), B = c(
+  ({ className: o, ...i }) => /* @__PURE__ */ t(
+    "div",
+    {
+      className: r("flex flex-wrap items-center gap-2", o),
+      ...i
     }
   )
-), k = c(
-  ({ className: e, children: a, ...n }) => /* @__PURE__ */ t(
-    C,
+), F = c(
+  ({ className: o, children: i, ...a }) => /* @__PURE__ */ t(
+    b,
     {
-      className: i("gap-1 font-normal", e),
+      className: r("gap-1 font-normal", o),
       color: "default",
       variant: "soft",
-      ...n,
-      children: a
+      ...a,
+      children: i
     }
   )
-), D = c(
-  ({ className: e, children: a, ...n }) => {
-    const { isOpen: s } = x();
-    return /* @__PURE__ */ t(p, { open: s, children: /* @__PURE__ */ t(
-      O,
+), I = c(
+  ({
+    className: o,
+    title: i,
+    tag: a,
+    meta: n,
+    source: e,
+    error: s,
+    icon: h,
+    defaultOpen: m = !1,
+    children: l,
+    ...g
+  }) => /* @__PURE__ */ d(
+    v,
+    {
+      "data-slot": "chain-of-thought-evidence",
+      "data-error": s != null || void 0,
+      defaultOpen: m,
+      className: r("w-full", o),
+      ...g,
+      children: [
+        /* @__PURE__ */ t(y, { asChild: !0, children: /* @__PURE__ */ d(
+          "button",
+          {
+            type: "button",
+            "data-slot": "chain-of-thought-evidence-trigger",
+            className: r(
+              "group/cot-evidence flex min-h-8 w-full cursor-pointer items-center gap-2 rounded-md text-left outline-none",
+              "transition-colors duration-(--duration-fast) ease-out hover:text-primary",
+              "focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none"
+            ),
+            children: [
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: r(
+                    "shrink-0 [&>svg]:size-3.5",
+                    s != null ? "text-danger" : "text-tertiary"
+                  ),
+                  children: h ?? (s != null ? /* @__PURE__ */ t(O, {}) : /* @__PURE__ */ t(k, {}))
+                }
+              ),
+              /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-secondary", children: i }),
+              a != null && /* @__PURE__ */ t(
+                b,
+                {
+                  color: "default",
+                  variant: "soft",
+                  className: "shrink-0 font-normal tabular-nums",
+                  children: a
+                }
+              ),
+              n != null && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: n }),
+              /* @__PURE__ */ t(
+                S,
+                {
+                  "aria-hidden": !0,
+                  className: r(
+                    "size-3.5 shrink-0 text-tertiary transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                    "group-data-[state=open]/cot-evidence:rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          N,
+          {
+            "data-slot": "chain-of-thought-evidence-content",
+            className: r(
+              "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__ */ d("div", { className: "flex flex-col gap-1.5 pt-1.5", children: [
+              s != null && /* @__PURE__ */ t("p", { className: "text-xs text-danger", children: s }),
+              l,
+              e != null && /* @__PURE__ */ t("p", { className: "text-xs text-tertiary", children: e })
+            ] })
+          }
+        )
+      ]
+    }
+  )
+), L = c(
+  ({
+    className: o,
+    columns: i,
+    rows: a,
+    totalRows: n,
+    flag: e,
+    ...s
+  }) => {
+    const h = n != null && n > a.length, m = (e == null ? void 0 : e.color) ?? "default";
+    return /* @__PURE__ */ d(
+      "div",
       {
-        className: i(
-          "mt-2 space-y-3",
-          "text-foreground outline-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",
-          e
-        ),
-        ...n,
-        children: a
+        "data-slot": "chain-of-thought-evidence-table",
+        className: r("overflow-hidden rounded-lg bg-surface", o),
+        ...s,
+        children: [
+          /* @__PURE__ */ t("div", { className: "max-h-56 overflow-auto", children: /* @__PURE__ */ d("table", { className: "w-full border-collapse text-xs tabular-nums", children: [
+            /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { className: "text-tertiary", children: i.map((l) => /* @__PURE__ */ t(
+              "th",
+              {
+                className: r(
+                  "sticky top-0 bg-surface px-2.5 py-1.5 font-medium whitespace-nowrap",
+                  l.align === "end" ? "text-right" : "text-left"
+                ),
+                children: l.label
+              },
+              l.key
+            )) }) }),
+            /* @__PURE__ */ t("tbody", { children: a.map((l, g) => {
+              const u = e != null && String(l[e.key]) === String(e.value);
+              return /* @__PURE__ */ t("tr", { className: r(u && "bg-muted"), children: i.map((f, p) => /* @__PURE__ */ t(
+                "td",
+                {
+                  className: r(
+                    "px-2.5 py-1 whitespace-nowrap",
+                    f.align === "end" ? "text-right" : "text-left",
+                    p === 0 ? "text-foreground" : "text-secondary",
+                    u && p === 0 && "font-semibold",
+                    u && p === 0 && m === "danger" && "text-danger",
+                    u && p === 0 && m === "warning" && "text-warning"
+                  ),
+                  children: l[f.key]
+                },
+                f.key
+              )) }, g);
+            }) })
+          ] }) }),
+          h && /* @__PURE__ */ d("p", { className: "px-2.5 py-1.5 text-xs text-tertiary tabular-nums", children: [
+            a.length,
+            " of ",
+            n,
+            " rows"
+          ] })
+        ]
       }
-    ) });
+    );
   }
-), E = c(
-  ({ className: e, children: a, caption: n, ...s }) => /* @__PURE__ */ d("div", { className: i("mt-2 space-y-2", e), ...s, children: [
-    /* @__PURE__ */ t("div", { className: "relative flex max-h-88 items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children: a }),
-    n && /* @__PURE__ */ t("p", { className: "text-xs text-tertiary", children: n })
+), W = c(
+  ({ className: o, role: i = "list", ...a }) => /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "chain-of-thought-metrics",
+      role: i,
+      className: r("flex flex-wrap items-stretch gap-x-6 gap-y-2", o),
+      ...a
+    }
+  )
+), X = {
+  default: "text-foreground",
+  danger: "text-danger",
+  warning: "text-warning",
+  success: "text-success",
+  info: "text-info"
+}, q = c(
+  ({
+    className: o,
+    label: i,
+    value: a,
+    sub: n,
+    color: e = "default",
+    role: s = "listitem",
+    ...h
+  }) => /* @__PURE__ */ d(
+    "div",
+    {
+      "data-slot": "chain-of-thought-metric",
+      "data-color": e,
+      role: s,
+      className: r("min-w-0", o),
+      ...h,
+      children: [
+        /* @__PURE__ */ t("div", { className: "text-xs text-tertiary", children: i }),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: r(
+              "text-base font-semibold tabular-nums",
+              X[e]
+            ),
+            children: a
+          }
+        ),
+        n != null && /* @__PURE__ */ t("div", { className: "text-xs text-tertiary", children: n })
+      ]
+    }
+  )
+), G = c(
+  ({ className: o, children: i, caption: a, ...n }) => /* @__PURE__ */ d("div", { className: r("space-y-2", o), ...n, children: [
+    /* @__PURE__ */ t("div", { className: "relative flex max-h-88 items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children: i }),
+    a && /* @__PURE__ */ t("p", { className: "text-xs text-tertiary", children: a })
   ] })
 );
-I.displayName = "ChainOfThought";
-B.displayName = "ChainOfThoughtHeader";
-H.displayName = "ChainOfThoughtStep";
-P.displayName = "ChainOfThoughtSearchResults";
-k.displayName = "ChainOfThoughtSearchResult";
+j.displayName = "ChainOfThought";
+M.displayName = "ChainOfThoughtStep";
+_.displayName = "ChainOfThoughtTrigger";
 D.displayName = "ChainOfThoughtContent";
-E.displayName = "ChainOfThoughtImage";
+A.displayName = "ChainOfThoughtItem";
+B.displayName = "ChainOfThoughtSearchResults";
+F.displayName = "ChainOfThoughtSearchResult";
+I.displayName = "ChainOfThoughtEvidence";
+L.displayName = "ChainOfThoughtEvidenceTable";
+W.displayName = "ChainOfThoughtMetrics";
+q.displayName = "ChainOfThoughtMetric";
+G.displayName = "ChainOfThoughtImage";
 export {
-  I as ChainOfThought,
+  j as ChainOfThought,
   D as ChainOfThoughtContent,
-  B as ChainOfThoughtHeader,
-  E as ChainOfThoughtImage,
-  k as ChainOfThoughtSearchResult,
-  P as ChainOfThoughtSearchResults,
-  H as ChainOfThoughtStep
+  I as ChainOfThoughtEvidence,
+  L as ChainOfThoughtEvidenceTable,
+  G as ChainOfThoughtImage,
+  A as ChainOfThoughtItem,
+  q as ChainOfThoughtMetric,
+  W as ChainOfThoughtMetrics,
+  F as ChainOfThoughtSearchResult,
+  B as ChainOfThoughtSearchResults,
+  M as ChainOfThoughtStep,
+  _ as ChainOfThoughtTrigger
 };