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

package/dist/ui/DynamicProviderSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/DynamicProviderSelect/index.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput, useField } from '@payloadcms/ui'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { allProviderBlocks } from '../../ai/providers/blocks/index.js'\n\ntype Props = {\n  name: string\n  path: string\n}\n\nexport const DynamicProviderSelect: React.FC<Props> = (props) => {\n  const { name, path } = props\n\n  const { setValue, value } = useField<string>({ path })\n\n  // State to hold fetched providers data\n  const [providersData, setProvidersData] = useState<any[]>([])\n\n  // Fetch AI Settings global to get configured providers\n  useEffect(() => {\n    const fetchSettings = async () => {\n      try {\n        const response = await fetch('/api/globals/ai-settings?depth=1')\n        if (response.ok) {\n          const data = await response.json()\n          if (data && data.providers) {\n            setProvidersData(data.providers)\n          }\n        }\n      } catch (error) {\n        console.error('Error fetching AI settings:', error)\n      }\n    }\n\n    void fetchSettings()\n  }, [])\n\n  const options = useMemo(() => {\n    const optionsList: { label: string; value: string }[] = []\n    const processedProviders = new Set<string>()\n\n    // Iterate through fetched providers to find custom names\n    providersData.forEach((provider: any) => {\n      if (!provider.enabled) {\n        return\n      }\n\n      const blockType = provider.blockType\n      const customName = provider.providerName\n\n      // Get static label as fallback\n      const staticBlock = allProviderBlocks.find((b) => b.slug === blockType)\n      const staticLabel = staticBlock?.labels?.singular\n        ? typeof staticBlock.labels.singular === 'string'\n          ? staticBlock.labels.singular\n          : blockType\n        : blockType\n\n      const label = customName || staticLabel\n\n      if (!processedProviders.has(blockType)) {\n        optionsList.push({\n          label,\n          value: blockType,\n        })\n        processedProviders.add(blockType)\n      } else if (customName) {\n        // Update existing label if custom name is available\n        const existingOpt = optionsList.find((o) => o.value === blockType)\n        if (existingOpt && existingOpt.label === staticLabel) {\n          existingOpt.label = customName\n        }\n      }\n    })\n\n    // Add any other available providers from blocks that might not be configured yet?\n    // Usually we only want to show configured providers in the selection list.\n    // But for standard providers (OpenAI, Google), they might not need much config other than API key.\n    // If they are not in the list, user can't select them.\n    // However, if they are not enabled in settings, maybe we shouldn't show them?\n    // Let's stick to showing all available blocks, but prioritizing configured ones with custom names.\n\n    allProviderBlocks.forEach((block) => {\n      if (!processedProviders.has(block.slug)) {\n        optionsList.push({\n          label: typeof block.labels?.singular === 'string' ? block.labels.singular : block.slug,\n          value: block.slug,\n        })\n      }\n    })\n\n    return optionsList\n  }, [providersData])\n\n  return (\n    <div className=\"field-type select\">\n      <label className=\"field-label\" htmlFor={path}>\n        Provider\n      </label>\n      <SelectInput\n        name={name}\n        onChange={(option) => {\n          if (option && typeof option === 'object' && 'value' in option) {\n            setValue(option.value)\n          } else {\n            setValue(option)\n          }\n        }}\n        options={options as any}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n"],"names":["SelectInput","useField","React","useEffect","useMemo","useState","allProviderBlocks","DynamicProviderSelect","props","name","path","setValue","value","providersData","setProvidersData","fetchSettings","response","fetch","ok","data","json","providers","error","console","options","optionsList","processedProviders","Set","forEach","provider","enabled","blockType","customName","providerName","staticBlock","find","b","slug","staticLabel","labels","singular","label","has","push","add","existingOpt","o","block","div","className","htmlFor","onChange","option"],"mappings":"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"}

package/dist/ui/DynamicProviderSelect/index.jsx

@@ -0,0 +1,90 @@
+'use client';
+import { SelectInput, useField } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { allProviderBlocks } from '../../ai/providers/blocks/index.js';
+export const DynamicProviderSelect = (props) => {
+    const { name, path } = props;
+    const { setValue, value } = useField({ path });
+    // State to hold fetched providers data
+    const [providersData, setProvidersData] = useState([]);
+    // Fetch AI Settings global to get configured providers
+    useEffect(() => {
+        const fetchSettings = async () => {
+            try {
+                const response = await fetch('/api/globals/ai-settings?depth=1');
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data && data.providers) {
+                        setProvidersData(data.providers);
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Error fetching AI settings:', error);
+            }
+        };
+        void fetchSettings();
+    }, []);
+    const options = useMemo(() => {
+        const optionsList = [];
+        const processedProviders = new Set();
+        // Iterate through fetched providers to find custom names
+        providersData.forEach((provider) => {
+            if (!provider.enabled) {
+                return;
+            }
+            const blockType = provider.blockType;
+            const customName = provider.providerName;
+            // Get static label as fallback
+            const staticBlock = allProviderBlocks.find((b) => b.slug === blockType);
+            const staticLabel = staticBlock?.labels?.singular
+                ? typeof staticBlock.labels.singular === 'string'
+                    ? staticBlock.labels.singular
+                    : blockType
+                : blockType;
+            const label = customName || staticLabel;
+            if (!processedProviders.has(blockType)) {
+                optionsList.push({
+                    label,
+                    value: blockType,
+                });
+                processedProviders.add(blockType);
+            }
+            else if (customName) {
+                // Update existing label if custom name is available
+                const existingOpt = optionsList.find((o) => o.value === blockType);
+                if (existingOpt && existingOpt.label === staticLabel) {
+                    existingOpt.label = customName;
+                }
+            }
+        });
+        // Add any other available providers from blocks that might not be configured yet?
+        // Usually we only want to show configured providers in the selection list.
+        // But for standard providers (OpenAI, Google), they might not need much config other than API key.
+        // If they are not in the list, user can't select them.
+        // However, if they are not enabled in settings, maybe we shouldn't show them?
+        // Let's stick to showing all available blocks, but prioritizing configured ones with custom names.
+        allProviderBlocks.forEach((block) => {
+            if (!processedProviders.has(block.slug)) {
+                optionsList.push({
+                    label: typeof block.labels?.singular === 'string' ? block.labels.singular : block.slug,
+                    value: block.slug,
+                });
+            }
+        });
+        return optionsList;
+    }, [providersData]);
+    return (<div className="field-type select">
+      <label className="field-label" htmlFor={path}>
+        Provider
+      </label>
+      <SelectInput name={name} onChange={(option) => {
+            if (option && typeof option === 'object' && 'value' in option) {
+                setValue(option.value);
+            }
+            else {
+                setValue(option);
+            }
+        }} options={options} path={path} value={value}/>
+    </div>);
+};

package/dist/ui/DynamicVoiceSelect/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    name: string;
+    path: string;
+};
+export declare const DynamicVoiceSelect: React.FC<Props>;
+export {};

