@marktiderman/genesis-chat 0.1.1 → 0.2.0

package/dist/web.js

@@ -1,11 +1,13 @@
-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 { snippetParts, isHttpsUrl, scheduleQuickPicks, isSchedulable, scheduleLabel, extractLinks, topicKey } from './chunk-BJCE5O7V.js';
+import { useChat, useInbox, useSearch, useScheduled, useAvailability, useTopics, useConversation, useMessageActions, usePins, useFileUrls, useLinkPreviews, useBroadcast } from './chunk-PZTOY2LY.js';
+import { previewText, summarizeReactions, activityLine, itemSender, startsDay, dayLabel, itemTime, startsGroup, parseMentions } from './chunk-5D5A7I4Q.js';
+import { fileExtension, formatDuration, nextPlaybackRate, awaySummary, awayLine, WEEKDAYS, CHAT_LIMITS, waveformPeaks, recordingLimitMs, isAllowedExtension, attachmentKindFor, randomId, ChatError } from './chunk-7S6HYNWW.js';
+import { createContext, useRef, useState, Fragment, Component, useCallback, useEffect, useMemo, useImperativeHandle, useLayoutEffect, useContext } from 'react';
+import { MessageSquare, Pin, BellOff, AtSign, Search, X, Mic, ClipboardList, ExternalLink, VideoOff, Video, RotateCcw, SendHorizontal, Square, Circle, Pause, Play, Paperclip, ChevronLeft, ChevronRight, FileText, Download, Lock, Ban, EyeOff, ShieldAlert, AlertCircle, Clock, Reply, Copy, Pencil, PinOff, Bookmark, Flag, Trash2, SmilePlus, Plus, MoreHorizontal, ChevronUp, CalendarClock, Moon, RefreshCw, Smile, Hash, LockOpen, ArrowDown, ImagePlus, Megaphone, Link2, ArrowLeft } from 'lucide-react';
+import { Skeleton, cn, EmptyState, Button, UserAvatar, Badge, Input, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Alert, AlertDescription, Spinner, Collapsible, CollapsibleTrigger, CollapsibleContent, VisuallyHidden, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuSeparator, ContextMenuItem, Tooltip, Textarea, Popover, PopoverTrigger, PopoverContent, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuLabel, Label, DialogFooter, toast, Switch, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Toggle, ToggleGroup, ToggleGroupItem, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, RadioGroup, RadioGroupItem, Split, Checkbox } from '@marktiderman/genesis-ui';
 import { renderSlot } from '@marktiderman/genesis-core/slots';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { EmojiPicker } from 'frimousse';
 
 // src/web/format.ts
 function clockTime(iso, locale) {
@@ -145,6 +147,80 @@ function InboxRow({ item, me, resolveUser, fallbackTitle, selected, onSelect })
     }
   );
 }
+function SearchSnippet({ snippet, className }) {
+  return /* @__PURE__ */ jsx("span", { className, children: snippetParts(snippet).map(
+    (p, i) => p.match ? /* @__PURE__ */ jsx("mark", { className: "rounded-sm bg-warning/30 px-0.5 text-foreground", children: p.text }, i) : /* @__PURE__ */ jsx("span", { children: p.text }, i)
+  ) });
+}
+function ChatSearch({ resolveUser, conversationId, onOpen, conversationTitle, autoFocus, debounceMs, className }) {
+  const [value, setValue] = useState("");
+  const { hits, query, isSearching } = useSearch(value, { conversationId, debounceMs });
+  const list = useRef(null);
+  const onKeyDown = (e) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    const buttons = Array.from(list.current?.querySelectorAll("button[data-search-hit]") ?? []);
+    if (!buttons.length) return;
+    e.preventDefault();
+    const at = buttons.indexOf(document.activeElement);
+    const to = e.key === "ArrowDown" ? Math.min(buttons.length - 1, at + 1) : at <= 0 ? -1 : at - 1;
+    if (to < 0) e.currentTarget.querySelector("input")?.focus();
+    else buttons[to]?.focus();
+  };
+  const short = value.trim().length < 2;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-col", className), onKeyDown, "data-testid": "genesis-chat-search", role: "search", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative p-2", children: [
+      /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-4.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": true }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "search",
+          value,
+          onChange: (e) => setValue(e.target.value),
+          placeholder: conversationId ? "Search this conversation" : "Search messages",
+          "aria-label": conversationId ? "Search this conversation" : "Search messages",
+          autoFocus,
+          className: "pl-8 pr-8",
+          "data-testid": "genesis-chat-search-input"
+        }
+      ),
+      value ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "absolute right-3 top-1/2 size-6 -translate-y-1/2", onClick: () => setValue(""), "aria-label": "Clear search", children: /* @__PURE__ */ jsx(X, {}) }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "polite", children: short || isSearching ? "" : hits.length === 0 ? "No results" : hits.length === 1 ? "1 result" : `${hits.length} results` }),
+    short ? null : isSearching && hits.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-3", "aria-busy": true, "aria-label": "Searching", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" })
+    ] }) : hits.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { icon: Search, title: "No results", description: `Nothing matches \u201C${query}\u201D.` }) : /* @__PURE__ */ jsx("ul", { ref: list, className: "min-h-0 flex-1 overflow-y-auto", "aria-label": "Results", children: hits.map((h) => {
+      const who = h.senderId ? resolveUser(h.senderId).name : "Someone";
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "data-search-hit": true,
+          onClick: () => onOpen(h),
+          className: "flex w-full flex-col gap-0.5 px-3 py-2 text-left hover:bg-accent focus-visible:bg-accent focus-visible:outline-none",
+          "data-testid": "genesis-chat-search-hit",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: who }),
+              !conversationId && conversationTitle ? /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                "in ",
+                conversationTitle(h.conversationId)
+              ] }) : null,
+              /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0", children: relativeTime(h.createdAt) })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-start gap-1.5 text-sm", children: [
+              h.inTranscript ? /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "mt-0.5 shrink-0 gap-1 px-1.5 py-0 text-[10px]", "data-testid": "genesis-chat-search-transcript", children: [
+                /* @__PURE__ */ jsx(Mic, { className: "size-3", "aria-hidden": true }),
+                " Transcript"
+              ] }) : null,
+              /* @__PURE__ */ jsx(SearchSnippet, { snippet: h.snippet, className: "line-clamp-2" })
+            ] })
+          ]
+        }
+      ) }, `${h.messageId}:${h.inTranscript}`);
+    }) })
+  ] });
+}
 function isSafeHref(href) {
   try {
     const url = new URL(href);
@@ -330,6 +406,453 @@ function renderNodes(nodes, opts) {
     }
   });
 }
