@orion-studios/payload-studio 0.5.0-beta.45 → 0.5.0-beta.47

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 +11 -0
  2. package/dist/blocks/index.mjs +1 -1
  3. package/dist/{chunk-V65RLZIZ.mjs → chunk-4AOYZGIY.mjs} +11 -0
  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 +12 -0
  7. package/dist/index.mjs +3 -3
  8. package/dist/nextjs/index.js +1 -0
  9. package/dist/nextjs/index.mjs +2 -2
  10. package/dist/studio-pages/client.js +137 -92
  11. package/dist/studio-pages/client.mjs +137 -92
  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,6 +222,17 @@ 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",
package/dist/blocks/index.mjs CHANGED
@@ -17,7 +17,7 @@ import {
17
17
  defaultPageLayoutBlocks,
18
18
  sectionPresets,
19
19
  templateStarterPresets
20
- } from "../chunk-V65RLZIZ.mjs";
20
+ } from "../chunk-4AOYZGIY.mjs";
21
21
  import "../chunk-SIL2J5MF.mjs";
22
22
  import "../chunk-6BWS3CLP.mjs";
23
23
  export {
package/dist/{chunk-V65RLZIZ.mjs → chunk-4AOYZGIY.mjs} RENAMED
@@ -58,6 +58,17 @@ 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",
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,6 +763,17 @@ 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",
@@ -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
@@ -6,16 +6,16 @@ import {
6
6
  } from "./chunk-XVH5SCBD.mjs";
7
7
  import {
8
8
  blocks_exports
9
- } from "./chunk-V65RLZIZ.mjs";
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
@@ -31,7 +31,6 @@ module.exports = __toCommonJS(client_exports);
31
31
 
32
32
  // src/studio-pages/builder/BuilderPageEditor.tsx
33
33
  var import_react = require("react");
34
- var import_react2 = require("@payloadcms/richtext-lexical/react");
35
34
 
36
35
  // src/blocks/blocks/sectionStyleFields.ts
37
36
  var sectionStyleDefaults = {
@@ -67,6 +66,7 @@ var defaultNodeData = {
67
66
  title: "Book a Time"
68
67
  },
69
68
  beforeAfter: withSectionStyleDefaults({
69
+ itemsPerRow: 2,
70
70
  items: [
71
71
  {
72
72
  description: "Before and after result summary.",
@@ -2738,6 +2738,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
2738
2738
  }
2739
2739
  if (type === "beforeAfter") {
2740
2740
  const items = Array.isArray(block.items) ? block.items : [];
2741
+ const itemsPerRowRaw = Math.floor(parsePixelNumber(block.itemsPerRow, 2));
2742
+ const itemsPerRow = Math.max(1, Math.min(4, itemsPerRowRaw));
2741
2743
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2742
2744
  BlockFrame,
2743
2745
  {
@@ -2773,87 +2775,99 @@ function BuilderPageEditor({ initialDoc, pageID }) {
2773
2775
  }
2774
2776
  )
2775
2777
  ] }) }),
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
2778
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2779
+ "div",
2780
+ {
2781
+ className: "orion-before-after-grid",
2782
+ style: {
2783
+ ["--before-after-grid-template-columns"]: `repeat(${Math.max(
2784
+ 1,
2785
+ Math.min(itemsPerRow, items.length || itemsPerRow)
2786
+ )}, minmax(0, 1fr))`
2787
+ },
2788
+ children: items.map((item, itemIndex) => {
2789
+ const itemRecord = item;
2790
+ const beforeMedia = resolveMedia(itemRecord?.beforeMedia);
2791
+ const afterMedia = resolveMedia(itemRecord?.afterMedia);
2792
+ const imageHeight = parsePixelNumber(itemRecord?.imageHeight, 160);
2793
+ const itemPositionX = parseOptionalPercentNumber(itemRecord?.imagePositionX);
2794
+ const itemPositionY = parseOptionalPercentNumber(itemRecord?.imagePositionY);
2795
+ const imageStyle = getImagePresentationStyle({
2796
+ cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
2797
+ fit: normalizeImageFit(itemRecord?.imageFit),
2798
+ position: normalizeImagePosition(itemRecord?.imagePosition),
2799
+ positionX: itemPositionX,
2800
+ positionY: itemPositionY
2801
+ });
2802
+ const isItemSelected = selectedIndex === index && selectedItemIndex === itemIndex;
2803
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2804
+ "article",
2805
+ {
2806
+ className: "orion-before-after-card",
2807
+ onMouseDownCapture: () => {
2808
+ setSelectedIndex(index);
2809
+ openSelectedItem(itemIndex);
2810
+ },
2811
+ style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
2812
+ children: [
2813
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-before-after-media", children: [
2814
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { children: [
2815
+ beforeMedia?.url ? (
2816
+ // eslint-disable-next-line @next/next/no-img-element
2817
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2818
+ "img",
2819
+ {
2820
+ alt: beforeMedia.alt || `${normalizeText(itemRecord?.label, "Project")} before`,
2821
+ src: beforeMedia.url,
2822
+ style: { ...imageStyle, height: imageHeight }
2823
+ }
2824
+ )
2825
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "Before" }),
2826
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", { children: "Before" })
2827
+ ] }),
2828
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { children: [
2829
+ afterMedia?.url ? (
2830
+ // eslint-disable-next-line @next/next/no-img-element
2831
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2832
+ "img",
2833
+ {
2834
+ alt: afterMedia.alt || `${normalizeText(itemRecord?.label, "Project")} after`,
2835
+ src: afterMedia.url,
2836
+ style: { ...imageStyle, height: imageHeight }
2837
+ }
2838
+ )
2839
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "After" }),
2840
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", { children: "After" })
2841
+ ] })
2842
+ ] }),
2843
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-before-after-body", children: [
2805
2844
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2806
- "img",
2845
+ InlineText,
2807
2846
  {
2808
- alt: beforeMedia.alt || `${normalizeText(itemRecord?.label, "Project")} before`,
2809
- src: beforeMedia.url,
2810
- style: { ...imageStyle, height: imageHeight }
2847
+ as: "h3",
2848
+ onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "label", value),
2849
+ placeholder: "Project label",
2850
+ value: normalizeText(itemRecord?.label)
2811
2851
  }
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
2852
+ ),
2819
2853
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2820
- "img",
2854
+ InlineText,
2821
2855
  {
2822
- alt: afterMedia.alt || `${normalizeText(itemRecord?.label, "Project")} after`,
2823
- src: afterMedia.url,
2824
- style: { ...imageStyle, height: imageHeight }
2856
+ as: "p",
2857
+ multiline: true,
2858
+ onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "description", value),
2859
+ placeholder: "Project description",
2860
+ value: normalizeText(itemRecord?.description)
2825
2861
  }
