@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/BulkRunsHub/FilterBar.js

@@ -0,0 +1,284 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPillColors } from '../shared/filterPillStyle.js';
+// ---------------------------------------------------------------------------
+// Shared field style
+// ---------------------------------------------------------------------------
+const FIELD_STYLE = {
+    padding: '0.3rem 0.5rem',
+    fontSize: '0.8125rem',
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '4px',
+    color: 'var(--theme-elevation-1000)',
+    fontFamily: 'inherit'
+};
+const LABEL_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.25rem',
+    fontSize: '0.6875rem',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    color: 'var(--theme-elevation-500)'
+};
+// ---------------------------------------------------------------------------
+// Status quick-pick chips
+// ---------------------------------------------------------------------------
+const STATUS_CHIPS = [
+    {
+        label: 'All',
+        value: ''
+    },
+    {
+        label: 'Active',
+        value: 'active'
+    },
+    {
+        label: 'Terminal',
+        value: 'terminal'
+    },
+    {
+        label: 'Running',
+        value: 'running'
+    },
+    {
+        label: 'Failed',
+        value: 'failed'
+    },
+    {
+        label: 'Partial',
+        value: 'partial'
+    },
+    {
+        label: 'Cancelled',
+        value: 'cancelled'
+    }
+];
+const MODE_OPTIONS = [
+    {
+        label: 'All modes',
+        value: ''
+    },
+    {
+        label: 'Changed',
+        value: 'changed'
+    },
+    {
+        label: 'Force',
+        value: 'force'
+    },
+    {
+        label: 'Canary',
+        value: 'canary'
+    }
+];
+/**
+ * NEW-19 (v1.2.6): true when both Since and Until are set but Until
+ * precedes Since. Pure helper so the inline error / aria-invalid /
+ * input min-max can all read the same source of truth.
+ */ export function dateRangeInvalid(filters) {
+    if (!filters.since || !filters.until) return false;
+    return new Date(filters.until).getTime() < new Date(filters.since).getTime();
+}
+export const FilterBar = ({ filters, onChange, batches })=>{
+    // Derive distinct triggeredBy values from loaded data for autocomplete.
+    const triggeredByOptions = Array.from(new Set(batches.map((b)=>b.triggeredByEmail).filter((e)=>typeof e === 'string' && e.length > 0)));
+    const invalidDates = dateRangeInvalid(filters);
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '1rem',
+                    padding: '0.75rem 1rem',
+                    background: 'var(--theme-elevation-50)',
+                    border: '1px solid var(--theme-elevation-150)',
+                    borderRadius: '6px',
+                    alignItems: 'flex-end'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("label", {
+                        style: LABEL_STYLE,
+                        "aria-label": "Filter the batch list by status",
+                        children: [
+                            "Batch status",
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    display: 'flex',
+                                    flexWrap: 'wrap',
+                                    gap: '0.25rem'
+                                },
+                                children: STATUS_CHIPS.map((chip)=>{
+                                    const isActive = filters.status === chip.value;
+                                    const colors = filterPillColors(isActive);
+                                    return /*#__PURE__*/ _jsx("button", {
+                                        "aria-pressed": isActive,
+                                        type: "button",
+                                        onClick: ()=>onChange({
+                                                status: chip.value
+                                            }),
+                                        style: {
+                                            padding: '0.2rem 0.55rem',
+                                            fontSize: '0.75rem',
+                                            borderRadius: '4px',
+                                            border: colors.border,
+                                            background: colors.background,
+                                            color: colors.color,
+                                            cursor: 'pointer',
+                                            fontWeight: isActive ? 600 : 400
+                                        },
+                                        children: chip.label
+                                    }, chip.value || 'all');
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        style: LABEL_STYLE,
+                        children: [
+                            "Mode",
+                            /*#__PURE__*/ _jsx("select", {
+                                value: filters.mode,
+                                onChange: (e)=>onChange({
+                                        mode: e.target.value
+                                    }),
+                                style: FIELD_STYLE,
+                                children: MODE_OPTIONS.map((o)=>/*#__PURE__*/ _jsx("option", {
+                                        value: o.value,
+                                        children: o.label
+                                    }, o.value))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        style: LABEL_STYLE,
+                        children: [
+                            "Triggered by",
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    position: 'relative'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        list: "bulk-runs-triggered-by-list",
+                                        type: "text",
+                                        placeholder: "Email…",
+                                        value: filters.triggeredBy,
+                                        onChange: (e)=>onChange({
+                                                triggeredBy: e.target.value
+                                            }),
+                                        style: {
+                                            ...FIELD_STYLE,
+                                            minWidth: '160px'
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx("datalist", {
+                                        id: "bulk-runs-triggered-by-list",
+                                        children: triggeredByOptions.map((email)=>/*#__PURE__*/ _jsx("option", {
+                                                value: email
+                                            }, email))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        style: LABEL_STYLE,
+                        children: [
+                            "Since",
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "date",
+                                value: filters.since ? filters.since.slice(0, 10) : '',
+                                max: filters.until ? filters.until.slice(0, 10) : undefined,
+                                onChange: (e)=>onChange({
+                                        since: e.target.value ? `${e.target.value}T00:00:00.000Z` : ''
+                                    }),
+                                style: FIELD_STYLE,
+                                "aria-invalid": dateRangeInvalid(filters)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        style: LABEL_STYLE,
+                        children: [
+                            "Until",
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "date",
+                                value: filters.until ? filters.until.slice(0, 10) : '',
+                                min: filters.since ? filters.since.slice(0, 10) : undefined,
+                                onChange: (e)=>onChange({
+                                        until: e.target.value ? `${e.target.value}T23:59:59.999Z` : ''
+                                    }),
+                                style: FIELD_STYLE,
+                                "aria-invalid": dateRangeInvalid(filters)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        style: {
+                            ...LABEL_STYLE,
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: '0.4rem',
+                            cursor: 'pointer'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "checkbox",
+                                checked: filters.hasFailures,
+                                onChange: (e)=>onChange({
+                                        hasFailures: e.target.checked
+                                    }),
+                                style: {
+                                    cursor: 'pointer'
+                                }
+                            }),
+                            "Has failures"
+                        ]
+                    }),
+                    (filters.status || filters.mode || filters.triggeredBy || filters.since || filters.until || filters.hasFailures) && /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>onChange({
+                                status: '',
+                                mode: '',
+                                triggeredBy: '',
+                                since: '',
+                                until: '',
+                                hasFailures: false
+                            }),
+                        style: {
+                            padding: '0.3rem 0.6rem',
+                            fontSize: '0.75rem',
+                            background: 'transparent',
+                            border: '1px solid var(--theme-elevation-200)',
+                            borderRadius: '4px',
+                            color: 'var(--theme-elevation-600)',
+                            cursor: 'pointer'
+                        },
+                        children: "Clear filters"
+                    })
+                ]
+            }),
+            invalidDates && /*#__PURE__*/ _jsx("div", {
+                role: "alert",
+                style: {
+                    padding: '0.5rem 0.75rem',
+                    background: 'var(--theme-error-100, #fee2e2)',
+                    border: '1px solid var(--theme-error-500, #b91c1c)',
+                    borderRadius: '4px',
+                    color: 'var(--theme-error-800, #7f1d1d)',
+                    fontSize: '0.8125rem'
+                },
+                children: "Invalid date range — Until precedes Since. The table is hidden until you fix the range."
+            })
+        ]
+    });
+};

package/dist/views/BulkRunsHub/InFlightBanner.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { BulkTranslateBatchSummary } from '../TranslationHub/BulkTranslate.types.js';
+interface Props {
+    batches: BulkTranslateBatchSummary[];
+}
+/**
+ * Slim status banner shown at the top of the runs list when at least one
+ * batch is in an active status (queued / running / cancelling).
+ *
+ * The `●` glyph pulses via a CSS keyframe injected inline — consistent
+ * with the StatusBadge running animation but isolated to the banner dot.
+ */
+export declare const InFlightBanner: React.FC<Props>;
+export {};

package/dist/views/BulkRunsHub/InFlightBanner.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isActiveStatus } from '../TranslationHub/BulkTranslate.types.js';
+/**
+ * Slim status banner shown at the top of the runs list when at least one
+ * batch is in an active status (queued / running / cancelling).
+ *
+ * The `●` glyph pulses via a CSS keyframe injected inline — consistent
+ * with the StatusBadge running animation but isolated to the banner dot.
+ */ export const InFlightBanner = ({ batches })=>{
+    const activeCount = batches.filter((b)=>isActiveStatus(b.status)).length;
+    if (activeCount === 0) return null;
+    const label = activeCount === 1 ? '1 run in progress' : `${activeCount} runs in progress`;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("style", {
+                children: `
+        @keyframes bulk-runs-dot-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.35; }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .bulk-runs-dot { animation: none !important; }
+        }
+      `
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                role: "status",
+                "aria-live": "polite",
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                    padding: '0.4rem 0.75rem',
+                    background: 'var(--theme-elevation-50)',
+                    border: '1px solid var(--theme-success-300, #86efac)',
+                    borderRadius: '4px',
+                    fontSize: '0.8125rem',
+                    color: 'var(--theme-success-500, #16a34a)'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "bulk-runs-dot",
+                        "aria-hidden": "true",
+                        style: {
+                            fontSize: '0.6rem',
+                            animationName: 'bulk-runs-dot-pulse',
+                            animationDuration: '1.4s',
+                            animationTimingFunction: 'ease-in-out',
+                            animationIterationCount: 'infinite'
+                        },
+                        children: "●"
+                    }),
+                    label
+                ]
+            })
+        ]
+    });
+};

