@ai-stack/payloadcms 3.76.0-beta.1 → 3.76.0-beta.3

package/dist/ui/Compose/Compose.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/Compose/Compose.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientField } from 'payload'\nimport type { FC } from 'react'\n\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { Popup, useField } from '@payloadcms/ui'\nimport React, { useCallback, useMemo, useState } from 'react'\n\nimport { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js'\nimport { useInstructions } from '../../providers/InstructionsProvider/useInstructions.js'\nimport { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js'\nimport { PluginIcon } from '../Icons/Icons.js'\nimport styles from './compose.module.css'\nimport { useMenu } from './hooks/menu/useMenu.js'\nimport { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js'\nimport { useGenerate } from './hooks/useGenerate.js'\nimport { UndoRedoActions } from './UndoRedoActions.js'\n\nexport type ComposeProps = {\n  descriptionProps?: {\n    field: ClientField\n    path: string\n    schemaPath: string\n  }\n  forceVisible?: boolean\n  instructionId: string\n  isConfigAllowed: boolean\n}\n\nexport const Compose: FC<ComposeProps> = ({ descriptionProps, forceVisible, instructionId, isConfigAllowed }) => {\n  const pathFromContext = descriptionProps?.path\n  const { editor: lexicalEditor } = useEditorConfigContext()\n  \n  // Get global openDrawer from context\n  const { openDrawer } = useInstructions()\n\n  // Initialize global active-field tracking\n  useActiveFieldTracking()\n\n  const [isProcessing, setIsProcessing] = useState<boolean>(false)\n  const { generate, isJobActive, isLoading, jobProgress, jobStatus, stop } = useGenerate({ instructionId })\n\n  // Memoize menu event handlers to prevent recreation on every render\n  const onCompose = useCallback(() => {\n    console.log('Composing...')\n    setIsProcessing(true)\n    generate({\n      action: 'Compose',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onExpand = useCallback(() => {\n    console.log('Expanding...')\n    generate({\n      action: 'Expand',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onProofread = useCallback(() => {\n    console.log('Proofreading...')\n    generate({\n      action: 'Proofread',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onRephrase = useCallback(() => {\n    console.log('Rephrasing...')\n    generate({\n      action: 'Rephrase',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onSimplify = useCallback(() => {\n    console.log('Simplifying...')\n    generate({\n      action: 'Simplify',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onSummarize = useCallback(() => {\n    console.log('Summarizing...')\n    generate({\n      action: 'Summarize',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onTranslate = useCallback((data: unknown) => {\n    console.log('Translating...')\n    generate({\n      action: 'Translate',\n      params: data,\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const handleOpenSettings = useCallback(() => {\n    if (isConfigAllowed) {\n      openDrawer(instructionId)\n    }\n  }, [isConfigAllowed, openDrawer, instructionId])\n\n  const { ActiveComponent, Menu } = useMenu(\n    {\n      onCompose,\n      onExpand,\n      onProofread,\n      onRephrase,\n      onSettings: isConfigAllowed ? handleOpenSettings : undefined,\n      onSimplify,\n      onSummarize,\n      onTranslate,\n    },\n    {\n      isConfigAllowed,\n    },\n  )\n\n  const { setValue } = useField<string>({\n    path: pathFromContext,\n  })\n\n  const setIfValueIsLexicalState = useCallback((val: any) => {\n    // Prevent setting incomplete states during streaming\n    if (!val || typeof val !== 'object' || !('root' in val) || !lexicalEditor) {\n      return\n    }\n\n    // Validate that the state is complete before setting\n    // Check for common incomplete streaming states\n    if (!val.root || typeof val.root !== 'object' || Object.keys(val.root).length === 0) {\n      return\n    }\n\n    if (val.root.type !== 'root') {\n      return\n    }\n\n    if (!val.root.children || !Array.isArray(val.root.children) || val.root.children.length === 0) {\n      return\n    }\n\n    // Check for invalid child types (common streaming issue)\n    const hasInvalidChildren = val.root.children.some(\n      (child: any) => !child || !child.type || child.type === 'undefined' || child.type === '',\n    )\n\n    if (hasInvalidChildren) {\n      return\n    }\n\n    // State looks valid, proceed\n    setSafeLexicalState(JSON.stringify(val), lexicalEditor)\n\n    // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo - revisit\n  }, [])\n\n  const popupRender = useCallback(\n    ({ close }: { close: () => void }) => {\n      return <Menu isLoading={isProcessing || isLoading} onClose={close} />\n    },\n    [isProcessing, isLoading, Menu],\n  )\n\n  // Combine loading states to reduce re-renders\n  const isAnyLoading = isProcessing || isLoading || isJobActive\n\n  const memoizedPopup = useMemo(() => {\n    return (\n      <Popup\n        button={<PluginIcon isLoading={isAnyLoading} />}\n        render={popupRender}\n        verticalAlign=\"bottom\"\n      />\n    )\n  }, [popupRender, isAnyLoading])\n\n  return (\n    <label\n      className={`payloadai-compose__actions ${styles.actions} ${forceVisible ? styles.actionsVisible : ''}`}\n      onClick={(e) => e.preventDefault()}\n      role=\"presentation\"\n    >\n      {memoizedPopup}\n      <ActiveComponent\n        isLoading={isProcessing || isLoading || isJobActive}\n        loadingLabel={isJobActive ? (jobStatus === 'running' ? `Video ${Math.max(0, Math.min(100, Math.round(jobProgress ?? 0)))}%` : (jobStatus || 'Queued')) : undefined}\n        stop={stop}\n      />\n      <UndoRedoActions\n        onChange={(val) => {\n          setValue(val)\n          setIfValueIsLexicalState(val)\n        }}\n      />\n    </label>\n  )\n}\n"],"names":["useEditorConfigContext","Popup","useField","React","useCallback","useMemo","useState","useInstructions","setSafeLexicalState","PluginIcon","styles","useMenu","useActiveFieldTracking","useGenerate","UndoRedoActions","Compose","descriptionProps","forceVisible","instructionId","isConfigAllowed","pathFromContext","path","editor","lexicalEditor","openDrawer","isProcessing","setIsProcessing","generate","isJobActive","isLoading","jobProgress","jobStatus","stop","onCompose","console","log","action","catch","reason","error","finally","onExpand","onProofread","onRephrase","onSimplify","onSummarize","onTranslate","data","params","handleOpenSettings","ActiveComponent","Menu","onSettings","undefined","setValue","setIfValueIsLexicalState","val","root","Object","keys","length","type","children","Array","isArray","hasInvalidChildren","some","child","JSON","stringify","popupRender","close","onClose","isAnyLoading","memoizedPopup","button","render","verticalAlign","label","className","actions","actionsVisible","onClick","e","preventDefault","role","loadingLabel","Math","max","min","round","onChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/ui/Compose/Compose.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientField } from 'payload'\nimport type { FC } from 'react'\n\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { Popup, useField, useTranslation } from '@payloadcms/ui'\nimport React, { useCallback, useMemo, useState } from 'react'\n\nimport type { PluginAITranslationKeys, PluginAITranslations } from '../../translations/index.js'\nimport type { ActionMenuItems } from '../../types.js'\n\nimport { useInstructions } from '../../providers/InstructionsProvider/useInstructions.js'\nimport { setSafeLexicalState } from '../../utilities/lexical/setSafeLexicalState.js'\nimport { PluginIcon } from '../Icons/Icons.js'\nimport styles from './compose.module.scss'\nimport { useMenu } from './hooks/menu/useMenu.js'\nimport { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js'\nimport { useGenerate } from './hooks/useGenerate.js'\nimport { UndoRedoActions } from './UndoRedoActions.js'\n\nexport type ComposeProps = {\n  descriptionProps?: {\n    field: ClientField\n    path: string\n    schemaPath: string\n  }\n  forceVisible?: boolean\n  instructionId: string\n  isConfigAllowed: boolean\n}\n\nexport const Compose: FC<ComposeProps> = ({\n  descriptionProps,\n  forceVisible,\n  instructionId,\n  isConfigAllowed,\n}) => {\n  const pathFromContext = descriptionProps?.path\n  const { editor: lexicalEditor } = useEditorConfigContext()\n\n  // Get global openDrawer from context\n  const { openDrawer } = useInstructions()\n\n  // Initialize global active-field tracking\n  useActiveFieldTracking()\n\n  const { t } = useTranslation<PluginAITranslations, PluginAITranslationKeys>()\n\n  const [isProcessing, setIsProcessing] = useState<boolean>(false)\n  const { generate, isJobActive, isLoading, jobProgress, jobStatus, stop } = useGenerate({\n    instructionId,\n  })\n\n  // Single factory for all action callbacks, eliminating duplication\n  const createAction = useCallback(\n    (action: ActionMenuItems, params?: unknown) => {\n      setIsProcessing(true)\n      generate({ action, params })\n        .catch((reason) => {\n          console.error(`AI Plugin — ${action}:`, reason)\n        })\n        .finally(() => {\n          setIsProcessing(false)\n        })\n    },\n    [generate],\n  )\n\n  const onCompose = useCallback(() => createAction('Compose'), [createAction])\n  const onExpand = useCallback(() => createAction('Expand'), [createAction])\n  const onProofread = useCallback(() => createAction('Proofread'), [createAction])\n  const onRephrase = useCallback(() => createAction('Rephrase'), [createAction])\n  const onSimplify = useCallback(() => createAction('Simplify'), [createAction])\n  const onSummarize = useCallback(() => createAction('Summarize'), [createAction])\n  const onTranslate = useCallback(\n    (data: unknown) => {\n      // If the action is triggered directly via the button click,\n      // it passes a React SyntheticEvent which cannot (and should not) be stringified.\n      // We only want to pass data if it's the actual payload containing { locale }.\n      const isEvent = data && typeof data === 'object' && 'nativeEvent' in data\n      return createAction('Translate', isEvent ? undefined : data)\n    },\n    [createAction],\n  )\n\n  const handleOpenSettings = useCallback(() => {\n    if (isConfigAllowed) {\n      openDrawer(instructionId)\n    }\n  }, [isConfigAllowed, openDrawer, instructionId])\n\n  const { ActiveComponent, Menu } = useMenu(\n    {\n      onCompose,\n      onExpand,\n      onProofread,\n      onRephrase,\n      onSettings: isConfigAllowed ? handleOpenSettings : undefined,\n      onSimplify,\n      onSummarize,\n      onTranslate,\n    },\n    {\n      isConfigAllowed,\n    },\n  )\n\n  const { setValue } = useField<string>({\n    path: pathFromContext,\n  })\n\n  const setIfValueIsLexicalState = useCallback((val: any) => {\n    // Prevent setting incomplete states during streaming\n    if (!val || typeof val !== 'object' || !('root' in val) || !lexicalEditor) {\n      return\n    }\n\n    // Validate that the state is complete before setting\n    // Check for common incomplete streaming states\n    if (!val.root || typeof val.root !== 'object' || Object.keys(val.root).length === 0) {\n      return\n    }\n\n    if (val.root.type !== 'root') {\n      return\n    }\n\n    if (!val.root.children || !Array.isArray(val.root.children) || val.root.children.length === 0) {\n      return\n    }\n\n    // Check for invalid child types (common streaming issue)\n    const hasInvalidChildren = val.root.children.some(\n      (child: any) => !child || !child.type || child.type === 'undefined' || child.type === '',\n    )\n\n    if (hasInvalidChildren) {\n      return\n    }\n\n    // State looks valid, proceed\n    setSafeLexicalState(JSON.stringify(val), lexicalEditor)\n\n    // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo - revisit\n  }, [])\n\n  const popupRender = useCallback(\n    ({ close }: { close: () => void }) => {\n      return <Menu isLoading={isProcessing || isLoading} onClose={close} />\n    },\n    [isProcessing, isLoading, Menu],\n  )\n\n  // Combine loading states to reduce re-renders\n  const isAnyLoading = isProcessing || isLoading || isJobActive\n\n  const memoizedPopup = useMemo(() => {\n    return (\n      <Popup\n        button={<PluginIcon isLoading={isAnyLoading} />}\n        render={popupRender}\n        verticalAlign=\"bottom\"\n      />\n    )\n  }, [popupRender, isAnyLoading])\n\n  return (\n    <label\n      className={`payloadai-compose__actions ${styles.actions} ${forceVisible ? styles.actionsVisible : ''}`}\n      onClick={(e) => e.preventDefault()}\n      role=\"presentation\"\n    >\n      {memoizedPopup}\n      <ActiveComponent\n        isLoading={isProcessing || isLoading || isJobActive}\n        loadingLabel={\n          isJobActive\n            ? jobStatus === 'running'\n              ? `${t('ai-plugin:general:video' as any)} ${Math.max(0, Math.min(100, Math.round(jobProgress ?? 0)))}%`\n              : jobStatus || t('ai-plugin:general:queued' as any)\n            : undefined\n        }\n        stop={stop}\n      />\n      <div style={{ alignItems: 'center', display: 'flex', gap: '10px', marginLeft: 'auto' }}>\n        <UndoRedoActions\n          onChange={(val) => {\n            setValue(val)\n            setIfValueIsLexicalState(val)\n          }}\n        />\n      </div>\n    </label>\n  )\n}\n"],"names":["useEditorConfigContext","Popup","useField","useTranslation","React","useCallback","useMemo","useState","useInstructions","setSafeLexicalState","PluginIcon","styles","useMenu","useActiveFieldTracking","useGenerate","UndoRedoActions","Compose","descriptionProps","forceVisible","instructionId","isConfigAllowed","pathFromContext","path","editor","lexicalEditor","openDrawer","t","isProcessing","setIsProcessing","generate","isJobActive","isLoading","jobProgress","jobStatus","stop","createAction","action","params","catch","reason","console","error","finally","onCompose","onExpand","onProofread","onRephrase","onSimplify","onSummarize","onTranslate","data","isEvent","undefined","handleOpenSettings","ActiveComponent","Menu","onSettings","setValue","setIfValueIsLexicalState","val","root","Object","keys","length","type","children","Array","isArray","hasInvalidChildren","some","child","JSON","stringify","popupRender","close","onClose","isAnyLoading","memoizedPopup","button","render","verticalAlign","label","className","actions","actionsVisible","onClick","e","preventDefault","role","loadingLabel","Math","max","min","round","div","style","alignItems","display","gap","marginLeft","onChange"],"mappings":"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"}

package/dist/ui/Compose/Compose.jsx

@@ -1,111 +1,51 @@
 'use client';
 import { useEditorConfigContext } from '@payloadcms/richtext-lexical/client';
-import { Popup, useField } from '@payloadcms/ui';
+import { Popup, useField, useTranslation } from '@payloadcms/ui';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useInstructions } from '../../providers/InstructionsProvider/useInstructions.js';
-import { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js';
+import { setSafeLexicalState } from '../../utilities/lexical/setSafeLexicalState.js';
 import { PluginIcon } from '../Icons/Icons.js';
-import styles from './compose.module.css';
+import styles from './compose.module.scss';
 import { useMenu } from './hooks/menu/useMenu.js';
 import { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js';
 import { useGenerate } from './hooks/useGenerate.js';
 import { UndoRedoActions } from './UndoRedoActions.js';
-export const Compose = ({ descriptionProps, forceVisible, instructionId, isConfigAllowed }) => {
+export const Compose = ({ descriptionProps, forceVisible, instructionId, isConfigAllowed, }) => {
     const pathFromContext = descriptionProps?.path;
     const { editor: lexicalEditor } = useEditorConfigContext();
     // Get global openDrawer from context
     const { openDrawer } = useInstructions();
     // Initialize global active-field tracking
     useActiveFieldTracking();
+    const { t } = useTranslation();
     const [isProcessing, setIsProcessing] = useState(false);
-    const { generate, isJobActive, isLoading, jobProgress, jobStatus, stop } = useGenerate({ instructionId });
-    // Memoize menu event handlers to prevent recreation on every render
-    const onCompose = useCallback(() => {
-        console.log('Composing...');
+    const { generate, isJobActive, isLoading, jobProgress, jobStatus, stop } = useGenerate({
+        instructionId,
+    });
+    // Single factory for all action callbacks, eliminating duplication
+    const createAction = useCallback((action, params) => {
         setIsProcessing(true);
-        generate({
-            action: 'Compose',
-        })
-            .catch((reason) => {
-            console.error('Compose : ', reason);
-        })
-            .finally(() => {
-            setIsProcessing(false);
-        });
-    }, [generate]);
-    const onExpand = useCallback(() => {
-        console.log('Expanding...');
-        generate({
-            action: 'Expand',
-        })
-            .catch((reason) => {
-            console.error('Compose : ', reason);
-        })
-            .finally(() => {
-            setIsProcessing(false);
-        });
-    }, [generate]);
-    const onProofread = useCallback(() => {
-        console.log('Proofreading...');
-        generate({
-            action: 'Proofread',
-        })
-            .catch((reason) => {
-            console.error('Compose : ', reason);
-        })
-            .finally(() => {
-            setIsProcessing(false);
-        });
-    }, [generate]);
-    const onRephrase = useCallback(() => {
-        console.log('Rephrasing...');
-        generate({
-            action: 'Rephrase',
-        })
-            .catch((reason) => {
-            console.error('Compose : ', reason);
-        })
-            .finally(() => {
-            setIsProcessing(false);
-        });
-    }, [generate]);
-    const onSimplify = useCallback(() => {
-        console.log('Simplifying...');
-        generate({
-            action: 'Simplify',
-        })
-            .catch((reason) => {
-            console.error('Compose : ', reason);
-        })
-            .finally(() => {
-            setIsProcessing(false);
-        });
-    }, [generate]);
-    const onSummarize = useCallback(() => {
-        console.log('Summarizing...');
-        generate({
-            action: 'Summarize',
-        })
+        generate({ action, params })
             .catch((reason) => {
-            console.error('Compose : ', reason);
+            console.error(`AI Plugin — ${action}:`, reason);
         })
             .finally(() => {
             setIsProcessing(false);
         });
     }, [generate]);
+    const onCompose = useCallback(() => createAction('Compose'), [createAction]);
+    const onExpand = useCallback(() => createAction('Expand'), [createAction]);
+    const onProofread = useCallback(() => createAction('Proofread'), [createAction]);
+    const onRephrase = useCallback(() => createAction('Rephrase'), [createAction]);
+    const onSimplify = useCallback(() => createAction('Simplify'), [createAction]);
+    const onSummarize = useCallback(() => createAction('Summarize'), [createAction]);
     const onTranslate = useCallback((data) => {
-        console.log('Translating...');
-        generate({
-            action: 'Translate',
-            params: data,
-        })
-            .catch((reason) => {
-            console.error('Compose : ', reason);
-        })
-            .finally(() => {
-            setIsProcessing(false);
-        });
-    }, [generate]);
+        // If the action is triggered directly via the button click,
+        // it passes a React SyntheticEvent which cannot (and should not) be stringified.
+        // We only want to pass data if it's the actual payload containing { locale }.
+        const isEvent = data && typeof data === 'object' && 'nativeEvent' in data;
+        return createAction('Translate', isEvent ? undefined : data);
+    }, [createAction]);
     const handleOpenSettings = useCallback(() => {
         if (isConfigAllowed) {
             openDrawer(instructionId);
@@ -161,10 +101,16 @@ export const Compose = ({ descriptionProps, forceVisible, instructionId, isConfi
     }, [popupRender, isAnyLoading]);
     return (<label className={`payloadai-compose__actions ${styles.actions} ${forceVisible ? styles.actionsVisible : ''}`} onClick={(e) => e.preventDefault()} role="presentation">
       {memoizedPopup}
-      <ActiveComponent isLoading={isProcessing || isLoading || isJobActive} loadingLabel={isJobActive ? (jobStatus === 'running' ? `Video ${Math.max(0, Math.min(100, Math.round(jobProgress ?? 0)))}%` : (jobStatus || 'Queued')) : undefined} stop={stop}/>
-      <UndoRedoActions onChange={(val) => {
+      <ActiveComponent isLoading={isProcessing || isLoading || isJobActive} loadingLabel={isJobActive
+            ? jobStatus === 'running'
+                ? `${t('ai-plugin:general:video')} ${Math.max(0, Math.min(100, Math.round(jobProgress ?? 0)))}%`
+                : jobStatus || t('ai-plugin:general:queued')
+            : undefined} stop={stop}/>
+      <div style={{ alignItems: 'center', display: 'flex', gap: '10px', marginLeft: 'auto' }}>
+        <UndoRedoActions onChange={(val) => {
             setValue(val);
             setIfValueIsLexicalState(val);
         }}/>
+      </div>
     </label>);
 };

package/dist/ui/Compose/ComposePlaceholder.js

@@ -38,7 +38,7 @@ import { Compose } from './Compose.js';
                         unmountTimerRef.current = setTimeout(()=>{
                             setShouldMount(false);
                             unmountTimerRef.current = null;
-                        }, 1200) // 500ms delay to prevent rapid remounting
+                        }, 1200) // 1200ms delay to prevent rapid remounting
                         ;
                     }
                     break;

package/dist/ui/Compose/ComposePlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/Compose/ComposePlaceholder.tsx"],"sourcesContent":["'use client'\n\nimport type { FC } from 'react'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport type { ComposeProps } from './Compose.js'\n\nimport { Compose } from './Compose.js'\n\n/**\n * Lightweight placeholder component that lazy-loads Compose when field becomes active.\n * Uses MutationObserver to watch for .ai-plugin-active class added by useActiveFieldTracking.\n */\nexport const ComposePlaceholder: FC<ComposeProps> = (props) => {\n  const [shouldMount, setShouldMount] = useState(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const unmountTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) {\n      return\n    }\n\n    // Find the parent .field-type container\n    const fieldContainer = container.closest('.field-type')\n    if (!fieldContainer) {\n      return\n    }\n\n    // Watch for .ai-plugin-active class changes\n    const observer = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {\n          if (fieldContainer.classList.contains('ai-plugin-active')) {\n            // Field is active - mount Compose and cancel any pending unmount\n            if (unmountTimerRef.current) {\n              clearTimeout(unmountTimerRef.current)\n              unmountTimerRef.current = null\n            }\n            setShouldMount(true)\n          } else if (shouldMount) {\n            // Field is inactive - schedule unmount after delay\n            if (unmountTimerRef.current) {\n              clearTimeout(unmountTimerRef.current)\n            }\n            unmountTimerRef.current = setTimeout(() => {\n              setShouldMount(false)\n              unmountTimerRef.current = null\n            }, 1200) // 500ms delay to prevent rapid remounting\n          }\n          break\n        }\n      }\n    })\n\n    observer.observe(fieldContainer, {\n      attributeFilter: ['class'],\n      attributes: true,\n    })\n\n    // Check initial state in case field is already active\n    if (fieldContainer.classList.contains('ai-plugin-active')) {\n      setShouldMount(true)\n    }\n\n    return () => {\n      observer.disconnect()\n      if (unmountTimerRef.current) {\n        clearTimeout(unmountTimerRef.current)\n      }\n    }\n  }, [shouldMount])\n\n  return (\n    <div ref={containerRef} style={{ display: 'contents' }}>\n      {shouldMount ? <Compose {...props} /> : null}\n    </div>\n  )\n}\n"],"names":["React","useEffect","useRef","useState","Compose","ComposePlaceholder","props","shouldMount","setShouldMount","containerRef","unmountTimerRef","container","current","fieldContainer","closest","observer","MutationObserver","mutations","mutation","type","attributeName","classList","contains","clearTimeout","setTimeout","observe","attributeFilter","attributes","disconnect","div","ref","style","display"],"mappings":"AAAA;;AAIA,OAAOA,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAI1D,SAASC,OAAO,QAAQ,eAAc;AAEtC;;;CAGC,GACD,OAAO,MAAMC,qBAAuC,CAACC;IACnD,MAAM,CAACC,aAAaC,eAAe,GAAGL,SAAS;IAC/C,MAAMM,eAAeP,OAAuB;IAC5C,MAAMQ,kBAAkBR,OAA6C;IAErED,UAAU;QACR,MAAMU,YAAYF,aAAaG,OAAO;QACtC,IAAI,CAACD,WAAW;YACd;QACF;QAEA,wCAAwC;QACxC,MAAME,iBAAiBF,UAAUG,OAAO,CAAC;QACzC,IAAI,CAACD,gBAAgB;YACnB;QACF;QAEA,4CAA4C;QAC5C,MAAME,WAAW,IAAIC,iBAAiB,CAACC;YACrC,KAAK,MAAMC,YAAYD,UAAW;gBAChC,IAAIC,SAASC,IAAI,KAAK,gBAAgBD,SAASE,aAAa,KAAK,SAAS;oBACxE,IAAIP,eAAeQ,SAAS,CAACC,QAAQ,CAAC,qBAAqB;wBACzD,iEAAiE;wBACjE,IAAIZ,gBAAgBE,OAAO,EAAE;4BAC3BW,aAAab,gBAAgBE,OAAO;4BACpCF,gBAAgBE,OAAO,GAAG;wBAC5B;wBACAJ,eAAe;oBACjB,OAAO,IAAID,aAAa;wBACtB,mDAAmD;wBACnD,IAAIG,gBAAgBE,OAAO,EAAE;4BAC3BW,aAAab,gBAAgBE,OAAO;wBACtC;wBACAF,gBAAgBE,OAAO,GAAGY,WAAW;4BACnChB,eAAe;4BACfE,gBAAgBE,OAAO,GAAG;wBAC5B,GAAG,MAAM,0CAA0C;;oBACrD;oBACA;gBACF;YACF;QACF;QAEAG,SAASU,OAAO,CAACZ,gBAAgB;YAC/Ba,iBAAiB;gBAAC;aAAQ;YAC1BC,YAAY;QACd;QAEA,sDAAsD;QACtD,IAAId,eAAeQ,SAAS,CAACC,QAAQ,CAAC,qBAAqB;YACzDd,eAAe;QACjB;QAEA,OAAO;YACLO,SAASa,UAAU;YACnB,IAAIlB,gBAAgBE,OAAO,EAAE;gBAC3BW,aAAab,gBAAgBE,OAAO;YACtC;QACF;IACF,GAAG;QAACL;KAAY;IAEhB,qBACE,KAACsB;QAAIC,KAAKrB;QAAcsB,OAAO;YAAEC,SAAS;QAAW;kBAClDzB,4BAAc,KAACH;YAAS,GAAGE,KAAK;aAAO;;AAG9C,EAAC"}
+{"version":3,"sources":["../../../src/ui/Compose/ComposePlaceholder.tsx"],"sourcesContent":["'use client'\n\nimport type { FC } from 'react'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport type { ComposeProps } from './Compose.js'\n\nimport { Compose } from './Compose.js'\n\n/**\n * Lightweight placeholder component that lazy-loads Compose when field becomes active.\n * Uses MutationObserver to watch for .ai-plugin-active class added by useActiveFieldTracking.\n */\nexport const ComposePlaceholder: FC<ComposeProps> = (props) => {\n  const [shouldMount, setShouldMount] = useState(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const unmountTimerRef = useRef<null | ReturnType<typeof setTimeout>>(null)\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) {\n      return\n    }\n\n    // Find the parent .field-type container\n    const fieldContainer = container.closest('.field-type')\n    if (!fieldContainer) {\n      return\n    }\n\n    // Watch for .ai-plugin-active class changes\n    const observer = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {\n          if (fieldContainer.classList.contains('ai-plugin-active')) {\n            // Field is active - mount Compose and cancel any pending unmount\n            if (unmountTimerRef.current) {\n              clearTimeout(unmountTimerRef.current)\n              unmountTimerRef.current = null\n            }\n            setShouldMount(true)\n          } else if (shouldMount) {\n            // Field is inactive - schedule unmount after delay\n            if (unmountTimerRef.current) {\n              clearTimeout(unmountTimerRef.current)\n            }\n            unmountTimerRef.current = setTimeout(() => {\n              setShouldMount(false)\n              unmountTimerRef.current = null\n            }, 1200) // 1200ms delay to prevent rapid remounting\n          }\n          break\n        }\n      }\n    })\n\n    observer.observe(fieldContainer, {\n      attributeFilter: ['class'],\n      attributes: true,\n    })\n\n    // Check initial state in case field is already active\n    if (fieldContainer.classList.contains('ai-plugin-active')) {\n      setShouldMount(true)\n    }\n\n    return () => {\n      observer.disconnect()\n      if (unmountTimerRef.current) {\n        clearTimeout(unmountTimerRef.current)\n      }\n    }\n  }, [shouldMount])\n\n  return (\n    <div ref={containerRef} style={{ display: 'contents' }}>\n      {shouldMount ? <Compose {...props} /> : null}\n    </div>\n  )\n}\n"],"names":["React","useEffect","useRef","useState","Compose","ComposePlaceholder","props","shouldMount","setShouldMount","containerRef","unmountTimerRef","container","current","fieldContainer","closest","observer","MutationObserver","mutations","mutation","type","attributeName","classList","contains","clearTimeout","setTimeout","observe","attributeFilter","attributes","disconnect","div","ref","style","display"],"mappings":"AAAA;;AAIA,OAAOA,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAI1D,SAASC,OAAO,QAAQ,eAAc;AAEtC;;;CAGC,GACD,OAAO,MAAMC,qBAAuC,CAACC;IACnD,MAAM,CAACC,aAAaC,eAAe,GAAGL,SAAS;IAC/C,MAAMM,eAAeP,OAAuB;IAC5C,MAAMQ,kBAAkBR,OAA6C;IAErED,UAAU;QACR,MAAMU,YAAYF,aAAaG,OAAO;QACtC,IAAI,CAACD,WAAW;YACd;QACF;QAEA,wCAAwC;QACxC,MAAME,iBAAiBF,UAAUG,OAAO,CAAC;QACzC,IAAI,CAACD,gBAAgB;YACnB;QACF;QAEA,4CAA4C;QAC5C,MAAME,WAAW,IAAIC,iBAAiB,CAACC;YACrC,KAAK,MAAMC,YAAYD,UAAW;gBAChC,IAAIC,SAASC,IAAI,KAAK,gBAAgBD,SAASE,aAAa,KAAK,SAAS;oBACxE,IAAIP,eAAeQ,SAAS,CAACC,QAAQ,CAAC,qBAAqB;wBACzD,iEAAiE;wBACjE,IAAIZ,gBAAgBE,OAAO,EAAE;4BAC3BW,aAAab,gBAAgBE,OAAO;4BACpCF,gBAAgBE,OAAO,GAAG;wBAC5B;wBACAJ,eAAe;oBACjB,OAAO,IAAID,aAAa;wBACtB,mDAAmD;wBACnD,IAAIG,gBAAgBE,OAAO,EAAE;4BAC3BW,aAAab,gBAAgBE,OAAO;wBACtC;wBACAF,gBAAgBE,OAAO,GAAGY,WAAW;4BACnChB,eAAe;4BACfE,gBAAgBE,OAAO,GAAG;wBAC5B,GAAG,MAAM,2CAA2C;;oBACtD;oBACA;gBACF;YACF;QACF;QAEAG,SAASU,OAAO,CAACZ,gBAAgB;YAC/Ba,iBAAiB;gBAAC;aAAQ;YAC1BC,YAAY;QACd;QAEA,sDAAsD;QACtD,IAAId,eAAeQ,SAAS,CAACC,QAAQ,CAAC,qBAAqB;YACzDd,eAAe;QACjB;QAEA,OAAO;YACLO,SAASa,UAAU;YACnB,IAAIlB,gBAAgBE,OAAO,EAAE;gBAC3BW,aAAab,gBAAgBE,OAAO;YACtC;QACF;IACF,GAAG;QAACL;KAAY;IAEhB,qBACE,KAACsB;QAAIC,KAAKrB;QAAcsB,OAAO;YAAEC,SAAS;QAAW;kBAClDzB,4BAAc,KAACH;YAAS,GAAGE,KAAK;aAAO;;AAG9C,EAAC"}

package/dist/ui/Compose/ComposePlaceholder.jsx

@@ -39,7 +39,7 @@ export const ComposePlaceholder = (props) => {
                         unmountTimerRef.current = setTimeout(() => {
                             setShouldMount(false);
                             unmountTimerRef.current = null;
-                        }, 1200); // 500ms delay to prevent rapid remounting
+                        }, 1200); // 1200ms delay to prevent rapid remounting
                     }
                     break;
                 }

package/dist/ui/Compose/{compose.module.css → compose.module.scss}

@@ -103,11 +103,9 @@
   pointer-events: auto;
   max-height: 100px;
   transform: scaleY(1) skewX(0) translateY(0) translateZ(0);
-  
-/* User requested overrides */
-  margin: 0;
-  padding: 0;
-  /* flex-direction: row-reverse; - Reverted */
+
+  margin: 5px 0;
+  padding: 5px 0;
 }
 
 .actions.actionsVisible > * {

package/dist/ui/Compose/hooks/menu/Item.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { BaseItemProps } from '../../../../types.js';
+import type { BaseItemProps } from './types.js';
 export declare const Item: React.FC<BaseItemProps>;
 export declare const createMenuItem: (IconComponent: React.ComponentType<{
     size?: number;

package/dist/ui/Compose/hooks/menu/Item.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '@payloadcms/ui';
 import React, { memo } from 'react';
 import { ArrowIcon } from '../../../Icons/Icons.js';
 import styles from './menu.module.scss';
@@ -11,7 +12,9 @@ export const Item = /*#__PURE__*/ memo(({ children, disabled, isActive, onClick,
         ...rest,
         children: children
     }));
-export const createMenuItem = (IconComponent, initialText)=>/*#__PURE__*/ memo(({ children, disabled, hideIcon, isMenu, onClick, ...rest })=>/*#__PURE__*/ _jsxs(Item, {
+export const createMenuItem = (IconComponent, initialText)=>/*#__PURE__*/ memo(({ children, disabled, hideIcon, isMenu, onClick, ...rest })=>{
+        const { t } = useTranslation();
+        return /*#__PURE__*/ _jsxs(Item, {
             disabled: disabled,
             onClick: onClick,
             ...rest,
@@ -21,12 +24,13 @@ export const createMenuItem = (IconComponent, initialText)=>/*#__PURE__*/ memo((
                 }),
                 children || /*#__PURE__*/ _jsx("span", {
                     className: styles.text,
-                    children: initialText
+                    children: t(`ai-plugin:actions:${initialText.toLowerCase()}`)
                 }),
                 isMenu && /*#__PURE__*/ _jsx(ArrowIcon, {
                     size: 18
                 })
             ]
-        }));
+        });
+    });
 
 //# sourceMappingURL=Item.js.map

package/dist/ui/Compose/hooks/menu/Item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/Item.tsx"],"sourcesContent":["import React, { memo } from 'react'\n\nimport type { BaseItemProps } from '../../../../types.js'\n\nimport { ArrowIcon } from '../../../Icons/Icons.js'\nimport styles from './menu.module.scss'\n\nexport const Item: React.FC<BaseItemProps> = memo(\n  ({ children, disabled, isActive, onClick, ...rest }) => (\n    <span\n      className={styles.generate_button + ' ' + (isActive ? styles.active : '')}\n      data-disabled={disabled}\n      onClick={\n        !disabled && typeof onClick === 'function'\n          ? (onClick as React.MouseEventHandler<HTMLSpanElement>)\n          : undefined\n      }\n      onKeyDown={\n        !disabled && typeof onClick === 'function'\n          ? (onClick as React.KeyboardEventHandler<HTMLSpanElement>)\n          : undefined\n      }\n      role=\"presentation\"\n      {...rest}\n    >\n      {children}\n    </span>\n  ),\n)\n\nexport const createMenuItem = (\n  IconComponent: React.ComponentType<{ size?: number }>,\n  initialText: string,\n) =>\n  memo(({ children, disabled, hideIcon, isMenu, onClick, ...rest }: BaseItemProps) => (\n    <Item disabled={disabled} onClick={onClick} {...rest}>\n      {hideIcon || <IconComponent size={18} />}\n      {children || <span className={styles.text}>{initialText}</span>}\n      {isMenu && <ArrowIcon size={18} />}\n    </Item>\n  ))\n"],"names":["React","memo","ArrowIcon","styles","Item","children","disabled","isActive","onClick","rest","span","className","generate_button","active","data-disabled","undefined","onKeyDown","role","createMenuItem","IconComponent","initialText","hideIcon","isMenu","size","text"],"mappings":";AAAA,OAAOA,SAASC,IAAI,QAAQ,QAAO;AAInC,SAASC,SAAS,QAAQ,0BAAyB;AACnD,OAAOC,YAAY,qBAAoB;AAEvC,OAAO,MAAMC,qBAAgCH,KAC3C,CAAC,EAAEI,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,MAAM,iBACjD,KAACC;QACCC,WAAWR,OAAOS,eAAe,GAAG,MAAOL,CAAAA,WAAWJ,OAAOU,MAAM,GAAG,EAAC;QACvEC,iBAAeR;QACfE,SACE,CAACF,YAAY,OAAOE,YAAY,aAC3BA,UACDO;QAENC,WACE,CAACV,YAAY,OAAOE,YAAY,aAC3BA,UACDO;QAENE,MAAK;QACJ,GAAGR,IAAI;kBAEPJ;QAGN;AAED,OAAO,MAAMa,iBAAiB,CAC5BC,eACAC,4BAEAnB,KAAK,CAAC,EAAEI,QAAQ,EAAEC,QAAQ,EAAEe,QAAQ,EAAEC,MAAM,EAAEd,OAAO,EAAE,GAAGC,MAAqB,iBAC7E,MAACL;YAAKE,UAAUA;YAAUE,SAASA;YAAU,GAAGC,IAAI;;gBACjDY,0BAAY,KAACF;oBAAcI,MAAM;;gBACjClB,0BAAY,KAACK;oBAAKC,WAAWR,OAAOqB,IAAI;8BAAGJ;;gBAC3CE,wBAAU,KAACpB;oBAAUqB,MAAM;;;YAE9B"}
+{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/Item.tsx"],"sourcesContent":["import { useTranslation } from '@payloadcms/ui'\nimport React, { memo } from 'react'\n\nimport type { PluginAITranslationKeys, PluginAITranslations } from '../../../../translations/index.js'\nimport type { BaseItemProps } from './types.js'\n\nimport { ArrowIcon } from '../../../Icons/Icons.js'\nimport styles from './menu.module.scss'\n\nexport const Item: React.FC<BaseItemProps> = memo(\n  ({ children, disabled, isActive, onClick, ...rest }) => (\n    <span\n      className={styles.generate_button + ' ' + (isActive ? styles.active : '')}\n      data-disabled={disabled}\n      onClick={\n        !disabled && typeof onClick === 'function'\n          ? (onClick as React.MouseEventHandler<HTMLSpanElement>)\n          : undefined\n      }\n      onKeyDown={\n        !disabled && typeof onClick === 'function'\n          ? (onClick as React.KeyboardEventHandler<HTMLSpanElement>)\n          : undefined\n      }\n      role=\"presentation\"\n      {...rest}\n    >\n      {children}\n    </span>\n  ),\n)\n\nexport const createMenuItem = (\n  IconComponent: React.ComponentType<{ size?: number }>,\n  initialText: string,\n) =>\n  memo(({ children, disabled, hideIcon, isMenu, onClick, ...rest }: BaseItemProps) => {\n    const { t } = useTranslation<PluginAITranslations, PluginAITranslationKeys>()\n    return (\n      <Item disabled={disabled} onClick={onClick} {...rest}>\n        {hideIcon || <IconComponent size={18} />}\n        {children || (\n          <span className={styles.text}>\n            {t(`ai-plugin:actions:${initialText.toLowerCase()}` as any)}\n          </span>\n        )}\n        {isMenu && <ArrowIcon size={18} />}\n      </Item>\n    )\n  })\n"],"names":["useTranslation","React","memo","ArrowIcon","styles","Item","children","disabled","isActive","onClick","rest","span","className","generate_button","active","data-disabled","undefined","onKeyDown","role","createMenuItem","IconComponent","initialText","hideIcon","isMenu","t","size","text","toLowerCase"],"mappings":";AAAA,SAASA,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,SAASC,IAAI,QAAQ,QAAO;AAKnC,SAASC,SAAS,QAAQ,0BAAyB;AACnD,OAAOC,YAAY,qBAAoB;AAEvC,OAAO,MAAMC,qBAAgCH,KAC3C,CAAC,EAAEI,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,MAAM,iBACjD,KAACC;QACCC,WAAWR,OAAOS,eAAe,GAAG,MAAOL,CAAAA,WAAWJ,OAAOU,MAAM,GAAG,EAAC;QACvEC,iBAAeR;QACfE,SACE,CAACF,YAAY,OAAOE,YAAY,aAC3BA,UACDO;QAENC,WACE,CAACV,YAAY,OAAOE,YAAY,aAC3BA,UACDO;QAENE,MAAK;QACJ,GAAGR,IAAI;kBAEPJ;QAGN;AAED,OAAO,MAAMa,iBAAiB,CAC5BC,eACAC,4BAEAnB,KAAK,CAAC,EAAEI,QAAQ,EAAEC,QAAQ,EAAEe,QAAQ,EAAEC,MAAM,EAAEd,OAAO,EAAE,GAAGC,MAAqB;QAC7E,MAAM,EAAEc,CAAC,EAAE,GAAGxB;QACd,qBACE,MAACK;YAAKE,UAAUA;YAAUE,SAASA;YAAU,GAAGC,IAAI;;gBACjDY,0BAAY,KAACF;oBAAcK,MAAM;;gBACjCnB,0BACC,KAACK;oBAAKC,WAAWR,OAAOsB,IAAI;8BACzBF,EAAE,CAAC,kBAAkB,EAAEH,YAAYM,WAAW,GAAG,CAAC;;gBAGtDJ,wBAAU,KAACpB;oBAAUsB,MAAM;;;;IAGlC,GAAE"}

package/dist/ui/Compose/hooks/menu/Item.jsx

@@ -1,3 +1,4 @@
+import { useTranslation } from '@payloadcms/ui';
 import React, { memo } from 'react';
 import { ArrowIcon } from '../../../Icons/Icons.js';
 import styles from './menu.module.scss';
@@ -8,8 +9,13 @@ export const Item = memo(({ children, disabled, isActive, onClick, ...rest }) =>
         : undefined} role="presentation" {...rest}>
       {children}
     </span>));
-export const createMenuItem = (IconComponent, initialText) => memo(({ children, disabled, hideIcon, isMenu, onClick, ...rest }) => (<Item disabled={disabled} onClick={onClick} {...rest}>
-      {hideIcon || <IconComponent size={18}/>}
-      {children || <span className={styles.text}>{initialText}</span>}
-      {isMenu && <ArrowIcon size={18}/>}
-    </Item>));
+export const createMenuItem = (IconComponent, initialText) => memo(({ children, disabled, hideIcon, isMenu, onClick, ...rest }) => {
+    const { t } = useTranslation();
+    return (<Item disabled={disabled} onClick={onClick} {...rest}>
+        {hideIcon || <IconComponent size={18}/>}
+        {children || (<span className={styles.text}>
+            {t(`ai-plugin:actions:${initialText.toLowerCase()}`)}
+          </span>)}
+        {isMenu && <ArrowIcon size={18}/>}
+      </Item>);
+});

package/dist/ui/Compose/hooks/menu/TranslateMenu.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '@payloadcms/ui';
 import locales from 'locale-codes';
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { useInstructions } from '../../../../providers/InstructionsProvider/useInstructions.js';
@@ -6,6 +7,7 @@ import { Item } from './Item.js';
 import { Translate } from './items.js';
 import styles from './menu.module.scss';
 export const TranslateMenu = ({ onClick })=>{
+    const { t } = useTranslation();
     const [show, setShow] = useState(false);
     const closeTimeoutRef = useRef(null);
     const { enabledLanguages = [] } = useInstructions();
@@ -40,21 +42,29 @@ export const TranslateMenu = ({ onClick })=>{
         onBlur: (e)=>{
             // Only clear if focus moves outside the menu container
             if (!e.currentTarget.contains(e.relatedTarget)) {
-                if (typeof window !== 'undefined') window.__AI_MENU_INTERACTIVE = false;
+                if (typeof window !== 'undefined') {
+                    window.__AI_MENU_INTERACTIVE = false;
+                }
             }
         },
         onFocus: ()=>{
-            if (typeof window !== 'undefined') window.__AI_MENU_INTERACTIVE = true;
+            if (typeof window !== 'undefined') {
+                window.__AI_MENU_INTERACTIVE = true;
+            }
         },
         onMouseEnter: ()=>{
             if (closeTimeoutRef.current) {
                 clearTimeout(closeTimeoutRef.current);
                 closeTimeoutRef.current = null;
             }
-            if (typeof window !== 'undefined') window.__AI_MENU_INTERACTIVE = true;
+            if (typeof window !== 'undefined') {
+                window.__AI_MENU_INTERACTIVE = true;
+            }
         },
         onMouseLeave: ()=>{
-            if (typeof window !== 'undefined') window.__AI_MENU_INTERACTIVE = false;
+            if (typeof window !== 'undefined') {
+                window.__AI_MENU_INTERACTIVE = false;
+            }
             if (!inputFocus) {
                 closeTimeoutRef.current = setTimeout(()=>{
                     setShow(false);
@@ -98,7 +108,7 @@ export const TranslateMenu = ({ onClick })=>{
                                     }));
                                 },
                                 onFocus: ()=>setInputFocus(true),
-                                placeholder: "Search..."
+                                placeholder: t('ai-plugin:general:search')
                             })
                         }),
                         languages.map((locale)=>{

package/dist/ui/Compose/hooks/menu/TranslateMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/TranslateMenu.tsx"],"sourcesContent":["import locales from 'locale-codes'\nimport React, { memo, useEffect, useRef, useState } from 'react'\n\nimport { useInstructions } from '../../../../providers/InstructionsProvider/useInstructions.js'\nimport { Item } from './Item.js'\nimport { Translate } from './items.js'\nimport styles from './menu.module.scss'\n\ndeclare global {\n  interface Window {\n    __AI_MENU_INTERACTIVE?: boolean\n  }\n}\n\nexport const TranslateMenu = ({ onClick }: { onClick: (data: { locale: string }) => void }) => {\n  const [show, setShow] = useState(false)\n  const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  const { enabledLanguages = [] } = useInstructions()\n\n  let filteredLocales = locales.all.filter((a) => {\n    return a.tag && a.location\n  })\n\n  if (enabledLanguages?.length) {\n    filteredLocales = filteredLocales.filter((a) => enabledLanguages?.includes(a.tag))\n  }\n\n  const [languages, setLanguages] = useState(filteredLocales)\n  const [inputFocus, setInputFocus] = useState(false)\n\n  useEffect(() => {\n    if (!show) {\n      if (typeof window !== 'undefined') {\n        window.__AI_MENU_INTERACTIVE = false\n      }\n    }\n    return () => {\n      if (closeTimeoutRef.current) {\n        clearTimeout(closeTimeoutRef.current)\n      }\n      if (show && typeof window !== 'undefined') {\n        window.__AI_MENU_INTERACTIVE = false\n      }\n    }\n  }, [show])\n\n  return (\n    <div\n      className={`${styles.menu} ai-interactive-menu`}\n      data-ai-interactive=\"true\"\n      onBlur={(e) => {\n        // Only clear if focus moves outside the menu container\n        if (!e.currentTarget.contains(e.relatedTarget as Node)) {\n          if (typeof window !== 'undefined') window.__AI_MENU_INTERACTIVE = false\n        }\n      }}\n      onFocus={() => {\n        if (typeof window !== 'undefined') window.__AI_MENU_INTERACTIVE = true\n      }}\n      onMouseEnter={() => {\n        if (closeTimeoutRef.current) {\n          clearTimeout(closeTimeoutRef.current)\n          closeTimeoutRef.current = null\n        }\n        if (typeof window !== 'undefined') window.__AI_MENU_INTERACTIVE = true\n      }}\n      onMouseLeave={() => {\n        if (typeof window !== 'undefined') window.__AI_MENU_INTERACTIVE = false\n        if (!inputFocus) {\n          closeTimeoutRef.current = setTimeout(() => {\n            setShow(false)\n          }, 400)\n        }\n      }}\n    >\n      <Translate\n        isActive={show}\n        isMenu\n        onClick={() => {\n          setShow(!show)\n        }}\n      />\n      <div className={styles.hoverMenu} data-show={show}>\n        <div\n          className={`${styles.menu} ${styles.subMenu}`}\n          style={{\n            background: 'var(--popup-bg)',\n            // minHeight: '300px',\n          }}\n        >\n          <Item\n            onClick={() => {}}\n            style={{\n              background: 'transparent',\n              padding: '0 0 5px 0',\n              position: 'sticky',\n              top: 0,\n            }}\n          >\n            <input\n              className={`${styles.menuInput} ai-interactive-menu`}\n              data-ai-interactive=\"true\"\n              onBlur={() => setInputFocus(false)}\n              onChange={(event) => {\n                const value = event.target.value\n                setLanguages(\n                  filteredLocales.filter((l) => {\n                    const lowerCaseValue = value.toLowerCase()\n                    return (\n                      l.name.toLowerCase().startsWith(lowerCaseValue) ||\n                      (l.location && l.location.toLowerCase().startsWith(lowerCaseValue)) ||\n                      l.tag.toLowerCase().startsWith(lowerCaseValue)\n                    )\n                  }),\n                )\n              }}\n              onFocus={() => setInputFocus(true)}\n              placeholder=\"Search...\"\n            />\n          </Item>\n          {languages.map((locale) => {\n            return (\n              <Item\n                className=\"ai-interactive-menu\"\n                data-ai-interactive=\"true\"\n                key={locale.tag}\n                onClick={() => {\n                  onClick({ locale: locale.tag })\n                }}\n              >\n                <span className={styles.ellipsis}>{`${locale.location} (${locale.tag})`}</span>\n              </Item>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const MemoizedTranslateMenu = memo(TranslateMenu)\n"],"names":["locales","React","memo","useEffect","useRef","useState","useInstructions","Item","Translate","styles","TranslateMenu","onClick","show","setShow","closeTimeoutRef","enabledLanguages","filteredLocales","all","filter","a","tag","location","length","includes","languages","setLanguages","inputFocus","setInputFocus","window","__AI_MENU_INTERACTIVE","current","clearTimeout","div","className","menu","data-ai-interactive","onBlur","e","currentTarget","contains","relatedTarget","onFocus","onMouseEnter","onMouseLeave","setTimeout","isActive","isMenu","hoverMenu","data-show","subMenu","style","background","padding","position","top","input","menuInput","onChange","event","value","target","l","lowerCaseValue","toLowerCase","name","startsWith","placeholder","map","locale","span","ellipsis","MemoizedTranslateMenu"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/TranslateMenu.tsx"],"sourcesContent":["import { useTranslation } from '@payloadcms/ui'\nimport locales from 'locale-codes'\nimport React, { memo, useEffect, useRef, useState } from 'react'\n\nimport type { PluginAITranslationKeys, PluginAITranslations } from '../../../../translations/index.js'\n\nimport { useInstructions } from '../../../../providers/InstructionsProvider/useInstructions.js'\nimport { Item } from './Item.js'\nimport { Translate } from './items.js'\nimport styles from './menu.module.scss'\n\ndeclare global {\n  interface Window {\n    __AI_MENU_INTERACTIVE?: boolean\n  }\n}\n\nexport const TranslateMenu = ({ onClick }: { onClick: (data: { locale: string }) => void }) => {\n  const { t } = useTranslation<PluginAITranslations, PluginAITranslationKeys>()\n  const [show, setShow] = useState(false)\n  const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  const { enabledLanguages = [] } = useInstructions()\n\n  let filteredLocales = locales.all.filter((a) => {\n    return a.tag && a.location\n  })\n\n  if (enabledLanguages?.length) {\n    filteredLocales = filteredLocales.filter((a) => enabledLanguages?.includes(a.tag))\n  }\n\n  const [languages, setLanguages] = useState(filteredLocales)\n  const [inputFocus, setInputFocus] = useState(false)\n\n  useEffect(() => {\n    if (!show) {\n      if (typeof window !== 'undefined') {\n        window.__AI_MENU_INTERACTIVE = false\n      }\n    }\n    return () => {\n      if (closeTimeoutRef.current) {\n        clearTimeout(closeTimeoutRef.current)\n      }\n      if (show && typeof window !== 'undefined') {\n        window.__AI_MENU_INTERACTIVE = false\n      }\n    }\n  }, [show])\n\n  return (\n    <div\n      className={`${styles.menu} ai-interactive-menu`}\n      data-ai-interactive=\"true\"\n      onBlur={(e) => {\n        // Only clear if focus moves outside the menu container\n        if (!e.currentTarget.contains(e.relatedTarget as Node)) {\n          if (typeof window !== 'undefined') {window.__AI_MENU_INTERACTIVE = false}\n        }\n      }}\n      onFocus={() => {\n        if (typeof window !== 'undefined') {window.__AI_MENU_INTERACTIVE = true}\n      }}\n      onMouseEnter={() => {\n        if (closeTimeoutRef.current) {\n          clearTimeout(closeTimeoutRef.current)\n          closeTimeoutRef.current = null\n        }\n        if (typeof window !== 'undefined') {window.__AI_MENU_INTERACTIVE = true}\n      }}\n      onMouseLeave={() => {\n        if (typeof window !== 'undefined') {window.__AI_MENU_INTERACTIVE = false}\n        if (!inputFocus) {\n          closeTimeoutRef.current = setTimeout(() => {\n            setShow(false)\n          }, 400)\n        }\n      }}\n    >\n      <Translate\n        isActive={show}\n        isMenu\n        onClick={() => {\n          setShow(!show)\n        }}\n      />\n      <div className={styles.hoverMenu} data-show={show}>\n        <div\n          className={`${styles.menu} ${styles.subMenu}`}\n          style={{\n            background: 'var(--popup-bg)',\n            // minHeight: '300px',\n          }}\n        >\n          <Item\n            onClick={() => {}}\n            style={{\n              background: 'transparent',\n              padding: '0 0 5px 0',\n              position: 'sticky',\n              top: 0,\n            }}\n          >\n            <input\n              className={`${styles.menuInput} ai-interactive-menu`}\n              data-ai-interactive=\"true\"\n              onBlur={() => setInputFocus(false)}\n              onChange={(event) => {\n                const value = event.target.value\n                setLanguages(\n                  filteredLocales.filter((l) => {\n                    const lowerCaseValue = value.toLowerCase()\n                    return (\n                      l.name.toLowerCase().startsWith(lowerCaseValue) ||\n                      (l.location && l.location.toLowerCase().startsWith(lowerCaseValue)) ||\n                      l.tag.toLowerCase().startsWith(lowerCaseValue)\n                    )\n                  }),\n                )\n              }}\n              onFocus={() => setInputFocus(true)}\n              placeholder={t('ai-plugin:general:search')}\n            />\n          </Item>\n          {languages.map((locale) => {\n            return (\n              <Item\n                className=\"ai-interactive-menu\"\n                data-ai-interactive=\"true\"\n                key={locale.tag}\n                onClick={() => {\n                  onClick({ locale: locale.tag })\n                }}\n              >\n                <span className={styles.ellipsis}>{`${locale.location} (${locale.tag})`}</span>\n              </Item>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const MemoizedTranslateMenu = memo(TranslateMenu)\n"],"names":["useTranslation","locales","React","memo","useEffect","useRef","useState","useInstructions","Item","Translate","styles","TranslateMenu","onClick","t","show","setShow","closeTimeoutRef","enabledLanguages","filteredLocales","all","filter","a","tag","location","length","includes","languages","setLanguages","inputFocus","setInputFocus","window","__AI_MENU_INTERACTIVE","current","clearTimeout","div","className","menu","data-ai-interactive","onBlur","e","currentTarget","contains","relatedTarget","onFocus","onMouseEnter","onMouseLeave","setTimeout","isActive","isMenu","hoverMenu","data-show","subMenu","style","background","padding","position","top","input","menuInput","onChange","event","value","target","l","lowerCaseValue","toLowerCase","name","startsWith","placeholder","map","locale","span","ellipsis","MemoizedTranslateMenu"],"mappings":"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"}

package/dist/ui/Compose/hooks/menu/TranslateMenu.jsx

@@ -1,3 +1,4 @@
+import { useTranslation } from '@payloadcms/ui';
 import locales from 'locale-codes';
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { useInstructions } from '../../../../providers/InstructionsProvider/useInstructions.js';
@@ -5,6 +6,7 @@ import { Item } from './Item.js';
 import { Translate } from './items.js';
 import styles from './menu.module.scss';
 export const TranslateMenu = ({ onClick }) => {
+    const { t } = useTranslation();
     const [show, setShow] = useState(false);
     const closeTimeoutRef = useRef(null);
     const { enabledLanguages = [] } = useInstructions();
@@ -34,22 +36,26 @@ export const TranslateMenu = ({ onClick }) => {
     return (<div className={`${styles.menu} ai-interactive-menu`} data-ai-interactive="true" onBlur={(e) => {
             // Only clear if focus moves outside the menu container
             if (!e.currentTarget.contains(e.relatedTarget)) {
-                if (typeof window !== 'undefined')
+                if (typeof window !== 'undefined') {
                     window.__AI_MENU_INTERACTIVE = false;
+                }
             }
         }} onFocus={() => {
-            if (typeof window !== 'undefined')
+            if (typeof window !== 'undefined') {
                 window.__AI_MENU_INTERACTIVE = true;
+            }
         }} onMouseEnter={() => {
             if (closeTimeoutRef.current) {
                 clearTimeout(closeTimeoutRef.current);
                 closeTimeoutRef.current = null;
             }
-            if (typeof window !== 'undefined')
+            if (typeof window !== 'undefined') {
                 window.__AI_MENU_INTERACTIVE = true;
+            }
         }} onMouseLeave={() => {
-            if (typeof window !== 'undefined')
+            if (typeof window !== 'undefined') {
                 window.__AI_MENU_INTERACTIVE = false;
+            }
             if (!inputFocus) {
                 closeTimeoutRef.current = setTimeout(() => {
                     setShow(false);
@@ -78,7 +84,7 @@ export const TranslateMenu = ({ onClick }) => {
                     (l.location && l.location.toLowerCase().startsWith(lowerCaseValue)) ||
                     l.tag.toLowerCase().startsWith(lowerCaseValue));
             }));
-        }} onFocus={() => setInputFocus(true)} placeholder="Search..."/>
+        }} onFocus={() => setInputFocus(true)} placeholder={t('ai-plugin:general:search')}/>
           </Item>
           {languages.map((locale) => {
             return (<Item className="ai-interactive-menu" data-ai-interactive="true" key={locale.tag} onClick={() => {

package/dist/ui/Compose/hooks/menu/items.d.ts

@@ -1,8 +1,8 @@
-export declare const Proofread: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("../../../../types.js").BaseItemProps) => import("react").JSX.Element>;
-export declare const Rephrase: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("../../../../types.js").BaseItemProps) => import("react").JSX.Element>;
-export declare const Translate: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("../../../../types.js").BaseItemProps) => import("react").JSX.Element>;
-export declare const Expand: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("../../../../types.js").BaseItemProps) => import("react").JSX.Element>;
-export declare const Summarize: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("../../../../types.js").BaseItemProps) => import("react").JSX.Element>;
-export declare const Simplify: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("../../../../types.js").BaseItemProps) => import("react").JSX.Element>;
-export declare const Compose: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("../../../../types.js").BaseItemProps) => import("react").JSX.Element>;
-export declare const Settings: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("../../../../types.js").BaseItemProps) => import("react").JSX.Element>;
+export declare const Proofread: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("./types.js").BaseItemProps) => import("react").JSX.Element>;
+export declare const Rephrase: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("./types.js").BaseItemProps) => import("react").JSX.Element>;
+export declare const Translate: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("./types.js").BaseItemProps) => import("react").JSX.Element>;
+export declare const Expand: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("./types.js").BaseItemProps) => import("react").JSX.Element>;
+export declare const Summarize: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("./types.js").BaseItemProps) => import("react").JSX.Element>;
+export declare const Simplify: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("./types.js").BaseItemProps) => import("react").JSX.Element>;
+export declare const Compose: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("./types.js").BaseItemProps) => import("react").JSX.Element>;
+export declare const Settings: import("react").MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: import("./types.js").BaseItemProps) => import("react").JSX.Element>;

