motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-COKBF5PG.js

@@ -0,0 +1,3291 @@
+"use client";
+import {
+  ClockIcon
+} from "./chunk-LBRMNY72.js";
+import {
+  MicIcon
+} from "./chunk-H2JOCJWM.js";
+import {
+  ChevronLeftIcon
+} from "./chunk-LNBTWX4J.js";
+import {
+  XIcon
+} from "./chunk-7FQ4XU7E.js";
+import {
+  CalendarDaysIcon
+} from "./chunk-JJEWOQYQ.js";
+import {
+  ChevronRightIcon
+} from "./chunk-XH6YNONO.js";
+import {
+  DeleteIcon
+} from "./chunk-JFTD3YAL.js";
+import {
+  SparklesIcon
+} from "./chunk-YGONLKWH.js";
+import {
+  ChevronDownIcon
+} from "./chunk-NIQFSLPC.js";
+import {
+  PlusIcon
+} from "./chunk-HK34LPY6.js";
+import {
+  FILE_TEXT
+} from "./chunk-OINRQUYT.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/message-composer/message-composer.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion as motion7,
+  useAnimationControls,
+  useInView,
+  useReducedMotion as useReducedMotion7
+} from "motion/react";
+import {
+  BellOff,
+  Ellipsis,
+  List,
+  ListOrdered,
+  Play,
+  TextQuote,
+  Video
+} from "lucide-react";
+
+// src/icons/bold.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: {
+    strokeWidth: 2
+  },
+  animate: {
+    strokeWidth: 3.5
+  }
+};
+var BoldIcon = 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 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8",
+                transition: { duration: 0.6 },
+                variants: PATH_VARIANTS
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+BoldIcon.displayName = "BoldIcon";
+
+// src/icons/italic.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 LINE_VARIANTS = {
+  normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    pathOffset: [1, 0]
+  }
+};
+var ItalicIcon = 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.line,
+                {
+                  animate: controls,
+                  transition: { duration: 0.2 },
+                  variants: LINE_VARIANTS,
+                  x1: "19",
+                  x2: "10",
+                  y1: "4",
+                  y2: "4"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                motion2.line,
+                {
+                  animate: controls,
+                  transition: { duration: 0.2 },
+                  variants: LINE_VARIANTS,
+                  x1: "14",
+                  x2: "5",
+                  y1: "20",
+                  y2: "20"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                motion2.line,
+                {
+                  animate: controls,
+                  transition: {
+                    delay: 0.1,
+                    duration: 0.4
+                  },
+                  variants: {
+                    normal: { pathLength: 1, pathOffset: 0 },
+                    animate: {
+                      pathLength: [0, 1],
+                      pathOffset: [1, 0]
+                    }
+                  },
+                  x1: "15",
+                  x2: "9",
+                  y1: "4",
+                  y2: "20"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ItalicIcon.displayName = "ItalicIcon";
+
+// src/icons/send.tsx
+import { motion as motion3, useAnimation as useAnimation3, useReducedMotion as useReducedMotion3 } from "motion/react";
+import { forwardRef as forwardRef3, useCallback as useCallback3, useEffect as useEffect3, useImperativeHandle as useImperativeHandle3, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SendIcon = forwardRef3(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation3();
+    const isControlledRef = useRef3(false);
+    useImperativeHandle3(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback3(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback3(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef3(null);
+    const reduced = useReducedMotion3();
+    const [hosted, setHosted] = useState3(false);
+    useEffect3(() => {
+      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__ */ jsx3(
+      "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__ */ jsxs2(
+          "svg",
+          {
+            className: "overflow-visible",
+            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__ */ jsxs2(
+                motion3.g,
+                {
+                  animate: controls,
+                  transition: { duration: 0.5 },
+                  variants: {
+                    normal: { x: 0, y: 0, scale: 1 },
+                    animate: {
+                      x: 3,
+                      y: -3,
+                      scale: 0.8
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3("path", { d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" }),
+                    /* @__PURE__ */ jsx3("path", { d: "m21.854 2.147-10.94 10.939" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                motion3.path,
+                {
+                  animate: controls,
+                  d: "M -3 28 C -0.5 26.8 1.6 24.6 3.3 22 C 4.8 19.7 5.2 17.6 4.2 16.1 C 3.2 14.7 1.4 14.5 0.3 15.8 C -0.9 17.2 -0.6 19.4 1.2 20.4 C 3.4 21.5 6.4 19.4 9 15.8",
+                  fill: "none",
+                  initial: { opacity: 0, pathLength: 0 },
+                  stroke: "currentColor",
+                  strokeDasharray: "2 2",
+                  strokeWidth: "1",
+                  transition: { duration: 0.55, delay: 0.1 },
+                  variants: {
+                    normal: {
+                      pathLength: 0,
+                      opacity: 0,
+                      translateX: -3,
+                      translateY: 3,
+                      transition: { duration: 0.3 }
+                    },
+                    animate: {
+                      pathLength: 1,
+                      opacity: 1,
+                      translateX: 0,
+                      translateY: 0
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SendIcon.displayName = "SendIcon";
+
+// src/icons/smile.tsx
+import { motion as motion4, useAnimation as useAnimation4, useReducedMotion as useReducedMotion4 } from "motion/react";
+import { forwardRef as forwardRef4, useCallback as useCallback4, useEffect as useEffect4, useImperativeHandle as useImperativeHandle4, useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var SmileIcon = forwardRef4(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation4();
+    const isControlledRef = useRef4(false);
+    useImperativeHandle4(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback4(
+      (e) => {
+        if (!isControlledRef.current) controls.start("animate");
+        onMouseEnter?.(e);
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback4(
+      (e) => {
+        if (!isControlledRef.current) controls.start("normal");
+        onMouseLeave?.(e);
+      },
+      [controls, onMouseLeave]
+    );
+    const faceVariants = {
+      normal: {
+        scale: 1,
+        rotate: 0,
+        strokeWidth: 2,
+        transition: { duration: 0.3, ease: "easeOut" }
+      },
+      animate: {
+        scale: [1, 1.15, 1.05, 1.1],
+        rotate: [0, -3, 3, 0],
+        strokeWidth: [2, 2.5, 2.5, 2.5],
+        transition: {
+          duration: 0.8,
+          times: [0, 0.3, 0.6, 1],
+          ease: "easeInOut"
+        }
+      }
+    };
+    const mouthVariants = {
+      normal: {
+        d: "M8 14s1.5 2 4 2 4-2 4-2",
+        pathLength: 1,
+        pathOffset: 0,
+        strokeWidth: 2,
+        transition: { duration: 0.3, ease: "easeOut" }
+      },
+      animate: {
+        d: "M7 13.5s2.5 3.5 5 3.5 5-3.5 5-3.5",
+        pathLength: [0.3, 1, 1],
+        pathOffset: [0, 0, 0],
+        strokeWidth: 2.5,
+        transition: {
+          d: { duration: 0.4, ease: "easeOut" },
+          pathLength: {
+            duration: 0.5,
+            times: [0, 0.5, 1],
+            ease: "easeInOut"
+          },
+          delay: 0.1
+        }
+      }
+    };
+    const eyeVariants = {
+      normal: {
+        scale: 1,
+        opacity: 1,
+        transition: { duration: 0.3, ease: "easeOut" }
+      },
+      animate: {
+        scale: [1, 1.5, 0.8, 1.2],
+        opacity: [1, 1, 1, 1],
+        transition: {
+          duration: 0.5,
+          times: [0, 0.3, 0.6, 1],
+          ease: "easeInOut"
+        }
+      }
+    };
+    const wrap = useRef4(null);
+    const reduced = useReducedMotion4();
+    const [hosted, setHosted] = useState4(false);
+    useEffect4(() => {
+      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__ */ jsx4(
+      "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__ */ jsxs3(
+          motion4.svg,
+          {
+            animate: controls,
+            fill: "none",
+            height: size,
+            initial: "normal",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            variants: faceVariants,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx4(motion4.circle, { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx4(
+                motion4.path,
+                {
+                  animate: controls,
+                  d: "M8 14s1.5 2 4 2 4-2 4-2",
+                  initial: "normal",
+                  variants: mouthVariants
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                motion4.line,
+                {
+                  animate: controls,
+                  initial: "normal",
+                  variants: eyeVariants,
+                  x1: "9",
+                  x2: "9.01",
+                  y1: "9",
+                  y2: "9"
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                motion4.line,
+                {
+                  animate: controls,
+                  initial: "normal",
+                  variants: eyeVariants,
+                  x1: "15",
+                  x2: "15.01",
+                  y1: "9",
+                  y2: "9"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SmileIcon.displayName = "SmileIcon";
+
+// src/icons/terminal.tsx
+import { motion as motion5, useAnimation as useAnimation5, useReducedMotion as useReducedMotion5 } from "motion/react";
+import { forwardRef as forwardRef5, useCallback as useCallback5, useEffect as useEffect5, useImperativeHandle as useImperativeHandle5, useRef as useRef5, useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var LINE_VARIANTS2 = {
+  normal: { opacity: 1 },
+  animate: {
+    opacity: [1, 0, 1],
+    transition: {
+      duration: 0.8,
+      repeat: Number.POSITIVE_INFINITY,
+      ease: "linear"
+    }
+  }
+};
+var TerminalIcon = forwardRef5(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation5();
+    const isControlledRef = useRef5(false);
+    useImperativeHandle5(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback5(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback5(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef5(null);
+    const reduced = useReducedMotion5();
+    const [hosted, setHosted] = useState5(false);
+    useEffect5(() => {
+      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__ */ jsx5(
+      "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__ */ jsxs4(
+          "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__ */ jsx5("polyline", { points: "4 17 10 11 4 5" }),
+              /* @__PURE__ */ jsx5(
+                motion5.line,
+                {
+                  animate: controls,
+                  initial: "normal",
+                  variants: LINE_VARIANTS2,
+                  x1: "12",
+                  x2: "20",
+                  y1: "19",
+                  y2: "19"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+TerminalIcon.displayName = "TerminalIcon";
+
+// src/icons/underline.tsx
+import { motion as motion6, useAnimation as useAnimation6, useReducedMotion as useReducedMotion6 } from "motion/react";
+import { forwardRef as forwardRef6, useCallback as useCallback6, useEffect as useEffect6, useImperativeHandle as useImperativeHandle6, useRef as useRef6, useState as useState6 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var VARIANTS = {
+  normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    pathOffset: [1, 0]
+  }
+};
+var UnderlineIcon = forwardRef6(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation6();
+    const isControlledRef = useRef6(false);
+    useImperativeHandle6(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback6(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback6(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef6(null);
+    const reduced = useReducedMotion6();
+    const [hosted, setHosted] = useState6(false);
+    useEffect6(() => {
+      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__ */ jsx6(
+      "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__ */ jsxs5(
+          "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__ */ jsx6(
+                motion6.path,
+                {
+                  animate: controls,
+                  d: "M6 4v6a6 6 0 0 0 12 0V4",
+                  transition: { duration: 0.3 },
+                  variants: VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                motion6.line,
+                {
+                  animate: controls,
+                  transition: {
+                    delay: 0.2,
+                    duration: 0.4
+                  },
+                  variants: VARIANTS,
+                  x1: "4",
+                  x2: "20",
+                  y1: "20",
+                  y2: "20"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+UnderlineIcon.displayName = "UnderlineIcon";
+
+// src/components/message-composer/message-composer.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var POP = { type: "spring", stiffness: 520, damping: 30 };
+var SOFT = { type: "spring", stiffness: 380, damping: 34 };
+var STYLES = [
+  {
+    id: "title",
+    tag: "h2",
+    label: "Title",
+    preview: "text-[20px] font-semibold"
+  },
+  {
+    id: "heading",
+    tag: "h3",
+    label: "Heading",
+    preview: "text-[18px] font-semibold"
+  },
+  { id: "body", tag: "p", label: "Body", preview: "text-[16px]" },
+  {
+    id: "small",
+    tag: "h6",
+    label: "Small",
+    preview: "text-[14px] text-[#242423]/60"
+  }
+];
+var EMOJI = [
+  "\u{1F600}",
+  "\u{1F602}",
+  "\u{1F979}",
+  "\u{1F60D}",
+  "\u{1F60E}",
+  "\u{1F914}",
+  "\u{1F64C}",
+  "\u{1F44F}",
+  "\u{1F389}",
+  "\u{1F525}",
+  "\u2728",
+  "\u{1F4A1}",
+  "\u2705",
+  "\u{1F440}",
+  "\u2764\uFE0F",
+  "\u{1F680}",
+  "\u{1F304}",
+  "\u2615"
+];
+var face = (photo) => `https://images.unsplash.com/${photo}?w=96&h=96&fit=crop&crop=faces`;
+var DEFAULT_PEOPLE = [
+  {
+    id: "maya",
+    name: "Maya Chen",
+    title: "Design lead",
+    avatar: face("photo-1438761681033-6461ffad8d80")
+  },
+  {
+    id: "leo",
+    name: "Leo Park",
+    title: "Engineer",
+    avatar: face("photo-1500648767791-00dcc994a43e")
+  },
+  {
+    id: "ava",
+    name: "Ava Moreno",
+    title: "Marketing",
+    avatar: face("photo-1494790108377-be9c29b29330")
+  },
+  { id: "noah", name: "Noah Reid", title: "Product" },
+  { id: "iris", name: "Iris Okafor", title: "Research" }
+];
+var DRAFT = "Hi team, the launch shots are ready for review.\nPlease pick your two favourites by Friday so we can lock the post.";
+var SAMPLE_CLIP = "https://images.unsplash.com/photo-1504893524553-b855bce32c67?w=240&h=240&fit=crop&q=80";
+var CHIP = "mx-px inline-block cursor-default rounded-md bg-[#242423]/[0.07] px-1 font-medium text-[#242423] transition-colors duration-200 hover:bg-[#242423]/[0.12]";
+var initials = (name) => name.split(" ").map((w) => w[0]).join("").slice(0, 2);
+var fmt = (s) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+var wait = (ms) => new Promise((r) => setTimeout(r, ms));
+var uid = 0;
+var nextId = () => `att-${Date.now().toString(36)}-${uid++}`;
+var BLOCKS = /* @__PURE__ */ new Set([
+  "P",
+  "DIV",
+  "H2",
+  "H3",
+  "H6",
+  "LI",
+  "BLOCKQUOTE",
+  "PRE",
+  "UL",
+  "OL"
+]);
+function mentionChip(p) {
+  const el = document.createElement("span");
+  el.dataset.mention = p.id;
+  el.contentEditable = "false";
+  el.className = CHIP;
+  el.textContent = `@${p.name}`;
+  return el;
+}
+function fill(editor, text, people) {
+  editor.innerHTML = "";
+  if (!text) return;
+  for (const line of text.split("\n")) {
+    const p = document.createElement("p");
+    let last = 0;
+    for (const m of line.matchAll(/@([\w-]+)/g)) {
+      const person = people.find((x) => x.id === m[1]);
+      if (!person) continue;
+      p.append(line.slice(last, m.index), mentionChip(person));
+      last = m.index + m[0].length;
+    }
+    p.append(line.slice(last));
+    if (!p.textContent) p.append(document.createElement("br"));
+    editor.append(p);
+  }
+}
+function readText(editor) {
+  let out = "";
+  const walk = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      out += node.textContent;
+      return;
+    }
+    const el = node;
+    if (el.dataset?.mention) {
+      out += `@${el.dataset.mention}`;
+      return;
+    }
+    if (el.tagName === "BR") {
+      out += "\n";
+      return;
+    }
+    el.childNodes.forEach(walk);
+    if (BLOCKS.has(el.tagName) && !out.endsWith("\n")) out += "\n";
+  };
+  editor.childNodes.forEach(walk);
+  return out.replace(/ /g, " ").replace(/\n{3,}/g, "\n\n").trim();
+}
+function tidy(text) {
+  if (!text.trim()) return DRAFT;
+  const next = text.split("\n").map((line) => {
+    let l = line.replace(/[ \t]{2,}/g, " ").trim();
+    if (!l) return l;
+    l = l.replace(
+      /(^|[.!?]\s+)([a-z])/g,
+      (_, a, b) => a + b.toUpperCase()
+    );
+    l = l.replace(/\bi\b/g, "I");
+    return /[.!?:,]$/.test(l) || /\p{Extended_Pictographic}$/u.test(l) ? l : `${l}.`;
+  }).join("\n");
+  if (next === text.trim() && !/thank/i.test(next))
+    return `${next}
+Thanks so much!`;
+  return next;
+}
+var LIST = /* @__PURE__ */ new Set(["UL", "OL"]);
+function lineBlocks(ed) {
+  const out = [];
+  for (const c of ed.children)
+    out.push(
+      ...LIST.has(c.tagName) ? [...c.children] : [c]
+    );
+  return out;
+}
+function wrapLoose(ed) {
+  let p = null;
+  for (const n of [...ed.childNodes]) {
+    if (n.nodeType === Node.ELEMENT_NODE && BLOCKS.has(n.tagName)) {
+      p = null;
+      continue;
+    }
+    if (!p) {
+      p = document.createElement("p");
+      n.before(p);
+    }
+    p.append(n);
+  }
+}
+function moveInto(from, to) {
+  while (from.firstChild) to.appendChild(from.firstChild);
+}
+function liftItem(li, tag, moved) {
+  const list = li.parentElement;
+  const el = document.createElement(tag);
+  moveInto(li, el);
+  moved.set(li, el);
+  const rest = list.cloneNode(false);
+  while (li.nextSibling) rest.appendChild(li.nextSibling);
+  li.remove();
+  list.after(el);
+  if (rest.childNodes.length) el.after(rest);
+  if (!list.children.length) list.remove();
+  return el;
+}
+function onLines(ed, change) {
+  wrapLoose(ed);
+  const sel = window.getSelection();
+  if (!sel?.rangeCount) return;
+  const range = sel.getRangeAt(0);
+  const all = lineBlocks(ed);
+  let lines = all.filter((l) => range.intersectsNode(l));
+  if (!lines.length && all.length) lines = [all[all.length - 1]];
+  if (!lines.length) return;
+  const at2 = [
+    sel.anchorNode,
+    sel.anchorOffset,
+    sel.focusNode,
+    sel.focusOffset
+  ];
+  const moved = /* @__PURE__ */ new Map();
+  change(lines, moved);
+  const find = (n) => {
+    while (moved.has(n)) n = moved.get(n);
+    return n;
+  };
+  const a = find(at2[0]);
+  const f = find(at2[2]);
+  if (ed.contains(a) && ed.contains(f))
+    sel.setBaseAndExtent(a, at2[1], f, at2[3]);
+}
+function setBlock(ed, tag) {
+  onLines(ed, (lines, moved) => {
+    for (const line of lines) {
+      if (line.tagName === "LI") liftItem(line, tag, moved);
+      else if (line.tagName !== tag.toUpperCase()) {
+        const el = document.createElement(tag);
+        moveInto(line, el);
+        line.replaceWith(el);
+        moved.set(line, el);
+      }
+    }
+  });
+}
+function toggleList(ed, tag) {
+  onLines(ed, (lines, moved) => {
+    const inside = lines.every(
+      (l) => l.tagName === "LI" && l.parentElement.tagName === tag.toUpperCase()
+    );
+    const flat = lines.map(
+      (l) => l.tagName === "LI" ? liftItem(l, "p", moved) : l
+    );
+    if (inside) return;
+    const list = document.createElement(tag);
+    flat[0].before(list);
+    for (const l of flat) {
+      const li = document.createElement("li");
+      moveInto(l, li);
+      moved.set(l, li);
+      list.append(li);
+      l.remove();
+    }
+    const prev = list.previousElementSibling;
+    if (prev?.tagName === list.tagName) {
+      moveInto(list, prev);
+      list.remove();
+      const next = prev.nextElementSibling;
+      if (next?.tagName === prev.tagName) {
+        moveInto(next, prev);
+        next.remove();
+      }
+    } else if (list.nextElementSibling?.tagName === list.tagName) {
+      const next = list.nextElementSibling;
+      moveInto(next, list);
+      next.remove();
+    }
+  });
+}
+var NO_FORMAT = {
+  bold: false,
+  italic: false,
+  underline: false,
+  ul: false,
+  ol: false,
+  quote: false,
+  code: false,
+  style: "body"
+};
+function useDismiss(open, close, scope) {
+  React.useEffect(() => {
+    if (!open) return;
+    const away = (e) => {
+      if (!e.target.closest?.(`[data-pop="${scope}"]`)) close();
+    };
+    const esc = (e) => e.key === "Escape" && close();
+    document.addEventListener("pointerdown", away);
+    document.addEventListener("keydown", esc);
+    return () => {
+      document.removeEventListener("pointerdown", away);
+      document.removeEventListener("keydown", esc);
+    };
+  }, [open, close, scope]);
+}
+function arrowKeys(e) {
+  if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+  e.preventDefault();
+  const rows = [...e.currentTarget.querySelectorAll("[data-row]")];
+  const at2 = rows.indexOf(document.activeElement);
+  const next = e.key === "ArrowDown" ? at2 + 1 : at2 - 1;
+  rows[(next + rows.length) % rows.length]?.focus();
+}
+function Pour({
+  from,
+  still,
+  className,
+  children,
+  ...rest
+}) {
+  const shut = from === "top" ? "inset(-40% -40% 100% -40% round 18px)" : "inset(100% -40% -40% -40% round 18px)";
+  return /* @__PURE__ */ jsx7(
+    motion7.div,
+    {
+      ...rest,
+      initial: still ? { opacity: 0 } : { opacity: 0, clipPath: shut, y: from === "top" ? -4 : 4 },
+      animate: {
+        opacity: 1,
+        clipPath: "inset(-40% -40% -40% -40% round 18px)",
+        y: 0,
+        transition: still ? { duration: 0 } : { duration: 0.38, ease: GLIDE }
+      },
+      exit: still ? { opacity: 0 } : {
+        opacity: 0,
+        clipPath: shut,
+        transition: { duration: 0.22, ease: [0.4, 0, 1, 1] }
+      },
+      className: cn(
+        "absolute z-30 rounded-[18px] bg-white p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.06),0_18px_44px_-14px_rgba(0,0,0,0.3)] ring-1 ring-black/5",
+        className
+      ),
+      children
+    }
+  );
+}
+function Row({
+  i,
+  still,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx7(
+    motion7.button,
+    {
+      type: "button",
+      "data-row": "",
+      ...rest,
+      initial: still ? false : { opacity: 0, y: -6, filter: "blur(3px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      transition: {
+        duration: 0.3,
+        ease: GLIDE,
+        delay: still ? 0 : 0.05 + i * 0.035
+      },
+      className: cn(
+        "group relative flex w-full cursor-pointer items-center gap-3 rounded-xl px-3 text-left text-[#242423] outline-none disabled:cursor-default disabled:opacity-40",
+        className
+      ),
+      children
+    }
+  );
+}
+var DAY_MS = 864e5;
+var HOURS = [8, 9, 10, 12, 14, 16, 18, 20];
+var WEEK = ["S", "M", "T", "W", "T", "F", "S"];
+var at = (base, days, hour, minute = 0) => {
+  const d = new Date(base);
+  d.setDate(d.getDate() + days);
+  d.setHours(hour, minute, 0, 0);
+  return d;
+};
+var hourText = (h) => `${h % 12 || 12} ${h < 12 ? "AM" : "PM"}`;
+var timeText = (d) => d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+function whenText(d, now = /* @__PURE__ */ new Date()) {
+  const days = Math.round(
+    (at(d, 0, 0).getTime() - at(now, 0, 0).getTime()) / DAY_MS
+  );
+  const day = days === 0 ? "Today" : days === 1 ? "Tomorrow" : days < 7 ? d.toLocaleDateString("en-US", { weekday: "long" }) : d.toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  });
+  return `${day}, ${timeText(d)}`;
+}
+function quickTimes(now) {
+  const out = [];
+  const soon = new Date(
+    Math.ceil((now.getTime() + 36e5) / 3e5) * 3e5
+  );
+  out.push({ id: "hour", label: "In an hour", when: soon });
+  if (now.getHours() < 17)
+    out.push({ id: "evening", label: "This evening", when: at(now, 0, 18) });
+  out.push({ id: "tomorrow", label: "Tomorrow morning", when: at(now, 1, 9) });
+  const toMonday = (8 - now.getDay()) % 7 || 7;
+  if (toMonday > 1)
+    out.push({
+      id: "monday",
+      label: "Monday morning",
+      when: at(now, toMonday, 9)
+    });
+  return out;
+}
+var zoneText = () => new Intl.DateTimeFormat("en-US", { timeZoneName: "short" }).formatToParts(/* @__PURE__ */ new Date()).find((p) => p.type === "timeZoneName")?.value ?? "";
+var roundIcon = "grid size-8 shrink-0 cursor-pointer place-items-center rounded-full text-[#242423]/60 outline-none transition-colors hover:bg-[#242423]/[0.05] hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-[#242423]/30 disabled:cursor-default disabled:opacity-30 disabled:hover:bg-transparent";
+function SendMenu({
+  uid: uid2,
+  still,
+  ready,
+  sendAt,
+  startView,
+  onSend,
+  onSchedule
+}) {
+  const now = React.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const [view, setView] = React.useState(startView);
+  const [dir, setDir] = React.useState(1);
+  const [hover, setHover] = React.useState(null);
+  const go = (next, d) => {
+    setDir(d);
+    setHover(null);
+    setView(next);
+  };
+  const start = sendAt ?? at(now, 1, 9);
+  const [month, setMonth] = React.useState(
+    () => new Date(start.getFullYear(), start.getMonth(), 1)
+  );
+  const [day, setDay] = React.useState(() => at(start, 0, 0));
+  const [hour, setHour] = React.useState(
+    () => HOURS.includes(start.getHours()) ? start.getHours() : 9
+  );
+  const times = React.useMemo(() => quickTimes(now), [now]);
+  const zone = React.useMemo(zoneText, []);
+  const today = at(now, 0, 0);
+  const chosen = at(day, 0, hour);
+  const slotGone = (h) => at(day, 0, h) <= now;
+  React.useEffect(() => {
+    if (!slotGone(hour)) return;
+    const open = HOURS.find((h) => !slotGone(h));
+    if (open !== void 0) setHour(open);
+  }, [day]);
+  const inner = React.useRef(null);
+  const [height, setHeight] = React.useState("auto");
+  React.useLayoutEffect(() => {
+    const el = inner.current;
+    if (!el) return;
+    setHeight(el.offsetHeight);
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setHeight(el.offsetHeight));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const slide = {
+    enter: (d) => still ? { opacity: 0 } : { opacity: 0, x: d * 48, filter: "blur(4px)" },
+    center: { opacity: 1, x: 0, filter: "blur(0px)" },
+    exit: (d) => still ? { opacity: 0 } : { opacity: 0, x: d * -48, filter: "blur(4px)" }
+  };
+  const first = month.getDay();
+  const count = new Date(
+    month.getFullYear(),
+    month.getMonth() + 1,
+    0
+  ).getDate();
+  const cells = [
+    ...Array.from({ length: first }, () => null),
+    ...Array.from(
+      { length: count },
+      (_, i) => new Date(month.getFullYear(), month.getMonth(), i + 1)
+    )
+  ];
+  const thisMonth = month.getFullYear() === now.getFullYear() && month.getMonth() === now.getMonth();
+  const header = (title, back) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 px-1 pb-1", children: [
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Back",
+        onClick: () => go(back, -1),
+        className: roundIcon,
+        children: /* @__PURE__ */ jsx7(ChevronLeftIcon, { className: "size-4", strokeWidth: 2.25 })
+      }
+    ),
+    /* @__PURE__ */ jsx7("span", { className: "text-[14px] font-medium", children: title })
+  ] });
+  return /* @__PURE__ */ jsx7(
+    Pour,
+    {
+      from: "bottom",
+      still,
+      role: "dialog",
+      "aria-label": "Send options",
+      onKeyDown: arrowKeys,
+      onPointerLeave: () => setHover(null),
+      className: "bottom-full right-0 mb-2 w-[296px] overflow-hidden",
+      children: /* @__PURE__ */ jsx7(
+        motion7.div,
+        {
+          animate: { height },
+          transition: still ? { duration: 0 } : SOFT,
+          className: "relative",
+          children: /* @__PURE__ */ jsx7("div", { ref: inner, children: /* @__PURE__ */ jsx7(AnimatePresence, { mode: "popLayout", initial: false, custom: dir, children: /* @__PURE__ */ jsxs6(
+            motion7.div,
+            {
+              custom: dir,
+              variants: slide,
+              initial: "enter",
+              animate: "center",
+              exit: "exit",
+              transition: { duration: 0.32, ease: GLIDE },
+              children: [
+                view === "main" && /* @__PURE__ */ jsx7("div", { role: "menu", "aria-label": "Send options", children: [
+                  {
+                    id: "now",
+                    label: "Send now",
+                    hint: "Everyone gets it right away",
+                    icon: /* @__PURE__ */ jsx7(SendIcon, { className: "size-4", strokeWidth: 2 })
+                  },
+                  {
+                    id: "schedule",
+                    label: "Schedule",
+                    hint: sendAt ? whenText(sendAt, now) : "Pick a time to send",
+                    icon: /* @__PURE__ */ jsx7(ClockIcon, { className: "size-4", strokeWidth: 2 })
+                  },
+                  {
+                    id: "silent",
+                    label: "Send quietly",
+                    hint: "No notification sound",
+                    icon: /* @__PURE__ */ jsx7(Nudge, { children: /* @__PURE__ */ jsx7(BellOff, { className: "size-4", strokeWidth: 2 }) })
+                  }
+                ].map((o, i, all) => /* @__PURE__ */ jsxs6(
+                  Row,
+                  {
+                    i: all.length - 1 - i,
+                    still,
+                    role: "menuitem",
+                    disabled: o.id !== "schedule" && !ready,
+                    onPointerEnter: () => setHover(o.id),
+                    onFocus: () => setHover(o.id),
+                    onClick: () => o.id === "schedule" ? go("schedule", 1) : onSend(o.id),
+                    className: "py-2",
+                    children: [
+                      hover === o.id && /* @__PURE__ */ jsx7(Glide, { id: `${uid2}-send-glide`, still }),
+                      /* @__PURE__ */ jsx7("span", { className: "relative grid size-8 shrink-0 place-items-center rounded-full bg-[#242423]/[0.05] text-[#242423]/80", children: o.icon }),
+                      /* @__PURE__ */ jsxs6("span", { className: "relative min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx7("span", { className: "block text-[14px] font-medium leading-5", children: o.label }),
+                        /* @__PURE__ */ jsx7("span", { className: "block truncate text-[12px] leading-4 text-[#242423]/50", children: o.hint })
+                      ] }),
+                      o.id === "schedule" && /* @__PURE__ */ jsx7(
+                        ChevronRightIcon,
+                        {
+                          className: "relative size-4 text-[#242423]/40",
+                          strokeWidth: 2.25
+                        }
+                      )
+                    ]
+                  },
+                  o.id
+                )) }),
+                view === "schedule" && /* @__PURE__ */ jsxs6("div", { children: [
+                  header("Schedule send", "main"),
+                  /* @__PURE__ */ jsxs6("div", { role: "menu", "aria-label": "Quick times", children: [
+                    times.map((q, i) => {
+                      const on = sendAt?.getTime() === q.when.getTime();
+                      return /* @__PURE__ */ jsxs6(
+                        Row,
+                        {
+                          i,
+                          still,
+                          role: "menuitemradio",
+                          "aria-checked": on,
+                          onPointerEnter: () => setHover(q.id),
+                          onFocus: () => setHover(q.id),
+                          onClick: () => onSchedule(q.when),
+                          className: "h-11 justify-between",
+                          children: [
+                            hover === q.id && /* @__PURE__ */ jsx7(Glide, { id: `${uid2}-send-glide`, still }),
+                            /* @__PURE__ */ jsx7("span", { className: "relative text-[14px] font-medium", children: q.label }),
+                            /* @__PURE__ */ jsxs6("span", { className: "relative flex items-center gap-2 text-[12px] text-[#242423]/50", children: [
+                              whenText(q.when, now),
+                              on && /* @__PURE__ */ jsx7(
+                                CheckIcon,
+                                {
+                                  className: "size-4 text-[#242423]",
+                                  strokeWidth: 2.5,
+                                  active: true
+                                }
+                              )
+                            ] })
+                          ]
+                        },
+                        q.id
+                      );
+                    }),
+                    /* @__PURE__ */ jsx7(
+                      "div",
+                      {
+                        "aria-hidden": true,
+                        className: "mx-3 my-1 h-px bg-[#242423]/[0.07]"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs6(
+                      Row,
+                      {
+                        i: times.length,
+                        still,
+                        role: "menuitem",
+                        onPointerEnter: () => setHover("pick"),
+                        onFocus: () => setHover("pick"),
+                        onClick: () => go("pick", 1),
+                        className: "h-11",
+                        children: [
+                          hover === "pick" && /* @__PURE__ */ jsx7(Glide, { id: `${uid2}-send-glide`, still }),
+                          /* @__PURE__ */ jsx7(
+                            CalendarDaysIcon,
+                            {
+                              className: "relative size-4 text-[#242423]/70",
+                              strokeWidth: 2
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7("span", { className: "relative flex-1 text-[14px] font-medium", children: "Pick a date and time" }),
+                          /* @__PURE__ */ jsx7(
+                            ChevronRightIcon,
+                            {
+                              className: "relative size-4 text-[#242423]/40",
+                              strokeWidth: 2.25
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs6("p", { className: "px-3 pb-1 pt-2 text-[12px] text-[#242423]/45", children: [
+                    "Times are in your time zone",
+                    zone ? ` (${zone})` : ""
+                  ] })
+                ] }),
+                view === "pick" && /* @__PURE__ */ jsxs6("div", { className: "px-1 pb-1", children: [
+                  /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 pb-1", children: [
+                    /* @__PURE__ */ jsx7(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Back",
+                        onClick: () => go("schedule", -1),
+                        className: roundIcon,
+                        children: /* @__PURE__ */ jsx7(ChevronLeftIcon, { className: "size-4", strokeWidth: 2.25 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7("span", { className: "relative flex-1 overflow-hidden text-[14px] font-medium", children: /* @__PURE__ */ jsx7(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx7(
+                      motion7.span,
+                      {
+                        className: "block",
+                        initial: still ? { opacity: 0 } : { opacity: 0, y: 10, filter: "blur(3px)" },
+                        animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                        exit: still ? { opacity: 0 } : { opacity: 0, y: -10, filter: "blur(3px)" },
+                        transition: { duration: 0.28, ease: GLIDE },
+                        children: month.toLocaleDateString("en-US", {
+                          month: "long",
+                          year: "numeric"
+                        })
+                      },
+                      month.getTime()
+                    ) }) }),
+                    /* @__PURE__ */ jsx7(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Previous month",
+                        disabled: thisMonth,
+                        onClick: () => setMonth(
+                          new Date(
+                            month.getFullYear(),
+                            month.getMonth() - 1,
+                            1
+                          )
+                        ),
+                        className: roundIcon,
+                        children: /* @__PURE__ */ jsx7(ChevronLeftIcon, { className: "size-4", strokeWidth: 2.25 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Next month",
+                        onClick: () => setMonth(
+                          new Date(
+                            month.getFullYear(),
+                            month.getMonth() + 1,
+                            1
+                          )
+                        ),
+                        className: roundIcon,
+                        children: /* @__PURE__ */ jsx7(ChevronRightIcon, { className: "size-4", strokeWidth: 2.25 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-7 px-1 text-center text-[12px] font-medium leading-6 text-[#242423]/40", children: WEEK.map((w, i) => /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: w }, i)) }),
+                  /* @__PURE__ */ jsx7(
+                    "div",
+                    {
+                      role: "grid",
+                      "aria-label": "Day",
+                      className: "grid grid-cols-7 gap-y-0.5 px-1",
+                      children: cells.map(
+                        (d, i) => d ? /* @__PURE__ */ jsxs6(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": d.toLocaleDateString("en-US", {
+                              weekday: "long",
+                              month: "long",
+                              day: "numeric"
+                            }),
+                            "aria-pressed": d.getTime() === day.getTime(),
+                            disabled: d < today,
+                            onClick: () => setDay(d),
+                            className: cn(
+                              "relative mx-auto grid size-9 cursor-pointer place-items-center rounded-full text-[14px] tabular-nums outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[#242423]/30 disabled:cursor-default disabled:text-[#242423]/25",
+                              d.getTime() === day.getTime() ? "text-white" : "hover:bg-[#242423]/[0.05]"
+                            ),
+                            children: [
+                              d.getTime() === day.getTime() && /* @__PURE__ */ jsx7(
+                                motion7.span,
+                                {
+                                  layoutId: `${uid2}-day`,
+                                  transition: still ? { duration: 0 } : POP,
+                                  className: "absolute inset-0 rounded-full bg-[#242423]"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx7("span", { className: "relative", children: d.getDate() }),
+                              d.getTime() === today.getTime() && /* @__PURE__ */ jsx7(
+                                "span",
+                                {
+                                  "aria-hidden": true,
+                                  className: cn(
+                                    "absolute bottom-1 left-1/2 size-1 -translate-x-1/2 rounded-full",
+                                    d.getTime() === day.getTime() ? "bg-white" : "bg-[#242423]/50"
+                                  )
+                                }
+                              )
+                            ]
+                          },
+                          i
+                        ) : /* @__PURE__ */ jsx7("span", {}, i)
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "div",
+                    {
+                      "aria-hidden": true,
+                      className: "mx-2 my-2 h-px bg-[#242423]/[0.07]"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "div",
+                    {
+                      role: "radiogroup",
+                      "aria-label": "Time",
+                      className: "grid grid-cols-4 gap-1 px-1",
+                      children: HOURS.map((h) => {
+                        const on = h === hour;
+                        return /* @__PURE__ */ jsxs6(
+                          "button",
+                          {
+                            type: "button",
+                            role: "radio",
+                            "aria-checked": on,
+                            disabled: slotGone(h),
+                            onClick: () => setHour(h),
+                            className: cn(
+                              "relative h-8 cursor-pointer rounded-full text-[12px] font-medium tabular-nums outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[#242423]/30 disabled:cursor-default disabled:text-[#242423]/25",
+                              on ? "text-white" : "bg-[#242423]/[0.04] hover:bg-[#242423]/[0.08]"
+                            ),
+                            children: [
+                              on && /* @__PURE__ */ jsx7(
+                                motion7.span,
+                                {
+                                  layoutId: `${uid2}-hour`,
+                                  transition: still ? { duration: 0 } : POP,
+                                  className: "absolute inset-0 rounded-full bg-[#242423]"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx7("span", { className: "relative", children: hourText(h) })
+                            ]
+                          },
+                          h
+                        );
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs6("p", { className: "px-2 pb-2 pt-3 text-[12px] text-[#242423]/50", children: [
+                    "Sends ",
+                    whenText(chosen, now),
+                    zone ? ` ${zone}` : ""
+                  ] }),
+                  /* @__PURE__ */ jsxs6(
+                    motion7.button,
+                    {
+                      type: "button",
+                      disabled: chosen <= now,
+                      onClick: () => onSchedule(chosen),
+                      whileTap: still ? void 0 : { scale: 0.97 },
+                      transition: POP,
+                      className: "group flex h-9 w-full cursor-pointer items-center justify-center gap-2 rounded-full bg-[#242423] text-[14px] font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-[#242423]/30 focus-visible:ring-offset-2 disabled:cursor-default disabled:opacity-40",
+                      children: [
+                        /* @__PURE__ */ jsx7(ClockIcon, { className: "size-4", strokeWidth: 2.25 }),
+                        "Set time"
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            },
+            view
+          ) }) })
+        }
+      )
+    }
+  );
+}
+function Glide({ id, still }) {
+  return /* @__PURE__ */ jsx7(
+    motion7.span,
+    {
+      layoutId: id,
+      transition: still ? { duration: 0 } : POP,
+      className: "absolute inset-0 rounded-xl bg-[#242423]/[0.05]"
+    }
+  );
+}
+var Tool = React.forwardRef(function Tool2({
+  label,
+  on = false,
+  toggle = false,
+  danger = false,
+  keepFocus = true,
+  still,
+  className,
+  children,
+  onMouseDown,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs6(
+    motion7.button,
+    {
+      ref,
+      type: "button",
+      "aria-label": label,
+      title: label,
+      "aria-pressed": toggle ? on : void 0,
+      onMouseDown: (e) => {
+        if (keepFocus) e.preventDefault();
+        onMouseDown?.(e);
+      },
+      whileTap: still || rest.disabled ? void 0 : { scale: 0.86 },
+      transition: POP,
+      ...rest,
+      className: cn(
+        "group relative grid size-8 shrink-0 cursor-pointer place-items-center rounded-full outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[#242423]/30 disabled:cursor-default",
+        danger ? "text-[#d64545] disabled:text-[#d64545]/35" : on ? "text-[#242423]" : "text-[#242423]/55 hover:text-[#242423] disabled:text-[#242423]/25",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx7(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-disabled:opacity-0",
+              danger ? "bg-[#d64545]/[0.09]" : "bg-[#242423]/[0.05]"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx7(AnimatePresence, { initial: false, children: on && /* @__PURE__ */ jsx7(
+          motion7.span,
+          {
+            "aria-hidden": true,
+            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: "absolute inset-0 rounded-[inherit] bg-[#242423]/[0.09]"
+          }
+        ) }),
+        /* @__PURE__ */ jsx7("span", { className: "relative grid", children })
+      ]
+    }
+  );
+});
+function Nudge({ children }) {
+  return /* @__PURE__ */ jsx7("span", { className: "grid transition-transform duration-300 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] group-hover:-translate-y-px group-hover:scale-110 group-active:scale-90", children });
+}
+function Thumb({
+  item,
+  still,
+  onRemove
+}) {
+  const done = item.progress >= 1 && !item.failed;
+  const [settled, setSettled] = React.useState(done);
+  React.useEffect(() => {
+    if (!done) return;
+    const t = window.setTimeout(() => setSettled(true), still ? 0 : 750);
+    return () => window.clearTimeout(t);
+  }, [done, still]);
+  const ext = item.name.split(".").pop()?.toUpperCase().slice(0, 4) ?? "FILE";
+  return /* @__PURE__ */ jsxs6(
+    motion7.div,
+    {
+      layout: true,
+      initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.6, filter: "blur(6px)" },
+      animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
+      exit: still ? { opacity: 0 } : {
+        opacity: 0,
+        scale: 0.6,
+        filter: "blur(6px)",
+        transition: { duration: 0.22 }
+      },
+      transition: POP,
+      className: "group/thumb relative size-16 shrink-0",
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: cn(
+              "relative size-full overflow-hidden rounded-2xl bg-[#242423]/[0.05]",
+              item.failed && "ring-[1.5px] ring-[#d64545]"
+            ),
+            children: [
+              (item.kind === "image" || item.kind === "video") && item.src ? /* @__PURE__ */ jsx7(
+                "img",
+                {
+                  src: item.src,
+                  alt: item.name,
+                  draggable: false,
+                  className: "size-full object-cover transition-transform duration-500 group-hover/thumb:scale-[1.06]"
+                }
+              ) : item.kind === "voice" ? /* @__PURE__ */ jsxs6("div", { className: "flex size-full flex-col items-center justify-center gap-1.5 text-[#242423]", children: [
+                /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: "flex h-4 items-center gap-[2px]", children: [6, 12, 8, 14, 7, 10].map((h, i) => /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    className: "w-[2px] rounded-full bg-current",
+                    style: { height: h }
+                  },
+                  i
+                )) }),
+                /* @__PURE__ */ jsx7("span", { className: "text-[12px] font-medium tabular-nums", children: item.duration })
+              ] }) : /* @__PURE__ */ jsxs6("div", { className: "flex size-full flex-col items-center justify-center gap-1 text-[#242423]/70", children: [
+                /* @__PURE__ */ jsx7(FILE_TEXT, { className: "size-5", strokeWidth: 1.75, "aria-hidden": true }),
+                /* @__PURE__ */ jsx7("span", { className: "text-[12px] font-semibold tracking-wide", children: ext })
+              ] }),
+              item.kind === "video" && settled && /* @__PURE__ */ jsxs6(Fragment, { children: [
+                /* @__PURE__ */ jsx7("span", { className: "absolute left-1/2 top-1/2 grid size-6 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-white/90 text-[#242423] shadow-sm", children: /* @__PURE__ */ jsx7(
+                  Play,
+                  {
+                    className: "size-3 translate-x-px fill-current",
+                    "aria-hidden": true
+                  }
+                ) }),
+                item.duration && /* @__PURE__ */ jsx7("span", { className: "absolute bottom-1 left-1 rounded-md bg-black/45 px-1 text-[12px] font-medium leading-4 tabular-nums text-white", children: item.duration })
+              ] }),
+              /* @__PURE__ */ jsx7(AnimatePresence, { children: !settled && /* @__PURE__ */ jsx7(
+                motion7.div,
+                {
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0, transition: { duration: 0.35 } },
+                  className: "absolute inset-0 grid place-items-center bg-[#242423]/40 backdrop-blur-[2px]",
+                  children: /* @__PURE__ */ jsx7(AnimatePresence, { mode: "popLayout", initial: false, children: done ? /* @__PURE__ */ jsx7(
+                    motion7.span,
+                    {
+                      initial: still ? { opacity: 0 } : { scale: 0, rotate: -30 },
+                      animate: { scale: 1, rotate: 0, opacity: 1 },
+                      transition: POP,
+                      className: "grid size-7 place-items-center rounded-full bg-white text-[#269a5a]",
+                      children: /* @__PURE__ */ jsx7(CheckIcon, { className: "size-4", strokeWidth: 2.75, active: true })
+                    },
+                    "done"
+                  ) : /* @__PURE__ */ jsxs6(
+                    motion7.svg,
+                    {
+                      viewBox: "0 0 28 28",
+                      className: "size-7 -rotate-90",
+                      exit: still ? { opacity: 0 } : { scale: 0.4, opacity: 0 },
+                      transition: { duration: 0.18 },
+                      "aria-hidden": true,
+                      children: [
+                        /* @__PURE__ */ jsx7(
+                          "circle",
+                          {
+                            cx: "14",
+                            cy: "14",
+                            r: "11",
+                            fill: "none",
+                            stroke: "rgba(255,255,255,0.3)",
+                            strokeWidth: "2.5"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx7(
+                          motion7.circle,
+                          {
+                            cx: "14",
+                            cy: "14",
+                            r: "11",
+                            fill: "none",
+                            stroke: "white",
+                            strokeWidth: "2.5",
+                            strokeLinecap: "round",
+                            initial: { pathLength: 0 },
+                            animate: { pathLength: Math.max(0.04, item.progress) },
+                            transition: still ? { duration: 0 } : SOFT
+                          }
+                        )
+                      ]
+                    },
+                    "ring"
+                  ) })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${item.name}`,
+            onClick: onRemove,
+            className: "absolute -right-1.5 -top-1.5 grid size-5 scale-75 cursor-pointer place-items-center rounded-full bg-[#242423] text-white opacity-0 shadow-[0_0_0_2px_white] outline-none transition-[opacity,transform] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] hover:scale-110 focus-visible:scale-100 focus-visible:opacity-100 group-hover/thumb:scale-100 group-hover/thumb:opacity-100",
+            children: /* @__PURE__ */ jsx7(XIcon, { className: "size-3", strokeWidth: 2.75 })
+          }
+        ),
+        /* @__PURE__ */ jsx7("span", { role: "status", className: "sr-only", children: item.failed ? `${item.name} failed to upload.` : done ? `${item.name} uploaded.` : "" })
+      ]
+    }
+  );
+}
+var MessageComposer = React.forwardRef(function MessageComposer2({
+  defaultValue = "",
+  placeholder = "Write a message, type @ to mention someone",
+  people = DEFAULT_PEOPLE,
+  defaultAttachments = [],
+  toolbar: toolbarProp = true,
+  maxHeight = 240,
+  onSend,
+  onUpload,
+  onEnhance,
+  onVideo,
+  onChange,
+  className
+}, ref) {
+  const still = !!useReducedMotion7();
+  const id = React.useId();
+  const root = React.useRef(null);
+  React.useImperativeHandle(ref, () => root.current);
+  const editor = React.useRef(null);
+  const scroller = React.useRef(null);
+  const fileInput = React.useRef(null);
+  const saved = React.useRef(null);
+  const seen = useInView(root, { once: true, amount: 0.3 });
+  const appear = seen || still;
+  const wipe = useAnimationControls();
+  const [format, setFormat] = React.useState(NO_FORMAT);
+  const [empty, setEmpty] = React.useState(!defaultValue);
+  const [focused, setFocused] = React.useState(false);
+  const [toolbar, setToolbar] = React.useState(toolbarProp);
+  const [height, setHeight] = React.useState(24);
+  const [files, setFiles] = React.useState(
+    () => defaultAttachments.map((a) => ({ ...a, progress: 0 }))
+  );
+  const [styleMenu, setStyleMenu] = React.useState(false);
+  const [emojiMenu, setEmojiMenu] = React.useState(false);
+  const [sendMenu, setSendMenu] = React.useState(false);
+  const [hover, setHover] = React.useState(null);
+  const [peek, setPeek] = React.useState(null);
+  const peekTimer = React.useRef(0);
+  React.useEffect(() => () => window.clearTimeout(peekTimer.current), []);
+  const peekAt = (e) => {
+    const chip = e.target.closest?.("[data-mention]");
+    if (!chip) return;
+    const person = people.find((p) => p.id === chip.dataset.mention);
+    if (!person) return;
+    window.clearTimeout(peekTimer.current);
+    const at2 = chip.getBoundingClientRect();
+    const box = root.current.getBoundingClientRect();
+    const scale = box.width / root.current.offsetWidth || 1;
+    const half = 110;
+    const x = (at2.left + at2.width / 2 - box.left) / scale;
+    setPeek({
+      person,
+      x: Math.min(Math.max(x, half), root.current.offsetWidth - half),
+      y: (at2.top - box.top) / scale - 8
+    });
+  };
+  const unpeek = (e) => {
+    const chip = e.target.closest?.("[data-mention]");
+    if (!chip || chip.contains(e.relatedTarget)) return;
+    window.clearTimeout(peekTimer.current);
+    peekTimer.current = window.setTimeout(() => setPeek(null), 120);
+  };
+  const [mention, setMention] = React.useState(null);
+  const [pick, setPick] = React.useState(0);
+  const [recording, setRecording] = React.useState(null);
+  const [thinking, setThinking] = React.useState(false);
+  const [sending, setSending] = React.useState(false);
+  const [flights, setFlights] = React.useState(0);
+  const [result, setResult] = React.useState(null);
+  const [sendAt, setSendAt] = React.useState(null);
+  const [sentAt, setSentAt] = React.useState(null);
+  const [sendView, setSendView] = React.useState("main");
+  React.useEffect(() => setToolbar(toolbarProp), [toolbarProp]);
+  const matches = React.useMemo(() => {
+    if (!mention) return [];
+    const q = mention.query.toLowerCase();
+    return people.filter(
+      (p) => p.name.toLowerCase().split(" ").some((w) => w.startsWith(q)) || p.id.startsWith(q)
+    ).slice(0, 5);
+  }, [mention, people]);
+  React.useLayoutEffect(() => {
+    if (editor.current && defaultValue)
+      fill(editor.current, defaultValue, people);
+  }, []);
+  React.useLayoutEffect(() => {
+    const el = scroller.current;
+    if (!el) return;
+    setHeight(el.offsetHeight);
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setHeight(el.offsetHeight));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const refresh = React.useCallback(() => {
+    const ed = editor.current;
+    if (!ed) return;
+    setEmpty(!ed.textContent?.trim() && !ed.querySelector("[data-mention],li"));
+    const sel = window.getSelection();
+    const node = sel?.anchorNode;
+    if (!node || !ed.contains(node)) return;
+    saved.current = sel.getRangeAt(0).cloneRange();
+    const next = {
+      ...NO_FORMAT,
+      bold: document.queryCommandState("bold"),
+      italic: document.queryCommandState("italic"),
+      underline: document.queryCommandState("underline")
+    };
+    let el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+    while (el && el !== ed) {
+      const tag = el.tagName;
+      if (tag === "UL") next.ul = true;
+      if (tag === "OL") next.ol = true;
+      if (tag === "BLOCKQUOTE") next.quote = true;
+      if (tag === "PRE") next.code = true;
+      const style = STYLES.find((s) => s.tag.toUpperCase() === tag);
+      if (style && next.style === "body") next.style = style.id;
+      el = el.parentElement;
+    }
+    setFormat(next);
+  }, []);
+  React.useEffect(() => {
+    document.addEventListener("selectionchange", refresh);
+    return () => document.removeEventListener("selectionchange", refresh);
+  }, [refresh]);
+  const uploading = files.some((f) => f.progress < 1 && !f.failed && !f.file);
+  React.useEffect(() => {
+    if (!appear || !uploading) return;
+    const t = window.setInterval(() => {
+      setFiles(
+        (all) => all.map(
+          (f) => f.progress < 1 && !f.file ? {
+            ...f,
+            progress: still ? 1 : Math.min(1, f.progress + 0.05 + Math.random() * 0.11)
+          } : f
+        )
+      );
+    }, 140);
+    return () => window.clearInterval(t);
+  }, [appear, uploading, still]);
+  const isRecording = recording !== null;
+  React.useEffect(() => {
+    if (!isRecording) return;
+    const t = window.setInterval(
+      () => setRecording((s) => s === null ? s : s + 1),
+      1e3
+    );
+    return () => window.clearInterval(t);
+  }, [isRecording]);
+  const closeStyle = React.useCallback(() => setStyleMenu(false), []);
+  const closeEmoji = React.useCallback(() => setEmojiMenu(false), []);
+  const closeSend = React.useCallback(() => setSendMenu(false), []);
+  useDismiss(styleMenu, closeStyle, `${id}-style`);
+  useDismiss(emojiMenu, closeEmoji, `${id}-emoji`);
+  useDismiss(sendMenu, closeSend, `${id}-send`);
+  const ready = (!empty || files.length > 0) && files.every((f) => f.progress >= 1 && !f.failed) && !isRecording && !sending && !thinking;
+  const restore = () => {
+    const ed = editor.current;
+    const sel = window.getSelection();
+    if (document.activeElement === ed && sel.rangeCount && ed.contains(sel.anchorNode))
+      return;
+    ed.focus({ preventScroll: true });
+    const r = saved.current;
+    if (r && ed.contains(r.startContainer)) {
+      sel.removeAllRanges();
+      sel.addRange(r);
+    } else {
+      const end = document.createRange();
+      end.selectNodeContents(ed);
+      end.collapse(false);
+      sel.removeAllRanges();
+      sel.addRange(end);
+    }
+  };
+  const seed = () => {
+    const ed = editor.current;
+    if (!ed || ed.childNodes.length > 0 || document.activeElement !== ed)
+      return;
+    const p = document.createElement("p");
+    p.append(document.createElement("br"));
+    ed.append(p);
+    const r = document.createRange();
+    r.setStart(p, 0);
+    r.collapse(true);
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(r);
+  };
+  const changed = () => {
+    refresh();
+    if (onChange && editor.current) onChange(readText(editor.current));
+  };
+  const exec = (command, value) => {
+    restore();
+    document.execCommand(command, false, value);
+    changed();
+  };
+  const lines = (change) => {
+    restore();
+    change(editor.current);
+    changed();
+  };
+  const setStyle = (style) => {
+    setStyleMenu(false);
+    const tag = STYLES.find((s) => s.id === style).tag;
+    lines((ed) => setBlock(ed, tag));
+  };
+  const findMention = () => {
+    const sel = window.getSelection();
+    const node = sel?.anchorNode;
+    if (!sel?.isCollapsed || !node || node.nodeType !== Node.TEXT_NODE || !editor.current?.contains(node)) {
+      setMention(null);
+      return;
+    }
+    const before = node.textContent.slice(0, sel.anchorOffset);
+    const m = before.match(/(^|\s)@([\w-]{0,20})$/);
+    if (!m) {
+      setMention(null);
+      return;
+    }
+    const start = sel.anchorOffset - m[2].length - 1;
+    const r = document.createRange();
+    r.setStart(node, start);
+    r.setEnd(node, start + 1);
+    const at2 = r.getBoundingClientRect();
+    const box = root.current.getBoundingClientRect();
+    const scale = box.width / root.current.offsetWidth || 1;
+    const x = Math.min(
+      (at2.left - box.left) / scale - 8,
+      root.current.offsetWidth - 252
+    );
+    setMention({
+      query: m[2],
+      node,
+      start,
+      end: sel.anchorOffset,
+      x: Math.max(8, x),
+      y: (at2.bottom - box.top) / scale + 8
+    });
+    setPick(0);
+  };
+  const insertMention = (p) => {
+    if (!mention) return;
+    const { node, start, end } = mention;
+    const r = document.createRange();
+    r.setStart(node, start);
+    r.setEnd(node, Math.min(end, node.length));
+    r.deleteContents();
+    const chip = mentionChip(p);
+    const space = document.createTextNode("\xA0");
+    r.insertNode(space);
+    r.insertNode(chip);
+    const sel = window.getSelection();
+    const after = document.createRange();
+    after.setStart(space, 1);
+    after.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(after);
+    if (!still)
+      chip.animate(
+        [
+          { transform: "scale(0.6)", opacity: 0, filter: "blur(3px)" },
+          {
+            transform: "scale(1.08)",
+            opacity: 1,
+            filter: "blur(0px)",
+            offset: 0.6
+          },
+          { transform: "scale(1)" }
+        ],
+        { duration: 360, easing: "cubic-bezier(0.22,1,0.36,1)" }
+      );
+    setMention(null);
+    editor.current?.focus({ preventScroll: true });
+    changed();
+  };
+  const insertEmoji = (emoji) => {
+    restore();
+    document.execCommand("insertText", false, emoji);
+    changed();
+  };
+  const addFiles = (list) => {
+    if (!list) return;
+    const added = [...list].map((file) => ({
+      id: nextId(),
+      name: file.name,
+      kind: file.type.startsWith("image/") ? "image" : file.type.startsWith("video/") ? "video" : "file",
+      src: file.type.startsWith("image/") ? URL.createObjectURL(file) : void 0,
+      file: onUpload ? file : void 0,
+      progress: 0
+    }));
+    setFiles((all) => [...all, ...added]);
+    if (!onUpload) return;
+    for (const a of added) {
+      const set = (patch) => setFiles(
+        (all) => all.map((f) => f.id === a.id ? { ...f, ...patch } : f)
+      );
+      onUpload(
+        a.file,
+        (v) => set({ progress: Math.min(0.99, Math.max(0, v)) })
+      ).then(
+        () => set({ progress: 1 }),
+        () => set({ failed: true })
+      );
+    }
+  };
+  const remove = (item) => {
+    if (item.src?.startsWith("blob:")) URL.revokeObjectURL(item.src);
+    setFiles((all) => all.filter((f) => f.id !== item.id));
+  };
+  const toggleMic = () => {
+    if (recording === null) {
+      setRecording(0);
+      return;
+    }
+    const seconds = Math.max(1, recording);
+    setRecording(null);
+    setFiles((all) => [
+      ...all,
+      {
+        id: nextId(),
+        name: "Voice note",
+        kind: "voice",
+        duration: fmt(seconds),
+        progress: 0
+      }
+    ]);
+  };
+  const video = () => {
+    if (onVideo) return onVideo();
+    setFiles((all) => [
+      ...all,
+      {
+        id: nextId(),
+        name: "Clip.mp4",
+        kind: "video",
+        src: SAMPLE_CLIP,
+        duration: "0:12",
+        progress: 0
+      }
+    ]);
+  };
+  const swapText = async (next) => {
+    const ed = editor.current;
+    if (!still)
+      await wipe.start({
+        opacity: 0,
+        y: -8,
+        filter: "blur(6px)",
+        transition: { duration: 0.22, ease: "easeIn" }
+      });
+    fill(ed, next, people);
+    seed();
+    saved.current = null;
+    changed();
+    setMention(null);
+    if (!still) {
+      wipe.set({ opacity: 0, y: 8, filter: "blur(6px)" });
+      await wipe.start({
+        opacity: 1,
+        y: 0,
+        filter: "blur(0px)",
+        transition: { duration: 0.38, ease: GLIDE }
+      });
+    }
+  };
+  const enhance = async () => {
+    if (thinking) return;
+    const ed = editor.current;
+    setThinking(true);
+    try {
+      const [next] = await Promise.all([
+        Promise.resolve(
+          onEnhance ? onEnhance(readText(ed)) : tidy(readText(ed))
+        ),
+        wait(still ? 0 : 1100)
+      ]);
+      await swapText(next);
+    } finally {
+      setThinking(false);
+    }
+  };
+  const clear = () => {
+    files.forEach(
+      (f) => f.src?.startsWith("blob:") && URL.revokeObjectURL(f.src)
+    );
+    setFiles([]);
+    void swapText("");
+  };
+  const send = async (mode) => {
+    setSendMenu(false);
+    if (!ready) return;
+    const ed = editor.current;
+    const message = {
+      html: ed.innerHTML,
+      text: readText(ed),
+      mentions: [...ed.querySelectorAll("[data-mention]")].map(
+        (m) => m.dataset.mention
+      ),
+      attachments: files.map(({ progress: _p, failed: _f, ...a }) => a),
+      mode,
+      sendAt: mode === "schedule" ? sendAt ?? at(/* @__PURE__ */ new Date(), 1, 9) : void 0
+    };
+    setSentAt(message.sendAt ?? null);
+    setSendAt(null);
+    setSending(true);
+    setFlights((n) => n + 1);
+    setResult(null);
+    setFiles([]);
+    try {
+      await Promise.all([onSend?.(message), swapText("")]);
+      setResult(mode);
+      await wait(still ? 1200 : 1800);
+    } finally {
+      setSending(false);
+      setResult(null);
+    }
+  };
+  const onKeyDown = (e) => {
+    seed();
+    if (mention && matches.length) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        setPick(
+          (i) => (i + (e.key === "ArrowDown" ? 1 : matches.length - 1)) % matches.length
+        );
+        return;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        insertMention(matches[pick] ?? matches[0]);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setMention(null);
+        return;
+      }
+    }
+    if (e.key !== "Enter" || e.shiftKey) return;
+    const inBlock = format.ul || format.ol || format.quote || format.code;
+    if (e.metaKey || e.ctrlKey || !inBlock) {
+      e.preventDefault();
+      void send(sendAt ? "schedule" : "now");
+    }
+  };
+  const current = STYLES.find((s) => s.id === format.style);
+  const enter = (delay) => ({
+    initial: still ? false : { opacity: 0, y: 8, filter: "blur(4px)" },
+    animate: appear ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+    transition: { duration: 0.45, ease: GLIDE, delay: still ? 0 : delay }
+  });
+  const sendLabel = result === "schedule" ? "Scheduled" : result === "silent" ? "Sent quietly" : result === "now" ? "Sent" : sendAt ? "Schedule" : "Send";
+  const divider = /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: "mx-1 h-5 w-px shrink-0 bg-[#242423]/10" });
+  return /* @__PURE__ */ jsxs6(
+    motion7.div,
+    {
+      ref: root,
+      onKeyDown: (e) => {
+        if (e.key !== "Escape" || !(styleMenu || emojiMenu || sendMenu)) return;
+        e.stopPropagation();
+        setStyleMenu(false);
+        setEmojiMenu(false);
+        setSendMenu(false);
+      },
+      initial: still ? false : { opacity: 0, y: 18, filter: "blur(8px)" },
+      animate: appear ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+      transition: { duration: 0.6, ease: GLIDE },
+      className: cn("@container relative w-[600px] max-w-full text-[#242423]", className),
+      children: [
+        /* @__PURE__ */ jsxs6(
+          motion7.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-2.5 max-sm:p-2",
+            children: [
+              /* @__PURE__ */ jsx7(AnimatePresence, { initial: false, children: toolbar && /* @__PURE__ */ jsx7(
+                motion7.div,
+                {
+                  initial: { height: 0, opacity: 0 },
+                  animate: {
+                    height: "auto",
+                    opacity: 1,
+                    transitionEnd: { overflow: "visible" }
+                  },
+                  exit: { height: 0, opacity: 0, overflow: "hidden" },
+                  transition: still ? { duration: 0 } : { duration: 0.32, ease: GLIDE },
+                  className: cn("relative overflow-hidden", styleMenu && "z-30"),
+                  children: /* @__PURE__ */ jsxs6(
+                    motion7.div,
+                    {
+                      role: "toolbar",
+                      "aria-label": "Formatting",
+                      ...enter(0.08),
+                      className: "mb-1 flex items-center gap-0.5 rounded-[18px] bg-[#f1f1ef] p-1",
+                      children: [
+                        /* @__PURE__ */ jsxs6("div", { className: "relative", "data-pop": `${id}-style`, children: [
+                          /* @__PURE__ */ jsxs6(
+                            motion7.button,
+                            {
+                              type: "button",
+                              "aria-haspopup": "listbox",
+                              "aria-expanded": styleMenu,
+                              onMouseDown: (e) => e.preventDefault(),
+                              onClick: () => setStyleMenu((m) => !m),
+                              whileTap: still ? void 0 : { scale: 0.95 },
+                              transition: POP,
+                              className: cn(
+                                "flex h-8 w-[112px] cursor-pointer items-center justify-between gap-2 rounded-full pl-3.5 pr-2.5 text-[14px] font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                                styleMenu ? "bg-white shadow-[0_1px_2px_rgba(0,0,0,0.06)]" : "hover:bg-white/70"
+                              ),
+                              children: [
+                                /* @__PURE__ */ jsx7("span", { className: "relative inline-grid overflow-hidden", children: /* @__PURE__ */ jsx7(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx7(
+                                  motion7.span,
+                                  {
+                                    initial: still ? { opacity: 0 } : { opacity: 0, y: "80%", filter: "blur(3px)" },
+                                    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                                    exit: still ? { opacity: 0 } : { opacity: 0, y: "-80%", filter: "blur(3px)" },
+                                    transition: { duration: 0.28, ease: GLIDE },
+                                    children: current.label
+                                  },
+                                  current.id
+                                ) }) }),
+                                /* @__PURE__ */ jsx7(
+                                  motion7.span,
+                                  {
+                                    animate: { rotate: styleMenu ? 180 : 0 },
+                                    transition: POP,
+                                    className: "grid",
+                                    children: /* @__PURE__ */ jsx7(
+                                      ChevronDownIcon,
+                                      {
+                                        className: "size-4 text-[#242423]/50",
+                                        strokeWidth: 2.25
+                                      }
+                                    )
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(AnimatePresence, { children: styleMenu && /* @__PURE__ */ jsx7(
+                            Pour,
+                            {
+                              from: "top",
+                              still,
+                              role: "listbox",
+                              "aria-label": "Text style",
+                              onKeyDown: arrowKeys,
+                              onPointerLeave: () => setHover(null),
+                              className: "left-0 top-full mt-2 w-52",
+                              children: STYLES.map((s, i) => /* @__PURE__ */ jsxs6(
+                                Row,
+                                {
+                                  i,
+                                  still,
+                                  role: "option",
+                                  "aria-selected": s.id === format.style,
+                                  onMouseDown: (e) => e.preventDefault(),
+                                  onPointerEnter: () => setHover(`style-${s.id}`),
+                                  onFocus: () => setHover(`style-${s.id}`),
+                                  onClick: () => setStyle(s.id),
+                                  className: "h-11 justify-between",
+                                  children: [
+                                    (hover ?? `style-${format.style}`) === `style-${s.id}` && /* @__PURE__ */ jsx7(Glide, { id: `${id}-style-glide`, still }),
+                                    /* @__PURE__ */ jsx7("span", { className: cn("relative", s.preview), children: s.label }),
+                                    /* @__PURE__ */ jsx7(AnimatePresence, { children: s.id === format.style && /* @__PURE__ */ jsx7(
+                                      motion7.span,
+                                      {
+                                        className: "relative grid",
+                                        initial: still ? false : { scale: 0, opacity: 0 },
+                                        animate: { scale: 1, opacity: 1 },
+                                        exit: { scale: 0, opacity: 0 },
+                                        transition: POP,
+                                        children: /* @__PURE__ */ jsx7(
+                                          CheckIcon,
+                                          {
+                                            className: "size-4",
+                                            strokeWidth: 2.5,
+                                            active: true
+                                          }
+                                        )
+                                      }
+                                    ) })
+                                  ]
+                                },
+                                s.id
+                              ))
+                            }
+                          ) })
+                        ] }),
+                        /* @__PURE__ */ jsxs6("div", { className: "-my-1 flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto py-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden @max-[34rem]:[mask-image:linear-gradient(to_right,black_80%,transparent)]", children: [
+                          divider,
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Bold",
+                              toggle: true,
+                              on: format.bold,
+                              still,
+                              onClick: () => exec("bold"),
+                              children: /* @__PURE__ */ jsx7(BoldIcon, { className: "size-4", strokeWidth: 2.5 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Italic",
+                              toggle: true,
+                              on: format.italic,
+                              still,
+                              onClick: () => exec("italic"),
+                              children: /* @__PURE__ */ jsx7(ItalicIcon, { className: "size-4", strokeWidth: 2.25 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Underline",
+                              toggle: true,
+                              on: format.underline,
+                              still,
+                              onClick: () => exec("underline"),
+                              children: /* @__PURE__ */ jsx7(UnderlineIcon, { className: "size-4", strokeWidth: 2.25 })
+                            }
+                          ),
+                          divider,
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Bulleted list",
+                              toggle: true,
+                              on: format.ul,
+                              still,
+                              onClick: () => lines((ed) => toggleList(ed, "ul")),
+                              children: /* @__PURE__ */ jsx7(Nudge, { children: /* @__PURE__ */ jsx7(List, { className: "size-4", strokeWidth: 2.25 }) })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Numbered list",
+                              toggle: true,
+                              on: format.ol,
+                              still,
+                              onClick: () => lines((ed) => toggleList(ed, "ol")),
+                              children: /* @__PURE__ */ jsx7(Nudge, { children: /* @__PURE__ */ jsx7(ListOrdered, { className: "size-4", strokeWidth: 2.25 }) })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Quote",
+                              toggle: true,
+                              on: format.quote,
+                              still,
+                              onClick: () => lines(
+                                (ed) => setBlock(ed, format.quote ? "p" : "blockquote")
+                              ),
+                              children: /* @__PURE__ */ jsx7(Nudge, { children: /* @__PURE__ */ jsx7(TextQuote, { className: "size-4", strokeWidth: 2.25 }) })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: "Code block",
+                              toggle: true,
+                              on: format.code,
+                              still,
+                              onClick: () => lines((ed) => setBlock(ed, format.code ? "p" : "pre")),
+                              children: /* @__PURE__ */ jsx7(TerminalIcon, { className: "size-4", strokeWidth: 2.25 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7("span", { className: "w-4 shrink-0 @min-[34rem]:hidden", "aria-hidden": true })
+                        ] }),
+                        /* @__PURE__ */ jsx7(AnimatePresence, { initial: false, children: (!empty || files.length > 0) && /* @__PURE__ */ jsx7(
+                          motion7.span,
+                          {
+                            className: "grid",
+                            initial: still ? { opacity: 0 } : {
+                              opacity: 0,
+                              scale: 0.5,
+                              rotate: -20,
+                              filter: "blur(4px)"
+                            },
+                            animate: {
+                              opacity: 1,
+                              scale: 1,
+                              rotate: 0,
+                              filter: "blur(0px)"
+                            },
+                            exit: still ? { opacity: 0 } : {
+                              opacity: 0,
+                              scale: 0.5,
+                              filter: "blur(4px)",
+                              transition: { duration: 0.18 }
+                            },
+                            transition: POP,
+                            children: /* @__PURE__ */ jsx7(
+                              Tool,
+                              {
+                                label: "Clear message",
+                                danger: true,
+                                still,
+                                onClick: clear,
+                                children: /* @__PURE__ */ jsx7(DeleteIcon, { className: "size-4", strokeWidth: 2.25 })
+                              }
+                            )
+                          },
+                          "clear"
+                        ) })
+                      ]
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxs6(
+                motion7.div,
+                {
+                  ...enter(0.16),
+                  className: cn(
+                    "relative flex items-start gap-1 pl-3 pr-1 pt-2",
+                    emojiMenu && "z-30"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs6(
+                      motion7.div,
+                      {
+                        initial: false,
+                        animate: { height },
+                        transition: still ? { duration: 0 } : { type: "spring", stiffness: 300, damping: 30 },
+                        className: "relative min-w-0 flex-1 overflow-hidden",
+                        children: [
+                          /* @__PURE__ */ jsx7(
+                            "div",
+                            {
+                              ref: scroller,
+                              className: "overflow-y-auto overscroll-contain py-1.5",
+                              style: { maxHeight },
+                              children: /* @__PURE__ */ jsx7(motion7.div, { animate: wipe, children: /* @__PURE__ */ jsx7(
+                                "div",
+                                {
+                                  ref: editor,
+                                  contentEditable: true,
+                                  suppressContentEditableWarning: true,
+                                  role: "textbox",
+                                  "aria-multiline": true,
+                                  "aria-label": "Message",
+                                  "aria-autocomplete": "list",
+                                  "aria-expanded": !!mention && matches.length > 0,
+                                  "aria-controls": `${id}-people`,
+                                  spellCheck: true,
+                                  onFocus: () => {
+                                    setFocused(true);
+                                    document.execCommand(
+                                      "defaultParagraphSeparator",
+                                      false,
+                                      "p"
+                                    );
+                                    seed();
+                                  },
+                                  onBlur: () => {
+                                    setFocused(false);
+                                    setMention(null);
+                                  },
+                                  onPointerOver: peekAt,
+                                  onPointerOut: unpeek,
+                                  onInput: () => {
+                                    setPeek(null);
+                                    changed();
+                                    findMention();
+                                  },
+                                  onKeyDown,
+                                  onPaste: (e) => {
+                                    e.preventDefault();
+                                    document.execCommand(
+                                      "insertText",
+                                      false,
+                                      e.clipboardData.getData("text/plain")
+                                    );
+                                  },
+                                  className: cn(
+                                    "min-h-6 break-words text-[16px] leading-6 outline-none",
+                                    "[&_h2]:text-[24px] [&_h2]:font-semibold [&_h2]:leading-8 [&_h2]:tracking-tight",
+                                    "[&_h3]:text-[18px] [&_h3]:font-semibold [&_h3]:leading-7",
+                                    "[&_h6]:text-[14px] [&_h6]:font-normal [&_h6]:leading-6 [&_h6]:text-[#242423]/60",
+                                    "[&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:list-disc [&_ul]:pl-6 [&_li]:pl-0.5",
+                                    "[&_blockquote]:my-1 [&_blockquote]:border-l-2 [&_blockquote]:border-[#242423]/20 [&_blockquote]:pl-3 [&_blockquote]:text-[#242423]/70",
+                                    "[&_pre]:my-1 [&_pre]:whitespace-pre-wrap [&_pre]:rounded-xl [&_pre]:bg-[#242423]/[0.05] [&_pre]:px-3 [&_pre]:py-2 [&_pre]:font-mono [&_pre]:text-[14px]"
+                                  )
+                                }
+                              ) })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(AnimatePresence, { children: empty && /* @__PURE__ */ jsx7(
+                            motion7.span,
+                            {
+                              "aria-hidden": true,
+                              initial: still ? { opacity: 0 } : { opacity: 0, x: 6 },
+                              animate: { opacity: 1, x: 0 },
+                              exit: { opacity: 0, transition: { duration: 0.1 } },
+                              transition: { duration: 0.3, ease: GLIDE },
+                              className: "pointer-events-none absolute inset-x-0 top-1.5 truncate text-[16px] leading-6 text-[#242423]/40",
+                              children: placeholder
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx7(AnimatePresence, { children: thinking && !still && /* @__PURE__ */ jsx7(
+                            motion7.span,
+                            {
+                              "aria-hidden": true,
+                              initial: { opacity: 0 },
+                              animate: { opacity: 1 },
+                              exit: { opacity: 0 },
+                              className: "pointer-events-none absolute inset-0 overflow-hidden",
+                              children: /* @__PURE__ */ jsx7(
+                                motion7.span,
+                                {
+                                  className: "absolute inset-y-0 w-1/2 bg-gradient-to-r from-transparent via-white/90 to-transparent",
+                                  initial: { x: "-100%" },
+                                  animate: { x: "250%" },
+                                  transition: {
+                                    duration: 1.1,
+                                    ease: "easeInOut",
+                                    repeat: Infinity
+                                  }
+                                }
+                              )
+                            }
+                          ) })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs6("div", { className: "relative", "data-pop": `${id}-emoji`, children: [
+                      /* @__PURE__ */ jsx7(
+                        Tool,
+                        {
+                          label: "Add emoji",
+                          on: emojiMenu,
+                          still,
+                          "aria-haspopup": "dialog",
+                          "aria-expanded": emojiMenu,
+                          onClick: () => setEmojiMenu((m) => !m),
+                          children: /* @__PURE__ */ jsx7(SmileIcon, { className: "size-[18px]", strokeWidth: 2 })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx7(AnimatePresence, { children: emojiMenu && /* @__PURE__ */ jsxs6(
+                        Pour,
+                        {
+                          from: "top",
+                          still,
+                          role: "dialog",
+                          "aria-label": "Emoji",
+                          className: "right-0 top-full mt-2 w-[248px] p-2",
+                          children: [
+                            /* @__PURE__ */ jsx7("p", { className: "px-1.5 pb-1.5 pt-0.5 text-[12px] font-medium text-[#242423]/45", children: "Quick reactions" }),
+                            /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-6 gap-1", children: EMOJI.map((e, i) => /* @__PURE__ */ jsx7(
+                              motion7.button,
+                              {
+                                type: "button",
+                                "aria-label": `Insert ${e}`,
+                                onMouseDown: (ev) => ev.preventDefault(),
+                                onClick: () => insertEmoji(e),
+                                initial: still ? false : { opacity: 0, scale: 0.4 },
+                                animate: { opacity: 1, scale: 1 },
+                                whileTap: still ? void 0 : { scale: 0.85 },
+                                transition: {
+                                  ...POP,
+                                  delay: still ? 0 : 0.04 + i % 6 * 0.02 + Math.floor(i / 6) * 0.04
+                                },
+                                className: "group/emoji grid aspect-square w-full cursor-pointer place-items-center rounded-full outline-none transition-colors duration-200 hover:bg-[#242423]/[0.05] focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                                children: /* @__PURE__ */ jsx7(
+                                  "span",
+                                  {
+                                    className: cn(
+                                      "block text-[20px] leading-none transition-transform duration-300 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] group-hover/emoji:scale-125 group-active/emoji:scale-90",
+                                      i % 2 ? "group-hover/emoji:rotate-[8deg]" : "group-hover/emoji:-rotate-[8deg]"
+                                    ),
+                                    children: e
+                                  }
+                                )
+                              },
+                              e
+                            )) })
+                          ]
+                        }
+                      ) })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx7(AnimatePresence, { initial: false, children: files.length > 0 && /* @__PURE__ */ jsx7(
+                motion7.div,
+                {
+                  initial: { height: 0, opacity: 0 },
+                  animate: { height: "auto", opacity: 1 },
+                  exit: { height: 0, opacity: 0 },
+                  transition: still ? { duration: 0 } : { duration: 0.32, ease: GLIDE },
+                  className: "overflow-hidden",
+                  children: /* @__PURE__ */ jsx7(
+                    motion7.div,
+                    {
+                      ...enter(0.22),
+                      className: "flex flex-wrap gap-2.5 px-3 pb-1 pt-3",
+                      children: /* @__PURE__ */ jsx7(AnimatePresence, { initial: false, mode: "popLayout", children: files.map((f) => /* @__PURE__ */ jsx7(
+                        Thumb,
+                        {
+                          item: f,
+                          still,
+                          onRemove: () => remove(f)
+                        },
+                        f.id
+                      )) })
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx7(AnimatePresence, { initial: false, children: sendAt && /* @__PURE__ */ jsx7(
+                motion7.div,
+                {
+                  initial: { height: 0, opacity: 0 },
+                  animate: { height: "auto", opacity: 1 },
+                  exit: { height: 0, opacity: 0 },
+                  transition: still ? { duration: 0 } : { duration: 0.32, ease: GLIDE },
+                  className: "overflow-hidden",
+                  children: /* @__PURE__ */ jsx7("div", { className: "px-1.5 pt-3", children: /* @__PURE__ */ jsxs6(
+                    motion7.div,
+                    {
+                      initial: still ? false : { opacity: 0, scale: 0.9, filter: "blur(4px)" },
+                      animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
+                      exit: { opacity: 0, scale: 0.9 },
+                      transition: POP,
+                      style: { transformOrigin: "0% 50%" },
+                      className: "inline-flex h-8 max-w-full items-center rounded-full bg-[#242423]/[0.05] text-[14px]",
+                      children: [
+                        /* @__PURE__ */ jsxs6(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": "Change when it sends",
+                            "data-pop": `${id}-send`,
+                            onClick: () => {
+                              setSendView("schedule");
+                              setSendMenu(true);
+                            },
+                            className: "group flex h-8 min-w-0 cursor-pointer items-center gap-2 rounded-full pl-2.5 pr-2 outline-none transition-colors hover:bg-[#242423]/[0.05] focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                            children: [
+                              /* @__PURE__ */ jsx7(
+                                ClockIcon,
+                                {
+                                  className: "size-4 text-[#242423]/70",
+                                  strokeWidth: 2.25
+                                }
+                              ),
+                              /* @__PURE__ */ jsx7("span", { className: "text-[#242423]/55", children: "Sends" }),
+                              /* @__PURE__ */ jsx7("span", { className: "relative inline-grid overflow-hidden font-medium", children: /* @__PURE__ */ jsx7(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx7(
+                                motion7.span,
+                                {
+                                  className: "truncate",
+                                  initial: still ? { opacity: 0 } : { opacity: 0, y: "80%", filter: "blur(3px)" },
+                                  animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                                  exit: still ? { opacity: 0 } : { opacity: 0, y: "-80%", filter: "blur(3px)" },
+                                  transition: { duration: 0.3, ease: GLIDE },
+                                  children: whenText(sendAt)
+                                },
+                                sendAt.getTime()
+                              ) }) })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx7(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": "Cancel schedule",
+                            onClick: () => setSendAt(null),
+                            className: "mr-0.5 grid size-7 shrink-0 cursor-pointer place-items-center rounded-full text-[#242423]/55 outline-none transition-colors hover:bg-[#242423]/[0.08] hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                            children: /* @__PURE__ */ jsx7(XIcon, { className: "size-3.5", strokeWidth: 2.5 })
+                          }
+                        )
+                      ]
+                    }
+                  ) })
+                }
+              ) }),
+              /* @__PURE__ */ jsxs6(
+                motion7.div,
+                {
+                  ...enter(0.26),
+                  className: cn(
+                    "relative mt-2 flex items-center gap-0.5 max-sm:gap-0",
+                    sendMenu && "z-30"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx7(
+                      "input",
+                      {
+                        ref: fileInput,
+                        type: "file",
+                        multiple: true,
+                        hidden: true,
+                        onChange: (e) => {
+                          addFiles(e.target.files);
+                          e.target.value = "";
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      Tool,
+                      {
+                        label: "Attach files",
+                        still,
+                        keepFocus: false,
+                        onClick: () => fileInput.current?.click(),
+                        children: /* @__PURE__ */ jsx7(PlusIcon, { className: "size-[18px]", strokeWidth: 2.25 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      motion7.button,
+                      {
+                        type: "button",
+                        layout: true,
+                        "aria-label": isRecording ? "Stop recording" : "Record a voice note",
+                        title: isRecording ? "Stop recording" : "Record a voice note",
+                        "aria-pressed": isRecording,
+                        onClick: toggleMic,
+                        whileTap: still ? void 0 : { scale: 0.92 },
+                        transition: still ? { duration: 0 } : POP,
+                        style: { borderRadius: 999 },
+                        className: cn(
+                          "group relative flex h-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden outline-none focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                          isRecording ? "gap-2 bg-[#d64545]/[0.08] pl-2.5 pr-2 text-[#d64545]" : "w-8 text-[#242423]/55 transition-colors hover:bg-[#242423]/[0.05] hover:text-[#242423]"
+                        ),
+                        children: /* @__PURE__ */ jsx7(AnimatePresence, { mode: "popLayout", initial: false, children: isRecording ? /* @__PURE__ */ jsxs6(
+                          motion7.span,
+                          {
+                            layout: "position",
+                            className: "flex items-center gap-2",
+                            initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.7, filter: "blur(3px)" },
+                            animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
+                            exit: { opacity: 0, scale: 0.7 },
+                            transition: POP,
+                            children: [
+                              /* @__PURE__ */ jsx7(
+                                motion7.span,
+                                {
+                                  className: "size-2 rounded-full bg-current",
+                                  animate: still ? void 0 : { opacity: [1, 0.3, 1] },
+                                  transition: { duration: 1.2, repeat: Infinity }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx7("span", { className: "text-[14px] font-medium tabular-nums", children: fmt(recording ?? 0) }),
+                              /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: "flex h-4 items-center gap-[2px]", children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx7(
+                                motion7.span,
+                                {
+                                  className: "w-[2px] rounded-full bg-current",
+                                  animate: still ? { height: 8 } : { height: [4, 14, 6, 12, 4] },
+                                  transition: {
+                                    duration: 0.9,
+                                    repeat: Infinity,
+                                    delay: i * 0.1,
+                                    ease: "easeInOut"
+                                  }
+                                },
+                                i
+                              )) }),
+                              /* @__PURE__ */ jsx7("span", { className: "size-2.5 rounded-[3px] bg-current" })
+                            ]
+                          },
+                          "rec"
+                        ) : /* @__PURE__ */ jsx7(
+                          motion7.span,
+                          {
+                            className: "grid",
+                            initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.6 },
+                            animate: { opacity: 1, scale: 1 },
+                            exit: { opacity: 0, scale: 0.6 },
+                            transition: POP,
+                            children: /* @__PURE__ */ jsx7(MicIcon, { className: "size-[18px]", strokeWidth: 2 })
+                          },
+                          "mic"
+                        ) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs6(
+                      motion7.div,
+                      {
+                        layout: "position",
+                        transition: still ? { duration: 0 } : POP,
+                        className: "flex items-center gap-0.5 max-sm:gap-0",
+                        children: [
+                          /* @__PURE__ */ jsx7(Tool, { label: "Record a video", still, onClick: video, children: /* @__PURE__ */ jsx7(Nudge, { children: /* @__PURE__ */ jsx7(Video, { className: "size-[18px]", strokeWidth: 2 }) }) }),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: thinking ? "Polishing" : "Polish with AI",
+                              on: thinking,
+                              still,
+                              disabled: sending,
+                              onClick: () => void enhance(),
+                              children: /* @__PURE__ */ jsx7(
+                                SparklesIcon,
+                                {
+                                  className: "size-[18px]",
+                                  strokeWidth: 2,
+                                  active: thinking || void 0
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(
+                            Tool,
+                            {
+                              label: toolbar ? "Hide formatting" : "Show formatting",
+                              toggle: true,
+                              on: !toolbar,
+                              still,
+                              onClick: () => setToolbar((t) => !t),
+                              children: /* @__PURE__ */ jsx7(
+                                motion7.span,
+                                {
+                                  animate: { rotate: toolbar ? 0 : 90 },
+                                  transition: POP,
+                                  className: "grid",
+                                  children: /* @__PURE__ */ jsx7(Ellipsis, { className: "size-[18px]", strokeWidth: 2.25 })
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs6("div", { className: "relative ml-auto flex", "data-pop": `${id}-send`, children: [
+                      /* @__PURE__ */ jsxs6(
+                        motion7.div,
+                        {
+                          animate: {
+                            backgroundColor: ready || sending ? "#242423" : "rgba(36,36,35,0.07)",
+                            color: ready || sending ? "#ffffff" : "rgba(36,36,35,0.35)"
+                          },
+                          transition: { duration: 0.25 },
+                          className: "flex h-9 items-center overflow-hidden rounded-full",
+                          children: [
+                            /* @__PURE__ */ jsxs6(
+                              motion7.button,
+                              {
+                                type: "button",
+                                layout: true,
+                                "aria-disabled": !ready,
+                                onClick: () => void send(sendAt ? "schedule" : "now"),
+                                whileTap: ready && !still ? { scale: 0.94 } : void 0,
+                                transition: still ? { duration: 0 } : POP,
+                                className: cn(
+                                  "group flex h-9 items-center gap-2 pl-4 pr-3 max-sm:pl-3.5 max-sm:pr-2.5 text-[14px] font-medium outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/40",
+                                  ready ? "cursor-pointer" : "cursor-default"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsx7("span", { className: "relative inline-grid overflow-hidden", children: /* @__PURE__ */ jsx7(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx7(
+                                    motion7.span,
+                                    {
+                                      initial: still ? { opacity: 0 } : { opacity: 0, y: "90%", filter: "blur(3px)" },
+                                      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                                      exit: still ? { opacity: 0 } : { opacity: 0, y: "-90%", filter: "blur(3px)" },
+                                      transition: { duration: 0.3, ease: GLIDE },
+                                      className: "whitespace-nowrap",
+                                      children: sendLabel
+                                    },
+                                    sendLabel
+                                  ) }) }),
+                                  /* @__PURE__ */ jsx7("span", { className: "relative grid size-4 place-items-center", children: /* @__PURE__ */ jsx7(AnimatePresence, { mode: "popLayout", children: result ? /* @__PURE__ */ jsx7(
+                                    motion7.span,
+                                    {
+                                      className: "grid",
+                                      initial: still ? { opacity: 0 } : { scale: 0, rotate: -40 },
+                                      animate: { scale: 1, rotate: 0, opacity: 1 },
+                                      exit: { scale: 0, opacity: 0 },
+                                      transition: POP,
+                                      children: /* @__PURE__ */ jsx7(
+                                        CheckIcon,
+                                        {
+                                          className: "size-4",
+                                          strokeWidth: 2.75,
+                                          active: true
+                                        }
+                                      )
+                                    },
+                                    "done"
+                                  ) : sendAt ? /* @__PURE__ */ jsx7(
+                                    motion7.span,
+                                    {
+                                      className: "grid",
+                                      initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.4, rotate: -90 },
+                                      animate: { opacity: 1, scale: 1, rotate: 0 },
+                                      exit: still ? { opacity: 0 } : {
+                                        opacity: 0,
+                                        scale: 0.5,
+                                        rotate: 270,
+                                        transition: { duration: 0.35, ease: "easeIn" }
+                                      },
+                                      transition: POP,
+                                      children: /* @__PURE__ */ jsx7(ClockIcon, { className: "size-4", strokeWidth: 2.25 })
+                                    },
+                                    `clock-${flights}`
+                                  ) : /* @__PURE__ */ jsx7(
+                                    motion7.span,
+                                    {
+                                      className: "grid",
+                                      initial: still ? { opacity: 0 } : { opacity: 0, x: -12, y: 12, scale: 0.6 },
+                                      animate: { opacity: 1, x: 0, y: 0, scale: 1 },
+                                      exit: still ? { opacity: 0 } : {
+                                        opacity: 0,
+                                        x: 26,
+                                        y: -26,
+                                        scale: 0.8,
+                                        transition: {
+                                          duration: 0.32,
+                                          ease: [0.5, 0, 0.75, 0]
+                                        }
+                                      },
+                                      transition: POP,
+                                      children: /* @__PURE__ */ jsx7(SendIcon, { className: "size-4", strokeWidth: 2.25 })
+                                    },
+                                    `plane-${flights}`
+                                  ) }) })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx7(
+                              "span",
+                              {
+                                "aria-hidden": true,
+                                className: cn(
+                                  "h-4 w-px",
+                                  ready || sending ? "bg-white/20" : "bg-[#242423]/10"
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ jsx7(
+                              motion7.button,
+                              {
+                                type: "button",
+                                "aria-label": "More ways to send",
+                                "aria-haspopup": "menu",
+                                "aria-expanded": sendMenu,
+                                onClick: () => {
+                                  setSendView("main");
+                                  setSendMenu((m) => !m);
+                                },
+                                whileTap: still ? void 0 : { scale: 0.88 },
+                                transition: POP,
+                                className: cn(
+                                  "grid h-9 w-9 place-items-center max-sm:w-8 pr-0.5 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/40",
+                                  ready || sending ? "cursor-pointer hover:bg-white/10" : "cursor-pointer hover:bg-[#242423]/[0.06]"
+                                ),
+                                children: /* @__PURE__ */ jsx7(
+                                  motion7.span,
+                                  {
+                                    animate: { rotate: sendMenu ? 180 : 0 },
+                                    transition: POP,
+                                    className: "grid",
+                                    children: /* @__PURE__ */ jsx7(ChevronDownIcon, { className: "size-4", strokeWidth: 2.25 })
+                                  }
+                                )
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx7(AnimatePresence, { children: sendMenu && /* @__PURE__ */ jsx7(
+                        SendMenu,
+                        {
+                          uid: id,
+                          still,
+                          ready,
+                          sendAt,
+                          startView: sendView,
+                          onSend: (mode) => void send(mode),
+                          onSchedule: (when) => {
+                            setSendAt(when);
+                            setSendMenu(false);
+                          }
+                        }
+                      ) })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(AnimatePresence, { children: peek && /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "pointer-events-none absolute z-40 -translate-x-1/2 -translate-y-full",
+            style: { left: peek.x, top: peek.y },
+            children: /* @__PURE__ */ jsxs6(
+              motion7.div,
+              {
+                role: "tooltip",
+                initial: still ? { opacity: 0 } : { opacity: 0, y: 6, scale: 0.94, filter: "blur(4px)" },
+                animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" },
+                exit: still ? { opacity: 0 } : {
+                  opacity: 0,
+                  y: 4,
+                  scale: 0.97,
+                  filter: "blur(3px)",
+                  transition: { duration: 0.15 }
+                },
+                transition: { duration: 0.25, ease: GLIDE },
+                style: { transformOrigin: "50% 100%" },
+                className: "flex items-center gap-2.5 whitespace-nowrap rounded-full bg-white py-1.5 pl-1.5 pr-4 shadow-[0_1px_2px_rgba(0,0,0,0.06),0_12px_28px_-10px_rgba(0,0,0,0.25)] ring-1 ring-black/5",
+                children: [
+                  peek.person.avatar ? /* @__PURE__ */ jsx7(
+                    "img",
+                    {
+                      src: peek.person.avatar,
+                      alt: "",
+                      className: "size-8 rounded-full object-cover"
+                    }
+                  ) : /* @__PURE__ */ jsx7("span", { className: "grid size-8 place-items-center rounded-full bg-[#242423]/[0.07] text-[12px] font-semibold", children: initials(peek.person.name) }),
+                  /* @__PURE__ */ jsxs6("span", { children: [
+                    /* @__PURE__ */ jsx7("span", { className: "block text-[14px] font-medium leading-5", children: peek.person.name }),
+                    peek.person.title && /* @__PURE__ */ jsx7("span", { className: "block text-[12px] leading-4 text-[#242423]/50", children: peek.person.title })
+                  ] })
+                ]
+              }
+            )
+          },
+          peek.person.id
+        ) }),
+        /* @__PURE__ */ jsx7(AnimatePresence, { children: mention && matches.length > 0 && /* @__PURE__ */ jsx7(
+          Pour,
+          {
+            from: "top",
+            still,
+            id: `${id}-people`,
+            role: "listbox",
+            "aria-label": "People",
+            onPointerLeave: () => setHover(null),
+            className: "w-60",
+            style: { left: mention.x, top: mention.y },
+            children: matches.map((p, i) => /* @__PURE__ */ jsxs6(
+              Row,
+              {
+                i,
+                still,
+                role: "option",
+                "aria-selected": i === pick,
+                tabIndex: -1,
+                onMouseDown: (e) => e.preventDefault(),
+                onPointerEnter: () => setPick(i),
+                onClick: () => insertMention(p),
+                className: "py-1.5",
+                children: [
+                  i === pick && /* @__PURE__ */ jsx7(Glide, { id: `${id}-people-glide`, still }),
+                  p.avatar ? /* @__PURE__ */ jsx7(
+                    "img",
+                    {
+                      src: p.avatar,
+                      alt: "",
+                      className: "relative size-7 rounded-full object-cover"
+                    }
+                  ) : /* @__PURE__ */ jsx7("span", { className: "relative grid size-7 place-items-center rounded-full bg-[#242423]/[0.07] text-[12px] font-semibold", children: initials(p.name) }),
+                  /* @__PURE__ */ jsxs6("span", { className: "relative min-w-0", children: [
+                    /* @__PURE__ */ jsx7("span", { className: "block truncate text-[14px] font-medium leading-5", children: p.name }),
+                    p.title && /* @__PURE__ */ jsx7("span", { className: "block truncate text-[12px] leading-4 text-[#242423]/50", children: p.title })
+                  ] })
+                ]
+              },
+              p.id
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ jsx7("span", { role: "status", "aria-live": "polite", className: "sr-only", children: isRecording ? "Recording a voice note." : thinking ? "Polishing your message." : result === "schedule" ? `Message scheduled for ${sentAt ? whenText(sentAt) : "later"}.` : result ? "Message sent." : "" })
+      ]
+    }
+  );
+});
+
+export {
+  MessageComposer
+};