motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-GYDTIVOY.js

@@ -0,0 +1,934 @@
+"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 {
+  FILE_TEXT
+} from "./chunk-OINRQUYT.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/prompt-input/prompt-input.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion as motion3,
+  useReducedMotion as useReducedMotion3
+} from "motion/react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+
+// src/icons/attach-file.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var PATH_VARIANTS = {
+  normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.1,
+      duration: 0.4,
+      opacity: { duration: 0.1, delay: 0.1 }
+    }
+  }
+};
+var AttachFileIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                d: "M6 7.90909V16C6 19.3137 8.68629 22 12 22V22C15.3137 22 18 19.3137 18 16V6C18 3.79086 16.2091 2 14 2V2C11.7909 2 10 3.79086 10 6V15.1818C10 16.2864 10.8954 17.1818 12 17.1818V17.1818C13.1046 17.1818 14 16.2864 14 15.1818V8",
+                initial: "normal",
+                variants: PATH_VARIANTS
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+AttachFileIcon.displayName = "AttachFileIcon";
+
+// src/icons/earth.tsx
+import { motion as motion2, useAnimation as useAnimation2, useReducedMotion as useReducedMotion2 } from "motion/react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CIRCLE_TRANSITION = {
+  duration: 0.3,
+  delay: 0.1,
+  opacity: { delay: 0.15 }
+};
+var CIRCLE_VARIANTS = {
+  normal: {
+    pathLength: 1,
+    opacity: 1
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1]
+  }
+};
+var EarthIcon = forwardRef2(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation2();
+    const isControlledRef = useRef2(false);
+    useImperativeHandle2(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef2(null);
+    const reduced = useReducedMotion2();
+    const [hosted, setHosted] = useState2(false);
+    useEffect2(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx2(
+                motion2.path,
+                {
+                  animate: controls,
+                  d: "M21.54 15H17a2 2 0 0 0-2 2v4.54",
+                  transition: { duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } },
+                  variants: {
+                    normal: {
+                      pathLength: 1,
+                      opacity: 1,
+                      pathOffset: 0
+                    },
+                    animate: {
+                      pathLength: [0, 1],
+                      opacity: [0, 1],
+                      pathOffset: [1, 0]
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                motion2.path,
+                {
+                  animate: controls,
+                  d: "M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17",
+                  transition: { duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } },
+                  variants: {
+                    normal: {
+                      pathLength: 1,
+                      opacity: 1,
+                      pathOffset: 0
+                    },
+                    animate: {
+                      pathLength: [0, 1],
+                      opacity: [0, 1],
+                      pathOffset: [1, 0]
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                motion2.path,
+                {
+                  animate: controls,
+                  d: "M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05",
+                  transition: { duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } },
+                  variants: {
+                    normal: {
+                      pathLength: 1,
+                      opacity: 1,
+                      pathOffset: 0
+                    },
+                    animate: {
+                      pathLength: [0, 1],
+                      opacity: [0, 1],
+                      pathOffset: [1, 0]
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                motion2.circle,
+                {
+                  animate: controls,
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  transition: CIRCLE_TRANSITION,
+                  variants: CIRCLE_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+EarthIcon.displayName = "EarthIcon";
+
+// src/components/prompt-input/prompt-input.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var GLIDE = [0.22, 1, 0.36, 1];
+var POP = { type: "spring", stiffness: 520, damping: 30 };
+var MAX_HEIGHT = 200;
+var DEFAULT_PLACEHOLDERS = [
+  "Ask anything",
+  "Summarise this report in three lines",
+  "Draft a friendly reply to this email",
+  "Turn these notes into a project plan"
+];
+var DEFAULT_MODELS = [
+  { id: "swift", label: "Swift", hint: "Quick answers" },
+  { id: "balanced", label: "Balanced", hint: "Everyday work" },
+  { id: "deep", label: "Deep", hint: "Hard problems, slower" }
+];
+var SAMPLE_FILES = ["Q3 report.pdf", "brand-notes.md", "roadmap.xlsx"];
+var HEARD = "Draft a launch post for the new pricing page";
+var fmt = (s) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+function VoiceRing({ still }) {
+  const canvas = React.useRef(null);
+  useGSAP(
+    () => {
+      const el = canvas.current;
+      const ctx = el.getContext("2d");
+      const size = 44;
+      const dpr = Math.min(3, window.devicePixelRatio || 1);
+      el.width = size * dpr;
+      el.height = size * dpr;
+      const dark = () => document.documentElement.classList.contains("dark");
+      const rings = [
+        { n: 48, r: 16, spin: 0.5, amp: 5, dot: 1.15 },
+        { n: 28, r: 10, spin: -0.8, amp: 3, dot: 0.95 }
+      ];
+      const seeds = rings.map(
+        (ring) => Array.from({ length: ring.n }, () => Math.random() * Math.PI * 2)
+      );
+      let level = 0.3;
+      let target = 0.6;
+      let next = 0;
+      let t = 0;
+      const draw = () => {
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, size, size);
+        const ink = dark() ? "250,250,250" : "36,36,35";
+        rings.forEach((ring, k) => {
+          for (let i = 0; i < ring.n; i++) {
+            const seed = seeds[k][i];
+            const a = i / ring.n * Math.PI * 2 + t * ring.spin;
+            const wave = 0.5 * Math.sin(i * 0.9 + t * 5.5 + seed) + 0.5 * Math.sin(i * 0.37 - t * 3.1);
+            const push = Math.max(0, wave) * level * ring.amp;
+            const r = ring.r + push;
+            const x = size / 2 + Math.cos(a) * r;
+            const y = size / 2 + Math.sin(a) * r;
+            const alpha = 0.25 + 0.75 * Math.min(1, Math.abs(wave) * (0.4 + level));
+            ctx.fillStyle = `rgba(${ink},${alpha.toFixed(3)})`;
+            ctx.beginPath();
+            ctx.arc(
+              x,
+              y,
+              ring.dot * (0.7 + push * 0.12 + level * 0.35),
+              0,
+              Math.PI * 2
+            );
+            ctx.fill();
+          }
+        });
+      };
+      if (still) {
+        draw();
+        return;
+      }
+      const tick = (_time, dt) => {
+        const s = dt / 1e3;
+        t += s;
+        next -= s;
+        if (next <= 0) {
+          target = 0.2 + Math.random() * 0.8;
+          next = 0.08 + Math.random() * 0.18;
+        }
+        level += (target - level) * Math.min(1, s * 10);
+        draw();
+      };
+      gsap.ticker.add(tick);
+      return () => gsap.ticker.remove(tick);
+    },
+    { dependencies: [still] }
+  );
+  return /* @__PURE__ */ jsx3("canvas", { ref: canvas, "aria-hidden": true, className: "size-11 shrink-0" });
+}
+var PromptInput = React.forwardRef(
+  function PromptInput2({
+    placeholders = DEFAULT_PLACEHOLDERS,
+    models = DEFAULT_MODELS,
+    onSubmit,
+    onAttach,
+    className
+  }, ref) {
+    const still = !!useReducedMotion3();
+    const uid = React.useId();
+    const field = React.useRef(null);
+    const [text, setText] = React.useState("");
+    const [height, setHeight] = React.useState(24);
+    const [focused, setFocused] = React.useState(false);
+    const [hint, setHint] = React.useState(0);
+    const [files, setFiles] = React.useState([]);
+    const [model, setModel] = React.useState(models[1]?.id ?? models[0].id);
+    const [menu, setMenu] = React.useState(false);
+    const [hover, setHover] = React.useState(null);
+    const [web, setWeb] = React.useState(false);
+    const [listening, setListening] = React.useState(false);
+    const [seconds, setSeconds] = React.useState(0);
+    const [working, setWorking] = React.useState(false);
+    const [sent, setSent] = React.useState(0);
+    const typing = React.useRef(0);
+    const ready = text.trim().length > 0 && !listening;
+    const current = models.find((m) => m.id === model) ?? models[0];
+    React.useLayoutEffect(() => {
+      const el = field.current;
+      if (!el) return;
+      el.style.height = "0px";
+      const next = Math.min(MAX_HEIGHT, Math.max(24, el.scrollHeight));
+      el.style.height = `${next}px`;
+      setHeight(next);
+    }, [text]);
+    React.useEffect(() => {
+      if (text || listening || placeholders.length < 2) return;
+      const t = window.setInterval(
+        () => setHint((h) => (h + 1) % placeholders.length),
+        2800
+      );
+      return () => window.clearInterval(t);
+    }, [text, listening, placeholders.length]);
+    React.useEffect(() => {
+      if (!listening) return;
+      setSeconds(0);
+      const t = window.setInterval(() => setSeconds((s) => s + 1), 1e3);
+      return () => window.clearInterval(t);
+    }, [listening]);
+    React.useEffect(() => {
+      if (!menu) return;
+      const away = (e) => {
+        if (!e.target.closest?.(`[data-menu="${uid}"]`))
+          setMenu(false);
+      };
+      const esc = (e) => e.key === "Escape" && setMenu(false);
+      document.addEventListener("pointerdown", away);
+      document.addEventListener("keydown", esc);
+      return () => {
+        document.removeEventListener("pointerdown", away);
+        document.removeEventListener("keydown", esc);
+      };
+    }, [menu, uid]);
+    React.useEffect(() => () => window.clearInterval(typing.current), []);
+    const attach = () => {
+      if (onAttach) return onAttach();
+      const next = SAMPLE_FILES.find((f) => !files.includes(f));
+      if (next) setFiles((f) => [...f, next]);
+    };
+    const toggleMic = () => {
+      if (!listening) {
+        setListening(true);
+        return;
+      }
+      setListening(false);
+      window.clearInterval(typing.current);
+      const base = text ? `${text.trimEnd()} ` : "";
+      let i = 0;
+      typing.current = window.setInterval(() => {
+        i += still ? HEARD.length : 2;
+        setText(base + HEARD.slice(0, i));
+        if (i >= HEARD.length) window.clearInterval(typing.current);
+      }, 28);
+      field.current?.focus();
+    };
+    const send = async () => {
+      if (working) {
+        setWorking(false);
+        return;
+      }
+      if (!ready) return;
+      const prompt = { text: text.trim(), model, web, files };
+      setSent((n) => n + 1);
+      setWorking(true);
+      setText("");
+      setFiles([]);
+      try {
+        await Promise.all([
+          onSubmit?.(prompt),
+          new Promise((r) => setTimeout(r, still ? 400 : 2400))
+        ]);
+      } finally {
+        setWorking(false);
+      }
+    };
+    const tool = "flex h-9 cursor-pointer items-center gap-1.5 rounded-full text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-zinc-400";
+    return /* @__PURE__ */ jsxs2("div", { ref, className: cn("@container relative w-[560px] max-w-full", className), children: [
+      /* @__PURE__ */ jsx3(AnimatePresence, { children: working && !still && /* @__PURE__ */ jsxs2(
+        motion3.div,
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute -inset-[1.5px] rounded-[29.5px]",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.4 },
+          children: [
+            /* @__PURE__ */ jsx3(
+              motion3.div,
+              {
+                className: "absolute inset-0 rounded-[inherit]",
+                animate: {
+                  boxShadow: [
+                    "0 0 0 1px rgba(36,36,35,0.06), 0 0 18px 2px rgba(36,36,35,0.06)",
+                    "0 0 0 1px rgba(36,36,35,0.1), 0 0 30px 6px rgba(36,36,35,0.12)",
+                    "0 0 0 1px rgba(36,36,35,0.06), 0 0 18px 2px rgba(36,36,35,0.06)"
+                  ]
+                },
+                transition: {
+                  duration: 2,
+                  ease: "easeInOut",
+                  repeat: Infinity
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 overflow-hidden rounded-[inherit]", children: /* @__PURE__ */ jsx3(
+              motion3.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, transparent 250deg, rgba(36,36,35,0.08) 290deg, rgba(36,36,35,0.55) 335deg, rgba(255,255,255,0.9) 350deg, transparent 360deg)"
+                },
+                animate: { rotate: 360 },
+                transition: {
+                  duration: 2.2,
+                  ease: "linear",
+                  repeat: Infinity
+                }
+              }
+            ) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs2(
+        motion3.div,
+        {
+          animate: {
+            boxShadow: focused ? "0 0 0 4px rgba(36,36,35,0.06), 0 1px 2px rgba(0,0,0,0.05), 0 16px 36px -18px rgba(0,0,0,0.22)" : "0 0 0 0px rgba(36,36,35,0), 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px -16px rgba(0,0,0,0.18)"
+          },
+          transition: { duration: 0.25 },
+          className: "relative rounded-[28px] bg-white p-3 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100",
+          children: [
+            /* @__PURE__ */ jsx3(AnimatePresence, { initial: false, children: files.length > 0 && /* @__PURE__ */ jsx3(
+              motion3.div,
+              {
+                initial: { height: 0, opacity: 0 },
+                animate: { height: "auto", opacity: 1 },
+                exit: { height: 0, opacity: 0 },
+                transition: { duration: still ? 0 : 0.3, ease: GLIDE },
+                className: "overflow-hidden",
+                children: /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-2 px-1 pb-2", children: /* @__PURE__ */ jsx3(AnimatePresence, { initial: false, mode: "popLayout", children: files.map((f) => /* @__PURE__ */ jsxs2(
+                  motion3.span,
+                  {
+                    layout: true,
+                    initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.6, y: 6 },
+                    animate: { opacity: 1, scale: 1, y: 0 },
+                    exit: still ? { opacity: 0 } : { opacity: 0, scale: 0.6 },
+                    transition: POP,
+                    className: "flex h-9 items-center gap-2 rounded-xl bg-zinc-100 pl-2.5 pr-1.5 text-sm dark:bg-white/8",
+                    children: [
+                      /* @__PURE__ */ jsx3(
+                        FILE_TEXT,
+                        {
+                          className: "size-4 text-zinc-500",
+                          strokeWidth: 2,
+                          "aria-hidden": true
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3("span", { className: "max-w-[160px] truncate", children: f }),
+                      /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": `Remove ${f}`,
+                          onClick: () => setFiles((all) => all.filter((x) => x !== f)),
+                          className: "grid size-6 cursor-pointer place-items-center rounded-full text-zinc-500 outline-none transition-colors hover:bg-zinc-200 hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 dark:hover:bg-white/10",
+                          children: /* @__PURE__ */ jsx3(XIcon, { className: "size-3.5", strokeWidth: 2.25 })
+                        }
+                      )
+                    ]
+                  },
+                  f
+                )) }) })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs2(
+              motion3.div,
+              {
+                className: "relative px-2 pt-1",
+                animate: { height: listening ? 52 : height + 8 },
+                transition: still ? { duration: 0 } : { type: "spring", stiffness: 420, damping: 36 },
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    "textarea",
+                    {
+                      ref: field,
+                      value: text,
+                      rows: 1,
+                      "aria-label": "Message",
+                      disabled: listening,
+                      onChange: (e) => setText(e.target.value),
+                      onFocus: () => setFocused(true),
+                      onBlur: () => setFocused(false),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" && !e.shiftKey) {
+                          e.preventDefault();
+                          void send();
+                        }
+                      },
+                      style: { height },
+                      className: "block w-full resize-none bg-transparent text-base leading-6 outline-none disabled:opacity-0"
+                    }
+                  ),
+                  !text && /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "pointer-events-none absolute inset-x-2 top-1 overflow-hidden text-base leading-6 text-zinc-400 dark:text-zinc-500",
+                      children: listening ? /* @__PURE__ */ jsxs2(
+                        motion3.span,
+                        {
+                          className: "flex items-center gap-3 text-zinc-700 dark:text-zinc-200",
+                          initial: still ? false : { opacity: 0, y: 6, filter: "blur(4px)" },
+                          animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                          transition: { duration: 0.35, ease: GLIDE },
+                          children: [
+                            /* @__PURE__ */ jsx3(VoiceRing, { still }),
+                            /* @__PURE__ */ jsxs2("span", { className: "flex flex-col leading-5", children: [
+                              /* @__PURE__ */ jsx3("span", { className: "font-medium", children: "Listening" }),
+                              /* @__PURE__ */ jsx3("span", { className: "text-sm tabular-nums text-zinc-500 dark:text-zinc-400", children: fmt(seconds) })
+                            ] })
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx3(
+                        motion3.span,
+                        {
+                          className: "block truncate",
+                          initial: still ? { opacity: 0 } : { opacity: 0, y: "80%", filter: "blur(4px)" },
+                          animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                          exit: still ? { opacity: 0 } : { opacity: 0, y: "-80%", filter: "blur(4px)" },
+                          transition: { duration: 0.4, ease: GLIDE },
+                          children: placeholders[hint % placeholders.length]
+                        },
+                        hint
+                      ) })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs2("div", { className: "mt-2 flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Attach a file",
+                  onClick: attach,
+                  className: cn(
+                    tool,
+                    "group w-9 justify-center text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-white/8"
+                  ),
+                  children: /* @__PURE__ */ jsx3(
+                    AttachFileIcon,
+                    {
+                      className: "size-[18px] transition-transform duration-200 group-active:scale-90",
+                      strokeWidth: 2
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs2("div", { className: "relative", "data-menu": uid, children: [
+                /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": menu,
+                    onClick: () => setMenu((m) => !m),
+                    className: cn(
+                      tool,
+                      "px-3 text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-white/8",
+                      menu && "bg-zinc-100 dark:bg-white/8"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx3("span", { className: "relative inline-grid overflow-hidden", children: /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx3(
+                        motion3.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__ */ jsx3(
+                        motion3.span,
+                        {
+                          animate: { rotate: menu ? 180 : 0 },
+                          transition: POP,
+                          className: "grid",
+                          children: /* @__PURE__ */ jsx3(
+                            ChevronDownIcon,
+                            {
+                              className: "size-4 text-zinc-500",
+                              strokeWidth: 2.25
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx3(AnimatePresence, { children: menu && /* @__PURE__ */ jsx3(
+                  motion3.div,
+                  {
+                    role: "listbox",
+                    "aria-label": "Model",
+                    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: "0% 100%" },
+                    onPointerLeave: () => setHover(null),
+                    className: "absolute bottom-full left-0 z-20 mb-2 w-60 rounded-2xl bg-white p-1 shadow-[0_1px_2px_rgba(0,0,0,0.06),0_16px_40px_-12px_rgba(0,0,0,0.28)] ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/10",
+                    children: models.map((m) => {
+                      const on = m.id === model;
+                      return /* @__PURE__ */ jsxs2(
+                        "button",
+                        {
+                          type: "button",
+                          role: "option",
+                          "aria-selected": on,
+                          onPointerEnter: () => setHover(m.id),
+                          onFocus: () => setHover(m.id),
+                          onClick: () => {
+                            setModel(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 ?? model) === m.id && /* @__PURE__ */ jsx3(
+                              motion3.span,
+                              {
+                                layoutId: `${uid}-hover`,
+                                transition: still ? { duration: 0 } : POP,
+                                className: "absolute inset-0 rounded-xl bg-zinc-100 dark:bg-white/8"
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs2("span", { className: "relative", children: [
+                              /* @__PURE__ */ jsx3("span", { className: "block text-sm font-medium", children: m.label }),
+                              /* @__PURE__ */ jsx3("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400", children: m.hint })
+                            ] }),
+                            on && /* @__PURE__ */ jsx3(
+                              CheckIcon,
+                              {
+                                className: "relative size-4",
+                                strokeWidth: 2.25,
+                                "aria-hidden": true
+                              }
+                            )
+                          ]
+                        },
+                        m.id
+                      );
+                    })
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": web,
+                  "aria-label": "Web search",
+                  onClick: () => setWeb((w) => !w),
+                  className: cn(
+                    tool,
+                    // Icon only on a narrow card, so the send button stays inside.
+                    "w-9 justify-center @[28rem]:w-auto @[28rem]:px-3",
+                    web ? "bg-[#242423] text-white dark:bg-white dark:text-zinc-900" : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-white/8"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx3(EarthIcon, { className: "size-4", strokeWidth: 2 }),
+                    /* @__PURE__ */ jsx3("span", { className: "hidden @[28rem]:inline", children: "Search" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs2("div", { className: "ml-auto flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": listening ? "Stop listening" : "Speak",
+                    "aria-pressed": listening,
+                    onClick: toggleMic,
+                    disabled: working,
+                    className: cn(
+                      tool,
+                      "w-9 justify-center",
+                      listening ? "bg-zinc-100 text-zinc-900 dark:bg-white/10 dark:text-white" : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 disabled:opacity-40 dark:text-zinc-300 dark:hover:bg-white/8"
+                    ),
+                    children: /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", initial: false, children: listening ? /* @__PURE__ */ jsx3(
+                      motion3.span,
+                      {
+                        className: "flex h-4 items-center gap-[2px]",
+                        initial: { opacity: 0, scale: 0.6 },
+                        animate: { opacity: 1, scale: 1 },
+                        exit: { opacity: 0, scale: 0.6 },
+                        children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx3(
+                          motion3.span,
+                          {
+                            className: "w-[3px] rounded-full bg-current",
+                            animate: still ? { height: 8 } : { height: [5, 14, 7, 12, 5] },
+                            transition: {
+                              duration: 0.9,
+                              repeat: Infinity,
+                              delay: i * 0.12,
+                              ease: "easeInOut"
+                            }
+                          },
+                          i
+                        ))
+                      },
+                      "bars"
+                    ) : /* @__PURE__ */ jsx3(
+                      motion3.span,
+                      {
+                        className: "grid",
+                        initial: { opacity: 0, scale: 0.6 },
+                        animate: { opacity: 1, scale: 1 },
+                        exit: { opacity: 0, scale: 0.6 },
+                        children: /* @__PURE__ */ jsx3(MicIcon, { className: "size-[18px]", strokeWidth: 2 })
+                      },
+                      "mic"
+                    ) })
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  motion3.button,
+                  {
+                    type: "button",
+                    "aria-label": working ? "Stop" : "Send",
+                    "aria-disabled": !ready && !working,
+                    onClick: () => void send(),
+                    whileTap: (ready || working) && !still ? { scale: 0.9 } : void 0,
+                    animate: {
+                      backgroundColor: ready || working ? "#242423" : "rgba(36,36,35,0.08)",
+                      color: ready || working ? "#ffffff" : "rgba(36,36,35,0.35)"
+                    },
+                    transition: { duration: 0.25 },
+                    className: cn(
+                      "relative grid size-9 place-items-center overflow-hidden rounded-full outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900",
+                      ready || working ? "cursor-pointer" : "cursor-default"
+                    ),
+                    children: /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", initial: false, children: working ? /* @__PURE__ */ jsx3(
+                      motion3.span,
+                      {
+                        className: "size-3 rounded-[3px] bg-current",
+                        initial: { scale: 0, rotate: -45 },
+                        animate: { scale: 1, rotate: 0 },
+                        exit: { scale: 0 },
+                        transition: POP
+                      },
+                      "stop"
+                    ) : /* @__PURE__ */ jsx3(
+                      motion3.span,
+                      {
+                        className: "grid",
+                        initial: still ? { opacity: 0 } : { y: 14, opacity: 0 },
+                        animate: { y: 0, opacity: 1 },
+                        exit: still ? { opacity: 0 } : {
+                          y: -22,
+                          opacity: 0,
+                          transition: { duration: 0.22, ease: "easeIn" }
+                        },
+                        transition: POP,
+                        children: /* @__PURE__ */ jsx3(ArrowUpIcon, { className: "size-[18px]", strokeWidth: 2.4 })
+                      },
+                      `arrow-${sent}`
+                    ) })
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3("span", { role: "status", "aria-live": "polite", className: "sr-only", children: working ? "Working on it." : listening ? "Listening." : "" })
+    ] });
+  }
+);
+
+export {
+  PromptInput
+};