@epicbagel/saas-kit 1.11.0 → 1.11.1

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,9 +41,15 @@ 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.
+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

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
+};