@orion-studios/payload-studio 0.5.0-beta.78 → 0.5.0-beta.79
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.
- package/dist/studio-pages/client.js +97 -1303
- package/dist/studio-pages/client.mjs +91 -1297
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
} from "../chunk-ROTPP5CU.mjs";
|
|
7
7
|
|
|
8
8
|
// src/studio-pages/builder/BuilderPageEditor.tsx
|
|
9
|
-
import { useCallback, useEffect as
|
|
9
|
+
import { useCallback, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef2, useState as useState5 } from "react";
|
|
10
10
|
|
|
11
11
|
// src/blocks/blocks/sectionStyleFields.ts
|
|
12
12
|
var sectionStyleDefaults = {
|
|
@@ -1445,57 +1445,6 @@ function usePersistentSidebarPanel(pageID) {
|
|
|
1445
1445
|
};
|
|
1446
1446
|
}
|
|
1447
1447
|
|
|
1448
|
-
// src/studio-pages/builder/hooks/useSettingsPanelV2Flag.ts
|
|
1449
|
-
import { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
|
|
1450
|
-
function useSettingsPanelV2Flag({
|
|
1451
|
-
featureFlag,
|
|
1452
|
-
persistedFlagKey
|
|
1453
|
-
}) {
|
|
1454
|
-
const [settingsPanelV2Override, setSettingsPanelV2Override] = useState3(null);
|
|
1455
|
-
useEffect2(() => {
|
|
1456
|
-
const persistedValue = window.localStorage.getItem(persistedFlagKey);
|
|
1457
|
-
if (persistedValue === "true") {
|
|
1458
|
-
setSettingsPanelV2Override(true);
|
|
1459
|
-
return;
|
|
1460
|
-
}
|
|
1461
|
-
if (persistedValue === "false") {
|
|
1462
|
-
setSettingsPanelV2Override(false);
|
|
1463
|
-
return;
|
|
1464
|
-
}
|
|
1465
|
-
setSettingsPanelV2Override(null);
|
|
1466
|
-
}, [persistedFlagKey]);
|
|
1467
|
-
useEffect2(() => {
|
|
1468
|
-
if (typeof settingsPanelV2Override !== "boolean") {
|
|
1469
|
-
window.localStorage.removeItem(persistedFlagKey);
|
|
1470
|
-
return;
|
|
1471
|
-
}
|
|
1472
|
-
window.localStorage.setItem(persistedFlagKey, settingsPanelV2Override ? "true" : "false");
|
|
1473
|
-
}, [persistedFlagKey, settingsPanelV2Override]);
|
|
1474
|
-
const settingsPanelV2Enabled = useMemo2(() => {
|
|
1475
|
-
if (typeof featureFlag === "boolean") {
|
|
1476
|
-
return featureFlag;
|
|
1477
|
-
}
|
|
1478
|
-
if (typeof settingsPanelV2Override === "boolean") {
|
|
1479
|
-
return settingsPanelV2Override;
|
|
1480
|
-
}
|
|
1481
|
-
if (typeof process !== "undefined") {
|
|
1482
|
-
const envFlag = process.env.NEXT_PUBLIC_ORION_SETTINGS_PANEL_V2;
|
|
1483
|
-
if (envFlag === "true") {
|
|
1484
|
-
return true;
|
|
1485
|
-
}
|
|
1486
|
-
if (envFlag === "false") {
|
|
1487
|
-
return false;
|
|
1488
|
-
}
|
|
1489
|
-
}
|
|
1490
|
-
return true;
|
|
1491
|
-
}, [featureFlag, settingsPanelV2Override]);
|
|
1492
|
-
return {
|
|
1493
|
-
settingsPanelV2Enabled,
|
|
1494
|
-
settingsPanelV2Override,
|
|
1495
|
-
setSettingsPanelV2Override
|
|
1496
|
-
};
|
|
1497
|
-
}
|
|
1498
|
-
|
|
1499
1448
|
// src/studio-pages/builder/icons/FeatureLucideIcon.tsx
|
|
1500
1449
|
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1501
1450
|
var iconBaseProps = {
|
|
@@ -1758,7 +1707,7 @@ function clonePresetBlocks(blocks) {
|
|
|
1758
1707
|
}
|
|
1759
1708
|
|
|
1760
1709
|
// src/studio-pages/builder/ui/InlineText.tsx
|
|
1761
|
-
import { useEffect as
|
|
1710
|
+
import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
|
|
1762
1711
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
1763
1712
|
function InlineText({
|
|
1764
1713
|
as = "p",
|
|
@@ -1769,7 +1718,7 @@ function InlineText({
|
|
|
1769
1718
|
style,
|
|
1770
1719
|
value
|
|
1771
1720
|
}) {
|
|
1772
|
-
const [editing, setEditing] =
|
|
1721
|
+
const [editing, setEditing] = useState3(false);
|
|
1773
1722
|
const editableRef = useRef(null);
|
|
1774
1723
|
const Tag = as;
|
|
1775
1724
|
const normalizeValue = (raw) => {
|
|
@@ -1778,7 +1727,7 @@ function InlineText({
|
|
|
1778
1727
|
}
|
|
1779
1728
|
return raw.replace(/\r?\n/g, " ").replace(/\s+/g, " ").trim();
|
|
1780
1729
|
};
|
|
1781
|
-
|
|
1730
|
+
useEffect2(() => {
|
|
1782
1731
|
if (!editing || !editableRef.current) {
|
|
1783
1732
|
return;
|
|
1784
1733
|
}
|
|
@@ -1856,7 +1805,7 @@ function UploadOverlay({ label = "Uploading image..." }) {
|
|
|
1856
1805
|
}
|
|
1857
1806
|
|
|
1858
1807
|
// src/studio-pages/builder/ui/BlockFrame.tsx
|
|
1859
|
-
import { useEffect as
|
|
1808
|
+
import { useEffect as useEffect3, useState as useState4 } from "react";
|
|
1860
1809
|
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1861
1810
|
function BlockFrame({
|
|
1862
1811
|
children,
|
|
@@ -1868,14 +1817,14 @@ function BlockFrame({
|
|
|
1868
1817
|
selected,
|
|
1869
1818
|
setDragIndex
|
|
1870
1819
|
}) {
|
|
1871
|
-
const [dropPosition, setDropPosition] =
|
|
1872
|
-
const [dropHovered, setDropHovered] =
|
|
1820
|
+
const [dropPosition, setDropPosition] = useState4(null);
|
|
1821
|
+
const [dropHovered, setDropHovered] = useState4(false);
|
|
1873
1822
|
const isDragging = dragIndex === index;
|
|
1874
1823
|
const isAnyDragging = dragIndex !== null;
|
|
1875
1824
|
const isDropTarget = dragIndex !== null && dragIndex !== index && dropPosition !== null;
|
|
1876
1825
|
const showDropBefore = isDropTarget && dropPosition === "before";
|
|
1877
1826
|
const showDropAfter = isDropTarget && dropPosition === "after";
|
|
1878
|
-
|
|
1827
|
+
useEffect3(() => {
|
|
1879
1828
|
if (dragIndex === null) {
|
|
1880
1829
|
setDropPosition(null);
|
|
1881
1830
|
setDropHovered(false);
|
|
@@ -2723,12 +2672,9 @@ function SidebarPanelIconButtons({ activeSidebarPanel, onOpenPanel }) {
|
|
|
2723
2672
|
}
|
|
2724
2673
|
function SidebarTabs({
|
|
2725
2674
|
activeSidebarPanel,
|
|
2726
|
-
|
|
2727
|
-
onOpenPanel,
|
|
2728
|
-
onToggleSettingsPanelV2,
|
|
2729
|
-
settingsPanelV2Enabled
|
|
2675
|
+
onOpenPanel
|
|
2730
2676
|
}) {
|
|
2731
|
-
return /* @__PURE__ */
|
|
2677
|
+
return /* @__PURE__ */ jsx11(
|
|
2732
2678
|
"div",
|
|
2733
2679
|
{
|
|
2734
2680
|
style: {
|
|
@@ -2739,31 +2685,7 @@ function SidebarTabs({
|
|
|
2739
2685
|
gap: 8,
|
|
2740
2686
|
padding: "10px 10px"
|
|
2741
2687
|
},
|
|
2742
|
-
children:
|
|
2743
|
-
/* @__PURE__ */ jsx11(SidebarPanelIconButtons, { activeSidebarPanel, onOpenPanel }),
|
|
2744
|
-
/* @__PURE__ */ jsx11(
|
|
2745
|
-
"button",
|
|
2746
|
-
{
|
|
2747
|
-
disabled: disableSettingsPanelV2Toggle,
|
|
2748
|
-
onClick: onToggleSettingsPanelV2,
|
|
2749
|
-
style: {
|
|
2750
|
-
background: settingsPanelV2Enabled ? "#124a37" : "#ffffff",
|
|
2751
|
-
border: "1px solid rgba(18, 74, 55, 0.2)",
|
|
2752
|
-
borderRadius: 999,
|
|
2753
|
-
color: settingsPanelV2Enabled ? "#ffffff" : "#124a37",
|
|
2754
|
-
cursor: "pointer",
|
|
2755
|
-
fontSize: 10,
|
|
2756
|
-
fontWeight: 800,
|
|
2757
|
-
marginLeft: "auto",
|
|
2758
|
-
padding: "5px 8px",
|
|
2759
|
-
textTransform: "uppercase"
|
|
2760
|
-
},
|
|
2761
|
-
title: "Toggle new settings panel",
|
|
2762
|
-
type: "button",
|
|
2763
|
-
children: settingsPanelV2Enabled ? "V2 On" : "V2 Off"
|
|
2764
|
-
}
|
|
2765
|
-
)
|
|
2766
|
-
]
|
|
2688
|
+
children: /* @__PURE__ */ jsx11(SidebarPanelIconButtons, { activeSidebarPanel, onOpenPanel })
|
|
2767
2689
|
}
|
|
2768
2690
|
);
|
|
2769
2691
|
}
|
|
@@ -3832,9 +3754,6 @@ function toMediaLibraryItem2(value) {
|
|
|
3832
3754
|
url
|
|
3833
3755
|
};
|
|
3834
3756
|
}
|
|
3835
|
-
function mediaLabel2(item) {
|
|
3836
|
-
return item.filename || item.alt || `Media #${item.id}`;
|
|
3837
|
-
}
|
|
3838
3757
|
function mediaFromLibraryItem(item) {
|
|
3839
3758
|
return {
|
|
3840
3759
|
alt: item.alt,
|
|
@@ -3893,7 +3812,7 @@ var cloneSnapshot = (value) => ({
|
|
|
3893
3812
|
layout: cloneBlockLayout(value.layout),
|
|
3894
3813
|
pageDefaults: clonePageDefaults(value.pageDefaults)
|
|
3895
3814
|
});
|
|
3896
|
-
function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }) {
|
|
3815
|
+
function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, siteThemeTokens }) {
|
|
3897
3816
|
const editorRootRef = useRef2(null);
|
|
3898
3817
|
const doc = initialDoc ?? {};
|
|
3899
3818
|
const sourceStudioDocument = doc.studioDocument && typeof doc.studioDocument === "object" ? doc.studioDocument : {};
|
|
@@ -3906,32 +3825,31 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
3906
3825
|
pageWidthDefault: sourceMetadata.pageWidthDefault === "wide" || sourceMetadata.pageWidthDefault === "full" ? sourceMetadata.pageWidthDefault : defaultPageDefaults.pageWidthDefault,
|
|
3907
3826
|
themePage: isRecord5(sourceThemePage.page) ? sourceThemePage.page : {}
|
|
3908
3827
|
};
|
|
3909
|
-
const [layout, setLayout] =
|
|
3828
|
+
const [layout, setLayout] = useState5(
|
|
3910
3829
|
migrateLayoutToSettingsV2(cloneBlockLayout(initialLayout).map((block) => withSectionStyleDefaults2(block)))
|
|
3911
3830
|
);
|
|
3912
|
-
const [pageDefaults, setPageDefaults] =
|
|
3913
|
-
const [selectedIndex, setSelectedIndex] =
|
|
3914
|
-
const [dragIndex, setDragIndex] =
|
|
3915
|
-
const [sidebarOpen, setSidebarOpen] =
|
|
3916
|
-
const [savingStatus, setSavingStatus] =
|
|
3917
|
-
const [uploadingTarget, setUploadingTarget] =
|
|
3918
|
-
const [topViewportHeight, setTopViewportHeight] =
|
|
3919
|
-
const [uploadError, setUploadError] =
|
|
3920
|
-
const [uploadMessage, setUploadMessage] =
|
|
3921
|
-
const [uploadAltText, setUploadAltText] =
|
|
3922
|
-
const [mediaLibrary, setMediaLibrary] =
|
|
3923
|
-
const [mediaLibraryError, setMediaLibraryError] =
|
|
3924
|
-
const [mediaLibraryLoading, setMediaLibraryLoading] =
|
|
3925
|
-
const [
|
|
3926
|
-
const [
|
|
3927
|
-
const [
|
|
3928
|
-
const [
|
|
3929
|
-
const [
|
|
3930
|
-
const [
|
|
3931
|
-
const [
|
|
3932
|
-
const [
|
|
3933
|
-
const [
|
|
3934
|
-
const [settingsSearchQuery, setSettingsSearchQuery] = useState6("");
|
|
3831
|
+
const [pageDefaults, setPageDefaults] = useState5(clonePageDefaults(initialPageDefaults));
|
|
3832
|
+
const [selectedIndex, setSelectedIndex] = useState5(null);
|
|
3833
|
+
const [dragIndex, setDragIndex] = useState5(null);
|
|
3834
|
+
const [sidebarOpen, setSidebarOpen] = useState5(true);
|
|
3835
|
+
const [savingStatus, setSavingStatus] = useState5(null);
|
|
3836
|
+
const [uploadingTarget, setUploadingTarget] = useState5(null);
|
|
3837
|
+
const [topViewportHeight, setTopViewportHeight] = useState5(null);
|
|
3838
|
+
const [uploadError, setUploadError] = useState5("");
|
|
3839
|
+
const [uploadMessage, setUploadMessage] = useState5("");
|
|
3840
|
+
const [uploadAltText, setUploadAltText] = useState5("");
|
|
3841
|
+
const [mediaLibrary, setMediaLibrary] = useState5([]);
|
|
3842
|
+
const [mediaLibraryError, setMediaLibraryError] = useState5("");
|
|
3843
|
+
const [mediaLibraryLoading, setMediaLibraryLoading] = useState5(false);
|
|
3844
|
+
const [selectedItemIndex, setSelectedItemIndex] = useState5(null);
|
|
3845
|
+
const [expandedItemIndex, setExpandedItemIndex] = useState5(null);
|
|
3846
|
+
const [testimonialsOffsets, setTestimonialsOffsets] = useState5({});
|
|
3847
|
+
const [presetQuery, setPresetQuery] = useState5("");
|
|
3848
|
+
const [sessionExpired, setSessionExpired] = useState5(false);
|
|
3849
|
+
const [pastSnapshots, setPastSnapshots] = useState5([]);
|
|
3850
|
+
const [futureSnapshots, setFutureSnapshots] = useState5([]);
|
|
3851
|
+
const [settingsPanelMode, setSettingsPanelMode] = useState5("basic");
|
|
3852
|
+
const [settingsSearchQuery, setSettingsSearchQuery] = useState5("");
|
|
3935
3853
|
const { activeSidebarPanel, setActiveSidebarPanel } = usePersistentSidebarPanel(pageID);
|
|
3936
3854
|
const historyBypassRef = useRef2(true);
|
|
3937
3855
|
const previousSnapshotRef = useRef2({
|
|
@@ -3939,12 +3857,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
3939
3857
|
pageDefaults: clonePageDefaults(initialPageDefaults)
|
|
3940
3858
|
});
|
|
3941
3859
|
const lastSavedRef = useRef2(cloneSnapshot(previousSnapshotRef.current));
|
|
3942
|
-
const
|
|
3943
|
-
const { settingsPanelV2Enabled, setSettingsPanelV2Override } = useSettingsPanelV2Flag({
|
|
3944
|
-
featureFlag: featureFlags?.settingsPanelV2,
|
|
3945
|
-
persistedFlagKey
|
|
3946
|
-
});
|
|
3947
|
-
const selectedBlock = useMemo3(
|
|
3860
|
+
const selectedBlock = useMemo2(
|
|
3948
3861
|
() => selectedIndex !== null ? layout[selectedIndex] : null,
|
|
3949
3862
|
[layout, selectedIndex]
|
|
3950
3863
|
);
|
|
@@ -3953,12 +3866,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
3953
3866
|
const selectedBlockSettings = isRecord5(selectedBlock?.settings) ? selectedBlock.settings : {};
|
|
3954
3867
|
const selectedBlockAdvancedSettings = isRecord5(selectedBlockSettings.advanced) ? selectedBlockSettings.advanced : {};
|
|
3955
3868
|
const isArrayItemBlockSelected = selectedType === "featureGrid" || selectedType === "logoWall" || selectedType === "beforeAfter" || selectedType === "stats" || selectedType === "faq" || selectedType === "testimonials";
|
|
3956
|
-
const v2InspectorEnabledForSelected = settingsPanelV2Enabled;
|
|
3957
3869
|
const editCopyInPanelEnabled = Boolean(selectedBlockAdvancedSettings.editCopyInPanel);
|
|
3958
|
-
const selectedSectionStyle = {
|
|
3959
|
-
...defaultSectionStyle,
|
|
3960
|
-
...selectedBlock || {}
|
|
3961
|
-
};
|
|
3962
3870
|
const isBlockUploadTarget = (blockIndex, kind) => selectedIndex === blockIndex && uploadingTarget?.kind === kind;
|
|
3963
3871
|
const isFeatureGridItemUploading = (blockIndex, itemIndex) => selectedIndex === blockIndex && uploadingTarget?.kind === "featureGridItem" && uploadingTarget.itemIndex === itemIndex;
|
|
3964
3872
|
const isLogoWallItemUploading = (blockIndex, itemIndex) => selectedIndex === blockIndex && uploadingTarget?.kind === "logoWallItem" && uploadingTarget.itemIndex === itemIndex;
|
|
@@ -3978,24 +3886,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
3978
3886
|
}
|
|
3979
3887
|
return false;
|
|
3980
3888
|
};
|
|
3981
|
-
const
|
|
3982
|
-
const direct = toMediaLibraryItem2(value);
|
|
3983
|
-
if (direct) {
|
|
3984
|
-
return direct;
|
|
3985
|
-
}
|
|
3986
|
-
const relationID = getRelationID2(value);
|
|
3987
|
-
if (relationID === null) {
|
|
3988
|
-
return null;
|
|
3989
|
-
}
|
|
3990
|
-
return mediaLibrary.find((item) => String(item.id) === String(relationID)) || null;
|
|
3991
|
-
};
|
|
3992
|
-
const selectedHeroMedia = useMemo3(() => {
|
|
3993
|
-
if (selectedType !== "hero" || !selectedBlock) {
|
|
3994
|
-
return null;
|
|
3995
|
-
}
|
|
3996
|
-
return resolveMediaLibraryItemFromValue(selectedBlock.media);
|
|
3997
|
-
}, [mediaLibrary, selectedBlock, selectedType]);
|
|
3998
|
-
const filteredSectionPresets = useMemo3(() => {
|
|
3889
|
+
const filteredSectionPresets = useMemo2(() => {
|
|
3999
3890
|
const query = presetQuery.trim().toLowerCase();
|
|
4000
3891
|
if (!query) {
|
|
4001
3892
|
return sectionPresets;
|
|
@@ -4025,10 +3916,10 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4025
3916
|
setMediaLibraryLoading(false);
|
|
4026
3917
|
}
|
|
4027
3918
|
}, []);
|
|
4028
|
-
|
|
3919
|
+
useEffect4(() => {
|
|
4029
3920
|
void loadMediaLibrary();
|
|
4030
3921
|
}, [loadMediaLibrary]);
|
|
4031
|
-
|
|
3922
|
+
useEffect4(() => {
|
|
4032
3923
|
const refreshMediaLibrary = () => {
|
|
4033
3924
|
void loadMediaLibrary();
|
|
4034
3925
|
};
|
|
@@ -4053,7 +3944,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4053
3944
|
document.removeEventListener("visibilitychange", onVisibilityChange);
|
|
4054
3945
|
};
|
|
4055
3946
|
}, [loadMediaLibrary]);
|
|
4056
|
-
|
|
3947
|
+
useEffect4(() => {
|
|
4057
3948
|
let active = true;
|
|
4058
3949
|
const checkSession = async () => {
|
|
4059
3950
|
try {
|
|
@@ -4081,14 +3972,6 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4081
3972
|
window.clearInterval(intervalId);
|
|
4082
3973
|
};
|
|
4083
3974
|
}, []);
|
|
4084
|
-
useEffect5(() => {
|
|
4085
|
-
if (selectedType !== "hero") {
|
|
4086
|
-
setSelectedHeroMediaID("");
|
|
4087
|
-
return;
|
|
4088
|
-
}
|
|
4089
|
-
const relationID = getRelationID2(selectedBlock?.media);
|
|
4090
|
-
setSelectedHeroMediaID(relationID !== null ? String(relationID) : "");
|
|
4091
|
-
}, [selectedBlock, selectedType]);
|
|
4092
3975
|
const applyTemplateStarter = () => {
|
|
4093
3976
|
const templateBlocks = templateStarterPresets[pageTemplate] || templateStarterPresets.standard;
|
|
4094
3977
|
const nextLayout = migrateLayoutToSettingsV2(
|
|
@@ -4245,25 +4128,6 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4245
4128
|
});
|
|
4246
4129
|
}
|
|
4247
4130
|
};
|
|
4248
|
-
const setSelectedMediaFieldFromLibrary = (fieldName, mediaID) => {
|
|
4249
|
-
if (!mediaID) {
|
|
4250
|
-
updateSelectedField(fieldName, null);
|
|
4251
|
-
if (selectedType === "hero" && fieldName === "media") {
|
|
4252
|
-
updateSelectedField("backgroundImageURL", "");
|
|
4253
|
-
setSelectedHeroMediaID("");
|
|
4254
|
-
}
|
|
4255
|
-
return;
|
|
4256
|
-
}
|
|
4257
|
-
const selectedMedia = mediaLibrary.find((item) => String(item.id) === mediaID);
|
|
4258
|
-
if (!selectedMedia) {
|
|
4259
|
-
return;
|
|
4260
|
-
}
|
|
4261
|
-
updateSelectedField(fieldName, mediaFromLibraryItem(selectedMedia));
|
|
4262
|
-
if (selectedType === "hero" && fieldName === "media") {
|
|
4263
|
-
updateSelectedField("backgroundImageURL", selectedMedia.url);
|
|
4264
|
-
setSelectedHeroMediaID(String(selectedMedia.id));
|
|
4265
|
-
}
|
|
4266
|
-
};
|
|
4267
4131
|
const setSelectedItemMediaFieldFromLibrary = (itemIndex, fieldName, mediaID) => {
|
|
4268
4132
|
if (selectedIndex === null) {
|
|
4269
4133
|
return;
|
|
@@ -4291,22 +4155,6 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4291
4155
|
void uploadMediaForSelected({ field, itemIndex, kind: "beforeAfterItem" }, file);
|
|
4292
4156
|
}
|
|
4293
4157
|
};
|
|
4294
|
-
const setHeroMediaFromLibrary = (mediaID) => {
|
|
4295
|
-
if (selectedIndex === null || selectedType !== "hero") {
|
|
4296
|
-
return;
|
|
4297
|
-
}
|
|
4298
|
-
setSelectedMediaFieldFromLibrary("media", mediaID);
|
|
4299
|
-
};
|
|
4300
|
-
const clearHeroMedia = () => {
|
|
4301
|
-
if (selectedType !== "hero") {
|
|
4302
|
-
return;
|
|
4303
|
-
}
|
|
4304
|
-
updateSelectedField("media", null);
|
|
4305
|
-
updateSelectedField("backgroundImageURL", "");
|
|
4306
|
-
setSelectedHeroMediaID("");
|
|
4307
|
-
setUploadMessage("Hero image removed.");
|
|
4308
|
-
setUploadError("");
|
|
4309
|
-
};
|
|
4310
4158
|
const uploadMediaForSelected = async (target, file) => {
|
|
4311
4159
|
if (selectedIndex === null) {
|
|
4312
4160
|
setUploadError("Select a section first.");
|
|
@@ -4353,7 +4201,6 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4353
4201
|
const deduped = current.filter((item) => String(item.id) !== String(uploadedItem.id));
|
|
4354
4202
|
return [uploadedItem, ...deduped];
|
|
4355
4203
|
});
|
|
4356
|
-
setSelectedHeroMediaID(String(uploadedItem.id));
|
|
4357
4204
|
}
|
|
4358
4205
|
} else if (target.kind === "media") {
|
|
4359
4206
|
nextLayout[selectedIndex] = {
|
|
@@ -4442,7 +4289,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4442
4289
|
}
|
|
4443
4290
|
return nextBlock;
|
|
4444
4291
|
});
|
|
4445
|
-
const resolvedThemeTokens =
|
|
4292
|
+
const resolvedThemeTokens = useMemo2(
|
|
4446
4293
|
() => resolveBuilderThemeTokens({
|
|
4447
4294
|
page: pageDefaults.themePage,
|
|
4448
4295
|
site: siteThemeTokens
|
|
@@ -4579,14 +4426,14 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4579
4426
|
return next;
|
|
4580
4427
|
});
|
|
4581
4428
|
};
|
|
4582
|
-
const currentSnapshot =
|
|
4429
|
+
const currentSnapshot = useMemo2(
|
|
4583
4430
|
() => ({
|
|
4584
4431
|
layout: cloneBlockLayout(layout),
|
|
4585
4432
|
pageDefaults: clonePageDefaults(pageDefaults)
|
|
4586
4433
|
}),
|
|
4587
4434
|
[layout, pageDefaults]
|
|
4588
4435
|
);
|
|
4589
|
-
|
|
4436
|
+
useEffect4(() => {
|
|
4590
4437
|
const readTopViewportHeight = () => {
|
|
4591
4438
|
if (typeof window === "undefined") {
|
|
4592
4439
|
setTopViewportHeight(null);
|
|
@@ -4611,7 +4458,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4611
4458
|
layout: toPersistedLayout(snapshot.layout),
|
|
4612
4459
|
pageDefaults: snapshot.pageDefaults
|
|
4613
4460
|
});
|
|
4614
|
-
const isDirty =
|
|
4461
|
+
const isDirty = useMemo2(
|
|
4615
4462
|
() => snapshotKey(currentSnapshot) !== snapshotKey(lastSavedRef.current),
|
|
4616
4463
|
[currentSnapshot]
|
|
4617
4464
|
);
|
|
@@ -4658,25 +4505,6 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4658
4505
|
setExpandedItemIndex((current) => current === itemIndex ? null : itemIndex);
|
|
4659
4506
|
openSidebarPanel("selected");
|
|
4660
4507
|
};
|
|
4661
|
-
const setSelectedStyleField = (fieldName, value) => {
|
|
4662
|
-
updateSelectedField(fieldName, value);
|
|
4663
|
-
};
|
|
4664
|
-
const applyGradientPreset = (scope, preset) => {
|
|
4665
|
-
const pair = gradientPresetPairs[preset];
|
|
4666
|
-
if (scope === "section") {
|
|
4667
|
-
setSelectedStyleField("sectionGradientPreset", preset);
|
|
4668
|
-
if (pair) {
|
|
4669
|
-
setSelectedStyleField("sectionGradientFrom", pair[0]);
|
|
4670
|
-
setSelectedStyleField("sectionGradientTo", pair[1]);
|
|
4671
|
-
}
|
|
4672
|
-
return;
|
|
4673
|
-
}
|
|
4674
|
-
setSelectedStyleField("contentGradientPreset", preset);
|
|
4675
|
-
if (pair) {
|
|
4676
|
-
setSelectedStyleField("contentGradientFrom", pair[0]);
|
|
4677
|
-
setSelectedStyleField("contentGradientTo", pair[1]);
|
|
4678
|
-
}
|
|
4679
|
-
};
|
|
4680
4508
|
const saveLayout = async (status) => {
|
|
4681
4509
|
if (savingStatus !== null) {
|
|
4682
4510
|
return false;
|
|
@@ -4764,14 +4592,14 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4764
4592
|
setSavingStatus(null);
|
|
4765
4593
|
}
|
|
4766
4594
|
};
|
|
4767
|
-
|
|
4595
|
+
useEffect4(() => {
|
|
4768
4596
|
if (selectedIndex === null) {
|
|
4769
4597
|
return;
|
|
4770
4598
|
}
|
|
4771
4599
|
setSidebarOpen(true);
|
|
4772
4600
|
setActiveSidebarPanel("selected");
|
|
4773
4601
|
}, [selectedIndex]);
|
|
4774
|
-
|
|
4602
|
+
useEffect4(() => {
|
|
4775
4603
|
if (selectedIndex === null) {
|
|
4776
4604
|
setSelectedItemIndex(null);
|
|
4777
4605
|
setExpandedItemIndex(null);
|
|
@@ -4789,17 +4617,17 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4789
4617
|
(current) => typeof current === "number" && current >= 0 && current < selectedItems.length ? current : 0
|
|
4790
4618
|
);
|
|
4791
4619
|
}, [selectedIndex, selectedItems.length]);
|
|
4792
|
-
|
|
4620
|
+
useEffect4(() => {
|
|
4793
4621
|
if (layout.length > 0) {
|
|
4794
4622
|
return;
|
|
4795
4623
|
}
|
|
4796
4624
|
setSidebarOpen(true);
|
|
4797
4625
|
setActiveSidebarPanel("addSections");
|
|
4798
4626
|
}, [layout.length]);
|
|
4799
|
-
|
|
4627
|
+
useEffect4(() => {
|
|
4800
4628
|
return;
|
|
4801
4629
|
}, [layout]);
|
|
4802
|
-
|
|
4630
|
+
useEffect4(() => {
|
|
4803
4631
|
if (historyBypassRef.current) {
|
|
4804
4632
|
historyBypassRef.current = false;
|
|
4805
4633
|
previousSnapshotRef.current = cloneSnapshot(currentSnapshot);
|
|
@@ -4810,7 +4638,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4810
4638
|
setFutureSnapshots([]);
|
|
4811
4639
|
previousSnapshotRef.current = cloneSnapshot(currentSnapshot);
|
|
4812
4640
|
}, [currentSnapshot]);
|
|
4813
|
-
|
|
4641
|
+
useEffect4(() => {
|
|
4814
4642
|
const onKeyDown = (event) => {
|
|
4815
4643
|
const key = event.key.toLowerCase();
|
|
4816
4644
|
const isUndo = (event.metaKey || event.ctrlKey) && key === "z" && !event.shiftKey;
|
|
@@ -4828,7 +4656,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4828
4656
|
window.addEventListener("keydown", onKeyDown);
|
|
4829
4657
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
4830
4658
|
}, [canRedo, canUndo, futureSnapshots, pastSnapshots, currentSnapshot]);
|
|
4831
|
-
|
|
4659
|
+
useEffect4(() => {
|
|
4832
4660
|
window.parent?.postMessage(
|
|
4833
4661
|
{
|
|
4834
4662
|
dirty: isDirty,
|
|
@@ -4838,7 +4666,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4838
4666
|
"*"
|
|
4839
4667
|
);
|
|
4840
4668
|
}, [isDirty]);
|
|
4841
|
-
|
|
4669
|
+
useEffect4(() => {
|
|
4842
4670
|
window.parent?.postMessage(
|
|
4843
4671
|
{
|
|
4844
4672
|
canRedo,
|
|
@@ -4849,7 +4677,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4849
4677
|
"*"
|
|
4850
4678
|
);
|
|
4851
4679
|
}, [canRedo, canUndo]);
|
|
4852
|
-
|
|
4680
|
+
useEffect4(() => {
|
|
4853
4681
|
const onMessage = (event) => {
|
|
4854
4682
|
const data = event.data;
|
|
4855
4683
|
if (!data || data.source !== "payload-visual-builder-parent") {
|
|
@@ -4902,7 +4730,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
4902
4730
|
window.addEventListener("message", onMessage);
|
|
4903
4731
|
return () => window.removeEventListener("message", onMessage);
|
|
4904
4732
|
}, [canRedo, canUndo, isDirty, layout, pageDefaults.pageWidthDefault, title]);
|
|
4905
|
-
|
|
4733
|
+
useEffect4(() => {
|
|
4906
4734
|
const preventNavigationWhileEditing = (event) => {
|
|
4907
4735
|
const editorRoot = editorRootRef.current;
|
|
4908
4736
|
if (!editorRoot) {
|
|
@@ -6021,10 +5849,7 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
6021
5849
|
SidebarTabs,
|
|
6022
5850
|
{
|
|
6023
5851
|
activeSidebarPanel,
|
|
6024
|
-
|
|
6025
|
-
onOpenPanel: (panel) => openSidebarPanel(panel),
|
|
6026
|
-
onToggleSettingsPanelV2: () => setSettingsPanelV2Override((current) => current === false ? true : false),
|
|
6027
|
-
settingsPanelV2Enabled
|
|
5852
|
+
onOpenPanel: (panel) => openSidebarPanel(panel)
|
|
6028
5853
|
}
|
|
6029
5854
|
),
|
|
6030
5855
|
/* @__PURE__ */ jsxs12("div", { style: { display: "grid", overflowY: "auto", padding: 12 }, children: [
|
|
@@ -6132,1073 +5957,42 @@ function BuilderPageEditor({ featureFlags, initialDoc, pageID, siteThemeTokens }
|
|
|
6132
5957
|
}
|
|
6133
5958
|
)
|
|
6134
5959
|
] }),
|
|
6135
|
-
|
|
6136
|
-
|
|
6137
|
-
|
|
6138
|
-
|
|
6139
|
-
|
|
6140
|
-
|
|
6141
|
-
|
|
6142
|
-
|
|
6143
|
-
|
|
6144
|
-
|
|
6145
|
-
|
|
6146
|
-
|
|
6147
|
-
|
|
6148
|
-
|
|
6149
|
-
|
|
6150
|
-
|
|
6151
|
-
|
|
6152
|
-
|
|
6153
|
-
|
|
6154
|
-
|
|
6155
|
-
|
|
6156
|
-
|
|
6157
|
-
|
|
6158
|
-
|
|
6159
|
-
|
|
6160
|
-
|
|
6161
|
-
|
|
6162
|
-
|
|
6163
|
-
|
|
6164
|
-
|
|
6165
|
-
|
|
6166
|
-
|
|
6167
|
-
|
|
6168
|
-
|
|
6169
|
-
|
|
6170
|
-
|
|
6171
|
-
) : null
|
|
6172
|
-
] }) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6173
|
-
/* @__PURE__ */ jsxs12("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: [
|
|
6174
|
-
"Section width follows ",
|
|
6175
|
-
/* @__PURE__ */ jsx13("strong", { children: "Page Defaults" }),
|
|
6176
|
-
" for a consistent page layout."
|
|
6177
|
-
] }),
|
|
6178
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6179
|
-
"Content Width",
|
|
6180
|
-
/* @__PURE__ */ jsxs12(
|
|
6181
|
-
"select",
|
|
6182
|
-
{
|
|
6183
|
-
onChange: (event) => setSelectedStyleField("contentWidth", event.target.value),
|
|
6184
|
-
style: sidebarInputStyle,
|
|
6185
|
-
value: normalizeText2(selectedSectionStyle.contentWidth, "inherit"),
|
|
6186
|
-
children: [
|
|
6187
|
-
/* @__PURE__ */ jsx13("option", { value: "inherit", children: "Inherit Page Default" }),
|
|
6188
|
-
/* @__PURE__ */ jsx13("option", { value: "narrow", children: "Narrow" }),
|
|
6189
|
-
/* @__PURE__ */ jsx13("option", { value: "content", children: "Content" }),
|
|
6190
|
-
/* @__PURE__ */ jsx13("option", { value: "wide", children: "Wide" }),
|
|
6191
|
-
/* @__PURE__ */ jsx13("option", { value: "full", children: "Full" })
|
|
6192
|
-
]
|
|
6193
|
-
}
|
|
6194
|
-
)
|
|
6195
|
-
] }),
|
|
6196
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6197
|
-
"Section Vertical Spacing",
|
|
6198
|
-
/* @__PURE__ */ jsxs12(
|
|
6199
|
-
"select",
|
|
6200
|
-
{
|
|
6201
|
-
onChange: (event) => setSelectedStyleField("sectionPaddingY", event.target.value),
|
|
6202
|
-
style: sidebarInputStyle,
|
|
6203
|
-
value: normalizeText2(selectedSectionStyle.sectionPaddingY, "md"),
|
|
6204
|
-
children: [
|
|
6205
|
-
/* @__PURE__ */ jsx13("option", { value: "none", children: "None" }),
|
|
6206
|
-
/* @__PURE__ */ jsx13("option", { value: "sm", children: "Small" }),
|
|
6207
|
-
/* @__PURE__ */ jsx13("option", { value: "md", children: "Medium" }),
|
|
6208
|
-
/* @__PURE__ */ jsx13("option", { value: "lg", children: "Large" })
|
|
6209
|
-
]
|
|
6210
|
-
}
|
|
6211
|
-
)
|
|
6212
|
-
] }),
|
|
6213
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6214
|
-
"Section Horizontal Spacing",
|
|
6215
|
-
/* @__PURE__ */ jsxs12(
|
|
6216
|
-
"select",
|
|
6217
|
-
{
|
|
6218
|
-
onChange: (event) => setSelectedStyleField("sectionPaddingX", event.target.value),
|
|
6219
|
-
style: sidebarInputStyle,
|
|
6220
|
-
value: normalizeText2(selectedSectionStyle.sectionPaddingX, "inherit"),
|
|
6221
|
-
children: [
|
|
6222
|
-
/* @__PURE__ */ jsx13("option", { value: "inherit", children: "Inherit (Edge-to-Edge on Full Width)" }),
|
|
6223
|
-
/* @__PURE__ */ jsx13("option", { value: "none", children: "None" }),
|
|
6224
|
-
/* @__PURE__ */ jsx13("option", { value: "sm", children: "Small" }),
|
|
6225
|
-
/* @__PURE__ */ jsx13("option", { value: "md", children: "Medium" }),
|
|
6226
|
-
/* @__PURE__ */ jsx13("option", { value: "lg", children: "Large" })
|
|
6227
|
-
]
|
|
6228
|
-
}
|
|
6229
|
-
)
|
|
6230
|
-
] }),
|
|
6231
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6232
|
-
"Section Background",
|
|
6233
|
-
/* @__PURE__ */ jsxs12(
|
|
6234
|
-
"select",
|
|
6235
|
-
{
|
|
6236
|
-
onChange: (event) => setSelectedStyleField("sectionBackgroundMode", event.target.value),
|
|
6237
|
-
style: sidebarInputStyle,
|
|
6238
|
-
value: normalizeText2(selectedSectionStyle.sectionBackgroundMode, "none"),
|
|
6239
|
-
children: [
|
|
6240
|
-
/* @__PURE__ */ jsx13("option", { value: "none", children: "None" }),
|
|
6241
|
-
/* @__PURE__ */ jsx13("option", { value: "color", children: "Color" }),
|
|
6242
|
-
/* @__PURE__ */ jsx13("option", { value: "gradient", children: "Gradient" })
|
|
6243
|
-
]
|
|
6244
|
-
}
|
|
6245
|
-
)
|
|
6246
|
-
] }),
|
|
6247
|
-
normalizeText2(selectedSectionStyle.sectionBackgroundMode, "none") === "color" ? /* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6248
|
-
"Section Background Color",
|
|
6249
|
-
/* @__PURE__ */ jsx13(
|
|
6250
|
-
"input",
|
|
6251
|
-
{
|
|
6252
|
-
onChange: (event) => setSelectedStyleField("sectionBackgroundColor", event.target.value),
|
|
6253
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6254
|
-
type: "color",
|
|
6255
|
-
value: parseColor(selectedSectionStyle.sectionBackgroundColor, "#ffffff")
|
|
6256
|
-
}
|
|
6257
|
-
)
|
|
6258
|
-
] }) : null,
|
|
6259
|
-
normalizeText2(selectedSectionStyle.sectionBackgroundMode, "none") === "gradient" ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6260
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6261
|
-
"Section Gradient Preset",
|
|
6262
|
-
/* @__PURE__ */ jsx13(
|
|
6263
|
-
"select",
|
|
6264
|
-
{
|
|
6265
|
-
onChange: (event) => applyGradientPreset("section", event.target.value),
|
|
6266
|
-
style: sidebarInputStyle,
|
|
6267
|
-
value: normalizeText2(selectedSectionStyle.sectionGradientPreset, "forest"),
|
|
6268
|
-
children: Object.keys(gradientPresetPairs).map((preset) => /* @__PURE__ */ jsx13("option", { value: preset, children: preset }, preset))
|
|
6269
|
-
}
|
|
6270
|
-
)
|
|
6271
|
-
] }),
|
|
6272
|
-
/* @__PURE__ */ jsxs12("div", { style: { display: "grid", gap: 6, gridTemplateColumns: "1fr 1fr" }, children: [
|
|
6273
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6274
|
-
"From",
|
|
6275
|
-
/* @__PURE__ */ jsx13(
|
|
6276
|
-
"input",
|
|
6277
|
-
{
|
|
6278
|
-
onChange: (event) => setSelectedStyleField("sectionGradientFrom", event.target.value),
|
|
6279
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6280
|
-
type: "color",
|
|
6281
|
-
value: parseColor(selectedSectionStyle.sectionGradientFrom, "#124a37")
|
|
6282
|
-
}
|
|
6283
|
-
)
|
|
6284
|
-
] }),
|
|
6285
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6286
|
-
"To",
|
|
6287
|
-
/* @__PURE__ */ jsx13(
|
|
6288
|
-
"input",
|
|
6289
|
-
{
|
|
6290
|
-
onChange: (event) => setSelectedStyleField("sectionGradientTo", event.target.value),
|
|
6291
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6292
|
-
type: "color",
|
|
6293
|
-
value: parseColor(selectedSectionStyle.sectionGradientTo, "#1f684f")
|
|
6294
|
-
}
|
|
6295
|
-
)
|
|
6296
|
-
] })
|
|
6297
|
-
] }),
|
|
6298
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6299
|
-
"Angle",
|
|
6300
|
-
/* @__PURE__ */ jsx13(
|
|
6301
|
-
"input",
|
|
6302
|
-
{
|
|
6303
|
-
max: 360,
|
|
6304
|
-
min: 0,
|
|
6305
|
-
onChange: (event) => setSelectedStyleField("sectionGradientAngle", event.target.value),
|
|
6306
|
-
style: sidebarInputStyle,
|
|
6307
|
-
type: "number",
|
|
6308
|
-
value: parseAngle(selectedSectionStyle.sectionGradientAngle, "135")
|
|
6309
|
-
}
|
|
6310
|
-
)
|
|
6311
|
-
] })
|
|
6312
|
-
] }) : null,
|
|
6313
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6314
|
-
"Content Background",
|
|
6315
|
-
/* @__PURE__ */ jsxs12(
|
|
6316
|
-
"select",
|
|
6317
|
-
{
|
|
6318
|
-
onChange: (event) => setSelectedStyleField("contentBackgroundMode", event.target.value),
|
|
6319
|
-
style: sidebarInputStyle,
|
|
6320
|
-
value: normalizeText2(selectedSectionStyle.contentBackgroundMode, "none"),
|
|
6321
|
-
children: [
|
|
6322
|
-
/* @__PURE__ */ jsx13("option", { value: "none", children: "None" }),
|
|
6323
|
-
/* @__PURE__ */ jsx13("option", { value: "color", children: "Color" }),
|
|
6324
|
-
/* @__PURE__ */ jsx13("option", { value: "gradient", children: "Gradient" })
|
|
6325
|
-
]
|
|
6326
|
-
}
|
|
6327
|
-
)
|
|
6328
|
-
] }),
|
|
6329
|
-
normalizeText2(selectedSectionStyle.contentBackgroundMode, "none") === "color" ? /* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6330
|
-
"Content Background Color",
|
|
6331
|
-
/* @__PURE__ */ jsx13(
|
|
6332
|
-
"input",
|
|
6333
|
-
{
|
|
6334
|
-
onChange: (event) => setSelectedStyleField("contentBackgroundColor", event.target.value),
|
|
6335
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6336
|
-
type: "color",
|
|
6337
|
-
value: parseColor(selectedSectionStyle.contentBackgroundColor, "#ffffff")
|
|
6338
|
-
}
|
|
6339
|
-
)
|
|
6340
|
-
] }) : null,
|
|
6341
|
-
normalizeText2(selectedSectionStyle.contentBackgroundMode, "none") === "gradient" ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6342
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6343
|
-
"Content Gradient Preset",
|
|
6344
|
-
/* @__PURE__ */ jsx13(
|
|
6345
|
-
"select",
|
|
6346
|
-
{
|
|
6347
|
-
onChange: (event) => applyGradientPreset("content", event.target.value),
|
|
6348
|
-
style: sidebarInputStyle,
|
|
6349
|
-
value: normalizeText2(selectedSectionStyle.contentGradientPreset, "none"),
|
|
6350
|
-
children: Object.keys(gradientPresetPairs).map((preset) => /* @__PURE__ */ jsx13("option", { value: preset, children: preset }, preset))
|
|
6351
|
-
}
|
|
6352
|
-
)
|
|
6353
|
-
] }),
|
|
6354
|
-
/* @__PURE__ */ jsxs12("div", { style: { display: "grid", gap: 6, gridTemplateColumns: "1fr 1fr" }, children: [
|
|
6355
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6356
|
-
"From",
|
|
6357
|
-
/* @__PURE__ */ jsx13(
|
|
6358
|
-
"input",
|
|
6359
|
-
{
|
|
6360
|
-
onChange: (event) => setSelectedStyleField("contentGradientFrom", event.target.value),
|
|
6361
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6362
|
-
type: "color",
|
|
6363
|
-
value: parseColor(selectedSectionStyle.contentGradientFrom, "#ffffff")
|
|
6364
|
-
}
|
|
6365
|
-
)
|
|
6366
|
-
] }),
|
|
6367
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6368
|
-
"To",
|
|
6369
|
-
/* @__PURE__ */ jsx13(
|
|
6370
|
-
"input",
|
|
6371
|
-
{
|
|
6372
|
-
onChange: (event) => setSelectedStyleField("contentGradientTo", event.target.value),
|
|
6373
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6374
|
-
type: "color",
|
|
6375
|
-
value: parseColor(selectedSectionStyle.contentGradientTo, "#f4f6f2")
|
|
6376
|
-
}
|
|
6377
|
-
)
|
|
6378
|
-
] })
|
|
6379
|
-
] }),
|
|
6380
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6381
|
-
"Angle",
|
|
6382
|
-
/* @__PURE__ */ jsx13(
|
|
6383
|
-
"input",
|
|
6384
|
-
{
|
|
6385
|
-
max: 360,
|
|
6386
|
-
min: 0,
|
|
6387
|
-
onChange: (event) => setSelectedStyleField("contentGradientAngle", event.target.value),
|
|
6388
|
-
style: sidebarInputStyle,
|
|
6389
|
-
type: "number",
|
|
6390
|
-
value: parseAngle(selectedSectionStyle.contentGradientAngle, "135")
|
|
6391
|
-
}
|
|
6392
|
-
)
|
|
6393
|
-
] })
|
|
6394
|
-
] }) : null,
|
|
6395
|
-
selectedType === "hero" ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6396
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6397
|
-
"Variant",
|
|
6398
|
-
/* @__PURE__ */ jsxs12(
|
|
6399
|
-
"select",
|
|
6400
|
-
{
|
|
6401
|
-
onChange: (event) => updateSelectedField("variant", event.target.value),
|
|
6402
|
-
style: sidebarInputStyle,
|
|
6403
|
-
value: normalizeText2(selectedBlock.variant, "default"),
|
|
6404
|
-
children: [
|
|
6405
|
-
/* @__PURE__ */ jsx13("option", { value: "default", children: "Default" }),
|
|
6406
|
-
/* @__PURE__ */ jsx13("option", { value: "centered", children: "Centered" })
|
|
6407
|
-
]
|
|
6408
|
-
}
|
|
6409
|
-
)
|
|
6410
|
-
] }),
|
|
6411
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6412
|
-
"Hero Height",
|
|
6413
|
-
/* @__PURE__ */ jsxs12(
|
|
6414
|
-
"select",
|
|
6415
|
-
{
|
|
6416
|
-
onChange: (event) => updateSelectedField("heroHeight", event.target.value),
|
|
6417
|
-
style: sidebarInputStyle,
|
|
6418
|
-
value: normalizeHeroHeight(selectedBlock.heroHeight),
|
|
6419
|
-
children: [
|
|
6420
|
-
/* @__PURE__ */ jsx13("option", { value: "sm", children: "Small" }),
|
|
6421
|
-
/* @__PURE__ */ jsx13("option", { value: "md", children: "Medium (Half Screen)" }),
|
|
6422
|
-
/* @__PURE__ */ jsx13("option", { value: "full", children: "Full Screen" })
|
|
6423
|
-
]
|
|
6424
|
-
}
|
|
6425
|
-
)
|
|
6426
|
-
] }),
|
|
6427
|
-
/* @__PURE__ */ jsxs12("div", { style: { ...sidebarSectionStyle, display: "grid", gap: 8 }, children: [
|
|
6428
|
-
/* @__PURE__ */ jsx13("div", { style: { color: "var(--ink-700)", fontSize: 12, fontWeight: 600 }, children: "Hero Image" }),
|
|
6429
|
-
/* @__PURE__ */ jsx13("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: selectedHeroMedia ? `${selectedHeroMedia.filename || `Media #${selectedHeroMedia.id}`}${selectedHeroMedia.alt ? ` (${selectedHeroMedia.alt})` : ""}` : "No image selected." }),
|
|
6430
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6431
|
-
"Choose from Media Library",
|
|
6432
|
-
/* @__PURE__ */ jsxs12(
|
|
6433
|
-
"select",
|
|
6434
|
-
{
|
|
6435
|
-
onChange: (event) => setHeroMediaFromLibrary(event.target.value),
|
|
6436
|
-
style: sidebarInputStyle,
|
|
6437
|
-
value: selectedHeroMediaID,
|
|
6438
|
-
children: [
|
|
6439
|
-
/* @__PURE__ */ jsx13("option", { value: "", children: "No image" }),
|
|
6440
|
-
mediaLibrary.map((item) => /* @__PURE__ */ jsx13("option", { value: String(item.id), children: mediaLabel2(item) }, String(item.id)))
|
|
6441
|
-
]
|
|
6442
|
-
}
|
|
6443
|
-
)
|
|
6444
|
-
] }),
|
|
6445
|
-
mediaLibraryLoading ? /* @__PURE__ */ jsx13("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
|
|
6446
|
-
mediaLibraryError ? /* @__PURE__ */ jsx13("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
|
|
6447
|
-
/* @__PURE__ */ jsx13(
|
|
6448
|
-
"button",
|
|
6449
|
-
{
|
|
6450
|
-
disabled: !selectedHeroMedia && !selectedHeroMediaID,
|
|
6451
|
-
onClick: clearHeroMedia,
|
|
6452
|
-
style: {
|
|
6453
|
-
borderRadius: 999,
|
|
6454
|
-
cursor: selectedHeroMedia || selectedHeroMediaID ? "pointer" : "not-allowed",
|
|
6455
|
-
fontSize: 12,
|
|
6456
|
-
padding: "7px 10px"
|
|
6457
|
-
},
|
|
6458
|
-
type: "button",
|
|
6459
|
-
children: "Remove Hero Image"
|
|
6460
|
-
}
|
|
6461
|
-
),
|
|
6462
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6463
|
-
"Upload Hero Background Image",
|
|
6464
|
-
/* @__PURE__ */ jsx13(
|
|
6465
|
-
"input",
|
|
6466
|
-
{
|
|
6467
|
-
accept: "image/*",
|
|
6468
|
-
disabled: uploadingTarget !== null,
|
|
6469
|
-
onChange: (event) => {
|
|
6470
|
-
const file = event.currentTarget.files?.[0];
|
|
6471
|
-
if (file) {
|
|
6472
|
-
void uploadMediaForSelected({ kind: "hero" }, file);
|
|
6473
|
-
}
|
|
6474
|
-
event.currentTarget.value = "";
|
|
6475
|
-
},
|
|
6476
|
-
style: sidebarInputStyle,
|
|
6477
|
-
type: "file"
|
|
6478
|
-
}
|
|
6479
|
-
)
|
|
6480
|
-
] }),
|
|
6481
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6482
|
-
"Image Fit",
|
|
6483
|
-
/* @__PURE__ */ jsxs12(
|
|
6484
|
-
"select",
|
|
6485
|
-
{
|
|
6486
|
-
onChange: (event) => updateSelectedField("backgroundImageFit", event.target.value),
|
|
6487
|
-
style: sidebarInputStyle,
|
|
6488
|
-
value: normalizeHeroImageFit(selectedBlock.backgroundImageFit),
|
|
6489
|
-
children: [
|
|
6490
|
-
/* @__PURE__ */ jsx13("option", { value: "cover", children: "Cover" }),
|
|
6491
|
-
/* @__PURE__ */ jsx13("option", { value: "contain", children: "Contain" })
|
|
6492
|
-
]
|
|
6493
|
-
}
|
|
6494
|
-
)
|
|
6495
|
-
] }),
|
|
6496
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6497
|
-
"Image Corners",
|
|
6498
|
-
/* @__PURE__ */ jsxs12(
|
|
6499
|
-
"select",
|
|
6500
|
-
{
|
|
6501
|
-
onChange: (event) => updateSelectedField("backgroundImageCornerStyle", event.target.value),
|
|
6502
|
-
style: sidebarInputStyle,
|
|
6503
|
-
value: normalizeHeroImageCornerStyle(
|
|
6504
|
-
selectedBlock.backgroundImageCornerStyle,
|
|
6505
|
-
selectedBlock.backgroundImageFit
|
|
6506
|
-
),
|
|
6507
|
-
children: [
|
|
6508
|
-
/* @__PURE__ */ jsx13("option", { value: "rounded", children: "Rounded" }),
|
|
6509
|
-
/* @__PURE__ */ jsx13("option", { value: "square", children: "Square" })
|
|
6510
|
-
]
|
|
6511
|
-
}
|
|
6512
|
-
)
|
|
6513
|
-
] }),
|
|
6514
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6515
|
-
"Image Position",
|
|
6516
|
-
/* @__PURE__ */ jsxs12(
|
|
6517
|
-
"select",
|
|
6518
|
-
{
|
|
6519
|
-
onChange: (event) => updateSelectedField("backgroundImagePosition", event.target.value),
|
|
6520
|
-
style: sidebarInputStyle,
|
|
6521
|
-
value: normalizeHeroImagePosition(selectedBlock.backgroundImagePosition),
|
|
6522
|
-
children: [
|
|
6523
|
-
/* @__PURE__ */ jsx13("option", { value: "center", children: "Center" }),
|
|
6524
|
-
/* @__PURE__ */ jsx13("option", { value: "top", children: "Top" }),
|
|
6525
|
-
/* @__PURE__ */ jsx13("option", { value: "bottom", children: "Bottom" }),
|
|
6526
|
-
/* @__PURE__ */ jsx13("option", { value: "left", children: "Left" }),
|
|
6527
|
-
/* @__PURE__ */ jsx13("option", { value: "right", children: "Right" })
|
|
6528
|
-
]
|
|
6529
|
-
}
|
|
6530
|
-
)
|
|
6531
|
-
] })
|
|
6532
|
-
] }),
|
|
6533
|
-
/* @__PURE__ */ jsxs12("div", { style: { ...sidebarSectionStyle, display: "grid", gap: 8 }, children: [
|
|
6534
|
-
/* @__PURE__ */ jsx13("div", { style: { color: "var(--ink-700)", fontSize: 12, fontWeight: 600 }, children: "Hero Overlay" }),
|
|
6535
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6536
|
-
"Overlay Type",
|
|
6537
|
-
/* @__PURE__ */ jsxs12(
|
|
6538
|
-
"select",
|
|
6539
|
-
{
|
|
6540
|
-
onChange: (event) => updateSelectedField("backgroundOverlayMode", event.target.value),
|
|
6541
|
-
style: sidebarInputStyle,
|
|
6542
|
-
value: normalizeText2(selectedBlock.backgroundOverlayMode, "none"),
|
|
6543
|
-
children: [
|
|
6544
|
-
/* @__PURE__ */ jsx13("option", { value: "none", children: "None" }),
|
|
6545
|
-
/* @__PURE__ */ jsx13("option", { value: "solid", children: "Solid" }),
|
|
6546
|
-
/* @__PURE__ */ jsx13("option", { value: "gradient", children: "Gradient" })
|
|
6547
|
-
]
|
|
6548
|
-
}
|
|
6549
|
-
)
|
|
6550
|
-
] }),
|
|
6551
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6552
|
-
"Opacity (%)",
|
|
6553
|
-
/* @__PURE__ */ jsxs12("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 90px" }, children: [
|
|
6554
|
-
/* @__PURE__ */ jsx13(
|
|
6555
|
-
"input",
|
|
6556
|
-
{
|
|
6557
|
-
max: 100,
|
|
6558
|
-
min: 0,
|
|
6559
|
-
onChange: (event) => updateSelectedField("backgroundOverlayOpacity", Number(event.target.value)),
|
|
6560
|
-
type: "range",
|
|
6561
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayOpacity, 45)
|
|
6562
|
-
}
|
|
6563
|
-
),
|
|
6564
|
-
/* @__PURE__ */ jsx13(
|
|
6565
|
-
"input",
|
|
6566
|
-
{
|
|
6567
|
-
max: 100,
|
|
6568
|
-
min: 0,
|
|
6569
|
-
onChange: (event) => updateSelectedField(
|
|
6570
|
-
"backgroundOverlayOpacity",
|
|
6571
|
-
event.target.value === "" ? 45 : Number(event.target.value)
|
|
6572
|
-
),
|
|
6573
|
-
style: sidebarInputStyle,
|
|
6574
|
-
type: "number",
|
|
6575
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayOpacity, 45)
|
|
6576
|
-
}
|
|
6577
|
-
)
|
|
6578
|
-
] })
|
|
6579
|
-
] }),
|
|
6580
|
-
normalizeText2(selectedBlock.backgroundOverlayMode, "none") === "solid" ? /* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6581
|
-
"Overlay Color",
|
|
6582
|
-
/* @__PURE__ */ jsx13(
|
|
6583
|
-
"input",
|
|
6584
|
-
{
|
|
6585
|
-
onChange: (event) => updateSelectedField("backgroundOverlayColor", event.target.value),
|
|
6586
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6587
|
-
type: "color",
|
|
6588
|
-
value: parseColor(selectedBlock.backgroundOverlayColor, "#000000")
|
|
6589
|
-
}
|
|
6590
|
-
)
|
|
6591
|
-
] }) : null,
|
|
6592
|
-
normalizeText2(selectedBlock.backgroundOverlayMode, "none") === "gradient" ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6593
|
-
/* @__PURE__ */ jsxs12("div", { style: { display: "grid", gap: 6, gridTemplateColumns: "1fr 1fr" }, children: [
|
|
6594
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6595
|
-
"From",
|
|
6596
|
-
/* @__PURE__ */ jsx13(
|
|
6597
|
-
"input",
|
|
6598
|
-
{
|
|
6599
|
-
onChange: (event) => updateSelectedField("backgroundOverlayGradientFrom", event.target.value),
|
|
6600
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6601
|
-
type: "color",
|
|
6602
|
-
value: parseColor(selectedBlock.backgroundOverlayGradientFrom, "#0d4a37")
|
|
6603
|
-
}
|
|
6604
|
-
)
|
|
6605
|
-
] }),
|
|
6606
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6607
|
-
"To",
|
|
6608
|
-
/* @__PURE__ */ jsx13(
|
|
6609
|
-
"input",
|
|
6610
|
-
{
|
|
6611
|
-
onChange: (event) => updateSelectedField("backgroundOverlayGradientTo", event.target.value),
|
|
6612
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6613
|
-
type: "color",
|
|
6614
|
-
value: parseColor(selectedBlock.backgroundOverlayGradientTo, "#1f684f")
|
|
6615
|
-
}
|
|
6616
|
-
)
|
|
6617
|
-
] })
|
|
6618
|
-
] }),
|
|
6619
|
-
/* @__PURE__ */ jsxs12("div", { style: { display: "grid", gap: 6, gridTemplateColumns: "1fr 1fr" }, children: [
|
|
6620
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6621
|
-
"From Strength (%)",
|
|
6622
|
-
/* @__PURE__ */ jsxs12(
|
|
6623
|
-
"div",
|
|
6624
|
-
{
|
|
6625
|
-
style: {
|
|
6626
|
-
alignItems: "center",
|
|
6627
|
-
display: "grid",
|
|
6628
|
-
gap: 8,
|
|
6629
|
-
gridTemplateColumns: "1fr 70px"
|
|
6630
|
-
},
|
|
6631
|
-
children: [
|
|
6632
|
-
/* @__PURE__ */ jsx13(
|
|
6633
|
-
"input",
|
|
6634
|
-
{
|
|
6635
|
-
max: 100,
|
|
6636
|
-
min: 0,
|
|
6637
|
-
onChange: (event) => updateSelectedField(
|
|
6638
|
-
"backgroundOverlayGradientFromStrength",
|
|
6639
|
-
Number(event.target.value)
|
|
6640
|
-
),
|
|
6641
|
-
type: "range",
|
|
6642
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayGradientFromStrength, 100)
|
|
6643
|
-
}
|
|
6644
|
-
),
|
|
6645
|
-
/* @__PURE__ */ jsx13(
|
|
6646
|
-
"input",
|
|
6647
|
-
{
|
|
6648
|
-
max: 100,
|
|
6649
|
-
min: 0,
|
|
6650
|
-
onChange: (event) => updateSelectedField(
|
|
6651
|
-
"backgroundOverlayGradientFromStrength",
|
|
6652
|
-
event.target.value === "" ? 100 : Number(event.target.value)
|
|
6653
|
-
),
|
|
6654
|
-
style: sidebarInputStyle,
|
|
6655
|
-
type: "number",
|
|
6656
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayGradientFromStrength, 100)
|
|
6657
|
-
}
|
|
6658
|
-
)
|
|
6659
|
-
]
|
|
6660
|
-
}
|
|
6661
|
-
)
|
|
6662
|
-
] }),
|
|
6663
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6664
|
-
"To Strength (%)",
|
|
6665
|
-
/* @__PURE__ */ jsxs12(
|
|
6666
|
-
"div",
|
|
6667
|
-
{
|
|
6668
|
-
style: {
|
|
6669
|
-
alignItems: "center",
|
|
6670
|
-
display: "grid",
|
|
6671
|
-
gap: 8,
|
|
6672
|
-
gridTemplateColumns: "1fr 70px"
|
|
6673
|
-
},
|
|
6674
|
-
children: [
|
|
6675
|
-
/* @__PURE__ */ jsx13(
|
|
6676
|
-
"input",
|
|
6677
|
-
{
|
|
6678
|
-
max: 100,
|
|
6679
|
-
min: 0,
|
|
6680
|
-
onChange: (event) => updateSelectedField(
|
|
6681
|
-
"backgroundOverlayGradientToStrength",
|
|
6682
|
-
Number(event.target.value)
|
|
6683
|
-
),
|
|
6684
|
-
type: "range",
|
|
6685
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayGradientToStrength, 100)
|
|
6686
|
-
}
|
|
6687
|
-
),
|
|
6688
|
-
/* @__PURE__ */ jsx13(
|
|
6689
|
-
"input",
|
|
6690
|
-
{
|
|
6691
|
-
max: 100,
|
|
6692
|
-
min: 0,
|
|
6693
|
-
onChange: (event) => updateSelectedField(
|
|
6694
|
-
"backgroundOverlayGradientToStrength",
|
|
6695
|
-
event.target.value === "" ? 100 : Number(event.target.value)
|
|
6696
|
-
),
|
|
6697
|
-
style: sidebarInputStyle,
|
|
6698
|
-
type: "number",
|
|
6699
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayGradientToStrength, 100)
|
|
6700
|
-
}
|
|
6701
|
-
)
|
|
6702
|
-
]
|
|
6703
|
-
}
|
|
6704
|
-
)
|
|
6705
|
-
] })
|
|
6706
|
-
] }),
|
|
6707
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6708
|
-
"Angle",
|
|
6709
|
-
/* @__PURE__ */ jsx13(
|
|
6710
|
-
"input",
|
|
6711
|
-
{
|
|
6712
|
-
max: 360,
|
|
6713
|
-
min: 0,
|
|
6714
|
-
onChange: (event) => updateSelectedField("backgroundOverlayGradientAngle", event.target.value),
|
|
6715
|
-
style: sidebarInputStyle,
|
|
6716
|
-
type: "number",
|
|
6717
|
-
value: parseAngle(selectedBlock.backgroundOverlayGradientAngle, "135")
|
|
6718
|
-
}
|
|
6719
|
-
)
|
|
6720
|
-
] }),
|
|
6721
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6722
|
-
"Gradient Start (%)",
|
|
6723
|
-
/* @__PURE__ */ jsxs12("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 90px" }, children: [
|
|
6724
|
-
/* @__PURE__ */ jsx13(
|
|
6725
|
-
"input",
|
|
6726
|
-
{
|
|
6727
|
-
max: 100,
|
|
6728
|
-
min: 0,
|
|
6729
|
-
onChange: (event) => {
|
|
6730
|
-
const next = Number(event.target.value);
|
|
6731
|
-
updateSelectedField("backgroundOverlayGradientStart", next);
|
|
6732
|
-
const currentEnd = parsePercentNumber(selectedBlock.backgroundOverlayGradientEnd, 100);
|
|
6733
|
-
if (next > currentEnd) {
|
|
6734
|
-
updateSelectedField("backgroundOverlayGradientEnd", next);
|
|
6735
|
-
}
|
|
6736
|
-
},
|
|
6737
|
-
type: "range",
|
|
6738
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayGradientStart, 0)
|
|
6739
|
-
}
|
|
6740
|
-
),
|
|
6741
|
-
/* @__PURE__ */ jsx13(
|
|
6742
|
-
"input",
|
|
6743
|
-
{
|
|
6744
|
-
max: 100,
|
|
6745
|
-
min: 0,
|
|
6746
|
-
onChange: (event) => {
|
|
6747
|
-
const next = event.target.value === "" ? 0 : Number(event.target.value);
|
|
6748
|
-
updateSelectedField("backgroundOverlayGradientStart", next);
|
|
6749
|
-
const currentEnd = parsePercentNumber(selectedBlock.backgroundOverlayGradientEnd, 100);
|
|
6750
|
-
if (next > currentEnd) {
|
|
6751
|
-
updateSelectedField("backgroundOverlayGradientEnd", next);
|
|
6752
|
-
}
|
|
6753
|
-
},
|
|
6754
|
-
style: sidebarInputStyle,
|
|
6755
|
-
type: "number",
|
|
6756
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayGradientStart, 0)
|
|
6757
|
-
}
|
|
6758
|
-
)
|
|
6759
|
-
] })
|
|
6760
|
-
] }),
|
|
6761
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6762
|
-
"Gradient End (%)",
|
|
6763
|
-
/* @__PURE__ */ jsxs12("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 90px" }, children: [
|
|
6764
|
-
/* @__PURE__ */ jsx13(
|
|
6765
|
-
"input",
|
|
6766
|
-
{
|
|
6767
|
-
max: 100,
|
|
6768
|
-
min: 0,
|
|
6769
|
-
onChange: (event) => {
|
|
6770
|
-
const next = Number(event.target.value);
|
|
6771
|
-
updateSelectedField("backgroundOverlayGradientEnd", next);
|
|
6772
|
-
const currentStart = parsePercentNumber(selectedBlock.backgroundOverlayGradientStart, 0);
|
|
6773
|
-
if (next < currentStart) {
|
|
6774
|
-
updateSelectedField("backgroundOverlayGradientStart", next);
|
|
6775
|
-
}
|
|
6776
|
-
},
|
|
6777
|
-
type: "range",
|
|
6778
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayGradientEnd, 100)
|
|
6779
|
-
}
|
|
6780
|
-
),
|
|
6781
|
-
/* @__PURE__ */ jsx13(
|
|
6782
|
-
"input",
|
|
6783
|
-
{
|
|
6784
|
-
max: 100,
|
|
6785
|
-
min: 0,
|
|
6786
|
-
onChange: (event) => {
|
|
6787
|
-
const next = event.target.value === "" ? 100 : Number(event.target.value);
|
|
6788
|
-
updateSelectedField("backgroundOverlayGradientEnd", next);
|
|
6789
|
-
const currentStart = parsePercentNumber(selectedBlock.backgroundOverlayGradientStart, 0);
|
|
6790
|
-
if (next < currentStart) {
|
|
6791
|
-
updateSelectedField("backgroundOverlayGradientStart", next);
|
|
6792
|
-
}
|
|
6793
|
-
},
|
|
6794
|
-
style: sidebarInputStyle,
|
|
6795
|
-
type: "number",
|
|
6796
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayGradientEnd, 100)
|
|
6797
|
-
}
|
|
6798
|
-
)
|
|
6799
|
-
] })
|
|
6800
|
-
] }),
|
|
6801
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6802
|
-
"Feather (%)",
|
|
6803
|
-
/* @__PURE__ */ jsxs12("div", { style: { alignItems: "center", display: "grid", gap: 8, gridTemplateColumns: "1fr 90px" }, children: [
|
|
6804
|
-
/* @__PURE__ */ jsx13(
|
|
6805
|
-
"input",
|
|
6806
|
-
{
|
|
6807
|
-
max: 100,
|
|
6808
|
-
min: 0,
|
|
6809
|
-
onChange: (event) => updateSelectedField("backgroundOverlayGradientFeather", Number(event.target.value)),
|
|
6810
|
-
type: "range",
|
|
6811
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayGradientFeather, 100)
|
|
6812
|
-
}
|
|
6813
|
-
),
|
|
6814
|
-
/* @__PURE__ */ jsx13(
|
|
6815
|
-
"input",
|
|
6816
|
-
{
|
|
6817
|
-
max: 100,
|
|
6818
|
-
min: 0,
|
|
6819
|
-
onChange: (event) => updateSelectedField(
|
|
6820
|
-
"backgroundOverlayGradientFeather",
|
|
6821
|
-
event.target.value === "" ? 100 : Number(event.target.value)
|
|
6822
|
-
),
|
|
6823
|
-
style: sidebarInputStyle,
|
|
6824
|
-
type: "number",
|
|
6825
|
-
value: parsePercentNumber(selectedBlock.backgroundOverlayGradientFeather, 100)
|
|
6826
|
-
}
|
|
6827
|
-
)
|
|
6828
|
-
] })
|
|
6829
|
-
] })
|
|
6830
|
-
] }) : null,
|
|
6831
|
-
/* @__PURE__ */ jsx13(
|
|
6832
|
-
"button",
|
|
6833
|
-
{
|
|
6834
|
-
onClick: () => {
|
|
6835
|
-
updateSelectedField("backgroundOverlayMode", "none");
|
|
6836
|
-
updateSelectedField("backgroundOverlayOpacity", 45);
|
|
6837
|
-
updateSelectedField("backgroundOverlayGradientStart", 0);
|
|
6838
|
-
updateSelectedField("backgroundOverlayGradientEnd", 100);
|
|
6839
|
-
updateSelectedField("backgroundOverlayGradientFeather", 100);
|
|
6840
|
-
},
|
|
6841
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
6842
|
-
type: "button",
|
|
6843
|
-
children: "Clear Hero Overlay"
|
|
6844
|
-
}
|
|
6845
|
-
)
|
|
6846
|
-
] }),
|
|
6847
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6848
|
-
"Background Color",
|
|
6849
|
-
/* @__PURE__ */ jsx13(
|
|
6850
|
-
"input",
|
|
6851
|
-
{
|
|
6852
|
-
onChange: (event) => updateSelectedField("backgroundColor", event.target.value),
|
|
6853
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6854
|
-
type: "color",
|
|
6855
|
-
value: parseColor(selectedBlock.backgroundColor, "#ffffff")
|
|
6856
|
-
}
|
|
6857
|
-
)
|
|
6858
|
-
] }),
|
|
6859
|
-
/* @__PURE__ */ jsx13(
|
|
6860
|
-
"button",
|
|
6861
|
-
{
|
|
6862
|
-
onClick: () => updateSelectedField("backgroundColor", ""),
|
|
6863
|
-
style: { borderRadius: 999, cursor: "pointer", fontSize: 12, padding: "7px 10px" },
|
|
6864
|
-
type: "button",
|
|
6865
|
-
children: "Clear Hero Background Color"
|
|
6866
|
-
}
|
|
6867
|
-
)
|
|
6868
|
-
] }) : null,
|
|
6869
|
-
selectedType === "featureGrid" ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6870
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6871
|
-
"Variant",
|
|
6872
|
-
/* @__PURE__ */ jsxs12(
|
|
6873
|
-
"select",
|
|
6874
|
-
{
|
|
6875
|
-
onChange: (event) => updateSelectedField("variant", event.target.value),
|
|
6876
|
-
style: sidebarInputStyle,
|
|
6877
|
-
value: normalizeText2(selectedBlock.variant, "cards"),
|
|
6878
|
-
children: [
|
|
6879
|
-
/* @__PURE__ */ jsx13("option", { value: "cards", children: "Cards" }),
|
|
6880
|
-
/* @__PURE__ */ jsx13("option", { value: "highlight", children: "Highlight" })
|
|
6881
|
-
]
|
|
6882
|
-
}
|
|
6883
|
-
)
|
|
6884
|
-
] }),
|
|
6885
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6886
|
-
"Items Per Row (Desktop)",
|
|
6887
|
-
/* @__PURE__ */ jsxs12(
|
|
6888
|
-
"select",
|
|
6889
|
-
{
|
|
6890
|
-
onChange: (event) => updateSelectedField("itemsPerRow", Number(event.target.value)),
|
|
6891
|
-
style: sidebarInputStyle,
|
|
6892
|
-
value: Math.max(1, Math.min(6, Math.floor(parsePixelNumber(selectedBlock.itemsPerRow, 3)))),
|
|
6893
|
-
children: [
|
|
6894
|
-
/* @__PURE__ */ jsx13("option", { value: 1, children: "1" }),
|
|
6895
|
-
/* @__PURE__ */ jsx13("option", { value: 2, children: "2" }),
|
|
6896
|
-
/* @__PURE__ */ jsx13("option", { value: 3, children: "3" }),
|
|
6897
|
-
/* @__PURE__ */ jsx13("option", { value: 4, children: "4" }),
|
|
6898
|
-
/* @__PURE__ */ jsx13("option", { value: 5, children: "5" }),
|
|
6899
|
-
/* @__PURE__ */ jsx13("option", { value: 6, children: "6" })
|
|
6900
|
-
]
|
|
6901
|
-
}
|
|
6902
|
-
)
|
|
6903
|
-
] }),
|
|
6904
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6905
|
-
"Highlight Background Color",
|
|
6906
|
-
/* @__PURE__ */ jsx13(
|
|
6907
|
-
"input",
|
|
6908
|
-
{
|
|
6909
|
-
onChange: (event) => updateSelectedField("backgroundColor", event.target.value),
|
|
6910
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6911
|
-
type: "color",
|
|
6912
|
-
value: parseColor(selectedBlock.backgroundColor, "#1f684f")
|
|
6913
|
-
}
|
|
6914
|
-
)
|
|
6915
|
-
] })
|
|
6916
|
-
] }) : null,
|
|
6917
|
-
selectedType === "beforeAfter" ? /* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6918
|
-
"Items Per Row (Desktop)",
|
|
6919
|
-
/* @__PURE__ */ jsxs12(
|
|
6920
|
-
"select",
|
|
6921
|
-
{
|
|
6922
|
-
onChange: (event) => updateSelectedField("itemsPerRow", Number(event.target.value)),
|
|
6923
|
-
style: sidebarInputStyle,
|
|
6924
|
-
value: Math.max(1, Math.min(4, Math.floor(parsePixelNumber(selectedBlock.itemsPerRow, 2)))),
|
|
6925
|
-
children: [
|
|
6926
|
-
/* @__PURE__ */ jsx13("option", { value: 1, children: "1" }),
|
|
6927
|
-
/* @__PURE__ */ jsx13("option", { value: 2, children: "2" }),
|
|
6928
|
-
/* @__PURE__ */ jsx13("option", { value: 3, children: "3" }),
|
|
6929
|
-
/* @__PURE__ */ jsx13("option", { value: 4, children: "4" })
|
|
6930
|
-
]
|
|
6931
|
-
}
|
|
6932
|
-
)
|
|
6933
|
-
] }) : null,
|
|
6934
|
-
selectedType === "cta" ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6935
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6936
|
-
"Style",
|
|
6937
|
-
/* @__PURE__ */ jsxs12(
|
|
6938
|
-
"select",
|
|
6939
|
-
{
|
|
6940
|
-
onChange: (event) => updateSelectedField("style", event.target.value),
|
|
6941
|
-
style: sidebarInputStyle,
|
|
6942
|
-
value: normalizeText2(selectedBlock.style, "light"),
|
|
6943
|
-
children: [
|
|
6944
|
-
/* @__PURE__ */ jsx13("option", { value: "light", children: "Light" }),
|
|
6945
|
-
/* @__PURE__ */ jsx13("option", { value: "dark", children: "Dark" })
|
|
6946
|
-
]
|
|
6947
|
-
}
|
|
6948
|
-
)
|
|
6949
|
-
] }),
|
|
6950
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6951
|
-
"Background Color",
|
|
6952
|
-
/* @__PURE__ */ jsx13(
|
|
6953
|
-
"input",
|
|
6954
|
-
{
|
|
6955
|
-
onChange: (event) => updateSelectedField("backgroundColor", event.target.value),
|
|
6956
|
-
style: { ...sidebarInputStyle, height: 36, padding: 4 },
|
|
6957
|
-
type: "color",
|
|
6958
|
-
value: parseColor(selectedBlock.backgroundColor, "#1f684f")
|
|
6959
|
-
}
|
|
6960
|
-
)
|
|
6961
|
-
] })
|
|
6962
|
-
] }) : null,
|
|
6963
|
-
selectedType === "media" ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6964
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6965
|
-
"Image Size",
|
|
6966
|
-
/* @__PURE__ */ jsxs12(
|
|
6967
|
-
"select",
|
|
6968
|
-
{
|
|
6969
|
-
onChange: (event) => updateSelectedField("size", event.target.value),
|
|
6970
|
-
style: sidebarInputStyle,
|
|
6971
|
-
value: normalizeText2(selectedBlock.size, "default"),
|
|
6972
|
-
children: [
|
|
6973
|
-
/* @__PURE__ */ jsx13("option", { value: "default", children: "Default" }),
|
|
6974
|
-
/* @__PURE__ */ jsx13("option", { value: "wide", children: "Wide" })
|
|
6975
|
-
]
|
|
6976
|
-
}
|
|
6977
|
-
)
|
|
6978
|
-
] }),
|
|
6979
|
-
(() => {
|
|
6980
|
-
const selectedMedia = resolveMediaLibraryItemFromValue(selectedBlock.image);
|
|
6981
|
-
const selectedMediaID = getRelationID2(selectedBlock.image);
|
|
6982
|
-
return /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
6983
|
-
/* @__PURE__ */ jsx13("div", { style: { color: "var(--ink-700)", fontSize: 12 }, children: selectedMedia ? `Selected image: ${mediaLabel2(selectedMedia)}` : "No image selected." }),
|
|
6984
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
6985
|
-
"Choose from Media Library",
|
|
6986
|
-
/* @__PURE__ */ jsxs12(
|
|
6987
|
-
"select",
|
|
6988
|
-
{
|
|
6989
|
-
onChange: (event) => setSelectedMediaFieldFromLibrary("image", event.target.value),
|
|
6990
|
-
style: sidebarInputStyle,
|
|
6991
|
-
value: selectedMediaID !== null ? String(selectedMediaID) : "",
|
|
6992
|
-
children: [
|
|
6993
|
-
/* @__PURE__ */ jsx13("option", { value: "", children: "No image" }),
|
|
6994
|
-
mediaLibrary.map((libraryItem) => /* @__PURE__ */ jsx13("option", { value: String(libraryItem.id), children: mediaLabel2(libraryItem) }, String(libraryItem.id)))
|
|
6995
|
-
]
|
|
6996
|
-
}
|
|
6997
|
-
)
|
|
6998
|
-
] }),
|
|
6999
|
-
mediaLibraryLoading ? /* @__PURE__ */ jsx13("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Loading media library..." }) : null,
|
|
7000
|
-
mediaLibraryError ? /* @__PURE__ */ jsx13("div", { style: { color: "#8d1d1d", fontSize: 11 }, children: mediaLibraryError }) : null,
|
|
7001
|
-
/* @__PURE__ */ jsx13(
|
|
7002
|
-
"button",
|
|
7003
|
-
{
|
|
7004
|
-
disabled: !selectedMedia && selectedMediaID === null,
|
|
7005
|
-
onClick: () => setSelectedMediaFieldFromLibrary("image", ""),
|
|
7006
|
-
style: {
|
|
7007
|
-
borderRadius: 999,
|
|
7008
|
-
cursor: selectedMedia || selectedMediaID !== null ? "pointer" : "not-allowed",
|
|
7009
|
-
fontSize: 12,
|
|
7010
|
-
padding: "7px 10px"
|
|
7011
|
-
},
|
|
7012
|
-
type: "button",
|
|
7013
|
-
children: "Remove Section Image"
|
|
7014
|
-
}
|
|
7015
|
-
),
|
|
7016
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
7017
|
-
"Image Fit",
|
|
7018
|
-
/* @__PURE__ */ jsxs12(
|
|
7019
|
-
"select",
|
|
7020
|
-
{
|
|
7021
|
-
onChange: (event) => updateSelectedField("imageFit", event.target.value),
|
|
7022
|
-
style: sidebarInputStyle,
|
|
7023
|
-
value: normalizeImageFit2(selectedBlock.imageFit),
|
|
7024
|
-
children: [
|
|
7025
|
-
/* @__PURE__ */ jsx13("option", { value: "cover", children: "Cover" }),
|
|
7026
|
-
/* @__PURE__ */ jsx13("option", { value: "contain", children: "Contain" })
|
|
7027
|
-
]
|
|
7028
|
-
}
|
|
7029
|
-
)
|
|
7030
|
-
] }),
|
|
7031
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
7032
|
-
"Image Corners",
|
|
7033
|
-
/* @__PURE__ */ jsxs12(
|
|
7034
|
-
"select",
|
|
7035
|
-
{
|
|
7036
|
-
onChange: (event) => updateSelectedField("imageCornerStyle", event.target.value),
|
|
7037
|
-
style: sidebarInputStyle,
|
|
7038
|
-
value: normalizeImageCornerStyle2(selectedBlock.imageCornerStyle),
|
|
7039
|
-
children: [
|
|
7040
|
-
/* @__PURE__ */ jsx13("option", { value: "rounded", children: "Rounded" }),
|
|
7041
|
-
/* @__PURE__ */ jsx13("option", { value: "square", children: "Square" })
|
|
7042
|
-
]
|
|
7043
|
-
}
|
|
7044
|
-
)
|
|
7045
|
-
] }),
|
|
7046
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
7047
|
-
"Image Position",
|
|
7048
|
-
/* @__PURE__ */ jsxs12(
|
|
7049
|
-
"select",
|
|
7050
|
-
{
|
|
7051
|
-
onChange: (event) => updateSelectedField("imagePosition", event.target.value),
|
|
7052
|
-
style: sidebarInputStyle,
|
|
7053
|
-
value: normalizeImagePosition2(selectedBlock.imagePosition),
|
|
7054
|
-
children: [
|
|
7055
|
-
/* @__PURE__ */ jsx13("option", { value: "center", children: "Center" }),
|
|
7056
|
-
/* @__PURE__ */ jsx13("option", { value: "top", children: "Top" }),
|
|
7057
|
-
/* @__PURE__ */ jsx13("option", { value: "bottom", children: "Bottom" }),
|
|
7058
|
-
/* @__PURE__ */ jsx13("option", { value: "left", children: "Left" }),
|
|
7059
|
-
/* @__PURE__ */ jsx13("option", { value: "right", children: "Right" })
|
|
7060
|
-
]
|
|
7061
|
-
}
|
|
7062
|
-
)
|
|
7063
|
-
] })
|
|
7064
|
-
] });
|
|
7065
|
-
})(),
|
|
7066
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
7067
|
-
"Upload Section Image",
|
|
7068
|
-
/* @__PURE__ */ jsx13(
|
|
7069
|
-
"input",
|
|
7070
|
-
{
|
|
7071
|
-
accept: "image/*",
|
|
7072
|
-
disabled: uploadingTarget !== null,
|
|
7073
|
-
onChange: (event) => {
|
|
7074
|
-
const file = event.currentTarget.files?.[0];
|
|
7075
|
-
if (file) {
|
|
7076
|
-
void uploadMediaForSelected({ kind: "media" }, file);
|
|
7077
|
-
}
|
|
7078
|
-
event.currentTarget.value = "";
|
|
7079
|
-
},
|
|
7080
|
-
style: sidebarInputStyle,
|
|
7081
|
-
type: "file"
|
|
7082
|
-
}
|
|
7083
|
-
)
|
|
7084
|
-
] })
|
|
7085
|
-
] }) : null,
|
|
7086
|
-
selectedType === "richText" ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
7087
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
7088
|
-
"Content",
|
|
7089
|
-
/* @__PURE__ */ jsx13(
|
|
7090
|
-
"textarea",
|
|
7091
|
-
{
|
|
7092
|
-
onChange: (event) => updateSelectedField("content", createLexicalText(event.target.value || "")),
|
|
7093
|
-
style: { ...sidebarInputStyle, minHeight: 140, resize: "vertical" },
|
|
7094
|
-
value: extractLexicalText(selectedBlock.content)
|
|
7095
|
-
}
|
|
7096
|
-
)
|
|
7097
|
-
] }),
|
|
7098
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
7099
|
-
"Content Width",
|
|
7100
|
-
/* @__PURE__ */ jsxs12(
|
|
7101
|
-
"select",
|
|
7102
|
-
{
|
|
7103
|
-
onChange: (event) => updateSelectedField("width", event.target.value),
|
|
7104
|
-
style: sidebarInputStyle,
|
|
7105
|
-
value: normalizeText2(selectedBlock.width, "normal"),
|
|
7106
|
-
children: [
|
|
7107
|
-
/* @__PURE__ */ jsx13("option", { value: "normal", children: "Normal" }),
|
|
7108
|
-
/* @__PURE__ */ jsx13("option", { value: "narrow", children: "Narrow" })
|
|
7109
|
-
]
|
|
7110
|
-
}
|
|
7111
|
-
)
|
|
7112
|
-
] })
|
|
7113
|
-
] }) : null,
|
|
7114
|
-
selectedType === "formEmbed" ? /* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
7115
|
-
"Form Type",
|
|
7116
|
-
/* @__PURE__ */ jsx13(
|
|
7117
|
-
"select",
|
|
7118
|
-
{
|
|
7119
|
-
onChange: (event) => updateSelectedField("formType", event.target.value),
|
|
7120
|
-
style: sidebarInputStyle,
|
|
7121
|
-
value: normalizeText2(selectedBlock.formType, "quote"),
|
|
7122
|
-
children: /* @__PURE__ */ jsx13("option", { value: "quote", children: "Quote" })
|
|
7123
|
-
}
|
|
7124
|
-
)
|
|
7125
|
-
] }) : null,
|
|
7126
|
-
selectedType === "testimonials" ? /* @__PURE__ */ jsx13(Fragment5, { children: (() => {
|
|
7127
|
-
const visibleCountValue = Math.max(
|
|
7128
|
-
1,
|
|
7129
|
-
Math.min(6, Math.floor(parsePixelNumber(selectedBlock.visibleCount, 3)))
|
|
7130
|
-
);
|
|
7131
|
-
const rotateIntervalValue = Math.max(
|
|
7132
|
-
2,
|
|
7133
|
-
Math.min(30, Math.floor(parsePixelNumber(selectedBlock.rotateIntervalSeconds, 7)))
|
|
7134
|
-
);
|
|
7135
|
-
const autoRotateValue = typeof selectedBlock.autoRotate === "boolean" ? selectedBlock.autoRotate : true;
|
|
7136
|
-
return /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
7137
|
-
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
7138
|
-
"Visible At Once",
|
|
7139
|
-
/* @__PURE__ */ jsx13(
|
|
7140
|
-
"input",
|
|
7141
|
-
{
|
|
7142
|
-
max: 6,
|
|
7143
|
-
min: 1,
|
|
7144
|
-
onChange: (event) => updateSelectedField("visibleCount", Number(event.target.value)),
|
|
7145
|
-
style: sidebarInputStyle,
|
|
7146
|
-
type: "number",
|
|
7147
|
-
value: visibleCountValue
|
|
7148
|
-
}
|
|
7149
|
-
)
|
|
7150
|
-
] }),
|
|
7151
|
-
/* @__PURE__ */ jsxs12("label", { style: { ...sidebarLabelStyle, alignItems: "center", gridTemplateColumns: "auto 1fr" }, children: [
|
|
7152
|
-
/* @__PURE__ */ jsx13(
|
|
7153
|
-
"input",
|
|
7154
|
-
{
|
|
7155
|
-
checked: autoRotateValue,
|
|
7156
|
-
onChange: (event) => updateSelectedField("autoRotate", event.target.checked),
|
|
7157
|
-
type: "checkbox"
|
|
7158
|
-
}
|
|
7159
|
-
),
|
|
7160
|
-
"Auto Rotate"
|
|
7161
|
-
] }),
|
|
7162
|
-
autoRotateValue ? /* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
7163
|
-
"Rotate Interval (seconds)",
|
|
7164
|
-
/* @__PURE__ */ jsx13(
|
|
7165
|
-
"input",
|
|
7166
|
-
{
|
|
7167
|
-
max: 30,
|
|
7168
|
-
min: 2,
|
|
7169
|
-
onChange: (event) => updateSelectedField("rotateIntervalSeconds", Number(event.target.value)),
|
|
7170
|
-
style: sidebarInputStyle,
|
|
7171
|
-
type: "number",
|
|
7172
|
-
value: rotateIntervalValue
|
|
7173
|
-
}
|
|
7174
|
-
)
|
|
7175
|
-
] }) : null
|
|
7176
|
-
] });
|
|
7177
|
-
})() }) : null,
|
|
7178
|
-
isArrayItemBlockSelected ? /* @__PURE__ */ jsx13(
|
|
7179
|
-
ArrayItemsEditor,
|
|
7180
|
-
{
|
|
7181
|
-
blockType: selectedType,
|
|
7182
|
-
expandedItemIndex,
|
|
7183
|
-
isUploadingItemMedia: isSelectedItemMediaUploading,
|
|
7184
|
-
items: selectedItems,
|
|
7185
|
-
mediaLibrary,
|
|
7186
|
-
mediaLibraryError,
|
|
7187
|
-
mediaLibraryLoading,
|
|
7188
|
-
mode: "advanced",
|
|
7189
|
-
onAddItem: appendDefaultItemToSelected,
|
|
7190
|
-
onRemoveItem: (itemIndex) => removeItemFromSelected("items", itemIndex),
|
|
7191
|
-
onSetItemMediaFromLibrary: setSelectedItemMediaFieldFromLibrary,
|
|
7192
|
-
onToggleItem: toggleSelectedItem,
|
|
7193
|
-
onUpdateItemField: (itemIndex, fieldName, value) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, fieldName, value),
|
|
7194
|
-
onUpdateItemSetting: (itemIndex, path, value) => updateArrayItemSettingField(selectedIndex ?? 0, "items", itemIndex, path, value),
|
|
7195
|
-
onUploadItemMedia: uploadItemMediaFromV2,
|
|
7196
|
-
searchQuery: "",
|
|
7197
|
-
showInlineCopyFields: true,
|
|
7198
|
-
uploadDisabled: uploadingTarget !== null
|
|
7199
|
-
}
|
|
7200
|
-
) : null
|
|
7201
|
-
] }),
|
|
5960
|
+
/* @__PURE__ */ jsx13(
|
|
5961
|
+
BlockInspectorRenderer,
|
|
5962
|
+
{
|
|
5963
|
+
block: selectedBlock,
|
|
5964
|
+
blockType: selectedType,
|
|
5965
|
+
mode: settingsPanelMode,
|
|
5966
|
+
onModeChange: setSettingsPanelMode,
|
|
5967
|
+
onSearchQueryChange: setSettingsSearchQuery,
|
|
5968
|
+
onUpdateField: updateSelectedField,
|
|
5969
|
+
onUpdateSetting: updateSelectedSettingField,
|
|
5970
|
+
searchQuery: settingsSearchQuery
|
|
5971
|
+
}
|
|
5972
|
+
),
|
|
5973
|
+
isArrayItemBlockSelected ? /* @__PURE__ */ jsx13(
|
|
5974
|
+
ArrayItemsEditor,
|
|
5975
|
+
{
|
|
5976
|
+
blockType: selectedType,
|
|
5977
|
+
expandedItemIndex,
|
|
5978
|
+
isUploadingItemMedia: isSelectedItemMediaUploading,
|
|
5979
|
+
items: selectedItems,
|
|
5980
|
+
mediaLibrary,
|
|
5981
|
+
mediaLibraryError,
|
|
5982
|
+
mediaLibraryLoading,
|
|
5983
|
+
mode: settingsPanelMode,
|
|
5984
|
+
onAddItem: appendDefaultItemToSelected,
|
|
5985
|
+
onRemoveItem: (itemIndex) => removeItemFromSelected("items", itemIndex),
|
|
5986
|
+
onSetItemMediaFromLibrary: setSelectedItemMediaFieldFromLibrary,
|
|
5987
|
+
onToggleItem: toggleSelectedItem,
|
|
5988
|
+
onUpdateItemField: (itemIndex, fieldName, value) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, fieldName, value),
|
|
5989
|
+
onUpdateItemSetting: (itemIndex, path, value) => updateArrayItemSettingField(selectedIndex ?? 0, "items", itemIndex, path, value),
|
|
5990
|
+
onUploadItemMedia: uploadItemMediaFromV2,
|
|
5991
|
+
searchQuery: settingsSearchQuery,
|
|
5992
|
+
showInlineCopyFields: editCopyInPanelEnabled,
|
|
5993
|
+
uploadDisabled: uploadingTarget !== null
|
|
5994
|
+
}
|
|
5995
|
+
) : null,
|
|
7202
5996
|
/* @__PURE__ */ jsxs12("label", { style: sidebarLabelStyle, children: [
|
|
7203
5997
|
"Upload Alt Text",
|
|
7204
5998
|
/* @__PURE__ */ jsx13(
|