@epicbagel/saas-kit 1.10.0 → 1.11.1

package/dist/{chunk-M2ZNC3TK.js → chunk-HLAHOVEI.js}

@@ -12,6 +12,94 @@ function DictationProvider({ transcribe, scopeKey, children }) {
 }
 var EMPTY = { state: "idle", transcript: "", interimTranscript: "", error: null, canRetry: false };
 var MIME_TYPES = ["audio/webm;codecs=opus", "audio/mp4", "audio/ogg;codecs=opus", "audio/webm"];
+var SILENCE = [];
+function createAudioLevels() {
+  let bands = SILENCE;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot: () => bands,
+    update: (next) => {
+      if (next.length === bands.length && next.every((value, index) => value === bands[index])) return;
+      bands = next;
+      listeners.forEach((listener) => listener());
+    }
+  };
+}
+function meterStream(stream, levels, active) {
+  let context;
+  let source;
+  let analyser;
+  let frame;
+  let stopped = false;
+  const stop = () => {
+    if (stopped) return;
+    stopped = true;
+    if (frame !== void 0) cancelAnimationFrame(frame);
+    try {
+      source?.disconnect();
+    } catch {
+    }
+    try {
+      analyser?.disconnect();
+    } catch {
+    }
+    try {
+      void context?.close().catch(() => {
+      });
+    } catch {
+    }
+    levels.update(SILENCE);
+  };
+  try {
+    const Constructor = window.AudioContext ?? window.webkitAudioContext;
+    if (!Constructor || typeof requestAnimationFrame !== "function") return stop;
+    context = new Constructor();
+    source = context.createMediaStreamSource(stream);
+    analyser = context.createAnalyser();
+    analyser.fftSize = 512;
+    analyser.smoothingTimeConstant = 0.7;
+    source.connect(analyser);
+    const bins = new Uint8Array(analyser.frequencyBinCount);
+    const binWidth = context.sampleRate / analyser.fftSize;
+    const highest = Math.min(8e3, context.sampleRate / 2);
+    let sampledAt = -Infinity;
+    const sample = (time) => {
+      if (stopped) return;
+      if (!active()) {
+        stop();
+        return;
+      }
+      try {
+        if (time - sampledAt >= 40) {
+          sampledAt = time;
+          analyser.getByteFrequencyData(bins);
+          const bands = Array.from({ length: 24 }, (_, index) => {
+            const from = Math.min(bins.length - 1, Math.floor(80 * (highest / 80) ** (index / 24) / binWidth));
+            const to = Math.min(bins.length, Math.max(from + 1, Math.ceil(80 * (highest / 80) ** ((index + 1) / 24) / binWidth)));
+            let total = 0;
+            for (let bin = from; bin < to; bin++) total += bins[bin];
+            return Math.round(total / (to - from) / 255 * 1e3) / 1e3;
+          });
+          levels.update(bands);
+        }
+        frame = requestAnimationFrame(sample);
+      } catch {
+        stop();
+      }
+    };
+    if (context.state === "suspended") void context.resume().catch(stop);
+    frame = requestAnimationFrame(sample);
+  } catch {
+    stop();
+  }
+  return stop;
+}
 function recognitionConstructor() {
   if (typeof window === "undefined") return void 0;
   const speech = window;
@@ -29,7 +117,12 @@ function recognitionError(code) {
   if (code === "no-speech") return "No speech was detected. Try again.";
   return "Speech recognition stopped. Try again.";
 }
+function releaseMeter(session) {
+  session.stopMeter?.();
+  session.stopMeter = void 0;
+}
 function releaseTracks(session) {
+  releaseMeter(session);
   session.stream?.getTracks().forEach((track) => track.stop());
   session.stream = void 0;
 }
@@ -123,7 +216,8 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
       nativeEnded: false,
       transcript: "",
       interim: "",
-      notified: /* @__PURE__ */ new Set()
+      notified: /* @__PURE__ */ new Set(),
+      audioLevels: transcribe ? createAudioLevels() : void 0
     };
     current.current = session;
     setSnapshot({ ...EMPTY, state: "requesting" });
