Transcriber 01

1<script lang="ts" module>
2	import { tv } from "tailwind-variants";
3 
4	export const transcriber01Variants = tv({
5		slots: {
6			root: "mx-auto w-full max-w-xl",
7			content: "flex flex-col gap-4",
8			stage:
9				"bg-muted/40 relative flex h-32 items-center justify-center overflow-hidden rounded-lg border",
10			scroll: "h-full w-full",
11			result: "p-4 text-sm",
12			errorText: "text-destructive",
13			emptyText: "text-muted-foreground",
14			copyButton: "absolute top-2 right-2 size-7",
15			waveform: "h-full w-full",
16			toolbar: "flex items-center justify-between gap-3",
17			timer: "text-muted-foreground font-mono text-xs tabular-nums",
18			kbd: "bg-muted text-muted-foreground ms-1 hidden rounded px-1.5 py-0.5 font-mono text-[10px] sm:inline",
19			note: "text-muted-foreground text-xs",
20			code: "bg-muted rounded px-1 py-0.5",
21		},
22	});
23 
24	export type Transcriber01Props = {
25		/**
26		 * Provider-agnostic transcription backend. Receives the recorded audio
27		 * and resolves with the transcript text. When omitted, the block uses the
28		 * browser Web Speech API as a zero-backend demo (Chromium only).
29		 */
30		transcribe?: (audio: Blob) => Promise<string>;
31		class?: string;
32	};
33</script>
34 
35<script lang="ts">
36	import CopyIcon from "@lucide/svelte/icons/copy";
37	import CheckIcon from "@lucide/svelte/icons/check";
38	import MicIcon from "@lucide/svelte/icons/mic";
39	import SquareIcon from "@lucide/svelte/icons/square";
40	import { onDestroy, onMount } from "svelte";
41	import { cn } from "$UTILS$.js";
42	import { Button } from "$UI$/button/index.js";
43	import {
44		Card,
45		CardContent,
46		CardHeader,
47		CardTitle,
48		CardDescription,
49	} from "$UI$/card/index.js";
50	import { ScrollArea } from "$UI$/scroll-area/index.js";
51	import { Separator } from "$UI$/separator/index.js";
52	import { LiveWaveform } from "$UI$/live-waveform/index.js";
53	import { Response } from "$UI$/response/index.js";
54	import { SpeechSession, isSpeechRecognitionSupported } from "./speech.js";
55 
56	let { transcribe, class: className }: Transcriber01Props = $props();
57 
58	const ui = transcriber01Variants();
59 
60	type Status = "idle" | "recording" | "processing" | "done" | "error";
61 
62	let status = $state<Status>("idle");
63	let transcript = $state("");
64	let error = $state("");
65	let elapsed = $state<number | null>(null);
66	let copied = $state(false);
67 
68	// Optimistic until mounted so prerendered HTML doesn't flash the "unsupported"
69	// note before the client can feature-detect.
70	let mounted = $state(false);
71	onMount(() => (mounted = true));
72// … truncated