scaffolds test

docs: adds options table to payload-wide upload options (#10904 )
### What? This PR adds a table to the [Payload-wide Upload Options](https://payloadcms.com/docs/upload/overview#payload-wide-upload-options) section of the docs. ### Why? To give users more insight into the customization options provided out-of-the-box with uploads. Previously, these options were not visible on the docs, forcing users to inspect source code to see how they can customize their global upload settings. It wasn't clear, for example, that a `fileSize` limit would not produce a 413 in a response by default, but would truncate the file contents instead. ### How? Changes to `docs/upload/overview.mdx`.
2025-02-17 17:26:27 -05:00 · 2025-02-11 01:19:58 +00:00 · 2025-02-11 01:09:11 +00:00 · 2025-02-10 19:48:52 -05:00 · 2025-02-10 23:28:40 +00:00 · 2025-02-11 01:16:18 +02:00
569 changed files with 27800 additions and 21448 deletions
--- a/.github/CODEOWNERS
+++ b/.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 @GermanJablo
+/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
+/packages/eslint-*/ @denolfe @jmikrut @DanRibbens @AlessioGr @GermanJablo
+
+### Templates

-### Templates ###
 /templates/_data/ @denolfe @jmikrut @DanRibbens
 /templates/_template/ @denolfe @jmikrut @DanRibbens

-### Build Files ###
-**/tsconfig*.json @denolfe @jmikrut @DanRibbens @AlessioGr
+### Build Files
+
+**/tsconfig*.json @denolfe @jmikrut @DanRibbens @AlessioGr @GermanJablo
 **/jest.config.js @denolfe @jmikrut @DanRibbens @AlessioGr

-### Root ###
+### Root
+
 /package.json @denolfe @jmikrut @DanRibbens
 /tools/ @denolfe @jmikrut @DanRibbens
 /.husky/ @denolfe @jmikrut @DanRibbens
--- a/.github/actions/triage/package.json
+++ b/.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",
--- a/.github/pnpm-lock.yaml
+++ b/.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:
--- a/.github/workflows/lock-issues.yml
+++ b/.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: >
--- a/.vscode/settings.json
+++ b/.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"]
--- a/docs/admin/components.mdx
+++ b/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
 ---
--- a/docs/admin/hooks.mdx
+++ b/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,82 @@ 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.
+
+
+
--- a/docs/admin/overview.mdx
+++ b/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>
--- a/docs/admin/preview.mdx
+++ b/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>
+
--- a/docs/admin/views.mdx
+++ b/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'
--- a/docs/configuration/collections.mdx
+++ b/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.
--- a/docs/configuration/globals.mdx
+++ b/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.
--- a/docs/configuration/overview.mdx
+++ b/docs/configuration/overview.mdx
@@ -181,7 +181,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:

--- a/docs/fields/date.mdx
+++ b/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)            |

@@ -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>
--- a/docs/fields/overview.mdx
+++ b/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:
@@ -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'
-```
+```
--- a/docs/jobs-queue/queues.mdx
+++ b/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
+    }
  },
 })
 ```
--- a/docs/jobs-queue/workflows.mdx
+++ b/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                                                                      |
 | --------------------------- | -------------------------------------------------------------------------------- |
--- a/docs/live-preview/overview.mdx
+++ b/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
--- a/docs/plugins/form-builder.mdx
+++ b/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.

--- a/docs/plugins/multi-tenant.mdx
+++ b/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
 }
 ```

--- a/docs/plugins/nested-docs.mdx
+++ b/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
--- a/docs/plugins/overview.mdx
+++ b/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 is 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).

--- a/docs/plugins/redirects.mdx
+++ b/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.

--- a/docs/plugins/search.mdx
+++ b/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.

--- a/docs/plugins/sentry.mdx
+++ b/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.

--- a/docs/plugins/stripe.mdx
+++ b/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.

--- a/docs/production/preventing-abuse.mdx
+++ b/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.

--- a/docs/rich-text/migration.mdx
+++ b/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:

--- a/docs/rich-text/overview.mdx
+++ b/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

--- a/docs/upload/overview.mdx
+++ b/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:

--- a/eslint.config.js
+++ b/eslint.config.js
@@ -19,7 +19,7 @@ export const defaultESLintIgnores = [
  '**/build/',
  '**/node_modules/',
  '**/temp/',
-  '**/*.spec.ts',
+  '**/packages/*.spec.ts',
  'next-env.d.ts',
  '**/app',
 ]
--- a/examples/draft-preview/.env.example
+++ b/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
--- a/examples/draft-preview/README.md
+++ b/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

--- a/examples/draft-preview/next-env.d.ts
+++ b/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.
--- a/examples/draft-preview/package.json
+++ b/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",
--- a/examples/draft-preview/pnpm-lock.yaml
+++ b/examples/draft-preview/pnpm-lock.yaml
--- a/examples/draft-preview/src/app/(app)/[slug]/page.tsx
+++ b/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,
--- a/examples/draft-preview/src/app/(app)/next/exit-preview/route.ts
+++ b/examples/draft-preview/src/app/(app)/next/exit-preview/route.ts
--- a/examples/draft-preview/src/app/(app)/next/exit-preview/GET.ts
+++ b/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')
-}
--- a/examples/draft-preview/src/app/(app)/next/preview/route.ts
+++ b/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)
-  }
-}
--- a/examples/draft-preview/src/app/(app)/preview/route.ts
+++ b/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)
+}
--- a/examples/draft-preview/src/collections/Pages/hooks/revalidatePage.ts
+++ b/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) {
--- a/examples/draft-preview/src/collections/Pages/index.ts
+++ b/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',
  },
