@orion-studios/payload-studio 0.6.0-beta.67 → 0.6.0-beta.68

package/dist/admin/client.js

@@ -4177,16 +4177,6 @@ function AdminStudioNewPageView(props) {
 var import_react18 = require("react");
 var import_ui6 = require("@payloadcms/ui");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var hasAdminAccess = (user) => {
-  if (!user || typeof user !== "object") return false;
-  const role = user.role;
-  return typeof role === "string" && (role === "admin" || role === "developer");
-};
-var 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];
@@ -4213,51 +4203,9 @@ var getPageIDFromPathname = (pathname) => {
   const pagePart = pathname.slice(markerIndex + marker.length).split("/")[0];
   return pagePart ? decodeURIComponent(pagePart) : null;
 };
-function PageEditorBreadcrumbs({
-  pageID,
-  pagesPath
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    "nav",
-    {
-      "aria-label": "Breadcrumb",
-      style: {
-        alignItems: "center",
-        color: "var(--orion-admin-muted)",
-        display: "flex",
-        flexWrap: "wrap",
-        fontSize: "0.8rem",
-        fontWeight: 800,
-        gap: "0.35rem",
-        marginBottom: "0.25rem"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "a",
-          {
-            href: pagesPath,
-            style: {
-              color: "var(--orion-admin-accent)",
-              textDecoration: "none"
-            },
-            children: "Pages"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": "true", children: "/" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: pageID ? `Page ${pageID}` : "Page Editor" })
-      ]
-    }
-  );
-}
 function AdminStudioPageEditView(props) {
-  const { user } = (0, import_ui6.useAuth)();
   const adminBasePath = useAdminBasePath();
   const iframeRef = (0, import_react18.useRef)(null);
-  const [saving, setSaving] = (0, import_react18.useState)(null);
-  const [dirty, setDirty] = (0, import_react18.useState)(false);
-  const [hasUnpublishedChanges, setHasUnpublishedChanges] = (0, import_react18.useState)(false);
-  const [canUndo, setCanUndo] = (0, import_react18.useState)(false);
-  const [canRedo, setCanRedo] = (0, import_react18.useState)(false);
   const builderBasePath = getPropString4(props, "builderBasePath", "/builder");
   const pagesPath = resolveAdminPath(adminBasePath, "/pages");
   const pageIDFromParams = (0, import_react18.useMemo)(() => getParam(props.params, "id"), [props.params]);
@@ -4274,96 +4222,6 @@ function AdminStudioPageEditView(props) {
     }
     setDidResolvePathFallback(true);
   }, [pageIDFromParams]);
-  const canPublish = hasAdminAccess(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 {
-    }
-  };
-  (0, import_react18.useEffect)(() => {
-    if (!pageID) {
-      return;
-    }
-    void refreshUnpublishedState(pageID);
-  }, [pageID]);
-  const requestSave = (status) => {
-    const iframe = iframeRef.current;
-    if (!iframe?.contentWindow) {
-      import_ui6.toast.error("Editor is not ready yet. Please try again.");
-      return;
-    }
-    setSaving(status);
-    iframe.contentWindow.postMessage({ source: "payload-visual-builder-parent", type: "save", status }, "*");
-  };
-  const requestHistoryAction = (type) => {
-    const iframe = iframeRef.current;
-    if (!iframe?.contentWindow) {
-      import_ui6.toast.error("Editor is not ready yet. Please try again.");
-      return;
-    }
-    iframe.contentWindow.postMessage({ source: "payload-visual-builder-parent", type }, "*");
-  };
-  (0, import_react18.useEffect)(() => {
-    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);
-          }
-          import_ui6.toast.success(typeof data.message === "string" ? data.message : "Saved.");
-        } else {
-          import_ui6.toast.error(typeof data.message === "string" ? data.message : "Save failed.");
-        }
-      }
-    };
-    window.addEventListener("message", onMessage);
-    return () => window.removeEventListener("message", onMessage);
-  }, []);
   if (!pageID && !didResolvePathFallback) {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -4404,163 +4262,21 @@ function AdminStudioPageEditView(props) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "grid", gridTemplateRows: "auto 1fr", height: "calc(100vh - 120px)" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-        "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__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { minWidth: 0 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PageEditorBreadcrumbs, { pageID, pagesPath }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { color: "var(--orion-admin-text)", fontWeight: 900 }, children: "Page Editor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-                "div",
-                {
-                  style: {
-                    color: "var(--orion-admin-muted)",
-                    fontSize: "0.85rem",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  },
-                  children: [
-                    "Editing: ",
-                    pageID
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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__ */ (0, import_jsx_runtime24.jsx)(
-                "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__ */ (0, import_jsx_runtime24.jsx)(
-                "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__ */ (0, import_jsx_runtime24.jsx)(
-                "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__ */ (0, import_jsx_runtime24.jsx)(
-                "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__ */ (0, import_jsx_runtime24.jsx)(
-                "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__ */ (0, import_jsx_runtime24.jsx)(
-        "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__ */ (0, import_jsx_runtime24.jsx)("div", { style: { height: "calc(100vh - 80px)" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "iframe",
+      {
+        ref: iframeRef,
+        src: `${builderBasePath.replace(/\/$/, "")}/${pageID}`,
+        style: { border: "none", height: "100%", width: "100%" },
+        title: "Page Builder"
+      }
+    ) })
   ] }) });
 }
 
 // src/admin/components/studio/AdminStudioPagesListView.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var hasAdminAccess2 = (user) => {
