@eifi1/ui-kit 0.36.0 → 0.38.0

package/dist/settings/device-reset-setting.d.ts

@@ -50,9 +50,9 @@ export interface DeviceResetSettingProps extends Omit<SettingsSectionProps, "anc
  * - **Live, no reload** (decision 10): each registered store resets through its own
  *   setter; the card stays where it is.
  *
- * The app adds the catalogue entry, `{ id: "device_reset", group: "appearance", anchor:
- * DEVICE_RESET_ANCHOR, title, keywords }` (`title` and `keywords` from these labels), last
- * in its appearance group: inside a `SettingsLayout`, `SettingsSection` throws in
- * development without it.
+ * The app adds the catalogue entry, `{ id, group: "appearance", anchor: DEVICE_RESET_ANCHOR,
+ * title, keywords }` (the id in its catalogue's own style, e.g. `device_reset` or
+ * `deviceReset`; `title` and `keywords` from these labels), last in its appearance group:
+ * inside a `SettingsLayout`, `SettingsSection` throws in development without it.
  */
 export declare function DeviceResetSetting({ description, labels: labelsProp, onReset, ...rest }: DeviceResetSettingProps): import("react").JSX.Element;

package/dist/settings/device-reset-setting.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/device-reset-setting.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { resetDeviceSettings } from \"../lib/device-settings\";\nimport { Button } from \"../components/button\";\nimport { useConfirm } from \"../components/confirm-dialog\";\nimport { toast } from \"../components/toast\";\nimport { SettingsSection, type SettingsSectionProps } from \"./settings-section\";\nimport { DEFAULT_DEVICE_RESET_LABELS } from \"./device-reset-setting-labels\";\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string {@link DeviceResetSetting} renders — the `deviceReset` namespace of\n *  `<UiKitProvider labels>`, overridable per instance through `labels`\n *  (docs/settings-harmonization.md §11.3). The confirm's Cancel is `confirmDialog.cancel`. */\nexport interface DeviceResetLabels {\n  /** The card's title, and the app's catalogue entry's. */\n  title: string;\n  /** The line under it: what goes back, and that the account is not touched. */\n  description: string;\n  /** The button that asks first. */\n  action: string;\n  /** The question it asks. */\n  confirmTitle: string;\n  /** What goes, what follows the account again, and what stays. */\n  confirmBody: string;\n  /** The button that answers it. */\n  confirmAction: string;\n  /** The toast once it is done. */\n  done: string;\n  /** For the app's catalogue entry (`keywords`); the card never reads it. */\n  keywords: string;\n}\n\n// Defined in ./device-reset-setting-labels, which holds no component code.\nexport { DEFAULT_DEVICE_RESET_LABELS };\n\n/* ── The card ────────────────────────────────────────────────────────────── */\n\n/** The card's DOM id: its catalogue entry's `anchor`, the `?focus=` target. */\nexport const DEVICE_RESET_ANCHOR = \"settings-device-reset\";\n\n// `onReset` is the card's own: the DOM's form-reset handler never fires on a div.\nexport interface DeviceResetSettingProps\n  extends Omit<SettingsSectionProps, \"anchor\" | \"title\" | \"description\" | \"children\" | \"onReset\"> {\n  /** The app's sentence after the kit's description: what of its own goes back, and what\n   *  stays (keksdose: the date format, the feature set and the gestures go; presentation\n   *  mode and the home position stay). */\n  description?: ReactNode;\n  labels?: LabelOverride<DeviceResetLabels>;\n  /** Runs after the reset and before the toast, with the keys reset or removed. */\n  onReset?: (keys: string[]) => void;\n}\n\n/**\n * \"Reset this device's settings\" (docs/settings-harmonization.md §11): the LAST card of\n * the appearance group. It puts this device's appearance — theme, palette, language, text\n * size, contrast and the app's own appearance choices — and its views — table views, the\n * sidebar, folded groups, saved filters — back to what a new device gets, through\n * {@link resetDeviceSettings}. The account, the sign-in, the session and anything waiting\n * to be sent are never touched: they never join the registry.\n *\n * - **A confirm, not an undo** (§11.2 decision 9): `useConfirm` in the neutral tone,\n *   then a toast. An app mounts a `ConfirmProvider` and a `Toaster` already.\n * - **Not a commit**: nothing is written to the account, so a demo or a lapsed plan's\n *   write lock does not disable it (decision 3).\n * - **Live, no reload** (decision 10): each registered store resets through its own\n *   setter; the card stays where it is.\n *\n * The app adds the catalogue entry, `{ id: \"device_reset\", group: \"appearance\", anchor:\n * DEVICE_RESET_ANCHOR, title, keywords }` (`title` and `keywords` from these labels), last\n * in its appearance group: inside a `SettingsLayout`, `SettingsSection` throws in\n * development without it.\n */\nexport function DeviceResetSetting({\n  description,\n  labels: labelsProp,\n  onReset,\n  ...rest\n}: DeviceResetSettingProps) {\n  const labels = useKitLabels(\"deviceReset\", DEFAULT_DEVICE_RESET_LABELS, labelsProp);\n  const confirm = useConfirm();\n\n  const reset = async () => {\n    const ok = await confirm({\n      title: labels.confirmTitle,\n      body: labels.confirmBody,\n      confirmLabel: labels.confirmAction,\n      tone: \"neutral\",\n    });\n    if (!ok) return;\n    const keys = resetDeviceSettings();\n    onReset?.(keys);\n    toast.success(labels.done);\n  };\n\n  return (\n    <SettingsSection\n      {...rest}\n      anchor={DEVICE_RESET_ANCHOR}\n      title={labels.title}\n      description={\n        description != null ? (\n          <>\n            {labels.description} {description}\n          </>\n        ) : (\n          labels.description\n        )\n      }\n    >\n      <div>\n        <Button variant=\"secondary\" onClick={() => void reset()}>\n          {labels.action}\n        </Button>\n      </div>\n    </SettingsSection>\n  );\n}\n"],"mappings":";AAuGU,mBASF,KATE;AArGV,SAAS,oBAAwC;AACjD,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,uBAAkD;AAC3D,SAAS,mCAAmC;AAgCrC,MAAM,sBAAsB;AAkC5B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,SAAS,aAAa,eAAe,6BAA6B,UAAU;AAClF,QAAM,UAAU,WAAW;AAE3B,QAAM,QAAQ,YAAY;AACxB,UAAM,KAAK,MAAM,QAAQ;AAAA,MACvB,OAAO,OAAO;AAAA,MACd,MAAM,OAAO;AAAA,MACb,cAAc,OAAO;AAAA,MACrB,MAAM;AAAA,IACR,CAAC;AACD,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,oBAAoB;AACjC,cAAU,IAAI;AACd,UAAM,QAAQ,OAAO,IAAI;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR,OAAO,OAAO;AAAA,MACd,aACE,eAAe,OACb,iCACG;AAAA,eAAO;AAAA,QAAY;AAAA,QAAE;AAAA,SACxB,IAEA,OAAO;AAAA,MAIX,8BAAC,SACC,8BAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,KAAK,MAAM,GACnD,iBAAO,QACV,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/settings/device-reset-setting.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { resetDeviceSettings } from \"../lib/device-settings\";\nimport { Button } from \"../components/button\";\nimport { useConfirm } from \"../components/confirm-dialog\";\nimport { toast } from \"../components/toast\";\nimport { SettingsSection, type SettingsSectionProps } from \"./settings-section\";\nimport { DEFAULT_DEVICE_RESET_LABELS } from \"./device-reset-setting-labels\";\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string {@link DeviceResetSetting} renders — the `deviceReset` namespace of\n *  `<UiKitProvider labels>`, overridable per instance through `labels`\n *  (docs/settings-harmonization.md §11.3). The confirm's Cancel is `confirmDialog.cancel`. */\nexport interface DeviceResetLabels {\n  /** The card's title, and the app's catalogue entry's. */\n  title: string;\n  /** The line under it: what goes back, and that the account is not touched. */\n  description: string;\n  /** The button that asks first. */\n  action: string;\n  /** The question it asks. */\n  confirmTitle: string;\n  /** What goes, what follows the account again, and what stays. */\n  confirmBody: string;\n  /** The button that answers it. */\n  confirmAction: string;\n  /** The toast once it is done. */\n  done: string;\n  /** For the app's catalogue entry (`keywords`); the card never reads it. */\n  keywords: string;\n}\n\n// Defined in ./device-reset-setting-labels, which holds no component code.\nexport { DEFAULT_DEVICE_RESET_LABELS };\n\n/* ── The card ────────────────────────────────────────────────────────────── */\n\n/** The card's DOM id: its catalogue entry's `anchor`, the `?focus=` target. */\nexport const DEVICE_RESET_ANCHOR = \"settings-device-reset\";\n\n// `onReset` is the card's own: the DOM's form-reset handler never fires on a div.\nexport interface DeviceResetSettingProps\n  extends Omit<SettingsSectionProps, \"anchor\" | \"title\" | \"description\" | \"children\" | \"onReset\"> {\n  /** The app's sentence after the kit's description: what of its own goes back, and what\n   *  stays (keksdose: the date format, the feature set and the gestures go; presentation\n   *  mode and the home position stay). */\n  description?: ReactNode;\n  labels?: LabelOverride<DeviceResetLabels>;\n  /** Runs after the reset and before the toast, with the keys reset or removed. */\n  onReset?: (keys: string[]) => void;\n}\n\n/**\n * \"Reset this device's settings\" (docs/settings-harmonization.md §11): the LAST card of\n * the appearance group. It puts this device's appearance — theme, palette, language, text\n * size, contrast and the app's own appearance choices — and its views — table views, the\n * sidebar, folded groups, saved filters — back to what a new device gets, through\n * {@link resetDeviceSettings}. The account, the sign-in, the session and anything waiting\n * to be sent are never touched: they never join the registry.\n *\n * - **A confirm, not an undo** (§11.2 decision 9): `useConfirm` in the neutral tone,\n *   then a toast. An app mounts a `ConfirmProvider` and a `Toaster` already.\n * - **Not a commit**: nothing is written to the account, so a demo or a lapsed plan's\n *   write lock does not disable it (decision 3).\n * - **Live, no reload** (decision 10): each registered store resets through its own\n *   setter; the card stays where it is.\n *\n * The app adds the catalogue entry, `{ id, group: \"appearance\", anchor: DEVICE_RESET_ANCHOR,\n * title, keywords }` (the id in its catalogue's own style, e.g. `device_reset` or\n * `deviceReset`; `title` and `keywords` from these labels), last in its appearance group:\n * inside a `SettingsLayout`, `SettingsSection` throws in development without it.\n */\nexport function DeviceResetSetting({\n  description,\n  labels: labelsProp,\n  onReset,\n  ...rest\n}: DeviceResetSettingProps) {\n  const labels = useKitLabels(\"deviceReset\", DEFAULT_DEVICE_RESET_LABELS, labelsProp);\n  const confirm = useConfirm();\n\n  const reset = async () => {\n    const ok = await confirm({\n      title: labels.confirmTitle,\n      body: labels.confirmBody,\n      confirmLabel: labels.confirmAction,\n      tone: \"neutral\",\n    });\n    if (!ok) return;\n    const keys = resetDeviceSettings();\n    onReset?.(keys);\n    toast.success(labels.done);\n  };\n\n  return (\n    <SettingsSection\n      {...rest}\n      anchor={DEVICE_RESET_ANCHOR}\n      title={labels.title}\n      description={\n        description != null ? (\n          <>\n            {labels.description} {description}\n          </>\n        ) : (\n          labels.description\n        )\n      }\n    >\n      <div>\n        <Button variant=\"secondary\" onClick={() => void reset()}>\n          {labels.action}\n        </Button>\n      </div>\n    </SettingsSection>\n  );\n}\n"],"mappings":";AAuGU,mBASF,KATE;AArGV,SAAS,oBAAwC;AACjD,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,uBAAkD;AAC3D,SAAS,mCAAmC;AAgCrC,MAAM,sBAAsB;AAkC5B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,SAAS,aAAa,eAAe,6BAA6B,UAAU;AAClF,QAAM,UAAU,WAAW;AAE3B,QAAM,QAAQ,YAAY;AACxB,UAAM,KAAK,MAAM,QAAQ;AAAA,MACvB,OAAO,OAAO;AAAA,MACd,MAAM,OAAO;AAAA,MACb,cAAc,OAAO;AAAA,MACrB,MAAM;AAAA,IACR,CAAC;AACD,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,oBAAoB;AACjC,cAAU,IAAI;AACd,UAAM,QAAQ,OAAO,IAAI;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR,OAAO,OAAO;AAAA,MACd,aACE,eAAe,OACb,iCACG;AAAA,eAAO;AAAA,QAAY;AAAA,QAAE;AAAA,SACxB,IAEA,OAAO;AAAA,MAIX,8BAAC,SACC,8BAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,KAAK,MAAM,GACnD,iBAAO,QACV,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.36.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/components/field-parts.tsx

