@orion-studios/payload-studio 0.5.0-beta.113 → 0.5.0-beta.114

package/dist/{chunk-DAIZDGHL.mjs → chunk-4YPHQYRR.mjs}

@@ -188,13 +188,19 @@ function configureAdmin(config) {
   const formSubmissionsCollectionSlug = config.studio?.forms?.submissionsCollectionSlug || "form-submissions";
   const formUploadsCollectionSlug = config.studio?.forms?.uploadsCollectionSlug || "form-uploads";
   const pagesCollectionSlug = config.studio?.pages?.collectionSlug || "pages";
+  const builderBasePath = config.studio?.pages?.builderBasePath || "/builder";
   const mediaCollectionSlug = config.studio?.media?.collectionSlug || "media";
-  const contactFormStudioPath = "/studio-contact-form";
+  const globalsBasePath = "/globals";
+  const pagesBasePath = "/pages";
+  const formsBasePath = "/forms";
+  const mediaBasePath = "/media";
+  const toolsBasePath = "/tools";
+  const contactFormStudioPath = "/contact-form";
   const configuredGlobals = config.studio?.globals || [
     { slug: "site-settings", label: "Website Settings" },
     { slug: "header", label: "Header & Navigation" },
     { slug: "footer", label: "Footer" },
-    { slug: "contact-form", label: "Contact Form" }
+    { slug: "social-media", label: "Social Media" }
   ];
   const globals = configuredGlobals.map((global) => {
     if (global.slug !== "contact-form" || global.href) {
@@ -207,6 +213,7 @@ function configureAdmin(config) {
   });
   const studioSections = resolveStudioSections(config.studio?.sections || []);
   const studioSectionViews = resolveStudioSectionViews(config.studio?.sections || []);
+  const sitePreview = config.studio?.sitePreview;
   let cssPath;
   const pkgDist = getPkgDistDir();
   const sourceCssPath = path.resolve(pkgDist, "admin.css");
@@ -225,6 +232,50 @@ function configureAdmin(config) {
     cssPath = sourceCssPath;
   }
   const clientPath = "@orion-studios/payload-studio/admin/client";
+  const studioNavClientProps = {
+    brandName,
+    formSubmissionsCollectionSlug,
+    formsCollectionSlug,
+    formsEnabled,
+    formUploadsCollectionSlug,
+    globalsBasePath,
+    globalsExtraMatchPrefixes: [contactFormStudioPath],
+    logoUrl,
+    mediaCollectionSlug,
+    pagesCollectionSlug,
+    sections: studioSections
+  };
+  const studioBackBreadcrumbComponent = {
+    exportName: "StudioBackBreadcrumb",
+    path: clientPath
+  };
+  const hasMatchingComponent = (items, exportName) => Array.isArray(items) && items.some(
+    (item) => item && typeof item === "object" && item.exportName === exportName && item.path === clientPath
+  );
+  const appendComponent = (items, component, exportName) => hasMatchingComponent(items, exportName) ? items || [] : [...items || [], component];
+  const attachStudioBackBreadcrumbToCollection = (collection) => {
+    if (!studioEnabled) {
+      return collection;
+    }
+    const existingBeforeDocumentControls = collection.admin?.components?.edit?.beforeDocumentControls;
+    return {
+      ...collection,
+      admin: {
+        ...collection.admin,
+        components: {
+          ...collection.admin?.components,
+          edit: {
+            ...collection.admin?.components?.edit,
+            beforeDocumentControls: appendComponent(
+              existingBeforeDocumentControls,
+              studioBackBreadcrumbComponent,
+              "StudioBackBreadcrumb"
+            )
+          }
+        }
+      }
+    };
+  };
   return {
     admin: {
       css: cssPath,
@@ -233,19 +284,7 @@ function configureAdmin(config) {
           Nav: {
             exportName: "AdminStudioNav",
             path: clientPath,
-            clientProps: {
-              brandName,
-              logoUrl,
-              globalsBasePath: "/studio-globals",
-              globalsExtraMatchPrefixes: [contactFormStudioPath],
-              formSubmissionsCollectionSlug,
-              formsCollectionSlug,
-              formsEnabled,
-              formUploadsCollectionSlug,
-              mediaCollectionSlug,
-              pagesCollectionSlug,
-              sections: studioSections
-            }
+            clientProps: studioNavClientProps
           }
         } : {},
         graphics: {
@@ -271,51 +310,64 @@ function configureAdmin(config) {
             Component: {
               exportName: studioEnabled ? "AdminStudioDashboard" : "Dashboard",
               path: clientPath,
-              clientProps: {
-                brandName,
-                logoUrl,
-                globalsBasePath: "/studio-globals",
-                globalsExtraMatchPrefixes: [contactFormStudioPath],
-                formSubmissionsCollectionSlug,
-                formsCollectionSlug,
-                formsEnabled,
-                formUploadsCollectionSlug,
-                mediaCollectionSlug,
-                pagesCollectionSlug,
-                sections: studioSections
-              }
+              clientProps: studioNavClientProps
             }
           },
           ...studioEnabled ? {
             studioGlobals: {
-              path: "/studio-globals",
+              path: globalsBasePath,
               Component: {
                 exportName: "AdminStudioGlobalsView",
                 path: clientPath,
                 clientProps: {
+                  ...studioNavClientProps,
                   globals,
-                  globalsBasePath: "/studio-globals"
+                  globalsBasePath
+                }
+              }
+            },
+            studioPages: {
+              path: pagesBasePath,
+              Component: {
+                exportName: "AdminStudioPagesListView",
+                path: clientPath,
+                clientProps: {
+                  ...studioNavClientProps,
+                  pagesCollectionSlug
+                }
+              }
+            },
+            studioPageEditor: {
+              path: `${pagesBasePath}/:id`,
+              Component: {
+                exportName: "AdminStudioPageEditView",
+                path: clientPath,
+                clientProps: {
+                  ...studioNavClientProps,
+                  builderBasePath
                 }
               }
             },
             studioContactForm: {
-              path: "/studio-contact-form",
+              path: contactFormStudioPath,
               Component: {
                 exportName: "AdminStudioContactFormView",
                 path: clientPath,
                 clientProps: {
+                  ...studioNavClientProps,
                   globalSlug: "contact-form",
-                  globalsBasePath: "/studio-globals"
+                  globalsBasePath
                 }
               }
             },
             ...formsEnabled ? {
               studioForms: {
-                path: "/studio-forms",
+                path: formsBasePath,
                 Component: {
                   exportName: "AdminStudioFormsView",
                   path: clientPath,
                   clientProps: {
+                    ...studioNavClientProps,
                     formsCollectionSlug,
                     formSubmissionsCollectionSlug,
                     formUploadsCollectionSlug
@@ -323,12 +375,41 @@ function configureAdmin(config) {
                 }
               }
             } : {},
+            studioMedia: {
+              path: mediaBasePath,
+              Component: {
+                exportName: "AdminStudioMediaView",
+                path: clientPath,
+                clientProps: {
+                  ...studioNavClientProps,
+                  mediaCollectionSlug
+                }
+              }
+            },
+            studioTools: {
+              path: toolsBasePath,
+              Component: {
+                exportName: "AdminStudioToolsView",
+                path: clientPath,
+                clientProps: {
+                  ...studioNavClientProps,
+                  mediaCollectionSlug,
+                  pagesCollectionSlug
+                }
+              }
+            },
             ...Object.fromEntries(
               Object.entries(studioSectionViews).map(([id, view]) => [
                 id,
                 {
                   path: view.path,
-                  Component: view.Component
+                  Component: {
+                    ...view.Component,
+                    clientProps: {
+                      ...studioNavClientProps,
+                      ...view.Component.clientProps || {}
+                    }
+                  }
                 }
               ])
             )
@@ -366,10 +447,76 @@ function configureAdmin(config) {
       const hasThemePreference = existingFields.some(
         (field) => typeof field === "object" && field !== null && "name" in field && field.name === "themePreference"
       );
-      return {
+      const nextCollection = {
         ...usersCollection,
         fields: hasThemePreference ? existingFields : [...existingFields, createThemePreferenceField(defaultTheme)]
       };
+      return attachStudioBackBreadcrumbToCollection(nextCollection);
+    },
+    wrapPagesCollection(pagesCollection) {
+      if (!studioEnabled) {
+        return pagesCollection;
+      }
+      const collectionWithBreadcrumb = attachStudioBackBreadcrumbToCollection(pagesCollection);
+      const existingEditMenuItems = collectionWithBreadcrumb.admin?.components?.edit?.editMenuItems;
+      const existingViews = collectionWithBreadcrumb.admin?.components?.views;
+      const existingEditViews = existingViews?.edit;
+      const hasCustomEditView = Boolean(
+        existingEditViews?.root || existingEditViews?.default && typeof existingEditViews.default === "object" && existingEditViews.default.Component
+      );
+      return {
+        ...collectionWithBreadcrumb,
+        admin: {
+          ...collectionWithBreadcrumb.admin,
+          components: {
+            ...collectionWithBreadcrumb.admin?.components,
+            edit: {
+              ...collectionWithBreadcrumb.admin?.components?.edit,
+              editMenuItems: appendComponent(
+                existingEditMenuItems,
+                {
+                  exportName: "OpenInStudioMenuItem",
+                  path: clientPath,
+                  clientProps: {
+                    pagesPathBase: pagesBasePath
+                  }
+                },
+                "OpenInStudioMenuItem"
+              )
+            },
+            views: {
+              ...existingViews,
+              ...hasCustomEditView ? {} : {
+                edit: {
+                  ...existingEditViews,
+                  default: {
+                    ...typeof existingEditViews?.default === "object" ? existingEditViews.default : {},
+                    Component: {
+                      exportName: "PageEditRedirectToStudio",
+                      path: clientPath,
+                      clientProps: {
+                        pagesPathBase: pagesBasePath
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      };
+    },
+    wrapMediaCollection(mediaCollection) {
+      return attachStudioBackBreadcrumbToCollection(mediaCollection);
+    },
+    wrapFormsCollection(formsCollection) {
+      return attachStudioBackBreadcrumbToCollection(formsCollection);
+    },
+    wrapFormSubmissionsCollection(formSubmissionsCollection) {
+      return attachStudioBackBreadcrumbToCollection(formSubmissionsCollection);
+    },
+    wrapFormUploadsCollection(formUploadsCollection) {
+      return attachStudioBackBreadcrumbToCollection(formUploadsCollection);
     },
     wrapGlobals(globals2) {
       const labelMap = {
@@ -383,24 +530,74 @@ function configureAdmin(config) {
         const mapping = labelMap[global.slug];
         if (!mapping) return global;
         const shouldAttachContactFormRedirect = studioEnabled && global.slug === "contact-form";
+        const shouldAttachHeaderEditView = studioEnabled && global.slug === "header";
+        const shouldAttachFooterEditView = studioEnabled && global.slug === "footer";
         const existingViews = global.admin?.components?.views;
         const existingEditViews = existingViews?.edit;
         const hasCustomContactFormEditView = Boolean(
           existingEditViews?.root || existingEditViews?.default && typeof existingEditViews.default === "object" && existingEditViews.default.Component
         );
-        const contactFormEditViews = shouldAttachContactFormRedirect && !hasCustomContactFormEditView ? {
-          ...existingEditViews,
-          default: {
-            ...typeof existingEditViews?.default === "object" ? existingEditViews.default : {},
-            Component: {
-              exportName: "StudioContactFormRedirect",
-              path: clientPath,
-              clientProps: {
-                studioContactFormPath: contactFormStudioPath
+        const nextEditViews = (() => {
+          if (shouldAttachHeaderEditView && !hasCustomContactFormEditView) {
+            return {
+              ...existingEditViews,
+              default: {
+                ...typeof existingEditViews?.default === "object" ? existingEditViews.default : {},
+                Component: {
+                  exportName: "AdminStudioHeaderGlobalView",
+                  path: clientPath,
+                  clientProps: {
+                    ...studioNavClientProps,
+                    actionHref: sitePreview?.header?.actionHref,
+                    actionLabel: sitePreview?.header?.actionLabel,
+                    globalSlug: global.slug,
+                    locationSummary: sitePreview?.locationSummary,
+                    pagesCollectionSlug
+                  }
+                }
               }
-            }
+            };
+          }
+          if (shouldAttachFooterEditView && !hasCustomContactFormEditView) {
+            return {
+              ...existingEditViews,
+              default: {
+                ...typeof existingEditViews?.default === "object" ? existingEditViews.default : {},
+                Component: {
+                  exportName: "AdminStudioFooterGlobalView",
+                  path: clientPath,
+                  clientProps: {
+                    ...studioNavClientProps,
+                    builtByHref: sitePreview?.footer?.builtByHref,
+                    builtByLabel: sitePreview?.footer?.builtByLabel,
+                    description: sitePreview?.footer?.description,
+                    footerCategories: sitePreview?.footer?.footerCategories,
+                    footerLinks: sitePreview?.footer?.footerLinks,
+                    globalSlug: global.slug,
+                    locationSummary: sitePreview?.locationSummary
+                  }
+                }
+              }
+            };
+          }
+          if (shouldAttachContactFormRedirect && !hasCustomContactFormEditView) {
+            return {
+              ...existingEditViews,
+              default: {
+                ...typeof existingEditViews?.default === "object" ? existingEditViews.default : {},
+                Component: {
+                  exportName: "StudioContactFormRedirect",
+                  path: clientPath,
+                  clientProps: {
+                    studioContactFormPath: contactFormStudioPath
+                  }
+                }
+              }
+            };
           }
-        } : existingEditViews;
+          return existingEditViews;
+        })();
+        const existingBeforeDocumentControls = global.admin?.components?.elements?.beforeDocumentControls;
         return {
           ...global,
           admin: {
@@ -408,12 +605,18 @@ function configureAdmin(config) {
             group: mapping.group,
             components: {
               ...global.admin?.components,
-              ...shouldAttachContactFormRedirect ? {
+              elements: {
+                ...global.admin?.components?.elements,
+                beforeDocumentControls: studioEnabled ? appendComponent(
+                  existingBeforeDocumentControls,
+                  studioBackBreadcrumbComponent,
+                  "StudioBackBreadcrumb"
+                ) : existingBeforeDocumentControls
+              },
+              ...nextEditViews ? {
                 views: {
                   ...existingViews,
-                  ...contactFormEditViews ? {
-                    edit: contactFormEditViews
-                  } : {}
+                  edit: nextEditViews
                 }
               } : {}
             }