@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/translation-review-editor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/translation-review-editor.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { useKitFormat } from \"../lib/format\";\nimport { placeholderTokens, reviewWrite } from \"../lib/translation-review\";\nimport type {\n  TranslationReviewKey,\n  TranslationReviewWrite,\n  TranslationRow,\n  TranslationVerdict,\n} from \"../lib/translation-review\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { Caption, SectionLabel } from \"./text\";\nimport { DEFAULT_TRANSLATION_REVIEW_LABELS } from \"./translation-review-labels\";\nimport type { TranslationReviewLabels } from \"./translation-review-labels\";\nimport { Button, Textarea } from \"./ui\";\nimport { COMMIT_EXCEPT_BILLING } from \"./write-lock\";\n\n/** A callback may return a promise: resolve and the editor closes, reject and it stays\n *  open with the error. */\ntype MaybePromise = void | Promise<unknown>;\n\nexport interface TranslationReviewEditorProps {\n  row: TranslationRow;\n  /** The reference language's own name (\"English\", \"Deutsch\") — the app's choice of\n   *  reference, so the app's word for it. */\n  referenceLabel: ReactNode;\n  /** The reviewed language's own name (\"Français\"). */\n  localeLabel: ReactNode;\n  /** Store a verdict. Left out (or `readOnly`): the editor shows the row and its last\n   *  verdict, with no fields and no actions. */\n  onSave?: (write: TranslationReviewWrite) => MaybePromise;\n  /** Clear the verdict — back to unreviewed. Left out: no reset button. */\n  onClear?: (key: TranslationReviewKey) => MaybePromise;\n  /** The Cancel button — and called after a save or a reset resolves, so the panel\n   *  that opened the editor closes it. */\n  onClose?: () => void;\n  /** Look, do not touch: a locale the viewer may read but not review. */\n  readOnly?: boolean;\n  /**\n   * 0.25: put the cursor in the wording field when the editor opens, at the end of the\n   * text. The panel sets it when a phone card is swiped toward \"Needs a change\" (keksdose\n   * live #377): that swipe opens the editor to be written in, and a reviewer who has just\n   * said \"this is wrong\" should not have to find the field first. Not for an editor\n   * opened by a tap — that one may only be opened to read.\n   */\n  focusWording?: boolean;\n  /** How the verdict's date reads. Default: the kit's `formatDate`, medium, in the\n   *  provider's locale. */\n  formatDate?: (iso: string) => string;\n  /** Turns a rejection into words. Default {@link TranslationReviewLabels.failed}. */\n  formatError?: (error: unknown) => ReactNode;\n  className?: string;\n  labels?: Partial<TranslationReviewLabels>;\n}\n\n/** The wording a verdict was given on, under the line that says it changed. */\nfunction Then({ label, text }: { label: string; text: string }) {\n  return (\n    <div className=\"mt-1.5 min-w-0\">\n      <span className=\"text-xs font-medium\">{label}</span>\n      <p className=\"whitespace-pre-line break-words text-[var(--text-secondary)]\">{text}</p>\n    </div>\n  );\n}\n\n/**\n * One string, opened: the reference beside the translation, what changed since the last\n * verdict, what a machine can see is wrong (the placeholders), and the two things a\n * reviewer can say about it — keksdose's and kastlan's `translation-review-editor.tsx`.\n *\n * \"Better wording\" opens on the CURRENT text rather than empty, because the usual\n * correction is a word or an ending, and retyping a sentence to change one word is how\n * new mistakes get in. It is sent only with \"Needs a change\" — approving says the text is\n * fine as it stands. A \"Needs a change\" with neither a note nor a different wording tells\n * whoever fixes it nothing, so it takes one of the two.\n *\n * A MISSING string (kastlan: the locale lacks the key) cannot be approved — there is\n * nothing to approve. Its field starts empty and is the translation to add; the verdict\n * is NEEDS_CHANGE on the empty text, which the export hands a developer as the string to\n * add.\n *\n * Every action waits for its callback: the buttons hold while the promise is out, a\n * resolution closes the editor through `onClose`, and a rejection keeps it open with what\n * was typed and the error under the buttons.\n *\n * Each verdict is a `commit` exempt from billing (`COMMIT_EXCEPT_BILLING`, 0.33): a review\n * is an admin route, which a lapsed plan never locks (docs/billing-harmonization.md\n * §12.13, §12.36); a demo's lock still holds it.\n */\nexport function TranslationReviewEditor({\n  row,\n  referenceLabel,\n  localeLabel,\n  onSave,\n  onClear,\n  onClose,\n  readOnly = false,\n  focusWording = false,\n  formatDate: formatDateProp,\n  formatError,\n  className,\n  labels: labelsProp,\n}: TranslationReviewEditorProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  const { formatDate } = useKitFormat();\n  const review = row.review;\n  const missing = row.text === \"\";\n  const editable = !readOnly && onSave !== undefined;\n  const [suggestion, setSuggestion] = useState(review?.suggestion ?? row.text);\n  const [note, setNote] = useState(review?.note ?? \"\");\n  const [busy, setBusy] = useState<\"approve\" | \"flag\" | \"clear\" | null>(null);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const wordingRef = useRef<HTMLTextAreaElement>(null);\n  // On mount only: the prop says how the editor was OPENED, not where focus belongs\n  // for the rest of its life.\n  const focusOnOpen = useRef(focusWording && editable);\n  useEffect(() => {\n    const field = wordingRef.current;\n    if (!focusOnOpen.current || !field) return;\n    field.focus();\n    field.setSelectionRange(field.value.length, field.value.length);\n  }, []);\n\n  const canFlag = note.trim() !== \"\" || suggestion.trim() !== row.text.trim();\n  const changed = row.status === \"changed\" ? review : null;\n  const date = (iso: string) => (formatDateProp ? formatDateProp(iso) : formatDate(iso, \"medium\"));\n\n  const run = async (kind: \"approve\" | \"flag\" | \"clear\", action: () => MaybePromise) => {\n    setBusy(kind);\n    setFailure(null);\n    try {\n      await action();\n      onClose?.();\n    } catch (caught) {\n      setFailure(formatError ? formatError(caught) : labels.failed);\n    } finally {\n      setBusy(null);\n    }\n  };\n\n  const save = (verdict: TranslationVerdict) => {\n    if (!onSave) return;\n    const trimmedNote = note.trim() || null;\n    // Approving says the text is right as it stands: there is no wording to suggest.\n    const sent = verdict === \"APPROVED\" ? null : suggestion.trim() || null;\n    void run(verdict === \"APPROVED\" ? \"approve\" : \"flag\", () =>\n      onSave(reviewWrite(row, verdict, trimmedNote, sent)),\n    );\n  };\n\n  return (\n    <div className={cn(\"min-w-0 space-y-3 text-sm\", className)}>\n      <code className=\"block break-all text-xs text-[var(--text-muted)]\">{row.key}</code>\n\n      <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n        <div className=\"min-w-0\">\n          <SectionLabel as=\"span\" size=\"xs\">\n            {referenceLabel}\n          </SectionLabel>\n          <p className=\"mt-1 whitespace-pre-line break-words text-[var(--text-secondary)]\">{row.reference}</p>\n        </div>\n        <div className=\"min-w-0\">\n          <SectionLabel as=\"span\" size=\"xs\">\n            {localeLabel}\n          </SectionLabel>\n          {missing ? (\n            <p className=\"mt-1 italic text-[var(--text-muted)]\">{labels.missingText}</p>\n          ) : (\n            <p lang={row.locale} className=\"mt-1 whitespace-pre-line break-words\">\n              {row.text}\n            </p>\n          )}\n        </div>\n      </div>\n\n      {changed && (\n        <AlertBanner tone=\"warning\" variant=\"inline\" size=\"sm\" block live={false}>\n          <div className=\"min-w-0\">\n            <p>{labels.changedSince}</p>\n            {changed.text !== row.text && <Then label={labels.reviewedWording} text={changed.text || \"—\"} />}\n            {changed.referenceText != null && changed.referenceText !== row.reference && (\n              <Then label={labels.reviewedReference} text={changed.referenceText} />\n            )}\n          </div>\n        </AlertBanner>\n      )}\n\n      {row.placeholderMismatch && (\n        <AlertBanner tone=\"danger\" variant=\"inline\" size=\"sm\" block live={false}>\n          <span className=\"min-w-0 break-words\">\n            {labels.placeholderMismatch(\n              placeholderTokens(row.reference).join(\" \") || \"—\",\n              placeholderTokens(row.text).join(\" \") || \"—\",\n            )}\n          </span>\n        </AlertBanner>\n      )}\n\n      {review && (\n        <Caption>\n          {(review.verdict === \"APPROVED\" ? labels.lastApproved : labels.lastFlagged)(\n            review.reviewerName ?? labels.erasedReviewer,\n            date(review.reviewedAt),\n          )}\n        </Caption>\n      )}\n\n      {/* Read-only: what the reviewer said, as text — the fields are for saying it. */}\n      {!editable && review?.verdict === \"NEEDS_CHANGE\" && (review.suggestion || review.note) && (\n        <div className=\"space-y-2\">\n          {review.suggestion && <Then label={missing ? labels.translation : labels.suggestion} text={review.suggestion} />}\n          {review.note && <Then label={labels.note} text={review.note} />}\n        </div>\n      )}\n\n      {editable && (\n        <>\n          <Textarea\n            ref={wordingRef}\n            label={missing ? labels.translation : labels.suggestion}\n            lang={row.locale}\n            rows={Math.min(8, Math.max(2, Math.ceil(Math.max(row.text.length, row.reference.length) / 80)))}\n            value={suggestion}\n            disabled={busy !== null}\n            onChange={(e) => setSuggestion(e.target.value)}\n          />\n          <Textarea\n            label={labels.note}\n            rows={2}\n            value={note}\n            placeholder={labels.notePlaceholder}\n            disabled={busy !== null}\n            onChange={(e) => setNote(e.target.value)}\n          />\n          <div className=\"flex flex-wrap gap-2\">\n            {!missing && (\n              <Button\n                variant=\"primary\"\n                commit={COMMIT_EXCEPT_BILLING}\n                pending={busy === \"approve\"}\n                disabled={busy !== null}\n                onClick={() => save(\"APPROVED\")}\n              >\n                {labels.approve}\n              </Button>\n            )}\n            <Button\n              variant={missing ? \"primary\" : \"danger\"}\n              commit={COMMIT_EXCEPT_BILLING}\n              pending={busy === \"flag\"}\n              disabled={busy !== null || !canFlag}\n              onClick={() => save(\"NEEDS_CHANGE\")}\n            >\n              {missing ? labels.suggest : labels.flag}\n            </Button>\n            {review && onClear && (\n              <Button\n                variant=\"ghost\"\n                commit={COMMIT_EXCEPT_BILLING}\n                pending={busy === \"clear\"}\n                disabled={busy !== null}\n                onClick={() => void run(\"clear\", () => onClear({ locale: row.locale, key: row.key }))}\n              >\n                {labels.reset}\n              </Button>\n            )}\n            {onClose && (\n              <Button variant=\"ghost\" disabled={busy !== null} onClick={onClose}>\n                {labels.cancel}\n              </Button>\n            )}\n          </div>\n        </>\n      )}\n\n      {failure && (\n        <AlertBanner tone=\"danger\" size=\"sm\" role=\"alert\">\n          {failure}\n        </AlertBanner>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/translation-review-editor.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { useKitFormat } from \"../lib/format\";\nimport { placeholderTokens, reviewWrite } from \"../lib/translation-review\";\nimport type {\n  TranslationReviewKey,\n  TranslationReviewWrite,\n  TranslationRow,\n  TranslationVerdict,\n} from \"../lib/translation-review\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { Caption, SectionLabel } from \"./text\";\nimport { DEFAULT_TRANSLATION_REVIEW_LABELS } from \"./translation-review-labels\";\nimport type { TranslationReviewLabels } from \"./translation-review-labels\";\nimport { Button } from \"./button\";\nimport { Textarea } from \"./textarea\";\nimport { COMMIT_EXCEPT_BILLING } from \"./write-lock\";\n\n/** A callback may return a promise: resolve and the editor closes, reject and it stays\n *  open with the error. */\ntype MaybePromise = void | Promise<unknown>;\n\nexport interface TranslationReviewEditorProps {\n  row: TranslationRow;\n  /** The reference language's own name (\"English\", \"Deutsch\") — the app's choice of\n   *  reference, so the app's word for it. */\n  referenceLabel: ReactNode;\n  /** The reviewed language's own name (\"Français\"). */\n  localeLabel: ReactNode;\n  /** Store a verdict. Left out (or `readOnly`): the editor shows the row and its last\n   *  verdict, with no fields and no actions. */\n  onSave?: (write: TranslationReviewWrite) => MaybePromise;\n  /** Clear the verdict — back to unreviewed. Left out: no reset button. */\n  onClear?: (key: TranslationReviewKey) => MaybePromise;\n  /** The Cancel button — and called after a save or a reset resolves, so the panel\n   *  that opened the editor closes it. */\n  onClose?: () => void;\n  /** Look, do not touch: a locale the viewer may read but not review. */\n  readOnly?: boolean;\n  /**\n   * 0.25: put the cursor in the wording field when the editor opens, at the end of the\n   * text. The panel sets it when a phone card is swiped toward \"Needs a change\" (keksdose\n   * live #377): that swipe opens the editor to be written in, and a reviewer who has just\n   * said \"this is wrong\" should not have to find the field first. Not for an editor\n   * opened by a tap — that one may only be opened to read.\n   */\n  focusWording?: boolean;\n  /** How the verdict's date reads. Default: the kit's `formatDate`, medium, in the\n   *  provider's locale. */\n  formatDate?: (iso: string) => string;\n  /** Turns a rejection into words. Default {@link TranslationReviewLabels.failed}. */\n  formatError?: (error: unknown) => ReactNode;\n  className?: string;\n  labels?: LabelOverride<TranslationReviewLabels>;\n}\n\n/** The wording a verdict was given on, under the line that says it changed. */\nfunction Then({ label, text }: { label: string; text: string }) {\n  return (\n    <div className=\"mt-1.5 min-w-0\">\n      <span className=\"text-xs font-medium\">{label}</span>\n      <p className=\"whitespace-pre-line break-words text-secondary\">{text}</p>\n    </div>\n  );\n}\n\n/**\n * One string, opened: the reference beside the translation, what changed since the last\n * verdict, what a machine can see is wrong (the placeholders), and the two things a\n * reviewer can say about it — keksdose's and kastlan's `translation-review-editor.tsx`.\n *\n * \"Better wording\" opens on the CURRENT text rather than empty, because the usual\n * correction is a word or an ending, and retyping a sentence to change one word is how\n * new mistakes get in. It is sent only with \"Needs a change\" — approving says the text is\n * fine as it stands. A \"Needs a change\" with neither a note nor a different wording tells\n * whoever fixes it nothing, so it takes one of the two.\n *\n * A MISSING string (kastlan: the locale lacks the key) cannot be approved — there is\n * nothing to approve. Its field starts empty and is the translation to add; the verdict\n * is NEEDS_CHANGE on the empty text, which the export hands a developer as the string to\n * add.\n *\n * Every action waits for its callback: the buttons hold while the promise is out, a\n * resolution closes the editor through `onClose`, and a rejection keeps it open with what\n * was typed and the error under the buttons.\n *\n * Each verdict is a `commit` exempt from billing (`COMMIT_EXCEPT_BILLING`, 0.33): a review\n * is an admin route, which a lapsed plan never locks (docs/billing-harmonization.md\n * §12.13, §12.36); a demo's lock still holds it.\n */\nexport function TranslationReviewEditor({\n  row,\n  referenceLabel,\n  localeLabel,\n  onSave,\n  onClear,\n  onClose,\n  readOnly = false,\n  focusWording = false,\n  formatDate: formatDateProp,\n  formatError,\n  className,\n  labels: labelsProp,\n}: TranslationReviewEditorProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  const { formatDate } = useKitFormat();\n  const review = row.review;\n  const missing = row.text === \"\";\n  const editable = !readOnly && onSave !== undefined;\n  const [suggestion, setSuggestion] = useState(review?.suggestion ?? row.text);\n  const [note, setNote] = useState(review?.note ?? \"\");\n  const [busy, setBusy] = useState<\"approve\" | \"flag\" | \"clear\" | null>(null);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const wordingRef = useRef<HTMLTextAreaElement>(null);\n  // On mount only: the prop says how the editor was OPENED, not where focus belongs\n  // for the rest of its life.\n  const focusOnOpen = useRef(focusWording && editable);\n  useEffect(() => {\n    const field = wordingRef.current;\n    if (!focusOnOpen.current || !field) return;\n    field.focus();\n    field.setSelectionRange(field.value.length, field.value.length);\n  }, []);\n\n  const canFlag = note.trim() !== \"\" || suggestion.trim() !== row.text.trim();\n  const changed = row.status === \"changed\" ? review : null;\n  const date = (iso: string) => (formatDateProp ? formatDateProp(iso) : formatDate(iso, \"medium\"));\n\n  const run = async (kind: \"approve\" | \"flag\" | \"clear\", action: () => MaybePromise) => {\n    setBusy(kind);\n    setFailure(null);\n    try {\n      await action();\n      onClose?.();\n    } catch (caught) {\n      setFailure(formatError ? formatError(caught) : labels.failed);\n    } finally {\n      setBusy(null);\n    }\n  };\n\n  const save = (verdict: TranslationVerdict) => {\n    if (!onSave) return;\n    const trimmedNote = note.trim() || null;\n    // Approving says the text is right as it stands: there is no wording to suggest.\n    const sent = verdict === \"APPROVED\" ? null : suggestion.trim() || null;\n    void run(verdict === \"APPROVED\" ? \"approve\" : \"flag\", () =>\n      onSave(reviewWrite(row, verdict, trimmedNote, sent)),\n    );\n  };\n\n  return (\n    <div className={cn(\"min-w-0 space-y-3 text-sm\", className)}>\n      <code className=\"block break-all text-xs text-muted\">{row.key}</code>\n\n      <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n        <div className=\"min-w-0\">\n          <SectionLabel as=\"span\" size=\"xs\">\n            {referenceLabel}\n          </SectionLabel>\n          <p className=\"mt-1 whitespace-pre-line break-words text-secondary\">{row.reference}</p>\n        </div>\n        <div className=\"min-w-0\">\n          <SectionLabel as=\"span\" size=\"xs\">\n            {localeLabel}\n          </SectionLabel>\n          {missing ? (\n            <p className=\"mt-1 italic text-muted\">{labels.missingText}</p>\n          ) : (\n            <p lang={row.locale} className=\"mt-1 whitespace-pre-line break-words\">\n              {row.text}\n            </p>\n          )}\n        </div>\n      </div>\n\n      {changed && (\n        <AlertBanner tone=\"warning\" variant=\"inline\" size=\"sm\" block live={false}>\n          <div className=\"min-w-0\">\n            <p>{labels.changedSince}</p>\n            {changed.text !== row.text && <Then label={labels.reviewedWording} text={changed.text || \"—\"} />}\n            {changed.referenceText != null && changed.referenceText !== row.reference && (\n              <Then label={labels.reviewedReference} text={changed.referenceText} />\n            )}\n          </div>\n        </AlertBanner>\n      )}\n\n      {row.placeholderMismatch && (\n        <AlertBanner tone=\"danger\" variant=\"inline\" size=\"sm\" block live={false}>\n          <span className=\"min-w-0 break-words\">\n            {labels.placeholderMismatch(\n              placeholderTokens(row.reference).join(\" \") || \"—\",\n              placeholderTokens(row.text).join(\" \") || \"—\",\n            )}\n          </span>\n        </AlertBanner>\n      )}\n\n      {review && (\n        <Caption>\n          {(review.verdict === \"APPROVED\" ? labels.lastApproved : labels.lastFlagged)(\n            review.reviewerName ?? labels.erasedReviewer,\n            date(review.reviewedAt),\n          )}\n        </Caption>\n      )}\n\n      {/* Read-only: what the reviewer said, as text — the fields are for saying it. */}\n      {!editable && review?.verdict === \"NEEDS_CHANGE\" && (review.suggestion || review.note) && (\n        <div className=\"space-y-2\">\n          {review.suggestion && <Then label={missing ? labels.translation : labels.suggestion} text={review.suggestion} />}\n          {review.note && <Then label={labels.note} text={review.note} />}\n        </div>\n      )}\n\n      {editable && (\n        <>\n          <Textarea\n            ref={wordingRef}\n            label={missing ? labels.translation : labels.suggestion}\n            lang={row.locale}\n            rows={Math.min(8, Math.max(2, Math.ceil(Math.max(row.text.length, row.reference.length) / 80)))}\n            value={suggestion}\n            disabled={busy !== null}\n            onChange={(e) => setSuggestion(e.target.value)}\n          />\n          <Textarea\n            label={labels.note}\n            rows={2}\n            value={note}\n            placeholder={labels.notePlaceholder}\n            disabled={busy !== null}\n            onChange={(e) => setNote(e.target.value)}\n          />\n          <div className=\"flex flex-wrap gap-2\">\n            {!missing && (\n              <Button\n                variant=\"primary\"\n                commit={COMMIT_EXCEPT_BILLING}\n                pending={busy === \"approve\"}\n                disabled={busy !== null}\n                onClick={() => save(\"APPROVED\")}\n              >\n                {labels.approve}\n              </Button>\n            )}\n            <Button\n              variant={missing ? \"primary\" : \"danger\"}\n              commit={COMMIT_EXCEPT_BILLING}\n              pending={busy === \"flag\"}\n              disabled={busy !== null || !canFlag}\n              onClick={() => save(\"NEEDS_CHANGE\")}\n            >\n              {missing ? labels.suggest : labels.flag}\n            </Button>\n            {review && onClear && (\n              <Button\n                variant=\"ghost\"\n                commit={COMMIT_EXCEPT_BILLING}\n                pending={busy === \"clear\"}\n                disabled={busy !== null}\n                onClick={() => void run(\"clear\", () => onClear({ locale: row.locale, key: row.key }))}\n              >\n                {labels.reset}\n              </Button>\n            )}\n            {onClose && (\n              <Button variant=\"ghost\" disabled={busy !== null} onClick={onClose}>\n                {labels.cancel}\n              </Button>\n            )}\n          </div>\n        </>\n      )}\n\n      {failure && (\n        <AlertBanner tone=\"danger\" size=\"sm\" role=\"alert\">\n          {failure}\n        </AlertBanner>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/translation-review-labels.d.ts

