@orion-studios/payload-studio 0.4.0-beta.0 → 0.4.0-beta.2

package/README.md

@@ -13,6 +13,9 @@ npm install @orion-studios/payload-studio
 - `@orion-studios/payload-studio/admin`
 - `@orion-studios/payload-studio/admin/client`
 - `@orion-studios/payload-studio/admin.css`
+- `@orion-studios/payload-studio/admin-app`
+- `@orion-studios/payload-studio/admin-app/client`
+- `@orion-studios/payload-studio/admin-app/styles.css`
 - `@orion-studios/payload-studio/blocks`
 - `@orion-studios/payload-studio/nextjs`
 - `@orion-studios/payload-studio/studio`
@@ -35,6 +38,12 @@ import { BuilderPageEditor } from '@orion-studios/payload-studio/studio-pages/cl
 import '@orion-studios/payload-studio/studio-pages/builder.css'
 ```
 
+```ts
+import { AdminPage } from '@orion-studios/payload-studio/admin-app'
+import { AdminShellClient } from '@orion-studios/payload-studio/admin-app/client'
+import '@orion-studios/payload-studio/admin-app/styles.css'
+```
+
 ## Build
 
 ```bash

package/dist/admin-app/styles.css

@@ -115,3 +115,8 @@
   min-width: 0;
   padding: 1.15rem 1.2rem 2.6rem;
 }
+
+.orion-admin-page {
+  max-width: none;
+  width: 100%;
+}

package/dist/studio-pages/builder.css

