@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/TranslationHub/BulkTranslatePreflightModal.js

@@ -0,0 +1,879 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { readResponseError } from '../shared/fetch-error-body.js';
+import { formatCost } from '../shared/format.js';
+import { BulkTranslatePostEnqueueTransition } from './BulkTranslatePostEnqueueTransition.js';
+import { useFocusTrap } from './useFocusTrap.js';
+const OVERLAY_STYLE = {
+    position: 'fixed',
+    inset: 0,
+    background: 'rgba(0,0,0,0.45)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '2rem 1rem',
+    zIndex: 200
+};
+const MODAL_STYLE = {
+    width: '100%',
+    maxWidth: '480px',
+    maxHeight: 'calc(100vh - 4rem)',
+    overflowY: 'auto',
+    background: 'var(--theme-elevation-0)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '6px',
+    boxShadow: '0 10px 30px rgba(0,0,0,0.15)',
+    padding: '1.5rem',
+    color: 'var(--theme-elevation-1000)'
+};
+const SECTION_LABEL = {
+    fontSize: '0.6875rem',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    color: 'var(--theme-elevation-500)',
+    margin: '0 0 0.35rem'
+};
+const SKELETON_STYLE = {
+    height: '1.25rem',
+    width: '6rem',
+    background: 'var(--theme-elevation-100)',
+    borderRadius: '4px',
+    opacity: 0.7
+};
+const COST_TEXT_STYLE = {
+    fontSize: '1.25rem',
+    fontWeight: 600,
+    color: 'var(--theme-elevation-1000)'
+};
+const INPUT_STYLE = {
+    width: '100%',
+    padding: '0.4rem 0.6rem',
+    background: 'var(--theme-elevation-0)',
+    border: '1px solid var(--theme-elevation-300)',
+    borderRadius: '4px',
+    color: 'var(--theme-elevation-1000)',
+    fontSize: '0.875rem',
+    fontFamily: 'inherit'
+};
+const ERROR_TEXT = {
+    color: 'var(--theme-error-500, #b91c1c)',
+    fontSize: '0.8125rem',
+    marginTop: '0.4rem'
+};
+const TIMEOUT_MS = 10_000;
+/** Pure helper, exported for tests. */ export function deriveCostState(preflight, timedOut) {
+    if (!preflight) {
+        return timedOut ? {
+            kind: 'timeout'
+        } : {
+            kind: 'loading'
+        };
+    }
+    if (typeof preflight.estimatedCostUsd === 'number') {
+        return {
+            kind: 'ready',
+            value: preflight.estimatedCostUsd
+        };
+    }
+    return {
+        kind: 'unavailable'
+    };
+}
+/** Pure helper, exported for tests. */ export function isCapBlocked(preflight) {
+    if (!preflight) {
+        return false;
+    }
+    const estimate = typeof preflight.estimatedCostUsd === 'number' ? preflight.estimatedCostUsd : 0;
+    return preflight.dailySpend.spentUsd + estimate > preflight.dailySpend.capUsd;
+}
+export const BulkTranslatePreflightModal = ({ basePath, onClose })=>{
+    const dialogRef = useRef(null);
+    const [preflight, setPreflight] = useState(null);
+    const [loadError, setLoadError] = useState(null);
+    const [timedOut, setTimedOut] = useState(false);
+    const [retryNonce, setRetryNonce] = useState(0);
+    const [force, setForce] = useState(false);
+    const [totp, setTotp] = useState('');
+    const [submitError, setSubmitError] = useState(null);
+    const [submitting, setSubmitting] = useState(false);
+    const [postEnqueueVisible, setPostEnqueueVisible] = useState(false);
+    // Locale selection — initialized once when preflight arrives. Empty
+    // until the preflight resolves; defaults to "all selected" on first
+    // load. The operator can toggle individual locales off to narrow the
+    // run; the displayed cost scales linearly with selected count.
+    const [selectedLocales, setSelectedLocales] = useState([]);
+    // v1.2.7: scope selection — same pattern as locales. Editor can
+    // narrow the run to specific collections / globals. Defaults to "all
+    // selected" on first load. The enqueue endpoint already supports
+    // narrowed scope via `scope.collections` / `scope.globals` (see
+    // endpoints/translation-hub/enqueue.ts:459-463) — when the array is
+    // non-empty it overrides the plugin-config defaults.
+    const [selectedCollections, setSelectedCollections] = useState([]);
+    const [selectedGlobals, setSelectedGlobals] = useState([]);
+    useEffect(()=>{
+        if (preflight && selectedLocales.length === 0) {
+            setSelectedLocales(preflight.scope.locales);
+        }
+        if (preflight && selectedCollections.length === 0 && selectedGlobals.length === 0) {
+            setSelectedCollections(preflight.scope.collections);
+            setSelectedGlobals(preflight.scope.globals);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        preflight
+    ]);
+    const toggleLocale = (code)=>{
+        setSelectedLocales((prev)=>prev.includes(code) ? prev.filter((c)=>c !== code) : [
+                ...prev,
+                code
+            ]);
+    };
+    const toggleCollection = (slug)=>{
+        setSelectedCollections((prev)=>prev.includes(slug) ? prev.filter((s)=>s !== slug) : [
+                ...prev,
+                slug
+            ]);
+    };
+    const toggleGlobal = (slug)=>{
+        setSelectedGlobals((prev)=>prev.includes(slug) ? prev.filter((s)=>s !== slug) : [
+                ...prev,
+                slug
+            ]);
+    };
+    useFocusTrap(dialogRef, {
+        enabled: !postEnqueueVisible,
+        onEscape: onClose
+    });
+    useEffect(()=>{
+        let cancelled = false;
+        setPreflight(null);
+        setLoadError(null);
+        setTimedOut(false);
+        const timer = setTimeout(()=>{
+            if (!cancelled) {
+                setTimedOut(true);
+            }
+        }, TIMEOUT_MS);
+        (async ()=>{
+            try {
+                const res = await fetch(`${basePath}/api/translation-hub/bulk-translate/preflight`, {
+                    credentials: 'include'
+                });
+                if (cancelled) {
+                    return;
+                }
+                if (!res.ok) {
+                    throw new Error(await readResponseError(res));
+                }
+                const json = await res.json();
+                setPreflight(json);
+                setTimedOut(false);
+            } catch (e) {
+                if (!cancelled) {
+                    setLoadError(e instanceof Error ? e.message : String(e));
+                }
+            }
+        })();
+        return ()=>{
+            cancelled = true;
+            clearTimeout(timer);
+        };
+    }, [
+        basePath,
+        retryNonce
+    ]);
+    // Scale the displayed cost proportionally to the locale selection.
+    // The preflight returns cost for the FULL locale set; selecting a
+    // subset multiplies by (selected / total). Approximation is exact
+    // for evenly-sized locales (which is the common case — same source
+    // doc translated N times).
+    const scaledPreflight = (()=>{
+        if (!preflight) return null;
+        const totalLocales = preflight.scope.locales.length;
+        const selectedLocaleCount = selectedLocales.length;
+        const localeRatio = totalLocales === 0 ? 1 : selectedLocaleCount / totalLocales;
+        // v1.2.7: also scale by the ratio of selected docs vs total docs.
+        // Sum docs across the selected collections + globals; if everything
+        // is selected, ratio is 1. The perCollection rows in `preflight`
+        // carry both kinds (collections + globals) keyed by slug, so we
+        // sum by slug-membership in either selected list.
+        const selectedSlugSet = new Set([
+            ...selectedCollections,
+            ...selectedGlobals
+        ]);
+        const totalDocs = preflight.documents.perCollection.reduce((sum, r)=>sum + (r.total ?? 0), 0);
+        const selectedDocs = preflight.documents.perCollection.reduce((sum, r)=>sum + (selectedSlugSet.has(r.slug) ? r.total ?? 0 : 0), 0);
+        const docRatio = totalDocs === 0 ? 1 : selectedDocs / totalDocs;
+        const ratio = localeRatio * docRatio;
+        if (ratio === 1) return preflight;
+        const scaledCost = typeof preflight.estimatedCostUsd === 'number' ? preflight.estimatedCostUsd * ratio : preflight.estimatedCostUsd;
+        return {
+            ...preflight,
+            estimatedCostUsd: scaledCost,
+            documents: {
+                ...preflight.documents,
+                total: Math.round((preflight.documents.total ?? 0) * ratio)
+            }
+        };
+    })();
+    const costState = deriveCostState(scaledPreflight, timedOut);
+    const capBlocked = isCapBlocked(scaledPreflight);
+    const requireTotp = preflight?.requireTotp === true;
+    const totpEnrolled = preflight?.totpEnrolled === true;
+    const totpMissing = requireTotp && !totpEnrolled;
+    const noLocalesSelected = preflight !== null && selectedLocales.length === 0;
+    const noScopeSelected = preflight !== null && selectedCollections.length === 0 && selectedGlobals.length === 0;
+    const canSubmit = !submitting && preflight !== null && costState.kind === 'ready' && !capBlocked && !totpMissing && !noLocalesSelected && !noScopeSelected && (!requireTotp || totp.length === 6);
+    async function onSubmit() {
+        if (!canSubmit) {
+            return;
+        }
+        setSubmitting(true);
+        setSubmitError(null);
+        try {
+            // Narrow the run by locale when the operator has unchecked at
+            // least one chip. Omitting `scope.locales` keeps the existing
+            // "translate to every configured target locale" behavior for
+            // operators who haven't touched the picker.
+            const localesNarrowed = preflight !== null && selectedLocales.length > 0 && selectedLocales.length < preflight.scope.locales.length;
+            // v1.2.7: same narrowing pattern for collections + globals.
+            // enqueue.ts:459-463 reads `scope.collections` / `scope.globals`
+            // — when non-empty arrays, the batch is restricted to that set;
+            // when omitted/empty, it falls back to the plugin's full config.
+            const collectionsNarrowed = preflight !== null && selectedCollections.length < preflight.scope.collections.length;
+            const globalsNarrowed = preflight !== null && selectedGlobals.length < preflight.scope.globals.length;
+            const scopeNarrowing = {};
+            if (localesNarrowed) scopeNarrowing.locales = selectedLocales;
+            if (collectionsNarrowed) scopeNarrowing.collections = selectedCollections;
+            if (globalsNarrowed) scopeNarrowing.globals = selectedGlobals;
+            const res = await fetch(`${basePath}/api/translation-hub/bulk-translate`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    mode: force ? 'force' : 'changed',
+                    totp: requireTotp ? totp : undefined,
+                    scope: Object.keys(scopeNarrowing).length > 0 ? scopeNarrowing : undefined
+                })
+            });
+            if (!res.ok) {
+                // Server returns { error: string } for cap/totp/already-running.
+                const body = await res.json().catch(()=>null);
+                throw new Error(body?.error ?? `HTTP ${res.status}`);
+            }
+            setPostEnqueueVisible(true);
+        } catch (e) {
+            setSubmitError(e instanceof Error ? e.message : String(e));
+        } finally{
+            setSubmitting(false);
+        }
+    }
+    if (postEnqueueVisible) {
+        return /*#__PURE__*/ _jsx(BulkTranslatePostEnqueueTransition, {
+            basePath: basePath,
+            onResolved: onClose
+        });
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        onClick: (e)=>{
+            // NEW-6 (v1.2.6): backdrop click dismisses. The previous block
+            // (`if (e.target === e.currentTarget) {}`) was unreachable —
+            // React's synthetic event for an overlay click reports the
+            // child dialog as currentTarget when the click propagates from
+            // inside, so the equality never held. Stop-propagation on the
+            // dialog wrapper guarantees dismiss only fires on backdrop hits.
+            onClose();
+        },
+        style: OVERLAY_STYLE,
+        children: /*#__PURE__*/ _jsxs("div", {
+            "aria-labelledby": "bulk-translate-modal-title",
+            "aria-modal": "true",
+            "data-testid": "bulk-translate-preflight-modal",
+            onClick: (e)=>e.stopPropagation(),
+            ref: dialogRef,
+            role: "dialog",
+            style: {
+                ...MODAL_STYLE,
+                position: 'relative'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("button", {
+                    "aria-label": "Close",
+                    "data-testid": "bulk-translate-close",
+                    onClick: onClose,
+                    style: {
+                        position: 'absolute',
+                        top: '0.5rem',
+                        right: '0.5rem',
+                        width: '2rem',
+                        height: '2rem',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        background: 'transparent',
+                        border: 'none',
+                        borderRadius: '4px',
+                        color: 'var(--theme-elevation-700)',
+                        cursor: 'pointer',
+                        fontSize: '1.25rem',
+                        lineHeight: 1
+                    },
+                    type: "button",
+                    children: "×"
+                }),
+                /*#__PURE__*/ _jsx("h2", {
+                    id: "bulk-translate-modal-title",
+                    style: {
+                        margin: '0 0 1rem',
+                        fontSize: '1.125rem'
+                    },
+                    children: "Bulk Translate"
+                }),
+                /*#__PURE__*/ _jsx(Section, {
+                    label: "Scope",
+                    children: preflight ? /*#__PURE__*/ _jsxs("p", {
+                        style: {
+                            margin: 0,
+                            fontSize: '0.875rem'
+                        },
+                        children: [
+                            selectedCollections.length,
+                            "/",
+                            preflight.scope.collections.length,
+                            " collections ·",
+                            ' ',
+                            selectedGlobals.length,
+                            "/",
+                            preflight.scope.globals.length,
+                            " global",
+                            preflight.scope.globals.length === 1 ? '' : 's',
+                            " · ",
+                            selectedLocales.length,
+                            "/",
+                            preflight.scope.locales.length,
+                            " target locales · ~",
+                            scaledPreflight?.documents.total ?? preflight.documents.total,
+                            " documents"
+                        ]
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        style: SKELETON_STYLE
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Section, {
+                    label: "Collections",
+                    children: preflight ? preflight.scope.collections.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            margin: 0,
+                            fontSize: '0.8125rem',
+                            fontStyle: 'italic',
+                            color: 'var(--theme-elevation-700)'
+                        },
+                        children: "No collections registered for translation."
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        "data-testid": "bulk-translate-collection-chips",
+                        style: {
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            gap: '0.35rem'
+                        },
+                        children: preflight.scope.collections.map((slug)=>{
+                            const active = selectedCollections.includes(slug);
+                            return /*#__PURE__*/ _jsx("button", {
+                                "aria-pressed": active,
+                                "data-testid": `bulk-translate-collection-${slug}`,
+                                onClick: ()=>toggleCollection(slug),
+                                style: {
+                                    padding: '0.2rem 0.55rem',
+                                    borderRadius: '999px',
+                                    fontSize: '0.75rem',
+                                    fontWeight: active ? 600 : 500,
+                                    border: `1px solid ${active ? 'var(--theme-success-300, #86efac)' : 'var(--theme-elevation-300)'}`,
+                                    background: active ? 'var(--theme-success-100, #dcfce7)' : 'var(--theme-elevation-50)',
+                                    color: active ? 'var(--theme-success-500, #16a34a)' : 'var(--theme-elevation-900)',
+                                    cursor: 'pointer'
+                                },
+                                type: "button",
+                                children: slug
+                            }, slug);
+                        })
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        style: SKELETON_STYLE
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(Section, {
+                    label: "Globals",
+                    children: [
+                        preflight ? preflight.scope.globals.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                            style: {
+                                margin: 0,
+                                fontSize: '0.8125rem',
+                                fontStyle: 'italic',
+                                color: 'var(--theme-elevation-700)'
+                            },
+                            children: "No globals registered for translation."
+                        }) : /*#__PURE__*/ _jsx("div", {
+                            "data-testid": "bulk-translate-global-chips",
+                            style: {
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                gap: '0.35rem'
+                            },
+                            children: preflight.scope.globals.map((slug)=>{
+                                const active = selectedGlobals.includes(slug);
+                                return /*#__PURE__*/ _jsx("button", {
+                                    "aria-pressed": active,
+                                    "data-testid": `bulk-translate-global-${slug}`,
+                                    onClick: ()=>toggleGlobal(slug),
+                                    style: {
+                                        padding: '0.2rem 0.55rem',
+                                        borderRadius: '999px',
+                                        fontSize: '0.75rem',
+                                        fontWeight: active ? 600 : 500,
+                                        border: `1px solid ${active ? 'var(--theme-success-300, #86efac)' : 'var(--theme-elevation-300)'}`,
+                                        background: active ? 'var(--theme-success-100, #dcfce7)' : 'var(--theme-elevation-50)',
+                                        color: active ? 'var(--theme-success-500, #16a34a)' : 'var(--theme-elevation-900)',
+                                        cursor: 'pointer'
+                                    },
+                                    type: "button",
+                                    children: slug
+                                }, slug);
+                            })
+                        }) : /*#__PURE__*/ _jsx("div", {
+                            style: SKELETON_STYLE
+                        }),
+                        noScopeSelected ? /*#__PURE__*/ _jsx("p", {
+                            role: "alert",
+                            style: {
+                                margin: '0.35rem 0 0',
+                                fontSize: '0.75rem',
+                                color: 'var(--theme-warning-500, #d97706)'
+                            },
+                            children: "Select at least one collection or global."
+                        }) : null
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Section, {
+                    label: "Target locales",
+                    children: [
+                        preflight ? /*#__PURE__*/ _jsx("div", {
+                            "data-testid": "bulk-translate-locale-chips",
+                            style: {
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                gap: '0.35rem'
+                            },
+                            children: preflight.scope.locales.map((code)=>{
+                                const active = selectedLocales.includes(code);
+                                return /*#__PURE__*/ _jsx("button", {
+                                    "aria-pressed": active,
+                                    "data-testid": `bulk-translate-locale-${code}`,
+                                    onClick: ()=>toggleLocale(code),
+                                    style: {
+                                        padding: '0.2rem 0.55rem',
+                                        borderRadius: '999px',
+                                        fontSize: '0.75rem',
+                                        fontFamily: 'monospace',
+                                        fontWeight: active ? 600 : 500,
+                                        border: `1px solid ${active ? 'var(--theme-success-300, #86efac)' : 'var(--theme-elevation-300)'}`,
+                                        background: active ? 'var(--theme-success-100, #dcfce7)' : 'var(--theme-elevation-50)',
+                                        // NEW-20 (v1.2.6): deselected chip text was
+                                        // `elevation-500` (mid-grey ≈ 3.62:1 on the
+                                        // `elevation-50` background, failing WCAG AA
+                                        // 4.5:1). Bumped to `elevation-900` (near-black
+                                        // ≈ 13:1) so the disabled state stays readable
+                                        // without losing the active-vs-inactive visual
+                                        // contrast.
+                                        color: active ? 'var(--theme-success-500, #16a34a)' : 'var(--theme-elevation-900)',
+                                        cursor: 'pointer'
+                                    },
+                                    type: "button",
+                                    children: code
+                                }, code);
+                            })
+                        }) : /*#__PURE__*/ _jsx("div", {
+                            style: SKELETON_STYLE
+                        }),
+                        noLocalesSelected ? /*#__PURE__*/ _jsx("p", {
+                            role: "alert",
+                            style: {
+                                margin: '0.35rem 0 0',
+                                fontSize: '0.75rem',
+                                color: 'var(--theme-warning-500, #d97706)'
+                            },
+                            children: "Select at least one locale."
+                        }) : null
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Section, {
+                    label: "Breakdown",
+                    children: preflight ? noLocalesSelected ? // NEW-7 (v1.2.6): when zero locales are selected the
+                    // Scope says "~0 documents" but the Breakdown table
+                    // used to keep showing full counts (e.g. posts 41/41)
+                    // — two parts of the same modal disagreeing. Suppress
+                    // the table here; the Scope summary already conveys
+                    // the "select at least one locale" state.
+                    /*#__PURE__*/ _jsx("p", {
+                        "data-testid": "bulk-translate-breakdown-empty",
+                        style: {
+                            margin: 0,
+                            fontSize: '0.8125rem',
+                            fontStyle: 'italic',
+                            color: 'var(--theme-elevation-700)'
+                        },
+                        children: "Select at least one locale to see per-collection counts."
+                    }) : /*#__PURE__*/ _jsx("table", {
+                        style: {
+                            width: '100%',
+                            borderCollapse: 'collapse',
+                            fontSize: '0.8125rem'
+                        },
+                        children: /*#__PURE__*/ _jsx("tbody", {
+                            children: preflight.documents.perCollection.filter((row)=>{
+                                // v1.2.7: only show rows that match the active scope
+                                // selection. The same `slug` may name either a
+                                // collection or a global — match against both lists.
+                                return selectedCollections.includes(row.slug) || selectedGlobals.includes(row.slug);
+                            }).map((row)=>/*#__PURE__*/ _jsxs("tr", {
+                                    children: [
+                                        /*#__PURE__*/ _jsx("td", {
+                                            style: {
+                                                padding: '0.25rem 0',
+                                                color: 'var(--theme-elevation-800)'
+                                            },
+                                            children: row.label
+                                        }),
+                                        /*#__PURE__*/ _jsxs("td", {
+                                            style: {
+                                                padding: '0.25rem 0',
+                                                textAlign: 'right',
+                                                color: 'var(--theme-elevation-700)'
+                                            },
+                                            children: [
+                                                row.changed,
+                                                " / ",
+                                                row.total
+                                            ]
+                                        })
+                                    ]
+                                }, row.slug))
+                        })
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        style: SKELETON_STYLE
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Section, {
+                    label: "Estimated cost",
+                    children: /*#__PURE__*/ _jsx(CostBlock, {
+                        costState: costState,
+                        onRetry: ()=>{
+                            setTimedOut(false);
+                            setRetryNonce((n)=>n + 1);
+                        }
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Section, {
+                    label: "Duration",
+                    children: /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            margin: 0,
+                            fontSize: '0.8125rem',
+                            color: 'var(--theme-elevation-700)'
+                        },
+                        children: "Typically 30-50 min. Jobs run in the background — safe to close."
+                    })
+                }),
+                capBlocked && preflight ? /*#__PURE__*/ _jsxs("div", {
+                    "data-testid": "bulk-translate-cap-blocked",
+                    role: "alert",
+                    style: {
+                        marginTop: '0.75rem',
+                        padding: '0.6rem 0.75rem',
+                        background: 'var(--theme-error-100, #fee2e2)',
+                        border: '1px solid var(--theme-error-500, #b91c1c)',
+                        borderRadius: '4px',
+                        fontSize: '0.8125rem',
+                        color: 'var(--theme-error-500, #b91c1c)'
+                    },
+                    children: [
+                        "Today’s translation budget is used up — ",
+                        formatCost(preflight.dailySpend.spentUsd),
+                        ' ',
+                        "spent of the ",
+                        formatCost(preflight.dailySpend.capUsd),
+                        " daily limit. The budget resets at midnight UTC, or ask engineering to raise the limit."
+                    ]
+                }) : null,
+                /*#__PURE__*/ _jsx("p", {
+                    "data-testid": "bulk-translate-mode-copy",
+                    style: {
+                        marginTop: '0.75rem',
+                        fontSize: '0.75rem',
+                        color: 'var(--theme-elevation-700)'
+                    },
+                    children: force ? 'Force mode on — every document will be re-translated, even ones already up to date.' : "Documents already up-to-date will be skipped — flip 'Force re-translate' to include them."
+                }),
+                /*#__PURE__*/ _jsxs("label", {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '0.5rem',
+                        marginTop: '0.75rem',
+                        fontSize: '0.8125rem'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("input", {
+                            checked: force,
+                            "data-testid": "bulk-translate-force",
+                            onChange: (e)=>setForce(e.target.checked),
+                            type: "checkbox"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            children: "Force re-translate (includes docs already up to date)"
+                        })
+                    ]
+                }),
+                requireTotp ? /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginTop: '0.75rem'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("label", {
+                            htmlFor: "bulk-translate-totp",
+                            style: {
+                                ...SECTION_LABEL,
+                                display: 'block'
+                            },
+                            children: "Authentication code"
+                        }),
+                        totpMissing ? /*#__PURE__*/ _jsx("a", {
+                            "data-testid": "bulk-translate-totp-missing",
+                            href: `${basePath}/admin/account`,
+                            style: {
+                                fontSize: '0.8125rem',
+                                color: 'var(--theme-warning-500, #d97706)'
+                            },
+                            children: "Two-factor auth not set up — click to enrol"
+                        }) : /*#__PURE__*/ _jsx("input", {
+                            autoComplete: "one-time-code",
+                            "data-testid": "bulk-translate-totp-input",
+                            id: "bulk-translate-totp",
+                            inputMode: "numeric",
+                            maxLength: 6,
+                            onChange: (e)=>setTotp(e.target.value.replace(/\D/g, '').slice(0, 6)),
+                            pattern: "[0-9]{6}",
+                            placeholder: "000000",
+                            style: INPUT_STYLE,
+                            type: "text",
+                            value: totp
+                        })
+                    ]
+                }) : null,
+                loadError ? /*#__PURE__*/ _jsxs("p", {
+                    style: ERROR_TEXT,
+                    children: [
+                        "Couldn’t open the translation settings — ",
+                        loadError
+                    ]
+                }) : null,
+                submitError ? /*#__PURE__*/ _jsx("p", {
+                    style: ERROR_TEXT,
+                    children: submitError
+                }) : null,
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        gap: '0.5rem',
+                        marginTop: '1.25rem'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("button", {
+                            onClick: onClose,
+                            style: {
+                                padding: '0.4rem 0.85rem',
+                                background: 'transparent',
+                                border: 'none',
+                                borderRadius: '4px',
+                                color: 'var(--theme-elevation-700)',
+                                cursor: 'pointer',
+                                fontSize: '0.8125rem'
+                            },
+                            type: "button",
+                            children: "Cancel"
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            "data-testid": "bulk-translate-start",
+                            disabled: !canSubmit,
+                            onClick: onSubmit,
+                            style: {
+                                padding: '0.4rem 0.85rem',
+                                background: 'transparent',
+                                border: '1px solid var(--theme-success-500, #16a34a)',
+                                borderRadius: '4px',
+                                color: 'var(--theme-success-500, #16a34a)',
+                                cursor: canSubmit ? 'pointer' : 'not-allowed',
+                                opacity: canSubmit ? 1 : 0.5,
+                                fontSize: '0.8125rem',
+                                fontWeight: 600
+                            },
+                            type: "button",
+                            children: "Start Translation"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const Section = ({ label, children })=>/*#__PURE__*/ _jsxs("div", {
+        style: {
+            marginTop: '0.75rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                style: SECTION_LABEL,
+                children: label
+            }),
+            children
+        ]
+    });
+/**
+ * NEW-26 (v1.2.6): accessible tooltip for the "~$0.15" cost estimate.
+ *
+ * The previous `<span title="...">` only revealed the explanation on
+ * mouse hover — keyboard focus, screen-reader announcement, and mobile
+ * tap were all locked out. Plugin has no Radix / Popover dependency
+ * (intentional — keeps bundle small for an admin-only surface), so
+ * this is a minimal focus-visible-revealed `<span>` with `aria-describedby`
+ * linking the trigger to a `role="tooltip"` payload kept visually-hidden
+ * until the trigger receives keyboard focus or hover.
+ */ const TOOLTIP_ID = 'bulk-translate-cost-tooltip';
+const CostEstimateInfo = ()=>{
+    const [open, setOpen] = useState(false);
+    return /*#__PURE__*/ _jsxs("span", {
+        style: {
+            position: 'relative',
+            display: 'inline-block'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                "aria-describedby": open ? TOOLTIP_ID : undefined,
+                "aria-label": "About the cost estimate",
+                "data-testid": "bulk-translate-cost-info",
+                onBlur: ()=>setOpen(false),
+                onClick: ()=>setOpen((v)=>!v),
+                onFocus: ()=>setOpen(true),
+                onMouseEnter: ()=>setOpen(true),
+                onMouseLeave: ()=>setOpen(false),
+                style: {
+                    background: 'transparent',
+                    border: '1px solid var(--theme-elevation-300)',
+                    borderRadius: '999px',
+                    width: '1.1rem',
+                    height: '1.1rem',
+                    padding: 0,
+                    fontSize: '0.7rem',
+                    fontWeight: 600,
+                    color: 'var(--theme-elevation-700)',
+                    cursor: 'help',
+                    lineHeight: 1
+                },
+                type: "button",
+                children: "?"
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                id: TOOLTIP_ID,
+                role: "tooltip",
+                style: {
+                    position: 'absolute',
+                    bottom: 'calc(100% + 6px)',
+                    right: 0,
+                    minWidth: '14rem',
+                    padding: '0.4rem 0.6rem',
+                    background: 'var(--theme-elevation-1000)',
+                    color: 'var(--theme-elevation-50)',
+                    fontSize: '0.75rem',
+                    lineHeight: 1.4,
+                    borderRadius: '4px',
+                    boxShadow: '0 4px 12px rgba(0,0,0,0.18)',
+                    pointerEvents: 'none',
+                    zIndex: 10,
+                    // visibility: hidden (not display: none) so the tooltip
+                    // text stays in the a11y tree and aria-describedby resolves.
+                    visibility: open ? 'visible' : 'hidden',
+                    opacity: open ? 1 : 0,
+                    transition: 'opacity 120ms ease'
+                },
+                children: "Based on the unchanged-content diff. Actual cost may be lower if more documents are skipped."
+            })
+        ]
+    });
+};
+const CostBlock = ({ costState, onRetry })=>{
+    if (costState.kind === 'loading') {
+        return /*#__PURE__*/ _jsx("div", {
+            "aria-busy": "true",
+            "data-testid": "bulk-translate-cost-loading",
+            role: "status",
+            style: SKELETON_STYLE
+        });
+    }
+    if (costState.kind === 'ready') {
+        return /*#__PURE__*/ _jsxs("span", {
+            "data-testid": "bulk-translate-cost-ready",
+            style: {
+                ...COST_TEXT_STYLE,
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '0.4rem'
+            },
+            children: [
+                "~",
+                formatCost(costState.value),
+                /*#__PURE__*/ _jsx(CostEstimateInfo, {})
+            ]
+        });
+    }
+    if (costState.kind === 'timeout') {
+        return /*#__PURE__*/ _jsxs("p", {
+            "data-testid": "bulk-translate-cost-timeout",
+            style: {
+                fontSize: '0.8125rem',
+                color: 'var(--theme-warning-500, #d97706)',
+                margin: 0
+            },
+            children: [
+                "Cost estimate isn’t ready yet —",
+                ' ',
+                /*#__PURE__*/ _jsx("button", {
+                    onClick: onRetry,
+                    style: {
+                        background: 'transparent',
+                        border: 'none',
+                        color: 'inherit',
+                        textDecoration: 'underline',
+                        cursor: 'pointer',
+                        padding: 0,
+                        fontSize: 'inherit'
+                    },
+                    type: "button",
+                    children: "try again"
+                }),
+                "."
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsx("p", {
+        "data-testid": "bulk-translate-cost-unavailable",
+        style: {
+            fontSize: '0.8125rem',
+            color: 'var(--theme-error-500, #b91c1c)',
+            margin: 0
+        },
+        children: "This translation can’t be costed right now and has been blocked as a safety measure. Contact engineering — the AI model’s pricing may need updating."
+    });
+};