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

package/dist/index.mjs

@@ -4,18 +4,18 @@ import {
 import {
   admin_app_exports
 } from "./chunk-AAOHJDNS.mjs";
-import {
-  blocks_exports
-} from "./chunk-PC5622T7.mjs";
 import {
   studio_exports
 } from "./chunk-N67KVM2S.mjs";
+import {
+  studio_pages_exports
+} from "./chunk-UJFU323N.mjs";
 import {
   nextjs_exports
 } from "./chunk-ZLLNO5FM.mjs";
 import {
-  studio_pages_exports
-} from "./chunk-UJFU323N.mjs";
+  blocks_exports
+} from "./chunk-PC5622T7.mjs";
 import "./chunk-ETRRXURT.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {

package/dist/studio-pages/builder.css

@@ -84,10 +84,12 @@ h4 {
   max-width: 100%;
 }
 
-.orion-builder-content > .section,
-.orion-builder-content > .hero {
-  padding-top: var(--orion-shell-padding-y);
-  padding-bottom: var(--orion-shell-padding-y);
+.orion-builder-content .section {
+  padding: 0;
+}
+
+.orion-builder-content .hero {
+  margin: 0;
 }
 
 .section {

package/dist/studio-pages/client.js

@@ -563,6 +563,11 @@ var gradientPresetPairs = {
   sand: ["#f3ead8", "#f8f5ed"],
   slate: ["#1a2f2a", "#34524a"]
 };
+var sectionPaddingMap = {
+  sm: "1.4rem",
+  md: "2.6rem",
+  lg: "3.4rem"
+};
 var quickAddBlockTypes = [
   "hero",
   "featureGrid",
@@ -711,10 +716,9 @@ function parseAngle(value, fallback = "135") {
   return String(Math.max(0, Math.min(360, parsed)));
 }
 var sectionStyleFromBlock = (block, pageDefaults) => {
-  const sectionWidthRaw = normalizeText(block.sectionWidth, defaultSectionStyle.sectionWidth);
   const contentWidthRaw = normalizeText(block.contentWidth, defaultSectionStyle.contentWidth);
-  const sectionPaddingY = normalizeText(block.sectionPaddingY, defaultSectionStyle.sectionPaddingY);
-  const sectionWidth = sectionWidthRaw === "full" || sectionWidthRaw === "wide" || sectionWidthRaw === "content" ? sectionWidthRaw : pageDefaults.pageWidthDefault;
+  const sectionPaddingRaw = normalizeText(block.sectionPaddingY, defaultSectionStyle.sectionPaddingY);
+  const sectionPaddingY = sectionPaddingRaw === "sm" || sectionPaddingRaw === "lg" ? sectionPaddingRaw : "md";
   const contentWidth = contentWidthRaw === "narrow" || contentWidthRaw === "content" || contentWidthRaw === "wide" || contentWidthRaw === "full" || contentWidthRaw === "inherit" ? contentWidthRaw : "inherit";
   const resolvedContentWidth = contentWidth === "inherit" ? pageDefaults.pageWidthDefault : contentWidth;
   const sectionMode = normalizeText(block.sectionBackgroundMode, defaultSectionStyle.sectionBackgroundMode);
@@ -735,8 +739,20 @@ var sectionStyleFromBlock = (block, pageDefaults) => {
   const contentGradient = `linear-gradient(${contentAngle}deg, ${contentPresetPair?.[0] || contentFrom} 0%, ${contentPresetPair?.[1] || contentTo} 100%)`;
   return {
     contentClass: `orion-builder-content is-${resolvedContentWidth}`,
-    contentStyle: contentMode === "color" ? { background: contentColor } : contentMode === "gradient" ? { background: contentGradient } : {},
-    sectionClass: `orion-builder-shell is-${sectionWidth} pad-${sectionPaddingY}`,
+    contentStyle: contentMode === "color" ? {
+      background: contentColor,
+      borderRadius: 20,
+      boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)"
+    } : contentMode === "gradient" ? {
+      background: contentGradient,
+      borderRadius: 20,
+      boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)"
+    } : {},
+    sectionClass: `orion-builder-shell is-${pageDefaults.pageWidthDefault}`,
+    sectionInnerStyle: {
+      paddingBottom: sectionPaddingMap[sectionPaddingY],
+      paddingTop: sectionPaddingMap[sectionPaddingY]
+    },
     sectionStyle: sectionMode === "color" ? { background: sectionColor } : sectionMode === "gradient" ? { background: sectionGradient } : {}
   };
 };
@@ -784,6 +800,51 @@ function getUploadedMediaURL(value) {
   }
   return "";
 }
+var MAX_DIRECT_UPLOAD_BYTES = 4e6;
+async function optimizeImageForUpload(file) {
+  if (!file.type.startsWith("image/")) {
+    return file;
+  }
+  if (file.size <= MAX_DIRECT_UPLOAD_BYTES) {
+    return file;
+  }
+  const objectURL = URL.createObjectURL(file);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const nextImage = new Image();
+      nextImage.onload = () => resolve(nextImage);
+      nextImage.onerror = () => reject(new Error("Could not read image for upload optimization."));
+      nextImage.src = objectURL;
+    });
+    const maxDimension = 2200;
+    const scale = Math.min(1, maxDimension / Math.max(image.width, image.height));
+    const targetWidth = Math.max(1, Math.round(image.width * scale));
+    const targetHeight = Math.max(1, Math.round(image.height * scale));
+    const canvas = document.createElement("canvas");
+    canvas.width = targetWidth;
+    canvas.height = targetHeight;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return file;
+    }
+    context.drawImage(image, 0, 0, targetWidth, targetHeight);
+    const outputMime = file.type === "image/webp" ? "image/webp" : "image/jpeg";
+    const blob = await new Promise((resolve) => {
+      canvas.toBlob((value) => resolve(value), outputMime, 0.82);
+    });
+    if (!blob) {
+      return file;
+    }
+    const optimizedName = file.name.replace(/\.[^/.]+$/, outputMime === "image/webp" ? ".webp" : ".jpg");
+    const optimized = new File([blob], optimizedName, {
+      lastModified: Date.now(),
+      type: outputMime
+    });
+    return optimized.size < file.size ? optimized : file;
+  } finally {
+    URL.revokeObjectURL(objectURL);
+  }
+}
 function InlineText({
   as = "p",
   className,
@@ -1223,11 +1284,16 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     setUploadError("");
     setUploadMessage("");
     try {
+      const optimizedFile = await optimizeImageForUpload(file);
+      if (optimizedFile.size > MAX_DIRECT_UPLOAD_BYTES) {
+        throw new Error("Image is too large. Use an image under 4MB or lower-resolution export.");
+      }
       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);
+      formData.set("alt", resolvedAlt);
+      formData.set("file", optimizedFile);
       const response = await fetch("/api/media", {
         body: formData,
         credentials: "include",
@@ -1320,7 +1386,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
   });
   const renderWithSectionShell = (block, className, content) => {
     const shell = sectionStyleFromBlock(block, pageDefaults);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: `${className} ${shell.sectionClass}`, style: shell.sectionStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: shell.contentClass, style: shell.contentStyle, children: content }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: `${className} ${shell.sectionClass}`, style: shell.sectionStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: shell.contentClass, style: shell.contentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: shell.sectionInnerStyle, children: content }) }) });
   };
   const sidebarSectionStyle = {
     border: "1px solid rgba(13, 74, 55, 0.15)",
@@ -1376,8 +1442,12 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     }),
     [layout, pageDefaults]
   );