@@ -163,6 +257,7 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
         };
         recorder.start();
         session.phase = "recording";
+        session.stopMeter = meterStream(stream, session.audioLevels, () => isCurrent(session) && session.phase === "recording");
         setSnapshot({ ...EMPTY, state: "recording" });
       } catch (error) {
         releaseTracks(session);
@@ -228,6 +323,7 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
   }, [cancel, continuous, isCurrent, lang, scope, scopeGeneration, transcribe]);
   const finish = useCallback(async (session) => {
     if (!isCurrent(session)) return null;
+    releaseMeter(session);
     session.phase = "transcribing";
     setSnapshot((previous) => ({ ...previous, state: "transcribing", error: null, canRetry: false }));
     if (!session.transcribe) {
@@ -307,7 +403,7 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
     return session.finish;
   }, [cancel, finish, isCurrent]);
   const visibleSnapshot = current.current && !isCurrent(current.current) ? EMPTY : snapshot;
-  return { ...visibleSnapshot, supported, start, stop, retry, cancel };
+  return { ...visibleSnapshot, audioLevels: current.current && isCurrent(current.current) ? current.current.audioLevels : void 0, supported, start, stop, retry, cancel };
 }
 
 export {

package/dist/{chunk-KUG4ONYC.js → chunk-KF4X37DP.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   AgentAudioVisualizerBar
-} from "./chunk-VBKJXNEL.js";
+} from "./chunk-5OF6D3GH.js";
 import {
   Button
 } from "./chunk-W326GKML.js";
