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,24 @@
 # Order matters. The last matching pattern takes precedence.
 
-### Catch-all ###
-* @denolfe @jmikrut @DanRibbens
-.* @denolfe @jmikrut @DanRibbens
-
 ### Core ###
-/packages/payload/ @denolfe @jmikrut @DanRibbens
 /packages/payload/src/uploads/ @denolfe
 /packages/payload/src/admin/ @jmikrut @jacobsfletch @JarrodMFlesch
 
 ### Adapters ###
-/packages/bundler-*/ @denolfe @jmikrut @DanRibbens @JarrodMFlesch
 /packages/db-*/ @denolfe @jmikrut @DanRibbens
 /packages/richtext-*/ @denolfe @jmikrut @DanRibbens @AlessioGr
 
 ### Plugins ###
-/packages/plugin-*/ @denolfe @jmikrut @DanRibbens @jacobsfletch @JarrodMFlesch @AlessioGr
+/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-password-protection/ @jmikrut
 /packages/plugin-redirects/ @jacobsfletch
 /packages/plugin-search/ @jacobsfletch
 /packages/plugin-sentry/ @JessChowdhury
 /packages/plugin-seo/ @jacobsfletch
 /packages/plugin-stripe/ @jacobsfletch
-/packages/plugin-zapier/ @JarrodMFlesch
 
 ### Examples ###
 /examples/ @jacobsfletch
@@ -35,8 +27,7 @@
 /examples/whitelabel/ @JessChowdhury
 
 ### Templates ###
-/templates/ @jacobsfletch
-/templates/blank/ @denolfe
+/templates/ @jacobsfletch @denolfe
 
 ### Misc ###
 /packages/create-payload-app/ @denolfe

.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:
@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 25
-      - uses: dorny/paths-filter@v2
+      - uses: dorny/paths-filter@v3
         id: filter
         with:
           filters: |
@@ -46,12 +46,12 @@ jobs:
           fetch-depth: 25
 
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8
           run_install: false
@@ -61,7 +61,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
@@ -71,21 +71,64 @@ 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@v3
+        uses: actions/cache@v4
         with:
           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
@@ -97,18 +140,18 @@ jobs:
 
     steps:
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8
           run_install: false
 
       - name: Restore build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
@@ -119,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 }}
@@ -158,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 }}
@@ -174,59 +214,79 @@ 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:
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8
           run_install: false
 
       - name: Restore build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           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:
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8
           run_install: false
 
       - name: Restore build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
@@ -237,43 +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:
-      - name: Use Node.js 18
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v3
-        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
@@ -292,18 +315,18 @@ jobs:
 
     steps:
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8
           run_install: false
 
       - name: Restore build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
@@ -313,16 +336,15 @@ 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
@@ -330,7 +352,7 @@ jobs:
           fetch-depth: 25
 
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 

.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}",
@@ -27,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",
@@ -102,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

@@ -5,21 +5,21 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     }
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     }
   },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     }
   },
   "[json]": {
@@ -35,5 +35,10 @@
   "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
   "typescript.tsdk": "node_modules/typescript/lib",
   // Load .git-blame-ignore-revs file
-  "gitlens.advanced.blame.customArguments": ["--ignore-revs-file", ".git-blame-ignore-revs"]
+  "gitlens.advanced.blame.customArguments": ["--ignore-revs-file", ".git-blame-ignore-revs"],
+  "[javascript][typescript][typescriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+  }
 }

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;
+}

app/live-preview/_heros/HighImpact/index.tsx

@@ -0,0 +1,31 @@
+import React, { Fragment } 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'
+
+export const HighImpactHero: React.FC<Page['hero']> = ({ media, richText }) => {
+  return (
+    <Gutter className={classes.hero}>
+      <div className={classes.content}>
+        <RichText content={richText} />
+      </div>
+      <div className={classes.media}>
+        {typeof media === 'object' && media !== null && (
+          <Fragment>
+            <Media
+              // fill
+              imgClassName={classes.image}
+              priority
+              resource={media}
+            />
+            {media?.caption && <RichText className={classes.caption} content={media.caption} />}
+          </Fragment>
+        )}
+      </div>
+    </Gutter>
+  )
+}

app/live-preview/_heros/LowImpact/index.tsx

@@ -0,0 +1,20 @@
+import React 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 { VerticalPadding } from '../../_components/VerticalPadding/index.js'
+import classes from './index.module.scss'
+
+export const LowImpactHero: React.FC<Page['hero']> = ({ richText }) => {
+  return (
+    <Gutter className={classes.lowImpactHero}>
+      <div className={classes.content}>
+        <VerticalPadding>
+          <RichText className={classes.richText} content={richText} />
+        </VerticalPadding>
+      </div>
+    </Gutter>
+  )
+}

app/live-preview/_heros/PostHero/index.tsx

@@ -0,0 +1,57 @@
+import LinkWithDefault from 'next/link.js'
+import React, { Fragment } from 'react'
+
+import type { Post } from '../../../../test/live-preview/payload-types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../_api/serverURL.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import { Media } from '../../_components/Media/index.js'
+import RichText from '../../_components/RichText/index.js'
+import { formatDateTime } from '../../_utilities/formatDateTime.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export const PostHero: React.FC<{
+  post: Post
+}> = ({ post }) => {
+  const { id, createdAt, meta: { description, image: metaImage } = {} } = post
+
+  return (
+    <Fragment>
+      <Gutter className={classes.postHero}>
+        <div className={classes.content}>
+          <RichText className={classes.richText} content={post?.hero?.richText} />
+          <p className={classes.meta}>
+            {createdAt && (
+              <Fragment>
+                {'Created on '}
+                {formatDateTime(createdAt)}
+              </Fragment>
+            )}
+          </p>
+          <div>
+            <p className={classes.description}>
+              {`${description ? `${description} ` : ''}To edit this post, `}
+              <Link href={`${PAYLOAD_SERVER_URL}/admin/collections/posts/${id}`}>
+                navigate to the admin dashboard
+              </Link>
+              .
+            </p>
+          </div>
+        </div>
+        <div className={classes.media}>
+          <div className={classes.mediaWrapper}>
+            {!metaImage && <div className={classes.placeholder}>No image</div>}
+            {metaImage && typeof metaImage !== 'string' && (
+              <Media fill imgClassName={classes.image} resource={metaImage} />
+            )}
+          </div>
+          {metaImage && typeof metaImage !== 'string' && metaImage?.caption && (
+            <RichText className={classes.caption} content={metaImage.caption} />
+          )}
+        </div>
+      </Gutter>
+    </Fragment>
+  )
+}

app/live-preview/cssVariables.js

@@ -1,6 +1,5 @@
 // Keep these in sync with the CSS variables in the `_css` directory
-
-module.exports = {
+export default {
   breakpoints: {
     s: 768,
     m: 1024,

app/live-preview/layout.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from 'next'
+
+import React from 'react'
+
+import { Footer } from './_components/Footer/index.js'
+import { Header } from './_components/Header/index.js'
+import './_css/app.scss'
+
+export const metadata: Metadata = {
+  description: 'Payload Live Preview',
+  title: 'Payload Live Preview',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Header />
+        {children}
+        <Footer />
+      </body>
+    </html>
+  )
+}