@orion-studios/payload-studio 0.5.0-beta.44 → 0.5.0-beta.46

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.
Files changed (14) hide show
  1. package/dist/blocks/index.js +12 -1
  2. package/dist/blocks/index.mjs +1 -1
  3. package/dist/{chunk-ICGXZCFJ.mjs → chunk-4AOYZGIY.mjs} +12 -1
  4. package/dist/{chunk-7TTLMA6K.mjs → chunk-OHAGPJBM.mjs} +1 -0
  5. package/dist/{chunk-C6VEHNJW.mjs → chunk-SKZUOCR2.mjs} +1 -1
  6. package/dist/index.js +13 -1
  7. package/dist/index.mjs +5 -5
  8. package/dist/nextjs/index.js +1 -0
  9. package/dist/nextjs/index.mjs +2 -2
  10. package/dist/studio-pages/client.js +106 -74
  11. package/dist/studio-pages/client.mjs +106 -74
  12. package/dist/studio-pages/index.js +1 -0
  13. package/dist/studio-pages/index.mjs +1 -1
  14. package/package.json +1 -1
package/dist/blocks/index.js CHANGED
@@ -222,11 +222,22 @@ var BeforeAfterBlock = {
222
222
  name: "subtitle",
223
223
  type: "textarea"
224
224
  },