+  const snapshotKey = (snapshot) => JSON.stringify({
+    layout: toPersistedLayout(snapshot.layout),
+    pageDefaults: snapshot.pageDefaults
+  });
   const isDirty = (0, import_react.useMemo)(
-    () => JSON.stringify(currentSnapshot) !== JSON.stringify(lastSavedRef.current),
+    () => snapshotKey(currentSnapshot) !== snapshotKey(lastSavedRef.current),
     [currentSnapshot]
   );
   const canUndo = pastSnapshots.length > 0;
@@ -2852,21 +2922,10 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
-                          "Section Width",
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                            "select",
-                            {
-                              onChange: (event) => setSelectedStyleField("sectionWidth", event.target.value),
-                              style: sidebarInputStyle,
-                              value: normalizeText(selectedSectionStyle.sectionWidth, "content"),
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "content", children: "Content" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "wide", children: "Wide" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "full", children: "Full" })
-                              ]
-                            }
-                          )
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: [
+                          "Section width follows ",
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Page Defaults" }),
+                          " for a consistent page layout."
                         ] }),
                         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
                           "Content Width",

package/dist/studio-pages/client.mjs

@@ -535,6 +535,11 @@ var gradientPresetPairs = {
   sand: ["#f3ead8", "#f8f5ed"],
   slate: ["#1a2f2a", "#34524a"]
 };
