@orion-studios/payload-studio 0.5.0-beta.73 → 0.5.0-beta.74

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 (3) hide show
  1. package/dist/studio-pages/client.js +88 -1492
  2. package/dist/studio-pages/client.mjs +88 -1492
  3. package/package.json +1 -1
package/dist/studio-pages/client.js CHANGED
@@ -3899,25 +3899,6 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
3899
3899
  setExpandedItemIndex((current) => current === itemIndex ? null : itemIndex);
3900
3900
  openSidebarPanel("selected");
3901
3901
  };
3902
- const defaultItemFocus = (value, fitValue) => {
3903
- const normalized = normalizeImagePosition2(value);
3904
- const fit = normalizeImageFit2(fitValue);
3905
- if (fit === "cover" && (normalized === "left" || normalized === "right")) {
3906
- return { x: 50, y: 50 };
3907
- }
3908
- switch (normalized) {
3909
- case "top":
3910
- return { x: 50, y: 0 };
3911
- case "bottom":
3912
- return { x: 50, y: 100 };
3913
- case "left":
3914
- return { x: 0, y: 50 };
3915
- case "right":
3916
- return { x: 100, y: 50 };
3917
- default:
3918
- return { x: 50, y: 50 };
3919
- }
3920
- };
3921
3902
  const setSelectedStyleField = (fieldName, value) => {
3922
3903
  updateSelectedField(fieldName, value);
3923
3904
  };
@@ -6770,1299 +6751,24 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
6770
6751
  value: parseColor(selectedBlock.backgroundColor, "#1f684f")
6771
6752
  }
6772
6753
  )
