feat: payload admin bar (#3684)

Imports https://github.com/payloadcms/payload-admin-bar into the Payload monorepo. This package will now be regularly maintained directly alongside all Payload packages and now includes its own test suite. A few changes minor have been made between v1.0.7 and latest: 1. The package name has changed from `payload-admin-bar` to `@payloadcms/admin-bar`. ```diff - import { PayloadAdminBar } from 'payload-admin-bar' + import { PayloadAdminBar } from '@payloadcms/admin-bar' ``` 2. The `collection` prop has been renamed to `collectionSlug` 3. The `authCollection` prop has been renamed to `authCollectionSlug` Here's a screenshot of the admin bar in use within the Website Template: <img width="1057" alt="Screenshot 2025-03-05 at 1 20 04 PM" src="https://github.com/user-attachments/assets/2597a8fd-da75-4b2f-8979-4fc8132999e8" /> --------- Co-authored-by: Kalon Robson <kalon.robson@outlook.com>
2025-03-05 14:14:35 -05:00
parent 5cc0e74471
commit 9724067242
44 changed files with 1478 additions and 5 deletions
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -275,6 +275,7 @@ jobs:
          - admin__e2e__general
          - admin__e2e__list-view
          - admin__e2e__document-view
+          - admin-bar
          - admin-root
          - auth
          - auth-basic
--- a/.gitignore
+++ b/.gitignore
@@ -306,6 +306,8 @@ $RECYCLE.BIN/
 /build
 .swc
 app/(payload)/admin/importMap.js
+test/admin-bar/app/(payload)/admin/importMap.js
+/test/admin-bar/app/(payload)/admin/importMap.js
 test/live-preview/app/(payload)/admin/importMap.js
 /test/live-preview/app/(payload)/admin/importMap.js
 test/admin-root/app/(payload)/admin/importMap.js
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
  "scripts": {
    "bf": "pnpm run build:force",
    "build": "pnpm run build:core",
+    "build:admin-bar": "turbo build --filter \"@payloadcms/admin-bar\"",
    "build:all": "turbo build",
    "build:app": "next build",
    "build:app:analyze": "cross-env ANALYZE=true next build",
--- a/packages/admin-bar/.prettierignore
+++ b/packages/admin-bar/.prettierignore
@@ -0,0 +1,10 @@
+.tmp
+**/.git
+**/.hg
+**/.pnp.*
+**/.svn
+**/.yarn/**
+**/build
+**/dist/**
+**/node_modules
+**/temp
--- a/packages/admin-bar/.swcrc
+++ b/packages/admin-bar/.swcrc
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": true,
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
+    }
+  },
+  "module": {
+    "type": "es6"
+  }
+}
--- a/packages/admin-bar/LICENSE.md
+++ b/packages/admin-bar/LICENSE.md
@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2018-2025 Payload CMS, Inc. <info@payloadcms.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/packages/admin-bar/README.md
+++ b/packages/admin-bar/README.md
@@ -0,0 +1,119 @@
+# Payload Admin Bar
+
+An admin bar for React apps using [Payload](https://github.com/payloadcms/payload).
+
+### Installation
+
+```bash
+pnpm i @payloadcms/admin-bar
+```
+
+### Basic Usage
+
+```jsx
+import { PayloadAdminBar } from '@payloadcms/admin-bar'
+
+export const App = () => {
+  return <PayloadAdminBar cmsURL="https://cms.website.com" collection="pages" id="12345" />
+}
+```
+
+Checks for authentication with Payload CMS by hitting the [`/me`](https://payloadcms.com/docs/authentication/operations#me) route. If authenticated, renders an admin bar with simple controls to do the following:
+
+- Navigate to the admin dashboard
+- Navigate to the currently logged-in user's account
+- Edit the current collection
+- Create a new collection of the same type
+- Logout
+- Indicate and exit preview mode
+
+The admin bar ships with very little style and is fully customizable.
+
+### Dynamic props
+
+With client-side routing, we need to update the admin bar with a new collection type and document id on each route change. This will depend on your app's specific setup, but here are a some common examples:
+
+#### NextJS
+
+For NextJS apps using dynamic-routes, use `getStaticProps`:
+
+```ts
+export const getStaticProps = async ({ params: { slug } }) => {
+  const props = {}
+
+  const pageReq = await fetch(
+    `https://cms.website.com/api/pages?where[slug][equals]=${slug}&depth=1`,
+  )
+  const pageData = await pageReq.json()
+
+  if (pageReq.ok) {
+    const { docs } = pageData
+    const [doc] = docs
+
+    props = {
+      ...doc,
+      collection: 'pages',
+      collectionLabels: {
+        singular: 'page',
+        plural: 'pages',
+      },
+    }
+  }
+
+  return props
+}
+```
+
+Now your app can forward these props onto the admin bar. Something like this:
+
+```ts
+import { PayloadAdminBar } from '@payloadcms/admin-bar';
+
+export const App = (appProps) => {
+  const {
+    pageProps: {
+      collection,
+      collectionLabels,
+      id
+    }
+  } = appProps;
+
+  return (
+    <PayloadAdminBar
+      {...{
+        cmsURL: 'https://cms.website.com',
+        collection,
+        collectionLabels,
+        id
+      }}
+    />
+  )
+}
+```
+
+### Props
+
+| Property           | Type                                                                                                                     | Required | Default                 | Description                                                                                                                                                |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------ | -------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| cmsURL             | `string`                                                                                                                 | true     | `http://localhost:8000` | `serverURL` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options)                                                |
+| adminPath          | `string`                                                                                                                 | false    | /admin                  | `routes` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options)                                                   |
+| apiPath            | `string`                                                                                                                 | false    | /api                    | `routes` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options)                                                   |
+| authCollectionSlug | `string`                                                                                                                 | false    | 'users'                 | Slug of your [auth collection](https://payloadcms.com/docs/configuration/collections)                                                                      |
+| collectionSlug     | `string`                                                                                                                 | true     | undefined               | Slug of your [collection](https://payloadcms.com/docs/configuration/collections)                                                                           |
+| collectionLabels   | `{ singular?: string, plural?: string }`                                                                                 | false    | undefined               | Labels of your [collection](https://payloadcms.com/docs/configuration/collections)                                                                         |
+| id                 | `string`                                                                                                                 | true     | undefined               | id of the document                                                                                                                                         |
+| logo               | `ReactElement`                                                                                                           | false    | undefined               | Custom logo                                                                                                                                                |
+| classNames         | `{ logo?: string, user?: string, controls?: string, create?: string, logout?: string, edit?: string, preview?: string }` | false    | undefined               | Custom class names, one for each rendered element                                                                                                          |
+| logoProps          | `{[key: string]?: unknown}`                                                                                              | false    | undefined               | Custom props                                                                                                                                               |
+| userProps          | `{[key: string]?: unknown}`                                                                                              | false    | undefined               | Custom props                                                                                                                                               |
+| divProps           | `{[key: string]?: unknown}`                                                                                              | false    | undefined               | Custom props                                                                                                                                               |
+| createProps        | `{[key: string]?: unknown}`                                                                                              | false    | undefined               | Custom props                                                                                                                                               |
+| logoutProps        | `{[key: string]?: unknown}`                                                                                              | false    | undefined               | Custom props                                                                                                                                               |
+| editProps          | `{[key: string]?: unknown}`                                                                                              | false    | undefined               | Custom props                                                                                                                                               |
+| previewProps       | `{[key: string]?: unknown}`                                                                                              | false    | undefined               | Custom props                                                                                                                                               |
+| style              | `CSSProperties`                                                                                                          | false    | undefined               | Custom inline style                                                                                                                                        |
+| unstyled           | `boolean`                                                                                                                | false    | undefined               | If true, renders no inline style                                                                                                                           |
+| onAuthChange       | `(user: PayloadMeUser) => void`                                                                                          | false    | undefined               | Fired on each auth change                                                                                                                                  |
+| devMode            | `boolean`                                                                                                                | false    | undefined               | If true, fakes authentication (useful when dealing with [SameSite cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite)) |
+| preview            | `boolean`                                                                                                                | false    | undefined               | If true, renders an exit button with your `onPreviewExit` handler)                                                                                         |
+| onPreviewExit      | `function`                                                                                                               | false    | undefined               | Callback for the preview button `onClick` event)                                                                                                           |
--- a/packages/admin-bar/eslint.config.js
+++ b/packages/admin-bar/eslint.config.js
@@ -0,0 +1,18 @@
+import { rootEslintConfig, rootParserOptions } from '../../eslint.config.js'
+
+/** @typedef {import('eslint').Linter.Config} Config */
+
+/** @type {Config[]} */
+export const index = [
+  ...rootEslintConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        ...rootParserOptions,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+]
+
+export default index
--- a/packages/admin-bar/package.json
+++ b/packages/admin-bar/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "@payloadcms/admin-bar",
+  "version": "1.0.7",
+  "description": "An admin bar for React apps using Payload",
+  "homepage": "https://payloadcms.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/payloadcms/payload.git",
+    "directory": "packages/admin-bar"
+  },
+  "license": "MIT",
+  "author": "Payload <dev@payloadcms.com> (https://payloadcms.com)",
+  "maintainers": [
+    {
+      "name": "Payload",
+      "email": "info@payloadcms.com",
+      "url": "https://payloadcms.com"
+    }
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm copyfiles && pnpm build:types && pnpm build:swc",
+    "build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "clean": "rimraf -g {dist,*.tsbuildinfo}",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "prepublishOnly": "pnpm clean && pnpm turbo build"
+  },
+  "devDependencies": {
+    "@payloadcms/eslint-config": "workspace:*",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "payload": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "main": "./dist/index.js",
+    "registry": "https://registry.npmjs.org/",
+    "types": "./dist/index.d.ts"
+  }
+}
--- a/packages/admin-bar/src/AdminBar.tsx
+++ b/packages/admin-bar/src/AdminBar.tsx
@@ -0,0 +1,349 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+
+const dummyUser = {
+  id: '12345',
+  email: 'dev@email.com',
+}
+
+import type { PayloadAdminBarProps, PayloadMeUser } from './types.js'
+
+export const PayloadAdminBar: React.FC<PayloadAdminBarProps> = (props) => {
+  const {
+    id: docID,
+    adminPath = '/admin',
+    apiPath = '/api',
+    authCollectionSlug = 'users',
+    className,
+    classNames,
+    cmsURL = 'http://localhost:8000',
+    collectionLabels,
+    collectionSlug,
+    createProps,
+    devMode,
+    divProps,
+    editProps,
+    logo,
+    logoProps,
+    logoutProps,
+    onAuthChange,
+    onPreviewExit,
+    preview,
+    previewProps,
+    style,
+    unstyled,
+    userProps,
+  } = props
+
+  const [user, setUser] = useState<PayloadMeUser>()
+
+  useEffect(() => {
+    const fetchMe = async () => {
+      try {
+        const meRequest = await fetch(`${cmsURL}${apiPath}/${authCollectionSlug}/me`, {
+          credentials: 'include',
+          method: 'get',
+        })
+        const meResponse = await meRequest.json()
+        const { user } = meResponse
+
+        if (user) {
+          setUser(user)
+        } else {
+          if (devMode !== true) {
+            setUser(null)
+          } else {
+            setUser(dummyUser)
+          }
+        }
+      } catch (err) {
+        console.warn(err)
+        if (devMode === true) {
+          setUser(dummyUser)
+        }
+      }
+    }
+
+    void fetchMe()
+  }, [cmsURL, adminPath, apiPath, devMode])
+
+  useEffect(() => {
+    if (typeof onAuthChange === 'function') {
+      onAuthChange(user)
+    }
+  }, [user, onAuthChange])
+
+  if (user) {
+    const { id: userID, email } = user
+
+    return (
+      <div
+        className={className}
+        id="payload-admin-bar"
+        style={{
+          ...(unstyled !== true
+            ? {
+                alignItems: 'center',
+                backgroundColor: '#222',
+                boxSizing: 'border-box',
+                color: '#fff',
+                display: 'flex',
+                fontFamily:
+                  '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif',
+                fontSize: 'small',
+                left: 0,
+                minWidth: '0',
+                padding: '0.5rem',
+                position: 'fixed',
+                top: 0,
+                width: '100%',
+                zIndex: 99999,
+              }
+            : {}),
+          ...style,
+        }}
+      >
+        <a
+          className={classNames?.logo}
+          href={`${cmsURL}${adminPath}`}
+          {...logoProps}
+          style={{
+            ...(unstyled !== true
+              ? {
+                  alignItems: 'center',
+                  color: 'inherit',
+                  display: 'flex',
+                  flexShrink: 0,
+                  height: '20px',
+                  marginRight: '10px',
+                  textDecoration: 'none',
+                  ...(logoProps?.style
+                    ? {
+                        ...logoProps.style,
+                      }
+                    : {}),
+                }
+              : {}),
+          }}
+        >
+          {logo || 'Payload CMS'}
+        </a>
+        <a
+          className={classNames?.user}
+          href={`${cmsURL}${adminPath}/collections/${authCollectionSlug}/${userID}`}
+          rel="noopener noreferrer"
+          target="_blank"
+          {...userProps}
+          style={{
+            ...(unstyled !== true
+              ? {
+                  color: 'inherit',
+                  display: 'block',
+                  marginRight: '10px',
+                  minWidth: '50px',
+                  overflow: 'hidden',
+                  textDecoration: 'none',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  ...(userProps?.style
+                    ? {
+                        ...userProps.style,
+                      }
+                    : {}),
+                }
+              : {}),
+          }}
+        >
+          <span
+            style={{
+              ...(unstyled !== true
+                ? {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }
+                : {}),
+            }}
+          >
+            {email || 'Profile'}
+          </span>
+        </a>
+        <div
+          className={classNames?.controls}
+          {...divProps}
+          style={{
+            ...(unstyled !== true
+              ? {
+                  alignItems: 'center',
+                  display: 'flex',
+                  flexGrow: 1,
+                  flexShrink: 1,
+                  justifyContent: 'flex-end',
+                  marginRight: '10px',
+                  ...(divProps?.style
+                    ? {
+                        ...divProps.style,
+                      }
+                    : {}),
+                }
+              : {}),
+          }}
+        >
+          {collectionSlug && docID && (
+            <a
+              className={classNames?.edit}
+              href={`${cmsURL}${adminPath}/collections/${collectionSlug}/${docID}`}
+              rel="noopener noreferrer"
+              target="_blank"
+              {...editProps}
+              style={{
+                display: 'block',
+                ...(unstyled !== true
+                  ? {
+                      color: 'inherit',
+                      flexShrink: 1,
+                      marginRight: '10px',
+                      overflow: 'hidden',
+                      textDecoration: 'none',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      ...(editProps?.style
+                        ? {
+                            ...editProps.style,
+                          }
+                        : {}),
+                    }
+                  : {}),
+              }}
+            >
+              <span
+                style={{
+                  ...(unstyled !== true
+                    ? {
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }
+                    : {}),
+                }}
+              >
+                {`Edit ${collectionLabels?.singular || 'page'}`}
+              </span>
+            </a>
+          )}
+          {collectionSlug && (
+            <a
+              className={classNames?.create}
+              href={`${cmsURL}${adminPath}/collections/${collectionSlug}/create`}
+              rel="noopener noreferrer"
+              target="_blank"
+              {...createProps}
+              style={{
+                ...(unstyled !== true
+                  ? {
+                      color: 'inherit',
+                      display: 'block',
+                      flexShrink: 1,
+                      overflow: 'hidden',
+                      textDecoration: 'none',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      ...(createProps?.style
+                        ? {
+                            ...createProps.style,
+                          }
+                        : {}),
+                    }
+                  : {}),
+              }}
+            >
+              <span
+                style={{
+                  ...(unstyled !== true
+                    ? {
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }
+                    : {}),
+                }}
+              >
+                {`New ${collectionLabels?.singular || 'page'}`}
+              </span>
+            </a>
+          )}
+          {preview && (
+            <button
+              className={classNames?.preview}
+              onClick={onPreviewExit}
+              {...previewProps}
+              style={{
+                ...(unstyled !== true
+                  ? {
+                      background: 'none',
+                      border: 'none',
+                      color: 'inherit',
+                      cursor: 'pointer',
+                      fontFamily: 'inherit',
+                      fontSize: 'inherit',
+                      marginLeft: '10px',
+                      padding: 0,
+                      ...(previewProps?.style
+                        ? {
+                            ...previewProps.style,
+                          }
+                        : {}),
+                    }
+                  : {}),
+              }}
+              type="button"
+            >
+              Exit preview mode
+            </button>
+          )}
+        </div>
+        <a
+          className={classNames?.logout}
+          href={`${cmsURL}${adminPath}/logout`}
+          rel="noopener noreferrer"
+          target="_blank"
+          {...logoutProps}
+          style={{
+            ...(unstyled !== true
+              ? {
+                  color: 'inherit',
+                  display: 'block',
+                  flexShrink: 1,
+                  overflow: 'hidden',
+                  textDecoration: 'none',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  ...(logoutProps?.style
+                    ? {
+                        ...logoutProps.style,
+                      }
+                    : {}),
+                }
+              : {}),
+          }}
+        >
+          <span
+            style={{
+              ...(unstyled !== true
+                ? {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }
+                : {}),
+            }}
+          >
+            Logout
+          </span>
+        </a>
+      </div>
+    )
+  }
+
+  return null
+}
--- a/packages/admin-bar/src/index.ts
+++ b/packages/admin-bar/src/index.ts
@@ -0,0 +1,2 @@
+export { PayloadAdminBar } from './AdminBar.js'
+export type { PayloadAdminBarProps, PayloadMeUser } from './types.js'
--- a/packages/admin-bar/src/types.ts
+++ b/packages/admin-bar/src/types.ts
@@ -0,0 +1,67 @@
+import type { CSSProperties, ReactElement } from 'react'
+
+export type PayloadMeUser =
+  | {
+      email: string
+      id: string
+    }
+  | null
+  | undefined
+
+export type PayloadAdminBarProps = {
+  adminPath?: string
+  apiPath?: string
+  authCollectionSlug?: string
+  className?: string
+  classNames?: {
+    controls?: string
+    create?: string
+    edit?: string
+    logo?: string
+    logout?: string
+    preview?: string
+    user?: string
+  }
+  cmsURL?: string
+  collectionLabels?: {
+    plural?: string
+    singular?: string
+  }
+  collectionSlug?: string
+  createProps?: {
+    [key: string]: unknown
+    style?: CSSProperties
+  }
+  devMode?: boolean
+  divProps?: {
+    [key: string]: unknown
+    style?: CSSProperties
+  }
+  editProps?: {
+    [key: string]: unknown
+    style?: CSSProperties
+  }
+  id?: string
+  logo?: ReactElement
+  logoProps?: {
+    [key: string]: unknown
+    style?: CSSProperties
+  }
+  logoutProps?: {
+    [key: string]: unknown
+    style?: CSSProperties
+  }
+  onAuthChange?: (user: PayloadMeUser) => void
+  onPreviewExit?: () => void
+  preview?: boolean
+  previewProps?: {
+    [key: string]: unknown
+    style?: CSSProperties
+  }
+  style?: CSSProperties
+  unstyled?: boolean
+  userProps?: {
+    [key: string]: unknown
+    style?: CSSProperties
+  }
+}
--- a/packages/admin-bar/tsconfig.json
+++ b/packages/admin-bar/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    /* TODO: remove the following lines */
+    "strict": false,
+    "noUncheckedIndexedAccess": false,
+  },
+  "references": [{ "path": "../payload" }]
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,6 +191,28 @@ importers:
        specifier: 5.7.3
        version: 5.7.3