@@ -112,8 +112,13 @@ body {
 .features {
   border-radius: var(--orion-studio-radius-lg);
   padding: 1.25rem;
-  background: #ffffff;
+  background: linear-gradient(135deg, #124a37 0%, #1f684f 100%);
   border: 1px solid var(--orion-studio-border);
+  color: #fff;
+}
+
+.features .inner {
+  padding: 1.8rem;
 }
 
 .feature-grid {
@@ -124,12 +129,20 @@ body {
 }
 
 .feature-item {
-  background: #fff;
-  border: 1px solid rgba(19, 33, 28, 0.1);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 14px;
   padding: 0.9rem;
 }
 
+.feature-item h3 {
+  color: #fff;
+}
+
+.feature-item p {
+  color: rgba(255, 255, 255, 0.88);
+}
+
 .feature-icon {
   width: 44px;
   height: 44px;

package/dist/studio-pages/client.js

@@ -518,6 +518,37 @@ function parseColor(value, fallback) {
   }
   return fallback;
 }
+function getRelationID(value) {
+  if (typeof value === "number" || typeof value === "string") {
+    return value;
+  }
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  if ("id" in value) {
+    const id = value.id;
+    if (typeof id === "number" || typeof id === "string") {
+      return id;
+    }
+  }
+  return null;
+}
+function extractUploadedMedia(value) {
+  const candidate = value && typeof value === "object" && "doc" in value ? value.doc : value;
+  if (!candidate || typeof candidate !== "object") {
+    return null;
+  }
+  const id = getRelationID(candidate);
+  if (id === null) {
+    return null;
+  }
+  return {
+    alt: typeof candidate.alt === "string" ? candidate.alt : "",
+    filename: typeof candidate.filename === "string" ? candidate.filename : "",
+    id,
+    url: typeof candidate.url === "string" ? candidate.url : ""
+  };
+}
 function InlineText({
   as = "p",
   className,
@@ -807,6 +838,13 @@ function BuilderPageEditor({ initialDoc, pageID }) {
   const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(null);
   const [dragIndex, setDragIndex] = (0, import_react.useState)(null);
   const [sidebarOpen, setSidebarOpen] = (0, import_react.useState)(true);
+  const [savingStatus, setSavingStatus] = (0, import_react.useState)(null);
+  const [saveMessage, setSaveMessage] = (0, import_react.useState)("");
+  const [saveError, setSaveError] = (0, import_react.useState)("");
+  const [uploadingTarget, setUploadingTarget] = (0, import_react.useState)(null);
+  const [uploadError, setUploadError] = (0, import_react.useState)("");
+  const [uploadMessage, setUploadMessage] = (0, import_react.useState)("");
+  const [uploadAltText, setUploadAltText] = (0, import_react.useState)("");
   const selectedBlock = (0, import_react.useMemo)(
     () => selectedIndex !== null ? layout[selectedIndex] : null,
     [layout, selectedIndex]
@@ -873,6 +911,76 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     const currentItems = Array.isArray(selectedBlock[fieldName]) ? selectedBlock[fieldName] : [];
     updateSelectedArray(fieldName, [...currentItems, item]);
   };
+  const uploadMediaForSelected = async (target, file) => {
+    if (selectedIndex === null) {
+      setUploadError("Select a section first.");
+      return;
+    }
+    setUploadingTarget(target);
+    setUploadError("");
+    setUploadMessage("");
+    try {
+      const formData = new FormData();
+      const fallbackAlt = file.name.replace(/\.[^/.]+$/, "").trim();
+      const resolvedAlt = uploadAltText.trim() || fallbackAlt || "Uploaded image";
+      formData.set("_payload", JSON.stringify({ alt: resolvedAlt }));
+      formData.set("file", file);
+      const response = await fetch("/api/media", {
+        body: formData,
+        credentials: "include",
+        method: "POST"
+      });
+      if (!response.ok) {
+        const body = await response.text();
+        throw new Error(body || "Upload failed");
+      }
+      const json = await response.json();
+      const uploaded = extractUploadedMedia(json);
+      if (!uploaded) {
+        throw new Error("Upload succeeded but returned media data was malformed.");
+      }
+      const nextLayout = cloneBlockLayout(layout);
+      const block = nextLayout[selectedIndex];
+      if (target === "hero") {
+        nextLayout[selectedIndex] = {
+          ...block,
+          backgroundImageURL: "",
+          media: uploaded
+        };
+      } else {
+        nextLayout[selectedIndex] = {
+          ...block,
+          image: uploaded
+        };
+      }
+      setLayout(nextLayout);
+      setUploadMessage("Image uploaded and attached to this section.");
+    } catch (error) {
+      setUploadError(error instanceof Error ? error.message : "Upload failed.");
+    } finally {
+      setUploadingTarget(null);
+    }
+  };
+  const toPersistedLayout = (sourceLayout) => sourceLayout.map((block) => {
+    if (!block || typeof block !== "object") {
+      return block;
+    }
+    const nextBlock = { ...block };
+    const blockType = normalizeText(nextBlock.blockType);
+    if (blockType === "hero") {
+      const mediaID = getRelationID(nextBlock.media);
+      if (mediaID !== null) {
+        nextBlock.media = mediaID;
+      }
+    }
+    if (blockType === "media") {
+      const imageID = getRelationID(nextBlock.image);
+      if (imageID !== null) {
+        nextBlock.image = imageID;
+      }
+    }
+    return nextBlock;
+  });
   const sidebarSectionStyle = {
     border: "1px solid rgba(13, 74, 55, 0.15)",
     borderRadius: 12,
@@ -921,12 +1029,16 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     });
   };
   const saveLayout = async (status) => {
+    setSavingStatus(status);
+    setSaveError("");
+    setSaveMessage("");
     try {
+      const persistedLayout = toPersistedLayout(layout);
       const response = await fetch(`/api/pages/${pageID}`, {
         body: JSON.stringify({
           _status: status,
-          layout,
-          studioDocument: layoutToStudioDocument(layout, title),
+          layout: persistedLayout,
+          studioDocument: layoutToStudioDocument(persistedLayout, title),
           title
         }),
         headers: {
@@ -938,6 +1050,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
         const body = await response.text();
         throw new Error(body || "Failed to save page");
       }
+      setSaveMessage(status === "published" ? "Published." : "Draft saved.");
       window.parent?.postMessage(
         {
           message: status === "published" ? "Published." : "Draft saved.",
@@ -948,8 +1061,10 @@ function BuilderPageEditor({ initialDoc, pageID }) {
         },
         "*"
       );
+      return true;
     } catch (error) {
       console.error(error);
+      setSaveError("Could not save. Check permissions/session and retry.");
       window.parent?.postMessage(
         {
           message: "Could not save. Check permissions/session and retry.",
@@ -960,6 +1075,9 @@ function BuilderPageEditor({ initialDoc, pageID }) {
         },
         "*"
       );
+      return false;
+    } finally {
+      setSavingStatus(null);
     }
   };
   (0, import_react.useEffect)(() => {
@@ -1632,6 +1750,48 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                     }
                   ),
                   sidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "grid", gap: 12, maxHeight: "calc(100vh - 90px)", overflowY: "auto", padding: 12 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { style: sidebarSectionStyle, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 8 }, children: "Save & Publish" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "button",
+                          {
+                            disabled: savingStatus !== null,
+                            onClick: () => void saveLayout("draft"),
+                            style: {
+                              borderRadius: 999,
+                              cursor: savingStatus ? "not-allowed" : "pointer",
+                              fontSize: 12,
+                              fontWeight: 700,
+                              padding: "7px 10px"
+                            },
+                            type: "button",
+                            children: savingStatus === "draft" ? "Saving..." : "Save Draft"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "button",
+                          {
+                            disabled: savingStatus !== null,
+                            onClick: () => void saveLayout("published"),
+                            style: {
+                              background: "#0f7d52",
+                              border: "none",
+                              borderRadius: 999,
+                              color: "#fff",
+                              cursor: savingStatus ? "not-allowed" : "pointer",
+                              fontSize: 12,
+                              fontWeight: 700,
+                              padding: "7px 10px"
+                            },
+                            type: "button",
+                            children: savingStatus === "published" ? "Publishing..." : "Publish"
+                          }
+                        )
+                      ] }),
+                      saveMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#0f7d52", fontSize: 11, fontWeight: 700, marginTop: 8 }, children: saveMessage }) : null,
+                      saveError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#8d1d1d", fontSize: 11, fontWeight: 700, marginTop: 8 }, children: saveError }) : null
+                    ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { style: sidebarSectionStyle, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 8 }, children: "Add Sections" }),
                       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -1788,6 +1948,38 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                                 value: parseColor(selectedBlock.backgroundColor, "#124a37")
                               }
                             )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
+                            "Upload Alt Text",
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "input",
+                              {
+                                onChange: (event) => setUploadAltText(event.target.value),
+                                placeholder: "Describe the image",
+                                style: sidebarInputStyle,
+                                type: "text",
+                                value: uploadAltText
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
+                            "Upload Hero Background Image",
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "input",
+                              {
+                                accept: "image/*",
+                                disabled: uploadingTarget !== null,
+                                onChange: (event) => {
+                                  const file = event.currentTarget.files?.[0];
+                                  if (file) {
+                                    void uploadMediaForSelected("hero", file);
+                                  }
+                                  event.currentTarget.value = "";
+                                },
+                                style: sidebarInputStyle,
+                                type: "file"
+                              }
+                            )
                           ] })
                         ] }) : null,
                         selectedType === "featureGrid" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -1861,20 +2053,54 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                             )
                           ] })
                         ] }) : null,
