@ai-stack/payloadcms 3.2.24-beta → 3.68.0

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.js

@@ -26,7 +26,9 @@ export const UndoRedoActions = ({ onChange })=>{
     useEffect(()=>{
         setIsMounted(true);
     }, []);
-    if (!isMounted || !canUndo && !canRedo) return null;
+    if (!isMounted || !canUndo && !canRedo) {
+        return null;
+    }
     return /*#__PURE__*/ _jsxs(React.Fragment, {
         children: [
             /*#__PURE__*/ _jsx("button", {

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, { 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;QAAC,OAAO;IAAI;IAEtD,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"}

package/dist/ui/Compose/UndoRedoActions.jsx

@@ -21,8 +21,9 @@ export const UndoRedoActions = ({ onChange }) => {
     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

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

@@ -8,7 +8,7 @@
   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;

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

@@ -1,5 +1,5 @@
-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',

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'], 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":["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;SAAS;QAAEC,aAAa;IAAe;IAChG;QAAEH,MAAM;QAAYC,WAAWP;QAAUQ,aAAa;YAAC;SAAS;QAAEC,aAAa;IAAa;IAC5F;QACEH,MAAM;QACNC,WAAWH;QACXI,aAAa;YAAC;SAAS;QACvBC,aAAa;IACf;IACA;QAAEH,MAAM;QAAUC,WAAWT;QAAQU,aAAa;YAAC;YAAU;SAAO;QAAEC,aAAa;IAAY;IAC/F;QACE,mBAAmB;QACnBH,MAAM;QACNC,WAAWJ;QACXK,aAAa;YAAC;YAAU;YAAQ;SAAW;QAC3CC,aAAa;IACf;IACA;QAAEH,MAAM;QAAYC,WAAWL;QAAUM,aAAa;YAAC;SAAS;QAAEC,aAAa;IAAc;IAC7F;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

@@ -45,7 +45,7 @@ export const useMenu = (menuEvents, options)=>{
         fieldType
     ]);
     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 +63,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 { 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, 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"],"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","loadingLabel","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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"}

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

@@ -39,7 +39,7 @@ export const useMenu = (menuEvents, options) => {
         }
     }, [initialValue, value, fieldType]);
     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 +56,7 @@ export const useMenu = (menuEvents, options) => {
                         stop();
                     }
                 }} title={isLoading ? 'Click to stop' : activeItem.name}>
-          {isLoading && activeItem.loadingText}
+          {isLoading && (loadingLabel ?? activeItem.loadingText)}
         </ActiveComponent>);
         };
     }, [activeComponent, menuEvents]);

package/dist/ui/Compose/hooks/useActiveFieldTracking.js

@@ -8,6 +8,12 @@ import { useEffect } from 'react';
     'textarea',
     'rich-text-lexical'
 ];
+// Performance optimization: Cache container and field type lookups
+const containerCache = new WeakMap();
+const fieldTypeCache = new WeakMap();
+// Performance optimization: Throttle/debounce timers
+let pointerDownThrottleTimer = null;
+let focusDebounceTimer = null;
 let currentContainer = null;
 let rafId = null // Track RAF to cancel if needed
 ;
