@focus-reactive/payload-plugin-translator 0.7.2 → 0.8.0

package/dist/client/entities/translation/ui/ActionButton/styles.module.scss

@@ -0,0 +1,11 @@
+// `button.action` (element + class) outranks the Button variant's own single-class rules, so the
+// neutral colour + visible border win regardless of stylesheet order.
+button.action {
+  color: var(--theme-elevation-600, #666);
+  border: 1px solid var(--theme-elevation-150, #d9d9d9);
+}
+
+button.action:hover:not(:disabled) {
+  color: var(--theme-text, #222);
+  border-color: var(--theme-elevation-300, #b3b3b3);
+}

package/dist/client/entities/translation/ui/PanelStatusMarker/PanelStatusMarker.d.ts

@@ -0,0 +1,12 @@
+import type { MarkerTone } from "../../model/panelStatus";
+/**
+ * The aggregate status dot overlaid on a translate trigger's top-right corner. Uses the SAME
+ * coloured-dot vocabulary as the popup's per-locale status list ({@link MARKER_DOT}), so the panel
+ * badge and the popup rows read as one system. Shared by the document and collection triggers.
+ *
+ * Colour is not the sole cue: the host button carries a `title` + `aria-label` naming the exact
+ * state for assistive tech (this dot is `aria-hidden`), and in-progress carries a pulse.
+ */
+export declare function PanelStatusMarker({ tone }: {
+    tone?: MarkerTone;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/client/entities/translation/ui/PanelStatusMarker/PanelStatusMarker.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ColorIndicator from "../../../../shared/ui/ColorIndicator";
+import { MARKER_DOT } from "../../model/panelStatus";
+import styles from "./styles.module.scss";
+/**
+ * The aggregate status dot overlaid on a translate trigger's top-right corner. Uses the SAME
+ * coloured-dot vocabulary as the popup's per-locale status list ({@link MARKER_DOT}), so the panel
+ * badge and the popup rows read as one system. Shared by the document and collection triggers.
+ *
+ * Colour is not the sole cue: the host button carries a `title` + `aria-label` naming the exact
+ * state for assistive tech (this dot is `aria-hidden`), and in-progress carries a pulse.
+ */ export function PanelStatusMarker({ tone }) {
+    if (!tone) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("span", {
+        className: styles.marker,
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx(ColorIndicator, {
+            $color: MARKER_DOT[tone].color,
+            $animated: MARKER_DOT[tone].animated
+        })
+    });
+}
+
+//# sourceMappingURL=PanelStatusMarker.js.map

package/dist/client/entities/translation/ui/PanelStatusMarker/index.d.ts

@@ -0,0 +1 @@
+export { PanelStatusMarker } from "./PanelStatusMarker";

package/dist/client/entities/translation/ui/PanelStatusMarker/index.js

@@ -0,0 +1,3 @@
+export { PanelStatusMarker } from "./PanelStatusMarker";
+
+//# sourceMappingURL=index.js.map

package/dist/client/entities/translation/ui/PanelStatusMarker/styles.module.scss

@@ -0,0 +1,12 @@
+// Aggregate status dot at the trigger's top-right corner. Positioning + a ring in the panel
+// background so the dot reads as a badge against the button fill.
+.marker {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  display: flex;
+}
+
+.marker > div {
+  box-shadow: 0 0 0 2px var(--theme-elevation-0, #fff);
+}

package/dist/client/entities/translation/ui/TranslationDirection/styles.module.scss

@@ -1,8 +1,8 @@
 .container {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  font-size: 1rem;
+  gap: 0.4rem;
+  font-size: 0.9rem;
   font-weight: 500;
 }
 

package/dist/client/entities/translation/ui/TranslationStatusList/StatusBadge.d.ts

@@ -0,0 +1,10 @@
+import type { TranslationRowState } from "../../model/statusRows";
+/** Human label per state — also the row's accessible name (state is not conveyed by colour alone). */
+export declare const STATE_LABEL: Record<TranslationRowState, string>;
+/**
+ * Small per-row status dot. The colour is a secondary cue only — every row carries the state as
+ * text ({@link STATE_LABEL}) in its meta line, so the dot never conveys state by colour alone.
+ */
+export declare function StatusBadge({ state }: {
+    state: TranslationRowState;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/client/entities/translation/ui/TranslationStatusList/StatusBadge.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ColorIndicator from "../../../../shared/ui/ColorIndicator";
+import { STATE_DOT } from "../../model/statusRows";
+import styles from "./styles.module.scss";
+/** Human label per state — also the row's accessible name (state is not conveyed by colour alone). */ export const STATE_LABEL = {
+    failed: "Failed",
+    running: "Translating",
+    pending: "Queued",
+    stale: "Out of date",
+    translated: "Translated"
+};
+/**
+ * Small per-row status dot. The colour is a secondary cue only — every row carries the state as
+ * text ({@link STATE_LABEL}) in its meta line, so the dot never conveys state by colour alone.
+ */ export function StatusBadge({ state }) {
+    const dot = STATE_DOT[state];
+    return /*#__PURE__*/ _jsx("span", {
+        className: styles.badge,
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx(ColorIndicator, {
+            $color: dot.color,
+            $animated: dot.animated
+        })
+    });
+}
+
+//# sourceMappingURL=StatusBadge.js.map

package/dist/client/entities/translation/ui/TranslationStatusList/TranslationStatusList.d.ts

@@ -0,0 +1,14 @@
+import type { CollectionSlug } from "payload";
+import type { TranslationStatusRow } from "../../model/statusRows";
+type TranslationStatusListProps = {
+    rows: TranslationStatusRow[];
+    collection: CollectionSlug;
+    id: string;
+};
+/**
+ * The unified per-locale status list: one consistent row per target locale
+ * (`[badge] [en→fr] [when] [action]`). Replaces the old corner chip, the "out of date" column, and
+ * the separate running/pending/failed chips. Row actions reuse the existing mutation hooks.
+ */
+export declare function TranslationStatusList({ rows, collection, id }: TranslationStatusListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/client/entities/translation/ui/TranslationStatusList/TranslationStatusList.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { toast } from "@payloadcms/ui";
+import { useState } from "react";
+import { CheckIcon } from "../../../../shared/lib/assets/icons/CheckIcon";
+import { CloseIcon } from "../../../../shared/lib/assets/icons/CloseIcon";
+import { ReloadIcon } from "../../../../shared/lib/assets/icons/ReloadIcon";
+import { useCancelDocumentTranslation } from "../../api/mutations/useCancelDocumentTranslation";
+import { useDismissStaleness } from "../../api/mutations/useDismissStaleness";
+import { useQueueDocumentTranslation } from "../../api/mutations/useQueueDocumentTranslation";
+import { useRunDocumentTranslation } from "../../api/mutations/useRunDocumentTranslation";
+import { ActionButton } from "../ActionButton";
+import { TranslationDirection } from "../TranslationDirection";
+import { STATE_LABEL, StatusBadge } from "./StatusBadge";
+import styles from "./styles.module.scss";
+const shortDate = (iso)=>new Date(iso).toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric"
+    });
+const fullDate = (iso)=>new Date(iso).toLocaleString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+    });
+const withToast = async (run, fallback)=>{
+    try {
+        await run();
+    } catch (e) {
+        toast.error(e instanceof Error ? e.message : fallback);
+    }
+};
+/**
+ * The unified per-locale status list: one consistent row per target locale
+ * (`[badge] [en→fr] [when] [action]`). Replaces the old corner chip, the "out of date" column, and
+ * the separate running/pending/failed chips. Row actions reuse the existing mutation hooks.
+ */ export function TranslationStatusList({ rows, collection, id }) {
+    const runApi = useRunDocumentTranslation();
+    const cancelApi = useCancelDocumentTranslation();
+    const dismissApi = useDismissStaleness();
+    const queueApi = useQueueDocumentTranslation();
+    const [dismissing, setDismissing] = useState(new Set());
+    const dismiss = async (targetLocale)=>{
+        setDismissing((prev)=>new Set(prev).add(targetLocale));
+        await withToast(()=>dismissApi.mutateAsync({
+                collection,
+                id,
+                target_lng: targetLocale
+            }), "Failed to dismiss out-of-date notice");
+        setDismissing((prev)=>{
+            const next = new Set(prev);
+            next.delete(targetLocale);
+            return next;
+        });
+    };
+    // Re-translate one locale in place: a fresh source→target job (overwrite). Reuses the same queue
+    // endpoint as the form; onSuccess invalidation refreshes this list.
+    const reTranslate = (row)=>withToast(()=>queueApi.mutateAsync({
+                source_lng: row.sourceLocale,
+                target_lng: row.targetLocale,
+                collection_slug: collection,
+                collection_id: [
+                    id
+                ],
+                strategy: "overwrite"
+            }), "Failed to queue translation");
+    const retry = (row)=>row.jobId && withToast(()=>runApi.mutateAsync({
+                id: row.jobId
+            }), "Error retrying");
+    const runNow = (row)=>row.jobId && withToast(()=>runApi.mutateAsync({
+                id: row.jobId
+            }), "Error running");
+    const cancel = (row)=>row.jobId && withToast(()=>cancelApi.mutateAsync({
+                id: row.jobId
+            }), "Error cancelling");
+    const renderAction = (row)=>{
+        switch(row.state){
+            case "failed":
+                return /*#__PURE__*/ _jsx("span", {
+                    className: styles.actions,
+                    children: /*#__PURE__*/ _jsx(ActionButton, {
+                        icon: /*#__PURE__*/ _jsx(ReloadIcon, {}),
+                        title: "Retry",
+                        onClick: ()=>retry(row),
+                        loading: runApi.isPending
+                    })
+                });
+            case "running":
+                return /*#__PURE__*/ _jsx("span", {
+                    className: styles.actions,
+                    children: /*#__PURE__*/ _jsx(ActionButton, {
+                        icon: /*#__PURE__*/ _jsx(CloseIcon, {}),
+                        title: "Cancel",
+                        onClick: ()=>cancel(row),
+                        loading: cancelApi.isPending
+                    })
+                });
+            case "pending":
+                return /*#__PURE__*/ _jsxs("span", {
+                    className: styles.actions,
+                    children: [
+                        /*#__PURE__*/ _jsx(ActionButton, {
+                            icon: /*#__PURE__*/ _jsx(ReloadIcon, {}),
+                            title: "Run now",
+                            onClick: ()=>runNow(row),
+                            loading: runApi.isPending
+                        }),
+                        /*#__PURE__*/ _jsx(ActionButton, {
+                            icon: /*#__PURE__*/ _jsx(CloseIcon, {}),
+                            title: "Cancel",
+                            onClick: ()=>cancel(row),
+                            loading: cancelApi.isPending
+                        })
+                    ]
+                });
+            case "stale":
+                return /*#__PURE__*/ _jsxs("span", {
+                    className: styles.actions,
+                    children: [
+                        /*#__PURE__*/ _jsx(ActionButton, {
+                            icon: /*#__PURE__*/ _jsx(ReloadIcon, {}),
+                            title: `Re-translate from ${row.sourceLocale}`,
+                            onClick: ()=>reTranslate(row),
+                            loading: queueApi.isPending
+                        }),
+                        /*#__PURE__*/ _jsx(ActionButton, {
+                            icon: /*#__PURE__*/ _jsx(CheckIcon, {}),
+                            title: "Keep as is — hide until the source changes again",
+                            onClick: ()=>dismiss(row.targetLocale),
+                            disabled: dismissing.has(row.targetLocale),
+                            loading: dismissing.has(row.targetLocale)
+                        })
+                    ]
+                });
+            default:
+                return null;
+        }
+    };
+    return /*#__PURE__*/ _jsx("ul", {
+        className: styles.list,
+        children: rows.map((row)=>/*#__PURE__*/ _jsxs("li", {
+                className: styles.row,
+                "aria-label": `${STATE_LABEL[row.state]}: ${row.sourceLocale} to ${row.targetLocale}` + (row.error ? ` — ${row.error}` : ""),
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.top,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: styles.lead,
+                                children: [
+                                    /*#__PURE__*/ _jsx(StatusBadge, {
+                                        state: row.state
+                                    }),
+                                    /*#__PURE__*/ _jsx(TranslationDirection, {
+                                        sourceLocale: row.sourceLocale,
+                                        targetLocale: row.targetLocale
+                                    })
+                                ]
+                            }),
+                            renderAction(row)
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.meta,
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: STATE_LABEL[row.state]
+                            }),
+                            row.at && /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        "aria-hidden": "true",
+                                        children: "·"
+                                    }),
+                                    /*#__PURE__*/ _jsx("time", {
+                                        dateTime: row.at,
+                                        title: fullDate(row.at),
+                                        children: shortDate(row.at)
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    row.state === "failed" && row.error && /*#__PURE__*/ _jsx("p", {
+                        className: styles.error,
+                        title: row.error,
+                        children: row.error
+                    })
+                ]
+            }, row.targetLocale))
+    });
+}
+
+//# sourceMappingURL=TranslationStatusList.js.map

package/dist/client/entities/translation/ui/TranslationStatusList/index.d.ts

@@ -0,0 +1 @@
+export { TranslationStatusList } from "./TranslationStatusList";

package/dist/client/entities/translation/ui/TranslationStatusList/index.js

@@ -0,0 +1,3 @@
+export { TranslationStatusList } from "./TranslationStatusList";
+
+//# sourceMappingURL=index.js.map

package/dist/client/entities/translation/ui/TranslationStatusList/styles.module.scss

@@ -0,0 +1,72 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  font-size: 0.8125rem;
+}
+
+// First line: [dot + direction] on the left, action on the right.
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  // Constant first-line height (with or without an action button) keeps vertical rhythm even.
+  min-height: 1.5rem;
+}
+
+// Dot + direction share one flex line so they centre together regardless of the action's height.
+.lead {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  // Align under the direction: dot width (8px) + .lead gap (0.5rem).
+  padding-left: calc(8px + 0.5rem);
+  font-size: 0.6875rem;
+  color: var(--theme-elevation-500, #8c8c8c);
+}
+
+// Failure reason for a failed row. Sparing red: a 2px accent rule + red dot carry the semantics,
+// the message text stays caption-neutral so the row never becomes a red block. Clamped to 2 lines;
+// full text lives in the native title (and the row's aria-label).
+.error {
+  margin: 0.125rem 0 0 calc(8px + 0.5rem);
+  padding-left: 0.5rem;
+  border-left: 2px solid var(--theme-error-600, #dc2626);
+  font-size: 0.6875rem;
+  font-weight: 400;
+  line-height: 1.35;
+  color: var(--theme-elevation-500, #8c8c8c);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// Inline wrapper so the dot centres on the direction line via .lead's align-items.
+.badge {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.actions {
+  display: inline-flex;
+  gap: 0.25rem;
+}

package/dist/client/features/collection-translation-form/ui/CollectionTranslationForm.js

@@ -16,30 +16,22 @@ export function CollectionTranslationForm({ form, onSubmit, selectedCount, hasDr
                 /*#__PURE__*/ _jsxs("div", {
                     className: styles.row,
                     children: [
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: styles["locale-group"],
-                            children: [
-                                /*#__PURE__*/ _jsx(FormSelectLocale, {
-                                    label: "From",
-                                    className: styles["select-locale-field"],
-                                    size: "md",
-                                    name: FORM_FIELDS.SOURCE_LNG
-                                }),
-                                /*#__PURE__*/ _jsx(FormSelectLocale, {
-                                    label: "To",
-                                    className: styles["select-locale-field"],
-                                    size: "md",
-                                    name: FORM_FIELDS.TARGET_LNG
-                                })
-                            ]
+                        /*#__PURE__*/ _jsx(FormSelectLocale, {
+                            size: "sm",
+                            label: "From",
+                            name: FORM_FIELDS.SOURCE_LNG
                         }),
-                        /*#__PURE__*/ _jsx(FormSelectStrategy, {
-                            className: styles["strategy-field"],
-                            name: FORM_FIELDS.STRATEGY,
-                            size: "md"
+                        /*#__PURE__*/ _jsx(FormSelectLocale, {
+                            size: "sm",
+                            label: "To",
+                            name: FORM_FIELDS.TARGET_LNG
                         })
                     ]
                 }),
+                /*#__PURE__*/ _jsx(FormSelectStrategy, {
+                    size: "sm",
+                    name: FORM_FIELDS.STRATEGY
+                }),
                 hasDrafts && /*#__PURE__*/ _jsx(FormCheckboxPublish, {
                     name: FORM_FIELDS.PUBLISH_ON_TRANSLATION
                 }),
@@ -53,10 +45,14 @@ export function CollectionTranslationForm({ form, onSubmit, selectedCount, hasDr
                     className: styles["submit-button"],
                     onClick: form.handleSubmit(onSubmit),
                     type: "submit",
-                    $size: "md",
+                    $size: "sm",
                     $isLoading: form.formState.isSubmitting,
                     $startContent: /*#__PURE__*/ _jsx(SendIcon, {}),
                     children: selectedCount ? `Queue ${selectedCount} translations` : "Queue translations"
+                }),
+                selectedCount === 0 && /*#__PURE__*/ _jsx("p", {
+                    className: styles.caption,
+                    children: "Select rows in the list to translate."
                 })
             ]
         })

package/dist/client/features/collection-translation-form/ui/styles.module.scss

@@ -1,7 +1,7 @@
 .fieldset {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
   border-width: 0;
   margin: 0;
   padding: 0;
@@ -9,23 +9,23 @@
 
 .row {
   display: flex;
-  align-items: flex-end;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
-.locale-group {
-  display: flex;
-  gap: 1rem;
-}
-
-.select-locale-field {
-  min-width: 70px;
-}
-
-.strategy-field {
-  min-width: 150px;
+// From / To share the row equally and are allowed to shrink with the narrow popup.
+.row > * {
+  flex: 1 1 0;
+  min-width: 0;
 }
 
 .submit-button {
+  margin: 0;
   width: 100%;
 }
+
+// Empty-state hint: only shown when nothing is selected, so the disabled button isn't a dead end.
+.caption {
+  margin: 0;
+  font-size: 0.6875rem;
+  color: var(--theme-elevation-500, #8c8c8c);
+}

package/dist/client/features/collection-translation-popup/ui/CollectionTranslationPopup.d.ts

@@ -1,7 +1,9 @@
 import type { PropsWithChildren } from "react";
+import type { PanelStatus } from "../../../entities/translation";
 type CollectionTranslationPopupProps = PropsWithChildren<{
-    translationInProgress: boolean;
+    /** Aggregate status across the collection's jobs → the corner marker (same as the document trigger). */
+    status?: PanelStatus;
     selectedCount: number;
 }>;
-declare function CollectionTranslationPopup({ children, translationInProgress, selectedCount, }: CollectionTranslationPopupProps): import("react/jsx-runtime").JSX.Element;
+declare function CollectionTranslationPopup({ children, status, selectedCount, }: CollectionTranslationPopupProps): import("react/jsx-runtime").JSX.Element;
 export default CollectionTranslationPopup;

package/dist/client/features/collection-translation-popup/ui/CollectionTranslationPopup.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { describePanelStatus, PanelStatusMarker } from "../../../entities/translation";
 import { LanguageTranslateIcon } from "../../../shared/lib/assets/icons/LanguageTranslateIcon";
 import { useToggle } from "../../../shared/lib/utils/react/useToggle";
 import Button from "../../../shared/ui/Button";
-import ColorIndicator from "../../../shared/ui/ColorIndicator";
 import Popup from "../../../shared/ui/Popup";
 import styles from "./styles.module.scss";
-function CollectionTranslationPopup({ children, translationInProgress, selectedCount }) {
+function CollectionTranslationPopup({ children, status, selectedCount }) {
     const [isPopupOpen, popupOpen] = useToggle();
+    const { tone, title } = describePanelStatus(status, "Bulk translation");
     return /*#__PURE__*/ _jsx(Popup, {
         $align: "start",
         onOpenChange: popupOpen.setValue,
@@ -15,16 +16,12 @@ function CollectionTranslationPopup({ children, translationInProgress, selectedC
             $size: "md",
             $variant: "outlined-light",
             className: styles["popup-trigger-button"],
-            "aria-label": "Open translation options",
+            "aria-label": `Open translation options — ${title}`,
+            title: title,
             onClick: popupOpen.setTrue,
             children: [
-                translationInProgress && /*#__PURE__*/ _jsx(ColorIndicator, {
-                    title: "Translations In Progress",
-                    $animated: true,
-                    $color: "blue"
-                }),
                 /*#__PURE__*/ _jsx(LanguageTranslateIcon, {}),
-                selectedCount > 0 && !translationInProgress && /*#__PURE__*/ _jsxs(_Fragment, {
+                selectedCount > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
                         /*#__PURE__*/ _jsx("span", {
                             className: styles.arrow,
@@ -33,6 +30,9 @@ function CollectionTranslationPopup({ children, translationInProgress, selectedC
                         }),
                         selectedCount
                     ]
+                }),
+                /*#__PURE__*/ _jsx(PanelStatusMarker, {
+                    tone: tone
                 })
             ]
         }),

package/dist/client/features/collection-translation-popup/ui/styles.module.scss

@@ -1,15 +1,17 @@
 .popup-content {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem 1rem;
-  max-width: 350px;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  width: 18rem; // match the document popup — same form shape, so same width
+  max-width: calc(100vw - 24px);
 }
 
 .popup-trigger-button {
   font-size: 1.3rem;
   display: flex;
   gap: 0.25rem;
+  position: relative; // anchor for the corner status marker
 }
 
 .arrow {

package/dist/client/features/collection-translation-progress/ui/CollectionTranslationProgress.d.ts

@@ -4,5 +4,9 @@ type CollectionTranslationProgressProps = {
     data: GroupedCollectionTranslationStatus | undefined;
     isPending: boolean;
 };
-export declare function CollectionTranslationProgress({ collection, data, isPending, }: CollectionTranslationProgressProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Collection status as a compact list of grouped counts — one `[dot] label … count` row per
+ * non-zero group, mirroring the document popup's per-locale list rhythm (dot vocabulary shared).
+ */
+export declare function CollectionTranslationProgress({ collection, data, isPending, }: CollectionTranslationProgressProps): import("react/jsx-runtime").JSX.Element | null;
 export {};