@orion-studios/payload-studio 0.3.0-beta.7 → 0.3.0-beta.9

package/dist/admin/client.js

@@ -2276,51 +2276,15 @@ function WelcomeHeader({
 }
 
 // src/admin/components/studio/AdminStudioDashboard.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var cardStyle = {
-  background: "var(--theme-elevation-0)",
-  border: "1px solid var(--theme-elevation-150)",
-  borderRadius: 16,
-  color: "inherit",
-  padding: "1rem",
-  textDecoration: "none"
-};
-function AdminStudioDashboard() {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { padding: "1.2rem 1.2rem 2.5rem" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h1", { style: { fontSize: "1.6rem", margin: 0 }, children: "Studio" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Pick what you want to edit." }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gap: "0.85rem",
-          gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
-          marginTop: "1.1rem"
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("a", { href: "/admin/pages", style: cardStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontWeight: 900 }, children: "Pages" }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { color: "var(--theme-elevation-600)", marginTop: "0.25rem" }, children: "Edit your site pages with the custom editor." })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("a", { href: "/admin/studio-globals", style: cardStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontWeight: 900 }, children: "Globals" }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { color: "var(--theme-elevation-600)", marginTop: "0.25rem" }, children: "Site settings, header, footer." })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("a", { href: "/admin/media", style: cardStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontWeight: 900 }, children: "Media" }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { color: "var(--theme-elevation-600)", marginTop: "0.25rem" }, children: "Upload and manage images and files." })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
+var import_ui4 = require("@payloadcms/ui");
+
+// src/admin/components/studio/StudioSectionLayout.tsx
+var import_react12 = require("react");
 
 // src/admin/components/studio/AdminStudioNav.tsx
 var import_react11 = require("react");
 var import_ui3 = require("@payloadcms/ui");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var isAdmin = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
@@ -2399,7 +2363,7 @@ function AdminStudioNav(props) {
     padding: compact ? "0.6rem" : "0.6rem 0.75rem",
     textDecoration: "none"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       style: {
@@ -2410,8 +2374,8 @@ function AdminStudioNav(props) {
         padding: compact ? "0.8rem 0.5rem" : "1rem 0.85rem"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "admin-studio-brand", style: { padding: compact ? "0" : "0 0.35rem" }, children: [
-          branding.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "admin-studio-brand", style: { padding: compact ? "0" : "0 0.35rem" }, children: [
+          branding.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
               style: {
@@ -2421,10 +2385,10 @@ function AdminStudioNav(props) {
                 overflow: "hidden",
                 width: compact ? 34 : 40
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("img", { alt: `${resolvedName} logo`, src: branding.logoUrl, style: { height: "100%", objectFit: "cover", width: "100%" } })
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { alt: `${resolvedName} logo`, src: branding.logoUrl, style: { height: "100%", objectFit: "cover", width: "100%" } })
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
               style: {
@@ -2439,14 +2403,14 @@ function AdminStudioNav(props) {
               children: compact ? resolvedName.slice(0, 1).toUpperCase() : resolvedName
             }
           ),
-          !compact ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.85rem" }, children: "Studio" }) : null
+          !compact ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.85rem" }, children: "Studio" }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("nav", { style: { display: "grid", gap: "0.25rem" }, children: links.filter((link) => !link.adminOnly || isAdmin(user)).map((link) => {
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("nav", { style: { display: "grid", gap: "0.25rem" }, children: links.filter((link) => !link.adminOnly || isAdmin(user)).map((link) => {
           const active = link.href === "/admin" ? pathname === "/admin" : link.matchPrefixes.some((prefix) => pathname.startsWith(prefix));
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { href: link.href, style: linkStyle(active), title: link.label, children: compact ? link.label.slice(0, 1) : link.label }, link.href);
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { href: link.href, style: linkStyle(active), title: link.label, children: compact ? link.label.slice(0, 1) : link.label }, link.href);
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { flex: 1 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           "div",
           {
             style: {
@@ -2455,11 +2419,11 @@ function AdminStudioNav(props) {
               textAlign: compact ? "center" : "left"
             },
             children: [
-              !compact ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { color: "var(--theme-elevation-700)", fontSize: "0.85rem" }, children: "Signed in as" }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontWeight: 800, marginBottom: "0.55rem" }, children: typeof user?.email === "string" ? user.email : "User" })
+              !compact ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { color: "var(--theme-elevation-700)", fontSize: "0.85rem" }, children: "Signed in as" }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontWeight: 800, marginBottom: "0.55rem" }, children: typeof user?.email === "string" ? user.email : "User" })
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui3.Logout, {})
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui3.Logout, {})
             ]
           }
         )
@@ -2468,10 +2432,113 @@ function AdminStudioNav(props) {
   );
 }
 
-// src/admin/components/studio/AdminStudioPagesListView.tsx
-var import_react12 = require("react");
-var import_ui4 = require("@payloadcms/ui");
+// src/admin/components/studio/StudioSectionLayout.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var STORAGE_KEY2 = "orion-studio-sidebar-collapsed";
+var ACTIVE_CLASS = "orion-studio-shell-active";
+function StudioSectionLayout({ children, navProps }) {
+  const [collapsed, setCollapsed] = (0, import_react12.useState)(false);
+  (0, import_react12.useEffect)(() => {
+    try {
+      const stored = window.localStorage.getItem(STORAGE_KEY2);
+      if (stored === "1") {
+        setCollapsed(true);
+      }
+    } catch {
+    }
+  }, []);
+  (0, import_react12.useEffect)(() => {
+    document.body.classList.add(ACTIVE_CLASS);
+    return () => {
+      document.body.classList.remove(ACTIVE_CLASS);
+    };
+  }, []);
+  const toggle = () => {
+    setCollapsed((prev) => {
+      const next = !prev;
+      try {
+        window.localStorage.setItem(STORAGE_KEY2, next ? "1" : "0");
+      } catch {
+      }
+      return next;
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: `orion-studio-shell ${collapsed ? "is-collapsed" : ""}`,
+      style: {
+        display: "grid",
+        gridTemplateColumns: collapsed ? "84px minmax(0, 1fr)" : "260px minmax(0, 1fr)",
+        minHeight: "100vh"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("aside", { className: "orion-studio-sidebar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+              className: "orion-studio-sidebar-toggle",
+              onClick: toggle,
+              type: "button",
+              children: collapsed ? ">" : "<"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "orion-studio-sidebar-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AdminStudioNav, { ...navProps, compact: collapsed }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("main", { className: "orion-studio-main", children })
+      ]
+    }
+  );
+}
+
+// src/admin/components/studio/AdminStudioDashboard.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var cardStyle = {
+  background: "var(--theme-elevation-0)",
+  border: "1px solid var(--theme-elevation-150)",
+  borderRadius: 16,
+  color: "inherit",
+  padding: "1rem",
+  textDecoration: "none"
+};
+function AdminStudioDashboard(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(StudioSectionLayout, { navProps: props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui4.SetStepNav, { nav: [{ label: "Dashboard", url: "/admin" }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { style: { fontSize: "1.6rem", margin: 0 }, children: "Studio" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Pick what you want to edit." }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gap: "0.85rem",
+          gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
+          marginTop: "1.1rem"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("a", { href: "/admin/pages", style: cardStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontWeight: 900 }, children: "Pages" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { color: "var(--theme-elevation-600)", marginTop: "0.25rem" }, children: "Edit your site pages with the custom editor." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("a", { href: "/admin/studio-globals", style: cardStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontWeight: 900 }, children: "Globals" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { color: "var(--theme-elevation-600)", marginTop: "0.25rem" }, children: "Site settings, header, footer." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("a", { href: "/admin/media", style: cardStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontWeight: 900 }, children: "Media" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { color: "var(--theme-elevation-600)", marginTop: "0.25rem" }, children: "Upload and manage images and files." })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/admin/components/studio/AdminStudioPagesListView.tsx
+var import_react13 = require("react");
+var import_ui5 = require("@payloadcms/ui");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var isAdmin2 = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
@@ -2489,12 +2556,12 @@ var getPropString2 = (props, key, fallback) => {
   return fallback;
 };
 function AdminStudioPagesListView(props) {
-  const { user } = (0, import_ui4.useAuth)();
+  const { user } = (0, import_ui5.useAuth)();
   const pagesCollectionSlug = getPropString2(props, "pagesCollectionSlug", "pages");
-  const [loading, setLoading] = (0, import_react12.useState)(true);
-  const [error, setError] = (0, import_react12.useState)(null);
-  const [docs, setDocs] = (0, import_react12.useState)([]);
-  const apiURL = (0, import_react12.useMemo)(() => {
+  const [loading, setLoading] = (0, import_react13.useState)(true);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const [docs, setDocs] = (0, import_react13.useState)([]);
+  const apiURL = (0, import_react13.useMemo)(() => {
     const params = new URLSearchParams({
       depth: "0",
       limit: "100",
@@ -2503,7 +2570,7 @@ function AdminStudioPagesListView(props) {
     });
     return `/api/${pagesCollectionSlug}?${params.toString()}`;
   }, [pagesCollectionSlug]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     let cancelled = false;
     const run = async () => {
       setLoading(true);
@@ -2528,14 +2595,14 @@ function AdminStudioPagesListView(props) {
       cancelled = true;
     };
   }, [apiURL]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui4.SetStepNav, { nav: [{ label: "Pages", url: "/admin/pages" }] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { alignItems: "flex-end", display: "flex", gap: "0.75rem" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { style: { margin: 0 }, children: "Pages" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Open a page to edit it in the custom editor." })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StudioSectionLayout, { navProps: props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui5.SetStepNav, { nav: [{ label: "Pages", url: "/admin/pages" }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { alignItems: "flex-end", display: "flex", gap: "0.75rem" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { style: { margin: 0 }, children: "Pages" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Open a page to edit it in the custom editor." })
       ] }),
-      isAdmin2(user) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      isAdmin2(user) ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "a",
         {
           href: `/admin/collections/${pagesCollectionSlug}/create`,
@@ -2551,10 +2618,10 @@ function AdminStudioPagesListView(props) {
         }
       ) : null
     ] }),
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { color: "var(--theme-elevation-600)", marginTop: "1rem" }, children: "Loading..." }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { color: "crimson", marginTop: "1rem" }, children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: [
-      !loading && !error && docs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { color: "var(--theme-elevation-600)", marginTop: "1rem" }, children: "Loading..." }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { color: "crimson", marginTop: "1rem" }, children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: [
+      !loading && !error && docs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "div",
         {
           style: {
@@ -2572,7 +2639,7 @@ function AdminStudioPagesListView(props) {
         const path = typeof doc.path === "string" ? doc.path : "/";
         const status = typeof doc._status === "string" ? doc._status : "";
         if (!id) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "a",
           {
             href: `/admin/pages/${id}`,
@@ -2588,9 +2655,9 @@ function AdminStudioPagesListView(props) {
               textDecoration: "none"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { minWidth: 0 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontWeight: 900, overflow: "hidden", textOverflow: "ellipsis" }, children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { fontWeight: 900, overflow: "hidden", textOverflow: "ellipsis" }, children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   "div",
                   {
                     style: {
@@ -2603,7 +2670,7 @@ function AdminStudioPagesListView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
                 "div",
                 {
                   style: {
@@ -2613,7 +2680,7 @@ function AdminStudioPagesListView(props) {
                     gap: "0.5rem"
                   },
                   children: [
-                    status ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    status ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                       "span",
                       {
                         style: {
@@ -2628,7 +2695,7 @@ function AdminStudioPagesListView(props) {
                         children: status
                       }
                     ) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { color: "var(--theme-elevation-600)", fontWeight: 800 }, children: "Open" })
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { color: "var(--theme-elevation-600)", fontWeight: 800 }, children: "Open" })
                   ]
                 }
               )
@@ -2642,9 +2709,9 @@ function AdminStudioPagesListView(props) {
 }
 
 // src/admin/components/studio/AdminStudioPageEditView.tsx
-var import_react13 = require("react");
-var import_ui5 = require("@payloadcms/ui");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_ui6 = require("@payloadcms/ui");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var isAdmin3 = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
@@ -2679,14 +2746,14 @@ var getPageIDFromPathname = (pathname) => {
   return match?.[1] ? decodeURIComponent(match[1]) : null;
 };
 function AdminStudioPageEditView(props) {
-  const { user } = (0, import_ui5.useAuth)();
-  const iframeRef = (0, import_react13.useRef)(null);
-  const [saving, setSaving] = (0, import_react13.useState)(null);
+  const { user } = (0, import_ui6.useAuth)();
+  const iframeRef = (0, import_react14.useRef)(null);
+  const [saving, setSaving] = (0, import_react14.useState)(null);
   const builderBasePath = getPropString3(props, "builderBasePath", "/builder");
-  const pageIDFromParams = (0, import_react13.useMemo)(() => getParam(props.params, "id"), [props.params]);
-  const [pageID, setPageID] = (0, import_react13.useState)(pageIDFromParams);
-  const [didResolvePathFallback, setDidResolvePathFallback] = (0, import_react13.useState)(false);
-  (0, import_react13.useEffect)(() => {
+  const pageIDFromParams = (0, import_react14.useMemo)(() => getParam(props.params, "id"), [props.params]);
+  const [pageID, setPageID] = (0, import_react14.useState)(pageIDFromParams);
+  const [didResolvePathFallback, setDidResolvePathFallback] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
     if (pageIDFromParams) {
       setPageID(pageIDFromParams);
       setDidResolvePathFallback(true);
@@ -2701,13 +2768,13 @@ function AdminStudioPageEditView(props) {
   const requestSave = (status) => {
     const iframe = iframeRef.current;
     if (!iframe?.contentWindow) {
-      import_ui5.toast.error("Editor is not ready yet. Please try again.");
+      import_ui6.toast.error("Editor is not ready yet. Please try again.");
       return;
     }
     setSaving(status);
     iframe.contentWindow.postMessage({ source: "payload-visual-builder-parent", type: "save", status }, "*");
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const onMessage = (event) => {
       const data = event.data;
       if (!data || data.source !== "payload-visual-builder-child" || data.type !== "save-result") {
@@ -2715,116 +2782,145 @@ function AdminStudioPageEditView(props) {
       }
       setSaving(null);
       if (data.ok) {
-        import_ui5.toast.success(typeof data.message === "string" ? data.message : "Saved.");
+        import_ui6.toast.success(typeof data.message === "string" ? data.message : "Saved.");
       } else {
-        import_ui5.toast.error(typeof data.message === "string" ? data.message : "Save failed.");
+        import_ui6.toast.error(typeof data.message === "string" ? data.message : "Save failed.");
       }
     };
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
   }, []);
   if (!pageID && !didResolvePathFallback) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { padding: "1.2rem" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { style: { margin: 0 }, children: "Page Editor" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { style: { color: "var(--theme-elevation-600)" }, children: "Loading page editor..." })
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StudioSectionLayout, { navProps: props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_ui6.SetStepNav,
+        {
+          nav: [
+            { label: "Pages", url: "/admin/pages" },
+            { label: "Page Editor", url: "/admin/pages" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h1", { style: { margin: 0 }, children: "Page Editor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { style: { color: "var(--theme-elevation-600)" }, children: "Loading page editor..." })
     ] });
   }
   if (!pageID) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { padding: "1.2rem" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { style: { margin: 0 }, children: "Page Editor" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { style: { color: "var(--theme-elevation-600)" }, children: "Missing page ID." })
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StudioSectionLayout, { navProps: props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_ui6.SetStepNav,
+        {
+          nav: [
+            { label: "Pages", url: "/admin/pages" },
+            { label: "Page Editor", url: "/admin/pages" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h1", { style: { margin: 0 }, children: "Page Editor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { style: { color: "var(--theme-elevation-600)" }, children: "Missing page ID." })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", height: "calc(100vh - 0px)" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-      "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StudioSectionLayout, { navProps: props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_ui6.SetStepNav,
       {
-        style: {
-          alignItems: "center",
-          background: "var(--theme-elevation-0)",
-          borderBottom: "1px solid var(--theme-elevation-150)",
-          display: "flex",
-          gap: "0.6rem",
-          justifyContent: "space-between",
-          padding: "0.65rem 0.9rem",
-          position: "sticky",
-          top: 0,
-          zIndex: 20
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { fontWeight: 900 }, children: "Page Editor" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-              "div",
-              {
-                style: {
-                  color: "var(--theme-elevation-600)",
-                  fontSize: "0.85rem",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis"
-                },
-                children: [
-                  "Editing: ",
-                  pageID
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "button",
-              {
-                disabled: saving !== null,
-                onClick: () => requestSave("draft"),
-                style: {
-                  border: "1px solid var(--theme-elevation-300)",
-                  borderRadius: 12,
-                  cursor: saving ? "not-allowed" : "pointer",
-                  fontWeight: 800,
-                  padding: "0.5rem 0.75rem"
-                },
-                type: "button",
-                children: saving === "draft" ? "Saving\u2026" : "Save Draft"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "button",
-              {
-                disabled: !canPublish || saving !== null,
-                onClick: () => requestSave("published"),
-                style: {
-                  background: canPublish ? "var(--theme-elevation-900)" : "var(--theme-elevation-300)",
-                  border: "none",
-                  borderRadius: 12,
-                  color: canPublish ? "var(--theme-elevation-0)" : "var(--theme-elevation-700)",
-                  cursor: !canPublish || saving ? "not-allowed" : "pointer",
-                  fontWeight: 900,
-                  padding: "0.5rem 0.75rem"
-                },
-                type: "button",
-                title: !canPublish ? "You do not have publish permissions." : void 0,
-                children: saving === "published" ? "Publishing\u2026" : "Publish"
-              }
-            )
-          ] })
+        nav: [
+          { label: "Pages", url: "/admin/pages" },
+          { label: `Page ${pageID}`, url: `/admin/pages/${pageID}` }
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "iframe",
-      {
-        ref: iframeRef,
-        src: `${builderBasePath.replace(/\/$/, "")}/${pageID}`,
-        style: { border: "none", height: "100%", width: "100%" },
-        title: "Page Builder"
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", height: "calc(100vh - 120px)" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        "div",
+        {
+          style: {
+            alignItems: "center",
+            background: "var(--theme-elevation-0)",
+            borderBottom: "1px solid var(--theme-elevation-150)",
+            display: "flex",
+            gap: "0.6rem",
+            justifyContent: "space-between",
+            padding: "0.65rem 0.9rem",
+            position: "sticky",
+            top: 0,
+            zIndex: 20
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontWeight: 900 }, children: "Page Editor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                "div",
+                {
+                  style: {
+                    color: "var(--theme-elevation-600)",
+                    fontSize: "0.85rem",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  },
+                  children: [
+                    "Editing: ",
+                    pageID
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "button",
+                {
+                  disabled: saving !== null,
+                  onClick: () => requestSave("draft"),
+                  style: {
+                    border: "1px solid var(--theme-elevation-300)",
+                    borderRadius: 12,
+                    cursor: saving ? "not-allowed" : "pointer",
+                    fontWeight: 800,
+                    padding: "0.5rem 0.75rem"
+                  },
+                  type: "button",
+                  children: saving === "draft" ? "Saving\u2026" : "Save Draft"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "button",
+                {
+                  disabled: !canPublish || saving !== null,
+                  onClick: () => requestSave("published"),
+                  style: {
+                    background: canPublish ? "var(--theme-elevation-900)" : "var(--theme-elevation-300)",
+                    border: "none",
+                    borderRadius: 12,
+                    color: canPublish ? "var(--theme-elevation-0)" : "var(--theme-elevation-700)",
+                    cursor: !canPublish || saving ? "not-allowed" : "pointer",
+                    fontWeight: 900,
+                    padding: "0.5rem 0.75rem"
+                  },
+                  type: "button",
+                  title: !canPublish ? "You do not have publish permissions." : void 0,
+                  children: saving === "published" ? "Publishing\u2026" : "Publish"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "iframe",
+        {
+          ref: iframeRef,
+          src: `${builderBasePath.replace(/\/$/, "")}/${pageID}`,
+          style: { border: "none", height: "100%", width: "100%" },
+          title: "Page Builder"
+        }
+      )
+    ] })
   ] });
 }
 
 // src/admin/components/studio/AdminStudioGlobalsView.tsx
-var import_ui6 = require("@payloadcms/ui");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_ui7 = require("@payloadcms/ui");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var getPropGlobals = (props) => {
   if (!props || typeof props !== "object") return null;
   const direct = props.globals;
@@ -2854,11 +2950,11 @@ function AdminStudioGlobalsView(props) {
     { slug: "header", label: "Header & Navigation" },
     { slug: "footer", label: "Footer" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui6.SetStepNav, { nav: [{ label: "Globals", url: globalsBasePath }] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h1", { style: { margin: 0 }, children: "Globals" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Site-wide settings." }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: globals.map((global) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(StudioSectionLayout, { navProps: props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui7.SetStepNav, { nav: [{ label: "Globals", url: globalsBasePath }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h1", { style: { margin: 0 }, children: "Globals" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Site-wide settings." }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: globals.map((global) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "a",
       {
         href: `/admin/globals/${global.slug}`,
@@ -2871,8 +2967,8 @@ function AdminStudioGlobalsView(props) {
           textDecoration: "none"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontWeight: 900 }, children: global.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { fontWeight: 900 }, children: global.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: [
             "/admin/globals/",
             global.slug
           ] })
@@ -2880,7 +2976,7 @@ function AdminStudioGlobalsView(props) {
       },
       global.slug
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { marginTop: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { marginTop: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "a",
       {
         href: globalsBasePath,
@@ -2892,8 +2988,8 @@ function AdminStudioGlobalsView(props) {
 }
 
 // src/admin/components/studio/AdminStudioMediaView.tsx
-var import_ui7 = require("@payloadcms/ui");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_ui8 = require("@payloadcms/ui");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var getPropString5 = (props, key, fallback) => {
   if (!props || typeof props !== "object") return fallback;
   const direct = props[key];
@@ -2907,11 +3003,11 @@ var getPropString5 = (props, key, fallback) => {
 };
 function AdminStudioMediaView(props) {
   const mediaCollectionSlug = getPropString5(props, "mediaCollectionSlug", "media");
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui7.SetStepNav, { nav: [{ label: "Media", url: "/admin/media" }] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h1", { style: { margin: 0 }, children: "Media" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Media management is currently using Payload's library." }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(StudioSectionLayout, { navProps: props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui8.SetStepNav, { nav: [{ label: "Media", url: "/admin/media" }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h1", { style: { margin: 0 }, children: "Media" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Media management is currently using Payload's library." }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "a",
       {
         href: `/admin/collections/${mediaCollectionSlug}`,
@@ -2924,8 +3020,8 @@ function AdminStudioMediaView(props) {
           textDecoration: "none"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { fontWeight: 900 }, children: "Open Media Library" }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontWeight: 900 }, children: "Open Media Library" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: [
             "/admin/collections/",
             mediaCollectionSlug
           ] })
@@ -2936,8 +3032,8 @@ function AdminStudioMediaView(props) {
 }
 
 // src/admin/components/studio/AdminStudioToolsView.tsx
-var import_ui8 = require("@payloadcms/ui");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_ui9 = require("@payloadcms/ui");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var isAdmin4 = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
@@ -2955,12 +3051,12 @@ var getPropString6 = (props, key, fallback) => {
   return fallback;
 };
 function AdminStudioToolsView(props) {
-  const { user } = (0, import_ui8.useAuth)();
+  const { user } = (0, import_ui9.useAuth)();
   if (!isAdmin4(user)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui8.SetStepNav, { nav: [{ label: "Admin Tools", url: "/admin/tools" }] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h1", { style: { margin: 0 }, children: "Admin Tools" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { style: { color: "var(--theme-elevation-600)" }, children: "You do not have access to this page." })
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(StudioSectionLayout, { navProps: props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ui9.SetStepNav, { nav: [{ label: "Admin Tools", url: "/admin/tools" }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h1", { style: { margin: 0 }, children: "Admin Tools" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { style: { color: "var(--theme-elevation-600)" }, children: "You do not have access to this page." })
     ] });
   }
   const pagesCollectionSlug = getPropString6(props, "pagesCollectionSlug", "pages");
@@ -2973,11 +3069,11 @@ function AdminStudioToolsView(props) {
     { href: "/admin/globals/footer", label: "Raw Footer Global" },
     { href: "/admin/collections/users", label: "Users / Roles" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui8.SetStepNav, { nav: [{ label: "Admin Tools", url: "/admin/tools" }] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h1", { style: { margin: 0 }, children: "Admin Tools" }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Hidden fallback links for administrators." }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(StudioSectionLayout, { navProps: props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ui9.SetStepNav, { nav: [{ label: "Admin Tools", url: "/admin/tools" }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h1", { style: { margin: 0 }, children: "Admin Tools" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Hidden fallback links for administrators." }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "a",
       {
         href: link.href,
@@ -2990,8 +3086,8 @@ function AdminStudioToolsView(props) {
           textDecoration: "none"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { fontWeight: 900 }, children: link.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: link.href })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { fontWeight: 900 }, children: link.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: link.href })
         ]
       },
       link.href
@@ -3000,15 +3096,15 @@ function AdminStudioToolsView(props) {
 }
 
 // src/admin/components/studio/OpenInStudioMenuItem.tsx
-var import_ui9 = require("@payloadcms/ui");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_ui10 = require("@payloadcms/ui");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function OpenInStudioMenuItem({ pagesPathBase = "/admin/pages" }) {
-  const documentInfo = (0, import_ui9.useDocumentInfo)();
+  const documentInfo = (0, import_ui10.useDocumentInfo)();
   const id = documentInfo?.id;
   if (!id) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "a",
     {
       href: `${pagesPathBase}/${id}`,
@@ -3027,19 +3123,19 @@ function OpenInStudioMenuItem({ pagesPathBase = "/admin/pages" }) {
 }
 
 // src/admin/components/studio/PageEditRedirectToStudio.tsx
-var import_react14 = require("react");
-var import_ui10 = require("@payloadcms/ui");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_ui11 = require("@payloadcms/ui");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function PageEditRedirectToStudio({ pagesPathBase = "/admin/pages" }) {
-  const documentInfo = (0, import_ui10.useDocumentInfo)();
+  const documentInfo = (0, import_ui11.useDocumentInfo)();
   const id = documentInfo?.id;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!id) {
       return;
     }
     window.location.replace(`${pagesPathBase}/${id}`);
   }, [id, pagesPathBase]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       style: {
@@ -3051,47 +3147,53 @@ function PageEditRedirectToStudio({ pagesPathBase = "/admin/pages" }) {
         minHeight: "50vh"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { style: { margin: 0 }, children: "Opening Editor..." }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { style: { color: "var(--theme-elevation-600)", margin: 0 }, children: "Redirecting to the custom page editor." }),
-        id ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: `${pagesPathBase}/${id}`, children: "Continue to Editor" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: pagesPathBase, children: "Open Pages" })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { style: { margin: 0 }, children: "Opening Editor..." }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { style: { color: "var(--theme-elevation-600)", margin: 0 }, children: "Redirecting to the custom page editor." }),
+        id ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: `${pagesPathBase}/${id}`, children: "Continue to Editor" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: pagesPathBase, children: "Open Pages" })
       ]
     }
   );
 }
 
 // src/admin/components/studio/StudioBackBreadcrumb.tsx
-var import_ui11 = require("@payloadcms/ui");
+var import_ui12 = require("@payloadcms/ui");
 var import_navigation = require("next/navigation");
-var import_react15 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var resolveSectionLink = (pathname) => {
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var toTitle = (slug) => slug.split("-").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+var buildNav = (pathname) => {
   if (pathname.includes("/globals/")) {
-    return { href: "/admin/studio-globals", label: "Globals" };
+    const slug = pathname.split("/globals/")[1]?.split("/")[0] || "";
+    const currentLabel = slug === "site-settings" ? "Website Settings" : toTitle(slug) || "Global";
+    return [
+      { label: "Globals", url: "/admin/studio-globals" },
+      { label: currentLabel }
+    ];
   }
   if (pathname.includes("/collections/pages") || pathname.startsWith("/admin/pages/")) {
-    return { href: "/admin/pages", label: "Pages" };
+    return [
+      { label: "Pages", url: "/admin/pages" },
+      { label: "Page" }
+    ];
   }
   if (pathname.includes("/collections/media")) {
-    return { href: "/admin/media", label: "Media" };
+    return [
+      { label: "Media", url: "/admin/media" },
+      { label: "Media Item" }
+    ];
   }
   if (pathname.startsWith("/admin/tools")) {
-    return { href: "/admin/tools", label: "Admin Tools" };
+    return [
+      { label: "Admin Tools", url: "/admin/tools" },
+      { label: "Tool" }
+    ];
   }
   return null;
 };
 function StudioBackBreadcrumb() {
   const pathname = (0, import_navigation.usePathname)();
-  const { stepNav } = (0, import_ui11.useStepNav)();
-  const section = resolveSectionLink(pathname);
-  const mergedNav = (0, import_react15.useMemo)(() => {
-    if (!section) return stepNav;
-    const rest = stepNav.filter((item) => {
-      return !(typeof item.label === "string" && item.label.toLowerCase() === section.label.toLowerCase());
-    });
-    return [{ label: section.label, url: section.href }, ...rest];
-  }, [section, stepNav]);
-  if (!section) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui11.SetStepNav, { nav: mergedNav });
+  const nav = buildNav(pathname);
+  if (!nav) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui12.SetStepNav, { nav });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {