@actioneer/ads 0.5.0 → 0.5.2

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 export declare const aiChartVariants: (props?: ({
-    status?: "error" | "pending" | "querying" | "partial" | "rendering" | "ready" | "cancelled" | null | undefined;
+    status?: "error" | "ready" | "pending" | "querying" | "partial" | "rendering" | "cancelled" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type AIChartStatus = NonNullable<VariantProps<typeof aiChartVariants>["status"]>;
 export interface AIChartProgress {

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

@@ -10,4 +10,5 @@ export * from './speech-input';
 export * from './task';
 export * from './task-progress';
 export * from './tool';
+export * from './transcript';
 export * from './voice';

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+/**
+ * Transcript — the ADS conversation-transcript element (ported from the voice
+ * product's call panel). A props-driven turn list for reviewing a finished
+ * agent↔user exchange: agent turns sit left on a whisper fill, user turns sit
+ * right on a muted fill, each headed by an uppercase role label and an
+ * optional time.
+ *
+ * Sentiment scanning: pass `tone` on a user turn ("positive" | "negative")
+ * to tint that bubble with the semantic success/danger fill and prefix the
+ * role label with a square `rounded-dot` marker — reviewers jump straight to
+ * the reactions that mattered. The component renders tones; the CALLER owns
+ * the analysis (lexicon, model, or human tags). Agent turns stay neutral:
+ * the agent reads a script, so only the user's reaction carries signal.
+ *
+ * No runtime dependency — compose it under any transport, and place it as a
+ * SIBLING of `MessageResponse`, never inside it (prose wrapper clobbers
+ * composed components).
+ */
+export type TranscriptTone = "positive" | "negative" | "neutral";
+export interface TranscriptTurn {
+    id: string;
+    role: "agent" | "user";
+    text: string;
+    /** Short time label shown beside the role, e.g. "0:12". */
+    timeLabel?: string;
+    /** Sentiment tint — meaningful on user turns; ignored for agents. */
+    tone?: TranscriptTone;
+}
+export interface TranscriptProps extends React.HTMLAttributes<HTMLDivElement> {
+    turns: TranscriptTurn[];
+    /** Role heading overrides (defaults: Agent / User). */
+    agentLabel?: string;
+    userLabel?: string;
+    emptyMessage?: string;
+}
+export declare function Transcript({ turns, agentLabel, userLabel, emptyMessage, className, ...props }: TranscriptProps): React.JSX.Element;

package/components/ai-elements/transcript.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { cn as t } from "../../lib/cn.js";
+function g({
+  turns: i,
+  agentLabel: c = "Agent",
+  userLabel: o = "User",
+  emptyMessage: m = "No transcript captured yet.",
+  className: n,
+  ...d
+}) {
+  return i.length === 0 ? /* @__PURE__ */ e("p", { className: t("text-sm text-muted-foreground", n), "data-slot": "transcript", ...d, children: m }) : /* @__PURE__ */ e("div", { className: t("space-y-3", n), "data-slot": "transcript", ...d, children: i.map((s) => {
+    const r = s.role === "user", a = r ? s.tone ?? "neutral" : "neutral";
+    return /* @__PURE__ */ e("div", { className: t("flex w-full", r ? "justify-end" : "justify-start"), children: /* @__PURE__ */ l(
+      "div",
+      {
+        className: t(
+          "max-w-[84%] rounded-lg px-3 py-2.5",
+          r ? "bg-muted" : "bg-muted/25",
+          a === "positive" && "bg-success-100/70",
+          a === "negative" && "bg-danger-100/70"
+        ),
+        children: [
+          /* @__PURE__ */ l("div", { className: t("mb-1 flex items-center gap-3", r && "justify-end"), children: [
+            a !== "neutral" && /* @__PURE__ */ e(
+              "span",
+              {
+                "aria-label": a === "positive" ? "Positive response" : "Negative response",
+                className: t(
+                  "size-1.5 rounded-dot",
+                  a === "positive" ? "bg-success-600" : "bg-danger-600"
+                )
+              }
+            ),
+            /* @__PURE__ */ e("p", { className: "text-xs font-medium uppercase text-muted-foreground", children: r ? o : c }),
+            s.timeLabel && /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: s.timeLabel })
+          ] }),
+          /* @__PURE__ */ e("p", { className: t("whitespace-pre-wrap break-words text-sm leading-relaxed", r && "text-right"), children: s.text })
+        ]
+      }
+    ) }, s.id);
+  }) });
+}
+export {
+  g as Transcript
+};

package/components/assistant-ui/composer-harness.js

@@ -22,6 +22,8 @@ import "../file-dropzone.js";
 import "../scroll-area.js";
 import "../stepper.js";
 import "../resizable-panel.js";
+import "react";
+import { Bolt as a, ChevronDown as f, CheckList as h, Sparkles as g } from "../../lib/icons.js";
 import "../input.js";
 import "../input-field.js";
 import "../textarea.js";
@@ -34,9 +36,7 @@ import "../autocomplete.js";
 import "../slider.js";
 import "../segmented.js";
 import "../modal.js";
-import "react";
 import "react-dom";
-import { Bolt as a, ChevronDown as f, CheckList as h, Sparkles as g } from "../../lib/icons.js";
 import "../drawer.js";
 import "../popover.js";
 import "motion/react";

package/components/audio-waveform.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/**
+ * AudioWaveform — the ADS recording player (ported from the voice product's
+ * call panel). One waveform with play/seek, hover scrubbing, and a download
+ * action; controls are ADS Buttons and the elapsed time lives ON the play
+ * control (0:00 at rest — no separate time strip).
+ *
+ * Speaker-split mode: for two-channel conversation audio (channel 0 = agent,
+ * channel 1 = the caller) the agent's energy draws ABOVE the centerline and
+ * the caller's BELOW it, so turn-taking reads at a glance — one waveform,
+ * never two stacked lanes. Enabled automatically when `channels > 1`;
+ * label the halves with `topLabel` / `bottomLabel` (default Agent / User).
+ *
+ * Colors ride the theme tokens (waveform = muted-foreground, progress =
+ * foreground) — never hardcoded.
+ */
+export interface AudioWaveformProps {
+    /** Audio source URL (same-origin or CORS-served). */
+    src: string;
+    /** Known duration — lets the waveform render its scale before decode. */
+    durationSeconds?: number;
+    contentType?: string;
+    /** >1 enables speaker-split rendering (ch0 above, ch1 below). */
+    channels?: number;
+    topLabel?: string;
+    bottomLabel?: string;
+    downloadName?: string;
+    className?: string;
+}
+export declare function AudioWaveform({ src, durationSeconds, contentType, channels, topLabel, bottomLabel, downloadName, className, }: AudioWaveformProps): React.JSX.Element;

package/components/audio-waveform.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import * as u from "react";
+import { Button as ee, buttonVariants as re } from "./button.js";
+import { Loader as te, Warning as ae, Pause as ne, Play as oe, Download as ie } from "../lib/icons.js";
+import { cn as se } from "../lib/cn.js";
+function A(t) {
+  if (!t || !Number.isFinite(t) || t < 0) return "0:00";
+  const e = Math.floor(t), a = Math.floor(e / 3600), c = Math.floor(e % 3600 / 60), d = e % 60;
+  return a > 0 ? `${a}:${String(c).padStart(2, "0")}:${String(d).padStart(2, "0")}` : `${c}:${String(d).padStart(2, "0")}`;
+}
+function B(t, e, a) {
+  return getComputedStyle(t).getPropertyValue(e).trim() || a;
+}
+function le(t, e, a) {
+  var m;
+  if (a) return a;
+  const c = e != null && e.includes("wav") ? "wav" : e != null && e.includes("mpeg") ? "mp3" : "audio", d = ((m = t.split("/").filter(Boolean).at(-1)) == null ? void 0 : m.split("?")[0]) || "recording";
+  return `${decodeURIComponent(d)}.${c}`;
+}
+function fe({
+  src: t,
+  durationSeconds: e,
+  contentType: a,
+  channels: c,
+  topLabel: d = "Agent",
+  bottomLabel: m = "User",
+  downloadName: U,
+  className: V
+}) {
+  const F = u.useRef(null), p = u.useRef(null), [G, b] = u.useState(0), [L, D] = u.useState(e ?? 0), [k, C] = u.useState(!1), [E, x] = u.useState(!1), [f, R] = u.useState(null), v = (c ?? 0) > 1, q = le(t, a, U);
+  u.useEffect(() => {
+    const o = F.current;
+    if (!o) return;
+    let M = !1;
+    return b(0), D(e ?? 0), C(!1), x(!1), R(null), o.replaceChildren(), (async () => {
+      try {
+        const [{ default: w }, { default: K }] = await Promise.all([
+          import("wavesurfer.js"),
+          import("wavesurfer.js/dist/plugins/hover.esm.js")
+        ]);
+        if (M) return;
+        const N = B(o, "--foreground", "currentColor"), O = B(o, "--muted-foreground", "currentColor"), Q = B(o, "--background", "Canvas"), X = (s, P) => {
+          const Y = s[0] ?? [], Z = s[1] ?? s[0] ?? [], { width: _, height: T } = P.canvas, y = T / 2, S = 4, I = 2, $ = Math.max(1, Math.floor(_ / (S + I))), H = (n, g) => {
+            if (!n.length) return 0;
+            const h = Math.floor(g / $ * n.length), j = Math.max(h + 1, Math.floor((g + 1) / $ * n.length));
+            let W = 0;
+            for (let z = h; z < j; z++) W = Math.max(W, Math.abs(Number(n[z]) || 0));
+            return W;
+          };
+          for (let n = 0; n < $; n++) {
+            const g = n * (S + I), h = Math.max(1, H(Y, n) * (y - 2)), j = Math.max(1, H(Z, n) * (y - 2));
+            P.fillRect(g, y - h, S, h), P.fillRect(g, y + 1, S, j);
+          }
+        }, i = w.create({
+          container: o,
+          url: t,
+          duration: e,
+          height: 92,
+          normalize: !0,
+          waveColor: O,
+          progressColor: N,
+          cursorColor: N,
+          cursorWidth: 1,
+          barWidth: 2,
+          barGap: 1,
+          barRadius: 2,
+          barMinHeight: 1,
+          dragToSeek: !0,
+          hideScrollbar: !0,
+          renderFunction: v ? X : void 0,
+          plugins: [
+            K.create({
+              lineColor: N,
+              labelColor: Q,
+              labelBackground: N,
+              labelSize: 11,
+              formatTimeCallback: A
+            })
+          ]
+        });
+        p.current = i, i.on("ready", (s) => {
+          D(s), C(!0);
+        }), i.on("timeupdate", (s) => b(s)), i.on("seeking", (s) => b(s)), i.on("play", () => x(!0)), i.on("pause", () => x(!1)), i.on("finish", () => {
+          x(!1), b(i.getDuration());
+        }), i.on("error", () => {
+          R("Recording could not be loaded."), C(!1);
+        });
+      } catch {
+        M || R("Recording could not be loaded.");
+      }
+    })(), () => {
+      var w;
+      M = !0, (w = p.current) == null || w.destroy(), p.current = null;
+    };
+  }, [t, e, v]);
+  const J = () => {
+    var o;
+    !k || f || (o = p.current) == null || o.playPause();
+  };
+  return /* @__PURE__ */ l("div", { className: se("space-y-3", V), "data-slot": "audio-waveform", children: [
+    /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ l("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ r("p", { className: "text-base font-medium", children: "Recording" }),
+        /* @__PURE__ */ r("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: v ? `${d} above · ${m.toLowerCase()} below` : a ?? "Audio" })
+      ] }),
+      /* @__PURE__ */ r("p", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: A(L) })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "relative overflow-hidden py-2", children: [
+      v && /* @__PURE__ */ l("div", { className: "pointer-events-none absolute inset-x-0 top-2 z-10 flex h-[92px] flex-col items-center justify-between text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+        /* @__PURE__ */ r("span", { className: "rounded-sm bg-card/85 px-1.5 py-0.5", children: d }),
+        /* @__PURE__ */ r("span", { className: "rounded-sm bg-card/85 px-1.5 py-0.5", children: m })
+      ] }),
+      /* @__PURE__ */ r("div", { ref: F, className: "min-h-[92px]" }),
+      !k && !f && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center bg-background/70", children: /* @__PURE__ */ l("div", { className: "inline-flex items-center gap-2 rounded-md bg-background px-3 py-1.5 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ r(te, { className: "size-3.5 animate-spin motion-reduce:animate-none", "aria-hidden": "true" }),
+        "Loading waveform"
+      ] }) }),
+      f && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ l("div", { className: "inline-flex items-center gap-2 rounded-md bg-background px-3 py-1.5 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ r(ae, { className: "size-3.5", "aria-hidden": "true" }),
+        f
+      ] }) })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ r(
+        ee,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: J,
+          disabled: !k || !!f,
+          "aria-label": E ? "Pause recording" : "Play recording",
+          startContent: E ? /* @__PURE__ */ r(ne, { "aria-hidden": "true" }) : /* @__PURE__ */ r(oe, { "aria-hidden": "true" }),
+          className: "font-mono tabular-nums",
+          children: A(G)
+        }
+      ),
+      /* @__PURE__ */ l("a", { href: t, download: q, className: re({ variant: "ghost" }), children: [
+        /* @__PURE__ */ r(ie, { "aria-hidden": "true", className: "size-4" }),
+        "Audio"
+      ] })
+    ] })
+  ] });
+}
+export {
+  fe as AudioWaveform
+};