-                        selectedType === "media" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
-                          "Image Size",
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                            "select",
-                            {
-                              onChange: (event) => updateSelectedField("size", event.target.value),
-                              style: sidebarInputStyle,
-                              value: normalizeText(selectedBlock.size, "default"),
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "default", children: "Default" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "wide", children: "Wide" })
-                              ]
-                            }
-                          )
+                        selectedType === "media" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
+                            "Image Size",
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                              "select",
+                              {
+                                onChange: (event) => updateSelectedField("size", event.target.value),
+                                style: sidebarInputStyle,
+                                value: normalizeText(selectedBlock.size, "default"),
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "default", children: "Default" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "wide", children: "Wide" })
+                                ]
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
+                            "Upload Alt Text",
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "input",
+                              {
+                                onChange: (event) => setUploadAltText(event.target.value),
+                                placeholder: "Describe the image",
+                                style: sidebarInputStyle,
+                                type: "text",
+                                value: uploadAltText
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
+                            "Upload Section Image",
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "input",
+                              {
+                                accept: "image/*",
+                                disabled: uploadingTarget !== null,
+                                onChange: (event) => {
+                                  const file = event.currentTarget.files?.[0];
+                                  if (file) {
+                                    void uploadMediaForSelected("media", file);
+                                  }
+                                  event.currentTarget.value = "";
+                                },
+                                style: sidebarInputStyle,
+                                type: "file"
+                              }
+                            )
+                          ] })
                         ] }) : null,
                         selectedType === "richText" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
                           "Content Width",
