@orion-studios/payload-studio 0.5.0-beta.98 → 0.6.0-beta.1

package/dist/admin/index.d.mts

@@ -1,3 +1,4 @@
-export { A as AdminConfig, C as CreateSocialMediaConnectionsFieldOptions, a as CreateSocialMediaGlobalOptions, c as configureAdmin, b as createHeaderNavItemsField, d as createSocialMediaConnectionsField, e as createSocialMediaGlobal, f as createThemePreferenceField, s as socialMediaConnectionsField, t as themePreferenceField, w as withTooltips } from '../index-CoYRBbf6.mjs';
+export { A as AdminConfig, a as AdminStudioConfig, b as AdminStudioFooterPreviewConfig, c as AdminStudioHeaderPreviewConfig, d as AdminStudioSitePreviewConfig, C as CreateSocialMediaConnectionsFieldOptions, e as CreateSocialMediaGlobalOptions, R as ResolvedStudioSection, S as StudioGlobalLink, f as StudioSection, g as StudioSectionCard, h as StudioSectionComponent, j as StudioSectionRole, k as StudioSectionView, l as configureAdmin, m as createHeaderNavItemsField, n as createSocialMediaConnectionsField, o as createSocialMediaGlobal, p as createThemePreferenceField, s as socialMediaConnectionsField, t as themePreferenceField, w as withTooltips } from '../index-D_b24Gef.mjs';
 export { b as SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM, c as SOCIAL_MEDIA_ICON_OPTIONS, d as SOCIAL_MEDIA_PLATFORMS, e as SOCIAL_MEDIA_PLATFORM_LABELS, S as SocialMediaGlobalData, f as SocialMediaIconLibrary, g as SocialMediaIconOption, a as SocialMediaPlatform, h as SocialMediaProfileData, i as SocialMediaProfilesData } from '../socialMedia-C05Iy-SV.mjs';
 import 'payload';
+import '../sitePreviewTypes-BkHCWxNW.mjs';

package/dist/admin/index.d.ts

@@ -1,3 +1,4 @@
-export { A as AdminConfig, C as CreateSocialMediaConnectionsFieldOptions, a as CreateSocialMediaGlobalOptions, c as configureAdmin, b as createHeaderNavItemsField, d as createSocialMediaConnectionsField, e as createSocialMediaGlobal, f as createThemePreferenceField, s as socialMediaConnectionsField, t as themePreferenceField, w as withTooltips } from '../index-BFXZue5i.js';
+export { A as AdminConfig, a as AdminStudioConfig, b as AdminStudioFooterPreviewConfig, c as AdminStudioHeaderPreviewConfig, d as AdminStudioSitePreviewConfig, C as CreateSocialMediaConnectionsFieldOptions, e as CreateSocialMediaGlobalOptions, R as ResolvedStudioSection, S as StudioGlobalLink, f as StudioSection, g as StudioSectionCard, h as StudioSectionComponent, j as StudioSectionRole, k as StudioSectionView, l as configureAdmin, m as createHeaderNavItemsField, n as createSocialMediaConnectionsField, o as createSocialMediaGlobal, p as createThemePreferenceField, s as socialMediaConnectionsField, t as themePreferenceField, w as withTooltips } from '../index-BMitiKK8.js';
 export { b as SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM, c as SOCIAL_MEDIA_ICON_OPTIONS, d as SOCIAL_MEDIA_PLATFORMS, e as SOCIAL_MEDIA_PLATFORM_LABELS, S as SocialMediaGlobalData, f as SocialMediaIconLibrary, g as SocialMediaIconOption, a as SocialMediaPlatform, h as SocialMediaProfileData, i as SocialMediaProfilesData } from '../socialMedia-C05Iy-SV.js';
 import 'payload';
+import '../sitePreviewTypes-BkHCWxNW.js';

package/dist/admin/index.js

@@ -68,6 +68,128 @@ var createThemePreferenceField = (defaultTheme = "brand-light") => ({
 });
 var themePreferenceField = createThemePreferenceField("brand-light");
 