225
+ {
226
+ name: "itemsPerRow",
227
+ type: "number",
228
+ defaultValue: 2,
229
+ min: 1,
230
+ max: 4,
231
+ admin: {
232
+ description: "How many project cards to show per row on desktop.",
233
+ step: 1
234
+ }
235
+ },
225
236
  {
226
237
  name: "items",
227
238
  type: "array",
228
239
  minRows: 1,
229
- maxRows: 6,
240
+ maxRows: 30,
230
241
  fields: [
231
242
  {
232
243
  name: "label",
package/dist/blocks/index.mjs CHANGED
@@ -17,7 +17,7 @@ import {
17
17
  defaultPageLayoutBlocks,
18
18
  sectionPresets,
19
19
  templateStarterPresets
20
- } from "../chunk-ICGXZCFJ.mjs";
20
+ } from "../chunk-4AOYZGIY.mjs";
21
21
  import "../chunk-SIL2J5MF.mjs";
22
22
  import "../chunk-6BWS3CLP.mjs";
23
23
  export {
package/dist/{chunk-ICGXZCFJ.mjs → chunk-4AOYZGIY.mjs} RENAMED
@@ -58,11 +58,22 @@ var BeforeAfterBlock = {
58
58
  name: "subtitle",
59
59
  type: "textarea"
60
60
  },
61
+ {
62
+ name: "itemsPerRow",
63
+ type: "number",
64
+ defaultValue: 2,
65
+ min: 1,
66
+ max: 4,
67
+ admin: {
68
+ description: "How many project cards to show per row on desktop.",
69
+ step: 1
70
+ }
71
+ },
61
72
  {
62
73
  name: "items",
63
74
  type: "array",
64
75
  minRows: 1,
65
- maxRows: 6,
76
+ maxRows: 30,
66
77
  fields: [
67
78
  {
68
79
  name: "label",
package/dist/{chunk-7TTLMA6K.mjs → chunk-OHAGPJBM.mjs} RENAMED
@@ -29,6 +29,7 @@ var defaultNodeData = {
29
29
  title: "Book a Time"
30
30
  },
31
31
  beforeAfter: withSectionStyleDefaults({
32
+ itemsPerRow: 2,
32
33
  items: [
33
34
  {
34
35
  description: "Before and after result summary.",
package/dist/{chunk-C6VEHNJW.mjs → chunk-SKZUOCR2.mjs} RENAMED
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-N67KVM2S.mjs";
4
4
  import {
5
5
  studioDocumentToLayout
6
- } from "./chunk-7TTLMA6K.mjs";
6
+ } from "./chunk-OHAGPJBM.mjs";
7
7
  import {
8
8
  __export
9
9
  } from "./chunk-6BWS3CLP.mjs";
package/dist/index.js CHANGED
@@ -763,11 +763,22 @@ var BeforeAfterBlock = {
763
763
  name: "subtitle",
764
764
  type: "textarea"
765
765
  },
766
+ {
767
+ name: "itemsPerRow",
768
+ type: "number",
769
+ defaultValue: 2,
770
+ min: 1,
771
+ max: 4,
772
+ admin: {
773
+ description: "How many project cards to show per row on desktop.",
774
+ step: 1
775
+ }
776
+ },
766
777
  {
767
778
  name: "items",
768
779
  type: "array",
769
780
  minRows: 1,
770
- maxRows: 6,
781
+ maxRows: 30,
771
782
  fields: [
772
783
  {
773
784
  name: "label",
@@ -2338,6 +2349,7 @@ var defaultNodeData = {
2338
2349
  title: "Book a Time"
2339
2350
  },
2340
2351
  beforeAfter: withSectionStyleDefaults({
2352
+ itemsPerRow: 2,
2341
2353
  items: [
2342
2354
  {
2343
2355
  description: "Before and after result summary.",
package/dist/index.mjs CHANGED
@@ -1,21 +1,21 @@
1
1
  import {
2
2
  admin_exports
3
3
  } from "./chunk-7IGLXLUB.mjs";
4
- import {
5
- blocks_exports
6
- } from "./chunk-ICGXZCFJ.mjs";
7
4
  import {
8
5
  admin_app_exports
9
6
  } from "./chunk-XVH5SCBD.mjs";
7
+ import {
8
+ blocks_exports
9
+ } from "./chunk-4AOYZGIY.mjs";
10
10
  import {
11
11
  nextjs_exports
12
- } from "./chunk-C6VEHNJW.mjs";
12
+ } from "./chunk-SKZUOCR2.mjs";
13
13
  import {
14
14
  studio_exports
15
15
  } from "./chunk-N67KVM2S.mjs";
16
16
  import {
17
17
  studio_pages_exports
18
- } from "./chunk-7TTLMA6K.mjs";
18
+ } from "./chunk-OHAGPJBM.mjs";
19
19
  import "./chunk-SIL2J5MF.mjs";
20
20
  import "./chunk-6BWS3CLP.mjs";
21
21
  export {
package/dist/nextjs/index.js CHANGED
@@ -118,6 +118,7 @@ var defaultNodeData = {
118
118
  title: "Book a Time"
119
119
  },
120
120
  beforeAfter: withSectionStyleDefaults({
121
+ itemsPerRow: 2,
121
122
  items: [
122
123
  {
123
124
  description: "Before and after result summary.",
package/dist/nextjs/index.mjs CHANGED
@@ -4,9 +4,9 @@ import {
4
4
  createPayloadClient,
5
5
  createSiteQueries,
6
6
  resolveMedia
7
- } from "../chunk-C6VEHNJW.mjs";
7
+ } from "../chunk-SKZUOCR2.mjs";
8
8
  import "../chunk-N67KVM2S.mjs";
9
- import "../chunk-7TTLMA6K.mjs";
9
+ import "../chunk-OHAGPJBM.mjs";
10
10
  import "../chunk-SIL2J5MF.mjs";
11
11
  import "../chunk-6BWS3CLP.mjs";
12
12
  export {
package/dist/studio-pages/client.js CHANGED
@@ -67,6 +67,7 @@ var defaultNodeData = {
67
67
  title: "Book a Time"
68
68
  },
69
69
  beforeAfter: withSectionStyleDefaults({
70
+ itemsPerRow: 2,
70
71
  items: [
71
72
  {
72
73
  description: "Before and after result summary.",
@@ -2738,6 +2739,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
2738
2739
  }
2739
2740
  if (type === "beforeAfter") {
2740
2741
  const items = Array.isArray(block.items) ? block.items : [];
2742
+ const itemsPerRowRaw = Math.floor(parsePixelNumber(block.itemsPerRow, 2));
2743
+ const itemsPerRow = Math.max(1, Math.min(4, itemsPerRowRaw));
2741
2744
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2742
2745
  BlockFrame,
2743
2746
  {
@@ -2773,87 +2776,99 @@ function BuilderPageEditor({ initialDoc, pageID }) {
2773
2776
  }
2774
2777
  )
2775
2778
  ] }) }),
2776
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-before-after-grid", children: items.map((item, itemIndex) => {
2777
- const itemRecord = item;
2778
- const beforeMedia = resolveMedia(itemRecord?.beforeMedia);
2779
- const afterMedia = resolveMedia(itemRecord?.afterMedia);
2780
- const imageHeight = parsePixelNumber(itemRecord?.imageHeight, 160);
2781
- const itemPositionX = parseOptionalPercentNumber(itemRecord?.imagePositionX);
2782
- const itemPositionY = parseOptionalPercentNumber(itemRecord?.imagePositionY);
2783
- const imageStyle = getImagePresentationStyle({
2784
- cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
2785
- fit: normalizeImageFit(itemRecord?.imageFit),
2786
- position: normalizeImagePosition(itemRecord?.imagePosition),
2787
- positionX: itemPositionX,
2788
- positionY: itemPositionY
2789
- });
2790
- const isItemSelected = selectedIndex === index && selectedItemIndex === itemIndex;
2791
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2792
- "article",
2793
- {
2794
- className: "orion-before-after-card",
2795
- onMouseDownCapture: () => {
2796
- setSelectedIndex(index);
2797
- openSelectedItem(itemIndex);
2798
- },
2799
- style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
2800
- children: [
2801
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-before-after-media", children: [
2802
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { children: [
2803
- beforeMedia?.url ? (
2804
- // eslint-disable-next-line @next/next/no-img-element
2779
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2780
+ "div",
2781
+ {
2782
+ className: "orion-before-after-grid",
2783
+ style: {
2784
+ ["--before-after-grid-template-columns"]: `repeat(${Math.max(
2785
+ 1,
2786
+ Math.min(itemsPerRow, items.length || itemsPerRow)
2787
+ )}, minmax(0, 1fr))`
2788
+ },
2789
+ children: items.map((item, itemIndex) => {
2790
+ const itemRecord = item;
2791
+ const beforeMedia = resolveMedia(itemRecord?.beforeMedia);
2792
+ const afterMedia = resolveMedia(itemRecord?.afterMedia);
2793
+ const imageHeight = parsePixelNumber(itemRecord?.imageHeight, 160);
2794
+ const itemPositionX = parseOptionalPercentNumber(itemRecord?.imagePositionX);
2795
+ const itemPositionY = parseOptionalPercentNumber(itemRecord?.imagePositionY);
2796
+ const imageStyle = getImagePresentationStyle({
2797
+ cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
2798
+ fit: normalizeImageFit(itemRecord?.imageFit),
2799
+ position: normalizeImagePosition(itemRecord?.imagePosition),
2800
+ positionX: itemPositionX,
2801
+ positionY: itemPositionY
2802
+ });
2803
+ const isItemSelected = selectedIndex === index && selectedItemIndex === itemIndex;
2804
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2805
+ "article",
2806
+ {
2807
+ className: "orion-before-after-card",
2808
+ onMouseDownCapture: () => {
2809
+ setSelectedIndex(index);
2810
+ openSelectedItem(itemIndex);
2811
+ },
2812
+ style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
2813
+ children: [
2814
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-before-after-media", children: [
2815
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { children: [
2816
+ beforeMedia?.url ? (
2817
+ // eslint-disable-next-line @next/next/no-img-element
2818
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2819
+ "img",
2820
+ {
2821
+ alt: beforeMedia.alt || `${normalizeText(itemRecord?.label, "Project")} before`,
2822
+ src: beforeMedia.url,
2823
+ style: { ...imageStyle, height: imageHeight }
2824
+ }
2825
+ )
2826
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "Before" }),
2827
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", { children: "Before" })
2828
+ ] }),
2829
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { children: [
2830
+ afterMedia?.url ? (
2831
+ // eslint-disable-next-line @next/next/no-img-element
2832
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2833
+ "img",
2834
+ {
2835
+ alt: afterMedia.alt || `${normalizeText(itemRecord?.label, "Project")} after`,
2836
+ src: afterMedia.url,
2837
+ style: { ...imageStyle, height: imageHeight }
2838
+ }
2839
+ )
2840
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "After" }),
2841
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", { children: "After" })
2842
+ ] })
2843
+ ] }),
2844
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-before-after-body", children: [
2805
2845
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2806
- "img",
2846
+ InlineText,
2807
2847
  {
2808
- alt: beforeMedia.alt || `${normalizeText(itemRecord?.label, "Project")} before`,
2809
- src: beforeMedia.url,
2810
- style: { ...imageStyle, height: imageHeight }
2848
+ as: "h3",
2849
+ onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "label", value),
2850
+ placeholder: "Project label",
2851
+ value: normalizeText(itemRecord?.label)
2811
2852
  }
2812
- )
2813
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "Before" }),
2814
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", { children: "Before" })
2815
- ] }),
2816
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { children: [
2817
- afterMedia?.url ? (
2818
- // eslint-disable-next-line @next/next/no-img-element
2853
+ ),
2819
2854
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2820
- "img",
2855
+ InlineText,
2821
2856
  {
2822
- alt: afterMedia.alt || `${normalizeText(itemRecord?.label, "Project")} after`,
2823
- src: afterMedia.url,
2824
- style: { ...imageStyle, height: imageHeight }
2857
+ as: "p",
2858
+ multiline: true,
2859
+ onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "description", value),
2860
+ placeholder: "Project description",
2861
+ value: normalizeText(itemRecord?.description)
2825
2862
  }
2826
2863
  )
2827
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "After" }),
2828
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", { children: "After" })
2829
- ] })
2830
- ] }),
2831
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-before-after-body", children: [
2832
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2833
- InlineText,
2834
- {
2835
- as: "h3",
2836
- onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "label", value),
2837
- placeholder: "Project label",
2838
- value: normalizeText(itemRecord?.label)
2839
- }
2840
- ),
2841
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2842
- InlineText,
2843
- {
2844
- as: "p",
2845
- multiline: true,
2846
- onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "description", value),
2847
- placeholder: "Project description",
2848
- value: normalizeText(itemRecord?.description)
2849
- }
2850
- )
2851
- ] })
2852
- ]
2853
- },
2854
- `before-after-${itemIndex}`
2855
- );
2856
- }) })
2864
+ ] })
2865
+ ]
2866
+ },
2867
+ `before-after-${itemIndex}`
2868
+ );
2869
+ })
2870
+ }
2871
+ )
2857
2872
  ] })
