@focus-reactive/payload-plugin-translator 0.1.3 → 0.1.4

package/dist/client/app/cache/CacheProvider.jsx

@@ -0,0 +1,11 @@
+'use client';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { CacheClientProviderFactory } from '../../shared/providers/CacheClientProvider';
+import { TranslateKitConfigProvider } from '../config';
+const queryClient = new CacheClientProviderFactory().create('client');
+export function CacheProvider({ basePath, children }) {
+    return (<TranslateKitConfigProvider basePath={basePath}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </TranslateKitConfigProvider>);
+}
+export default CacheProvider;

package/dist/client/app/config/TranslateKitConfigContext.jsx

@@ -0,0 +1,13 @@
+'use client';
+import { createContext, useContext, useMemo } from 'react';
+const defaultConfig = {
+    basePath: '/translate',
+};
+const TranslateKitConfigContext = createContext(defaultConfig);
+export function TranslateKitConfigProvider({ basePath = defaultConfig.basePath, children, }) {
+    const value = useMemo(() => ({ basePath }), [basePath]);
+    return <TranslateKitConfigContext.Provider value={value}>{children}</TranslateKitConfigContext.Provider>;
+}
+export function useTranslateKitConfig() {
+    return useContext(TranslateKitConfigContext);
+}

package/dist/client/entities/translation/ui/CompletedTranslationStatus/CompletedTranslationStatus.jsx

@@ -0,0 +1,25 @@
+import { LanguageTranslateIcon } from '../../../../shared/lib/assets/icons/LanguageTranslateIcon';
+import Button from '../../../../shared/ui/Button';
+import StatusIndicator from '../../../../shared/ui/StatusIndicator';
+import Tooltip from '../../../../shared/ui/Tooltip';
+import { TranslationDirection } from '../TranslationDirection';
+import styles from './styles.module.scss';
+export function CompletedTranslationStatus({ completed_at, sourceLocale, targetLocale, }) {
+    return (<StatusIndicator className={styles.indicator} $color="green" title="Completed">
+      <Tooltip sideOffset={12} side="bottom" content={<time dateTime={completed_at}>
+            Completed at:{' '}
+            {new Date(completed_at).toLocaleString(undefined, {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+            })}
+          </time>}>
+        <Button type="button" $variant="unstyled">
+          <LanguageTranslateIcon />
+        </Button>
+      </Tooltip>
+      <TranslationDirection sourceLocale={sourceLocale} targetLocale={targetLocale}/>
+    </StatusIndicator>);
+}

package/dist/client/entities/translation/ui/FailedTranslationStatus/FailedTranslationStatus.jsx

@@ -0,0 +1,24 @@
+import { LanguageTranslateIcon } from '../../../../shared/lib/assets/icons/LanguageTranslateIcon';
+import { ReloadIcon } from '../../../../shared/lib/assets/icons/ReloadIcon';
+import Button from '../../../../shared/ui/Button';
+import Divider from '../../../../shared/ui/Divider';
+import StatusIndicator from '../../../../shared/ui/StatusIndicator';
+import Tooltip from '../../../../shared/ui/Tooltip';
+import { TranslationDirection } from '../TranslationDirection';
+import styles from './styles.module.scss';
+export function FailedTranslationStatus({ onRetry, message, isLoading, sourceLocale, targetLocale, }) {
+    return (<StatusIndicator $color="red" title="Failed">
+      <Tooltip sideOffset={12} side="bottom" content={message}>
+        <Button type="button" $variant="unstyled">
+          <LanguageTranslateIcon />
+        </Button>
+      </Tooltip>
+      <TranslationDirection sourceLocale={sourceLocale} targetLocale={targetLocale}/>
+      <Divider className={styles.divider} $orientation="vertical" $size="sm"/>
+      <Tooltip side="bottom" sideOffset={12} content="Retry">
+        <Button $variant="light" $size="sm" $isIconButton aria-label="Retry failed translation" type="button" onClick={onRetry} disabled={isLoading} $isLoading={isLoading}>
+          <ReloadIcon />
+        </Button>
+      </Tooltip>
+    </StatusIndicator>);
+}

package/dist/client/entities/translation/ui/PendingTranslationStatus/PendingTranslationStatus.jsx

@@ -0,0 +1,38 @@
+import { TrashIcon } from '@payloadcms/ui/icons/Trash';
+import { LanguageTranslateIcon } from '../../../../shared/lib/assets/icons/LanguageTranslateIcon';
+import { ReloadIcon } from '../../../../shared/lib/assets/icons/ReloadIcon';
+import Button from '../../../../shared/ui/Button';
+import Divider from '../../../../shared/ui/Divider';
+import StatusIndicator from '../../../../shared/ui/StatusIndicator';
+import Tooltip from '../../../../shared/ui/Tooltip';
+import { TranslationDirection } from '../TranslationDirection';
+export function PendingTranslationStatus({ onCancel, onRun, isLoading, disabled, sourceLocale, targetLocale, createdAt, }) {
+    return (<StatusIndicator $color="gray" $animated title="Pending">
+      <Tooltip side="bottom" sideOffset={12} content={<time dateTime={createdAt}>
+            Created at:{' '}
+            {new Date(createdAt).toLocaleString(undefined, {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+            })}
+          </time>}>
+        <Button type="button" $variant="unstyled">
+          <LanguageTranslateIcon />
+        </Button>
+      </Tooltip>
+      <TranslationDirection sourceLocale={sourceLocale} targetLocale={targetLocale}/>
+      <Divider $size="sm" $orientation="vertical"/>
+      <Tooltip sideOffset={12} side="bottom" content="Cancel">
+        <Button $variant="light" $size="sm" $isIconButton aria-label="Cancel" type="button" onClick={onCancel} disabled={isLoading || disabled} $isLoading={isLoading}>
+          <TrashIcon />
+        </Button>
+      </Tooltip>
+      <Tooltip sideOffset={12} side="bottom" content="Run queued translation">
+        <Button $variant="light" $size="sm" $isIconButton aria-label="Run queued translation" type="button" onClick={onRun} disabled={isLoading || disabled} $isLoading={isLoading}>
+          <ReloadIcon />
+        </Button>
+      </Tooltip>
+    </StatusIndicator>);
+}

