52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T24fb,"use client"; import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const SPRING = { type: "spring", stiffness: 430, damping: 32, mass: 0.58 } as const; const INSTANT = { duration: 0 } as const; export type VoiceCaptureState = "idle" | "recording" | "paused"; export type VoiceCaptureProps = { levels?: readonly number[]; label?: string; recordLabel?: string; pauseLabel?: string; resumeLabel?: string; recordingLabel?: string; pausedLabel?: string; sendLabel?: string; deleteLabel?: string; onStateChange?: (state: VoiceCaptureState) => void; onSend?: (durationSeconds: number) => void; onDelete?: () => void; className?: string; }; const Mic = () => ; const Pause = () => ; const Play = () => ; export function VoiceCapture({ levels = [0.22, 0.48, 0.3, 0.72, 0.45, 0.9, 0.36, 0.62, 0.28, 0.78, 0.52, 0.34, 0.84, 0.42, 0.66, 0.3, 0.56, 0.24], label = "Voice message", recordLabel = "Record voice message", pauseLabel = "Pause recording", resumeLabel = "Resume recording", recordingLabel = "Recording", pausedLabel = "Recording paused", sendLabel = "Send recording", deleteLabel = "Delete recording", onStateChange, onSend, onDelete, className = "", }: VoiceCaptureProps) { const [state, setState] = useState("idle"); const [seconds, setSeconds] = useState(0); const startedAt = useRef(null); const recordedMs = useRef(0); const root = useRef(null); const recordButton = useRef(null); const primaryControl = useRef(null); const pendingFocus = useRef<"record" | "primary" | null>(null); const [visible, setVisible] = useState(true); const reduced = useReducedMotion() === true; useLayoutEffect(() => { if (pendingFocus.current === "primary" && state !== "idle") { pendingFocus.current = null; primaryControl.current?.focus({ preventScroll: true }); } else if (pendingFocus.current === "record" && state === "idle") { pendingFocus.current = null; recordButton.current?.focus({ preventScroll: true }); } }, [state]); useEffect(() => { const node = root.current; if (!node || typeof IntersectionObserver === "undefined") return; let intersecting = true; let documentVisible = !document.hidden; const update = () => setVisible(intersecting && documentVisible); const observer = new IntersectionObserver(([entry]) => { intersecting = entry.isIntersecting; update(); }); const onVisibility = () => { documentVisible = !document.hidden; update(); }; observer.observe(node); document.addEventListener("visibilitychange", onVisibility); return () => { observer.disconnect(); document.removeEventListener("visibilitychange", onVisibility); }; }, [state]); useEffect(() => { if (state !== "recording") return; const update = () => { const runningMs = startedAt.current === null ? 0 : Math.max(0, Date.now() - startedAt.current); setSeconds(Math.floor((recordedMs.current + runningMs) / 1000)); }; update(); const timer = window.setInterval(update, 1000); return () => window.clearInterval(timer); }, [state]); const setPhase = (next: VoiceCaptureState) => { setState(next); onStateChange?.(next); }; const resetDuration = () => { startedAt.current = null; recordedMs.current = 0; setSeconds(0); }; const start = () => { recordedMs.current = 0; startedAt.current = Date.now(); setSeconds(0); pendingFocus.current = "primary"; setPhase("recording"); }; const pause = () => { if (startedAt.current !== null) { recordedMs.current += Math.max(0, Date.now() - startedAt.current); startedAt.current = null; } setSeconds(Math.floor(recordedMs.current / 1000)); setPhase("paused"); }; const resume = () => { startedAt.current = Date.now(); setPhase("recording"); }; const durationSeconds = () => { const runningMs = startedAt.current === null ? 0 : Math.max(0, Date.now() - startedAt.current); return Math.floor((recordedMs.current + runningMs) / 1000); }; const remove = () => { pendingFocus.current = "record"; setPhase("idle"); resetDuration(); onDelete?.(); }; const send = () => { const duration = durationSeconds(); onSend?.(duration); pendingFocus.current = "record"; setPhase("idle"); resetDuration(); }; const time = useMemo(() => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`, [seconds]); const stateLabel = state === "recording" ? recordingLabel : pausedLabel; const transition = reduced ? INSTANT : SPRING; if (state === "idle") { return ( ); } return (

{levels.map((level, index) => { const base = Math.max(0.14, Math.min(1, level)); return ( ); })}

{time}

{stateLabel} ); } 51:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/voice-capture.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/voice-capture.tsx"}],"className":"h-[70svh] min-h-80"}]]}]