@eifi1/ui-kit 0.37.0 → 0.38.0

package/dist/notifications/feedback-notification-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/notifications/feedback-notification-types.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport type { NotificationTypeEntry } from \"./notification-types\";\nimport {\n  DEFAULT_FEEDBACK_NOTIFICATION_TYPES_LABELS,\n  type FeedbackNotificationTypesLabels,\n} from \"./feedback-notification-types-labels\";\n\nexport { DEFAULT_FEEDBACK_NOTIFICATION_TYPES_LABELS };\nexport type { FeedbackNotificationTypesLabels };\n\n/** The two feedback notification ids (§9.11), as server-kit's `FEEDBACK_ANSWERED` and\n *  `FEEDBACK_COMMENT` name them. */\nexport type FeedbackNotificationTypeId = \"feedback_answered\" | \"feedback_comment\";\n\n/**\n * The setting words of the two feedback notification types (round 0.38,\n * docs/feedback-harmonization.md §9.11), for `NotificationTypesSetting`'s `types`:\n *\n * ```tsx\n * const feedbackTypes = useFeedbackNotificationTypes();\n * <NotificationTypesSetting types={[...appTypes, ...feedbackTypes]} … />\n * ```\n *\n * - **\"Answers to your reports\"** (`feedback_answered`): a reply from the admin or a\n *   loop, to the author and every earlier commenter.\n * - **\"Comments on reports you follow\"** (`feedback_comment`): a visible comment, to the\n *   author and the earlier commenters.\n *\n * Both entries are always returned: the card draws a type only when the server answered\n * it (notifications §2.1), so kastlan, which does not declare `feedback_comment` while its\n * public parts are off, shows the first alone. Words: `<UiKitProvider labels={{\n * feedbackNotificationTypes }}>` over English, `labels` over both.\n */\nexport function useFeedbackNotificationTypes(\n  labels?: LabelOverride<FeedbackNotificationTypesLabels>,\n): NotificationTypeEntry<FeedbackNotificationTypeId>[] {\n  const words = useKitLabels(\"feedbackNotificationTypes\", DEFAULT_FEEDBACK_NOTIFICATION_TYPES_LABELS, labels);\n  return useMemo(\n    () => [\n      { id: \"feedback_answered\", label: words.answered, description: words.answeredDescription },\n      { id: \"feedback_comment\", label: words.comment, description: words.commentDescription },\n    ],\n    [words],\n  );\n}\n"],"mappings":";AAAA,SAAS,eAAe;AACxB,SAAS,oBAAwC;AAEjD;AAAA,EACE;AAAA,OAEK;AA4BA,SAAS,6BACd,QACqD;AACrD,QAAM,QAAQ,aAAa,6BAA6B,4CAA4C,MAAM;AAC1G,SAAO;AAAA,IACL,MAAM;AAAA,MACJ,EAAE,IAAI,qBAAqB,OAAO,MAAM,UAAU,aAAa,MAAM,oBAAoB;AAAA,MACzF,EAAE,IAAI,oBAAoB,OAAO,MAAM,SAAS,aAAa,MAAM,mBAAmB;AAAA,IACxF;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AACF;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/feedback/feedback-comment-thread.tsx

