@eifi1/ui-kit 0.24.1 → 0.25.1

package/dist/lib/translation-review.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/translation-review.ts"],"sourcesContent":["/**\n * The pure half of an app's translation review (H1 in docs/i18n-harmonization.md): from\n * the strings the app ships and the verdicts its server stores to one row per (locale,\n * key) with a status — keksdose's `features/translations/translation-catalogue.ts` and\n * kastlan's copy of it, which had grown apart by a fifth status and a second kind of key.\n *\n * WHY THE STRINGS ARE THE CATALOGUE. Nothing on the server lists which strings exist: a\n * verdict only says what somebody thought of one. So the rows are built from what the app\n * ships — its locale bundles, kastlan's document texts, the kit's own words\n * (`kitLabelStrings`) — and the review can never offer a string users do not see. A\n * verdict is stored WITH the wording it was given on, and a string that changed since is\n * noticed by comparing the two: `changed`, read it again, whatever the verdict was.\n *\n * WHAT STAYS IN THE APP. Which locale is read against which (keksdose: everything against\n * English, English against de-CH; kastlan: against German, German against English), where\n * the strings come from, who may review what (the locales and areas its server answers\n * with), and every request. The kit takes those as input and never derives them.\n *\n * camelCase, like the rest of the kit. The contract's wire shape is snake_case\n * (`reference_text`, `reviewer_name`, `reviewed_at`); {@link fromApiReview} and\n * {@link toApiWrite} are the two lines each app would otherwise write — both apps speak\n * the same contract, so the mapping is written once, here.\n */\n\n// ── Shapes ──────────────────────────────────────────────────────────────────────\n\nexport type TranslationVerdict = \"APPROVED\" | \"NEEDS_CHANGE\";\n\n/** One stored verdict: what a reviewer said about one string in one locale. */\nexport interface TranslationReview {\n  locale: string;\n  key: string;\n  /** The wording that was judged — compared with today's to notice a change. Empty for\n   *  a string the locale lacked (a suggested translation for a `missing` row). */\n  text: string;\n  /** The reference wording at the time. `null` from a server that did not store it. */\n  referenceText: string | null;\n  verdict: TranslationVerdict;\n  note: string | null;\n  /** The reviewer's wording — or, for a missing string, the translation to add. */\n  suggestion: string | null;\n  /** `null` once the reviewer's account has been erased. */\n  reviewerName: string | null;\n  /** ISO timestamp. */\n  reviewedAt: string;\n}\n\n/** What a save sends: the verdict plus the wording it is given on. */\nexport interface TranslationReviewWrite {\n  locale: string;\n  key: string;\n  text: string;\n  referenceText: string | null;\n  verdict: TranslationVerdict;\n  note: string | null;\n  suggestion: string | null;\n}\n\n/** What a reset sends: back to \"unreviewed\". */\nexport interface TranslationReviewKey {\n  locale: string;\n  key: string;\n}\n\n/**\n * Where a string stands, in the order a reviewer works through them: what is not there\n * at all, what nobody has read, what changed after it was read, what was sent back, and\n * what is done. `missing` never occurs for an app whose locales have every key\n * (keksdose); kastlan's French lacks 172 screen texts.\n */\nexport type ReviewStatus = \"missing\" | \"unreviewed\" | \"changed\" | \"needs_change\" | \"approved\";\n\nexport const REVIEW_STATUSES: readonly ReviewStatus[] = [\n  \"missing\",\n  \"unreviewed\",\n  \"changed\",\n  \"needs_change\",\n  \"approved\",\n];\n\nexport interface TranslationRow {\n  /** `${locale}|${key}` — unique across every locale on a page. A bar, not a colon:\n   *  kastlan's keys contain colons (`common:actions.save`). */\n  id: string;\n  key: string;\n  /** The key's group: `budget` for `budget.rta`, `common` for `common:actions.save`,\n   *  `kit` for the kit's own words. See {@link keyNamespace}. */\n  namespace: string;\n  /** Where the string comes from, in the app's own words — kastlan's `screen` and\n   *  `documents`, keksdose's one source. `\"\"` when the app does not say. */\n  source: string;\n  locale: string;\n  /** The wording users see today; empty when the locale lacks the string. */\n  text: string;\n  /** The same key in the reference locale. */\n  reference: string;\n  status: ReviewStatus;\n  review: TranslationReview | null;\n  /** The interpolations and tags differ from the reference's — `{{count}}` dropped, a\n   *  `<1>` link lost, a `{date}` renamed. A machine can check that much, so it does,\n   *  before a person reads. Never set on a missing string: it has nothing to lose. */\n  placeholderMismatch: boolean;\n}\n\n// ── The wire contract ───────────────────────────────────────────────────────────\n\n/** A verdict as `GET /translations/reviews` returns it (H1's shared contract). Typed\n *  structurally, so an app's generated OpenAPI type fits without a cast. */\nexport interface ApiTranslationReview {\n  locale: string;\n  key: string;\n  text: string;\n  reference_text: string | null;\n  verdict: TranslationVerdict;\n  note: string | null;\n  suggestion: string | null;\n  reviewer_name: string | null;\n  reviewed_at: string;\n}\n\n/** One item of `PUT /translations/reviews`. */\nexport interface ApiTranslationReviewWrite {\n  locale: string;\n  key: string;\n  text: string;\n  reference_text: string | null;\n  verdict: TranslationVerdict;\n  note: string | null;\n  suggestion: string | null;\n}\n\n/** A verdict from the server, in the kit's spelling. */\nexport function fromApiReview(review: ApiTranslationReview): TranslationReview {\n  return {\n    locale: review.locale,\n    key: review.key,\n    text: review.text,\n    referenceText: review.reference_text,\n    verdict: review.verdict,\n    note: review.note,\n    suggestion: review.suggestion,\n    reviewerName: review.reviewer_name,\n    reviewedAt: review.reviewed_at,\n  };\n}\n\n/** A save, in the server's spelling. `TranslationReviewKey` needs no mapping — it is\n *  `{ locale, key }` on both sides. */\nexport function toApiWrite(write: TranslationReviewWrite): ApiTranslationReviewWrite {\n  return {\n    locale: write.locale,\n    key: write.key,\n    text: write.text,\n    reference_text: write.referenceText,\n    verdict: write.verdict,\n    note: write.note,\n    suggestion: write.suggestion,\n  };\n}\n\n// ── Strings ─────────────────────────────────────────────────────────────────────\n\n/**\n * A nested bundle as `key → string`, in the bundle's own order. Non-string leaves are\n * skipped rather than stringified into something nobody wrote.\n *\n * `prefix` is put in front of every key AS IS, so it names the separator too:\n * `flattenStrings(bundle)` is keksdose's `budget.rta`, `flattenStrings(tree, \"common:\")`\n * kastlan's `common:actions.save`, and `flattenStrings(kitLabelStrings(labels), \"kit.\")`\n * the kit's own words as `kit.combobox.resultCount(3)` — already flat, so only the prefix\n * is added.\n */\nexport function flattenStrings(tree: Readonly<Record<string, unknown>>, prefix = \"\"): Record<string, string> {\n  const out: Record<string, string> = {};\n  for (const [key, value] of Object.entries(tree)) {\n    const path = `${prefix}${key}`;\n    if (typeof value === \"string\") out[path] = value;\n    else if (value && typeof value === \"object\" && !Array.isArray(value)) {\n      Object.assign(out, flattenStrings(value as Record<string, unknown>, `${path}.`));\n    }\n  }\n  return out;\n}\n\n/**\n * The key's group, for the namespace filter: the part before a colon when there is one\n * (kastlan's `common:actions.save` → `common`, `doc_text.invoice:due` →\n * `doc_text.invoice`), else the first dotted segment (keksdose's `budget.rta` →\n * `budget`, the kit's `kit.combobox.resultCount(3)` → `kit`). Only the part before a\n * sample's `(` is looked at, so a colon inside one cannot move the split.\n */\nexport function keyNamespace(key: string): string {\n  const head = key.split(\"(\", 1)[0];\n  const colon = head.indexOf(\":\");\n  return colon >= 0 ? head.slice(0, colon) : head.split(\".\", 1)[0];\n}\n\n// i18next `{{x}}` (formatting options ignored: `{{x, number}}` is `{{x}}`); a Python\n// format field `{x}` / `{0}` / `{amount:.2f}` (kastlan's document texts), but not a\n// LaTeX argument (`\\textbf{x}` — a letter or backslash right before the brace); a\n// numbered or named tag (`<1>`, `<strong>`), not prose in angle brackets (\"<deleted\n// user>\"); and a nested `$t(key)`. `{{x}}` is tried first at its position and consumed\n// whole, so it is never counted a second time as `{x}`.\nconst PLACEHOLDER_RE =\n  /\\{\\{\\s*([^}\\s,]+)[^}]*\\}\\}|(?<![\\\\A-Za-z])\\{([a-z_][a-z0-9_]*|\\d+)(?:[!:][^{}]*)?\\}|<\\/?(\\d+|[a-z][a-z0-9]*)\\s*\\/?>|\\$t\\(([^)]+)\\)/g;\n\n/** The placeholders in a string, as a sorted multiset: `{{count}}`, `{date}`, `<1>`,\n *  `$t(common.save)`. */\nexport function placeholderTokens(text: string): string[] {\n  const found: string[] = [];\n  for (const m of text.matchAll(PLACEHOLDER_RE)) {\n    if (m[1]) found.push(`{{${m[1]}}}`);\n    else if (m[2]) found.push(`{${m[2]}}`);\n    else if (m[3]) found.push(`<${m[3]}>`);\n    else if (m[4]) found.push(`$t(${m[4]})`);\n  }\n  return found.sort();\n}\n\n/** Whether `text` has other placeholders than `reference` — dropped, renamed or added.\n *  Moving one is fine: a translation reorders a sentence. */\nexport function placeholderMismatch(text: string, reference: string): boolean {\n  const a = placeholderTokens(text);\n  const b = placeholderTokens(reference);\n  return a.length !== b.length || a.some((p, i) => p !== b[i]);\n}\n\n// ── Status ──────────────────────────────────────────────────────────────────────\n\n/**\n * A verdict counts only for the wording it was given on. If the string or its reference\n * changed since, it is `changed` — read it again — whatever the verdict was. A string the\n * locale lacks is `missing` until somebody suggests its translation (stored as\n * NEEDS_CHANGE on the empty text, so it reads `needs_change`, and `changed` once a\n * developer adds the string).\n */\nexport function reviewStatus(\n  review: TranslationReview | null | undefined,\n  text: string,\n  reference: string,\n): ReviewStatus {\n  if (!review) return text === \"\" && reference !== \"\" ? \"missing\" : \"unreviewed\";\n  if (review.text !== text) return \"changed\";\n  if (review.referenceText != null && review.referenceText !== reference) return \"changed\";\n  return review.verdict === \"APPROVED\" ? \"approved\" : \"needs_change\";\n}\n\n/** Whether `key` lies in `area`: the key IS the area, or sits under it — `legal.terms`\n *  and kastlan's `legal:terms` are in `legal`, `legalese.title` is not. */\nexport function keyInArea(key: string, area: string): boolean {\n  return key === area || key.startsWith(`${area}.`) || key.startsWith(`${area}:`);\n}\n\n/**\n * Whether `key` lies in one of `areas` — the scope a reviewer may be limited to\n * (keksdose: `[\"legal\"]`, a lawyer who judges the Imprint, the Privacy Policy and the\n * Terms and sees nothing else). `null`/`undefined` is every area. The server applies the\n * same rule and refuses verdicts outside; this decides only what is listed.\n */\nexport function keyInAreas(\n  key: string,\n  areas: readonly string[] | null | undefined,\n  inArea: (key: string, area: string) => boolean = keyInArea,\n): boolean {\n  return !areas || areas.some((area) => inArea(key, area));\n}\n\nexport interface TranslationRowsInput {\n  locale: string;\n  /** The locale's strings, `key → text` ({@link flattenStrings}). */\n  strings: Readonly<Record<string, string>>;\n  /** The reference locale's strings — whichever locale THIS app reads `locale` against. */\n  reference: Readonly<Record<string, string>>;\n  /** The verdicts: this locale's by key, or the whole list as the server sent it (other\n   *  locales' verdicts are skipped). */\n  reviews?: ReadonlyMap<string, TranslationReview> | readonly TranslationReview[];\n  /** Default {@link keyNamespace}. */\n  namespaceOf?: (key: string) => string;\n  /** The row's source, an app-defined word (kastlan: `doc_text.` keys are `documents`,\n   *  the rest `screen`). Default: none (`\"\"`). */\n  sourceOf?: (key: string) => string;\n  /** Keep only keys inside these areas ({@link keyInAreas}); `null` keeps every key. */\n  areas?: readonly string[] | null;\n  /** Default {@link keyInArea}. */\n  inArea?: (key: string, area: string) => boolean;\n}\n\n/**\n * Every key of one locale, with its status: the reference's keys first, in its order, so\n * rows read the way the app's authors wrote them; a key only this locale has is appended\n * rather than dropped (a parity test should forbid it, but the page should not lie if one\n * slips through).\n */\nexport function translationRows({\n  locale,\n  strings,\n  reference,\n  reviews,\n  namespaceOf: groupOf = keyNamespace,\n  sourceOf,\n  areas,\n  inArea,\n}: TranslationRowsInput): TranslationRow[] {\n  const byKey = new Map<string, TranslationReview>();\n  if (reviews instanceof Map) {\n    for (const [key, review] of reviews) byKey.set(key, review);\n  } else if (reviews) {\n    for (const review of reviews as readonly TranslationReview[]) {\n      if (review.locale === locale) byKey.set(review.key, review);\n    }\n  }\n  const keys = Object.keys(reference);\n  for (const key of Object.keys(strings)) if (!(key in reference)) keys.push(key);\n  return keys\n    .filter((key) => keyInAreas(key, areas, inArea))\n    .map((key) => {\n      const text = strings[key] ?? \"\";\n      const ref = reference[key] ?? \"\";\n      const review = byKey.get(key) ?? null;\n      return {\n        id: `${locale}|${key}`,\n        key,\n        namespace: groupOf(key),\n        source: sourceOf?.(key) ?? \"\",\n        locale,\n        text,\n        reference: ref,\n        status: reviewStatus(review, text, ref),\n        review,\n        placeholderMismatch: text !== \"\" && placeholderMismatch(text, ref),\n      };\n    });\n}\n\n/** How many rows stand where, and how many there are. */\nexport type TranslationSummary = Record<ReviewStatus, number> & { total: number };\n\nexport function summariseRows(rows: readonly TranslationRow[]): TranslationSummary {\n  const summary: TranslationSummary = {\n    missing: 0,\n    unreviewed: 0,\n    changed: 0,\n    needs_change: 0,\n    approved: 0,\n    total: rows.length,\n  };\n  for (const row of rows) summary[row.status] += 1;\n  return summary;\n}\n\n// ── Filtering ───────────────────────────────────────────────────────────────────\n\n/** The panel's filters. `\"all\"` switches one off. */\nexport interface TranslationReviewFilter {\n  status: ReviewStatus | \"all\";\n  source: string;\n  namespace: string;\n  /** Searched in the key, the text and the reference, case-insensitively. */\n  query: string;\n  placeholdersOnly: boolean;\n}\n\nexport const DEFAULT_TRANSLATION_REVIEW_FILTER: TranslationReviewFilter = {\n  status: \"all\",\n  source: \"all\",\n  namespace: \"all\",\n  query: \"\",\n  placeholdersOnly: false,\n};\n\nexport function filterTranslationRows(\n  rows: readonly TranslationRow[],\n  filter: Partial<TranslationReviewFilter>,\n): TranslationRow[] {\n  const f = { ...DEFAULT_TRANSLATION_REVIEW_FILTER, ...filter };\n  const q = f.query.trim().toLowerCase();\n  return rows.filter(\n    (row) =>\n      (f.status === \"all\" || row.status === f.status) &&\n      (f.source === \"all\" || row.source === f.source) &&\n      (f.namespace === \"all\" || row.namespace === f.namespace) &&\n      (!f.placeholdersOnly || row.placeholderMismatch) &&\n      (!q ||\n        row.key.toLowerCase().includes(q) ||\n        row.text.toLowerCase().includes(q) ||\n        row.reference.toLowerCase().includes(q)),\n  );\n}\n\n// ── Writing ─────────────────────────────────────────────────────────────────────\n\n/** What gets stored for a verdict: the wording it was given on, so a later change of the\n *  string (or of its reference) shows up as `changed`. */\nexport function reviewWrite(\n  row: TranslationRow,\n  verdict: TranslationVerdict,\n  note: string | null = null,\n  suggestion: string | null = null,\n): TranslationReviewWrite {\n  return {\n    locale: row.locale,\n    key: row.key,\n    text: row.text,\n    referenceText: row.reference,\n    verdict,\n    note,\n    suggestion,\n  };\n}\n\n/** The app's cached verdict list with `written` in place of what was said before — a\n *  save answers with the rows it wrote, so a page patches its copy instead of\n *  downloading every verdict again after each click. Any spelling with `locale` and\n *  `key` (the API's or the kit's). */\nexport function mergeReviews<T extends TranslationReviewKey>(prev: readonly T[], written: readonly T[]): T[] {\n  const id = (r: TranslationReviewKey) => `${r.locale}|${r.key}`;\n  const replaced = new Set(written.map(id));\n  return [...prev.filter((r) => !replaced.has(id(r))), ...written];\n}\n\n/** The cached list without the verdicts on `cleared`. */\nexport function dropReviews<T extends TranslationReviewKey>(\n  prev: readonly T[],\n  cleared: readonly TranslationReviewKey[],\n): T[] {\n  const gone = new Set(cleared.map((r) => `${r.locale}|${r.key}`));\n  return prev.filter((r) => !gone.has(`${r.locale}|${r.key}`));\n}\n\n// ── Export ──────────────────────────────────────────────────────────────────────\n\n/**\n * One entry of the \"Export corrections\" file — enough for a developer to apply the change\n * to the bundle without opening the page. snake_case `reviewed_at` on purpose: this is a\n * FILE, the one keksdose and kastlan already write, beside an API spelled that way.\n */\nexport interface TranslationCorrection {\n  locale: string;\n  key: string;\n  status: ReviewStatus;\n  current: string;\n  reference: string;\n  suggestion: string | null;\n  note: string | null;\n  reviewer: string | null;\n  reviewed_at: string | null;\n}\n\n/** The rows sent back (verdict NEEDS_CHANGE — a suggested translation for a missing\n *  string included), as the export file lists them. */\nexport function translationCorrections(rows: readonly TranslationRow[]): TranslationCorrection[] {\n  return rows\n    .filter((row) => row.review?.verdict === \"NEEDS_CHANGE\")\n    .map((row) => ({\n      locale: row.locale,\n      key: row.key,\n      status: row.status,\n      current: row.text,\n      reference: row.reference,\n      suggestion: row.review?.suggestion ?? null,\n      note: row.review?.note ?? null,\n      reviewer: row.review?.reviewerName ?? null,\n      reviewed_at: row.review?.reviewedAt ?? null,\n    }));\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/lib/translation-review.ts"],"sourcesContent":["/**\n * The pure half of an app's translation review (H1 in docs/i18n-harmonization.md): from\n * the strings the app ships and the verdicts its server stores to one row per (locale,\n * key) with a status — keksdose's `features/translations/translation-catalogue.ts` and\n * kastlan's copy of it, which had grown apart by a fifth status and a second kind of key.\n *\n * WHY THE STRINGS ARE THE CATALOGUE. Nothing on the server lists which strings exist: a\n * verdict only says what somebody thought of one. So the rows are built from what the app\n * ships — its locale bundles, kastlan's document texts, the kit's own words\n * (`kitLabelStrings`) — and the review can never offer a string users do not see. A\n * verdict is stored WITH the wording it was given on, and a string that changed since is\n * noticed by comparing the two: `changed`, read it again, whatever the verdict was.\n *\n * WHAT STAYS IN THE APP. Which locale is read against which (keksdose: everything against\n * English, English against de-CH; kastlan: against German, German against English), where\n * the strings come from, who may review what (the locales and areas its server answers\n * with), and every request. The kit takes those as input and never derives them.\n *\n * camelCase, like the rest of the kit. The contract's wire shape is snake_case\n * (`reference_text`, `reviewer_name`, `reviewed_at`); {@link fromApiReview} and\n * {@link toApiWrite} are the two lines each app would otherwise write — both apps speak\n * the same contract, so the mapping is written once, here.\n */\n\n// ── Shapes ──────────────────────────────────────────────────────────────────────\n\nexport type TranslationVerdict = \"APPROVED\" | \"NEEDS_CHANGE\";\n\n/** One stored verdict: what a reviewer said about one string in one locale. */\nexport interface TranslationReview {\n  locale: string;\n  key: string;\n  /** The wording that was judged — compared with today's to notice a change. Empty for\n   *  a string the locale lacked (a suggested translation for a `missing` row). */\n  text: string;\n  /** The reference wording at the time. `null` from a server that did not store it. */\n  referenceText: string | null;\n  verdict: TranslationVerdict;\n  note: string | null;\n  /** The reviewer's wording — or, for a missing string, the translation to add. */\n  suggestion: string | null;\n  /** `null` once the reviewer's account has been erased. */\n  reviewerName: string | null;\n  /** ISO timestamp. */\n  reviewedAt: string;\n}\n\n/** What a save sends: the verdict plus the wording it is given on. */\nexport interface TranslationReviewWrite {\n  locale: string;\n  key: string;\n  text: string;\n  referenceText: string | null;\n  verdict: TranslationVerdict;\n  note: string | null;\n  suggestion: string | null;\n}\n\n/** What a reset sends: back to \"unreviewed\". */\nexport interface TranslationReviewKey {\n  locale: string;\n  key: string;\n}\n\n/**\n * Where a string stands, in the order a reviewer works through them: what is not there\n * at all, what nobody has read, what changed after it was read, what was sent back, and\n * what is done. `missing` never occurs for an app whose locales have every key\n * (keksdose); kastlan's French lacks 172 screen texts.\n */\nexport type ReviewStatus = \"missing\" | \"unreviewed\" | \"changed\" | \"needs_change\" | \"approved\";\n\nexport const REVIEW_STATUSES: readonly ReviewStatus[] = [\n  \"missing\",\n  \"unreviewed\",\n  \"changed\",\n  \"needs_change\",\n  \"approved\",\n];\n\nexport interface TranslationRow {\n  /** `${locale}|${key}` — unique across every locale on a page. A bar, not a colon:\n   *  kastlan's keys contain colons (`common:actions.save`). */\n  id: string;\n  key: string;\n  /** The key's group: `budget` for `budget.rta`, `common` for `common:actions.save`,\n   *  `kit` for the kit's own words. See {@link keyNamespace}. */\n  namespace: string;\n  /** Where the string comes from, in the app's own words — kastlan's `screen` and\n   *  `documents`, keksdose's one source. `\"\"` when the app does not say. */\n  source: string;\n  locale: string;\n  /** The wording users see today; empty when the locale lacks the string. */\n  text: string;\n  /** The same key in the reference locale. */\n  reference: string;\n  status: ReviewStatus;\n  review: TranslationReview | null;\n  /** The interpolations and tags differ from the reference's — `{{count}}` dropped, a\n   *  `<1>` link lost, a `{date}` renamed. A machine can check that much, so it does,\n   *  before a person reads. Never set on a missing string: it has nothing to lose. */\n  placeholderMismatch: boolean;\n}\n\n// ── The wire contract ───────────────────────────────────────────────────────────\n\n/** A verdict as `GET /translations/reviews` returns it (H1's shared contract). Typed\n *  structurally, so an app's generated OpenAPI type fits without a cast. */\nexport interface ApiTranslationReview {\n  locale: string;\n  key: string;\n  text: string;\n  reference_text: string | null;\n  verdict: TranslationVerdict;\n  note: string | null;\n  suggestion: string | null;\n  reviewer_name: string | null;\n  reviewed_at: string;\n}\n\n/** One item of `PUT /translations/reviews`. */\nexport interface ApiTranslationReviewWrite {\n  locale: string;\n  key: string;\n  text: string;\n  reference_text: string | null;\n  verdict: TranslationVerdict;\n  note: string | null;\n  suggestion: string | null;\n}\n\n/** A verdict from the server, in the kit's spelling. */\nexport function fromApiReview(review: ApiTranslationReview): TranslationReview {\n  return {\n    locale: review.locale,\n    key: review.key,\n    text: review.text,\n    referenceText: review.reference_text,\n    verdict: review.verdict,\n    note: review.note,\n    suggestion: review.suggestion,\n    reviewerName: review.reviewer_name,\n    reviewedAt: review.reviewed_at,\n  };\n}\n\n/** A save, in the server's spelling. `TranslationReviewKey` needs no mapping — it is\n *  `{ locale, key }` on both sides. */\nexport function toApiWrite(write: TranslationReviewWrite): ApiTranslationReviewWrite {\n  return {\n    locale: write.locale,\n    key: write.key,\n    text: write.text,\n    reference_text: write.referenceText,\n    verdict: write.verdict,\n    note: write.note,\n    suggestion: write.suggestion,\n  };\n}\n\n// ── Strings ─────────────────────────────────────────────────────────────────────\n\n/**\n * A nested bundle as `key → string`, in the bundle's own order. Non-string leaves are\n * skipped rather than stringified into something nobody wrote.\n *\n * `prefix` is put in front of every key AS IS, so it names the separator too:\n * `flattenStrings(bundle)` is keksdose's `budget.rta`, `flattenStrings(tree, \"common:\")`\n * kastlan's `common:actions.save`, and `flattenStrings(kitLabelStrings(labels), \"kit.\")`\n * the kit's own words as `kit.combobox.resultCount(3)` — already flat, so only the prefix\n * is added.\n */\nexport function flattenStrings(tree: Readonly<Record<string, unknown>>, prefix = \"\"): Record<string, string> {\n  const out: Record<string, string> = {};\n  for (const [key, value] of Object.entries(tree)) {\n    const path = `${prefix}${key}`;\n    if (typeof value === \"string\") out[path] = value;\n    else if (value && typeof value === \"object\" && !Array.isArray(value)) {\n      Object.assign(out, flattenStrings(value as Record<string, unknown>, `${path}.`));\n    }\n  }\n  return out;\n}\n\n/**\n * The key's group, for the namespace filter: the part before a colon when there is one\n * (kastlan's `common:actions.save` → `common`, `doc_text.invoice:due` →\n * `doc_text.invoice`), else the first dotted segment (keksdose's `budget.rta` →\n * `budget`, the kit's `kit.combobox.resultCount(3)` → `kit`). Only the part before a\n * sample's `(` is looked at, so a colon inside one cannot move the split.\n */\nexport function keyNamespace(key: string): string {\n  const head = key.split(\"(\", 1)[0];\n  const colon = head.indexOf(\":\");\n  return colon >= 0 ? head.slice(0, colon) : head.split(\".\", 1)[0];\n}\n\n// i18next `{{x}}` (formatting options ignored: `{{x, number}}` is `{{x}}`); a Python\n// format field `{x}` / `{0}` / `{amount:.2f}` (kastlan's document texts), but not a\n// LaTeX argument (`\\textbf{x}` — a letter or backslash right before the brace); a\n// numbered or named tag (`<1>`, `<strong>`), not prose in angle brackets (\"<deleted\n// user>\"); and a nested `$t(key)`. `{{x}}` is tried first at its position and consumed\n// whole, so it is never counted a second time as `{x}`.\nconst PLACEHOLDER_RE =\n  /\\{\\{\\s*([^}\\s,]+)[^}]*\\}\\}|(?<![\\\\A-Za-z])\\{([a-z_][a-z0-9_]*|\\d+)(?:[!:][^{}]*)?\\}|<\\/?(\\d+|[a-z][a-z0-9]*)\\s*\\/?>|\\$t\\(([^)]+)\\)/g;\n\n/** The placeholders in a string, as a sorted multiset: `{{count}}`, `{date}`, `<1>`,\n *  `$t(common.save)`. */\nexport function placeholderTokens(text: string): string[] {\n  const found: string[] = [];\n  for (const m of text.matchAll(PLACEHOLDER_RE)) {\n    if (m[1]) found.push(`{{${m[1]}}}`);\n    else if (m[2]) found.push(`{${m[2]}}`);\n    else if (m[3]) found.push(`<${m[3]}>`);\n    else if (m[4]) found.push(`$t(${m[4]})`);\n  }\n  return found.sort();\n}\n\n/** Whether `text` has other placeholders than `reference` — dropped, renamed or added.\n *  Moving one is fine: a translation reorders a sentence. */\nexport function placeholderMismatch(text: string, reference: string): boolean {\n  const a = placeholderTokens(text);\n  const b = placeholderTokens(reference);\n  return a.length !== b.length || a.some((p, i) => p !== b[i]);\n}\n\n// ── Status ──────────────────────────────────────────────────────────────────────\n\n/**\n * A verdict counts only for the wording it was given on. If the string or its reference\n * changed since, it is `changed` — read it again — whatever the verdict was. A string the\n * locale lacks is `missing` until somebody suggests its translation (stored as\n * NEEDS_CHANGE on the empty text, so it reads `needs_change`, and `changed` once a\n * developer adds the string).\n */\nexport function reviewStatus(\n  review: TranslationReview | null | undefined,\n  text: string,\n  reference: string,\n): ReviewStatus {\n  if (!review) return text === \"\" && reference !== \"\" ? \"missing\" : \"unreviewed\";\n  if (review.text !== text) return \"changed\";\n  if (review.referenceText != null && review.referenceText !== reference) return \"changed\";\n  return review.verdict === \"APPROVED\" ? \"approved\" : \"needs_change\";\n}\n\n/** Whether `key` lies in `area`: the key IS the area, or sits under it — `legal.terms`\n *  and kastlan's `legal:terms` are in `legal`, `legalese.title` is not. */\nexport function keyInArea(key: string, area: string): boolean {\n  return key === area || key.startsWith(`${area}.`) || key.startsWith(`${area}:`);\n}\n\n/**\n * Whether `key` lies in one of `areas` — the scope a reviewer may be limited to\n * (keksdose: `[\"legal\"]`, a lawyer who judges the Imprint, the Privacy Policy and the\n * Terms and sees nothing else). `null`/`undefined` is every area. The server applies the\n * same rule and refuses verdicts outside; this decides only what is listed.\n */\nexport function keyInAreas(\n  key: string,\n  areas: readonly string[] | null | undefined,\n  inArea: (key: string, area: string) => boolean = keyInArea,\n): boolean {\n  return !areas || areas.some((area) => inArea(key, area));\n}\n\nexport interface TranslationRowsInput {\n  locale: string;\n  /** The locale's strings, `key → text` ({@link flattenStrings}). */\n  strings: Readonly<Record<string, string>>;\n  /** The reference locale's strings — whichever locale THIS app reads `locale` against. */\n  reference: Readonly<Record<string, string>>;\n  /** The verdicts: this locale's by key, or the whole list as the server sent it (other\n   *  locales' verdicts are skipped). */\n  reviews?: ReadonlyMap<string, TranslationReview> | readonly TranslationReview[];\n  /** Default {@link keyNamespace}. */\n  namespaceOf?: (key: string) => string;\n  /** The row's source, an app-defined word (kastlan: `doc_text.` keys are `documents`,\n   *  the rest `screen`). Default: none (`\"\"`). */\n  sourceOf?: (key: string) => string;\n  /** Keep only keys inside these areas ({@link keyInAreas}); `null` keeps every key. */\n  areas?: readonly string[] | null;\n  /** Default {@link keyInArea}. */\n  inArea?: (key: string, area: string) => boolean;\n}\n\n/**\n * Every key of one locale, with its status: the reference's keys first, in its order, so\n * rows read the way the app's authors wrote them; a key only this locale has is appended\n * rather than dropped (a parity test should forbid it, but the page should not lie if one\n * slips through).\n */\nexport function translationRows({\n  locale,\n  strings,\n  reference,\n  reviews,\n  namespaceOf: groupOf = keyNamespace,\n  sourceOf,\n  areas,\n  inArea,\n}: TranslationRowsInput): TranslationRow[] {\n  const byKey = new Map<string, TranslationReview>();\n  if (reviews instanceof Map) {\n    for (const [key, review] of reviews) byKey.set(key, review);\n  } else if (reviews) {\n    for (const review of reviews as readonly TranslationReview[]) {\n      if (review.locale === locale) byKey.set(review.key, review);\n    }\n  }\n  const keys = Object.keys(reference);\n  for (const key of Object.keys(strings)) if (!(key in reference)) keys.push(key);\n  return keys\n    .filter((key) => keyInAreas(key, areas, inArea))\n    .map((key) => {\n      const text = strings[key] ?? \"\";\n      const ref = reference[key] ?? \"\";\n      const review = byKey.get(key) ?? null;\n      return {\n        id: `${locale}|${key}`,\n        key,\n        namespace: groupOf(key),\n        source: sourceOf?.(key) ?? \"\",\n        locale,\n        text,\n        reference: ref,\n        status: reviewStatus(review, text, ref),\n        review,\n        placeholderMismatch: text !== \"\" && placeholderMismatch(text, ref),\n      };\n    });\n}\n\n/** How many rows stand where, and how many there are. */\nexport type TranslationSummary = Record<ReviewStatus, number> & { total: number };\n\nexport function summariseRows(rows: readonly TranslationRow[]): TranslationSummary {\n  const summary: TranslationSummary = {\n    missing: 0,\n    unreviewed: 0,\n    changed: 0,\n    needs_change: 0,\n    approved: 0,\n    total: rows.length,\n  };\n  for (const row of rows) summary[row.status] += 1;\n  return summary;\n}\n\n// ── Filtering ───────────────────────────────────────────────────────────────────\n\n/** The panel's filters. `\"all\"` switches one off. */\nexport interface TranslationReviewFilter {\n  status: ReviewStatus | \"all\";\n  source: string;\n  namespace: string;\n  /** Searched in the key, the text and the reference, case-insensitively. */\n  query: string;\n  placeholdersOnly: boolean;\n}\n\nexport const DEFAULT_TRANSLATION_REVIEW_FILTER: TranslationReviewFilter = {\n  status: \"all\",\n  source: \"all\",\n  namespace: \"all\",\n  query: \"\",\n  placeholdersOnly: false,\n};\n\nexport function filterTranslationRows(\n  rows: readonly TranslationRow[],\n  filter: Partial<TranslationReviewFilter>,\n): TranslationRow[] {\n  const f = { ...DEFAULT_TRANSLATION_REVIEW_FILTER, ...filter };\n  const q = f.query.trim().toLowerCase();\n  return rows.filter(\n    (row) =>\n      (f.status === \"all\" || row.status === f.status) &&\n      (f.source === \"all\" || row.source === f.source) &&\n      (f.namespace === \"all\" || row.namespace === f.namespace) &&\n      (!f.placeholdersOnly || row.placeholderMismatch) &&\n      (!q ||\n        row.key.toLowerCase().includes(q) ||\n        row.text.toLowerCase().includes(q) ||\n        row.reference.toLowerCase().includes(q)),\n  );\n}\n\n// ── Grouping ────────────────────────────────────────────────────────────────────\n\n/** One group of rows — an area, a source — and how they stand. */\nexport interface TranslationRowGroup {\n  key: string;\n  rows: TranslationRow[];\n  summary: TranslationSummary;\n}\n\n/**\n * Rows in groups, each group where its first row is — the reference's order, so the areas\n * read the way the app's authors wrote the bundle — and each group's rows in their own\n * order. keksdose live #377: a reviewer on a phone works area by area (\"the budget\n * strings, then the legal ones\"), and a flat list of 3859 rows is not a way to see\n * where an area stands.\n *\n * `groupOf` names a row's group: `(row) => row.namespace` for the areas,\n * `(row) => row.source` for kastlan's screen texts and documents.\n */\nexport function groupTranslationRows(\n  rows: readonly TranslationRow[],\n  groupOf: (row: TranslationRow) => string,\n): TranslationRowGroup[] {\n  const byKey = new Map<string, TranslationRow[]>();\n  for (const row of rows) {\n    const key = groupOf(row);\n    const list = byKey.get(key);\n    if (list) list.push(row);\n    else byKey.set(key, [row]);\n  }\n  return [...byKey].map(([key, list]) => ({ key, rows: list, summary: summariseRows(list) }));\n}\n\n/**\n * The rows a group's \"Approve the unreviewed\" takes: the ones nobody has given a verdict\n * and that have a text. Not `changed` — a string that moved since it was judged asks to\n * be READ again, which a bulk action is the opposite of — and not `missing`, which has\n * nothing to approve.\n */\nexport function unreviewedRows(rows: readonly TranslationRow[]): TranslationRow[] {\n  return rows.filter((row) => row.status === \"unreviewed\" && row.text !== \"\");\n}\n\n// ── Writing ─────────────────────────────────────────────────────────────────────\n\n/** What gets stored for a verdict: the wording it was given on, so a later change of the\n *  string (or of its reference) shows up as `changed`. */\nexport function reviewWrite(\n  row: TranslationRow,\n  verdict: TranslationVerdict,\n  note: string | null = null,\n  suggestion: string | null = null,\n): TranslationReviewWrite {\n  return {\n    locale: row.locale,\n    key: row.key,\n    text: row.text,\n    referenceText: row.reference,\n    verdict,\n    note,\n    suggestion,\n  };\n}\n\n/** What takes a set of verdicts back: see {@link reviewUndo}. */\nexport interface TranslationReviewUndo {\n  /** The verdicts the rows had before, to store again — each on the wording it was\n   *  given on, so a row that was `changed` reads `changed` again. */\n  writes: TranslationReviewWrite[];\n  /** The rows that had no verdict before: back to unreviewed. */\n  clears: TranslationReviewKey[];\n}\n\n/**\n * How to take back what was just said about `rows` — the rows AS THEY WERE before the\n * write, with the verdicts they carried then. The panel's Undo toast (0.25, keksdose live\n * #377) runs it: a swipe on a phone approves in one movement, and a movement can be a\n * mistake.\n *\n * A row that had a verdict gets it stored again (its note, its suggestion, the wording it\n * was judged on); one that had none is cleared. The server stamps the restored verdict\n * with the person undoing and the time, as it stamps every write — the contract has no\n * way to write a verdict in somebody else's name, and should not.\n */\nexport function reviewUndo(rows: readonly TranslationRow[]): TranslationReviewUndo {\n  const writes: TranslationReviewWrite[] = [];\n  const clears: TranslationReviewKey[] = [];\n  for (const row of rows) {\n    const before = row.review;\n    if (!before) {\n      clears.push({ locale: row.locale, key: row.key });\n      continue;\n    }\n    writes.push({\n      locale: row.locale,\n      key: row.key,\n      text: before.text,\n      referenceText: before.referenceText,\n      verdict: before.verdict,\n      note: before.note,\n      suggestion: before.suggestion,\n    });\n  }\n  return { writes, clears };\n}\n\n/** The app's cached verdict list with `written` in place of what was said before — a\n *  save answers with the rows it wrote, so a page patches its copy instead of\n *  downloading every verdict again after each click. Any spelling with `locale` and\n *  `key` (the API's or the kit's). */\nexport function mergeReviews<T extends TranslationReviewKey>(prev: readonly T[], written: readonly T[]): T[] {\n  const id = (r: TranslationReviewKey) => `${r.locale}|${r.key}`;\n  const replaced = new Set(written.map(id));\n  return [...prev.filter((r) => !replaced.has(id(r))), ...written];\n}\n\n/** The cached list without the verdicts on `cleared`. */\nexport function dropReviews<T extends TranslationReviewKey>(\n  prev: readonly T[],\n  cleared: readonly TranslationReviewKey[],\n): T[] {\n  const gone = new Set(cleared.map((r) => `${r.locale}|${r.key}`));\n  return prev.filter((r) => !gone.has(`${r.locale}|${r.key}`));\n}\n\n// ── Export ──────────────────────────────────────────────────────────────────────\n\n/**\n * One entry of the \"Export corrections\" file — enough for a developer to apply the change\n * to the bundle without opening the page. snake_case `reviewed_at` on purpose: this is a\n * FILE, the one keksdose and kastlan already write, beside an API spelled that way.\n */\nexport interface TranslationCorrection {\n  locale: string;\n  key: string;\n  status: ReviewStatus;\n  current: string;\n  reference: string;\n  suggestion: string | null;\n  note: string | null;\n  reviewer: string | null;\n  reviewed_at: string | null;\n}\n\n/** The rows sent back (verdict NEEDS_CHANGE — a suggested translation for a missing\n *  string included), as the export file lists them. */\nexport function translationCorrections(rows: readonly TranslationRow[]): TranslationCorrection[] {\n  return rows\n    .filter((row) => row.review?.verdict === \"NEEDS_CHANGE\")\n    .map((row) => ({\n      locale: row.locale,\n      key: row.key,\n      status: row.status,\n      current: row.text,\n      reference: row.reference,\n      suggestion: row.review?.suggestion ?? null,\n      note: row.review?.note ?? null,\n      reviewer: row.review?.reviewerName ?? null,\n      reviewed_at: row.review?.reviewedAt ?? null,\n    }));\n}\n"],"mappings":"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","names":[]}