--- a/examples/draft-preview/src/components/CMSLink/index.tsx
+++ b/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'

--- a/examples/draft-preview/src/components/Header/index.tsx
+++ b/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 || []

--- a/examples/draft-preview/src/seed/home.ts
+++ b/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
--- a/examples/draft-preview/src/seed/page.ts
+++ b/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',
--- a/examples/draft-preview/src/seed/pageDraft.ts
+++ b/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: [
--- a/examples/draft-preview/src/utilities/generatePreviewPath.ts
+++ b/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()}`
-}
--- a/examples/draft-preview/src/utilities/getGlobals.ts
+++ b/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}`],
-  })
--- a/examples/draft-preview/tsconfig.json
+++ b/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"
      ],
--- a/examples/localization/src/app/(frontend)/[locale]/globals.css
+++ b/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 {
--- a/examples/multi-tenant/README.md
+++ b/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).
--- a/examples/multi-tenant/src/app/(app)/page.tsx
+++ b/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>
--- a/examples/multi-tenant/src/collections/Pages/access/superAdminOrTenantAdmin.ts
+++ b/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
  }
--- a/examples/multi-tenant/src/collections/Pages/index.ts
+++ b/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',
--- a/examples/multi-tenant/src/migrations/seed.ts
+++ b/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',
    },
  })

--- a/examples/remix/website/package.json
+++ b/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",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "payload-monorepo",
-  "version": "3.19.0",
+  "version": "3.22.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",
--- a/packages/create-payload-app/package.json
+++ b/packages/create-payload-app/package.json
@@ -1,6 +1,6 @@
 {
  "name": "create-payload-app",
-  "version": "3.19.0",
+  "version": "3.22.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",
--- a/packages/create-payload-app/src/lib/manage-env-files.ts
+++ b/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
    })

--- a/packages/create-payload-app/src/lib/templates.ts
+++ b/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',
--- a/packages/create-payload-app/src/lib/wrap-next-config.ts
+++ b/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')
--- a/packages/create-payload-app/tsconfig.json
+++ b/packages/create-payload-app/tsconfig.json
@@ -1,7 +1,3 @@
 {
  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    /* TODO: remove the following lines */
-    "noUncheckedIndexedAccess": false,
-  },
 }
--- a/packages/db-mongodb/package.json
+++ b/packages/db-mongodb/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/db-mongodb",
-  "version": "3.19.0",
+  "version": "3.22.0",
  "description": "The officially supported MongoDB database adapter for Payload",
  "homepage": "https://payloadcms.com",
  "repository": {
--- a/packages/db-mongodb/src/queries/parseParams.ts
+++ b/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,
+              })
            }
          }
        }