+function linkPreviewImageSrc(imageUrl, images = "off", proxyUrl) {
+  if (!isHttpsUrl(imageUrl)) return null;
+  if (images === "direct") return imageUrl;
+  if (images !== "proxy" || !proxyUrl) return null;
+  try {
+    return proxyUrl(imageUrl) || null;
+  } catch {
+    return null;
+  }
+}
+function ChatLinkPreview({ preview, images = "off", proxyUrl, tone = "default", className }) {
+  const [imageFailed, setImageFailed] = useState(false);
+  if (preview.status !== "ok" || !isSafeHref(preview.url) || !isHttpsUrl(preview.url)) return null;
+  let host = preview.url;
+  try {
+    host = new URL(preview.url).hostname.replace(/^www\./, "");
+  } catch {
+  }
+  const image = imageFailed ? null : linkPreviewImageSrc(preview.imageUrl, images, proxyUrl);
+  const title = preview.title?.trim() || host;
+  const primary = tone === "primary";
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: preview.url,
+      target: "_blank",
+      rel: "noopener noreferrer nofollow",
+      referrerPolicy: "no-referrer",
+      className: cn(
+        "mt-1.5 flex w-[min(20rem,100%)] flex-col overflow-hidden rounded-lg border-l-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        primary ? "border-primary-foreground/60 bg-primary-foreground/15" : "border-primary bg-background hover:bg-accent",
+        className
+      ),
+      "aria-label": `${title}, ${preview.siteName ?? host}. Open link`,
+      "data-testid": "genesis-chat-link-preview",
+      children: [
+        image ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image,
+            alt: "",
+            loading: "lazy",
+            referrerPolicy: "no-referrer",
+            onError: () => setImageFailed(true),
+            className: "aspect-[1.91/1] w-full bg-muted object-cover",
+            "data-testid": "genesis-chat-link-preview-image"
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 px-2.5 py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("truncate text-[11px] uppercase tracking-wide", primary ? "text-primary-foreground/75" : "text-muted-foreground"), children: preview.siteName ?? host }),
+          /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm font-semibold leading-snug", children: title }),
+          preview.description ? /* @__PURE__ */ jsx("span", { className: cn("line-clamp-2 text-xs", primary ? "text-primary-foreground/85" : "text-muted-foreground"), children: preview.description }) : null
+        ] })
+      ]
+    }
+  );
+}
+function ChatAttachmentCard({ title, subtitle, icon: Icon = ClipboardList, action, tone = "default", className }) {
+  const primary = tone === "primary";
+  const href = action?.href && isSafeHref(action.href) ? action.href : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex w-[min(20rem,100%)] items-center gap-3 rounded-lg p-2.5", primary ? "bg-primary-foreground/15" : "border bg-background", className),
+      "data-testid": "genesis-chat-attachment-card",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("flex size-10 shrink-0 items-center justify-center rounded-md", primary ? "bg-primary-foreground/20" : "bg-primary/10 text-primary"), children: /* @__PURE__ */ jsx(Icon, { className: "size-5", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-semibold", children: title }),
+          subtitle ? /* @__PURE__ */ jsx("span", { className: cn("block truncate text-xs", primary ? "text-primary-foreground/80" : "text-muted-foreground"), children: subtitle }) : null
+        ] }),
+        action && (href || action.onPress) ? href ? /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", variant: primary ? "secondary" : "default", className: "shrink-0", children: /* @__PURE__ */ jsxs("a", { href, target: /^https?:/i.test(href) ? "_blank" : void 0, rel: "noopener noreferrer", children: [
+          action.label,
+          /^https?:/i.test(href) ? /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": true }) : null
+        ] }) }) : /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: primary ? "secondary" : "default", className: "shrink-0", onClick: action.onPress, children: action.label }) : null
+      ]
+    }
+  );
+}
+var ChatErrorBoundary = class extends Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error, info) {
+    if (this.props.onError) this.props.onError(error, info);
+    else console.error("genesis-chat: a message couldn't be drawn", error);
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+};
+function pickVideoMimeType() {
+  if (typeof MediaRecorder === "undefined") return null;
+  for (const type of ["video/mp4;codecs=avc1,mp4a", "video/mp4", "video/webm;codecs=vp9,opus", "video/webm;codecs=vp8,opus", "video/webm"]) {
+    try {
+      if (MediaRecorder.isTypeSupported(type)) return type;
+    } catch {
+    }
+  }
+  return "";
+}
+function useVideoRecorder({ maxMs, onTick }) {
+  const [state, setState] = useState("idle");
+  const [error, setError] = useState(null);
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const [stream, setStream] = useState(null);
+  const [recording, setRecording] = useState(null);
+  const recorder = useRef(null);
+  const chunks = useRef([]);
+  const startedAt = useRef(0);
+  const timer = useRef(null);
+  const streamRef = useRef(null);
+  const urlRef = useRef(null);
+  const session = useRef(0);
+  const tick = useRef(onTick);
+  tick.current = onTick;
+  const stopTimer = () => {
+    if (timer.current) clearInterval(timer.current);
+    timer.current = null;
+  };
+  const releaseUrl = () => {
+    if (urlRef.current && typeof URL !== "undefined" && URL.revokeObjectURL) URL.revokeObjectURL(urlRef.current);
+    urlRef.current = null;
+  };
+  const stopStream = useCallback(() => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    setStream(null);
+  }, []);
+  const open = useCallback(async () => {
+    if (typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia || pickVideoMimeType() === null) {
+      setState("unsupported");
+      setError("This browser can't record video.");
+      return false;
+    }
+    const token = session.current;
+    setState("requesting");
+    setError(null);
+    try {
+      const s = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user", width: { ideal: 1280 }, height: { ideal: 720 } }, audio: true });
+      if (token !== session.current) {
+        s.getTracks().forEach((t) => t.stop());
+        return false;
+      }
+      if (streamRef.current && streamRef.current !== s) streamRef.current.getTracks().forEach((t) => t.stop());
+      streamRef.current = s;
+      setStream(s);
+      setState("previewing");
+      return true;
+    } catch (e) {
+      if (token !== session.current) return false;
+      const denied = e instanceof Error && (e.name === "NotAllowedError" || e.name === "SecurityError");
+      setState(denied ? "denied" : "error");
+      setError(denied ? "Allow the camera and microphone in your browser's settings to record a video." : "The camera couldn't start.");
+      return false;
+    }
+  }, []);
+  const stop = useCallback(() => {
+    const r = recorder.current;
+    if (r && r.state !== "inactive") r.stop();
+  }, []);
+  const start = useCallback(async () => {
+    if (!streamRef.current && !await open()) return;
+    const s = streamRef.current;
+    const mime = pickVideoMimeType() ?? "";
+    let r;
+    try {
+      r = mime ? new MediaRecorder(s, { mimeType: mime, videoBitsPerSecond: 25e5 }) : new MediaRecorder(s);
+    } catch {
+      stopStream();
+      setState("error");
+      setError("This browser can't record video.");
+      return;
+    }
+    r.onerror = () => {
+      stopTimer();
+      r.onstop = null;
+      recorder.current = null;
+      stopStream();
+      setState("error");
+      setError("The recording stopped. Try again.");
+    };
+    releaseUrl();
+    setRecording(null);
+    chunks.current = [];
+    r.ondataavailable = (ev) => {
+      if (ev.data && ev.data.size > 0) chunks.current.push(ev.data);
+    };
+    r.onstop = () => {
+      stopTimer();
+      const durationMs = Date.now() - startedAt.current;
+      const contentType = (r.mimeType || mime || "video/webm").split(";")[0].trim() || "video/webm";
+      const blob = new Blob(chunks.current, { type: contentType });
+      const url = typeof URL !== "undefined" && URL.createObjectURL ? URL.createObjectURL(blob) : null;
+      urlRef.current = url;
+      setRecording({ blob, contentType, name: `video-${Date.now()}.${fileExtension("", contentType) || "webm"}`, durationMs, url });
+      setState("recorded");
+      stopStream();
+    };
+    recorder.current = r;
+    startedAt.current = Date.now();
+    setElapsedMs(0);
+    r.start(1e3);
+    setState("recording");
+    timer.current = setInterval(() => {
+      const ms = Date.now() - startedAt.current;
+      setElapsedMs(ms);
+      tick.current?.();
+      if (ms >= maxMs) stop();
+    }, 250);
+  }, [maxMs, open, stop, stopStream]);
+  const retake = useCallback(async () => {
+    releaseUrl();
+    setRecording(null);
+    setElapsedMs(0);
+    await open();
+  }, [open]);
+  const handOff = useCallback(() => {
+    urlRef.current = null;
+  }, []);
+  const reset = useCallback(() => {
+    session.current += 1;
+    stopTimer();
+    const r = recorder.current;
+    if (r && r.state !== "inactive") {
+      r.onstop = null;
+      r.stop();
+    }
+    recorder.current = null;
+    stopStream();
+    releaseUrl();
+    setRecording(null);
+    setElapsedMs(0);
+    setError(null);
+    setState("idle");
+  }, [stopStream]);
+  useEffect(() => () => reset(), [reset]);
+  return { state, error, elapsedMs, maxMs, stream, recording, open, start, stop, retake, reset, handOff };
+}
+function videoFile(rec) {
+  return {
+    data: rec.blob,
+    name: rec.name,
+    contentType: rec.contentType,
+    previewUrl: rec.url ?? void 0,
+    meta: { kind: "video", durationMs: rec.durationMs, bytes: rec.blob.size }
+  };
+}
+async function uploadVideo(videoUpload, conversationId, rec, fetchImpl = fetch, signal) {
+  const upload = await videoUpload.create(conversationId);
+  signal?.throwIfAborted?.();
+  const res = await fetchImpl(upload.url, { method: "PUT", body: rec.blob, headers: { "Content-Type": rec.contentType }, signal });
+  if (!res.ok) throw new Error(`The video didn't upload (${res.status})`);
+  return {
+    kind: "video",
+    provider: upload.provider,
+    providerId: upload.providerId,
+    status: "pending",
+    name: rec.name,
+    mime: rec.contentType,
+    bytes: rec.blob.size,
+    durationMs: rec.durationMs
+  };
+}
+function Preview({ stream }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    try {
+      el.srcObject = stream;
+    } catch {
+    }
+  }, [stream]);
+  return /* @__PURE__ */ jsx("video", { ref, autoPlay: true, muted: true, playsInline: true, className: "h-full w-full -scale-x-100 object-cover", "aria-label": "Camera preview", "data-testid": "genesis-chat-video-preview" });
+}
+function ChatVideoRecorder({ open, onOpenChange, conversationId, maxMs, send, extra, videoUpload, onTick, onSent, fetchImpl }) {
+  const rec = useVideoRecorder({ maxMs, onTick });
+  const [sending, setSending] = useState(false);
+  const [sendError, setSendError] = useState(null);
+  const upload = useRef(null);
+  const { open: openCamera, reset } = rec;
+  useEffect(() => {
+    if (open) void openCamera();
+    else reset();
+  }, [open, openCamera, reset]);
+  useEffect(() => () => upload.current?.abort(), []);
+  const submit = async () => {
+    const take = rec.recording;
+    if (!take || upload.current) return;
+    const controller = new AbortController();
+    upload.current = controller;
+    setSending(true);
+    setSendError(null);
+    try {
+      if (videoUpload) {
+        const attachment2 = await uploadVideo(videoUpload, conversationId, take, fetchImpl, controller.signal);
+        if (controller.signal.aborted) return;
+        await send({ ...extra, body: "", attachments: [attachment2] });
+      } else {
+        await send({ ...extra, body: "" }, [videoFile(take)]);
+        rec.handOff();
+      }
+      onSent?.();
+      onOpenChange(false);
+    } catch (e) {
+      if (!controller.signal.aborted) setSendError(e instanceof Error ? e.message : "The video didn't send");
+    } finally {
+      upload.current = null;
+      setSending(false);
+    }
+  };
+  const close = (o) => {
+    if (!o) upload.current?.abort();
+    onOpenChange(o);
+  };
+  const recording = rec.state === "recording";
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", "data-testid": "genesis-chat-video-recorder", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Record a video" }),
+      /* @__PURE__ */ jsxs(DialogDescription, { children: [
+        "Up to ",
+        formatDuration(maxMs),
+        ". You can watch it before you send it."
+      ] })
+    ] }),
+    rec.error ? /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+      /* @__PURE__ */ jsx(VideoOff, { className: "size-4", "aria-hidden": true }),
+      /* @__PURE__ */ jsx(AlertDescription, { children: rec.error })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "relative aspect-video w-full overflow-hidden rounded-lg bg-muted", children: [
+      rec.state === "recorded" && rec.recording?.url ? (
+        // eslint-disable-next-line jsx-a11y/media-has-caption -- your own recording, reviewed before sending
+        /* @__PURE__ */ jsx("video", { src: rec.recording.url, controls: true, playsInline: true, className: "h-full w-full object-contain", "aria-label": "Your recording", "data-testid": "genesis-chat-video-review" })
+      ) : rec.stream ? /* @__PURE__ */ jsx(Preview, { stream: rec.stream }) : /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: rec.state === "requesting" ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Starting the camera" }) : /* @__PURE__ */ jsx(Video, { className: "size-8 text-muted-foreground", "aria-hidden": true }) }),
+      recording ? /* @__PURE__ */ jsxs("span", { className: "absolute left-2 top-2 flex items-center gap-1.5 rounded-full bg-background/85 px-2 py-0.5 text-xs font-medium tabular-nums", role: "timer", "aria-live": "off", children: [
+        /* @__PURE__ */ jsx("span", { className: "size-2 animate-pulse rounded-full bg-destructive", "aria-hidden": true }),
+        formatDuration(rec.elapsedMs),
+        " / ",
+        formatDuration(maxMs)
+      ] }) : null,
+      sending ? /* @__PURE__ */ jsxs("span", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-background/70 text-sm font-medium", role: "status", children: [
+        /* @__PURE__ */ jsx(Spinner, {}),
+        " Uploading\u2026",
+        videoUpload ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => upload.current?.abort(), "data-testid": "genesis-chat-video-cancel-upload", children: "Cancel upload" }) : null
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sr-only", role: "status", children: recording ? "Recording" : rec.state === "recorded" ? "Recorded. Watch it, retake it or send it." : "" }),
+    sendError ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", role: "alert", children: sendError }) : null,
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-3", children: rec.state === "recorded" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: () => void rec.retake(), disabled: sending, "data-testid": "genesis-chat-video-retake", children: [
+        /* @__PURE__ */ jsx(RotateCcw, {}),
+        " Retake"
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", onClick: () => void submit(), loading: sending, "data-testid": "genesis-chat-video-send", children: [
+        /* @__PURE__ */ jsx(SendHorizontal, {}),
+        " Send video"
+      ] })
+    ] }) : recording ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "destructive", className: "rounded-full", onClick: rec.stop, "aria-label": "Stop recording", "data-testid": "genesis-chat-video-stop", children: [
+      /* @__PURE__ */ jsx(Square, { className: "fill-current" }),
+      " Stop"
+    ] }) : /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        className: "rounded-full",
+        onClick: () => void rec.start(),
+        disabled: rec.state === "requesting" || rec.state === "unsupported",
+        "aria-label": "Start recording",
+        "data-testid": "genesis-chat-video-record",
+        children: [
+          /* @__PURE__ */ jsx(Circle, { className: "fill-destructive text-destructive" }),
+          " Record"
+        ]
+      }
+    ) })
+  ] }) });
+}
+var muxStreamUrl = (playbackId) => `https://stream.mux.com/${encodeURIComponent(playbackId)}.m3u8`;
+var muxPosterUrl = (playbackId) => `https://image.mux.com/${encodeURIComponent(playbackId)}/thumbnail.jpg`;
+function ChatVideoPlayer({ src, playbackId, poster, processing, failed, uploading, label, className }) {
+  const ref = useRef(null);
+  const [hlsFailed, setHlsFailed] = useState(false);
+  const stream = playbackId ? muxStreamUrl(playbackId) : null;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !stream) return;
+    if (typeof el.canPlayType === "function" && el.canPlayType("application/vnd.apple.mpegurl")) {
+      el.src = stream;
+      return;
+    }
+    let hls = null;
+    let cancelled = false;
+    import('hls.js').then((mod) => {
+      const Hls = mod.default;
+      if (cancelled) return;
+      if (!Hls?.isSupported?.()) {
+        setHlsFailed(true);
+        return;
+      }
+      hls = new Hls();
+      hls.loadSource(stream);
+      hls.attachMedia(el);
+    }).catch(() => {
+      if (!cancelled) setHlsFailed(true);
+    });
+    return () => {
+      cancelled = true;
+      hls?.destroy();
+    };
+  }, [stream]);
+  const posterUrl = poster ?? (playbackId ? muxPosterUrl(playbackId) : null);
+  if (failed) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex aspect-video w-[min(20rem,100%)] items-center justify-center gap-2 rounded-xl bg-muted text-sm text-muted-foreground", className), "data-testid": "genesis-chat-video-failed", children: [
+      /* @__PURE__ */ jsx(VideoOff, { className: "size-4", "aria-hidden": true }),
+      " This video couldn't be processed"
+    ] });
+  }
+  if (processing && !playbackId) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex aspect-video w-[min(20rem,100%)] flex-col items-center justify-center gap-2 rounded-xl bg-muted text-sm text-muted-foreground", className), role: "status", "data-testid": "genesis-chat-video-processing", children: [
+      /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+      " Processing\u2026"
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-[min(20rem,100%)] overflow-hidden rounded-xl bg-muted", className), "data-testid": "genesis-chat-video", children: [
+    stream || src ? (
+      // eslint-disable-next-line jsx-a11y/media-has-caption -- transcripts come from the provider's captions
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref,
+          controls: true,
+          playsInline: true,
+          preload: "metadata",
+          poster: posterUrl ?? void 0,
+          src: stream ? void 0 : src ?? void 0,
+          className: "block max-h-80 w-full",
+          "aria-label": label ?? "Video",
+          "data-testid": stream ? "genesis-chat-video-hls" : void 0
+        }
+      )
+    ) : /* @__PURE__ */ jsx("span", { className: "block aspect-video w-full animate-pulse bg-muted" }),
+    hlsFailed ? /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 bg-background/85 px-2 py-1 text-xs", children: "This browser can't stream this video." }) : null,
+    uploading ? /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center bg-background/40", role: "status", "aria-label": "Uploading", children: /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "text-foreground" }) }) : null
+  ] });
+}
 var playing = null;
 var BARS = 48;
 function resample(peaks, n = BARS) {
@@ -602,13 +1125,20 @@ function Lightbox({ images, index, onIndexChange }) {
   ] }) });
 }
 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
