@orion-studios/payload-studio 0.5.0-beta.21 → 0.5.0-beta.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -56,6 +56,7 @@ var sectionStyleDefaults = {
56
56
  contentGradientPreset: "none",
57
57
  contentGradientTo: "#f4f6f2",
58
58
  contentWidth: "inherit",
59
+ sectionPaddingX: "inherit",
59
60
  sectionBackgroundColor: "#ffffff",
60
61
  sectionBackgroundMode: "none",
61
62
  sectionGradientAngle: "135",
@@ -93,6 +94,19 @@ var sectionStyleFields = () => [
93
94
  type: "select",
94
95
  defaultValue: sectionStyleDefaults.sectionPaddingY,
95
96
  options: [
97
+ { label: "None", value: "none" },
98
+ { label: "Small", value: "sm" },
99
+ { label: "Medium", value: "md" },
100
+ { label: "Large", value: "lg" }
101
+ ]
102
+ },
103
+ {
104
+ name: "sectionPaddingX",
105
+ type: "select",
106
+ defaultValue: sectionStyleDefaults.sectionPaddingX,
107
+ options: [
108
+ { label: "Inherit", value: "inherit" },
109
+ { label: "None", value: "none" },
96
110
  { label: "Small", value: "sm" },
97
111
  { label: "Medium", value: "md" },
98
112
  { label: "Large", value: "lg" }
@@ -676,6 +690,28 @@ var HeroBlock = {
676
690
  }
677
691
  ]
678
692
  },
693
+ {
694
+ name: "heroHeight",
695
+ type: "select",
696
+ defaultValue: "sm",
697
+ options: [
698
+ {
699
+ label: "Small",
700
+ value: "sm"
701
+ },
702
+ {
703
+ label: "Medium (Half Screen)",
704
+ value: "md"
705
+ },
706
+ {
707
+ label: "Full Screen",
708
+ value: "full"
709
+ }
710
+ ],
711
+ admin: {
712
+ description: "Controls the vertical height of the hero section."
713
+ }
714
+ },
679
715
  ...sectionStyleFields()
680
716
  ]
681
717
  };
@@ -17,8 +17,8 @@ import {
17
17
  defaultPageLayoutBlocks,
18
18
  sectionPresets,
19
19
  templateStarterPresets
20
- } from "../chunk-IBZVI3JP.mjs";
21
- import "../chunk-ETRRXURT.mjs";
20
+ } from "../chunk-H7DSTEVT.mjs";
21
+ import "../chunk-SIL2J5MF.mjs";
22
22
  import "../chunk-6BWS3CLP.mjs";
23
23
  export {
24
24
  BeforeAfterBlock,
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-N67KVM2S.mjs";
4
4
  import {
5
5
  studioDocumentToLayout
6
- } from "./chunk-D4S5OA4U.mjs";
6
+ } from "./chunk-QW24Y4UH.mjs";
7
7
  import {
8
8
  __export
9
9
  } from "./chunk-6BWS3CLP.mjs";
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  sectionStyleFields
3
- } from "./chunk-ETRRXURT.mjs";
3
+ } from "./chunk-SIL2J5MF.mjs";
4
4
  import {
5
5
  __export
6
6
  } from "./chunk-6BWS3CLP.mjs";
@@ -526,6 +526,28 @@ var HeroBlock = {
526
526
  }
527
527
  ]
528
528
  },
529
+ {
530
+ name: "heroHeight",
531
+ type: "select",
532
+ defaultValue: "sm",
533
+ options: [
534
+ {
535
+ label: "Small",
536
+ value: "sm"
537
+ },
538
+ {
539
+ label: "Medium (Half Screen)",
540
+ value: "md"
541
+ },
542
+ {
543
+ label: "Full Screen",
544
+ value: "full"
545
+ }
546
+ ],
547
+ admin: {
548
+ description: "Controls the vertical height of the hero section."
549
+ }
550
+ },
529
551
  ...sectionStyleFields()
530
552
  ]
531
553
  };
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  sectionStyleDefaults
3
- } from "./chunk-ETRRXURT.mjs";
3
+ } from "./chunk-SIL2J5MF.mjs";
4
4
  import {
5
5
  __export
6
6
  } from "./chunk-6BWS3CLP.mjs";
