@chatwarden/player-react 0.0.0-stage → 0.1.2

package/dist/src/transport.js

@@ -0,0 +1,74 @@
+/** The query as strings, with `undefined` values dropped. */
+function queryOf(query) {
+    const out = {};
+    for (const [key, value] of Object.entries(query ?? {}))
+        if (value !== undefined)
+            out[key] = String(value);
+    return out;
+}
+function lowerCased(headers) {
+    const out = {};
+    for (const [key, value] of Object.entries(headers ?? {}))
+        out[key.toLowerCase()] = value;
+    return out;
+}
+/**
+ * A transport that calls `createRouter(playerRoutes(...))` directly, in the same process: no network. A demo and this
+ * package's tests use it, so the components run the real player routes. A response body goes through JSON on the way out, so
+ * the components see exactly what a fetch would deliver.
+ */
+export function routerTransport(handle, options = {}) {
+    return async (req) => {
+        const request = {
+            method: req.method,
+            path: req.path,
+            query: queryOf(req.query),
+            headers: { ...options.headers },
+            body: undefined,
+        };
+        // The routes read `rawBody`, never `body` (a pre-parsed body would skip the size cap and the key check).
+        if (req.body !== undefined)
+            request.rawBody = JSON.stringify(req.body);
+        const res = await handle(request);
+        const body = typeof res.body === 'string' ? res.body : res.body === undefined ? null : JSON.parse(JSON.stringify(res.body));
+        return { status: res.status, headers: lowerCased(res.headers), body };
+    };
+}
+/** The default transport for a real game: `fetch` against the routes your server mounts. */
+export function fetchTransport(options) {
+    if (typeof options?.baseUrl !== 'string')
+        throw new TypeError('fetchTransport: baseUrl is required (for example "/player")');
+    // "/" and "" both mean the server root: routes are then "/notices", "/record", ...
+    const base = options.baseUrl.replace(/\/+$/, '');
+    return async (req) => {
+        const params = new URLSearchParams(queryOf(req.query)).toString();
+        const url = `${base}${req.path}${params === '' ? '' : `?${params}`}`;
+        const headers = { accept: 'application/json', ...options.headers };
+        const init = { method: req.method, headers };
+        if (req.body !== undefined) {
+            headers['content-type'] = 'application/json';
+            init.body = JSON.stringify(req.body);
+        }
+        if (options.credentials !== undefined)
+            init.credentials = options.credentials;
+        if (req.signal !== undefined)
+            init.signal = req.signal;
+        if (req.keepalive === true)
+            init.keepalive = true;
+        const res = await (options.fetch ?? globalThis.fetch)(url, init);
+        const headersOut = {};
+        res.headers.forEach((value, key) => (headersOut[key.toLowerCase()] = value));
+        const text = await res.text();
+        let body = text === '' ? null : text;
+        if (text !== '' && /\bjson\b/i.test(headersOut['content-type'] ?? '')) {
+            try {
+                body = JSON.parse(text);
+            }
+            catch {
+                body = text;
+            }
+        }
+        return { status: res.status, headers: headersOut, body };
+    };
+}
+//# sourceMappingURL=transport.js.map

package/dist/src/transport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transport.js","sourceRoot":"","sources":["../../src/transport.ts"],"names":[],"mappings":"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"}

package/dist/src/ui.d.ts