package/dist/ui/Compose/hooks/menu/itemsMap.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
-import type { ActionMenuItems, BaseItemProps } from '../../../../types.js';
+import type { ActionMenuItems } from '../../../../types.js';
+import type { BaseItemProps } from './types.js';
 type MenuItemsMapType = {
     component: React.FC<BaseItemProps>;
     excludedFor?: string[];

package/dist/ui/Compose/hooks/menu/itemsMap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/itemsMap.ts"],"sourcesContent":["import type React from 'react'\n\nimport type { ActionMenuItems, BaseItemProps } from '../../../../types.js'\n\nimport { Compose, Expand, Proofread, Rephrase, Settings, Simplify, Summarize } from './items.js'\nimport { MemoizedTranslateMenu, TranslateMenu } from './TranslateMenu.js'\n\ntype MenuItemsMapType = {\n  component: React.FC<BaseItemProps>\n  excludedFor?: string[]\n  loadingText?: string\n  name: ActionMenuItems\n}\n\nexport const menuItemsMap: MenuItemsMapType[] = [\n  { name: 'Proofread', component: Proofread, excludedFor: ['upload', 'array'], loadingText: 'Proofreading' },\n  { name: 'Rephrase', component: Rephrase, excludedFor: ['upload', 'array'], loadingText: 'Rephrasing' },\n  {\n    name: 'Translate',\n    component: MemoizedTranslateMenu,\n    excludedFor: ['upload', 'array'],\n    loadingText: 'Translating',\n  },\n  { name: 'Expand', component: Expand, excludedFor: ['upload', 'text', 'array'], loadingText: 'Expanding' },\n  {\n    // Turned off - WIP\n    name: 'Summarize',\n    component: Summarize,\n    excludedFor: ['upload', 'text', 'richText', 'array'],\n    loadingText: 'Summarizing',\n  },\n  { name: 'Simplify', component: Simplify, excludedFor: ['upload', 'array'], loadingText: 'Simplifying' },\n  { name: 'Compose', component: Compose, loadingText: 'Composing' },\n  { name: 'Settings', component: Settings },\n]\n"],"names":["Compose","Expand","Proofread","Rephrase","Settings","Simplify","Summarize","MemoizedTranslateMenu","menuItemsMap","name","component","excludedFor","loadingText"],"mappings":"AAIA,SAASA,OAAO,EAAEC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,aAAY;AAChG,SAASC,qBAAqB,QAAuB,qBAAoB;AASzE,OAAO,MAAMC,eAAmC;IAC9C;QAAEC,MAAM;QAAaC,WAAWR;QAAWS,aAAa;YAAC;YAAU;SAAQ;QAAEC,aAAa;IAAe;IACzG;QAAEH,MAAM;QAAYC,WAAWP;QAAUQ,aAAa;YAAC;YAAU;SAAQ;QAAEC,aAAa;IAAa;IACrG;QACEH,MAAM;QACNC,WAAWH;QACXI,aAAa;YAAC;YAAU;SAAQ;QAChCC,aAAa;IACf;IACA;QAAEH,MAAM;QAAUC,WAAWT;QAAQU,aAAa;YAAC;YAAU;YAAQ;SAAQ;QAAEC,aAAa;IAAY;IACxG;QACE,mBAAmB;QACnBH,MAAM;QACNC,WAAWJ;QACXK,aAAa;YAAC;YAAU;YAAQ;YAAY;SAAQ;QACpDC,aAAa;IACf;IACA;QAAEH,MAAM;QAAYC,WAAWL;QAAUM,aAAa;YAAC;YAAU;SAAQ;QAAEC,aAAa;IAAc;IACtG;QAAEH,MAAM;QAAWC,WAAWV;QAASY,aAAa;IAAY;IAChE;QAAEH,MAAM;QAAYC,WAAWN;IAAS;CACzC,CAAA"}
+{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/itemsMap.ts"],"sourcesContent":["import type React from 'react'\n\nimport type { ActionMenuItems } from '../../../../types.js'\nimport type { BaseItemProps } from './types.js'\n\nimport { Compose, Expand, Proofread, Rephrase, Settings, Simplify, Summarize } from './items.js'\nimport { MemoizedTranslateMenu, TranslateMenu } from './TranslateMenu.js'\n\ntype MenuItemsMapType = {\n  component: React.FC<BaseItemProps>\n  excludedFor?: string[]\n  loadingText?: string\n  name: ActionMenuItems\n}\n\nexport const menuItemsMap: MenuItemsMapType[] = [\n  { name: 'Proofread', component: Proofread, excludedFor: ['upload', 'array'], loadingText: 'Proofreading' },\n  { name: 'Rephrase', component: Rephrase, excludedFor: ['upload', 'array'], loadingText: 'Rephrasing' },\n  {\n    name: 'Translate',\n    component: MemoizedTranslateMenu,\n    excludedFor: ['upload', 'array'],\n    loadingText: 'Translating',\n  },\n  { name: 'Expand', component: Expand, excludedFor: ['upload', 'text', 'array'], loadingText: 'Expanding' },\n  {\n    // Turned off - WIP\n    name: 'Summarize',\n    component: Summarize,\n    excludedFor: ['upload', 'text', 'richText', 'array'],\n    loadingText: 'Summarizing',\n  },\n  { name: 'Simplify', component: Simplify, excludedFor: ['upload', 'array'], loadingText: 'Simplifying' },\n  { name: 'Compose', component: Compose, loadingText: 'Composing' },\n  { name: 'Settings', component: Settings },\n]\n"],"names":["Compose","Expand","Proofread","Rephrase","Settings","Simplify","Summarize","MemoizedTranslateMenu","menuItemsMap","name","component","excludedFor","loadingText"],"mappings":"AAKA,SAASA,OAAO,EAAEC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,aAAY;AAChG,SAASC,qBAAqB,QAAuB,qBAAoB;AASzE,OAAO,MAAMC,eAAmC;IAC9C;QAAEC,MAAM;QAAaC,WAAWR;QAAWS,aAAa;YAAC;YAAU;SAAQ;QAAEC,aAAa;IAAe;IACzG;QAAEH,MAAM;QAAYC,WAAWP;QAAUQ,aAAa;YAAC;YAAU;SAAQ;QAAEC,aAAa;IAAa;IACrG;QACEH,MAAM;QACNC,WAAWH;QACXI,aAAa;YAAC;YAAU;SAAQ;QAChCC,aAAa;IACf;IACA;QAAEH,MAAM;QAAUC,WAAWT;QAAQU,aAAa;YAAC;YAAU;YAAQ;SAAQ;QAAEC,aAAa;IAAY;IACxG;QACE,mBAAmB;QACnBH,MAAM;QACNC,WAAWJ;QACXK,aAAa;YAAC;YAAU;YAAQ;YAAY;SAAQ;QACpDC,aAAa;IACf;IACA;QAAEH,MAAM;QAAYC,WAAWL;QAAUM,aAAa;YAAC;YAAU;SAAQ;QAAEC,aAAa;IAAc;IACtG;QAAEH,MAAM;QAAWC,WAAWV;QAASY,aAAa;IAAY;IAChE;QAAEH,MAAM;QAAYC,WAAWN;IAAS;CACzC,CAAA"}

package/dist/ui/Compose/hooks/menu/types.d.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties, MouseEventHandler } from 'react';
+export type ActionMenuEvents = 'onCompose' | 'onExpand' | 'onProofread' | 'onRephrase' | 'onSettings' | 'onSimplify' | 'onSummarize' | 'onTone' | 'onTranslate';
+export type UseMenuEvents = {
+    [key in ActionMenuEvents]?: (data?: unknown) => void;
+};
+export type UseMenuOptions = {
+    isConfigAllowed: boolean;
+};
+export type BaseItemProps<T = unknown> = {
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    hideIcon?: boolean;
+    isActive?: boolean;
+    isMenu?: boolean;
+    onClick: (data?: unknown) => void;
+    onMouseEnter?: MouseEventHandler<T> | undefined;
+    onMouseLeave?: MouseEventHandler<T> | undefined;
+    style?: CSSProperties | undefined;
+    title?: string;
+};

package/dist/ui/Compose/hooks/menu/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/ui/Compose/hooks/menu/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/types.ts"],"sourcesContent":["import type { CSSProperties, MouseEventHandler } from 'react'\n\n\nexport type ActionMenuEvents =\n  | 'onCompose'\n  | 'onExpand'\n  | 'onProofread'\n  | 'onRephrase'\n  | 'onSettings'\n  | 'onSimplify'\n  | 'onSummarize'\n  | 'onTone'\n  | 'onTranslate'\n\nexport type UseMenuEvents = {\n  [key in ActionMenuEvents]?: (data?: unknown) => void\n}\n\nexport type UseMenuOptions = {\n  isConfigAllowed: boolean\n}\n\nexport type BaseItemProps<T = unknown> = {\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  hideIcon?: boolean\n  isActive?: boolean\n  isMenu?: boolean\n  onClick: (data?: unknown) => void\n  onMouseEnter?: MouseEventHandler<T> | undefined\n  onMouseLeave?: MouseEventHandler<T> | undefined\n  style?: CSSProperties | undefined\n  title?: string\n}\n"],"names":[],"mappings":"AAsBA,WAYC"}

package/dist/ui/Compose/hooks/menu/useMenu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { UseMenuEvents, UseMenuOptions } from '../../../../types.js';
+import type { UseMenuEvents, UseMenuOptions } from './types.js';
 export declare const useMenu: (menuEvents: UseMenuEvents, options: UseMenuOptions) => {
-    ActiveComponent: ({ isLoading, loadingLabel, stop }: {
+    ActiveComponent: ({ isLoading, loadingLabel, stop, }: {
         isLoading: boolean;
         loadingLabel?: string;
         stop: () => void;