@orion-studios/payload-studio 0.6.0-beta.18 → 0.6.0-beta.181

package/dist/admin/client.mjs

@@ -9,7 +9,7 @@ import {
   SiteFooterPreview,
   adminNavIcons,
   buildAdminPageLinkOptions
-} from "../chunk-KPIX7OSV.mjs";
+} from "../chunk-NF37A575.mjs";
 import "../chunk-ROTPP5CU.mjs";
 import {
   BlockPicker,
@@ -1273,9 +1273,9 @@ function WelcomeHeader({
 }
 
 // src/admin/components/studio/AdminStudioNav.tsx
-import { useMemo } from "react";
+import { useMemo, useState as useState7 } from "react";
 import { usePathname } from "next/navigation";
-import { Logout, useAuth } from "@payloadcms/ui";
+import { useAuth } from "@payloadcms/ui";
 
 // src/admin/components/studio/adminPathUtils.ts
 import { useEffect as useEffect6, useState as useState6 } from "react";
@@ -1648,8 +1648,26 @@ function NavIcon({ sectionID }) {
       return null;
   }
 }
+function LogoutIcon() {
+  const props = {
+    fill: "none",
+    height: iconSize2,
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 24 24",
+    width: iconSize2
+  };
+  return /* @__PURE__ */ jsxs11("svg", { ...props, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx12("path", { d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" }),
+    /* @__PURE__ */ jsx12("polyline", { points: "10 17 5 12 10 7" }),
+    /* @__PURE__ */ jsx12("line", { x1: "5", y1: "12", x2: "17", y2: "12" })
+  ] });
+}
 function AdminStudioNav(props) {
   const { user } = useAuth();
+  const [loggingOut, setLoggingOut] = useState7(false);
   const brandName = getPropString(props, "brandName", "Orion Studio");
   const logoUrl = getPropString(props, "logoUrl", "");
   const compact = getPropBoolean(props, "compact", false);
@@ -1660,6 +1678,18 @@ function AdminStudioNav(props) {
   const dashboardPath = adminBasePath;
   const userRole = readUserRole(user);
   const links = useMemo(() => buildStudioNavItems(props, adminBasePath), [adminBasePath, props]);
+  const logout = async () => {
+    setLoggingOut(true);
+    try {
+      await fetch("/api/users/logout", {
+        credentials: "include",
+        method: "POST"
+      });
+      window.location.href = `${adminBasePath}/login`;
+    } finally {
+      setLoggingOut(false);
+    }
+  };
   if (isStudioShellRoute(pathname, props, adminBasePath)) {
     return null;
   }
@@ -1750,7 +1780,38 @@ function AdminStudioNav(props) {
                 /* @__PURE__ */ jsx12("div", { style: { color: "var(--theme-elevation-700)", fontSize: "0.85rem" }, children: "Signed in as" }),
                 /* @__PURE__ */ jsx12("div", { style: { fontWeight: 800, marginBottom: "0.55rem" }, children: typeof user?.email === "string" ? user.email : "User" })
               ] }) : null,
-              /* @__PURE__ */ jsx12(Logout, {})
+              /* @__PURE__ */ jsxs11(
+                "button",
+                {
+                  "aria-label": "Log out",
+                  disabled: loggingOut,
+                  onClick: () => void logout(),
+                  style: {
+                    alignItems: "center",
+                    background: "transparent",
+                    border: "1px solid var(--theme-elevation-150)",
+                    borderRadius: 10,
+                    color: "var(--theme-elevation-900)",
+                    cursor: loggingOut ? "not-allowed" : "pointer",
+                    display: "inline-flex",
+                    font: "inherit",
+                    fontWeight: 800,
+                    gap: compact ? 0 : "0.45rem",
+                    justifyContent: "center",
+                    minHeight: compact ? 48 : 34,
+                    minWidth: compact ? 48 : 0,
+                    opacity: loggingOut ? 0.55 : 1,
+                    padding: compact ? 0 : "0.4rem 0.62rem",
+                    width: compact ? 48 : "auto"
+                  },
+                  title: "Log out",
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx12(LogoutIcon, {}),
+                    !compact ? /* @__PURE__ */ jsx12("span", { children: loggingOut ? "Logging out..." : "Log out" }) : null
+                  ]
+                }
+              )
             ]
           }
         )
@@ -1840,7 +1901,7 @@ function AdminPage({ title, description, breadcrumbs, actions, children }) {
 }
 
 // src/admin/components/studio/AdminStudioDashboardClient.tsx
-import { startTransition, useEffect as useEffect7, useMemo as useMemo3, useState as useState7 } from "react";
+import { startTransition, useEffect as useEffect7, useMemo as useMemo3, useState as useState8 } from "react";
 import Link from "next/link";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1e3;
@@ -2062,7 +2123,7 @@ function AdminStudioDashboardClient({
   children
 }) {
   const role = isRole(userRole) ? userRole : void 0;
-  const [state, setState] = useState7(
+  const [state, setState] = useState8(
     () => formsEnabled && canReviewForms(role) ? {
       forms: { status: "loading" },
       media: { status: "loading" },
@@ -2667,15 +2728,16 @@ function AdminStudioDashboard(rawProps) {
 }
 
 // src/admin/components/studio/AdminStudioPagesListView.tsx
-import { useEffect as useEffect8, useMemo as useMemo4, useState as useState8 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo5, useState as useState11 } from "react";
 import Link2 from "next/link";
+import { usePathname as usePathname3 } from "next/navigation";
+import { useAuth as useAuth4 } from "@payloadcms/ui";
+
+// src/admin/components/studio/AdminStudioNewPageView.tsx
+import { useState as useState9 } from "react";
 import { useAuth as useAuth3 } from "@payloadcms/ui";
 import { jsx as jsx18, jsxs as jsxs15 } from "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];
@@ -2687,101 +2749,115 @@ 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 } = useAuth3();
-  const pagesCollectionSlug = getPropString3(props, "pagesCollectionSlug", "pages");
   const adminBasePath = useAdminBasePath();
-  const newPagePath = resolveAdminPath(adminBasePath, "/pages/new");
-  const [loading, setLoading] = useState8(true);
-  const [error, setError] = useState8(null);
-  const [docs, setDocs] = useState8([]);
-  const apiURL = useMemo4(() => {
-    const params = new URLSearchParams({
-      depth: "0",
-      limit: "100",
-      sort: "-updatedAt",
-      draft: "true"
-    });
-    return `/api/${pagesCollectionSlug}?${params.toString()}`;
-  }, [pagesCollectionSlug]);
-  useEffect8(() => {
-    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);
-        }
+  const pagesCollectionSlug = getPropString3(props, "pagesCollectionSlug", "pages");
+  const [submitting, setSubmitting] = useState9(false);
+  const [error, setError] = useState9(null);
+  if (!canManagePages(user)) {
+    return /* @__PURE__ */ jsx18(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsx18(
+      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__ */ jsxs15("div", { className: "orion-admin-card", children: [
+          /* @__PURE__ */ jsx18("strong", { children: "Access denied" }),
+          /* @__PURE__ */ jsx18("span", { children: "This section is restricted to administrator, developer, and editor accounts." })
+        ] })
       }
-    };
-    void run();
-    return () => {
-      cancelled = true;
-    };
-  }, [apiURL]);
-  return /* @__PURE__ */ jsx18(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs15(
+    ) });
+  }
+  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__ */ jsx18(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsx18(
     AdminPage,
     {
-      actions: hasAdminAccess(user) ? /* @__PURE__ */ jsx18(Link2, { 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__ */ jsx18("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__ */ jsxs15("form", { className: "orion-admin-form", onSubmit: createPage, children: [
         error ? /* @__PURE__ */ jsx18("div", { className: "orion-admin-error", children: error }) : null,
-        /* @__PURE__ */ jsxs15("div", { className: "orion-admin-list", children: [
-          !loading && !error && docs.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: "orion-admin-card", children: [
-            /* @__PURE__ */ jsx18("strong", { children: "No pages yet" }),
-            /* @__PURE__ */ jsx18("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__ */ jsxs15(Link2, { className: "orion-admin-list-item", href: resolveAdminPath(adminBasePath, `/pages/${id}`), children: [
-              /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18("strong", { children: title }) }),
-              /* @__PURE__ */ jsx18("span", { className: "orion-admin-pill", children: status })
-            ] }, id);
-          })
-        ] })
-      ]
+        /* @__PURE__ */ jsxs15("label", { children: [
+          "Title",
+          /* @__PURE__ */ jsx18("input", { name: "title", placeholder: "Services", required: true, type: "text" })
+        ] }),
+        /* @__PURE__ */ jsxs15("label", { children: [
+          "Slug",
+          /* @__PURE__ */ jsx18("input", { name: "slug", placeholder: "services", type: "text" })
+        ] }),
+        /* @__PURE__ */ jsxs15("label", { children: [
+          "Template",
+          /* @__PURE__ */ jsxs15("select", { defaultValue: "standard", name: "template", children: [
+            /* @__PURE__ */ jsx18("option", { value: "standard", children: "Standard" }),
+            /* @__PURE__ */ jsx18("option", { value: "landing", children: "Landing" }),
+            /* @__PURE__ */ jsx18("option", { value: "contact", children: "Contact" }),
+            /* @__PURE__ */ jsx18("option", { value: "services", children: "Services" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx18("button", { disabled: submitting, type: "submit", children: submitting ? "Creating..." : "Create Page" })
+      ] })
     }
   ) });
 }
 
 // src/admin/components/studio/AdminStudioPageEditView.tsx
-import { useEffect as useEffect9, useMemo as useMemo5, useRef as useRef3, useState as useState9 } from "react";
-import { SetStepNav, toast, useAuth as useAuth4 } from "@payloadcms/ui";
+import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef3, useState as useState10 } from "react";
+import { SetStepNav } from "@payloadcms/ui";
 import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