package/dist/client/entities/translation/ui/RunningTranslationStatus/RunningTranslationStatus.jsx

@@ -0,0 +1,32 @@
+import { TrashIcon } from '@payloadcms/ui/icons/Trash';
+import { LanguageTranslateIcon } from '../../../../shared/lib/assets/icons/LanguageTranslateIcon';
+import Button from '../../../../shared/ui/Button';
+import Divider from '../../../../shared/ui/Divider';
+import StatusIndicator from '../../../../shared/ui/StatusIndicator';
+import Tooltip from '../../../../shared/ui/Tooltip';
+import { TranslationDirection } from '../TranslationDirection';
+export function RunningTranslationStatus({ onCancel, isLoading, disabled, sourceLocale, targetLocale, createdAt, }) {
+    return (<StatusIndicator $animated $color="blue" title="In Progress">
+      <Tooltip side="bottom" sideOffset={12} content={<time dateTime={createdAt}>
+            Created at:{' '}
+            {new Date(createdAt).toLocaleString(undefined, {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+            })}
+          </time>}>
+        <Button type="button" $variant="unstyled">
+          <LanguageTranslateIcon />
+        </Button>
+      </Tooltip>
+      <TranslationDirection sourceLocale={sourceLocale} targetLocale={targetLocale}/>
+      <Divider $size="sm" $orientation="vertical"/>
+      <Tooltip sideOffset={12} side="bottom" content="Cancel">
+        <Button $variant="light" $size="sm" $isIconButton aria-label="Cancel" type="button" onClick={onCancel} disabled={isLoading || disabled} $isLoading={isLoading}>
+          <TrashIcon />
+        </Button>
+      </Tooltip>
+    </StatusIndicator>);
+}

package/dist/client/entities/translation/ui/TranslationDirection/TranslationDirection.jsx

@@ -0,0 +1,16 @@
+import styles from './styles.module.scss';
+export const TranslationDirection = ({ sourceLocale, targetLocale, className }) => {
+    return (<div className={`${styles.container} ${className || ''}`} role="group" aria-label={`Translation from ${sourceLocale} to ${targetLocale}`}>
+      <span className={styles.locale} aria-label={`Source language: ${sourceLocale}`}>
+        {sourceLocale.toLowerCase()}
+      </span>
+
+      <div className={styles.arrow} aria-hidden="true">
+        →
+      </div>
+
+      <span className={styles.locale} aria-label={`Target language: ${targetLocale}`}>
+        {targetLocale.toLowerCase()}
+      </span>
+    </div>);
+};

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

@@ -0,0 +1,25 @@
+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';
+export function CollectionTranslationForm({ form, onSubmit, selectedCount, hasDrafts, }) {
+    return (<FormProvider {...form}>
+      <fieldset className={styles.fieldset}>
+        <div className={styles.row}>
+          <div className={styles['locale-group']}>
+            <FormSelectLocale label="From" className={styles['select-locale-field']} size="md" name={FORM_FIELDS.SOURCE_LNG}/>
+            <FormSelectLocale label="To" className={styles['select-locale-field']} size="md" name={FORM_FIELDS.TARGET_LNG}/>
+          </div>
+          <FormSelectStrategy className={styles['strategy-field']} name={FORM_FIELDS.STRATEGY} size="md"/>
+        </div>
+        {hasDrafts && <FormCheckboxPublish name={FORM_FIELDS.PUBLISH_ON_TRANSLATION}/>}
+        <input {...form.register(FORM_FIELDS.HIDDEN_COLLECTION_SLUG)} type="hidden"/>
+        <Button $variant="filled" disabled={form.formState.isSubmitting || selectedCount === 0} className={styles['submit-button']} onClick={form.handleSubmit(onSubmit)} type="submit" $size="md" $isLoading={form.formState.isSubmitting}>
+          {selectedCount ? `Queue ${selectedCount} translations` : 'Queue translations'}
+        </Button>
+      </fieldset>
+    </FormProvider>);
+}

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

@@ -0,0 +1,23 @@
+'use client';
+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 (<Popup $align="start" onOpenChange={popupOpen.setValue} $trigger={<Button $size="md" $variant="filled" className={styles['popup-trigger-button']} aria-label="Open translation options" onClick={popupOpen.setTrue}>
+          {translationInProgress && <ColorIndicator title="Translations In Progress" $animated $color="blue"/>}
+          <LanguageTranslateIcon />
+          {selectedCount > 0 && !translationInProgress && (<>
+              <span className={styles.arrow} aria-hidden="true">
+                →
+              </span>
+              {selectedCount}
+            </>)}
+        </Button>} open={isPopupOpen}>
+      <div className={styles['popup-content']}>{children}</div>
+    </Popup>);
+}
+export default CollectionTranslationPopup;

package/dist/client/features/collection-translation-progress/ui/CollectionTranslationProgress.jsx

@@ -0,0 +1,47 @@
+'use client';
+import { ShimmerEffect } from '@payloadcms/ui';
+import { TrashIcon } from '@payloadcms/ui/icons/Trash';
+import { TranslationsApi } from '../../../entities/translation';
+import { LanguageTranslateIcon } from '../../../shared/lib/assets/icons/LanguageTranslateIcon';
+import Button from '../../../shared/ui/Button';
+import StatusIndicator from '../../../shared/ui/StatusIndicator';
+import Tooltip from '../../../shared/ui/Tooltip';
+import styles from './styles.module.scss';
+export function CollectionTranslationProgress({ collection, data, isPending }) {
+    const cancelPendingTranslations = TranslationsApi.useCancelCollectionTranslations();
+    return (<div className={styles.container}>
+      {isPending && (<>
+          <ShimmerEffect width="100%" height={32}></ShimmerEffect>
+          <ShimmerEffect width="100%" height={32}></ShimmerEffect>
+          <ShimmerEffect width="100%" height={32}></ShimmerEffect>
+          <ShimmerEffect width="100%" height={32}></ShimmerEffect>
+        </>)}
+
+      {data && (<>
+          <StatusIndicator className={styles['status-indicator']} title="Completed" key="completed" $color="green">
+            <LanguageTranslateIcon />
+            <b>{data.completed.length}</b>
+          </StatusIndicator>
+
+          <StatusIndicator className={styles['status-indicator']} title="Failed" key="failed" $color="red">
+            <LanguageTranslateIcon />
+            <b>{data.failed.length}</b>
+          </StatusIndicator>
+
+          <StatusIndicator className={styles['status-indicator']} title="In progress" $animated={data.running.length > 0} key="running" $color="blue">
+            <LanguageTranslateIcon />
+            <b>{data.running.length}</b>
+          </StatusIndicator>
+
+          <StatusIndicator className={styles['status-indicator']} title="Pending" $animated={data.pending.length > 0} key="pending" $color="gray">
+            <LanguageTranslateIcon />
+            <b>{data.pending.length}</b>
+            <Tooltip sideOffset={12} side="bottom" content="Cancel translations">
+              <Button $variant="light" $size="sm" $isIconButton aria-label="Cancel all queued translation" type="button" onClick={() => cancelPendingTranslations.mutateAsync({ collection })} disabled={cancelPendingTranslations.isPending || !data.pending.length} $isLoading={cancelPendingTranslations.isPending}>
+                <TrashIcon />
+              </Button>
+            </Tooltip>
+          </StatusIndicator>
+        </>)}
+    </div>);
+}

