@epicbagel/saas-kit 1.10.0 → 1.11.0

package/README.md

@@ -20,14 +20,18 @@ Peer dependencies: `react` and `react-dom` (18 or 19), `lucide-react`
 Pass a controlled `voiceSession` to `Chat` or `ChatInput` to show start, mute,
 end, connection and speaking controls alongside a separate dictation mic.
 Dictation is disabled during a live call and the typed draft is preserved.
-`VoiceSessionControls` is also exported on its own.
+The active session appears as a compact horizontal strip above the text field:
+microphone badge, audio bars, status, latest utterance, **Mute** and **End voice**.
+It wraps its controls on narrow screens. Pass the latest user utterance as
+`voiceSession.transcript`; this is plain preview text and never submits or replaces
+the typed draft. `VoiceSessionControls` is also exported on its own.
 The host owns audio, authentication, transcripts, retries and cleanup; the kit
 does not import a voice provider. Stop and release audio tracks before setting
 `state: "error"` or unmounting. Every label is replaceable through `labels`.
 
 ```tsx
 <Chat messages={messages} onSend={sendMessage} voiceSession={{
-  state: voiceState, muted, error,
+  state: voiceState, muted, error, transcript: latestUserUtterance, audioLevels,
   onStart: startVoice, onEnd: endVoice, onMutedChange: setMuted,
 }} />
 ```
@@ -36,7 +40,10 @@ does not import a voice provider. Stop and release audio tracks before setting
 
 Wrap the application in `DictationProvider` to use an authenticated transcription
 API for every `VoiceDictationButton`, including buttons nested in chat, forms or
-another component library. The existing dialog records until **Done**, shows
+another component library. A compact recorder shows the elapsed time and LiveKit
+audio bars measured from the recording stream, without opening a second microphone.
+It also works with hidden/programmatic triggers and inside another dialog.
+The recorder runs until **Done**, shows
 **Transcribing…**, then commits the returned text once. Failed requests keep the
 take available for retry. Cancel stops microphone tracks, aborts the request and
 ignores a late answer. The kit never persists audio or knows provider credentials.
@@ -62,6 +69,9 @@ cannot be retried under the new scope.
 `useDictation` (`hooks/use-dictation`) exposes the same capture lifecycle for a
 custom trigger such as press-and-hold: `start()`, `stop()`, `retry()`, `cancel()`,
 `state`, `supported`, `transcript`, `interimTranscript`, `error` and `canRetry`.
+For API recording, `audioLevels` exposes a subscribable snapshot of real microphone
+levels. Subscribe only the waveform to keep audio sampling out of form renders;
+native recognition has no audio-level source.
 `stop()` and `retry()` return the completed text, or `null` after cancellation or
 failure. Choose either that result or `onTranscript` to commit; using both would
 duplicate the host action. The callback receives one complete API transcript,
@@ -164,7 +174,8 @@ public in 1.1.0, and these were the decisions about its props then:
   for the textarea's starting height; there is no class-name or `rows` prop.
   The textarea grows with its text (`field-sizing: content`).
 - **Compact mobile replies.** Opt into `Chat.mobileCompactComposer` to fold
-  an active conversation's empty composer into one row below 768px. Focusing
+  an active conversation's empty composer into a short text row above its
+  controls below 768px, keeping all four actions clear of the text. Focusing
   its textarea expands it; leaving the composer folds it again only when
   there is no draft or staged file. The same textarea stays mounted, and
   its file menu and voice dialog keep an editing session open. New

package/dist/{chunk-VBKJXNEL.js → chunk-5OF6D3GH.js}

@@ -110,14 +110,15 @@ function AgentAudioVisualizerBar({
         return 1e3;
     }
   }, [state, _barCount]);