@@ -232,7 +232,7 @@ export function useInlineHint(hint: ReactNode, withHelp = false): ReactNode {
  *
  * - `hint` is the fact, the caption under the field, on its `aria-describedby`;
  * - `help` is the help, a {@link HelpPopover} "?" on the label line (an unlabelled
- *   field's at its end edge, as a hint's), named "About <label>" (`common.aboutField`,
+ *   field's at its end edge, as a hint's), named "About “<label>”" (`common.aboutField`,
  *   from the label's text, else the `aria-label`, else `common.help`). Pass a
  *   `HelpPopover` as `help` to name it yourself ("What do the statuses mean?").
  *
@@ -245,7 +245,7 @@ export interface FieldHelpProps {
   /**
    * Help the field is usable without — why it exists, how to choose, what the options
    * mean — behind the field's one "?" on its label line: a {@link HelpPopover} named
-   * "About <label>" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).
+   * "About “<label>”" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).
    * Pass a `HelpPopover` to name it yourself. `hint` stays the visible fact: with `help`
    * set it is the caption under the field at every size, a `FieldHint` included.
    */
@@ -253,7 +253,7 @@ export interface FieldHelpProps {
 }
 
 /**
- * The "?" for a field's `help` — the field's own name, "About <label>", in the reader's
+ * The "?" for a field's `help` — the field's own name, "About “<label>”", in the reader's
  * language. A component so that a field without `help` asks the labels nothing.
  */
 function FieldHelp({ name, children }: { name: ReactNode; children: ReactNode }) {
@@ -265,7 +265,7 @@ function FieldHelp({ name, children }: { name: ReactNode; children: ReactNode })
 /**
  * A field's `help` as the "?" for its label line, or `undefined` when there is none. A
  * {@link HelpPopover} is used as it is (it carries its own name); anything else is put
- * in one named "About <name>" — `name` is the field's label, else its `aria-label`.
+ * in one named "About “<name>”" — `name` is the field's label, else its `aria-label`.
  */
 export function fieldHelpMark(help: ReactNode, name: ReactNode): ReactNode | undefined {
   if (!hasContent(help)) return undefined;

package/src/components/help-popover.tsx

@@ -45,7 +45,7 @@ const HELP_WIDTH: RemLength = "20rem";
  * **On a field: its `help`** (0.36, round 0.36 decision 1). Every kit field that takes a
  * `hint` takes a `help` beside it, and the `@eifi1/ui-kit/rhf` bindings too: pass the
  * help's words and the field draws this "?" on its label line (an unlabelled one at its
- * end edge, outside the box), named "About <label>" — or pass a HelpPopover to name it
+ * end edge, outside the box), named "About “<label>”" — or pass a HelpPopover to name it
  * yourself. `hint` stays the FACT, printed under the field; while `help` is set a
  * FieldHint there draws no "?" of its own, so the field has one. Passed as `hint`, as in
  * 0.34, it still rides the label line. It also stands on its own, beside a heading or a

package/src/components/numeric-field.ts

@@ -30,7 +30,7 @@ import type { CommitScope } from "./write-lock";
 
 /** The props both fields take and this engine reads. */
 export interface NumericFieldProps extends FieldHelpProps {
-  /** What names the `help` "?" — "About <label>" — with the `aria-label`. */
+  /** What names the `help` "?" — "About “<label>”" — with the `aria-label`. */
   label?: ReactNode;
   hint?: ReactNode;
   error?: ReactNode;

package/src/eslint/role-utilities.ts

@@ -5,7 +5,9 @@
 // The table itself is role-utilities.generated.ts, re-rendered from tokens.css's
 // `@theme inline` block by scripts/gen-role-utilities.mjs with the parser below; the
 // check fails while it is stale. So tokens.css stays the source: a role that gains a
-// utility there is flagged in the kit and in the apps from the next release on.
+// utility there is flagged in the kit and in the apps from the next release on. The
+// README's role-utility table (scripts/gen-styling-inventory.mjs) reads the block with
+// the same parser since 0.37, so the README, the check and the plugin cannot disagree.
 //
 // This module imports NOTHING, and its TypeScript is erasable only (no enum, no
 // namespace, no parameter property): the check imports it from source under Node's type
@@ -43,20 +45,74 @@ export type RoleUtilityTable = {
   readonly [P in RoleProperty]: Readonly<Record<string, readonly string[]>>;
 };
 
+/** One `--<namespace>-<name>: <value>;` of the `@theme inline` block. */
+export interface ThemeInlineDeclaration {
+  /** The theme variable without its dashes: `text-color-muted`, `ring-width-focus`. */
+  variable: string;
+  /** The property whose namespace it is in; `null` for a namespace ROLE_NAMESPACES lacks. */
+  property: RoleProperty | null;
+  /** The name after the namespace, `muted`; `null` with `property`. */
+  name: string | null;
+  /** The utility it makes: `text-muted`, `ring-focus` (a width is `ring-*` like a colour). */
+  utility: string | null;
+  /** The token the value reads, `--text-muted`; `null` unless the value is a bare `var()`. */
+  token: string | null;
+  /** The value as written, trimmed. */
+  value: string;
+}
+
+/** The `@theme inline` block: where it stands, and every declaration in it in block order. */
+export interface ThemeInlineBlock {
+  /** Its first and one-past-last offset in `stripCssComments(css)`, not in `css`. */
+  start: number;
+  end: number;
+  declarations: ThemeInlineDeclaration[];
+}
+
+/** `css` without its comments: a declaration commented out is not one. */
+export function stripCssComments(css: string): string {
+  return css.replace(/\/\*[\s\S]*?\*\//g, "");
+}
+
+const PROPERTIES = Object.keys(ROLE_NAMESPACES) as RoleProperty[];
+
+/**
+ * tokens.css's `@theme inline` block, read once for every reader: the table below, and
+ * the README's (scripts/gen-styling-inventory.mjs), which fails on a `property: null`
+ * where the table leaves it out. `null` when there is no such block — the role utilities
+ * are gone, or this parser is. Theme blocks hold only declarations, so the first `}`
+ * closes it; no namespace is another's prefix, so the first that fits is the one.
+ */
+export function parseThemeInline(css: string): ThemeInlineBlock | null {
+  const block = /@theme\s+inline\s*\{([^}]*)\}/.exec(stripCssComments(css));
+  if (!block) return null;
+  const declarations = [...block[1].matchAll(/--([a-z0-9-]+)\s*:\s*([^;]+);/g)].map(([, variable, raw]) => {
+    const value = raw.trim();
+    const property = PROPERTIES.find((p) => variable.startsWith(`${ROLE_NAMESPACES[p]}-`)) ?? null;
+    const name = property && variable.slice(ROLE_NAMESPACES[property].length + 1);
+    return {
+      variable,
+      property,
+      name,
+      utility: property && `${property.replace(/-width$/, "")}-${name}`,
+      token: /^var\((--[a-z0-9-]+)\)$/.exec(value)?.[1] ?? null,
+      value,
+    };
+  });
+  return { start: block.index, end: block.index + block[0].length, declarations };
+}
+
 /**
  * The table `tokens.css` declares: every `--<namespace>-<name>: var(--<token>)` in its
- * `@theme inline` block, in block order. `null` when there is no such block — the role
- * utilities are gone, or this parser is.
+ * `@theme inline` block, in block order, each property present (in ROLE_NAMESPACES' order)
+ * even when it has none. `null` when there is no such block.
  */
 export function roleUtilitiesFromCss(css: string): RoleUtilityTable | null {
-  const theme = /@theme inline\s*\{([^}]*)\}/.exec(css.replace(/\/\*[\s\S]*?\*\//g, ""))?.[1];
-  if (theme === undefined) return null;
-  const table = {} as Record<RoleProperty, Record<string, string[]>>;
-  for (const prop of Object.keys(ROLE_NAMESPACES) as RoleProperty[]) {
-    const names: Record<string, string[]> = {};
-    const declared = new RegExp(`--${ROLE_NAMESPACES[prop]}-([a-z0-9-]+)\\s*:\\s*var\\((--[a-z0-9-]+)\\)`, "g");
-    for (const [, name, token] of theme.matchAll(declared)) (names[token] ??= []).push(name);
-    table[prop] = names;
+  const block = parseThemeInline(css);
+  if (!block) return null;
+  const table = Object.fromEntries(PROPERTIES.map((p) => [p, {}])) as Record<RoleProperty, Record<string, string[]>>;
+  for (const { property, name, token } of block.declarations) {
+    if (property && name && token) (table[property][token] ??= []).push(name);
   }
   return table;
 }

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",