package/dist/client/features/document-translation-progress-failed/ui/DocumentTranslationProgressFailed.jsx

@@ -0,0 +1,19 @@
+import { toast } from '@payloadcms/ui';
+import { FailedTranslationStatus, TranslationsApi } from '../../../entities/translation';
+export function DocumentTranslationProgressFailed({ data }) {
+    const runQueuedTranslationApi = TranslationsApi.useRunDocumentTranslation();
+    const handleRunDocumentTranslation = async () => {
+        try {
+            await runQueuedTranslationApi.mutateAsync({ id: data.id });
+        }
+        catch (e) {
+            if (e instanceof Error) {
+                toast.error(e.message);
+            }
+            else {
+                toast.error('Error running document translation');
+            }
+        }
+    };
+    return (<FailedTranslationStatus onRetry={handleRunDocumentTranslation} isLoading={runQueuedTranslationApi.isPending} sourceLocale={data.input.source_lng} targetLocale={data.input.target_lng} message={data.error.message}/>);
+}

package/dist/client/features/document-translation-progress-pending/ui/DocumentTranslationProgressPending.jsx

@@ -0,0 +1,34 @@
+import { toast } from '@payloadcms/ui';
+import { TranslationsApi } from '../../../entities/translation';
+import { PendingTranslationStatus } from '../../../entities/translation';
+export function DocumentTranslationProgressPending({ data }) {
+    const cancelDocumentTranslationApi = TranslationsApi.useCancelDocumentTranslation();
+    const runQueuedTranslationApi = TranslationsApi.useRunDocumentTranslation();
+    const handleCancelDocumentTranslation = async () => {
+        try {
+            await cancelDocumentTranslationApi.mutateAsync({ id: data.id });
+        }
+        catch (e) {
+            if (e instanceof Error) {
+                toast.error(e.message);
+            }
+            else {
+                toast.error('Error canceling document translation');
+            }
+        }
+    };
+    const handleRunDocumentTranslation = async () => {
+        try {
+            await runQueuedTranslationApi.mutateAsync({ id: data.id });
+        }
+        catch (e) {
+            if (e instanceof Error) {
+                toast.error(e.message);
+            }
+            else {
+                toast.error('Error running document translation');
+            }
+        }
+    };
+    return (<PendingTranslationStatus onRun={handleRunDocumentTranslation} createdAt={data.created_at} sourceLocale={data.input.source_lng} targetLocale={data.input.target_lng} isLoading={cancelDocumentTranslationApi.isPending || runQueuedTranslationApi.isPending} onCancel={handleCancelDocumentTranslation}/>);
+}

package/dist/client/features/document-translation-progress-running/ui/DocumentTranslationProgressRunning.jsx

@@ -0,0 +1,19 @@
+import { toast } from '@payloadcms/ui';
+import { RunningTranslationStatus, TranslationsApi } from '../../../entities/translation';
+export function DocumentTranslationProgressRunning({ data }) {
+    const cancelDocumentTranslationApi = TranslationsApi.useCancelDocumentTranslation();
+    const handleCancelDocumentTranslation = async () => {
+        try {
+            await cancelDocumentTranslationApi.mutateAsync({ id: data.id });
+        }
+        catch (e) {
+            if (e instanceof Error) {
+                toast.error(e.message);
+            }
+            else {
+                toast.error('Error canceling document translation');
+            }
+        }
+    };
+    return (<RunningTranslationStatus createdAt={data.created_at} sourceLocale={data.input.source_lng} targetLocale={data.input.target_lng} isLoading={cancelDocumentTranslationApi.isPending} onCancel={handleCancelDocumentTranslation}/>);
+}

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

@@ -0,0 +1,15 @@
+'use client';
+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 (<Popup $align="start" onOpenChange={popupOpen.setValue} $trigger={<Button $size="md" $variant="filled" $isIconButton className={styles['popup-trigger-button']} aria-label="Open translation options" onClick={popupOpen.setTrue} disabled={isLoading} $isLoading={isLoading}>
+          <LanguageTranslateIcon />
+        </Button>} open={isPopupOpen}>
+      <div className={styles['popup-content']}>{children({ close: popupOpen.setFalse })}</div>
+    </Popup>);
+}
+export default OpenDocumentTranslationPopup;

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

@@ -0,0 +1,24 @@
+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';
+export function DocumentTranslationForm({ form, onSubmit, hasDrafts }) {
+    return (<FormProvider {...form}>
+      <fieldset className={styles.fieldset}>
+        <div className={styles.row}>
+          <FormSelectLocale label="From" name={FORM_FIELDS.SOURCE_LNG}/>
+          <FormSelectLocale label="To" name={FORM_FIELDS.TARGET_LNG}/>
+        </div>
+        <FormSelectStrategy name={FORM_FIELDS.STRATEGY}/>
+        {hasDrafts && <FormCheckboxPublish name={FORM_FIELDS.PUBLISH_ON_TRANSLATION}/>}
+        <input {...form.register(FORM_FIELDS.HIDDEN_COLLECTION_SLUG)} type="hidden"/>
+        <input {...form.register(FORM_FIELDS.HIDDEN_COLLECTION_ID)} type="hidden"/>
+        <Button $variant="filled" disabled={form.formState.isSubmitting} className={styles['submit-button']} onClick={form.handleSubmit(onSubmit)} type="submit" $size="lg" $isLoading={form.formState.isSubmitting}>
+          Queue Translation
+        </Button>
+      </fieldset>
+    </FormProvider>);
+}