-  ] });
+  const a = view.attachment;
+  const hosted = a != null && a.provider !== "storage" && a.provider !== "external" && a.provider !== "none";
+  return /* @__PURE__ */ jsx(
+    ChatVideoPlayer,
+    {
+      src: hosted ? null : view.url,
+      playbackId: hosted ? a.playbackId : null,
+      poster: view.posterUrl,
+      processing: hosted && a.status === "pending",
+      failed: a?.status === "failed",
+      uploading: !a && view.pending,
+      label: view.name ?? "Video"
+    }
+  );
 }
 function FileChip({ view, tone = "default" }) {
   const primary = tone === "primary";
@@ -665,7 +1195,25 @@ function LinkAttachment({ view, tone }) {
     }
   );
 }
-function MessageAttachments({ views, message, mine, tone, slot }) {
+function attachmentKindOf(kinds, kind) {
+  if (!kinds || !Object.prototype.hasOwnProperty.call(kinds, kind)) return null;
+  const k = kinds[kind];
+  return k && typeof k.title === "function" ? k : null;
+}
+function attachmentCardOf(k, a) {
+  try {
+    const title = k.title(a);
+    if (typeof title !== "string") return null;
+    const sub = typeof k.subtitle === "function" ? k.subtitle(a) : null;
+    const act = typeof k.action === "function" ? k.action(a) : null;
+    const action = act && typeof act === "object" && typeof act.label === "string" && (typeof act.href === "string" || typeof act.onPress === "function") ? { label: act.label, href: typeof act.href === "string" ? act.href : void 0, onPress: typeof act.onPress === "function" ? act.onPress : void 0 } : null;
+    return { title, subtitle: typeof sub === "string" ? sub : null, action };
+  } catch (e) {
+    console.error(`genesis-chat: the "${a.kind}" card couldn't be drawn`, e);
+    return null;
+  }
+}
+function MessageAttachments({ views, message, mine, tone, slot, kinds }) {
   if (views.length === 0) return null;
   const images = views.filter((v) => v.kind === "image");
   const others = views.filter((v) => v.kind !== "image");
@@ -695,11 +1243,69 @@ function MessageAttachments({ views, message, mine, tone, slot }) {
           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;
+          const generic = /* @__PURE__ */ jsx(GenericAttachment, { attachment: v.attachment, message, url: v.url, mine });
+          const k = attachmentKindOf(kinds, v.kind);
+          if (k) {
+            const card = attachmentCardOf(k, v.attachment);
+            return card ? /* @__PURE__ */ jsx(ChatAttachmentCard, { ...card, tone }, v.key) : /* @__PURE__ */ jsx(GenericAttachment, { attachment: v.attachment, message, url: v.url, mine }, v.key);
+          }
+          return Custom ? /* @__PURE__ */ jsx(ChatErrorBoundary, { fallback: generic, children: /* @__PURE__ */ jsx(Custom, { attachment: v.attachment, message, url: v.url, mine }) }, v.key) : null;
       }
     })
   ] });
 }
+var canPickEmoji = (emojibaseUrl) => Boolean(emojibaseUrl?.trim());
+function ChatEmojiPicker({ onSelect, emojibaseUrl, locale, columns = 8, className }) {
+  if (!canPickEmoji(emojibaseUrl)) {
+    if (typeof console !== "undefined") console.warn("genesis-chat: ChatEmojiPicker needs `emojibaseUrl` (self-hosted emojibase-data); it loads nothing without it.");
+    return /* @__PURE__ */ jsx("p", { className: cn("w-[18.5rem] p-3 text-sm text-muted-foreground", className), role: "note", "data-testid": "genesis-chat-emoji-picker-unset", children: "The emoji picker isn't set up." });
+  }
+  return /* @__PURE__ */ jsxs(
+    EmojiPicker.Root,
+    {
+      onEmojiSelect: (e) => onSelect(e.emoji),
+      emojibaseUrl,
+      locale,
+      columns,
+      className: cn("isolate flex h-80 w-[18.5rem] flex-col bg-popover text-popover-foreground", className),
+      "data-testid": "genesis-chat-emoji-picker",
+      children: [
+        /* @__PURE__ */ jsx(
+          EmojiPicker.Search,
+          {
+            autoFocus: true,
+            "aria-label": "Search emoji",
+            placeholder: "Search emoji",
+            className: "m-2 h-9 shrink-0 rounded-md border border-input bg-background px-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
+          }
+        ),
+        /* @__PURE__ */ jsxs(EmojiPicker.Viewport, { className: "relative flex-1 outline-none", children: [
+          /* @__PURE__ */ jsx(EmojiPicker.Loading, { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { size: "sm", "aria-label": "Loading emoji" }) }),
+          /* @__PURE__ */ jsx(EmojiPicker.Empty, { className: "absolute inset-0 flex items-center justify-center text-sm text-muted-foreground", children: "No emoji found" }),
+          /* @__PURE__ */ jsx(
+            EmojiPicker.List,
+            {
+              className: "select-none pb-1.5",
+              components: {
+                CategoryHeader: ({ category, ...props }) => /* @__PURE__ */ jsx("div", { className: "bg-popover px-3 pb-1 pt-2 text-xs font-medium text-muted-foreground", ...props, children: category.label }),
+                Row: ({ children, ...props }) => /* @__PURE__ */ jsx("div", { className: "scroll-my-1.5 px-1.5", ...props, children }),
+                Emoji: ({ emoji, ...props }) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn("flex size-8 items-center justify-center rounded-md text-xl", emoji.isActive && "bg-accent"),
+                    ...props,
+                    children: emoji.emoji
+                  }
+                )
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 var ThreadContext = createContext(null);
 function useThreadContext() {
   const ctx = useContext(ThreadContext);
@@ -729,6 +1335,7 @@ function pendingAsMessage(p) {
     createdAt: p.createdAt,
     editedAt: null,
     deletedAt: null,
+    moderation: null,
     attachments: [],
     reactions: []
   };
@@ -782,6 +1389,10 @@ function MessageRow({ item, startsGroup: startsGroup2, className }) {
   const reactions = pending ? [] : summarizeReactions(message, ctx.me);
   const highlighted = ctx.highlightedId === message.id;
   const actionable = !pending && !deleted;
+  const hidden = !deleted && message.moderation === "hidden";
+  const flagged = !deleted && message.moderation === "flagged";
+  const observer = ctx.role === "observer";
+  const preview = !pending && !deleted && !hidden && message.body ? ctx.previews[message.id]?.[0] : void 0;
   const bubble = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -792,7 +1403,8 @@ function MessageRow({ item, startsGroup: startsGroup2, className }) {
         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"
+        pending?.status === "failed" && "opacity-80",
+        hidden && "opacity-70"
       ),
       "data-testid": deleted ? "genesis-chat-deleted" : note ? "genesis-chat-note" : mine ? "genesis-chat-mine" : "genesis-chat-theirs",
       children: [
@@ -805,8 +1417,13 @@ function MessageRow({ item, startsGroup: startsGroup2, className }) {
           " 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,
+          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, kinds: ctx.attachmentKinds }) }) : null,
           message.body ? /* @__PURE__ */ jsx(ChatMarkdown, { text: message.body, me: ctx.me, tone }) : null,
+          preview ? /* @__PURE__ */ jsx(ChatLinkPreview, { preview, images: ctx.linkPreviewImages, proxyUrl: ctx.linkPreviewProxyUrl, tone }) : null,
+          hidden && mine && !observer ? /* @__PURE__ */ jsxs("span", { className: "mt-1 flex items-center gap-1 text-xs font-medium", "data-testid": "genesis-chat-hidden-notice", children: [
+            /* @__PURE__ */ jsx(EyeOff, { className: "size-3", "aria-hidden": true }),
+            " Hidden by moderation. Only you can see it."
+          ] }) : null,
           /* @__PURE__ */ jsx(Meta, { message, pending, tone })
         ] })
       ]
@@ -817,13 +1434,25 @@ function MessageRow({ item, startsGroup: startsGroup2, className }) {
     {
       id: `genesis-chat-msg-${message.id}`,
       "data-message-id": pending ? void 0 : message.id,
-      "aria-label": messageLabel(message, mine ? "You" : sender.name),
+      "aria-label": `${messageLabel(message, mine ? "You" : sender.name)}${hidden ? " (hidden by moderation)" : flagged && observer ? " (flagged)" : ""}`,
       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,
+          observer && (hidden || flagged) ? /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              variant: hidden ? "destructive" : "outline",
+              className: "mb-0.5 gap-1 px-1.5 py-0 text-[10px]",
+              "data-testid": hidden ? "genesis-chat-moderation-hidden" : "genesis-chat-moderation-flagged",
+              children: [
+                hidden ? /* @__PURE__ */ jsx(EyeOff, { className: "size-3", "aria-hidden": true }) : /* @__PURE__ */ jsx(ShieldAlert, { className: "size-3", "aria-hidden": true }),
+                hidden ? "Hidden by moderation" : "Flagged"
+              ]
+            }
+          ) : 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 }),
@@ -1016,6 +1645,7 @@ function HoverBar({ message, mine }) {
   const ctx = useThreadContext();
   const keepFocus = useRef(null);
   const [open, setOpen] = useState(null);
+  const [full, setFull] = useState(false);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1025,27 +1655,61 @@ function HoverBar({ message, mine }) {
         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__ */ jsxs(
+          Popover,
+          {
+            open: open === "react",
+            onOpenChange: (o) => {
+              setOpen(o ? "react" : null);
+              if (!o) setFull(false);
+            },
+            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, {}) }) }),
+              full ? /* @__PURE__ */ jsx(PopoverContent, { side: "top", align: mine ? "end" : "start", className: "w-auto overflow-hidden p-0", children: /* @__PURE__ */ jsx(
+                ChatEmojiPicker,
+                {
+                  emojibaseUrl: ctx.emojibaseUrl,
+                  onSelect: (emoji) => {
+                    const on = message.reactions.some((r) => r.emoji === emoji && r.userId === ctx.me);
+                    ctx.react(message, emoji, !on);
+                    setOpen(null);
+                    setFull(false);
+                  }
+                }
+              ) }) : /* @__PURE__ */ jsxs(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
+                  );
+                }),
+                canPickEmoji(ctx.emojibaseUrl) ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex size-9 items-center justify-center rounded-full text-muted-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "aria-label": "More reactions",
+                    onClick: () => setFull(true),
+                    "data-testid": "genesis-chat-more-reactions",
+                    children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        ) : 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, {}) }) }),
@@ -1055,6 +1719,345 @@ function HoverBar({ message, mine }) {
     }
   );
 }
