@payloadcms/plugin-seo 4.0.0-internal.a0ef1b8 → 4.0.0-internal.a2d053c

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018-2025 Payload CMS, Inc. <info@payloadcms.com>
+Copyright (c) 2018-2026 Payload CMS, LLC <info@payloadcms.com>
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/dist/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../src/defaults.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;CASpB,CAAA"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../src/defaults.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;IACnB,WAAW;QACT,SAAS;QACT,SAAS;;IAEX,KAAK;QACH,SAAS;QACT,SAAS;;CAEZ,CAAA"}

package/dist/fields/MetaDescription/MetaDescriptionComponent.d.ts

@@ -1,3 +1,4 @@
+import '../colors.css';
 import type { TextareaFieldClientProps } from 'payload';
 import React from 'react';
 type MetaDescriptionProps = {

package/dist/fields/MetaDescription/MetaDescriptionComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetaDescriptionComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaDescription/MetaDescriptionComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAevD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAU1C,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,wBAAwB,EAAE,OAAO,CAAA;CAC3C,GAAG,wBAAwB,CAAA;AAE5B,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoLnE,CAAA"}
+{"version":3,"file":"MetaDescriptionComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaDescription/MetaDescriptionComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAA;AAGtB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAevD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAU1C,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,wBAAwB,EAAE,OAAO,CAAA;CAC3C,GAAG,wBAAwB,CAAA;AAE5B,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoLnE,CAAA"}

package/dist/fields/MetaDescription/MetaDescriptionComponent.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../colors.css';
 import { FieldLabel, TextareaInput, useConfig, useDocumentInfo, useDocumentTitle, useField, useForm, useLocale, useTranslation } from '@payloadcms/ui';
 import { reduceToSerializableFields } from '@payloadcms/ui/shared';
 import { formatAdminURL } from 'payload/shared';
@@ -37,7 +38,7 @@ export const MetaDescriptionComponent = (props)=>{
                 hasSavePermission: docInfo.hasSavePermission,
                 initialData: docInfo.initialData,
                 initialState: reduceToSerializableFields(docInfo.initialState ?? {}),
-                locale: typeof locale === 'object' ? locale?.code : locale,
+                locale: locale?.code,
                 title
             }),
             credentials: 'include',
