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

package/README.md

@@ -91,8 +91,9 @@ The `levels` option controls which translation surfaces the plugin exposes. Each
 
 - `documentLevel()` — a **Translate** popup on the document edit view (translate one document).
 - `collectionLevel()` — a **bulk dashboard** on the collection list view (translate many at once).
+- `fieldLevel()` — a synchronous **single-field** endpoint (`POST {basePath}/field`) that translates one field from a chosen source locale, with no persistence. _(Since v0.6.0.)_
 
-Both run through the configured `runner` (async Payload Jobs by default, or synchronous via `createSyncRunner()`) and share the same translation REST API.
+`documentLevel` and `collectionLevel` run through the configured `runner` (async Payload Jobs by default, or synchronous via `createSyncRunner()`) and share the same translation REST API. `fieldLevel` is always synchronous and uses no runner.
 
 ```typescript
 import { translatorPlugin, documentLevel, collectionLevel, createOpenAIProvider, createPayloadJobsRunner } from "@focus-reactive/payload-plugin-translator";
@@ -107,18 +108,55 @@ translatorPlugin({
 });
 ```
 
-Omit `levels` for the default `[documentLevel(), collectionLevel()]`, which is identical to the previous behaviour — so adopting this option is non-breaking. A synchronous `fieldLevel()` (in-place field translation) is planned for a later release.
+Omit `levels` for the default `[documentLevel(), collectionLevel()]`, which is identical to the previous behaviour — so adopting this option is non-breaking.
+
+#### Field-level translation
+
+_Since v0.6.0._
+
+`fieldLevel` adds a per-field **Translate** control. Two steps:
+
+1. Add `fieldLevel()` to `levels` (registers the endpoint).
+2. Wrap the fields that should get a control with `withFieldTranslation(field)`.
+
+```typescript
+import { translatorPlugin, documentLevel, fieldLevel, withFieldTranslation } from "@focus-reactive/payload-plugin-translator";
+
+// In a collection:
+const Posts = {
+  slug: "posts",
+  fields: [withFieldTranslation({ name: "title", type: "text", localized: true })],
+};
+
+// In the plugin:
+translatorPlugin({
+  collections: [Posts],
+  translationProvider: createOpenAIProvider({ apiKey: process.env.OPENAI_API_KEY }),
+  runner: createPayloadJobsRunner(),
+  levels: [documentLevel(), fieldLevel()],
+});
+```
+
+The control is an icon button (rendered just above the input) that opens a compact popup showing the translation **direction** — a source-locale `Select`, an arrow, then the **current locale** (the fixed target): `en → fr`. You pick the **source** locale; the **target is always the locale you're editing**. The server reads the source locale's _saved_ value and translates it into the current locale, so the control needs a **saved document** (it's disabled on new documents). The source defaults to your Payload `defaultLocale` when that isn't the current locale, otherwise you choose it explicitly.
+
+> This is intentionally the reverse of the document/collection level (which translates _from_ the current locale _to_ chosen targets): the field control pulls content _into_ the locale you're standing in.
+
+The translated value is written straight back to form state — no save, no queue — and an **Undo** restores the previous value. Wrapping for a control is allowed on **`text`, `textarea`, and `richText`** fields (a compile error on other types — pass `{ exclude: true }` for those). For `richText` the Lexical editor is re-mounted with the translated content. Fields **inside blocks** are supported too: the server reads the source document's `blockType` to resolve the right block schema. Needs a **saved document** (the source value is read from it), so the control is hidden while creating a new document. The endpoint itself (`POST {basePath}/field`) is also usable directly by custom clients.
+
+> **Localized `blocks`/`array` containers.** Per-field translation works when the **container is not localized** — the block/array structure is then shared across locales and only the leaf values differ per locale (wrap the leaves, not the container). If a `blocks`/`array` field is itself `localized`, each locale has an independent structure (different order/content), so a field inside it can't be matched to the source locale by position — the control no-ops with a notice asking you to translate the whole document instead. (Whole-document translation handles this case by matching elements by `id`.)
 
 ### OpenAIProviderConfig
 
 Configuration for `createOpenAIProvider()`.
 
-| Property       | Type                      | Required | Default         | Description                                |
-| -------------- | ------------------------- | -------- | --------------- | ------------------------------------------ |
-| `apiKey`       | `string`                  | Yes      | —               | OpenAI API key                             |
-| `model`        | `string \| ChatModel`     | No       | `'gpt-4o'`      | OpenAI model to use for translation        |
-| `systemPrompt` | `SystemPromptBuilder`     | No       | Built-in prompt | Custom function to build the system prompt |
-| `dryRun`       | `boolean \| DryRunConfig` | No       | `false`         | Simulate translations without API calls    |
+| Property       | Type                      | Required | Default              | Description                                                                                                            |
+| -------------- | ------------------------- | -------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `apiKey`       | `string`                  | Yes      | —                    | OpenAI API key                                                                                                         |
+| `model`        | `string \| ChatModel`     | No       | `'gpt-4o'`           | OpenAI model to use for translation                                                                                    |
+| `systemPrompt` | `SystemPromptBuilder`     | No       | Built-in prompt      | Custom function to build the system prompt                                                                             |
+| `dryRun`       | `boolean \| DryRunConfig` | No       | `false`              | Simulate translations without API calls                                                                                |
+| `timeout`      | `number`                  | No       | SDK default (10 min) | Per-request timeout in ms. A job blocks on this call, so the 10-min SDK default is usually too long. _(Since v0.6.0.)_ |
+| `maxRetries`   | `number`                  | No       | SDK default (2)      | Max automatic retries on transient errors (429/5xx/network). `0` disables. _(Since v0.6.0.)_                           |
 
 ```typescript
 createOpenAIProvider({

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