+var sectionPaddingMap = {
+  sm: "1.4rem",
+  md: "2.6rem",
+  lg: "3.4rem"
+};
 var quickAddBlockTypes = [
   "hero",
   "featureGrid",
@@ -683,10 +688,9 @@ function parseAngle(value, fallback = "135") {
   return String(Math.max(0, Math.min(360, parsed)));
 }
 var sectionStyleFromBlock = (block, pageDefaults) => {
-  const sectionWidthRaw = normalizeText(block.sectionWidth, defaultSectionStyle.sectionWidth);
   const contentWidthRaw = normalizeText(block.contentWidth, defaultSectionStyle.contentWidth);
-  const sectionPaddingY = normalizeText(block.sectionPaddingY, defaultSectionStyle.sectionPaddingY);
-  const sectionWidth = sectionWidthRaw === "full" || sectionWidthRaw === "wide" || sectionWidthRaw === "content" ? sectionWidthRaw : pageDefaults.pageWidthDefault;
+  const sectionPaddingRaw = normalizeText(block.sectionPaddingY, defaultSectionStyle.sectionPaddingY);
+  const sectionPaddingY = sectionPaddingRaw === "sm" || sectionPaddingRaw === "lg" ? sectionPaddingRaw : "md";
   const contentWidth = contentWidthRaw === "narrow" || contentWidthRaw === "content" || contentWidthRaw === "wide" || contentWidthRaw === "full" || contentWidthRaw === "inherit" ? contentWidthRaw : "inherit";
   const resolvedContentWidth = contentWidth === "inherit" ? pageDefaults.pageWidthDefault : contentWidth;
   const sectionMode = normalizeText(block.sectionBackgroundMode, defaultSectionStyle.sectionBackgroundMode);
@@ -707,8 +711,20 @@ var sectionStyleFromBlock = (block, pageDefaults) => {
   const contentGradient = `linear-gradient(${contentAngle}deg, ${contentPresetPair?.[0] || contentFrom} 0%, ${contentPresetPair?.[1] || contentTo} 100%)`;
   return {
     contentClass: `orion-builder-content is-${resolvedContentWidth}`,
-    contentStyle: contentMode === "color" ? { background: contentColor } : contentMode === "gradient" ? { background: contentGradient } : {},
-    sectionClass: `orion-builder-shell is-${sectionWidth} pad-${sectionPaddingY}`,
+    contentStyle: contentMode === "color" ? {
+      background: contentColor,
+      borderRadius: 20,
+      boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)"
+    } : contentMode === "gradient" ? {
+      background: contentGradient,
+      borderRadius: 20,
+      boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)"
+    } : {},
+    sectionClass: `orion-builder-shell is-${pageDefaults.pageWidthDefault}`,
+    sectionInnerStyle: {
+      paddingBottom: sectionPaddingMap[sectionPaddingY],
+      paddingTop: sectionPaddingMap[sectionPaddingY]
+    },
     sectionStyle: sectionMode === "color" ? { background: sectionColor } : sectionMode === "gradient" ? { background: sectionGradient } : {}
   };
 };
@@ -756,6 +772,51 @@ function getUploadedMediaURL(value) {
   }
   return "";
 }