6773
- ] }),
6774
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
6775
- "button",
6776
- {
6777
- onClick: () => appendItemToSelected("items", {
6778
- description: "Describe this feature.",
6779
- iconType: "badge",
6780
- icon: "04",
6781
- imageCornerStyle: "rounded",
6782
- imageFit: "cover",
6783
- imagePosition: "center",
6784
- title: "New Feature"
6785
- }),
6786
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
6787
- type: "button",
6788
- children: "Add Feature Item"
6789
- }
6790
- ),
6791
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
6792
- const isOpen = expandedItemIndex === itemIndex;
6793
- const itemTitle = normalizeText2(item.title, "");
6794
- const label = itemTitle || `Item ${itemIndex + 1}`;
6795
- const imageHeightValue = typeof item.imageHeight === "number" && Number.isFinite(item.imageHeight) ? item.imageHeight : "";
6796
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
6797
- "div",
6798
- {
6799
- style: {
6800
- border: "1px solid rgba(13, 74, 55, 0.16)",
6801
- borderRadius: 10,
6802
- display: "grid",
6803
- gap: 8,
6804
- padding: 8
6805
- },
6806
- children: [
6807
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
6808
- "button",
6809
- {
6810
- onClick: () => toggleSelectedItem(itemIndex),
6811
- style: {
6812
- alignItems: "center",
6813
- background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
6814
- border: "none",
6815
- cursor: "pointer",
6816
- display: "flex",
6817
- fontSize: 12,
6818
- fontWeight: 800,
6819
- gap: 8,
6820
- justifyContent: "space-between",
6821
- padding: "6px 8px",
6822
- textAlign: "left",
6823
- width: "100%"
6824
- },
6825
- type: "button",
6826
- children: [
6827
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
6828
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
6829
- ]
6830
- }
6831
- ),
6832
- isOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
6833
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
6834
- "input",
6835
- {
6836
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "title", event.target.value),
6837
- placeholder: "Title",
6838
- style: sidebarInputStyle,
6839
- type: "text",
6840
- value: normalizeText2(item.title)
6841
- }
6842
- ),
6843
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { ...sidebarLabelStyle, margin: 0 }, children: [
6844
- "Icon Type",
6845
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
6846
- "select",
6847
- {
6848
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "iconType", event.target.value),
6849
- style: sidebarInputStyle,
6850
- value: normalizeText2(item.iconType, "badge"),
6851
- children: [
6852
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "badge", children: "Badge Text" }),
6853
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "lucide", children: "Icon" })
6854
- ]
6855
- }
6856
- )
6857
- ] }),
6858
- normalizeText2(item.iconType, "badge") === "lucide" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { ...sidebarLabelStyle, margin: 0 }, children: [
6859
- "Icon",
6860
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
6861
- "select",
6862
- {
6863
- onChange: (event) => updateArrayItemField(
6864
- selectedIndex ?? 0,
6865
- "items",
6866
- itemIndex,
6867
- "iconLucide",
6868
- event.target.value
6869
- ),
6870
- style: sidebarInputStyle,
6871
- value: normalizeText2(item.iconLucide),
6872
- children: [
6873
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "Select an icon" }),
6874
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "ShieldCheck", children: "Shield Check" }),
6875
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "Clock", children: "Clock" }),
6876
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "Leaf", children: "Leaf" }),
6877
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "DollarSign", children: "Dollar Sign" }),
6878
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "HardHat", children: "Hard Hat" }),
6879
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "Sparkles", children: "Sparkles" }),
6880
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "TreePine", children: "Tree Pine" }),
6881
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "BadgeCheck", children: "Badge Check" }),
6882
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "CalendarClock", children: "Calendar Clock" })
6883
- ]
6884
- }
6885
- )
6886
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
6887
- "input",
6888
- {
6889
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "icon", event.target.value),
6890
- placeholder: "Badge text (e.g. 01)",
6891
- style: sidebarInputStyle,
6892
- type: "text",
6893
- value: normalizeText2(item.icon)
6894
- }
6895
- ),
6896
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
6897
- "textarea",
6898
- {
6899
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
6900
- placeholder: "Description",
6901
- style: { ...sidebarInputStyle, minHeight: 70, resize: "vertical" },
6902
- value: normalizeText2(item.description)
6903
- }
6904
- ),
6905
- (() => {
6906
- const itemMedia = resolveMediaLibraryItemFromValue(item.media);
6907
- const itemMediaID = getRelationID2(item.media);
6908
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
6909
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: itemMedia ? `Selected image: ${mediaLabel2(itemMedia)}` : "No item image selected." }),
6910
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
6911
- "button",
6912
- {
6913
- disabled: !itemMedia && itemMediaID === null,
6914
- onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", ""),
6915
- style: {
6916
- borderRadius: 999,
6917
- cursor: itemMedia || itemMediaID !== null ? "pointer" : "not-allowed",
6918
- fontSize: 12,
6919
- padding: "7px 10px"
6920
- },
6921
- type: "button",
6922
- children: "Remove Item Image"
6923
- }
6924
- ),
6925
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
6926
- "Image Height (px)",
6927
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
6928
- "input",
6929
- {
6930
- max: 600,
6931
- min: 40,
6932
- onChange: (event) => updateArrayItemField(
6933
- selectedIndex ?? 0,
6934
- "items",
6935
- itemIndex,
6936
- "imageHeight",
6937
- event.target.value === "" ? null : Number(event.target.value)
6938
- ),
6939
- placeholder: "120",
6940
- style: sidebarInputStyle,
6941
- type: "number",
6942
- value: imageHeightValue
6943
- }
6944
- )
6945
- ] }),
6946
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
6947
- "Image Fit",
6948
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
6949
- "select",
6950
- {
6951
- onChange: (event) => {
6952
- const nextFit = event.target.value;
6953
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imageFit", nextFit);
6954
- if (nextFit === "cover") {
6955
- const pos = normalizeImagePosition2(item.imagePosition);
6956
- if (pos === "left" || pos === "right") {
6957
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", "center");
6958
- }
6959
- }
6960
- },
6961
- style: sidebarInputStyle,
6962
- value: normalizeImageFit2(item.imageFit),
6963
- children: [
6964
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "cover", children: "Cover" }),
6965
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "contain", children: "Contain" })
6966
- ]
6967
- }
6968
- )
6969
- ] }),
6970
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
6971
- "Image Corners",
6972
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
6973
- "select",
6974
- {
6975
- onChange: (event) => updateArrayItemField(
6976
- selectedIndex ?? 0,
6977
- "items",
6978
- itemIndex,
6979
- "imageCornerStyle",
6980
- event.target.value
6981
- ),
6982
- style: sidebarInputStyle,
6983
- value: normalizeImageCornerStyle2(item.imageCornerStyle),
6984
- children: [
6985
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "rounded", children: "Rounded" }),
6986
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "square", children: "Square" })
6987
- ]
6988
- }
6989
- )
6990
- ] }),
6991
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
6992
- "Image Position",
6993
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
6994
- "select",
6995
- {
6996
- onChange: (event) => {
6997
- const nextPosition = event.target.value;
6998
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", nextPosition);
6999
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
7000
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
7001
- },
7002
- style: sidebarInputStyle,
7003
- value: (() => {
7004
- const fit = normalizeImageFit2(item.imageFit);
7005
- const pos = normalizeImagePosition2(item.imagePosition);
7006
- if (fit === "cover" && (pos === "left" || pos === "right")) {
7007
- return "center";
7008
- }
7009
- return pos;
7010
- })(),
7011
- children: [
7012
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "center", children: "Center" }),
7013
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "top", children: "Top" }),
7014
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "bottom", children: "Bottom" }),
7015
- normalizeImageFit2(item.imageFit) !== "cover" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
7016
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "left", children: "Left" }),
7017
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "right", children: "Right" })
7018
- ] }) : null
7019
- ]
7020
- }
7021
- )
7022
- ] }),
7023
- (() => {
7024
- const fallbackFocus = defaultItemFocus(item.imagePosition, item.imageFit);
7025
- const focusX = parsePercentNumber(item.imagePositionX, fallbackFocus.x);
7026
- const focusY = parsePercentNumber(item.imagePositionY, fallbackFocus.y);
7027
- const hasCustomFocus = typeof item.imagePositionX === "number" || typeof item.imagePositionX === "string" || typeof item.imagePositionY === "number" || typeof item.imagePositionY === "string";
7028
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
7029
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: [
7030
- "Image Focus ",
7031
- hasCustomFocus ? "(custom)" : "(from Image Position)",
7032
- ": ",
7033
- focusX,
7034
- "% /",
7035
- " ",
7036
- focusY,
7037
- "%"
7038
- ] }),
7039
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7040
- "Focus X (%)",
7041
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
7042
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7043
- "input",
7044
- {
7045
- max: 100,
7046
- min: 0,
7047
- onChange: (event) => updateArrayItemField(
7048
- selectedIndex ?? 0,
7049
- "items",
7050
- itemIndex,
7051
- "imagePositionX",
7052
- Number(event.target.value)
7053
- ),
7054
- type: "range",
7055
- value: focusX
7056
- }
7057
- ),
7058
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7059
- "input",
7060
- {
7061
- max: 100,
7062
- min: 0,
7063
- onChange: (event) => updateArrayItemField(
7064
- selectedIndex ?? 0,
7065
- "items",
7066
- itemIndex,
7067
- "imagePositionX",
7068
- event.target.value === "" ? null : Number(event.target.value)
7069
- ),
7070
- style: sidebarInputStyle,
7071
- type: "number",
7072
- value: hasCustomFocus ? typeof item.imagePositionX === "number" ? item.imagePositionX : focusX : focusX
7073
- }
7074
- )
7075
- ] })
7076
- ] }),
7077
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7078
- "Focus Y (%)",
7079
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
7080
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7081
- "input",
7082
- {
7083
- max: 100,
7084
- min: 0,
7085
- onChange: (event) => updateArrayItemField(
7086
- selectedIndex ?? 0,
7087
- "items",
7088
- itemIndex,
7089
- "imagePositionY",
7090
- Number(event.target.value)
7091
- ),
7092
- type: "range",
7093
- value: focusY
7094
- }
7095
- ),
7096
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7097
- "input",
7098
- {
7099
- max: 100,
7100
- min: 0,
7101
- onChange: (event) => updateArrayItemField(
7102
- selectedIndex ?? 0,
7103
- "items",
7104
- itemIndex,
7105
- "imagePositionY",
7106
- event.target.value === "" ? null : Number(event.target.value)
7107
- ),
7108
- style: sidebarInputStyle,
7109
- type: "number",
7110
- value: hasCustomFocus ? typeof item.imagePositionY === "number" ? item.imagePositionY : focusY : focusY
7111
- }
7112
- )
7113
- ] })
7114
- ] }),
7115
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7116
- "button",
7117
- {
7118
- onClick: () => {
7119
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
7120
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
7121
- },
7122
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
7123
- type: "button",
7124
- children: "Reset Image Focus"
7125
- }
7126
- )
7127
- ] });
7128
- })(),
7129
- mediaLibraryLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
7130
- mediaLibraryError ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
7131
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7132
- "Choose from Media Library",
7133
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7134
- "select",
7135
- {
7136
- onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", event.target.value),
7137
- style: sidebarInputStyle,
7138
- value: itemMediaID !== null ? String(itemMediaID) : "",
7139
- children: [
7140
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "No image" }),
7141
- mediaLibrary.map((libraryItem) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: String(libraryItem.id), children: mediaLabel2(libraryItem) }, String(libraryItem.id)))
7142
- ]
7143
- }
7144
- )
7145
- ] })
7146
- ] });
7147
- })(),
7148
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7149
- "Upload Item Image",
7150
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7151
- "input",
7152
- {
7153
- accept: "image/*",
7154
- disabled: uploadingTarget !== null,
7155
- onChange: (event) => {
7156
- const file = event.currentTarget.files?.[0];
7157
- if (file) {
7158
- void uploadMediaForSelected({ field: "media", itemIndex, kind: "featureGridItem" }, file);
7159
- }
7160
- event.currentTarget.value = "";
7161
- },
7162
- style: sidebarInputStyle,
7163
- type: "file"
7164
- }
7165
- )
7166
- ] }),
7167
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7168
- "button",
7169
- {
7170
- onClick: () => removeItemFromSelected("items", itemIndex),
7171
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
7172
- type: "button",
7173
- children: "Remove Item"
7174
- }
7175
- )
7176
- ] }) : null
7177
- ]
7178
- },
7179
- `feature-item-control-${itemIndex}`
7180
- );
7181
- }) })
7182
- ] }) : null,
7183
- selectedType === "stats" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
7184
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7185
- "button",
7186
- {
7187
- onClick: () => appendItemToSelected("items", {
7188
- description: "Add context for this metric.",
7189
- label: "Metric",
7190
- value: "00"
7191
- }),
7192
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
7193
- type: "button",
7194
- children: "Add Stat"
7195
- }
7196
- ),
7197
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
7198
- const isOpen = expandedItemIndex === itemIndex;
7199
- const label = normalizeText2(item.label, "") || `Stat ${itemIndex + 1}`;
7200
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7201
- "div",
7202
- {
7203
- style: {
7204
- border: "1px solid rgba(13, 74, 55, 0.16)",
7205
- borderRadius: 10,
7206
- display: "grid",
7207
- gap: 8,
7208
- padding: 8
7209
- },
7210
- children: [
7211
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7212
- "button",
7213
- {
7214
- onClick: () => toggleSelectedItem(itemIndex),
7215
- style: {
7216
- alignItems: "center",
7217
- background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
7218
- border: "none",
7219
- cursor: "pointer",
7220
- display: "flex",
7221
- fontSize: 12,
7222
- fontWeight: 800,
7223
- gap: 8,
7224
- justifyContent: "space-between",
7225
- padding: "6px 8px",
7226
- textAlign: "left",
7227
- width: "100%"
7228
- },
7229
- type: "button",
7230
- children: [
7231
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
7232
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
7233
- ]
7234
- }
7235
- ),
7236
- isOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
7237
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7238
- "input",
7239
- {
7240
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "value", event.target.value),
7241
- placeholder: "Value",
7242
- style: sidebarInputStyle,
7243
- type: "text",
7244
- value: normalizeText2(item.value)
7245
- }
7246
- ),
7247
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7248
- "input",
7249
- {
7250
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "label", event.target.value),
7251
- placeholder: "Label",
7252
- style: sidebarInputStyle,
7253
- type: "text",
7254
- value: normalizeText2(item.label)
7255
- }
7256
- ),
7257
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7258
- "input",
7259
- {
7260
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
7261
- placeholder: "Description",
7262
- style: sidebarInputStyle,
7263
- type: "text",
7264
- value: normalizeText2(item.description)
7265
- }
7266
- ),
7267
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7268
- "button",
7269
- {
7270
- onClick: () => removeItemFromSelected("items", itemIndex),
7271
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
7272
- type: "button",
7273
- children: "Remove Item"
7274
- }
7275
- )
7276
- ] }) : null
7277
- ]
7278
- },
7279
- `stats-item-control-${itemIndex}`
7280
- );
7281
- }) })
7282
- ] }) : null,
7283
- selectedType === "logoWall" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
7284
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7285
- "button",
7286
- {
7287
- onClick: () => appendItemToSelected("items", {
7288
- href: "",
7289
- imageCornerStyle: "rounded",
7290
- imageFit: "contain",
7291
- imagePosition: "center",
7292
- name: "Partner"
7293
- }),
7294
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
7295
- type: "button",
7296
- children: "Add Logo"
7297
- }
7298
- ),
7299
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
7300
- const isOpen = expandedItemIndex === itemIndex;
7301
- const label = normalizeText2(item.name, "") || `Logo ${itemIndex + 1}`;
7302
- const imageHeightValue = typeof item.imageHeight === "number" && Number.isFinite(item.imageHeight) ? item.imageHeight : "";
7303
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7304
- "div",
7305
- {
7306
- style: {
7307
- border: "1px solid rgba(13, 74, 55, 0.16)",
7308
- borderRadius: 10,
7309
- display: "grid",
7310
- gap: 8,
7311
- padding: 8
7312
- },
7313
- children: [
7314
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7315
- "button",
7316
- {
7317
- onClick: () => toggleSelectedItem(itemIndex),
7318
- style: {
7319
- alignItems: "center",
7320
- background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
7321
- border: "none",
7322
- cursor: "pointer",
7323
- display: "flex",
7324
- fontSize: 12,
7325
- fontWeight: 800,
7326
- gap: 8,
7327
- justifyContent: "space-between",
7328
- padding: "6px 8px",
7329
- textAlign: "left",
7330
- width: "100%"
7331
- },
7332
- type: "button",
7333
- children: [
7334
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
7335
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
7336
- ]
7337
- }
7338
- ),
7339
- isOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
7340
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7341
- "input",
7342
- {
7343
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "name", event.target.value),
7344
- placeholder: "Partner Name",
7345
- style: sidebarInputStyle,
7346
- type: "text",
7347
- value: normalizeText2(item.name)
7348
- }
7349
- ),
7350
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7351
- "input",
7352
- {
7353
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "href", event.target.value),
7354
- placeholder: "https://example.com",
7355
- style: sidebarInputStyle,
7356
- type: "text",
7357
- value: normalizeText2(item.href)
7358
- }
7359
- ),
7360
- (() => {
7361
- const logoMedia = resolveMediaLibraryItemFromValue(item.media);
7362
- const logoMediaID = getRelationID2(item.media);
7363
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
7364
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: logoMedia ? `Selected logo: ${mediaLabel2(logoMedia)}` : "No logo image selected." }),
7365
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7366
- "button",
7367
- {
7368
- disabled: !logoMedia && logoMediaID === null,
7369
- onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", ""),
7370
- style: {
7371
- borderRadius: 999,
7372
- cursor: logoMedia || logoMediaID !== null ? "pointer" : "not-allowed",
7373
- fontSize: 12,
7374
- padding: "7px 10px"
7375
- },
7376
- type: "button",
7377
- children: "Remove Logo Image"
7378
- }
7379
- ),
7380
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7381
- "Image Height (px)",
7382
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7383
- "input",
7384
- {
7385
- max: 200,
7386
- min: 24,
7387
- onChange: (event) => updateArrayItemField(
7388
- selectedIndex ?? 0,
7389
- "items",
7390
- itemIndex,
7391
- "imageHeight",
7392
- event.target.value === "" ? null : Number(event.target.value)
7393
- ),
7394
- placeholder: "54",
7395
- style: sidebarInputStyle,
7396
- type: "number",
7397
- value: imageHeightValue
7398
- }
7399
- )
7400
- ] }),
7401
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7402
- "Image Fit",
7403
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7404
- "select",
7405
- {
7406
- onChange: (event) => {
7407
- const nextFit = event.target.value;
7408
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imageFit", nextFit);
7409
- if (nextFit === "cover") {
7410
- const pos = normalizeImagePosition2(item.imagePosition);
7411
- if (pos === "left" || pos === "right") {
7412
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", "center");
7413
- }
7414
- }
7415
- },
7416
- style: sidebarInputStyle,
7417
- value: normalizeImageFit2(item.imageFit),
7418
- children: [
7419
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "cover", children: "Cover" }),
7420
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "contain", children: "Contain" })
7421
- ]
7422
- }
7423
- )
7424
- ] }),
7425
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7426
- "Image Corners",
7427
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7428
- "select",
7429
- {
7430
- onChange: (event) => updateArrayItemField(
7431
- selectedIndex ?? 0,
7432
- "items",
7433
- itemIndex,
7434
- "imageCornerStyle",
7435
- event.target.value
7436
- ),
7437
- style: sidebarInputStyle,
7438
- value: normalizeImageCornerStyle2(item.imageCornerStyle),
7439
- children: [
7440
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "rounded", children: "Rounded" }),
7441
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "square", children: "Square" })
7442
- ]
7443
- }
7444
- )
7445
- ] }),
7446
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7447
- "Image Position",
7448
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7449
- "select",
7450
- {
7451
- onChange: (event) => {
7452
- const nextPosition = event.target.value;
7453
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", nextPosition);
7454
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
7455
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
7456
- },
7457
- style: sidebarInputStyle,
7458
- value: (() => {
7459
- const fit = normalizeImageFit2(item.imageFit);
7460
- const pos = normalizeImagePosition2(item.imagePosition);
7461
- if (fit === "cover" && (pos === "left" || pos === "right")) {
7462
- return "center";
7463
- }
7464
- return pos;
7465
- })(),
7466
- children: [
7467
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "center", children: "Center" }),
7468
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "top", children: "Top" }),
7469
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "bottom", children: "Bottom" }),
7470
- normalizeImageFit2(item.imageFit) !== "cover" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
7471
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "left", children: "Left" }),
7472
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "right", children: "Right" })
7473
- ] }) : null
7474
- ]
7475
- }
7476
- )
7477
- ] }),
7478
- (() => {
7479
- const fallbackFocus = defaultItemFocus(item.imagePosition, item.imageFit);
7480
- const focusX = parsePercentNumber(item.imagePositionX, fallbackFocus.x);
7481
- const focusY = parsePercentNumber(item.imagePositionY, fallbackFocus.y);
7482
- const hasCustomFocus = typeof item.imagePositionX === "number" || typeof item.imagePositionX === "string" || typeof item.imagePositionY === "number" || typeof item.imagePositionY === "string";
7483
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
7484
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: [
7485
- "Image Focus ",
7486
- hasCustomFocus ? "(custom)" : "(from Image Position)",
7487
- ": ",
7488
- focusX,
7489
- "% /",
7490
- " ",
7491
- focusY,
7492
- "%"
7493
- ] }),
7494
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7495
- "Focus X (%)",
7496
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
7497
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7498
- "input",
7499
- {
7500
- max: 100,
7501
- min: 0,
7502
- onChange: (event) => updateArrayItemField(
7503
- selectedIndex ?? 0,
7504
- "items",
7505
- itemIndex,
7506
- "imagePositionX",
7507
- Number(event.target.value)
7508
- ),
7509
- type: "range",
7510
- value: focusX
7511
- }
7512
- ),
7513
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7514
- "input",
7515
- {
7516
- max: 100,
7517
- min: 0,
7518
- onChange: (event) => updateArrayItemField(
7519
- selectedIndex ?? 0,
7520
- "items",
7521
- itemIndex,
7522
- "imagePositionX",
7523
- event.target.value === "" ? null : Number(event.target.value)
7524
- ),
7525
- style: sidebarInputStyle,
7526
- type: "number",
7527
- value: hasCustomFocus ? typeof item.imagePositionX === "number" ? item.imagePositionX : focusX : focusX
7528
- }
7529
- )
7530
- ] })
7531
- ] }),
7532
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7533
- "Focus Y (%)",
7534
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
7535
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7536
- "input",
7537
- {
7538
- max: 100,
7539
- min: 0,
7540
- onChange: (event) => updateArrayItemField(
7541
- selectedIndex ?? 0,
7542
- "items",
7543
- itemIndex,
7544
- "imagePositionY",
7545
- Number(event.target.value)
7546
- ),
7547
- type: "range",
7548
- value: focusY
7549
- }
7550
- ),
7551
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7552
- "input",
7553
- {
7554
- max: 100,
7555
- min: 0,
7556
- onChange: (event) => updateArrayItemField(
7557
- selectedIndex ?? 0,
7558
- "items",
7559
- itemIndex,
7560
- "imagePositionY",
7561
- event.target.value === "" ? null : Number(event.target.value)
7562
- ),
7563
- style: sidebarInputStyle,
7564
- type: "number",
7565
- value: hasCustomFocus ? typeof item.imagePositionY === "number" ? item.imagePositionY : focusY : focusY
7566
- }
7567
- )
7568
- ] })
7569
- ] }),
7570
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7571
- "button",
7572
- {
7573
- onClick: () => {
7574
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
7575
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
7576
- },
7577
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
7578
- type: "button",
7579
- children: "Reset Image Focus"
7580
- }
7581
- )
7582
- ] });
7583
- })(),
7584
- mediaLibraryLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
7585
- mediaLibraryError ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
7586
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7587
- "Choose from Media Library",
7588
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7589
- "select",
7590
- {
7591
- onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "media", event.target.value),
7592
- style: sidebarInputStyle,
7593
- value: logoMediaID !== null ? String(logoMediaID) : "",
7594
- children: [
7595
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "No image" }),
7596
- mediaLibrary.map((libraryItem) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: String(libraryItem.id), children: mediaLabel2(libraryItem) }, String(libraryItem.id)))
7597
- ]
7598
- }
7599
- )
7600
- ] })
7601
- ] });
7602
- })(),
7603
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7604
- "Upload Logo Image",
7605
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7606
- "input",
7607
- {
7608
- accept: "image/*",
7609
- disabled: uploadingTarget !== null,
7610
- onChange: (event) => {
7611
- const file = event.currentTarget.files?.[0];
7612
- if (file) {
7613
- void uploadMediaForSelected({ field: "media", itemIndex, kind: "logoWallItem" }, file);
7614
- }
7615
- event.currentTarget.value = "";
7616
- },
7617
- style: sidebarInputStyle,
7618
- type: "file"
7619
- }
7620
- )
7621
- ] }),
7622
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7623
- "button",
7624
- {
7625
- onClick: () => removeItemFromSelected("items", itemIndex),
7626
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
7627
- type: "button",
7628
- children: "Remove Item"
7629
- }
7630
- )
7631
- ] }) : null
7632
- ]
7633
- },
7634
- `logo-item-control-${itemIndex}`
7635
- );
7636
- }) })
6754
+ ] })
7637
6755
  ] }) : null,