package/dist/rhf/fields.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
 import { FieldValues, FieldPath, ControllerProps, ControllerRenderProps, ControllerFieldState } from 'react-hook-form';
-import { bK as IbanInputProps, c5 as PhoneInputProps, c9 as SelectProps, bU as InputProps, cu as TextareaProps } from '../feedback-DOwPu-Il.js';
+import { bK as IbanInputProps, c5 as PhoneInputProps, c9 as SelectProps, bU as InputProps, cu as TextareaProps } from '../feedback-BXKH-ToU.js';
 import { NumberFieldProps } from '../components/number-field.js';
 import { DatePickerProps, DateRangePickerProps } from '../components/date-picker.js';
 import { TimeInputProps } from '../components/time-input.js';
@@ -15,7 +15,7 @@ import { ComboClearValue } from '../components/combobox-core.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-B7OdnM0S.js';
+import '../data-table-labels-Cdn1QS2k.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
 import '../components/mini-calendar.js';

package/dist/rhf/form.d.ts

@@ -2,11 +2,11 @@ import * as react from 'react';
 import { ReactElement, ComponentProps } from 'react';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
-import { b$ as LabelProps } from '../feedback-DOwPu-Il.js';
+import { b$ as LabelProps } from '../feedback-BXKH-ToU.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-B7OdnM0S.js';
+import '../data-table-labels-Cdn1QS2k.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
 import '../components/mini-calendar.js';

