fix(plugin-form-builder): allows creating form submissions from admin panel

This was accidentally added to test dependencies. Doesn't really make a difference, but for consistency this should be part of devDependencies

.github/CODEOWNERS

@@ -1,24 +1,35 @@
 # Order matters. The last matching pattern takes precedence.
 
-### Package Exports ###
+### Package Exports
+
 **/exports/ @denolfe @jmikrut @DanRibbens
 
-### Packages ###
+### Packages
+
 /packages/plugin-cloud*/src/ @denolfe @jmikrut @DanRibbens
 /packages/email-*/src/ @denolfe @jmikrut @DanRibbens
+/packages/live-preview*/src/ @jacobsfletch
+/packages/plugin-stripe/src/ @jacobsfletch
+/packages/plugin-multi-tenant/src/ @JarrodMFlesch
+/packages/richtext-*/src/ @AlessioGr
+/packages/next/src/ @jmikrut @jacobsfletch @AlessioGr @JarrodMFlesch
+/packages/ui/src/ @jmikrut @jacobsfletch @AlessioGr @JarrodMFlesch
 /packages/storage-*/src/ @denolfe @jmikrut @DanRibbens
 /packages/create-payload-app/src/ @denolfe @jmikrut @DanRibbens
 /packages/eslint-*/ @denolfe @jmikrut @DanRibbens @AlessioGr
 
-### Templates ###
+### Templates
+
 /templates/_data/ @denolfe @jmikrut @DanRibbens
 /templates/_template/ @denolfe @jmikrut @DanRibbens
 
-### Build Files ###
+### Build Files
+
 **/tsconfig*.json @denolfe @jmikrut @DanRibbens @AlessioGr
 **/jest.config.js @denolfe @jmikrut @DanRibbens @AlessioGr
 
-### Root ###
+### Root
+
 /package.json @denolfe @jmikrut @DanRibbens
 /tools/ @denolfe @jmikrut @DanRibbens
 /.husky/ @denolfe @jmikrut @DanRibbens

.github/actions/triage/package.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@octokit/webhooks-types": "^7.5.1",
-    "@swc/jest": "^0.2.36",
+    "@swc/jest": "^0.2.37",
     "@types/jest": "^27.5.2",
     "@types/node": "^20.16.5",
     "@typescript-eslint/eslint-plugin": "^4.33.0",

.github/pnpm-lock.yaml

@@ -19,8 +19,8 @@ importers:
         specifier: ^7.5.1
         version: 7.5.1
       '@swc/jest':
-        specifier: ^0.2.36
-        version: 0.2.36(@swc/core@1.7.26)
+        specifier: ^0.2.37
+        version: 0.2.37(@swc/core@1.7.26)
       '@types/jest':
         specifier: ^27.5.2
         version: 27.5.2
@@ -48,9 +48,6 @@ importers:
       prettier:
         specifier: ^3.3.3
         version: 3.3.3
-      ts-jest:
-        specifier: ^26.5.6
-        version: 26.5.6(jest@29.7.0(@types/node@20.16.5))(typescript@4.9.5)
       typescript:
         specifier: ^4.9.5
         version: 4.9.5
@@ -68,8 +65,8 @@ importers:
         specifier: ^7.5.1
         version: 7.5.1
       '@swc/jest':
-        specifier: ^0.2.36
-        version: 0.2.36(@swc/core@1.7.26)
+        specifier: ^0.2.37
+        version: 0.2.37(@swc/core@1.7.26)
       '@types/jest':
         specifier: ^27.5.2
         version: 27.5.2
@@ -97,9 +94,6 @@ importers:
       prettier:
         specifier: ^3.3.3
         version: 3.3.3
-      ts-jest:
-        specifier: ^26.5.6
-        version: 26.5.6(jest@29.7.0(@types/node@20.16.5))(typescript@4.9.5)
       typescript:
         specifier: ^4.9.5
         version: 4.9.5