+function toLocalInput(d) {
+  const p = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+function ChatScheduleMenu({ onSchedule, disabled, now }) {
+  const [picking, setPicking] = useState(false);
+  const picks = useMemo(() => scheduleQuickPicks(now ?? /* @__PURE__ */ new Date()), [now]);
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "-ml-1 size-8 shrink-0 self-center rounded-full text-muted-foreground",
+          disabled,
+          "aria-label": "Send options",
+          "data-testid": "genesis-chat-send-menu",
+          children: /* @__PURE__ */ jsx(ChevronUp, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", side: "top", className: "w-60", children: [
+        /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(CalendarClock, { className: "size-3.5", "aria-hidden": true }),
+          " Schedule message"
+        ] }),
+        picks.map((p) => /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "gap-2", onSelect: () => onSchedule(p.at), "data-testid": "genesis-chat-schedule-pick", children: [
+          /* @__PURE__ */ jsx(Clock, { className: "size-4", "aria-hidden": true }),
+          " ",
+          p.label
+        ] }, p.label)),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "gap-2", onSelect: () => setPicking(true), "data-testid": "genesis-chat-schedule-custom", children: [
+          /* @__PURE__ */ jsx(CalendarClock, { className: "size-4", "aria-hidden": true }),
+          " Pick a date and time\u2026"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ScheduleDialog, { open: picking, onOpenChange: setPicking, onSchedule, now })
+  ] });
+}
+function ScheduleDialog({ open, onOpenChange, onSchedule, now }) {
+  const base = now ?? /* @__PURE__ */ new Date();
+  const [value, setValue] = useState(() => toLocalInput(new Date(base.getTime() + 60 * 6e4)));
+  useEffect(() => {
+    if (open) setValue(toLocalInput(new Date((now ?? /* @__PURE__ */ new Date()).getTime() + 60 * 6e4)));
+  }, [open]);
+  const at = new Date(value);
+  const ok = isSchedulable(at, now ?? /* @__PURE__ */ new Date());
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Schedule message" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "It sends at this time, in your time zone, as if you'd sent it then." })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "flex flex-col gap-2",
+        onSubmit: (e) => {
+          e.preventDefault();
+          if (!ok) return;
+          onSchedule(at);
+          onOpenChange(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "genesis-chat-schedule-at", children: "Date and time" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "genesis-chat-schedule-at",
+              type: "datetime-local",
+              value,
+              min: toLocalInput(new Date(base.getTime() + 6e4)),
+              onChange: (e) => setValue(e.target.value),
+              "aria-invalid": !ok,
+              "aria-describedby": "genesis-chat-schedule-hint",
+              "data-testid": "genesis-chat-schedule-input"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { id: "genesis-chat-schedule-hint", className: cn("text-xs", ok ? "text-muted-foreground" : "text-destructive"), children: ok ? scheduleLabel(at, now ?? /* @__PURE__ */ new Date()) : "Pick a time from a minute to a year from now." }),
+          /* @__PURE__ */ jsxs(DialogFooter, { className: "mt-2", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !ok, "data-testid": "genesis-chat-schedule-confirm", children: "Schedule" })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+function ChatScheduledList({ conversationId, conversationTitle, className }) {
+  const { items, isLoading, cancel } = useScheduled(conversationId);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 p-3", className), "aria-busy": true, "aria-label": "Loading scheduled messages", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" })
+    ] });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { icon: CalendarClock, title: "Nothing scheduled", description: "Use the arrow beside Send to schedule a message.", className });
+  }
+  return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col divide-y", className), "aria-label": "Scheduled messages", "data-testid": "genesis-chat-scheduled-list", children: items.map((s) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3 px-3 py-2.5", "data-testid": "genesis-chat-scheduled-item", children: [
+    s.status === "failed" ? /* @__PURE__ */ jsx(AlertCircle, { className: "mt-0.5 size-4 shrink-0 text-destructive", "aria-hidden": true }) : /* @__PURE__ */ jsx(Clock, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-xs font-medium text-muted-foreground", children: [
+        s.status === "failed" ? "Couldn't send" : scheduleLabel(s.sendAt),
+        !conversationId && conversationTitle ? ` \xB7 ${conversationTitle(s.conversationId)}` : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "truncate text-sm", children: previewText(s.body, s.attachments[0]?.kind ?? null) }),
+      s.error ? /* @__PURE__ */ jsx("div", { className: "text-xs text-destructive", children: s.error }) : null
+    ] }),
+    s.status === "scheduled" ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "h-7 shrink-0 gap-1 text-xs",
+        onClick: () => void cancel(s.id).then(() => toast.success("Scheduled message cancelled"), () => toast.error("Couldn't cancel it")),
+        "aria-label": `Cancel the message scheduled for ${scheduleLabel(s.sendAt)}`,
+        "data-testid": "genesis-chat-scheduled-cancel",
+        children: [
+          /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": true }),
+          " Cancel"
+        ]
+      }
+    ) : null
+  ] }, s.id)) });
+}
+function ChatAwayBanner({ availability, name, people, now, className }) {
+  const line = people ? awaySummary(people, { now }) : awayLine(availability, name ?? "They", { now });
+  if (!line) return null;
+  return /* @__PURE__ */ jsxs(Alert, { className: cn("rounded-none border-x-0 border-t-0 px-3 py-2", className), role: "status", "data-testid": "genesis-chat-away-banner", children: [
+    /* @__PURE__ */ jsx(Moon, { className: "size-4", "aria-hidden": true }),
+    /* @__PURE__ */ jsx(AlertDescription, { className: "text-xs", children: line })
+  ] });
+}
+var DAY_NAMES = {
+  mon: "Monday",
+  tue: "Tuesday",
+  wed: "Wednesday",
+  thu: "Thursday",
+  fri: "Friday",
+  sat: "Saturday",
+  sun: "Sunday"
+};
+var FALLBACK_ZONES = [
+  "UTC",
+  "America/New_York",
+  "America/Chicago",
+  "America/Denver",
+  "America/Los_Angeles",
+  "America/Toronto",
+  "America/Sao_Paulo",
+  "Europe/London",
+  "Europe/Paris",
+  "Europe/Berlin",
+  "Africa/Johannesburg",
+  "Asia/Dubai",
+  "Asia/Kolkata",
+  "Asia/Singapore",
+  "Asia/Tokyo",
+  "Australia/Sydney",
+  "Pacific/Auckland"
+];
+function timeZones() {
+  const intl = Intl;
+  try {
+    const all = intl.supportedValuesOf?.("timeZone");
+    if (all?.length) return all.includes("UTC") ? all : ["UTC", ...all];
+  } catch {
+  }
+  return FALLBACK_ZONES;
+}
+var deviceZone = () => {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+};
+var defaultDays = () => Object.fromEntries(WEEKDAYS.map((d) => [d, { on: d !== "sat" && d !== "sun", from: "09:00", to: "17:00" }]));
+function daysFrom(hours) {
+  if (!hours) return defaultDays();
+  return Object.fromEntries(
+    WEEKDAYS.map((d) => {
+      const first = hours[d]?.[0];
+      return [d, first ? { on: true, from: first[0], to: first[1] } : { on: false, from: "09:00", to: "17:00" }];
+    })
+  );
+}
+function ChatAvailabilitySettings({ onSaved, className }) {
+  const { mine, mineLoading, setMine } = useAvailability();
+  const zones = useMemo(timeZones, []);
+  const [message, setMessage] = useState("");
+  const [until, setUntil] = useState("");
+  const [zone, setZone] = useState(deviceZone);
+  const [useHours, setUseHours] = useState(false);
+  const [days, setDays] = useState(defaultDays);
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    if (mineLoading) return;
+    setMessage(mine?.awayMessage ?? "");
+    setUntil(mine?.awayUntil ? toLocalInput(new Date(mine.awayUntil)) : "");
+    setZone(mine?.timeZone ?? deviceZone());
+    setUseHours(Boolean(mine?.hours && Object.keys(mine.hours).length));
+    setDays(daysFrom(mine?.hours));
+  }, [mine, mineLoading]);
+  if (mineLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), "aria-busy": true, "aria-label": "Loading availability", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" })
+    ] });
+  }
+  const badRange = useHours && WEEKDAYS.some((d) => days[d].on && days[d].from === days[d].to);
+  const save = async () => {
+    if (badRange) return;
+    const hours = useHours ? Object.fromEntries(
+      WEEKDAYS.filter((d) => days[d].on).map((d) => {
+        const kept = (mine?.hours?.[d] ?? []).slice(1);
+        return [d, [[days[d].from, days[d].to], ...kept]];
+      })
+    ) : null;
+    setBusy(true);
+    try {
+      await setMine({
+        awayMessage: message.trim() || null,
+        awayUntil: until ? new Date(until).toISOString() : null,
+        timeZone: zone,
+        hours
+      });
+      toast.success("Availability saved");
+      onSaved?.();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Couldn't save");
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: cn("flex flex-col gap-6", className),
+      onSubmit: (e) => {
+        e.preventDefault();
+        void save();
+      },
+      "data-testid": "genesis-chat-availability-settings",
+      children: [
+        /* @__PURE__ */ jsxs("fieldset", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("legend", { className: "mb-1 text-sm font-semibold", children: "Away message" }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "genesis-chat-away-message", className: "sr-only", children: "Away message" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: "genesis-chat-away-message",
+              value: message,
+              onChange: (e) => setMessage(e.target.value),
+              maxLength: 280,
+              placeholder: "Back Monday. For anything urgent, call the office.",
+              className: "min-h-20"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "genesis-chat-away-until", className: "text-xs text-muted-foreground", children: "Away until (optional)" }),
+              /* @__PURE__ */ jsx(Input, { id: "genesis-chat-away-until", type: "datetime-local", value: until, onChange: (e) => setUntil(e.target.value), className: "w-56" })
+            ] }),
+            until || message ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => {
+                  setUntil("");
+                  setMessage("");
+                },
+                children: "I'm back"
+              }
+            ) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("fieldset", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx("legend", { className: "mb-1 flex w-full items-center justify-between gap-2 text-sm font-semibold", children: /* @__PURE__ */ jsx("span", { children: "Working hours" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "genesis-chat-use-hours", className: "text-sm font-normal text-muted-foreground", children: "Tell people when you usually reply" }),
+            /* @__PURE__ */ jsx(Switch, { id: "genesis-chat-use-hours", checked: useHours, onCheckedChange: setUseHours })
+          ] }),
+          useHours ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", role: "group", "aria-label": "Hours per day", children: [
+            WEEKDAYS.map((d) => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", "data-testid": `genesis-chat-hours-${d}`, children: [
+              /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  checked: days[d].on,
+                  onCheckedChange: (on) => setDays((x) => ({ ...x, [d]: { ...x[d], on } })),
+                  "aria-label": `Working on ${DAY_NAMES[d]}`
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cn("w-24", !days[d].on && "text-muted-foreground"), children: DAY_NAMES[d] }),
+              days[d].on ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "time",
+                    value: days[d].from,
+                    onChange: (e) => setDays((x) => ({ ...x, [d]: { ...x[d], from: e.target.value } })),
+                    "aria-label": `${DAY_NAMES[d]} from`,
+                    className: "h-8 w-28"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2013" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "time",
+                    value: days[d].to,
+                    onChange: (e) => setDays((x) => ({ ...x, [d]: { ...x[d], to: e.target.value } })),
+                    "aria-label": `${DAY_NAMES[d]} to`,
+                    className: "h-8 w-28"
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Not working" })
+            ] }, d)),
+            badRange ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", role: "alert", children: "A day's start and end can't be the same time." }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "An end before the start runs past midnight." })
+          ] }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "genesis-chat-time-zone", className: "text-xs text-muted-foreground", children: "Time zone" }),
+            /* @__PURE__ */ jsxs(Select, { value: zone, onValueChange: setZone, children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { id: "genesis-chat-time-zone", className: "w-72", "aria-label": "Time zone", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { className: "max-h-72", children: (zones.includes(zone) ? zones : [zone, ...zones]).map((z) => /* @__PURE__ */ jsx(SelectItem, { value: z, children: z.replace(/_/g, " ") }, z)) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { type: "submit", loading: busy, disabled: badRange, "data-testid": "genesis-chat-availability-save", children: "Save" }) })
+      ]
+    }
+  );
+}
 var SAMPLE_MS = 100;
 function pickVoiceMimeType() {
   if (typeof MediaRecorder === "undefined") return null;
@@ -1266,10 +2269,21 @@ function ChatComposer({
   accessory,
   onSent,
   autoFocus,
+  disabledReason,
+  topic,
+  scheduling = true,
+  video = true,
+  emoji = true,
+  emojibaseUrl,
   className,
   ref
 }) {
-  const { userId: me } = useChat();
+  const { userId: me, videoUpload } = useChat();
+  const conversationId = state.conversation?.id ?? null;
+  const scheduled = useScheduled(conversationId, { enabled: scheduling && Boolean(conversationId) });
+  const [recordingVideo, setRecordingVideo] = useState(false);
+  const [emojiOpen, setEmojiOpen] = useState(false);
+  const canRecordVideo = video && typeof MediaRecorder !== "undefined" && typeof navigator !== "undefined" && Boolean(navigator.mediaDevices?.getUserMedia);
   const [text, setText] = useState("");
   const [drafts, setDrafts] = useState([]);
   const [internal, setInternal] = useState(false);
@@ -1277,6 +2291,9 @@ function ChatComposer({
   const picker = useRef(null);
   const draftsRef = useRef(drafts);
   draftsRef.current = drafts;
+  const scheduleId = useRef(null);
+  const [schedulingNow, setSchedulingNow] = useState(false);
+  const schedulingRef = useRef(false);
   const recorder = useVoiceRecorder({
     maxMs: recordingLimitMs(state.role),
     onTick: state.signalRecording,
@@ -1341,8 +2358,39 @@ function ChatComposer({
   });
   const common = () => ({
     replyToId: replyTo?.id ?? null,
-    visibility: internal ? "observers" : "everyone"
+    visibility: internal ? "observers" : "everyone",
+    ...topic ? { topic } : {}
   });
+  const scheduleAt = async (at) => {
+    const body = text.trim();
+    if (!body && drafts.length === 0 || !conversationId || schedulingRef.current) return;
+    schedulingRef.current = true;
+    setSchedulingNow(true);
+    scheduleId.current ??= randomId();
+    const files = drafts.map((d) => ({
+      data: d.file,
+      name: d.file.name,
+      contentType: d.file.type || "application/octet-stream",
+      meta: { kind: d.kind, bytes: d.file.size, name: d.file.name }
+    }));
+    try {
+      await scheduled.schedule(
+        { conversationId, clientId: scheduleId.current, body, mentions: parseMentions(body), replyToId: replyTo?.id ?? null, topic: topic ?? null, sendAt: at },
+        files
+      );
+      scheduleId.current = null;
+      setText("");
+      drafts.forEach((d) => revoke(d.previewUrl));
+      setDrafts([]);
+      onCancelReply?.();
+      toast.success(`Scheduled for ${scheduleLabel(at)}`);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Couldn't schedule it");
+    } finally {
+      schedulingRef.current = false;
+      setSchedulingNow(false);
+    }
+  };
   const submit = () => {
     const body = text.trim();
     if (!body && drafts.length === 0) return;
@@ -1396,6 +2444,24 @@ function ChatComposer({
   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.accessError) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-center gap-2 border-t p-3 text-sm text-muted-foreground", className), role: "alert", "data-testid": "genesis-chat-access-error", children: [
+      /* @__PURE__ */ jsx("span", { children: "Couldn't check whether you can post here." }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-7 gap-1", onClick: () => void state.refetchAccess?.(), "data-testid": "genesis-chat-access-retry", children: [
+        /* @__PURE__ */ jsx(RefreshCw, { className: "size-3.5", "aria-hidden": true }),
+        " Try again"
+      ] })
+    ] });
+  }
+  if (!state.canPost && state.conversationLoading) {
+    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 && disabledReason) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("border-t p-3 text-center text-sm text-muted-foreground", className), role: "status", "data-testid": "genesis-chat-composer-disabled", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mr-1 inline size-3.5 align-[-2px]", "aria-hidden": true }),
+      disabledReason
+    ] });
+  }
   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: [
@@ -1423,6 +2489,13 @@ function ChatComposer({
       ] }),
       /* @__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,
+    scheduling && scheduled.items.length ? /* @__PURE__ */ jsx("div", { className: "flex items-center px-3 pt-1.5", children: /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 gap-1 px-2 text-xs text-muted-foreground", "data-testid": "genesis-chat-scheduled-count", children: [
+        /* @__PURE__ */ jsx(CalendarClock, { className: "size-3.5", "aria-hidden": true }),
+        scheduled.items.length === 1 ? "1 scheduled message" : `${scheduled.items.length} scheduled messages`
+      ] }) }),
+      /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-80 p-0", children: /* @__PURE__ */ jsx(ChatScheduledList, { conversationId }) })
+    ] }) }) : 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 }),
@@ -1485,6 +2558,7 @@ function ChatComposer({
         }
       ),
       /* @__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, {}) }) }),
+      canRecordVideo && conversationId ? /* @__PURE__ */ jsx(Tooltip, { content: "Record a video", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "shrink-0 rounded-full text-muted-foreground", onClick: () => setRecordingVideo(true), "aria-label": "Record a video", "data-testid": "genesis-chat-video-button", children: /* @__PURE__ */ jsx(Video, {}) }) }) : null,
       accessory,
       state.role === "observer" ? /* @__PURE__ */ jsx(Tooltip, { content: internal ? "Internal note: only observers see it" : "Write an internal note", children: /* @__PURE__ */ jsx(
         Toggle,
@@ -1518,7 +2592,26 @@ function ChatComposer({
           "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(
+      emoji && canPickEmoji(emojibaseUrl) ? /* @__PURE__ */ jsxs(Popover, { open: emojiOpen, onOpenChange: setEmojiOpen, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "shrink-0 rounded-full text-muted-foreground", "aria-label": "Add emoji", "data-testid": "genesis-chat-emoji-button", children: /* @__PURE__ */ jsx(Smile, {}) }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { side: "top", align: "end", className: "w-auto overflow-hidden p-0", onCloseAutoFocus: (e) => {
+          e.preventDefault();
+          textarea.current?.focus();
+        }, children: /* @__PURE__ */ jsx(
+          ChatEmojiPicker,
+          {
+            emojibaseUrl,
+            onSelect: (e) => {
+              insertText(e);
+              setEmojiOpen(false);
+            }
+          }
+        ) })
+      ] }) : null,
+      hasContent ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__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, {}) }),
+        scheduling && conversationId && !internal ? /* @__PURE__ */ jsx(ChatScheduleMenu, { onSchedule: (at) => void scheduleAt(at), disabled: schedulingNow }) : null
+      ] }) : /* @__PURE__ */ jsx(Tooltip, { content: "Record a voice message", children: /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
@@ -1531,7 +2624,127 @@ function ChatComposer({
           children: /* @__PURE__ */ jsx(Mic, {})
         }
       ) })