package/dist/views/BulkRunsHub/StatusBadge.d.ts

@@ -0,0 +1,64 @@
+import type React from 'react';
+import type { BulkTranslateBatchStatus } from '../TranslationHub/BulkTranslate.types.js';
+/** Test-only: reset the once-per-status warning de-dupe set. */
+export declare function __resetStatusBadgeWarnings(): void;
+export type ResolvedBadge = {
+    kind: 'known';
+    label: string;
+} | {
+    kind: 'fallback';
+    label: string;
+};
+/**
+ * Pure resolver for the batch-level status badge. Returns the display
+ * label and a `kind` discriminator so tests can pin BR-3 fallback
+ * behaviour without rendering React or relying on CSS-token strings.
+ *
+ * `kind: 'known'`    — STATUS_CONFIG had an entry; label is the friendly
+ *                       display string (e.g. 'succeeded' for 'success',
+ *                       'running' for 'running').
+ * `kind: 'fallback'` — STATUS_CONFIG had no entry; label echoes the raw
+ *                       input so editors still see something useful in
+ *                       the row (BR-3).
+ */
+export declare function resolveBatchStatusBadge(status: string): ResolvedBadge;
+/**
+ * Pure resolver for unit-level status badges. Mirrors
+ * `resolveBatchStatusBadge` but uses the unit-status color map so
+ * `'completed'` (older API revision) and `'succeeded'` both normalise
+ * to the same `success` chip. Returns fallback for any value outside
+ * the known set.
+ */
+export declare function resolveUnitStatusBadge(status: string): ResolvedBadge;
+interface StatusBadgeProps {
+    status: BulkTranslateBatchStatus;
+    /** Render at the smaller unit-table size (0.65rem vs 0.7rem). */
+    small?: boolean;
+}
+interface UnitStatusBadgeProps {
+    status: string;
+    small?: boolean;
+}
+/**
+ * Renders a status pill for a batch row.
+ * The `running` state gets a CSS pulse animation on its background.
+ * Storage value `'success'` displays as "succeeded" — matches the
+ * unit-level vocabulary used in the Hub's Recent translations table
+ * and the AuditPanel KPIs. v1.2.5 used "completed" here; v1.2.6 fixes
+ * the vocab split (BR-8).
+ */
+export declare const StatusBadge: React.FC<StatusBadgeProps>;
+/**
+ * Same visual treatment but for unit-level statuses (pending / running /
+ * success / failed / skipped / reverted). Uses `succeeded` as the
+ * display label for `success` to match the rest of the surface (BR-8).
+ */
+export declare const UnitStatusBadge: React.FC<UnitStatusBadgeProps>;
+/**
+ * Inject the running-badge keyframes once per page. Call this inside the
+ * client component that mounts StatusBadge. Using a `<style>` tag is the
+ * only viable approach in Payload's inline-style architecture (no CSS
+ * Modules, no Tailwind).
+ */
+export declare const StatusBadgeKeyframes: React.FC;
+export {};