7638
- selectedType === "beforeAfter" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
7639
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7640
- "Items Per Row (Desktop)",
7641
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7642
- "select",
7643
- {
7644
- onChange: (event) => updateSelectedField("itemsPerRow", Number(event.target.value)),
7645
- style: sidebarInputStyle,
7646
- value: Math.max(1, Math.min(4, Math.floor(parsePixelNumber(selectedBlock.itemsPerRow, 2)))),
7647
- children: [
7648
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 1, children: "1" }),
7649
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 2, children: "2" }),
7650
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 3, children: "3" }),
7651
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 4, children: "4" })
7652
- ]
7653
- }
7654
- )
7655
- ] }),
7656
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7657
- "button",
6756
+ selectedType === "beforeAfter" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
6757
+ "Items Per Row (Desktop)",
6758
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
6759
+ "select",
7658
6760
  {
7659
- onClick: () => appendItemToSelected("items", {
7660
- description: "Describe the outcome.",
7661
- imageCornerStyle: "rounded",
7662
- imageFit: "cover",
7663
- imagePosition: "center",
7664
- label: "Project"
7665
- }),
7666
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
7667
- type: "button",
7668
- children: "Add Before/After Pair"
6761
+ onChange: (event) => updateSelectedField("itemsPerRow", Number(event.target.value)),
6762
+ style: sidebarInputStyle,
6763
+ value: Math.max(1, Math.min(4, Math.floor(parsePixelNumber(selectedBlock.itemsPerRow, 2)))),
6764
+ children: [
6765
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 1, children: "1" }),
6766
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 2, children: "2" }),
6767
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 3, children: "3" }),
6768
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 4, children: "4" })
6769
+ ]
7669
6770
  }