package/dist/client/shared/lib/assets/icons/LanguageTranslateIcon.jsx

@@ -0,0 +1,4 @@
+export const LanguageTranslateIcon = () => (<svg fill="currentColor" width="1em" height="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+    <path d="M478.33,433.6l-90-218a22,22,0,0,0-40.67,0l-90,218a22,22,0,1,0,40.67,16.79L316.66,406H419.33l18.33,44.39A22,22,0,0,0,458,464a22,22,0,0,0,20.32-30.4ZM334.83,362,368,281.65,401.17,362Z"/>
+    <path d="M267.84,342.92a22,22,0,0,0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73,39.65-53.68,62.11-114.75,71.27-143.49H330a22,22,0,0,0,0-44H214V70a22,22,0,0,0-44,0V90H54a22,22,0,0,0,0,44H251.25c-9.52,26.95-27.05,69.5-53.79,108.36-31.41-41.68-43.08-68.65-43.17-68.87a22,22,0,0,0-40.58,17c.58,1.38,14.55,34.23,52.86,83.93.92,1.19,1.83,2.35,2.74,3.51-39.24,44.35-77.74,71.86-93.85,80.74a22,22,0,1,0,21.07,38.63c2.16-1.18,48.6-26.89,101.63-85.59,22.52,24.08,38,35.44,38.93,36.1a22,22,0,0,0,30.75-4.9Z"/>
+  </svg>);

package/dist/client/shared/lib/assets/icons/QuestionCircleIcon.jsx

@@ -0,0 +1,3 @@
+export const QuestionCircleIcon = () => (<svg width="1em" height="1em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
+    <path fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zM6.92 6.085c.081-.16.19-.299.34-.398.145-.097.371-.187.74-.187.28 0 .553.087.738.225.167.127.262.285.262.478 0 .39-.152.586-.293.732a2.138 2.138 0 01-.508.39l-.024.014c-.178.107-.357.214-.504.395-.15.185-.25.427-.25.75a.75.75 0 001.5 0c0-.088.024-.137.054-.175.035-.045.1-.098.195-.15l.029-.018c.152-.09.381-.226.594-.424.213-.197.523-.534.523-1.114 0-.57-.282-1.023-.656-1.306-.356-.27-.816-.392-1.26-.392-.6 0-1.068.167-1.418.39-.345.218-.583.498-.748.793a.75.75 0 001.326.704z"/>
+  </svg>);

package/dist/client/shared/lib/assets/icons/ReloadIcon.jsx

@@ -0,0 +1,3 @@
+export const ReloadIcon = () => (<svg width="1em" height="1em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
+    <path fill="currentColor" d="M7.248 1.307A.75.75 0 118.252.193l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.004-1.114l1.29-1.161a4.5 4.5 0 103.655 2.832.75.75 0 111.398-.546A6 6 0 118.018 2l-.77-.693z"/>
+  </svg>);

package/dist/client/shared/ui/Alert/Alert.jsx

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import React from 'react';
+import styles from './styles.module.scss';
+const getRole = (variant) => {
+    switch (variant) {
+        case 'error':
+            return 'alert';
+        case 'warning':
+            return 'alert';
+        case 'info':
+            return 'status';
+        default:
+            return 'status';
+    }
+};
+const getAriaLive = (variant) => {
+    switch (variant) {
+        case 'error':
+            return 'assertive';
+        case 'warning':
+            return 'polite';
+        case 'info':
+            return 'polite';
+        default:
+            return 'polite';
+    }
+};
+const Alert = ({ variant = 'transparent', children, className }) => {
+    return (<div className={classNames(styles.alert, styles[`alert--${variant}`], className)} role={getRole(variant)} aria-live={getAriaLive(variant)} aria-atomic="true">
+      {children}
+    </div>);
+};
+export default Alert;

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

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import Loading from '../Loading';
+import styles from './styles.module.scss';
+const sizes = {
+    sm: {
+        height: '24px',
+        paddingInline: '0.25rem',
+    },
+    md: {
+        height: '32px',
+        paddingInline: '0.5rem',
+    },
+    lg: {
+        height: '40px',
+        paddingInline: '0.75rem',
+    },
+};
+const Button = forwardRef(function Button({ className = '', children, $fullWidth, style, $startContent, $variant, $isLoading, $size = 'md', $isIconButton, ...props }, ref) {
+    const _style = {
+        '--button-width': $fullWidth ? '100%' : 'auto',
+        '--height': sizes[$size].height,
+        '--padding-inline': $isIconButton ? '0' : sizes[$size].paddingInline,
+        '--width': $isIconButton ? sizes[$size].height : 'auto',
+        ...style,
+    };
+    const buttonClassName = $variant === 'unstyled'
+        ? classNames(styles['unstyled'], className, $isIconButton && styles['icon-button'])
+        : classNames(styles['button'], className, $variant ? styles[$variant] : undefined, $isIconButton && styles['icon-button']);
+    return (<button {...props} style={_style} ref={ref} className={buttonClassName}>
+      {$startContent && <div className={styles['start-content']}>{$startContent}</div>}
+      {$isLoading ? <Loading size={$isIconButton ? 'small' : 'medium'}/> : children}
+    </button>);
+});
+export default Button;

package/dist/client/shared/ui/Checkbox/Checkbox.jsx

@@ -0,0 +1,6 @@
+import { forwardRef } from 'react';
+import styles from './styles.module.scss';
+const Checkbox = forwardRef(function Checkbox({ className = '', hasError, ...props }, ref) {
+    return (<input ref={ref} type="checkbox" className={`${styles.checkbox} ${hasError ? styles['checkbox--error'] : ''} ${className}`} {...props}/>);
+});
+export default Checkbox;

