@marktiderman/genesis-chat 0.0.0-stage → 0.1.1

package/dist/web.js

@@ -0,0 +1,2405 @@
+import { useChat, useInbox, useConversation, useMessageActions, usePins, useFileUrls } from './chunk-27UTR5FW.js';
+import { previewText, summarizeReactions, activityLine, itemSender, startsDay, dayLabel, itemTime, startsGroup, parseMentions } from './chunk-SAY24E6V.js';
+import { formatDuration, nextPlaybackRate, CHAT_LIMITS, fileExtension, waveformPeaks, recordingLimitMs, isAllowedExtension, attachmentKindFor, randomId, ChatError } from './chunk-JQXZUEEL.js';
+import { createContext, useRef, Fragment, useState, useEffect, useCallback, useImperativeHandle, useMemo, useLayoutEffect, useContext } from 'react';
+import { MessageSquare, Pin, BellOff, AtSign, Pause, Play, Paperclip, ChevronLeft, ChevronRight, FileText, Download, Lock, Ban, AlertCircle, Clock, Reply, Copy, Pencil, PinOff, Bookmark, Flag, Trash2, SmilePlus, MoreHorizontal, Mic, X, SendHorizontal, ArrowDown, ImagePlus, Link2, ArrowLeft } from 'lucide-react';
+import { Skeleton, cn, EmptyState, Button, UserAvatar, Badge, Collapsible, CollapsibleTrigger, CollapsibleContent, Dialog, DialogContent, VisuallyHidden, DialogTitle, DialogDescription, Spinner, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuSeparator, ContextMenuItem, Tooltip, Textarea, Popover, PopoverTrigger, PopoverContent, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuItem, toast, Alert, AlertDescription, Toggle, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DialogHeader, RadioGroup, RadioGroupItem, Label, DialogFooter, Split } from '@marktiderman/genesis-ui';
+import { renderSlot } from '@marktiderman/genesis-core/slots';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+
+// src/web/format.ts
+function clockTime(iso, locale) {
+  return new Date(iso).toLocaleTimeString(locale, { hour: "numeric", minute: "2-digit" });
+}
+function relativeTime(iso, now = /* @__PURE__ */ new Date(), locale) {
+  if (!iso) return "";
+  const d = new Date(iso);
+  const diff = now.getTime() - d.getTime();
+  if (diff < 6e4) return "now";
+  if (diff < 36e5) return `${Math.floor(diff / 6e4)}m`;
+  const startOf = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+  const days = Math.round((startOf(now) - startOf(d)) / 864e5);
+  if (days === 0) return clockTime(iso, locale);
+  if (days === 1) return "Yesterday";
+  if (days > 1 && days < 7) return d.toLocaleDateString(locale, { weekday: "short" });
+  return d.toLocaleDateString(locale, {
+    day: "numeric",
+    month: "short",
+    year: d.getFullYear() === now.getFullYear() ? void 0 : "numeric"
+  });
+}
+function formatBytes(bytes) {
+  if (bytes == null || !Number.isFinite(bytes)) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+function messageLabel(message, sender, locale) {
+  const what = previewText(message.body, message.attachments[0]?.kind ?? null, Boolean(message.deletedAt)) || "Message";
+  const extra = [message.visibility === "observers" ? "internal note" : null, message.editedAt && !message.deletedAt ? "edited" : null].filter(Boolean);
+  return `${sender}, ${clockTime(message.createdAt, locale)}: ${what}${extra.length ? ` (${extra.join(", ")})` : ""}`;
+}
+function DefaultEmpty({ archived }) {
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      icon: MessageSquare,
+      title: archived ? "No archived conversations" : "No conversations yet",
+      description: archived ? void 0 : "When someone messages you, it shows up here."
+    }
+  );
+}
+function inboxTitle(item, resolveUser, fallback) {
+  if (item.title) return item.title;
+  if (item.otherUserId) return resolveUser(item.otherUserId).name;
+  return fallback?.(item) ?? "Conversation";
+}
+function ChatInbox({ resolveUser, onSelect, selectedId, kind, archived = false, fallbackTitle, slots, className, ...rest }) {
+  const { userId: me } = useChat();
+  const { items, isLoading, error, refetch } = useInbox({ kind, archived });
+  const list = useRef(null);
+  const onKeyDown = (e) => {
+    const buttons = Array.from(list.current?.querySelectorAll("button[data-inbox-row]") ?? []);
+    const at = buttons.indexOf(document.activeElement);
+    const to = e.key === "ArrowDown" ? Math.min(buttons.length - 1, at + 1) : e.key === "ArrowUp" ? Math.max(0, at - 1) : e.key === "Home" ? 0 : e.key === "End" ? buttons.length - 1 : -2;
+    if (to === -2 || buttons.length === 0) return;
+    e.preventDefault();
+    buttons[to < 0 ? 0 : to]?.focus();
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", className), "aria-busy": true, "aria-label": "Loading conversations", "data-testid": "genesis-chat-inbox-loading", children: Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-3 py-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "size-10 shrink-0 rounded-full" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-2/5" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-4/5" })
+      ] })
+    ] }, i)) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: MessageSquare,
+        title: "Couldn't load your conversations",
+        description: "Check your connection and try again.",
+        action: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => void refetch(), children: "Try again" })
+      }
+    ) });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className, children: renderSlot(DefaultEmpty, slots?.empty, { archived }) });
+  }
+  return /* @__PURE__ */ jsx("nav", { "aria-label": rest["aria-label"] ?? "Conversations", className: cn("min-h-0", className), "data-testid": "genesis-chat-inbox", children: /* @__PURE__ */ jsx("ul", { ref: list, className: "flex flex-col", onKeyDown, children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(InboxRow, { item, me, resolveUser, fallbackTitle, selected: item.conversationId === selectedId, onSelect }) }, item.conversationId)) }) });
+}
+function InboxRow({ item, me, resolveUser, fallbackTitle, selected, onSelect }) {
+  const title = inboxTitle(item, resolveUser, fallbackTitle);
+  const other = item.otherUserId ? resolveUser(item.otherUserId) : null;
+  const last = item.lastMessage;
+  const unread = item.unread > 0;
+  let preview = last ? previewText(last.body, last.attachment, last.deleted) : "";
+  if (last && last.kind !== "system" && !last.deleted && last.senderId) {
+    if (last.senderId === me) preview = `You: ${preview}`;
+    else if (!item.otherUserId && item.memberCount > 2) preview = `${resolveUser(last.senderId).name}: ${preview}`;
+  }
+  const time = relativeTime(item.lastMessageAt ?? last?.createdAt);
+  const count = item.unread >= 99 ? "99+" : String(item.unread);
+  const label = [
+    title,
+    unread ? `${count} unread` : null,
+    item.mentioned ? "you were mentioned" : null,
+    item.muted ? "muted" : null,
+    item.pinned ? "pinned" : null,
+    preview || null,
+    time || null
+  ].filter(Boolean).join(", ");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-inbox-row": true,
+      "aria-current": selected ? "true" : void 0,
+      "aria-label": label,
+      onClick: () => onSelect(item.conversationId),
+      className: cn(
+        "flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        selected && "bg-accent"
+      ),
+      "data-testid": `genesis-chat-inbox-row-${item.conversationId}`,
+      children: [
+        /* @__PURE__ */ jsx(UserAvatar, { name: title, src: other?.avatarUrl, className: "shrink-0" }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate text-sm", unread ? "font-semibold text-foreground" : "font-medium text-foreground"), children: title }),
+            /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-xs tabular-nums", unread && !item.muted ? "font-medium text-primary" : "text-muted-foreground"), children: time })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate text-sm", unread ? "text-foreground" : "text-muted-foreground"), children: preview || "\xA0" }),
+            item.pinned ? /* @__PURE__ */ jsx(Pin, { className: "size-3.5 shrink-0 text-muted-foreground" }) : null,
+            item.muted ? /* @__PURE__ */ jsx(BellOff, { className: "size-3.5 shrink-0 text-muted-foreground" }) : null,
+            item.mentioned ? /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(AtSign, { className: "size-3" }) }) : null,
+            unread ? /* @__PURE__ */ jsx(Badge, { variant: item.muted ? "muted" : "default", className: "h-5 min-w-5 shrink-0 justify-center rounded-full px-1.5 text-[11px] tabular-nums", children: count }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function isSafeHref(href) {
+  try {
+    const url = new URL(href);
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+var MENTION = /^@\[([^\]\n]{1,80})\]\(user:([0-9a-f-]{36})\)/i;
+var LINK = /^\[([^\]\n]{1,300})\]\(((?:[^()\s]|\([^()\s]*\)){1,2000})\)/;
+var BARE_URL = /^https?:\/\/[^\s<>"]+/i;
+var TRAILING_PUNCTUATION = /[.,;:!?)\]'"]+$/;
+function parseMarkdown(text) {
+  const out = [];
+  const lines = text.replace(/\r\n?/g, "\n").split("\n");
+  lines.forEach((line, i) => {
+    if (i > 0) out.push({ type: "break" });
+    out.push(...parseInline(line, 0));
+  });
+  return mergeText(out);
+}
+function parseInline(src, depth) {
+  const out = [];
+  let text = "";
+  const flush = () => {
+    if (text) out.push({ type: "text", text });
+    text = "";
+  };
+  let i = 0;
+  while (i < src.length) {
+    const ch = src[i];
+    const rest = src.slice(i);
+    const prev = i > 0 ? src[i - 1] : "";
+    if (ch === "\\" && i + 1 < src.length && /[*_`[\]@\\]/.test(src[i + 1])) {
+      text += src[i + 1];
+      i += 2;
+      continue;
+    }
+    if (ch === "`") {
+      const end = src.indexOf("`", i + 1);
+      if (end > i + 1) {
+        flush();
+        out.push({ type: "code", text: src.slice(i + 1, end) });
+        i = end + 1;
+        continue;
+      }
+    }
+    if (ch === "@") {
+      const m = MENTION.exec(rest);
+      if (m) {
+        flush();
+        out.push({ type: "mention", name: m[1], userId: m[2].toLowerCase() });
+        i += m[0].length;
+        continue;
+      }
+    }
+    if (ch === "[") {
+      const m = LINK.exec(rest);
+      if (m) {
+        flush();
+        const label = depth < 3 ? parseInline(m[1], depth + 1) : [{ type: "text", text: m[1] }];
+        if (isSafeHref(m[2])) out.push({ type: "link", href: m[2], children: label });
+        else out.push(...label);
+        i += m[0].length;
+        continue;
+      }
+    }
+    if ((ch === "h" || ch === "H") && !/[\w/]/.test(prev)) {
+      const m = BARE_URL.exec(rest);
+      if (m) {
+        const url = m[0].replace(TRAILING_PUNCTUATION, "");
+        if (isSafeHref(url)) {
+          flush();
+          out.push({ type: "link", href: url, children: [{ type: "text", text: url }] });
+          i += url.length;
+          continue;
+        }
+      }
+    }
+    if ((ch === "*" || ch === "_") && depth < 3) {
+      const double = src[i + 1] === ch;
+      const marker = double ? ch + ch : ch;
+      const opens = ch === "*" || !/\w/.test(prev);
+      const after = src[i + marker.length];
+      if (opens && after && after !== " " && after !== ch) {
+        const end = findClose(src, i + marker.length, marker);
+        if (end > 0) {
+          flush();
+          const inner = parseInline(src.slice(i + marker.length, end), depth + 1);
+          out.push(double ? { type: "bold", children: inner } : { type: "italic", children: inner });
+          i = end + marker.length;
+          continue;
+        }
+      }
+    }
+    text += ch;
+    i += 1;
+  }
+  flush();
+  return out;
+}
+function findClose(src, from, marker) {
+  let j = from;
+  while (j < src.length) {
+    const k = src.indexOf(marker, j);
+    if (k < 0) return -1;
+    const before = src[k - 1];
+    const next = src[k + marker.length];
+    const doubled = marker.length === 1 && next === marker;
+    const edge = marker[0] !== "_" || !next || !/\w/.test(next);
+    if (k > from && before !== " " && !doubled && edge) return k;
+    j = k + (doubled ? 2 : 1);
+  }
+  return -1;
+}
+function mergeText(nodes) {
+  const out = [];
+  for (const n of nodes) {
+    const last = out[out.length - 1];
+    if (n.type === "text" && last?.type === "text") last.text += n.text;
+    else out.push(n);
+  }
+  return out;
+}
+function ChatMarkdown({ text, renderMention, me, tone = "default", className }) {
+  const nodes = parseMarkdown(text);
+  return /* @__PURE__ */ jsx("span", { className: cn("whitespace-pre-wrap break-words [overflow-wrap:anywhere]", className), children: renderNodes(nodes, { renderMention, me, tone }) });
+}
+function renderNodes(nodes, opts) {
+  return nodes.map((n, i) => {
+    switch (n.type) {
+      case "text":
+        return /* @__PURE__ */ jsx(Fragment, { children: n.text }, i);
+      case "break":
+        return /* @__PURE__ */ jsx("br", {}, i);
+      case "bold":
+        return /* @__PURE__ */ jsx("strong", { className: "font-semibold", children: renderNodes(n.children, opts) }, i);
+      case "italic":
+        return /* @__PURE__ */ jsx("em", { children: renderNodes(n.children, opts) }, i);
+      case "code":
+        return /* @__PURE__ */ jsx(
+          "code",
+          {
+            className: cn(
+              "rounded px-1 py-0.5 font-mono text-[0.85em]",
+              opts.tone === "primary" ? "bg-primary-foreground/15" : "bg-background/70"
+            ),
+            children: n.text
+          },
+          i
+        );
+      case "link":
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: n.href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: cn("underline underline-offset-2", opts.tone === "primary" ? "text-primary-foreground" : "text-primary"),
+            children: renderNodes(n.children, opts)
+          },
+          i
+        );
+      case "mention": {
+        if (opts.renderMention) return /* @__PURE__ */ jsx(Fragment, { children: opts.renderMention(n) }, i);
+        const mine = opts.me && n.userId === opts.me.toLowerCase();
+        return /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-mention": n.userId,
+            className: cn(
+              "rounded px-1 font-medium",
+              opts.tone === "primary" ? "bg-primary-foreground/20 text-primary-foreground" : mine ? "bg-primary/20 text-primary" : "bg-primary/10 text-primary"
+            ),
+            children: [
+              "@",
+              n.name
+            ]
+          },
+          i
+        );
+      }
+    }
+  });
+}
+var playing = null;
+var BARS = 48;
+function resample(peaks, n = BARS) {
+  if (!peaks || peaks.length === 0) return new Array(n).fill(12);
+  if (peaks.length === n) return peaks;
+  return Array.from({ length: n }, (_, i) => peaks[Math.min(peaks.length - 1, Math.floor(i / n * peaks.length))] ?? 0);
+}
+function VoiceNote({ src, durationMs, waveform, transcript, transcriptStatus, tone = "default", className }) {
+  const audio = useRef(null);
+  const [isPlaying, setPlaying] = useState(false);
+  const [current, setCurrent] = useState(0);
+  const [duration, setDuration] = useState((durationMs ?? 0) / 1e3);
+  const [rate, setRate] = useState(1);
+  const bars = resample(waveform);
+  const progress = duration > 0 ? Math.min(1, current / duration) : 0;
+  useEffect(() => {
+    const el = audio.current;
+    if (!el) return;
+    const onPlay = () => {
+      if (playing && playing !== el) playing.pause();
+      playing = el;
+      setPlaying(true);
+    };
+    const onPause = () => {
+      if (playing === el) playing = null;
+      setPlaying(false);
+    };
+    const onTime = () => setCurrent(el.currentTime);
+    const onMeta = () => {
+      if (Number.isFinite(el.duration) && el.duration > 0) setDuration(el.duration);
+    };
+    const onEnded = () => {
+      setPlaying(false);
+      setCurrent(0);
+    };
+    el.addEventListener("play", onPlay);
+    el.addEventListener("pause", onPause);
+    el.addEventListener("timeupdate", onTime);
+    el.addEventListener("loadedmetadata", onMeta);
+    el.addEventListener("durationchange", onMeta);
+    el.addEventListener("ended", onEnded);
+    return () => {
+      el.removeEventListener("play", onPlay);
+      el.removeEventListener("pause", onPause);
+      el.removeEventListener("timeupdate", onTime);
+      el.removeEventListener("loadedmetadata", onMeta);
+      el.removeEventListener("durationchange", onMeta);
+      el.removeEventListener("ended", onEnded);
+      if (playing === el) playing = null;
+    };
+  }, []);
+  useEffect(() => {
+    if (audio.current) audio.current.playbackRate = rate;
+  }, [rate]);
+  const toggle = () => {
+    const el = audio.current;
+    if (!el || !src) return;
+    if (el.paused) {
+      el.playbackRate = rate;
+      void Promise.resolve(el.play?.()).catch(() => setPlaying(false));
+    } else el.pause();
+  };
+  const seekTo = (fraction) => {
+    const el = audio.current;
+    const f = Math.max(0, Math.min(1, fraction));
+    if (el && duration > 0) {
+      el.currentTime = f * duration;
+      setCurrent(f * duration);
+    }
+  };
+  const onBarsClick = (e) => {
+    const box = e.currentTarget.getBoundingClientRect();
+    if (box.width > 0) seekTo((e.clientX - box.left) / box.width);
+  };
+  const onBarsKey = (e) => {
+    if (duration <= 0) return;
+    const step = 5 / duration;
+    const keys = { ArrowRight: progress + step, ArrowUp: progress + step, ArrowLeft: progress - step, ArrowDown: progress - step, Home: 0, End: 1 };
+    if (e.key in keys) {
+      e.preventDefault();
+      seekTo(keys[e.key]);
+    }
+  };
+  const shown = isPlaying || current > 0 ? current * 1e3 : duration * 1e3;
+  const primary = tone === "primary";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-[220px] max-w-full flex-col gap-1", className), "data-testid": "genesis-chat-voice", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon",
+          variant: primary ? "secondary" : "default",
+          className: "h-9 w-9 shrink-0 rounded-full",
+          onClick: toggle,
+          disabled: !src,
+          "aria-label": isPlaying ? "Pause voice message" : "Play voice message",
+          "data-testid": "genesis-chat-voice-play",
+          children: isPlaying ? /* @__PURE__ */ jsx(Pause, {}) : /* @__PURE__ */ jsx(Play, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "slider",
+          tabIndex: 0,
+          "aria-label": "Position",
+          "aria-valuemin": 0,
+          "aria-valuemax": Math.round(duration),
+          "aria-valuenow": Math.round(current),
+          "aria-valuetext": `${formatDuration(current * 1e3)} of ${formatDuration(duration * 1e3)}`,
+          className: "flex h-8 flex-1 cursor-pointer items-center gap-[2px] rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          onClick: onBarsClick,
+          onKeyDown: onBarsKey,
+          children: bars.map((peak, i) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "w-[3px] flex-1 rounded-full transition-colors",
+                (i + 0.5) / bars.length <= progress ? primary ? "bg-primary-foreground" : "bg-primary" : primary ? "bg-primary-foreground/40" : "bg-muted-foreground/40"
+              ),
+              style: { height: `${Math.max(12, peak)}%` }
+            },
+            i
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          className: cn("h-7 shrink-0 rounded-full px-2 text-xs tabular-nums", primary && "text-primary-foreground hover:bg-primary-foreground/15 hover:text-primary-foreground"),
+          onClick: () => setRate((r) => nextPlaybackRate(r)),
+          "aria-label": `Playback speed ${rate}\xD7`,
+          "data-testid": "genesis-chat-voice-rate",
+          children: [
+            rate,
+            "\xD7"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("pl-11 text-xs tabular-nums", primary ? "text-primary-foreground/80" : "text-muted-foreground"), children: formatDuration(shown) }),
+    transcriptStatus === "pending" ? /* @__PURE__ */ jsx("div", { className: cn("pl-11 text-xs italic", primary ? "text-primary-foreground/80" : "text-muted-foreground"), children: "Transcribing\u2026" }) : transcript ? /* @__PURE__ */ jsxs(Collapsible, { className: "pl-11", children: [
+      /* @__PURE__ */ jsx(CollapsibleTrigger, { className: cn("text-xs font-medium underline-offset-2 hover:underline", primary ? "text-primary-foreground" : "text-primary"), children: "Transcript" }),
+      /* @__PURE__ */ jsx(CollapsibleContent, { className: "pt-1 text-sm", children: transcript })
+    ] }) : null,
+    /* @__PURE__ */ jsx("audio", { ref: audio, src: src ?? void 0, preload: "metadata", className: "hidden" })
+  ] });
+}
+function toAttachmentView(a, urls) {
+  return {
+    key: a.id,
+    kind: a.kind,
+    url: (a.path ? urls[a.path] : null) ?? (a.provider === "external" ? a.url : null) ?? (a.kind === "link" ? a.url : null),
+    posterUrl: a.posterPath ? urls[a.posterPath] ?? null : null,
+    name: a.name,
+    mime: a.mime,
+    bytes: a.bytes,
+    width: a.width,
+    height: a.height,
+    durationMs: a.durationMs,
+    waveform: a.waveform,
+    transcript: a.transcript,
+    transcriptStatus: a.transcriptStatus,
+    pending: a.status === "pending",
+    attachment: a
+  };
+}
+function GenericAttachment({ attachment: attachment2, url }) {
+  const label = attachment2.name ?? attachment2.kind.charAt(0).toUpperCase() + attachment2.kind.slice(1);
+  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(Paperclip, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "block text-xs capitalize text-muted-foreground", children: attachment2.kind })
+    ] })
+  ] });
+  return url && isSafeHref(url) ? /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-2 rounded-lg border bg-background p-2 text-foreground hover:bg-accent", children: body }) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 rounded-lg border bg-background p-2 text-foreground", children: body });
+}
+function Uploading({ className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 flex items-center justify-center bg-background/40", className), "aria-label": "Uploading", role: "status", children: /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "text-foreground" }) });
+}
+function ImageGrid({ images, className }) {
+  const [open, setOpen] = useState(null);
+  const shown = images.slice(0, 4);
+  const more = images.length - shown.length;
+  const cols = shown.length === 1 ? "grid-cols-1" : "grid-cols-2";
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx("div", { className: cn("grid w-[min(18rem,100%)] gap-1 overflow-hidden rounded-xl", cols, className), "data-testid": "genesis-chat-images", children: shown.map((img, i) => {
+      const tall = shown.length === 3 && i === 0;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "relative block overflow-hidden bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            shown.length === 1 ? "max-h-80" : "aspect-square",
+            tall && "row-span-2 aspect-auto"
+          ),
+          onClick: () => setOpen(i),
+          "aria-label": `Open photo${img.name ? ` ${img.name}` : ""}`,
+          children: [
+            img.url ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: img.url,
+                alt: img.name ?? "Photo",
+                loading: "lazy",
+                className: cn("h-full w-full object-cover", img.pending && "opacity-70"),
+                width: img.width ?? void 0,
+                height: img.height ?? void 0
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "block h-full min-h-24 w-full animate-pulse bg-muted" }),
+            img.pending ? /* @__PURE__ */ jsx(Uploading, {}) : null,
+            more > 0 && i === shown.length - 1 ? /* @__PURE__ */ jsxs("span", { className: "absolute inset-0 flex items-center justify-center bg-foreground/50 text-xl font-semibold text-background", children: [
+              "+",
+              more
+            ] }) : null
+          ]
+        },
+        img.key
+      );
+    }) }),
+    /* @__PURE__ */ jsx(Lightbox, { images, index: open, onIndexChange: setOpen })
+  ] });
+}
+function Lightbox({ images, index, onIndexChange }) {
+  const img = index === null ? null : images[index];
+  const go = useCallback(
+    (delta) => {
+      if (index === null || images.length < 2) return;
+      onIndexChange((index + delta + images.length) % images.length);
+    },
+    [images.length, index, onIndexChange]
+  );
+  const onKey = (e) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      go(1);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      go(-1);
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: img != null, onOpenChange: (o) => !o && onIndexChange(null), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[min(64rem,95vw)] border-0 bg-background p-2", onKeyDown: onKey, "data-testid": "genesis-chat-lightbox", children: [
+    /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: img?.name ?? "Photo" }),
+      /* @__PURE__ */ jsxs(DialogDescription, { children: [
+        "Photo ",
+        index === null ? 0 : index + 1,
+        " of ",
+        images.length,
+        ". Use the arrow keys for the others."
+      ] })
+    ] }),
+    img?.url ? /* @__PURE__ */ jsx("img", { src: img.url, alt: img.name ?? "Photo", className: "mx-auto max-h-[80vh] w-auto rounded-md object-contain" }) : null,
+    images.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => go(-1), "aria-label": "Previous photo", children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm tabular-nums text-muted-foreground", children: [
+        (index ?? 0) + 1,
+        " / ",
+        images.length
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => go(1), "aria-label": "Next photo", children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+    ] }) : null
+  ] }) });
+}
+function VideoAttachment({ view }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-[min(20rem,100%)] overflow-hidden rounded-xl bg-muted", "data-testid": "genesis-chat-video", children: [
+    view.url ? (
+      // eslint-disable-next-line jsx-a11y/media-has-caption -- transcripts are offered beside voice; video captions are the provider's
+      /* @__PURE__ */ jsx("video", { controls: true, playsInline: true, preload: "metadata", poster: view.posterUrl ?? void 0, src: view.url, className: "block max-h-80 w-full", "aria-label": view.name ?? "Video" })
+    ) : /* @__PURE__ */ jsx("span", { className: "block aspect-video w-full animate-pulse bg-muted" }),
+    view.pending ? /* @__PURE__ */ jsx(Uploading, {}) : null
+  ] });
+}
+function FileChip({ view, tone = "default" }) {
+  const primary = tone === "primary";
+  const ext = (view.name?.split(".").pop() ?? "").toUpperCase();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex w-[min(18rem,100%)] items-center gap-2 rounded-lg p-2", primary ? "bg-primary-foreground/15" : "border bg-background"),
+      "data-testid": "genesis-chat-file",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("relative flex size-9 shrink-0 items-center justify-center rounded-md", primary ? "bg-primary-foreground/20" : "bg-muted"), children: view.pending ? /* @__PURE__ */ jsx(Spinner, { size: "sm", className: primary ? "text-primary-foreground" : void 0 }) : /* @__PURE__ */ jsx(FileText, { className: "size-4", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: view.name ?? "File" }),
+          /* @__PURE__ */ jsxs("span", { className: cn("block text-xs", primary ? "text-primary-foreground/80" : "text-muted-foreground"), children: [
+            [ext, formatBytes(view.bytes)].filter(Boolean).join(" \xB7 "),
+            view.pending ? " \xB7 Uploading\u2026" : ""
+          ] })
+        ] }),
+        view.url && !view.pending ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            asChild: true,
+            size: "icon",
+            variant: "ghost",
+            className: cn("size-8 shrink-0", primary && "text-primary-foreground hover:bg-primary-foreground/15 hover:text-primary-foreground"),
+            children: /* @__PURE__ */ jsx("a", { href: view.url, download: view.name ?? true, target: "_blank", rel: "noopener noreferrer", "aria-label": `Download ${view.name ?? "file"}`, children: /* @__PURE__ */ jsx(Download, {}) })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function LinkAttachment({ view, tone }) {
+  if (!view.url || !isSafeHref(view.url)) return null;
+  let host = view.url;
+  try {
+    host = new URL(view.url).host;
+  } catch {
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: view.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cn("flex w-[min(18rem,100%)] items-center gap-2 rounded-lg p-2", tone === "primary" ? "bg-primary-foreground/15" : "border bg-background hover:bg-accent"),
+      children: [
+        /* @__PURE__ */ jsx(Link2, { className: "size-4 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: view.name ?? host }),
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-xs opacity-80", children: host })
+        ] })
+      ]
+    }
+  );
+}
+function MessageAttachments({ views, message, mine, tone, slot }) {
+  if (views.length === 0) return null;
+  const images = views.filter((v) => v.kind === "image");
+  const others = views.filter((v) => v.kind !== "image");
+  const Custom = slot === void 0 ? GenericAttachment : slot;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    images.length ? /* @__PURE__ */ jsx(ImageGrid, { images }) : null,
+    others.map((v) => {
+      switch (v.kind) {
+        case "voice":
+          return /* @__PURE__ */ jsx(
+            VoiceNote,
+            {
+              src: v.url,
+              durationMs: v.durationMs,
+              waveform: v.waveform,
+              transcript: v.transcript,
+              transcriptStatus: v.transcriptStatus,
+              tone
+            },
+            v.key
+          );
+        case "video":
+          return /* @__PURE__ */ jsx(VideoAttachment, { view: v }, v.key);
+        case "file":
+          return /* @__PURE__ */ jsx(FileChip, { view: v, tone }, v.key);
+        case "link":
+          return /* @__PURE__ */ jsx(LinkAttachment, { view: v, tone }, v.key);
+        default:
+          if (!v.attachment || !message) return /* @__PURE__ */ jsx(FileChip, { view: v, tone }, v.key);
+          return Custom ? /* @__PURE__ */ jsx(Custom, { attachment: v.attachment, message, url: v.url, mine }, v.key) : null;
+      }
+    })
+  ] });
+}
+var ThreadContext = createContext(null);
+function useThreadContext() {
+  const ctx = useContext(ThreadContext);
+  if (!ctx) throw new Error("Chat bubbles render inside <ChatThread>.");
+  return ctx;
+}
+var QUICK_REACTIONS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F64F}"];
+function pendingAsMessage(p) {
+  return {
+    id: `pending:${p.clientId}`,
+    conversationId: p.input.conversationId,
+    seq: Number.MAX_SAFE_INTEGER,
+    clientId: p.clientId,
+    senderId: p.senderId,
+    senderRole: "member",
+    kind: "text",
+    body: p.input.body ?? "",
+    mentions: p.input.mentions ?? [],
+    replyToId: p.input.replyToId ?? null,
+    threadRootId: p.input.threadRootId ?? null,
+    threadCount: 0,
+    threadLastAt: null,
+    topic: p.input.topic ?? null,
+    visibility: p.input.visibility ?? "everyone",
+    silent: Boolean(p.input.silent),
+    meta: {},
+    createdAt: p.createdAt,
+    editedAt: null,
+    deletedAt: null,
+    attachments: [],
+    reactions: []
+  };
+}
+function pendingViews(p) {
+  const files = p.files ?? [];
+  return files.map((f, i) => ({
+    key: `${p.clientId}:${i}`,
+    kind: f.meta?.kind ?? attachmentKindFor(f.contentType),
+    url: p.previews?.[i] ?? f.previewUrl ?? null,
+    posterUrl: null,
+    name: f.meta?.name ?? f.name,
+    mime: f.contentType,
+    bytes: f.meta?.bytes ?? (typeof Blob !== "undefined" && f.data instanceof Blob ? f.data.size : null),
+    width: f.meta?.width ?? null,
+    height: f.meta?.height ?? null,
+    durationMs: f.meta?.durationMs ?? null,
+    waveform: f.meta?.waveform ?? null,
+    transcript: null,
+    transcriptStatus: null,
+    pending: p.status === "sending"
+  }));
+}
+function returnFocus(e, keepFocus) {
+  const next = keepFocus.current;
+  if (next) {
+    e.preventDefault();
+    keepFocus.current = null;
+    next();
+  }
+}
+function plainText(body) {
+  return body.replace(/@\[([^\]]+)\]\(user:[0-9a-f-]{36}\)/gi, "@$1");
+}
+function MessageRow({ item, startsGroup: startsGroup2, className }) {
+  const ctx = useThreadContext();
+  const keepFocus = useRef(null);
+  const pending = item.type === "pending" ? item.pending : null;
+  const message = item.type === "message" ? item.message : pendingAsMessage(item.pending);
+  if (message.kind === "system") {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex justify-center px-4 py-1", className), role: "note", "data-testid": "genesis-chat-system", children: /* @__PURE__ */ jsx("span", { className: "max-w-[85%] rounded-full bg-muted px-3 py-1 text-center text-xs text-muted-foreground", children: /* @__PURE__ */ jsx(ChatMarkdown, { text: message.body, me: ctx.me }) }) });
+  }
+  const mine = message.senderId === ctx.me;
+  const sender = message.senderId ? ctx.resolveUser(message.senderId) : { name: "Someone" };
+  const deleted = Boolean(message.deletedAt);
+  const note = message.visibility === "observers";
+  const showHeader = ctx.isGroup && !mine && startsGroup2;
+  const tone = mine && !note && !deleted ? "primary" : "default";
+  const views = pending ? pendingViews(pending) : message.attachments.map((a) => toAttachmentView(a, ctx.urls));
+  const editing = ctx.editingId === message.id;
+  const reactions = pending ? [] : summarizeReactions(message, ctx.me);
+  const highlighted = ctx.highlightedId === message.id;
+  const actionable = !pending && !deleted;
+  const bubble = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative min-w-0 max-w-full rounded-2xl px-3 py-2 text-sm leading-relaxed shadow-sm transition-shadow",
+        tone === "primary" ? "bg-primary text-primary-foreground" : "bg-muted text-foreground",
+        mine ? startsGroup2 ? "rounded-tr-md" : "" : startsGroup2 ? "rounded-tl-md" : "",
+        note && "border border-warning/50 bg-warning/15 text-foreground",
+        deleted && "border border-dashed bg-transparent text-muted-foreground shadow-none",
+        highlighted && "ring-2 ring-ring ring-offset-2 ring-offset-background",
+        pending?.status === "failed" && "opacity-80"
+      ),
+      "data-testid": deleted ? "genesis-chat-deleted" : note ? "genesis-chat-note" : mine ? "genesis-chat-mine" : "genesis-chat-theirs",
+      children: [
+        note ? /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-1 text-xs font-semibold text-foreground/80", children: [
+          /* @__PURE__ */ jsx(Lock, { className: "size-3", "aria-hidden": true }),
+          " Internal note"
+        ] }) : null,
+        deleted ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 italic", children: [
+          /* @__PURE__ */ jsx(Ban, { className: "size-3.5", "aria-hidden": true }),
+          " Message deleted"
+        ] }) : editing ? /* @__PURE__ */ jsx(EditBox, { message }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          message.replyToId ? /* @__PURE__ */ jsx(ReplyQuote, { id: message.replyToId, tone }) : null,
+          views.length ? /* @__PURE__ */ jsx("div", { className: cn(message.body ? "mb-1.5" : ""), children: /* @__PURE__ */ jsx(MessageAttachments, { views, message: pending ? void 0 : message, mine, tone, slot: ctx.attachmentSlot }) }) : null,
+          message.body ? /* @__PURE__ */ jsx(ChatMarkdown, { text: message.body, me: ctx.me, tone }) : null,
+          /* @__PURE__ */ jsx(Meta, { message, pending, tone })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      id: `genesis-chat-msg-${message.id}`,
+      "data-message-id": pending ? void 0 : message.id,
+      "aria-label": messageLabel(message, mine ? "You" : sender.name),
+      className: cn("group/msg flex gap-2 px-3", mine ? "flex-row-reverse" : "flex-row", startsGroup2 ? "mt-2" : "mt-0.5", className),
+      "data-testid": pending ? `genesis-chat-pending-${pending.status}` : "genesis-chat-message",
+      children: [
+        ctx.isGroup && !mine ? showHeader ? /* @__PURE__ */ jsx(UserAvatar, { name: sender.name, src: sender.avatarUrl, size: "sm", className: "mt-5" }) : /* @__PURE__ */ jsx("span", { className: "w-8 shrink-0", "aria-hidden": true }) : null,
+        /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 max-w-[min(78%,36rem)] flex-col", mine ? "items-end" : "items-start"), children: [
+          showHeader ? /* @__PURE__ */ jsx("span", { className: "mb-0.5 px-3 text-xs font-medium text-muted-foreground", children: sender.name }) : null,
+          /* @__PURE__ */ jsxs("div", { className: cn("flex max-w-full items-center gap-1", mine ? "flex-row-reverse" : "flex-row"), children: [
+            actionable ? /* @__PURE__ */ jsxs(ContextMenu, { children: [
+              /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: bubble }),
+              /* @__PURE__ */ jsx(ContextMenuContent, { className: "w-56", onCloseAutoFocus: (e) => returnFocus(e, keepFocus), children: /* @__PURE__ */ jsx(ActionItems, { message, mine, keepFocus, Item: ContextMenuItem, Separator: ContextMenuSeparator }) })
+            ] }) : bubble,
+            actionable && !editing ? /* @__PURE__ */ jsx(HoverBar, { message, mine }) : null
+          ] }),
+          reactions.length ? /* @__PURE__ */ jsx("div", { className: cn("-mt-1 flex flex-wrap gap-1 px-2", mine ? "justify-end" : "justify-start"), "data-testid": "genesis-chat-reactions", children: reactions.map((r) => /* @__PURE__ */ jsx(Tooltip, { content: r.userIds.map((u) => u === ctx.me ? "You" : ctx.resolveUser(u).name).join(", "), children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": r.mine,
+              "aria-label": `${r.emoji} ${r.count}${r.mine ? ", including you" : ""}. ${r.mine ? "Remove" : "Add"} your reaction`,
+              onClick: () => ctx.react(message, r.emoji, !r.mine),
+              disabled: !ctx.canPost,
+              className: cn(
+                "inline-flex h-6 items-center gap-1 rounded-full border bg-background px-2 text-xs shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none",
+                r.mine && "border-primary bg-primary/10 text-primary"
+              ),
+              "data-testid": `genesis-chat-reaction-${r.emoji}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: r.emoji }),
+                /* @__PURE__ */ jsx("span", { className: "tabular-nums", "aria-hidden": true, children: r.count })
+              ]
+            }
+          ) }, r.emoji)) }) : null,
+          !pending && message.threadCount > 0 && ctx.openThread ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "link", size: "sm", className: "h-6 px-2 text-xs", onClick: () => ctx.openThread?.(message), children: [
+            /* @__PURE__ */ jsx(MessageSquare, { className: "size-3", "aria-hidden": true }),
+            message.threadCount === 1 ? "1 reply" : `${message.threadCount} replies`
+          ] }) : null,
+          pending?.status === "failed" ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-1 text-xs text-destructive", role: "alert", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5", "aria-hidden": true }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Not sent",
+              pending.error && pending.error !== "Not sent" ? `: ${pending.error}` : ""
+            ] }),
+            /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-6 px-2 text-xs", onClick: () => ctx.retry(pending.clientId), "data-testid": "genesis-chat-retry", children: "Retry" }),
+            /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-6 px-2 text-xs text-destructive hover:text-destructive", onClick: () => ctx.discard(pending.clientId), "data-testid": "genesis-chat-discard", children: "Delete" })
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+function Meta({ message, pending, tone }) {
+  const muted = tone === "primary" ? "text-primary-foreground/75" : "text-muted-foreground";
+  return /* @__PURE__ */ jsxs("span", { className: cn("float-right ml-3 mt-1 flex translate-y-1 items-center gap-1 text-[11px] leading-none", muted), children: [
+    message.editedAt ? /* @__PURE__ */ jsx("span", { children: "edited" }) : null,
+    pending?.status === "sending" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(Clock, { className: "size-3", "aria-hidden": true }),
+      /* @__PURE__ */ jsx("span", { children: "Sending\u2026" })
+    ] }) : pending?.status === "failed" ? /* @__PURE__ */ jsx(AlertCircle, { className: "size-3", "aria-label": "Not sent" }) : /* @__PURE__ */ jsx("time", { dateTime: message.createdAt, children: clockTime(message.createdAt) })
+  ] });
+}
+function ReplyQuote({ id, tone }) {
+  const ctx = useThreadContext();
+  const original = ctx.byId.get(id);
+  const who = original?.senderId ? original.senderId === ctx.me ? "You" : ctx.resolveUser(original.senderId).name : null;
+  const text = original ? previewText(original.body, original.attachments[0]?.kind ?? null, Boolean(original.deletedAt)) : "Earlier message";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => ctx.jumpTo(id),
+      className: cn(
+        "mb-1.5 block w-full min-w-0 rounded-md border-l-4 px-2 py-1 text-left text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        tone === "primary" ? "border-primary-foreground/60 bg-primary-foreground/15" : "border-primary bg-background/60"
+      ),
+      "aria-label": `Replying to ${who ?? "a message"}: ${text}. Show it`,
+      "data-testid": "genesis-chat-reply-quote",
+      children: [
+        who ? /* @__PURE__ */ jsx("span", { className: "block font-semibold", children: who }) : null,
+        /* @__PURE__ */ jsx("span", { className: "line-clamp-2 opacity-80", children: text })
+      ]
+    }
+  );
+}
+function EditBox({ message }) {
+  const ctx = useThreadContext();
+  const [value, setValue] = useState(message.body);
+  const [busy, setBusy] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    el.setSelectionRange(el.value.length, el.value.length);
+  }, []);
+  const save = async () => {
+    const body = value.trim();
+    if (!body || body === message.body) return ctx.startEdit(null);
+    setBusy(true);
+    try {
+      await ctx.saveEdit(message, body);
+      ctx.startEdit(null);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-[16rem] flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        ref,
+        value,
+        onChange: (e) => setValue(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            ctx.startEdit(null);
+          } else if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+            e.preventDefault();
+            void save();
+          }
+        },
+        id: `genesis-chat-edit-${message.id}`,
+        "aria-label": "Edit message",
+        className: "min-h-[60px] resize-none bg-background text-foreground"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => ctx.startEdit(null), className: cn("h-7", "text-current"), children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: () => void save(), loading: busy, className: "h-7", children: "Save" })
+    ] })
+  ] });
+}
+function ActionItems({ message, mine, keepFocus, Item, Separator }) {
+  const ctx = useThreadContext();
+  const pinned = ctx.pins.has(message.id);
+  const canDelete = mine || ctx.canModerate;
+  const canEdit = mine && message.kind === "text" && message.body.length > 0;
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    ctx.canPost ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-between gap-0.5 px-1 py-1", role: "group", "aria-label": "React", children: ctx.quickReactions.map((emoji) => {
+        const on = message.reactions.some((r) => r.emoji === emoji && r.userId === ctx.me);
+        return /* @__PURE__ */ jsx(
+          Item,
+          {
+            className: cn("justify-center rounded-full px-2 text-lg", on && "bg-primary/10"),
+            onSelect: () => ctx.react(message, emoji, !on),
+            "aria-label": `${on ? "Remove" : "React with"} ${emoji}`,
+            children: emoji
+          },
+          emoji
+        );
+      }) }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs(Item, { className: "gap-2", onSelect: () => {
+        keepFocus.current = ctx.focusComposer;
+        ctx.reply(message);
+      }, children: [
+        /* @__PURE__ */ jsx(Reply, { className: "size-4", "aria-hidden": true }),
+        " Reply"
+      ] })
+    ] }) : null,
+    message.body ? /* @__PURE__ */ jsxs(Item, { className: "gap-2", onSelect: () => ctx.copy(message), children: [
+      /* @__PURE__ */ jsx(Copy, { className: "size-4", "aria-hidden": true }),
+      " Copy text"
+    ] }) : null,
+    canEdit && ctx.canPost ? /* @__PURE__ */ jsxs(Item, { className: "gap-2", onSelect: () => {
+      keepFocus.current = () => document.getElementById(`genesis-chat-edit-${message.id}`)?.focus();
+      ctx.startEdit(message.id);
+    }, children: [
+      /* @__PURE__ */ jsx(Pencil, { className: "size-4", "aria-hidden": true }),
+      " Edit"
+    ] }) : null,
+    ctx.canPin ? /* @__PURE__ */ jsxs(Item, { className: "gap-2", onSelect: () => ctx.pin(message, !pinned), children: [
+      pinned ? /* @__PURE__ */ jsx(PinOff, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ jsx(Pin, { className: "size-4", "aria-hidden": true }),
+      " ",
+      pinned ? "Unpin" : "Pin"
+    ] }) : null,
+    /* @__PURE__ */ jsxs(Item, { className: "gap-2", onSelect: () => ctx.save(message), children: [
+      /* @__PURE__ */ jsx(Bookmark, { className: "size-4", "aria-hidden": true }),
+      " Save"
+    ] }),
+    !mine && message.senderId ? /* @__PURE__ */ jsxs(Item, { className: "gap-2", onSelect: () => ctx.askReport(message), children: [
+      /* @__PURE__ */ jsx(Flag, { className: "size-4", "aria-hidden": true }),
+      " Report"
+    ] }) : null,
+    canDelete ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs(Item, { onSelect: () => ctx.askDelete(message), className: "gap-2 text-destructive focus:text-destructive", children: [
+        /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": true }),
+        " Delete"
+      ] })
+    ] }) : null
+  ] });
+}
+function HoverBar({ message, mine }) {
+  const ctx = useThreadContext();
+  const keepFocus = useRef(null);
+  const [open, setOpen] = useState(null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity focus-within:opacity-100 group-hover/msg:opacity-100 [@media(hover:none)]:hidden",
+        open && "opacity-100",
+        mine ? "flex-row-reverse" : "flex-row"
+      ),
+      children: [
+        ctx.canPost ? /* @__PURE__ */ jsxs(Popover, { open: open === "react", onOpenChange: (o) => setOpen(o ? "react" : null), children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 rounded-full text-muted-foreground", "aria-label": "React", children: /* @__PURE__ */ jsx(SmilePlus, {}) }) }),
+          /* @__PURE__ */ jsx(PopoverContent, { side: "top", align: mine ? "end" : "start", className: "flex w-auto gap-0.5 rounded-full p-1", children: ctx.quickReactions.map((emoji) => {
+            const on = message.reactions.some((r) => r.emoji === emoji && r.userId === ctx.me);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cn("flex size-9 items-center justify-center rounded-full text-xl transition-transform hover:scale-125 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", on && "bg-primary/10"),
+                "aria-label": `${on ? "Remove" : "React with"} ${emoji}`,
+                "aria-pressed": on,
+                onClick: () => {
+                  ctx.react(message, emoji, !on);
+                  setOpen(null);
+                },
+                children: emoji
+              },
+              emoji
+            );
+          }) })
+        ] }) : null,
+        ctx.canPost ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 rounded-full text-muted-foreground", "aria-label": "Reply", onClick: () => ctx.reply(message), children: /* @__PURE__ */ jsx(Reply, {}) }) : null,
+        /* @__PURE__ */ jsxs(DropdownMenu, { open: open === "more", onOpenChange: (o) => setOpen(o ? "more" : null), children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 rounded-full text-muted-foreground", "aria-label": "More actions", "data-testid": "genesis-chat-more", children: /* @__PURE__ */ jsx(MoreHorizontal, {}) }) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: mine ? "end" : "start", className: "w-56", onCloseAutoFocus: (e) => returnFocus(e, keepFocus), children: /* @__PURE__ */ jsx(ActionItems, { message, mine, keepFocus, Item: DropdownMenuItem, Separator: DropdownMenuSeparator }) })
+        ] })
+      ]
+    }
+  );
+}
+var SAMPLE_MS = 100;
+function pickVoiceMimeType() {
+  if (typeof MediaRecorder === "undefined") return null;
+  for (const type of ["audio/webm;codecs=opus", "audio/mp4", "audio/webm"]) {
+    try {
+      if (MediaRecorder.isTypeSupported(type)) return type;
+    } catch {
+    }
+  }
+  return "";
+}
+function voiceFile(recording) {
+  return {
+    data: recording.blob,
+    name: recording.name,
+    contentType: recording.contentType,
+    previewUrl: typeof URL !== "undefined" && URL.createObjectURL ? URL.createObjectURL(recording.blob) : void 0,
+    meta: { kind: "voice", durationMs: recording.durationMs, waveform: recording.waveform, bytes: recording.blob.size }
+  };
+}
+function useVoiceRecorder(options = {}) {
+  const maxMs = options.maxMs ?? CHAT_LIMITS.recordingMs;
+  const [state, setState] = useState("idle");
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const [levels, setLevels] = useState([]);
+  const [error, setError] = useState(null);
+  const opts = useRef(options);
+  opts.current = options;
+  const session = useRef(null);
+  const cleanup = useCallback(() => {
+    const s = session.current;
+    if (!s) return;
+    clearInterval(s.timer);
+    for (const t of s.stream.getTracks()) t.stop();
+    void s.context?.close().catch(() => void 0);
+    session.current = null;
+  }, []);
+  const stop = useCallback(async () => {
+    const s = session.current;
+    if (!s) return null;
+    if (s.recorder.state !== "inactive") s.recorder.stop();
+    return s.done;
+  }, []);
+  const abandoned = useRef(false);
+  const cancel = useCallback(() => {
+    const s = session.current;
+    if (!s) {
+      abandoned.current = true;
+      setState((st) => st === "requesting" ? "idle" : st);
+      return;
+    }
+    s.discard = true;
+    if (s.recorder.state !== "inactive") s.recorder.stop();
+    else cleanup();
+  }, [cleanup]);
+  const start = useCallback(async () => {
+    if (session.current) return;
+    const mimeType = pickVoiceMimeType();
+    if (mimeType === null || typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) {
+      setState("unsupported");
+      setError("This browser can't record voice messages.");
+      return;
+    }
+    setState("requesting");
+    setError(null);
+    abandoned.current = false;
+    let stream;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true } });
+    } catch (e) {
+      const name = e?.name;
+      if (name === "NotAllowedError" || name === "SecurityError") {
+        setState("denied");
+        setError("Microphone access is blocked. Allow it for this site in your browser's settings to record voice messages.");
+      } else if (name === "NotFoundError") {
+        setState("error");
+        setError("No microphone was found.");
+      } else {
+        setState("error");
+        setError("The microphone couldn't be started.");
+      }
+      return;
+    }
+    if (abandoned.current) {
+      for (const t of stream.getTracks()) t.stop();
+      return;
+    }
+    let recorder;
+    try {
+      recorder = new MediaRecorder(stream, mimeType ? { mimeType } : void 0);
+    } catch {
+      for (const t of stream.getTracks()) t.stop();
+      setState("unsupported");
+      setError("This browser can't record voice messages.");
+      return;
+    }
+    let context = null;
+    let analyser = null;
+    try {
+      const Ctx = window.AudioContext ?? window.webkitAudioContext;
+      if (Ctx) {
+        context = new Ctx();
+        analyser = context.createAnalyser();
+        analyser.fftSize = 1024;
+        context.createMediaStreamSource(stream).connect(analyser);
+      }
+    } catch {
+      context = null;
+      analyser = null;
+    }
+    const buffer = analyser ? new Float32Array(analyser.fftSize) : null;
+    const chunks = [];
+    const samples = [];
+    const startedAt = Date.now();
+    let resolveDone;
+    const done = new Promise((r) => resolveDone = r);
+    const timer = setInterval(() => {
+      const s = session.current;
+      if (!s) return;
+      let level = 0;
+      if (analyser && buffer) {
+        analyser.getFloatTimeDomainData(buffer);
+        for (let i = 0; i < buffer.length; i++) level = Math.max(level, Math.abs(buffer[i]));
+      }
+      s.samples.push(level);
+      setLevels((prev) => [...prev, level].slice(-32));
+      const elapsed = Date.now() - s.startedAt;
+      setElapsedMs(elapsed);
+      opts.current.onTick?.();
+      if (elapsed >= maxMs && s.recorder.state === "recording") {
+        void stop().then((r) => r && opts.current.onLimit?.(r));
+      }
+    }, SAMPLE_MS);
+    recorder.ondataavailable = (e) => {
+      if (e.data && e.data.size > 0) chunks.push(e.data);
+    };
+    recorder.onstop = () => {
+      const s = session.current;
+      const discard = s?.discard ?? true;
+      const durationMs = Math.min(maxMs, Date.now() - startedAt);
+      const contentType = (recorder.mimeType || mimeType || "audio/webm").split(";")[0].trim();
+      cleanup();
+      setState("idle");
+      setElapsedMs(0);
+      setLevels([]);
+      if (discard || chunks.length === 0) {
+        resolveDone(null);
+        return;
+      }
+      const blob = new Blob(chunks, { type: contentType });
+      const ext = fileExtension("", contentType) || "webm";
+      resolveDone({
+        blob,
+        contentType,
+        name: `voice-${new Date(startedAt).toISOString().replace(/[:.]/g, "-")}.${ext}`,
+        durationMs,
+        waveform: waveformPeaks(samples, 48)
+      });
+    };
+    session.current = { recorder, stream, context, timer, chunks, samples, startedAt, mimeType: mimeType ?? "", discard: false, done };
+    recorder.start(250);
+    setElapsedMs(0);
+    setLevels([]);
+    setState("recording");
+  }, [cleanup, maxMs, stop]);
+  useEffect(() => () => {
+    const s = session.current;
+    if (s) {
+      s.discard = true;
+      try {
+        if (s.recorder.state !== "inactive") s.recorder.stop();
+      } catch {
+      }
+      clearInterval(s.timer);
+      for (const t of s.stream.getTracks()) t.stop();
+      void s.context?.close().catch(() => void 0);
+      session.current = null;
+    }
+  }, []);
+  return {
+    state,
+    recording: state === "recording",
+    elapsedMs,
+    maxMs,
+    /** The latest levels, 0–1, newest last: a live meter. */
+    levels,
+    error,
+    clearError: () => {
+      setError(null);
+      setState((s) => s === "denied" || s === "error" || s === "unsupported" ? "idle" : s);
+    },
+    start,
+    stop,
+    cancel
+  };
+}
+var isTouch = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse)").matches;
+var objectUrl = (f) => typeof URL !== "undefined" && typeof URL.createObjectURL === "function" ? URL.createObjectURL(f) : null;
+var revoke = (u) => {
+  if (u && typeof URL !== "undefined" && typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(u);
+};
+var MAX_HEIGHT = 160;
+function ChatComposer({
+  conversation: state,
+  replyTo,
+  onCancelReply,
+  resolveUser,
+  placeholder = "Message",
+  accessory,
+  onSent,
+  autoFocus,
+  className,
+  ref
+}) {
+  const { userId: me } = useChat();
+  const [text, setText] = useState("");
+  const [drafts, setDrafts] = useState([]);
+  const [internal, setInternal] = useState(false);
+  const textarea = useRef(null);
+  const picker = useRef(null);
+  const draftsRef = useRef(drafts);
+  draftsRef.current = drafts;
+  const recorder = useVoiceRecorder({
+    maxMs: recordingLimitMs(state.role),
+    onTick: state.signalRecording,
+    onLimit: (rec) => {
+      void sendVoice(rec);
+      toast.info(`Voice messages stop at ${formatDuration(recordingLimitMs(state.role))}. Sent.`);
+    }
+  });
+  useEffect(() => () => draftsRef.current.forEach((d) => revoke(d.previewUrl)), []);
+  const autosize = useCallback(() => {
+    const el = textarea.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
+  }, []);
+  useEffect(autosize, [text, autosize]);
+  useEffect(() => {
+    if (replyTo) textarea.current?.focus();
+  }, [replyTo]);
+  const addFiles = useCallback((list) => {
+    const files = Array.from(list);
+    if (files.length === 0) return;
+    const next = [];
+    let room = CHAT_LIMITS.attachmentsPerMessage - draftsRef.current.length;
+    for (const file of files) {
+      const ext = fileExtension(file.name, file.type);
+      if (!isAllowedExtension(ext)) {
+        toast.error(`${file.name} can't be sent`, { description: "Photos, videos, audio, PDFs and office documents can." });
+        continue;
+      }
+      const type = file.type || "application/octet-stream";
+      const kind = attachmentKindFor(type);
+      const limit = kind === "video" ? CHAT_LIMITS.videoBytes : CHAT_LIMITS.fileBytes;
+      if (file.size > limit) {
+        toast.error(`${file.name} is too big`, { description: `The limit is ${Math.round(limit / 1024 / 1024)} MB.` });
+        continue;
+      }
+      if (room <= 0) {
+        toast.error(`Up to ${CHAT_LIMITS.attachmentsPerMessage} files per message`);
+        break;
+      }
+      room -= 1;
+      next.push({ id: randomId(), file, kind, previewUrl: kind === "image" || kind === "video" ? objectUrl(file) : null });
+    }
+    if (next.length) setDrafts((d) => [...d, ...next]);
+  }, []);
+  const insertText = useCallback((value) => {
+    const el = textarea.current;
+    setText((t) => {
+      if (!el) return t + value;
+      const start = el.selectionStart ?? t.length;
+      const end = el.selectionEnd ?? t.length;
+      return t.slice(0, start) + value + t.slice(end);
+    });
+    el?.focus();
+  }, []);
+  useImperativeHandle(ref, () => ({ addFiles, insertText, focus: () => textarea.current?.focus() }), [addFiles, insertText]);
+  const removeDraft = (id) => setDrafts((d) => {
+    const gone = d.find((x) => x.id === id);
+    revoke(gone?.previewUrl ?? null);
+    return d.filter((x) => x.id !== id);
+  });
+  const common = () => ({
+    replyToId: replyTo?.id ?? null,
+    visibility: internal ? "observers" : "everyone"
+  });
+  const submit = () => {
+    const body = text.trim();
+    if (!body && drafts.length === 0) return;
+    if (body.length > CHAT_LIMITS.bodyChars) {
+      toast.error(`Messages can be up to ${CHAT_LIMITS.bodyChars.toLocaleString()} characters`);
+      return;
+    }
+    const files = drafts.map((d) => ({
+      data: d.file,
+      name: d.file.name,
+      contentType: d.file.type || "application/octet-stream",
+      previewUrl: d.previewUrl ?? void 0,
+      meta: { kind: d.kind, bytes: d.file.size, name: d.file.name }
+    }));
+    void state.send({ body, mentions: parseMentions(body), ...common() }, files);
+    setText("");
+    setDrafts([]);
+    onCancelReply?.();
+    onSent?.();
+    textarea.current?.focus();
+  };
+  async function sendVoice(rec) {
+    if (!rec) return;
+    if (rec.durationMs < 700) {
+      toast.info("Hold on a little longer to record a voice message");
+      return;
+    }
+    await state.send({ body: "", ...common() }, [voiceFile(rec)]);
+    onCancelReply?.();
+    onSent?.();
+  }
+  const onKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && !isTouch()) {
+      e.preventDefault();
+      submit();
+    } else if (e.key === "Escape" && replyTo) {
+      onCancelReply?.();
+    }
+  };
+  const onChange = (e) => {
+    setText(e.target.value);
+    if (e.target.value) state.signalTyping();
+  };
+  const onPaste = (e) => {
+    const files = Array.from(e.clipboardData?.files ?? []);
+    if (files.length) {
+      e.preventDefault();
+      addFiles(files);
+    }
+  };
+  if (state.accessLoading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("border-t p-3", className), "aria-busy": true, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full rounded-2xl" }) });
+  }
+  if (!state.canPost) {
+    const adminsOnly = state.conversation?.settings?.who_posts === "admins";
+    return /* @__PURE__ */ jsxs("div", { className: cn("border-t p-3 text-center text-sm text-muted-foreground", className), role: "status", "data-testid": "genesis-chat-cannot-post", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mr-1 inline size-3.5 align-[-2px]", "aria-hidden": true }),
+      adminsOnly ? "Only admins can post here" : "You can't post in this conversation"
+    ] });
+  }
+  const hasContent = text.trim().length > 0 || drafts.length > 0;
+  const replyName = replyTo?.senderId ? replyTo.senderId === me ? "yourself" : resolveUser?.(replyTo.senderId).name ?? "message" : "message";
+  return /* @__PURE__ */ jsxs("div", { className: cn("border-t bg-background", className), "data-testid": "genesis-chat-composer", children: [
+    recorder.error ? /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: "m-2 w-auto", "data-testid": "genesis-chat-mic-error", children: [
+      /* @__PURE__ */ jsx(Mic, { className: "size-4", "aria-hidden": true }),
+      /* @__PURE__ */ jsxs(AlertDescription, { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("span", { children: recorder.error }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-6 shrink-0", onClick: recorder.clearError, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx(X, {}) })
+      ] })
+    ] }) : null,
+    replyTo ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-2", "data-testid": "genesis-chat-reply-banner", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 border-l-4 border-primary pl-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-xs font-semibold text-primary", children: [
+          "Replying to ",
+          replyName
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: previewText(replyTo.body, replyTo.attachments[0]?.kind ?? null, Boolean(replyTo.deletedAt)) })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 shrink-0", onClick: onCancelReply, "aria-label": "Cancel reply", children: /* @__PURE__ */ jsx(X, {}) })
+    ] }) : null,
+    drafts.length ? /* @__PURE__ */ jsx("ul", { className: "flex gap-2 overflow-x-auto px-3 pt-3", "aria-label": "Attachments to send", children: drafts.map((d) => /* @__PURE__ */ jsxs("li", { className: "relative shrink-0", children: [
+      d.kind === "image" && d.previewUrl ? /* @__PURE__ */ jsx("img", { src: d.previewUrl, alt: d.file.name, className: "size-16 rounded-lg border object-cover" }) : d.kind === "video" && d.previewUrl ? /* @__PURE__ */ jsx("video", { src: d.previewUrl, muted: true, playsInline: true, preload: "metadata", className: "size-16 rounded-lg border object-cover", "aria-label": d.file.name }) : /* @__PURE__ */ jsxs("span", { className: "flex h-16 w-40 items-center gap-2 rounded-lg border bg-muted px-2 text-xs", children: [
+        /* @__PURE__ */ jsx(FileText, { className: "size-4 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "line-clamp-2 break-all", children: d.file.name })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon",
+          variant: "secondary",
+          className: "absolute -right-1.5 -top-1.5 size-5 rounded-full border shadow-sm [&_svg]:size-3",
+          onClick: () => removeDraft(d.id),
+          "aria-label": `Remove ${d.file.name}`,
+          children: /* @__PURE__ */ jsx(X, {})
+        }
+      )
+    ] }, d.id)) }) : null,
+    recorder.recording || recorder.state === "requesting" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", "data-testid": "genesis-chat-recording", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "shrink-0 rounded-full text-destructive hover:text-destructive", onClick: recorder.cancel, "aria-label": "Cancel recording", children: /* @__PURE__ */ jsx(Trash2, {}) }),
+      /* @__PURE__ */ jsx("span", { className: "size-2.5 shrink-0 animate-pulse rounded-full bg-destructive", "aria-hidden": true }),
+      /* @__PURE__ */ jsxs("span", { className: "w-24 shrink-0 text-sm tabular-nums", role: "timer", "aria-live": "off", children: [
+        formatDuration(recorder.elapsedMs),
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          " / ",
+          formatDuration(recorder.maxMs)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "flex h-8 flex-1 items-center justify-end gap-[2px] overflow-hidden", "aria-hidden": true, children: recorder.levels.map((l, i) => /* @__PURE__ */ jsx("span", { className: "w-[3px] shrink-0 rounded-full bg-primary", style: { height: `${Math.max(10, Math.min(100, l * 140))}%` } }, i)) }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", children: recorder.state === "requesting" ? "Asking for the microphone" : "Recording a voice message" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon",
+          className: "shrink-0 rounded-full",
+          disabled: !recorder.recording,
+          onClick: () => void recorder.stop().then(sendVoice),
+          "aria-label": "Send voice message",
+          "data-testid": "genesis-chat-voice-send",
+          children: /* @__PURE__ */ jsx(SendHorizontal, {})
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1 p-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: picker,
+          type: "file",
+          multiple: true,
+          className: "hidden",
+          tabIndex: -1,
+          "aria-hidden": true,
+          accept: "image/*,video/*,audio/*,.pdf,.txt,.csv,.docx,.xlsx,.pptx,.heic,.heif",
+          onChange: (e) => {
+            if (e.target.files) addFiles(e.target.files);
+            e.target.value = "";
+          },
+          "data-testid": "genesis-chat-file-input"
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { content: "Attach photos or files", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "shrink-0 rounded-full text-muted-foreground", onClick: () => picker.current?.click(), "aria-label": "Attach photos or files", children: /* @__PURE__ */ jsx(Paperclip, {}) }) }),
+      accessory,
+      state.role === "observer" ? /* @__PURE__ */ jsx(Tooltip, { content: internal ? "Internal note: only observers see it" : "Write an internal note", children: /* @__PURE__ */ jsx(
+        Toggle,
+        {
+          pressed: internal,
+          onPressedChange: setInternal,
+          "aria-label": "Internal note",
+          size: "sm",
+          className: "h-10 shrink-0 rounded-full data-[state=on]:bg-warning/20",
+          children: /* @__PURE__ */ jsx(Lock, { className: "size-4" })
+        }
+      ) }) : null,
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          ref: textarea,
+          rows: 1,
+          value: text,
+          onChange,
+          onKeyDown,
+          onPaste,
+          placeholder: internal ? "Internal note" : placeholder,
+          "aria-label": internal ? "Internal note" : placeholder,
+          autoFocus,
+          maxLength: CHAT_LIMITS.bodyChars,
+          enterKeyHint: "send",
+          className: cn(
+            "max-h-40 min-h-10 flex-1 resize-none rounded-2xl py-2 leading-snug",
+            internal && "border-warning/60 bg-warning/10"
+          ),
+          "data-testid": "genesis-chat-input"
+        }
+      ),
+      hasContent ? /* @__PURE__ */ jsx(Button, { type: "button", size: "icon", className: "shrink-0 rounded-full", onClick: submit, "aria-label": "Send", "data-testid": "genesis-chat-send", children: /* @__PURE__ */ jsx(SendHorizontal, {}) }) : /* @__PURE__ */ jsx(Tooltip, { content: "Record a voice message", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "shrink-0 rounded-full text-muted-foreground",
+          onClick: () => void recorder.start(),
+          "aria-label": "Record a voice message",
+          "data-testid": "genesis-chat-mic",
+          children: /* @__PURE__ */ jsx(Mic, {})
+        }
+      ) })
+    ] })
+  ] });
+}
+var REPORT_REASONS = [
+  { value: "spam", label: "Spam" },
+  { value: "harassment", label: "Harassment or bullying" },
+  { value: "safety", label: "Someone may be at risk" },
+  { value: "other", label: "Something else" }
+];
+var itemKey = (item) => item.type === "message" ? item.message.clientId || item.message.id : item.pending.clientId;
+function errorText(e) {
+  if (e instanceof ChatError) {
+    if (e.forbidden) return "You can't do that here";
+    if (e.rateLimited) return "Slow down a little and try again";
+    if (e.transient) return "Check your connection and try again";
+  }
+  return e instanceof Error ? e.message : "Something went wrong";
+}
+function DefaultHeader({ title, subtitle, otherUserId, resolveUser, onBack, backClassName }) {
+  const other = otherUserId ? resolveUser(otherUserId) : null;
+  return /* @__PURE__ */ jsxs("header", { className: "flex min-h-14 items-center gap-3 border-b px-3 py-2", "data-testid": "genesis-chat-thread-header", children: [
+    onBack ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: cn("-ml-1 shrink-0", backClassName), onClick: onBack, "aria-label": "Back to conversations", children: /* @__PURE__ */ jsx(ArrowLeft, {}) }) : null,
+    /* @__PURE__ */ jsx(UserAvatar, { name: title, src: other?.avatarUrl, size: "sm" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("h2", { className: "truncate text-sm font-semibold leading-tight", children: title }),
+      subtitle ? /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: subtitle }) : null
+    ] })
+  ] });
+}
+function DefaultEmpty2({ canPost }) {
+  return /* @__PURE__ */ jsx(EmptyState, { icon: MessageSquare, title: "No messages yet", description: canPost ? "Say hello." : void 0 });
+}
+function ChatThread({
+  conversationId,
+  resolveUser,
+  title: titleProp,
+  onBack,
+  backClassName,
+  threadRootId,
+  topic,
+  onOpenThread,
+  quickReactions = QUICK_REACTIONS,
+  placeholder,
+  slots,
+  className
+}) {
+  const { userId: me } = useChat();
+  const state = useConversation(conversationId, { threadRootId, topic });
+  const actions = useMessageActions();
+  const pinIds = usePins(conversationId);
+  const { items, messages, members, role, canPost, conversation, activity } = state;
+  const paths = useMemo(
+    () => messages.flatMap((m) => m.attachments.flatMap((a) => [a.path, a.posterPath])).filter((p) => Boolean(p)),
+    [messages]
+  );
+  const urls = useFileUrls(paths);
+  const byId = useMemo(() => new Map(messages.map((m) => [m.id, m])), [messages]);
+  const pins = useMemo(() => new Set(pinIds), [pinIds]);
+  const [replyTo, setReplyTo] = useState(null);
+  const [editingId, setEditingId] = useState(null);
+  const [highlightedId, setHighlightedId] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(null);
+  const [reporting, setReporting] = useState(null);
+  const [dragging, setDragging] = useState(false);
+  const [newCount, setNewCount] = useState(0);
+  const [announcement, setAnnouncement] = useState("");
+  const composer = useRef(null);
+  useEffect(() => {
+    setReplyTo(null);
+    setEditingId(null);
+    setNewCount(0);
+  }, [conversationId]);
+  useCallback((id) => id === me ? "You" : resolveUser(id).name, [me, resolveUser]);
+  const others = members.filter((m) => m.userId !== me);
+  const otherUserId = members.length === 2 && others.length === 1 ? others[0].userId : null;
+  const isGroup = members.length > 2 || role === "observer";
+  const title = titleProp ?? conversation?.title ?? (otherUserId ? resolveUser(otherUserId).name : others.length ? others.length <= 3 ? others.map((m) => resolveUser(m.userId).name).join(", ") : `${others.slice(0, 2).map((m) => resolveUser(m.userId).name).join(", ")} and ${others.length - 2} others` : "Conversation");
+  const arrived = useRef(/* @__PURE__ */ new Map());
+  const live = activityLine(
+    activity.filter((a) => a.at > (arrived.current.get(a.userId) ?? 0)),
+    (id) => resolveUser(id).name
+  );
+  const subtitle = members.length > 2 ? `${members.length} members` : null;
+  const scroller = useRef(null);
+  const content = useRef(null);
+  const atBottom = useRef(true);
+  const initialised = useRef(null);
+  const edges = useRef({ first: null, last: null });
+  const anchor = useRef(null);
+  const scrollToBottom = useCallback((smooth = false) => {
+    const el = scroller.current;
+    if (!el) return;
+    if (smooth && typeof el.scrollTo === "function") el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+    else el.scrollTop = el.scrollHeight;
+    atBottom.current = true;
+    setNewCount(0);
+  }, []);
+  useLayoutEffect(() => {
+    const el = scroller.current;
+    if (!el || items.length === 0) return;
+    const first = itemKey(items[0]);
+    const lastItem = items[items.length - 1];
+    const last = itemKey(lastItem);
+    const prev = edges.current;
+    edges.current = { first, last };
+    if (initialised.current !== conversationId) {
+      initialised.current = conversationId;
+      const unread = state.firstUnreadId ? document.getElementById(`genesis-chat-msg-${state.firstUnreadId}`) : null;
+      if (unread && typeof unread.scrollIntoView === "function") unread.scrollIntoView({ block: "center" });
+      else scrollToBottom();
+      return;
+    }
+    if (anchor.current && first !== prev.first) {
+      el.scrollTop = el.scrollHeight - anchor.current.height + anchor.current.top;
+      anchor.current = null;
+    }
+    if (last !== prev.last) {
+      const mine = itemSender(lastItem) === me;
+      if (atBottom.current || mine) scrollToBottom();
+      else setNewCount((n) => n + 1);
+      if (!mine && lastItem.type === "message" && lastItem.message.kind !== "system") {
+        const m = lastItem.message;
+        if (m.senderId) arrived.current.set(m.senderId, Date.now());
+        setAnnouncement(`${m.senderId ? resolveUser(m.senderId).name : "Someone"}: ${previewText(m.body, m.attachments[0]?.kind ?? null, Boolean(m.deletedAt))}`);
+      }
+    }
+  }, [items, conversationId, me, resolveUser, scrollToBottom, state.firstUnreadId]);
+  const hasItems = items.length > 0;
+  useEffect(() => {
+    const el = content.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      if (atBottom.current && scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight;
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [hasItems]);
+  const { hasEarlier, loadingEarlier, loadEarlier } = state;
+  const loadOlder = useCallback(() => {
+    const el = scroller.current;
+    if (!el || !hasEarlier || loadingEarlier) return;
+    anchor.current = { height: el.scrollHeight, top: el.scrollTop };
+    void loadEarlier().catch((e) => toast.error(errorText(e)));
+  }, [hasEarlier, loadingEarlier, loadEarlier]);
+  const onScroll = () => {
+    const el = scroller.current;
+    if (!el) return;
+    const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+    atBottom.current = bottom;
+    if (bottom && newCount) setNewCount(0);
+    if (el.scrollTop < 200) loadOlder();
+  };
+  const jumpTo = useCallback((id) => {
+    const el = document.getElementById(`genesis-chat-msg-${id}`);
+    if (!el) {
+      toast.info("That message is further up", { description: "Scroll up to load it." });
+      return;
+    }
+    if (typeof el.scrollIntoView === "function") el.scrollIntoView({ block: "center", behavior: "smooth" });
+    setHighlightedId(id);
+    setTimeout(() => setHighlightedId((h) => h === id ? null : h), 1600);
+  }, []);
+  const run = useCallback(async (p, done) => {
+    try {
+      await p;
+      if (done) toast.success(done);
+    } catch (e) {
+      toast.error(errorText(e));
+    }
+  }, []);
+  const ctx = {
+    me,
+    resolveUser,
+    role,
+    isGroup,
+    canModerate: role === "owner" || role === "admin",
+    canPin: role === "owner" || role === "admin" || members.length === 2,
+    canPost,
+    pins,
+    urls,
+    byId,
+    quickReactions,
+    attachmentSlot: slots?.attachment,
+    highlightedId,
+    editingId,
+    reply: (m) => {
+      setReplyTo(m);
+      composer.current?.focus();
+    },
+    focusComposer: () => composer.current?.focus(),
+    startEdit: setEditingId,
+    saveEdit: async (m, body2) => {
+      try {
+        await actions.edit(m, body2, parseMentions(body2));
+      } catch (e) {
+        toast.error(errorText(e));
+        throw e;
+      }
+    },
+    askDelete: setConfirmDelete,
+    askReport: setReporting,
+    react: (m, emoji, on) => void run(actions.react(m, emoji, on)),
+    pin: (m, on) => void run(actions.pin(m, on), on ? "Pinned" : "Unpinned"),
+    save: (m) => void run(actions.save(m, true), "Saved"),
+    copy: (m) => {
+      const text = plainText(m.body);
+      if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) void run(navigator.clipboard.writeText(text), "Copied");
+      else toast.error("Copying isn't available here");
+    },
+    jumpTo,
+    retry: (clientId) => void state.retry(clientId),
+    discard: (clientId) => void state.discard(clientId),
+    openThread: onOpenThread
+  };
+  const hasFiles = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
+  const dropProps = canPost ? {
+    onDragOver: (e) => {
+      if (!hasFiles(e)) return;
+      e.preventDefault();
+      if (!dragging) setDragging(true);
+    },
+    onDragLeave: (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+    },
+    onDrop: (e) => {
+      if (!hasFiles(e)) return;
+      e.preventDefault();
+      setDragging(false);
+      composer.current?.addFiles(e.dataTransfer.files);
+    }
+  } : {};
+  const pinnedMessage = pinIds.length ? byId.get(pinIds[pinIds.length - 1]) : void 0;
+  let body;
+  if (state.isLoading) {
+    body = /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 p-4", "aria-busy": true, "aria-label": "Loading messages", "data-testid": "genesis-chat-thread-loading", children: [40, 60, 30, 50].map((w, i) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-9 rounded-2xl", i % 2 ? "self-end" : "self-start"), style: { width: `${w}%` } }, i)) });
+  } else if (state.error && items.length === 0) {
+    body = /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: MessageSquare,
+        title: "Couldn't load this conversation",
+        description: errorText(state.error),
+        action: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => void state.refetch(), children: "Try again" })
+      }
+    );
+  } else if (items.length === 0) {
+    body = renderSlot(DefaultEmpty2, slots?.empty, { conversationId, canPost });
+  } else {
+    body = /* @__PURE__ */ jsxs("div", { ref: content, className: "flex min-h-full flex-col justify-end pb-2 pt-1", children: [
+      hasEarlier ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: loadingEarlier ? /* @__PURE__ */ jsx(Spinner, { size: "sm", "aria-label": "Loading earlier messages" }) : /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 text-xs text-muted-foreground", onClick: loadOlder, children: "Load earlier messages" }) }) : null,
+      items.map((item, i) => {
+        const id = item.type === "message" ? item.message.id : null;
+        return /* @__PURE__ */ jsxs("div", { children: [
+          startsDay(items, i) ? /* @__PURE__ */ jsx("div", { className: "sticky top-1 z-10 flex justify-center py-2", role: "separator", "aria-label": dayLabel(itemTime(item)), children: /* @__PURE__ */ jsx("span", { className: "rounded-full border bg-background/95 px-3 py-0.5 text-xs font-medium text-muted-foreground shadow-sm", children: dayLabel(itemTime(item)) }) }) : null,
+          id && id === state.firstUnreadId ? /* @__PURE__ */ jsxs("div", { className: "my-2 flex items-center gap-2 px-4", role: "separator", "aria-label": "New messages", "data-testid": "genesis-chat-new-line", children: [
+            /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-primary/40" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-primary", children: "New" }),
+            /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-primary/40" })
+          ] }) : null,
+          /* @__PURE__ */ jsx(MessageRow, { item, startsGroup: startsGroup(items, i) })
+        ] }, itemKey(item));
+      })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(ThreadContext.Provider, { value: ctx, children: [
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: cn("relative flex h-full min-h-0 flex-col bg-background", className),
+        "aria-label": title,
+        "data-testid": "genesis-chat-thread",
+        ...dropProps,
+        children: [
+          renderSlot(DefaultHeader, slots?.header, {
+            conversationId,
+            conversation,
+            title,
+            subtitle,
+            activity: live,
+            otherUserId,
+            members,
+            role,
+            resolveUser,
+            onBack,
+            backClassName
+          }),
+          pinnedMessage ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => jumpTo(pinnedMessage.id),
+              className: "flex items-center gap-2 border-b bg-muted/40 px-3 py-1.5 text-left text-xs hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+              "aria-label": `Pinned message: ${previewText(pinnedMessage.body, pinnedMessage.attachments[0]?.kind ?? null, Boolean(pinnedMessage.deletedAt))}. Show it`,
+              children: [
+                /* @__PURE__ */ jsx(Pin, { className: "size-3.5 shrink-0 text-primary", "aria-hidden": true }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: previewText(pinnedMessage.body, pinnedMessage.attachments[0]?.kind ?? null, Boolean(pinnedMessage.deletedAt)) }),
+                pinIds.length > 1 ? /* @__PURE__ */ jsxs("span", { className: "ml-auto shrink-0 text-muted-foreground", children: [
+                  "+",
+                  pinIds.length - 1
+                ] }) : null
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { ref: scroller, onScroll, className: "h-full overflow-y-auto overscroll-contain", role: "log", "aria-live": "off", "aria-label": "Messages", "data-testid": "genesis-chat-scroller", children: body }),
+            newCount > 0 ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                className: "absolute bottom-3 left-1/2 h-8 -translate-x-1/2 rounded-full shadow-md",
+                onClick: () => scrollToBottom(true),
+                "data-testid": "genesis-chat-new-pill",
+                children: [
+                  "New messages ",
+                  /* @__PURE__ */ jsx(ArrowDown, {})
+                ]
+              }
+            ) : null,
+            dragging ? /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-2 flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-primary bg-background/90 text-sm font-medium text-primary", children: [
+              /* @__PURE__ */ jsx(ImagePlus, { className: "size-6", "aria-hidden": true }),
+              "Drop to attach"
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "h-5 px-4 text-xs italic text-muted-foreground", "data-testid": "genesis-chat-activity", children: live ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex gap-0.5", "aria-hidden": true, children: [
+              /* @__PURE__ */ jsx("span", { className: "size-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:-0.3s]" }),
+              /* @__PURE__ */ jsx("span", { className: "size-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:-0.15s]" }),
+              /* @__PURE__ */ jsx("span", { className: "size-1 animate-bounce rounded-full bg-muted-foreground" })
+            ] }),
+            live
+          ] }) : null }),
+          /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-testid": "genesis-chat-announcer", children: announcement }),
+          /* @__PURE__ */ jsx(
+            ChatComposer,
+            {
+              ref: composer,
+              conversation: state,
+              replyTo,
+              onCancelReply: () => setReplyTo(null),
+              resolveUser,
+              placeholder,
+              accessory: renderSlot(EmptyAccessory, slots?.composerAccessory, {
+                conversationId,
+                insertText: (t) => composer.current?.insertText(t),
+                addFiles: (f) => composer.current?.addFiles(f)
+              })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AlertDialog, { open: confirmDelete !== null, onOpenChange: (o) => !o && setConfirmDelete(null), children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete this message?" }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { children: confirmDelete?.senderId === me ? "It's deleted for everyone in the conversation." : "It's deleted for everyone in the conversation, including the person who sent it." })
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          AlertDialogAction,
+          {
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            onClick: () => {
+              const m = confirmDelete;
+              setConfirmDelete(null);
+              if (m) void run(actions.remove(m));
+            },
+            "data-testid": "genesis-chat-confirm-delete",
+            children: "Delete"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      ReportDialog,
+      {
+        message: reporting,
+        onClose: () => setReporting(null),
+        onSubmit: async (m, reason, note) => {
+          await run(actions.report(m, reason, note || void 0), "Reported. Thank you.");
+          setReporting(null);
+        }
+      }
+    )
+  ] });
+}
+function EmptyAccessory(_props) {
+  return null;
+}
+function ReportDialog({
+  message,
+  onClose,
+  onSubmit
+}) {
+  const [reason, setReason] = useState("spam");
+  const [note, setNote] = useState("");
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    if (message) {
+      setReason("spam");
+      setNote("");
+    }
+  }, [message]);
+  return /* @__PURE__ */ jsx(Dialog, { open: message !== null, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Report this message" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "The people who look after this conversation see your report and the messages around it." })
+    ] }),
+    /* @__PURE__ */ jsx(RadioGroup, { value: reason, onValueChange: (v) => setReason(v), "aria-label": "Reason", children: REPORT_REASONS.map((r) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(RadioGroupItem, { value: r.value, id: `genesis-chat-report-${r.value}` }),
+      /* @__PURE__ */ jsx(Label, { htmlFor: `genesis-chat-report-${r.value}`, children: r.label })
+    ] }, r.value)) }),
+    /* @__PURE__ */ jsx(Textarea, { value: note, onChange: (e) => setNote(e.target.value), placeholder: "Anything else? (optional)", "aria-label": "Details", maxLength: 1e3 }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "destructive",
+          loading: busy,
+          onClick: async () => {
+            if (!message) return;
+            setBusy(true);
+            try {
+              await onSubmit(message, reason, note.trim());
+            } finally {
+              setBusy(false);
+            }
+          },
+          children: "Report"
+        }
+      )
+    ] })
+  ] }) });
+}
+function NoSelection({ hint }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(EmptyState, { icon: MessageSquare, title: "Choose a conversation", description: hint ?? "Pick one on the left to read and reply." }) });
+}
+function ChatPanel({
+  resolveUser,
+  selectedId: controlled,
+  defaultSelectedId = null,
+  onSelectedChange,
+  inboxHeader,
+  inboxProps,
+  threadProps,
+  slots,
+  className
+}) {
+  const [own, setOwn] = useState(defaultSelectedId);
+  const selected = controlled !== void 0 ? controlled : own;
+  const select = (id) => {
+    if (controlled === void 0) setOwn(id);
+    onSelectedChange?.(id);
+  };
+  return /* @__PURE__ */ jsx(
+    Split,
+    {
+      ratio: "1/3",
+      at: "md",
+      gap: "none",
+      testID: "genesis-chat-panel",
+      className: cn(
+        "h-full min-h-0 overflow-hidden rounded-lg border bg-background",
+        "[&>[data-slot=split-start]]:min-h-0 [&>[data-slot=split-end]]:min-h-0 max-md:[&>[data-slot]]:flex-1",
+        selected ? "max-md:[&>[data-slot=split-start]]:hidden" : "max-md:[&>[data-slot=split-end]]:hidden",
+        className
+      ),
+      start: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col md:border-r", children: [
+        inboxHeader ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b px-3 py-2", children: inboxHeader }) : null,
+        /* @__PURE__ */ jsx(ChatInbox, { ...inboxProps, resolveUser, selectedId: selected, onSelect: select, className: cn("min-h-0 flex-1 overflow-y-auto", inboxProps?.className) })
+      ] }),
+      end: selected ? /* @__PURE__ */ jsx(ChatThread, { ...threadProps, conversationId: selected, resolveUser, onBack: () => select(null), backClassName: "md:hidden" }, selected) : renderSlot(NoSelection, slots?.noSelection, {})
+    }
+  );
+}
+
+// src/web/memory-client.ts
+var counter = 0;
+var uuid = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `00000000-0000-4000-8000-${String(++counter).padStart(12, "0")}`;
+function attachment(messageId, a, i) {
+  return {
+    id: a.id ?? uuid(),
+    messageId,
+    position: a.position ?? i,
+    kind: a.kind ?? "file",
+    ref: a.ref ?? {},
+    provider: a.provider ?? "storage",
+    path: a.path ?? null,
+    providerId: a.providerId ?? null,
+    playbackId: a.playbackId ?? null,
+    url: a.url ?? null,
+    status: a.status ?? "ready",
+    name: a.name ?? null,
+    mime: a.mime ?? null,
+    bytes: a.bytes ?? null,
+    width: a.width ?? null,
+    height: a.height ?? null,
+    durationMs: a.durationMs ?? null,
+    waveform: a.waveform ?? null,
+    posterPath: a.posterPath ?? null,
+    thumbhash: a.thumbhash ?? null,
+    transcript: a.transcript ?? null,
+    transcriptStatus: a.transcriptStatus ?? null
+  };
+}
+function createMemoryChatClient(options) {
+  const { me } = options;
+  const files = { ...options.files ?? {} };
+  const convs = /* @__PURE__ */ new Map();
+  const convListeners = /* @__PURE__ */ new Map();
+  const inboxListeners = /* @__PURE__ */ new Set();
+  const calls = [];
+  let failing = 0;
+  let held = null;
+  const wait = () => new Promise((r) => setTimeout(r, options.latencyMs ?? 0));
+  const makeMessage = (c, m) => {
+    const id = m.id ?? uuid();
+    const seq = ++c.conversation.lastSeq;
+    const createdAt = m.createdAt ?? (/* @__PURE__ */ new Date()).toISOString();
+    c.conversation.lastMessageAt = createdAt;
+    return {
+      id,
+      conversationId: c.conversation.id,
+      seq,
+      clientId: m.clientId ?? id,
+      senderId: m.senderId ?? null,
+      senderRole: m.senderRole ?? (m.kind === "system" ? "system" : "member"),
+      kind: m.kind ?? "text",
+      body: m.body ?? "",
+      mentions: m.mentions ?? [],
+      replyToId: m.replyToId ?? null,
+      threadRootId: m.threadRootId ?? null,
+      threadCount: m.threadCount ?? 0,
+      threadLastAt: m.threadLastAt ?? null,
+      topic: m.topic ?? null,
+      visibility: m.visibility ?? "everyone",
+      silent: m.silent ?? false,
+      meta: m.meta ?? {},
+      createdAt,
+      editedAt: m.editedAt ?? null,
+      deletedAt: m.deletedAt ?? null,
+      attachments: (m.attachments ?? []).map((a, i) => attachment(id, a, i)),
+      reactions: m.reactions ?? []
+    };
+  };
+  for (const seed of options.conversations) {
+    const c = {
+      conversation: {
+        id: seed.id,
+        kind: seed.kind ?? (seed.members.length === 2 ? "direct" : "group"),
+        title: seed.title ?? null,
+        subjectType: null,
+        subjectId: null,
+        settings: seed.settings ?? {},
+        status: null,
+        assigneeId: null,
+        lastSeq: 0,
+        lastMessageAt: null,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        archivedAt: null
+      },
+      members: seed.members.map((m) => ({
+        conversationId: seed.id,
+        userId: m.userId,
+        role: m.role ?? "member",
+        lastReadSeq: m.lastReadSeq ?? 0,
+        joinedAt: (/* @__PURE__ */ new Date()).toISOString()
+      })),
+      myRole: seed.myRole !== void 0 ? seed.myRole : seed.members.find((m) => m.userId === me)?.role ?? "member",
+      canPost: seed.canPost ?? true,
+      muted: seed.muted ?? false,
+      pinned: seed.pinned ?? false,
+      messages: [],
+      pins: seed.pins ?? []
+    };
+    for (const m of seed.messages ?? []) c.messages.push(makeMessage(c, m));
+    convs.set(seed.id, c);
+  }
+  const get = (id) => {
+    const c = convs.get(id);
+    if (!c) throw new ChatError("Conversation not found", "42501", "conversation");
+    return c;
+  };
+  const findMessage = (id) => {
+    for (const c of convs.values()) {
+      const m = c.messages.find((x) => x.id === id);
+      if (m) return { c, m };
+    }
+    throw new ChatError("Message not found", "42501", "message");
+  };
+  const visible = (c, m) => m.visibility !== "observers" || c.myRole === "observer";
+  const clone = (m) => ({ ...m, attachments: m.attachments.map((a) => ({ ...a })), reactions: [...m.reactions] });
+  const emit = (conversationId, s) => {
+    for (const l of convListeners.get(conversationId) ?? []) l.onSignal(s);
+    for (const l of inboxListeners) l({ type: "inbox", conversationId });
+  };
+  const log = (method, ...args) => calls.push({ method, args });
+  function inboxItem(c) {
+    const mine = c.members.find((m) => m.userId === me);
+    const lastRead = mine?.lastReadSeq ?? 0;
+    const seen = c.messages.filter((m) => visible(c, m));
+    const last = seen[seen.length - 1];
+    const others = c.members.filter((m) => m.userId !== me);
+    const unreadList = seen.filter((m) => m.seq > lastRead && m.senderId !== me && !m.deletedAt);
+    return {
+      conversationId: c.conversation.id,
+      kind: c.conversation.kind,
+      title: c.conversation.title,
+      subjectType: null,
+      subjectId: null,
+      status: null,
+      role: c.myRole ?? "member",
+      otherUserId: c.members.length === 2 && others.length === 1 ? others[0].userId : null,
+      memberCount: c.members.length,
+      lastSeq: c.conversation.lastSeq,
+      lastReadSeq: lastRead,
+      unread: Math.min(99, unreadList.length),
+      mentioned: unreadList.some((m) => m.mentions.includes(me)),
+      muted: c.muted,
+      pinned: c.pinned,
+      archived: false,
+      lastMessageAt: c.conversation.lastMessageAt,
+      lastMessage: last ? {
+        id: last.id,
+        seq: last.seq,
+        senderId: last.senderId,
+        kind: last.kind,
+        body: last.body,
+        deleted: Boolean(last.deletedAt),
+        createdAt: last.createdAt,
+        attachment: last.attachments[0]?.kind ?? null
+      } : null
+    };
+  }
+  const client = {
+    supabase: null,
+    calls,
+    async inbox(opts = {}) {
+      log("inbox", opts);
+      await wait();
+      if (opts.archived) return [];
+      return [...convs.values()].filter((c) => !opts.kind || c.conversation.kind === opts.kind).map(inboxItem).sort((a, b) => Number(b.pinned) - Number(a.pinned) || (b.lastMessageAt ?? "").localeCompare(a.lastMessageAt ?? ""));
+    },
+    async observed() {
+      return [];
+    },
+    async unreadTotal() {
+      return [...convs.values()].reduce((n, c) => n + inboxItem(c).unread, 0);
+    },
+    async conversation(id) {
+      await wait();
+      return convs.has(id) ? { ...get(id).conversation } : null;
+    },
+    async kind(kind) {
+      return { kind, label: kind, maxMembers: kind === "direct" ? 2 : null, whoPosts: "members", membership: "admins", threads: true, observersPost: false };
+    },
+    async myRole(id) {
+      return convs.get(id)?.myRole ?? null;
+    },
+    async canPost(id) {
+      return convs.get(id)?.canPost ?? false;
+    },
+    async members(id) {
+      return get(id).members.map((m) => ({ ...m }));
+    },
+    async messages(id, opts = {}) {
+      log("messages", id, opts);
+      await wait();
+      const c = get(id);
+      const limit = Math.min(Math.max(opts.limit ?? 50, 1), 200);
+      let list = c.messages.filter((m) => visible(c, m) && (opts.threadRootId ? m.threadRootId === opts.threadRootId : m.threadRootId === null));
+      if (opts.topic) list = list.filter((m) => m.topic === opts.topic);
+      if (opts.afterSeq != null) return { messages: list.filter((m) => m.seq > opts.afterSeq).slice(0, limit).map(clone), hasEarlier: false };
+      if (opts.beforeSeq != null) list = list.filter((m) => m.seq < opts.beforeSeq);
+      const page = list.slice(-limit);
+      return { messages: page.map(clone), hasEarlier: list.length > page.length };
+    },
+    async message(id) {
+      try {
+        const { c, m } = findMessage(id);
+        return visible(c, m) ? clone(m) : null;
+      } catch {
+        return null;
+      }
+    },
+    async startConversation(kind, memberIds, opts = {}) {
+      const id = uuid();
+      convs.set(id, {
+        conversation: {
+          id,
+          kind,
+          title: opts.title ?? null,
+          subjectType: null,
+          subjectId: null,
+          settings: {},
+          status: null,
+          assigneeId: null,
+          lastSeq: 0,
+          lastMessageAt: null,
+          createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+          archivedAt: null
+        },
+        members: [me, ...memberIds.filter((m) => m !== me)].map((userId) => ({ conversationId: id, userId, role: userId === me ? "owner" : "member", lastReadSeq: 0, joinedAt: (/* @__PURE__ */ new Date()).toISOString() })),
+        myRole: "owner",
+        canPost: true,
+        muted: false,
+        pinned: false,
+        messages: [],
+        pins: []
+      });
+      for (const l of inboxListeners) l({ type: "inbox", conversationId: id });
+      return id;
+    },
+    async send(input) {
+      log("send", input);
+      await wait();
+      if (held) {
+        const hold = held;
+        held = null;
+        await hold;
+      }
+      if (failing > 0) {
+        failing -= 1;
+        throw new ChatError("Failed to fetch", void 0, "send_message");
+      }
+      const c = get(input.conversationId);
+      if (!c.canPost) throw new ChatError("You can't post here", "42501", "send_message");
+      const existing = c.messages.find((m2) => m2.clientId === input.clientId);
+      if (existing) return clone(existing);
+      const m = makeMessage(c, {
+        clientId: input.clientId,
+        senderId: me,
+        senderRole: c.myRole ?? "member",
+        body: input.body ?? "",
+        mentions: input.mentions ?? [],
+        replyToId: input.replyToId ?? null,
+        threadRootId: input.threadRootId ?? null,
+        topic: input.topic ?? null,
+        visibility: input.visibility ?? "everyone",
+        silent: input.silent ?? false,
+        attachments: (input.attachments ?? []).map((a) => ({ ...a, durationMs: a.durationMs ?? null, transcriptStatus: a.kind === "voice" ? "pending" : null }))
+      });
+      c.messages.push(m);
+      const mine = c.members.find((x) => x.userId === me);
+      if (mine) mine.lastReadSeq = m.seq;
+      emit(c.conversation.id, { type: "message", conversationId: c.conversation.id, id: m.id, seq: m.seq, op: "insert" });
+      return clone(m);
+    },
+    async edit(messageId, body, mentions = []) {
+      log("edit", messageId, body);
+      const { c, m } = findMessage(messageId);
+      if (m.senderId !== me) throw new ChatError("You can't edit this message", "42501", "edit_message");
+      Object.assign(m, { body, mentions, editedAt: (/* @__PURE__ */ new Date()).toISOString() });
+      emit(c.conversation.id, { type: "message", conversationId: c.conversation.id, id: m.id, op: "update" });
+      return clone(m);
+    },
+    async remove(messageId) {
+      log("remove", messageId);
+      const { c, m } = findMessage(messageId);
+      Object.assign(m, { body: "", attachments: [], reactions: [], deletedAt: (/* @__PURE__ */ new Date()).toISOString() });
+      emit(c.conversation.id, { type: "message", conversationId: c.conversation.id, id: m.id, op: "update" });
+    },
+    async react(messageId, emoji, on = true) {
+      log("react", messageId, emoji, on);
+      const { c, m } = findMessage(messageId);
+      m.reactions = m.reactions.filter((r) => !(r.emoji === emoji && r.userId === me));
+      if (on) m.reactions.push({ emoji, userId: me });
+      emit(c.conversation.id, { type: "reaction", conversationId: c.conversation.id, messageId });
+    },
+    async markRead(conversationId, seq) {
+      const c = get(conversationId);
+      const mine = c.members.find((x) => x.userId === me);
+      if (mine) mine.lastReadSeq = Math.max(mine.lastReadSeq, seq ?? c.conversation.lastSeq);
+      return mine?.lastReadSeq ?? 0;
+    },
+    async setMySettings(conversationId, s) {
+      const c = get(conversationId);
+      if (s.mutedUntil !== void 0) c.muted = s.mutedUntil !== null;
+      if (s.pinned !== void 0) c.pinned = s.pinned;
+    },
+    async updateConversation(conversationId, s) {
+      const c = get(conversationId);
+      if (s.title !== void 0) c.conversation.title = s.title;
+      if (s.settings) c.conversation.settings = { ...c.conversation.settings, ...s.settings };
+    },
+    async addMembers(conversationId, userIds) {
+      const c = get(conversationId);
+      for (const userId of userIds) if (!c.members.some((m) => m.userId === userId)) c.members.push({ conversationId, userId, role: "member", lastReadSeq: 0, joinedAt: (/* @__PURE__ */ new Date()).toISOString() });
+    },
+    async removeMember(conversationId, userId) {
+      const c = get(conversationId);
+      c.members = c.members.filter((m) => m.userId !== (userId ?? me));
+    },
+    async setStatus(conversationId, status, assigneeId) {
+      const c = get(conversationId);
+      c.conversation.status = status;
+      c.conversation.assigneeId = assigneeId ?? null;
+    },
+    async pin(messageId, on = true) {
+      log("pin", messageId, on);
+      const { c } = findMessage(messageId);
+      c.pins = c.pins.filter((p) => p !== messageId);
+      if (on) c.pins.push(messageId);
+      emit(c.conversation.id, { type: "conversation", conversationId: c.conversation.id });
+    },
+    async pins(conversationId) {
+      return [...convs.get(conversationId)?.pins ?? []];
+    },
+    async save(messageId, on = true, note) {
+      log("save", messageId, on, note);
+    },
+    async report(messageId, reason, note) {
+      log("report", messageId, reason, note);
+      return uuid();
+    },
+    async upload(conversationId, userId, file, opts) {
+      log("upload", conversationId, opts.name);
+      await wait();
+      const path = `${conversationId}/${userId}/${opts.id ?? uuid()}-${opts.name}`;
+      const blob = file instanceof Blob ? file : new Blob([file], { type: opts.contentType });
+      files[path] = typeof URL !== "undefined" && typeof URL.createObjectURL === "function" ? URL.createObjectURL(blob) : `memory://${path}`;
+      return path;
+    },
+    async fileUrls(paths) {
+      const out = {};
+      for (const p of paths) if (files[p]) out[p] = files[p];
+      return out;
+    },
+    subscribeInbox(_userId, onSignal) {
+      inboxListeners.add(onSignal);
+      return { unsubscribe: () => void inboxListeners.delete(onSignal) };
+    },
+    subscribeConversation(conversationId, _me, handlers) {
+      const set = convListeners.get(conversationId) ?? /* @__PURE__ */ new Set();
+      convListeners.set(conversationId, set);
+      const entry = { onSignal: handlers.onSignal, onActivity: handlers.onActivity };
+      set.add(entry);
+      return {
+        signal(activity) {
+          log("signal", conversationId, activity);
+        },
+        unsubscribe: () => void set.delete(entry)
+      };
+    },
+    receive(conversationId, senderId, body, extra = {}) {
+      const c = get(conversationId);
+      const m = makeMessage(c, { senderId, body, ...extra });
+      c.messages.push(m);
+      emit(conversationId, { type: "message", conversationId, id: m.id, seq: m.seq, op: "insert" });
+      return clone(m);
+    },
+    activity(conversationId, userId, activity) {
+      for (const l of convListeners.get(conversationId) ?? []) l.onActivity?.({ userId, activity, at: Date.now() });
+    },
+    failNextSends(count = 1) {
+      failing = count;
+    },
+    holdNextSend() {
+      let release;
+      held = new Promise((r) => release = r);
+      return () => release();
+    }
+  };
+  return client;
+}
+
+export { ChatComposer, ChatInbox, ChatMarkdown, ChatPanel, ChatThread, FileChip, GenericAttachment, ImageGrid, Lightbox, MessageAttachments, MessageRow, QUICK_REACTIONS, VideoAttachment, VoiceNote, clockTime, createMemoryChatClient, formatBytes, inboxTitle, isSafeHref, messageLabel, parseMarkdown, pickVoiceMimeType, plainText, relativeTime, toAttachmentView, useVoiceRecorder, voiceFile };
+//# sourceMappingURL=web.js.map
+//# sourceMappingURL=web.js.map