@@ -77,6 +77,7 @@ var defaultNodeData = {
77
77
  backgroundImageCornerStyle: "rounded",
78
78
  backgroundImageFit: "cover",
79
79
  backgroundImagePosition: "center",
80
+ heroHeight: "sm",
80
81
  headline: "New Hero Section",
81
82
  kicker: "Optional kicker",
82
83
  primaryHref: "/contact",
@@ -7,6 +7,7 @@ var sectionStyleDefaults = {
7
7
  contentGradientPreset: "none",
8
8
  contentGradientTo: "#f4f6f2",
9
9
  contentWidth: "inherit",
10
+ sectionPaddingX: "inherit",
10
11
  sectionBackgroundColor: "#ffffff",
11
12
  sectionBackgroundMode: "none",
12
13
  sectionGradientAngle: "135",
@@ -44,6 +45,19 @@ var sectionStyleFields = () => [
44
45
  type: "select",
45
46
  defaultValue: sectionStyleDefaults.sectionPaddingY,
46
47
  options: [
48
+ { label: "None", value: "none" },
49
+ { label: "Small", value: "sm" },
50
+ { label: "Medium", value: "md" },
51
+ { label: "Large", value: "lg" }
52
+ ]
53
+ },
54
+ {
55
+ name: "sectionPaddingX",
56
+ type: "select",
57
+ defaultValue: sectionStyleDefaults.sectionPaddingX,
58
+ options: [
59
+ { label: "Inherit", value: "inherit" },
60
+ { label: "None", value: "none" },
47
61
  { label: "Small", value: "sm" },
48
62
  { label: "Medium", value: "md" },
49
63
  { label: "Large", value: "lg" }
package/dist/index.js CHANGED
@@ -400,6 +400,7 @@ var sectionStyleDefaults = {
400
400
  contentGradientPreset: "none",
401
401
  contentGradientTo: "#f4f6f2",
402
402
  contentWidth: "inherit",
403
+ sectionPaddingX: "inherit",
403
404
  sectionBackgroundColor: "#ffffff",
404
405
  sectionBackgroundMode: "none",
405
406
  sectionGradientAngle: "135",
@@ -437,6 +438,19 @@ var sectionStyleFields = () => [
437
438
  type: "select",
438
439
  defaultValue: sectionStyleDefaults.sectionPaddingY,
439
440
  options: [
441
+ { label: "None", value: "none" },
442
+ { label: "Small", value: "sm" },
443
+ { label: "Medium", value: "md" },
444
+ { label: "Large", value: "lg" }
445
+ ]
446
+ },
447
+ {
448
+ name: "sectionPaddingX",
449
+ type: "select",
450
+ defaultValue: sectionStyleDefaults.sectionPaddingX,
451
+ options: [
452
+ { label: "Inherit", value: "inherit" },
453
+ { label: "None", value: "none" },
440
454
  { label: "Small", value: "sm" },
441
455
  { label: "Medium", value: "md" },
442
456
  { label: "Large", value: "lg" }
@@ -1020,6 +1034,28 @@ var HeroBlock = {
1020
1034
  }
1021
1035
  ]
1022
1036
  },
1037
+ {
1038
+ name: "heroHeight",
1039
+ type: "select",
1040
+ defaultValue: "sm",
1041
+ options: [
1042
+ {
1043
+ label: "Small",
1044
+ value: "sm"
1045
+ },
1046
+ {
1047
+ label: "Medium (Half Screen)",
1048
+ value: "md"
1049
+ },
1050
+ {
1051
+ label: "Full Screen",
1052
+ value: "full"
1053
+ }
1054
+ ],
1055
+ admin: {
1056
+ description: "Controls the vertical height of the hero section."
1057
+ }
1058
+ },
1023
1059
  ...sectionStyleFields()
1024
1060
  ]
1025
1061
  };
@@ -1880,6 +1916,7 @@ var defaultNodeData = {
1880
1916
  backgroundImageCornerStyle: "rounded",
1881
1917
  backgroundImageFit: "cover",
1882
1918
  backgroundImagePosition: "center",
1919
+ heroHeight: "sm",
1883
1920
  headline: "New Hero Section",
1884
1921
  kicker: "Optional kicker",
1885
1922
  primaryHref: "/contact",
package/dist/index.mjs CHANGED
@@ -3,20 +3,20 @@ import {
3
3
  } from "./chunk-J7W5EE3B.mjs";
4
4
  import {
5
5
  nextjs_exports
6
- } from "./chunk-5HCUEMBF.mjs";
6
+ } from "./chunk-GPQPDEB5.mjs";
7
+ import {
8
+ blocks_exports
9
+ } from "./chunk-H7DSTEVT.mjs";
7
10
  import {
8
11
  studio_exports
9
12
  } from "./chunk-N67KVM2S.mjs";
10
13
  import {
11
- blocks_exports
12
- } from "./chunk-IBZVI3JP.mjs";
14
+ studio_pages_exports
15
+ } from "./chunk-QW24Y4UH.mjs";
16
+ import "./chunk-SIL2J5MF.mjs";
13
17
  import {
14
18
  admin_app_exports
15
19
  } from "./chunk-AAOHJDNS.mjs";
16
- import {
17
- studio_pages_exports
18
- } from "./chunk-D4S5OA4U.mjs";
19
- import "./chunk-ETRRXURT.mjs";
20
20
  import "./chunk-6BWS3CLP.mjs";
21
21
  export {
22
22
  admin_exports as admin,
@@ -93,6 +93,7 @@ var sectionStyleDefaults = {
93
93
  contentGradientPreset: "none",
94
94
  contentGradientTo: "#f4f6f2",
95
95
  contentWidth: "inherit",
96
+ sectionPaddingX: "inherit",
96
97
  sectionBackgroundColor: "#ffffff",
97
98
  sectionBackgroundMode: "none",
98
99
  sectionGradientAngle: "135",
@@ -165,6 +166,7 @@ var defaultNodeData = {
165
166
  backgroundImageCornerStyle: "rounded",
166
167
  backgroundImageFit: "cover",
167
168
  backgroundImagePosition: "center",
169
+ heroHeight: "sm",
168
170
  headline: "New Hero Section",
169
171
  kicker: "Optional kicker",
170
172
  primaryHref: "/contact",
@@ -4,10 +4,10 @@ import {
4
4
  createPayloadClient,
5
5
  createSiteQueries,
6
6
  resolveMedia
7
- } from "../chunk-5HCUEMBF.mjs";
7
+ } from "../chunk-GPQPDEB5.mjs";
8
8
  import "../chunk-N67KVM2S.mjs";
9
- import "../chunk-D4S5OA4U.mjs";
10
- import "../chunk-ETRRXURT.mjs";
9
+ import "../chunk-QW24Y4UH.mjs";
10
+ import "../chunk-SIL2J5MF.mjs";
11
11
  import "../chunk-6BWS3CLP.mjs";
12
12
  export {
13
13
  WEBSITE_CONTENT_TAG,
@@ -38,6 +38,22 @@ h4 {
38
38
  padding-inline: var(--orion-shell-inline);
39
39
  }
40
40
 
41
+ .orion-builder-shell.padx-none {
42
+ --orion-shell-inline: 0px;
43
+ }
44
+
45
+ .orion-builder-shell.padx-sm {
46
+ --orion-shell-inline: 0.6rem;
47
+ }
48
+
49
+ .orion-builder-shell.padx-md {
50
+ --orion-shell-inline: 1.2rem;
51
+ }
52
+
53
+ .orion-builder-shell.padx-lg {
54
+ --orion-shell-inline: 2rem;
55
+ }
56
+
41
57
  .orion-builder-shell.pad-sm {
42
58
  --orion-shell-padding-y: 1.4rem;
43
59
  }
@@ -42,6 +42,7 @@ var sectionStyleDefaults = {
42
42
  contentGradientPreset: "none",
43
43
  contentGradientTo: "#f4f6f2",
44
44
  contentWidth: "inherit",
45
+ sectionPaddingX: "inherit",
45
46
  sectionBackgroundColor: "#ffffff",
46
47
  sectionBackgroundMode: "none",
47
48
  sectionGradientAngle: "135",
@@ -114,6 +115,7 @@ var defaultNodeData = {
114
115
  backgroundImageCornerStyle: "rounded",
115
116
  backgroundImageFit: "cover",
116
117
  backgroundImagePosition: "center",
118
+ heroHeight: "sm",
117
119
  headline: "New Hero Section",
118
120
  kicker: "Optional kicker",
119
121
  primaryHref: "/contact",
@@ -484,6 +486,17 @@ var normalizeHeroImagePosition = (value) => {
484
486
  }
485
487
  return "center";
486
488
  };
489
+ var normalizeHeroHeight = (value) => {
490
+ if (value === "md" || value === "full") {
491
+ return value;
492
+ }
493
+ return "sm";
494
+ };
495
+ var heroHeightMap = {
496
+ sm: "360px",
497
+ md: "50svh",
498
+ full: "100svh"
499
+ };
487
500
  var normalizeImageFit = (value) => normalizeHeroImageFit(value);
488
501
  var normalizeImageCornerStyle = (value, legacyFitValue) => normalizeHeroImageCornerStyle(value, legacyFitValue);
489
502
  var normalizeImagePosition = (value) => normalizeHeroImagePosition(value);
@@ -596,6 +609,7 @@ var defaultSectionStyle = {
596
609
  contentGradientPreset: "none",
597
610
  contentGradientTo: "#f4f6f2",
598
611
  contentWidth: "inherit",
612
+ sectionPaddingX: "inherit",
599
613
  sectionBackgroundColor: "#ffffff",
600
614
  sectionBackgroundMode: "none",
601
615
  sectionGradientAngle: "135",
@@ -617,6 +631,7 @@ var gradientPresetPairs = {
617
631
  slate: ["#1a2f2a", "#34524a"]
618
632
  };
619
633
  var sectionPaddingMap = {
634
+ none: "0px",
620
635
  sm: "1.4rem",
621
636
  md: "2.6rem",
622
637
  lg: "3.4rem"
@@ -648,6 +663,7 @@ function getDefaultBlock(blockType) {
648
663
  backgroundImageFit: "cover",
649
664
  backgroundImagePosition: "center",
650
665
  blockType: "hero",
666
+ heroHeight: "sm",
651
667
  headline: "New Hero Section",
652
668
  kicker: "Optional kicker",
653
669
  primaryHref: "/contact",
@@ -781,7 +797,9 @@ function parseAngle(value, fallback = "135") {
781
797
  var sectionStyleFromBlock = (block, pageDefaults) => {
782
798
  const contentWidthRaw = normalizeText(block.contentWidth, defaultSectionStyle.contentWidth);
783
799
  const sectionPaddingRaw = normalizeText(block.sectionPaddingY, defaultSectionStyle.sectionPaddingY);
784
- const sectionPaddingY = sectionPaddingRaw === "sm" || sectionPaddingRaw === "lg" ? sectionPaddingRaw : "md";
800
+ const sectionPaddingXRaw = normalizeText(block.sectionPaddingX, defaultSectionStyle.sectionPaddingX);
801
+ const sectionPaddingY = sectionPaddingRaw === "none" || sectionPaddingRaw === "sm" || sectionPaddingRaw === "lg" ? sectionPaddingRaw : "md";
802
+ const sectionPaddingX = sectionPaddingXRaw === "none" || sectionPaddingXRaw === "sm" || sectionPaddingXRaw === "md" || sectionPaddingXRaw === "lg" ? sectionPaddingXRaw : pageDefaults.pageWidthDefault === "full" ? "none" : "md";
785
803
  const contentWidth = contentWidthRaw === "narrow" || contentWidthRaw === "content" || contentWidthRaw === "wide" || contentWidthRaw === "full" || contentWidthRaw === "inherit" ? contentWidthRaw : "inherit";
786
804
  const resolvedContentWidth = contentWidth === "inherit" ? pageDefaults.pageWidthDefault : contentWidth;
787
805
  const sectionMode = normalizeText(block.sectionBackgroundMode, defaultSectionStyle.sectionBackgroundMode);
@@ -813,7 +831,7 @@ var sectionStyleFromBlock = (block, pageDefaults) => {
813
831
  boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)",
814
832
  padding: "1rem"
815
833
  } : {},
816
- sectionClass: `orion-builder-shell is-${pageDefaults.pageWidthDefault}`,
834
+ sectionClass: `orion-builder-shell is-${pageDefaults.pageWidthDefault} padx-${sectionPaddingX}`,
817
835
  sectionInnerStyle: {
818
836
  paddingBottom: sectionPaddingMap[sectionPaddingY],
819
837
  paddingTop: sectionPaddingMap[sectionPaddingY]
@@ -1996,6 +2014,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
1996
2014
  block.backgroundImageFit
1997
2015
  );
1998
2016
  const backgroundImagePosition = normalizeHeroImagePosition(block.backgroundImagePosition);
2017
+ const heroHeight = normalizeHeroHeight(block.heroHeight);
2018
+ const heroMinHeight = heroHeightMap[heroHeight];
1999
2019
  const heroCornerRadius = getHeroImageCornerRadius(backgroundImageCornerStyle);
2000
2020
  const sectionBackgroundMode = normalizeText(
2001
2021
  block.sectionBackgroundMode,
@@ -2006,13 +2026,15 @@ function BuilderPageEditor({ initialDoc, pageID }) {
2006
2026
  const hasCustomHeroColor = backgroundColor.length > 0 && backgroundColor.toLowerCase() !== "#124a37";
2007
2027
  const mediaStyle = backgroundImage && variant === "default" ? {
2008
2028
  ...hasCustomHeroColor ? { backgroundColor } : {},
2009
- backgroundImage: `linear-gradient(145deg, rgba(13, 74, 55, 0.34), rgba(13, 74, 55, 0.74)), url('${backgroundImage}')`,
2010
- backgroundPosition: `center, ${backgroundImagePosition}`,
2011
- backgroundRepeat: "no-repeat, no-repeat",
2012
- backgroundSize: `100% 100%, ${backgroundImageFit}`
2029
+ backgroundImage: `url('${backgroundImage}')`,
2030
+ backgroundPosition: backgroundImagePosition,
2031
+ backgroundRepeat: "no-repeat",
2032
+ backgroundSize: backgroundImageFit,
2033
+ minHeight: heroMinHeight
2013
2034
  } : hasCustomHeroColor && sectionBackgroundMode !== "none" ? {
2014
- backgroundColor
2015
- } : {};
2035
+ backgroundColor,
2036
+ minHeight: heroMinHeight
2037
+ } : { minHeight: heroMinHeight };
2016
2038
  const heroStyle = {
2017
2039
  borderRadius: heroCornerRadius
2018
2040
  };
@@ -3272,6 +3294,25 @@ function BuilderPageEditor({ initialDoc, pageID }) {
3272
3294
  style: sidebarInputStyle,
3273
3295
  value: normalizeText(selectedSectionStyle.sectionPaddingY, "md"),
3274
3296
  children: [
3297
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "none", children: "None" }),
3298
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "sm", children: "Small" }),
3299
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "md", children: "Medium" }),
3300
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "lg", children: "Large" })
3301
+ ]
3302
+ }
3303
+ )
3304
+ ] }),
3305
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
3306
+ "Section Horizontal Spacing",
3307
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
3308
+ "select",
3309
+ {
3310
+ onChange: (event) => setSelectedStyleField("sectionPaddingX", event.target.value),
3311
+ style: sidebarInputStyle,
3312
+ value: normalizeText(selectedSectionStyle.sectionPaddingX, "inherit"),
3313
+ children: [
3314
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "inherit", children: "Inherit (Edge-to-Edge on Full Width)" }),
3315
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "none", children: "None" }),
3275
3316
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "sm", children: "Small" }),
3276
3317
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "md", children: "Medium" }),
3277
3318
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "lg", children: "Large" })
@@ -3459,6 +3500,22 @@ function BuilderPageEditor({ initialDoc, pageID }) {
3459
3500
  }
