@ai-stack/payloadcms 3.2.26 → 3.68.0-beta.2

package/dist/ui/Compose/ComposePlaceholder.jsx

@@ -0,0 +1,66 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import { Compose } from './Compose.js';
+/**
+ * Lightweight placeholder component that lazy-loads Compose when field becomes active.
+ * Uses MutationObserver to watch for .ai-plugin-active class added by useActiveFieldTracking.
+ */
+export const ComposePlaceholder = (props) => {
+    const [shouldMount, setShouldMount] = useState(false);
+    const containerRef = useRef(null);
+    const unmountTimerRef = useRef(null);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        // Find the parent .field-type container
+        const fieldContainer = container.closest('.field-type');
+        if (!fieldContainer) {
+            return;
+        }
+        // Watch for .ai-plugin-active class changes
+        const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    if (fieldContainer.classList.contains('ai-plugin-active')) {
+                        // Field is active - mount Compose and cancel any pending unmount
+                        if (unmountTimerRef.current) {
+                            clearTimeout(unmountTimerRef.current);
+                            unmountTimerRef.current = null;
+                        }
+                        setShouldMount(true);
+                    }
+                    else if (shouldMount) {
+                        // Field is inactive - schedule unmount after delay
+                        if (unmountTimerRef.current) {
+                            clearTimeout(unmountTimerRef.current);
+                        }
+                        unmountTimerRef.current = setTimeout(() => {
+                            setShouldMount(false);
+                            unmountTimerRef.current = null;
+                        }, 1200); // 500ms delay to prevent rapid remounting
+                    }
+                    break;
+                }
+            }
+        });
+        observer.observe(fieldContainer, {
+            attributeFilter: ['class'],
+            attributes: true,
+        });
+        // Check initial state in case field is already active
+        if (fieldContainer.classList.contains('ai-plugin-active')) {
+            setShouldMount(true);
+        }
+        return () => {
+            observer.disconnect();
+            if (unmountTimerRef.current) {
+                clearTimeout(unmountTimerRef.current);
+            }
+        };
+    }, [shouldMount]);
+    return (<div ref={containerRef} style={{ display: 'contents' }}>
+      {shouldMount ? <Compose {...props}/> : null}
+    </div>);
+};

package/dist/ui/Compose/UndoRedoActions.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-export declare const UndoRedoActions: ({ onChange }: {
+export declare const UndoRedoActions: React.MemoExoticComponent<({ onChange }: {
     onChange: (val: unknown) => void;
-}) => React.JSX.Element | null;
+}) => React.JSX.Element | null>;

