@eifi1/ui-kit 0.33.1 → 0.35.0

package/src/feedback/feedback-row-detail.tsx

@@ -5,9 +5,10 @@ import { AuthedImage } from "../components/authed-image";
 import { CopyButton } from "../components/copy-button";
 import { TextLink } from "../components/text-link";
 import { toast } from "../components/toast";
-import { Button } from "../components/ui";
+import { Button } from "../components/button";
 import type { AuthedFetcher } from "../hooks/use-authed-src";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
+import { filenameFromDisposition, saveBlob } from "../lib/download";
 import { formatDate } from "../lib/format";
 import { DEFAULT_MAX_ATTACHMENT_BYTES } from "./feedback-attachment";
 import { DEFAULT_FEEDBACK_DIALOG_LABELS } from "./feedback-dialog";
@@ -38,6 +39,7 @@ import type { FeedbackContext, FeedbackRecord } from "./feedback-record";
 import { useFeedbackStatusUndo } from "./feedback-status-undo";
 import type { FeedbackStatusChange } from "./feedback-status-undo";
 import type { CommitScope } from "../components/write-lock";
+import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "./feedback-row-detail-labels";
 
 /**
  * One report, opened — the panel a feedback table unfolds under its row (§4.4 of
@@ -144,36 +146,17 @@ export interface FeedbackDetailLabels {
   reworkUploadFailed: string;
   /** Section 6's heading. de-CH: "Status" */
   status: string;
+  /** A `FeedbackNoteEditor`'s box, named when no `placeholder` line names it and the
+   *  caller gives no `label` — without it the box was read out as just "edit text"
+   *  (round 0.34, the showcase's axe check). de-CH: "Notiz" */
+  note: string;
 }
 
-export const DEFAULT_FEEDBACK_DETAIL_LABELS: FeedbackDetailLabels = {
-  subject: "Subject",
-  body: "Description",
-  edit: "Edit",
-  editDescription: "Edit description",
-  save: "Save",
-  cancel: "Cancel",
-  url: "URL",
-  copyUrl: "Copy URL",
-  attachment: "Attachment",
-  download: (name) => `Download ${name}`,
-  downloadFailed: "The attachment could not be downloaded.",
-  outcome: "Outcome",
-  resolvedAt: (date) => `Resolved: ${date}`,
-  outcomeAdd: "Add outcome",
-  outcomeUpdate: "Update",
-  outcomePlaceholder: "What was done, decided, or why this won't be addressed.",
-  rework: "Rework",
-  openPage: "Open page",
-  reworkTitle: "Send for rework",
-  reworkSend: "Send rework",
-  reworkPlaceholder: "What still needs refinement? Any new constraints or change of direction.",
-  reworkUploadFailed: "The file could not be uploaded. The rework was not sent.",
-  status: "Status",
-};
+// Defined in ./feedback-row-detail-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_FEEDBACK_DETAIL_LABELS };
 
 /** `feedbackDetail` resolved: English, then `<UiKitProvider labels>`, then `labels`. */