-    ] })
+    ] }),
+    canRecordVideo && conversationId ? /* @__PURE__ */ jsx(
+      ChatVideoRecorder,
+      {
+        open: recordingVideo,
+        onOpenChange: setRecordingVideo,
+        conversationId,
+        maxMs: recordingLimitMs(state.role),
+        send: (input, files) => state.send({ ...input, ...common() }, files),
+        videoUpload,
+        onTick: state.signalRecordingVideo ?? state.signalRecording,
+        onSent: () => {
+          onCancelReply?.();
+          onSent?.();
+        }
+      }
+    ) : null
+  ] });
+}
+var ALL = "__all__";
+function ChatTopicBar({ topics, value, onValueChange, canManage = false, onSetTopic, className }) {
+  const [creating, setCreating] = useState(false);
+  const [title, setTitle] = useState("");
+  const [busy, setBusy] = useState(false);
+  const current = value ? topics.find((t) => t.topic === value) : void 0;
+  const create = async () => {
+    const name = title.trim();
+    if (!name || !onSetTopic) return;
+    const key = topicKey(name);
+    if (topics.some((t) => t.topic === key)) {
+      toast.error("There's already a topic with that name");
+      return;
+    }
+    setBusy(true);
+    try {
+      await onSetTopic(key, { title: name, position: topics.length });
+      setCreating(false);
+      setTitle("");
+      onValueChange(key);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Couldn't add the topic");
+    } finally {
+      setBusy(false);
+    }
+  };
+  const toggleClosed = async (t) => {
+    try {
+      await onSetTopic?.(t.topic, { closed: !t.closedAt });
+      toast.success(t.closedAt ? `Reopened ${t.title}` : `Closed ${t.title}`);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Couldn't change the topic");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 border-b px-2 py-1.5", className), "data-testid": "genesis-chat-topic-bar", children: [
+    /* @__PURE__ */ jsxs(
+      ToggleGroup,
+      {
+        type: "single",
+        value: value ?? ALL,
+        onValueChange: (v) => {
+          if (v) onValueChange(v === ALL ? null : v);
+        },
+        "aria-label": "Topics",
+        className: "flex min-w-0 flex-1 justify-start gap-1 overflow-x-auto [scrollbar-width:none]",
+        children: [
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: ALL, size: "sm", className: "h-7 shrink-0 rounded-full px-3 text-xs", "data-testid": "genesis-chat-topic-all", children: "All" }),
+          topics.map((t) => /* @__PURE__ */ jsxs(
+            ToggleGroupItem,
+            {
+              value: t.topic,
+              size: "sm",
+              className: "h-7 shrink-0 gap-1 rounded-full px-3 text-xs",
+              "aria-label": t.closedAt ? `${t.title} (closed)` : t.title,
+              "data-testid": `genesis-chat-topic-${t.topic}`,
+              children: [
+                t.closedAt ? /* @__PURE__ */ jsx(Lock, { className: "size-3", "aria-hidden": true }) : /* @__PURE__ */ jsx(Hash, { className: "size-3 opacity-60", "aria-hidden": true }),
+                /* @__PURE__ */ jsx("span", { className: "max-w-[10rem] truncate", children: t.title })
+              ]
+            },
+            t.topic
+          ))
+        ]
+      }
+    ),
+    canManage && onSetTopic ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 shrink-0 rounded-full", "aria-label": "Topic options", "data-testid": "genesis-chat-topic-menu", children: /* @__PURE__ */ jsx(MoreHorizontal, {}) }) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "gap-2", onSelect: () => setCreating(true), "data-testid": "genesis-chat-topic-new", children: [
+          /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": true }),
+          " New topic"
+        ] }),
+        current ? /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "gap-2", onSelect: () => void toggleClosed(current), "data-testid": "genesis-chat-topic-close", children: [
+          current.closedAt ? /* @__PURE__ */ jsx(LockOpen, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ jsx(Lock, { className: "size-4", "aria-hidden": true }),
+          current.closedAt ? "Reopen topic" : "Close topic"
+        ] }) : null
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(Dialog, { open: creating, onOpenChange: (o) => !busy && setCreating(o), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "New topic" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Messages posted in a topic stay together, under its name." })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "flex flex-col gap-2",
+          onSubmit: (e) => {
+            e.preventDefault();
+            void create();
+          },
+          children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "genesis-chat-topic-title", children: "Name" }),
+            /* @__PURE__ */ jsx(Input, { id: "genesis-chat-topic-title", value: title, onChange: (e) => setTitle(e.target.value), maxLength: 160, autoFocus: true, placeholder: "Week 1: Habits" }),
+            /* @__PURE__ */ jsxs(DialogFooter, { className: "mt-2", children: [
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setCreating(false), children: "Cancel" }),
+              /* @__PURE__ */ jsx(Button, { type: "submit", loading: busy, disabled: !title.trim(), "data-testid": "genesis-chat-topic-create", children: "Add topic" })
+            ] })
+          ]
+        }
+      )
+    ] }) })
   ] });
 }
 var REPORT_REASONS = [
@@ -1549,7 +2762,7 @@ function errorText(e) {
   }
   return e instanceof Error ? e.message : "Something went wrong";
 }
