chore: enable postgres ci tests

* chore: rename the DB strings in buildconfigwithdefaults to DATABASE_URI

* reverse name change for postgres strings

.eslintignore

@@ -8,3 +8,6 @@
 **/dist/**
 **/node_modules
 **/temp
+playwright.config.ts
+jest.config.js
+test/live-preview/next-app

.eslintrc.cjs

@@ -0,0 +1,64 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ['@payloadcms'],
+  ignorePatterns: ['README.md', 'packages/**/*.spec.ts'],
+  overrides: [
+    {
+      files: ['packages/**'],
+      plugins: ['payload'],
+      rules: {
+        'payload/no-jsx-import-statements': 'warn',
+      },
+    },
+    {
+      files: ['scripts/**'],
+      rules: {
+        '@typescript-eslint/no-unused-vars': 'off',
+        'no-console': 'off',
+        'perfectionist/sort-object-types': 'off',
+        'perfectionist/sort-objects': 'off',
+      },
+    },
+    {
+      extends: ['plugin:@typescript-eslint/disable-type-checked'],
+      files: ['*.js', '*.cjs', '*.json', '*.md', '*.yml', '*.yaml'],
+    },
+    {
+      files: ['packages/eslint-config-payload/**'],
+      rules: {
+        'perfectionist/sort-objects': 'off',
+      },
+    },
+    {
+      files: ['package.json', 'tsconfig.json'],
+      rules: {
+        'perfectionist/sort-array-includes': 'off',
+        'perfectionist/sort-astro-attributes': 'off',
+        'perfectionist/sort-classes': 'off',
+        'perfectionist/sort-enums': 'off',
+        'perfectionist/sort-exports': 'off',
+        'perfectionist/sort-imports': 'off',
+        'perfectionist/sort-interfaces': 'off',
+        'perfectionist/sort-jsx-props': 'off',
+        'perfectionist/sort-keys': 'off',
+        'perfectionist/sort-maps': 'off',
+        'perfectionist/sort-named-exports': 'off',
+        'perfectionist/sort-named-imports': 'off',
+        'perfectionist/sort-object-types': 'off',
+        'perfectionist/sort-objects': 'off',
+        'perfectionist/sort-svelte-attributes': 'off',
+        'perfectionist/sort-union-types': 'off',
+        'perfectionist/sort-vue-attributes': 'off',
+      },
+    },
+  ],
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+    EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
+    EXPERIMENTAL_useProjectService: true,
+    sourceType: 'module',
+    ecmaVersion: 'latest',
+  },
+  root: true,
+}

.eslintrc.js

@@ -1,38 +0,0 @@
-module.exports = {
-  extends: ['@payloadcms'],
-  overrides: [
-    {
-      extends: ['plugin:@typescript-eslint/disable-type-checked'],
-      files: ['*.js', '*.cjs', '*.json', '*.md', '*.yml', '*.yaml'],
-    },
-    {
-      files: ['packages/eslint-config-payload/**'],
-      rules: {
-        'perfectionist/sort-objects': 'off',
-      },
-    },
-    {
-      files: ['package.json', 'tsconfig.json'],
-      rules: {
-        'perfectionist/sort-array-includes': 'off',
-        'perfectionist/sort-astro-attributes': 'off',
-        'perfectionist/sort-classes': 'off',
-        'perfectionist/sort-enums': 'off',
-        'perfectionist/sort-exports': 'off',
-        'perfectionist/sort-imports': 'off',
-        'perfectionist/sort-interfaces': 'off',
-        'perfectionist/sort-jsx-props': 'off',
-        'perfectionist/sort-keys': 'off',
-        'perfectionist/sort-maps': 'off',
-        'perfectionist/sort-named-exports': 'off',
-        'perfectionist/sort-named-imports': 'off',
-        'perfectionist/sort-object-types': 'off',
-        'perfectionist/sort-objects': 'off',
-        'perfectionist/sort-svelte-attributes': 'off',
-        'perfectionist/sort-union-types': 'off',
-        'perfectionist/sort-vue-attributes': 'off',
-      },
-    },
-  ],
-  root: true,
-}

.git-blame-ignore-revs

@@ -16,3 +16,6 @@ fb7d1be2f3325d076b7c967b1730afcef37922c2
 
 # lint and format create-payload-app
 5fd3d430001efe86515262ded5e26f00c1451181
+
+# 3.0 prettier & lint everywhere
+6789e61488a1d3de56f472ac3214faf344030005

.github/CODEOWNERS

@@ -1,32 +1,41 @@
 # Order matters. The last matching pattern takes precedence.
 
 ### Core ###
+/packages/payload/src/uploads/ @denolfe
+/packages/payload/src/admin/ @jmikrut @jacobsfletch @JarrodMFlesch
 
 ### Adapters ###
-/packages/richtext-*/ @AlessioGr
+/packages/db-*/ @denolfe @jmikrut @DanRibbens
+/packages/richtext-*/ @denolfe @jmikrut @DanRibbens @AlessioGr
 
 ### Plugins ###
+/packages/plugin-*/ @denolfe @jmikrut @DanRibbens
 /packages/plugin-cloud*/ @denolfe
+/packages/plugin-form-builder/ @jacobsfletch
+/packages/plugin-live-preview*/ @jacobsfletch
+/packages/plugin-nested-docs/ @jacobsfletch
+/packages/plugin-redirects/ @jacobsfletch
+/packages/plugin-search/ @jacobsfletch
+/packages/plugin-sentry/ @JessChowdhury
+/packages/plugin-seo/ @jacobsfletch
+/packages/plugin-stripe/ @jacobsfletch
+
+### Examples ###
+/examples/ @jacobsfletch
+/examples/testing/ @JarrodMFlesch
+/examples/email/ @JessChowdhury
+/examples/whitelabel/ @JessChowdhury
 
 ### Templates ###
 /templates/ @jacobsfletch @denolfe
 
 ### Misc ###
 /packages/create-payload-app/ @denolfe
-/packages/eslint-*/ @denolfe
-
-### Build Files ###
-/**/package.json @denolfe
-
-/tsconfig.json @denolfe
-/**/tsconfig*.json @denolfe
-
-/jest.config.js @denolfe
-/**/jest.config.js @denolfe
+/packages/eslint-config-payload/ @denolfe
+/packages/payload-admin-bar/ @jacobsfletch
 
 ### Root ###
 /package.json @denolfe
 /scripts/ @denolfe
-/.husky/ @denolfe
-/.vscode/ @denolfe
 /.github/ @denolfe