2858
2873
  )
2859
2874
  },
@@ -5224,6 +5239,23 @@ function BuilderPageEditor({ initialDoc, pageID }) {
5224
5239
  }) })
5225
5240
  ] }) : null,
5226
5241
  selectedType === "beforeAfter" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
5242
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
5243
+ "Items Per Row (Desktop)",
5244
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
5245
+ "select",
5246
+ {
5247
+ onChange: (event) => updateSelectedField("itemsPerRow", Number(event.target.value)),
5248
+ style: sidebarInputStyle,
5249
+ value: Math.max(1, Math.min(4, Math.floor(parsePixelNumber(selectedBlock.itemsPerRow, 2)))),
5250
+ children: [
5251
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: 1, children: "1" }),
5252
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: 2, children: "2" }),
5253
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: 3, children: "3" }),
5254
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: 4, children: "4" })
5255
+ ]
5256
+ }
5257
+ )
5258
+ ] }),
5227
5259
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
5228
5260
  "button",
5229
5261
  {
package/dist/studio-pages/client.mjs CHANGED
@@ -39,6 +39,7 @@ var defaultNodeData = {
39
39
  title: "Book a Time"
40
40
  },
41
41
  beforeAfter: withSectionStyleDefaults({
42
+ itemsPerRow: 2,
42
43
  items: [
43
44
  {
44
45
  description: "Before and after result summary.",
@@ -2710,6 +2711,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
2710
2711
  }
2711
2712
  if (type === "beforeAfter") {
2712
2713
  const items = Array.isArray(block.items) ? block.items : [];
2714
+ const itemsPerRowRaw = Math.floor(parsePixelNumber(block.itemsPerRow, 2));
2715
+ const itemsPerRow = Math.max(1, Math.min(4, itemsPerRowRaw));
2713
2716
  return /* @__PURE__ */ jsx(
2714
2717
  BlockFrame,
2715
2718
  {
@@ -2745,87 +2748,99 @@ function BuilderPageEditor({ initialDoc, pageID }) {
2745
2748
  }
2746
2749
  )
2747
2750
  ] }) }),
2748
- /* @__PURE__ */ jsx("div", { className: "orion-before-after-grid", children: items.map((item, itemIndex) => {
2749
- const itemRecord = item;
2750
- const beforeMedia = resolveMedia(itemRecord?.beforeMedia);
2751
- const afterMedia = resolveMedia(itemRecord?.afterMedia);
2752
- const imageHeight = parsePixelNumber(itemRecord?.imageHeight, 160);
2753
- const itemPositionX = parseOptionalPercentNumber(itemRecord?.imagePositionX);
2754
- const itemPositionY = parseOptionalPercentNumber(itemRecord?.imagePositionY);
2755
- const imageStyle = getImagePresentationStyle({
2756
- cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
2757
- fit: normalizeImageFit(itemRecord?.imageFit),
2758
- position: normalizeImagePosition(itemRecord?.imagePosition),
2759
- positionX: itemPositionX,
2760
- positionY: itemPositionY
2761
- });
2762
- const isItemSelected = selectedIndex === index && selectedItemIndex === itemIndex;
2763
- return /* @__PURE__ */ jsxs(
2764
- "article",
2765
- {
2766
- className: "orion-before-after-card",
2767
- onMouseDownCapture: () => {
2768
- setSelectedIndex(index);
2769
- openSelectedItem(itemIndex);
2770
- },
2771
- style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
2772
- children: [
2773
- /* @__PURE__ */ jsxs("div", { className: "orion-before-after-media", children: [
2774
- /* @__PURE__ */ jsxs("figure", { children: [
2775
- beforeMedia?.url ? (
2776
- // eslint-disable-next-line @next/next/no-img-element
2751
+ /* @__PURE__ */ jsx(
2752
+ "div",
2753
+ {
2754
+ className: "orion-before-after-grid",
2755
+ style: {
2756
+ ["--before-after-grid-template-columns"]: `repeat(${Math.max(
2757
+ 1,
2758
+ Math.min(itemsPerRow, items.length || itemsPerRow)
2759
+ )}, minmax(0, 1fr))`
2760
+ },
2761
+ children: items.map((item, itemIndex) => {
2762
+ const itemRecord = item;
2763
+ const beforeMedia = resolveMedia(itemRecord?.beforeMedia);
2764
+ const afterMedia = resolveMedia(itemRecord?.afterMedia);
2765
+ const imageHeight = parsePixelNumber(itemRecord?.imageHeight, 160);
2766
+ const itemPositionX = parseOptionalPercentNumber(itemRecord?.imagePositionX);
2767
+ const itemPositionY = parseOptionalPercentNumber(itemRecord?.imagePositionY);
2768
+ const imageStyle = getImagePresentationStyle({
2769
+ cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
2770
+ fit: normalizeImageFit(itemRecord?.imageFit),
2771
+ position: normalizeImagePosition(itemRecord?.imagePosition),
2772
+ positionX: itemPositionX,
2773
+ positionY: itemPositionY
2774
+ });
2775
+ const isItemSelected = selectedIndex === index && selectedItemIndex === itemIndex;
2776
+ return /* @__PURE__ */ jsxs(
2777
+ "article",
2778
+ {
2779
+ className: "orion-before-after-card",
2780
+ onMouseDownCapture: () => {
2781
+ setSelectedIndex(index);
2782
+ openSelectedItem(itemIndex);
2783
+ },
2784
+ style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
2785
+ children: [
2786
+ /* @__PURE__ */ jsxs("div", { className: "orion-before-after-media", children: [
2787
+ /* @__PURE__ */ jsxs("figure", { children: [
2788
+ beforeMedia?.url ? (
2789
+ // eslint-disable-next-line @next/next/no-img-element
2790
+ /* @__PURE__ */ jsx(
2791
+ "img",
2792
+ {
2793
+ alt: beforeMedia.alt || `${normalizeText(itemRecord?.label, "Project")} before`,
2794
+ src: beforeMedia.url,
2795
+ style: { ...imageStyle, height: imageHeight }
2796
+ }
2797
+ )
2798
+ ) : /* @__PURE__ */ jsx("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "Before" }),
2799
+ /* @__PURE__ */ jsx("figcaption", { children: "Before" })
2800
+ ] }),
2801
+ /* @__PURE__ */ jsxs("figure", { children: [
2802
+ afterMedia?.url ? (
2803
+ // eslint-disable-next-line @next/next/no-img-element
2804
+ /* @__PURE__ */ jsx(
2805
+ "img",
2806
+ {
2807
+ alt: afterMedia.alt || `${normalizeText(itemRecord?.label, "Project")} after`,
2808
+ src: afterMedia.url,
2809
+ style: { ...imageStyle, height: imageHeight }
2810
+ }
2811
+ )
2812
+ ) : /* @__PURE__ */ jsx("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "After" }),
2813
+ /* @__PURE__ */ jsx("figcaption", { children: "After" })
2814
+ ] })
2815
+ ] }),
2816
+ /* @__PURE__ */ jsxs("div", { className: "orion-before-after-body", children: [
2777
2817
  /* @__PURE__ */ jsx(
2778
- "img",
2818
+ InlineText,
2779
2819
  {
2780
- alt: beforeMedia.alt || `${normalizeText(itemRecord?.label, "Project")} before`,
2781
- src: beforeMedia.url,
2782
- style: { ...imageStyle, height: imageHeight }
2820
+ as: "h3",
2821
+ onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "label", value),
2822
+ placeholder: "Project label",
2823
+ value: normalizeText(itemRecord?.label)
2783
2824
  }
2784
- )
2785
- ) : /* @__PURE__ */ jsx("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "Before" }),
2786
- /* @__PURE__ */ jsx("figcaption", { children: "Before" })
2787
- ] }),
2788
- /* @__PURE__ */ jsxs("figure", { children: [
2789
- afterMedia?.url ? (
2790
- // eslint-disable-next-line @next/next/no-img-element
2825
+ ),
2791
2826
  /* @__PURE__ */ jsx(
2792
- "img",
2827
+ InlineText,
2793
2828
  {
2794
- alt: afterMedia.alt || `${normalizeText(itemRecord?.label, "Project")} after`,
2795
- src: afterMedia.url,
2796
- style: { ...imageStyle, height: imageHeight }
2829
+ as: "p",
2830
+ multiline: true,
2831
+ onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "description", value),
2832
+ placeholder: "Project description",
2833
+ value: normalizeText(itemRecord?.description)
2797
2834
  }
2798
2835
  )
2799
- ) : /* @__PURE__ */ jsx("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "After" }),
2800
- /* @__PURE__ */ jsx("figcaption", { children: "After" })
2801
- ] })
2802
- ] }),
2803
- /* @__PURE__ */ jsxs("div", { className: "orion-before-after-body", children: [
2804
- /* @__PURE__ */ jsx(
2805
- InlineText,
2806
- {
2807
- as: "h3",
2808
- onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "label", value),
2809
- placeholder: "Project label",
2810
- value: normalizeText(itemRecord?.label)
2811
- }
2812
- ),
2813
- /* @__PURE__ */ jsx(
2814
- InlineText,
2815
- {
2816
- as: "p",
2817
- multiline: true,
2818
- onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "description", value),
2819
- placeholder: "Project description",
2820
- value: normalizeText(itemRecord?.description)
2821
- }
2822
- )
2823
- ] })
2824
- ]
2825
- },
2826
- `before-after-${itemIndex}`
2827
- );
2828
- }) })
2836
+ ] })
2837
+ ]
2838
+ },
2839
+ `before-after-${itemIndex}`
2840
+ );
2841
+ })
2842
+ }
2843
+ )
2829
2844
  ] })
