@epicbagel/saas-kit 1.10.0 → 1.11.1

package/README.md

@@ -20,6 +20,11 @@ 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.
+The active session appears as a compact horizontal strip above the text field:
+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
@@ -27,7 +32,7 @@ does not import a voice provider. Stop and release audio tracks before setting
 
 ```tsx
 <Chat messages={messages} onSend={sendMessage} voiceSession={{
-  state: voiceState, muted, error,
+  state: voiceState, muted, error, audioLevels,
   onStart: startVoice, onEnd: endVoice, onMutedChange: setMuted,
 }} />
 ```
@@ -36,7 +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. The existing dialog records until **Done**, shows
+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**, 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 +76,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 +181,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-D47AMKT4.cjs

@@ -0,0 +1,293 @@
+"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 _reactpopover = require('@radix-ui/react-popover'); var PopoverPrimitive = _interopRequireWildcard(_reactpopover);
+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,
+  anchorRef
+}) {
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const [anchor, setAnchor] = _react.useState.call(void 0, null);
+  const desktop = _react.useSyncExternalStore.call(void 0, subscribeDesktop, isDesktop, () => false);
+  const anchored = desktop && isVisibleAnchor(anchor);
+  const placement = _react.useRef.call(void 0, anchored);
+  placement.current = anchored;
+  const isOpen = _react.useRef.call(void 0, open);
+  isOpen.current = open;
+  const descriptionId = _react.useId.call(void 0, );
+  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 cancelControl = _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, (event) => {
+    const focused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const explicit = _optionalChain([anchorRef, 'optionalAccess', _ => _.current]);
+    const invokingButton = _optionalChain([focused, 'optionalAccess', _2 => _2.matches, 'call', _3 => _3("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 = _optionalChain([resolved, 'optionalAccess', _4 => _4.matches, 'call', _5 => _5("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 = _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;
+    _optionalChain([cancelControl, 'access', _6 => _6.current, 'optionalAccess', _7 => _7.focus, 'call', _8 => _8({ 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 _optionalChain([onCancel, 'optionalCall', _9 => _9()]);
+  }, [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', _10 => _10()]);
+  }, [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 : ""}`;
+  const closeAutoFocus = (event) => {
+    event.preventDefault();
+    if (!isOpen.current && _optionalChain([previousFocus, 'access', _11 => _11.current, 'optionalAccess', _12 => _12.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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex min-w-0 items-start justify-between gap-3", !anchored && "w-full max-w-xl self-center"), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0 space-y-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "font-medium", anchored ? "text-sm" : "text-lg"), 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")
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, DictationWaveform, { source: capture.audioLevels, state: capture.state, className: !anchored ? "h-20" : void 0 }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { id: descriptionId, 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-40 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: _chunkKWLSBTB2cjs.cn.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { ref: cancelControl, type: "button", variant: "ghost", size: "sm", className: anchored ? "min-h-[44px]" : "min-h-[48px]", onClick: handleCancel, children: "Cancel" }),
+      capture.canRetry && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { type: "button", variant: "outline", size: "sm", className: anchored ? "min-h-[44px]" : "order-first col-span-2 min-h-[48px]", onClick: () => {
+        _optionalChain([cancelControl, 'access', _13 => _13.current, 'optionalAccess', _14 => _14.focus, 'call', _15 => _15({ preventScroll: true })]);
+        void capture.start();
+      }, children: "Record again" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.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__ */ _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.jsxs.call(void 0, PopoverPrimitive.Root, { modal: true, open: open && anchored, onOpenChange: (next) => {
+      if (!next && placement.current) handleCancel();
+    }, children: [
+      anchored && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverPrimitive.Anchor, { virtualRef: { current: anchor } }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverPrimitive.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        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__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Root, { open: open && !anchored, onOpenChange: (next) => {
+      if (!next && !placement.current) handleCancel();
+    }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Overlay, { className: "fixed inset-0 z-[199] bg-background" }),
+      /* @__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,
+          "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__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Title, { className: "sr-only", children: "Voice dictation" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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 = _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: _chunkKWLSBTB2cjs.cn.call(void 0, "h-9 w-full text-foreground", className)
+    }
+  );
+}
+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;
+}
+var DESKTOP_QUERY = "(min-width: 768px)";
+function isDesktop() {
+  return typeof window !== "undefined" && !!_optionalChain([window, 'access', _16 => _16.matchMedia, 'optionalCall', _17 => _17(DESKTOP_QUERY), 'access', _18 => _18.matches]);
+}
+function subscribeDesktop(changed) {
+  const media = _optionalChain([window, 'access', _19 => _19.matchMedia, 'optionalCall', _20 => _20(DESKTOP_QUERY)]);
+  _optionalChain([media, 'optionalAccess', _21 => _21.addEventListener, 'call', _22 => _22("change", changed)]);
+  return () => _optionalChain([media, 'optionalAccess', _23 => _23.removeEventListener, 'call', _24 => _24("change", changed)]);
+}
+function isVisibleAnchor(element) {
+  if (!_optionalChain([element, 'optionalAccess', _25 => _25.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;
+}
+
+
+
+exports.VoiceDictationButton = VoiceDictationButton;

package/dist/chunk-EDEN7TAL.js

@@ -0,0 +1,293 @@
+"use client";
+import {
+  AgentAudioVisualizerBar
+} from "./chunk-5OF6D3GH.js";
+import {
+  Button
+} from "./chunk-W326GKML.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+import {
+  useDictation
+} from "./chunk-HLAHOVEI.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" ? "Transcribing\u2026" : capture.state === "requesting" ? "Waiting for microphone\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" ? "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__ */ 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 })
+    ] }),
+    /* @__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
+};