Voice Nav 01

1<script lang="ts" module>
2	import type { VoiceNavDestination } from "./destinations.js";
3 
4	export type VoiceNavResolver = (
5		transcript: string,
6		destinations: VoiceNavDestination[]
7	) => Promise<string | null> | string | null;
8 
9	export type VoiceNav01Props = {
10		/** Pages the user can navigate to by voice. */
11		destinations?: VoiceNavDestination[];
12		/**
13		 * Maps a spoken transcript to a destination URL (or `null`). Defaults to
14		 * keyword matching; pass an LLM-backed resolver for fuzzy intent.
15		 */
16		resolve?: VoiceNavResolver;
17		/** Initial URL shown in the frame. */
18		initialUrl?: string;
19		class?: string;
20	};
21</script>
22 
23<script lang="ts">
24	import { onDestroy, onMount } from "svelte";
25	import { cn } from "$UTILS$.js";
26	import {
27		Card,
28		CardContent,
29		CardDescription,
30		CardHeader,
31		CardTitle,
32	} from "$UI$/card/index.js";
33	import { VoiceButton, type VoiceButtonState } from "$UI$/voice-button/index.js";
34	import { DEFAULT_DESTINATIONS, matchDestination } from "./destinations.js";
35	import { OneShotRecognizer, isSpeechRecognitionSupported } from "./speech.js";
36 
37	let {
38		destinations = DEFAULT_DESTINATIONS,
39		resolve = matchDestination,
40		initialUrl = "/docs/components",
41		class: className,
42	}: VoiceNav01Props = $props();
43 
44	let voiceState = $state<VoiceButtonState>("idle");
45	let url = $state(initialUrl);
46	let frameKey = $state(0);
47	let error = $state("");
48	let lastHeard = $state("");
49 
50	// Optimistic until mounted so prerendered HTML doesn't flash the "unsupported"
51	// note before the client can feature-detect.
52	let mounted = $state(false);
53	onMount(() => (mounted = true));
54	const supported = $derived(!mounted || isSpeechRecognitionSupported());
55	const recognizer = new OneShotRecognizer();
56	let revertTimer: ReturnType<typeof setTimeout> | null = null;
57 
58	// A custom resolve() is untrusted input. Only load http(s) URLs or same-origin
59	// paths into the preview frame — never javascript:/data:/blob: schemes.
60	function isSafeUrl(value: string): boolean {
61		try {
62			const { protocol } = new URL(value, window.location.origin);
63			return protocol === "http:" || protocol === "https:";
64		} catch {
65			return false;
66		}
67	}
68 
69	function revertSoon() {
70		if (revertTimer) clearTimeout(revertTimer);
71		revertTimer = setTimeout(() => {
72			if (voiceState === "success" || voiceState === "error") voiceState = "idle";
73		}, 1800);
74	}
75 
76	async function handlePress() {
77		if (!supported) return;
78		if (voiceState === "recording" || voiceState === "processing") {
79// … truncated