+var MAX_DIRECT_UPLOAD_BYTES = 4e6;
+async function optimizeImageForUpload(file) {
+  if (!file.type.startsWith("image/")) {
+    return file;
+  }
+  if (file.size <= MAX_DIRECT_UPLOAD_BYTES) {
+    return file;
+  }
+  const objectURL = URL.createObjectURL(file);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const nextImage = new Image();
+      nextImage.onload = () => resolve(nextImage);
+      nextImage.onerror = () => reject(new Error("Could not read image for upload optimization."));
+      nextImage.src = objectURL;
+    });
+    const maxDimension = 2200;
+    const scale = Math.min(1, maxDimension / Math.max(image.width, image.height));
+    const targetWidth = Math.max(1, Math.round(image.width * scale));
+    const targetHeight = Math.max(1, Math.round(image.height * scale));
+    const canvas = document.createElement("canvas");
+    canvas.width = targetWidth;
+    canvas.height = targetHeight;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return file;
+    }
+    context.drawImage(image, 0, 0, targetWidth, targetHeight);
+    const outputMime = file.type === "image/webp" ? "image/webp" : "image/jpeg";
+    const blob = await new Promise((resolve) => {
+      canvas.toBlob((value) => resolve(value), outputMime, 0.82);
+    });
+    if (!blob) {
+      return file;
+    }
+    const optimizedName = file.name.replace(/\.[^/.]+$/, outputMime === "image/webp" ? ".webp" : ".jpg");
+    const optimized = new File([blob], optimizedName, {
+      lastModified: Date.now(),
+      type: outputMime
+    });
+    return optimized.size < file.size ? optimized : file;
+  } finally {
+    URL.revokeObjectURL(objectURL);
+  }
+}
 function InlineText({
   as = "p",
   className,
@@ -1195,11 +1256,16 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     setUploadError("");
     setUploadMessage("");
     try {
+      const optimizedFile = await optimizeImageForUpload(file);
+      if (optimizedFile.size > MAX_DIRECT_UPLOAD_BYTES) {
+        throw new Error("Image is too large. Use an image under 4MB or lower-resolution export.");
+      }
       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);
+      formData.set("alt", resolvedAlt);
+      formData.set("file", optimizedFile);
       const response = await fetch("/api/media", {
         body: formData,
         credentials: "include",
@@ -1292,7 +1358,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
   });
   const renderWithSectionShell = (block, className, content) => {
     const shell = sectionStyleFromBlock(block, pageDefaults);
-    return /* @__PURE__ */ jsx("section", { className: `${className} ${shell.sectionClass}`, style: shell.sectionStyle, children: /* @__PURE__ */ jsx("div", { className: shell.contentClass, style: shell.contentStyle, children: content }) });
+    return /* @__PURE__ */ jsx("section", { className: `${className} ${shell.sectionClass}`, style: shell.sectionStyle, children: /* @__PURE__ */ jsx("div", { className: shell.contentClass, style: shell.contentStyle, children: /* @__PURE__ */ jsx("div", { style: shell.sectionInnerStyle, children: content }) }) });
   };
   const sidebarSectionStyle = {
     border: "1px solid rgba(13, 74, 55, 0.15)",
@@ -1348,8 +1414,12 @@ function BuilderPageEditor({ initialDoc, pageID }) {
     }),
     [layout, pageDefaults]
   );
+  const snapshotKey = (snapshot) => JSON.stringify({
+    layout: toPersistedLayout(snapshot.layout),
+    pageDefaults: snapshot.pageDefaults
+  });
   const isDirty = useMemo(
-    () => JSON.stringify(currentSnapshot) !== JSON.stringify(lastSavedRef.current),
+    () => snapshotKey(currentSnapshot) !== snapshotKey(lastSavedRef.current),
     [currentSnapshot]
   );
   const canUndo = pastSnapshots.length > 0;
@@ -2824,21 +2894,10 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
-                          "Section Width",
-                          /* @__PURE__ */ jsxs(
-                            "select",
-                            {
-                              onChange: (event) => setSelectedStyleField("sectionWidth", event.target.value),
-                              style: sidebarInputStyle,
-                              value: normalizeText(selectedSectionStyle.sectionWidth, "content"),
-                              children: [
-                                /* @__PURE__ */ jsx("option", { value: "content", children: "Content" }),
-                                /* @__PURE__ */ jsx("option", { value: "wide", children: "Wide" }),
-                                /* @__PURE__ */ jsx("option", { value: "full", children: "Full" })
-                              ]
-                            }
-                          )
+                        /* @__PURE__ */ jsxs("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: [
+                          "Section width follows ",
+                          /* @__PURE__ */ jsx("strong", { children: "Page Defaults" }),
+                          " for a consistent page layout."
                         ] }),
                         /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
                           "Content Width",

package/package.json

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