4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T2991,'use client'; import * as React from 'react'; import { ChevronDown } from 'lucide-react'; import { cn } from '@/registry/localmode/lib/utils'; import { WaveformActivityBars } from '@/components/waveform-activity-bars'; /** * The minimal voice shape every variant consumes. Matches the `KokoroVoice` * contract from `@localmode/transformers` (29 English voices) but stays generic * so future multi-voice providers fit. */ export interface VoiceOption { /** Voice ID used in synthesis (e.g. `af_heart`). */ id: string; /** Display name (e.g. `Heart`). */ name: string; /** Speaker gender, used for the color-coded badge. */ gender: 'female' | 'male'; /** Language display label used to group voices (e.g. `American English`). */ languageLabel: string; } /** Group voices by their `languageLabel`, preserving first-seen order. */ function groupByLanguage(voices: VoiceOption[]) { const groups = new Map(); for (const voice of voices) { const list = groups.get(voice.languageLabel) ?? []; list.push(voice); groups.set(voice.languageLabel, list); } return [...groups.entries()]; } const GENDER_GLYPH: Record = { female: '♀', // ♀ male: '♂', // ♂ }; /** Props for {@link VoicePicker}. */ export interface VoicePickerProps { /** The voices to choose from. */ voices: VoiceOption[]; /** Currently selected voice id. */ value?: string; /** Fired with the chosen voice id. */ onValueChange?: (voiceId: string) => void; /** Disable the control. */ disabled?: boolean; /** Accessible label. @default "Voice" */ label?: string; /** Additional class names merged onto the root element. */ className?: string; } /** * Compact, language-grouped ` onValueChange?.(e.target.value)} className={cn( 'h-9 min-w-0 max-w-full appearance-none rounded-md border border-input bg-background pl-3 pr-8 text-sm text-foreground shadow-xs outline-none', 'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50', 'disabled:pointer-events-none disabled:opacity-50', className, )} > {groups.map(([language, list]) => ( {list.map((voice) => ( ))} ))} ); } /** Props for {@link VoiceCard}. */ export interface VoiceCardProps { /** The voice this card represents. */ voice: VoiceOption; /** Whether this card is the selected voice. */ selected?: boolean; /** Fired when the card body is clicked (selection). */ onSelect?: (voiceId: string) => void; /** * Fired when the preview button is pressed. Receives the voice id; the app * synthesizes a local sample (e.g. via `useSynthesizeSpeech`). Omit to hide * the preview button. */ onPreview?: (voiceId: string) => void; /** True while this voice's preview is being synthesized. */ loading?: boolean; /** True while this voice's preview is playing (toggles to a stop affordance). */ playing?: boolean; /** Additional class names merged onto the root element. */ className?: string; } const GENDER_BADGE: Record = { female: 'bg-pink-500/10 text-pink-700 dark:text-pink-400 ring-1 ring-inset ring-pink-500/20', male: 'bg-sky-500/10 text-sky-700 dark:text-sky-400 ring-1 ring-inset ring-sky-500/20', }; /** * A rich voice card: name, color-coded gender badge, monospace voice id, and a * circular play/stop preview button with a loading state. The card is a * non-interactive container holding two **distinct sibling buttons** — a * circular preview button (plays a locally-synthesized sample; wire `onPreview` * to `useSynthesizeSpeech`) and a selection button covering the name/id — so * there is no invalid interactive-element-nested-in-interactive-element ARIA. * The selection button carries `aria-pressed` to announce the selected state. */ export function VoiceCard({ voice, selected, onSelect, onPreview, loading, playing, className, }: VoiceCardProps) { return (

{onPreview && ( )}

); } /** Props for {@link VoiceGrid}. */ export interface VoiceGridProps { /** The voices to render as cards. */ voices: VoiceOption[]; /** Currently selected voice id. */ value?: string; /** Fired when a card is selected. */ onValueChange?: (voiceId: string) => void; /** Fired when a card's preview is pressed. */ onPreview?: (voiceId: string) => void; /** The voice id currently synthesizing a preview. */ loadingVoiceId?: string | null; /** The voice id currently playing a preview. */ playingVoiceId?: string | null; /** When true, show a search box that filters voices by name / id. @default true */ filterable?: boolean; /** Additional class names merged onto the root element. */ className?: string; } /** * A language-grouped grid of {@link VoiceCard}s with an optional search box. * Each group shows a count header. Consumes the same `VoiceOption[]` contract * as {@link VoicePicker}; wire `onPreview` to `useSynthesizeSpeech` to let users * hear a voice before selecting. */ export function VoiceGrid({ voices, value, onValueChange, onPreview, loadingVoiceId, playingVoiceId, filterable = true, className, }: VoiceGridProps) { const [query, setQuery] = React.useState(''); const filtered = query.trim() ? voices.filter((v) => { const q = query.toLowerCase(); return v.name.toLowerCase().includes(q) || v.id.toLowerCase().includes(q); }) : voices; const groups = groupByLanguage(filtered); return (

{filterable && ( setQuery(e.target.value)} placeholder="Search voices…" aria-label="Search voices" className={cn( 'h-9 rounded-md border border-input bg-background px-3 text-sm text-foreground shadow-xs outline-none', 'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50', )} /> )} {groups.length === 0 && (

No voices match “{query}”.

)} {groups.map(([language, list]) => (

{language}

{list.length}

{list.map((voice) => ( ))}

))}

); } export default VoicePicker; 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4b",null,{"namespace":"@localmode","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json","https://localmode.ai/r/ui/audio/waveform-activity-bars.json"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/localmode/audio/voice-picker/voice-picker.tsx","content":"$4d","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]