@eifi1/ui-kit 0.33.1 → 0.34.0

package/src/hooks/use-file-picker.tsx

@@ -0,0 +1,363 @@
+import { useRef } from "react";
+import type { ReactElement } from "react";
+import { useAnnounce } from "./use-announce";
+import { useKitFileLabels, useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { DEFAULT_FILE_PICKER_LABELS } from "./use-file-picker-labels";
+
+/**
+ * The file pickers' headless half: the hidden input, the screening of a pick and the
+ * announcement of a refusal, which {@link FileButton}, `FileDropzone` and {@link useFileDrop}
+ * are built on.
+ *
+ * In hooks/ since 0.34 (MOD-8, refactor audit 2026-10). It lived in
+ * components/file-button.tsx, and `useFileDrop` — a hook — imported it from there, so
+ * hooks/ reached up into components/. components/file-button re-exports all of it, so an
+ * import from there keeps working.
+ */
+
+/* ── Labels ──────────────────────────────────────────────────────────────── */
+
+/** Every string the file pickers ({@link FileButton}, `FileDropzone`) render or speak.
+ *  Messages are functions of the file name so a translation can put it anywhere. */
+export interface FilePickerLabels {
+  /** The file's type is not in `accept`, when no `accept` is known to name (see
+   *  `rejectedTypeOnly`). */
+  rejectedType: (name: string) => string;
+  /** The file's type is not in `accept`, naming what IS accepted: `accept`'s tokens,
+   *  lower-cased and joined with ", " (`".csv"` => "Only .csv files"). Used whenever
+   *  `accept` is set — kastlan kept a custom `isValid` + `invalidMessage` per form only
+   *  to say this, and `accept` already knows it. */
+  rejectedTypeOnly: (accept: string, name: string) => string;
+  /** The file is larger than `maxSize`; `maxSize` arrives formatted ("5 MB"). */
+  rejectedSize: (name: string, maxSize: string) => string;
+  /** The file was one too many for `maxFiles`. */
+  rejectedCount: (name: string, maxFiles: number) => string;
+  /** `isValid` said no and the caller gave no `invalidMessage`. */
+  rejectedInvalid: (name: string) => string;
+  /** Spoken instead of the per-file message when more than one file was refused. */
+  rejectedMany: (count: number) => string;
+  /** Spoken (and shown, on a dropzone) when `onPick` refused the WHOLE pick.
+   *  Receives the number of files in it. */
+  rejectedPick: (count: number) => string;
+  /** Spoken after a pick the component itself echoes (the dropzone). */
+  selected: (count: number, firstName: string) => string;
+  /** The dropzone's remove button for one file. */
+  remove: (name: string) => string;
+  /** The dropzone's remove-everything button in `multiple` mode. */
+  clearAll: string;
+  /** Spoken after a remove / clear, since the button that was pressed is gone. */
+  removed: (name: string) => string;
+  cleared: string;
+  /** The dropzone's accessible name, when the host passes no `dropLabel`. */
+  dropzone: string;
+  /** The dropzone's Browse button, when the host passes no `browseLabel`. */
+  browse: string;
+  /** What an empty single-file dropzone says (no `emptyLabel` given). */
+  empty: string;
+  /** …and an empty `multiple` one. */
+  emptyMultiple: string;
+  /** The dropzone's second line (no `hint` given). Receives `accept` as a person
+   *  reads it (`".pdf, image/png"`), or `""` when anything goes. */
+  hint: (accept: string) => string;
+  /** What a `busy` dropzone says in place of its body ("Uploading…"). */
+  busy: string;
+}
+
+/* ── Screening ───────────────────────────────────────────────────────────── */
+
+export type FileRejectionReason = "type" | "size" | "count" | "invalid";
+
+/** One file the picker refused, and why. `message` is already translated (see
+ *  {@link FilePickerLabels}, or the caller's `invalidMessage`), so a host that just
+ *  wants to show it can render `rejections[0].message` as is. */
+export interface FileRejection {
+  file: File;
+  reason: FileRejectionReason;
+  message: string;
+}
+
+/**
+ * Does `file` satisfy an `accept` string, the way the browser's dialog reads it?
+ * Comma-separated tokens: `.ext` (case-insensitive suffix of the name), `type/*`
+ * (a MIME family) or an exact MIME type. An empty or absent `accept` takes anything.
+ *
+ * A file with no `type` — common for `.step`, `.dat`, anything the OS has no MIME
+ * mapping for — can only match by extension, which is why lenkbank lists `.stp` AND
+ * `model/step`: that is how `accept` has to be written for the dialog anyway.
+ */
+export function matchesAccept(file: File, accept: string | undefined): boolean {
+  const tokens = (accept ?? "")
+    .split(",")
+    .map((t) => t.trim().toLowerCase())
+    .filter(Boolean);
+  if (tokens.length === 0) return true;
+  const name = file.name.toLowerCase();
+  // An EMPTY type is the browser saying "I don't know", not "it's something else": HEIC
+  // photos on Windows without the codec arrive with `type === ""`. Refusing them
+  // (0.6.0) refused iPhone photos the picker itself had just offered (keksdose). So a
+  // missing type is inferred from the extension where that is unambiguous, and a file
+  // whose type cannot be known at all is given the benefit of the doubt — nothing here
+  // proves it does not match, and the server validates what it receives anyway.
+  const type = (file.type || typeFromExtension(name) || "").toLowerCase();
+  if (!type && !tokens.every((t) => t.startsWith("."))) return true;
+  return tokens.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (!type) return false;
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+}
+
+/** MIME types for the extensions a browser most often leaves untyped. */
+const EXTENSION_TYPES: Record<string, string> = {
+  heic: "image/heic",
+  heif: "image/heif",
+  avif: "image/avif",
+  webp: "image/webp",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  pdf: "application/pdf",
+  csv: "text/csv",
+  txt: "text/plain",
+};
+
+function typeFromExtension(name: string): string | undefined {
+  const dot = name.lastIndexOf(".");
+  return dot === -1 ? undefined : EXTENSION_TYPES[name.slice(dot + 1)];
+}
+
+/** @internal `" .PDF, image/png ,"` => `".pdf, image/png"` — `accept` as a person reads
+ *  it. Also the dropzone's default hint. */
+export function formatAccept(accept: string): string {
+  return accept
+    .split(",")
+    .map((t) => t.trim().toLowerCase())
+    .filter(Boolean)
+    .join(", ");
+}
+
+/** What the pickers screen a pick with. All optional; nothing set accepts everything. */
+export interface FileScreenOptions {
+  accept?: string;
+  /** Bytes. Larger files are refused with reason `"size"`. */
+  maxSize?: number;
+  /** How many files one pick may deliver. The rest are refused with reason `"count"`
+   *  — first come, first kept. For a running cap ("at most 5 attachments") pass what
+   *  is LEFT: `maxFiles={5 - attachments.length}`. */
+  maxFiles?: number;
+  /** The caller's own check, after `accept` and `maxSize`. */
+  isValid?: (file: File) => boolean;
+  /** The message for an `isValid` refusal; `labels.rejectedInvalid` otherwise. */
+  invalidMessage?: string;
+}
+
+/** @internal Split a pick into the files that pass and the ones that do not. */
+export function screenFiles(
+  files: readonly File[],
+  opts: FileScreenOptions,
+  labels: FilePickerLabels,
+  formatSize: (bytes: number) => string,
+): { accepted: File[]; rejected: FileRejection[] } {
+  const accepted: File[] = [];
+  const rejected: FileRejection[] = [];
+  // Name what `accept` takes ("Only .csv files") — unless the host translated
+  // `rejectedType` but not yet `rejectedTypeOnly`: its own sentence beats an English one.
+  const acceptText = opts.accept ? formatAccept(opts.accept) : "";
+  const useOnly =
+    acceptText !== "" &&
+    (labels.rejectedTypeOnly !== DEFAULT_FILE_PICKER_LABELS.rejectedTypeOnly ||
+      labels.rejectedType === DEFAULT_FILE_PICKER_LABELS.rejectedType);
+  const typeMessage = (name: string) =>
+    useOnly ? labels.rejectedTypeOnly(acceptText, name) : labels.rejectedType(name);
+  for (const file of files) {
+    let reason: FileRejectionReason | null = null;
+    if (!matchesAccept(file, opts.accept)) reason = "type";
+    else if (opts.maxSize !== undefined && file.size > opts.maxSize) reason = "size";
+    else if (opts.isValid && !opts.isValid(file)) reason = "invalid";
+    // Count last, and only against files that passed everything else: a refused
+    // file should not use up one of the slots a good one could have had.
+    else if (opts.maxFiles !== undefined && accepted.length >= opts.maxFiles) reason = "count";
+    if (reason === null) {
+      accepted.push(file);
+      continue;
+    }
+    const message =
+      reason === "type"
+        ? typeMessage(file.name)
+        : reason === "size"
+          ? labels.rejectedSize(file.name, formatSize(opts.maxSize ?? 0))
+          : reason === "count"
+            ? labels.rejectedCount(file.name, Math.max(0, opts.maxFiles ?? 0))
+            : (opts.invalidMessage ?? labels.rejectedInvalid(file.name));
+    rejected.push({ file, reason, message });
+  }
+  return { accepted, rejected };
+}
+
+/**
+ * Judges a pick as a whole — keksdose's "refuse the pick if any file is bad", which
+ * with `onFiles` + `onReject` alone had to be rebuilt from two calls in a microtask.
+ *
+ * Called ONCE per pick, after screening and before `onFiles` / `onReject`, with both
+ * halves (either may be empty). Return `false` to refuse the whole pick: the accepted
+ * files are not delivered, `onReject` still receives what screening refused, and one
+ * sentence (`labels.rejectedPick`) is spoken for the pick instead of a per-file one.
+ * Return nothing to let the pick through as usual.
+ *
+ * ```tsx
+ * onPick={(ok, bad) => bad.length === 0 || false}  // all or nothing
+ * ```
+ */
+export type FilePickHandler = (accepted: File[], rejected: FileRejection[]) => boolean | void;
+
+/** @internal The shared tail of both pickers: run `onPick`, and say whether the pick
+ *  stands. A pick with nothing accepted has nothing to refuse, so `false` there is
+ *  treated as no verdict and the usual per-file messages are kept. */
+export function judgePick(
+  onPick: FilePickHandler | undefined,
+  accepted: File[],
+  rejected: FileRejection[],
+): boolean {
+  if (!onPick) return true;
+  return onPick(accepted, rejected) !== false || accepted.length === 0;
+}
+
+/** One sentence for a whole batch of refusals: the file's own message for one, a
+ *  count for several — reading out five sentences in a row helps nobody. */
+export function summariseRejections(rejected: readonly FileRejection[], labels: FilePickerLabels): string {
+  if (rejected.length === 0) return "";
+  if (rejected.length === 1) return rejected[0].message;
+  return labels.rejectedMany(rejected.length);
+}
+
+/* ── useFilePicker ───────────────────────────────────────────────────────── */
+
+export interface UseFilePickerOptions extends FileScreenOptions {
+  /** Let one pick deliver several files. Without it a drop of several keeps the first. */
+  multiple?: boolean;
+  /**
+   * Ask a phone for its camera instead of the file chooser: `"environment"` is the
+   * back camera, `"user"` the front. A HINT — desktop browsers ignore it, and Chrome
+   * drops it when `multiple` is also set (a camera cannot deliver a list), which is why
+   * keksdose's camera input has no `multiple`. Pass one or the other.
+   */
+  capture?: boolean | "user" | "environment";
+  /** The files that passed, in pick order. Never called with an empty array.
+   *  Optional since 0.7 for a caller that takes the pick through `onPick` alone. */
+  onFiles?: (files: File[]) => void;
+  /** See {@link FilePickHandler}: the whole pick at once, with the power to refuse it. */
+  onPick?: FilePickHandler;
+  /** The files that did not, with a translated message each. The refusals are also
+   *  spoken through a live region, so this is for SHOWING them, not for a11y. */
+  onReject?: (rejections: FileRejection[]) => void;
+  /** `open()` and `take()` do nothing while set. */
+  disabled?: boolean;
+  /** Per-instance overrides of the `filePicker` label namespace. */
+  labels?: LabelOverride<FilePickerLabels>;
+}
+
+export interface UseFilePickerReturn {
+  /** Open the system picker. Call it from a click handler — browsers only open a file
+   *  dialog in response to a user gesture. */
+  open: () => void;
+  /** Screen and deliver files that arrived some other way — a drop, a paste. Honours
+   *  `multiple` (only the first file without it) and every check. */
+  take: (files: ArrayLike<File> | null | undefined) => void;
+  /** The hidden input and the live region. Render it once, anywhere — it takes no
+   *  space and needs no positioned ancestor. */
+  element: ReactElement;
+}
+
+/**
+ * The headless half of {@link FileButton}: a hidden file input you can open from any
+ * control, with the reset, the screening and the announcement built in.
+ *
+ * ```tsx
+ * const picker = useFilePicker({ accept: ".pdf", onFiles: ([f]) => upload(f) });
+ * return <>{picker.element}<DetailTableCard onAdd={picker.open} … /></>;
+ * ```
+ */
+export function useFilePicker({
+  accept,
+  multiple,
+  capture,
+  maxSize,
+  maxFiles,
+  isValid,
+  invalidMessage,
+  onFiles,
+  onPick,
+  onReject,
+  disabled,
+  labels: labelsProp,
+}: UseFilePickerOptions): UseFilePickerReturn {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const labels = useKitLabels("filePicker", DEFAULT_FILE_PICKER_LABELS, labelsProp);
+  const fileText = useKitFileLabels();
+  // Assertive: a refusal is a failure the user has to hear before they move on, and
+  // it is the only thing this region ever says.
+  const { announce, regionProps } = useAnnounce({ politeness: "assertive" });
+
+  const take = (list: ArrayLike<File> | null | undefined) => {
+    if (disabled || !list || list.length === 0) return;
+    const all = Array.from(list);
+    const files = multiple ? all : all.slice(0, 1);
+    const { accepted, rejected } = screenFiles(
+      files,
+      // A single-file picker holds one file by definition; `maxFiles` is a multi-mode
+      // cap and would only ever say "0" there if a caller passed it by mistake.
+      { accept, maxSize, maxFiles: multiple ? maxFiles : undefined, isValid, invalidMessage },
+      labels,
+      fileText.size,
+    );
+    if (!judgePick(onPick, accepted, rejected)) {
+      if (rejected.length > 0) onReject?.(rejected);
+      announce(labels.rejectedPick(files.length));
+      return;
+    }
+    if (accepted.length > 0) onFiles?.(accepted);
+    if (rejected.length > 0) {
+      onReject?.(rejected);
+      announce(summariseRejections(rejected, labels));
+    }
+  };
+
+  const element = (
+    <>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        capture={capture}
+        disabled={disabled}
+        // `hidden` (display: none), not `sr-only`: the control a user reaches is the
+        // button, and a second, nameless tab stop for the same action is noise. A
+        // display:none file input still opens on `.click()` in every current browser —
+        // and, unlike `sr-only`, it cannot escape to the initial containing block and
+        // stretch the page (see the note in `file-dropzone.tsx`).
+        className="hidden"
+        tabIndex={-1}
+        aria-hidden
+        onChange={(e) => {
+          // Copy BEFORE the reset: `files` is a live view of the input's value, and
+          // clearing the value empties it.
+          const picked = Array.from(e.currentTarget.files ?? []);
+          e.currentTarget.value = "";
+          take(picked);
+        }}
+      />
+      <span {...regionProps} />
+    </>
+  );
+
+  return {
+    open: () => {
+      if (!disabled) inputRef.current?.click();
+    },
+    take,
+    element,
+  };
+}

package/src/hooks/use-focus-trap.ts

@@ -36,16 +36,29 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
  */
 
 /**
- * Tabbable descendants, in DOM order.
+ * Candidate tab stops, in DOM order — narrowed by {@link isTabStop} to the ones a Tab
+ * really reaches.
  *
- * Deliberately the same selector `Modal` used, rather than a more thorough one that
- * also walks `inert`, `visibility: hidden` and open `<details>`: this is the set that
- * has been in production across three apps, and widening it here would change which
- * element receives focus in overlays nobody asked me to change the behaviour of.
+ * The selector is the one `Modal` used. On its own it was not enough (round 0.34
+ * BUG-4): only the bare `[tabindex]` clause excluded `-1`, so a `button`, an `input` or
+ * a link taken out of the tab order still counted. A panel that ends in a roving grid —
+ * the calendar's days, the month grid, the picker sheet's rows, every one of them `-1`
+ * but the active cell — then had a "last" stop no Tab ever reaches: Tab from the real
+ * last stop was not wrapped and walked out of the open panel, and Shift+Tab from the
+ * first landed on a cell that is not a stop at all.
  */
 const FOCUSABLE =
   'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
 
+/**
+ * A stop the browser's own Tab would land on: in the tab order (`tabIndex` ≥ 0) and not
+ * inside something `hidden` or `inert`. Removes only elements a native Tab never
+ * reaches, so no correct order changes. `visibility: hidden` and closed `<details>` are
+ * still not walked — they need layout, which this list has never read.
+ */
+const isTabStop = (el: HTMLElement): boolean =>
+  el.tabIndex >= 0 && !el.closest("[hidden],[inert]");
+
 /**
  * Marks a container whose trap is currently active.
  *
@@ -138,7 +151,7 @@ export function useFocusTrap(
         // A tabbable inside a NESTED open overlay belongs to that overlay's trap, not
         // to this one — otherwise the outer list spans both panels and Tab from the
         // inner panel's last control wraps to the OUTER panel's first.
-        (el) => !inNestedTrap(el),
+        (el) => isTabStop(el) && !inNestedTrap(el),
       );
 
     const { initialFocus: how } = optsRef.current;

package/src/i18n/defaults.ts

@@ -1,105 +1,105 @@
 import { DEFAULT_DATA_TABLE_LABELS } from "../components/data-table-labels";
-import { DEFAULT_MINI_CALENDAR_LABELS } from "../components/mini-calendar";
-import { DEFAULT_CALENDAR_HEATMAP_LABELS } from "../components/calendar-heatmap";
-import { DEFAULT_MONTH_PICKER_LABELS } from "../components/month-picker";
-import { DEFAULT_PAGE_CONTENTS_LABELS } from "../components/page-contents";
-import { DEFAULT_POPOVER_LABELS } from "../components/popover";
-import { DEFAULT_CHIP_INPUT_LABELS } from "../components/chip";
-import { DEFAULT_FIELD_SYNC_LABELS } from "../components/field-sync";
+import { DEFAULT_MINI_CALENDAR_LABELS } from "../components/mini-calendar-labels";
+import { DEFAULT_CALENDAR_HEATMAP_LABELS } from "../components/calendar-heatmap-labels";
+import { DEFAULT_MONTH_PICKER_LABELS } from "../components/month-picker-labels";
+import { DEFAULT_PAGE_CONTENTS_LABELS } from "../components/page-contents-labels";
+import { DEFAULT_POPOVER_LABELS } from "../components/popover-labels";
+import { DEFAULT_CHIP_INPUT_LABELS } from "../components/chip-labels";
+import { DEFAULT_FIELD_SYNC_LABELS } from "../components/field-sync-labels";
 import {
   DEFAULT_CHARACTER_COUNT_LABELS,
   DEFAULT_PASSWORD_REVEAL_LABELS,
   DEFAULT_TABS_LABELS,
-} from "../components/ui";
-import { DEFAULT_WIZARD_LABELS } from "../wizard/types";
-import { DEFAULT_TOUR_LABELS } from "../tour/tour";
-import { DEFAULT_COMMAND_PALETTE_LABELS } from "../search/command-palette";
-import { DEFAULT_GLOBAL_SEARCH_LABELS } from "../search/global-search";
+} from "../components/ui-labels";
+import { DEFAULT_WIZARD_LABELS } from "../wizard/wizard-labels";
+import { DEFAULT_TOUR_LABELS } from "../tour/tour-labels";
+import { DEFAULT_COMMAND_PALETTE_LABELS } from "../search/command-palette-labels";
+import { DEFAULT_GLOBAL_SEARCH_LABELS } from "../search/global-search-labels";
 import { DEFAULT_SERIES_CHART_LABELS } from "../components/series-chart-labels";
 import { DEFAULT_PIE_CHART_LABELS } from "../components/pie-chart-labels";
-import { DEFAULT_SPARKLINE_LABELS } from "../components/sparkline";
-import { DEFAULT_STAT_TILE_LABELS } from "../components/stat-tile";
-import { DEFAULT_SIGNATURE_PAD_LABELS } from "../components/signature-pad";
-import { DEFAULT_PASSWORD_STRENGTH_LABELS } from "../components/password-strength";
-import { DEFAULT_DANGER_CONFIRM_LABELS } from "../components/danger-confirm";
-import { DEFAULT_SWATCH_PICKER_LABELS } from "../components/swatch-picker";
-import { DEFAULT_ICON_PICKER_LABELS } from "../components/icon-picker";
-import { DEFAULT_DIALOG_FRAME_LABELS } from "../components/dialog-frame";
-import { DEFAULT_FILE_PICKER_LABELS } from "../components/file-button";
-import { DEFAULT_MEASURED_GRID_LABELS } from "../components/measured-grid";
-import { DEFAULT_CONFIRM_DIALOG_LABELS } from "../components/confirm-dialog";
-import { DEFAULT_FLOATING_PANEL_LABELS } from "../components/floating-panel";
-import { DEFAULT_FEEDBACK_ATTACHMENT_LABELS } from "../feedback/feedback-attachment";
-import { DEFAULT_FEEDBACK_DIALOG_LABELS } from "../feedback/feedback-dialog";
+import { DEFAULT_SPARKLINE_LABELS } from "../components/sparkline-labels";
+import { DEFAULT_STAT_TILE_LABELS } from "../components/stat-tile-labels";
+import { DEFAULT_SIGNATURE_PAD_LABELS } from "../components/signature-pad-labels";
+import { DEFAULT_PASSWORD_STRENGTH_LABELS } from "../components/password-strength-labels";
+import { DEFAULT_DANGER_CONFIRM_LABELS } from "../components/danger-confirm-labels";
+import { DEFAULT_SWATCH_PICKER_LABELS } from "../components/swatch-picker-labels";
+import { DEFAULT_ICON_PICKER_LABELS } from "../components/icon-picker-labels";
+import { DEFAULT_DIALOG_FRAME_LABELS } from "../components/dialog-frame-labels";
+import { DEFAULT_FILE_PICKER_LABELS } from "../hooks/use-file-picker-labels";
+import { DEFAULT_MEASURED_GRID_LABELS } from "../components/measured-grid-labels";
+import { DEFAULT_CONFIRM_DIALOG_LABELS } from "../components/confirm-dialog-labels";
+import { DEFAULT_FLOATING_PANEL_LABELS } from "../components/floating-panel-labels";
+import { DEFAULT_FEEDBACK_ATTACHMENT_LABELS } from "../feedback/feedback-attachment-labels";
+import { DEFAULT_FEEDBACK_DIALOG_LABELS } from "../feedback/feedback-dialog-labels";
 import {
   DEFAULT_FEEDBACK_COMPOSER_LABELS,
   DEFAULT_FEEDBACK_THREAD_LABELS,
-} from "../feedback/feedback-thread";
+} from "../feedback/feedback-thread-labels";
 import {
   DEFAULT_FEEDBACK_CATEGORY_LABELS,
   DEFAULT_FEEDBACK_STATUS_LABELS,
   DEFAULT_FEEDBACK_TOAST_LABELS,
 } from "../feedback/feedback-labels";
-import { DEFAULT_FEEDBACK_MENU_LABELS } from "../feedback/feedback-menu";
-import { DEFAULT_FEEDBACK_CONTEXT_LABELS } from "../feedback/feedback-context";
-import { DEFAULT_FEEDBACK_PAGE_LABELS } from "../feedback/feedback-table";
-import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "../feedback/feedback-row-detail";
-import { DEFAULT_ACCOUNT_SETTINGS_LABELS } from "../components/account-settings-labels";
-import { DEFAULT_COPY_BUTTON_LABELS } from "../components/copy-button";
-import { DEFAULT_BULK_ACTION_BAR_LABELS } from "../components/bulk-action-bar";
-import { DEFAULT_LIST_LABELS } from "../components/list";
-import { DEFAULT_BREADCRUMBS_LABELS } from "../components/breadcrumbs";
-import { DEFAULT_TOAST_LABELS } from "../components/toast";
-import { DEFAULT_FORM_ACTIONS_LABELS } from "../components/form-actions";
-import { DEFAULT_DESCRIPTION_LIST_LABELS } from "../components/description-list";
-import { DEFAULT_LINE_ITEMS_LABELS } from "../components/line-items";
-import { DEFAULT_PROGRESS_BAR_LABELS } from "../components/progress-bar";
-import { DEFAULT_SIGNED_AMOUNT_LABELS } from "../components/signed-amount";
-import { DEFAULT_ERROR_BOUNDARY_LABELS } from "../components/error-boundary";
-import { DEFAULT_AUTHED_IMAGE_LABELS } from "../components/authed-image";
-import { DEFAULT_IMAGE_GRID_LABELS } from "../components/image-grid";
-import { DEFAULT_LIGHTBOX_LABELS } from "../components/lightbox";
-import { DEFAULT_WRITE_LOCK_LABELS } from "../components/write-lock";
-import { DEFAULT_LEGAL_LABELS } from "../components/legal";
-import { DEFAULT_SIGN_IN_LABELS } from "../auth/sign-in-form";
-import { DEFAULT_REGISTER_LABELS } from "../auth/register-form";
-import { DEFAULT_COMPLETE_NAME_LABELS } from "../auth/complete-name-dialog";
-import { DEFAULT_FORGOT_PASSWORD_LABELS } from "../auth/forgot-password-form";
-import { DEFAULT_RESET_PASSWORD_LABELS } from "../auth/reset-password-form";
-import { DEFAULT_VERIFY_EMAIL_LABELS } from "../auth/verify-email";
-import { DEFAULT_NOT_FOUND_LABELS } from "../auth/not-found-page";
-import { DEFAULT_ACCEPT_INVITATION_LABELS } from "../auth/accept-invitation";
-import { DEFAULT_COMPANY_SWITCHER_LABELS } from "../shell/company-switcher";
-import { DEFAULT_EMAIL_CHANGE_LABELS } from "../account/email-change-setting";
-import { DEFAULT_SESSIONS_LABELS } from "../account/sessions-setting";
-import { DEFAULT_DELETE_ACCOUNT_LABELS } from "../account/delete-account-setting";
-import { DEFAULT_DATA_EXPORT_LABELS } from "../account/data-export-setting";
-import { DEFAULT_USER_ROSTER_LABELS } from "../admin/user-roster";
-import { DEFAULT_ROLE_SELECT_LABELS } from "../admin/role-select";
-import { DEFAULT_REVIEWER_SCOPE_LABELS } from "../admin/reviewer-scope-editor";
-import { DEFAULT_ADMIN_ACTION_LABELS } from "../admin/admin-action-confirm";
-import { DEFAULT_ADMIN_ACTION_LOG_LABELS } from "../admin/admin-action-log";
-import { DEFAULT_TRANSFER_OWNERSHIP_LABELS } from "../admin/transfer-ownership-dialog";
-import { DEFAULT_INVITATIONS_LABELS } from "../admin/invitations-panel";
+import { DEFAULT_FEEDBACK_MENU_LABELS } from "../feedback/feedback-menu-labels";
+import { DEFAULT_FEEDBACK_CONTEXT_LABELS } from "../feedback/feedback-context-labels";
+import { DEFAULT_FEEDBACK_PAGE_LABELS } from "../feedback/feedback-table-labels";
+import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "../feedback/feedback-row-detail-labels";
+import { DEFAULT_ACCOUNT_SETTINGS_LABELS } from "../account/account-settings-labels";
+import { DEFAULT_COPY_BUTTON_LABELS } from "../components/copy-button-labels";
+import { DEFAULT_BULK_ACTION_BAR_LABELS } from "../components/bulk-action-bar-labels";
+import { DEFAULT_LIST_LABELS } from "../components/list-labels";
+import { DEFAULT_BREADCRUMBS_LABELS } from "../components/breadcrumbs-labels";
+import { DEFAULT_TOAST_LABELS } from "../components/toast-labels";
+import { DEFAULT_FORM_ACTIONS_LABELS } from "../components/form-actions-labels";
+import { DEFAULT_DESCRIPTION_LIST_LABELS } from "../components/description-list-labels";
+import { DEFAULT_LINE_ITEMS_LABELS } from "../components/line-items-labels";
+import { DEFAULT_PROGRESS_BAR_LABELS } from "../components/progress-bar-labels";
+import { DEFAULT_SIGNED_AMOUNT_LABELS } from "../components/signed-amount-labels";
+import { DEFAULT_ERROR_BOUNDARY_LABELS } from "../components/error-boundary-labels";
+import { DEFAULT_AUTHED_IMAGE_LABELS } from "../components/authed-image-labels";
+import { DEFAULT_IMAGE_GRID_LABELS } from "../components/image-grid-labels";
+import { DEFAULT_LIGHTBOX_LABELS } from "../components/lightbox-labels";
+import { DEFAULT_WRITE_LOCK_LABELS } from "../components/write-lock-labels";
+import { DEFAULT_LEGAL_LABELS } from "../components/legal-labels";
+import { DEFAULT_SIGN_IN_LABELS } from "../auth/sign-in-form-labels";
+import { DEFAULT_REGISTER_LABELS } from "../auth/register-form-labels";
+import { DEFAULT_COMPLETE_NAME_LABELS } from "../auth/complete-name-dialog-labels";
+import { DEFAULT_FORGOT_PASSWORD_LABELS } from "../auth/forgot-password-form-labels";
+import { DEFAULT_RESET_PASSWORD_LABELS } from "../auth/reset-password-form-labels";
+import { DEFAULT_VERIFY_EMAIL_LABELS } from "../auth/verify-email-labels";
+import { DEFAULT_NOT_FOUND_LABELS } from "../auth/not-found-page-labels";
+import { DEFAULT_ACCEPT_INVITATION_LABELS } from "../auth/accept-invitation-labels";
+import { DEFAULT_COMPANY_SWITCHER_LABELS } from "../shell/company-switcher-labels";
+import { DEFAULT_EMAIL_CHANGE_LABELS } from "../account/email-change-setting-labels";
+import { DEFAULT_SESSIONS_LABELS } from "../account/sessions-setting-labels";
+import { DEFAULT_DELETE_ACCOUNT_LABELS } from "../account/delete-account-setting-labels";
+import { DEFAULT_DATA_EXPORT_LABELS } from "../account/data-export-setting-labels";
+import { DEFAULT_USER_ROSTER_LABELS } from "../admin/user-roster-labels";
+import { DEFAULT_ROLE_SELECT_LABELS } from "../admin/role-select-labels";
+import { DEFAULT_REVIEWER_SCOPE_LABELS } from "../admin/reviewer-scope-editor-labels";
+import { DEFAULT_ADMIN_ACTION_LABELS } from "../admin/admin-action-confirm-labels";
+import { DEFAULT_ADMIN_ACTION_LOG_LABELS } from "../admin/admin-action-log-labels";
+import { DEFAULT_TRANSFER_OWNERSHIP_LABELS } from "../admin/transfer-ownership-dialog-labels";
+import { DEFAULT_INVITATIONS_LABELS } from "../admin/invitations-panel-labels";
 import { DEFAULT_SETTINGS_LABELS } from "../settings/settings-labels";
 import { DEFAULT_LANDING_LABELS } from "../landing/landing-labels";
 import { DEFAULT_DEMO_LABELS } from "../demo/demo-labels";
 import { DEFAULT_BILLING_LABELS } from "../billing/billing-labels";
-import { DEFAULT_PLAN_CHANGE_LABELS } from "../admin/plan-change";
+import { DEFAULT_PLAN_CHANGE_LABELS } from "../admin/plan-change-labels";
 import { DEFAULT_APPEARANCE_LABELS } from "../components/appearance-labels";
-import { DEFAULT_ROW_ACTIONS_LABELS } from "../components/row-actions";
-import { DEFAULT_APP_SHELL_MORE_LABELS } from "../shell/app-shell";
-import { DEFAULT_ACCOUNT_STATE_LABELS } from "../components/account-chips";
-import { DEFAULT_SHARE_CARD_LABELS } from "../components/share-card";
-import { DEFAULT_REAUTH_DIALOG_LABELS } from "../components/reauth-dialog";
-import { DEFAULT_SERVER_WAKE_LABELS } from "../components/server-wake";
+import { DEFAULT_ROW_ACTIONS_LABELS } from "../components/row-actions-labels";
+import { DEFAULT_APP_SHELL_MORE_LABELS } from "../shell/app-shell-labels";
+import { DEFAULT_ACCOUNT_STATE_LABELS } from "../components/account-chips-labels";
+import { DEFAULT_SHARE_CARD_LABELS } from "../components/share-card-labels";
+import { DEFAULT_REAUTH_DIALOG_LABELS } from "../components/reauth-dialog-labels";
+import { DEFAULT_SERVER_WAKE_LABELS } from "../components/server-wake-labels";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS } from "../components/translation-review-labels";
-import { DEFAULT_COUNTRY_SELECT_LABELS } from "../components/country-select";
-import { DEFAULT_INLINE_EDIT_LABELS } from "../components/inline-edit-field";
-import { DEFAULT_IBAN_INPUT_LABELS } from "../components/iban-input";
-import { DEFAULT_PHONE_INPUT_LABELS } from "../components/phone-input";
-import { DEFAULT_SIGN_CHIP_LABELS } from "../components/sign-chip";
-import { DEFAULT_COLUMN_MAPPER_LABELS } from "../components/column-mapper";
+import { DEFAULT_COUNTRY_SELECT_LABELS } from "../components/country-select-labels";
+import { DEFAULT_INLINE_EDIT_LABELS } from "../components/inline-edit-field-labels";
+import { DEFAULT_IBAN_INPUT_LABELS } from "../components/iban-input-labels";
+import { DEFAULT_PHONE_INPUT_LABELS } from "../components/phone-input-labels";
+import { DEFAULT_SIGN_CHIP_LABELS } from "../components/sign-chip-labels";
+import { DEFAULT_COLUMN_MAPPER_LABELS } from "../components/column-mapper-labels";
 import {
   DEFAULT_APP_SHELL_LABELS,
   DEFAULT_CALCULATOR_LABELS,
@@ -112,7 +112,7 @@ import {
   DEFAULT_PICKER_SHEET_LABELS,
   DEFAULT_SWIPEABLE_ROW_LABELS,
   DEFAULT_TOP_BAR_LABELS,
-} from "./kit-labels";
+} from "./shared-labels";
 import type { UiKitLabels } from "./kit-labels";
 
 /**
@@ -122,6 +122,15 @@ import type { UiKitLabels } from "./kit-labels";
  * A separate module from the provider on purpose. Components import the provider's
  * hooks; this file imports the components' defaults. Kept together they would be an
  * import cycle through every component in the kit.
+ *
+ * Every import here is a module of WORDS — a `*-labels.ts` beside its component, which
+ * the component re-exports (`shared-labels` for the namespaces the provider types
+ * itself, which `kit-labels` re-exports) — never a component. The
+ * English catalogue (`locales/en.ts`) is built on this object, so a component imported
+ * here rides along with English: in 0.33 that was 79 of them, and an app fetching `en`
+ * lazily fetched ~40 chunks of component code with it, where every other language is one
+ * (0.34, KS U8). `__tests__/english-catalogue-graph.test.ts` holds the line, and the
+ * build makes `dist/i18n/locales/en.js` one file (scripts/flatten-en.mjs).
  */
 export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   common: DEFAULT_COMMON_LABELS,