@epicbagel/saas-kit 1.7.0 → 1.10.0

package/dist/{chunk-TI57GAQP.js → chunk-KWV5KTOA.js}

@@ -5,6 +5,9 @@ import {
 import {
   cn
 } from "./chunk-G6SRSWXB.js";
+import {
+  useDictation
+} from "./chunk-M2ZNC3TK.js";
 
 // src/primitives/voice-dictation-button.tsx
 import {
@@ -31,87 +34,61 @@ function VoiceDictationButton({
   visibility = "visible",
   shrink = true
 }) {
-  const [supported, setSupported] = useState(false);
   const [open, setOpen] = useState(false);
-  const [transcript, setTranscript] = useState("");
-  const [interim, setInterim] = useState("");
-  const [errored, setErrored] = useState(false);
-  const recognitionRef = useRef(null);
-  useEffect(() => {
-    const w = window;
-    const Ctor = w.SpeechRecognition ?? w.webkitSpeechRecognition;
-    setSupported(typeof Ctor === "function");
-  }, []);
-  const stop = useCallback(() => {
-    recognitionRef.current?.stop();
-    recognitionRef.current = null;
-  }, []);
-  const startRecognition = useCallback(() => {
-    const w = window;
-    const Ctor = w.SpeechRecognition ?? w.webkitSpeechRecognition;
-    if (!Ctor) return;
-    const rec = new Ctor();
-    rec.continuous = continuous;
-    rec.interimResults = true;
-    rec.lang = lang;
-    rec.onresult = (event) => {
-      let finalChunk = "";
-      let interimChunk = "";
-      for (let i = event.resultIndex; i < event.results.length; i++) {
-        const r = event.results[i];
-        if (!r) continue;
-        if (r.isFinal) finalChunk += r[0].transcript;
-        else interimChunk += r[0].transcript;
-      }
-      if (finalChunk) {
-        setTranscript((prev) => prev ? prev + " " + finalChunk : finalChunk);
-        setInterim("");
-      } else if (interimChunk) {
-        setInterim(interimChunk);
-      }
-    };
-    rec.onerror = () => {
-      setErrored(true);
-    };
-    rec.onend = () => {
-      recognitionRef.current = null;
-    };
-    recognitionRef.current = rec;
-    setErrored(false);
-    rec.start();
-  }, [continuous, lang]);
+  const capture = useDictation({ lang, continuous });
+  const { transcript, interimTranscript: interim, supported, error } = capture;
+  const generation = useRef(0);
+  const finishing = useRef(false);
+  const busy = capture.state === "requesting" || capture.state === "transcribing";
   const openOverlay = useCallback(() => {
-    setTranscript("");
-    setInterim("");
+    generation.current++;
+    finishing.current = false;
     setOpen(true);
-    startRecognition();
-  }, [startRecognition]);
+    void capture.start();
+  }, [capture.start]);
   const closeOverlay = useCallback(() => {
-    stop();
+    generation.current++;
+    finishing.current = false;
+    capture.cancel();
     setOpen(false);
-    setInterim("");
-  }, [stop]);
-  const handleDone = useCallback(() => {
-    const final = `${transcript} ${interim}`.trim();
+  }, [capture.cancel]);
+  const handleDone = useCallback(async () => {
+    if (finishing.current || busy) return;
+    if (capture.state === "error" && !capture.canRetry) {
+      void capture.start();
+      return;
+    }
+    finishing.current = true;
+    const started = generation.current;
+    const final = await (capture.canRetry ? capture.retry() : capture.stop());
+    if (started !== generation.current) return;
+    finishing.current = false;
+    if (final === null) return;
     closeOverlay();
     if (final) onCommit(final);
     else onCancel?.();
-  }, [transcript, interim, onCommit, onCancel, closeOverlay]);
+  }, [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(() => {
     if (!open) return;
     const onKey = (e) => {
-      if (e.key === "Enter" && !e.shiftKey) handleDone();
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        void handleDone();
+      }
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, handleDone]);
   useEffect(() => {
     return () => {
-      recognitionRef.current?.abort();
+      generation.current++;
     };
   }, []);
   if (!supported) return null;
@@ -148,7 +125,7 @@ function VoiceDictationButton({
       {
         open,
         onOpenChange: (next) => {
-          if (!next) closeOverlay();
+          if (!next) handleCancel();
         },
         children: /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
           DialogPrimitive.Content,
@@ -161,9 +138,10 @@ function VoiceDictationButton({
             className: "fixed inset-0 z-[200] flex flex-col bg-background outline-hidden md:items-center md:justify-center md:bg-black/40 md:backdrop-blur-sm",
             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." }),
               /* @__PURE__ */ jsxs("div", { className: "flex-1 md:flex-initial w-full md:max-w-lg md:rounded-xl bg-background flex flex-col md:max-h-[80vh] md:shadow-2xl md:border md:border-border", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border md:rounded-t-xl", children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-mono text-xs uppercase tracking-wider text-muted-foreground", children: caption }),
+                  /* @__PURE__ */ jsx("span", { role: "status", className: "font-mono text-xs uppercase tracking-wider text-muted-foreground", children: capture.state === "transcribing" ? "transcribing" : capture.state === "requesting" ? "microphone" : caption }),
                   /* @__PURE__ */ jsx(
                     "button",
                     {
@@ -183,7 +161,7 @@ function VoiceDictationButton({
                         "aria-hidden": true,
                         className: cn(
                           "absolute inset-0 rounded-full",
-                          errored ? "bg-destructive/20" : "bg-destructive/20 animate-ping"
+                          error || busy || capture.state !== "recording" ? "bg-destructive/20" : "bg-destructive/20 animate-ping"
                         )
                       }
                     ),
@@ -193,7 +171,7 @@ function VoiceDictationButton({
                         "aria-hidden": true,
                         className: cn(
                           "absolute inset-2 rounded-full",
-                          errored ? "bg-destructive/40" : "bg-destructive/40"
+                          "bg-destructive/40"
                         )
                       }
                     ),
@@ -206,8 +184,8 @@ function VoiceDictationButton({
                       transcript ? " " : "",
                       interim
                     ] })
-                  ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground italic text-base", children: "Start speaking \u2014 I'm listening." }) }),
-                  errored && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive mt-4", children: "Couldn't access the microphone. Check permissions." })
+                  ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground italic text-base", children: capture.state === "transcribing" ? "Converting your recording to text\u2026" : capture.state === "requesting" ? "Allow microphone access to start." : "Start speaking, then choose Done." }) }),
+                  error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive mt-4", children: error })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-4 py-4 pb-[calc(1rem+env(safe-area-inset-bottom))] md:pb-4 md:rounded-b-xl flex flex-col items-stretch gap-2", children: [
                   /* @__PURE__ */ jsx(
@@ -215,11 +193,12 @@ function VoiceDictationButton({
                     {
                       size: "lg",
                       className: "h-12 w-full",
-                      onClick: handleDone,
-                      disabled: !displayTranscript.trim(),
-                      children: "Done"
+                      onClick: () => void handleDone(),
+                      disabled: busy,
+                      children: capture.state === "transcribing" ? "Transcribing\u2026" : capture.canRetry ? "Retry transcription" : error ? "Try again" : "Done"
                     }
                   ),
+                  capture.canRetry && /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => void capture.start(), children: "Record again" }),
                   /* @__PURE__ */ jsx(
                     "button",
                     {

package/dist/{chunk-JN6JOSZG.js → chunk-LQPJGZIE.js}

@@ -7,16 +7,16 @@ import {
 } from "./chunk-EEHIMPD7.js";
 import {
   FilterBar
-} from "./chunk-KNKV25WS.js";
-import {
-  Heading
-} from "./chunk-H2O6NMLZ.js";
+} from "./chunk-UFFHGKI7.js";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
 } from "./chunk-ZRLUUZHK.js";
+import {
+  Heading
+} from "./chunk-H2O6NMLZ.js";
 import {
   BoardColumnComponent,
   MobileBoardView
@@ -30,12 +30,12 @@ import {
 import {
   Button
 } from "./chunk-W326GKML.js";
-import {
-  useIsMobile
-} from "./chunk-PIU5SSUV.js";
 import {
   cn
 } from "./chunk-G6SRSWXB.js";
+import {
+  useIsMobile
+} from "./chunk-PIU5SSUV.js";
 
 // src/primitives/resource-list.tsx
 import { ChevronLeft, ChevronRight, Grid3X3, Kanban, List, Search, X } from "lucide-react";

package/dist/chunk-M2ZNC3TK.js

@@ -0,0 +1,316 @@
+"use client";
+
+// src/hooks/use-dictation.ts
+import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+var DictationContext = createContext(null);
+function DictationProvider({ transcribe, scopeKey, children }) {
+  const scope = useRef({ 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 = useMemo(() => ({ transcribe, scope, generation }), [transcribe, generation]);
+  return createElement(DictationContext.Provider, { value }, children);
+}
+var EMPTY = { state: "idle", transcript: "", interimTranscript: "", error: null, canRetry: false };
+var MIME_TYPES = ["audio/webm;codecs=opus", "audio/mp4", "audio/ogg;codecs=opus", "audio/webm"];
+function recognitionConstructor() {
+  if (typeof window === "undefined") return void 0;
+  const speech = window;
+  return speech.SpeechRecognition ?? speech.webkitSpeechRecognition;
+}
+function microphoneError(reason) {
+  const name = reason?.name;
+  if (name === "NotAllowedError" || name === "SecurityError") return "Microphone access is blocked. Allow it in your browser and try again.";
+  if (name === "NotFoundError" || name === "NotReadableError") return "The microphone is unavailable. Check your microphone and try again.";
+  return "Recording could not start. Check your microphone and try again.";
+}
+function recognitionError(code) {
+  if (code === "not-allowed" || code === "service-not-allowed") return microphoneError({ name: "NotAllowedError" });
+  if (code === "audio-capture") return microphoneError({ name: "NotFoundError" });
+  if (code === "no-speech") return "No speech was detected. Try again.";
+  return "Speech recognition stopped. Try again.";
+}
+function releaseTracks(session) {
+  session.stream?.getTracks().forEach((track) => track.stop());
+  session.stream = void 0;
+}
+function dispose(session) {
+  session.controller.abort();
+  if (session.nativeTimer) clearTimeout(session.nativeTimer);
+  const recorder = session.recorder;
+  if (recorder) {
+    recorder.ondataavailable = null;
+    recorder.onstop = null;
+    recorder.onerror = null;
+    if (recorder.state !== "inactive") {
+      try {
+        recorder.stop();
+      } catch {
+      }
+    }
+  }
+  const recognition = session.recognition;
+  if (recognition) {
+    recognition.onresult = null;
+    recognition.onerror = null;
+    recognition.onend = null;
+    try {
+      recognition.abort();
+    } catch {
+    }
+  }
+  releaseTracks(session);
+  session.resolveCapture(null);
+  session.resolveNativeEnd();
+}
+function useDictation({ lang = "en-US", continuous = true, onTranscript } = {}) {
+  const provider = useContext(DictationContext);
+  const transcribe = provider?.transcribe ?? null;
+  const scope = provider?.scope ?? null;
+  const scopeGeneration = provider?.generation ?? 0;
+  const [snapshot, setSnapshot] = useState(EMPTY);
+  const [supported, setSupported] = useState(false);
+  const current = useRef(null);
+  const mounted = useRef(true);
+  const callback = useRef(onTranscript);
+  const activeScope = useRef(scope);
+  activeScope.current = scope;
+  callback.current = onTranscript;
+  useEffect(() => {
+    setSupported(transcribe ? typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia && typeof MediaRecorder !== "undefined" : typeof recognitionConstructor() === "function");
+  }, [transcribe]);
+  const cancel = useCallback(() => {
+    const session = current.current;
+    current.current = null;
+    if (session) dispose(session);
+    if (mounted.current) setSnapshot(EMPTY);
+  }, []);
+  useEffect(() => {
+    const session = current.current;
+    if (session && (session.scope !== scope || session.scopeGeneration !== scopeGeneration)) cancel();
+  }, [cancel, scope, scopeGeneration]);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      const session = current.current;
+      current.current = null;
+      if (session) dispose(session);
+    };
+  }, []);
+  const isCurrent = useCallback((session) => mounted.current && current.current === session && session.scope === activeScope.current && session.scopeGeneration === (session.scope?.current.generation ?? 0) && !session.controller.signal.aborted, []);
+  const start = useCallback(async () => {
+    if (scope !== activeScope.current || scopeGeneration !== (scope?.current.generation ?? 0)) return;
+    if (current.current && isCurrent(current.current) && ["requesting", "recording", "transcribing"].includes(current.current.phase)) return;
+    cancel();
+    let resolveCapture;
+    let resolveNativeEnd;
+    const session = {
+      language: lang,
+      transcribe,
+      scope,
+      scopeGeneration,
+      controller: new AbortController(),
+      phase: "requesting",
+      chunks: [],
+      capture: new Promise((resolve) => {
+        resolveCapture = resolve;
+      }),
+      resolveCapture: (blob) => resolveCapture(blob),
+      nativeEnd: new Promise((resolve) => {
+        resolveNativeEnd = resolve;
+      }),
+      resolveNativeEnd: () => resolveNativeEnd(),
+      nativeEnded: false,
+      transcript: "",
+      interim: "",
+      notified: /* @__PURE__ */ new Set()
+    };
+    current.current = session;
+    setSnapshot({ ...EMPTY, state: "requesting" });
+    if (transcribe) {
+      try {
+        if (!navigator.mediaDevices?.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) => MediaRecorder.isTypeSupported?.(mime));
+        const recorder = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream);
+        session.recorder = recorder;
+        recorder.ondataavailable = (event) => {
+          if (isCurrent(session) && event.data.size) session.chunks.push(event.data);
+        };
+        recorder.onstop = () => {
+          releaseTracks(session);
+          if (!isCurrent(session)) {
+            session.resolveCapture(null);
+            return;
+          }
+          const type = recorder.mimeType || session.chunks[0]?.type || mimeType || "audio/webm";
+          const blob = new Blob(session.chunks, { type });
+          session.blob = blob;
+          session.chunks = [];
+          session.resolveCapture(blob);
+        };
+        recorder.onerror = () => {
+          if (!isCurrent(session)) return;
+          releaseTracks(session);
+          session.phase = "error";
+          session.resolveCapture(null);
+          setSnapshot({ ...EMPTY, state: "error", error: "Recording was interrupted. Try again." });
+        };
+        recorder.start();
+        session.phase = "recording";
+        setSnapshot({ ...EMPTY, state: "recording" });
+      } catch (error) {
+        releaseTracks(session);
+        if (!isCurrent(session)) return;
+        session.phase = "error";
+        setSnapshot({ ...EMPTY, state: "error", error: microphoneError(error) });
+      }
+      return;
+    }
+    try {
+      const Constructor = recognitionConstructor();
+      if (!Constructor) throw new Error("unsupported");
+      const recognition = new Constructor();
+      session.recognition = recognition;
+      recognition.lang = lang;
+      recognition.continuous = continuous;
+      recognition.interimResults = true;
+      recognition.onresult = (event) => {
+        if (!isCurrent(session) || session.phase === "error") return;
+        const final = [];
+        const interim = [];
+        const chunks = [];
+        for (let i = 0; i < event.results.length; i++) {
+          const result = event.results[i];
+          if (!result) continue;
+          const text = result[0].transcript.trim();
+          if (result.isFinal) {
+            final.push(text);
+            if (!session.notified.has(i)) {
+              session.notified.add(i);
+              if (text) chunks.push(text);
+            }
+          } else interim.push(text);
+        }
+        session.transcript = final.join(" ");
+        session.interim = interim.join(" ");
+        setSnapshot((previous) => ({ ...previous, transcript: session.transcript, interimTranscript: session.interim }));
+        if (chunks.length) callback.current?.(chunks.join(" "));
+      };
+      recognition.onend = () => {
+        session.nativeEnded = true;
+        session.resolveNativeEnd();
+        if (isCurrent(session) && session.phase === "recording") {
+          session.phase = "ready";
+          setSnapshot((previous) => ({ ...previous, state: "ready" }));
+        }
+      };
+      recognition.onerror = (event) => {
+        if (!isCurrent(session)) return;
+        session.phase = "error";
+        session.nativeEnded = true;
+        session.resolveNativeEnd();
+        setSnapshot((previous) => ({ ...previous, state: "error", error: recognitionError(event.error) }));
+      };
+      recognition.start();
+      session.phase = "recording";
+      setSnapshot({ ...EMPTY, state: "recording" });
+    } catch (error) {
+      if (!isCurrent(session)) return;
+      session.phase = "error";
+      setSnapshot({ ...EMPTY, state: "error", error: microphoneError(error) });
+    }
+  }, [cancel, continuous, isCurrent, lang, scope, scopeGeneration, transcribe]);
+  const finish = useCallback(async (session) => {
+    if (!isCurrent(session)) return null;
+    session.phase = "transcribing";
+    setSnapshot((previous) => ({ ...previous, state: "transcribing", error: null, canRetry: false }));
+    if (!session.transcribe) {
+      if (!session.nativeEnded) {
+        session.nativeTimer = setTimeout(() => {
+          try {
+            session.recognition?.abort();
+          } catch {
+          }
+          session.resolveNativeEnd();
+        }, 1e3);
+        try {
+          session.recognition?.stop();
+        } catch {
+          session.resolveNativeEnd();
+        }
+        await session.nativeEnd;
+        clearTimeout(session.nativeTimer);
+      }
+      if (!isCurrent(session) || session.phase === "error") return null;
+      const text2 = [session.transcript, session.interim].filter(Boolean).join(" ").trim();
+      session.phase = "ready";
+      setSnapshot({ ...EMPTY, state: "ready", transcript: text2 });
+      return text2;
+    }
+    let text;
+    try {
+      if (!session.blob) {
+        if (session.recorder?.state !== "inactive") session.recorder?.stop();
+        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 (!isCurrent(session)) return null;
+      if (!text) throw new Error("No speech was detected. Record again.");
+    } catch (error) {
+      if (!isCurrent(session)) return null;
+      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: !!session.blob?.size });
+      return null;
+    }
+    session.transcript = text;
+    session.phase = "ready";
+    setSnapshot({ ...EMPTY, state: "ready", transcript: text });
+    callback.current?.(text);
+    return text;
+  }, [isCurrent]);
+  const stop = useCallback(() => {
+    const session = current.current;
+    if (!session) return Promise.resolve(null);
+    if (!isCurrent(session)) {
+      cancel();
+      return Promise.resolve(null);
+    }
+    if (session.phase === "requesting") {
+      cancel();
+      return Promise.resolve(null);
+    }
+    if (session.finish) return session.finish;
+    if (session.phase === "error") return Promise.resolve(null);
+    session.finish = finish(session);
+    return session.finish;
+  }, [cancel, finish, isCurrent]);
+  const retry = useCallback(() => {
+    const session = current.current;
+    if (session && !isCurrent(session)) {
+      cancel();
+      return Promise.resolve(null);
+    }
+    if (!session?.transcribe || !session.blob?.size) return Promise.resolve(null);
+    if (session.phase !== "error") return session.finish ?? Promise.resolve(null);
+    session.finish = finish(session);
+    return session.finish;
+  }, [cancel, finish, isCurrent]);
+  const visibleSnapshot = current.current && !isCurrent(current.current) ? EMPTY : snapshot;
+  return { ...visibleSnapshot, supported, start, stop, retry, cancel };
+}
+
+export {
+  DictationProvider,
+  useDictation
+};