@@ -1928,7 +2154,10 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                             children: "Add Testimonial"
                           }
                         ) : null,
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Click section text directly on the page for copy edits. Use this panel for layout and style options." })
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Click section text directly on the page for copy edits. Use this panel for layout and style options." }),
+                        uploadingTarget ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Uploading image..." }) : null,
+                        uploadMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#0f7d52", fontSize: 11, fontWeight: 700 }, children: uploadMessage }) : null,
+                        uploadError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "#8d1d1d", fontSize: 11, fontWeight: 700 }, children: uploadError }) : null
                       ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: "var(--ink-700)", fontSize: 12, margin: 0 }, children: "Click a section on the page preview to edit its options here." })
                     ] })
                   ] }) : null

package/dist/studio-pages/client.mjs

@@ -490,6 +490,37 @@ function parseColor(value, fallback) {
   }
   return fallback;
 }
+function getRelationID(value) {
+  if (typeof value === "number" || typeof value === "string") {
+    return value;
+  }
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  if ("id" in value) {
+    const id = value.id;
+    if (typeof id === "number" || typeof id === "string") {
+      return id;
+    }
+  }
+  return null;
+}
+function extractUploadedMedia(value) {
+  const candidate = value && typeof value === "object" && "doc" in value ? value.doc : value;
+  if (!candidate || typeof candidate !== "object") {
+    return null;
+  }
+  const id = getRelationID(candidate);
+  if (id === null) {
+    return null;
+  }
+  return {
+    alt: typeof candidate.alt === "string" ? candidate.alt : "",
+    filename: typeof candidate.filename === "string" ? candidate.filename : "",
+    id,
+    url: typeof candidate.url === "string" ? candidate.url : ""
+  };
+}
 function InlineText({
   as = "p",
   className,
@@ -779,6 +810,13 @@ function BuilderPageEditor({ initialDoc, pageID }) {
   const [selectedIndex, setSelectedIndex] = useState(null);
   const [dragIndex, setDragIndex] = useState(null);
   const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [savingStatus, setSavingStatus] = useState(null);
+  const [saveMessage, setSaveMessage] = useState("");
+  const [saveError, setSaveError] = useState("");
+  const [uploadingTarget, setUploadingTarget] = useState(null);
+  const [uploadError, setUploadError] = useState("");
+  const [uploadMessage, setUploadMessage] = useState("");
+  const [uploadAltText, setUploadAltText] = useState("");
   const selectedBlock = useMemo(
     () => selectedIndex !== null ? layout[selectedIndex] : null,
     [layout, selectedIndex]
@@ -845,6 +883,76 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     const currentItems = Array.isArray(selectedBlock[fieldName]) ? selectedBlock[fieldName] : [];
     updateSelectedArray(fieldName, [...currentItems, item]);
   };
+  const uploadMediaForSelected = async (target, file) => {
+    if (selectedIndex === null) {
+      setUploadError("Select a section first.");
+      return;
+    }
+    setUploadingTarget(target);
+    setUploadError("");
+    setUploadMessage("");
+    try {
+      const formData = new FormData();
+      const fallbackAlt = file.name.replace(/\.[^/.]+$/, "").trim();
+      const resolvedAlt = uploadAltText.trim() || fallbackAlt || "Uploaded image";
+      formData.set("_payload", JSON.stringify({ alt: resolvedAlt }));
+      formData.set("file", file);
+      const response = await fetch("/api/media", {
+        body: formData,
+        credentials: "include",
+        method: "POST"
+      });
+      if (!response.ok) {
+        const body = await response.text();
+        throw new Error(body || "Upload failed");
+      }
+      const json = await response.json();
+      const uploaded = extractUploadedMedia(json);
+      if (!uploaded) {
+        throw new Error("Upload succeeded but returned media data was malformed.");
+      }
+      const nextLayout = cloneBlockLayout(layout);
+      const block = nextLayout[selectedIndex];
+      if (target === "hero") {
+        nextLayout[selectedIndex] = {
+          ...block,
+          backgroundImageURL: "",
+          media: uploaded
+        };
+      } else {
+        nextLayout[selectedIndex] = {
+          ...block,
+          image: uploaded
+        };
+      }
+      setLayout(nextLayout);
+      setUploadMessage("Image uploaded and attached to this section.");
+    } catch (error) {
+      setUploadError(error instanceof Error ? error.message : "Upload failed.");
+    } finally {
+      setUploadingTarget(null);
+    }
+  };
+  const toPersistedLayout = (sourceLayout) => sourceLayout.map((block) => {
+    if (!block || typeof block !== "object") {
+      return block;
+    }
+    const nextBlock = { ...block };
+    const blockType = normalizeText(nextBlock.blockType);
+    if (blockType === "hero") {
+      const mediaID = getRelationID(nextBlock.media);
+      if (mediaID !== null) {
+        nextBlock.media = mediaID;
+      }
+    }
+    if (blockType === "media") {
+      const imageID = getRelationID(nextBlock.image);
+      if (imageID !== null) {
+        nextBlock.image = imageID;
+      }
+    }
+    return nextBlock;
+  });
   const sidebarSectionStyle = {
     border: "1px solid rgba(13, 74, 55, 0.15)",
     borderRadius: 12,
@@ -893,12 +1001,16 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     });
   };
   const saveLayout = async (status) => {
+    setSavingStatus(status);
+    setSaveError("");
+    setSaveMessage("");
     try {
+      const persistedLayout = toPersistedLayout(layout);
       const response = await fetch(`/api/pages/${pageID}`, {
         body: JSON.stringify({
           _status: status,
-          layout,
-          studioDocument: layoutToStudioDocument(layout, title),
+          layout: persistedLayout,
+          studioDocument: layoutToStudioDocument(persistedLayout, title),
           title
         }),
         headers: {
@@ -910,6 +1022,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
         const body = await response.text();
         throw new Error(body || "Failed to save page");
       }
+      setSaveMessage(status === "published" ? "Published." : "Draft saved.");
       window.parent?.postMessage(
         {
           message: status === "published" ? "Published." : "Draft saved.",
@@ -920,8 +1033,10 @@ function BuilderPageEditor({ initialDoc, pageID }) {
         },
         "*"
       );
+      return true;
     } catch (error) {
       console.error(error);
+      setSaveError("Could not save. Check permissions/session and retry.");
       window.parent?.postMessage(
         {
           message: "Could not save. Check permissions/session and retry.",
@@ -932,6 +1047,9 @@ function BuilderPageEditor({ initialDoc, pageID }) {
         },
         "*"
       );
+      return false;
+    } finally {
+      setSavingStatus(null);
     }
   };
   useEffect(() => {
@@ -1604,6 +1722,48 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                     }
                   ),
                   sidebarOpen ? /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 12, maxHeight: "calc(100vh - 90px)", overflowY: "auto", padding: 12 }, children: [
+                    /* @__PURE__ */ jsxs("section", { style: sidebarSectionStyle, children: [
+                      /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 8 }, children: "Save & Publish" }),
+                      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6 }, children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            disabled: savingStatus !== null,
+                            onClick: () => void saveLayout("draft"),
+                            style: {
+                              borderRadius: 999,
+                              cursor: savingStatus ? "not-allowed" : "pointer",
+                              fontSize: 12,
+                              fontWeight: 700,
+                              padding: "7px 10px"
+                            },
+                            type: "button",
+                            children: savingStatus === "draft" ? "Saving..." : "Save Draft"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            disabled: savingStatus !== null,
+                            onClick: () => void saveLayout("published"),
+                            style: {
+                              background: "#0f7d52",
+                              border: "none",
+                              borderRadius: 999,
+                              color: "#fff",
+                              cursor: savingStatus ? "not-allowed" : "pointer",
+                              fontSize: 12,
+                              fontWeight: 700,
+                              padding: "7px 10px"
+                            },
+                            type: "button",
+                            children: savingStatus === "published" ? "Publishing..." : "Publish"
+                          }
+                        )
+                      ] }),
+                      saveMessage ? /* @__PURE__ */ jsx("div", { style: { color: "#0f7d52", fontSize: 11, fontWeight: 700, marginTop: 8 }, children: saveMessage }) : null,
+                      saveError ? /* @__PURE__ */ jsx("div", { style: { color: "#8d1d1d", fontSize: 11, fontWeight: 700, marginTop: 8 }, children: saveError }) : null
+                    ] }),
                     /* @__PURE__ */ jsxs("section", { style: sidebarSectionStyle, children: [
                       /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 8 }, children: "Add Sections" }),
                       /* @__PURE__ */ jsxs(
@@ -1760,6 +1920,38 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                                 value: parseColor(selectedBlock.backgroundColor, "#124a37")
                               }
                             )