7670
- ),
7671
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
7672
- const isOpen = expandedItemIndex === itemIndex;
7673
- const label = normalizeText2(item.label, "") || `Pair ${itemIndex + 1}`;
7674
- const imageHeightValue = typeof item.imageHeight === "number" && Number.isFinite(item.imageHeight) ? item.imageHeight : "";
7675
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7676
- "div",
7677
- {
7678
- style: {
7679
- border: "1px solid rgba(13, 74, 55, 0.16)",
7680
- borderRadius: 10,
7681
- display: "grid",
7682
- gap: 8,
7683
- padding: 8
7684
- },
7685
- children: [
7686
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7687
- "button",
7688
- {
7689
- onClick: () => toggleSelectedItem(itemIndex),
7690
- style: {
7691
- alignItems: "center",
7692
- background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
7693
- border: "none",
7694
- cursor: "pointer",
7695
- display: "flex",
7696
- fontSize: 12,
7697
- fontWeight: 800,
7698
- gap: 8,
7699
- justifyContent: "space-between",
7700
- padding: "6px 8px",
7701
- textAlign: "left",
7702
- width: "100%"
7703
- },
7704
- type: "button",
7705
- children: [
7706
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
7707
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
7708
- ]
7709
- }
7710
- ),
7711
- isOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
7712
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7713
- "input",
7714
- {
7715
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "label", event.target.value),
7716
- placeholder: "Project Label",
7717
- style: sidebarInputStyle,
7718
- type: "text",
7719
- value: normalizeText2(item.label)
7720
- }
7721
- ),
7722
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7723
- "textarea",
7724
- {
7725
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "description", event.target.value),
7726
- placeholder: "Description",
7727
- style: { ...sidebarInputStyle, minHeight: 70, resize: "vertical" },
7728
- value: normalizeText2(item.description)
7729
- }
7730
- ),
7731
- (() => {
7732
- const beforeMedia = resolveMediaLibraryItemFromValue(item.beforeMedia);
7733
- const beforeMediaID = getRelationID2(item.beforeMedia);
7734
- const afterMedia = resolveMediaLibraryItemFromValue(item.afterMedia);
7735
- const afterMediaID = getRelationID2(item.afterMedia);
7736
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
7737
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: beforeMedia ? `Before image: ${mediaLabel2(beforeMedia)}` : "No before image selected." }),
7738
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7739
- "button",
7740
- {
7741
- disabled: !beforeMedia && beforeMediaID === null,
7742
- onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "beforeMedia", ""),
7743
- style: {
7744
- borderRadius: 999,
7745
- cursor: beforeMedia || beforeMediaID !== null ? "pointer" : "not-allowed",
7746
- fontSize: 12,
7747
- padding: "7px 10px"
7748
- },
7749
- type: "button",
7750
- children: "Remove Before Image"
7751
- }
7752
- ),
7753
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: afterMedia ? `After image: ${mediaLabel2(afterMedia)}` : "No after image selected." }),
7754
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7755
- "button",
7756
- {
7757
- disabled: !afterMedia && afterMediaID === null,
7758
- onClick: () => setSelectedItemMediaFieldFromLibrary(itemIndex, "afterMedia", ""),
7759
- style: {
7760
- borderRadius: 999,
7761
- cursor: afterMedia || afterMediaID !== null ? "pointer" : "not-allowed",
7762
- fontSize: 12,
7763
- padding: "7px 10px"
7764
- },
7765
- type: "button",
7766
- children: "Remove After Image"
7767
- }
7768
- ),
7769
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7770
- "Image Height (px)",
7771
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7772
- "input",
7773
- {
7774
- max: 600,
7775
- min: 60,
7776
- onChange: (event) => updateArrayItemField(
7777
- selectedIndex ?? 0,
7778
- "items",
7779
- itemIndex,
7780
- "imageHeight",
7781
- event.target.value === "" ? null : Number(event.target.value)
7782
- ),
7783
- placeholder: "160",
7784
- style: sidebarInputStyle,
7785
- type: "number",
7786
- value: imageHeightValue
7787
- }
7788
- )
7789
- ] }),
7790
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7791
- "Image Fit",
7792
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7793
- "select",
7794
- {
7795
- onChange: (event) => {
7796
- const nextFit = event.target.value;
7797
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imageFit", nextFit);
7798
- if (nextFit === "cover") {
7799
- const pos = normalizeImagePosition2(item.imagePosition);
7800
- if (pos === "left" || pos === "right") {
7801
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", "center");
7802
- }
7803
- }
7804
- },
7805
- style: sidebarInputStyle,
7806
- value: normalizeImageFit2(item.imageFit),
7807
- children: [
7808
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "cover", children: "Cover" }),
7809
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "contain", children: "Contain" })
7810
- ]
7811
- }
7812
- )
7813
- ] }),
7814
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7815
- "Image Corners",
7816
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7817
- "select",
7818
- {
7819
- onChange: (event) => updateArrayItemField(
7820
- selectedIndex ?? 0,
7821
- "items",
7822
- itemIndex,
7823
- "imageCornerStyle",
7824
- event.target.value
7825
- ),
7826
- style: sidebarInputStyle,
7827
- value: normalizeImageCornerStyle2(item.imageCornerStyle),
7828
- children: [
7829
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "rounded", children: "Rounded" }),
7830
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "square", children: "Square" })
7831
- ]
7832
- }
7833
- )
7834
- ] }),
7835
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7836
- "Image Position",
7837
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7838
- "select",
7839
- {
7840
- onChange: (event) => {
7841
- const nextPosition = event.target.value;
7842
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePosition", nextPosition);
7843
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
7844
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
7845
- },
7846
- style: sidebarInputStyle,
7847
- value: (() => {
7848
- const fit = normalizeImageFit2(item.imageFit);
7849
- const pos = normalizeImagePosition2(item.imagePosition);
7850
- if (fit === "cover" && (pos === "left" || pos === "right")) {
7851
- return "center";
7852
- }
7853
- return pos;
7854
- })(),
7855
- children: [
7856
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "center", children: "Center" }),
7857
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "top", children: "Top" }),
7858
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "bottom", children: "Bottom" }),
7859
- normalizeImageFit2(item.imageFit) !== "cover" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
7860
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "left", children: "Left" }),
7861
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "right", children: "Right" })
7862
- ] }) : null
7863
- ]
7864
- }
7865
- )
7866
- ] }),
7867
- (() => {
7868
- const fallbackFocus = defaultItemFocus(item.imagePosition, item.imageFit);
7869
- const focusX = parsePercentNumber(item.imagePositionX, fallbackFocus.x);
7870
- const focusY = parsePercentNumber(item.imagePositionY, fallbackFocus.y);
7871
- const hasCustomFocus = typeof item.imagePositionX === "number" || typeof item.imagePositionX === "string" || typeof item.imagePositionY === "number" || typeof item.imagePositionY === "string";
7872
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
7873
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: [
7874
- "Image Focus ",
7875
- hasCustomFocus ? "(custom)" : "(from Image Position)",
7876
- ": ",
7877
- focusX,
7878
- "% /",
7879
- " ",
7880
- focusY,
7881
- "%"
7882
- ] }),
7883
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7884
- "Focus X (%)",
7885
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
7886
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7887
- "input",
7888
- {
7889
- max: 100,
7890
- min: 0,
7891
- onChange: (event) => updateArrayItemField(
7892
- selectedIndex ?? 0,
7893
- "items",
7894
- itemIndex,
7895
- "imagePositionX",
7896
- Number(event.target.value)
7897
- ),
7898
- type: "range",
7899
- value: focusX
7900
- }
7901
- ),
7902
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7903
- "input",
7904
- {
7905
- max: 100,
7906
- min: 0,
7907
- onChange: (event) => updateArrayItemField(
7908
- selectedIndex ?? 0,
7909
- "items",
7910
- itemIndex,
7911
- "imagePositionX",
7912
- event.target.value === "" ? null : Number(event.target.value)
7913
- ),
7914
- style: sidebarInputStyle,
7915
- type: "number",
7916
- value: hasCustomFocus ? typeof item.imagePositionX === "number" ? item.imagePositionX : focusX : focusX
7917
- }
7918
- )
7919
- ] })
7920
- ] }),
7921
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7922
- "Focus Y (%)",
7923
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 80px" }, children: [
7924
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7925
- "input",
7926
- {
7927
- max: 100,
7928
- min: 0,
7929
- onChange: (event) => updateArrayItemField(
7930
- selectedIndex ?? 0,
7931
- "items",
7932
- itemIndex,
7933
- "imagePositionY",
7934
- Number(event.target.value)
7935
- ),
7936
- type: "range",
7937
- value: focusY
7938
- }
7939
- ),
7940
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7941
- "input",
7942
- {
7943
- max: 100,
7944
- min: 0,
7945
- onChange: (event) => updateArrayItemField(
7946
- selectedIndex ?? 0,
7947
- "items",
7948
- itemIndex,
7949
- "imagePositionY",
7950
- event.target.value === "" ? null : Number(event.target.value)
7951
- ),
7952
- style: sidebarInputStyle,
7953
- type: "number",
7954
- value: hasCustomFocus ? typeof item.imagePositionY === "number" ? item.imagePositionY : focusY : focusY
7955
- }
7956
- )
7957
- ] })
7958
- ] }),
7959
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7960
- "button",
7961
- {
7962
- onClick: () => {
7963
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionX", null);
7964
- updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "imagePositionY", null);
7965
- },
7966
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
7967
- type: "button",
7968
- children: "Reset Image Focus"
7969
- }
7970
- )
7971
- ] });
7972
- })(),
7973
- mediaLibraryLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
7974
- mediaLibraryError ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
7975
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7976
- "Choose Before Image",
7977
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
7978
- "select",
7979
- {
7980
- onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "beforeMedia", event.target.value),
7981
- style: sidebarInputStyle,
7982
- value: beforeMediaID !== null ? String(beforeMediaID) : "",
7983
- children: [
7984
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "No image" }),
7985
- mediaLibrary.map((libraryItem) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: String(libraryItem.id), children: mediaLabel2(libraryItem) }, String(libraryItem.id)))
7986
- ]
7987
- }
7988
- )
7989
- ] }),
7990
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7991
- "Upload Before Image",
7992
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7993
- "input",
7994
- {
7995
- accept: "image/*",
7996
- disabled: uploadingTarget !== null,
7997
- onChange: (event) => {
7998
- const file = event.currentTarget.files?.[0];
7999
- if (file) {
8000
- void uploadMediaForSelected(
8001
- { field: "beforeMedia", itemIndex, kind: "beforeAfterItem" },
8002
- file
8003
- );
8004
- }
8005
- event.currentTarget.value = "";
8006
- },
8007
- style: sidebarInputStyle,
8008
- type: "file"
8009
- }
8010
- )
8011
- ] }),
8012
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
8013
- "Choose After Image",
8014
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
8015
- "select",
8016
- {
8017
- onChange: (event) => setSelectedItemMediaFieldFromLibrary(itemIndex, "afterMedia", event.target.value),
8018
- style: sidebarInputStyle,
8019
- value: afterMediaID !== null ? String(afterMediaID) : "",
8020
- children: [
8021
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "No image" }),
8022
- mediaLibrary.map((libraryItem) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: String(libraryItem.id), children: mediaLabel2(libraryItem) }, String(libraryItem.id)))
8023
- ]
8024
- }
8025
- )
8026
- ] }),
8027
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
8028
- "Upload After Image",
8029
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8030
- "input",
8031
- {
8032
- accept: "image/*",
8033
- disabled: uploadingTarget !== null,
8034
- onChange: (event) => {
8035
- const file = event.currentTarget.files?.[0];
8036
- if (file) {
8037
- void uploadMediaForSelected(
8038
- { field: "afterMedia", itemIndex, kind: "beforeAfterItem" },
8039
- file
8040
- );
8041
- }
8042
- event.currentTarget.value = "";
8043
- },
8044
- style: sidebarInputStyle,
8045
- type: "file"
8046
- }
8047
- )
8048
- ] })
8049
- ] });
8050
- })(),
8051
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8052
- "button",
8053
- {
8054
- onClick: () => removeItemFromSelected("items", itemIndex),
8055
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
8056
- type: "button",
8057
- children: "Remove Item"
8058
- }
8059
- )
8060
- ] }) : null
8061
- ]
8062
- },
8063
- `before-after-item-control-${itemIndex}`
8064
- );
8065
- }) })
6771
+ )
8066
6772
  ] }) : null,
