Merge branch 'alpha' into chore/e2e-upload-tests

fix: test suite & transactions fixes

.env.example

@@ -1,4 +0,0 @@
-DATABASE_URI=mongodb://127.0.0.1/payloadtests
-PAYLOAD_SECRET=laijflieawfjlweifjewalifjwe
-# PAYLOAD_CONFIG_PATH=MUST BE SET PROGRAMMATICALLY
-PAYLOAD_DROP_DATABASE=true

.eslintignore

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

.eslintrc.cjs

@@ -1,6 +1,15 @@
+/** @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: {
@@ -46,6 +55,10 @@ module.exports = {
   parserOptions: {
     project: ['./tsconfig.json'],
     tsconfigRootDir: __dirname,
+    EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
+    EXPERIMENTAL_useProjectService: true,
+    sourceType: 'module',
+    ecmaVersion: 'latest',
   },
   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', 'feat/next-poc']
+    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 }}
@@ -74,7 +74,7 @@ jobs:
       - run: pnpm run build:core
 
       - name: Cache build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
@@ -90,12 +90,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
@@ -105,7 +105,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 }}
@@ -123,7 +123,12 @@ jobs:
     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
@@ -135,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 }}
@@ -157,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 }}
@@ -196,8 +201,11 @@ 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: Unit Tests
+        if: false # Disable until tests are updated for 3.0
+        run: pnpm test:unit
+        env:
+          NODE_OPTIONS: --max-old-space-size=8096
 
       - name: Integration Tests
         run: pnpm test:int
@@ -212,59 +220,74 @@ 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
+          - versions
+          # - uploads
 
     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: E2E Tests
-        uses: nick-fields/retry@v2
-        with:
-          retry_on: error
-          max_attempts: 2
-          timeout_minutes: 15
-          command: pnpm test:e2e --part ${{ matrix.part }} --bail
+      - name: Install Playwright
+        run: pnpm exec playwright install
 
-      - uses: actions/upload-artifact@v3
+      - name: E2E Tests
+        run: pnpm test:e2e ${{ matrix.suite }}
+
+      - 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 }}
@@ -275,55 +298,14 @@ jobs:
       - name: Generate GraphQL schema file
         run: pnpm dev:generate-graphql-schema graphql-schema-gen
 
-  plugins:
-    runs-on: ubuntu-latest
-    needs: core-build
-    strategy:
-      fail-fast: false
-      matrix:
-        pkg:
-          - create-payload-app
-          - plugin-cloud
-          - plugin-cloud-storage
-          - plugin-form-builder
-          - plugin-nested-docs
-          - plugin-search
-          - plugin-sentry
-          - plugin-seo
-
-    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 }}
-
-      - 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
@@ -331,7 +313,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

@@ -8,12 +8,16 @@ test-results
 .devcontainer
 .localstack
 /migrations
-/media
 .localstack
 .turbo
 
 .turbo
 
+# Ignore test directory media folder/files
+/media
+test/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
 
@@ -285,3 +289,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>

.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

@@ -10,6 +10,6 @@
     }
   },
   "module": {
-    "type": "commonjs"
+    "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,15 +3,23 @@
   // Hover to view descriptions of existing attributes.
   "configurations": [
     {
-      "command": "pnpm dev",
-      "name": "Run Dev 3.0",
+      "command": "pnpm generate:types",
+      "name": "Generate Types CLI",
+      "request": "launch",
+      "type": "node-terminal",
+      "cwd": "${workspaceFolder}"
+    },
+    {
+      "command": "node --no-deprecation test/dev.js _community",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev Community",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "pnpm run dev _community",
+      "command": "node --no-deprecation test/dev.js live-preview",
       "cwd": "${workspaceFolder}",
-      "name": "Run Dev Community",
+      "name": "Run Dev Live Preview",
       "request": "launch",
       "type": "node-terminal"
     },
@@ -108,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

@@ -40,25 +40,5 @@
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit"
     }
-  },
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#8cb5b6",
-    "activityBar.background": "#8cb5b6",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#9c639b",
-    "activityBarBadge.foreground": "#e7e7e7",
-    "commandCenter.border": "#15202b99",
-    "sash.hoverBorder": "#8cb5b6",
-    "statusBar.background": "#6da1a2",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#568586",
-    "statusBarItem.remoteBackground": "#6da1a2",
-    "statusBarItem.remoteForeground": "#15202b",
-    "titleBar.activeBackground": "#6da1a2",
-    "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#6da1a299",
-    "titleBar.inactiveForeground": "#15202b99"
-  },
-  "peacock.color": "#6da1a2"
+  }
 }

app/(payload)/admin/[[...segments]]/not-found.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 { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views/NotFound/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 NotFound = ({ params, searchParams }: Args) => NotFoundPage({ config, params, searchParams })
+
+export default NotFound

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

@@ -1,7 +1,9 @@
 /* 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'
+import { RootPage, generatePageMetadata } from '@payloadcms/next/views/Root/index.js'
 
 type Args = {
   params: {
@@ -12,7 +14,7 @@ type Args = {
   }
 }
 
-export const generateMetadata = ({ params, searchParams }: Args) =>
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
   generatePageMetadata({ config, params, searchParams })
 
 const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })

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

@@ -1,7 +1,7 @@
 /* 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'
+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)

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

@@ -1,6 +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'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes/index.js'
 
 export const GET = GRAPHQL_PLAYGROUND_GET(config)

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

@@ -1,6 +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'
+import { GRAPHQL_POST } from '@payloadcms/next/routes/index.js'
 
 export const POST = GRAPHQL_POST(config)

app/(payload)/layout.tsx

@@ -1,6 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 import configPromise from '@payload-config'
-import { RootLayout } from '@payloadcms/next/layouts/Root/index'
+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'
 

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

@@ -1,31 +1,37 @@
 'use client'
 
-import { Page as PageType } from '@/payload-types'
-import { useLivePreview } from '../../../../../../packages/live-preview-react/src'
+import { useLivePreview } from '@payloadcms/live-preview-react'
 import React from 'react'
-import { PAYLOAD_SERVER_URL } from '@/app/_api/serverURL'
-import { Hero } from '@/app/_components/Hero'
-import { Blocks } from '@/app/_components/Blocks'
+
+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,
-    depth: 2,
   })
 
   return (
     <React.Fragment>
+      <Gutter>
+        <h1 id="page-title">{data.title}</h1>
+      </Gutter>
       <Hero {...data?.hero} />
       <Blocks
         blocks={[
           ...(data?.layout ?? []),
           {
-            blockType: 'relationships',
             blockName: 'Relationships',
-            data: data,
+            blockType: 'relationships',
+            data,
           },
         ]}
         disableTopPadding={

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

@@ -1,18 +1,20 @@
+import { notFound } from 'next/navigation.js'
 import React from 'react'
-import { notFound } from 'next/navigation'
 
-import { Page } from '../../../payload-types'
-import { fetchDocs } from '@/app/_api/fetchDocs'
-import { fetchDoc } from '@/app/_api/fetchDoc'
-import { PageClient } from './page.client'
+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>({
-      collection: 'pages',
       slug,
+      collection: 'pages',
     })
   } catch (error) {
     console.error(error)

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

@@ -1,19 +1,21 @@
 'use client'
 
-import { Post as PostType } from '@/payload-types'
-import { useLivePreview } from '../../../../../../../packages/live-preview-react/src'
+import { useLivePreview } from '@payloadcms/live-preview-react'
 import React from 'react'
-import { PAYLOAD_SERVER_URL } from '@/app/_api/serverURL'
-import { Blocks } from '@/app/_components/Blocks'
-import { PostHero } from '@/app/_heros/PostHero'
+
+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,
-    depth: 2,
   })
 
   return (
@@ -21,12 +23,11 @@ export const PostClient: React.FC<{
       <PostHero post={data} />
       <Blocks blocks={data?.layout} />
       <Blocks
-        disableTopPadding
         blocks={[
           {
-            blockType: 'relatedPosts',
             blockName: 'Related Posts',
-            relationTo: 'posts',
+            blockType: 'relatedPosts',
+            docs: data?.relatedPosts,
             introContent: [
               {
                 type: 'h4',
@@ -44,12 +45,12 @@ export const PostClient: React.FC<{
                   },
                   {
                     type: 'link',
-                    url: `/admin/collections/posts/${data?.id}`,
                     children: [
                       {
                         text: 'navigate to the admin dashboard',
                       },
                     ],
+                    url: `/admin/collections/posts/${data?.id}`,
                   },
                   {
                     text: '.',
@@ -57,9 +58,10 @@ export const PostClient: React.FC<{
                 ],
               },
             ],
-            docs: data?.relatedPosts,
+            relationTo: 'posts',
           },
         ]}
+        disableTopPadding
       />
     </React.Fragment>
   )

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

@@ -1,18 +1,19 @@
+import { notFound } from 'next/navigation.js'
 import React from 'react'
-import { notFound } from 'next/navigation'
 
-import { Post } from '../../../../payload-types'
-import { fetchDoc } from '../../../_api/fetchDoc'
-import { fetchDocs } from '../../../_api/fetchDocs'
-import { PostClient } from './page.client'
+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>({
-      collection: 'posts',
       slug,
+      collection: 'posts',
     })
   } catch (error) {
     console.error(error) // eslint-disable-line no-console

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

@@ -1,13 +1,12 @@
-import type { Config } from '../../payload-types'
-import { PAYLOAD_SERVER_URL } from './serverURL'
+import { PAYLOAD_SERVER_URL } from './serverURL.js'
 
-export const fetchDocs = async <T>(collection: keyof Config['collections']): Promise<T[]> => {
+export const fetchDocs = async <T>(collection: string): Promise<T[]> => {
   const docs: T[] = await fetch(`${PAYLOAD_SERVER_URL}/api/${collection}?depth=0&limit=100`, {
-    method: 'GET',
     cache: 'no-store',
     headers: {
       'Content-Type': 'application/json',
     },
+    method: 'GET',
   })
     ?.then((res) => res.json())
     ?.then((res) => {

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

@@ -1,10 +1,10 @@
 import React from 'react'
 
-import { CollectionArchive } from '../../_components/CollectionArchive'
-import { Gutter } from '../../_components/Gutter'
-import RichText from '../../_components/RichText'
-import { ArchiveBlockProps } from './types'
+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<
@@ -13,33 +13,33 @@ export const ArchiveBlock: React.FC<
   }
 > = (props) => {
   const {
-    introContent,
     id,
-    relationTo,
-    populateBy,
+    categories,
+    introContent,
     limit,
+    populateBy,
     populatedDocs,
     populatedDocsTotal,
-    categories,
+    relationTo,
     selectedDocs,
   } = props
 
   return (
-    <div id={`block-${id}`} className={classes.archiveBlock}>
+    <div className={classes.archiveBlock} id={`block-${id}`}>
       {introContent && (
         <Gutter className={classes.introContent}>
           <RichText content={introContent} />
         </Gutter>
       )}
       <CollectionArchive
-        populateBy={populateBy}
-        relationTo={relationTo}
-        populatedDocs={populatedDocs}
-        populatedDocsTotal={populatedDocsTotal}
         categories={categories}
         limit={limit}
-        sort="-publishedDate"
+        populateBy={populateBy}
+        populatedDocs={populatedDocs}
+        populatedDocsTotal={populatedDocsTotal}
+        relationTo={relationTo}
         selectedDocs={selectedDocs}
+        sort="-publishedDate"
       />
     </div>
   )

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

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

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

@@ -1,11 +1,11 @@
 import React from 'react'
 
-import { Page } from '../../../payload-types'
-import { Gutter } from '../../_components/Gutter'
-import { CMSLink } from '../../_components/Link'
-import RichText from '../../_components/RichText'
-import { VerticalPadding } from '../../_components/VerticalPadding'
+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' }>
@@ -14,7 +14,7 @@ export const CallToActionBlock: React.FC<
   Props & {
     id?: string
   }
-> = ({ links, richText, invertBackground }) => {
+> = ({ invertBackground, links, richText }) => {
   return (
     <Gutter>
       <VerticalPadding

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

@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react'
 
-import { Page } from '../../../payload-types'
-import { Gutter } from '../../_components/Gutter'
-import { CMSLink } from '../../_components/Link'
-import RichText from '../../_components/RichText'
+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' }>
@@ -22,10 +22,10 @@ export const ContentBlock: React.FC<
         {columns && columns.length > 0 ? (
           <Fragment>
             {columns.map((col, index) => {
-              const { enableLink, richText, link, size } = col
+              const { enableLink, link, richText, size } = col
 
               return (
-                <div key={index} className={[classes.column, classes[`column--${size}`]].join(' ')}>
+                <div className={[classes.column, classes[`column--${size}`]].join(' ')} key={index}>
                   <RichText content={richText} />
                   {enableLink && <CMSLink className={classes.link} {...link} />}
                 </div>

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

@@ -1,16 +1,17 @@
+import type { StaticImageData } from 'next/image.js'
+
 import React from 'react'
-import { StaticImageData } from 'next/image'
 
-import { Page } from '../../../payload-types'
-import { Gutter } from '../../_components/Gutter'
-import { Media } from '../../_components/Media'
-import RichText from '../../_components/RichText'
+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' }> & {
-  staticImage?: StaticImageData
   id?: string
+  staticImage?: StaticImageData
 }
 
 export const MediaBlock: React.FC<Props> = (props) => {

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

@@ -1,22 +1,22 @@
 import React from 'react'
 
-import { Post } from '../../../payload-types'
-import { Card } from '../../_components/Card'
-import { Gutter } from '../../_components/Gutter'
-import RichText from '../../_components/RichText'
+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 = {
-  blockType: 'relatedPosts'
   blockName: string
+  blockType: 'relatedPosts'
+  docs?: (Post | string)[] | null
   introContent?: any
-  docs?: (string | Post)[] | null
   relationTo: 'posts'
 }
 
 export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
-  const { introContent, docs, relationTo } = props
+  const { docs, introContent, relationTo } = props
 
   return (
     <div className={classes.relatedPosts}>
@@ -32,7 +32,6 @@ export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
 
             return (
               <div
-                key={index}
                 className={[
                   classes.column,
                   docs.length === 2 && classes['cols-half'],
@@ -40,8 +39,9 @@ export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
                 ]
                   .filter(Boolean)
                   .join(' ')}
+                key={index}
               >
-                <Card relationTo={relationTo} doc={doc} showCategories />
+                <Card doc={doc} relationTo={relationTo} showCategories />
               </div>
             )
           })}

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

@@ -1,14 +1,14 @@
 import React, { Fragment } from 'react'
 
-import { Page } from '../../../payload-types'
+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'
-import { Gutter } from '@/app/_components/Gutter'
-import RichText from '@/app/_components/RichText'
 
 export type RelationshipsBlockProps = {
-  blockType: 'relationships'
   blockName: string
+  blockType: 'relationships'
   data: Page
 }
 
@@ -29,7 +29,7 @@ export const RelationshipsBlock: React.FC<RelationshipsBlockProps> = (props) =>
           <b>Rich Text — Lexical:</b>
         </p>
         {data?.richTextLexical && (
-          <RichText serializer="lexical" content={data.richTextLexical} renderUploadFilenameOnly />
+          <RichText content={data.richTextLexical} renderUploadFilenameOnly serializer="lexical" />
         )}
         <p>
           <b>Upload:</b>

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

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

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

@@ -1,21 +1,24 @@
 import React, { Fragment } from 'react'
 
-import { Page } from '../../../payload-types.js'
-import { ArchiveBlock } from '../../_blocks/ArchiveBlock'
-import { CallToActionBlock } from '../../_blocks/CallToAction'
-import { ContentBlock } from '../../_blocks/Content'
-import { MediaBlock } from '../../_blocks/MediaBlock'
-import { RelatedPosts, type RelatedPostsProps } from '../../_blocks/RelatedPosts'
-import { toKebabCase } from '../../_utilities/toKebabCase'
-import { BackgroundColor } from '../BackgroundColor'
-import { VerticalPadding, VerticalPaddingOptions } from '../VerticalPadding'
-import { RelationshipsBlock, RelationshipsBlockProps } from '../../_blocks/Relationships'
+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 = {
-  cta: CallToActionBlock,
-  content: ContentBlock,
-  mediaBlock: MediaBlock,
   archive: ArchiveBlock,
+  content: ContentBlock,
+  cta: CallToActionBlock,
+  mediaBlock: MediaBlock,
   relatedPosts: RelatedPosts,
   relationships: RelationshipsBlock,
 }
@@ -26,7 +29,7 @@ export const Blocks: React.FC<{
   blocks?: (Block | RelatedPostsProps | RelationshipsBlockProps)[] | null
   disableTopPadding?: boolean
 }> = (props) => {
-  const { disableTopPadding, blocks } = props
+  const { blocks, disableTopPadding } = props
 
   const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
 
@@ -66,8 +69,8 @@ export const Blocks: React.FC<{
 
             if (Block) {
               return (
-                <BackgroundColor key={index} invert={blockIsInverted}>
-                  <VerticalPadding top={paddingTop} bottom={paddingBottom}>
+                <BackgroundColor invert={blockIsInverted} key={index}>
+                  <VerticalPadding bottom={paddingBottom} top={paddingTop}>
                     {/* @ts-expect-error */}
                     <Block id={toKebabCase(blockName)} {...block} />
                   </VerticalPadding>

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