2826
2862
  )
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
- }) })
2863
+ ] })
2864
+ ]
2865
+ },
2866
+ `before-after-${itemIndex}`
2867
+ );
2868
+ })
2869
+ }
2870
+ )
2857
2871
  ] })
2858
2872
  )
2859
2873
  },
@@ -3070,6 +3084,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
3070
3084
  }
3071
3085
  if (type === "richText") {
3072
3086
  const width = normalizeText(block.width, "normal");
3087
+ const plainTextValue = extractLexicalText(block.content);
3073
3088
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
3074
3089
  BlockFrame,
3075
3090
  {
@@ -3093,15 +3108,15 @@ function BuilderPageEditor({ initialDoc, pageID }) {
3093
3108
  value: normalizeText(block.title)
3094
3109
  }
3095
3110
  ),
3096
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "richtext-content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.RichText, { data: block.content || {} }) }),
3097
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
3111
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "richtext-content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
3098
3112
  InlineText,
3099
3113
  {
3100
3114
  as: "p",
3101
3115
  multiline: true,
3102
3116
  onCommit: (value) => updateBlockField(index, "content", createLexicalText(value)),
3103
3117
  placeholder: "Click to edit rich text in plain text mode",
3104
- value: extractLexicalText(block.content)
3118
+ style: { whiteSpace: "pre-line" },
3119
+ value: plainTextValue
3105
3120
  }
3106
3121
  ) })