@@ -386,10 +380,6 @@ packages:
     resolution: {integrity: sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/types@26.6.2':
-    resolution: {integrity: sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==}
-    engines: {node: '>= 10.14.2'}
-
   '@jest/types@29.6.3':
     resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -542,8 +532,8 @@ packages:
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
-  '@swc/jest@0.2.36':
-    resolution: {integrity: sha512-8X80dp81ugxs4a11z1ka43FPhP+/e+mJNXJSxiNYk8gIX/jPBtY4gQTrKu/KIoco8bzKuPI5lUxjfLiGsfvnlw==}
+  '@swc/jest@0.2.37':
+    resolution: {integrity: sha512-CR2BHhmXKGxTiFr21DYPRHQunLkX3mNIFGFkxBGji6r9uyIR5zftTOVYj1e0sFNMV2H7mf/+vpaglqaryBtqfQ==}
     engines: {npm: '>= 7.0.0'}
     peerDependencies:
       '@swc/core': '*'
@@ -590,9 +580,6 @@ packages:
   '@types/yargs-parser@21.0.3':
     resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
 
-  '@types/yargs@15.0.19':
-    resolution: {integrity: sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==}
-
   '@types/yargs@17.0.33':
     resolution: {integrity: sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==}
 
@@ -746,10 +733,6 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  bs-logger@0.2.6:
-    resolution: {integrity: sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==}
-    engines: {node: '>= 6'}
-
   bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
 
@@ -783,9 +766,6 @@ packages:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
     engines: {node: '>=10'}
 
-  ci-info@2.0.0:
-    resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
-
   ci-info@3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
@@ -1133,10 +1113,6 @@ packages:
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
-  is-ci@2.0.0:
-    resolution: {integrity: sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==}
-    hasBin: true
-
   is-core-module@2.15.1:
     resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
     engines: {node: '>= 0.4'}
@@ -1311,10 +1287,6 @@ packages:
     resolution: {integrity: sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-util@26.6.2:
-    resolution: {integrity: sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==}
-    engines: {node: '>= 10.14.2'}
-
   jest-util@29.7.0:
     resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -1414,9 +1386,6 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
-  make-error@1.3.6:
-    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
-
   makeerror@1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
 
@@ -1438,11 +1407,6 @@ packages:
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
-  mkdirp@1.0.4:
-    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -1752,14 +1716,6 @@ packages:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
 
-  ts-jest@26.5.6:
-    resolution: {integrity: sha512-rua+rCP8DxpA8b4DQD/6X2HQS8Zy/xzViVYfEs2OQu68tkCuKLV0Md8pmX55+W24uRIyAsf/BajRfxOs+R2MKA==}
-    engines: {node: '>= 10'}
-    hasBin: true
-    peerDependencies:
-      jest: '>=26 <27'
-      typescript: '>=3.8 <5.0'
-
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
@@ -1863,10 +1819,6 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
-  yargs-parser@20.2.9:
-    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
-    engines: {node: '>=10'}
-
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
@@ -2307,14 +2259,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@jest/types@26.6.2':
-    dependencies:
-      '@types/istanbul-lib-coverage': 2.0.6
-      '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.16.5
-      '@types/yargs': 15.0.19
-      chalk: 4.1.2
-
   '@jest/types@29.6.3':
     dependencies:
       '@jest/schemas': 29.6.3
@@ -2477,7 +2421,7 @@ snapshots:
 
   '@swc/counter@0.1.3': {}
 
-  '@swc/jest@0.2.36(@swc/core@1.7.26)':
+  '@swc/jest@0.2.37(@swc/core@1.7.26)':
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
       '@swc/core': 1.7.26
@@ -2538,10 +2482,6 @@ snapshots:
 
   '@types/yargs-parser@21.0.3': {}
 
-  '@types/yargs@15.0.19':
-    dependencies:
-      '@types/yargs-parser': 21.0.3
-
   '@types/yargs@17.0.33':
     dependencies:
       '@types/yargs-parser': 21.0.3
@@ -2742,10 +2682,6 @@ snapshots:
       node-releases: 2.0.18
       update-browserslist-db: 1.1.0(browserslist@4.23.3)
 
-  bs-logger@0.2.6:
-    dependencies:
-      fast-json-stable-stringify: 2.1.0
-
   bser@2.1.1:
     dependencies:
       node-int64: 0.4.0
@@ -2773,8 +2709,6 @@ snapshots:
 
   char-regex@1.0.2: {}
 
-  ci-info@2.0.0: {}
-
   ci-info@3.9.0: {}
 
   cjs-module-lexer@1.4.1: {}
@@ -3127,10 +3061,6 @@ snapshots:
 
   is-arrayish@0.2.1: {}
 
-  is-ci@2.0.0:
-    dependencies:
-      ci-info: 2.0.0
-
   is-core-module@2.15.1:
     dependencies:
       hasown: 2.0.2
@@ -3470,15 +3400,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  jest-util@26.6.2:
-    dependencies:
-      '@jest/types': 26.6.2
-      '@types/node': 20.16.5
-      chalk: 4.1.2
-      graceful-fs: 4.2.11
-      is-ci: 2.0.0
-      micromatch: 4.0.8
-
   jest-util@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
@@ -3583,8 +3504,6 @@ snapshots:
     dependencies:
       semver: 7.6.3
 
-  make-error@1.3.6: {}
-
   makeerror@1.0.12:
     dependencies:
       tmpl: 1.0.5
@@ -3604,8 +3523,6 @@ snapshots:
     dependencies:
       brace-expansion: 1.1.11
 
-  mkdirp@1.0.4: {}
-
   ms@2.1.3: {}
 
   natural-compare@1.4.0: {}
@@ -3859,21 +3776,6 @@ snapshots:
 
   tree-kill@1.2.2: {}
 
-  ts-jest@26.5.6(jest@29.7.0(@types/node@20.16.5))(typescript@4.9.5):
-    dependencies:
-      bs-logger: 0.2.6
-      buffer-from: 1.1.2
-      fast-json-stable-stringify: 2.1.0
-      jest: 29.7.0(@types/node@20.16.5)
-      jest-util: 26.6.2
-      json5: 2.2.3
-      lodash: 4.17.21
-      make-error: 1.3.6
-      mkdirp: 1.0.4
-      semver: 7.6.3
-      typescript: 4.9.5
-      yargs-parser: 20.2.9
-
   tslib@1.14.1: {}
 
   tslib@2.7.0: {}
@@ -3959,8 +3861,6 @@ snapshots:
 
   yallist@3.1.1: {}
 
-  yargs-parser@20.2.9: {}
-
   yargs-parser@21.1.1: {}
 
   yargs@17.7.2:

.github/workflows/lock-issues.yml

@@ -17,7 +17,7 @@ jobs:
         uses: dessant/lock-threads@v5
         with:
           process-only: 'issues'
-          issue-inactive-days: '1'
+          issue-inactive-days: '7'
           exclude-any-issue-labels: 'status: awaiting-reply'
           log-output: true
           issue-comment: >

.github/workflows/main.yml

@@ -283,6 +283,7 @@ jobs:
           - fields-relationship
           - fields__collections__Array
           - fields__collections__Blocks
+          - fields__collections__Blocks#config.blockreferences.ts
           - fields__collections__Checkbox
           - fields__collections__Collapsible
           - fields__collections__ConditionalLogic
@@ -293,6 +294,7 @@ jobs:
           - fields__collections__JSON
           - fields__collections__Lexical__e2e__main
           - fields__collections__Lexical__e2e__blocks
+          - fields__collections__Lexical__e2e__blocks#config.blockreferences.ts
           - fields__collections__Number
           - fields__collections__Point
           - fields__collections__Radio

.vscode/settings.json

@@ -1,34 +1,9 @@
 {
   "npm.packageManager": "pnpm",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "[jsonc]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSaveMode": "file",
   "eslint.rules.customizations": [
@@ -43,12 +18,6 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   // Load .git-blame-ignore-revs file
   "gitlens.advanced.blame.customArguments": ["--ignore-revs-file", ".git-blame-ignore-revs"],
-  "[javascript][typescript][typescriptreact]": {
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "files.insertFinalNewline": true,
   "jestrunner.jestCommand": "pnpm exec cross-env NODE_OPTIONS=\"--no-deprecation\" node 'node_modules/jest/bin/jest.js'",
   "jestrunner.debugOptions": {
     "runtimeArgs": ["--no-deprecation"]

docs/admin/components.mdx

@@ -1,7 +1,7 @@
 ---
 title: Swap in your own React components
 label: Custom Components
-order: 40
+order: 20
 desc: Fully customize your Admin Panel by swapping in your own React components. Add fields, remove views, update routes and change functions to sculpt your perfect Dashboard.
 keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
@@ -54,7 +54,7 @@ const config = buildConfig({
 
 In order to ensure the Payload Config is fully Node.js compatible and as lightweight as possible, components are not directly imported into your config. Instead, they are identified by their file path for the Admin Panel to resolve on its own.
 
-Component Paths, by default, are relative to your project's base directory. This is either your current working directory, or the directory specified in `config.admin.baseDir`. To simplify Component Paths, you can also configure the base directory using the `admin.importMap.baseDir` property.
+Component Paths, by default, are relative to your project's base directory. This is either your current working directory, or the directory specified in `config.admin.importMap.baseDir`.
 
 Components using named exports are identified either by appending `#` followed by the export name, or using the `exportName` property. If the component is the default export, this can be omitted.
 

docs/admin/hooks.mdx

@@ -1,7 +1,7 @@
 ---
 title: React Hooks
 label: React Hooks
-order: 70
+order: 40
 desc: Make use of all of the powerful React hooks that Payload provides.
 keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
@@ -654,6 +654,26 @@ const ExampleCollection = {
   ]}
 />
 
+## useDocumentForm
+
+The `useDocumentForm` hook works the same way as the [useForm](#useform) hook, but it always gives you access to the top-level `Form` of a document. This is useful if you need to access the document's `Form` context from within a child  `Form`.
+
+An example where this could happen would be custom components within lexical blocks, as lexical blocks initialize their own child `Form`.
+
+```tsx
+'use client'
+
+import { useDocumentForm } from '@payloadcms/ui'
+
+const MyComponent: React.FC = () => {
+  const { fields: parentDocumentFields } = useDocumentForm()
+
+  return (
+    <p>The document's Form has ${Object.keys(parentDocumentFields).length} fields</p>
+  )
+}
+```
+
 ## useCollapsible
 
 The `useCollapsible` hook allows you to control parent collapsibles:
@@ -1016,3 +1036,117 @@ export const MySetStepNavComponent: React.FC<{
   return null
 }
 ```
+
+## usePayloadAPI
+
+The `usePayloadAPI` hook is a useful tool for making REST API requests to your Payload instance and handling responses reactively. It allows you to fetch and interact with data while automatically updating when parameters change.
+
+This hook returns an array with two elements:
+
+1. An object containing the API response.
+2. A set of methods to modify request parameters.
+
+**Example:**
+
+```tsx
+'use client'
+import { usePayloadAPI } from '@payloadcms/ui'
+
+const MyComponent: React.FC = () => {
+  // Fetch data from a collection item using its ID
+  const [{ data, error, isLoading }, { setParams }] = usePayloadAPI(
+    '/api/posts/123',
+    { initialParams: { depth: 1 } }
+  )
+
+  if (isLoading) return <p>Loading...</p>
+  if (error) return <p>Error: {error.message}</p>
+
+  return (
+    <div>
+      <h1>{data?.title}</h1>
+      <button onClick={() => setParams({ cacheBust: Date.now() })}>
+        Refresh Data
+      </button>
+    </div>
+  )
+}
+```
+
+**Arguments:**
+
+| Property      | Description                                                                                     |
+| ------------- | ----------------------------------------------------------------------------------------------- |
+| **`url`**     | The API endpoint to fetch data from. Relative URLs will be prefixed with the Payload API route. |
+| **`options`** | An object containing initial request parameters and initial state configuration.                |
+
+The `options` argument accepts the following properties:
+
+| Property            | Description                                                                                         |
+| ------------------- | --------------------------------------------------------------------------------------------------- |
+| **`initialData`**   | Uses this data instead of making an initial request. If not provided, the request runs immediately. |
+| **`initialParams`** | Defines the initial parameters to use in the request. Defaults to an empty object `{}`.             |
+
+**Returned Value:**
+
+The first item in the returned array is an object containing the following properties:
+
+| Property        | Description                                              |
+| --------------- | -------------------------------------------------------- |
+| **`data`**      | The API response data.                                   |
+| **`error`**     | If an error occurs, this contains the error object.      |
+| **`isLoading`** | A boolean indicating whether the request is in progress. |
+
+The second item is an object with the following methods:
+
+| Property        | Description                                                 |
+| --------------- | ----------------------------------------------------------- |
+| **`setParams`** | Updates request parameters, triggering a refetch if needed. |
+
+#### Updating Data
+
+The `setParams` function can be used to update the request and trigger a refetch:
+
+```tsx
+setParams({ depth: 2 })
+```
+
+This is useful for scenarios where you need to trigger another fetch regardless of the `url` argument changing.
+
+## useRouteTransition
+
+Route transitions are useful in showing immediate visual feedback to the user when navigating between pages. This is especially useful on slow networks when navigating to data heavy or process intensive pages.
+
+By default, any instances of `Link` from `@payloadcms/ui` will trigger route transitions dy default.
+
+```tsx
+import { Link } from '@payloadcms/ui'
+
+const MyComponent = () => {
+  return (
+    <Link href="/somewhere">
+      Go Somewhere
+    </Link>
+  )
+}
+```
+
+You can also trigger route transitions programmatically, such as when using `router.push` from `next/router`. To do this, wrap your function calls with the `startRouteTransition` method provided by the `useRouteTransition` hook.
+
+```ts
+'use client'
+import React, { useCallback } from 'react'
+import { useTransition } from '@payloadcms/ui'
+import { useRouter } from 'next/navigation'
+
+const MyComponent: React.FC = () => {
+  const router = useRouter()
+  const { startRouteTransition } = useRouteTransition()
+
+  const redirectSomewhere = useCallback(() => {
+    startRouteTransition(() => router.push('/somewhere'))
+  }, [startRouteTransition, router])
+
+  // ...
+}
+```

docs/admin/overview.mdx

@@ -6,7 +6,7 @@ desc: Manage your data and customize the Payload Admin Panel by swapping in your
 keywords: admin, components, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
 
-Payload dynamically generates a beautiful, [fully type-safe](../typescript/overview) Admin Panel to manage your users and data. It is highly performant, even with 100+ fields, and is translated in over 30 languages. Within the Admin Panel you can manage content, [render your site](../live-preview/overview), preview drafts, [diff versions](../versions/overview), and so much more.
+Payload dynamically generates a beautiful, [fully type-safe](../typescript/overview) Admin Panel to manage your users and data. It is highly performant, even with 100+ fields, and is translated in over 30 languages. Within the Admin Panel you can manage content, [render your site](../live-preview/overview), [preview drafts](./preview), [diff versions](../versions/overview), and so much more.
 
 The Admin Panel is designed to [white-label your brand](https://payloadcms.com/blog/white-label-admin-ui). You can endlessly customize and extend the Admin UI by swapping in your own [Custom Components](./components)—everything from simple field labels to entire views can be modified or replaced to perfectly tailor the interface for your editors.
 
@@ -57,7 +57,7 @@ The `admin` directory contains all the _pages_ related to the interface itself,
 
 <Banner type="warning">
   **Note:**
-  If you don't intend to use the Admin Panel, [REST API](../rest/overview), or [GraphQL API](../graphql/overview), you can opt-out by simply deleting their corresponding directories within your Next.js app. The overhead, however, is completely constrained to these routes, and will not slow down or affect Payload outside when not in use.
+  If you don't intend to use the Admin Panel, [REST API](../rest-api/overview), or [GraphQL API](../graphql/overview), you can opt-out by simply deleting their corresponding directories within your Next.js app. The overhead, however, is completely constrained to these routes, and will not slow down or affect Payload outside when not in use.
 </Banner>
 
 Finally, the `custom.scss` file is where you can add or override globally-oriented styles in the Admin Panel, such as modify the color palette. Customizing the look and feel through CSS alone is a powerful feature of the Admin Panel, [more on that here](./customizing-css).
@@ -99,6 +99,7 @@ The following options are available:
 | **`routes`**                   | Replace built-in Admin Panel routes with your own custom routes. [More details](#customizing-routes).                                                                 |
 | **`suppressHydrationWarning`** | If set to `true`, suppresses React hydration mismatch warnings during the hydration of the root `<html>` tag. Defaults to `false`.                                      |
 | **`theme`**                    | Restrict the Admin Panel theme to use only one of your choice. Default is `all`.                                                                                      |
+| **`timezones`**                 | Configure the timezone settings for the admin panel. [More details](#timezones)                                                                                       |
 | **`user`**                     | The `slug` of the Collection that you want to allow to login to the Admin Panel. [More details](#the-admin-user-collection).                                          |
 
 <Banner type="success">
@@ -242,3 +243,21 @@ The Payload Admin Panel is translated in over [30 languages and counting](https:
 ## Light and Dark Modes
 
 Users in the Admin Panel have the ability to choose between light mode and dark mode for their editing experience. Users can select their preferred theme from their account page. Once selected, it is saved to their user's preferences and persisted across sessions and devices. If no theme was selected, the Admin Panel will automatically detect the operation system's theme and use that as the default.
+
+## Timezones
+
+The `admin.timezones` configuration allows you to configure timezone settings for the Admin Panel. You can customise the available list of timezones and in the future configure the default timezone for the Admin Panel and for all users.
+
+The following options are available:
+
+| Option            | Description                                     |
+| ----------------- | ----------------------------------------------- |
+| `supportedTimezones`         | An array of label/value options for selectable timezones where the value is the IANA name eg. `America/Detroit`                        |
+| `defaultTimezone`               | The `value` of the default selected timezone. eg. `America/Los_Angeles`                        |
+
+We validate the supported timezones array by checking the value against the list of IANA timezones supported via the Intl API, specifically `Intl.supportedValuesOf('timeZone')`.
+
+<Banner type="info">
+  **Important**
+  You must enable timezones on each individual date field via `timezone: true`. See [Date Fields](../fields/overview#date) for more information.
+</Banner>

docs/admin/preview.mdx

@@ -0,0 +1,217 @@
+---
+title: Preview
+label: Preview
+order: 50
+desc: Enable links to your front-end to preview published or draft content.
+keywords: admin, components, preview, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
+---
+
+Preview is a feature that allows you to generate a direct link to your front-end application. When enabled, a "preview" button will appear on the Edit View within the [Admin Panel](./overview) with an href pointing to the URL you provide. This will provide your editors with a quick way of navigating to the front-end application where that Document's data is represented. Otherwise, they'd have to determine that URL themselves which is not always straightforward especially in complex apps.
+
+The Preview feature can also be used to achieve something known as "Draft Preview". With Draft Preview, you can navigate to your front-end application and enter "draft mode", where your queries are modified to fetch draft content instead of published content. This is useful for seeing how your content will look before being published. [More details](#draft-preview).
+
+<Banner type="warning">
+  **Note:**
+  Preview is different than [Live Preview](../live-preview/overview). Live Preview loads your app within an iframe and renders it in the Admin Panel allowing you to see changes in real-time. Preview, on the other hand, allows you to generate a direct link to your front-end application.
+</Banner>
+
+To add Preview, pass a function to the `admin.preview` property in any [Collection Config](../configuration/collections#admin-options) or [Global Config](../configuration/globals#admin-options):
+
+```ts
+import type { CollectionConfig } from 'payload'
+
+export const Pages: CollectionConfig = {
+  slug: 'pages',
+  admin: {
+    preview: ({ slug }) => `http://localhost:3000/${slug}`,
+  },
+  fields: [
+    {
+      name: 'slug',
+      type: 'text',
+    }
+  ],
+}
+```
+
+## Options
+
+The `preview` function resolves to a string that points to your front-end application with additional URL parameters. This can be an absolute URL or a relative path, and can run async if needed.
+
+The following arguments are provided to the `preview` function:
+
+| Path               | Description                                                                                                       |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------- |
+| **`doc`**         | The data of the Document being edited. This includes changes that have not yet been saved.                         |
+| **`options`**     | An object with additional properties.                                                                              |
+
+The `options` object contains the following properties:
+
+| Path               | Description                                                                                                       |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------- |
+| **`locale`**      | The current locale of the Document being edited.                                                                   |
+| **`req`**         | The Payload Request object.                                                                                        |
+| **`token`**       | The JWT token of the currently authenticated in user.                                                              |
+
+If your application requires a fully qualified URL, such as within deploying to Vercel Preview Deployments, you can use the `req` property to build this URL:
+
+```ts
+preview: (doc, { req }) => `${req.protocol}//${req.host}/${doc.slug}` // highlight-line
+```
+
+## Draft Preview
+
+The Preview feature can be used to achieve "Draft Preview". After clicking the preview button from the Admin Panel, you can enter into "draft mode" within your front-end application. This will allow you to adjust your page queries to include the `draft: true` param. When this param is present on the request, Payload will send back a draft document as opposed to a published one based on the document's `_status` field.
+
+To enter draft mode, the URL provided to the `preview` function can point to a custom endpoint in your front-end application that sets a cookie or session variable to indicate that draft mode is enabled. This is framework specific, so the mechanisms here very from framework to framework although the underlying concept is the same.
+
+### Next.js
+
+If you're using Next.js, you can do the following code to enter [Draft Mode](https://nextjs.org/docs/app/building-your-application/configuring/draft-mode).
+
+#### Step 1: Format the Preview URL
+
+First, format your `admin.preview` function to point to a custom endpoint that you'll open on your front-end. This URL should include a few key query search params:
+
+```ts
+import type { CollectionConfig } from 'payload'
+
+export const Pages: CollectionConfig = {
+  slug: 'pages',
+  admin: {
+    preview: ({ slug, collection }) => {
+      const encodedParams = new URLSearchParams({
+        slug,
+        collection,
+        path: `/${slug}`,
+        previewSecret: process.env.PREVIEW_SECRET || ''
+      })
+
+      return `/preview?${encodedParams.toString()}` // highlight-line
+    }
+  },
+  fields: [
+    {
+      name: 'slug',
+      type: 'text',
+    }
+  ],
+}
+```
+
+#### Step 2: Create the Preview Route
+
+Then, create an API route that verifies the preview secret, authenticates the user, and enters draft mode:
+
+`/app/preview/route.ts`
+
+```ts
+import type { CollectionSlug, PayloadRequest } from 'payload'
+import { getPayload } from 'payload'
+
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+import configPromise from '@payload-config'
+
+export async function GET(
+  req: {
+    cookies: {
+      get: (name: string) => {
+        value: string
+      }
+    }
+  } & Request,
+): Promise<Response> {
+  const payload = await getPayload({ config: configPromise })
+
+  const { searchParams } = new URL(req.url)
+
+  const path = searchParams.get('path')
+  const collection = searchParams.get('collection') as CollectionSlug
+  const slug = searchParams.get('slug')
+  const previewSecret = searchParams.get('previewSecret')
+
+  if (previewSecret !== process.env.PREVIEW_SECRET) {
+    return new Response('You are not allowed to preview this page', { status: 403 })
+  }
+
+  if (!path || !collection || !slug) {
+    return new Response('Insufficient search params', { status: 404 })
+  }
+
+  if (!path.startsWith('/')) {
+    return new Response('This endpoint can only be used for relative previews', { status: 500 })
+  }
+
+  let user
+
+  try {
+    user = await payload.auth({
+      req: req as unknown as PayloadRequest,
+      headers: req.headers,
+    })
+  } catch (error) {
+    payload.logger.error({ err: error }, 'Error verifying token for live preview')
+    return new Response('You are not allowed to preview this page', { status: 403 })
+  }
+
+  const draft = await draftMode()
+
+  if (!user) {
+    draft.disable()
+    return new Response('You are not allowed to preview this page', { status: 403 })
+  }
+
+  // You can add additional checks here to see if the user is allowed to preview this page
+
+  draft.enable()
+
+  redirect(path)
+}
+```
+
+#### Step 3: Query Draft Content
+
+Finally, in your front-end application, you can detect draft mode and adjust your queries to include drafts:
+
+`/app/[slug]/page.tsx`
+
+```ts
+export default async function Page({ params: paramsPromise }) {
+  const { slug = 'home' } = await paramsPromise
+
+  const { isEnabled: isDraftMode } = await draftMode()
+
+  const payload = await getPayload({ config })
+
+  const page = await payload.find({
+    collection: 'pages',
+    depth: 0,
+    draft: isDraftMode, // highlight-line
+    limit: 1,
+    overrideAccess: isDraftMode,
+    where: {
+      slug: {
+        equals: slug,
+      },
+    },
+  })?.then(({ docs }) => docs?.[0])
+
+  if (page === null) {
+    return notFound()
+  }
+
+  return (
+    <main>
+      <h1>{page?.title}</h1>
+    </main>
+  )
+}
+```
+
+<Banner type="success">
+  **Note:**
+  For fully working example of this, check of the official [Draft Preview Example](https://github.com/payloadcms/payload/tree/main/examples/draft-preview) in the [Examples Directory](https://github.com/payloadcms/payload/tree/main/examples).
+</Banner>
+

docs/admin/views.mdx

@@ -1,7 +1,7 @@
 ---
 title: Customizing Views
 label: Customizing Views
-order: 50
+order: 30
 desc:
 keywords:
 ---
@@ -289,7 +289,7 @@ The following options are available:
 
 ### Document Tabs
 
-Each Document View can be given a new tab in the Edit View, if desired. Tabs are highly configurable, from as simple as changing the label to swapping out the entire component, they can be modified in any way. To add or customize tabs in the Edit View, use the `tab` key:
+Each Custom View can be given a new tab in the Edit View, if desired. Tabs are highly configurable, from as simple as changing the label to swapping out the entire component, they can be modified in any way. To add or customize tabs in the Edit View, use the `tab` key:
 
 ```ts
 import type { SanitizedCollectionConfig } from 'payload'

docs/configuration/collections.mdx

@@ -124,7 +124,7 @@ The following options are available:
 | **`enableRichTextLink`**         | The [Rich Text](../fields/rich-text) field features a `Link` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default.                                   |
 | **`enableRichTextRelationship`** | The [Rich Text](../fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default.                           |
 | **`meta`**                       | Page metadata overrides to apply to this Collection within the Admin Panel. [More details](../admin/metadata).                                                                                                                      |
-| **`preview`**                    | Function to generate preview URLs within the Admin Panel that can point to your app. [More details](#preview).                                                                                                               |
+| **`preview`**                    | Function to generate preview URLs within the Admin Panel that can point to your app. [More details](../admin/preview).                                                                                                               |
 | **`livePreview`**                | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview).                                                                                                |
 | **`components`**                 | Swap in your own React components to be used within this Collection. [More details](#custom-components).                                                                                                                     |
 | **`listSearchableFields`**       | Specify which fields should be searched in the List search view. [More details](#list-searchable-fields).                                                                                                                    |
@@ -162,7 +162,7 @@ The following options are available:
 | **`edit.SaveButton`**      | Replace the default Save Button with a Custom Component. [Drafts](../versions/drafts) must be disabled.                                    |
 | **`edit.SaveDraftButton`** | Replace the default Save Draft Button with a Custom Component. [Drafts](../versions/drafts) must be enabled and autosave must be disabled. |
 | **`edit.PublishButton`**   | Replace the default Publish Button with a Custom Component. [Drafts](../versions/drafts) must be enabled.                                  |
-| **`edit.PreviewButton`**   | Replace the default Preview Button with a Custom Component. [Preview](#preview) must be enabled.                                           |
+| **`edit.PreviewButton`**   | Replace the default Preview Button with a Custom Component. [Preview](../admin/preview) must be enabled.                                           |
 | **`edit.Upload`**          | Replace the default Upload component with a Custom Component. [Upload](../upload/overview) must be enabled.                                |
 | **`views`**                | Override or create new views within the Admin Panel. [More details](../admin/views).                                                              |
 
@@ -171,51 +171,6 @@ The following options are available:
   For details on how to build Custom Components, see [Building Custom Components](../admin/components#building-custom-components).
 </Banner>
 
-### Preview
-
-It is possible to display a Preview Button within the Edit View of the Admin Panel. This will allow editors to visit the frontend of your app the corresponds to the document they are actively editing. This way they can preview the latest, potentially unpublished changes.
-
-To configure the Preview Button, set the `admin.preview` property to a function in your Collection Config:
-
-```ts
-import type { CollectionConfig } from 'payload'
-
-export const Posts: CollectionConfig = {
-  // ...
-  admin: {
-    // highlight-start
-    preview: (doc, { locale }) => {
-      if (doc?.slug) {
-        return `/${doc.slug}?locale=${locale}`
-      }
-
-      return null
-    },
-    // highlight-end
-  },
-}
-```
-
-The `preview` property resolves to a string that points to your front-end application with additional URL parameters. This can be an absolute URL or a relative path.
-
-The preview function receives two arguments:
-
-| Argument | Description |
-| --- | --- |
-| **`doc`** | The Document being edited. |
-| **`ctx`** | An object containing `locale`, `token`, and `req` properties. The `token` is the currently logged-in user's JWT. |
-
-If your application requires a fully qualified URL, such as within deploying to Vercel Preview Deployments, you can use the `req` property to build this URL:
-
-```ts
-preview: (doc, { req }) => `${req.protocol}//${req.host}/${doc.slug}` // highlight-line
-```
-
-<Banner type="success">
-  **Note:**
-  For fully working example of this, check of the official [Draft Preview Example](https://github.com/payloadcms/payload/tree/main/examples/draft-preview) in the [Examples Directory](https://github.com/payloadcms/payload/tree/main/examples).
-</Banner>
-
 ### Pagination
 
 All Collections receive their own List View which displays a paginated list of documents that can be sorted and filtered. The pagination behavior of the List View can be customized on a per-Collection basis, and uses the same [Pagination](../queries/pagination) API that Payload provides.

docs/configuration/globals.mdx

@@ -120,7 +120,7 @@ The following options are available:
 | **`group`**       | Text or localization object used to group Collection and Global links in the admin navigation. Set to `false` to hide the link from the navigation while keeping its routes accessible. |
 | **`hidden`**      | Set to true or a function, called with the current user, returning true to exclude this Global from navigation and admin routing. |
 | **`components`**  | Swap in your own React components to be used within this Global. [More details](#custom-components).                           |
-| **`preview`**     | Function to generate a preview URL within the Admin Panel for this Global that can point to your app. [More details](#preview).           |
+| **`preview`**     | Function to generate a preview URL within the Admin Panel for this Global that can point to your app. [More details](../admin/preview).           |
 | **`livePreview`** | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview).          |
 | **`hideAPIURL`**  | Hides the "API URL" meta field while editing documents within this collection.                                                    |
 | **`meta`**        | Page metadata overrides to apply to this Global within the Admin Panel. [More details](../admin/metadata).                                                                           |
@@ -151,7 +151,7 @@ The following options are available:
 | **`elements.SaveButton`**      | Replace the default Save Button with a Custom Component. [Drafts](../versions/drafts) must be disabled.                                    |
 | **`elements.SaveDraftButton`** | Replace the default Save Draft Button with a Custom Component. [Drafts](../versions/drafts) must be enabled and autosave must be disabled. |
 | **`elements.PublishButton`**   | Replace the default Publish Button with a Custom Component. [Drafts](../versions/drafts) must be enabled.                                  |
-| **`elements.PreviewButton`**   | Replace the default Preview Button with a Custom Component. [Preview](#preview) must be enabled.                                         |
+| **`elements.PreviewButton`**   | Replace the default Preview Button with a Custom Component. [Preview](../admin/preview) must be enabled.                                         |
 | **`views`**                    | Override or create new views within the Admin Panel. [More details](../admin/views).                                     |
 
 <Banner type="success">
@@ -159,43 +159,6 @@ The following options are available:
   For details on how to build Custom Components, see [Building Custom Components](../admin/components#building-custom-components).
 </Banner>
 
-### Preview
-
-It is possible to display a Preview Button within the Edit View of the Admin Panel. This will allow editors to visit the frontend of your app the corresponds to the document they are actively editing. This way they can preview the latest, potentially unpublished changes.
-
-To configure the Preview Button, set the `admin.preview` property to a function in your Global Config:
-
-```ts
-import { GlobalConfig } from 'payload'
-
-export const MainMenu: GlobalConfig = {
-  // ...
-  admin: {
-    // highlight-start
-    preview: (doc, { locale }) => {
-      if (doc?.slug) {
-        return `/${doc.slug}?locale=${locale}`
-      }
-
-      return null
-    },
-    // highlight-end
-  },
-}
-```
-
-The preview function receives two arguments:
-
-| Argument | Description |
-| --- | --- |
-| **`doc`** | The Document being edited. |
-| **`ctx`** | An object containing `locale` and `token` properties. The `token` is the currently logged-in user's JWT. |
-
-<Banner type="success">
-  **Note:**
-  For fully working example of this, check of the official [Draft Preview Example](https://github.com/payloadcms/payload/tree/main/examples/draft-preview) in the [Examples Directory](https://github.com/payloadcms/payload/tree/main/examples).
-</Banner>
-
 ## GraphQL
 
 You can completely disable GraphQL for this global by passing `graphQL: false` to your global config. This will completely disable all queries, mutations, and types from appearing in your GraphQL schema.

docs/configuration/i18n.mdx

@@ -10,7 +10,13 @@ The [Admin Panel](../admin/overview) is translated in over [30 languages and cou
 
 By default, Payload comes preinstalled with English, but you can easily load other languages into your own application. Languages are automatically detected based on the request. If no language is detected, or if the user's language is not yet supported by your application, English will be chosen.
 
-To configure I18n, use the `i18n` key in your [Payload Config](./overview):
+To add I18n to your project, you first need to install the `@payloadcms/translations` package:
+
+```bash
+pnpm install @payloadcms/translations
+```
+
+Once installed, it can be configured using the `i18n` key in your [Payload Config](./overview):
 
 ```ts
 import { buildConfig } from 'payload'
@@ -166,7 +172,11 @@ export const Articles: CollectionConfig = {
 }
 ```
 
-## Node
+## Changing Languages
+
+Users can change their preferred language in their account settings or by otherwise manipulating their [User Preferences](../admin/preferences).
+
+## Node.js#node
 
 Payload's backend sets the language on incoming requests before they are handled. This allows backend validation to return error messages in the user's own language or system generated emails to be sent using the correct translation. You can make HTTP requests with the `accept-language` header and Payload will use that language.
 
@@ -174,7 +184,7 @@ Anywhere in your Payload app that you have access to the `req` object, you can a
 
 ## TypeScript
 
-In order to use custom translations in your project, you need to provide the types for the translations.
+In order to use [Custom Translations](#custom-translations) in your project, you need to provide the types for the translations.
 
 Here we create a shareable translations object. We will import this in both our custom components and in our Payload config.
 
@@ -253,4 +263,3 @@ const field: Field = {
   ) => t('fields:addLabel'),
 }
 ```
-

docs/configuration/localization.mdx

@@ -77,11 +77,12 @@ export default buildConfig({
 
 The following options are available:
 
-| Option         | Description                                                                                                                    |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| **`locales`**  | Array of all the languages that you would like to support. [More details](#locales)                                            |
-| **`defaultLocale`** | Required string that matches one of the locale codes from the array provided. By default, if no locale is specified, documents will be returned in this locale. |
-| **`fallback`** | Boolean enabling "fallback" locale functionality. If a document is requested in a locale, but a field does not have a localized value corresponding to the requested locale, then if this property is enabled, the document will automatically fall back to the fallback locale value. If this property is not enabled, the value will not be populated unless a fallback is explicitly provided in the request. True by default. |
+| Option                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                       |
+|------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **`locales`**                | Array of all the languages that you would like to support. [More details](#locales)                                                                                                                                                                                                                                                                                                                                               |
+| **`defaultLocale`**          | Required string that matches one of the locale codes from the array provided. By default, if no locale is specified, documents will be returned in this locale.                                                                                                                                                                                                                                                                   |
+| **`fallback`**               | Boolean enabling "fallback" locale functionality. If a document is requested in a locale, but a field does not have a localized value corresponding to the requested locale, then if this property is enabled, the document will automatically fall back to the fallback locale value. If this property is not enabled, the value will not be populated unless a fallback is explicitly provided in the request. True by default. |
+| **`filterAvailableLocales`** | A function that is called with the array of `locales` and the `req`,  it should return locales to show in admin UI selector. [See more](#filter-available-options).                                                                                                                                                                                                                                                                         |
 
 ### Locales
 
@@ -100,6 +101,35 @@ The locale codes do not need to be in any specific format. It's up to you to def
 
 _* An asterisk denotes that a property is required._
 
+#### Filter Available Options
+In some projects you may want to filter the available locales shown in the admin UI selector. You can do this by providing a `filterAvailableLocales` function in your Payload Config. This is called on the server side and is passed the array of locales. This means that you can determine what locales are visible in the localizer selection menu at the top of the admin panel. You could do this per user, or implement a function that scopes these to tenants and more. Here is an example using request headers in a multi-tenant application:
+
+```ts
+// ... rest of payload config
+localization: {
+  defaultLocale: 'en',
+  locales: ['en', 'es'],
+  filterAvailableLocales: async ({ req, locales }) => {
+    if (getTenantFromCookie(req.headers, 'text')) {
+      const fullTenant = await req.payload.findByID({
+        id: getTenantFromCookie(req.headers, 'text') as string,
+        collection: 'tenants',
+        req,
+      })
+      if (fullTenant && fullTenant.supportedLocales?.length) {
+        return locales.filter((locale) => {
+          return fullTenant.supportedLocales?.includes(locale.code as 'en' | 'es')
+        })
+      }
+    }
+    return locales
+  },
+}
+```
+
+Since the filtering happens at the root level of the application and its result is not calculated every time you navigate to a new page, you may want to call `router.refresh` in a custom component that watches when values that affect the result change. In the example above, you would want to do this when `supportedLocales` changes on the tenant document.
+
+
 ## Field Localization
 
 Payload Localization works on a **field** level—not a document level. In addition to configuring the base Payload Config to support Localization, you need to specify each field that you would like to localize.

docs/configuration/overview.mdx

@@ -87,6 +87,7 @@ The following options are available:
 | **`upload`**               | Base Payload upload configuration. [More details](../upload/overview#payload-wide-upload-options).                                                                                                                           |
 | **`routes`**               | Control the routing structure that Payload binds itself to. [More details](../admin/overview#root-level-routes).                                                                                                             |
 | **`email`**                | Configure the Email Adapter for Payload to use. [More details](../email/overview).                                                                                                                                           |
+| **`onInit`**               | A function that is called immediately following startup that receives the Payload instance as its only argument.                                                                                                             |
 | **`debug`**                | Enable to expose more detailed error information.                                                                                                                                                                            |
 | **`telemetry`**            | Disable Payload telemetry by passing `false`. [More details](#telemetry).                                                                                                                                                    |
 | **`rateLimit`**            | Control IP-based rate limiting for all Payload resources. Used to prevent DDoS attacks, etc. [More details](../production/preventing-abuse#rate-limiting-requests).                                                          |
@@ -181,7 +182,7 @@ If none was in either location, Payload will finally check the `dist` directory.
 
 ### Customizing the Config Location
 
-In addition to the above automated detection, you can specify your own location for the Payload Config. This can be useful in situations where your config is not in a standard location, or you wish to switch between multiple configurations. To do this, Payload exposes an [Environment Variable](./environment-variables) to bypass all automatic config detection.
+In addition to the above automated detection, you can specify your own location for the Payload Config. This can be useful in situations where your config is not in a standard location, or you wish to switch between multiple configurations. To do this, Payload exposes an [Environment Variable](../configuration/environment-vars) to bypass all automatic config detection.
 
 To use a custom config location, set the `PAYLOAD_CONFIG_PATH` environment variable:
 

docs/fields/blocks.mdx

@@ -6,7 +6,7 @@ desc: The Blocks Field is a great layout build and can be used to construct any
 keywords: blocks, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
 
-The Blocks Field is **incredibly powerful** storing an array of objects based on the fields that your define, where each item in the array is a "block" with its own unique schema.
+The Blocks Field is **incredibly powerful**, storing an array of objects based on the fields that you define, where each item in the array is a "block" with its own unique schema.
 
 Blocks are a great way to create a flexible content model that can be used to build a wide variety of content types, including:
 
@@ -64,7 +64,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Blocks Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Blocks Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'
@@ -295,6 +295,70 @@ export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = ({
 }
 ```
 
+## Block References
+
+If you have multiple blocks used in multiple places, your Payload Config can grow in size, potentially sending more data to the client and requiring more processing on the server. However, you can optimize performance by defining each block **once** in your Payload Config and then referencing its slug wherever it's used instead of passing the entire block config.
+
+To do this, define the block in the `blocks` array of the Payload Config. Then, in the Blocks Field, pass the block slug to the `blockReferences` array - leaving the `blocks` array empty for compatibility reasons.
+
+```ts
+import { buildConfig } from 'payload'
+import { lexicalEditor, BlocksFeature } from '@payloadcms/richtext-lexical'
+
+// Payload Config
+const config = buildConfig({
+  // Define the block once
+  blocks: [
+    {
+      slug: 'TextBlock',
+      fields: [
+        {
+          name: 'text',
+          type: 'text',
+        },
+      ],
+    },
+  ],
+  collections: [
+    {
+      slug: 'collection1',
+      fields: [
+        {
+          name: 'content',
+          type: 'blocks',
+          // Reference the block by slug
+          blockReferences: ['TextBlock'],
+          blocks: [], // Required to be empty, for compatibility reasons
+        },
+      ],
+    },
+     {
+      slug: 'collection2',
+      fields: [
+        {
+          name: 'editor',
+          type: 'richText',
+          editor: lexicalEditor({
+            BlocksFeature({
+              // Same reference can be reused anywhere, even in the lexical editor, without incurred performance hit
+              blocks: ['TextBlock'],
+            })
+          })
+        },
+      ],
+    },
+  ],
+})
+```
+
+<Banner type="warning">
+  **Reminder:**
+  Blocks referenced in the `blockReferences` array are treated as isolated from the collection / global config. This has the following implications:
+
+  1. The block config cannot be modified or extended in the collection config. It will be identical everywhere it's referenced.
+  2. Access control for blocks referenced in the `blockReferences` are run only once - data from the collection will not be available in the block's access control.
+</Banner>
+
 ## TypeScript
 
 As you build your own Block configs, you might want to store them in separate files but retain typing accordingly. To do so, you can import and use Payload's `Block` type:

docs/fields/code.mdx

@@ -54,7 +54,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Code Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Code Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'

docs/fields/collapsible.mdx

@@ -44,7 +44,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Collapsible Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Collapsible Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'

docs/fields/date.mdx

@@ -43,6 +43,7 @@ export const MyDateField: Field = {
 | **`required`**         | Require this field to have a value.                                                                                                                                         |
 | **`admin`**            | Admin-specific configuration. [More details](#admin-options).                                                                                                               |
 | **`custom`**           | Extension point for adding custom data (e.g. for plugins)                                                                                                                   |
+| **`timezone`** *           | Set to `true` to enable timezone selection on this field. [More details](#timezones).                                                                                                                                                                |
 | **`typescriptSchema`** | Override field type generation with providing a JSON schema                                                                                                                 |
 | **`virtual`**          | Provide `true` to disable field in the database. See [Virtual Fields](https://payloadcms.com/blog/learn-how-virtual-fields-can-help-solve-common-cms-challenges)            |
 
@@ -50,7 +51,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Date Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Date Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'
@@ -222,3 +223,23 @@ export const CustomDateFieldLabelClient: DateFieldLabelClientComponent = ({
 }
 ```
 
+## Timezones
+
+To enable timezone selection on a Date field, set the `timezone` property to `true`:
+
+```ts
+{
+  name: 'date',
+  type: 'date',
+  timezone: true,
+}
+```
+
+This will add a dropdown to the date picker that allows users to select a timezone. The selected timezone will be saved in the database along with the date in a new column named `date_tz`.
+
+You can customise the available list of timezones in the [global admin config](../admin/overview#timezones).
+
+<Banner type='info'>
+  **Good to know:**
+  The date itself will be stored in UTC so it's up to you to handle the conversion to the user's timezone when displaying the date in your frontend.
+</Banner>

docs/fields/email.mdx

@@ -51,7 +51,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Email Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Email Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'

docs/fields/group.mdx

@@ -55,7 +55,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Group Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Group Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'

docs/fields/json.mdx

@@ -53,7 +53,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the JSON Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the JSON Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'

docs/fields/number.mdx

@@ -56,7 +56,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Number Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Number Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'

docs/fields/overview.mdx

@@ -1,9 +1,9 @@
 ---
-title: Fields Overview
+description: Fields are the building blocks of Payload, find out how to add or remove a field, change field type, add hooks, define Access Control and Validation.
+keywords: overview, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 label: Overview
 order: 10
-desc: Fields are the building blocks of Payload, find out how to add or remove a field, change field type, add hooks, define Access Control and Validation.
-keywords: overview, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
+title: Fields Overview
 ---
 
 Fields are the building blocks of Payload. They define the schema of the Documents that will be stored in the [Database](../database/overview), as well as automatically generate the corresponding UI within the [Admin Panel](../admin/overview).
@@ -48,8 +48,7 @@ export const Page: CollectionConfig = {
 ```
 
 <Banner type="warning">
-  **Reminder:**
-  Each field is an object with at least the `type` property. This matches the field to its corresponding Field Type. [More details](#field-options).
+  **Reminder:** Each field is an object with at least the `type` property. This matches the field to its corresponding Field Type. [More details](#field-options).
 </Banner>
 
 There are three main categories of fields in Payload:
@@ -58,7 +57,7 @@ There are three main categories of fields in Payload:
 - [Presentational Fields](#presentational-fields)
 - [Virtual Fields](#virtual-fields)
 
-To begin writing fields, first determine which [Field Type](#field-types) best supports your application. Then to author your field accordingly using the [Field Options](#field-options) for your chosen field type.
+To begin writing fields, first determine which [Field Type](#field-types) best supports your application. Then author your field accordingly using the [Field Options](#field-options) for your chosen field type.
 
 ### Data Fields
 
@@ -91,10 +90,10 @@ Presentational Fields do not store data in the database. Instead, they are used
 
 Here are the available Presentational Fields:
 
-- [Collapsible](/docs/fields/collapsible) - nests fields within a collapsible component
-- [Row](/docs/fields/row) - aligns fields horizontally
-- [Tabs (Unnamed)](/docs/fields/tabs) - nests fields within a tabbed layout
-- [UI](/docs/fields/ui) - blank field for custom UI components
+- [Collapsible](../fields/collapsible) - nests fields within a collapsible component
+- [Row](../fields/row) - aligns fields horizontally
+- [Tabs (Unnamed)](../fields/tabs) - nests fields within a tabbed layout
+- [UI](../fields/ui) - blank field for custom UI components
 
 ### Virtual Fields
 
@@ -102,11 +101,10 @@ Virtual fields are used to display data that is not stored in the database. They
 
 Here are the available Virtual Fields:
 
-- [Join](/docs/fields/join) - achieves two-way data binding between fields
+- [Join](../fields/join) - achieves two-way data binding between fields
 
 <Banner type="success">
-  **Tip:**
-  Don't see a built-in field type that you need? Build it! Using a combination of [Field Validations](#validation) and [Custom Components](../admin/components), you can override the entirety of how a component functions within the [Admin Panel](../admin/overview) to effectively create your own field type.
+  **Tip:** Don't see a built-in field type that you need? Build it! Using a combination of [Field Validations](#validation) and [Custom Components](../admin/components), you can override the entirety of how a component functions within the [Admin Panel](../admin/overview) to effectively create your own field type.
 </Banner>
 
 ## Field Options
@@ -147,10 +145,10 @@ Payload reserves various field names for internal use. Using reserved field name
 
 The following field names are forbidden and cannot be used:
 
-  - `__v`
-  - `salt`
-  - `hash`
-  - `file`
+- `__v`
+- `salt`
+- `hash`
+- `file`
 
 ### Field-level Hooks
 
@@ -241,8 +239,7 @@ export const myField: Field = {
 ```
 
 <Banner type="success">
-  **Tip:**
-  You can use async `defaultValue` functions to fill fields with data from API requests or Local API using `req.payload`.
+  **Tip:** You can use async `defaultValue` functions to fill fields with data from API requests or Local API using `req.payload`.
 </Banner>
 
 ### Validation
@@ -265,10 +262,10 @@ Custom validation functions should return either `true` or a `string` representi
 
 The following arguments are provided to the `validate` function:
 
-| Argument | Description                                                                                   |
-| -------- | --------------------------------------------------------------------------------------------- |
-| `value`  | The value of the field being validated.                                                        |
-| `ctx`   | An object with additional data and context. [More details](#validation-context) |
+|    Argument    |    Description                                                                                      |
+| --- | --- |
+|    `value`     |    The value of the field being validated.                                                           |
+|    `ctx`      |    An object with additional data and context. [More details](#validation-context)    |
 
 #### Validation Context
 
@@ -289,14 +286,14 @@ export const MyField: Field = {
 
 The following additional properties are provided in the `ctx` object:
 
-| Property      | Description                                                                                                                           |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `data`        | An object containing the full collection or global document currently being edited.                                                   |
-| `siblingData` | An object containing document data that is scoped to only fields within the same parent of this field.                                |
-| `operation`   | Will be `create` or `update` depending on the UI action or API call.                                                                  |
-| `id`          | The `id` of the current document being edited. `id` is `undefined` during the `create` operation.                                     |
-| `req`         | The current HTTP request object. Contains `payload`, `user`, etc.                                                                     |
-| `event`       | Either `onChange` or `submit` depending on the current action. Used as a performance opt-in. [More details](#async-field-validations). |
+|    Property         |    Description                                                                                                                              |
+| --- | --- |
+|    `data`           |    An object containing the full collection or global document currently being edited.                                                      |
+|    `siblingData`    |    An object containing document data that is scoped to only fields within the same parent of this field.                                   |
+|    `operation`      |    Will be `create` or `update` depending on the UI action or API call.                                                                     |
+|    `id`             |    The `id` of the current document being edited. `id` is `undefined` during the `create` operation.                                        |
+|    `req`            |    The current HTTP request object. Contains `payload`, `user`, etc.                                                                        |
+|    `event`          |    Either `onChange` or `submit` depending on the current action. Used as a performance opt-in. [More details](#async-field-validations).    |
 
 #### Reusing Default Field Validations
 
@@ -402,8 +399,7 @@ export const MyCollection: CollectionConfig = {
 ```
 
 <Banner type="warning">
-  **Reminder:**
-  The Custom ID Fields can only be of type [`Number`](./number) or [`Text`](./text). Custom ID fields with type `text` must not contain `/` or `.` characters.
+  **Reminder:** The Custom ID Fields can only be of type [`Number`](./number) or [`Text`](./text). Custom ID fields with type `text` must not contain `/` or `.` characters.
 </Banner>
 
 ## Admin Options
@@ -430,21 +426,21 @@ export const CollectionConfig: CollectionConfig = {
 
 The following options are available:
 
-| Option                  | Description                                                                                                                                                                                                                      |
-| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`condition`**         | Programmatically show / hide fields based on other fields. [More details](#conditional-logic).                                                                                                                    |
-| **`components`**        | All Field Components can be swapped out for [Custom Components](../admin/components) that you define.                                                                                           |
-| **`description`**       | Helper text to display alongside the field to provide more information for the editor. [More details](#description).                                                                                              |
-| **`position`**          | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`.                                                                                                                                        |
-| **`width`**             | Restrict the width of a field. You can pass any string-based value here, be it pixels, percentages, etc. This property is especially useful when fields are nested within a `Row` type where they can be organized horizontally. |
-| **`style`**             | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field.                                                                                                                 |
-| **`className`**         | Attach a [CSS class attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) to the root DOM element of a field.                                                                                             |
-| **`readOnly`**          | Setting a field to `readOnly` has no effect on the API whatsoever but disables the admin component's editability to prevent editors from modifying the field's value.                                                            |
-| **`disabled`**          | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview) entirely.                                                                                                                           |
-| **`disableBulkEdit`**   | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents. Defaults to `true` for UI fields.                                                               |
-| **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector.                                                                                                                             |
-| **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options.                                                                                                                              |
-| **`hidden`**            | Will transform the field into a `hidden` input type. Its value will still submit with requests in the Admin Panel, but the field itself will not be visible to editors.                                                          |
+|    Option                     |    Description                                                                                                                                                                                                                         |
+| --- | --- |
+|    **`condition`**            |    Programmatically show / hide fields based on other fields. [More details](#conditional-logic).                                                                                                                       |
+|    **`components`**           |    All Field Components can be swapped out for [Custom Components](../admin/components) that you define.                                                                                              |
+|    **`description`**          |    Helper text to display alongside the field to provide more information for the editor. [More details](#description).                                                                                                 |
+|    **`position`**             |    Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`.                                                                                                                                           |
+|    **`width`**                |    Restrict the width of a field. You can pass any string-based value here, be it pixels, percentages, etc. This property is especially useful when fields are nested within a `Row` type where they can be organized horizontally.    |
+|    **`style`**                |    [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field.                                                                                                                    |
+|    **`className`**            |    Attach a [CSS class attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) to the root DOM element of a field.                                                                                                |
+|    **`readOnly`**             |    Setting a field to `readOnly` has no effect on the API whatsoever but disables the admin component's editability to prevent editors from modifying the field's value.                                                               |
+|    **`disabled`**             |    If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview) entirely.                                                                                                                              |
+|    **`disableBulkEdit`**      |    Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents. Defaults to `true` for UI fields.                                                                  |
+|    **`disableListColumn`**    |    Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector.                                                                                                                                |
+|    **`disableListFilter`**    |    Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options.                                                                                                                                 |
+|    **`hidden`**               |    Will transform the field into a `hidden` input type. Its value will still submit with requests in the Admin Panel, but the field itself will not be visible to editors.                                                             |
 
 ### Field Descriptions
 
@@ -452,9 +448,9 @@ Field Descriptions are used to provide additional information to the editor abou
 
 A description can be configured in three ways:
 
-  - As a string.
-  - As a function which returns a string. [More details](#description-functions).
-  - As a React component. [More details](#description).
+- As a string.
+- As a function which returns a string. [More details](#description-functions).
+- As a React component. [More details](#description).
 
 To add a Custom Description to a field, use the `admin.description` property in your Field Config:
 
@@ -477,15 +473,14 @@ export const MyCollectionConfig: SanitizedCollectionConfig = {
 ```
 
 <Banner type="warning">
-  **Reminder:**
-  To replace the Field Description with a [Custom Component](../admin/components), use the `admin.components.Description` property. [More details](#description).
+  **Reminder:** To replace the Field Description with a [Custom Component](../admin/components), use the `admin.components.Description` property. [More details](#description).
 </Banner>
 
 #### Description Functions
 
 Custom Descriptions can also be defined as a function. Description Functions are executed on the server and can be used to format simple descriptions based on the user's current [Locale](../configuration/localization).
 
-To add a Description Function to a field, set the `admin.description` property to a _function_ in your Field Config:
+To add a Description Function to a field, set the `admin.description` property to a *function* in your Field Config:
 
 ```ts
 import type { SanitizedCollectionConfig } from 'payload'
@@ -507,13 +502,12 @@ export const MyCollectionConfig: SanitizedCollectionConfig = {
 
 All Description Functions receive the following arguments:
 
-| Argument       | Description                                                      |
-| -------------- | ---------------------------------------------------------------- |
-| **`t`**        | The `t` function used to internationalize the Admin Panel. [More details](../configuration/i18n) |
+|    Argument          |    Description                                                         |
+| --- | --- |
+|    **`t`**           |    The `t` function used to internationalize the Admin Panel. [More details](../configuration/i18n)    |
 
 <Banner type="info">
-  **Note:**
-  If you need to subscribe to live updates within your form, use a Description Component instead. [More details](#description).
+  **Note:** If you need to subscribe to live updates within your form, use a Description Component instead. [More details](#description).
 </Banner>
 
 ### Conditional Logic
@@ -562,6 +556,7 @@ Within the [Admin Panel](../admin/overview), fields are represented in three dis
 - [Field](#field) - The actual form field rendered in the Edit View.
 - [Cell](#cell) - The table cell component rendered in the List View.
 - [Filter](#filter) - The filter component rendered in the List View.
+- [Diff](#diff) - The Diff component rendered in the Version Diff View
 
 To swap in Field Components with your own, use the `admin.components` property in your Field Config:
 
@@ -586,16 +581,17 @@ export const CollectionConfig: CollectionConfig = {
 
 The following options are available:
 
-| Component    | Description                                                                                                                 |
-| ---------- | --------------------------------------------------------------------------------------------------------------------------- |
-| **`Field`**  | The form field rendered of the Edit View. [More details](#field).                                                |
-| **`Cell`**   | The table cell rendered of the List View. [More details](#cell).              |
-| **`Filter`** | The filter component rendered in the List View. [More details](#filter). |
-| **`Label`**       | Override the default Label of the Field Component. [More details](#label).                                    |
-| **`Error`**       | Override the default Error of the Field Component. [More details](#error).                                    |
-| **`Description`** | Override the default Description of the Field Component. [More details](#description).                      |
-| **`beforeInput`** | An array of elements that will be added before the input of the Field Component. [More details](#afterinput-and-beforeinput).|
-| **`afterInput`**  | An array of elements that will be added after the input of the Field Component. [More details](#afterinput-and-beforeinput). |
+|    Component       |    Description                                                                                                                    |
+| --- | --- |
+|    **`Field`**     |    The form field rendered of the Edit View. [More details](#field).                                                   |
+|    **`Cell`**      |    The table cell rendered of the List View. [More details](#cell).                 |
+|    **`Filter`**    |    The filter component rendered in the List View. [More details](#filter).    |
+|    **`Label`**          |    Override the default Label of the Field Component. [More details](#label).                                       |
+|    **`Error`**          |    Override the default Error of the Field Component. [More details](#error).                                       |
+|   **`Diff`**   |   Override the default Diff component rendered in the Version Diff View. [More details](#diff).                 |
+|    **`Description`**    |    Override the default Description of the Field Component. [More details](#description).                         |
+|    **`beforeInput`**    |    An array of elements that will be added before the input of the Field Component. [More details](#afterinput-and-beforeinput).   |
+|    **`afterInput`**     |    An array of elements that will be added after the input of the Field Component. [More details](#afterinput-and-beforeinput).    |
 
 #### Field
 
@@ -622,7 +618,7 @@ export const CollectionConfig: CollectionConfig = {
 }
 ```
 
-_For details on how to build Custom Components, see [Building Custom Components](../admin/components#building-custom-components)._
+*For details on how to build Custom Components, see [Building Custom Components](../admin/components#building-custom-components).*
 
 <Banner type="warning">
   Instead of replacing the entire Field Component, you can alternately replace or slot-in only specific parts by using the [`Label`](#label), [`Error`](#error), [`beforeInput`](#afterinput-and-beforinput), and [`afterInput`](#afterinput-and-beforinput) properties.
@@ -632,31 +628,31 @@ _For details on how to build Custom Components, see [Building Custom Components]
 
 All Field Components receive the following props by default:
 
-| Property             | Description                                                                                                                                                                                                                         |
-| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`docPreferences`** | An object that contains the [Preferences](../admin/preferences) for the document.                                                                                                                                                          |
-| **`field`**          | In Client Components, this is the sanitized Client Field Config. In Server Components, this is the original Field Config. Server Components will also receive the sanitized field config through the`clientField` prop (see below). |
-| **`locale`**         | The locale of the field. [More details](../configuration/localization).                                                                                                                                                             |
-| **`readOnly`**       | A boolean value that represents if the field is read-only or not.                                                                                                                                                                   |
-| **`user`**           | The currently authenticated user. [More details](../authentication/overview).                                                                                                                                                       |
-| **`validate`**       | A function that can be used to validate the field.                                                                                                                                                                                  |
-| **`path`**           | A string representing the direct, dynamic path to the field at runtime, i.e. `myGroup.myArray.0.myField`.                                                                                                                           |
-| **`schemaPath`**     | A string representing the direct, static path to the Field Config, i.e. `posts.myGroup.myArray.myField`.                                                                                                      |
-| **`indexPath`**      | A hyphen-notated string representing the path to the field _within the nearest named ancestor field_, i.e. `0-0`                                                                                                                    |
+|    Property                |    Description                                                                                                                                                                                                                            |
+| --- | --- |
+|    **`docPreferences`**    |    An object that contains the [Preferences](../admin/preferences) for the document.                                                                                                                                                             |
+|    **`field`**             |    In Client Components, this is the sanitized Client Field Config. In Server Components, this is the original Field Config. Server Components will also receive the sanitized field config through the`clientField` prop (see below).    |
+|    **`locale`**            |    The locale of the field. [More details](../configuration/localization).                                                                                                                                                                |
+|    **`readOnly`**          |    A boolean value that represents if the field is read-only or not.                                                                                                                                                                      |
+|    **`user`**              |    The currently authenticated user. [More details](../authentication/overview).                                                                                                                                                          |
+|    **`validate`**          |    A function that can be used to validate the field.                                                                                                                                                                                     |
+|    **`path`**              |    A string representing the direct, dynamic path to the field at runtime, i.e. `myGroup.myArray.0.myField`.                                                                                                                              |
+|    **`schemaPath`**        |    A string representing the direct, static path to the Field Config, i.e. `posts.myGroup.myArray.myField`.                                                                                                         |
+|    **`indexPath`**         |    A hyphen-notated string representing the path to the field *within the nearest named ancestor field*, i.e. `0-0`                                                                                                                       |
 
 In addition to the above props, all Server Components will also receive the following props:
 
-| Property          | Description                                                                   |
-| ----------------- | ----------------------------------------------------------------------------- |
-| **`clientField`** | The serializable Client Field Config.                                         |
-| **`field`**       | The Field Config.                                                             |
-| **`data`**        | The current document being edited.                                            |
-| **`i18n`**        | The [i18n](../configuration/i18n) object.                                     |
-| **`payload`**     | The [Payload](../local-api/overview) class.                                   |
-| **`permissions`** | The field permissions based on the currently authenticated user.              |
-| **`siblingData`** | The data of the field's siblings.                                             |
-| **`user`**        | The currently authenticated user. [More details](../authentication/overview). |
-| **`value`**       | The value of the field at render-time.                                        |
+|    Property             |    Description                                                                      |
+| --- | --- |
+|    **`clientField`**    |    The serializable Client Field Config.                                            |
+|    **`field`**          |    The Field Config.                                                                |
+|    **`data`**           |    The current document being edited.                                               |
+|    **`i18n`**           |    The [i18n](../configuration/i18n) object.                                        |
+|    **`payload`**        |    The [Payload](../local-api/overview) class.                                      |
+|    **`permissions`**    |    The field permissions based on the currently authenticated user.                 |
+|    **`siblingData`**    |    The data of the field's siblings.                                                |
+|    **`user`**           |    The currently authenticated user. [More details](../authentication/overview).    |
+|    **`value`**          |    The value of the field at render-time.                                           |
 
 ##### Sending and receiving values from the form
 
@@ -722,10 +718,10 @@ export const myField: Field = {
 
 All Cell Components receive the same [Default Field Component Props](#field), plus the following:
 
-| Property         | Description                                                       |
-| ---------------- | ----------------------------------------------------------------- |
-| **`link`** | A boolean representing whether this cell should be wrapped in a link. |
-| **`onClick`** | A function that is called when the cell is clicked. |
+|    Property            |    Description                                                          |
+| --- | --- |
+|    **`link`**    |    A boolean representing whether this cell should be wrapped in a link.    |
+|    **`onClick`**    |    A function that is called when the cell is clicked.    |
 
 For details on how to build Custom Components themselves, see [Building Custom Components](../admin/components#building-custom-components).
 
@@ -867,9 +863,45 @@ import type {
 } from 'payload'
 ```
 
+#### Diff
+
+The Diff Component is rendered in the Version Diff view. It will only be visible in entities with versioning enabled,
+
+To swap in your own Diff Component, use the `admin.components.Diff` property in your Field Config:
+
+```ts
+import type { Field } from 'payload'
+
+export const myField: Field = {
+  name: 'myField',
+  type: 'text',
+  admin: {
+    components: {
+      Diff: '/path/to/MyCustomDiffComponent', // highlight-line
+    },
+  },
+}
+```
+
+All Error Components receive the [Default Field Component Props](#field).
+
+For details on how to build Custom Components themselves, see [Building Custom Components](../admin/components#building-custom-components).
+
+##### TypeScript#diff-component-types
+
+When building Custom Diff Components, you can import the component types to ensure type safety in your component. There is an explicit type for the Diff Component, one for every Field Type and server/client environment. The convention is to append `DiffServerComponent` or `DiffClientComponent` to the type of field, i.e. `TextFieldDiffClientComponent`.
+
+```tsx
+import type {
+  TextFieldDiffServerComponent,
+  TextFieldDiffClientComponent,
+  // And so on for each Field Type
+} from 'payload'
+```
+
 #### afterInput and beforeInput
 
-With these properties you can add multiple components _before_ and _after_ the input element, as their name suggests. This is useful when you need to render additional elements alongside the field without replacing the entire field component.
+With these properties you can add multiple components *before* and *after* the input element, as their name suggests. This is useful when you need to render additional elements alongside the field without replacing the entire field component.
 
 To add components before and after the input element, use the `admin.components.beforeInput` and `admin.components.afterInput` properties in your Field Config:
 
@@ -906,4 +938,4 @@ You can import the Payload `Field` type as well as other common types from the `
 
 ```ts
 import type { Field } from 'payload'
-```
+```

docs/fields/point.mdx

@@ -6,7 +6,7 @@ desc: The Point field type stores coordinates in the database. Learn how to use
 keywords: point, geolocation, geospatial, geojson, 2dsphere, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
 
-The Point Field saves a pair of coordinates in the database and assigns an index for location related queries. The data structure in the database matches the GeoJSON structure to represent point. The Payload APIs simplifies the object data to only the [longitude, latitude] location.
+The Point Field saves a pair of coordinates in the database and assigns an index for location related queries. The data structure in the database matches the GeoJSON structure to represent point. The Payload API simplifies the object data to only the [longitude, latitude] location.
 
 <LightDarkImage
   srcLight="https://payloadcms.com/images/docs/fields/point.png"

docs/fields/radio.mdx

@@ -66,7 +66,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Radio Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Radio Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'

docs/fields/relationship.mdx

@@ -6,7 +6,7 @@ desc: The Relationship field provides the ability to relate documents together.
 keywords: relationship, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
 
-The Relationship Field is one of the most powerful fields Payload features. It provides for the ability to easily relate documents together.
+The Relationship Field is one of the most powerful fields Payload features. It provides the ability to easily relate documents together.
 
 <LightDarkImage
   srcLight="https://payloadcms.com/images/docs/fields/relationship.png"
@@ -71,8 +71,7 @@ _* An asterisk denotes that a property is required._
 </Banner>
 
 ## Admin Options
-
-The customize the appearance and behavior of the Relationship Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To the appearance and behavior of the Relationship Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'
@@ -136,21 +135,19 @@ Note: If `sortOptions` is not defined, the default sorting behavior of the Relat
 
 ## Filtering relationship options
 
-Options can be dynamically limited by supplying a [query constraint](/docs/queries/overview), which will be used both
-for validating input and filtering available relationships in the UI.
+Options can be dynamically limited by supplying a [query constraint](/docs/queries/overview), which will be used both for validating input and filtering available relationships in the UI.
 
-The `filterOptions` property can either be a `Where` query, or a function returning `true` to not filter, `false` to
-prevent all, or a `Where` query. When using a function, it will be
-called with an argument object with the following properties:
+The `filterOptions` property can either be a `Where` query, or a function returning `true` to not filter, `false` to prevent all, or a `Where` query. When using a function, it will be called with an argument object with the following properties:
 
-| Property      | Description                                                                                           |
-| ------------- | ----------------------------------------------------------------------------------------------------- |
-| `relationTo`  | The collection `slug` to filter against, limited to this field's `relationTo` property                |
-| `data`        | An object containing the full collection or global document currently being edited                    |
-| `siblingData` | An object containing document data that is scoped to only fields within the same parent of this field |
-| `id`          | The `id` of the current document being edited. `id` is `undefined` during the `create` operation      |
-| `user`        | An object containing the currently authenticated user                                                 |
-| `req`         | The Payload Request, which contains references to `payload`, `user`, `locale`, and more.              |
+| Property      | Description                                                                                                                                                                              |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `blockData`        | The data of the nearest parent block. Will be `undefined` if the field is not within a block or when called on a `Filter` component within the list view.                           |
+| `data`        | An object containing the full collection or global document currently being edited. Will be an empty object when called on a `Filter` component within the list view.                    |
+| `id`          | The `id` of the current document being edited. Will be `undefined` during the `create` operation or when called on a `Filter` component within the list view.                            |
+| `relationTo`  | The collection `slug` to filter against, limited to this field's `relationTo` property.                                                                                                  |
+| `req`         | The Payload Request, which contains references to `payload`, `user`, `locale`, and more.                                                                                                 |
+| `siblingData` | An object containing document data that is scoped to only fields within the same parent of this field. Will be an emprt object when called on a `Filter` component within the list view. |
+| `user`        | An object containing the currently authenticated user.                                                                                                                                   |
 
 ## Example
 
@@ -296,7 +293,7 @@ The `hasMany` tells Payload that there may be more than one collection saved to
 }
 ```
 
-To save the to `hasMany` relationship field we need to send an array of IDs:
+To save to the `hasMany` relationship field we need to send an array of IDs:
 
 ```json
 {

docs/fields/select.mdx

@@ -68,7 +68,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Select Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Select Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'

docs/fields/text.mdx

@@ -56,7 +56,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Text Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Text Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'

docs/fields/textarea.mdx

@@ -53,7 +53,7 @@ _* An asterisk denotes that a property is required._
 
 ## Admin Options
 
-The customize the appearance and behavior of the Textarea Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
+To customize the appearance and behavior of the Textarea Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
 
 ```ts
 import type { Field } from 'payload'

docs/hooks/context.mdx

@@ -6,7 +6,7 @@ desc: Context allows you to pass in extra data that can be shared between hooks
 keywords: hooks, context, payload context, payloadcontext, data, extra data, shared data, shared, extra
 ---
 
-The `context` object is used to share data across different Hooks. This persists throughout the entire lifecycle of a request and is available within every Hook. By setting properties to `req.context`, you can effectively logic across multiple Hooks.
+The `context` object is used to share data across different Hooks. This persists throughout the entire lifecycle of a request and is available within every Hook. By setting properties to `req.context`, you can effectively share logic across multiple Hooks.
 
 ## When To Use Context
 

docs/hooks/fields.mdx

@@ -71,6 +71,8 @@ The following arguments are provided to all Field Hooks:
 | **`schemaPath`**         | The path of the [Field](../fields/overview) in the schema.                                                                                                                                                                                  |
 | **`siblingData`**        | The data of sibling fields adjacent to the field that the Hook is running against.        |
 | **`siblingDocWithLocales`**      | The sibling data of the Document with all [Locales](../configuration/localization).        |
+| **`siblingFields`**      | The sibling fields of the field which the hook is running against.
+       |
 | **`value`**              | The value of the [Field](../fields/overview).                                                                                                                                                                                               |
 
 <Banner type="success">

docs/jobs-queue/queues.mdx

@@ -29,7 +29,7 @@ As mentioned above, you can queue jobs, but the jobs won't run unless a worker p
 
 #### Cron jobs
 
-You can use the jobs.autoRun property to configure cron jobs:
+You can use the `jobs.autoRun` property to configure cron jobs:
 
 ```ts
 export default buildConfig({
@@ -47,6 +47,12 @@ export default buildConfig({
       },
       // add as many cron jobs as you want
     ],
+    shouldAutoRun: async (payload) => {
+      // Tell Payload if it should run jobs or not.
+      // This function will be invoked each time Payload goes to pick up and run jobs.
+      // If this function ever returns false, the cron schedule will be stopped.
+      return true
+    }
   },
 })
 ```

docs/jobs-queue/workflows.mdx

@@ -20,7 +20,7 @@ The most important aspect of a Workflow is the `handler`, where you can declare
 
 However, importantly, tasks that have successfully been completed will simply re-return the cached and saved output without running again. The Workflow will pick back up where it failed and only task from the failure point onward will be re-executed.
 
-To define a JS-based workflow, simply add a workflow to the `jobs.wokflows` array in your Payload config. A workflow consists of the following fields:
+To define a JS-based workflow, simply add a workflow to the `jobs.workflows` array in your Payload config. A workflow consists of the following fields:
 
 | Option                      | Description                                                                      |
 | --------------------------- | -------------------------------------------------------------------------------- |

docs/live-preview/overview.mdx

@@ -28,6 +28,7 @@ const config = buildConfig({
   }
 })
 ```
+
 <Banner type="warning">
   **Reminder:**
   Alternatively, you can define the `admin.livePreview` property on individual [Collection Admin Configs](../configuration/collections#admin-options) and [Global Admin Configs](../configuration/globals#admin-options). Settings defined here will be merged into the top-level as overrides.
@@ -108,10 +109,12 @@ The following arguments are provided to the `url` function:
 | **`globalConfig`** | The Global Admin Config of the Document being edited. [More details](../configuration/globals#admin-options).                          |
 | **`req`**          | The Payload Request object.  |
 
-If your application requires a fully qualified URL, such as within deploying to Vercel Preview Deployments, you can use the `req` property to build this URL:
+You can return either an absolute URL or relative URL from this function. If you don't know the URL of your frontend at build-time, you can return a relative URL, and in that case, Payload will automatically construct an absolute URL by injecting the protocol, domain, and port from your browser window. Returning a relative URL is helpful for platforms like Vercel where you may have preview deployment URLs that are unknown at build time.
+
+If your application requires a fully qualified URL, or you are attempting to preview with a frontend on a different domain, you can use the `req` property to build this URL:
 
 ```ts
-url: (doc, { req }) => `${req.protocol}//${req.host}/${doc.slug}` // highlight-line
+url: ({ data, req }) => `${req.protocol}//${req.host}/${data.slug}` // highlight-line
 ```
 
 ### Breakpoints

docs/plugins/form-builder.mdx

@@ -6,7 +6,7 @@ desc: Easily build and manage forms from the Admin Panel. Send dynamic, personal
 keywords: plugins, plugin, form, forms, form builder
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-form-builder)](https://www.npmjs.com/package/@payloadcms/plugin-form-builder)
+![https://www.npmjs.com/package/@payloadcms/plugin-form-builder](https://img.shields.io/npm/v/@payloadcms/plugin-form-builder)
 
 This plugin allows you to build and manage custom forms directly within the [Admin Panel](../admin/overview). Instead of hard-coding a new form into your website or application every time you need one, admins can simply define the schema for each form they need on-the-fly, and your front-end can map over this schema, render its own UI components, and match your brand's design system.
 

docs/plugins/multi-tenant.mdx

@@ -6,7 +6,7 @@ desc: Scaffolds multi-tenancy for your Payload application
 keywords: plugins, multi-tenant, multi-tenancy, plugin, payload, cms, seo, indexing, search, search engine
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-multi-tenant)](https://www.npmjs.com/package/@payloadcms/plugin-multi-tenant)
+![https://www.npmjs.com/package/@payloadcms/plugin-multi-tenant](https://img.shields.io/npm/v/@payloadcms/plugin-multi-tenant)
 
 This plugin sets up multi-tenancy for your application from within your [Admin Panel](../admin/overview). It does so by adding a `tenant` field to all specified collections. Your front-end application can then query data by tenant. You must add the Tenants collection so you control what fields are available for each tenant.
 
@@ -25,6 +25,18 @@ This plugin sets up multi-tenancy for your application from within your [Admin P
 - Adds a `tenant` field to each specified collection
 - Adds a tenant selector to the admin panel, allowing you to switch between tenants
 - Filters list view results by selected tenant
+- Filters relationship fields by selected tenant
+- Ability to create "global" like collections, 1 doc per tenant
+- Automatically assign a tenant to new documents
+
+<Banner type="error">
+  **Warning**
+
+  By default this plugin cleans up documents when a tenant is deleted. You should ensure you have
+  strong access control on your tenants collection to prevent deletions by unauthorized users.
+
+  You can disabled this behavior by setting `cleanupAfterTenantDelete` to `false` in the plugin options.
+</Banner>
 
 ## Installation
 
@@ -40,7 +52,7 @@ The plugin accepts an object with the following properties:
 
 ```ts
 type MultiTenantPluginConfig<ConfigTypes = unknown> = {
-  /**
+/**
    * After a tenant is deleted, the plugin will attempt to clean up related documents
    * - removing documents with the tenant ID
    * - removing the tenant from users
@@ -110,6 +122,18 @@ type MultiTenantPluginConfig<ConfigTypes = unknown> = {
          * Access configuration for the array field
          */
         arrayFieldAccess?: ArrayField['access']
+        /**
+         * Name of the array field
+         *
+         * @default 'tenants'
+         */
+        arrayFieldName?: string
+        /**
+         * Name of the tenant field
+         *
+         * @default 'tenant'
+         */
+        arrayTenantFieldName?: string
         /**
          * When `includeDefaultField` is `true`, the field will be added to the users collection automatically
          */
@@ -125,6 +149,8 @@ type MultiTenantPluginConfig<ConfigTypes = unknown> = {
       }
     | {
         arrayFieldAccess?: never
+        arrayFieldName?: string
+        arrayTenantFieldName?: string
         /**
          * When `includeDefaultField` is `false`, you must include the field on your users collection manually
          */
@@ -144,8 +170,12 @@ type MultiTenantPluginConfig<ConfigTypes = unknown> = {
    * Useful for super-admin type users
    */
   userHasAccessToAllTenants?: (
-    user: ConfigTypes extends { user } ? ConfigTypes['user'] : User,
+    user: ConfigTypes extends { user: unknown } ? ConfigTypes['user'] : User,
   ) => boolean
+  /**
+   * Opt out of adding access constraints to the tenants collection
+   */
+  useTenantsCollectionAccess?: boolean
 }
 ```
 

docs/plugins/nested-docs.mdx

@@ -6,7 +6,7 @@ desc: Nested documents in a parent, child, and sibling relationship.
 keywords: plugins, nested, documents, parent, child, sibling, relationship
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-nested-docs)](https://www.npmjs.com/package/@payloadcms/plugin-nested-docs)
+![https://www.npmjs.com/package/@payloadcms/plugin-nested-docs](https://img.shields.io/npm/v/@payloadcms/plugin-nested-docs)
 
 This plugin allows you to easily nest the documents of your application inside of one another. It does so by adding a
 new `parent` field onto each of your documents that, when selected, attaches itself to the parent's tree. When you edit

docs/plugins/overview.mdx

@@ -6,7 +6,7 @@ desc: Plugins provide a great way to modularize Payload functionalities into eas
 keywords: plugins, config, configuration, extensions, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
 
-Payload Plugins take full advantage of the modularity of the [Payload Config](../configuration/overview), allowing developers developers to easily inject custom—sometimes complex—functionality into Payload apps from a very small touch-point. This is especially useful is sharing your work across multiple projects or with the greater Payload community.
+Payload Plugins take full advantage of the modularity of the [Payload Config](../configuration/overview), allowing developers to easily inject custom—sometimes complex—functionality into Payload apps from a very small touch-point. This is especially useful for sharing your work across multiple projects or with the greater Payload community.
 
 There are many [Official Plugins](#official-plugins) available that solve for some of the most common uses cases, such as the [Form Builder Plugin](./form-builder) or [SEO Plugin](./seo). There are also [Community Plugins](#community-plugins) available, maintained entirely by contributing members. To extend Payload's functionality in some other way, you can easily [build your own plugin](./build-your-own).
 

docs/plugins/redirects.mdx

@@ -6,7 +6,7 @@ desc: Automatically create redirects for your Payload application
 keywords: plugins, redirects, redirect, plugin, payload, cms, seo, indexing, search, search engine
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-redirects)](https://www.npmjs.com/package/@payloadcms/plugin-redirects)
+![https://www.npmjs.com/package/@payloadcms/plugin-redirects](https://img.shields.io/npm/v/@payloadcms/plugin-redirects)
 
 This plugin allows you to easily manage redirects for your application from within your [Admin Panel](../admin/overview). It does so by adding a `redirects` collection to your config that allows you specify a redirect from one URL to another. Your front-end application can use this data to automatically redirect users to the correct page using proper HTTP status codes. This is useful for SEO, indexing, and search engine ranking when re-platforming or when changing your URL structure.
 

docs/plugins/search.mdx

@@ -6,7 +6,7 @@ desc: Generates records of your documents that are extremely fast to search on.
 keywords: plugins, search, search plugin, search engine, search index, search results, search bar, search box, search field, search form, search input
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-search)](https://www.npmjs.com/package/@payloadcms/plugin-search)
+![https://www.npmjs.com/package/@payloadcms/plugin-search](https://img.shields.io/npm/v/@payloadcms/plugin-search)
 
 This plugin generates records of your documents that are extremely fast to search on. It does so by creating a new `search` collection that is indexed in the database then saving a static copy of each of your documents using only search-critical data. Search records are automatically created, synced, and deleted behind-the-scenes as you manage your application's documents.
 

docs/plugins/sentry.mdx

@@ -6,7 +6,7 @@ desc: Integrate Sentry error tracking into your Payload application
 keywords: plugins, sentry, error, tracking, monitoring, logging, bug, reporting, performance
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-sentry)](https://www.npmjs.com/package/@payloadcms/plugin-sentry)
+![https://www.npmjs.com/package/@payloadcms/plugin-sentry](https://img.shields.io/npm/v/@payloadcms/plugin-sentry)
 
 This plugin allows you to integrate [Sentry](https://sentry.io/) seamlessly with your [Payload](https://github.com/payloadcms/payload) application.
 

docs/plugins/stripe.mdx

@@ -6,7 +6,7 @@ desc: Easily accept payments with Stripe
 keywords: plugins, stripe, payments, ecommerce
 ---
 
-[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-stripe)](https://www.npmjs.com/package/@payloadcms/plugin-stripe)
+![https://www.npmjs.com/package/@payloadcms/plugin-stripe](https://img.shields.io/npm/v/@payloadcms/plugin-stripe)
 
 With this plugin you can easily integrate [Stripe](https://stripe.com) into Payload. Simply provide your Stripe credentials and this plugin will open up a two-way communication channel between the two platforms. This enables you to easily sync data back and forth, as well as proxy the Stripe REST API through Payload's [Access Control](../access-control/overview). Use this plugin to completely offload billing to Stripe and retain full control over your application's data.
 

docs/production/deployment.mdx

@@ -101,8 +101,7 @@ unsupported `$facet` aggregation.
 ### CosmosDB
 
 When using Azure Cosmos DB, an index is needed for any field you may want to sort on. To add the sort index for all
-fields that may be sorted in the admin UI use the <a href="/docs/configuration/overview">indexSortableFields</a>
-configuration option.
+fields that may be sorted in the admin UI use the [indexSortableFields](/docs/configuration/overview) option.
 
 ## File storage
 

docs/production/preventing-abuse.mdx

@@ -28,7 +28,7 @@ To securely allow headless operation you will need to configure the allowed orig
 
 ## Limiting GraphQL Complexity
 
-Because GraphQL gives the power of query writing outside a server's control, someone with bad intentions might write a maliciously complex query and bog down your server. To prevent resource-intensive GraphQL requests, Payload provides a way specify complexity limits which are based on a complexity score that is calculated for each request.
+Because GraphQL gives the power of query writing outside a server's control, someone with bad intentions might write a maliciously complex query and bog down your server. To prevent resource-intensive GraphQL requests, Payload provides a way to specify complexity limits. These limits are based on a complexity score calculated for each request.
 
 Any GraphQL request that is calculated to be too expensive is rejected. On the Payload Config, in `graphQL` you can set the `maxComplexity` value as an integer. For reference, the default complexity value for each added field is 1, and all `relationship` and `upload` fields are assigned a value of 10.
 

docs/rest-api/overview.mdx

@@ -578,7 +578,7 @@ Each endpoint object needs to have:
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`path`**    | A string for the endpoint route after the collection or globals slug                                                                                                                                                                                       |
 | **`method`**  | The lowercase HTTP verb to use: 'get', 'head', 'post', 'put', 'delete', 'connect' or 'options'                                                                                                                                                             |
-| **`handler`** | A function or array of functions to be called with **req**, **res** and **next** arguments. [Next.js](https://nextjs.org/docs/app/building-your-application/routing/route-handlers)                                                                                          |
+| **`handler`** | A function that accepts **req** - `PayloadRequest` object which contains [Web Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) properties, currently authenticated `user` and the Local API instance `payload`.                          |
 | **`root`**    | When `true`, defines the endpoint on the root Next.js app, bypassing Payload handlers and the `routes.api` subpath. Note: this only applies to top-level endpoints of your Payload Config, endpoints defined on `collections` or `globals` cannot be root. |
 | **`custom`**  | Extension point for adding custom data (e.g. for plugins)                                                                                                                                                                                                  |
 

docs/rich-text/converters.mdx

@@ -51,6 +51,10 @@ const jsxConverters: JSXConvertersFunction = ({ defaultConverters }) => ({
     // myTextBlock is the slug of the block
     myTextBlock: ({ node }) => <div style={{ backgroundColor: 'red' }}>{node.fields.text}</div>,
   },
+  inlineBlocks: {
+    // myInlineBlock is the slug of the block
+    myInlineBlock: ({ node }) => <span>{node.fields.text}</span>,
+  },
 })
 
 export const MyComponent = ({ lexicalData }) => {

docs/rich-text/custom-features.mdx

@@ -614,7 +614,7 @@ import {
   COMMAND_PRIORITY_EDITOR
 } from '@payloadcms/richtext-lexical/lexical'
 
-import { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext.js'
+import { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext'
 import { $insertNodeToNearestRoot } from '@payloadcms/richtext-lexical/lexical/utils'
 import { useEffect } from 'react'
 

docs/rich-text/migration.mdx

@@ -16,7 +16,7 @@ Just import the `migrateSlateToLexical` function we provide, pass it the `payloa
 
 IMPORTANT: This will overwrite all slate data. We recommend doing the following first:
 1. Take a backup of your entire database. If anything goes wrong and you do not have a backup, you are on your own and will not receive any support.
-2. Make every richText field a lexical editor. This script will only convert lexical richText fields with old Slate data
+2. Make every richText field a lexical editor. This script will only convert lexical richText fields with old Slate data.
 3. Add the SlateToLexicalFeature (as seen below) first, and test it out by loading up the Admin Panel, to see if the migrator works as expected. You might have to build some custom converters for some fields first in order to convert custom Slate nodes. The SlateToLexicalFeature is where the converters are stored. Only fields with this feature added will be migrated.
 4. If this works as expected, add the `disableHooks: true` prop everywhere you're initializing `SlateToLexicalFeature`. Example: `SlateToLexicalFeature({ disableHooks: true })`. Once you did that, you're ready to run the migration script.
 
@@ -67,7 +67,7 @@ If you have custom Slate nodes, create a custom converter for them. Here's the U
 
 ```ts
 import type { SerializedUploadNode } from '../uploadNode'
-import type { SlateNodeConverter } from '@payloadcms/richtext-lexical/migrate'
+import type { SlateNodeConverter } from '@payloadcms/richtext-lexical'
 
 export const SlateUploadConverter: SlateNodeConverter = {
   converter({ slateNode }) {
@@ -90,7 +90,7 @@ export const SlateUploadConverter: SlateNodeConverter = {
 
 It's pretty simple: You get a Slate node as input, and you return the lexical node. The `nodeTypes` array is used to determine which Slate nodes this converter can handle.
 
-When using a migration script, you can add your custom converters to the `converters` property of the `convertSlateToLexical` props, as seen in the example above
+When using a migration script, you can add your custom converters to the `converters` property of the `convertSlateToLexical` props, as seen in the example above.
 
 When using the `SlateToLexicalFeature`, you can add your custom converters to the `converters` property of the `SlateToLexicalFeature` props:
 

docs/rich-text/overview.mdx

@@ -161,7 +161,7 @@ Here's an overview of all the included features:
 |   **`CheckListFeature`**            |   Yes                   |   Adds checklists                                                                                                                                                                          |
 |   **`LinkFeature`**                 |   Yes                   |   Allows you to create internal and external links                                                                                                                                         |
 |   **`RelationshipFeature`**         |   Yes                   |   Allows you to create block-level (not inline) relationships to other documents                                                                                                           |
-|   **`BlockQuoteFeature`**           |   Yes                   |   Allows you to create block-level quotes                                                                                                                                                  |
+|   **`BlockquoteFeature`**           |   Yes                   |   Allows you to create block-level quotes                                                                                                                                                  |
 |   **`UploadFeature`**               |   Yes                   |   Allows you to create block-level upload nodes - this supports all kinds of uploads, not just images                                                                                      |
 |   **`HorizontalRuleFeature`**       |   Yes                   |   Horizontal rules / separators. Basically displays an `<hr>` element                                                                                                                      |
 |   **`InlineToolbarFeature`**        |   Yes                   |   The inline toolbar is the floating toolbar which appears when you select text. This toolbar only contains actions relevant for selected text                                             |
@@ -174,7 +174,7 @@ Notice how even the toolbars are features? That's how extensible our lexical edi
 
 ## Creating your own, custom Feature
 
-You can find more information about creating your own feature in our [building custom feature docs](../rich-text/building-custom-features).
+You can find more information about creating your own feature in our [building custom feature docs](../rich-text/custom-features).
 
 ## TypeScript
 

docs/upload/overview.mdx

@@ -113,7 +113,24 @@ _An asterisk denotes that an option is required._
 
 ### Payload-wide Upload Options
 
-Upload options are specifiable on a Collection by Collection basis, you can also control app wide options by passing your base Payload Config an `upload` property containing an object supportive of all `Busboy` configuration options. [Click here](https://github.com/mscdex/busboy#api) for more documentation about what you can control.
+Upload options are specifiable on a Collection by Collection basis, you can also control app wide options by passing your base Payload Config an `upload` property containing an object supportive of all `Busboy` configuration options.
+
+| Option                   | Description                                                                                                                                                                        |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`abortOnLimit`**       | A boolean that, if `true`, returns HTTP 413 if a file exceeds the file size limit. If `false`, the file is truncated. Defaults to `false`.                                         |
+| **`createParentPath`**   | Set to `true` to automatically create a directory path when moving files from a temporary directory or buffer. Defaults to `false`.                                                |
+| **`debug`**              | A boolean that turns upload process logging on if `true`, or off if `false`. Useful for troubleshooting. Defaults to `false`.                                                      |
+| **`limitHandler`**       | A function which is invoked if the file is greater than configured limits.                                                                                                         |
+| **`parseNested`**        | Set to `true` to turn `req.body` and `req.files` into nested structures. By default `req.body` and `req.files` are flat objects. Defaults to `false`.                              |
+| **`preserveExtension`**  | Preserves file extensions with the `safeFileNames` option. Limits file names to 3 characters if `true` or a custom length if a `number`, trimming from the start of the extension. |
+| **`responseOnLimit`**    | A `string` that is sent in the Response to a client if the file size limit is exceeded when used with `abortOnLimit`.                                                              |
+| **`safeFileNames`**      | Set to `true` to strip non-alphanumeric characters except dashes and underscores. Can also be set to a regex to determine what to strip. Defaults to `false`.                      |
+| **`tempFileDir`**        | A `string` path to store temporary files used when the `useTempFiles` option is set to `true`. Defaults to `'./tmp'`.                                                              |
+| **`uploadTimeout`**      | A `number` that defines how long to wait for data before aborting, specified in milliseconds. Set to `0` to disable timeout checks. Defaults to `60000`.                           |
+| **`uriDecodeFileNames`** | Set to `true` to apply uri decoding to file names. Defaults to `false`.                                                                                                            |
+| **`useTempFiles`**       | Set to `true` to store files to a temporary directory instead of in RAM, reducing memory usage for large files or many files.                                                      |
+
+[Click here](https://github.com/mscdex/busboy#api) for more documentation about what you can control with `Busboy`.
 
 A common example of what you might want to customize within Payload-wide Upload options would be to increase the allowed `fileSize` of uploads sent to Payload:
 

eslint.config.js

@@ -19,9 +19,10 @@ export const defaultESLintIgnores = [
   '**/build/',
   '**/node_modules/',
   '**/temp/',
-  '**/*.spec.ts',
+  'packages/**/*.spec.ts',
   'next-env.d.ts',
   '**/app',
+  'src/**/*.spec.ts',
 ]
 
 /** @typedef {import('eslint').Linter.Config} Config */
@@ -29,10 +30,7 @@ export const defaultESLintIgnores = [
 export const rootParserOptions = {
   sourceType: 'module',
   ecmaVersion: 'latest',
-  projectService: {
-    maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 40,
-    allowDefaultProject: ['scripts/*.ts', '*.js', '*.mjs', '*.d.ts'],
-  },
+  projectService: true,
 }
 
 /** @type {Config[]} */

examples/draft-preview/.env.example

@@ -6,3 +6,6 @@ PAYLOAD_SECRET=YOUR_SECRET_HERE
 
 # Used to configure CORS, format links and more. No trailing slash
 NEXT_PUBLIC_SERVER_URL=http://localhost:3000
+
+# Used to validate the preview request
+PREVIEW_SECRET=YOUR_SECRET_HERE

examples/draft-preview/README.md

@@ -1,6 +1,6 @@
 # Payload Draft Preview Example
 
-The [Payload Draft Preview Example](https://github.com/payloadcms/payload/tree/main/examples/draft-preview/payload) demonstrates how to implement draft preview in [Payload](https://github.com/payloadcms/payload) using [Versions](https://payloadcms.com/docs/versions/overview) and [Drafts](https://payloadcms.com/docs/versions/drafts). Draft preview allows you to see content on your front-end before it is published.
+The [Payload Draft Preview Example](https://github.com/payloadcms/payload/tree/main/examples/draft-preview/payload) demonstrates how to implement [Draft Preview](https://payloadcms.com/docs/admin/preview#draft-preview) in [Payload](https://github.com/payloadcms/payload) using [Versions](https://payloadcms.com/docs/versions/overview) and [Drafts](https://payloadcms.com/docs/versions/drafts). With Draft Preview, you can navigate to your front-end application and enter "draft mode", where your queries are modified to fetch draft content instead of published content. This is useful for seeing how your content will look before being published.
 
 ## Quick Start
 

examples/draft-preview/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/draft-preview/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "Payload preview example.",
   "license": "MIT",
+  "type": "module",
   "main": "dist/server.js",
   "scripts": {
     "build": "cross-env NODE_OPTIONS=--no-deprecation next build",

examples/draft-preview/src/app/(app)/[slug]/page.tsx

@@ -3,7 +3,7 @@ import { notFound } from 'next/navigation'
 import { getPayload } from 'payload'
 import React, { cache, Fragment } from 'react'
 
-import type { Page as PageType } from '../../../payload-types'
+import type { Page as PageType } from '@payload-types'
 
 import { Gutter } from '../../../components/Gutter'
 import RichText from '../../../components/RichText'
@@ -13,6 +13,7 @@ import classes from './index.module.scss'
 
 export async function generateStaticParams() {
   const payload = await getPayload({ config })
+
   const pages = await payload.find({
     collection: 'pages',
     draft: false,

examples/draft-preview/src/app/(app)/next/exit-preview/GET.ts

@@ -1,7 +0,0 @@
-import { draftMode } from 'next/headers'
-
-export async function GET(): Promise<Response> {
-  const draft = await draftMode()
-  draft.disable()
-  return new Response('Draft mode is disabled')
-}

examples/draft-preview/src/app/(app)/next/preview/route.ts

@@ -1,94 +0,0 @@
-import type { CollectionSlug, PayloadRequest } from 'payload'
-
-import { draftMode } from 'next/headers'
-import { redirect } from 'next/navigation'
-import { getPayload } from 'payload'
-
-import configPromise from '../../../../payload.config'
-
-const payloadToken = 'payload-token'
-
-export async function GET(
-  req: {
-    cookies: {
-      get: (name: string) => {
-        value: string
-      }
-    }
-  } & Request,
-): Promise<Response> {
-  const payload = await getPayload({ config: configPromise })
-  const token = req.cookies.get(payloadToken)?.value
-  const { searchParams } = new URL(req.url)
-  const path = searchParams.get('path')
-  const collection = searchParams.get('collection') as CollectionSlug
-  const slug = searchParams.get('slug')
-
-  const previewSecret = searchParams.get('previewSecret')
-
-  if (previewSecret) {
-    return new Response('You are not allowed to preview this page', { status: 403 })
-  } else {
-    if (!path) {
-      return new Response('No path provided', { status: 404 })
-    }
-
-    if (!collection) {
-      return new Response('No path provided', { status: 404 })
-    }
-
-    if (!slug) {
-      return new Response('No path provided', { status: 404 })
-    }
-
-    if (!path.startsWith('/')) {
-      return new Response('This endpoint can only be used for internal previews', { status: 500 })
-    }
-
-    let user
-
-    try {
-      user = await payload.auth({
-        req: req as unknown as PayloadRequest,
-        headers: req.headers,
-      })
-    } catch (error) {
-      payload.logger.error({ err: error }, 'Error verifying token for live preview')
-      return new Response('You are not allowed to preview this page', { status: 403 })
-    }
-
-    const draft = await draftMode()
-
-    // You can add additional checks here to see if the user is allowed to preview this page
-    if (!user) {
-      draft.disable()
-      return new Response('You are not allowed to preview this page', { status: 403 })
-    }
-
-    // Verify the given slug exists
-    try {
-      const docs = await payload.find({
-        collection,
-        draft: true,
-        where: {
-          slug: {
-            equals: slug,
-          },
-        },
-      })
-
-      if (!docs.docs.length) {
-        return new Response('Document not found', { status: 404 })
-      }
-    } catch (error) {
-      payload.logger.error({
-        err: error,
-        msg: 'Error verifying token for live preview:',
-      })
-    }
-
-    draft.enable()
-
-    redirect(path)
-  }
-}

examples/draft-preview/src/app/(app)/preview/route.ts

@@ -0,0 +1,63 @@
+import type { CollectionSlug, PayloadRequest } from 'payload'
+import { getPayload } from 'payload'
+
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+import configPromise from '@payload-config'
+
+export async function GET(
+  req: {
+    cookies: {
+      get: (name: string) => {
+        value: string
+      }
+    }
+  } & Request,
+): Promise<Response> {
+  const payload = await getPayload({ config: configPromise })
+
+  const { searchParams } = new URL(req.url)
+
+  const path = searchParams.get('path')
+  const collection = searchParams.get('collection') as CollectionSlug
+  const slug = searchParams.get('slug')
+  const previewSecret = searchParams.get('previewSecret')
+
+  if (previewSecret !== process.env.PREVIEW_SECRET) {
+    return new Response('You are not allowed to preview this page', { status: 403 })
+  }
+
+  if (!path || !collection || !slug) {
+    return new Response('Insufficient search params', { status: 404 })
+  }
+
+  if (!path.startsWith('/')) {
+    return new Response('This endpoint can only be used for relative previews', { status: 500 })
+  }
+
+  let user
+
+  try {
+    user = await payload.auth({
+      req: req as unknown as PayloadRequest,
+      headers: req.headers,
+    })
+  } catch (error) {
+    payload.logger.error({ err: error }, 'Error verifying token for live preview')
+    return new Response('You are not allowed to preview this page', { status: 403 })
+  }
+
+  const draft = await draftMode()
+
+  if (!user) {
+    draft.disable()
+    return new Response('You are not allowed to preview this page', { status: 403 })
+  }
+
+  // You can add additional checks here to see if the user is allowed to preview this page
+
+  draft.enable()
+
+  redirect(path)
+}

examples/draft-preview/src/collections/Pages/hooks/revalidatePage.ts

@@ -2,7 +2,7 @@ import type { CollectionAfterChangeHook } from 'payload'
 
 import { revalidatePath } from 'next/cache'
 
-import type { Page } from '../../../payload-types'
+import type { Page } from '@payload-types'
 
 export const revalidatePage: CollectionAfterChangeHook<Page> = ({ doc, previousDoc, req }) => {
   if (req.context.skipRevalidate) {

examples/draft-preview/src/collections/Pages/index.ts

@@ -1,7 +1,6 @@
-import type { CollectionConfig } from 'payload'
+import type { CollectionConfig, CollectionSlug } from 'payload'
 
 import richText from '../../fields/richText'
-import { generatePreviewPath } from '../../utilities/generatePreviewPath'
 import { loggedIn } from './access/loggedIn'
 import { publishedOrLoggedIn } from './access/publishedOrLoggedIn'
 import { formatSlug } from './hooks/formatSlug'
@@ -17,12 +16,15 @@ export const Pages: CollectionConfig = {
   },
   admin: {
     defaultColumns: ['title', 'slug', 'updatedAt'],
-    preview: (doc) => {
-      const path = generatePreviewPath({
-        slug: typeof doc?.slug === 'string' ? doc.slug : '',
-        collection: 'pages',
+    preview: ({ slug, collection }: { slug: string; collection: CollectionSlug }) => {
+      const encodedParams = new URLSearchParams({
+        slug,
+        collection,
+        path: `/${slug}`,
+        previewSecret: process.env.PREVIEW_SECRET || '',
       })
-      return `${process.env.NEXT_PUBLIC_SERVER_URL}${path}`
+
+      return `${process.env.NEXT_PUBLIC_SERVER_URL}/preview?${encodedParams.toString()}`
     },
     useAsTitle: 'title',
   },

examples/draft-preview/src/components/CMSLink/index.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import React from 'react'
 
-import type { Page } from '../../payload-types'
+import type { Page } from '@payload-types'
 
 import { Button } from '../Button'
 

examples/draft-preview/src/components/Header/index.tsx

@@ -1,16 +1,22 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
+import { getPayload } from 'payload'
+import configPromise from '@payload-config'
 
-import type { MainMenu } from '../../payload-types'
+import type { MainMenu } from '@payload-types'
 
-import { getCachedGlobal } from '../../utilities/getGlobals'
 import { CMSLink } from '../CMSLink'
 import { Gutter } from '../Gutter'
 import classes from './index.module.scss'
 
 export async function Header() {
-  const header: MainMenu = await getCachedGlobal('main-menu', 1)()
+  const payload = await getPayload({ config: configPromise })
+
+  const header: MainMenu = await payload.findGlobal({
+    slug: 'main-menu',
+    depth: 1,
+  })
 
   const navItems = header?.navItems || []
 

examples/draft-preview/src/seed/home.ts

@@ -1,4 +1,4 @@
-import type { Page } from '../payload-types'
+import type { Page } from '@payload-types'
 
 // Used for pre-seeded content so that the homepage is not empty
 // @ts-expect-error: Page type is not fully compatible with the provided object structure

examples/draft-preview/src/seed/page.ts

@@ -1,4 +1,4 @@
-import type { Page } from '../payload-types'
+import type { Page } from '@payload-types'
 
 export const examplePage: Partial<Page> = {
   slug: 'example-page',

examples/draft-preview/src/seed/pageDraft.ts

@@ -1,4 +1,4 @@
-import type { Page } from '../payload-types'
+import type { Page } from '@payload-types'
 
 export const examplePageDraft: Partial<Page> = {
   richText: [

examples/draft-preview/src/utilities/generatePreviewPath.ts

@@ -1,28 +0,0 @@
-import type { CollectionSlug } from 'payload'
-
-const collectionPrefixMap: Partial<Record<CollectionSlug, string>> = {
-  pages: '',
-}
-
-type Props = {
-  collection: keyof typeof collectionPrefixMap
-  slug: string
-}
-
-export const generatePreviewPath = ({ slug, collection }: Props) => {
-  const path = `${collectionPrefixMap[collection]}/${slug}`
-
-  const params = {
-    slug,
-    collection,
-    path,
-  }
-
-  const encodedParams = new URLSearchParams()
-
-  Object.entries(params).forEach(([key, value]) => {
-    encodedParams.append(key, value)
-  })
-
-  return `/next/preview?${encodedParams.toString()}`
-}

examples/draft-preview/src/utilities/getGlobals.ts

@@ -1,27 +0,0 @@
-import type { Config } from 'src/payload-types'
-
-import { unstable_cache } from 'next/cache'
-import { getPayload } from 'payload'
-
-import configPromise from '../payload.config'
-
-type Global = keyof Config['globals']
-
-async function getGlobal(slug: Global, depth = 0) {
-  const payload = await getPayload({ config: configPromise })
-
-  const global = await payload.findGlobal({
-    slug,
-    depth,
-  })
-
-  return global
-}
-
-/**
- * Returns a unstable_cache function mapped with the cache tag for the slug
- */
-export const getCachedGlobal = (slug: Global, depth = 0) =>
-  unstable_cache(async () => getGlobal(slug, depth), [slug], {
-    tags: [`global_${slug}`],
-  })

examples/draft-preview/tsconfig.json

@@ -30,6 +30,9 @@
       "@payload-config": [
         "./src/payload.config.ts"
       ],
+      "@payload-types": [
+        "./src/payload-types.ts"
+      ],
       "react": [
         "./node_modules/@types/react"
       ],

examples/localization/src/app/(frontend)/[locale]/globals.css

@@ -9,8 +9,8 @@
   h4,
   h5,
   h6 {
-    font-size: auto;
-    font-weight: auto;
+    font-size: unset;
+    font-weight: unset;
   }
 
   :root {

examples/multi-tenant/README.md

@@ -10,11 +10,17 @@ To spin up this example locally, follow these steps:
 
 - `npx create-payload-app --example multi-tenant`
 
-2. `pnpm dev`, `yarn dev` or `npm run dev` to start the server
+2. `cp .env.example .env` to copy the example environment variables
+
+3. `pnpm dev`, `yarn dev` or `npm run dev` to start the server
    - Press `y` when prompted to seed the database
-3. `open http://localhost:3000` to access the home page
-4. `open http://localhost:3000/admin` to access the admin panel
-   - Login with email `demo@payloadcms.com` and password `demo`
+4. `open http://localhost:3000` to access the home page
+5. `open http://localhost:3000/admin` to access the admin panel
+
+### Default users
+
+The seed script seeds 3 tenants.
+Login with email `demo@payloadcms.com` and password `demo`
 
 ## How it works
 
@@ -28,7 +34,7 @@ See the [Collections](https://payloadcms.com/docs/configuration/collections) doc
 
 - #### Users
 
-  The `users` collection is auth-enabled and encompass both app-wide and tenant-scoped users based on the value of their `roles` and `tenants` fields. Users with the role `super-admin` can manage your entire application, while users with the _tenant role_ of `admin` have limited access to the platform and can manage only the tenant(s) they are assigned to, see [Tenants](#tenants) for more details.
+  The `users` collection is auth-enabled and encompasses both app-wide and tenant-scoped users based on the value of their `roles` and `tenants` fields. Users with the role `super-admin` can manage your entire application, while users with the _tenant role_ of `admin` have limited access to the platform and can manage only the tenant(s) they are assigned to, see [Tenants](#tenants) for more details.
 
   For additional help with authentication, see the official [Auth Example](https://github.com/payloadcms/payload/tree/main/examples/cms#readme) or the [Authentication](https://payloadcms.com/docs/authentication/overview#authentication-overview) docs.
 
@@ -40,13 +46,13 @@ See the [Collections](https://payloadcms.com/docs/configuration/collections) doc
 
   **Domain-based Tenant Setting**:
 
-  This example also supports domain-based tenant selection, where tenants can be associated with a specific domain. If a tenant is associated with a domain (e.g., `gold.localhost.com:3000`), when a user logs in from that domain, they will be automatically scoped to the matching tenant. This is accomplished through an optional `afterLogin` hook that sets a `payload-tenant` cookie based on the domain.
+  This example also supports domain-based tenant selection, where tenants can be associated with a specific domain. If a tenant is associated with a domain (e.g., `gold.test:3000`), when a user logs in from that domain, they will be automatically scoped to the matching tenant. This is accomplished through an optional `afterLogin` hook that sets a `payload-tenant` cookie based on the domain.
 
-  The seed script seeds 3 tenants, for the domain portion of the example to function properly you will need to add the following entries to your systems `/etc/hosts` file:
+For the domain portion of the example to function properly, you will need to add the following entries to your system's `/etc/hosts` file:
 
-  - gold.localhost.com:3000
-  - silver.localhost.com:3000
-  - bronze.localhost.com:3000
+```
+127.0.0.1 gold.test silver.test bronze.test
+```
 
 - #### Pages
 
@@ -54,7 +60,7 @@ See the [Collections](https://payloadcms.com/docs/configuration/collections) doc
 
 ## Access control
 
-Basic role-based access control is setup to determine what users can and cannot do based on their roles, which are:
+Basic role-based access control is set up to determine what users can and cannot do based on their roles, which are:
 
 - `super-admin`: They can access the Payload admin panel to manage your multi-tenant application. They can see all tenants and make all operations.
 - `user`: They can only access the Payload admin panel if they are a tenant-admin, in which case they have a limited access to operations based on their tenant (see below).

examples/multi-tenant/src/app/(app)/page.tsx

@@ -10,10 +10,10 @@ export default async ({ params: paramsPromise }: { params: Promise<{ slug: strin
       <p>When you visit a tenant by domain, the domain is used to determine the tenant.</p>
       <p>
         For example, visiting{' '}
-        <a href="http://gold.localhost.com:3000/tenant-domains/login">
-          http://gold.localhost.com:3000/tenant-domains/login
+        <a href="http://gold.test:3000/tenant-domains/login">
+          http://gold.test:3000/tenant-domains/login
         </a>{' '}
-        will show the tenant with the domain "gold.localhost.com".
+        will show the tenant with the domain "gold.test".
       </p>
 
       <h2>Slugs</h2>

examples/multi-tenant/src/collections/Pages/access/superAdminOrTenantAdmin.ts

@@ -5,7 +5,7 @@ import { Access } from 'payload'
 /**
  * Tenant admins and super admins can will be allowed access
  */
-export const superAdminOrTeanantAdminAccess: Access = ({ req }) => {
+export const superAdminOrTenantAdminAccess: Access = ({ req }) => {
   if (!req.user) {
     return false
   }

examples/multi-tenant/src/collections/Pages/index.ts

@@ -1,15 +1,15 @@
 import type { CollectionConfig } from 'payload'
 
 import { ensureUniqueSlug } from './hooks/ensureUniqueSlug'
-import { superAdminOrTeanantAdminAccess } from '@/collections/Pages/access/superAdminOrTenantAdmin'
+import { superAdminOrTenantAdminAccess } from '@/collections/Pages/access/superAdminOrTenantAdmin'
 
 export const Pages: CollectionConfig = {
   slug: 'pages',
   access: {
-    create: superAdminOrTeanantAdminAccess,
-    delete: superAdminOrTeanantAdminAccess,
+    create: superAdminOrTenantAdminAccess,
+    delete: superAdminOrTenantAdminAccess,
     read: () => true,
-    update: superAdminOrTeanantAdminAccess,
+    update: superAdminOrTenantAdminAccess,
   },
   admin: {
     useAsTitle: 'title',

examples/multi-tenant/src/collections/Users/index.ts

@@ -10,6 +10,9 @@ import { setCookieBasedOnDomain } from './hooks/setCookieBasedOnDomain'
 import { tenantsArrayField } from '@payloadcms/plugin-multi-tenant/fields'
 
 const defaultTenantArrayField = tenantsArrayField({
+  tenantsArrayFieldName: 'tenants',
+  tenantsArrayTenantFieldName: 'tenant',
+  tenantsCollectionSlug: 'tenants',
   arrayFieldAccess: {},
   tenantFieldAccess: {},
   rowFields: [

examples/multi-tenant/src/migrations/seed.ts

@@ -1,6 +1,33 @@
 import type { MigrateUpArgs } from '@payloadcms/db-mongodb'
 
 export async function up({ payload }: MigrateUpArgs): Promise<void> {
+  const tenant1 = await payload.create({
+    collection: 'tenants',
+    data: {
+      name: 'Tenant 1',
+      slug: 'gold',
+      domain: 'gold.test',
+    },
+  })
+
+  const tenant2 = await payload.create({
+    collection: 'tenants',
+    data: {
+      name: 'Tenant 2',
+      slug: 'silver',
+      domain: 'silver.test',
+    },
+  })
+
+  const tenant3 = await payload.create({
+    collection: 'tenants',
+    data: {
+      name: 'Tenant 3',
+      slug: 'bronze',
+      domain: 'bronze.test',
+    },
+  })
+
   await payload.create({
     collection: 'users',
     data: {
@@ -10,47 +37,16 @@ export async function up({ payload }: MigrateUpArgs): Promise<void> {
     },
   })
 
-  const tenant1 = await payload.create({
-    collection: 'tenants',
-    data: {
-      name: 'Tenant 1',
-      slug: 'gold',
-      domain: 'gold.localhost.com',
-    },
-  })
-
-  const tenant2 = await payload.create({
-    collection: 'tenants',
-    data: {
-      name: 'Tenant 2',
-      slug: 'silver',
-      domain: 'silver.localhost.com',
-    },
-  })
-
-  const tenant3 = await payload.create({
-    collection: 'tenants',
-    data: {
-      name: 'Tenant 3',
-      slug: 'bronze',
-      domain: 'bronze.localhost.com',
-    },
-  })
-
   await payload.create({
     collection: 'users',
     data: {
       email: 'tenant1@payloadcms.com',
-      password: 'test',
+      password: 'demo',
       tenants: [
         {
           roles: ['tenant-admin'],
           tenant: tenant1.id,
         },
-        // {
-        //   roles: ['tenant-admin'],
-        //   tenant: tenant2.id,
-        // },
       ],
       username: 'tenant1',
     },
@@ -60,7 +56,7 @@ export async function up({ payload }: MigrateUpArgs): Promise<void> {
     collection: 'users',
     data: {
       email: 'tenant2@payloadcms.com',
-      password: 'test',
+      password: 'demo',
       tenants: [
         {
           roles: ['tenant-admin'],
@@ -75,7 +71,7 @@ export async function up({ payload }: MigrateUpArgs): Promise<void> {
     collection: 'users',
     data: {
       email: 'tenant3@payloadcms.com',
-      password: 'test',
+      password: 'demo',
       tenants: [
         {
           roles: ['tenant-admin'],
@@ -90,7 +86,7 @@ export async function up({ payload }: MigrateUpArgs): Promise<void> {
     collection: 'users',
     data: {
       email: 'multi-admin@payloadcms.com',
-      password: 'test',
+      password: 'demo',
       tenants: [
         {
           roles: ['tenant-admin'],
@@ -105,7 +101,7 @@ export async function up({ payload }: MigrateUpArgs): Promise<void> {
           tenant: tenant3.id,
         },
       ],
-      username: 'tenant3',
+      username: 'multi-admin',
     },
   })
 

examples/remix/website/package.json

@@ -18,7 +18,8 @@
     "payload": "latest",
     "payload-app": "workspace:*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.15.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-monorepo",
-  "version": "3.19.0",
+  "version": "3.23.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -126,7 +126,7 @@
     "@sentry/nextjs": "^8.33.1",
     "@sentry/node": "^8.33.1",
     "@swc-node/register": "1.10.9",
-    "@swc/cli": "0.5.1",
+    "@swc/cli": "0.6.0",
     "@swc/jest": "0.2.37",
     "@types/fs-extra": "^11.0.2",
     "@types/jest": "29.5.12",
@@ -166,7 +166,7 @@
     "shelljs": "0.8.5",
     "slash": "3.0.0",
     "sort-package-json": "^2.10.0",
-    "swc-plugin-transform-remove-imports": "2.0.0",
+    "swc-plugin-transform-remove-imports": "3.1.0",
     "tempy": "1.0.1",
     "tstyche": "^3.1.1",
     "tsx": "4.19.2",

packages/create-payload-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-payload-app",
-  "version": "3.19.0",
+  "version": "3.23.0",
   "homepage": "https://payloadcms.com",
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
   "dependencies": {
     "@clack/prompts": "^0.7.0",
     "@sindresorhus/slugify": "^1.1.0",
-    "@swc/core": "1.7.10",
+    "@swc/core": "1.10.12",
     "arg": "^5.0.0",
     "chalk": "^4.1.0",
     "comment-json": "^4.2.3",

packages/create-payload-app/src/lib/manage-env-files.ts

@@ -54,6 +54,7 @@ const generateEnvContent = (
     .filter((line) => line.includes('=') && !line.startsWith('#'))
     .forEach((line) => {
       const [key, value] = line.split('=')
+      // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
       envVars[key] = value
     })
 

packages/create-payload-app/src/lib/templates.ts

@@ -1,6 +1,7 @@
 import type { ProjectTemplate } from '../types.js'
 
 import { error, info } from '../utils/log.js'
+import { PACKAGE_VERSION } from './constants.js'
 
 export function validateTemplate(templateName: string): boolean {
   const validTemplates = getValidTemplates()
@@ -19,13 +20,13 @@ export function getValidTemplates(): ProjectTemplate[] {
       name: 'blank',
       type: 'starter',
       description: 'Blank 3.0 Template',
-      url: `https://github.com/payloadcms/payload/templates/blank#main`,
+      url: `https://github.com/payloadcms/payload/templates/blank#v${PACKAGE_VERSION}`,
     },
     {
       name: 'website',
       type: 'starter',
       description: 'Website Template',
-      url: `https://github.com/payloadcms/payload/templates/website#main`,
+      url: `https://github.com/payloadcms/payload/templates/website#v${PACKAGE_VERSION}`,
     },
     {
       name: 'plugin',

packages/create-payload-app/src/lib/wrap-next-config.ts

@@ -224,12 +224,12 @@ function insertBeforeAndAfter(content: string, loc: Loc): string {
   }
 
   // insert ) after end
-  lines[end.line - 1] = insert(lines[end.line - 1], end.column, ')')
+  lines[end.line - 1] = insert(lines[end.line - 1]!, end.column, ')')
   // insert withPayload before start
   if (start.line === end.line) {
-    lines[end.line - 1] = insert(lines[end.line - 1], start.column, 'withPayload(')
+    lines[end.line - 1] = insert(lines[end.line - 1]!, start.column, 'withPayload(')
   } else {
-    lines[start.line - 1] = insert(lines[start.line - 1], start.column, 'withPayload(')
+    lines[start.line - 1] = insert(lines[start.line - 1]!, start.column, 'withPayload(')
   }
 
   return lines.join('\n')

packages/create-payload-app/tsconfig.json

@@ -1,7 +1,3 @@
 {
   "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    /* TODO: remove the following lines */
-    "noUncheckedIndexedAccess": false,
-  },
 }

packages/db-mongodb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-mongodb",
-  "version": "3.19.0",
+  "version": "3.23.0",
   "description": "The officially supported MongoDB database adapter for Payload",
   "homepage": "https://payloadcms.com",
   "repository": {

packages/db-mongodb/src/models/buildCollectionSchema.ts

@@ -34,11 +34,6 @@ export const buildCollectionSchema = (
     schema.index(indexDefinition, { unique: true })
   }
 
-  if (payload.config.indexSortableFields && collection.timestamps !== false) {
-    schema.index({ updatedAt: 1 })
-    schema.index({ createdAt: 1 })
-  }
-
   schema
     .plugin<any, PaginateOptions>(paginate, { useEstimatedCount: true })
     .plugin(getBuildQueryPlugin({ collectionSlug: collection.slug }))

packages/db-mongodb/src/models/buildSchema.ts

@@ -3,7 +3,6 @@ import type { IndexOptions, Schema, SchemaOptions, SchemaTypeOptions } from 'mon
 import mongoose from 'mongoose'
 import {
   type ArrayField,
-  type Block,
   type BlocksField,
   type CheckboxField,
   type CodeField,
@@ -193,11 +192,12 @@ const fieldToSchemaMap: Record<string, FieldSchemaGenerator> = {
     schema.add({
       [field.name]: localizeSchema(field, fieldSchema, payload.config.localization),
     })
-
-    field.blocks.forEach((blockItem: Block) => {
+    ;(field.blockReferences ?? field.blocks).forEach((blockItem) => {
       const blockSchema = new mongoose.Schema({}, { _id: false, id: false })
 
-      blockItem.fields.forEach((blockField) => {
+      const block = typeof blockItem === 'string' ? payload.blocks[blockItem] : blockItem
+
+      block.fields.forEach((blockField) => {
         const addFieldSchema: FieldSchemaGenerator = fieldToSchemaMap[blockField.type]
         if (addFieldSchema) {
           addFieldSchema(blockField, blockSchema, payload, buildSchemaOptions)
@@ -207,11 +207,11 @@ const fieldToSchemaMap: Record<string, FieldSchemaGenerator> = {
       if (field.localized && payload.config.localization) {
         payload.config.localization.localeCodes.forEach((localeCode) => {
           // @ts-expect-error Possible incorrect typing in mongoose types, this works
-          schema.path(`${field.name}.${localeCode}`).discriminator(blockItem.slug, blockSchema)
+          schema.path(`${field.name}.${localeCode}`).discriminator(block.slug, blockSchema)
         })
       } else {
         // @ts-expect-error Possible incorrect typing in mongoose types, this works
-        schema.path(field.name).discriminator(blockItem.slug, blockSchema)
+        schema.path(field.name).discriminator(block.slug, blockSchema)
       }
     })
   },

packages/db-mongodb/src/predefinedMigrations/migrateRelationshipsV2_V3.ts

@@ -80,6 +80,10 @@ const hasRelationshipOrUploadField = ({ fields }: { fields: Field[] }): boolean
 
     if ('blocks' in field) {
       for (const block of field.blocks) {
+        if (typeof block === 'string') {
+          // Skip - string blocks have been added in v3 and thus don't need to be migrated
+          continue
+        }
         if (hasRelationshipOrUploadField({ fields: block.fields })) {
           return true
         }

packages/db-mongodb/src/queries/getLocalizedSortProperty.ts

@@ -65,18 +65,24 @@ export const getLocalizedSortProperty = ({
     }
 
     if (matchedField.type === 'blocks') {
-      nextFields = matchedField.blocks.reduce((flattenedBlockFields, block) => {
-        return [
-          ...flattenedBlockFields,
-          ...block.flattenedFields.filter(
-            (blockField) =>
-              (fieldAffectsData(blockField) &&
-                blockField.name !== 'blockType' &&
-                blockField.name !== 'blockName') ||
-              !fieldAffectsData(blockField),
-          ),
-        ]
-      }, [])
+      nextFields = (matchedField.blockReferences ?? matchedField.blocks).reduce(
+        (flattenedBlockFields, _block) => {
+          // TODO: iterate over blocks mapped to block slug in v4, or pass through payload.blocks
+          const block =
+            typeof _block === 'string' ? config.blocks.find((b) => b.slug === _block) : _block
+          return [
+            ...flattenedBlockFields,
+            ...block.flattenedFields.filter(
+              (blockField) =>
+                (fieldAffectsData(blockField) &&
+                  blockField.name !== 'blockType' &&
+                  blockField.name !== 'blockName') ||
+                !fieldAffectsData(blockField),
+            ),
+          ]
+        },
+        [],
+      )
     }
 
     const result = incomingResult ? `${incomingResult}.${localizedSegment}` : localizedSegment

packages/db-mongodb/src/queries/parseParams.ts

@@ -52,30 +52,37 @@ export async function parseParams({
         // So we need to loop on keys again here to handle each operator independently
         const pathOperators = where[relationOrPath]
         if (typeof pathOperators === 'object') {
-          for (const operator of Object.keys(pathOperators)) {
-            if (validOperatorSet.has(operator as Operator)) {
-              const searchParam = await buildSearchParam({
-                collectionSlug,
-                fields,
-                globalSlug,
-                incomingPath: relationOrPath,
-                locale,
-                operator,
-                payload,
-                val: pathOperators[operator],
-              })
+          const validOperators = Object.keys(pathOperators).filter((operator) =>
+            validOperatorSet.has(operator as Operator),
+          )
+          for (const operator of validOperators) {
+            const searchParam = await buildSearchParam({
+              collectionSlug,
+              fields,
+              globalSlug,
+              incomingPath: relationOrPath,
+              locale,
+              operator,
+              payload,
+              val: pathOperators[operator],
+            })
 
-              if (searchParam?.value && searchParam?.path) {
-                result = {
-                  ...result,
-                  [searchParam.path]: searchParam.value,
+            if (searchParam?.value && searchParam?.path) {
+              if (validOperators.length > 1) {
+                if (!result.$and) {
+                  result.$and = []
                 }
-              } else if (typeof searchParam?.value === 'object') {
-                result = deepMergeWithCombinedArrays(result, searchParam.value, {
-                  // dont clone Types.ObjectIDs
-                  clone: false,
+                result.$and.push({
+                  [searchParam.path]: searchParam.value,
                 })
+              } else {
+                result[searchParam.path] = searchParam.value
               }
+            } else if (typeof searchParam?.value === 'object') {
+              result = deepMergeWithCombinedArrays(result, searchParam.value, {
+                // dont clone Types.ObjectIDs
+                clone: false,
+              })
             }
           }
         }

packages/db-mongodb/src/queries/sanitizeQueryValue.ts

@@ -1,4 +1,10 @@
-import type { FlattenedBlock, FlattenedField, Payload, RelationshipField } from 'payload'
+import type {
+  FlattenedBlock,
+  FlattenedBlocksField,
+  FlattenedField,
+  Payload,
+  RelationshipField,
+} from 'payload'
 
 import { Types } from 'mongoose'
 import { createArrayFromCommaDelineated } from 'payload'
@@ -40,14 +46,18 @@ const buildExistsQuery = (formattedValue, path, treatEmptyString = true) => {
 // returns nestedField Field object from blocks.nestedField path because getLocalizedPaths splits them only for relationships
 const getFieldFromSegments = ({
   field,
+  payload,
   segments,
 }: {
   field: FlattenedBlock | FlattenedField
+  payload: Payload
   segments: string[]
 }) => {
-  if ('blocks' in field) {
-    for (const block of field.blocks) {
-      const field = getFieldFromSegments({ field: block, segments })
+  if ('blocks' in field || 'blockReferences' in field) {
+    const _field: FlattenedBlocksField = field as FlattenedBlocksField
+    for (const _block of _field.blockReferences ?? _field.blocks) {
+      const block: FlattenedBlock = typeof _block === 'string' ? payload.blocks[_block] : _block
+      const field = getFieldFromSegments({ field: block, payload, segments })
       if (field) {
         return field
       }
@@ -67,7 +77,7 @@ const getFieldFromSegments = ({
       }
 
       segments.shift()
-      return getFieldFromSegments({ field: foundField, segments })
+      return getFieldFromSegments({ field: foundField, payload, segments })
     }
   }
 }
@@ -91,7 +101,7 @@ export const sanitizeQueryValue = ({
   if (['array', 'blocks', 'group', 'tab'].includes(field.type) && path.includes('.')) {
     const segments = path.split('.')
     segments.shift()
-    const foundField = getFieldFromSegments({ field, segments })
+    const foundField = getFieldFromSegments({ field, payload, segments })
 
     if (foundField) {
       field = foundField

packages/db-mongodb/src/utilities/buildProjectionFromSelect.ts

@@ -123,7 +123,8 @@ const traverseFields = ({
       case 'blocks': {
         const blocksSelect = select[field.name] as SelectType
 
-        for (const block of field.blocks) {
+        for (const _block of field.blockReferences ?? field.blocks) {
+          const block = typeof _block === 'string' ? adapter.payload.blocks[_block] : _block
           if (
             (selectMode === 'include' && blocksSelect[block.slug] === true) ||
             (selectMode === 'exclude' && typeof blocksSelect[block.slug] === 'undefined')

packages/db-mongodb/src/utilities/sanitizeRelationshipIDs.spec.ts

@@ -1,4 +1,4 @@
-import type { Field, SanitizedConfig } from 'payload'
+import { flattenAllFields, type Field, type SanitizedConfig } from 'payload'
 
 import { Types } from 'mongoose'
 
@@ -74,7 +74,28 @@ const relsFields: Field[] = [
   },
 ]
 
+const referenceBlockFields: Field[] = [
+  ...relsFields,
+  {
+    name: 'group',
+    type: 'group',
+    fields: relsFields,
+  },
+  {
+    name: 'array',
+    type: 'array',
+    fields: relsFields,
+  },
+]
+
 const config = {
+  blocks: [
+    {
+      slug: 'reference-block',
+      fields: referenceBlockFields,
+      flattenedFields: flattenAllFields({ fields: referenceBlockFields }),
+    },
+  ],
   collections: [
     {
       slug: 'docs',
@@ -137,6 +158,11 @@ const config = {
             },
           ],
         },
+        {
+          name: 'blockReferences',
+          type: 'blocks',
+          blockReferences: ['reference-block'],
+        },
         {
           name: 'group',
           type: 'group',
@@ -321,6 +347,14 @@ describe('sanitizeRelationshipIDs', () => {
           group: { ...relsData },
         },
       ],
+      blockReferences: [
+        {
+          blockType: 'reference-block',
+          array: [{ ...relsData }],
+          group: { ...relsData },
+          ...relsData,
+        },
+      ],
       group: {
         ...relsData,
         array: [{ ...relsData }],

packages/db-mongodb/src/utilities/sanitizeRelationshipIDs.ts

@@ -1,7 +1,7 @@
 import type { CollectionConfig, Field, SanitizedConfig, TraverseFieldsCallback } from 'payload'
 
 import { Types } from 'mongoose'
-import { APIError, traverseFields } from 'payload'
+import { traverseFields } from 'payload'
 import { fieldAffectsData } from 'payload/shared'
 
 type Args = {
@@ -150,7 +150,7 @@ export const sanitizeRelationshipIDs = ({
     }
   }
 
-  traverseFields({ callback: sanitize, fields, fillEmpty: false, ref: data })
+  traverseFields({ callback: sanitize, config, fields, fillEmpty: false, ref: data })
 
   return data
 }

packages/db-postgres/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-postgres",
-  "version": "3.19.0",
+  "version": "3.23.0",
   "description": "The officially supported Postgres database adapter for Payload",
   "homepage": "https://payloadcms.com",
   "repository": {
@@ -88,7 +88,7 @@
     "@hyrious/esbuild-plugin-commonjs": "^0.2.4",
     "@payloadcms/eslint-config": "workspace:*",
     "@types/to-snake-case": "1.0.0",
-    "esbuild": "0.24.0",
+    "esbuild": "0.24.2",
     "payload": "workspace:*"
   },
   "peerDependencies": {

packages/db-sqlite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-sqlite",
-  "version": "3.19.0",
+  "version": "3.23.0",
   "description": "The officially supported SQLite database adapter for Payload",
   "homepage": "https://payloadcms.com",
   "repository": {

packages/db-sqlite/src/countDistinct.ts

@@ -1,7 +1,7 @@
 import type { ChainedMethods } from '@payloadcms/drizzle/types'
 
 import { chainMethods } from '@payloadcms/drizzle'
-import { count } from 'drizzle-orm'
+import { count, sql } from 'drizzle-orm'
 
 import type { CountDistinct, SQLiteAdapter } from './types.js'
 
@@ -9,6 +9,17 @@ export const countDistinct: CountDistinct = async function countDistinct(
   this: SQLiteAdapter,
   { db, joins, tableName, where },
 ) {
+  // When we don't have any joins - use a simple COUNT(*) query.
+  if (joins.length === 0) {
+    const countResult = await db
+      .select({
+        count: count(),
+      })
+      .from(this.tables[tableName])
+      .where(where)
+    return Number(countResult[0].count)
+  }
+
   const chainedMethods: ChainedMethods = []
 
   joins.forEach(({ condition, table }) => {
@@ -18,14 +29,20 @@ export const countDistinct: CountDistinct = async function countDistinct(
     })
   })
 
+  // When we have any joins, we need to count each individual ID only once.
+  // COUNT(*) doesn't work for this well in this case, as it also counts joined tables.
+  // SELECT (COUNT DISTINCT id) has a very slow performance on large tables.
+  // Instead, COUNT (GROUP BY id) can be used which is still slower than COUNT(*) but acceptable.
   const countResult = await chainMethods({
     methods: chainedMethods,
     query: db
       .select({
-        count: count(),
+        count: sql`COUNT(1) OVER()`,
       })
       .from(this.tables[tableName])
-      .where(where),
+      .where(where)
+      .groupBy(this.tables[tableName].id)
+      .limit(1),
   })
 
   return Number(countResult[0].count)