@mova-ui/react 0.4.6 → 0.4.8

package/registry/theme-toggle.json

@@ -1,7 +1,7 @@
 {
   "id": "theme-toggle",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "theme-toggle.tsx",
   "registryFile": "theme-toggle.json",
   "exports": [

package/registry/tilt-card.json

@@ -1,7 +1,7 @@
 {
   "id": "tilt-card",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "tilt-card.tsx",
   "sourcePath": "ui/hover/tilt-card.tsx",
   "registryFile": "tilt-card.json",

package/registry/timer-preparation-segmented.json

@@ -1,7 +1,7 @@
 {
   "id": "timer-preparation-segmented",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "timer-preparation-segmented.tsx",
   "registryFile": "timer-preparation-segmented.json",
   "exports": [

package/registry/tracking-in-text.json

@@ -1,7 +1,7 @@
 {
   "id": "tracking-in-text",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "tracking-in-text.tsx",
   "registryFile": "tracking-in-text.json",
   "exports": [

package/registry/tracking-out-text.json

@@ -1,7 +1,7 @@
 {
   "id": "tracking-out-text",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "tracking-out-text.tsx",
   "registryFile": "tracking-out-text.json",
   "exports": [

package/registry/trailing-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "trailing-dots",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "trailing-dots.tsx",
   "sourcePath": "ui/loading/trailing-dots.tsx",
   "registryFile": "trailing-dots.json",

package/registry/triple-dot-spinner.json

@@ -1,7 +1,7 @@
 {
   "id": "triple-dot-spinner",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "triple-dot-spinner.tsx",
   "sourcePath": "ui/loading/triple-dot-spinner.tsx",
   "registryFile": "triple-dot-spinner.json",

package/registry/twin-orbit.json

@@ -1,7 +1,7 @@
 {
   "id": "twin-orbit",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "twin-orbit.tsx",
   "sourcePath": "ui/loading/twin-orbit.tsx",
   "registryFile": "twin-orbit.json",

package/registry/typewriter-text.json

@@ -1,7 +1,7 @@
 {
   "id": "typewriter-text",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "typewriter-text.tsx",
   "registryFile": "typewriter-text.json",
   "exports": [

package/registry/typing-indicator.json

@@ -1,7 +1,7 @@
 {
   "id": "typing-indicator",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "typing-indicator.tsx",
   "sourcePath": "ui/loading/typing-indicator.tsx",
   "registryFile": "typing-indicator.json",

package/registry/typing.json

@@ -1,7 +1,7 @@
 {
   "id": "typing",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "typing.tsx",
   "sourcePath": "ui/loading/typing.tsx",
   "registryFile": "typing.json",

package/registry/use-mouse-position.json

@@ -1,7 +1,7 @@
 {
   "id": "use-mouse-position",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "use-mouse-position.ts",
   "sourcePath": "hooks/use-mouse-position.ts",
   "registryFile": "use-mouse-position.json",

package/registry/use-reduced-motion.json

@@ -1,7 +1,7 @@
 {
   "id": "use-reduced-motion",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "use-reduced-motion.ts",
   "sourcePath": "hooks/use-reduced-motion.ts",
   "registryFile": "use-reduced-motion.json",

package/registry/use-scroll-progress.json

@@ -1,7 +1,7 @@
 {
   "id": "use-scroll-progress",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "use-scroll-progress.ts",
   "sourcePath": "hooks/use-scroll-progress.ts",
   "registryFile": "use-scroll-progress.json",

package/registry/use-stagger.json

@@ -1,7 +1,7 @@
 {
   "id": "use-stagger",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "use-stagger.ts",
   "sourcePath": "hooks/use-stagger.ts",
   "registryFile": "use-stagger.json",

package/registry/use-web-haptics.json

@@ -1,7 +1,7 @@
 {
   "id": "use-web-haptics",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "use-web-haptics.ts",
   "sourcePath": "hooks/use-web-haptics.ts",
   "registryFile": "use-web-haptics.json",

package/registry/users-growth-pill-progress.json

@@ -1,7 +1,7 @@
 {
   "id": "users-growth-pill-progress",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "users-growth-pill-progress.tsx",
   "registryFile": "users-growth-pill-progress.json",
   "exports": [

package/registry/utils.json

@@ -1,7 +1,7 @@
 {
   "id": "utils",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "utils.ts",
   "sourcePath": "lib/utils.ts",
   "registryFile": "utils.json",

package/registry/vertical-wheel-counter.json

@@ -1,7 +1,7 @@
 {
   "id": "vertical-wheel-counter",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "vertical-wheel-counter.tsx",
   "sourcePath": "components/css-animations/yui-components/RedesignedUiTrios.tsx",
   "registryFile": "vertical-wheel-counter.json",

package/registry/views-hourly-wave-chart.json

@@ -1,7 +1,7 @@
 {
   "id": "views-hourly-wave-chart",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "views-hourly-wave-chart.tsx",
   "registryFile": "views-hourly-wave-chart.json",
   "exports": [

package/registry/voice-assistant-card.json

@@ -0,0 +1,19 @@
+{
+  "id": "voice-assistant-card",
+  "tier": "free",
+  "version": "0.4.8",
+  "file": "voice-assistant-card.tsx",
+  "sourcePath": "ui/cards/voice-assistant-card.tsx",
+  "registryFile": "voice-assistant-card.json",
+  "exports": [
+    "VoiceAssistantCard",
+    "VoiceAssistantCardProps",
+    "VoiceAssistantChat"
+  ],
+  "dependencies": [
+    "voice-glow"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "\"use client\";\n\"use client\";\n\n/** Voice is the original local preview; no microphone permission is requested.\n * Based on the Transitions.dev Voice Assistant Card. Icons: Heroicons, MIT, Tailwind Labs.\n */\nimport * as React from \"react\";\nimport { VoiceBeam } from \"voice-glow\";\n\nexport interface VoiceAssistantChat { id: string; title: string; preview: string; time?: string }\nexport interface VoiceAssistantCardProps {\n  name?: string;\n  chats?: VoiceAssistantChat[];\n  simulatedTranscript?: string;\n  onSend?: (message: string, image?: File) => void | Promise<void>;\n  onChatChange?: (chat: VoiceAssistantChat) => void;\n  theme?: \"light\" | \"dark\";\n  className?: string;\n  style?: React.CSSProperties;\n}\nconst recentChats: VoiceAssistantChat[] = [\n  { id: \"cafe\", title: \"Quiet café nearby\", preview: \"Found 3 spots with good wifi\", time: \"Now\" },\n  { id: \"trip\", title: \"Weekend in Lisbon\", preview: \"Day trips from the city\", time: \"Yesterday\" },\n  { id: \"dinner\", title: \"Dinner for four\", preview: \"Pasta, salad and a cake\", time: \"Mon\" },\n  { id: \"playlist\", title: \"Morning run playlist\", preview: \"45 minutes of upbeat songs\", time: \"Sun\" },\n];\ntype Phase = \"idle\" | \"listening\" | \"thinking\" | \"error\";\nfunction numeric(element: HTMLElement | null, name: string, fallback: number) {\n  const value = element ? parseFloat(getComputedStyle(element).getPropertyValue(name)) : NaN;\n  return Number.isFinite(value) ? value : fallback;\n}\nfunction bezier(value: string) {\n  const match = value.replace(/\\s+/g, \"\").match(/cubic-bezier\\(([-\\d.]+),([-\\d.]+),([-\\d.]+),([-\\d.]+)\\)/);\n  if (!match) return (t: number) => t;\n  const [x1, y1, x2, y2] = match.slice(1).map(Number);\n  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;\n  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;\n  return (t: number) => {\n    if (t <= 0 || t >= 1) return Math.min(1, Math.max(0, t));\n    let s = t;\n    for (let i = 0; i < 8; i++) {\n      const delta = ((ax * s + bx) * s + cx) * s - t;\n      const derivative = (3 * ax * s + 2 * bx) * s + cx;\n      if (Math.abs(delta) < 1e-6 || derivative === 0) break;\n      s -= delta / derivative;\n    }\n    return ((ay * s + by) * s + cy) * s;\n  };\n}\nfunction SwapText({ value }: { value: string }) {\n  const [shown, setShown] = React.useState(value);\n  const ref = React.useRef<HTMLSpanElement>(null);\n  React.useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (value === shown || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n      el.classList.remove(\"is-exit\", \"is-enter-start\");\n      setShown(value);\n      return;\n    }\n    el.classList.remove(\"is-enter-start\");\n    el.classList.add(\"is-exit\");\n    const timer = window.setTimeout(() => setShown(value), numeric(el, \"--text-swap-dur\", 150));\n    return () => window.clearTimeout(timer);\n  }, [value, shown]);\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el?.classList.contains(\"is-exit\")) return;\n    el.classList.remove(\"is-exit\");\n    el.classList.add(\"is-enter-start\");\n    void el.offsetHeight;\n    el.classList.remove(\"is-enter-start\");\n  }, [shown]);\n  return <span ref={ref} className=\"mvc-t-text-swap\">{shown}</span>;\n}\nfunction useImageUrl(file?: File) {\n  const [url, setUrl] = React.useState(\"\");\n  React.useEffect(() => {\n    if (!file) { setUrl(\"\"); return; }\n    const next = URL.createObjectURL(file);\n    setUrl(next);\n    return () => URL.revokeObjectURL(next);\n  }, [file]);\n  return url;\n}\n\nexport function VoiceAssistantCard({ name = \"Aria\", chats = recentChats, simulatedTranscript = \"Find me a quiet café nearby with good wifi for this afternoon\", onSend, onChatChange, theme = \"light\", className = \"\", style }: VoiceAssistantCardProps = {}) {\n  const [page, setPage] = React.useState<1 | 2>(2);\n  const [chatId, setChatId] = React.useState<string | undefined>(chats[0]?.id);\n  const [phase, setPhase] = React.useState<Phase>(\"idle\");\n  const [words, setWords] = React.useState<string[]>([]);\n  const [count, setCount] = React.useState(0);\n  const [runKey, setRunKey] = React.useState(0);\n  const [text, setText] = React.useState(\"\");\n  const [attachment, setAttachment] = React.useState<File>();\n  const [attached, setAttached] = React.useState(false);\n  const [sentImage, setSentImage] = React.useState<File>();\n  const [clearing, setClearing] = React.useState(false);\n  const [clearText, setClearText] = React.useState(\"\");\n  const [pending, setPending] = React.useState(false);\n  const [reducedMotion, setReducedMotion] = React.useState(false);\n  const speaking = React.useRef(false);\n  const generation = React.useRef(0);\n  const sending = React.useRef(false);\n  const timers = React.useRef<number[]>([]);\n  const raf = React.useRef(0);\n  const cardRef = React.useRef<HTMLElement>(null);\n  const wrapRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mirrorRef = React.useRef<HTMLDivElement>(null);\n  const placeholderRef = React.useRef<HTMLDivElement>(null);\n  const glowRef = React.useRef<HTMLDivElement>(null);\n  const fileRef = React.useRef<HTMLInputElement>(null);\n  const menuRef = React.useRef<HTMLButtonElement>(null);\n  const focusChat = React.useRef(false);\n  const listRef = React.useRef<HTMLElement>(null);\n  const chatRef = React.useRef<HTMLElement>(null);\n  const thumb = useImageUrl(attachment);\n  const sentUrl = useImageUrl(sentImage);\n  const chat = chats.find(item => item.id === chatId) ?? chats[0];\n  const live = phase === \"listening\";\n  const hasContent = Boolean(text.trim() || attached);\n  const caption = { idle: \"Type, or tap the lines to speak\", listening: \"Listening…\", thinking: \"One moment\", error: \"Could not send. Please try again.\" }[phase];\n\n  React.useEffect(() => {\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    const read = () => setReducedMotion(query.matches);\n    read(); query.addEventListener(\"change\", read);\n    return () => { query.removeEventListener(\"change\", read); timers.current.forEach(window.clearTimeout); cancelAnimationFrame(raf.current); generation.current++; };\n  }, []);\n  React.useEffect(() => {\n    listRef.current?.toggleAttribute(\"inert\", page !== 1);\n    chatRef.current?.toggleAttribute(\"inert\", page !== 2);\n    if (page === 2 && focusChat.current) { inputRef.current?.focus(); focusChat.current = false; }\n  }, [page]);\n  function clearTimers() { timers.current.forEach(window.clearTimeout); timers.current = []; }\n  function later(callback: () => void, duration: number) { timers.current.push(window.setTimeout(callback, Math.max(0, duration))); }\n  function think() { speaking.current = false; setPhase(\"thinking\"); later(() => setPhase(\"idle\"), 1800); }\n  function start() {\n    clearTimers();\n    generation.current++;\n    const transcript = simulatedTranscript.split(/\\s+/).filter(Boolean);\n    setWords(transcript); setSentImage(undefined); setCount(0); setRunKey(key => key + 1);\n    speaking.current = true; setPhase(\"listening\");\n    transcript.forEach((_, index) => later(() => setCount(index + 1), 400 + index * 280));\n    later(think, 400 + transcript.length * 280 + 500);\n  }\n  function buildGlow(value: string) {\n    const wrap = wrapRef.current, input = inputRef.current;\n    const context = document.createElement(\"canvas\").getContext(\"2d\");\n    if (!context || !wrap || !input) return \"\";\n    context.font = getComputedStyle(input).font;\n    const rgb = theme === \"dark\" ? \"255,255,255\" : \"0,0,0\";\n    const width = wrap.clientWidth || 200;\n    const padding = parseFloat(getComputedStyle(input).paddingLeft) || 4;\n    const spread = numeric(cardRef.current, \"--glow-spread\", 1.5);\n    const layers: string[] = [];\n    let x = 0;\n    value.split(/(\\s+)/).forEach(segment => {\n      const segmentWidth = context.measureText(segment).width;\n      if (segment.trim()) {\n        const center = padding + x + segmentWidth / 2;\n        const halfWidth = Math.max(segmentWidth * 0.45, 8) * spread;\n        [[0, .8, 7, .22], [halfWidth * .45, .55, 8, .18], [-halfWidth * .4, .65, 6, .16], [halfWidth * .15, .9, 5, .14]].forEach(([dx, multiplier, height, opacity]) => {\n          layers.push(`radial-gradient(ellipse ${Math.max(halfWidth * multiplier, 2).toFixed(1)}px ${height}px at ${(((center + dx) / width) * 100).toFixed(2)}% 100%, rgba(${rgb},${opacity}), transparent)`);\n        });\n      }\n      x += segmentWidth;\n    });\n    return layers.join(\", \");\n  }\n  function stopDissolve() {\n    cancelAnimationFrame(raf.current);\n    [mirrorRef, placeholderRef, glowRef].forEach(ref => { if (ref.current) ref.current.style.cssText = \"\"; });\n    setClearing(false); setClearText(\"\");\n  }\n  function dissolve(old: string) {\n    stopDissolve();\n    const mirror = mirrorRef.current, placeholder = placeholderRef.current, glow = glowRef.current;\n    setText(\"\");\n    if (!mirror || !placeholder || !glow || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const token = (name: string, fallback: number) => numeric(cardRef.current, name, fallback);\n    const total = token(\"--clear-dur\", 1000), outDuration = Math.max(1, token(\"--clear-out-dur\", 400)), inDuration = Math.max(1, token(\"--clear-in-dur\", 400));\n    const outFly = token(\"--clear-out-fly\", 12), inFly = token(\"--clear-in-fly\", 12), blur = token(\"--clear-blur\", 2);\n    const delay = token(\"--glow-delay\", 50), peakAt = Math.min(.999, Math.max(.001, token(\"--glow-peak-at\", .15))), opacity = token(\"--glow-opacity\", .42);\n    const computed = getComputedStyle(cardRef.current!);\n    const easeOut = bezier(computed.getPropertyValue(\"--clear-out-ease\")), easeIn = bezier(computed.getPropertyValue(\"--clear-in-ease\"));\n    setClearText(old); setClearing(true);\n    glow.style.background = buildGlow(old); glow.style.opacity = \"0\";\n    placeholder.style.transform = `translateY(-${inFly}px)`; placeholder.style.opacity = \".9\"; placeholder.style.filter = `blur(${blur}px)`;\n    const started = performance.now();\n    const tick = (now: number) => {\n      const elapsed = now - started, out = easeOut(Math.min(1, elapsed / outDuration)), incoming = easeIn(Math.min(1, elapsed / inDuration));\n      mirror.style.transform = `translateY(${(out * outFly).toFixed(1)}px)`; mirror.style.opacity = (1 - out).toFixed(3); mirror.style.filter = `blur(${(out * blur).toFixed(1)}px)`;\n      placeholder.style.transform = `translateY(${(-inFly + incoming * inFly).toFixed(1)}px)`; placeholder.style.opacity = (.9 + incoming * .1).toFixed(3); placeholder.style.filter = `blur(${(blur - incoming * blur).toFixed(1)}px)`;\n      let glowStrength = 0;\n      if (elapsed > delay) { const progress = Math.min(1, (elapsed - delay) / Math.max(1, total - delay)); glowStrength = progress < peakAt ? progress / peakAt : 1 - (progress - peakAt) / (1 - peakAt); }\n      glow.style.opacity = (glowStrength * opacity).toFixed(3);\n      if (elapsed < total) raf.current = requestAnimationFrame(tick); else stopDissolve();\n    };\n    raf.current = requestAnimationFrame(tick);\n  }\n  function send() {\n    const message = text.trim(), image = attached ? attachment : undefined;\n    if ((!message && !image) || sending.current || live) return;\n    clearTimers();\n    const run = ++generation.current;\n    const nextWords = message ? message.split(/\\s+/) : [];\n    setWords(nextWords); setSentImage(image); setCount(0); setRunKey(key => key + 1);\n    if (message) dissolve(text);\n    setAttached(false); speaking.current = false;\n    const gap = numeric(cardRef.current, \"--stream-gap\", 60), steps = Math.max(nextWords.length, 1);\n    for (let index = 0; index < steps; index++) later(() => setCount(index + 1), 80 + index * gap);\n    later(think, 80 + steps * gap + 400);\n    if (!onSend) return;\n    sending.current = true; setPending(true);\n    Promise.resolve().then(() => onSend(message, image)).catch(() => {\n      if (run !== generation.current) return;\n      clearTimers(); stopDissolve(); setText(message); setAttachment(image); setAttached(Boolean(image)); setPhase(\"error\");\n    }).finally(() => { if (run === generation.current) { sending.current = false; setPending(false); } });\n  }\n  function onRight() {\n    if (live) { clearTimers(); setCount(words.length); think(); }\n    else if (hasContent) send();\n    else start();\n  }\n  function openChat(item: VoiceAssistantChat) {\n    if (item.id !== chatId) {\n      clearTimers(); stopDissolve(); generation.current++; sending.current = false; setPending(false);\n      speaking.current = false; setPhase(\"idle\"); setWords([]); setSentImage(undefined); setCount(0); setRunKey(key => key + 1); setChatId(item.id);\n      onChatChange?.(item);\n    }\n    focusChat.current = true; setPage(2);\n  }\n  function keepFocus(event: React.MouseEvent | React.PointerEvent) { if (document.activeElement === inputRef.current) event.preventDefault(); }\n  function togglePage() { setPage(current => current === 2 ? 1 : 2); }\n  const iconState = live ? \"a\" : hasContent ? \"b\" : \"a\";\n  return <section ref={cardRef} className={`mova-voice ${className}`} data-theme={theme} data-phase={phase} style={style} aria-label={`${name} voice assistant`}>\n    <style>{css}</style>\n    <VoiceBeam className=\"mvc-beam\" level={() => {\n      if (!speaking.current || reducedMotion) return .06;\n      const time = Date.now();\n      return Math.max(.06, Math.min(1, .55 + Math.sin(time / 150) * .22 + Math.sin(time / 61) * .12 + Math.sin(time / 37) * .08)) * .6;\n    }} processing={phase === \"thinking\" || pending} paused={reducedMotion} {...(theme === \"dark\" ? { theme: \"dark\" as const } : {})}>\n      <div className=\"mvc-inner\"><div className=\"mvc-content\">\n        <header className=\"mvc-top\">\n          <button ref={menuRef} type=\"button\" className={`mvc-menu${page === 1 ? \" is-open\" : \"\"}`} aria-label={page === 1 ? \"Close conversations\" : \"Open conversations\"} aria-expanded={page === 1} onClick={togglePage}>\n            <svg className=\"mvc-menu-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" aria-hidden=\"true\"><line className=\"mvc-l1\" x1=\"2.5\" y1=\"4\" x2=\"13.5\" y2=\"4\" /><line className=\"mvc-l2\" x1=\"2.5\" y1=\"8\" x2=\"13.5\" y2=\"8\" /><line className=\"mvc-l3\" x1=\"2.5\" y1=\"12\" x2=\"13.5\" y2=\"12\" /></svg>\n          </button>\n          <div className=\"mvc-top-text\"><span className=\"mvc-name\"><SwapText value={page === 1 ? \"Chats\" : name} /></span><span className=\"mvc-meta\"><SwapText value={page === 1 ? `${chats.length} conversations` : chat?.title ?? \"New conversation\"} /></span></div>\n        </header>\n        <div className=\"mvc-divider\" aria-hidden=\"true\" />\n        <div className=\"mvc-t-page-slide\" data-page={page}>\n          <section className=\"mvc-t-page mvc-page\" data-page-id=\"1\" ref={listRef} aria-label=\"Your conversations\" aria-hidden={page !== 1} inert={page !== 1} onKeyDown={event => { if (event.key === \"Escape\") { setPage(2); menuRef.current?.focus(); } }}>\n            <ul className=\"mvc-list\">{chats.map(item => <li key={item.id}><button type=\"button\" className=\"mvc-row\" onClick={() => openChat(item)}><span className=\"mvc-row-text\"><span className=\"mvc-row-title\">{item.title}</span><span className=\"mvc-row-preview\">{item.preview}</span></span><span className=\"mvc-row-time\">{item.time}</span></button></li>)}</ul>\n          </section>\n          <section className=\"mvc-t-page mvc-page\" data-page-id=\"2\" ref={chatRef} aria-label={`Chat with ${name}`} aria-hidden={page !== 2} inert={page !== 2}>\n            <div className=\"mvc-body\"><div className=\"mvc-bubble-row\"><p className=\"mvc-bubble\"><span>How can I help you today?</span></p></div>\n              <div key={runKey} className=\"mvc-transcript\" aria-live=\"polite\" aria-atomic=\"true\">\n                <span className=\"mvc-sr-only\">{words.slice(0, count).join(\" \")}</span>\n                {sentUrl && <img className={`mvc-sent-img mvc-t-stream-w${count > 0 ? \" is-in\" : \"\"}`} src={sentUrl} alt=\"Image you sent\" width={40} height={40} />}\n                {words.length > 0 && <p aria-hidden=\"true\"><span>{words.map((word, index) => <React.Fragment key={index}><span className={`mvc-t-stream-w${index < count ? \" is-in\" : \"\"}`}>{word}</span>{index < words.length - 1 ? \" \" : \"\"}</React.Fragment>)}</span></p>}\n              </div>\n            </div>\n            <div className=\"mvc-bottom\"><span className=\"mvc-caption\" role=\"status\"><SwapText value={caption} /></span>\n              <form className=\"mvc-field\" onSubmit={event => { event.preventDefault(); send(); }}>\n                <button type=\"button\" className=\"mvc-attach mvc-t-icon-swap\" data-state={attached ? \"b\" : \"a\"} aria-label={attached ? \"Remove image\" : \"Attach image\"} disabled={pending} onPointerDown={keepFocus} onMouseDown={keepFocus} onClick={() => attached ? setAttached(false) : fileRef.current?.click()}>\n                  <span className=\"mvc-t-icon\" data-icon=\"a\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2.25\" aria-hidden=\"true\"><path d=\"m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z\" /></svg></span>\n                  <span className=\"mvc-t-icon\" data-icon=\"b\">{thumb && <img className=\"mvc-thumb\" src={thumb} alt=\"\" width={28} height={28} />}</span>\n                </button>\n                <input ref={fileRef} type=\"file\" accept=\"image/*\" hidden onChange={event => { const file = event.target.files?.[0]; event.target.value = \"\"; if (file?.type.startsWith(\"image/\") && file.size <= 10 * 1024 * 1024) { setAttachment(file); setAttached(true); } }} />\n                <div ref={wrapRef} className={`mvc-t-clear mvc-input-wrap${text && !clearing ? \" has-value\" : \"\"}${clearing ? \" is-clearing\" : \"\"}`}>\n                  <input ref={inputRef} className=\"mvc-input\" type=\"text\" value={text} aria-label={`Message ${name}`} disabled={pending} maxLength={2000} onChange={event => { if (clearing) stopDissolve(); setText(event.target.value); }} />\n                  <div className=\"mvc-t-clear-mirror\" ref={mirrorRef} aria-hidden=\"true\">{(clearing ? clearText : text).replace(/ /g, \"\\u00a0\")}</div>\n                  <div className=\"mvc-t-clear-placeholder\" ref={placeholderRef} aria-hidden=\"true\">Ask {name} anything</div>\n                  <div className=\"mvc-t-clear-glow\" ref={glowRef} aria-hidden=\"true\" />\n                </div>\n                <button type=\"button\" className={`mvc-mic mvc-t-icon-swap${live ? \" is-live\" : \"\"}`} data-state={iconState} aria-label={live ? \"Stop voice preview\" : hasContent ? \"Send message\" : \"Start voice preview\"} aria-pressed={live} disabled={pending} onPointerDown={keepFocus} onMouseDown={keepFocus} onClick={onRight}>\n                  <span className=\"mvc-t-icon\" data-icon=\"a\"><span className=\"mvc-wave\" aria-hidden=\"true\"><i /><i /><i /><i /><i /></span></span>\n                  <span className=\"mvc-t-icon\" data-icon=\"b\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2.25\" aria-hidden=\"true\"><path d=\"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18\" /></svg></span>\n                </button>\n              </form>\n            </div>\n          </section>\n        </div>\n      </div></div>\n    </VoiceBeam>\n  </section>;\n}\n\nconst css = `\n/* @motion\n[Page slide] chat and chats screens\n--page-slide-dur: Duration\n--page-slide-ease: Easing\n--page-slide-distance: Distance\nmore --page-fade-dur: Fade duration\nmore --page-fade-ease: Fade easing\nmore --page-blur: Blur\nmore --page-stagger: Delay\nmore --page-exit-enabled: Exit slide\n[Streaming transcript] your message under Aria's\n--stream-fade: Duration\n--stream-ease: Easing\n--stream-gap: Word gap\nmore --stream-blur: Blur\n[Send dissolve] prompt text on send\n--clear-dur: Duration\n--clear-out-ease: Easing\n--clear-out-fly: Distance\nmore --clear-out-dur: Text out duration\nmore --clear-in-dur: Placeholder in duration\nmore --clear-in-fly: Placeholder distance\nmore --clear-in-ease: Placeholder easing\nmore --clear-blur: Blur\nmore --glow-delay: Glow delay\nmore --glow-peak-at: Glow peak\nmore --glow-opacity: Glow opacity\nmore --glow-spread: Glow spread\nmore [Status swap] caption and header titles\n--text-swap-dur: Duration\n--text-swap-ease: Easing\n--text-swap-translate-y: Distance\nmore --text-swap-blur: Blur\nmore [Icon swap] voice / send and image buttons\n--icon-swap-dur: Duration\n--icon-swap-ease: Easing\n--icon-swap-start-scale: Start scale\nmore --icon-swap-blur: Blur\nmore [Menu morph] menu lines into a close X\n--duration-fast: Duration\nmore [Voice lines] bars in the voice button\n--wave-dur: Duration\n--wave-min: Rest scale\nmore [Bubble float] assistant message\n--float-dur: Duration\n--float-distance: Distance\nmore [Field focus] prompt ring, row hover\n--duration-quick: Duration\nmore [Button press] all buttons and rows\n--press-scale: Scale\n--press-dur: Duration\n--ease-smooth-out: Easing\n*/\n.mova-voice {\n  --page-slide-dur: 250ms;\n  --page-fade-dur: 250ms;\n  --page-slide-distance: 8px;\n  --page-blur: 3px;\n  --page-stagger: 0ms;\n  --page-exit-enabled: 1;\n  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --stream-gap: 60ms;\n  --stream-fade: 350ms;\n  --stream-blur: 1px;\n  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --clear-dur: 1000ms;\n  --clear-out-dur: 400ms;\n  --clear-in-dur: 400ms;\n  --clear-out-fly: 12px;\n  --clear-in-fly: 12px;\n  --clear-out-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --clear-in-ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --clear-blur: 2px;\n  --glow-delay: 50ms;\n  --glow-peak-at: 0.15;\n  --glow-opacity: 0.42;\n  --glow-spread: 1.5;\n  --text-swap-dur: 150ms;\n  --text-swap-translate-y: 4px;\n  --text-swap-blur: 2px;\n  --text-swap-ease: ease-in-out;\n  --icon-swap-dur: 250ms;\n  --icon-swap-blur: 2px;\n  --icon-swap-start-scale: 0.25;\n  --icon-swap-ease: ease-in-out;\n  --duration-fast: 250ms;\n  --duration-quick: 150ms;\n  --wave-dur: 900ms;\n  --wave-min: 0.35;\n  --float-dur: 4000ms;\n  --float-distance: 3px;\n  --press-scale: 0.99;\n  --press-dur: 150ms;\n  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);\n  --mvc-btn-bg: var(--mvc-surface);\n  --mvc-btn-shadow: 0 1px 3px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -1px 0 0 rgba(0,0,0,.08);\n  --mvc-hover: rgba(0, 0, 0, 0.02);\n  --mvc-chip: rgba(0, 0, 0, 0.04);\n  --mvc-focus-soft: rgba(0, 115, 229, 0.06);\n  --mvc-img-outline: rgba(0, 0, 0, 0.1);\n  --mvc-card-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 32px -4px rgba(0,0,0,.06), 0 1px 3px 0 rgba(0,0,0,.04);\n  --divider: color-mix(in srgb, var(--mvc-border) 49%, transparent);\n  --bubble: color-mix(in srgb, var(--mvc-fg) 6%, var(--mvc-surface));\n}\n.mova-voice[data-theme=\"dark\"] {\n  --mvc-btn-bg: rgba(255, 255, 255, 0.04);\n  --mvc-btn-shadow: 0 1px 1px 0 rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 0 rgba(255,255,255,.06);\n  --mvc-hover: rgba(255, 255, 255, 0.02);\n  --mvc-chip: rgba(255, 255, 255, 0.07);\n  --mvc-focus-soft: rgba(0, 115, 229, 0.16);\n  --mvc-img-outline: rgba(255, 255, 255, 0.1);\n  --glow-opacity: 0.85;\n  --bubble: color-mix(in srgb, var(--mvc-fg) 9%, var(--mvc-surface));\n}\n\n.mova-voice {\n  display: grid;\n  width: 360px;\n  max-width: 100%;\n  height: 340px;\n  border-radius: 24px;\n  background: var(--mvc-surface);\n  box-shadow: var(--mvc-card-shadow);\n  color: var(--mvc-fg);\n  -webkit-font-smoothing: antialiased;\n}\n.mvc-beam { margin: -1px; border-radius: 25px; }\n.mvc-inner { position: relative; height: 100%; border-radius: 25px; background: transparent; overflow: hidden; }\n.mvc-content { position: relative; z-index: 5; height: 100%; display: flex; flex-direction: column; }\n:where(.mova-voice) :is(button, input) { font: inherit; padding: 0; border: 0; background: none; color: inherit; }\n:where(.mova-voice) button { cursor: pointer; }\n.mova-voice :focus-visible:not(input) { outline: none; box-shadow: 0 0 0 2px var(--mvc-surface), 0 0 0 4px var(--mvc-accent); }\n\n.mvc-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 12px; flex: none; }\n.mvc-top-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }\n.mvc-name { font-size: 16px; line-height: 22px; font-weight: 500; }\n.mvc-meta { font-size: 12px; line-height: 16px; color: var(--mvc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.mvc-divider { height: 1px; flex: none; background: linear-gradient(90deg, transparent, var(--divider) 20%, var(--divider) 80%, transparent); }\n\n.mvc-menu {\n  --press-scale: 0.95;\n  flex: none;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  color: var(--mvc-fg);\n  transition: transform var(--press-dur) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out);\n}\n@media (hover: hover) and (pointer: fine) { .mvc-menu:hover { background-color: var(--mvc-chip); } }\n.mvc-menu:is(:active,.is-pressed) { transform: scale(var(--press-scale)); }\n.mvc-menu-icon line {\n  transform-box: view-box;\n  transform-origin: 8px 8px;\n  transition: transform var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out);\n}\n.mvc-menu.is-open .mvc-l1 { transform: rotate(45deg) translateY(4px); }\n.mvc-menu.is-open .mvc-l2 { opacity: 0; }\n.mvc-menu.is-open .mvc-l3 { transform: rotate(-45deg) translateY(-4px); }\n\n.mvc-t-page-slide { position: relative; flex: 1; min-height: 0; }\n.mvc-t-page-slide .mvc-t-page[data-page-id=\"1\"] { --t-page-from-x: calc(var(--page-slide-distance) * -1); }\n.mvc-t-page-slide .mvc-t-page[data-page-id=\"2\"] { --t-page-from-x: var(--page-slide-distance); }\n.mvc-t-page-slide .mvc-t-page {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  pointer-events: none;\n  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));\n  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));\n  transition:\n    opacity   var(--page-fade-dur)  var(--page-fade-ease),\n    transform var(--page-slide-dur) var(--page-slide-ease),\n    filter    var(--page-slide-dur) var(--page-slide-ease);\n  will-change: opacity, transform, filter;\n}\n.mvc-t-page-slide[data-page=\"1\"] .mvc-t-page[data-page-id=\"1\"],\n.mvc-t-page-slide[data-page=\"2\"] .mvc-t-page[data-page-id=\"2\"] {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(0);\n  filter: blur(0);\n  transition-delay: var(--page-stagger);\n}\n.mvc-page { display: flex; flex-direction: column; }\n\n.mvc-list { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; }\n.mvc-row {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 12px;\n  border-radius: 12px;\n  text-align: left;\n  transition: transform var(--press-dur) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out);\n}\n@media (hover: hover) and (pointer: fine) { .mvc-row:hover { background-color: var(--mvc-hover); } }\n.mvc-row:is(:active,.is-pressed) { transform: scale(var(--press-scale)); }\n.mvc-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }\n.mvc-row-title { font-size: 13px; line-height: 20px; color: var(--mvc-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.mvc-row-preview { font-size: 12px; line-height: 16px; color: var(--mvc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.mvc-row-time { flex: none; font-size: 12px; line-height: 16px; color: var(--mvc-muted); }\n\n.mvc-body { flex: 1; min-height: 0; overflow: hidden; padding: 24px 24px 0; display: flex; flex-direction: column; gap: 16px; }\n.mvc-bubble-row { padding-left: 8px; animation: mvc-float var(--float-dur) ease-in-out infinite; }\n@keyframes mvc-float {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(calc(var(--float-distance) * -1)); }\n}\n.mvc-bubble { position: relative; display: inline-block; max-width: 240px; padding: 8px 12px; border-radius: 18px; background: var(--bubble); font-size: 14px; line-height: 20px; margin: 0; }\n.mvc-bubble span { position: relative; z-index: 1; }\n.mvc-bubble::before { content: \"\"; position: absolute; bottom: 0; left: -7px; width: 20px; height: 20px; background: var(--bubble); border-bottom-right-radius: 16px 14px; }\n.mvc-bubble::after { content: \"\"; position: absolute; bottom: 0; left: -26px; width: 26px; height: 20px; background: var(--mvc-surface); border-bottom-right-radius: 10px; }\n\n.mvc-transcript { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-left: 32px; }\n.mvc-transcript p {\n  margin: 0;\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--mvc-fg);\n  text-align: right;\n  text-wrap: pretty;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 3;\n  overflow: hidden;\n}\n.mvc-sent-img { display: block; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; outline: 1px solid var(--mvc-img-outline); outline-offset: -1px; }\n.mvc-t-stream-w {\n  opacity: 0;\n  filter: blur(var(--stream-blur));\n  transition:\n    opacity var(--stream-fade) var(--stream-ease),\n    filter var(--stream-fade) var(--stream-ease);\n}\n.mvc-t-stream-w.is-in { opacity: 1; filter: blur(0); }\n\n.mvc-bottom { flex: none; padding: 0 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }\n.mvc-caption { font-size: 12px; line-height: 16px; color: var(--mvc-muted); }\n\n.mvc-t-text-swap {\n  display: inline-block;\n  transform: translateY(0);\n  filter: blur(0);\n  opacity: 1;\n  transition:\n    transform var(--text-swap-dur) var(--text-swap-ease),\n    filter    var(--text-swap-dur) var(--text-swap-ease),\n    opacity   var(--text-swap-dur) var(--text-swap-ease);\n  will-change: transform, filter, opacity;\n}\n.mvc-t-text-swap.is-exit { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }\n.mvc-t-text-swap.is-enter-start { transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); opacity: 0; transition: none; }\n\n.mvc-t-icon-swap { position: relative; display: inline-grid; }\n.mvc-t-icon-swap .mvc-t-icon {\n  grid-area: 1 / 1;\n  transition:\n    opacity   var(--icon-swap-dur) var(--icon-swap-ease),\n    filter    var(--icon-swap-dur) var(--icon-swap-ease),\n    transform var(--icon-swap-dur) var(--icon-swap-ease);\n}\n.mvc-t-icon-swap[data-state=\"a\"] .mvc-t-icon[data-icon=\"a\"],\n.mvc-t-icon-swap[data-state=\"b\"] .mvc-t-icon[data-icon=\"b\"] { opacity: 1; filter: blur(0); transform: scale(1); }\n.mvc-t-icon-swap[data-state=\"a\"] .mvc-t-icon[data-icon=\"b\"],\n.mvc-t-icon-swap[data-state=\"b\"] .mvc-t-icon[data-icon=\"a\"] { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); }\n.mvc-t-icon { display: grid; place-items: center; }\n\n.mvc-field {\n  box-sizing: border-box;\n  width: 100%;\n  height: 44px;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  border-radius: 22px;\n  background: var(--mvc-surface);\n  box-shadow: 0 0 0 1px var(--mvc-border);\n  transition: box-shadow var(--duration-quick) var(--ease-smooth-out);\n}\n.mvc-field:has(.mvc-input:focus) { box-shadow: 0 0 0 1px var(--mvc-accent), 0 0 0 4px var(--mvc-focus-soft); }\n.mvc-attach {\n  --press-scale: 0.95;\n  flex: none;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  color: var(--mvc-muted);\n  transition: transform var(--press-dur) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out);\n}\n@media (hover: hover) and (pointer: fine) { .mvc-attach:hover { background-color: var(--mvc-chip); } }\n.mvc-attach:is(:active,.is-pressed) { transform: scale(var(--press-scale)); }\n.mvc-thumb { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; outline: 1px solid var(--mvc-img-outline); outline-offset: -1px; }\n\n.mvc-t-clear { position: relative; overflow: hidden; }\n.mvc-input-wrap { flex: 1; min-width: 0; height: 36px; }\n.mvc-input { width: 100%; height: 100%; box-sizing: border-box; padding: 0 4px; outline: none; font-size: 13px; line-height: 20px; color: var(--mvc-fg); caret-color: var(--mvc-fg); }\n.mvc-t-clear-mirror, .mvc-t-clear-placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n  white-space: nowrap;\n  overflow: hidden;\n  z-index: 2;\n  padding: 0 4px;\n  font-size: 13px;\n  line-height: 20px;\n}\n.mvc-t-clear-mirror { opacity: 0; color: var(--mvc-fg); }\n.mvc-t-clear-placeholder { color: var(--mvc-muted); }\n.mvc-t-clear.has-value .mvc-t-clear-mirror, .mvc-t-clear.is-clearing .mvc-t-clear-mirror { opacity: 1; }\n.mvc-t-clear.has-value > input, .mvc-t-clear.is-clearing > input { -webkit-text-fill-color: transparent; }\n.mvc-t-clear.has-value .mvc-t-clear-placeholder { opacity: 0; }\n.mvc-t-clear-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3; mix-blend-mode: multiply; }\n.mova-voice[data-theme=\"dark\"] .mvc-t-clear-glow { mix-blend-mode: screen; }\n\n.mvc-mic {\n  --press-scale: 0.95;\n  flex: none;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  background: var(--mvc-btn-bg);\n  box-shadow: var(--mvc-btn-shadow);\n  color: var(--mvc-fg);\n  transition: transform var(--press-dur) var(--ease-smooth-out);\n}\n:where(.mova-voice) .mvc-mic { background: var(--mvc-btn-bg); }\n@media (hover: hover) and (pointer: fine) { .mvc-mic:hover { background-image: linear-gradient(var(--mvc-hover), var(--mvc-hover)); } }\n.mvc-mic:is(:active,.is-pressed) { transform: scale(var(--press-scale)); }\n.mova-voice .mvc-mic:focus-visible { box-shadow: var(--mvc-btn-shadow), 0 0 0 2px var(--mvc-surface), 0 0 0 4px var(--mvc-accent); }\n.mvc-wave { display: flex; align-items: center; gap: 2px; height: 16px; }\n.mvc-wave i { display: block; width: 2px; border-radius: 1px; background: currentColor; transform-origin: center; }\n.mvc-wave i:nth-child(1) { height: 4px; }\n.mvc-wave i:nth-child(2) { height: 9px; }\n.mvc-wave i:nth-child(3) { height: 14px; }\n.mvc-wave i:nth-child(4) { height: 9px; }\n.mvc-wave i:nth-child(5) { height: 4px; }\n.mvc-mic.is-live .mvc-wave i { animation: mvc-wave var(--wave-dur) ease-in-out infinite; }\n.mvc-mic.is-live .mvc-wave i:nth-child(2) { animation-delay: calc(var(--wave-dur) * -0.3); }\n.mvc-mic.is-live .mvc-wave i:nth-child(3) { animation-delay: calc(var(--wave-dur) * -0.6); }\n.mvc-mic.is-live .mvc-wave i:nth-child(4) { animation-delay: calc(var(--wave-dur) * -0.15); }\n.mvc-mic.is-live .mvc-wave i:nth-child(5) { animation-delay: calc(var(--wave-dur) * -0.45); }\n@keyframes mvc-wave {\n  0%, 100% { transform: scaleY(1); }\n  50% { transform: scaleY(var(--wave-min)); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mvc-bubble-row, .mvc-mic.is-live .mvc-wave i { animation: none !important; }\n  .mvc-t-text-swap, .mvc-t-icon-swap .mvc-t-icon, .mvc-t-page-slide .mvc-t-page, .mvc-menu-icon line { transition: none !important; }\n  .mvc-t-stream-w { transition: none !important; filter: none !important; opacity: 1 !important; }\n  .mvc-t-clear-glow { opacity: 0 !important; }\n  .mvc-mic, .mvc-menu, .mvc-attach, .mvc-row { transition: none; }\n  .mvc-mic:is(:active,.is-pressed), .mvc-menu:is(:active,.is-pressed), .mvc-attach:is(:active,.is-pressed), .mvc-row:is(:active,.is-pressed) { transform: none; }\n}\n\n.mova-voice { --mvc-bg:#f9f9f9; --mvc-fg:#0d0d0d; --mvc-muted:#6c6c6c; --mvc-border:rgba(0,0,0,.08); --mvc-surface:#fff; --mvc-accent:#17181c; font:400 13px/20px \"Inter Variable\",Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif; font-optical-sizing:auto; font-feature-settings:\"liga\" 1,\"calt\" 1; letter-spacing:0; color-scheme:light; }\n.mova-voice[data-theme=\"dark\"] { --mvc-bg:#131313; --mvc-fg:#f2f2f2; --mvc-muted:rgba(202,202,202,.7); --mvc-border:rgba(255,255,255,.08); --mvc-surface:#1d1d1d; --mvc-accent:#fff; color-scheme:dark; }\n.mova-voice { min-width:0; }\n.mova-voice, .mova-voice * { box-sizing:border-box; }\n.mova-voice button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }\n.mova-voice button:disabled { cursor:default; opacity:.5; }\n.mova-voice .mvc-list { overflow:auto; }\n.mova-voice .mvc-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }\n.mova-voice .mvc-transcript p { overflow-wrap:anywhere; }\n@media (prefers-reduced-motion:reduce) { .mova-voice *, .mova-voice *::before, .mova-voice *::after { animation:none!important; transition:none!important; } }\n`;\n"
+}

package/registry/wandering-cube.json

@@ -1,7 +1,7 @@
 {
   "id": "wandering-cube",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "wandering-cube.tsx",
   "sourcePath": "ui/loading/wandering-cube.tsx",
   "registryFile": "wandering-cube.json",

package/registry/wandering-eyes.json

@@ -1,7 +1,7 @@
 {
   "id": "wandering-eyes",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "wandering-eyes.tsx",
   "sourcePath": "ui/loading/wandering-eyes.tsx",
   "registryFile": "wandering-eyes.json",

package/registry/watch-spinner.json

@@ -1,7 +1,7 @@
 {
   "id": "watch-spinner",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "watch-spinner.tsx",
   "sourcePath": "ui/loading/watch-spinner.tsx",
   "registryFile": "watch-spinner.json",

package/registry/wave-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "wave-dots",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "wave-dots.tsx",
   "sourcePath": "ui/loading/wave-dots.tsx",
   "registryFile": "wave-dots.json",

package/registry/wave-physics-loader.json

@@ -1,7 +1,7 @@
 {
   "id": "wave-physics-loader",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "wave-physics-loader.tsx",
   "sourcePath": "ui/loading/wave-physics-loader.tsx",
   "registryFile": "wave-physics-loader.json",

package/registry/wave-reveal.json

@@ -1,7 +1,7 @@
 {
   "id": "wave-reveal",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "wave-reveal.tsx",
   "registryFile": "wave-reveal.json",
   "exports": [

package/registry/waveform-loader.json

@@ -1,7 +1,7 @@
 {
   "id": "waveform-loader",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "waveform-loader.tsx",
   "sourcePath": "ui/loading/waveform-loader.tsx",
   "registryFile": "waveform-loader.json",

package/registry/word-reveal.json

@@ -1,7 +1,7 @@
 {
   "id": "word-reveal",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "word-reveal.tsx",
   "sourcePath": "ui/text/word-reveal.tsx",
   "registryFile": "word-reveal.json",

package/registry/zig-zag-pulse.json

@@ -1,7 +1,7 @@
 {
   "id": "zig-zag-pulse",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "zig-zag-pulse.tsx",
   "sourcePath": "ui/loading/zig-zag-pulse.tsx",
   "registryFile": "zig-zag-pulse.json",

package/registry/zoom-in-text.json

@@ -1,7 +1,7 @@
 {
   "id": "zoom-in-text",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "zoom-in-text.tsx",
   "registryFile": "zoom-in-text.json",
   "exports": [

package/registry/zoom-in.json

@@ -1,7 +1,7 @@
 {
   "id": "zoom-in",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "zoom-in.tsx",
   "sourcePath": "ui/entrance/zoom-in.tsx",
   "registryFile": "zoom-in.json",

package/registry/zoom-out-text.json

@@ -1,7 +1,7 @@
 {
   "id": "zoom-out-text",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "zoom-out-text.tsx",
   "registryFile": "zoom-out-text.json",
   "exports": [