@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.
@@ -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 useEffect5, useMemo as useMemo3, useRef as useRef2, useState as useState6 } from "react";
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 useEffect3, useRef, useState as useState4 } from "react";
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] = useState4(false);
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
- useEffect3(() => {
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 useEffect4, useState as useState5 } from "react";
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] = useState5(null);
1872
- const [dropHovered, setDropHovered] = useState5(false);
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
- useEffect4(() => {
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
- disableSettingsPanelV2Toggle,
2727
- onOpenPanel,
2728
- onToggleSettingsPanelV2,
2729
- settingsPanelV2Enabled
2675
+ onOpenPanel
2730
2676
  }) {
2731
- return /* @__PURE__ */ jsxs10(
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] = useState6(
3828
+ const [layout, setLayout] = useState5(
3910
3829
  migrateLayoutToSettingsV2(cloneBlockLayout(initialLayout).map((block) => withSectionStyleDefaults2(block)))
3911
3830
  );
3912
- const [pageDefaults, setPageDefaults] = useState6(clonePageDefaults(initialPageDefaults));
3913
- const [selectedIndex, setSelectedIndex] = useState6(null);
3914
- const [dragIndex, setDragIndex] = useState6(null);
3915
- const [sidebarOpen, setSidebarOpen] = useState6(true);
3916
- const [savingStatus, setSavingStatus] = useState6(null);
3917
- const [uploadingTarget, setUploadingTarget] = useState6(null);
3918
- const [topViewportHeight, setTopViewportHeight] = useState6(null);
3919
- const [uploadError, setUploadError] = useState6("");
3920
- const [uploadMessage, setUploadMessage] = useState6("");
3921
- const [uploadAltText, setUploadAltText] = useState6("");
3922
- const [mediaLibrary, setMediaLibrary] = useState6([]);
3923
- const [mediaLibraryError, setMediaLibraryError] = useState6("");
3924
- const [mediaLibraryLoading, setMediaLibraryLoading] = useState6(false);
3925
- const [selectedHeroMediaID, setSelectedHeroMediaID] = useState6("");
3926
- const [selectedItemIndex, setSelectedItemIndex] = useState6(null);
3927
- const [expandedItemIndex, setExpandedItemIndex] = useState6(null);
3928
- const [testimonialsOffsets, setTestimonialsOffsets] = useState6({});
3929
- const [presetQuery, setPresetQuery] = useState6("");
3930
- const [sessionExpired, setSessionExpired] = useState6(false);
3931
- const [pastSnapshots, setPastSnapshots] = useState6([]);
3932
- const [futureSnapshots, setFutureSnapshots] = useState6([]);
3933
- const [settingsPanelMode, setSettingsPanelMode] = useState6("basic");
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 persistedFlagKey = "orion-builder-settings-panel-v2";
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 resolveMediaLibraryItemFromValue = (value) => {
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
- useEffect5(() => {
3919
+ useEffect4(() => {
4029
3920
  void loadMediaLibrary();
4030
3921
  }, [loadMediaLibrary]);
4031
- useEffect5(() => {
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
- useEffect5(() => {
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 = useMemo3(
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 = useMemo3(
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
- useEffect5(() => {
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 = useMemo3(
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
- useEffect5(() => {
4595
+ useEffect4(() => {
4768
4596
  if (selectedIndex === null) {
4769
4597
  return;
4770
4598
  }
4771
4599
  setSidebarOpen(true);
4772
4600
  setActiveSidebarPanel("selected");
4773
4601
  }, [selectedIndex]);
4774
- useEffect5(() => {
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
- useEffect5(() => {
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
- useEffect5(() => {
4627
+ useEffect4(() => {
4800
4628
  return;
4801
4629
  }, [layout]);
4802
- useEffect5(() => {
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
- useEffect5(() => {
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
- useEffect5(() => {
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
- useEffect5(() => {
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
- useEffect5(() => {
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
- useEffect5(() => {
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
- disableSettingsPanelV2Toggle: typeof featureFlags?.settingsPanelV2 === "boolean",
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
- v2InspectorEnabledForSelected ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
6136
- /* @__PURE__ */ jsx13(
6137
- BlockInspectorRenderer,
6138
- {
6139
- block: selectedBlock,
6140
- blockType: selectedType,
6141
- mode: settingsPanelMode,
6142
- onModeChange: setSettingsPanelMode,
6143
- onSearchQueryChange: setSettingsSearchQuery,
6144
- onUpdateField: updateSelectedField,
6145
- onUpdateSetting: updateSelectedSettingField,
6146
- searchQuery: settingsSearchQuery
6147
- }
6148
- ),
6149
- isArrayItemBlockSelected ? /* @__PURE__ */ jsx13(
6150
- ArrayItemsEditor,
6151
- {
6152
- blockType: selectedType,
6153
- expandedItemIndex,
6154
- isUploadingItemMedia: isSelectedItemMediaUploading,
6155
- items: selectedItems,
6156
- mediaLibrary,
6157
- mediaLibraryError,
6158
- mediaLibraryLoading,
6159
- mode: settingsPanelMode,
6160
- onAddItem: appendDefaultItemToSelected,
6161
- onRemoveItem: (itemIndex) => removeItemFromSelected("items", itemIndex),
6162
- onSetItemMediaFromLibrary: setSelectedItemMediaFieldFromLibrary,
6163
- onToggleItem: toggleSelectedItem,
6164
- onUpdateItemField: (itemIndex, fieldName, value) => updateArrayItemField(selectedIndex ?? 0, "items", itemIndex, fieldName, value),
6165
- onUpdateItemSetting: (itemIndex, path, value) => updateArrayItemSettingField(selectedIndex ?? 0, "items", itemIndex, path, value),
6166
- onUploadItemMedia: uploadItemMediaFromV2,
6167
- searchQuery: settingsSearchQuery,
6168
- showInlineCopyFields: editCopyInPanelEnabled,
6169
- uploadDisabled: uploadingTarget !== null
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(