package/dist/ui/DynamicVoiceSelect/index.js

@@ -0,0 +1,156 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+export const DynamicVoiceSelect = (props)=>{
+    const { name, path } = props;
+    // Get provider from siblings
+    const parentPath = path.split('.').slice(0, -1).join('.');
+    const providerPath = `${parentPath}.provider`;
+    // Use useFormFields to get the provider field value - this will re-render when provider changes
+    const providerField = useFormFields(([fields])=>fields[providerPath]);
+    const provider = providerField?.value || '';
+    const { setValue, value } = useField({
+        path
+    });
+    const [aiSettings, setAiSettings] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    // Fetch AI Settings - re-fetch when provider changes to ensure we have latest voices
+    useEffect(()=>{
+        const fetchSettings = async ()=>{
+            setIsLoading(true);
+            try {
+                const response = await fetch('/api/globals/ai-settings?depth=1');
+                if (response.ok) {
+                    const data = await response.json();
+                    setAiSettings(data);
+                }
+            } catch (err) {
+                console.error('Error fetching AI settings:', err);
+            } finally{
+                setIsLoading(false);
+            }
+        };
+        void fetchSettings();
+    }, [
+        provider
+    ]) // Re-fetch when provider changes to ensure we have the latest voices
+    ;
+    const voices = useMemo(()=>{
+        if (!provider || !aiSettings?.providers) {
+            return [];
+        }
+        // Find the provider block matching the selected provider
+        const providerBlock = aiSettings.providers.find((p)=>p.blockType === provider && p.enabled !== false);
+        if (!providerBlock?.voices) {
+            return [];
+        }
+        // Get enabled voices from provider block
+        return providerBlock.voices.filter((v)=>v.enabled !== false).map((v)=>({
+                label: v.name || v.id,
+                value: v.id
+            }));
+    }, [
+        provider,
+        aiSettings
+    ]);
+    // Clear voice selection when provider changes and current voice is not available
+    useEffect(()=>{
+        if (value && voices.length > 0) {
+            const voiceExists = voices.some((v)=>v.value === value);
+            if (!voiceExists) {
+                setValue('');
+            }
+        }
+    }, [
+        voices,
+        value,
+        setValue
+    ]);
+    if (!provider) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type text",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: path,
+                    children: "Voice"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-elevation-600)',
+                        fontSize: '13px'
+                    },
+                    children: "Please select a provider first."
+                })
+            ]
+        });
+    }
+    if (isLoading) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type text",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: path,
+                    children: "Voice"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-elevation-600)',
+                        fontSize: '13px'
+                    },
+                    children: "Loading voices..."
+                })
+            ]
+        });
+    }
+    if (voices.length === 0) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "field-type text",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    className: "field-label",
+                    htmlFor: path,
+                    children: "Voice"
+                }),
+                /*#__PURE__*/ _jsxs("p", {
+                    style: {
+                        color: 'var(--theme-elevation-600)',
+                        fontSize: '13px'
+                    },
+                    children: [
+                        "No voices available. Please configure voices in AI Settings for ",
+                        provider,
+                        "."
+                    ]
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type select",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: "field-label",
+                htmlFor: path,
+                children: "Voice"
+            }),
+            /*#__PURE__*/ _jsx(SelectInput, {
+                name: name,
+                onChange: (option)=>{
+                    if (option && typeof option === 'object' && 'value' in option) {
+                        setValue(option.value);
+                    } else {
+                        setValue(option);
+                    }
+                },
+                options: voices,
+                path: path,
+                value: value
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/ui/DynamicVoiceSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/DynamicVoiceSelect/index.tsx"],"sourcesContent":["'use client'\n\nimport { SelectInput, useField, useFormFields } from '@payloadcms/ui'\nimport React, { useEffect, useMemo, useState } from 'react'\n\ntype Props = {\n  name: string\n  path: string\n}\n\ninterface Voice {\n  category?: string\n  enabled?: boolean\n  id: string\n  labels?: Record<string, unknown>\n  name: string\n  preview_url?: string\n}\n\ninterface ProviderBlock {\n  blockType: string\n  enabled?: boolean\n  voices?: Voice[]\n}\n\nexport const DynamicVoiceSelect: React.FC<Props> = (props) => {\n  const { name, path } = props\n\n  // Get provider from siblings\n  const parentPath = path.split('.').slice(0, -1).join('.')\n  const providerPath = `${parentPath}.provider`\n\n  // Use useFormFields to get the provider field value - this will re-render when provider changes\n  const providerField = useFormFields(([fields]) => fields[providerPath])\n  const provider = (providerField?.value as string) || ''\n\n  const { setValue, value } = useField<string>({ path })\n  const [aiSettings, setAiSettings] = useState<{ providers?: ProviderBlock[] } | null>(null)\n  const [isLoading, setIsLoading] = useState(true)\n\n  // Fetch AI Settings - re-fetch when provider changes to ensure we have latest voices\n  useEffect(() => {\n    const fetchSettings = async () => {\n      setIsLoading(true)\n      try {\n        const response = await fetch('/api/globals/ai-settings?depth=1')\n        if (response.ok) {\n          const data = await response.json()\n          setAiSettings(data)\n        }\n      } catch (err) {\n        console.error('Error fetching AI settings:', err)\n      } finally {\n        setIsLoading(false)\n      }\n    }\n\n    void fetchSettings()\n  }, [provider]) // Re-fetch when provider changes to ensure we have the latest voices\n\n  const voices = useMemo(() => {\n    if (!provider || !aiSettings?.providers) {\n      return []\n    }\n\n    // Find the provider block matching the selected provider\n    const providerBlock = aiSettings.providers.find(\n      (p: ProviderBlock) => p.blockType === provider && p.enabled !== false,\n    )\n\n    if (!providerBlock?.voices) {\n      return []\n    }\n\n    // Get enabled voices from provider block\n    return providerBlock.voices\n      .filter((v: Voice) => v.enabled !== false)\n      .map((v: Voice) => ({\n        label: v.name || v.id,\n        value: v.id,\n      }))\n  }, [provider, aiSettings])\n\n  // Clear voice selection when provider changes and current voice is not available\n  useEffect(() => {\n    if (value && voices.length > 0) {\n      const voiceExists = voices.some((v) => v.value === value)\n      if (!voiceExists) {\n        setValue('')\n      }\n    }\n  }, [voices, value, setValue])\n\n  if (!provider) {\n    return (\n      <div className=\"field-type text\">\n        <label className=\"field-label\" htmlFor={path}>\n          Voice\n        </label>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>\n          Please select a provider first.\n        </p>\n      </div>\n    )\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"field-type text\">\n        <label className=\"field-label\" htmlFor={path}>\n          Voice\n        </label>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>Loading voices...</p>\n      </div>\n    )\n  }\n\n  if (voices.length === 0) {\n    return (\n      <div className=\"field-type text\">\n        <label className=\"field-label\" htmlFor={path}>\n          Voice\n        </label>\n        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>\n          No voices available. Please configure voices in AI Settings for {provider}.\n        </p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"field-type select\">\n      <label className=\"field-label\" htmlFor={path}>\n        Voice\n      </label>\n      <SelectInput\n        name={name}\n        onChange={(option) => {\n          if (option && typeof option === 'object' && 'value' in option) {\n            setValue(option.value as string)\n          } else {\n            setValue(option)\n          }\n        }}\n        options={voices}\n        path={path}\n        value={value}\n      />\n    </div>\n  )\n}\n\n"],"names":["SelectInput","useField","useFormFields","React","useEffect","useMemo","useState","DynamicVoiceSelect","props","name","path","parentPath","split","slice","join","providerPath","providerField","fields","provider","value","setValue","aiSettings","setAiSettings","isLoading","setIsLoading","fetchSettings","response","fetch","ok","data","json","err","console","error","voices","providers","providerBlock","find","p","blockType","enabled","filter","v","map","label","id","length","voiceExists","some","div","className","htmlFor","style","color","fontSize","onChange","option","options"],"mappings":"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"}

package/dist/ui/DynamicVoiceSelect/index.jsx

@@ -0,0 +1,102 @@
+'use client';
+import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+export const DynamicVoiceSelect = (props) => {
+    const { name, path } = props;
+    // Get provider from siblings
+    const parentPath = path.split('.').slice(0, -1).join('.');
+    const providerPath = `${parentPath}.provider`;
+    // Use useFormFields to get the provider field value - this will re-render when provider changes
+    const providerField = useFormFields(([fields]) => fields[providerPath]);
+    const provider = providerField?.value || '';
+    const { setValue, value } = useField({ path });
+    const [aiSettings, setAiSettings] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    // Fetch AI Settings - re-fetch when provider changes to ensure we have latest voices
+    useEffect(() => {
+        const fetchSettings = async () => {
+            setIsLoading(true);
+            try {
+                const response = await fetch('/api/globals/ai-settings?depth=1');
+                if (response.ok) {
+                    const data = await response.json();
+                    setAiSettings(data);
+                }
+            }
+            catch (err) {
+                console.error('Error fetching AI settings:', err);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        void fetchSettings();
+    }, [provider]); // Re-fetch when provider changes to ensure we have the latest voices
+    const voices = useMemo(() => {
+        if (!provider || !aiSettings?.providers) {
+            return [];
+        }
+        // Find the provider block matching the selected provider
+        const providerBlock = aiSettings.providers.find((p) => p.blockType === provider && p.enabled !== false);
+        if (!providerBlock?.voices) {
+            return [];
+        }
+        // Get enabled voices from provider block
+        return providerBlock.voices
+            .filter((v) => v.enabled !== false)
+            .map((v) => ({
+            label: v.name || v.id,
+            value: v.id,
+        }));
+    }, [provider, aiSettings]);
+    // Clear voice selection when provider changes and current voice is not available
+    useEffect(() => {
+        if (value && voices.length > 0) {
+            const voiceExists = voices.some((v) => v.value === value);
+            if (!voiceExists) {
+                setValue('');
+            }
+        }
+    }, [voices, value, setValue]);
+    if (!provider) {
+        return (<div className="field-type text">
+        <label className="field-label" htmlFor={path}>
+          Voice
+        </label>
+        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>
+          Please select a provider first.
+        </p>
+      </div>);
+    }
+    if (isLoading) {
+        return (<div className="field-type text">
+        <label className="field-label" htmlFor={path}>
+          Voice
+        </label>
+        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>Loading voices...</p>
+      </div>);
+    }
+    if (voices.length === 0) {
+        return (<div className="field-type text">
+        <label className="field-label" htmlFor={path}>
+          Voice
+        </label>
+        <p style={{ color: 'var(--theme-elevation-600)', fontSize: '13px' }}>
+          No voices available. Please configure voices in AI Settings for {provider}.
+        </p>
+      </div>);
+    }
+    return (<div className="field-type select">
+      <label className="field-label" htmlFor={path}>
+        Voice
+      </label>
+      <SelectInput name={name} onChange={(option) => {
+            if (option && typeof option === 'object' && 'value' in option) {
+                setValue(option.value);
+            }
+            else {
+                setValue(option);
+            }
+        }} options={voices} path={path} value={value}/>
+    </div>);
+};

package/dist/ui/EncryptedTextField/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    label?: string;
+    path: string;
+    required?: boolean;
+};
+export declare const EncryptedTextField: React.FC<Props>;
+export {};

package/dist/ui/EncryptedTextField/index.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from '@payloadcms/ui';
+import React, { useState } from 'react';
+export const EncryptedTextField = ({ label, path, required })=>{
+    const { setValue, value } = useField({
+        path
+    });
+    const [isEditing, setIsEditing] = useState(!value);
+    const isMasked = typeof value === 'string' && value.startsWith('sk-') && value.includes('****');
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type text",
+        children: [
+            /*#__PURE__*/ _jsxs("label", {
+                className: "field-label",
+                children: [
+                    label || 'API Key',
+                    required && /*#__PURE__*/ _jsx("span", {
+                        className: "required",
+                        children: "*"
+                    })
+                ]
+            }),
+            !isEditing && isMasked ? /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    alignItems: 'center',
+                    display: 'flex',
+                    gap: '10px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            background: 'var(--theme-elevation-100)',
+                            borderRadius: '4px',
+                            flexGrow: 1,
+                            fontFamily: 'monospace',
+                            padding: '8px 12px'
+                        },
+                        children: [
+                            value,
+                            /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    color: 'var(--theme-success-500)',
+                                    fontSize: '0.8em',
+                                    marginLeft: '10px'
+                                },
+                                children: "✓ Configured"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: "btn btn--style-secondary btn--size-small",
+                        onClick: ()=>{
+                            setValue('');
+                            setIsEditing(true);
+                        },
+                        type: "button",
+                        children: "Change"
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsx("input", {
+                onChange: (e)=>setValue(e.target.value),
+                placeholder: "sk-...",
+                style: {
+                    width: '100%'
+                },
+                type: "password",
+                value: value || ''
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/ui/EncryptedTextField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/EncryptedTextField/index.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport React, { useState } from 'react'\n\ntype Props = {\n  label?: string\n  path: string\n  required?: boolean\n}\n\nexport const EncryptedTextField: React.FC<Props> = ({ label, path, required }) => {\n  const { setValue, value } = useField<string>({ path })\n  const [isEditing, setIsEditing] = useState(!value)\n\n  const isMasked = typeof value === 'string' && value.startsWith('sk-') && value.includes('****')\n\n  return (\n    <div className=\"field-type text\">\n      <label className=\"field-label\">\n        {label || 'API Key'}\n        {required && <span className=\"required\">*</span>}\n      </label>\n\n      {!isEditing && isMasked ? (\n        <div style={{ alignItems: 'center', display: 'flex', gap: '10px' }}>\n          <div\n            style={{\n              background: 'var(--theme-elevation-100)',\n              borderRadius: '4px',\n              flexGrow: 1,\n              fontFamily: 'monospace',\n              padding: '8px 12px',\n            }}\n          >\n            {value}\n            <span\n              style={{ color: 'var(--theme-success-500)', fontSize: '0.8em', marginLeft: '10px' }}\n            >\n              ✓ Configured\n            </span>\n          </div>\n          <button\n            className=\"btn btn--style-secondary btn--size-small\"\n            onClick={() => {\n              setValue('')\n              setIsEditing(true)\n            }}\n            type=\"button\"\n          >\n            Change\n          </button>\n        </div>\n      ) : (\n        <input\n          onChange={(e) => setValue(e.target.value)}\n          placeholder=\"sk-...\"\n          style={{ width: '100%' }}\n          type=\"password\"\n          value={value || ''}\n        />\n      )}\n    </div>\n  )\n}\n"],"names":["useField","React","useState","EncryptedTextField","label","path","required","setValue","value","isEditing","setIsEditing","isMasked","startsWith","includes","div","className","span","style","alignItems","display","gap","background","borderRadius","flexGrow","fontFamily","padding","color","fontSize","marginLeft","button","onClick","type","input","onChange","e","target","placeholder","width"],"mappings":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAgB;AACzC,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAQvC,OAAO,MAAMC,qBAAsC,CAAC,EAAEC,KAAK,EAAEC,IAAI,EAAEC,QAAQ,EAAE;IAC3E,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGR,SAAiB;QAAEK;IAAK;IACpD,MAAM,CAACI,WAAWC,aAAa,GAAGR,SAAS,CAACM;IAE5C,MAAMG,WAAW,OAAOH,UAAU,YAAYA,MAAMI,UAAU,CAAC,UAAUJ,MAAMK,QAAQ,CAAC;IAExF,qBACE,MAACC;QAAIC,WAAU;;0BACb,MAACX;gBAAMW,WAAU;;oBACdX,SAAS;oBACTE,0BAAY,KAACU;wBAAKD,WAAU;kCAAW;;;;YAGzC,CAACN,aAAaE,yBACb,MAACG;gBAAIG,OAAO;oBAAEC,YAAY;oBAAUC,SAAS;oBAAQC,KAAK;gBAAO;;kCAC/D,MAACN;wBACCG,OAAO;4BACLI,YAAY;4BACZC,cAAc;4BACdC,UAAU;4BACVC,YAAY;4BACZC,SAAS;wBACX;;4BAECjB;0CACD,KAACQ;gCACCC,OAAO;oCAAES,OAAO;oCAA4BC,UAAU;oCAASC,YAAY;gCAAO;0CACnF;;;;kCAIH,KAACC;wBACCd,WAAU;wBACVe,SAAS;4BACPvB,SAAS;4BACTG,aAAa;wBACf;wBACAqB,MAAK;kCACN;;;+BAKH,KAACC;gBACCC,UAAU,CAACC,IAAM3B,SAAS2B,EAAEC,MAAM,CAAC3B,KAAK;gBACxC4B,aAAY;gBACZnB,OAAO;oBAAEoB,OAAO;gBAAO;gBACvBN,MAAK;gBACLvB,OAAOA,SAAS;;;;AAK1B,EAAC"}

package/dist/ui/EncryptedTextField/index.jsx

@@ -0,0 +1,35 @@
+'use client';
+import { useField } from '@payloadcms/ui';
+import React, { useState } from 'react';
+export const EncryptedTextField = ({ label, path, required }) => {
+    const { setValue, value } = useField({ path });
+    const [isEditing, setIsEditing] = useState(!value);
+    const isMasked = typeof value === 'string' && value.startsWith('sk-') && value.includes('****');
+    return (<div className="field-type text">
+      <label className="field-label">
+        {label || 'API Key'}
+        {required && <span className="required">*</span>}
+      </label>
+
+      {!isEditing && isMasked ? (<div style={{ alignItems: 'center', display: 'flex', gap: '10px' }}>
+          <div style={{
+                background: 'var(--theme-elevation-100)',
+                borderRadius: '4px',
+                flexGrow: 1,
+                fontFamily: 'monospace',
+                padding: '8px 12px',
+            }}>
+            {value}
+            <span style={{ color: 'var(--theme-success-500)', fontSize: '0.8em', marginLeft: '10px' }}>
+              ✓ Configured
+            </span>
+          </div>
+          <button className="btn btn--style-secondary btn--size-small" onClick={() => {
+                setValue('');
+                setIsEditing(true);
+            }} type="button">
+            Change
+          </button>
+        </div>) : (<input onChange={(e) => setValue(e.target.value)} placeholder="sk-..." style={{ width: '100%' }} type="password" value={value || ''}/>)}
+    </div>);
+};

package/dist/ui/Icons/LottieAnimation.js

@@ -7,7 +7,9 @@ const LottieAnimation = ({ isLoading = false })=>{
     const [animations, setAnimations] = useState([]);
     useEffect(()=>{
         const svg = svgRef.current;
-        if (!svg) return;
+        if (!svg) {
+            return;
+        }
         const animateTransform = (element, keyframes)=>{
             const animation = element.animate(keyframes, {
                 direction: 'alternate',

package/dist/ui/Icons/LottieAnimation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/Icons/LottieAnimation.tsx"],"sourcesContent":["// @ts-nocheck\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport styles from './icons.module.css'\n\nconst LottieAnimation = ({ isLoading = false }) => {\n  const svgRef = useRef(null)\n  const [animations, setAnimations] = useState([])\n\n  useEffect(() => {\n    const svg = svgRef.current\n    if (!svg) return\n\n    const animateTransform = (element, keyframes) => {\n      const animation = element.animate(keyframes, {\n        direction: 'alternate',\n        duration: 1000,\n        easing: 'ease-in-out',\n        iterations: Infinity,\n      })\n      return animation\n    }\n\n    // Animate Group 2 (Rectangle)\n    const rectangle = svg.querySelector('#group2')\n    const rectangleAnimation = animateTransform(rectangle, [\n      { transform: 'translate(0, 0) scale(1)' },\n      { transform: 'translate(0, 0) scale(2.54)' },\n      { transform: 'translate(0, 0) scale(1)' },\n    ])\n\n    // Animate Group 3 (Triangle)\n    const triangle = svg.querySelector('#group3')\n    const triangleAnimation = animateTransform(triangle, [\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n      { transform: 'translate(-70px, 73px) scale(0.36)' },\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n    ])\n\n    setAnimations([rectangleAnimation, triangleAnimation])\n\n    // Clean up animations on unmount\n    return () => {\n      rectangleAnimation.cancel()\n      triangleAnimation.cancel()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isLoading) {\n      animations.forEach((animation) => animation.play())\n    } else {\n      animations.forEach((animation) => animation.pause())\n    }\n  }, [isLoading, animations])\n\n  return (\n    <span\n      style={{\n        left: '3px',\n        position: 'relative',\n        top: '-6px',\n      }}\n    >\n      <svg height=\"41\" ref={svgRef} viewBox=\"-250 -250 500 500\" width=\"41\">\n        <g id=\"group2\">\n          <rect className={styles.color_fill} height=\"41\" width=\"41\" x=\"-20.5\" y=\"-20.5\" />\n        </g>\n        <g id=\"group3\">\n          <path className={styles.color_fill} d=\"M48.5 57.5L48.5 -57.5L-49.5 -1.093L48.5 57.5Z\" />\n        </g>\n      </svg>\n    </span>\n  )\n}\n\nexport default LottieAnimation\n"],"names":["React","useEffect","useRef","useState","styles","LottieAnimation","isLoading","svgRef","animations","setAnimations","svg","current","animateTransform","element","keyframes","animation","animate","direction","duration","easing","iterations","Infinity","rectangle","querySelector","rectangleAnimation","transform","triangle","triangleAnimation","cancel","forEach","play","pause","span","style","left","position","top","height","ref","viewBox","width","g","id","rect","className","color_fill","x","y","path","d"],"mappings":"AAAA,cAAc;;AAEd,OAAOA,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAE1D,OAAOC,YAAY,qBAAoB;AAEvC,MAAMC,kBAAkB,CAAC,EAAEC,YAAY,KAAK,EAAE;IAC5C,MAAMC,SAASL,OAAO;IACtB,MAAM,CAACM,YAAYC,cAAc,GAAGN,SAAS,EAAE;IAE/CF,UAAU;QACR,MAAMS,MAAMH,OAAOI,OAAO;QAC1B,IAAI,CAACD,KAAK;QAEV,MAAME,mBAAmB,CAACC,SAASC;YACjC,MAAMC,YAAYF,QAAQG,OAAO,CAACF,WAAW;gBAC3CG,WAAW;gBACXC,UAAU;gBACVC,QAAQ;gBACRC,YAAYC;YACd;YACA,OAAON;QACT;QAEA,8BAA8B;QAC9B,MAAMO,YAAYZ,IAAIa,aAAa,CAAC;QACpC,MAAMC,qBAAqBZ,iBAAiBU,WAAW;YACrD;gBAAEG,WAAW;YAA2B;YACxC;gBAAEA,WAAW;YAA8B;YAC3C;gBAAEA,WAAW;YAA2B;SACzC;QAED,6BAA6B;QAC7B,MAAMC,WAAWhB,IAAIa,aAAa,CAAC;QACnC,MAAMI,oBAAoBf,iBAAiBc,UAAU;YACnD;gBAAED,WAAW;YAAsC;YACnD;gBAAEA,WAAW;YAAqC;YAClD;gBAAEA,WAAW;YAAsC;SACpD;QAEDhB,cAAc;YAACe;YAAoBG;SAAkB;QAErD,iCAAiC;QACjC,OAAO;YACLH,mBAAmBI,MAAM;YACzBD,kBAAkBC,MAAM;QAC1B;IACF,GAAG,EAAE;IAEL3B,UAAU;QACR,IAAIK,WAAW;YACbE,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUe,IAAI;QAClD,OAAO;YACLtB,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUgB,KAAK;QACnD;IACF,GAAG;QAACzB;QAAWE;KAAW;IAE1B,qBACE,KAACwB;QACCC,OAAO;YACLC,MAAM;YACNC,UAAU;YACVC,KAAK;QACP;kBAEA,cAAA,MAAC1B;YAAI2B,QAAO;YAAKC,KAAK/B;YAAQgC,SAAQ;YAAoBC,OAAM;;8BAC9D,KAACC;oBAAEC,IAAG;8BACJ,cAAA,KAACC;wBAAKC,WAAWxC,OAAOyC,UAAU;wBAAER,QAAO;wBAAKG,OAAM;wBAAKM,GAAE;wBAAQC,GAAE;;;8BAEzE,KAACN;oBAAEC,IAAG;8BACJ,cAAA,KAACM;wBAAKJ,WAAWxC,OAAOyC,UAAU;wBAAEI,GAAE;;;;;;AAKhD;AAEA,eAAe5C,gBAAe"}
+{"version":3,"sources":["../../../src/ui/Icons/LottieAnimation.tsx"],"sourcesContent":["// @ts-nocheck\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport styles from './icons.module.css'\n\nconst LottieAnimation = ({ isLoading = false }) => {\n  const svgRef = useRef(null)\n  const [animations, setAnimations] = useState([])\n\n  useEffect(() => {\n    const svg = svgRef.current\n    if (!svg) {return}\n\n    const animateTransform = (element, keyframes) => {\n      const animation = element.animate(keyframes, {\n        direction: 'alternate',\n        duration: 1000,\n        easing: 'ease-in-out',\n        iterations: Infinity,\n      })\n      return animation\n    }\n\n    // Animate Group 2 (Rectangle)\n    const rectangle = svg.querySelector('#group2')\n    const rectangleAnimation = animateTransform(rectangle, [\n      { transform: 'translate(0, 0) scale(1)' },\n      { transform: 'translate(0, 0) scale(2.54)' },\n      { transform: 'translate(0, 0) scale(1)' },\n    ])\n\n    // Animate Group 3 (Triangle)\n    const triangle = svg.querySelector('#group3')\n    const triangleAnimation = animateTransform(triangle, [\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n      { transform: 'translate(-70px, 73px) scale(0.36)' },\n      { transform: 'translate(-69.5px, 77.5px) scale(1)' },\n    ])\n\n    setAnimations([rectangleAnimation, triangleAnimation])\n\n    // Clean up animations on unmount\n    return () => {\n      rectangleAnimation.cancel()\n      triangleAnimation.cancel()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isLoading) {\n      animations.forEach((animation) => animation.play())\n    } else {\n      animations.forEach((animation) => animation.pause())\n    }\n  }, [isLoading, animations])\n\n  return (\n    <span\n      style={{\n        left: '3px',\n        position: 'relative',\n        top: '-6px',\n      }}\n    >\n      <svg height=\"41\" ref={svgRef} viewBox=\"-250 -250 500 500\" width=\"41\">\n        <g id=\"group2\">\n          <rect className={styles.color_fill} height=\"41\" width=\"41\" x=\"-20.5\" y=\"-20.5\" />\n        </g>\n        <g id=\"group3\">\n          <path className={styles.color_fill} d=\"M48.5 57.5L48.5 -57.5L-49.5 -1.093L48.5 57.5Z\" />\n        </g>\n      </svg>\n    </span>\n  )\n}\n\nexport default LottieAnimation\n"],"names":["React","useEffect","useRef","useState","styles","LottieAnimation","isLoading","svgRef","animations","setAnimations","svg","current","animateTransform","element","keyframes","animation","animate","direction","duration","easing","iterations","Infinity","rectangle","querySelector","rectangleAnimation","transform","triangle","triangleAnimation","cancel","forEach","play","pause","span","style","left","position","top","height","ref","viewBox","width","g","id","rect","className","color_fill","x","y","path","d"],"mappings":"AAAA,cAAc;;AAEd,OAAOA,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAE1D,OAAOC,YAAY,qBAAoB;AAEvC,MAAMC,kBAAkB,CAAC,EAAEC,YAAY,KAAK,EAAE;IAC5C,MAAMC,SAASL,OAAO;IACtB,MAAM,CAACM,YAAYC,cAAc,GAAGN,SAAS,EAAE;IAE/CF,UAAU;QACR,MAAMS,MAAMH,OAAOI,OAAO;QAC1B,IAAI,CAACD,KAAK;YAAC;QAAM;QAEjB,MAAME,mBAAmB,CAACC,SAASC;YACjC,MAAMC,YAAYF,QAAQG,OAAO,CAACF,WAAW;gBAC3CG,WAAW;gBACXC,UAAU;gBACVC,QAAQ;gBACRC,YAAYC;YACd;YACA,OAAON;QACT;QAEA,8BAA8B;QAC9B,MAAMO,YAAYZ,IAAIa,aAAa,CAAC;QACpC,MAAMC,qBAAqBZ,iBAAiBU,WAAW;YACrD;gBAAEG,WAAW;YAA2B;YACxC;gBAAEA,WAAW;YAA8B;YAC3C;gBAAEA,WAAW;YAA2B;SACzC;QAED,6BAA6B;QAC7B,MAAMC,WAAWhB,IAAIa,aAAa,CAAC;QACnC,MAAMI,oBAAoBf,iBAAiBc,UAAU;YACnD;gBAAED,WAAW;YAAsC;YACnD;gBAAEA,WAAW;YAAqC;YAClD;gBAAEA,WAAW;YAAsC;SACpD;QAEDhB,cAAc;YAACe;YAAoBG;SAAkB;QAErD,iCAAiC;QACjC,OAAO;YACLH,mBAAmBI,MAAM;YACzBD,kBAAkBC,MAAM;QAC1B;IACF,GAAG,EAAE;IAEL3B,UAAU;QACR,IAAIK,WAAW;YACbE,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUe,IAAI;QAClD,OAAO;YACLtB,WAAWqB,OAAO,CAAC,CAACd,YAAcA,UAAUgB,KAAK;QACnD;IACF,GAAG;QAACzB;QAAWE;KAAW;IAE1B,qBACE,KAACwB;QACCC,OAAO;YACLC,MAAM;YACNC,UAAU;YACVC,KAAK;QACP;kBAEA,cAAA,MAAC1B;YAAI2B,QAAO;YAAKC,KAAK/B;YAAQgC,SAAQ;YAAoBC,OAAM;;8BAC9D,KAACC;oBAAEC,IAAG;8BACJ,cAAA,KAACC;wBAAKC,WAAWxC,OAAOyC,UAAU;wBAAER,QAAO;wBAAKG,OAAM;wBAAKM,GAAE;wBAAQC,GAAE;;;8BAEzE,KAACN;oBAAEC,IAAG;8BACJ,cAAA,KAACM;wBAAKJ,WAAWxC,OAAOyC,UAAU;wBAAEI,GAAE;;;;;;AAKhD;AAEA,eAAe5C,gBAAe"}

package/dist/ui/Icons/LottieAnimation.jsx

@@ -6,8 +6,9 @@ const LottieAnimation = ({ isLoading = false }) => {
     const [animations, setAnimations] = useState([]);
     useEffect(() => {
         const svg = svgRef.current;
-        if (!svg)
+        if (!svg) {
             return;
+        }
         const animateTransform = (element, keyframes) => {
             const animation = element.animate(keyframes, {
                 direction: 'alternate',

package/dist/ui/ModelRowLabel/index.d.ts

@@ -0,0 +1,6 @@
+import type { ArrayFieldLabelClientComponent } from 'payload';
+/**
+ * Generic Model Row Label component for provider blocks
+ * Displays model name with enabled status badge
+ */
+export declare const ModelRowLabel: ArrayFieldLabelClientComponent;

package/dist/ui/ModelRowLabel/index.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRowLabel } from '@payloadcms/ui';
+import React from 'react';
+/**
+ * Generic Model Row Label component for provider blocks
+ * Displays model name with enabled status badge
+ */ export const ModelRowLabel = ()=>{
+    const { data, rowNumber } = useRowLabel();
+    const displayName = data?.name || data?.id || `Model ${rowNumber}`;
+    const isEnabled = data?.enabled !== false;
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            alignItems: 'center',
+            display: 'flex',
+            gap: '10px'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                style: {
+                    fontWeight: '500'
+                },
+                children: displayName
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                style: {
+                    backgroundColor: isEnabled ? 'var(--theme-success-100)' : 'var(--theme-elevation-200)',
+                    borderRadius: '4px',
+                    color: isEnabled ? 'var(--theme-success-700)' : 'var(--theme-elevation-600)',
+                    fontSize: '11px',
+                    fontWeight: '600',
+                    padding: '2px 8px',
+                    textTransform: 'uppercase'
+                },
+                children: isEnabled ? '●Enabled' : 'Disabled'
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/ui/ModelRowLabel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/ModelRowLabel/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ArrayFieldLabelClientComponent } from 'payload'\n\nimport { useRowLabel } from '@payloadcms/ui'\nimport React from 'react'\n\n/**\n * Generic Model Row Label component for provider blocks\n * Displays model name with enabled status badge\n */\nexport const ModelRowLabel: ArrayFieldLabelClientComponent = () => {\n  const { data, rowNumber } = useRowLabel<{\n    enabled?: boolean\n    id?: string\n    name?: string\n  }>()\n\n  const displayName = data?.name || data?.id || `Model ${rowNumber}`\n  const isEnabled = data?.enabled !== false\n\n  return (\n    <div style={{ alignItems: 'center', display: 'flex', gap: '10px' }}>\n      <span style={{ fontWeight: '500' }}>{displayName}</span>\n      <span\n        style={{\n          backgroundColor: isEnabled ? 'var(--theme-success-100)' : 'var(--theme-elevation-200)',\n          borderRadius: '4px',\n          color: isEnabled ? 'var(--theme-success-700)' : 'var(--theme-elevation-600)',\n          fontSize: '11px',\n          fontWeight: '600',\n          padding: '2px 8px',\n          textTransform: 'uppercase',\n        }}\n      >\n        {isEnabled ? '●Enabled' : 'Disabled'}\n      </span>\n    </div>\n  )\n}\n"],"names":["useRowLabel","React","ModelRowLabel","data","rowNumber","displayName","name","id","isEnabled","enabled","div","style","alignItems","display","gap","span","fontWeight","backgroundColor","borderRadius","color","fontSize","padding","textTransform"],"mappings":"AAAA;;AAIA,SAASA,WAAW,QAAQ,iBAAgB;AAC5C,OAAOC,WAAW,QAAO;AAEzB;;;CAGC,GACD,OAAO,MAAMC,gBAAgD;IAC3D,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGJ;IAM5B,MAAMK,cAAcF,MAAMG,QAAQH,MAAMI,MAAM,CAAC,MAAM,EAAEH,UAAU,CAAC;IAClE,MAAMI,YAAYL,MAAMM,YAAY;IAEpC,qBACE,MAACC;QAAIC,OAAO;YAAEC,YAAY;YAAUC,SAAS;YAAQC,KAAK;QAAO;;0BAC/D,KAACC;gBAAKJ,OAAO;oBAAEK,YAAY;gBAAM;0BAAIX;;0BACrC,KAACU;gBACCJ,OAAO;oBACLM,iBAAiBT,YAAY,6BAA6B;oBAC1DU,cAAc;oBACdC,OAAOX,YAAY,6BAA6B;oBAChDY,UAAU;oBACVJ,YAAY;oBACZK,SAAS;oBACTC,eAAe;gBACjB;0BAECd,YAAY,aAAa;;;;AAIlC,EAAC"}