2830
2845
  )
2831
2846
  },
@@ -5196,6 +5211,23 @@ function BuilderPageEditor({ initialDoc, pageID }) {
5196
5211
  }) })
5197
5212
  ] }) : null,
5198
5213
  selectedType === "beforeAfter" ? /* @__PURE__ */ jsxs(Fragment, { children: [
5214
+ /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
5215
+ "Items Per Row (Desktop)",
5216
+ /* @__PURE__ */ jsxs(
5217
+ "select",
5218
+ {
5219
+ onChange: (event) => updateSelectedField("itemsPerRow", Number(event.target.value)),
5220
+ style: sidebarInputStyle,
5221
+ value: Math.max(1, Math.min(4, Math.floor(parsePixelNumber(selectedBlock.itemsPerRow, 2)))),
5222
+ children: [
5223
+ /* @__PURE__ */ jsx("option", { value: 1, children: "1" }),
5224
+ /* @__PURE__ */ jsx("option", { value: 2, children: "2" }),
5225
+ /* @__PURE__ */ jsx("option", { value: 3, children: "3" }),
5226
+ /* @__PURE__ */ jsx("option", { value: 4, children: "4" })
5227
+ ]
5228
+ }
5229
+ )
5230
+ ] }),
5199
5231
  /* @__PURE__ */ jsx(
5200
5232
  "button",
5201
5233
  {
package/dist/studio-pages/index.js CHANGED
@@ -64,6 +64,7 @@ var defaultNodeData = {
64
64
  title: "Book a Time"
65
65
  },
66
66
  beforeAfter: withSectionStyleDefaults({
67
+ itemsPerRow: 2,
67
68
  items: [
68
69
  {
69
70
  description: "Before and after result summary.",
package/dist/studio-pages/index.mjs CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  pagePaletteGroups,
7
7
  pageStudioModuleManifest,
8
8
  studioDocumentToLayout
9
- } from "../chunk-7TTLMA6K.mjs";
9
+ } from "../chunk-OHAGPJBM.mjs";
10
10
  import "../chunk-SIL2J5MF.mjs";
11
11
  import "../chunk-6BWS3CLP.mjs";
12
12
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orion-studios/payload-studio",
3
- "version": "0.5.0-beta.44",
3
+ "version": "0.5.0-beta.46",
4
4
  "description": "Unified Payload CMS toolkit for Orion Studios",
5
5
  "types": "./dist/index.d.ts",
6
6
  "main": "./dist/index.js",