+  packages/admin-bar:
+    dependencies:
+      react:
+        specifier: 19.0.0
+        version: 19.0.0
+      react-dom:
+        specifier: 19.0.0
+        version: 19.0.0(react@19.0.0)
+    devDependencies:
+      '@payloadcms/eslint-config':
+        specifier: workspace:*
+        version: link:../eslint-config
+      '@types/react':
+        specifier: 19.0.10
+        version: 19.0.10
+      '@types/react-dom':
+        specifier: 19.0.4
+        version: 19.0.4(@types/react@19.0.10)
+      payload:
+        specifier: workspace:*
+        version: link:../payload
+
  packages/create-payload-app:
    dependencies:
      '@clack/prompts':
@@ -1657,6 +1679,9 @@ importers:
      '@next/env':
        specifier: 15.2.0
        version: 15.2.0
+      '@payloadcms/admin-bar':
+        specifier: workspace:*
+        version: link:../packages/admin-bar
      '@payloadcms/db-mongodb':
        specifier: workspace:*
        version: link:../packages/db-mongodb
--- a/test/admin-bar/.gitignore
+++ b/test/admin-bar/.gitignore
@@ -0,0 +1,2 @@
+/media
+/media-gif
--- a/test/admin-bar/app/(payload)/admin/[[...segments]]/not-found.tsx
+++ b/test/admin-bar/app/(payload)/admin/[[...segments]]/not-found.tsx
@@ -0,0 +1,25 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
+
+import { importMap } from '../importMap.js'
+
+type Args = {
+  params: Promise<{
+    segments: string[]
+  }>
+  searchParams: Promise<{
+    [key: string]: string | string[]
+  }>
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const NotFound = ({ params, searchParams }: Args) =>
+  NotFoundPage({ config, importMap, params, searchParams })
+
+export default NotFound
--- a/test/admin-bar/app/(payload)/admin/[[...segments]]/page.tsx
+++ b/test/admin-bar/app/(payload)/admin/[[...segments]]/page.tsx
@@ -0,0 +1,25 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
+
+import { importMap } from '../importMap.js'
+
+type Args = {
+  params: Promise<{
+    segments: string[]
+  }>
+  searchParams: Promise<{
+    [key: string]: string | string[]
+  }>
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const Page = ({ params, searchParams }: Args) =>
+  RootPage({ config, importMap, params, searchParams })
+
+export default Page
--- a/test/admin-bar/app/(payload)/admin/importMap.js
+++ b/test/admin-bar/app/(payload)/admin/importMap.js
@@ -0,0 +1 @@
+export const importMap = {}
--- a/test/admin-bar/app/(payload)/api/[...slug]/route.ts
+++ b/test/admin-bar/app/(payload)/api/[...slug]/route.ts
@@ -0,0 +1,10 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)
+export const OPTIONS = REST_OPTIONS(config)
--- a/test/admin-bar/app/(payload)/api/graphql-playground/route.ts
+++ b/test/admin-bar/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 REWRITTEN 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)
--- a/test/admin-bar/app/(payload)/api/graphql/route.ts
+++ b/test/admin-bar/app/(payload)/api/graphql/route.ts
@@ -0,0 +1,8 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)
+
+export const OPTIONS = REST_OPTIONS(config)
--- a/test/admin-bar/app/(payload)/custom.scss
+++ b/test/admin-bar/app/(payload)/custom.scss
@@ -0,0 +1,7 @@
+#custom-css {
+  font-family: monospace;
+}
+
+#custom-css::after {
+  content: 'custom-css';
+}
--- a/test/admin-bar/app/(payload)/layout.tsx
+++ b/test/admin-bar/app/(payload)/layout.tsx
@@ -0,0 +1,31 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { ServerFunctionClient } from 'payload'
+
+import config from '@payload-config'
+import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
+import React from 'react'
+
+import { importMap } from './admin/importMap.js'
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const serverFunction: ServerFunctionClient = async function (args) {
+  'use server'
+  return handleServerFunctions({
+    ...args,
+    config,
+    importMap,
+  })
+}
+
+const Layout = ({ children }: Args) => (
+  <RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
+    {children}
+  </RootLayout>
+)
+
+export default Layout
--- a/test/admin-bar/app/admin-bar/app.scss
+++ b/test/admin-bar/app/admin-bar/app.scss
@@ -0,0 +1,22 @@
+:root {
+  --font-body: system-ui;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  margin: 0;
+}
--- a/test/admin-bar/app/admin-bar/layout.tsx
+++ b/test/admin-bar/app/admin-bar/layout.tsx
@@ -0,0 +1,29 @@
+import type { Metadata } from 'next'
+
+import { PayloadAdminBar } from '@payloadcms/admin-bar'
+import React from 'react'
+
+import './app.scss'
+
+export const metadata: Metadata = {
+  description: 'Payload Admin Bar',
+  title: 'Payload Admin Bar',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <PayloadAdminBar
+          adminPath="/admin"
+          apiPath="/api"
+          cmsURL="http://localhost:3000"
+          collection="pages"
+          devMode
+          id="1"
+        />
+        {children}
+      </body>
+    </html>
+  )
+}
--- a/test/admin-bar/app/admin-bar/page.tsx
+++ b/test/admin-bar/app/admin-bar/page.tsx
@@ -0,0 +1,12 @@
+import { Fragment } from 'react'
+
+const PageTemplate = () => {
+  return (
+    <Fragment>
+      <br />
+      <h1>Payload Admin Bar</h1>
+    </Fragment>
+  )
+}
+
+export default PageTemplate
--- a/test/admin-bar/collections/Media/index.ts
+++ b/test/admin-bar/collections/Media/index.ts
@@ -0,0 +1,33 @@
+import type { CollectionConfig } from 'payload'
+
+export const mediaSlug = 'media'
+
+export const MediaCollection: CollectionConfig = {
+  slug: mediaSlug,
+  access: {
+    create: () => true,
+    read: () => true,
+  },
+  fields: [],
+  upload: {
+    crop: true,
+    focalPoint: true,
+    imageSizes: [
+      {
+        name: 'thumbnail',
+        height: 200,
+        width: 200,
+      },
+      {
+        name: 'medium',
+        height: 800,
+        width: 800,
+      },
+      {
+        name: 'large',
+        height: 1200,
+        width: 1200,
+      },
+    ],
+  },
+}
--- a/test/admin-bar/collections/Posts/index.ts
+++ b/test/admin-bar/collections/Posts/index.ts
@@ -0,0 +1,19 @@
+import type { CollectionConfig } from 'payload'
+
+export const postsSlug = 'posts'
+
+export const PostsCollection: CollectionConfig = {
+  slug: postsSlug,
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
+  ],
+  versions: {
+    drafts: true,
+  },
+}
--- a/test/admin-bar/config.ts
+++ b/test/admin-bar/config.ts
@@ -0,0 +1,39 @@
+import { fileURLToPath } from 'node:url'
+import path from 'path'
+
+import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
+import { devUser } from '../credentials.js'
+import { MediaCollection } from './collections/Media/index.js'
+import { PostsCollection, postsSlug } from './collections/Posts/index.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+export default buildConfigWithDefaults({
+  // ...extend config here
+  collections: [PostsCollection, MediaCollection],
+  admin: {
+    importMap: {
+      baseDir: path.resolve(dirname),
+    },
+  },
+  onInit: async (payload) => {
+    await payload.create({
+      collection: 'users',
+      data: {
+        email: devUser.email,
+        password: devUser.password,
+      },
+    })
+
+    await payload.create({
+      collection: postsSlug,
+      data: {
+        title: 'example post',
+      },
+    })
+  },
+  typescript: {
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
+  },
+})
--- a/test/admin-bar/e2e.spec.ts
+++ b/test/admin-bar/e2e.spec.ts
@@ -0,0 +1,37 @@
+import type { Page } from '@playwright/test'
+
+import { expect, test } from '@playwright/test'
+import * as path from 'path'
+import { fileURLToPath } from 'url'
+
+import { ensureCompilationIsDone, initPageConsoleErrorCatch } from '../helpers.js'
+import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
+import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
+import { TEST_TIMEOUT_LONG } from '../playwright.config.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+test.describe('Admin Bar', () => {
+  let page: Page
+  let url: AdminUrlUtil
+  let serverURL: string
+
+  test.beforeAll(async ({ browser }, testInfo) => {
+    testInfo.setTimeout(TEST_TIMEOUT_LONG)
+
+    const { payload, serverURL: incomingServerURL } = await initPayloadE2ENoConfig({ dirname })
+    url = new AdminUrlUtil(incomingServerURL, 'posts')
+    serverURL = incomingServerURL
+
+    const context = await browser.newContext()
+    page = await context.newPage()
+    initPageConsoleErrorCatch(page)
+    await ensureCompilationIsDone({ page, serverURL: incomingServerURL })
+  })
+
+  test('should render admin bar', async () => {
+    await page.goto(`${serverURL}/admin-bar`)
+    await expect(page.locator('#payload-admin-bar')).toBeVisible()
+  })
+})
--- a/test/admin-bar/eslint.config.js
+++ b/test/admin-bar/eslint.config.js
@@ -0,0 +1,19 @@
+import { rootParserOptions } from '../../eslint.config.js'
+import { testEslintConfig } from '../eslint.config.js'
+
+/** @typedef {import('eslint').Linter.Config} Config */
+
+/** @type {Config[]} */
+export const index = [
+  ...testEslintConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        ...rootParserOptions,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+]
+
+export default index
--- a/test/admin-bar/next-env.d.ts
+++ b/test/admin-bar/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/test/admin-bar/next.config.mjs
+++ b/test/admin-bar/next.config.mjs
@@ -0,0 +1,15 @@
+import nextConfig from '../../next.config.mjs'
+
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(__filename)
+
+export default {
+  ...nextConfig,
+  env: {
+    PAYLOAD_CORE_DEV: 'true',
+    ROOT_DIR: path.resolve(dirname),
+  },
+}
--- a/test/admin-bar/payload-types.ts
+++ b/test/admin-bar/payload-types.ts
@@ -0,0 +1,370 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * This file was automatically generated by Payload.
+ * DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
+ * and re-run `payload generate:types` to regenerate this file.
+ */
+
+/**
+ * Supported timezones in IANA format.
+ *
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "supportedTimezones".
+ */
+export type SupportedTimezones =
+  | 'Pacific/Midway'
+  | 'Pacific/Niue'
+  | 'Pacific/Honolulu'
+  | 'Pacific/Rarotonga'
+  | 'America/Anchorage'
+  | 'Pacific/Gambier'
+  | 'America/Los_Angeles'
+  | 'America/Tijuana'
+  | 'America/Denver'
+  | 'America/Phoenix'
+  | 'America/Chicago'
+  | 'America/Guatemala'
+  | 'America/New_York'
+  | 'America/Bogota'
+  | 'America/Caracas'
+  | 'America/Santiago'
+  | 'America/Buenos_Aires'
+  | 'America/Sao_Paulo'
+  | 'Atlantic/South_Georgia'
+  | 'Atlantic/Azores'
+  | 'Atlantic/Cape_Verde'
+  | 'Europe/London'
+  | 'Europe/Berlin'
+  | 'Africa/Lagos'
+  | 'Europe/Athens'
+  | 'Africa/Cairo'
+  | 'Europe/Moscow'
+  | 'Asia/Riyadh'
+  | 'Asia/Dubai'
+  | 'Asia/Baku'
+  | 'Asia/Karachi'
+  | 'Asia/Tashkent'
+  | 'Asia/Calcutta'
+  | 'Asia/Dhaka'
+  | 'Asia/Almaty'
+  | 'Asia/Jakarta'
+  | 'Asia/Bangkok'
+  | 'Asia/Shanghai'
+  | 'Asia/Singapore'
+  | 'Asia/Tokyo'
+  | 'Asia/Seoul'
+  | 'Australia/Sydney'
+  | 'Pacific/Guam'
+  | 'Pacific/Noumea'
+  | 'Pacific/Auckland'
+  | 'Pacific/Fiji';
+
+export interface Config {
+  auth: {
+    users: UserAuthOperations;
+  };
+  blocks: {};
+  collections: {
+    posts: Post;
+    media: Media;
+    users: User;
+    'payload-locked-documents': PayloadLockedDocument;
+    'payload-preferences': PayloadPreference;
+    'payload-migrations': PayloadMigration;
+  };
+  collectionsJoins: {};
+  collectionsSelect: {
+    posts: PostsSelect<false> | PostsSelect<true>;
+    media: MediaSelect<false> | MediaSelect<true>;
+    users: UsersSelect<false> | UsersSelect<true>;
+    'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
+    'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
+    'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
+  };
+  db: {
+    defaultIDType: string;
+  };
+  globals: {};
+  globalsSelect: {};
+  locale: null;
+  user: User & {
+    collection: 'users';
+  };
+  jobs: {
+    tasks: unknown;
+    workflows: unknown;
+  };
+}
+export interface UserAuthOperations {
+  forgotPassword: {
+    email: string;
+    password: string;
+  };
+  login: {
+    email: string;
+    password: string;
+  };
+  registerFirstUser: {
+    email: string;
+    password: string;
+  };
+  unlock: {
+    email: string;
+    password: string;
+  };
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "posts".
+ */
+export interface Post {
+  id: string;
+  title?: string | null;
+  updatedAt: string;
+  createdAt: string;
+  _status?: ('draft' | 'published') | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media".
+ */
+export interface Media {
+  id: string;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+  sizes?: {
+    thumbnail?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    medium?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    large?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+  };
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "users".
+ */
+export interface User {
+  id: string;
+  updatedAt: string;
+  createdAt: string;
+  email: string;
+  resetPasswordToken?: string | null;
+  resetPasswordExpiration?: string | null;
+  salt?: string | null;
+  hash?: string | null;
+  loginAttempts?: number | null;
+  lockUntil?: string | null;
+  password?: string | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-locked-documents".
+ */
+export interface PayloadLockedDocument {
+  id: string;
+  document?:
+    | ({
+        relationTo: 'posts';
+        value: string | Post;
+      } | null)
+    | ({
+        relationTo: 'media';
+        value: string | Media;
+      } | null)
+    | ({
+        relationTo: 'users';
+        value: string | User;
+      } | null);
+  globalSlug?: string | null;
+  user: {
+    relationTo: 'users';
+    value: string | User;
+  };
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-preferences".
+ */
+export interface PayloadPreference {
+  id: string;
+  user: {
+    relationTo: 'users';
+    value: string | User;
+  };
+  key?: string | null;
+  value?:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-migrations".
+ */
+export interface PayloadMigration {
+  id: string;
+  name?: string | null;
+  batch?: number | null;
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "posts_select".
+ */
+export interface PostsSelect<T extends boolean = true> {
+  title?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  _status?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media_select".
+ */
+export interface MediaSelect<T extends boolean = true> {
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+  sizes?:
+    | T
+    | {
+        thumbnail?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        medium?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        large?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+      };
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "users_select".
+ */
+export interface UsersSelect<T extends boolean = true> {
+  updatedAt?: T;
+  createdAt?: T;
+  email?: T;
+  resetPasswordToken?: T;
+  resetPasswordExpiration?: T;
+  salt?: T;
+  hash?: T;
+  loginAttempts?: T;
+  lockUntil?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-locked-documents_select".
+ */
+export interface PayloadLockedDocumentsSelect<T extends boolean = true> {
+  document?: T;
+  globalSlug?: T;
+  user?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-preferences_select".
+ */
+export interface PayloadPreferencesSelect<T extends boolean = true> {
+  user?: T;
+  key?: T;
+  value?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-migrations_select".
+ */
+export interface PayloadMigrationsSelect<T extends boolean = true> {
+  name?: T;
+  batch?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "auth".
+ */
+export interface Auth {
+  [k: string]: unknown;
+}
+
+
+declare module 'payload' {
+  // @ts-ignore 
+  export interface GeneratedTypes extends Config {}
+}
--- a/test/admin-bar/tsconfig.eslint.json
+++ b/test/admin-bar/tsconfig.eslint.json
@@ -0,0 +1,13 @@
+{
+  // extend your base config to share compilerOptions, etc
+  //"extends": "./tsconfig.json",
+  "compilerOptions": {
+    // ensure that nobody can accidentally use this config for a build
+    "noEmit": true
+  },
+  "include": [
+    // whatever paths you intend to lint
+    "./**/*.ts",
+    "./**/*.tsx"
+  ]
+}
--- a/test/admin-bar/tsconfig.json
+++ b/test/admin-bar/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
--- a/test/admin-bar/types.d.ts
+++ b/test/admin-bar/types.d.ts
@@ -0,0 +1,9 @@
+import type { RequestContext as OriginalRequestContext } from 'payload'
+
+declare module 'payload' {
+  // Create a new interface that merges your additional fields with the original one
+  export interface RequestContext extends OriginalRequestContext {
+    myObject?: string
+    // ...
+  }
+}
--- a/test/generateImportMap.ts
+++ b/test/generateImportMap.ts
@@ -23,8 +23,14 @@ async function run() {
    const config: SanitizedConfig = await (await import(pathWithConfig)).default

    let rootDir = ''
-    if (testConfigDir === 'live-preview' || testConfigDir === 'admin-root') {
+
+    if (
+      testConfigDir === 'live-preview' ||
+      testConfigDir === 'admin-root' ||
+      testConfigDir === 'admin-bar'
+    ) {
      rootDir = testDir
+
      if (process.env.PAYLOAD_TEST_PROD === 'true') {
        // If in prod mode, there may be a testSuite/prod folder. If so, use that as the rootDir
        const prodDir = path.resolve(testDir, 'prod')
--- a/test/package.json
+++ b/test/package.json
@@ -25,6 +25,7 @@
    "@aws-sdk/client-s3": "^3.614.0",
    "@date-fns/tz": "1.2.0",
    "@next/env": "15.2.0",
+    "@payloadcms/admin-bar": "workspace:*",
    "@payloadcms/db-mongodb": "workspace:*",
    "@payloadcms/db-postgres": "workspace:*",
    "@payloadcms/db-sqlite": "workspace:*",
--- a/test/setupProd.ts
+++ b/test/setupProd.ts
@@ -7,6 +7,7 @@ const dirname = path.dirname(filename)

 export const tgzToPkgNameMap = {
  payload: 'payload-*',
+  '@payloadcms/admin-bar': 'payloadcms-admin-bar-*',
  '@payloadcms/db-mongodb': 'payloadcms-db-mongodb-*',
  '@payloadcms/db-postgres': 'payloadcms-db-postgres-*',
  '@payloadcms/db-vercel-postgres': 'payloadcms-db-vercel-postgres-*',
--- a/test/tsconfig.typecheck.json
+++ b/test/tsconfig.typecheck.json
@@ -12,6 +12,9 @@
    // "../packages/**/src/**/*.tsx"
  ],
  "references": [
+    {
+      "path": "../packages/admin-bar"
+    },
    {
      "path": "../packages/create-payload-app"
    },
--- a/tools/releaser/src/lib/publishList.ts
+++ b/tools/releaser/src/lib/publishList.ts
@@ -9,6 +9,7 @@ export const packagePublishList = [
  'ui',
  'next',
  'graphql',
+  'admin-bar',
  'live-preview',
  'live-preview-react',
  'live-preview-vue',
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -31,7 +31,8 @@
      }
    ],
    "paths": {
-      "@payload-config": ["./test/plugin-import-export/config.ts"],
+      "@payload-config": ["./test/admin-bar/config.ts"],
+      "@payloadcms/admin-bar": ["./packages/admin-bar/src"],
      "@payloadcms/live-preview": ["./packages/live-preview/src"],
      "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],
      "@payloadcms/live-preview-vue": ["./packages/live-preview-vue/src/index.ts"],
@@ -71,11 +72,13 @@
      "@payloadcms/plugin-multi-tenant": ["./packages/plugin-multi-tenant/src/index.ts"],
      "@payloadcms/next": ["./packages/next/src/exports/*"],
      "@payloadcms/storage-s3/client": ["./packages/storage-s3/src/exports/client.ts"],
-      "@payloadcms/storage-vercel-blob/client": ["./packages/storage-vercel-blob/src/exports/client.ts"
+      "@payloadcms/storage-vercel-blob/client": [
+        "./packages/storage-vercel-blob/src/exports/client.ts"
      ],
      "@payloadcms/storage-gcs/client": ["./packages/storage-gcs/src/exports/client.ts"],
      "@payloadcms/storage-uploadthing/client": [
-        "./packages/storage-uploadthing/src/exports/client.ts"]
+        "./packages/storage-uploadthing/src/exports/client.ts"
+      ]
    }
  },
  "include": ["${configDir}/src"],
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,9 +4,11 @@
    "composite": false,
    "noEmit": true,
    "baseUrl": ".",
-
  },
  "references": [
+    {
+      "path": "./packages/admin-bar"
+    },
    {
      "path": "./packages/create-payload-app"
    },