package/dist/rhf.d.ts

@@ -4,11 +4,11 @@ export { RhfCheckbox, RhfCheckboxProps, RhfCombobox, RhfComboboxProps, RhfCountr
 export { RhfLineItemCellContext, RhfLineItems, RhfLineItemsColumn, RhfLineItemsProps } from './rhf/line-items.js';
 import 'react';
 import 'react-hook-form';
-import './feedback-DOwPu-Il.js';
+import './feedback-BXKH-ToU.js';
 import './components/tooltip.js';
 import './hooks/use-anchored-rect.js';
 import './lib/clipping.js';
-import './data-table-labels-B7OdnM0S.js';
+import './data-table-labels-Cdn1QS2k.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
 import './components/mini-calendar.js';

package/dist/shell/app-shell.d.ts

@@ -1,11 +1,11 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { LucideIcon } from 'lucide-react';
-import { bX as KitLinkComponent } from '../feedback-DOwPu-Il.js';
+import { bX as KitLinkComponent } from '../feedback-BXKH-ToU.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-B7OdnM0S.js';
+import '../data-table-labels-Cdn1QS2k.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
 import '../components/mini-calendar.js';

package/dist/shell/top-bar-brand.d.ts

@@ -1,10 +1,10 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { bY as KitLinkProps, bX as KitLinkComponent } from '../feedback-DOwPu-Il.js';
+import { bY as KitLinkProps, bX as KitLinkComponent } from '../feedback-BXKH-ToU.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-B7OdnM0S.js';
+import '../data-table-labels-Cdn1QS2k.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
 import '../components/mini-calendar.js';

package/dist/shell.d.ts

@@ -13,11 +13,11 @@ import './theme/theme-store.js';
 import 'zustand/middleware';
 import 'zustand';
 import 'lucide-react';
-import './feedback-DOwPu-Il.js';
+import './feedback-BXKH-ToU.js';
 import './components/tooltip.js';
 import './hooks/use-anchored-rect.js';
 import './lib/clipping.js';
-import './data-table-labels-B7OdnM0S.js';
+import './data-table-labels-Cdn1QS2k.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
 import './components/mini-calendar.js';

package/dist/wizard/stepper-nav.d.ts

@@ -1,11 +1,11 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { f as ButtonVariant } from '../feedback-DOwPu-Il.js';
+import { f as ButtonVariant } from '../feedback-BXKH-ToU.js';
 import { UseWizardReturn, WizardLabels } from './types.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-B7OdnM0S.js';
+import '../data-table-labels-Cdn1QS2k.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
 import '../components/mini-calendar.js';

package/dist/wizard.d.ts

@@ -6,11 +6,11 @@ export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './feedback-DOwPu-Il.js';
+import './feedback-BXKH-ToU.js';
 import './components/tooltip.js';
 import './hooks/use-anchored-rect.js';
 import './lib/clipping.js';
-import './data-table-labels-B7OdnM0S.js';
+import './data-table-labels-Cdn1QS2k.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
 import './components/mini-calendar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.24.1",
+  "version": "0.25.1",
   "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/column-mapper.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useEffectEvent, useRef, useState } from "react";
+import { useEffect, useEffectEvent, useState } from "react";
 import type { ChangeEvent, DragEvent, HTMLAttributes, ReactNode } from "react";
 import { Upload } from "lucide-react";
 
@@ -17,7 +17,6 @@ import type {
   ColumnMapping,
   ColumnRole,
 } from "../lib/column-mapping";
-import { scrollIntoStrip, useStripFade } from "../lib/strip-fade";
 import { parseTextTable } from "../lib/table-text";
 import type { TableSeparator, TextTable } from "../lib/table-text";
 import { AlertBanner } from "./alert-banner";
@@ -102,8 +101,16 @@ export interface ColumnMapperLabels {
   /** The role select's "no role" option. */
   ignore: string;
   /** A required role in the select — only while some role is NOT required: when
-   *  every one is, the mark tells no role from another (0.24, Kurvenschmiede). */
+   *  every one is, the mark tells no role from another (0.24, Kurvenschmiede). Since
+   *  0.25 this is what a screen reader says for the option (its `aria-label`); the
+   *  option SHOWS {@link requiredRoleShort}. */
   requiredRole: (role: string) => string;
+  /** The same required role as the select shows it (0.25): the role's name and a short
+   *  mark, so the mark does not cut the name short in a phone-width column — "Booking
+   *  date (re…" was all keksdose's closed select had room for. Spoken as
+   *  {@link requiredRole}. Optional, so a complete `UiKitLabels` typed before 0.25
+   *  still compiles; the asterisk needs no translation in most languages. */
+  requiredRoleShort?: (role: string) => string;
   /** Under the preview, when it shows fewer rows than were read. */
   previewOf: (shown: number, total: number) => string;
   /** A required group's roles, already joined as a list with "or". */
@@ -112,6 +119,10 @@ export interface ColumnMapperLabels {
   missing: (roles: string) => string;
 }
 
+/** {@link ColumnMapperLabels.requiredRoleShort}'s English — and its fallback for a
+ *  provider whose labels predate the key. */
+const markedShort = (role: string) => `${role} *`;
+
 export const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels = {
   paste: "Paste a table",
   pasteHint:
@@ -139,6 +150,7 @@ export const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels = {
   roleOf: (column) => `What does column “${column}” hold?`,
   ignore: "Ignore",
   requiredRole: (role) => `${role} (required)`,
+  requiredRoleShort: markedShort,
   previewOf: (shown, total) =>
     shown === 1
       ? `The first of ${total} rows`
@@ -264,23 +276,34 @@ export interface ColumnRoleTableProps<
  *
  * Picking a role another column holds MOVES it ({@link assignColumnRole}). What the
  * table still needs is named under it — a required group as "either Amount, Debit or
- * Credit". Required roles say "(required)" in the list only where some role is not
+ * Credit". Required roles are marked in the list only where some role is not
  * (0.24): Kurvenschmiede's roles are all required, so the mark told no option from
  * another, and on a phone it cut the role's own name short ("Zeit (s) (erforderl…")
  * — the part of the option the reader has to read. The "Still needed" line already
  * says what is missing; a mark that distinguishes nothing is only noise.
  *
+ * Where the mark does tell roles apart, it is short (0.25): keksdose's bank roles, on
+ * a phone, still showed "Booking date (re…" in the closed select. The option shows
+ * "Booking date *" ({@link ColumnMapperLabels.requiredRoleShort}) and is NAMED "Booking
+ * date (required)" ({@link ColumnMapperLabels.requiredRole}, its `aria-label`), so a
+ * screen reader hears the word rather than "star". And no role is cut at all: each
+ * column is at least as wide as its select's longest option — the select's own width,
+ * which a table cell otherwise ignores for a `w-full` control — up to 14rem, the width
+ * the column's name and values already stop at. A long role name ("Date de
+ * comptabilisation", "Betrag (mit Vorzeichen)") widens the columns, and the edge fade
+ * says there are more of them to scroll to.
+ *
  * The table scrolls sideways inside its own box (the kit {@link Table}'s wrapper, a
  * named, keyboard-reachable region while it overflows), so a wide export never widens
  * the page at 390px. An edge with columns behind it fades out (0.24, Kurvenschmiede:
  * on a phone the fourth column's select sat off-screen and nothing said there was more
- * to the right; phone scrollbars are overlays that show only while you drag). It is
- * the kit Tabs strip's measured fade: drawn only while something is hidden on that
- * side, so a table that fits is painted as before; both ends once scrolled into the
- * middle; the reading direction's own in RTL; never animated, so there is nothing for
- * reduced motion to turn off; and a `mask-image`, which changes no layout and needs no
- * background colour to fade to. A role select focused behind the fade is scrolled
- * clear of it.
+ * to the right; phone scrollbars are overlays that show only while you drag). Since
+ * 0.25 that is the kit Table's own `edgeFade`, not a box of this table's round it:
+ * measured, so a table that fits is painted as before; both ends once scrolled into
+ * the middle; the reading direction's own in RTL; never animated; a `mask-image`,
+ * which changes no layout and needs no background colour to fade to. A role select
+ * focused behind the fade is scrolled clear of it, cell and all, and the Table's
+ * wrapper says which ends are cut in `data-overflow`.
  */
 export function ColumnRoleTable<
   R extends string,
@@ -324,119 +347,103 @@ export function ColumnRoleTable<
       ? labelOf(gap[0])
       : labels.oneOf(formatList(gap.map(labelOf), "disjunction", locale)),
   );
-  // "(required)" only where it tells one option from another.
+  // The required mark only where it tells one option from another.
   const markRequired = roles.some((role) => role.required !== true);
 
-  // The Table's own scroll wrapper — the `<table>`'s parent — is what overflows; the
-  // fade is measured on it and drawn on the box round it, which has the same edges.
-  const scroller = useRef<HTMLElement | null>(null);
-  const tableRef = useCallback((table: HTMLTableElement | null) => {
-    scroller.current = table?.parentElement ?? null;
-  }, []);
-  const fade = useStripFade(scroller);
-
   return (
     <div
       className={cn("min-w-0 space-y-1.5", className)}
       data-slot="column-role-table"
     >
-      <div
-        data-slot="column-role-table-scroll"
-        // In reading-direction terms ("start", "end", "both"), for a caller's styling.
-        data-overflow={fade.overflow}
-        style={
-          fade.mask
-            ? { maskImage: fade.mask, WebkitMaskImage: fade.mask }
-            : undefined
-        }
-      >
-        <Table
-          ref={tableRef}
-          density="compact"
-          framed
-          aria-label={labels.table}
-        >
-          <TableHead>
-            <TableRow>
-              {columns.map((column) => {
-                const role = roleOfColumn(roles, mapping, column);
-                const name = nameOf(column);
-                return (
-                  <TableHeaderCell
-                    key={column}
-                    scope="col"
-                    className="min-w-36 py-2 align-top"
+      <Table density="compact" framed edgeFade aria-label={labels.table}>
+        <TableHead>
+          <TableRow>
+            {columns.map((column) => {
+              const role = roleOfColumn(roles, mapping, column);
+              const name = nameOf(column);
+              return (
+                <TableHeaderCell
+                  key={column}
+                  scope="col"
+                  className="min-w-36 py-2 align-top"
+                >
+                  <span className="block max-w-56 truncate pb-1 text-[11px] font-normal text-[var(--text-muted)]">
+                    {name}
+                  </span>
+                  <Select
+                    size="sm"
+                    className="w-full"
+                    // Its own width (the longest option) rather than the cell's: a cell
+                    // takes no width from a `w-full` select, so the role's name was
+                    // cut at the column's 9rem minimum. Stretched to the cell when that
+                    // is wider; capped where the column's name and values stop.
+                    selectClassName="w-auto min-w-full max-w-56"
+                    aria-label={labels.roleOf(name)}
+                    value={role ?? ""}
+                    disabled={disabled}
+                    onChange={(event) =>
+                      onMappingChange(
+                        assignColumnRole(
+                          roles,
+                          mapping,
+                          column,
+                          event.target.value === ""
+                            ? null
+                            : (event.target.value as R),
+                        ),
+                      )
+                    }
                   >
-                    <span className="block max-w-56 truncate pb-1 text-[11px] font-normal text-[var(--text-muted)]">
-                      {name}
-                    </span>
-                    <Select
-                      size="sm"
-                      className="w-full"
-                      aria-label={labels.roleOf(name)}
-                      value={role ?? ""}
-                      disabled={disabled}
-                      // Focus brings a select behind the fade clear of it — the browser's
-                      // own scroll stops at the edge, under the fade.
-                      onFocus={(event) => {
-                        const cell = event.currentTarget.closest("th");
-                        if (scroller.current && cell)
-                          scrollIntoStrip(scroller.current, cell);
-                      }}
-                      onChange={(event) =>
-                        onMappingChange(
-                          assignColumnRole(
-                            roles,
-                            mapping,
-                            column,
-                            event.target.value === ""
-                              ? null
-                              : (event.target.value as R),
-                          ),
-                        )
-                      }
-                    >
-                      <option value="">{labels.ignore}</option>
-                      {roles.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.required === true && markRequired
-                            ? labels.requiredRole(option.label)
+                    <option value="">{labels.ignore}</option>
+                    {roles.map((option) => {
+                      const marked = option.required === true && markRequired;
+                      return (
+                        <option
+                          key={option.value}
+                          value={option.value}
+                          // The short mark on screen, the word for a screen reader.
+                          aria-label={
+                            marked ? labels.requiredRole(option.label) : undefined
+                          }
+                        >
+                          {marked
+                            ? (labels.requiredRoleShort ?? markedShort)(option.label)
                             : option.label}
                         </option>
-                      ))}
-                    </Select>
-                  </TableHeaderCell>
-                );
-              })}
+                      );
+                    })}
+                  </Select>
+                </TableHeaderCell>
+              );
+            })}
+          </TableRow>
+        </TableHead>
+        <TableBody {...bodyProps}>
+          {shown.map((row, index) => (
+            <TableRow {...rowProps?.(row, index)} key={index}>
+              {columns.map((column) => (
+                <TableCell
+                  key={column}
+                  data-ignored={
+                    roleOfColumn(roles, mapping, column) === null || undefined
+                  }
+                  className={cn(
+                    "font-mono whitespace-nowrap",
+                    // Dimmed, not hidden: its values are what tell you whether ignoring
+                    // it was right.
+                    roleOfColumn(roles, mapping, column) === null &&
+                      "text-[var(--text-muted)]",
+                  )}
+                >
+                  <span className="block max-w-56 truncate">
+                    {row[column] ?? ""}
+                  </span>
+                </TableCell>
+              ))}
             </TableRow>
-          </TableHead>
-          <TableBody {...bodyProps}>
-            {shown.map((row, index) => (
-              <TableRow {...rowProps?.(row, index)} key={index}>
-                {columns.map((column) => (
-                  <TableCell
-                    key={column}
-                    data-ignored={
-                      roleOfColumn(roles, mapping, column) === null || undefined
-                    }
-                    className={cn(
-                      "font-mono whitespace-nowrap",
-                      // Dimmed, not hidden: its values are what tell you whether ignoring
-                      // it was right.
-                      roleOfColumn(roles, mapping, column) === null &&
-                        "text-[var(--text-muted)]",
-                    )}
-                  >
-                    <span className="block max-w-56 truncate">
-                      {row[column] ?? ""}
-                    </span>
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+          ))}
+        </TableBody>
+      </Table>
       {total > shown.length && (
         <p className="text-xs text-[var(--text-muted)]">
           {labels.previewOf(shown.length, total)}

package/src/components/data-table-pagination.tsx

@@ -6,6 +6,13 @@ import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 
 export const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;
 
+/** The page-size steps, with the current size slotted in when it is not one of them. */
+function sizeOptions(pageSize: number): number[] {
+  const steps: number[] = [...PAGE_SIZE_OPTIONS];
+  if (!Number.isFinite(pageSize) || steps.includes(pageSize)) return steps;
+  return [...steps, pageSize].sort((a, b) => a - b);
+}
+
 interface PaginationProps {
   page: number;
   totalPages: number;
@@ -89,7 +96,9 @@ export function Pagination({
             className="rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs"
             aria-label={labels.pageSize}
           >
-            {PAGE_SIZE_OPTIONS.map((n) => (
+            {/* A `defaultPageSize` that is not one of the steps (keksdose's 5) is offered
+                too — a select whose value has no option shows its first one ("10"). */}
+            {sizeOptions(pageSize).map((n) => (
               <option key={n} value={n}>
                 {num.format(n)}
               </option>