@orion-studios/payload-studio 0.5.0-beta.10 → 0.5.0-beta.11

package/dist/blocks/index.js

@@ -553,6 +553,33 @@ var HeroBlock = {
       type: "upload",
       relationTo: "media"
     },
+    {
+      name: "backgroundImageFit",
+      type: "select",
+      defaultValue: "cover",
+      options: [
+        { label: "Cover", value: "cover" },
+        { label: "Contain", value: "contain" }
+      ],
+      admin: {
+        description: "How the hero image should be sized within the section."
+      }
+    },
+    {
+      name: "backgroundImagePosition",
+      type: "select",
+      defaultValue: "center",
+      options: [
+        { label: "Center", value: "center" },
+        { label: "Top", value: "top" },
+        { label: "Bottom", value: "bottom" },
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" }
+      ],
+      admin: {
+        description: "Where the hero image should anchor inside the section."
+      }
+    },
     {
       name: "backgroundColor",
       type: "text",

package/dist/blocks/index.mjs

@@ -17,7 +17,7 @@ import {
   defaultPageLayoutBlocks,
   sectionPresets,
   templateStarterPresets
-} from "../chunk-HRO4MFA3.mjs";
+} from "../chunk-U5BSPWAD.mjs";
 import "../chunk-ETRRXURT.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {

package/dist/{chunk-TVDMZNKU.mjs → chunk-NESLJZFE.mjs}