3460
3501
  )
3461
3502
  ] }),
3503
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
3504
+ "Hero Height",
3505
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
3506
+ "select",
3507
+ {
3508
+ onChange: (event) => updateSelectedField("heroHeight", event.target.value),
3509
+ style: sidebarInputStyle,
3510
+ value: normalizeHeroHeight(selectedBlock.heroHeight),
3511
+ children: [
3512
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "sm", children: "Small" }),
3513
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "md", children: "Medium (Half Screen)" }),
3514
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "full", children: "Full Screen" })
3515
+ ]
3516
+ }
3517
+ )
3518
+ ] }),
3462
3519
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...sidebarSectionStyle, display: "grid", gap: 8 }, children: [
3463
3520
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 12, fontWeight: 600 }, children: "Hero Image" }),
3464
3521
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: selectedHeroMedia ? `${selectedHeroMedia.filename || `Media #${selectedHeroMedia.id}`}${selectedHeroMedia.alt ? ` (${selectedHeroMedia.alt})` : ""}` : "No image selected." }),
@@ -14,6 +14,7 @@ var sectionStyleDefaults = {
14
14
  contentGradientPreset: "none",
15
15
  contentGradientTo: "#f4f6f2",
16
16
  contentWidth: "inherit",
17
+ sectionPaddingX: "inherit",
17
18
  sectionBackgroundColor: "#ffffff",
18
19
  sectionBackgroundMode: "none",
19
20
  sectionGradientAngle: "135",
@@ -86,6 +87,7 @@ var defaultNodeData = {
86
87
  backgroundImageCornerStyle: "rounded",
87
88
  backgroundImageFit: "cover",
88
89
  backgroundImagePosition: "center",
90
+ heroHeight: "sm",
89
91
  headline: "New Hero Section",
90
92
  kicker: "Optional kicker",
91
93
  primaryHref: "/contact",
@@ -456,6 +458,17 @@ var normalizeHeroImagePosition = (value) => {
456
458
  }
457
459
  return "center";
458
460
  };
461
+ var normalizeHeroHeight = (value) => {
462
+ if (value === "md" || value === "full") {
463
+ return value;
464
+ }
465
+ return "sm";
466
+ };
467
+ var heroHeightMap = {
468
+ sm: "360px",
469
+ md: "50svh",
470
+ full: "100svh"
471
+ };
459
472
  var normalizeImageFit = (value) => normalizeHeroImageFit(value);
460
473
  var normalizeImageCornerStyle = (value, legacyFitValue) => normalizeHeroImageCornerStyle(value, legacyFitValue);
461
474
  var normalizeImagePosition = (value) => normalizeHeroImagePosition(value);
@@ -568,6 +581,7 @@ var defaultSectionStyle = {
568
581
  contentGradientPreset: "none",
569
582
  contentGradientTo: "#f4f6f2",
570
583
  contentWidth: "inherit",
584
+ sectionPaddingX: "inherit",
571
585
  sectionBackgroundColor: "#ffffff",
572
586
  sectionBackgroundMode: "none",
573
587
  sectionGradientAngle: "135",
@@ -589,6 +603,7 @@ var gradientPresetPairs = {
589
603
  slate: ["#1a2f2a", "#34524a"]
590
604
  };
591
605
  var sectionPaddingMap = {
606
+ none: "0px",
592
607
  sm: "1.4rem",
593
608
  md: "2.6rem",
594
609
  lg: "3.4rem"
@@ -620,6 +635,7 @@ function getDefaultBlock(blockType) {
620
635
  backgroundImageFit: "cover",
621
636
  backgroundImagePosition: "center",
622
637
  blockType: "hero",
638
+ heroHeight: "sm",
623
639
  headline: "New Hero Section",
624
640
  kicker: "Optional kicker",
625
641
  primaryHref: "/contact",
@@ -753,7 +769,9 @@ function parseAngle(value, fallback = "135") {
753
769
  var sectionStyleFromBlock = (block, pageDefaults) => {
754
770
  const contentWidthRaw = normalizeText(block.contentWidth, defaultSectionStyle.contentWidth);
755
771
  const sectionPaddingRaw = normalizeText(block.sectionPaddingY, defaultSectionStyle.sectionPaddingY);
756
- const sectionPaddingY = sectionPaddingRaw === "sm" || sectionPaddingRaw === "lg" ? sectionPaddingRaw : "md";
772
+ const sectionPaddingXRaw = normalizeText(block.sectionPaddingX, defaultSectionStyle.sectionPaddingX);
773
+ const sectionPaddingY = sectionPaddingRaw === "none" || sectionPaddingRaw === "sm" || sectionPaddingRaw === "lg" ? sectionPaddingRaw : "md";
774
+ const sectionPaddingX = sectionPaddingXRaw === "none" || sectionPaddingXRaw === "sm" || sectionPaddingXRaw === "md" || sectionPaddingXRaw === "lg" ? sectionPaddingXRaw : pageDefaults.pageWidthDefault === "full" ? "none" : "md";
757
775
  const contentWidth = contentWidthRaw === "narrow" || contentWidthRaw === "content" || contentWidthRaw === "wide" || contentWidthRaw === "full" || contentWidthRaw === "inherit" ? contentWidthRaw : "inherit";
758
776
  const resolvedContentWidth = contentWidth === "inherit" ? pageDefaults.pageWidthDefault : contentWidth;
759
777
  const sectionMode = normalizeText(block.sectionBackgroundMode, defaultSectionStyle.sectionBackgroundMode);
@@ -785,7 +803,7 @@ var sectionStyleFromBlock = (block, pageDefaults) => {
785
803
  boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)",
786
804
  padding: "1rem"
787
805
  } : {},
788
- sectionClass: `orion-builder-shell is-${pageDefaults.pageWidthDefault}`,
806
+ sectionClass: `orion-builder-shell is-${pageDefaults.pageWidthDefault} padx-${sectionPaddingX}`,
789
807
  sectionInnerStyle: {
790
808
  paddingBottom: sectionPaddingMap[sectionPaddingY],
791
809
  paddingTop: sectionPaddingMap[sectionPaddingY]
@@ -1968,6 +1986,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
1968
1986
  block.backgroundImageFit
1969
1987
  );
1970
1988
  const backgroundImagePosition = normalizeHeroImagePosition(block.backgroundImagePosition);
1989
+ const heroHeight = normalizeHeroHeight(block.heroHeight);
1990
+ const heroMinHeight = heroHeightMap[heroHeight];
1971
1991
  const heroCornerRadius = getHeroImageCornerRadius(backgroundImageCornerStyle);
1972
1992
  const sectionBackgroundMode = normalizeText(
1973
1993
  block.sectionBackgroundMode,
@@ -1978,13 +1998,15 @@ function BuilderPageEditor({ initialDoc, pageID }) {
1978
1998
  const hasCustomHeroColor = backgroundColor.length > 0 && backgroundColor.toLowerCase() !== "#124a37";
1979
1999
  const mediaStyle = backgroundImage && variant === "default" ? {
1980
2000
  ...hasCustomHeroColor ? { backgroundColor } : {},
1981
- backgroundImage: `linear-gradient(145deg, rgba(13, 74, 55, 0.34), rgba(13, 74, 55, 0.74)), url('${backgroundImage}')`,
1982
- backgroundPosition: `center, ${backgroundImagePosition}`,
1983
- backgroundRepeat: "no-repeat, no-repeat",
1984
- backgroundSize: `100% 100%, ${backgroundImageFit}`
2001
+ backgroundImage: `url('${backgroundImage}')`,
2002
+ backgroundPosition: backgroundImagePosition,
2003
+ backgroundRepeat: "no-repeat",
2004
+ backgroundSize: backgroundImageFit,
2005
+ minHeight: heroMinHeight
1985
2006
  } : hasCustomHeroColor && sectionBackgroundMode !== "none" ? {
1986
- backgroundColor
1987
- } : {};
2007
+ backgroundColor,
2008
+ minHeight: heroMinHeight
2009
+ } : { minHeight: heroMinHeight };
1988
2010
  const heroStyle = {
1989
2011
  borderRadius: heroCornerRadius
1990
2012
  };
@@ -3244,6 +3266,25 @@ function BuilderPageEditor({ initialDoc, pageID }) {
3244
3266
  style: sidebarInputStyle,
3245
3267
  value: normalizeText(selectedSectionStyle.sectionPaddingY, "md"),
3246
3268
  children: [
3269
+ /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
3270
+ /* @__PURE__ */ jsx("option", { value: "sm", children: "Small" }),
3271
+ /* @__PURE__ */ jsx("option", { value: "md", children: "Medium" }),
3272
+ /* @__PURE__ */ jsx("option", { value: "lg", children: "Large" })
3273
+ ]
3274
+ }
3275
+ )
3276
+ ] }),
3277
+ /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
3278
+ "Section Horizontal Spacing",
3279
+ /* @__PURE__ */ jsxs(
3280
+ "select",
3281
+ {
3282
+ onChange: (event) => setSelectedStyleField("sectionPaddingX", event.target.value),
3283
+ style: sidebarInputStyle,
3284
+ value: normalizeText(selectedSectionStyle.sectionPaddingX, "inherit"),
3285
+ children: [
3286
+ /* @__PURE__ */ jsx("option", { value: "inherit", children: "Inherit (Edge-to-Edge on Full Width)" }),
3287
+ /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
3247
3288
  /* @__PURE__ */ jsx("option", { value: "sm", children: "Small" }),
3248
3289
  /* @__PURE__ */ jsx("option", { value: "md", children: "Medium" }),
3249
3290
  /* @__PURE__ */ jsx("option", { value: "lg", children: "Large" })
@@ -3431,6 +3472,22 @@ function BuilderPageEditor({ initialDoc, pageID }) {
3431
3472
  }
3432
3473
  )
3433
3474
  ] }),
3475
+ /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
3476
+ "Hero Height",
3477
+ /* @__PURE__ */ jsxs(
3478
+ "select",
3479
+ {
3480
+ onChange: (event) => updateSelectedField("heroHeight", event.target.value),
3481
+ style: sidebarInputStyle,
3482
+ value: normalizeHeroHeight(selectedBlock.heroHeight),
3483
+ children: [
3484
+ /* @__PURE__ */ jsx("option", { value: "sm", children: "Small" }),
3485
+ /* @__PURE__ */ jsx("option", { value: "md", children: "Medium (Half Screen)" }),
3486
+ /* @__PURE__ */ jsx("option", { value: "full", children: "Full Screen" })
3487
+ ]
3488
+ }
3489
+ )
3490
+ ] }),
3434
3491
  /* @__PURE__ */ jsxs("div", { style: { ...sidebarSectionStyle, display: "grid", gap: 8 }, children: [
3435
3492
  /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12, fontWeight: 600 }, children: "Hero Image" }),
