motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-TP3XIHL5.js

@@ -0,0 +1,787 @@
+"use client";
+import {
+  MicIcon
+} from "./chunk-H2JOCJWM.js";
+import {
+  ArrowUpIcon
+} from "./chunk-2IMPUH4H.js";
+import {
+  XIcon
+} from "./chunk-7FQ4XU7E.js";
+import {
+  ChevronDownIcon
+} from "./chunk-NIQFSLPC.js";
+import {
+  PlusIcon
+} from "./chunk-HK34LPY6.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/voice-prompt/voice-prompt.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion
+} from "motion/react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var GLIDE = [0.22, 1, 0.36, 1];
+var POP = { type: "spring", stiffness: 520, damping: 30 };
+var OPEN = 136;
+var DEFAULT_MODES = [
+  { id: "agent", label: "Agent", hint: "Plans and does the steps" },
+  { id: "chat", label: "Chat", hint: "Quick back and forth" },
+  { id: "research", label: "Research", hint: "Reads widely, cites sources" }
+];
+var DEFAULT_COLORS = ["#3b2fd6", "#7b5cf5", "#ec6fb3", "#ffc9a8"];
+var VERTEX = "attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}";
+var FRAGMENT = `precision highp float;
+uniform vec2 r;uniform float t;uniform float lvl;uniform float e;uniform vec3 bd;uniform float ink;
+uniform vec3 c0;uniform vec3 c1;uniform vec3 c2;uniform vec3 c3;
+float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
+float n(vec2 p){vec2 i=floor(p),f=fract(p);f=f*f*(3.-2.*f);return mix(mix(h(i),h(i+vec2(1,0)),f.x),mix(h(i+vec2(0,1)),h(i+vec2(1,1)),f.x),f.y);}
+float fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*n(p);p*=2.03;a*=.5;}return v;}
+vec4 tide(vec2 uv){
+  float x=uv.x-.5;
+  float arch=(.13+.03*sin(t*1.1))+e*(.2+lvl*.24);
+  float crest=arch*(1.-x*x*2.)
+    +e*(bd.x*.07*exp(-x*x*7.)
+    +bd.y*.05*(exp(-pow(x-.27+.03*sin(t*.7),2.)*20.)+exp(-pow(x+.27-.03*sin(t*.9),2.)*20.))
+    +bd.z*.015*sin(uv.x*14.-t*3.))
+    +.035*sin(uv.x*5.+t*(.9+lvl))*(.4+lvl)
+    +(.04+.06*lvl)*(fbm(vec2(uv.x*3.2-t*(.4+lvl*.6),t*.35))-.5);
+  float d=uv.y-crest;
+  float body=smoothstep(.2,-.24,d);
+  float g=fbm(vec2(uv.x*2.2+t*.22,uv.y*2.4-t*.3));
+  vec3 c=mix(c3,c2,smoothstep(.05,-.08,d)+g*.2);
+  c=mix(c,c1,smoothstep(-.06,-.24,d)*(.65+g*.35));
+  c=mix(c,c0,smoothstep(-.2,-.5,d)*(.7+g*.3));
+  float rim=exp(-pow(d/(.012+.012*lvl*e),2.))*(.25+.55*e);
+  float side=smoothstep(0.,.5,1.-abs(x)*1.9);
+  return vec4(c,clamp(body*(.5+.5*side)*(.7+.3*e),0.,1.)+rim*side*.5);
+}
+void main(){
+  vec2 uv=gl_FragCoord.xy/r;
+  float k=max(0.,lvl-.18)*e*1.3;
+  float strip=step(.84,n(vec2(floor(uv.y*34.),floor(t*10.))));
+  uv.x+=(sin(uv.y*52.+t*12.)*.004+strip*(n(vec2(uv.y*90.,t*22.))-.5)*.06)*k;
+  uv.y+=sin(uv.x*26.-t*6.)*.006*k;
+  float ca=.003+.014*k;
+  vec4 a=tide(uv+vec2(ca,0.)),b=tide(uv),z=tide(uv-vec2(ca,0.));
+  vec3 col=vec3(a.r,b.g,z.b);
+  float al=clamp(b.a,0.,1.);
+  float gr=h(gl_FragCoord.xy+fract(t*7.3)*vec2(113.,71.))-.5;
+  col+=gr*.045*al;
+  col=mix(col,col*1.15,ink);
+  gl_FragColor=vec4(clamp(col,0.,1.)*al,al);
+}`;
+var DEFAULT_SCRIPT = "Book a quiet table for two on Friday and remind me an hour before. Also check if they have a garden seat, and send the address to Sam so we can meet there after work.";
+var LINES = 2;
+var LINE = 28;
+var rgb = (hex) => {
+  const h = hex.replace("#", "");
+  const n = parseInt(h.length === 3 ? h.replace(/./g, "$&$&") : h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+};
+var VoicePrompt = React.forwardRef(
+  function VoicePrompt2({
+    placeholder = "Ask me anything",
+    modes = DEFAULT_MODES,
+    colors = DEFAULT_COLORS,
+    theme = "light",
+    microphone = true,
+    script = DEFAULT_SCRIPT,
+    onSubmit,
+    onAttach,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const dark = theme === "dark";
+    const uid = React.useId();
+    const root = React.useRef(null);
+    const canvas = React.useRef(null);
+    const ring = React.useRef(null);
+    const words = React.useRef(null);
+    const [scrolled, setScrolled] = React.useState(false);
+    const field = React.useRef(null);
+    const [text, setText] = React.useState("");
+    const [height, setHeight] = React.useState(24);
+    const [listening, setListening] = React.useState(false);
+    const [heard, setHeard] = React.useState(0);
+    const [mode, setMode] = React.useState(modes[0].id);
+    const [menu, setMenu] = React.useState(false);
+    const [hover, setHover] = React.useState(null);
+    const said = React.useMemo(
+      () => script.split(/\s+/).filter(Boolean),
+      [script]
+    );
+    const current = modes.find((m) => m.id === mode) ?? modes[0];
+    const ready = text.trim().length > 0 && !listening;
+    const live = React.useRef({
+      energy: { v: 0 },
+      listening: false,
+      analyser: null,
+      stream: null,
+      audio: null,
+      heard: 0
+    });
+    React.useImperativeHandle(ref, () => root.current);
+    React.useLayoutEffect(() => {
+      const el = field.current;
+      if (!el) return;
+      el.style.height = "0px";
+      const next = Math.min(72, Math.max(24, el.scrollHeight));
+      el.style.height = `${next}px`;
+      setHeight(next);
+    }, [text]);
+    React.useEffect(() => {
+      if (!menu) return;
+      const away = (e) => {
+        if (!e.target.closest?.(`[data-menu="${uid}"]`))
+          setMenu(false);
+      };
+      const esc = (e) => {
+        if (e.key !== "Escape") return;
+        e.stopPropagation();
+        setMenu(false);
+      };
+      document.addEventListener("pointerdown", away);
+      document.addEventListener("keydown", esc, true);
+      return () => {
+        document.removeEventListener("pointerdown", away);
+        document.removeEventListener("keydown", esc, true);
+      };
+    }, [menu, uid]);
+    const release = () => {
+      const l = live.current;
+      l.stream?.getTracks().forEach((t) => t.stop());
+      void l.audio?.close().catch(() => {
+      });
+      l.stream = null;
+      l.audio = null;
+      l.analyser = null;
+    };
+    React.useEffect(() => release, []);
+    const start = async () => {
+      setHeard(0);
+      setScrolled(false);
+      live.current.heard = 0;
+      live.current.listening = true;
+      setListening(true);
+      gsap.to(live.current.energy, {
+        v: 1,
+        duration: still ? 0 : 0.9,
+        ease: "power3.out"
+      });
+      if (!microphone || !navigator.mediaDevices?.getUserMedia) return;
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: true
+        });
+        if (!live.current.listening) {
+          stream.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        const audio = new AudioContext();
+        const analyser = audio.createAnalyser();
+        analyser.fftSize = 512;
+        analyser.smoothingTimeConstant = 0.7;
+        audio.createMediaStreamSource(stream).connect(analyser);
+        Object.assign(live.current, { stream, audio, analyser });
+      } catch {
+      }
+    };
+    const stop = (keep) => {
+      live.current.listening = false;
+      release();
+      setListening(false);
+      gsap.to(live.current.energy, {
+        v: 0,
+        duration: still ? 0 : 0.7,
+        ease: "power2.inOut"
+      });
+      if (keep && live.current.heard > 0) {
+        const got = said.slice(0, live.current.heard).join(" ");
+        setText((t) => t.trim() ? `${t.trimEnd()} ${got}` : got);
+      }
+      requestAnimationFrame(() => field.current?.focus());
+    };
+    const send = () => {
+      if (!ready) return;
+      onSubmit?.({ text: text.trim(), mode });
+      setText("");
+    };
+    useGSAP(
+      () => {
+        const p = words.current;
+        if (!heard || !p) return;
+        const over = p.offsetHeight > LINES * LINE;
+        setScrolled(over);
+        gsap.to(p, {
+          y: Math.min(0, LINES * LINE - p.offsetHeight),
+          duration: still ? 0 : 0.7,
+          ease: "power3.out",
+          overwrite: true
+        });
+        if (still) return;
+        const last = words.current?.querySelector(
+          `[data-word="${heard - 1}"]`
+        );
+        if (last)
+          gsap.fromTo(
+            last,
+            { opacity: 0, y: 8, filter: "blur(8px)" },
+            {
+              opacity: 1,
+              y: 0,
+              filter: "blur(0px)",
+              duration: 0.5,
+              ease: "power3.out"
+            }
+          );
+      },
+      { dependencies: [heard, still] }
+    );
+    useGSAP(
+      () => {
+        const el = canvas.current;
+        const gl = el.getContext("webgl", {
+          antialias: false,
+          premultipliedAlpha: true,
+          alpha: true
+        });
+        const setScale = ring.current ? gsap.quickSetter(ring.current, "scale") : null;
+        const setRing = ring.current ? gsap.quickSetter(ring.current, "opacity") : null;
+        const tones = colors.map(rgb);
+        const stop2 = (i) => tones[Math.min(tones.length - 1, i)].map((c) => c / 255);
+        let draw = () => {
+        };
+        if (gl) {
+          const shader = (type, src) => {
+            const s = gl.createShader(type);
+            gl.shaderSource(s, src);
+            gl.compileShader(s);
+            return s;
+          };
+          const prog = gl.createProgram();
+          gl.attachShader(prog, shader(gl.VERTEX_SHADER, VERTEX));
+          gl.attachShader(prog, shader(gl.FRAGMENT_SHADER, FRAGMENT));
+          gl.linkProgram(prog);
+          gl.useProgram(prog);
+          gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+          gl.bufferData(
+            gl.ARRAY_BUFFER,
+            new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+            gl.STATIC_DRAW
+          );
+          const at = gl.getAttribLocation(prog, "p");
+          gl.enableVertexAttribArray(at);
+          gl.vertexAttribPointer(at, 2, gl.FLOAT, false, 0, 0);
+          const u = (name) => gl.getUniformLocation(prog, name);
+          const U = {
+            r: u("r"),
+            t: u("t"),
+            lvl: u("lvl"),
+            e: u("e"),
+            bd: u("bd"),
+            ink: u("ink")
+          };
+          gl.uniform3fv(u("c0"), stop2(0));
+          gl.uniform3fv(u("c1"), stop2(1));
+          gl.uniform3fv(u("c2"), stop2(2));
+          gl.uniform3fv(u("c3"), stop2(3));
+          gl.uniform1f(U.ink, dark ? 1 : 0);
+          draw = () => {
+            const dpr = Math.min(2, window.devicePixelRatio || 1);
+            const w = Math.max(1, Math.round(el.clientWidth * dpr));
+            const h = Math.max(1, Math.round(el.clientHeight * dpr));
+            if (el.width !== w || el.height !== h) {
+              el.width = w;
+              el.height = h;
+            }
+            gl.viewport(0, 0, w, h);
+            gl.uniform2f(U.r, w, h);
+            gl.uniform1f(U.t, t);
+            gl.uniform1f(U.lvl, level);
+            gl.uniform1f(U.e, live.current.energy.v);
+            gl.uniform3f(U.bd, bands[0], bands[1], bands[2]);
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+          };
+        } else {
+          const css = (i) => `rgb(${tones[Math.min(tones.length - 1, i)].join(",")})`;
+          el.style.background = `radial-gradient(120% 90% at 50% 110%, ${css(0)}, ${css(1)} 35%, ${css(3)} 60%, transparent 80%)`;
+        }
+        const bands = new Float32Array(3);
+        const targets = new Float32Array(3);
+        const freq = new Uint8Array(256);
+        const wave = new Uint8Array(512);
+        let t = 0;
+        let level = 0;
+        let target = 0;
+        let talk = 0;
+        let pause = 0;
+        let syllable = { end: 0, start: 0, peak: 0, tone: [0, 0, 0] };
+        const listen = (dt) => {
+          const l = live.current;
+          if (l.analyser) {
+            l.analyser.getByteTimeDomainData(wave);
+            let sq = 0;
+            for (let i = 0; i < wave.length; i++)
+              sq += ((wave[i] - 128) / 128) ** 2;
+            target = Math.min(1, Math.sqrt(sq / wave.length) * 7);
+            l.analyser.getByteFrequencyData(freq);
+            const hz = l.analyser.context.sampleRate / l.analyser.fftSize;
+            const band = (lo, hi) => {
+              let m = 0;
+              let c = 0;
+              for (let i = Math.floor(lo / hz); i <= Math.min(freq.length - 1, Math.ceil(hi / hz)); i++, c++)
+                m += freq[i];
+              return c ? Math.min(1, m / c / 255 * 1.8) : 0;
+            };
+            targets[0] = band(90, 300);
+            targets[1] = band(300, 1500);
+            targets[2] = band(1500, 5e3);
+          } else if (l.listening) {
+            if (t > syllable.end) {
+              const rest = Math.random() < 0.14;
+              const dur = rest ? 0.38 + Math.random() * 0.5 : 0.11 + Math.random() * 0.19;
+              syllable = {
+                start: t,
+                end: t + dur,
+                peak: rest ? 0.12 : 0.45 + Math.random() * 0.4,
+                tone: [Math.random(), Math.random(), Math.random()]
+              };
+            }
+            const ph = Math.min(
+              1,
+              (t - syllable.start) / (syllable.end - syllable.start)
+            );
+            target = syllable.peak * Math.sin(Math.PI * ph) ** 0.7;
+            for (let i = 0; i < 3; i++)
+              targets[i] = target * (0.45 + 0.55 * syllable.tone[i]) * [1, 0.8, 0.55][i];
+          } else {
+            target = 0.15;
+            targets.fill(0.1);
+          }
+          const ease = (from, to) => from + (to - from) * Math.min(1, dt * (to > from ? 4 : 1.6));
+          for (let i = 0; i < 3; i++) bands[i] = ease(bands[i], targets[i]);
+          level = ease(level, target);
+          if (l.listening && l.heard < said.length) {
+            if (level > 0.22) talk += dt;
+            else pause += dt;
+            if (talk > 0.28 || !l.analyser && pause > 1.2) {
+              talk = 0;
+              pause = 0;
+              l.heard += 1;
+              setHeard(l.heard);
+            }
+          }
+        };
+        const tick = (_time, ms) => {
+          const dt = Math.min(0.05, Math.max(0, ms / 1e3));
+          t += dt;
+          listen(dt);
+          draw();
+          const E = live.current.energy.v;
+          setScale?.(1 + level * 0.9 * E);
+          setRing?.(0.6 * E);
+        };
+        if (still) {
+          const timer = window.setInterval(() => {
+            listen(0.1);
+            draw();
+          }, 100);
+          draw();
+          return () => window.clearInterval(timer);
+        }
+        gsap.ticker.add(tick);
+        return () => gsap.ticker.remove(tick);
+      },
+      { dependencies: [colors.join(), dark, still, said] }
+    );
+    const ink = dark ? "text-white" : "text-[#242423]";
+    const soft = dark ? "bg-white/[0.08] ring-1 ring-white/10 hover:bg-white/[0.14]" : "bg-white/75 ring-1 ring-[#242423]/[0.08] hover:bg-white";
+    const round = "relative grid size-10 shrink-0 cursor-pointer place-items-center rounded-full outline-none backdrop-blur-md transition-colors focus-visible:ring-2 focus-visible:ring-zinc-400";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: root,
+        className: cn("relative w-[440px] max-w-full", className),
+        onKeyDown: (e) => {
+          if (e.key === "Escape" && listening) {
+            e.stopPropagation();
+            stop(false);
+          }
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative rounded-[28px] p-3",
+              dark ? "bg-[#242423] shadow-[0_0_0_1px_rgba(255,255,255,0.06),0_12px_32px_-16px_rgba(0,0,0,0.6)]" : "bg-white shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)]",
+              ink
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute inset-0 z-10 overflow-hidden rounded-[inherit] p-px transition-opacity duration-700",
+                  style: {
+                    opacity: listening ? 0.9 : dark ? 0.45 : 0.55,
+                    mask: "linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)",
+                    WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+                    WebkitMaskComposite: "xor"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: "absolute left-1/2 top-1/2 aspect-square w-[160%] -translate-x-1/2 -translate-y-1/2",
+                      style: {
+                        background: `conic-gradient(from 0deg, transparent 0deg, ${colors[1] ?? colors[0]} 50deg, ${colors[2] ?? colors[0]} 90deg, transparent 140deg, transparent 180deg, ${colors[3] ?? colors[0]} 230deg, transparent 280deg)`
+                      },
+                      animate: still ? void 0 : { rotate: 360 },
+                      transition: { duration: listening ? 4 : 8, ease: "linear", repeat: Infinity }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]",
+                  children: /* @__PURE__ */ jsx(
+                    "canvas",
+                    {
+                      ref: canvas,
+                      className: "absolute inset-x-0 bottom-0 h-[208px] w-full"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  className: "relative px-2 pt-1",
+                  animate: { height: listening ? OPEN : height + 8 },
+                  transition: still ? { duration: 0 } : { type: "spring", stiffness: 300, damping: 32 },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        ref: field,
+                        value: text,
+                        rows: 1,
+                        "aria-label": "Message",
+                        placeholder: `${placeholder}..`,
+                        disabled: listening,
+                        onChange: (e) => setText(e.target.value),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" && !e.shiftKey) {
+                            e.preventDefault();
+                            send();
+                          }
+                        },
+                        style: { height },
+                        className: cn(
+                          "block w-full resize-none bg-transparent text-base leading-6 outline-none transition-opacity duration-200 disabled:opacity-0",
+                          dark ? "placeholder:text-white/40" : "placeholder:text-zinc-400"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(AnimatePresence, { children: listening && /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        className: "absolute inset-0 flex items-start justify-center px-4 pt-5",
+                        initial: { opacity: 0 },
+                        animate: { opacity: 1 },
+                        exit: {
+                          opacity: 0,
+                          filter: still ? "blur(0px)" : "blur(6px)"
+                        },
+                        transition: { duration: 0.3, ease: GLIDE },
+                        "aria-live": "polite",
+                        children: heard === 0 ? /* @__PURE__ */ jsx(
+                          motion.p,
+                          {
+                            className: cn(
+                              "text-lg",
+                              dark ? "text-white/45" : "text-zinc-400"
+                            ),
+                            animate: still ? void 0 : { opacity: [0.45, 1, 0.45] },
+                            transition: {
+                              duration: 1.8,
+                              repeat: Infinity,
+                              ease: "easeInOut"
+                            },
+                            children: "Listening"
+                          }
+                        ) : (
+                          // A two line window, like a teleprompter: once the words pass two lines
+                          // they glide up and the oldest line fades away through the top edge.
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: "h-14 w-full max-w-[340px] overflow-hidden",
+                              style: scrolled ? {
+                                maskImage: "linear-gradient(to bottom, transparent, black 24px)",
+                                WebkitMaskImage: "linear-gradient(to bottom, transparent, black 24px)"
+                              } : void 0,
+                              children: /* @__PURE__ */ jsx(
+                                "p",
+                                {
+                                  ref: words,
+                                  className: cn(
+                                    "text-center text-lg font-medium leading-7 tracking-tight",
+                                    dark ? "text-white/90" : "text-[#242423]"
+                                  ),
+                                  children: said.slice(0, heard).map((w, i) => /* @__PURE__ */ jsxs(
+                                    "span",
+                                    {
+                                      "data-word": i,
+                                      className: cn(
+                                        "inline-block transition-opacity duration-500",
+                                        i === heard - 1 && heard < said.length && "opacity-45"
+                                      ),
+                                      children: [
+                                        w,
+                                        i < heard - 1 ? "\xA0" : ""
+                                      ]
+                                    },
+                                    i
+                                  ))
+                                }
+                              )
+                            }
+                          )
+                        )
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "relative mt-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Add",
+                    onClick: () => onAttach?.(),
+                    className: cn(round, soft),
+                    children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-[18px]", strokeWidth: 2 })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+                /* @__PURE__ */ jsxs("div", { className: "relative", "data-menu": uid, children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-haspopup": "listbox",
+                      "aria-expanded": menu,
+                      onClick: () => setMenu((m) => !m),
+                      className: cn(
+                        "flex h-10 cursor-pointer items-center gap-1.5 rounded-full pl-4 pr-3 text-sm font-medium outline-none backdrop-blur-md transition-colors focus-visible:ring-2 focus-visible:ring-zinc-400",
+                        soft
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "relative inline-grid overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                          motion.span,
+                          {
+                            initial: still ? { opacity: 0 } : { opacity: 0, y: "70%" },
+                            animate: { opacity: 1, y: 0 },
+                            exit: still ? { opacity: 0 } : { opacity: 0, y: "-70%" },
+                            transition: { duration: 0.25, ease: GLIDE },
+                            children: current.label
+                          },
+                          current.id
+                        ) }) }),
+                        /* @__PURE__ */ jsx(
+                          motion.span,
+                          {
+                            animate: { rotate: menu ? 180 : 0 },
+                            transition: POP,
+                            className: "grid",
+                            children: /* @__PURE__ */ jsx(
+                              ChevronDownIcon,
+                              {
+                                className: cn(
+                                  "size-4",
+                                  dark ? "text-white/50" : "text-zinc-500"
+                                ),
+                                strokeWidth: 2.25
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(AnimatePresence, { children: menu && /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      role: "listbox",
+                      "aria-label": "Mode",
+                      initial: still ? { opacity: 0 } : { opacity: 0, y: 6, scale: 0.96, filter: "blur(4px)" },
+                      animate: {
+                        opacity: 1,
+                        y: 0,
+                        scale: 1,
+                        filter: "blur(0px)"
+                      },
+                      exit: still ? { opacity: 0 } : { opacity: 0, y: 4, scale: 0.98, filter: "blur(4px)" },
+                      transition: { duration: 0.2, ease: GLIDE },
+                      style: { transformOrigin: "50% 100%" },
+                      onPointerLeave: () => setHover(null),
+                      className: cn(
+                        "absolute bottom-full right-0 z-20 mb-2 w-60 rounded-2xl p-1 shadow-[0_1px_2px_rgba(0,0,0,0.06),0_16px_40px_-12px_rgba(0,0,0,0.28)] ring-1",
+                        dark ? "bg-[#2e2e2d] ring-white/10" : "bg-white ring-black/5"
+                      ),
+                      children: modes.map((m) => {
+                        const on = m.id === mode;
+                        return /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            role: "option",
+                            "aria-selected": on,
+                            onPointerEnter: () => setHover(m.id),
+                            onFocus: () => setHover(m.id),
+                            onClick: () => {
+                              setMode(m.id);
+                              setMenu(false);
+                            },
+                            className: "relative flex w-full cursor-pointer items-center justify-between gap-3 rounded-xl px-3 py-2 text-left outline-none",
+                            children: [
+                              (hover ?? mode) === m.id && /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  layoutId: `${uid}-hover`,
+                                  transition: still ? { duration: 0 } : POP,
+                                  className: cn(
+                                    "absolute inset-0 rounded-xl",
+                                    dark ? "bg-white/[0.08]" : "bg-[#242423]/[0.06]"
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+                                /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium", children: m.label }),
+                                /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: cn(
+                                      "block text-xs",
+                                      dark ? "text-white/50" : "text-zinc-500"
+                                    ),
+                                    children: m.hint
+                                  }
+                                )
+                              ] }),
+                              on && /* @__PURE__ */ jsx(
+                                CheckIcon,
+                                {
+                                  className: "relative size-4",
+                                  strokeWidth: 2.25,
+                                  "aria-hidden": true
+                                }
+                              )
+                            ]
+                          },
+                          m.id
+                        );
+                      })
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": listening ? "Stop and keep" : "Talk",
+                    "aria-pressed": listening,
+                    onClick: () => listening ? stop(true) : void start(),
+                    className: cn(
+                      round,
+                      listening ? dark ? "bg-white text-[#242423]" : "bg-[#242423] text-white" : soft
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          ref: ring,
+                          "aria-hidden": true,
+                          className: cn(
+                            "pointer-events-none absolute inset-0 rounded-full opacity-0",
+                            dark ? "bg-white/30" : "bg-[#242423]/20"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          className: "relative grid",
+                          initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.5, rotate: -45 },
+                          animate: { opacity: 1, scale: 1, rotate: 0 },
+                          exit: still ? { opacity: 0 } : { opacity: 0, scale: 0.5, rotate: 45 },
+                          transition: POP,
+                          children: listening ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-[18px]", strokeWidth: 2.25 }) : /* @__PURE__ */ jsx(MicIcon, { className: "size-[18px]", strokeWidth: 2 })
+                        },
+                        listening ? "keep" : "mic"
+                      ) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: listening ? /* @__PURE__ */ jsx(
+                  motion.button,
+                  {
+                    type: "button",
+                    "aria-label": "Cancel",
+                    onClick: () => stop(false),
+                    initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.6 },
+                    animate: { opacity: 1, scale: 1 },
+                    exit: still ? { opacity: 0 } : { opacity: 0, scale: 0.6 },
+                    transition: POP,
+                    className: cn(round, soft),
+                    children: /* @__PURE__ */ jsx(XIcon, { className: "size-[18px]", strokeWidth: 2.25 })
+                  },
+                  "cancel"
+                ) : /* @__PURE__ */ jsx(
+                  motion.button,
+                  {
+                    type: "button",
+                    "aria-label": "Send",
+                    disabled: !ready,
+                    onClick: send,
+                    initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.6 },
+                    animate: { opacity: 1, scale: 1 },
+                    exit: still ? { opacity: 0 } : { opacity: 0, scale: 0.6 },
+                    transition: POP,
+                    className: cn(
+                      round,
+                      "disabled:cursor-default",
+                      ready ? dark ? "bg-white text-[#242423]" : "bg-[#242423] text-white" : dark ? "bg-white/[0.06] text-white/35 ring-1 ring-white/10" : "bg-white/60 text-zinc-400 ring-1 ring-[#242423]/[0.06]"
+                    ),
+                    children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-[18px]", strokeWidth: 2.25 })
+                  },
+                  "send"
+                ) })
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+export {
+  VoicePrompt
+};