8067
6773
  selectedType === "cta" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
8068
6774
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
@@ -8256,191 +6962,81 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
8256
6962
  }
8257
6963
  )
8258
6964
  ] }) : null,
8259
- selectedType === "faq" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8260
- "button",
6965
+ selectedType === "testimonials" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: (() => {
6966
+ const visibleCountValue = Math.max(
6967
+ 1,
6968
+ Math.min(6, Math.floor(parsePixelNumber(selectedBlock.visibleCount, 3)))
6969
+ );
6970
+ const rotateIntervalValue = Math.max(
6971
+ 2,
6972
+ Math.min(30, Math.floor(parsePixelNumber(selectedBlock.rotateIntervalSeconds, 7)))
6973
+ );
6974
+ const autoRotateValue = typeof selectedBlock.autoRotate === "boolean" ? selectedBlock.autoRotate : true;
6975
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
6976
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
6977
+ "Visible At Once",
6978
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
6979
+ "input",
6980
+ {
6981
+ max: 6,
6982
+ min: 1,
6983
+ onChange: (event) => updateSelectedField("visibleCount", Number(event.target.value)),
6984
+ style: sidebarInputStyle,
6985
+ type: "number",
6986
+ value: visibleCountValue
6987
+ }
6988
+ )
6989
+ ] }),
6990
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { ...sidebarLabelStyle, alignItems: "center", gridTemplateColumns: "auto 1fr" }, children: [
6991
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
6992
+ "input",
6993
+ {
6994
+ checked: autoRotateValue,
6995
+ onChange: (event) => updateSelectedField("autoRotate", event.target.checked),
6996
+ type: "checkbox"
6997
+ }
6998
+ ),
6999
+ "Auto Rotate"
7000
+ ] }),
7001
+ autoRotateValue ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
7002
+ "Rotate Interval (seconds)",
7003
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7004
+ "input",
7005
+ {
7006
+ max: 30,
7007
+ min: 2,
7008
+ onChange: (event) => updateSelectedField("rotateIntervalSeconds", Number(event.target.value)),
7009
+ style: sidebarInputStyle,
7010
+ type: "number",
7011
+ value: rotateIntervalValue
7012
+ }
7013
+ )
7014
+ ] }) : null
7015
+ ] });
7016
+ })() }) : null,
7017
+ isArrayItemBlockSelected ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
7018
+ ArrayItemsEditor,
8261
7019
  {
8262
- onClick: () => appendItemToSelected("items", {
8263
- answer: "Answer this question here.",
8264
- question: "New frequently asked question?"
8265
- }),
8266
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
8267
- type: "button",
8268
- children: "Add FAQ Item"
7020
+ blockType: selectedType,
7021
+ expandedItemIndex,
7022
+ isUploadingItemMedia: isSelectedItemMediaUploading,
7023
+ items: selectedItems,
7024
+ mediaLibrary,
7025
+ mediaLibraryError,
7026
+ mediaLibraryLoading,
7027
+ mode: "advanced",
7028
+ onAddItem: appendDefaultItemToSelected,
7029
+ onRemoveItem: (itemIndex) => removeItemFromSelected("items", itemIndex),
7030
+ onSetItemMediaFromLibrary: setSelectedItemMediaFieldFromLibrary,
7031
+ onToggleItem: toggleSelectedItem,
7032
+ onUpdateItemField: (itemIndex, fieldName, value) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, fieldName, value),
7033
+ onUpdateItemSetting: (itemIndex, path, value) => updateArrayItemSettingField(selectedIndex ?? 0, "items", itemIndex, path, value),
7034
+ onUploadItemMedia: uploadItemMediaFromV2,
7035
+ searchQuery: "",
7036
+ showInlineCopyFields: true,
7037
+ uploadDisabled: uploadingTarget !== null
8269
7038
  }