-function DefaultHeader({ title, subtitle, otherUserId, resolveUser, onBack, backClassName }) {
+function DefaultHeader({ title, subtitle, otherUserId, resolveUser, onBack, backClassName, onSearch }) {
   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,
@@ -1557,7 +2770,8 @@ function DefaultHeader({ title, subtitle, otherUserId, resolveUser, onBack, back
     /* @__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
-    ] })
+    ] }),
+    onSearch ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "shrink-0", onClick: onSearch, "aria-label": "Search this conversation", "data-testid": "genesis-chat-thread-search", children: /* @__PURE__ */ jsx(Search, {}) }) : null
   ] });
 }
 function DefaultEmpty2({ canPost }) {
@@ -1570,14 +2784,25 @@ function ChatThread({
   onBack,
   backClassName,
   threadRootId,
-  topic,
+  topic: topicProp,
   onOpenThread,
   quickReactions = QUICK_REACTIONS,
   placeholder,
+  showTopics,
+  jumpTo: jumpToProp,
+  search = true,
+  scheduling = true,
+  availability = true,
+  emojibaseUrl,
+  linkPreviewImages = "off",
+  linkPreviewProxyUrl,
   slots,
   className
 }) {
-  const { userId: me } = useChat();
+  const { userId: me, attachmentKinds } = useChat();
+  const topicsState = useTopics(threadRootId ? null : conversationId);
+  const [chosenTopic, setChosenTopic] = useState(null);
+  const topic = topicProp ?? chosenTopic ?? void 0;
   const state = useConversation(conversationId, { threadRootId, topic });
   const actions = useMessageActions();
   const pinIds = usePins(conversationId);
@@ -1602,7 +2827,20 @@ function ChatThread({
     setReplyTo(null);
     setEditingId(null);
     setNewCount(0);
+    setChosenTopic(null);
   }, [conversationId]);
+  const topics = topicsState.topics;
+  const currentTopic = topic ? topics.find((t) => t.topic === topic) : void 0;
+  const canManageTopics = role === "owner" || role === "admin";
+  const showTopicBar = !threadRootId && topicProp === void 0 && (topics.length > 0 || showTopics && canManageTopics);
+  const topicClosed = Boolean(currentTopic?.closedAt) && role !== "owner" && role !== "admin" && role !== "observer";
+  const linkMessageIds = useMemo(
+    () => messages.filter((m) => !m.deletedAt && m.moderation !== "hidden" && extractLinks(m.body).length > 0).map((m) => m.id),
+    [messages]
+  );
+  const previews = useLinkPreviews(linkMessageIds);
+  const avail = useAvailability(availability ? conversationId : null);
+  const [searching, setSearching] = useState(false);
   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;
@@ -1614,6 +2852,15 @@ function ChatThread({
     (id) => resolveUser(id).name
   );
   const subtitle = members.length > 2 ? `${members.length} members` : null;
+  const awayPeople = useMemo(() => {
+    if (!availability) return null;
+    const ids = otherUserId ? [otherUserId] : members.filter((m) => m.userId !== me).map((m) => m.userId);
+    const people = ids.flatMap((id) => {
+      const a = avail.forUser(id);
+      return a ? [{ availability: a, name: resolveUser(id).name }] : [];
+    });
+    return awaySummary(people) ? people : null;
+  }, [availability, otherUserId, members, me, avail, resolveUser]);
   const scroller = useRef(null);
   const content = useRef(null);
   const atBottom = useRef(true);
@@ -1693,6 +2940,40 @@ function ChatThread({
     setHighlightedId(id);
     setTimeout(() => setHighlightedId((h) => h === id ? null : h), 1600);
   }, []);
+  const [pendingJump, setPendingJump] = useState(jumpToProp ? { ...jumpToProp, phase: "new" } : null);
+  useEffect(() => {
+    if (jumpToProp) setPendingJump({ ...jumpToProp, phase: "new" });
+  }, [jumpToProp?.messageId, jumpToProp?.seq]);
+  const { loadUntil } = state;
+  useEffect(() => {
+    if (!pendingJump || state.isLoading) return;
+    const { messageId, seq, phase } = pendingJump;
+    if (byId.has(messageId)) {
+      setPendingJump(null);
+      requestAnimationFrame(() => jumpTo(messageId));
+      return;
+    }
+    if (phase === "loading") return;
+    if (phase === "loaded" || seq == null) {
+      setPendingJump(null);
+      toast.info("That message isn't here any more");
+      return;
+    }
+    setPendingJump({ messageId, seq, phase: "loading" });
+    const settle = () => setPendingJump((p) => p && p.messageId === messageId ? { ...p, phase: "loaded" } : p);
+    void loadUntil(seq).then(settle, (e) => {
+      toast.error(errorText(e));
+      settle();
+    });
+  }, [pendingJump, byId, state.isLoading, loadUntil, jumpTo]);
+  const openHit = useCallback(
+    (hit) => {
+      setSearching(false);
+      if (topic && topicProp === void 0) setChosenTopic(null);
+      setPendingJump({ messageId: hit.messageId, seq: hit.seq, phase: "new" });
+    },
+    [topic, topicProp]
+  );
   const run = useCallback(async (p, done) => {
     try {
       await p;
@@ -1714,6 +2995,11 @@ function ChatThread({
     byId,
     quickReactions,
     attachmentSlot: slots?.attachment,
+    attachmentKinds,
+    previews,
+    emojibaseUrl,
+    linkPreviewImages,
+    linkPreviewProxyUrl,
     highlightedId,
     editingId,
     reply: (m) => {
@@ -1790,7 +3076,13 @@ function ChatThread({
             /* @__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) })
+          /* @__PURE__ */ jsx(
+            ChatErrorBoundary,
+            {
+              fallback: /* @__PURE__ */ jsx("p", { className: "px-4 py-1 text-xs italic text-muted-foreground", role: "note", "data-testid": "genesis-chat-row-error", children: "This message couldn't be shown." }),
+              children: /* @__PURE__ */ jsx(MessageRow, { item, startsGroup: startsGroup(items, i) })
+            }
+          )
         ] }, itemKey(item));
       })
     ] });
@@ -1815,8 +3107,20 @@ function ChatThread({
             role,
             resolveUser,
             onBack,
-            backClassName
+            backClassName,
+            onSearch: search && !threadRootId ? () => setSearching(true) : void 0
           }),
+          showTopicBar ? /* @__PURE__ */ jsx(
+            ChatTopicBar,
+            {
+              topics,
+              value: topic ?? null,
+              onValueChange: setChosenTopic,
+              canManage: canManageTopics,
+              onSetTopic: topicsState.setTopic
+            }
+          ) : null,
+          awayPeople ? /* @__PURE__ */ jsx(ChatAwayBanner, { people: awayPeople }) : null,
           pinnedMessage ? /* @__PURE__ */ jsxs(
             "button",
             {
@@ -1872,7 +3176,11 @@ function ChatThread({
               replyTo,
               onCancelReply: () => setReplyTo(null),
               resolveUser,
-              placeholder,
+              placeholder: currentTopic ? `Message #${currentTopic.title}` : placeholder,
+              topic: topic ?? null,
+              disabledReason: topicClosed ? "This topic is closed" : null,
+              scheduling,
+              emojibaseUrl,
               accessory: renderSlot(EmptyAccessory, slots?.composerAccessory, {
                 conversationId,
                 insertText: (t) => composer.current?.insertText(t),
@@ -1883,6 +3191,13 @@ function ChatThread({
         ]
       }
     ),
+    search && !threadRootId ? /* @__PURE__ */ jsx(Sheet, { open: searching, onOpenChange: setSearching, children: /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "flex w-full flex-col gap-0 p-0 sm:max-w-md", children: [
+      /* @__PURE__ */ jsxs(SheetHeader, { className: "border-b px-4 py-3", children: [
+        /* @__PURE__ */ jsx(SheetTitle, { children: "Search" }),
+        /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Search this conversation and jump to a message." })
+      ] }),
+      /* @__PURE__ */ jsx(ChatSearch, { conversationId, resolveUser, onOpen: openHit, autoFocus: true, className: "min-h-0 flex-1" })
+    ] }) }) : null,
     /* @__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?" }),
@@ -1980,9 +3295,17 @@ function ChatPanel({
   inboxProps,
   threadProps,
   slots,
+  search = true,
   className
 }) {
   const [own, setOwn] = useState(defaultSelectedId);
+  const [searching, setSearching] = useState(false);
+  const [jump, setJump] = useState(null);
+  const { items } = useInbox({ kind: inboxProps?.kind });
+  const titleOf = (id) => {
+    const item = items.find((i) => i.conversationId === id);
+    return item ? inboxTitle(item, resolveUser, inboxProps?.fallbackTitle) : "a conversation";
+  };
   const selected = controlled !== void 0 ? controlled : own;
   const select = (id) => {
     if (controlled === void 0) setOwn(id);
@@ -2002,10 +3325,41 @@ function ChatPanel({
         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) })
+        inboxHeader || search ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b px-3 py-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: inboxHeader }),
+          search ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "size-8 shrink-0",
+              onClick: () => setSearching((s) => !s),
+              "aria-label": searching ? "Close search" : "Search messages",
+              "aria-pressed": searching,
+              "data-testid": "genesis-chat-panel-search",
+              children: searching ? /* @__PURE__ */ jsx(X, {}) : /* @__PURE__ */ jsx(Search, {})
+            }
+          ) : null
+        ] }) : null,
+        searching ? /* @__PURE__ */ jsx(
+          ChatSearch,
+          {
+            resolveUser,
+            autoFocus: true,
+            conversationTitle: titleOf,
+            onOpen: (hit) => {
+              setJump({ messageId: hit.messageId, seq: hit.seq });
+              select(hit.conversationId);
+            },
+            className: "min-h-0 flex-1"
+          }
+        ) : /* @__PURE__ */ jsx(ChatInbox, { ...inboxProps, resolveUser, selectedId: selected, onSelect: (id) => {
+          setJump(null);
+          select(id);
+        }, 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, {})
+      end: selected ? /* @__PURE__ */ jsx(ChatThread, { ...threadProps, jumpTo: jump, conversationId: selected, resolveUser, onBack: () => select(null), backClassName: "md:hidden" }, selected) : renderSlot(NoSelection, slots?.noSelection, {})
     }
   );
 }