-export function useFeedbackDetailLabels(labels?: Partial<FeedbackDetailLabels>): FeedbackDetailLabels {
+export function useFeedbackDetailLabels(labels?: LabelOverride<FeedbackDetailLabels>): FeedbackDetailLabels {
   return useKitLabels("feedbackDetail", DEFAULT_FEEDBACK_DETAIL_LABELS, labels);
 }
 
@@ -269,7 +252,12 @@ const plainFetch: AuthedFetcher = (url, { signal }) => fetch(url, { signal, cred
  * A PDF or a text log (keksdose `FeedbackFileDownload`, dev #578): the bytes sit behind
  * an authenticated route that serves them as `attachment`, never inline (§3.5), so a
  * plain link would be a 401 the moment it was opened. Fetched through the app's
- * fetcher and handed to a synthetic anchor; a failure says so in a toast.
+ * fetcher and saved with {@link saveBlob}; a failure says so in a toast.
+ *
+ * Saved under the name the server gives it when the fetcher answers with a `Response`
+ * (server-kit's `content_disposition` puts the uploader's own name in `filename*`), and
+ * under the URL's last segment — the name on the button — when it answers with a bare
+ * `Blob`, which has no headers to ask.
  */
 function AttachmentDownload({
   url,
@@ -287,14 +275,13 @@ function AttachmentDownload({
     event.stopPropagation();
     setBusy(true);
     try {
-      const blob = await toBlob(await fetcher(url, { signal: new AbortController().signal }));
-      const href = URL.createObjectURL(blob);
-      const anchor = document.createElement("a");
-      anchor.href = href;
-      anchor.download = name;
-      anchor.click();
-      // After the click has handed the URL to the download, not before.
-      setTimeout(() => URL.revokeObjectURL(href), 0);
+      const answer = await fetcher(url, { signal: new AbortController().signal });
+      const blob = await toBlob(answer);
+      const saveAs =
+        typeof Response !== "undefined" && answer instanceof Response
+          ? filenameFromDisposition(answer.headers.get("Content-Disposition"), name)
+          : name;
+      saveBlob(blob, saveAs);
     } catch {
       toast.error(labels.downloadFailed);
     } finally {
@@ -312,7 +299,7 @@ function AttachmentDownload({
       className="max-w-full"
     >
       <FileText className="size-3.5 shrink-0" aria-hidden />
-      <span className="min-w-0 max-w-[14rem] truncate">{name}</span>
+      <span className="min-w-0 max-w-[14rem] truncate-until-large">{name}</span>
       <Download className="size-3.5 shrink-0" aria-hidden />
     </Button>
   );
@@ -412,7 +399,7 @@ export interface FeedbackReworkSectionProps {
   attachment?: Partial<FeedbackNoteAttachment>;
   /** The send COMMITS — see `FeedbackNoteEditor`'s `commit`. */
   commit?: CommitScope;
-  labels?: Partial<FeedbackDetailLabels>;
+  labels?: LabelOverride<FeedbackDetailLabels>;
 }
 
 /**
@@ -577,7 +564,7 @@ export interface FeedbackRowDetailProps {
    * beside the detail.
    */
   showSubject?: boolean;
-  labels?: Partial<FeedbackDetailLabels>;
+  labels?: LabelOverride<FeedbackDetailLabels>;
   className?: string;
 }
 
@@ -672,7 +659,7 @@ export function FeedbackRowDetail({
         <FeedbackDetailSection title={labels.subject}>
           <p className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm" data-feedback-subject="">
             <FeedbackCategoryBadge category={row.category} />
-            <span className="min-w-0 font-medium text-[var(--text-primary)] [overflow-wrap:anywhere]">
+            <span className="min-w-0 font-medium text-primary [overflow-wrap:anywhere]">
               {row.title}
             </span>
           </p>
@@ -743,7 +730,7 @@ export function FeedbackRowDetail({
                   // AuthedImage default) rather than a grey tile per failure.
                   errorFallback={null}
                   wrapperClassName="inline-block max-w-full"
-                  className="max-h-64 max-w-full rounded border border-[var(--border)]"
+                  className="max-h-64 max-w-full rounded border border-subtle"
                 />
               ) : (
                 <AttachmentDownload key={url} url={url} fetcher={fetchFile} labels={labels} />
@@ -758,7 +745,7 @@ export function FeedbackRowDetail({
         // When the row entered DONE / WONT_DO (keksdose feedback #96).
         action={
           row.resolved_at ? (
-            <span className="text-xs text-[var(--text-muted)]">{labels.resolvedAt(dateText(row.resolved_at))}</span>
+            <span className="text-xs text-muted">{labels.resolvedAt(dateText(row.resolved_at))}</span>
           ) : undefined
         }
       >

package/src/feedback/feedback-status-undo.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { toast } from "../components/toast";
-import type { FeedbackStatus } from "./feedback-inbox";
+import type { FeedbackStatus } from "./feedback-vocabulary";
 import {
   useFeedbackStatusLabels,
   useFeedbackToastLabels,
@@ -8,6 +8,7 @@ import {
   type FeedbackToastLabels,
 } from "./feedback-labels";
 import type { FeedbackRecord } from "./feedback-record";
+import type { LabelOverride } from "../i18n/kit-labels";
 
 /**
  * A status change that can be taken back — §4.5 of the feedback contract, lifted from
@@ -50,7 +51,7 @@ export type FeedbackStatusChange = (row: FeedbackStatusRow, status: FeedbackStat
 
 export interface FeedbackStatusUndoOptions {
   /** Over the `feedbackToast` namespace (the toast's words). */
-  labels?: Partial<FeedbackToastLabels>;
+  labels?: LabelOverride<FeedbackToastLabels>;
   /** Over the `feedbackStatus` namespace (the status names inside them). */
   statusLabels?: Partial<FeedbackStatusLabels>;
 }

package/src/feedback/feedback-submit-dialog.tsx

@@ -0,0 +1,109 @@
+import { toast } from "../components/toast";
+import { captureAppScreenshot } from "./feedback-capture";
+import { FeedbackContextBox, feedbackContext, type FeedbackSubmitter } from "./feedback-context";
+import { FeedbackDialog, type FeedbackMultipleSubmission } from "./feedback-dialog";
+import { useFeedbackCategoryLabels, useFeedbackToastLabels } from "./feedback-labels";
+import {
+  DEFAULT_MAX_ATTACHMENTS,
+  FEEDBACK_ATTACHMENT_ACCEPT,
+  FEEDBACK_PICKABLE_CATEGORIES,
+  type FeedbackContext,
+  type FeedbackEnvironment,
+} from "./feedback-record";
+import type { FeedbackCategory } from "./feedback-vocabulary";
+
+/**
+ * The open half of `useFeedbackSubmit`: the dialog it draws, with the context box and
+ * everything that only exists while somebody is filing a report.
+ *
+ * A module of its own so it can load LATE (0.34, MOD-1 of the refactor audit 2026-10).
+ * Every app mounts the hook in its top bar; this — the attachment field, the modal, the
+ * context box, the capture — was ~11 kB gzip of each app's entry chunk, for a dialog most
+ * sessions never open. feedback-submit.tsx reaches it only through a literal relative
+ * `import()`, so the library build keeps it a module of its own (`bundle: false`) and an
+ * app's bundler makes it a chunk of its own.
+ *
+ * Internal, and not in the barrel: nothing but that `import()` should reach it. The hook
+ * keeps the state — open, category, the URL and whether it goes along, the send in
+ * flight — and this draws it.
+ */
+
+/** What `useFeedbackSubmit` hands its lazily loaded dialog. */
+export interface FeedbackSubmitDialogProps {
+  onClose: () => void;
+  category: FeedbackCategory;
+  onCategoryChange: (category: FeedbackCategory) => void;
+  submitting: boolean;
+  /** The form, and the `context` built from the same values the box showed. */
+  onSubmit: (data: FeedbackMultipleSubmission, context: FeedbackContext) => void | Promise<void>;
+  user?: FeedbackSubmitter | null;
+  /** `location.href` when the dialog opened. */
+  url: string;
+  attachUrl: boolean;
+  onAttachUrlChange: (attachUrl: boolean) => void;
+  environment?: FeedbackEnvironment | (string & {});
+  version?: string;
+  /** `UseFeedbackSubmitOptions.capture`, as the app passed it. */
+  capture?: false | (() => Promise<File | null>);
+}
+
+/** `FeedbackDialog` as `useFeedbackSubmit` settles it — see the hook for what it settles. */
+export function FeedbackSubmitDialog({
+  onClose,
+  category,
+  onCategoryChange,
+  submitting,
+  onSubmit,
+  user,
+  url,
+  attachUrl,
+  onAttachUrlChange,
+  environment,
+  version,
+  capture,
+}: FeedbackSubmitDialogProps) {
+  const toastText = useFeedbackToastLabels();
+  const categoryLabels = useFeedbackCategoryLabels();
+
+  const onCaptureScreenshot =
+    capture === false
+      ? undefined
+      : async () => {
+          try {
+            return await (capture ?? (() => captureAppScreenshot()))();
+          } catch {
+            toast.error(toastText.captureFailed);
+            return null;
+          }
+        };
+
+  return (
+    <FeedbackDialog
+      open
+      onClose={onClose}
+      categories={FEEDBACK_PICKABLE_CATEGORIES.map((value) => ({ value, label: categoryLabels[value] }))}
+      category={category}
+      onCategoryChange={(value) => onCategoryChange(value as FeedbackCategory)}
+      submitting={submitting}
+      attachments="multiple"
+      maxAttachments={DEFAULT_MAX_ATTACHMENTS}
+      requireBody={false}
+      attachmentAccept={FEEDBACK_ATTACHMENT_ACCEPT}
+      onAttachmentError={(kind, info) =>
+        toast.error(
+          kind === "type"
+            ? toastText.attachmentUnsupported
+            : kind === "size"
+              ? toastText.attachmentTooLarge
+              : // More files at once than there was room for: the surplus was dropped, the
+                // rest kept. The count is how many fit, as keksdose says it.
+                toastText.attachmentTooMany(info.max ?? DEFAULT_MAX_ATTACHMENTS),
+        )
+      }
+      onCaptureScreenshot={onCaptureScreenshot}
+      // The context is read off the very values the box below shows (§3.2).
+      onSubmit={(data) => onSubmit(data, feedbackContext({ user, attachUrl, url, environment, version }))}
+      contextSlot={<FeedbackContextBox user={user} url={url} attachUrl={attachUrl} onAttachUrlChange={onAttachUrlChange} />}
+    />
+  );
+}

package/src/feedback/feedback-submit.tsx

@@ -1,18 +1,23 @@
-import { useRef, useState } from "react";
+import { lazy, Suspense, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { toast } from "../components/toast";
-import { DEFAULT_MAX_ATTACHMENTS } from "./feedback-attachment";
-import { captureAppScreenshot } from "./feedback-capture";
-import { FeedbackContextBox, feedbackContext, type FeedbackSubmitter } from "./feedback-context";
-import { FeedbackDialog, type FeedbackMultipleSubmission } from "./feedback-dialog";
-import type { FeedbackCategory } from "./feedback-inbox";
-import { useFeedbackCategoryLabels, useFeedbackToastLabels } from "./feedback-labels";
-import {
-  FEEDBACK_ATTACHMENT_ACCEPT,
-  FEEDBACK_PICKABLE_CATEGORIES,
-  type FeedbackContext,
-  type FeedbackEnvironment,
-} from "./feedback-record";
+// Types only, gone from the built module: the dialog's modules load with the dialog.
+import type { FeedbackSubmitter } from "./feedback-context";
+import type { FeedbackMultipleSubmission } from "./feedback-dialog";
+import { useFeedbackToastLabels } from "./feedback-labels";
+import { FEEDBACK_PICKABLE_CATEGORIES, type FeedbackContext, type FeedbackEnvironment } from "./feedback-record";
+import type { FeedbackCategory } from "./feedback-vocabulary";
+
+/**
+ * The dialog, loaded when it is first opened rather than with the top bar that mounts the
+ * hook (0.34, MOD-1 of the refactor audit 2026-10; see feedback-submit-dialog.tsx). A
+ * LITERAL relative `import()`, as the catalogue loaders are (i18n/languages.ts): the
+ * library build keeps the module its own (`bundle: false`), and a path an app's bundler
+ * can read is a chunk it can split off.
+ */
+const LazySubmitDialog = lazy(() =>
+  import("./feedback-submit-dialog").then((module) => ({ default: module.FeedbackSubmitDialog })),
+);
 
 /**
  * `FeedbackCreate` — the body of `POST /feedback` (keksdose `schemas/feedback.py:25`, §3.4
@@ -81,7 +86,11 @@ export interface FeedbackSubmit {
   open: (category?: FeedbackCategory) => void;
   /** Close it, as Cancel does. */
   close: () => void;
-  /** The dialog — render it once, anywhere (it portals). `null` while closed. */
+  /**
+   * The dialog — render it once, anywhere (it portals). `null` while closed. Since 0.34
+   * its module loads when it is first opened (MOD-1), so it appears a moment after
+   * `open`: a test finds it with `await screen.findBy…`, not `getBy…`.
+   */
   dialog: ReactNode;
 }
 
@@ -127,7 +136,6 @@ export interface FeedbackSubmit {
 export function useFeedbackSubmit<R = unknown>(options: UseFeedbackSubmitOptions<R>): FeedbackSubmit {
   const { upload, create, user, environment, version, onSubmitted, errorMessage, capture } = options;
   const toastText = useFeedbackToastLabels();
-  const categoryLabels = useFeedbackCategoryLabels();
   const [isOpen, setIsOpen] = useState(false);
   const [category, setCategory] = useState<FeedbackCategory>("OTHER");
   const [url, setUrl] = useState("");
@@ -148,7 +156,8 @@ export function useFeedbackSubmit<R = unknown>(options: UseFeedbackSubmitOptions
   };
   const close = () => setIsOpen(false);
 
-  const submit = async (data: FeedbackMultipleSubmission) => {
+  // `context` comes from the dialog, built off the values its context box shows.
+  const submit = async (data: FeedbackMultipleSubmission, context: FeedbackContext) => {
     if (inFlight.current) return;
     inFlight.current = true;
     setSubmitting(true);
@@ -163,7 +172,7 @@ export function useFeedbackSubmit<R = unknown>(options: UseFeedbackSubmitOptions
         title: data.title.trim(),
         body: data.body.trim() ? data.body : "",
         category: data.category as FeedbackCategory,
-        context: feedbackContext({ user, attachUrl, url, environment, version }),
+        context,
         screenshot_url,
         attachment_urls,
       });
@@ -179,45 +188,26 @@ export function useFeedbackSubmit<R = unknown>(options: UseFeedbackSubmitOptions
     onSubmitted?.(result);
   };
 
-  const onCaptureScreenshot =
-    capture === false
-      ? undefined
-      : async () => {
-          try {
-            return await (capture ?? (() => captureAppScreenshot()))();
-          } catch {
-            toast.error(toastText.captureFailed);
-            return null;
-          }
-        };
-
+  // Nothing is drawn while the dialog's module is on its way — a few milliseconds, once per
+  // page load; a spinner would only flash. A load that fails (a deploy replaced the chunk)
+  // throws a chunk-load error to the app's error boundary, as a lazy route's does.
   const dialog = isOpen ? (
-    <FeedbackDialog
-      open
-      onClose={close}
-      categories={FEEDBACK_PICKABLE_CATEGORIES.map((value) => ({ value, label: categoryLabels[value] }))}
-      category={category}
-      onCategoryChange={(value) => setCategory(value as FeedbackCategory)}
-      submitting={submitting}
-      attachments="multiple"
-      maxAttachments={DEFAULT_MAX_ATTACHMENTS}
-      requireBody={false}
-      attachmentAccept={FEEDBACK_ATTACHMENT_ACCEPT}
-      onAttachmentError={(kind, info) =>
-        toast.error(
-          kind === "type"
-            ? toastText.attachmentUnsupported
-            : kind === "size"
-              ? toastText.attachmentTooLarge
-              : // More files at once than there was room for: the surplus was dropped, the
-                // rest kept. The count is how many fit, as keksdose says it.
-                toastText.attachmentTooMany(info.max ?? DEFAULT_MAX_ATTACHMENTS),
-        )
-      }
-      onCaptureScreenshot={onCaptureScreenshot}
-      onSubmit={submit}
-      contextSlot={<FeedbackContextBox user={user} url={url} attachUrl={attachUrl} onAttachUrlChange={setAttachUrl} />}
-    />
+    <Suspense fallback={null}>
+      <LazySubmitDialog
+        onClose={close}
+        category={category}
+        onCategoryChange={setCategory}
+        submitting={submitting}
+        onSubmit={submit}
+        user={user}
+        url={url}
+        attachUrl={attachUrl}
+        onAttachUrlChange={setAttachUrl}
+        environment={environment}
+        version={version}
+        capture={capture}
+      />
+    </Suspense>
   ) : null;
 
   return { open, close, dialog };

package/src/feedback/feedback-swipe.tsx

@@ -1,7 +1,7 @@
 import { Ban, Check, ChevronsRight } from "lucide-react";
 import type { SwipeAction } from "../components/swipeable-row";
 import type { MobileSwipeActions } from "../components/data-table";
-import { nextFeedbackStatus, type FeedbackStatus } from "./feedback-inbox";
+import { nextFeedbackStatus, type FeedbackStatus } from "./feedback-vocabulary";
 import type { FeedbackStatusLabels } from "./feedback-labels";
 import type { FeedbackStatusChange, FeedbackStatusRow } from "./feedback-status-undo";
 

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

@@ -0,0 +1,27 @@
+// The English words of ./feedback-table, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./feedback-table re-exports them.
+
+import type { FeedbackPageLabels } from "./feedback-table";
+
+export const DEFAULT_FEEDBACK_PAGE_LABELS: FeedbackPageLabels = {
+  title: "Feedback",
+  myTitle: "My feedback",
+  columnId: "#",
+  columnDate: "Date",
+  columnCategory: "Category",
+  columnSubject: "Subject",
+  columnUser: "User",
+  columnEmail: "Email",
+  columnUrl: "URL",
+  columnStatus: "Status",
+  columnResolved: "Resolved",
+  openPage: "Open page",
+  empty: "None",
+  deletedUser: "<deleted user>",
+  userFallback: (id) => `user #${id}`,
+  environment: (environment) => String(environment ?? "").toUpperCase(),
+  reworkChip: (count) => (count === 1 ? "Rework" : `Rework ×${count}`),
+  awaitingFilter: "Only what is waiting for you",
+  phoneActions: "Feedback actions",
+};

package/src/feedback/feedback-table.tsx

@@ -4,7 +4,7 @@ import { ExternalLink } from "lucide-react";
 import { cn } from "../lib/cn";
 import { toLocalIso } from "../lib/dates";
 import { EMPTY_FORMATTED_VALUE, formatDate, toDate } from "../lib/format";
-import { useKitDateFormatter, useKitLabels, useKitLink, useKitLocale } from "../i18n/kit-labels";
+import { useKitDateFormatter, useKitLabels, useKitLink, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import type { KitLinkProps } from "../i18n/kit-labels";
 import { Chip } from "../components/chip";
 import { FloatingAction, FloatingActionGroup } from "../components/floating-panel";
@@ -32,6 +32,7 @@ import { FEEDBACK_AWAITING_STATUSES, reworkCount, type FeedbackContext, type Fee
 import type { FeedbackStatusChange } from "./feedback-status-undo";
 import { feedbackPageHref, feedbackPagePath } from "./feedback-row-detail";
 import type { CommitScope } from "../components/write-lock";
+import { DEFAULT_FEEDBACK_PAGE_LABELS } from "./feedback-table-labels";
 
 /**
  * The two feedback pages' TABLE — `/feedback` (the admin inbox) and `/my-feedback` (the
@@ -46,7 +47,7 @@ import type { CommitScope } from "../components/write-lock";
  * items — had a latent bug of its own: its subject cell carries the environment and
  * rework chips "so a second attempt is marked on every surface at once" (:760), but the
  * phone card is a `mobileCard`, and `DataTable` never renders the `mobilePrimary` cell
- * when `mobileCard` is set (data-table.tsx, `cardInner`). Its phone cards showed neither
+ * when `mobileCard` is set (data-table-mobile.tsx, `cardInner`). Its phone cards showed neither
  * chip. {@link FeedbackMobileCard} draws both itself, from the same
  * {@link FeedbackSubject} the column uses, so the two surfaces cannot part again.
  *
@@ -119,31 +120,12 @@ export interface FeedbackPageLabels {
   phoneActions: string;
 }
 
-export const DEFAULT_FEEDBACK_PAGE_LABELS: FeedbackPageLabels = {
-  title: "Feedback",
-  myTitle: "My feedback",
-  columnId: "#",
-  columnDate: "Date",
-  columnCategory: "Category",
-  columnSubject: "Subject",
-  columnUser: "User",
-  columnEmail: "Email",
-  columnUrl: "URL",
-  columnStatus: "Status",
-  columnResolved: "Resolved",
-  openPage: "Open page",
-  empty: "None",
-  deletedUser: "<deleted user>",
-  userFallback: (id) => `user #${id}`,
-  environment: (environment) => String(environment ?? "").toUpperCase(),
-  reworkChip: (count) => (count === 1 ? "Rework" : `Rework ×${count}`),
-  awaitingFilter: "Only what is waiting for you",
-  phoneActions: "Feedback actions",
-};
+// Defined in ./feedback-table-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_FEEDBACK_PAGE_LABELS };
 
 /** `feedbackPage` resolved: English, then `<UiKitProvider labels>`, then `labels`. The
  *  page's title comes from here too: `mine ? labels.myTitle : labels.title`. */
-export function useFeedbackPageLabels(labels?: Partial<FeedbackPageLabels>): FeedbackPageLabels {
+export function useFeedbackPageLabels(labels?: LabelOverride<FeedbackPageLabels>): FeedbackPageLabels {
   return useKitLabels("feedbackPage", DEFAULT_FEEDBACK_PAGE_LABELS, labels);
 }
 
@@ -258,9 +240,9 @@ export function useFeedbackRenderDate(renderDate?: FeedbackRenderDate, locale?:
 
 /** A date in a cell: `<time>`, nowrap, tabular figures; "—" when there is none. */
 function FeedbackDate({ value, renderDate }: { value: string | null | undefined; renderDate: FeedbackRenderDate }) {
-  if (!value) return <span className="text-[var(--text-placeholder)]">{EMPTY_FORMATTED_VALUE}</span>;
+  if (!value) return <span className="text-placeholder">{EMPTY_FORMATTED_VALUE}</span>;
   return (
-    <time dateTime={value} className="whitespace-nowrap tabular-nums text-[var(--text-muted)]">
+    <time dateTime={value} className="whitespace-nowrap tabular-nums text-muted">
       {renderDate(value)}
     </time>
   );
@@ -283,7 +265,7 @@ export interface FeedbackSubjectProps {
    */
   wrap?: boolean;
   /** Over the `feedbackPage` namespace. */
-  labels?: Partial<FeedbackPageLabels>;
+  labels?: LabelOverride<FeedbackPageLabels>;
   className?: string;
 }
 
@@ -324,8 +306,10 @@ export function FeedbackSubject({ row, wrap = false, labels: labelsProp, classNa
     );
   }
   return (
-    <span className={cn("inline-flex min-w-0 max-w-full items-center gap-1.5", className)}>
-      <span className="min-w-0 truncate font-medium">{row.title}</span>
+    <span className={cn("inline-flex min-w-0 max-w-full items-center gap-1.5 large:items-start", className)}>
+      {/* One line at Normal; from Large up the title wraps rather than losing its end (text
+          size §10.17 — the release sweep's first CI run found it cut on the showcase). */}
+      <span className="min-w-0 truncate-until-large font-medium">{row.title}</span>
       {chips}
     </span>
   );
@@ -350,9 +334,9 @@ function FeedbackPageLinkCell({ context, openPage }: { context: FeedbackContext
   const kitLink = useKitLink();
   const href = feedbackPageHref(context);
   const path = feedbackPagePath(context);
-  if (!href || !path) return <span className="text-[var(--text-placeholder)]">{EMPTY_FORMATTED_VALUE}</span>;
+  if (!href || !path) return <span className="text-placeholder">{EMPTY_FORMATTED_VALUE}</span>;
   const className =
-    "inline-flex min-w-0 max-w-full items-center gap-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:underline";
+    "inline-flex min-w-0 max-w-full items-center gap-1 text-secondary hover:text-primary hover:underline";
   const children = (
     <>
       {/* The space outside the hidden span: a flex container drops it from the layout,
@@ -456,7 +440,7 @@ export function feedbackColumns<T extends FeedbackTableRow>({
     {
       key: "id",
       header: labels.columnId,
-      cell: (row) => <span className="font-mono text-xs text-[var(--text-muted)]">{row.id}</span>,
+      cell: (row) => <span className="font-mono text-xs text-muted">{row.id}</span>,
       sortBy: (row) => row.id,
       filter: { type: "number", getValue: (row) => row.id },
       mobileHidden: true,
@@ -495,7 +479,7 @@ export function feedbackColumns<T extends FeedbackTableRow>({
     {
       key: "user",
       header: labels.columnUser,
-      cell: (row) => <span className="text-[var(--text-secondary)]">{feedbackSubmitter(row, labels)}</span>,
+      cell: (row) => <span className="text-secondary">{feedbackSubmitter(row, labels)}</span>,
       sortBy: (row) => feedbackSubmitter(row, labels),
       // Name AND email, so either finds the person; the erased ones by the placeholder
       // (their context holds no name any more).
@@ -514,9 +498,9 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       cell: (row) => {
         const email = feedbackSubmitterEmail(row);
         return email ? (
-          <span className="text-[var(--text-secondary)]">{email}</span>
+          <span className="text-secondary">{email}</span>
         ) : (
-          <span className="text-[var(--text-placeholder)]">{EMPTY_FORMATTED_VALUE}</span>
+          <span className="text-placeholder">{EMPTY_FORMATTED_VALUE}</span>
         );
       },
       sortBy: feedbackSubmitterEmail,
@@ -581,7 +565,7 @@ export interface UseFeedbackColumnsOptions
   renderDate?: FeedbackRenderDate;
   /** Over the `feedbackPage` namespace. Keep it stable (module scope or memoised): it is
    *  a dependency of the memo. */
-  labels?: Partial<FeedbackPageLabels>;
+  labels?: LabelOverride<FeedbackPageLabels>;
 }
 
 /**
@@ -634,7 +618,7 @@ export interface FeedbackMobileCardProps {
    *  headers'. Default: the kit's ({@link useFeedbackRenderDate}). */
   renderDate?: FeedbackRenderDate;
   /** Over the `feedbackPage` namespace. */
-  labels?: Partial<FeedbackPageLabels>;
+  labels?: LabelOverride<FeedbackPageLabels>;
 }
 
 /**
@@ -658,7 +642,7 @@ export function FeedbackMobileCard({ row, showSubmitter = false, renderDate: ren
             glyph on both layouts. */}
         <FeedbackStatusBadge status={row.status} className="shrink-0" />
       </div>
-      <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-[var(--text-muted)]">
+      <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted">
         <FeedbackCategoryBadge category={row.category} compact />
         <FeedbackDate value={row.created_at} renderDate={renderDate} />
         {showSubmitter && (
@@ -687,7 +671,7 @@ export interface FeedbackAwaitingToggleProps {
    *  filter, the same question asked where there is room for it. */
   className?: string;
   /** Over the `feedbackPage` namespace. */
-  labels?: Partial<FeedbackPageLabels>;
+  labels?: LabelOverride<FeedbackPageLabels>;
 }
 
 /**
@@ -739,7 +723,7 @@ export function FeedbackAwaitingToggle({
 
 export interface FeedbackEmptyStateProps {
   /** Over the `feedbackPage` namespace. */
-  labels?: Partial<FeedbackPageLabels>;
+  labels?: LabelOverride<FeedbackPageLabels>;
 }
 
 /**