package/components/breadcrumbs.js

@@ -1,50 +1,62 @@
 "use client";
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import * as t from "react";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import * as r from "react";
 import { ChevronRight as g } from "../lib/icons.js";
-import { cn as a } from "../lib/cn.js";
-const u = t.createContext({
+import { cn as n } from "../lib/cn.js";
+const l = r.createContext({
   count: 0
-}), l = t.createContext(0), b = t.forwardRef(
-  ({ className: i, children: n, ...c }, r) => {
-    const o = t.Children.toArray(n);
-    return /* @__PURE__ */ e("nav", { ref: r, "aria-label": "Breadcrumb", className: i, ...c, children: /* @__PURE__ */ e("ol", { className: "flex items-center gap-1.5 text-xs", children: /* @__PURE__ */ e(u.Provider, { value: { count: o.length }, children: o.map((m, s) => /* @__PURE__ */ e(l.Provider, { value: s, children: m }, s)) }) }) });
+}), u = r.createContext(0), p = r.forwardRef(
+  ({ className: i, children: o, ...c }, t) => {
+    const s = r.Children.toArray(o);
+    return /* @__PURE__ */ e(
+      "nav",
+      {
+        ref: t,
+        "aria-label": "Breadcrumb",
+        className: n(
+          "flex min-h-12 w-full items-center border-b border-border",
+          i
+        ),
+        ...c,
+        children: /* @__PURE__ */ e("ol", { className: "flex min-w-0 items-center gap-1.5 text-xs", children: /* @__PURE__ */ e(l.Provider, { value: { count: s.length }, children: s.map((m, a) => /* @__PURE__ */ e(u.Provider, { value: a, children: m }, a)) }) })
+      }
+    );
   }
 );
-b.displayName = "Breadcrumbs";
-const h = t.forwardRef(({ className: i, href: n, isCurrent: c, children: r, ...o }, m) => {
-  const { count: s } = t.useContext(u), x = t.useContext(l) === s - 1, d = "inline-flex items-center", f = c ? /* @__PURE__ */ e(
+p.displayName = "Breadcrumbs";
+const h = r.forwardRef(({ className: i, href: o, isCurrent: c, children: t, ...s }, m) => {
+  const { count: a } = r.useContext(l), x = r.useContext(u) === a - 1, d = "inline-flex items-center", f = c ? /* @__PURE__ */ e(
     "span",
     {
       "aria-current": "page",
-      className: a(d, "text-muted-foreground"),
-      children: r
+      className: n(d, "font-medium text-foreground"),
+      children: t
     }
-  ) : n ? /* @__PURE__ */ e(
+  ) : o ? /* @__PURE__ */ e(
     "a",
     {
-      href: n,
-      className: a(
+      href: o,
+      className: n(
         d,
-        "font-medium text-foreground transition-colors hover:underline",
+        "font-medium text-muted-foreground transition-colors hover:text-foreground hover:underline",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm"
       ),
-      children: r
+      children: t
     }
-  ) : /* @__PURE__ */ e("span", { className: a(d, "text-muted-foreground"), children: r });
-  return /* @__PURE__ */ p(
+  ) : /* @__PURE__ */ e("span", { className: n(d, "text-muted-foreground"), children: t });
+  return /* @__PURE__ */ b(
     "li",
     {
       ref: m,
-      className: a("flex items-center gap-1.5", i),
-      ...o,
+      className: n("flex items-center gap-1.5", i),
+      ...s,
       children: [
         f,
         !x && /* @__PURE__ */ e(
           g,
           {
             "aria-hidden": !0,
-            className: "size-3.5 shrink-0 text-muted-foreground"
+            className: "size-3.5 shrink-0 text-border-strong"
           }
         )
       ]
@@ -54,5 +66,5 @@ const h = t.forwardRef(({ className: i, href: n, isCurrent: c, children: r, ...o
 h.displayName = "BreadcrumbItem";
 export {
   h as BreadcrumbItem,
-  b as Breadcrumbs
+  p as Breadcrumbs
 };

package/components/button.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as r, jsx as b } from "react/jsx-runtime";
+import { jsxs as r, jsx as u } from "react/jsx-runtime";
 import * as c from "react";
 import { cva as v } from "class-variance-authority";
 import { cn as t } from "../lib/cn.js";
@@ -22,7 +22,7 @@ const p = v(
       variant: {
         solid: "bg-brand text-brand-foreground shadow-[var(--inner-glow-cta)] hover:bg-brand-hover",
         secondary: "bg-fill text-fill-foreground shadow-[var(--inner-glow-fill)] hover:bg-fill/70",
-        outline: "border-border-strong bg-transparent text-foreground hover:bg-muted",
+        outline: "border-border bg-transparent text-foreground hover:border-border-strong hover:bg-muted",
         ghost: "bg-transparent text-foreground hover:bg-muted",
         soft: "bg-muted text-foreground shadow-[var(--inner-glow-fill)] hover:bg-fill",
         link: "bg-transparent text-foreground underline-offset-4 hover:underline active:scale-none",
@@ -43,31 +43,31 @@ const p = v(
 ), x = c.forwardRef(
   ({
     className: n,
-    variant: s,
-    size: o,
+    variant: o,
+    size: s,
     isLoading: e = !1,
     startContent: i,
     endContent: a,
     fullWidth: d,
     disabled: l,
     children: g,
-    ...f
-  }, u) => /* @__PURE__ */ r(
+    ...b
+  }, f) => /* @__PURE__ */ r(
     "button",
     {
-      ref: u,
+      ref: f,
       disabled: l || e,
       "aria-busy": e || void 0,
       className: t(
-        p({ variant: s, size: o }),
+        p({ variant: o, size: s }),
         d && "w-full",
         // Real disabled fades; loading keeps the brand color
         e ? "opacity-100" : "disabled:opacity-50",
         n
       ),
-      ...f,
+      ...b,
       children: [
-        e && /* @__PURE__ */ b(
+        e && /* @__PURE__ */ u(
           m,
           {
             size: "sm",

package/components/chart.d.ts

@@ -203,9 +203,11 @@ export interface FunnelChartProps {
     valueKey: string;
     height?: number;
     formatValue?: (value: number) => string;
-    /** Custom data-bearing stage label, or false to hide labels. */
+    /** Custom per-stage metric label (default: % of the first stage, above the
+     *  bar), or false to hide it. Stage name + value under each column are
+     *  structural and always render. */
     label?: FunnelLabelRenderer | false;
-    /** Space reserved on the right for the label channel. */
+    /** @deprecated The stepped funnel has no right-hand label channel; ignored. */
     labelWidth?: number;
     tooltip?: ChartTooltipRenderer | false;
     className?: string;