@focus-reactive/payload-plugin-translator 0.5.1 → 0.6.1

package/dist/client/entities/translation/api/mutations/useTranslateField.d.ts

@@ -0,0 +1,22 @@
+import type { FieldTranslationResult } from "../../../../../server/features/translate-field";
+type Variables = {
+    collectionSlug: string;
+    fieldPath: string;
+    targetLng: string;
+    /** Source locale to translate from — the server reads its saved value. */
+    sourceLng: string;
+    /** Saved document id the source value is read from. */
+    docId: string | number;
+};
+/**
+ * Calls the synchronous field-translation endpoint (POST {basePath}/field).
+ * Returns the discriminated result; no cache invalidation — the caller writes
+ * the value straight to form state, nothing is persisted.
+ *
+ * From-locale only: the server reads the field's value from the saved document (`docId`) in
+ * `sourceLng` and translates it into the active locale.
+ */
+export declare function useTranslateField(): import("@tanstack/react-query").UseMutationResult<{
+    data: FieldTranslationResult;
+}, Error, Variables, unknown>;
+export {};

package/dist/client/entities/translation/api/mutations/useTranslateField.js

@@ -0,0 +1,31 @@
+import { useMutation } from "@tanstack/react-query";
+import { ofetch } from "ofetch";
+import { useTranslateKitConfig } from "../../../../app/config";
+import { handleNextApiError } from "../../../../shared/lib/errors/handleApiError";
+/**
+ * Calls the synchronous field-translation endpoint (POST {basePath}/field).
+ * Returns the discriminated result; no cache invalidation — the caller writes
+ * the value straight to form state, nothing is persisted.
+ *
+ * From-locale only: the server reads the field's value from the saved document (`docId`) in
+ * `sourceLng` and translates it into the active locale.
+ */ export function useTranslateField() {
+    const { basePath } = useTranslateKitConfig();
+    return useMutation({
+        mutationKey: [
+            "translate-field"
+        ],
+        mutationFn: (variables)=>handleNextApiError(()=>ofetch(`/api${basePath}/field`, {
+                    method: "post",
+                    body: {
+                        collection_slug: variables.collectionSlug,
+                        field_path: variables.fieldPath,
+                        target_lng: variables.targetLng,
+                        source_lng: variables.sourceLng,
+                        doc_id: variables.docId
+                    }
+                }))
+    });
+}
+
+//# sourceMappingURL=useTranslateField.js.map

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

@@ -1,10 +1,10 @@
-import type { UseFormReturn } from 'react-hook-form';
-import type { FormValues } from '../model/schema';
+import type { UseFormReturn } from "react-hook-form";
+import type { FormValues } from "../model/schema";
 type CollectionTranslationFormProps = {
     form: UseFormReturn<FormValues>;
     onSubmit: (values: FormValues) => Promise<void>;
     selectedCount: number;
     hasDrafts: boolean;
 };
