@payloadcms/ui 3.86.0-internal.ac46214 → 4.0.0-canary.1

package/dist/views/Versions/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/views/Versions/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,EACV,aAAa,EACb,yBAAyB,EACzB,eAAe,EACf,qBAAqB,EACrB,SAAS,EACV,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,yBAAyB,CAAA;IAC5C,MAAM,EAAE,eAAe,CAAA;IACvB,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,IAAI,EAAE,IAAI,CAAA;IACV,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,CAAA;IACf,YAAY,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAA;CACtC,CAAA"}

package/dist/views/Versions/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/views/Versions/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/views/Versions/types.ts"],"sourcesContent":["import type { I18n } from '@payloadcms/translations'\nimport type {\n  PaginatedDocs,\n  SanitizedCollectionConfig,\n  SanitizedConfig,\n  SanitizedGlobalConfig,\n  TypedUser,\n} from 'payload'\n\nexport type DefaultVersionsViewProps = {\n  canAccessAdmin: boolean\n  collectionConfig?: SanitizedCollectionConfig\n  config: SanitizedConfig\n  data: Document\n  editURL: string\n  entityLabel: string\n  globalConfig?: SanitizedGlobalConfig\n  i18n: I18n\n  id: number | string\n  limit: number\n  user: TypedUser\n  versionsData: PaginatedDocs<Document>\n}\n"],"mappings":"AASA","ignoreList":[]}

package/dist/widgets/CollectionCards/index.css