3107
3122
  ] })
@@ -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
  {
@@ -5787,20 +5819,33 @@ function BuilderPageEditor({ initialDoc, pageID }) {
5787
5819
  )
5788
5820
  ] })
5789
5821
  ] }) : null,
5790
- selectedType === "richText" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
5791
- "Content Width",
5792
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
5793
- "select",
5794
- {
5795
- onChange: (event) => updateSelectedField("width", event.target.value),
5796
- style: sidebarInputStyle,
5797
- value: normalizeText(selectedBlock.width, "normal"),
5798
- children: [
5799
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "normal", children: "Normal" }),
5800
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "narrow", children: "Narrow" })
5801
- ]
5802
- }
5803
- )
5822
+ selectedType === "richText" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
5823
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
5824
+ "Content",
5825
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
5826
+ "textarea",
5827
+ {
5828
+ onChange: (event) => updateSelectedField("content", createLexicalText(event.target.value || "")),
5829
+ style: { ...sidebarInputStyle, minHeight: 140, resize: "vertical" },
5830
+ value: extractLexicalText(selectedBlock.content)
5831
+ }
5832
+ )
5833
+ ] }),
5834
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
5835
+ "Content Width",
5836
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
5837
+ "select",
5838
+ {
5839
+ onChange: (event) => updateSelectedField("width", event.target.value),
5840
+ style: sidebarInputStyle,
5841
+ value: normalizeText(selectedBlock.width, "normal"),
5842
+ children: [
5843
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "normal", children: "Normal" }),
5844
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "narrow", children: "Narrow" })
5845
+ ]
5846
+ }
5847
+ )
5848
+ ] })
5804
5849
  ] }) : null,
5805
5850
  selectedType === "formEmbed" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: sidebarLabelStyle, children: [
5806
5851
  "Form Type",
package/dist/studio-pages/client.mjs CHANGED
@@ -3,7 +3,6 @@
3
3
 
4
4
  // src/studio-pages/builder/BuilderPageEditor.tsx
5
5
  import { useEffect, useMemo, useRef, useState } from "react";
6
- import { RichText } from "@payloadcms/richtext-lexical/react";
7
6
 
8
7
  // src/blocks/blocks/sectionStyleFields.ts
9
8
  var sectionStyleDefaults = {
@@ -39,6 +38,7 @@ var defaultNodeData = {
39
38
  title: "Book a Time"
40
39
  },
41
40
  beforeAfter: withSectionStyleDefaults({
41
+ itemsPerRow: 2,
42
42
  items: [
43
43
  {
44
44
  description: "Before and after result summary.",
@@ -2710,6 +2710,8 @@ function BuilderPageEditor({ initialDoc, pageID }) {
2710
2710
  }
2711
2711
  if (type === "beforeAfter") {
2712
2712
  const items = Array.isArray(block.items) ? block.items : [];
2713
+ const itemsPerRowRaw = Math.floor(parsePixelNumber(block.itemsPerRow, 2));
2714
+ const itemsPerRow = Math.max(1, Math.min(4, itemsPerRowRaw));
2713
2715
  return /* @__PURE__ */ jsx(
2714
2716
  BlockFrame,
2715
2717
  {
@@ -2745,87 +2747,99 @@ function BuilderPageEditor({ initialDoc, pageID }) {
2745
2747
  }
2746
2748
  )
2747
2749
  ] }) }),
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
2750
+ /* @__PURE__ */ jsx(
2751
+ "div",
2752
+ {
2753
+ className: "orion-before-after-grid",
2754
+ style: {
2755
+ ["--before-after-grid-template-columns"]: `repeat(${Math.max(
2756
+ 1,
2757
+ Math.min(itemsPerRow, items.length || itemsPerRow)
2758
+ )}, minmax(0, 1fr))`
2759
+ },
2760
+ children: items.map((item, itemIndex) => {
2761
+ const itemRecord = item;
2762
+ const beforeMedia = resolveMedia(itemRecord?.beforeMedia);
2763
+ const afterMedia = resolveMedia(itemRecord?.afterMedia);
2764
+ const imageHeight = parsePixelNumber(itemRecord?.imageHeight, 160);
2765
+ const itemPositionX = parseOptionalPercentNumber(itemRecord?.imagePositionX);
2766
+ const itemPositionY = parseOptionalPercentNumber(itemRecord?.imagePositionY);
2767
+ const imageStyle = getImagePresentationStyle({
2768
+ cornerStyle: normalizeImageCornerStyle(itemRecord?.imageCornerStyle),
2769
+ fit: normalizeImageFit(itemRecord?.imageFit),
2770
+ position: normalizeImagePosition(itemRecord?.imagePosition),
2771
+ positionX: itemPositionX,
2772
+ positionY: itemPositionY
2773
+ });
2774
+ const isItemSelected = selectedIndex === index && selectedItemIndex === itemIndex;
2775
+ return /* @__PURE__ */ jsxs(
2776
+ "article",
2777
+ {
2778
+ className: "orion-before-after-card",
2779
+ onMouseDownCapture: () => {
2780
+ setSelectedIndex(index);
2781
+ openSelectedItem(itemIndex);
2782
+ },
2783
+ style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
2784
+ children: [
2785
+ /* @__PURE__ */ jsxs("div", { className: "orion-before-after-media", children: [
2786
+ /* @__PURE__ */ jsxs("figure", { children: [
2787
+ beforeMedia?.url ? (
2788
+ // eslint-disable-next-line @next/next/no-img-element
2789
+ /* @__PURE__ */ jsx(
2790
+ "img",
2791
+ {
2792
+ alt: beforeMedia.alt || `${normalizeText(itemRecord?.label, "Project")} before`,
2793
+ src: beforeMedia.url,
2794
+ style: { ...imageStyle, height: imageHeight }
2795
+ }
2796
+ )
2797
+ ) : /* @__PURE__ */ jsx("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "Before" }),
2798
+ /* @__PURE__ */ jsx("figcaption", { children: "Before" })
2799
+ ] }),
2800
+ /* @__PURE__ */ jsxs("figure", { children: [
2801
+ afterMedia?.url ? (
2802
+ // eslint-disable-next-line @next/next/no-img-element
2803
+ /* @__PURE__ */ jsx(
2804
+ "img",
2805
+ {
2806
+ alt: afterMedia.alt || `${normalizeText(itemRecord?.label, "Project")} after`,
2807
+ src: afterMedia.url,
2808
+ style: { ...imageStyle, height: imageHeight }
2809
+ }
2810
+ )
2811
+ ) : /* @__PURE__ */ jsx("div", { className: "orion-before-after-placeholder", style: { height: imageHeight }, children: "After" }),
2812
+ /* @__PURE__ */ jsx("figcaption", { children: "After" })
2813
+ ] })
2814
+ ] }),
2815
+ /* @__PURE__ */ jsxs("div", { className: "orion-before-after-body", children: [
2777
2816
  /* @__PURE__ */ jsx(
2778
- "img",
2817
+ InlineText,
2779
2818
  {
2780
- alt: beforeMedia.alt || `${normalizeText(itemRecord?.label, "Project")} before`,
2781
- src: beforeMedia.url,
2782
- style: { ...imageStyle, height: imageHeight }
2819
+ as: "h3",
2820
+ onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "label", value),
2821
+ placeholder: "Project label",
2822
+ value: normalizeText(itemRecord?.label)
2783
2823
  }
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
2824
+ ),
2791
2825
  /* @__PURE__ */ jsx(
2792
- "img",
2826
+ InlineText,
2793
2827
  {
2794
- alt: afterMedia.alt || `${normalizeText(itemRecord?.label, "Project")} after`,
2795
- src: afterMedia.url,
2796
- style: { ...imageStyle, height: imageHeight }
2828
+ as: "p",
2829
+ multiline: true,
2830
+ onCommit: (value) => updateArrayItemField(index, "items", itemIndex, "description", value),
2831
+ placeholder: "Project description",
2832
+ value: normalizeText(itemRecord?.description)
2797
2833
  }
2798
2834
  )
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
- }) })
2835
+ ] })
2836
+ ]
2837
+ },
2838
+ `before-after-${itemIndex}`
2839
+ );
2840
+ })
2841
+ }
2842
+ )
2829
2843
  ] })