-export declare function CollectionTranslationForm({ form, onSubmit, selectedCount, hasDrafts, }: CollectionTranslationFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollectionTranslationForm({ form, onSubmit, selectedCount, hasDrafts }: CollectionTranslationFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormProvider } from 'react-hook-form';
-import Button from '../../../shared/ui/Button';
-import FormSelectLocale from '../../../shared/ui/form/FormSelectLocale';
-import { FormSelectStrategy } from '../../../shared/ui/form/FormSelectStrategy';
-import { FormCheckboxPublish } from '../../../shared/ui/form/FormCheckboxPublish';
-import { FORM_FIELDS } from '../model/constants';
-import styles from './styles.module.scss';
+import { FormProvider } from "react-hook-form";
+import { SendIcon } from "../../../shared/lib/assets/icons/SendIcon";
+import Button from "../../../shared/ui/Button";
+import FormSelectLocale from "../../../shared/ui/form/FormSelectLocale";
+import { FormSelectStrategy } from "../../../shared/ui/form/FormSelectStrategy";
+import { FormCheckboxPublish } from "../../../shared/ui/form/FormCheckboxPublish";
+import { FORM_FIELDS } from "../model/constants";
+import styles from "./styles.module.scss";
 export function CollectionTranslationForm({ form, onSubmit, selectedCount, hasDrafts }) {
     return /*#__PURE__*/ _jsx(FormProvider, {
         ...form,
@@ -16,24 +17,24 @@ export function CollectionTranslationForm({ form, onSubmit, selectedCount, hasDr
                     className: styles.row,
                     children: [
                         /*#__PURE__*/ _jsxs("div", {
-                            className: styles['locale-group'],
+                            className: styles["locale-group"],
                             children: [
                                 /*#__PURE__*/ _jsx(FormSelectLocale, {
                                     label: "From",
-                                    className: styles['select-locale-field'],
+                                    className: styles["select-locale-field"],
                                     size: "md",
                                     name: FORM_FIELDS.SOURCE_LNG
                                 }),
                                 /*#__PURE__*/ _jsx(FormSelectLocale, {
                                     label: "To",
-                                    className: styles['select-locale-field'],
+                                    className: styles["select-locale-field"],
                                     size: "md",
                                     name: FORM_FIELDS.TARGET_LNG
                                 })
                             ]
                         }),
                         /*#__PURE__*/ _jsx(FormSelectStrategy, {
-                            className: styles['strategy-field'],
+                            className: styles["strategy-field"],
                             name: FORM_FIELDS.STRATEGY,
                             size: "md"
                         })
@@ -49,12 +50,13 @@ export function CollectionTranslationForm({ form, onSubmit, selectedCount, hasDr
                 /*#__PURE__*/ _jsx(Button, {
                     $variant: "filled",
                     disabled: form.formState.isSubmitting || selectedCount === 0,
-                    className: styles['submit-button'],
+                    className: styles["submit-button"],
                     onClick: form.handleSubmit(onSubmit),
                     type: "submit",
                     $size: "md",
                     $isLoading: form.formState.isSubmitting,
-                    children: selectedCount ? `Queue ${selectedCount} translations` : 'Queue translations'
+                    $startContent: /*#__PURE__*/ _jsx(SendIcon, {}),
+                    children: selectedCount ? `Queue ${selectedCount} translations` : "Queue translations"
                 })
             ]
         })

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

@@ -1,7 +1,7 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from "react";
 type CollectionTranslationPopupProps = PropsWithChildren<{
     translationInProgress: boolean;
     selectedCount: number;
 }>;
-declare function CollectionTranslationPopup({ children, translationInProgress, selectedCount, }: CollectionTranslationPopupProps): import("react/jsx-runtime").JSX.Element;
+declare function CollectionTranslationPopup({ children, translationInProgress, selectedCount }: CollectionTranslationPopupProps): import("react/jsx-runtime").JSX.Element;
 export default CollectionTranslationPopup;

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

@@ -1,11 +1,11 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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';
+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 }) {
     const [isPopupOpen, popupOpen] = useToggle();
     return /*#__PURE__*/ _jsx(Popup, {
@@ -13,8 +13,8 @@ function CollectionTranslationPopup({ children, translationInProgress, selectedC
         onOpenChange: popupOpen.setValue,
         $trigger: /*#__PURE__*/ _jsxs(Button, {
             $size: "md",
-            $variant: "filled",
-            className: styles['popup-trigger-button'],
+            $variant: "outlined-light",
+            className: styles["popup-trigger-button"],
             "aria-label": "Open translation options",
             onClick: popupOpen.setTrue,
             children: [
@@ -38,7 +38,7 @@ function CollectionTranslationPopup({ children, translationInProgress, selectedC
         }),
         open: isPopupOpen,
         children: /*#__PURE__*/ _jsx("div", {
-            className: styles['popup-content'],
+            className: styles["popup-content"],
             children: children
         })
     });

package/dist/client/features/open-document-translation-popup/ui/OpenDocumentTranslationPopup.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 type OpenDocumentTranslationPopupProps = {
     isLoading?: boolean;
     children: (props: {

package/dist/client/features/open-document-translation-popup/ui/OpenDocumentTranslationPopup.js

@@ -1,10 +1,10 @@
-'use client';
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LanguageTranslateIcon } from '../../../shared/lib/assets/icons/LanguageTranslateIcon';
-import { useToggle } from '../../../shared/lib/utils/react/useToggle';
-import Button from '../../../shared/ui/Button';
-import Popup from '../../../shared/ui/Popup';
-import styles from './styles.module.scss';
+import { LanguageTranslateIcon } from "../../../shared/lib/assets/icons/LanguageTranslateIcon";
+import { useToggle } from "../../../shared/lib/utils/react/useToggle";
+import Button from "../../../shared/ui/Button";
+import Popup from "../../../shared/ui/Popup";
+import styles from "./styles.module.scss";
 function OpenDocumentTranslationPopup({ children, isLoading }) {
     const [isPopupOpen, popupOpen] = useToggle();
     return /*#__PURE__*/ _jsx(Popup, {
@@ -12,9 +12,9 @@ function OpenDocumentTranslationPopup({ children, isLoading }) {
         onOpenChange: popupOpen.setValue,
         $trigger: /*#__PURE__*/ _jsx(Button, {
             $size: "md",
-            $variant: "filled",
+            $variant: "outlined-light",
             $isIconButton: true,
-            className: styles['popup-trigger-button'],
+            className: styles["popup-trigger-button"],
             "aria-label": "Open translation options",
             onClick: popupOpen.setTrue,
             disabled: isLoading,
@@ -23,7 +23,7 @@ function OpenDocumentTranslationPopup({ children, isLoading }) {
         }),
         open: isPopupOpen,
         children: /*#__PURE__*/ _jsx("div", {
-            className: styles['popup-content'],
+            className: styles["popup-content"],
             children: children({
                 close: popupOpen.setFalse
             })

package/dist/client/features/translate-document-form/ui/DocumentTranslationForm.d.ts

@@ -1,5 +1,5 @@
-import type { UseFormReturn } from 'react-hook-form';
-import type { FormValues } from '../model/schema';
+import type { UseFormReturn } from "react-hook-form";
+import type { FormValues } from "../model/schema";
 type DocumentTranslationFormProps = {
     form: UseFormReturn<FormValues>;
     onSubmit: (values: FormValues) => Promise<void>;

package/dist/client/features/translate-document-form/ui/DocumentTranslationForm.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormProvider } from 'react-hook-form';
-import Button from '../../../shared/ui/Button';
-import FormSelectLocale from '../../../shared/ui/form/FormSelectLocale';
-import { FormSelectStrategy } from '../../../shared/ui/form/FormSelectStrategy';
-import { FormCheckboxPublish } from '../../../shared/ui/form/FormCheckboxPublish';
-import { FORM_FIELDS } from '../model/constants';
-import styles from './styles.module.scss';
+import { FormProvider } from "react-hook-form";
+import { SendIcon } from "../../../shared/lib/assets/icons/SendIcon";
+import Button from "../../../shared/ui/Button";
+import FormSelectLocale from "../../../shared/ui/form/FormSelectLocale";
+import { FormSelectStrategy } from "../../../shared/ui/form/FormSelectStrategy";
+import { FormCheckboxPublish } from "../../../shared/ui/form/FormCheckboxPublish";
+import { FORM_FIELDS } from "../model/constants";
+import styles from "./styles.module.scss";
 export function DocumentTranslationForm({ form, onSubmit, hasDrafts }) {
     return /*#__PURE__*/ _jsx(FormProvider, {
         ...form,
@@ -42,11 +43,12 @@ export function DocumentTranslationForm({ form, onSubmit, hasDrafts }) {
                 /*#__PURE__*/ _jsx(Button, {
                     $variant: "filled",
                     disabled: form.formState.isSubmitting,
-                    className: styles['submit-button'],
+                    className: styles["submit-button"],
                     onClick: form.handleSubmit(onSubmit),
                     type: "submit",
                     $size: "lg",
                     $isLoading: form.formState.isSubmitting,
+                    $startContent: /*#__PURE__*/ _jsx(SendIcon, {}),
                     children: "Queue Translation"
                 })
             ]

package/dist/client/shared/lib/assets/icons/SendIcon.d.ts

@@ -0,0 +1 @@
+export declare const SendIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/client/shared/lib/assets/icons/SendIcon.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SendIcon = ()=>/*#__PURE__*/ _jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M10.3009 13.6949L20.102 3.89742M10.5795 14.1355L12.8019 18.5804C13.339 19.6545 13.6075 20.1916 13.9458 20.3356C14.2394 20.4606 14.575 20.4379 14.8492 20.2747C15.1651 20.0866 15.3591 19.5183 15.7472 18.3818L19.9463 6.08434C20.2845 5.09409 20.4535 4.59896 20.3378 4.27142C20.2371 3.98648 20.013 3.76234 19.7281 3.66167C19.4005 3.54595 18.9054 3.71502 17.9151 4.05315L5.61763 8.2523C4.48114 8.64037 3.91289 8.83441 3.72478 9.15032C3.56153 9.42447 3.53891 9.76007 3.66389 10.0536C3.80791 10.3919 4.34498 10.6605 5.41912 11.1975L9.86397 13.42C10.041 13.5085 10.1295 13.5527 10.2061 13.6118C10.2742 13.6643 10.3352 13.7253 10.3876 13.7933C10.4468 13.87 10.491 13.9585 10.5795 14.1355Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+
+//# sourceMappingURL=SendIcon.js.map

package/dist/client/shared/ui/Button/Button.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentPropsWithRef, ReactNode } from "react";
 type ButtonProps = ComponentPropsWithRef<"button"> & {
     $fullWidth?: boolean;
-    $variant?: "outlined" | "filled" | "unstyled" | "transparent" | "light";
+    $variant?: "outlined" | "outlined-light" | "filled" | "unstyled" | "transparent" | "light";
+    /** Leading content (e.g. an icon) before children. Hidden while `$isLoading` — the spinner replaces it. */
     $startContent?: ReactNode;
     $size?: "sm" | "md" | "lg";
     $isLoading?: boolean;

package/dist/client/shared/ui/Button/Button.js

@@ -32,7 +32,7 @@ const Button = /*#__PURE__*/ forwardRef(function Button({ className = "", childr
         ref: ref,
         className: buttonClassName,
         children: [
-            $startContent && /*#__PURE__*/ _jsx("div", {
+            !$isLoading && $startContent && /*#__PURE__*/ _jsx("div", {
                 className: styles["start-content"],
                 children: $startContent
             }),

package/dist/client/shared/ui/Button/styles.module.scss

@@ -26,18 +26,41 @@
   margin-right: calc(var(--base) / 2);
 }
 
+/* Mirrors Payload's `.btn--style-secondary` (@payloadcms/ui Button): transparent fill, a
+   theme-elevation-800 border (faint + low-contrast in the dark admin theme), text in theme-text. */
 .outlined {
+  color: var(--theme-text);
+  border: 1px solid var(--theme-elevation-800);
+
+  &:hover:not(:disabled),
+  &:focus {
+    color: var(--theme-elevation-600);
+    border-color: var(--theme-elevation-400);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--theme-elevation-200);
+    border-color: var(--theme-elevation-200);
+  }
+}
+
+/* A muted outlined: transparent fill + a faint elev-200 border (Payload's subtle/dashed border
+   weight) instead of secondary's strong elev-800. For low-emphasis triggers that should sit
+   quietly next to other plugins' admin buttons. */
+.outlined-light {
+  color: var(--theme-text);
   border: 1px solid var(--theme-elevation-200);
 
   &:hover:not(:disabled),
   &:focus {
-    border-color: var(--theme-elevation-100);
+    border-color: var(--theme-elevation-300);
   }
 
   &:disabled {
     cursor: not-allowed;
-    background-color: var(--theme-elevation-200);
-    color: var(--theme-elevation-800);
+    color: var(--theme-elevation-200);
+    border-color: var(--theme-elevation-150);
   }
 }
 

package/dist/client/widgets/translate-field-control/index.d.ts

@@ -0,0 +1 @@
+export { TranslateFieldControlExport } from "./ui/TranslateFieldControl.export";

package/dist/client/widgets/translate-field-control/index.js

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

package/dist/client/widgets/translate-field-control/ui/TranslateFieldControl.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Per-field Translate control, injected into the field's `admin.components.beforeInput`.
+ * The trigger is an icon button; clicking it opens a compact popup that reuses the plugin's
+ * recognizable `source → target` direction pattern (as on the document/collection level):
+ * a small **source** locale `Select`, an arrow, then the **current** locale (the target).
+ *
+ * **Direction.** The target is *always* the locale the user is editing (`useLocale()`) — never
+ * derived from the picker; only the **source** is chosen. This is the reverse of the
+ * document/collection level (translate *from* the current locale *to* a chosen target): here we
+ * pull content *into* where the user stands. Deliberate, and field-level only for now.
+ *
+ * The source is an explicit locale (no "auto-detect": the field reads the chosen locale's *saved*
+ * value, so it needs a saved document — the control is **hidden entirely while creating** a new
+ * one). It defaults to Payload's configured `defaultLocale` when
+ * that isn't the current locale, otherwise the user picks. On success the result is written back
+ * (see {@link writeFieldValue}) and an **Undo** restores the previous value. Field `value` + `path`
+ * come from `useField()` via the field path context (`beforeInput` renders inside it — no `path`
+ * prop).
+ *
+ * **Write-back** is one path for every supported field type: a form `UPDATE` bumping both `value`
+ * and `initialValue`. A Lexical (`richText`) editor owns its state and only re-reads on
+ * `initialValue` change, so it re-mounts with the new content; `text` / `textarea` inputs just
+ * re-render from `value`. So no per-type flag is needed.
+ */
+declare const TranslateFieldControl: () => import("react/jsx-runtime").JSX.Element | null;
+export default TranslateFieldControl;

package/dist/client/widgets/translate-field-control/ui/TranslateFieldControl.export.d.ts

@@ -0,0 +1,13 @@
+import type { RawPayloadComponentExport } from "../../../shared/types/PayloadComponentExport";
+/**
+ * Import-map reference to the per-field Translate control. Appended to a field's
+ * `admin.components.beforeInput` by `withFieldTranslation(field)`, so it renders just above the
+ * input as an icon button that opens the translate popup.
+ *
+ * No props: the control reads everything from client context (field value/path via `useField()`,
+ * locale via `useLocale`, document via `useDocumentInfo`, available locales via `useConfig`) and
+ * writes back uniformly via a form `UPDATE` (works for text/textarea and richText alike).
+ */
+export declare class TranslateFieldControlExport implements RawPayloadComponentExport {
+    path: string;
+}

package/dist/client/widgets/translate-field-control/ui/TranslateFieldControl.export.js

@@ -0,0 +1,14 @@
+import { clientComponentPath } from "../../../shared/utils/componentPath";
+/**
+ * Import-map reference to the per-field Translate control. Appended to a field's
+ * `admin.components.beforeInput` by `withFieldTranslation(field)`, so it renders just above the
+ * input as an icon button that opens the translate popup.
+ *
+ * No props: the control reads everything from client context (field value/path via `useField()`,
+ * locale via `useLocale`, document via `useDocumentInfo`, available locales via `useConfig`) and
+ * writes back uniformly via a form `UPDATE` (works for text/textarea and richText alike).
+ */ export class TranslateFieldControlExport {
+    path = clientComponentPath("widgets/translate-field-control/ui/TranslateFieldControl");
+}
+
+//# sourceMappingURL=TranslateFieldControl.export.js.map

package/dist/client/widgets/translate-field-control/ui/TranslateFieldControl.js

@@ -0,0 +1,204 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast, useConfig, useDocumentInfo, useField, useForm, useFormFields, useLocale } from "@payloadcms/ui";
+import { useState } from "react";
+import { useTranslateField } from "../../../entities/translation/api/mutations/useTranslateField";
+import { LanguageTranslateIcon } from "../../../shared/lib/assets/icons/LanguageTranslateIcon";
+import { ReloadIcon } from "../../../shared/lib/assets/icons/ReloadIcon";
+import { SendIcon } from "../../../shared/lib/assets/icons/SendIcon";
+import { useLocaleOptions } from "../../../shared/lib/payload/hooks/useLocaleOptions";
+import { useToggle } from "../../../shared/lib/utils/react/useToggle";
+import Button from "../../../shared/ui/Button";
+import Popup from "../../../shared/ui/Popup";
+import Select from "../../../shared/ui/Select";
+import Tooltip from "../../../shared/ui/Tooltip";
+import styles from "./styles.module.scss";
+/**
+ * Per-field Translate control, injected into the field's `admin.components.beforeInput`.
+ * The trigger is an icon button; clicking it opens a compact popup that reuses the plugin's
+ * recognizable `source → target` direction pattern (as on the document/collection level):
+ * a small **source** locale `Select`, an arrow, then the **current** locale (the target).
+ *
+ * **Direction.** The target is *always* the locale the user is editing (`useLocale()`) — never
+ * derived from the picker; only the **source** is chosen. This is the reverse of the
+ * document/collection level (translate *from* the current locale *to* a chosen target): here we
+ * pull content *into* where the user stands. Deliberate, and field-level only for now.
+ *
+ * The source is an explicit locale (no "auto-detect": the field reads the chosen locale's *saved*
+ * value, so it needs a saved document — the control is **hidden entirely while creating** a new
+ * one). It defaults to Payload's configured `defaultLocale` when
+ * that isn't the current locale, otherwise the user picks. On success the result is written back
+ * (see {@link writeFieldValue}) and an **Undo** restores the previous value. Field `value` + `path`
+ * come from `useField()` via the field path context (`beforeInput` renders inside it — no `path`
+ * prop).
+ *
+ * **Write-back** is one path for every supported field type: a form `UPDATE` bumping both `value`
+ * and `initialValue`. A Lexical (`richText`) editor owns its state and only re-reads on
+ * `initialValue` change, so it re-mounts with the new content; `text` / `textarea` inputs just
+ * re-render from `value`. So no per-type flag is needed.
+ */ const TranslateFieldControl = ()=>{
+    const { value, path } = useField();
+    const locale = useLocale();
+    const { collectionSlug, id } = useDocumentInfo();
+    const { config } = useConfig();
+    const { setModified } = useForm();
+    const dispatchFields = useFormFields(([, dispatch])=>dispatch);
+    const localeOptions = useLocaleOptions();
+    const { mutateAsync, isPending } = useTranslateField();
+    // `config.localization` is `false | {…}`, so the truthy check is load-bearing (not just a nil guard).
+    const defaultLocale = config.localization ? config.localization.defaultLocale : undefined;
+    const [isOpen, popup] = useToggle();
+    const [sourceLng, setSourceLng] = useState(()=>defaultLocale && defaultLocale !== locale.code ? defaultLocale : "");
+    // `null` = no undo available; an object wraps the value so a legitimately `undefined` field value
+    // (a real pre-translation state) stays distinguishable from "nothing to undo".
+    const [undo, setUndo] = useState(null);
+    // fieldLevel is off while creating a document: from-locale reads the *saved* document's value,
+    // which doesn't exist yet — so the control is hidden entirely on a new/unsaved doc. (Re-enable
+    // once translating the unsaved value in place is supported.) All hooks above run unconditionally.
+    if (id === undefined || id === null) return null;
+    // Source options: every locale except the one being edited (it's the fixed target).
+    const sourceLocaleOptions = localeOptions.filter((option)=>option.value !== locale.code);
+    const canTranslate = sourceLng !== "" && !isPending;
+    // One write path for every supported field type: a form UPDATE bumping value AND initialValue.
+    // A Lexical (richText) editor re-mounts on the initialValue change so it shows the new content;
+    // text/textarea inputs just re-render from value. setModified keeps the form dirty/savable, since
+    // value === initialValue would otherwise read as unchanged.
+    const writeFieldValue = (next)=>{
+        dispatchFields({
+            type: "UPDATE",
+            path,
+            value: next,
+            initialValue: next
+        });
+        setModified(true);
+    };
+    const handleTranslate = async ()=>{
+        if (!(collectionSlug && canTranslate)) return;
+        const previous = value;
+        try {
+            const { data } = await mutateAsync({
+                collectionSlug,
+                fieldPath: path,
+                targetLng: locale.code,
+                sourceLng,
+                docId: id
+            });
+            if (data.status === "translated") {
+                setUndo({
+                    value: previous
+                });
+                writeFieldValue(data.value);
+                toast.success("Field translated");
+                return;
+            }
+            const notify = data.notice.level === "warning" ? toast.warning : toast.info;
+            notify(data.notice.message);
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : "Translation failed");
+        }
+    };
+    const handleUndo = ()=>{
+        if (!undo) return;
+        writeFieldValue(undo.value);
+        setUndo(null);
+    };
+    return /*#__PURE__*/ _jsx(Popup, {
+        $align: "center",
+        $side: "right",
+        open: isOpen,
+        onOpenChange: popup.setValue,
+        // Don't auto-focus the first button on open — it's a Tooltip trigger, and Radix tooltips
+        // open on focus, so autofocus would flash the Translate button's tooltip immediately.
+        onOpenAutoFocus: (event)=>event.preventDefault(),
+        $trigger: /*#__PURE__*/ _jsx("div", {
+            className: styles.trigger,
+            children: /*#__PURE__*/ _jsx(Tooltip, {
+                content: "Translate field",
+                children: /*#__PURE__*/ _jsx(Button, {
+                    type: "button",
+                    $variant: "light",
+                    $size: "sm",
+                    $isIconButton: true,
+                    $isLoading: isPending && !isOpen,
+                    "aria-label": "Translate field",
+                    onClick: popup.setTrue,
+                    children: /*#__PURE__*/ _jsx(LanguageTranslateIcon, {})
+                })
+            })
+        }),
+        children: /*#__PURE__*/ _jsx("div", {
+            className: styles.popup,
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: styles.row,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        "aria-label": `Translation direction: from ${sourceLng || "a source locale"} into ${locale.code}`,
+                        className: styles.direction,
+                        role: "group",
+                        children: [
+                            /*#__PURE__*/ _jsxs(Select, {
+                                $fullWidth: false,
+                                $size: "sm",
+                                "aria-label": "Source locale",
+                                value: sourceLng,
+                                onChange: (event)=>setSourceLng(event.target.value),
+                                disabled: isPending,
+                                children: [
+                                    sourceLng === "" && /*#__PURE__*/ _jsx(Select.SelectOption, {
+                                        value: "",
+                                        disabled: true,
+                                        children: "—"
+                                    }),
+                                    sourceLocaleOptions.map((option)=>/*#__PURE__*/ _jsx(Select.SelectOption, {
+                                            value: option.value,
+                                            children: option.value.toLowerCase()
+                                        }, option.value))
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                "aria-hidden": "true",
+                                className: styles.arrow,
+                                children: "→"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                "aria-label": `Target locale: ${locale.code} (the locale you're editing)`,
+                                className: styles.current,
+                                children: locale.code.toLowerCase()
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Tooltip, {
+                        content: "Translate",
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            type: "button",
+                            $variant: "filled",
+                            $size: "sm",
+                            $isIconButton: true,
+                            $isLoading: isPending,
+                            disabled: !canTranslate,
+                            "aria-label": `Translate from ${sourceLng || "the selected locale"} into ${locale.code}`,
+                            onClick: handleTranslate,
+                            children: /*#__PURE__*/ _jsx(SendIcon, {})
+                        })
+                    }),
+                    undo && /*#__PURE__*/ _jsx(Tooltip, {
+                        content: "Undo translation",
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            type: "button",
+                            $variant: "light",
+                            $size: "sm",
+                            $isIconButton: true,
+                            "aria-label": "Undo translation",
+                            disabled: isPending,
+                            onClick: handleUndo,
+                            children: /*#__PURE__*/ _jsx(ReloadIcon, {})
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+export default TranslateFieldControl;
+
+//# sourceMappingURL=TranslateFieldControl.js.map