@@ -0,0 +1,255 @@
+import type { ReactNode } from "react";
+import { EyeOff } from "lucide-react";
+import { Button } from "../components/button";
+import { useConfirm } from "../components/confirm-dialog";
+import type { CommitScope } from "../components/write-lock";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { FeedbackStatusBadge } from "./feedback-inbox";
+import type { FeedbackComment, FeedbackReply } from "./feedback-public-types";
+import { DEFAULT_FEEDBACK_PUBLIC_LABELS } from "./feedback-public-labels";
+import { FEEDBACK_COMMENT_MAX } from "./feedback-record";
+import { useFeedbackRepliesLabels } from "./feedback-replies";
+import { ChatComposer, FeedbackThread } from "./feedback-thread";
+import type { FeedbackThreadMessage } from "./feedback-thread";
+import { DEFAULT_FEEDBACK_COMMENTS_LABELS } from "./feedback-thread-parts-labels";
+
+/**
+ * A report's conversation as everyone who may read it sees it
+ * (docs/feedback-harmonization.md §9.8): the admin's replies and other people's
+ * comments, each its own row, oldest first — merged by time, on the
+ * {@link FeedbackThread} look — and the box to add one.
+ *
+ * - **Replies** are drawn as staff posts with the status they set ("→ Done"); a reply
+ *   without an author is "Admin" (§9.7).
+ * - **Comments**: the viewer's own at the reading end ("You"); someone else's under the
+ *   first name the server sent, `null` as "A user" (§9.5, `feedbackPublic.anonymous`).
+ * - **Hidden** (§9.8): others see "Hidden by an admin" and no name, no text; the writer
+ *   sees their text with that line; the admin sees it struck through, with **Unhide**.
+ *   An admin has **Hide** on every visible comment; the writer **Delete** on their own,
+ *   after a confirm (it is a hard delete). Nobody edits a comment.
+ * - **The composer** (1–4 000 characters, no files) only with `onComment`: left out for
+ *   a reader who may not write (a demo, a CRASH report — the app knows).
+ *
+ * Delete asks through `useConfirm`, so a thread with `onDelete` and a comment of the
+ * viewer's needs the app's `ConfirmProvider` (each app mounts one already).
+ */
+
+/* ── Labels ───────────────────────────────────────────────────────────────── */
+
+/** The `feedbackComments` namespace of `<UiKitProvider labels>`. A `null` name is
+ *  `feedbackPublic.anonymous`, the public pages' word, so the two say the same. */
+export interface FeedbackCommentsLabels {
+  /** The thread's accessible name. de-CH: "Kommentare" */
+  comments: string;
+  /** Nothing yet. de-CH: "Noch keine Kommentare" */
+  empty: string;
+  /** In place of a hidden comment. de-CH: "Von einem Admin ausgeblendet" */
+  hidden: string;
+  /** The admin's button. de-CH: "Ausblenden" */
+  hide: string;
+  /** The admin's button on a hidden comment. de-CH: "Einblenden" */
+  unhide: string;
+  /** The writer's button. de-CH: "Löschen" */
+  delete: string;
+  /** The confirm's question. de-CH: "Diesen Kommentar löschen?" */
+  deleteTitle: string;
+  /** The confirm's line. de-CH: "Er wird für alle entfernt. Das kann nicht rückgängig
+   *  gemacht werden." */
+  deleteBody: string;
+  /** The box's accessible name. de-CH: "Kommentar schreiben" */
+  field: string;
+  /** de-CH: "Kommentar schreiben…" */
+  placeholder: string;
+  /** The send button. de-CH: "Kommentieren" */
+  send: string;
+}
+
+export { DEFAULT_FEEDBACK_COMMENTS_LABELS };
+
+/* ── The thread ───────────────────────────────────────────────────────────── */
+
+export interface FeedbackCommentThreadProps {
+  /** The report's replies (§9.7), oldest first. `[]` when it has none. */
+  replies: readonly FeedbackReply[];
+  /** `GET /feedback/{id}/comments`, oldest first. */
+  comments: readonly FeedbackComment[];
+  /** The viewer is the app's admin: Hide / Unhide, the hidden text struck through. */
+  isAdmin: boolean;
+  /** `POST /feedback/{id}/comments`. Return the promise: the box clears when it
+   *  resolves. Left out, no composer. */
+  onComment?: (body: string) => void | Promise<unknown>;
+  /** `PATCH /feedback/{id}/comments/{comment_id} {hidden}` — the admin's. Left out, no
+   *  Hide / Unhide. */
+  onHide?: (comment: FeedbackComment, hidden: boolean) => void | Promise<unknown>;
+  /** `DELETE /feedback/{id}/comments/{comment_id}` — the writer's own, after the
+   *  confirm. Left out, no Delete. */
+  onDelete?: (comment: FeedbackComment) => void | Promise<unknown>;
+  /** A comment is being sent. */
+  pending?: boolean;
+  /** The comments are loading. */
+  loading?: boolean;
+  /** Comment, Hide and Delete COMMIT — see Button's `commit`. */
+  commit?: CommitScope;
+  /** "Now" for the relative times — pin it in tests and stories. */
+  now?: Date | number;
+  labels?: LabelOverride<FeedbackCommentsLabels>;
+  className?: string;
+}
+
+type Entry = { at: number; order: number; message: FeedbackThreadMessage };
+
+const instant = (iso: string) => {
+  const ms = Date.parse(iso);
+  return Number.isNaN(ms) ? 0 : ms;
+};
+
+export function FeedbackCommentThread({
+  replies,
+  comments,
+  isAdmin,
+  onComment,
+  onHide,
+  onDelete,
+  pending = false,
+  loading = false,
+  commit,
+  now,
+  labels: labelsProp,
+  className,
+}: FeedbackCommentThreadProps) {
+  const labels = useKitLabels("feedbackComments", DEFAULT_FEEDBACK_COMMENTS_LABELS, labelsProp);
+  const anonymous = useKitLabels("feedbackPublic", DEFAULT_FEEDBACK_PUBLIC_LABELS).anonymous;
+  const replyLabels = useFeedbackRepliesLabels();
+
+  const entries: Entry[] = [];
+  replies.forEach((reply, order) => {
+    entries.push({
+      at: instant(reply.created_at),
+      order,
+      message: {
+        id: `reply-${reply.id}`,
+        author: reply.author_name ?? replyLabels.admin,
+        createdAt: reply.created_at,
+        body: reply.body,
+        staff: true,
+        badge: reply.status_to ? (
+          <span className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1" data-feedback-reply-status={reply.status_to}>
+            <span className="sr-only">{replyLabels.statusChanged}</span>
+            <span aria-hidden>→</span>
+            <FeedbackStatusBadge status={reply.status_to} />
+          </span>
+        ) : undefined,
+      },
+    });
+  });
+  comments.forEach((comment, index) => {
+    // Shown as hidden — no name, no text — to anyone but its writer and an admin.
+    const veiled = comment.hidden && !comment.mine && !isAdmin;
+    const actions: ReactNode[] = [];
+    if (comment.hidden) {
+      actions.push(
+        <span key="hidden" className="inline-flex items-center gap-1" data-feedback-comment-hidden="">
+          <EyeOff className="size-3" aria-hidden />
+          {labels.hidden}
+        </span>,
+      );
+    }
+    if (isAdmin && onHide) {
+      actions.push(
+        <Button
+          key="hide"
+          type="button"
+          variant="link"
+          tone="muted"
+          size="sm"
+          commit={commit}
+          onClick={() => void onHide(comment, !comment.hidden)}
+        >
+          {comment.hidden ? labels.unhide : labels.hide}
+        </Button>,
+      );
+    }
+    if (comment.mine && onDelete) {
+      actions.push(
+        <DeleteCommentButton key="delete" comment={comment} onDelete={onDelete} commit={commit} labels={labels} />,
+      );
+    }
+    entries.push({
+      at: instant(comment.created_at),
+      // Replies first on a tie, then the comments in their order.
+      order: replies.length + index,
+      message: {
+        id: `comment-${comment.id}`,
+        own: comment.mine,
+        author: veiled ? undefined : comment.mine ? undefined : (comment.author_name ?? anonymous),
+        createdAt: comment.created_at,
+        body: veiled ? "" : (comment.body ?? ""),
+        staff: !veiled && comment.staff,
+        struck: comment.hidden && isAdmin && !veiled,
+        footer: actions.length > 0 ? actions : undefined,
+      },
+    });
+  });
+  entries.sort((a, b) => a.at - b.at || a.order - b.order);
+
+  return (
+    <div className={className} data-feedback-comment-thread="">
+      <FeedbackThread
+        messages={entries.map((entry) => entry.message)}
+        loading={loading}
+        now={now}
+        labels={{ thread: labels.comments, empty: labels.empty }}
+      />
+      {onComment && (
+        <ChatComposer
+          className="mt-3"
+          onSend={(body) => onComment(body)}
+          pending={pending}
+          commit={commit}
+          maxLength={FEEDBACK_COMMENT_MAX}
+          showCount
+          labels={{ field: labels.field, placeholder: labels.placeholder, send: labels.send }}
+        />
+      )}
+    </div>
+  );
+}
+
+/** The writer's Delete: a confirm (danger tone, focus on Cancel), then `onDelete`. Its
+ *  own component, so `useConfirm` — which needs a `ConfirmProvider` — is only called
+ *  where there is something to delete. */
+function DeleteCommentButton({
+  comment,
+  onDelete,
+  commit,
+  labels,
+}: {
+  comment: FeedbackComment;
+  onDelete: (comment: FeedbackComment) => void | Promise<unknown>;
+  commit?: CommitScope;
+  labels: FeedbackCommentsLabels;
+}) {
+  const confirm = useConfirm();
+  const remove = async () => {
+    const ok = await confirm({
+      title: labels.deleteTitle,
+      body: labels.deleteBody,
+      confirmLabel: labels.delete,
+      tone: "danger",
+      commit,
+    });
+    if (ok) await onDelete(comment);
+  };
+  return (
+    <Button
+      type="button"
+      variant="link"
+      tone="danger"
+      size="sm"
+      commit={commit}
+      onClick={() => void remove().catch(() => {})}
+    >
+      {labels.delete}
+    </Button>
+  );
+}