@@ -0,0 +1,91 @@
+import type { ReactNode } from 'react';
+import type { NoticeKind, PlayerNotice } from '@chatwarden/core';
+import type { PlayerError } from './client.js';
+import type { PlayerT, PlayerText } from './i18n.js';
+/** What every component takes besides its own props. */
+export interface PlayerUiProps {
+    /** Words: `createT({ ...en, ...yourTranslation }, locale)`. Default: English. */
+    t?: PlayerT;
+    /** The locale for dates, times and plurals. Default: `en`. */
+    locale?: string;
+    /** The current time in epoch ms, for "how long is left". Default: `Date.now`. */
+    now?: () => number;
+    /** An IANA time zone for the times shown (`UTC`, `Europe/Berlin`). Default: the player's own. */
+    timeZone?: string;
+    /** Forces a theme; without it the player's `prefers-color-scheme` decides. */
+    theme?: 'light' | 'dark';
+    /** Added to the root element, so a game can theme it from its own stylesheet. */
+    className?: string;
+}
+export interface Ui {
+    t: PlayerT;
+    locale: string;
+    now: () => number;
+    timeZone: string | undefined;
+}
+export declare function useUi({ t, locale, now, timeZone }: PlayerUiProps): Ui;
+/** What the two components that open a dialog take besides the common props. */
+export interface DialogHostProps {
+    /**
+     * Draw the dialog inside this element instead of where the component is. The dialog is `position: fixed`, so an ancestor of the
+     * component with a `transform`, `filter`, `contain` or `will-change: transform` would make it relative to that ancestor and clip it;
+     * pass `document.body` (or a layer of your own) to avoid that. The theme and `className` still apply.
+     */
+    container?: HTMLElement | null;
+    /**
+     * Where focus goes when the dialog closes and the element that had focus before it opened is gone. Without it focus is left to the
+     * browser, which is the page body.
+     */
+    returnFocusTo?: () => HTMLElement | null;
+}
+/** Renders `children` where they are, or into `container` when one is given. */
+export declare function Portal({ container, children }: {
+    container: HTMLElement | null | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The root every component renders: the one class all the stylesheet's rules are scoped under. */
+export declare function Root({ theme, className, children }: {
+    theme?: 'light' | 'dark';
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The referee card: a yellow card for a warning, half yellow and half red for a restriction, red for a ban, and a dashed outline
+ * for a note. The same card as the moderator hub's, so a sanction looks the same to staff and player. Decoration: the kind is
+ * always written beside it. A kind with no card (a thank-you for a report) draws nothing.
+ */
+export declare function Card({ kind }: {
+    kind: string;
+}): import("react").JSX.Element | null;
+/** The plain sentence for a failed call. The server's own message is never shown. */
+export declare function errorText(t: PlayerT, e: PlayerError): string;
+/** A failed load: what could not be loaded, why, and a way to try again. */
+export declare function ErrorBlock({ ui, what, error, onRetry }: {
+    ui: Ui;
+    what: string;
+    error: PlayerError;
+    onRetry: () => void;
+}): import("react").JSX.Element;
+/** "Think this is a mistake?", when the adopter gave an address that is safe to link to. */
+export declare function AppealLink({ ui, href }: {
+    ui: Ui;
+    href: string | undefined;
+}): import("react").JSX.Element | null;
+export declare const titleKey: (kind: NoticeKind | string) => PlayerText;
+export declare const bodyKey: (kind: NoticeKind | string) => PlayerText;
+export declare const kindKey: (kind: NoticeKind | string) => PlayerText;
+/** A sanction a player can contest (a thank-you for a report is not one). */
+export declare const isSanction: (kind: string) => boolean;
+/** The facts of a notice, as a term list: the rule, when it was given (the record only), until when, and the reference code. */
+export declare function Facts({ ui, notice, record }: {
+    ui: Ui;
+    notice: PlayerNotice;
+    record?: boolean;
+}): import("react").JSX.Element | null;
+/** The player's own lines that led to a notice, as text with their day. Never HTML. */
+export declare function Lines({ ui, notice, id }: {
+    ui: Ui;
+    notice: PlayerNotice;
+    id: string;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=ui.d.ts.map

package/dist/src/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/ui.tsx"],"names":[],"mappings":"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"}

package/dist/src/ui.js

@@ -0,0 +1,116 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { WARNING_DAYS } from './constants.js';
+import { dayText, timeLeft, untilText } from './format.js';
+import { createT, en } from './i18n.js';
+import { safeHref } from './safeHref.js';
+const DAY = 86_400_000;
+export function useUi({ t, locale = 'en', now, timeZone }) {
+    const words = useMemo(() => t ?? createT(en, locale), [t, locale]);
+    return { t: words, locale, now: now ?? Date.now, timeZone };
+}
+/** Renders `children` where they are, or into `container` when one is given. */
+export function Portal({ container, children }) {
+    return container === undefined || container === null ? _jsx(_Fragment, { children: children }) : createPortal(children, container);
+}
+/** The root every component renders: the one class all the stylesheet's rules are scoped under. */
+export function Root({ theme, className, children }) {
+    return (_jsx("div", { className: className === undefined ? 'cw-player' : `cw-player ${className}`, ...(theme === undefined ? {} : { 'data-cw-theme': theme }), children: children }));
+}
+const CARD_OF = { warning: 'warning', chat: 'restriction', area: 'restriction', ban: 'ban', note: 'note' };
+/**
+ * The referee card: a yellow card for a warning, half yellow and half red for a restriction, red for a ban, and a dashed outline
+ * for a note. The same card as the moderator hub's, so a sanction looks the same to staff and player. Decoration: the kind is
+ * always written beside it. A kind with no card (a thank-you for a report) draws nothing.
+ */
+export function Card({ kind }) {
+    const card = Object.hasOwn(CARD_OF, kind) ? CARD_OF[kind] : undefined;
+    return card === undefined ? null : _jsx("span", { className: `cw-card cw-card--${card}`, "aria-hidden": "true" });
+}
+/** The plain sentence for a failed call. The server's own message is never shown. */
+export function errorText(t, e) {
+    if (e.status === 0)
+        return e.code === 'network' ? t('player.error.network') : t('player.error.generic');
+    if (e.status === 401)
+        return t('player.error.unauthorized');
+    if (e.status === 403)
+        return t('player.error.forbidden');
+    if (e.status === 404)
+        return t('player.error.notFound');
+    if (e.status === 429)
+        return e.retryAfter === undefined ? t('player.error.rateLimited') : t('player.error.rateLimited.after', { count: e.retryAfter });
+    if (e.status >= 500)
+        return t('player.error.server');
+    return t('player.error.generic');
+}
+/** A failed load: what could not be loaded, why, and a way to try again. */
+export function ErrorBlock({ ui, what, error, onRetry }) {
+    return (_jsxs("div", { className: "cw-error", role: "alert", children: [_jsxs("p", { children: [_jsx("strong", { children: what }), " ", errorText(ui.t, error)] }), _jsx("button", { type: "button", className: "cw-btn", onClick: onRetry, children: ui.t('player.state.retry') })] }));
+}
+/** "Think this is a mistake?", when the adopter gave an address that is safe to link to. */
+export function AppealLink({ ui, href }) {
+    const safe = safeHref(href);
+    if (safe === null)
+        return null;
+    return (_jsx("p", { className: "cw-appeal", children: _jsx("a", { className: "cw-link", href: safe, target: "_blank", rel: "noopener noreferrer", children: ui.t('player.notice.appeal') }) }));
+}
+const TITLE = {
+    warning: 'player.notice.title.warning',
+    chat: 'player.notice.title.chat',
+    area: 'player.notice.title.area',
+    ban: 'player.notice.title.ban',
+    report_outcome: 'player.notice.title.report_outcome',
+};
+const BODY = {
+    warning: 'player.notice.body.warning',
+    chat: 'player.notice.body.chat',
+    area: 'player.notice.body.area',
+    ban: 'player.notice.body.ban',
+    report_outcome: 'player.notice.body.report_outcome',
+};
+const KIND = {
+    warning: 'player.record.kind.warning',
+    chat: 'player.record.kind.chat',
+    area: 'player.record.kind.area',
+    ban: 'player.record.kind.ban',
+};
+export const titleKey = (kind) => (Object.hasOwn(TITLE, kind) ? TITLE[kind] : 'player.notice.title.fallback');
+export const bodyKey = (kind) => (Object.hasOwn(BODY, kind) ? BODY[kind] : 'player.notice.body.fallback');
+export const kindKey = (kind) => (Object.hasOwn(KIND, kind) ? KIND[kind] : 'player.record.kind.fallback');
+/** A sanction a player can contest (a thank-you for a report is not one). */
+export const isSanction = (kind) => kind === 'warning' || kind === 'chat' || kind === 'area' || kind === 'ban';
+/** The facts of a notice, as a term list: the rule, when it was given (the record only), until when, and the reference code. */
+export function Facts({ ui, notice, record = false }) {
+    const { t, locale, timeZone } = ui;
+    const rows = [];
+    if (notice.ruleLabel !== null)
+        rows.push([t('player.notice.rule'), notice.ruleLabel]);
+    if (record)
+        rows.push([t('player.notice.given'), untilText(notice.createdAt, locale, timeZone)]);
+    if (notice.kind === 'warning') {
+        // A warning has no end of its own: it stays on the record for 90 days from when it was made.
+        rows.push([t('player.notice.onRecordUntil'), untilText(notice.createdAt + WARNING_DAYS * DAY, locale, timeZone)]);
+    }
+    else if (isSanction(notice.kind) || notice.until !== null) {
+        if (notice.until === null)
+            rows.push([t('player.notice.until'), t('player.notice.noEnd')]);
+        else {
+            const when = untilText(notice.until, locale, timeZone);
+            const left = timeLeft(notice.until, ui.now(), locale);
+            rows.push(left === null ? [t('player.notice.ended'), when] : [t('player.notice.until'), t('player.notice.untilLeft', { when, left })]);
+        }
+    }
+    if (notice.refCode !== null)
+        rows.push([t('player.notice.ref'), notice.refCode]);
+    if (rows.length === 0)
+        return null;
+    return (_jsx("dl", { className: "cw-facts", children: rows.map(([term, value]) => (_jsxs("div", { className: "cw-fact", children: [_jsx("dt", { children: term }), _jsx("dd", { children: value })] }, term))) }));
+}
+/** The player's own lines that led to a notice, as text with their day. Never HTML. */
+export function Lines({ ui, notice, id }) {
+    if (notice.excerpt.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("p", { id: id, className: "cw-lines-label", children: ui.t('player.notice.lines') }), _jsx("ul", { className: "cw-lines", "aria-labelledby": id, children: notice.excerpt.map((line, i) => (_jsxs("li", { children: [_jsx("span", { className: "cw-line-day", children: dayText(line.day, ui.locale) }), _jsx("span", { className: "cw-line-text", children: line.text })] }, i))) })] }));
+}
+//# sourceMappingURL=ui.js.map

package/dist/src/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../../src/ui.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,75 @@
 {
   "name": "@chatwarden/player-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.2",
+  "private": false,
+  "description": "Player-facing React components for Chatwarden: the notice dialog, My record, the rules page, a report dialog and a restricted-chat line, over the player HTTP routes.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "engines": {
+    "node": ">=22.13"
+  },
+  "keywords": [
+    "chatwarden",
+    "moderation",
+    "chat",
+    "react",
+    "player",
+    "notices"
+  ],
+  "homepage": "https://github.com/hainix/chatwarden/tree/main/packages/player-react#readme",
+  "bugs": {
+    "url": "https://github.com/hainix/chatwarden/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hainix/chatwarden.git",
+    "directory": "packages/player-react"
+  },
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "sideEffects": [
+    "./src/styles.css"
+  ],
+  "files": [
+    "dist/src",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "prepack": "tsc -b"
+  },
+  "peerDependencies": {
+    "@chatwarden/core": "^0.1.2",
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@chatwarden/core": "0.1.2",
+    "@chatwarden/http": "0.1.2",
+    "@chatwarden/hub-react": "0.1.2",
+    "@chatwarden/store-memory": "0.1.2",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.9",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "axe-core": "^4.14.0",
+    "esbuild": "0.28.2",
+    "jsdom": "^29.1.1",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "~5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Dialog.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState } from 'react';
+import type { KeyboardEvent, ReactNode, RefObject } from 'react';
+
+// A modal window: it takes focus when it opens, keeps focus inside, and hands focus back to what had it. It is a plain ARIA dialog
+// (not <dialog>), so it works the same in every embedded browser a game may use. A click outside never closes it: a notice has to
+// be acknowledged, and a half-written report is not lost by a stray click.
+//
+// Focus is kept in three ways, because Tab alone is not enough: the keydown handler wraps Tab at the ends, a click on the backdrop
+// does not move focus (mousedown is cancelled), and a document-wide `focusin` guard pulls focus back if anything outside the window
+// gets it (a script, a click on a game control that is still reachable).
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+/**
+ * The controls Tab visits, in order. A radio group is one stop (the checked radio, or the first when none is checked), because the
+ * browser moves between its radios with the arrow keys: counting every radio would make "the first control" the wrong one to wrap at.
+ */
+function tabStops(box: HTMLElement): HTMLElement[] {
+  const all = [...box.querySelectorAll<HTMLElement>(FOCUSABLE)];
+  return all.filter((el) => {
+    if (!(el instanceof HTMLInputElement) || el.type !== 'radio' || el.name === '') return true;
+    const group = all.filter((o): o is HTMLInputElement => o instanceof HTMLInputElement && o.type === 'radio' && o.name === el.name);
+    return el === (group.find((r) => r.checked) ?? group[0]);
+  });
+}
+
+export function Dialog({
+  labelledBy,
+  initialFocus,
+  onEscape,
+  returnFocusTo,
+  children,
+}: {
+  /** The id of the heading that names the window. */
+  labelledBy: string;
+  /** What takes focus when it opens: the heading. */
+  initialFocus: RefObject<HTMLElement | null>;
+  /** Called on Escape. Leave it out when the window must not be dismissed. */
+  onEscape?: () => void;
+  /** Where focus goes on close when the element that had it before is gone. */
+  returnFocusTo?: () => HTMLElement | null;
+  children: ReactNode;
+}) {
+  const box = useRef<HTMLDivElement>(null);
+  const fallback = useRef(returnFocusTo);
+  fallback.current = returnFocusTo;
+  // What had focus before the window opened, read while rendering for the first time: a child's own effect (which moves focus to
+  // its heading) runs before this component's effects, so reading it in an effect would find the heading.
+  const [before] = useState<Element | null>(() => (typeof document === 'undefined' ? null : document.activeElement));
+
+  useEffect(() => {
+    (initialFocus.current ?? box.current)?.focus();
+    const onFocusIn = (e: FocusEvent): void => {
+      const target = e.target;
+      const inner = box.current;
+      if (inner !== null && target instanceof Node && !inner.contains(target)) (initialFocus.current ?? inner).focus();
+    };
+    document.addEventListener('focusin', onFocusIn);
+    return () => {
+      // Stop guarding first, so giving focus back is not pulled in again.
+      document.removeEventListener('focusin', onFocusIn);
+      // Give focus back, unless what had it is gone (the page moved on while the window was open): then to `returnFocusTo()`, if
+      // the host gave one, and otherwise to wherever the browser leaves it (the page body).
+      if (before instanceof HTMLElement && before.isConnected) before.focus();
+      else {
+        try {
+          fallback.current?.()?.focus();
+        } catch {
+          // A host callback that throws must not stop the window closing.
+        }
+      }
+    };
+    // Once, when the window opens.
+  }, []);
+
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {
+    if (e.key === 'Escape') {
+      if (onEscape === undefined) return;
+      e.preventDefault();
+      e.stopPropagation();
+      onEscape();
+      return;
+    }
+    if (e.key !== 'Tab' || box.current === null) return;
+    const items = tabStops(box.current);
+    if (items.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const first = items[0] as HTMLElement;
+    const last = items[items.length - 1] as HTMLElement;
+    const active = document.activeElement;
+    // From the heading (or the box), which is not in the list, Tab goes to the first control and Shift+Tab to the last.
+    const inList = items.includes(active as HTMLElement);
+    if (e.shiftKey && (active === first || !inList)) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && (active === last || !inList)) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+
+  return (
+    <div
+      className="cw-scrim"
+      onMouseDown={(e) => {
+        // A press on the backdrop would drop focus to the page body, and the next Tab would leave the window: keep it where it is.
+        if (e.target === e.currentTarget) e.preventDefault();
+      }}
+    >
+      <div ref={box} className="cw-dialog" role="dialog" aria-modal="true" aria-labelledby={labelledBy} tabIndex={-1} onKeyDown={onKeyDown}>
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/FollowUp.tsx

@@ -0,0 +1,139 @@
+import { useId, useState } from 'react';
+import type { FormEvent, MutableRefObject } from 'react';
+import type { ReportDetailResult } from '@chatwarden/core';
+import { NOTE_MAX } from './constants.js';
+import { PlayerError } from './client.js';
+import type { PlayerText } from './i18n.js';
+import { Picker } from './Picker.js';
+import type { ReasonGroup } from './reporting.js';
+import { errorText } from './ui.js';
+import type { PlayerT } from './i18n.js';
+
+/** What the player adds after a one-tap report. Your server calls `cw.reports.addDetail(reportId, reporterSeat, detail)`. */
+export interface ReportFollowUp {
+  reason?: string;
+  note?: string;
+}
+
+/** How the follow-up ended, for the dialog to say: added, or the refusal word (an unknown one reads as a failure). */
+export type FollowUpOutcome = { ok: true } | { ok: false; refused: string };
+
+/** A failure to send as an error the components can word: anything that is not already a PlayerError is a dropped connection. */
+const failureOf = (e: unknown): PlayerError =>
+  e instanceof PlayerError ? e : new PlayerError({ status: 0, code: 'network', message: 'Could not reach the server.' });
+
+/**
+ * The optional step after a one-tap report: an "Add a reason" button that opens the reasons (in groups) and a note, and sends them to
+ * `onAddDetail` for the report just filed. Nothing is sent when nothing is chosen. One thing on its way at a time, shared with the
+ * dialog through `sending` (so Escape and Close wait for it); `onBusy` tells the dialog to dim its Close button.
+ */
+export function FollowUp(props: {
+  t: PlayerT;
+  groups: readonly ReasonGroup[];
+  reportId: string;
+  onAddDetail: (reportId: string, detail: ReportFollowUp) => Promise<ReportDetailResult>;
+  sending: MutableRefObject<boolean>;
+  busy: boolean;
+  onBusy: (busy: boolean) => void;
+  onDone: (outcome: FollowUpOutcome) => void;
+}) {
+  const { t, groups, reportId, onAddDetail, sending, busy, onBusy, onDone } = props;
+  const name = useId();
+  const noteId = useId();
+  const missingId = useId();
+  const panelId = useId();
+  const [open, setOpen] = useState(false);
+  const [reason, setReason] = useState<string | null>(null);
+  const [note, setNote] = useState('');
+  const [missing, setMissing] = useState(false);
+  const [failure, setFailure] = useState<PlayerError | null>(null);
+
+  const trimmed = note.trim();
+  const submit = async (e: FormEvent): Promise<void> => {
+    e.preventDefault();
+    if (sending.current) return;
+    if (reason === null && trimmed === '') {
+      setMissing(true);
+      return;
+    }
+    sending.current = true;
+    onBusy(true);
+    setFailure(null);
+    try {
+      const detail: ReportFollowUp = { ...(reason === null ? {} : { reason }), ...(trimmed === '' ? {} : { note: trimmed }) };
+      const raw: unknown = await onAddDetail(reportId, detail);
+      // Anything that is not a result object (undefined, null, a string) is not a success and not a crash: it reads as an unknown refusal.
+      const answer = typeof raw === 'object' && raw !== null && !Array.isArray(raw) ? (raw as ReportDetailResult) : ({ ok: false, refused: 'unknown' } as unknown as ReportDetailResult);
+      onDone(answer.ok === true ? { ok: true } : { ok: false, refused: String((answer as { refused?: unknown }).refused) });
+    } catch (error) {
+      setFailure(failureOf(error));
+    } finally {
+      sending.current = false;
+      onBusy(false);
+    }
+  };
+
+  return (
+    <form onSubmit={(e) => void submit(e)} noValidate>
+      <button type="button" className="cw-btn cw-disclosure" aria-expanded={open} aria-controls={open ? panelId : undefined} onClick={() => setOpen(!open)}>
+        {t('player.report.addReason')}
+      </button>
+      {open && (
+        <div id={panelId} className="cw-panel">
+          <p className="cw-hint">{t('player.report.addReasonHint')}</p>
+          <Picker
+            groups={groups}
+            name={name}
+            value={reason}
+            legend={t('player.report.detail.legend')}
+            invalid={missing}
+            describedBy={missingId}
+            onChange={(id) => {
+              setReason(id);
+              setMissing(false);
+            }}
+          />
+          {missing && (
+            <p id={missingId} className="cw-field-error" role="alert">
+              {t('player.report.detail.need')}
+            </p>
+          )}
+          <label className="cw-label" htmlFor={noteId}>
+            {t('player.report.note')}
+          </label>
+          <textarea
+            id={noteId}
+            className="cw-textarea"
+            rows={3}
+            maxLength={NOTE_MAX}
+            value={note}
+            onChange={(e) => {
+              setNote(e.target.value);
+              setMissing(false);
+            }}
+          />
+          {failure !== null && (
+            <p className="cw-error" role="alert">
+              {t('player.report.detail.failed')} {errorText(t, failure)}
+            </p>
+          )}
+          <div className="cw-actions">
+            <button type="submit" className="cw-btn cw-btn--primary" aria-disabled={busy || undefined} aria-busy={busy || undefined}>
+              {t('player.report.detail.send')}
+            </button>
+          </div>
+        </div>
+      )}
+    </form>
+  );
+}
+
+/** The plain message for a follow-up refusal; one a newer kit adds gets the general one. */
+export const DETAIL_REFUSED_TEXT: Readonly<Record<string, PlayerText>> = {
+  off: 'player.report.detail.refused.off',
+  not_found: 'player.report.detail.refused.not_found',
+  not_reporter: 'player.report.detail.refused.not_reporter',
+  too_late: 'player.report.detail.refused.too_late',
+  already_added: 'player.report.detail.refused.already_added',
+  reason_unknown: 'player.report.detail.refused.reason_unknown',
+};