@@ -1,5 +1,4 @@
-import { ReviewStatus } from '../lib/translation-review.js';
-
+import type { ReviewStatus } from "../lib/translation-review.js";
 /**
  * The `translationReview` namespace: every word of the translation-review parts
  * (`ReviewStatusChip`, `TranslationProgress`, `TranslationLocaleTabs`,
@@ -9,7 +8,7 @@ import { ReviewStatus } from '../lib/translation-review.js';
  * it, and neither has to load the components to get the words. The English is keksdose's
  * and kastlan's own (`translation_review.*`, `translations:*`), British.
  */
-interface TranslationReviewLabels {
+export interface TranslationReviewLabels {
     /** The five statuses — the chip, the filter, the progress legend. */
     statusMissing: string;
     statusUnreviewed: string;
@@ -99,8 +98,6 @@ interface TranslationReviewLabels {
      *  The swipe itself is named by {@link reset}. */
     clearedToast: (count: number) => string;
 }
-declare const DEFAULT_TRANSLATION_REVIEW_LABELS: TranslationReviewLabels;
+export declare const DEFAULT_TRANSLATION_REVIEW_LABELS: TranslationReviewLabels;
 /** A status's word, from the namespace's five. */
-declare function reviewStatusLabel(labels: TranslationReviewLabels, status: ReviewStatus): string;
-
-export { DEFAULT_TRANSLATION_REVIEW_LABELS, type TranslationReviewLabels, reviewStatusLabel };
+export declare function reviewStatusLabel(labels: TranslationReviewLabels, status: ReviewStatus): string;

package/dist/components/translation-review-parts.d.ts

@@ -1,15 +1,8 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { ReviewStatus, TranslationRow, TranslationCorrection, TranslationSummary } from '../lib/translation-review.js';
-import { ChipTone, ChipSize, ChipVariant, ChipShape } from './chip.js';
-import { TranslationReviewLabels } from './translation-review-labels.js';
-import 'lucide-react';
-import './field-parts.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './write-lock.js';
-
+import type { ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { ReviewStatus, TranslationCorrection, TranslationRow, TranslationSummary } from "../lib/translation-review.js";
+import type { ChipShape, ChipSize, ChipTone, ChipVariant } from "./chip.js";
+import type { TranslationReviewLabels } from "./translation-review-labels.js";
 /**
  * The small parts of the translation review, each usable on its own: the status
  * vocabulary as a chip, one locale's progress, the locale tabs and the export. The page
@@ -19,8 +12,8 @@ import './write-lock.js';
  * The tone of each status: nothing yet is neutral, a gap is orange (kastlan's choice — a
  * hue, not a verdict), a change since review is amber, sent back is red, done is green.
  */
-declare const REVIEW_STATUS_TONES: Readonly<Record<ReviewStatus, ChipTone>>;
-interface ReviewStatusChipProps {
+export declare const REVIEW_STATUS_TONES: Readonly<Record<ReviewStatus, ChipTone>>;
+export interface ReviewStatusChipProps {
     status: ReviewStatus;
     /** Over {@link REVIEW_STATUS_TONES}. */
     tone?: ChipTone;
@@ -33,19 +26,19 @@ interface ReviewStatusChipProps {
     caps?: boolean;
     className?: string;
     /** Prop > `<UiKitProvider labels={{ translationReview }}>` > English. */
-    labels?: Partial<TranslationReviewLabels>;
+    labels?: LabelOverride<TranslationReviewLabels>;
     [key: `data-${string}`]: string | number | boolean | undefined;
 }
 /** One row's status as a chip, in the kit's words and tones. Carries `data-status`. */
-declare function ReviewStatusChip({ status, tone, children, size, variant, shape, caps, className, labels: labelsProp, ...rest }: ReviewStatusChipProps): react.JSX.Element;
-interface TranslationProgressProps {
+export declare function ReviewStatusChip({ status, tone, children, size, variant, shape, caps, className, labels: labelsProp, ...rest }: ReviewStatusChipProps): import("react").JSX.Element;
+export interface TranslationProgressProps {
     /** One locale's rows — or their {@link summariseRows} when the app has only counts. */
     rows?: readonly TranslationRow[];
     summary?: TranslationSummary;
     /** The list under the bar naming each part with its count. Default true. */
     legend?: boolean;
     className?: string;
-    labels?: Partial<TranslationReviewLabels>;
+    labels?: LabelOverride<TranslationReviewLabels>;
 }
 /**
  * "120 of 3859 approved", and the bar split by status: approved, sent back, changed since
@@ -53,8 +46,8 @@ interface TranslationProgressProps {
  * legend counts rows rather than percentages: "12 need a change" is the next hour's work,
  * "0.3 %" is not.
  */
-declare function TranslationProgress({ rows, summary: summaryProp, legend, className, labels: labelsProp, }: TranslationProgressProps): react.JSX.Element;
-interface TranslationLocaleTab {
+export declare function TranslationProgress({ rows, summary: summaryProp, legend, className, labels: labelsProp, }: TranslationProgressProps): import("react").JSX.Element;
+export interface TranslationLocaleTab {
     /** The locale code. */
     value: string;
     /** Its name, in its own language ("Français"). */
@@ -63,21 +56,21 @@ interface TranslationLocaleTab {
      *  a scoped reviewer's tab counts what they can see. */
     rows: readonly TranslationRow[];
 }
-interface TranslationLocaleTabsProps {
+export interface TranslationLocaleTabsProps {
     /** The locales the viewer may see, in the app's order — the server's answer, never a
      *  guess from a role name. */
     locales: readonly TranslationLocaleTab[];
     active: string;
     onChange: (locale: string) => void;
     className?: string;
-    labels?: Partial<TranslationReviewLabels>;
+    labels?: LabelOverride<TranslationReviewLabels>;
 }
 /**
  * One tab per locale with its approved/total, wrapping on a phone. Nothing for a single
  * locale: a strip with one tab is a heading that looks clickable.
  */
-declare function TranslationLocaleTabs({ locales, active, onChange, className, labels: labelsProp }: TranslationLocaleTabsProps): react.JSX.Element | null;
-interface TranslationExportButtonProps {
+export declare function TranslationLocaleTabs({ locales, active, onChange, className, labels: labelsProp }: TranslationLocaleTabsProps): import("react").JSX.Element | null;
+export interface TranslationExportButtonProps {
     /** Every row the export covers — usually every locale's, not only the open one. */
     rows: readonly TranslationRow[];
     /** Listed in the file. Default: the locales the rows come from. */
@@ -90,13 +83,11 @@ interface TranslationExportButtonProps {
      */
     onExport?: (corrections: TranslationCorrection[], file: Blob) => void;
     className?: string;
-    labels?: Partial<TranslationReviewLabels>;
+    labels?: LabelOverride<TranslationReviewLabels>;
 }
 /**
  * "Export corrections (n)": every string sent back, as the JSON file keksdose and kastlan
  * hand a developer — `{ exported_at, locales, corrections }`. Corrections are not applied
  * on the page: the strings are source code. Disabled while there is nothing to export.
  */
-declare function TranslationExportButton({ rows, locales, fileName, onExport, className, labels: labelsProp, }: TranslationExportButtonProps): react.JSX.Element;
-
-export { REVIEW_STATUS_TONES, ReviewStatusChip, type ReviewStatusChipProps, TranslationExportButton, type TranslationExportButtonProps, type TranslationLocaleTab, TranslationLocaleTabs, type TranslationLocaleTabsProps, TranslationProgress, type TranslationProgressProps };
+export declare function TranslationExportButton({ rows, locales, fileName, onExport, className, labels: labelsProp, }: TranslationExportButtonProps): import("react").JSX.Element;

package/dist/components/translation-review-parts.js

@@ -3,12 +3,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Download } from "lucide-react";
 import { useKitLabels } from "../i18n/kit-labels.js";
+import { saveBlob } from "../lib/download.js";
 import { useKitFormat } from "../lib/format.js";
 import { summariseRows, translationCorrections } from "../lib/translation-review.js";
 import { Chip } from "./chip.js";
 import { ProgressBar } from "./progress-bar.js";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from "./translation-review-labels.js";
-import { Button, Tabs } from "./ui.js";
+import { Button } from "./button.js";
+import { Tabs } from "./tabs.js";
 const REVIEW_STATUS_TONES = {
   missing: "orange",
   unreviewed: "neutral",
@@ -141,12 +143,7 @@ function TranslationExportButton({
       onExport(corrections, file);
       return;
     }
-    const url = URL.createObjectURL(file);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = fileName ?? `translation-corrections-${now.toISOString().slice(0, 10)}.json`;
-    a.click();
-    setTimeout(() => URL.revokeObjectURL(url), 0);
+    saveBlob(file, fileName ?? `translation-corrections-${now.toISOString().slice(0, 10)}.json`);
   };
   return /* @__PURE__ */ jsxs(Button, { variant: "secondary", disabled: corrections.length === 0, onClick: run, className, children: [
     /* @__PURE__ */ jsx(Download, { className: "size-4", "aria-hidden": true }),

package/dist/components/translation-review-parts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/translation-review-parts.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Download } from \"lucide-react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useKitFormat } from \"../lib/format\";\nimport { summariseRows, translationCorrections } from \"../lib/translation-review\";\nimport type {\n  ReviewStatus,\n  TranslationCorrection,\n  TranslationRow,\n  TranslationSummary,\n} from \"../lib/translation-review\";\nimport { Chip } from \"./chip\";\nimport type { ChipShape, ChipSize, ChipTone, ChipVariant } from \"./chip\";\nimport { ProgressBar } from \"./progress-bar\";\nimport type { ProgressBarSegment } from \"./progress-bar\";\nimport { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from \"./translation-review-labels\";\nimport type { TranslationReviewLabels } from \"./translation-review-labels\";\nimport { Button, Tabs } from \"./ui\";\n\n/**\n * The small parts of the translation review, each usable on its own: the status\n * vocabulary as a chip, one locale's progress, the locale tabs and the export. The page\n * body that puts them together is `TranslationReviewPanel` (translation-review.tsx).\n */\n\n// ── ReviewStatusChip ──────────────────────────────────────────────────────────\n\n/**\n * The tone of each status: nothing yet is neutral, a gap is orange (kastlan's choice — a\n * hue, not a verdict), a change since review is amber, sent back is red, done is green.\n */\nexport const REVIEW_STATUS_TONES: Readonly<Record<ReviewStatus, ChipTone>> = {\n  missing: \"orange\",\n  unreviewed: \"neutral\",\n  changed: \"warning\",\n  needs_change: \"danger\",\n  approved: \"success\",\n};\n\nexport interface ReviewStatusChipProps {\n  status: ReviewStatus;\n  /** Over {@link REVIEW_STATUS_TONES}. */\n  tone?: ChipTone;\n  /** Over the label. */\n  children?: ReactNode;\n  /** Default `sm` — a chip in a table cell. */\n  size?: ChipSize;\n  variant?: ChipVariant;\n  shape?: ChipShape;\n  caps?: boolean;\n  className?: string;\n  /** Prop > `<UiKitProvider labels={{ translationReview }}>` > English. */\n  labels?: Partial<TranslationReviewLabels>;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/** One row's status as a chip, in the kit's words and tones. Carries `data-status`. */\nexport function ReviewStatusChip({\n  status,\n  tone,\n  children,\n  size = \"sm\",\n  variant,\n  shape,\n  caps,\n  className,\n  labels: labelsProp,\n  ...rest\n}: ReviewStatusChipProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  return (\n    <Chip\n      {...rest}\n      data-status={status}\n      tone={tone ?? REVIEW_STATUS_TONES[status]}\n      size={size}\n      variant={variant}\n      shape={shape}\n      caps={caps}\n      className={className}\n    >\n      {children ?? reviewStatusLabel(labels, status)}\n    </Chip>\n  );\n}\n\n// ── TranslationProgress ───────────────────────────────────────────────────────\n\nexport interface TranslationProgressProps {\n  /** One locale's rows — or their {@link summariseRows} when the app has only counts. */\n  rows?: readonly TranslationRow[];\n  summary?: TranslationSummary;\n  /** The list under the bar naming each part with its count. Default true. */\n  legend?: boolean;\n  className?: string;\n  labels?: Partial<TranslationReviewLabels>;\n}\n\n/**\n * \"120 of 3859 approved\", and the bar split by status: approved, sent back, changed since\n * review, missing — in the chips' colours. What is left of the track is unreviewed. The\n * legend counts rows rather than percentages: \"12 need a change\" is the next hour's work,\n * \"0.3 %\" is not.\n */\nexport function TranslationProgress({\n  rows,\n  summary: summaryProp,\n  legend = true,\n  className,\n  labels: labelsProp,\n}: TranslationProgressProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  const { formatNumber } = useKitFormat();\n  const summary = useMemo(() => summaryProp ?? summariseRows(rows ?? []), [summaryProp, rows]);\n  const part = (status: ReviewStatus, tone: ProgressBarSegment[\"tone\"], color?: string): ProgressBarSegment => ({\n    key: status,\n    value: summary[status],\n    tone,\n    color,\n    label: reviewStatusLabel(labels, status),\n    // A status with no rows stays in the legend (\"Needs a change 0\" is news too) but out\n    // of the bar, where it would only be a gap.\n    legendOnly: summary[status] === 0 ? true : undefined,\n  });\n  const segments = [\n    part(\"approved\", \"success\"),\n    part(\"needs_change\", \"danger\"),\n    part(\"changed\", \"warning\"),\n    // The chip's orange, which is a hue and not a ProgressBar tone. Only where there is\n    // a gap: an app whose locales are complete never hears of \"missing\".\n    ...(summary.missing > 0 ? [part(\"missing\", undefined, \"var(--hue-orange)\")] : []),\n  ];\n  return (\n    <ProgressBar\n      className={className}\n      label={labels.progress(summary.approved, summary.total)}\n      max={Math.max(summary.total, 1)}\n      segments={segments}\n      legend={legend}\n      formatValue={(value) => formatNumber(value)}\n    />\n  );\n}\n\n// ── TranslationLocaleTabs ─────────────────────────────────────────────────────\n\nexport interface TranslationLocaleTab {\n  /** The locale code. */\n  value: string;\n  /** Its name, in its own language (\"Français\"). */\n  label: ReactNode;\n  /** The locale's rows, for the badge — built with the same `areas` as the panel's, so\n   *  a scoped reviewer's tab counts what they can see. */\n  rows: readonly TranslationRow[];\n}\n\nexport interface TranslationLocaleTabsProps {\n  /** The locales the viewer may see, in the app's order — the server's answer, never a\n   *  guess from a role name. */\n  locales: readonly TranslationLocaleTab[];\n  active: string;\n  onChange: (locale: string) => void;\n  className?: string;\n  labels?: Partial<TranslationReviewLabels>;\n}\n\n/**\n * One tab per locale with its approved/total, wrapping on a phone. Nothing for a single\n * locale: a strip with one tab is a heading that looks clickable.\n */\nexport function TranslationLocaleTabs({ locales, active, onChange, className, labels: labelsProp }: TranslationLocaleTabsProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  if (locales.length < 2) return null;\n  return (\n    <Tabs\n      aria-label={labels.locales}\n      wrap\n      className={className}\n      tabs={locales.map((locale) => {\n        const summary = summariseRows(locale.rows);\n        return {\n          id: locale.value,\n          label: locale.label,\n          name: typeof locale.label === \"string\" ? locale.label : locale.value,\n          badge: (\n            // The tab's own colour, dimmed — a fixed muted grey vanished on the selected\n            // tab's brand fill (390px browser check).\n            <span className=\"text-xs tabular-nums opacity-75\">\n              {labels.localeProgress(summary.approved, summary.total)}\n            </span>\n          ),\n        };\n      })}\n      active={active}\n      onChange={onChange}\n    />\n  );\n}\n\n// ── TranslationExportButton ───────────────────────────────────────────────────\n\nexport interface TranslationExportButtonProps {\n  /** Every row the export covers — usually every locale's, not only the open one. */\n  rows: readonly TranslationRow[];\n  /** Listed in the file. Default: the locales the rows come from. */\n  locales?: readonly string[];\n  /** Default `translation-corrections-<date>.json`. */\n  fileName?: string;\n  /**\n   * Take the export instead of downloading it — the entries, and the file as a ready\n   * JSON Blob. Left out, the kit downloads the Blob as `fileName`.\n   */\n  onExport?: (corrections: TranslationCorrection[], file: Blob) => void;\n  className?: string;\n  labels?: Partial<TranslationReviewLabels>;\n}\n\n/**\n * \"Export corrections (n)\": every string sent back, as the JSON file keksdose and kastlan\n * hand a developer — `{ exported_at, locales, corrections }`. Corrections are not applied\n * on the page: the strings are source code. Disabled while there is nothing to export.\n */\nexport function TranslationExportButton({\n  rows,\n  locales,\n  fileName,\n  onExport,\n  className,\n  labels: labelsProp,\n}: TranslationExportButtonProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  const corrections = useMemo(() => translationCorrections(rows), [rows]);\n  const run = () => {\n    const now = new Date();\n    const file = new Blob(\n      [\n        JSON.stringify(\n          {\n            exported_at: now.toISOString(),\n            locales: locales ?? [...new Set(rows.map((r) => r.locale))],\n            corrections,\n          },\n          null,\n          2,\n        ),\n      ],\n      { type: \"application/json\" },\n    );\n    if (onExport) {\n      onExport(corrections, file);\n      return;\n    }\n    const url = URL.createObjectURL(file);\n    const a = document.createElement(\"a\");\n    a.href = url;\n    a.download = fileName ?? `translation-corrections-${now.toISOString().slice(0, 10)}.json`;\n    a.click();\n    // After the click has handed the URL to the download, not before.\n    setTimeout(() => URL.revokeObjectURL(url), 0);\n  };\n  return (\n    <Button variant=\"secondary\" disabled={corrections.length === 0} onClick={run} className={className}>\n      <Download className=\"size-4\" aria-hidden />\n      {labels.exportCorrections(corrections.length)}\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/translation-review-parts.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Download } from \"lucide-react\";\n\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { saveBlob } from \"../lib/download\";\nimport { useKitFormat } from \"../lib/format\";\nimport { summariseRows, translationCorrections } from \"../lib/translation-review\";\nimport type {\n  ReviewStatus,\n  TranslationCorrection,\n  TranslationRow,\n  TranslationSummary,\n} from \"../lib/translation-review\";\nimport { Chip } from \"./chip\";\nimport type { ChipShape, ChipSize, ChipTone, ChipVariant } from \"./chip\";\nimport { ProgressBar } from \"./progress-bar\";\nimport type { ProgressBarSegment } from \"./progress-bar\";\nimport { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from \"./translation-review-labels\";\nimport type { TranslationReviewLabels } from \"./translation-review-labels\";\nimport { Button } from \"./button\";\nimport { Tabs } from \"./tabs\";\n\n/**\n * The small parts of the translation review, each usable on its own: the status\n * vocabulary as a chip, one locale's progress, the locale tabs and the export. The page\n * body that puts them together is `TranslationReviewPanel` (translation-review.tsx).\n */\n\n// ── ReviewStatusChip ──────────────────────────────────────────────────────────\n\n/**\n * The tone of each status: nothing yet is neutral, a gap is orange (kastlan's choice — a\n * hue, not a verdict), a change since review is amber, sent back is red, done is green.\n */\nexport const REVIEW_STATUS_TONES: Readonly<Record<ReviewStatus, ChipTone>> = {\n  missing: \"orange\",\n  unreviewed: \"neutral\",\n  changed: \"warning\",\n  needs_change: \"danger\",\n  approved: \"success\",\n};\n\nexport interface ReviewStatusChipProps {\n  status: ReviewStatus;\n  /** Over {@link REVIEW_STATUS_TONES}. */\n  tone?: ChipTone;\n  /** Over the label. */\n  children?: ReactNode;\n  /** Default `sm` — a chip in a table cell. */\n  size?: ChipSize;\n  variant?: ChipVariant;\n  shape?: ChipShape;\n  caps?: boolean;\n  className?: string;\n  /** Prop > `<UiKitProvider labels={{ translationReview }}>` > English. */\n  labels?: LabelOverride<TranslationReviewLabels>;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/** One row's status as a chip, in the kit's words and tones. Carries `data-status`. */\nexport function ReviewStatusChip({\n  status,\n  tone,\n  children,\n  size = \"sm\",\n  variant,\n  shape,\n  caps,\n  className,\n  labels: labelsProp,\n  ...rest\n}: ReviewStatusChipProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  return (\n    <Chip\n      {...rest}\n      data-status={status}\n      tone={tone ?? REVIEW_STATUS_TONES[status]}\n      size={size}\n      variant={variant}\n      shape={shape}\n      caps={caps}\n      className={className}\n    >\n      {children ?? reviewStatusLabel(labels, status)}\n    </Chip>\n  );\n}\n\n// ── TranslationProgress ───────────────────────────────────────────────────────\n\nexport interface TranslationProgressProps {\n  /** One locale's rows — or their {@link summariseRows} when the app has only counts. */\n  rows?: readonly TranslationRow[];\n  summary?: TranslationSummary;\n  /** The list under the bar naming each part with its count. Default true. */\n  legend?: boolean;\n  className?: string;\n  labels?: LabelOverride<TranslationReviewLabels>;\n}\n\n/**\n * \"120 of 3859 approved\", and the bar split by status: approved, sent back, changed since\n * review, missing — in the chips' colours. What is left of the track is unreviewed. The\n * legend counts rows rather than percentages: \"12 need a change\" is the next hour's work,\n * \"0.3 %\" is not.\n */\nexport function TranslationProgress({\n  rows,\n  summary: summaryProp,\n  legend = true,\n  className,\n  labels: labelsProp,\n}: TranslationProgressProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  const { formatNumber } = useKitFormat();\n  const summary = useMemo(() => summaryProp ?? summariseRows(rows ?? []), [summaryProp, rows]);\n  const part = (status: ReviewStatus, tone: ProgressBarSegment[\"tone\"], color?: string): ProgressBarSegment => ({\n    key: status,\n    value: summary[status],\n    tone,\n    color,\n    label: reviewStatusLabel(labels, status),\n    // A status with no rows stays in the legend (\"Needs a change 0\" is news too) but out\n    // of the bar, where it would only be a gap.\n    legendOnly: summary[status] === 0 ? true : undefined,\n  });\n  const segments = [\n    part(\"approved\", \"success\"),\n    part(\"needs_change\", \"danger\"),\n    part(\"changed\", \"warning\"),\n    // The chip's orange, which is a hue and not a ProgressBar tone. Only where there is\n    // a gap: an app whose locales are complete never hears of \"missing\".\n    ...(summary.missing > 0 ? [part(\"missing\", undefined, \"var(--hue-orange)\")] : []),\n  ];\n  return (\n    <ProgressBar\n      className={className}\n      label={labels.progress(summary.approved, summary.total)}\n      max={Math.max(summary.total, 1)}\n      segments={segments}\n      legend={legend}\n      formatValue={(value) => formatNumber(value)}\n    />\n  );\n}\n\n// ── TranslationLocaleTabs ─────────────────────────────────────────────────────\n\nexport interface TranslationLocaleTab {\n  /** The locale code. */\n  value: string;\n  /** Its name, in its own language (\"Français\"). */\n  label: ReactNode;\n  /** The locale's rows, for the badge — built with the same `areas` as the panel's, so\n   *  a scoped reviewer's tab counts what they can see. */\n  rows: readonly TranslationRow[];\n}\n\nexport interface TranslationLocaleTabsProps {\n  /** The locales the viewer may see, in the app's order — the server's answer, never a\n   *  guess from a role name. */\n  locales: readonly TranslationLocaleTab[];\n  active: string;\n  onChange: (locale: string) => void;\n  className?: string;\n  labels?: LabelOverride<TranslationReviewLabels>;\n}\n\n/**\n * One tab per locale with its approved/total, wrapping on a phone. Nothing for a single\n * locale: a strip with one tab is a heading that looks clickable.\n */\nexport function TranslationLocaleTabs({ locales, active, onChange, className, labels: labelsProp }: TranslationLocaleTabsProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  if (locales.length < 2) return null;\n  return (\n    <Tabs\n      aria-label={labels.locales}\n      wrap\n      className={className}\n      tabs={locales.map((locale) => {\n        const summary = summariseRows(locale.rows);\n        return {\n          id: locale.value,\n          label: locale.label,\n          name: typeof locale.label === \"string\" ? locale.label : locale.value,\n          badge: (\n            // The tab's own colour, dimmed — a fixed muted grey vanished on the selected\n            // tab's brand fill (390px browser check).\n            <span className=\"text-xs tabular-nums opacity-75\">\n              {labels.localeProgress(summary.approved, summary.total)}\n            </span>\n          ),\n        };\n      })}\n      active={active}\n      onChange={onChange}\n    />\n  );\n}\n\n// ── TranslationExportButton ───────────────────────────────────────────────────\n\nexport interface TranslationExportButtonProps {\n  /** Every row the export covers — usually every locale's, not only the open one. */\n  rows: readonly TranslationRow[];\n  /** Listed in the file. Default: the locales the rows come from. */\n  locales?: readonly string[];\n  /** Default `translation-corrections-<date>.json`. */\n  fileName?: string;\n  /**\n   * Take the export instead of downloading it — the entries, and the file as a ready\n   * JSON Blob. Left out, the kit downloads the Blob as `fileName`.\n   */\n  onExport?: (corrections: TranslationCorrection[], file: Blob) => void;\n  className?: string;\n  labels?: LabelOverride<TranslationReviewLabels>;\n}\n\n/**\n * \"Export corrections (n)\": every string sent back, as the JSON file keksdose and kastlan\n * hand a developer — `{ exported_at, locales, corrections }`. Corrections are not applied\n * on the page: the strings are source code. Disabled while there is nothing to export.\n */\nexport function TranslationExportButton({\n  rows,\n  locales,\n  fileName,\n  onExport,\n  className,\n  labels: labelsProp,\n}: TranslationExportButtonProps) {\n  const labels = useKitLabels(\"translationReview\", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);\n  const corrections = useMemo(() => translationCorrections(rows), [rows]);\n  const run = () => {\n    const now = new Date();\n    const file = new Blob(\n      [\n        JSON.stringify(\n          {\n            exported_at: now.toISOString(),\n            locales: locales ?? [...new Set(rows.map((r) => r.locale))],\n            corrections,\n          },\n          null,\n          2,\n        ),\n      ],\n      { type: \"application/json\" },\n    );\n    if (onExport) {\n      onExport(corrections, file);\n      return;\n    }\n    saveBlob(file, fileName ?? `translation-corrections-${now.toISOString().slice(0, 10)}.json`);\n  };\n  return (\n    <Button variant=\"secondary\" disabled={corrections.length === 0} onClick={run} className={className}>\n      <Download className=\"size-4\" aria-hidden />\n      {labels.exportCorrections(corrections.length)}\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/translation-review.d.ts

@@ -1,18 +1,13 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { TranslationRow, TranslationReviewWrite, TranslationReviewKey, TranslationReviewFilter, TranslationReviewSwipeBinding } from '../lib/translation-review.js';
-import { TranslationReviewLabels } from './translation-review-labels.js';
-export { DEFAULT_TRANSLATION_REVIEW_LABELS } from './translation-review-labels.js';
-export { REVIEW_STATUS_TONES, ReviewStatusChip, ReviewStatusChipProps, TranslationExportButton, TranslationExportButtonProps, TranslationLocaleTab, TranslationLocaleTabs, TranslationLocaleTabsProps, TranslationProgress, TranslationProgressProps } from './translation-review-parts.js';
-export { TranslationReviewEditor, TranslationReviewEditorProps } from './translation-review-editor.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import './write-lock.js';
-
+import type { ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { TranslationReviewFilter, TranslationReviewKey, TranslationReviewSwipeBinding, TranslationReviewWrite, TranslationRow } from "../lib/translation-review.js";
+import type { TranslationReviewLabels } from "./translation-review-labels.js";
+export { REVIEW_STATUS_TONES, ReviewStatusChip, TranslationExportButton, TranslationLocaleTabs, TranslationProgress, } from "./translation-review-parts.js";
+export type { ReviewStatusChipProps, TranslationExportButtonProps, TranslationLocaleTab, TranslationLocaleTabsProps, TranslationProgressProps, } from "./translation-review-parts.js";
+export { TranslationReviewEditor } from "./translation-review-editor.js";
+export type { TranslationReviewEditorProps } from "./translation-review-editor.js";
+export { DEFAULT_TRANSLATION_REVIEW_LABELS } from "./translation-review-labels.js";
+export type { TranslationReviewLabels } from "./translation-review-labels.js";
 /**
  * An app's translation review page, as kit parts (H1, docs/i18n-harmonization.md):
  * keksdose's /translations, which kastlan was about to build a second time. The app keeps
@@ -33,7 +28,7 @@ import './write-lock.js';
  */
 type MaybePromise = void | Promise<unknown>;
 /** What asked for a write — see {@link TranslationReviewSaveInfo}. */
-type TranslationReviewOrigin = "editor" | "row" | "swipe" | "group" | "selection" | "undo";
+export type TranslationReviewOrigin = "editor" | "row" | "swipe" | "group" | "selection" | "undo";
 /**
  * The second argument of `onSave` and `onClear` (0.25): where the write came from, and
  * whether the panel answers it with a toast of its own.
@@ -47,7 +42,7 @@ type TranslationReviewOrigin = "editor" | "row" | "swipe" | "group" | "selection
  *
  * An app that ignores the argument keeps working; it only says "Saved" twice.
  */
-interface TranslationReviewSaveInfo {
+export interface TranslationReviewSaveInfo {
     /** The open editor, a row's approve button, a swipe on a phone card, a group's
      *  "Approve unreviewed", the selection's bulk bar, or an Undo pressed on the toast. */
     origin: TranslationReviewOrigin;
@@ -56,8 +51,8 @@ interface TranslationReviewSaveInfo {
     toasted: boolean;
 }
 /** How {@link TranslationReviewPanelProps.groupBy} names a row's group. */
-type TranslationReviewGroupBy = "namespace" | "source" | ((row: TranslationRow) => string);
-interface TranslationReviewPanelProps {
+export type TranslationReviewGroupBy = "namespace" | "source" | ((row: TranslationRow) => string);
+export interface TranslationReviewPanelProps {
     /** One locale's rows, from `translationRows`. */
     rows: readonly TranslationRow[];
     /** The reviewed language's own name — the text column's header ("Français"). */
@@ -108,8 +103,18 @@ interface TranslationReviewPanelProps {
     progress?: boolean;
     /** Rows per page. Default 50. */
     pageSize?: number;
-    /** Persists the table's sort and page size (DataTable's `storageKey`). */
+    /** Persists the table's sort and page size (DataTable's `storageKey`), under the
+     *  prefix below — under {@link groupBy}, the one sort and page size every group
+     *  shares, in the same place (0.35). */
     storageKey?: string;
+    /**
+     * The `localStorage` prefix in front of `storageKey` (DataTable's `storageKeyPrefix`).
+     * Left out, it is the provider's `tableStorageKeyPrefix`, then the kit's
+     * `"hbui-table:"` — so an app that sets its prefix on `UiKitProvider` needs nothing
+     * here. Before 0.34 the panel took no prefix and its view always landed under the
+     * kit's, which an app listing what it stores had to list as its own (KS U4).
+     */
+    storageKeyPrefix?: string;
     /** How a verdict's date reads in the editor. */
     formatDate?: (iso: string) => string;
     /** Turns a callback's rejection into words. Default {@link TranslationReviewLabels.failed}. */
@@ -189,7 +194,14 @@ interface TranslationReviewPanelProps {
      * reference; a column sort orders the rows INSIDE every group alike. Each group pages
      * on its own, `pageSize` rows at a time — a header then always stands over its own
      * rows, and paging one area does not move another — rather than one pager cutting
-     * through the headers. `storageKey` keeps persisting the ungrouped table only.
+     * through the headers. The page SIZE is one for all of them, as the sort is: a
+     * group's pager changes it everywhere.
+     *
+     * `storageKey` persists that one view — the sort and the page size — in the place the
+     * ungrouped table keeps its own (same key, same prefix, same blob), read on mount and
+     * written on a change, so a reviewer switching the grouping on or off keeps both
+     * (0.35, Kurvenschmiede; before, it persisted the ungrouped table only). What only
+     * the ungrouped table has — column widths, hidden columns — stays in the blob for it.
      *
      * Groups fold (each on its own, remembered while the panel lives), and a folded group's
      * rows are not rendered at all — only its header. Which groups start open is
@@ -233,7 +245,7 @@ interface TranslationReviewPanelProps {
      *  the page's `h1`. */
     groupHeadingAs?: "h2" | "h3" | "h4";
     className?: string;
-    labels?: Partial<TranslationReviewLabels>;
+    labels?: LabelOverride<TranslationReviewLabels>;
 }
 /**
  * The page body for one locale: progress, filters (status, source, namespace, search,
@@ -256,6 +268,4 @@ interface TranslationReviewPanelProps {
  * approval it takes back. A swipe on the next card while one is out is queued rather than
  * refused — a reviewer swiping down a list is faster than the server.
  */
-declare function TranslationReviewPanel({ rows: rowsProp, localeLabel, referenceLabel, onSave, onClear, readOnly, areas, areaLabels, inArea, sourceLabels, filter: filterProp, onFilterChange, progress, pageSize, storageKey, formatDate, formatError, swipe, undo: undoProp, groupBy, groupLabel, groupHeadingAs, defaultGroupsOpen, className, labels: labelsProp, }: TranslationReviewPanelProps): react.JSX.Element;
-
-export { type TranslationReviewGroupBy, TranslationReviewLabels, type TranslationReviewOrigin, TranslationReviewPanel, type TranslationReviewPanelProps, type TranslationReviewSaveInfo };
+export declare function TranslationReviewPanel({ rows: rowsProp, localeLabel, referenceLabel, onSave, onClear, readOnly, areas, areaLabels, inArea, sourceLabels, filter: filterProp, onFilterChange, progress, pageSize, storageKey, storageKeyPrefix, formatDate, formatError, swipe, undo: undoProp, groupBy, groupLabel, groupHeadingAs, defaultGroupsOpen, className, labels: labelsProp, }: TranslationReviewPanelProps): import("react").JSX.Element;

package/dist/components/translation-review.js

@@ -27,10 +27,13 @@ import { Disclosure } from "./disclosure.js";
 import { SearchField } from "./search-field.js";
 import { toast } from "./toast.js";
 import { ToggleGroup } from "./toggle-group.js";
+import { useSharedTableView } from "./use-table-state.js";
 import { TranslationReviewEditor } from "./translation-review-editor.js";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from "./translation-review-labels.js";
 import { ReviewStatusChip, TranslationProgress } from "./translation-review-parts.js";
-import { Button, IconButton, Select } from "./ui.js";
+import { Button } from "./button.js";
+import { IconButton } from "./icon-button.js";
+import { Select } from "./select.js";
 import { COMMIT_EXCEPT_BILLING, useWriteLock } from "./write-lock.js";
 import {
   REVIEW_STATUS_TONES,
@@ -89,7 +92,7 @@ function useFilterEchoCheck(filterProp) {
   };
 }
 function TextCell({ row, labels, clamp }) {
-  return row.text === "" ? /* @__PURE__ */ jsx("span", { className: "italic text-[var(--text-muted)]", children: labels.missingText }) : /* @__PURE__ */ jsx("span", { lang: row.locale, className: cn("whitespace-pre-line break-words", clamp && "line-clamp-3"), children: row.text });
+  return row.text === "" ? /* @__PURE__ */ jsx("span", { className: "italic text-muted", children: labels.missingText }) : /* @__PURE__ */ jsx("span", { lang: row.locale, className: cn("whitespace-pre-line break-words", clamp && "line-clamp-3 large:line-clamp-none"), children: row.text });
 }
 function TranslationReviewPanel({
   rows: rowsProp,
@@ -107,6 +110,7 @@ function TranslationReviewPanel({
   progress = true,
   pageSize = 50,
   storageKey,
+  storageKeyPrefix,
   formatDate,
   formatError,
   swipe = false,
@@ -176,7 +180,12 @@ function TranslationReviewPanel({
   };
   const [confirming, setConfirming] = useState(null);
   const confirmFocus = useRef(null);
-  const [groupSorts, setGroupSorts] = useState([]);
+  const groupView = useSharedTableView({
+    active: groupBy !== void 0,
+    storageKey,
+    storageKeyPrefix,
+    defaultPageSize: pageSize
+  });
   const setFilter = (patch) => {
     const next = { ...filter, ...patch };
     setOwnFilter(next);
@@ -289,14 +298,14 @@ function TranslationReviewPanel({
     {
       key: "key",
       header: labels.key,
-      cell: (r) => /* @__PURE__ */ jsx("code", { className: "break-all text-xs text-[var(--text-secondary)]", children: r.key }),
+      cell: (r) => /* @__PURE__ */ jsx("code", { className: "break-all text-xs text-secondary", children: r.key }),
       sortBy: (r) => r.key,
       mobileHidden: true
     },
     {
       key: "reference",
       header: referenceLabel,
-      cell: (r) => /* @__PURE__ */ jsx("span", { className: "line-clamp-3 whitespace-pre-line break-words text-[var(--text-secondary)]", children: r.reference }),
+      cell: (r) => /* @__PURE__ */ jsx("span", { className: "line-clamp-3 whitespace-pre-line break-words text-secondary", children: r.reference }),
       mobileHidden: true
     },
     {
@@ -419,10 +428,12 @@ function TranslationReviewPanel({
         frame: false,
         chrome: "minimal",
         maxBodyHeight: "none",
-        sorts: groupSorts,
-        onSortsChange: setGroupSorts,
+        sorts: groupView.sorts,
+        onSortsChange: groupView.setSorts,
+        pageSize: groupView.pageSize,
+        onPageSizeChange: groupView.setPageSize,
         labels: { table: group.name }
-      } : { storageKey },
+      } : { storageKey, storageKeyPrefix },
       isExpanded: (r) => r.id === openId,
       onRowClick: (r) => {
         if (openId !== r.id) keepGroupOpen(group?.key);
@@ -450,8 +461,8 @@ function TranslationReviewPanel({
         r.id
       ),
       mobileCard: (r) => /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-        /* @__PURE__ */ jsx("code", { className: "block break-all text-xs text-[var(--text-muted)]", children: r.key }),
-        /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--text-primary)]", children: /* @__PURE__ */ jsx(TextCell, { row: r, labels, clamp: true }) }),
+        /* @__PURE__ */ jsx("code", { className: "block break-all text-xs text-muted", children: r.key }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-primary", children: /* @__PURE__ */ jsx(TextCell, { row: r, labels, clamp: true }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
           /* @__PURE__ */ jsx(ReviewStatusChip, { status: r.status, labels: labelsProp }),
           r.placeholderMismatch && /* @__PURE__ */ jsx(Chip, { size: "sm", tone: "danger", variant: "outline", children: labels.placeholderChip })
@@ -497,9 +508,9 @@ function TranslationReviewPanel({
             ]
           }
         ) : void 0,
-        bodyClassName: "space-y-0 px-0 pb-0 border-t border-[var(--border)]",
+        bodyClassName: "space-y-0 px-0 pb-0 border-t border-subtle",
         children: [
-          body && confirming === g.key && targets.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--border)] p-3", children: /* @__PURE__ */ jsx(AlertBanner, { tone: "warning", size: "sm", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+          body && confirming === g.key && targets.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-b border-subtle p-3", children: /* @__PURE__ */ jsx(AlertBanner, { tone: "warning", size: "sm", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
             /* @__PURE__ */ jsx("p", { id: questionId, children: labels.confirmGroup(targets.length, name) }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
               /* @__PURE__ */ jsx(
@@ -573,7 +584,7 @@ function TranslationReviewPanel({
         SearchField,
         {
           className: "min-w-0 md:flex-1",
-          label: labels.search,
+          "aria-label": labels.search,
           value: filter.query,
           onChange: (next) => setFilter({ query: next })
         }