package/dist/client/shared/ui/ColorIndicator/ColorIndicator.jsx

@@ -0,0 +1,7 @@
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+export default function ColorIndicator({ $color, $animated, title, className }) {
+    return (<div title={title} className={classNames(styles.indicator, styles[`${$color}-indicator`], {
+            [styles.animated]: $animated,
+        }, className)}/>);
+}

package/dist/client/shared/ui/Description/Description.jsx

@@ -0,0 +1,7 @@
+import styles from './styles.module.scss';
+export default function Description({ children, className = '', id, variant = 'default', ...props }) {
+    const descriptionClassName = `${styles.description} ${styles[variant]} ${className}`;
+    return (<p id={id} className={descriptionClassName} role={variant === 'error' ? 'alert' : undefined} aria-live={variant === 'error' ? 'polite' : undefined} {...props}>
+      {children}
+    </p>);
+}

package/dist/client/shared/ui/Divider/Divider.jsx

@@ -0,0 +1,7 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import styles from './styles.module.scss';
+const Divider = React.forwardRef(function Divider({ $orientation = 'horizontal', $size = 'md', $color = 'medium', className, style, ...props }, ref) {
+    return (<hr ref={ref} className={classNames(styles.divider, styles[$orientation], styles[$size], styles[$color], className)} style={style} role="separator" aria-orientation={$orientation} {...props}/>);
+});
+export default Divider;

package/dist/client/shared/ui/Label/Label.jsx

@@ -0,0 +1,9 @@
+import { forwardRef } from 'react';
+import styles from './styles.module.scss';
+const Label = forwardRef(function Label({ children, className = '', label, ...props }, ref) {
+    return (<label ref={ref} className={`${styles.label} ${className}`} {...props}>
+      <span className={styles.label__text}>{label}</span>
+      {children}
+    </label>);
+});
+export default Label;

package/dist/client/shared/ui/Loading/Loading.jsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+function Loading({ text, className, size = 'medium' }) {
+    return (<div className={classNames(styles['loading-overlay'], styles['loading-overlay--entering'], className)} style={{ animationDuration: '500ms' }}>
+      <div className={classNames(styles['loading-overlay__bars'], styles[`loading-overlay__bars_${size}`])}>
+        {new Array(size === 'small' ? 2 : 5).fill(null).map((_, index) => (<div key={index} className={classNames(styles['loading-overlay__bar'], styles[`loading-overlay__bar_size-${size}`])}/>))}
+      </div>
+      {text && <span className={styles['loading-overlay__text']}>{text}</span>}
+    </div>);
+}
+export default Loading;

package/dist/client/shared/ui/Popup/Popup.jsx

@@ -0,0 +1,13 @@
+import * as Popover from '@radix-ui/react-popover';
+import style from './styles.module.scss';
+function Popup({ open, children, onOpenChange, $trigger, $align, $side }) {
+    return (<Popover.Root open={open} onOpenChange={onOpenChange}>
+      <Popover.Trigger asChild>{$trigger}</Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content sideOffset={8} side={$side} align={$align} className={style.popover}>
+          {children}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>);
+}
+export default Popup;

package/dist/client/shared/ui/ProgressBar/ProgressBar.jsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+export default function ProgressBar({ percentage, size = 'medium', color = 'blue', showPercentage = true, className, }) {
+    const clampedPercentage = Math.max(0, Math.min(100, percentage));
+    return (<div className={classNames(styles.container, className)}>
+      <div className={classNames(styles.track, styles[size])}>
+        <div className={classNames(styles.fill, styles[`${color}-fill`])} style={{ width: `${clampedPercentage}%` }}/>
+      </div>
+      {showPercentage && (<span className={classNames(styles.label, styles[`${size}-label`])}>{Math.round(clampedPercentage)}%</span>)}
+    </div>);
+}

package/dist/client/shared/ui/Select/Select.jsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import styles from './styles.module.scss';
+const sizes = {
+    sm: {
+        height: '24px',
+        paddingInline: '0.25rem',
+        fontSize: '0.875rem',
+    },
+    md: {
+        height: '32px',
+        paddingInline: '0.5rem',
+        fontSize: '1rem',
+    },
+    lg: {
+        height: '40px',
+        paddingInline: '0.75rem',
+        fontSize: '1rem',
+    },
+};
+const SelectOption = ({ children, ...props }) => <option {...props}>{children}</option>;
+const SelectEmptyOption = ({ children, ...props }) => (<option value="" {...props}>
+    {children}
+  </option>);
+const Select = forwardRef(function Select({ children, className = '', hasError = false, $size = 'lg', style, 'aria-invalid': ariaInvalid, ...props }, ref) {
+    const _style = {
+        '--height': sizes[$size].height,
+        '--padding-inline': sizes[$size].paddingInline,
+        '--font-size': sizes[$size].fontSize,
+        ...style,
+    };
+    const selectClassName = classNames(styles.select, styles[`size-${$size}`], {
+        [styles.selectError]: hasError,
+    }, className);
+    return (<select ref={ref} className={selectClassName} style={_style} aria-invalid={ariaInvalid ?? hasError} {...props}>
+      {children}
+    </select>);
+});
+Select.SelectOption = SelectOption;
+Select.SelectEmptyOption = SelectEmptyOption;
+export default Select;

package/dist/client/shared/ui/StatusCounter/StatusCounter.jsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import StatusIndicator from '../StatusIndicator';
+import styles from './styles.module.scss';
+const statusColorMap = {
+    pending: 'gray',
+    running: 'blue',
+    completed: 'green',
+    failed: 'red',
+};
+const statusLabelMap = {
+    pending: 'В очереди',
+    running: 'В процессе',
+    completed: 'Завершено',
+    failed: 'Ошибки',
+};
+export default function StatusCounter({ status, count, label, animated = false, size = 'medium', className, }) {
+    const displayLabel = label || statusLabelMap[status];
+    const color = statusColorMap[status];
+    return (<div className={classNames(styles.container, styles[size], className)}>
+      <StatusIndicator $color={color} $animated={animated && status === 'running'} className={styles.indicator}/>
+      <div className={styles.content}>
+        <span className={styles.count}>{count}</span>
+        <span className={styles.label}>{displayLabel}</span>
+      </div>
+    </div>);
+}