+// src/admin-app/routeRegistry.ts
+var adminNavIcons = [
+  "dashboard",
+  "pages",
+  "forms",
+  "globals",
+  "media",
+  "tools",
+  "account",
+  "analytics"
+];
+
+// src/shared/studioSections.ts
+var studioRoles = /* @__PURE__ */ new Set(["admin", "editor", "client"]);
+var studioIcons = new Set(adminNavIcons);
+var isRecord = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+var isAbsoluteExternalURL = (value) => /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(value) || value.startsWith("//");
+var normalizePathLikeValue = (value) => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  if (isAbsoluteExternalURL(trimmed)) {
+    return trimmed;
+  }
+  const withLeadingSlash = trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+  const normalized = withLeadingSlash.replace(/\/+$/, "");
+  return normalized || "/";
+};
+var normalizeStringArray = (value) => {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter((entry) => typeof entry === "string").map((entry) => normalizePathLikeValue(entry)).filter((entry) => entry.length > 0);
+};
+var normalizeRoles = (value) => {
+  if (!Array.isArray(value)) {
+    return void 0;
+  }
+  const roles = value.filter((entry) => typeof entry === "string" && studioRoles.has(entry));
+  return roles.length > 0 ? roles : void 0;
+};
+var normalizeCard = (value) => {
+  if (!isRecord(value) || typeof value.title !== "string") {
+    return void 0;
+  }
+  const title = value.title.trim();
+  if (!title) {
+    return void 0;
+  }
+  return {
+    title,
+    ...typeof value.description === "string" && value.description.trim().length > 0 ? { description: value.description.trim() } : {}
+  };
+};
+var normalizeIcon = (value) => typeof value === "string" && studioIcons.has(value) ? value : void 0;
+var resolveStudioSections = (value) => {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  const sections = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const entry of value) {
+    if (!isRecord(entry) || typeof entry.id !== "string" || typeof entry.label !== "string") {
+      continue;
+    }
+    const id = entry.id.trim();
+    const label = entry.label.trim();
+    if (!id || !label || seen.has(id)) {
+      continue;
+    }
+    const href = typeof entry.href === "string" && entry.href.trim().length > 0 ? normalizePathLikeValue(entry.href) : isRecord(entry.view) && typeof entry.view.path === "string" ? normalizePathLikeValue(entry.view.path) : "";
+    if (!href) {
+      continue;
+    }
+    const matchPrefixes = Array.from(/* @__PURE__ */ new Set([href, ...normalizeStringArray(entry.matchPrefixes)]));
+    sections.push({
+      id,
+      label,
+      href,
+      matchPrefixes,
+      ...normalizeIcon(entry.icon) ? { icon: normalizeIcon(entry.icon) } : {},
+      ...normalizeRoles(entry.roles) ? { roles: normalizeRoles(entry.roles) } : {},
+      ...normalizeCard(entry.card) ? { card: normalizeCard(entry.card) } : {}
+    });
+    seen.add(id);
+  }
+  return sections;
+};
+var resolveStudioSectionViews = (value) => {
+  if (!Array.isArray(value)) {
+    return {};
+  }
+  const views = {};
+  for (const entry of value) {
+    if (!isRecord(entry) || typeof entry.id !== "string" || !isRecord(entry.view)) {
+      continue;
+    }
+    const id = entry.id.trim();
+    const view = entry.view;
+    const component = isRecord(view.Component) ? view.Component : null;
+    if (!id || typeof view.path !== "string" || !component || typeof component.exportName !== "string" || typeof component.path !== "string") {
+      continue;
+    }
+    const path2 = normalizePathLikeValue(view.path);
+    const componentPath = component.path.trim();
+    const exportName = component.exportName.trim();
+    if (!path2 || !componentPath || !exportName) {
+      continue;
+    }
+    views[id] = {
+      path: path2,
+      Component: {
+        exportName,
+        path: componentPath,
+        ...isRecord(component.clientProps) ? { clientProps: component.clientProps } : {}
+      }
+    };
+  }
+  return views;
+};
+
 // src/admin/helpers/configureAdmin.ts
 var import_meta = {};
 function getPkgDistDir() {
@@ -93,17 +215,28 @@ function configureAdmin(config) {
     brandPrimary = "#3b82f6",
     brandSecondary = "#8b5cf6",
     defaultTheme = "brand-light",
-    logoUrl
+    logoUrl,
+    allowThemePreference = false
   } = config;
   const studioEnabled = config.studio?.enabled ?? true;
+  const formsEnabled = config.studio?.forms?.enabled ?? false;
+  const formsCollectionSlug = config.studio?.forms?.collectionSlug || "forms";
+  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 = "/site-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) {
@@ -114,24 +247,80 @@ function configureAdmin(config) {
       href: contactFormStudioPath
     };
   });
