@orion-studios/payload-studio 0.5.0-beta.49 → 0.5.0-beta.50

package/dist/admin-app/client.js

@@ -508,6 +508,7 @@ function PageEditorFrame({ src }) {
   const [showUnsavedDialog, setShowUnsavedDialog] = (0, import_react4.useState)(false);
   const [canUndo, setCanUndo] = (0, import_react4.useState)(false);
   const [canRedo, setCanRedo] = (0, import_react4.useState)(false);
+  const [sessionExpired, setSessionExpired] = (0, import_react4.useState)(false);
   const clearDirtyCheckTimer = () => {
     if (dirtyCheckTimerRef.current) {
       window.clearTimeout(dirtyCheckTimerRef.current);
@@ -578,6 +579,10 @@ function PageEditorFrame({ src }) {
         setCanRedo(Boolean(data.canRedo));
         return;
       }
+      if (data.type === "session-expired") {
+        setSessionExpired(true);
+        return;
+      }
       if (data.type !== "save-result") {
         return;
       }
@@ -741,6 +746,21 @@ function PageEditorFrame({ src }) {
     ),
     message ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#0f7d52", fontSize: "0.9rem", fontWeight: 700 }, children: message }) : null,
     error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "orion-admin-error", children: error }) : null,
+    sessionExpired ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        style: {
+          background: "#fef2f2",
+          borderLeft: "4px solid #8d1d1d",
+          borderRadius: 8,
+          color: "#8d1d1d",
+          fontSize: "0.9rem",
+          fontWeight: 600,
+          padding: "0.6rem 0.8rem"
+        },
+        children: "Session expired. Log in again in a new tab, then save your changes."
+      }
+    ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "iframe",
       {

package/dist/admin-app/client.mjs

@@ -480,6 +480,7 @@ function PageEditorFrame({ src }) {
   const [showUnsavedDialog, setShowUnsavedDialog] = useState4(false);
   const [canUndo, setCanUndo] = useState4(false);
   const [canRedo, setCanRedo] = useState4(false);
+  const [sessionExpired, setSessionExpired] = useState4(false);
   const clearDirtyCheckTimer = () => {
     if (dirtyCheckTimerRef.current) {
       window.clearTimeout(dirtyCheckTimerRef.current);
@@ -550,6 +551,10 @@ function PageEditorFrame({ src }) {
         setCanRedo(Boolean(data.canRedo));
         return;
       }
+      if (data.type === "session-expired") {
+        setSessionExpired(true);
+        return;
+      }
       if (data.type !== "save-result") {
         return;
       }
@@ -713,6 +718,21 @@ function PageEditorFrame({ src }) {
     ),
     message ? /* @__PURE__ */ jsx4("div", { style: { color: "#0f7d52", fontSize: "0.9rem", fontWeight: 700 }, children: message }) : null,
     error ? /* @__PURE__ */ jsx4("div", { className: "orion-admin-error", children: error }) : null,
+    sessionExpired ? /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          background: "#fef2f2",
+          borderLeft: "4px solid #8d1d1d",
+          borderRadius: 8,
+          color: "#8d1d1d",
+          fontSize: "0.9rem",
+          fontWeight: 600,
+          padding: "0.6rem 0.8rem"
+        },
+        children: "Session expired. Log in again in a new tab, then save your changes."
+      }
+    ) : null,
     /* @__PURE__ */ jsx4(
       "iframe",
       {

package/dist/studio-pages/client.js

@@ -1391,6 +1391,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
   const [expandedItemIndex, setExpandedItemIndex] = (0, import_react.useState)(null);
   const [testimonialsOffsets, setTestimonialsOffsets] = (0, import_react.useState)({});
   const [presetQuery, setPresetQuery] = (0, import_react.useState)("");
+  const [sessionExpired, setSessionExpired] = (0, import_react.useState)(false);
   const [pastSnapshots, setPastSnapshots] = (0, import_react.useState)([]);
   const [futureSnapshots, setFutureSnapshots] = (0, import_react.useState)([]);
   const isSidebarPanelKey = (value) => value === "pageDefaults" || value === "addSections" || value === "selected";
@@ -1460,6 +1461,34 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     };
     void loadMediaLibrary();
   }, []);