@@ -0,0 +1,84 @@
+@layer payload-default {
+  .collections {
+    display: flex;
+    width: 100%;
+    --gap: var(--spacer-3);
+    --cols: 5;
+  }
+
+  .collections__wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+    padding-bottom: var(--spacer-6);
+  }
+
+  .collections__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    padding-top: var(--spacer-2);
+  }
+
+  .collections__label {
+    margin: 0;
+    font-family: var(--text-heading-medium-font-family);
+    font-size: var(--text-heading-medium-font-size);
+    font-weight: var(--text-heading-medium-font-weight);
+    line-height: var(--text-heading-medium-line-height);
+    letter-spacing: var(--text-heading-medium-letter-spacing);
+    color: var(--color-text);
+  }
+
+  .collections__card-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    gap: var(--spacer-3);
+    display: grid;
+    grid-template-columns: repeat(var(--cols), 1fr);
+
+    .card {
+      height: 100%;
+    }
+  }
+
+  .collections__locked.locked {
+    align-items: unset;
+    justify-content: unset;
+  }
+
+  @media (max-width: 1440px) {
+    .collections {
+      --cols: 4;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .collections {
+      --gap: var(--spacer-3);
+      --cols: 2;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .collections {
+      --cols: 2;
+    }
+
+    .collections__wrap {
+      gap: var(--spacer-3);
+    }
+
+    .collections__card-list {
+      gap: var(--spacer-2);
+    }
+  }
+
+  @media (max-width: 400px) {
+    .collections {
+      --cols: 1;
+    }
+  }
+}

package/dist/widgets/CollectionCards/index.d.ts

@@ -1,5 +1,5 @@
 import type { WidgetServerProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare function CollectionCards(props: WidgetServerProps): Promise<React.JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/dist/widgets/CollectionCards/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/widgets/CollectionCards/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAKhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,cAAc,CAAA;AAIrB,wBAAsB,eAAe,CAAC,KAAK,EAAE,iBAAiB,8BAwH7D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/widgets/CollectionCards/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAKhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAIpB,wBAAsB,eAAe,CAAC,KAAK,EAAE,iBAAiB,8BAoH7D"}

package/dist/widgets/CollectionCards/index.js

@@ -3,13 +3,12 @@ import { getTranslation } from '@payloadcms/translations';
 import { EntityType, getAccessResults } from 'payload';
 import { formatAdminURL } from 'payload/shared';
 import React from 'react';
-import { Button } from '../../elements/Button/index.js';
-import { Card } from '../../elements/Card/index.js';
-import { Locked } from '../../elements/Locked/index.js';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { Button, Card, Locked } from '../../exports/client/index.js';
 import { getGlobalData } from '../../utilities/getGlobalData.js';
 import { getNavGroups } from '../../utilities/getNavGroups.js';
 import { getVisibleEntities } from '../../utilities/getVisibleEntities.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'collections';
 export async function CollectionCards(props) {
   const {
@@ -60,7 +59,6 @@ export async function CollectionCards(props) {
               let hasCreatePermission;
               let isLocked = null;
               let userEditing = null;
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
               if (type === EntityType.collection) {
                 title = getTranslation(label, i18n);
                 buttonAriaLabel = t('general:showAllLabel', {
@@ -76,7 +74,6 @@ export async function CollectionCards(props) {
                 });
                 hasCreatePermission = permissions?.collections?.[slug]?.create;
               }
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
               if (type === EntityType.global) {
                 title = getTranslation(label, i18n);
                 buttonAriaLabel = t('general:editLabel', {
@@ -111,10 +108,9 @@ export async function CollectionCards(props) {
                     "aria-label": t('general:createNewLabel', {
                       label
                     }),
-                    buttonStyle: "icon-label",
+                    buttonStyle: "ghost",
                     el: "link",
                     icon: "plus",
-                    iconStyle: "with-border",
                     round: true,
                     to: createHREF
                   }) : undefined,

package/dist/widgets/CollectionCards/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","EntityType","getAccessResults","formatAdminURL","React","Button","Card","Locked","getGlobalData","getNavGroups","getVisibleEntities","baseClass","CollectionCards","props","i18n","payload","user","req","admin","adminRoute","config","routes","t","permissions","visibleEntities","globalData","navGroups","_jsx","className","length","map","entities","label","groupIndex","_jsxs","slug","type","entityIndex","title","buttonAriaLabel","createHREF","href","hasCreatePermission","isLocked","userEditing","collection","path","collections","create","global","globalLockData","find","data","_isLocked","_userEditing","lockDuration","lastEditedAt","Date","_lastEditedAt","getTime","lockDurationInMilliseconds","lockExpirationTime","actions","id","buttonStyle","el","icon","iconStyle","round","to","undefined","titleAs"],"sources":["../../../src/widgets/CollectionCards/index.tsx"],"sourcesContent":["import type { WidgetServerProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { EntityType, getAccessResults } from 'payload'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { Card } from '../../elements/Card/index.js'\nimport { Locked } from '../../elements/Locked/index.js'\nimport { getGlobalData } from '../../utilities/getGlobalData.js'\nimport { getNavGroups } from '../../utilities/getNavGroups.js'\nimport { getVisibleEntities } from '../../utilities/getVisibleEntities.js'\nimport './index.scss'\n\nconst baseClass = 'collections'\n\nexport async function CollectionCards(props: WidgetServerProps) {\n  const { i18n, payload, user } = props.req\n  const { admin: adminRoute } = payload.config.routes\n  const { t } = i18n\n  const permissions = await getAccessResults({ req: props.req })\n  const visibleEntities = getVisibleEntities({ req: props.req })\n  const globalData = await getGlobalData(props.req)\n\n  const navGroups = getNavGroups(permissions, visibleEntities, payload.config, i18n)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        {!navGroups || navGroups?.length === 0 ? (\n          <p>no nav groups....</p>\n        ) : (\n          navGroups.map(({ entities, label }, groupIndex) => {\n            return (\n              <div className={`${baseClass}__group`} key={groupIndex}>\n                <h2 className={`${baseClass}__label`}>{label}</h2>\n                <ul className={`${baseClass}__card-list`}>\n                  {entities.map(({ slug, type, label }, entityIndex) => {\n                    let title: string\n                    let buttonAriaLabel: string\n                    let createHREF: string\n                    let href: string\n                    let hasCreatePermission: boolean\n                    let isLocked = null\n                    let userEditing = null\n\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n                    if (type === EntityType.collection) {\n                      title = getTranslation(label, i18n)\n\n                      buttonAriaLabel = t('general:showAllLabel', { label: title })\n\n                      href = formatAdminURL({\n                        adminRoute,\n                        path: `/collections/${slug}`,\n                      })\n\n                      createHREF = formatAdminURL({\n                        adminRoute,\n                        path: `/collections/${slug}/create`,\n                      })\n\n                      hasCreatePermission = permissions?.collections?.[slug]?.create\n                    }\n\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n                    if (type === EntityType.global) {\n                      title = getTranslation(label, i18n)\n\n                      buttonAriaLabel = t('general:editLabel', {\n                        label: getTranslation(label, i18n),\n                      })\n\n                      href = formatAdminURL({\n                        adminRoute,\n                        path: `/globals/${slug}`,\n                      })\n\n                      // Find the lock status for the global\n                      const globalLockData = globalData.find((global) => global.slug === slug)\n                      if (globalLockData) {\n                        isLocked = globalLockData.data._isLocked\n                        userEditing = globalLockData.data._userEditing\n\n                        // Check if the lock is expired\n                        const lockDuration = globalLockData?.lockDuration\n                        const lastEditedAt = new Date(globalLockData.data?._lastEditedAt).getTime()\n\n                        const lockDurationInMilliseconds = lockDuration * 1000\n                        const lockExpirationTime = lastEditedAt + lockDurationInMilliseconds\n\n                        if (new Date().getTime() > lockExpirationTime) {\n                          isLocked = false\n                          userEditing = null\n                        }\n                      }\n                    }\n\n                    return (\n                      <li key={entityIndex}>\n                        <Card\n                          actions={\n                            isLocked && user?.id !== userEditing?.id ? (\n                              <Locked className={`${baseClass}__locked`} user={userEditing} />\n                            ) : // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n                            hasCreatePermission && type === EntityType.collection ? (\n                              <Button\n                                aria-label={t('general:createNewLabel', {\n                                  label,\n                                })}\n                                buttonStyle=\"icon-label\"\n                                el=\"link\"\n                                icon=\"plus\"\n                                iconStyle=\"with-border\"\n                                round\n                                to={createHREF}\n                              />\n                            ) : undefined\n                          }\n                          buttonAriaLabel={buttonAriaLabel}\n                          href={href}\n                          id={`card-${slug}`}\n                          title={getTranslation(label, i18n)}\n                          titleAs=\"h3\"\n                        />\n                      </li>\n                    )\n                  })}\n                </ul>\n              </div>\n            )\n          })\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","EntityType","getAccessResults","formatAdminURL","React","Button","Card","Locked","getGlobalData","getNavGroups","getVisibleEntities","baseClass","CollectionCards","props","i18n","payload","user","req","admin","adminRoute","config","routes","t","permissions","visibleEntities","globalData","navGroups","_jsx","className","length","map","entities","label","groupIndex","_jsxs","slug","type","entityIndex","title","buttonAriaLabel","createHREF","href","hasCreatePermission","isLocked","userEditing","collection","path","collections","create","global","globalLockData","find","data","_isLocked","_userEditing","lockDuration","lastEditedAt","Date","_lastEditedAt","getTime","lockDurationInMilliseconds","lockExpirationTime","actions","id","buttonStyle","el","icon","round","to","undefined","titleAs"],"sources":["../../../src/widgets/CollectionCards/index.tsx"],"sourcesContent":["import type { WidgetServerProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { EntityType, getAccessResults } from 'payload'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary\nimport { Button, Card, Locked } from '../../exports/client/index.js'\nimport { getGlobalData } from '../../utilities/getGlobalData.js'\nimport { getNavGroups } from '../../utilities/getNavGroups.js'\nimport { getVisibleEntities } from '../../utilities/getVisibleEntities.js'\nimport './index.css'\n\nconst baseClass = 'collections'\n\nexport async function CollectionCards(props: WidgetServerProps) {\n  const { i18n, payload, user } = props.req\n  const { admin: adminRoute } = payload.config.routes\n  const { t } = i18n\n  const permissions = await getAccessResults({ req: props.req })\n  const visibleEntities = getVisibleEntities({ req: props.req })\n  const globalData = await getGlobalData(props.req)\n\n  const navGroups = getNavGroups(permissions, visibleEntities, payload.config, i18n)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        {!navGroups || navGroups?.length === 0 ? (\n          <p>no nav groups....</p>\n        ) : (\n          navGroups.map(({ entities, label }, groupIndex) => {\n            return (\n              <div className={`${baseClass}__group`} key={groupIndex}>\n                <h2 className={`${baseClass}__label`}>{label}</h2>\n                <ul className={`${baseClass}__card-list`}>\n                  {entities.map(({ slug, type, label }, entityIndex) => {\n                    let title: string\n                    let buttonAriaLabel: string\n                    let createHREF: string\n                    let href: string\n                    let hasCreatePermission: boolean\n                    let isLocked = null\n                    let userEditing = null\n\n                    if (type === EntityType.collection) {\n                      title = getTranslation(label, i18n)\n\n                      buttonAriaLabel = t('general:showAllLabel', { label: title })\n\n                      href = formatAdminURL({\n                        adminRoute,\n                        path: `/collections/${slug}`,\n                      })\n\n                      createHREF = formatAdminURL({\n                        adminRoute,\n                        path: `/collections/${slug}/create`,\n                      })\n\n                      hasCreatePermission = permissions?.collections?.[slug]?.create\n                    }\n\n                    if (type === EntityType.global) {\n                      title = getTranslation(label, i18n)\n\n                      buttonAriaLabel = t('general:editLabel', {\n                        label: getTranslation(label, i18n),\n                      })\n\n                      href = formatAdminURL({\n                        adminRoute,\n                        path: `/globals/${slug}`,\n                      })\n\n                      // Find the lock status for the global\n                      const globalLockData = globalData.find((global) => global.slug === slug)\n                      if (globalLockData) {\n                        isLocked = globalLockData.data._isLocked\n                        userEditing = globalLockData.data._userEditing\n\n                        // Check if the lock is expired\n                        const lockDuration = globalLockData?.lockDuration\n                        const lastEditedAt = new Date(globalLockData.data?._lastEditedAt).getTime()\n\n                        const lockDurationInMilliseconds = lockDuration * 1000\n                        const lockExpirationTime = lastEditedAt + lockDurationInMilliseconds\n\n                        if (new Date().getTime() > lockExpirationTime) {\n                          isLocked = false\n                          userEditing = null\n                        }\n                      }\n                    }\n\n                    return (\n                      <li key={entityIndex}>\n                        <Card\n                          actions={\n                            isLocked && user?.id !== userEditing?.id ? (\n                              <Locked className={`${baseClass}__locked`} user={userEditing} />\n                            ) : hasCreatePermission && type === EntityType.collection ? (\n                              <Button\n                                aria-label={t('general:createNewLabel', {\n                                  label,\n                                })}\n                                buttonStyle=\"ghost\"\n                                el=\"link\"\n                                icon=\"plus\"\n                                round\n                                to={createHREF}\n                              />\n                            ) : undefined\n                          }\n                          buttonAriaLabel={buttonAriaLabel}\n                          href={href}\n                          id={`card-${slug}`}\n                          title={getTranslation(label, i18n)}\n                          titleAs=\"h3\"\n                        />\n                      </li>\n                    )\n                  })}\n                </ul>\n              </div>\n            )\n          })\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAEA,SAASA,cAAc,QAAQ;AAC/B,SAASC,UAAU,EAAEC,gBAAgB,QAAQ;AAC7C,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB;AACA,SAASC,MAAM,EAAEC,IAAI,EAAEC,MAAM,QAAQ;AACrC,SAASC,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAC7B,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,eAAeC,gBAAgBC,KAAwB;EAC5D,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAEC;EAAI,CAAE,GAAGH,KAAA,CAAMI,GAAG;EACzC,MAAM;IAAEC,KAAA,EAAOC;EAAU,CAAE,GAAGJ,OAAA,CAAQK,MAAM,CAACC,MAAM;EACnD,MAAM;IAAEC;EAAC,CAAE,GAAGR,IAAA;EACd,MAAMS,WAAA,GAAc,MAAMrB,gBAAA,CAAiB;IAAEe,GAAA,EAAKJ,KAAA,CAAMI;EAAI;EAC5D,MAAMO,eAAA,GAAkBd,kBAAA,CAAmB;IAAEO,GAAA,EAAKJ,KAAA,CAAMI;EAAI;EAC5D,MAAMQ,UAAA,GAAa,MAAMjB,aAAA,CAAcK,KAAA,CAAMI,GAAG;EAEhD,MAAMS,SAAA,GAAYjB,YAAA,CAAac,WAAA,EAAaC,eAAA,EAAiBT,OAAA,CAAQK,MAAM,EAAEN,IAAA;EAE7E,oBACEa,IAAA,CAAC;IAAIC,SAAA,EAAWjB,SAAA;cACd,aAAAgB,IAAA,CAAC;MAAIC,SAAA,EAAW,GAAGjB,SAAA,QAAiB;gBACjC,CAACe,SAAA,IAAaA,SAAA,EAAWG,MAAA,KAAW,iBACnCF,IAAA,CAAC;kBAAE;WAEHD,SAAA,CAAUI,GAAG,CAAC,CAAC;QAAEC,QAAQ;QAAEC;MAAK,CAAE,EAAEC,UAAA;QAClC,oBACEC,KAAA,CAAC;UAAIN,SAAA,EAAW,GAAGjB,SAAA,SAAkB;kCACnCgB,IAAA,CAAC;YAAGC,SAAA,EAAW,GAAGjB,SAAA,SAAkB;sBAAGqB;2BACvCL,IAAA,CAAC;YAAGC,SAAA,EAAW,GAAGjB,SAAA,aAAsB;sBACrCoB,QAAA,CAASD,GAAG,CAAC,CAAC;cAAEK,IAAI;cAAEC,IAAI;cAAEJ;YAAK,CAAE,EAAEK,WAAA;cACpC,IAAIC,KAAA;cACJ,IAAIC,eAAA;cACJ,IAAIC,UAAA;cACJ,IAAIC,IAAA;cACJ,IAAIC,mBAAA;cACJ,IAAIC,QAAA,GAAW;cACf,IAAIC,WAAA,GAAc;cAElB,IAAIR,IAAA,KAASnC,UAAA,CAAW4C,UAAU,EAAE;gBAClCP,KAAA,GAAQtC,cAAA,CAAegC,KAAA,EAAOlB,IAAA;gBAE9ByB,eAAA,GAAkBjB,CAAA,CAAE,wBAAwB;kBAAEU,KAAA,EAAOM;gBAAM;gBAE3DG,IAAA,GAAOtC,cAAA,CAAe;kBACpBgB,UAAA;kBACA2B,IAAA,EAAM,gBAAgBX,IAAA;gBACxB;gBAEAK,UAAA,GAAarC,cAAA,CAAe;kBAC1BgB,UAAA;kBACA2B,IAAA,EAAM,gBAAgBX,IAAA;gBACxB;gBAEAO,mBAAA,GAAsBnB,WAAA,EAAawB,WAAA,GAAcZ,IAAA,CAAK,EAAEa,MAAA;cAC1D;cAEA,IAAIZ,IAAA,KAASnC,UAAA,CAAWgD,MAAM,EAAE;gBAC9BX,KAAA,GAAQtC,cAAA,CAAegC,KAAA,EAAOlB,IAAA;gBAE9ByB,eAAA,GAAkBjB,CAAA,CAAE,qBAAqB;kBACvCU,KAAA,EAAOhC,cAAA,CAAegC,KAAA,EAAOlB,IAAA;gBAC/B;gBAEA2B,IAAA,GAAOtC,cAAA,CAAe;kBACpBgB,UAAA;kBACA2B,IAAA,EAAM,YAAYX,IAAA;gBACpB;gBAEA;gBACA,MAAMe,cAAA,GAAiBzB,UAAA,CAAW0B,IAAI,CAAEF,MAAA,IAAWA,MAAA,CAAOd,IAAI,KAAKA,IAAA;gBACnE,IAAIe,cAAA,EAAgB;kBAClBP,QAAA,GAAWO,cAAA,CAAeE,IAAI,CAACC,SAAS;kBACxCT,WAAA,GAAcM,cAAA,CAAeE,IAAI,CAACE,YAAY;kBAE9C;kBACA,MAAMC,YAAA,GAAeL,cAAA,EAAgBK,YAAA;kBACrC,MAAMC,YAAA,GAAe,IAAIC,IAAA,CAAKP,cAAA,CAAeE,IAAI,EAAEM,aAAA,EAAeC,OAAO;kBAEzE,MAAMC,0BAAA,GAA6BL,YAAA,GAAe;kBAClD,MAAMM,kBAAA,GAAqBL,YAAA,GAAeI,0BAAA;kBAE1C,IAAI,IAAIH,IAAA,GAAOE,OAAO,KAAKE,kBAAA,EAAoB;oBAC7ClB,QAAA,GAAW;oBACXC,WAAA,GAAc;kBAChB;gBACF;cACF;cAEA,oBACEjB,IAAA,CAAC;0BACC,aAAAA,IAAA,CAACrB,IAAA;kBACCwD,OAAA,EACEnB,QAAA,IAAY3B,IAAA,EAAM+C,EAAA,KAAOnB,WAAA,EAAamB,EAAA,gBACpCpC,IAAA,CAACpB,MAAA;oBAAOqB,SAAA,EAAW,GAAGjB,SAAA,UAAmB;oBAAEK,IAAA,EAAM4B;uBAC/CF,mBAAA,IAAuBN,IAAA,KAASnC,UAAA,CAAW4C,UAAU,gBACvDlB,IAAA,CAACtB,MAAA;oBACC,cAAYiB,CAAA,CAAE,0BAA0B;sBACtCU;oBACF;oBACAgC,WAAA,EAAY;oBACZC,EAAA,EAAG;oBACHC,IAAA,EAAK;oBACLC,KAAK;oBACLC,EAAA,EAAI5B;uBAEJ6B,SAAA;kBAEN9B,eAAA,EAAiBA,eAAA;kBACjBE,IAAA,EAAMA,IAAA;kBACNsB,EAAA,EAAI,QAAQ5B,IAAA,EAAM;kBAClBG,KAAA,EAAOtC,cAAA,CAAegC,KAAA,EAAOlB,IAAA;kBAC7BwD,OAAA,EAAQ;;iBAtBHjC,WAAA;YA0Bb;;WAzFwCJ,UAAA;MA6FhD;;;AAKV","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/ui",
-  "version": "3.86.0-internal.ac46214",
+  "version": "4.0.0-canary.1",
   "homepage": "https://payloadcms.com",
   "repository": {
     "type": "git",
@@ -32,6 +32,11 @@
       "types": "./dist/exports/shared/index.d.ts",
       "default": "./dist/exports/shared/index.js"
     },
+    "./layouts": {
+      "import": "./dist/exports/layouts.js",
+      "types": "./dist/exports/layouts.d.ts",
+      "default": "./dist/exports/layouts.js"
+    },
     "./css": {
       "import": "./dist/styles.css",
       "default": "./dist/styles.css"
@@ -97,6 +102,106 @@
       "types": "./dist/icons/*/index.d.ts",
       "default": "./dist/icons/*/index.js"
     },
+    "./utilities/formatMetadata": {
+      "import": "./dist/utilities/formatMetadata.js",
+      "types": "./dist/utilities/formatMetadata.d.ts",
+      "default": "./dist/utilities/formatMetadata.js"
+    },
+    "./views/API/generateAPIViewMetadata": {
+      "import": "./dist/views/API/generateAPIViewMetadata.js",
+      "types": "./dist/views/API/generateAPIViewMetadata.d.ts",
+      "default": "./dist/views/API/generateAPIViewMetadata.js"
+    },
+    "./views/CollectionTrash/generateCollectionTrashMetadata": {
+      "import": "./dist/views/CollectionTrash/generateCollectionTrashMetadata.js",
+      "types": "./dist/views/CollectionTrash/generateCollectionTrashMetadata.d.ts",
+      "default": "./dist/views/CollectionTrash/generateCollectionTrashMetadata.js"
+    },
+    "./views/Document/generateEditViewMetadata": {
+      "import": "./dist/views/Document/generateEditViewMetadata.js",
+      "types": "./dist/views/Document/generateEditViewMetadata.d.ts",
+      "default": "./dist/views/Document/generateEditViewMetadata.js"
+    },
+    "./views/List/generateListViewMetadata": {
+      "import": "./dist/views/List/generateListViewMetadata.js",
+      "types": "./dist/views/List/generateListViewMetadata.d.ts",
+      "default": "./dist/views/List/generateListViewMetadata.js"
+    },
+    "./views/Root/generateCustomViewMetadata": {
+      "import": "./dist/views/Root/generateCustomViewMetadata.js",
+      "types": "./dist/views/Root/generateCustomViewMetadata.d.ts",
+      "default": "./dist/views/Root/generateCustomViewMetadata.js"
+    },
+    "./views/Version/generateVersionViewMetadata": {
+      "import": "./dist/views/Version/generateVersionViewMetadata.js",
+      "types": "./dist/views/Version/generateVersionViewMetadata.d.ts",
+      "default": "./dist/views/Version/generateVersionViewMetadata.js"
+    },
+    "./views/Versions/generateVersionsViewMetadata": {
+      "import": "./dist/views/Versions/generateVersionsViewMetadata.js",
+      "types": "./dist/views/Versions/generateVersionsViewMetadata.d.ts",
+      "default": "./dist/views/Versions/generateVersionsViewMetadata.js"
+    },
+    "./views/Dashboard/serverFunctions": {
+      "import": "./dist/views/Dashboard/serverFunctions.js",
+      "types": "./dist/views/Dashboard/serverFunctions.d.ts",
+      "default": "./dist/views/Dashboard/serverFunctions.js"
+    },
+    "./views/Document/handleServerFunction": {
+      "import": "./dist/views/Document/handleServerFunction.js",
+      "types": "./dist/views/Document/handleServerFunction.d.ts",
+      "default": "./dist/views/Document/handleServerFunction.js"
+    },
+    "./views/Document/renderDocumentSlots": {
+      "import": "./dist/views/Document/renderDocumentSlots.js",
+      "types": "./dist/views/Document/renderDocumentSlots.d.ts",
+      "default": "./dist/views/Document/renderDocumentSlots.js"
+    },
+    "./views/List/handleServerFunction": {
+      "import": "./dist/views/List/handleServerFunction.js",
+      "types": "./dist/views/List/handleServerFunction.d.ts",
+      "default": "./dist/views/List/handleServerFunction.js"
+    },
+    "./views/Versions/fetchVersions": {
+      "import": "./dist/views/Versions/fetchVersions.js",
+      "types": "./dist/views/Versions/fetchVersions.d.ts",
+      "default": "./dist/views/Versions/fetchVersions.js"
+    },
+    "./views/NotFound/page": {
+      "import": "./dist/views/NotFound/page.js",
+      "types": "./dist/views/NotFound/page.d.ts",
+      "default": "./dist/views/NotFound/page.js"
+    },
+    "./views/Root/getCustomViewByRoute": {
+      "import": "./dist/views/Root/getCustomViewByRoute.js",
+      "types": "./dist/views/Root/getCustomViewByRoute.d.ts",
+      "default": "./dist/views/Root/getCustomViewByRoute.js"
+    },
+    "./views/Root/adminViews": {
+      "import": "./dist/views/Root/adminViews.js",
+      "types": "./dist/views/Root/adminViews.d.ts",
+      "default": "./dist/views/Root/adminViews.js"
+    },
+    "./views/Root/generatePageMetadata": {
+      "import": "./dist/views/Root/generatePageMetadata.js",
+      "types": "./dist/views/Root/generatePageMetadata.d.ts",
+      "default": "./dist/views/Root/generatePageMetadata.js"
+    },
+    "./views/Document/getMetaBySegment": {
+      "import": "./dist/views/Document/getMetaBySegment.js",
+      "types": "./dist/views/Document/getMetaBySegment.d.ts",
+      "default": "./dist/views/Document/getMetaBySegment.js"
+    },
+    "./views/*/metadata": {
+      "import": "./dist/views/*/metadata.js",
+      "types": "./dist/views/*/metadata.d.ts",
+      "default": "./dist/views/*/metadata.js"
+    },
+    "./views/*": {
+      "import": "./dist/views/*/index.js",
+      "types": "./dist/views/*/index.d.ts",
+      "default": "./dist/views/*/index.js"
+    },
     "./providers/*": {
       "import": "./dist/providers/*/index.js",
       "types": "./dist/providers/*/index.d.ts",
@@ -116,6 +221,7 @@
   "dependencies": {
     "@date-fns/tz": "1.2.0",
     "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/modifiers": "9.0.0",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@faceless-ui/modal": "3.0.0",
@@ -127,6 +233,7 @@
     "dequal": "2.0.3",
     "md5": "2.3.0",
     "object-to-formdata": "4.5.1",
+    "path-to-regexp": "6.3.0",
     "qs-esm": "8.0.1",
     "react-datepicker": "7.6.0",
     "react-image-crop": "10.1.8",
@@ -135,8 +242,8 @@
     "sonner": "^1.7.2",
     "ts-essentials": "10.0.3",
     "use-context-selector": "2.0.0",
-    "uuid": "13.0.2",
-    "@payloadcms/translations": "3.86.0-internal.ac46214"
+    "uuid": "14.0.0",
+    "@payloadcms/translations": "4.0.0-canary.1"
   },
   "devDependencies": {
     "@babel/cli": "7.27.2",
@@ -151,16 +258,15 @@
     "esbuild": "0.27.1",
     "esbuild-sass-plugin": "3.3.1",
     "@payloadcms/eslint-config": "3.28.0",
-    "payload": "3.86.0-internal.ac46214"
+    "payload": "4.0.0-canary.1"
   },
   "peerDependencies": {
-    "next": ">=15.2.9 <15.3.0 || >=15.3.9 <15.4.0 || >=15.4.11 <15.5.0 || >=16.2.6 <17.0.0",
     "react": "^19.0.1 || ^19.1.2 || ^19.2.1",
     "react-dom": "^19.0.1 || ^19.1.2 || ^19.2.1",
-    "payload": "3.86.0-internal.ac46214"
+    "payload": "4.0.0-canary.1"
   },
   "engines": {
-    "node": "^18.20.2 || >=20.9.0"
+    "node": ">=24.15.0"
   },
   "scripts": {
     "build": "pnpm build:reactcompiler",

package/dist/elements/AddNewRelation/index.scss

@@ -1,44 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .relationship-add-new {
-    display: flex;
-    align-items: stretch;
-
-    .popup__trigger-wrap {
-      display: flex;
-      align-items: stretch;
-      height: 100%;
-    }
-
-    &__add-button:not(.relationship-add-new__add-button--unstyled),
-    &__add-button:not(.relationship-add-new__add-button--unstyled).doc-drawer__toggler {
-      @include formInput;
-      margin: 0;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      position: relative;
-      height: 100%;
-      margin-left: -1px;
-      display: flex;
-      padding: 0 base(0.5);
-      align-items: center;
-      display: flex;
-      cursor: pointer;
-    }
-
-    &__add-button {
-      margin: 0;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      position: relative;
-      height: 100%;
-      margin-left: -1px;
-      display: flex;
-      padding: 0 base(0.5);
-      align-items: center;
-      display: flex;
-      cursor: pointer;
-    }
-  }
-}

package/dist/elements/AnimateHeight/index.scss

@@ -1,10 +0,0 @@
-@layer payload-default {
-  .rah-static {
-    interpolate-size: allow-keywords;
-    height: 0;
-
-    &--height-auto {
-      height: auto;
-    }
-  }
-}

package/dist/elements/AppHeader/index.scss

@@ -1,194 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .app-header {
-    position: relative;
-    width: 100%;
-    height: var(--app-header-height);
-    z-index: var(--z-modal);
-
-    &__mobile-nav-toggler {
-      display: none;
-    }
-
-    &__localizer.localizer {
-      position: absolute;
-      top: 50%;
-      right: base(4.5);
-      transform: translate3d(0, -50%, 0);
-    }
-
-    // place the localizer outside the `overflow: hidden` container so that the popup is visible
-    // this means we need to use a placeholder div so that the space is retained in the DOM
-    [dir='rtl'] &__localizer {
-      right: unset;
-      left: base(4.5);
-    }
-
-    &__localizer-spacing {
-      visibility: hidden;
-    }
-
-    &__bg {
-      opacity: 0;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-    }
-
-    &--show-bg {
-      opacity: 1;
-    }
-
-    &__content {
-      display: flex;
-      align-items: center;
-      height: 100%;
-      padding: 0 var(--gutter-h);
-      position: relative;
-      flex-grow: 1;
-    }
-
-    &__wrapper {
-      display: flex;
-      gap: calc(var(--base) / 2);
-      align-items: center;
-      height: 100%;
-      flex-grow: 1;
-      justify-content: space-between;
-      width: 100%;
-    }
-
-    &__account {
-      position: relative;
-      flex-shrink: 0;
-
-      &:focus:not(:focus-visible) {
-        opacity: 1;
-      }
-
-      // Use a pseudo element for the accessability so that it doesn't take up DOM space
-      // Also because the parent element has `overflow: hidden` which would clip an outline
-      &:focus-visible {
-        outline: none;
-
-        &::after {
-          content: '';
-          border: var(--accessibility-outline);
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          pointer-events: none;
-        }
-      }
-    }
-
-    &__controls-wrapper {
-      display: flex;
-      align-items: center;
-      flex: 1;
-      min-width: 0;
-    }
-
-    &__step-nav-wrapper {
-      flex-grow: 0;
-      display: flex;
-      width: 100%;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-
-    &__actions-wrapper {
-      position: relative;
-      display: flex;
-      align-items: center;
-      gap: calc(var(--base) / 2);
-      margin-right: var(--base);
-    }
-
-    &__gradient-placeholder {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: var(--base);
-      height: var(--base);
-      background: linear-gradient(to right, transparent, var(--theme-bg));
-    }
-
-    &__actions {
-      display: flex;
-      align-items: center;
-      gap: calc(var(--base) / 2);
-      flex-shrink: 0;
-      max-width: 600px;
-      white-space: nowrap;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-
-    &__last-action {
-      margin-right: var(--base);
-    }
-
-    @include large-break {
-      &__actions {
-        max-width: 500px;
-      }
-    }
-
-    @include mid-break {
-      &__gradient-placeholder {
-        right: var(--base);
-      }
-
-      &__actions {
-        max-width: 300px;
-        margin-right: var(--base);
-      }
-    }
-
-    @include small-break {
-      &__localizer.localizer {
-        right: base(2);
-      }
-
-      &--nav-open {
-        .app-header__localizer {
-          display: none;
-        }
-      }
-
-      &__mobile-nav-toggler {
-        display: flex;
-        align-items: center;
-
-        &.nav-toggler--is-open {
-          opacity: 0.5;
-        }
-      }
-
-      &__step-header {
-        // TODO: overflow the step header instead of hide it
-        display: none;
-      }
-
-      &__gradient-placeholder {
-        right: 0;
-      }
-
-      &__actions {
-        max-width: 150px;
-        margin-right: 0;
-      }
-    }
-  }
-}

package/dist/elements/ArrayAction/index.scss

@@ -1,35 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .array-actions {
-    &__button {
-      @extend %btn-reset;
-      cursor: pointer;
-      border-radius: 100px;
-
-      &:hover {
-        background: var(--theme-elevation-0);
-      }
-    }
-
-    &__actions {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    &__action {
-      display: flex;
-      gap: calc(var(--base) / 2);
-      align-items: center;
-
-      svg {
-        position: relative;
-
-        .stroke {
-          stroke-width: 1px;
-        }
-      }
-    }
-  }
-}

package/dist/elements/Autosave/index.scss

@@ -1,7 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .autosave {
-    white-space: nowrap;
-  }
-}