+  const studioSections = resolveStudioSections(config.studio?.sections || []);
+  const studioSectionViews = resolveStudioSectionViews(config.studio?.sections || []);
+  const sitePreview = config.studio?.sitePreview;
   let cssPath;
   const pkgDist = getPkgDistDir();
   const sourceCssPath = import_path.default.resolve(pkgDist, "admin.css");
-  if (config.basePath && import_fs.default.existsSync(sourceCssPath)) {
-    let css = import_fs.default.readFileSync(sourceCssPath, "utf-8");
-    css = css.replace("--brand-primary: #3b82f6;", `--brand-primary: ${brandPrimary};`);
-    css = css.replace("--brand-secondary: #8b5cf6;", `--brand-secondary: ${brandSecondary};`);
-    const genDir = import_path.default.resolve(config.basePath, ".generated");
+  const adminAppCssPath = import_path.default.resolve(pkgDist, "admin-app", "styles.css");
+  const cssSources = [sourceCssPath, adminAppCssPath].filter((filePath) => import_fs.default.existsSync(filePath));
+  if (cssSources.length === 0) {
+    cssPath = sourceCssPath;
+  } else {
+    let css = cssSources.map((filePath) => import_fs.default.readFileSync(filePath, "utf-8")).join("\n\n");
+    css = css.replace(
+      "--orion-cms-brand-primary-fallback: #3b82f6;",
+      `--orion-cms-brand-primary-fallback: ${brandPrimary};`
+    );
+    css = css.replace(
+      "--orion-cms-brand-secondary-fallback: #8b5cf6;",
+      `--orion-cms-brand-secondary-fallback: ${brandSecondary};`
+    );
+    const outputBasePath = config.basePath || process.cwd();
+    const genDir = import_path.default.resolve(outputBasePath, ".generated");
     if (!import_fs.default.existsSync(genDir)) {
       import_fs.default.mkdirSync(genDir, { recursive: true });
     }
     const genPath = import_path.default.resolve(genDir, "admin.css");
     import_fs.default.writeFileSync(genPath, css);
     cssPath = genPath;
-  } else {
-    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,
@@ -140,14 +329,7 @@ function configureAdmin(config) {
           Nav: {
             exportName: "AdminStudioNav",
             path: clientPath,
-            clientProps: {
-              brandName,
-              logoUrl,
-              globalsBasePath: "/studio-globals",
-              globalsExtraMatchPrefixes: [contactFormStudioPath],
-              mediaCollectionSlug,
-              pagesCollectionSlug
-            }
+            clientProps: studioNavClientProps
           }
         } : {},
         graphics: {
@@ -173,39 +355,131 @@ function configureAdmin(config) {
             Component: {
               exportName: studioEnabled ? "AdminStudioDashboard" : "Dashboard",
               path: clientPath,
-              clientProps: {
-                brandName,
-                logoUrl,
-                globalsBasePath: "/studio-globals",
-                globalsExtraMatchPrefixes: [contactFormStudioPath],
-                mediaCollectionSlug,
-                pagesCollectionSlug
-              }
+              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
+                }
+              }
+            },
+            studioPageNew: {
+              path: `${pagesBasePath}/new`,
+              Component: {
+                exportName: "AdminStudioNewPageView",
+                path: clientPath,
+                clientProps: {
+                  ...studioNavClientProps,
+                  pagesCollectionSlug
                 }
               }
             },
             studioContactForm: {
-              path: "/studio-contact-form",
+              path: contactFormStudioPath,
               Component: {
                 exportName: "AdminStudioContactFormView",
                 path: clientPath,
                 clientProps: {
+                  ...studioNavClientProps,
                   globalSlug: "contact-form",
-                  globalsBasePath: "/studio-globals"
+                  globalsBasePath
                 }
               }
-            }
+            },
+            ...formsEnabled ? {
+              studioForms: {
+                path: formsBasePath,
+                Component: {
+                  exportName: "AdminStudioFormsView",
+                  path: clientPath,
+                  clientProps: {
+                    ...studioNavClientProps,
+                    formsCollectionSlug,
+                    formSubmissionsCollectionSlug,
+                    formUploadsCollectionSlug
+                  }
+                }
+              }
+            } : {},
+            studioMedia: {
+              path: mediaBasePath,
+              Component: {
+                exportName: "AdminStudioMediaView",
+                path: clientPath,
+                clientProps: {
+                  ...studioNavClientProps,
+                  mediaCollectionSlug
+                }
+              }
+            },
+            studioMediaItem: {
+              path: `${mediaBasePath}/:id`,
+              Component: {
+                exportName: "AdminStudioMediaItemView",
+                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,
+                    clientProps: {
+                      ...studioNavClientProps,
+                      ...view.Component.clientProps || {}
+                    }
+                  }
+                }
+              ])
+            )
           } : {}
         },
         providers: [
@@ -213,19 +487,33 @@ function configureAdmin(config) {
             exportName: "ThemeProvider",
             path: clientPath,
             clientProps: {
+              allowThemePreference,
               defaultTheme
             }
           }
         ],
