@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/TranslationHub/ModelCombobox.js

@@ -0,0 +1,415 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { readResponseError } from '../shared/fetch-error-body.js';
+const VENDOR_LABEL = {
+    openai: 'OpenAI',
+    anthropic: 'Anthropic',
+    google: 'Google',
+    meta: 'Meta',
+    other: 'Other'
+};
+const VENDOR_ORDER = [
+    'openai',
+    'anthropic',
+    'google',
+    'meta',
+    'other'
+];
+function filter(models, q) {
+    const query = q.trim().toLowerCase();
+    if (!query) {
+        return models;
+    }
+    return models.filter((m)=>m.id.toLowerCase().includes(query) || m.name.toLowerCase().includes(query));
+}
+function group(models) {
+    const buckets = new Map();
+    for (const m of models){
+        let bucket = buckets.get(m.vendor);
+        if (!bucket) {
+            bucket = [];
+            buckets.set(m.vendor, bucket);
+        }
+        bucket.push(m);
+    }
+    const out = [];
+    for (const v of VENDOR_ORDER){
+        const bucket = buckets.get(v);
+        if (bucket) {
+            out.push({
+                vendor: v,
+                models: [
+                    ...bucket
+                ].sort((a, b)=>a.id.localeCompare(b.id))
+            });
+        }
+    }
+    return out;
+}
+// ROUND2-3: canonical slug pattern. Display value MUST match this so
+// `:invalid` styling doesn't trip on the loaded-correct field. Free-text
+// typed values that don't match show an inline `role="alert"` message
+// and `aria-invalid="true"`.
+const CANONICAL_SLUG_PATTERN = '^$|^[a-z0-9.\\-]+/[a-z0-9.\\-]+$';
+const CANONICAL_SLUG_REGEX = /^[a-z0-9.-]+\/[a-z0-9.-]+$/;
+/**
+ * Compact combobox for the Translation Hub's settings rail. Same data
+ * source as the standalone OpenRouter Settings page (`/api/openrouter/models`)
+ * but slimmer styling — fits the 320px rail.
+ */ export const ModelCombobox = ({ basePath, value, disabled, onChange })=>{
+    const [models, setModels] = useState(null);
+    const [error, setError] = useState(null);
+    const [fromFallback, setFromFallback] = useState(false);
+    const [query, setQuery] = useState('');
+    const [open, setOpen] = useState(false);
+    const [highlightIdx, setHighlightIdx] = useState(0);
+    // ROUND2-3: track whether the current query string (free-text typed
+    // by the user while the popover is open) parses to a canonical slug.
+    // Drives the inline alert + aria-invalid. Distinct from the
+    // `savedMissing` warning, which fires when the *saved* value isn't
+    // in the catalog.
+    const [showInvalidAlert, setShowInvalidAlert] = useState(false);
+    const ref = useRef(null);
+    const inputRef = useRef(null);
+    // ROUND3-1: the last canonical slug we know is good — either the
+    // initially-mounted `value` prop or whatever was most-recently picked
+    // from the listbox. `handleBlur` restores this into the displayed
+    // input string on soft-revert instead of clearing to empty. The
+    // empty-input-with-populated-caption gap that editors saw post-blur
+    // came from `setQuery('')` paired with the conditional
+    // `value={open ? query : currentSlug}` — when the input loses focus
+    // we want the *displayed* string to be the canonical slug, not the
+    // last typed garbage and not an empty string.
+    const lastPickedSlugRef = useRef(value);
+    useEffect(()=>{
+        let cancelled = false;
+        fetch(`${basePath}/api/openrouter/models`, {
+            credentials: 'include'
+        }).then(async (r)=>{
+            if (!r.ok) {
+                throw new Error(await readResponseError(r));
+            }
+            return await r.json();
+        }).then((d)=>{
+            if (cancelled) {
+                return;
+            }
+            setModels(d.models);
+            setFromFallback(d.fromFallback);
+        }).catch((e)=>{
+            if (cancelled) {
+                return;
+            }
+            setError(e instanceof Error ? e.message : String(e));
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        basePath
+    ]);
+    useEffect(()=>{
+        if (!open) {
+            return;
+        }
+        function close(e) {
+            if (!ref.current?.contains(e.target)) {
+                setOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', close);
+        return ()=>document.removeEventListener('mousedown', close);
+    }, [
+        open
+    ]);
+    const filtered = useMemo(()=>filter(models ?? [], query), [
+        models,
+        query
+    ]);
+    const grouped = useMemo(()=>group(filtered), [
+        filtered
+    ]);
+    const flat = useMemo(()=>grouped.flatMap((g)=>g.models), [
+        grouped
+    ]);
+    const savedMissing = Boolean(value && models && !models.some((m)=>m.id === value));
+    // ROUND2-3: the displayed input value is the canonical slug only —
+    // "google/gemini-2.5-flash", not "Google: Gemini 2.5 Flash
+    // (google/gemini-2.5-flash)". The pretty form failed the `pattern=`
+    // regex on its own display value, which tripped `:invalid` styling
+    // even when the field was correct. Human label moves to the caption
+    // below (aria-describedby).
+    const currentSlug = value;
+    // ROUND3-1: keep the soft-revert anchor in sync with the
+    // controlling parent — when the prop changes (e.g. after a server
+    // save), the next blur restores the new server value, not the
+    // pre-save one.
+    useEffect(()=>{
+        if (value) {
+            lastPickedSlugRef.current = value;
+        }
+    }, [
+        value
+    ]);
+    const humanLabel = useMemo(()=>{
+        if (!value) {
+            return '';
+        }
+        const hit = models?.find((m)=>m.id === value);
+        return hit ? hit.name : '';
+    }, [
+        value,
+        models
+    ]);
+    useEffect(()=>setHighlightIdx(0), []);
+    function pick(id) {
+        lastPickedSlugRef.current = id;
+        onChange(id);
+        setOpen(false);
+        setQuery('');
+        setShowInvalidAlert(false);
+        inputRef.current?.blur();
+    }
+    // ROUND2-3 / ROUND3-1: soft-revert on blur. If the user typed a
+    // non-canonical value (something that didn't match a listbox option),
+    // restore the last-known canonical slug into the visible input rather
+    // than leaving it empty. ROUND2-3 cleared `query` which — combined
+    // with `value={open ? query : currentSlug}` — looked correct on
+    // paper, but `setOpen(false)` runs concurrently with the input losing
+    // focus, so editors saw the input flash empty before the next render
+    // settled. Round-3 verification surfaced this as the "empty input
+    // next to populated caption" UX gap. Closing the popover here and
+    // explicitly tracking the last-picked slug fixes both: the input
+    // reads the ref's canonical value on the next render and the editor
+    // sees their typo dismissed in favour of the previously-saved model.
+    function handleBlur() {
+        setShowInvalidAlert(false);
+        setQuery('');
+        setOpen(false);
+    }
+    function keyDown(e) {
+        if (e.key === 'Escape') {
+            setOpen(false);
+            setQuery('');
+        } else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if (!open) {
+                setOpen(true);
+            }
+            setHighlightIdx((i)=>Math.min(i + 1, flat.length - 1));
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setHighlightIdx((i)=>Math.max(i - 1, 0));
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            const t = flat[highlightIdx];
+            if (t) {
+                pick(t.id);
+            }
+        }
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: ref,
+        style: {
+            position: 'relative'
+        },
+        children: [
+            fromFallback && /*#__PURE__*/ _jsx("p", {
+                style: {
+                    margin: '0 0 0.5rem',
+                    color: 'var(--theme-warning-500, #b45309)',
+                    fontSize: '0.75rem'
+                },
+                children: "Live catalog unreachable — showing fallback."
+            }),
+            savedMissing && /*#__PURE__*/ _jsx("p", {
+                style: {
+                    margin: '0 0 0.5rem',
+                    color: 'var(--theme-warning-500, #b45309)',
+                    fontSize: '0.75rem'
+                },
+                children: "Saved model not in current catalog — translation falls back to default."
+            }),
+            error && /*#__PURE__*/ _jsx("p", {
+                style: {
+                    margin: '0 0 0.5rem',
+                    color: 'var(--theme-error-500, #b91c1c)',
+                    fontSize: '0.75rem'
+                },
+                children: error
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                "aria-autocomplete": "list",
+                "aria-controls": open ? 'model-combobox-listbox' : undefined,
+                "aria-describedby": humanLabel || showInvalidAlert ? 'model-combobox-caption' : undefined,
+                "aria-expanded": open,
+                "aria-haspopup": "listbox",
+                // ROUND2-3: reflect `validity.patternMismatch` so AT users hear
+                // "invalid entry" instead of silently typing into a field that
+                // ignores them. Drives the inline alert too.
+                "aria-invalid": showInvalidAlert || undefined,
+                autoComplete: "off",
+                disabled: disabled || models === null && !error,
+                // Permissive pattern — accepts a typed-in vendor/slug id with
+                // the OpenRouter canonical shape; downstream picker still
+                // validates against the live `models` catalog. Empty allowed
+                // so the user can clear the field. ROUND2-3: the *displayed*
+                // value is now the canonical slug, so this pattern no longer
+                // trips on its own loaded value.
+                list: "model-combobox-known-models",
+                onBlur: handleBlur,
+                onChange: (e)=>{
+                    const next = e.target.value;
+                    setQuery(next);
+                    if (!open) {
+                        setOpen(true);
+                    }
+                    // ROUND2-3: visible feedback for non-canonical free-text
+                    // typing. Empty is allowed (clears the field); anything else
+                    // must match the canonical slug regex. The save-side guard
+                    // already gates `onChange` on listbox-pick only — this is
+                    // purely UI feedback.
+                    setShowInvalidAlert(next.length > 0 && !CANONICAL_SLUG_REGEX.test(next));
+                },
+                onFocus: ()=>setOpen(true),
+                onKeyDown: keyDown,
+                pattern: CANONICAL_SLUG_PATTERN,
+                placeholder: models === null && !error ? 'Loading…' : 'Search models…',
+                ref: inputRef,
+                role: "combobox",
+                style: {
+                    width: '100%',
+                    padding: '0.5rem 0.75rem',
+                    background: 'var(--theme-elevation-50)',
+                    border: showInvalidAlert ? '1px solid var(--theme-error-500, #b91c1c)' : '1px solid var(--theme-elevation-150)',
+                    borderRadius: '4px',
+                    color: 'var(--theme-elevation-1000)',
+                    font: 'inherit'
+                },
+                type: "text",
+                value: open ? query : currentSlug
+            }),
+            showInvalidAlert ? /*#__PURE__*/ _jsxs("span", {
+                id: "model-combobox-caption",
+                role: "alert",
+                style: {
+                    display: 'block',
+                    marginTop: '0.25rem',
+                    fontSize: '0.7rem',
+                    color: 'var(--theme-error-500, #b91c1c)'
+                },
+                children: [
+                    "Use the format ",
+                    /*#__PURE__*/ _jsx("code", {
+                        children: "vendor/model"
+                    }),
+                    " — e.g. ",
+                    /*#__PURE__*/ _jsx("code", {
+                        children: "google/gemini-2.5-flash"
+                    }),
+                    "."
+                ]
+            }) : humanLabel ? /*#__PURE__*/ _jsx("span", {
+                id: "model-combobox-caption",
+                style: {
+                    display: 'block',
+                    marginTop: '0.25rem',
+                    fontSize: '0.7rem',
+                    color: 'var(--theme-elevation-500)'
+                },
+                children: humanLabel
+            }) : null,
+            models && /*#__PURE__*/ _jsx("datalist", {
+                id: "model-combobox-known-models",
+                children: models.map((m)=>/*#__PURE__*/ _jsx("option", {
+                        value: m.id,
+                        children: m.name
+                    }, m.id))
+            }),
+            open && models && /*#__PURE__*/ _jsx("div", {
+                id: "model-combobox-listbox",
+                role: "listbox",
+                style: {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    right: 0,
+                    zIndex: 10,
+                    marginTop: '4px',
+                    maxHeight: '280px',
+                    overflowY: 'auto',
+                    background: 'var(--theme-elevation-50)',
+                    border: '1px solid var(--theme-elevation-150)',
+                    borderRadius: '4px',
+                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                    fontSize: '0.875rem'
+                },
+                children: grouped.length === 0 ? /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        padding: '0.4rem 0.75rem',
+                        color: 'var(--theme-elevation-500)'
+                    },
+                    children: [
+                        'No models match "',
+                        query,
+                        '"'
+                    ]
+                }) : grouped.map(({ vendor, models: mods })=>/*#__PURE__*/ _jsxs(React.Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    padding: '0.3rem 0.75rem',
+                                    background: 'var(--theme-elevation-100)',
+                                    fontSize: '0.7rem',
+                                    fontWeight: 600,
+                                    textTransform: 'uppercase',
+                                    color: 'var(--theme-elevation-500)',
+                                    position: 'sticky',
+                                    top: 0
+                                },
+                                children: VENDOR_LABEL[vendor]
+                            }),
+                            mods.map((m)=>{
+                                const i = flat.indexOf(m);
+                                const hl = i === highlightIdx;
+                                const sel = m.id === value;
+                                return /*#__PURE__*/ _jsxs("div", {
+                                    "aria-selected": sel,
+                                    onMouseDown: (e)=>{
+                                        e.preventDefault();
+                                        pick(m.id);
+                                    },
+                                    onMouseEnter: ()=>setHighlightIdx(i),
+                                    role: "option",
+                                    style: {
+                                        padding: '0.4rem 0.75rem',
+                                        cursor: 'pointer',
+                                        background: hl ? 'var(--theme-elevation-100)' : 'transparent',
+                                        fontWeight: sel ? 600 : 400,
+                                        color: 'var(--theme-elevation-1000)'
+                                    },
+                                    tabIndex: -1,
+                                    children: [
+                                        m.name,
+                                        ' ',
+                                        /*#__PURE__*/ _jsxs("span", {
+                                            style: {
+                                                color: 'var(--theme-elevation-500)',
+                                                fontSize: '0.75rem'
+                                            },
+                                            children: [
+                                                "(",
+                                                m.id,
+                                                ")"
+                                            ]
+                                        })
+                                    ]
+                                }, m.id);
+                            })
+                        ]
+                    }, vendor))
+            })
+        ]
+    });
+};