package/dist/client/shared/ui/StatusIndicator/StatusIndicator.jsx

@@ -0,0 +1,10 @@
+import classNames from 'classnames';
+import ColorIndicator from '../ColorIndicator';
+import styles from './styles.module.scss';
+export default function StatusIndicator({ $color, $animated, title, className, children }) {
+    const cardClassName = classNames(styles['status-indicator'], styles[$color], className);
+    return (<div className={cardClassName}>
+      <ColorIndicator $color={$color} $animated={$animated} title={title}/>
+      {children}
+    </div>);
+}

package/dist/client/shared/ui/Tooltip/Tooltip.jsx

@@ -0,0 +1,16 @@
+'use client';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import styles from './styles.module.scss';
+export default function Tooltip({ children, content, side = 'top', sideOffset = 6, delayDuration = 200, }) {
+    return (<RadixTooltip.Provider delayDuration={delayDuration}>
+      <RadixTooltip.Root>
+        <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
+        <RadixTooltip.Portal>
+          <RadixTooltip.Content className={styles.content} side={side} sideOffset={sideOffset}>
+            {content}
+            <RadixTooltip.Arrow className={styles.arrow}/>
+          </RadixTooltip.Content>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>);
+}

package/dist/client/shared/ui/form/FormCheckbox/FormCheckbox.jsx

@@ -0,0 +1,24 @@
+import { useId } from 'react';
+import { useController } from 'react-hook-form';
+import { Checkbox } from '../../Checkbox';
+import Description from '../../Description';
+import styles from './styles.module.scss';
+export function FormCheckbox({ name, label, description, disabled, className }) {
+    const formControl = useController({ name });
+    const errorId = useId();
+    const descriptionId = useId();
+    const inputId = useId();
+    return (<div className={`${styles.container} ${className ?? ''}`}>
+      <label className={styles.label} htmlFor={inputId}>
+        <Checkbox id={inputId} hasError={formControl.fieldState.invalid} name={formControl.field.name} ref={formControl.field.ref} checked={formControl.field.value ?? false} onChange={formControl.field.onChange} onBlur={formControl.field.onBlur} disabled={formControl.field.disabled ||
+            formControl.formState.disabled ||
+            formControl.formState.isSubmitting ||
+            disabled} aria-describedby={`${errorId} ${descriptionId}`}/>
+        <span className={styles.label__text}>{label}</span>
+      </label>
+      {formControl.fieldState.error && (<Description variant="error" id={errorId}>
+          {formControl.fieldState.error.message}
+        </Description>)}
+      {description && <Description id={descriptionId}>{description}</Description>}
+    </div>);
+}

package/dist/client/shared/ui/form/FormCheckboxPublish/FormCheckboxPublish.jsx

@@ -0,0 +1,21 @@
+import { FormCheckbox } from '../FormCheckbox';
+import Tooltip from '../../Tooltip';
+import { QuestionCircleIcon } from '../../../lib/assets/icons/QuestionCircleIcon';
+import styles from './styles.module.scss';
+const PUBLISH_LABEL = 'Publish after translation';
+const PUBLISH_TOOLTIP = (<>
+    When enabled, translated documents will be published immediately.
+    <br />
+    When disabled, translated documents will be saved as drafts.
+  </>);
+const PublishLabel = (<span className={styles.label}>
+    {PUBLISH_LABEL}
+    <Tooltip content={PUBLISH_TOOLTIP} side="bottom">
+      <span className={styles.label__icon}>
+        <QuestionCircleIcon />
+      </span>
+    </Tooltip>
+  </span>);
+export function FormCheckboxPublish({ name, disabled, className }) {
+    return <FormCheckbox name={name} label={PublishLabel} disabled={disabled} className={className}/>;
+}

package/dist/client/shared/ui/form/FormSelect/FormSelect.jsx

@@ -0,0 +1,44 @@
+import { useId } from 'react';
+import { useController } from 'react-hook-form';
+import Description from '../../Description';
+import Label from '../../Label';
+import Select from '../../Select';
+export default function FormSelect({ name, required, options, label, description, disabled, size, placeholder, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, }) {
+    const formControl = useController({ name, rules: { required } });
+    const errorId = useId();
+    const descriptionId = useId();
+    const getAccessibilityProps = () => {
+        if (label) {
+            return {};
+        }
+        if (ariaLabelledby) {
+            return { 'aria-labelledby': ariaLabelledby };
+        }
+        if (ariaLabel) {
+            return { 'aria-label': ariaLabel };
+        }
+        return { 'aria-label': 'Select option' };
+    };
+    const selectElement = (<Select $size={size} hasError={formControl.fieldState.invalid} required={required} name={formControl.field.name} ref={formControl.field.ref} value={formControl.field.value} onChange={formControl.field.onChange} onBlur={formControl.field.onBlur} disabled={formControl.field.disabled || formControl.formState.disabled || formControl.formState.isSubmitting || disabled} aria-describedby={`${errorId} ${descriptionId}`} {...getAccessibilityProps()}>
+      {placeholder && <Select.SelectEmptyOption>{placeholder}</Select.SelectEmptyOption>}
+      {options.map((option) => (<Select.SelectOption key={option.value} value={option.value}>
+          {option.label}
+        </Select.SelectOption>))}
+    </Select>);
+    const errorAndDescription = (<>
+      {formControl.fieldState.error && (<Description variant="error" id={errorId}>
+          {formControl.fieldState.error.message}
+        </Description>)}
+      {description && <Description id={descriptionId}>{description}</Description>}
+    </>);
+    if (!label) {
+        return (<div className={className}>
+        {selectElement}
+        {errorAndDescription}
+      </div>);
+    }
+    return (<Label className={className} label={label}>
+      {selectElement}
+      {errorAndDescription}
+    </Label>);
+}

package/dist/client/shared/ui/form/FormSelectLocale/FormSelectLocale.jsx

@@ -0,0 +1,6 @@
+import { useLocaleOptions } from '../../../lib/payload/hooks/useLocaleOptions';
+import FormSelect from '../FormSelect';
+export default function FormSelectLocale({ name, required, label, description, disabled, size, className, }) {
+    const localeOptions = useLocaleOptions();
+    return (<FormSelect placeholder="-" size={size} className={className} description={description} label={label} required={required} name={name} options={localeOptions} disabled={disabled}/>);
+}