--- a/packages/db-postgres/package.json
+++ b/packages/db-postgres/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/db-postgres",
-  "version": "3.19.0",
+  "version": "3.22.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": {
--- a/packages/db-sqlite/package.json
+++ b/packages/db-sqlite/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/db-sqlite",
-  "version": "3.19.0",
+  "version": "3.22.0",
  "description": "The officially supported SQLite database adapter for Payload",
  "homepage": "https://payloadcms.com",
  "repository": {
--- a/packages/db-sqlite/src/countDistinct.ts
+++ b/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'

@@ -11,18 +11,27 @@ export const countDistinct: CountDistinct = async function countDistinct(
 ) {
  const chainedMethods: ChainedMethods = []

-  joins.forEach(({ condition, table }) => {
+  // COUNT(DISTINCT id)  is slow on large tables, so we only use DISTINCT if we have to
+  const visitedPaths = new Set([])
+  let useDistinct = false
+  joins.forEach(({ condition, queryPath, table }) => {
+    if (!useDistinct && queryPath) {
+      if (visitedPaths.has(queryPath)) {
+        useDistinct = true
+      } else {
+        visitedPaths.add(queryPath)
+      }
+    }
    chainedMethods.push({
      args: [table, condition],
      method: 'leftJoin',
    })
  })
-
  const countResult = await chainMethods({
    methods: chainedMethods,
    query: db
      .select({
-        count: count(),
+        count: useDistinct ? sql`COUNT(DISTINCT ${this.tables[tableName].id})` : count(),
      })
      .from(this.tables[tableName])
      .where(where),
--- a/packages/db-vercel-postgres/package.json
+++ b/packages/db-vercel-postgres/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/db-vercel-postgres",
-  "version": "3.19.0",
+  "version": "3.22.0",
  "description": "Vercel Postgres adapter for Payload",
  "homepage": "https://payloadcms.com",
  "repository": {
@@ -89,7 +89,7 @@
    "@payloadcms/eslint-config": "workspace:*",
    "@types/pg": "8.10.2",
    "@types/to-snake-case": "1.0.0",
-    "esbuild": "0.24.0",
+    "esbuild": "0.24.2",
    "payload": "workspace:*"
  },
  "peerDependencies": {
--- a/packages/drizzle/package.json
+++ b/packages/drizzle/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/drizzle",
-  "version": "3.19.0",
+  "version": "3.22.0",
  "description": "A library of shared functions used by different payload database adapters",
  "homepage": "https://payloadcms.com",
  "repository": {
--- a/packages/drizzle/src/createGlobal.ts
+++ b/packages/drizzle/src/createGlobal.ts
@@ -16,7 +16,9 @@ export async function createGlobal<T extends Record<string, unknown>>(

  const tableName = this.tableNameMap.get(toSnakeCase(globalConfig.slug))

-  const result = await upsertRow<T>({
+  data.createdAt = new Date().toISOString()
+
+  const result = await upsertRow<{ globalType: string } & T>({
    adapter: this,
    data,
    db,
@@ -26,5 +28,7 @@ export async function createGlobal<T extends Record<string, unknown>>(
    tableName,
  })

+  result.globalType = slug
+
  return result
 }
--- a/packages/drizzle/src/postgres/countDistinct.ts
+++ b/packages/drizzle/src/postgres/countDistinct.ts
@@ -1,4 +1,4 @@
-import { count } from 'drizzle-orm'
+import { count, sql } from 'drizzle-orm'

 import type { ChainedMethods, TransactionPg } from '../types.js'
 import type { BasePostgresAdapter, CountDistinct } from './types.js'
@@ -11,7 +11,17 @@ export const countDistinct: CountDistinct = async function countDistinct(
 ) {
  const chainedMethods: ChainedMethods = []

-  joins.forEach(({ condition, table }) => {
+  // COUNT(DISTINCT id)  is slow on large tables, so we only use DISTINCT if we have to
+  const visitedPaths = new Set([])
+  let useDistinct = false
+  joins.forEach(({ condition, queryPath, table }) => {
+    if (!useDistinct && queryPath) {
+      if (visitedPaths.has(queryPath)) {
+        useDistinct = true
+      } else {
+        visitedPaths.add(queryPath)
+      }
+    }
    chainedMethods.push({
      args: [table, condition],
      method: 'leftJoin',
@@ -22,7 +32,7 @@ export const countDistinct: CountDistinct = async function countDistinct(
    methods: chainedMethods,
    query: (db as TransactionPg)
      .select({
-        count: count(),
+        count: useDistinct ? sql`COUNT(DISTINCT ${this.tables[tableName].id})` : count(),
      })
      .from(this.tables[tableName])
      .where(where),
--- a/packages/drizzle/src/queries/addJoinTable.ts
+++ b/packages/drizzle/src/queries/addJoinTable.ts
@@ -1,5 +1,5 @@
-import type { SQL } from 'drizzle-orm'
-import type { PgTableWithColumns } from 'drizzle-orm/pg-core'
+import { type SQL } from 'drizzle-orm'
+import { type PgTableWithColumns } from 'drizzle-orm/pg-core'

 import type { GenericTable } from '../types.js'
 import type { BuildQueryJoinAliases } from './buildQuery.js'
@@ -10,16 +10,18 @@ export const addJoinTable = ({
  type,
  condition,
  joins,
+  queryPath,
  table,
 }: {
  condition: SQL
  joins: BuildQueryJoinAliases
+  queryPath?: string
  table: GenericTable | PgTableWithColumns<any>
  type?: 'innerJoin' | 'leftJoin' | 'rightJoin'
 }) => {
  const name = getNameFromDrizzleTable(table)

  if (!joins.some((eachJoin) => getNameFromDrizzleTable(eachJoin.table) === name)) {
-    joins.push({ type, condition, table })
+    joins.push({ type, condition, queryPath, table })
  }
 }
--- a/packages/drizzle/src/queries/buildQuery.ts
+++ b/packages/drizzle/src/queries/buildQuery.ts
@@ -9,6 +9,7 @@ import { parseParams } from './parseParams.js'

 export type BuildQueryJoinAliases = {
  condition: SQL
+  queryPath?: string
  table: GenericTable | PgTableWithColumns<any>
  type?: 'innerJoin' | 'leftJoin' | 'rightJoin'
 }[]
--- a/packages/drizzle/src/queries/getTableColumnFromPath.ts
+++ b/packages/drizzle/src/queries/getTableColumnFromPath.ts
@@ -363,7 +363,10 @@ export const getTableColumnFromPath = ({
          const {
            newAliasTable: aliasRelationshipTable,
            newAliasTableName: aliasRelationshipTableName,
-          } = getTableAlias({ adapter, tableName: relationTableName })
+          } = getTableAlias({
+            adapter,
+            tableName: relationTableName,
+          })

          if (selectLocale && field.localized && adapter.payload.config.localization) {
            selectFields._locale = aliasRelationshipTable.locale
@@ -380,17 +383,21 @@ export const getTableColumnFromPath = ({
              conditions.push(eq(aliasRelationshipTable.locale, locale))
            }

-            joins.push({
+            addJoinTable({
              condition: and(...conditions),
+              joins,
+              queryPath: `${constraintPath}.${field.name}`,
              table: aliasRelationshipTable,
            })
          } else {
            // Join in the relationships table
-            joins.push({
+            addJoinTable({
              condition: and(
                eq((aliasTable || adapter.tables[rootTableName]).id, aliasRelationshipTable.parent),
                like(aliasRelationshipTable.path, `${constraintPath}${field.name}`),
              ),
+              joins,
+              queryPath: `${constraintPath}.${field.name}`,
              table: aliasRelationshipTable,
            })
          }
--- a/packages/drizzle/src/queries/sanitizeQueryValue.ts
+++ b/packages/drizzle/src/queries/sanitizeQueryValue.ts
@@ -87,9 +87,11 @@ export const sanitizeQueryValue = ({
      if (field.type === 'number') {
        formattedValue = formattedValue.map((arrayVal) => parseFloat(arrayVal))
      }
+    } else if (typeof formattedValue === 'number') {
+      formattedValue = [formattedValue]
    }

-    if (!Array.isArray(formattedValue) || formattedValue.length === 0) {
+    if (!Array.isArray(formattedValue)) {
      return null
    }
  }
--- a/packages/drizzle/src/transform/write/array.ts
+++ b/packages/drizzle/src/transform/write/array.ts
@@ -97,6 +97,7 @@ export const transformArray = ({
        data: arrayRow,
        fieldPrefix: '',
        fields: field.flattenedFields,
+        insideArrayOrBlock: true,
        locales: newRow.locales,
        numbers,
        parentTableName: arrayTableName,
--- a/packages/drizzle/src/transform/write/blocks.ts
+++ b/packages/drizzle/src/transform/write/blocks.ts
@@ -101,6 +101,7 @@ export const transformBlocks = ({
      data: blockRow,
      fieldPrefix: '',
      fields: matchedBlock.flattenedFields,
+      insideArrayOrBlock: true,
      locales: newRow.locales,
      numbers,
      parentTableName: blockTableName,
--- a/packages/drizzle/src/transform/write/traverseFields.ts
+++ b/packages/drizzle/src/transform/write/traverseFields.ts
@@ -42,6 +42,10 @@ type Args = {
  fieldPrefix: string
  fields: FlattenedField[]
  forcedLocale?: string
+  /**
+   * Tracks whether the current traversion context is from array or block.
+   */
+  insideArrayOrBlock?: boolean
  locales: {
    [locale: string]: Record<string, unknown>
  }
@@ -77,6 +81,7 @@ export const traverseFields = ({
  fieldPrefix,
  fields,
  forcedLocale,
+  insideArrayOrBlock = false,
  locales,
  numbers,
  parentTableName,
@@ -88,6 +93,10 @@ export const traverseFields = ({
  texts,
  withinArrayOrBlockLocale,
 }: Args) => {
+  if (row._uuid) {
+    data._uuid = row._uuid
+  }
+
  fields.forEach((field) => {
    let columnName = ''
    let fieldName = ''
@@ -226,6 +235,7 @@ export const traverseFields = ({
              fieldPrefix: `${fieldName}_`,
              fields: field.flattenedFields,
              forcedLocale: localeKey,
+              insideArrayOrBlock,
              locales,
              numbers,
              parentTableName,
@@ -254,6 +264,7 @@ export const traverseFields = ({
            existingLocales,
            fieldPrefix: `${fieldName}_`,
            fields: field.flattenedFields,
+            insideArrayOrBlock,
            locales,
            numbers,
            parentTableName,
@@ -416,7 +427,7 @@ export const traverseFields = ({
          Object.entries(data[field.name]).forEach(([localeKey, localeData]) => {
            if (Array.isArray(localeData)) {
              const newRows = transformSelects({
-                id: data._uuid || data.id,
+                id: insideArrayOrBlock ? data._uuid || data.id : undefined,
                data: localeData,
                locale: localeKey,
              })
@@ -427,7 +438,7 @@ export const traverseFields = ({
        }
      } else if (Array.isArray(data[field.name])) {
        const newRows = transformSelects({
-          id: data._uuid || data.id,
+          id: insideArrayOrBlock ? data._uuid || data.id : undefined,
          data: data[field.name],
          locale: withinArrayOrBlockLocale,
        })
@@ -468,8 +479,9 @@ export const traverseFields = ({
    }

    valuesToTransform.forEach(({ localeKey, ref, value }) => {
+      let formattedValue = value
+
      if (typeof value !== 'undefined') {
-        let formattedValue = value
        if (value && field.type === 'point' && adapter.name !== 'sqlite') {
          formattedValue = sql`ST_GeomFromGeoJSON(${JSON.stringify(value)})`
        }
@@ -479,12 +491,16 @@ export const traverseFields = ({
            formattedValue = new Date(value).toISOString()
          } else if (value instanceof Date) {
            formattedValue = value.toISOString()
-          } else if (fieldName === 'updatedAt') {
-            // let the db handle this
-            formattedValue = new Date().toISOString()
          }
        }
+      }

+      if (field.type === 'date' && fieldName === 'updatedAt') {
+        // let the db handle this
+        formattedValue = new Date().toISOString()
+      }
+
+      if (typeof formattedValue !== 'undefined') {
        if (localeKey) {
          ref[localeKey][fieldName] = formattedValue
        } else {
--- a/packages/drizzle/src/updateGlobal.ts
+++ b/packages/drizzle/src/updateGlobal.ts
@@ -17,7 +17,7 @@ export async function updateGlobal<T extends Record<string, unknown>>(

  const existingGlobal = await db.query[tableName].findFirst({})

-  const result = await upsertRow<T>({
+  const result = await upsertRow<{ globalType: string } & T>({
    ...(existingGlobal ? { id: existingGlobal.id, operation: 'update' } : { operation: 'create' }),
    adapter: this,
    data,
@@ -28,5 +28,7 @@ export async function updateGlobal<T extends Record<string, unknown>>(
    tableName,
  })

+  result.globalType = slug
+
  return result
 }
--- a/packages/drizzle/src/upsertRow/index.ts
+++ b/packages/drizzle/src/upsertRow/index.ts
@@ -20,7 +20,10 @@ export const upsertRow = async <T extends Record<string, unknown> | TypeWithID>(
  db,
  fields,
  ignoreResult,
-  joinQuery,
+  // TODO:
+  // When we support joins for write operations (create/update) - pass collectionSlug to the buildFindManyArgs
+  // Make a new argument in upsertRow.ts and pass the slug from every operation.
+  joinQuery: _joinQuery,
  operation,
  path = '',
  req,
@@ -263,6 +266,9 @@ export const upsertRow = async <T extends Record<string, unknown> | TypeWithID>(
      }
    }

+    // When versions are enabled, this is used to track mapping between blocks/arrays ObjectID to their numeric generated representation, then we use it for nested to arrays/blocks select hasMany in versions.
+    const arraysBlocksUUIDMap: Record<string, number | string> = {}
+
    for (const [blockName, blockRows] of Object.entries(blocksToInsert)) {
      const blockTableName = adapter.tableNameMap.get(`${tableName}_blocks_${blockName}`)
      insertedBlockRows[blockName] = await adapter.insert({
@@ -273,6 +279,12 @@ export const upsertRow = async <T extends Record<string, unknown> | TypeWithID>(

      insertedBlockRows[blockName].forEach((row, i) => {
        blockRows[i].row = row
+        if (
+          typeof row._uuid === 'string' &&
+          (typeof row.id === 'string' || typeof row.id === 'number')
+        ) {
+          arraysBlocksUUIDMap[row._uuid] = row.id
+        }
      })

      const blockLocaleIndexMap: number[] = []
@@ -305,6 +317,7 @@ export const upsertRow = async <T extends Record<string, unknown> | TypeWithID>(
        arrays: blockRows.map(({ arrays }) => arrays),
        db,
        parentRows: insertedBlockRows[blockName],
+        uuidMap: arraysBlocksUUIDMap,
      })
    }

@@ -328,6 +341,7 @@ export const upsertRow = async <T extends Record<string, unknown> | TypeWithID>(
      arrays: [rowToInsert.arrays],
      db,
      parentRows: [insertedRow],
+      uuidMap: arraysBlocksUUIDMap,
    })

    // //////////////////////////////////
@@ -344,6 +358,14 @@ export const upsertRow = async <T extends Record<string, unknown> | TypeWithID>(
        })
      }

+      if (Object.keys(arraysBlocksUUIDMap).length > 0) {
+        tableRows.forEach((row: any) => {
+          if (row.parent in arraysBlocksUUIDMap) {
+            row.parent = arraysBlocksUUIDMap[row.parent]
+          }
+        })
+      }
+
      if (tableRows.length) {
        await adapter.insert({
          db,
@@ -414,13 +436,11 @@ export const upsertRow = async <T extends Record<string, unknown> | TypeWithID>(
  // RETRIEVE NEWLY UPDATED ROW
  // //////////////////////////////////

-  joinQuery = operation === 'create' ? false : joinQuery
-
  const findManyArgs = buildFindManyArgs({
    adapter,
    depth: 0,
    fields,
-    joinQuery,
+    joinQuery: false,
    select,
    tableName,
  })
@@ -438,7 +458,7 @@ export const upsertRow = async <T extends Record<string, unknown> | TypeWithID>(
    config: adapter.payload.config,
    data: doc,
    fields,
-    joinQuery,
+    joinQuery: false,
  })

  return result
--- a/packages/drizzle/src/upsertRow/insertArrays.ts
+++ b/packages/drizzle/src/upsertRow/insertArrays.ts
@@ -8,6 +8,7 @@ type Args = {
  }[]
  db: DrizzleAdapter['drizzle'] | DrizzleTransaction
  parentRows: Record<string, unknown>[]
+  uuidMap?: Record<string, number | string>
 }

 type RowsByTable = {
@@ -20,7 +21,13 @@ type RowsByTable = {
  }
 }

-export const insertArrays = async ({ adapter, arrays, db, parentRows }: Args): Promise<void> => {
+export const insertArrays = async ({
+  adapter,
+  arrays,
+  db,
+  parentRows,
+  uuidMap = {},
+}: Args): Promise<void> => {
  // Maintain a map of flattened rows by table
  const rowsByTable: RowsByTable = {}

@@ -74,6 +81,15 @@ export const insertArrays = async ({ adapter, arrays, db, parentRows }: Args): P
        tableName,
        values: row.rows,
      })
+
+      insertedRows.forEach((row) => {
+        if (
+          typeof row._uuid === 'string' &&
+          (typeof row.id === 'string' || typeof row.id === 'number')
+        ) {
+          uuidMap[row._uuid] = row.id
+        }
+      })
    }

    // Insert locale rows
--- a/packages/email-nodemailer/package.json
+++ b/packages/email-nodemailer/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/email-nodemailer",
-  "version": "3.19.0",
+  "version": "3.22.0",
  "description": "Payload Nodemailer Email Adapter",
  "homepage": "https://payloadcms.com",
  "repository": {
--- a/packages/email-resend/package.json
+++ b/packages/email-resend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/email-resend",
-  "version": "3.19.0",
+  "version": "3.22.0",
  "description": "Payload Resend Email Adapter",
  "homepage": "https://payloadcms.com",
  "repository": {
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
@@ -37,7 +37,7 @@
    "eslint-plugin-jest-dom": "5.4.0",
    "eslint-plugin-jsx-a11y": "6.10.2",
    "eslint-plugin-perfectionist": "3.9.1",
-    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-a4b2d0d5-20250203",
    "eslint-plugin-regexp": "2.6.0",
    "globals": "15.12.0",
    "typescript": "5.7.3",
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -36,7 +36,7 @@
    "eslint-plugin-jest-dom": "5.4.0",
    "eslint-plugin-jsx-a11y": "6.10.2",
    "eslint-plugin-perfectionist": "3.9.1",
-    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-a4b2d0d5-20250203",
    "eslint-plugin-regexp": "2.6.0",
    "globals": "15.12.0",
    "typescript": "5.7.3",
--- a/packages/graphql/package.json
+++ b/packages/graphql/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/graphql",
-  "version": "3.19.0",
+  "version": "3.22.0",
  "homepage": "https://payloadcms.com",
  "repository": {
    "type": "git",
--- a/packages/live-preview-react/package.json
+++ b/packages/live-preview-react/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/live-preview-react",
-  "version": "3.19.0",
+  "version": "3.22.0",
  "description": "The official React SDK for Payload Live Preview",
  "homepage": "https://payloadcms.com",
  "repository": {
--- a/packages/live-preview-vue/package.json
+++ b/packages/live-preview-vue/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/live-preview-vue",
-  "version": "3.19.0",
+  "version": "3.22.0",
  "description": "The official Vue SDK for Payload Live Preview",
  "homepage": "https://payloadcms.com",
  "repository": {
--- a/packages/live-preview/package.json
+++ b/packages/live-preview/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/live-preview",
-  "version": "3.19.0",
+  "version": "3.22.0",
  "description": "The official live preview JavaScript SDK for Payload",
  "homepage": "https://payloadcms.com",
  "repository": {
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/next",
-  "version": "3.19.0",
+  "version": "3.22.0",
  "homepage": "https://payloadcms.com",
  "repository": {
    "type": "git",
@@ -87,22 +87,23 @@
    "@payloadcms/translations": "workspace:*",
    "@payloadcms/ui": "workspace:*",
    "busboy": "^1.6.0",
+    "dequal": "2.0.3",
    "file-type": "19.3.0",
    "graphql-http": "^1.22.0",
    "graphql-playground-html": "1.6.30",
    "http-status": "2.1.0",
    "path-to-regexp": "6.3.0",
    "qs-esm": "7.0.2",
-    "react-diff-viewer-continued": "3.2.6",
+    "react-diff-viewer-continued": "4.0.4",
    "sass": "1.77.4",
    "sonner": "^1.7.0",
    "uuid": "10.0.0"
  },
  "devDependencies": {
-    "@babel/cli": "7.25.9",
-    "@babel/core": "7.26.0",
-    "@babel/preset-env": "7.26.0",
-    "@babel/preset-react": "7.25.9",
+    "@babel/cli": "7.26.4",
+    "@babel/core": "7.26.7",
+    "@babel/preset-env": "7.26.7",
+    "@babel/preset-react": "7.26.3",
    "@babel/preset-typescript": "7.26.0",
    "@next/eslint-plugin-next": "15.1.5",
    "@payloadcms/eslint-config": "workspace:*",
@@ -110,12 +111,12 @@
    "@types/react": "19.0.1",
    "@types/react-dom": "19.0.1",
    "@types/uuid": "10.0.0",
-    "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
-    "esbuild": "0.24.0",
+    "babel-plugin-react-compiler": "19.0.0-beta-714736e-20250131",
+    "esbuild": "0.24.2",
    "esbuild-sass-plugin": "3.3.1",
-    "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
+    "eslint-plugin-react-compiler": "19.0.0-beta-714736e-20250131",
    "payload": "workspace:*",
-    "swc-plugin-transform-remove-imports": "2.0.0"
+    "swc-plugin-transform-remove-imports": "3.1.0"
  },
  "peerDependencies": {
    "graphql": "^16.8.1",
--- a/packages/next/src/layouts/Root/index.tsx
+++ b/packages/next/src/layouts/Root/index.tsx
@@ -91,6 +91,20 @@ export const RootLayout = async ({
    importMap,
  })

+  if (
+    clientConfig.localization &&
+    config.localization &&
+    typeof config.localization.filterAvailableLocales === 'function'
+  ) {
+    clientConfig.localization.locales = (
+      await config.localization.filterAvailableLocales({
+        locales: config.localization.locales,
+        req,
+      })
+    ).map(({ toString, ...rest }) => rest)
+    clientConfig.localization.localeCodes = config.localization.locales.map(({ code }) => code)
+  }
+
  const locale = await getRequestLocale({
    req,
  })
--- a/packages/next/src/views/ForgotPassword/ForgotPasswordForm/index.tsx
+++ b/packages/next/src/views/ForgotPassword/ForgotPasswordForm/index.tsx
@@ -91,6 +91,7 @@ export const ForgotPasswordForm: React.FC = () => {
            text(value, {
              name: 'username',
              type: 'text',
+              blockData: {},
              data: {},
              event: 'onChange',
              preferences: { fields: {} },
@@ -120,6 +121,7 @@ export const ForgotPasswordForm: React.FC = () => {
            email(value, {
              name: 'email',
              type: 'email',
+              blockData: {},
              data: {},
              event: 'onChange',
              preferences: { fields: {} },
--- a/packages/next/src/views/LivePreview/index.client.tsx
+++ b/packages/next/src/views/LivePreview/index.client.tsx
@@ -61,6 +61,14 @@ type Props = {
  readonly serverURL: string
 } & DocumentSlots

+const getAbsoluteUrl = (url) => {
+  try {
+    return new URL(url, window.location.origin).href
+  } catch {
+    return url
+  }
+}
+
 const PreviewView: React.FC<Props> = ({
  collectionConfig,
  config,
@@ -552,7 +560,7 @@ export const LivePreviewClient: React.FC<
    readonly url: string
  } & DocumentSlots
 > = (props) => {
-  const { breakpoints, url } = props
+  const { breakpoints, url: incomingUrl } = props
  const { collectionSlug, globalSlug } = useDocumentInfo()

  const {
@@ -564,6 +572,11 @@ export const LivePreviewClient: React.FC<
    getEntityConfig,
  } = useConfig()

+  const url =
+    incomingUrl.startsWith('http://') || incomingUrl.startsWith('https://')
+      ? incomingUrl
+      : getAbsoluteUrl(incomingUrl)
+
  const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({
    eventType: 'payload-live-preview',
    url,
--- a/packages/next/src/views/Version/Default/SelectedLocalesContext.tsx
+++ b/packages/next/src/views/Version/Default/SelectedLocalesContext.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import React, { createContext } from 'react'
+
+type SelectedLocalesContextType = {
+  selectedLocales: string[]
+}
+
+export const SelectedLocalesContext = createContext<SelectedLocalesContextType>({
+  selectedLocales: [],
+})
+
+export const useSelectedLocales = () => React.useContext(SelectedLocalesContext)
--- a/packages/next/src/views/Version/Default/index.scss
+++ b/packages/next/src/views/Version/Default/index.scss
@@ -46,6 +46,10 @@
      margin: 0 0 0 var(--base);
    }

+    &__modifiedCheckBox {
+      margin: 0 0 0 var(--base);
+    }
+
    @include mid-break {
      &__intro,
      &__header {
@@ -57,6 +61,7 @@
        gap: calc(var(--base) / 4);
      }

+
      &__restore {
        margin: calc(var(--base) * 0.5) 0 0 0;
      }
--- a/packages/next/src/views/Version/Default/index.tsx
+++ b/packages/next/src/views/Version/Default/index.tsx
@@ -1,33 +1,45 @@
 'use client'
 import type { OptionObject } from 'payload'

-import { Gutter, useConfig, useDocumentInfo, usePayloadAPI, useTranslation } from '@payloadcms/ui'
+import { CheckboxInput, Gutter, useConfig, useDocumentInfo, useTranslation } from '@payloadcms/ui'
 import { formatDate } from '@payloadcms/ui/shared'
-import React, { useState } from 'react'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation.js'
+import React, { useEffect, useMemo, useState } from 'react'

 import type { CompareOption, DefaultVersionsViewProps } from './types.js'

-import { diffComponents } from '../RenderFieldsToDiff/fields/index.js'
-import { RenderFieldsToDiff } from '../RenderFieldsToDiff/index.js'
 import Restore from '../Restore/index.js'
 import { SelectComparison } from '../SelectComparison/index.js'
-import { SelectLocales } from '../SelectLocales/index.js'
 import './index.scss'
+import { SelectLocales } from '../SelectLocales/index.js'
+import { SelectedLocalesContext } from './SelectedLocalesContext.js'
 import { SetStepNav } from './SetStepNav.js'

 const baseClass = 'view-version'

 export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
+  canUpdate,
  doc,
-  docPermissions,
-  initialComparisonDoc,
  latestDraftVersion,
  latestPublishedVersion,
-  localeOptions,
+  modifiedOnly: modifiedOnlyProp,
+  RenderedDiff,
+  selectedLocales: selectedLocalesProp,
  versionID,
 }) => {
  const { config, getEntityConfig } = useConfig()

+  const availableLocales = useMemo(
+    () =>
+      config.localization
+        ? config.localization.locales.map((locale) => ({
+            label: locale.label,
+            value: locale.code,
+          }))
+        : [],
+    [config.localization],
+  )
+
  const { i18n } = useTranslation()
  const { id, collectionSlug, globalSlug } = useDocumentInfo()

@@ -35,9 +47,43 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({

  const [globalConfig] = useState(() => getEntityConfig({ globalSlug }))

-  const [locales, setLocales] = useState<OptionObject[]>(localeOptions)
+  const [selectedLocales, setSelectedLocales] = useState<OptionObject[]>(selectedLocalesProp)

  const [compareValue, setCompareValue] = useState<CompareOption>()
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [modifiedOnly, setModifiedOnly] = useState(modifiedOnlyProp)
+  function onToggleModifiedOnly() {
+    setModifiedOnly(!modifiedOnly)
+  }
+
+  useEffect(() => {
+    // If the selected comparison doc or locales change, update URL params so that version page RSC
+    // can update the version comparison state
+    const current = new URLSearchParams(Array.from(searchParams.entries()))
+
+    if (!compareValue) {
+      current.delete('compareValue')
+    } else {
+      current.set('compareValue', compareValue?.value)
+    }
+    if (!selectedLocales) {
+      current.delete('localeCodes')
+    } else {
+      current.set('localeCodes', JSON.stringify(selectedLocales.map((locale) => locale.value)))
+    }
+
+    if (!modifiedOnly) {
+      current.delete('modifiedOnly')
+    } else {
+      current.set('modifiedOnly', 'true')
+    }
+
+    const search = current.toString()
+    const query = search ? `?${search}` : ''
+    router.push(`${pathname}${query}`)
+  }, [compareValue, pathname, router, searchParams, selectedLocales, modifiedOnly])

  const {
    admin: { dateFormat },
@@ -54,19 +100,6 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
    collectionSlug || globalSlug
  }/versions`

-  const compareFetchURL = compareValue?.value && `${compareBaseURL}/${compareValue.value}`
-
-  const [{ data: currentComparisonDoc }] = usePayloadAPI(compareFetchURL, {
-    initialData: initialComparisonDoc,
-    initialParams: { depth: 1, draft: 'true', locale: 'all' },
-  })
-
-  const comparison = compareValue?.value && currentComparisonDoc?.version // the `version` key is only present on `versions` documents
-
-  const canUpdate = docPermissions?.update
-
-  const localeValues = locales && locales.map((locale) => locale.value)
-
  const draftsEnabled = Boolean((collectionConfig || globalConfig)?.versions.drafts)

  return (
@@ -101,6 +134,14 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
                versionID={versionID}
              />
            )}
+            <span className={`${baseClass}__modifiedCheckBox`}>
+              <CheckboxInput
+                checked={modifiedOnly}
+                id={'modifiedOnly'}
+                label={i18n.t('version:modifiedOnly')}
+                onToggle={onToggleModifiedOnly}
+              />
+            </span>
          </header>
        </div>
        <div className={`${baseClass}__controls`}>
@@ -115,28 +156,18 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
            versionID={versionID}
          />
          {localization && (
-            <SelectLocales onChange={setLocales} options={localeOptions} value={locales} />
+            <SelectLocales
+              onChange={setSelectedLocales}
+              options={availableLocales}
+              value={selectedLocales}
+            />
          )}
        </div>
-        {doc?.version && (
-          <RenderFieldsToDiff
-            comparison={comparison}
-            diffComponents={diffComponents}
-            fieldPermissions={docPermissions?.fields}
-            fields={(collectionConfig || globalConfig)?.fields}
-            i18n={i18n}
-            locales={localeValues}
-            version={
-              globalConfig
-                ? {
-                    ...doc?.version,
-                    createdAt: doc?.version?.createdAt || doc.createdAt,
-                    updatedAt: doc?.version?.updatedAt || doc.updatedAt,
-                  }
-                : doc?.version
-            }
-          />
-        )}
+        <SelectedLocalesContext.Provider
+          value={{ selectedLocales: selectedLocales.map((locale) => locale.value) }}
+        >
+          {doc?.version && RenderedDiff}
+        </SelectedLocalesContext.Provider>
      </Gutter>
    </main>
  )
--- a/packages/next/src/views/Version/Default/types.ts
+++ b/packages/next/src/views/Version/Default/types.ts
@@ -1,9 +1,4 @@
-import type {
-  Document,
-  OptionObject,
-  SanitizedCollectionPermission,
-  SanitizedGlobalPermission,
-} from 'payload'
+import type { Document, OptionObject } from 'payload'

 export type CompareOption = {
  label: React.ReactNode | string
@@ -13,11 +8,12 @@ export type CompareOption = {
 }

 export type DefaultVersionsViewProps = {
+  readonly canUpdate: boolean
  readonly doc: Document
-  readonly docPermissions: SanitizedCollectionPermission | SanitizedGlobalPermission
-  readonly initialComparisonDoc: Document
  readonly latestDraftVersion?: string
  readonly latestPublishedVersion?: string
-  readonly localeOptions: OptionObject[]
+  modifiedOnly: boolean
+  readonly RenderedDiff: React.ReactNode
+  readonly selectedLocales: OptionObject[]
  readonly versionID?: string
 }
--- a/packages/next/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx
+++ b/packages/next/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx
@@ -0,0 +1,67 @@
+'use client'
+const baseClass = 'render-field-diffs'
+import type { VersionField } from 'payload'
+
+import './index.scss'
+
+import { ShimmerEffect } from '@payloadcms/ui'
+import React, { Fragment, useEffect } from 'react'
+
+export const RenderVersionFieldsToDiff = ({
+  versionFields,
+}: {
+  versionFields: VersionField[]
+}): React.ReactNode => {
+  const [hasMounted, setHasMounted] = React.useState(false)
+
+  // defer rendering until after the first mount as the CSS is loaded with Emotion
+  // this will ensure that the CSS is loaded before rendering the diffs and prevent CLS
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  return (
+    <div className={baseClass}>
+      {!hasMounted ? (
+        <Fragment>
+          <ShimmerEffect height="8rem" width="100%" />
+        </Fragment>
+      ) : (
+        versionFields?.map((field, fieldIndex) => {
+          if (field.fieldByLocale) {
+            const LocaleComponents: React.ReactNode[] = []
+            for (const [locale, baseField] of Object.entries(field.fieldByLocale)) {
+              LocaleComponents.push(
+                <div
+                  className={`${baseClass}__locale`}
+                  data-field-path={baseField.path}
+                  data-locale={locale}
+                  key={[locale, fieldIndex].join('-')}
+                >
+                  <div className={`${baseClass}__locale-value`}>{baseField.CustomComponent}</div>
+                </div>,
+              )
+            }
+            return (
+              <div className={`${baseClass}__field`} key={fieldIndex}>
+                {LocaleComponents}
+              </div>
+            )
+          } else if (field.field) {
+            return (
+              <div
+                className={`${baseClass}__field field__${field.field.type}`}
+                data-field-path={field.field.path}
+                key={fieldIndex}
+              >
+                {field.field.CustomComponent}
+              </div>
+            )
+          }
+
+          return null
+        })
+      )}
+    </div>
+  )
+}
--- a/Show More
+++ b/Show More