package/dist/views/BulkRunsHub/StatusBadge.js

@@ -0,0 +1,248 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Text colours pulled up to `-900` (or `-elevation-900` for neutrals) so
+// chip text clears WCAG AA on the tinted backgrounds — v1.2.6 audit
+// found the previous `-500` text ran 3.3–3.8:1, below the 4.5:1 bar.
+// The `-900` token is ~rgb(19,44,58) on success and similar near-black
+// shades on warning / error, giving 8:1+ on the `-100` tinted bg.
+// Backgrounds stay tinted so the signal colour still reads at a glance.
+// NEW-3.
+const STATUS_CONFIG = {
+    queued: {
+        background: 'var(--theme-elevation-100)',
+        color: 'var(--theme-elevation-900)',
+        border: 'var(--theme-elevation-200)'
+    },
+    running: {
+        background: 'var(--theme-success-100, #dcfce7)',
+        color: 'var(--theme-success-900, #052e16)',
+        border: 'var(--theme-success-300, #86efac)',
+        animation: 'bulk-runs-pulse'
+    },
+    cancelling: {
+        background: 'var(--theme-warning-100, #fef3c7)',
+        color: 'var(--theme-warning-900, #422006)',
+        border: 'var(--theme-warning-300, #fcd34d)'
+    },
+    success: {
+        background: 'var(--theme-success-100, #dcfce7)',
+        color: 'var(--theme-success-900, #052e16)',
+        border: 'var(--theme-success-200, #bbf7d0)'
+    },
+    failed: {
+        background: 'var(--theme-error-100, #fee2e2)',
+        color: 'var(--theme-error-900, #450a0a)',
+        border: 'var(--theme-error-300, #fca5a5)'
+    },
+    partial: {
+        background: 'var(--theme-warning-100, #fef3c7)',
+        color: 'var(--theme-warning-900, #422006)',
+        border: 'var(--theme-warning-300, #fcd34d)'
+    },
+    cancelled: {
+        background: 'var(--theme-elevation-100)',
+        color: 'var(--theme-elevation-900)',
+        border: 'var(--theme-elevation-200)'
+    },
+    reverted: {
+        background: 'var(--theme-elevation-100)',
+        color: 'var(--theme-elevation-900)',
+        border: 'var(--theme-elevation-200)',
+        prefix: '↶'
+    }
+};
+// Unit-status badges (inside the drill-down unit table) use a narrower
+// set. Map to the closest batch status for color reuse.
+const UNIT_STATUS_COLOR_MAP = {
+    pending: STATUS_CONFIG.queued,
+    running: STATUS_CONFIG.running,
+    success: STATUS_CONFIG.success,
+    failed: STATUS_CONFIG.failed,
+    skipped: {
+        background: 'var(--theme-elevation-100)',
+        color: 'var(--theme-elevation-900)',
+        border: 'var(--theme-elevation-200)'
+    },
+    reverted: STATUS_CONFIG.reverted
+};
+// Tracks unknown status values we've already warned about so the
+// console isn't spammed every re-render. Module-scope is fine — the
+// set is purely diagnostic. Cleared in tests via `__resetStatusBadgeWarnings`.
+const warnedUnknownStatuses = new Set();
+function warnUnknownStatus(component, status) {
+    if (warnedUnknownStatuses.has(`${component}:${status}`)) return;
+    warnedUnknownStatuses.add(`${component}:${status}`);
+    // eslint-disable-next-line no-console
+    console.warn(`[ai-translate] ${component}: unknown status '${status}' — rendering raw value. ` + 'A new lifecycle state was likely added without a UI mapping; please update STATUS_CONFIG.');
+}
+/** Test-only: reset the once-per-status warning de-dupe set. */ export function __resetStatusBadgeWarnings() {
+    warnedUnknownStatuses.clear();
+}
+/**
+ * Pure resolver for the batch-level status badge. Returns the display
+ * label and a `kind` discriminator so tests can pin BR-3 fallback
+ * behaviour without rendering React or relying on CSS-token strings.
+ *
+ * `kind: 'known'`    — STATUS_CONFIG had an entry; label is the friendly
+ *                       display string (e.g. 'succeeded' for 'success',
+ *                       'running' for 'running').
+ * `kind: 'fallback'` — STATUS_CONFIG had no entry; label echoes the raw
+ *                       input so editors still see something useful in
+ *                       the row (BR-3).
+ */ export function resolveBatchStatusBadge(status) {
+    // Normalise the legacy `'completed'` literal (pre-v1.2.5 batches) onto
+    // `'success'` so older rows render the same `SUCCEEDED` chip as the
+    // rest of the table. Mirrors `resolveUnitStatusBadge` — unit chips
+    // already aliased this; batch chips did not, which produced a single
+    // `COMPLETED` row amongst `SUCCEEDED` peers in the v1.2.6 UI sweep.
+    const normalised = status === 'completed' ? 'success' : status;
+    const cfg = STATUS_CONFIG[normalised];
+    if (!cfg) return {
+        kind: 'fallback',
+        label: status
+    };
+    return {
+        kind: 'known',
+        label: normalised === 'success' ? 'succeeded' : normalised
+    };
+}
+/**
+ * Pure resolver for unit-level status badges. Mirrors
+ * `resolveBatchStatusBadge` but uses the unit-status color map so
+ * `'completed'` (older API revision) and `'succeeded'` both normalise
+ * to the same `success` chip. Returns fallback for any value outside
+ * the known set.
+ */ export function resolveUnitStatusBadge(status) {
+    const normalised = status === 'completed' || status === 'succeeded' ? 'success' : status;
+    const cfg = UNIT_STATUS_COLOR_MAP[normalised];
+    if (!cfg) return {
+        kind: 'fallback',
+        label: status
+    };
+    const label = status === 'success' || status === 'completed' ? 'succeeded' : status;
+    return {
+        kind: 'known',
+        label
+    };
+}
+/**
+ * Neutral fallback chip used when a batch arrives with a status value
+ * that isn't in STATUS_CONFIG (e.g. a future / older API revision adds
+ * a new lifecycle state). Renders the raw value so editors aren't
+ * staring at an empty cell (BR-3) and emits a one-shot console.warn
+ * per unknown value for engineering.
+ */ const UNKNOWN_STATUS_CONFIG = {
+    background: 'var(--theme-elevation-100)',
+    color: 'var(--theme-elevation-900)',
+    border: 'var(--theme-elevation-300)'
+};
+/**
+ * Renders a status pill for a batch row.
+ * The `running` state gets a CSS pulse animation on its background.
+ * Storage value `'success'` displays as "succeeded" — matches the
+ * unit-level vocabulary used in the Hub's Recent translations table
+ * and the AuditPanel KPIs. v1.2.5 used "completed" here; v1.2.6 fixes
+ * the vocab split (BR-8).
+ */ export const StatusBadge = ({ status, small = false })=>{
+    const resolved = resolveBatchStatusBadge(status);
+    if (resolved.kind === 'fallback') {
+        // BR-3 fallback: render the raw value so the row isn't visually
+        // empty, and warn once so the next status drift is caught.
+        warnUnknownStatus('StatusBadge', status);
+        return /*#__PURE__*/ _jsx(BadgePill, {
+            cfg: UNKNOWN_STATUS_CONFIG,
+            label: resolved.label,
+            small: small
+        });
+    }
+    // Normalise legacy `'completed'` onto the `'success'` config so the
+    // chip styling matches the resolver's label aliasing. The widened
+    // `string` type lets us compare against the legacy literal that isn't
+    // part of the current `BulkTranslateBatchStatus` union.
+    const normalised = status === 'completed' ? 'success' : status;
+    const cfg = STATUS_CONFIG[normalised];
+    return /*#__PURE__*/ _jsx(BadgePill, {
+        cfg: cfg,
+        label: resolved.label,
+        small: small
+    });
+};
+/**
+ * Same visual treatment but for unit-level statuses (pending / running /
+ * success / failed / skipped / reverted). Uses `succeeded` as the
+ * display label for `success` to match the rest of the surface (BR-8).
+ */ export const UnitStatusBadge = ({ status, small = false })=>{
+    const resolved = resolveUnitStatusBadge(status);
+    if (resolved.kind === 'fallback') {
+        warnUnknownStatus('UnitStatusBadge', status);
+        return /*#__PURE__*/ _jsx(BadgePill, {
+            cfg: UNKNOWN_STATUS_CONFIG,
+            label: resolved.label,
+            small: small
+        });
+    }
+    const normalised = status === 'completed' || status === 'succeeded' ? 'success' : status;
+    const cfg = UNIT_STATUS_COLOR_MAP[normalised];
+    return /*#__PURE__*/ _jsx(BadgePill, {
+        cfg: cfg,
+        label: resolved.label,
+        small: small
+    });
+};
+// ---------------------------------------------------------------------------
+// Shared pill renderer
+// ---------------------------------------------------------------------------
+const BadgePill = ({ cfg, label, small })=>{
+    // Bumped from 0.65rem / 0.7rem (~10.4 / 11.2 px) to 0.75rem / 0.8rem
+    // (12 / 12.8 px) in v1.2.6: the previous sizes were uncomfortable to
+    // read on dense list views and worked against the `-900` text /
+    // tinted background scheme we adopted for NEW-3. 12 px + weight 600
+    // is roughly the floor for comfortable status-pill readability and
+    // gives us extra contrast headroom alongside the darker text token.
+    const fontSize = small ? '0.75rem' : '0.8rem';
+    const style = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: cfg.prefix ? '0.25rem' : undefined,
+        padding: '0.15rem 0.5rem',
+        borderRadius: '4px',
+        fontSize,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        letterSpacing: '0.04em',
+        background: cfg.background,
+        color: cfg.color,
+        border: `1px solid ${cfg.border}`,
+        animationName: cfg.animation,
+        animationDuration: cfg.animation ? '1.8s' : undefined,
+        animationTimingFunction: cfg.animation ? 'ease-in-out' : undefined,
+        animationIterationCount: cfg.animation ? 'infinite' : undefined,
+        whiteSpace: 'nowrap'
+    };
+    return /*#__PURE__*/ _jsxs("span", {
+        style: style,
+        children: [
+            cfg.prefix ? /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": "true",
+                children: cfg.prefix
+            }) : null,
+            label
+        ]
+    });
+};
+/**
+ * Inject the running-badge keyframes once per page. Call this inside the
+ * client component that mounts StatusBadge. Using a `<style>` tag is the
+ * only viable approach in Payload's inline-style architecture (no CSS
+ * Modules, no Tailwind).
+ */ export const StatusBadgeKeyframes = ()=>/*#__PURE__*/ _jsx("style", {
+        children: `
+    @keyframes bulk-runs-pulse {
+      0%, 100% { background: var(--theme-success-100, #dcfce7); }
+      50% { background: var(--theme-success-50, #f0fdf4); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .bulk-runs-pulse { animation: none; }
+    }
+  `
+    });