@actioneer/ads 0.5.1 → 0.5.3

package/components/alert.js

@@ -5,7 +5,7 @@ import { cva as u } 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 = u(
-  "flex w-full items-start gap-4 rounded-2xl bg-muted px-4 py-3",
+  "flex w-full items-start gap-4 rounded-2xl bg-muted p-4",
   {
     variants: {
       variant: {
@@ -58,7 +58,7 @@ const h = u(
   }
 );
 N.displayName = "Alert";
-const y = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
+const b = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "p",
   {
     ref: a,
@@ -66,8 +66,8 @@ const y = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
     ...r
   }
 ));
-y.displayName = "AlertTitle";
-const b = i.forwardRef(({ className: t, ...r }, a) => (
+b.displayName = "AlertTitle";
+const y = i.forwardRef(({ className: t, ...r }, a) => (
   // 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.
@@ -80,9 +80,9 @@ const b = i.forwardRef(({ className: t, ...r }, a) => (
     }
   )
 ));
-b.displayName = "AlertDescription";
+y.displayName = "AlertDescription";
 export {
   N as Alert,
-  b as AlertDescription,
-  y as AlertTitle
+  y as AlertDescription,
+  b as AlertTitle
 };

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;