8270
- ) : null,
8271
- selectedType === "testimonials" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
8272
- (() => {
8273
- const visibleCountValue = Math.max(
8274
- 1,
8275
- Math.min(6, Math.floor(parsePixelNumber(selectedBlock.visibleCount, 3)))
8276
- );
8277
- const rotateIntervalValue = Math.max(
8278
- 2,
8279
- Math.min(30, Math.floor(parsePixelNumber(selectedBlock.rotateIntervalSeconds, 7)))
8280
- );
8281
- const autoRotateValue = typeof selectedBlock.autoRotate === "boolean" ? selectedBlock.autoRotate : true;
8282
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
8283
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
8284
- "Visible At Once",
8285
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8286
- "input",
8287
- {
8288
- max: 6,
8289
- min: 1,
8290
- onChange: (event) => updateSelectedField("visibleCount", Number(event.target.value)),
8291
- style: sidebarInputStyle,
8292
- type: "number",
8293
- value: visibleCountValue
8294
- }
8295
- )
8296
- ] }),
8297
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { ...sidebarLabelStyle, alignItems: "center", gridTemplateColumns: "auto 1fr" }, children: [
8298
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8299
- "input",
8300
- {
8301
- checked: autoRotateValue,
8302
- onChange: (event) => updateSelectedField("autoRotate", event.target.checked),
8303
- type: "checkbox"
8304
- }
8305
- ),
8306
- "Auto Rotate"
8307
- ] }),
8308
- autoRotateValue ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
8309
- "Rotate Interval (seconds)",
8310
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8311
- "input",
8312
- {
8313
- max: 30,
8314
- min: 2,
8315
- onChange: (event) => updateSelectedField("rotateIntervalSeconds", Number(event.target.value)),
8316
- style: sidebarInputStyle,
8317
- type: "number",
8318
- value: rotateIntervalValue
8319
- }
8320
- )
8321
- ] }) : null
8322
- ] });
8323
- })(),
8324
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8325
- "button",
8326
- {
8327
- onClick: () => appendItemToSelected("items", {
8328
- location: "City, ST",
8329
- name: "Customer Name",
8330
- quote: "Add testimonial text.",
8331
- rating: 5
8332
- }),
8333
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
8334
- type: "button",
8335
- children: "Add Testimonial"
8336
- }
8337
- ),
8338
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "grid", gap: 8 }, children: selectedItems.map((item, itemIndex) => {
8339
- const isOpen = expandedItemIndex === itemIndex;
8340
- const label = normalizeText2(item.name, "") || `Testimonial ${itemIndex + 1}`;
8341
- const ratingValue = parseTestimonialRating(item.rating, 5);
8342
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
8343
- "div",
8344
- {
8345
- style: {
8346
- border: "1px solid rgba(13, 74, 55, 0.16)",
8347
- borderRadius: 10,
8348
- display: "grid",
8349
- gap: 8,
8350
- padding: 8
8351
- },
8352
- children: [
8353
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
8354
- "button",
8355
- {
8356
- onClick: () => toggleSelectedItem(itemIndex),
8357
- style: {
8358
- alignItems: "center",
8359
- background: isOpen ? "rgba(18, 74, 55, 0.06)" : "transparent",
8360
- border: "none",
8361
- cursor: "pointer",
8362
- display: "flex",
8363
- fontSize: 12,
8364
- fontWeight: 800,
8365
- gap: 8,
8366
- justifyContent: "space-between",
8367
- padding: "6px 8px",
8368
- textAlign: "left",
8369
- width: "100%"
8370
- },
8371
- type: "button",
8372
- children: [
8373
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
8374
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "var(--ink-700)", fontSize: 11 }, children: isOpen ? "Hide" : "Show" })
8375
- ]
8376
- }
8377
- ),
8378
- isOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
8379
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8380
- "textarea",
8381
- {
8382
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "quote", event.target.value),
8383
- placeholder: "Customer quote",
8384
- style: { ...sidebarInputStyle, minHeight: 110, resize: "vertical" },
8385
- value: normalizeText2(item.quote)
8386
- }
8387
- ),
8388
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8389
- "input",
8390
- {
8391
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "name", event.target.value),
8392
- placeholder: "Customer name",
8393
- style: sidebarInputStyle,
8394
- type: "text",
8395
- value: normalizeText2(item.name)
8396
- }
8397
- ),
8398
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8399
- "input",
8400
- {
8401
- onChange: (event) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, "location", event.target.value),
8402
- placeholder: "Location",
8403
- style: sidebarInputStyle,
8404
- type: "text",
8405
- value: normalizeText2(item.location)
8406
- }
8407
- ),
8408
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
8409
- "Stars (1-5)",
8410
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8411
- "input",
8412
- {
8413
- max: 5,
8414
- min: 1,
8415
- onChange: (event) => updateArrayItemField(
8416
- selectedIndex ?? 0,
8417
- "items",
8418
- itemIndex,
8419
- "rating",
8420
- Number(event.target.value)
8421
- ),
8422
- style: sidebarInputStyle,
8423
- type: "number",
8424
- value: ratingValue
8425
- }
8426
- )
8427
- ] }),
8428
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
8429
- "button",
8430
- {
8431
- onClick: () => removeItemFromSelected("items", itemIndex),
8432
- style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
8433
- type: "button",
8434
- children: "Remove Testimonial"
8435
- }
8436
- )
8437
- ] }) : null
8438
- ]
8439
- },
8440
- `testimonial-item-control-${itemIndex}`
8441
- );
8442
- }) })
8443
- ] }) : null
7039
+ ) : null
8444
7040
  ] }),
8445
7041
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: sidebarLabelStyle, children: [
8446
7042
  "Upload Alt Text",