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

package/dist/ui/AIConfigDashboard/index.jsx

@@ -1,24 +1,170 @@
 'use client';
-import React from 'react';
+import { Button, toast, useConfig } from '@payloadcms/ui';
+// @ts-expect-error - Next.js types are not resolving correctly with nodenext but runtime is fine
+import { useRouter } from 'next/navigation';
+import React, { useContext, useEffect, useState } from 'react';
+import { excludeCollections } from '../../defaults.js';
+import { InstructionsContext } from '../../providers/InstructionsProvider/context.js';
 export const AIConfigDashboard = () => {
+    const { config: { collections, routes: { admin: adminRoute, api: apiRoute }, }, } = useConfig();
+    const router = useRouter();
+    const { refresh, setEnabledCollections: setEnabledCollectionsInContext } = useContext(InstructionsContext);
+    const [enabledCollections, setEnabledCollections] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const availableCollections = collections.filter((c) => !excludeCollections.includes(c.slug) &&
+        !c.admin?.hidden);
+    useEffect(() => {
+        const fetchSettings = async () => {
+            try {
+                const response = await fetch(`${apiRoute}/globals/ai-settings`);
+                if (response.ok) {
+                    const data = await response.json();
+                    // Handle both simple array and object wrapper if Payload wraps it
+                    const storedEnabled = data.enabledCollections || [];
+                    setEnabledCollections(Array.isArray(storedEnabled) ? storedEnabled : []);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch AI settings:', error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        fetchSettings().catch((e) => {
+            console.log(e);
+        });
+    }, [apiRoute]);
+    const handleToggle = (slug) => {
+        setEnabledCollections((prev) => {
+            if (prev.includes(slug)) {
+                return prev.filter((s) => s !== slug);
+            }
+            return [...prev, slug];
+        });
+    };
+    const handleSave = async () => {
+        setIsSaving(true);
+        try {
+            // First fetch current settings to get ID or just rely on global update behavior
+            // We need to adhere to Payload's global update API
+            const response = await fetch(`${apiRoute}/globals/ai-settings`, {
+                body: JSON.stringify({
+                    enabledCollections,
+                }),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                method: 'POST',
+            });
+            if (response.ok) {
+                toast.success('Settings saved successfully');
+                if (setEnabledCollectionsInContext) {
+                    setEnabledCollectionsInContext(enabledCollections);
+                }
+                if (refresh) {
+                    await refresh();
+                }
+                router.refresh();
+            }
+            else {
+                toast.error('Failed to save settings');
+            }
+        }
+        catch (error) {
+            console.error('Error saving settings:', error);
+            toast.error('Error saving settings');
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    if (isLoading) {
+        return <div style={{ padding: '20px', textAlign: 'center' }}>Loading AI configuration...</div>;
+    }
     return (<div style={{
-            alignItems: 'center',
             background: 'var(--theme-elevation-50)',
-            border: '1px solid var(--theme-elevation-150)',
-            borderRadius: '8px',
+            // border: '1px solid var(--theme-elevation-150)',
+            // borderRadius: '8px',
+            marginBottom: '20px',
+            overflow: 'hidden',
+        }}>
+      <div style={{
+            alignItems: 'center',
+            borderBottom: '1px solid var(--theme-elevation-150)',
             display: 'flex',
             justifyContent: 'space-between',
-            marginBottom: '20px',
             padding: '20px',
         }}>
-      <div>
-        <h4 style={{ margin: '0 0 5px 0' }}>AI Configuration</h4>
-        <p style={{ color: 'var(--theme-elevation-500)', fontSize: '14px', margin: '0' }}>
-          Manage your AI providers, API keys, and default models.
-        </p>
+        <div>
+          <h4 style={{ margin: '0 0 5px 0' }}>AI Configuration</h4>
+          <p style={{ color: 'var(--theme-elevation-500)', fontSize: '14px', margin: '0' }}>
+            Manage your AI providers, API keys, and enable AI for specific collections.
+          </p>
+        </div>
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <Button buttonStyle="secondary" el="link" to={`${adminRoute}/globals/ai-settings`}>
+            Settings
+          </Button>
+          <Button disabled={isSaving} onClick={handleSave}>
+            {isSaving ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </div>
+      </div>
+
+      <div style={{ padding: '20px' }}>
+        <h5 style={{ marginBottom: '15px' }}>Enabled Collections</h5>
+        <div style={{
+            display: 'grid',
+            gap: '15px',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
+        }}>
+          {availableCollections.map((collection) => {
+            const isEnabled = enabledCollections.includes(collection.slug);
+            return (<button key={collection.slug} onClick={() => handleToggle(collection.slug)} style={{
+                    alignItems: 'center',
+                    background: isEnabled
+                        ? 'var(--theme-elevation-100)'
+                        : 'var(--theme-elevation-50)',
+                    border: `1px solid ${isEnabled ? 'var(--theme-text-success)' : 'var(--theme-elevation-200)'}`,
+                    borderRadius: '6px',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    gap: '10px',
+                    padding: '10px 15px',
+                    textAlign: 'left',
+                    transition: 'all 0.2s ease',
+                    width: '100%',
+                }} type="button">
+                <div style={{
+                    alignItems: 'center',
+                    background: isEnabled
+                        ? 'var(--theme-text-success)'
+                        : 'var(--theme-elevation-200)',
+                    borderRadius: '12px',
+                    display: 'flex',
+                    height: '24px',
+                    justifyContent: isEnabled ? 'flex-end' : 'flex-start',
+                    padding: '2px',
+                    transition: 'all 0.2s ease',
+                    width: '44px',
+                }}>
+                  <div style={{
+                    background: 'white',
+                    borderRadius: '50%',
+                    height: '20px',
+                    width: '20px',
+                }}/>
+                </div>
+                <span style={{ fontWeight: 500 }}>
+                  {typeof collection.labels?.singular === 'string'
+                    ? collection.labels.singular
+                    : collection.labels?.singular?.en || collection.slug}
+                </span>
+              </button>);
+        })}
+        </div>
       </div>
-      <a href="/admin/globals/ai-settings">
-        <button className="btn btn--style-primary btn--size-small">Manage AI Settings</button>
-      </a>
     </div>);
 };

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

@@ -6,6 +6,7 @@ export type ComposeProps = {
         path: string;
         schemaPath: string;
     };
+    forceVisible?: boolean;
     instructionId: string;
     isConfigAllowed: boolean;
 };

package/dist/ui/Compose/Compose.js

@@ -11,7 +11,7 @@ import { useMenu } from './hooks/menu/useMenu.js';
 import { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js';
 import { useGenerate } from './hooks/useGenerate.js';
 import { UndoRedoActions } from './UndoRedoActions.js';
-export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
+export const Compose = ({ descriptionProps, forceVisible, instructionId, isConfigAllowed })=>{
     const pathFromContext = descriptionProps?.path;
     const { editor: lexicalEditor } = useEditorConfigContext();
     // Get global openDrawer from context
@@ -135,10 +135,12 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
     });
     const setIfValueIsLexicalState = useCallback((val)=>{
         if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {
-            setSafeLexicalState(JSON.stringify(val), lexicalEditor);
+            // Pass the object directly to our safe setter which handles validation
+            setSafeLexicalState(val, lexicalEditor);
         }
-    // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo - revisit
-    }, []);
+    }, [
+        lexicalEditor
+    ]);
     const popupRender = useCallback(({ close })=>{
         return /*#__PURE__*/ _jsx(Menu, {
             isLoading: isProcessing || isLoading,
@@ -164,7 +166,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
         isAnyLoading
     ]);
     return /*#__PURE__*/ _jsxs("label", {
-        className: `payloadai-compose__actions ${styles.actions}`,
+        className: `payloadai-compose__actions ${styles.actions} ${forceVisible ? styles.actionsVisible : ''}`,
         onClick: (e)=>e.preventDefault(),
         role: "presentation",
         children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/Compose/Compose.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientField } from 'payload'\nimport type { FC } from 'react'\n\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { Popup, useField } from '@payloadcms/ui'\nimport React, { useCallback, useMemo, useState } from 'react'\n\nimport { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js'\nimport { useInstructions } from '../../providers/InstructionsProvider/useInstructions.js'\nimport { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js'\nimport { PluginIcon } from '../Icons/Icons.js'\nimport styles from './compose.module.css'\nimport { useMenu } from './hooks/menu/useMenu.js'\nimport { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js'\nimport { useGenerate } from './hooks/useGenerate.js'\nimport { UndoRedoActions } from './UndoRedoActions.js'\n\nexport type ComposeProps = {\n  descriptionProps?: {\n    field: ClientField\n    path: string\n    schemaPath: string\n  }\n  instructionId: string\n  isConfigAllowed: boolean\n}\n\nexport const Compose: FC<ComposeProps> = ({ descriptionProps, instructionId, isConfigAllowed }) => {\n  const pathFromContext = descriptionProps?.path\n  const { editor: lexicalEditor } = useEditorConfigContext()\n  \n  // Get global openDrawer from context\n  const { openDrawer } = useInstructions()\n\n  // Initialize global active-field tracking\n  useActiveFieldTracking()\n\n  const [isProcessing, setIsProcessing] = useState<boolean>(false)\n  const { generate, isJobActive, isLoading, jobProgress, jobStatus, stop } = useGenerate({ instructionId })\n\n  // Memoize menu event handlers to prevent recreation on every render\n  const onCompose = useCallback(() => {\n    console.log('Composing...')\n    setIsProcessing(true)\n    generate({\n      action: 'Compose',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onExpand = useCallback(() => {\n    console.log('Expanding...')\n    generate({\n      action: 'Expand',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onProofread = useCallback(() => {\n    console.log('Proofreading...')\n    generate({\n      action: 'Proofread',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onRephrase = useCallback(() => {\n    console.log('Rephrasing...')\n    generate({\n      action: 'Rephrase',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onSimplify = useCallback(() => {\n    console.log('Simplifying...')\n    generate({\n      action: 'Simplify',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onSummarize = useCallback(() => {\n    console.log('Summarizing...')\n    generate({\n      action: 'Summarize',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onTranslate = useCallback((data: unknown) => {\n    console.log('Translating...')\n    generate({\n      action: 'Translate',\n      params: data,\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const handleOpenSettings = useCallback(() => {\n    if (isConfigAllowed) {\n      openDrawer(instructionId)\n    }\n  }, [isConfigAllowed, openDrawer, instructionId])\n\n  const { ActiveComponent, Menu } = useMenu(\n    {\n      onCompose,\n      onExpand,\n      onProofread,\n      onRephrase,\n      onSettings: isConfigAllowed ? handleOpenSettings : undefined,\n      onSimplify,\n      onSummarize,\n      onTranslate,\n    },\n    {\n      isConfigAllowed,\n    },\n  )\n\n  const { setValue } = useField<string>({\n    path: pathFromContext,\n  })\n\n  const setIfValueIsLexicalState = useCallback((val: any) => {\n    if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {\n      setSafeLexicalState(JSON.stringify(val), lexicalEditor)\n    }\n\n    // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo - revisit\n  }, [])\n\n  const popupRender = useCallback(\n    ({ close }: { close: () => void }) => {\n      return <Menu isLoading={isProcessing || isLoading} onClose={close} />\n    },\n    [isProcessing, isLoading, Menu],\n  )\n\n  // Combine loading states to reduce re-renders\n  const isAnyLoading = isProcessing || isLoading || isJobActive\n\n  const memoizedPopup = useMemo(() => {\n    return (\n      <Popup\n        button={<PluginIcon isLoading={isAnyLoading} />}\n        render={popupRender}\n        verticalAlign=\"bottom\"\n      />\n    )\n  }, [popupRender, isAnyLoading])\n\n  return (\n    <label\n      className={`payloadai-compose__actions ${styles.actions}`}\n      onClick={(e) => e.preventDefault()}\n      role=\"presentation\"\n    >\n      {memoizedPopup}\n      <ActiveComponent\n        isLoading={isProcessing || isLoading || isJobActive}\n        loadingLabel={isJobActive ? (jobStatus === 'running' ? `Video ${Math.max(0, Math.min(100, Math.round(jobProgress ?? 0)))}%` : (jobStatus || 'Queued')) : undefined}\n        stop={stop}\n      />\n      <UndoRedoActions\n        onChange={(val) => {\n          setValue(val)\n          setIfValueIsLexicalState(val)\n        }}\n      />\n    </label>\n  )\n}\n"],"names":["useEditorConfigContext","Popup","useField","React","useCallback","useMemo","useState","useInstructions","setSafeLexicalState","PluginIcon","styles","useMenu","useActiveFieldTracking","useGenerate","UndoRedoActions","Compose","descriptionProps","instructionId","isConfigAllowed","pathFromContext","path","editor","lexicalEditor","openDrawer","isProcessing","setIsProcessing","generate","isJobActive","isLoading","jobProgress","jobStatus","stop","onCompose","console","log","action","catch","reason","error","finally","onExpand","onProofread","onRephrase","onSimplify","onSummarize","onTranslate","data","params","handleOpenSettings","ActiveComponent","Menu","onSettings","undefined","setValue","setIfValueIsLexicalState","val","JSON","stringify","popupRender","close","onClose","isAnyLoading","memoizedPopup","button","render","verticalAlign","label","className","actions","onClick","e","preventDefault","role","loadingLabel","Math","max","min","round","onChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/ui/Compose/Compose.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientField } from 'payload'\nimport type { FC } from 'react'\n\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { Popup, useField } from '@payloadcms/ui'\nimport React, { useCallback, useMemo, useState } from 'react'\n\nimport { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js'\nimport { useInstructions } from '../../providers/InstructionsProvider/useInstructions.js'\nimport { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js'\nimport { PluginIcon } from '../Icons/Icons.js'\nimport styles from './compose.module.css'\nimport { useMenu } from './hooks/menu/useMenu.js'\nimport { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js'\nimport { useGenerate } from './hooks/useGenerate.js'\nimport { UndoRedoActions } from './UndoRedoActions.js'\n\nexport type ComposeProps = {\n  descriptionProps?: {\n    field: ClientField\n    path: string\n    schemaPath: string\n  }\n  forceVisible?: boolean\n  instructionId: string\n  isConfigAllowed: boolean\n}\n\nexport const Compose: FC<ComposeProps> = ({ descriptionProps, forceVisible, instructionId, isConfigAllowed }) => {\n  const pathFromContext = descriptionProps?.path\n  const { editor: lexicalEditor } = useEditorConfigContext()\n  \n  // Get global openDrawer from context\n  const { openDrawer } = useInstructions()\n\n  // Initialize global active-field tracking\n  useActiveFieldTracking()\n\n  const [isProcessing, setIsProcessing] = useState<boolean>(false)\n  const { generate, isJobActive, isLoading, jobProgress, jobStatus, stop } = useGenerate({ instructionId })\n\n  // Memoize menu event handlers to prevent recreation on every render\n  const onCompose = useCallback(() => {\n    console.log('Composing...')\n    setIsProcessing(true)\n    generate({\n      action: 'Compose',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onExpand = useCallback(() => {\n    console.log('Expanding...')\n    generate({\n      action: 'Expand',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onProofread = useCallback(() => {\n    console.log('Proofreading...')\n    generate({\n      action: 'Proofread',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onRephrase = useCallback(() => {\n    console.log('Rephrasing...')\n    generate({\n      action: 'Rephrase',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onSimplify = useCallback(() => {\n    console.log('Simplifying...')\n    generate({\n      action: 'Simplify',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onSummarize = useCallback(() => {\n    console.log('Summarizing...')\n    generate({\n      action: 'Summarize',\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const onTranslate = useCallback((data: unknown) => {\n    console.log('Translating...')\n    generate({\n      action: 'Translate',\n      params: data,\n    })\n      .catch((reason) => {\n        console.error('Compose : ', reason)\n      })\n      .finally(() => {\n        setIsProcessing(false)\n      })\n  }, [generate])\n\n  const handleOpenSettings = useCallback(() => {\n    if (isConfigAllowed) {\n      openDrawer(instructionId)\n    }\n  }, [isConfigAllowed, openDrawer, instructionId])\n\n  const { ActiveComponent, Menu } = useMenu(\n    {\n      onCompose,\n      onExpand,\n      onProofread,\n      onRephrase,\n      onSettings: isConfigAllowed ? handleOpenSettings : undefined,\n      onSimplify,\n      onSummarize,\n      onTranslate,\n    },\n    {\n      isConfigAllowed,\n    },\n  )\n\n  const { setValue } = useField<string>({\n    path: pathFromContext,\n  })\n\n  const setIfValueIsLexicalState = useCallback(\n    (val: any) => {\n      if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {\n        // Pass the object directly to our safe setter which handles validation\n        setSafeLexicalState(val, lexicalEditor)\n      }\n    },\n    [lexicalEditor],\n  )\n\n  const popupRender = useCallback(\n    ({ close }: { close: () => void }) => {\n      return <Menu isLoading={isProcessing || isLoading} onClose={close} />\n    },\n    [isProcessing, isLoading, Menu],\n  )\n\n  // Combine loading states to reduce re-renders\n  const isAnyLoading = isProcessing || isLoading || isJobActive\n\n  const memoizedPopup = useMemo(() => {\n    return (\n      <Popup\n        button={<PluginIcon isLoading={isAnyLoading} />}\n        render={popupRender}\n        verticalAlign=\"bottom\"\n      />\n    )\n  }, [popupRender, isAnyLoading])\n\n  return (\n    <label\n      className={`payloadai-compose__actions ${styles.actions} ${forceVisible ? styles.actionsVisible : ''}`}\n      onClick={(e) => e.preventDefault()}\n      role=\"presentation\"\n    >\n      {memoizedPopup}\n      <ActiveComponent\n        isLoading={isProcessing || isLoading || isJobActive}\n        loadingLabel={isJobActive ? (jobStatus === 'running' ? `Video ${Math.max(0, Math.min(100, Math.round(jobProgress ?? 0)))}%` : (jobStatus || 'Queued')) : undefined}\n        stop={stop}\n      />\n      <UndoRedoActions\n        onChange={(val) => {\n          setValue(val)\n          setIfValueIsLexicalState(val)\n        }}\n      />\n    </label>\n  )\n}\n"],"names":["useEditorConfigContext","Popup","useField","React","useCallback","useMemo","useState","useInstructions","setSafeLexicalState","PluginIcon","styles","useMenu","useActiveFieldTracking","useGenerate","UndoRedoActions","Compose","descriptionProps","forceVisible","instructionId","isConfigAllowed","pathFromContext","path","editor","lexicalEditor","openDrawer","isProcessing","setIsProcessing","generate","isJobActive","isLoading","jobProgress","jobStatus","stop","onCompose","console","log","action","catch","reason","error","finally","onExpand","onProofread","onRephrase","onSimplify","onSummarize","onTranslate","data","params","handleOpenSettings","ActiveComponent","Menu","onSettings","undefined","setValue","setIfValueIsLexicalState","val","popupRender","close","onClose","isAnyLoading","memoizedPopup","button","render","verticalAlign","label","className","actions","actionsVisible","onClick","e","preventDefault","role","loadingLabel","Math","max","min","round","onChange"],"mappings":"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"}

package/dist/ui/Compose/Compose.jsx

@@ -10,7 +10,7 @@ import { useMenu } from './hooks/menu/useMenu.js';
 import { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js';
 import { useGenerate } from './hooks/useGenerate.js';
 import { UndoRedoActions } from './UndoRedoActions.js';
-export const Compose = ({ descriptionProps, instructionId, isConfigAllowed }) => {
+export const Compose = ({ descriptionProps, forceVisible, instructionId, isConfigAllowed }) => {
     const pathFromContext = descriptionProps?.path;
     const { editor: lexicalEditor } = useEditorConfigContext();
     // Get global openDrawer from context
@@ -128,10 +128,10 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed }) =>
     });
     const setIfValueIsLexicalState = useCallback((val) => {
         if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {
-            setSafeLexicalState(JSON.stringify(val), lexicalEditor);
+            // Pass the object directly to our safe setter which handles validation
+            setSafeLexicalState(val, lexicalEditor);
         }
-        // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo - revisit
-    }, []);
+    }, [lexicalEditor]);
     const popupRender = useCallback(({ close }) => {
         return <Menu isLoading={isProcessing || isLoading} onClose={close}/>;
     }, [isProcessing, isLoading, Menu]);
@@ -140,7 +140,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed }) =>
     const memoizedPopup = useMemo(() => {
         return (<Popup button={<PluginIcon isLoading={isAnyLoading}/>} render={popupRender} verticalAlign="bottom"/>);
     }, [popupRender, isAnyLoading]);
-    return (<label className={`payloadai-compose__actions ${styles.actions}`} onClick={(e) => e.preventDefault()} role="presentation">
+    return (<label className={`payloadai-compose__actions ${styles.actions} ${forceVisible ? styles.actionsVisible : ''}`} onClick={(e) => e.preventDefault()} role="presentation">
       {memoizedPopup}
       <ActiveComponent isLoading={isProcessing || isLoading || isJobActive} loadingLabel={isJobActive ? (jobStatus === 'running' ? `Video ${Math.max(0, Math.min(100, Math.round(jobProgress ?? 0)))}%` : (jobStatus || 'Queued')) : undefined} stop={stop}/>
       <UndoRedoActions onChange={(val) => {

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,7 +20,8 @@ export const UndoRedoActions = ({ onChange })=>{
             onChange(value);
         }
     }, [
-        undo
+        undo,
+        onChange
     ]);
     // Delay rendering until the client-side hydration is complete
     const [isMounted, setIsMounted] = useState(false);
@@ -53,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;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"}
+{"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,14 +8,14 @@ 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(() => {
@@ -32,4 +32,5 @@ export const UndoRedoActions = ({ onChange }) => {
         Redo
       </button>
     </React.Fragment>);
-};
+});
+UndoRedoActions.displayName = 'UndoRedoActions';

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

@@ -13,10 +13,6 @@
   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

@@ -5,7 +5,8 @@ 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 { 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"}
+{"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"}