package/dist/ui/Compose/UndoRedoActions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { useHistory } from './hooks/useHistory.js';
-export const UndoRedoActions = ({ onChange })=>{
+export const UndoRedoActions = /*#__PURE__*/ memo(({ onChange })=>{
     const { canRedo, canUndo, redo, undo } = useHistory();
     const redoHistoryValue = useCallback((event)=>{
         event.stopPropagation();
@@ -10,7 +10,8 @@ export const UndoRedoActions = ({ onChange })=>{
             onChange(value);
         }
     }, [
-        redo
+        redo,
+        onChange
     ]);
     const undoHistoryValue = useCallback((event)=>{
         event.stopPropagation();
@@ -19,14 +20,17 @@ export const UndoRedoActions = ({ onChange })=>{
             onChange(value);
         }
     }, [
-        undo
+        undo,
+        onChange
     ]);
     // Delay rendering until the client-side hydration is complete
     const [isMounted, setIsMounted] = useState(false);
     useEffect(()=>{
         setIsMounted(true);
     }, []);
-    if (!isMounted || !canUndo && !canRedo) return null;
+    if (!isMounted || !canUndo && !canRedo) {
+        return null;
+    }
     return /*#__PURE__*/ _jsxs(React.Fragment, {
         children: [
             /*#__PURE__*/ _jsx("button", {
@@ -51,6 +55,7 @@ export const UndoRedoActions = ({ onChange })=>{
             })
         ]
     });
-};
+});
+UndoRedoActions.displayName = 'UndoRedoActions';
 
 //# sourceMappingURL=UndoRedoActions.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/Compose/UndoRedoActions.tsx"],"sourcesContent":["import type { MouseEventHandler} from 'react';\n\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { useHistory } from './hooks/useHistory.js'\n\nexport const UndoRedoActions = ({ onChange }: { onChange: (val: unknown) => void }) => {\n  const { canRedo, canUndo, redo, undo } = useHistory()\n\n  const redoHistoryValue = useCallback<MouseEventHandler>(\n    (event) => {\n      event.stopPropagation()\n\n      const value = redo()\n      if (value) {\n        onChange(value)\n      }\n    },\n    [redo],\n  )\n\n  const undoHistoryValue = useCallback<MouseEventHandler>(\n    (event) => {\n      event.stopPropagation()\n\n      const value = undo()\n      if (value) {\n        onChange(value)\n      }\n    },\n    [undo],\n  )\n\n  // Delay rendering until the client-side hydration is complete\n  const [isMounted, setIsMounted] = useState(false)\n\n  useEffect(() => {\n    setIsMounted(true)\n  }, [])\n\n  if (!isMounted || (!canUndo && !canRedo)) return null\n\n  return (\n    <React.Fragment>\n      <button\n        className={`btn btn--size-small btn--style-secondary ${!canUndo && 'btn--disabled'}`}\n        disabled={!canUndo}\n        onClick={undoHistoryValue}\n        style={{ marginBlock: 0 }}\n        type=\"button\"\n      >\n        Undo\n      </button>\n      <button\n        className={`btn btn--size-small btn--style-secondary ${!canRedo && 'btn--disabled'}`}\n        disabled={!canRedo}\n        onClick={redoHistoryValue}\n        style={{ marginBlock: 0 }}\n        type=\"button\"\n      >\n        Redo\n      </button>\n    </React.Fragment>\n  )\n}\n"],"names":["React","useCallback","useEffect","useState","useHistory","UndoRedoActions","onChange","canRedo","canUndo","redo","undo","redoHistoryValue","event","stopPropagation","value","undoHistoryValue","isMounted","setIsMounted","Fragment","button","className","disabled","onClick","style","marginBlock","type"],"mappings":";AAEA,OAAOA,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAE/D,SAASC,UAAU,QAAQ,wBAAuB;AAElD,OAAO,MAAMC,kBAAkB,CAAC,EAAEC,QAAQ,EAAwC;IAChF,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGN;IAEzC,MAAMO,mBAAmBV,YACvB,CAACW;QACCA,MAAMC,eAAe;QAErB,MAAMC,QAAQL;QACd,IAAIK,OAAO;YACTR,SAASQ;QACX;IACF,GACA;QAACL;KAAK;IAGR,MAAMM,mBAAmBd,YACvB,CAACW;QACCA,MAAMC,eAAe;QAErB,MAAMC,QAAQJ;QACd,IAAII,OAAO;YACTR,SAASQ;QACX;IACF,GACA;QAACJ;KAAK;IAGR,8DAA8D;IAC9D,MAAM,CAACM,WAAWC,aAAa,GAAGd,SAAS;IAE3CD,UAAU;QACRe,aAAa;IACf,GAAG,EAAE;IAEL,IAAI,CAACD,aAAc,CAACR,WAAW,CAACD,SAAU,OAAO;IAEjD,qBACE,MAACP,MAAMkB,QAAQ;;0BACb,KAACC;gBACCC,WAAW,CAAC,yCAAyC,EAAE,CAACZ,WAAW,gBAAgB,CAAC;gBACpFa,UAAU,CAACb;gBACXc,SAASP;gBACTQ,OAAO;oBAAEC,aAAa;gBAAE;gBACxBC,MAAK;0BACN;;0BAGD,KAACN;gBACCC,WAAW,CAAC,yCAAyC,EAAE,CAACb,WAAW,gBAAgB,CAAC;gBACpFc,UAAU,CAACd;gBACXe,SAASX;gBACTY,OAAO;oBAAEC,aAAa;gBAAE;gBACxBC,MAAK;0BACN;;;;AAKP,EAAC"}
+{"version":3,"sources":["../../../src/ui/Compose/UndoRedoActions.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react'\n\nimport React, { memo, useCallback, useEffect, useState } from 'react'\n\nimport { useHistory } from './hooks/useHistory.js'\n\nexport const UndoRedoActions = memo(({ onChange }: { onChange: (val: unknown) => void }) => {\n  const { canRedo, canUndo, redo, undo } = useHistory()\n\n  const redoHistoryValue = useCallback<MouseEventHandler>(\n    (event) => {\n      event.stopPropagation()\n\n      const value = redo()\n      if (value) {\n        onChange(value)\n      }\n    },\n    [redo, onChange],\n  )\n\n  const undoHistoryValue = useCallback<MouseEventHandler>(\n    (event) => {\n      event.stopPropagation()\n\n      const value = undo()\n      if (value) {\n        onChange(value)\n      }\n    },\n    [undo, onChange],\n  )\n\n  // Delay rendering until the client-side hydration is complete\n  const [isMounted, setIsMounted] = useState(false)\n\n  useEffect(() => {\n    setIsMounted(true)\n  }, [])\n\n  if (!isMounted || (!canUndo && !canRedo)) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      <button\n        className={`btn btn--size-small btn--style-secondary ${!canUndo && 'btn--disabled'}`}\n        disabled={!canUndo}\n        onClick={undoHistoryValue}\n        style={{ marginBlock: 0 }}\n        type=\"button\"\n      >\n        Undo\n      </button>\n      <button\n        className={`btn btn--size-small btn--style-secondary ${!canRedo && 'btn--disabled'}`}\n        disabled={!canRedo}\n        onClick={redoHistoryValue}\n        style={{ marginBlock: 0 }}\n        type=\"button\"\n      >\n        Redo\n      </button>\n    </React.Fragment>\n  )\n})\n\nUndoRedoActions.displayName = 'UndoRedoActions'\n"],"names":["React","memo","useCallback","useEffect","useState","useHistory","UndoRedoActions","onChange","canRedo","canUndo","redo","undo","redoHistoryValue","event","stopPropagation","value","undoHistoryValue","isMounted","setIsMounted","Fragment","button","className","disabled","onClick","style","marginBlock","type","displayName"],"mappings":";AAEA,OAAOA,SAASC,IAAI,EAAEC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAErE,SAASC,UAAU,QAAQ,wBAAuB;AAElD,OAAO,MAAMC,gCAAkBL,KAAK,CAAC,EAAEM,QAAQ,EAAwC;IACrF,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGN;IAEzC,MAAMO,mBAAmBV,YACvB,CAACW;QACCA,MAAMC,eAAe;QAErB,MAAMC,QAAQL;QACd,IAAIK,OAAO;YACTR,SAASQ;QACX;IACF,GACA;QAACL;QAAMH;KAAS;IAGlB,MAAMS,mBAAmBd,YACvB,CAACW;QACCA,MAAMC,eAAe;QAErB,MAAMC,QAAQJ;QACd,IAAII,OAAO;YACTR,SAASQ;QACX;IACF,GACA;QAACJ;QAAMJ;KAAS;IAGlB,8DAA8D;IAC9D,MAAM,CAACU,WAAWC,aAAa,GAAGd,SAAS;IAE3CD,UAAU;QACRe,aAAa;IACf,GAAG,EAAE;IAEL,IAAI,CAACD,aAAc,CAACR,WAAW,CAACD,SAAU;QACxC,OAAO;IACT;IAEA,qBACE,MAACR,MAAMmB,QAAQ;;0BACb,KAACC;gBACCC,WAAW,CAAC,yCAAyC,EAAE,CAACZ,WAAW,gBAAgB,CAAC;gBACpFa,UAAU,CAACb;gBACXc,SAASP;gBACTQ,OAAO;oBAAEC,aAAa;gBAAE;gBACxBC,MAAK;0BACN;;0BAGD,KAACN;gBACCC,WAAW,CAAC,yCAAyC,EAAE,CAACb,WAAW,gBAAgB,CAAC;gBACpFc,UAAU,CAACd;gBACXe,SAASX;gBACTY,OAAO;oBAAEC,aAAa;gBAAE;gBACxBC,MAAK;0BACN;;;;AAKP,GAAE;AAEFpB,gBAAgBqB,WAAW,GAAG"}

package/dist/ui/Compose/UndoRedoActions.jsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { useHistory } from './hooks/useHistory.js';
-export const UndoRedoActions = ({ onChange }) => {
+export const UndoRedoActions = memo(({ onChange }) => {
     const { canRedo, canUndo, redo, undo } = useHistory();
     const redoHistoryValue = useCallback((event) => {
         event.stopPropagation();
@@ -8,21 +8,22 @@ export const UndoRedoActions = ({ onChange }) => {
         if (value) {
             onChange(value);
         }
-    }, [redo]);
+    }, [redo, onChange]);
     const undoHistoryValue = useCallback((event) => {
         event.stopPropagation();
         const value = undo();
         if (value) {
             onChange(value);
         }
-    }, [undo]);
+    }, [undo, onChange]);
     // Delay rendering until the client-side hydration is complete
     const [isMounted, setIsMounted] = useState(false);
     useEffect(() => {
         setIsMounted(true);
     }, []);
-    if (!isMounted || (!canUndo && !canRedo))
+    if (!isMounted || (!canUndo && !canRedo)) {
         return null;
+    }
     return (<React.Fragment>
       <button className={`btn btn--size-small btn--style-secondary ${!canUndo && 'btn--disabled'}`} disabled={!canUndo} onClick={undoHistoryValue} style={{ marginBlock: 0 }} type="button">
         Undo
@@ -31,4 +32,5 @@ export const UndoRedoActions = ({ onChange }) => {
         Redo
       </button>
     </React.Fragment>);
-};
+});
+UndoRedoActions.displayName = 'UndoRedoActions';

package/dist/ui/Compose/compose.module.css

@@ -8,15 +8,11 @@
   pointer-events: none;
   padding: 0 5px;
   margin: 0;
-  z-index: 1;
+  z-index: 99;
   transform: scaleY(0) skewX(90deg) translateY(-5px);
   transform-origin: top;
   max-height: 0;
 
-  will-change: transform, opacity;
-  backface-visibility: hidden;
-  perspective: 1000px;
-
   transition:
     opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
     transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
@@ -39,23 +35,22 @@
     max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+
+
 :global(.field-type.ai-plugin-active) .actions {
-  animation: removeWillChange 0.3s forwards;
+  /* animation: removeWillChange 0.3s forwards; */
 }
 
-@keyframes removeWillChange {
+/* @keyframes removeWillChange {
   to {
     will-change: auto;
   }
-}
+} */
 
 .actions > * {
   opacity: 0;
   transform: translateY(-3px) translateZ(0);
 
-  will-change: transform, opacity;
-  backface-visibility: hidden;
-
   transition:
     opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
     transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -68,27 +63,22 @@
 
 :global(.field-type.ai-plugin-active) .actions > *:nth-child(1) {
   transition-delay: 0.05s;
-  animation: removeWillChange 0.25s 0.05s forwards;
 }
 
 :global(.field-type.ai-plugin-active) .actions > *:nth-child(2) {
   transition-delay: 0.08s;
-  animation: removeWillChange 0.28s 0.08s forwards;
 }
 
 :global(.field-type.ai-plugin-active) .actions > *:nth-child(3) {
   transition-delay: 0.11s;
-  animation: removeWillChange 0.31s 0.11s forwards;
 }
 
 :global(.field-type.ai-plugin-active) .actions > *:nth-child(4) {
   transition-delay: 0.14s;
-  animation: removeWillChange 0.34s 0.14s forwards;
 }
 
 :global(.field-type.ai-plugin-active) .actions > *:nth-child(5) {
   transition-delay: 0.17s;
-  animation: removeWillChange 0.37s 0.17s forwards;
 }
 
 @media (prefers-reduced-motion: no-preference) and (min-resolution: 120dpi) {
@@ -103,6 +93,56 @@
   .actions > * {
     transition-duration: 0.01ms !important;
     animation-duration: 0.01ms !important;
-    will-change: auto !important;
   }
 }
+
+/* Force visibility modifier - Placed at end for CSS priority */
+.actions.actionsVisible {
+  opacity: 1;
+  visibility: visible;
+  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 */
+}
+
+.actions.actionsVisible > * {
+  opacity: 1;
+  transform: translateY(0) translateZ(0);
+}
+
+/* Ensure field wrapper is positioned for absolute children */
+/* Ensure field wrapper is positioned for absolute children */
+.arrayFieldWrapper {
+  position: relative !important;
+}
+
+/* Position Compose button - Base */
+.composePortal {
+  display: flex !important;
+  align-items: center;
+  height: min-content;
+  z-index: 5;
+}
+
+/* When Add Row is present: Overlay at bottom right */
+.composePortalAbsolute {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+/* When Add Row is missing: Normal flow at bottom right */
+.composePortalStatic {
+  position: relative;
+  width: 100%;
+  justify-content: flex-end;
+  margin-top: -32px;
+  /* Reset absolute positioning styles */
+  bottom: auto;
+  right: auto;
+}

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

@@ -1,11 +1,12 @@
-import { MemoizedTranslateMenu } from './TranslateMenu.js';
 import { Compose, Expand, Proofread, Rephrase, Settings, Simplify, Summarize } from './items.js';
+import { MemoizedTranslateMenu } from './TranslateMenu.js';
 export const menuItemsMap = [
     {
         name: 'Proofread',
         component: Proofread,
         excludedFor: [
-            'upload'
+            'upload',
+            'array'
         ],
         loadingText: 'Proofreading'
     },
@@ -13,7 +14,8 @@ export const menuItemsMap = [
         name: 'Rephrase',
         component: Rephrase,
         excludedFor: [
-            'upload'
+            'upload',
+            'array'
         ],
         loadingText: 'Rephrasing'
     },
@@ -21,7 +23,8 @@ export const menuItemsMap = [
         name: 'Translate',
         component: MemoizedTranslateMenu,
         excludedFor: [
-            'upload'
+            'upload',
+            'array'
         ],
         loadingText: 'Translating'
     },
@@ -30,7 +33,8 @@ export const menuItemsMap = [
         component: Expand,
         excludedFor: [
             'upload',
-            'text'
+            'text',
+            'array'
         ],
         loadingText: 'Expanding'
     },
@@ -41,7 +45,8 @@ export const menuItemsMap = [
         excludedFor: [
             'upload',
             'text',
-            'richText'
+            'richText',
+            'array'
         ],
         loadingText: 'Summarizing'
     },
@@ -49,7 +54,8 @@ export const menuItemsMap = [
         name: 'Simplify',
         component: Simplify,
         excludedFor: [
-            'upload'
+            'upload',
+            'array'
         ],
         loadingText: 'Simplifying'
     },

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 { MemoizedTranslateMenu, TranslateMenu } from './TranslateMenu.js'\nimport { Compose, Expand, Proofread, Rephrase, Settings, Simplify, Summarize } from './items.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'], loadingText: 'Proofreading' },\n  { name: 'Rephrase', component: Rephrase, excludedFor: ['upload'], loadingText: 'Rephrasing' },\n  {\n    name: 'Translate',\n    component: MemoizedTranslateMenu,\n    excludedFor: ['upload'],\n    loadingText: 'Translating',\n  },\n  { name: 'Expand', component: Expand, excludedFor: ['upload', 'text'], loadingText: 'Expanding' },\n  {\n    // Turned off - WIP\n    name: 'Summarize',\n    component: Summarize,\n    excludedFor: ['upload', 'text', 'richText'],\n    loadingText: 'Summarizing',\n  },\n  { name: 'Simplify', component: Simplify, excludedFor: ['upload'], loadingText: 'Simplifying' },\n  { name: 'Compose', component: Compose, loadingText: 'Composing' },\n  { name: 'Settings', component: Settings },\n]\n"],"names":["MemoizedTranslateMenu","Compose","Expand","Proofread","Rephrase","Settings","Simplify","Summarize","menuItemsMap","name","component","excludedFor","loadingText"],"mappings":"AAIA,SAASA,qBAAqB,QAAuB,qBAAoB;AACzE,SAASC,OAAO,EAAEC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,aAAY;AAShG,OAAO,MAAMC,eAAmC;IAC9C;QAAEC,MAAM;QAAaC,WAAWP;QAAWQ,aAAa;YAAC;SAAS;QAAEC,aAAa;IAAe;IAChG;QAAEH,MAAM;QAAYC,WAAWN;QAAUO,aAAa;YAAC;SAAS;QAAEC,aAAa;IAAa;IAC5F;QACEH,MAAM;QACNC,WAAWV;QACXW,aAAa;YAAC;SAAS;QACvBC,aAAa;IACf;IACA;QAAEH,MAAM;QAAUC,WAAWR;QAAQS,aAAa;YAAC;YAAU;SAAO;QAAEC,aAAa;IAAY;IAC/F;QACE,mBAAmB;QACnBH,MAAM;QACNC,WAAWH;QACXI,aAAa;YAAC;YAAU;YAAQ;SAAW;QAC3CC,aAAa;IACf;IACA;QAAEH,MAAM;QAAYC,WAAWJ;QAAUK,aAAa;YAAC;SAAS;QAAEC,aAAa;IAAc;IAC7F;QAAEH,MAAM;QAAWC,WAAWT;QAASW,aAAa;IAAY;IAChE;QAAEH,MAAM;QAAYC,WAAWL;IAAS;CACzC,CAAA"}
+{"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"}

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

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

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

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useField } from '@payloadcms/ui';
+import { useForm } from '@payloadcms/ui';
+import { getSiblingData } from 'payload/shared';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useFieldProps } from '../../../../providers/FieldProvider/useFieldProps.js';
 import { Compose, Proofread, Rephrase } from './items.js';
@@ -19,14 +20,27 @@ const getActiveComponent = (ac)=>{
     }
 };
 export const useMenu = (menuEvents, options)=>{
-    const { field: { type: fieldType } = {}, path: pathFromContext } = useFieldProps();
-    const field = useField({
-        path: pathFromContext ?? ''
-    });
+    const { field: { type: fieldType } = {}, path } = useFieldProps();
+    const { getData } = useForm();
     const [activeComponent, setActiveComponent] = useState('Rephrase');
-    const { initialValue, value } = field;
+    // Check value once on mount or when path/type changes
     useEffect(()=>{
-        if (!value) {
+        let hasValue = false;
+        try {
+            const data = getData();
+            if (path) {
+                const val = getSiblingData(data, path);
+                hasValue = val !== undefined && val !== null;
+                // For richTextFields, we might need a more robust check (e.g. check for root.children.length > 0)
+                // But for now, simple truthiness covers most cases or at least defaults safely
+                if (fieldType === 'richText' && val && typeof val === 'object' && 'root' in val) {
+                // Basic lexical check could go here if needed
+                }
+            }
+        } catch (e) {
+        // ignore
+        }
+        if (!hasValue) {
             setActiveComponent('Compose');
             return;
         }
@@ -34,18 +48,15 @@ export const useMenu = (menuEvents, options)=>{
             setActiveComponent('Compose');
             return;
         }
-        if (typeof value === 'string' && value !== initialValue) {
-            setActiveComponent('Proofread');
-        } else {
-            setActiveComponent('Rephrase');
-        }
+        // Default to Rephrase if value exists
+        setActiveComponent('Rephrase');
     }, [
-        initialValue,
-        value,
-        fieldType
+        fieldType,
+        getData,
+        path
     ]);
     const MemoizedActiveComponent = useMemo(()=>{
-        return ({ isLoading, stop })=>{
+        return ({ isLoading, loadingLabel, stop })=>{
             const ActiveComponent = getActiveComponent(activeComponent);
             const activeItem = menuItemsMap.find((i)=>i.name === activeComponent);
             return /*#__PURE__*/ _jsx(ActiveComponent, {
@@ -63,7 +74,7 @@ export const useMenu = (menuEvents, options)=>{
                     }
                 },
                 title: isLoading ? 'Click to stop' : activeItem.name,
-                children: isLoading && activeItem.loadingText
+                children: isLoading && (loadingLabel ?? activeItem.loadingText)
             });
         };
     }, [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/useMenu.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport type { ActionMenuItems, UseMenuEvents, UseMenuOptions } from '../../../../types.js'\n\nimport { useFieldProps } from '../../../../providers/FieldProvider/useFieldProps.js'\nimport { Compose, Proofread, Rephrase } from './items.js'\nimport { menuItemsMap } from './itemsMap.js'\nimport styles from './menu.module.scss'\n\nconst getActiveComponent = (ac: ActionMenuItems) => {\n  switch (ac) {\n    case 'Compose':\n      return Compose\n    case 'Proofread':\n      return Proofread\n    case 'Rephrase':\n      return Rephrase\n    default:\n      return Rephrase\n  }\n}\n\nexport const useMenu = (menuEvents: UseMenuEvents, options: UseMenuOptions) => {\n  const { field:{ type: fieldType } = {}, path: pathFromContext } = useFieldProps()\n  const field = useField({ path: pathFromContext ?? '' })\n  const [activeComponent, setActiveComponent] = useState<ActionMenuItems>('Rephrase')\n\n  const { initialValue, value } = field\n\n  useEffect(() => {\n    if (!value) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    if (menuItemsMap.some((i) => i.excludedFor?.includes(fieldType ?? ''))) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    if (typeof value === 'string' && value !== initialValue) {\n      setActiveComponent('Proofread')\n    } else {\n      setActiveComponent('Rephrase')\n    }\n  }, [initialValue, value, fieldType])\n\n  const MemoizedActiveComponent = useMemo(() => {\n    return ({ isLoading, stop }: { isLoading: boolean; stop: () => void }) => {\n      const ActiveComponent = getActiveComponent(activeComponent)\n      const activeItem = menuItemsMap.find((i) => i.name === activeComponent)!\n      return (\n        <ActiveComponent\n          hideIcon\n          onClick={(data: unknown) => {\n            if (!isLoading) {\n              const trigger = menuEvents[`on${activeComponent}`]\n              if (typeof trigger === 'function') {\n                trigger(data)\n              } else {\n                console.error('No trigger found for', activeComponent)\n              }\n            } else {\n              stop()\n            }\n          }}\n          title={isLoading ? 'Click to stop' : activeItem.name}\n        >\n          {isLoading && activeItem.loadingText}\n        </ActiveComponent>\n      )\n    }\n  }, [activeComponent, menuEvents])\n\n  const filteredMenuItems = useMemo(\n    () =>\n      menuItemsMap.filter((i) => {\n        if (i.name === 'Settings' && !options.isConfigAllowed) {\n          return false\n        } // Disable settings if a user role is not permitted\n        return i.name !== activeComponent && !i.excludedFor?.includes(fieldType ?? '')\n      }),\n    [activeComponent, fieldType, options.isConfigAllowed],\n  )\n\n  const MemoizedMenu = useMemo(() => {\n    return ({ isLoading, onClose }: { isLoading: boolean; onClose: () => void }) => (\n      <div className={styles.menu}>\n        {filteredMenuItems.map((i) => {\n          const Action = i.component\n          return (\n            <Action\n              disabled={isLoading}\n              key={i.name}\n              onClick={(data: unknown) => {\n                if (i.name !== 'Settings') {\n                  setActiveComponent(i.name)\n                }\n\n                menuEvents[`on${i.name}`]?.(data)\n                onClose()\n              }}\n            >\n              {isLoading && i.loadingText}\n            </Action>\n          )\n        })}\n      </div>\n    )\n  }, [filteredMenuItems, menuEvents])\n\n  return {\n    ActiveComponent: MemoizedActiveComponent,\n    Menu: MemoizedMenu,\n  }\n}\n"],"names":["useField","React","useEffect","useMemo","useState","useFieldProps","Compose","Proofread","Rephrase","menuItemsMap","styles","getActiveComponent","ac","useMenu","menuEvents","options","field","type","fieldType","path","pathFromContext","activeComponent","setActiveComponent","initialValue","value","some","i","excludedFor","includes","MemoizedActiveComponent","isLoading","stop","ActiveComponent","activeItem","find","name","hideIcon","onClick","data","trigger","console","error","title","loadingText","filteredMenuItems","filter","isConfigAllowed","MemoizedMenu","onClose","div","className","menu","map","Action","component","disabled","Menu"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/useMenu.tsx"],"sourcesContent":["'use client'\n\nimport { useForm } from '@payloadcms/ui'\nimport { getSiblingData } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport type { ActionMenuItems, UseMenuEvents, UseMenuOptions } from '../../../../types.js'\n\nimport { useFieldProps } from '../../../../providers/FieldProvider/useFieldProps.js'\nimport { Compose, Proofread, Rephrase } from './items.js'\nimport { menuItemsMap } from './itemsMap.js'\nimport styles from './menu.module.scss'\n\nconst getActiveComponent = (ac: ActionMenuItems) => {\n  switch (ac) {\n    case 'Compose':\n      return Compose\n    case 'Proofread':\n      return Proofread\n    case 'Rephrase':\n      return Rephrase\n    default:\n      return Rephrase\n  }\n}\n\nexport const useMenu = (menuEvents: UseMenuEvents, options: UseMenuOptions) => {\n  const { field: { type: fieldType } = {}, path } = useFieldProps()\n  const { getData } = useForm()\n  const [activeComponent, setActiveComponent] = useState<ActionMenuItems>('Rephrase')\n\n  // Check value once on mount or when path/type changes\n  useEffect(() => {\n    let hasValue = false\n\n    try {\n      const data = getData()\n      if (path) {\n        const val = getSiblingData(data, path)\n        hasValue = val !== undefined && val !== null\n        // For richTextFields, we might need a more robust check (e.g. check for root.children.length > 0)\n        // But for now, simple truthiness covers most cases or at least defaults safely\n        if (fieldType === 'richText' && val && typeof val === 'object' && 'root' in val) {\n           // Basic lexical check could go here if needed\n        }\n      }\n    } catch (e) {\n      // ignore\n    }\n\n    if (!hasValue) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    if (menuItemsMap.some((i) => i.excludedFor?.includes(fieldType ?? ''))) {\n      setActiveComponent('Compose')\n      return\n    }\n\n    // Default to Rephrase if value exists\n    setActiveComponent('Rephrase')\n  }, [fieldType, getData, path])\n\n  const MemoizedActiveComponent = useMemo(() => {\n    return ({ isLoading, loadingLabel, stop }: { isLoading: boolean; loadingLabel?: string; stop: () => void }) => {\n      const ActiveComponent = getActiveComponent(activeComponent)\n      const activeItem = menuItemsMap.find((i) => i.name === activeComponent)!\n      return (\n        <ActiveComponent\n          hideIcon\n          onClick={(data: unknown) => {\n            if (!isLoading) {\n              const trigger = menuEvents[`on${activeComponent}`]\n              if (typeof trigger === 'function') {\n                trigger(data)\n              } else {\n                console.error('No trigger found for', activeComponent)\n              }\n            } else {\n              stop()\n            }\n          }}\n          title={isLoading ? 'Click to stop' : activeItem.name}\n        >\n          {isLoading && (loadingLabel ?? activeItem.loadingText)}\n        </ActiveComponent>\n      )\n    }\n  }, [activeComponent, menuEvents])\n\n  const filteredMenuItems = useMemo(\n    () =>\n      menuItemsMap.filter((i) => {\n        if (i.name === 'Settings' && !options.isConfigAllowed) {\n          return false\n        } // Disable settings if a user role is not permitted\n        return i.name !== activeComponent && !i.excludedFor?.includes(fieldType ?? '')\n      }),\n    [activeComponent, fieldType, options.isConfigAllowed],\n  )\n\n  const MemoizedMenu = useMemo(() => {\n    return ({ isLoading, onClose }: { isLoading: boolean; onClose: () => void }) => (\n      <div className={styles.menu}>\n        {filteredMenuItems.map((i) => {\n          const Action = i.component\n          return (\n            <Action\n              disabled={isLoading}\n              key={i.name}\n              onClick={(data: unknown) => {\n                if (i.name !== 'Settings') {\n                  setActiveComponent(i.name)\n                }\n\n                menuEvents[`on${i.name}`]?.(data)\n                onClose()\n              }}\n            >\n              {isLoading && i.loadingText}\n            </Action>\n          )\n        })}\n      </div>\n    )\n  }, [filteredMenuItems, menuEvents])\n\n  return {\n    ActiveComponent: MemoizedActiveComponent,\n    Menu: MemoizedMenu,\n  }\n}\n\n"],"names":["useForm","getSiblingData","React","useEffect","useMemo","useState","useFieldProps","Compose","Proofread","Rephrase","menuItemsMap","styles","getActiveComponent","ac","useMenu","menuEvents","options","field","type","fieldType","path","getData","activeComponent","setActiveComponent","hasValue","data","val","undefined","e","some","i","excludedFor","includes","MemoizedActiveComponent","isLoading","loadingLabel","stop","ActiveComponent","activeItem","find","name","hideIcon","onClick","trigger","console","error","title","loadingText","filteredMenuItems","filter","isConfigAllowed","MemoizedMenu","onClose","div","className","menu","map","Action","component","disabled","Menu"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 'use client';
-import { useField } from '@payloadcms/ui';
+import { useForm } from '@payloadcms/ui';
+import { getSiblingData } from 'payload/shared';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useFieldProps } from '../../../../providers/FieldProvider/useFieldProps.js';
 import { Compose, Proofread, Rephrase } from './items.js';
@@ -18,12 +19,28 @@ const getActiveComponent = (ac) => {
     }
 };
 export const useMenu = (menuEvents, options) => {
-    const { field: { type: fieldType } = {}, path: pathFromContext } = useFieldProps();
-    const field = useField({ path: pathFromContext ?? '' });
+    const { field: { type: fieldType } = {}, path } = useFieldProps();
+    const { getData } = useForm();
     const [activeComponent, setActiveComponent] = useState('Rephrase');
-    const { initialValue, value } = field;
+    // Check value once on mount or when path/type changes
     useEffect(() => {
-        if (!value) {
+        let hasValue = false;
+        try {
+            const data = getData();
+            if (path) {
+                const val = getSiblingData(data, path);
+                hasValue = val !== undefined && val !== null;
+                // For richTextFields, we might need a more robust check (e.g. check for root.children.length > 0)
+                // But for now, simple truthiness covers most cases or at least defaults safely
+                if (fieldType === 'richText' && val && typeof val === 'object' && 'root' in val) {
+                    // Basic lexical check could go here if needed
+                }
+            }
+        }
+        catch (e) {
+            // ignore
+        }
+        if (!hasValue) {
             setActiveComponent('Compose');
             return;
         }
@@ -31,15 +48,11 @@ export const useMenu = (menuEvents, options) => {
             setActiveComponent('Compose');
             return;
         }
-        if (typeof value === 'string' && value !== initialValue) {
-            setActiveComponent('Proofread');
-        }
-        else {
-            setActiveComponent('Rephrase');
-        }
-    }, [initialValue, value, fieldType]);
+        // Default to Rephrase if value exists
+        setActiveComponent('Rephrase');
+    }, [fieldType, getData, path]);
     const MemoizedActiveComponent = useMemo(() => {
-        return ({ isLoading, stop }) => {
+        return ({ isLoading, loadingLabel, stop }) => {
             const ActiveComponent = getActiveComponent(activeComponent);
             const activeItem = menuItemsMap.find((i) => i.name === activeComponent);
             return (<ActiveComponent hideIcon onClick={(data) => {
@@ -56,7 +69,7 @@ export const useMenu = (menuEvents, options) => {
                         stop();
                     }
                 }} title={isLoading ? 'Click to stop' : activeItem.name}>
-          {isLoading && activeItem.loadingText}
+          {isLoading && (loadingLabel ?? activeItem.loadingText)}
         </ActiveComponent>);
         };
     }, [activeComponent, menuEvents]);