+/.github/CODEOWNERS @denolfe

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -0,0 +1,47 @@
+name: Bug Report
+description: Create a bug report for Payload
+labels: ['[possible-bug]']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        *Note:* Feature requests should be opened as [discussions](https://github.com/payloadcms/payload/discussions/new?category=feature-requests-ideas).
+  - type: input
+    id: reproduction-link
+    attributes:
+      label: Link to reproduction
+      description: Want us to look into your issue faster? Follow the [reproduction-guide](https://github.com/payloadcms/payload/blob/main/.github/reproduction-guide.md) for more information.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Describe the Bug
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: To Reproduce
+      description: Steps to reproduce the behavior, please provide a clear description of how to reproduce the issue, based on the linked minimal reproduction. Screenshots can be provided in the issue body below. If using code blocks, make sure that [syntax highlighting is correct](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting) and double check that the rendered preview is not broken.
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: Payload Version
+      description: What version of Payload are you running?
+    validations:
+      required: true
+  - type: input
+    id: adapters-plugins
+    attributes:
+      label: Adapters and Plugins
+      description: What adapters and plugins are you using? ie. db-mongodb, db-postgres, bundler-webpack, etc.
+  - type: markdown
+    attributes:
+      value: Before submitting the issue, go through the steps you've written down to make sure the steps provided are detailed and clear.
+  - type: markdown
+    attributes:
+      value: Contributors should be able to follow the steps provided in order to reproduce the bug.
+  - type: markdown
+    attributes:
+      value: These steps are used to add integration tests to ensure the same issue does not happen again. Thanks in advance!

.github/ISSUE_TEMPLATE/1.bug_report_v3.yml

@@ -1,52 +0,0 @@
-name: Bug Report v3
-description: Create a bug report for Payload v3 (beta)
-labels: ['status: needs-triage', 'v3']
-body:
-  - type: input
-    id: reproduction-link
-    attributes:
-      label: Link to reproduction
-      description: Want us to look into your issue faster? Follow the [reproduction-guide](https://github.com/payloadcms/payload/blob/main/.github/reproduction-guide.md) for more information.
-    validations:
-      required: false
-
-  - type: textarea
-    attributes:
-      label: Environment Info
-      description: Paste output from `pnpm payload info` (>= beta.92) _or_ Payload, Node.js, and Next.js versions.
-      render: text
-      placeholder: |
-        Payload:
-        Node.js:
-        Next.js:
-    validations:
-      required: true
-
-  - type: textarea
-    attributes:
-      label: Describe the Bug
-    validations:
-      required: true
-
-  - type: textarea
-    attributes:
-      label: Reproduction Steps
-      description: Steps to reproduce the behavior, please provide a clear description of how to reproduce the issue, based on the linked minimal reproduction. Screenshots can be provided in the issue body below. If using code blocks, make sure that [syntax highlighting is correct](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting) and double check that the rendered preview is not broken.
-    validations:
-      required: true
-
-  - type: input
-    id: adapters-plugins
-    attributes:
-      label: Adapters and Plugins
-      description: What adapters and plugins are you using if relevant? ie. db-mongodb, db-postgres, storage-vercel-blob, etc.
-
-  - type: markdown
-    attributes:
-      value: Before submitting the issue, go through the steps you've written down to make sure the steps provided are detailed and clear.
-  - type: markdown
-    attributes:
-      value: Contributors should be able to follow the steps provided in order to reproduce the bug.
-  - type: markdown
-    attributes:
-      value: These steps are used to add integration tests to ensure the same issue does not happen again. Thanks in advance!

.github/ISSUE_TEMPLATE/2.bug_report.yml

@@ -1,47 +0,0 @@
-name: Bug Report
-description: Create a bug report for Payload
-labels: ['status: needs-triage', 'v2']
-body:
-  - type: markdown
-    attributes:
-      value: |
-        *Note:* Feature requests should be opened as [discussions](https://github.com/payloadcms/payload/discussions/new?category=feature-requests-ideas).
-  - type: input
-    id: reproduction-link
-    attributes:
-      label: Link to reproduction
-      description: Want us to look into your issue faster? Follow the [reproduction-guide](https://github.com/payloadcms/payload/blob/main/.github/reproduction-guide.md) for more information.
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: Describe the Bug
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: To Reproduce
-      description: Steps to reproduce the behavior, please provide a clear description of how to reproduce the issue, based on the linked minimal reproduction. Screenshots can be provided in the issue body below. If using code blocks, make sure that [syntax highlighting is correct](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting) and double check that the rendered preview is not broken.
-    validations:
-      required: true
-  - type: input
-    id: version
-    attributes:
-      label: Payload Version
-      description: What version of Payload are you running?
-    validations:
-      required: true
-  - type: input
-    id: adapters-plugins
-    attributes:
-      label: Adapters and Plugins
-      description: What adapters and plugins are you using? ie. db-mongodb, db-postgres, bundler-webpack, etc.
-  - type: markdown
-    attributes:
-      value: Before submitting the issue, go through the steps you've written down to make sure the steps provided are detailed and clear.
-  - type: markdown
-    attributes:
-      value: Contributors should be able to follow the steps provided in order to reproduce the bug.
-  - type: markdown
-    attributes:
-      value: These steps are used to add integration tests to ensure the same issue does not happen again. Thanks in advance!

.github/dependabot.yml

@@ -1,47 +0,0 @@
-# docs: https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-  - package-ecosystem: github-actions
-    directories:
-      - /
-      - /.github/workflows
-      - /.github/actions/* # Not working until resolved: https://github.com/dependabot/dependabot-core/issues/6345
-      - /.github/actions/setup
-    target-branch: beta
-    schedule:
-      interval: monthly
-      timezone: America/Detroit
-      time: '06:00'
-    groups:
-      github_actions:
-        patterns:
-          - '*'
-
-  - package-ecosystem: npm
-    directory: /
-    target-branch: beta
-    schedule:
-      interval: weekly
-      day: sunday
-      timezone: America/Detroit
-      time: '06:00'
-    commit-message:
-      prefix: 'chore(deps)'
-    labels:
-      - dependencies
-    groups:
-      production:
-        dependency-type: production
-        update-types:
-          - minor
-          - patch
-        patterns:
-          - '*'
-      dev:
-        dependency-type: development
-        update-types:
-          - minor
-          - patch
-        patterns:
-          - '*'

.github/workflows/label-author.yml

@@ -1,80 +0,0 @@
-name: label-author
-
-on:
-  pull_request:
-    types: [opened]
-  issues:
-    types: [opened]
-
-permissions:
-  contents: read
-  pull-requests: write
-  issues: write
-
-jobs:
-  debug-context:
-    runs-on: ubuntu-latest
-    steps:
-      - name: View context attributes
-        uses: actions/github-script@v7
-        with:
-          script: console.log(context)
-
-  label-created-by:
-    name: Label pr/issue on opening
-    runs-on: ubuntu-latest
-    steps:
-      - name: Tag with 'created-by'
-        uses: actions/github-script@v7
-        if: github.event.action == 'opened'
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const payloadTeamUsernames = [
-              'denolfe',
-              'jmikrut',
-              'DanRibbens',
-              'jacobsfletch',
-              'JarrodMFlesch',
-              'AlessioGr',
-              'JessChowdhury',
-              'kendelljoseph',
-              'PatrikKozak',
-              'tylandavis',
-              'paulpopus',
-            ];
-
-            const type = context.payload.pull_request ? 'pull_request' : 'issue';
-
-            const isTeamMember = payloadTeamUsernames
-              .map(n => n.toLowerCase())
-              .includes(context.payload[type].user.login.toLowerCase());
-
-            if (isTeamMember) {
-              github.rest.issues.addLabels({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                labels: ['created-by: Payload team'],
-              });
-              console.log(`Added 'created-by: Payload team' label`);
-              return;
-            }
-
-            const association = context.payload[type].author_association;
-            let label = ''
-            if (association === 'MEMBER' || association === 'OWNER') {
-              label = 'created-by: Payload team';
-            } else if (association === 'CONTRIBUTOR') {
-              label = 'created-by: Contributor';
-            }
-
-            if (!label) return;
-
-            github.rest.issues.addLabels({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              labels: [label],
-            });
-            console.log(`Added '${label}' label.`);

.github/workflows/label-on-change.yml

@@ -1,116 +0,0 @@
-name: label-on-change
-
-on:
-  # https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target
-  issues:
-    types:
-      - assigned
-      - closed
-      - labeled
-      - reopened
-
-  # TODO: Handle labeling on comment
-
-jobs:
-  on-labeled-ensure-one-status:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-    # Only run on issue labeled and if label starts with 'status:'
-    if: github.event.action == 'labeled' && startsWith(github.event.label.name, 'status:')
-    steps:
-      - name: Ensure only one status label
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            // Get all labels that start with 'status:' and are not the incoming label
-            const incomingLabelName = context.payload.label.name;
-            const labelNamesToRemove = context.payload.issue.labels
-              .filter(label => label.name.startsWith('status:') && label.name !== incomingLabelName)
-              .map(label => label.name);
-
-            if (!labelNamesToRemove.length) {
-              console.log('No labels to remove');
-              return;
-            }
-
-            console.log(`Labels to remove: '${labelNamesToRemove}'`);
-
-            // If there is more than one status label, remove all but the incoming label
-            for (const labelName of labelNamesToRemove) {
-              await github.rest.issues.removeLabel({
-                issue_number: context.issue.number,
-                name: labelName,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-              });
-              console.log(`Removed '${labelName}' label`);
-            }
-
-  on-issue-close:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-    if: github.event.action == 'closed'
-    steps:
-      - name: Remove all labels on issue close
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            // Get all labels that start with 'status:' and 'stale'
-            const labelNamesToRemove = context.payload.issue.labels
-              .filter(label => label.name.startsWith('status:') || label.name === 'stale')
-              .map(label => label.name);
-
-            if (!labelNamesToRemove.length) {
-              console.log('No labels to remove');
-              return;
-            }
-
-            console.log(`Labels to remove: '${labelNamesToRemove}'`);
-
-            for (const labelName of labelNamesToRemove) {
-              await github.rest.issues.removeLabel({
-                issue_number: context.issue.number,
-                name: labelName,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-              });
-              console.log(`Removed '${labelName}' label`);
-            }
-
-  on-issue-reopen:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-    if: github.event.action == 'reopened'
-    steps:
-      - name: Add needs-triage label on issue reopen
-        uses: actions-ecosystem/action-add-labels@v1
-        with:
-          labels: 'status: needs-triage'
-
-  on-issue-assigned:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-    if: >
-      github.event.action == 'assigned' &&
-      contains(github.event.issue.labels.*.name, 'status: needs-triage')
-    steps:
-      - name: Remove needs-triage label on issue assign
-        uses: actions-ecosystem/action-remove-labels@v1
-        with:
-          labels: 'status: needs-triage'
-
-  # on-pr-merge:
-  #   runs-on: ubuntu-latest
-  #   if: github.event.pull_request.merged == true
-  #   steps:
-
-  # on-pr-close:
-  #   runs-on: ubuntu-latest
-  #   if: github.event_name == 'pull_request_target' && github.event.pull_request.merged == false
-  #   steps:

.github/workflows/main.yml

@@ -2,9 +2,9 @@ name: build
 
 on:
   pull_request:
-    types: [ opened, reopened, synchronize ]
+    types: [opened, reopened, synchronize]
   push:
-    branches: [ 'main' ]
+    branches: ['main', 'alpha']
 
 jobs:
   changes:
@@ -15,14 +15,10 @@ jobs:
       needs_build: ${{ steps.filter.outputs.needs_build }}
       templates: ${{ steps.filter.outputs.templates }}
     steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
       - uses: actions/checkout@v4
         with:
           fetch-depth: 25
-      - uses: dorny/paths-filter@v2
+      - uses: dorny/paths-filter@v3
         id: filter
         with:
           filters: |
@@ -49,19 +45,15 @@ jobs:
         with:
           fetch-depth: 25
 
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Use Node.js 20
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 18
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9.7.0
+          version: 8
           run_install: false
 
       - name: Get pnpm store directory
@@ -79,7 +71,7 @@ jobs:
             ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
 
       - run: pnpm install
-      - run: pnpm run build
+      - run: pnpm run build:core
 
       - name: Cache build
         uses: actions/cache@v4
@@ -87,13 +79,56 @@ jobs:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
 
+  plugins-build:
+    needs: changes
+    if: ${{ needs.changes.outputs.needs_build == 'true' }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 25
+
+      - name: Use Node.js 18
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+            ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - run: pnpm install
+      - run: pnpm run build:plugins
+
   tests:
     runs-on: ubuntu-latest
     needs: core-build
     strategy:
       fail-fast: false
       matrix:
-        database: [mongoose, postgres, postgres-custom-schema, postgres-uuid, supabase]
+        database:
+          - mongodb
+          - postgres
+          - postgres-custom-schema
+          - postgres-uuid
+          - supabase
     env:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: postgres
@@ -104,19 +139,15 @@ jobs:
       AWS_REGION: us-east-1
 
     steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Use Node.js 20
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 18
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9.7.0
+          version: 8
           run_install: false
 
       - name: Restore build
@@ -131,7 +162,7 @@ jobs:
       - name: Start PostgreSQL
         uses: CasperWA/postgresql-action@v1.2
         with:
-          postgresql version: '14'  # See https://hub.docker.com/_/postgres for available versions
+          postgresql version: '14' # See https://hub.docker.com/_/postgres for available versions
           postgresql db: ${{ env.POSTGRES_DB }}
           postgresql user: ${{ env.POSTGRES_USER }}
           postgresql password: ${{ env.POSTGRES_PASSWORD }}
@@ -170,11 +201,8 @@ jobs:
           echo "POSTGRES_URL=postgresql://postgres:postgres@127.0.0.1:54322/postgres" >> $GITHUB_ENV
         if: matrix.database == 'supabase'
 
-      - name: Component Tests
-        run: pnpm test:components
-
       - name: Integration Tests
-        run: pnpm test:int
+        run: pnpm test:int --testPathIgnorePatterns=test/fields # Ignore fields tests until reworked
         env:
           NODE_OPTIONS: --max-old-space-size=8096
           PAYLOAD_DATABASE: ${{ matrix.database }}
@@ -186,22 +214,34 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        part: [ 1/8, 2/8, 3/8, 4/8, 5/8, 6/8, 7/8, 8/8 ]
+        # find test -type f -name 'e2e.spec.ts' | sort | xargs dirname | xargs -I {} basename {}
+        suite:
+          - _community
+          - access-control
+          # - admin
+          - auth
+          # - field-error-states
+          # - fields-relationship
+          # - fields
+          - fields/lexical
+          - live-preview
+          # - localization
+          # - plugin-nested-docs
+          # - plugin-seo
+          # - refresh-permissions
+          # - uploads
+          # - versions
 
     steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Use Node.js 20
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 18
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9.7.0
+          version: 8
           run_install: false
 
       - name: Restore build
@@ -210,39 +250,39 @@ jobs:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
 
+      - name: Install Playwright
+        run: pnpm exec playwright install
+
       - name: E2E Tests
-        uses: nick-fields/retry@v2
+        uses: nick-fields/retry@v3
         with:
           retry_on: error
           max_attempts: 2
           timeout_minutes: 15
-          command: pnpm test:e2e --part ${{ matrix.part }} --bail
+          command: pnpm test:e2e ${{ matrix.suite }}
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: test-results
-          path: test-results/
+          path: test/test-results/
           retention-days: 1
 
   tests-type-generation:
+    if: false # This should be replaced with gen on a real Payload project
     runs-on: ubuntu-latest
     needs: core-build
 
     steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Use Node.js 20
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 18
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9.7.0
+          version: 8
           run_install: false
 
       - name: Restore build
@@ -257,47 +297,6 @@ jobs:
       - name: Generate GraphQL schema file
         run: pnpm dev:generate-graphql-schema graphql-schema-gen
 
-  build-packages:
-    runs-on: ubuntu-latest
-    needs: core-build
-    strategy:
-      fail-fast: false
-      matrix:
-        pkg:
-          - db-mongodb
-          - db-postgres
-          - bundler-webpack
-          - bundler-vite
-          - richtext-slate
-          - richtext-lexical
-          - live-preview
-          - live-preview-react
-
-    steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Use Node.js 20
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 9.7.0
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Build ${{ matrix.pkg }}
-        run: pnpm turbo run build --filter=${{ matrix.pkg }}
-
   plugins:
     runs-on: ubuntu-latest
     needs: core-build
@@ -315,19 +314,15 @@ jobs:
           - plugin-seo
 
     steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Use Node.js 20
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 18
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 9.7.0
+          version: 8
           run_install: false
 
       - name: Restore build
@@ -341,30 +336,25 @@ jobs:
 
       - name: Test ${{ matrix.pkg }}
         run: pnpm --filter ${{ matrix.pkg }} run test
-        if: matrix.pkg != 'create-payload-app' # degit doesn't work within GitHub Actions
 
   templates:
     needs: changes
-    if: ${{ needs.changes.outputs.templates == 'true' }}
+    if: false # Disable until templates are updated for 3.0
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
       matrix:
-        template: [ blank, website, ecommerce ]
+        template: [blank, website, ecommerce]
 
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 25
 
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Use Node.js 20
+      - name: Use Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 18
 
       - name: Start MongoDB
         uses: supercharge/mongodb-github-action@1.10.0

.github/workflows/release-canary.yml

@@ -1,11 +0,0 @@
-name: release-canary
-
-on:
-  workflow_dispatch:
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Echo
-        run: echo "Register release-canary workflow"

.github/workflows/stale.yml

@@ -1,42 +0,0 @@
-name: stale
-
-on:
-  workflow_dispatch:
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-      pull-requests: write
-    steps:
-      - uses: actions/stale@v9
-        id: stale
-        with:
-          debug-only: true
-          days-before-stale: 90
-          days-before-close: 7
-          ascending: true
-          operations-per-run: 300
-
-          # Ignore all assigned
-          exempt-all-assignees: false
-
-          # Issues
-          stale-issue-label: 'stale'
-          exempt-issue-labels: 'blocked,must,should,keep,created-by: Payload team,created-by: Contributor'
-          stale-issue-message: >
-            This issue has been marked as stale due to lack of activity. To keep the ticket open, please indicate that it is still relevant in a comment below.
-          close-issue-message: >
-            This issue was automatically closed due to lack of activity.
-
-          # Pull Requests
-          stale-pr-label: 'stale'
-          exempt-pr-labels: 'blocked,must,should,keep,created-by: Payload team,created-by: Contributor'
-          stale-pr-message: >
-            This PR is stale due to lack of activity. To keep the PR open, please indicate that it is still relevant in a comment below.
-          close-pr-message: >
-            This pull request was automatically closed due to lack of activity.
-
-      - name: Print outputs
-        run: echo ${{ format('{0},{1}', toJSON(steps.stale.outputs.staled-issues-prs), toJSON(steps.stale.outputs.closed-issues-prs)) }}

.gitignore

@@ -9,6 +9,13 @@ test-results
 .localstack
 /migrations
 .localstack
+.turbo
+
+.turbo
+
+# Ignore test directory media folder/files
+/media
+/versions
 
 # Created by https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 # Edit at https://www.toptal.com/developers/gitignore?templates=node,macos,windows,webstorm,sublimetext,visualstudiocode
@@ -281,3 +288,4 @@ $RECYCLE.BIN/
 # End of https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 
 /build
+.swc

.idea/runConfigurations/Run_Dev_Fields.xml

@@ -1,5 +1,8 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Run Dev Fields" type="NodeJSConfigurationType" application-parameters="fields" path-to-js-file="node_modules/.pnpm/nodemon@3.0.3/node_modules/nodemon/bin/nodemon.js" working-dir="$PROJECT_DIR$">
+  <configuration default="false" name="Run Dev Fields" type="NodeJSConfigurationType" application-parameters="--no-deprecation fields" path-to-js-file="test/dev.js" working-dir="$PROJECT_DIR$">
+    <envs>
+      <env name="NODE_OPTIONS" value="--no-deprecation" />
+    </envs>
     <method v="2" />
   </configuration>
 </component>

.idea/runConfigurations/Run_Dev__community.xml

@@ -1,5 +1,8 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Run Dev _community" type="NodeJSConfigurationType" application-parameters="_community" path-to-js-file="node_modules/.pnpm/nodemon@3.0.3/node_modules/nodemon/bin/nodemon.js" working-dir="$PROJECT_DIR$">
+  <configuration default="false" name="Run Dev _community" type="NodeJSConfigurationType" application-parameters="--no-deprecation _community" path-to-js-file="test/dev.js" working-dir="$PROJECT_DIR$">
+    <envs>
+      <env name="NODE_OPTIONS" value="--no-deprecation" />
+    </envs>
     <method v="2" />
   </configuration>
 </component>

.node-version

@@ -1 +1 @@
-v18.17.1
+v18.19.1

.nvmrc

@@ -1 +1 @@
-v18.17.1
+v18.19.1

.prettierignore

@@ -9,3 +9,4 @@
 **/node_modules
 **/temp
 **/docs/**
+tsconfig.json

.release-it.pre.js

@@ -1,16 +0,0 @@
-module.exports = {
-  verbose: true,
-  git: {
-    requireCleanWorkingDir: false,
-    commit: false,
-    push: false,
-    tag: false,
-  },
-  npm: {
-    skipChecks: true,
-    tag: 'beta',
-  },
-  hooks: {
-    'before:init': ['pnpm install', 'pnpm clean', 'pnpm build'],
-  },
-}

.swcrc

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": "inline",
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    }
+  },
+  "module": {
+    "type": "es6"
+  }
+}

.vscode/extensions.json

@@ -1,3 +1,8 @@
 {
-  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "firsttris.vscode-jest-runner",
+    "ms-playwright.playwright"
+  ]
 }

.vscode/launch.json

@@ -3,12 +3,26 @@
   // Hover to view descriptions of existing attributes.
   "configurations": [
     {
-      "command": "pnpm run dev _community",
+      "command": "pnpm generate:types",
+      "name": "Generate Types CLI",
+      "request": "launch",
+      "type": "node-terminal",
+      "cwd": "${workspaceFolder}"
+    },
+    {
+      "command": "node --no-deprecation test/dev.js fields",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Community",
       "request": "launch",
       "type": "node-terminal"
     },
+    {
+      "command": "pnpm run dev live-preview -- --no-turbo",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev Live Preview",
+      "request": "launch",
+      "type": "node-terminal"
+    },
     {
       "command": "pnpm run dev plugin-cloud-storage",
       "cwd": "${workspaceFolder}",
@@ -19,13 +33,6 @@
         "PAYLOAD_PUBLIC_CLOUD_STORAGE_ADAPTER": "s3"
       }
     },
-    {
-      "command": "pnpm run dev collections-graphql",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev GraphQL",
-      "request": "launch",
-      "type": "node-terminal"
-    },
     {
       "command": "pnpm run dev fields",
       "cwd": "${workspaceFolder}",
@@ -34,7 +41,7 @@
       "type": "node-terminal"
     },
     {
-      "command": "pnpm run dev:postgres fields",
+      "command": "pnpm run dev:postgres versions",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Postgres",
       "request": "launch",
@@ -54,13 +61,6 @@
       "request": "launch",
       "type": "node-terminal"
     },
-    {
-      "command": "pnpm run dev field-error-states",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Field Error States",
-      "request": "launch",
-      "type": "node-terminal"
-    },
     {
       "command": "pnpm run dev uploads",
       "cwd": "${workspaceFolder}",
@@ -116,17 +116,6 @@
       "request": "launch",
       "type": "node-terminal"
     },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts generate:types",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/_community/config.ts",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-      },
-      "name": "Generate Types CLI",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
     {
       "command": "ts-node ./packages/payload/src/bin/index.ts migrate:status",
       "env": {

.vscode/settings.json

@@ -36,8 +36,9 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   // Load .git-blame-ignore-revs file
   "gitlens.advanced.blame.customArguments": ["--ignore-revs-file", ".git-blame-ignore-revs"],
-  "jestrunner.jestCommand": "pnpm exec cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-deprecation\" node 'node_modules/jest/bin/jest.js'",
-  "jestrunner.debugOptions": {
-    "runtimeArgs": ["--experimental-vm-modules", "--no-deprecation"]
+  "[javascript][typescript][typescriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
   }
 }

CHANGELOG.md

@@ -1,453 +1,3 @@
-## [2.28.0](https://github.com/payloadcms/payload/compare/v2.27.0...v2.28.0) (2024-09-04)
-
-
-### Features
-
-* collections can use custom database operations ([#7675](https://github.com/payloadcms/payload/issues/7675)) ([6ba293c](https://github.com/payloadcms/payload/commit/6ba293c0f84f91bf89cf089a20e47de130013ebb))
-
-
-### Bug Fixes
-
-* **db-postgres:** migration exit codes ([#7873](https://github.com/payloadcms/payload/issues/7873)) ([25e9bc6](https://github.com/payloadcms/payload/commit/25e9bc62dbcbabcb3619cf83e3dc0110e0a4cabf)), closes [#7031](https://github.com/payloadcms/payload/issues/7031)
-* **db-postgres:** query hasMany text/number in array/blocks ([#8033](https://github.com/payloadcms/payload/issues/8033)) ([96a624a](https://github.com/payloadcms/payload/commit/96a624ad5c5259b197b4ca793d8419d1e827de9c))
-* **plugin-cloud:** better logging on static handler ([#7924](https://github.com/payloadcms/payload/issues/7924)) ([1f09348](https://github.com/payloadcms/payload/commit/1f0934877ce5aabb771c936c3677a26d2ef006ec))
-
-## [2.27.0](https://github.com/payloadcms/payload/compare/v2.26.0...v2.27.0) (2024-08-26)
-
-
-### Features
-
-* add support for custom image size file names ([#7637](https://github.com/payloadcms/payload/issues/7637)) ([f976270](https://github.com/payloadcms/payload/commit/f97627092cabe4eabbebefa75afc53579188386b))
-* upgrade react-toastify dependency, and upgrade to pnpm v9 in our monorepo ([#7667](https://github.com/payloadcms/payload/issues/7667)) ([94d18e8](https://github.com/payloadcms/payload/commit/94d18e8d747588efce225cde0b621db9b513e7c1))
-
-
-### Bug Fixes
-
-* update state of field if either `valid` status or `errorMessage` changes ([#7632](https://github.com/payloadcms/payload/issues/7632)) ([c624eea](https://github.com/payloadcms/payload/commit/c624eea0d868938f4603860fa25be3df580ba7fe)), closes [#6413](https://github.com/payloadcms/payload/issues/6413)
-
-## [2.26.0](https://github.com/payloadcms/payload/compare/v2.25.0...v2.26.0) (2024-08-09)
-
-
-### Features
-
-* adds classnames to edit, list views ([#7595](https://github.com/payloadcms/payload/issues/7595)) ([7f39afa](https://github.com/payloadcms/payload/commit/7f39afa1928b118451138e811ea71a04fce021d5))
-* adds upload's relationship thumbnail ([#5015](https://github.com/payloadcms/payload/issues/5015)) ([39e110e](https://github.com/payloadcms/payload/commit/39e110e6331efff0ca8ca7174780076243a016de))
-* **ui:** expose custom errors in delete many ([#7439](https://github.com/payloadcms/payload/issues/7439)) ([3e780b9](https://github.com/payloadcms/payload/commit/3e780b98155550f877021996dd094ba435dff81b))
-
-
-### Bug Fixes
-
-* **db-postgres:** localized array inside blocks field ([#7458](https://github.com/payloadcms/payload/issues/7458)) ([a308d63](https://github.com/payloadcms/payload/commit/a308d6384f9724c5ff330382070a5803fbcf167c)), closes [#5240](https://github.com/payloadcms/payload/issues/5240)
-* deprecated `inflight` package ([#6558](https://github.com/payloadcms/payload/issues/6558)) ([eca1517](https://github.com/payloadcms/payload/commit/eca1517237c78983c192f4bafa92a86d94a0de9e)), closes [#6492](https://github.com/payloadcms/payload/issues/6492)
-* enable `relationship` & `upload` field population in `versions` ([#7533](https://github.com/payloadcms/payload/issues/7533)) ([9865ae9](https://github.com/payloadcms/payload/commit/9865ae998b9aeb5d72724023976bb203133e19ff))
-* filtering by non-poly `relationships` with `not_equals` operator ([#7573](https://github.com/payloadcms/payload/issues/7573)) ([efa56ce](https://github.com/payloadcms/payload/commit/efa56cefc15a48cd45b3aaba2eddacca79e1be30)), closes [#5212](https://github.com/payloadcms/payload/issues/5212) [#6278](https://github.com/payloadcms/payload/issues/6278)
-* filtering by polymorphic `relationships` with `drafts` enabled ([#7565](https://github.com/payloadcms/payload/issues/7565)) ([907d7d1](https://github.com/payloadcms/payload/commit/907d7d1d3a89ed22bb991a1f238bb77d54e3e173)), closes [#6880](https://github.com/payloadcms/payload/issues/6880)
-* retained date milliseconds ([#7393](https://github.com/payloadcms/payload/issues/7393)) ([9c9e689](https://github.com/payloadcms/payload/commit/9c9e6896a502de209c6cccf63cc5cfc0f0143bf3)), closes [#6108](https://github.com/payloadcms/payload/issues/6108)
-* prevents `hasMany` text going outside of input boundaries ([#7454](https://github.com/payloadcms/payload/issues/7454)) ([1a0ef48](https://github.com/payloadcms/payload/commit/1a0ef4824b3d6548d36e7f28a2030640361c0655)), closes [#6034](https://github.com/payloadcms/payload/issues/6034)
-* previousValue missing from ValidateOptions type ([#6931](https://github.com/payloadcms/payload/issues/6931)) ([fca5a40](https://github.com/payloadcms/payload/commit/fca5a404dbf3b440b428e55cf5e03db647f9a453))
-* render singular label for `ArrayCell` when length is 1 ([#7585](https://github.com/payloadcms/payload/issues/7585)) ([fc4d24a](https://github.com/payloadcms/payload/commit/fc4d24aa8889ac9be76059a92478d5532b142b5c)), closes [#6099](https://github.com/payloadcms/payload/issues/6099)
-
-## [2.25.0](https://github.com/payloadcms/payload/compare/v2.24.2...v2.25.0) (2024-07-26)
-
-
-### Features
-
-* allows metadata to be appended to the file of the output media ([#7295](https://github.com/payloadcms/payload/issues/7295)) ([3c5cce4](https://github.com/payloadcms/payload/commit/3c5cce4c6f108f87e87b091bbfec976423de73a2))
-* **db-mongodb:** adds new optional `collation` feature flag behind mongodb collation option ([#7359](https://github.com/payloadcms/payload/issues/7359)) ([9750bc2](https://github.com/payloadcms/payload/commit/9750bc217ee7d63732a34908c84eb88b88dac0a8)), closes [#7349](https://github.com/payloadcms/payload/issues/7349)
-
-
-### Bug Fixes
-
-* properly handles `0` value number fields in list view ([#7364](https://github.com/payloadcms/payload/issues/7364)) ([5321098](https://github.com/payloadcms/payload/commit/5321098d7eada43838f6d5c69f3233c150fe0afa)), closes [#5510](https://github.com/payloadcms/payload/issues/5510)
-* preserves objectids in deepCopyObject ([#7385](https://github.com/payloadcms/payload/issues/7385)) ([1348483](https://github.com/payloadcms/payload/commit/134848364801c72cc773ef7b48854306d1b9bac3))
-* relaxes equality check for relationship options in filter ([#7344](https://github.com/payloadcms/payload/issues/7344)) ([468e544](https://github.com/payloadcms/payload/commit/468e5441f16775134d915ec7caddb17b817d3408))
-* supports null values in query strings ([#5241](https://github.com/payloadcms/payload/issues/5241)) ([c57591b](https://github.com/payloadcms/payload/commit/c57591bc4fb8d28b7de16a111faffea7d3e11f8d))
-
-## [2.24.2](https://github.com/payloadcms/payload/compare/v2.24.1...v2.24.2) (2024-07-24)
-
-
-### Features
-
-* **db-mongodb:** add jsonParse flag to mongooseAdapter that preserves existing, untracked MongoDB data types ([#7338](https://github.com/payloadcms/payload/issues/7338)) ([f96cf59](https://github.com/payloadcms/payload/commit/f96cf593cedcae0d8ed55f9a70e8e4e77917a876))
-
-
-### Bug Fixes
-
-* allow autosave relationship drawers to function properly ([#7325](https://github.com/payloadcms/payload/issues/7325)) ([69e7b7a](https://github.com/payloadcms/payload/commit/69e7b7a158c38058ece54a97bfa79e65192774a6))
-* **db-mongodb:** removes precedence of regular chars over international chars in sort ([#6923](https://github.com/payloadcms/payload/issues/6923)) ([0058660](https://github.com/payloadcms/payload/commit/0058660b3f8bd820abb4494ff53fa67f49f0f6b4)), closes [#6719](https://github.com/payloadcms/payload/issues/6719)
-* fetches and sets permissions before setting user ([#7337](https://github.com/payloadcms/payload/issues/7337)) ([8259611](https://github.com/payloadcms/payload/commit/8259611ce60e23f6298a07564d5f6dd2966d61ff))
-* **plugin-stripe:** properly types async webhooks ([#7316](https://github.com/payloadcms/payload/issues/7316)) ([c6da99b](https://github.com/payloadcms/payload/commit/c6da99b4d1b986089bb697486a7825db66323078))
-
-## [2.24.1](https://github.com/payloadcms/payload/compare/v2.24.0...v2.24.1) (2024-07-22)
-
-
-### Bug Fixes
-
-* aliases AfterMe, AfterLogout, and AfterRefresh hook types ([#7146](https://github.com/payloadcms/payload/issues/7146)) ([20377bb](https://github.com/payloadcms/payload/commit/20377bb22c867552e412c1cafd16869399aadd68))
-* exports fallback hook types to ensure backwards compatibility ([#7217](https://github.com/payloadcms/payload/issues/7217)) ([1864577](https://github.com/payloadcms/payload/commit/18645771c86664f1246f0fb599c8265a4cd1d6c0))
-* resizes images first before applying focal point ([#7278](https://github.com/payloadcms/payload/issues/7278)) ([1b208c7](https://github.com/payloadcms/payload/commit/1b208c7addf56ae8a1af5e408b001b3e5f080a38))
-* uploads from drawer and focal point positioning ([#7244](https://github.com/payloadcms/payload/issues/7244)) ([0841d5a](https://github.com/payloadcms/payload/commit/0841d5a35ee00650c703231a08fc9a361861ba67))
-
-## [2.24.0](https://github.com/payloadcms/payload/compare/v2.23.1...v2.24.0) (2024-07-16)
-
-
-### Features
-
-* adds ability to upload files from a remote url ([#7087](https://github.com/payloadcms/payload/issues/7087)) ([84d214f](https://github.com/payloadcms/payload/commit/84d214f99207ad78a466b8c16eb36e29f57cd0e3))
-* **db-mongodb:** allows mongoose schemaOptions to be configured ([#7099](https://github.com/payloadcms/payload/issues/7099)) ([51474fa](https://github.com/payloadcms/payload/commit/51474fa661ae24ab8fc0d13001fafc0f35216c1e))
-
-
-### Bug Fixes
-
-* ensures access query runs with locale when present ([#6981](https://github.com/payloadcms/payload/issues/6981)) ([a5492af](https://github.com/payloadcms/payload/commit/a5492afad672e19dd35b1f5370b51f22656f334c))
-
-## [2.23.1](https://github.com/payloadcms/payload/compare/v2.23.0...v2.23.1) (2024-06-28)
-
-### Bug Fixes
-
-* remove unused refresh arg, this affected me/refresh hooks ([#6976](https://github.com/payloadcms/payload/issues/6976)) ([c82d2ca](https://github.com/payloadcms/payload/commit/77e8ce980ef0bcb0380b499dd1ccdfd36199b707))
-
-## [2.23.0](https://github.com/payloadcms/payload/compare/v2.22.2...v2.23.0) (2024-06-28)
-
-
-### Features
-
-* adds me and refresh hooks ([#6968](https://github.com/payloadcms/payload/issues/6968)) ([c82d2ca](https://github.com/payloadcms/payload/commit/c82d2caa29422083e97affc99a033296d78892d6))
-
-
-### Bug Fixes
-
-* **richtext-lexical:** html converters unnecessarily growing over time ([#6963](https://github.com/payloadcms/payload/issues/6963)) ([cf52d64](https://github.com/payloadcms/payload/commit/cf52d64d984d98ab782ca33f20b43c935ce60683))
-
-## [2.22.2](https://github.com/payloadcms/payload/compare/v2.22.1...v2.22.2) (2024-06-26)
-
-
-### Bug Fixes
-
-* return exp and strategy from auth ([#6943](https://github.com/payloadcms/payload/issues/6943)) ([ea18735](https://github.com/payloadcms/payload/commit/ea18735d3b2d2a96989009130e3724aab487e520))
-
-## [2.22.1](https://github.com/payloadcms/payload/compare/v2.22.0...v2.22.1) (2024-06-25)
-
-
-### Bug Fixes
-
-* graphql query concurrency issues ([#6857](https://github.com/payloadcms/payload/issues/6857)) ([bb911cc](https://github.com/payloadcms/payload/commit/bb911cc7eca1eeef15ade8eb043c0056c281e311))
-* sends cropped image pixel values to server instead of percent values ([#6852](https://github.com/payloadcms/payload/issues/6852)) ([8747743](https://github.com/payloadcms/payload/commit/874774375f8beada9bac0a8ef3e77f63adc30834))
-
-## [2.22.0](https://github.com/payloadcms/payload/compare/v2.21.0...v2.22.0) (2024-06-20)
-
-
-### Features
-
-* passes prev value through to validate functions ([#6805](https://github.com/payloadcms/payload/issues/6805)) ([0a51de7](https://github.com/payloadcms/payload/commit/0a51de7623d7c7790db52f0cc3e431b5ec3436f2))
-
-
-### Bug Fixes
-
-* adjust json field schema for defaultValue ([#6872](https://github.com/payloadcms/payload/issues/6872)) ([58427ff](https://github.com/payloadcms/payload/commit/58427ffae3e0c1159fae817850b4c1770f43b9b9))
-* array row validation messages ([#6780](https://github.com/payloadcms/payload/issues/6780)) ([68ea693](https://github.com/payloadcms/payload/commit/68ea693a88714951661464917d5df10a416a5ca0))
-* cannot use empty string in defaultValue on text-like fields ([#6842](https://github.com/payloadcms/payload/issues/6842)) ([3364385](https://github.com/payloadcms/payload/commit/336438506ce5e54065f59a0352531e0255f5313d))
-* corrects redirect with lonely slash on login ([#6784](https://github.com/payloadcms/payload/issues/6784)) ([dae56e6](https://github.com/payloadcms/payload/commit/dae56e60eef9e6456d9c51e7fc3b995a32e56f5e))
-* **db-postgres:** cascade delete FKs on hasMany relationships ([#6735](https://github.com/payloadcms/payload/issues/6735)) ([9ecc6c8](https://github.com/payloadcms/payload/commit/9ecc6c889929a07d1163919eac14c9b33b90208a))
-* **payload, db-mongodb:** querying relationships with `in` & `not_in` ([#6773](https://github.com/payloadcms/payload/issues/6773)) ([f6ba3be](https://github.com/payloadcms/payload/commit/f6ba3befaeb02edca66f04fbc2ea91d2d2549d08)), closes [#6741](https://github.com/payloadcms/payload/issues/6741)
-* **plugin-cloud-storage:** missing error handling for invalid plugin config, leading to unexpected webpack errors ([#6786](https://github.com/payloadcms/payload/issues/6786)) ([015aafd](https://github.com/payloadcms/payload/commit/015aafda758938028c37a96e9b5fe62902757b09))
-* **ui:** withinCollapsible always false from useCollapsible provider ([#6783](https://github.com/payloadcms/payload/issues/6783)) ([9f0aaf0](https://github.com/payloadcms/payload/commit/9f0aaf066e76210a85faf43b2b5dc5129ccf3879)), closes [#6760](https://github.com/payloadcms/payload/issues/6760)
-* unflattening json objects containing keys with periods ([#6834](https://github.com/payloadcms/payload/issues/6834)) ([025306f](https://github.com/payloadcms/payload/commit/025306f9e685c030956dad3b0f0158c1dce49668)), closes [#5378](https://github.com/payloadcms/payload/issues/5378)
-* upgrade swc, fixing swc issues on linux ([#6809](https://github.com/payloadcms/payload/issues/6809)) ([1c986a9](https://github.com/payloadcms/payload/commit/1c986a98321163c921cb071a160b6fa9fc8bd9ee))
-
-
-## [2.21.0](https://github.com/payloadcms/payload/compare/v2.20.0...v2.21.0) (2024-06-14)
-
-
-### Features
-
-* draft validation ([#6746](https://github.com/payloadcms/payload/issues/6746)) ([ff70fd9](https://github.com/payloadcms/payload/commit/ff70fd9813ec7dc14bf54d3457c25e145fe01699))
-
-
-### Bug Fixes
-
-* adjust version status pill when unpublished ([#6744](https://github.com/payloadcms/payload/issues/6744)) ([b7e8529](https://github.com/payloadcms/payload/commit/b7e852993beaaa465e38caa36e75e870819516b5))
-* use correct time for isLocked check ([#6052](https://github.com/payloadcms/payload/issues/6052)) ([3b4bb30](https://github.com/payloadcms/payload/commit/3b4bb3065a6d2ac2f7d6aafd0fb4a35b580f3662))
-* unable to save animated file types with undefined image sizes ([#6733](https://github.com/payloadcms/payload/issues/6733)) ([e40570b](https://github.com/payloadcms/payload/commit/e40570bd0d64660bb2ae5b5785b4c85c684ca9ab)), closes [#6727](https://github.com/payloadcms/payload/issues/6727)
-
-## [2.20.0](https://github.com/payloadcms/payload/compare/v2.19.3...v2.20.0) (2024-06-11)
-
-
-### Features
-
-* **ui:** updates draft/published version pills ([#6732](https://github.com/payloadcms/payload/issues/6732)) ([ed86b15](https://github.com/payloadcms/payload/commit/ed86b15242ccbd737f3fe80103afc7d8c4cc6915))
-
-
-### Bug Fixes
-
-* adds multi select inputs for `number` & `text` fields in where builder ([#6662](https://github.com/payloadcms/payload/issues/6662)) ([e3003b4](https://github.com/payloadcms/payload/commit/e3003b443fd3b472670ade228c174c7f755b1732))
-* create sharp file for `fileHasAdjustments` files or `fileIsAnimated` files ([#6710](https://github.com/payloadcms/payload/issues/6710)) ([921a5c0](https://github.com/payloadcms/payload/commit/921a5c065d6089f0118ad8be7adbf75614c8db9c))
-* enable SaveDraft button when creating new documents ([#6672](https://github.com/payloadcms/payload/issues/6672)) ([63bc6ae](https://github.com/payloadcms/payload/commit/63bc6ae52f63adf98f442c2d7992461e7f5f86e4)), closes [#6671](https://github.com/payloadcms/payload/issues/6671) [/github.com/payloadcms/payload/commit/8f03cd7c789eda7613ddced0d45a32afe49b1e01#diff-b7c978f47b1f3beff95c78ad95078e600624cbcd7ac10f9378cc4ad6803db244L75-R79](https://github.com/payloadcms//github.com/payloadcms/payload/commit/8f03cd7c789eda7613ddced0d45a32afe49b1e01/issues/diff-b7c978f47b1f3beff95c78ad95078e600624cbcd7ac10f9378cc4ad6803db244L75-R79)
-* handles localized nested relationship fields in versions ([#6679](https://github.com/payloadcms/payload/issues/6679)) ([8a62298](https://github.com/payloadcms/payload/commit/8a622984e7ce4a2439d5d63e2689404652f8c96b))
-* live preview device position when using zoom ([#6667](https://github.com/payloadcms/payload/issues/6667)) ([9525511](https://github.com/payloadcms/payload/commit/9525511e8bc6bc3fbd7e21e36596404604f1c109))
-* only use `metadata.pages` for height if animated ([#6729](https://github.com/payloadcms/payload/issues/6729)) ([2f9ed34](https://github.com/payloadcms/payload/commit/2f9ed34d13d94070db40b1eabd04655d2e13e094))
-* removes `array` & `blocks` & `group` fields from sort ([#6574](https://github.com/payloadcms/payload/issues/6574)) ([507e095](https://github.com/payloadcms/payload/commit/507e0954b2743012f0b53c396d49461120a02b1a)), closes [#6469](https://github.com/payloadcms/payload/issues/6469)
-* withinCollapsible should be undefined by default ([#6666](https://github.com/payloadcms/payload/issues/6666)) ([37c8386](https://github.com/payloadcms/payload/commit/37c8386a51172966057df3477517d160e1c4a9a7)), closes [#6658](https://github.com/payloadcms/payload/issues/6658)
-
-## [2.19.3](https://github.com/payloadcms/payload/compare/v2.19.2...v2.19.3) (2024-06-07)
-
-
-### Bug Fixes
-
-* scopes uploadEdits to documents, hoists action to doc provider ([#6664](https://github.com/payloadcms/payload/issues/6664)) ([373cb00](https://github.com/payloadcms/payload/commit/373cb0013902b52aba455542e10402316da4b2f4))
-
-## [2.19.2](https://github.com/payloadcms/payload/compare/v2.19.1...v2.19.2) (2024-06-06)
-
-
-### Bug Fixes
-
-* cascade draft arg when querying globals with graphql ([#6651](https://github.com/payloadcms/payload/issues/6651)) ([ac8c209](https://github.com/payloadcms/payload/commit/ac8c2096af641a6886e4543ee65c9790e45f080f))
-* filtered out `disableListColumn` fields reappeared after toggling other fields ([#6636](https://github.com/payloadcms/payload/issues/6636)) ([626be15](https://github.com/payloadcms/payload/commit/626be155784dda181276bb87617433822a0accf3))
-* resizing animated images ([#6621](https://github.com/payloadcms/payload/issues/6621)) ([67c0b0e](https://github.com/payloadcms/payload/commit/67c0b0e6e0b5b190f6a916b59ba02f8c18479e18)), closes [#2181](https://github.com/payloadcms/payload/issues/2181) [#6146](https://github.com/payloadcms/payload/issues/6146)
-
-## [2.19.1](https://github.com/payloadcms/payload/compare/v2.19.0...v2.19.1) (2024-06-04)
-
-
-### Bug Fixes
-
-* override ajv dependency version to 8.14.0 wherever possible ([#6618](https://github.com/payloadcms/payload/issues/6618)) ([e44ce81](https://github.com/payloadcms/payload/commit/e44ce819cefddeaaf20b2b7ce804e94a9272baf1))
-
-## [2.19.0](https://github.com/payloadcms/payload/compare/v2.18.3...v2.19.0) (2024-06-04)
-
-
-### Features
-
-* **translations:** update Turkish translations ([#5738](https://github.com/payloadcms/payload/issues/5738)) ([4fddea8](https://github.com/payloadcms/payload/commit/4fddea86ebd5f21705be2310f8b7053d31109189))
-
-
-### Bug Fixes
-
-* adds new `userEmailAlreadyRegistered` translations ([#6549](https://github.com/payloadcms/payload/issues/6549)) ([56c6700](https://github.com/payloadcms/payload/commit/56c6700cf25570cc217e28dc69459a3b81adbced)), closes [#6535](https://github.com/payloadcms/payload/issues/6535)
-* adjusts sizing of remove/add buttons to be same size ([#6527](https://github.com/payloadcms/payload/issues/6527)) ([a352ebc](https://github.com/payloadcms/payload/commit/a352ebc5520bbd0f6a9caef068825976dba05ded)), closes [#6098](https://github.com/payloadcms/payload/issues/6098)
-* focalPoint undefined handling ([#6552](https://github.com/payloadcms/payload/issues/6552)) ([fcfc3c5](https://github.com/payloadcms/payload/commit/fcfc3c593f69f63c51f8aa09973fcacbfbe04952))
-* pagination on polymorphic relationship field requesting entries with page parameter set to NaN ([#5366](https://github.com/payloadcms/payload/issues/5366)) ([547acfe](https://github.com/payloadcms/payload/commit/547acfe876bdf0df2ce808941f72b690c9dbcae3))
-* safely evaluates `field.admin` in WhereBuilder ([#6534](https://github.com/payloadcms/payload/issues/6534)) ([4f9d78d](https://github.com/payloadcms/payload/commit/4f9d78df5e38f3f70852bb6de47cff619f57c648))
-* separate sort and search fields when looking up relationship. ([#5964](https://github.com/payloadcms/payload/issues/5964)) ([c009219](https://github.com/payloadcms/payload/commit/c0092191a6ded1098a94d9f48918ab79171e5e32)), closes [#4815](https://github.com/payloadcms/payload/issues/4815) [#5222](https://github.com/payloadcms/payload/issues/5222)
-* ui field validation error with `admin.disableListColumn` property ([#6530](https://github.com/payloadcms/payload/issues/6530)) ([eeddece](https://github.com/payloadcms/payload/commit/eeddeceda988d7a4ce8ad31d3036a4ee84aceec3)), closes [#6521](https://github.com/payloadcms/payload/issues/6521)
-* **ui:** blocks browser save dialog from opening when hotkey used with no changes ([#6365](https://github.com/payloadcms/payload/issues/6365)) ([8f03cd7](https://github.com/payloadcms/payload/commit/8f03cd7c789eda7613ddced0d45a32afe49b1e01)), closes [#214](https://github.com/payloadcms/payload/issues/214)
-
-## [2.18.3](https://github.com/payloadcms/payload/compare/v2.18.2...v2.18.3) (2024-05-17)
-
-
-### Bug Fixes
-
-* **db-postgres:** query with like on id columns ([#6416](https://github.com/payloadcms/payload/issues/6416)) ([bf77cec](https://github.com/payloadcms/payload/commit/bf77cec7e9e7db4988e481d464178636203fca32))
-* **db-postgres:** uuid custom db name ([#6409](https://github.com/payloadcms/payload/issues/6409)) ([db5f3f3](https://github.com/payloadcms/payload/commit/db5f3f3ccdaedd9e8036c3e39fc20650a309a151))
-* nested `disableListColumn` in rows ([#6412](https://github.com/payloadcms/payload/issues/6412)) ([ab8b2f3](https://github.com/payloadcms/payload/commit/ab8b2f3fb87864484582b7d819ca307888a9449b)), closes [#6407](https://github.com/payloadcms/payload/issues/6407)
-
-## [2.18.2](https://github.com/payloadcms/payload/compare/v2.18.1...v2.18.2) (2024-05-17)
-
-
-### Bug Fixes
-
-* allow focal point when no sizes defined ([#6397](https://github.com/payloadcms/payload/issues/6397)) ([88e113a](https://github.com/payloadcms/payload/commit/88e113a5452300434f690186d10ea02ab159ffc3))
-
-## [2.18.1](https://github.com/payloadcms/payload/compare/v2.18.0...v2.18.1) (2024-05-16)
-
-
-### Bug Fixes
-
-* add back explicit crop x and y values ([#6391](https://github.com/payloadcms/payload/issues/6391)) ([e76df32](https://github.com/payloadcms/payload/commit/e76df32f0987cc92dc8d9c693950e650c52576bf))
-
-## [2.18.0](https://github.com/payloadcms/payload/compare/v2.17.0...v2.18.0) (2024-05-16)
-
-
-### Features
-
-* store focal point on uploads ([#6364](https://github.com/payloadcms/payload/issues/6364)) ([82b88a3](https://github.com/payloadcms/payload/commit/82b88a315ff1d52f0b19a70224d5c600a3a97eb5))
-
-
-### Bug Fixes
-
-* **db-postgres:** filter with ID not_in AND queries - postgres ([#6358](https://github.com/payloadcms/payload/issues/6358)) ([cc94078](https://github.com/payloadcms/payload/commit/cc940786072c0065f10fdd2893050bddc4595a21)), closes [#5151](https://github.com/payloadcms/payload/issues/5151)
-* **richtext-lexical:** upload, relationship and block node insertion fails sometimes ([#6390](https://github.com/payloadcms/payload/issues/6390)) ([48a410e](https://github.com/payloadcms/payload/commit/48a410e294598af9c73577a04f86466248f93da0))
-
-## [2.17.0](https://github.com/payloadcms/payload/compare/v2.16.1...v2.17.0) (2024-05-15)
-
-
-### Features
-
-* adds misc translations to API view and react select ([#6138](https://github.com/payloadcms/payload/issues/6138)) ([30e535b](https://github.com/payloadcms/payload/commit/30e535b5b929dddead007d8a9adca62808595e2c))
-
-* **richtext-lexical:** remove LexicalBlock, RichTextFieldRequiredEditor and FieldWithRichTextRequiredEditor types ([#6279](https://github.com/payloadcms/payload/issues/6279)) ([9df5ab8](https://github.com/payloadcms/payload/commit/9df5ab8a10a35ad34615d7e4da024f59ff037e0e))
-
-### Bug Fixes
-
-* appends `editDepth` value to `radio` & `checkbox` IDs when inside drawer ([#6181](https://github.com/payloadcms/payload/issues/6181)) ([69c93d3](https://github.com/payloadcms/payload/commit/69c93d3c62394a5cf995a2eaec9a3ab30e0f77af))
-* collection labels with locales not working when creating new doc ([#5995](https://github.com/payloadcms/payload/issues/5995)) ([51efe4f](https://github.com/payloadcms/payload/commit/51efe4f39bcaadccb109a2a02a690ca65041ee57))
-* safely access cookie header for uploads ([#6367](https://github.com/payloadcms/payload/issues/6367)) ([de92c50](https://github.com/payloadcms/payload/commit/de92c50847640661f915455f8db0029873ddc7ab))
-* step-nav breadcrumbs ellipsis ([#6345](https://github.com/payloadcms/payload/issues/6345)) ([d02b1fb](https://github.com/payloadcms/payload/commit/d02b1fb084e636e49122ad55b25b9c49eb761f1c))
-*
-### ⚠ BREAKING CHANGES
-
-* **richtext-lexical:** remove LexicalBlock, RichTextFieldRequiredEditor and FieldWithRichTextRequiredEditor types (#6279)
-
-## [2.16.1](https://github.com/payloadcms/payload/compare/v2.16.0...v2.16.1) (2024-05-07)
-
-
-### Features
-
-* **richtext-lexical:** add maxDepth property to various lexical features ([#6250](https://github.com/payloadcms/payload/issues/6250)) ([857b9a4](https://github.com/payloadcms/payload/commit/857b9a4ac3236c740458750f156a3a4274eda210)), closes [#6242](https://github.com/payloadcms/payload/issues/6242)
-
-
-### Bug Fixes
-
-* **richtext-lexical:** export missing HorizontalRuleFeature ([#6236](https://github.com/payloadcms/payload/issues/6236)) ([f829b08](https://github.com/payloadcms/payload/commit/f829b084ba9649ef596cce4a7bf6ae8c7ccf57e3))
-
-## [2.16.0](https://github.com/payloadcms/payload/compare/v2.15.0...v2.16.0) (2024-05-06)
-
-
-### Features
-
-* adds disableListColumn, disableListFilter to fields admin props ([#6188](https://github.com/payloadcms/payload/issues/6188)) ([db4aace](https://github.com/payloadcms/payload/commit/db4aacebb801f1cc11ef8732f9f3b78475256641))
-
-
-### Bug Fixes
-
-* graphql upload relations returning null ([#6233](https://github.com/payloadcms/payload/issues/6233)) ([cac52da](https://github.com/payloadcms/payload/commit/cac52da638a0df4356120a2f61c6aaf25641a5ad))
-* hide drag handles when `admin.isSortable: false` ([#6225](https://github.com/payloadcms/payload/issues/6225)) ([622cdb0](https://github.com/payloadcms/payload/commit/622cdb044002b2c3182c3b0432b51befbfb9b979))
-* **plugin-form-builder:** hook overrides not working as intended ([#6203](https://github.com/payloadcms/payload/issues/6203)) ([b735d6a](https://github.com/payloadcms/payload/commit/b735d6aa169acca8cb638859d2c8ba43e315f02c))
-
-## [2.15.0](https://github.com/payloadcms/payload/compare/v2.14.2...v2.15.0) (2024-05-03)
-
-
-### Features
-
-* add isSortable to arrays and blocks ([#5962](https://github.com/payloadcms/payload/issues/5962)) ([5c58bd3](https://github.com/payloadcms/payload/commit/5c58bd322da966fe610959df13dfd49add35a2ef))
-* use filterOptions in list relationship filter ([#6156](https://github.com/payloadcms/payload/issues/6156)) ([23f3eb1](https://github.com/payloadcms/payload/commit/23f3eb1cf0b75a4044319d7cd3e5000d5b4e42c4))
-
-
-### Bug Fixes
-
-* bulk publish from collection list ([#6063](https://github.com/payloadcms/payload/issues/6063)) ([84570e6](https://github.com/payloadcms/payload/commit/84570e6e3bbb81fcae80da92b01bc56d09906072))
-* cascade draft arg in nested GraphQL relationship queries ([#6141](https://github.com/payloadcms/payload/issues/6141)) ([a8ac8b4](https://github.com/payloadcms/payload/commit/a8ac8b463349664f3188ae77217f037da72f796b))
-* GraphQL nested relationships not respecting req locale ([#6117](https://github.com/payloadcms/payload/issues/6117)) ([3fccd34](https://github.com/payloadcms/payload/commit/3fccd34abe5a332f88f5e950b755cd1d21441fb6))
-* hide unusable fields from collection filter select ([#6135](https://github.com/payloadcms/payload/issues/6135)) ([2be5ad0](https://github.com/payloadcms/payload/commit/2be5ad0ebafd1d3c1c0567e2085ccfd593f18271))
-* incorrect `localesNotSaved` translation ([#5996](https://github.com/payloadcms/payload/issues/5996)) ([af67749](https://github.com/payloadcms/payload/commit/af67749e49db92e675b63b52190e562468894706))
-* **plugin-cloud:** purge cache for all sizes ([#5301](https://github.com/payloadcms/payload/issues/5301)) ([831f1ff](https://github.com/payloadcms/payload/commit/831f1ff5bed7e083cc076e9eb5ff9a2b2f1ed710))
-* properly adds `readonly` styles to disabled `radio` fields ([#6176](https://github.com/payloadcms/payload/issues/6176)) ([9b7e62d](https://github.com/payloadcms/payload/commit/9b7e62dc20dca7402c6c68dfb8a5995c211993af))
-* resets filter state when param state change within route ([#6169](https://github.com/payloadcms/payload/issues/6169)) ([6e38cc2](https://github.com/payloadcms/payload/commit/6e38cc2bcfb08b608abcb6aac4b4c1f6eea63428))
-* **richtext-lexical:** drag and add block handles disappear too quickly for smaller screen sizes. ([#6145](https://github.com/payloadcms/payload/issues/6145)) ([24f6972](https://github.com/payloadcms/payload/commit/24f697219b5071d91a5c37aafb50e2d823b68d4c))
-* **richtext-lexical:** floating toolbar caret positioned incorrectly for some line heights ([#6151](https://github.com/payloadcms/payload/issues/6151)) ([36b1f5a](https://github.com/payloadcms/payload/commit/36b1f5a763f782c140e62aa062b4077d6efd0738))
-* sanitizes fields in default edit view for drawer content ([#6175](https://github.com/payloadcms/payload/issues/6175)) ([43dab5c](https://github.com/payloadcms/payload/commit/43dab5c7053831a0c71f3a6860113f653cab674f))
-* version restoration ([#6039](https://github.com/payloadcms/payload/issues/6039)) ([91bac9c](https://github.com/payloadcms/payload/commit/91bac9c0aa1ff3da052b9c2ad83fa5ac23a16d1d))
-
-## [2.14.2](https://github.com/payloadcms/payload/compare/v2.14.1...v2.14.2) (2024-04-26)
-
-
-### Bug Fixes
-
-* **deps:** dedupes react ([#6058](https://github.com/payloadcms/payload/issues/6058)) ([d0ba694](https://github.com/payloadcms/payload/commit/d0ba694c80a1b699c4f2cad98b1f0bde1f0d43ca))
-
-## [2.14.1](https://github.com/payloadcms/payload/compare/v2.14.0...v2.14.1) (2024-04-25)
-
-
-### Bug Fixes
-
-* **db-postgres:** cumulative updates ([#6033](https://github.com/payloadcms/payload/issues/6033)) ([c31b8dc](https://github.com/payloadcms/payload/commit/c31b8dcaa0c43132d8a01e0cc43094f466cc9168))
-* disable api key checkbox does not remove api key ([#6017](https://github.com/payloadcms/payload/issues/6017)) ([0ffdcc6](https://github.com/payloadcms/payload/commit/0ffdcc685f4e917a02e62dbaccec7cc8ebbf695d))
-* **richtext-lexical:** minimize the amount of times sanitizeFields is called ([#6018](https://github.com/payloadcms/payload/issues/6018)) ([60372fa](https://github.com/payloadcms/payload/commit/60372faf36b7f6d92a61ccbaee0f528e50f5a51a))
-
-## [2.14.0](https://github.com/payloadcms/payload/compare/v2.13.0...v2.14.0) (2024-04-24)
-
-
-### Features
-
-* add count operation to collections ([#5936](https://github.com/payloadcms/payload/issues/5936)) ([c380dee](https://github.com/payloadcms/payload/commit/c380deee4a1db82bce9fea264060000957a53eee))
-
-### Bug Fixes
-
-* bulk publish ([#6006](https://github.com/payloadcms/payload/issues/6006)) ([c11600a](https://github.com/payloadcms/payload/commit/c11600aac38cd67019765faf2a41e62df13e50cc))
-* **db-postgres:** extra version suffix added to table names ([#5939](https://github.com/payloadcms/payload/issues/5939)) ([bd8b512](https://github.com/payloadcms/payload/commit/bd8b5123b0991e53eb209315897dbca10d14d45e))
-* **db-postgres:** Fixes nested groups inside nested blocks ([#5882](https://github.com/payloadcms/payload/issues/5882)) ([e258866](https://github.com/payloadcms/payload/commit/e25886649fce414d5d47918f35ba2d4d2ba59174))
-* **db-postgres:** row table names were not being built properly - v2 ([#5961](https://github.com/payloadcms/payload/issues/5961)) ([9152a23](https://github.com/payloadcms/payload/commit/9152a238d2982503e7f509350651b0ba3f83b1ec))
-* header filters ([#5997](https://github.com/payloadcms/payload/issues/5997)) ([ad01c67](https://github.com/payloadcms/payload/commit/ad01c6784d283386dc819dfcd47455cad5accfaa))
-* min/max attributes missing from number input ([#5779](https://github.com/payloadcms/payload/issues/5779)) ([985796b](https://github.com/payloadcms/payload/commit/985796be54b593af0a4934685ab8621b9badda10))
-* removes `equals` & `not_equals` operators from fields with `hasMany` ([#5885](https://github.com/payloadcms/payload/issues/5885)) ([a8c9625](https://github.com/payloadcms/payload/commit/a8c9625cdec33476a5da87bcd9f010f9d7fb9a94))
-
-## [2.13.0](https://github.com/payloadcms/payload/compare/v2.12.1...v2.13.0) (2024-04-19)
-
-
-### Features
-
-* allow configuration for setting headers on external file fetch ([ec1ad0b](https://github.com/payloadcms/payload/commit/ec1ad0b6628d400d7435821c8a72b6746bf87577))
-* **db-\*:** custom db table and enum names ([#5045](https://github.com/payloadcms/payload/issues/5045)) ([9bbacc4](https://github.com/payloadcms/payload/commit/9bbacc4fb1ad247634f394e95c42ee3adade8048))
-* json field schemas ([#5726](https://github.com/payloadcms/payload/issues/5726)) ([2c402cc](https://github.com/payloadcms/payload/commit/2c402cc65c9e8f7f33e2fb0ce5e1a8ceff52af1b))
-* **plugin-seo:** add Chinese translation ([#5429](https://github.com/payloadcms/payload/issues/5429)) ([fcb29bb](https://github.com/payloadcms/payload/commit/fcb29bb1c637867301bbc1070b4a84383bf0e90a))
-* **richtext-lexical:** add HorizontalRuleFeature ([d8e9084](https://github.com/payloadcms/payload/commit/d8e9084db21828968046ab59775633e409ce5c2a))
-* **richtext-lexical:** improve floating handle y-positioning by positioning it in the center for smaller elements. ([0055a8e](https://github.com/payloadcms/payload/commit/0055a8eb36b95722cccdc5eb3101a79d3e764f8b))
-
-
-### Bug Fixes
-
-* adds type error validations for `email` and `password` in login operation ([#4852](https://github.com/payloadcms/payload/issues/4852)) ([1f00360](https://github.com/payloadcms/payload/commit/1f0036054a9461535b0992f2449e91e4eaf97d4e))
-* avoids getting and setting doc preferences when creating new ([#5757](https://github.com/payloadcms/payload/issues/5757)) ([e3c3dda](https://github.com/payloadcms/payload/commit/e3c3ddac34dff8fa085f5b702be2838d513be300))
-* block field type missing dbName ([#5695](https://github.com/payloadcms/payload/issues/5695)) ([e7608f5](https://github.com/payloadcms/payload/commit/e7608f5507d3b85ea3f44b5cb1f43edf67608b1b))
-* **db-mongodb:** failing `contains` query with special chars ([#5774](https://github.com/payloadcms/payload/issues/5774)) ([5fa99fb](https://github.com/payloadcms/payload/commit/5fa99fb060cabbb69b5d6688748260e562e6bea3))
-* **db-mongodb:** ignore end session errors ([#5904](https://github.com/payloadcms/payload/issues/5904)) ([cb8d562](https://github.com/payloadcms/payload/commit/cb8d562132bee437798880e1d7f64dbfdee36949))
-* **db-mongodb:** version fields indexSortableFields ([#5863](https://github.com/payloadcms/payload/issues/5863)) ([fe0028c](https://github.com/payloadcms/payload/commit/fe0028c89945303a431b48efdae7b6e22304c8a3))
-* **db-postgres:** hasMany relationship query contains operator ([#4212](https://github.com/payloadcms/payload/issues/4212)) ([608d6d0](https://github.com/payloadcms/payload/commit/608d6d0a872af224ea42c3e6c8a3b4f21678f550))
-* **db-postgres:** issue querying by localised relationship not respecting locale as constraint ([#5666](https://github.com/payloadcms/payload/issues/5666)) ([44599cb](https://github.com/payloadcms/payload/commit/44599cbc7b8f23d6d8c7a3e05466237406812a6d))
-* **db-postgres:** query hasMany fields with in ([#5881](https://github.com/payloadcms/payload/issues/5881)) ([6185f8a](https://github.com/payloadcms/payload/commit/6185f8a5d845d12651f5a3ee128eb43d3b9d2449))
-* **db-postgres:** relationship query pagination ([#5802](https://github.com/payloadcms/payload/issues/5802)) ([65690a6](https://github.com/payloadcms/payload/commit/65690a675c17cfacebe775a327a57741ac09416a))
-* **db-postgres:** validateExistingBlockIsIdentical localized ([#5839](https://github.com/payloadcms/payload/issues/5839)) ([4c4f924](https://github.com/payloadcms/payload/commit/4c4f924e90ee23a73c9a7cc7e69bbc2caf902b92))
-* duplicate document multiple times in quick succession ([#5642](https://github.com/payloadcms/payload/issues/5642)) ([373787d](https://github.com/payloadcms/payload/commit/373787de31cbbd33b587aa4be6344948f082f5bb))
-* missing date locales ([#5656](https://github.com/payloadcms/payload/issues/5656)) ([c1c8600](https://github.com/payloadcms/payload/commit/c1c86009a5e9aad401a05f7c63ad37bd3f88dc84))
-* number ids were not sanitized to number in rest api ([51f84a4](https://github.com/payloadcms/payload/commit/51f84a4fcfd437eb73c7d83205b66e3620085909))
-* passes parent id instead of incoming id to saveVersion ([#5831](https://github.com/payloadcms/payload/issues/5831)) ([25c9a14](https://github.com/payloadcms/payload/commit/25c9a145bec9e9566d2bbcba59d5b34394e10bbd))
-* **plugin-seo:** uses correct key for ukrainian translation ([#5873](https://github.com/payloadcms/payload/issues/5873)) ([e47e544](https://github.com/payloadcms/payload/commit/e47e544364031ac834565a4d86ef6ec9c04e63c0))
-* properly handle drafts in bulk update ([#5872](https://github.com/payloadcms/payload/issues/5872)) ([ad38f76](https://github.com/payloadcms/payload/commit/ad38f760111abf947c6b0ee4b983ee1224a9bf1b))
-* req.collection being lost when querying a global inside a collection ([#5727](https://github.com/payloadcms/payload/issues/5727)) ([cbd03ed](https://github.com/payloadcms/payload/commit/cbd03ed2f8819ee8ac20e8739cc03e88ff4caa25))
-* **richtext-lexical:** catch errors that may occur during HTML generation ([#5754](https://github.com/payloadcms/payload/issues/5754)) ([9b44296](https://github.com/payloadcms/payload/commit/9b442960929d00faa07f1383b1267f71e6f44efe))
-* **richtext-lexical:** do not allow omitting editor prop for sub-richtext fields within lexical defined in the payload config ([#5766](https://github.com/payloadcms/payload/issues/5766)) ([6186493](https://github.com/payloadcms/payload/commit/6186493246157b4d4b33c8c47378f08581315942))
-* **richtext-lexical:** incorrect floating handle y-position calculation next to certain kinds of HTML elements like HR ([de5d6cc](https://github.com/payloadcms/payload/commit/de5d6cc4bd591745156f0b8c56795b7bd2eaad7e))
-* **richtext-lexical:** limit unnecessary floating handle positioning updates ([a00439e](https://github.com/payloadcms/payload/commit/a00439ea893e074d64be83ee6af1e780178a7ee3))
-* **richtext-lexical:** pass through config for schema generation. Makes it more robust ([#5700](https://github.com/payloadcms/payload/issues/5700)) ([cf135fd](https://github.com/payloadcms/payload/commit/cf135fd1e4aeb30121281399e26be901393ada6d))
-* **richtext-lexical:** use correct nodeType on HorizontalRule feature HTML converter ([#5805](https://github.com/payloadcms/payload/issues/5805)) ([3b1d331](https://github.com/payloadcms/payload/commit/3b1d3313165499616673f6d363c90ef884994525))
-* updates type name of `CustomPublishButtonProps` to `CustomPublishButtonType` ([#5644](https://github.com/payloadcms/payload/issues/5644)) ([7df7bf4](https://github.com/payloadcms/payload/commit/7df7bf448bd26e870a1fde8aaa47430904d68366))
-* updates var ([9530d28](https://github.com/payloadcms/payload/commit/9530d28a6760a667b718027a49ea43ba1accd546))
-* use isolateObjectProperty function in createLocalReq ([#5748](https://github.com/payloadcms/payload/issues/5748)) ([c0ba6cc](https://github.com/payloadcms/payload/commit/c0ba6cc19a20c043a08ca77caacd47ef7cfb48f4))
-* uses find instead of fieldIndex for custom ID check ([509ec67](https://github.com/payloadcms/payload/commit/509ec677c42993d9c08facf6928a5ef1e9767508))
-
-### ⚠ BREAKING CHANGES
-
-* **richtext-lexical:** do not allow omitting editor prop for sub-richtext fields within lexical defined in the payload config ([#5766](https://github.com/payloadcms/payload/issues/5766))
-
-## [2.12.1](https://github.com/payloadcms/payload/compare/v2.12.0...v2.12.1) (2024-04-03)
-
-
-### Bug Fixes
-
-* Skip parsing if operator is 'exist' ([#5404](https://github.com/payloadcms/payload/issues/5404)) ([742a7af](https://github.com/payloadcms/payload/commit/742a7af93d2e9ef4d41ee093cef875322792ae72))
-* updates colors of tooltip in light mode ([#5632](https://github.com/payloadcms/payload/issues/5632)) ([a7e7c92](https://github.com/payloadcms/payload/commit/a7e7c9276835e0a35a18daccb218c901ca2fdd8c))
-
-## [2.12.0](https://github.com/payloadcms/payload/compare/v2.11.2...v2.12.0) (2024-04-03)
-
-
-### Features
-
-* **plugin-seo:** adds Norwegian translation ([#5621](https://github.com/payloadcms/payload/issues/5621)) ([589b492](https://github.com/payloadcms/payload/commit/589b492b2e6bc578e6f17649ff6d936ffd88b8b5))
-* **richtext-*:** add ability to provide custom Field and Error components ([#5574](https://github.com/payloadcms/payload/issues/5574)) ([02d2c51](https://github.com/payloadcms/payload/commit/02d2c517176a775c6eeb4b164d9e6b45d8f5e4c1))
-
-
-### Bug Fixes
-
-* **db-postgres:** error on delete having joins ([#5459](https://github.com/payloadcms/payload/issues/5459)) ([9169230](https://github.com/payloadcms/payload/commit/916923071a2c28077326bfd2059d1665ef47e94f))
-* image resize tiff files ([#5415](https://github.com/payloadcms/payload/issues/5415)) ([8184e00](https://github.com/payloadcms/payload/commit/8184e0005af1b6da93d0921c31547515a4ce6343))
-* number field with hasMany accept defaultValue array ([#5618](https://github.com/payloadcms/payload/issues/5618)) ([a3ae416](https://github.com/payloadcms/payload/commit/a3ae4160850290c194bb228e1fbeb8c7533cead3))
-* regression of filterOptions using different transaction ([#5169](https://github.com/payloadcms/payload/issues/5169)) ([3ceb6ef](https://github.com/payloadcms/payload/commit/3ceb6efd32cfa9556c6656469fa43d61d7679b1d))
-* **richtext-lexical:** Blocks: generated output schema is not fully correct ([#5259](https://github.com/payloadcms/payload/issues/5259)) ([e7f6bfb](https://github.com/payloadcms/payload/commit/e7f6bfbe9da4cab42c7ec7019371d5e79af17ec9))
-* **richtext-lexical:** checklist html converter incorrectly outputting children ([#5570](https://github.com/payloadcms/payload/issues/5570)) ([2e5400f](https://github.com/payloadcms/payload/commit/2e5400fa7a5ac7441e00134a7f4299022228f64f))
-* **richtext-lexical:** disable instanceof HTMLImageElement check as it causes issues when used on the server ([2164dcc](https://github.com/payloadcms/payload/commit/2164dcc594b5c16d7111b71cdb01f5f7aaa7e127))
-* **richtext-lexical:** Link: add open-in-new-tab to html converter ([23df60d](https://github.com/payloadcms/payload/commit/23df60dba5682255ce6f60e3ee8e6901f6a70c7b))
-* **richtext-lexical:** properly center add- and drag-block handles ([#5568](https://github.com/payloadcms/payload/issues/5568)) ([48dc116](https://github.com/payloadcms/payload/commit/48dc116f57113c3124ff93a50fa1189053e21d76))
-* sets beforeValidateHook req type to required ([#5608](https://github.com/payloadcms/payload/issues/5608)) ([e10d5df](https://github.com/payloadcms/payload/commit/e10d5df0b2dd21b86cce44d0e36b31e9d3411b39))
-
 ## [2.11.2](https://github.com/payloadcms/payload/compare/v2.11.1...v2.11.2) (2024-02-23)
 
 

README.md

@@ -17,7 +17,7 @@
 <hr/>
 
 > [!IMPORTANT]
-> 🎉 <strong>Payload 3.0 beta released!</strong> You can now deploy Payload fully in any Next.js app folder. Read more in the <a target="_blank" href="https://payloadcms.com/blog/30-beta-install-payload-into-any-nextjs-app-with-one-line" rel="dofollow"><strong>announcement post</strong></a>.
+> 🎉 <strong>Payload 2.0 is now available!</strong> Read more in the <a target="_blank" href="https://payloadcms.com/blog/payload-2-0" rel="dofollow"><strong>announcement post</strong></a>.
 
 <h3>Benefits over a regular CMS</h3>
 <ul>

app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -0,0 +1,17 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { NotFoundView } from '@payloadcms/next/views/NotFound/index.js'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+const NotFound = ({ params, searchParams }: Args) => NotFoundView({ config, params, searchParams })
+
+export default NotFound

app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,22 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { RootPage, generatePageMetadata } from '@payloadcms/next/views/Root/index.js'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+
+export default Page

app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes/index.js'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)

app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes/index.js'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes/index.js'
+
+export const POST = GRAPHQL_POST(config)

app/(payload)/layout.tsx

@@ -0,0 +1,15 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from '@payload-config'
+import { RootLayout } from '@payloadcms/next/layouts/Root/index.js'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+
+export default Layout

app/live-preview/(pages)/[slug]/page.client.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { useLivePreview } from '@payloadcms/live-preview-react'
+import React from 'react'
+
+import type { Page as PageType } from '../../../../test/live-preview/payload-types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../_api/serverURL.js'
+import { Blocks } from '../../_components/Blocks/index.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import { Hero } from '../../_components/Hero/index.js'
+
+export const PageClient: React.FC<{
+  page: PageType
+}> = ({ page: initialPage }) => {
+  const { data } = useLivePreview<PageType>({
+    depth: 2,
+    initialData: initialPage,
+    serverURL: PAYLOAD_SERVER_URL,
+  })
+
+  return (
+    <React.Fragment>
+      <Gutter>
+        <h1 id="page-title">{data.title}</h1>
+      </Gutter>
+      <Hero {...data?.hero} />
+      <Blocks
+        blocks={[
+          ...(data?.layout ?? []),
+          {
+            blockName: 'Relationships',
+            blockType: 'relationships',
+            data,
+          },
+        ]}
+        disableTopPadding={
+          !data?.hero || data?.hero?.type === 'none' || data?.hero?.type === 'lowImpact'
+        }
+      />
+    </React.Fragment>
+  )
+}

app/live-preview/(pages)/[slug]/page.tsx

@@ -0,0 +1,37 @@
+import { notFound } from 'next/navigation.js'
+import React from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { fetchDoc } from '../../_api/fetchDoc.js'
+import { fetchDocs } from '../../_api/fetchDocs.js'
+import { PageClient } from './page.client.js'
+
+// eslint-disable-next-line no-restricted-exports
+export default async function Page({ params: { slug = 'home' } }) {
+  let page: Page | null = null
+
+  try {
+    page = await fetchDoc<Page>({
+      slug,
+      collection: 'pages',
+    })
+  } catch (error) {
+    console.error(error)
+  }
+
+  if (!page) {
+    return notFound()
+  }
+
+  return <PageClient page={page} />
+}
+
+export async function generateStaticParams() {
+  try {
+    const pages = await fetchDocs<Page>('pages')
+    return pages?.map(({ slug }) => slug)
+  } catch (error) {
+    return []
+  }
+}

app/live-preview/(pages)/posts/[slug]/page.client.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { useLivePreview } from '@payloadcms/live-preview-react'
+import React from 'react'
+
+import type { Post as PostType } from '../../../../../test/live-preview/payload-types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import { Blocks } from '../../../_components/Blocks/index.js'
+import { PostHero } from '../../../_heros/PostHero/index.js'
+
+export const PostClient: React.FC<{
+  post: PostType
+}> = ({ post: initialPost }) => {
+  const { data } = useLivePreview<PostType>({
+    depth: 2,
+    initialData: initialPost,
+    serverURL: PAYLOAD_SERVER_URL,
+  })
+
+  return (
+    <React.Fragment>
+      <PostHero post={data} />
+      <Blocks blocks={data?.layout} />
+      <Blocks
+        blocks={[
+          {
+            blockName: 'Related Posts',
+            blockType: 'relatedPosts',
+            docs: data?.relatedPosts,
+            introContent: [
+              {
+                type: 'h4',
+                children: [
+                  {
+                    text: 'Related posts',
+                  },
+                ],
+              },
+              {
+                type: 'p',
+                children: [
+                  {
+                    text: 'The posts displayed here are individually selected for this page. Admins can select any number of related posts to display here and the layout will adjust accordingly. Alternatively, you could swap this out for the "Archive" block to automatically populate posts by category complete with pagination. To manage related posts, ',
+                  },
+                  {
+                    type: 'link',
+                    children: [
+                      {
+                        text: 'navigate to the admin dashboard',
+                      },
+                    ],
+                    url: `/admin/collections/posts/${data?.id}`,
+                  },
+                  {
+                    text: '.',
+                  },
+                ],
+              },
+            ],
+            relationTo: 'posts',
+          },
+        ]}
+        disableTopPadding
+      />
+    </React.Fragment>
+  )
+}

app/live-preview/(pages)/posts/[slug]/page.tsx

@@ -0,0 +1,36 @@
+import { notFound } from 'next/navigation.js'
+import React from 'react'
+
+import type { Post } from '../../../../../test/live-preview/payload-types.js'
+
+import { fetchDoc } from '../../../_api/fetchDoc.js'
+import { fetchDocs } from '../../../_api/fetchDocs.js'
+import { PostClient } from './page.client.js'
+
+export default async function Post({ params: { slug = '' } }) {
+  let post: Post | null = null
+
+  try {
+    post = await fetchDoc<Post>({
+      slug,
+      collection: 'posts',
+    })
+  } catch (error) {
+    console.error(error) // eslint-disable-line no-console
+  }
+
+  if (!post) {
+    notFound()
+  }
+
+  return <PostClient post={post} />
+}
+
+export async function generateStaticParams() {
+  try {
+    const posts = await fetchDocs<Post>('posts')
+    return posts?.map(({ slug }) => slug)
+  } catch (error) {
+    return []
+  }
+}

app/live-preview/_api/fetchDoc.ts

@@ -1,14 +1,14 @@
 import QueryString from 'qs'
-import type { Config } from '../../payload-types'
-import { PAYLOAD_SERVER_URL } from './serverURL'
+
+import { PAYLOAD_SERVER_URL } from './serverURL.js'
 
 export const fetchDoc = async <T>(args: {
-  collection: keyof Config['collections']
-  slug?: string
-  id?: string
+  collection: string
   depth?: number
+  id?: string
+  slug?: string
 }): Promise<T> => {
-  const { collection, slug, id, depth = 2 } = args || {}
+  const { id, slug, collection, depth = 2 } = args || {}
 
   const queryString = QueryString.stringify(
     {
@@ -19,11 +19,11 @@ export const fetchDoc = async <T>(args: {
   )
 
   const doc: T = await fetch(`${PAYLOAD_SERVER_URL}/api/${collection}${queryString}`, {
-    method: 'GET',
     cache: 'no-store',
     headers: {
       'Content-Type': 'application/json',
     },
+    method: 'GET',
   })
     ?.then((res) => res.json())
     ?.then((res) => {

app/live-preview/_api/fetchDocs.ts

@@ -0,0 +1,19 @@
+import { PAYLOAD_SERVER_URL } from './serverURL.js'
+
+export const fetchDocs = async <T>(collection: string): Promise<T[]> => {
+  const docs: T[] = await fetch(`${PAYLOAD_SERVER_URL}/api/${collection}?depth=0&limit=100`, {
+    cache: 'no-store',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'GET',
+  })
+    ?.then((res) => res.json())
+    ?.then((res) => {
+      if (res.errors) throw new Error(res?.errors?.[0]?.message ?? 'Error fetching docs')
+
+      return res?.docs
+    })
+
+  return docs
+}

app/live-preview/_api/fetchFooter.ts

@@ -1,15 +1,16 @@
-import type { Footer } from '../../payload-types'
-import { PAYLOAD_SERVER_URL } from './serverURL'
+import type { Footer } from '../../../test/live-preview/payload-types.js'
+
+import { PAYLOAD_SERVER_URL } from './serverURL.js'
 
 export async function fetchFooter(): Promise<Footer> {
   if (!PAYLOAD_SERVER_URL) throw new Error('PAYLOAD_SERVER_URL not found')
 
   const footer = await fetch(`${PAYLOAD_SERVER_URL}/api/globals/footer`, {
-    method: 'GET',
     cache: 'no-store',
     headers: {
       'Content-Type': 'application/json',
     },
+    method: 'GET',
   })
     .then((res) => {
       if (!res.ok) throw new Error('Error fetching doc')

app/live-preview/_api/fetchHeader.ts

@@ -1,15 +1,16 @@
-import type { Header } from '../../payload-types'
-import { PAYLOAD_SERVER_URL } from './serverURL'
+import type { Header } from '../../../test/live-preview/payload-types.js'
+
+import { PAYLOAD_SERVER_URL } from './serverURL.js'
 
 export async function fetchHeader(): Promise<Header> {
   if (!PAYLOAD_SERVER_URL) throw new Error('PAYLOAD_SERVER_URL not found')
 
   const header = await fetch(`${PAYLOAD_SERVER_URL}/api/globals/header`, {
-    method: 'GET',
     cache: 'no-store',
     headers: {
       'Content-Type': 'application/json',
     },
+    method: 'GET',
   })
     ?.then((res) => {
       if (!res.ok) throw new Error('Error fetching doc')

app/live-preview/_blocks/ArchiveBlock/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import type { ArchiveBlockProps } from './types.js'
+
+import { CollectionArchive } from '../../_components/CollectionArchive/index.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+export const ArchiveBlock: React.FC<
+  ArchiveBlockProps & {
+    id?: string
+  }
+> = (props) => {
+  const {
+    id,
+    categories,
+    introContent,
+    limit,
+    populateBy,
+    populatedDocs,
+    populatedDocsTotal,
+    relationTo,
+    selectedDocs,
+  } = props
+
+  return (
+    <div className={classes.archiveBlock} id={`block-${id}`}>
+      {introContent && (
+        <Gutter className={classes.introContent}>
+          <RichText content={introContent} />
+        </Gutter>
+      )}
+      <CollectionArchive
+        categories={categories}
+        limit={limit}
+        populateBy={populateBy}
+        populatedDocs={populatedDocs}
+        populatedDocsTotal={populatedDocsTotal}
+        relationTo={relationTo}
+        selectedDocs={selectedDocs}
+        sort="-publishedDate"
+      />
+    </div>
+  )
+}

app/live-preview/_blocks/ArchiveBlock/types.ts

@@ -0,0 +1,6 @@
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+export type ArchiveBlockProps = Extract<
+  Exclude<Page['layout'], undefined>[0],
+  { blockType: 'archive' }
+>

app/live-preview/_blocks/CallToAction/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import { CMSLink } from '../../_components/Link/index.js'
+import RichText from '../../_components/RichText/index.js'
+import { VerticalPadding } from '../../_components/VerticalPadding/index.js'
+import classes from './index.module.scss'
+
+type Props = Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'cta' }>
+
+export const CallToActionBlock: React.FC<
+  Props & {
+    id?: string
+  }
+> = ({ invertBackground, links, richText }) => {
+  return (
+    <Gutter>
+      <VerticalPadding
+        className={[classes.callToAction, invertBackground && classes.invert]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <div className={classes.wrap}>
+          <div className={classes.content}>
+            <RichText className={classes.richText} content={richText} />
+          </div>
+          <div className={classes.linkGroup}>
+            {(links || []).map(({ link }, i) => {
+              return <CMSLink key={i} {...link} invert={invertBackground} />
+            })}
+          </div>
+        </div>
+      </VerticalPadding>
+    </Gutter>
+  )
+}

app/live-preview/_blocks/Content/index.tsx

@@ -0,0 +1,39 @@
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import { CMSLink } from '../../_components/Link/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+type Props = Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'content' }>
+
+export const ContentBlock: React.FC<
+  Props & {
+    id?: string
+  }
+> = (props) => {
+  const { columns } = props
+
+  return (
+    <Gutter className={classes.content}>
+      <div className={classes.grid}>
+        {columns && columns.length > 0 ? (
+          <Fragment>
+            {columns.map((col, index) => {
+              const { enableLink, link, richText, size } = col
+
+              return (
+                <div className={[classes.column, classes[`column--${size}`]].join(' ')} key={index}>
+                  <RichText content={richText} />
+                  {enableLink && <CMSLink className={classes.link} {...link} />}
+                </div>
+              )
+            })}
+          </Fragment>
+        ) : null}
+      </div>
+    </Gutter>
+  )
+}

app/live-preview/_blocks/MediaBlock/index.tsx

@@ -0,0 +1,42 @@
+import type { StaticImageData } from 'next/image.js'
+
+import React from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import { Media } from '../../_components/Media/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+type Props = Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'mediaBlock' }> & {
+  id?: string
+  staticImage?: StaticImageData
+}
+
+export const MediaBlock: React.FC<Props> = (props) => {
+  const { media, position = 'default', staticImage } = props
+
+  let caption
+  if (media && typeof media === 'object') caption = media.caption
+
+  return (
+    <div className={classes.mediaBlock}>
+      {position === 'fullscreen' && (
+        <div className={classes.fullscreen}>
+          <Media resource={media} src={staticImage} />
+        </div>
+      )}
+      {position === 'default' && (
+        <Gutter>
+          <Media resource={media} src={staticImage} />
+        </Gutter>
+      )}
+      {caption && (
+        <Gutter className={classes.caption}>
+          <RichText content={caption} />
+        </Gutter>
+      )}
+    </div>
+  )
+}

app/live-preview/_blocks/RelatedPosts/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import type { Post } from '../../../../test/live-preview/payload-types.js'
+
+import { Card } from '../../_components/Card/index.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+export type RelatedPostsProps = {
+  blockName: string
+  blockType: 'relatedPosts'
+  docs?: (Post | string)[] | null
+  introContent?: any
+  relationTo: 'posts'
+}
+
+export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
+  const { docs, introContent, relationTo } = props
+
+  return (
+    <div className={classes.relatedPosts}>
+      {introContent && (
+        <Gutter className={classes.introContent}>
+          <RichText content={introContent} />
+        </Gutter>
+      )}
+      <Gutter>
+        <div className={classes.grid}>
+          {docs?.map((doc, index) => {
+            if (typeof doc === 'string') return null
+
+            return (
+              <div
+                className={[
+                  classes.column,
+                  docs.length === 2 && classes['cols-half'],
+                  docs.length >= 3 && classes['cols-thirds'],
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                key={index}
+              >
+                <Card doc={doc} relationTo={relationTo} showCategories />
+              </div>
+            )
+          })}
+        </div>
+      </Gutter>
+    </div>
+  )
+}

app/live-preview/_blocks/Relationships/index.tsx

@@ -0,0 +1,196 @@
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+export type RelationshipsBlockProps = {
+  blockName: string
+  blockType: 'relationships'
+  data: Page
+}
+
+export const RelationshipsBlock: React.FC<RelationshipsBlockProps> = (props) => {
+  const { data } = props
+
+  return (
+    <div className={classes.relationshipsBlock}>
+      <Gutter>
+        <p>
+          This block is for testing purposes only. It renders every possible type of relationship.
+        </p>
+        <p>
+          <b>Rich Text — Slate:</b>
+        </p>
+        {data?.richTextSlate && <RichText content={data.richTextSlate} renderUploadFilenameOnly />}
+        <p>
+          <b>Rich Text — Lexical:</b>
+        </p>
+        {data?.richTextLexical && (
+          <RichText content={data.richTextLexical} renderUploadFilenameOnly serializer="lexical" />
+        )}
+        <p>
+          <b>Upload:</b>
+        </p>
+        {data?.relationshipAsUpload ? (
+          <div>
+            {typeof data?.relationshipAsUpload === 'string'
+              ? data?.relationshipAsUpload
+              : data?.relationshipAsUpload.filename}
+          </div>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Monomorphic Has One:</b>
+        </p>
+        {data?.relationshipMonoHasOne ? (
+          <div>
+            {typeof data?.relationshipMonoHasOne === 'string'
+              ? data?.relationshipMonoHasOne
+              : data?.relationshipMonoHasOne.title}
+          </div>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Monomorphic Has Many:</b>
+        </p>
+        {data?.relationshipMonoHasMany ? (
+          <Fragment>
+            {data?.relationshipMonoHasMany.length
+              ? data?.relationshipMonoHasMany?.map((item, index) =>
+                  item ? (
+                    <div key={index}>{typeof item === 'string' ? item : item.title}</div>
+                  ) : (
+                    'null'
+                  ),
+                )
+              : 'None'}
+          </Fragment>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Polymorphic Has One:</b>
+        </p>
+        {data?.relationshipPolyHasOne ? (
+          <div>
+            {typeof data?.relationshipPolyHasOne.value === 'string'
+              ? data?.relationshipPolyHasOne.value
+              : data?.relationshipPolyHasOne.value.title}
+          </div>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Polymorphic Has Many:</b>
+        </p>
+        {data?.relationshipPolyHasMany ? (
+          <Fragment>
+            {data?.relationshipPolyHasMany.length
+              ? data?.relationshipPolyHasMany?.map((item, index) =>
+                  item.value ? (
+                    <div key={index}>
+                      {typeof item.value === 'string' ? item.value : item.value.title}
+                    </div>
+                  ) : (
+                    'null'
+                  ),
+                )
+              : 'None'}
+          </Fragment>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Array of Relationships:</b>
+        </p>
+        {data?.arrayOfRelationships?.map((item, index) => (
+          <div className={classes.array} key={index}>
+            <p>
+              <b>Rich Text:</b>
+            </p>
+            {item?.richTextInArray && <RichText content={item.richTextInArray} />}
+            <p>
+              <b>Upload:</b>
+            </p>
+            {item?.uploadInArray ? (
+              <div>
+                {typeof item?.uploadInArray === 'string'
+                  ? item?.uploadInArray
+                  : item?.uploadInArray.filename}
+              </div>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Monomorphic Has One:</b>
+            </p>
+            {item?.relationshipInArrayMonoHasOne ? (
+              <div>
+                {typeof item?.relationshipInArrayMonoHasOne === 'string'
+                  ? item?.relationshipInArrayMonoHasOne
+                  : item?.relationshipInArrayMonoHasOne.title}
+              </div>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Monomorphic Has Many:</b>
+            </p>
+            {item?.relationshipInArrayMonoHasMany ? (
+              <Fragment>
+                {item?.relationshipInArrayMonoHasMany.length
+                  ? item?.relationshipInArrayMonoHasMany?.map((rel, relIndex) =>
+                      rel ? (
+                        <div key={relIndex}>{typeof rel === 'string' ? rel : rel.title}</div>
+                      ) : (
+                        'null'
+                      ),
+                    )
+                  : 'None'}
+              </Fragment>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Polymorphic Has One:</b>
+            </p>
+            {item?.relationshipInArrayPolyHasOne ? (
+              <div>
+                {typeof item?.relationshipInArrayPolyHasOne.value === 'string'
+                  ? item?.relationshipInArrayPolyHasOne.value
+                  : item?.relationshipInArrayPolyHasOne.value.title}
+              </div>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Polymorphic Has Many:</b>
+            </p>
+            {item?.relationshipInArrayPolyHasMany ? (
+              <Fragment>
+                {item?.relationshipInArrayPolyHasMany.length
+                  ? item?.relationshipInArrayPolyHasMany?.map((rel, relIndex) =>
+                      rel.value ? (
+                        <div key={relIndex}>
+                          {typeof rel.value === 'string' ? rel.value : rel.value.title}
+                        </div>
+                      ) : (
+                        'null'
+                      ),
+                    )
+                  : 'None'}
+              </Fragment>
+            ) : (
+              <div>None</div>
+            )}
+          </div>
+        ))}
+      </Gutter>
+    </div>
+  )
+}

app/live-preview/_components/BackgroundColor/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+type Props = {
+  children?: React.ReactNode
+  className?: string
+  id?: string
+  invert?: boolean | null
+}
+
+export const BackgroundColor: React.FC<Props> = (props) => {
+  const { id, children, className, invert } = props
+
+  return (
+    <div className={[invert && classes.invert, className].filter(Boolean).join(' ')} id={id}>
+      {children}
+    </div>
+  )
+}

app/live-preview/_components/Blocks/index.tsx

@@ -0,0 +1,88 @@
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+import type { RelationshipsBlockProps } from '../../_blocks/Relationships/index.js'
+import type { VerticalPaddingOptions } from '../VerticalPadding/index.js'
+
+import { ArchiveBlock } from '../../_blocks/ArchiveBlock/index.js'
+import { CallToActionBlock } from '../../_blocks/CallToAction/index.js'
+import { ContentBlock } from '../../_blocks/Content/index.js'
+import { MediaBlock } from '../../_blocks/MediaBlock/index.js'
+import { RelatedPosts, type RelatedPostsProps } from '../../_blocks/RelatedPosts/index.js'
+import { RelationshipsBlock } from '../../_blocks/Relationships/index.js'
+import { toKebabCase } from '../../_utilities/toKebabCase.js'
+import { BackgroundColor } from '../BackgroundColor/index.js'
+import { VerticalPadding } from '../VerticalPadding/index.js'
+
+const blockComponents = {
+  archive: ArchiveBlock,
+  content: ContentBlock,
+  cta: CallToActionBlock,
+  mediaBlock: MediaBlock,
+  relatedPosts: RelatedPosts,
+  relationships: RelationshipsBlock,
+}
+
+type Block = NonNullable<Page['layout']>[number]
+
+export const Blocks: React.FC<{
+  blocks?: (Block | RelatedPostsProps | RelationshipsBlockProps)[] | null
+  disableTopPadding?: boolean
+}> = (props) => {
+  const { blocks, disableTopPadding } = props
+
+  const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
+
+  if (hasBlocks) {
+    return (
+      <Fragment>
+        {blocks.map((block, index) => {
+          const { blockName, blockType } = block
+
+          if (blockType && blockType in blockComponents) {
+            const Block = blockComponents[blockType]
+
+            // the cta block is containerized, so we don't consider it to be inverted at the block-level
+            const blockIsInverted =
+              'invertBackground' in block && blockType !== 'cta' ? block.invertBackground : false
+            const prevBlock = blocks[index - 1]
+
+            const prevBlockInverted =
+              prevBlock && 'invertBackground' in prevBlock && prevBlock?.invertBackground
+
+            const isPrevSame = Boolean(blockIsInverted) === Boolean(prevBlockInverted)
+
+            let paddingTop: VerticalPaddingOptions = 'large'
+            let paddingBottom: VerticalPaddingOptions = 'large'
+
+            if (prevBlock && isPrevSame) {
+              paddingTop = 'none'
+            }
+
+            if (index === blocks.length - 1) {
+              paddingBottom = 'large'
+            }
+
+            if (disableTopPadding && index === 0) {
+              paddingTop = 'none'
+            }
+
+            if (Block) {
+              return (
+                <BackgroundColor invert={blockIsInverted} key={index}>
+                  <VerticalPadding bottom={paddingBottom} top={paddingTop}>
+                    {/* @ts-expect-error */}
+                    <Block id={toKebabCase(blockName)} {...block} />
+                  </VerticalPadding>
+                </BackgroundColor>
+              )
+            }
+          }
+          return null
+        })}
+      </Fragment>
+    )
+  }
+
+  return null
+}