@@ -21,7 +27,16 @@ let rafId = null // Track RAF to cancel if needed
 };
 /**
  * Find container from React Select dropdown elements
+ * Performance: Early exit if not in a listbox/option element
  */ const findContainerFromReactSelect = (target)=>{
+    // Early exit if element doesn't have role indicator for React Select
+    const role = target.getAttribute('role');
+    if (!role || ![
+        'listbox',
+        'option'
+    ].includes(role)) {
+        return null;
+    }
     const listbox = target.closest('[role="listbox"]');
     if (!listbox?.id) {
         return null;
@@ -33,27 +48,45 @@ let rafId = null // Track RAF to cancel if needed
 };
 /**
  * Check if a container has one of the allowed field type classes
+ * Performance: Uses WeakMap cache to avoid repeated class list checks
  */ const isAllowedFieldType = (container)=>{
-    return ALLOWED_FIELD_TYPES.some((type)=>container.classList.contains(type) || container.classList.contains(`field-type-${type}`));
+    // Check cache first
+    if (fieldTypeCache.has(container)) {
+        return fieldTypeCache.get(container);
+    }
+    // Compute and cache result
+    const result = ALLOWED_FIELD_TYPES.some((type)=>container.classList.contains(type) || container.classList.contains(`field-type-${type}`));
+    fieldTypeCache.set(container, result);
+    return result;
 };
 /**
  * Resolve the .field-type container for a given event target
  * Only returns containers that match allowed field types
+ * Performance: Uses WeakMap cache to avoid repeated DOM traversals
  */ const resolveContainerFromTarget = (target)=>{
     if (!(target instanceof HTMLElement)) {
         return null;
     }
-    // Check for direct parent first
+    // Check cache first
+    if (containerCache.has(target)) {
+        const cached = containerCache.get(target);
+        // Validate cache entry is still in DOM
+        if (!cached || cached.isConnected) {
+            return cached;
+        }
+        // Invalidate stale cache entry
+        containerCache.delete(target);
+    }
+    // Perform lookup
     let container = target.closest('.field-type');
-    // If not found, fall back to React Select logic
+    // Fall back to React Select logic if needed
     if (!container) {
         container = findContainerFromReactSelect(target);
     }
-    // Only return if it's an allowed field type
-    if (container && isAllowedFieldType(container)) {
-        return container;
-    }
-    return null;
+    // Validate field type and cache result
+    const result = container && isAllowedFieldType(container) ? container : null;
+    containerCache.set(target, result);
+    return result;
 };
 /**
  * Update the active container and toggle CSS class
@@ -116,6 +149,7 @@ const isInteractiveElement = (element)=>{
 };
 /**
  * Handle focus events - only activate if focus is on an interactive element within .field-type
+ * Performance: Debounced by 10ms to handle rapid focus changes
  */ const onFocusIn = (e)=>{
     const target = e.target;
     if (!(target instanceof HTMLElement)) {
@@ -129,11 +163,20 @@ const isInteractiveElement = (element)=>{
     if (!isInteractiveElement(target)) {
         return;
     }
-    const container = resolveContainerFromTarget(target);
-    setActiveContainer(container);
+    // Clear any pending debounce
+    if (focusDebounceTimer !== null) {
+        clearTimeout(focusDebounceTimer);
+    }
+    // Debounce to reduce work during rapid focus changes (e.g., fast tabbing)
+    focusDebounceTimer = window.setTimeout(()=>{
+        focusDebounceTimer = null;
+        const container = resolveContainerFromTarget(target);
+        setActiveContainer(container);
+    }, 10);
 };
 /**
  * Handle pointer/mouse events - only switch when clicking a different .field-type
+ * Performance: Early exit for non-field clicks + 50ms throttling
  */ const onPointerDown = (e)=>{
     const target = e.target;
     if (!(target instanceof HTMLElement)) {
@@ -143,8 +186,24 @@ const isInteractiveElement = (element)=>{
     if (currentContainer?.isConnected && currentContainer.contains(target)) {
         return;
     }
+    // Performance: Quick check before expensive traversal
+    // If click is nowhere near a field, just clear active state
+    if (!target.closest('.field-type')) {
+        if (currentContainer) {
+            setActiveContainer(null);
+        }
+        return;
+    }
+    // Throttle to prevent excessive work on rapid clicking
+    if (pointerDownThrottleTimer !== null) {
+        return;
+    }
     const container = resolveContainerFromTarget(target);
     setActiveContainer(container);
+    // Set throttle timer for 50ms
+    pointerDownThrottleTimer = window.setTimeout(()=>{
+        pointerDownThrottleTimer = null;
+    }, 50);
 };
 /**
  * Handle keyboard navigation (Tab key)

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/Compose/hooks/useActiveFieldTracking.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\n/**\n * Allowed field type classes that should show the active state\n */\nconst ALLOWED_FIELD_TYPES = ['upload', 'text', 'textarea', 'rich-text-lexical']\n\nlet currentContainer: HTMLElement | null = null\nlet rafId: null | number = null // Track RAF to cancel if needed\n\n/**\n * Safely escape CSS selector values\n */\nconst cssEscape = (value: string): string => {\n  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {\n    return CSS.escape(value)\n  }\n  return value.replace(/([ #;?%&,.+*~':\"!^$[\\]()=>|/@])/g, '\\\\$1')\n}\n\n/**\n * Find container from React Select dropdown elements\n */\nconst findContainerFromReactSelect = (target: HTMLElement): HTMLElement | null => {\n  const listbox = target.closest<HTMLElement>('[role=\"listbox\"]')\n  if (!listbox?.id) {\n    return null\n  }\n\n  const id = cssEscape(listbox.id)\n  const selector = `[aria-controls=\"${id}\"], [aria-owns=\"${id}\"]`\n  const control = document.querySelector<HTMLElement>(selector)\n\n  return control?.closest<HTMLElement>('.field-type') ?? null\n}\n\n/**\n * Check if a container has one of the allowed field type classes\n */\nconst isAllowedFieldType = (container: HTMLElement): boolean => {\n  return ALLOWED_FIELD_TYPES.some(\n    (type) =>\n      container.classList.contains(type) || container.classList.contains(`field-type-${type}`),\n  )\n}\n\n/**\n * Resolve the .field-type container for a given event target\n * Only returns containers that match allowed field types\n */\nconst resolveContainerFromTarget = (target: EventTarget | null): HTMLElement | null => {\n  if (!(target instanceof HTMLElement)) {\n    return null\n  }\n\n  // Check for direct parent first\n  let container = target.closest<HTMLElement>('.field-type')\n\n  // If not found, fall back to React Select logic\n  if (!container) {\n    container = findContainerFromReactSelect(target)\n  }\n\n  // Only return if it's an allowed field type\n  if (container && isAllowedFieldType(container)) {\n    return container\n  }\n\n  return null\n}\n\n/**\n * Update the active container and toggle CSS class\n * - Avoids acting on disconnected nodes\n * - Avoids redundant class work\n */\nconst setActiveContainer = (next: HTMLElement | null): void => {\n  // Normalize both references against disconnected nodes\n  if (currentContainer && !currentContainer.isConnected) {\n    currentContainer = null\n  }\n  if (next && !next.isConnected) {\n    next = null\n  }\n\n  if (currentContainer === next) {\n    return\n  }\n\n  currentContainer?.classList.remove('ai-plugin-active')\n  if (next) {\n    next.classList.add('ai-plugin-active')\n  }\n  currentContainer = next\n}\n\nconst clearActiveContainer = (): void => {\n  if (currentContainer) {\n    currentContainer.classList.remove('ai-plugin-active')\n    currentContainer = null\n  }\n\n  // Cancel any pending RAF\n  if (rafId !== null) {\n    cancelAnimationFrame(rafId)\n    rafId = null\n  }\n}\n\nconst isInteractiveElement = (element: HTMLElement): boolean => {\n  const tagName = element.tagName.toLowerCase()\n  const interactiveTags = ['input', 'textarea', 'select', 'button']\n\n  if (interactiveTags.includes(tagName)) {\n    return true\n  }\n\n  // Check for contenteditable\n  if (element.isContentEditable) {\n    return true\n  }\n\n  // Check for elements with role=\"textbox\" or role=\"combobox\" (React Select)\n  const role = element.getAttribute('role')\n  if (role && ['combobox', 'listbox', 'searchbox', 'textbox'].includes(role)) {\n    return true\n  }\n\n  return false\n}\n\n/**\n * Handle focus events - only activate if focus is on an interactive element within .field-type\n */\nconst onFocusIn = (e: FocusEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  // Early exit if we're already inside the current container\n  if (currentContainer?.isConnected && currentContainer.contains(target)) {\n    return\n  }\n\n  // Only activate if the focused element is actually interactive\n  if (!isInteractiveElement(target)) {\n    return\n  }\n\n  const container = resolveContainerFromTarget(target)\n  setActiveContainer(container)\n}\n\n/**\n * Handle pointer/mouse events - only switch when clicking a different .field-type\n */\nconst onPointerDown = (e: PointerEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  // Early exit if clicking within current container\n  if (currentContainer?.isConnected && currentContainer.contains(target)) {\n    return\n  }\n\n  const container = resolveContainerFromTarget(target)\n  setActiveContainer(container)\n}\n\n/**\n * Handle keyboard navigation (Tab key)\n */\nconst onKeyDown = (e: KeyboardEvent): void => {\n  if (e.key !== 'Tab') {\n    return\n  }\n\n  // Cancel any pending RAF to prevent queuing\n  if (rafId !== null) {\n    cancelAnimationFrame(rafId)\n  }\n\n  // Defer until after focus has shifted\n  rafId = requestAnimationFrame(() => {\n    rafId = null\n    const container = resolveContainerFromTarget(document.activeElement)\n    setActiveContainer(container)\n  })\n}\n\n/**\n * Handle visibility changes to properly cleanup when page is hidden\n */\nconst onVisibilityChange = (): void => {\n  if (typeof document !== 'undefined' && document.hidden) {\n    // Clear active state and cancel pending operations\n    clearActiveContainer()\n  }\n}\n\n/**\n * Initialize document-level listeners to track the active field container.\n * When a container is active, it receives the 'ai-plugin-active' class.\n */\nexport const useActiveFieldTracking = (): void => {\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return\n    }\n\n    const pluginWindow = window as {\n      __aiComposeTracking?: boolean\n      __aiComposeTrackingController?: AbortController\n      __aiComposeTrackingCount?: number\n    } & Window\n\n    // Track number of mounted users of the hook\n    pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 0) + 1\n\n    // Initialize listeners only once\n    if (!pluginWindow.__aiComposeTracking) {\n      const controller = new AbortController()\n      pluginWindow.__aiComposeTrackingController = controller\n\n      // Use capture for early handling\n      document.addEventListener('focusin', onFocusIn, {\n        capture: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('pointerdown', onPointerDown, {\n        capture: true,\n        passive: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('keydown', onKeyDown, {\n        capture: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('visibilitychange', onVisibilityChange, {\n        signal: controller.signal,\n      })\n\n      pluginWindow.__aiComposeTracking = true\n    }\n\n    return () => {\n      // Decrement and cleanup when the last user unmounts\n      pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 1) - 1\n\n      if ((pluginWindow.__aiComposeTrackingCount ?? 0) <= 0) {\n        // Atomically remove all listeners\n        pluginWindow.__aiComposeTrackingController?.abort()\n        pluginWindow.__aiComposeTrackingController = undefined\n\n        // Clear active state and cancel pending operations\n        clearActiveContainer()\n\n        // Reset all state\n        pluginWindow.__aiComposeTracking = false\n        pluginWindow.__aiComposeTrackingCount = 0\n      }\n    }\n  }, [])\n}\n"],"names":["useEffect","ALLOWED_FIELD_TYPES","currentContainer","rafId","cssEscape","value","CSS","escape","replace","findContainerFromReactSelect","target","listbox","closest","id","selector","control","document","querySelector","isAllowedFieldType","container","some","type","classList","contains","resolveContainerFromTarget","HTMLElement","setActiveContainer","next","isConnected","remove","add","clearActiveContainer","cancelAnimationFrame","isInteractiveElement","element","tagName","toLowerCase","interactiveTags","includes","isContentEditable","role","getAttribute","onFocusIn","e","onPointerDown","onKeyDown","key","requestAnimationFrame","activeElement","onVisibilityChange","hidden","useActiveFieldTracking","window","pluginWindow","__aiComposeTrackingCount","__aiComposeTracking","controller","AbortController","__aiComposeTrackingController","addEventListener","capture","signal","passive","abort","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/ui/Compose/hooks/useActiveFieldTracking.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\n/**\n * Allowed field type classes that should show the active state\n */\nconst ALLOWED_FIELD_TYPES = ['upload', 'text', 'textarea', 'rich-text-lexical']\n\n// Performance optimization: Cache container and field type lookups\nconst containerCache = new WeakMap<HTMLElement, HTMLElement | null>()\nconst fieldTypeCache = new WeakMap<HTMLElement, boolean>()\n\n// Performance optimization: Throttle/debounce timers\nlet pointerDownThrottleTimer: null | number = null\nlet focusDebounceTimer: null | number = null\n\nlet currentContainer: HTMLElement | null = null\nlet rafId: null | number = null // Track RAF to cancel if needed\n\n/**\n * Safely escape CSS selector values\n */\nconst cssEscape = (value: string): string => {\n  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {\n    return CSS.escape(value)\n  }\n  return value.replace(/([ #;?%&,.+*~':\"!^$[\\]()=>|/@])/g, '\\\\$1')\n}\n\n/**\n * Find container from React Select dropdown elements\n * Performance: Early exit if not in a listbox/option element\n */\nconst findContainerFromReactSelect = (target: HTMLElement): HTMLElement | null => {\n  // Early exit if element doesn't have role indicator for React Select\n  const role = target.getAttribute('role')\n  if (!role || !['listbox', 'option'].includes(role)) {\n    return null\n  }\n\n  const listbox = target.closest<HTMLElement>('[role=\"listbox\"]')\n  if (!listbox?.id) {\n    return null\n  }\n\n  const id = cssEscape(listbox.id)\n  const selector = `[aria-controls=\"${id}\"], [aria-owns=\"${id}\"]`\n  const control = document.querySelector<HTMLElement>(selector)\n\n  return control?.closest<HTMLElement>('.field-type') ?? null\n}\n\n/**\n * Check if a container has one of the allowed field type classes\n * Performance: Uses WeakMap cache to avoid repeated class list checks\n */\nconst isAllowedFieldType = (container: HTMLElement): boolean => {\n  // Check cache first\n  if (fieldTypeCache.has(container)) {\n    return fieldTypeCache.get(container)!\n  }\n\n  // Compute and cache result\n  const result = ALLOWED_FIELD_TYPES.some(\n    (type) =>\n      container.classList.contains(type) || container.classList.contains(`field-type-${type}`),\n  )\n\n  fieldTypeCache.set(container, result)\n  return result\n}\n\n/**\n * Resolve the .field-type container for a given event target\n * Only returns containers that match allowed field types\n * Performance: Uses WeakMap cache to avoid repeated DOM traversals\n */\nconst resolveContainerFromTarget = (target: EventTarget | null): HTMLElement | null => {\n  if (!(target instanceof HTMLElement)) {\n    return null\n  }\n\n  // Check cache first\n  if (containerCache.has(target)) {\n    const cached = containerCache.get(target)!\n    // Validate cache entry is still in DOM\n    if (!cached || cached.isConnected) {\n      return cached\n    }\n    // Invalidate stale cache entry\n    containerCache.delete(target)\n  }\n\n  // Perform lookup\n  let container = target.closest<HTMLElement>('.field-type')\n\n  // Fall back to React Select logic if needed\n  if (!container) {\n    container = findContainerFromReactSelect(target)\n  }\n\n  // Validate field type and cache result\n  const result = container && isAllowedFieldType(container) ? container : null\n  containerCache.set(target, result)\n\n  return result\n}\n\n/**\n * Update the active container and toggle CSS class\n * - Avoids acting on disconnected nodes\n * - Avoids redundant class work\n */\nconst setActiveContainer = (next: HTMLElement | null): void => {\n  // Normalize both references against disconnected nodes\n  if (currentContainer && !currentContainer.isConnected) {\n    currentContainer = null\n  }\n  if (next && !next.isConnected) {\n    next = null\n  }\n\n  if (currentContainer === next) {\n    return\n  }\n\n  currentContainer?.classList.remove('ai-plugin-active')\n  if (next) {\n    next.classList.add('ai-plugin-active')\n  }\n  currentContainer = next\n}\n\nconst clearActiveContainer = (): void => {\n  if (currentContainer) {\n    currentContainer.classList.remove('ai-plugin-active')\n    currentContainer = null\n  }\n\n  // Cancel any pending RAF\n  if (rafId !== null) {\n    cancelAnimationFrame(rafId)\n    rafId = null\n  }\n}\n\nconst isInteractiveElement = (element: HTMLElement): boolean => {\n  const tagName = element.tagName.toLowerCase()\n  const interactiveTags = ['input', 'textarea', 'select', 'button']\n\n  if (interactiveTags.includes(tagName)) {\n    return true\n  }\n\n  // Check for contenteditable\n  if (element.isContentEditable) {\n    return true\n  }\n\n  // Check for elements with role=\"textbox\" or role=\"combobox\" (React Select)\n  const role = element.getAttribute('role')\n  if (role && ['combobox', 'listbox', 'searchbox', 'textbox'].includes(role)) {\n    return true\n  }\n\n  return false\n}\n\n/**\n * Handle focus events - only activate if focus is on an interactive element within .field-type\n * Performance: Debounced by 10ms to handle rapid focus changes\n */\nconst onFocusIn = (e: FocusEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  // Early exit if we're already inside the current container\n  if (currentContainer?.isConnected && currentContainer.contains(target)) {\n    return\n  }\n\n  // Only activate if the focused element is actually interactive\n  if (!isInteractiveElement(target)) {\n    return\n  }\n\n  // Clear any pending debounce\n  if (focusDebounceTimer !== null) {\n    clearTimeout(focusDebounceTimer)\n  }\n\n  // Debounce to reduce work during rapid focus changes (e.g., fast tabbing)\n  focusDebounceTimer = window.setTimeout(() => {\n    focusDebounceTimer = null\n    const container = resolveContainerFromTarget(target)\n    setActiveContainer(container)\n  }, 10)\n}\n\n/**\n * Handle pointer/mouse events - only switch when clicking a different .field-type\n * Performance: Early exit for non-field clicks + 50ms throttling\n */\nconst onPointerDown = (e: PointerEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  // Early exit if clicking within current container\n  if (currentContainer?.isConnected && currentContainer.contains(target)) {\n    return\n  }\n\n  // Performance: Quick check before expensive traversal\n  // If click is nowhere near a field, just clear active state\n  if (!target.closest('.field-type')) {\n    if (currentContainer) {\n      setActiveContainer(null)\n    }\n    return\n  }\n\n  // Throttle to prevent excessive work on rapid clicking\n  if (pointerDownThrottleTimer !== null) {\n    return\n  }\n\n  const container = resolveContainerFromTarget(target)\n  setActiveContainer(container)\n\n  // Set throttle timer for 50ms\n  pointerDownThrottleTimer = window.setTimeout(() => {\n    pointerDownThrottleTimer = null\n  }, 50)\n}\n\n/**\n * Handle keyboard navigation (Tab key)\n */\nconst onKeyDown = (e: KeyboardEvent): void => {\n  if (e.key !== 'Tab') {\n    return\n  }\n\n  // Cancel any pending RAF to prevent queuing\n  if (rafId !== null) {\n    cancelAnimationFrame(rafId)\n  }\n\n  // Defer until after focus has shifted\n  rafId = requestAnimationFrame(() => {\n    rafId = null\n    const container = resolveContainerFromTarget(document.activeElement)\n    setActiveContainer(container)\n  })\n}\n\n/**\n * Handle visibility changes to properly cleanup when page is hidden\n */\nconst onVisibilityChange = (): void => {\n  if (typeof document !== 'undefined' && document.hidden) {\n    // Clear active state and cancel pending operations\n    clearActiveContainer()\n  }\n}\n\n/**\n * Initialize document-level listeners to track the active field container.\n * When a container is active, it receives the 'ai-plugin-active' class.\n */\nexport const useActiveFieldTracking = (): void => {\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return\n    }\n\n    const pluginWindow = window as {\n      __aiComposeTracking?: boolean\n      __aiComposeTrackingController?: AbortController\n      __aiComposeTrackingCount?: number\n    } & Window\n\n    // Track number of mounted users of the hook\n    pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 0) + 1\n\n    // Initialize listeners only once\n    if (!pluginWindow.__aiComposeTracking) {\n      const controller = new AbortController()\n      pluginWindow.__aiComposeTrackingController = controller\n\n      // Use capture for early handling\n      document.addEventListener('focusin', onFocusIn, {\n        capture: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('pointerdown', onPointerDown, {\n        capture: true,\n        passive: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('keydown', onKeyDown, {\n        capture: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('visibilitychange', onVisibilityChange, {\n        signal: controller.signal,\n      })\n\n      pluginWindow.__aiComposeTracking = true\n    }\n\n    return () => {\n      // Decrement and cleanup when the last user unmounts\n      pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 1) - 1\n\n      if ((pluginWindow.__aiComposeTrackingCount ?? 0) <= 0) {\n        // Atomically remove all listeners\n        pluginWindow.__aiComposeTrackingController?.abort()\n        pluginWindow.__aiComposeTrackingController = undefined\n\n        // Clear active state and cancel pending operations\n        clearActiveContainer()\n\n        // Reset all state\n        pluginWindow.__aiComposeTracking = false\n        pluginWindow.__aiComposeTrackingCount = 0\n      }\n    }\n  }, [])\n}\n"],"names":["useEffect","ALLOWED_FIELD_TYPES","containerCache","WeakMap","fieldTypeCache","pointerDownThrottleTimer","focusDebounceTimer","currentContainer","rafId","cssEscape","value","CSS","escape","replace","findContainerFromReactSelect","target","role","getAttribute","includes","listbox","closest","id","selector","control","document","querySelector","isAllowedFieldType","container","has","get","result","some","type","classList","contains","set","resolveContainerFromTarget","HTMLElement","cached","isConnected","delete","setActiveContainer","next","remove","add","clearActiveContainer","cancelAnimationFrame","isInteractiveElement","element","tagName","toLowerCase","interactiveTags","isContentEditable","onFocusIn","e","clearTimeout","window","setTimeout","onPointerDown","onKeyDown","key","requestAnimationFrame","activeElement","onVisibilityChange","hidden","useActiveFieldTracking","pluginWindow","__aiComposeTrackingCount","__aiComposeTracking","controller","AbortController","__aiComposeTrackingController","addEventListener","capture","signal","passive","abort","undefined"],"mappings":"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"}

package/dist/ui/Compose/hooks/useGenerate.d.ts

@@ -7,7 +7,10 @@ export declare const useGenerate: ({ instructionId }: {
     instructionId: string;
 }) => {
     generate: (options?: ActionCallbackParams) => Promise<void | Response>;
+    isJobActive: boolean;
     isLoading: boolean;
+    jobProgress: number;
+    jobStatus: string | undefined;
     stop: () => void;
 };
 export {};

package/dist/ui/Compose/hooks/useGenerate.js

@@ -2,8 +2,8 @@ import { experimental_useObject as useObject } from '@ai-sdk/react';
 import { useEditorConfigContext } from '@payloadcms/richtext-lexical/client';
 import { toast, useConfig, useDocumentInfo, useField, useForm, useLocale } from '@payloadcms/ui';
 import { jsonSchema } from 'ai';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { PLUGIN_API_ENDPOINT_GENERATE, PLUGIN_API_ENDPOINT_GENERATE_UPLOAD, PLUGIN_INSTRUCTIONS_TABLE, PLUGIN_NAME } from '../../../defaults.js';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { PLUGIN_AI_JOBS_TABLE, PLUGIN_API_ENDPOINT_GENERATE, PLUGIN_API_ENDPOINT_GENERATE_UPLOAD, PLUGIN_INSTRUCTIONS_TABLE, PLUGIN_NAME } from '../../../defaults.js';
 import { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js';
 import { editorSchemaValidator } from '../../../utilities/editorSchemaValidator.js';
 import { fieldToJsonSchema } from '../../../utilities/fieldToJsonSchema.js';
@@ -27,10 +27,15 @@ export const useGenerate = ({ instructionId })=>{
         path: pathFromContext ?? ''
     });
     const { set: setHistory } = useHistory();
+    // Async job UI state
+    const [jobStatus, setJobStatus] = useState(undefined);
+    const [jobProgress, setJobProgress] = useState(0);
+    const [isJobActive, setIsJobActive] = useState(false);
     const { getData } = useForm();
     const { id: documentId, collectionSlug } = useDocumentInfo();
     const localFromContext = useLocale();
-    const { config: { collections } } = useConfig();
+    // Reuse config from above instead of calling useConfig again
+    const { collections } = config;
     const collection = collections.find((collection)=>collection.slug === PLUGIN_INSTRUCTIONS_TABLE);
     const { custom: { [PLUGIN_NAME]: { editorConfig = {} } = {} } = {} } = collection?.admin ?? {};
     const { schema: editorSchema = {} } = editorConfig;
@@ -110,7 +115,8 @@ export const useGenerate = ({ instructionId })=>{
     }, [
         object,
         editor,
-        field
+        field,
+        setValue
     ]);
     const streamObject = useCallback(({ action = 'Compose', params })=>{
         const doc = getData();
@@ -154,19 +160,70 @@ export const useGenerate = ({ instructionId })=>{
             method: 'POST'
         }).then(async (uploadResponse)=>{
             if (uploadResponse.ok) {
-                const { result } = await uploadResponse.json();
-                if (!result) {
-                    throw new Error('generateUpload: Something went wrong');
+                const json = await uploadResponse.json();
+                const { job, result } = json || {};
+                if (result) {
+                    // Set the upload ID
+                    setValue(result?.id);
+                    setHistory(result?.id);
+                    // Show toast to prompt user to save
+                    toast.success('Image generated successfully! Click Save to see the preview.');
+                    return uploadResponse;
+                }
+                // Async job: poll AI Jobs collection for status/progress/result_id
+                if (job && job.id) {
+                    setIsJobActive(true);
+                    const cancelled = false;
+                    let attempts = 0;
+                    const maxAttempts = 600 // up to ~10 minutes @ 1s
+                    ;
+                    // Basic in-hook state via closure variables; UI will re-render off fetches below
+                    const poll = async ()=>{
+                        if (cancelled) {
+                            return;
+                        }
+                        try {
+                            const res = await fetch(`${serverURL}${api}/${PLUGIN_AI_JOBS_TABLE}/${job.id}`, {
+                                credentials: 'include'
+                            });
+                            if (res.ok) {
+                                const jobDoc = await res.json();
+                                const { progress, result_id, status } = jobDoc || {};
+                                setJobStatus(status);
+                                setJobProgress(progress ?? 0);
+                                // When result present, set field and finish
+                                if (status === 'completed' && result_id) {
+                                    // Force upload field to refetch by clearing then setting the ID
+                                    setValue(null);
+                                    setTimeout(()=>{
+                                        setValue(result_id);
+                                    }, 0);
+                                    setHistory(result_id);
+                                    setIsJobActive(false);
+                                    return;
+                                }
+                                if (status === 'failed') {
+                                    setIsJobActive(false);
+                                    throw new Error('Video generation failed');
+                                }
+                            }
+                        } catch (e) {
+                        // silent retry
+                        }
+                        attempts += 1;
+                        if (!cancelled && attempts < maxAttempts) {
+                            setTimeout(poll, 1000);
+                        }
+                    };
+                    setTimeout(poll, 1000);
+                    return uploadResponse;
                 }
-                setValue(result?.id);
-                setHistory(result?.id);
-                console.log('Image updated...', result);
+                throw new Error('generateUpload: Unexpected response');
             } else {
                 const { errors = [] } = await uploadResponse.json();
                 const errStr = errors.map((error)=>error.message).join(', ');
                 throw new Error(errStr);
             }
-            return uploadResponse;
         }).catch((error)=>{
             toast.error(`Failed to generate: ${error.message}`);
             console.error('Error generating or setting your upload, please set it manually if its saved in your media files.', error);
@@ -200,7 +257,10 @@ export const useGenerate = ({ instructionId })=>{
     ]);
     return {
         generate,
+        isJobActive,
         isLoading: loadingObject,
+        jobProgress,
+        jobStatus,
         stop
     };
 };