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

package/dist/admin/client.js

@@ -1338,25 +1338,31 @@ function Icon({ brandName = "Orion Studio", logoUrl } = {}) {
       {
         style: {
           alignItems: "center",
-          borderRadius: 8,
+          borderRadius: 6,
           display: "flex",
-          height: 32,
+          height: "100%",
           justifyContent: "center",
           overflow: "hidden",
-          width: 32
+          width: "100%"
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "img",
           {
             alt: "Site logo",
             src: resolvedLogo,
-            style: { borderRadius: 8, height: "100%", objectFit: "cover", width: "100%" }
+            style: {
+              borderRadius: 6,
+              height: "100%",
+              objectFit: "contain",
+              padding: 1,
+              width: "100%"
+            }
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { fill: "none", height: "32", viewBox: "0 0 32 32", width: "32", xmlns: "http://www.w3.org/2000/svg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { fill: "none", height: "100%", viewBox: "0 0 32 32", width: "100%", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { fill: "var(--admin-accent, #3b82f6)", height: "32", rx: "8", width: "32" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: "translate(4, 4)", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -2463,122 +2469,9 @@ function AdminStudioNav(props) {
 }
 
 // src/admin/components/studio/AdminStudioPagesListView.tsx
-var import_react13 = require("react");
-var import_ui4 = require("@payloadcms/ui");
-
-// src/admin/components/studio/StudioSectionLayout.tsx
 var import_react12 = require("react");
+var import_ui4 = require("@payloadcms/ui");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var STORAGE_KEY2 = "orion-studio-sidebar-collapsed";
-var getSectionCrumb = (pathname) => {
-  if (pathname.startsWith("/admin/pages") || pathname.includes("/collections/pages")) {
-    return { href: "/admin/pages", label: "Pages" };
-  }
-  if (pathname.startsWith("/admin/studio-globals") || pathname.includes("/globals/")) {
-    return { href: "/admin/studio-globals", label: "Globals" };
-  }
-  if (pathname.startsWith("/admin/media") || pathname.includes("/collections/media")) {
-    return { href: "/admin/media", label: "Media" };
-  }
-  if (pathname.startsWith("/admin/tools")) {
-    return { href: "/admin/tools", label: "Admin Tools" };
-  }
-  return null;
-};
-function StudioSectionLayout({ children, navProps }) {
-  const [collapsed, setCollapsed] = (0, import_react12.useState)(false);
-  const [pathname, setPathname] = (0, import_react12.useState)("");
-  (0, import_react12.useEffect)(() => {
-    try {
-      const stored = window.localStorage.getItem(STORAGE_KEY2);
-      if (stored === "1") setCollapsed(true);
-    } catch {
-    }
-    const update = () => setPathname(window.location.pathname);
-    update();
-    window.addEventListener("popstate", update);
-    return () => window.removeEventListener("popstate", update);
-  }, []);
-  const toggle = () => {
-    setCollapsed((prev) => {
-      const next = !prev;
-      try {
-        window.localStorage.setItem(STORAGE_KEY2, next ? "1" : "0");
-      } catch {
-      }
-      return next;
-    });
-  };
-  const crumb = getSectionCrumb(pathname);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-    "div",
-    {
-      style: {
-        background: "var(--theme-elevation-0)",
-        display: "grid",
-        gridTemplateColumns: collapsed ? "84px minmax(0, 1fr)" : "260px minmax(0, 1fr)",
-        minHeight: "100vh"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-          "aside",
-          {
-            className: "orion-studio-sidebar",
-            style: {
-              borderRight: "1px solid var(--theme-elevation-150)",
-              height: "100vh",
-              overflow: "visible",
-              position: "sticky",
-              top: 0,
-              zIndex: 2
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                "button",
-                {
-                  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-                  onClick: toggle,
-                  style: {
-                    alignItems: "center",
-                    background: "var(--theme-elevation-0)",
-                    border: "1px solid var(--theme-elevation-200)",
-                    borderRadius: 8,
-                    cursor: "pointer",
-                    display: "flex",
-                    height: 30,
-                    justifyContent: "center",
-                    position: "absolute",
-                    right: -15,
-                    top: 10,
-                    width: 30,
-                    zIndex: 5
-                  },
-                  type: "button",
-                  children: collapsed ? ">" : "<"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { height: "100%", overflowY: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AdminStudioNav, { ...navProps, compact: collapsed }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("main", { style: { minWidth: 0, padding: "1.2rem 1.2rem 2.5rem" }, children: [
-          crumb ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { alignItems: "center", display: "flex", gap: "0.35rem", marginBottom: "0.7rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "a",
-            {
-              href: crumb.href,
-              style: { color: "var(--theme-elevation-700)", fontSize: "0.9rem", textDecoration: "none" },
-              children: crumb.label
-            }
-          ) }) : null,
-          children
-        ] })
-      ]
-    }
-  );
-}
-
-// src/admin/components/studio/AdminStudioPagesListView.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
 var isAdmin2 = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
@@ -2598,10 +2491,10 @@ var getPropString2 = (props, key, fallback) => {
 function AdminStudioPagesListView(props) {
   const { user } = (0, import_ui4.useAuth)();
   const pagesCollectionSlug = getPropString2(props, "pagesCollectionSlug", "pages");
-  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 [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 params = new URLSearchParams({
       depth: "0",
       limit: "100",
@@ -2610,7 +2503,7 @@ function AdminStudioPagesListView(props) {
     });
     return `/api/${pagesCollectionSlug}?${params.toString()}`;
   }, [pagesCollectionSlug]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     let cancelled = false;
     const run = async () => {
       setLoading(true);
@@ -2635,13 +2528,14 @@ function AdminStudioPagesListView(props) {
       cancelled = true;
     };
   }, [apiURL]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StudioSectionLayout, { navProps: props, children: [
-    /* @__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." })
+  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." })
       ] }),
-      isAdmin2(user) ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      isAdmin2(user) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "a",
         {
           href: `/admin/collections/${pagesCollectionSlug}/create`,
@@ -2657,10 +2551,10 @@ function AdminStudioPagesListView(props) {
         }
       ) : null
     ] }),
-    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)(
+    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)(
         "div",
         {
           style: {
@@ -2678,7 +2572,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_runtime17.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "a",
           {
             href: `/admin/pages/${id}`,
@@ -2694,9 +2588,9 @@ function AdminStudioPagesListView(props) {
               textDecoration: "none"
             },
             children: [
-              /* @__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)(
+              /* @__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)(
                   "div",
                   {
                     style: {
@@ -2709,7 +2603,7 @@ function AdminStudioPagesListView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                 "div",
                 {
                   style: {
@@ -2719,7 +2613,7 @@ function AdminStudioPagesListView(props) {
                     gap: "0.5rem"
                   },
                   children: [
-                    status ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    status ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       "span",
                       {
                         style: {
@@ -2734,7 +2628,7 @@ function AdminStudioPagesListView(props) {
                         children: status
                       }
                     ) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { color: "var(--theme-elevation-600)", fontWeight: 800 }, children: "Open" })
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { color: "var(--theme-elevation-600)", fontWeight: 800 }, children: "Open" })
                   ]
                 }
               )
@@ -2748,9 +2642,9 @@ function AdminStudioPagesListView(props) {
 }
 
 // src/admin/components/studio/AdminStudioPageEditView.tsx
-var import_react14 = require("react");
+var import_react13 = require("react");
 var import_ui5 = require("@payloadcms/ui");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var isAdmin3 = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
@@ -2786,13 +2680,13 @@ var getPageIDFromPathname = (pathname) => {
 };
 function AdminStudioPageEditView(props) {
   const { user } = (0, import_ui5.useAuth)();
-  const iframeRef = (0, import_react14.useRef)(null);
-  const [saving, setSaving] = (0, import_react14.useState)(null);
+  const iframeRef = (0, import_react13.useRef)(null);
+  const [saving, setSaving] = (0, import_react13.useState)(null);
   const builderBasePath = getPropString3(props, "builderBasePath", "/builder");
-  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)(() => {
+  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)(() => {
     if (pageIDFromParams) {
       setPageID(pageIDFromParams);
       setDidResolvePathFallback(true);
@@ -2813,7 +2707,7 @@ function AdminStudioPageEditView(props) {
     setSaving(status);
     iframe.contentWindow.postMessage({ source: "payload-visual-builder-parent", type: "save", status }, "*");
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const onMessage = (event) => {
       const data = event.data;
       if (!data || data.source !== "payload-visual-builder-child" || data.type !== "save-result") {
@@ -2830,19 +2724,19 @@ function AdminStudioPageEditView(props) {
     return () => window.removeEventListener("message", onMessage);
   }, []);
   if (!pageID && !didResolvePathFallback) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: "1.2rem" }, children: [
-      /* @__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..." })
+    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..." })
     ] });
   }
   if (!pageID) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: "1.2rem" }, children: [
-      /* @__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: { 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)("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", height: "calc(100vh - 0px)" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  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",
       {
         style: {
@@ -2858,9 +2752,9 @@ function AdminStudioPageEditView(props) {
           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)(
+          /* @__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: {
@@ -2876,8 +2770,8 @@ function AdminStudioPageEditView(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__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,
@@ -2893,7 +2787,7 @@ function AdminStudioPageEditView(props) {
                 children: saving === "draft" ? "Saving\u2026" : "Save Draft"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "button",
               {
                 disabled: !canPublish || saving !== null,
@@ -2916,7 +2810,7 @@ function AdminStudioPageEditView(props) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "iframe",
       {
         ref: iframeRef,
@@ -2929,7 +2823,8 @@ function AdminStudioPageEditView(props) {
 }
 
 // src/admin/components/studio/AdminStudioGlobalsView.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_ui6 = require("@payloadcms/ui");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var getPropGlobals = (props) => {
   if (!props || typeof props !== "object") return null;
   const direct = props.globals;
@@ -2959,10 +2854,11 @@ function AdminStudioGlobalsView(props) {
     { slug: "header", label: "Header & Navigation" },
     { slug: "footer", label: "Footer" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(StudioSectionLayout, { navProps: props, children: [
-    /* @__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)(
+  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)(
       "a",
       {
         href: `/admin/globals/${global.slug}`,
@@ -2975,8 +2871,8 @@ function AdminStudioGlobalsView(props) {
           textDecoration: "none"
         },
         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: [
+          /* @__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: [
             "/admin/globals/",
             global.slug
           ] })
@@ -2984,7 +2880,7 @@ function AdminStudioGlobalsView(props) {
       },
       global.slug
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { marginTop: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { marginTop: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "a",
       {
         href: globalsBasePath,
@@ -2996,7 +2892,8 @@ function AdminStudioGlobalsView(props) {
 }
 
 // src/admin/components/studio/AdminStudioMediaView.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_ui7 = require("@payloadcms/ui");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var getPropString5 = (props, key, fallback) => {
   if (!props || typeof props !== "object") return fallback;
   const direct = props[key];
@@ -3010,10 +2907,11 @@ var getPropString5 = (props, key, fallback) => {
 };
 function AdminStudioMediaView(props) {
   const mediaCollectionSlug = getPropString5(props, "mediaCollectionSlug", "media");
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(StudioSectionLayout, { navProps: props, children: [
-    /* @__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)(
+  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)(
       "a",
       {
         href: `/admin/collections/${mediaCollectionSlug}`,
@@ -3026,8 +2924,8 @@ function AdminStudioMediaView(props) {
           textDecoration: "none"
         },
         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: [
+          /* @__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: [
             "/admin/collections/",
             mediaCollectionSlug
           ] })
@@ -3038,8 +2936,8 @@ function AdminStudioMediaView(props) {
 }
 
 // src/admin/components/studio/AdminStudioToolsView.tsx
-var import_ui6 = require("@payloadcms/ui");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_ui8 = require("@payloadcms/ui");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var isAdmin4 = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
@@ -3057,11 +2955,12 @@ var getPropString6 = (props, key, fallback) => {
   return fallback;
 };
 function AdminStudioToolsView(props) {
-  const { user } = (0, import_ui6.useAuth)();
+  const { user } = (0, import_ui8.useAuth)();
   if (!isAdmin4(user)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(StudioSectionLayout, { navProps: props, children: [
-      /* @__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." })
+    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." })
     ] });
   }
   const pagesCollectionSlug = getPropString6(props, "pagesCollectionSlug", "pages");
@@ -3074,10 +2973,11 @@ function AdminStudioToolsView(props) {
     { href: "/admin/globals/footer", label: "Raw Footer Global" },
     { href: "/admin/collections/users", label: "Users / Roles" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(StudioSectionLayout, { navProps: props, children: [
-    /* @__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)(
+  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)(
       "a",
       {
         href: link.href,
@@ -3090,8 +2990,8 @@ function AdminStudioToolsView(props) {
           textDecoration: "none"
         },
         children: [
-          /* @__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 })
+          /* @__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 })
         ]
       },
       link.href
@@ -3100,15 +3000,15 @@ function AdminStudioToolsView(props) {
 }
 
 // src/admin/components/studio/OpenInStudioMenuItem.tsx
-var import_ui7 = require("@payloadcms/ui");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_ui9 = require("@payloadcms/ui");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function OpenInStudioMenuItem({ pagesPathBase = "/admin/pages" }) {
-  const documentInfo = (0, import_ui7.useDocumentInfo)();
+  const documentInfo = (0, import_ui9.useDocumentInfo)();
   const id = documentInfo?.id;
   if (!id) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "a",
     {
       href: `${pagesPathBase}/${id}`,
@@ -3127,19 +3027,19 @@ function OpenInStudioMenuItem({ pagesPathBase = "/admin/pages" }) {
 }
 
 // src/admin/components/studio/PageEditRedirectToStudio.tsx
-var import_react15 = require("react");
-var import_ui8 = require("@payloadcms/ui");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_ui10 = require("@payloadcms/ui");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function PageEditRedirectToStudio({ pagesPathBase = "/admin/pages" }) {
-  const documentInfo = (0, import_ui8.useDocumentInfo)();
+  const documentInfo = (0, import_ui10.useDocumentInfo)();
   const id = documentInfo?.id;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!id) {
       return;
     }
     window.location.replace(`${pagesPathBase}/${id}`);
   }, [id, pagesPathBase]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       style: {
@@ -3151,19 +3051,19 @@ function PageEditRedirectToStudio({ pagesPathBase = "/admin/pages" }) {
         minHeight: "50vh"
       },
       children: [
-        /* @__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" })
+        /* @__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" })
       ]
     }
   );
 }
 
 // src/admin/components/studio/StudioBackBreadcrumb.tsx
-var import_ui9 = require("@payloadcms/ui");
+var import_ui11 = require("@payloadcms/ui");
 var import_navigation = require("next/navigation");
-var import_react16 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var resolveSectionLink = (pathname) => {
   if (pathname.includes("/globals/")) {
     return { href: "/admin/studio-globals", label: "Globals" };
@@ -3181,9 +3081,9 @@ var resolveSectionLink = (pathname) => {
 };
 function StudioBackBreadcrumb() {
   const pathname = (0, import_navigation.usePathname)();
-  const { stepNav } = (0, import_ui9.useStepNav)();
+  const { stepNav } = (0, import_ui11.useStepNav)();
   const section = resolveSectionLink(pathname);
-  const mergedNav = (0, import_react16.useMemo)(() => {
+  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());
@@ -3191,24 +3091,7 @@ function StudioBackBreadcrumb() {
     return [{ label: section.label, url: section.href }, ...rest];
   }, [section, stepNav]);
   if (!section) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui9.SetStepNav, { nav: mergedNav }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { marginBottom: "0.75rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-      "a",
-      {
-        href: section.href,
-        style: {
-          color: "var(--theme-elevation-700)",
-          fontSize: "0.9rem",
-          textDecoration: "none"
-        },
-        children: [
-          "Back to ",
-          section.label
-        ]
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui11.SetStepNav, { nav: mergedNav });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/admin/client.mjs

@@ -161,25 +161,31 @@ function Icon({ brandName = "Orion Studio", logoUrl } = {}) {
       {
         style: {
           alignItems: "center",
-          borderRadius: 8,
+          borderRadius: 6,
           display: "flex",
-          height: 32,
+          height: "100%",
           justifyContent: "center",
           overflow: "hidden",
-          width: 32
+          width: "100%"
         },
         children: /* @__PURE__ */ jsx2(
           "img",
           {
             alt: "Site logo",
             src: resolvedLogo,
-            style: { borderRadius: 8, height: "100%", objectFit: "cover", width: "100%" }
+            style: {
+              borderRadius: 6,
+              height: "100%",
+              objectFit: "contain",
+              padding: 1,
+              width: "100%"
+            }
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsxs2("svg", { fill: "none", height: "32", viewBox: "0 0 32 32", width: "32", xmlns: "http://www.w3.org/2000/svg", children: [
+  return /* @__PURE__ */ jsxs2("svg", { fill: "none", height: "100%", viewBox: "0 0 32 32", width: "100%", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ jsx2("rect", { fill: "var(--admin-accent, #3b82f6)", height: "32", rx: "8", width: "32" }),
     /* @__PURE__ */ jsxs2("g", { transform: "translate(4, 4)", children: [
       /* @__PURE__ */ jsx2(
@@ -1282,122 +1288,9 @@ function AdminStudioNav(props) {
 }
 
 // src/admin/components/studio/AdminStudioPagesListView.tsx
-import { useEffect as useEffect8, useMemo as useMemo2, useState as useState7 } from "react";
-import { useAuth as useAuth2 } from "@payloadcms/ui";
-
-// src/admin/components/studio/StudioSectionLayout.tsx
-import { useEffect as useEffect7, useState as useState6 } from "react";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-var STORAGE_KEY2 = "orion-studio-sidebar-collapsed";
-var getSectionCrumb = (pathname) => {
-  if (pathname.startsWith("/admin/pages") || pathname.includes("/collections/pages")) {
-    return { href: "/admin/pages", label: "Pages" };
-  }
-  if (pathname.startsWith("/admin/studio-globals") || pathname.includes("/globals/")) {
-    return { href: "/admin/studio-globals", label: "Globals" };
-  }
-  if (pathname.startsWith("/admin/media") || pathname.includes("/collections/media")) {
-    return { href: "/admin/media", label: "Media" };
-  }
-  if (pathname.startsWith("/admin/tools")) {
-    return { href: "/admin/tools", label: "Admin Tools" };
-  }
-  return null;
-};
-function StudioSectionLayout({ children, navProps }) {
-  const [collapsed, setCollapsed] = useState6(false);
-  const [pathname, setPathname] = useState6("");
-  useEffect7(() => {
-    try {
-      const stored = window.localStorage.getItem(STORAGE_KEY2);
-      if (stored === "1") setCollapsed(true);
-    } catch {
-    }
-    const update = () => setPathname(window.location.pathname);
-    update();
-    window.addEventListener("popstate", update);
-    return () => window.removeEventListener("popstate", update);
-  }, []);
-  const toggle = () => {
-    setCollapsed((prev) => {
-      const next = !prev;
-      try {
-        window.localStorage.setItem(STORAGE_KEY2, next ? "1" : "0");
-      } catch {
-      }
-      return next;
-    });
-  };
-  const crumb = getSectionCrumb(pathname);
-  return /* @__PURE__ */ jsxs11(
-    "div",
-    {
-      style: {
-        background: "var(--theme-elevation-0)",
-        display: "grid",
-        gridTemplateColumns: collapsed ? "84px minmax(0, 1fr)" : "260px minmax(0, 1fr)",
-        minHeight: "100vh"
-      },
-      children: [
-        /* @__PURE__ */ jsxs11(
-          "aside",
-          {
-            className: "orion-studio-sidebar",
-            style: {
-              borderRight: "1px solid var(--theme-elevation-150)",
-              height: "100vh",
-              overflow: "visible",
-              position: "sticky",
-              top: 0,
-              zIndex: 2
-            },
-            children: [
-              /* @__PURE__ */ jsx12(
-                "button",
-                {
-                  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-                  onClick: toggle,
-                  style: {
-                    alignItems: "center",
-                    background: "var(--theme-elevation-0)",
-                    border: "1px solid var(--theme-elevation-200)",
-                    borderRadius: 8,
-                    cursor: "pointer",
-                    display: "flex",
-                    height: 30,
-                    justifyContent: "center",
-                    position: "absolute",
-                    right: -15,
-                    top: 10,
-                    width: 30,
-                    zIndex: 5
-                  },
-                  type: "button",
-                  children: collapsed ? ">" : "<"
-                }
-              ),
-              /* @__PURE__ */ jsx12("div", { style: { height: "100%", overflowY: "auto" }, children: /* @__PURE__ */ jsx12(AdminStudioNav, { ...navProps, compact: collapsed }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs11("main", { style: { minWidth: 0, padding: "1.2rem 1.2rem 2.5rem" }, children: [
-          crumb ? /* @__PURE__ */ jsx12("div", { style: { alignItems: "center", display: "flex", gap: "0.35rem", marginBottom: "0.7rem" }, children: /* @__PURE__ */ jsx12(
-            "a",
-            {
-              href: crumb.href,
-              style: { color: "var(--theme-elevation-700)", fontSize: "0.9rem", textDecoration: "none" },
-              children: crumb.label
-            }
-          ) }) : null,
-          children
-        ] })
-      ]
-    }
-  );
-}
-
-// src/admin/components/studio/AdminStudioPagesListView.tsx
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useMemo as useMemo2, useState as useState6 } from "react";
+import { SetStepNav, useAuth as useAuth2 } from "@payloadcms/ui";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var isAdmin2 = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
@@ -1417,9 +1310,9 @@ var getPropString2 = (props, key, fallback) => {
 function AdminStudioPagesListView(props) {
   const { user } = useAuth2();
   const pagesCollectionSlug = getPropString2(props, "pagesCollectionSlug", "pages");
-  const [loading, setLoading] = useState7(true);
-  const [error, setError] = useState7(null);
-  const [docs, setDocs] = useState7([]);
+  const [loading, setLoading] = useState6(true);
+  const [error, setError] = useState6(null);
+  const [docs, setDocs] = useState6([]);
   const apiURL = useMemo2(() => {
     const params = new URLSearchParams({
       depth: "0",
@@ -1429,7 +1322,7 @@ function AdminStudioPagesListView(props) {
     });
     return `/api/${pagesCollectionSlug}?${params.toString()}`;
   }, [pagesCollectionSlug]);
-  useEffect8(() => {
+  useEffect7(() => {
     let cancelled = false;
     const run = async () => {
       setLoading(true);
@@ -1454,13 +1347,14 @@ function AdminStudioPagesListView(props) {
       cancelled = true;
     };
   }, [apiURL]);
-  return /* @__PURE__ */ jsxs12(StudioSectionLayout, { navProps: props, children: [
-    /* @__PURE__ */ jsxs12("div", { style: { alignItems: "flex-end", display: "flex", gap: "0.75rem" }, children: [
-      /* @__PURE__ */ jsxs12("div", { style: { flex: 1 }, children: [
-        /* @__PURE__ */ jsx13("h1", { style: { margin: 0 }, children: "Pages" }),
-        /* @__PURE__ */ jsx13("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Open a page to edit it in the custom editor." })
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    /* @__PURE__ */ jsx12(SetStepNav, { nav: [{ label: "Pages", url: "/admin/pages" }] }),
+    /* @__PURE__ */ jsxs11("div", { style: { alignItems: "flex-end", display: "flex", gap: "0.75rem" }, children: [
+      /* @__PURE__ */ jsxs11("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx12("h1", { style: { margin: 0 }, children: "Pages" }),
+        /* @__PURE__ */ jsx12("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Open a page to edit it in the custom editor." })
       ] }),
-      isAdmin2(user) ? /* @__PURE__ */ jsx13(
+      isAdmin2(user) ? /* @__PURE__ */ jsx12(
         "a",
         {
           href: `/admin/collections/${pagesCollectionSlug}/create`,
@@ -1476,10 +1370,10 @@ function AdminStudioPagesListView(props) {
         }
       ) : null
     ] }),
-    loading ? /* @__PURE__ */ jsx13("div", { style: { color: "var(--theme-elevation-600)", marginTop: "1rem" }, children: "Loading..." }) : null,
-    error ? /* @__PURE__ */ jsx13("div", { style: { color: "crimson", marginTop: "1rem" }, children: error }) : null,
-    /* @__PURE__ */ jsxs12("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: [
-      !loading && !error && docs.length === 0 ? /* @__PURE__ */ jsx13(
+    loading ? /* @__PURE__ */ jsx12("div", { style: { color: "var(--theme-elevation-600)", marginTop: "1rem" }, children: "Loading..." }) : null,
+    error ? /* @__PURE__ */ jsx12("div", { style: { color: "crimson", marginTop: "1rem" }, children: error }) : null,
+    /* @__PURE__ */ jsxs11("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: [
+      !loading && !error && docs.length === 0 ? /* @__PURE__ */ jsx12(
         "div",
         {
           style: {
@@ -1497,7 +1391,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__ */ jsxs12(
+        return /* @__PURE__ */ jsxs11(
           "a",
           {
             href: `/admin/pages/${id}`,
@@ -1513,9 +1407,9 @@ function AdminStudioPagesListView(props) {
               textDecoration: "none"
             },
             children: [
-              /* @__PURE__ */ jsxs12("div", { style: { minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx13("div", { style: { fontWeight: 900, overflow: "hidden", textOverflow: "ellipsis" }, children: title }),
-                /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsxs11("div", { style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx12("div", { style: { fontWeight: 900, overflow: "hidden", textOverflow: "ellipsis" }, children: title }),
+                /* @__PURE__ */ jsx12(
                   "div",
                   {
                     style: {
@@ -1528,7 +1422,7 @@ function AdminStudioPagesListView(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs12(
+              /* @__PURE__ */ jsxs11(
                 "div",
                 {
                   style: {
@@ -1538,7 +1432,7 @@ function AdminStudioPagesListView(props) {
                     gap: "0.5rem"
                   },
                   children: [
-                    status ? /* @__PURE__ */ jsx13(
+                    status ? /* @__PURE__ */ jsx12(
                       "span",
                       {
                         style: {
@@ -1553,7 +1447,7 @@ function AdminStudioPagesListView(props) {
                         children: status
                       }
                     ) : null,
-                    /* @__PURE__ */ jsx13("span", { style: { color: "var(--theme-elevation-600)", fontWeight: 800 }, children: "Open" })
+                    /* @__PURE__ */ jsx12("span", { style: { color: "var(--theme-elevation-600)", fontWeight: 800 }, children: "Open" })
                   ]
                 }
               )
@@ -1567,9 +1461,9 @@ function AdminStudioPagesListView(props) {
 }
 
 // src/admin/components/studio/AdminStudioPageEditView.tsx
-import { useEffect as useEffect9, useMemo as useMemo3, useRef as useRef3, useState as useState8 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo3, useRef as useRef3, useState as useState7 } from "react";
 import { toast, useAuth as useAuth3 } from "@payloadcms/ui";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var isAdmin3 = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
@@ -1606,12 +1500,12 @@ var getPageIDFromPathname = (pathname) => {
 function AdminStudioPageEditView(props) {
   const { user } = useAuth3();
   const iframeRef = useRef3(null);
-  const [saving, setSaving] = useState8(null);
+  const [saving, setSaving] = useState7(null);
   const builderBasePath = getPropString3(props, "builderBasePath", "/builder");
   const pageIDFromParams = useMemo3(() => getParam(props.params, "id"), [props.params]);
-  const [pageID, setPageID] = useState8(pageIDFromParams);
-  const [didResolvePathFallback, setDidResolvePathFallback] = useState8(false);
-  useEffect9(() => {
+  const [pageID, setPageID] = useState7(pageIDFromParams);
+  const [didResolvePathFallback, setDidResolvePathFallback] = useState7(false);
+  useEffect8(() => {
     if (pageIDFromParams) {
       setPageID(pageIDFromParams);
       setDidResolvePathFallback(true);
@@ -1632,7 +1526,7 @@ function AdminStudioPageEditView(props) {
     setSaving(status);
     iframe.contentWindow.postMessage({ source: "payload-visual-builder-parent", type: "save", status }, "*");
   };
-  useEffect9(() => {
+  useEffect8(() => {
     const onMessage = (event) => {
       const data = event.data;
       if (!data || data.source !== "payload-visual-builder-child" || data.type !== "save-result") {
@@ -1649,19 +1543,19 @@ function AdminStudioPageEditView(props) {
     return () => window.removeEventListener("message", onMessage);
   }, []);
   if (!pageID && !didResolvePathFallback) {
-    return /* @__PURE__ */ jsxs13("div", { style: { padding: "1.2rem" }, children: [
-      /* @__PURE__ */ jsx14("h1", { style: { margin: 0 }, children: "Page Editor" }),
-      /* @__PURE__ */ jsx14("p", { style: { color: "var(--theme-elevation-600)" }, children: "Loading page editor..." })
+    return /* @__PURE__ */ jsxs12("div", { style: { padding: "1.2rem" }, children: [
+      /* @__PURE__ */ jsx13("h1", { style: { margin: 0 }, children: "Page Editor" }),
+      /* @__PURE__ */ jsx13("p", { style: { color: "var(--theme-elevation-600)" }, children: "Loading page editor..." })
     ] });
   }
   if (!pageID) {
-    return /* @__PURE__ */ jsxs13("div", { style: { padding: "1.2rem" }, children: [
-      /* @__PURE__ */ jsx14("h1", { style: { margin: 0 }, children: "Page Editor" }),
-      /* @__PURE__ */ jsx14("p", { style: { color: "var(--theme-elevation-600)" }, children: "Missing page ID." })
+    return /* @__PURE__ */ jsxs12("div", { style: { padding: "1.2rem" }, children: [
+      /* @__PURE__ */ jsx13("h1", { style: { margin: 0 }, children: "Page Editor" }),
+      /* @__PURE__ */ jsx13("p", { style: { color: "var(--theme-elevation-600)" }, children: "Missing page ID." })
     ] });
   }
-  return /* @__PURE__ */ jsxs13("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", height: "calc(100vh - 0px)" }, children: [
-    /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs12("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", height: "calc(100vh - 0px)" }, children: [
+    /* @__PURE__ */ jsxs12(
       "div",
       {
         style: {
@@ -1677,9 +1571,9 @@ function AdminStudioPageEditView(props) {
           zIndex: 20
         },
         children: [
-          /* @__PURE__ */ jsxs13("div", { style: { minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx14("div", { style: { fontWeight: 900 }, children: "Page Editor" }),
-            /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsxs12("div", { style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx13("div", { style: { fontWeight: 900 }, children: "Page Editor" }),
+            /* @__PURE__ */ jsxs12(
               "div",
               {
                 style: {
@@ -1695,8 +1589,8 @@ function AdminStudioPageEditView(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs13("div", { style: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-            /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsxs12("div", { style: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 disabled: saving !== null,
@@ -1712,7 +1606,7 @@ function AdminStudioPageEditView(props) {
                 children: saving === "draft" ? "Saving\u2026" : "Save Draft"
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx13(
               "button",
               {
                 disabled: !canPublish || saving !== null,
@@ -1735,7 +1629,7 @@ function AdminStudioPageEditView(props) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx13(
       "iframe",
       {
         ref: iframeRef,
@@ -1748,7 +1642,8 @@ function AdminStudioPageEditView(props) {
 }
 
 // src/admin/components/studio/AdminStudioGlobalsView.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { SetStepNav as SetStepNav2 } from "@payloadcms/ui";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var getPropGlobals = (props) => {
   if (!props || typeof props !== "object") return null;
   const direct = props.globals;
@@ -1778,10 +1673,11 @@ function AdminStudioGlobalsView(props) {
     { slug: "header", label: "Header & Navigation" },
     { slug: "footer", label: "Footer" }
   ];
-  return /* @__PURE__ */ jsxs14(StudioSectionLayout, { navProps: props, children: [
-    /* @__PURE__ */ jsx15("h1", { style: { margin: 0 }, children: "Globals" }),
-    /* @__PURE__ */ jsx15("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Site-wide settings." }),
-    /* @__PURE__ */ jsx15("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: globals.map((global) => /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
+    /* @__PURE__ */ jsx14(SetStepNav2, { nav: [{ label: "Globals", url: globalsBasePath }] }),
+    /* @__PURE__ */ jsx14("h1", { style: { margin: 0 }, children: "Globals" }),
+    /* @__PURE__ */ jsx14("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Site-wide settings." }),
+    /* @__PURE__ */ jsx14("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: globals.map((global) => /* @__PURE__ */ jsxs13(
       "a",
       {
         href: `/admin/globals/${global.slug}`,
@@ -1794,8 +1690,8 @@ function AdminStudioGlobalsView(props) {
           textDecoration: "none"
         },
         children: [
-          /* @__PURE__ */ jsx15("div", { style: { fontWeight: 900 }, children: global.label }),
-          /* @__PURE__ */ jsxs14("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: [
+          /* @__PURE__ */ jsx14("div", { style: { fontWeight: 900 }, children: global.label }),
+          /* @__PURE__ */ jsxs13("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: [
             "/admin/globals/",
             global.slug
           ] })
@@ -1803,7 +1699,7 @@ function AdminStudioGlobalsView(props) {
       },
       global.slug
     )) }),
-    /* @__PURE__ */ jsx15("div", { style: { marginTop: "1rem" }, children: /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14("div", { style: { marginTop: "1rem" }, children: /* @__PURE__ */ jsx14(
       "a",
       {
         href: globalsBasePath,
@@ -1815,7 +1711,8 @@ function AdminStudioGlobalsView(props) {
 }
 
 // src/admin/components/studio/AdminStudioMediaView.tsx
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { SetStepNav as SetStepNav3 } from "@payloadcms/ui";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var getPropString5 = (props, key, fallback) => {
   if (!props || typeof props !== "object") return fallback;
   const direct = props[key];
@@ -1829,10 +1726,11 @@ var getPropString5 = (props, key, fallback) => {
 };
 function AdminStudioMediaView(props) {
   const mediaCollectionSlug = getPropString5(props, "mediaCollectionSlug", "media");
-  return /* @__PURE__ */ jsxs15(StudioSectionLayout, { navProps: props, children: [
-    /* @__PURE__ */ jsx16("h1", { style: { margin: 0 }, children: "Media" }),
-    /* @__PURE__ */ jsx16("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Media management is currently using Payload's library." }),
-    /* @__PURE__ */ jsx16("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsx15(SetStepNav3, { nav: [{ label: "Media", url: "/admin/media" }] }),
+    /* @__PURE__ */ jsx15("h1", { style: { margin: 0 }, children: "Media" }),
+    /* @__PURE__ */ jsx15("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Media management is currently using Payload's library." }),
+    /* @__PURE__ */ jsx15("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: /* @__PURE__ */ jsxs14(
       "a",
       {
         href: `/admin/collections/${mediaCollectionSlug}`,
@@ -1845,8 +1743,8 @@ function AdminStudioMediaView(props) {
           textDecoration: "none"
         },
         children: [
-          /* @__PURE__ */ jsx16("div", { style: { fontWeight: 900 }, children: "Open Media Library" }),
-          /* @__PURE__ */ jsxs15("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: [
+          /* @__PURE__ */ jsx15("div", { style: { fontWeight: 900 }, children: "Open Media Library" }),
+          /* @__PURE__ */ jsxs14("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: [
             "/admin/collections/",
             mediaCollectionSlug
           ] })
@@ -1857,8 +1755,8 @@ function AdminStudioMediaView(props) {
 }
 
 // src/admin/components/studio/AdminStudioToolsView.tsx
-import { useAuth as useAuth4 } from "@payloadcms/ui";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { SetStepNav as SetStepNav4, useAuth as useAuth4 } from "@payloadcms/ui";
+import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var isAdmin4 = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
@@ -1878,9 +1776,10 @@ var getPropString6 = (props, key, fallback) => {
 function AdminStudioToolsView(props) {
   const { user } = useAuth4();
   if (!isAdmin4(user)) {
-    return /* @__PURE__ */ jsxs16(StudioSectionLayout, { navProps: props, children: [
-      /* @__PURE__ */ jsx17("h1", { style: { margin: 0 }, children: "Admin Tools" }),
-      /* @__PURE__ */ jsx17("p", { style: { color: "var(--theme-elevation-600)" }, children: "You do not have access to this page." })
+    return /* @__PURE__ */ jsxs15(Fragment6, { children: [
+      /* @__PURE__ */ jsx16(SetStepNav4, { nav: [{ label: "Admin Tools", url: "/admin/tools" }] }),
+      /* @__PURE__ */ jsx16("h1", { style: { margin: 0 }, children: "Admin Tools" }),
+      /* @__PURE__ */ jsx16("p", { style: { color: "var(--theme-elevation-600)" }, children: "You do not have access to this page." })
     ] });
   }
   const pagesCollectionSlug = getPropString6(props, "pagesCollectionSlug", "pages");
@@ -1893,10 +1792,11 @@ function AdminStudioToolsView(props) {
     { href: "/admin/globals/footer", label: "Raw Footer Global" },
     { href: "/admin/collections/users", label: "Users / Roles" }
   ];
-  return /* @__PURE__ */ jsxs16(StudioSectionLayout, { navProps: props, children: [
-    /* @__PURE__ */ jsx17("h1", { style: { margin: 0 }, children: "Admin Tools" }),
-    /* @__PURE__ */ jsx17("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Hidden fallback links for administrators." }),
-    /* @__PURE__ */ jsx17("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: links.map((link) => /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs15(Fragment6, { children: [
+    /* @__PURE__ */ jsx16(SetStepNav4, { nav: [{ label: "Admin Tools", url: "/admin/tools" }] }),
+    /* @__PURE__ */ jsx16("h1", { style: { margin: 0 }, children: "Admin Tools" }),
+    /* @__PURE__ */ jsx16("p", { style: { color: "var(--theme-elevation-600)", marginTop: "0.35rem" }, children: "Hidden fallback links for administrators." }),
+    /* @__PURE__ */ jsx16("div", { style: { display: "grid", gap: "0.6rem", marginTop: "1rem" }, children: links.map((link) => /* @__PURE__ */ jsxs15(
       "a",
       {
         href: link.href,
@@ -1909,8 +1809,8 @@ function AdminStudioToolsView(props) {
           textDecoration: "none"
         },
         children: [
-          /* @__PURE__ */ jsx17("div", { style: { fontWeight: 900 }, children: link.label }),
-          /* @__PURE__ */ jsx17("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: link.href })
+          /* @__PURE__ */ jsx16("div", { style: { fontWeight: 900 }, children: link.label }),
+          /* @__PURE__ */ jsx16("div", { style: { color: "var(--theme-elevation-600)", fontSize: "0.9rem" }, children: link.href })
         ]
       },
       link.href
@@ -1920,14 +1820,14 @@ function AdminStudioToolsView(props) {
 
 // src/admin/components/studio/OpenInStudioMenuItem.tsx
 import { useDocumentInfo } from "@payloadcms/ui";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function OpenInStudioMenuItem({ pagesPathBase = "/admin/pages" }) {
   const documentInfo = useDocumentInfo();
   const id = documentInfo?.id;
   if (!id) {
     return null;
   }
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     "a",
     {
       href: `${pagesPathBase}/${id}`,
@@ -1946,19 +1846,19 @@ function OpenInStudioMenuItem({ pagesPathBase = "/admin/pages" }) {
 }
 
 // src/admin/components/studio/PageEditRedirectToStudio.tsx
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { useDocumentInfo as useDocumentInfo2 } from "@payloadcms/ui";
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function PageEditRedirectToStudio({ pagesPathBase = "/admin/pages" }) {
   const documentInfo = useDocumentInfo2();
   const id = documentInfo?.id;
-  useEffect10(() => {
+  useEffect9(() => {
     if (!id) {
       return;
     }
     window.location.replace(`${pagesPathBase}/${id}`);
   }, [id, pagesPathBase]);
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       style: {
@@ -1970,19 +1870,19 @@ function PageEditRedirectToStudio({ pagesPathBase = "/admin/pages" }) {
         minHeight: "50vh"
       },
       children: [
-        /* @__PURE__ */ jsx19("h2", { style: { margin: 0 }, children: "Opening Editor..." }),
-        /* @__PURE__ */ jsx19("p", { style: { color: "var(--theme-elevation-600)", margin: 0 }, children: "Redirecting to the custom page editor." }),
-        id ? /* @__PURE__ */ jsx19("a", { href: `${pagesPathBase}/${id}`, children: "Continue to Editor" }) : /* @__PURE__ */ jsx19("a", { href: pagesPathBase, children: "Open Pages" })
+        /* @__PURE__ */ jsx18("h2", { style: { margin: 0 }, children: "Opening Editor..." }),
+        /* @__PURE__ */ jsx18("p", { style: { color: "var(--theme-elevation-600)", margin: 0 }, children: "Redirecting to the custom page editor." }),
+        id ? /* @__PURE__ */ jsx18("a", { href: `${pagesPathBase}/${id}`, children: "Continue to Editor" }) : /* @__PURE__ */ jsx18("a", { href: pagesPathBase, children: "Open Pages" })
       ]
     }
   );
 }
 
 // src/admin/components/studio/StudioBackBreadcrumb.tsx
-import { SetStepNav, useStepNav } from "@payloadcms/ui";
+import { SetStepNav as SetStepNav5, useStepNav } from "@payloadcms/ui";
 import { usePathname } from "next/navigation";
 import { useMemo as useMemo4 } from "react";
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var resolveSectionLink = (pathname) => {
   if (pathname.includes("/globals/")) {
     return { href: "/admin/studio-globals", label: "Globals" };
@@ -2010,24 +1910,7 @@ function StudioBackBreadcrumb() {
     return [{ label: section.label, url: section.href }, ...rest];
   }, [section, stepNav]);
   if (!section) return null;
-  return /* @__PURE__ */ jsxs18(Fragment3, { children: [
-    /* @__PURE__ */ jsx20(SetStepNav, { nav: mergedNav }),
-    /* @__PURE__ */ jsx20("div", { style: { marginBottom: "0.75rem" }, children: /* @__PURE__ */ jsxs18(
-      "a",
-      {
-        href: section.href,
-        style: {
-          color: "var(--theme-elevation-700)",
-          fontSize: "0.9rem",
-          textDecoration: "none"
-        },
-        children: [
-          "Back to ",
-          section.label
-        ]
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsx19(SetStepNav5, { nav: mergedNav });
 }
 export {
   AdminStudioDashboard,

package/dist/admin.css

@@ -336,8 +336,7 @@ html {
 }
 
 .template-default__nav,
-.nav,
-.orion-studio-sidebar {
+.nav {
   background: var(--orion-sidebar-bg) !important;
 }
 
@@ -387,3 +386,11 @@ html {
 .admin-studio-brand {
   padding-left: 0 !important;
 }
+
+/* Keep breadcrumb root icon/logo fully visible in compact step-nav slot */
+.step-nav__home > span,
+.step-nav__home .graphic-icon,
+.step-nav__home > span > div {
+  height: 100%;
+  width: 100%;
+}

package/dist/index.mjs

@@ -1,18 +1,18 @@
 import {
   admin_exports
 } from "./chunk-J6HM2LPT.mjs";
-import {
-  studio_exports
-} from "./chunk-WLXZDMK3.mjs";
-import {
-  studio_pages_exports
-} from "./chunk-Q76U4Z53.mjs";
 import {
   blocks_exports
 } from "./chunk-L62FYT57.mjs";
 import {
   nextjs_exports
 } from "./chunk-ZLLNO5FM.mjs";
+import {
+  studio_pages_exports
+} from "./chunk-Q76U4Z53.mjs";
+import {
+  studio_exports
+} from "./chunk-WLXZDMK3.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {
   admin_exports as admin,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.3.0-beta.6",
+  "version": "0.3.0-beta.7",
   "description": "Unified Payload CMS toolkit for Orion Studios",
   "types": "./dist/index.d.ts",
   "exports": {