package/src/feedback/feedback-dialog-labels.ts

@@ -25,4 +25,5 @@ export const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels = {
   submitHint: (apple) => (apple ? "⌘ Enter to send" : "Ctrl+Enter to send"),
   cancel: "Cancel",
   save: "Send",
+  publicNotice: "Other users will see the title and text (never your screenshots or files).",
 };

package/src/feedback/feedback-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useId, useState } from "react";
 import type { ReactNode } from "react";
 import { Button } from "../components/button";
 import { Input } from "../components/input";
@@ -93,6 +93,11 @@ export interface FeedbackDialogTextLabels {
   submitHint: FeedbackSubmitHint;
   cancel: string;
   save: string;
+  /** 0.38 (docs/feedback-harmonization.md §9.2 decision 6): the line under the body when
+   *  reports are public — `useFeedbackSubmit({ publicNotice: true })` shows it. Optional,
+   *  so a complete `UiKitLabels` typed before 0.38 still compiles. de-CH "Andere Personen
+   *  sehen Titel und Text (nie Ihre Screenshots oder Dateien)." */
+  publicNotice?: string;
 }
 
 // Defined in ./feedback-dialog-labels, which holds no component code (0.34, KS U8).
@@ -161,6 +166,14 @@ interface FeedbackDialogBaseProps {
   /** The attachment field's `buttonSize` (0.25.0) — with {@link attachmentButtonVariant}.
    *  Default `"md"`; `"sm"` draws the paperclip and camera at 14px. */
   attachmentButtonSize?: ButtonSize;
+  /**
+   * A muted line under the body saying who will read it (0.38, docs/feedback-harmonization.md
+   * §9.2 decision 6) — the kit's sentence is `feedbackDialog.publicNotice`, "Other users
+   * will see the title and text (never your screenshots or files)", which
+   * `useFeedbackSubmit({ publicNotice: true })` passes. Attached to the body field with
+   * `aria-describedby`, so it is heard where the text is written. Left out: no line.
+   */
+  publicNotice?: ReactNode;
 }
 
 /** One attachment — a screenshot, a picked or a pasted image; a second replaces
@@ -228,6 +241,7 @@ export function FeedbackDialog(props: FeedbackDialogProps) {
     requireBody = true,
     attachmentButtonVariant,
     attachmentButtonSize,
+    publicNotice,
   } = props;
   const [title, setTitle] = useState("");
   const [body, setBody] = useState("");
@@ -236,6 +250,8 @@ export function FeedbackDialog(props: FeedbackDialogProps) {
   const [screenshot, setScreenshot] = useState<File | null>(null);
   const [files, setFiles] = useState<File[]>([]);
   const isMobile = usePhoneLayout();
+  const noticeId = useId();
+  const hasNotice = publicNotice !== undefined && publicNotice !== null && publicNotice !== false && publicNotice !== "";
   const labels = useKitLabels("feedbackDialog", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);
   const attachmentText = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
   // Under `multiple` the heading is `attachmentList` — a screenshot AND photos — which
@@ -295,14 +311,26 @@ export function FeedbackDialog(props: FeedbackDialogProps) {
   const subjectField = (
     <Input label={labels.subject} value={title} onChange={(e) => setTitle(e.target.value)} variant="display" />
   );
-  const bodyField = (
+  const bodyTextarea = (
     <Textarea
       rows={5}
       label={requireBody ? labels.body : (labelsProp?.body ?? labels.bodyOptional ?? labels.body)}
       value={body}
       onChange={(e) => setBody(e.target.value)}
+      aria-describedby={hasNotice ? noticeId : undefined}
     />
   );
+  // 0.38: who will read it, right under what they are writing (§9.2 decision 6).
+  const bodyField = hasNotice ? (
+    <div className="space-y-1">
+      {bodyTextarea}
+      <p id={noticeId} className="text-xs text-muted" data-feedback-public-notice="">
+        {publicNotice}
+      </p>
+    </div>
+  ) : (
+    bodyTextarea
+  );
   const fieldProps = {
     labels: attachmentLabels,
     accept: attachmentAccept,

package/src/feedback/feedback-menu-labels.ts

@@ -8,4 +8,5 @@ export const DEFAULT_FEEDBACK_MENU_LABELS: FeedbackMenuLabels = {
   trigger: "Send feedback",
   myFeedback: "My feedback",
   viewFeedback: "View feedback",
+  allFeedback: "All feedback",
 };

package/src/feedback/feedback-menu.tsx

@@ -1,4 +1,4 @@
-import { Inbox, MessageSquare } from "lucide-react";
+import { Inbox, MessageSquare, Users } from "lucide-react";
 import type { UserAvatarBadge } from "../components/user-avatar";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { TopBarActionMenu, type TopBarMenuEntry } from "../shell/topbar-action-menu";
@@ -25,6 +25,10 @@ export interface FeedbackMenuLabels {
   /** The link to the inbox — an admin's one list link, in place of "My feedback".
    *  keksdose `feedback.view_all`. */
   viewFeedback: string;
