@epicbagel/saas-kit 1.11.0 → 1.12.0

package/README.md

@@ -21,17 +21,18 @@ 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.
 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.
+microphone badge, audio bars, status, **Mute** and **End voice**.
+It wraps its controls on narrow screens. Transcripts belong in the conversation
+thread and are not repeated in the strip. The legacy `transcript` prop and
+`labels.transcriptPlaceholder` are accepted but ignored.
+`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, transcript: latestUserUtterance, audioLevels,
+  state: voiceState, muted, error, audioLevels,
   onStart: startVoice, onEnd: endVoice, onMutedChange: setMuted,
 }} />
 ```
@@ -40,11 +41,16 @@ 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. 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
+another component library. The recorder opens beside its microphone on desktop
+and fills the screen below 768px, with elapsed time, LiveKit audio bars and
+Done/Cancel controls. The bars use the recording stream without opening a second
+microphone. Resizing keeps the current recording alive.
+
+For hidden/programmatic triggers, it uses the focused visible button as the
+desktop anchor. Hosts can pass an explicit `anchorRef` for a custom trigger.
+Without a visible anchor it opens full-screen. Nested and sibling dialogs keep
+their focus and cancellation behavior.
+The recorder runs until **Done**, finishes the last words, 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.
 
@@ -60,6 +66,21 @@ import { DictationProvider } from "@epicbagel/saas-kit/primitives/dictation-prov
 </DictationProvider>
 ```
 
+For words that appear while speaking, supply `stream` as well (or on its own).
+The host connects the provided `MediaStream` to its speech service; the kit
+captures the microphone only once. `onTranscript` replaces the live preview
+with `{ transcript, interimTranscript }`. The adapter resolves when ready and
+returns `{ finish, cancel }`: `finish()` drains the final audio and returns the
+complete transcript; `cancel()` releases the transport without saving. The
+adapter must honor `signal` during startup, streaming and finalization, and
+report unexpected disconnection through `onError`.
+
+Preview updates never invoke a control's commit callback. Done waits for
+`finish()` before saving. If streaming fails and `transcribe` is also supplied,
+the recorder shows a warning and uses its complete recording on Done. Retry
+uses that same recording. With no batch adapter, an interrupted stream is an
+error; partial words are never presented as a complete note.
+
 Set `scopeKey` from the acting user and workspace (including impersonation, if
 the app supports it). A changed scope discards the active take, stops recording
 and aborts transcription without remounting the application. Responses from the
@@ -76,8 +97,9 @@ native recognition has no audio-level source.
 failure. Choose either that result or `onTranscript` to commit; using both would
 duplicate the host action. The callback receives one complete API transcript,
 or finalized chunks with native recognition. API recording requires HTTPS (or
-localhost), microphone permission and MediaRecorder. It does not produce live
-interim text; the live voice controls are a separate feature.
+localhost), microphone permission and MediaRecorder. Live interim text requires
+the host's `stream` adapter; the batch `transcribe` adapter alone returns text
+after Done. Live voice conversation controls remain a separate feature.
 
 Without a provider, controls retain browser-native speech recognition. The
 private ui-kit's `VoiceInput` uses this same provider and capture hook, and its

package/dist/{chunk-ZZ7ICQR2.cjs → chunk-7Q4EFCUI.cjs}

@@ -3,11 +3,11 @@
 // src/hooks/use-dictation.ts
 var _react = require('react');
 var DictationContext = _react.createContext.call(void 0, null);
-function DictationProvider({ transcribe, scopeKey, children }) {
+function DictationProvider({ transcribe, stream, scopeKey, children }) {
   const scope = _react.useRef.call(void 0, { key: scopeKey, generation: 0 });
   if (scope.current.key !== scopeKey) scope.current = { key: scopeKey, generation: scope.current.generation + 1 };
   const generation = scope.current.generation;
-  const value = _react.useMemo.call(void 0, () => ({ transcribe, scope, generation }), [transcribe, generation]);
+  const value = _react.useMemo.call(void 0, () => ({ transcribe, stream, scope, generation }), [transcribe, stream, generation]);
   return _react.createElement.call(void 0, DictationContext.Provider, { value }, children);
 }
 var EMPTY = { state: "idle", transcript: "", interimTranscript: "", error: null, canRetry: false };
@@ -128,6 +128,8 @@ function releaseTracks(session) {
 }
 function dispose(session) {
   session.controller.abort();
+  _optionalChain([session, 'access', _18 => _18.streamController, 'optionalAccess', _19 => _19.abort, 'call', _20 => _20()]);
+  _optionalChain([session, 'access', _21 => _21.live, 'optionalAccess', _22 => _22.cancel, 'call', _23 => _23()]);
   if (session.nativeTimer) clearTimeout(session.nativeTimer);
   const recorder = session.recorder;
   if (recorder) {
@@ -157,9 +159,10 @@ function dispose(session) {
 }
 function useDictation({ lang = "en-US", continuous = true, onTranscript } = {}) {
   const provider = _react.useContext.call(void 0, DictationContext);
-  const transcribe = _nullishCoalesce(_optionalChain([provider, 'optionalAccess', _18 => _18.transcribe]), () => ( null));
-  const scope = _nullishCoalesce(_optionalChain([provider, 'optionalAccess', _19 => _19.scope]), () => ( null));
-  const scopeGeneration = _nullishCoalesce(_optionalChain([provider, 'optionalAccess', _20 => _20.generation]), () => ( 0));
+  const transcribe = _nullishCoalesce(_optionalChain([provider, 'optionalAccess', _24 => _24.transcribe]), () => ( null));
+  const startStream = _nullishCoalesce(_optionalChain([provider, 'optionalAccess', _25 => _25.stream]), () => ( null));
+  const scope = _nullishCoalesce(_optionalChain([provider, 'optionalAccess', _26 => _26.scope]), () => ( null));
+  const scopeGeneration = _nullishCoalesce(_optionalChain([provider, 'optionalAccess', _27 => _27.generation]), () => ( 0));
   const [snapshot, setSnapshot] = _react.useState.call(void 0, EMPTY);
   const [supported, setSupported] = _react.useState.call(void 0, false);
   const current = _react.useRef.call(void 0, null);
@@ -169,8 +172,8 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
   activeScope.current = scope;
   callback.current = onTranscript;
   _react.useEffect.call(void 0, () => {
-    setSupported(transcribe ? typeof navigator !== "undefined" && !!_optionalChain([navigator, 'access', _21 => _21.mediaDevices, 'optionalAccess', _22 => _22.getUserMedia]) && typeof MediaRecorder !== "undefined" : typeof recognitionConstructor() === "function");
-  }, [transcribe]);
+    setSupported(transcribe || startStream ? typeof navigator !== "undefined" && !!_optionalChain([navigator, 'access', _28 => _28.mediaDevices, 'optionalAccess', _29 => _29.getUserMedia]) && typeof MediaRecorder !== "undefined" : typeof recognitionConstructor() === "function");
+  }, [transcribe, startStream]);
   const cancel = _react.useCallback.call(void 0, () => {
     const session = current.current;
     current.current = null;
@@ -190,9 +193,9 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
       if (session) dispose(session);
     };
   }, []);
-  const isCurrent = _react.useCallback.call(void 0, (session) => mounted.current && current.current === session && session.scope === activeScope.current && session.scopeGeneration === (_nullishCoalesce(_optionalChain([session, 'access', _23 => _23.scope, 'optionalAccess', _24 => _24.current, 'access', _25 => _25.generation]), () => ( 0))) && !session.controller.signal.aborted, []);
+  const isCurrent = _react.useCallback.call(void 0, (session) => mounted.current && current.current === session && session.scope === activeScope.current && session.scopeGeneration === (_nullishCoalesce(_optionalChain([session, 'access', _30 => _30.scope, 'optionalAccess', _31 => _31.current, 'access', _32 => _32.generation]), () => ( 0))) && !session.controller.signal.aborted, []);
   const start = _react.useCallback.call(void 0, async () => {
-    if (scope !== activeScope.current || scopeGeneration !== (_nullishCoalesce(_optionalChain([scope, 'optionalAccess', _26 => _26.current, 'access', _27 => _27.generation]), () => ( 0)))) return;
+    if (scope !== activeScope.current || scopeGeneration !== (_nullishCoalesce(_optionalChain([scope, 'optionalAccess', _33 => _33.current, 'access', _34 => _34.generation]), () => ( 0)))) return;
     if (current.current && isCurrent(current.current) && ["requesting", "recording", "transcribing"].includes(current.current.phase)) return;
     cancel();
     let resolveCapture;
@@ -200,9 +203,12 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
     const session = {
       language: lang,
       transcribe,
+      startStream,
+      liveFailed: false,
       scope,
       scopeGeneration,
       controller: new AbortController(),
+      streamController: startStream ? new AbortController() : void 0,
       phase: "requesting",
       chunks: [],
       capture: new Promise((resolve) => {
@@ -217,20 +223,20 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
       transcript: "",
       interim: "",
       notified: /* @__PURE__ */ new Set(),
-      audioLevels: transcribe ? createAudioLevels() : void 0
+      audioLevels: transcribe || startStream ? createAudioLevels() : void 0
     };
     current.current = session;
     setSnapshot({ ...EMPTY, state: "requesting" });
-    if (transcribe) {
+    if (transcribe || startStream) {
       try {
-        if (!_optionalChain([navigator, 'access', _28 => _28.mediaDevices, 'optionalAccess', _29 => _29.getUserMedia]) || typeof MediaRecorder === "undefined") throw new Error("unsupported");
+        if (!_optionalChain([navigator, 'access', _35 => _35.mediaDevices, 'optionalAccess', _36 => _36.getUserMedia]) || typeof MediaRecorder === "undefined") throw new Error("unsupported");
         const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
         if (!isCurrent(session)) {
           stream.getTracks().forEach((track) => track.stop());
           return;
         }
         session.stream = stream;
-        const mimeType = MIME_TYPES.find((mime) => _optionalChain([MediaRecorder, 'access', _30 => _30.isTypeSupported, 'optionalCall', _31 => _31(mime)]));
+        const mimeType = MIME_TYPES.find((mime) => _optionalChain([MediaRecorder, 'access', _37 => _37.isTypeSupported, 'optionalCall', _38 => _38(mime)]));
         const recorder = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream);
         session.recorder = recorder;
         recorder.ondataavailable = (event) => {
@@ -242,7 +248,7 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
             session.resolveCapture(null);
             return;
           }
-          const type = recorder.mimeType || _optionalChain([session, 'access', _32 => _32.chunks, 'access', _33 => _33[0], 'optionalAccess', _34 => _34.type]) || mimeType || "audio/webm";
+          const type = recorder.mimeType || _optionalChain([session, 'access', _39 => _39.chunks, 'access', _40 => _40[0], 'optionalAccess', _41 => _41.type]) || mimeType || "audio/webm";
           const blob = new Blob(session.chunks, { type });
           session.blob = blob;
           session.chunks = [];
@@ -250,16 +256,53 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
         };
         recorder.onerror = () => {
           if (!isCurrent(session)) return;
+          session.liveFailed = true;
+          _optionalChain([session, 'access', _42 => _42.live, 'optionalAccess', _43 => _43.cancel, 'call', _44 => _44()]);
           releaseTracks(session);
           session.phase = "error";
           session.resolveCapture(null);
           setSnapshot({ ...EMPTY, state: "error", error: "Recording was interrupted. Try again." });
         };
         recorder.start();
+        if (startStream) {
+          const failed = (error) => {
+            if (!isCurrent(session) || session.phase === "ready" || session.phase === "error") return;
+            session.liveFailed = true;
+            _optionalChain([session, 'access', _45 => _45.live, 'optionalAccess', _46 => _46.cancel, 'call', _47 => _47()]);
+            if (transcribe) {
+              setSnapshot((previous) => ({ ...previous, previewError: "Live text is unavailable. Choose Done to transcribe this recording." }));
+            } else {
+              releaseTracks(session);
+              if (recorder.state !== "inactive") recorder.stop();
+              session.phase = "error";
+              setSnapshot((previous) => ({ ...previous, state: "error", error: error.message || "Live transcription stopped. Try again." }));
+            }
+          };
+          try {
+            const live = await startStream(stream, {
+              language: lang,
+              signal: session.streamController.signal,
+              onTranscript: (preview) => {
+                if (!isCurrent(session) || session.liveFailed || session.phase === "error" || session.phase === "ready") return;
+                session.transcript = preview.transcript;
+                session.interim = preview.interimTranscript;
+                setSnapshot((previous) => ({ ...previous, transcript: preview.transcript, interimTranscript: preview.interimTranscript }));
+              },
+              onError: failed
+            });
+            if (!isCurrent(session) || session.liveFailed || session.phase === "error") {
+              live.cancel();
+            } else session.live = live;
+          } catch (error) {
+            failed(error instanceof Error ? error : new Error("Live transcription could not start. Try again."));
+          }
+          if (!isCurrent(session) || session.phase !== "requesting") return;
+        }
         session.phase = "recording";
         session.stopMeter = meterStream(stream, session.audioLevels, () => isCurrent(session) && session.phase === "recording");
-        setSnapshot({ ...EMPTY, state: "recording" });
+        setSnapshot((previous) => ({ ...previous, state: "recording" }));
       } catch (error) {
+        _optionalChain([session, 'access', _48 => _48.live, 'optionalAccess', _49 => _49.cancel, 'call', _50 => _50()]);
         releaseTracks(session);
         if (!isCurrent(session)) return;
         session.phase = "error";
@@ -295,7 +338,7 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
         session.transcript = final.join(" ");
         session.interim = interim.join(" ");
         setSnapshot((previous) => ({ ...previous, transcript: session.transcript, interimTranscript: session.interim }));
-        if (chunks.length) _optionalChain([callback, 'access', _35 => _35.current, 'optionalCall', _36 => _36(chunks.join(" "))]);
+        if (chunks.length) _optionalChain([callback, 'access', _51 => _51.current, 'optionalCall', _52 => _52(chunks.join(" "))]);
       };
       recognition.onend = () => {
         session.nativeEnded = true;
@@ -320,23 +363,23 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
       session.phase = "error";
       setSnapshot({ ...EMPTY, state: "error", error: microphoneError(error) });
     }
-  }, [cancel, continuous, isCurrent, lang, scope, scopeGeneration, transcribe]);
+  }, [cancel, continuous, isCurrent, lang, scope, scopeGeneration, transcribe, startStream]);
   const finish = _react.useCallback.call(void 0, async (session) => {
     if (!isCurrent(session)) return null;
     releaseMeter(session);
     session.phase = "transcribing";
     setSnapshot((previous) => ({ ...previous, state: "transcribing", error: null, canRetry: false }));
-    if (!session.transcribe) {
+    if (!session.transcribe && !session.startStream) {
       if (!session.nativeEnded) {
         session.nativeTimer = setTimeout(() => {
           try {
-            _optionalChain([session, 'access', _37 => _37.recognition, 'optionalAccess', _38 => _38.abort, 'call', _39 => _39()]);
+            _optionalChain([session, 'access', _53 => _53.recognition, 'optionalAccess', _54 => _54.abort, 'call', _55 => _55()]);
           } catch (e8) {
           }
           session.resolveNativeEnd();
         }, 1e3);
         try {
-          _optionalChain([session, 'access', _40 => _40.recognition, 'optionalAccess', _41 => _41.stop, 'call', _42 => _42()]);
+          _optionalChain([session, 'access', _56 => _56.recognition, 'optionalAccess', _57 => _57.stop, 'call', _58 => _58()]);
         } catch (e9) {
           session.resolveNativeEnd();
         }
@@ -352,13 +395,29 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
     let text;
     try {
       if (!session.blob) {
-        if (_optionalChain([session, 'access', _43 => _43.recorder, 'optionalAccess', _44 => _44.state]) !== "inactive") _optionalChain([session, 'access', _45 => _45.recorder, 'optionalAccess', _46 => _46.stop, 'call', _47 => _47()]);
+        if (_optionalChain([session, 'access', _59 => _59.recorder, 'optionalAccess', _60 => _60.state]) !== "inactive") _optionalChain([session, 'access', _61 => _61.recorder, 'optionalAccess', _62 => _62.stop, 'call', _63 => _63()]);
         const blob = await session.capture;
         if (!isCurrent(session) || !blob) return null;
         session.blob = blob;
       }
-      if (!session.blob.size) throw new Error("No audio was recorded. Try again.");
-      text = (await session.transcribe(session.blob, { language: session.language, signal: session.controller.signal })).trim();
+      if (session.live && !session.liveFailed) {
+        try {
+          const final = await session.live.finish();
+          if (session.liveFailed) throw new Error("Live transcription was interrupted. Please retry this recording.");
+          text = final.trim();
+        } catch (error) {
+          session.liveFailed = true;
+          if (!session.transcribe) throw error;
+        } finally {
+          session.live.cancel();
+        }
+      }
+      if (!isCurrent(session)) return null;
+      if (text === void 0) {
+        if (!session.transcribe) throw new Error("Live transcription could not finish. Please record again.");
+        if (!session.blob.size) throw new Error("No audio was recorded. Try again.");
+        text = (await session.transcribe(session.blob, { language: session.language, signal: session.controller.signal })).trim();
+      }
       if (!isCurrent(session)) return null;
       if (!text) throw new Error("No speech was detected. Record again.");
     } catch (error) {
@@ -366,13 +425,14 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
       releaseTracks(session);
       session.phase = "error";
       const message = error instanceof Error && error.message ? error.message : "Transcription failed. Try again.";
-      setSnapshot({ ...EMPTY, state: "error", error: message, canRetry: !!_optionalChain([session, 'access', _48 => _48.blob, 'optionalAccess', _49 => _49.size]) });
+      _optionalChain([session, 'access', _64 => _64.live, 'optionalAccess', _65 => _65.cancel, 'call', _66 => _66()]);
+      setSnapshot((previous) => ({ ...previous, state: "error", error: message, canRetry: !!session.transcribe && !!_optionalChain([session, 'access', _67 => _67.blob, 'optionalAccess', _68 => _68.size]) }));
       return null;
     }
     session.transcript = text;
     session.phase = "ready";
     setSnapshot({ ...EMPTY, state: "ready", transcript: text });
-    _optionalChain([callback, 'access', _50 => _50.current, 'optionalCall', _51 => _51(text)]);
+    _optionalChain([callback, 'access', _69 => _69.current, 'optionalCall', _70 => _70(text)]);
     return text;
   }, [isCurrent]);
   const stop = _react.useCallback.call(void 0, () => {
@@ -383,8 +443,13 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
       return Promise.resolve(null);
     }
     if (session.phase === "requesting") {
-      cancel();
-      return Promise.resolve(null);
+      if (!session.transcribe || _optionalChain([session, 'access', _71 => _71.recorder, 'optionalAccess', _72 => _72.state]) !== "recording") {
+        cancel();
+        return Promise.resolve(null);
+      }
+      session.liveFailed = true;
+      _optionalChain([session, 'access', _73 => _73.streamController, 'optionalAccess', _74 => _74.abort, 'call', _75 => _75()]);
+      _optionalChain([session, 'access', _76 => _76.live, 'optionalAccess', _77 => _77.cancel, 'call', _78 => _78()]);
     }
     if (session.finish) return session.finish;
     if (session.phase === "error") return Promise.resolve(null);
@@ -397,7 +462,7 @@ function useDictation({ lang = "en-US", continuous = true, onTranscript } = {})
       cancel();
       return Promise.resolve(null);
     }
-    if (!_optionalChain([session, 'optionalAccess', _52 => _52.transcribe]) || !_optionalChain([session, 'access', _53 => _53.blob, 'optionalAccess', _54 => _54.size])) return Promise.resolve(null);
+    if (!_optionalChain([session, 'optionalAccess', _79 => _79.transcribe]) || !_optionalChain([session, 'access', _80 => _80.blob, 'optionalAccess', _81 => _81.size])) return Promise.resolve(null);
     if (session.phase !== "error") return _nullishCoalesce(session.finish, () => ( Promise.resolve(null)));
     session.finish = finish(session);
     return session.finish;

package/dist/chunk-JKVVTFAP.js

@@ -0,0 +1,294 @@
+"use client";
+import {
+  AgentAudioVisualizerBar
+} from "./chunk-5OF6D3GH.js";
+import {
+  Button
+} from "./chunk-W326GKML.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+import {
+  useDictation
+} from "./chunk-RPSRCB5O.js";
+
+// src/primitives/voice-dictation-button.tsx
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Mic, LoaderCircle } from "lucide-react";
+import { Fragment, jsx, jsxs } from "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,
+  anchorRef
+}) {
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState(null);
+  const desktop = useSyncExternalStore(subscribeDesktop, isDesktop, () => false);
+  const anchored = desktop && isVisibleAnchor(anchor);
+  const placement = useRef(anchored);
+  placement.current = anchored;
+  const isOpen = useRef(open);
+  isOpen.current = open;
+  const descriptionId = useId();
+  const capture = useDictation({ lang, continuous });
+  const { transcript, interimTranscript: interim, supported, error } = capture;
+  const generation = useRef(0);
+  const finishing = useRef(false);
+  const previousFocus = useRef(null);
+  const cancelControl = useRef(null);
+  const elapsed = useRecordingTime(capture.state);
+  const busy = capture.state === "requesting" || capture.state === "transcribing";
+  const openOverlay = useCallback((event) => {
+    const focused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const explicit = anchorRef?.current;
+    const invokingButton = focused?.matches("button:not(:disabled), [role='button']:not([aria-disabled='true'])") ? focused : null;
+    const resolved = isVisibleAnchor(explicit) ? explicit : isVisibleAnchor(event.currentTarget) ? event.currentTarget : isVisibleAnchor(invokingButton) ? invokingButton : null;
+    previousFocus.current = resolved?.matches("button, a[href], input, select, textarea, [tabindex]") ? resolved : focused;
+    setAnchor(resolved);
+    generation.current++;
+    finishing.current = false;
+    setOpen(true);
+    void capture.start();
+  }, [anchorRef, capture.start]);
+  const closeOverlay = useCallback(() => {
+    generation.current++;
+    finishing.current = false;
+    capture.cancel();
+    setOpen(false);
+  }, [capture.cancel]);
+  const handleDone = useCallback(async () => {
+    if (finishing.current || busy) return;
+    cancelControl.current?.focus({ preventScroll: true });
+    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 onCancel?.();
+  }, [busy, capture.canRetry, capture.retry, capture.start, capture.state, capture.stop, onCommit, onCancel, closeOverlay]);
+  const handleCancel = useCallback(() => {
+    closeOverlay();
+    onCancel?.();
+  }, [closeOverlay, onCancel]);
+  useEffect(() => {
+    if (open && capture.state === "idle") handleCancel();
+  }, [capture.state, handleCancel, open]);
+  useEffect(() => {
+    return () => {
+      generation.current++;
+    };
+  }, []);
+  if (!supported) return null;
+  const displayTranscript = `${transcript}${interim ? (transcript ? " " : "") + interim : ""}`;
+  const closeAutoFocus = (event) => {
+    event.preventDefault();
+    if (!isOpen.current && previousFocus.current?.isConnected) previousFocus.current.focus();
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey && !(event.target instanceof HTMLElement && event.target.closest("button, input, textarea, select"))) {
+      event.preventDefault();
+      void handleDone();
+    }
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-start justify-between gap-3", !anchored && "w-full max-w-xl self-center"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+        /* @__PURE__ */ jsx("h2", { className: cn("font-medium", anchored ? "text-sm" : "text-lg"), children: title || "Voice dictation" }),
+        /* @__PURE__ */ jsxs("span", { role: "status", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+          busy ? /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true", className: "size-3.5 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx(Mic, { "aria-hidden": "true", className: "size-3.5" }),
+          capture.state === "transcribing" ? "Finishing transcript\u2026" : capture.state === "requesting" ? "Starting dictation\u2026" : error ? "Recording not saved" : capture.state === "ready" ? "Ready" : caption
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("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")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-col gap-3", !anchored && "w-full max-w-xl flex-1 justify-center self-center py-8 text-center"), children: [
+      capture.audioLevels && /* @__PURE__ */ jsx(DictationWaveform, { source: capture.audioLevels, state: capture.state, className: !anchored ? "h-20" : void 0 }),
+      /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-xs text-muted-foreground", children: capture.state === "transcribing" ? "Finishing your last words\u2026" : capture.state === "requesting" ? "Allow microphone access to start." : error ? capture.canRetry ? "Retry this take or record again." : "Try recording again." : "Speak, then choose Done to add the text." }),
+      displayTranscript && /* @__PURE__ */ jsxs("p", { className: "max-h-40 overflow-y-auto text-sm leading-relaxed", children: [
+        transcript,
+        interim && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          transcript ? " " : "",
+          interim
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-xs text-destructive", children: error }),
+      !error && capture.previewError && /* @__PURE__ */ jsx("p", { role: "status", className: "text-xs text-muted-foreground", children: capture.previewError })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("gap-2", anchored ? "flex flex-wrap items-center justify-end" : "mt-auto grid w-full max-w-xl grid-cols-2 gap-3 self-center"), children: [
+      /* @__PURE__ */ jsx(Button, { ref: cancelControl, type: "button", variant: "ghost", size: "sm", className: anchored ? "min-h-[44px]" : "min-h-[48px]", onClick: handleCancel, children: "Cancel" }),
+      capture.canRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", className: anchored ? "min-h-[44px]" : "order-first col-span-2 min-h-[48px]", onClick: () => {
+        cancelControl.current?.focus({ preventScroll: true });
+        void capture.start();
+      }, children: "Record again" }),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", className: anchored ? "min-h-[44px]" : "min-h-[48px]", onClick: () => void handleDone(), disabled: busy, children: capture.state === "transcribing" ? "Transcribing\u2026" : capture.canRetry ? "Retry transcription" : error ? "Try again" : "Done" })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: openOverlay,
+        disabled,
+        "aria-label": "Start dictation",
+        className: cn(visibility === "hidden" && "hidden", className),
+        children
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        onClick: openOverlay,
+        disabled,
+        variant: "outline",
+        size,
+        "aria-label": "Start dictation",
+        className: cn("transition-colors", visibility === "hidden" && "hidden", !shrink && "shrink-0", className),
+        children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" }),
+          showLabel && /* @__PURE__ */ jsx("span", { children: "Speak" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { modal: true, open: open && anchored, onOpenChange: (next) => {
+      if (!next && placement.current) handleCancel();
+    }, children: [
+      anchored && /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { virtualRef: { current: anchor } }),
+      /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+        PopoverPrimitive.Content,
+        {
+          "aria-label": "Voice dictation",
+          "aria-describedby": descriptionId,
+          "data-slot": "voice-dictation-panel",
+          "data-state": capture.state,
+          "data-placement": "anchored",
+          side: "top",
+          align: "center",
+          sideOffset: 8,
+          collisionPadding: 12,
+          avoidCollisions: true,
+          onCloseAutoFocus: closeAutoFocus,
+          onKeyDown,
+          onEscapeKeyDown: (event) => event.stopPropagation(),
+          className: "z-[200] flex max-h-[var(--radix-popover-content-available-height)] w-96 max-w-[calc(100vw-1.5rem)] flex-col gap-3 overflow-y-auto rounded-2xl border border-border bg-background p-4 text-foreground shadow-lg outline-hidden",
+          children: content
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: open && !anchored, onOpenChange: (next) => {
+      if (!next && !placement.current) handleCancel();
+    }, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-[199] bg-background" }),
+      /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          "aria-label": "Voice dictation",
+          "aria-labelledby": void 0,
+          "data-slot": "voice-dictation-panel",
+          "data-state": capture.state,
+          "data-placement": "fullscreen",
+          onCloseAutoFocus: closeAutoFocus,
+          onKeyDown,
+          onEscapeKeyDown: (event) => event.stopPropagation(),
+          className: "fixed inset-0 z-[200] flex h-dvh w-screen flex-col gap-6 overflow-y-auto overscroll-contain bg-background px-6 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] text-foreground outline-hidden",
+          children: [
+            /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: "Voice dictation" }),
+            /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: "sr-only", children: "Record your message, then choose Done to add the text. Cancel discards the recording." }),
+            content
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+var SILENCE = [];
+var silence = () => SILENCE;
+function DictationWaveform({ source, state, className }) {
+  const bands = useSyncExternalStore(source.subscribe, source.getSnapshot, silence);
+  return /* @__PURE__ */ jsx(
+    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: cn("h-9 w-full text-foreground", className)
+    }
+  );
+}
+function useRecordingTime(state) {
+  const [elapsed, setElapsed] = useState(0);
+  const startedAt = useRef(null);
+  useEffect(() => {
+    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;
+}
+var DESKTOP_QUERY = "(min-width: 768px)";
+function isDesktop() {
+  return typeof window !== "undefined" && !!window.matchMedia?.(DESKTOP_QUERY).matches;
+}
+function subscribeDesktop(changed) {
+  const media = window.matchMedia?.(DESKTOP_QUERY);
+  media?.addEventListener("change", changed);
+  return () => media?.removeEventListener("change", changed);
+}
+function isVisibleAnchor(element) {
+  if (!element?.isConnected || !element.getClientRects().length) return false;
+  const rect = element.getBoundingClientRect();
+  if (!rect.width || !rect.height) return false;
+  for (let parent = element; parent; parent = parent.parentElement) {
+    const style = getComputedStyle(parent);
+    if (parent.hidden || style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse" || Number.parseFloat(style.opacity) === 0) return false;
+  }
+  return true;
+}
+
+export {
+  VoiceDictationButton
+};