-        afterNavLinks: [
+        beforeLogin: [
           {
-            exportName: "ThemeSwitcher",
+            exportName: "AdminLoginIntro",
             path: clientPath,
             clientProps: {
-              defaultTheme
+              brandName,
+              logoUrl
             }
           }
-        ]
+        ],
+        ...allowThemePreference ? {
+          afterNavLinks: [
+            {
+              exportName: "ThemeSwitcher",
+              path: clientPath,
+              clientProps: {
+                allowThemePreference,
+                defaultTheme
+              }
+            }
+          ]
+        } : {}
       },
       meta: {
         titleSuffix: ` \u2014 ${brandName}`
@@ -240,10 +528,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)]
+        fields: !allowThemePreference || 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 = {
@@ -256,25 +610,110 @@ function configureAdmin(config) {
       return globals2.map((global) => {
         const mapping = labelMap[global.slug];
         if (!mapping) return global;
+        const shouldAttachSiteSettingsEditView = studioEnabled && global.slug === "site-settings";
+        const shouldAttachSocialMediaEditView = studioEnabled && global.slug === "social-media";
         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(
+        const hasCustomEditView = 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 (shouldAttachSiteSettingsEditView && !hasCustomEditView) {
+            return {
+              ...existingEditViews,
+              default: {
+                ...typeof existingEditViews?.default === "object" ? existingEditViews.default : {},
+                Component: {
+                  exportName: "AdminStudioSiteSettingsGlobalView",
+                  path: clientPath,
+                  clientProps: {
+                    ...studioNavClientProps,
+                    globalSlug: global.slug,
+                    mediaCollectionSlug
+                  }
+                }
               }
-            }
+            };
+          }
+          if (shouldAttachSocialMediaEditView && !hasCustomEditView) {
+            return {
+              ...existingEditViews,
+              default: {
+                ...typeof existingEditViews?.default === "object" ? existingEditViews.default : {},
+                Component: {
+                  exportName: "AdminStudioSocialMediaGlobalView",
+                  path: clientPath,
+                  clientProps: {
+                    ...studioNavClientProps,
+                    globalSlug: global.slug
+                  }
+                }
+              }
+            };
+          }
+          if (shouldAttachHeaderEditView && !hasCustomEditView) {
+            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 && !hasCustomEditView) {
+            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 && !hasCustomEditView) {
+            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: {
@@ -282,12 +721,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
                 }
               } : {}
             }