package/dist/client/shared/ui/form/FormSelectStrategy/FormSelectStrategy.jsx

@@ -0,0 +1,25 @@
+import FormSelect from '../FormSelect';
+import Tooltip from '../../Tooltip';
+import { QuestionCircleIcon } from '../../../lib/assets/icons/QuestionCircleIcon';
+import styles from './styles.module.scss';
+const STRATEGY_OPTIONS = [
+    { value: 'overwrite', label: 'Overwrite' },
+    { value: 'skip_existing', label: 'Skip existing' },
+];
+const STRATEGY_LABEL = 'Update mode';
+const STRATEGY_TOOLTIP = (<>
+    <strong>Overwrite</strong> — translate all fields, replacing existing values
+    <br />
+    <strong>Skip existing</strong> — only translate empty fields, keep existing values
+  </>);
+const StrategyLabel = (<span className={styles.label}>
+    {STRATEGY_LABEL}
+    <Tooltip content={STRATEGY_TOOLTIP} side="bottom">
+      <span className={styles.label__icon}>
+        <QuestionCircleIcon />
+      </span>
+    </Tooltip>
+  </span>);
+export function FormSelectStrategy({ name, required, description, disabled, size, className, }) {
+    return (<FormSelect size={size} className={className} description={description} label={StrategyLabel} required={required} name={name} options={[...STRATEGY_OPTIONS]} disabled={disabled}/>);
+}

package/dist/client/widgets/bulk-translation-dashboard/ui/BulkTranslationDashboard.export.jsx

@@ -0,0 +1,11 @@
+import { AnyAccessGuard } from '../../../../server/shared';
+import { clientComponentPath } from '../../../shared/utils/componentPath';
+export class BulkDocumentTranslationDashboard {
+    access;
+    serverProps;
+    constructor(access = new AnyAccessGuard()) {
+        this.access = access;
+        this.serverProps = { access };
+    }
+    path = clientComponentPath('widgets/bulk-translation-dashboard/ui/BulkTranslationDashboard.server');
+}

package/dist/client/widgets/bulk-translation-dashboard/ui/BulkTranslationDashboard.jsx

@@ -0,0 +1,55 @@
+'use client';
+import { toast, useLocale, useSelection } from '@payloadcms/ui';
+import { SelectAllStatus } from '@payloadcms/ui/providers/Selection';
+import { useEffect, useMemo } from 'react';
+import { TranslationsApi } from '../../../entities/translation';
+import { CollectionTranslationForm, FORM_FIELDS } from '../../../features/collection-translation-form';
+import { CollectionTranslationFormModel } from '../../../features/collection-translation-form/index.client';
+import CollectionTranslationPopup from '../../../features/collection-translation-popup';
+import { CollectionTranslationProgress } from '../../../features/collection-translation-progress';
+import { handleFormError } from '../../../shared/lib/forms/handle-form-error';
+import { useCollectionDashboardUrlParams } from '../../../shared/lib/payload/hooks/useCollectionDashboardUrlParams';
+export default function BulkTranslationDashboard({ hasDrafts }) {
+    const locale = useLocale();
+    const { collection } = useCollectionDashboardUrlParams();
+    const documentsSelection = useSelection();
+    const queueTranslationApi = TranslationsApi.useQueueDocumentTranslation();
+    const collectionTranslationApi = TranslationsApi.useCollectionTranslationStatus({ collection });
+    useEffect(() => {
+        if (collectionTranslationApi.error) {
+            toast.error(collectionTranslationApi.error.message);
+        }
+    }, [collectionTranslationApi.error]);
+    const initialValues = useMemo(() => ({
+        [FORM_FIELDS.SOURCE_LNG]: locale.code,
+        [FORM_FIELDS.HIDDEN_COLLECTION_SLUG]: collection,
+    }), [locale.code, collection]);
+    const { form } = CollectionTranslationFormModel.useForm({
+        initialValues,
+        disabled: collectionTranslationApi.isLoading,
+    });
+    const selectAll = documentsSelection.selectAll === SelectAllStatus.AllAvailable;
+    const selectedCount = selectAll ? documentsSelection.totalDocs : documentsSelection.count;
+    const translationInProgress = !!(collectionTranslationApi.data?.pending.length || collectionTranslationApi.data?.running.length);
+    const handleSubmit = async (formData) => {
+        try {
+            await queueTranslationApi.mutateAsync({
+                ...formData,
+                collection_id: documentsSelection.selectedIDs,
+                select_all: selectAll,
+            });
+        }
+        catch (e) {
+            handleFormError(e, form);
+        }
+    };
+    return (<CollectionTranslationPopup translationInProgress={translationInProgress} selectedCount={selectedCount}>
+      <h3>Bulk Translation Dashboard</h3>
+      <p>
+        Translate multiple documents at once using AI. Select the records you want to translate on the collection
+        dashboard, then configure your translation settings here.
+      </p>
+      <CollectionTranslationForm form={form} onSubmit={handleSubmit} selectedCount={selectedCount} hasDrafts={hasDrafts}/>
+      <CollectionTranslationProgress collection={collection} data={collectionTranslationApi.data} isPending={collectionTranslationApi.isPending}/>
+    </CollectionTranslationPopup>);
+}

package/dist/client/widgets/bulk-translation-dashboard/ui/BulkTranslationDashboard.server.jsx

@@ -0,0 +1,17 @@
+import { headers as getHeaders } from 'next/headers';
+import { collectionHasDrafts } from '../../../../server/shared/guards';
+import BulkTranslationDashboard from './BulkTranslationDashboard';
+const BulkTranslationDashboardServer = async (props) => {
+    const headers = await getHeaders();
+    const hasAccess = await props.access.check({
+        req: { user: props.user, headers, payload: props.payload },
+    });
+    if (!hasAccess)
+        return null;
+    if (!props.collectionSlug)
+        return null;
+    const collection = props.payload.collections[props.collectionSlug]?.config;
+    const hasDrafts = collection ? collectionHasDrafts(collection) : false;
+    return <BulkTranslationDashboard hasDrafts={hasDrafts}/>;
+};
+export default BulkTranslationDashboardServer;

package/dist/client/widgets/translate-document/ui/TranslateDocument.jsx

@@ -0,0 +1,55 @@
+'use client';
+import { toast, useLocale } from '@payloadcms/ui';
+import { useEffect, useMemo } from 'react';
+import { CompletedTranslationStatus, TranslationsApi } from '../../../entities/translation';
+import { OpenDocumentTranslationPopup } from '../../../features/open-document-translation-popup';
+import { DocumentTranslationForm, FORM_FIELDS } from '../../../features/translate-document-form';
+import { DocumentTranslationFormModel } from '../../../features/translate-document-form/index.client';
+import { handleFormError } from '../../../shared/lib/forms/handle-form-error';
+import { useCollectionDocumentUrlParams } from '../../../shared/lib/payload/hooks/useCollectionDocumentUrlParams';
+import { DocumentTranslationProgressFailed } from '../../../features/document-translation-progress-failed';
+import { DocumentTranslationProgressRunning } from '../../../features/document-translation-progress-running';
+import { DocumentTranslationProgressPending } from '../../../features/document-translation-progress-pending';
+const TranslateDocument = ({ hasDrafts }) => {
+    const locale = useLocale();
+    const params = useCollectionDocumentUrlParams();
+    const queueTranslationApi = TranslationsApi.useQueueDocumentTranslation();
+    const { data, error, isLoading } = TranslationsApi.useDocumentTranslation(params);
+    useEffect(() => {
+        if (error) {
+            toast.error(error.message);
+        }
+    }, [error]);
+    const initialValues = useMemo(() => ({
+        [FORM_FIELDS.SOURCE_LNG]: locale.code,
+        [FORM_FIELDS.HIDDEN_COLLECTION_SLUG]: params.collection,
+        [FORM_FIELDS.HIDDEN_COLLECTION_ID]: params.id,
+    }), [locale.code, params.collection, params.id]);
+    const { form } = DocumentTranslationFormModel.useForm({ initialValues });
+    const handleSubmit = async (formData, onSuccess) => {
+        try {
+            await queueTranslationApi.mutateAsync({
+                ...formData,
+                collection_id: [formData[FORM_FIELDS.HIDDEN_COLLECTION_ID]],
+            });
+            onSuccess?.();
+        }
+        catch (e) {
+            handleFormError(e, form);
+        }
+    };
+    return (<>
+      <OpenDocumentTranslationPopup isLoading={isLoading}>
+        {({ close }) => (<>
+            <h4>Document Translation</h4>
+            <DocumentTranslationForm form={form} onSubmit={(data) => handleSubmit(data, close)} hasDrafts={hasDrafts}/>
+          </>)}
+      </OpenDocumentTranslationPopup>
+
+      {data?.status === 'completed' && (<CompletedTranslationStatus sourceLocale={data.input.source_lng} targetLocale={data.input.target_lng} completed_at={data.completed_at}/>)}
+      {data?.status === 'failed' && <DocumentTranslationProgressFailed data={data}/>}
+      {data?.status === 'running' && <DocumentTranslationProgressRunning data={data}/>}
+      {data?.status === 'pending' && <DocumentTranslationProgressPending data={data}/>}
+    </>);
+};
+export default TranslateDocument;

package/dist/client/widgets/translate-document/ui/TranslateDocument.server.jsx

@@ -0,0 +1,16 @@
+import { headers as getHeaders } from 'next/headers';
+import { collectionHasDrafts } from '../../../../server/shared/guards';
+import TranslateDocument from './TranslateDocument';
+async function TranslateDocumentServer(props) {
+    const headers = await getHeaders();
+    const hasAccess = await props.access.check({
+        req: { user: props.user, headers, payload: props.payload },
+    });
+    if (!hasAccess)
+        return null;
+    if (!props.id)
+        return null;
+    const hasDrafts = collectionHasDrafts(props.collection);
+    return <TranslateDocument hasDrafts={hasDrafts}/>;
+}
+export default TranslateDocumentServer;

package/dist/plugin.js

@@ -19,15 +19,19 @@ import { normalizePath, pipe } from './server/shared';
             const { access, translationProvider, basePath: rawBasePath = '/translate' } = this.pluginConfig;
             // Build schema map from deep-cloned collections
             // Deep clone is required because Payload mutates the original collection objects,
-            // removing `localized: true` from nested fields during sanitization
+            // removing `localized: true` from nested fields during sanitization.
+            // We use JSON round-trip instead of structuredClone because Lexical editor
+            // configs contain async functions that structuredClone cannot handle.
+            // TODO: Consider introducing a FieldLike interface with only the properties
+            // used by the pipeline (name, type, localized, fields, blocks, tabs, custom)
+            // to make the contract explicit and avoid reliance on JSON round-trip.
             const schemaMap = new Map(this.pluginConfig.collections.map((col)=>[
                     col.slug,
-                    structuredClone(col.fields)
+                    JSON.parse(JSON.stringify(col.fields))
                 ]));
             const collectionSlugs = new Set(schemaMap.keys());
             const basePath = normalizePath(rawBasePath);
             const translateHandler = new TranslateDocumentHandler(translationProvider, schemaMap);
-            // Configure runner with handler callback
             const runnerConfigModifier = this.pluginConfig.runner.configure({
                 handler: async (payload, input)=>{
                     await translateHandler.handle(payload, {

package/dist/server/features/translate-document/handler.js

@@ -18,13 +18,15 @@ import { createTranslationStrategy } from '../../modules/translation-pipeline/st
         const sourceData = await payload.findByID({
             collection,
             id: collectionId,
-            locale: sourceLng
+            locale: sourceLng,
+            depth: 0
         });
         const targetData = await payload.findByID({
             collection,
             id: collectionId,
             locale: targetLng,
-            fallbackLocale: false
+            fallbackLocale: false,
+            depth: 0
         });
         const translationStrategy = createTranslationStrategy(strategy);
         const pipeline = new TranslationPipeline({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@focus-reactive/payload-plugin-translator",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Translation plugin for Payload CMS 3.x. Automatically translate your localized content using any translation provider.",
   "type": "module",
   "license": "MIT",