2830
2844
  )
2831
2845
  },
@@ -3042,6 +3056,7 @@ function BuilderPageEditor({ initialDoc, pageID }) {
3042
3056
  }
3043
3057
  if (type === "richText") {
3044
3058
  const width = normalizeText(block.width, "normal");
3059
+ const plainTextValue = extractLexicalText(block.content);
3045
3060
  return /* @__PURE__ */ jsx(
3046
3061
  BlockFrame,
3047
3062
  {
@@ -3065,15 +3080,15 @@ function BuilderPageEditor({ initialDoc, pageID }) {
3065
3080
  value: normalizeText(block.title)
3066
3081
  }
3067
3082
  ),
3068
- /* @__PURE__ */ jsx("div", { className: "richtext-content", children: /* @__PURE__ */ jsx(RichText, { data: block.content || {} }) }),
3069
- /* @__PURE__ */ jsx("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ jsx(
3083
+ /* @__PURE__ */ jsx("div", { className: "richtext-content", children: /* @__PURE__ */ jsx(
3070
3084
  InlineText,
3071
3085
  {
3072
3086
  as: "p",
3073
3087
  multiline: true,
3074
3088
  onCommit: (value) => updateBlockField(index, "content", createLexicalText(value)),
3075
3089
  placeholder: "Click to edit rich text in plain text mode",
3076
- value: extractLexicalText(block.content)
3090
+ style: { whiteSpace: "pre-line" },
3091
+ value: plainTextValue
3077
3092
  }
3078
3093
  ) })
3079
3094
  ] })
@@ -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
  {
@@ -5759,20 +5791,33 @@ function BuilderPageEditor({ initialDoc, pageID }) {
5759
5791
  )
5760
5792
  ] })
5761
5793
  ] }) : null,
5762
- selectedType === "richText" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
5763
- "Content Width",
5764
- /* @__PURE__ */ jsxs(
5765
- "select",
5766
- {
5767
- onChange: (event) => updateSelectedField("width", event.target.value),
5768
- style: sidebarInputStyle,
5769
- value: normalizeText(selectedBlock.width, "normal"),
5770
- children: [
5771
- /* @__PURE__ */ jsx("option", { value: "normal", children: "Normal" }),
5772
- /* @__PURE__ */ jsx("option", { value: "narrow", children: "Narrow" })
5773
- ]
5774
- }
5775
- )
5794
+ selectedType === "richText" ? /* @__PURE__ */ jsxs(Fragment, { children: [
5795
+ /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
5796
+ "Content",
5797
+ /* @__PURE__ */ jsx(
5798
+ "textarea",
5799
+ {
5800
+ onChange: (event) => updateSelectedField("content", createLexicalText(event.target.value || "")),
5801
+ style: { ...sidebarInputStyle, minHeight: 140, resize: "vertical" },
5802
+ value: extractLexicalText(selectedBlock.content)
5803
+ }
5804
+ )
5805
+ ] }),
5806
+ /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
5807
+ "Content Width",
5808
+ /* @__PURE__ */ jsxs(
5809
+ "select",
5810
+ {
5811
+ onChange: (event) => updateSelectedField("width", event.target.value),
5812
+ style: sidebarInputStyle,
5813
+ value: normalizeText(selectedBlock.width, "normal"),
5814
+ children: [
5815
+ /* @__PURE__ */ jsx("option", { value: "normal", children: "Normal" }),
5816
+ /* @__PURE__ */ jsx("option", { value: "narrow", children: "Narrow" })
5817
+ ]
5818
+ }
5819
+ )
5820
+ ] })
5776
5821
  ] }) : null,
5777
5822
  selectedType === "formEmbed" ? /* @__PURE__ */ jsxs("label", { style: sidebarLabelStyle, children: [
5778
5823
  "Form Type",
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.45",
3
+ "version": "0.5.0-beta.47",
4
4
  "description": "Unified Payload CMS toolkit for Orion Studios",
5
5
  "types": "./dist/index.d.ts",
6
6
  "main": "./dist/index.js",