@@ -71,6 +71,8 @@ var defaultNodeData = {
   hero: {
     ...withSectionStyleDefaults({}),
     backgroundColor: "",
+    backgroundImageFit: "cover",
+    backgroundImagePosition: "center",
     headline: "New Hero Section",
     kicker: "Optional kicker",
     primaryHref: "/contact",

package/dist/{chunk-HRO4MFA3.mjs → chunk-U5BSPWAD.mjs}

@@ -403,6 +403,33 @@ var HeroBlock = {
       type: "upload",
       relationTo: "media"
     },
+    {
+      name: "backgroundImageFit",
+      type: "select",
+      defaultValue: "cover",
+      options: [
+        { label: "Cover", value: "cover" },
+        { label: "Contain", value: "contain" }
+      ],
+      admin: {
+        description: "How the hero image should be sized within the section."
+      }
+    },
+    {
+      name: "backgroundImagePosition",
+      type: "select",
+      defaultValue: "center",
+      options: [
+        { label: "Center", value: "center" },
+        { label: "Top", value: "top" },
+        { label: "Bottom", value: "bottom" },
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" }
+      ],
+      admin: {
+        description: "Where the hero image should anchor inside the section."
+      }
+    },
     {
       name: "backgroundColor",
       type: "text",

package/dist/index.js

@@ -897,6 +897,33 @@ var HeroBlock = {
       type: "upload",
       relationTo: "media"
     },
+    {
+      name: "backgroundImageFit",
+      type: "select",
+      defaultValue: "cover",
+      options: [
+        { label: "Cover", value: "cover" },
+        { label: "Contain", value: "contain" }
+      ],
+      admin: {
+        description: "How the hero image should be sized within the section."
+      }
+    },
+    {
+      name: "backgroundImagePosition",
+      type: "select",
+      defaultValue: "center",
+      options: [
+        { label: "Center", value: "center" },
+        { label: "Top", value: "top" },
+        { label: "Bottom", value: "bottom" },
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" }
+      ],
+      admin: {
+        description: "Where the hero image should anchor inside the section."
+      }
+    },
     {
       name: "backgroundColor",
       type: "text",
@@ -1904,6 +1931,8 @@ var defaultNodeData = {
   hero: {
     ...withSectionStyleDefaults({}),
     backgroundColor: "",
+    backgroundImageFit: "cover",
+    backgroundImagePosition: "center",
     headline: "New Hero Section",
     kicker: "Optional kicker",
     primaryHref: "/contact",

package/dist/index.mjs

@@ -1,21 +1,21 @@
+import {
+  admin_app_exports
+} from "./chunk-AAOHJDNS.mjs";
 import {
   admin_exports
 } from "./chunk-J7W5EE3B.mjs";
 import {
-  admin_app_exports
-} from "./chunk-AAOHJDNS.mjs";
+  studio_exports
+} from "./chunk-N67KVM2S.mjs";
 import {
   blocks_exports
-} from "./chunk-HRO4MFA3.mjs";
+} from "./chunk-U5BSPWAD.mjs";
 import {
   nextjs_exports
 } from "./chunk-ZLLNO5FM.mjs";
-import {
-  studio_exports
-} from "./chunk-N67KVM2S.mjs";
 import {
   studio_pages_exports
-} from "./chunk-TVDMZNKU.mjs";
+} from "./chunk-NESLJZFE.mjs";
 import "./chunk-ETRRXURT.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {

package/dist/studio-pages/client.js

@@ -108,6 +108,8 @@ var defaultNodeData = {
   hero: {
     ...withSectionStyleDefaults({}),
     backgroundColor: "",
+    backgroundImageFit: "cover",
+    backgroundImagePosition: "center",
     headline: "New Hero Section",
     kicker: "Optional kicker",
     primaryHref: "/contact",
@@ -453,6 +455,13 @@ var resolveMedia = (value) => {
   }
   return null;
 };
+var normalizeHeroImageFit = (value) => value === "contain" ? "contain" : "cover";
+var normalizeHeroImagePosition = (value) => {
+  if (value === "top" || value === "bottom" || value === "left" || value === "right") {
+    return value;
+  }
+  return "center";
+};
 function cloneBlockLayout(layout) {
   return JSON.parse(JSON.stringify(layout));
 }
@@ -591,6 +600,8 @@ function getDefaultBlock(blockType) {
     case "hero":
       return withSectionStyleDefaults2({
         backgroundColor: "",
+        backgroundImageFit: "cover",
+        backgroundImagePosition: "center",
         blockType: "hero",
         headline: "New Hero Section",
         kicker: "Optional kicker",
@@ -1825,6 +1836,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
               const media = resolveMedia(block.media);
               const variant = normalizeText(block.variant, "default");
               const backgroundColor = normalizeText(block.backgroundColor).trim();
+              const backgroundImageFit = normalizeHeroImageFit(block.backgroundImageFit);
+              const backgroundImagePosition = normalizeHeroImagePosition(block.backgroundImagePosition);
               const sectionBackgroundMode = normalizeText(
                 block.sectionBackgroundMode,
                 defaultSectionStyle.sectionBackgroundMode
@@ -1835,9 +1848,9 @@ function BuilderPageEditor({ initialDoc, pageID }) {
               const mediaStyle = backgroundImage && variant === "default" ? {
                 ...hasCustomHeroColor ? { backgroundColor } : {},
                 backgroundImage: `linear-gradient(145deg, rgba(13, 74, 55, 0.34), rgba(13, 74, 55, 0.74)), url('${backgroundImage}')`,
-                backgroundPosition: "center, center",
+                backgroundPosition: `center, ${backgroundImagePosition}`,
                 backgroundRepeat: "no-repeat, no-repeat",
-                backgroundSize: "100% 100%, cover"
+                backgroundSize: `100% 100%, ${backgroundImageFit}`
               } : hasCustomHeroColor && sectionBackgroundMode !== "none" ? {
                 backgroundColor
               } : {};
@@ -3298,6 +3311,39 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                                   type: "file"
                                 }
                               )
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
+                              "Image Fit",
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                "select",
+                                {
+                                  onChange: (event) => updateSelectedField("backgroundImageFit", event.target.value),
+                                  style: sidebarInputStyle,
+                                  value: normalizeHeroImageFit(selectedBlock.backgroundImageFit),
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "cover", children: "Cover" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "contain", children: "Contain" })
+                                  ]
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
+                              "Image Position",
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                "select",
+                                {
+                                  onChange: (event) => updateSelectedField("backgroundImagePosition", event.target.value),
+                                  style: sidebarInputStyle,
+                                  value: normalizeHeroImagePosition(selectedBlock.backgroundImagePosition),
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "center", children: "Center" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "top", children: "Top" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "bottom", children: "Bottom" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "left", children: "Left" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "right", children: "Right" })
+                                  ]
+                                }
+                              )
                             ] })
                           ] }),
                           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [

package/dist/studio-pages/client.mjs

@@ -80,6 +80,8 @@ var defaultNodeData = {
   hero: {
     ...withSectionStyleDefaults({}),
     backgroundColor: "",
+    backgroundImageFit: "cover",
+    backgroundImagePosition: "center",
     headline: "New Hero Section",
     kicker: "Optional kicker",
     primaryHref: "/contact",
@@ -425,6 +427,13 @@ var resolveMedia = (value) => {
   }
   return null;
 };
+var normalizeHeroImageFit = (value) => value === "contain" ? "contain" : "cover";
+var normalizeHeroImagePosition = (value) => {
+  if (value === "top" || value === "bottom" || value === "left" || value === "right") {
+    return value;
+  }
+  return "center";
+};
 function cloneBlockLayout(layout) {
   return JSON.parse(JSON.stringify(layout));
 }
@@ -563,6 +572,8 @@ function getDefaultBlock(blockType) {
     case "hero":
       return withSectionStyleDefaults2({
         backgroundColor: "",
+        backgroundImageFit: "cover",
+        backgroundImagePosition: "center",
         blockType: "hero",
         headline: "New Hero Section",
         kicker: "Optional kicker",
@@ -1797,6 +1808,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
               const media = resolveMedia(block.media);
               const variant = normalizeText(block.variant, "default");
               const backgroundColor = normalizeText(block.backgroundColor).trim();
+              const backgroundImageFit = normalizeHeroImageFit(block.backgroundImageFit);
+              const backgroundImagePosition = normalizeHeroImagePosition(block.backgroundImagePosition);
               const sectionBackgroundMode = normalizeText(
                 block.sectionBackgroundMode,
                 defaultSectionStyle.sectionBackgroundMode
@@ -1807,9 +1820,9 @@ function BuilderPageEditor({ initialDoc, pageID }) {
               const mediaStyle = backgroundImage && variant === "default" ? {
                 ...hasCustomHeroColor ? { backgroundColor } : {},
                 backgroundImage: `linear-gradient(145deg, rgba(13, 74, 55, 0.34), rgba(13, 74, 55, 0.74)), url('${backgroundImage}')`,
-                backgroundPosition: "center, center",
+                backgroundPosition: `center, ${backgroundImagePosition}`,
                 backgroundRepeat: "no-repeat, no-repeat",
-                backgroundSize: "100% 100%, cover"
+                backgroundSize: `100% 100%, ${backgroundImageFit}`
               } : hasCustomHeroColor && sectionBackgroundMode !== "none" ? {
                 backgroundColor
               } : {};
@@ -3270,6 +3283,39 @@ function BuilderPageEditor({ initialDoc, pageID }) {
                                   type: "file"
                                 }
                               )
+                            ] }),
+                            /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                              "Image Fit",
+                              /* @__PURE__ */ jsxs(
+                                "select",
+                                {
+                                  onChange: (event) => updateSelectedField("backgroundImageFit", event.target.value),
+                                  style: sidebarInputStyle,
+                                  value: normalizeHeroImageFit(selectedBlock.backgroundImageFit),
+                                  children: [
+                                    /* @__PURE__ */ jsx("option", { value: "cover", children: "Cover" }),
+                                    /* @__PURE__ */ jsx("option", { value: "contain", children: "Contain" })
+                                  ]
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
+                              "Image Position",
+                              /* @__PURE__ */ jsxs(
+                                "select",
+                                {
+                                  onChange: (event) => updateSelectedField("backgroundImagePosition", event.target.value),
+                                  style: sidebarInputStyle,
+                                  value: normalizeHeroImagePosition(selectedBlock.backgroundImagePosition),
+                                  children: [
+                                    /* @__PURE__ */ jsx("option", { value: "center", children: "Center" }),
+                                    /* @__PURE__ */ jsx("option", { value: "top", children: "Top" }),
+                                    /* @__PURE__ */ jsx("option", { value: "bottom", children: "Bottom" }),
+                                    /* @__PURE__ */ jsx("option", { value: "left", children: "Left" }),
+                                    /* @__PURE__ */ jsx("option", { value: "right", children: "Right" })
+                                  ]
+                                }
+                              )
                             ] })
                           ] }),
                           /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [

package/dist/studio-pages/index.js

@@ -105,6 +105,8 @@ var defaultNodeData = {
   hero: {
     ...withSectionStyleDefaults({}),
     backgroundColor: "",
+    backgroundImageFit: "cover",
+    backgroundImagePosition: "center",
     headline: "New Hero Section",
     kicker: "Optional kicker",
     primaryHref: "/contact",

package/dist/studio-pages/index.mjs

@@ -6,7 +6,7 @@ import {
   pagePaletteGroups,
   pageStudioModuleManifest,
   studioDocumentToLayout
-} from "../chunk-TVDMZNKU.mjs";
+} from "../chunk-NESLJZFE.mjs";
 import "../chunk-ETRRXURT.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {

package/package.json

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