-var hasAdminAccess2 = (user) => {
-  if (!user || typeof user !== "object") return false;
-  const role = user.role;
-  return typeof role === "string" && (role === "admin" || role === "developer");
-};
-var isEditor = (user) => {
-  if (!user || typeof user !== "object") return false;
-  const role = user.role;
-  return typeof role === "string" && role === "editor";
-};
 var getPropString4 = (props, key, fallback) => {
   if (!props || typeof props !== "object") return fallback;
   const direct = props[key];
@@ -2809,20 +2885,14 @@ var getPageIDFromPathname = (pathname) => {
   return pagePart ? decodeURIComponent(pagePart) : null;
 };
 function AdminStudioPageEditView(props) {
-  const { user } = useAuth4();
   const adminBasePath = useAdminBasePath();
   const iframeRef = useRef3(null);
-  const [saving, setSaving] = useState9(null);
-  const [dirty, setDirty] = useState9(false);
-  const [hasUnpublishedChanges, setHasUnpublishedChanges] = useState9(false);
-  const [canUndo, setCanUndo] = useState9(false);
-  const [canRedo, setCanRedo] = useState9(false);
   const builderBasePath = getPropString4(props, "builderBasePath", "/builder");
   const pagesPath = resolveAdminPath(adminBasePath, "/pages");
-  const pageIDFromParams = useMemo5(() => getParam(props.params, "id"), [props.params]);
-  const [pageID, setPageID] = useState9(pageIDFromParams);
-  const [didResolvePathFallback, setDidResolvePathFallback] = useState9(false);
-  useEffect9(() => {
+  const pageIDFromParams = useMemo4(() => getParam(props.params, "id"), [props.params]);
+  const [pageID, setPageID] = useState10(pageIDFromParams);
+  const [didResolvePathFallback, setDidResolvePathFallback] = useState10(false);
+  useEffect8(() => {
     if (pageIDFromParams) {
       setPageID(pageIDFromParams);
       setDidResolvePathFallback(true);
@@ -2833,96 +2903,6 @@ function AdminStudioPageEditView(props) {
     }
     setDidResolvePathFallback(true);
   }, [pageIDFromParams]);
-  const canPublish = hasAdminAccess2(user) || isEditor(user);
-  const refreshUnpublishedState = async (id) => {
-    try {
-      const response = await fetch(
-        `/api/pages/versions?depth=0&limit=25&sort=-updatedAt&where[parent][equals]=${encodeURIComponent(id)}`,
-        {
-          credentials: "include"
-        }
-      );
-      if (!response.ok) {
-        return;
-      }
-      const payload = await response.json();
-      const docs = Array.isArray(payload.docs) ? payload.docs : [];
-      let latestDraft = 0;
-      let latestPublished = 0;
-      docs.forEach((doc) => {
-        const status = doc.version?._status;
-        const millis = typeof doc.updatedAt === "string" ? Date.parse(doc.updatedAt) : Number.NaN;
-        if (!Number.isFinite(millis)) {
-          return;
-        }
-        if (status === "draft") {
-          latestDraft = Math.max(latestDraft, millis);
-        }
-        if (status === "published") {
-          latestPublished = Math.max(latestPublished, millis);
-        }
-      });
-      setHasUnpublishedChanges(latestDraft > 0 && latestDraft >= latestPublished);
-    } catch {
-    }
-  };
-  useEffect9(() => {
-    if (!pageID) {
-      return;
-    }
-    void refreshUnpublishedState(pageID);
-  }, [pageID]);
-  const requestSave = (status) => {
-    const iframe = iframeRef.current;
-    if (!iframe?.contentWindow) {
-      toast.error("Editor is not ready yet. Please try again.");
-      return;
-    }
-    setSaving(status);
-    iframe.contentWindow.postMessage({ source: "payload-visual-builder-parent", type: "save", status }, "*");
-  };
-  const requestHistoryAction = (type) => {
-    const iframe = iframeRef.current;
-    if (!iframe?.contentWindow) {
-      toast.error("Editor is not ready yet. Please try again.");
-      return;
-    }
-    iframe.contentWindow.postMessage({ source: "payload-visual-builder-parent", type }, "*");
-  };
-  useEffect9(() => {
-    const onMessage = (event) => {
-      const data = event.data;
-      if (!data || data.source !== "payload-visual-builder-child" || typeof data.type !== "string") {
-        return;
-      }
-      if (data.type === "dirty-state") {
-        setDirty(Boolean(data.dirty));
-        return;
-      }
-      if (data.type === "history-state") {
-        setCanUndo(Boolean(data.canUndo));
-        setCanRedo(Boolean(data.canRedo));
-        return;
-      }
-      if (data.type === "save-result") {
-        setSaving(null);
-        if (data.ok) {
-          if (data.status === "draft") {
-            setHasUnpublishedChanges(true);
-          } else if (data.status === "published") {
-            setHasUnpublishedChanges(false);
-          } else if (pageID) {
-            void refreshUnpublishedState(pageID);
-          }
-          toast.success(typeof data.message === "string" ? data.message : "Saved.");
-        } else {
-          toast.error(typeof data.message === "string" ? data.message : "Save failed.");
-        }
-      }
-    };
-    window.addEventListener("message", onMessage);
-    return () => window.removeEventListener("message", onMessage);
-  }, []);
   if (!pageID && !didResolvePathFallback) {
     return /* @__PURE__ */ jsx19(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
       /* @__PURE__ */ jsx19(
@@ -2963,164 +2943,25 @@ function AdminStudioPageEditView(props) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs16("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", height: "calc(100vh - 120px)" }, children: [
-      /* @__PURE__ */ jsxs16(
-        "div",
-        {
-          style: {
-            alignItems: "center",
-            background: "color-mix(in srgb, var(--orion-admin-card-bg) 96%, white)",
-            border: "1px solid var(--orion-admin-card-border)",
-            borderRadius: 14,
-            boxShadow: "0 12px 28px rgba(62, 42, 24, 0.08)",
-            colorScheme: "light",
-            display: "flex",
-            gap: "0.6rem",
-            justifyContent: "space-between",
-            padding: "0.65rem 0.9rem",
-            position: "sticky",
-            top: 0,
-            zIndex: 20
-          },
-          children: [
-            /* @__PURE__ */ jsxs16("div", { style: { minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx19("div", { style: { color: "var(--orion-admin-text)", fontWeight: 900 }, children: "Page Editor" }),
-              /* @__PURE__ */ jsxs16(
-                "div",
-                {
-                  style: {
-                    color: "var(--orion-admin-muted)",
-                    fontSize: "0.85rem",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  },
-                  children: [
-                    "Editing: ",
-                    pageID
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs16("div", { style: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-              /* @__PURE__ */ jsx19("div", { style: { color: dirty ? "var(--orion-admin-text)" : "var(--orion-admin-muted)", fontSize: "0.85rem", fontWeight: 700 }, children: dirty ? "Unsaved changes" : "All changes saved" }),
-              /* @__PURE__ */ jsx19(
-                "div",
-                {
-                  style: {
-                    background: hasUnpublishedChanges ? "#fff3cd" : "var(--orion-admin-accent-subtle)",
-                    border: `1px solid ${hasUnpublishedChanges ? "#f0c36d" : "color-mix(in srgb, var(--orion-admin-accent) 36%, transparent)"}`,
-                    borderRadius: 999,
-                    color: hasUnpublishedChanges ? "#6a4a00" : "var(--orion-admin-accent)",
-                    fontSize: "0.75rem",
-                    fontWeight: 800,
-                    padding: "0.2rem 0.55rem",
-                    whiteSpace: "nowrap"
-                  },
-                  title: hasUnpublishedChanges ? "There are saved draft changes not yet published." : "The live page matches the latest published content.",
-                  children: hasUnpublishedChanges ? "Unpublished draft changes" : "Live is up to date"
-                }
-              ),
-              /* @__PURE__ */ jsx19(
-                "button",
-                {
-                  disabled: !canUndo,
-                  onClick: () => requestHistoryAction("undo"),
-                  style: {
-                    background: "transparent",
-                    border: "1px solid var(--orion-admin-card-border)",
-                    borderRadius: 12,
-                    cursor: canUndo ? "pointer" : "not-allowed",
-                    color: "var(--orion-admin-text)",
-                    fontWeight: 800,
-                    padding: "0.5rem 0.65rem"
-                  },
-                  type: "button",
-                  children: "Undo"
-                }
-              ),
-              /* @__PURE__ */ jsx19(
-                "button",
-                {
-                  disabled: !canRedo,
-                  onClick: () => requestHistoryAction("redo"),
-                  style: {
-                    background: "transparent",
-                    border: "1px solid var(--orion-admin-card-border)",
-                    borderRadius: 12,
-                    cursor: canRedo ? "pointer" : "not-allowed",
-                    color: "var(--orion-admin-text)",
-                    fontWeight: 800,
-                    padding: "0.5rem 0.65rem"
-                  },
-                  type: "button",
-                  children: "Redo"
-                }
-              ),
-              /* @__PURE__ */ jsx19(
-                "button",
-                {
-                  disabled: saving !== null,
-                  onClick: () => requestSave("draft"),
-                  style: {
-                    background: "var(--orion-admin-card-bg)",
-                    border: "1px solid var(--orion-admin-card-border)",
-                    borderRadius: 12,
-                    cursor: saving ? "not-allowed" : "pointer",
-                    color: "var(--orion-admin-text)",
-                    fontWeight: 800,
-                    padding: "0.5rem 0.75rem"
-                  },
-                  type: "button",
-                  children: saving === "draft" ? "Saving\u2026" : "Save Draft"
-                }
-              ),
-              /* @__PURE__ */ jsx19(
-                "button",
-                {
-                  disabled: !canPublish || saving !== null,
-                  onClick: () => requestSave("published"),
-                  style: {
-                    background: canPublish ? "var(--orion-admin-button-bg)" : "var(--orion-admin-card-border)",
-                    border: "none",
-                    borderRadius: 12,
-                    color: canPublish ? "var(--orion-admin-button-text)" : "var(--orion-admin-text)",
-                    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__ */ jsx19(
-        "iframe",
-        {
-          ref: iframeRef,
-          src: `${builderBasePath.replace(/\/$/, "")}/${pageID}`,
-          style: { border: "none", height: "100%", width: "100%" },
-          title: "Page Builder",
-          onLoad: () => {
-            const iframe = iframeRef.current;
-            if (!iframe?.contentWindow) return;
-            iframe.contentWindow.postMessage({ source: "payload-visual-builder-parent", type: "dirty-check-request" }, "*");
-            iframe.contentWindow.postMessage({ source: "payload-visual-builder-parent", type: "history-check-request" }, "*");
-          }
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx19("div", { style: { height: "100dvh", overflow: "hidden" }, children: /* @__PURE__ */ jsx19(
+      "iframe",
+      {
+        ref: iframeRef,
+        src: `${builderBasePath.replace(/\/$/, "")}/${pageID}`,
+        style: { border: "none", height: "100%", width: "100%" },
+        title: "Page Builder"
+      }
+    ) })
   ] }) });
 }
 
-// src/admin/components/studio/AdminStudioNewPageView.tsx
-import { useState as useState10 } from "react";
-import { useAuth as useAuth5 } from "@payloadcms/ui";
+// src/admin/components/studio/AdminStudioPagesListView.tsx
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
-var pageTemplates = ["standard", "landing", "services", "contact"];
+var hasAdminAccess = (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];
@@ -3132,107 +2973,98 @@ 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 } = useAuth5();
+function AdminStudioPagesListView(props) {
   const adminBasePath = useAdminBasePath();
-  const pagesCollectionSlug = getPropString5(props, "pagesCollectionSlug", "pages");
-  const [submitting, setSubmitting] = useState10(false);
-  const [error, setError] = useState10(null);
-  if (!canManagePages(user)) {
-    return /* @__PURE__ */ jsx20(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsx20(
-      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__ */ jsxs17("div", { className: "orion-admin-card", children: [
-          /* @__PURE__ */ jsx20("strong", { children: "Access denied" }),
-          /* @__PURE__ */ jsx20("span", { children: "This section is restricted to administrator, developer, and editor accounts." })
-        ] })
-      }
-    ) });
+  const pathname = usePathname3();
+  const pagesPath = resolveAdminPath(adminBasePath, "/pages");
+  const nestedPagePath = pathname && pathname.startsWith(`${pagesPath}/`) ? pathname.slice(`${pagesPath}/`.length).split("/")[0] : "";
+  if (nestedPagePath === "new") {
+    return /* @__PURE__ */ jsx20(AdminStudioNewPageView, { ...props });
   }
-  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.");
+  if (nestedPagePath) {
+    return /* @__PURE__ */ jsx20(AdminStudioPageEditView, { ...props });
+  }
+  return /* @__PURE__ */ jsx20(AdminStudioPagesIndexView, { ...props, adminBasePath });
+}
+function AdminStudioPagesIndexView({
+  adminBasePath,
+  ...props
+}) {
+  const { user } = useAuth4();
+  const pagesCollectionSlug = getPropString5(props, "pagesCollectionSlug", "pages");
+  const newPagePath = resolveAdminPath(adminBasePath, "/pages/new");
+  const [loading, setLoading] = useState11(true);
+  const [error, setError] = useState11(null);
+  const [docs, setDocs] = useState11([]);
+  const apiURL = useMemo5(() => {
+    const params = new URLSearchParams({
+      depth: "0",
+      limit: "100",
+      sort: "-updatedAt",
+      draft: "true"
+    });
+    return `/api/${pagesCollectionSlug}?${params.toString()}`;
+  }, [pagesCollectionSlug]);
+  useEffect9(() => {
+    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__ */ jsx20(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsx20(
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiURL]);
+  return /* @__PURE__ */ jsx20(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs17(
     AdminPage,
     {
+      actions: hasAdminAccess(user) ? /* @__PURE__ */ jsx20(Link2, { 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__ */ jsxs17("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__ */ jsx20("div", { className: "orion-admin-list-meta", children: "Loading..." }) : null,
         error ? /* @__PURE__ */ jsx20("div", { className: "orion-admin-error", children: error }) : null,
-        /* @__PURE__ */ jsxs17("label", { children: [
-          "Title",
-          /* @__PURE__ */ jsx20("input", { name: "title", placeholder: "Services", required: true, type: "text" })
-        ] }),
-        /* @__PURE__ */ jsxs17("label", { children: [
-          "Slug",
-          /* @__PURE__ */ jsx20("input", { name: "slug", placeholder: "services", type: "text" })
-        ] }),
-        /* @__PURE__ */ jsxs17("label", { children: [
-          "Template",
-          /* @__PURE__ */ jsxs17("select", { defaultValue: "standard", name: "template", children: [
-            /* @__PURE__ */ jsx20("option", { value: "standard", children: "Standard" }),
-            /* @__PURE__ */ jsx20("option", { value: "landing", children: "Landing" }),
-            /* @__PURE__ */ jsx20("option", { value: "contact", children: "Contact" }),
-            /* @__PURE__ */ jsx20("option", { value: "services", children: "Services" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx20("button", { disabled: submitting, type: "submit", children: submitting ? "Creating..." : "Create Page" })
-      ] })
+        /* @__PURE__ */ jsxs17("div", { className: "orion-admin-list", children: [
+          !loading && !error && docs.length === 0 ? /* @__PURE__ */ jsxs17("div", { className: "orion-admin-card", children: [
+            /* @__PURE__ */ jsx20("strong", { children: "No pages yet" }),
+            /* @__PURE__ */ jsx20("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__ */ jsxs17(Link2, { className: "orion-admin-list-item", href: resolveAdminPath(adminBasePath, `/pages/${id}`), children: [
+              /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20("strong", { children: title }) }),
+              /* @__PURE__ */ jsx20("span", { className: "orion-admin-pill", children: status })
+            ] }, id);
+          })
+        ] })
+      ]
     }
   ) });
 }
@@ -3285,7 +3117,7 @@ function AdminStudioGlobalsView(props) {
 }
 
 // src/admin/components/studio/AdminStudioSiteSettingsGlobalView.tsx
-import { useEffect as useEffect10, useMemo as useMemo6, useState as useState11 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo6, useState as useState12 } from "react";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var getPropString6 = (props, key, fallback) => {
   if (!props || typeof props !== "object") return fallback;
@@ -3371,12 +3203,12 @@ function AdminStudioSiteSettingsGlobalView(props) {
   const mediaCollectionSlug = getPropString6(props, "mediaCollectionSlug", "media");
   const adminBasePath = useAdminBasePath();
   const resolvedGlobalsBasePath = resolveAdminPath(adminBasePath, globalsBasePath);
-  const [loading, setLoading] = useState11(true);
-  const [saving, setSaving] = useState11(false);
-  const [error, setError] = useState11(null);
-  const [savedMessage, setSavedMessage] = useState11(null);
-  const [globalData, setGlobalData] = useState11({});
-  const [mediaOptions, setMediaOptions] = useState11([]);
+  const [loading, setLoading] = useState12(true);
+  const [saving, setSaving] = useState12(false);
+  const [error, setError] = useState12(null);
+  const [savedMessage, setSavedMessage] = useState12(null);
+  const [globalData, setGlobalData] = useState12({});
+  const [mediaOptions, setMediaOptions] = useState12([]);
   useEffect10(() => {
     let cancelled = false;
     const run = async () => {
@@ -3661,7 +3493,7 @@ function AdminStudioSiteSettingsGlobalView(props) {
 }
 
 // src/admin/components/studio/AdminStudioSocialMediaGlobalView.tsx
-import { useEffect as useEffect11, useMemo as useMemo7, useState as useState12 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo7, useState as useState13 } from "react";
 
 // src/shared/socialMedia.ts
 var SOCIAL_MEDIA_PLATFORM_LABELS = {
@@ -3798,11 +3630,11 @@ function AdminStudioSocialMediaGlobalView(props) {
   const globalsBasePath = getPropString7(props, "globalsBasePath", "/globals");
   const adminBasePath = useAdminBasePath();
   const resolvedGlobalsBasePath = resolveAdminPath(adminBasePath, globalsBasePath);
-  const [loading, setLoading] = useState12(true);
-  const [saving, setSaving] = useState12(false);
-  const [error, setError] = useState12(null);
-  const [savedMessage, setSavedMessage] = useState12(null);
-  const [globalData, setGlobalData] = useState12({});
+  const [loading, setLoading] = useState13(true);
+  const [saving, setSaving] = useState13(false);
+  const [error, setError] = useState13(null);
+  const [savedMessage, setSavedMessage] = useState13(null);
+  const [globalData, setGlobalData] = useState13({});
   useEffect11(() => {
     let cancelled = false;
     const run = async () => {
@@ -3942,7 +3774,7 @@ function AdminStudioSocialMediaGlobalView(props) {
 }
 
 // src/admin/components/studio/AdminStudioHeaderGlobalView.tsx
-import { useEffect as useEffect12, useMemo as useMemo8, useState as useState13 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo8, useState as useState14 } from "react";
 import { SetStepNav as SetStepNav2 } from "@payloadcms/ui";
 
 // src/nextjs/utilities/socialMedia.ts
@@ -4038,15 +3870,15 @@ function AdminStudioHeaderGlobalView(props) {
   const adminBasePath = useAdminBasePath();
   const resolvedGlobalsBasePath = resolveAdminPath(adminBasePath, globalsBasePath);
   const rawGlobalPath = resolveAdminPath(adminBasePath, `/globals/${globalSlug}`);
-  const [loading, setLoading] = useState13(true);
-  const [saving, setSaving] = useState13(false);
-  const [error, setError] = useState13(null);
-  const [savedMessage, setSavedMessage] = useState13(null);
-  const [initialItems, setInitialItems] = useState13([]);
-  const [liveItems, setLiveItems] = useState13([]);
-  const [pages, setPages] = useState13([]);
-  const [siteSettings, setSiteSettings] = useState13({});
-  const [socialMedia, setSocialMedia] = useState13({});
+  const [loading, setLoading] = useState14(true);
+  const [saving, setSaving] = useState14(false);
+  const [error, setError] = useState14(null);
+  const [savedMessage, setSavedMessage] = useState14(null);
+  const [initialItems, setInitialItems] = useState14([]);
+  const [liveItems, setLiveItems] = useState14([]);
+  const [pages, setPages] = useState14([]);
+  const [siteSettings, setSiteSettings] = useState14({});
+  const [socialMedia, setSocialMedia] = useState14({});
   useEffect12(() => {
     let cancelled = false;
     const run = async () => {
@@ -4213,7 +4045,7 @@ function AdminStudioHeaderGlobalView(props) {
 }
 
 // src/admin/components/studio/AdminStudioFooterGlobalView.tsx
-import { useEffect as useEffect13, useMemo as useMemo9, useState as useState14 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo9, useState as useState15 } from "react";
 import { SetStepNav as SetStepNav3 } from "@payloadcms/ui";
 import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var getPropString9 = (props, key, fallback) => {
@@ -4321,17 +4153,17 @@ function AdminStudioFooterGlobalView(props) {
   const adminBasePath = useAdminBasePath();
   const resolvedGlobalsBasePath = resolveAdminPath(adminBasePath, globalsBasePath);
   const rawGlobalPath = resolveAdminPath(adminBasePath, `/globals/${globalSlug}`);
-  const [loading, setLoading] = useState14(true);
-  const [saving, setSaving] = useState14(false);
-  const [error, setError] = useState14(null);
-  const [savedMessage, setSavedMessage] = useState14(null);
-  const [doc, setDoc] = useState14({
+  const [loading, setLoading] = useState15(true);
+  const [saving, setSaving] = useState15(false);
+  const [error, setError] = useState15(null);
+  const [savedMessage, setSavedMessage] = useState15(null);
+  const [doc, setDoc] = useState15({
     contactEmail: "",
     contactPhone: "",
     copyright: ""
   });
-  const [siteSettings, setSiteSettings] = useState14({});
-  const [socialMedia, setSocialMedia] = useState14({});
+  const [siteSettings, setSiteSettings] = useState15({});
+  const [socialMedia, setSocialMedia] = useState15({});
   useEffect13(() => {
     let cancelled = false;
     const run = async () => {
@@ -4588,7 +4420,7 @@ function AdminStudioFooterGlobalView(props) {
 }
 
 // src/admin/components/studio/AdminStudioContactFormView.tsx
-import { useEffect as useEffect14, useMemo as useMemo10, useState as useState15 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo10, useState as useState16 } from "react";
 import { SetStepNav as SetStepNav4 } from "@payloadcms/ui";
 import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 var defaultDoc = {
@@ -4679,11 +4511,11 @@ function AdminStudioContactFormView(props) {
   const adminBasePath = useAdminBasePath();
   const resolvedGlobalsBasePath = resolveAdminPath(adminBasePath, globalsBasePath);
   const rawGlobalPath = resolveAdminPath(adminBasePath, `/globals/${globalSlug}`);
-  const [doc, setDoc] = useState15(defaultDoc);
-  const [error, setError] = useState15(null);
-  const [isLoading, setIsLoading] = useState15(true);
-  const [isSaving, setIsSaving] = useState15(false);
-  const [savedMessage, setSavedMessage] = useState15(null);
+  const [doc, setDoc] = useState16(defaultDoc);
+  const [error, setError] = useState16(null);
+  const [isLoading, setIsLoading] = useState16(true);
+  const [isSaving, setIsSaving] = useState16(false);
+  const [savedMessage, setSavedMessage] = useState16(null);
   useEffect14(() => {
     let mounted = true;
     const load = async () => {
@@ -4914,7 +4746,7 @@ function AdminStudioContactFormView(props) {
 }
 
 // src/admin/components/studio/AdminStudioMediaView.tsx
-import { useEffect as useEffect15, useMemo as useMemo11, useState as useState16 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo11, useState as useState17 } from "react";
 import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 var MEDIA_LIBRARY_SYNC_EVENT = "orion-media-library-updated";
 var getPropString11 = (props, key, fallback) => {
@@ -4931,9 +4763,9 @@ var getPropString11 = (props, key, fallback) => {
 function AdminStudioMediaView(props) {
   const mediaCollectionSlug = getPropString11(props, "mediaCollectionSlug", "media");
   const adminBasePath = useAdminBasePath();
-  const [docs, setDocs] = useState16([]);
-  const [loading, setLoading] = useState16(true);
-  const [error, setError] = useState16(null);
+  const [docs, setDocs] = useState17([]);
+  const [loading, setLoading] = useState17(true);
+  const [error, setError] = useState17(null);
   const apiURL = useMemo11(() => {
     const params = new URLSearchParams({
       depth: "0",
@@ -5023,7 +4855,7 @@ function AdminStudioMediaView(props) {
 }
 
 // src/admin/components/studio/AdminStudioMediaItemView.tsx
-import { useEffect as useEffect16, useMemo as useMemo12, useState as useState17 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo12, useState as useState18 } from "react";
 import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 var getPropString12 = (props, key, fallback) => {
   if (!props || typeof props !== "object") return fallback;
@@ -5055,11 +4887,11 @@ function AdminStudioMediaItemView(props) {
   const adminBasePath = useAdminBasePath();
   const mediaPath = resolveAdminPath(adminBasePath, "/media");
   const mediaIDFromParams = useMemo12(() => getParam2(props.params, "id"), [props.params]);
-  const [mediaID, setMediaID] = useState17(mediaIDFromParams);
-  const [doc, setDoc] = useState17(null);
-  const [loading, setLoading] = useState17(true);
-  const [error, setError] = useState17(null);
-  const [savedMessage, setSavedMessage] = useState17(null);
+  const [mediaID, setMediaID] = useState18(mediaIDFromParams);
+  const [doc, setDoc] = useState18(null);
+  const [loading, setLoading] = useState18(true);
+  const [error, setError] = useState18(null);
+  const [savedMessage, setSavedMessage] = useState18(null);
   useEffect16(() => {
     if (mediaIDFromParams) {
       setMediaID(mediaIDFromParams);
@@ -5171,8 +5003,8 @@ function AdminStudioMediaItemView(props) {
 
 // src/admin/components/studio/AdminStudioFormsView.tsx
 import Link3 from "next/link";
-import { useEffect as useEffect17, useMemo as useMemo13, useState as useState18 } from "react";
-import { useAuth as useAuth6 } from "@payloadcms/ui";
+import { useEffect as useEffect17, useMemo as useMemo13, useState as useState19 } from "react";
+import { useAuth as useAuth5 } from "@payloadcms/ui";
 import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 var FORM_TONES = [
   {
@@ -5214,17 +5046,17 @@ var FORM_TONE_OVERRIDES = {
 var IDENTITY_KEYS = /* @__PURE__ */ new Set(["contactEmail", "email", "firstName", "lastName", "name"]);
 var RESPONSE_FIELD_PREVIEW_LIMIT = 3;
 var RESPONSE_SCROLL_THRESHOLD = 3;
-var hasAdminAccess3 = (user) => {
+var hasAdminAccess2 = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
   return typeof role === "string" && (role === "admin" || role === "developer");
 };
-var isEditor2 = (user) => {
+var isEditor = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
   return typeof role === "string" && role === "editor";
 };
-var canReviewForms2 = (user) => hasAdminAccess3(user) || isEditor2(user);
+var canReviewForms2 = (user) => hasAdminAccess2(user) || isEditor(user);
 var getPropString13 = (props, key, fallback) => {
   if (!props || typeof props !== "object") return fallback;
   const direct = props[key];
@@ -5390,7 +5222,7 @@ var renderEmptyMessage = (message) => /* @__PURE__ */ jsxs26("div", { className:
   /* @__PURE__ */ jsx29("span", { children: message })
 ] });
 function AdminStudioFormsView(props) {
-  const { user } = useAuth6();
+  const { user } = useAuth5();
   const formsCollectionSlug = getPropString13(props, "formsCollectionSlug", "forms");
   const formSubmissionsCollectionSlug = getPropString13(
     props,
@@ -5401,10 +5233,10 @@ function AdminStudioFormsView(props) {
   const studioFormsPath = resolveAdminPath(adminBasePath, "/forms");
   const studioSubmissionsPath = resolveAdminPath(adminBasePath, "/forms/submissions");
   const studioUploadsPath = resolveAdminPath(adminBasePath, "/forms/uploads");
-  const [forms, setForms] = useState18([]);
-  const [submissions, setSubmissions] = useState18([]);
-  const [loading, setLoading] = useState18(true);
-  const [error, setError] = useState18(null);
+  const [forms, setForms] = useState19([]);
+  const [submissions, setSubmissions] = useState19([]);
+  const [loading, setLoading] = useState19(true);
+  const [error, setError] = useState19(null);
   useEffect17(() => {
     if (!canReviewForms2(user)) {
       return;
@@ -5701,7 +5533,7 @@ function AdminStudioFormsView(props) {
 
 // src/admin/components/studio/AdminStudioFormDetailView.tsx
 import Link4 from "next/link";
-import { useEffect as useEffect18, useMemo as useMemo14, useState as useState19 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo14, useState as useState20 } from "react";
 
 // src/admin/components/studio/formsStudioShared.ts
 var FORM_TONES2 = [
@@ -5910,15 +5742,22 @@ var getFormTitle2 = (value) => {
 // src/admin/components/studio/AdminStudioFormDetailView.tsx
 import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 var getNonEmptyText = (value, fallback = "") => typeof value === "string" && value.trim().length > 0 ? value : fallback;
-var formatStepsText = (value) => {
+var normalizeSteps = (value) => {
   if (!Array.isArray(value)) {
-    return "[]";
+    return [];
   }
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return "[]";
+  return value.map((step) => step && typeof step === "object" && !Array.isArray(step) ? step : {});
+};
+var normalizeFormResponse = (value) => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return {};
+  }
+  const record = value;
+  const nestedDoc = record.doc;
+  if (nestedDoc && typeof nestedDoc === "object" && !Array.isArray(nestedDoc)) {
+    return nestedDoc;
   }
+  return record;
 };
 var toEditorState = (doc) => {
   const emails = doc.emails && typeof doc.emails === "object" ? doc.emails : null;
@@ -5934,7 +5773,7 @@ var toEditorState = (doc) => {
     sendAdmin: emails?.sendAdmin !== false,
     sendConfirmation: emails?.sendConfirmation !== false,
     slug: getNonEmptyText(doc.slug),
-    stepsText: formatStepsText(doc.steps),
+    steps: normalizeSteps(doc.steps),
     submitLabel: getNonEmptyText(doc.submitLabel, "Submit"),
     successMessage: getNonEmptyText(doc.successMessage),
     title: getNonEmptyText(doc.title, "Untitled Form")
@@ -5945,25 +5784,72 @@ var checkboxLabelStyle = {
   display: "flex",
   gap: "0.6rem"
 };
-var codeStyle = {
-  background: "color-mix(in srgb, var(--orion-admin-card-bg) 82%, black)",
-  border: "1px solid var(--orion-admin-card-border)",
-  borderRadius: "var(--orion-admin-radius-sm)",
-  color: "var(--orion-admin-text)",
-  fontFamily: "ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, monospace",
-  fontSize: "0.86rem",
-  lineHeight: 1.55,
-  margin: 0,
-  maxHeight: "28rem",
-  overflow: "auto",
-  padding: "0.9rem",
-  whiteSpace: "pre-wrap"
-};
 var sectionGridStyle = {
   display: "grid",
   gap: "1rem",
   gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))"
 };
+var fieldTypeOptions = [
+  "text",
+  "textarea",
+  "email",
+  "phone",
+  "url",
+  "select",
+  "radio",
+  "checkbox",
+  "checkbox-group",
+  "date",
+  "file"
+];
+var getFields = (step) => Array.isArray(step.fields) ? step.fields.map(
+  (field) => field && typeof field === "object" && !Array.isArray(field) ? field : {}
+) : [];
+var toOptionsText = (value) => Array.isArray(value) ? value.map((entry) => {
+  if (entry && typeof entry === "object" && !Array.isArray(entry)) {
+    const record = entry;
+    const label = typeof record.label === "string" ? record.label : "";
+    const optionValue = typeof record.value === "string" ? record.value : label;
+    return label && optionValue && label !== optionValue ? `${label} | ${optionValue}` : label || optionValue;
+  }
+  return typeof entry === "string" ? entry : "";
+}).filter(Boolean).join("\n") : "";
+var fromOptionsText = (value) => value.split("\n").map((entry) => entry.trim()).filter(Boolean).map((entry) => {
+  const [label, optionValue] = entry.split("|").map((part) => part.trim());
+  return {
+    label,
+    value: optionValue || label
+  };
+});
+var slugifyFieldName = (value) => value.trim().replace(/[^a-z0-9]+/gi, " ").trim().replace(/\s+([a-z0-9])/gi, (_, char) => char.toUpperCase()).replace(/^./, (char) => char.toLowerCase());
+var blankField = () => ({
+  label: "New field",
+  name: "newField",
+  required: false,
+  type: "text"
+});
+var blankStep = () => ({
+  fields: [blankField()],
+  title: "New step"
+});
+var getStepTitle = (step, stepIndex) => getNonEmptyText(step.title, `Step ${stepIndex + 1}`);
+var getFieldLabel = (field, fieldIndex) => getNonEmptyText(field.label, getNonEmptyText(field.name, `Field ${fieldIndex + 1}`));
+var formatFieldTypeLabel = (value) => getNonEmptyText(value, "text").replace(/-/g, " ").replace(/^./, (char) => char.toUpperCase());
+var getStepDestination = (stepIndex, stepCount) => {
+  if (stepIndex < stepCount - 1) {
+    return `Next: Step ${stepIndex + 2}`;
+  }
+  return "Then: Submit form";
+};
+var moveItem = (items, fromIndex, toIndex) => {
+  if (toIndex < 0 || toIndex >= items.length) {
+    return items;
+  }
+  const nextItems = [...items];
+  const [item] = nextItems.splice(fromIndex, 1);
+  nextItems.splice(toIndex, 0, item);
+  return nextItems;
+};
 function getFormIDFromPathname(pathname) {
   const marker = "/forms/";
   const raw = getIDFromPathname(pathname, marker);
@@ -5982,15 +5868,15 @@ function AdminStudioFormDetailView(props) {
   const adminBasePath = useAdminBasePath();
   const formsPath = resolveAdminPath(adminBasePath, "/forms");
   const formIDFromParams = useMemo14(() => getParam3(props.params, "id"), [props.params]);
-  const [formID, setFormID] = useState19(formIDFromParams);
-  const [didResolvePathFallback, setDidResolvePathFallback] = useState19(false);
-  const [doc, setDoc] = useState19(null);
-  const [submissions, setSubmissions] = useState19([]);
-  const [editorState, setEditorState] = useState19(null);
-  const [loading, setLoading] = useState19(true);
-  const [error, setError] = useState19(null);
-  const [saving, setSaving] = useState19(false);
-  const [savedMessage, setSavedMessage] = useState19(null);
+  const [formID, setFormID] = useState20(formIDFromParams);
+  const [didResolvePathFallback, setDidResolvePathFallback] = useState20(false);
+  const [doc, setDoc] = useState20(null);
+  const [submissions, setSubmissions] = useState20([]);
+  const [editorState, setEditorState] = useState20(null);
+  const [loading, setLoading] = useState20(true);
+  const [error, setError] = useState20(null);
+  const [saving, setSaving] = useState20(false);
+  const [savedMessage, setSavedMessage] = useState20(null);
   useEffect18(() => {
     if (formIDFromParams) {
       setFormID(formIDFromParams);
@@ -6026,7 +5912,7 @@ function AdminStudioFormDetailView(props) {
       if (!submissionsResponse.ok) {
         throw new Error(`Failed to load submissions (${submissionsResponse.status}).`);
       }
-      const nextDoc = await formResponse.json();
+      const nextDoc = normalizeFormResponse(await formResponse.json());
       const submissionsPayload = await submissionsResponse.json();
       const nextSubmissions = Array.isArray(submissionsPayload.docs) ? submissionsPayload.docs : [];
       setDoc(nextDoc);
@@ -6056,10 +5942,6 @@ function AdminStudioFormDetailView(props) {
     setError(null);
     setSavedMessage(null);
     try {
-      const parsedSteps = JSON.parse(editorState.stepsText);
-      if (!Array.isArray(parsedSteps)) {
-        throw new Error("Structure JSON must be an array of steps.");
-      }
       const payload = {
         emails: {
           adminRecipients: editorState.adminRecipientsText.split("\n").map((value) => value.trim()).filter(Boolean).map((email) => ({ email })),
@@ -6071,7 +5953,7 @@ function AdminStudioFormDetailView(props) {
           sendConfirmation: editorState.sendConfirmation
         },
         slug: editorState.slug.trim(),
-        steps: parsedSteps,
+        steps: editorState.steps,
         submitLabel: editorState.submitLabel.trim(),
         successMessage: editorState.successMessage,
         title: editorState.title.trim()
@@ -6087,7 +5969,7 @@ function AdminStudioFormDetailView(props) {
       if (!response.ok) {
         throw new Error(`Failed to save form (${response.status}).`);
       }
-      const nextDoc = await response.json();
+      const nextDoc = normalizeFormResponse(await response.json());
       setDoc(nextDoc);
       setEditorState(toEditorState(nextDoc));
       setSavedMessage("Saved.");
@@ -6117,8 +5999,52 @@ function AdminStudioFormDetailView(props) {
   const toneStyle = getFormToneStyle2(slug, title || formID || "form");
   const fieldLabels = doc ? buildFieldLabelMap2(doc) : /* @__PURE__ */ new Map();
   const latestSubmission = submissions[0];
-  const stepCount = doc && Array.isArray(doc.steps) ? doc.steps.length : 0;
-  const fieldCount = doc ? getFieldCount2(doc) : 0;
+  const stepCount = editorState?.steps.length || 0;
+  const fieldCount = editorState ? editorState.steps.reduce((count, step) => count + getFields(step).length, 0) : doc ? getFieldCount2(doc) : 0;
+  const updateStep = (stepIndex, patch) => {
+    setEditorState(
+      (current) => current ? {
+        ...current,
+        steps: current.steps.map(
+          (step, index) => index === stepIndex ? { ...step, ...patch } : step
+        )
+      } : current
+    );
+  };
+  const updateField = (stepIndex, fieldIndex, patch) => {
+    setEditorState((current) => {
+      if (!current) return current;
+      return {
+        ...current,
+        steps: current.steps.map((step, index) => {
+          if (index !== stepIndex) return step;
+          const fields = getFields(step).map(
+            (field, currentFieldIndex) => currentFieldIndex === fieldIndex ? { ...field, ...patch } : field
+          );
+          return { ...step, fields };
+        })
+      };
+    });
+  };
+  const moveStep = (stepIndex, direction) => {
+    setEditorState(
+      (current) => current ? {
+        ...current,
+        steps: moveItem(current.steps, stepIndex, stepIndex + direction)
+      } : current
+    );
+  };
+  const moveField = (stepIndex, fieldIndex, direction) => {
+    setEditorState((current) => {
+      if (!current) return current;
+      return {
+        ...current,
+        steps: current.steps.map(
+          (step, index) => index === stepIndex ? { ...step, fields: moveItem(getFields(step), fieldIndex, fieldIndex + direction) } : step
+        )
+      };
+    });
+  };
   return /* @__PURE__ */ jsx30(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs27(
     AdminPage,
     {
@@ -6197,10 +6123,9 @@ function AdminStudioFormDetailView(props) {
             /* @__PURE__ */ jsxs27("div", { style: { display: "grid", gap: "1rem" }, children: [
               /* @__PURE__ */ jsxs27("div", { className: "orion-admin-card", children: [
                 /* @__PURE__ */ jsx30("strong", { children: "Step preview" }),
-                /* @__PURE__ */ jsx30("span", { children: "Review the configured workflow structure before editing the JSON source." }),
-                /* @__PURE__ */ jsx30("div", { style: { display: "grid", gap: "0.85rem", marginTop: "1rem" }, children: Array.isArray(doc.steps) && doc.steps.length > 0 ? doc.steps.map((step, stepIndex) => {
-                  const record = step && typeof step === "object" && !Array.isArray(step) ? step : null;
-                  const fields = Array.isArray(record?.fields) ? record.fields : [];
+                /* @__PURE__ */ jsx30("span", { children: "Review the public workflow as visitors will move through it." }),
+                /* @__PURE__ */ jsx30("div", { style: { display: "grid", gap: "0.85rem", marginTop: "1rem" }, children: editorState.steps.length > 0 ? editorState.steps.map((record, stepIndex) => {
+                  const fields = getFields(record);
                   return /* @__PURE__ */ jsxs27("div", { className: "orion-admin-form", children: [
                     /* @__PURE__ */ jsxs27("div", { children: [
                       /* @__PURE__ */ jsxs27("strong", { children: [
@@ -6252,7 +6177,7 @@ function AdminStudioFormDetailView(props) {
                   ] }, `step-${stepIndex}`);
                 }) : /* @__PURE__ */ jsxs27("div", { className: "orion-admin-empty-state", children: [
                   /* @__PURE__ */ jsx30("strong", { children: "No steps configured" }),
-                  /* @__PURE__ */ jsx30("span", { children: "Add at least one step in the JSON editor to publish this form." })
+                  /* @__PURE__ */ jsx30("span", { children: "Add at least one step in Form settings to publish this form." })
                 ] }) })
               ] }),
               /* @__PURE__ */ jsxs27("div", { className: "orion-admin-card", children: [
@@ -6434,32 +6359,296 @@ function AdminStudioFormDetailView(props) {
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs27("label", { children: [
-                "Structure JSON",
-                /* @__PURE__ */ jsx30(
-                  "textarea",
-                  {
-                    onChange: (event) => setEditorState(
-                      (current) => current ? { ...current, stepsText: event.target.value } : current
-                    ),
-                    rows: 18,
-                    spellCheck: false,
-                    style: {
-                      fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-                      minHeight: "24rem"
-                    },
-                    value: editorState.stepsText
-                  }
-                )
+              /* @__PURE__ */ jsxs27("div", { className: "orion-admin-card orion-admin-workflow-editor", children: [
+                /* @__PURE__ */ jsxs27("div", { className: "orion-admin-workflow-editor-header", children: [
+                  /* @__PURE__ */ jsxs27("div", { children: [
+                    /* @__PURE__ */ jsx30("strong", { children: "Form steps" }),
+                    /* @__PURE__ */ jsx30("span", { children: "Build the visitor flow, then edit each step's fields below." })
+                  ] }),
+                  /* @__PURE__ */ jsx30(
+                    "button",
+                    {
+                      className: "orion-admin-action-button orion-admin-action-button--ghost",
+                      onClick: () => setEditorState(
+                        (current) => current ? { ...current, steps: [...current.steps, blankStep()] } : current
+                      ),
+                      type: "button",
+                      children: "Add step"
+                    }
+                  )
+                ] }),
+                editorState.steps.length === 0 ? /* @__PURE__ */ jsxs27("div", { className: "orion-admin-empty-state", children: [
+                  /* @__PURE__ */ jsx30("strong", { children: "No steps configured" }),
+                  /* @__PURE__ */ jsx30("span", { children: "Add a first step to start building the public form flow." })
+                ] }) : null,
+                /* @__PURE__ */ jsx30("div", { className: "orion-admin-step-editor-list", children: editorState.steps.map((step, stepIndex) => {
+                  const fields = getFields(step);
+                  const requiredCount = fields.filter((field) => field.required === true).length;
+                  return /* @__PURE__ */ jsxs27("details", { className: "orion-admin-step-editor", open: true, children: [
+                    /* @__PURE__ */ jsxs27("summary", { className: "orion-admin-step-editor-summary", children: [
+                      /* @__PURE__ */ jsx30("span", { className: "orion-admin-workflow-node-number", children: stepIndex + 1 }),
+                      /* @__PURE__ */ jsx30("span", { className: "orion-admin-step-editor-title", children: getStepTitle(step, stepIndex) }),
+                      /* @__PURE__ */ jsxs27("span", { className: "orion-admin-step-editor-meta", children: [
+                        fields.length,
+                        " field",
+                        fields.length === 1 ? "" : "s",
+                        requiredCount > 0 ? ` \xB7 ${requiredCount} required` : ""
+                      ] }),
+                      /* @__PURE__ */ jsx30("span", { className: "orion-admin-workflow-node-destination", children: getStepDestination(stepIndex, editorState.steps.length) })
+                    ] }),
+                    /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-editor-body", children: [
+                      /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-editor-actions", children: [
+                        /* @__PURE__ */ jsx30(
+                          "button",
+                          {
+                            className: "orion-admin-action-button orion-admin-action-button--ghost",
+                            disabled: stepIndex === 0,
+                            onClick: () => moveStep(stepIndex, -1),
+                            type: "button",
+                            children: "Move up"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx30(
+                          "button",
+                          {
+                            className: "orion-admin-action-button orion-admin-action-button--ghost",
+                            disabled: stepIndex === editorState.steps.length - 1,
+                            onClick: () => moveStep(stepIndex, 1),
+                            type: "button",
+                            children: "Move down"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx30(
+                          "button",
+                          {
+                            className: "orion-admin-action-button orion-admin-action-button--ghost",
+                            onClick: () => setEditorState(
+                              (current) => current ? {
+                                ...current,
+                                steps: current.steps.filter((_, index) => index !== stepIndex)
+                              } : current
+                            ),
+                            type: "button",
+                            children: "Remove step"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-settings-grid", children: [
+                        /* @__PURE__ */ jsxs27("label", { children: [
+                          "Step title",
+                          /* @__PURE__ */ jsx30(
+                            "input",
+                            {
+                              onChange: (event) => updateStep(stepIndex, { title: event.target.value }),
+                              type: "text",
+                              value: getNonEmptyText(step.title)
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs27("label", { children: [
+                          "Next button label",
+                          /* @__PURE__ */ jsx30(
+                            "input",
+                            {
+                              onChange: (event) => updateStep(stepIndex, { nextLabel: event.target.value }),
+                              placeholder: "Next",
+                              type: "text",
+                              value: getNonEmptyText(step.nextLabel)
+                            }
+                          )
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs27("label", { children: [
+                        "Step intro text",
+                        /* @__PURE__ */ jsx30(
+                          "textarea",
+                          {
+                            onChange: (event) => updateStep(stepIndex, { subtitle: event.target.value }),
+                            rows: 3,
+                            value: getNonEmptyText(step.subtitle)
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs27("label", { style: checkboxLabelStyle, children: [
+                        /* @__PURE__ */ jsx30(
+                          "input",
+                          {
+                            checked: step.allowSkip === true,
+                            onChange: (event) => updateStep(stepIndex, { allowSkip: event.target.checked }),
+                            type: "checkbox"
+                          }
+                        ),
+                        "Allow visitors to skip this step"
+                      ] }),
+                      /* @__PURE__ */ jsxs27("div", { className: "orion-admin-field-list-header", children: [
+                        /* @__PURE__ */ jsxs27("div", { children: [
+                          /* @__PURE__ */ jsx30("strong", { children: "Fields in this step" }),
+                          /* @__PURE__ */ jsx30("span", { children: "These appear together before the visitor moves to the next step." })
+                        ] }),
+                        /* @__PURE__ */ jsx30(
+                          "button",
+                          {
+                            className: "orion-admin-action-button orion-admin-action-button--ghost",
+                            onClick: () => setEditorState(
+                              (current) => current ? {
+                                ...current,
+                                steps: current.steps.map(
+                                  (currentStep, index) => index === stepIndex ? { ...currentStep, fields: [...getFields(currentStep), blankField()] } : currentStep
+                                )
+                              } : current
+                            ),
+                            type: "button",
+                            children: "Add field"
+                          }
+                        )
+                      ] }),
+                      fields.length > 0 ? /* @__PURE__ */ jsx30("div", { className: "orion-admin-field-editor-list", children: fields.map((field, fieldIndex) => {
+                        const label = getFieldLabel(field, fieldIndex);
+                        const fieldType = getNonEmptyText(field.type, "text");
+                        return /* @__PURE__ */ jsxs27("details", { className: "orion-admin-field-editor", children: [
+                          /* @__PURE__ */ jsxs27("summary", { className: "orion-admin-field-editor-summary", children: [
+                            /* @__PURE__ */ jsx30("span", { className: "orion-admin-field-order", children: fieldIndex + 1 }),
+                            /* @__PURE__ */ jsx30("span", { className: "orion-admin-field-editor-title", children: label }),
+                            /* @__PURE__ */ jsxs27("span", { className: "orion-admin-field-editor-meta", children: [
+                              formatFieldTypeLabel(fieldType),
+                              field.required === true ? " \xB7 Required" : ""
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsxs27("div", { className: "orion-admin-field-editor-body", children: [
+                            /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-editor-actions", children: [
+                              /* @__PURE__ */ jsx30(
+                                "button",
+                                {
+                                  className: "orion-admin-action-button orion-admin-action-button--ghost",
+                                  disabled: fieldIndex === 0,
+                                  onClick: () => moveField(stepIndex, fieldIndex, -1),
+                                  type: "button",
+                                  children: "Move up"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx30(
+                                "button",
+                                {
+                                  className: "orion-admin-action-button orion-admin-action-button--ghost",
+                                  disabled: fieldIndex === fields.length - 1,
+                                  onClick: () => moveField(stepIndex, fieldIndex, 1),
+                                  type: "button",
+                                  children: "Move down"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx30(
+                                "button",
+                                {
+                                  className: "orion-admin-action-button orion-admin-action-button--ghost",
+                                  onClick: () => setEditorState((current) => {
+                                    if (!current) return current;
+                                    return {
+                                      ...current,
+                                      steps: current.steps.map(
+                                        (currentStep, index) => index === stepIndex ? {
+                                          ...currentStep,
+                                          fields: getFields(currentStep).filter(
+                                            (_, currentFieldIndex) => currentFieldIndex !== fieldIndex
+                                          )
+                                        } : currentStep
+                                      )
+                                    };
+                                  }),
+                                  type: "button",
+                                  children: "Remove field"
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs27("div", { className: "orion-admin-step-settings-grid", children: [
+                              /* @__PURE__ */ jsxs27("label", { children: [
+                                "Field label",
+                                /* @__PURE__ */ jsx30(
+                                  "input",
+                                  {
+                                    onChange: (event) => {
+                                      const nextLabel = event.target.value;
+                                      const currentName = getNonEmptyText(field.name);
+                                      updateField(stepIndex, fieldIndex, {
+                                        label: nextLabel,
+                                        name: currentName || slugifyFieldName(nextLabel)
+                                      });
+                                    },
+                                    type: "text",
+                                    value: label
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxs27("label", { children: [
+                                "Field type",
+                                /* @__PURE__ */ jsx30(
+                                  "select",
+                                  {
+                                    onChange: (event) => updateField(stepIndex, fieldIndex, { type: event.target.value }),
+                                    value: fieldType,
+                                    children: fieldTypeOptions.map((option) => /* @__PURE__ */ jsx30("option", { value: option, children: formatFieldTypeLabel(option) }, option))
+                                  }
+                                )
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsxs27("label", { children: [
+                              "Field key",
+                              /* @__PURE__ */ jsx30(
+                                "input",
+                                {
+                                  onChange: (event) => updateField(stepIndex, fieldIndex, { name: event.target.value }),
+                                  type: "text",
+                                  value: getNonEmptyText(field.name)
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs27("label", { style: checkboxLabelStyle, children: [
+                              /* @__PURE__ */ jsx30(
+                                "input",
+                                {
+                                  checked: field.required === true,
+                                  onChange: (event) => updateField(stepIndex, fieldIndex, { required: event.target.checked }),
+                                  type: "checkbox"
+                                }
+                              ),
+                              "Required"
+                            ] }),
+                            /* @__PURE__ */ jsxs27("label", { children: [
+                              "Help text",
+                              /* @__PURE__ */ jsx30(
+                                "textarea",
+                                {
+                                  onChange: (event) => updateField(stepIndex, fieldIndex, { helpText: event.target.value }),
+                                  rows: 2,
+                                  value: getNonEmptyText(field.helpText)
+                                }
+                              )
+                            ] }),
+                            ["select", "radio", "checkbox-group"].includes(fieldType) ? /* @__PURE__ */ jsxs27("label", { children: [
+                              "Options",
+                              /* @__PURE__ */ jsx30(
+                                "textarea",
+                                {
+                                  onChange: (event) => updateField(stepIndex, fieldIndex, {
+                                    options: fromOptionsText(event.target.value)
+                                  }),
+                                  placeholder: "Option one\nOption two",
+                                  rows: 4,
+                                  value: toOptionsText(field.options)
+                                }
+                              )
+                            ] }) : null
+                          ] })
+                        ] }, `edit-field-${stepIndex}-${fieldIndex}`);
+                      }) }) : /* @__PURE__ */ jsxs27("div", { className: "orion-admin-empty-state", children: [
+                        /* @__PURE__ */ jsx30("strong", { children: "No fields in this step" }),
+                        /* @__PURE__ */ jsx30("span", { children: "Add a field so visitors have something to answer here." })
+                      ] })
+                    ] })
+                  ] }, `edit-step-${stepIndex}`);
+                }) })
               ] }),
-              /* @__PURE__ */ jsx30("div", { className: "orion-admin-list-meta", children: "Edit the public workflow as JSON. The saved payload must remain an array of step objects compatible with the form collection schema." }),
               /* @__PURE__ */ jsx30("button", { disabled: saving, type: "submit", children: saving ? "Saving..." : "Save Form" })
             ] })
-          ] }),
-          /* @__PURE__ */ jsxs27("div", { className: "orion-admin-card", children: [
-            /* @__PURE__ */ jsx30("strong", { children: "Current structure payload" }),
-            /* @__PURE__ */ jsx30("span", { children: "Reference snapshot of the form steps that will be written back on save." }),
-            /* @__PURE__ */ jsx30("pre", { style: { ...codeStyle, marginTop: "1rem" }, children: editorState.stepsText })
           ] })
         ] }) : null
       ]
@@ -6469,27 +6658,19 @@ function AdminStudioFormDetailView(props) {
 
 // src/admin/components/studio/AdminStudioFormSubmissionView.tsx
 import Link5 from "next/link";
-import { useEffect as useEffect19, useMemo as useMemo15, useState as useState20 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo15, useState as useState21 } from "react";
 import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
-var codeStyle2 = {
-  background: "color-mix(in srgb, var(--orion-admin-card-bg) 82%, black)",
-  border: "1px solid var(--orion-admin-card-border)",
-  borderRadius: "var(--orion-admin-radius-sm)",
-  color: "var(--orion-admin-text)",
-  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-  fontSize: "0.86rem",
-  lineHeight: 1.55,
-  margin: 0,
-  maxHeight: "28rem",
-  overflow: "auto",
-  padding: "0.9rem",
-  whiteSpace: "pre-wrap"
-};
 var sectionGridStyle2 = {
   display: "grid",
   gap: "1rem",
   gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))"
 };
+var nestedListStyle = {
+  display: "grid",
+  gap: "0.45rem",
+  margin: 0,
+  padding: 0
+};
 var renderFieldValue = (value) => {
   if (value === null || value === void 0) {
     return /* @__PURE__ */ jsx31("span", { className: "orion-admin-list-meta", children: "No value" });
@@ -6503,7 +6684,26 @@ var renderFieldValue = (value) => {
   if (typeof value === "string") {
     return value.trim().length > 0 ? value : /* @__PURE__ */ jsx31("span", { className: "orion-admin-list-meta", children: "No value" });
   }
-  return /* @__PURE__ */ jsx31("pre", { style: codeStyle2, children: JSON.stringify(value, null, 2) });
+  if (Array.isArray(value)) {
+    const entries = value.filter((entry) => entry !== null && entry !== void 0 && entry !== "");
+    if (entries.length === 0) {
+      return /* @__PURE__ */ jsx31("span", { className: "orion-admin-list-meta", children: "No value" });
+    }
+    return /* @__PURE__ */ jsx31("ul", { style: nestedListStyle, children: entries.map((entry, index) => /* @__PURE__ */ jsx31("li", { children: renderFieldValue(entry) }, index)) });
+  }
+  if (typeof value === "object") {
+    const entries = Object.entries(value).filter(
+      ([, entryValue]) => entryValue !== null && entryValue !== void 0 && entryValue !== ""
+    );
+    if (entries.length === 0) {
+      return /* @__PURE__ */ jsx31("span", { className: "orion-admin-list-meta", children: "No value" });
+    }
+    return /* @__PURE__ */ jsx31("div", { style: { display: "grid", gap: "0.65rem" }, children: entries.map(([key, entryValue]) => /* @__PURE__ */ jsxs28("div", { className: "orion-admin-meta-row", children: [
+      /* @__PURE__ */ jsx31("span", { className: "orion-admin-meta-label", children: humanizeKey2(key) }),
+      /* @__PURE__ */ jsx31("span", { className: "orion-admin-meta-value", children: renderFieldValue(entryValue) })
+    ] }, key)) });
+  }
+  return String(value);
 };
 function getSubmissionIDFromPathname(pathname) {
   return getIDFromPathname(pathname, "/forms/submissions/");
@@ -6518,14 +6718,14 @@ function AdminStudioFormSubmissionView(props) {
   const adminBasePath = useAdminBasePath();
   const formsPath = resolveAdminPath(adminBasePath, "/forms");
   const submissionIDFromParams = useMemo15(() => getParam3(props.params, "id"), [props.params]);
-  const [submissionID, setSubmissionID] = useState20(submissionIDFromParams);
-  const [didResolvePathFallback, setDidResolvePathFallback] = useState20(false);
-  const [doc, setDoc] = useState20(null);
-  const [formDoc, setFormDoc] = useState20(null);
-  const [loading, setLoading] = useState20(true);
-  const [error, setError] = useState20(null);
-  const [confirmDelete, setConfirmDelete] = useState20(false);
-  const [deleting, setDeleting] = useState20(false);
+  const [submissionID, setSubmissionID] = useState21(submissionIDFromParams);
+  const [didResolvePathFallback, setDidResolvePathFallback] = useState21(false);
+  const [doc, setDoc] = useState21(null);
+  const [formDoc, setFormDoc] = useState21(null);
+  const [loading, setLoading] = useState21(true);
+  const [error, setError] = useState21(null);
+  const [confirmDelete, setConfirmDelete] = useState21(false);
+  const [deleting, setDeleting] = useState21(false);
   useEffect19(() => {
     if (submissionIDFromParams) {
       setSubmissionID(submissionIDFromParams);
@@ -6655,31 +6855,24 @@ function AdminStudioFormSubmissionView(props) {
             /* @__PURE__ */ jsxs28("article", { className: "orion-admin-overview-stat", children: [
               /* @__PURE__ */ jsx31("span", { className: "orion-admin-overview-stat-label", children: "Highlighted answers" }),
               /* @__PURE__ */ jsx31("strong", { children: previewFields.length }),
-              /* @__PURE__ */ jsx31("p", { children: "Readable answer previews surfaced from the structured payload." })
+              /* @__PURE__ */ jsx31("p", { children: "Readable answer previews from this response." })
             ] })
           ] }),
           /* @__PURE__ */ jsxs28("div", { style: sectionGridStyle2, children: [
-            /* @__PURE__ */ jsxs28("div", { style: { display: "grid", gap: "1rem" }, children: [
-              /* @__PURE__ */ jsxs28("div", { className: "orion-admin-card", children: [
-                /* @__PURE__ */ jsx31("strong", { children: "Response details" }),
-                /* @__PURE__ */ jsx31("span", { children: "Formatted answers using the current form field labels when available." }),
-                /* @__PURE__ */ jsx31("div", { style: { display: "grid", gap: "0.85rem", marginTop: "1rem" }, children: answerEntries.length > 0 ? answerEntries.map(([key, value]) => /* @__PURE__ */ jsxs28("div", { className: "orion-admin-form", children: [
-                  /* @__PURE__ */ jsxs28("div", { children: [
-                    /* @__PURE__ */ jsx31("strong", { children: fieldLabels.get(key) || humanizeKey2(key) }),
-                    /* @__PURE__ */ jsx31("div", { className: "orion-admin-list-meta", children: key })
-                  ] }),
-                  /* @__PURE__ */ jsx31("div", { children: renderFieldValue(value) })
-                ] }, key)) : /* @__PURE__ */ jsxs28("div", { className: "orion-admin-empty-state", children: [
-                  /* @__PURE__ */ jsx31("strong", { children: "No response payload" }),
-                  /* @__PURE__ */ jsx31("span", { children: "This submission does not contain a structured data object." })
-                ] }) })
-              ] }),
-              /* @__PURE__ */ jsxs28("div", { className: "orion-admin-card", children: [
-                /* @__PURE__ */ jsx31("strong", { children: "Raw payload" }),
-                /* @__PURE__ */ jsx31("span", { children: "Verbatim submission data for troubleshooting or export checks." }),
-                /* @__PURE__ */ jsx31("pre", { style: { ...codeStyle2, marginTop: "1rem" }, children: JSON.stringify(doc.data ?? {}, null, 2) })
-              ] })
-            ] }),
+            /* @__PURE__ */ jsx31("div", { style: { display: "grid", gap: "1rem" }, children: /* @__PURE__ */ jsxs28("div", { className: "orion-admin-card", children: [
+              /* @__PURE__ */ jsx31("strong", { children: "Response details" }),
+              /* @__PURE__ */ jsx31("span", { children: "Formatted answers using the current form field labels when available." }),
+              /* @__PURE__ */ jsx31("div", { style: { display: "grid", gap: "0.85rem", marginTop: "1rem" }, children: answerEntries.length > 0 ? answerEntries.map(([key, value]) => /* @__PURE__ */ jsxs28("div", { className: "orion-admin-form", children: [
+                /* @__PURE__ */ jsxs28("div", { children: [
+                  /* @__PURE__ */ jsx31("strong", { children: fieldLabels.get(key) || humanizeKey2(key) }),
+                  /* @__PURE__ */ jsx31("div", { className: "orion-admin-list-meta", children: key })
+                ] }),
+                /* @__PURE__ */ jsx31("div", { children: renderFieldValue(value) })
+              ] }, key)) : /* @__PURE__ */ jsxs28("div", { className: "orion-admin-empty-state", children: [
+                /* @__PURE__ */ jsx31("strong", { children: "No answers available" }),
+                /* @__PURE__ */ jsx31("span", { children: "This submission does not contain visible response details." })
+              ] }) })
+            ] }) }),
             /* @__PURE__ */ jsxs28("div", { style: { display: "grid", gap: "1rem" }, children: [
               /* @__PURE__ */ jsxs28("div", { className: "orion-admin-card orion-admin-meta-table", children: [
                 /* @__PURE__ */ jsxs28("div", { className: "orion-admin-meta-row", children: [
@@ -6749,7 +6942,7 @@ function AdminStudioFormSubmissionView(props) {
 }
 
 // src/admin/components/studio/AdminStudioFormUploadView.tsx
-import { useEffect as useEffect20, useMemo as useMemo16, useState as useState21 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo16, useState as useState22 } from "react";
 import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
 var previewStyle = {
   borderRadius: 14,
@@ -6766,15 +6959,15 @@ function AdminStudioFormUploadView(props) {
   const adminBasePath = useAdminBasePath();
   const formsPath = resolveAdminPath(adminBasePath, "/forms");
   const uploadIDFromParams = useMemo16(() => getParam3(props.params, "id"), [props.params]);
-  const [uploadID, setUploadID] = useState21(uploadIDFromParams);
-  const [didResolvePathFallback, setDidResolvePathFallback] = useState21(false);
-  const [doc, setDoc] = useState21(null);
-  const [loading, setLoading] = useState21(true);
-  const [error, setError] = useState21(null);
-  const [savedMessage, setSavedMessage] = useState21(null);
-  const [saving, setSaving] = useState21(false);
-  const [confirmDelete, setConfirmDelete] = useState21(false);
-  const [deleting, setDeleting] = useState21(false);
+  const [uploadID, setUploadID] = useState22(uploadIDFromParams);
+  const [didResolvePathFallback, setDidResolvePathFallback] = useState22(false);
+  const [doc, setDoc] = useState22(null);
+  const [loading, setLoading] = useState22(true);
+  const [error, setError] = useState22(null);
+  const [savedMessage, setSavedMessage] = useState22(null);
+  const [saving, setSaving] = useState22(false);
+  const [confirmDelete, setConfirmDelete] = useState22(false);
+  const [deleting, setDeleting] = useState22(false);
   useEffect20(() => {
     if (uploadIDFromParams) {
       setUploadID(uploadIDFromParams);
@@ -6965,26 +7158,26 @@ function AdminStudioFormUploadView(props) {
 }
 
 // src/admin/components/studio/AdminStudioToolsView.tsx
-import { useEffect as useEffect21, useState as useState22 } from "react";
-import { useAuth as useAuth7 } from "@payloadcms/ui";
+import { useEffect as useEffect21, useState as useState23 } from "react";
+import { useAuth as useAuth6 } from "@payloadcms/ui";
 import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
 var userRoles = ["admin", "developer", "editor", "client"];
-var hasAdminAccess4 = (user) => {
+var hasAdminAccess3 = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
   return typeof role === "string" && (role === "admin" || role === "developer");
 };
 var normalizeRole = (value) => userRoles.includes(value) ? value : "editor";
 function AdminStudioToolsView(props) {
-  const { user } = useAuth7();
+  const { user } = useAuth6();
   const adminBasePath = useAdminBasePath();
-  const [docs, setDocs] = useState22([]);
-  const [loading, setLoading] = useState22(true);
-  const [error, setError] = useState22(null);
-  const [savedMessage, setSavedMessage] = useState22(null);
-  const [createSubmitting, setCreateSubmitting] = useState22(false);
-  const [updatingUserID, setUpdatingUserID] = useState22(null);
-  if (!hasAdminAccess4(user)) {
+  const [docs, setDocs] = useState23([]);
+  const [loading, setLoading] = useState23(true);
+  const [error, setError] = useState23(null);
+  const [savedMessage, setSavedMessage] = useState23(null);
+  const [createSubmitting, setCreateSubmitting] = useState23(false);
+  const [updatingUserID, setUpdatingUserID] = useState23(null);
+  if (!hasAdminAccess3(user)) {
     return /* @__PURE__ */ jsx33(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsx33(
       AdminPage,
       {
@@ -7257,7 +7450,7 @@ function StudioDocumentRedirect({
 }
 
 // src/admin/components/studio/StudioBackBreadcrumb.tsx
-import { useEffect as useEffect24, useState as useState23 } from "react";
+import { useEffect as useEffect24, useState as useState24 } from "react";
 import { SetStepNav as SetStepNav5 } from "@payloadcms/ui";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var toTitle = (slug) => slug.split("-").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
@@ -7304,7 +7497,7 @@ var buildNav = (pathname, adminBasePath) => {
 };
 function StudioBackBreadcrumb() {
   const adminBasePath = useAdminBasePath();
-  const [pathname, setPathname] = useState23("");
+  const [pathname, setPathname] = useState24("");
   useEffect24(() => {
     const update = () => setPathname(window.location.pathname);
     update();