@orion-studios/payload-studio 0.6.0-beta.20 → 0.6.0-beta.22

package/dist/admin/client.js

@@ -4040,15 +4040,15 @@ function AdminStudioDashboard(rawProps) {
 }
 
 // src/admin/components/studio/AdminStudioPagesListView.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_link2 = __toESM(require("next/link"));
+var import_ui7 = require("@payloadcms/ui");
+
+// src/admin/components/studio/AdminStudioNewPageView.tsx
+var import_react17 = require("react");
 var import_ui5 = require("@payloadcms/ui");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var hasAdminAccess = (user) => {
-  if (!user || typeof user !== "object") return false;
-  const role = user.role;
-  return typeof role === "string" && (role === "admin" || role === "developer");
-};
+var pageTemplates = ["standard", "landing", "services", "contact"];
 var getPropString3 = (props, key, fallback) => {
   if (!props || typeof props !== "object") return fallback;
   const direct = props[key];
@@ -4060,83 +4060,107 @@ var getPropString3 = (props, key, fallback) => {
   }
   return fallback;
 };
-function AdminStudioPagesListView(props) {
+var canManagePages = (user) => {
+  if (!user || typeof user !== "object") return false;
+  const role = user.role;
+  return role === "admin" || role === "developer" || role === "editor";
+};
+var slugify = (value) => value.toLowerCase().trim().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
+function AdminStudioNewPageView(props) {
   const { user } = (0, import_ui5.useAuth)();
-  const pagesCollectionSlug = getPropString3(props, "pagesCollectionSlug", "pages");
   const adminBasePath = useAdminBasePath();
-  const newPagePath = resolveAdminPath(adminBasePath, "/pages/new");
-  const [loading, setLoading] = (0, import_react17.useState)(true);
+  const pagesCollectionSlug = getPropString3(props, "pagesCollectionSlug", "pages");
+  const [submitting, setSubmitting] = (0, import_react17.useState)(false);
   const [error, setError] = (0, import_react17.useState)(null);
-  const [docs, setDocs] = (0, import_react17.useState)([]);
-  const apiURL = (0, import_react17.useMemo)(() => {
-    const params = new URLSearchParams({
-      depth: "0",
-      limit: "100",
-      sort: "-updatedAt",
-      draft: "true"
-    });
-    return `/api/${pagesCollectionSlug}?${params.toString()}`;
-  }, [pagesCollectionSlug]);
-  (0, import_react17.useEffect)(() => {
-    let cancelled = false;
-    const run = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const res = await fetch(apiURL, { credentials: "include" });
-        if (!res.ok) {
-          const body = await res.text();
-          throw new Error(body || "Failed to fetch pages");
-        }
-        const data = await res.json();
-        if (!cancelled) {
-          setDocs(Array.isArray(data.docs) ? data.docs : []);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : "Failed to fetch pages");
-        }
-      } finally {
-        if (!cancelled) {
-          setLoading(false);
-        }
+  if (!canManagePages(user)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      AdminPage,
+      {
+        breadcrumbs: [
+          { label: "Dashboard", href: adminBasePath },
+          { label: "Pages", href: resolveAdminPath(adminBasePath, "/pages") },
+          { label: "New Page" }
+        ],
+        description: "You do not have access to create pages.",
+        title: "New Page",
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "orion-admin-card", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("strong", { children: "Access denied" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "This section is restricted to administrator, developer, and editor accounts." })
+        ] })
       }
-    };
-    void run();
-    return () => {
-      cancelled = true;
-    };
-  }, [apiURL]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    ) });
+  }
+  const createPage = async (event) => {
+    event.preventDefault();
+    setSubmitting(true);
+    setError(null);
+    try {
+      const formData = new FormData(event.currentTarget);
+      const titleValue = String(formData.get("title") || "").trim();
+      const slugValue = String(formData.get("slug") || "").trim();
+      const templateValue = String(formData.get("template") || "standard").trim();
+      const template = pageTemplates.includes(templateValue) ? templateValue : "standard";
+      const title = titleValue || "Untitled Page";
+      const slug = slugValue || slugify(title) || "untitled-page";
+      const response = await fetch(`/api/${pagesCollectionSlug}`, {
+        body: JSON.stringify({
+          _status: "draft",
+          slug,
+          template,
+          title
+        }),
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        method: "POST"
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to create page (${response.status}).`);
+      }
+      const payload = await response.json();
+      const id = typeof payload.id === "string" || typeof payload.id === "number" ? String(payload.id) : "";
+      if (!id) {
+        throw new Error("Page created but no document ID was returned.");
+      }
+      window.location.assign(resolveAdminPath(adminBasePath, `/pages/${id}`));
+    } catch (createError) {
+      setError(createError instanceof Error ? createError.message : "Failed to create page.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     AdminPage,
     {
-      actions: hasAdminAccess(user) ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_link2.default, { className: "orion-admin-action-button", href: newPagePath, children: "New Page" }) : null,
       breadcrumbs: [
         { label: "Dashboard", href: adminBasePath },
-        { label: "Pages" }
+        { label: "Pages", href: resolveAdminPath(adminBasePath, "/pages") },
+        { label: "New Page" }
       ],
-      description: "Open a page to edit it in the inline custom builder.",
-      title: "Pages",
-      children: [
-        loading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "orion-admin-list-meta", children: "Loading..." }) : null,
+      description: "Create a new page and open it in the custom editor.",
+      title: "New Page",
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("form", { className: "orion-admin-form", onSubmit: createPage, children: [
         error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "orion-admin-error", children: error }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "orion-admin-list", children: [
-          !loading && !error && docs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "orion-admin-card", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("strong", { children: "No pages yet" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Create the first page to start building content." })
-          ] }) : null,
-          docs.map((doc) => {
-            const id = typeof doc.id === "string" || typeof doc.id === "number" ? String(doc.id) : "";
-            if (!id) return null;
-            const title = typeof doc.title === "string" ? doc.title : "Untitled Page";
-            const status = typeof doc._status === "string" ? doc._status : "draft";
-            return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_link2.default, { className: "orion-admin-list-item", href: resolveAdminPath(adminBasePath, `/pages/${id}`), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("strong", { children: title }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "orion-admin-pill", children: status })
-            ] }, id);
-          })
-        ] })
-      ]
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { children: [
+          "Title",
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { name: "title", placeholder: "Services", required: true, type: "text" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { children: [
+          "Slug",
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { name: "slug", placeholder: "services", type: "text" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { children: [
+          "Template",
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("select", { defaultValue: "standard", name: "template", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "standard", children: "Standard" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "landing", children: "Landing" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "contact", children: "Contact" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "services", children: "Services" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { disabled: submitting, type: "submit", children: submitting ? "Creating..." : "Create Page" })
+      ] })
     }
   ) });
 }
@@ -4145,7 +4169,7 @@ function AdminStudioPagesListView(props) {
 var import_react18 = require("react");
 var import_ui6 = require("@payloadcms/ui");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var hasAdminAccess2 = (user) => {
+var hasAdminAccess = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
   return typeof role === "string" && (role === "admin" || role === "developer");
@@ -4206,7 +4230,7 @@ function AdminStudioPageEditView(props) {
     }
     setDidResolvePathFallback(true);
   }, [pageIDFromParams]);
-  const canPublish = hasAdminAccess2(user) || isEditor(user);
+  const canPublish = hasAdminAccess(user) || isEditor(user);
   const refreshUnpublishedState = async (id) => {
     try {
       const response = await fetch(
@@ -4489,11 +4513,13 @@ function AdminStudioPageEditView(props) {
   ] }) });
 }
 
-// src/admin/components/studio/AdminStudioNewPageView.tsx
-var import_react19 = require("react");
-var import_ui7 = require("@payloadcms/ui");
+// src/admin/components/studio/AdminStudioPagesListView.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var pageTemplates = ["standard", "landing", "services", "contact"];
+var hasAdminAccess2 = (user) => {
+  if (!user || typeof user !== "object") return false;
+  const role = user.role;
+  return typeof role === "string" && (role === "admin" || role === "developer");
+};
 var getPropString5 = (props, key, fallback) => {
   if (!props || typeof props !== "object") return fallback;
   const direct = props[key];
@@ -4505,107 +4531,104 @@ var getPropString5 = (props, key, fallback) => {
   }
   return fallback;
 };
-var canManagePages = (user) => {
-  if (!user || typeof user !== "object") return false;
-  const role = user.role;
-  return role === "admin" || role === "developer" || role === "editor";
-};
-var slugify = (value) => value.toLowerCase().trim().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
-function AdminStudioNewPageView(props) {
-  const { user } = (0, import_ui7.useAuth)();
+function AdminStudioPagesListView(props) {
   const adminBasePath = useAdminBasePath();
+  const [pathname, setPathname] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
+    const updatePathname = () => setPathname(window.location.pathname);
+    updatePathname();
+    window.addEventListener("popstate", updatePathname);
+    return () => window.removeEventListener("popstate", updatePathname);
+  }, []);
+  const pagesPath = resolveAdminPath(adminBasePath, "/pages");
+  const nestedPagePath = pathname && pathname.startsWith(`${pagesPath}/`) ? pathname.slice(`${pagesPath}/`.length).split("/")[0] : "";
+  if (nestedPagePath === "new") {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AdminStudioNewPageView, { ...props });
+  }
+  if (nestedPagePath) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AdminStudioPageEditView, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AdminStudioPagesIndexView, { ...props, adminBasePath });
+}
+function AdminStudioPagesIndexView({
+  adminBasePath,
+  ...props
+}) {
+  const { user } = (0, import_ui7.useAuth)();
   const pagesCollectionSlug = getPropString5(props, "pagesCollectionSlug", "pages");
-  const [submitting, setSubmitting] = (0, import_react19.useState)(false);
+  const newPagePath = resolveAdminPath(adminBasePath, "/pages/new");
+  const [loading, setLoading] = (0, import_react19.useState)(true);
   const [error, setError] = (0, import_react19.useState)(null);
-  if (!canManagePages(user)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      AdminPage,
-      {
-        breadcrumbs: [
-          { label: "Dashboard", href: adminBasePath },
-          { label: "Pages", href: resolveAdminPath(adminBasePath, "/pages") },
-          { label: "New Page" }
-        ],
-        description: "You do not have access to create pages.",
-        title: "New Page",
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "orion-admin-card", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("strong", { children: "Access denied" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "This section is restricted to administrator, developer, and editor accounts." })
-        ] })
-      }
-    ) });
-  }
-  const createPage = async (event) => {
-    event.preventDefault();
-    setSubmitting(true);
-    setError(null);
-    try {
-      const formData = new FormData(event.currentTarget);
-      const titleValue = String(formData.get("title") || "").trim();
-      const slugValue = String(formData.get("slug") || "").trim();
-      const templateValue = String(formData.get("template") || "standard").trim();
-      const template = pageTemplates.includes(templateValue) ? templateValue : "standard";
-      const title = titleValue || "Untitled Page";
-      const slug = slugValue || slugify(title) || "untitled-page";
-      const response = await fetch(`/api/${pagesCollectionSlug}`, {
-        body: JSON.stringify({
-          _status: "draft",
-          slug,
-          template,
-          title
-        }),
-        credentials: "include",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        method: "POST"
-      });
-      if (!response.ok) {
-        throw new Error(`Failed to create page (${response.status}).`);
-      }
-      const payload = await response.json();
-      const id = typeof payload.id === "string" || typeof payload.id === "number" ? String(payload.id) : "";
-      if (!id) {
-        throw new Error("Page created but no document ID was returned.");
+  const [docs, setDocs] = (0, import_react19.useState)([]);
+  const apiURL = (0, import_react19.useMemo)(() => {
+    const params = new URLSearchParams({
+      depth: "0",
+      limit: "100",
+      sort: "-updatedAt",
+      draft: "true"
+    });
+    return `/api/${pagesCollectionSlug}?${params.toString()}`;
+  }, [pagesCollectionSlug]);
+  (0, import_react19.useEffect)(() => {
+    let cancelled = false;
+    const run = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await fetch(apiURL, { credentials: "include" });
+        if (!res.ok) {
+          const body = await res.text();
+          throw new Error(body || "Failed to fetch pages");
+        }
+        const data = await res.json();
+        if (!cancelled) {
+          setDocs(Array.isArray(data.docs) ? data.docs : []);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Failed to fetch pages");
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
       }
-      window.location.assign(resolveAdminPath(adminBasePath, `/pages/${id}`));
-    } catch (createError) {
-      setError(createError instanceof Error ? createError.message : "Failed to create page.");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiURL]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     AdminPage,
     {
+      actions: hasAdminAccess2(user) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_link2.default, { className: "orion-admin-action-button", href: newPagePath, children: "New Page" }) : null,
       breadcrumbs: [
         { label: "Dashboard", href: adminBasePath },
-        { label: "Pages", href: resolveAdminPath(adminBasePath, "/pages") },
-        { label: "New Page" }
+        { label: "Pages" }
       ],
-      description: "Create a new page and open it in the custom editor.",
-      title: "New Page",
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("form", { className: "orion-admin-form", onSubmit: createPage, children: [
+      description: "Open a page to edit it in the inline custom builder.",
+      title: "Pages",
+      children: [
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "orion-admin-list-meta", children: "Loading..." }) : null,
         error ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "orion-admin-error", children: error }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { children: [
-          "Title",
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", { name: "title", placeholder: "Services", required: true, type: "text" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { children: [
-          "Slug",
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", { name: "slug", placeholder: "services", type: "text" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { children: [
-          "Template",
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("select", { defaultValue: "standard", name: "template", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "standard", children: "Standard" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "landing", children: "Landing" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "contact", children: "Contact" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "services", children: "Services" })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { disabled: submitting, type: "submit", children: submitting ? "Creating..." : "Create Page" })
-      ] })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "orion-admin-list", children: [
+          !loading && !error && docs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "orion-admin-card", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("strong", { children: "No pages yet" }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Create the first page to start building content." })
+          ] }) : null,
+          docs.map((doc) => {
+            const id = typeof doc.id === "string" || typeof doc.id === "number" ? String(doc.id) : "";
+            if (!id) return null;
+            const title = typeof doc.title === "string" ? doc.title : "Untitled Page";
+            const status = typeof doc._status === "string" ? doc._status : "draft";
+            return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_link2.default, { className: "orion-admin-list-item", href: resolveAdminPath(adminBasePath, `/pages/${id}`), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("strong", { children: title }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "orion-admin-pill", children: status })
+            ] }, id);
+          })
+        ] })
+      ]
     }
   ) });
 }