+  /** The link to every public report, {@link FeedbackMenuProps.publicHref} (0.38,
+   *  docs/feedback-harmonization.md §9.2 decision 21). Optional, so a complete
+   *  `UiKitLabels` typed before 0.38 still compiles. de-CH "Alle Rückmeldungen". */
+  allFeedback?: string;
 }
 
 // Defined in ./feedback-menu-labels, which holds no component code (0.34, KS U8).
@@ -43,7 +47,7 @@ export interface FeedbackMenuProps {
    * `Sparkles` Help assistant → `/assistant` and `MessagesSquare` Support chat →
    * `/support` with its unread chip. Any {@link TopBarMenuEntry}; keep their `key`s clear
    * of the menu's own (`BUG`, `IDEA`, `QUESTION`, `OTHER`, `feedback-divider`,
-   * `my-feedback`, `view-feedback`).
+   * `all-feedback`, `my-feedback`, `view-feedback`).
    */
   extraEntries?: TopBarMenuEntry[];
   /** The user's own reports, linked for everyone but an admin. Default `"/my-feedback"`
@@ -51,6 +55,15 @@ export interface FeedbackMenuProps {
   myFeedbackHref?: string;
   /** The admin inbox, linked for an admin. Default `"/feedback"` (§2.3). */
   inboxHref?: string;
