@gemboss/ui 0.39.0 → 0.41.0

package/src/team-chat.tsx

@@ -0,0 +1,825 @@
+"use client";
+/**
+ * The team chat layer (Chris 20/10/2026): GemCare's Slack-like channel chat, moved into the package so GemCare (plain
+ * HTML, its own renderers in public/assets/inbox.js) and GemCommunity (Next, React) draw ONE chat, and an upgrade to it
+ * happens here once. Look and behaviour are GemCare's (origin/main, 20/10/2026): the channel rail with unread and
+ * @mention badges, day separators, the "New messages" line, turns grouped by author, the reply quote, the hover action
+ * bar, the thread panel on the right, "jump to the latest". Added for the community: the people panel, and the layout
+ * that gives a small screen its space back (README "The team chat layer").
+ *
+ * Props only. No fetching, no store, no router: the app owns the data and passes callbacks (onOpen, onSend, onReply,
+ * onOpenThread, onReact, onToggleCollapse…) and slots (ReactNode props) for its own pieces: attachments, the mention
+ * picker, link cards, a "more" menu. What these components keep is the state of the screen itself (the reaction picker
+ * a message opened, the composer's text when the app does not hold it, where focus goes when a drawer opens).
+ *
+ * The markup is a CONTRACT: README "The team chat layer" shows the exact HTML of each part, and
+ * team-chat-contract.test.tsx renders every component and holds it to that HTML, so a plain-HTML surface (GemCare) can
+ * emit the same thing and the two cannot drift. Change the markup here, and the README block with it.
+ *
+ * Classes: `gb-tc-*` (team-chat.css, imported below). Reused from the package, not redrawn: `Avatar` (portal.css),
+ * `Reactions` / `ReactionPicker` (reactions.css), the kit's `ui-btn` and `ui-check` (components.css, the core).
+ */
+import "./team-chat.css";
+import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Icon } from "./icons";
+import { Avatar } from "./portal";
+import { ReactionPicker, Reactions } from "./reactions";
+import { QUICK_REACTIONS, type Reaction } from "./reactions-data";
+
+const cx = (...c: Array<string | false | null | undefined>) => c.filter(Boolean).join(" ");
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+// ── Words ──────────────────────────────────────────────────────────────────────────────────────────────────────────
+/** Every word the components write themselves. Pass `labels` (any subset) to translate. */
+export type TeamChatLabels = {
+  channels: string;
+  conversation: string;
+  back: string;
+  members: string;
+  hideMembers: string;
+  showMembers: string;
+  thread: string;
+  closeThread: string;
+  replies: (n: number) => string;
+  newMessages: string;
+  edited: string;
+  someone: string;
+  actionsFor: (author: string) => string;
+  react: (emoji: string, author: string, mine: boolean) => string;
+  moreReactions: (author: string) => string;
+  reply: string;
+  replyTo: (author: string) => string;
+  replyInThread: string;
+  replyInThreadTo: (author: string) => string;
+  openThread: (n: number, last: string) => string;
+  jump: string;
+  jumpNew: (n: number) => string;
+  message: string;
+  send: string;
+  attach: string;
+  stopReplying: string;
+  privateChannel: string;
+  directMessage: string;
+  mentioningYou: (n: number) => string;
+  unread: (n: number) => string;
+  online: string;
+  away: string;
+  offline: string;
+};
+
+export const TEAM_CHAT_LABELS: TeamChatLabels = {
+  channels: "Channels",
+  conversation: "Conversation",
+  back: "Back to channels",
+  members: "Members",
+  hideMembers: "Hide members",
+  showMembers: "Show members",
+  thread: "Thread",
+  closeThread: "Close thread",
+  replies: (n) => (n === 1 ? "1 reply" : `${n} replies`),
+  newMessages: "New messages",
+  edited: "(edited)",
+  someone: "Someone who has left",
+  actionsFor: (a) => `Actions for the message from ${a}`,
+  react: (e, a, mine) => `${mine ? "Remove" : "Add"} ${e} on the message from ${a}`,
+  moreReactions: (a) => `More reactions for the message from ${a}`,
+  reply: "Reply",
+  replyTo: (a) => `Reply to the message from ${a}`,
+  replyInThread: "Reply in thread",
+  replyInThreadTo: (a) => `Reply in thread to the message from ${a}`,
+  openThread: (n, last) => `Open the thread, ${n === 1 ? "1 reply" : `${n} replies`}${last ? `, ${last}` : ""}`,
+  jump: "Jump to the latest message",
+  jumpNew: (n) => `Jump to the latest message, ${n} new`,
+  message: "Message",
+  send: "Send",
+  attach: "Attach a file",
+  stopReplying: "Stop replying",
+  privateChannel: "private channel",
+  directMessage: "direct message",
+  mentioningYou: (n) => `${n} mentioning you`,
+  unread: (n) => `${n} unread`,
+  online: "Online",
+  away: "Away",
+  offline: "Offline",
+};
+const words = (labels?: Partial<TeamChatLabels>): TeamChatLabels => (labels ? { ...TEAM_CHAT_LABELS, ...labels } : TEAM_CHAT_LABELS);
+
+// ── The screen ─────────────────────────────────────────────────────────────────────────────────────────────────────
+export type TeamChatView = "list" | "conversation";
+export type TeamChatPanel = "thread" | "people";
+
+export type TeamChatProps = {
+  /** The channel list: a `ChannelRail`. */
+  rail: React.ReactNode;
+  /** The conversation: `ChatHeader`, `MessageList`, `Composer`, drawn inside `section.gb-tc-main`. */
+  children: React.ReactNode;
+  /** The right panel: a `ThreadPanel` or a `PeoplePanel`. Absent: two columns. */
+  panel?: React.ReactNode;
+  /** Which one `panel` is (the third column is 380px for a thread, the people panel's own width for people). */
+  panelKind?: TeamChatPanel;
+  /** Whether the panel is open. A collapsed people panel is a 56px strip on a wide screen and NOT open (no drawer, no
+   *  scrim) on a narrow one. Default: open when there is a panel. */
+  panelOpen?: boolean;
+  /** Escape in the panel, or a press on the scrim, while the panel is a drawer (and Escape in a thread always). */
+  onClosePanel?: () => void;
+  /** At phone width (≤760px of the screen's own width) only one of the two shows, as Slack on a phone. */
+  view?: TeamChatView;
+  conversationLabel?: string;
+  className?: string;
+  labels?: Partial<TeamChatLabels>;
+};
+
+/** The width at or below which the right panel is a drawer over the conversation, not a column (team-chat.css). */
+export const TEAM_CHAT_DRAWER_MAX = 1100;
+/** The width at or below which the screen shows the list OR the conversation (team-chat.css). */
+export const TEAM_CHAT_PHONE_MAX = 760;
+
+/** The width of the screen itself (a container, not the viewport: in an app shell the chat is narrower than the
+ *  window), so the JS agrees with team-chat.css's container queries. */
+function useOwnWidth(ref: React.RefObject<HTMLElement | null>) {
+  const [w, setW] = useState<number | null>(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(([e]) => setW(e.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ref]);
+  return w;
+}
+
+/**
+ * The chat screen: rail | conversation | right panel (thread OR people). The panel is a third column when the screen
+ * is wider than 1100px and a drawer over the conversation when it is not, so a 380px thread never squeezes the
+ * conversation to 300px. While it is a drawer it holds focus: on open focus moves into it, the rail and the
+ * conversation are `inert` (Tab stays in the drawer), Escape or the scrim closes it, and focus goes back to what opened it.
+ */
+export function TeamChat({ rail, children, panel, panelKind = "thread", panelOpen, onClosePanel, view = "conversation", conversationLabel, className, labels }: TeamChatProps) {
+  const t = words(labels);
+  const ref = useRef<HTMLDivElement>(null);
+  const width = useOwnWidth(ref);
+  const open = Boolean(panel) && (panelOpen ?? true);
+  const drawer = width !== null && width <= TEAM_CHAT_DRAWER_MAX;
+  // On a phone showing the channel list, the panel is not on screen (team-chat.css): nothing to hold focus in.
+  const shown = !(width !== null && width <= TEAM_CHAT_PHONE_MAX && view === "list");
+  useEffect(() => {
+    const root = ref.current;
+    if (!root || !open || !drawer || !shown) return;
+    const pane = root.querySelector<HTMLElement>(":scope > .gb-tc-thread, :scope > .gb-tc-people");
+    if (!pane) return;
+    const behind = [...root.querySelectorAll<HTMLElement>(":scope > .gb-tc-rail, :scope > .gb-tc-main")];
+    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    for (const el of behind) el.setAttribute("inert", "");
+    if (!pane.contains(document.activeElement)) pane.focus({ preventScroll: true });
+    return () => {
+      for (const el of behind) el.removeAttribute("inert");
+      // Back to what opened it, unless focus already went somewhere on purpose (the app moved it).
+      const lost = !document.activeElement || document.activeElement === document.body || !document.activeElement.isConnected;
+      if (opener && opener.isConnected && !pane.contains(opener) && (lost || pane.contains(document.activeElement))) opener.focus({ preventScroll: true });
+    };
+  }, [open, drawer, shown, panelKind]);
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key !== "Escape" || e.defaultPrevented || !open || !onClosePanel) return;
+    const pane = ref.current?.querySelector(":scope > .gb-tc-thread, :scope > .gb-tc-people");
+    if (!pane || !pane.contains(e.target as Node)) return;
+    if (!drawer && panelKind !== "thread") return; // a people column on a wide screen is not a popup
+    e.preventDefault();
+    onClosePanel();
+  };
+  return (
+    <div ref={ref} className={cx("gb-tc", className)} data-view={view} data-panel={panel ? panelKind : undefined} onKeyDown={onKeyDown}>
+      {rail}
+      <section className="gb-tc-main" aria-label={conversationLabel ?? t.conversation}>{children}</section>
+      {open ? <div className="gb-tc-scrim" aria-hidden="true" onClick={onClosePanel} /> : null}
+      {panel}
+    </div>
+  );
+}
+
+// ── The rail ───────────────────────────────────────────────────────────────────────────────────────────────────────
+export type ChannelKind = "channel" | "private" | "dm";
+const KIND_ICON = { channel: "hash", private: "lock", dm: "user" } as const;
+
+export type ChannelRailProps = {
+  /** The rail's own heading, e.g. the workspace or "Team chat". */
+  title: React.ReactNode;
+  /** Beside the title: a "+" (new channel / message) button. */
+  actions?: React.ReactNode;
+  /** `ChannelSection`s. */
+  children: React.ReactNode;
+  /** The nav's accessible name. Default "Channels". */
+  label?: string;
+  className?: string;
+};
+
+/** The channel list: `nav` with a head (title + actions) and a scrolling body of sections. */
+export function ChannelRail({ title, actions, children, label, className }: ChannelRailProps) {
+  return (
+    <nav className={cx("gb-tc-rail", className)} aria-label={label ?? TEAM_CHAT_LABELS.channels}>
+      <div className="gb-tc-rail__head">
+        <h2 className="gb-tc-rail__title">{title}</h2>
+        {actions ? <div className="gb-tc-rail__actions">{actions}</div> : null}
+      </div>
+      <div className="gb-tc-rail__scroll">{children}</div>
+    </nav>
+  );
+}
+
+/** A group of channels under a heading ("Channels", "Direct messages"). */
+export function ChannelSection({ label, children, id }: { label: React.ReactNode; children: React.ReactNode; id?: string }) {
+  const auto = useId();
+  const hid = `${id ?? auto}-h`;
+  return (
+    <div className="gb-tc-rail__section" role="group" aria-labelledby={hid}>
+      <h3 className="gb-tc-rail__heading" id={hid}>{label}</h3>
+      <ul className="gb-tc-rail__list">{children}</ul>
+    </div>
+  );
+}
+
+export type ChannelItemProps = {
+  name: string;
+  kind?: ChannelKind;
+  /** Unread messages: a count badge, and the name in bold. */
+  unread?: number;
+  /** Messages that call the viewer by name: their own badge ("@2"), before the count, in another colour. */
+  mentions?: number;
+  /** The channel on screen: `aria-current`. */
+  active?: boolean;
+  /** A direct message: whether the other person is online (a dot on the glyph). */
+  online?: boolean;
+  /** A link (the channel has its own URL) … */
+  href?: string;
+  /** … drawn by the app's link component (Next's `Link`). */
+  linkAs?: React.ElementType;
+  /** A button (no URL). */
+  onOpen?: () => void;
+  labels?: Partial<TeamChatLabels>;
+};
+
+/** One row of the rail. Its accessible name says the counts too: a dot cannot be read out. */
+export function ChannelItem({ name, kind = "channel", unread = 0, mentions = 0, active = false, online, href, linkAs, onOpen, labels }: ChannelItemProps) {
+  const t = words(labels);
+  const label = [name, kind === "private" ? t.privateChannel : kind === "dm" ? t.directMessage : null,
+    mentions ? t.mentioningYou(mentions) : null, unread ? t.unread(unread) : null].filter(Boolean).join(", ");
+  const inner = (
+    <>
+      <span className="gb-tc-channel__glyph" aria-hidden="true">
+        <Icon name={KIND_ICON[kind]} size={16} />
+        {kind === "dm" && online !== undefined ? <span className={PRESENCE_CLASS[online ? "online" : "offline"]} /> : null}
+      </span>
+      <span className="gb-tc-channel__name">{name}</span>
+      {mentions ? <span className="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@{mentions}</span> : null}
+      {unread ? <span className="gb-tc-badge" aria-hidden="true">{unread}</span> : null}
+    </>
+  );
+  const cls = cx("gb-tc-channel", unread > 0 && "gb-tc-channel--unread");
+  const Link = linkAs ?? "a";
+  return (
+    <li>
+      {href !== undefined
+        ? <Link className={cls} href={href} aria-current={active ? "page" : undefined} aria-label={label} onClick={onOpen}>{inner}</Link>
+        : <button type="button" className={cls} aria-current={active ? "true" : undefined} aria-label={label} onClick={onOpen}>{inner}</button>}
+    </li>
+  );
+}
+
+// ── The conversation ───────────────────────────────────────────────────────────────────────────────────────────────
+export type ChatHeaderProps = {
+  name: React.ReactNode;
+  kind?: ChannelKind;
+  /** One line under the name: the topic, "Just the two of you", "12 members". */
+  topic?: React.ReactNode;
+  /** The phone's way back to the channel list (shown only at phone width). */
+  onBack?: () => void;
+  /** The "members" toggle: opens and closes the people panel. */
+  members?: { count?: number; open: boolean; onToggle: () => void; controls?: string };
+  /** More buttons at the right (search, call…). */
+  actions?: React.ReactNode;
+  headingId?: string;
+  labels?: Partial<TeamChatLabels>;
+};
+
+export function ChatHeader({ name, kind, topic, onBack, members, actions, headingId, labels }: ChatHeaderProps) {
+  const t = words(labels);
+  return (
+    <header className="gb-tc-head">
+      {onBack ? (
+        <button type="button" className="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label={t.back} onClick={onBack}>
+          <Icon name="chevronLeft" />
+        </button>
+      ) : null}
+      <div className="gb-tc-head__text">
+        <h2 className="gb-tc-head__title" id={headingId}>
+          {kind ? <span className="gb-tc-head__glyph" aria-hidden="true"><Icon name={KIND_ICON[kind]} size={16} /></span> : null}
+          <span className="gb-tc-head__name">{name}</span>
+        </h2>
+        {topic ? <p className="gb-tc-head__sub">{topic}</p> : null}
+      </div>
+      {members || actions ? (
+        <div className="gb-tc-head__actions">
+          {actions}
+          {members ? (
+            <button type="button" className="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded={members.open} aria-controls={members.controls}
+              aria-label={members.count !== undefined ? `${t.members}, ${members.count}` : t.members} onClick={members.onToggle}>
+              <Icon name="users" />
+              {members.count !== undefined ? <span className="gb-tc-head__count">{members.count}</span> : null}
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </header>
+  );
+}
+
+export type MessageListProps = {
+  /** The log's accessible name: "Messages in #general". */
+  label: string;
+  /** `DaySeparator`, `NewMessagesLine`, `Message` (each an <li>). */
+  children?: React.ReactNode;
+  /** First row: a "Load earlier messages" button. */
+  before?: React.ReactNode;
+  /** Last row, announced: "Linh is typing…", "GemCare is looking…". */
+  after?: React.ReactNode;
+  /** No messages yet. */
+  empty?: React.ReactNode;
+  /** A `JumpToLatest`, placed over the bottom right of the list (not of the screen: the composer's height varies). */
+  jump?: React.ReactNode;
+  logRef?: React.Ref<HTMLDivElement>;
+  onScroll?: React.UIEventHandler<HTMLDivElement>;
+};
+
+/** The messages: a scrolling `role="log"` (polite) around an <ol>. */
+export function MessageList({ label, children, before, after, empty, jump, logRef, onScroll }: MessageListProps) {
+  const none = React.Children.toArray(children).length === 0;
+  return (
+    <div className="gb-tc-body">
+      <div className="gb-tc-log" ref={logRef} role="log" aria-live="polite" aria-label={label} tabIndex={0} onScroll={onScroll}>
+        <ol className="gb-tc-list">
+          {before ? <li className="gb-tc-older">{before}</li> : null}
+          {none && empty ? <li className="gb-tc-empty">{empty}</li> : children}
+          {after ? <li className="gb-tc-status" role="status">{after}</li> : null}
+        </ol>
+      </div>
+      {jump}
+    </div>
+  );
+}
+
+/** "Today", "Yesterday", "Mon, Sep 28": a pill that stays at the top while its day scrolls under it. */
+export function DaySeparator({ label, dateTime }: { label: React.ReactNode; dateTime?: string }) {
+  return <li className="gb-tc-day">{dateTime ? <time className="gb-tc-day__label" dateTime={dateTime}>{label}</time> : <span className="gb-tc-day__label">{label}</span>}</li>;
+}
+
+/** The line before the first message the viewer has not read (`teamChatRows` says where). */
+export function NewMessagesLine({ labels }: { labels?: Partial<TeamChatLabels> }) {
+  const t = words(labels);
+  return <li className="gb-tc-new"><span className="gb-tc-new__label" role="separator" aria-label={t.newMessages}>{t.newMessages}</span></li>;
+}
+
+/** The round button back to the latest message, with how many arrived while the reader was up the list. */
+export function JumpToLatest({ count = 0, visible = true, onJump, labels }: { count?: number; visible?: boolean; onJump: () => void; labels?: Partial<TeamChatLabels> }) {
+  const t = words(labels);
+  return (
+    <button type="button" className="gb-tc-jump" hidden={!visible} aria-label={count ? t.jumpNew(count) : t.jump} onClick={onJump}>
+      <Icon name="chevronsDown" />
+      {count ? <span className="gb-tc-jump__n" aria-hidden="true">{count > 99 ? "99+" : count}</span> : null}
+    </button>
+  );
+}
+
+/** "Read by everyone" (filled, ticked), some (a slice per share), nobody yet (a ring). Nothing when nobody else is in
+ *  the channel: a mark nobody can turn green is a lie. */
+export function ReadReceipt({ read, of, label }: { read: number; of: number; label: string }) {
+  if (of <= 0) return null;
+  const all = read >= of;
+  const a = (Math.min(read, of) / of) * Math.PI * 2;
+  return (
+    <span className={cx("gb-tc-receipt", all && "gb-tc-receipt--all")} role="img" aria-label={label} title={label}>
+      <svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false">
+        <circle cx="7" cy="7" r="6" fill={all ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.4" />
+        {all ? <path className="gb-tc-receipt__tick" d="M4.2 7.2l1.9 1.9 3.7-4" fill="none" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+          : read > 0 ? <path d={`M7 7 L7 1 A6 6 0 ${a > Math.PI ? 1 : 0} 1 ${(7 + 6 * Math.sin(a)).toFixed(2)} ${(7 - 6 * Math.cos(a)).toFixed(2)} Z`} fill="currentColor" /> : null}
+      </svg>
+    </span>
+  );
+}
+
+export type MessageProps = {
+  author: string;
+  /** The author's picture: an image URL (initials when absent) … */
+  avatarSrc?: string | null;
+  /** … or the app's own avatar node (an AI mark). */
+  avatar?: React.ReactNode;
+  /** As the app formats it: "09:41". */
+  time: React.ReactNode;
+  /** ISO time for <time datetime>. */
+  dateTime?: string;
+  /** The text (or the app's rich text). Absent: an attachment-only message, no empty line. */
+  body?: React.ReactNode;
+  /** A continuation of the same person's turn (`teamChatRows`): no avatar, no name; the time shows on hover. */
+  grouped?: boolean;
+  edited?: boolean;
+  /** Calls the viewer by name: an amber bar on the left (a bar, not a fill: a fill fights every other row state). */
+  mentionsMe?: boolean;
+  /** The message a quote or a link jumped to. */
+  highlight?: boolean;
+  /** Not on the server yet: faded, no actions. */
+  sending?: boolean;
+  /** Could not be sent: `status` says so, in the danger colour. */
+  failed?: boolean;
+  /** "Sending…", "Couldn't send — Retry". */
+  status?: React.ReactNode;
+  /** After the name: an "AI" badge, "answering Linh". */
+  badges?: React.ReactNode;
+  /** The message this one answers: who and a line of it. A button: the app jumps to it or opens its thread. */
+  replyTo?: { author: string; excerpt: React.ReactNode; onOpen?: () => void; busy?: boolean };
+  /** The app's pictures and files. */
+  attachments?: React.ReactNode;
+  /** The app's link cards. */
+  extra?: React.ReactNode;
+  /** Reactions put on it (the package's `Reactions`). */
+  reactions?: readonly Reaction[];
+  /** Put or take back an emoji. Absent: no reaction buttons. */
+  onReact?: (emoji: string) => void;
+  /** Its thread, under it: "3 replies · Last reply 2 hours ago". */
+  thread?: { count: number; last?: string; repliers?: ReadonlyArray<{ name: string; src?: string | null }>; onOpen: () => void };
+  /** A `ReadReceipt` (the viewer's own messages). */
+  receipt?: React.ReactNode;
+  onReply?: () => void;
+  onOpenThread?: () => void;
+  /** More buttons at the end of the action bar (the app's "⋯" menu). */
+  moreActions?: React.ReactNode;
+  /** The app's edit box, in place of the body (no action bar while editing). */
+  editor?: React.ReactNode;
+  /** `data-msg-id`, for the app to find the row (jump to a quoted message). */
+  messageId?: string | number;
+  id?: string;
+  className?: string;
+  labels?: Partial<TeamChatLabels>;
+};
+
+/**
+ * One message: avatar + name + time on the first of a turn, a compact row after it; the reply quote, the body,
+ * "(edited)", the read receipt, attachments, link cards, reactions, the thread preview, and the action bar.
+ *
+ * The action bar floats at the row's top right and shows on hover or keyboard focus. Under a finger (`hover: none`) it
+ * is one tap away: the row takes focus on a tap (`tabindex="-1"`) and the bar shows, without costing a row of 44px
+ * buttons under every message. The quick reactions (👍 ✅) drop out where the list is narrow (a container query) and
+ * under a finger; "Add reaction" opens the package's picker in the flow, under the message.
+ */
+export function Message(props: MessageProps) {
+  const { author, avatarSrc, avatar, time, dateTime, body, grouped, edited, mentionsMe, highlight, sending, failed, status, badges, replyTo,
+    attachments, extra, reactions = [], onReact, thread, receipt, onReply, onOpenThread, moreActions, editor, messageId, id, className, labels } = props;
+  const t = words(labels);
+  const who = author || t.someone;
+  const [picking, setPicking] = useState(false);
+  const reactBtn = useRef<HTMLButtonElement>(null);
+  const mine = (e: string) => reactions.some((r) => r.emoji === e && r.mine);
+  const showActs = editor == null && !sending && Boolean(onReact || onReply || onOpenThread || moreActions);
+  // Arrow keys move along the bar (a toolbar), Home/End to its ends.
+  const onActsKey = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const step = ({ ArrowRight: 1, ArrowLeft: -1 } as Record<string, number>)[e.key];
+    const all = [...e.currentTarget.querySelectorAll<HTMLElement>("button:not([disabled]), summary, a[href]")].filter((b) => b.offsetParent !== null);
+    const at = all.indexOf(document.activeElement as HTMLElement);
+    if (at < 0) return;
+    const to = step ? all[(at + step + all.length) % all.length] : e.key === "Home" ? all[0] : e.key === "End" ? all[all.length - 1] : null;
+    if (to) { e.preventDefault(); to.focus(); }
+  };
+  return (
+    <li id={id}
+      className={cx("gb-tc-msg", grouped && "gb-tc-msg--grouped", mentionsMe && "gb-tc-msg--mention", highlight && "gb-tc-msg--highlight",
+        sending && "gb-tc-msg--sending", failed && "gb-tc-msg--failed", picking && "gb-tc-msg--active", editor != null && "gb-tc-msg--editing", className)}
+      data-msg-id={messageId} tabIndex={-1}>
+      {grouped
+        ? <time className="gb-tc-msg__hover-time" dateTime={dateTime}>{time}</time>
+        : avatar ?? <Avatar name={who} src={avatarSrc} size={32} className="gb-tc-msg__av" />}
+      <div className="gb-tc-msg__main">
+        {replyTo ? (
+          <button type="button" className="gb-tc-quote" aria-busy={replyTo.busy || undefined} onClick={replyTo.onOpen}>
+            <span className="gb-tc-quote__who">{replyTo.author || t.someone}</span>
+            <span className="gb-tc-quote__text">{replyTo.excerpt}</span>
+          </button>
+        ) : null}
+        {grouped ? <span className="gb-tc-sr">{who}, {time}: </span> : (
+          <div className="gb-tc-msg__who">
+            <span className="gb-tc-msg__name">{who}</span>
+            {badges}
+            <time className="gb-tc-msg__time" dateTime={dateTime}>{time}</time>
+          </div>
+        )}
+        {editor != null ? <div className="gb-tc-msg__editor">{editor}</div>
+          : body != null || edited || receipt ? (
+            <div className="gb-tc-msg__body">
+              {body}
+              {edited ? <span className="gb-tc-msg__edited">{t.edited}</span> : null}
+              {receipt}
+            </div>
+          ) : null}
+        {status ? <p className="gb-tc-msg__status" role={failed ? "alert" : undefined}>{status}</p> : null}
+        {attachments ? <div className="gb-tc-msg__files">{attachments}</div> : null}
+        {extra ? <div className="gb-tc-msg__extra">{extra}</div> : null}
+        {picking && onReact ? (
+          <ReactionPicker items={reactions}
+            onPick={(e) => { setPicking(false); onReact(e); reactBtn.current?.focus(); }}
+            onClose={() => { setPicking(false); reactBtn.current?.focus(); }} />
+        ) : null}
+        {reactions.length ? <Reactions items={reactions} onToggle={onReact} canReact={Boolean(onReact)} target={`the message from ${who}`} /> : null}
+        {thread && thread.count > 0 ? (
+          <button type="button" className="gb-tc-threadprev" aria-label={t.openThread(thread.count, thread.last ?? "")} onClick={thread.onOpen}>
+            {thread.repliers?.length ? (
+              <span className="gb-tc-threadprev__faces" aria-hidden="true">
+                {thread.repliers.slice(0, 3).map((r, i) => <Avatar key={`${r.name}-${i}`} name={r.name} src={r.src} size={24} />)}
+              </span>
+            ) : null}
+            <span className="gb-tc-threadprev__count">{t.replies(thread.count)}</span>
+            {thread.last ? <span className="gb-tc-threadprev__last">{thread.last}</span> : null}
+          </button>
+        ) : null}
+      </div>
+      {showActs ? (
+        <div className="gb-tc-acts" role="toolbar" aria-label={t.actionsFor(who)} onKeyDown={onActsKey}>
+          {onReact ? QUICK_REACTIONS.map((e) => (
+            <button key={e} type="button" className="gb-tc-act gb-tc-act--quick" aria-pressed={mine(e)} aria-label={t.react(e, who, mine(e))} onClick={() => onReact(e)}>{e}</button>
+          )) : null}
+          {onReact ? (
+            <button ref={reactBtn} type="button" className="gb-tc-act" aria-expanded={picking} aria-label={t.moreReactions(who)} title="Add reaction" onClick={() => setPicking((p) => !p)}>
+              <Icon name="reaction" size={18} />
+            </button>
+          ) : null}
+          {onReply ? <button type="button" className="gb-tc-act" aria-label={t.replyTo(who)} title={t.reply} onClick={onReply}><Icon name="reply" size={18} /></button> : null}
+          {onOpenThread ? <button type="button" className="gb-tc-act" aria-label={t.replyInThreadTo(who)} title={t.replyInThread} onClick={onOpenThread}><Icon name="thread" size={18} /></button> : null}
+          {moreActions}
+        </div>
+      ) : null}
+    </li>
+  );
+}
+
+// ── The composer ───────────────────────────────────────────────────────────────────────────────────────────────────
+export type ComposerProps = {
+  /** Send the text (trimmed). The composer clears itself when it holds the text (no `value`). */
+  onSend: (text: string) => void;
+  /** Controlled text; leave out to let the composer hold it. */
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (text: string) => void;
+  placeholder?: string;
+  /** The field's label (visually hidden). Default "Message". */
+  label?: string;
+  id?: string;
+  disabled?: boolean;
+  /** A send is in flight: Send waits. */
+  busy?: boolean;
+  /** Send with no text (files only). */
+  canSendEmpty?: boolean;
+  /** "Replying to Linh: …", right above the field (where the writer looks), with a ✕. */
+  replyingTo?: React.ReactNode;
+  onCancelReply?: () => void;
+  /** Files waiting to go. */
+  files?: React.ReactNode;
+  /** The app's @mention picker, opened above the field. */
+  picker?: React.ReactNode;
+  /** Show the paperclip; the app opens its file input. */
+  onAttach?: () => void;
+  /** The thread's "Also send to #general". */
+  also?: { label: React.ReactNode; checked: boolean; onChange: (checked: boolean) => void };
+  error?: React.ReactNode;
+  inputRef?: React.Ref<HTMLTextAreaElement>;
+  /** Called first; `preventDefault()` in it (a mention picker took Enter) and the composer does not send. */
+  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+  onPaste?: React.ClipboardEventHandler<HTMLTextAreaElement>;
+  maxLength?: number;
+  /** Rows the field grows to before it scrolls. Default 8. */
+  maxRows?: number;
+  className?: string;
+  labels?: Partial<TeamChatLabels>;
+};
+
+/**
+ * The field and its buttons in one box (paperclip · text · send), as Slack: one row even at 320px. Enter sends,
+ * Shift+Enter is a new line, and an IME composition (Vietnamese Telex, Japanese) is never cut short by its own Enter.
+ * The field grows with its text (`field-sizing: content`; where a browser lacks it, the component sets the height).
+ */
+export function Composer({ onSend, value, defaultValue = "", onValueChange, placeholder, label, id, disabled, busy, canSendEmpty, replyingTo, onCancelReply,
+  files, picker, onAttach, also, error, inputRef, onKeyDown, onPaste, maxLength = 4000, maxRows = 8, className, labels }: ComposerProps) {
+  const t = words(labels);
+  const auto = useId();
+  const fieldId = id ?? `${auto}-input`;
+  const [own, setOwn] = useState(defaultValue);
+  const text = value ?? own;
+  const field = useRef<HTMLTextAreaElement | null>(null);
+  const setField = (el: HTMLTextAreaElement | null) => {
+    field.current = el;
+    if (typeof inputRef === "function") inputRef(el);
+    else if (inputRef && typeof inputRef === "object") (inputRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = el;
+  };
+  const set = (v: string) => { if (value === undefined) setOwn(v); onValueChange?.(v); };
+  // Grow with the text where `field-sizing: content` is missing (Safari, Firefox in 2026). CSSOM, not a style attribute.
+  useIsoLayoutEffect(() => {
+    const el = field.current;
+    if (!el || (typeof CSS !== "undefined" && CSS.supports?.("field-sizing", "content"))) return;
+    el.style.height = "auto";
+    const line = parseFloat(getComputedStyle(el).lineHeight) || 20;
+    el.style.height = `${Math.min(el.scrollHeight, line * maxRows + 12)}px`;
+  }, [text, maxRows]);
+  const can = !disabled && !busy && (text.trim() !== "" || Boolean(canSendEmpty));
+  const send = () => {
+    if (!can) return;
+    onSend(text.trim());
+    if (value === undefined) setOwn("");
+  };
+  return (
+    <form className={cx("gb-tc-composer", className)} onSubmit={(e) => { e.preventDefault(); send(); }}>
+      {replyingTo ? (
+        <div className="gb-tc-replying">
+          <span className="gb-tc-replying__text">{replyingTo}</span>
+          {onCancelReply ? (
+            <button type="button" className="ui-btn ui-btn--ghost ui-btn--icon" aria-label={t.stopReplying} onClick={onCancelReply}><Icon name="close" /></button>
+          ) : null}
+        </div>
+      ) : null}
+      {files ? <div className="gb-tc-composer__files">{files}</div> : null}
+      {picker ? <div className="gb-tc-composer__picker">{picker}</div> : null}
+      <div className="gb-tc-composer__box">
+        {onAttach ? (
+          <button type="button" className="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label={t.attach} disabled={disabled} onClick={onAttach}>
+            <Icon name="paperclip" />
+          </button>
+        ) : null}
+        <label className="gb-tc-sr" htmlFor={fieldId}>{label ?? t.message}</label>
+        <textarea ref={setField} id={fieldId} className="gb-tc-composer__input" rows={1} maxLength={maxLength} placeholder={placeholder}
+          value={text} disabled={disabled} onPaste={onPaste}
+          onChange={(e) => set(e.target.value)}
+          onKeyDown={(e) => {
+            onKeyDown?.(e);
+            if (e.defaultPrevented || e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing || e.keyCode === 229) return;
+            e.preventDefault();
+            send();
+          }} />
+        <button type="submit" className="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label={t.send} disabled={!can}>
+          <Icon name="send" />
+        </button>
+      </div>
+      {also ? (
+        <label className="ui-check gb-tc-composer__also">
+          <input type="checkbox" checked={also.checked} onChange={(e) => also.onChange(e.target.checked)} />
+          <span>{also.label}</span>
+        </label>
+      ) : null}
+      {error ? <p className="gb-tc-composer__error" role="alert">{error}</p> : null}
+    </form>
+  );
+}
+
+// ── The right panels ───────────────────────────────────────────────────────────────────────────────────────────────
+export type ThreadPanelProps = {
+  onClose: () => void;
+  /** The thread's parent message (a `Message`), on top. */
+  root?: React.ReactNode;
+  /** The "N replies" rule under the root. */
+  replyCount?: number;
+  /** The replies (`Message`s), flat. */
+  children?: React.ReactNode;
+  /** A `Composer` ("Reply to thread", with `also`). */
+  composer?: React.ReactNode;
+  /** Under the head: "That message was taken down…", an error. */
+  notice?: React.ReactNode;
+  /** `error`: the notice in the danger colour (a send that failed, a thread that could not load). */
+  noticeTone?: "error";
+  title?: React.ReactNode;
+  /** "#general". */
+  subtitle?: React.ReactNode;
+  id?: string;
+  className?: string;
+  labels?: Partial<TeamChatLabels>;
+};
+
+/** The thread, as Lark and Slack: its root on top, a "3 replies" rule, the replies flat, then "Reply to thread". */
+export function ThreadPanel({ onClose, root, replyCount, children, composer, notice, noticeTone, title, subtitle, id, className, labels }: ThreadPanelProps) {
+  const t = words(labels);
+  const auto = useId();
+  const hid = `${id ?? auto}-title`;
+  return (
+    <aside id={id} className={cx("gb-tc-thread", className)} aria-labelledby={hid} tabIndex={-1}>
+      <header className="gb-tc-panel-head">
+        <div className="gb-tc-panel-head__text">
+          <h2 className="gb-tc-panel-head__title" id={hid}>{title ?? t.thread}</h2>
+          {subtitle ? <p className="gb-tc-panel-head__sub">{subtitle}</p> : null}
+        </div>
+        <button type="button" className="ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close" aria-label={t.closeThread} onClick={onClose}><Icon name="close" /></button>
+      </header>
+      {notice ? <div className={cx("gb-tc-thread__note", noticeTone === "error" && "gb-tc-thread__note--error")} role={noticeTone === "error" ? "alert" : undefined}>{notice}</div> : null}
+      <div className="gb-tc-body">
+        <div className="gb-tc-log" role="log" aria-live="polite" aria-labelledby={hid} tabIndex={0}>
+          <ol className="gb-tc-list">
+            {root}
+            {replyCount !== undefined ? <li className="gb-tc-thread__count"><span>{t.replies(replyCount)}</span></li> : null}
+            {children}
+          </ol>
+        </div>
+      </div>
+      {composer}
+    </aside>
+  );
+}
+
+export type PeoplePanelProps = {
+  /** `PeopleSection`s ("Online — 3", "Members — 12"). */
+  children: React.ReactNode;
+  title?: React.ReactNode;
+  /** A 56px strip of avatars (a column on a wide screen); in the chat at ≤1100px it is the drawer CLOSED. */
+  collapsed?: boolean;
+  /** The head's collapse button. Absent: no button. */
+  onToggleCollapse?: () => void;
+  /** Before the collapse button: "Invite". Hidden while collapsed. */
+  actions?: React.ReactNode;
+  id?: string;
+  className?: string;
+  labels?: Partial<TeamChatLabels>;
+};
+
+/**
+ * Who is here: sections of people with their avatar, an online dot, a name and a line under it, and a role chip.
+ * A column at the right of the chat, or on its own (GemCommunity's app shell puts it in its right column). Collapsed,
+ * it is a strip of avatars; the names stay in the accessibility tree (visually hidden, not removed).
+ */
+export function PeoplePanel({ children, title, collapsed = false, onToggleCollapse, actions, id, className, labels }: PeoplePanelProps) {
+  const t = words(labels);
+  const auto = useId();
+  const base = id ?? auto;
+  return (
+    <aside id={id} className={cx("gb-tc-people", className)} aria-labelledby={`${base}-title`} tabIndex={-1} data-collapsed={collapsed || undefined}>
+      <header className="gb-tc-panel-head">
+        <div className="gb-tc-panel-head__text">
+          <h2 className="gb-tc-panel-head__title" id={`${base}-title`}>{title ?? t.members}</h2>
+        </div>
+        {actions && !collapsed ? <div className="gb-tc-panel-head__actions">{actions}</div> : null}
+        {onToggleCollapse ? (
+          <button type="button" className="ui-btn ui-btn--ghost ui-btn--icon gb-tc-people__toggle" aria-expanded={!collapsed} aria-controls={`${base}-body`}
+            aria-label={collapsed ? t.showMembers : t.hideMembers} title={collapsed ? t.showMembers : t.hideMembers} onClick={onToggleCollapse}>
+            <Icon name="panelRight" />
+          </button>
+        ) : null}
+      </header>
+      <div className="gb-tc-people__body" id={`${base}-body`}>{children}</div>
+    </aside>
+  );
+}
+
+/** A section of the people panel: its heading reads "Online — 3". */
+export function PeopleSection({ label, count, children, id }: { label: React.ReactNode; count?: number; children: React.ReactNode; id?: string }) {
+  const auto = useId();
+  const hid = `${id ?? auto}-h`;
+  return (
+    <div className="gb-tc-people__section" role="group" aria-labelledby={hid}>
+      <h3 className="gb-tc-people__heading" id={hid}>{label}{count !== undefined ? ` — ${count}` : null}</h3>
+      <ul className="gb-tc-people__list">{children}</ul>
+    </div>
+  );
+}
+
+export type Presence = "online" | "away" | "offline";
+// Whole class names, not `gb-tc-presence--${presence}`: a class built from a stem is one no gate can find in the markup.
+const PRESENCE_CLASS: Record<Presence, string> = { online: "gb-tc-presence gb-tc-presence--online", away: "gb-tc-presence gb-tc-presence--away", offline: "gb-tc-presence gb-tc-presence--offline" };
+export type PersonRowProps = {
+  name: string;
+  src?: string | null;
+  avatar?: React.ReactNode;
+  /** One line under the name: a title, a status. */
+  subtitle?: React.ReactNode;
+  /** A chip at the right: "Admin", "Mod". */
+  role?: React.ReactNode;
+  presence?: Presence;
+  href?: string;
+  linkAs?: React.ElementType;
+  onSelect?: () => void;
+  labels?: Partial<TeamChatLabels>;
+};
+
+/** One person: a link (their profile), a button (open a DM), or plain when it does nothing. */
+export function PersonRow({ name, src, avatar, subtitle, role, presence, href, linkAs, onSelect, labels }: PersonRowProps) {
+  const t = words(labels);
+  const inner = (
+    <>
+      <span className="gb-tc-person__av">
+        {avatar ?? <Avatar name={name} src={src} size={32} />}
+        {presence ? <span className={PRESENCE_CLASS[presence]}><span className="gb-tc-sr">{t[presence]}</span></span> : null}
+      </span>
+      <span className="gb-tc-person__text">
+        <span className="gb-tc-person__name">{name}</span>
+        {subtitle ? <span className="gb-tc-person__sub">{subtitle}</span> : null}
+      </span>
+      {role ? <span className="gb-tc-person__role">{role}</span> : null}
+    </>
+  );
+  const cls = cx("gb-tc-person", presence === "offline" && "gb-tc-person--offline");
+  const Link = linkAs ?? "a";
+  return (
+    <li>
+      {href !== undefined ? <Link className={cls} href={href} title={name} onClick={onSelect}>{inner}</Link>
+        : onSelect ? <button type="button" className={cls} title={name} onClick={onSelect}>{inner}</button>
+        : <div className={cls} title={name}>{inner}</div>}
+    </li>
+  );
+}