@@ -110,7 +111,7 @@ export const MetaDescriptionComponent = (props)=>{
                     }),
                     /*#__PURE__*/ _jsxs("div", {
                         style: {
-                            color: '#9A9A9A'
+                            color: 'var(--seo-description-color)'
                         },
                         children: [
                             t('plugin-seo:lengthTipDescription', {

package/dist/fields/MetaDescription/MetaDescriptionComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/MetaDescription/MetaDescriptionComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType } from '@payloadcms/ui'\nimport type { TextareaFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  TextareaInput,\n  useConfig,\n  useDocumentInfo,\n  useDocumentTitle,\n  useField,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateDescription } from '../../types.js'\n\nimport { defaults } from '../../defaults.js'\nimport { LengthIndicator } from '../../ui/LengthIndicator.js'\n\nconst { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.description\n\ntype MetaDescriptionProps = {\n  readonly hasGenerateDescriptionFn: boolean\n} & TextareaFieldClientProps\n\nexport const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props) => {\n  const {\n    field: {\n      label,\n      localized,\n      maxLength: maxLengthFromProps,\n      minLength: minLengthFromProps,\n      required,\n    },\n    hasGenerateDescriptionFn,\n    readOnly,\n  } = props\n\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n  const { title } = useDocumentTitle()\n\n  const maxLength = maxLengthFromProps || maxLengthDefault\n  const minLength = minLengthFromProps || minLengthDefault\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Label } = {},\n    errorMessage,\n    path,\n    setValue,\n    showError,\n    value,\n  }: FieldType<string> = useField()\n\n  const regenerateDescription = useCallback(async () => {\n    if (!hasGenerateDescriptionFn) {\n      return\n    }\n\n    const endpoint = formatAdminURL({\n      apiRoute: api,\n      path: '/plugin-seo/generate-description',\n    })\n\n    const genDescriptionResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: reduceToSerializableFields(docInfo.initialState ?? {}),\n        locale: typeof locale === 'object' ? locale?.code : locale,\n        title,\n      } satisfies Omit<\n        Parameters<GenerateDescription>[0],\n        'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n      >),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const { result: generatedDescription } = await genDescriptionResponse.json()\n\n    setValue(generatedDescription || '')\n  }, [\n    hasGenerateDescriptionFn,\n\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    getData,\n    locale,\n    setValue,\n    title,\n  ])\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          {Label ?? (\n            <FieldLabel label={label} localized={localized} path={path} required={required} />\n          )}\n          {hasGenerateDescriptionFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                disabled={readOnly}\n                onClick={() => {\n                  void regenerateDescription()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        <div\n          style={{\n            color: '#9A9A9A',\n          }}\n        >\n          {t('plugin-seo:lengthTipDescription', { maxLength, minLength })}\n          <a\n            href=\"https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            {t('plugin-seo:bestPractices')}\n          </a>\n        </div>\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <TextareaInput\n          AfterInput={AfterInput}\n          BeforeInput={BeforeInput}\n          Error={errorMessage}\n          onChange={setValue}\n          path={path}\n          readOnly={readOnly}\n          required={required}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","TextareaInput","useConfig","useDocumentInfo","useDocumentTitle","useField","useForm","useLocale","useTranslation","reduceToSerializableFields","formatAdminURL","React","useCallback","defaults","LengthIndicator","maxLength","maxLengthDefault","minLength","minLengthDefault","description","MetaDescriptionComponent","props","field","label","localized","maxLengthFromProps","minLengthFromProps","required","hasGenerateDescriptionFn","readOnly","config","routes","api","t","locale","getData","docInfo","title","customComponents","AfterInput","BeforeInput","Label","errorMessage","path","setValue","showError","value","regenerateDescription","endpoint","apiRoute","genDescriptionResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","credentials","headers","method","result","generatedDescription","json","div","style","marginBottom","position","className","Fragment","button","disabled","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","Error","onChange","alignItems","display","width","text"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/MetaDescription/MetaDescriptionComponent.tsx"],"sourcesContent":["'use client'\n\nimport '../colors.css'\n\nimport type { FieldType } from '@payloadcms/ui'\nimport type { TextareaFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  TextareaInput,\n  useConfig,\n  useDocumentInfo,\n  useDocumentTitle,\n  useField,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateDescription } from '../../types.js'\n\nimport { defaults } from '../../defaults.js'\nimport { LengthIndicator } from '../../ui/LengthIndicator.js'\n\nconst { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.description\n\ntype MetaDescriptionProps = {\n  readonly hasGenerateDescriptionFn: boolean\n} & TextareaFieldClientProps\n\nexport const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props) => {\n  const {\n    field: {\n      label,\n      localized,\n      maxLength: maxLengthFromProps,\n      minLength: minLengthFromProps,\n      required,\n    },\n    hasGenerateDescriptionFn,\n    readOnly,\n  } = props\n\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n  const { title } = useDocumentTitle()\n\n  const maxLength = maxLengthFromProps || maxLengthDefault\n  const minLength = minLengthFromProps || minLengthDefault\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Label } = {},\n    errorMessage,\n    path,\n    setValue,\n    showError,\n    value,\n  }: FieldType<string> = useField()\n\n  const regenerateDescription = useCallback(async () => {\n    if (!hasGenerateDescriptionFn) {\n      return\n    }\n\n    const endpoint = formatAdminURL({\n      apiRoute: api,\n      path: '/plugin-seo/generate-description',\n    })\n\n    const genDescriptionResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: reduceToSerializableFields(docInfo.initialState ?? {}),\n        locale: locale?.code,\n        title,\n      } satisfies Omit<\n        Parameters<GenerateDescription>[0],\n        'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n      >),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const { result: generatedDescription } = await genDescriptionResponse.json()\n\n    setValue(generatedDescription || '')\n  }, [\n    hasGenerateDescriptionFn,\n\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    getData,\n    locale,\n    setValue,\n    title,\n  ])\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          {Label ?? (\n            <FieldLabel label={label} localized={localized} path={path} required={required} />\n          )}\n          {hasGenerateDescriptionFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                disabled={readOnly}\n                onClick={() => {\n                  void regenerateDescription()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        <div\n          style={{\n            color: 'var(--seo-description-color)',\n          }}\n        >\n          {t('plugin-seo:lengthTipDescription', { maxLength, minLength })}\n          <a\n            href=\"https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            {t('plugin-seo:bestPractices')}\n          </a>\n        </div>\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <TextareaInput\n          AfterInput={AfterInput}\n          BeforeInput={BeforeInput}\n          Error={errorMessage}\n          onChange={setValue}\n          path={path}\n          readOnly={readOnly}\n          required={required}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","TextareaInput","useConfig","useDocumentInfo","useDocumentTitle","useField","useForm","useLocale","useTranslation","reduceToSerializableFields","formatAdminURL","React","useCallback","defaults","LengthIndicator","maxLength","maxLengthDefault","minLength","minLengthDefault","description","MetaDescriptionComponent","props","field","label","localized","maxLengthFromProps","minLengthFromProps","required","hasGenerateDescriptionFn","readOnly","config","routes","api","t","locale","getData","docInfo","title","customComponents","AfterInput","BeforeInput","Label","errorMessage","path","setValue","showError","value","regenerateDescription","endpoint","apiRoute","genDescriptionResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","credentials","headers","method","result","generatedDescription","json","div","style","marginBottom","position","className","Fragment","button","disabled","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","Error","onChange","alignItems","display","width","text"],"mappings":"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"}

package/dist/fields/MetaImage/MetaImageComponent.d.ts

@@ -1,3 +1,4 @@
+import '../colors.css';
 import type { UploadFieldClientProps } from 'payload';
 import React from 'react';
 type MetaImageProps = {

package/dist/fields/MetaImage/MetaImageComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetaImageComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaImage/MetaImageComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAgBrD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;CACrC,GAAG,sBAAsB,CAAA;AAE1B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0MvD,CAAA"}
+{"version":3,"file":"MetaImageComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaImage/MetaImageComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAA;AAGtB,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAgBrD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;CACrC,GAAG,sBAAsB,CAAA;AAE1B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0MvD,CAAA"}

package/dist/fields/MetaImage/MetaImageComponent.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../colors.css';
 import { FieldLabel, RenderCustomComponent, UploadInput, useConfig, useDocumentInfo, useDocumentTitle, useField, useForm, useLocale, useTranslation } from '@payloadcms/ui';
 import { reduceToSerializableFields } from '@payloadcms/ui/shared';
 import { formatAdminURL } from 'payload/shared';
@@ -33,7 +34,7 @@ export const MetaImageComponent = (props)=>{
                 hasSavePermission: docInfo.hasSavePermission,
                 initialData: docInfo.initialData,
                 initialState: reduceToSerializableFields(docInfo.initialState ?? {}),
-                locale: typeof locale === 'object' ? locale?.code : locale,
+                locale: locale?.code,
                 title
             }),
             credentials: 'include',
@@ -120,7 +121,7 @@ export const MetaImageComponent = (props)=>{
                     }),
                     hasGenerateImageFn && /*#__PURE__*/ _jsx("div", {
                         style: {
-                            color: '#9A9A9A'
+                            color: 'var(--seo-description-color)'
                         },
                         children: t('plugin-seo:imageAutoGenerationTip')
                     })

package/dist/fields/MetaImage/MetaImageComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/MetaImage/MetaImageComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType } from '@payloadcms/ui'\nimport type { UploadFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  RenderCustomComponent,\n  UploadInput,\n  useConfig,\n  useDocumentInfo,\n  useDocumentTitle,\n  useField,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateImage } from '../../types.js'\n\nimport { Pill } from '../../ui/Pill.js'\n\ntype MetaImageProps = {\n  readonly hasGenerateImageFn: boolean\n} & UploadFieldClientProps\n\nexport const MetaImageComponent: React.FC<MetaImageProps> = (props) => {\n  const {\n    field: { admin: { allowCreate } = {}, label, localized, relationTo, required },\n    hasGenerateImageFn,\n    readOnly,\n  } = props\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const {\n    customComponents: { Error, Label } = {},\n    filterOptions,\n    path,\n    setValue,\n    showError,\n    value,\n  }: FieldType<number | string> = useField()\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n\n  const { title } = useDocumentTitle()\n\n  const regenerateImage = useCallback(async () => {\n    if (!hasGenerateImageFn) {\n      return\n    }\n\n    const endpoint = formatAdminURL({\n      apiRoute: api,\n      path: '/plugin-seo/generate-image',\n    })\n\n    const genImageResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: reduceToSerializableFields(docInfo.initialState ?? {}),\n        locale: typeof locale === 'object' ? locale?.code : locale,\n        title,\n      } satisfies Omit<\n        Parameters<GenerateImage>[0],\n        'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n      >),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const { result: generatedImage } = await genImageResponse.json()\n\n    // string ids, number ids or nullish values\n    let newValue: null | number | string | undefined = generatedImage\n    // non-nullish resolved relations\n    if (typeof generatedImage === 'object' && generatedImage && 'id' in generatedImage) {\n      newValue = generatedImage.id\n    }\n\n    // coerce to an empty string for falsy (=empty) values\n    setValue(newValue || '')\n  }, [\n    hasGenerateImageFn,\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    getData,\n    locale,\n    setValue,\n    title,\n  ])\n\n  const hasImage = Boolean(value)\n\n  const collection = getEntityConfig({ collectionSlug: relationTo })\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          <RenderCustomComponent\n            CustomComponent={Label}\n            Fallback={\n              <FieldLabel label={label} localized={localized} path={path} required={required} />\n            }\n          />\n          {hasGenerateImageFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                disabled={readOnly}\n                onClick={() => {\n                  void regenerateImage()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        {hasGenerateImageFn && (\n          <div\n            style={{\n              color: '#9A9A9A',\n            }}\n          >\n            {t('plugin-seo:imageAutoGenerationTip')}\n          </div>\n        )}\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <UploadInput\n          allowCreate={allowCreate !== false}\n          api={api}\n          collection={collection}\n          Error={Error}\n          filterOptions={filterOptions}\n          onChange={(incomingImage) => {\n            if (incomingImage !== null) {\n              if (typeof incomingImage === 'object') {\n                const { id: incomingID } = incomingImage\n                setValue(incomingID)\n              } else {\n                setValue(incomingImage)\n              }\n            } else {\n              setValue(null)\n            }\n          }}\n          path={path}\n          readOnly={readOnly}\n          relationTo={relationTo}\n          required={required}\n          serverURL={serverURL}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <Pill\n          backgroundColor={hasImage ? 'green' : 'red'}\n          color=\"white\"\n          label={hasImage ? t('plugin-seo:good') : t('plugin-seo:noImage')}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","RenderCustomComponent","UploadInput","useConfig","useDocumentInfo","useDocumentTitle","useField","useForm","useLocale","useTranslation","reduceToSerializableFields","formatAdminURL","React","useCallback","Pill","MetaImageComponent","props","field","admin","allowCreate","label","localized","relationTo","required","hasGenerateImageFn","readOnly","config","routes","api","serverURL","getEntityConfig","customComponents","Error","Label","filterOptions","path","setValue","showError","value","t","locale","getData","docInfo","title","regenerateImage","endpoint","apiRoute","genImageResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","credentials","headers","method","result","generatedImage","json","newValue","hasImage","Boolean","collection","div","style","marginBottom","position","className","CustomComponent","Fallback","Fragment","button","disabled","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","onChange","incomingImage","incomingID","alignItems","display","width"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/MetaImage/MetaImageComponent.tsx"],"sourcesContent":["'use client'\n\nimport '../colors.css'\n\nimport type { FieldType } from '@payloadcms/ui'\nimport type { UploadFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  RenderCustomComponent,\n  UploadInput,\n  useConfig,\n  useDocumentInfo,\n  useDocumentTitle,\n  useField,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateImage } from '../../types.js'\n\nimport { Pill } from '../../ui/Pill.js'\n\ntype MetaImageProps = {\n  readonly hasGenerateImageFn: boolean\n} & UploadFieldClientProps\n\nexport const MetaImageComponent: React.FC<MetaImageProps> = (props) => {\n  const {\n    field: { admin: { allowCreate } = {}, label, localized, relationTo, required },\n    hasGenerateImageFn,\n    readOnly,\n  } = props\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const {\n    customComponents: { Error, Label } = {},\n    filterOptions,\n    path,\n    setValue,\n    showError,\n    value,\n  }: FieldType<number | string> = useField()\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n\n  const { title } = useDocumentTitle()\n\n  const regenerateImage = useCallback(async () => {\n    if (!hasGenerateImageFn) {\n      return\n    }\n\n    const endpoint = formatAdminURL({\n      apiRoute: api,\n      path: '/plugin-seo/generate-image',\n    })\n\n    const genImageResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: reduceToSerializableFields(docInfo.initialState ?? {}),\n        locale: locale?.code,\n        title,\n      } satisfies Omit<\n        Parameters<GenerateImage>[0],\n        'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n      >),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const { result: generatedImage } = await genImageResponse.json()\n\n    // string ids, number ids or nullish values\n    let newValue: null | number | string | undefined = generatedImage\n    // non-nullish resolved relations\n    if (typeof generatedImage === 'object' && generatedImage && 'id' in generatedImage) {\n      newValue = generatedImage.id\n    }\n\n    // coerce to an empty string for falsy (=empty) values\n    setValue(newValue || '')\n  }, [\n    hasGenerateImageFn,\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    getData,\n    locale,\n    setValue,\n    title,\n  ])\n\n  const hasImage = Boolean(value)\n\n  const collection = getEntityConfig({ collectionSlug: relationTo })\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          <RenderCustomComponent\n            CustomComponent={Label}\n            Fallback={\n              <FieldLabel label={label} localized={localized} path={path} required={required} />\n            }\n          />\n          {hasGenerateImageFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                disabled={readOnly}\n                onClick={() => {\n                  void regenerateImage()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        {hasGenerateImageFn && (\n          <div\n            style={{\n              color: 'var(--seo-description-color)',\n            }}\n          >\n            {t('plugin-seo:imageAutoGenerationTip')}\n          </div>\n        )}\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <UploadInput\n          allowCreate={allowCreate !== false}\n          api={api}\n          collection={collection}\n          Error={Error}\n          filterOptions={filterOptions}\n          onChange={(incomingImage) => {\n            if (incomingImage !== null) {\n              if (typeof incomingImage === 'object') {\n                const { id: incomingID } = incomingImage\n                setValue(incomingID)\n              } else {\n                setValue(incomingImage)\n              }\n            } else {\n              setValue(null)\n            }\n          }}\n          path={path}\n          readOnly={readOnly}\n          relationTo={relationTo}\n          required={required}\n          serverURL={serverURL}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <Pill\n          backgroundColor={hasImage ? 'green' : 'red'}\n          color=\"white\"\n          label={hasImage ? t('plugin-seo:good') : t('plugin-seo:noImage')}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","RenderCustomComponent","UploadInput","useConfig","useDocumentInfo","useDocumentTitle","useField","useForm","useLocale","useTranslation","reduceToSerializableFields","formatAdminURL","React","useCallback","Pill","MetaImageComponent","props","field","admin","allowCreate","label","localized","relationTo","required","hasGenerateImageFn","readOnly","config","routes","api","serverURL","getEntityConfig","customComponents","Error","Label","filterOptions","path","setValue","showError","value","t","locale","getData","docInfo","title","regenerateImage","endpoint","apiRoute","genImageResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","credentials","headers","method","result","generatedImage","json","newValue","hasImage","Boolean","collection","div","style","marginBottom","position","className","CustomComponent","Fallback","Fragment","button","disabled","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","onChange","incomingImage","incomingID","alignItems","display","width"],"mappings":"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"}

package/dist/fields/MetaTitle/MetaTitleComponent.d.ts

@@ -1,6 +1,7 @@
 import type { TextFieldClientProps } from 'payload';
 import React from 'react';
-import '../index.scss';
+import '../colors.css';
+import '../index.css';
 type MetaTitleProps = {
     readonly hasGenerateTitleFn: boolean;
 } & TextFieldClientProps;

package/dist/fields/MetaTitle/MetaTitleComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetaTitleComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaTitle/MetaTitleComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAenD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,OAAO,eAAe,CAAA;AAItB,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;CACrC,GAAG,oBAAoB,CAAA;AAExB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoLvD,CAAA"}
+{"version":3,"file":"MetaTitleComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/MetaTitle/MetaTitleComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAenD,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C,OAAO,eAAe,CAAA;AACtB,OAAO,cAAc,CAAA;AAIrB,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;CACrC,GAAG,oBAAoB,CAAA;AAExB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoLvD,CAAA"}

package/dist/fields/MetaTitle/MetaTitleComponent.js

@@ -6,7 +6,8 @@ import { formatAdminURL } from 'payload/shared';
 import React, { useCallback } from 'react';
 import { defaults } from '../../defaults.js';
 import { LengthIndicator } from '../../ui/LengthIndicator.js';
-import '../index.scss';
+import '../colors.css';
+import '../index.css';
 const { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.title;
 export const MetaTitleComponent = (props)=>{
     const { field: { label, localized, maxLength: maxLengthFromProps, minLength: minLengthFromProps, required }, hasGenerateTitleFn, readOnly } = props;
@@ -38,7 +39,7 @@ export const MetaTitleComponent = (props)=>{
                 hasSavePermission: docInfo.hasSavePermission,
                 initialData: docInfo.initialData,
                 initialState: reduceToSerializableFields(docInfo.initialState ?? {}),
-                locale: typeof locale === 'object' ? locale?.code : locale,
+                locale: locale?.code,
                 title
             }),
             credentials: 'include',
@@ -111,7 +112,7 @@ export const MetaTitleComponent = (props)=>{
                     }),
                     /*#__PURE__*/ _jsxs("div", {
                         style: {
-                            color: '#9A9A9A'
+                            color: 'var(--seo-description-color)'
                         },
                         children: [
                             t('plugin-seo:lengthTipTitle', {

package/dist/fields/MetaTitle/MetaTitleComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/MetaTitle/MetaTitleComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType } from '@payloadcms/ui'\nimport type { TextFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  TextInput,\n  useConfig,\n  useDocumentInfo,\n  useDocumentTitle,\n  useField,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateTitle } from '../../types.js'\n\nimport { defaults } from '../../defaults.js'\nimport { LengthIndicator } from '../../ui/LengthIndicator.js'\nimport '../index.scss'\n\nconst { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.title\n\ntype MetaTitleProps = {\n  readonly hasGenerateTitleFn: boolean\n} & TextFieldClientProps\n\nexport const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {\n  const {\n    field: {\n      label,\n      localized,\n      maxLength: maxLengthFromProps,\n      minLength: minLengthFromProps,\n      required,\n    },\n    hasGenerateTitleFn,\n    readOnly,\n  } = props\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Label } = {},\n    errorMessage,\n    path,\n    setValue,\n    showError,\n    value,\n  }: FieldType<string> = useField()\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n  const { title } = useDocumentTitle()\n\n  const minLength = minLengthFromProps || minLengthDefault\n  const maxLength = maxLengthFromProps || maxLengthDefault\n\n  const regenerateTitle = useCallback(async () => {\n    if (!hasGenerateTitleFn) {\n      return\n    }\n\n    const endpoint = formatAdminURL({\n      apiRoute: api,\n      path: '/plugin-seo/generate-title',\n    })\n\n    const genTitleResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: reduceToSerializableFields(docInfo.initialState ?? {}),\n        locale: typeof locale === 'object' ? locale?.code : locale,\n        title,\n      } satisfies Omit<\n        Parameters<GenerateTitle>[0],\n        'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n      >),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const { result: generatedTitle } = await genTitleResponse.json()\n\n    setValue(generatedTitle || '')\n  }, [\n    hasGenerateTitleFn,\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    getData,\n    locale,\n    setValue,\n    title,\n  ])\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          {Label ?? (\n            <FieldLabel label={label} localized={localized} path={path} required={required} />\n          )}\n          {hasGenerateTitleFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                disabled={readOnly}\n                onClick={() => {\n                  void regenerateTitle()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        <div\n          style={{\n            color: '#9A9A9A',\n          }}\n        >\n          {t('plugin-seo:lengthTipTitle', { maxLength, minLength })}\n          <a\n            href=\"https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            {t('plugin-seo:bestPractices')}\n          </a>\n          .\n        </div>\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <TextInput\n          AfterInput={AfterInput}\n          BeforeInput={BeforeInput}\n          Error={errorMessage}\n          onChange={setValue}\n          path={path}\n          readOnly={readOnly}\n          required={required}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","TextInput","useConfig","useDocumentInfo","useDocumentTitle","useField","useForm","useLocale","useTranslation","reduceToSerializableFields","formatAdminURL","React","useCallback","defaults","LengthIndicator","maxLength","maxLengthDefault","minLength","minLengthDefault","title","MetaTitleComponent","props","field","label","localized","maxLengthFromProps","minLengthFromProps","required","hasGenerateTitleFn","readOnly","t","config","routes","api","customComponents","AfterInput","BeforeInput","Label","errorMessage","path","setValue","showError","value","locale","getData","docInfo","regenerateTitle","endpoint","apiRoute","genTitleResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","credentials","headers","method","result","generatedTitle","json","div","style","marginBottom","position","className","Fragment","button","disabled","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","Error","onChange","alignItems","display","width","text"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/MetaTitle/MetaTitleComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldType } from '@payloadcms/ui'\nimport type { TextFieldClientProps } from 'payload'\n\nimport {\n  FieldLabel,\n  TextInput,\n  useConfig,\n  useDocumentInfo,\n  useDocumentTitle,\n  useField,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateTitle } from '../../types.js'\n\nimport { defaults } from '../../defaults.js'\nimport { LengthIndicator } from '../../ui/LengthIndicator.js'\nimport '../colors.css'\nimport '../index.css'\n\nconst { maxLength: maxLengthDefault, minLength: minLengthDefault } = defaults.title\n\ntype MetaTitleProps = {\n  readonly hasGenerateTitleFn: boolean\n} & TextFieldClientProps\n\nexport const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {\n  const {\n    field: {\n      label,\n      localized,\n      maxLength: maxLengthFromProps,\n      minLength: minLengthFromProps,\n      required,\n    },\n    hasGenerateTitleFn,\n    readOnly,\n  } = props\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Label } = {},\n    errorMessage,\n    path,\n    setValue,\n    showError,\n    value,\n  }: FieldType<string> = useField()\n\n  const locale = useLocale()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n  const { title } = useDocumentTitle()\n\n  const minLength = minLengthFromProps || minLengthDefault\n  const maxLength = maxLengthFromProps || maxLengthDefault\n\n  const regenerateTitle = useCallback(async () => {\n    if (!hasGenerateTitleFn) {\n      return\n    }\n\n    const endpoint = formatAdminURL({\n      apiRoute: api,\n      path: '/plugin-seo/generate-title',\n    })\n\n    const genTitleResponse = await fetch(endpoint, {\n      body: JSON.stringify({\n        id: docInfo.id,\n        collectionSlug: docInfo.collectionSlug,\n        doc: getData(),\n        docPermissions: docInfo.docPermissions,\n        globalSlug: docInfo.globalSlug,\n        hasPublishPermission: docInfo.hasPublishPermission,\n        hasSavePermission: docInfo.hasSavePermission,\n        initialData: docInfo.initialData,\n        initialState: reduceToSerializableFields(docInfo.initialState ?? {}),\n        locale: locale?.code,\n        title,\n      } satisfies Omit<\n        Parameters<GenerateTitle>[0],\n        'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n      >),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    const { result: generatedTitle } = await genTitleResponse.json()\n\n    setValue(generatedTitle || '')\n  }, [\n    hasGenerateTitleFn,\n    api,\n    docInfo.id,\n    docInfo.collectionSlug,\n    docInfo.docPermissions,\n    docInfo.globalSlug,\n    docInfo.hasPublishPermission,\n    docInfo.hasSavePermission,\n    docInfo.initialData,\n    docInfo.initialState,\n    getData,\n    locale,\n    setValue,\n    title,\n  ])\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div\n        style={{\n          marginBottom: '5px',\n          position: 'relative',\n        }}\n      >\n        <div className=\"plugin-seo__field\">\n          {Label ?? (\n            <FieldLabel label={label} localized={localized} path={path} required={required} />\n          )}\n          {hasGenerateTitleFn && (\n            <React.Fragment>\n              &nbsp; &mdash; &nbsp;\n              <button\n                disabled={readOnly}\n                onClick={() => {\n                  void regenerateTitle()\n                }}\n                style={{\n                  background: 'none',\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  color: 'currentcolor',\n                  cursor: 'pointer',\n                  padding: 0,\n                  textDecoration: 'underline',\n                }}\n                type=\"button\"\n              >\n                {t('plugin-seo:autoGenerate')}\n              </button>\n            </React.Fragment>\n          )}\n        </div>\n        <div\n          style={{\n            color: 'var(--seo-description-color)',\n          }}\n        >\n          {t('plugin-seo:lengthTipTitle', { maxLength, minLength })}\n          <a\n            href=\"https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            {t('plugin-seo:bestPractices')}\n          </a>\n          .\n        </div>\n      </div>\n      <div\n        style={{\n          marginBottom: '10px',\n          position: 'relative',\n        }}\n      >\n        <TextInput\n          AfterInput={AfterInput}\n          BeforeInput={BeforeInput}\n          Error={errorMessage}\n          onChange={setValue}\n          path={path}\n          readOnly={readOnly}\n          required={required}\n          showError={showError}\n          style={{\n            marginBottom: 0,\n          }}\n          value={value}\n        />\n      </div>\n      <div\n        style={{\n          alignItems: 'center',\n          display: 'flex',\n          width: '100%',\n        }}\n      >\n        <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","TextInput","useConfig","useDocumentInfo","useDocumentTitle","useField","useForm","useLocale","useTranslation","reduceToSerializableFields","formatAdminURL","React","useCallback","defaults","LengthIndicator","maxLength","maxLengthDefault","minLength","minLengthDefault","title","MetaTitleComponent","props","field","label","localized","maxLengthFromProps","minLengthFromProps","required","hasGenerateTitleFn","readOnly","t","config","routes","api","customComponents","AfterInput","BeforeInput","Label","errorMessage","path","setValue","showError","value","locale","getData","docInfo","regenerateTitle","endpoint","apiRoute","genTitleResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","credentials","headers","method","result","generatedTitle","json","div","style","marginBottom","position","className","Fragment","button","disabled","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","Error","onChange","alignItems","display","width","text"],"mappings":"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"}

package/dist/fields/Overview/OverviewComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/Overview/OverviewComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,SAAS,CAAA;AAGjD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAW/D,KAAK,aAAa,GAAG;IACnB,oBAAoB,CAAC,EAAE;QACrB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE;QACf,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,OAAO,CAAA;AAEX,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwDrD,CAAA"}
+{"version":3,"file":"OverviewComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/Overview/OverviewComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAGtC,OAAO,KAA2C,MAAM,OAAO,CAAA;AAW/D,KAAK,aAAa,GAAG;IACnB,oBAAoB,CAAC,EAAE;QACrB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE;QACf,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,OAAO,CAAA;AAEX,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqDrD,CAAA"}

package/dist/fields/Overview/OverviewComponent.js

@@ -9,7 +9,10 @@ export const OverviewComponent = ({ descriptionOverrides, descriptionPath: descr
     const descriptionPath = descriptionPathFromContext || 'meta.description';
     const titlePath = titlePathFromContext || 'meta.title';
     const imagePath = imagePathFromContext || 'meta.image';
-    const [{ [descriptionPath]: { value: metaDesc } = {}, [imagePath]: { value: metaImage } = {}, [titlePath]: { value: metaTitle } = {} }] = useAllFormFields();
+    const [fields] = useAllFormFields();
+    const metaDesc = fields[descriptionPath]?.value;
+    const metaImage = fields[imagePath]?.value;
+    const metaTitle = fields[titlePath]?.value;
     const { t } = useTranslation();
     const [titleIsValid, setTitleIsValid] = useState();
     const [descIsValid, setDescIsValid] = useState();

package/dist/fields/Overview/OverviewComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Overview/OverviewComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FormField, UIField } from 'payload'\n\nimport { useAllFormFields, useForm, useTranslation } from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\n\nimport { defaults } from '../../defaults.js'\n\nconst {\n  description: { maxLength: maxDescDefault, minLength: minDescDefault },\n  title: { maxLength: maxTitleDefault, minLength: minTitleDefault },\n} = defaults\n\ntype OverviewProps = {\n  descriptionOverrides?: {\n    maxLength?: number\n    minLength?: number\n  }\n  descriptionPath?: string\n  imagePath?: string\n  titleOverrides?: {\n    maxLength?: number\n    minLength?: number\n  }\n  titlePath?: string\n} & UIField\n\nexport const OverviewComponent: React.FC<OverviewProps> = ({\n  descriptionOverrides,\n  descriptionPath: descriptionPathFromContext,\n  imagePath: imagePathFromContext,\n  titleOverrides,\n  titlePath: titlePathFromContext,\n}) => {\n  const { getFields } = useForm()\n\n  const descriptionPath = descriptionPathFromContext || 'meta.description'\n  const titlePath = titlePathFromContext || 'meta.title'\n  const imagePath = imagePathFromContext || 'meta.image'\n\n  const [\n    {\n      [descriptionPath]: { value: metaDesc } = {} as FormField,\n      [imagePath]: { value: metaImage } = {} as FormField,\n      [titlePath]: { value: metaTitle } = {} as FormField,\n    },\n  ] = useAllFormFields()\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const [titleIsValid, setTitleIsValid] = useState<boolean | undefined>()\n  const [descIsValid, setDescIsValid] = useState<boolean | undefined>()\n  const [imageIsValid, setImageIsValid] = useState<boolean | undefined>()\n\n  const minDesc = descriptionOverrides?.minLength || minDescDefault\n  const maxDesc = descriptionOverrides?.maxLength || maxDescDefault\n  const minTitle = titleOverrides?.minLength || minTitleDefault\n  const maxTitle = titleOverrides?.maxLength || maxTitleDefault\n\n  useEffect(() => {\n    if (typeof metaTitle === 'string') {\n      setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle)\n    }\n    if (typeof metaDesc === 'string') {\n      setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc)\n    }\n    setImageIsValid(Boolean(metaImage))\n  }, [metaTitle, metaDesc, metaImage])\n\n  const testResults = [titleIsValid, descIsValid, imageIsValid]\n\n  const numberOfPasses = testResults.filter(Boolean).length\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div>\n        {t('plugin-seo:checksPassing', { current: numberOfPasses, max: testResults.length })}\n      </div>\n    </div>\n  )\n}\n"],"names":["useAllFormFields","useForm","useTranslation","React","useEffect","useState","defaults","description","maxLength","maxDescDefault","minLength","minDescDefault","title","maxTitleDefault","minTitleDefault","OverviewComponent","descriptionOverrides","descriptionPath","descriptionPathFromContext","imagePath","imagePathFromContext","titleOverrides","titlePath","titlePathFromContext","getFields","value","metaDesc","metaImage","metaTitle","t","titleIsValid","setTitleIsValid","descIsValid","setDescIsValid","imageIsValid","setImageIsValid","minDesc","maxDesc","minTitle","maxTitle","length","Boolean","testResults","numberOfPasses","filter","div","style","marginBottom","current","max"],"mappings":"AAAA;;AAIA,SAASA,gBAAgB,EAAEC,OAAO,EAAEC,cAAc,QAAQ,iBAAgB;AAC1E,OAAOC,SAAsBC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI/D,SAASC,QAAQ,QAAQ,oBAAmB;AAE5C,MAAM,EACJC,aAAa,EAAEC,WAAWC,cAAc,EAAEC,WAAWC,cAAc,EAAE,EACrEC,OAAO,EAAEJ,WAAWK,eAAe,EAAEH,WAAWI,eAAe,EAAE,EAClE,GAAGR;AAgBJ,OAAO,MAAMS,oBAA6C,CAAC,EACzDC,oBAAoB,EACpBC,iBAAiBC,0BAA0B,EAC3CC,WAAWC,oBAAoB,EAC/BC,cAAc,EACdC,WAAWC,oBAAoB,EAChC;IACC,MAAM,EAAEC,SAAS,EAAE,GAAGvB;IAEtB,MAAMgB,kBAAkBC,8BAA8B;IACtD,MAAMI,YAAYC,wBAAwB;IAC1C,MAAMJ,YAAYC,wBAAwB;IAE1C,MAAM,CACJ,EACE,CAACH,gBAAgB,EAAE,EAAEQ,OAAOC,QAAQ,EAAE,GAAG,CAAC,CAAc,EACxD,CAACP,UAAU,EAAE,EAAEM,OAAOE,SAAS,EAAE,GAAG,CAAC,CAAc,EACnD,CAACL,UAAU,EAAE,EAAEG,OAAOG,SAAS,EAAE,GAAG,CAAC,CAAc,EACpD,CACF,GAAG5B;IACJ,MAAM,EAAE6B,CAAC,EAAE,GAAG3B;IAEd,MAAM,CAAC4B,cAAcC,gBAAgB,GAAG1B;IACxC,MAAM,CAAC2B,aAAaC,eAAe,GAAG5B;IACtC,MAAM,CAAC6B,cAAcC,gBAAgB,GAAG9B;IAExC,MAAM+B,UAAUpB,sBAAsBN,aAAaC;IACnD,MAAM0B,UAAUrB,sBAAsBR,aAAaC;IACnD,MAAM6B,WAAWjB,gBAAgBX,aAAaI;IAC9C,MAAMyB,WAAWlB,gBAAgBb,aAAaK;IAE9CT,UAAU;QACR,IAAI,OAAOwB,cAAc,UAAU;YACjCG,gBAAgBH,UAAUY,MAAM,IAAIF,YAAYV,UAAUY,MAAM,IAAID;QACtE;QACA,IAAI,OAAOb,aAAa,UAAU;YAChCO,eAAeP,SAASc,MAAM,IAAIJ,WAAWV,SAASc,MAAM,IAAIH;QAClE;QACAF,gBAAgBM,QAAQd;IAC1B,GAAG;QAACC;QAAWF;QAAUC;KAAU;IAEnC,MAAMe,cAAc;QAACZ;QAAcE;QAAaE;KAAa;IAE7D,MAAMS,iBAAiBD,YAAYE,MAAM,CAACH,SAASD,MAAM;IAEzD,qBACE,KAACK;QACCC,OAAO;YACLC,cAAc;QAChB;kBAEA,cAAA,KAACF;sBACEhB,EAAE,4BAA4B;gBAAEmB,SAASL;gBAAgBM,KAAKP,YAAYF,MAAM;YAAC;;;AAI1F,EAAC"}
+{"version":3,"sources":["../../../src/fields/Overview/OverviewComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { UIField } from 'payload'\n\nimport { useAllFormFields, useForm, useTranslation } from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\n\nimport { defaults } from '../../defaults.js'\n\nconst {\n  description: { maxLength: maxDescDefault, minLength: minDescDefault },\n  title: { maxLength: maxTitleDefault, minLength: minTitleDefault },\n} = defaults\n\ntype OverviewProps = {\n  descriptionOverrides?: {\n    maxLength?: number\n    minLength?: number\n  }\n  descriptionPath?: string\n  imagePath?: string\n  titleOverrides?: {\n    maxLength?: number\n    minLength?: number\n  }\n  titlePath?: string\n} & UIField\n\nexport const OverviewComponent: React.FC<OverviewProps> = ({\n  descriptionOverrides,\n  descriptionPath: descriptionPathFromContext,\n  imagePath: imagePathFromContext,\n  titleOverrides,\n  titlePath: titlePathFromContext,\n}) => {\n  const { getFields } = useForm()\n\n  const descriptionPath = descriptionPathFromContext || 'meta.description'\n  const titlePath = titlePathFromContext || 'meta.title'\n  const imagePath = imagePathFromContext || 'meta.image'\n\n  const [fields] = useAllFormFields()\n  const metaDesc = fields[descriptionPath]?.value\n  const metaImage = fields[imagePath]?.value\n  const metaTitle = fields[titlePath]?.value\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const [titleIsValid, setTitleIsValid] = useState<boolean | undefined>()\n  const [descIsValid, setDescIsValid] = useState<boolean | undefined>()\n  const [imageIsValid, setImageIsValid] = useState<boolean | undefined>()\n\n  const minDesc = descriptionOverrides?.minLength || minDescDefault\n  const maxDesc = descriptionOverrides?.maxLength || maxDescDefault\n  const minTitle = titleOverrides?.minLength || minTitleDefault\n  const maxTitle = titleOverrides?.maxLength || maxTitleDefault\n\n  useEffect(() => {\n    if (typeof metaTitle === 'string') {\n      setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle)\n    }\n    if (typeof metaDesc === 'string') {\n      setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc)\n    }\n    setImageIsValid(Boolean(metaImage))\n  }, [metaTitle, metaDesc, metaImage])\n\n  const testResults = [titleIsValid, descIsValid, imageIsValid]\n\n  const numberOfPasses = testResults.filter(Boolean).length\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div>\n        {t('plugin-seo:checksPassing', { current: numberOfPasses, max: testResults.length })}\n      </div>\n    </div>\n  )\n}\n"],"names":["useAllFormFields","useForm","useTranslation","React","useEffect","useState","defaults","description","maxLength","maxDescDefault","minLength","minDescDefault","title","maxTitleDefault","minTitleDefault","OverviewComponent","descriptionOverrides","descriptionPath","descriptionPathFromContext","imagePath","imagePathFromContext","titleOverrides","titlePath","titlePathFromContext","getFields","fields","metaDesc","value","metaImage","metaTitle","t","titleIsValid","setTitleIsValid","descIsValid","setDescIsValid","imageIsValid","setImageIsValid","minDesc","maxDesc","minTitle","maxTitle","length","Boolean","testResults","numberOfPasses","filter","div","style","marginBottom","current","max"],"mappings":"AAAA;;AAIA,SAASA,gBAAgB,EAAEC,OAAO,EAAEC,cAAc,QAAQ,iBAAgB;AAC1E,OAAOC,SAAsBC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI/D,SAASC,QAAQ,QAAQ,oBAAmB;AAE5C,MAAM,EACJC,aAAa,EAAEC,WAAWC,cAAc,EAAEC,WAAWC,cAAc,EAAE,EACrEC,OAAO,EAAEJ,WAAWK,eAAe,EAAEH,WAAWI,eAAe,EAAE,EAClE,GAAGR;AAgBJ,OAAO,MAAMS,oBAA6C,CAAC,EACzDC,oBAAoB,EACpBC,iBAAiBC,0BAA0B,EAC3CC,WAAWC,oBAAoB,EAC/BC,cAAc,EACdC,WAAWC,oBAAoB,EAChC;IACC,MAAM,EAAEC,SAAS,EAAE,GAAGvB;IAEtB,MAAMgB,kBAAkBC,8BAA8B;IACtD,MAAMI,YAAYC,wBAAwB;IAC1C,MAAMJ,YAAYC,wBAAwB;IAE1C,MAAM,CAACK,OAAO,GAAGzB;IACjB,MAAM0B,WAAWD,MAAM,CAACR,gBAAgB,EAAEU;IAC1C,MAAMC,YAAYH,MAAM,CAACN,UAAU,EAAEQ;IACrC,MAAME,YAAYJ,MAAM,CAACH,UAAU,EAAEK;IACrC,MAAM,EAAEG,CAAC,EAAE,GAAG5B;IAEd,MAAM,CAAC6B,cAAcC,gBAAgB,GAAG3B;IACxC,MAAM,CAAC4B,aAAaC,eAAe,GAAG7B;IACtC,MAAM,CAAC8B,cAAcC,gBAAgB,GAAG/B;IAExC,MAAMgC,UAAUrB,sBAAsBN,aAAaC;IACnD,MAAM2B,UAAUtB,sBAAsBR,aAAaC;IACnD,MAAM8B,WAAWlB,gBAAgBX,aAAaI;IAC9C,MAAM0B,WAAWnB,gBAAgBb,aAAaK;IAE9CT,UAAU;QACR,IAAI,OAAOyB,cAAc,UAAU;YACjCG,gBAAgBH,UAAUY,MAAM,IAAIF,YAAYV,UAAUY,MAAM,IAAID;QACtE;QACA,IAAI,OAAOd,aAAa,UAAU;YAChCQ,eAAeR,SAASe,MAAM,IAAIJ,WAAWX,SAASe,MAAM,IAAIH;QAClE;QACAF,gBAAgBM,QAAQd;IAC1B,GAAG;QAACC;QAAWH;QAAUE;KAAU;IAEnC,MAAMe,cAAc;QAACZ;QAAcE;QAAaE;KAAa;IAE7D,MAAMS,iBAAiBD,YAAYE,MAAM,CAACH,SAASD,MAAM;IAEzD,qBACE,KAACK;QACCC,OAAO;YACLC,cAAc;QAChB;kBAEA,cAAA,KAACF;sBACEhB,EAAE,4BAA4B;gBAAEmB,SAASL;gBAAgBM,KAAKP,YAAYF,MAAM;YAAC;;;AAI1F,EAAC"}

package/dist/fields/Preview/PreviewComponent.d.ts

@@ -1,3 +1,4 @@
+import '../colors.css';
 import type { UIField } from 'payload';
 import React from 'react';
 type PreviewProps = {

package/dist/fields/Preview/PreviewComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/Preview/PreviewComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,SAAS,CAAA;AAajD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAKlD,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,GAAG,OAAO,CAAA;AAEX,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoInD,CAAA"}
+{"version":3,"file":"PreviewComponent.d.ts","sourceRoot":"","sources":["../../../src/fields/Preview/PreviewComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAA;AAEtB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAatC,OAAO,KAA8B,MAAM,OAAO,CAAA;AAKlD,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,GAAG,OAAO,CAAA;AAEX,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiHnD,CAAA"}

package/dist/fields/Preview/PreviewComponent.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../colors.css';
 import { useAllFormFields, useConfig, useDocumentInfo, useDocumentTitle, useForm, useLocale, useTranslation } from '@payloadcms/ui';
 import { reduceToSerializableFields } from '@payloadcms/ui/shared';
 import { formatAdminURL } from 'payload/shared';
@@ -15,7 +16,8 @@ export const PreviewComponent = (props)=>{
     const { title } = useDocumentTitle();
     const descriptionPath = descriptionPathFromContext || 'meta.description';
     const titlePath = titlePathFromContext || 'meta.title';
-    const { [descriptionPath]: { value: metaDescription } = {}, [titlePath]: { value: metaTitle } = {} } = fields;
+    const metaDescription = fields[descriptionPath]?.value;
+    const metaTitle = fields[titlePath]?.value;
     const [href, setHref] = useState();
     useEffect(()=>{
         const endpoint = formatAdminURL({
@@ -34,7 +36,7 @@ export const PreviewComponent = (props)=>{
                     hasSavePermission: docInfo.hasSavePermission,
                     initialData: docInfo.initialData,
                     initialState: reduceToSerializableFields(docInfo.initialState ?? {}),
-                    locale: typeof locale === 'object' ? locale?.code : locale,
+                    locale: locale?.code,
                     title
                 }),
                 credentials: 'include',
@@ -69,42 +71,29 @@ export const PreviewComponent = (props)=>{
             }),
             /*#__PURE__*/ _jsx("div", {
                 style: {
-                    color: '#9A9A9A',
+                    color: 'var(--seo-description-color)',
                     marginBottom: '5px'
                 },
                 children: t('plugin-seo:previewDescription')
             }),
             /*#__PURE__*/ _jsxs("div", {
                 style: {
-                    background: 'var(--theme-elevation-50)',
+                    background: 'var(--color-bg-secondary)',
                     borderRadius: '5px',
                     boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
                     maxWidth: '600px',
                     padding: '20px',
-                    pointerEvents: 'none',
                     width: '100%'
                 },
                 children: [
                     /*#__PURE__*/ _jsx("div", {
-                        children: /*#__PURE__*/ _jsx("a", {
-                            href: href,
-                            style: {
-                                textDecoration: 'none'
-                            },
-                            children: href || 'https://...'
-                        })
+                        children: href || 'https://...'
                     }),
-                    /*#__PURE__*/ _jsx("h4", {
+                    /*#__PURE__*/ _jsx("div", {
                         style: {
                             margin: 0
                         },
-                        children: /*#__PURE__*/ _jsx("a", {
-                            href: "/",
-                            style: {
-                                textDecoration: 'none'
-                            },
-                            children: metaTitle
-                        })
+                        children: metaTitle
                     }),
                     /*#__PURE__*/ _jsx("p", {
                         style: {

package/dist/fields/Preview/PreviewComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/Preview/PreviewComponent.tsx"],"sourcesContent":["'use client'\n\nimport type { FormField, UIField } from 'payload'\n\nimport {\n  useAllFormFields,\n  useConfig,\n  useDocumentInfo,\n  useDocumentTitle,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateURL } from '../../types.js'\n\ntype PreviewProps = {\n  readonly descriptionPath?: string\n  readonly hasGenerateURLFn: boolean\n  readonly titlePath?: string\n} & UIField\n\nexport const PreviewComponent: React.FC<PreviewProps> = (props) => {\n  const {\n    descriptionPath: descriptionPathFromContext,\n    hasGenerateURLFn,\n    titlePath: titlePathFromContext,\n  } = props\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const locale = useLocale()\n  const [fields] = useAllFormFields()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n  const { title } = useDocumentTitle()\n\n  const descriptionPath = descriptionPathFromContext || 'meta.description'\n  const titlePath = titlePathFromContext || 'meta.title'\n\n  const {\n    [descriptionPath]: { value: metaDescription } = {} as FormField,\n    [titlePath]: { value: metaTitle } = {} as FormField,\n  } = fields\n\n  const [href, setHref] = useState<string>()\n\n  useEffect(() => {\n    const endpoint = formatAdminURL({\n      apiRoute: api,\n      path: '/plugin-seo/generate-url',\n    })\n\n    const getHref = async () => {\n      const genURLResponse = await fetch(endpoint, {\n        body: JSON.stringify({\n          id: docInfo.id,\n          collectionSlug: docInfo.collectionSlug,\n          doc: getData(),\n          docPermissions: docInfo.docPermissions,\n          globalSlug: docInfo.globalSlug,\n          hasPublishPermission: docInfo.hasPublishPermission,\n          hasSavePermission: docInfo.hasSavePermission,\n          initialData: docInfo.initialData,\n          initialState: reduceToSerializableFields(docInfo.initialState ?? {}),\n          locale: typeof locale === 'object' ? locale?.code : locale,\n          title,\n        } satisfies Omit<\n          Parameters<GenerateURL>[0],\n          'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n        >),\n        credentials: 'include',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      })\n\n      const { result: newHref } = await genURLResponse.json()\n\n      setHref(newHref)\n    }\n\n    if (hasGenerateURLFn && !href) {\n      void getHref()\n    }\n  }, [fields, href, locale, docInfo, hasGenerateURLFn, getData, api, title])\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div>{t('plugin-seo:preview')}</div>\n      <div\n        style={{\n          color: '#9A9A9A',\n          marginBottom: '5px',\n        }}\n      >\n        {t('plugin-seo:previewDescription')}\n      </div>\n      <div\n        style={{\n          background: 'var(--theme-elevation-50)',\n          borderRadius: '5px',\n          boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',\n          maxWidth: '600px',\n          padding: '20px',\n          pointerEvents: 'none',\n          width: '100%',\n        }}\n      >\n        <div>\n          <a\n            href={href}\n            style={{\n              textDecoration: 'none',\n            }}\n          >\n            {href || 'https://...'}\n          </a>\n        </div>\n        <h4\n          style={{\n            margin: 0,\n          }}\n        >\n          <a\n            href=\"/\"\n            style={{\n              textDecoration: 'none',\n            }}\n          >\n            {metaTitle as string}\n          </a>\n        </h4>\n        <p\n          style={{\n            margin: 0,\n          }}\n        >\n          {metaDescription as string}\n        </p>\n      </div>\n    </div>\n  )\n}\n"],"names":["useAllFormFields","useConfig","useDocumentInfo","useDocumentTitle","useForm","useLocale","useTranslation","reduceToSerializableFields","formatAdminURL","React","useEffect","useState","PreviewComponent","props","descriptionPath","descriptionPathFromContext","hasGenerateURLFn","titlePath","titlePathFromContext","t","config","routes","api","locale","fields","getData","docInfo","title","value","metaDescription","metaTitle","href","setHref","endpoint","apiRoute","path","getHref","genURLResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","credentials","headers","method","result","newHref","json","div","style","marginBottom","color","background","borderRadius","boxShadow","maxWidth","padding","pointerEvents","width","a","textDecoration","h4","margin","p"],"mappings":"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"}
+{"version":3,"sources":["../../../src/fields/Preview/PreviewComponent.tsx"],"sourcesContent":["'use client'\n\nimport '../colors.css'\n\nimport type { UIField } from 'payload'\n\nimport {\n  useAllFormFields,\n  useConfig,\n  useDocumentInfo,\n  useDocumentTitle,\n  useForm,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { reduceToSerializableFields } from '@payloadcms/ui/shared'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'\nimport type { GenerateURL } from '../../types.js'\n\ntype PreviewProps = {\n  readonly descriptionPath?: string\n  readonly hasGenerateURLFn: boolean\n  readonly titlePath?: string\n} & UIField\n\nexport const PreviewComponent: React.FC<PreviewProps> = (props) => {\n  const {\n    descriptionPath: descriptionPathFromContext,\n    hasGenerateURLFn,\n    titlePath: titlePathFromContext,\n  } = props\n\n  const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const locale = useLocale()\n  const [fields] = useAllFormFields()\n  const { getData } = useForm()\n  const docInfo = useDocumentInfo()\n  const { title } = useDocumentTitle()\n\n  const descriptionPath = descriptionPathFromContext || 'meta.description'\n  const titlePath = titlePathFromContext || 'meta.title'\n\n  const metaDescription = fields[descriptionPath]?.value\n  const metaTitle = fields[titlePath]?.value\n\n  const [href, setHref] = useState<string>()\n\n  useEffect(() => {\n    const endpoint = formatAdminURL({\n      apiRoute: api,\n      path: '/plugin-seo/generate-url',\n    })\n\n    const getHref = async () => {\n      const genURLResponse = await fetch(endpoint, {\n        body: JSON.stringify({\n          id: docInfo.id,\n          collectionSlug: docInfo.collectionSlug,\n          doc: getData(),\n          docPermissions: docInfo.docPermissions,\n          globalSlug: docInfo.globalSlug,\n          hasPublishPermission: docInfo.hasPublishPermission,\n          hasSavePermission: docInfo.hasSavePermission,\n          initialData: docInfo.initialData,\n          initialState: reduceToSerializableFields(docInfo.initialState ?? {}),\n          locale: locale?.code,\n          title,\n        } satisfies Omit<\n          Parameters<GenerateURL>[0],\n          'collectionConfig' | 'globalConfig' | 'hasPublishedDoc' | 'req' | 'versionCount'\n        >),\n        credentials: 'include',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      })\n\n      const { result: newHref } = await genURLResponse.json()\n\n      setHref(newHref)\n    }\n\n    if (hasGenerateURLFn && !href) {\n      void getHref()\n    }\n  }, [fields, href, locale, docInfo, hasGenerateURLFn, getData, api, title])\n\n  return (\n    <div\n      style={{\n        marginBottom: '20px',\n      }}\n    >\n      <div>{t('plugin-seo:preview')}</div>\n      <div\n        style={{\n          color: 'var(--seo-description-color)',\n          marginBottom: '5px',\n        }}\n      >\n        {t('plugin-seo:previewDescription')}\n      </div>\n      <div\n        style={{\n          background: 'var(--color-bg-secondary)',\n          borderRadius: '5px',\n          boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',\n          maxWidth: '600px',\n          padding: '20px',\n          width: '100%',\n        }}\n      >\n        <div>{href || 'https://...'}</div>\n        <div\n          style={{\n            margin: 0,\n          }}\n        >\n          {metaTitle as string}\n        </div>\n        <p\n          style={{\n            margin: 0,\n          }}\n        >\n          {metaDescription as string}\n        </p>\n      </div>\n    </div>\n  )\n}\n"],"names":["useAllFormFields","useConfig","useDocumentInfo","useDocumentTitle","useForm","useLocale","useTranslation","reduceToSerializableFields","formatAdminURL","React","useEffect","useState","PreviewComponent","props","descriptionPath","descriptionPathFromContext","hasGenerateURLFn","titlePath","titlePathFromContext","t","config","routes","api","locale","fields","getData","docInfo","title","metaDescription","value","metaTitle","href","setHref","endpoint","apiRoute","path","getHref","genURLResponse","fetch","body","JSON","stringify","id","collectionSlug","doc","docPermissions","globalSlug","hasPublishPermission","hasSavePermission","initialData","initialState","code","credentials","headers","method","result","newHref","json","div","style","marginBottom","color","background","borderRadius","boxShadow","maxWidth","padding","width","margin","p"],"mappings":"AAAA;;AAEA,OAAO,gBAAe;AAItB,SACEA,gBAAgB,EAChBC,SAAS,EACTC,eAAe,EACfC,gBAAgB,EAChBC,OAAO,EACPC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,SAASC,0BAA0B,QAAQ,wBAAuB;AAClE,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAWlD,OAAO,MAAMC,mBAA2C,CAACC;IACvD,MAAM,EACJC,iBAAiBC,0BAA0B,EAC3CC,gBAAgB,EAChBC,WAAWC,oBAAoB,EAChC,GAAGL;IAEJ,MAAM,EAAEM,CAAC,EAAE,GAAGb;IAEd,MAAM,EACJc,QAAQ,EACNC,QAAQ,EAAEC,GAAG,EAAE,EAChB,EACF,GAAGrB;IAEJ,MAAMsB,SAASlB;IACf,MAAM,CAACmB,OAAO,GAAGxB;IACjB,MAAM,EAAEyB,OAAO,EAAE,GAAGrB;IACpB,MAAMsB,UAAUxB;IAChB,MAAM,EAAEyB,KAAK,EAAE,GAAGxB;IAElB,MAAMW,kBAAkBC,8BAA8B;IACtD,MAAME,YAAYC,wBAAwB;IAE1C,MAAMU,kBAAkBJ,MAAM,CAACV,gBAAgB,EAAEe;IACjD,MAAMC,YAAYN,MAAM,CAACP,UAAU,EAAEY;IAErC,MAAM,CAACE,MAAMC,QAAQ,GAAGrB;IAExBD,UAAU;QACR,MAAMuB,WAAWzB,eAAe;YAC9B0B,UAAUZ;YACVa,MAAM;QACR;QAEA,MAAMC,UAAU;YACd,MAAMC,iBAAiB,MAAMC,MAAML,UAAU;gBAC3CM,MAAMC,KAAKC,SAAS,CAAC;oBACnBC,IAAIhB,QAAQgB,EAAE;oBACdC,gBAAgBjB,QAAQiB,cAAc;oBACtCC,KAAKnB;oBACLoB,gBAAgBnB,QAAQmB,cAAc;oBACtCC,YAAYpB,QAAQoB,UAAU;oBAC9BC,sBAAsBrB,QAAQqB,oBAAoB;oBAClDC,mBAAmBtB,QAAQsB,iBAAiB;oBAC5CC,aAAavB,QAAQuB,WAAW;oBAChCC,cAAc3C,2BAA2BmB,QAAQwB,YAAY,IAAI,CAAC;oBAClE3B,QAAQA,QAAQ4B;oBAChBxB;gBACF;gBAIAyB,aAAa;gBACbC,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,QAAQ;YACV;YAEA,MAAM,EAAEC,QAAQC,OAAO,EAAE,GAAG,MAAMnB,eAAeoB,IAAI;YAErDzB,QAAQwB;QACV;QAEA,IAAIxC,oBAAoB,CAACe,MAAM;YAC7B,KAAKK;QACP;IACF,GAAG;QAACZ;QAAQO;QAAMR;QAAQG;QAASV;QAAkBS;QAASH;QAAKK;KAAM;IAEzE,qBACE,MAAC+B;QACCC,OAAO;YACLC,cAAc;QAChB;;0BAEA,KAACF;0BAAKvC,EAAE;;0BACR,KAACuC;gBACCC,OAAO;oBACLE,OAAO;oBACPD,cAAc;gBAChB;0BAECzC,EAAE;;0BAEL,MAACuC;gBACCC,OAAO;oBACLG,YAAY;oBACZC,cAAc;oBACdC,WAAW;oBACXC,UAAU;oBACVC,SAAS;oBACTC,OAAO;gBACT;;kCAEA,KAACT;kCAAK3B,QAAQ;;kCACd,KAAC2B;wBACCC,OAAO;4BACLS,QAAQ;wBACV;kCAECtC;;kCAEH,KAACuC;wBACCV,OAAO;4BACLS,QAAQ;wBACV;kCAECxC;;;;;;AAKX,EAAC"}

package/dist/fields/colors.css

@@ -0,0 +1,27 @@
+@layer payload-default {
+  :root,
+  [data-theme] {
+    --seo-description-color: #9a9a9a;
+    --seo-danger-bg: red;
+    --seo-short-bg: orangered;
+    --seo-danger-text: white;
+    --seo-warning-bg: orange;
+    --seo-warning-text: white;
+    --seo-success-bg: green;
+    --seo-success-text: white;
+    --seo-track-bg: #f3f3f3;
+  }
+
+  html[data-enhanced-contrast],
+  html[data-enhanced-contrast] [data-theme] {
+    --seo-description-color: var(--color-text-secondary);
+    --seo-danger-bg: var(--color-bg-danger);
+    --seo-short-bg: var(--color-bg-danger);
+    --seo-danger-text: var(--color-text-ondanger);
+    --seo-warning-bg: var(--color-bg-warning);
+    --seo-warning-text: var(--color-text-onwarning);
+    --seo-success-bg: var(--color-bg-success-tertiary);
+    --seo-success-text: var(--color-text);
+    --seo-track-bg: var(--color-bg-tertiary);
+  }
+}

package/dist/fields/{index.scss → index.css}

@@ -1,5 +1,7 @@
 @layer payload-default {
   .plugin-seo__field {
+    margin-bottom: var(--spacer-1);
+
     .field-label {
       display: inline !important;
     }

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import type { Config } from 'payload';
 import type { SEOPluginConfig } from './types.js';
-export declare const seoPlugin: (pluginConfig: SEOPluginConfig) => (config: Config) => Config;
+export declare const seoPlugin: (options: SEOPluginConfig) => import("payload").Plugin;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAgC,MAAM,SAAS,CAAA;AAInE,OAAO,KAAK,EAKV,eAAe,EAChB,MAAM,YAAY,CAAA;AASnB,eAAO,MAAM,SAAS,GACnB,cAAc,eAAe,MAC7B,QAAQ,MAAM,KAAG,MAsRjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAKV,eAAe,EAChB,MAAM,YAAY,CAAA;AASnB,eAAO,MAAM,SAAS,wDAmZpB,CAAA"}