+  const meteredListening = state === "listening" && volumeBands !== void 0;
   const highlightedIndices = useAgentAudioVisualizerBarAnimator(
-    state,
+    meteredListening ? "speaking" : state,
     _barCount,
     sequencerInterval
   );
   const bands = useMemo(
-    () => 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-7QTFYEPE.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,11 @@ 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",
+  transcriptPlaceholder: "Speak to continue the conversation."
 };
 function VoiceSessionControls({
   state,
@@ -40,6 +44,7 @@ function VoiceSessionControls({
   onMutedChange,
   disabled = false,
   error,
+  transcript,
   volumeBands,
   audioLevels,
   labels,
@@ -55,34 +60,55 @@ 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.jsxs.call(void 0, "div", { className: "min-w-0 flex-1 space-y-1", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { role: "status", className: "block text-sm font-medium text-primary", children: muted && state === "listening" ? copy.muted : copy[state] }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "p",
+                {
+                  "data-slot": "voice-session-transcript",
+                  title: transcript || void 0,
+                  className: _chunkKWLSBTB2cjs.cn.call(void 0, "truncate text-sm font-normal", transcript ? "text-foreground" : "text-muted-foreground"),
+                  children: transcript || copy.transcriptPlaceholder
+                }
+              )
+            ] })
+          ] }),
+          /* @__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 +116,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
                 ]
               }
             )

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-KQBXAQAY.cjs

@@ -0,0 +1,221 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } 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 _chunkNKWHDI4Ccjs = require('./chunk-NKWHDI4C.cjs');
+
+
+var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+
+var _chunkZZ7ICQR2cjs = require('./chunk-ZZ7ICQR2.cjs');
+
+// src/primitives/voice-dictation-button.tsx
+
+
+
+
+
+
+var _react = require('react');
+var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+function VoiceDictationButton({
+  onCommit,
+  onCancel,
+  title = "Dictate your message",
+  caption = "Recording",
+  lang = "en-US",
+  continuous = true,
+  className,
+  size = "sm",
+  showLabel = false,
+  children,
+  disabled = false,
+  visibility = "visible",
+  shrink = true
+}) {
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const capture = _chunkZZ7ICQR2cjs.useDictation.call(void 0, { lang, continuous });
+  const { transcript, interimTranscript: interim, supported, error } = capture;
+  const generation = _react.useRef.call(void 0, 0);
+  const finishing = _react.useRef.call(void 0, false);
+  const previousFocus = _react.useRef.call(void 0, null);
+  const elapsed = useRecordingTime(capture.state);
+  const busy = capture.state === "requesting" || capture.state === "transcribing";
+  const openOverlay = _react.useCallback.call(void 0, () => {
+    previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    generation.current++;
+    finishing.current = false;
+    setOpen(true);
+    void capture.start();
+  }, [capture.start]);
+  const closeOverlay = _react.useCallback.call(void 0, () => {
+    generation.current++;
+    finishing.current = false;
+    capture.cancel();
+    setOpen(false);
+  }, [capture.cancel]);
+  const handleDone = _react.useCallback.call(void 0, async () => {
+    if (finishing.current || busy) return;
+    if (capture.state === "error" && !capture.canRetry) {
+      void capture.start();
+      return;
+    }
+    finishing.current = true;
+    const started = generation.current;
+    const final = await (capture.canRetry ? capture.retry() : capture.stop());
+    if (started !== generation.current) return;
+    finishing.current = false;
+    if (final === null) return;
+    closeOverlay();
+    if (final) onCommit(final);
+    else _optionalChain([onCancel, 'optionalCall', _ => _()]);
+  }, [busy, capture.canRetry, capture.retry, capture.start, capture.state, capture.stop, onCommit, onCancel, closeOverlay]);
+  const handleCancel = _react.useCallback.call(void 0, () => {
+    closeOverlay();
+    _optionalChain([onCancel, 'optionalCall', _2 => _2()]);
+  }, [closeOverlay, onCancel]);
+  _react.useEffect.call(void 0, () => {
+    if (open && capture.state === "idle") handleCancel();
+  }, [capture.state, handleCancel, open]);
+  _react.useEffect.call(void 0, () => {
+    return () => {
+      generation.current++;
+    };
+  }, []);
+  if (!supported) return null;
+  const displayTranscript = `${transcript}${interim ? (transcript ? " " : "") + interim : ""}`;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    children ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "button",
+        onClick: openOverlay,
+        disabled,
+        "aria-label": "Start dictation",
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, visibility === "hidden" && "hidden", className),
+        children
+      }
+    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkJDEXZGIYcjs.Button,
+      {
+        type: "button",
+        onClick: openOverlay,
+        disabled,
+        variant: "outline",
+        size,
+        "aria-label": "Start dictation",
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, "transition-colors", visibility === "hidden" && "hidden", !shrink && "shrink-0", className),
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Mic, { className: "h-4 w-4" }),
+          showLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Speak" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      DialogPrimitive.Root,
+      {
+        open,
+        onOpenChange: (next) => {
+          if (!next) handleCancel();
+        },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Portal, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          DialogPrimitive.Content,
+          {
+            "aria-label": "Voice dictation",
+            "aria-labelledby": void 0,
+            "data-slot": "voice-dictation-panel",
+            "data-state": capture.state,
+            onCloseAutoFocus: (event) => {
+              event.preventDefault();
+              if (_optionalChain([previousFocus, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.isConnected])) previousFocus.current.focus();
+            },
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && !event.shiftKey && !(event.target instanceof HTMLElement && event.target.closest("button, input, textarea, select"))) {
+                event.preventDefault();
+                void handleDone();
+              }
+            },
+            className: "fixed bottom-4 left-1/2 z-[200] flex max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 flex-col gap-3 overflow-y-auto rounded-2xl border border-border bg-background p-4 text-foreground shadow-lg outline-hidden sm:bottom-6",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0 space-y-1", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Title, { className: "text-sm font-medium", children: title || "Voice dictation" }),
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { role: "status", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+                    busy ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.LoaderCircle, { "aria-hidden": "true", className: "size-3.5 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Mic, { "aria-hidden": "true", className: "size-3.5" }),
+                    capture.state === "transcribing" ? "Transcribing\u2026" : capture.state === "requesting" ? "Waiting for microphone\u2026" : error ? "Recording not saved" : capture.state === "ready" ? "Ready" : caption
+                  ] })
+                ] }),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "time", { "aria-label": "Recording duration", dateTime: `PT${elapsed}S`, className: "pt-0.5 font-mono text-xs tabular-nums text-muted-foreground", children: [
+                  Math.floor(elapsed / 60).toString().padStart(2, "0"),
+                  ":",
+                  (elapsed % 60).toString().padStart(2, "0")
+                ] })
+              ] }),
+              capture.audioLevels && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DictationWaveform, { source: capture.audioLevels, state: capture.state }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Description, { className: "text-xs text-muted-foreground", children: capture.state === "transcribing" ? "Converting your recording to text\u2026" : capture.state === "requesting" ? "Allow microphone access to start." : error ? capture.canRetry ? "Retry this take or record again." : "Check microphone access, then try again." : "Speak, then choose Done to add the text." }),
+              displayTranscript && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "max-h-24 overflow-y-auto text-sm leading-relaxed", children: [
+                transcript,
+                interim && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-muted-foreground", children: [
+                  transcript ? " " : "",
+                  interim
+                ] })
+              ] }),
+              error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { role: "alert", className: "text-xs text-destructive", children: error }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "ghost", size: "sm", className: "min-h-[44px]", onClick: handleCancel, children: "Cancel" }),
+                capture.canRetry && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "outline", size: "sm", className: "min-h-[44px]", onClick: () => void capture.start(), children: "Record again" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", size: "sm", className: "min-h-[44px]", onClick: () => void handleDone(), disabled: busy, children: capture.state === "transcribing" ? "Transcribing\u2026" : capture.canRetry ? "Retry transcription" : error ? "Try again" : "Done" })
+              ] })
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
+}
+var SILENCE = [];
+var silence = () => SILENCE;
+function DictationWaveform({ source, state }) {
+  const bands = _react.useSyncExternalStore.call(void 0, source.subscribe, source.getSnapshot, silence);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkNKWHDI4Ccjs.AgentAudioVisualizerBar,
+    {
+      "aria-hidden": "true",
+      "data-slot": "dictation-waveform",
+      size: "icon",
+      barCount: 24,
+      state: state === "recording" ? "listening" : state === "transcribing" ? "thinking" : state === "requesting" ? "connecting" : "disconnected",
+      volumeBands: state === "recording" ? bands : void 0,
+      className: "h-9 w-full text-foreground"
+    }
+  );
+}
+function useRecordingTime(state) {
+  const [elapsed, setElapsed] = _react.useState.call(void 0, 0);
+  const startedAt = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (state !== "recording") {
+      if (state === "idle" || state === "requesting") setElapsed(0);
+      else if (startedAt.current !== null) setElapsed(Math.floor((performance.now() - startedAt.current) / 1e3));
+      startedAt.current = null;
+      return;
+    }
+    startedAt.current = performance.now();
+    const update = () => setElapsed(Math.floor((performance.now() - startedAt.current) / 1e3));
+    update();
+    const timer = setInterval(update, 1e3);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [state]);
+  return elapsed;
+}
+
+
+
+exports.VoiceDictationButton = VoiceDictationButton;

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.");