+  (0, import_react.useEffect)(() => {
+    let active = true;
+    const checkSession = async () => {
+      try {
+        const response = await fetch("/api/users/me", {
+          credentials: "include"
+        });
+        if (!active) return;
+        if (response.status === 401 || response.status === 403) {
+          setSessionExpired(true);
+          window.parent?.postMessage(
+            {
+              source: "payload-visual-builder-child",
+              type: "session-expired"
+            },
+            "*"
+          );
+        }
+      } catch {
+      }
+    };
+    void checkSession();
+    const intervalId = window.setInterval(checkSession, 5 * 60 * 1e3);
+    return () => {
+      active = false;
+      window.clearInterval(intervalId);
+    };
+  }, []);
   (0, import_react.useEffect)(() => {
     if (selectedType !== "hero") {
       setSelectedHeroMediaID("");
@@ -1903,12 +1932,24 @@ function BuilderPageEditor({ initialDoc, pageID }) {
           ),
           title
         }),
+        credentials: "include",
         headers: {
           "Content-Type": "application/json"
         },
         method: "PATCH"
       });
       if (!response.ok) {
+        if (response.status === 401 || response.status === 403) {
+          setSessionExpired(true);
+          window.parent?.postMessage(
+            {
+              source: "payload-visual-builder-child",
+              type: "session-expired"
+            },
+            "*"
+          );
+          throw new Error("Your session has expired. Log in again in a new tab, then retry saving.");
+        }
         throw new Error(await parsePayloadErrorMessage(response, "Could not save this page."));
       }
       const savedSnapshot = {
@@ -2151,6 +2192,77 @@ function BuilderPageEditor({ initialDoc, pageID }) {
         padding: "0 0 1.2rem"
       },
       children: [
+        sessionExpired ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              alignItems: "center",
+              background: "rgba(0, 0, 0, 0.6)",
+              display: "grid",
+              inset: 0,
+              justifyItems: "center",
+              padding: "1rem",
+              position: "fixed",
+              zIndex: 9999
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                style: {
+                  background: "#ffffff",
+                  borderRadius: 14,
+                  boxShadow: "0 20px 42px rgba(0, 0, 0, 0.3)",
+                  display: "grid",
+                  gap: "0.8rem",
+                  maxWidth: 420,
+                  padding: "1.2rem",
+                  textAlign: "center",
+                  width: "100%"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#8d1d1d", fontSize: "1.1rem", fontWeight: 700 }, children: "Session Expired" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#333", fontSize: "0.9rem", lineHeight: 1.5 }, children: "Your login session has expired. Your edits are still here, but you must log in again before saving. Open the login page in a new tab, sign in, then return here and try saving again." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "a",
+                    {
+                      href: "/admin",
+                      rel: "noopener noreferrer",
+                      style: {
+                        background: "#0f7d52",
+                        borderRadius: 8,
+                        color: "#ffffff",
+                        display: "inline-block",
+                        fontSize: "0.9rem",
+                        fontWeight: 600,
+                        padding: "0.5rem 1rem",
+                        textDecoration: "none"
+                      },
+                      target: "_blank",
+                      children: "Open Login Page"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      onClick: () => setSessionExpired(false),
+                      style: {
+                        background: "transparent",
+                        border: "none",
+                        color: "#666",
+                        cursor: "pointer",
+                        fontSize: "0.85rem",
+                        padding: "0.3rem",
+                        textDecoration: "underline"
+                      },
+                      type: "button",
+                      children: "Dismiss"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 0 }, children: [
           layout.map((block, index) => {
             const type = normalizeText(block.blockType, "unknown");

package/dist/studio-pages/client.mjs

@@ -1363,6 +1363,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
   const [expandedItemIndex, setExpandedItemIndex] = useState(null);
   const [testimonialsOffsets, setTestimonialsOffsets] = useState({});
   const [presetQuery, setPresetQuery] = useState("");
+  const [sessionExpired, setSessionExpired] = useState(false);
   const [pastSnapshots, setPastSnapshots] = useState([]);
   const [futureSnapshots, setFutureSnapshots] = useState([]);
   const isSidebarPanelKey = (value) => value === "pageDefaults" || value === "addSections" || value === "selected";
@@ -1432,6 +1433,34 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     };
     void loadMediaLibrary();
   }, []);
+  useEffect(() => {
+    let active = true;
+    const checkSession = async () => {
+      try {
+        const response = await fetch("/api/users/me", {
+          credentials: "include"
+        });
+        if (!active) return;
+        if (response.status === 401 || response.status === 403) {
+          setSessionExpired(true);
+          window.parent?.postMessage(
+            {
+              source: "payload-visual-builder-child",
+              type: "session-expired"
+            },
+            "*"
+          );
+        }
+      } catch {
+      }
+    };
+    void checkSession();
+    const intervalId = window.setInterval(checkSession, 5 * 60 * 1e3);
+    return () => {
+      active = false;
+      window.clearInterval(intervalId);
+    };
+  }, []);
   useEffect(() => {
     if (selectedType !== "hero") {
       setSelectedHeroMediaID("");
@@ -1875,12 +1904,24 @@ function BuilderPageEditor({ initialDoc, pageID }) {
           ),
           title
         }),
+        credentials: "include",
         headers: {
           "Content-Type": "application/json"
         },
         method: "PATCH"
       });
       if (!response.ok) {
+        if (response.status === 401 || response.status === 403) {
+          setSessionExpired(true);
+          window.parent?.postMessage(
+            {
+              source: "payload-visual-builder-child",
+              type: "session-expired"
+            },
+            "*"
+          );
+          throw new Error("Your session has expired. Log in again in a new tab, then retry saving.");
+        }
         throw new Error(await parsePayloadErrorMessage(response, "Could not save this page."));
       }
       const savedSnapshot = {
@@ -2123,6 +2164,77 @@ function BuilderPageEditor({ initialDoc, pageID }) {
         padding: "0 0 1.2rem"
       },
       children: [
+        sessionExpired ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              alignItems: "center",
+              background: "rgba(0, 0, 0, 0.6)",
+              display: "grid",
+              inset: 0,
+              justifyItems: "center",
+              padding: "1rem",
+              position: "fixed",
+              zIndex: 9999
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  background: "#ffffff",
+                  borderRadius: 14,
+                  boxShadow: "0 20px 42px rgba(0, 0, 0, 0.3)",
+                  display: "grid",
+                  gap: "0.8rem",
+                  maxWidth: 420,
+                  padding: "1.2rem",
+                  textAlign: "center",
+                  width: "100%"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { style: { color: "#8d1d1d", fontSize: "1.1rem", fontWeight: 700 }, children: "Session Expired" }),
+                  /* @__PURE__ */ jsx("div", { style: { color: "#333", fontSize: "0.9rem", lineHeight: 1.5 }, children: "Your login session has expired. Your edits are still here, but you must log in again before saving. Open the login page in a new tab, sign in, then return here and try saving again." }),
+                  /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: "/admin",
+                      rel: "noopener noreferrer",
+                      style: {
+                        background: "#0f7d52",
+                        borderRadius: 8,
+                        color: "#ffffff",
+                        display: "inline-block",
+                        fontSize: "0.9rem",
+                        fontWeight: 600,
+                        padding: "0.5rem 1rem",
+                        textDecoration: "none"
+                      },
+                      target: "_blank",
+                      children: "Open Login Page"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setSessionExpired(false),
+                      style: {
+                        background: "transparent",
+                        border: "none",
+                        color: "#666",
+                        cursor: "pointer",
+                        fontSize: "0.85rem",
+                        padding: "0.3rem",
+                        textDecoration: "underline"
+                      },
+                      type: "button",
+                      children: "Dismiss"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) : null,
         /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
           layout.map((block, index) => {
             const type = normalizeText(block.blockType, "unknown");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.5.0-beta.49",
+  "version": "0.5.0-beta.50",
   "description": "Unified Payload CMS toolkit for Orion Studios",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",