@actioneer/ads 1.0.7 → 1.0.9

package/components/audio-waveform.js

@@ -1,67 +1,344 @@
 "use client";
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
 import * as u from "react";
-import { Button as ee, buttonVariants as re } from "./button.js";
-import { Spinner as te } from "./spinner.js";
-import { 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")}`;
+import { Button as fe, buttonVariants as me } from "./button.js";
+import { Spinner as ce } from "./spinner.js";
+import { Warning as he, Pause as ge, Play as pe, Download as ue } from "../lib/icons.js";
+import { cn as X } from "../lib/cn.js";
+function L(r) {
+  if (!r || !Number.isFinite(r) || r < 0) return "0:00";
+  const t = Math.floor(r), s = Math.floor(t / 3600), d = Math.floor(t % 3600 / 60), l = t % 60;
+  return s > 0 ? `${s}:${String(d).padStart(2, "0")}:${String(l).padStart(2, "0")}` : `${d}:${String(l).padStart(2, "0")}`;
 }
-function B(t, e, a) {
-  return getComputedStyle(t).getPropertyValue(e).trim() || a;
+function ae(r, t, s) {
+  return getComputedStyle(r).getPropertyValue(t).trim() || s;
 }
-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 de(r, t, s) {
+  var e;
+  if (s) return s;
+  const d = t != null && t.includes("wav") ? "wav" : t != null && t.includes("mpeg") ? "mp3" : "audio", l = ((e = r.split("/").filter(Boolean).at(-1)) == null ? void 0 : e.split("?")[0]) || "recording";
+  return `${decodeURIComponent(l)}.${d}`;
 }
-function ge({
-  src: t,
-  durationSeconds: e,
-  contentType: a,
-  channels: c,
-  topLabel: d = "Agent",
-  bottomLabel: m = "User",
-  downloadName: U,
-  className: V
+function Ce({ look: r = "minimal", ...t }) {
+  return r === "classic" ? /* @__PURE__ */ a(Ne, { ...t }) : /* @__PURE__ */ a(Me, { ...t });
+}
+const Y = 40, z = 3, se = 5, be = 1024, J = 5;
+function ve(r, t) {
+  const s = new Array(t).fill(0);
+  if (!r.length) return s;
+  let d = 0;
+  for (let l = 0; l < t; l++) {
+    const e = Math.floor(l / t * r.length), n = Math.max(e + 1, Math.floor((l + 1) / t * r.length));
+    let y = 0;
+    for (let v = e; v < n && v < r.length; v++) {
+      const f = Math.abs(r[v] ?? 0);
+      f > y && (y = f);
+    }
+    s[l] = y, y > d && (d = y);
+  }
+  return d > 0 ? s.map((l) => l / d) : s;
+}
+function le(r, t, s) {
+  if (!r.length) return 0;
+  const d = Math.floor(t / s * r.length), l = Math.max(d + 1, Math.floor((t + 1) / s * r.length));
+  let e = 0;
+  for (let n = d; n < l && n < r.length; n++) e = Math.max(e, r[n] ?? 0);
+  return e;
+}
+function Q(r, t, s, d, l) {
+  const e = Math.min(l, s / 2, d / 2), n = (y) => Number(y.toFixed(2));
+  return `M${n(r + e)} ${n(t)}h${n(s - 2 * e)}a${n(e)} ${n(e)} 0 0 1 ${n(e)} ${n(e)}v${n(d - 2 * e)}a${n(e)} ${n(e)} 0 0 1 ${n(-e)} ${n(e)}h${n(-(s - 2 * e))}a${n(e)} ${n(e)} 0 0 1 ${n(-e)} ${n(-e)}v${n(-(d - 2 * e))}a${n(e)} ${n(e)} 0 0 1 ${n(e)} ${n(-e)}Z`;
+}
+function xe(r, t, s, d, l) {
+  const e = { rest: "", hover: "", played: "" }, n = r[0];
+  if (!n || t <= 0) return e;
+  const y = r[1] ?? n, v = Math.floor(t / se), f = Y / 2, M = z / 2, N = 2.5;
+  for (let g = 0; g < v; g++) {
+    const x = g * se + 1, m = le(n, g, v), D = le(y, g, v);
+    let $;
+    if (s) {
+      const p = m * (f - 2), P = D * (f - 2);
+      p < N && P < N ? $ = Q(x, f - M, z, z, M) : $ = (p >= N ? Q(x, f - 1 - p, z, p, M) : "") + (P >= N ? Q(x, f + 1, z, P, M) : "");
+    } else {
+      const p = Math.max(z, Math.max(m, D) * (Y - 4));
+      $ = Q(x, f - p / 2, z, p, M);
+    }
+    const C = x + z / 2;
+    C <= d ? e.played += $ : C <= l ? e.hover += $ : e.rest += $;
+  }
+  return e;
+}
+function we() {
+  return /* @__PURE__ */ a("svg", { viewBox: "0 0 256 256", "aria-hidden": "true", className: "block size-3.5", children: /* @__PURE__ */ a(
+    "path",
+    {
+      d: "M87 52 L87 204 L210 128 Z",
+      className: "fill-current stroke-current",
+      strokeWidth: 28,
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function ye() {
+  return /* @__PURE__ */ b("svg", { viewBox: "0 0 256 256", "aria-hidden": "true", className: "block size-3.5 fill-current", children: [
+    /* @__PURE__ */ a("rect", { x: 56, y: 40, width: 48, height: 176, rx: 16 }),
+    /* @__PURE__ */ a("rect", { x: 152, y: 40, width: 48, height: 176, rx: 16 })
+  ] });
+}
+function Me({
+  src: r,
+  durationSeconds: t,
+  contentType: s,
+  channels: d,
+  topLabel: l = "Agent",
+  bottomLabel: e = "User",
+  downloadName: n,
+  className: y
 }) {
-  const F = u.useRef(null), p = u.useRef(null), [G, b] = u.useState(0), [q, D] = u.useState(e ?? 0), [k, C] = u.useState(!1), [E, x] = u.useState(!1), [f, R] = u.useState(null), v = (c ?? 0) > 1, J = le(t, a, U);
+  const v = u.useRef(null), f = u.useRef(null), M = u.useRef(null), N = u.useRef(!1), [g, x] = u.useState(0), [m, D] = u.useState(t ?? 0), [$, C] = u.useState(!1), [p, P] = u.useState(!1), [E, K] = u.useState(null), [Z, R] = u.useState([]), [I, T] = u.useState(0), [B, j] = u.useState(null), G = (d ?? 0) > 1, ee = de(r, s, n);
   u.useEffect(() => {
-    const o = F.current;
+    const o = f.current;
+    if (!o) return;
+    const i = () => T(Math.floor(o.clientWidth));
+    i();
+    const c = new ResizeObserver(i);
+    return c.observe(o), () => c.disconnect();
+  }, []), u.useEffect(() => {
+    const o = v.current;
     if (!o) return;
-    let M = !1;
-    return b(0), D(e ?? 0), C(!1), x(!1), R(null), o.replaceChildren(), (async () => {
+    let i = !1;
+    return x(0), D(t ?? 0), C(!1), P(!1), K(null), R([]), o.replaceChildren(), (async () => {
+      try {
+        const { default: c } = await import("wavesurfer.js");
+        if (i) return;
+        const h = c.create({
+          container: o,
+          url: r,
+          duration: t,
+          height: 1,
+          cursorWidth: 0,
+          interact: !1,
+          hideScrollbar: !0,
+          renderFunction: () => {
+          }
+        });
+        M.current = h;
+        const U = () => {
+          const S = h.getDecodedData();
+          if (!S) return;
+          const V = Math.min(S.numberOfChannels, 2), ie = [];
+          for (let oe = 0; oe < V; oe++)
+            ie.push(ve(S.getChannelData(oe), be));
+          R(ie);
+        };
+        h.on("decode", U), h.on("ready", (S) => {
+          U(), D(S), C(!0);
+        }), h.on("timeupdate", (S) => x(S)), h.on("seeking", (S) => x(S)), h.on("play", () => P(!0)), h.on("pause", () => P(!1)), h.on("finish", () => {
+          P(!1), x(h.getDuration());
+        }), h.on("error", () => {
+          K("Recording could not be loaded"), C(!1);
+        });
+      } catch {
+        i || K("Recording could not be loaded");
+      }
+    })(), () => {
+      var c;
+      i = !0, (c = M.current) == null || c.destroy(), M.current = null;
+    };
+  }, [r, t]);
+  const w = $ && !E, A = () => {
+    var o;
+    w && ((o = M.current) == null || o.playPause());
+  }, k = (o) => {
+    const i = M.current;
+    if (!i || !w || m <= 0) return;
+    const c = Math.min(Math.max(o, 0), m);
+    i.setTime(c), x(c);
+  }, H = (o) => {
+    const i = f.current;
+    if (!i) return null;
+    const c = i.getBoundingClientRect();
+    return c.width > 0 ? Math.min(1, Math.max(0, (o - c.left) / c.width)) : null;
+  }, te = (o) => {
+    if (!w || o.button !== 0) return;
+    const i = H(o.clientX);
+    i != null && (N.current = !0, o.currentTarget.setPointerCapture(o.pointerId), k(i * m));
+  }, re = (o) => {
+    if (!w) return;
+    const i = H(o.clientX);
+    i != null && (j(i), N.current && k(i * m));
+  }, q = (o) => {
+    N.current = !1, o.currentTarget.hasPointerCapture(o.pointerId) && o.currentTarget.releasePointerCapture(o.pointerId);
+  }, ne = (o) => {
+    if (!w) return;
+    const c = {
+      ArrowRight: g + J,
+      ArrowUp: g + J,
+      ArrowLeft: g - J,
+      ArrowDown: g - J,
+      Home: 0,
+      End: m
+    }[o.key];
+    c !== void 0 && (o.preventDefault(), k(c));
+  }, _ = m > 0 ? Math.min(1, g / m) : 0, W = w && B != null, F = u.useMemo(
+    () => w ? xe(
+      Z,
+      I,
+      G,
+      _ * I,
+      W ? (B ?? 0) * I : -1
+    ) : { rest: "", hover: "", played: "" },
+    [Z, I, G, _, W, B, w]
+  ), O = G ? `Seek recording, ${l} above, ${e} below` : "Seek recording";
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: X("flex items-center gap-3 rounded-l bg-wg2 py-2 pl-2 pr-4 text-on-warm-grey-primary", y),
+      "data-slot": "audio-waveform",
+      "data-look": "minimal",
+      children: [
+        /* @__PURE__ */ a("div", { ref: v, hidden: !0 }),
+        /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            onClick: A,
+            disabled: !w,
+            "aria-label": p ? "Pause recording" : "Play recording",
+            className: X(
+              "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-wg12 text-white",
+              "outline-none transition-[background-color,transform] motion-reduce:transition-none",
+              "enabled:hover:bg-wg11 enabled:active:scale-[0.97] enabled:active:bg-wg11",
+              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+              "disabled:cursor-default disabled:opacity-30"
+            ),
+            children: p ? /* @__PURE__ */ a(ye, {}) : /* @__PURE__ */ a(we, {})
+          }
+        ),
+        /* @__PURE__ */ b(
+          "div",
+          {
+            ref: f,
+            role: "slider",
+            tabIndex: w ? 0 : -1,
+            "aria-label": O,
+            "aria-valuemin": 0,
+            "aria-valuemax": Math.round(m),
+            "aria-valuenow": Math.round(g),
+            "aria-valuetext": `${L(g)} of ${L(m)}`,
+            "aria-disabled": !w,
+            onPointerDown: te,
+            onPointerMove: re,
+            onPointerUp: q,
+            onPointerCancel: q,
+            onPointerLeave: () => j(null),
+            onKeyDown: ne,
+            className: X(
+              "relative h-10 min-w-0 flex-1 touch-none select-none rounded-xs outline-none",
+              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-wg2",
+              w ? "cursor-pointer" : "cursor-default"
+            ),
+            children: [
+              /* @__PURE__ */ b(
+                "svg",
+                {
+                  width: I,
+                  height: Y,
+                  viewBox: `0 0 ${Math.max(I, 1)} ${Y}`,
+                  preserveAspectRatio: "none",
+                  "aria-hidden": "true",
+                  className: "block h-10 w-full",
+                  children: [
+                    /* @__PURE__ */ a("path", { d: F.rest, className: "fill-wg7" }),
+                    /* @__PURE__ */ a("path", { d: F.hover, className: "fill-wg8" }),
+                    /* @__PURE__ */ a("path", { d: F.played, className: "fill-wg12" })
+                  ]
+                }
+              ),
+              W && /* @__PURE__ */ a(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute bottom-full z-10 mb-1.5 -translate-x-1/2 whitespace-nowrap rounded-s bg-wg12 px-1.5 py-0.5 font-mono text-xs tabular-nums text-white",
+                  style: { left: `${(B ?? 0) * 100}%` },
+                  children: L((B ?? 0) * m)
+                }
+              ),
+              !$ && !E && /* @__PURE__ */ b("div", { className: "absolute inset-0 flex items-center gap-2 text-s text-on-warm-grey-secondary", children: [
+                /* @__PURE__ */ a(ce, { variant: "content", size: "xs", "aria-hidden": !0 }),
+                "Loading recording"
+              ] }),
+              E && /* @__PURE__ */ a("div", { role: "alert", className: "absolute inset-0 flex items-center text-s text-danger-700", children: E })
+            ]
+          }
+        ),
+        /* @__PURE__ */ b("span", { className: "shrink-0 font-mono text-s tabular-nums text-on-warm-grey-secondary", children: [
+          L(g),
+          " / ",
+          L(m)
+        ] }),
+        /* @__PURE__ */ a(
+          "a",
+          {
+            href: r,
+            download: ee,
+            "aria-label": "Download recording",
+            className: X(
+              "-mr-2 inline-flex size-7 shrink-0 items-center justify-center rounded-s text-on-warm-grey-secondary",
+              "outline-none transition-[background-color,color,transform] motion-reduce:transition-none",
+              "hover:bg-wg4 hover:text-on-warm-grey-primary active:scale-[0.97]",
+              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-wg2"
+            ),
+            children: /* @__PURE__ */ a(ue, { "aria-hidden": "true", className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function Ne({
+  src: r,
+  durationSeconds: t,
+  contentType: s,
+  channels: d,
+  topLabel: l = "Agent",
+  bottomLabel: e = "User",
+  downloadName: n,
+  className: y
+}) {
+  const v = u.useRef(null), f = u.useRef(null), [M, N] = u.useState(0), [g, x] = u.useState(t ?? 0), [m, D] = u.useState(!1), [$, C] = u.useState(!1), [p, P] = u.useState(null), E = (d ?? 0) > 1, K = de(r, s, n);
+  u.useEffect(() => {
+    const R = v.current;
+    if (!R) return;
+    let I = !1;
+    return N(0), x(t ?? 0), D(!1), C(!1), P(null), R.replaceChildren(), (async () => {
       try {
-        const [{ default: w }, { default: L }] = await Promise.all([
+        const [{ default: T }, { default: B }] = 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, S = T / 2, y = 4, I = 2, $ = Math.max(1, Math.floor(_ / (y + 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;
+        if (I) return;
+        const j = ae(R, "--foreground", "currentColor"), G = ae(R, "--muted-foreground", "currentColor"), ee = ae(R, "--background", "Canvas"), w = (k, H) => {
+          const te = k[0] ?? [], re = k[1] ?? k[0] ?? [], { width: q, height: ne } = H.canvas, _ = ne / 2, W = 4, F = 2, O = Math.max(1, Math.floor(q / (W + F))), o = (i, c) => {
+            if (!i.length) return 0;
+            const h = Math.floor(c / O * i.length), U = Math.max(h + 1, Math.floor((c + 1) / O * i.length));
+            let S = 0;
+            for (let V = h; V < U; V++) S = Math.max(S, Math.abs(Number(i[V]) || 0));
+            return S;
           };
-          for (let n = 0; n < $; n++) {
-            const g = n * (y + I), h = Math.max(1, H(Y, n) * (S - 2)), j = Math.max(1, H(Z, n) * (S - 2));
-            P.fillRect(g, S - h, y, h), P.fillRect(g, S + 1, y, j);
+          for (let i = 0; i < O; i++) {
+            const c = i * (W + F), h = Math.max(1, o(te, i) * (_ - 2)), U = Math.max(1, o(re, i) * (_ - 2));
+            H.fillRect(c, _ - h, W, h), H.fillRect(c, _ + 1, W, U);
           }
-        }, i = w.create({
-          container: o,
-          url: t,
-          duration: e,
+        }, A = T.create({
+          container: R,
+          url: r,
+          duration: t,
           height: 92,
           normalize: !0,
-          waveColor: O,
-          progressColor: N,
-          cursorColor: N,
+          waveColor: G,
+          progressColor: j,
+          cursorColor: j,
           cursorWidth: 1,
           barWidth: 2,
           barGap: 1,
@@ -69,80 +346,80 @@ function ge({
           barMinHeight: 1,
           dragToSeek: !0,
           hideScrollbar: !0,
-          renderFunction: v ? X : void 0,
+          renderFunction: E ? w : void 0,
           plugins: [
-            L.create({
-              lineColor: N,
-              labelColor: Q,
-              labelBackground: N,
+            B.create({
+              lineColor: j,
+              labelColor: ee,
+              labelBackground: j,
               labelSize: 11,
-              formatTimeCallback: A
+              formatTimeCallback: L
             })
           ]
         });
-        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);
+        f.current = A, A.on("ready", (k) => {
+          x(k), D(!0);
+        }), A.on("timeupdate", (k) => N(k)), A.on("seeking", (k) => N(k)), A.on("play", () => C(!0)), A.on("pause", () => C(!1)), A.on("finish", () => {
+          C(!1), N(A.getDuration());
+        }), A.on("error", () => {
+          P("Recording could not be loaded."), D(!1);
         });
       } catch {
-        M || R("Recording could not be loaded.");
+        I || P("Recording could not be loaded.");
       }
     })(), () => {
-      var w;
-      M = !0, (w = p.current) == null || w.destroy(), p.current = null;
+      var T;
+      I = !0, (T = f.current) == null || T.destroy(), f.current = null;
     };
-  }, [t, e, v]);
-  const K = () => {
-    var o;
-    !k || f || (o = p.current) == null || o.playPause();
+  }, [r, t, E]);
+  const Z = () => {
+    var R;
+    !m || p || (R = f.current) == null || R.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-normal", children: "Recording" }),
-        /* @__PURE__ */ r("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: v ? `${d} above · ${m.toLowerCase()} below` : a ?? "Audio" })
+  return /* @__PURE__ */ b("div", { className: X("space-y-3", y), "data-slot": "audio-waveform", "data-look": "classic", children: [
+    /* @__PURE__ */ b("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ b("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ a("p", { className: "text-base font-normal", children: "Recording" }),
+        /* @__PURE__ */ a("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: E ? `${l} above · ${e.toLowerCase()} below` : s ?? "Audio" })
       ] }),
-      /* @__PURE__ */ r("p", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: A(q) })
+      /* @__PURE__ */ a("p", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: L(g) })
     ] }),
-    /* @__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-xs font-normal 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__ */ b("div", { className: "relative overflow-hidden py-2", children: [
+      E && /* @__PURE__ */ b("div", { className: "pointer-events-none absolute inset-x-0 top-2 z-10 flex h-[92px] flex-col items-center justify-between text-xs font-normal uppercase tracking-wide text-muted-foreground", children: [
+        /* @__PURE__ */ a("span", { className: "rounded-sm bg-card/85 px-1.5 py-0.5", children: l }),
+        /* @__PURE__ */ a("span", { className: "rounded-sm bg-card/85 px-1.5 py-0.5", children: e })
       ] }),
-      /* @__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, { variant: "content", size: "xs", "aria-hidden": !0 }),
+      /* @__PURE__ */ a("div", { ref: v, className: "min-h-[92px]" }),
+      !m && !p && /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center bg-background/70", children: /* @__PURE__ */ b("div", { className: "inline-flex items-center gap-2 rounded-md bg-background px-3 py-1.5 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ a(ce, { variant: "content", size: "xs", "aria-hidden": !0 }),
         "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
+      p && /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ b("div", { className: "inline-flex items-center gap-2 rounded-md bg-background px-3 py-1.5 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ a(he, { className: "size-3.5", "aria-hidden": "true" }),
+        p
       ] }) })
     ] }),
-    /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ r(
-        ee,
+    /* @__PURE__ */ b("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ a(
+        fe,
         {
           type: "button",
           variant: "secondary",
-          onClick: K,
-          disabled: !k || !!f,
-          "aria-label": E ? "Pause recording" : "Play recording",
-          startContent: E ? /* @__PURE__ */ r(ne, { "aria-hidden": "true" }) : /* @__PURE__ */ r(oe, { "aria-hidden": "true" }),
+          onClick: Z,
+          disabled: !m || !!p,
+          "aria-label": $ ? "Pause recording" : "Play recording",
+          startContent: $ ? /* @__PURE__ */ a(ge, { "aria-hidden": "true" }) : /* @__PURE__ */ a(pe, { "aria-hidden": "true" }),
           className: "font-mono tabular-nums",
-          children: A(G)
+          children: L(M)
         }
       ),
-      /* @__PURE__ */ l("a", { href: t, download: J, className: re({ variant: "ghost" }), children: [
-        /* @__PURE__ */ r(ie, { "aria-hidden": "true", className: "size-4" }),
+      /* @__PURE__ */ b("a", { href: r, download: K, className: me({ variant: "ghost" }), children: [
+        /* @__PURE__ */ a(ue, { "aria-hidden": "true", className: "size-4" }),
         "Audio"
       ] })
     ] })
   ] });
 }
 export {
-  ge as AudioWaveform
+  Ce as AudioWaveform
 };

package/components/autocomplete.js

@@ -3,7 +3,7 @@ import { jsxs as x, jsx as c } from "react/jsx-runtime";
 import * as i from "react";
 import { MotionConfig as z, AnimatePresence as q, motion as O } from "motion/react";
 import { Search as P, Check as B } from "../lib/icons.js";
-import { cn as y } from "../lib/cn.js";
+import { cn as w } from "../lib/cn.js";
 import { inputBaseClass as F } from "./field.js";
 import { floatVariants as K } from "../lib/motion.js";
 import { Ripple as Q } from "./ripple.js";
@@ -20,7 +20,7 @@ const T = i.forwardRef(
     id: I,
     "aria-describedby": M
   }, L) => {
-    const d = u.find((e) => e.value === f), [m, h] = i.useState((d == null ? void 0 : d.label) ?? ""), [r, a] = i.useState(!1), [n, w] = i.useState(-1), N = i.useRef(null), k = i.useRef(null), b = i.useId();
+    const d = u.find((e) => e.value === f), [m, h] = i.useState((d == null ? void 0 : d.label) ?? ""), [r, a] = i.useState(!1), [n, y] = i.useState(-1), N = i.useRef(null), k = i.useRef(null), b = i.useId();
     i.useEffect(() => {
       h((d == null ? void 0 : d.label) ?? (p ? f ?? "" : ""));
     }, [d, f, p]);
@@ -42,7 +42,7 @@ const T = i.forwardRef(
       e == null || e.scrollIntoView({ block: "nearest" });
     }, [r, n]);
     const g = (e) => {
-      l.length !== 0 && w((t) => {
+      l.length !== 0 && y((t) => {
         let o = t;
         for (let v = 0; v < l.length; v++)
           if (o = (o + e + l.length) % l.length, !l[o].disabled) return o;
@@ -98,11 +98,11 @@ const T = i.forwardRef(
             placeholder: A,
             value: m,
             onChange: (e) => {
-              h(e.target.value), a(!0), w(-1), p && (s == null || s(e.target.value));
+              h(e.target.value), a(!0), y(-1), p && (s == null || s(e.target.value));
             },
             onFocus: () => a(!0),
             onKeyDown: $,
-            className: y(F, "h-10 pl-9", S)
+            className: w(F, "h-10 pl-9", S)
           }
         )
       ] }),
@@ -117,9 +117,9 @@ const T = i.forwardRef(
           animate: "visible",
           exit: "hidden",
           style: { transformOrigin: "top" },
-          className: y(
+          className: w(
             "absolute z-50 mt-1.5 max-h-60 w-full overflow-auto p-1",
-            "rounded-md border border-border bg-elevated shadow-elevation"
+            "rounded-md border border-border bg-elevated"
           ),
           children: [
             /* @__PURE__ */ c(Q, { origin: "top" }),
@@ -139,10 +139,10 @@ const T = i.forwardRef(
                   role: "option",
                   "aria-selected": o,
                   "aria-disabled": e.disabled || void 0,
-                  onMouseEnter: () => !e.disabled && w(t),
+                  onMouseEnter: () => !e.disabled && y(t),
                   onMouseDown: (j) => j.preventDefault(),
                   onClick: () => D(t),
-                  className: y(
+                  className: w(
                     "flex cursor-pointer items-center justify-between gap-2",
                     "rounded-sm px-2 py-1.5 text-m text-foreground select-none",
                     v && !e.disabled && "bg-action-primary-soft text-brand-text",