package/dist/views/TranslationHub/PerCollectionConfig.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { LocaleConfig, TranslationSettings } from './Hub.client.js';
+interface Props {
+    basePath: string;
+    locales: LocaleConfig;
+    onSettingsChange: (next: TranslationSettings) => void;
+    translationSettings: TranslationSettings | null;
+}
+export declare const PerCollectionConfig: React.FC<Props>;
+export default PerCollectionConfig;

package/dist/views/TranslationHub/PerCollectionConfig.helpers.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Re-exports the pure `summarize` helper from PerCollectionConfig.tsx so it
+ * can be unit-tested without importing the full React component.
+ *
+ * Keeping the logic here ensures a single source of truth — the component
+ * imports from this file rather than defining the function inline.
+ */
+export type PerCollectionEntry = {
+    slug: string;
+    enabled?: boolean | null;
+    autoOnPublish?: boolean | null;
+    targetLocalesOverride?: string[] | null;
+    translateSlug?: boolean | null;
+    excludedFieldPaths?: string[] | null;
+};
+export declare function summarize(row: PerCollectionEntry, fieldCount: number | null): string;

package/dist/views/TranslationHub/PerCollectionConfig.helpers.js

@@ -0,0 +1,19 @@
+/**
+ * Re-exports the pure `summarize` helper from PerCollectionConfig.tsx so it
+ * can be unit-tested without importing the full React component.
+ *
+ * Keeping the logic here ensures a single source of truth — the component
+ * imports from this file rather than defining the function inline.
+ */ export function summarize(row, fieldCount) {
+    const bits = [];
+    if (row.enabled === false) bits.push('DISABLED');
+    if (row.autoOnPublish === false) bits.push('manual only');
+    if (row.targetLocalesOverride?.length) {
+        bits.push(`locales: ${row.targetLocalesOverride.join('/')}`);
+    }
+    if (row.translateSlug) bits.push('slug translated');
+    if (row.excludedFieldPaths?.length) {
+        bits.push(fieldCount != null ? `${row.excludedFieldPaths.length}/${fieldCount} fields excluded` : `${row.excludedFieldPaths.length} fields excluded`);
+    }
+    return bits.length === 0 ? 'inherits site-wide defaults' : bits.join(' · ');
+}