Voice Button

1<script lang="ts" module>
2	export type VoiceButtonState = "idle" | "recording" | "processing" | "success" | "error";
3</script>
4 
5<script lang="ts">
6	import type { ComponentProps, Snippet } from "svelte";
7	import Check from "@lucide/svelte/icons/check";
8	import X from "@lucide/svelte/icons/x";
9	import { Button } from "$UI$/button/index.js";
10	import { LiveWaveform } from "$UI$/live-waveform/index.js";
11	import { cn } from "$UTILS$.js";
12 
13	export type VoiceButtonProps = Omit<ComponentProps<typeof Button>, "onclick"> & {
14		/**
15		 * Current state of the voice button. Drives the internal waveform,
16		 * success/error feedback, and disabled behavior.
17		 * @default "idle"
18		 */
19		state?: VoiceButtonState;
20		/** Called when the button is clicked, after any native `onclick` handler. */
21		onPress?: () => void;
22		/** Native click handler invoked before `onPress`. */
23		onclick?: (e: MouseEvent) => void;
24		/** Leading content rendered on non-icon sizes. Accepts a string or a snippet. */
25		label?: string | Snippet;
26		/**
27		 * Trailing content rendered on the right (e.g. a keyboard shortcut).
28		 * Hidden while the waveform is active. Accepts a string or a snippet.
29		 */
30		trailing?: string | Snippet;
31		/** Icon snippet rendered when `size="icon"` and no waveform is active. */
32		icon?: Snippet;
33		/** Extra classes forwarded to the waveform container. */
34		waveformClassName?: string;
35		/**
36		 * Milliseconds to display the success/error state before returning
37		 * to idle visuals.
38		 * @default 1500
39		 */
40		feedbackDuration?: number;
41	};
42 
43	let {
44		state: voiceState = "idle",
45		onPress,
46		label,
47		trailing,
48		icon,
49		variant = "outline",
50		size = "default",
51		waveformClassName,
52		feedbackDuration = 1500,
53		disabled = false,
54		class: className,
55		onclick: externalOnClick,
56		...restProps
57	}: VoiceButtonProps = $props();
58 
59	let showFeedback = $state(false);
60 
61	$effect(() => {
62		if (voiceState === "success" || voiceState === "error") {
63			showFeedback = true;
64			const t = setTimeout(() => {
65				showFeedback = false;
66			}, feedbackDuration);
67			return () => clearTimeout(t);
68		}
69		showFeedback = false;
70	});
71 
72	const isRecording = $derived(voiceState === "recording");
73	const isProcessing = $derived(voiceState === "processing");
74	const isSuccess = $derived(voiceState === "success");
75	const isError = $derived(voiceState === "error");
76	const isDisabled = $derived(disabled || isProcessing);
77	const shouldShowWaveform = $derived(isRecording || isProcessing || showFeedback);
78// … truncated