@@ -2075,6 +3429,7 @@ function createMemoryChatClient(options) {
       createdAt,
       editedAt: m.editedAt ?? null,
       deletedAt: m.deletedAt ?? null,
+      moderation: m.moderation ?? null,
       attachments: (m.attachments ?? []).map((a, i) => attachment(id, a, i)),
       reactions: m.reactions ?? []
     };
@@ -2107,7 +3462,16 @@ function createMemoryChatClient(options) {
       muted: seed.muted ?? false,
       pinned: seed.pinned ?? false,
       messages: [],
-      pins: seed.pins ?? []
+      pins: seed.pins ?? [],
+      topics: (seed.topics ?? []).map((t, i) => ({
+        conversationId: seed.id,
+        topic: t.topic,
+        title: t.title ?? t.topic,
+        position: i,
+        closedAt: t.closed ? (/* @__PURE__ */ new Date()).toISOString() : null,
+        createdBy: null,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      }))
     };
     for (const m of seed.messages ?? []) c.messages.push(makeMessage(c, m));
     convs.set(seed.id, c);
@@ -2124,7 +3488,20 @@ function createMemoryChatClient(options) {
     }
     throw new ChatError("Message not found", "42501", "message");
   };
-  const visible = (c, m) => m.visibility !== "observers" || c.myRole === "observer";
+  const visible = (c, m) => (m.visibility !== "observers" || c.myRole === "observer") && (m.moderation !== "hidden" || m.senderId === me || c.myRole === "observer");
+  const scheduledList = [];
+  const availability = new Map(
+    Object.entries(options.availability ?? {}).map(([userId, a]) => [
+      userId,
+      { userId, awayMessage: a.awayMessage ?? null, awayUntil: a.awayUntil ?? null, timeZone: a.timeZone ?? null, hours: a.hours ?? null }
+    ])
+  );
+  const previews = new Map(
+    (options.linkPreviews ?? []).filter((p) => p.url).map((p) => [
+      p.url,
+      { url: p.url, status: p.status ?? "ok", title: p.title ?? null, description: p.description ?? null, imageUrl: p.imageUrl ?? null, siteName: p.siteName ?? null, fetchedAt: p.fetchedAt ?? (/* @__PURE__ */ new Date()).toISOString() }
+    ])
+  );
   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);
@@ -2175,13 +3552,13 @@ function createMemoryChatClient(options) {
       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 ?? ""));
+      return [...convs.values()].filter((c) => keepKind(c.conversation.kind, opts)).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 unreadTotal(opts = {}) {
+      return [...convs.values()].filter((c) => keepKind(c.conversation.kind, opts)).reduce((n, c) => n + inboxItem(c).unread, 0);
     },
     async conversation(id) {
       await wait();
@@ -2242,7 +3619,8 @@ function createMemoryChatClient(options) {
         muted: false,
         pinned: false,
         messages: [],
-        pins: []
+        pins: [],
+        topics: []
       });
       for (const l of inboxListeners) l({ type: "inbox", conversationId: id });
       return id;
@@ -2261,6 +3639,10 @@ function createMemoryChatClient(options) {
       }
       const c = get(input.conversationId);
       if (!c.canPost) throw new ChatError("You can't post here", "42501", "send_message");
