@eifi1/ui-kit 0.33.1 → 0.34.0

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,17 @@ 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. */
     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}. */
@@ -233,7 +237,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 +260,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

@@ -30,7 +30,9 @@ import { ToggleGroup } from "./toggle-group.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 +91,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 +109,7 @@ function TranslationReviewPanel({
   progress = true,
   pageSize = 50,
   storageKey,
+  storageKeyPrefix,
   formatDate,
   formatError,
   swipe = false,
@@ -289,14 +292,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
     },
     {
@@ -422,7 +425,7 @@ function TranslationReviewPanel({
         sorts: groupSorts,
         onSortsChange: setGroupSorts,
         labels: { table: group.name }
-      } : { storageKey },
+      } : { storageKey, storageKeyPrefix },
       isExpanded: (r) => r.id === openId,
       onRowClick: (r) => {
         if (openId !== r.id) keepGroupOpen(group?.key);
@@ -450,8 +453,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 +500,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 +576,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 })
         }