app/live-preview/_components/Button/index.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import type { ElementType } from 'react'
+
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export type Props = {
+  appearance?: 'default' | 'none' | 'primary' | 'secondary'
+  className?: string
+  disabled?: boolean
+  el?: 'a' | 'button' | 'link'
+  href?: string
+  invert?: boolean
+  label?: string
+  newTab?: boolean
+  onClick?: () => void
+  type?: 'button' | 'submit'
+}
+
+export const Button: React.FC<Props> = ({
+  type = 'button',
+  appearance,
+  className: classNameFromProps,
+  disabled,
+  el: elFromProps = 'link',
+  href,
+  invert,
+  label,
+  newTab,
+  onClick,
+}) => {
+  let el = elFromProps
+
+  const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
+
+  const className = [
+    classes.button,
+    classNameFromProps,
+    classes[`appearance--${appearance}`],
+    invert && classes[`${appearance}--invert`],
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const content = (
+    <div className={classes.content}>
+      <span className={classes.label}>{label}</span>
+    </div>
+  )
+
+  if (onClick || type === 'submit') el = 'button'
+
+  if (el === 'link') {
+    return (
+      <Link className={className} href={href || ''} {...newTabProps} onClick={onClick}>
+        {content}
+      </Link>
+    )
+  }
+
+  const Element: ElementType = el
+
+  return (
+    <Element
+      className={className}
+      href={href}
+      type={type}
+      {...newTabProps}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {content}
+    </Element>
+  )
+}

app/live-preview/_components/Card/index.tsx

@@ -0,0 +1,88 @@
+import LinkWithDefault from 'next/link.js'
+import React, { Fragment } from 'react'
+
+import type { Post } from '../../../../test/live-preview/payload-types.js'
+
+import { Media } from '../Media/index.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export const Card: React.FC<{
+  alignItems?: 'center'
+  className?: string
+  doc?: Post
+  hideImagesOnMobile?: boolean
+  orientation?: 'horizontal' | 'vertical'
+  relationTo?: 'posts'
+  showCategories?: boolean
+  title?: string
+}> = (props) => {
+  const {
+    className,
+    doc,
+    orientation = 'vertical',
+    relationTo,
+    showCategories,
+    title: titleFromProps,
+  } = props
+
+  const { slug, categories, meta, title } = doc || {}
+  const { description, image: metaImage } = meta || {}
+
+  const hasCategories = categories && Array.isArray(categories) && categories.length > 0
+  const titleToUse = titleFromProps || title
+  const sanitizedDescription = description?.replace(/\s/g, ' ') // replace non-breaking space with white space
+  const href = `/live-preview/${relationTo}/${slug}`
+
+  return (
+    <div
+      className={[classes.card, className, orientation && classes[orientation]]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <Link className={classes.mediaWrapper} href={href}>
+        {!metaImage && <div className={classes.placeholder}>No image</div>}
+        {metaImage && typeof metaImage !== 'string' && (
+          <Media fill imgClassName={classes.image} resource={metaImage} />
+        )}
+      </Link>
+      <div className={classes.content}>
+        {showCategories && hasCategories && (
+          <div className={classes.leader}>
+            {showCategories && hasCategories && (
+              <div>
+                {categories?.map((category, index) => {
+                  const titleFromCategory = typeof category === 'string' ? category : category.title
+
+                  const categoryTitle = titleFromCategory || 'Untitled category'
+
+                  const isLast = index === categories.length - 1
+
+                  return (
+                    <Fragment key={index}>
+                      {categoryTitle}
+                      {!isLast && <Fragment>, &nbsp;</Fragment>}
+                    </Fragment>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        )}
+        {titleToUse && (
+          <h4 className={classes.title}>
+            <Link className={classes.titleLink} href={href}>
+              {titleToUse}
+            </Link>
+          </h4>
+        )}
+        {description && (
+          <div className={classes.body}>
+            {description && <p className={classes.description}>{sanitizedDescription}</p>}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

app/live-preview/_components/Chevron/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+export const Chevron: React.FC<{
+  className?: string
+  rotate?: number
+}> = ({ className, rotate }) => {
+  return (
+    <svg
+      className={className}
+      height="100%"
+      style={{
+        transform: typeof rotate === 'number' ? `rotate(${rotate || 0}deg)` : undefined,
+      }}
+      viewBox="0 0 24 24"
+      width="100%"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M23.245 4l-11.245 14.374-11.219-14.374-.781.619 12 15.381 12-15.391-.755-.609z"
+        fill="none"
+        stroke="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  )
+}

app/live-preview/_components/CollectionArchive/PopulateByCollection/index.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+import qs from 'qs'
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+
+import type { Post } from '../../../../../test/live-preview/payload-types.js'
+import type { ArchiveBlockProps } from '../../../_blocks/ArchiveBlock/types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import { Card } from '../../Card/index.js'
+import { Gutter } from '../../Gutter/index.js'
+import { PageRange } from '../../PageRange/index.js'
+import { Pagination } from '../../Pagination/index.js'
+import classes from './index.module.scss'
+
+type Result = {
+  docs: (Post | string)[]
+  hasNextPage: boolean
+  hasPrevPage: boolean
+  nextPage: number
+  page: number
+  prevPage: number
+  totalDocs: number
+  totalPages: number
+}
+
+export type Props = Omit<ArchiveBlockProps, 'blockType'> & {
+  className?: string
+  onResultChange?: (result: Result) => void // eslint-disable-line no-unused-vars
+  showPageRange?: boolean
+  sort?: string
+}
+
+export const CollectionArchiveByCollection: React.FC<Props> = (props) => {
+  const {
+    categories: catsFromProps,
+    className,
+    limit = 10,
+    onResultChange,
+    populatedDocs,
+    populatedDocsTotal,
+    relationTo,
+    showPageRange,
+    sort = '-createdAt',
+  } = props
+
+  const [results, setResults] = useState<Result>({
+    docs: populatedDocs?.map((doc) => doc.value) || [],
+    hasNextPage: false,
+    hasPrevPage: false,
+    nextPage: 1,
+    page: 1,
+    prevPage: 1,
+    totalDocs: typeof populatedDocsTotal === 'number' ? populatedDocsTotal : 0,
+    totalPages: 1,
+  })
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const hasHydrated = useRef(false)
+  const [page, setPage] = useState(1)
+
+  const scrollToRef = useCallback(() => {
+    const { current } = scrollRef
+    if (current) {
+      // current.scrollIntoView({
+      //   behavior: 'smooth',
+      // })
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isLoading && typeof results.page !== 'undefined') {
+      // scrollToRef()
+    }
+  }, [isLoading, scrollToRef, results])
+
+  useEffect(() => {
+    // hydrate the block with fresh content after first render
+    // don't show loader unless the request takes longer than x ms
+    // and don't show it during initial hydration
+    const timer = setTimeout(() => {
+      if (hasHydrated) {
+        setIsLoading(true)
+      }
+    }, 500)
+
+    const searchQuery = qs.stringify(
+      {
+        depth: 1,
+        limit,
+        page,
+        sort,
+        where: {
+          ...(catsFromProps && catsFromProps?.length > 0
+            ? {
+                categories: {
+                  in:
+                    typeof catsFromProps === 'string'
+                      ? [catsFromProps]
+                      : catsFromProps
+                          .map((cat) => (typeof cat === 'object' && cat !== null ? cat.id : cat))
+                          .join(','),
+                },
+              }
+            : {}),
+        },
+      },
+      { encode: false },
+    )
+
+    const makeRequest = async () => {
+      try {
+        const req = await fetch(`${PAYLOAD_SERVER_URL}/api/${relationTo}?${searchQuery}`)
+        const json = await req.json()
+        clearTimeout(timer)
+        hasHydrated.current = true
+
+        const { docs } = json as { docs: Post[] }
+
+        if (docs && Array.isArray(docs)) {
+          setResults(json)
+          setIsLoading(false)
+          if (typeof onResultChange === 'function') {
+            onResultChange(json)
+          }
+        }
+      } catch (err) {
+        console.warn(err) // eslint-disable-line no-console
+        setIsLoading(false)
+        setError(`Unable to load "${relationTo} archive" data at this time.`)
+      }
+    }
+
+    void makeRequest()
+
+    return () => {
+      if (timer) clearTimeout(timer)
+    }
+  }, [page, catsFromProps, relationTo, onResultChange, sort, limit])
+
+  return (
+    <div className={[classes.collectionArchive, className].filter(Boolean).join(' ')}>
+      <div className={classes.scrollRef} ref={scrollRef} />
+      {!isLoading && error && <Gutter>{error}</Gutter>}
+      <Fragment>
+        {showPageRange !== false && (
+          <Gutter>
+            <div className={classes.pageRange}>
+              <PageRange
+                collection={relationTo}
+                currentPage={results.page}
+                limit={limit}
+                totalDocs={results.totalDocs}
+              />
+            </div>
+          </Gutter>
+        )}
+        <Gutter>
+          <div className={classes.grid}>
+            {results.docs?.map((result, index) => {
+              if (typeof result === 'string') {
+                return null
+              }
+
+              return (
+                <div className={classes.column} key={index}>
+                  <Card doc={result} relationTo="posts" showCategories />
+                </div>
+              )
+            })}
+          </div>
+          {results.totalPages > 1 && (
+            <Pagination
+              className={classes.pagination}
+              onClick={setPage}
+              page={results.page}
+              totalPages={results.totalPages}
+            />
+          )}
+        </Gutter>
+      </Fragment>
+    </div>
+  )
+}

app/live-preview/_components/CollectionArchive/PopulateBySelection/index.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import React, { Fragment } from 'react'
+
+import type { ArchiveBlockProps } from '../../../_blocks/ArchiveBlock/types.js'
+
+import { Card } from '../../Card/index.js'
+import { Gutter } from '../../Gutter/index.js'
+import classes from './index.module.scss'
+
+export type Props = {
+  className?: string
+  selectedDocs?: ArchiveBlockProps['selectedDocs']
+}
+
+export const CollectionArchiveBySelection: React.FC<Props> = (props) => {
+  const { className, selectedDocs } = props
+
+  const result = selectedDocs?.map((doc) => doc.value)
+
+  return (
+    <div className={[classes.collectionArchive, className].filter(Boolean).join(' ')}>
+      <Fragment>
+        <Gutter>
+          <div className={classes.grid}>
+            {result?.map((result, index) => {
+              if (typeof result === 'string') {
+                return null
+              }
+
+              return (
+                <div className={classes.column} key={index}>
+                  <Card doc={result} relationTo="posts" showCategories />
+                </div>
+              )
+            })}
+          </div>
+        </Gutter>
+      </Fragment>
+    </div>
+  )
+}

app/live-preview/_components/CollectionArchive/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import type { ArchiveBlockProps } from '../../_blocks/ArchiveBlock/types.js'
+
+import { CollectionArchiveByCollection } from './PopulateByCollection/index.js'
+import { CollectionArchiveBySelection } from './PopulateBySelection/index.js'
+
+export type Props = Omit<ArchiveBlockProps, 'blockType'> & {
+  className?: string
+  sort?: string
+}
+
+export const CollectionArchive: React.FC<Props> = (props) => {
+  const { className, populateBy, selectedDocs } = props
+
+  if (populateBy === 'selection') {
+    return <CollectionArchiveBySelection className={className} selectedDocs={selectedDocs} />
+  }
+
+  if (populateBy === 'collection') {
+    return <CollectionArchiveByCollection {...props} className={className} />
+  }
+
+  return null
+}

app/live-preview/_components/Footer/index.tsx

@@ -0,0 +1,41 @@
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import { fetchFooter } from '../../_api/fetchFooter.js'
+import { Gutter } from '../Gutter/index.js'
+import { CMSLink } from '../Link/index.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export async function Footer() {
+  const footer = await fetchFooter()
+
+  const navItems = footer?.navItems || []
+
+  return (
+    <footer className={classes.footer}>
+      <Gutter className={classes.wrap}>
+        <Link href="/">
+          <picture>
+            <img
+              alt="Payload Logo"
+              className={classes.logo}
+              src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-light.svg"
+            />
+          </picture>
+        </Link>
+        <nav className={classes.nav}>
+          {navItems.map(({ link }, i) => {
+            return <CMSLink key={i} {...link} />
+          })}
+          <Link href="/admin">Admin</Link>
+          <Link href="https://github.com/payloadcms/payload/tree/main/templates/ecommerce">
+            Source Code
+          </Link>
+          <Link href="https://github.com/payloadcms/payload">Payload</Link>
+        </nav>
+      </Gutter>
+    </footer>
+  )
+}

app/live-preview/_components/Gutter/index.tsx

@@ -0,0 +1,35 @@
+import type { Ref } from 'react'
+
+import React, { forwardRef } from 'react'
+
+import classes from './index.module.scss'
+
+type Props = {
+  children: React.ReactNode
+  className?: string
+  left?: boolean
+  ref?: Ref<HTMLDivElement>
+  right?: boolean
+}
+
+export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const { children, className, left = true, right = true } = props
+
+  return (
+    <div
+      className={[
+        classes.gutter,
+        left && classes.gutterLeft,
+        right && classes.gutterRight,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      ref={ref}
+    >
+      {children}
+    </div>
+  )
+})
+
+Gutter.displayName = 'Gutter'

app/live-preview/_components/Header/Nav/index.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import React from 'react'
+
+import type { Header as HeaderType } from '../../../../../test/live-preview/payload-types.js'
+
+import { CMSLink } from '../../Link/index.js'
+import classes from './index.module.scss'
+
+export const HeaderNav: React.FC<{ header: HeaderType }> = ({ header }) => {
+  const navItems = header?.navItems || []
+
+  return (
+    <nav className={classes.nav}>
+      {navItems.map(({ link }, i) => {
+        return <CMSLink key={i} {...link} />
+      })}
+    </nav>
+  )
+}

app/live-preview/_components/Header/index.tsx

@@ -0,0 +1,28 @@
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import { fetchHeader } from '../../_api/fetchHeader.js'
+import { Gutter } from '../Gutter/index.js'
+import { HeaderNav } from './Nav/index.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export async function Header() {
+  const header = await fetchHeader()
+
+  return (
+    <header className={classes.header}>
+      <Gutter className={classes.wrap}>
+        <Link href="/live-preview">
+          <img
+            alt="Payload Logo"
+            className={classes.logo}
+            src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-dark.svg"
+          />
+        </Link>
+        <HeaderNav header={header} />
+      </Gutter>
+    </header>
+  )
+}

app/live-preview/_components/Hero/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { HighImpactHero } from '../../_heros/HighImpact/index.js'
+import { LowImpactHero } from '../../_heros/LowImpact/index.js'
+
+const heroes = {
+  highImpact: HighImpactHero,
+  lowImpact: LowImpactHero,
+}
+
+export const Hero: React.FC<Page['hero']> = (props) => {
+  const { type } = props || {}
+
+  if (!type || type === 'none') return null
+
+  const HeroToRender = heroes[type]
+
+  if (!HeroToRender) return null
+
+  return <HeroToRender {...props} />
+}

app/live-preview/_components/Link/index.tsx

@@ -0,0 +1,67 @@
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import type { Page, Post } from '../../../../test/live-preview/payload-types.js'
+import type { Props as ButtonProps } from '../Button/index.js'
+
+import { Button } from '../Button/index.js'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+type CMSLinkType = {
+  appearance?: ButtonProps['appearance']
+  children?: React.ReactNode
+  className?: string
+  invert?: ButtonProps['invert']
+  label?: string
+  newTab?: boolean
+  reference?: {
+    relationTo: 'pages' | 'posts'
+    value: Page | Post | string
+  }
+  type?: 'custom' | 'reference'
+  url?: string
+}
+
+export const CMSLink: React.FC<CMSLinkType> = ({
+  type,
+  appearance,
+  children,
+  className,
+  invert,
+  label,
+  newTab,
+  reference,
+  url,
+}) => {
+  const href =
+    type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
+      ? `/${reference.value.slug}`
+      : url
+
+  if (!href) return null
+
+  if (!appearance) {
+    const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
+
+    if (href || url) {
+      return (
+        <Link {...newTabProps} className={className} href={href || url || ''}>
+          {label && label}
+          {children && children}
+        </Link>
+      )
+    }
+  }
+
+  return (
+    <Button
+      appearance={appearance}
+      className={className}
+      href={href}
+      invert={invert}
+      label={label}
+      newTab={newTab}
+    />
+  )
+}

app/live-preview/_components/Media/Image/index.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import type { StaticImageData } from 'next/image.js'
+
+import NextImageWithDefault from 'next/image.js'
+import React from 'react'
+
+import type { Props as MediaProps } from '../types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import cssVariables from '../../../cssVariables.js'
+import classes from './index.module.scss'
+
+const { breakpoints } = cssVariables
+
+const NextImage = (NextImageWithDefault.default ||
+  NextImageWithDefault) as typeof NextImageWithDefault.default
+
+export const Image: React.FC<MediaProps> = (props) => {
+  const {
+    alt: altFromProps,
+    fill,
+    imgClassName,
+    onClick,
+    onLoad: onLoadFromProps,
+    priority,
+    resource,
+    src: srcFromProps,
+  } = props
+
+  const [isLoading, setIsLoading] = React.useState(true)
+
+  let width: number | undefined
+  let height: number | undefined
+  let alt = altFromProps
+  let src: StaticImageData | string = srcFromProps || ''
+
+  if (!src && resource && typeof resource !== 'string') {
+    const {
+      alt: altFromResource,
+      filename: fullFilename,
+      height: fullHeight,
+      width: fullWidth,
+    } = resource
+
+    width = fullWidth || undefined
+    height = fullHeight || undefined
+    alt = altFromResource
+
+    const filename = fullFilename
+
+    src = `${PAYLOAD_SERVER_URL}/api/media/file/${filename}`
+  }
+
+  // NOTE: this is used by the browser to determine which image to download at different screen sizes
+  const sizes = Object.entries(breakpoints)
+    .map(([, value]) => `(max-width: ${value}px) ${value}px`)
+    .join(', ')
+
+  return (
+    <NextImage
+      alt={alt || ''}
+      className={[isLoading && classes.placeholder, classes.image, imgClassName]
+        .filter(Boolean)
+        .join(' ')}
+      fill={fill}
+      height={!fill ? height : undefined}
+      onClick={onClick}
+      onLoad={() => {
+        setIsLoading(false)
+        if (typeof onLoadFromProps === 'function') {
+          onLoadFromProps()
+        }
+      }}
+      priority={priority}
+      sizes={sizes}
+      src={src}
+      width={!fill ? width : undefined}
+    />
+  )
+}

app/live-preview/_components/Media/Video/index.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+
+import type { Props as MediaProps } from '../types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import classes from './index.module.scss'
+
+export const Video: React.FC<MediaProps> = (props) => {
+  const { onClick, resource, videoClassName } = props
+
+  const videoRef = useRef<HTMLVideoElement>(null)
+  // const [showFallback] = useState<boolean>()
+
+  useEffect(() => {
+    const { current: video } = videoRef
+    if (video) {
+      video.addEventListener('suspend', () => {
+        // setShowFallback(true);
+        // console.warn('Video was suspended, rendering fallback image.')
+      })
+    }
+  }, [])
+
+  if (resource && typeof resource !== 'string') {
+    const { filename } = resource
+
+    return (
+      <video
+        autoPlay
+        className={[classes.video, videoClassName].filter(Boolean).join(' ')}
+        controls={false}
+        loop
+        muted
+        onClick={onClick}
+        playsInline
+        ref={videoRef}
+      >
+        <source src={`${PAYLOAD_SERVER_URL}/media/${filename}`} />
+      </video>
+    )
+  }
+
+  return null
+}

app/live-preview/_components/Media/index.tsx

@@ -0,0 +1,31 @@
+import type { ElementType } from 'react'
+
+import React, { Fragment } from 'react'
+
+import type { Props } from './types.js'
+
+import { Image } from './Image/index.js'
+import { Video } from './Video/index.js'
+
+export const Media: React.FC<Props> = (props) => {
+  const { className, htmlElement = 'div', resource } = props
+
+  const isVideo = typeof resource !== 'string' && resource?.mimeType?.includes('video')
+  const Tag = (htmlElement as ElementType) || Fragment
+
+  return (
+    <Tag
+      {...(htmlElement !== null
+        ? {
+            className,
+          }
+        : {})}
+    >
+      {isVideo ? (
+        <Video {...props} />
+      ) : (
+        <Image {...props} /> // eslint-disable-line
+      )}
+    </Tag>
+  )
+}

app/live-preview/_components/Media/types.ts

@@ -0,0 +1,20 @@
+import type { StaticImageData } from 'next/image'
+import type { ElementType, Ref } from 'react'
+
+import type { Media as MediaType } from '../../../payload-types'
+
+export interface Props {
+  alt?: string
+  className?: string
+  fill?: boolean // for NextImage only
+  htmlElement?: ElementType | null
+  imgClassName?: string
+  onClick?: () => void
+  onLoad?: () => void
+  priority?: boolean // for NextImage only
+  ref?: Ref<HTMLImageElement | HTMLVideoElement | null>
+  resource?: MediaType | string // for Payload media
+  size?: string // for NextImage only
+  src?: StaticImageData // for static media
+  videoClassName?: string
+}

app/live-preview/_components/PageRange/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+const defaultLabels = {
+  plural: 'Docs',
+  singular: 'Doc',
+}
+
+const defaultCollectionLabels = {
+  products: {
+    plural: 'Products',
+    singular: 'Product',
+  },
+}
+
+export const PageRange: React.FC<{
+  className?: string
+  collection?: string
+  collectionLabels?: {
+    plural?: string
+    singular?: string
+  }
+  currentPage?: number
+  limit?: number
+  totalDocs?: number
+}> = (props) => {
+  const {
+    className,
+    collection,
+    collectionLabels: collectionLabelsFromProps,
+    currentPage,
+    limit,
+    totalDocs,
+  } = props
+
+  const indexStart = (currentPage ? currentPage - 1 : 1) * (limit || 1) + 1
+  let indexEnd = (currentPage || 1) * (limit || 1)
+  if (totalDocs && indexEnd > totalDocs) indexEnd = totalDocs
+
+  const { plural, singular } =
+    collectionLabelsFromProps || defaultCollectionLabels[collection || ''] || defaultLabels || {}
+
+  return (
+    <div className={[className, classes.pageRange].filter(Boolean).join(' ')}>
+      {(typeof totalDocs === 'undefined' || totalDocs === 0) && 'Search produced no results.'}
+      {typeof totalDocs !== 'undefined' &&
+        totalDocs > 0 &&
+        `Showing ${indexStart} - ${indexEnd} of ${totalDocs} ${totalDocs > 1 ? plural : singular}`}
+    </div>
+  )
+}

app/live-preview/_components/Pagination/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { Chevron } from '../Chevron/index.js'
+import classes from './index.module.scss'
+
+export const Pagination: React.FC<{
+  className?: string
+  onClick: (page: number) => void
+  page: number
+  totalPages: number
+}> = (props) => {
+  const { className, onClick, page, totalPages } = props
+  const hasNextPage = page < totalPages
+  const hasPrevPage = page > 1
+
+  return (
+    <div className={[classes.pagination, className].filter(Boolean).join(' ')}>
+      <button
+        className={classes.button}
+        disabled={!hasPrevPage}
+        onClick={() => {
+          onClick(page - 1)
+        }}
+        type="button"
+      >
+        <Chevron className={classes.icon} rotate={90} />
+      </button>
+      <div className={classes.pageRange}>
+        <span className={classes.pageRangeLabel}>
+          Page {page} of {totalPages}
+        </span>
+      </div>
+      <button
+        className={classes.button}
+        disabled={!hasNextPage}
+        onClick={() => {
+          onClick(page + 1)
+        }}
+        type="button"
+      >
+        <Chevron className={classes.icon} rotate={-90} />
+      </button>
+    </div>
+  )
+}

app/live-preview/_components/RichText/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+import serializeLexical from './serializeLexical.js'
+import serializeSlate from './serializeSlate.js'
+
+const RichText: React.FC<{
+  className?: string
+  content: any
+  renderUploadFilenameOnly?: boolean
+  serializer?: 'lexical' | 'slate'
+}> = ({ className, content, renderUploadFilenameOnly, serializer = 'slate' }) => {
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div className={[classes.richText, className].filter(Boolean).join(' ')}>
+      {serializer === 'slate'
+        ? serializeSlate(content, renderUploadFilenameOnly)
+        : serializeLexical(content, renderUploadFilenameOnly)}
+    </div>
+  )
+}
+
+export default RichText

app/live-preview/_components/RichText/serializeLexical.tsx

@@ -1,6 +1,9 @@
 import type { SerializedEditorState } from 'lexical'
-import { CMSLink } from '../Link'
-import { Media } from '../Media'
+
+import React from 'react'
+
+import { CMSLink } from '../Link/index.js'
+import { Media } from '../Media/index.js'
 
 const serializer = (
   content?: SerializedEditorState['root']['children'],
@@ -55,10 +58,10 @@ const serializer = (
         return (
           <CMSLink
             key={i}
+            newTab={Boolean(node?.newTab)}
+            reference={node.doc as any}
             type={node.linkType === 'internal' ? 'reference' : 'custom'}
             url={node.url}
-            reference={node.doc as any}
-            newTab={Boolean(node?.newTab)}
           >
             {serializer(node?.children, renderUploadFilenameOnly)}
           </CMSLink>

app/live-preview/_components/RichText/serializeSlate.tsx

@@ -1,18 +1,19 @@
-import React, { Fragment } from 'react'
 import escapeHTML from 'escape-html'
+import React, { Fragment } from 'react'
 import { Text } from 'slate'
-import { CMSLink } from '../Link'
-import { Media } from '../Media'
+
+import { CMSLink } from '../Link/index.js'
+import { Media } from '../Media/index.js'
 
 // eslint-disable-next-line no-use-before-define
 type Children = Leaf[]
 
 type Leaf = {
-  type: string
-  value?: any
-  children?: Children
-  url?: string
   [key: string]: unknown
+  children?: Children
+  type: string
+  url?: string
+  value?: any
 }
 
 const serializeSlate = (
@@ -37,7 +38,7 @@ const serializeSlate = (
 
       if (node.underline) {
         text = (
-          <span style={{ textDecoration: 'underline' }} key={i}>
+          <span key={i} style={{ textDecoration: 'underline' }}>
             {text}
           </span>
         )
@@ -45,7 +46,7 @@ const serializeSlate = (
 
       if (node.strikethrough) {
         text = (
-          <span style={{ textDecoration: 'line-through' }} key={i}>
+          <span key={i} style={{ textDecoration: 'line-through' }}>
             {text}
           </span>
         )
@@ -106,10 +107,10 @@ const serializeSlate = (
         return (
           <CMSLink
             key={i}
+            newTab={Boolean(node?.newTab)}
+            reference={node.doc as any}
             type={node.linkType === 'internal' ? 'reference' : 'custom'}
             url={node.url}
-            reference={node.doc as any}
-            newTab={Boolean(node?.newTab)}
           >
             {serializeSlate(node?.children, renderUploadFilenameOnly)}
           </CMSLink>

app/live-preview/_components/VerticalPadding/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+export type VerticalPaddingOptions = 'large' | 'medium' | 'none'
+
+type Props = {
+  bottom?: VerticalPaddingOptions
+  children: React.ReactNode
+  className?: string
+  top?: VerticalPaddingOptions
+}
+
+export const VerticalPadding: React.FC<Props> = ({
+  bottom = 'medium',
+  children,
+  className,
+  top = 'medium',
+}) => {
+  return (
+    <div
+      className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  )
+}

app/live-preview/_css/app.scss

@@ -0,0 +1,121 @@
+@use './queries.scss' as *;
+@use './colors.scss' as *;
+@use './type.scss' as *;
+
+:root {
+  --base: 24px;
+  --font-body: system-ui;
+  --font-mono: 'Roboto Mono', monospace;
+
+  --gutter-h: 180px;
+  --block-padding: 120px;
+
+  --theme-text: var(--color-base-750);
+
+  @include large-break {
+    --gutter-h: 144px;
+    --block-padding: 96px;
+  }
+
+  @include mid-break {
+    --gutter-h: 24px;
+    --block-padding: 60px;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @extend %body;
+  -webkit-font-smoothing: antialiased;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  margin: 0;
+  color: var(--theme-text);
+}
+
+::selection {
+  background: var(--color-success-500);
+  color: var(--color-base-800);
+}
+
+::-moz-selection {
+  background: var(--color-success-500);
+  color: var(--color-base-800);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+h1 {
+  @extend %h1;
+}
+
+h2 {
+  @extend %h2;
+}
+
+h3 {
+  @extend %h3;
+}
+
+h4 {
+  @extend %h4;
+}
+
+h5 {
+  @extend %h5;
+}
+
+h6 {
+  @extend %h6;
+}
+
+p {
+  margin: var(--base) 0;
+
+  @include mid-break {
+    margin: calc(var(--base) * 0.75) 0;
+  }
+}
+
+#page-title {
+  @extend %h6;
+}
+
+ul,
+ol {
+  padding-left: var(--base);
+  margin: 0 0 var(--base);
+}
+
+a {
+  color: currentColor;
+
+  &:focus {
+    opacity: 0.8;
+    outline: none;
+  }
+
+  &:active {
+    opacity: 0.7;
+    outline: none;
+  }
+}
+
+svg {
+  vertical-align: middle;
+}