+  /**
+   * The public list (0.38, docs/feedback-harmonization.md §9.2 decision 21): when passed,
+   * an **All feedback** row (`Users`, key `all-feedback`) above the list link, for
+   * everyone — the admin too, who reads what the others read there. keksdose:
+   * `"/all-feedback"`; "My feedback" stays as it is. Leave it out where the app has no
+   * public parts (kastlan) or the viewer may not see them (a Kurvenschmiede customer, a
+   * demo — §9.2 decisions 7, 8).
+   */
+  publicHref?: string;
   /** A dot on the trigger — keksdose's unread support replies (`tone: "danger"`). Its
    *  `label` joins the trigger's name ("Send feedback 2 unread"). The words are the app's. */
   iconBadge?: UserAvatarBadge | null;
@@ -70,7 +83,8 @@ export interface FeedbackMenuProps {
  *    the category badges' own glyphs), each calling `onFile(category)`;
  * 3. a divider, always;
  * 4. the app's `extraEntries`;
- * 5. ONE list link, `Inbox`: an admin's is "View feedback" → `/feedback`, everyone
+ * 5. with `publicHref` (0.38), **All feedback** → the public list, for everyone;
+ * 6. ONE list link, `Inbox`: an admin's is "View feedback" → `/feedback`, everyone
  *    else's "My feedback" → `/my-feedback` — keksdose's (`top-bar.tsx:205-214`, feedback
  *    #331: admins get the management view, everyone else their own submissions).
  *
@@ -96,6 +110,7 @@ export function FeedbackMenu({
   extraEntries,
   myFeedbackHref = "/my-feedback",
   inboxHref = "/feedback",
+  publicHref,
   iconBadge,
   labels: labelsProp,
   align,
@@ -114,6 +129,17 @@ export function FeedbackMenu({
     }),
     { kind: "divider", key: "feedback-divider" },
     ...(extraEntries ?? []),
+    ...(publicHref
+      ? [
+          {
+            kind: "link",
+            key: "all-feedback",
+            to: publicHref,
+            icon: <Users className="size-4" />,
+            label: labels.allFeedback ?? DEFAULT_FEEDBACK_MENU_LABELS.allFeedback!,
+          } satisfies TopBarMenuEntry,
+        ]
+      : []),
     {
       kind: "link",
       key: isAdmin ? "view-feedback" : "my-feedback",

package/src/feedback/feedback-public-labels.ts

@@ -0,0 +1,76 @@
+// The English words of the public feedback pages (round 0.38, docs/feedback-harmonization.md
+// §9.15) — `FeedbackPublicList`, `FeedbackPublicDetail` and `FeedbackPublicSwitch` — in a
+// module with no component code: the English catalogue (src/i18n/defaults.ts) imports
+// them without the components, as every `*-labels.ts` (0.34, KS U8).
+
+/**
+ * `feedbackPublic` — the words of the pages every user reads (§9.3, §9.9): the list's
+ * sort, search and count, the detail's sections and the "Visible to others" switch. The
+ * table's column names that the inbox already has (#, Date, Category, Subject, Status)
+ * stay `feedbackPage`'s, so the two lists cannot disagree; the vote button's words are
+ * `feedbackVote`'s, the thread's `feedbackComments`'.
+ *
+ * de-CH canon (§9.2, §9.5): `title` "Alle Rückmeldungen", `anonymous` "Eine Person".
+ */
+export interface FeedbackPublicLabels {
+  /** The page's heading — keksdose's `/all-feedback`, the menu's "All feedback". */
+  title: string;
+  /** The sort toggle's accessible name. */
+  sort: string;
+  /** `sort=newest`, the server's default. */
+  sortNewest: string;
+  /** `sort=votes`: most votes, then newest. */
+  sortVotes: string;
+  /** `sort=updated`. */
+  sortUpdated: string;
+  /** The search box's accessible name: it searches titles only (§9.9). */
+  search: string;
+  /** The Votes column's header. */
+  columnVotes: string;
+  /** How many reports the server has for this query (`total`). */
+  total: (count: number) => string;
+  /** A row's visible comments, the chip beside its title. */
+  comments: (count: number) => string;
+  /** A row's votes, the count on a phone card (the button is in the opened report). */
+  votes: (count: number) => string;
+  /** A `null` name (§9.5): an incomplete or erased account. */
+  anonymous: string;
+  /** Who filed it, with the server's first name (or {@link anonymous}). */
+  filedBy: (name: string) => string;
+  /** The detail's public body section. */
+  body: string;
+  /** The detail's merged replies and comments (§9.8, "Order"). */
+  conversation: string;
+  /** While the list or the comments load. */
+  loading: string;
+  /** No public report (yet, or for this search). */
+  empty: string;
+  /** `FeedbackPublicSwitch`'s label (§9.3, decision 6). */
+  visibleToOthers: string;
+  /** The line under it: what others see, and what never. */
+  visibleHint: string;
+  /** Why the author cannot flip it now: the report is past its open window (§9.3). */
+  visibleLocked: string;
+}
+
+export const DEFAULT_FEEDBACK_PUBLIC_LABELS: FeedbackPublicLabels = {
+  title: "All feedback",
+  sort: "Sort",
+  sortNewest: "Newest",
+  sortVotes: "Most wanted",
+  sortUpdated: "Recently updated",
+  search: "Search titles",
+  columnVotes: "Votes",
+  total: (count) => (count === 1 ? "1 report" : `${count} reports`),
+  comments: (count) => (count === 1 ? "1 comment" : `${count} comments`),
+  votes: (count) => (count === 1 ? "1 vote" : `${count} votes`),
+  anonymous: "A user",
+  filedBy: (name) => `From ${name}`,
+  body: "Description",
+  conversation: "Answers and comments",
+  loading: "Loading…",
+  empty: "No reports yet",
+  visibleToOthers: "Visible to others",
+  visibleHint: "Other users see the title and text, never your screenshots or files.",
+  visibleLocked: "Only while the report is still open.",
+};