@@ -1,38 +1,42 @@
 'use client'
 
-import React, { ElementType } from 'react'
-import Link from 'next/link'
+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 = {
-  label?: string
-  appearance?: 'default' | 'primary' | 'secondary' | 'none'
-  el?: 'button' | 'link' | 'a'
-  onClick?: () => void
-  href?: string
-  newTab?: boolean
+  appearance?: 'default' | 'none' | 'primary' | 'secondary'
   className?: string
-  type?: 'submit' | 'button'
   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> = ({
-  el: elFromProps = 'link',
-  label,
-  newTab,
-  href,
+  type = 'button',
   appearance,
   className: classNameFromProps,
-  onClick,
-  type = 'button',
   disabled,
+  el: elFromProps = 'link',
+  href,
   invert,
+  label,
+  newTab,
+  onClick,
 }) => {
   let el = elFromProps
 
-  const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}
+  const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
 
   const className = [
     classes.button,
@@ -53,7 +57,7 @@ export const Button: React.FC<Props> = ({
 
   if (el === 'link') {
     return (
-      <Link href={href || ''} className={className} {...newTabProps} onClick={onClick}>
+      <Link className={className} href={href || ''} {...newTabProps} onClick={onClick}>
         {content}
       </Link>
     )
@@ -63,12 +67,12 @@ export const Button: React.FC<Props> = ({
 
   return (
     <Element
-      href={href}
       className={className}
+      href={href}
       type={type}
       {...newTabProps}
-      onClick={onClick}
       disabled={disabled}
+      onClick={onClick}
     >
       {content}
     </Element>

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

@@ -1,37 +1,39 @@
+import LinkWithDefault from 'next/link.js'
 import React, { Fragment } from 'react'
-import Link from 'next/link'
 
-import { Post } from '../../../payload-types'
-import { Media } from '../Media'
+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
-  showCategories?: boolean
-  hideImagesOnMobile?: boolean
-  title?: string
-  relationTo?: 'posts'
   doc?: Post
+  hideImagesOnMobile?: boolean
   orientation?: 'horizontal' | 'vertical'
+  relationTo?: 'posts'
+  showCategories?: boolean
+  title?: string
 }> = (props) => {
   const {
+    className,
+    doc,
+    orientation = 'vertical',
     relationTo,
     showCategories,
     title: titleFromProps,
-    doc,
-    className,
-    orientation = 'vertical',
   } = props
 
-  const { slug, title, categories, meta } = doc || {}
+  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 = `/${relationTo}/${slug}`
+  const href = `/live-preview/${relationTo}/${slug}`
 
   return (
     <div
@@ -39,10 +41,10 @@ export const Card: React.FC<{
         .filter(Boolean)
         .join(' ')}
     >
-      <Link href={href} className={classes.mediaWrapper}>
+      <Link className={classes.mediaWrapper} href={href}>
         {!metaImage && <div className={classes.placeholder}>No image</div>}
         {metaImage && typeof metaImage !== 'string' && (
-          <Media imgClassName={classes.image} resource={metaImage} fill />
+          <Media fill imgClassName={classes.image} resource={metaImage} />
         )}
       </Link>
       <div className={classes.content}>
@@ -70,7 +72,7 @@ export const Card: React.FC<{
         )}
         {titleToUse && (
           <h4 className={classes.title}>
-            <Link href={href} className={classes.titleLink}>
+            <Link className={classes.titleLink} href={href}>
               {titleToUse}
             </Link>
           </h4>

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

@@ -6,19 +6,19 @@ export const Chevron: React.FC<{
 }> = ({ className, rotate }) => {
   return (
     <svg
-      width="100%"
-      height="100%"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
       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"
-        stroke="currentColor"
         fill="none"
+        stroke="currentColor"
         vectorEffect="non-scaling-stroke"
       />
     </svg>

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

@@ -1,58 +1,58 @@
 'use client'
 
-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import qs from 'qs'
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 
-import { Post } from '../../../../payload-types'
-import type { ArchiveBlockProps } from '../../../_blocks/ArchiveBlock/types'
-import { Card } from '../../Card'
-import { Gutter } from '../../Gutter'
-import { PageRange } from '../../PageRange'
-import { Pagination } from '../../Pagination'
+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'
-import { PAYLOAD_SERVER_URL } from '@/app/_api/serverURL'
 
 type Result = {
-  totalDocs: number
   docs: (Post | string)[]
-  page: number
-  totalPages: number
-  hasPrevPage: boolean
   hasNextPage: boolean
+  hasPrevPage: boolean
   nextPage: number
+  page: number
   prevPage: number
+  totalDocs: number
+  totalPages: number
 }
 
 export type Props = Omit<ArchiveBlockProps, 'blockType'> & {
   className?: string
-  showPageRange?: boolean
   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,
-    relationTo,
-    showPageRange,
-    onResultChange,
-    sort = '-createdAt',
     limit = 10,
+    onResultChange,
     populatedDocs,
     populatedDocsTotal,
-    categories: catsFromProps,
+    relationTo,
+    showPageRange,
+    sort = '-createdAt',
   } = props
 
   const [results, setResults] = useState<Result>({
-    totalDocs: typeof populatedDocsTotal === 'number' ? populatedDocsTotal : 0,
     docs: populatedDocs?.map((doc) => doc.value) || [],
-    page: 1,
-    totalPages: 1,
-    hasPrevPage: false,
     hasNextPage: false,
-    prevPage: 1,
+    hasPrevPage: false,
     nextPage: 1,
+    page: 1,
+    prevPage: 1,
+    totalDocs: typeof populatedDocsTotal === 'number' ? populatedDocsTotal : 0,
+    totalPages: 1,
   })
 
   const [isLoading, setIsLoading] = useState(false)
@@ -77,12 +77,10 @@ export const CollectionArchiveByCollection: React.FC<Props> = (props) => {
   }, [isLoading, scrollToRef, results])
 
   useEffect(() => {
-    let timer: NodeJS.Timeout
-
     // 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
-    timer = setTimeout(() => {
+    const timer = setTimeout(() => {
       if (hasHydrated) {
         setIsLoading(true)
       }
@@ -90,6 +88,9 @@ export const CollectionArchiveByCollection: React.FC<Props> = (props) => {
 
     const searchQuery = qs.stringify(
       {
+        depth: 1,
+        limit,
+        page,
         sort,
         where: {
           ...(catsFromProps && catsFromProps?.length > 0
@@ -105,9 +106,6 @@ export const CollectionArchiveByCollection: React.FC<Props> = (props) => {
               }
             : {}),
         },
-        limit,
-        page,
-        depth: 1,
       },
       { encode: false },
     )
@@ -135,7 +133,7 @@ export const CollectionArchiveByCollection: React.FC<Props> = (props) => {
       }
     }
 
-    makeRequest()
+    void makeRequest()
 
     return () => {
       if (timer) clearTimeout(timer)
@@ -144,17 +142,17 @@ export const CollectionArchiveByCollection: React.FC<Props> = (props) => {
 
   return (
     <div className={[classes.collectionArchive, className].filter(Boolean).join(' ')}>
-      <div ref={scrollRef} className={classes.scrollRef} />
+      <div className={classes.scrollRef} ref={scrollRef} />
       {!isLoading && error && <Gutter>{error}</Gutter>}
       <Fragment>
         {showPageRange !== false && (
           <Gutter>
             <div className={classes.pageRange}>
               <PageRange
-                totalDocs={results.totalDocs}
-                currentPage={results.page}
                 collection={relationTo}
+                currentPage={results.page}
                 limit={limit}
+                totalDocs={results.totalDocs}
               />
             </div>
           </Gutter>
@@ -167,8 +165,8 @@ export const CollectionArchiveByCollection: React.FC<Props> = (props) => {
               }
 
               return (
-                <div key={index} className={classes.column}>
-                  <Card relationTo="posts" doc={result} showCategories />
+                <div className={classes.column} key={index}>
+                  <Card doc={result} relationTo="posts" showCategories />
                 </div>
               )
             })}
@@ -176,9 +174,9 @@ export const CollectionArchiveByCollection: React.FC<Props> = (props) => {
           {results.totalPages > 1 && (
             <Pagination
               className={classes.pagination}
+              onClick={setPage}
               page={results.page}
               totalPages={results.totalPages}
-              onClick={setPage}
             />
           )}
         </Gutter>

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

@@ -2,10 +2,10 @@
 
 import React, { Fragment } from 'react'
 
-import type { ArchiveBlockProps } from '../../../_blocks/ArchiveBlock/types'
-import { Card } from '../../Card'
-import { Gutter } from '../../Gutter'
+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 = {
@@ -29,8 +29,8 @@ export const CollectionArchiveBySelection: React.FC<Props> = (props) => {
               }
 
               return (
-                <div key={index} className={classes.column}>
-                  <Card relationTo="posts" doc={result} showCategories />
+                <div className={classes.column} key={index}>
+                  <Card doc={result} relationTo="posts" showCategories />
                 </div>
               )
             })}

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

@@ -1,8 +1,9 @@
 import React from 'react'
 
-import type { ArchiveBlockProps } from '../../_blocks/ArchiveBlock/types'
-import { CollectionArchiveBySelection } from './PopulateBySelection'
-import { CollectionArchiveByCollection } from './PopulateByCollection'
+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
@@ -13,7 +14,7 @@ export const CollectionArchive: React.FC<Props> = (props) => {
   const { className, populateBy, selectedDocs } = props
 
   if (populateBy === 'selection') {
-    return <CollectionArchiveBySelection selectedDocs={selectedDocs} className={className} />
+    return <CollectionArchiveBySelection className={className} selectedDocs={selectedDocs} />
   }
 
   if (populateBy === 'collection') {

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

@@ -1,12 +1,13 @@
+import LinkWithDefault from 'next/link.js'
 import React from 'react'
-import Link from 'next/link'
-
-import { fetchFooter } from '../../_api/fetchFooter'
-import { Gutter } from '../Gutter'
-import { CMSLink } from '../Link'
 
+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()
 
@@ -18,8 +19,8 @@ export async function Footer() {
         <Link href="/">
           <picture>
             <img
-              className={classes.logo}
               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>

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

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

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

@@ -2,9 +2,9 @@
 
 import React from 'react'
 
-import { Header as HeaderType } from '../../../../payload-types'
-import { CMSLink } from '../../Link'
+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 }) => {

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

@@ -1,15 +1,12 @@
-{
-  /* eslint-disable @next/next/no-img-element */
-}
-
+import LinkWithDefault from 'next/link.js'
 import React from 'react'
-import Link from 'next/link'
-
-import { Gutter } from '../Gutter'
-import { HeaderNav } from './Nav'
 
+import { fetchHeader } from '../../_api/fetchHeader.js'
+import { Gutter } from '../Gutter/index.js'
+import { HeaderNav } from './Nav/index.js'
 import classes from './index.module.scss'
-import { fetchHeader } from '@/app/_api/fetchHeader'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
 
 export async function Header() {
   const header = await fetchHeader()
@@ -17,10 +14,10 @@ export async function Header() {
   return (
     <header className={classes.header}>
       <Gutter className={classes.wrap}>
-        <Link href="/">
+        <Link href="/live-preview">
           <img
-            className={classes.logo}
             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>

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

@@ -1,8 +1,9 @@
 import React from 'react'
 
-import { Page } from '../../../payload-types'
-import { HighImpactHero } from '../../_heros/HighImpact'
-import { LowImpactHero } from '../../_heros/LowImpact'
+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,

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

@@ -1,34 +1,38 @@
+import LinkWithDefault from 'next/link.js'
 import React from 'react'
-import Link from 'next/link'
 
-import { Page } from '../../../payload-types'
-import { Button, Props as ButtonProps } from '../Button'
+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 = {
-  type?: 'custom' | 'reference'
-  url?: string
-  newTab?: boolean
-  reference?: {
-    value: string | Page
-    relationTo: 'pages' | 'posts'
-  }
-  label?: string
   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,
-  url,
-  newTab,
-  reference,
-  label,
   appearance,
   children,
   className,
   invert,
+  label,
+  newTab,
+  reference,
+  url,
 }) => {
   const href =
     type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
@@ -38,11 +42,11 @@ export const CMSLink: React.FC<CMSLinkType> = ({
   if (!href) return null
 
   if (!appearance) {
-    const newTabProps = newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}
+    const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
 
     if (href || url) {
       return (
-        <Link {...newTabProps} href={href || url || ''} className={className}>
+        <Link {...newTabProps} className={className} href={href || url || ''}>
           {label && label}
           {children && children}
         </Link>
@@ -52,12 +56,12 @@ export const CMSLink: React.FC<CMSLinkType> = ({
 
   return (
     <Button
-      className={className}
-      newTab={newTab}
-      href={href}
       appearance={appearance}
-      label={label}
+      className={className}
+      href={href}
       invert={invert}
+      label={label}
+      newTab={newTab}
     />
   )
 }

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

@@ -1,26 +1,31 @@
 'use client'
 
+import type { StaticImageData } from 'next/image.js'
+
+import NextImageWithDefault from 'next/image.js'
 import React from 'react'
-import NextImage, { StaticImageData } from 'next/image'
 
-import cssVariables from '../../../cssVariables'
-import { Props as MediaProps } from '../types'
+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'
-import { PAYLOAD_SERVER_URL } from '@/app/_api/serverURL'
 
 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,
-    resource,
     priority,
-    fill,
+    resource,
     src: srcFromProps,
-    alt: altFromProps,
   } = props
 
   const [isLoading, setIsLoading] = React.useState(true)
@@ -32,10 +37,10 @@ export const Image: React.FC<MediaProps> = (props) => {
 
   if (!src && resource && typeof resource !== 'string') {
     const {
-      width: fullWidth,
-      height: fullHeight,
-      filename: fullFilename,
       alt: altFromResource,
+      filename: fullFilename,
+      height: fullHeight,
+      width: fullWidth,
     } = resource
 
     width = fullWidth || undefined
@@ -44,7 +49,7 @@ export const Image: React.FC<MediaProps> = (props) => {
 
     const filename = fullFilename
 
-    src = `${PAYLOAD_SERVER_URL}/media/${filename}`
+    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
@@ -54,11 +59,12 @@ export const Image: React.FC<MediaProps> = (props) => {
 
   return (
     <NextImage
+      alt={alt || ''}
       className={[isLoading && classes.placeholder, classes.image, imgClassName]
         .filter(Boolean)
         .join(' ')}
-      src={src}
-      alt={alt || ''}
+      fill={fill}
+      height={!fill ? height : undefined}
       onClick={onClick}
       onLoad={() => {
         setIsLoading(false)
@@ -66,11 +72,10 @@ export const Image: React.FC<MediaProps> = (props) => {
           onLoadFromProps()
         }
       }}
-      fill={fill}
-      width={!fill ? width : undefined}
-      height={!fill ? height : undefined}
-      sizes={sizes}
       priority={priority}
+      sizes={sizes}
+      src={src}
+      width={!fill ? width : undefined}
     />
   )
 }

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

@@ -2,13 +2,13 @@
 
 import React, { useEffect, useRef } from 'react'
 
-import { Props as MediaProps } from '../types'
+import type { Props as MediaProps } from '../types.js'
 
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
 import classes from './index.module.scss'
-import { PAYLOAD_SERVER_URL } from '@/app/_api/serverURL'
 
 export const Video: React.FC<MediaProps> = (props) => {
-  const { videoClassName, resource, onClick } = props
+  const { onClick, resource, videoClassName } = props
 
   const videoRef = useRef<HTMLVideoElement>(null)
   // const [showFallback] = useState<boolean>()
@@ -28,13 +28,13 @@ export const Video: React.FC<MediaProps> = (props) => {
 
     return (
       <video
-        playsInline
         autoPlay
-        muted
-        loop
-        controls={false}
         className={[classes.video, videoClassName].filter(Boolean).join(' ')}
+        controls={false}
+        loop
+        muted
         onClick={onClick}
+        playsInline
         ref={videoRef}
       >
         <source src={`${PAYLOAD_SERVER_URL}/media/${filename}`} />

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

@@ -1,11 +1,14 @@
-import React, { ElementType, Fragment } from 'react'
+import type { ElementType } from 'react'
 
-import { Image } from './Image'
-import { Props } from './types'
-import { Video } from './Video'
+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, resource, htmlElement = 'div' } = props
+  const { className, htmlElement = 'div', resource } = props
 
   const isVideo = typeof resource !== 'string' && resource?.mimeType?.includes('video')
   const Tag = (htmlElement as ElementType) || Fragment

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

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

@@ -3,42 +3,42 @@ import React from 'react'
 import classes from './index.module.scss'
 
 const defaultLabels = {
-  singular: 'Doc',
   plural: 'Docs',
+  singular: 'Doc',
 }
 
 const defaultCollectionLabels = {
   products: {
-    singular: 'Product',
     plural: 'Products',
+    singular: 'Product',
   },
 }
 
 export const PageRange: React.FC<{
   className?: string
-  totalDocs?: number
-  currentPage?: number
   collection?: string
-  limit?: number
   collectionLabels?: {
-    singular?: string
     plural?: string
+    singular?: string
   }
+  currentPage?: number
+  limit?: number
+  totalDocs?: number
 }> = (props) => {
   const {
     className,
-    totalDocs,
-    currentPage,
     collection,
-    limit,
     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 { singular, plural } =
+  const { plural, singular } =
     collectionLabelsFromProps || defaultCollectionLabels[collection || ''] || defaultLabels || {}
 
   return (

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

@@ -1,30 +1,29 @@
 import React from 'react'
 
-import { Chevron } from '../Chevron'
-
+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
-  onClick: (page: number) => void
-  className?: string
 }> = (props) => {
-  const { page, totalPages, onClick, className } = 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
-        type="button"
         className={classes.button}
         disabled={!hasPrevPage}
         onClick={() => {
           onClick(page - 1)
         }}
+        type="button"
       >
-        <Chevron rotate={90} className={classes.icon} />
+        <Chevron className={classes.icon} rotate={90} />
       </button>
       <div className={classes.pageRange}>
         <span className={classes.pageRangeLabel}>
@@ -32,14 +31,14 @@ export const Pagination: React.FC<{
         </span>
       </div>
       <button
-        type="button"
         className={classes.button}
         disabled={!hasNextPage}
         onClick={() => {
           onClick(page + 1)
         }}
+        type="button"
       >
-        <Chevron rotate={-90} className={classes.icon} />
+        <Chevron className={classes.icon} rotate={-90} />
       </button>
     </div>
   )

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

@@ -1,9 +1,8 @@
 import React from 'react'
 
-import serializeSlate from './serializeSlate'
-import serializeLexical from './serializeLexical'
-
 import classes from './index.module.scss'
+import serializeLexical from './serializeLexical.js'
+import serializeSlate from './serializeSlate.js'
 
 const RichText: React.FC<{
   className?: string

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

@@ -5,17 +5,17 @@ import classes from './index.module.scss'
 export type VerticalPaddingOptions = 'large' | 'medium' | 'none'
 
 type Props = {
-  top?: VerticalPaddingOptions
   bottom?: VerticalPaddingOptions
   children: React.ReactNode
   className?: string
+  top?: VerticalPaddingOptions
 }
 
 export const VerticalPadding: React.FC<Props> = ({
-  top = 'medium',
   bottom = 'medium',
-  className,
   children,
+  className,
+  top = 'medium',
 }) => {
   return (
     <div

app/live-preview/_css/app.scss

@@ -92,6 +92,10 @@ p {
   }
 }
 
+#page-title {
+  @extend %h6;
+}
+
 ul,
 ol {
   padding-left: var(--base);

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

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

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

@@ -1,10 +1,10 @@
 import React from 'react'
 
-import { Page } from '../../../payload-types'
-import { Gutter } from '../../_components/Gutter'
-import RichText from '../../_components/RichText'
-import { VerticalPadding } from '../../_components/VerticalPadding'
+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 }) => {

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

@@ -1,25 +1,27 @@
+import LinkWithDefault from 'next/link.js'
 import React, { Fragment } from 'react'
-import Link from 'next/link'
 
-import { Post } from '../../../payload-types'
-import { Gutter } from '../../_components/Gutter'
-import { Media } from '../../_components/Media'
-import RichText from '../../_components/RichText'
-import { formatDateTime } from '../../_utilities/formatDateTime'
+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'
-import { PAYLOAD_SERVER_URL } from '@/app/_api/serverURL'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
 
 export const PostHero: React.FC<{
   post: Post
 }> = ({ post }) => {
-  const { id, meta: { image: metaImage, description } = {}, createdAt } = post
+  const { id, createdAt, meta: { description, image: metaImage } = {} } = post
 
   return (
     <Fragment>
       <Gutter className={classes.postHero}>
         <div className={classes.content}>
-          <RichText content={post?.hero?.richText} className={classes.richText} />
+          <RichText className={classes.richText} content={post?.hero?.richText} />
           <p className={classes.meta}>
             {createdAt && (
               <Fragment>
@@ -34,7 +36,7 @@ export const PostHero: React.FC<{
               <Link href={`${PAYLOAD_SERVER_URL}/admin/collections/posts/${id}`}>
                 navigate to the admin dashboard
               </Link>
-              {'.'}
+              .
             </p>
           </div>
         </div>
@@ -42,11 +44,11 @@ export const PostHero: React.FC<{
           <div className={classes.mediaWrapper}>
             {!metaImage && <div className={classes.placeholder}>No image</div>}
             {metaImage && typeof metaImage !== 'string' && (
-              <Media imgClassName={classes.image} resource={metaImage} fill />
+              <Media fill imgClassName={classes.image} resource={metaImage} />
             )}
           </div>
           {metaImage && typeof metaImage !== 'string' && metaImage?.caption && (
-            <RichText content={metaImage.caption} className={classes.caption} />
+            <RichText className={classes.caption} content={metaImage.caption} />
           )}
         </div>
       </Gutter>

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

@@ -1,11 +1,14 @@
-import { Footer } from './_components/Footer'
-import { Header } from './_components/Header'
-import './_css/app.scss'
 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 = {
-  title: 'Payload Live Preview',
   description: 'Payload Live Preview',
+  title: 'Payload Live Preview',
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

app/live-preview/not-found.tsx

@@ -1,13 +1,14 @@
 'use client'
 
 import React from 'react'
-import { Gutter } from './_components/Gutter'
-import { VerticalPadding } from './_components/VerticalPadding'
+
+import { Gutter } from './_components/Gutter/index.js'
+import { VerticalPadding } from './_components/VerticalPadding/index.js'
 
 export default function NotFound() {
   return (
     <main>
-      <VerticalPadding top="none" bottom="medium">
+      <VerticalPadding bottom="medium" top="none">
         <Gutter>
           <h1>404</h1>
           <p>This page could not be found.</p>

app/live-preview/page.tsx

@@ -0,0 +1,3 @@
+import PageTemplate from './(pages)/[slug]/page.js'
+
+export default PageTemplate

docs/admin/bundlers.mdx

@@ -33,7 +33,7 @@ import { webpackBundler } from '@payloadcms/bundler-webpack'
 export default buildConfig({
   // highlight-start
   admin: {
-    bundler: webpackBundler() // or viteBundler()
+    bundler: webpackBundler(), // or viteBundler()
   },
   // highlight-end
 })
@@ -48,7 +48,7 @@ Since the bundled file is sent to the browser, it can't include any server-only
 <Banner type="warning">
   <strong>Using environment variables in the admin UI</strong>
   <br />
-  Bundles should not contain sensitive information. By default, Payload
-  excludes env variables from the bundle. If you need to use env variables in your payload config,
-  you need to prefix them with `PAYLOAD_PUBLIC_` to make them available to the client-side code.
+  Bundles should not contain sensitive information. By default, Payload excludes env variables from
+  the bundle. If you need to use env variables in your payload config, you need to prefix them with
+  `PAYLOAD_PUBLIC_` to make them available to the client-side code.
 </Banner>