@@ -11,8 +11,8 @@ import {
 
 // src/primitives/voice-session-controls.tsx
 import { useSyncExternalStore } from "react";
-import { Mic, MicOff, PhoneOff, AudioLines } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Mic, MicOff, Square, AudioLines } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 var SILENCE = [];
 var silence = () => SILENCE;
 var noSubscription = () => () => {
@@ -20,7 +20,7 @@ var noSubscription = () => () => {
 var DEFAULT_LABELS = {
   disconnected: "Voice chat",
   connecting: "Connecting\u2026",
-  listening: "Listening",
+  listening: "Listening\u2026",
   thinking: "Thinking\u2026",
   speaking: "Speaking",
   reconnecting: "Reconnecting\u2026",
@@ -30,7 +30,10 @@ var DEFAULT_LABELS = {
   mute: "Mute microphone",
   unmute: "Unmute microphone",
   muted: "Microphone muted",
-  retry: "Retry voice chat"
+  retry: "Retry voice chat",
+  endShort: "End voice",
+  muteShort: "Mute",
+  unmuteShort: "Unmute"
 };
 function VoiceSessionControls({
   state,
@@ -55,34 +58,44 @@ function VoiceSessionControls({
     {
       "data-slot": "voice-session-controls",
       "data-state": state,
-      className: cn("flex min-w-0 items-center gap-2", active && "w-full flex-col gap-3 py-4", !active && "flex-wrap", className),
+      className: cn("min-w-0", active ? "@container/voice w-full" : "flex flex-wrap items-center gap-2", className),
       children: [
-        active ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            AgentAudioVisualizerBar,
-            {
-              "aria-hidden": "true",
-              size: "sm",
-              barCount: 5,
-              state: state === "reconnecting" ? "connecting" : state,
-              volumeBands: volumeBands ?? liveBands
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { role: "status", className: "text-sm text-muted-foreground", children: muted && state === "listening" ? copy.muted : copy[state] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        active ? /* @__PURE__ */ jsxs("div", { "data-slot": "voice-session-strip", className: "flex w-full flex-wrap items-center gap-4 bg-primary/5 p-4 @2xl/voice:flex-nowrap @2xl/voice:px-5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 basis-full items-center gap-3 @2xl/voice:basis-auto @2xl/voice:gap-4", children: [
+            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn(
+              "flex size-12 shrink-0 items-center justify-center rounded-full ring-8 ring-primary/5 @sm/voice:size-14",
+              muted ? "bg-muted text-muted-foreground" : "bg-primary text-primary-foreground"
+            ), children: muted ? /* @__PURE__ */ jsx(MicOff, { className: "size-5" }) : /* @__PURE__ */ jsx(Mic, { className: "size-5" }) }),
             /* @__PURE__ */ jsx(
+              AgentAudioVisualizerBar,
+              {
+                "aria-hidden": "true",
+                size: "sm",
+                barCount: 5,
+                className: "shrink-0 text-primary [&>div]:w-1",
+                state: muted && state === "listening" ? "disconnected" : state === "reconnecting" ? "connecting" : state,
+                volumeBands: muted && state === "listening" ? SILENCE : volumeBands ?? liveBands
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { role: "status", className: "min-w-0 flex-1 text-sm font-medium text-primary", children: muted && state === "listening" ? copy.muted : copy[state] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
               Button,
               {
                 type: "button",
-                variant: "ghost",
-                size: "icon",
-                className: "min-h-[44px] min-w-[44px] shrink-0",
+                variant: "outline",
+                size: "sm",
+                className: "min-h-[44px] shrink-0 rounded-xl bg-background px-3 text-foreground",
                 "aria-label": muted ? copy.unmute : copy.mute,
                 title: muted ? copy.unmute : copy.mute,
                 "aria-pressed": muted,
                 disabled: waiting,
                 onClick: () => onMutedChange(!muted),
-                children: muted ? /* @__PURE__ */ jsx(MicOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Mic, { "aria-hidden": "true" })
+                children: [
+                  muted ? /* @__PURE__ */ jsx(Mic, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(MicOff, { "aria-hidden": "true" }),
+                  muted ? copy.unmuteShort : copy.muteShort
+                ]
               }
             ),
             /* @__PURE__ */ jsxs(
@@ -90,14 +103,14 @@ function VoiceSessionControls({
               {
                 type: "button",
                 variant: "outline",
-                shape: "pill",
-                className: "min-h-[44px] shrink-0",
+                size: "sm",
+                className: "min-h-[44px] shrink-0 rounded-xl bg-background px-3 text-foreground",
                 "aria-label": copy.end,
                 title: copy.end,
                 onClick: onEnd,
                 children: [
-                  /* @__PURE__ */ jsx(PhoneOff, { "aria-hidden": "true" }),
-                  copy.end
+                  /* @__PURE__ */ jsx(Square, { "aria-hidden": "true", className: "fill-current" }),
+                  copy.endShort
                 ]
               }
             )

package/dist/{chunk-XB2D4NQK.cjs → chunk-NKWHDI4C.cjs}

@@ -110,14 +110,15 @@ function AgentAudioVisualizerBar({
         return 1e3;
     }
   }, [state, _barCount]);
+  const meteredListening = state === "listening" && volumeBands !== void 0;
   const highlightedIndices = _chunk2BSFYU22cjs.useAgentAudioVisualizerBarAnimator.call(void 0, 
-    state,
+    meteredListening ? "speaking" : state,
     _barCount,
     sequencerInterval
   );
   const bands = _react.useMemo.call(void 0, 
-    () => state === "speaking" ? resolvedVolumeBands : new Array(_barCount).fill(0),
-    [state, resolvedVolumeBands, _barCount]
+    () => state === "speaking" || meteredListening ? resolvedVolumeBands : new Array(_barCount).fill(0),
+    [state, meteredListening, resolvedVolumeBands, _barCount]
   );
   if (children && Array.isArray(children)) {
     throw new Error("AgentAudioVisualizerBar children must be a single element.");

package/dist/{chunk-UW67GSZ4.cjs → chunk-YMI3X2YL.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunkXB2D4NQKcjs = require('./chunk-XB2D4NQK.cjs');
+var _chunkNKWHDI4Ccjs = require('./chunk-NKWHDI4C.cjs');
 
 
 var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
@@ -20,7 +20,7 @@ var noSubscription = () => () => {
 var DEFAULT_LABELS = {
   disconnected: "Voice chat",
   connecting: "Connecting\u2026",
-  listening: "Listening",
+  listening: "Listening\u2026",
   thinking: "Thinking\u2026",
   speaking: "Speaking",
   reconnecting: "Reconnecting\u2026",
@@ -30,7 +30,10 @@ var DEFAULT_LABELS = {
   mute: "Mute microphone",
   unmute: "Unmute microphone",
   muted: "Microphone muted",
-  retry: "Retry voice chat"
+  retry: "Retry voice chat",
+  endShort: "End voice",
+  muteShort: "Mute",
+  unmuteShort: "Unmute"
 };
 function VoiceSessionControls({
   state,
@@ -55,34 +58,44 @@ function VoiceSessionControls({
     {
       "data-slot": "voice-session-controls",
       "data-state": state,
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex min-w-0 items-center gap-2", active && "w-full flex-col gap-3 py-4", !active && "flex-wrap", className),
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-w-0", active ? "@container/voice w-full" : "flex flex-wrap items-center gap-2", className),
       children: [
-        active ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkXB2D4NQKcjs.AgentAudioVisualizerBar,
-            {
-              "aria-hidden": "true",
-              size: "sm",
-              barCount: 5,
-              state: state === "reconnecting" ? "connecting" : state,
-              volumeBands: _nullishCoalesce(volumeBands, () => ( liveBands))
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { role: "status", className: "text-sm text-muted-foreground", children: muted && state === "listening" ? copy.muted : copy[state] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+        active ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "voice-session-strip", className: "flex w-full flex-wrap items-center gap-4 bg-primary/5 p-4 @2xl/voice:flex-nowrap @2xl/voice:px-5", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 basis-full items-center gap-3 @2xl/voice:basis-auto @2xl/voice:gap-4", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "aria-hidden": "true", className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+              "flex size-12 shrink-0 items-center justify-center rounded-full ring-8 ring-primary/5 @sm/voice:size-14",
+              muted ? "bg-muted text-muted-foreground" : "bg-primary text-primary-foreground"
+            ), children: muted ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.MicOff, { className: "size-5" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Mic, { className: "size-5" }) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkNKWHDI4Ccjs.AgentAudioVisualizerBar,
+              {
+                "aria-hidden": "true",
+                size: "sm",
+                barCount: 5,
+                className: "shrink-0 text-primary [&>div]:w-1",
+                state: muted && state === "listening" ? "disconnected" : state === "reconnecting" ? "connecting" : state,
+                volumeBands: muted && state === "listening" ? SILENCE : _nullishCoalesce(volumeBands, () => ( liveBands))
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { role: "status", className: "min-w-0 flex-1 text-sm font-medium text-primary", children: muted && state === "listening" ? copy.muted : copy[state] })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
               _chunkJDEXZGIYcjs.Button,
               {
                 type: "button",
-                variant: "ghost",
-                size: "icon",
-                className: "min-h-[44px] min-w-[44px] shrink-0",
+                variant: "outline",
+                size: "sm",
+                className: "min-h-[44px] shrink-0 rounded-xl bg-background px-3 text-foreground",
                 "aria-label": muted ? copy.unmute : copy.mute,
                 title: muted ? copy.unmute : copy.mute,
                 "aria-pressed": muted,
                 disabled: waiting,
                 onClick: () => onMutedChange(!muted),
-                children: muted ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.MicOff, { "aria-hidden": "true" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Mic, { "aria-hidden": "true" })
+                children: [
+                  muted ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Mic, { "aria-hidden": "true" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.MicOff, { "aria-hidden": "true" }),
+                  muted ? copy.unmuteShort : copy.muteShort
+                ]
               }
             ),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -90,14 +103,14 @@ function VoiceSessionControls({
               {
                 type: "button",
                 variant: "outline",
-                shape: "pill",
-                className: "min-h-[44px] shrink-0",
+                size: "sm",
+                className: "min-h-[44px] shrink-0 rounded-xl bg-background px-3 text-foreground",
                 "aria-label": copy.end,
                 title: copy.end,
                 onClick: onEnd,
                 children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.PhoneOff, { "aria-hidden": "true" }),
-                  copy.end
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Square, { "aria-hidden": "true", className: "fill-current" }),
+                  copy.endShort
                 ]
               }
             )