+      const topic = input.topic ? c.topics.find((t) => t.topic === input.topic) : void 0;
+      if (topic?.closedAt && !["owner", "admin", "observer"].includes(c.myRole ?? "member")) {
+        throw new ChatError("This topic is closed", "42501", "send_message");
+      }
       const existing = c.messages.find((m2) => m2.clientId === input.clientId);
       if (existing) return clone(existing);
       const m = makeMessage(c, {
@@ -2371,6 +3753,9 @@ function createMemoryChatClient(options) {
       convListeners.set(conversationId, set);
       const entry = { onSignal: handlers.onSignal, onActivity: handlers.onActivity };
       set.add(entry);
+      setTimeout(() => {
+        if (set.has(entry)) handlers.onJoin?.();
+      }, 0);
       return {
         signal(activity) {
           log("signal", conversationId, activity);
@@ -2378,6 +3763,172 @@ function createMemoryChatClient(options) {
         unsubscribe: () => void set.delete(entry)
       };
     },
+    // ── 0002 ──
+    async topics(conversationId) {
+      log("topics", conversationId);
+      await wait();
+      return [...convs.get(conversationId)?.topics ?? []].sort((a, b) => a.position - b.position || a.topic.localeCompare(b.topic)).map((t) => ({ ...t }));
+    },
+    async setTopic(conversationId, topic, input = {}) {
+      log("setTopic", conversationId, topic, input);
+      const c = get(conversationId);
+      if (c.myRole !== "owner" && c.myRole !== "admin") throw new ChatError("Only an owner or admin manages topics", "42501", "set_topic");
+      const key = topic.trim();
+      let t = c.topics.find((x) => x.topic === key);
+      if (!t) {
+        t = { conversationId, topic: key, title: input.title?.trim() || key, position: input.position ?? c.topics.length, closedAt: null, createdBy: me, createdAt: (/* @__PURE__ */ new Date()).toISOString() };
+        c.topics.push(t);
+      } else {
+        if (input.title?.trim()) t.title = input.title.trim();
+        if (input.position != null) t.position = input.position;
+      }
+      if (input.closed === true) t.closedAt ??= (/* @__PURE__ */ new Date()).toISOString();
+      if (input.closed === false) t.closedAt = null;
+      emit(conversationId, { type: "conversation", conversationId });
+    },
+    async schedule(input) {
+      log("schedule", input);
+      await wait();
+      const c = get(input.conversationId);
+      if (!c.canPost) throw new ChatError("You can't post in this conversation", "42501", "schedule_message");
+      const sendAt = typeof input.sendAt === "string" ? input.sendAt : input.sendAt.toISOString();
+      const t = Date.parse(sendAt);
+      if (!(t >= Date.now() + 6e4 && t <= Date.now() + 365 * 864e5)) throw new ChatError("Schedule between a minute and a year from now", "22023", "schedule_message");
+      if (!(input.body ?? "").trim() && !(input.attachments ?? []).length) throw new ChatError("A message needs text or an attachment", "22023", "schedule_message");
+      const existing = scheduledList.find((s2) => s2.clientId === input.clientId);
+      if (existing) {
+        existing.sendAt = sendAt;
+        return existing.id;
+      }
+      const s = {
+        id: uuid(),
+        conversationId: input.conversationId,
+        clientId: input.clientId,
+        body: input.body ?? "",
+        attachments: input.attachments ?? [],
+        replyToId: input.replyToId ?? null,
+        topic: input.topic ?? null,
+        mentions: input.mentions ?? [],
+        silent: input.silent ?? false,
+        sendAt,
+        sentMessageId: null,
+        cancelledAt: null,
+        error: null,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        status: "scheduled"
+      };
+      scheduledList.push(s);
+      return s.id;
+    },
+    async scheduled(conversationId) {
+      log("scheduled", conversationId);
+      await wait();
+      return scheduledList.filter((s) => (s.status === "scheduled" || s.status === "failed") && (!conversationId || s.conversationId === conversationId)).sort((a, b) => a.sendAt.localeCompare(b.sendAt)).map((s) => ({ ...s }));
+    },
+    async cancelScheduled(id) {
+      log("cancelScheduled", id);
+      const s = scheduledList.find((x) => x.id === id && x.status === "scheduled");
+      if (!s) throw new ChatError("Nothing to cancel", "22023", "cancel_scheduled");
+      s.cancelledAt = (/* @__PURE__ */ new Date()).toISOString();
+      s.status = "cancelled";
+    },
+    async availabilityFor(conversationId) {
+      log("availabilityFor", conversationId);
+      const c = get(conversationId);
+      return c.members.filter((m) => m.role !== "observer" && availability.has(m.userId)).map((m) => ({ ...availability.get(m.userId) }));
+    },
+    async myAvailability() {
+      const a = availability.get(me);
+      return a ? { ...a } : null;
+    },
+    async setAvailability(input) {
+      log("setAvailability", input);
+      availability.set(me, {
+        userId: me,
+        awayMessage: input.awayMessage?.trim() || null,
+        awayUntil: input.awayUntil ?? null,
+        timeZone: input.timeZone ?? null,
+        hours: input.hours ?? null
+      });
+    },
+    async broadcast(conversationIds, clientId, body, opts = {}) {
+      log("broadcast", conversationIds, clientId, body);
+      await wait();
+      const ids = [];
+      for (const id of new Set(conversationIds)) {
+        const c = convs.get(id);
+        if (!c?.canPost) continue;
+        const m = await client.send({ conversationId: id, clientId: `${clientId}:${id}`, body, silent: opts.silent });
+        ids.push(m.id);
+      }
+      return ids;
+    },
+    async search(query, conversationId) {
+      log("search", query, conversationId);
+      await wait();
+      const q = query.trim().toLowerCase();
+      if (q.length < 2) return [];
+      const hits = [];
+      const mark = (raw) => {
+        const text = raw.replace(/«/g, "\u2039").replace(/»/g, "\u203A");
+        const i = text.toLowerCase().indexOf(q);
+        const start = Math.max(0, i - 40);
+        return `${start > 0 ? "\u2026" : ""}${text.slice(start, i)}\xAB${text.slice(i, i + q.length)}\xBB${text.slice(i + q.length, i + q.length + 60)}`;
+      };
+      for (const c of convs.values()) {
+        if (conversationId && c.conversation.id !== conversationId) continue;
+        for (const m of c.messages) {
+          if (m.deletedAt || !visible(c, m)) continue;
+          const base = { messageId: m.id, conversationId: c.conversation.id, seq: m.seq, senderId: m.senderId, createdAt: m.createdAt };
+          if (m.body.toLowerCase().includes(q)) hits.push({ ...base, snippet: mark(m.body), inTranscript: false });
+          else {
+            const t = m.attachments.find((a) => a.transcript?.toLowerCase().includes(q))?.transcript;
+            if (t) hits.push({ ...base, snippet: mark(t), inTranscript: true });
+          }
+        }
+      }
+      return hits.sort((a, b) => b.createdAt.localeCompare(a.createdAt)).slice(0, 30);
+    },
+    async linkPreviewsFor(messageIds) {
+      log("linkPreviewsFor", messageIds);
+      const out = {};
+      for (const id of new Set(messageIds)) {
+        let found = null;
+        try {
+          found = findMessage(id);
+        } catch {
+          found = null;
+        }
+        if (!found || found.m.deletedAt || !visible(found.c, found.m)) {
+          out[id] = [];
+          continue;
+        }
+        out[id] = extractLinks(found.m.body).map((u) => previews.get(u)).filter((p) => Boolean(p && p.status === "ok")).map((p) => ({ ...p }));
+      }
+      return out;
+    },
+    async sendDue(now = /* @__PURE__ */ new Date()) {
+      let n = 0;
+      for (const s of scheduledList) {
+        if (s.status !== "scheduled" || Date.parse(s.sendAt) > now.getTime()) continue;
+        try {
+          const m = await client.send({ conversationId: s.conversationId, clientId: s.clientId, body: s.body, attachments: s.attachments, replyToId: s.replyToId, topic: s.topic, mentions: s.mentions, silent: s.silent });
+          s.sentMessageId = m.id;
+          s.status = "sent";
+          n += 1;
+        } catch (e) {
+          s.error = e instanceof Error ? e.message : String(e);
+          s.status = "failed";
+        }
+      }
+      return n;
+    },
+    moderate(messageId, result) {
+      if (result === "clean") return;
+      const { c, m } = findMessage(messageId);
+      m.moderation = result;
+      emit(c.conversation.id, { type: "message", conversationId: c.conversation.id, id: m.id, seq: m.seq, op: "update" });
+    },
     receive(conversationId, senderId, body, extra = {}) {
       const c = get(conversationId);
       const m = makeMessage(c, { senderId, body, ...extra });
@@ -2399,7 +3950,127 @@ function createMemoryChatClient(options) {
   };
   return client;
 }
+function keepKind(kind, opts) {
+  if (opts.kind && kind !== opts.kind) return false;
+  if (opts.kinds?.length && !opts.kinds.includes(kind)) return false;
+  return !opts.excludeKinds?.includes(kind);
+}
+function ChatBroadcast({ resolveUser, kind, filter, onSent, className }) {
+  const { items, isLoading } = useInbox({ kind, limit: 200 });
+  const { send, sending } = useBroadcast();
+  const [picked, setPicked] = useState(/* @__PURE__ */ new Set());
+  const [text, setText] = useState("");
+  const [q, setQ] = useState("");
+  const draftId = useRef(null);
+  const busy = useRef(false);
+  const rows = useMemo(
+    () => items.filter((i) => filter ? filter(i) : true).map((i) => ({ item: i, title: inboxTitle(i, resolveUser) })).sort((a, b) => a.title.localeCompare(b.title)),
+    [items, filter, resolveUser]
+  );
+  const shown = rows.filter((r) => !q.trim() || r.title.toLowerCase().includes(q.trim().toLowerCase()));
+  const allShown = shown.length > 0 && shown.every((r) => picked.has(r.item.conversationId));
+  const toggle = (id, on) => setPicked((p) => {
+    const next = new Set(p);
+    if (on) next.add(id);
+    else next.delete(id);
+    return next;
+  });
+  const submit = async () => {
+    const body = text.trim();
+    if (!body || picked.size === 0 || busy.current) return;
+    busy.current = true;
+    draftId.current ??= randomId();
+    try {
+      const ids = await send([...picked], body, { clientId: draftId.current });
+      draftId.current = null;
+      const n = ids.length;
+      if (n === picked.size) toast.success(n === 1 ? "Sent to 1 conversation" : `Sent to ${n} conversations`);
+      else toast.warning(`Sent to ${n} of ${picked.size}`, { description: "You can't post in the others." });
+      onSent?.(n, picked.size);
+      setText("");
+      setPicked(/* @__PURE__ */ new Set());
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Couldn't send");
+    } finally {
+      busy.current = false;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: cn("flex flex-col gap-3", className),
+      onSubmit: (e) => {
+        e.preventDefault();
+        void submit();
+      },
+      "data-testid": "genesis-chat-broadcast",
+      children: [
+        /* @__PURE__ */ jsxs(Alert, { children: [
+          /* @__PURE__ */ jsx(Megaphone, { className: "size-4", "aria-hidden": true }),
+          /* @__PURE__ */ jsx(AlertDescription, { children: "Each person gets this in their own conversation with you, so replies come back to you privately. No one sees who else got it." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "genesis-chat-broadcast-text", children: "Message" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: "genesis-chat-broadcast-text",
+              value: text,
+              onChange: (e) => setText(e.target.value),
+              maxLength: CHAT_LIMITS.bodyChars,
+              className: "min-h-24",
+              placeholder: "Write once, send to everyone you pick"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("fieldset", { className: "flex min-h-0 flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("legend", { className: "mb-1 text-sm font-medium", children: "Send to" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+              /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": true }),
+              /* @__PURE__ */ jsx(Input, { value: q, onChange: (e) => setQ(e.target.value), placeholder: "Filter", "aria-label": "Filter conversations", className: "pl-8" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                disabled: shown.length === 0,
+                onClick: () => setPicked((p) => {
+                  const next = new Set(p);
+                  for (const r of shown) {
+                    if (allShown) next.delete(r.item.conversationId);
+                    else next.add(r.item.conversationId);
+                  }
+                  return next;
+                }),
+                children: allShown ? "Clear" : "Select all"
+              }
+            )
+          ] }),
+          isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "aria-busy": true, "aria-label": "Loading conversations", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+          ] }) : shown.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { icon: Megaphone, title: rows.length ? "No matches" : "No conversations yet" }) : /* @__PURE__ */ jsx("ul", { className: "max-h-72 overflow-y-auto rounded-md border", "aria-label": "Conversations", children: shown.map(({ item, title }) => {
+            const id = `genesis-chat-broadcast-${item.conversationId}`;
+            const avatar = item.otherUserId ? resolveUser(item.otherUserId).avatarUrl : null;
+            return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 border-b px-3 py-2 last:border-b-0", children: [
+              /* @__PURE__ */ jsx(Checkbox, { id, checked: picked.has(item.conversationId), onCheckedChange: (v) => toggle(item.conversationId, v === true) }),
+              /* @__PURE__ */ jsx(UserAvatar, { name: title, src: avatar, size: "sm" }),
+              /* @__PURE__ */ jsx(Label, { htmlFor: id, className: "min-w-0 flex-1 cursor-pointer truncate font-normal", children: title })
+            ] }, item.conversationId);
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", "aria-live": "polite", children: picked.size === 0 ? "Pick who gets it" : picked.size === 1 ? "1 conversation" : `${picked.size} conversations` }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", loading: sending, disabled: !text.trim() || picked.size === 0, "data-testid": "genesis-chat-broadcast-send", children: picked.size > 1 ? `Send to ${picked.size}` : "Send" })
+        ] })
+      ]
+    }
+  );
+}
 
-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 };
+export { ChatAttachmentCard, ChatAvailabilitySettings, ChatAwayBanner, ChatBroadcast, ChatComposer, ChatEmojiPicker, ChatErrorBoundary, ChatInbox, ChatLinkPreview, ChatMarkdown, ChatPanel, ChatScheduleMenu, ChatScheduledList, ChatSearch, ChatThread, ChatTopicBar, ChatVideoPlayer, ChatVideoRecorder, FileChip, GenericAttachment, ImageGrid, Lightbox, MessageAttachments, MessageRow, QUICK_REACTIONS, SearchSnippet, VideoAttachment, VoiceNote, canPickEmoji, clockTime, createMemoryChatClient, formatBytes, inboxTitle, isSafeHref, linkPreviewImageSrc, messageLabel, muxPosterUrl, muxStreamUrl, parseMarkdown, pickVideoMimeType, pickVoiceMimeType, plainText, relativeTime, toAttachmentView, toLocalInput, uploadVideo, useVideoRecorder, useVoiceRecorder, videoFile, voiceFile };
 //# sourceMappingURL=web.js.map
 //# sourceMappingURL=web.js.map