+var hasAdminAccess = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
   return typeof role === "string" && (role === "admin" || role === "developer");
@@ -4641,7 +4357,7 @@ function AdminStudioPagesIndexView({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     AdminPage,
     {
-      actions: hasAdminAccess2(user) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_link2.default, { className: "orion-admin-action-button", href: newPagePath, children: "New Page" }) : null,
+      actions: hasAdminAccess(user) ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_link2.default, { className: "orion-admin-action-button", href: newPagePath, children: "New Page" }) : null,
       breadcrumbs: [
         { label: "Dashboard", href: adminBasePath },
         { label: "Pages" }
@@ -7606,17 +7322,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];
@@ -9722,7 +9438,7 @@ var import_react35 = require("react");
 var import_ui12 = require("@payloadcms/ui");
 var import_jsx_runtime44 = require("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");
@@ -9737,7 +9453,7 @@ function AdminStudioToolsView(props) {
   const [savedMessage, setSavedMessage] = (0, import_react35.useState)(null);
   const [createSubmitting, setCreateSubmitting] = (0, import_react35.useState)(false);
   const [updatingUserID, setUpdatingUserID] = (0, import_react35.useState)(null);
-  if (!hasAdminAccess4(user)) {
+  if (!hasAdminAccess3(user)) {
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       AdminPage,
       {

package/dist/admin/client.mjs

@@ -2670,7 +2670,7 @@ function AdminStudioDashboard(rawProps) {
 import { useEffect as useEffect9, useMemo as useMemo5, useState as useState10 } from "react";
 import Link2 from "next/link";
 import { usePathname as usePathname3 } from "next/navigation";
-import { useAuth as useAuth5 } from "@payloadcms/ui";
+import { useAuth as useAuth4 } from "@payloadcms/ui";
 
 // src/admin/components/studio/AdminStudioNewPageView.tsx
 import { useState as useState8 } from "react";
@@ -2795,18 +2795,8 @@ function AdminStudioNewPageView(props) {
 
 // src/admin/components/studio/AdminStudioPageEditView.tsx
 import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef3, useState as useState9 } from "react";
-import { SetStepNav, toast, useAuth as useAuth4 } from "@payloadcms/ui";
+import { SetStepNav } from "@payloadcms/ui";
 import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs16 } 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 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];
@@ -2833,51 +2823,9 @@ var getPageIDFromPathname = (pathname) => {
   const pagePart = pathname.slice(markerIndex + marker.length).split("/")[0];
   return pagePart ? decodeURIComponent(pagePart) : null;
 };
-function PageEditorBreadcrumbs({
-  pageID,
-  pagesPath
-}) {
-  return /* @__PURE__ */ jsxs16(
-    "nav",
-    {
-      "aria-label": "Breadcrumb",
-      style: {
-        alignItems: "center",
-        color: "var(--orion-admin-muted)",
-        display: "flex",
-        flexWrap: "wrap",
-        fontSize: "0.8rem",
-        fontWeight: 800,
-        gap: "0.35rem",
-        marginBottom: "0.25rem"
-      },
-      children: [
-        /* @__PURE__ */ jsx19(
-          "a",
-          {
-            href: pagesPath,
-            style: {
-              color: "var(--orion-admin-accent)",
-              textDecoration: "none"
-            },
-            children: "Pages"
-          }
-        ),
-        /* @__PURE__ */ jsx19("span", { "aria-hidden": "true", children: "/" }),
-        /* @__PURE__ */ jsx19("span", { children: pageID ? `Page ${pageID}` : "Page Editor" })
-      ]
-    }
-  );
-}
 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 = useMemo4(() => getParam(props.params, "id"), [props.params]);
@@ -2894,96 +2842,6 @@ function AdminStudioPageEditView(props) {
     }
     setDidResolvePathFallback(true);
   }, [pageIDFromParams]);
-  const canPublish = hasAdminAccess(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 {
-    }
-  };
-  useEffect8(() => {
-    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 }, "*");
-  };
-  useEffect8(() => {
-    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(
@@ -3024,163 +2882,21 @@ 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(PageEditorBreadcrumbs, { pageID, pagesPath }),
-              /* @__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: "calc(100vh - 80px)" }, children: /* @__PURE__ */ jsx19(
+      "iframe",
+      {
+        ref: iframeRef,
+        src: `${builderBasePath.replace(/\/$/, "")}/${pageID}`,
+        style: { border: "none", height: "100%", width: "100%" },
+        title: "Page Builder"
+      }
+    ) })
   ] }) });
 }
 
 // src/admin/components/studio/AdminStudioPagesListView.tsx
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
-var hasAdminAccess2 = (user) => {
+var hasAdminAccess = (user) => {
   if (!user || typeof user !== "object") return false;
   const role = user.role;
   return typeof role === "string" && (role === "admin" || role === "developer");
@@ -3213,7 +2929,7 @@ function AdminStudioPagesIndexView({
   adminBasePath,
   ...props
 }) {
-  const { user } = useAuth5();
+  const { user } = useAuth4();
   const pagesCollectionSlug = getPropString5(props, "pagesCollectionSlug", "pages");
   const newPagePath = resolveAdminPath(adminBasePath, "/pages/new");
   const [loading, setLoading] = useState10(true);
@@ -3261,7 +2977,7 @@ function AdminStudioPagesIndexView({
   return /* @__PURE__ */ jsx20(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsxs17(
     AdminPage,
     {
-      actions: hasAdminAccess2(user) ? /* @__PURE__ */ jsx20(Link2, { className: "orion-admin-action-button", href: newPagePath, children: "New Page" }) : null,
+      actions: hasAdminAccess(user) ? /* @__PURE__ */ jsx20(Link2, { className: "orion-admin-action-button", href: newPagePath, children: "New Page" }) : null,
       breadcrumbs: [
         { label: "Dashboard", href: adminBasePath },
         { label: "Pages" }
@@ -5227,7 +4943,7 @@ 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 { useAuth as useAuth5 } from "@payloadcms/ui";
 import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 var FORM_TONES = [
   {
@@ -5269,17 +4985,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];
@@ -5445,7 +5161,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,
@@ -7382,17 +7098,17 @@ 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 { 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);
@@ -7400,7 +7116,7 @@ function AdminStudioToolsView(props) {
   const [savedMessage, setSavedMessage] = useState22(null);
   const [createSubmitting, setCreateSubmitting] = useState22(false);
   const [updatingUserID, setUpdatingUserID] = useState22(null);
-  if (!hasAdminAccess4(user)) {
+  if (!hasAdminAccess3(user)) {
     return /* @__PURE__ */ jsx33(StudioSectionLayout, { navProps: props, children: /* @__PURE__ */ jsx33(
       AdminPage,
       {

package/dist/builder-v2/client.js

@@ -1176,8 +1176,10 @@ function GrapesPageEditor({
   const selectedComponentRef = (0, import_react.useRef)(null);
   const [error, setError] = (0, import_react.useState)("");
   const [historyState, setHistoryState] = (0, import_react.useState)({ canRedo: false, canUndo: false });
+  const [isDirty, setIsDirty] = (0, import_react.useState)(false);
   const [lastSavedAt, setLastSavedAt] = (0, import_react.useState)("");
   const [loading, setLoading] = (0, import_react.useState)(true);
+  const [publicationState, setPublicationState] = (0, import_react.useState)("live");
   const [selectedDevice, setSelectedDevice] = (0, import_react.useState)("desktop");
   const [saving, setSaving] = (0, import_react.useState)(null);
   const [saveMessage, setSaveMessage] = (0, import_react.useState)("");
@@ -1326,7 +1328,9 @@ function GrapesPageEditor({
         editor.loadProjectData(projectData);
         void loadPayloadMediaAssets(editor);
         editor.on("update", () => {
-          postToParent({ dirty: editor.getDirtyCount() > 0, type: "dirty-state" });
+          const hasDirtyChanges = editor.getDirtyCount() > 0;
+          setIsDirty(hasDirtyChanges);
+          postToParent({ dirty: hasDirtyChanges, type: "dirty-state" });
           updateHistoryState(editor);
           runValidation(editor);
           setSaveMessage("Unsaved changes");
@@ -1343,7 +1347,6 @@ function GrapesPageEditor({
           const typed = component;
           selectedComponentRef.current = typed;
           setSelectionSummary(summarizeSelectedComponent(typed));
-          setSaveMessage("Selection ready");
         });
         setSelectedDevice(editor.getDevice() || "desktop");
         runValidation(editor);
@@ -1425,6 +1428,8 @@ function GrapesPageEditor({
         throw new Error(await parsePayloadErrorMessage(response, "Could not save this page."));
       }
       editor.clearDirtyCount();
+      setIsDirty(false);
+      setPublicationState(status === "published" ? "live" : "draft");
       postToParent({
         dirty: false,
         type: "dirty-state"
@@ -1484,6 +1489,9 @@ function GrapesPageEditor({
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
   }, [saving]);
+  const statusLabel = saving ? saving === "published" ? "Publishing..." : "Saving draft..." : isDirty ? "Unsaved changes" : saveMessage && saveMessage !== "Unsaved changes" ? saveMessage : "All changes saved";
+  const statusMeta = lastSavedAt ? `Last saved ${lastSavedAt}` : "Ready";
+  const liveStatusLabel = isDirty ? "Save draft to update" : publicationState === "draft" ? "Unpublished draft changes" : "Live is up to date";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-editor", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "orion-builder-v2-topbar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
@@ -1491,6 +1499,11 @@ function GrapesPageEditor({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: initialData?.title || "Untitled page" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-toolbar", "aria-label": "Builder controls", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `orion-builder-v2-sync is-${isDirty ? "dirty" : publicationState}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: statusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: liveStatusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: statusMeta })
+        ] }),
         ["desktop", "tablet", "mobile"].map((device) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
           {
@@ -1574,13 +1587,6 @@ function GrapesPageEditor({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-canvas", ref: containerRef })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "orion-builder-v2-inspector", "aria-label": "Selected section settings", children: [
-      saveMessage || lastSavedAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-save-status", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: saveMessage || "Ready" }),
-        lastSavedAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-          "Last saved ",
-          lastSavedAt
-        ] }) : null
-      ] }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: selectionSummary ? selectionSummary.label : "No section selected" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: selectionSummary ? "Edit this section content, images, links, layout, and spacing." : "Select a section or element on the canvas to edit its settings." }),

package/dist/builder-v2/client.mjs

@@ -1052,8 +1052,10 @@ function GrapesPageEditor({
   const selectedComponentRef = useRef(null);
   const [error, setError] = useState("");
   const [historyState, setHistoryState] = useState({ canRedo: false, canUndo: false });
+  const [isDirty, setIsDirty] = useState(false);
   const [lastSavedAt, setLastSavedAt] = useState("");
   const [loading, setLoading] = useState(true);
+  const [publicationState, setPublicationState] = useState("live");
   const [selectedDevice, setSelectedDevice] = useState("desktop");
   const [saving, setSaving] = useState(null);
   const [saveMessage, setSaveMessage] = useState("");
@@ -1202,7 +1204,9 @@ function GrapesPageEditor({
         editor.loadProjectData(projectData);
         void loadPayloadMediaAssets(editor);
         editor.on("update", () => {
-          postToParent({ dirty: editor.getDirtyCount() > 0, type: "dirty-state" });
+          const hasDirtyChanges = editor.getDirtyCount() > 0;
+          setIsDirty(hasDirtyChanges);
+          postToParent({ dirty: hasDirtyChanges, type: "dirty-state" });
           updateHistoryState(editor);
           runValidation(editor);
           setSaveMessage("Unsaved changes");
@@ -1219,7 +1223,6 @@ function GrapesPageEditor({
           const typed = component;
           selectedComponentRef.current = typed;
           setSelectionSummary(summarizeSelectedComponent(typed));
-          setSaveMessage("Selection ready");
         });
         setSelectedDevice(editor.getDevice() || "desktop");
         runValidation(editor);
@@ -1301,6 +1304,8 @@ function GrapesPageEditor({
         throw new Error(await parsePayloadErrorMessage(response, "Could not save this page."));
       }
       editor.clearDirtyCount();
+      setIsDirty(false);
+      setPublicationState(status === "published" ? "live" : "draft");
       postToParent({
         dirty: false,
         type: "dirty-state"
@@ -1360,6 +1365,9 @@ function GrapesPageEditor({
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
   }, [saving]);
+  const statusLabel = saving ? saving === "published" ? "Publishing..." : "Saving draft..." : isDirty ? "Unsaved changes" : saveMessage && saveMessage !== "Unsaved changes" ? saveMessage : "All changes saved";
+  const statusMeta = lastSavedAt ? `Last saved ${lastSavedAt}` : "Ready";
+  const liveStatusLabel = isDirty ? "Save draft to update" : publicationState === "draft" ? "Unpublished draft changes" : "Live is up to date";
   return /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-editor", children: [
     /* @__PURE__ */ jsxs("header", { className: "orion-builder-v2-topbar", children: [
       /* @__PURE__ */ jsxs("div", { children: [
@@ -1367,6 +1375,11 @@ function GrapesPageEditor({
         /* @__PURE__ */ jsx("h1", { children: initialData?.title || "Untitled page" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-toolbar", "aria-label": "Builder controls", children: [
+        /* @__PURE__ */ jsxs("div", { className: `orion-builder-v2-sync is-${isDirty ? "dirty" : publicationState}`, children: [
+          /* @__PURE__ */ jsx("strong", { children: statusLabel }),
+          /* @__PURE__ */ jsx("span", { children: liveStatusLabel }),
+          /* @__PURE__ */ jsx("small", { children: statusMeta })
+        ] }),
         ["desktop", "tablet", "mobile"].map((device) => /* @__PURE__ */ jsx(
           "button",
           {
@@ -1450,13 +1463,6 @@ function GrapesPageEditor({
       /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-canvas", ref: containerRef })
     ] }),
     /* @__PURE__ */ jsxs("aside", { className: "orion-builder-v2-inspector", "aria-label": "Selected section settings", children: [
-      saveMessage || lastSavedAt ? /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-save-status", children: [
-        /* @__PURE__ */ jsx("strong", { children: saveMessage || "Ready" }),
-        lastSavedAt ? /* @__PURE__ */ jsxs("span", { children: [
-          "Last saved ",
-          lastSavedAt
-        ] }) : null
-      ] }) : null,
       /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
         /* @__PURE__ */ jsx("h2", { children: selectionSummary ? selectionSummary.label : "No section selected" }),
         /* @__PURE__ */ jsx("p", { children: selectionSummary ? "Edit this section content, images, links, layout, and spacing." : "Select a section or element on the canvas to edit its settings." }),

package/dist/builder-v2/styles.css

@@ -56,6 +56,59 @@
   justify-content: flex-end;
 }
 
+.orion-builder-v2-sync {
+  align-items: center;
+  background: #fff8ef;
+  border: 1px solid #e7cbb9;
+  border-radius: 12px;
+  color: var(--builder-v2-ink);
+  display: grid;
+  gap: 1px;
+  min-height: 38px;
+  min-width: 172px;
+  padding: 6px 10px;
+}
+
+.orion-builder-v2-sync strong {
+  font-size: 0.76rem;
+  font-weight: 900;
+  line-height: 1.1;
+}
+
+.orion-builder-v2-sync span,
+.orion-builder-v2-sync small {
+  font-size: 0.66rem;
+  font-weight: 800;
+  line-height: 1.1;
+  white-space: nowrap;
+}
+
+.orion-builder-v2-sync span {
+  color: #2f5472;
+}
+
+.orion-builder-v2-sync small {
+  color: var(--builder-v2-muted);
+}
+
+.orion-builder-v2-sync.is-dirty {
+  background: #fff7ed;
+  border-color: #e3a879;
+}
+
+.orion-builder-v2-sync.is-dirty span {
+  color: #9a4c1e;
+}
+
+.orion-builder-v2-sync.is-draft {
+  background: #fff9e8;
+  border-color: #efcf84;
+}
+
+.orion-builder-v2-sync.is-draft span {
+  color: #7d5a0a;
+}
+
 .orion-builder-v2-tool {
   background: #fffaf4;
   border: 1px solid #e7cbb9;
@@ -551,15 +604,55 @@
 .orion-builder-v2-editor .gjs-sm-properties {
   display: grid;
   gap: 8px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   padding: 10px;
 }
 
 .orion-builder-v2-editor .gjs-sm-property {
+  box-sizing: border-box;
   float: none;
   margin: 0;
+  min-width: 0;
   width: 100%;
 }
 
+.orion-builder-v2-editor .gjs-sm-property__display,
+.orion-builder-v2-editor .gjs-sm-property__position,
+.orion-builder-v2-editor .gjs-sm-property__width,
+.orion-builder-v2-editor .gjs-sm-property__height,
+.orion-builder-v2-editor .gjs-sm-property__min-height,
+.orion-builder-v2-editor .gjs-sm-property__font-family,
+.orion-builder-v2-editor .gjs-sm-property__background,
+.orion-builder-v2-editor .gjs-sm-property__border,
+.orion-builder-v2-editor .gjs-sm-property__box-shadow,
+.orion-builder-v2-editor .gjs-sm-composite {
+  grid-column: 1 / -1;
+}
+
+.orion-builder-v2-editor .gjs-sm-property__top,
+.orion-builder-v2-editor .gjs-sm-property__margin-top,
+.orion-builder-v2-editor .gjs-sm-property__padding-top {
+  order: 10;
+}
+
+.orion-builder-v2-editor .gjs-sm-property__bottom,
+.orion-builder-v2-editor .gjs-sm-property__margin-bottom,
+.orion-builder-v2-editor .gjs-sm-property__padding-bottom {
+  order: 11;
+}
+
+.orion-builder-v2-editor .gjs-sm-property__left,
+.orion-builder-v2-editor .gjs-sm-property__margin-left,
+.orion-builder-v2-editor .gjs-sm-property__padding-left {
+  order: 12;
+}
+
+.orion-builder-v2-editor .gjs-sm-property__right,
+.orion-builder-v2-editor .gjs-sm-property__margin-right,
+.orion-builder-v2-editor .gjs-sm-property__padding-right {
+  order: 13;
+}
+
 .orion-builder-v2-editor .gjs-sm-property .gjs-sm-label {
   display: block;
   margin-bottom: 7px;
@@ -568,10 +661,15 @@
 .orion-builder-v2-editor .gjs-sm-property:not(.gjs-sm-radio) .gjs-field,
 .orion-builder-v2-editor .gjs-sm-property .gjs-sm-field {
   background: #fffdf9 !important;
-  border: 1px solid rgba(205, 181, 163, 0.95) !important;
-  border-radius: 6px;
+  background-clip: padding-box;
+  border: 1px solid #d6b7a1 !important;
+  border-radius: 8px;
+  box-sizing: border-box;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
   min-height: 36px;
+  min-width: 0;
+  overflow: hidden;
+  width: 100% !important;
 }
 
 .orion-builder-v2-editor .gjs-sm-property:not(.gjs-sm-radio) .gjs-field:hover,
@@ -591,8 +689,21 @@
 .orion-builder-v2-editor .gjs-field input,
 .orion-builder-v2-editor .gjs-field select,
 .orion-builder-v2-editor .gjs-field textarea {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  box-sizing: border-box;
   min-height: 36px;
   outline: none !important;
+  width: 100% !important;
+}
+
+.orion-builder-v2-editor .gjs-field .gjs-input-unit {
+  background: transparent !important;
+  border: 0 !important;
+  color: #7a879f;
+  height: 100%;
+  padding-right: 8px;
 }
 
 .orion-builder-v2-editor .gjs-field textarea {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.67",
+  "version": "0.6.0-beta.68",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",