+                          ] }),
+                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                            "Upload Alt Text",
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                onChange: (event) => setUploadAltText(event.target.value),
+                                placeholder: "Describe the image",
+                                style: sidebarInputStyle,
+                                type: "text",
+                                value: uploadAltText
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                            "Upload Hero Background Image",
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                accept: "image/*",
+                                disabled: uploadingTarget !== null,
+                                onChange: (event) => {
+                                  const file = event.currentTarget.files?.[0];
+                                  if (file) {
+                                    void uploadMediaForSelected("hero", file);
+                                  }
+                                  event.currentTarget.value = "";
+                                },
+                                style: sidebarInputStyle,
+                                type: "file"
+                              }
+                            )
                           ] })
                         ] }) : null,
                         selectedType === "featureGrid" ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1833,20 +2025,54 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                             )
                           ] })
                         ] }) : null,
-                        selectedType === "media" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Image Size",
-                          /* @__PURE__ */ jsxs(
-                            "select",
-                            {
-                              onChange: (event) => updateSelectedField("size", event.target.value),
-                              style: sidebarInputStyle,
-                              value: normalizeText(selectedBlock.size, "default"),
-                              children: [
-                                /* @__PURE__ */ jsx("option", { value: "default", children: "Default" }),
-                                /* @__PURE__ */ jsx("option", { value: "wide", children: "Wide" })
-                              ]
-                            }
-                          )
+                        selectedType === "media" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                            "Image Size",
+                            /* @__PURE__ */ jsxs(
+                              "select",
+                              {
+                                onChange: (event) => updateSelectedField("size", event.target.value),
+                                style: sidebarInputStyle,
+                                value: normalizeText(selectedBlock.size, "default"),
+                                children: [
+                                  /* @__PURE__ */ jsx("option", { value: "default", children: "Default" }),
+                                  /* @__PURE__ */ jsx("option", { value: "wide", children: "Wide" })
+                                ]
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                            "Upload Alt Text",
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                onChange: (event) => setUploadAltText(event.target.value),
+                                placeholder: "Describe the image",
+                                style: sidebarInputStyle,
+                                type: "text",
+                                value: uploadAltText
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                            "Upload Section Image",
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                accept: "image/*",
+                                disabled: uploadingTarget !== null,
+                                onChange: (event) => {
+                                  const file = event.currentTarget.files?.[0];
+                                  if (file) {
+                                    void uploadMediaForSelected("media", file);
+                                  }
+                                  event.currentTarget.value = "";
+                                },
+                                style: sidebarInputStyle,
+                                type: "file"
+                              }
+                            )
+                          ] })
                         ] }) : null,
                         selectedType === "richText" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
                           "Content Width",
@@ -1900,7 +2126,10 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                             children: "Add Testimonial"
                           }
                         ) : null,
-                        /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Click section text directly on the page for copy edits. Use this panel for layout and style options." })
+                        /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Click section text directly on the page for copy edits. Use this panel for layout and style options." }),
+                        uploadingTarget ? /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Uploading image..." }) : null,
+                        uploadMessage ? /* @__PURE__ */ jsx("div", { style: { color: "#0f7d52", fontSize: 11, fontWeight: 700 }, children: uploadMessage }) : null,
+                        uploadError ? /* @__PURE__ */ jsx("div", { style: { color: "#8d1d1d", fontSize: 11, fontWeight: 700 }, children: uploadError }) : null
                       ] }) : /* @__PURE__ */ jsx("p", { style: { color: "var(--ink-700)", fontSize: 12, margin: 0 }, children: "Click a section on the page preview to edit its options here." })
                     ] })
                   ] }) : null

package/package.json

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