4d: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"] 4e: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"] 4f:T1b81,'use client'; import * as React from 'react'; import { useObjectUrl } from '@/lib/browser-utils'; import { cn } from '@/registry/localmode/lib/utils'; /** Format seconds as `m:ss`. */ function formatTime(seconds: number): string { if (!Number.isFinite(seconds) || seconds < 0) return '0:00'; const m = Math.floor(seconds / 60); const s = Math.floor(seconds % 60); return `${m}:${s.toString().padStart(2, '0')}`; } /** Props for {@link ScrubBar}. */ export interface ScrubBarProps { /** Current playback position in seconds. */ currentTime: number; /** Total duration in seconds. */ duration: number; /** Fired continuously while dragging, and on click, with the new time. */ onSeek: (time: number) => void; /** Fired once when a drag gesture ends (useful to commit a seek). */ onSeekEnd?: (time: number) => void; /** Additional class names merged onto the root element. */ className?: string; } /** * A standalone, draggable seek bar. Controlled via `currentTime` / `duration`; * emits the target time on click and drag. Reusable on its own (e.g. over a * remote stream) or inside {@link AudioScrubPlayer}. */ export function ScrubBar({ currentTime, duration, onSeek, onSeekEnd, className, }: ScrubBarProps) { const trackRef = React.useRef(null); const draggingRef = React.useRef(false); const progress = duration > 0 ? Math.min(1, currentTime / duration) : 0; const timeFromClientX = (clientX: number) => { const track = trackRef.current; if (!track || duration <= 0) return 0; const rect = track.getBoundingClientRect(); const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)); return ratio * duration; }; const handlePointerDown = (e: React.PointerEvent) => { draggingRef.current = true; (e.target as HTMLElement).setPointerCapture(e.pointerId); onSeek(timeFromClientX(e.clientX)); }; const handlePointerMove = (e: React.PointerEvent) => { if (!draggingRef.current) return; onSeek(timeFromClientX(e.clientX)); }; const handlePointerUp = (e: React.PointerEvent) => { if (!draggingRef.current) return; draggingRef.current = false; const time = timeFromClientX(e.clientX); onSeek(time); onSeekEnd?.(time); }; return (

{ if (e.key === 'ArrowRight') onSeek(Math.min(duration, currentTime + 5)); if (e.key === 'ArrowLeft') onSeek(Math.max(0, currentTime - 5)); }} className={cn( 'group relative flex h-5 cursor-pointer items-center touch-none select-none outline-none', 'focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:rounded-full', className, )} >

); } /** Props for {@link AudioScrubPlayer}. */ export interface AudioScrubPlayerProps { /** Local audio to play — a `Blob` (e.g. Kokoro output / a recording) or URL. */ audio: Blob | string; /** Auto-play once loaded. @default false */ autoPlay?: boolean; /** Additional class names merged onto the root element. */ className?: string; } /** * A composable scrubbable audio player for local `Blob` / object-URL audio such * as Kokoro TTS output (`useSynthesizeSpeech`) or a recording. Provides * play/pause, a draggable {@link ScrubBar}, and a time/duration readout. Manages * its own `