@gemboss/ui 0.42.0 → 0.44.0

package/src/team-chat.tsx

@@ -17,13 +17,14 @@
  * 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).
+ * `Reactions` / `ReactionPicker` (reactions.css; the composer's emoji button opens the same picker), 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 { ReactionPicker, Reactions, rememberRecent } from "./reactions";
 import { QUICK_REACTIONS, type Reaction } from "./reactions-data";
 
 const cx = (...c: Array<string | false | null | undefined>) => c.filter(Boolean).join(" ");
@@ -57,6 +58,8 @@ export type TeamChatLabels = {
   message: string;
   send: string;
   attach: string;
+  emoji: string;
+  pickEmoji: string;
   stopReplying: string;
   privateChannel: string;
   directMessage: string;
@@ -93,6 +96,8 @@ export const TEAM_CHAT_LABELS: TeamChatLabels = {
   message: "Message",
   send: "Send",
   attach: "Attach a file",
+  emoji: "Emoji",
+  pickEmoji: "Pick an emoji",
   stopReplying: "Stop replying",
   privateChannel: "private channel",
   directMessage: "direct message",
@@ -246,8 +251,12 @@ export type ChannelItemProps = {
   mentions?: number;
   /** The channel on screen: `aria-current`. */
   active?: boolean;
-  /** A direct message: whether the other person is online (a dot on the glyph). */
+  /** A direct message: whether the other person is online (a dot on the glyph, or on their picture). */
   online?: boolean;
+  /** A direct message: the person's picture in place of the person glyph (21/10/2026), the kit's `Avatar` at the glyph's
+   *  20px, their initials and tone when there is no `src`; the presence dot sits on it. `name` defaults to the row's.
+   *  Only on a DM: a channel keeps its glyph. Absent: the glyph, as before. */
+  avatar?: DmAvatar;
   /** A link (the channel has its own URL) … */
   href?: string;
   /** … drawn by the app's link component (Next's `Link`). */
@@ -257,15 +266,18 @@ export type ChannelItemProps = {
   labels?: Partial<TeamChatLabels>;
 };
 
+/** A person's picture on a DM (the rail's row, the conversation's head): an image URL, else initials from `name`. */
+export type DmAvatar = { src?: string | null; name?: string };
+
 /** 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) {
+export function ChannelItem({ name, kind = "channel", unread = 0, mentions = 0, active = false, online, avatar, 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" && avatar ? <Avatar name={avatar.name ?? name} src={avatar.src} size={24} className="gb-tc-channel__av" /> : <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>
@@ -290,6 +302,9 @@ export type ChatHeaderProps = {
   kind?: ChannelKind;
   /** One line under the name: the topic, "Just the two of you", "12 members". */
   topic?: React.ReactNode;
+  /** A direct message (`kind="dm"`): the person's picture left of the name in place of the glyph (21/10/2026), the kit's
+   *  `Avatar` at 24px, initials and tone when there is no `src`. `name` defaults to the header's when it is text. */
+  avatar?: DmAvatar;
   /** 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. */
@@ -300,7 +315,7 @@ export type ChatHeaderProps = {
   labels?: Partial<TeamChatLabels>;
 };
 
-export function ChatHeader({ name, kind, topic, onBack, members, actions, headingId, labels }: ChatHeaderProps) {
+export function ChatHeader({ name, kind, topic, avatar, onBack, members, actions, headingId, labels }: ChatHeaderProps) {
   const t = words(labels);
   return (
     <header className="gb-tc-head">
@@ -311,7 +326,8 @@ export function ChatHeader({ name, kind, topic, onBack, members, actions, headin
       ) : 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}
+          {kind === "dm" && avatar ? <Avatar name={avatar.name ?? (typeof name === "string" ? name : "")} src={avatar.src} size={24} className="gb-tc-head__av" />
+            : 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}
@@ -582,6 +598,9 @@ export type ComposerProps = {
   picker?: React.ReactNode;
   /** Show the paperclip; the app opens its file input. */
   onAttach?: () => void;
+  /** The emoji button (Chris 21/10/2026), on by default: it opens the reactions' picker (search, "Frequently used", the
+   *  groups) over the field, and a pick goes in at the caret. `false` for an app that does not want it. */
+  emoji?: boolean;
   /** The thread's "Also send to #general". */
   also?: { label: React.ReactNode; checked: boolean; onChange: (checked: boolean) => void };
   error?: React.ReactNode;
@@ -597,18 +616,84 @@ export type ComposerProps = {
 };
 
 /**
- * The field and its buttons in one box (paperclip · text · send), as Slack: one row even at 320px. Enter sends,
+ * Write `text` into a field over its selection (at its caret when nothing is selected) as typing would: focus stays in
+ * the field with the caret after the text, the browser's undo has it, and the field fires `input`, so React's onChange
+ * and any listener of the app's own hear it. `execCommand("insertText")` does all of that; where a browser refuses it,
+ * `setRangeText` and an `input` event. Nothing is written past the field's `maxLength`. Returns whether it wrote.
+ */
+function insertAtCaret(el: HTMLTextAreaElement, text: string, [from, to]: readonly [number, number]): boolean {
+  const before = el.value;
+  const s = Math.min(from, before.length), e = Math.min(Math.max(to, s), before.length);
+  el.focus({ preventScroll: true });
+  el.setSelectionRange(s, e);
+  if (el.maxLength >= 0 && before.length - (e - s) + text.length > el.maxLength) return false;
+  try { document.execCommand("insertText", false, text); } catch { /* not supported: below */ }
+  if (el.value === before) {
+    el.setRangeText(text, s, e, "end");
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  return true;
+}
+
+/** Under a finger: a question about the device, as team-chat.css asks it (`pointer: coarse`). */
+const coarsePointer = () => typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches;
+
+/**
+ * The field and its buttons in one box (paperclip · text · emoji · 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).
+ *
+ * The emoji button opens the reactions' own picker (`ReactionPicker` with no `items`) over the box, at its right edge
+ * (the box's whole width where the box is narrower than the picker: a phone). A pick goes in at the caret, over a
+ * selection, and joins "Frequently used"; focus stays in the field, after the emoji. Escape closes it and puts focus back
+ * in the field where the caret was; a press or focus anywhere else closes it. Under a finger it opens on the emoji, not
+ * the search, so the keyboard does not come up over it.
  */
 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) {
+  files, picker, onAttach, emoji = true, 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 popId = useId();
   const [own, setOwn] = useState(defaultValue);
   const text = value ?? own;
   const field = useRef<HTMLTextAreaElement | null>(null);
+  const [emojiOpen, setEmojiOpen] = useState(false);
+  const [emojiFocus, setEmojiFocus] = useState<"search" | "emoji">("search");
+  const emojiBtn = useRef<HTMLButtonElement>(null);
+  // Where the pick goes: the field's selection when the picker opened. A field never focused has no caret yet: its end.
+  const touched = useRef(false);
+  const at = useRef<[number, number]>([0, 0]);
+  const openEmoji = () => {
+    const el = field.current, n = el?.value.length ?? 0;
+    at.current = el && touched.current ? [el.selectionStart ?? n, el.selectionEnd ?? n] : [n, n];
+    setEmojiFocus(coarsePointer() ? "emoji" : "search");
+    setEmojiOpen(true);
+  };
+  const backToField = () => {
+    const el = field.current;
+    if (!el) return;
+    el.focus({ preventScroll: true });
+    el.setSelectionRange(Math.min(at.current[0], el.value.length), Math.min(at.current[1], el.value.length));
+  };
+  const pickEmoji = (e: string) => {
+    setEmojiOpen(false);
+    rememberRecent(e);
+    if (field.current) insertAtCaret(field.current, e, at.current);
+  };
+  // A press or focus outside the picker and its button closes it (and leaves focus where the person put it).
+  useEffect(() => {
+    if (!emojiOpen) return;
+    const away = (ev: Event) => {
+      const n = ev.target as Node | null, pop = document.getElementById(popId);
+      if (n && (pop?.contains(n) || emojiBtn.current?.contains(n))) return;
+      setEmojiOpen(false);
+    };
+    document.addEventListener("pointerdown", away, true);
+    document.addEventListener("focusin", away, true);
+    return () => { document.removeEventListener("pointerdown", away, true); document.removeEventListener("focusin", away, true); };
+  }, [emojiOpen, popId]);
+  useEffect(() => { if (disabled) setEmojiOpen(false); }, [disabled]);
   const setField = (el: HTMLTextAreaElement | null) => {
     field.current = el;
     if (typeof inputRef === "function") inputRef(el);
@@ -651,15 +736,27 @@ export function Composer({ onSend, value, defaultValue = "", onValueChange, plac
         <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)}
+          onFocus={() => { touched.current = true; }}
           onKeyDown={(e) => {
             onKeyDown?.(e);
             if (e.defaultPrevented || e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing || e.keyCode === 229) return;
             e.preventDefault();
             send();
           }} />
+        {emoji ? (
+          <button ref={emojiBtn} type="button" className="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label={t.emoji}
+            aria-expanded={emojiOpen} aria-controls={emojiOpen ? popId : undefined} disabled={disabled}
+            onClick={() => (emojiOpen ? setEmojiOpen(false) : openEmoji())}>
+            <Icon name="emoji" />
+          </button>
+        ) : null}
         <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>
+        {emoji && emojiOpen ? (
+          <ReactionPicker id={popId} className="gb-tc-composer__emoji-pop" label={t.pickEmoji} initialFocus={emojiFocus}
+            onPick={pickEmoji} onClose={() => { setEmojiOpen(false); backToField(); }} />
+        ) : null}
       </div>
       {also ? (
         <label className="ui-check gb-tc-composer__also">

package/src/theme-dark.css

@@ -1 +1 @@
-:root[data-theme=dark]{color-scheme:dark;--gemboss-primary: #f2f3f5;--gemboss-primary-dark: #ffffff;--gemboss-primary-soft: #23242a;--gemboss-on-primary: #0d0d12;--gemboss-accent: #7c84ff;--gemboss-accent-strong: #a3a9ff;--gemboss-accent-soft: #1f2140;--gemboss-text-strong: #f2f3f5;--gemboss-text: #e3e4e8;--gemboss-text-muted: #9a9ca6;--gemboss-surface: #16171d;--gemboss-canvas: #0d0d12;--gemboss-app-bg: #0d0d12;--gemboss-rail-bg: #0d0d12;--gemboss-panel-bg: #16171d;--gemboss-topbar-bg: rgba(13, 13, 18, .96);--gemboss-nav-bg: #0d0d12;--gemboss-nav-hover: rgba(255, 255, 255, .06);--gemboss-divider: #2a2b33;--gemboss-divider-soft: #22232a;--gemboss-hover: #22232b;--gemboss-active-bg: #262833;--gemboss-active-fg: #f2f3f5;--gemboss-field-bg: #121318;--gemboss-field-bg-hover: #17181e;--gemboss-field-ink: #e3e4e8;--gemboss-field-placeholder: #8a8c96;--gemboss-field-line: #3a3c46;--gemboss-field-line-hover: #50525e;--gemboss-field-line-active: #c9cbd3;--gemboss-chip-ink: #d6d8de;--gemboss-chip-line: #3a3c46;--gemboss-chip-line-hover: #50525e;--gemboss-chip-bg-hover: #22232b;--gemboss-success: #34c38f;--gemboss-success-strong: #5fd6a8;--gemboss-success-soft: #13291f;--gemboss-success-border: #22533e;--gemboss-warning: #e0b341;--gemboss-warning-soft: #2b2412;--gemboss-warning-border: #5a4a1d;--gemboss-danger: #ff6b5a;--gemboss-danger-strong: #ff8a7c;--gemboss-danger-soft: #2e1714;--gemboss-danger-border: #5c2a24;--ui-accent-fg: #0d0d12;--ui-warning-fg: #e8c063;--ui-card-shadow: none;--gb-brand-ink: #f2f3f5}:root[data-theme=dark] .gb-avatar[data-tone]{background:color-mix(in srgb,var(--gb-tone) 30%,#16171d);color:color-mix(in srgb,var(--gb-tone) 35%,#ffffff)}:root[data-theme=dark] body{background:var(--gemboss-app-bg);color:var(--gemboss-text)}:root[data-theme=dark] .gb-leaderboard-row.is-first .gb-leaderboard-value,:root[data-theme=dark] .gb-podium-slot--1 .gb-podium-value{color:#e0b341}
+:root[data-theme=dark]{color-scheme:dark;--gemboss-primary: #f2f3f5;--gemboss-primary-dark: #ffffff;--gemboss-primary-soft: #23242a;--gemboss-on-primary: #0d0d12;--gemboss-accent: #7c84ff;--gemboss-accent-strong: #a3a9ff;--gemboss-accent-soft: #1f2140;--gemboss-accent-wash: #181a33;--gemboss-accent-tint: #2a2e5c;--gemboss-accent-mid: #3b4180;--gemboss-text-strong: #f2f3f5;--gemboss-text: #e3e4e8;--gemboss-text-muted: #9a9ca6;--gemboss-surface: #16171d;--gemboss-canvas: #0d0d12;--gemboss-app-bg: #0d0d12;--gemboss-rail-bg: #0d0d12;--gemboss-panel-bg: #16171d;--gemboss-topbar-bg: rgba(13, 13, 18, .96);--gemboss-nav-bg: #0d0d12;--gemboss-nav-hover: rgba(255, 255, 255, .06);--gemboss-divider: #2a2b33;--gemboss-divider-soft: #22232a;--gemboss-hover: #22232b;--gemboss-active-bg: #262833;--gemboss-active-fg: #f2f3f5;--gemboss-field-bg: #121318;--gemboss-field-bg-hover: #17181e;--gemboss-field-ink: #e3e4e8;--gemboss-field-placeholder: #8a8c96;--gemboss-field-line: #3a3c46;--gemboss-field-line-hover: #50525e;--gemboss-field-line-active: #c9cbd3;--gemboss-chip-ink: #d6d8de;--gemboss-chip-line: #3a3c46;--gemboss-chip-line-hover: #50525e;--gemboss-chip-bg-hover: #22232b;--gemboss-success: #34c38f;--gemboss-success-strong: #5fd6a8;--gemboss-success-soft: #13291f;--gemboss-success-border: #22533e;--gemboss-warning: #e0b341;--gemboss-warning-soft: #2b2412;--gemboss-warning-border: #5a4a1d;--gemboss-danger: #ff6b5a;--gemboss-danger-strong: #ff8a7c;--gemboss-danger-soft: #2e1714;--gemboss-danger-border: #5c2a24;--ui-accent-fg: #0d0d12;--ui-warning-fg: #e8c063;--ui-card-shadow: none;--gb-brand-ink: #f2f3f5}:root[data-theme=dark] .gb-avatar[data-tone]{background:color-mix(in srgb,var(--gb-tone) 30%,#16171d);color:color-mix(in srgb,var(--gb-tone) 35%,#ffffff)}:root[data-theme=dark] body{background:var(--gemboss-app-bg);color:var(--gemboss-text)}:root[data-theme=dark] .gb-leaderboard-row.is-first .gb-leaderboard-value,:root[data-theme=dark] .gb-podium-slot--1 .gb-podium-value{color:#e0b341}