3436
3493
  /* @__PURE__ */ jsx("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: selectedHeroMedia ? `${selectedHeroMedia.filename || `Media #${selectedHeroMedia.id}`}${selectedHeroMedia.alt ? ` (${selectedHeroMedia.alt})` : ""}` : "No image selected." }),
@@ -39,6 +39,7 @@ var sectionStyleDefaults = {
39
39
  contentGradientPreset: "none",
40
40
  contentGradientTo: "#f4f6f2",
41
41
  contentWidth: "inherit",
42
+ sectionPaddingX: "inherit",
42
43
  sectionBackgroundColor: "#ffffff",
43
44
  sectionBackgroundMode: "none",
44
45
  sectionGradientAngle: "135",
@@ -111,6 +112,7 @@ var defaultNodeData = {
111
112
  backgroundImageCornerStyle: "rounded",
112
113
  backgroundImageFit: "cover",
113
114
  backgroundImagePosition: "center",
115
+ heroHeight: "sm",
114
116
  headline: "New Hero Section",
115
117
  kicker: "Optional kicker",
116
118
  primaryHref: "/contact",
@@ -6,8 +6,8 @@ import {
6
6
  pagePaletteGroups,
7
7
  pageStudioModuleManifest,
8
8
  studioDocumentToLayout
9
- } from "../chunk-D4S5OA4U.mjs";
10
- import "../chunk-ETRRXURT.mjs";
9
+ } from "../chunk-QW24Y4UH.mjs";
10
+ import "../chunk-SIL2J5MF.mjs";
11
11
  import "../chunk-6BWS3CLP.mjs";
12
12
  export {
13
13
  createDefaultStudioDocument,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orion-studios/payload-studio",
3
- "version": "0.5.0-beta.21",
3
+ "version": "0.5.0-beta.23",
4
4
  "description": "Unified Payload CMS toolkit for Orion Studios",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {